.item-create-form [hidden] { display: none !important; }
.item-create-form > * { min-width: 0; }
.item-field-error { color: var(--danger); margin: 5px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.item-field-error:empty { display: none; }
.item-create-form [aria-invalid="true"] { border-color: var(--danger); }
#item-icon-preview img { width: 160px; height: 160px; object-fit: cover; margin-top: 12px; }
#item-icon-preview p { overflow-wrap: anywhere; }
.event-content-section,
.event-content-grid > *,
.event-content-card > * {
    min-width: 0;
}

.event-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    align-items: start;
    gap: 18px;
}

.event-content-card {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-soft);
}

.event-content-card legend {
    max-width: 100%;
    padding: 0 6px;
    font-weight: 700;
}

.event-component-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-wrap: anywhere;
}

.event-component-toggle input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.event-content-card select[multiple] {
    width: 100%;
    max-width: 100%;
    min-height: 140px;
}

.event-content-card [hidden] {
    display: none;
}

.event-selected-content {
    padding-inline-start: 20px;
    overflow-wrap: anywhere;
}

.character-edit-form,
.character-edit-form > *,
.character-edit-stories,
.character-edit-story {
    min-width: 0;
}

.character-edit-form .panel {
    margin-bottom: 20px;
}

.character-edit-form h2 {
    margin-top: 0;
}

.character-edit-error {
    color: var(--danger);
    font-size: .85rem;
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

.character-edit-form [hidden] {
    display: none !important;
}

.character-edit-form [aria-invalid="true"] {
    border-color: var(--danger);
}

.character-edit-preview {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-top: 12px;
}

.character-edit-spine-preview {
    max-width: min(100%, 240px);
    max-height: 240px;
    object-fit: contain;
    margin-top: 12px;
}

.character-edit-assets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 12px 0;
}

.character-edit-asset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    border-radius: 4px;
    min-width: 0;
}

.character-edit-asset > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.character-edit-asset small {
    display: block;
    color: var(--muted);
}

.character-edit-remove-all {
    display: block;
    margin-bottom: 16px;
}

.character-edit-story {
    border-top: 1px solid var(--line);
    padding: 16px 0;
}

.character-edit-story summary {
    cursor: pointer;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.character-edit-story summary .help {
    display: inline;
    margin-left: 8px;
    font-weight: 400;
}

.character-edit-table-scroll {
    max-width: 100%;
    overflow: auto;
    max-height: 640px;
    border: 1px solid var(--line);
}

.character-edit-script-table {
    width: max-content;
    min-width: 100%;
}

.character-edit-script-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ivory);
    color: var(--slate-deep);
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: none;
}

.character-edit-script-table td {
    width: 175px;
    min-width: 175px;
    vertical-align: top;
    white-space: normal;
}

.character-edit-script-table textarea {
    width: 260px;
    min-height: 90px;
}

.character-edit-script-table .button-row {
    flex-wrap: nowrap;
}

.character-edit-dialog {
    width: min(480px, calc(100vw - 32px));
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: var(--ice-0);
}

.character-edit-dialog::backdrop {
    background: rgba(41, 42, 60, .5);
}

:root {
    --ice-0: #fbfdfb;
    --ice-1: #eaf9fb;
    --ice-2: #cfeff5;
    --ice-3: #a9dce8;
    --ink: #343447;
    --slate: #57576f;
    --slate-soft: #686880;
    --slate-deep: #424258;
    --slate-night: #292a3c;
    --gold: #c9aa55;
    --gold-deep: #9b7a2e;
    --gold-light: #efd98c;
    --ivory: #f4f0df;
    --surface: rgba(252, 253, 250, .93);
    --surface-soft: rgba(244, 248, 246, .88);
    --text: #343447;
    --muted: #777484;
    --line: rgba(164, 139, 77, .5);
    --danger: #b53f55;
    --success: #297b65;
    --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;
    --sans: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--ice-1);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    font: 14px/1.55 var(--sans);
    background:
        radial-gradient(circle at 76% 10%, rgba(255, 255, 255, .96) 0 6%, transparent 28%),
        radial-gradient(circle at 60% 55%, rgba(255, 255, 255, .82), transparent 32%),
        linear-gradient(135deg, transparent 0 48%, rgba(192, 162, 88, .12) 48% 49%, transparent 49% 100%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 18px, rgba(158, 214, 226, .08) 18px 19px),
        linear-gradient(145deg, var(--ice-0), var(--ice-2));
    background-attachment: fixed;
}

body::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .5;
    background:
        linear-gradient(90deg, transparent 49.7%, rgba(187, 158, 86, .2) 50%, transparent 50.3%) center/340px 100%,
        linear-gradient(0deg, transparent 49.7%, rgba(255, 255, 255, .48) 50%, transparent 50.3%) center/100% 260px;
}

a {
    color: var(--gold-deep);
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 2px;
}

code {
    padding: 3px 7px;
    border: 1px solid rgba(174, 145, 71, .3);
    border-radius: 3px;
    color: var(--slate-deep);
    background: rgba(237, 233, 217, .75);
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.game-frame {
    position: fixed;
    z-index: 50;
    inset: 8px;
    border: 1px solid rgba(152, 126, 65, .78);
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .72),
        inset 0 0 0 5px rgba(177, 151, 86, .28),
        0 0 0 1px rgba(255, 255, 255, .7);
    pointer-events: none;
}

.game-frame::before,
.game-frame::after {
    position: absolute;
    left: 50%;
    width: 74px;
    height: 18px;
    content: "";
    transform: translateX(-50%);
    background:
        linear-gradient(135deg, transparent 43%, var(--gold) 44% 46%, transparent 47%) left/50% 100% no-repeat,
        linear-gradient(225deg, transparent 43%, var(--gold) 44% 46%, transparent 47%) right/50% 100% no-repeat;
    opacity: .62;
}

.game-frame::before { top: -1px; }
.game-frame::after { bottom: -1px; transform: translateX(-50%) rotate(180deg); }

.game-frame > span {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid var(--gold);
    background: rgba(250, 254, 253, .78);
    transform: rotate(45deg);
}

.game-frame > span:nth-child(1) { top: -6px; left: -6px; }
.game-frame > span:nth-child(2) { top: -6px; right: -6px; }
.game-frame > span:nth-child(3) { bottom: -6px; right: -6px; }
.game-frame > span:nth-child(4) { bottom: -6px; left: -6px; }

.sidebar {
    position: fixed;
    z-index: 10;
    inset: 22px auto 22px 22px;
    width: 258px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px 14px 16px;
    border: 1px solid rgba(225, 202, 132, .72);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 22%),
        linear-gradient(160deg, rgba(91, 91, 119, .98), rgba(57, 58, 79, .99));
    box-shadow:
        0 18px 44px rgba(54, 55, 76, .22),
        inset 0 0 0 3px rgba(255, 255, 255, .055);
    transition: width .2s ease, transform .2s ease, padding .2s ease;
}

.sidebar-toggle,
.mobile-menu-toggle {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(239, 217, 140, .46);
    border-radius: 4px;
    color: var(--gold-light);
    background: rgba(35, 36, 52, .46);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .06),
        0 4px 12px rgba(35, 36, 52, .18);
    font: 700 20px/1 var(--sans);
    cursor: pointer;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sidebar-toggle:hover,
.mobile-menu-toggle:hover {
    border-color: rgba(239, 217, 140, .78);
    color: #fffdf3;
    background: rgba(239, 217, 140, .14);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .1),
        0 5px 14px rgba(35, 36, 52, .24);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 0 7px;
}

.sidebar-toggle-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.sidebar-toggle-icon--close {
    display: none;
}

.sidebar-toggle-icon-arrow {
    transform-origin: center;
    transition: transform .2s ease;
}

.sidebar-is-collapsed .sidebar-toggle-icon-arrow {
    transform: rotate(180deg);
}

.mobile-menu-toggle {
    display: none;
    flex: 0 0 auto;
}

.sidebar-backdrop {
    position: fixed;
    z-index: 60;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(28, 29, 43, .56);
    cursor: pointer;
}

.sidebar-backdrop[hidden] {
    display: none;
}

.sidebar::before,
.sidebar::after {
    display: block;
    width: 46px;
    height: 8px;
    margin: 0 auto 13px;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    content: "";
    opacity: .76;
}

.sidebar::after {
    margin: 14px auto 0;
}

.brand {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: var(--ivory);
}

.brand-crest {
    position: relative;
    display: grid;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    place-items: center;
    color: var(--gold-light);
    font: 700 16px var(--serif);
}

.brand-crest::before {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(239, 217, 140, .42);
    content: "";
    transform: rotate(45deg);
}

.brand-crest {
    text-shadow: 0 0 12px rgba(239, 217, 140, .4);
}

.brand-copy {
    display: grid;
    gap: 1px;
}

.brand-copy strong {
    color: var(--gold-light);
    font: 600 20px/1.1 var(--serif);
    letter-spacing: .04em;
}

