/* =====================================================================
   Shinsei Signature Builder
   Reuses the village palette and crests from Shinsei's existing theme.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. RENDERED SIGNATURE CARD
   --------------------------------------------------------------------- */
.shinsei-sigcard {
    --ssb-accent: #d97c63;
    --ssb-glow: rgba(217, 124, 99, 0.25);
    --ssb-tint: rgba(217, 124, 99, 0.10);
    --ssb-edge: rgba(217, 124, 99, 0.34);
    --ssb-crest: none;
    --ssb-image-opacity: 0.74;
    --ssb-image-x: 50%;
    --ssb-image-y: 50%;

    position: relative;
    isolation: isolate;
    width: min(100%, 780px);
    min-height: 238px;
    margin: 12px auto;
    overflow: hidden;
    color: #e8e2dc;
    background:
        radial-gradient(110% 120% at 0% 50%, var(--ssb-tint), transparent 58%),
        linear-gradient(145deg, rgba(30, 27, 24, 0.98), rgba(18, 17, 15, 0.98));
    border: 1px solid rgba(0, 0, 0, 0.88);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 -1px 0 rgba(0, 0, 0, 0.62),
        0 10px 28px rgba(0, 0, 0, 0.35),
        0 0 22px var(--ssb-glow);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left;
    box-sizing: border-box;
}

.shinsei-sigcard[data-village="konoha"] {
    --ssb-accent: #7faf3a;
    --ssb-glow: rgba(91, 168, 3, 0.28);
    --ssb-tint: rgba(91, 168, 3, 0.10);
    --ssb-edge: rgba(127, 175, 58, 0.34);
    --ssb-crest: url("https://shinsei.rpgturk.net/images/konoha.svg");
}
.shinsei-sigcard[data-village="kiri"] {
    --ssb-accent: #3d82b8;
    --ssb-glow: rgba(0, 127, 255, 0.25);
    --ssb-tint: rgba(61, 130, 184, 0.11);
    --ssb-edge: rgba(61, 130, 184, 0.36);
    --ssb-crest: url("https://shinsei.rpgturk.net/images/kiri.svg");
}
.shinsei-sigcard[data-village="suna"] {
    --ssb-accent: #c7a64e;
    --ssb-glow: rgba(253, 226, 115, 0.20);
    --ssb-tint: rgba(199, 166, 78, 0.10);
    --ssb-edge: rgba(199, 166, 78, 0.34);
    --ssb-crest: url("https://shinsei.rpgturk.net/images/suna.svg");
}
.shinsei-sigcard[data-village="iwa"] {
    --ssb-accent: #cd7a30;
    --ssb-glow: rgba(210, 105, 30, 0.27);
    --ssb-tint: rgba(205, 122, 48, 0.10);
    --ssb-edge: rgba(205, 122, 48, 0.35);
    --ssb-crest: url("https://shinsei.rpgturk.net/images/iwa.svg");
}
.shinsei-sigcard[data-village="kumo"] {
    --ssb-accent: #bdb393;
    --ssb-glow: rgba(255, 249, 214, 0.16);
    --ssb-tint: rgba(189, 179, 147, 0.09);
    --ssb-edge: rgba(189, 179, 147, 0.30);
    --ssb-crest: url("https://shinsei.rpgturk.net/images/kumo.svg");
}
.shinsei-sigcard[data-village="ame"] {
    --ssb-accent: #93a6bf;
    --ssb-glow: rgba(215, 227, 241, 0.17);
    --ssb-tint: rgba(147, 166, 191, 0.10);
    --ssb-edge: rgba(147, 166, 191, 0.32);
    --ssb-crest: url("https://shinsei.rpgturk.net/images/ame.svg");
}

.shinsei-sigcard::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: linear-gradient(180deg, transparent, var(--ssb-accent), transparent);
    opacity: 0.9;
    box-shadow: 0 0 14px var(--ssb-glow);
}

