/* Global Dark Theme */
:root {
    --bg-color: #0f1013;
    --bg-elevated: #15171b;
    --panel-bg: rgba(24, 26, 31, 0.92);
    --panel-bg-soft: rgba(28, 30, 36, 0.82);
    --panel-border: rgba(197, 169, 106, 0.2);
    --panel-border-strong: rgba(197, 169, 106, 0.38);
    --accent-color: #c5a96a;
    --accent-soft: rgba(197, 169, 106, 0.12);
    --text-color: #ece7da;
    --text-muted: #9c978d;
    --text-soft: #c7c0b3;
    --highlight: #efe1b3;
    --card-bg: rgba(26, 28, 34, 0.92);
    --danger: #c96f6f;
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 14px 30px rgba(0, 0, 0, 0.28);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --control-height: 44px;
    --input-height: 44px;
    --card-padding: 22px;
    --book-aspect-ratio: 3 / 4;
    --theme-btn-bg: linear-gradient(180deg, #32445f 0%, #253248 100%);
    --theme-btn-hover-bg: linear-gradient(180deg, #3b506f 0%, #2b3a54 100%);
    --theme-btn-text: #eef4ff;
    --theme-btn-border: rgba(129, 156, 198, 0.36);
    --theme-btn-shadow: 0 10px 20px rgba(7, 12, 22, 0.28);
    --theme-btn-secondary-bg: rgba(255, 255, 255, 0.04);
    --theme-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08);
    --theme-btn-secondary-text: var(--text-color);
    --theme-btn-secondary-border: rgba(255, 255, 255, 0.08);
    --theme-btn-ghost-hover-bg: rgba(255, 255, 255, 0.05);
    --theme-btn-active-bg: rgba(114, 143, 189, 0.16);
    --theme-btn-active-border: rgba(129, 156, 198, 0.32);
    --theme-btn-active-text: #f1f6ff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at top, rgba(197, 169, 106, 0.1), transparent 32%),
        linear-gradient(180deg, #121318 0%, #0f1013 58%, #0b0c10 100%);
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
    min-height: 100vh;
}

body.library-drawer-open {
    overflow: hidden;
}

/* 仅在游戏界面 (play.html) 禁用整体滚动 */
.game-body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Container & Cards (Universal) */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

.page-shell {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.page-title-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 720px;
}

.page-title {
    margin: 0;
    font-size: clamp(2.2rem, 3vw, 3rem);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.page-subtitle {
    margin: 0;
    max-width: 60ch;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.6;
}

.page-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.page-actions .btn {
    min-width: 104px;
}

.page-actions .btn.active,
.page-actions .btn[aria-pressed="true"] {
    background: var(--theme-btn-active-bg);
    border-color: var(--theme-btn-active-border);
    color: var(--theme-btn-active-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 28px;
    padding: 30px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(24, 26, 31, 0.96), rgba(18, 20, 24, 0.98));
    box-shadow: var(--shadow-md);
}

.hero-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-title {
    margin: 0;
    font-size: clamp(1.8rem, 2.1vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    font-weight: 600;
}

.hero-text {
    margin: 0;
    max-width: 58ch;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.hero-aside {
    display: grid;
    gap: 12px;
    align-content: start;
}

.info-panel {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--accent-color);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.muted {
    color: var(--text-muted);
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.section-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.section-copy {
    margin: 6px 0 0;
    color: var(--text-muted);
    max-width: 60ch;
}

.card {
    background: linear-gradient(180deg, rgba(30, 32, 38, 0.95), rgba(23, 25, 30, 0.95));
    border: 1px solid var(--panel-border);
    padding: var(--card-padding);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    color: var(--text-color);
    box-shadow: var(--shadow-md);
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.34);
    border-color: var(--panel-border-strong);
}
.card h3 {
    margin-top: 0;
    color: var(--highlight);
    font-size: 1.1rem;
    font-weight: 600;
}
.card p { color: var(--text-muted); }

.grid-container,
.bookshelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.bookshelf-grid > p {
    grid-column: 1 / -1;
}

.book-card {
    padding: var(--card-padding);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 280px;
    margin-bottom: 0;
}

.book-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.book-cover {
    width: 100%;
    aspect-ratio: var(--book-aspect-ratio);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.85em;
    position: relative;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.book-cover-label {
    font-size: 0.85em;
    color: #666;
}

.book-title {
    margin: 0;
    font-size: 1.02rem;
    color: var(--highlight);
    font-weight: 600;
}

.book-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.book-desc {
    font-size: 0.92rem;
    color: var(--text-soft);
    min-height: 3.2em;
}

.book-actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.book-card .btn {
    flex: 1 1 auto;
    justify-content: center;
}

.slot-badges {
    display: flex;
    gap: 6px;
    align-items: center;
}

.slot-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    color: #7f7b73;
    background: rgba(255, 255, 255, 0.04);
}

.slot-badge.filled {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: #222;
}

.archive-bookshelf {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.archive-slot-card .book-cover {
    aspect-ratio: 4 / 5;
}

.archive-slot-actions .btn {
    padding: 6px 10px;
    font-size: 0.8em;
}

.btn-danger {
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-text);
    border: 1px solid var(--theme-btn-secondary-border);
    box-shadow: none;
}
.btn-danger:hover {
    background: var(--theme-btn-secondary-hover-bg);
}

/* Lobby */
.lobby-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
}
.lobby-panel {
    background: linear-gradient(180deg, rgba(28, 30, 36, 0.96), rgba(22, 24, 29, 0.96));
    border: 1px solid var(--panel-border);
    padding: 20px;
    border-radius: 18px;
    box-shadow: var(--shadow-md);
}
.lobby-join {
    display: flex;
    gap: 10px;
}
.lobby-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.form-row {
    display: flex;
    gap: 10px;
}
.room-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--card-bg);
    margin-bottom: 10px;
    gap: 12px;
}
.room-list-item h3 {
    margin: 0 0 4px;
    font-size: 1em;
}
.room-meta {
    color: var(--text-muted);
    font-size: 0.85em;
}
.room-access-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    font-size: 0.8em;
    margin-top: 6px;
}
.room-access-public {
    color: #d7d9df;
}
.room-access-password {
    color: #f2ead3;
    border-color: rgba(197, 169, 106, 0.28);
    background: rgba(197, 169, 106, 0.12);
}
.room-access-invite {
    color: #d6e9ff;
    border-color: rgba(88, 150, 255, 0.28);
    background: rgba(88, 150, 255, 0.12);
}
.room-actions {
    display: flex;
    gap: 8px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--control-height);
    padding: 0 18px;
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    border: 1px solid var(--theme-btn-border);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    box-shadow: var(--theme-btn-shadow);
}
.btn:hover {
    background: var(--theme-btn-hover-bg);
    transform: translateY(-1px);
}
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.btn-secondary {
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-text);
    border: 1px solid var(--theme-btn-secondary-border);
}
.btn-secondary:hover {
    background: var(--theme-btn-secondary-hover-bg);
}

.btn-ghost {
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--theme-btn-secondary-border);
}

.btn-ghost:hover {
    background: var(--theme-btn-ghost-hover-bg);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* --- Mobile Responsive Styles --- */
.mobile-nav {
    display: none; /* Desktop default hidden */
    height: 60px;
    background: #1a1a1d;
    border-top: 1px solid #444;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
}

.nav-btn {
    background: none;
    border: none;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em;
    cursor: pointer;
    padding: 5px;
    width: 100%;
}

.nav-btn.active {
    color: var(--accent-color);
}

.nav-btn .icon {
    font-size: 1.5em;
    margin-bottom: 2px;
}

@media screen and (max-width: 768px) {
    /* Layout Reset */
    .game-body {
        height: 100vh; /* Allow body to scroll if needed, but we prefer fixed */
        overflow: hidden;
    }

    .game-grid {
        display: block; /* Disable grid */
        height: calc(100vh - 50px - 60px); /* Header - Nav */
        overflow: hidden;
    }

    .panel {
        width: 100%;
        max-width: 100%;
        height: 100%;
        display: none; /* Hide all initially */
        border-right: none; /* Remove desktop borders */
        box-sizing: border-box;
    }
    .left-panel {
        overflow-y: auto;
    }
    .left-panel .panel-content {
        overflow: visible;
        height: auto;
    }
    .left-panel-content {
        display: block;
        overflow: visible;
        height: auto;
    }
    .left-panel-scroll {
        overflow: visible;
        height: auto;
        max-height: none;
    }
    
    /* Default visible panel on mobile load (Story) */
    #panel-chat {
        display: flex;
        width: 100%;
        flex: 1 1 auto;
    }

    .mobile-nav {
        display: flex;
    }

    /* Adjust Header */
    .game-header {
        padding: 0 10px;
    }
    .header-left h1 {
        font-size: 1em;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .header-right .btn {
        padding: 0 12px;
        font-size: 0.85rem;
        height: 32px;
        flex-shrink: 0;
    }

    /* Adjust Chat Area */
    .chat-log {
        font-size: 1em; /* Ensure readable text */
        padding: 10px;
    }
    
    .message {
        max-width: 95%; /* Wider messages on mobile */
        font-size: 0.95em;
    }

    /* Adjust Input Area */
    .action-bar {
        padding: 10px;
    }
    .input-area input {
        font-size: 16px; /* Prevent iOS zoom on focus */
    }
    .send-btn {
        width: 50px; /* Larger touch target */
    }

    /* Adjust Suggestions */
    .suggestions-container button {
        padding: 8px 12px; /* Larger touch target */
        margin-bottom: 5px;
    }

    /* Adjust Modals */
    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 15px;
    }

    /* Adjust Character Sheet */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cols for stats on mobile */
    }
    .equipment-slots {
        gap: 5px;
    }
    .left-panel-top,
    .left-panel-scroll {
        flex: none;
        overflow: visible;
        min-height: auto;
    }

    .lobby-grid {
        grid-template-columns: 1fr;
    }
    .room-list-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .room-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .lobby-join {
        flex-direction: column;
    }
}
/* --- Mobile Responsive Styles --- */
.mobile-nav {
    display: none; /* Desktop default hidden */
    height: 54px;
    background: rgba(18, 20, 25, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    /* backdrop-filter: blur(18px); removed for performance */
}

.nav-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
    font-size: 0.74rem;
    cursor: pointer;
    flex: 1;
    padding: 4px 0 2px;
}
.nav-btn.active {
    color: var(--accent-color);
    font-weight: 600;
}
.nav-btn.active::before {
    content: '';
    position: absolute;
    inset: 2px 8px;
    border-radius: 14px;
    background: rgba(197, 169, 106, 0.12);
    border: 1px solid rgba(197, 169, 106, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    z-index: -1;
}
.nav-btn .icon {
    font-size: 1.15rem;
    margin-bottom: 1px;
}
.nav-btn.active .icon {
    color: #f2ead3;
}

@media (max-width: 1024px) {
    .game-grid {
        display: block; /* Disable Grid */
        padding-bottom: 60px; /* Space for nav */
    }

    .panel {
        display: none; /* Hide all panels by default */
        height: 100%;
    }

    /* Show only active panel */
    #panel-chat { display: flex; } /* Default active */

    .mobile-nav {
        display: flex;
    }

    /* Adjust Chat Log for Mobile */
    .chat-log {
        padding: 15px;
    }

    /* Adjust Character Sheet */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cols for stats on mobile */
    }
    .equipment-slots {
        gap: 5px;
    }
}
.btn-secondary:hover { background: var(--theme-btn-secondary-hover-bg); }

/* Forms */
input, textarea, select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-color);
    padding: 12px 14px;
    border-radius: 14px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
input,
select {
    min-height: var(--input-height);
}

textarea {
    min-height: 120px;
}
select,
.modal-content select {
    color-scheme: dark;
}

select option,
.modal-content select option,
select optgroup,
.modal-content select optgroup {
    background: var(--theme-input-bg);
    color: var(--theme-text-main);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(197, 169, 106, 0.1);
}
label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 0.92rem;
}
.form-group { margin-bottom: 18px; }

.form-grid {
    display: grid;
    gap: 16px;
}

.helper-text {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ai-gen-card,
.extraction-preview-card {
    position: relative;
    overflow: hidden;
}

.ai-gen-card::before,
.extraction-preview-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197, 169, 106, 0.5), transparent);
    pointer-events: none;
}

.two-step-toolbar-card {
    gap: 10px;
}

.two-step-prompt-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.two-step-action-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.two-step-action-block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-start;
    min-height: 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.018);
    box-shadow: none;
}

.two-step-action-block::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, rgba(197, 169, 106, 0.85), rgba(197, 169, 106, 0.12));
}

.two-step-action-title {
    color: var(--highlight);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.two-step-action-copy {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: none;
    margin-bottom: 4px;
}

.two-step-prompt-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.two-step-status {
    margin-top: 2px;
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    background:
        linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.06)),
        rgba(0, 0, 0, 0.12);
    color: var(--text-color);
    font-size: 0.86rem;
    line-height: 1.6;
}

.two-step-status.is-error {
    border-color: rgba(255, 107, 107, 0.24);
    background: rgba(255, 107, 107, 0.08);
    color: #ffd2d2;
}

.draft-facts-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.draft-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: var(--accent-color);
    font-size: 0.78rem;
}

.draft-facts-content {
    display: block;
}

.draft-facts-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.draft-facts-group {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(11, 12, 16, 0.72);
    border-radius: 14px;
    overflow: hidden;
}

.draft-facts-group-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
}

.draft-facts-group-summary-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.draft-facts-group-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.draft-facts-group-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(197, 169, 106, 0.18);
    background: rgba(197, 169, 106, 0.08);
    color: var(--accent-color);
    font-size: 0.74rem;
    white-space: nowrap;
}

.draft-facts-group-summary::-webkit-details-marker {
    display: none;
}

.draft-facts-group-title-wrap h4 {
    margin: 0;
    color: var(--highlight);
    font-size: 0.96rem;
}

.draft-facts-group-title-wrap p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.draft-facts-group-toggle {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
}

.draft-facts-group-toggle::before,
.draft-facts-group-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    background: var(--highlight);
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.draft-facts-group-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.draft-facts-group[open] .draft-facts-group-toggle::after {
    opacity: 0;
}

.draft-facts-group-body {
    padding: 0 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.draft-facts-group-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px 12px;
    padding-top: 12px;
    align-items: start;
}

.draft-facts-section {
    grid-column: span 4;
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.draft-facts-section-wide {
    grid-column: span 6;
}

.draft-facts-section-compact {
    grid-column: span 3;
}

.draft-facts-section-entity {
    grid-column: span 4;
}

.draft-facts-section-tall {
    grid-column: span 3;
}

.draft-facts-section h4 {
    margin: 0 0 8px;
    color: var(--highlight);
    font-size: 0.86rem;
}

.draft-facts-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.draft-facts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.draft-facts-textarea,
.draft-entity-name,
.draft-entity-detail {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-color);
    box-shadow: none;
}

.draft-facts-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.6;
}

.draft-facts-textarea-large {
    min-height: 64px;
}

.draft-fact-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.draft-fact-item strong {
    color: var(--text-color);
    font-size: 0.88rem;
}

.draft-facts-empty {
    color: var(--text-dim);
    font-size: 0.82rem;
}

.draft-entity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.draft-entity-row {
    display: grid;
    grid-template-columns: minmax(84px, 0.8fr) minmax(0, 1.5fr) auto;
    gap: 8px;
    align-items: start;
}

.draft-entity-name {
    min-height: 40px;
}

.draft-entity-detail {
    min-height: 64px;
    resize: vertical;
    line-height: 1.55;
}

.draft-facts-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.draft-workbench-shell {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.draft-workbench-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
}

.draft-workbench-summary::-webkit-details-marker {
    display: none;
}

.draft-workbench-summary-side {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-color);
    font-size: 0.84rem;
    white-space: nowrap;
}

.draft-workbench-summary-side::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(197, 169, 106, 0.24);
    background: rgba(197, 169, 106, 0.08);
    font-size: 0.95rem;
    line-height: 1;
}

.draft-workbench-shell[open] .draft-workbench-summary-side::after {
    content: "-";
}

.draft-workbench-body {
    padding: 0 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.advanced-worldinfo-panel {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.advanced-worldinfo-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
}

.advanced-worldinfo-summary::-webkit-details-marker {
    display: none;
}

.advanced-worldinfo-summary span {
    color: var(--text-color);
    font-size: 0.88rem;
}

.advanced-worldinfo-body {
    padding: 0 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.advanced-worldinfo-toolbar {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
    margin-bottom: 12px;
}

@media (max-width: 720px) {
    .two-step-action-panel {
        grid-template-columns: 1fr;
    }

    .draft-facts-group-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .draft-facts-group-summary-side,
    .draft-facts-group-badges {
        width: 100%;
        justify-content: space-between;
    }

    .draft-facts-group-summary,
    .draft-facts-group-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .draft-facts-group-grid {
        grid-template-columns: 1fr;
    }

    .draft-facts-section,
    .draft-facts-section-wide,
    .draft-facts-section-compact,
    .draft-facts-section-entity,
    .draft-facts-section-tall {
        grid-column: 1 / -1;
    }

    .draft-entity-row {
        grid-template-columns: 1fr;
    }

    .advanced-worldinfo-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .draft-workbench-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .draft-workbench-summary-side {
        width: 100%;
        justify-content: space-between;
    }
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(22, 24, 29, 0.96), rgba(17, 19, 23, 0.98));
}

.section-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.section-label h3,
.section-label h4 {
    margin: 0;
}

.rules-template-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}

.rules-template-toolbar .btn {
    flex: 0 0 auto;
}

.world-rule-detail-panel {
    margin-top: 12px;
    padding: 12px 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
}

.world-rule-detail-panel > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
}

.world-rule-detail-panel[open] > summary {
    margin-bottom: 10px;
}

.world-rule-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.world-rule-detail-grid .form-group {
    margin: 0;
}

.world-rule-detail-grid .form-group:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.world-custom-rule-group {
    grid-column: 1 / -1;
}

.world-custom-rule-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.world-custom-rule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.world-custom-rule-entry {
    border: 1px solid var(--panel-border);
    background: var(--panel-bg-soft);
    border-radius: 14px;
    overflow: hidden;
}

.world-custom-rule-entry.is-dragging {
    opacity: 0.68;
}

.world-custom-rule-entry.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--panel-border-strong);
}

.world-custom-rule-entry.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--panel-border-strong);
}

.world-custom-rule-details {
    border: none;
}

.world-custom-rule-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.world-custom-rule-summary::-webkit-details-marker {
    display: none;
}

.world-custom-rule-summary-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.world-custom-rule-summary-text {
    color: var(--text-primary);
}

.world-custom-rule-summary-hint {
    font-size: 0.82rem;
}

.world-custom-rule-body {
    padding: 0 12px 12px;
    border-top: 1px solid var(--panel-border);
}

.world-custom-rule-entry-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.world-custom-rule-entry-head input {
    flex: 1;
    min-width: 0;
}

.world-custom-rule-drag-handle {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
    padding: 4px 6px;
    align-self: flex-start;
}

.world-custom-rule-drag-handle:active {
    cursor: grabbing;
}

.roadmap-carousel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.roadmap-carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.roadmap-counter {
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-align: center;
}

.roadmap-nav-btn {
    min-width: 92px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
}

.roadmap-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.roadmap-viewport {
    overflow: hidden;
    width: 100%;
    border-radius: 16px;
}

.roadmap-track {
    display: flex;
    width: 100%;
    transition: transform 0.28s ease;
    will-change: transform;
}