.brand-copy small {
    color: rgba(244, 240, 223, .65);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.sidebar-rank {
    display: grid;
    gap: 2px;
    margin: 0 4px 15px;
    padding: 12px 14px;
    border: 1px solid rgba(229, 207, 139, .34);
    background: rgba(38, 39, 57, .5);
}

.sidebar-rank span {
    color: rgba(244, 240, 223, .56);
    font-size: 9px;
    letter-spacing: .12em;
}

.sidebar-rank strong {
    color: var(--gold-light);
    font: 500 17px var(--serif);
}

.sidebar nav {
    display: grid;
    gap: 5px;
}

.sidebar .nav-heading {
    margin: 13px 10px 3px;
    padding-top: 10px;
    border-top: 1px solid rgba(222, 200, 133, .22);
    color: rgba(244, 240, 223, .7);
    font: 600 10px var(--sans);
    letter-spacing: .12em;
}

.sidebar nav a {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    min-height: 48px;
    padding: 6px 10px;
    border: 1px solid rgba(222, 200, 133, .15);
    color: var(--ivory);
    background: rgba(44, 45, 64, .38);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.sidebar [data-tooltip]::before {
    position: absolute;
    z-index: 80;
    top: 50%;
    left: calc(100% + 12px);
    display: none;
    padding: 7px 10px;
    border: 1px solid rgba(222, 200, 133, .48);
    border-radius: 3px;
    color: var(--ivory);
    background: var(--slate-night);
    box-shadow: 0 7px 18px rgba(35, 36, 52, .28);
    content: attr(data-tooltip);
    font: 11px/1.3 var(--sans);
    letter-spacing: .02em;
    pointer-events: none;
    transform: translateY(-50%);
    white-space: nowrap;
}

.sidebar nav a::after {
    position: absolute;
    top: 50%;
    right: -5px;
    width: 9px;
    height: 9px;
    border: 1px solid transparent;
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.sidebar nav a:hover,
.sidebar nav a.active {
    border-color: rgba(239, 217, 140, .72);
    background: rgba(78, 78, 102, .93);
    transform: translateX(3px);
}

.sidebar nav a.active::after {
    border-color: var(--gold-light);
    background: var(--gold-light);
    box-shadow: 0 0 10px rgba(239, 217, 140, .7);
}

.sidebar nav a > span:last-child {
    display: grid;
    font: 500 13px var(--serif);
    letter-spacing: .02em;
}

.sidebar nav a small {
    color: rgba(244, 240, 223, .5);
    font: 8px var(--sans);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.nav-glyph {
    color: var(--gold-light);
    font: 19px var(--serif);
    text-align: center;
}

.sidebar .nav-master-group {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0 8px 4px 12px;
    padding: 3px 0 3px 10px;
    border-left: 1px solid rgba(222, 200, 133, .24);
}

.nav-master-heading {
    padding: 2px 8px 4px;
    color: rgba(244, 240, 223, .6);
    font: 500 10px/1.4 var(--sans);
    letter-spacing: .08em;
}

.sidebar nav .nav-master-link {
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 34px;
    padding: 5px 7px;
    border-color: transparent;
    background: transparent;
}

.sidebar nav .nav-master-link > .nav-label {
    min-width: 0;
    font: 500 12px/1.5 var(--sans);
}

.nav-master-link .nav-glyph {
    font-size: 15px;
}

.sidebar nav .nav-master-link:hover,
.sidebar nav .nav-master-link.active {
    border-color: rgba(239, 217, 140, .45);
    background: rgba(78, 78, 102, .8);
    transform: none;
}

.sidebar nav .nav-master-link:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 2px;
}

.nav-master-menu {
    position: relative;
    min-width: 0;
}

.nav-master-menu > summary {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    min-height: 48px;
    padding: 6px 10px;
    border: 1px solid rgba(222, 200, 133, .15);
    color: var(--ivory);
    background: rgba(44, 45, 64, .38);
    cursor: pointer;
    list-style: none;
}

.nav-master-menu > summary::-webkit-details-marker { display: none; }
.nav-master-menu > summary .nav-label { display: grid; font: 500 13px var(--serif); }
.nav-master-menu > summary small { color: rgba(244, 240, 223, .5); font: 8px var(--sans); letter-spacing: .13em; }
.nav-master-menu > summary:hover,
.nav-master-menu.is-active > summary { border-color: rgba(239, 217, 140, .72); background: rgba(78, 78, 102, .93); }
.nav-master-menu > summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.nav-master-chevron { color: var(--gold-light); text-align: center; transition: transform .18s ease; }
.nav-master-menu[open] .nav-master-chevron { transform: rotate(180deg); }
.nav-master-items { padding-top: 9px; }
.nav-master-menu:not([open]) > .nav-master-items { display: none; }

.sidebar-is-collapsed .nav-master-menu > summary {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 7px;
    padding-left: 7px;
}

.sidebar-is-collapsed .nav-master-chevron { display: none; }
.sidebar-is-collapsed .nav-master-items {
    position: fixed;
    z-index: 90;
    bottom: 24px;
    left: 112px;
    width: 240px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 12px 8px 8px;
    border: 1px solid rgba(222, 200, 133, .5);
    background: var(--slate-night);
    box-shadow: 0 12px 30px rgba(35, 36, 52, .3);
}

.sidebar-is-collapsed .sidebar .nav-master-items .nav-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

.sidebar-is-collapsed .sidebar .nav-master-items a {
    grid-template-columns: 26px minmax(0, 1fr);
    justify-items: stretch;
}

.sidebar-is-collapsed .nav-master-items [data-tooltip]::before { display: none; }

.main {
    position: relative;
    z-index: 1;
    max-width: 1620px;
    margin-left: 298px;
    padding: 28px 42px 54px 22px;
    transition: margin-left .2s ease;
}

.sidebar-is-collapsed .sidebar {
    width: 78px;
    overflow: visible;
    padding-right: 10px;
    padding-left: 10px;
}

.sidebar-is-collapsed .brand {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
}

.sidebar-is-collapsed .sidebar-header {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 0;
}

.sidebar-is-collapsed .brand-copy,
.sidebar-is-collapsed .sidebar-rank,
.sidebar-is-collapsed .sidebar .nav-heading,
.sidebar-is-collapsed .sidebar::before,
.sidebar-is-collapsed .sidebar::after {
    display: none;
}

.sidebar-is-collapsed .sidebar nav a {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-right: 7px;
    padding-left: 7px;
}

.sidebar-is-collapsed .sidebar nav a:hover,
.sidebar-is-collapsed .sidebar nav a.active {
    transform: none;
}

.sidebar-is-collapsed .sidebar nav a.active::after {
    right: -5px;
}

.sidebar-is-collapsed .sidebar .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.sidebar-is-collapsed .sidebar [data-tooltip]:hover::before,
.sidebar-is-collapsed .sidebar [data-tooltip]:focus-visible::before {
    display: block;
}

.sidebar-is-collapsed .main {
    margin-left: 118px;
}

.topbar {
    position: relative;
    z-index: 20;
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
    padding: 12px 14px 12px 22px;
    border: 1px solid rgba(230, 209, 145, .65);
    color: var(--ivory);
    background: linear-gradient(90deg, rgba(66, 66, 88, .98), rgba(84, 84, 108, .94));
    box-shadow: 0 12px 28px rgba(54, 55, 76, .15);
}

.topbar::before {
    position: absolute;
    top: 50%;
    left: -7px;
    width: 12px;
    height: 12px;
    border: 1px solid var(--gold-light);
    background: var(--slate);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.title-block h1 {
    margin: 2px 0 0;
    color: var(--gold-light);
    font: 500 clamp(22px, 2.2vw, 30px)/1.2 var(--serif);
    letter-spacing: .04em;
}

.eyebrow {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.topbar .eyebrow {
    color: rgba(244, 240, 223, .55);
}

.topbar-actions,
.button-row,
.inline-form,
.filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-actions {
    justify-content: flex-end;
}

.page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.hud-chip {
    min-width: 90px;
    display: grid;
    padding: 8px 12px;
    border: 1px solid rgba(170, 143, 73, .46);
    color: var(--slate-deep);
    background: var(--ivory);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}

.hud-chip span {
    color: var(--gold-deep);
    font-size: 8px;
    letter-spacing: .14em;
}

.hud-chip strong {
    overflow: hidden;
    max-width: 150px;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu {
    position: relative;
    flex: 0 0 auto;
}

.account-menu summary {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 5px 10px;
    border: 1px solid rgba(239, 217, 140, .55);
    color: var(--ivory);
    background: rgba(35, 36, 52, .4);
    cursor: pointer;
    list-style: none;
}

.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.account-menu[open] summary,
.account-menu summary:hover { background: rgba(35, 36, 52, .7); }

.account-avatar {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid rgba(239, 217, 140, .55);
    border-radius: 50%;
    color: var(--gold-light);
    font: 18px var(--serif);
}

.account-name { display: grid; min-width: 0; text-align: left; }
.account-name small { color: var(--gold-light); font-size: 9px; }
.account-name strong { max-width: 130px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-chevron { color: var(--gold-light); font-size: 18px; line-height: 1; }
.account-menu[open] .account-chevron { transform: rotate(180deg); }

.account-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    max-width: calc(100vw - 32px);
    padding: 14px;
    border: 1px solid rgba(170, 143, 73, .6);
    color: var(--text);
    background: var(--ice-0);
    box-shadow: 0 12px 28px rgba(35, 36, 52, .2);
}

.account-menu-heading { display: block; color: var(--gold-deep); font-size: 10px; }
.account-menu-user { display: block; margin: 2px 0 12px; overflow-wrap: anywhere; }
.account-logout { width: 100%; justify-content: center; }

.panel,
.stat-card {
    position: relative;
    border: 1px solid var(--line);
    box-shadow:
        0 14px 36px rgba(55, 60, 78, .08),
        inset 0 0 0 3px rgba(255, 255, 255, .5);
}

.panel {
    margin-bottom: 20px;
    padding: 24px;
    background: var(--surface);
}

.panel::before {
    position: absolute;
    top: -5px;
    left: 24px;
    width: 9px;
    height: 9px;
    border: 1px solid var(--gold);
    background: var(--ice-0);
    content: "";
    transform: rotate(45deg);
}

.panel h2 {
    margin: 0 0 14px;
    color: var(--slate-deep);
    font: 600 18px var(--serif);
    letter-spacing: .03em;
}

.dashboard-hero {
    position: relative;
    min-height: 250px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr);
    align-items: center;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 34px 42px;
    border: 1px solid rgba(173, 146, 77, .55);
    background:
        radial-gradient(circle at 77% 45%, rgba(255, 255, 255, .96) 0 7%, rgba(215, 242, 247, .82) 8% 26%, transparent 27%),
        linear-gradient(120deg, rgba(252, 253, 248, .96), rgba(213, 241, 246, .87));
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .54), 0 16px 36px rgba(55, 60, 78, .1);
}

.dashboard-hero::before,
.dashboard-hero::after {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(174, 146, 75, .25);
    content: "";
    transform: rotate(45deg);
}

.dashboard-hero::before { top: -125px; left: 44%; }
.dashboard-hero::after { right: -120px; bottom: -122px; }

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: 590px;
}

.hero-copy h2 {
    margin: 7px 0 10px;
    color: var(--slate-deep);
    font: 500 clamp(27px, 3vw, 43px)/1.16 var(--serif);
}

.hero-copy p {
    max-width: 520px;
    margin: 0 0 22px;
    color: var(--muted);
}

.hero-crest {
    position: relative;
    z-index: 2;
    width: 164px;
    height: 164px;
    display: grid;
    justify-self: center;
    place-content: center;
    border: 1px solid var(--gold);
    color: var(--gold-deep);
    background: rgba(255, 255, 255, .46);
    text-align: center;
    transform: rotate(45deg);
}

.hero-crest::before,
.hero-crest::after {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(164, 137, 66, .35);
    content: "";
}

.hero-crest::after {
    inset: 22px;
}

.hero-crest > * {
    transform: rotate(-45deg);
}

.hero-crest strong {
    display: block;
    font: 600 42px/1 var(--serif);
}

.crest-star {
    margin-bottom: 18px;
    color: var(--gold);
    font-size: 18px;
    line-height: 1;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.stat-card {
    min-height: 140px;
    display: grid;
    align-content: center;
    gap: 2px;
    overflow: hidden;
    padding: 20px 22px;
    border-color: rgba(231, 210, 145, .52);
    color: var(--ivory);
    background: linear-gradient(145deg, var(--slate-soft), var(--slate-deep));
}

.stat-card > span {
    color: var(--gold-light);
    font: 500 14px var(--serif);
}

.stat-card strong {
    color: #fffdf3;
    font: 500 38px/1.2 var(--serif);
}

.stat-card small {
    color: rgba(244, 240, 223, .58);
}

.stat-card i {
    position: absolute;
    right: 14px;
    bottom: 8px;
    color: rgba(239, 217, 140, .22);
    font: normal 38px var(--serif);
}

.quick-start {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}

.quick-start p {
    margin-bottom: 0;
}

.button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 1px solid rgba(158, 130, 59, .48);
    border-radius: 3px;
    color: var(--slate-deep);
    background: var(--ivory);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
    font: 700 12px var(--sans);
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 6px 14px rgba(52, 52, 71, .12);
}

.button.primary {
    border-color: rgba(234, 210, 137, .7);
    color: var(--gold-light);
    background: linear-gradient(145deg, var(--slate-soft), var(--slate-deep));
}

.button.primary:hover {
    background: var(--slate-deep);
}

.button.ghost {
    border-color: rgba(83, 83, 110, .35);
    background: rgba(255, 255, 255, .55);
}

.gacha-asset-library-button {
    gap: 8px;
}

.gacha-asset-library-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(239, 217, 140, .72);
    border-radius: 3px;
    color: var(--slate-deep);
    background: var(--gold-light);
    font-size: 15px;
    line-height: 1;
}

.filters {
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px;
    border: 1px solid rgba(166, 141, 78, .35);
    background: rgba(255, 255, 255, .5);
}

.filters input {
    max-width: 360px;
}

.filters label.grow input {
    max-width: none;
}

.filters .grow {
    min-width: min(320px, 100%);
    flex: 1 1 320px;
}

.filters select {
    width: auto;
    min-width: 180px;
}

.filters input,
.filters select,
.filters .button {
    height: 44px;
}

.filters .button.compact {
    margin: 0;
}

.table-wrap {
    overflow-x: auto;
    padding: 0;
}

.table-wrap::before {
    left: 18px;
}

.table-wrap h2 {
    padding: 22px 20px 6px;
}

/* Long titles and keys must not squeeze neighboring columns into vertical text. */
.table-wrap th {
    white-space: nowrap;
}

.table-wrap td {
    max-width: 360px;
    overflow-wrap: anywhere;
}

.table-wrap .list-title-cell {
    min-width: 240px;
}

.present-list-table {
    min-width: 960px;
}

.present-list-table th,
.present-list-table td {
    white-space: nowrap;
}

.present-list-table th:first-child,
.present-list-table td:first-child,
.present-list-table th:nth-child(2),
.present-list-table td:nth-child(2) {
    min-width: 180px;
    max-width: 360px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.table-title,
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.table-title {
    padding: 20px 20px 8px;
}

.table-title h2,
.section-heading h2 {
    margin: 2px 0 0;
    padding: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(157, 139, 94, .22);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--gold-light);
    background: linear-gradient(90deg, var(--slate-deep), var(--slate));
    font: 700 10px var(--sans);
    letter-spacing: .09em;
    text-transform: uppercase;
}

tbody tr {
    transition: background .14s ease;
}

tbody tr:hover {
    background: rgba(220, 243, 247, .43);
}

tr:last-child td {
    border-bottom: 0;
}

.actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.actions-heading {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.actions form {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: middle;
}

.actions > .action-button {
    vertical-align: middle;
}

.action-button {
    min-height: 34px;
    gap: 6px;
    padding: 7px 11px;
    border-width: 1px;
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .45),
        0 2px 5px rgba(52, 52, 71, .12);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.action-button:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .45),
        0 5px 12px rgba(52, 52, 71, .18);
}

.action-edit,
.action-view {
    border-color: rgba(83, 83, 110, .62);
    color: #fffdf3;
    background: linear-gradient(145deg, var(--slate-soft), var(--slate-deep));
}

.action-edit:hover,
.action-view:hover {
    background: var(--slate-deep);
}

.action-danger {
    border-color: rgba(181, 63, 85, .5);
    color: #8e3044;
    background: #fae8ec;
}

.action-danger:hover {
    color: #772438;
    background: #f6d8df;
}

.action-icon {
    font-size: 14px;
    font-weight: 800;
    line-height: .8;
}

.link {
    padding: 0;
    border: 0;
    color: var(--gold-deep);
    background: transparent;
    cursor: pointer;
}

.danger-text { color: var(--danger); }
.success-text { color: var(--success); }

.empty {
    padding: 36px;
    color: var(--muted);
    text-align: center;
}

/* Shared by numbered lists, simple paginators, and embedded content catalogs. */
.cms-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    min-width: 0;
    margin: 0 0 20px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

.cms-pagination-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 4px;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.cms-pagination-summary strong { color: var(--slate-deep); font-weight: 700; }
.cms-pagination-summary > span { white-space: nowrap; }

.cms-pagination-size { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--muted); font-size: 12px; }
.cms-pagination-size > span { white-space: nowrap; }
.cms-pagination-size select { width: auto; min-width: 130px; min-height: 38px; margin: 0; padding: 7px 30px 7px 10px; border-radius: 5px; font-size: 12px; }