.shinsei-sigcard__art {
    position: absolute;
    z-index: -3;
    inset: 0 auto 0 0;
    width: 58%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--ssb-image-x) var(--ssb-image-y);
    opacity: var(--ssb-image-opacity);
    filter: saturate(0.86) contrast(1.04);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.66) 67%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.66) 67%, transparent 100%);
    pointer-events: none;
}

.shinsei-sigcard__scrim {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 9, 8, 0.22), rgba(18, 17, 15, 0.72) 52%, rgba(18, 17, 15, 0.97) 78%),
        linear-gradient(180deg, rgba(0,0,0,.20), transparent 35%, rgba(0,0,0,.24));
    pointer-events: none;
}

.shinsei-sigcard:not(.has-image) .shinsei-sigcard__art {
    display: none;
}

.shinsei-sigcard__inner {
    position: relative;
    z-index: 2;
    min-height: 238px;
    padding: 18px 22px 18px;
    box-sizing: border-box;
}

.shinsei-sigcard.has-image .shinsei-sigcard__inner {
    padding-left: clamp(220px, 37%, 292px);
}

.shinsei-sigcard__header {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.shinsei-sigcard__heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shinsei-sigcard__kicker {
    color: #f2ece6;
    font-size: 14px;
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shinsei-sigcard__village {
    color: var(--ssb-accent);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--ssb-glow);
}

.shinsei-sigcard__crest {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background-image: var(--ssb-crest);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert(1);
    opacity: 0.42;
}

.shinsei-sigcard[data-village="neutral"] .shinsei-sigcard__crest,
.shinsei-sigcard[data-village=""] .shinsei-sigcard__crest {
    display: none;
}

.shinsei-sigcard__tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 11px 0 12px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.shinsei-sigcard__tabs::-webkit-scrollbar { display: none; }

.shinsei-sigcard__tab {
    appearance: none;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 6px 9px !important;
    color: rgba(226, 219, 212, 0.66) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transform: none !important;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease !important;
}

.shinsei-sigcard__tab:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: var(--ssb-edge) !important;
    transform: none !important;
}

.shinsei-sigcard__tab.is-active {
    color: var(--ssb-accent) !important;
    background: var(--ssb-tint) !important;
    border-color: var(--ssb-edge) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 10px var(--ssb-glow) !important;
}

.shinsei-sigcard__panel {
    display: none;
    min-height: 96px;
    color: rgba(232, 226, 220, 0.92);
    font-size: 12px;
    line-height: 1.52;
    overflow-wrap: anywhere;
}

.shinsei-sigcard__panel.is-active {
    display: block;
    animation: ssbPanelIn 160ms ease-out;
}

/* Progressive fallback: content remains readable if JavaScript is unavailable. */
.shinsei-sigcard:not([data-ssb-ready="1"]) .shinsei-sigcard__panel:first-child {
    display: block;
}