.roadmap-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.roadmap-card {
    min-height: 252px;
    margin-bottom: 0;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(24, 26, 31, 0.96), rgba(17, 19, 23, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.roadmap-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.roadmap-stage-badge {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.roadmap-copy {
    margin-top: 14px;
    color: var(--text-color);
    line-height: 1.72;
    word-break: break-word;
    font-size: 0.9rem;
}

.roadmap-meta {
    margin-top: 12px;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.58;
}

.roadmap-meta-soft {
    color: var(--text-muted);
}

.roadmap-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.roadmap-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.roadmap-dot.active {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
    transform: scale(1.06);
}

.story-tracker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.story-tracker-card {
    margin-bottom: 0 !important;
}

.story-tracker-value {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.story-tracker-copy {
    line-height: 1.72;
    color: var(--text-soft);
    word-break: break-word;
}

.story-tracker-status {
    line-height: 1.55;
    color: var(--accent-color);
    word-break: break-word;
}

.story-journal-entry {
    border: 1px solid var(--theme-btn-secondary-border);
    border-radius: 16px;
    background: var(--theme-btn-secondary-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.story-journal-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.story-journal-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 12px;
    background: transparent;
    border-bottom: 1px solid var(--theme-btn-secondary-border);
}

.story-journal-kicker {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--theme-btn-secondary-bg);
    border: 1px solid var(--theme-btn-secondary-border);
    color: var(--theme-btn-secondary-text);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.story-journal-scene {
    color: var(--text-color);
    font-size: 0.98rem;
    line-height: 1.4;
    font-weight: 700;
}

.story-journal-badge {
    align-self: flex-start;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--theme-btn-active-bg);
    border: 1px solid var(--theme-btn-active-border);
    color: var(--theme-btn-active-text);
    font-size: 0.74rem;
    line-height: 1.4;
}

.story-journal-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-radius: 14px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.story-journal-summary:hover {
    background: var(--theme-btn-secondary-hover-bg);
}

.story-journal-entry[open] > .story-journal-summary {
    background: var(--theme-btn-active-bg);
}

.story-journal-summary::-webkit-details-marker {
    display: none;
}

.story-journal-label {
    color: var(--text-color);
    font-size: 0.86rem;
    font-weight: 600;
}

.story-journal-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-color);
    text-align: right;
    font-weight: 600;
    line-height: 1.45;
}

.story-journal-hint {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.story-journal-body {
    padding: 0 14px 14px;
}

.story-journal-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Tabs */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    scroll-margin-top: 16px;
}
.tab {
    padding: 10px 18px;
    cursor: pointer;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
}
.tab.active {
    color: var(--accent-color);
    border-color: rgba(197, 169, 106, 0.28);
    background: rgba(197, 169, 106, 0.09);
}

/* Tab Content Visibility */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 弹窗背景 */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); /* 更深的遮罩 */
    /* backdrop-filter: blur(5px); removed for performance */
}

/* 弹窗内容 */
.modal-content {
    background:
        linear-gradient(180deg, rgba(31, 33, 39, 0.98), rgba(22, 24, 29, 0.98));
    margin: 5% auto; 
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    width: 90%; 
    max-width: 600px;
    color: var(--text-color);
    box-shadow: var(--shadow-lg);
}

.notice-modal-content {
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
}