.cms-pagination-nav,
.cms-pagination-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.cms-pagination-nav { margin-left: auto; }

.cms-pagination-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 4px;
    min-width: 38px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid rgba(164, 139, 77, .35);
    border-radius: 5px;
    color: var(--slate-deep);
    background: var(--ice-0);
    font: 600 12px/1.4 var(--sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.cms-pagination-control:not(.is-disabled, .is-current):hover {
    border-color: var(--gold-deep);
    background: var(--ivory);
    box-shadow: 0 2px 6px rgba(155, 122, 46, .12);
}

.cms-pagination-control:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.cms-pagination-control.is-current { border-color: var(--gold-deep); color: #fff; background: var(--gold-deep); cursor: default; }
.cms-pagination-control.is-disabled { border-color: rgba(119, 116, 132, .15); color: var(--muted); background: var(--surface-soft); cursor: default; }
.cms-pagination-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cms-pagination-ellipsis { min-width: 22px; color: var(--muted); text-align: center; }
.cms-pagination-position { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; min-width: 64px; padding: 0 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.cms-pagination-position > span { color: var(--muted); }
.cms-pagination-position--compact { display: none; }

.event-content-card .cms-pagination { gap: 10px; margin: 12px 0 0; padding: 12px; }

@media (max-width: 700px) {
    .cms-pagination { justify-content: center; gap: 12px; padding: 14px 12px; }
    .cms-pagination-summary { width: 100%; justify-content: center; }
    .cms-pagination-nav { margin-left: 0; width: 100%; gap: 10px; }
    .cms-pagination-pages { display: none; }
    .cms-pagination-position--compact { display: inline-flex; }
    .cms-pagination-control { min-width: 44px; min-height: 44px; }
    .cms-pagination-size select { min-height: 44px; }
}

.badge {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid rgba(121, 119, 132, .25);
    border-radius: 2px;
    color: var(--slate-deep);
    background: #ecebe8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.badge.published,
.badge.active {
    border-color: rgba(41, 123, 101, .3);
    color: #21634f;
    background: #e2f3ed;
}

.badge.draft,
.badge.suspended {
    border-color: rgba(155, 122, 46, .35);
    color: #80621f;
    background: #f8f0d7;
}

.badge.archived,
.badge.banned {
    border-color: rgba(181, 63, 85, .25);
    color: #943348;
    background: #f8e5e9;
}

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

.form-grid .full {
    grid-column: 1 / -1;
}

[data-present-campaign-editor] > *,
[data-present-campaign-editor] fieldset {
    min-width: 0;
}

[data-present-campaign-editor] [hidden] {
    display: none;
}

[data-character-form] label {
    align-content: start;
}

[data-character-form] input:not([type="checkbox"], [type="radio"], [type="hidden"]) {
    min-height: 46px;
}

[data-character-form] .character-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.character-field-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 18px;
    min-width: 0;
}

.cms-tooltip-description {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cms-tooltip {
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    font: 500 13px var(--sans);
    letter-spacing: 0;
}

.cms-tooltip > summary {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-block: -3px;
    color: var(--slate-deep);
    cursor: help;
    list-style: none;
}

.cms-tooltip > summary::-webkit-details-marker { display: none; }
.cms-tooltip > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.cms-tooltip-content {
    position: fixed;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(320px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--gold);
    border-radius: 2px;
    color: var(--text);
    background: #fffdf5;
    box-shadow: 0 6px 18px rgba(61, 61, 82, .18);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.character-voice-heading { margin-bottom: 14px; }
.character-voice-heading h2 { margin: 0; }

[data-skill-editor] [hidden] {
    display: none;
}

.form-grid-actions {
    align-self: end;
    align-items: flex-end;
    min-height: 44px;
}

.present-rewards {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.present-rewards legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    color: var(--slate-deep);
    font-size: 14px;
    font-weight: 800;
}

.present-rewards-count {
    padding: 3px 9px;
    border: 1px solid rgba(155, 129, 67, .25);
    border-radius: 20px;
    background: rgba(239, 217, 140, .15);
    font: 700 11px var(--sans);
}

.present-rewards-help {
    margin: 8px 0 16px;
}

.present-reward-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px 34px;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(155, 129, 67, .25);
    border-radius: 6px;
    background: rgba(255, 255, 252, .8);
}

.present-reward-summary {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.present-reward-preview {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(155, 129, 67, .2);
    border-radius: 8px;
    background: rgba(239, 217, 140, .13);
    color: var(--gold);
}

.present-reward-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.present-reward-details {
    min-width: 0;
    display: grid;
    gap: 5px;
    overflow-wrap: anywhere;
}

.present-reward-details strong {
    font-size: 14px;
    line-height: 1.5;
}

.present-reward-quantity-input {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.present-reward-quantity-input input {
    min-width: 0;
}

.present-reward-quantity-input > span {
    color: var(--muted);
}

.present-reward-remove {
    align-self: center;
}

.present-reward-picker {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(155, 129, 67, .16);
}

.present-reward-results {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.present-reward-results select {
    min-width: 0;
    max-width: 100%;
}

.present-reward-results select option {
    padding: 9px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.present-reward-results .button.compact {
    justify-self: end;
    margin: 0;
}

.present-rewards [hidden] {
    display: none;
}

label {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 7px;
    color: var(--slate-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
}

label:has(> input:is([type="checkbox"], [type="radio"])) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

fieldset > label:has(> input:is([type="checkbox"], [type="radio"])) {
    margin-right: 16px;
}

input,
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(155, 129, 67, .43);
    border-radius: 2px;
    color: var(--text);
    background: rgba(255, 255, 252, .92);
    box-shadow: inset 0 1px 3px rgba(61, 61, 82, .05);
    font: 14px var(--sans);
}

select:not([multiple]):not([size]),
select:not([multiple])[size="0"],
select:not([multiple])[size="1"] {
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23686880' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

input:not([type="checkbox"], [type="radio"], [type="hidden"], .cms-date-picker),
select:not([multiple]):not([size]),
select:not([multiple])[size="0"],
select:not([multiple])[size="1"] {
    min-height: 46px;
}

input:is([type="checkbox"], [type="radio"]) {
    width: auto;
    padding: 0;
    box-shadow: none;
    flex: 0 0 auto;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--gold);
    outline: 2px solid rgba(239, 217, 140, .38);
}

input[readonly],
textarea[readonly] {
    color: var(--muted);
    background: rgba(232, 231, 225, .72);
    cursor: not-allowed;
}

.help {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

.announcement-table {
    min-width: 900px;
}

.announcement-table th {
    white-space: nowrap;
}

.announcement-fields {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.announcement-editor {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(155, 129, 67, .3);
    background: rgba(249, 250, 247, .55);
}

.announcement-editor-heading,
.announcement-block-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.announcement-editor-heading .help { margin-top: 4px; }
.announcement-editor-heading .button.compact { margin: 0; }
.announcement-block-list { display: grid; gap: 12px; }

.home-banner-preview-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(155, 129, 67, .3);
    background: rgba(249, 250, 247, .55);
}

.home-banner-preview-panel .help { margin-top: 4px; }
.home-banner-preview-panel [hidden] { display: none; }

.home-banner-preview {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 690 / 242;
    overflow: hidden;
    border: 4px double rgba(205, 188, 133, .7);
    color: rgba(255, 255, 255, .72);
    background: #222630;
}

.home-banner-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-banner-preview-panel .button { justify-self: start; }

.announcement-block-card {
    border: 1px solid rgba(157, 139, 94, .28);
    background: rgba(255, 255, 252, .9);
}

.announcement-block-card > header {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(157, 139, 94, .22);
    background: linear-gradient(90deg, rgba(229, 243, 245, .78), rgba(248, 240, 215, .45));
}

.announcement-block-card > header strong {
    color: var(--gold-deep);
    font: 700 11px var(--serif);
    letter-spacing: .08em;
}

.announcement-block-fields {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(260px, 1fr);
    gap: 12px;
    padding: 12px;
}

.announcement-text-field,
.announcement-block-errors { grid-column: 1 / -1; }
.announcement-block-errors { margin: 0; font-size: 12px; }
.announcement-json-details { border-top: 1px solid rgba(157, 139, 94, .22); padding-top: 10px; }
.announcement-json-details summary { cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 700; }
.announcement-json-details label { margin-top: 10px; }

.confirm-box {
    padding: 12px 14px;
    border: 1px solid rgba(155, 122, 46, .3);
    background: rgba(248, 240, 215, .6);
}

.current-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    border-left: 3px solid var(--gold);
    background: rgba(234, 249, 251, .68);
}

.current-value span {
    color: var(--muted);
    font-size: 11px;
}

.masked-value {
    display: block;
    color: var(--slate-deep);
    font-size: 18px;
    letter-spacing: .12em;
}

textarea {
    resize: vertical;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check input {
    width: auto;
    accent-color: var(--slate);
}

.align-bottom {
    align-self: end;
    padding-bottom: 10px;
}

.stack {
    display: grid;
    gap: 16px;
}

.stack.compact {
    margin-top: 20px;
}

.alert {
    position: relative;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: 2px;
    box-shadow: 0 8px 20px rgba(55, 60, 78, .08);
}

.alert ul {
    margin: 6px 0 0;
}

.alert.success {
    border-color: rgba(41, 123, 101, .3);
    color: #205f4d;
    background: rgba(225, 244, 237, .95);
}

.alert.danger {
    border-color: rgba(181, 63, 85, .3);
    color: #8e3044;
    background: rgba(249, 231, 235, .95);
}

.alert.warning {
    border-color: rgba(155, 122, 46, .38);
    color: #70561c;
    background: rgba(250, 243, 219, .96);
}

.receipt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.danger-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    align-items: start;
    gap: 28px;
    border-color: rgba(181, 63, 85, .42);
}

.danger-zone::before {
    border-color: var(--danger);
}

.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

dt { color: var(--muted); }
dd { margin: 0; }
.game-links-summary > div { min-width: 0; }
.game-links-summary dd { overflow-wrap: anywhere; }
.character-story-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cms-character-image {
    display: block;
    width: 240px;
    max-width: 100%;
    height: 240px;
    object-fit: contain;
}

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.wallet-grid div {
    display: grid;
    padding: 14px;
    border: 1px solid rgba(226, 204, 137, .32);
    color: var(--ivory);
    background: linear-gradient(145deg, var(--slate-soft), var(--slate-deep));
}

.wallet-grid span {
    color: var(--gold-light);
    font-size: 10px;
}

.wallet-grid strong {
    font: 500 24px var(--serif);
}

body.player-modal-open {
    overflow: hidden;
}

body.player-modal-open .main {
    z-index: 80;
}

body.player-modal-open .main > .alert {
    display: none;
}

.player-modal-layer {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
}

.player-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(29, 30, 44, .7);
    backdrop-filter: blur(3px);
}

.player-modal {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    max-height: calc(100vh - 56px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(229, 207, 139, .78);
    color: var(--text);
    background: var(--ice-0);
    box-shadow:
        inset 0 0 0 4px rgba(255, 255, 255, .72),
        0 26px 70px rgba(25, 26, 40, .35);
}

.player-modal:focus {
    outline: none;
}

.player-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(229, 207, 139, .42);
    color: var(--ivory);
    background: linear-gradient(100deg, var(--slate-deep), var(--slate));
}

.player-modal-header h2 {
    margin: 2px 0 7px;
    color: var(--gold-light);
    font: 500 24px/1.2 var(--serif);
}

.player-modal-header code {
    border-color: rgba(239, 217, 140, .26);
    color: rgba(255, 253, 243, .82);
    background: rgba(35, 36, 52, .35);
}

.player-modal-close {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(239, 217, 140, .46);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(35, 36, 52, .35);
    font-size: 26px;
    line-height: 1;
}

.player-modal-close:hover {
    color: #fffdf3;
    background: rgba(239, 217, 140, .14);
}

.player-modal-body {
    overflow-y: auto;
    padding: 0 24px 24px;
    overscroll-behavior: contain;
}

.player-item-picker, .character-skill-picker { display: grid; gap: 7px; min-width: 0; }
.player-item-combobox, .character-skill-combobox { position: relative; min-width: 0; }
.player-item-combobox.is-enhanced::after, .character-skill-combobox.is-enhanced::after {
    position: absolute;
    top: 10px;
    right: 14px;
    content: "⌄";
    color: var(--gold-deep);
    pointer-events: none;
}
.player-item-combobox input, .character-skill-combobox input { padding-right: 42px; }
.player-item-options, .character-skill-options {
    position: absolute;
    z-index: 4;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--line);
    background: var(--ice-0);
    box-shadow: 0 8px 20px rgba(55, 60, 78, .14);
}
.player-item-option, .player-item-option-empty, .character-skill-option, .character-skill-option-empty {
    padding: 10px 12px;
    overflow-wrap: anywhere;
    font: 13px/1.5 var(--sans);
}
.player-item-option, .character-skill-option { cursor: pointer; }
.player-item-option:hover, .player-item-option.is-active,
.character-skill-option:hover, .character-skill-option.is-active { background: var(--ice-2); }
.player-item-option[aria-selected="true"], .character-skill-option[aria-selected="true"] { color: var(--gold-deep); font-weight: 700; }
.player-item-option-empty, .character-skill-option-empty { color: var(--muted); }
.player-item-search-status, .character-skill-search-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.player-detail-toolbar {
    position: sticky;
    z-index: 3;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 0 -24px 20px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(166, 141, 78, .35);
    background: rgba(251, 253, 251, .97);
}

.player-detail-toolbar .player-detail-tabs {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 14px 0;
    border: 0;
}

.player-detail-toolbar > .button {
    white-space: nowrap;
}

.player-detail-tabs {
    position: sticky;
    z-index: 3;
    top: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0 -24px 20px;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(166, 141, 78, .35);
    background: rgba(251, 253, 251, .97);
}

.player-detail-tabs a {
    min-width: 112px;
    padding: 10px 16px;
    border: 1px solid rgba(83, 83, 110, .24);
    color: var(--slate-deep);
    background: rgba(255, 255, 255, .7);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.player-detail-tabs a[aria-current="page"] {
    border-color: rgba(229, 207, 139, .72);
    color: var(--gold-light);
    background: linear-gradient(145deg, var(--slate-soft), var(--slate-deep));
}

.player-history-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 8px;
}

.player-history-tabs a {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid rgba(83, 83, 110, .24);
    border-radius: 999px;
    color: var(--slate-deep);
    background: rgba(255, 255, 255, .7);
    font-weight: 700;
    white-space: nowrap;
}

.player-history-tabs a[aria-current="page"] {
    border-color: rgba(229, 207, 139, .72);
    color: var(--gold-light);
    background: linear-gradient(145deg, var(--slate-soft), var(--slate-deep));
}

.player-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.player-support-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.player-support-actions .panel {
    margin-bottom: 0;
}

.player-summary-card {
    min-height: 128px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 18px;
    border: 1px solid rgba(229, 207, 139, .52);
    color: var(--ivory);
    background: linear-gradient(145deg, var(--slate-soft), var(--slate-deep));
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
}

.player-summary-card > span {
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.player-summary-card strong {
    color: #fffdf3;
    font: 500 24px/1.25 var(--serif);
}

.player-summary-card small {
    color: rgba(244, 240, 223, .65);
}

.muted,
small {
    color: var(--muted);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 34px;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .96) 0 7%, transparent 28%),
        linear-gradient(90deg, transparent 49.8%, rgba(179, 150, 77, .22) 50%, transparent 50.2%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .3) 0 22px, rgba(154, 212, 225, .12) 22px 23px),
        linear-gradient(145deg, var(--ice-0), var(--ice-2));
}

.login-page::before,
.login-page::after {
    position: fixed;
    top: 50%;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(172, 143, 72, .18);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.login-page::before { left: -220px; }
.login-page::after { right: -220px; }

.login-card {
    position: relative;
    z-index: 2;
    width: min(450px, calc(100% - 20px));
    padding: 38px 42px 42px;
    border: 1px solid rgba(230, 208, 139, .66);
    color: var(--ivory);
    background: linear-gradient(150deg, rgba(91, 91, 118, .985), rgba(57, 58, 79, .995));
    box-shadow:
        0 34px 90px rgba(52, 52, 72, .23),
        inset 0 0 0 4px rgba(255, 255, 255, .045);
}

.login-card::before,
.login-card::after {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid var(--gold-light);
    content: "";
    transform: rotate(45deg);
}

.login-card::before { top: -11px; left: -11px; }
.login-card::after { right: -11px; bottom: -11px; }

.login-card h1 {
    margin: 8px 0;
    color: var(--gold-light);
    font: 500 34px var(--serif);
    text-align: center;
}

.login-card > p {
    text-align: center;
}

.login-card .muted {
    margin-bottom: 24px;
    color: rgba(244, 240, 223, .68);
}

.login-card label {
    color: var(--ivory);
}

.login-card input:not([type="checkbox"]) {
    border-color: rgba(222, 199, 131, .5);
    background: rgba(250, 248, 238, .97);
}

.login-field-error {
    margin: 7px 0 0;
    color: #ffc2cd;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.login-card input[aria-invalid="true"] {
    border-color: #ffc2cd;
}

.login-ornament {
    display: grid;
    grid-template-columns: 1fr 58px 1fr;
    align-items: center;
    gap: 12px;
    margin: 0 auto 22px;
}

.login-ornament i {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-light));
}

.login-ornament i:last-child {
    background: linear-gradient(90deg, var(--gold-light), transparent);
}

.login-ornament span {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-self: center;
    place-items: center;
    color: var(--gold-light);
    font: 600 15px var(--serif);
}

.login-ornament span::before {
    position: absolute;
    inset: 4px;
    border: 1px solid var(--gold-light);
    content: "";
    transform: rotate(45deg);
}

.login-submit {
    min-height: 54px;
    display: grid;
    margin-top: 4px;
    font: 500 15px var(--serif);
}

.login-submit small {
    color: rgba(239, 217, 140, .65);
    font: 8px var(--sans);
    letter-spacing: .18em;
}

nav[role="navigation"] {
    margin-top: 16px;
}

nav[role="navigation"] svg {
    width: 18px;
}

nav[role="navigation"] > div:first-child {
    display: none;
}

nav[role="navigation"] span,
nav[role="navigation"] a {
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid var(--line);
    background: var(--surface);
}

/* Login Board CMS workflow */
.login-board-id {
    max-width: 220px;
    overflow-wrap: anywhere;
}

.login-board-reward {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 180px) auto;
    align-items: start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
}

.login-board-reward > *,
.login-board-item-field,
.login-board-item-option span {
    min-width: 0;
}

.login-board-selected-item,
.login-board-item-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-board-selected-item img,
.login-board-item-option img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: none;
}

.login-board-selected-item [hidden] {
    display: none;
}

.login-board-item-picker {
    margin-top: 8px;
}

.login-board-item-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 8px;
}