.shinsei-sigcard__panel-title {
    display: none;
    margin: 0 0 8px;
    color: var(--ssb-accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.shinsei-sigcard__panel a {
    color: var(--ssb-accent) !important;
}

.shinsei-sigcard__panel p {
    margin: 0.3em 0 !important;
}

.shinsei-sigcard__panel ul,
.shinsei-sigcard__panel ol {
    margin: 0.25em 0 0.25em 1.25em !important;
    padding: 0 !important;
}

.shinsei-sigcard__field {
    display: grid;
    grid-template-columns: minmax(76px, 0.45fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.shinsei-sigcard__field:last-child {
    border-bottom: 0;
}

.shinsei-sigcard__field-label {
    color: rgba(194, 185, 176, 0.58);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.shinsei-sigcard__field-value {
    min-width: 0;
    color: rgba(242, 237, 232, 0.94);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 550;
}

.shinsei-sigcard__image-source {
    display: none !important;
}

@keyframes ssbPanelIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   2. STANDALONE EDITOR LAUNCHER
   --------------------------------------------------------------------- */
.ssb-launch-panel {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 12px !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    color: #d8d0c9;
    background:
        linear-gradient(90deg, rgba(217,124,99,.10), transparent 66%),
        rgba(24,22,20,.96);
    border: 1px solid rgba(217,124,99,.22);
    border-radius: 9px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 3px 12px rgba(0,0,0,.20);
}

.ssb-launch-panel__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ssb-launch-panel__copy strong {
    color: #eee7e0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.ssb-launch-panel__copy span {
    color: rgba(194,185,176,.66);
    font-size: 10.5px;
    line-height: 1.35;
}

.ssb-launch-panel__action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.shinsei-signature-builder-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: auto !important;
    min-width: 148px !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 7px 13px !important;
    color: #f0e5dd !important;
    background: rgba(145,70,49,.62) !important;
    border: 1px solid rgba(217,124,99,.46) !important;
    border-radius: 7px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.30),
        0 2px 8px rgba(0,0,0,.24) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    transform: none !important;
    cursor: pointer !important;
}

.shinsei-signature-builder-button::before {
    content: "忍";
    color: #f2b09c;
    font-size: 13px;
    line-height: 1;
}

.shinsei-signature-builder-button:hover {
    color: #fff !important;
    background: rgba(169,78,53,.78) !important;
    border-color: rgba(229,137,111,.70) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 640px) {
    .ssb-launch-panel {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .ssb-launch-panel__action,
    .shinsei-signature-builder-button {
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------------
   3. VISUAL BUILDER MODAL
   --------------------------------------------------------------------- */
body.ssb-modal-open {
    overflow: hidden !important;
}

#ssb-builder-overlay {
    position: fixed;
    z-index: 1000005;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(8, 7, 6, 0.76);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
    box-sizing: border-box;
}

#ssb-builder-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ssb-builder {
    width: min(1180px, 100%);
    max-height: min(900px, calc(100vh - 44px));
    display: grid;
    grid-template-columns: minmax(390px, 0.92fr) minmax(440px, 1.08fr);
    overflow: hidden;
    color: #e5ded7;
    background: rgba(22, 20, 18, 0.985);
    border: 1px solid rgba(0, 0, 0, 0.9);
    border-radius: 13px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.62),
        0 25px 70px rgba(0,0,0,.62);
    transform: translateY(10px) scale(.985);
    transition: transform 190ms ease;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ssb-builder-overlay.is-open .ssb-builder {
    transform: translateY(0) scale(1);
}

.ssb-builder__form-side,
.ssb-builder__preview-side {
    min-width: 0;
    min-height: 0;
}

.ssb-builder__form-side {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.07);
}

.ssb-builder__header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 15px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(90deg, rgba(217,124,99,.09), transparent 70%);
}

.ssb-builder__title {
    margin: 0 !important;
    color: #eee7e0;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 730 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ssb-builder__subtitle {
    margin: 5px 0 0 !important;
    color: rgba(194,185,176,.62);
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.ssb-builder__close {
    appearance: none;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    color: #a99f96 !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer;
    transform: none !important;
}

.ssb-builder__close:hover {
    color: #fff !important;
    background: rgba(217,124,99,.12) !important;
    border-color: rgba(217,124,99,.3) !important;
    transform: none !important;
}

.ssb-builder__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 17px 20px 24px;
    scrollbar-color: rgba(217,124,99,.35) transparent;
    scrollbar-width: thin;
}

.ssb-builder__section {
    margin: 0 0 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.ssb-builder__section:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.ssb-builder__section-title {
    margin: 0 0 11px !important;
    color: #cfc6bd;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.ssb-builder__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.ssb-builder__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ssb-builder__field--wide {
    grid-column: 1 / -1;
}

.ssb-builder__label {
    color: rgba(203,194,185,.68);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 650;
}

.ssb-builder input[type="text"],
.ssb-builder input[type="url"],
.ssb-builder input[type="number"],
.ssb-builder select,
.ssb-builder textarea {
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    color: #e9e3dd !important;
    background-color: #191714 !important;
    border: 1px solid #38312b !important;
    border-radius: 7px !important;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.32),
        0 1px 0 rgba(255,255,255,.025) !important;
    outline: 0 !important;
    font: inherit !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    resize: vertical;
}

.ssb-builder textarea {
    min-height: 112px;
}

.ssb-builder input:focus,
.ssb-builder select:focus,
.ssb-builder textarea:focus {
    border-color: rgba(217,124,99,.52) !important;
    box-shadow: 0 0 0 2px rgba(217,124,99,.10) !important;
}

.ssb-builder select option {
    color: #e9e3dd;
    background: #191714;
}

.ssb-builder__textarea-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
}


.ssb-builder__placement-options {
    display: grid;
    gap: 8px;
}

.ssb-builder__placement-options[hidden],
.ssb-builder__placement-note[hidden] {
    display: none !important;
}

.ssb-builder__placement-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 !important;
    padding: 10px 11px;
    color: #d5ccc3;
    background: rgba(25,23,20,.74);
    border: 1px solid #37302a;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.ssb-builder__placement-choice:hover {
    background: rgba(35,31,27,.82);
    border-color: rgba(217,124,99,.34);
}