/* 关闭按钮 */
.close {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover,
.close:focus {
    color: #fff;
    text-decoration: none;
}

/* 弹窗内的标题 */
.modal-content h2, .modal-content h3 {
    color: var(--highlight);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
    margin-top: 0;
}

/* 弹窗内的次级标题 */
.modal-content h4 {
    color: #a0a0a0;
    margin-bottom: 5px;
}

/* 弹窗内的输入框 */
.modal-content input, .modal-content textarea, .modal-content select {
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    color: var(--theme-text-main);
    padding: 12px 14px;
    border-radius: 14px;
    width: 100%;
    box-sizing: border-box;
}

.modal-content input,
.modal-content select {
    min-height: var(--input-height);
}

.modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus {
    border-color: var(--accent-color);
    outline: none;
}

/* 弹窗内的辅助文字 */
.modal-content p {
    color: #ccc;
    line-height: 1.6;
}

.notice-card {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.notice-details {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #17171a;
}

.notice-details summary {
    cursor: pointer;
    color: var(--highlight);
    font-weight: bold;
}

.notice-list {
    margin: 8px 0 0 18px;
    color: #ccc;
}

.notice-section-title {
    color: #c0a062;
    margin-top: 16px;
}

/* 角色选择列表项 */
.char-select-item {
    padding: 15px;
    border: 1px solid var(--panel-border);
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 4px;
    background: #1a1a1d;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.char-select-item:hover {
    background: #333;
}
.char-select-item.selected {
    border-color: var(--highlight);
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
.char-select-copy {
    min-width: 0;
}
.char-select-name {
    display: block;
    color: #ffd700;
    font-size: 1.02rem;
    line-height: 1.35;
}
.char-select-meta {
    margin-top: 4px;
    color: #888;
    font-size: 0.82rem;
    line-height: 1.45;
}
.char-select-arrow {
    flex: 0 0 auto;
    color: #555;
    font-size: 1.2rem;
}
.world-info-entry {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    box-shadow: var(--theme-card-shadow);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.world-info-group {
    margin-bottom: 18px;
}
.world-info-group-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.world-info-group-head h3 {
    margin: 0;
    font-size: 0.98rem;
    color: var(--accent-color);
}
.world-info-group-copy {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}
.world-info-empty {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed var(--theme-card-border);
    color: var(--text-muted);
    font-size: 0.82rem;
}
.world-info-entry-head {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}
.world-info-entry .wi-keys,
.world-info-entry .wi-content {
    width: 100%;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    color: var(--text-color);
    padding: 8px 10px;
    border-radius: 8px;
}
.world-info-entry .wi-content {
    min-height: 90px;
    resize: vertical;
}
.world-info-delete-btn {
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-text);
    border: 1px solid var(--theme-btn-secondary-border);
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
}
.world-info-delete-btn:hover {
    background: var(--theme-btn-secondary-hover-bg);
}

/* --- Play Page Specific (Grid) --- */
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Grid Layout */
/* .game-body moved up */

.game-header {
    min-height: 72px;
    background: rgba(14, 15, 19, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    gap: 18px;
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 6;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.game-header .library-brand {
    font-size: 1.3rem;
    flex: 0 0 auto;
}

.play-header-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.play-header-label {
    color: var(--text-muted);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header-left h1 {
    font-size: 1.35rem;
    color: var(--accent-color);
    margin: 0;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .header-right {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding-bottom: 2px; /* For focus outline */
    }
    .header-right::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }
}

.icon-btn {
    background: none;
    border: 1px solid var(--panel-border);
    color: var(--text-color);
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
    margin-left: 10px;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.icon-btn:hover { background: #333; border-color: var(--accent-color); }

.game-grid {
    flex: 1; /* 自动占据剩余空间 */
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 1px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden; /* 关键：防止网格撑破父容器 */
    height: auto; /* 移除 calc，依赖 flex */
}

.panel {
    background: var(--panel-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* backdrop-filter: blur(20px); removed for performance */
}

.room-controls {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}
.room-hud-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    width: 100%;
}
.room-controls .room-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}
.room-hud-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}
.room-controls .room-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.room-controls .room-actions .btn {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 0.78rem;
    border-radius: 999px;
    box-shadow: none;
}
#room-id-label {
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 600;
}
.room-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 0.76rem;
}
.turn-badge {
    padding: 4px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    font-size: 0.76em;
    background: rgba(255, 255, 255, 0.04);
}
.turn-timer-text {
    color: var(--text-muted);
    font-size: 0.76rem;
}
.room-controls.status-waiting .room-status-chip {
    color: #d7d9df;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}
.room-controls.status-playing .room-status-chip {
    color: #d7f1de;
    border-color: rgba(91, 176, 115, 0.26);
    background: rgba(91, 176, 115, 0.12);
}
.room-controls.status-ai .room-status-chip {
    color: #f2ead3;
    border-color: rgba(197, 169, 106, 0.3);
    background: rgba(197, 169, 106, 0.14);
}
.room-controls.status-waiting .room-hud-bar {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.room-controls.status-playing .room-hud-bar {
    box-shadow: inset 0 1px 0 rgba(91, 176, 115, 0.12);
}
.room-controls.status-ai .room-hud-bar {
    box-shadow: inset 0 1px 0 rgba(197, 169, 106, 0.12);
}
.room-players {
    position: relative;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.room-players-toggle {
    min-width: 220px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    background: var(--theme-btn-secondary-bg);
    border: 1px solid var(--theme-btn-secondary-border);
    color: var(--theme-btn-secondary-text);
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.room-players-toggle:hover {
    background: var(--theme-btn-secondary-hover-bg);
    border-color: var(--theme-btn-active-border);
}
.room-players-toggle:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(197, 169, 106, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.room-players-title {
    font-size: 0.84em;
    color: var(--theme-btn-secondary-text);
    font-weight: 600;
}
.room-players-summary {
    font-size: 0.76em;
    color: var(--text-muted);
}
.room-players-arrow {
    font-size: 0.8em;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}
.room-players.expanded .room-players-toggle {
    background: var(--theme-btn-active-bg);
    border-color: var(--theme-btn-active-border);
    color: var(--theme-btn-active-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 20px rgba(0, 0, 0, 0.12);
}
.room-players.expanded .room-players-title,
.room-players.expanded .room-players-summary,
.room-players.expanded .room-players-arrow {
    color: var(--theme-btn-active-text);
}
.room-players.expanded .room-players-arrow {
    transform: rotate(180deg);
}
.room-players-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    margin-top: 0;
}
.room-players.expanded .room-players-body {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: min(360px, 88vw);
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: rgba(18, 20, 25, 0.98);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
    z-index: 10;
}
.room-players-body #room-player-list {
    margin-top: 0;
}
.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 6px;
    font-size: 0.85em;
}
.player-item .player-meta {
    color: var(--text-muted);
    font-size: 0.8em;
}

.panel-header {
    min-height: 52px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    min-height: 0;
}

.left-panel-content,
.right-panel-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.left-panel-top,
.right-panel-top {
    flex: 0 0 auto;
}

.left-panel-scroll,
.right-panel-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.right-panel-scroll {
    padding-top: 10px;
}

/* Left Panel: Character */
.char-profile {
    text-align: center;
    margin-bottom: 20px;
}
.avatar-card {
    width: 140px;
    aspect-ratio: 9 / 16;
    margin: 0 auto 10px;
    border: 2px solid var(--accent-color);
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    position: relative;
}
.avatar-card-large {
    width: 220px;
}
.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}
.avatar-cropper {
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.avatar-cropper.dragging {
    cursor: grabbing;
}
.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #555;
}
.char-info h2 { margin: 0; font-size: 1.2em; color: var(--highlight); }
.char-subtitle { margin: 5px 0 0; font-size: 0.9em; color: var(--text-muted); font-style: italic; }

.avatar-upload {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.avatar-zoom {
    display: flex;
    gap: 8px;
    align-items: center;
}
.avatar-zoom input[type="range"] {
    width: 160px;
}

.char-view-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.char-view-info {
    flex: 1;
    min-width: 220px;
}

.status-bars { margin-bottom: 20px; }
.bar-container { margin-bottom: 8px; }
.bar-label { font-size: 0.8em; display: flex; justify-content: space-between; margin-bottom: 2px; }
.bar-track { height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; transition: width 0.3s; }

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}
.stat-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 10px;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
}
.stat-box:hover { border-color: var(--accent-color); }
.stat-label { font-size: 0.7em; color: var(--text-muted); text-transform: uppercase; }
.stat-val { font-size: 1.1em; font-weight: bold; color: var(--text-color); }

.equipment-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.slot {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    cursor: pointer;
    text-align: center;
    padding: 6px;
    line-height: 1.1;
}
.slot.equipped {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: #202026;
}

/* Center Panel: Stage */
.center-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* 关键修复：防止被子元素撑大 */
    overflow: hidden; /* 关键修复：限制溢出 */
}

.chat-log {
    flex: 1; /* 简写，确保基础高度为0 */
    padding: 20px 22px;
    overflow-y: auto;
    background:
        radial-gradient(circle at top, rgba(197, 169, 106, 0.06), transparent 28%),
        linear-gradient(180deg, rgba(18, 19, 24, 0.92), rgba(15, 16, 19, 0.98));
}

.message {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    max-width: 83%;
    line-height: 1.68;
    font-size: 0.98rem;
    position: relative;
    white-space: pre-wrap; /* Preserve whitespace and newlines */
    word-wrap: break-word; /* Prevent long words from overflowing */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.user-msg {
    background: rgba(62, 82, 112, 0.28);
    border-left: 3px solid rgba(135, 180, 240, 0.88);
    margin-left: auto;
    color: #ddeafb;
}
.ai-msg {
    background: rgba(255, 255, 255, 0.035);
    border-left: 3px solid var(--accent-color);
    color: var(--text-color);
}
.story-choice-label {
    display: none;
}
.system-msg {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9em;
    font-style: italic;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
}
.dice-result { color: #ff6b6b; font-weight: bold; }

.action-bar {
    padding: 18px;
    background: rgba(16, 18, 22, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.suggestions-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.story-choice {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 56px;
    padding: 0 36px 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(22, 24, 30, 0.82);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.story-choice:hover {
    transform: translateY(-1px);
    border-color: rgba(197, 169, 106, 0.28);
    background: rgba(26, 28, 35, 0.96);
}
.story-choice::after {
    content: '›';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.28);
    font-size: 1rem;
}
.story-choice-text {
    width: 100%;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.story-choice--probe {
    border-color: rgba(111, 132, 176, 0.22);
}
.story-choice--act {
    border-color: rgba(182, 145, 78, 0.24);
}
.story-choice--observe {
    border-color: rgba(92, 134, 118, 0.22);
}

.input-area { display: flex; gap: 10px; align-items: center; }
.input-area input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-color);
    padding: 13px 16px;
    border-radius: 999px;
    font-family: inherit;
}
.input-area input:focus { outline: none; border-color: var(--accent-color); }
.play-book-layout .input-area {
    flex-wrap: wrap;
}
.play-book-layout #formal-settlement-btn {
    white-space: nowrap;
}
.send-btn {
    width: 46px;
    height: 46px;
    background: var(--theme-btn-bg);
    border: 1px solid var(--theme-btn-border);
    border-radius: 50%;
    color: var(--theme-btn-text);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--theme-btn-shadow);
}

.send-btn:hover {
    background: var(--theme-btn-hover-bg);
}

/* Right Panel: Utility */
.play-book-layout .right-panel .panel-header {
    justify-content: stretch;
    gap: 8px;
    padding: 12px;
}

.right-panel .tab {
    flex: 1;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--theme-btn-secondary-border);
    border-radius: 999px;
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
    user-select: none;
}
.right-panel .tab:hover {
    background: var(--theme-btn-secondary-hover-bg);
    border-color: var(--theme-btn-active-border);
}
.right-panel .tab.active {
    color: var(--theme-btn-active-text);
    border-color: var(--theme-btn-active-border);
    background: var(--theme-btn-active-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 18px rgba(0, 0, 0, 0.1);
}

.skill-card, .item-card {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    padding: 14px;
    margin-bottom: 8px;
    border-radius: 14px;
    cursor: pointer;
    color: var(--text-color);
    box-shadow: var(--theme-card-shadow);
    transition: all 0.2s;
}
.skill-card:hover, .item-card:hover { border-color: var(--panel-border-strong); background: var(--theme-card-hover-bg); }
.skill-card .skill-name,
.item-card .skill-name {
    font-weight: bold;
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
}
.skill-card .skill-desc,
.item-card .skill-desc {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Global Common */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--control-height);
    padding: 0 20px;
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    border: 1px solid var(--theme-btn-border);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}
.btn-secondary {
    background: var(--theme-btn-secondary-bg);
    color: var(--theme-btn-secondary-text);
    border: 1px solid var(--theme-btn-secondary-border);
}

@media screen and (max-width: 768px) {
    .left-panel {
        overflow-y: auto !important;
    }
    .left-panel .panel-content {
        overflow: visible !important;
        height: auto !important;
    }
    .left-panel-content {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
    }
    .left-panel-top,
    .left-panel-scroll {
        flex: none !important;
        overflow: visible !important;
        min-height: auto !important;
    }
    .left-panel-scroll {
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}

.tab-green {
    background: #1f3b1f;
    color: #7cf27c;
    border: 1px solid #2f5f2f;
    border-radius: 6px;
}
.tab-green.active {
    color: #d6ffd6;
    border-bottom-color: #7cf27c;
}

.announcement-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(197, 169, 106, 0.1);
    border: 1px solid rgba(197, 169, 106, 0.18);
    color: var(--text-color);
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 16px;
    font-size: 0.95em;
}
.announcement-banner-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.announcement-banner-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
.announcement-banner-link {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(197, 169, 106, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: var(--highlight);
    font: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.announcement-banner-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(197, 169, 106, 0.34);
    transform: translateY(-1px);
}

.announcement-banner-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #d9c89c;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.announcement-banner-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.announcement-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
}
.announcement-modal-content {
    max-width: 760px;
}

.announcement-modal-copy {
    margin: 0 0 16px;
    color: var(--text-muted);
}

.announcement-modal-list {
    display: grid;
    gap: 12px;
}

.announcement-empty {
    margin: 0;
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    text-align: center;
}

.announcement-title {
    font-weight: bold;
    margin-bottom: 6px;
}
.announcement-content {
    color: #bbb;
    line-height: 1.6;
}
.announcement-meta {
    margin-top: 6px;
    font-size: 0.8em;
    color: #777;
}

.billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.billing-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
}
.billing-label {
    color: #888;
    font-size: 0.85em;
}
.billing-value {
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 6px;
}
.billing-sub {
    color: #777;
    font-size: 0.8em;
    margin-top: 6px;
}
.billing-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.billing-card-head h3 {
    margin: 0;
    line-height: 1;
}
.billing-card-head input[type="month"] {
    width: 132px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.84rem;
    margin-top: -1px;
}
.billing-chart {
    display: grid;
    grid-template-columns: repeat(var(--billing-day-count, 30), minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    height: 180px;
    padding: 16px 0 22px 44px;
    position: relative;
    background:
        linear-gradient(to top, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 100% / 100% 33.33% no-repeat,
        linear-gradient(to top, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 66.66% / 100% 33.33% no-repeat,
        linear-gradient(to top, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 33.33% / 100% 33.33% no-repeat;
}
.billing-y-axis {
    position: absolute;
    inset: 16px auto 22px 0;
    width: 40px;
    pointer-events: none;
    color: rgba(143, 150, 167, 0.52);
    font-size: 0.68rem;
    letter-spacing: 0.01em;
}
.billing-y-tick {
    position: absolute;
    left: 0;
    transform: translateY(50%);
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.billing-y-top {
    top: 0;
    transform: translateY(-50%);
}
.billing-y-middle {
    top: 50%;
}
.billing-y-bottom {
    bottom: 0;
    transform: translateY(50%);
}
.billing-y-tick.is-active {
    color: rgba(242, 234, 211, 0.92);
    opacity: 1;
}
.billing-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
    padding-bottom: 16px;
}
.billing-bar-track {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.billing-bar-fill {
    width: 100%;
    max-width: 12px;
    background: #f0b84a;
    border-radius: 4px 4px 0 0;
    height: 0;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.billing-bar.has-data .billing-bar-fill {
    opacity: 1;
}
.billing-bar.has-data:hover .billing-bar-fill {
    transform: translateY(-1px);
}
.billing-bar-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    font-size: 0.68rem;
    color: #777;
    line-height: 1;
    opacity: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}
.billing-bar-label.is-visible {
    opacity: 1;
}
.billing-hover-line {
    position: absolute;
    left: 44px;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(240, 184, 74, 0.28), rgba(240, 184, 74, 0.08));
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5px);
    transition: opacity 0.15s ease;
}
.billing-hover-line.is-visible {
    opacity: 1;
}
.billing-chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 116px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(35, 38, 45, 0.96);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.billing-chart-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.billing-tooltip-date {
    color: #f2ead3;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.billing-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--text-soft);
    font-size: 0.82rem;
}
.billing-tooltip-row strong {
    color: #f2ead3;
    font-weight: 600;
}
.donation-modal-content {
    max-width: 380px;
    text-align: center;
}
.donation-amount-text {
    color: #8f96a7;
    font-size: 0.88rem;
    margin: 4px 0 10px;
}
.support-actions,
.support-method-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.donation-payment-card {
    margin: 14px 0 10px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.donation-status {
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}
.donation-qr-image {
    width: min(230px, 100%);
    max-height: 300px;
    object-fit: contain;
    border-radius: 14px;
}
.donation-qr-image.is-missing {
    display: none;
}
.donation-help-text {
    margin: 0;
    color: #8f96a7;
    font-size: 0.88rem;
    line-height: 1.7;
}
.support-method-tabs .btn.active {
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    border-color: var(--theme-btn-border);
}
.support-method-tabs .btn {
    min-width: 108px;
    height: 38px;
    padding: 0 14px;
    font-size: 0.86rem;
}
.billing-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #333;
    color: #bbb;
    font-size: 0.9em;
}
.billing-row:last-child {
    border-bottom: none;
}
.billing-model {
    color: #f0b84a;
}
.billing-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.billing-highlight {
    margin-top: 10px;
    padding: 14px;
    background: rgba(197, 169, 106, 0.08);
    border: 1px solid rgba(197, 169, 106, 0.16);
    border-radius: 16px;
    color: var(--highlight);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 240px;
    padding: 36px 24px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
}

.empty-state p {
    margin: 0;
    max-width: 18ch;
    line-height: 1.7;
}

.empty-state .btn {
    min-width: 132px;
}

.feature-list {
    display: grid;
    gap: 10px;
}

.feature-item {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.feature-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--highlight);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.auth-layout {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 24px;
}

.auth-panel {
    padding: 36px;
    border-radius: 28px;
    border: 1px solid var(--panel-border);
    background:
        linear-gradient(135deg, rgba(197, 169, 106, 0.12), transparent 44%),
        rgba(20, 22, 27, 0.94);
    box-shadow: var(--shadow-lg);
}

.auth-story {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.auth-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    background: var(--theme-btn-secondary-bg);
    border-radius: 999px;
    border: 1px solid var(--theme-btn-secondary-border);
    box-sizing: border-box;
}

.auth-switch button,
.auth-switch-btn {
    flex: 1 1 0;
    min-height: 40px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--theme-btn-secondary-text);
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.auth-switch button:hover,
.auth-switch-btn:hover {
    background: var(--theme-btn-secondary-hover-bg);
}

.auth-switch button.active,
.auth-switch-btn.active {
    color: var(--theme-btn-active-text);
    background: var(--theme-btn-active-bg);
    border-color: var(--theme-btn-active-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.auth-heading {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.auth-copy {
    margin: 0;
    color: var(--text-soft);
}

.auth-intro {
    max-width: 28rem;
    font-size: 0.94rem;
    line-height: 1.65;
}

.status-message {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(201, 111, 111, 0.2);
    background: rgba(201, 111, 111, 0.12);
    color: #f2c7c7;
    font-size: 0.92rem;
}

.terms-row {
    justify-content: flex-start;
    margin-top: 0;
}

.terms-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--theme-btn-secondary-border);
    border-radius: 16px;
    background: var(--theme-btn-secondary-bg);
}

.terms-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.terms-label span {
    flex: 1;
    line-height: 1.6;
}

.terms-link {
    color: var(--accent-color);
}

.toolbar-card {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.toolbar-card > * {
    flex: 1 1 180px;
}

.toolbar-card.two-step-toolbar-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.toolbar-card.two-step-toolbar-card > * {
    flex: initial;
}

.toolbar-card .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.smart-prompt-input {
    min-height: 116px;
    padding: 14px 16px;
    border-radius: 14px;
    border-color: var(--theme-input-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
        var(--theme-input-bg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 12px 24px rgba(0, 0, 0, 0.12);
    line-height: 1.6;
    resize: none;
    overflow: hidden;
}

.smart-prompt-input::placeholder {
    color: rgba(201, 193, 176, 0.42);
}

.two-step-action-block .btn,
.two-step-action-block .btn-secondary {
    width: 100%;
    justify-content: center;
    min-height: 44px;
}

.world-editor,
.character-editor {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-dark .profile-card,
.profile-dark .social-panel,
.profile-dark .friend-request-item,
.profile-dark .admin-toggle {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.profile-dark .social-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-dark .social-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.profile-dark .friend-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-dark .friend-item:hover,
.profile-dark .friend-item.active {
    background: rgba(255, 255, 255, 0.04);
}

.profile-dark .friend-status {
    color: #8f96a7;
}

.profile-dark .chat-header {
    align-items: center;
    padding: 2px 2px 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-color);
}

.profile-dark .chat-messages {
    padding-right: 4px;
}

.profile-dark .chat-input-area {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-dark .chat-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-color);
}

.profile-dark .chat-input::placeholder {
    color: #8f96a7;
}

.profile-dark .chat-close-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #f2ead3;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.profile-dark .chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(197, 169, 106, 0.24);
}

.profile-dark .message.received {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
}

.profile-dark .message.sent {
    background: rgba(57, 132, 255, 0.9);
    color: #fff;
}

.profile-dark .admin-history-head h4,
.profile-dark .admin-announcement-title {
    color: var(--text-color);
}

.profile-dark .admin-announcement-item {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.profile-dark .admin-announcement-meta {
    color: #8f96a7;
}

.profile-dark .admin-announcement-content {
    color: var(--text-soft);
}

.profile-dark .admin-announcement-head .btn {
    height: 34px;
    padding: 0 14px;
    font-size: 0.82rem;
}

.profile-dark .user-code {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
}

@media (max-width: 960px) {
    .page-header {
        gap: 16px;
    }

    .page-title-group {
        max-width: 100%;
    }

    .hero-card,
    .auth-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 20px 14px 36px;
    }

    .page-shell {
        gap: 18px;
    }

    .page-title {
        font-size: 1.8rem;
    }

    .hero-card,
    .auth-panel,
    .form-section {
        padding: 18px;
    }

    .auth-shell {
        padding: 18px 14px;
    }

    .toolbar-card {
        padding: 14px;
    }

    .page-actions,
    .tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .page-actions::-webkit-scrollbar,
    .tabs::-webkit-scrollbar {
        display: none;
    }

    .page-actions .btn,
    .tabs .tab {
        flex-shrink: 0;
    }

    .page-actions .btn {
        min-width: 0;
        height: 36px;
        padding: 0 14px;
        font-size: 0.84rem;
        white-space: nowrap;
    }

    .tabs .tab {
        padding: 8px 14px;
        font-size: 0.84rem;
        white-space: nowrap;
    }

    .bookshelf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    #adventure-setup-page .hero-card,
    #adventure-setup-page .form-section {
        padding: 18px;
        border-radius: 18px;
    }

    #adventure-setup-page .hero-text,
    #adventure-setup-page .muted {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .adventure-summary-grid,
    .adventure-task-grid,
    .adventure-opening-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .roadmap-carousel-head {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
    }

    .roadmap-counter {
        font-size: 0.8rem;
        order: 2;
        white-space: nowrap;
    }

    .roadmap-nav-btn {
        min-width: 0;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        height: 34px;
        font-size: 0.78rem;
    }

    .roadmap-dots {
        gap: 6px;
        margin-top: -2px;
        margin-bottom: 2px;
    }

    .roadmap-card {
        min-height: 0;
        padding: 15px;
        border-radius: 18px;
    }

    .roadmap-card-head {
        align-items: flex-start;
    }

    .roadmap-stage-badge {
        font-size: 0.64rem;
        padding: 3px 7px;
    }

    .roadmap-copy {
        font-size: 0.84rem;
        line-height: 1.64;
    }

    .roadmap-meta {
        font-size: 0.76rem;
        line-height: 1.5;
    }

    .adventure-opening-actions,
    .adventure-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .adventure-opening-actions .btn,
    .adventure-footer-actions .btn,
    .adventure-footer-actions a.btn {
        width: 100%;
        justify-content: center;
    }

    #adventure-setup-page .card {
        padding: 16px;
        border-radius: 16px;
    }

    #adventure-setup-generated-opening,
    #adventure-setup-existing-opening {
        max-height: 180px;
        overflow-y: auto;
        padding-right: 4px;
        font-size: 0.84rem;
        line-height: 1.7 !important;
    }

    #adventure-setup-opening {
        min-height: 196px;
        height: 196px !important;
        font-size: 16px;
        line-height: 1.65;
    }

    .archive-bookshelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .book-card {
        padding: 12px;
        gap: 8px;
        min-height: 0;
    }

    .book-title {
        font-size: 0.92rem;
    }

    .book-meta {
        font-size: 0.72rem;
    }

    .book-desc {
        font-size: 0.8rem;
        min-height: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .book-card .btn {
        height: 34px;
        padding: 0 10px;
        font-size: 0.82rem;
    }

    .suggestions-container {
        grid-template-columns: 1fr;
    }

    .billing-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .billing-chart {
        padding-left: 36px;
    }

    .billing-y-axis {
        width: 32px;
        font-size: 0.66rem;
    }

    .billing-hover-line {
        left: 36px;
    }

    .story-choice {
        min-height: 0;
        padding: 13px 14px;
    }

    .story-choice-text {
        font-size: 0.88rem;
    }

    .mobile-friendly-modal {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 18px - env(safe-area-inset-bottom, 0px));
        padding: 18px 14px 16px;
        border-radius: 18px;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .modal {
        padding: 8px 8px calc(72px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-content h2,
    .modal-content h3 {
        font-size: 1.65rem;
        line-height: 1.25;
    }

    .modal-footer-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .modal-footer-actions .btn,
    .modal-footer-actions a.btn {
        width: 100%;
        justify-content: center;
    }

    .modal-char-list,
    .force-char-list,
    .world-info-list,
    .char-view-logs,
    #sq-comments {
        max-height: min(38dvh, 320px) !important;
    }

    .char-select-item {
        padding: 14px 12px;
        border-radius: 12px;
        align-items: flex-start;
    }

    .char-select-name {
        font-size: 0.98rem;
    }

    .char-select-meta {
        font-size: 0.78rem;
    }

    .char-select-arrow {
        margin-top: 2px;
        font-size: 1rem;
    }

    .square-modal-summary {
        padding: 14px 12px !important;
        margin: 14px 0 !important;
        border-radius: 12px !important;
    }

    .square-modal-actions,
    .square-comment-row {
        display: flex;
        flex-direction: column;
        gap: 10px !important;
    }

    .square-modal-actions {
        padding: 4px 0;
    }

    .square-modal-actions .btn,
    .square-comment-row .btn,
    .square-comment-row input {
        width: 100%;
        box-sizing: border-box;
    }

    .square-modal-actions .btn {
        height: 48px;
        border-radius: 16px;
        justify-content: space-between;
        padding: 0 16px;
        font-size: 0.95rem;
        text-align: left;
    }

    .square-modal-actions .btn::after {
        content: '›';
        font-size: 1.25rem;
        color: rgba(255, 255, 255, 0.35);
    }

    .square-modal-actions #sq-like-btn {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .square-modal-actions #sq-like-btn.liked {
        background: var(--theme-btn-bg);
        border-color: var(--theme-btn-border);
        color: var(--theme-btn-text);
        box-shadow: var(--theme-btn-shadow);
    }

    .char-view-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .char-view-info {
        min-width: 0;
        width: 100%;
    }

    #view-char-bio {
        margin-bottom: 12px !important;
    }

    .avatar-card {
        width: 104px;
        height: auto;
        aspect-ratio: 9 / 16;
    }

    .avatar-image {
        object-fit: contain;
        background: #111;
    }

    .game-header {
        min-height: 54px;
        padding: 8px 8px 6px;
        gap: 6px;
        align-items: center;
        position: relative;
        z-index: 8;
    }

    .game-title {
        font-size: 1.08rem;
        flex: 0 0 auto;
    }

    .game-header .library-brand {
        font-size: 1rem;
    }

    .play-header-label {
        display: none;
    }

    .header-right {
        width: calc(100vw - 102px);
        justify-content: flex-start;
        align-items: center;
        overflow-x: auto;
        padding: 2px 2px 3px;
        gap: 5px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 999px;
    }

    .header-right::-webkit-scrollbar {
        display: none;
    }

    .header-right .btn {
        height: 30px;
        padding: 0 10px;
        font-size: 0.74rem;
        border-radius: 15px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.02);
        border-color: rgba(255, 255, 255, 0.04);
    }

    .header-right .btn.active,
    .header-right .btn[aria-current="page"] {
        background: rgba(197, 169, 106, 0.16);
        border-color: rgba(197, 169, 106, 0.28);
        color: #f2ead3;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }

    .game-grid {
        height: calc(100dvh - 54px);
        position: relative;
        display: block !important;
        width: 100%;
        padding-bottom: 0;
        background: transparent;
        gap: 0;
        overflow: hidden;
    }

    .panel {
        position: absolute;
        inset: 0 0 calc(54px + env(safe-area-inset-bottom, 0px)) 0;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0;
        min-height: 0;
        box-sizing: border-box;
        border-right: none;
        overflow-x: hidden;
    }

    .left-panel,
    .right-panel {
        display: none;
        flex-direction: column;
        background: rgba(14, 15, 19, 0.985);
        z-index: 3;
    }

    .center-panel {
        position: absolute;
        inset: 0 0 calc(54px + env(safe-area-inset-bottom, 0px)) 0;
        display: flex !important;
        background: rgba(12, 13, 17, 0.98);
        z-index: 1;
        min-height: 0;
    }

    #panel-stats,
    #panel-chat,
    #panel-utils,
    .panel-content,
    .left-panel-content,
    .right-panel-content,
    .left-panel-scroll,
    .right-panel-scroll {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .right-panel-scroll {
        padding-top: 6px;
    }

    .right-panel .panel-header {
        position: sticky;
        top: 0;
        z-index: 5;
        /* backdrop-filter: blur(16px); removed for performance */
    }

    .right-panel .tab {
        padding: 11px 6px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .story-tracker-list {
        gap: 0;
    }

    .story-tracker-card {
        padding: 14px;
        border-radius: 14px;
    }

    .story-journal-summary {
        padding: 11px 0;
        align-items: flex-start;
    }

    .story-journal-shell {
        border-radius: 0;
        padding: 0 2px;
    }

    .story-journal-head {
        padding: 8px 0 10px;
    }

    .story-journal-scene {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .story-journal-badge {
        font-size: 0.7rem;
        padding: 5px 8px;
    }

    .story-journal-title {
        font-size: 0.86rem;
    }

    .story-journal-hint {
        font-size: 0.68rem;
    }

    .story-journal-body {
        padding: 0 0 12px;
    }

    .story-tracker-value {
        font-size: 0.96rem;
    }

    .story-tracker-copy,
    .story-tracker-status {
        font-size: 0.82rem;
        line-height: 1.58;
    }

    .panel-content {
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: auto;
        min-height: 0;
    }

    .right-panel-content,
    .left-panel-content {
        padding-bottom: 18px;
        overflow-y: auto;
        min-height: 0;
    }

    .equipment-slots {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .equipment-slot {
        width: 100%;
        min-width: 0;
        height: 52px;
        font-size: 1rem;
    }

    .skill-card,
    .item-card {
        padding: 12px;
        border-radius: 14px;
    }

    .skill-name {
        gap: 8px;
        flex-wrap: wrap;
    }

    .chat-log {
        padding: 10px 8px;
        width: 100%;
        box-sizing: border-box;
        flex: 1 1 auto;
        min-height: 0;
    }

    .message {
        max-width: 100%;
        margin-bottom: 10px;
        padding: 9px 11px;
        border-radius: 12px;
        line-height: 1.6;
        box-shadow: none;
    }

    .ai-msg {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0;
        box-sizing: border-box;
    }

    .center-panel,
    #panel-chat,
    #chat-container,
    .action-bar,
    .input-area {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #panel-chat {
        display: flex;
    }

    .action-bar {
        padding: 8px 8px 10px;
        flex: 0 0 auto;
    }

    .suggestions-container {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 6px;
    }

    .story-choice {
        position: relative;
        min-height: 0;
        padding: 7px 28px 7px 10px;
        gap: 1px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.02);
        border-color: rgba(255, 255, 255, 0.06);
        justify-content: center;
    }

    .story-choice::after {
        content: '›';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.28);
        font-size: 1rem;
    }

    .story-choice-text {
        font-size: 0.76rem;
        line-height: 1.18;
        -webkit-line-clamp: 1;
    }

    .input-area {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .input-area .btn,
    .send-btn {
        flex: 0 0 auto;
    }

    #skip-btn {
        height: 36px;
        padding: 0 8px;
        font-size: 0.7rem;
        border-radius: 12px;
    }

    #user-input {
        min-width: 0;
        min-height: 36px;
        padding: 8px 11px;
        font-size: 16px;
        border-radius: 14px;
    }

    .send-btn {
        width: 36px;
        height: 36px;
        font-size: 0.92rem;
    }

    .world-info-entry {
        padding: 10px;
        border-radius: 12px;
    }

    .world-info-entry-head {
        flex-direction: column;
        gap: 8px;
    }

    .world-info-group-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .world-info-delete-btn {
        width: 100%;
        height: 36px;
    }

    #world-info-list {
        max-height: none !important;
    }

    .left-panel-scroll,
    .right-panel-scroll,
    #char-skills-list,
    #char-inventory-list {
        padding-bottom: 24px;
        box-sizing: border-box;
    }
}

/* Site Footer for Compliance (ICP, etc.) */
.site-footer {
    text-align: center;
    padding: 24px 16px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    margin: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.site-footer a:hover {
    color: var(--text-soft);
    text-decoration: underline;
}

.footer-links {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.footer-link-pill {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-soft) !important;
}

.footer-link-pill:hover {
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.06);
    color: var(--highlight) !important;
}

.footer-link-primary {
    border-color: rgba(197, 169, 106, 0.26);
    background: rgba(197, 169, 106, 0.12);
    color: var(--highlight) !important;
}

.footer-link-culture {
    border-color: rgba(121, 168, 255, 0.26);
    background: rgba(121, 168, 255, 0.12);
    color: #b7ceff !important;
}

.footer-link-culture:hover {
    color: #d5e2ff !important;
}

.footer-compliance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    align-items: center;
}

.footer-compliance img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.ai-rules-modal-content strong {
    color: var(--highlight);
}


/* ==========================================================================
   THEME OVERRIDES & NEW UI UPGRADES (Apple x AI Style)
   ========================================================================== */

/* 1. Global Variables & Base Adjustments */
:root {
    /* Base Typography & Smooth Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Default Dark Mode Theme (Space Blue/Dark Gray) */
    --theme-bg: #0f1115;
    --theme-bg-gradient: linear-gradient(180deg, #14161c 0%, #0f1115 58%, #0a0b0f 100%);
    --theme-card-bg: rgba(24, 26, 31, 0.65);
    --theme-card-border: rgba(255, 255, 255, 0.08);
    --theme-card-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    --theme-card-hover-bg: rgba(30, 32, 38, 0.75);
    
    --theme-text-main: #e1e3e6;
    --theme-text-muted: #a1a5b0;
    --theme-highlight: #f2f3f5;
    
    --theme-input-bg: rgba(255, 255, 255, 0.03);
    --theme-input-border: rgba(255, 255, 255, 0.08);
    --theme-input-focus-shadow: 0 0 0 3px rgba(58, 123, 255, 0.2);
    
    --theme-chat-user-bg: rgba(62, 82, 112, 0.28);
    --theme-chat-user-border: rgba(135, 180, 240, 0.6);
    --theme-chat-user-text: #ddeafb;
    --theme-chat-ai-bg: rgba(255, 255, 255, 0.035);
    --theme-chat-ai-border: rgba(58, 123, 255, 0.5);
    --theme-chat-ai-text: #e1e3e6;
    
    --ai-glow-color: rgba(58, 123, 255, 0.4);
    --ai-pulse-color: rgba(58, 123, 255, 0.6);
}

[data-theme="light"] {
    /* Light Mode Theme (Clean White/Light Gray) */
    --theme-bg: #f8f9fa;
    --theme-bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8f9fa 58%, #f1f3f5 100%);
    --theme-card-bg: rgba(255, 255, 255, 0.85);
    --theme-card-border: rgba(0, 0, 0, 0.06);
    --theme-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    --theme-card-hover-bg: rgba(255, 255, 255, 0.98);
    
    --theme-text-main: #2c2e33;
    --theme-text-muted: #6b7280;
    --theme-highlight: #111827;
    
    --theme-input-bg: #ffffff;
    --theme-input-border: rgba(0, 0, 0, 0.12);
    --theme-input-focus-shadow: 0 0 0 3px rgba(58, 123, 255, 0.15);
    
    --theme-chat-user-bg: #e3f0ff;
    --theme-chat-user-border: #8ab4f8;
    --theme-chat-user-text: #1a365d;
    --theme-chat-ai-bg: #ffffff;
    --theme-chat-ai-border: #3a7bff;
    --theme-chat-ai-text: #2c2e33;
    
    --ai-glow-color: rgba(58, 123, 255, 0.2);
    --ai-pulse-color: rgba(58, 123, 255, 0.4);
    --theme-btn-bg: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    --theme-btn-hover-bg: linear-gradient(180deg, #334155 0%, #1f2937 100%);
    --theme-btn-text: #f9fafb;
    --theme-btn-border: rgba(17, 24, 39, 0.18);
    --theme-btn-shadow: 0 10px 20px rgba(17, 24, 39, 0.12);
    --theme-btn-secondary-bg: rgba(255, 255, 255, 0.96);
    --theme-btn-secondary-hover-bg: rgba(243, 244, 246, 0.98);
    --theme-btn-secondary-text: #111827;
    --theme-btn-secondary-border: rgba(17, 24, 39, 0.12);
    --theme-btn-ghost-hover-bg: rgba(17, 24, 39, 0.05);
    --theme-btn-active-bg: rgba(17, 24, 39, 0.08);
    --theme-btn-active-border: rgba(17, 24, 39, 0.16);
    --theme-btn-active-text: #111827;
    
    /* Override legacy variables */
    --text-color: var(--theme-text-main);
    --text-muted: var(--theme-text-muted);
    --text-soft: #4b5563;
    --highlight: var(--theme-highlight);
    --panel-border: rgba(0,0,0,0.08);
    --panel-border-strong: rgba(0,0,0,0.15);
    --card-bg: var(--theme-card-bg);
}

/* Typography Improvements */
body {
    background: var(--theme-bg-gradient);
    color: var(--theme-text-main);
    line-height: 1.7;
    letter-spacing: 0.015em;
    transition: background 0.3s ease, color 0.3s ease;
}

p {
    margin-bottom: 1.2em;
}

/* 2. Alpha Compositing Cards (Performance Glassmorphism) */
.card, .hero-card, .info-panel, .lobby-panel, .room-list-item, 
.auth-panel, .feature-item, .billing-card, .panel, .game-header,
.toolbar-card, .form-section, .draft-facts-group, .story-choice {
    background: var(--theme-card-bg) !important;
    border: 1px solid var(--theme-card-border) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--theme-card-shadow) !important;
    transition: var(--transition-smooth);
}

[data-theme="light"] .card, [data-theme="light"] .hero-card, 
[data-theme="light"] .info-panel, [data-theme="light"] .lobby-panel, 
[data-theme="light"] .room-list-item, [data-theme="light"] .auth-panel,
[data-theme="light"] .panel, [data-theme="light"] .game-header,
[data-theme="light"] .form-section {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), var(--theme-card-shadow) !important;
}

/* Hover Effects for Cards */
.card:hover, .room-list-item:hover, .story-choice:hover, .skill-card:hover, .item-card:hover {
    transform: translateY(-4px);
    background: var(--theme-card-hover-bg) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .card:hover, [data-theme="light"] .room-list-item:hover, 
[data-theme="light"] .story-choice:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

/* 3. Inputs & Forms */
input, textarea, select {
    background: var(--theme-input-bg) !important;
    border: 1px solid var(--theme-input-border) !important;
    color: var(--theme-text-main) !important;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: var(--theme-input-focus-shadow) !important;
}

/* 4. Chat Bubbles (Play Interface) */
.chat-log {
    background: transparent !important; /* Let panel bg show through */
}

.message {
    border: 1px solid var(--theme-card-border) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    max-width: 75ch; /* Limit width for readability */
}

.user-msg {
    background: var(--theme-chat-user-bg) !important;
    border-left: 3px solid var(--theme-chat-user-border) !important;
    color: var(--theme-chat-user-text) !important;
}

.ai-msg {
    background: var(--theme-chat-ai-bg) !important;
    border-left: 3px solid var(--theme-chat-ai-border) !important;
    color: var(--theme-chat-ai-text) !important;
    position: relative;
    /* Subtle gradient for AI */
    background-image: linear-gradient(135deg, rgba(58, 123, 255, 0.05), transparent) !important;
}

/* 5. AI Button & Animations */
@keyframes ai-pulse {
    0% { box-shadow: 0 0 0 0 var(--ai-pulse-color), inset 0 0 0 1px rgba(255,255,255,0.1); }
    70% { box-shadow: 0 0 0 8px rgba(58, 123, 255, 0), inset 0 0 0 1px rgba(255,255,255,0.1); }
    100% { box-shadow: 0 0 0 0 rgba(58, 123, 255, 0), inset 0 0 0 1px rgba(255,255,255,0.1); }
}

.btn-ai {
    position: relative;
    border: 1px solid rgba(58, 123, 255, 0.5) !important;
    background: var(--theme-card-bg) !important;
    color: var(--theme-text-main) !important;
    box-shadow: 0 0 10px var(--ai-glow-color) !important;
    overflow: hidden;
}

.btn-ai::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.5s ease;
}

.btn-ai:hover::before {
    left: 100%;
    transition: all 0.5s ease;
}

.btn-ai:hover {
    box-shadow: 0 0 16px rgba(58, 123, 255, 0.6) !important;
    transform: translateY(-2px);
}

.ai-breathing {
    animation: ai-pulse 2s infinite cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-color: #3a7bff !important;
}

/* Secondary Button Overrides for Light Theme */
[data-theme="light"] .btn-secondary, [data-theme="light"] .btn-ghost {
    background: var(--theme-btn-secondary-bg) !important;
    color: var(--theme-btn-secondary-text) !important;
    border-color: var(--theme-btn-secondary-border) !important;
}

[data-theme="light"] .btn-secondary:hover {
    background: var(--theme-btn-secondary-hover-bg) !important;
}

[data-theme="dark"] select,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .search-type-select {
    color-scheme: dark;
    background: #1b1f27 !important;
    color: #f3f4f6 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] select option,
[data-theme="dark"] .modal-content select option,
[data-theme="dark"] select optgroup,
[data-theme="dark"] .modal-content select optgroup {
    background: #1b1f27 !important;
    color: #f3f4f6 !important;
}

[data-theme="light"] select,
[data-theme="light"] .modal-content select,
[data-theme="light"] .search-type-select {
    color-scheme: light;
    background: #f8fafc !important;
    color: var(--theme-text-main) !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
}

[data-theme="light"] select option,
[data-theme="light"] .modal-content select option,
[data-theme="light"] select optgroup,
[data-theme="light"] .modal-content select optgroup {
    background: #ffffff !important;
    color: #111827 !important;
}

[data-theme="light"] .user-code {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(17, 24, 39, 0.12);
    color: var(--theme-text-main);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.04);
}

[data-theme="light"] .copy-icon-hint {
    color: rgba(17, 24, 39, 0.45);
}

[data-theme="light"] .book-cover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 244, 246, 0.96)),
        var(--theme-card-bg);
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--theme-text-muted);
}

