.jng-app,
.jng-app * {
    box-sizing: border-box;
}

.jng-app {
    --jng-pink: #ed5c8f;
    --jng-pink-dark: #9f244b;
    --jng-pink-soft: #fff1f5;
    --jng-border: #f3c6d4;
    --jng-ink: #221d20;
    --jng-muted: #71686c;
    --jng-blue: #2368d7;
    --jng-cream: #fffaf8;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    max-width: 1240px;
    margin: 32px auto;
    padding: 40px 28px 28px;
    color: var(--jng-ink);
    border: 1px solid #f1d9df;
    border-radius: 26px;
    background:
        radial-gradient(circle at 10% 6%, rgba(255, 220, 231, .78), transparent 22%),
        radial-gradient(circle at 90% 6%, rgba(255, 220, 231, .78), transparent 22%),
        linear-gradient(180deg, #fffdfc 0%, #fff9f7 100%);
    box-shadow: 0 20px 60px rgba(113, 49, 70, .12);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jng-pattern {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .45;
    background-image:
        radial-gradient(circle at 100% 150%, transparent 24px, rgba(238, 121, 157, .08) 25px, transparent 27px),
        radial-gradient(circle at 0 150%, transparent 24px, rgba(238, 121, 157, .08) 25px, transparent 27px);
    background-size: 52px 32px;
    pointer-events: none;
}

.jng-branch {
    position: absolute;
    top: -7px;
    z-index: -1;
    width: 285px;
    height: 135px;
    pointer-events: none;
}

.jng-branch::before {
    content: "";
    position: absolute;
    top: 32px;
    width: 285px;
    height: 9px;
    border-radius: 100%;
    background: linear-gradient(90deg, #764231, #a96850 58%, transparent);
    transform: rotate(15deg);
    transform-origin: left center;
    opacity: .9;
}

.jng-branch-left { left: -50px; }
.jng-branch-right { right: -50px; transform: scaleX(-1); }

.jng-branch span {
    position: absolute;
    color: #f179a1;
    font-size: 30px;
    text-shadow: 0 2px 0 #fff;
}

.jng-branch span:nth-child(1) { left: 70px; top: 20px; }
.jng-branch span:nth-child(2) { left: 112px; top: 42px; font-size: 23px; }
.jng-branch span:nth-child(3) { left: 154px; top: 13px; font-size: 34px; }
.jng-branch span:nth-child(4) { left: 203px; top: 45px; font-size: 22px; }
.jng-branch span:nth-child(5) { left: 235px; top: 19px; font-size: 27px; }

.jng-hero {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}

.jng-hero h2 {
    margin: 0;
    color: #171416;
    font-family: Georgia, "Times New Roman", "Noto Serif JP", serif;
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
}

.jng-hero h2 span {
    color: var(--jng-pink);
    font-size: .52em;
    vertical-align: middle;
}

.jng-hero p {
    margin: 12px 0 0;
    color: #494144;
    font-size: clamp(15px, 1.8vw, 19px);
}

.jng-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.jng-panel {
    border: 1px solid rgba(234, 191, 204, .78);
    border-radius: 20px;
    background: rgba(255, 255, 255, .89);
    box-shadow: 0 10px 28px rgba(106, 57, 72, .09);
    backdrop-filter: blur(8px);
}

.jng-controls-panel {
    padding: 26px;
}

.jng-panel h3 {
    margin: 0 0 25px;
    color: #8f1e40;
    font-family: Georgia, "Times New Roman", "Noto Serif JP", serif;
    font-size: 24px;
    line-height: 1.2;
}

.jng-heading-icon {
    color: var(--jng-pink);
}

.jng-form {
    display: grid;
    gap: 20px;
}

.jng-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.jng-fieldset legend,
.jng-field > label {
    display: block;
    width: 100%;
    margin: 0 0 9px;
    color: #242023;
    font-size: 15px;
    font-weight: 750;
}

.jng-field > label span {
    color: var(--jng-muted);
    font-weight: 500;
}

.jng-choice-grid {
    display: grid;
    gap: 8px;
}

.jng-choice-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jng-choice-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.jng-choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.jng-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.jng-choice > span {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 8px;
    color: #312b2e;
    border: 1px solid #ddd6d8;
    border-radius: 9px;
    background: #fff;
    font-size: 14px;
    font-weight: 650;
    text-align: center;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.jng-choice:hover > span {
    border-color: #e3a6ba;
    transform: translateY(-1px);
}

.jng-choice input:focus-visible + span {
    outline: 3px solid rgba(35, 104, 215, .18);
    outline-offset: 2px;
}

.jng-choice input:checked + span {
    color: #1454b4;
    border-color: #4385ec;
    background: #f5f9ff;
    box-shadow: 0 0 0 2px rgba(48, 120, 231, .08) inset;
}

.jng-choice:nth-child(2) input:checked + span {
    color: #c82f63;
    border-color: #ef9aba;
    background: #fff7fa;
}

.jng-field input[type="text"],
.jng-field select {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 13px;
    color: #262124;
    border: 1px solid #ddd5d8;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    box-shadow: none;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.jng-field select {
    appearance: auto;
}

.jng-field input[type="text"]:focus,
.jng-field select:focus {
    border-color: #ef7fa5;
    box-shadow: 0 0 0 3px rgba(237, 92, 143, .12);
}

.jng-field input::placeholder { color: #aaa2a5; }

.jng-field small {
    display: block;
    margin-top: 8px;
    color: #81777b;
    font-size: 12px;
}

.jng-turnstile-wrap {
    overflow: hidden;
    min-height: 65px;
    border-radius: 8px;
}

.jng-submit {
    position: relative;
    display: inline-flex;
    min-height: 52px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #ef6b98, #e84c82);
    box-shadow: 0 9px 20px rgba(221, 70, 121, .2);
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 750;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.jng-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 13px 24px rgba(221, 70, 121, .26);
}

.jng-submit:focus-visible {
    outline: 3px solid rgba(35, 104, 215, .25);
    outline-offset: 3px;
}

.jng-submit:disabled {
    cursor: wait;
    opacity: .76;
}

.jng-spinner {
    display: none;
    width: 21px;
    height: 21px;
    border: 3px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jng-spin .8s linear infinite;
}

.jng-submit.is-loading .jng-submit-label { display: none; }
.jng-submit.is-loading .jng-spinner { display: block; }

@keyframes jng-spin { to { transform: rotate(360deg); } }

.jng-free-note {
    margin: -3px 0 0;
    color: #da3e72;
    font-size: 13px;
    text-align: center;
}

.jng-form-status {
    display: none;
    margin: -6px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.jng-form-status:not(:empty) { display: block; }
.jng-form-status.is-loading { color: #6b4d1c; background: #fff8dc; }
.jng-form-status.is-success { color: #17613b; background: #eaf8f0; }
.jng-form-status.is-error { color: #972f3d; background: #fff0f2; }

.jng-results-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 26px 28px 20px;
}

.jng-results-heading h3 { margin-bottom: 20px; }
.jng-results-heading h3 span { color: var(--jng-pink); }

.jng-results {
    display: grid;
    gap: 14px;
    min-height: 420px;
    align-content: start;
}

.jng-empty-state {
    display: flex;
    min-height: 420px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px;
    color: #7b7074;
    border: 1px dashed #edc5d2;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255,247,250,.76), rgba(255,255,255,.4));
    text-align: center;
}

.jng-empty-state > div {
    color: #e786a7;
    font-family: Georgia, "Times New Roman", "Noto Serif JP", serif;
    font-size: 70px;
    line-height: 1;
}

.jng-empty-state h4 {
    margin: 18px 0 7px;
    color: #73203c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.jng-empty-state p { margin: 0; }

.jng-name-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(165px, .75fr);
    gap: 25px;
    min-height: 150px;
    padding: 20px 18px 18px 82px;
    overflow: hidden;
    border: 1px solid #f0b3c6;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff 0%, #fffafb 100%);
    box-shadow: 0 6px 18px rgba(119, 46, 69, .05);
    animation: jng-card-in .45s ease both;
    animation-delay: calc(var(--jng-index) * 60ms);
}

@keyframes jng-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.jng-number {
    position: absolute;
    top: 20px;
    left: 20px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #f078a1, #e84a80);
    font-size: 18px;
    font-weight: 800;
}

.jng-name-main { min-width: 0; }

.jng-name-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.jng-name-top h4 {
    margin: 0;
    overflow-wrap: anywhere;
    color: #171416;
    font-family: Georgia, "Times New Roman", "Noto Serif JP", serif;
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.05;
}

.jng-copy {
    flex: 0 0 auto;
    padding: 6px 10px;
    color: #9c3153;
    border: 1px solid #efbfd0;
    border-radius: 999px;
    background: #fff7fa;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
}

.jng-copy.is-copied {
    color: #17613b;
    border-color: #a9ddbe;
    background: #eef9f2;
}

.jng-script-row {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 15px;
}

.jng-kanji {
    flex: 0 0 auto;
    padding-right: 24px;
    border-right: 1px solid #eadfe2;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;
    white-space: nowrap;
}

.jng-kana {
    display: grid;
    gap: 7px;
    min-width: 0;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: 18px;
}

.jng-kana small {
    color: #594f53;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
}

.jng-details {
    align-self: center;
    margin: 25px 0 0;
}

.jng-details dt {
    margin: 0 0 3px;
    color: #211c1f;
    font-size: 14px;
    font-weight: 800;
}

.jng-details dd {
    margin: 0 0 12px;
    color: #5d5558;
    font-size: 14px;
    line-height: 1.4;
}

.jng-tags {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    gap: 7px;
    pointer-events: none;
}

.jng-tag {
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 750;
}

.jng-tag-gender { color: #1956a8; background: #eaf3ff; }
.jng-tag-style { color: #a14b29; background: #fff0e9; }

.jng-disclaimer {
    margin: auto 0 0;
    padding-top: 20px;
    color: #6e6569;
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.jng-disclaimer span { color: var(--jng-pink); }

@media (max-width: 960px) {
    .jng-layout { grid-template-columns: 1fr; }
    .jng-controls-panel { max-width: none; }
    .jng-results { min-height: 340px; }
    .jng-empty-state { min-height: 330px; }
}

@media (max-width: 680px) {
    .jng-app {
        margin: 18px auto;
        padding: 28px 12px 12px;
        border-radius: 18px;
    }

    .jng-branch { opacity: .6; transform: scale(.72); }
    .jng-branch-left { left: -95px; top: -20px; }
    .jng-branch-right { right: -95px; top: -20px; transform: scaleX(-1) scale(.72); }
    .jng-hero { margin-bottom: 24px; padding: 0 15px; }
    .jng-controls-panel, .jng-results-panel { padding: 20px 15px; border-radius: 15px; }
    .jng-choice-grid-3 { grid-template-columns: 1fr; }

    .jng-name-card {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 72px 15px 18px;
    }

    .jng-number { top: 17px; left: 15px; }
    .jng-tags { top: 20px; right: 15px; }
    .jng-name-top h4 { font-size: 30px; }
    .jng-script-row { gap: 16px; }
    .jng-kanji { padding-right: 16px; font-size: 42px; white-space: normal; }
    .jng-details { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .jng-app *, .jng-app *::before, .jng-app *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}