.ssb-builder__placement-choice:has(input:checked) {
    background: rgba(217,124,99,.08);
    border-color: rgba(217,124,99,.48);
    box-shadow: inset 3px 0 0 rgba(217,124,99,.82);
}

.ssb-builder__placement-choice--danger:has(input:checked) {
    background: rgba(184,72,66,.08);
    border-color: rgba(220,126,117,.5);
    box-shadow: inset 3px 0 0 rgba(220,126,117,.82);
}

.ssb-builder__placement-choice input[type="radio"] {
    flex: 0 0 auto;
    width: 15px !important;
    height: 15px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    accent-color: #d97c63;
    box-shadow: none !important;
}

.ssb-builder__placement-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ssb-builder__placement-copy strong {
    color: #e5ddd5;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
}

.ssb-builder__placement-copy small {
    color: rgba(190,181,172,.58);
    font-size: 9px;
    line-height: 1.4;
}

.ssb-builder__placement-note {
    padding: 10px 11px;
    color: rgba(213,204,195,.72);
    background: rgba(145,186,104,.065);
    border: 1px solid rgba(145,186,104,.2);
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.5;
}

.ssb-builder__hint {
    color: rgba(180,171,162,.54);
    font-size: 9px;
    line-height: 1.4;
}

.ssb-builder__mini-button,
.ssb-builder__button {
    appearance: none;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #ddd5cd !important;
    background: rgba(34,31,28,.96) !important;
    border: 1px solid rgba(0,0,0,.7) !important;
    border-radius: 7px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 2px 6px rgba(0,0,0,.25) !important;
    font: inherit !important;
    font-weight: 650 !important;
    cursor: pointer;
    transform: none !important;
}