[data-theme="light"] .smart-prompt-input {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
        var(--theme-input-bg) !important;
    border-color: rgba(17, 24, 39, 0.12) !important;
    color: var(--theme-text-main) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 10px 24px rgba(17, 24, 39, 0.06) !important;
}

[data-theme="light"] .smart-prompt-input::placeholder {
    color: rgba(17, 24, 39, 0.38);
}

[data-theme="light"] .play-log-box {
    background: #f8fafc;
    border-color: rgba(17, 24, 39, 0.12);
    color: var(--theme-text-main);
}

[data-theme="light"] .play-library-body {
    background:
        radial-gradient(circle at top, rgba(197, 169, 106, 0.1), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #f3f4f6 52%, #eef2f7 100%);
}

[data-theme="light"] .game-grid {
    background: rgba(17, 24, 39, 0.06);
}

[data-theme="light"] .game-header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom-color: rgba(17, 24, 39, 0.08) !important;
}

[data-theme="light"] .icon-btn {
    border-color: rgba(17, 24, 39, 0.12);
    color: var(--theme-text-main);
}

[data-theme="light"] .icon-btn:hover {
    background: rgba(17, 24, 39, 0.06);
    border-color: var(--theme-btn-secondary-border);
}

[data-theme="light"] .play-book-layout .panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 18px 36px rgba(17, 24, 39, 0.06) !important;
}

[data-theme="light"] .play-book-layout .left-panel,
[data-theme="light"] .play-book-layout .right-panel,
[data-theme="light"] .play-book-layout .center-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.96)) !important;
}

[data-theme="light"] .play-book-layout .panel-header {
    background: rgba(17, 24, 39, 0.03) !important;
    border-bottom-color: rgba(17, 24, 39, 0.08) !important;
    color: var(--theme-text-muted);
}

[data-theme="light"] .play-panel-mark {
    background: rgba(197, 169, 106, 0.14);
    color: #8a6a2f;
}

[data-theme="light"] .play-book-layout .chat-log {
    background:
        radial-gradient(circle at top, rgba(197, 169, 106, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 251, 0.98)) !important;
}

[data-theme="light"] .ai-msg {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(17, 24, 39, 0.08);
    color: var(--theme-text-main);
}

[data-theme="light"] .user-msg {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: rgba(59, 130, 246, 0.55);
    color: var(--theme-text-main);
}

[data-theme="light"] .action-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top-color: rgba(17, 24, 39, 0.08) !important;
}

[data-theme="light"] .input-area input {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(17, 24, 39, 0.12);
    color: var(--theme-text-main);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

[data-theme="light"] .input-area input::placeholder {
    color: rgba(17, 24, 39, 0.38);
}

[data-theme="light"] .story-choice {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
    color: var(--theme-text-main);
}

[data-theme="light"] .story-choice:hover {
    background: rgba(248, 250, 252, 1) !important;
    border-color: rgba(197, 169, 106, 0.3) !important;
}

[data-theme="light"] .story-choice::after,
[data-theme="light"] .story-choice-text {
    color: var(--theme-text-muted);
}

[data-theme="light"] .story-journal-kicker {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(17, 24, 39, 0.1);
    color: var(--theme-text-muted);
}

[data-theme="light"] .story-journal-entry {
    box-shadow: none;
}

[data-theme="light"] .story-journal-summary:hover {
    background: rgba(17, 24, 39, 0.04);
}

[data-theme="light"] .story-journal-entry[open] > .story-journal-summary {
    background: rgba(197, 169, 106, 0.12);
}

[data-theme="light"] .story-journal-hint,
[data-theme="light"] .story-tracker-copy,
[data-theme="light"] .char-subtitle,
[data-theme="light"] .bar-label,
[data-theme="light"] .stat-label,
[data-theme="light"] .status-copy-dim {
    color: var(--theme-text-muted);
}

[data-theme="light"] .bar-track {
    background: rgba(17, 24, 39, 0.08);
}

[data-theme="light"] .stat-box,
[data-theme="light"] .slot {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(17, 24, 39, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .slot.equipped {
    background: rgba(197, 169, 106, 0.16);
    color: #8a6a2f;
}

[data-theme="light"] .avatar-placeholder {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.98));
    border-color: rgba(17, 24, 39, 0.1);
    color: var(--theme-text-main);
}

[data-theme="light"] .mobile-nav {
    background: rgba(255, 255, 255, 0.96);
    border-top-color: rgba(17, 24, 39, 0.1);
    box-shadow: 0 -12px 28px rgba(17, 24, 39, 0.08);
}

[data-theme="light"] .nav-btn {
    color: var(--theme-text-muted);
}

[data-theme="light"] .nav-btn.active {
    color: #8a6a2f;
}

[data-theme="light"] .nav-btn.active::before {
    background: rgba(197, 169, 106, 0.14);
    border-color: rgba(197, 169, 106, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .nav-btn.active .icon {
    color: #8a6a2f;
}

[data-theme="light"] .room-controls {
    border-bottom-color: rgba(17, 24, 39, 0.08);
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.02), rgba(17, 24, 39, 0.01));
}

[data-theme="light"] .room-status-chip,
[data-theme="light"] .turn-badge,
[data-theme="light"] .room-players-toggle,
[data-theme="light"] .player-item {
    border-color: rgba(17, 24, 39, 0.1);
    background: rgba(255, 255, 255, 0.92);
    color: var(--theme-text-main);
}

[data-theme="light"] .room-players.expanded .room-players-body {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(17, 24, 39, 0.1);
    box-shadow: 0 18px 36px rgba(17, 24, 39, 0.1);
}

[data-theme="light"] .play-settings-control,
[data-theme="light"] .play-settings-textarea {
    background: #f8fafc;
    color: var(--theme-text-main);
    border-color: rgba(17, 24, 39, 0.12);
}

[data-theme="light"] .play-range-scale,
[data-theme="light"] .play-char-bio,
[data-theme="light"] .force-char-note {
    color: var(--theme-text-muted);
}

/* Modal specific light theme fixes */
[data-theme="light"] .modal-content {
    background: #ffffff !important;
    color: var(--theme-text-main) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(17, 24, 39, 0.12) !important;
}

[data-theme="light"] .modal-content input, 
[data-theme="light"] .modal-content textarea, 
[data-theme="light"] .modal-content select {
    background: #f8f9fa !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    color: #111827 !important;
}

[data-theme="light"] .close { color: #6b7280; }
[data-theme="light"] .close:hover { color: #111827; }


/* ==========================================================================
   LIGHT THEME DEEP FIXES (Hardcoded inline styles & missing texts)
   ========================================================================== */

/* 1. Scene Scripts & NPC Personas (Overriding inline hardcoded dark backgrounds) */
[data-theme="light"] .scene-script-entry,
[data-theme="light"] .key-npc-persona-entry details {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

[data-theme="light"] .scene-script-entry input,
[data-theme="light"] .scene-script-entry textarea,
[data-theme="light"] .key-npc-persona-entry input,
[data-theme="light"] .key-npc-persona-entry textarea {
    background: #f8f9fa !important;
    color: var(--theme-text-main) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .scene-script-entry input::placeholder,
[data-theme="light"] .scene-script-entry textarea::placeholder,
[data-theme="light"] .key-npc-persona-entry input::placeholder,
[data-theme="light"] .key-npc-persona-entry textarea::placeholder {
    color: rgba(0,0,0,0.35) !important;
}

/* 2. Hardcoded White/Gray Texts */
[data-theme="light"] .muted,
[data-theme="light"] .helper-text,
[data-theme="light"] .scene-script-key-npcs-selector .muted,
[data-theme="light"] .world-info-group-copy,
[data-theme="light"] .room-players-title,
[data-theme="light"] .room-players-summary,
[data-theme="light"] .key-npc-summary-text,
[data-theme="light"] .notice-list {
    color: var(--theme-text-muted) !important;
}

[data-theme="light"] .modal-content h2, 
[data-theme="light"] .modal-content h3,
[data-theme="light"] .modal-content h4,
[data-theme="light"] .modal-content p,
[data-theme="light"] .modal-content label {
    color: var(--theme-text-main) !important;
}

[data-theme="light"] .modal-content h4,
[data-theme="light"] .modal-content p {
    color: var(--theme-text-muted) !important;
}

/* 3. Character Selection Modal */
[data-theme="light"] .char-select-item {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.14) !important;
    color: var(--theme-text-main) !important;
}

[data-theme="light"] .char-select-item:hover {
    background: #f1f3f5 !important;
}

[data-theme="light"] .char-select-item.selected {
    background: rgba(218, 165, 32, 0.08) !important;
    border-color: #b8860b !important;
    box-shadow: 0 0 10px rgba(218, 165, 32, 0.15) !important;
}

[data-theme="light"] .char-select-name {
    color: #b8860b !important; /* Darker gold for better contrast on white */
}

[data-theme="light"] .char-select-meta {
    color: var(--theme-text-muted) !important;
}

[data-theme="light"] .char-select-arrow {
    color: var(--theme-text-muted) !important;
}

/* 4. World Info Entries (Lore) */
[data-theme="light"] .world-info-entry {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.12) !important;
}

[data-theme="light"] .world-info-entry .wi-keys,
[data-theme="light"] .world-info-entry .wi-content {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: var(--theme-text-main) !important;
}

[data-theme="light"] .world-info-empty {
    border-color: rgba(0,0,0,0.15) !important;
    color: var(--theme-text-muted) !important;
}

/* Additional minor fixes for modals and drop-downs */
[data-theme="light"] .room-players-body {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.12) !important;
}

[data-theme="light"] .player-item {
    background: #f8f9fa !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: var(--theme-text-main) !important;
}

[data-theme="light"] .library-mini-nav,
[data-theme="light"] .library-tool-actions,
[data-theme="light"] .site-footer,
[data-theme="light"] .announcement-banner,
[data-theme="light"] .announcement-item,
[data-theme="light"] .footer-link-pill {
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 14px 28px rgba(17, 24, 39, 0.06);
}

[data-theme="light"] .announcement-banner {
    background: rgba(255, 248, 228, 0.92);
}

[data-theme="light"] .announcement-item {
    background: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .announcement-banner-link {
    background: rgba(0, 0, 0, 0.03);
    color: #111827;
    border-color: rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .announcement-banner-close {
    background: rgba(0, 0, 0, 0.04);
    color: #4b5563;
}

[data-theme="light"] .announcement-empty {
    border-color: rgba(0, 0, 0, 0.14);
    background: rgba(249, 250, 251, 0.95);
}

[data-theme="light"] .footer-link-pill {
    background: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .footer-link-primary {
    background: rgba(197, 169, 106, 0.18);
    border-color: rgba(146, 104, 23, 0.28) !important;
}

[data-theme="light"] .scene-script-key-npcs-selector div {
    color: var(--theme-text-main);
}

/* ==========================================================================
   LIBRARY UI SHELL
   ========================================================================== */

.library-body {
    min-height: 100vh;
}

.library-shell {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.library-global-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.library-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--highlight);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.library-global-bar {
    position: sticky;
    top: 14px;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.library-mini-nav,
.library-tool-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(18, 20, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(14px);
}

.library-mini-nav a,
.library-mini-nav button,
.library-mini-nav .is-disabled,
.library-tool-actions a,
.library-tool-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.library-mini-nav a:hover,
.library-mini-nav button:hover,
.library-tool-actions a:hover,
.library-tool-actions button:hover,
.library-mini-nav a.active,
.library-tool-actions a.active {
    background: rgba(197, 169, 106, 0.14);
    color: var(--highlight);
    transform: translateY(-1px);
}

.library-mini-nav .is-disabled {
    opacity: 0.5;
    cursor: default;
}

.library-home-hero,
.library-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 20px;
    align-items: stretch;
}

.library-hero-panel {
    padding: 30px 32px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(14, 16, 20, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
}

.library-kicker {
    margin: 0 0 12px;
    color: var(--accent-color);
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.library-home-title {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 4rem);
    line-height: 1.06;
}

.library-home-copy,
.library-page-copy {
    margin: 12px 0 0;
    max-width: 60ch;
    color: var(--text-soft);
}

.library-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.library-note-panel {
    display: grid;
    gap: 14px;
}

.library-note-card {
    padding: 20px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.library-note-card h3,
.library-note-card h4 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--highlight);
}

.library-note-card p,
.library-note-card li {
    margin: 0;
    color: var(--text-soft);
}

.library-note-card ul {
    margin: 0;
    padding-left: 18px;
}

.library-main-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.ms-primary-nav {
    margin-bottom: 22px;
}

.library-entry-card {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 108px;
    padding: var(--card-padding);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-color);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.library-entry-card:hover,
.library-entry-card.is-active {
    transform: translateY(-3px);
    border-color: rgba(197, 169, 106, 0.35);
    background: rgba(197, 169, 106, 0.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.library-entry-card.is-active {
    border-color: rgba(197, 169, 106, 0.46);
    box-shadow: 0 0 0 1px rgba(197, 169, 106, 0.12), 0 16px 32px rgba(0, 0, 0, 0.26);
}

.library-entry-card.is-disabled {
    cursor: default;
    opacity: 0.72;
}

.library-entry-card.is-disabled:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.library-entry-eyebrow {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.library-entry-card strong {
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.15;
}

.library-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 18px;
}

.library-overview-panel {
    padding: var(--card-padding);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md);
}

.library-overview-panel h2,
.library-overview-panel h3 {
    margin: 0 0 10px;
}

.library-overview-panel p {
    margin: 0;
}

.library-home-section {
    padding-top: 8px;
}

.home-onboarding-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 980;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.36);
}

.home-onboarding-modal-content {
    max-width: 720px;
    max-height: min(80vh, 760px);
    overflow: auto;
}

.home-onboarding-modal-copy {
    margin-bottom: 16px;
}

.home-onboarding-step-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-onboarding-step-body {
    padding: 0 14px 14px;
    color: var(--text-soft);
}

.home-onboarding-step-body p {
    margin: 0;
}

.home-onboarding-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 768px) {
    .home-onboarding-fab {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        min-height: 42px;
        padding: 0 14px;
    }

    .home-onboarding-modal-content {
        width: calc(100% - 24px);
        margin: 8vh auto;
        padding: 22px 18px;
    }

    .home-onboarding-modal-copy {
        margin-bottom: 14px;
        font-size: 0.93rem;
        line-height: 1.65;
    }

    .home-onboarding-step-list {
        gap: 8px;
    }

    .home-onboarding-step {
        border-radius: 14px;
    }

    .home-onboarding-step > .story-journal-summary {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
        padding: 12px 14px;
    }

    .home-onboarding-step .story-journal-label {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    .home-onboarding-step .story-journal-title {
        width: 100%;
        text-align: left;
        font-size: 0.96rem;
        line-height: 1.45;
    }

    .home-onboarding-step-body {
        padding: 0 14px 14px;
        font-size: 0.88rem;
        line-height: 1.65;
    }

    .home-onboarding-step-actions {
        gap: 8px;
        margin-top: 12px;
    }

    .home-onboarding-step-actions .btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.82rem;
    }
}

.library-simple-index {
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-soft);
    box-shadow: var(--shadow-md);
}

.library-simple-index strong {
    color: var(--highlight);
}

.library-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    padding: 8px 2px 0;
}

.library-page-title {
    margin: 0;
    font-size: 1.7rem;
}

.library-page-subtitle {
    margin: 8px 0 0;
    color: var(--text-muted);
    max-width: 52ch;
}

.mode-select-body {
    background: var(--theme-bg-gradient);
}

.mode-select-shell {
    gap: 20px;
}

.mode-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(148px, 180px));
    gap: 14px;
    justify-content: center;
    align-content: center;
    min-height: calc(100vh - 220px);
}

.mode-select-card {
    appearance: none;
    width: 100%;
    font: inherit;
}

.library-tab-section {
    scroll-margin-top: 120px;
}

.library-sidebar-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.library-sidebar {
    position: sticky;
    top: 98px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md);
    min-height: 240px;
}

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

.library-sidebar-title {
    margin: 0;
    font-size: 1rem;
    color: var(--highlight);
}