.login-board-item-option {
    padding: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.login-board-item-option small {
    display: block;
    color: var(--muted);
}

@media (max-width: 640px) {
    .login-board-reward {
        grid-template-columns: minmax(0, 1fr);
    }
}

.login-bonus-workflow {
    display: grid;
    gap: 18px;
}

.login-board-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.login-board-stat {
    min-height: 114px;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 18px 20px;
    overflow: hidden;
}

.login-board-stat::after {
    position: absolute;
    right: -15px;
    bottom: -36px;
    width: 94px;
    height: 94px;
    border: 1px solid rgba(171, 143, 72, .17);
    content: "";
    transform: rotate(45deg);
}

.login-board-stat > span {
    color: var(--muted);
    font: 600 12px var(--serif);
}

.login-board-stat strong {
    color: var(--slate-deep);
    font: 500 31px/1.15 var(--serif);
}

.login-board-stat small,
.table-subline {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.gacha-list-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gacha-list-thumbnail {
    flex: none;
    width: 120px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 4px;
    object-fit: cover;
}

.gacha-list-copy {
    min-width: 0;
    overflow-wrap: anywhere;
}

.type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.type-pill.event {
    border-color: rgba(113, 69, 117, .3);
    color: #704574;
    background: #f1e8f2;
}

.type-pill.regular {
    border-color: rgba(41, 110, 123, .3);
    color: #286b77;
    background: #e4f2f4;
}

.badge.scheduled {
    border-color: rgba(45, 102, 143, .28);
    color: #2e658c;
    background: #e5f0f8;
}

.badge.ended {
    border-color: rgba(99, 96, 111, .25);
    color: #5f5b67;
    background: #ecebed;
}

.login-board-editor-layout {
    display: grid;
    grid-template-columns: minmax(560px, 1.04fr) minmax(500px, .96fr);
    align-items: start;
    gap: 18px;
}

.editor-section {
    display: grid;
    gap: 17px;
}

.editor-section .section-heading,
.preview-controls .section-heading {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(157, 139, 94, .22);
}

.section-help {
    margin-top: -7px;
}

.cms-field-label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 18px; }
.cms-field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.cms-field-heading { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 18px; }
.cms-field-heading > label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.story-content-heading { flex-wrap: wrap; }
.cms-required-mark { color: var(--danger); font-size: 1em; font-weight: 700; line-height: 1; }
.cms-required-mark[hidden] { display: none; }

.required-mark {
    color: var(--danger);
    font-size: 9px;
}

.muted-field {
    opacity: .55;
}

.builder-list,
.milestone-list,
.reward-builder-list {
    display: grid;
    gap: 10px;
}

.builder-row {
    display: grid;
    grid-template-columns: 36px minmax(170px, .8fr) minmax(250px, 1.2fr) 34px;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(157, 139, 94, .24);
    background: rgba(249, 250, 247, .7);
}

.character-voice-row {
    grid-template-columns: minmax(170px, .8fr) minmax(250px, 1.2fr) 34px;
    margin-bottom: 10px;
}

.gacha-pool-section {
    gap: 20px;
}

.gacha-pool-heading {
    align-items: flex-end;
    padding-top: 8px;
}

.gacha-pool-add-button {
    flex: 0 0 auto;
}

.gacha-pool-entry-row {
    grid-template-columns: minmax(140px, .7fr) minmax(240px, 1.4fr) minmax(90px, .45fr) minmax(90px, .45fr) minmax(90px, auto) auto;
}

.gacha-pool-featured-field {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gacha-pool-featured-field input {
    width: auto;
}

.gacha-pool-entry-row > .button.compact {
    margin: 0;
}

[data-gacha-preview] {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.gacha-game-preview {
    overflow-x: auto;
    border: 1px solid #5e5144;
    background: #302923;
}

.gacha-game-scene {
    position: relative;
    container-type: inline-size;
    min-width: 640px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    color: #211b17;
    background: #797068;
    font-family: var(--serif);
}

.gacha-game-scene::before {
    position: absolute;
    inset: -3%;
    content: "";
    background: url("../assets/cms/gacha-preview/scene-reference.jpg") center / cover;
    filter: blur(12px) brightness(.75);
}

.gacha-game-topline {
    position: absolute;
    top: 4%;
    left: 17%;
    width: 37%;
    height: 7%;
    display: grid;
    place-items: center;
    border: 4px double #d2c4ac;
    outline: 5px solid #29231e;
    color: #29231e;
    background: #efede6;
    font-size: clamp(12px, 2.3cqw, 28px);
    letter-spacing: .16em;
}

.gacha-game-banner {
    position: absolute;
    top: 20%;
    left: 18%;
    width: 66%;
    height: 63%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 11px ridge #a68b58;
    outline: 5px solid #24201b;
    color: #e8ded1;
    background: #312835;
    box-shadow: 0 12px 24px #19141080;
    font-size: clamp(12px, 2cqw, 24px);
}

.gacha-game-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gacha-game-sidebar {
    position: absolute;
    z-index: 1;
    top: 15%;
    left: 10.5%;
    width: 21.5%;
    height: 60%;
    font-size: clamp(7px, 1.25cqw, 16px);
}

.gacha-game-sidebar-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.gacha-game-name,
.gacha-game-term,
.gacha-game-costs {
    position: absolute;
    right: 16%;
    left: 16%;
    overflow: hidden;
}

.gacha-game-name {
    top: 31%;
    height: 16%;
    display: grid;
    place-items: center;
    padding: 2%;
    border: 1px solid #5e5445;
    background: #fffef9;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

.gacha-game-term {
    top: 51%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 2%;
    color: #f7f1e5;
    background: #382d21;
    font-size: .7em;
    line-height: 1.15;
}

.gacha-game-term span { text-align: right; }

.gacha-game-costs {
    top: 64%;
    bottom: 10%;
    display: grid;
    align-content: center;
    padding: 4%;
    border: 3px double #544a3d;
    background: #fffefa;
}

.gacha-game-costs > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 5% 0;
    border-bottom: 1px solid #b4a692;
    font-size: .75em;
}

.gacha-game-costs > div:last-child { border-bottom: 0; }

.gacha-game-arrow {
    position: absolute;
    top: 46%;
    width: 5.5%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 5px double #4b4035;
    border-radius: 50%;
    background: #f4f0e8;
    font-size: clamp(10px, 2cqw, 25px);
}

.gacha-game-arrow.previous { left: 4%; }
.gacha-game-arrow.next { right: 4%; }

.gacha-game-draws {
    position: absolute;
    right: 17%;
    bottom: 3.8%;
    left: 17%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5%;
}

.gacha-game-draw {
    min-width: 0;
    aspect-ratio: 2.6 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3%;
    padding: 4%;
    border: 5px ridge #514639;
    border-radius: 50%;
    background: #f8f6ee;
    box-shadow: 0 3px 9px #20191299, inset 0 0 0 2px #c2b7a3;
    font-size: clamp(7px, 1.1cqw, 15px);
    white-space: nowrap;
}

.gacha-game-draw span { font-size: .75em; }
.gacha-game-draw strong { font-size: 1.4em; }
.gacha-game-draw small { font-size: .75em; }
.gacha-game-draw.ticket { background: #e9eff0; }

.gacha-game-dots {
    position: absolute;
    bottom: 1%;
    left: 50%;
    display: flex;
    gap: 7px;
    transform: translateX(-50%);
}

.gacha-game-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f5f2ec;
}

.gacha-game-dots i.active { background: #8b4947; }

.gacha-preview-assets {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.gacha-preview-assets p {
    margin: 6px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.gacha-preview-detail {
    display: grid;
    align-content: start;
    gap: 6px;
}

.gacha-preview-detail img {
    width: 100%;
    max-height: 190px;
    object-fit: contain;
    background: #27212b;
}

.builder-index {
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(155, 129, 67, .36);
    color: var(--gold-deep);
    background: rgba(248, 240, 215, .58);
    font: 700 11px var(--serif);
}

.icon-button {
    width: 34px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(181, 63, 85, .25);
    border-radius: 3px;
    background: #fff8fa;
    cursor: pointer;
    font-size: 18px;
}

.icon-button:disabled,
.button:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
}

.milestone-card {
    overflow: hidden;
    border: 1px solid rgba(155, 129, 67, .34);
    background: rgba(255, 255, 252, .62);
}

.milestone-card > header {
    display: grid;
    grid-template-columns: auto 1fr 34px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(157, 139, 94, .22);
    background: linear-gradient(90deg, rgba(229, 243, 245, .78), rgba(248, 240, 215, .45));
}

.milestone-card > header .help {
    text-align: right;
}

.milestone-day {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--slate-deep);
    font: 800 11px var(--sans);
}

.milestone-day input {
    width: 64px;
    padding: 7px 9px;
    font-weight: 800;
}

.reward-builder-list {
    padding: 12px;
}

.reward-builder-row {
    display: grid;
    grid-template-columns: 42px minmax(92px, .55fr) minmax(170px, 1.2fr) minmax(90px, .45fr) 34px;
    align-items: end;
    gap: 8px;
}

.reward-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 2px solid #8b7850;
    border-radius: 50%;
    color: #3c4054;
    background: radial-gradient(circle at 34% 28%, #fffef5, #ddd5bc 72%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65), 0 3px 8px rgba(38, 39, 55, .12);
    font: 800 15px var(--serif);
}

.reward-icon.beryl {
    color: #258aa0;
    background: radial-gradient(circle at 35% 28%, #bdf6ff, #5ac4d6 62%, #31869a);
}

.reward-icon.ticket {
    border-radius: 7px;
    color: #6b3a74;
    background: linear-gradient(135deg, #faf1fc, #cfaed6);
}

.reward-icon-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: contain;
}

.reward-icon.key { color: #77521e; }
.reward-icon.drink { color: #31705f; }

.builder-empty,
.preview-empty-reward {
    padding: 18px;
    border: 1px dashed rgba(121, 119, 132, .35);
    color: var(--muted);
    text-align: center;
    font-size: 11px;
}

.button.compact {
    min-height: 34px;
    margin: 0 12px 12px;
    padding: 6px 11px;
    font-size: 10px;
}

.button-row .button.compact {
    margin: 0;
}

.button.present-reward-add {
    width: 100%;
    margin-top: 16px;
    border-style: dashed;
    box-shadow: none;
}

.editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.editor-actions > div:first-child {
    display: grid;
    gap: 4px;
}

.gacha-action-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gacha-action-form input:not([type="hidden"]) {
    flex: 1 1 220px;
    min-width: 0;
}

.gacha-action-form input:not([type="hidden"]),
.gacha-action-form .button {
    height: 44px;
}

.editor-errors {
    order: -1;
}

.login-board-preview-column {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 12px;
}

.preview-controls {
    display: grid;
    gap: 14px;
}

.preview-live {
    padding: 4px 8px;
    border: 1px solid rgba(41, 123, 101, .32);
    border-radius: 999px;
    color: #21634f;
    background: #e2f3ed;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

.preview-live::before {
    content: "● ";
}

.preview-control-grid {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 10px;
}

.preview-control-grid label:last-child {
    grid-column: 1 / -1;
}

.game-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid #171820;
    background: #222630;
    box-shadow: 0 16px 34px rgba(38, 39, 55, .18);
}

.game-preview-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(216, 203, 159, .17), transparent 22%),
        linear-gradient(115deg, rgba(14, 20, 25, .4), rgba(16, 17, 24, .87)),
        repeating-linear-gradient(90deg, transparent 0 12%, rgba(202, 188, 148, .05) 12.2% 12.5%),
        #293139;
}

.game-preview-backdrop::before,
.game-preview-backdrop::after {
    position: absolute;
    border: 1px solid rgba(205, 188, 133, .15);
    content: "";
    transform: rotate(45deg);
}

.game-preview-backdrop::before { width: 180px; height: 180px; top: -105px; left: -70px; }
.game-preview-backdrop::after { width: 240px; height: 240px; right: -120px; bottom: -145px; }

.game-board-modal {
    position: absolute;
    inset: 7%;
    display: grid;
    grid-template: minmax(0, 1fr) 58px / 42% 58%;
    border: 4px double #5b513d;
    color: #25242a;
    background: #eeeae0;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42), inset 0 0 36px rgba(101, 82, 46, .1);
    font-family: var(--serif);
}

.game-board-close {
    position: absolute;
    z-index: 3;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    border: 3px double #4d4436;
    border-radius: 50%;
    color: #28262a;
    background: #f8f4e9;
    font: 700 20px/1 var(--sans);
}

.game-character-panel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-right: 2px solid #5b513d;
    background: linear-gradient(160deg, #f5f0e5, #d7d0c2);
}

.game-character-art {
    --character-color: #5f6070;
    --character-shadow: #22232d;
    position: absolute;
    inset: 7% 10% 0;
    overflow: hidden;
    border: 3px double #7f704e;
    background:
        radial-gradient(ellipse at 50% 29%, #d5b9aa 0 8%, transparent 8.4%),
        radial-gradient(ellipse at 50% 31%, #20222d 0 12%, transparent 12.5%),
        radial-gradient(ellipse at 50% 82%, var(--character-color) 0 38%, transparent 38.5%),
        linear-gradient(160deg, #ddd5c5, #aca592);
    box-shadow: inset 0 0 0 6px rgba(49, 43, 34, .15);
}

.game-character-art::before {
    position: absolute;
    inset: 39% 13% -18%;
    border-radius: 50% 50% 18% 18%;
    background: linear-gradient(145deg, var(--character-color), var(--character-shadow));
    box-shadow: 0 -16px 0 rgba(31, 31, 39, .35);
    content: "";
}

.game-character-art span {
    position: absolute;
    z-index: 2;
    top: 17%;
    left: 50%;
    color: rgba(255, 255, 255, .78);
    font: 700 clamp(24px, 4vw, 58px) var(--serif);
    text-shadow: 0 3px 12px rgba(0, 0, 0, .25);
    transform: translateX(-50%);
}

.game-character-caption {
    position: absolute;
    right: 12%;
    bottom: 6%;
    left: 12%;
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid rgba(91, 81, 61, .65);
    background: rgba(246, 241, 230, .9);
    text-align: center;
}

.game-character-caption span { font-size: clamp(10px, 1.2vw, 15px); font-weight: 700; }
.game-character-caption small { overflow: hidden; color: #777064; font: 7px var(--sans); text-overflow: ellipsis; white-space: nowrap; }

.game-reward-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 8px;
    padding: 7% 6% 4%;
}

.game-reward-panel header {
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 5px 14px;
    border: 3px double #5b513d;
    border-radius: 50%;
    background: #f6f2e8;
}

.game-reward-panel header strong { font-size: clamp(10px, 1.5vw, 18px); }
.game-reward-panel header span { font-size: clamp(7px, .85vw, 11px); }

.preview-reward-caption {
    color: #766846;
    font: 800 7px var(--sans);
    letter-spacing: .14em;
    text-align: center;
}

.game-reward-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: center;
    gap: clamp(4px, .8vw, 10px);
}

.game-reward {
    min-width: 0;
    display: grid;
    grid-template: 1fr auto / 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 1px;
}

.game-reward .reward-icon {
    grid-column: 1 / -1;
    width: clamp(28px, 4.1vw, 50px);
    height: clamp(28px, 4.1vw, 50px);
    font-size: clamp(9px, 1vw, 14px);
}

.game-reward strong {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(6px, .65vw, 9px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-reward b { font: 800 clamp(6px, .65vw, 9px) var(--sans); }
.game-reward-panel p { margin: 0; font-size: clamp(6px, .75vw, 10px); text-align: center; }

.game-day-track {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, .65vw, 9px);
    padding: 9px 5%;
    border-top: 2px solid #6c6048;
}

.game-day {
    position: relative;
    width: min(52px, 11%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 3px double #655a45;
    border-radius: 50%;
    background: #f8f4ea;
    font-size: clamp(5px, .65vw, 8px);
}

.game-day.current { box-shadow: 0 0 0 2px #b08b40; }

.game-stamp {
    position: absolute;
    inset: -5%;
    display: grid;
    place-items: center;
    border: 2px solid rgba(152, 40, 58, .88);
    border-radius: 50%;
    color: rgba(152, 40, 58, .92);
    font: 900 clamp(7px, .8vw, 11px) var(--sans);
    transform: rotate(-13deg);
}

.game-stamp.animate { animation: login-stamp .48s cubic-bezier(.17, .84, .36, 1.35) both; }
.game-preview.reopen-mode .game-stamp { animation: none; }

@keyframes login-stamp {
    from { opacity: 0; transform: scale(1.8) rotate(-24deg); }
    to { opacity: 1; transform: scale(1) rotate(-13deg); }
}

.preview-footnote {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}

@media (max-width: 1240px) {
    .gacha-pool-entry-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .player-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .login-board-stats { grid-template-columns: repeat(2, 1fr); }
    .login-board-editor-layout { grid-template-columns: 1fr; }
    .login-board-preview-column { position: static; }
    .game-preview { width: min(760px, 100%); justify-self: center; }
}

@media (max-width: 900px) {
    .game-frame { display: none; }
    .sidebar {
        position: fixed;
        z-index: 70;
        inset: 0 auto 0 0;
        width: min(320px, calc(100vw - 48px));
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 20px 16px 16px;
        overflow-y: auto;
        transform: translateX(calc(-100% - 20px));
    }
    .sidebar-toggle-icon--panel { display: none; }
    .sidebar-toggle-icon--close { display: block; }
    .sidebar-header,
    .sidebar-is-collapsed .sidebar-header { display: flex; padding: 0 7px; }
    .sidebar nav { grid-template-columns: 1fr; }
    .sidebar nav a { grid-template-columns: 38px 1fr; }
    .sidebar [data-tooltip]::before { display: none !important; }
    .sidebar-is-collapsed .sidebar .nav-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
    }
    body.sidebar-drawer-open { overflow: hidden; }
    body.sidebar-drawer-open .sidebar { transform: translateX(0); }
    .mobile-menu-toggle { display: grid; }
    .main,
    .sidebar-is-collapsed .main { margin: 0; padding: 22px; }
    .two-columns { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .gacha-preview-assets { grid-template-columns: 1fr; }
    .gacha-preview-detail img { width: min(170px, 100%); }
    .sidebar nav { grid-template-columns: 1fr; }
    .topbar { align-items: flex-start; }
    .topbar-actions { flex-wrap: wrap; }
    .hud-chip { display: none; }
    .dashboard-hero { grid-template-columns: 1fr; padding: 28px; }
    .hero-crest { display: none; }
    .quick-start { align-items: flex-start; flex-direction: column; }
    .form-grid { grid-template-columns: 1fr; }
    .present-reward-row { grid-template-columns: minmax(0, 1fr) 34px; gap: 14px; padding: 14px; }
    .present-reward-summary { grid-column: 1; }
    .present-reward-remove { grid-column: 2; grid-row: 1; }
    .present-reward-quantity { grid-column: 1 / -1; }
    .form-grid .full { grid-column: auto; }
    .announcement-editor-heading { align-items: flex-start; flex-direction: column; }
    .announcement-block-fields { grid-template-columns: 1fr; }
    .announcement-text-field,
    .announcement-block-errors { grid-column: auto; }
    .danger-zone { grid-template-columns: 1fr; }
    .player-modal-layer { padding: 0; }
    .player-modal { width: 100%; max-height: 100vh; min-height: 100vh; border: 0; }
    .player-modal-header { padding: 18px 20px; }
    .player-modal-header code { display: inline-block; max-width: calc(100vw - 100px); overflow: hidden; text-overflow: ellipsis; }
    .player-modal-body { padding: 0 16px 18px; }
    .player-detail-toolbar { grid-template-columns: minmax(0, 1fr); gap: 0; margin-right: -16px; margin-left: -16px; padding: 0 16px 12px; }
    .player-detail-toolbar > .button { justify-self: end; }
    .player-detail-toolbar .player-detail-tabs { margin: 0; padding: 14px 0; }
    .player-detail-tabs { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
    .player-modal .table-wrap table { min-width: 620px; }
    .builder-row { grid-template-columns: 32px 1fr 34px; }
    .builder-row label:nth-of-type(2) { grid-column: 2 / 3; }
    .character-voice-row { grid-template-columns: 1fr 34px; }
    .character-voice-row label:nth-of-type(2) { grid-column: 1; }
    .character-voice-row .icon-button { grid-column: 2; grid-row: 1; }
    .gacha-pool-heading { align-items: stretch; flex-direction: column; }
    .gacha-pool-add-button { width: 100%; }
    .gacha-pool-entry-row { grid-template-columns: 1fr; }
    .gacha-pool-reward-field { grid-column: auto; }
    .reward-builder-row { grid-template-columns: 42px 1fr 34px; }
    .reward-builder-row label { grid-column: 2 / 3; }
    .reward-builder-row .icon-button { grid-column: 3; grid-row: 1; }
    .editor-actions { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
    .main { padding: 16px; }
    .topbar { flex-direction: column; }
    .topbar-actions { width: 100%; justify-content: flex-start; }
    .account-menu-panel { right: auto; left: 0; }
    .stats-grid { grid-template-columns: 1fr; }
    .button-row { flex-wrap: wrap; }
    .wallet-grid { grid-template-columns: 1fr; }
    .player-summary-grid { grid-template-columns: 1fr; }
    .panel { padding: 18px; }
    .table-wrap { padding: 0; }
    .login-page { padding: 18px; }
    .login-card { padding: 32px 24px 34px; }
    .login-board-stats { grid-template-columns: 1fr; }
    .preview-control-grid { grid-template-columns: 1fr; }
    .preview-control-grid label:last-child { grid-column: auto; }
    .game-preview { aspect-ratio: 4 / 5; }
    .game-board-modal { grid-template: 34% minmax(0, 1fr) 58px / 1fr; }
    .game-character-panel { border-right: 0; border-bottom: 2px solid #5b513d; }
    .game-character-art { inset: 5% 22% 0; }
    .game-character-caption { right: 20%; left: 20%; }
    .game-day-track { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}
.cms-item-preview { display: block; width: 96px; height: 96px; margin-top: .5rem; object-fit: contain; }
.cms-item-list-icon { display: block; width: 56px; height: 56px; object-fit: contain; }
.stage-basic-fields, .stage-basic-fields .form-grid { align-items: start; }
.stage-basic-fields > *, .stage-basic-fields .form-grid > * { min-width: 0; }
.stage-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.player-list-date { display: flex; align-items: stretch; min-width: 0; }
.filters .player-list-date input[data-player-date-text] { width: 135px; min-width: 0; }
.filters .player-list-date input[data-player-date-picker] { width: 40px; min-width: 40px; padding: 8px; color: transparent; }
.player-list-date input[data-player-date-picker]::-webkit-datetime-edit { display: none; }
.player-list-date input[data-player-date-picker]::-webkit-calendar-picker-indicator { margin: 0; cursor: pointer; }
/* Reserve room for Details instead of letting the shared 1% action column overflow. */
.player-list-table { table-layout: fixed; min-width: 0; }
.player-list-table th:first-child { width: 22%; }
.player-list-table th:nth-child(2) { width: 16%; }
.player-list-table th:nth-child(3) { width: 18%; }
.player-list-table th:nth-child(4) { width: 12%; }
.player-list-table th:nth-child(5) { width: 8%; }
.player-list-table th:nth-child(6) { width: calc(24% - 80px); }
.player-list-table th.actions-heading { width: 80px; }
.player-list-table th { white-space: normal; overflow-wrap: anywhere; }
.player-list-table td code { white-space: normal; overflow-wrap: anywhere; }
.player-list-table th,
.player-list-table td { padding: 14px 10px; }
@media (max-width: 700px) {
    .player-list-table,
    .player-list-table tbody,
    .player-list-table tr { display: block; width: 100%; }
    .player-list-table thead { display: none; }
    .player-list-table tr { padding: 12px; }
    .player-list-table tr + tr { border-top: 1px solid rgba(157, 139, 94, .22); }
    .player-list-table td {
        display: grid;
        grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
        gap: 12px;
        max-width: none;
        padding: 8px 0;
        border: 0;
    }
    .player-list-table td::before { content: attr(data-label); color: var(--muted); font-weight: 700; }
    .player-list-table td > * { min-width: 0; }
    .player-list-table td.actions { display: flex; justify-content: flex-end; width: auto; }
    .player-list-table td.actions::before,
    .player-list-table td.empty::before { content: none; }
    .player-list-table td.empty { display: block; }
    .player-list-table .player-coin { display: none; }
}
.player-coin { color: var(--gold-deep); }
.player-detail-page { min-width: 0; border: 1px solid var(--gold); background: var(--ice-0); }
.player-detail-page .player-modal-header code { overflow-wrap: anywhere; }
.player-detail-page .player-modal-body { overflow: visible; }
[data-player-search-status]:empty { display: none; }
[data-player-list-results][aria-busy="true"] { opacity: .65; }
[data-player-search]:disabled::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: player-search-spin .7s linear infinite; }
@keyframes player-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-player-search]:disabled::before { animation: none; } }
.stage-key-input:disabled { color: var(--muted); background: rgba(232, 231, 225, .72); opacity: 1; cursor: not-allowed; }
@media (max-width: 700px) { .stage-metrics-grid { grid-template-columns: 1fr; } }
.stage-builder-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr) auto; gap: 14px; align-items: start; margin: 18px 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.stage-goal-row { grid-template-columns: minmax(0, 1fr) auto; }
.stage-builder-row > * { min-width: 0; }
.stage-builder-row label, .stage-picker-controls { display: grid; gap: 6px; min-width: 0; }
.stage-picker-controls label { min-width: 0; }
.stage-picker-row[data-group="unlock_conditions"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
.stage-picker-footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stage-builder-row [hidden] { display: none; }
.stage-goal-preview { margin-top: 18px; padding: 14px 18px; background: var(--ivory); border: 1px solid var(--gold); }
.stage-field-error { color: var(--danger); }
.stage-reward-icon { width: 48px; height: 48px; object-fit: contain; vertical-align: middle; }
@media (max-width: 900px) { .stage-builder-row, .stage-picker-row[data-group="unlock_conditions"] { grid-template-columns: minmax(0, 1fr); } }

/* The form grid must respect progressive disclosure and long story keys. */
[data-story-part][hidden] { display: none; }
[data-story-form] > *, [data-story-form] .form-grid > * { min-width: 0; }
[data-story-form] code { overflow-wrap: anywhere; }

/* Story authoring uses the shared CMS controls on narrow screens. */
[data-story-form] fieldset, .story-scene-form fieldset { min-width: 0; }
.story-scene-form > * { min-width: 0; }
.story-scene-form { align-items: start; }
.story-scene-form input, .story-scene-form select, .story-scene-form textarea { max-width: 100%; }
.story-scene-form label > input[type="file"] { width: 100%; }

.story-scene-values { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; }
.story-scene-values dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

.shop-products-table { min-width: 1200px; }
.shop-products-table th, .shop-products-table td { white-space: nowrap; }
.shop-products-table .list-title-cell { min-width: 240px; white-space: normal; }
[data-shop-form] [hidden] { display: none; }
.shop-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.shop-field-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.shop-field-heading label, .shop-field-heading h2 { margin: 0; }
.shop-field-heading label, .shop-label-heading, .shop-item-picker > label { display: flex; align-items: center; gap: 6px; }
.shop-item-row { align-items: end; margin-bottom: 12px; }
.shop-item-row > label { flex: 0 1 160px; min-width: 0; }
.shop-item-picker { position: relative; flex: 1 1 280px; min-width: 0; }
.shop-item-picker > input, .shop-item-picker > select { width: 100%; }
.shop-item-options {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    max-height: 280px; overflow-y: auto; border: 1px solid var(--line);
    border-radius: 8px; background: var(--ice-0); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.shop-item-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.shop-item-option span { min-width: 0; overflow-wrap: anywhere; }
.shop-item-option img { flex-shrink: 0; object-fit: contain; }
.shop-item-option:hover, .shop-item-option.is-active { background: var(--ice-2); }
.shop-item-option-empty { padding: 12px; }
.shop-item-search-status { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
    .shop-item-picker { flex-basis: 100%; }
}

.shop-product-summary { display: flex; align-items: center; gap: 10px; }
.shop-product-summary img { flex-shrink: 0; object-fit: contain; }
.shop-product-summary span { min-width: 0; overflow-wrap: anywhere; }


/* Shared reporting components */
.kpi-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.kpi-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-charts > *,
.cms-line-chart,
.cms-line-chart figcaption > * {
    min-width: 0;
}

.cms-line-chart {
    margin: 0;
}

.cms-line-chart figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cms-line-chart h3 {
    margin: 0;
    font-size: 16px;
}

.cms-line-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    font-size: 12px;
}

.chart-legend span::before {
    display: inline-block;
    width: 18px;
    margin-right: 5px;
    border-top: 3px solid var(--gold-deep);
    content: "";
    vertical-align: middle;
}

.chart-legend .chart-previous::before {
    border-top-style: dashed;
    border-color: var(--slate);
}

.chart-line {
    fill: none;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.chart-line--current { stroke: var(--gold-deep); }
.chart-line--previous { stroke: var(--slate); stroke-dasharray: 5 4; }
.chart-point--current { fill: var(--gold-deep); }
.chart-point--previous { fill: var(--slate); }
.chart-grid { stroke: var(--line); stroke-width: .5; }
.chart-label { fill: var(--slate); font: 12px var(--sans); }
.chart-table-link { font-size: 12px; }
.stat-card .period-change { color: var(--ivory); }
.kpi-table-note { padding: 0 24px; }
.kpi-daily-table { white-space: nowrap; }
.kpi-daily-table tfoot { font-weight: 700; background: var(--surface-soft); }
.kpi-unavailable-table td:last-child { min-width: 240px; white-space: normal; }


@media (max-width: 600px) {
    .kpi-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-filters label {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    .kpi-filters input,
    .kpi-filters .button {
        width: 100%;
        min-width: 0;
    }
}


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Player Edit uses the shared CMS palette and modal layout. */
.player-field-error { color: var(--danger); margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.player-support-actions > *, .player-support-actions input, .player-support-actions select { min-width: 0; max-width: 100%; }
.player-support-actions [aria-invalid="true"] { border-color: var(--danger); }
.player-confirmation { display: flex; align-items: flex-start; gap: 8px; }
.player-confirmation input { flex: 0 0 auto; margin-top: 5px; }
.player-edit-toast { position: sticky; top: 8px; z-index: 3; padding: 12px 16px; border: 1px solid var(--success); color: var(--success); background: var(--ice-0); box-shadow: 0 4px 16px rgba(29,30,44,.12); }
.player-edit-toast.is-error { border-color: var(--danger); color: var(--danger); }
.character-list-sort, .item-list-sort { display: inline-flex; gap: 3px; margin-left: 4px; }
.character-list-sort a, .item-list-sort a { padding: 3px; color: var(--muted); text-decoration: none; }
.character-list-sort a[aria-current], .item-list-sort a[aria-current] { color: var(--ink); background: var(--surface-soft); outline: 1px solid currentColor; }
.character-list-table { min-width: 1320px; }
.character-list-table td:nth-child(8) { white-space: nowrap; }
.character-list-table .list-title-cell { white-space: normal; overflow-wrap: anywhere; }
.character-type-dot { display: inline-block; width: .85rem; height: .85rem; border-radius: 50%; vertical-align: -.08rem; }
.login-board-toast { position: fixed; top: 16px; right: 16px; max-width: calc(100vw - 32px); z-index: 100; padding: 16px 24px; border: 1px solid var(--success); border-radius: 4px; background: var(--surface); color: var(--text); box-shadow: 0 8px 24px #0003; }
.login-board-toast.is-error { border-color: var(--danger); }
.login-board-toast[hidden] { display: none; }
[data-board-create-confirmation][hidden] { display: none; }
.character-list-toast, .item-list-toast { position: sticky; top: 8px; z-index: 3; padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--success); color: var(--success); background: var(--ice-0); box-shadow: 0 4px 16px rgba(29,30,44,.12); }
.character-list-toast.is-error, .item-list-toast.is-error { border-color: var(--danger); color: var(--danger); }
.character-list-toast[hidden], .item-list-toast[hidden] { display: none; }
[data-character-search]:disabled::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: player-search-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { [data-character-search]:disabled::before { animation: none; } }
.player-support-actions [hidden], .player-edit-toast[hidden] { display: none; }
.player-modal-body dl dd { overflow-wrap: anywhere; }

.player-item-icon { width: 44px; height: 44px; object-fit: contain; }
[data-batch-confirm] { color: var(--text); border: 1px solid #c9aa55; max-width: min(90vw, 520px); padding: 28px; }
[data-batch-confirm]::backdrop { background: #22223488; }
[data-picker-options] { max-height: 260px; overflow: auto; }

.player-history-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.player-history-filter-grid > * { min-width: 0; }
.player-log-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.player-log-dialog { max-width: min(90vw, 760px); max-height: 85vh; overflow: auto; border: 1px solid #c9aa55; padding: 24px; }
@media (max-width: 760px) { .player-history-filter-grid { grid-template-columns: minmax(0, 1fr); } }

[data-player-batch] .button { width: auto; justify-self: start; }
[data-add-area] { min-width: 0; border: 1px solid #d5cbb4; padding: 16px; }
[data-add-area] > label { display: grid; gap: 8px; margin: 12px 0; }
.player-native-picker { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
[data-picker-options] { display: grid; gap: 4px; margin-bottom: 12px; background: #fff; border: 1px solid #d5cbb4; }
[data-picker-options][hidden] { display: none; }
.player-catalog-option { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-bottom: 1px solid #e4e1d9; padding: 10px 12px; background: #fff; color: #343447; text-align: left; font: inherit; cursor: pointer; }
.player-catalog-option:hover, .player-catalog-option[aria-selected="true"] { background: #eaf9fb; }
.player-catalog-option[hidden] { display: none; }
.player-catalog-option span { min-width: 0; overflow-wrap: anywhere; }
.player-story-episode { margin: 16px 0; border: 1px solid #d5cbb4; }
.player-story-episode > summary { padding: 14px; color: #424258; font-weight: 600; cursor: pointer; background: #f4f0df; }

.item-list-table { min-width: 1060px; }
.item-list-table td:first-child { min-width: 160px; max-width: 240px; }
.item-list-table td:first-child code { white-space: normal; overflow-wrap: anywhere; }
.item-list-table .list-title-cell { min-width: 180px; max-width: 280px; white-space: normal; overflow-wrap: anywhere; }
.item-list-table td:nth-child(6) { white-space: nowrap; }
[data-item-filters][aria-busy="true"] [data-item-search-status]::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 2px solid var(--line);
    border-top-color: var(--slate);
    border-radius: 50%;
    animation: item-search-spin .8s linear infinite;
}
@keyframes item-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    [data-item-filters][aria-busy="true"] [data-item-search-status]::before { animation: none; }
}

[data-player-batch] [hidden] { display: none !important; }
.cms-quantity-stepper { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cms-quantity-stepper input { width: 6.5em; min-width: 0; }
.cms-quantity-stepper .button { flex: 0 0 auto; min-width: 36px; padding: 8px; }

/* Shared calendar, extracted from Episode List. */
.cms-date-field { display: grid; gap: .35rem; min-width: 0; }
.cms-date-field > label { font-size: .8rem; }
.cms-date-control { position: relative; width: 100%; min-width: 0; }
.cms-date-control > [data-cms-date-text] { width: 100%; padding-right: 46px; }
.cms-date-control > .cms-date-picker { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.cms-date-control > .cms-calendar-button { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; min-height: 32px; padding: 6px; border: 0; border-radius: 2px; color: var(--muted); background: transparent; box-shadow: none; }
.cms-date-control > .cms-calendar-button:hover { color: var(--gold-deep); background: rgba(201,170,85,.14); box-shadow: none; transform: none; }
.cms-date-control > .cms-calendar-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cms-date-control > [hidden] { display: none; }
.cms-field-error { color: var(--danger); margin: 5px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.cms-field-error[hidden] { display: none; }

.cms-number-control { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cms-number-control > input { min-width: 0; width: 100%; }
.cms-number-control > button { flex: 0 0 32px; min-height: 32px; padding: 4px; }
.cms-number-control > [hidden] { display: none; }

.cms-confirm-dialog { max-width: min(460px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--surface); }
.cms-confirm-dialog::backdrop { background: #292a3c88; }
.cms-confirmation[hidden] { display: none; }
.cms-upload-preview { width: 160px; height: 160px; object-fit: cover; }
.cms-upload-preview[hidden] { display: none; }

.cms-rich-edit { min-height: 240px; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); resize: vertical; overflow: auto; }
.cms-rich-edit img, .cms-rich-output img { max-width: 100%; height: auto; }
.cms-rich-text > [hidden] { display: none; }

/* Shared Character selection used by Gacha Pool and Pity. */
.cms-character-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cms-character-picker > section {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

.cms-character-picker h3 { margin: 0 0 16px; font: 700 14px var(--sans); }
.cms-character-picker .cms-field-heading h3 { margin: 0; }
.cms-character-picker [data-character-count],
.cms-character-picker [data-selected-count] { color: var(--muted); font-weight: 500; }

.cms-character-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr);
    gap: 12px;
    margin: 18px 0;
}

.cms-character-list {
    max-height: 420px;
    min-height: 160px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c6c3b8 transparent;
}

.cms-character-list[data-character-list] { display: grid; align-content: start; gap: 6px; }

/* This selector must outrank the shared inline checkbox-label rule. */
.cms-character-list > label.cms-character-option {
    display: grid;
    grid-template-columns: 18px 44px minmax(0, 1fr) 42px;
    align-items: center;
    align-content: center;
    width: 100%;
    min-height: 76px;
    gap: 12px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--surface-soft);
    cursor: pointer;
    letter-spacing: 0;
    transition: background .15s, border-color .15s;
}

.cms-character-list > .cms-character-option:hover { background: #f3f5eb; border-color: rgba(164,139,77,.35); }
.cms-character-list > .cms-character-option:has(input:checked) { background: #eaf6f6; border-color: #b7d9dc; }
.cms-character-list > .cms-character-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: -2px; }
.cms-character-list > .cms-character-option:has(input:disabled:not(:checked)) { opacity: .55; cursor: default; }
.cms-character-option > input { width: 17px; height: 17px; margin: 0; accent-color: var(--gold-deep); }

.cms-character-option img,
.cms-character-selected-row > img,
.cms-character-icon {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(164,139,77,.25);
    border-radius: 5px;
    background: var(--ivory);
    object-fit: contain;
}

.cms-character-icon { display: grid; place-items: center; color: var(--slate-soft); font: 700 10px var(--sans); }
.cms-character-identity { display: grid; gap: 5px; min-width: 0; }
.cms-character-identity strong { display: block; color: var(--slate-deep); font: 650 13px/1.45 var(--sans); overflow-wrap: anywhere; }
.cms-character-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 11px/1.4 var(--sans); }
.cms-character-rarity { justify-self: end; min-width: 34px; padding: 4px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--gold-deep); background: #faf5e7; text-align: center; font: 700 10px/1.2 var(--sans); }

.cms-character-selected { display: flex; flex-direction: column; }
.cms-character-selected > .cms-character-list { flex: 1; max-height: 550px; }

.cms-character-selected-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(130px, .8fr) 34px;
    align-items: center;
    gap: 12px;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(164,139,77,.2);
}

.cms-character-selected-row > * { min-width: 0; }
.cms-character-selected-row > .cms-field-error { grid-column: 1 / -1; }
.cms-character-selected-row .cms-character-rate { min-width: 0; }
.cms-character-selected-row [data-remove-character] { width: 34px; height: 34px; min-height: 34px; margin: 0; padding: 0; border: 1px solid #edcfd5; border-radius: 4px; color: var(--danger); background: #fcf1f3; font-size: 18px; }
.cms-character-selected-row [data-remove-character]:hover { background: #f7e3e7; }
[data-gacha-picker=pity] .cms-character-selected-row { grid-template-columns: 44px minmax(0,1fr) 34px; }
.cms-character-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.cms-character-total strong { font-variant-numeric: tabular-nums; }
.cms-character-total .is-invalid { color: var(--danger); }
.cms-character-status { font-size: 12px; margin: 8px 0; min-height: 18px; color: var(--muted); }
.gacha-current-image { margin: 12px 0 0; }
.gacha-current-image img { width: 100%; max-height: 200px; object-fit: contain; object-position: left; }
.gacha-current-image figcaption { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.gacha-spec-editor [data-gacha-pity-fields] { margin-top: 20px; display: grid; gap: 20px; }
.gacha-spec-editor [hidden] { display: none !important; }
.gacha-spec-editor .gacha-game-scene { min-width: 0; }
.gacha-spec-editor .gacha-game-banner { border-width: clamp(3px, .8cqw, 11px); outline-width: clamp(1px, .4cqw, 5px); }
.gacha-spec-editor .gacha-game-topline { border-width: 1px; outline-width: 1px; }
.gacha-spec-editor .gacha-game-costs { border-width: 1px; }
.gacha-rate-icon { width: 32px; height: 32px; object-fit: cover; vertical-align: middle; margin-right: 8px; }
.cms-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.cms-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cms-switch-track { position: relative; width: 44px; height: 24px; border: 1px solid var(--line); border-radius: 20px; background: #d8d8d3; }
.cms-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .15s; }
.cms-switch input:checked + .cms-switch-track { background: var(--gold-deep); }
.cms-switch input:checked + .cms-switch-track::after { transform: translateX(20px); }
.cms-switch input:focus-visible + .cms-switch-track { outline: 2px solid var(--gold); outline-offset: 3px; }
.cms-switch:has(input:disabled) { cursor: default; opacity: .65; }
.cms-number-field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.cms-number-field > label { display: inline-flex; gap: 4px; align-items: center; min-height: 18px; }
@media (max-width: 1150px) {
    .cms-character-picker { grid-template-columns: minmax(0,1fr); }
}

.cms-character-rate .cms-number-control { width: 100%; gap: 3px; }
.cms-character-rate .cms-number-control > button { flex-basis: 24px; margin: 0; padding: 2px; min-width: 24px; }
.cms-character-rate .cms-number-control > input { flex: 1 1 0; min-width: 0; width: 0; padding-inline: 5px; text-align: center; }

@media (max-width: 600px) {
    .cms-character-picker > section { padding: 14px; }
    .cms-character-search { grid-template-columns: minmax(0,1fr); }
    .cms-character-list > label.cms-character-option { grid-template-columns: 17px 40px minmax(0,1fr) 34px; gap: 8px; padding: 10px 8px; }
    .cms-character-option img, .cms-character-icon, .cms-character-selected-row > img { width: 40px; height: 40px; }
    .cms-character-selected-row { grid-template-columns: 40px minmax(0,1fr) 34px; gap: 10px; }
    .cms-character-rate { grid-column: 2 / 3; grid-row: 2; }
    .cms-character-selected-row > [data-remove-character] { grid-column: 3; grid-row: 1; }
}
.gacha-image-field .cms-upload-preview { width: 100%; max-height: none; aspect-ratio: 1056 / 567; object-fit: cover; }

/* Explore actions keep their own spacing when controls wrap on narrow screens. */
.cms-explore .page-actions,
.cms-explore .button-row {
    flex-wrap: wrap;
    gap: 16px;
}

.cms-explore .panel > form + form { margin-top: 16px; }
.cms-explore .filters { gap: 16px; }
.explore-reward-details { min-width: 220px; margin-top: 10px; }
.explore-reward-details summary { cursor: pointer; color: var(--gold-deep); }
.explore-reward-contents { min-width: 0; overflow-wrap: anywhere; }
.explore-reward-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.explore-reward-list li { display: flex; align-items: center; gap: 12px; }
.explore-reward-list li > div { min-width: 0; }
.explore-reward-list img { flex: 0 0 40px; object-fit: contain; }

.shop-list-toast { position: sticky; top: 8px; z-index: 3; padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--success); color: var(--success); background: var(--ice-0); box-shadow: 0 4px 16px rgba(29,30,44,.12); }
.shop-list-toast.is-error { border-color: var(--danger); color: var(--danger); }