.ssb-builder__mini-button {
    flex: 0 0 auto;
    padding: 6px 9px !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

.ssb-builder__button {
    min-height: 36px;
    padding: 8px 13px !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

.ssb-builder__mini-button:hover,
.ssb-builder__button:hover {
    color: #fff !important;
    background: rgba(45,41,38,.98) !important;
    border-color: rgba(217,124,99,.36) !important;
    transform: none !important;
}

.ssb-builder__button--primary {
    color: #fff !important;
    background: rgba(176, 91, 68, .94) !important;
    border-color: rgba(217,124,99,.55) !important;
}

.ssb-builder__button--primary:hover {
    background: rgba(196, 103, 78, .98) !important;
}

.ssb-builder__button[disabled],
.ssb-builder__mini-button[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.ssb-builder__upload {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 12px;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(217,124,99,.28);
    border-radius: 9px;
}

.ssb-builder__upload-thumb {
    width: 72px;
    height: 58px;
    overflow: hidden;
    background: #11100e;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
}

.ssb-builder__upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.ssb-builder__upload-thumb.has-image img { display: block; }

.ssb-builder__upload-copy {
    min-width: 0;
}

.ssb-builder__upload-title {
    display: block;
    color: #ded6ce;
    font-size: 11px;
    font-weight: 650;
}

.ssb-builder__upload-text {
    display: block;
    margin-top: 4px;
    color: rgba(184,175,166,.56);
    font-size: 9px;
    line-height: 1.35;
}

.ssb-builder__upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.ssb-builder__file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ssb-builder__ranges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.ssb-builder__range {
    min-width: 0;
}

.ssb-builder__range-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    color: rgba(198,189,180,.62);
    font-size: 9px;
}

.ssb-builder input[type="range"] {
    width: 100% !important;
    height: 18px;
    padding: 0 !important;
    accent-color: #d97c63;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ssb-builder__status {
    min-height: 16px;
    margin-top: 8px;
    color: #bcb2a8;
    font-size: 10px;
    line-height: 1.4;
}

.ssb-builder__status.is-error { color: #dc7e75; }
.ssb-builder__status.is-success { color: #91ba68; }

.ssb-builder__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(12,11,10,.42);
}

.ssb-builder__footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssb-builder__preview-side {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(110% 80% at 50% 0%, rgba(217,124,99,.055), transparent 65%),
        #12110f;
}

.ssb-builder__preview-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.ssb-builder__preview-title {
    margin: 0 !important;
    color: #cfc6bd;
    font-size: 10px !important;
    font-weight: 750 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.ssb-builder__preview-note {
    color: rgba(180,171,162,.48);
    font-size: 9px;
}

.ssb-builder__preview-stage {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    min-height: 0;
    overflow-y: auto;
    padding: 28px 22px;
}

.ssb-builder__preview-stage .shinsei-sigcard {
    width: 100%;
    margin: 0;
}

/* ---------------------------------------------------------------------
   4. JUTSU COMPATIBILITY MODE
   --------------------------------------------------------------------- */
.ssb-jutsu-mode-bar {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 12px;
    color: #ded7d0;
    background: linear-gradient(90deg, rgba(147,166,191,.13), rgba(26,24,22,.97));
    border: 1px solid rgba(147,166,191,.28);
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(0,0,0,.22);
    font-size: 11px;
}

.ssb-jutsu-mode-bar__copy strong {
    display: block;
    margin-bottom: 2px;
    color: #b8c6d7;
    font-size: 11px;
}

.ssb-jutsu-mode-bar__copy span {
    color: rgba(200,192,184,.62);
    font-size: 9px;
}

.ssb-jutsu-mode-bar__actions {
    display: flex;
    gap: 7px;
}

/* ---------------------------------------------------------------------
   5. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 920px) {
    .ssb-builder {
        grid-template-columns: 1fr;
        max-width: 680px;
        overflow-y: auto;
    }

    .ssb-builder__form-side {
        min-height: 640px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .ssb-builder__preview-side {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .shinsei-sigcard {
        min-height: 260px;
        border-radius: 10px;
    }

    .shinsei-sigcard__art {
        inset: 0 0 auto 0;
        width: 100%;
        height: 122px;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.78) 50%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.78) 50%, transparent 100%);
    }

    .shinsei-sigcard__scrim {
        background: linear-gradient(180deg, rgba(10,9,8,.18), rgba(18,17,15,.78) 36%, rgba(18,17,15,.98) 62%);
    }

    .shinsei-sigcard.has-image .shinsei-sigcard__inner,
    .shinsei-sigcard__inner {
        padding: 15px 15px 16px;
    }

    .shinsei-sigcard.has-image .shinsei-sigcard__header {
        margin-top: 66px;
    }

    .shinsei-sigcard__crest {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .shinsei-sigcard__field {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    #ssb-builder-overlay {
        padding: 0;
    }

    .ssb-builder {
        width: 100%;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
    }

    .ssb-builder__header,
    .ssb-builder__scroll,
    .ssb-builder__footer,
    .ssb-builder__preview-header {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ssb-builder__grid,
    .ssb-builder__ranges {
        grid-template-columns: 1fr;
    }

    .ssb-builder__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .ssb-builder__footer-actions {
        width: 100%;
    }

    .ssb-builder__footer-actions .ssb-builder__button {
        flex: 1 1 50%;
    }

    .ssb-builder__preview-stage {
        padding: 18px 12px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ssb-builder-overlay,
    .ssb-builder,
    .shinsei-sigcard__panel,
    .shinsei-sigcard__tab {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   0.1.6 — Fixed-height editor, independent scrolling, simpler visual style
   ===================================================================== */

/* Give the modal a definite viewport-bound height so both columns can
   calculate their own scroll areas reliably. */
#ssb-builder-overlay {
    padding: 18px;
    background: rgba(7, 7, 7, 0.76);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ssb-builder {
    width: min(1160px, 100%);
    height: min(820px, calc(100dvh - 36px));
    max-height: none;
    overflow: hidden;
    background: #181614;
    border: 1px solid #3a342f;
    border-radius: 11px;
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.48);
}

.ssb-builder__form-side,
.ssb-builder__preview-side {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.ssb-builder__form-side {
    border-right-color: #302b27;
}

.ssb-builder__header,
.ssb-builder__preview-header {
    background: #1c1917;
    border-bottom-color: #302b27;
}

.ssb-builder__header {
    padding: 16px 18px 14px;
}

.ssb-builder__title {
    font-size: 16px !important;
}

.ssb-builder__subtitle {
    color: #8f8780;
}

/* The left form is now a real, independent scroll area. */
.ssb-builder__scroll {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 16px 18px 26px;
    scrollbar-width: thin;
    scrollbar-color: #61554c #1a1816;
}

.ssb-builder__scroll::-webkit-scrollbar,
.ssb-builder__preview-stage::-webkit-scrollbar {
    width: 8px;
}

.ssb-builder__scroll::-webkit-scrollbar-track,
.ssb-builder__preview-stage::-webkit-scrollbar-track {
    background: #1a1816;
}

.ssb-builder__scroll::-webkit-scrollbar-thumb,
.ssb-builder__preview-stage::-webkit-scrollbar-thumb {
    background: #61554c;
    border: 2px solid #1a1816;
    border-radius: 999px;
}

.ssb-builder__section {
    margin-bottom: 18px;
    padding-bottom: 17px;
    border-bottom-color: #302b27;
}

.ssb-builder__section-title,
.ssb-builder__preview-title {
    color: #c8c0b8;
    letter-spacing: .09em !important;
}

.ssb-builder input[type="text"],
.ssb-builder input[type="url"],
.ssb-builder input[type="number"],
.ssb-builder select,
.ssb-builder textarea {
    background: #1d1a18 !important;
    border-color: #413a34 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.ssb-builder input[type="text"]:focus,
.ssb-builder input[type="url"]:focus,
.ssb-builder input[type="number"]:focus,
.ssb-builder select:focus,
.ssb-builder textarea:focus {
    border-color: #a56552 !important;
    box-shadow: 0 0 0 2px rgba(165, 101, 82, 0.12) !important;
}

.ssb-builder__close,
.ssb-builder__mini-button,
.ssb-builder__button {
    background: #25211e !important;
    border-color: #453d37 !important;
    box-shadow: none !important;
}

.ssb-builder__close:hover,
.ssb-builder__mini-button:hover,
.ssb-builder__button:hover {
    background: #302a26 !important;
    border-color: #67564c !important;
}

.ssb-builder__button--primary {
    background: #9c5946 !important;
    border-color: #b86d57 !important;
}

.ssb-builder__button--primary:hover {
    background: #ad654f !important;
}

.ssb-builder__placement-choice,
.ssb-builder__upload,
.ssb-builder__placement-note {
    background: #1d1a18;
    border-color: #3d3732;
    box-shadow: none !important;
}

.ssb-builder__placement-choice:has(input:checked) {
    background: #231e1b;
    border-color: #8c5949;
    box-shadow: inset 3px 0 0 #a56552 !important;
}

.ssb-builder__placement-choice--danger:has(input:checked) {
    background: #231b1a;
    border-color: #8f514d;
    box-shadow: inset 3px 0 0 #a95c56 !important;
}

.ssb-builder__footer {
    padding: 12px 18px;
    background: #161412;
    border-top-color: #302b27;
}

/* Keep the preview at the top of its column instead of vertically centering
   it below a large empty area. It has its own scrollbar when needed. */
.ssb-builder__preview-side {
    background: #141311;
}

.ssb-builder__preview-header {
    padding: 16px 18px 13px;
}

.ssb-builder__preview-stage {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 22px 20px 28px;
    background: #141311;
}

.ssb-builder__preview-stage .shinsei-sigcard {
    flex: 0 0 auto;
}

/* Flatter, calmer rendered card. Village identity remains through the
   accent colour and crest, without glow-heavy effects. */
.shinsei-sigcard {
    --ssb-glow: transparent;
    background: linear-gradient(180deg, #191816, #141311);
    border-color: #3c3732;
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
}

.shinsei-sigcard::before {
    top: 0;
    bottom: auto;
    left: 18px;
    right: 18px;
    width: auto;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--ssb-accent);
    opacity: .72;
    box-shadow: none;
}

.shinsei-sigcard__scrim {
    background: linear-gradient(90deg, rgba(15,14,13,.25), rgba(20,19,17,.78) 55%, rgba(20,19,17,.98) 82%);
}

.shinsei-sigcard__art {
    filter: saturate(.9) contrast(1.01);
}

.shinsei-sigcard__header {
    border-bottom-color: #302d29;
}

.shinsei-sigcard__village {
    text-shadow: none;
}

.shinsei-sigcard__crest {
    opacity: .32;
}

.shinsei-sigcard__tab {
    background: #1e1c1a !important;
    border-color: #38332f !important;
}

.shinsei-sigcard__tab:hover {
    background: #26221f !important;
    border-color: var(--ssb-edge) !important;
}

.shinsei-sigcard__tab.is-active {
    background: #28211e !important;
    border-color: var(--ssb-edge) !important;
    box-shadow: none !important;
}

.ssb-launch-panel,
.ssb-jutsu-mode-bar {
    box-shadow: none !important;
}

@media (max-width: 920px) {
    .ssb-builder {
        height: min(900px, calc(100dvh - 28px));
        max-height: none;
        overflow-y: auto;
    }

    .ssb-builder__form-side,
    .ssb-builder__preview-side {
        height: auto;
        overflow: visible;
    }

    .ssb-builder__form-side {
        min-height: 0;
    }

    .ssb-builder__scroll {
        max-height: none;
        overflow: visible !important;
    }

    .ssb-builder__preview-side {
        min-height: 360px;
    }

    .ssb-builder__preview-stage {
        min-height: 300px;
        overflow: visible !important;
    }
}

@media (max-width: 640px) {
    #ssb-builder-overlay {
        padding: 0;
    }

    .ssb-builder {
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
}

/* ---------------------------------------------------------------------
   0.1.7 — Card and artwork scaling
   --------------------------------------------------------------------- */
.shinsei-sigcard {
    --ssb-card-max-width: 780px;
    --ssb-card-min-height: 238px;
    --ssb-card-padding-y: 18px;
    --ssb-card-header-min-height: 48px;
    --ssb-card-panel-min-height: 96px;
    --ssb-image-scale: 1;

    width: min(100%, var(--ssb-card-max-width));
    min-height: var(--ssb-card-min-height);
}

.shinsei-sigcard__inner {
    min-height: var(--ssb-card-min-height);
    padding-top: var(--ssb-card-padding-y);
    padding-bottom: var(--ssb-card-padding-y);
}

.shinsei-sigcard__header {
    min-height: var(--ssb-card-header-min-height);
}

.shinsei-sigcard__panel {
    min-height: var(--ssb-card-panel-min-height);
}

.shinsei-sigcard__art {
    transform: scale(var(--ssb-image-scale));
    transform-origin: var(--ssb-image-x) var(--ssb-image-y);
    will-change: transform;
}

.ssb-builder__size-hint {
    display: block;
    margin: -2px 0 10px;
    max-width: 56ch;
}

@media (max-width: 640px) {
    .shinsei-sigcard,
    .shinsei-sigcard__inner {
        min-height: var(--ssb-card-min-height);
    }
}

/* ---------------------------------------------------------------------
   0.1.8 — Accurate card-size preview
   ---------------------------------------------------------------------
   The builder preview column is narrower than a full forum post. Use the
   selected width as a percentage of the preview stage so 70–100% changes are
   visible while editing. This rule only affects the live builder preview;
   saved signature cards keep the normal 780px-based sizing system. */
.ssb-builder__preview-stage .shinsei-sigcard.ssb-builder__preview-card {
    width: var(--ssb-preview-card-width, 100%) !important;
    max-width: none !important;
    margin-inline: auto;
    transition: width 140ms ease, min-height 140ms ease;
}


/* ---------------------------------------------------------------------
   0.1.9 — True 1:1 card-size preview
   ---------------------------------------------------------------------
   Preview cards now use the exact 546–780 px desktop width written by the
   card-size setting. The narrow editor column scrolls instead of rescaling
   the card. A larger overlay provides the same unscaled preview. */
.ssb-builder__preview-header {
    align-items: flex-start;
}

.ssb-builder__preview-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ssb-builder__preview-size {
    color: rgba(217, 124, 99, .78);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.ssb-builder__preview-expand {
    appearance: none;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 6px 10px;
    color: #d8cfc7;
    background: #1d1a18;
    border: 1px solid #3a342f;
    border-radius: 7px;
    box-shadow: none;
    font: inherit;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

.ssb-builder__preview-expand:hover {
    color: #fff;
    border-color: rgba(217, 124, 99, .62);
    background: #24201d;
}

.ssb-builder__preview-stage {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable both-edges;
}

.ssb-builder__preview-stage .shinsei-sigcard.ssb-builder__preview-card {
    width: var(--ssb-card-max-width) !important;
    min-width: var(--ssb-card-max-width) !important;
    max-width: none !important;
    margin: 0 auto;
    transition: width 140ms ease, min-width 140ms ease, min-height 140ms ease;
}

.ssb-exact-preview {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(5, 5, 5, .84);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 160ms ease;
}

.ssb-exact-preview.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ssb-exact-preview__dialog {
    width: min(1100px, calc(100vw - 36px));
    height: min(820px, calc(100dvh - 36px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e6ded6;
    background: #141311;
    border: 1px solid #38332f;
    border-radius: 12px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .58);
}

.ssb-exact-preview__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 17px;
    background: #181614;
    border-bottom: 1px solid #302b27;
}

.ssb-exact-preview__header h3 {
    margin: 0 0 3px !important;
    color: #eee6df;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ssb-exact-preview__header span {
    color: rgba(199, 189, 180, .58);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.ssb-exact-preview__close {
    appearance: none;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #aaa097;
    background: #1d1a18;
    border: 1px solid #39332e;
    border-radius: 8px;
    box-shadow: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.ssb-exact-preview__close:hover {
    color: #fff;
    border-color: rgba(217, 124, 99, .62);
}

.ssb-exact-preview__stage {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 36px;
    scrollbar-gutter: stable both-edges;
    background: #10100f;
}

.ssb-exact-preview__stage .shinsei-sigcard.ssb-exact-preview__card {
    width: var(--ssb-card-max-width) !important;
    min-width: var(--ssb-card-max-width) !important;
    max-width: none !important;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .ssb-builder__preview-header {
        flex-wrap: wrap;
    }

    .ssb-builder__preview-expand {
        width: 100%;
        justify-content: center;
    }

    .ssb-exact-preview {
        padding: 0;
    }

    .ssb-exact-preview__dialog {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    .ssb-exact-preview__stage {
        padding: 22px 16px 34px;
    }
}