.library-sidebar-kicker {
    margin: 0 0 6px;
    color: var(--accent-color);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.library-sidebar-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.library-sidebar-toggle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    cursor: pointer;
}

.library-drawer-open-btn {
    display: none;
}

.library-sidebar-layout.is-collapsed {
    grid-template-columns: 88px minmax(0, 1fr);
}

.library-sidebar-layout.is-collapsed .library-sidebar {
    padding: 16px 12px;
}

.library-sidebar-layout.is-collapsed .library-sidebar-copy,
.library-sidebar-layout.is-collapsed .library-sidebar-title-text,
.library-sidebar-layout.is-collapsed .book-chapter-label,
.library-sidebar-layout.is-collapsed .library-sidebar-footer {
    display: none;
}

.book-chapter-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.book-chapter-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.book-chapter-link:hover {
    transform: translateX(2px);
    background: rgba(197, 169, 106, 0.08);
    border-color: rgba(197, 169, 106, 0.22);
    color: var(--highlight);
}

.book-chapter-link.is-active {
    background: rgba(197, 169, 106, 0.14);
    border-color: rgba(197, 169, 106, 0.32);
    box-shadow: inset 0 0 0 1px rgba(197, 169, 106, 0.12);
    color: var(--highlight);
}

.book-chapter-link.is-active .book-chapter-index {
    background: rgba(197, 169, 106, 0.24);
    color: var(--highlight);
}

.book-chapter-index {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(197, 169, 106, 0.14);
    color: var(--accent-color);
    font-size: 0.76rem;
    flex-shrink: 0;
}

.library-sidebar-layout.is-collapsed .book-chapter-link {
    justify-content: center;
    padding: 12px 10px;
}

.library-sidebar-layout.is-collapsed .book-chapter-index {
    width: 34px;
    height: 34px;
}

.library-book-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.library-book-shell {
    padding: var(--card-padding);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md);
}

.library-book-section {
    scroll-margin-top: 110px;
}

.library-book-section + .library-book-section {
    margin-top: 18px;
}

.library-section-bookmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(197, 169, 106, 0.12);
    color: var(--accent-color);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.library-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.library-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.library-meta-stack {
    display: grid;
    gap: 12px;
}

