/* ═══════════════════════════════════════════════ */
/*  RP Platform — Global Styles                    */
/* ═══════════════════════════════════════════════ */

html, body { margin: 0; padding: 0; height: 100%; }
body { background: #1a1a2e; color: #e0e0e0; font-family: 'Segoe UI', system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }

/* Chrome/Edge: suppress focus outlines from Blazor enhanced navigation hydration */
h1, h2, h3, h4, h5, h6, p, div, section, main, header, nav, span, li, ul, ol,
.content, .page-container, .character-card, .card-clickable, .story-card {
    outline: none;
}
*:focus:not(:focus-visible) { outline: none; }

/* Safari fix: prevent blue/grey tap highlights and text selection during navigation */
* { -webkit-tap-highlight-color: transparent; }
a, button, .nav-links a, .sidebar a, .nav-links li, [onclick], [data-enhance-nav] {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #e94560; outline-offset: 2px;
}
/* Re-allow text selection in content areas */
.content, .story-desc, .story-tags-text, .post-content, textarea, input, .form-input,
.char-profile-body, .note-body, .rp-post-body {
    -webkit-user-select: text; user-select: text;
}

/* ── MainLayout.razor ──────────────────────────── */
    .app-layout {
        display: flex;
        height: 100vh;
        font-family: 'Segoe UI', system-ui, sans-serif;
        color: #e0e0e0;
        background: #1a1a2e;
    }
    .sidebar {
        width: 240px;
        background: #16213e;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #0f3460;
        transition: width 0.2s;
        overflow: hidden;
        flex-shrink: 0;
    }
    .sidebar.collapsed { width: 50px; }
    .sidebar-header { padding: 1rem 1.1rem; border-bottom: 1px solid #0f3460; white-space: nowrap; }
    .brand-link {
        display: flex; align-items: center; gap: 0.5rem;
        text-decoration: none; font-weight: 700; font-size: 1.1rem; color: #e94560;
    }
    .brand-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
        background: linear-gradient(135deg, #e94560, #c73750);
        color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: -0.5px;
    }
    .sidebar.collapsed .sidebar-header { padding: 1rem 0; display: flex; justify-content: center; }
    .sidebar.collapsed .brand-link { gap: 0; }
    .nav-links { list-style: none; padding: 0.5rem 0; margin: 0; flex: 1; overflow: hidden; }
    .nav-links li a, .nav-links li .nav-chat-link {
        display: flex; align-items: center; gap: 0.6rem;
        padding: 0.65rem 1.1rem; color: #a0a0b8;
        text-decoration: none; transition: all 0.2s; white-space: nowrap;
        border-left: 3px solid transparent;
    }
    .nav-links li a:hover, .nav-links li a.active,
    .nav-links li .nav-chat-link:hover {
        color: #fff; background: rgba(233, 69, 96, 0.15);
        border-left-color: #e94560;
    }
    .nav-ico {
        flex-shrink: 0; width: 1.2rem; text-align: center;
        font-size: 1rem; font-style: normal;
    }
    .nav-lbl { overflow: hidden; transition: opacity 0.2s; }
    .sidebar.collapsed .nav-lbl { opacity: 0; width: 0; display: none; }
    .sidebar.collapsed .nav-links li a,
    .sidebar.collapsed .nav-links li .nav-chat-link {
        padding: 0.65rem 0; justify-content: center; gap: 0;
        border-left: none;
    }
    .sidebar.collapsed .nav-links li a:hover,
    .sidebar.collapsed .nav-links li a.active,
    .sidebar.collapsed .nav-links li .nav-chat-link:hover {
        border-left: none;
    }
    .sidebar.collapsed .nav-links li a .nav-ico,
    .sidebar.collapsed .nav-links li .nav-chat-link .nav-ico { width: auto; }
    .nav-divider {
        border-bottom: 1px solid #0f3460;
        margin: 0.25rem 1rem;
    }
    .sidebar.collapsed .nav-divider { margin: 0.25rem 0.6rem; }
    .sidebar-footer {
        padding: 1rem 1.1rem; border-top: 1px solid #0f3460; font-size: 0.85rem;
        white-space: nowrap; overflow: hidden;
    }
    .username-row {
        display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;
    }
    .username { color: #8888a0; }
    .footer-actions { display: flex; align-items: center; gap: 0.5rem; }
    .btn-settings {
        font-size: 1rem; color: #8888a0; text-decoration: none;
        padding: 0.1rem 0.3rem; border-radius: 4px; line-height: 1;
    }
    .btn-settings:hover { color: #e94560; }
    .btn-logout {
        background: none; border: 1px solid #e94560; color: #e94560;
        padding: 0.35rem 0.75rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem;
    }
    .btn-logout:hover { background: #e94560; color: #fff; }
    .logout-ico { display: none; }

    /* ── Sidebar footer: collapsed ── */
    .sidebar.collapsed .sidebar-footer {
        padding: 0; border-top: 1px solid #0f3460;
        display: flex; flex-direction: column; align-items: center; gap: 0;
    }
    .sidebar.collapsed .username-row { display: flex; margin-bottom: 0; }
    .sidebar.collapsed .username { display: none; }
    .sidebar.collapsed .username-row .btn-settings {
        display: flex; align-items: center; justify-content: center;
        width: 100%; padding: 0.35rem 0 0.15rem; font-size: 1.1rem;
    }
    .sidebar.collapsed .footer-actions {
        flex-direction: column; align-items: center; gap: 0;
    }
    .sidebar.collapsed .footer-actions form { width: 100%; }
    .sidebar.collapsed .btn-logout {
        border: none; width: 100%;
        display: flex; align-items: center; justify-content: center;
        padding: 0.5rem 0;
    }
    .sidebar.collapsed .logout-label { display: none; }
    .sidebar.collapsed .logout-ico {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; border-radius: 5px;
        background: linear-gradient(135deg, #e94560, #c73750);
        color: #fff;
    }
    .nav-chat-link {
        display: flex; align-items: center; gap: 0.6rem;
        padding: 0.65rem 1.1rem; color: #a0a0b8;
        text-decoration: none; transition: all 0.2s; cursor: pointer;
        white-space: nowrap;
    }
    .nav-chat-link:hover {
        color: #fff; background: rgba(233, 69, 96, 0.15);
        border-left: 3px solid #e94560;
    }
    .nav-chat-badge {
        background: #e94560; color: #fff;
        font-size: 0.65rem; font-weight: 700;
        padding: 0.1rem 0.4rem; border-radius: 10px;
        min-width: 16px; text-align: center;
    }
    .sidebar.collapsed .nav-chat-badge {
        position: absolute; top: 2px; right: 2px; font-size: 0.55rem;
        padding: 0 0.25rem; min-width: 12px;
    }
    .sidebar.collapsed .nav-chat-link { position: relative; }
    .sidebar-toggle {
        background: transparent; color: #555; border: none;
        border-top: 1px solid #0f3460;
        padding: 0.5rem; cursor: pointer; font-size: 0.9rem;
        transition: color 0.2s; width: 100%;
    }
    .sidebar-toggle:hover { color: #ccc; }
    .content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }

/* ── Settings.razor ──────────────────────────────── */
    .settings-page {
        padding: 1.5rem 2rem; overflow-y: auto; height: 100%; max-width: 700px;
    }
    .settings-page h1 { margin: 0 0 1.5rem; font-size: 1.4rem; color: #e94560; }
    .settings-section {
        background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
        padding: 1.25rem; margin-bottom: 1rem;
    }
    .settings-section h2 {
        margin: 0 0 1rem; font-size: 1rem; color: #c0c0d0;
        border-bottom: 1px solid #0f3460; padding-bottom: 0.5rem;
    }
    .settings-option {
        display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer;
        padding: 0.5rem 0;
    }
    .settings-option input[type="checkbox"] {
        accent-color: #e94560; width: 16px; height: 16px; cursor: pointer;
        margin-top: 0.15rem; flex-shrink: 0;
    }
    .settings-option-label {
        display: block; font-size: 0.9rem; color: #e0e0e0; font-weight: 500;
    }
    .settings-option-desc {
        display: block; font-size: 0.78rem; color: #8888a0; margin-top: 0.2rem; line-height: 1.4;
    }
    .settings-field { margin-bottom: 0.85rem; }
    .settings-field-label {
        display: block; font-size: 0.78rem; color: #8888a0;
        margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.03em;
    }
    .settings-field-input {
        width: 100%; padding: 0.45rem 0.65rem; font-size: 0.88rem;
        background: #1a1a2e; border: 1px solid #0f3460; border-radius: 6px;
        color: #e0e0e0; outline: none;
    }
    .settings-field-input:focus { border-color: #e94560; }
    .settings-field-input:disabled { color: #666; cursor: default; }
    .btn-save-profile {
        background: #e94560; color: #fff; border: none; border-radius: 6px;
        padding: 0.45rem 1.2rem; font-size: 0.85rem; font-weight: 600;
        cursor: pointer; margin-top: 0.3rem;
    }
    .btn-save-profile:hover:not(:disabled) { background: #d13350; }
    .btn-save-profile:disabled { opacity: 0.5; cursor: default; }
    .settings-msg { font-size: 0.82rem; color: #69f0ae; margin-left: 0.75rem; }
    .settings-msg-error { color: #e94560; }
    .settings-avatar-preview {
        width: 72px; height: 72px; border-radius: 50%;
        background: #0f3460; display: flex; align-items: center;
        justify-content: center; flex-shrink: 0; overflow: hidden;
    }
    .settings-avatar-preview img {
        width: 100%; height: 100%; object-fit: cover;
    }
    .settings-avatar-initial {
        font-size: 1.8rem; font-weight: 700; color: #fff;
        width: 100%; height: 100%; display: flex;
        align-items: center; justify-content: center;
    }

/* ── CharacterList.razor ──────────────────────────── */
    .characters-page { padding: 1.5rem; overflow-y: auto; height: 100%; }
    .page-header {
        display: flex; justify-content: space-between;
        align-items: center; margin-bottom: 1.5rem;
    }
    .page-header h1 { margin: 0; color: #e0e0e0; }
    .btn-primary {
        padding: 0.5rem 1.25rem; background: #e94560; color: #fff;
        border: none; border-radius: 6px; cursor: pointer; font-weight: 600;
    }
    .character-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1rem;
    }
    .character-card {
        background: #16213e; border-radius: 8px;
        border: 1px solid #0f3460; border-top: 3px solid #6B7280;
        overflow: hidden;
    }
    .card-clickable { padding: 1rem 1.25rem; cursor: pointer; position: relative; }
    .card-clickable:hover { background: rgba(233,69,96,0.04); }
    .card-private-badge {
        position: absolute; top: 0.5rem; right: 0.6rem;
        font-size: 0.65rem; color: #999; background: rgba(255,255,255,0.06);
        border: 1px solid #333; border-radius: 4px;
        padding: 0.1rem 0.4rem; letter-spacing: 0.03em;
    }
    .char-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
    .char-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
    .char-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .char-initial {
        width: 100%; height: 100%; display: flex; align-items: center;
        justify-content: center; font-weight: 700; font-size: 1.2rem; color: #fff;
    }
    .char-name { font-weight: 700; font-size: 1.05rem; }
    .char-short { color: #888; font-size: 0.85rem; }
    .char-meta { font-size: 0.8rem; color: #555; }
    .char-actions {
        display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.75rem;
        border-top: 1px solid #0f3460;
    }
    .btn-small {
        padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 4px;
        border: 1px solid #444; background: transparent; color: #aaa;
        cursor: pointer; text-decoration: none; white-space: nowrap;
    }
    .btn-small:hover { border-color: #888; color: #fff; }
    .btn-danger:hover { border-color: #e94560; color: #e94560; }
    .empty-text {
        color: #555; text-align: center; padding: 2rem;
        font-style: italic; grid-column: 1 / -1;
    }

/* ── Character Purgatory ─────────────────────────────── */
    .purgatory-section {
        margin-top: 2rem; padding-top: 1.5rem;
        border-top: 1px dashed #333;
    }
    .purgatory-toggle {
        background: none; border: none; color: #888; cursor: pointer;
        font-size: 1rem; padding: 0.5rem 0; display: flex; align-items: center; gap: 0.5rem;
    }
    .purgatory-toggle:hover { color: #e94560; }
    .purgatory-arrow { font-size: 0.75rem; width: 1rem; }
    .purgatory-count {
        background: #2a1525; color: #e94560; border-radius: 10px;
        padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 600;
    }
    .purgatory-hint {
        color: #666; font-size: 0.85rem; font-style: italic;
        margin: 0.5rem 0 1rem;
    }
    .purgatory-card { opacity: 0.7; }
    .purgatory-card:hover { opacity: 1; }

/* ── Character Groups ────────────────────────────────── */
    .character-group {
        margin-bottom: 1.25rem; background: rgba(15, 52, 96, 0.2);
        border-radius: 8px; padding: 0.75rem; border: 1px solid transparent;
        transition: border-color 0.15s;
    }
    .character-group:hover { border-color: rgba(15, 52, 96, 0.5); }
    .group-header {
        display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
        padding: 0.4rem 0.25rem; user-select: none; border-radius: 4px;
    }
    .group-header:hover { background: rgba(233, 69, 96, 0.04); }
    .group-toggle { font-size: 0.7rem; color: #888; width: 1rem; text-align: center; }
    .group-name { font-weight: 600; color: #ddd; font-size: 1rem; }
    .group-count {
        background: #0f3460; color: #7db8e8; border-radius: 10px;
        padding: 0.05rem 0.5rem; font-size: 0.72rem; font-weight: 600;
    }
    .group-actions {
        margin-left: auto; display: flex; gap: 0.15rem; opacity: 0;
        transition: opacity 0.15s;
    }
    .group-header:hover .group-actions { opacity: 1; }
    .btn-icon {
        background: none; border: none; cursor: pointer; font-size: 0.8rem;
        padding: 0.15rem 0.35rem; border-radius: 4px; color: #888;
    }
    .btn-icon:hover { background: rgba(255,255,255,0.06); color: #ccc; }
    .btn-icon-danger:hover { color: #e94560; }
    .new-group-row { margin-bottom: 1rem; }
    .inline-input-row { display: flex; gap: 0.5rem; align-items: center; }

/* ── Character Labels ────────────────────────────────── */
    .label-filter-bar {
        display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem;
        align-items: center;
    }
    .label-pill {
        display: inline-flex; align-items: center; padding: 0.2rem 0.65rem;
        border-radius: 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
        border: 1.5px solid var(--pill-color, #888); color: var(--pill-color, #888);
        background: transparent; transition: all 0.15s;
    }
    .label-pill:hover { background: color-mix(in srgb, var(--pill-color) 15%, transparent); }
    .label-pill.active {
        background: var(--pill-color); color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .label-pill-clear {
        --pill-color: #666; font-weight: 400; font-size: 0.72rem;
    }
    .label-pill-small {
        display: inline-flex; align-items: center; padding: 0.1rem 0.45rem;
        border-radius: 8px; font-size: 0.68rem; font-weight: 600;
        border: 1px solid var(--pill-color, #888); color: var(--pill-color, #888);
        background: color-mix(in srgb, var(--pill-color) 10%, transparent);
    }
    .card-labels { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.35rem 0; }

    .label-manager-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .label-manager-row {
        display: flex; gap: 0.5rem; align-items: center;
    }
    .label-manager-row input[type="color"] {
        width: 32px; height: 32px; border: none; border-radius: 4px;
        cursor: pointer; background: none; padding: 0;
    }
    .label-toggle-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .label-toggle-row {
        display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
        padding: 0.3rem 0.25rem; border-radius: 4px;
    }
    .label-toggle-row:hover { background: rgba(233, 69, 96, 0.04); }
    .label-toggle-row input[type="checkbox"] { accent-color: #e94560; }

/* ── Drag-and-drop states ────────────────────────────── */
    .character-card[draggable="true"] { cursor: grab; }
    .character-card[draggable="true"]:active { cursor: grabbing; opacity: 0.6; }
    .group-header[draggable="true"] { cursor: grab; }
    .group-header[draggable="true"]:active { cursor: grabbing; opacity: 0.6; }

/* ── CharacterProfile.razor ──────────────────────────── */
    .profile-page { height: 100%; overflow-y: auto; background: #1a1a2e; }
    .loading { padding: 3rem; text-align: center; color: #555; }

    /* ── Banner ────────────────────────────── */
    .profile-banner {
        min-height: 180px; background-size: cover; background-position: center;
        background-color: #0f1a30; position: relative;
    }
    .profile-back {
        position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
        margin-bottom: 0; background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.15);
        color: #ddd; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .profile-back:hover {
        background: rgba(233,69,96,0.25); color: #fff;
        box-shadow: 0 0 14px rgba(233,69,96,0.25);
    }
    .banner-overlay {
        min-height: 180px; display: flex; align-items: flex-end;
        background: linear-gradient(transparent 20%, rgba(26,26,46,0.95) 100%);
        padding: 1.5rem;
    }
    .profile-header-row {
        display: flex; align-items: flex-end; gap: 1.25rem; width: 100%;
    }
    .avatar-frame {
        width: 110px; height: 110px; border-radius: 12px; overflow: hidden;
        border: 3px solid #6B7280; flex-shrink: 0; background: #16213e;
    }
    .avatar-frame img { width: 100%; height: 100%; object-fit: cover; }
    .avatar-fallback {
        width: 100%; height: 100%; display: flex; align-items: center;
        justify-content: center; font-weight: 700; font-size: 2.5rem; color: #fff;
    }
    .header-info { flex: 1; }
    .header-info h1 {
        margin: 0 0 0.15rem 0; font-size: 1.6rem;
        outline: none; -webkit-tap-highlight-color: transparent;
    }
    .header-info h1::selection { background: transparent; color: inherit; }
    .char-title { color: #999; font-size: 0.95rem; margin-bottom: 0.4rem; }
    .header-meta { display: flex; gap: 1rem; flex-wrap: wrap; }
    .quick-field { font-size: 0.8rem; color: #888; }
    .qf-label { color: #555; }
    .header-actions {
        display: flex; flex-direction: column; align-items: flex-end;
        gap: 0.5rem; flex-shrink: 0;
    }
    .btn-edit {
        padding: 0.4rem 1rem; background: #e94560; color: #fff;
        border-radius: 6px; font-size: 0.85rem; text-decoration: none; font-weight: 600;
    }
    .btn-edit:hover { background: #c73750; }
    .view-count, .created-date { font-size: 0.75rem; color: #555; }

    /* ── Tabs ──────────────────────────────── */
    .tab-bar {
        display: flex; gap: 0; border-bottom: 1px solid #0f3460;
        background: #16213e; padding: 0 1rem;
    }
    .tab {
        padding: 0.65rem 1.25rem; border: none; background: transparent;
        color: #888; font-size: 0.9rem; cursor: pointer;
        border-bottom: 2px solid transparent; transition: all 0.2s;
    }
    .tab:hover { color: #ccc; }
    .tab.active { color: #e94560; border-bottom-color: #e94560; }
    .tab-count { font-size: 0.75rem; color: #666; margin-left: 0.25rem; }

    .tab-content { padding: 1.25rem; }

    /* ── Overview Layout ───────────────────── */
    .overview-layout { display: flex; gap: 1.5rem; }

    /* Info sidebar */
    .info-sidebar {
        width: 220px; flex-shrink: 0; display: flex;
        flex-direction: column; gap: 1rem;
    }
    .sidebar-portrait {
        width: 100%; border-radius: 8px; object-fit: cover; max-height: 300px;
    }
    .info-group {
        background: #16213e; border-radius: 8px; padding: 0.75rem 1rem;
        border: 1px solid #0f3460;
    }
    .info-cat-title {
        margin: 0 0 0.5rem 0; font-size: 0.8rem; text-transform: uppercase;
        color: #e94560; letter-spacing: 0.05em;
    }
    .info-row {
        display: flex; justify-content: space-between; gap: 0.5rem;
        padding: 0.25rem 0; font-size: 0.85rem;
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .info-row:last-child { border-bottom: none; }
    .info-label { color: #666; }
    .info-value { color: #ccc; text-align: right; }
    .story-link {
        display: block; color: #e94560; font-size: 0.85rem;
        padding: 0.2rem 0; text-decoration: none;
    }
    .story-link:hover { text-decoration: underline; }

    /* Profile body — BBCode sections */
    .profile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
    .empty-profile { text-align: center; padding: 3rem; color: #555; }

    .profile-section {
        background: #16213e; border-radius: 8px; padding: 1rem 1.25rem;
        border: 1px solid #0f3460;
    }
    .profile-section.collapsible { padding: 0; }
    .profile-section.collapsible > summary {
        padding: 0.75rem 1.25rem; cursor: pointer; user-select: none;
    }
    .profile-section.collapsible > div { padding: 0 1.25rem 1rem; }

    .section-title {
        margin: 0 0 0.6rem 0; font-size: 1rem; color: #e0e0e0;
        padding-bottom: 0.4rem; border-bottom: 1px solid #0f3460;
    }
    .section-body { line-height: 1.7; color: #c8c8d8; }

    /* ── BBCode rendered content ────────────── */
    .bbcode-content strong { color: #f0f0f0; }
    .bbcode-content em { color: #d0d0e0; }
    .bbcode-content .bb-heading {
        margin: 1rem 0 0.5rem; color: #e94560; border-bottom: 1px solid #0f3460;
        padding-bottom: 0.3rem;
    }
    .bbcode-content .bb-quote {
        margin: 0.75rem 0; padding: 0.75rem 1rem; background: rgba(255,255,255,0.03);
        border-left: 3px solid #e94560; border-radius: 0 6px 6px 0;
    }
    .bbcode-content .bb-quote cite {
        display: block; font-weight: 600; color: #e94560;
        margin-bottom: 0.3rem; font-style: normal; font-size: 0.85rem;
    }
    .bbcode-content .bb-code {
        background: #0a0a1a; padding: 0.75rem 1rem; border-radius: 6px;
        font-family: 'Cascadia Code', 'Consolas', monospace;
        font-size: 0.85rem; overflow-x: auto;
    }
    .bbcode-content .bb-hr {
        border: none; height: 1px; background: #0f3460; margin: 1rem 0;
    }
    .bbcode-content .bb-link { color: #e94560; }
    .bbcode-content .bb-link:hover { text-decoration: underline; }
    .bbcode-content .bb-img {
        max-width: 100%; height: auto; border-radius: 6px; margin: 0.5rem 0;
    }
    .bbcode-content .bb-spoiler,
    .bbcode-content .bb-collapse {
        background: rgba(255,255,255,0.03); border: 1px solid #0f3460;
        border-radius: 6px; margin: 0.5rem 0;
    }
    .bbcode-content .bb-spoiler summary,
    .bbcode-content .bb-collapse summary {
        padding: 0.5rem 0.75rem; cursor: pointer; color: #e94560;
        font-weight: 600; user-select: none;
    }
    .bbcode-content .bb-spoiler > div,
    .bbcode-content .bb-collapse-body { padding: 0.5rem 0.75rem; }
    .bbcode-content .bb-flist-inline {
        max-width: 100%; height: auto; border-radius: 6px; margin: 0.5rem 0;
        display: block;
    }
    .bbcode-content .bb-big {
        font-size: 1.3em; font-weight: 600;
    }
    .bbcode-content .bb-small {
        font-size: 0.8em; opacity: 0.85;
    }
    .bbcode-content .bb-icon,
    .bbcode-content .bb-eicon {
        display: inline; font-style: italic; color: #e94560; cursor: default;
    }
    .bbcode-content .bb-list { margin: 0.5rem 0; padding-left: 1.5rem; }
    .bbcode-content .bb-list li { margin-bottom: 0.25rem; }
    .bbcode-content .bb-table {
        width: 100%; border-collapse: collapse; margin: 0.5rem 0;
    }
    .bbcode-content .bb-table td,
    .bbcode-content .bb-table th {
        padding: 0.4rem 0.6rem; border: 1px solid #0f3460;
    }
    .bbcode-content .bb-table th {
        background: rgba(233, 69, 96, 0.1); color: #e94560; font-weight: 600;
    }

    /* ── Info Tab ───────────────────────────── */
    .info-tab { max-width: 700px; }
    .info-table-section { margin-bottom: 1.5rem; }
    .info-table-section h3 {
        color: #e94560; font-size: 0.9rem; text-transform: uppercase;
        margin: 0 0 0.5rem; letter-spacing: 0.05em;
    }
    .info-table {
        width: 100%; border-collapse: collapse; background: #16213e;
        border-radius: 8px; overflow: hidden;
    }
    .info-table tr { border-bottom: 1px solid #0f3460; }
    .info-table tr:last-child { border-bottom: none; }
    .itl {
        padding: 0.6rem 1rem; color: #888; width: 40%;
        font-size: 0.9rem; background: rgba(0,0,0,0.1);
    }
    .itv { padding: 0.6rem 1rem; color: #d0d0e0; font-size: 0.9rem; }
    .empty-tab { color: #555; font-style: italic; padding: 2rem; text-align: center; }

    /* ── Images Tab ─────────────────────────── */
    .image-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
    .image-card {
        border-radius: 8px; overflow: hidden; cursor: pointer;
        border: 1px solid #0f3460; transition: border-color 0.2s; position: relative;
    }
    .image-card:hover { border-color: #e94560; }
    .image-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
    .image-caption {
        padding: 0.5rem 0.75rem; font-size: 0.8rem; color: #999;
        background: #16213e;
    }
    .nsfw-blur img { filter: blur(20px); }
    .nsfw-overlay {
        position: absolute; inset: 0; display: flex; align-items: center;
        justify-content: center; color: #e94560; font-weight: 600;
        font-size: 0.85rem; background: rgba(0,0,0,0.5);
    }

    /* ── Lightbox ───────────────────────────── */
    .lightbox {
        position: fixed; inset: 0; background: rgba(0,0,0,0.85);
        display: flex; align-items: center; justify-content: center; z-index: 200;
    }
    .lightbox-inner {
        position: relative; max-width: 90vw; max-height: 90vh;
    }
    .lightbox-inner img {
        max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px;
    }
    .lightbox-caption {
        text-align: center; padding: 0.75rem; color: #ccc; font-size: 0.9rem;
    }
    .lightbox-close {
        position: absolute; top: -12px; right: -12px;
        width: 32px; height: 32px; border-radius: 50%;
        background: #e94560; color: #fff; border: none;
        font-size: 1.2rem; cursor: pointer; display: flex;
        align-items: center; justify-content: center;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .overview-layout { flex-direction: column; }
        .info-sidebar { width: 100%; }
    }

/* ── CharacterProfileEdit.razor ──────────────────────────── */
    .editor-page { padding: 0.75rem 1.5rem 1.5rem; overflow-y: auto; height: 100%; }
    .editor-header { margin-bottom: 0.75rem; }
    .editor-header h1 { margin: 0.15rem 0; font-size: 1.3rem; color: #e0e0e0; }

    .msg { padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
    .msg-ok { background: rgba(16, 185, 129, 0.15); color: #10B981; }
    .msg-error { background: rgba(233, 69, 96, 0.15); color: #e94560; }

    /* Editor tabs */
    .ed-tabs {
        display: flex; gap: 0; border-bottom: 1px solid #0f3460;
        margin-bottom: 1.25rem;
    }
    .ed-tab {
        padding: 0.6rem 1rem; border: none; background: transparent;
        color: #888; font-size: 0.85rem; cursor: pointer;
        border-bottom: 2px solid transparent;
    }
    .ed-tab.active { color: #e94560; border-bottom-color: #e94560; }

    .ed-section {
        background: #16213e; border-radius: 8px; padding: 1.25rem;
        border: 1px solid #0f3460;
    }
    .ed-hint { color: #777; font-size: 0.85rem; margin-top: 0; }

    /* Form elements */
    .form-row { display: flex; gap: 1rem; }
    .form-group.flex-1 { flex: 1; }
    .form-input.sm { padding: 0.4rem 0.5rem; font-size: 0.8rem; }
    .form-input.mono {
        font-family: 'Cascadia Code', 'Consolas', monospace;
        font-size: 0.85rem; line-height: 1.6; resize: vertical;
    }
    .color-input {
        width: 60px; height: 36px; border: 1px solid #0f3460;
        border-radius: 6px; cursor: pointer; background: transparent;
    }
    .upload-row { display: flex; align-items: center; gap: 0.75rem; }
    .thumb { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
    .thumb.wide { width: 120px; height: 60px; }
    .file-input { font-size: 0.8rem; color: #aaa; }
    .cb-label {
        display: flex; align-items: center; gap: 0.3rem;
        color: #aaa; font-size: 0.8rem; white-space: nowrap;
    }

    .btn-save {
        margin-top: 1rem; padding: 0.5rem 1.5rem; background: #e94560;
        color: #fff; border: none; border-radius: 6px; cursor: pointer;
        font-weight: 600;
    }
    .btn-save:hover { background: #c73750; }
    .save-all-bar {
        margin-top: 2rem; padding: 1.5rem 0; border-top: 1px solid #0f3460;
        text-align: center;
    }
    .btn-save-all {
        padding: 0.75rem 3rem; background: #28a745; color: #fff; border: none;
        border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 1.05rem;
        letter-spacing: 0.02em;
    }
    .btn-save-all:hover:not(:disabled) { background: #2fc953; }
    .btn-save-all:disabled { opacity: 0.5; cursor: default; }
    .btn-add {
        padding: 0.4rem 1rem; background: rgba(233,69,96,0.1);
        color: #e94560; border: 1px dashed #e94560; border-radius: 6px;
        cursor: pointer; font-size: 0.85rem; margin: 0.75rem 0;
    }
    .btn-x {
        width: 28px; height: 28px; border-radius: 4px; background: transparent;
        border: 1px solid #444; color: #e94560; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }

    /* Info field rows */
    .fields-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .field-row { display: flex; gap: 0.5rem; align-items: center; }

    /* Presets */
    .preset-bar {
        display: flex; align-items: center; gap: 0.5rem;
        margin: 0.5rem 0; flex-wrap: wrap;
    }
    .preset-label { font-size: 0.8rem; color: #555; }
    .btn-preset {
        padding: 0.3rem 0.7rem; border: 1px solid #0f3460; border-radius: 4px;
        background: rgba(15, 52, 96, 0.3); color: #888; cursor: pointer;
        font-size: 0.75rem;
    }
    .btn-preset:hover { border-color: #e94560; color: #e94560; }

    /* Section editor */
    .section-editor {
        background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px;
        padding: 0.75rem; margin-bottom: 0.75rem;
    }
    .se-header { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }

    /* BBCode editor */
    .bbcode-editor { border: 1px solid #0f3460; border-radius: 6px; overflow: hidden; }
    .bbcode-preview {
        padding: 0.75rem 1rem; min-height: 120px; background: #16213e;
        line-height: 1.7; color: #c8c8d8;
    }
    .bbcode-toolbar {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0.3rem 0.5rem; background: rgba(0,0,0,0.2);
    }
    .tb-btn {
        padding: 0.25rem 0.6rem; border: 1px solid #0f3460; background: transparent;
        color: #e94560; border-radius: 4px; cursor: pointer; font-size: 0.75rem;
    }
    .char-count { font-size: 0.7rem; color: #555; }

    /* Gallery editor */
    .image-upload-area { margin-bottom: 1rem; }
    .gallery-edit-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.75rem;
    }
    .gallery-edit-card {
        background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px;
        overflow: hidden; display: flex; flex-direction: column;
    }
    .gallery-edit-card img {
        width: 100%; height: 130px; object-fit: contain;
        background: #111;
    }
    .gallery-edit-card .form-input { margin: 0.3rem; width: auto; }
    .gec-row {
        display: flex; align-items: center; gap: 0.25rem;
        padding: 0.3rem; flex-wrap: wrap;
    }

/* ── Login.razor ──────────────────────────── */
    .login-page {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: #1a1a2e;
    }

    .login-card {
        background: #16213e;
        padding: 2.5rem;
        border-radius: 12px;
        border: 1px solid #0f3460;
        width: 380px;
        max-width: 90vw;
    }

    .login-card h1 {
        margin: 0 0 0.25rem 0;
        color: #e94560;
        font-size: 1.5rem;
    }

    .subtitle { color: #666; margin-bottom: 1.5rem; }

    .error-msg {
        background: rgba(233, 69, 96, 0.15);
        color: #e94560;
        padding: 0.6rem 0.75rem;
        border-radius: 6px;
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }

    .form-input:focus { outline: none; border-color: #e94560; }

    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #aaa;
        cursor: pointer;
    }

    .btn-login {
        width: 100%;
        padding: 0.75rem;
        background: #e94560;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        margin-top: 0.5rem;
    }

    .btn-login:hover:not(:disabled) { background: #c73750; }
    .btn-login:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── RpRoom.razor ──────────────────────────── */
    .rp-room {
        display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: #1a1a2e;
    }

    /* Header */
    .room-header {
        display: flex; align-items: center; gap: 1rem;
        padding: 0.75rem 1rem; background: #16213e;
        border-bottom: 1px solid #0f3460;
    }
    .back-link {
        display: inline-flex; align-items: center; gap: 0.25rem;
        color: #bbb; text-decoration: none; font-size: 0.8rem; font-weight: 500;
        padding: 0.35rem 0.75rem 0.35rem 0.5rem;
        border-radius: 20px; background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s;
        margin-bottom: -0.15rem;
    }
    .back-link .back-arrow {
        display: inline-block; transition: transform 0.25s; font-size: 0.9em;
    }
    .back-link:hover {
        color: #e94560; background: rgba(233,69,96,0.1);
        border-color: rgba(233,69,96,0.3); text-decoration: none;
        box-shadow: 0 0 12px rgba(233,69,96,0.15);
        transform: translateX(-1px);
    }
    .back-link:hover .back-arrow { transform: translateX(-3px); }
    .back-link:active { transform: scale(0.97); }
    .room-title { font-weight: 600; color: #e0e0e0; flex: 1; }
    .room-title-link {
        font-weight: 600; color: #e0e0e0; flex: 1;
        text-decoration: none; transition: color 0.2s;
    }
    .room-title-link:hover { color: #e94560; }
    .room-title-current { font-weight: 600; color: #e0e0e0; }
    .breadcrumb-sep { color: #7a8baa; margin: 0 0.15rem; }
    .room-chars { display: flex; gap: 0.3rem; }
    .header-face {
        width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
        border: 2px solid #555; display: flex; align-items: center; justify-content: center;
    }
    .header-face img { width: 100%; height: 100%; object-fit: cover; }
    .header-face span {
        width: 100%; height: 100%; display: flex; align-items: center;
        justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff;
    }

    /* Post feed */
    .post-feed {
        flex: 1; overflow-y: auto; padding: 1rem;
        display: flex; flex-direction: column; gap: 0.75rem;
    }
    .empty-state {
        display: flex; align-items: center; justify-content: center;
        height: 100%; color: #555; font-style: italic;
    }

    /* Posts */
    .post {
        background: #16213e; border-radius: 8px; padding: 0.75rem 1rem;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }
    .post.post-mine { border-right-color: transparent; }
    .post.post-other { border-left-color: transparent; }
    .post.ooc { opacity: 0.65; font-style: italic; background: #1a1a30; }
    .post.dialogue { background: #161e38; }
    .post.phone-text { background: #1a2420; }

    .post-header {
        display: flex; align-items: center; gap: 0.6rem;
        margin-bottom: 0.4rem; font-size: 0.85rem;
    }
    .post-avatar {
        width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    }
    .post-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .post-avatar span {
        width: 100%; height: 100%; display: flex; align-items: center;
        justify-content: center; font-weight: 700; font-size: 0.7rem; color: #fff;
    }

/* ── Character Hover Card ─────────────────────────── */
    .char-hover-wrap { position: relative; cursor: pointer; }
    .char-hover-card {
        display: none; position: absolute; z-index: 100;
        left: 0; top: 100%; margin-top: 6px;
        background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.5); min-width: 200px;
        pointer-events: auto;
    }
    .char-hover-wrap:hover > .char-hover-card { display: block; }
    .char-hover-top {
        display: flex; align-items: center; gap: 0.6rem;
        padding: 0.6rem 0.75rem; border-left: 3px solid #e94560;
        border-radius: 8px;
    }
    .char-hover-avatar {
        width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    }
    .char-hover-initial {
        width: 42px; height: 42px; border-radius: 50%; display: flex; flex-shrink: 0;
        align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: #fff;
    }
    .char-hover-info { min-width: 0; }
    .char-hover-name {
        font-size: 0.9rem; font-weight: 600; text-decoration: none;
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .char-hover-name:hover { text-decoration: underline; }
    .char-hover-title {
        font-size: 0.75rem; color: #8888a0; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; max-width: 160px;
    }
    .char-hover-owner {
        font-size: 0.7rem; color: #666; white-space: nowrap;
    }

/* ── Character Popup Card (click) ────────────── */
    .char-clickable { cursor: pointer; }
    .char-clickable:hover { text-decoration: underline; }

    @keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

    .char-popup-card {
        position: fixed; z-index: 1000;
        background: #16213e; border: 1px solid #0f3460; border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        width: 340px; max-width: 92vw; max-height: 85vh; overflow-y: auto;
        animation: popIn 0.15s ease;
    }
    .char-popup-close {
        position: absolute; top: 8px; right: 10px; z-index: 2;
        background: rgba(0,0,0,0.4); border: none; color: #aaa;
        width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
        font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
        transition: background 0.15s, color 0.15s;
    }
    .char-popup-close:hover { background: rgba(0,0,0,0.7); color: #fff; }

    .char-popup-banner {
        height: 80px; border-radius: 12px 12px 0 0;
        display: flex; align-items: flex-end; justify-content: center;
        position: relative;
    }
    .char-popup-avatar-ring {
        width: 82px; height: 82px; border-radius: 50%;
        border: 3px solid #e94560; background: #16213e;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden; position: absolute; bottom: -36px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
    .char-popup-avatar-ring img {
        width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    }
    .char-popup-avatar-ring span {
        width: 100%; height: 100%; display: flex;
        align-items: center; justify-content: center;
        font-weight: 700; font-size: 1.6rem; color: #fff;
    }

    .char-popup-body {
        padding: 44px 1.25rem 1.25rem; text-align: center;
    }
    .char-popup-name {
        font-size: 1.2rem; font-weight: 700; margin: 0 0 0.15rem;
    }
    .char-popup-title {
        font-size: 0.82rem; color: #8888a0; font-style: italic; margin-bottom: 0.25rem;
    }
    .char-popup-author {
        font-size: 0.75rem; color: #556; margin-bottom: 0.9rem;
    }

    .char-popup-fields {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem;
        text-align: left; margin-bottom: 1rem;
        padding: 0.65rem 0.75rem; background: rgba(255,255,255,0.03);
        border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);
    }
    .char-popup-field { display: flex; flex-direction: column; gap: 0.05rem; }
    .cpf-label { font-size: 0.65rem; color: #667; text-transform: uppercase; letter-spacing: 0.04em; }
    .cpf-value { font-size: 0.82rem; color: #ccd; }

    .char-popup-stats {
        display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem;
    }
    .char-popup-stat { display: flex; flex-direction: column; align-items: center; }
    .cps-num { font-size: 1.1rem; font-weight: 700; color: #e0e0f0; }
    .cps-label { font-size: 0.7rem; color: #667; }

    .char-popup-profile-link {
        display: inline-block; padding: 0.45rem 1.2rem;
        background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
        border-radius: 6px; color: #aab; font-size: 0.82rem; text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }
    .char-popup-profile-link:hover {
        background: rgba(255,255,255,0.12); color: #fff;
    }

    .char-name { font-weight: 700; font-size: 0.95rem; }
    .post-type-badge {
        background: rgba(255,255,255,0.08); padding: 0.1rem 0.5rem;
        border-radius: 10px; font-size: 0.7rem; text-transform: uppercase; color: #888;
    }
    .post-type-badge.phone-text { background: rgba(16, 185, 129, 0.15); color: #10B981; }
    .post-type-badge.ooc { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
    .post-type-badge.dialogue { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }

    .timestamp { color: #555; font-size: 0.75rem; margin-left: auto; }
    .edited { color: #666; font-size: 0.7rem; font-style: italic; }

    .post-content {
        line-height: 1.7; color: #d0d0e0;
    }

    /* Phone/text bubble styling */
    .phone-bubble {
        background: #1a3a2a; border-radius: 12px 12px 12px 2px;
        padding: 0.6rem 0.9rem; margin-top: 0.3rem;
        max-width: 80%; border: 1px solid rgba(16, 185, 129, 0.2);
    }
    .phone-content { color: #c0e8d0; line-height: 1.5; white-space: pre-wrap; }

    /* Word/char count */
    .count-bar {
        display: flex; justify-content: space-between;
        padding: 0.25rem 1rem; font-size: 0.75rem; color: #555;
        background: #16213e; border-top: 1px solid #0f3460;
    }
    .over-limit { color: #e94560; font-weight: 600; }

    /* Input panel */
    .input-panel {
        border-top: 1px solid #0f3460; padding: 0.75rem 1rem; background: #16213e;
    }
    .input-controls {
        display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; flex-wrap: wrap;
    }
    .char-select, .type-select {
        padding: 0.4rem 0.75rem; background: #1a1a2e;
        border: 1px solid #0f3460; color: #e0e0e0;
        border-radius: 6px; font-size: 0.85rem;
    }
    .char-select { flex: 1; min-width: 120px; }

    .message-input {
        width: 100%; display: block; padding: 0.75rem; background: #1a1a2e;
        border: 1px solid #0f3460; color: #e0e0e0;
        border-radius: 8px; font-family: inherit;
        font-size: 0.95rem; resize: vertical; line-height: 1.6;
        min-height: 140px; box-sizing: border-box;
    }
    .message-input:focus { outline: none; border-color: #e94560; }
    .message-input::placeholder { color: #555; }

    .input-footer {
        display: flex; align-items: center; justify-content: flex-end;
        margin-top: 0.5rem; gap: 0.5rem;
    }
    .post-target { display: none; }

    .btn-send {
        padding: 0.6rem 1.8rem; background: #e94560; color: #fff;
        border: none; border-radius: 8px; cursor: pointer;
        font-weight: 600; font-size: 0.95rem;
    }
    .btn-send:hover:not(:disabled) { background: #c73750; }
    .btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

    .alt-post-toggle { font-size: 0.8rem; color: #999; }
    .alt-post-active { border-color: #b388ff !important; }
    .ic-toggle { font-size: 0.8rem; color: #999; }

    .typing-indicator {
        font-size: 0.8rem; color: #666; padding-top: 0.4rem; font-style: italic;
    }

/* ── Stories.razor ──────────────────────────── */
    .stories-page { padding: 1.5rem; overflow-y: auto; height: 100%; }
    .page-header {
        display: flex; justify-content: space-between;
        align-items: center; margin-bottom: 1.5rem;
    }
    .page-header h1 { margin: 0; color: #e0e0e0; }
    .btn-primary {
        padding: 0.5rem 1.25rem; background: #e94560; color: #fff;
        border: none; border-radius: 6px; cursor: pointer; font-weight: 600;
    }
    .btn-primary:hover { background: #c73750; }
    .btn-secondary {
        padding: 0.5rem 1.25rem; background: transparent; color: #aaa;
        border: 1px solid #444; border-radius: 6px; cursor: pointer;
    }

    /* Create form */
    .create-form {
        background: #16213e; padding: 1.25rem; border-radius: 8px;
        margin-bottom: 1.5rem; border: 1px solid #0f3460;
    }
    .create-form h3 { margin-top: 0; color: #e0e0e0; }
    .form-input {
        display: block; width: 100%; padding: 0.6rem 0.75rem; background: #1a1a2e;
        border: 1px solid #0f3460; color: #e0e0e0; border-radius: 6px;
        margin-bottom: 0.75rem; font-family: inherit; box-sizing: border-box;
    }
    .checkbox-label {
        display: flex; align-items: center; gap: 0.5rem;
        margin-bottom: 0.75rem; color: #aaa;
    }
    .form-actions { display: flex; gap: 0.5rem; }

    /* Story cards */
    .story-list { display: flex; flex-direction: column; gap: 0.75rem; }
    .story-card {
        background: #16213e; border-radius: 8px;
        border: 1px solid #0f3460; display: flex; align-items: stretch;
        transition: border-color 0.2s; position: relative; overflow: hidden;
    }
    .story-card-bg {
        position: absolute; top: 0; left: 0; right: 0; z-index: 0;
        height: 100%; background-size: cover; background-position: center top;
        opacity: 0.25; pointer-events: none;
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0) 100%);
    }
    .story-card:hover { border-color: #e94560; }
    .story-main { flex: 1; padding: 1rem 1.25rem; cursor: pointer; position: relative; z-index: 1; }
    .story-main-top { display: flex; gap: 1.25rem; align-items: flex-start; }
    .story-main-left { flex: 1; min-width: 0; }
    .story-title { font-size: 1.1rem; font-weight: 600; color: #e0e0e0; }
    .story-title-link {
        font-size: 1.1rem; font-weight: 600; color: #e0e0e0;
        text-decoration: none; transition: color 0.2s;
    }
    .story-title-link:hover { color: #e94560; text-decoration: underline; }
    .story-desc { color: #999; font-size: 0.9rem; margin-top: 0.5rem; line-height: 1.5; }

    /* Genre tags */
    .story-genres { color: #7a8baa; font-size: 0.8rem; margin-top: 0.15rem; font-style: italic; }

    /* Content tags section */
    .story-content-tags { margin-top: 0.6rem; font-size: 0.8rem; line-height: 1.5; }
    .content-tags-label { color: #888; font-weight: 600; margin-right: 0.3rem; }
    .story-rating { font-weight: 700; margin-right: 0.25rem; }
    .rating-explicit { color: #ff6b6b; }
    .rating-mature { color: #ffa94d; }
    .rating-teen { color: #69db7c; }
    .rating-general { color: #74c0fc; }
    .story-tags-text { color: #777; }

    /* Characters row */
    .story-characters-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
    .characters-label { color: #888; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

    /* Character face chips */
    .story-faces { display: flex; gap: 0.4rem; flex-wrap: wrap; }
    .face-chip {
        width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
        border: 2px solid #555; display: flex; align-items: center;
        justify-content: center;
    }
    .face-chip img { width: 100%; height: 100%; object-fit: cover; }
    .face-initial {
        width: 100%; height: 100%; display: flex; align-items: center;
        justify-content: center; font-weight: 700; font-size: 0.75rem; color: #fff;
    }

    .story-meta {
        display: flex; gap: 0.75rem;
        font-size: 0.8rem; color: #555; white-space: nowrap;
    }
    .story-meta-bottom {
        justify-content: flex-end; margin-top: 0.4rem;
    }

    .btn-add-char {
        padding: 0 1rem; background: transparent; border: none;
        border-left: 1px solid #0f3460; color: #e94560;
        cursor: pointer; font-size: 0.8rem; font-weight: 600;
        white-space: nowrap;
    }
    .btn-add-char:hover { background: rgba(233, 69, 96, 0.08); }

    /* Modal */
    .modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.6);
        display: flex; align-items: center; justify-content: center; z-index: 100;
    }
    .modal-card {
        background: #16213e; border: 1px solid #0f3460; border-radius: 12px;
        padding: 1.5rem; width: 420px; max-width: 90vw; max-height: 80vh; overflow-y: auto;
    }
    .modal-card h3 { margin-top: 0; color: #e0e0e0; }
    .modal-hint { color: #777; font-size: 0.85rem; margin-bottom: 1rem; }

    .char-pick-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
    .char-pick-item {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.6rem 0.75rem; border-radius: 8px;
        cursor: pointer; transition: background 0.2s;
    }
    .char-pick-item:hover:not(.disabled) { background: rgba(233, 69, 96, 0.1); }
    .char-pick-item.disabled { opacity: 0.4; cursor: default; }
    .char-pick-avatar {
        width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; color: #fff; font-size: 0.9rem; flex-shrink: 0;
    }
    .char-pick-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .char-pick-name { font-weight: 600; font-size: 0.95rem; }
    .char-pick-sub { font-size: 0.8rem; color: #777; }
    .already-badge {
        margin-left: auto; font-size: 0.7rem; color: #555;
        background: rgba(255,255,255,0.05); padding: 0.2rem 0.5rem;
        border-radius: 10px;
    }

    .empty-text {
        color: #555; text-align: center; padding: 2rem; font-style: italic;
    }
    .empty-text a { color: #e94560; }

/* ── Admin.razor ──────────────────────────── */
    .admin-page { padding: 1.5rem; max-width: 1400px; height: 100%; overflow-y: auto; }
    .admin-header { margin-bottom: 1.5rem; }
    .admin-header h1 { margin: 0 0 0.5rem; color: #e94560; }
    .admin-stats { display: flex; gap: 1.5rem; }
    .admin-stats .stat {
        background: #16213e; padding: 0.4rem 0.8rem; border-radius: 6px;
        font-size: 0.85rem; color: #aaa;
    }
    .admin-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
    .admin-tab {
        background: #16213e; color: #aaa; border: none; padding: 0.6rem 1.2rem;
        border-radius: 6px 6px 0 0; cursor: pointer; font-size: 0.9rem;
        transition: background 0.2s;
    }
    .admin-tab:hover { background: #1a2a4e; color: #e0e0e0; }
    .admin-tab.active { background: #0f3460; color: #fff; }
    .admin-panel {
        background: #16213e; border-radius: 0 8px 8px 8px; padding: 1.25rem;
    }
    .panel-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 1rem;
    }
    .panel-header h2 { margin: 0; font-size: 1.1rem; color: #ccc; }
    .panel-header-actions { display: flex; gap: 0.4rem; align-items: center; }
    .admin-table {
        width: 100%; border-collapse: collapse; font-size: 0.85rem;
    }
    .admin-table th {
        text-align: left; padding: 0.5rem 0.6rem; color: #888;
        border-bottom: 1px solid #0f3460; font-weight: 600; white-space: nowrap;
    }
    .admin-table td {
        padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.04);
        vertical-align: middle;
    }
    .admin-table tr:hover td { background: rgba(255,255,255,0.02); }
    .td-name { font-weight: 600; color: #f0f0f0; }
    .td-email { color: #888; font-size: 0.8rem; }
    .td-sub { color: #777; font-size: 0.8rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
    .td-date { color: #888; font-size: 0.8rem; white-space: nowrap; }
    .td-actions { white-space: nowrap; }

    .btn-sm {
        background: #0f3460; color: #ccc; border: none; padding: 0.25rem 0.5rem;
        border-radius: 4px; cursor: pointer; font-size: 0.75rem; margin-right: 0.25rem;
        transition: background 0.2s;
    }
    .btn-sm:hover { background: #1a4a80; color: #fff; }
    .btn-sm.btn-save { background: #28a745; color: #fff; }
    .btn-sm.btn-save:hover { background: #2fc953; }
    .btn-sm.btn-danger { background: #6b2030; color: #ddd; }
    .btn-sm.btn-danger:hover { background: #8b2040; color: #fff; }
    .btn-sm.btn-restore { background: #2d6a4f; color: #ddd; }
    .btn-sm.btn-restore:hover { background: #3d8a6f; color: #fff; }

    .role-badge {
        display: inline-block; padding: 0.15rem 0.4rem; border-radius: 4px;
        font-size: 0.7rem; font-weight: 600; background: #1a2a4e; color: #888;
    }
    .role-badge.role-admin { background: #5c1a2e; color: #e94560; }

    .badge {
        display: inline-block; padding: 0.15rem 0.4rem; border-radius: 4px;
        font-size: 0.7rem; font-weight: 600;
    }
    .badge-private { background: #3d2060; color: #b388ff; }
    .badge-public { background: #1a3a2e; color: #69f0ae; }
    .badge-active { background: #1a3a2e; color: #69f0ae; }
    .badge-inactive { background: #3a2a1a; color: #ffab40; }

    .msg { padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 0.75rem; font-size: 0.85rem; }
    .msg-ok { background: #1a3a2e; color: #69f0ae; }
    .msg-error { background: #3a1a1a; color: #ff6b6b; }
    .msg-info { background: rgba(74, 144, 217, 0.15); color: #7bb8e8; }

    /* F-list Import */
    .import-hint { font-size: 0.85rem; color: #888; margin-bottom: 1rem; line-height: 1.5; }
    .import-progress {
        display: flex; align-items: center; gap: 0.75rem;
        margin-top: 1rem; padding: 0.75rem; background: rgba(74, 144, 217, 0.08);
        border-radius: 6px; font-size: 0.85rem; color: #7bb8e8;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner {
        width: 18px; height: 18px; border: 2px solid rgba(123, 184, 232, 0.3);
        border-top-color: #7bb8e8; border-radius: 50%;
        animation: spin 0.8s linear infinite; flex-shrink: 0;
    }

    .form-row { display: flex; gap: 0.75rem; }
    .fg-flex { flex: 1; }
    .form-input-sm { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
    .cb-archived { margin-top: 0.75rem; color: #888; font-size: 0.85rem; }

    .search-bar input { width: 250px; padding: 0.4rem 0.7rem; }

    .mini-avatar {
        width: 28px; height: 28px; border-radius: 50%; border: 2px solid;
        overflow: hidden; display: flex; align-items: center; justify-content: center;
    }
    .mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .mini-initial {
        width: 100%; height: 100%; display: flex; align-items: center;
        justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 700;
    }

    @media (max-width: 1024px) {
        .admin-table { font-size: 0.8rem; }
        .form-row { flex-direction: column; }
    }

/* ── Story Home Page ────────────────────── */
    .story-home {
        max-width: 800px; margin: 0 auto; padding: 1.5rem;
    }
    .story-home-header {
        margin-bottom: 1rem;
        display: flex; align-items: center; gap: 0.75rem;
    }
    .shc-docs-btn { margin-left: auto; }
    .story-home-card {
        background: #16213e; border-radius: 12px; padding: 1.5rem;
        border: 1px solid #0f3460;
    }
    .shc-top { display: flex; gap: 1.5rem; }
    .shc-cover {
        flex-shrink: 0; width: 200px;
    }
    .shc-cover img {
        width: 100%; border-radius: 8px; border: 1px solid #0f3460;
    }
    .shc-info { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
    .shc-title { color: #e0e0e0; font-size: 1.6rem; margin: 0; }
    .shc-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .shc-genres { color: #7a8baa; font-size: 0.9rem; font-style: italic; }
    .shc-desc { color: #bbb; font-size: 0.95rem; line-height: 1.6; }
    .shc-tags { font-size: 0.85rem; color: #888; line-height: 1.5; }
    .shc-stats {
        display: flex; gap: 1rem; flex-wrap: wrap;
        font-size: 0.82rem; color: #666; margin-top: auto; padding-top: 0.5rem;
    }
    .shc-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #0f3460; }
    .shc-section h3 { color: #aaa; font-size: 0.95rem; margin: 0 0 0.75rem 0; }
    .shc-char-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
    .shc-char {
        display: flex; align-items: center; gap: 0.5rem;
        text-decoration: none; transition: opacity 0.2s;
    }
    .shc-char:hover { opacity: 0.8; }
    .shc-char-avatar {
        width: 40px; height: 40px; border-radius: 50%;
        border: 2px solid; overflow: hidden; flex-shrink: 0;
    }
    .shc-char-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .shc-char-avatar .face-initial {
        display: flex; align-items: center; justify-content: center;
        width: 100%; height: 100%; color: #fff; font-weight: 600; font-size: 0.9rem;
    }
    .shc-char-name { font-weight: 600; font-size: 0.9rem; }
    .shc-char-wrap { position: relative; display: inline-flex; }
    .shc-char-remove {
        position: absolute; top: -6px; right: -6px;
        width: 18px; height: 18px; border-radius: 50%;
        background: #c0392b; color: #fff; border: none;
        font-size: 0.75rem; line-height: 1; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transition: opacity 0.2s;
    }
    .shc-char-wrap:hover .shc-char-remove { opacity: 1; }

    .discord-story-toggle {
        display: flex; align-items: center; gap: 0.35rem;
        cursor: pointer; font-size: 0.75rem; color: #a0b4c8;
        padding: 0.2rem 0.5rem; border-radius: 6px;
        background: rgba(26,143,230,0.1); border: 1px solid rgba(26,143,230,0.25);
        transition: all 0.2s;
    }
    .discord-story-toggle:hover { background: rgba(26,143,230,0.2); color: #c8dff0; }
    .discord-story-toggle input[type="checkbox"] {
        accent-color: #1a8fe6; width: 14px; height: 14px; cursor: pointer;
    }
    .discord-toggle-label { user-select: none; }

    .shc-actions {
        margin-top: 1.5rem; padding-top: 1rem;
        border-top: 1px solid #0f3460;
        display: flex; justify-content: center; align-items: center; gap: 1rem;
    }
    .btn-enter-room {
        padding: 0.75rem 2.5rem; font-size: 1.1rem; border-radius: 8px;
    }

    @media (max-width: 600px) {
        .shc-top { flex-direction: column; }
        .shc-cover { width: 100%; max-width: 250px; }
    }

/* ── Saga Styles ─────────────────────────── */

    /* Saga parent badge */
    .saga-parent-badge {
        background: #1a3a5c; color: #7ac4ff; font-size: 0.72rem; padding: 0.15rem 0.5rem;
        border-radius: 4px; font-weight: 600; letter-spacing: 0.03em;
    }

    /* Saga strip on story cards (Stories list page) */
    .saga-strip {
        flex-shrink: 0;
        display: flex; flex-direction: column; gap: 0.35rem;
    }
    .saga-strip-items {
        display: flex; gap: 0.5rem;
        overflow-x: auto; scrollbar-width: thin;
    }
    .saga-label {
        color: #7a8baa; font-size: 0.75rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
    }
    .saga-meta {
        margin-top: 0.25rem; padding-top: 0.25rem;
        font-size: 0.78rem; color: #4e5d70; font-style: italic; justify-content: flex-end;
    }
    .saga-thumb {
        display: flex; flex-direction: column; align-items: center;
        text-decoration: none; min-width: 90px; max-width: 120px; flex-shrink: 0;
    }
    .saga-thumb img {
        width: 110px; height: 65px; object-fit: cover;
        border-radius: 6px; border: 1px solid #0f3460;
        transition: border-color 0.2s;
    }
    .saga-thumb:hover img { border-color: #e94560; }
    .saga-thumb-placeholder {
        width: 110px; height: 65px; border-radius: 6px;
        background: #0a1628; border: 1px dashed #1a3a5c;
        display: flex; align-items: center; justify-content: center; gap: 2px;
    }
    .saga-thumb-placeholder .mini-face {
        width: 28px; height: 28px; border-radius: 50%; border: 2px solid #333;
        overflow: hidden; margin-left: -6px;
    }
    .saga-thumb-placeholder .mini-face:first-child { margin-left: 0; }
    .saga-thumb-placeholder .mini-face img { width: 100%; height: 100%; object-fit: cover; }
    .saga-thumb-placeholder .mini-face .face-initial {
        display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
        font-size: 0.65rem; color: #fff;
    }
    .mini-face-more { color: #7a8baa; font-size: 0.65rem; margin-left: 2px; }
    .saga-thumb-title {
        color: #8fa4bf; font-size: 0.78rem; font-weight: 500; margin-top: 0.2rem;
        text-align: center; max-width: 110px; font-style: italic;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .saga-thumb-meta {
        color: #4e5d70; font-size: 0.68rem; text-align: center;
    }
    .saga-thumb:hover .saga-thumb-title { color: #c9a0dc; }

    /* Saga grid on Story Home page */
    .saga-grid {
        display: flex; flex-direction: column;
        gap: 0.5rem;
    }
    .saga-card {
        display: flex; align-items: center; gap: 1rem;
        padding: 0.75rem 1rem; border-radius: 8px;
        background: #0a1628; border: 1px solid #0f3460;
        text-decoration: none; transition: border-color 0.2s, background 0.2s;
    }
    .saga-card:hover { border-color: #e94560; background: #0d1d35; }
    .saga-card-cover {
        width: 80px; height: 50px; border-radius: 4px; overflow: hidden; flex-shrink: 0;
    }
    .saga-card-cover img { width: 100%; height: 100%; object-fit: cover; }
    .saga-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
    .saga-card-title {
        color: #e0e0e0; font-weight: 600; font-size: 0.95rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .saga-card-desc {
        color: #888; font-size: 0.8rem; line-height: 1.3;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .saga-card-meta { color: #7a8baa; font-size: 0.78rem; }
    .saga-card-wrap { position: relative; }
    .btn-detach {
        position: absolute; top: 0.4rem; right: 0.4rem;
        font-size: 0.65rem; color: #999; background: rgba(0,0,0,0.5);
        border: 1px solid #444; border-radius: 4px;
        padding: 0.15rem 0.4rem; cursor: pointer;
        opacity: 0; transition: opacity 0.15s;
    }
    .saga-card-wrap:hover .btn-detach { opacity: 1; }
    .btn-detach:hover { color: #e94560; border-color: #e94560; }
    .saga-actions {
        display: flex; gap: 0.5rem; margin-top: 1rem;
    }

    /* Saga modal tweaks */
    .saga-modal { max-width: 550px; }

    /* Adopt story picker */
    .adopt-story-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 300px; overflow-y: auto; }
    .adopt-story-item {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.6rem 0.75rem; border-radius: 6px;
        background: #0a1628; border: 1px solid #0f3460;
        cursor: pointer; transition: border-color 0.2s;
    }
    .adopt-story-item:hover, .adopt-story-item.selected { border-color: #e94560; }
    .adopt-story-radio { color: #e94560; font-size: 1.1rem; }
    .adopt-story-info { flex: 1; min-width: 0; }
    .adopt-story-title { color: #e0e0e0; font-weight: 600; display: block; }
    .adopt-story-meta { color: #7a8baa; font-size: 0.8rem; }

    /* Breadcrumb separator in room header */
    .breadcrumb-sep { color: #555; margin: 0 0.25rem; font-size: 0.9rem; }

    @media (max-width: 768px) {
        .story-main-top { flex-direction: column; }
        .saga-strip { width: 100%; }
        .saga-grid { flex-direction: column; }
        .saga-thumb { min-width: 90px; }
        .saga-thumb img { width: 110px; height: 65px; }
        .story-meta { margin-left: 0; }
    }

/* ── Create Story Modal ──────────────────── */
    .create-story-modal {
        background: #16213e; border-radius: 12px; padding: 1.5rem;
        max-width: 900px; width: 90vw; max-height: 85vh; overflow-y: auto;
    }
    .create-story-modal h2 { margin: 0 0 1rem; color: #e94560; font-size: 1.3rem; }
    .cs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .cs-left, .cs-right { display: flex; flex-direction: column; gap: 0.75rem; }
    .cs-right { max-height: 50vh; overflow-y: auto; }
    .form-row-split { display: flex; gap: 0.75rem; }

    .hint { font-size: 0.78rem; color: #666; margin-top: 0.15rem; }
    .hint-inline { font-size: 0.75rem; color: #666; font-weight: 400; margin-left: 0.5rem; }

    .cover-preview {
        margin-top: 0.5rem; position: relative; display: inline-block;
    }
    .cover-preview img {
        max-width: 100%; max-height: 150px; border-radius: 6px; border: 1px solid #0f3460;
    }
    .cover-preview .btn-sm { position: absolute; top: 4px; right: 4px; }

    .form-input-file {
        background: #0a0a1a; border: 1px dashed #0f3460; border-radius: 6px;
        padding: 0.5rem; color: #aaa; font-size: 0.85rem; width: 100%;
    }
    .form-input-file::file-selector-button {
        background: #0f3460; color: #ccc; border: none; padding: 0.3rem 0.6rem;
        border-radius: 4px; margin-right: 0.5rem; cursor: pointer;
    }

    .char-section-label {
        font-size: 0.8rem; font-weight: 600; color: #888; margin-top: 0.5rem;
        text-transform: uppercase; letter-spacing: 0.05em;
    }

    .char-pick-list.compact { max-height: 200px; overflow-y: auto; }
    .char-pick-list.compact .char-pick-item { padding: 0.35rem 0.5rem; }

    .char-pick-item.selected {
        background: rgba(233, 69, 96, 0.12);
        border-color: #e94560;
    }
    .char-pick-info {
        display: flex; flex-direction: column; flex: 1; min-width: 0;
    }
    .char-pick-info .char-pick-name { font-size: 0.85rem; }
    .char-pick-info .char-pick-sub { font-size: 0.72rem; color: #777; }
    .check-mark {
        width: 24px; text-align: center; color: #e94560; font-weight: 700;
        font-size: 1rem;
    }

    .selection-count { font-size: 0.8rem; color: #888; margin-left: auto; }

    /* Story card enhancements */
    .story-card.story-private { border-left: 3px solid #c0392b; }
    .story-title-row { display: flex; align-items: center; gap: 0.5rem; }
    .story-star {
        background: none; border: none; cursor: pointer; font-size: 1.15rem;
        color: #555; padding: 0; line-height: 1; transition: color 0.15s;
    }
    .story-star:hover { color: #f0c040; }
    .story-star.starred { color: #f0c040; }
    .privacy-badge {
        font-size: 0.65rem; background: #3b1410; color: #e74c3c;
        padding: 0.1rem 0.35rem; border-radius: 3px; font-weight: 600;
    }
    .story-rating-badge {
        font-size: 0.65rem; font-weight: 700;
        padding: 0.1rem 0.4rem; border-radius: 3px; background: rgba(255,255,255,0.06);
    }
    .story-cover {
        width: 80px; min-width: 80px; height: 80px; border-radius: 6px;
        overflow: hidden; margin-right: 0.75rem; flex-shrink: 0;
    }
    .story-cover img { width: 100%; height: 100%; object-fit: cover; }
    .story-card { display: flex; align-items: flex-start; }

    /* Expand/collapse */
    .btn-expand-card {
        background: none; border: none; color: #666; cursor: pointer;
        font-size: 1.2rem; padding: 0 0.25rem; line-height: 1; flex-shrink: 0;
    }
    .btn-expand-card:hover { color: #e0e0e0; }
    .story-bottom-row {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; margin-top: 0.4rem; flex-wrap: wrap;
    }
    .story-expanded {
        margin-top: 0.5rem; padding-top: 0.5rem;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .toolbar-check {
        font-size: 0.8rem; color: #888; white-space: nowrap;
        display: flex; align-items: center; gap: 0.35rem; cursor: pointer;
    }
    .toolbar-check input { cursor: pointer; }

    @media (max-width: 768px) {
        .cs-form-grid { grid-template-columns: 1fr; }
        .create-story-modal { width: 95vw; max-height: 90vh; }
    }

/* ── Story Toolbar ───────────────────────── */
    .story-toolbar {
        display: flex; gap: 0.75rem; margin-bottom: 1rem; align-items: center;
    }
    .search-input { flex: 1; max-width: 300px; }
    .filter-select {
        background: #16213e; color: #ccc; border: 1px solid #0f3460;
        padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.85rem;
    }
    .result-count { font-size: 0.8rem; color: #666; margin-left: auto; }
    .pagination {
        display: flex; align-items: center; justify-content: center; gap: 1rem;
        margin-top: 2.5rem; padding: 1.25rem 0;
    }

    /* ── Prev / Next pill buttons ── */
    .page-arrow {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.6rem 1.4rem; border: none; border-radius: 50px;
        background: linear-gradient(145deg, #e94560, #c2294a);
        color: #fff; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;
        cursor: pointer; transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(233, 69, 96, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
        text-transform: uppercase;
    }
    .page-arrow .arrow-icon {
        font-size: 0.75rem; transition: transform 0.3s ease;
    }
    .page-arrow:hover:not(:disabled) {
        background: linear-gradient(145deg, #ff5a7a, #e94560);
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(233, 69, 96, 0.5), 0 3px 8px rgba(0, 0, 0, 0.3);
    }
    .page-prev:hover:not(:disabled) .arrow-icon { transform: translateX(-3px); }
    .page-next:hover:not(:disabled) .arrow-icon { transform: translateX(3px); }
    .page-arrow:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(233, 69, 96, 0.3);
    }
    .page-arrow:disabled {
        background: linear-gradient(145deg, #2a2a3e, #1e1e32);
        color: #555; cursor: default;
        box-shadow: none;
    }

    /* ── Number bubbles ── */
    .page-numbers {
        display: flex; align-items: center; gap: 0.4rem;
    }
    .page-num {
        width: 2.5rem; height: 2.5rem; border-radius: 50%;
        border: 2px solid #2a2a4a;
        background: rgba(22, 33, 62, 0.8); color: #8899bb;
        font-size: 0.9rem; font-weight: 600; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        transition: all 0.3s ease; position: relative;
    }
    .page-num:hover:not(.active) {
        border-color: #e94560; color: #fff;
        background: rgba(233, 69, 96, 0.12);
        transform: scale(1.12);
        box-shadow: 0 0 15px rgba(233, 69, 96, 0.2);
    }
    .page-num.active {
        background: linear-gradient(145deg, #e94560, #c2294a);
        border-color: transparent; color: #fff;
        box-shadow: 0 0 20px rgba(233, 69, 96, 0.45), 0 0 40px rgba(233, 69, 96, 0.15);
        transform: scale(1.1);
        animation: activePageGlow 2s ease-in-out infinite alternate;
    }
    @keyframes activePageGlow {
        from { box-shadow: 0 0 15px rgba(233, 69, 96, 0.4), 0 0 30px rgba(233, 69, 96, 0.1); }
        to   { box-shadow: 0 0 25px rgba(233, 69, 96, 0.55), 0 0 50px rgba(233, 69, 96, 0.2); }
    }

    /* ── Dots ── */
    .page-dots {
        width: 2rem; display: inline-flex; align-items: center; justify-content: center;
        color: #4a5568; font-size: 1.1rem;
    }
    .page-info { font-size: 0.85rem; color: #888; }
    .face-more { font-size: 0.7rem; color: #888; }

/* ── Room Tabs ───────────────────────────── */
    .room-tabs {
        display: flex; gap: 2px; background: #0a0a1a; padding: 0 0.5rem;
        border-bottom: 1px solid #0f3460; overflow-x: auto;
    }
    .room-tab {
        background: transparent; color: #888; border: none;
        padding: 0.5rem 0.8rem; cursor: pointer; font-size: 0.82rem;
        border-bottom: 2px solid transparent; white-space: nowrap;
        transition: color 0.2s, border-color 0.2s;
    }
    .room-tab:hover { color: #ccc; }
    .room-tab.active { color: #e94560; border-bottom-color: #e94560; }

/* ── Write Tab Controls ──────────────────── */
    .write-controls {
        display: flex; gap: 0.5rem; padding: 0.5rem; background: #0f1829;
    }
    .load-more {
        display: block; width: 100%; margin: 0.5rem 0; text-align: center;
    }

/* ── Outline Tab ─────────────────────────── */
    .outline-panel { padding: 1rem; flex: 1; overflow-y: auto; min-height: 0; }
    .outline-saved-toast {
        position: fixed; top: 1rem; right: 1.5rem; z-index: 1000;
        padding: 0.5rem 1.25rem; border-radius: 6px;
        background: #1a8fe6; color: #fff; font-weight: 600; font-size: 0.9rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        animation: outlineSavedFade 2.5s ease-in-out forwards;
        pointer-events: none;
    }
    @keyframes outlineSavedFade {
        0% { opacity: 0; transform: translateY(-10px); }
        10% { opacity: 1; transform: translateY(0); }
        75% { opacity: 1; }
        100% { opacity: 0; }
    }
    .outline-chapter {
        background: #16213e; border-radius: 8px; margin-bottom: 0.75rem; padding: 0.75rem;
    }
    .outline-chapter.completed { opacity: 0.6; }
    .outline-ch-header {
        display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    }
    .ch-title { font-weight: 600; color: #e0e0e0; font-size: 1rem; }
    .ch-summary { font-size: 0.8rem; color: #777; margin-top: 0.3rem; }
    .ch-meta { font-size: 0.75rem; color: #666; margin-left: auto; }
    .outline-scene {
        background: #1a2540; border-radius: 6px; margin: 0.4rem 0 0.4rem 1.5rem;
        padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    }
    .outline-scene.completed { opacity: 0.5; }
    .sc-title { font-weight: 500; color: #ccc; font-size: 0.9rem; }
    .sc-location { font-size: 0.75rem; }

    /* ── Outline Post Reorder ── */
    .btn-expand { background: none; border: none; color: #888; font-size: 0.9rem; cursor: pointer; padding: 0 0.25rem; min-width: 1.2rem; }
    .btn-expand:hover { color: #e0e0e0; }
    .outline-posts {
        margin: 0.25rem 0 0.5rem 1.5rem; padding: 0.5rem;
        background: #111b30; border-radius: 6px; border-left: 2px solid #2a4a7f;
    }
    .outline-post-row {
        display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem;
        border-radius: 4px; font-size: 0.8rem;
    }
    .outline-post-row:hover { background: #1a2540; }
    .op-arrows { display: flex; flex-direction: column; gap: 1px; }
    .btn-arrow {
        background: none; border: 1px solid #333; color: #888; cursor: pointer;
        font-size: 0.6rem; padding: 0 0.3rem; border-radius: 3px; line-height: 1.2;
    }
    .btn-arrow:hover:not(:disabled) { color: #e0e0e0; border-color: #555; }
    .btn-arrow:disabled { opacity: 0.25; cursor: default; }
    .op-char { font-weight: 500; min-width: 70px; white-space: nowrap; }
    .op-type { color: #666; font-size: 0.7rem; min-width: 55px; }
    .op-preview { color: #999; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .op-time { color: #555; font-size: 0.7rem; white-space: nowrap; }

/* ── Characters Tab ──────────────────────── */
    .chars-panel { padding: 1rem; }
    .char-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem; margin-top: 0.75rem;
    }
    .char-card-sm {
        background: #16213e; border-radius: 8px; padding: 0.75rem;
        text-align: center; cursor: pointer; transition: background 0.2s;
    }
    .char-card-sm:hover { background: #1a2a4e; }
    .card-avatar {
        width: 48px; height: 48px; border-radius: 50%; border: 2px solid;
        margin: 0 auto 0.4rem; overflow: hidden; display: flex; align-items: center;
        justify-content: center;
    }
    .card-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .card-avatar span {
        width: 100%; height: 100%; display: flex; align-items: center;
        justify-content: center; color: #fff; font-weight: 700;
    }
    .card-name { font-weight: 600; font-size: 0.85rem; }
    .card-sub { font-size: 0.72rem; color: #888; }
    .card-meta { font-size: 0.7rem; color: #666; margin-top: 0.25rem; }

/* ── Locations Tab ───────────────────────── */
    .locations-panel { padding: 1rem; flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .loc-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.75rem; margin-top: 0.75rem;
    }
    .loc-card {
        background: #16213e; border-radius: 8px; padding: 0.75rem; overflow: hidden;
        display: flex; flex-direction: column;
    }
    .loc-card-editing { grid-column: 1 / -1; max-width: 500px; }
    .loc-img { display: block; height: 100px; margin: -0.75rem -0.75rem 0.5rem; overflow: hidden; }
    .loc-img img { width: 100%; height: 100%; object-fit: cover; }
    .loc-name { font-weight: 600; font-size: 0.95rem; }
    .loc-desc { font-size: 0.8rem; color: #888; margin-top: 0.25rem; white-space: pre-wrap; }
    .loc-meta { font-size: 0.72rem; color: #666; margin-top: 0.4rem; }
    .loc-actions {
        display: flex; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap;
    }
    .loc-group {
        margin-bottom: 1.25rem; background: rgba(15, 52, 96, 0.2);
        border-radius: 8px; padding: 0.75rem; border: 1px solid transparent;
        transition: border-color 0.15s;
    }
    .loc-group:hover { border-color: rgba(15, 52, 96, 0.5); }
    .loc-ungrouped {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.4rem 0.25rem; margin-top: 0.75rem;
    }
    .btn-link {
        background: none; border: none; color: #4A90D9; cursor: pointer;
        font-size: 0.72rem; padding: 0; margin-top: 0.15rem;
    }
    .btn-link:hover { text-decoration: underline; }
    .color-input { width: 100%; height: 32px; border: none; background: none; cursor: pointer; }

/* ── Documents Panel ─────────────────────── */
    .docs-panel {
        display: flex; flex-direction: column; height: 100%; min-height: 500px;
        background: #0d1b2a; border-radius: 8px; overflow: hidden;
    }
    .docs-panel-inner { display: flex; flex: 1; min-height: 0; }
    .docs-saga-switcher {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        background: rgba(0,0,0,0.15); flex-shrink: 0;
    }
    .docs-saga-switcher label { font-size: 0.75rem; color: #7a8baa; white-space: nowrap; }
    .docs-saga-switcher select { flex: 1; min-width: 0; }
    .shc-tabs {
        display: flex; gap: 0; margin-top: 1.5rem; border-bottom: 2px solid #0f3460;
    }
    .shc-tab {
        background: none; border: none; color: #7a8baa; font-size: 0.9rem;
        padding: 0.6rem 1.25rem; cursor: pointer; border-bottom: 2px solid transparent;
        margin-bottom: -2px; transition: color 0.2s, border-color 0.2s;
    }
    .shc-tab:hover { color: #e0e0e0; }
    .shc-tab.active { color: #7bb8e8; border-bottom-color: #7bb8e8; font-weight: 600; }
    .shc-tab-docs-panel { min-height: 500px; margin-top: 1rem; }
    .docs-sidebar {
        width: 240px; min-width: 200px; border-right: 1px solid #0f3460;
        display: flex; flex-direction: column; background: #0a1628;
    }
    .docs-sidebar-header {
        display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem;
        padding: 0.5rem 0.6rem; border-bottom: 1px solid #0f3460;
        font-size: 0.8rem; font-weight: 600; color: #7bb8e8;
    }
    .docs-sidebar-actions { display: flex; gap: 0.25rem; justify-content: flex-start; }
    .docs-new-dropdown { position: relative; display: inline-block; }
    .docs-new-menu {
        position: absolute; top: 100%; left: 0; z-index: 9999;
        background: #1a1a2e; border: 1px solid #0f3460;
        border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
        min-width: 130px; padding: 0.3rem 0; margin-top: 2px;
    }
    .docs-new-menu-item {
        display: block; width: 100%; text-align: left;
        background: none; border: none; color: #e0e0e0;
        padding: 0.5rem 1rem; cursor: pointer; font-size: 0.88rem;
    }
    .docs-new-menu-item:hover { background: #0f3460; }
    .docs-new-backdrop { position: fixed; inset: 0; z-index: 9998; }
    .docs-tree { flex: 1; overflow-y: auto; padding: 0.25rem 0; }
    .docs-tree-item {
        display: flex; align-items: center; gap: 0.35rem;
        padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.8rem;
        color: #ccc; transition: background 0.15s;
    }
    .docs-tree-item:hover { background: rgba(74, 144, 217, 0.08); }
    .docs-tree-item.active { background: rgba(74, 144, 217, 0.18); color: #fff; }
    .docs-tree-folder {
        display: flex; align-items: center; gap: 0.35rem;
        padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.8rem;
        color: #e0c870; font-weight: 600;
    }
    .docs-tree-folder:hover { background: rgba(74, 144, 217, 0.06); }
    .docs-drop-target:has(~ *):not(:active) { }
    .docs-tree-item[draggable="true"], .docs-tree-folder[draggable="true"] { cursor: grab; }
    .docs-tree-item[draggable="true"]:active, .docs-tree-folder[draggable="true"]:active { cursor: grabbing; opacity: 0.6; }
    .docs-drop-target.drag-over, .docs-folder-children.drag-over {
        background: rgba(74, 144, 217, 0.15) !important;
        outline: 1px dashed rgba(74, 144, 217, 0.4); outline-offset: -1px;
    }
    .docs-reorder-zone {
        height: 2px; margin: 0 0.3rem; border-radius: 2px; transition: all 0.12s;
    }
    .docs-tree.is-dragging .docs-reorder-zone {
        height: 12px; background: rgba(74, 144, 217, 0.06);
    }
    .docs-reorder-zone.drag-over {
        background: #4A90D9 !important; height: 4px !important; margin: 4px 0.3rem;
    }
    .docs-folder-children { padding-left: 0.75rem; }
    .docs-icon { font-size: 0.75rem; }
    .docs-private-badge { font-size: 0.65rem; margin-left: auto; color: #e0c870; }
    .docs-public-badge { font-size: 0.65rem; margin-left: auto; color: #6b8aad; }
    .docs-editor-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .docs-title-bar {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.4rem 0.75rem; border-bottom: 1px solid #0f3460;
    }
    .docs-title-input {
        flex: 1; background: transparent; border: none; color: #e0e0e0;
        font-size: 0.95rem; font-weight: 600; outline: none; padding: 0.2rem 0;
    }
    .docs-title-input:focus { border-bottom: 1px solid #4A90D9; }
    .docs-save-status { font-size: 0.72rem; color: #4a9; }
    .docs-quill-wrap { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
    .docs-empty-state {
        flex: 1; display: flex; align-items: center; justify-content: center;
        color: #666; font-size: 0.9rem;
    }
    .docs-title-readonly {
        flex: 1; font-size: 0.95rem; font-weight: 600; color: #e0e0e0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .docs-read-view {
        flex: 1; overflow-y: auto; padding: 1rem; line-height: 1.6;
        font-size: 0.9rem; color: #e0e0e0;
    }
    .docs-read-view h1 { font-size: 1.5rem; margin: 0.5em 0; color: #fff; }
    .docs-read-view h2 { font-size: 1.25rem; margin: 0.5em 0; color: #eee; }
    .docs-read-view h3 { font-size: 1.1rem; margin: 0.5em 0; color: #ddd; }
    .docs-read-view p { margin: 0.4em 0; }
    .docs-read-view ul, .docs-read-view ol { padding-left: 1.5rem; margin: 0.4em 0; }
    .docs-read-view blockquote {
        border-left: 3px solid #4A90D9; padding-left: 0.75rem; margin: 0.5em 0;
        color: #aaa; font-style: italic;
    }
    .docs-read-view pre {
        background: #16213e; padding: 0.5rem; border-radius: 4px; overflow-x: auto;
        font-size: 0.85rem;
    }
    .docs-read-view a { color: #4A90D9; }
    .docs-read-view img { max-width: 100%; border-radius: 4px; }
    .docs-tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .docs-rename-input {
        flex: 1; background: #0d1b2a; border: 1px solid #0f3460; color: #e0e0e0;
        font-size: 0.8rem; padding: 0.15rem 0.3rem; border-radius: 3px; outline: none;
        min-width: 0;
    }
    .docs-folder-arrow {
        font-size: 0.6rem; width: 0.7rem; text-align: center; flex-shrink: 0;
        opacity: 0.7;
    }
    .docs-folder-color-input {
        width: 22px; height: 18px; border: none; background: none; cursor: pointer;
        padding: 0; flex-shrink: 0;
    }

/* ── Quill dark theme overrides ─────────── */
    .docs-quill-wrap .ql-toolbar.ql-snow {
        background: #16213e; border-color: #0f3460 !important;
        flex-shrink: 0;
    }
    .docs-quill-wrap .ql-toolbar button { color: #ccc; }
    .docs-quill-wrap .ql-toolbar button:hover { color: #fff; }
    .docs-quill-wrap .ql-toolbar .ql-stroke { stroke: #ccc; }
    .docs-quill-wrap .ql-toolbar .ql-fill { fill: #ccc; }
    .docs-quill-wrap .ql-toolbar .ql-picker-label { color: #ccc; }
    .docs-quill-wrap .ql-toolbar .ql-picker-item { color: #ccc; }
    .docs-quill-wrap .ql-container.ql-snow {
        border-color: #0f3460 !important; background: #0d1b2a;
        font-family: inherit; font-size: 0.9rem; color: #e0e0e0;
        flex: 1; overflow-y: auto;
    }
    .docs-quill-wrap .ql-editor {
        min-height: 400px; padding: 1rem; line-height: 1.6;
    }
    .docs-quill-wrap .ql-editor.ql-blank::before { color: #555; }
    .docs-quill-wrap .ql-snow .ql-picker-options { background: #16213e; border-color: #0f3460; }
    .docs-quill-wrap .ql-snow .ql-picker-options .ql-picker-item { color: #ccc; }
    .docs-quill-wrap .ql-snow .ql-picker-options .ql-picker-item:hover { color: #fff; }

/* ── Story Map Editor ─────────────────────── */
    .map-canvas-wrap { flex: 1; position: relative; min-height: 400px; overflow: hidden; }
    .map-canvas { position: absolute; inset: 0; }
    .map-toolbar {
        display: flex; gap: 0.25rem; padding: 0.4rem 0.75rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        background: rgba(0,0,0,0.2); flex-shrink: 0; align-items: center;
    }
    .map-toolbar .btn-sm.active { background: #3b82f6; color: #fff; }
    .map-toolbar-sep { width: 1px; height: 1.2rem; background: rgba(255,255,255,0.1); margin: 0 0.25rem; }
    .docs-tree-map .map-icon { font-size: 0.7rem; margin-right: 0.25rem; }
    .map-picker-item {
        display: flex; align-items: center; gap: 0.5rem;
        width: 100%; padding: 0.5rem; border: none;
        background: rgba(255,255,255,0.04); color: #e2e8f0;
        cursor: pointer; border-radius: 4px; margin-bottom: 0.25rem;
        font-size: 0.85rem;
    }
    .map-picker-item:hover { background: rgba(255,255,255,0.08); }
    .map-picker-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
    .map-picker-initial {
        width: 32px; height: 32px; border-radius: 50%; display: flex;
        align-items: center; justify-content: center; font-weight: bold;
        color: #fff; font-size: 0.85rem; flex-shrink: 0;
    }
    .map-node-preview {
        position: absolute; right: 1rem; top: 4rem;
        width: 250px; max-height: 300px; overflow: auto;
        background: #1e293b; border: 1px solid #334155;
        border-radius: 8px; padding: 0.75rem; z-index: 10;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5); cursor: pointer;
        font-size: 0.85rem; color: #e2e8f0;
    }
    .map-preview-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-bottom: 0.5rem; }
    .map-text-edit-overlay {
        position: absolute; z-index: 100;
        background: #1e293b; color: #e2e8f0; border: 2px solid #60a5fa;
        border-radius: 4px; padding: 4px 6px; resize: none;
        font-family: inherit; min-height: 2em; outline: none;
    }
    .map-ctx-menu {
        position: absolute; z-index: 100; min-width: 160px;
        background: #1e293b; border: 1px solid #334155; border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.6); padding: 4px 0;
        font-size: 0.8rem; color: #e2e8f0;
    }
    .map-ctx-label {
        padding: 4px 12px 2px; font-size: 0.7rem; text-transform: uppercase;
        color: #94a3b8; letter-spacing: 0.05em; user-select: none;
    }
    .map-ctx-item {
        padding: 4px 12px; cursor: pointer; user-select: none;
    }
    .map-ctx-item:hover { background: #334155; }
    .map-ctx-item.active { color: #60a5fa; font-weight: 600; }
    .map-ctx-sep {
        height: 1px; background: #334155; margin: 4px 8px;
    }
    .map-ctx-link { color: #60a5fa; }
    .map-ctx-color-row {
        display: flex; align-items: center; gap: 0.5rem; padding: 4px 12px;
    }
    .map-ctx-color-input {
        width: 28px; height: 28px; border: none; border-radius: 4px;
        cursor: pointer; background: none; padding: 0;
    }
    .map-ctx-color-hex { font-size: 0.75rem; color: #94a3b8; font-family: monospace; }
    .map-zoom-indicator {
        position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 10;
        display: flex; align-items: center; gap: 6px;
        background: rgba(15, 23, 42, 0.8); border: 1px solid #334155;
        border-radius: 6px; padding: 6px 10px; cursor: pointer;
        backdrop-filter: blur(6px); user-select: none;
    }
    .map-zoom-gauge {
        width: 4px; height: 40px; background: #334155; border-radius: 2px;
        position: relative; overflow: hidden;
    }
    .map-zoom-gauge-fill {
        position: absolute; bottom: 0; left: 0; width: 100%;
        background: #3b82f6; border-radius: 2px;
        transition: height 0.15s ease;
    }
    .map-zoom-label {
        font-size: 0.7rem; color: #94a3b8; min-width: 2.5em; text-align: center;
    }

/* ── Export Tab ───────────────────────────── */
    .export-panel { padding: 1rem; max-width: 500px; }
    .export-panel h2 { margin-bottom: 0.5rem; }
    .export-stats {
        display: flex; gap: 1rem; margin: 0.75rem 0; font-size: 0.85rem; color: #888;
    }

/* ── Shared form tweaks ──────────────────── */
    .create-form {
        background: #1a2540; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
    }

/* ── Focus / Writing Mode ────────────────── */
    .write-tab {
        display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
    }
    .write-tab .post-feed { flex: 1; min-height: 0; overflow-y: auto; }
    .write-tab .input-panel { flex-shrink: 0; border-top: 1px solid #0f3460; }

    .btn-focus {
        background: #1a2a4e; color: #aaa; border: 1px solid #0f3460;
        padding: 0.35rem 0.7rem; border-radius: 6px; cursor: pointer;
        font-size: 0.82rem; transition: all 0.2s; margin-left: auto;
    }
    .btn-focus:hover { background: #0f3460; color: #fff; }
    .btn-focus.active { background: #e94560; color: #fff; border-color: #e94560; }

    .writing-area { width: 100%; display: flex; flex-direction: column; }

    .focus-count-bar {
        display: flex; justify-content: space-between; padding: 0.3rem 0.5rem;
        font-size: 0.78rem; color: #666;
    }

    /* Focus mode: textarea fills remaining viewport */
    .write-tab.focus-mode .post-feed { display: none; }
    .write-tab.focus-mode .write-controls { display: none; }
    .write-tab.focus-mode .input-panel {
        flex: 1; display: flex; flex-direction: column;
    }
    .write-tab.focus-mode .writing-area {
        flex: 1; display: flex; flex-direction: column;
    }
    .write-tab.focus-mode .message-input {
        flex: 1; resize: none; min-height: unset;
        font-size: 1.05rem; line-height: 1.7;
        padding: 1rem; border-color: #e94560;
    }
    .write-tab.focus-mode .btn-send {
        padding: 0.6rem 2.5rem; font-size: 1rem;
    }

/* ── Input Panel Full Width ──────────────── */
    .editor-nav { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; }
    .editor-nav .back-link { margin-bottom: 0; }

/* ── Brand Link ──────────────────────────── */
    .brand-link { text-decoration: none; color: inherit; }
    .brand-link:hover { opacity: 0.8; }
    .brand-link h2 { margin: 0; }

/* ── IC Timestamp ────────────────────────── */
    .ic-time {
        font-size: 0.78rem; color: #f0c040; font-style: italic;
        margin-left: 0.3rem;
    }
    .ic-time-input {
        padding: 0.4rem 0.6rem; background: #1a1a2e;
        border: 1px solid #0f3460; color: #f0c040;
        border-radius: 6px; font-size: 0.82rem;
        width: 160px; font-style: italic;
    }
    .ic-time-input::placeholder { color: #555; font-style: italic; }

    /* IC Timestamp structured inputs */
    .ic-input-group {
        display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
    }
    .ic-edit-group {
        flex-wrap: wrap;
    }
    .ic-edit-group .form-input { flex: 1; min-width: 150px; }
    .ic-num-input {
        width: 52px; padding: 0.35rem 0.4rem; background: #1a1a2e;
        border: 1px solid #0f3460; color: #f0c040; border-radius: 5px;
        font-size: 0.82rem; text-align: center;
    }
    .ic-year-input { width: 68px; }
    .ic-select {
        padding: 0.35rem 0.4rem; background: #1a1a2e;
        border: 1px solid #0f3460; color: #f0c040; border-radius: 5px;
        font-size: 0.82rem; cursor: pointer;
    }
    .ic-label { color: #888; font-size: 0.78rem; white-space: nowrap; }
    .ic-sep { color: #555; font-size: 0.82rem; }

/* ── Public Characters ───────────────────── */
    .char-owner { font-size: 0.75rem; color: #888; margin-top: 0.15rem; }
    .search-bar { display: flex; gap: 0.5rem; }
    .search-input {
        padding: 0.5rem 0.75rem; background: #1a1a2e; border: 1px solid #0f3460;
        color: #e0e0e0; border-radius: 6px; font-size: 0.9rem; width: 250px;
    }

/* ── Outline: Add Row ────────────────────── */
    .add-row {
        display: flex; gap: 0.5rem; align-items: center;
        margin-bottom: 1rem; padding: 0.5rem 0;
    }
    .add-row .form-input { flex: 1; }
    .add-scene-row {
        margin: 0.5rem 0 0 1.5rem; padding: 0.3rem 0;
        border-top: 1px solid #0f3460;
    }

/* ── Story Settings ──────────────────────── */
    .story-settings {
        margin-top: 2rem; padding-top: 1.5rem;
        border-top: 2px solid #0f3460;
    }
    .story-settings h3 { color: #aaa; margin: 0 0 1rem 0; font-size: 1rem; }
    .setting-row {
        display: flex; align-items: flex-start; justify-content: space-between;
        padding: 0.75rem 0; border-bottom: 1px solid #0a1628;
        gap: 1rem;
    }
    .toggle-label { display: flex; flex-direction: column; }
    .toggle-label span:first-child { font-weight: 600; color: #e0e0e0; }
    .toggle-hint { font-size: 0.78rem; color: #666; margin-top: 0.15rem; }
    .btn-toggle {
        padding: 0.4rem 1rem; border-radius: 6px; cursor: pointer;
        font-size: 0.85rem; font-weight: 600; border: 1px solid #0f3460;
        background: #1a2a4e; color: #aaa; white-space: nowrap;
    }
    .btn-toggle:hover { background: #0f3460; color: #fff; }
    .btn-toggle.toggled-on { background: #e94560; color: #fff; border-color: #e94560; }
    .setting-edit { display: flex; gap: 0.5rem; flex: 1; align-items: flex-start; }
    .setting-edit .form-input { flex: 1; }
    .setting-edit textarea.form-input { resize: vertical; min-height: 50px; }
    .setting-edit .cover-preview { margin-bottom: 0.5rem; }
    .setting-edit .cover-preview img { max-height: 120px; }
    .setting-edit .form-input-file { flex: 1; }

/* ── OOC Toggle ──────────────────────────── */
    .ooc-toggle {
        display: flex; align-items: center; gap: 0.35rem;
        margin-left: auto; cursor: pointer; user-select: none;
        font-size: 0.82rem; color: #888;
    }
    .ooc-toggle input[type="checkbox"] {
        accent-color: #e94560; width: 14px; height: 14px; cursor: pointer;
    }
    .ooc-toggle:hover span { color: #ccc; }

/* ── BBCode Toolbar ──────────────────────── */
    .bb-toolbar {
        display: flex; gap: 2px; padding: 0.3rem; flex-wrap: wrap;
        background: #0d1520; border: 1px solid #0f3460;
        border-bottom: none; border-radius: 6px 6px 0 0;
    }
    .bb-toolbar + .message-input {
        border-radius: 0 0 6px 6px;
    }
    .bb-toolbar button {
        background: transparent; border: 1px solid transparent;
        color: #aaa; padding: 0.2rem 0.5rem; border-radius: 3px;
        cursor: pointer; font-size: 0.82rem; line-height: 1;
    }
    .bb-toolbar button:hover { background: #1a2a4e; color: #fff; border-color: #0f3460; }
    .toolbar-sep { width: 1px; background: #0f3460; margin: 0 0.2rem; }

/* ── Context Menu ────────────────────────── */
    .context-menu {
        position: fixed; z-index: 9999;
        background: #1a1a2e; border: 1px solid #0f3460;
        border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
        min-width: 150px; padding: 0.3rem 0;
    }
    .ctx-item {
        display: block; width: 100%; text-align: left;
        background: none; border: none; color: #e0e0e0;
        padding: 0.5rem 1rem; cursor: pointer; font-size: 0.88rem;
    }
    .ctx-item:hover { background: #0f3460; }
    .ctx-danger:hover { background: #8b1a2b; color: #ff8888; }

/* ── Modals ──────────────────────────────── */
    .modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.6);
        display: flex; align-items: center; justify-content: center;
        z-index: 10000;
    }
    .modal {
        background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
        padding: 1.5rem; min-width: 350px; max-width: 500px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    .modal-wide { min-width: 600px; max-width: 1100px; width: 85vw; }
    .modal h3 { margin: 0 0 0.75rem 0; color: #e0e0e0; }
    .modal-hint { font-size: 0.82rem; color: #888; margin: 0 0 1rem 0; }
    .modal-actions {
        display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem;
    }
    .form-group { margin-bottom: 0.75rem; }
    .form-group label { display: block; font-size: 0.82rem; color: #aaa; margin-bottom: 0.3rem; }
    .edit-textarea {
        width: 100%; resize: vertical; min-height: 350px;
        font-family: inherit; font-size: 0.95rem; line-height: 1.6;
        background: #1a1a2e; color: #e0e0e0; border: 1px solid #0f3460;
        border-radius: 6px; padding: 0.75rem; box-sizing: border-box;
    }

/* ── BBCode Rendered Content ─────────────── */
    .post-content img.bb-img { max-width: 100%; border-radius: 4px; margin: 0.3rem 0; }
    .post-content .bb-quote {
        border-left: 3px solid #4a90d9; margin: 0.5rem 0; padding: 0.5rem 1rem;
        background: rgba(74,144,217,0.08); border-radius: 0 4px 4px 0;
    }
    .post-content .bb-quote cite { display: block; font-size: 0.8rem; color: #4a90d9; margin-bottom: 0.3rem; }
    .post-content .bb-spoiler summary { cursor: pointer; color: #e94560; font-size: 0.85rem; }
    .post-content .bb-spoiler > div { padding: 0.5rem 0; }
    .post-content .bb-code {
        background: #0d1520; padding: 0.5rem; border-radius: 4px;
        font-size: 0.85rem; overflow-x: auto;
    }
    .post-content .bb-hr { border: none; border-top: 1px solid #0f3460; margin: 0.75rem 0; }
    .post-content .bb-link { color: #4a90d9; }
    .post-content .bb-link:hover { text-decoration: underline; }
    .post-content .bb-list { margin: 0.3rem 0 0.3rem 1.5rem; }
    .post-content .bb-table { border-collapse: collapse; margin: 0.5rem 0; }
    .post-content .bb-table td, .post-content .bb-table th {
        border: 1px solid #0f3460; padding: 0.3rem 0.6rem;
    }

/* ═══════════ TEXT MESSAGE / SMS UI ═══════════ */

    /* Timestamp divider between message groups */
    .sms-timestamp {
        text-align: center; font-size: 0.72rem; color: #666;
        padding: 0.75rem 0 0.4rem 0; letter-spacing: 0.02em;
    }

    /* Message row — flex container for alignment */
    .sms-row {
        display: flex; align-items: flex-end; gap: 0.4rem;
        padding: 0.1rem 0.75rem; max-width: 100%;
    }
    .sms-mine { justify-content: flex-end; }
    .sms-theirs { justify-content: flex-start; }

    /* Avatar for other people's messages */
    .sms-avatar {
        width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
        flex-shrink: 0; margin-bottom: 0.2rem;
    }
    .sms-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .sms-avatar span {
        display: flex; align-items: center; justify-content: center;
        width: 100%; height: 100%; font-size: 0.7rem; color: #fff;
        border-radius: 50%;
    }

    /* Bubble wrapper */
    .sms-bubble-wrap { max-width: 70%; display: flex; flex-direction: column; }
    .sms-bubble-wrap.sms-bubble-left { align-items: flex-start; }
    .sms-mine .sms-bubble-wrap { align-items: flex-end; }

    /* Sender name (others only) */
    .sms-sender {
        font-size: 0.7rem; font-weight: 600; padding: 0 0.6rem;
        margin-bottom: 0.1rem;
    }

    /* The bubble itself */
    .sms-bubble {
        padding: 0.5rem 0.85rem; border-radius: 18px;
        font-size: 0.92rem; line-height: 1.4;
        word-wrap: break-word; position: relative;
        color: #fff;
    }

    /* Tail shapes */
    .sms-mine .sms-bubble {
        border-bottom-right-radius: 4px;
    }
    .sms-theirs .sms-bubble {
        border-bottom-left-radius: 4px;
        background: #2a2a3e; color: #e0e0e0;
    }

    /* Override theirs background when character has custom color */
    .sms-theirs .sms-bubble[style*="background"] {
        /* uses inline style */
    }

    /* Delivered / Read status */
    .sms-status {
        font-size: 0.65rem; color: #555; padding: 0.1rem 0.4rem;
        text-align: right;
    }

    /* Text content in bubbles — no BBCode, raw text */
    .sms-text {
        white-space: pre-wrap;
    }

    /* ── Emoji Picker ────────────────────────── */
    .emoji-picker-wrap { position: relative; }
    .btn-emoji {
        background: transparent; border: 1px solid #0f3460;
        border-radius: 6px; padding: 0.3rem 0.5rem; cursor: pointer;
        font-size: 1.1rem; line-height: 1;
    }
    .btn-emoji:hover { background: #1a2a4e; }
    .emoji-panel {
        position: absolute; bottom: 100%; right: 0;
        background: #1a1a2e; border: 1px solid #0f3460;
        border-radius: 8px; padding: 0.5rem;
        display: grid; grid-template-columns: repeat(10, 1fr);
        gap: 2px; width: 320px; max-height: 200px; overflow-y: auto;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
        z-index: 100;
    }
    .emoji-btn {
        background: transparent; border: none; cursor: pointer;
        font-size: 1.2rem; padding: 0.25rem; border-radius: 4px;
        line-height: 1;
    }
    .emoji-btn:hover { background: #0f3460; }

/* ── SMS Name Column (always on left) ────── */
    .sms-name-col {
        font-size: 0.72rem; font-weight: 600; writing-mode: horizontal-tb;
        min-width: 60px; max-width: 90px; text-align: right;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        align-self: center; flex-shrink: 0;
    }

/* ═══════════════ Gallery Sections (Character Profile) ═══════════════ */
    .gallery-section {
        margin-bottom: 1.5rem;
        border: 1px solid #0f3460;
        border-radius: 8px;
        overflow: hidden;
    }
    .gallery-heading {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: #16213e; color: #e0e0e0;
        font-size: 1rem; font-weight: 600;
        cursor: pointer; user-select: none;
        list-style: none;
    }
    .gallery-heading::-webkit-details-marker { display: none; }
    .gallery-heading::before {
        content: '\25B6'; font-size: 0.65rem;
        transition: transform 0.2s;
    }
    details.gallery-section[open] > .gallery-heading::before {
        transform: rotate(90deg);
    }
    .gallery-count {
        color: #888; font-size: 0.85rem; font-weight: 400;
    }
    .gallery-section > .image-grid {
        padding: 1rem;
    }

/* ═══════════════ BBCode [gallery] Tag — Clickable Text ═══════════════ */
    .bb-gallery-link {
        color: #e94560; cursor: pointer;
        text-decoration: underline; text-decoration-style: dotted;
    }
    .bb-gallery-link:hover {
        color: #ff6b88; text-decoration-style: solid;
    }
    .gallery-popover {
        position: fixed; z-index: 10001;
        background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
        padding: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        max-width: 400px; max-height: 400px;
    }
    .gallery-popover img {
        display: block; max-width: 100%; max-height: 390px;
        object-fit: contain; border-radius: 6px;
    }

/* ═══════════════ Gallery Upload Picker (Edit Page) ═══════════════ */
    .upload-gallery-picker {
        display: flex; align-items: center; gap: 0.5rem;
        margin-bottom: 0.75rem; flex-wrap: wrap;
    }
    .upload-gallery-picker label {
        color: #888; font-size: 0.85rem; white-space: nowrap;
    }
    .gallery-or {
        color: #555; font-size: 0.8rem; font-style: italic;
    }
    .gec-id {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem; color: #555;
        font-family: monospace;
    }

/* ═══════════════ Gallery Trash (Edit Page) ═══════════════ */
    .gallery-trash-section {
        margin-top: 1.25rem; padding-top: 1rem;
        border-top: 1px dashed #333;
    }
    .gallery-trash-toggle {
        background: none; border: none; color: #888; cursor: pointer;
        font-size: 0.9rem; padding: 0.4rem 0; display: flex;
        align-items: center; gap: 0.5rem;
    }
    .gallery-trash-toggle:hover { color: #e94560; }
    .gallery-trash-arrow { font-size: 0.75rem; width: 1rem; }
    .gallery-trash-count {
        background: #2a1525; color: #e94560; border-radius: 10px;
        padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 600;
    }
    .gallery-trash-hint {
        color: #666; font-size: 0.8rem; font-style: italic;
        margin: 0.4rem 0 0.75rem;
    }
    .gallery-trash-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.6rem;
    }
    .gallery-trash-card {
        background: #1a1a2e; border: 1px solid #333; border-radius: 6px;
        overflow: hidden; opacity: 0.7; transition: opacity 0.15s;
    }
    .gallery-trash-card:hover { opacity: 1; }
    .gallery-trash-card img {
        width: 100%; height: 90px; object-fit: cover; display: block;
    }
    .gallery-trash-actions {
        display: flex; gap: 0.3rem; padding: 0.35rem;
    }
    .btn-restore {
        flex: 1; padding: 0.25rem 0.4rem; font-size: 0.7rem;
        background: rgba(16, 185, 129, 0.15); color: #10B981;
        border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 4px;
        cursor: pointer;
    }
    .btn-restore:hover { background: rgba(16, 185, 129, 0.3); }
    .btn-delete-forever {
        flex: 1; padding: 0.25rem 0.4rem; font-size: 0.7rem;
        background: rgba(233, 69, 96, 0.1); color: #e94560;
        border: 1px solid rgba(233, 69, 96, 0.25); border-radius: 4px;
        cursor: pointer;
    }
    .btn-delete-forever:hover { background: rgba(233, 69, 96, 0.25); }

/* ═══════════════ Gallery Order (Edit Page) ═══════════════ */
    .gallery-order-section {
        background: #1a1a2e; border: 1px solid #333; border-radius: 6px;
        padding: 0.75rem 1rem; margin: 0.75rem 0;
    }
    .gallery-order-label {
        display: block; font-size: 0.8rem; color: #e94560;
        text-transform: uppercase; letter-spacing: 0.04em;
        margin-bottom: 0.5rem;
    }
    .gallery-order-list { display: flex; flex-direction: column; gap: 0.35rem; }
    .gallery-order-row {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.25rem 0;
    }
    .gallery-order-pin {
        display: inline-flex; align-items: center; justify-content: center;
        width: 55px; color: #e94560; font-size: 1rem; text-align: center;
    }
    .gallery-order-name { color: #ddd; font-size: 0.9rem; }
    .gallery-order-count { color: #666; font-size: 0.8rem; }
    .gallery-privacy-toggle {
        margin-left: auto; display: flex; align-items: center; gap: 0.3rem;
        font-size: 0.8rem; color: #999; cursor: pointer;
    }
    .gallery-privacy-toggle input[type="checkbox"] { cursor: pointer; }
    .gallery-private-badge {
        font-size: 0.7rem; color: #999; margin-left: 0.4rem;
        font-style: italic;
    }

/* ═══════════════ Kink List (Profile View) ═══════════════ */
    .kink-columns {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    @media (max-width: 900px) {
        .kink-columns { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 500px) {
        .kink-columns { grid-template-columns: 1fr; }
    }
    .kink-column {
        background: #16213e; border-radius: 8px;
        border: 1px solid #0f3460; padding: 0.75rem;
    }
    .kink-col-header {
        text-align: center; padding: 0.5rem; margin: -0.75rem -0.75rem 0.5rem;
        border-radius: 8px 8px 0 0; font-size: 0.9rem; font-weight: 600;
    }
    .kink-col-always .kink-col-header { background: #10B981; color: #fff; }
    .kink-col-yes .kink-col-header { background: #3B82F6; color: #fff; }
    .kink-col-maybe .kink-col-header { background: #F59E0B; color: #1a1a2e; }
    .kink-col-no .kink-col-header { background: #EF4444; color: #fff; }
    .kink-cat-group { margin-bottom: 0.6rem; }
    .kink-cat-title {
        font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
        color: #888; margin: 0 0 0.25rem; padding-bottom: 0.2rem;
        border-bottom: 1px solid #0f3460;
    }
    .kink-item {
        display: block; font-size: 0.85rem; color: #ddd;
        padding: 0.15rem 0; line-height: 1.3;
    }
    .kink-item.kink-custom { font-style: italic; }
    .kink-empty { color: #555; font-size: 0.85rem; text-align: center; padding: 1rem 0; }

/* ═══════════════ Kink Editor (Edit Page) ═══════════════ */
    .kink-category-picker {
        display: flex; align-items: center; gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    .kink-category-picker label { color: #888; font-size: 0.85rem; }
    .kink-picker-grid {
        display: flex; flex-wrap: wrap; gap: 0.4rem;
        margin-bottom: 1rem;
    }
    .kink-btn {
        padding: 0.35rem 0.65rem; border-radius: 4px; font-size: 0.8rem;
        border: 1px solid #333; cursor: pointer; transition: all 0.15s;
        background: #1a1a2e; color: #888;
    }
    .kink-btn:hover { border-color: #666; color: #ddd; }
    .kink-btn-unset { background: #1a1a2e; color: #888; border-color: #333; }
    .kink-btn-always { background: #10B98133; color: #10B981; border-color: #10B981; }
    .kink-btn-yes { background: #3B82F633; color: #3B82F6; border-color: #3B82F6; }
    .kink-btn-maybe { background: #F59E0B33; color: #F59E0B; border-color: #F59E0B; }
    .kink-btn-no { background: #EF444433; color: #EF4444; border-color: #EF4444; }
    .kink-legend-always { color: #10B981; font-weight: 600; }
    .kink-legend-yes { color: #3B82F6; font-weight: 600; }
    .kink-legend-maybe { color: #F59E0B; font-weight: 600; }
    .kink-legend-no { color: #EF4444; font-weight: 600; }
    .kink-custom-section { margin: 1rem 0; }
    .kink-custom-section h4 { color: #e94560; font-size: 0.85rem; margin-bottom: 0.4rem; }
    .kink-custom-row {
        display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    }
    .kink-summary { margin-top: 1.25rem; }
    .kink-summary h4 { color: #e94560; font-size: 0.85rem; margin-bottom: 0.6rem; }
    .kink-summary-group { margin-bottom: 0.75rem; }
    .kink-summary-header {
        font-size: 0.8rem; padding: 0.3rem 0.6rem;
        border-radius: 4px; display: inline-block; margin-bottom: 0.35rem;
    }
    .kink-summary-items { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .kink-summary-item {
        display: inline-flex; align-items: center; gap: 0.3rem;
        padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;
    }
    .kink-remove {
        background: none; border: none; color: inherit; cursor: pointer;
        font-size: 0.9rem; padding: 0; opacity: 0.6; line-height: 1;
    }
    .kink-remove:hover { opacity: 1; }

/* ═══════════════ Section Reorder Buttons ═══════════════ */
    .section-move-btns {
        display: flex; flex-direction: column; gap: 2px; margin-right: 0.3rem;
    }
    .section-move-btn {
        background: #1a1a2e; border: 1px solid #0f3460; color: #888;
        padding: 0 0.4rem; font-size: 0.7rem; cursor: pointer;
        border-radius: 3px; line-height: 1.3; transition: all 0.15s;
    }
    .section-move-btn:hover { color: #e94560; border-color: #e94560; }

/* ═══════════════ Milestones (Profile View) ═══════════════ */
    .milestone-timeline {
        position: relative; padding-left: 2rem;
    }
    .milestone-timeline::before {
        content: ''; position: absolute; left: 0.55rem; top: 0;
        bottom: 0; width: 2px; background: #0f3460;
    }
    .milestone-card {
        position: relative; margin-bottom: 1.5rem;
    }
    .milestone-dot {
        position: absolute; left: -1.75rem; top: 0.35rem;
        width: 12px; height: 12px; border-radius: 50%;
        background: #e94560; border: 2px solid #1a1a2e;
    }
    .milestone-content {
        background: #16213e; border: 1px solid #0f3460;
        border-radius: 8px; padding: 0.85rem 1rem;
    }
    .milestone-title {
        color: #e0e0e0; font-size: 1rem; margin: 0 0 0.4rem;
    }
    .milestone-body {
        font-size: 0.9rem; color: #bbb; margin-bottom: 0.5rem;
    }
    .milestone-links {
        display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem;
    }
    .milestone-link {
        display: inline-block; padding: 0.2rem 0.6rem;
        background: #1a1a2e; border: 1px solid #0f3460;
        border-radius: 4px; font-size: 0.8rem; color: #3B82F6;
        text-decoration: none; transition: all 0.15s;
    }
    .milestone-link:hover { border-color: #3B82F6; color: #60A5FA; }
    .milestone-date {
        font-size: 0.75rem; color: #555;
    }

/* ═══════════════ Milestones (Editor) ═══════════════ */
    .milestone-editor {
        background: #16213e; border: 1px solid #0f3460;
        border-radius: 8px; padding: 0.85rem; margin-bottom: 0.75rem;
    }
    .ms-header {
        display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
    }
    .ms-link-row {
        display: flex; align-items: center; gap: 0.5rem;
        margin-bottom: 0.5rem; flex-wrap: wrap;
    }
    .ms-link-row label { color: #888; font-size: 0.85rem; white-space: nowrap; }

/* ═══════════════ Chapter/Scene Breaks (Post Feed) ═══════════════ */
    .post-chapter-break {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.75rem 0 0.4rem; margin: 0.5rem 0;
    }
    .post-chapter-break::before, .post-chapter-break::after {
        content: ''; flex: 1; height: 2px; background: #e94560;
    }
    .chapter-break-label {
        font-size: 0.85rem; font-weight: 700; color: #e94560;
        text-transform: uppercase; letter-spacing: 0.06em;
        white-space: nowrap;
    }
    .post-scene-break {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.25rem 0; margin: 0.25rem 0;
    }
    .post-scene-break::before, .post-scene-break::after {
        content: ''; flex: 1; height: 1px; background: #0f3460;
    }
    .scene-break-label {
        font-size: 0.75rem; font-weight: 500; color: #888;
        font-style: italic; white-space: nowrap;
    }

/* ═══════════════ Purgatory (Outline) ═══════════════ */
    .purgatory-section {
        margin-top: 1.5rem; padding-top: 1rem;
        border-top: 2px solid #EF444444;
    }
    .purgatory-header {
        color: #EF4444; font-size: 0.95rem; font-weight: 600;
        cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem;
        padding: 0.4rem 0; user-select: none;
    }
    .purgatory-header::-webkit-details-marker { display: none; }
    .purgatory-header::before {
        content: '▶'; font-size: 0.65rem; transition: transform 0.2s;
        display: inline-block; color: #EF4444;
    }
    .purgatory-section[open] > .purgatory-header::before { transform: rotate(90deg); }
    .purgatory-count { font-weight: 400; color: #EF444499; }
    .purgatory-hint {
        color: #666; font-size: 0.8rem; margin: 0.2rem 0 0.75rem;
    }
    .purgatory-list {
        max-height: 400px; overflow-y: auto; padding-right: 0.3rem;
    }
    .purgatory-list::-webkit-scrollbar { width: 6px; }
    .purgatory-list::-webkit-scrollbar-track { background: #0f3460; border-radius: 3px; }
    .purgatory-list::-webkit-scrollbar-thumb { background: #EF444466; border-radius: 3px; }
    .purgatory-list::-webkit-scrollbar-thumb:hover { background: #EF4444; }
    .deleted-post-card {
        background: #1a1a2e; border: 1px solid #EF444433;
        border-radius: 6px; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem;
    }
    .dp-meta {
        display: flex; align-items: center; gap: 0.5rem;
        margin-bottom: 0.35rem; flex-wrap: wrap;
    }
    .dp-char { font-weight: 600; font-size: 0.85rem; }
    .dp-type {
        font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
        color: #888; background: #0f3460; padding: 0.1rem 0.4rem; border-radius: 3px;
    }
    .dp-date { font-size: 0.75rem; color: #555; }
    .dp-preview {
        font-size: 0.85rem; color: #999; margin-bottom: 0.4rem;
        white-space: pre-wrap; overflow: hidden;
        max-height: 3.5em; line-height: 1.3;
    }
    .dp-actions { display: flex; gap: 0.4rem; }

/* ═══════════════ Notification Panel (Sidebar) ═══════════════ */
    .notif-panel {
        padding: 0.5rem 0;
        border-top: 1px solid #0f3460;
        margin-top: auto;
    }
    .notif-header {
        padding: 0.4rem 1.25rem;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #e94560;
        font-weight: 600;
    }
    .notif-item {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0.5rem 1.25rem;
        color: #c0c0d8; text-decoration: none;
        font-size: 0.85rem;
        transition: all 0.2s;
        cursor: pointer;
    }
    .notif-item:hover {
        color: #fff;
        background: rgba(233, 69, 96, 0.15);
    }
    .notif-title {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        flex: 1; min-width: 0;
    }
    .notif-badge {
        background: #e94560;
        color: #fff;
        font-size: 0.7rem; font-weight: 700;
        padding: 0.1rem 0.45rem;
        border-radius: 10px;
        margin-left: 0.5rem;
        flex-shrink: 0;
    }

    /* ── Notification collapsed summary ── */
    .notif-collapsed-summary {
        display: none; background: none; border: none; width: 100%; cursor: pointer;
    }
    .sidebar.collapsed .notif-collapsed-summary {
        display: flex; align-items: center; justify-content: center;
        position: relative; padding: 0.85rem 0 0.65rem;
        border-top: 1px solid #0f3460; margin-top: auto;
    }
    .sidebar.collapsed .notif-collapsed-summary:hover .notif-collapsed-ico { color: #e2e8f0; }
    .notif-collapsed-ico {
        font-size: 1.15rem; color: #a0a0b8; font-style: normal;
    }
    .notif-collapsed-badge {
        position: absolute; top: 10px; left: 50%; transform: translateX(10%);
        background: #e94560; color: #fff;
        font-size: 0.6rem; font-weight: 700;
        padding: 0.05rem 0.3rem; border-radius: 10px;
        min-width: 15px; text-align: center; line-height: 1.4;
    }
    .sidebar.collapsed .notif-panel { display: none; }
    .notif-header-activity { margin-top: auto; padding-top: 0.65rem; }
    .notif-panel-activity { margin-top: 0; padding-top: 0; }
    .sidebar.collapsed .notif-header-activity { display: none; }

/* ── Notification Request Buttons ─────────────── */
    .notif-request { cursor: default; }
    .notif-request:hover { background: transparent; }
    .notif-req-actions { display: flex; gap: 0.3rem; flex-shrink: 0; margin-left: 0.4rem; }
    .notif-req-btn {
        font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem;
        border-radius: 4px; border: none; cursor: pointer;
    }
    .notif-req-yes {
        background: rgba(105, 240, 174, 0.2); color: #69f0ae;
    }
    .notif-req-yes:hover { background: rgba(105, 240, 174, 0.35); }
    .notif-req-no {
        background: rgba(233, 69, 96, 0.15); color: #e94560;
    }
    .notif-req-no:hover { background: rgba(233, 69, 96, 0.3); }

/* ═══════════════════════════════════════════════ */
/*  Ephemeral Chat                                */
/* ═══════════════════════════════════════════════ */

/* ── Toast Notification ────────────────────────── */
    .chat-toast {
        position: fixed;
        bottom: 80px;
        left: 260px;
        z-index: 9001;
        background: #0f3460;
        color: #e0e0e0;
        border: 1px solid #e94560;
        border-radius: 8px;
        padding: 0.6rem 1rem;
        max-width: 300px;
        font-size: 0.85rem;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        animation: chatToastIn 0.3s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat-toast strong { color: #e94560; margin-right: 0.3rem; }
    @keyframes chatToastIn {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

/* ── Floating Chat Window ──────────────────────── */
    .chat-window {
        position: fixed;
        bottom: 80px;
        left: 260px;
        z-index: 8999;
        width: 380px;
        height: 480px;
        background: #1a1a2e;
        border: 1px solid #0f3460;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 30px rgba(0,0,0,0.6);
        overflow: hidden;
    }

/* ── Resize Handle (top-left corner) ───────────── */
    .chat-resize-handle {
        position: absolute;
        top: 0; left: 0;
        width: 16px; height: 16px;
        cursor: nw-resize;
        z-index: 10;
    }
    .chat-resize-handle::after {
        content: '';
        position: absolute;
        top: 3px; left: 3px;
        width: 8px; height: 8px;
        border-top: 2px solid #555;
        border-left: 2px solid #555;
    }

/* ── Header ────────────────────────────────────── */
    .chat-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.75rem;
        background: #16213e;
        border-bottom: 1px solid #0f3460;
        cursor: move;
        user-select: none;
        flex-shrink: 0;
    }
    .chat-title { font-weight: 600; font-size: 0.95rem; color: #e94560; }
    .chat-online-count {
        font-size: 0.75rem;
        color: #69f0ae;
        margin-right: auto;
    }
    .chat-header-btn {
        background: none; border: none; color: #8888a0;
        font-size: 1.1rem; cursor: pointer; padding: 0 0.2rem;
        line-height: 1;
    }
    .chat-header-btn:hover { color: #e94560; }

/* ── Ephemeral Banner ──────────────────────────── */
    .chat-ephemeral-banner {
        text-align: center;
        font-size: 0.7rem;
        color: #8888a0;
        padding: 0.25rem 0.5rem;
        background: rgba(15, 52, 96, 0.3);
        border-bottom: 1px solid #0f3460;
        flex-shrink: 0;
    }

/* ── Presence Pills ────────────────────────────── */
    .chat-presence-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 0.35rem 0.6rem;
        border-bottom: 1px solid #0f3460;
        flex-shrink: 0;
    }
    .chat-presence-pill {
        background: rgba(105, 240, 174, 0.15);
        color: #69f0ae;
        font-size: 0.7rem; font-weight: 600;
        padding: 0.15rem 0.55rem;
        border-radius: 12px;
        border: 1px solid rgba(105, 240, 174, 0.3);
    }

/* ── Messages ──────────────────────────────────── */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }
    .chat-msg { max-width: 80%; }
    .chat-msg-own { align-self: flex-end; text-align: right; }
    .chat-msg-other { align-self: flex-start; }
    .chat-msg-sender {
        font-size: 0.7rem; color: #e94560; font-weight: 600;
        margin-bottom: 0.1rem;
    }
    .chat-msg-bubble {
        display: inline-block;
        padding: 0.4rem 0.65rem;
        border-radius: 10px;
        font-size: 0.85rem;
        line-height: 1.35;
        word-break: break-word;
        white-space: pre-wrap;
    }
    .chat-msg-own .chat-msg-bubble {
        background: #0f3460;
        color: #e0e0e0;
        border-bottom-right-radius: 3px;
    }
    .chat-msg-other .chat-msg-bubble {
        background: #16213e;
        color: #e0e0e0;
        border: 1px solid #0f3460;
        border-bottom-left-radius: 3px;
    }
    .chat-msg-time {
        font-size: 0.6rem; color: #666;
        margin-top: 0.1rem;
    }

/* ── Typing Indicator ──────────────────────────── */
    .chat-typing {
        font-size: 0.75rem;
        color: #8888a0;
        font-style: italic;
        padding: 0.15rem 0.75rem;
        flex-shrink: 0;
    }

/* ── Input Row ─────────────────────────────────── */
    .chat-input-row {
        display: flex;
        gap: 0.4rem;
        padding: 0.5rem 0.6rem;
        border-top: 1px solid #0f3460;
        background: #16213e;
        flex-shrink: 0;
    }
    .chat-input {
        flex: 1;
        background: #1a1a2e;
        border: 1px solid #0f3460;
        border-radius: 6px;
        color: #e0e0e0;
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        outline: none;
    }
    .chat-input:focus { border-color: #e94560; }
    .chat-input::placeholder { color: #555; }
    .chat-send-btn {
        background: #e94560;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 0.4rem 0.85rem;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }
    .chat-send-btn:hover:not(:disabled) { background: #d13350; }
    .chat-send-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Chat scrollbar ────────────────────────────── */
    .chat-messages::-webkit-scrollbar { width: 5px; }
    .chat-messages::-webkit-scrollbar-track { background: transparent; }
    .chat-messages::-webkit-scrollbar-thumb { background: #0f3460; border-radius: 3px; }

/* ── Conversation List ─────────────────────────────── */
    .chat-conv-list {
        flex: 1; overflow-y: auto; padding: 0;
    }
    .chat-conv-item {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0.55rem 0.75rem; cursor: pointer;
        border-bottom: 1px solid rgba(15, 52, 96, 0.5);
        transition: background 0.15s;
    }
    .chat-conv-item:hover { background: rgba(233, 69, 96, 0.08); }
    .chat-conv-unread { background: rgba(15, 52, 96, 0.3); }
    .chat-conv-info { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1; }
    .chat-conv-name {
        font-size: 0.88rem; color: #e0e0e0; font-weight: 500;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .chat-conv-unread .chat-conv-name { font-weight: 700; color: #fff; }
    .chat-conv-group-tag {
        font-size: 0.6rem; color: #8888a0; background: rgba(136, 136, 160, 0.15);
        padding: 0.05rem 0.35rem; border-radius: 4px; flex-shrink: 0;
    }
    .conv-badge {
        background: #e94560; color: #fff;
        font-size: 0.65rem; font-weight: 700;
        padding: 0.1rem 0.4rem; border-radius: 10px;
        min-width: 16px; text-align: center; flex-shrink: 0;
    }
    .online-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #69f0ae; flex-shrink: 0;
    }
    .chat-empty {
        padding: 1.5rem 0.75rem; text-align: center;
        font-size: 0.8rem; color: #666; font-style: italic;
    }

/* ── Chat Requests Section ────────────────────────── */
    .chat-requests-section {
        border-bottom: 1px solid #0f3460;
        background: rgba(233, 69, 96, 0.04);
    }
    .chat-section-label {
        font-size: 0.7rem; color: #8888a0; text-transform: uppercase;
        letter-spacing: 0.04em; padding: 0.4rem 0.75rem 0.15rem;
        font-weight: 600;
    }
    .chat-request-item {
        display: flex; align-items: center; gap: 0.4rem;
        padding: 0.4rem 0.75rem;
    }
    .chat-request-name {
        flex: 1; font-size: 0.85rem; color: #e0e0e0; font-weight: 500;
    }
    .chat-req-btn {
        font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 4px;
        border: none; cursor: pointer; font-weight: 600;
    }
    .chat-req-accept {
        background: rgba(105, 240, 174, 0.2); color: #69f0ae;
    }
    .chat-req-accept:hover { background: rgba(105, 240, 174, 0.35); }
    .chat-req-decline {
        background: rgba(233, 69, 96, 0.15); color: #e94560;
    }
    .chat-req-decline:hover { background: rgba(233, 69, 96, 0.3); }

/* ── New Group View ───────────────────────────────── */
    .chat-newgroup-body {
        flex: 1; overflow-y: auto; padding: 0.75rem;
    }
    .chat-contact-picker {
        display: flex; flex-direction: column; gap: 0.15rem;
        margin-top: 0.3rem;
    }
    .chat-contact-option {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.35rem 0.5rem; cursor: pointer;
        border-radius: 4px; font-size: 0.85rem; color: #e0e0e0;
    }
    .chat-contact-option:hover { background: rgba(233, 69, 96, 0.08); }
    .chat-contact-option input[type="checkbox"] {
        accent-color: #e94560; width: 14px; height: 14px;
    }

/* ── Chat Emoji Picker ────────────────────────────── */
    .chat-emoji-wrap { position: relative; flex-shrink: 0; }
    .chat-emoji-btn {
        background: none; border: 1px solid #0f3460; border-radius: 6px;
        font-size: 1.1rem; cursor: pointer; padding: 0.25rem 0.4rem;
        line-height: 1;
    }
    .chat-emoji-btn:hover { border-color: #e94560; }
    .chat-emoji-picker {
        position: absolute; bottom: 100%; left: 0;
        margin-bottom: 4px;
        width: 240px; max-height: 160px; overflow-y: auto;
        background: #16213e; border: 1px solid #0f3460;
        border-radius: 8px; padding: 0.4rem;
        display: flex; flex-wrap: wrap; gap: 2px;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
        z-index: 10;
    }
    .chat-emoji-item {
        font-size: 1.2rem; cursor: pointer; padding: 0.15rem 0.25rem;
        border-radius: 4px; line-height: 1.3;
    }
    .chat-emoji-item:hover { background: rgba(233, 69, 96, 0.15); }
    .chat-emoji-picker::-webkit-scrollbar { width: 5px; }
    .chat-emoji-picker::-webkit-scrollbar-track { background: transparent; }
    .chat-emoji-picker::-webkit-scrollbar-thumb { background: #0f3460; border-radius: 3px; }

/* ── Chat Online Dropdown ─────────────────────────── */
    .chat-search-row {
        padding: 0.4rem 0.6rem; flex-shrink: 0;
    }
    .chat-online-select {
        width: 100%; background: #16213e; border: 1px solid #0f3460;
        border-radius: 6px; color: #e0e0e0; padding: 0.35rem 0.5rem;
        font-size: 0.82rem; outline: none; cursor: pointer;
        -webkit-appearance: none; appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238888a0'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.6rem center;
        padding-right: 1.8rem;
    }
    .chat-online-select:focus { border-color: #e94560; }
    .chat-online-select option { background: #16213e; color: #e0e0e0; }
    .chat-offline-opt { color: #666 !important; }

/* ── Chat scrollbar (conv list) ───────────────────── */
    .chat-conv-list::-webkit-scrollbar { width: 5px; }
    .chat-conv-list::-webkit-scrollbar-track { background: transparent; }
    .chat-conv-list::-webkit-scrollbar-thumb { background: #0f3460; border-radius: 3px; }

/* ── Owner Link ──────────────────────────────────── */
    .char-owner { font-size: 0.78rem; color: #666; }
    .char-owner-link {
        color: #e94560; text-decoration: none; font-size: 0.78rem;
    }
    .char-owner-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════ */
/*  User Profile Page                             */
/* ═══════════════════════════════════════════════ */

    .user-profile-page {
        padding: 1.5rem 2rem; overflow-y: auto; height: 100%;
    }
    .user-profile-page > .back-link { margin-bottom: 0.6rem; }
    .user-profile-header {
        display: flex; align-items: center; gap: 1.25rem;
        padding-bottom: 1.5rem; border-bottom: 1px solid #0f3460;
        margin-bottom: 1.5rem;
    }
    .user-profile-avatar {
        width: 80px; height: 80px; border-radius: 50%;
        background: #0f3460; display: flex; align-items: center;
        justify-content: center; flex-shrink: 0; overflow: hidden;
    }
    .user-profile-avatar img {
        width: 100%; height: 100%; object-fit: cover;
    }
    .user-profile-initial {
        font-size: 2rem; font-weight: 700; color: #e94560;
    }
    .user-profile-info { flex: 1; }
    .user-profile-info h1 { margin: 0 0 0.15rem; font-size: 1.4rem; color: #e0e0e0; }
    .user-profile-username { font-size: 0.9rem; color: #8888a0; margin-bottom: 0.3rem; }
    .user-profile-meta {
        display: flex; gap: 1rem; font-size: 0.78rem; color: #666;
    }
    .user-profile-actions { flex-shrink: 0; }
    .user-profile-section-title {
        font-size: 1.1rem; color: #e94560; margin: 0 0 1rem;
        padding-bottom: 0.4rem; border-bottom: 1px solid #0f3460;
    }

/* ═══════════════════════════════════════════════ */
/*  Authors Page                                  */
/* ═══════════════════════════════════════════════ */

    .authors-page { padding: 1.5rem 2rem; overflow-y: auto; height: 100%; }
    .authors-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }
    .author-card {
        display: flex; align-items: center; gap: 1rem;
        background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
        padding: 1rem 1.25rem; cursor: pointer; transition: all 0.2s;
    }
    .author-card:hover {
        border-color: #e94560; background: rgba(233, 69, 96, 0.04);
    }
    .author-avatar {
        width: 52px; height: 52px; border-radius: 50%;
        background: #0f3460; display: flex; align-items: center;
        justify-content: center; flex-shrink: 0; overflow: hidden;
    }
    .author-avatar img {
        width: 100%; height: 100%; object-fit: cover;
    }
    .author-initial { font-size: 1.3rem; font-weight: 700; color: #e94560; }
    .author-info { min-width: 0; }
    .author-name {
        font-weight: 600; font-size: 1rem; color: #e0e0e0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .author-username { font-size: 0.8rem; color: #8888a0; margin-bottom: 0.25rem; }
    .author-stats { font-size: 0.78rem; color: #888; }
    .author-joined { font-size: 0.72rem; color: #555; margin-top: 0.15rem; }

/* ── Responsive: chat on small screens ──────────── */
    @media (max-width: 600px) {
        .chat-toast { left: 1rem; }
        .chat-window { left: 0.5rem; right: 0.5rem; width: auto; bottom: 70px; }
        .user-profile-header { flex-direction: column; text-align: center; }
        .user-profile-meta { justify-content: center; }
    }

/* ── Admin Dashboard ──────────────────────────────── */
    .dashboard-section { margin-bottom: 1.5rem; }
    .dashboard-section h3 {
        font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
        color: #8888a0; margin: 0 0 0.75rem 0; padding-bottom: 0.4rem;
        border-bottom: 1px solid #0f3460;
    }
    .stat-cards { display: flex; gap: 1rem; flex-wrap: wrap; }
    .stat-card {
        flex: 1; min-width: 120px;
        background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
        padding: 1rem; text-align: center;
    }
    .stat-card .stat-value { font-size: 1.5rem; font-weight: 700; color: #e0e0e0; }
    .stat-card .stat-label { font-size: 0.75rem; color: #8888a0; text-transform: uppercase; margin-top: 0.25rem; }
    .online-users { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .online-user {
        display: flex; align-items: center; gap: 0.4rem;
        padding: 0.3rem 0.75rem; background: #16213e; border: 1px solid #0f3460;
        border-radius: 1rem; font-size: 0.85rem; color: #e0e0e0;
    }
    .online-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
    .activity-feed { display: flex; flex-direction: column; gap: 0.4rem; }
    .activity-item {
        display: flex; align-items: center; gap: 0.6rem;
        padding: 0.5rem 0.75rem; background: #16213e; border: 1px solid #0f3460;
        border-radius: 6px; font-size: 0.85rem;
    }
    .activity-icon { font-size: 1rem; flex-shrink: 0; }
    .activity-text { flex: 1; color: #e0e0e0; }
    .activity-time { color: #8888a0; font-size: 0.75rem; white-space: nowrap; }

/* ═══════════════════════════════════════════════ */
/*  Home Page                                      */
/* ═══════════════════════════════════════════════ */

.home-page { padding: 1.5rem 2rem; max-width: 1200px; margin: 0 auto; }
.home-header { margin-bottom: 1.5rem; }
.home-header h1 { margin: 0; font-size: 1.6rem; color: #e94560; }

/* ── World Clocks ── */
.home-clocks {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    margin-bottom: 1.5rem;
}
.clock-card {
    background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
    padding: 1rem; text-align: center;
}
.clock-label { font-size: 0.8rem; color: #8888a0; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.clock-time { font-size: 1.5rem; font-weight: 600; color: #e0e0e0; }
.clock-date { font-size: 0.85rem; color: #8888a0; margin-top: 0.2rem; }

/* ── News + Stats ── */
.home-middle {
    display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.home-news {
    background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
    padding: 1.25rem; min-height: 200px;
}
.home-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.home-section-header h2 { margin: 0; font-size: 1.1rem; color: #e0e0e0; }
.manage-link { font-size: 0.8rem; color: #e94560; text-decoration: none; }
.manage-link:hover { text-decoration: underline; }

.news-item {
    padding: 0.75rem 0; border-bottom: 1px solid #0f3460;
}
.news-item:last-child { border-bottom: none; }
.news-title { font-weight: 600; color: #e0e0e0; margin-bottom: 0.3rem; }
.news-content { font-size: 0.9rem; color: #b0b0c0; line-height: 1.5; white-space: pre-wrap; }
.news-meta { font-size: 0.75rem; color: #8888a0; margin-top: 0.4rem; }

.home-stats {
    background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
    padding: 1.25rem;
}
.home-stats h2 { margin: 0 0 1rem 0; font-size: 1.1rem; color: #e0e0e0; }
.stat-list { display: flex; flex-direction: column; gap: 0.75rem; }
.home-stat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0.75rem; background: #1a1a2e; border-radius: 6px;
}
.home-stat-row .stat-label { color: #8888a0; font-size: 0.9rem; }
.home-stat-row .stat-value { font-size: 1.2rem; font-weight: 600; color: #e94560; }
.stats-section-title { margin: 1.25rem 0 0.75rem 0; font-size: 1.1rem; color: #e0e0e0; padding-top: 1rem; border-top: 1px solid #0f3460; }
.backup-tag { margin-top: 1rem; padding: 0.5rem 0.75rem; background: #1a1a2e; border-radius: 6px; font-size: 0.8rem; color: #8888a0; border-left: 3px solid #e94560; }

/* ── Global Chat ── */
.home-chat {
    background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
    padding: 1.25rem;
}
.home-chat h2 { margin: 0 0 0.75rem 0; font-size: 1.1rem; color: #e0e0e0; }

.global-chat-messages {
    height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.5rem; background: #1a1a2e; border-radius: 6px; margin-bottom: 0.75rem;
}
.gchat-msg {
    display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem;
    padding: 0.3rem 0;
}
.gchat-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; color: #fff; overflow: hidden;
}
.gchat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gchat-name { font-weight: 600; flex-shrink: 0; }
.gchat-text { color: #e0e0e0; word-break: break-word; flex: 1; }
.gchat-time { color: #8888a0; font-size: 0.75rem; white-space: nowrap; flex-shrink: 0; margin-left: auto; }

.global-chat-input { display: flex; gap: 0.5rem; }
.global-chat-input .form-input { flex: 1; }
.global-chat-input .btn-primary { flex-shrink: 0; }

/* ── Home responsive ── */
@media (max-width: 768px) {
    .home-page { padding: 1rem; }
    .home-clocks { grid-template-columns: repeat(2, 1fr); }
    .home-middle { grid-template-columns: 1fr; }
}

/* ══════════ Members Section ══════════ */
.members-section { margin-top: 1.5rem; padding: 1rem; background: var(--bg-secondary, #1a1a2e); border-radius: 8px; }
.members-section h3 { margin: 0 0 0.75rem; font-size: 1rem; color: var(--text-primary, #e0e0e0); }
.members-list { display: flex; flex-direction: column; gap: 0.5rem; }
.member-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; background: var(--bg-tertiary, #16213e); border-radius: 6px; }
.member-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid; overflow: hidden; flex-shrink: 0; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-weight: bold; font-size: 0.75rem; }
.member-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member-char { font-weight: 600; font-size: 0.85rem; }
.member-user { font-size: 0.75rem; color: var(--text-secondary, #888); }
.member-role { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.role-owner { background: #e94560; color: #fff; }
.role-editor { background: #4a90d9; color: #fff; }
.role-writer { background: #333; color: #aaa; }
.card-remove { position: absolute; top: 4px; right: 4px; font-size: 0.65rem; padding: 1px 6px; opacity: 0; transition: opacity 0.15s; }
.char-card-sm { position: relative; }
.char-card-sm:hover .card-remove { opacity: 1; }

/* (notes/research removed — replaced by documents panel) */

/* ── Minimal layout (login page) ── */
.minimal-layout { min-height: 100vh; background: #1a1a2e; }

/* ── Security / Login Audit ── */
.login-status {
    display: inline-block; padding: 0.15rem 0.4rem; border-radius: 4px;
    font-size: 0.7rem; font-weight: 600;
}
.login-status-ok { background: #1a3a2e; color: #69f0ae; }
.login-status-fail { background: #3a1a1a; color: #ff6b6b; }
.login-status-locked { background: #3a2a1a; color: #ffab40; }
.login-status-session { background: #1a2a3a; color: #64b5f6; }
.login-status-content { background: #1a3a3a; color: #4dd0e1; }
.login-status-delete { background: #3a1a2a; color: #ef9a9a; }
.login-status-import { background: #2a1a3a; color: #ce93d8; }
.login-status-upload { background: #2a3a1a; color: #aed581; }
.login-status-admin { background: #3a3a1a; color: #fff176; }
.sec-row-fail td { background: rgba(255, 107, 107, 0.04); }
.sec-row-locked td { background: rgba(255, 171, 64, 0.06); }
.security-filters {
    display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap;
}

/* ── Scrivener Import Wizard ── */
.scriv-wizard { max-width: 1100px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
.scriv-wizard h2 { margin-bottom: 1rem; }

.scriv-steps {
    display: flex; gap: 0.25rem; margin-bottom: 1.5rem;
    border-bottom: 1px solid #0f3460; padding-bottom: 1rem;
}
.scriv-step {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem; border-radius: 6px;
    font-size: 0.82rem; color: #555;
}
.scriv-step-num {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #1a1a2e; border: 1px solid #333;
    font-size: 0.75rem; font-weight: 600;
}
.scriv-step.active { color: #e0e0e0; }
.scriv-step.active .scriv-step-num {
    background: #e94560; border-color: #e94560; color: #fff;
}
.scriv-step.done { color: #69f0ae; }
.scriv-step.done .scriv-step-num {
    background: #1a3a2e; border-color: #69f0ae; color: #69f0ae;
}

.scriv-panel {
    background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
    padding: 1.25rem;
}
.scriv-panel h3 { margin-bottom: 0.75rem; font-size: 1.1rem; }

.scriv-preview-layout {
    display: flex; gap: 1rem; margin-top: 0.75rem;
    min-height: 400px;
}
.scriv-tree-panel {
    flex: 1; max-height: 500px; overflow-y: auto;
    border: 1px solid #0f3460; border-radius: 6px; padding: 0.5rem;
}
.scriv-preview-pane {
    flex: 1; border: 1px solid #0f3460; border-radius: 6px; padding: 0.75rem;
    max-height: 500px; overflow-y: auto;
}
.scriv-preview-pane h4 { margin-bottom: 0.5rem; color: #7bb8e8; }

.scriv-tree-section { margin-bottom: 0.75rem; }
.scriv-section-header {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem;
    padding-bottom: 0.3rem; border-bottom: 1px solid #0f3460;
}
.scriv-section-header h4 { margin: 0; font-size: 0.9rem; }

.scriv-tree-item {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0; font-size: 0.82rem;
}
.scriv-tree-item.scene { padding-left: 1.5rem; }
.scriv-tree-item input[type="checkbox"] { margin: 0; cursor: pointer; }
.scriv-icon { font-size: 0.9rem; flex-shrink: 0; }
.scriv-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scriv-title.clickable { cursor: pointer; }
.scriv-title.clickable:hover { color: #7bb8e8; }
.scriv-meta { color: #666; font-size: 0.75rem; margin-left: auto; flex-shrink: 0; }
.scriv-expand-btn {
    background: none; border: none; color: #888; cursor: pointer;
    padding: 0 0.2rem; font-size: 0.7rem;
}
.scriv-expand-btn:hover { color: #e0e0e0; }
.scriv-synopsis-badge {
    font-size: 0.65rem; background: rgba(74, 144, 217, 0.15);
    color: #7bb8e8; padding: 0.1rem 0.3rem; border-radius: 3px;
    margin-left: 0.3rem; flex-shrink: 0;
}
.scriv-toggle {
    font-size: 0.82rem; display: flex; align-items: center; gap: 0.3rem;
    margin-left: auto; cursor: pointer; color: #aaa;
}
.scriv-preview-synopsis {
    font-size: 0.82rem; color: #aaa; background: rgba(74, 144, 217, 0.08);
    padding: 0.4rem 0.6rem; border-radius: 4px; margin-bottom: 0.5rem;
}
.scriv-preview-text {
    font-size: 0.78rem; white-space: pre-wrap; word-wrap: break-word;
    color: #ccc; line-height: 1.5; max-height: 380px; overflow-y: auto;
    background: transparent; border: none; padding: 0; margin: 0;
    font-family: inherit;
}
.scriv-empty { color: #555; font-style: italic; font-size: 0.85rem; }

.scriv-nav-buttons {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #0f3460;
}

/* Mapping */
.scriv-mapping-stats {
    font-size: 0.85rem; color: #7bb8e8; margin-bottom: 0.75rem;
}
.scriv-mapping-group { margin-bottom: 1rem; }
.scriv-mapping-group-header {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 0.4rem; font-size: 0.85rem;
}
.scriv-mapping-table { overflow-x: auto; }
.scriv-mapping-table table {
    width: 100%; border-collapse: collapse; font-size: 0.8rem;
}
.scriv-mapping-table th {
    text-align: left; padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #0f3460; color: #888; font-weight: 600;
}
.scriv-mapping-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #0a1628; }
.scriv-unmapped { margin-top: 0.75rem; font-size: 0.82rem; color: #888; }
.scriv-unmapped summary { cursor: pointer; }
.scriv-unmapped ul { margin-top: 0.3rem; padding-left: 1.2rem; }

/* Character picker */
.scriv-char-picker {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
    max-height: 200px; overflow-y: auto;
    padding: 0.5rem; border: 1px solid #0f3460; border-radius: 6px;
}
.scriv-char-option {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
.scriv-char-option input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Review summary */
.scriv-summary {
    display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.scriv-summary-card {
    background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px;
    padding: 0.75rem 1.25rem; text-align: center; min-width: 100px;
}
.scriv-summary-num { font-size: 1.5rem; font-weight: 700; color: #7bb8e8; }
.scriv-summary-label { font-size: 0.78rem; color: #888; }
.scriv-review-details { font-size: 0.85rem; }
.scriv-review-details details { margin-bottom: 0.5rem; }
.scriv-review-details summary { cursor: pointer; color: #aaa; }
.scriv-review-details ul { padding-left: 1.2rem; margin-top: 0.3rem; }

/* Progress */
.scriv-progress { margin-top: 0.75rem; }
.scriv-progress-bar {
    height: 6px; background: #1a1a2e; border-radius: 3px; overflow: hidden;
}
.scriv-progress-fill {
    height: 100%; background: #e94560; border-radius: 3px;
    transition: width 0.3s ease;
}

/* ── Image Picker ─────────────────────── */
.img-picker-sources {
    display: flex; gap: 0.75rem; justify-content: center; margin-top: 0.5rem;
}
.img-picker-source-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    background: #1a1a2e; border: 1px solid #0f3460; border-radius: 8px;
    padding: 1.25rem 1.5rem; cursor: pointer; color: #e0e0e0;
    font-size: 0.9rem; transition: border-color 0.2s, background 0.2s;
    flex: 1; min-width: 0;
}
.img-picker-source-card:hover {
    border-color: #e94560; background: #1e2a4a;
}
.img-picker-source-icon { font-size: 1.5rem; }
.img-picker-back {
    background: none; border: none; color: #7bb8e8; cursor: pointer;
    font-size: 0.85rem; padding: 0; margin-bottom: 0.5rem;
}
.img-picker-back:hover { color: #e94560; }
.img-picker-filter {
    margin-bottom: 0.5rem; font-size: 0.85rem;
}
.img-picker-list {
    max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.img-picker-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.6rem; border-radius: 6px; cursor: pointer;
    background: none; border: none; color: #e0e0e0; text-align: left;
    font-size: 0.9rem; width: 100%; transition: background 0.15s;
}
.img-picker-item:hover { background: #1e2a4a; }
.img-picker-item-avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.img-picker-item-avatar-placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.8rem;
}
.img-picker-item-count {
    margin-left: auto; font-size: 0.78rem; color: #888;
}
.img-picker-galleries {
    max-height: 400px; overflow-y: auto;
}
.img-picker-select-btn {
    position: absolute; bottom: 4px; right: 4px;
    background: #e94560; color: #fff; border: none; border-radius: 4px;
    padding: 3px 10px; font-size: 0.75rem; cursor: pointer;
    opacity: 0; transition: opacity 0.15s;
}
.image-card:hover .img-picker-select-btn { opacity: 1; }

/* ── Import Hub ── */
.import-hub { max-width: 800px; margin: 0 auto; padding: 2rem; }
.import-hub h2 { margin-bottom: 1.5rem; }
.import-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.import-hub-card {
    background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
    padding: 1.5rem; text-decoration: none; color: #e0e0e0;
    transition: border-color 0.2s, background 0.2s; display: block;
}
.import-hub-card:hover { border-color: #e94560; background: #1a2744; }
.import-hub-card h3 { margin: 0 0 0.5rem; color: #7bb8e8; }
.import-hub-card p { font-size: 0.85rem; color: #aaa; margin: 0; }

/* ── F-List Import extras ── */
.flist-file-list { max-height: 450px; overflow-y: auto; }
.flist-file-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.25rem; font-size: 0.82rem; cursor: pointer;
    border-bottom: 1px solid #0a1628;
}
.flist-file-row:hover { background: rgba(74, 144, 217, 0.06); }
.flist-file-row.active { background: rgba(74, 144, 217, 0.12); }
.flist-file-row input[type="checkbox"] { margin: 0; cursor: pointer; }
.flist-preview { max-height: 450px; overflow-y: auto; }
.flist-message { padding: 0.3rem 0; font-size: 0.8rem; border-bottom: 1px solid #0a1628; }
.flist-message-meta { font-size: 0.72rem; color: #666; margin-bottom: 0.15rem; }
.flist-char-tag { font-weight: 600; }
.flist-message-content { color: #ccc; white-space: pre-wrap; word-wrap: break-word; }
.flist-action { font-style: italic; color: #c0a0e0; }

/* ── LocationProfile.razor ─────────────────────────── */
    .loc-profile-banner { min-height: 200px; }
    .loc-profile-header {
        display: flex; align-items: flex-end; gap: 1.25rem; width: 100%;
    }
    .loc-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
    .loc-breadcrumb {
        font-size: 0.82rem; color: #e94560; text-decoration: none;
        white-space: nowrap;
    }
    .loc-breadcrumb:hover { text-decoration: underline; }
    .loc-profile-content {
        padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem;
    }
    .loc-scenes-list { display: flex; flex-direction: column; gap: 0.75rem; }
    .loc-chapter-group {
        background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
        padding: 0.75rem 1rem;
    }
    .loc-chapter-name {
        margin: 0 0 0.5rem; font-size: 0.82rem; text-transform: uppercase;
        color: #e94560; letter-spacing: 0.04em;
    }
    .loc-scene-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0.4rem 0.5rem; border-radius: 4px;
        text-decoration: none; color: #ccc; font-size: 0.88rem;
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .loc-scene-row:last-child { border-bottom: none; }
    .loc-scene-row:hover { background: rgba(233, 69, 96, 0.08); }
    .loc-scene-title { flex: 1; }
    .loc-scene-posts { font-size: 0.75rem; color: #666; flex-shrink: 0; margin-left: 0.5rem; }

    /* ── Location profile expansion ── */
    .loc-name { text-decoration: none; display: block; }
    .loc-name:hover { text-decoration: underline; }
    .loc-privacy-badge { font-size: 0.65em; margin-left: 0.4rem; vertical-align: middle; opacity: 0.7; }
    .loc-char-link {
        display: flex; align-items: center; gap: 0.4rem;
        text-decoration: none; color: #ccc; font-size: 0.85rem;
        padding: 0.2rem 0;
    }
    .loc-char-link:hover { color: #e94560; }
    .loc-char-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
    .loc-atmosphere-block { margin-bottom: 0.75rem; }
    .loc-atmosphere-block:last-child { margin-bottom: 0; }
    .loc-atm-label {
        margin: 0 0 0.25rem; font-size: 0.85rem; color: #e94560;
        text-transform: uppercase; letter-spacing: 0.03em;
    }
    .loc-back-bar { padding: 0.75rem 1.25rem 0; }

/* ── Discord Settings (/settings/discord) ─────────── */
    .ds-page {
        padding: 2.5rem 2rem; overflow-y: auto; height: 100%;
        max-width: 720px; margin: 0 auto;
    }

    /* Header */
    .ds-header { margin-bottom: 2rem; }
    .ds-back {
        background: none; border: none; color: #6a6a8a; font-size: 0.82rem;
        cursor: pointer; padding: 0; margin-bottom: 0.75rem; display: block;
        transition: color 0.2s;
    }
    .ds-back:hover { color: #a0b4c8; }
    .ds-header h1 {
        margin: 0 0 0.4rem; font-size: 1.5rem; font-weight: 700; color: #e8e8f0;
        letter-spacing: -0.01em;
    }
    .ds-subtitle {
        color: #6a6a8a; font-size: 0.88rem; margin: 0; line-height: 1.5;
    }

    /* Toast */
    .ds-toast {
        padding: 0.75rem 1.15rem; border-radius: 10px; font-size: 0.85rem;
        margin-bottom: 1.5rem; border: 1px solid; line-height: 1.4;
    }
    .ds-toast-ok {
        background: rgba(40,167,69,0.08); border-color: rgba(40,167,69,0.25); color: #69f0ae;
    }
    .ds-toast-err {
        background: rgba(233,69,96,0.08); border-color: rgba(233,69,96,0.25); color: #ff8a9e;
    }

    /* Section cards */
    .ds-section {
        background: #16213e; border: 1px solid #0f3460; border-radius: 12px;
        padding: 1.75rem; margin-bottom: 1.25rem;
    }
    .ds-section-head {
        margin-bottom: 1.25rem; padding-bottom: 1rem;
        border-bottom: 1px solid rgba(15,52,96,0.7);
    }
    .ds-section-head h2 {
        margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 600; color: #d0d0e0;
    }
    .ds-section-head p {
        margin: 0; font-size: 0.82rem; color: #6a6a8a; line-height: 1.5;
    }

    /* Notification rows */
    .ds-rows { display: flex; flex-direction: column; gap: 0; }
    .ds-row {
        padding: 1.1rem 0; border-bottom: 1px solid rgba(15,52,96,0.5);
        transition: background 0.15s;
    }
    .ds-row:last-child { border-bottom: none; padding-bottom: 0; }
    .ds-row:first-child { padding-top: 0; }
    .ds-row-off { opacity: 0.45; }

    .ds-row-main {
        display: flex; justify-content: space-between; align-items: flex-start;
        margin-bottom: 0.6rem; gap: 1rem;
    }
    .ds-row-label {
        font-weight: 600; font-size: 0.92rem; color: #e0e0e0;
    }
    .ds-channel-link {
        color: inherit; text-decoration: none; transition: color 0.2s;
    }
    .ds-channel-link:hover { color: #7289da; }
    .ds-ext { font-size: 0.65rem; opacity: 0.4; margin-left: 0.15rem; }

    .ds-row-meta {
        display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
        font-size: 0.78rem; color: #6a6a8a;
    }
    .ds-all-stories { color: #5a9a6a; }
    .ds-badge {
        display: inline-block; font-size: 0.68rem; color: #a0b4c8;
        background: rgba(114,137,218,0.15); padding: 0.1rem 0.45rem;
        border-radius: 4px; font-weight: 500;
    }

    /* Action pills */
    .ds-row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
    .ds-pill {
        background: #1a1a2e; color: #8888a0; border: 1px solid #0f3460;
        padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.75rem;
        cursor: pointer; transition: all 0.15s; font-weight: 500;
    }
    .ds-pill:hover { border-color: #3a5a8a; color: #c0c0d0; background: #1a2a4e; }
    .ds-pill-on {
        background: rgba(40,167,69,0.12); color: #69f0ae;
        border-color: rgba(40,167,69,0.3);
    }
    .ds-pill-on:hover { background: rgba(40,167,69,0.2); }
    .ds-pill-off {
        background: rgba(233,69,96,0.08); color: #ff8a9e;
        border-color: rgba(233,69,96,0.2);
    }
    .ds-pill-off:hover { background: rgba(233,69,96,0.15); }
    .ds-pill-danger:hover {
        background: rgba(233,69,96,0.12); color: #ff8a9e;
        border-color: rgba(233,69,96,0.3);
    }

    /* Edit panel */
    .ds-edit-panel {
        margin-top: 1rem; padding: 1.15rem; border-radius: 10px;
        background: #1a1a2e; border: 1px solid #0f3460;
    }
    .ds-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

    /* Empty state */
    .ds-empty {
        text-align: center; padding: 1.5rem; color: #4a4a6a;
        font-size: 0.88rem; font-style: italic;
    }

    /* Form elements */
    .ds-form { display: flex; flex-direction: column; gap: 0; }
    .ds-fg { margin-bottom: 1.15rem; }
    .ds-fg-label {
        display: block; font-size: 0.75rem; color: #7a8a9a;
        margin-bottom: 0.4rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em;
    }
    .ds-input {
        display: block; width: 100%; padding: 0.65rem 0.9rem;
        background: #0e1628; border: 1px solid #1a2a4e; border-radius: 8px;
        color: #e0e0e0; font-size: 0.88rem; outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .ds-input:focus {
        border-color: #5865F2;
        box-shadow: 0 0 0 3px rgba(88,101,242,0.12);
    }
    select.ds-input { cursor: pointer; }
    .ds-hint {
        display: block; font-size: 0.75rem; color: #4a5a6a;
        margin-top: 0.4rem; line-height: 1.5;
    }
    .ds-link {
        color: #7289da; text-decoration: none; font-weight: 500;
        transition: color 0.2s;
    }
    .ds-link:hover { color: #a0b4ff; }
    .ds-input-row { display: flex; gap: 0.5rem; }
    .ds-input-row .ds-input { flex: 1; }

    /* Radio + checkboxes */
    .ds-radios {
        display: flex; gap: 1.25rem; margin-bottom: 0.5rem;
    }
    .ds-radio {
        display: flex; align-items: center; gap: 0.4rem;
        font-size: 0.85rem; color: #b0b0c0; cursor: pointer;
    }
    .ds-radio input[type="radio"] { accent-color: #5865F2; cursor: pointer; }

    .ds-check-list {
        display: flex; flex-direction: column; gap: 0.2rem;
        padding: 0.75rem; background: #0e1628; border-radius: 8px;
        border: 1px solid #1a2a4e; max-height: 200px; overflow-y: auto;
    }
    .ds-check {
        display: flex; align-items: center; gap: 0.45rem;
        font-size: 0.85rem; color: #b0b0c0; cursor: pointer;
        padding: 0.3rem 0.2rem; border-radius: 4px;
        transition: background 0.1s;
    }
    .ds-check:hover { background: rgba(88,101,242,0.06); }
    .ds-check input[type="checkbox"] { accent-color: #5865F2; cursor: pointer; }

    /* Buttons */
    .ds-btn {
        padding: 0.5rem 1.1rem; border-radius: 8px; font-size: 0.82rem;
        font-weight: 600; cursor: pointer; border: none; transition: all 0.15s;
    }
    .ds-btn-save {
        background: #5865F2; color: #fff;
    }
    .ds-btn-save:hover { background: #4752c4; }
    .ds-btn-save:disabled { opacity: 0.4; cursor: default; }
    .ds-btn-cancel {
        background: transparent; color: #6a6a8a; border: 1px solid #1a2a4e;
    }
    .ds-btn-cancel:hover { color: #a0a0b0; border-color: #3a4a6e; }
    .ds-btn-action {
        background: #1a2a4e; color: #a0b4c8; white-space: nowrap;
    }
    .ds-btn-action:hover { background: #2a3a5e; color: #fff; }
    .ds-btn-action:disabled { opacity: 0.4; cursor: default; }

    /* Connect box */
    .ds-connect-box {
        text-align: center; padding: 1.5rem 1rem;
        border: 1px dashed #1a2a4e; border-radius: 10px;
        background: rgba(14,22,40,0.5);
    }
    .ds-connect-box p {
        margin: 0 0 1rem; font-size: 0.85rem; color: #6a6a8a;
    }
    .ds-btn-discord {
        background: #5865F2; color: #fff; border: none; border-radius: 8px;
        padding: 0.65rem 2rem; font-size: 0.9rem; font-weight: 600;
        cursor: pointer; transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(88,101,242,0.25);
    }
    .ds-btn-discord:hover {
        background: #4752c4;
        box-shadow: 0 4px 16px rgba(88,101,242,0.35);
        transform: translateY(-1px);
    }
    .ds-btn-discord.ds-btn-sm {
        padding: 0.45rem 1.2rem; font-size: 0.82rem;
        text-decoration: none; display: inline-block;
    }

    .ds-disconnect {
        margin-top: 1.25rem; padding-top: 1rem;
        border-top: 1px solid rgba(15,52,96,0.5);
    }

    /* Bot setup row */
    .ds-bot-row {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem;
    }
    .ds-bot-info { display: flex; flex-direction: column; gap: 0.2rem; }
    .ds-bot-name { font-size: 0.92rem; font-weight: 600; color: #d0d0e0; }
    .ds-bot-perms { font-size: 0.75rem; color: #4a5a6a; }

    @media (max-width: 600px) {
        .ds-page { padding: 1.25rem 1rem; }
        .ds-section { padding: 1.15rem; }
        .ds-radios { flex-direction: column; gap: 0.4rem; }
        .ds-input-row { flex-direction: column; }
        .ds-row-main { flex-direction: column; gap: 0.25rem; }
        .ds-bot-row { flex-direction: column; align-items: flex-start; }
    }