[data-theme="light"] .library-mini-nav,
[data-theme="light"] .library-tool-actions {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .library-main-cards {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 36px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .library-hero-panel,
[data-theme="light"] .library-note-card,
[data-theme="light"] .library-entry-card,
[data-theme="light"] .library-overview-panel,
[data-theme="light"] .library-simple-index,
[data-theme="light"] .library-sidebar,
[data-theme="light"] .library-book-shell {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 36px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .library-sidebar-toggle {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .book-chapter-link {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}

@media (max-width: 1024px) {
    .library-main-cards,
    .library-overview-grid,
    .library-home-hero,
    .library-page-hero {
        grid-template-columns: 1fr;
    }

    .mode-select-grid {
        grid-template-columns: repeat(2, minmax(124px, 160px));
    }

    .library-sidebar-layout {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 14px;
    }

    .library-sidebar {
        top: 84px;
        padding: 16px 14px;
        border-radius: 20px;
        min-height: 0;
    }

    .book-chapter-link {
        padding: 10px 12px;
    }

    .library-sidebar-layout.is-collapsed {
        grid-template-columns: 72px minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .library-global-bar {
        top: calc(8px + env(safe-area-inset-top, 0px));
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand brand"
            "nav tools";
        align-items: start;
        gap: 8px 10px;
        flex-wrap: nowrap;
    }

    .library-shell {
        gap: 18px;
    }

    .library-global-left {
        display: contents;
    }

    .library-brand {
        grid-area: brand;
        justify-self: start;
        font-size: 1.42rem;
    }

    .library-mini-nav,
    .library-tool-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 5px;
        gap: 4px;
        min-width: 0;
        box-sizing: border-box;
        border-radius: 18px;
        background: rgba(18, 20, 26, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
        backdrop-filter: blur(12px);
        scroll-snap-type: x proximity;
    }

    .library-mini-nav {
        grid-area: nav;
        width: auto;
        max-width: min(42vw, 156px);
        justify-self: start;
    }

    .library-tool-actions {
        grid-area: tools;
        width: auto;
        max-width: min(38vw, 172px);
        justify-self: end;
        align-self: end;
        margin-left: auto;
    }

    .library-tool-actions a,
    .library-tool-actions button {
        padding: 5px 8px;
        font-size: 0.7rem;
        min-height: 29px;
    }

    .library-mini-nav::-webkit-scrollbar,
    .library-tool-actions::-webkit-scrollbar {
        display: none;
    }



    .library-mini-nav a,
    .library-mini-nav button,
    .library-mini-nav .is-disabled,
    .library-tool-actions a,
    .library-tool-actions button {
        padding: 6px 9px;
        font-size: 0.72rem;
        border-radius: 999px;
        min-height: 30px;
        scroll-snap-align: start;
    }

    .library-hero-panel {
        padding: 24px 20px;
    }

    .library-main-cards {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        margin-top: 10px;
        padding: 8px;
        border-radius: 22px;
        background: rgba(18, 20, 26, 0.62);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: var(--shadow-md);
        scroll-snap-type: x proximity;
    }

    .library-main-cards::-webkit-scrollbar {
        display: none;
    }

    .library-entry-card {
        flex: 0 0 124px;
        width: 124px;
        min-width: 124px;
        height: 92px;
        padding: 14px 10px;
        border-radius: 16px;
        scroll-snap-align: start;
        box-shadow: none;
    }

    .library-entry-card strong {
        font-size: 0.98rem;
    }

    .mode-select-card {
        width: 100%;
        min-width: 0;
    }

    .library-sidebar-layout {
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }

    .library-sidebar {
        top: 74px;
        padding: 14px 10px;
        gap: 10px;
        border-radius: 18px;
    }

    .library-sidebar-top {
        gap: 8px;
        align-items: flex-start;
        flex-direction: column;
    }

    .library-sidebar-title {
        font-size: 0.92rem;
    }

    .library-sidebar-copy {
        font-size: 0.78rem;
    }

    .library-sidebar-toggle {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .book-chapter-nav {
        gap: 8px;
    }

    .book-chapter-link {
        padding: 9px 8px;
        border-radius: 12px;
        gap: 8px;
    }

    .book-chapter-index {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .book-chapter-label {
        font-size: 0.78rem;
    }

    .library-book-shell {
        padding: 16px;
    }
}

/* ==========================================================================
   PLAY BOOK FRAME
   ========================================================================== */

.is-hidden {
    display: none;
}

.chat-view.is-hidden {
    display: none !important;
}

.btn-compact {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.8em;
}

.u-mt-0 {
    margin-top: 0;
}

.u-w-full {
    width: 100%;
}

.u-text-center {
    text-align: center;
}

.u-flex-grow {
    flex: 1;
}

.play-library-body {
    background:
        radial-gradient(circle at top, rgba(197, 169, 106, 0.08), transparent 30%),
        linear-gradient(180deg, #111217 0%, #0d0f13 54%, #0b0c10 100%);
}

.play-library-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.play-book-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 18px;
    padding: 18px 20px 22px;
    box-sizing: border-box;
}

.play-book-layout .panel {
    min-height: 0;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 20, 26, 0.94);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.play-book-layout .left-panel,
.play-book-layout .right-panel {
    background: linear-gradient(180deg, rgba(22, 24, 30, 0.96), rgba(16, 18, 24, 0.94));
}

.play-book-layout .center-panel {
    background: linear-gradient(180deg, rgba(24, 26, 34, 0.98), rgba(18, 20, 26, 0.98));
}

.play-book-layout .panel-header {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}

.play-panel-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(197, 169, 106, 0.12);
    color: var(--highlight);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.play-stage-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.play-book-layout .chat-log {
    padding: 26px 24px;
    background:
        radial-gradient(circle at top, rgba(197, 169, 106, 0.05), transparent 35%),
        linear-gradient(180deg, rgba(20, 22, 28, 0.96), rgba(15, 17, 21, 0.98));
}

.play-book-layout .action-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(12, 14, 18, 0.9);
    padding: 16px 18px 18px;
}

.play-generation-status {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(197, 169, 106, 0.18);
    border-radius: 12px;
    background: rgba(197, 169, 106, 0.08);
    color: var(--text-color);
    font-size: 0.92rem;
}

.play-generation-status.is-hidden {
    display: none;
}

.play-generation-status.is-error {
    border-color: rgba(220, 92, 92, 0.25);
    background: rgba(220, 92, 92, 0.1);
}

.play-streaming-msg {
    white-space: pre-wrap;
}

.room-ai-streaming-msg {
    border-style: dashed;
    opacity: 0.96;
}

.play-settings-group {
    margin-bottom: 20px;
}

.play-settings-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.play-settings-control,
.play-settings-textarea {
    width: 100%;
    padding: 8px;
    background: #222;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
}

.play-settings-textarea {
    background: #333;
    border-color: #555;
}

.play-settings-custom {
    margin-top: 10px;
}

.play-range-scale {
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: 0.8em;
    margin-top: 5px;
}

.play-actions-end {
    display: flex;
    justify-content: flex-end;
}

.modal-content-medium {
    max-width: 600px;
}

.modal-content-wide {
    max-width: 800px;
}

.play-scroll-box {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.play-log-box {
    max-height: 200px;
    overflow-y: auto;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-card-border);
    color: var(--text-color);
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.library-footer-actions .btn,
.draft-facts-actions .btn,
.modal-footer-actions .btn {
    justify-content: center;
}

.modal-footer-between {
    display: flex;
    justify-content: space-between;
}

.modal-footer-end {
    display: flex;
    justify-content: flex-end;
}

.play-char-bio {
    color: #aaa;
    font-style: italic;
    margin-bottom: 20px;
}

.modal-dark-overlay {
    background-color: rgba(0, 0, 0, 0.95);
}

.modal-content-highlight {
    border-color: var(--highlight);
}

.modal-title-highlight {
    color: var(--highlight);
    text-align: center;
}

.force-char-note {
    color: #888;
    text-align: center;
    margin-bottom: 20px;
}

.force-char-list-scroll {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.room-player-empty {
    color: #666;
    font-size: 0.85em;
}

.play-book-layout .right-panel .tab {
    border-radius: 999px;
    padding: 8px 12px;
}

.play-book-layout .right-panel .tab.active {
    background: var(--theme-btn-active-bg);
}

@media (max-width: 1280px) {
    .play-book-layout {
        grid-template-columns: 280px minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1024px) {
    .play-library-shell {
        overflow: hidden;
    }

    .play-book-layout {
        display: block;
        padding: 12px 12px 72px;
    }
}

/* ==========================================================================
   PROFILE PAGE
   ========================================================================== */

.profile-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-container {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 18px;
}

.profile-card,
.social-panel,
.admin-panel-wide {
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: var(--shadow-md);
}

.profile-card,
.social-content,
.admin-panel-wide {
    padding: var(--card-padding);
}

.avatar-section {
    text-align: center;
    margin-bottom: 20px;
}

.profile-avatar-actions {
    margin-top: 10px;
}

.avatar-input-hidden {
    display: none;
}

.avatar-action-btn {
    font-size: 0.8em;
    padding: 4px 8px;
}

.avatar-img {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
}

.user-code {
    font-family: monospace;
    background: var(--theme-btn-secondary-bg);
    border: 1px solid var(--theme-btn-secondary-border);
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--theme-btn-secondary-text);
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.user-code-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

@media (max-width: 560px) {
    .library-global-bar {
        top: calc(6px + env(safe-area-inset-top, 0px));
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand brand"
            "nav tools";
        gap: 6px 8px;
    }

    .library-brand {
        font-size: 1.14rem;
    }

    .library-page-header {
        gap: 12px;
    }

    .library-page-title {
        font-size: 1.45rem;
    }

    .mode-select-shell {
        gap: 18px;
    }

    .mode-select-grid {
        grid-template-columns: 1fr;
        max-width: 220px;
        margin: 0 auto;
    }

    .library-mini-nav,
    .library-tool-actions {
        border-radius: 15px;
        padding: 4px;
        gap: 3px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    }

    .library-mini-nav {
        width: auto;
        max-width: min(43vw, 150px);
    }

    .library-tool-actions {
        width: auto;
        max-width: min(36vw, 156px);
        justify-self: end;
        margin-left: auto;
    }

    .library-mini-nav a,
    .library-mini-nav button,
    .library-mini-nav .is-disabled,
    .library-tool-actions a,
    .library-tool-actions button {
        padding: 4px 7px;
        font-size: 0.68rem;
        min-height: 27px;
    }

    .library-main-cards {
        gap: 7px;
        padding: 7px;
        border-radius: 20px;
    }

    .library-entry-card {
        flex: 0 0 116px;
        width: 116px;
        min-width: 116px;
        height: 82px;
        padding: 12px 8px;
        border-radius: 14px;
    }

    .library-entry-card strong {
        font-size: 0.92rem;
    }

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

    .library-home-section .bookshelf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
    }

    .library-home-section .book-card {
        padding: 10px;
        gap: 7px;
        min-height: 0;
        border-radius: 16px;
    }

    .library-home-section .book-cover {
        aspect-ratio: 4 / 5;
        border-radius: 12px;
    }

    .library-home-section .book-title {
        font-size: 0.82rem;
        line-height: 1.3;
        min-height: calc(1.3em * 2);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .library-home-section .book-meta {
        font-size: 0.66rem;
        line-height: 1.45;
        min-height: calc(1.45em * 2);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .library-home-section .book-desc {
        min-height: 0;
        font-size: 0.72rem;
        line-height: 1.5;
        min-height: calc(1.5em * 2);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .library-home-section .book-actions {
        margin-top: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch;
    }

    .library-home-section .book-actions > * {
        min-width: 0;
    }

    .library-home-section .book-actions > :only-child {
        grid-column: 1 / -1;
    }

    .library-home-section .book-card .btn {
        width: 100%;
        height: 32px;
        padding: 0 8px;
        font-size: 0.72rem;
        border-radius: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #tab-my-worlds .book-actions {
        gap: 5px;
    }

    #tab-my-worlds .book-card .btn {
        height: 28px;
        padding: 0 6px;
        font-size: 0.64rem;
        font-weight: 600;
        border-radius: 999px;
        letter-spacing: 0.01em;
        background: rgba(255, 255, 255, 0.035);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: none;
    }

    .empty-state {
        grid-column: 1 / -1;
        min-height: 180px;
        padding: 24px 18px;
        border-radius: 18px;
        gap: 10px;
    }

    .library-home-section .empty-state {
        min-height: 138px;
        padding: 18px 12px;
        border-radius: 16px;
        gap: 8px;
    }

    .library-home-section .empty-state p {
        max-width: 22ch;
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .library-home-section .empty-state .btn {
        min-width: 104px;
        min-height: 32px;
        padding: 8px 12px;
        font-size: 0.72rem;
    }

    .empty-state p {
        max-width: 20ch;
        font-size: 0.92rem;
    }

    .empty-state .btn {
        min-width: 124px;
    }

    .library-sidebar-layout {
        grid-template-columns: 102px minmax(0, 1fr);
        gap: 10px;
    }

    .library-sidebar {
        padding: 12px 8px;
        border-radius: 16px;
    }

    .library-sidebar-copy,
    .library-sidebar-footer {
        display: none;
    }

    .book-chapter-link {
        padding: 8px 6px;
        gap: 6px;
    }

    .book-chapter-index {
        width: 20px;
        height: 20px;
        font-size: 0.66rem;
    }

    .book-chapter-label {
        font-size: 0.72rem;
    }
}

@media (max-width: 390px) {
    .container {
        padding: 16px 10px 30px;
    }

    .library-shell {
        gap: 14px;
    }

    .library-global-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand brand"
            "nav tools";
        gap: 5px 6px;
    }

    .library-brand {
        font-size: 1rem;
    }

    .library-mini-nav,
    .library-tool-actions {
        padding: 4px;
        gap: 3px;
        min-width: 0;
        border-radius: 14px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .library-mini-nav {
        width: auto;
        max-width: min(44vw, 144px);
    }

    .library-tool-actions {
        width: auto;
        max-width: min(35vw, 138px);
        justify-self: end;
        margin-left: auto;
    }

    .library-mini-nav a,
    .library-mini-nav button,
    .library-mini-nav .is-disabled,
    .library-tool-actions a,
    .library-tool-actions button {
        padding: 4px 6px;
        font-size: 0.64rem;
        line-height: 1.2;
        min-height: 25px;
    }

    .library-main-cards {
        gap: 6px;
        padding: 6px;
        border-radius: 18px;
    }

    .library-entry-card {
        flex: 0 0 108px;
        width: 108px;
        min-width: 108px;
        height: 74px;
        padding: 10px 8px;
        border-radius: 13px;
    }

    .library-entry-card strong {
        font-size: 0.88rem;
    }

    .bookshelf-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .library-home-section .bookshelf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .library-home-section .book-card {
        padding: 9px 8px;
        gap: 6px;
        border-radius: 14px;
    }

    .library-home-section .book-cover {
        border-radius: 11px;
    }

    .library-home-section .book-title {
        font-size: 0.76rem;
    }

    .library-home-section .book-meta {
        font-size: 0.62rem;
    }

    .library-home-section .book-desc {
        font-size: 0.68rem;
    }

    .library-home-section .book-card .btn {
        height: 30px;
        padding: 0 6px;
        font-size: 0.66rem;
    }

    #tab-my-worlds .book-actions {
        gap: 4px;
    }

    #tab-my-worlds .book-card .btn {
        height: 26px;
        padding: 0 5px;
        font-size: 0.6rem;
    }

    .empty-state {
        min-height: 168px;
        padding: 22px 16px;
        border-radius: 16px;
    }

    .library-home-section .empty-state {
        min-height: 130px;
        padding: 16px 10px;
        border-radius: 15px;
    }

    .library-home-section .empty-state p {
        max-width: 20ch;
        font-size: 0.78rem;
    }

    .library-home-section .empty-state .btn {
        min-width: 96px;
        min-height: 30px;
        padding: 8px 10px;
        font-size: 0.68rem;
    }

    .empty-state p {
        max-width: 22ch;
        font-size: 0.88rem;
        line-height: 1.65;
    }

    .library-sidebar-layout {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 8px;
    }

    .library-sidebar {
        top: 68px;
        padding: 10px 6px;
        gap: 8px;
        border-radius: 14px;
    }

    .library-sidebar-top {
        gap: 6px;
    }

    .library-sidebar-title {
        font-size: 0.84rem;
    }

    .library-sidebar-toggle {
        width: 28px;
        height: 28px;
    }

    .book-chapter-nav {
        gap: 6px;
    }

    .book-chapter-link {
        padding: 7px 5px;
        gap: 4px;
        border-radius: 10px;
    }

    .book-chapter-index {
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }

    .book-chapter-label {
        font-size: 0.66rem;
    }

    .library-book-shell {
        padding: 12px;
        border-radius: 20px;
    }
}

@media (max-width: 360px) {
    .container {
        padding: 14px 8px 26px;
    }

    .library-global-bar {
        grid-template-columns: minmax(0, 1fr) minmax(132px, 46vw);
        gap: 5px;
    }

    .library-brand {
        font-size: 1.04rem;
    }

    .library-mini-nav a,
    .library-mini-nav button,
    .library-mini-nav .is-disabled,
    .library-tool-actions a,
    .library-tool-actions button {
        padding: 4px 6px;
        font-size: 0.64rem;
    }

    .library-main-cards {
        gap: 5px;
        padding: 5px;
        border-radius: 16px;
    }

    .library-entry-card {
        flex: 0 0 100px;
        width: 100px;
        min-width: 100px;
        height: 68px;
        padding: 8px 6px;
        border-radius: 12px;
    }

    .library-entry-card strong {
        font-size: 0.82rem;
    }

    .library-home-section .bookshelf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .library-home-section .book-card {
        padding: 8px 7px;
        gap: 5px;
        border-radius: 13px;
    }

    .library-home-section .book-cover {
        border-radius: 10px;
    }

    .library-home-section .book-title {
        font-size: 0.72rem;
    }

    .library-home-section .book-meta {
        font-size: 0.58rem;
    }

    .library-home-section .book-desc {
        font-size: 0.64rem;
        line-height: 1.45;
    }

    .library-home-section .book-card .btn {
        height: 28px;
        font-size: 0.62rem;
    }

    #tab-my-worlds .book-card .btn {
        height: 24px;
        padding: 0 4px;
        font-size: 0.58rem;
    }

    .empty-state {
        min-height: 156px;
        padding: 20px 14px;
        border-radius: 15px;
    }

    .library-home-section .empty-state {
        min-height: 122px;
        padding: 14px 9px;
        border-radius: 14px;
    }

    .library-home-section .empty-state p {
        max-width: 18ch;
        font-size: 0.74rem;
    }

    .library-home-section .empty-state .btn {
        min-width: 90px;
        min-height: 28px;
        padding: 7px 9px;
        font-size: 0.64rem;
    }

    .empty-state p {
        max-width: 20ch;
        font-size: 0.84rem;
    }

    .empty-state .btn {
        min-width: 116px;
        padding: 10px 14px;
    }

    .library-sidebar-layout {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 7px;
    }

    .library-sidebar {
        padding: 8px 5px;
        border-radius: 12px;
    }

    .book-chapter-link {
        padding: 6px 4px;
    }

    .book-chapter-label {
        font-size: 0.62rem;
    }

    .library-book-shell {
        padding: 10px;
    }
}

.copy-icon-hint {
    font-size: 0.8em;
    color: var(--text-muted);
}

.profile-save-msg {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9em;
}

.req-badge {
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    padding: 0 5px;
    font-size: 0.8em;
    display: none;
}

.social-panel {
    display: flex;
    flex-direction: column;
    min-height: 640px;
    overflow: hidden;
}

.social-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.social-tab {
    flex: 1;
    text-align: center;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 14px 14px 0 0;
}

.social-tab.active {
    color: var(--highlight);
    background: rgba(197, 169, 106, 0.1);
}

.social-content {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.loading-copy,
.empty-copy {
    color: var(--text-muted);
}

.loading-copy.center {
    text-align: center;
}

.friend-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    border-radius: 12px;
}

.friend-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.friend-item.active {
    background: rgba(197, 169, 106, 0.08);
}

.friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.friend-info {
    flex: 1;
}

.friend-status {
    font-size: 0.8em;
    color: var(--text-muted);
}

.status-online { color: #28a745; }
.status-offline { color: var(--text-muted); }

.chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.chat-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.chat-history-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.chat-scroll-bottom-btn {
    flex-shrink: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9em;
    word-break: break-word;
}

.message.sent {
    align-self: flex-end;
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 2px;
}

.message.received {
    align-self: flex-start;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
    border-bottom-left-radius: 2px;
}

.invite-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
    margin-top: 5px;
}

.invite-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-top: 5px;
}

.chat-input-area,
.search-box,
.admin-actions,
.admin-history-head,
.admin-announcement-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.search-mode-wrap {
    margin-bottom: 15px;
}

.search-mode-label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 0.9em;
}

.search-type-select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    background: var(--theme-input-bg);
    color: var(--theme-text-main);
}

.search-input-inline {
    flex: 1;
    padding: 8px;
}

.friend-request-item,
.admin-announcement-item,
.admin-toggle,
.admin-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.friend-request-item {
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-panel-wide {
    padding: 22px;
}

.admin-user-result {
    color: #888;
}

.admin-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.admin-card {
    padding: 18px;
}

.admin-card h4 {
    margin: 0 0 14px;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.admin-history-head-spaced {
    margin-top: 18px;
}

.admin-title-inline {
    margin: 0;
}

.admin-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    justify-content: space-between;
}

.admin-toggle-spaced {
    margin-top: 8px;
}

.admin-toggle input {
    width: 16px;
    height: 16px;
}

.admin-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text-color);
}

.admin-toggle-desc,
.admin-announcement-meta {
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.5;
}

.admin-announcement-item {
    padding: 12px;
}

.admin-announcement-title {
    font-weight: 700;
    color: var(--highlight);
}

.admin-announcement-content {
    margin-top: 8px;
    color: var(--text-soft);
    line-height: 1.65;
    white-space: pre-wrap;
}

.admin-ms-review-panel {
    margin-top: 18px;
}

.admin-ms-submission-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.admin-ms-submission-item {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.admin-ms-submission-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.admin-ms-submission-meta {
    font-size: 0.88em;
    color: var(--text-muted);
    line-height: 1.6;
}

.admin-ms-submission-content {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.admin-ms-submission-content .card {
    margin-bottom: 0;
}

.admin-ms-submission-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

.admin-ms-submission-actions textarea {
    flex: 1;
    min-height: 88px;
}

.ms-submit-shell,
.ms-submission-card {
    border-radius: 18px;
}

.ms-review-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ms-review-panel,
.ms-review-detail-card {
    border-radius: 18px;
}

.ms-review-list {
    display: grid;
    gap: 10px;
}

.ms-review-list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 14px;
    text-align: left;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-color);
}

.ms-review-list-item.is-active {
    border-color: rgba(197, 169, 106, 0.45);
    background: rgba(197, 169, 106, 0.08);
}

.ms-review-list-top {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.ms-review-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.ms-review-meta-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.ms-review-actions {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.ms-review-actions textarea {
    min-height: 110px;
}

.ms-review-action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ms-submit-shell {
    margin-bottom: 18px;
}

.ms-submit-home-shell {
    gap: 18px;
}

.ms-empty-card {
    display: grid;
    gap: 12px;
    place-items: center;
    text-align: center;
    min-height: 220px;
}

.ms-cover-upload {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ms-draft-editor-cover {
    max-width: 220px;
    min-height: 220px;
}

.ms-draft-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.ms-cover-upload-actions {
    display: grid;
    gap: 10px;
    min-width: 220px;
    align-content: start;
}

.ms-work-card {
    position: relative;
}

.ms-work-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ms-work-card-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ms-work-card-status.is-draft {
    background: rgba(129, 156, 198, 0.14);
    border-color: rgba(129, 156, 198, 0.28);
}

.ms-work-card-status.is-pending_review,
.ms-work-card-status.is-pending {
    background: rgba(197, 169, 106, 0.14);
    border-color: rgba(197, 169, 106, 0.34);
    color: var(--highlight);
}

.ms-work-card-status.is-approved {
    background: rgba(98, 176, 125, 0.16);
    border-color: rgba(98, 176, 125, 0.32);
}

.ms-work-card-status.is-rejected {
    background: rgba(201, 111, 111, 0.16);
    border-color: rgba(201, 111, 111, 0.32);
}

.ms-work-card-time,
.ms-work-card-note {
    margin: 0;
}

.ms-work-card-note {
    min-height: 40px;
}

.ms-series-toolbar,
.ms-official-chapter-card,
.ms-official-scene-card {
    border-radius: 18px;
}

.ms-series-toolbar {
    display: grid;
    gap: 12px;
}

.ms-series-toolbar-grid {
    grid-template-columns: minmax(280px, 1.8fr) repeat(4, minmax(140px, 1fr));
    align-items: end;
}

.ms-series-toolbar-grid .form-group {
    margin-bottom: 0;
}

.ms-series-library-card[role="button"] {
    cursor: pointer;
}

.ms-series-library-card .book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ms-official-editor-stack,
.ms-official-scene-stack {
    display: grid;
    gap: 14px;
}

.ms-official-editor-stack {
    margin-top: 14px;
}

.ms-submit-modal-summary {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
}

@media (max-width: 1100px) {
    .profile-container,
    .admin-cards,
    .ms-review-layout {
        grid-template-columns: 1fr;
    }

    .ms-series-toolbar-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .profile-shell {
        gap: 14px;
    }

    .profile-card,
    .social-content,
    .admin-panel-wide {
        padding: 18px;
    }

    .profile-container,
    .admin-cards {
        gap: 14px;
    }

    .admin-ms-submission-head,
    .admin-ms-submission-actions,
    .ms-review-action-buttons,
    .ms-cover-upload {
        flex-direction: column;
    }

    .ms-cover-upload-actions,
    .ms-draft-editor-cover {
        width: 100%;
        max-width: none;
    }


    .avatar-section {
        margin-bottom: 16px;
    }

    .avatar-img {
        width: 96px;
        height: 96px;
    }

    .social-panel {
        min-height: 0;
    }

    .social-tabs {
        gap: 6px;
        padding: 10px 10px 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .social-tabs::-webkit-scrollbar {
        display: none;
    }

    .social-tab {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 10px 14px;
        white-space: nowrap;
    }

    .chat-header {
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .chat-history-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-scroll-bottom-btn {
        width: 100%;
    }

    .chat-input-area,
    .search-box,
    .friend-request-item,
    .admin-history-head,
    .admin-announcement-head {
        align-items: stretch;
    }

    .chat-input-area .btn,
    .search-box .btn {
        width: 100%;
    }

    .chat-input {
        min-width: 0;
    }

    .friend-item,
    .friend-request-item {
        gap: 12px;
    }

    .friend-item {
        align-items: flex-start;
    }

    .friend-request-item {
        flex-direction: column;
    }

    .friend-item-main,
    .friend-request-main,
    .search-result-main {
        min-width: 0;
        flex: 1;
    }

    .friend-info,
    .admin-toggle-text {
        min-width: 0;
    }

    .friend-name,
    .search-result-bio,
    .chat-history-hint,
    .admin-announcement-meta,
    .admin-announcement-content {
        overflow-wrap: anywhere;
    }

    .search-result-card {
        gap: 10px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .search-result-card .btn,
    .search-result-card .status-note {
        width: 100%;
    }

    .admin-panel-wide {
        padding: 18px;
    }

    .admin-card {
        padding: 16px;
    }

    .admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .profile-card,
    .social-content,
    .admin-panel-wide,
    .admin-card {
        padding: 16px;
    }

    .social-tab {
        padding: 9px 12px;
        font-size: 0.84rem;
    }

    .friend-item {
        padding: 10px;
    }

    .friend-avatar,
    .search-result-avatar {
        width: 36px;
        height: 36px;
    }

    .chat-messages {
        gap: 8px;
    }

    .message {
        max-width: 92%;
        font-size: 0.88em;
    }

    .chat-input-area,
    .search-box {
        gap: 8px;
    }

    .user-code-wrap {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .user-code {
        min-width: 0;
        flex: 1;
    }
}

[data-theme="light"] .profile-card,
[data-theme="light"] .social-panel,
[data-theme="light"] .admin-panel-wide,
[data-theme="light"] .friend-request-item,
[data-theme="light"] .admin-announcement-item,
[data-theme="light"] .admin-toggle,
[data-theme="light"] .admin-card,
[data-theme="light"] .invite-card {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--theme-card-shadow);
}

[data-theme="light"] .friend-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .friend-item:hover,
[data-theme="light"] .friend-item.active {
    background: rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   AUTH PAGE
   ========================================================================== */

.auth-minimal {
    width: min(440px, 100%);
    margin: 0 auto;
}

.auth-brand-row {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.auth-brand-row .library-brand {
    font-size: 2rem;
}

.auth-panel.auth-card {
    gap: 16px;
    padding: 34px 28px 28px;
}

.auth-submit-btn,
.auth-resend-btn {
    width: 100%;
    justify-content: center;
    font-weight: 700;
}

.auth-submit-btn {
    min-height: 46px;
}

.auth-submit-btn:not(:disabled) {
    background: var(--theme-btn-active-bg);
    color: var(--theme-btn-active-text);
    border-color: var(--theme-btn-active-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.14);
}

.auth-submit-btn:not(:disabled):hover {
    background: color-mix(in srgb, var(--theme-btn-active-bg) 80%, var(--theme-btn-secondary-hover-bg));
}

.auth-submit-btn:disabled {
    box-shadow: none;
}

.auth-resend-btn {
    min-height: 44px;
}

.auth-resend-btn {
    margin-top: 12px;
}

[data-theme="light"] .auth-switch {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(17, 24, 39, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .auth-switch button,
[data-theme="light"] .auth-switch-btn {
    color: var(--theme-btn-secondary-text);
}

[data-theme="light"] .auth-switch button.active,
[data-theme="light"] .auth-switch-btn.active {
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
}

[data-theme="light"] .terms-label {
    background: rgba(248, 250, 252, 0.96);
    border-color: rgba(17, 24, 39, 0.08);
}

[data-theme="light"] .status-message {
    border-color: rgba(220, 38, 38, 0.14);
    background: rgba(254, 242, 242, 0.96);
    color: #b91c1c;
}

.site-footer-compact {
    margin-top: 0;
    padding-bottom: 20px;
    border-top: none;
}

#form-subtitle {
    display: none;
}

/* ==========================================================================
   FINAL POLISH HELPERS
   ========================================================================== */

.library-grid-two-panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

.library-stack-spaced {
    margin-top: 15px;
}

.status-copy-dim {
    color: var(--text-muted);
}

.lobby-library-page .library-page-header {
    align-items: center;
    padding-top: 4px;
}

.lobby-library-page .library-page-title {
    font-size: clamp(2rem, 3vw, 2.6rem);
    letter-spacing: 0.01em;
}

.lobby-library-page .library-inline-actions {
    gap: 10px;
}

.lobby-library-page .library-grid-two-panel {
    align-items: start;
}

.lobby-library-page .library-book-shell {
    background: linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(14, 16, 22, 0.98));
    border-color: rgba(255, 255, 255, 0.07);
}

.lobby-library-page .section-head {
    margin-bottom: 12px;
}

.lobby-library-page .lobby-join {
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.lobby-library-page .lobby-form {
    gap: 14px;
}

.lobby-library-page .lobby-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--highlight);
    font-size: 0.88rem;
    font-weight: 600;
}

.lobby-library-page .lobby-form select,
.lobby-library-page .lobby-form input,
.lobby-library-page .lobby-join input {
    background: linear-gradient(180deg, rgba(28, 32, 44, 0.94), rgba(24, 28, 40, 0.98));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.lobby-library-page .room-list-item {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(23, 26, 34, 0.96), rgba(18, 21, 28, 0.98));
    box-shadow: var(--shadow-md);
}

.lobby-library-page .room-list-item h3 {
    color: var(--highlight);
    font-size: 1.02rem;
    line-height: 1.35;
}

.lobby-library-page .room-meta {
    line-height: 1.6;
}

.lobby-library-page .room-actions .btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.84rem;
}

.lobby-library-page #room-list > .status-copy-dim {
    margin: 0;
    padding: 24px 18px;
    border-radius: 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .lobby-library-page .library-book-shell {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 14px 28px rgba(17, 24, 39, 0.08);
}

[data-theme="light"] .lobby-library-page .lobby-join,
[data-theme="light"] .lobby-library-page .room-list-item {
    background: rgba(248, 250, 252, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lobby-library-page #room-list > .status-copy-dim {
    background: rgba(249, 250, 251, 0.92);
    border-color: rgba(0, 0, 0, 0.1);
    color: #4b5563;
}

[data-theme="light"] .lobby-library-page .lobby-form label {
    color: #6b7280;
}

[data-theme="light"] .lobby-library-page .room-list-item h3 {
    color: #1f2937;
}

[data-theme="light"] .lobby-library-page .room-meta {
    color: #4b5563;
}

[data-theme="light"] .lobby-library-page .lobby-form select,
[data-theme="light"] .lobby-library-page .lobby-form input,
[data-theme="light"] .lobby-library-page .lobby-join input {
    background: rgba(255, 255, 255, 0.96);
    color: #111827;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

@media (max-width: 720px) {
    .library-grid-two-panel {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .lobby-join {
        flex-direction: column;
    }

    .lobby-join .btn,
    .lobby-form > .btn {
        width: 100%;
    }

    .lobby-form {
        gap: 12px;
    }

    .lobby-form label {
        display: block;
        margin-bottom: 6px;
        font-size: 0.9rem;
    }

    .room-list-item {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        border-radius: 16px;
        gap: 10px;
    }

    .room-list-item > div:first-child {
        min-width: 0;
    }

    .room-list-item h3 {
        font-size: 1rem;
        line-height: 1.35;
    }

    .room-meta {
        line-height: 1.55;
        word-break: break-word;
    }

    .room-actions {
        width: 100%;
    }

    .room-actions .btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .lobby-library-page .library-page-title {
        font-size: 1.72rem;
    }

    .lobby-library-page .library-inline-actions {
        gap: 8px;
    }

    .lobby-library-page .lobby-join {
        padding: 8px;
        border-radius: 16px;
    }

    .lobby-library-page .room-list-item {
        padding: 12px;
        border-radius: 16px;
    }

    .lobby-library-page .room-actions .btn {
        min-height: 38px;
        border-radius: 999px;
    }

    .library-page-header {
        gap: 10px;
    }

    .library-page-header .library-inline-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .library-page-header .library-inline-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.82rem;
    }

    .library-grid-two-panel .library-book-shell {
        padding: 16px 14px;
        border-radius: 22px;
    }

    .section-head {
        gap: 8px;
    }

    .section-head .section-title {
        font-size: 1.9rem;
        line-height: 1.12;
        word-break: break-word;
    }

    .lobby-form {
        gap: 10px;
    }

    .lobby-form select,
    .lobby-form input,
    .lobby-join input {
        min-height: 48px;
        font-size: 0.98rem;
        padding-left: 14px;
        padding-right: 14px;
    }

    .lobby-join .btn,
    .lobby-form > .btn {
        min-height: 46px;
        font-size: 0.94rem;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .room-list-item {
        padding: 12px;
        border-radius: 14px;
    }

    .room-access-badge {
        margin-top: 4px;
    }
}

@media (max-width: 390px) {
    .lobby-library-page .library-page-title {
        font-size: 1.56rem;
    }

    .lobby-library-page .room-list-item h3 {
        font-size: 0.94rem;
    }

    .lobby-library-page #room-list > .status-copy-dim {
        padding: 18px 14px;
        border-radius: 16px;
    }

    .library-page-header .library-inline-actions {
        gap: 6px;
    }

    .library-page-header .library-inline-actions .btn {
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.78rem;
    }

    .grid-container,
    .bookshelf-grid,
    .library-compact-grid {
        min-width: 0;
    }

    .grid-container,
    .bookshelf-grid,
    .library-compact-grid,
    .library-grid-two-panel,
    .library-book-shell,
    .lobby-form,
    .room-list-item,
    .section-head {
        min-width: 0;
    }

    .section-head .section-title {
        font-size: 1.72rem;
    }

    .room-meta {
        font-size: 0.8rem;
    }

    .room-actions .btn {
        min-height: 34px;
        font-size: 0.8rem;
    }
}

.form-col-flex {
    flex: 1;
}

.u-flex {
    display: flex;
}

.u-inline-flex {
    display: inline-flex;
}

.u-items-center {
    align-items: center;
}

.u-justify-between {
    justify-content: space-between;
}

.u-justify-end {
    justify-content: flex-end;
}

.u-flex-wrap {
    flex-wrap: wrap;
}

.u-gap-5 {
    gap: 5px;
}

.u-gap-6 {
    gap: 6px;
}

.u-gap-8 {
    gap: 8px;
}

.u-gap-10 {
    gap: 10px;
}

.u-mb-5 {
    margin-bottom: 5px;
}

.u-mb-10 {
    margin-bottom: 10px;
}

.u-mb-20 {
    margin-bottom: 20px;
}

.u-mt-5 {
    margin-top: 5px;
}

.u-mt-8 {
    margin-top: 8px;
}

.u-mt-10 {
    margin-top: 10px;
}

.u-mt-20 {
    margin-top: 20px;
}

.u-overflow-y-auto {
    overflow-y: auto;
}

.u-max-h-200 {
    max-height: 200px;
}

.u-max-h-300 {
    max-height: 300px;
}

.u-no-decoration {
    text-decoration: none;
}

.u-box-border {
    box-sizing: border-box;
}

.u-text-sm {
    font-size: 0.9em;
}

.u-text-xs {
    font-size: 0.8em;
}

.u-font-bold {
    font-weight: 700;
}

.u-uppercase {
    text-transform: uppercase;
}

.status-copy {
    color: var(--text-muted);
}

.status-copy-soft {
    color: var(--text-soft);
}

.status-copy-error {
    color: var(--danger);
}

.status-copy-sm {
    font-size: 0.9em;
}

.status-copy-xs {
    font-size: 0.8em;
}

.status-copy-padded {
    padding: 20px;
}

.status-note {
    color: var(--text-muted);
    font-size: 0.9em;
}

.status-note-success {
    color: var(--accent-color);
}

.status-note-warning {
    color: #d0a25c;
}

.status-note-error {
    color: var(--danger);
}

.announcement-banner-hidden,
.donation-status-hidden {
    display: none;
}

.toolbar-card-spaced {
    margin-bottom: 20px;
}

.page-copy {
    color: var(--text-muted);
    line-height: 1.7;
}

.page-copy-soft {
    color: var(--text-soft);
    line-height: 1.7;
}

.modal-copy {
    color: var(--text-muted);
    font-size: 0.9em;
}

.modal-copy-spaced {
    margin-bottom: 20px;
}

.modal-content-720 {
    max-width: 720px;
}

.modal-content-500 {
    max-width: 500px;
}

.modal-scroll-300 {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.modal-scroll-200 {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.modal-summary-card {
    margin: 15px 0;
    padding: 15px;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: 12px;
    color: var(--text-soft);
}

.modal-summary-card h4 {
    color: var(--accent-color);
}

#sq-rules.is-placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.square-comment-input {
    flex: 1;
    padding: 8px;
}

.search-result-card {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--theme-card-border);
    background: var(--theme-card-bg);
    box-shadow: var(--theme-card-shadow);
}

.search-result-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.search-result-main {
    flex: 1;
}

.search-result-bio {
    margin: 0;
    font-size: 0.8em;
    color: var(--text-muted);
}

.friend-request-main,
.friend-item-main {
    display: flex;
    align-items: center;
}

.friend-item-main {
    cursor: pointer;
}

.friend-name {
    font-weight: 700;
}

.sdk-error-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: var(--theme-bg-gradient);
    color: var(--text-color);
}

.sdk-error-card {
    width: 100%;
    max-width: 420px;
    padding: 28px 24px;
    border-radius: 16px;
    text-align: center;
    box-sizing: border-box;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    box-shadow: var(--theme-card-shadow);
}

.sdk-error-title {
    margin: 0 0 12px;
    font-size: 24px;
}

.sdk-error-message {
    margin: 0 0 16px;
    line-height: 1.7;
    color: var(--text-soft);
}

.sdk-error-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    text-decoration: none;
    font-weight: 700;
    border: 1px solid var(--theme-btn-border);
    box-shadow: var(--theme-btn-shadow);
}

.sdk-error-link:hover {
    background: var(--theme-btn-hover-bg);
}

.skill-entry {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: 10px;
    padding: 8px;
    box-shadow: var(--theme-card-shadow);
}

.skill-entry-row,
.player-item-actions,
.world-info-entry-row {
    display: flex;
    align-items: center;
}

.skill-entry-row,
.world-info-entry-row {
    gap: 10px;
    margin-bottom: 5px;
}

.skill-entry-name {
    flex: 1;
}

.skill-entry-desc {
    width: 100%;
    font-size: 0.8em;
}

.skill-entry-remove {
    width: 100%;
    margin-top: 5px;
}

.inv-entry {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.inv-name {
    flex: 1 1 150px;
}

.inv-quantity {
    flex: 0 0 88px;
    min-width: 88px;
}

.inv-desc {
    flex: 2 1 220px;
}

.icon-btn-plain {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    flex: 0 0 auto;
}

.item-quantity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(90, 138, 255, 0.14);
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .inv-entry {
        align-items: stretch;
    }

    .inv-name,
    .inv-desc {
        flex: 1 1 100%;
    }

    .inv-quantity {
        flex: 0 0 96px;
        min-width: 96px;
    }

    .inv-entry .icon-btn-plain {
        align-self: center;
        margin-left: auto;
    }
}

.world-info-source {
    margin: 0 0 8px;
    color: var(--accent-color);
}

.archive-slot-card-button {
    width: 100%;
    text-align: left;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.archive-slot-card-button.selected {
    border-color: rgba(197, 169, 106, 0.42);
    background: rgba(197, 169, 106, 0.09);
    box-shadow: 0 0 0 1px rgba(197, 169, 106, 0.12), 0 16px 30px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.archive-slot-card-button.selected .book-title {
    color: var(--highlight);
}

.adventure-slot-summary-card {
    min-height: 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.archive-slot-summary-note {
    margin-top: 10px;
    color: var(--text-soft);
}

.archive-slot-summary-note-subtle {
    margin-top: 8px;
    color: var(--text-muted);
}

.play-empty-state {
    min-height: min(320px, calc(100dvh - 240px));
    margin: 18px;
    padding: 26px 20px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(22, 24, 30, 0.98), rgba(16, 18, 24, 0.96));
    box-shadow: var(--shadow-md);
}

.play-empty-state h3 {
    margin: 0;
    color: var(--highlight);
}

.play-empty-state p {
    max-width: 24ch;
}

.template-card-copy {
    font-size: 0.9em;
    color: var(--text-muted);
}

.player-item-actions {
    gap: 6px;
}

.btn-mini {
    min-height: 24px;
    padding: 2px 6px;
    font-size: 0.75em;
}

.status-meta-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.85em;
    margin-bottom: 6px;
}

.system-hint-text {
    color: var(--text-muted);
    font-size: 0.8em;
}

.system-hint-text.is-italic {
    font-style: italic;
}

.system-note-positive {
    color: var(--accent-color);
}

.system-note-negative {
    color: var(--danger);
}

.check-result-critical {
    color: #f0d27a;
    font-weight: 700;
}

.check-result-fumble {
    color: var(--danger);
    font-weight: 700;
}

.check-result-success {
    color: #7da7ff;
    font-weight: 700;
}

.check-result-failure {
    color: var(--text-muted);
    font-weight: 700;
}

.narration-block {
    border-left: 3px solid var(--theme-btn-active-border);
    padding-left: 10px;
    color: var(--text-soft);
    font-family: Georgia, serif;
}

.narration-block.check-result-critical {
    border-left-color: #f0d27a;
}

.narration-block.check-result-fumble {
    border-left-color: var(--danger);
}

.narration-block.check-result-success {
    border-left-color: #7da7ff;
}

.narration-block.check-result-failure {
    border-left-color: var(--text-muted);
}

.story-divider {
    border-color: var(--theme-card-border);
    margin: 10px 0;
}

.char-log-item {
    border-bottom: 1px solid var(--theme-card-border);
    padding: 5px 0;
    font-size: 0.9em;
    color: var(--text-soft);
}

.char-log-world {
    color: var(--accent-color);
}

.char-log-content {
    margin-top: 2px;
}

.template-card-grid,
.skills-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.skills-card-grid {
    margin-bottom: 10px;
}

.status-inline-loading {
    display: none;
    color: var(--accent-color);
    font-size: 0.9em;
    margin-top: 10px;
}

.status-inline-block {
    display: none;
}

.avatar-preview-hidden {
    display: none;
}

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

.textarea-fixed-md {
    height: 120px;
}

.textarea-fixed-lg {
    height: 150px;
}

.btn-top-gap {
    margin-top: 10px;
}

.form-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.attr-label-small {
    font-size: 0.8em;
}

.inventory-stack {
    margin-bottom: 10px;
}

.adventure-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.adventure-card-copy {
    margin-top: 10px;
    color: var(--text-soft);
}

.adventure-card-copy-pre {
    margin-top: 10px;
    color: var(--text-soft);
    white-space: pre-wrap;
    line-height: 1.8;
}

.adventure-card-copy-pre.tall {
    min-height: 80px;
}

.adventure-scene-card {
    white-space: pre-wrap;
    line-height: 1.8;
    color: var(--text-soft);
}

.btn,
.btn:hover,
.btn:focus-visible,
.support-method-tabs .btn.active,
.support-method-tabs .btn,
.page-actions .btn.active,
.page-actions .btn[aria-pressed="true"],
.header-right .btn.active,
.header-right .btn[aria-current="page"] {
    color: var(--theme-btn-text);
}

.btn {
    background: var(--theme-btn-bg) !important;
    border-color: var(--theme-btn-border) !important;
    box-shadow: var(--theme-btn-shadow) !important;
}

.btn:hover {
    background: var(--theme-btn-hover-bg) !important;
}

.btn-secondary,
.btn-ghost {
    background: var(--theme-btn-secondary-bg) !important;
    color: var(--theme-btn-secondary-text) !important;
    border-color: var(--theme-btn-secondary-border) !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
    background: var(--theme-btn-secondary-hover-bg) !important;
}

.page-actions .btn.active,
.page-actions .btn[aria-pressed="true"],
.header-right .btn.active,
.header-right .btn[aria-current="page"] {
    background: var(--theme-btn-active-bg) !important;
    border-color: var(--theme-btn-active-border) !important;
    color: var(--theme-btn-active-text) !important;
}

.adventure-opening-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.adventure-opening-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.textarea-fixed-xl {
    height: 220px;
}

.npc-persona-card {
    margin-top: 10px;
}

.npc-persona-details {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}

.npc-persona-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
}

.npc-persona-summary-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.npc-persona-summary-text {
    font-size: 0.95em;
}

.npc-persona-summary-hint {
    font-size: 0.85em;
}

.npc-persona-body {
    padding: 0 12px 12px;
}

.npc-persona-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.npc-persona-grid,
.scene-script-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.npc-persona-relationship {
    margin-top: 10px;
}

.scene-script-entry {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #1a1a1d;
}

.scene-script-head {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.scene-script-title {
    flex: 1;
}

.scene-script-meta-grid {
    margin-top: 10px;
}

.scene-script-key-npcs-selector {
    margin-top: 12px;
}

.scene-script-key-npcs-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.scene-script-key-npcs-hint {
    font-size: 0.9em;
    margin-bottom: 8px;
}

.scene-script-key-npcs-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.scene-script-key-npc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--theme-card-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.scene-script-key-npcs-empty {
    display: none;
    font-size: 0.9em;
}

.attr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.attr-item {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-template-summary {
    margin-top: 12px;
    padding: 14px 16px;
}

.ms-template-summary .helper-text:last-child {
    margin-bottom: 0;
}

.ms-rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ms-rule-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ms-rules-warning {
    margin-bottom: 14px;
    border-color: rgba(196, 94, 94, 0.35);
    background: rgba(196, 94, 94, 0.08);
}

.ms-rules-warning p {
    margin: 0;
}

.ms-rules-warning p + p {
    margin-top: 6px;
}

.ms-attr-meta {
    margin-top: 6px;
}

.custom-attr-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 12px;
}

.custom-attr-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 2fr) minmax(120px, 0.8fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.custom-attr-entry.is-dragging {
    opacity: 0.7;
    transform: scale(1.01);
    border-color: rgba(197, 169, 106, 0.45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.ms-mode-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ms-mode-card {
    min-height: 220px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    cursor: pointer;
}

.ms-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.ms-cabinet-quick-grid {
    margin-top: 18px;
}

.ms-cabinet-entry-link {
    min-width: 0;
    gap: 10px;
    min-height: 150px;
    justify-content: space-between;
}

.ms-cabinet-entry-link .section-head {
    align-items: flex-start;
    gap: 12px;
}

.ms-cabinet-entry-link strong {
    display: block;
    font-size: 1.08rem;
}

.ms-cabinet-entry-link .helper-text {
    line-height: 1.7;
}

.ms-cabinet-track-grid,
.ms-cabinet-record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 18px;
    align-items: stretch;
}

.ms-cabinet-track-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    height: 100%;
    margin-bottom: 0;
    box-shadow: none;
}

#ms-cabinet-collection-page .ms-section-card,
#ms-cabinet-codex-page .ms-section-card {
    overflow: hidden;
}

.ms-cabinet-track-grid > .ms-cabinet-track-card,
.ms-cabinet-record-grid > .ms-cabinet-track-card {
    margin-bottom: 0;
    box-shadow: none;
}

.ms-cabinet-example-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-cabinet-example-block strong {
    color: var(--text-main);
}

.ms-cabinet-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ms-summary-card,
.ms-series-card,
.ms-settlement-card,
.ms-task-card,
.ms-chapter-card,
.ms-section-card {
    border-radius: 18px;
}

.ms-lobby-main-cards {
    margin-top: 4px;
}

.ms-entry-card-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.ms-lobby-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 18px;
    align-items: start;
}

.ms-lobby-console-card {
    margin-top: 18px;
    padding: 22px;
    border-radius: 22px;
    overflow: hidden;
    box-sizing: border-box;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)),
        linear-gradient(135deg, rgba(12, 17, 28, 0.98), rgba(10, 13, 22, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
}

.ms-lobby-hero-card {
    overflow: hidden;
    padding: 28px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(197, 169, 106, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(15, 20, 33, 0.96), rgba(11, 14, 24, 0.98));
    border: 1px solid rgba(197, 169, 106, 0.14);
    box-shadow: var(--shadow-lg);
}

.ms-lobby-hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
    gap: 24px;
    align-items: stretch;
}

.ms-lobby-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.ms-lobby-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--highlight);
}

.ms-lobby-hero-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ms-lobby-avatar-shell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-lobby-avatar {
    width: 112px;
    height: 112px;
    border-radius: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ms-lobby-avatar-shell .ms-lobby-avatar {
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md);
}

.ms-lobby-side-stats {
    display: grid;
    gap: 12px;
}

.ms-lobby-side-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-lobby-side-stats strong {
    color: var(--text-main);
}

.ms-lobby-side-stats span {
    color: var(--text-soft);
    line-height: 1.6;
}

.ms-lobby-console-onboarding,
.ms-lobby-console-grid {
    display: grid;
    gap: 16px;
}

.ms-lobby-console-onboarding {
    margin: 16px 0 18px;
}

.ms-lobby-console-statusbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 18px;
}

.ms-lobby-console-statusbar > div,
.ms-lobby-console-panel {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-lobby-console-statusbar > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ms-lobby-console-statusbar strong {
    color: var(--text-main);
}

.ms-lobby-console-statusbar span {
    color: var(--text-soft);
    line-height: 1.5;
}

.ms-lobby-console-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    align-items: stretch;
}

.ms-lobby-console-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ms-lobby-console-panel .library-inline-actions {
    margin-top: auto;
}

.ms-lobby-console-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ms-lobby-console-panel-head > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ms-lobby-console-panel-head strong {
    font-size: 1.05rem;
    color: var(--text-main);
}

.ms-lobby-console-panel-repair.is-warning {
    border-color: rgba(197, 169, 106, 0.18);
    background: linear-gradient(180deg, rgba(197, 169, 106, 0.06), rgba(255, 255, 255, 0.02));
}

.ms-lobby-dispatch-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ms-lobby-dispatch-main strong {
    font-size: 1.05rem;
}

.ms-lobby-actions {
    gap: 10px;
}

.ms-lobby-btn {
    min-width: 112px;
    box-shadow: none;
    min-height: 38px;
    padding: 0 14px;
}

.ms-final-warning {
    margin-right: auto;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(197, 169, 106, 0.08);
    border: 1px solid rgba(197, 169, 106, 0.18);
}

.ms-final-warning strong {
    color: var(--highlight);
}

.ms-final-warning span {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
}

.ms-character-hero,
.ms-series-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr);
    gap: 16px;
    align-items: stretch;
}

.ms-character-hero-main,
.ms-series-hero-main {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-character-hero-avatar-wrap {
    flex-shrink: 0;
}

.ms-character-hero-avatar {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md);
    display: block;
}

.ms-character-hero-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.88);
    color: var(--highlight);
    font-size: 2rem;
    font-weight: 700;
}

.ms-character-hero-copy {
    min-width: 0;
}

.ms-character-hero-copy .section-title,
.ms-series-hero-main .section-title {
    margin-bottom: 6px;
}

.ms-profile-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px 0 0;
}

.ms-profile-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.ms-profile-side {
    min-width: 220px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-subtle-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.ms-character-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ms-pill-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-soft);
    font-size: 0.82rem;
}

.ms-character-hero-side,
.ms-series-hero-side {
    display: grid;
    gap: 12px;
}

.ms-hero-side-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 92px;
}

.ms-hero-side-card strong {
    color: var(--highlight);
}

.ms-hero-side-card span,
.ms-summary-note,
.ms-series-summary {
    color: var(--text-soft);
    line-height: 1.7;
}

.ms-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 16px 0 0;
}

.ms-stat-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.ms-stat-grid > div,
.ms-series-meta > div {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-stat-grid strong,
.ms-task-head strong,
.ms-series-meta strong {
    display: block;
    margin-bottom: 4px;
}

.ms-series-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ms-series-browser {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ms-series-library-card {
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    min-height: 100%;
    text-align: left;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ms-series-library-card.is-active {
    border-color: rgba(197, 169, 106, 0.46);
    box-shadow: 0 0 0 1px rgba(197, 169, 106, 0.12), 0 16px 32px rgba(0, 0, 0, 0.26);
}

.ms-series-library-card-compact {
    min-height: 150px;
    gap: 16px;
    justify-content: space-between;
}

.ms-series-library-meta {
    gap: 8px;
}

.ms-series-difficulty {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
}

.ms-series-difficulty.is-easy {
    background: rgba(104, 196, 142, 0.14);
    color: #87d9a3;
}

.ms-series-difficulty.is-medium {
    background: rgba(197, 169, 106, 0.14);
    color: #e0c079;
}

.ms-series-difficulty.is-hard {
    background: rgba(224, 105, 105, 0.14);
    color: #f29a9a;
}

.ms-series-detail-panel {
    gap: 18px;
}

.ms-series-modal-content {
    max-width: 960px;
}

.ms-series-detail-copy {
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-series-detail-copy p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.ms-series-chapter-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ms-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.ms-quick-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: inherit;
    text-decoration: none;
}

.ms-quick-link:hover {
    border-color: rgba(197, 169, 106, 0.28);
}

.ms-list-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ms-list-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-list-card-main {
    min-width: 0;
}

.ms-list-card-main h4 {
    margin: 0 0 6px;
}

.ms-list-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.ms-plain-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-plain-row strong,
.ms-plain-row span {
    min-width: 0;
}

.ms-plain-row strong {
    flex: 0 1 88px;
    overflow-wrap: anywhere;
}

.ms-plain-row span {
    flex: 1 1 auto;
    text-align: right;
    overflow-wrap: anywhere;
}

.ms-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

@media (min-width: 721px) and (max-width: 1280px) {
    .library-global-bar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .library-global-left {
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .library-mini-nav,
    .library-tool-actions {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    .library-mini-nav::-webkit-scrollbar,
    .library-tool-actions::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 1200px) {
    .ms-cabinet-track-grid,
    .ms-cabinet-record-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ms-cabinet-track-card .section-head,
    .ms-cabinet-entry-link .section-head,
    #ms-cabinet-collection-page .ms-section-card > .section-head,
    #ms-cabinet-codex-page .ms-section-card > .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ms-plain-row {
        flex-direction: column;
        gap: 8px;
    }

    .ms-plain-row span {
        text-align: left;
    }
}

@media (max-width: 900px) {
    .ms-cabinet-track-grid,
    .ms-cabinet-record-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ms-cabinet-quick-grid,
    .ms-detail-grid {
        grid-template-columns: 1fr;
    }

    .ms-cabinet-entry-link .section-head,
    .ms-cabinet-track-card .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ms-plain-row {
        flex-direction: column;
        gap: 8px;
    }

    .ms-plain-row span {
        text-align: left;
    }
}

.ms-detail-block {
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-detail-block strong {
    display: block;
    margin-bottom: 8px;
}

.ms-detail-block p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.ms-growth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.ms-growth-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.ms-growth-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ms-growth-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ms-growth-list-card {
    align-items: center;
}

.ms-growth-action-row {
    gap: 10px;
}

.ms-growth-action {
    min-width: 108px;
}

.ms-series-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.ms-chapter-card {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-chapter-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.ms-chapter-head h4 {
    margin: 0 0 6px;
}

.ms-scene-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.ms-scene-entry {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.ms-scene-entry-kicker {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.ms-scene-entry-title {
    font-size: 0.95rem;
    color: var(--text-color);
}

@media (max-width: 900px) {
    .ms-character-hero,
    .ms-series-hero {
        grid-template-columns: 1fr;
    }

    .ms-character-hero-main,
    .ms-series-hero-main {
        align-items: flex-start;
    }

    .ms-final-warning {
        max-width: none;
        width: 100%;
        order: -1;
    }

    .ms-profile-row,
    .ms-list-card {
        flex-direction: column;
    }

    .ms-growth-card-head,
    .ms-growth-card-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .ms-profile-side,
    .ms-list-card-side {
        min-width: 0;
        align-items: flex-start;
        white-space: normal;
    }

    .ms-lobby-overview-grid {
        grid-template-columns: 1fr;
    }

    .ms-lobby-console-statusbar,
    .ms-lobby-console-grid,
    .ms-lobby-hero-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ms-lobby-hero-card {
        padding: 20px;
    }

    .ms-lobby-hero-side {
        padding: 16px;
    }
}

.ms-chat-msg {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.ms-chat-role {
    font-size: 0.85em;
    opacity: 0.8;
    margin-bottom: 6px;
}

.ms-chat-user {
    border-color: rgba(197, 169, 106, 0.28);
}

.ms-chat-assistant {
    border-color: rgba(125, 160, 255, 0.22);
}

.ms-chat-content {
    white-space: pre-wrap;
    line-height: 1.8;
}

.ms-task-card {
    margin-bottom: 10px;
}

.ms-task-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.ms-task-status {
    text-transform: capitalize;
}

.custom-attr-entry.drag-over-top {
    box-shadow: inset 0 3px 0 rgba(197, 169, 106, 0.78);
}

.custom-attr-entry.drag-over-bottom {
    box-shadow: inset 0 -3px 0 rgba(197, 169, 106, 0.78);
}

.custom-attr-drag-handle {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0 8px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: grab;
    font-size: 1.05rem;
    letter-spacing: 1px;
    touch-action: none;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.custom-attr-drag-handle:hover {
    background: rgba(197, 169, 106, 0.08);
    border-color: rgba(197, 169, 106, 0.3);
    color: var(--accent-color);
}

.custom-attr-drag-handle:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.skill-item input[type="text"] {
    flex: 2;
}

.skill-item input[type="number"] {
    flex: 1;
}

@media (max-width: 720px) {
    .attr-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .world-rule-detail-grid {
        grid-template-columns: 1fr;
    }

    .custom-attr-entry {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .game-grid > .panel {
        display: none !important;
    }

    .game-grid > .panel.active-mobile-panel {
        display: flex !important;
        position: absolute;
        inset: 0 0 calc(54px + env(safe-area-inset-bottom, 0px)) 0;
        z-index: 2;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .play-library-shell {
        position: relative;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .play-book-layout {
        position: relative;
        z-index: 1;
        height: calc(100dvh - 54px);
        min-height: 0;
        padding: 12px 12px 0;
        overflow: hidden;
    }

    .left-panel.active-mobile-panel,
    .right-panel.active-mobile-panel {
        background: rgba(14, 15, 19, 0.985) !important;
        opacity: 1;
    }

    #panel-chat.active-mobile-panel,
    .left-panel.active-mobile-panel,
    .right-panel.active-mobile-panel,
    .play-stage-shell,
    .panel-content,
    .left-panel-content,
    .right-panel-content,
    .left-panel-scroll,
    .right-panel-scroll,
    .chat-log {
        min-height: 0;
    }

    #panel-chat.active-mobile-panel .play-stage-shell {
        height: 100%;
        overflow: hidden;
    }

    #panel-chat.active-mobile-panel .chat-log {
        padding-bottom: 18px;
    }

    #panel-chat.active-mobile-panel .action-bar {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin-top: auto;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .left-panel.active-mobile-panel .panel-content,
    .right-panel.active-mobile-panel .panel-content {
        overflow-y: auto;
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }

    .left-panel.active-mobile-panel .left-panel-scroll,
    .right-panel.active-mobile-panel .right-panel-scroll {
        padding-bottom: 14px;
    }

    .right-tab-content {
        display: none;
    }

    .right-tab-content.is-active-tab {
        display: block;
    }

    .header-right {
        width: auto;
        max-width: 100%;
        flex: 1 1 auto;
        padding: 4px 6px;
        gap: 6px;
        scroll-snap-type: none;
        overscroll-behavior-x: contain;
    }

    .header-right .icon-btn {
        width: 30px;
        height: 30px;
        margin-left: 0;
        border-radius: 14px;
        flex: 0 0 auto;
    }

    .header-right .btn {
        scroll-snap-align: none;
    }

    #archive-modal .modal-content {
        width: min(96vw, 760px);
        max-width: none;
        max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
        margin: 8px auto;
        padding: 14px 10px 12px;
        overflow-y: auto;
    }

    #archive-modal .modal-content h2 {
        margin-bottom: 12px;
        padding-bottom: 8px;
        font-size: 1.35rem;
    }

    .archive-bookshelf {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .archive-slot-card {
        padding: 10px !important;
        gap: 8px;
        border-radius: 14px;
        min-height: 0;
    }

    .archive-slot-card .book-cover {
        aspect-ratio: 3 / 4;
        border-radius: 14px;
    }

    .archive-slot-card .book-cover-label {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .archive-slot-card .book-title {
        font-size: 0.84rem;
        line-height: 1.28;
    }

    .archive-slot-card .book-meta {
        font-size: 0.64rem;
        line-height: 1.45;
    }

    .archive-slot-card .book-desc {
        font-size: 0.72rem;
        line-height: 1.45;
        -webkit-line-clamp: 4;
    }

    .archive-slot-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .archive-slot-actions .btn {
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 0 6px;
        font-size: 0.72rem;
    }
}

@media (max-width: 768px) {
    .game-header {
        align-items: stretch;
    }

    .header-left {
        min-width: 82px;
    }

    .header-right {
        min-width: 0;
    }

    .left-panel,
    .right-panel {
        overflow-y: auto;
    }

    .play-book-layout {
        height: calc(100dvh - 54px);
    }

    .left-panel .panel-content,
    .right-panel .panel-content,
    .left-panel-content,
    .right-panel-content {
        overflow: visible;
    }

    [data-sidebar-key="create"] .library-book-shell,
    [data-sidebar-key="character"] .library-book-shell,
    [data-sidebar-key="adventure-setup"] .library-book-shell {
        padding: 14px;
        border-radius: 20px;
    }

    [data-sidebar-key="create"] .form-section,
    [data-sidebar-key="character"] .form-section,
    [data-sidebar-key="adventure-setup"] .form-section {
        padding: 16px;
        gap: 14px;
        border-radius: 18px;
    }

    [data-sidebar-key="adventure-setup"] #adventure-setup-slots.archive-bookshelf {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #panel-chat.active-mobile-panel .action-bar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .left-panel.active-mobile-panel .panel-content,
    .right-panel.active-mobile-panel .panel-content {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    .adventure-slot-summary-card {
        padding: 12px 14px;
        border-radius: 16px;
    }

    .play-empty-state {
        min-height: min(260px, calc(100dvh - 250px));
        margin: 12px;
        padding: 20px 16px;
        border-radius: 18px;
    }

    [data-sidebar-key="character"] .attr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 560px) {
    .archive-bookshelf {
        gap: 6px !important;
    }

    .archive-slot-card {
        padding: 8px !important;
    }

    .archive-slot-card .book-cover {
        aspect-ratio: 5 / 6;
    }

    .archive-slot-card .book-title {
        font-size: 0.76rem;
    }

    .archive-slot-card .book-meta,
    .archive-slot-card .book-desc {
        font-size: 0.64rem;
    }

    .adventure-slot-summary-card {
        padding: 10px 12px;
    }

    .play-empty-state {
        margin: 10px;
        padding: 18px 14px;
    }

    .archive-slot-actions {
        grid-template-columns: 1fr;
    }

    .archive-slot-actions .btn {
        height: 30px;
        font-size: 0.68rem;
    }

    .library-main-cards {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .library-main-cards::-webkit-scrollbar {
        display: none;
    }

    .library-entry-card,
    .library-main-cards .library-entry-card {
        flex: 0 0 96px;
        min-width: 96px;
        min-height: 68px;
        padding: 8px 6px;
        border-radius: 12px;
        scroll-snap-align: start;
    }

    .library-entry-card strong,
    .library-main-cards .library-entry-card strong {
        font-size: 0.82rem;
    }

    [data-sidebar-key="create"] .library-book-shell,
    [data-sidebar-key="character"] .library-book-shell,
    [data-sidebar-key="adventure-setup"] .library-book-shell {
        padding: 12px;
    }

    [data-sidebar-key="create"] .form-section,
    [data-sidebar-key="character"] .form-section,
    [data-sidebar-key="adventure-setup"] .form-section {
        padding: 14px;
    }

    .flow-editor-page .library-page-header {
        align-items: center;
        gap: 8px;
    }

    .flow-editor-page .library-page-title {
        font-size: 1.52rem;
        line-height: 1.12;
    }

    .flow-editor-page .library-page-header .library-inline-actions {
        width: auto;
        display: inline-flex;
        grid-template-columns: none;
        gap: 6px;
        margin-top: 0;
        justify-content: flex-end;
    }

    .flow-editor-page .library-page-header .library-inline-actions .btn {
        width: auto;
        min-width: 0;
        min-height: 32px;
        height: 32px;
        padding: 0 10px;
        font-size: 0.74rem;
        font-weight: 600;
        border-radius: 999px;
    }

    .flow-editor-page .library-page-header .library-drawer-open-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0 12px;
    }

    .flow-editor-page .library-page-header .library-drawer-open-btn::before {
        content: "≡";
        font-size: 0.9rem;
        line-height: 1;
    }

    .flow-editor-page .library-sidebar-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        position: relative;
    }

    .flow-editor-page .library-sidebar {
        position: fixed;
        top: 88px;
        left: 12px;
        bottom: 12px;
        width: min(248px, calc(100vw - 48px));
        padding: 14px 12px 16px;
        border-radius: 18px;
        gap: 10px;
        overflow-y: auto;
        z-index: 55;
        transform: translateX(calc(-100% - 18px));
        opacity: 0;
        pointer-events: none;
        transition: transform 0.24s ease, opacity 0.2s ease;
        background: rgba(20, 22, 28, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .flow-editor-page .library-sidebar-layout::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(8, 10, 14, 0.56);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 50;
    }

    .flow-editor-page .library-sidebar-layout.is-drawer-open::before {
        opacity: 1;
        pointer-events: auto;
    }

    .flow-editor-page .library-sidebar-layout.is-drawer-open .library-sidebar {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .flow-editor-page .library-sidebar-top {
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .flow-editor-page .library-sidebar-top > div,
    .flow-editor-page .library-sidebar-copy,
    .flow-editor-page .book-chapter-label {
        display: block;
    }

    .flow-editor-page .library-sidebar-layout.is-drawer-open .library-sidebar-title-text,
    .flow-editor-page .library-sidebar-layout.is-drawer-open .library-sidebar-copy,
    .flow-editor-page .library-sidebar-layout.is-drawer-open .book-chapter-label {
        display: block;
    }

    .flow-editor-page .library-sidebar-kicker {
        color: var(--accent-color);
    }

    .flow-editor-page .library-sidebar-title {
        font-size: 0.92rem;
        line-height: 1.2;
        color: var(--highlight);
    }

    .flow-editor-page .library-sidebar-copy {
        font-size: 0.72rem;
        line-height: 1.3;
        color: var(--text-muted);
    }

    .flow-editor-page .library-sidebar-toggle {
        width: 30px;
        height: 30px;
        margin: 0;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
        border-radius: 999px;
        font-size: 1.1rem;
        line-height: 1;
    }

    .flow-editor-page .book-chapter-nav {
        gap: 8px;
        margin-top: 2px;
    }

    .flow-editor-page .book-chapter-link,
    .flow-editor-page .library-sidebar-layout.is-collapsed .book-chapter-link,
    .flow-editor-page .library-sidebar-layout:not(.is-collapsed) .book-chapter-link {
        justify-content: flex-start;
        gap: 8px;
        padding: 10px 10px;
        min-height: 42px;
        border-radius: 12px;
    }

    .flow-editor-page .book-chapter-index,
    .flow-editor-page .library-sidebar-layout.is-collapsed .book-chapter-index,
    .flow-editor-page .library-sidebar-layout:not(.is-collapsed) .book-chapter-index {
        width: 24px;
        height: 24px;
        font-size: 0.68rem;
    }

    .flow-editor-page .book-chapter-label,
    .flow-editor-page .library-sidebar-layout:not(.is-collapsed) .book-chapter-label {
        font-size: 0.72rem;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
        color: inherit;
    }

    .flow-editor-page .book-chapter-link.is-active {
        transform: none;
        background: linear-gradient(180deg, rgba(197, 169, 106, 0.2), rgba(197, 169, 106, 0.12));
        border-color: rgba(197, 169, 106, 0.4);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    }

    .flow-editor-page .library-book-main {
        min-width: 0;
    }

    .flow-editor-page .library-book-shell {
        padding: 8px;
        border-radius: 16px;
    }

    .flow-editor-page .library-book-shell > .card,
    .flow-editor-page .library-book-shell > .form-section {
        padding: 10px;
        border-radius: 14px;
    }

    .flow-editor-page .section-title,
    .flow-editor-page .section-label h3 {
        font-size: 1.14rem;
        line-height: 1.16;
    }

    .flow-editor-page .library-section-bookmark {
        margin-bottom: 8px;
        padding: 6px 10px;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
    }

    .flow-editor-page .helper-text,
    .flow-editor-page .two-step-action-copy,
    .flow-editor-page .draft-workbench-summary-side {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .flow-editor-page .card h3,
    .flow-editor-page .draft-workbench-summary h3 {
        font-size: 1rem;
    }

    .flow-editor-page .toolbar-card,
    .flow-editor-page .draft-workbench-summary,
    .flow-editor-page .draft-workbench-body {
        padding: 10px;
    }

    .flow-editor-page .draft-workbench-summary {
        gap: 10px;
    }

    .flow-editor-page .library-book-main {
        gap: 12px;
    }
}

@media (max-width: 390px) {
    .flow-editor-page .library-page-title {
        font-size: 1.4rem;
    }

    .flow-editor-page .library-page-header .library-inline-actions .btn {
        min-height: 30px;
        height: 30px;
        padding: 0 8px;
        font-size: 0.7rem;
    }

    .flow-editor-page .library-page-header .library-drawer-open-btn {
        padding: 0 10px;
    }

    .flow-editor-page .library-sidebar {
        top: 82px;
        left: 10px;
        bottom: 10px;
        width: min(224px, calc(100vw - 36px));
        padding: 12px 10px 14px;
        border-radius: 16px;
    }

    .flow-editor-page .library-sidebar-toggle {
        width: 28px;
        height: 28px;
    }

    .flow-editor-page .book-chapter-link,
    .flow-editor-page .library-sidebar-layout.is-collapsed .book-chapter-link,
    .flow-editor-page .library-sidebar-layout:not(.is-collapsed) .book-chapter-link {
        min-height: 38px;
        padding: 8px 8px;
        border-radius: 10px;
    }

    .flow-editor-page .book-chapter-index,
    .flow-editor-page .library-sidebar-layout.is-collapsed .book-chapter-index,
    .flow-editor-page .library-sidebar-layout:not(.is-collapsed) .book-chapter-index {
        width: 22px;
        height: 22px;
        font-size: 0.62rem;
    }

    .flow-editor-page .book-chapter-label {
        font-size: 0.68rem;
    }

    .flow-editor-page .library-book-shell {
        padding: 6px;
    }

    .flow-editor-page .library-book-shell > .card,
    .flow-editor-page .library-book-shell > .form-section {
        padding: 8px;
        border-radius: 12px;
    }

    .flow-editor-page .section-title,
    .flow-editor-page .section-label h3 {
        font-size: 1.04rem;
    }

    .flow-editor-page .library-section-bookmark {
        padding: 5px 8px;
        font-size: 0.66rem;
    }

    .flow-editor-page .helper-text,
    .flow-editor-page .two-step-action-copy {
        font-size: 0.72rem;
    }
}

@media (max-width: 560px) {
    [data-theme="light"] .flow-editor-page .library-sidebar {
        background: rgba(255, 255, 255, 0.96);
        border-color: rgba(0, 0, 0, 0.12);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 36px rgba(17, 24, 39, 0.12);
    }

    [data-theme="light"] .flow-editor-page .library-sidebar-top {
        border-bottom-color: rgba(0, 0, 0, 0.08);
    }

    [data-theme="light"] .flow-editor-page .library-sidebar-kicker {
        color: var(--accent-color);
    }

    [data-theme="light"] .flow-editor-page .library-sidebar-title {
        color: #1f2937;
    }

    [data-theme="light"] .flow-editor-page .library-sidebar-copy {
        color: #6b7280;
    }

    [data-theme="light"] .flow-editor-page .library-sidebar-toggle {
        background: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.08);
        color: #1f2937;
    }

    [data-theme="light"] .flow-editor-page .book-chapter-link,
    [data-theme="light"] .flow-editor-page .library-sidebar-layout.is-collapsed .book-chapter-link,
    [data-theme="light"] .flow-editor-page .library-sidebar-layout:not(.is-collapsed) .book-chapter-link {
        background: rgba(0, 0, 0, 0.02);
        border-color: rgba(0, 0, 0, 0.05);
        color: #374151;
    }

    [data-theme="light"] .flow-editor-page .book-chapter-link.is-active {
        background: linear-gradient(180deg, rgba(197, 169, 106, 0.18), rgba(197, 169, 106, 0.1));
        border-color: rgba(197, 169, 106, 0.32);
        box-shadow: 0 10px 20px rgba(17, 24, 39, 0.08);
        color: #1f2937;
    }

    [data-theme="light"] .flow-editor-page .book-chapter-index {
        background: rgba(197, 169, 106, 0.14);
        color: var(--accent-color);
    }

    [data-theme="light"] .flow-editor-page .book-chapter-link.is-active .book-chapter-index {
        background: rgba(197, 169, 106, 0.22);
        color: #8b6f33;
    }
}

@media (max-width: 560px) {
    .profile-library-page .library-page-header,
    .lobby-library-page .library-page-header {
        align-items: center;
        gap: 8px;
    }

    .profile-library-page .library-page-title,
    .lobby-library-page .library-page-title {
        font-size: 1.48rem;
        line-height: 1.12;
    }

    .profile-library-page .library-page-header .library-inline-actions,
    .lobby-library-page .library-page-header .library-inline-actions {
        width: auto;
        display: inline-flex;
        grid-template-columns: none;
        gap: 6px;
        margin-top: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .profile-library-page .library-page-header .library-inline-actions .btn,
    .lobby-library-page .library-page-header .library-inline-actions .btn {
        width: auto;
        min-width: 0;
        min-height: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 0.76rem;
        border-radius: 999px;
    }

    .home-library-page .section-head {
        gap: 8px;
        margin-bottom: 12px;
    }

    .home-library-page .section-head .section-title {
        font-size: 1.36rem;
        line-height: 1.16;
    }

    .home-library-page .section-head .library-inline-actions {
        width: 100%;
        gap: 6px;
        margin-top: 4px;
    }

    .home-library-page .section-head .library-inline-actions .btn,
    .home-library-page .section-head > .btn {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.76rem;
        border-radius: 999px;
    }

    .home-library-page .toolbar-card {
        padding: 12px;
        border-radius: 16px;
    }

    .home-library-page .toolbar-card .btn {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.76rem;
    }

    .profile-library-page .profile-card,
    .profile-library-page .social-content,
    .profile-library-page .admin-panel-wide,
    .profile-library-page .admin-card {
        padding: 14px;
    }

    .profile-library-page .social-tabs {
        gap: 4px;
        padding: 8px 8px 0;
    }

    .profile-library-page .social-tab {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .profile-library-page .chat-input-area {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        align-items: center;
    }

    .profile-library-page .chat-input-area .btn {
        width: auto;
        min-height: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.76rem;
    }

    .profile-library-page .chat-scroll-bottom-btn {
        width: auto;
        align-self: flex-start;
    }

    .profile-library-page .search-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    .profile-library-page .search-box .btn {
        width: auto;
        min-height: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.76rem;
    }

    .lobby-library-page .library-book-shell {
        padding: 14px 12px;
        border-radius: 18px;
    }

    .lobby-library-page .lobby-join {
        padding: 8px;
        border-radius: 14px;
    }

    .lobby-library-page .lobby-form {
        gap: 10px;
    }

    .lobby-library-page .lobby-form select,
    .lobby-library-page .lobby-form input,
    .lobby-library-page .lobby-join input {
        min-height: 42px;
        font-size: 0.9rem;
        padding-left: 12px;
        padding-right: 12px;
    }

    .lobby-library-page .lobby-join .btn,
    .lobby-library-page .lobby-form > .btn {
        min-height: 40px;
        font-size: 0.82rem;
        padding: 0 12px;
    }

    .lobby-library-page .room-list-item {
        padding: 10px 12px;
        border-radius: 14px;
    }

    .lobby-library-page .room-list-item h3 {
        font-size: 0.96rem;
    }

    .lobby-library-page .room-actions .btn {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.78rem;
        border-radius: 999px;
    }
}

@media (max-width: 390px) {
    .profile-library-page .library-page-title,
    .lobby-library-page .library-page-title {
        font-size: 1.34rem;
    }

    .profile-library-page .library-page-header .library-inline-actions .btn,
    .lobby-library-page .library-page-header .library-inline-actions .btn {
        min-height: 30px;
        height: 30px;
        padding: 0 8px;
        font-size: 0.7rem;
    }

    .home-library-page .section-head .section-title {
        font-size: 1.28rem;
    }

    .home-library-page .section-head .library-inline-actions .btn,
    .home-library-page .section-head > .btn {
        min-height: 32px;
        padding: 0 8px;
        font-size: 0.72rem;
    }

    .home-library-page .toolbar-card {
        padding: 10px;
    }

    .home-library-page .toolbar-card .btn {
        min-height: 32px;
        font-size: 0.72rem;
        padding: 0 8px;
    }

    .profile-library-page .social-tab {
        padding: 7px 9px;
        font-size: 0.76rem;
    }

    .profile-library-page .chat-input-area .btn,
    .profile-library-page .search-box .btn {
        min-height: 34px;
        height: 34px;
        padding: 0 8px;
        font-size: 0.72rem;
    }

    .lobby-library-page .library-book-shell {
        padding: 12px 10px;
        border-radius: 16px;
    }

    .lobby-library-page .lobby-form select,
    .lobby-library-page .lobby-form input,
    .lobby-library-page .lobby-join input {
        min-height: 38px;
        font-size: 0.84rem;
        padding-left: 10px;
        padding-right: 10px;
    }

    .lobby-library-page .lobby-join .btn,
    .lobby-library-page .lobby-form > .btn,
    .lobby-library-page .room-actions .btn {
        min-height: 34px;
        font-size: 0.76rem;
    }
}