/* ==================================================
   CCA STYLESHEET — Cyber Comics Alliance
   Dark anime / cyberpunk theme
   ================================================== */

/* ---- RESET ---- */

*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html { scroll-behavior: smooth; }

:root {
--bg-page: #0b0b19;
--bg-card: #141428;
--bg-panel: #111128;
--bg-input: #0d0d1a;
--bg-elevated: #1e1e3a;
--bg-modal: #16162e;
--text-primary: #d8d8e8;
--text-heading: #e0e0f0;
--text-secondary: #b8b8d0;
--text-muted: #a0a0b8;
--text-faint: #808098;
--border-color: #2a2a4a;
--link-color: #a78bfa;
--link-hover: #c4b5fd;
--overlay: rgba(0,0,0,.65);
--shadow: rgba(0,0,0,.3);

/* motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 180ms;
--dur-base: 280ms;
--dur-slow: 420ms;

/* card depth */
--shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
--shadow-card-hover: 0 4px 8px rgba(0,0,0,.5), 0 24px 48px rgba(167,139,250,.18);
}

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

[data-theme="light"] {
/* Layered surfaces — page is lightest, cards sit on a faintly tinted
   base so elevation reads without borders. Inputs stay bright but
   earn depth from an inner shadow (see overrides below). */
--bg-page:     #f7f8fc;
--bg-card:     #ffffff;
--bg-panel:    #ffffff;
--bg-input:    #ffffff;
--bg-elevated: #ffffff;
--bg-modal:    #ffffff;

/* Typography — soft dark-grey, never pure black. */
--text-primary:   #2a2d45;
--text-heading:   #1d1f35;
--text-secondary: #474a63;
--text-muted:     #6b6e86;
--text-faint:     #8d90a6;

/* Hairline borders — visible enough to divide, faint enough to
   avoid boxy UI. */
--border-color: #e6e8f0;

/* Accent — still the platform purple, but a half-step softer so it
   doesn't scream on white. Hover bumps back to the punchier hue. */
--link-color:  #8b5cf6;
--link-hover:  #7c3aed;

--overlay: rgba(22, 20, 55, .25);
--shadow:  rgba(60, 50, 100, .06);

/* Soft layered shadows — diffused, faint purple tint. */
--shadow-card:       0 1px 2px rgba(60, 50, 100, .04), 0 4px 16px rgba(60, 50, 100, .06);
--shadow-card-hover: 0 2px 4px rgba(60, 50, 100, .06), 0 12px 32px rgba(139, 92, 246, .14);
}

/* Body wash — a subtle multi-stop gradient so the page never reads
   as a flat white canvas. Three faintly coloured blobs drifting under
   everything give the light mode the same depth the dark mode gets
   from its ambient glow layers. */
[data-theme="light"] body {
    background:
        radial-gradient(ellipse 70% 50% at 15% 0%,  rgba(139, 92, 246, .06), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 10%, rgba(236, 72, 153, .04), transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(96, 165, 250, .04), transparent 60%),
        #f7f8fc;
    background-attachment: fixed;
}

/* Inputs get a whisper-soft inner shadow so they read as "raised"
   without relying on a harsh border. Focus glow is the accent but at
   reduced intensity — no neon in light mode. */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 2px rgba(60, 50, 100, .03);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow    var(--dur-fast) var(--ease-out);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--link-color);
    box-shadow:
        inset 0 1px 2px rgba(60, 50, 100, .03),
        0 0 0 3px rgba(139, 92, 246, .12);
    outline: none;
}

/* Cards in light mode gain soft diffused lift — no harsh drop shadows. */
[data-theme="light"] .card,
[data-theme="light"] .adm-stat-card,
[data-theme="light"] .lb-board,
[data-theme="light"] .profile-panel,
[data-theme="light"] .post-card,
[data-theme="light"] .alib-manage-info {
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(60, 50, 100, .05);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .adm-stat-card:hover,
[data-theme="light"] .post-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Oryx / AI panel — match the softer palette, dial glows down.
   Dark mode lives on neon; light mode has no business copying that. */
[data-theme="light"] .ai-fab {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    box-shadow: 0 4px 14px rgba(139, 92, 246, .25);
}
[data-theme="light"] .ai-fab:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, .35);
}
[data-theme="light"] .bt-oryx-btn:hover {
    box-shadow: 0 4px 14px rgba(139, 92, 246, .22);
}
[data-theme="light"] .ai-panel,
[data-theme="light"] .ai-dock {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    border: 1px solid rgba(60, 50, 100, .08);
    box-shadow: 0 20px 60px rgba(60, 50, 100, .12);
}
/* The AI-assistant head-mark pulse was tuned for a dark background —
   soften it so it reads as a gentle breathe on white. */
[data-theme="light"] @keyframes ai-head-mark-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(139, 92, 246, .2)); }
    50%      { filter: drop-shadow(0 0 10px rgba(139, 92, 246, .35)); }
}

/* Buttons — soft rounded filled for primary, ghost for secondary. Kill
   the harsh outline variants that carry over from dark mode. */
[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    box-shadow: 0 2px 8px rgba(139, 92, 246, .25);
}
[data-theme="light"] .btn-primary:hover {
    box-shadow: 0 4px 14px rgba(139, 92, 246, .35);
}
[data-theme="light"] .btn {
    border: 1px solid transparent;
}

/* Modals & popovers — diffused lift, whisper-edge. */
[data-theme="light"] .modal-content,
[data-theme="light"] .auth-modal,
[data-theme="light"] .notif-panel {
    background: #ffffff;
    border: 1px solid rgba(60, 50, 100, .06);
    box-shadow: 0 24px 64px rgba(60, 50, 100, .14);
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: var(--bg-page);
color: var(--text-primary);
min-height: 100vh;
line-height: 1.6;
overflow-x: hidden;
}

a { color: var(--link-color); text-decoration: none; transition: color .2s; }
a:hover { color: var(--link-hover); }

ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ---- UTILITIES ---- */

.btn {
display: inline-block;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: .95rem;
font-weight: 600;
transition: background .25s, transform .15s, box-shadow .25s;
text-align: center;
}
.btn:active { transform: scale(.97); }

.btn-primary {
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
box-shadow: 0 4px 14px rgba(124,58,237,.35);
}
.btn-primary:hover {
background: linear-gradient(135deg, #6d28d9, #9333ea);
box-shadow: 0 6px 20px rgba(124,58,237,.5);
}

.btn-outline {
background: transparent;
color: #a78bfa;
border: 1px solid #a78bfa;
}
.btn-outline:hover {
background: #a78bfa;
color: #0b0b19;
}

.btn-block { width: 100%; }

.gradient-text {
background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #c084fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.section-title {
color: #fff;
font-size: 1.5rem;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 40px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, #7c3aed, transparent);
}

/* ---- FADE-IN ANIMATION ---- */

.fade-up {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
.delay-1 { transition-delay: .15s; }
.delay-2 { transition-delay: .3s; }
.delay-3 { transition-delay: .45s; }

/* ---- NAVBAR ---- */

/* Navbar styles moved to CONTEXTUAL NAVBAR section below */

/* ---- SIDEBAR ---- */

.sidebar-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 190;
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.sidebar-overlay.active {
opacity: 1;
pointer-events: auto;
}

.sidebar {
position: fixed;
top: 0; left: 0;
width: 280px;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
background: rgba(12,12,24,.97);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
display: flex;
flex-direction: column;
padding: 0;
padding-bottom: calc(env(safe-area-inset-bottom) + 72px);
transform: translateX(-100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
z-index: 200;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
/* Desktop has no bottom nav, so drop the extra padding. */
@media (min-width: 769px) {
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
}
.sidebar.active { transform: translateX(0); }

/* user section */
.sb-user {
display: flex;
align-items: center;
gap: 12px;
padding: 24px 20px 20px;
text-decoration: none;
color: inherit;
border-bottom: 1px solid rgba(255,255,255,.05);
-webkit-tap-highlight-color: transparent;
}
.sb-user-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #a855f7);
display: flex; align-items: center; justify-content: center;
font-size: .95rem; font-weight: 700; color: #fff;
flex-shrink: 0; overflow: hidden;
}
.sb-user-avatar.has-img { background: none; }
.sb-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-user-info strong { display: block; font-size: .9rem; color: #fff; }
.sb-user-info span { font-size: .7rem; color: var(--text-faint); }

.sb-guest { padding: 24px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.05); }
.sb-guest-btn {
width: 100%; padding: 10px; border-radius: 10px;
background: var(--link-color); color: #fff; border: none;
font-size: .85rem; font-weight: 600; cursor: pointer;
}

/* nav links */
.sb-nav {
display: flex;
flex-direction: column;
padding: 12px 10px 4px;
}

.sb-link {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-radius: 12px;
color: #b0b0cc;
font-size: .88rem;
font-weight: 500;
text-decoration: none;
transition: background .15s, color .15s;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.sb-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.sb-link.sb-active {
background: rgba(124,58,237,.1);
color: var(--link-color);
font-weight: 600;
}
.sb-link svg { flex-shrink: 0; }

.sb-badge {
position: absolute;
right: 14px;
min-width: 18px; height: 18px;
border-radius: 9px;
background: #ef4444;
color: #fff;
font-size: .6rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
padding: 0 5px;
}

.sb-admin { margin-top: 4px; }

/* collapsible groups */
.sb-group {
padding: 0 10px;
margin-top: 4px;
}
.sb-group-title {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 12px;
color: #8888a8;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
transition: color .15s;
text-transform: uppercase;
letter-spacing: .05em;
}
.sb-group-title::-webkit-details-marker { display: none; }
.sb-group-title:hover { color: #ccc; }
.sb-group[open] .sb-group-title { color: #b0b0cc; }

.sb-group-body {
padding: 2px 0 4px 28px;
display: flex;
flex-direction: column;
gap: 2px;
}

.sb-sub {
display: block;
padding: 9px 14px;
border-radius: 10px;
color: #9898b8;
font-size: .84rem;
font-weight: 500;
text-decoration: none;
background: none;
border: none;
text-align: left;
cursor: pointer;
width: 100%;
font-family: inherit;
transition: background .12s, color .12s;
-webkit-tap-highlight-color: transparent;
}
.sb-sub:hover { background: rgba(255,255,255,.04); color: #ddd; }
.sb-sub.sb-active { color: var(--link-color); background: rgba(124,58,237,.06); }

/* footer — theme toggle */
.sb-footer {
margin-top: auto;
padding: 16px 20px;
border-top: 1px solid rgba(255,255,255,.05);
}
.sb-theme {
display: flex;
align-items: center;
justify-content: space-between;
}
.sb-theme span {
font-size: .78rem;
color: var(--text-faint);
}
.sb-theme-switch {
width: 40px; height: 22px;
border-radius: 11px;
border: none;
background: rgba(255,255,255,.1);
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .2s;
}
.sb-theme-switch::after {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
transition: transform .2s;
}
[data-theme="light"] .sb-theme-switch { background: var(--link-color); }
[data-theme="light"] .sb-theme-switch::after { transform: translateX(18px); }

/* light mode sidebar */
[data-theme="light"] .sidebar { background: rgba(255,255,255,.97); }
[data-theme="light"] .sb-user { border-color: #eee; }
[data-theme="light"] .sb-user-info strong { color: var(--text-heading); }
[data-theme="light"] .sb-user-info span { color: #888; }
[data-theme="light"] .sb-link { color: #444; }
[data-theme="light"] .sb-link:hover { background: rgba(0,0,0,.03); color: #111; }
[data-theme="light"] .sb-link.sb-active { background: rgba(124,58,237,.08); color: var(--link-color); }
[data-theme="light"] .sb-group-title { color: #999; }
[data-theme="light"] .sb-group-title:hover { color: #555; }
[data-theme="light"] .sb-group[open] .sb-group-title { color: #666; }
[data-theme="light"] .sb-sub { color: #555; }
[data-theme="light"] .sb-sub:hover { background: rgba(0,0,0,.03); color: #222; }
[data-theme="light"] .sb-sub.sb-active { color: var(--link-color); }
[data-theme="light"] .sb-footer { border-color: #eee; }
[data-theme="light"] .sb-theme span { color: #888; }

/* hide old sidebar classes that no longer exist */
.sidebar-divider, .sidebar-label, .sidebar-header { display: none; }

/* ============================================
   PROFILE / ACCOUNT PANEL (.pfp-*)
   ============================================ */

.profile-panel {
    position: fixed;
    top: 16px; right: 16px; bottom: 16px;
    width: 360px; max-width: calc(100vw - 32px);
    padding: 20px;
    background:
        radial-gradient(480px 240px at 50% -10%, rgba(124,58,237,.2), transparent 60%),
        linear-gradient(180deg, rgba(22,14,44,.96), rgba(10,6,22,.96));
    border: 1px solid rgba(167,139,250,.16);
    border-radius: 20px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 0 60px rgba(124,58,237,.12);
    backdrop-filter: blur(24px) saturate(1.15);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    transform: translateX(calc(100% + 24px));
    transition: transform .32s cubic-bezier(.22,1,.36,1);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
}
.profile-panel.active { transform: translateX(0); }

/* ---- cards ---- */
.pfp-card {
    padding: 22px 20px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- identity card (top) ---- */
.pfp-id-card {
    text-align: center;
    padding-top: 24px;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.pfp-id-card::before {
    content: "";
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 220px; height: 160px;
    background: radial-gradient(ellipse at center, rgba(167,139,250,.35), transparent 65%);
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
}
.pfp-id-card > * { position: relative; z-index: 1; }

.pfp-avatar-wrap {
    position: relative;
    display: inline-block;
    margin: 0 auto 14px;
}
.pfp-avatar {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    border: 2px solid rgba(167,139,250,.28);
    box-shadow: 0 12px 30px rgba(124,58,237,.4), 0 0 0 4px rgba(167,139,250,.08);
}
.pfp-avatar.has-img { background: none; }
.pfp-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pfp-avatar-edit {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid rgba(10,6,22,1);
    box-shadow: 0 6px 14px rgba(124,58,237,.5);
    transition: transform .18s, box-shadow .18s;
}
.pfp-avatar-edit:hover {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 10px 20px rgba(124,58,237,.65);
}

.pfp-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.pfp-handle {
    font-size: .82rem;
    font-weight: 500;
    color: rgba(232,228,245,.6);
    margin: 0 0 8px;
    letter-spacing: .01em;
}
.pfp-id {
    display: inline-block;
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .74rem;
    letter-spacing: .04em;
    color: rgba(232,228,245,.52);
    background: rgba(255,255,255,.04);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.05);
    margin: 0 0 12px;
}
.pfp-guest-note {
    font-size: .84rem;
    color: rgba(232,228,245,.55);
    margin: 2px 0 0;
}
.pfp-no-guild {
    font-size: .78rem;
    color: rgba(232,228,245,.45);
    margin: 6px 0 0;
    font-style: italic;
}
.pfp-guilds {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 2px;
}

/* ---- settings card ---- */
.pfp-settings-card {
    padding: 14px 14px;
}
.pfp-group + .pfp-group { margin-top: 6px; }

.pfp-group-title {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(167,139,250,.7);
    margin: 4px 8px 8px;
}

.pfp-divider {
    height: 1px;
    margin: 10px 4px;
    background: linear-gradient(90deg, transparent, rgba(167,139,250,.18), transparent);
}

.pfp-row {
    width: 100%;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;
    color: rgba(232,228,245,.92);
    text-align: left;
    cursor: pointer;
    transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.pfp-row + .pfp-row { margin-top: 6px; }
.pfp-row:hover {
    transform: translateY(-1px);
    background: rgba(167,139,250,.08);
    border-color: rgba(167,139,250,.28);
    box-shadow: 0 8px 22px rgba(124,58,237,.2);
}
.pfp-row:active { transform: translateY(0); }

.pfp-row-ico {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(167,139,250,.12);
    color: #c4b1ff;
    border: 1px solid rgba(167,139,250,.18);
}
.pfp-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pfp-row-text strong {
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.005em;
}
.pfp-row-text small {
    font-size: .72rem;
    color: rgba(232,228,245,.5);
    line-height: 1.3;
}
.pfp-row-arrow {
    color: rgba(232,228,245,.35);
    transition: color .18s, transform .18s;
}
.pfp-row:hover .pfp-row-arrow {
    color: #c4b1ff;
    transform: translateX(2px);
}

/* Danger (logout) variant */
.pfp-row-danger .pfp-row-ico {
    background: rgba(239,68,68,.1);
    color: #fca5a5;
    border-color: rgba(239,68,68,.22);
}
.pfp-row-danger:hover {
    background: rgba(239,68,68,.1);
    border-color: rgba(239,68,68,.4);
    box-shadow: 0 8px 22px rgba(239,68,68,.22);
}
.pfp-row-danger:hover .pfp-row-ico {
    background: rgba(239,68,68,.2);
    color: #fecaca;
}
.pfp-row-danger:hover .pfp-row-text strong { color: #fecaca; }

/* ---- guest card ---- */
.pfp-guest-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px;
}
.pfp-guest-card .btn { width: 100%; }

/* ---- legacy compatibility: older .profile-avatar rules elsewhere ---- */
.profile-avatar.has-img { background: none; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- light theme ---- */
[data-theme="light"] .profile-panel {
    background:
        radial-gradient(480px 240px at 50% -10%, rgba(124,58,237,.1), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,246,255,.9));
    border-color: rgba(124,58,237,.18);
    box-shadow: 0 30px 80px rgba(40,20,80,.18), 0 0 40px rgba(124,58,237,.08);
}
[data-theme="light"] .pfp-card {
    background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(248,246,255,.7));
    border-color: rgba(124,58,237,.1);
}
[data-theme="light"] .pfp-name { color: var(--text-heading); }
[data-theme="light"] .pfp-id { color: var(--text-muted); background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .pfp-row {
    background: rgba(0,0,0,.02);
    border-color: rgba(0,0,0,.05);
    color: var(--text-primary);
}
[data-theme="light"] .pfp-row:hover {
    background: rgba(124,58,237,.06);
    border-color: rgba(124,58,237,.2);
}
[data-theme="light"] .pfp-row-text strong { color: var(--text-heading); }
[data-theme="light"] .pfp-row-text small { color: var(--text-muted); }
[data-theme="light"] .pfp-avatar-edit { border-color: #fff; }

@media (max-width: 480px) {
    .profile-panel {
        top: 12px; right: 12px; bottom: 12px;
        width: calc(100vw - 24px);
        padding: 16px;
    }
    .pfp-avatar { width: 76px; height: 76px; font-size: 1.9rem; }
}

/* ---- HERO SECTION ---- */

.hero {
text-align: center;
padding: 70px 24px 50px;
background: linear-gradient(180deg, #111128 0%, #0b0b19 100%);
}

/* Generic .hero-logo — used by img-based logos on other pages
   (e.g. home.php). The homepage-hero override below replaces the
   visual rendering with a masked silhouette + animated gradient. */
.hero-logo {
display: block;
margin: 0 auto 18px;
width: 200px;
height: auto;
border-radius: 16px;
}

/* Homepage hero logo (the div in index.php): silhouette comes from the
   original PNG's alpha (mask-image), color comes from the same
   --brand-gradient that paints "Comics" in the title. Both run the
   same shimmer keyframe so they drift in lockstep. The bounding box
   is circular so any gradient bleed reads as a brand badge. */
.sg-hero-content .hero-logo {
aspect-ratio: 1 / 1;
border: 0;
border-radius: 50%;
box-shadow: none;
background-color: transparent;
background-image: var(--brand-gradient);
background-size: 240% 240%;
background-repeat: no-repeat;
-webkit-mask-image: url('images/cca_logo.png');
        mask-image: url('images/cca_logo.png');
-webkit-mask-position: center;
        mask-position: center;
-webkit-mask-size: contain;
        mask-size: contain;
-webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
-webkit-mask-mode: alpha;
        mask-mode: alpha;
}

.hero h1 {
font-size: 2.6rem;
margin-bottom: 8px;
}

.hero-sub {
color: #a0a0b8;
font-size: 1.1rem;
margin-bottom: 4px;
}

.welcome-tag {
display: inline-block;
margin-top: 12px;
padding: 6px 18px;
background: rgba(167,139,250,.1);
border: 1px solid rgba(167,139,250,.2);
border-radius: 20px;
font-size: .9rem;
color: #c4b5fd;
}
.welcome-tag code {
background: rgba(167,139,250,.15);
padding: 2px 6px;
border-radius: 4px;
font-size: .85rem;
}

/* ---- GUILD GRID ---- */

.guild-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
max-width: 960px;
margin: 36px auto 0;
padding: 0 16px;
}

.guild-card {
background: rgba(22,22,46,.7);
border: 1px solid #2a2a4a;
border-radius: 14px;
padding: 28px 20px;
text-align: center;
transition: border-color .3s, transform .3s, box-shadow .3s;
}
.guild-card:hover {
border-color: #7c3aed;
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(124,58,237,.2);
}

.guild-icon { font-size: 2.2rem; margin-bottom: 10px; }

.guild-card h3 {
color: #c4b5fd;
margin-bottom: 8px;
font-size: 1.1rem;
}
.guild-card p {
color: #a0a0b8;
font-size: .9rem;
margin-bottom: 16px;
line-height: 1.5;
}

.continue-box {
display: flex;
align-items: center;
justify-content: center;
}

/* ---- ANIME GRID ---- */

.featured, .trending {
padding: 48px 24px;
max-width: 1100px;
margin: 0 auto;
}

.anime-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
}

.anime-card {
background: #141428;
border: 1px solid #2a2a4a;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.anime-card:hover {
border-color: #7c3aed;
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(124,58,237,.18);
}

.anime-card img {
width: 100%;
height: 250px;
object-fit: cover;
}

.anime-card-body { padding: 12px 14px; }

.anime-card h3 {
font-size: .92rem;
color: #e0e0f0;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.anime-score {
font-size: .82rem;
color: #a0a0b8;
}

.universe-label {
display: inline-block;
margin-top: 6px;
padding: 2px 10px;
border-radius: 10px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
background: rgba(124,58,237,.15);
color: #a78bfa;
}

/* skeleton loader */
.anime-card.skeleton {
pointer-events: none;
}
.skel-img {
width: 100%;
height: 250px;
background: linear-gradient(110deg, #1a1a30 30%, #222240 50%, #1a1a30 70%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
}
.skel-text {
height: 14px;
margin: 14px 14px 8px;
border-radius: 4px;
background: linear-gradient(110deg, #1a1a30 30%, #222240 50%, #1a1a30 70%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
}
.skel-text.short { width: 50%; margin-top: 0; }

@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

/* ---- CAROUSEL ---- */

.carousel {
display: flex;
align-items: center;
gap: 12px;
}

.carousel-track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-behavior: smooth;
flex: 1;
padding: 8px 0;
scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track .anime-card { min-width: 180px; flex-shrink: 0; }

.scroll-btn {
background: rgba(22,22,46,.8);
color: #a78bfa;
border: 1px solid #2a2a4a;
font-size: 1.5rem;
width: 42px; height: 42px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: .25s;
}
.scroll-btn:hover {
background: #7c3aed;
color: #fff;
border-color: #7c3aed;
box-shadow: 0 0 16px rgba(124,58,237,.4);
}

/* ---- ACTIVITY ---- */

.activity {
padding: 48px 24px;
max-width: 800px;
margin: 0 auto;
}

.activity-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: rgba(22,22,46,.6);
border: 1px solid #2a2a4a;
border-radius: 10px;
margin-bottom: 10px;
font-size: .95rem;
color: #c0c0d8;
transition: border-color .2s;
}
.activity-list li:hover { border-color: #3a3a5a; }

.activity-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #a78bfa;
flex-shrink: 0;
box-shadow: 0 0 8px rgba(167,139,250,.5);
}

/* ---- ABOUT ---- */

.about {
padding: 48px 24px;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.about p {
color: #a0a0b8;
line-height: 1.8;
font-size: 1rem;
}

/* ---- STRUCTURE (writers) ---- */

.structure {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
max-width: 900px;
margin: 0 auto;
padding: 48px 24px;
}

.role {
background: rgba(22,22,46,.7);
border: 1px solid #2a2a4a;
border-radius: 14px;
padding: 28px 24px;
text-align: center;
transition: border-color .3s, transform .3s;
}
.role:hover {
border-color: #7c3aed;
transform: translateY(-3px);
}

.role-icon { font-size: 2rem; margin-bottom: 10px; }
.role h3 { color: #c4b5fd; margin-bottom: 8px; }
.role p { color: #a0a0b8; font-size: .9rem; line-height: 1.5; }

/* ---- LEADERBOARD ---- */

.lb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px 48px;
}

.lb-board {
background: rgba(20,20,40,.5);
border: 1px solid #2a2a4a;
border-radius: 14px;
padding: 20px;
}

.lb-board-title {
font-size: 1rem;
color: #fff;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #2a2a4a;
}

.lb-empty {
color: #606080;
font-size: .9rem;
padding: 12px 0;
}

.lb-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
transition: background .2s;
}
.lb-card:hover {
background: rgba(167,139,250,.05);
}

.lb-rank {
width: 30px; height: 30px;
border-radius: 50%;
background: #2a2a4a;
color: #c0c0d8;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: .85rem;
flex-shrink: 0;
}

.lb-rank-gold   { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.lb-rank-silver { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #fff; }
.lb-rank-bronze { background: linear-gradient(135deg, #b45309, #92400e); color: #fff; }

.lb-info { flex: 1; }
.lb-info h4 { color: #e0e0f0; font-size: .9rem; }
.lb-info p { color: #a0a0b8; font-size: .8rem; }

/* ---- POPUPS (join, anime) ---- */

.overlay-popup {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.65);
backdrop-filter: blur(4px);
justify-content: center;
align-items: center;
z-index: 500;
}

.popup-box {
background: #16162e;
border: 1px solid #2a2a4a;
border-radius: 16px;
padding: 32px;
width: 380px;
max-width: 92%;
position: relative;
animation: popIn .3s ease;
}

@keyframes popIn {
from { opacity: 0; transform: scale(.92) translateY(10px); }
to   { opacity: 1; transform: scale(1) translateY(0); }
}

.popup-close {
position: absolute;
top: 14px; right: 18px;
font-size: 1.5rem;
cursor: pointer;
color: #a0a0b8;
transition: color .2s;
line-height: 1;
}
.popup-close:hover { color: #fff; }

/* ---- AUTH MODAL (redesigned) ---- */

.auth-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 600;
background: rgba(0, 0, 0, .6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.auth-overlay.active {
display: flex;
justify-content: center;
align-items: flex-start;
}

.auth-card {
position: relative;
width: 90%;
max-width: 360px;
margin: 40px auto 60px;
padding: 24px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
animation: authSlideIn .3s ease-out;
overflow: visible;
}

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

/* close button */
.auth-close {
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
color: rgba(255, 255, 255, .35);
cursor: pointer;
padding: 4px;
border-radius: 50%;
transition: color .2s, background .2s;
line-height: 0;
z-index: 2;
}
.auth-close:hover {
color: #fff;
background: rgba(255, 255, 255, .06);
}

/* title + subtitle */
.auth-title {
text-align: center;
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
letter-spacing: -.01em;
}
.auth-subtitle {
text-align: center;
font-size: .8rem;
color: rgba(255, 255, 255, .4);
margin-bottom: 20px;
}

/* panels (login, signup, etc.) */
.auth-panel {
animation: authFadePanel .25s ease;
}
@keyframes authFadePanel {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}

/* fields */
.auth-field {
margin-bottom: 16px;
}
.auth-field label {
display: block;
font-size: .7rem;
font-weight: 500;
color: rgba(255, 255, 255, .45);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 6px;
}
.auth-field input {
width: 100%;
padding: 11px 14px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 999px;
color: #e0e0f0;
font-size: .9rem;
outline: none;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.auth-field input:focus {
border-color: rgba(124, 58, 237, .6);
box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
transform: scale(1.01);
}
.auth-field input::placeholder {
color: rgba(255, 255, 255, .2);
}

/* password wrapper with eye toggle */
.auth-input-wrap {
position: relative;
}
.auth-input-wrap input {
padding-right: 44px;
}
.auth-eye {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(255, 255, 255, .3);
cursor: pointer;
padding: 4px;
line-height: 0;
transition: color .2s;
}
.auth-eye:hover {
color: rgba(255, 255, 255, .6);
}

/* submit button */
.auth-btn {
display: block;
width: 100%;
height: 48px;
margin-top: 24px;
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
font-size: .9rem;
font-weight: 600;
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 0 20px rgba(124, 58, 237, .2);
transition: transform .15s ease, box-shadow .25s ease;
letter-spacing: .02em;
}
.auth-btn:hover {
box-shadow: 0 0 28px rgba(124, 58, 237, .35);
}
.auth-btn:active {
transform: scale(.97);
}
.auth-btn:disabled {
opacity: .55;
cursor: not-allowed;
transform: none;
}

/* switch link */
.auth-switch {
text-align: center;
margin-top: 12px;
font-size: .82rem;
color: rgba(255, 255, 255, .35);
}
.auth-switch a {
color: #a78bfa;
text-decoration: none;
transition: color .2s;
}
.auth-switch a:hover {
color: #c4b5fd;
}

/* error message */
.auth-error {
padding: 10px 14px;
margin-bottom: 16px;
background: rgba(220, 38, 38, .08);
border: 1px solid rgba(220, 38, 38, .25);
border-radius: 10px;
color: #f87171;
font-size: .82rem;
line-height: 1.4;
animation: authFadePanel .2s ease;
}

/* guild picker (signup) */
.auth-guilds {
    margin: 4px 0 18px;
}
.auth-guilds-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 10px;
    letter-spacing: .01em;
}
.auth-guilds-hint {
    font-weight: 500;
    color: rgba(255, 255, 255, .35);
    margin-left: 4px;
}
.auth-guilds-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.auth-guild-card {
    --tint: 167, 139, 250;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .12s, box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.auth-guild-card:hover {
    border-color: rgba(var(--tint), .45);
    background: rgba(var(--tint), .06);
    transform: translateY(-1px);
}
.auth-guild-card:has(.auth-guild-input:checked) {
    border-color: rgba(var(--tint), .75);
    background: linear-gradient(140deg, rgba(var(--tint), .2), rgba(var(--tint), .06));
    box-shadow: 0 8px 24px rgba(var(--tint), .2), 0 0 0 1px rgba(var(--tint), .35) inset;
}
.auth-guild-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.auth-guild-ico {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--tint), .12);
    color: rgba(var(--tint), 1);
    margin-bottom: 4px;
}
.auth-guild-card:has(.auth-guild-input:checked) .auth-guild-ico {
    background: rgba(var(--tint), .22);
    box-shadow: 0 0 0 1px rgba(var(--tint), .35), 0 6px 14px rgba(var(--tint), .22);
}
.auth-guild-name {
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.005em;
    line-height: 1.1;
}
.auth-guild-blurb {
    font-size: .7rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.3;
}
.auth-guild-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--tint), 1);
    color: #0b0719;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s, transform .18s;
    box-shadow: 0 0 0 2px rgba(11, 7, 25, .9);
}
.auth-guild-card:has(.auth-guild-input:checked) .auth-guild-check {
    opacity: 1;
    transform: scale(1);
}
.auth-guild-card:focus-within {
    outline: 2px solid rgba(var(--tint), .6);
    outline-offset: 2px;
}

/* per-guild tints (RGB so we can mix alpha via var) */
.auth-guild-mangakas { --tint: 244, 114, 182; } /* pink */
.auth-guild-artisan  { --tint: 251, 146, 60;  } /* orange */
.auth-guild-writer   { --tint: 167, 139, 250; } /* purple */
.auth-guild-editor   { --tint: 103, 232, 249; } /* cyan */

[data-theme="light"] .auth-guild-card {
    background: rgba(0, 0, 0, .02);
    border-color: rgba(0, 0, 0, .1);
}
[data-theme="light"] .auth-guild-name { color: var(--text-heading); }
[data-theme="light"] .auth-guild-blurb { color: var(--text-muted); }
[data-theme="light"] .auth-guilds-label { color: var(--text-secondary); }

/* anime character */
.auth-character {
position: absolute;
bottom: -20px;
right: -10px;
width: 100px;
height: 100px;
background-image: url('images/cca_logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: .12;
pointer-events: none;
z-index: 0;
}

/* responsive */
@media (min-width: 480px) {
.auth-card {
margin-top: 80px;
padding: 32px;
}
.auth-character {
width: 120px;
height: 120px;
bottom: -28px;
right: -16px;
opacity: .15;
}
}

/* anime popup */
.popup-card { text-align: center; }

.popup-card img {
width: 100%;
max-height: 340px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 14px;
}
.popup-card h2 { color: #fff; font-size: 1.25rem; margin-bottom: 8px; }
.popup-card p { color: #a0a0b8; margin-bottom: 16px; line-height: 1.5; }
.popup-card p small { color: #8080a0; }
.popup-card .btn { display: inline-block; }

/* ---- TOAST NOTIFICATIONS ---- */

.toast-container {
position: fixed;
bottom: 24px; right: 24px;
display: flex;
flex-direction: column-reverse;
gap: 10px;
z-index: 9999;
pointer-events: none;
}

.toast {
padding: 12px 20px;
border-radius: 10px;
font-size: .9rem;
color: #fff;
background: #1e1e3a;
border: 1px solid #2a2a4a;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
transform: translateX(120%);
transition: transform .35s ease, opacity .35s;
opacity: 0;
pointer-events: auto;
}
.toast.show {
transform: translateX(0);
opacity: 1;
}
.toast-success { border-color: #22c55e; background: linear-gradient(135deg, #14532d, #1a2e1a); }
.toast-error   { border-color: #ef4444; background: linear-gradient(135deg, #7f1d1d, #2e1a1a); }
.toast-info    { border-color: #7c3aed; background: linear-gradient(135deg, #1e1e3a, #16162e); }

/* ---- FOOTER ---- */

.footer {
background: #0e0e20;
border-top: 1px solid rgba(255,255,255,.05);
padding: 48px 24px 24px;
margin-top: 64px;
}

.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 32px;
max-width: 1000px;
margin: 0 auto;
}

.footer-section h3 {
color: #a78bfa;
margin-bottom: 12px;
font-size: .95rem;
letter-spacing: .5px;
}
.footer-section p {
color: #808098;
font-size: .88rem;
line-height: 1.6;
}
.footer-section ul li { margin-bottom: 6px; }
.footer-section ul li a { color: #808098; font-size: .88rem; }
.footer-section ul li a:hover { color: #c4b5fd; }

.copyright {
text-align: center;
color: #505068;
font-size: .8rem;
margin-top: 32px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.04);
}

/* ---- LANDING PAGE ---- */

.landing-body { background: var(--bg-page); }

.aura-bg {
position: fixed; inset: 0;
z-index: 0;
background: radial-gradient(circle at 50% 50%,
rgba(122,92,255,.35),
rgba(20,20,40,.95) 40%);
pointer-events: none;
}

.particles {
position: fixed; inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}

.particle {
position: absolute;
bottom: -10px;
background: rgba(167,139,250,.4);
border-radius: 50%;
animation: float-up linear infinite;
}

@keyframes float-up {
0%   { transform: translateY(0) scale(1); opacity: 0; }
10%  { opacity: 1; }
90%  { opacity: 1; }
100% { transform: translateY(-100vh) scale(.5); opacity: 0; }
}

/* ---- ADMIN PANEL ---- */

.admin-section {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px 32px;
}

.admin-stats {
display: flex;
gap: 16px;
flex-wrap: wrap;
}

.admin-stat {
flex: 1 1 140px;
background: rgba(22,22,46,.7);
border: 1px solid #2a2a4a;
border-radius: 12px;
padding: 20px;
text-align: center;
}

.admin-stat-num {
display: block;
font-size: 2rem;
font-weight: 800;
color: #a78bfa;
margin-bottom: 4px;
}

.admin-stat-label {
font-size: .8rem;
color: #808098;
text-transform: uppercase;
letter-spacing: 1px;
}

/* tabs */
.admin-tabs {
display: flex;
gap: 4px;
margin-bottom: 20px;
border-bottom: 1px solid #2a2a4a;
}

.admin-tab {
padding: 10px 24px;
background: none;
border: none;
color: #808098;
font-size: .95rem;
font-weight: 600;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: .2s;
}
.admin-tab:hover { color: #c0c0d8; }
.admin-tab.active {
color: #a78bfa;
border-bottom-color: #7c3aed;
}

/* toolbar */
.admin-toolbar {
display: flex;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}

.admin-search {
flex: 1;
min-width: 200px;
padding: 10px 14px;
background: #0d0d1a;
border: 1px solid #2a2a4a;
border-radius: 8px;
color: #e0e0f0;
font-size: .9rem;
outline: none;
}
.admin-search:focus { border-color: #7c3aed; }

.admin-sub-heading {
color: var(--text-heading);
font-size: 1rem;
margin-bottom: 10px;
}

.admin-add-form {
margin-bottom: 20px;
}
.admin-form-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.admin-form-row .admin-input,
.admin-form-row .admin-select {
flex: 1;
min-width: 140px;
}
.admin-settings-form .admin-form-row {
flex-direction: column;
gap: 4px;
}
.admin-settings-label {
color: var(--text-muted);
font-size: .85rem;
font-weight: 500;
}

.content-search-results {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-top: 12px;
}
.content-search-results:empty { display: none; }

.search-result-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: border-color .2s, transform .15s;
}
.search-result-card:hover {
border-color: #7c3aed;
transform: translateY(-2px);
}
.search-result-card img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.search-result-card .sr-body {
padding: 10px;
}
.search-result-card h4 {
font-size: .82rem;
color: var(--text-heading);
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-result-card p {
font-size: .72rem;
color: var(--text-muted);
}
.search-result-card .sr-added {
background: #22c55e;
color: #fff;
text-align: center;
padding: 6px;
font-size: .75rem;
font-weight: 600;
}

/* ---- ANIME LIBRARY (admin) ---- */

.alib-search-row {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.alib-search-row .admin-input { flex: 1; }

.alib-search-results {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 400px;
overflow-y: auto;
}

.alib-result-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--bg-card);
cursor: pointer;
transition: border-color .15s, background .15s;
}
.alib-result-card:hover {
border-color: var(--link-color);
background: rgba(124,58,237,.04);
}
.alib-result-card img {
width: 40px;
height: 56px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.alib-result-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.alib-result-info strong {
font-size: .88rem;
color: var(--text-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.alib-result-info span {
font-size: .75rem;
color: var(--text-muted);
}
.alib-result-info small {
font-size: .72rem;
color: var(--text-faint);
}
.alib-add-btn {
flex-shrink: 0;
padding: 6px 16px !important;
font-size: .78rem !important;
}

/* Upload panel */
.alib-upload-panel {
margin-top: 20px;
padding: 20px;
border-radius: 12px;
border: 1px solid var(--border-color);
background: var(--bg-card);
}
.alib-upload-header {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 16px;
}
.alib-upload-poster {
width: 48px;
height: 68px;
border-radius: 8px;
object-fit: cover;
}
.alib-upload-title {
font-size: 1rem;
font-weight: 700;
color: var(--text-heading);
margin: 0;
}
.alib-upload-meta {
font-size: .8rem;
color: var(--text-muted);
margin: 4px 0 0;
}

/* Drop zone */
.alib-upload-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 32px 20px;
border-radius: 10px;
border: 2px dashed var(--border-color);
background: rgba(255,255,255,.015);
cursor: pointer;
transition: border-color .2s, background .2s;
text-align: center;
}
.alib-upload-zone:hover,
.alib-upload-zone.drag-over {
border-color: var(--link-color);
background: rgba(124,58,237,.04);
}
.alib-upload-zone p {
font-size: .9rem;
color: var(--text-secondary);
margin: 0;
}
.alib-upload-zone small {
font-size: .78rem;
color: var(--text-muted);
}

/* File queue */
.alib-file-queue {
margin-top: 16px;
}
.alib-queue-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.alib-queue-count {
font-size: .85rem;
font-weight: 600;
color: var(--text-heading);
}
.alib-queue-list {
max-height: 260px;
overflow-y: auto;
border-radius: 8px;
border: 1px solid var(--border-color);
margin-bottom: 12px;
}
.alib-queue-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid rgba(255,255,255,.03);
font-size: .82rem;
}
.alib-queue-item:last-child { border-bottom: none; }
.alib-queue-num {
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--link-color);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: .72rem;
font-weight: 700;
flex-shrink: 0;
}
.alib-queue-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-primary);
}
.alib-queue-size {
font-size: .72rem;
color: var(--text-muted);
flex-shrink: 0;
}
.alib-queue-remove {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: color .12s, background .12s;
}
.alib-queue-remove:hover {
color: #ef4444;
background: rgba(239,68,68,.1);
}

/* Per-file progress bar */
.alib-queue-progress {
flex: 0 0 60px;
height: 4px;
border-radius: 2px;
background: var(--border-color);
overflow: hidden;
}
.alib-queue-bar {
height: 100%;
border-radius: 2px;
background: var(--link-color);
transition: width .2s ease;
width: 0%;
}
.alib-queue-status {
font-size: .68rem;
font-weight: 600;
color: var(--text-faint);
min-width: 48px;
text-align: right;
flex-shrink: 0;
}
.alib-queue-size { font-size: .72rem; color: var(--text-muted); flex-shrink: 0; }

/* Overall upload status */
.alib-upload-status {
margin: 12px 0;
}
.alib-overall-bar {
height: 6px;
border-radius: 3px;
background: var(--border-color);
overflow: hidden;
}
.alib-overall-fill {
height: 100%;
border-radius: 3px;
background: var(--link-color);
transition: width .3s ease;
}
.alib-overall-text {
font-size: .8rem;
color: var(--text-muted);
margin-top: 6px;
}

/* Library list */
.alib-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.alib-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--bg-card);
}
.alib-item-cover {
width: 38px;
height: 54px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.alib-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.alib-item-info strong {
font-size: .88rem;
color: var(--text-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.alib-item-info span {
font-size: .75rem;
color: var(--text-muted);
}
.alib-item-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}

/* Freshly-added (AniList catalog sync) anime — highlight until first upload */
.alib-item-new {
    position: relative;
    border-color: rgba(167,139,250,.45);
    background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(167,139,250,.04));
    box-shadow: 0 0 0 1px rgba(167,139,250,.18), 0 10px 28px rgba(124,58,237,.18);
}
.alib-item-new::before {
    content: "";
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #c4b1ff, #7c3aed);
    box-shadow: 0 0 10px rgba(167,139,250,.8);
}
.alib-new-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    vertical-align: middle;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    box-shadow: 0 4px 12px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.3);
    animation: alibNewPulse 2.4s ease-in-out infinite;
}
@keyframes alibNewPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.3); }
    50%      { box-shadow: 0 6px 20px rgba(167,139,250,.8), inset 0 1px 0 rgba(255,255,255,.4); }
}

/* Banner surfaced at the top of the library when new entries are waiting */
.alib-new-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin: 12px 0 4px;
    border-radius: 14px;
    border: 1px solid rgba(167,139,250,.35);
    background:
        radial-gradient(400px 160px at 0% 0%, rgba(167,139,250,.22), transparent 70%),
        linear-gradient(135deg, rgba(38,22,78,.78), rgba(22,12,48,.9));
    color: #ece8f8;
    box-shadow: 0 14px 36px rgba(124,58,237,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.alib-new-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 14px rgba(167,139,250,.9), 0 0 0 6px rgba(167,139,250,.12);
    flex-shrink: 0;
    animation: alibNewPulseDot 1.8s ease-in-out infinite;
}
@keyframes alibNewPulseDot {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 14px rgba(167,139,250,.9), 0 0 0 6px rgba(167,139,250,.12); }
    50%      { transform: scale(1.25); box-shadow: 0 0 22px rgba(167,139,250,1), 0 0 0 10px rgba(167,139,250,.08); }
}
.alib-new-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alib-new-text strong {
    font-size: .95rem;
    color: #fff;
    letter-spacing: -.005em;
}
.alib-new-text span {
    font-size: .82rem;
    color: rgba(232,228,245,.72);
    line-height: 1.4;
}

/* Primary accent on the "Post now" action of a new card */
.adm-act-primary {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(124,58,237,.4);
}
.adm-act-primary:hover {
    box-shadow: 0 10px 24px rgba(124,58,237,.6);
}

/* Episode manager */
.alib-ep-manager {
margin-top: 20px;
padding: 16px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--bg-card);
}
.alib-ep-manager-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.alib-ep-manager-head h3 {
font-size: .95rem;
font-weight: 700;
color: var(--text-heading);
margin: 0;
}
.alib-ep-grid {
display: flex;
flex-direction: column;
gap: 4px;
}
.alib-ep-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,.03);
font-size: .82rem;
}
.alib-ep-row:hover { background: rgba(124,58,237,.04); }
.alib-ep-num {
font-weight: 700;
color: var(--link-color);
width: 50px;
flex-shrink: 0;
}
.alib-ep-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-secondary);
}
.alib-ep-size {
font-size: .72rem;
color: var(--text-muted);
flex-shrink: 0;
}
.alib-ep-del { flex-shrink: 0; }

/* Admin per-episode quality chip (resolution + bitrate, color-tiered) */
.alib-ep-quality {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 999px;
font-size: .7rem; font-weight: 700;
letter-spacing: .03em;
border: 1px solid currentColor;
background: transparent;
flex-shrink: 0;
}
.alib-ep-quality-good { color: #22c55e; }
.alib-ep-quality-ok   { color: #facc15; }
.alib-ep-quality-low  { color: #ef4444; }

/* Manage view */
.alib-manage-header { margin-bottom: 16px; }
.alib-manage-info {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border-radius: 14px;
background: var(--bg-card);
border: 1px solid var(--border-color);
margin-bottom: 20px;
}
.alib-manage-poster {
width: 56px;
height: 78px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.alib-manage-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-heading);
margin: 0;
}
.alib-manage-meta {
font-size: .78rem;
color: var(--text-faint);
margin: 4px 0 0;
}
.alib-manage-upload {
margin-bottom: 8px;
}
.alib-ep-total {
font-size: .78rem;
font-weight: 400;
color: var(--text-faint);
}

.admin-select {
padding: 10px 14px;
background: #0d0d1a;
border: 1px solid #2a2a4a;
border-radius: 8px;
color: #e0e0f0;
font-size: .9rem;
outline: none;
}

/* table */
.admin-table-wrap {
overflow-x: auto;
border: 1px solid #2a2a4a;
border-radius: 10px;
}

.admin-table {
width: 100%;
border-collapse: collapse;
font-size: .88rem;
}

.admin-table th {
padding: 12px 14px;
text-align: left;
background: rgba(22,22,46,.8);
color: #a0a0b8;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .5px;
border-bottom: 1px solid #2a2a4a;
white-space: nowrap;
}

.admin-table td {
padding: 10px 14px;
border-bottom: 1px solid rgba(42,42,74,.4);
color: #c0c0d8;
vertical-align: middle;
}

.admin-table tbody tr:hover { background: rgba(167,139,250,.04); }

.admin-table a { color: #a78bfa; }
.admin-table a:hover { color: #c4b5fd; }

.admin-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: .7rem;
font-weight: 700;
background: rgba(124,58,237,.2);
color: #a78bfa;
border: 1px solid rgba(124,58,237,.3);
}

.admin-actions {
display: flex;
gap: 6px;
white-space: nowrap;
}

.abtn {
padding: 5px 12px;
border-radius: 6px;
font-size: .78rem;
font-weight: 600;
border: 1px solid #2a2a4a;
cursor: pointer;
transition: .2s;
text-decoration: none;
display: inline-block;
}

.abtn-view {
background: transparent;
color: #a78bfa;
border-color: rgba(167,139,250,.3);
}
.abtn-view:hover { background: rgba(167,139,250,.1); color: #c4b5fd; }

.abtn-toggle {
background: transparent;
color: #60a5fa;
border-color: rgba(59,130,246,.3);
}
.abtn-toggle:hover { background: rgba(59,130,246,.1); }

.abtn-delete {
background: transparent;
color: #f87171;
border-color: rgba(239,68,68,.3);
}
.abtn-delete:hover { background: rgba(239,68,68,.1); }

.admin-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}

/* ---- TITLE PAGE ---- */

.title-page {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
padding: 40px 24px;
}

.title-glow {
font-size: 4rem;
font-weight: 800;
letter-spacing: 2px;
color: #fff;
text-shadow:
0 0 10px rgba(167,139,250,.6),
0 0 30px rgba(167,139,250,.4),
0 0 60px rgba(124,58,237,.3),
0 0 100px rgba(124,58,237,.2);
animation: glow-pulse 3s ease-in-out infinite alternate;
margin-bottom: 48px;
line-height: 1.2;
}

@keyframes glow-pulse {
0% {
text-shadow:
0 0 10px rgba(167,139,250,.5),
0 0 30px rgba(167,139,250,.3),
0 0 60px rgba(124,58,237,.2),
0 0 100px rgba(124,58,237,.1);
}
100% {
text-shadow:
0 0 14px rgba(167,139,250,.8),
0 0 40px rgba(167,139,250,.5),
0 0 80px rgba(124,58,237,.35),
0 0 120px rgba(124,58,237,.25),
0 0 160px rgba(168,85,247,.15);
}
}

.enter-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 48px;
background: transparent;
color: #a78bfa;
border: 2px solid rgba(167,139,250,.4);
border-radius: 50px;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
transition: .4s;
position: relative;
overflow: hidden;
}

.enter-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(168,85,247,.1));
opacity: 0;
transition: opacity .4s;
}

.enter-btn:hover {
color: #fff;
border-color: rgba(167,139,250,.8);
box-shadow:
0 0 20px rgba(167,139,250,.3),
0 0 50px rgba(124,58,237,.15);
transform: translateY(-2px);
}

.enter-btn:hover::before { opacity: 1; }

.enter-btn span, .enter-btn svg {
position: relative;
z-index: 1;
}

.enter-btn svg {
transition: transform .3s;
}

.enter-btn:hover svg {
transform: translateX(4px);
}

/* ---- SIDEBAR EXTRAS ---- */

.sidebar-divider {
height: 1px;
background: #2a2a4a;
margin: 8px 20px;
}

.sidebar-label {
padding: 6px 24px;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #606080;
}

/* ---- GUILD TAGS / BADGES ---- */

.guild-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: .75rem;
font-weight: 600;
letter-spacing: .3px;
}

.badge-artisan { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.badge-writer  { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.25); }
.badge-editor  { background: rgba(34,197,94,.15);  color: #4ade80; border: 1px solid rgba(34,197,94,.25); }

.profile-guilds {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 4px;
}

/* ---- GUILD CHECKBOXES (signup) ---- */

.guild-checkboxes {
display: flex;
gap: 12px;
flex-wrap: wrap;
}

.checkbox-label {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #0d0d1a;
border: 1px solid #2a2a4a;
border-radius: 8px;
font-size: .9rem;
color: #c0c0d8;
cursor: pointer;
transition: border-color .2s, background .2s;
}
.checkbox-label:hover { border-color: #7c3aed; }

.checkbox-label input[type="checkbox"] {
accent-color: #7c3aed;
width: 16px;
height: 16px;
}

/* ---- DASHBOARD ---- */

.dash-section {
max-width: 900px;
margin: 0 auto;
padding: 16px 24px 32px;
}

/* panel cards */
.dash-panel {
background: rgba(20,20,40,.5);
border: 1px solid #2a2a4a;
border-radius: 14px;
padding: 24px;
}

.dash-panel-title {
font-size: 1.15rem;
color: #fff;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid #2a2a4a;
}

.dash-empty {
color: #606080;
font-size: .95rem;
padding: 12px 0 0;
}
.dash-empty a { color: #a78bfa; }

/* guild row */
.dash-guild-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
}

.dash-guild-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 22px;
border-radius: 12px;
border: 1px solid #2a2a4a;
text-decoration: none;
color: #e0e0f0;
flex: 1 1 200px;
min-width: 200px;
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.dash-guild-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.3);
color: #fff;
}

.badge-artisan-bg { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); }
.badge-artisan-bg:hover { border-color: rgba(239,68,68,.5); }
.badge-writer-bg  { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); }
.badge-writer-bg:hover  { border-color: rgba(59,130,246,.5); }
.badge-editor-bg  { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.2); }
.badge-editor-bg:hover  { border-color: rgba(34,197,94,.5); }

.dash-guild-icon { font-size: 1.8rem; }

.dash-guild-card strong {
display: block;
font-size: .95rem;
margin-bottom: 2px;
}

.dash-guild-card small {
color: #808098;
font-size: .8rem;
}

/* notifications */
.notif-count {
color: #a78bfa;
font-size: .95rem;
font-weight: 600;
}

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

.notif-item {
display: flex;
gap: 12px;
padding: 14px 16px;
background: rgba(22,22,46,.6);
border: 1px solid #2a2a4a;
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: border-color .2s, background .2s;
}
.notif-item:hover {
border-color: #3a3a5a;
background: rgba(22,22,46,.9);
color: inherit;
}

.notif-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #a855f7);
display: flex; align-items: center; justify-content: center;
font-size: .9rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
overflow: hidden;
}
.notif-avatar.has-img { background: none; }
.notif-avatar img {
width: 100%; height: 100%;
object-fit: cover;
}

.notif-body { flex: 1; min-width: 0; }

.notif-body p {
font-size: .9rem;
color: #c0c0d8;
margin-bottom: 2px;
}
.notif-body p strong { color: #e0e0f0; }

.notif-preview {
font-size: .85rem;
color: #808098;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.notif-time {
font-size: .75rem;
color: #606080;
}

/* ---- BOARD PAGE ---- */

.board-section {
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px 48px;
}

.board-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}

.board-card {
display: block;
background: #141428;
border: 1px solid #2a2a4a;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .25s, transform .25s, box-shadow .25s;
}
.board-card:hover {
border-color: #7c3aed;
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(124,58,237,.18);
color: inherit;
}

.board-card-img {
width: 100%;
height: 200px;
object-fit: cover;
}

.board-card-text {
padding: 16px;
height: 200px;
overflow: hidden;
font-size: .88rem;
color: #a0a0b8;
line-height: 1.6;
white-space: pre-wrap;
}

.board-card-info {
padding: 14px 16px;
border-top: 1px solid #1e1e38;
}

.board-card-info h3 {
font-size: .95rem;
color: #e0e0f0;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}

.board-card-meta {
font-size: .8rem;
color: #808098;
margin-bottom: 2px;
display: flex;
align-items: center;
gap: 6px;
}

.board-card-avatar {
width: 20px; height: 20px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.board-card-avatar-initial {
width: 20px; height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #a855f7);
display: inline-flex; align-items: center; justify-content: center;
font-size: .55rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}

.board-card-stats {
font-size: .8rem;
color: #a78bfa;
}

.board-loading, .board-empty {
text-align: center;
padding: 60px 20px;
color: #606080;
font-size: 1rem;
grid-column: 1 / -1;
}

/* pagination */
.board-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 28px;
}

.pag-btn {
width: 36px; height: 36px;
border-radius: 8px;
border: 1px solid #2a2a4a;
background: #141428;
color: #c0c0d8;
font-size: .9rem;
cursor: pointer;
transition: .2s;
}
.pag-btn:hover, .pag-btn.active {
background: #7c3aed;
color: #fff;
border-color: #7c3aed;
}

/* new post modal */
.auth-box textarea {
width: 100%;
padding: 10px 14px;
background: #0d0d1a;
border: 1px solid #2a2a4a;
border-radius: 8px;
color: #e0e0f0;
font-size: .95rem;
outline: none;
resize: vertical;
transition: border-color .2s;
line-height: 1.6;
}
.auth-box textarea:focus { border-color: #7c3aed; }

.file-input {
width: 100%;
padding: 8px;
background: #0d0d1a;
border: 1px solid #2a2a4a;
border-radius: 8px;
color: #e0e0f0;
font-size: .9rem;
}
.file-input::file-selector-button {
background: #7c3aed;
color: #fff;
border: none;
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
margin-right: 10px;
}

.image-preview img {
max-width: 100%;
max-height: 200px;
border-radius: 8px;
margin-top: 10px;
border: 1px solid #2a2a4a;
}

/* ---- POST PAGE ---- */

.post-page {
max-width: 760px;
margin: 0 auto;
padding: 24px;
}

.back-link {
display: inline-block;
margin-bottom: 20px;
color: #a78bfa;
font-size: .9rem;
}
.back-link:hover { color: #c4b5fd; }

.post-full {
background: #141428;
border: 1px solid #2a2a4a;
border-radius: 14px;
overflow: hidden;
margin-bottom: 32px;
}

.post-full h1 {
font-size: 1.6rem;
color: #fff;
margin-bottom: 10px;
}

.post-full-content {
padding: 28px;
}

.post-image {
width: 100%;
}
.post-image img {
width: 100%;
max-height: 600px;
object-fit: contain;
background: #0b0b19;
display: block;
}

.post-meta {
font-size: .85rem;
color: #808098;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.post-meta .post-author { color: #c4b5fd; font-weight: 600; }

.post-author-avatar {
width: 28px; height: 28px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.post-author-avatar-initial {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #a855f7);
display: inline-flex; align-items: center; justify-content: center;
font-size: .7rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}

.post-guild-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: .75rem;
font-weight: 600;
}

.post-body {
color: #c0c0d8;
line-height: 1.8;
font-size: .95rem;
white-space: pre-wrap;
}

.post-actions {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #1e1e38;
display: flex;
gap: 12px;
align-items: center;
}

.reuse-badge {
display: inline-block;
font-size: .8rem;
padding: 5px 12px;
border-radius: 6px;
margin-bottom: 12px;
}
.reuse-yes {
background: rgba(34,197,94,.12);
color: #22c55e;
}
.reuse-no {
background: rgba(239,68,68,.12);
color: #ef4444;
}

.consent-group { margin-top: 8px; }
.consent-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: .9rem;
color: var(--text-primary);
}
.consent-label input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #7c3aed;
cursor: pointer;
flex-shrink: 0;
}
.consent-note {
font-size: .75rem;
color: var(--text-faint);
margin-top: 4px;
}

.like-btn {
background: none;
border: 1px solid #2a2a4a;
color: #a0a0b8;
padding: 8px 18px;
border-radius: 8px;
font-size: .9rem;
cursor: pointer;
transition: .2s;
}
.like-btn:hover { border-color: #ef4444; color: #f87171; }
.like-btn.liked { border-color: #ef4444; color: #f87171; background: rgba(239,68,68,.1); }

.delete-post-btn { font-size: .85rem; padding: 8px 16px; }

.post-loading {
text-align: center;
padding: 40px;
color: #606080;
}

/* ---- COMMENTS ---- */

.comments-section {
background: #141428;
border: 1px solid #2a2a4a;
border-radius: 14px;
padding: 24px;
}

.comments-section h3 {
color: #fff;
margin-bottom: 16px;
font-size: 1.1rem;
}

.comments-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 20px;
}

.comment {
display: flex;
gap: 12px;
padding: 12px;
background: rgba(13,13,26,.5);
border-radius: 10px;
}

.comment-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #a855f7);
display: flex; align-items: center; justify-content: center;
font-size: .9rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
overflow: hidden;
}
.comment-avatar.has-img { background: none; }
.comment-avatar img {
width: 100%; height: 100%;
object-fit: cover;
}

.comment-content {
flex: 1;
position: relative;
}

.comment-header {
font-size: .85rem;
margin-bottom: 4px;
}
.comment-header strong { color: #c4b5fd; }
.comment-header span { color: #606080; font-size: .8rem; margin-left: 8px; }

.comment-content p {
color: #c0c0d8;
font-size: .9rem;
line-height: 1.5;
}

.comment-delete {
position: absolute;
top: 0; right: 0;
background: none;
border: none;
color: #606080;
font-size: 1.1rem;
cursor: pointer;
}
.comment-delete:hover { color: #ef4444; }

.comment-form textarea {
width: 100%;
padding: 10px 14px;
background: #0d0d1a;
border: 1px solid #2a2a4a;
border-radius: 8px;
color: #e0e0f0;
font-size: .9rem;
resize: vertical;
outline: none;
margin-bottom: 10px;
}
.comment-form textarea:focus { border-color: #7c3aed; }

.no-comments {
color: #606080;
font-size: .9rem;
text-align: center;
padding: 16px;
}

.auth-prompt {
color: #808098;
font-size: .9rem;
text-align: center;
}

/* ---- THEME TOGGLE ---- */

.theme-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
margin-top: 8px;
border-top: 1px solid var(--border-color);
color: var(--text-muted);
font-size: .85rem;
}

.theme-switch {
position: relative;
width: 44px; height: 24px;
background: #2a2a4a;
border-radius: 12px;
cursor: pointer;
transition: background .3s;
border: none;
padding: 0;
}
.theme-switch::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
transition: transform .3s;
}
[data-theme="light"] .theme-switch {
background: #7c3aed;
}
[data-theme="light"] .theme-switch::after {
transform: translateX(20px);
}

/* ---- LIGHT THEME OVERRIDES ---- */

/* -- Navbar -- */
[data-theme="light"] .navbar {
background: rgba(255,255,255,.92);
border-bottom: 1px solid var(--border-color);
}
[data-theme="light"] .navbar .logo { color: #7c3aed; }

/* -- Sidebar -- */
[data-theme="light"] .sidebar a {
color: var(--text-primary);
background: rgba(255,255,255,.5);
border-color: rgba(0,0,0,.06);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .sidebar a:hover {
background: rgba(124,58,237,.08);
border-color: rgba(124,58,237,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(124,58,237,.1);
color: #7c3aed;
}
[data-theme="light"] .sidebar a.active {
background: rgba(124,58,237,.1);
border-color: rgba(124,58,237,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(124,58,237,.12);
color: #7c3aed;
}
[data-theme="light"] .sidebar-header span { color: var(--text-muted); }
[data-theme="light"] .sidebar-header span:hover { color: var(--text-primary); }
[data-theme="light"] .sidebar-label { color: var(--text-muted); }
[data-theme="light"] .sidebar-divider { border-color: var(--border-color); }

/* -- Hero & headings -- */
[data-theme="light"] .hero {
background: linear-gradient(180deg, #f4f4f8 0%, #e8e8f0 100%);
}
[data-theme="light"] .hero h1,
[data-theme="light"] .hero h2,
[data-theme="light"] .section-title { color: var(--text-heading); }
[data-theme="light"] .hero-sub { color: var(--text-muted); }

/* -- Cards (all types) -- */
[data-theme="light"] .card,
[data-theme="light"] .anime-card,
[data-theme="light"] .guild-card,
[data-theme="light"] .post-card,
[data-theme="light"] .dash-card,
[data-theme="light"] .board-card,
[data-theme="light"] .notif-card,
[data-theme="light"] .rank-card,
[data-theme="light"] .phrase-card,
[data-theme="light"] .comment-card,
[data-theme="light"] .structure-card,
[data-theme="light"] .step-card,
[data-theme="light"] .dash-panel,
[data-theme="light"] .admin-stat,
[data-theme="light"] .lb-board {
background: var(--bg-card);
border-color: var(--border-color);
box-shadow: 0 2px 8px var(--shadow);
}

/* -- Card text -- */
[data-theme="light"] .anime-card h3,
[data-theme="light"] .guild-card h3,
[data-theme="light"] .board-card-info h3,
[data-theme="light"] .dash-panel-title,
[data-theme="light"] .lb-board-title,
[data-theme="light"] .lb-info h4,
[data-theme="light"] .popup-card h2,
[data-theme="light"] .post-full h1,
[data-theme="light"] .comments-section h3,
[data-theme="light"] .auth-box h2 { color: var(--text-heading); }

[data-theme="light"] .anime-card p,
[data-theme="light"] .guild-card p,
[data-theme="light"] .board-card-body p,
[data-theme="light"] .role p,
[data-theme="light"] .about p,
[data-theme="light"] .lb-info p,
[data-theme="light"] .popup-card p,
[data-theme="light"] .anime-score { color: var(--text-muted); }

[data-theme="light"] .activity-list li,
[data-theme="light"] .lb-rank-number,
[data-theme="light"] .post-body,
[data-theme="light"] .comment-content p,
[data-theme="light"] .pag-btn,
[data-theme="light"] .notif-body p,
[data-theme="light"] .sort-btn-wrapper button { color: var(--text-primary); }

[data-theme="light"] .post-meta,
[data-theme="light"] .board-card-meta,
[data-theme="light"] .comment-header span,
[data-theme="light"] .notif-time,
[data-theme="light"] .notif-preview,
[data-theme="light"] .dash-guild-card small,
[data-theme="light"] .admin-stat-label,
[data-theme="light"] .admin-tab,
[data-theme="light"] .auth-switch,
[data-theme="light"] .auth-prompt { color: var(--text-faint); }

[data-theme="light"] .lb-empty,
[data-theme="light"] .dash-empty,
[data-theme="light"] .no-results,
[data-theme="light"] .no-comments { color: var(--text-muted); }

[data-theme="light"] .notif-body p strong { color: var(--text-heading); }

/* -- Buttons -- */
[data-theme="light"] .btn-outline {
color: #7c3aed;
border-color: #7c3aed;
}
[data-theme="light"] .btn-outline:hover {
background: #7c3aed;
color: #fff;
}

/* -- Forms & inputs -- */
[data-theme="light"] input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .admin-input,
[data-theme="light"] .admin-select,
[data-theme="light"] .auth-box select,
[data-theme="light"] .auth-box textarea,
[data-theme="light"] .comment-form textarea,
[data-theme="light"] .file-input {
background: var(--bg-input);
color: var(--text-primary);
border-color: var(--border-color);
}
[data-theme="light"] .form-group label { color: var(--text-muted); }

/* -- Modals & popups -- */
[data-theme="light"] .modal-content,
[data-theme="light"] .auth-modal,
[data-theme="light"] .popup-box,
[data-theme="light"] .auth-box {
background: var(--bg-modal);
border-color: var(--border-color);
box-shadow: 0 8px 32px var(--shadow);
}
[data-theme="light"] .popup-close { color: var(--text-muted); }
[data-theme="light"] .popup-close:hover { color: var(--text-primary); }

/* -- Footer -- */
[data-theme="light"] .footer {
background: #e8e8f0;
border-top-color: var(--border-color);
}
[data-theme="light"] .footer,
[data-theme="light"] .footer a,
[data-theme="light"] .footer p,
[data-theme="light"] .footer-section p,
[data-theme="light"] .footer-section ul li a { color: var(--text-muted); }
[data-theme="light"] .footer-section ul li a:hover { color: #7c3aed; }

/* -- Toast notifications -- */
[data-theme="light"] .toast {
background: var(--bg-card);
color: var(--text-primary);
border-color: var(--border-color);
box-shadow: 0 4px 16px var(--shadow);
}

/* -- Overlays -- */
[data-theme="light"] .sidebar-overlay { background: rgba(0,0,0,.2); }

/* -- Post pages -- */
[data-theme="light"] .post-full,
[data-theme="light"] .post-full-content,
[data-theme="light"] .comments-section {
background: var(--bg-card);
border-color: var(--border-color);
}
[data-theme="light"] .like-btn {
color: var(--text-muted);
border-color: var(--border-color);
}
[data-theme="light"] .like-btn:hover { color: #7c3aed; border-color: #7c3aed; }
[data-theme="light"] .comment-header { color: var(--text-primary); }

/* -- Leaderboards -- */
[data-theme="light"] .lb-board-title {
color: var(--text-heading);
border-bottom-color: var(--border-color);
}
[data-theme="light"] .lb-rank-gold { color: #b8860b; }
[data-theme="light"] .lb-rank-silver { color: #708090; }
[data-theme="light"] .lb-rank-bronze { color: #8b4513; }

/* -- Board page -- */
[data-theme="light"] .board-card {
background: var(--bg-card);
border-color: var(--border-color);
}
[data-theme="light"] .pag-btn {
background: var(--bg-input);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="light"] .pag-btn:hover,
[data-theme="light"] .pag-btn.active {
background: #7c3aed;
color: #fff;
}
[data-theme="light"] .scroll-btn {
border-color: var(--border-color);
color: var(--text-muted);
}
[data-theme="light"] .scroll-btn:hover {
background: #7c3aed;
color: #fff;
}
[data-theme="light"] .sort-btn-wrapper {
background: var(--bg-input);
border-color: var(--border-color);
}

/* -- Dashboard -- */
[data-theme="light"] .dash-panel-title { border-bottom-color: var(--border-color); }
[data-theme="light"] .dash-item { border-bottom-color: var(--border-color); color: var(--text-primary); }
[data-theme="light"] .dash-guild-card {
background: var(--bg-input);
border-color: var(--border-color);
}
[data-theme="light"] .notif-body { border-bottom-color: var(--border-color); }

/* -- Admin -- */
[data-theme="light"] .admin-tab { color: var(--text-faint); }
[data-theme="light"] .admin-tab:hover { color: var(--text-primary); }
[data-theme="light"] .admin-tab.active { color: #7c3aed; border-bottom-color: #7c3aed; }
[data-theme="light"] .admin-tabs { border-bottom-color: var(--border-color); }
[data-theme="light"] .admin-table-wrap { border-color: var(--border-color); }
[data-theme="light"] .admin-table-wrap th {
background: #eeeef4;
color: var(--text-heading);
border-bottom-color: var(--border-color);
}
[data-theme="light"] .admin-table-wrap td {
border-bottom-color: var(--border-color);
color: var(--text-primary);
}

/* -- Landing page -- */
[data-theme="light"] .landing-body {
background: var(--bg-page);
}
[data-theme="light"] .landing-aura {
background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(124,58,237,.06), transparent 70%);
}
[data-theme="light"] .landing-dot { background: var(--link-color); }
[data-theme="light"] .landing-panel img { filter: blur(1.5px) brightness(.7) saturate(.4); }
[data-theme="light"] .landing-pulse { border-color: var(--link-color); }

/* -- Notifications -- */
[data-theme="light"] .notif-header { color: var(--text-heading); }

/* -- Avatars -- */
[data-theme="light"] .comment-avatar,
[data-theme="light"] .notif-avatar {
box-shadow: 0 1px 3px var(--shadow);
}
[data-theme="light"] .avatar-edit-btn { color: #555; background: rgba(124, 58, 237, .1); }
[data-theme="light"] .profile-guilds .guild-tag { color: #fff; }

/* -- Writers -- */
[data-theme="light"] .role {
background: var(--bg-card);
border-color: var(--border-color);
}
[data-theme="light"] .activity-list li { border-bottom-color: var(--border-color); }

/* -- File upload -- */
[data-theme="light"] .file-input::file-selector-button {
background: #7c3aed;
color: #fff;
}
[data-theme="light"] .file-list { border-color: var(--border-color); }

/* -- Post author -- */
[data-theme="light"] .post-meta .post-author { color: #7c3aed; }
[data-theme="light"] .board-card-stats { color: #7c3aed; }

/* ==============================
   MESSAGES / CHAT
   ============================== */

/* ============================================
   MESSAGES — Modern Chat UI
   ============================================ */

/* Lock the page: no body scroll, no footer */
body.msg-page {
overflow: hidden;
height: 100vh;
height: 100dvh;
position: fixed;
width: 100%;
padding-top: 0 !important;
}

.msg-layout {
display: flex;
height: calc(100vh - 52px);
height: calc(100dvh - 52px);
margin-top: 52px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}

/* -- Sidebar -- */

.msg-sidebar {
width: 340px;
min-width: 340px;
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
background: var(--bg-page);
overflow: hidden;
}

.msg-sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 8px;
flex-shrink: 0;
}
.msg-sidebar-head h2 {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-heading);
margin: 0;
letter-spacing: -.01em;
}
.msg-sidebar-actions {
display: flex;
gap: 6px;
}

.msg-icon-btn {
width: 36px; height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s, color .2s;
}
.msg-icon-btn:hover {
background: rgba(124,58,237,.1);
color: var(--link-color);
}
.msg-icon-btn.active {
background: rgba(124,58,237,.15);
color: var(--link-color);
}

/* Search bar */
.msg-search-wrap {
position: relative;
padding: 8px 20px 12px;
flex-shrink: 0;
}
.msg-search-icon {
position: absolute;
left: 32px;
top: 50%;
transform: translateY(-50%);
color: var(--text-faint);
pointer-events: none;
}
.msg-search {
width: 100%;
padding: 9px 12px 9px 36px;
border-radius: 10px;
border: 1px solid transparent;
background: var(--bg-input);
color: var(--text-primary);
font-size: .85rem;
outline: none;
transition: border-color .2s, background .2s;
box-sizing: border-box;
}
.msg-search:focus {
border-color: var(--link-color);
background: var(--bg-card);
}

/* Add friend panel */
.msg-add-friend {
padding: 0 20px 12px;
flex-shrink: 0;
}
.msg-add-friend .msg-search {
padding-left: 12px;
}

.msg-search-results {
margin-top: 8px;
max-height: 220px;
overflow-y: auto;
}

.msg-search-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
transition: background .15s;
}
.msg-search-item:hover { background: rgba(124,58,237,.06); }

/* Tap-through to profile: avatar + username act as a link, buttons
   beside them stay independently clickable. */
.msg-search-tap {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.msg-search-tap:hover .msg-request-info strong { color: var(--link-color); }

.msg-add-btn {
padding: 5px 14px;
border-radius: 8px;
border: none;
background: var(--link-color);
color: #fff;
font-size: .78rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
margin-left: auto;
transition: opacity .2s;
}
.msg-add-btn:hover { opacity: .85; }

.msg-pending-label {
font-size: .78rem;
color: var(--text-faint);
margin-left: auto;
white-space: nowrap;
}

/* Pending requests */
.msg-requests {
padding: 4px 20px 8px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 4px;
flex-shrink: 0;
}
.msg-requests-head {
font-size: .8rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .04em;
padding: 8px 0;
display: flex;
align-items: center;
gap: 8px;
}

.msg-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--link-color);
color: #fff;
font-size: .7rem;
font-weight: 700;
}

.msg-request-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px;
}
.msg-request-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.msg-request-info strong { font-size: .88rem; color: var(--text-heading); }
.msg-request-info small { font-size: .75rem; color: var(--text-muted); }

.msg-request-actions { display: flex; gap: 6px; }
.msg-accept-btn, .msg-reject-btn {
padding: 5px 12px;
border-radius: 8px;
border: none;
font-size: .78rem;
font-weight: 500;
cursor: pointer;
transition: opacity .2s, background .2s;
}
.msg-accept-btn { background: var(--link-color); color: #fff; }
.msg-accept-btn:hover { opacity: .85; }
.msg-reject-btn { background: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
.msg-reject-btn:hover { color: #ef4444; border-color: #ef4444; }

/* Conversation list */
.msg-friends-list {
flex: 1 1 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 4px 8px;
min-height: 0;
}

.msg-friend-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
border-radius: 12px;
cursor: pointer;
transition: background .15s;
position: relative;
}
.msg-friend-item:hover { background: rgba(124,58,237,.06); }
.msg-friend-item.active { background: rgba(124,58,237,.1); }

.msg-friend-avatar-wrap {
position: relative;
flex-shrink: 0;
}

.msg-friend-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(124,58,237,.15);
display: flex; align-items: center; justify-content: center;
color: var(--link-color);
font-weight: 700;
font-size: 1.05rem;
overflow: hidden;
}
.msg-friend-avatar.has-img img {
width: 100%; height: 100%;
object-fit: cover;
}

.msg-dot {
position: absolute;
bottom: 1px; right: 1px;
width: 11px; height: 11px;
border-radius: 50%;
border: 2.5px solid var(--bg-page);
}
.msg-dot-online { background: #22c55e; }
.msg-dot-offline { background: transparent; border-color: transparent; }

.msg-friend-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.msg-friend-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.msg-friend-top strong {
font-size: .9rem;
font-weight: 600;
color: var(--text-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-friend-time {
font-size: .72rem;
color: var(--text-faint);
white-space: nowrap;
flex-shrink: 0;
}
.msg-friend-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.msg-friend-preview {
font-size: .82rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}

/* Unread state */
.msg-friend-item.unread .msg-friend-top strong {
color: var(--text-heading);
font-weight: 700;
}
.msg-friend-item.unread .msg-friend-preview {
color: var(--text-primary);
font-weight: 500;
}
.msg-friend-item.unread .msg-friend-time {
color: var(--link-color);
font-weight: 600;
}

.msg-unread-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--link-color);
flex-shrink: 0;
}

.msg-empty {
text-align: center;
color: var(--text-muted);
font-size: .85rem;
padding: 32px 16px;
line-height: 1.6;
}

/* -- Chat area -- */

.msg-chat {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--bg-page);
transition: opacity .2s ease;
overflow: hidden;
}
.msg-chat-entering {
opacity: .7;
}

.msg-chat-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.msg-empty-state {
text-align: center;
color: var(--text-muted);
}
.msg-empty-state p {
font-size: .95rem;
font-weight: 500;
margin: 16px 0 4px;
color: var(--text-heading);
}
.msg-empty-state small {
font-size: .82rem;
color: var(--text-faint);
}

/* Chat header */
.msg-chat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-bottom: 1px solid var(--border-color);
background: var(--bg-page);
flex-shrink: 0;
}

.msg-back-btn {
display: none;
width: 36px; height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--text-primary);
cursor: pointer;
align-items: center;
justify-content: center;
transition: background .15s;
}
.msg-back-btn:hover { background: rgba(124,58,237,.1); }

.msg-chat-avatar-inner {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(124,58,237,.15);
display: flex; align-items: center; justify-content: center;
color: var(--link-color);
font-weight: 700;
font-size: .9rem;
overflow: hidden;
flex-shrink: 0;
}
.msg-chat-avatar-inner.has-img img {
width: 100%; height: 100%;
object-fit: cover;
}

.msg-chat-user {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.msg-chat-user strong { font-size: .92rem; font-weight: 600; color: var(--text-heading); }
.msg-status { font-size: .73rem; font-weight: 500; }
.msg-status-online { color: #22c55e; }
.msg-status-offline { color: var(--text-faint); }

/* Header context menu */
.msg-chat-header-actions {
position: relative;
}
.msg-menu-btn { color: var(--text-muted); }
.msg-context-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 160px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 4px;
box-shadow: 0 8px 24px rgba(0,0,0,.2);
z-index: 50;
}
.msg-context-item {
width: 100%;
padding: 8px 12px;
border: none;
background: transparent;
color: var(--text-primary);
font-size: .84rem;
text-align: left;
cursor: pointer;
border-radius: 6px;
transition: background .15s;
}
.msg-context-item:hover {
background: rgba(239,68,68,.1);
color: #ef4444;
}

/* Messages area */
.msg-messages {
flex: 1 1 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 0;
}

.msg-loading {
margin: auto;
}
.msg-loading-spinner {
width: 28px; height: 28px;
border: 2.5px solid var(--border-color);
border-top-color: var(--link-color);
border-radius: 50%;
animation: msg-spin .7s linear infinite;
}
@keyframes msg-spin { to { transform: rotate(360deg); } }

.msg-empty-chat {
text-align: center;
margin: auto;
}
.msg-empty-chat p {
font-size: .9rem;
color: var(--text-muted);
margin: 0 0 4px;
}
.msg-empty-chat small {
font-size: .78rem;
color: var(--text-faint);
}

/* Bubble wrappers */
.msg-bubble-wrap {
display: flex;
flex-direction: column;
touch-action: auto;
user-select: none;
-webkit-user-select: none;
}
.msg-bubble-wrap-mine { align-items: flex-end; }
.msg-bubble-wrap-theirs { align-items: flex-start; }

/* Bubbles */
.msg-bubble {
max-width: 70%;
padding: 10px 14px;
font-size: .9rem;
line-height: 1.5;
word-wrap: break-word;
will-change: transform;
}
.msg-bubble p { margin: 0; }

.msg-bubble-mine {
background: var(--link-color);
color: #fff;
border-radius: 18px 18px 4px 18px;
}
.msg-bubble-mine.msg-bubble-first { border-radius: 18px 18px 4px 18px; }
.msg-bubble-mine.msg-bubble-last { border-radius: 18px 4px 4px 18px; }
.msg-bubble-mine.msg-bubble-first.msg-bubble-last { border-radius: 18px 18px 4px 18px; }

.msg-bubble-theirs {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 18px 18px 18px 4px;
}
.msg-bubble-theirs.msg-bubble-first { border-radius: 18px 18px 18px 4px; }
.msg-bubble-theirs.msg-bubble-last { border-radius: 4px 18px 18px 4px; }
.msg-bubble-theirs.msg-bubble-first.msg-bubble-last { border-radius: 18px 18px 18px 4px; }

/* Spacing between bubble groups */
.msg-bubble-first { margin-top: 8px; }

/* Reply quote inside bubble */
.msg-reply-quote {
display: flex;
flex-direction: column;
gap: 1px;
padding: 5px 8px;
margin-bottom: 6px;
border-radius: 6px;
border-left: 3px solid rgba(255,255,255,.4);
background: rgba(255,255,255,.1);
font-size: .78rem;
line-height: 1.35;
}
.msg-bubble-theirs .msg-reply-quote {
border-left-color: var(--link-color);
background: rgba(124,58,237,.06);
}
.msg-reply-quote-name {
font-weight: 600;
font-size: .72rem;
opacity: .8;
}
.msg-reply-quote-text {
opacity: .75;
}

/* Bubble metadata */
.msg-bubble-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
}
.msg-bubble-time {
font-size: .67rem;
opacity: .55;
}
.msg-read-receipt {
font-size: .65rem;
opacity: .55;
font-weight: 500;
}

/* Bubble enter animation */
.msg-bubble-enter {
animation: msg-bubble-in .25s ease-out;
}
@keyframes msg-bubble-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

/* Typing indicator */
.msg-typing {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 24px 8px;
flex-shrink: 0;
}
.msg-typing-dots {
display: flex;
gap: 3px;
}
.msg-typing-dots span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--text-faint);
animation: msg-typing-bounce 1.4s infinite ease-in-out both;
}
.msg-typing-dots span:nth-child(1) { animation-delay: 0s; }
.msg-typing-dots span:nth-child(2) { animation-delay: .16s; }
.msg-typing-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes msg-typing-bounce {
0%, 80%, 100% { transform: scale(0.7); opacity: .4; }
40% { transform: scale(1); opacity: 1; }
}
.msg-typing-text {
font-size: .73rem;
color: var(--text-faint);
}

/* Reply banner */
.msg-reply-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 20px;
border-top: 1px solid var(--border-color);
background: var(--bg-card);
flex-shrink: 0;
animation: msg-reply-slide .15s ease-out;
}
@keyframes msg-reply-slide {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.msg-reply-banner-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
border-left: 3px solid var(--link-color);
padding-left: 10px;
}
.msg-reply-banner-label {
font-size: .75rem;
color: var(--text-muted);
}
.msg-reply-banner-label strong {
color: var(--link-color);
font-weight: 600;
}
.msg-reply-banner-text {
font-size: .82rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-reply-banner-close {
width: 28px; height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
flex-shrink: 0;
}
.msg-reply-banner-close:hover { background: rgba(124,58,237,.1); }

/* Input area */
.msg-input-area {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px 20px 16px;
border-top: 1px solid var(--border-color);
flex-shrink: 0;
}

.msg-input {
flex: 1;
padding: 10px 16px;
border-radius: 20px;
border: 1px solid var(--border-color);
background: var(--bg-input);
color: var(--text-primary);
font-size: .88rem;
font-family: inherit;
resize: none;
outline: none;
min-height: 40px;
max-height: 120px;
line-height: 1.4;
transition: border-color .2s;
box-sizing: border-box;
}
.msg-input:focus { border-color: var(--link-color); }

.msg-send-btn {
width: 40px; height: 40px;
border-radius: 50%;
border: none;
background: var(--link-color);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s, transform .1s;
flex-shrink: 0;
}
.msg-send-btn:hover { background: var(--link-hover); }
.msg-send-btn:active { transform: scale(.93); }

/* Message action panel (overlay) */
.msg-action-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 200;
opacity: 0;
transition: opacity .2s ease;
}
.msg-action-overlay.visible { opacity: 1; }

.msg-action-panel {
width: 100%;
max-width: 420px;
background: var(--bg-card);
border-radius: 16px 16px 0 0;
padding: 8px 8px 20px;
display: flex;
flex-direction: column;
gap: 2px;
transform: translateY(100%);
transition: transform .25s ease;
}
.msg-action-overlay.visible .msg-action-panel {
transform: translateY(0);
}

.msg-action-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: none;
background: transparent;
color: var(--text-primary);
font-size: .9rem;
font-weight: 500;
text-align: left;
cursor: pointer;
border-radius: 10px;
transition: background .15s;
}
.msg-action-item:hover { background: rgba(124,58,237,.06); }
.msg-action-item svg { color: var(--text-muted); flex-shrink: 0; }
.msg-action-item.msg-action-danger { color: #ef4444; }
.msg-action-item.msg-action-danger svg { color: #ef4444; }
.msg-action-item.msg-action-danger:hover { background: rgba(239,68,68,.08); }

/* -- Light mode overrides -- */

[data-theme="light"] .msg-sidebar { background: #fafafe; }
[data-theme="light"] .msg-friend-item:hover { background: rgba(124,58,237,.05); }
[data-theme="light"] .msg-friend-item.active { background: rgba(124,58,237,.08); }
[data-theme="light"] .msg-friend-avatar { background: rgba(124,58,237,.1); }
[data-theme="light"] .msg-dot { border-color: #fafafe; }
[data-theme="light"] .msg-bubble-theirs { background: #fff; border-color: #e8e8ee; }
[data-theme="light"] .msg-reject-btn { background: #f3f3f6; }
[data-theme="light"] .msg-search { background: #eeeef4; }
[data-theme="light"] .msg-search:focus { background: #fff; }
[data-theme="light"] .msg-context-menu { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
[data-theme="light"] .msg-input { background: #f0f0f5; }
[data-theme="light"] .msg-input:focus { background: #fff; }
[data-theme="light"] .msg-reply-banner { background: #f4f4f8; }
[data-theme="light"] .msg-action-overlay { background: rgba(0,0,0,.25); }
[data-theme="light"] .msg-action-panel { background: #fff; box-shadow: 0 -4px 24px rgba(0,0,0,.08); }
[data-theme="light"] .msg-reply-quote { background: rgba(124,58,237,.05); }

/* -- Pinned bar -- */
.msg-pinned-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-bottom: 1px solid var(--border-color);
background: rgba(124,58,237,.04);
cursor: pointer;
flex-shrink: 0;
transition: background .15s;
}
.msg-pinned-bar:hover { background: rgba(124,58,237,.08); }
.msg-pinned-bar svg { color: var(--link-color); flex-shrink: 0; }
.msg-pinned-text {
flex: 1;
font-size: .82rem;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-pinned-count {
font-size: .7rem;
color: var(--link-color);
background: rgba(124,58,237,.1);
border: none;
padding: 3px 8px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}

/* -- Voice note player (inside bubble) -- */
.msg-voice-player {
display: flex;
align-items: center;
gap: 10px;
min-width: 180px;
}
.msg-voice-play-btn {
width: 32px; height: 32px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.15);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .15s;
}
.msg-bubble-theirs .msg-voice-play-btn {
background: rgba(124,58,237,.12);
color: var(--link-color);
}
.msg-voice-play-btn:hover { background: rgba(255,255,255,.25); }
.msg-bubble-theirs .msg-voice-play-btn:hover { background: rgba(124,58,237,.2); }

.msg-voice-wave {
flex: 1;
height: 20px;
background: repeating-linear-gradient(
90deg,
rgba(255,255,255,.2) 0px, rgba(255,255,255,.2) 2px,
transparent 2px, transparent 5px
);
border-radius: 4px;
min-width: 60px;
}
.msg-bubble-theirs .msg-voice-wave {
background: repeating-linear-gradient(
90deg,
rgba(124,58,237,.15) 0px, rgba(124,58,237,.15) 2px,
transparent 2px, transparent 5px
);
}
.msg-voice-dur {
font-size: .72rem;
opacity: .6;
white-space: nowrap;
}

/* -- Voice recording UI -- */
.msg-voice-recording {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-top: 1px solid var(--border-color);
flex-shrink: 0;
background: var(--bg-card);
}
.msg-voice-recording-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: #ef4444;
animation: msg-rec-pulse 1s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes msg-rec-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .3; }
}
.msg-voice-recording-time {
font-size: .9rem;
font-weight: 600;
color: var(--text-heading);
font-variant-numeric: tabular-nums;
min-width: 36px;
}
.msg-voice-recording-label {
flex: 1;
font-size: .82rem;
color: var(--text-muted);
}
.msg-voice-cancel, .msg-voice-send {
padding: 6px 16px;
border-radius: 8px;
border: none;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
transition: opacity .15s;
}
.msg-voice-cancel {
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border-color);
}
.msg-voice-send {
background: var(--link-color);
color: #fff;
}
.msg-voice-cancel:hover, .msg-voice-send:hover { opacity: .85; }

/* -- Preview cards (shared content) -- */
.msg-preview-card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 10px;
background: rgba(255,255,255,.06);
margin-bottom: 6px;
}

/* ---------- Adventurer's Guild party-invite card (in chat) ---------- */
.msg-ap-card {
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(14,16,34,.96), rgba(8,9,22,.96));
    border: 1px solid rgba(123,230,255,.28);
    margin: 2px 0 6px;
    min-width: 240px;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    position: relative;
}
.msg-ap-card::before {
    content:"";
    position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(0deg,
        rgba(123,230,255,.03) 0, rgba(123,230,255,.03) 1px,
        transparent 1px, transparent 3px);
}
.msg-ap-banner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px;
    background: linear-gradient(90deg, rgba(123,230,255,.14), rgba(192,132,252,.12));
    border-bottom: 1px solid rgba(123,230,255,.2);
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}
.msg-ap-eyebrow { color: #7be6ff; }
.msg-ap-slots   { color: #c084fc; }
.msg-ap-body {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 12px 12px;
}
.msg-ap-sigil {
    width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.55), rgba(124,58,237,.1));
    color: #f3e8ff;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(192,132,252,.35);
    box-shadow: 0 0 16px rgba(124,58,237,.25);
    flex-shrink: 0;
    overflow: hidden;
}
.msg-ap-sigil-img { background: rgba(255,255,255,0.04); }
.msg-ap-sigil-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.msg-ap-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-ap-name { font-size: 1.02rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.msg-ap-motto { font-size: .8rem; color: #aab0d4; font-style: italic; margin: 1px 0; }
.msg-ap-led-by { font-size: .72rem; color: #8b92b8; letter-spacing: .02em; }
.msg-ap-btns {
    display: flex; gap: 8px;
    padding: 0 12px 12px;
}
.msg-ap-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 9px; border: 1px solid rgba(123,136,208,.25);
    background: rgba(12,14,28,.7);
    color: #dfe4ff;
    font-size: .82rem; font-weight: 600; font-family: inherit;
    cursor: pointer;
    transition: transform .1s, background .15s, border-color .15s;
}
.msg-ap-btn:hover  { transform: translateY(-1px); }
.msg-ap-btn:active { transform: scale(.97); }
.msg-ap-btn[disabled] { opacity: .5; cursor: not-allowed; }
.msg-ap-btn-accept {
    background: linear-gradient(180deg, rgba(34,197,94,.28), rgba(34,197,94,.12));
    border-color: rgba(34,197,94,.55);
    color: #dcfce7;
}
.msg-ap-btn-accept:hover {
    background: linear-gradient(180deg, rgba(34,197,94,.4), rgba(34,197,94,.18));
}
.msg-ap-btn-decline {
    background: linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.08));
    border-color: rgba(239,68,68,.45);
    color: #fecaca;
}
.msg-ap-btn-decline:hover {
    background: linear-gradient(180deg, rgba(239,68,68,.35), rgba(239,68,68,.14));
}
.msg-ap-sent, .msg-ap-done {
    padding: 10px 12px 12px;
    text-align: center;
    font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
    color: #7be6ff;
    border-top: 1px dashed rgba(123,230,255,.2);
}
.msg-ap-done { color: #22c55e; }
.msg-ap-done-declined { color: #ef4444; }
.msg-ap-card.msg-ap-joined { border-color: rgba(34,197,94,.5); }
.msg-bubble-theirs .msg-preview-card {
background: rgba(124,58,237,.04);
}
.msg-preview-img {
width: 48px; height: 48px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: rgba(0,0,0,.2);
}
.msg-preview-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.msg-image-link {
display: block;
margin: -4px -2px 4px;
border-radius: 10px;
overflow: hidden;
}
.msg-image {
display: block;
max-width: 260px;
max-height: 320px;
width: auto;
height: auto;
border-radius: 10px;
cursor: zoom-in;
background: rgba(0,0,0,.2);
}
.msg-sticker {
display: block;
width: 160px; height: 160px;
object-fit: contain;
background: transparent;
margin: -2px;
}
.msg-preview-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.msg-preview-info strong {
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-preview-info span {
font-size: .72rem;
opacity: .6;
}
.msg-preview-read {
padding: 4px 12px;
border-radius: 6px;
font-size: .72rem;
font-weight: 600;
text-decoration: none;
flex-shrink: 0;
background: rgba(255,255,255,.1);
color: #fff;
transition: background .15s;
}
.msg-bubble-theirs .msg-preview-read {
background: rgba(124,58,237,.1);
color: var(--link-color);
}
.msg-preview-read:hover { opacity: .8; }

.msg-preview-profile { gap: 10px; }
.msg-preview-avatar { flex-shrink: 0; }
.msg-preview-avatar-inner {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(124,58,237,.15);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .85rem;
color: var(--link-color);
overflow: hidden;
}
.msg-preview-avatar-inner.has-img img {
width: 100%; height: 100%;
object-fit: cover;
}

/* -- Party invite preview -- */
.msg-preview-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #ec4899);
color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}

/* -- Linkified URLs in chat bodies -- */
.msg-link {
color: inherit;
text-decoration: underline;
word-break: break-all;
}
.msg-bubble-theirs .msg-link { color: var(--link-color); }

/* -- Activity messages (system) -- */
.msg-bubble-wrap-activity {
align-items: center;
margin: 12px 0;
}
.msg-activity {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 20px;
background: rgba(124,58,237,.06);
border: 1px solid rgba(124,58,237,.08);
font-size: .76rem;
color: var(--text-muted);
}
.msg-activity-time {
font-size: .67rem;
opacity: .5;
}

/* -- Attach / voice buttons -- */
.msg-attach-btn, .msg-voice-btn {
width: 36px; height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: color .15s, background .15s;
flex-shrink: 0;
}
.msg-attach-btn:hover, .msg-voice-btn:hover {
color: var(--link-color);
background: rgba(124,58,237,.08);
}

/* -- Share overlay -- */
.msg-share-overlay, .msg-wp-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 200;
opacity: 0;
transition: opacity .2s ease;
}
.msg-share-overlay.visible, .msg-wp-overlay.visible { opacity: 1; }

.msg-share-panel, .msg-wp-panel {
width: 100%;
max-width: 420px;
background: var(--bg-card);
border-radius: 16px 16px 0 0;
padding: 16px;
max-height: 70vh;
display: flex;
flex-direction: column;
gap: 12px;
transform: translateY(100%);
transition: transform .25s ease;
}
.msg-share-overlay.visible .msg-share-panel,
.msg-wp-overlay.visible .msg-wp-panel {
transform: translateY(0);
}

.msg-share-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.msg-share-head h3 {
font-size: 1rem;
font-weight: 700;
color: var(--text-heading);
margin: 0;
}
.msg-share-close {
width: 32px; height: 32px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 1.4rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
transition: background .15s;
}
.msg-share-close:hover { background: rgba(124,58,237,.08); }

.msg-share-results {
overflow-y: auto;
flex: 1;
min-height: 100px;
}
.msg-share-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 8px;
border-radius: 10px;
transition: background .15s;
}
.msg-share-item:hover { background: rgba(124,58,237,.06); }

.msg-share-thumb {
width: 44px; height: 44px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: rgba(0,0,0,.2);
}
.msg-share-thumb-empty {
width: 44px; height: 44px;
border-radius: 8px;
background: rgba(124,58,237,.08);
flex-shrink: 0;
}
.msg-share-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.msg-share-item-info strong {
font-size: .85rem;
color: var(--text-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-share-item-info span {
font-size: .72rem;
color: var(--text-muted);
}

/* -- Wallpaper grid -- */
.msg-wp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.msg-wp-opt {
height: 64px;
border-radius: 10px;
border: 2px solid var(--border-color);
cursor: pointer;
font-size: .72rem;
font-weight: 600;
color: var(--text-muted);
transition: border-color .15s;
}
.msg-wp-opt:hover { border-color: var(--link-color); }
.msg-wp-opt-active { border-color: var(--link-color); box-shadow: 0 0 0 1px var(--link-color); }

/* -- Context menu fix -- */
.msg-context-item {
display: flex;
align-items: center;
gap: 8px;
}
.msg-context-danger { color: #ef4444; }
.msg-context-danger:hover { background: rgba(239,68,68,.08); color: #ef4444; }

/* -- Light mode additions -- */
[data-theme="light"] .msg-pinned-bar { background: rgba(124,58,237,.03); }
[data-theme="light"] .msg-voice-recording { background: #f4f4f8; }
[data-theme="light"] .msg-preview-card { background: rgba(124,58,237,.03); }
[data-theme="light"] .msg-activity { background: rgba(124,58,237,.04); border-color: rgba(124,58,237,.06); }
[data-theme="light"] .msg-share-panel, [data-theme="light"] .msg-wp-panel { background: #fff; box-shadow: 0 -4px 24px rgba(0,0,0,.08); }
[data-theme="light"] .msg-wp-opt { border-color: #e2e3ec; }
[data-theme="light"] .msg-voice-play-btn { background: rgba(124,58,237,.08); color: var(--link-color); }

/* -- Sidebar install button (matches .sb-link) -- */
.sb-install-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
margin: 0 8px;
border-radius: 12px;
color: #b0b0cc;
text-decoration: none;
font-size: .88rem;
font-weight: 500;
transition: background .15s, color .15s;
-webkit-tap-highlight-color: transparent;
}
.sb-install-btn:hover {
background: rgba(255,255,255,.04);
color: #fff;
}
.sb-install-btn svg {
flex-shrink: 0;
}
[data-theme="light"] .sb-install-btn { color: #444; }
[data-theme="light"] .sb-install-btn:hover { background: rgba(0,0,0,.03); color: #111; }

/* -- Messages nav badge -- */
.nav-msg-badge {
position: absolute;
top: -2px; right: -6px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: #ef4444;
color: #fff;
font-size: .65rem;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
}

/* ============================================
   EXPLORE / BROWSE PAGE — mobile-first
   ============================================ */

body.explore-page { background: #060612; }

/* reduce navbar height on explore page */
body.explore-page .navbar {
height: 46px;
padding: 0 16px;
}
body.explore-page .navbar .logo { font-size: 1.15rem; }
body.explore-page .search-wrap { display: none; }

.ex {
max-width: 1200px;
margin: 0 auto;
padding-bottom: 48px;
}

/* ---- HERO ---- */

.ex-hero {
position: relative;
height: 36vh;
min-height: 220px;
max-height: 300px;
overflow: hidden;
}
.ex-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 15%;
transition: background-image .5s ease;
/* Fade the sharp image's left edge to transparent so it dissolves
   into the page background instead of ending at a vertical line.
   The blurred mirror layer (.ex-hero-bg-blur) fills the void with
   a soft halo of color, and the dark page bg + gradient finish
   the morph. */
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 18%, rgba(0,0,0,.6) 28%, #000 42%);
        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 18%, rgba(0,0,0,.6) 28%, #000 42%);
}
/* Blurred mirror of .ex-hero-bg, masked to fade out toward the right.
   The actual sharp image stays underneath; this layer just smudges
   the leftmost ~30% so it visually melts into the page background.
   Negative `left` and `scale` so the gaussian halo doesn't reveal
   a hard cutoff at the layer's edge. */
.ex-hero-bg-blur {
position: absolute;
top: 0; bottom: 0;
left: -8%;
width: 50%;
background-size: cover;
background-position: center 15%;
filter: blur(60px) saturate(1.1);
transform: scale(1.15);
transform-origin: left center;
transition: background-image .5s ease;
pointer-events: none;
-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 70%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 70%, transparent 100%);
}
.ex-hero-gradient {
position: absolute;
inset: 0;
background:
    linear-gradient(to top, #060612 0%, rgba(6,6,18,.92) 22%, rgba(6,6,18,.55) 48%, rgba(6,6,18,.15) 78%, transparent 100%),
    linear-gradient(to right, rgba(6,6,18,.55) 0%, transparent 45%);
}
.ex-hero-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 16px 14px;
z-index: 1;
}

/* tags: only score + format — small, subtle */
.ex-hero-tags {
display: flex;
gap: 6px;
margin-bottom: 6px;
align-items: center;
}
.ex-hero-tag {
font-size: .62rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.08);
letter-spacing: .04em;
text-transform: uppercase;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ex-hero-tag-score {
background: rgba(255,255,255,.08);
color: #fbbf24;
border-color: rgba(251,191,36,.2);
}

/* title: 1 line on mobile, 2 on larger — keeps the hero compact */
.ex-hero-title {
font-size: 1.25rem;
font-weight: 800;
color: #fff;
margin: 0;
line-height: 1.15;
letter-spacing: -.025em;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* desc: 1 line on mobile, hidden until content loads */
.ex-hero-desc {
font-size: .72rem;
color: rgba(255,255,255,.5);
line-height: 1.35;
margin: 3px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* watch button: compact inline pill instead of a full-width slab */
.ex-hero-watch-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
align-self: flex-start;
padding: 9px 18px;
margin-top: 10px;
border-radius: 999px;
background: var(--link-color);
color: #fff;
font-size: .82rem;
font-weight: 700;
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(124,58,237,.3);
-webkit-tap-highlight-color: transparent;
transition: transform .1s;
}
.ex-hero-watch-btn:active { transform: scale(.97); }

/* -------- Netflix-style video layer --------
   Sits absolutely over .ex-hero-bg so the poster never unmounts.
   Opacity is the only thing that moves; no layout shifts. */
.ex-hero-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
    /* subtle blur while fading so the cut never feels crisp */
    will-change: opacity;
    z-index: 0;
}
.ex-hero-video.is-visible { opacity: 1; }
.ex-hero-video-frame {
    position: absolute;
    top: 50%; left: 50%;
    /* scale up so YouTube's corner branding + letterbox bleed off the
       visible box; the hero's `overflow: hidden` does the cropping. */
    width: 115%;
    height: 135%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    background: #000;
}

/* -------- Top-right control cluster --------
   Hidden until hover / focus / touch; fades with a subtle lift. */
.ex-hero-controls {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 4;
    display: inline-flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}
.ex-hero:hover .ex-hero-controls,
.ex-hero:focus-within .ex-hero-controls {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ex-hero-ctrl {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(8,8,22,.72);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    color: #fff;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.ex-hero-ctrl:hover {
    background: rgba(124,58,237,.55);
    border-color: rgba(167,139,250,.4);
    transform: scale(1.06);
}
.ex-hero-ctrl:active { transform: scale(.94); }
.ex-hero-ctrl[hidden] { display: none; }

/* -------- Progress bar --------
   Thin line hugging the hero's bottom edge. Width animates linearly
   across the slide cycle; JS restarts/pauses via inline style. */
.ex-hero-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255,255,255,.08);
    z-index: 4;
    pointer-events: none;
}
.ex-hero-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #d4c2ff);
    box-shadow: 0 0 10px rgba(167,139,250,.7);
}

/* -------- Thumbnail navigation (replaces plain dots) -------- */
.ex-hero-dots {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.ex-hero-thumb {
    width: 36px; height: 22px;
    padding: 0;
    border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,.18);
    background-size: cover;
    background-position: center 20%;
    background-color: rgba(255,255,255,.06);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    opacity: .5;
}
.ex-hero-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));
}
.ex-hero-thumb-inner { display: none; }
.ex-hero-thumb:hover { opacity: .9; transform: translateY(-1px); }
.ex-hero-thumb.active {
    opacity: 1;
    border-color: #a78bfa;
    box-shadow: 0 4px 14px rgba(124,58,237,.5), 0 0 0 2px rgba(167,139,250,.25);
    transform: translateY(-1px);
}

/* legacy fallback so older markup still works — hidden if a thumb takes over */
.ex-hero-dot {
width: 6px;
height: 6px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.2);
cursor: pointer;
padding: 0;
transition: all .2s;
}
.ex-hero-dot.active {
width: 20px;
border-radius: 3px;
background: var(--link-color);
}

/* skeleton line */
.ex-hero-skel-line {
display: block;
height: 12px;
border-radius: 4px;
background: rgba(255,255,255,.06);
margin-bottom: 6px;
}

/* ---- GENERAL BUTTON ---- */

.ex-btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 12px;
background: rgba(255,255,255,.06);
color: var(--text-secondary);
font-size: .85rem;
font-weight: 600;
border: 1px solid rgba(255,255,255,.1);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s;
}

/* ---- SEARCH BAR (glass) ---- */

.ex-search-wrap {
position: relative;
padding: 0 16px;
margin-top: -24px;
margin-bottom: 8px;
z-index: 10;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.ex-search-form { margin: 0; padding: 0; display: block; }

.ex-search-glass {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
height: 48px;
border-radius: 16px;
background: rgba(255,255,255,.06);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
/* Minimal, premium focus: a slightly brighter border + soft neutral glow.
   No purple ring, no system highlight — consistent with the dark glass. */
.ex-search-glass:focus-within {
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 0 0 3px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06);
}

.ex-search-icon {
color: rgba(255,255,255,.3);
flex-shrink: 0;
transition: color .25s ease;
}
.ex-search-glass:focus-within .ex-search-icon { color: rgba(255,255,255,.7); }

.ex-search-input {
flex: 1;
background: transparent;
border: none;
color: #fff;
font-size: .9rem;
outline: none;
box-shadow: none;
min-width: 0;
/* Strip every OS-level decoration (search magnifier, cancel X, styled
   ring). We want a completely plain text input that looks like a search. */
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
-webkit-tap-highlight-color: transparent;
caret-color: rgba(255,255,255,.8);
user-select: text;
-webkit-user-select: text;
transition: color .2s ease;
}
/* Kill any browser-native search-input sub-widgets (cancel ×, decoration). */
.ex-search-input::-webkit-search-cancel-button,
.ex-search-input::-webkit-search-decoration,
.ex-search-input::-webkit-search-results-button,
.ex-search-input::-webkit-search-results-decoration { display: none; }
/* Kill the mobile autofill strip's "suggestion" highlighting. */
.ex-search-input::-webkit-contacts-auto-fill-button,
.ex-search-input::-webkit-credentials-auto-fill-button {
visibility: hidden; display: none !important;
pointer-events: none;
position: absolute; right: 0;
}
.ex-search-input:focus,
.ex-search-input:focus-visible,
.ex-search-input:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
-webkit-tap-highlight-color: transparent;
}
/* Belt-and-braces: kill any UA selection tint inside the field. */
.ex-search-input::selection { background: rgba(255,255,255,.18); color: #fff; }
.ex-search-input::-moz-selection { background: rgba(255,255,255,.18); color: #fff; }
.ex-search-input::placeholder {
color: rgba(255,255,255,.25);
}
/* Nuke Chrome/Safari autofill styling — no yellow/blue/purple background,
   no tinted text. We use a giant inset box-shadow as a paint-over (the
   canonical autofill-override trick) and a huge transition so the fade
   back never actually reaches its destination. */
.ex-search-input:-webkit-autofill,
.ex-search-input:-webkit-autofill:hover,
.ex-search-input:-webkit-autofill:focus,
.ex-search-input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
        box-shadow: 0 0 0 1000px transparent inset !important;
-webkit-text-fill-color: #fff !important;
caret-color: rgba(255,255,255,.8) !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
outline: none !important;
transition: background-color 9999s ease-in-out 0s,
            color            9999s ease-in-out 0s;
}
.ex-search-input:-webkit-autofill::first-line {
font-size: .9rem;
color: #fff;
}
/* Kill the selection-tint on autofill previews too. */
.ex-search-input:-internal-autofill-selected,
.ex-search-input:-internal-autofill-previewed {
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
background-color: transparent !important;
color: #fff !important;
}

.ex-search-clear {
width: 24px; height: 24px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.4);
font-size: 1rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .15s;
-webkit-tap-highlight-color: transparent;
}
.ex-search-clear:hover { background: rgba(255,255,255,.12); }

/* Results dropdown */
.ex-search-results {
position: absolute;
top: calc(100% + 6px);
left: 16px; right: 16px;
border-radius: 16px;
background: rgba(16,16,32,.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 12px 40px rgba(0,0,0,.5);
overflow: hidden;
max-height: 360px;
overflow-y: auto;
}

.ex-search-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
text-decoration: none;
color: inherit;
transition: background .12s;
-webkit-tap-highlight-color: transparent;
}
.ex-search-item:hover { background: rgba(124,58,237,.08); }
.ex-search-item + .ex-search-item { border-top: 1px solid rgba(255,255,255,.04); }

.ex-search-thumb {
width: 40px; height: 54px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}

.ex-search-info {
flex: 1; min-width: 0;
}
.ex-search-info h4 {
font-size: .85rem;
font-weight: 600;
color: #fff;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ex-search-info span {
font-size: .7rem;
color: var(--text-faint);
display: block;
margin-top: 2px;
}

.ex-search-loading,
.ex-search-empty {
padding: 20px;
text-align: center;
font-size: .85rem;
color: var(--text-faint);
}

/* Search history dropdown */
.ex-search-hist-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px 6px;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.45);
border-bottom: 1px solid rgba(255,255,255,.04);
}
.ex-search-hist-clear {
background: transparent; border: 0;
color: rgba(255,255,255,.55);
font-size: .72rem;
cursor: pointer;
padding: 2px 6px;
border-radius: 6px;
}
.ex-search-hist-clear:hover { color: #fff; background: rgba(255,255,255,.05); }

.ex-search-hist-row {
display: flex; align-items: stretch;
}
.ex-search-hist-item {
flex: 1;
display: flex; align-items: center; gap: 10px;
background: transparent; border: 0;
padding: 10px 14px;
color: rgba(255,255,255,.85);
font-size: .85rem;
text-align: left;
cursor: pointer;
min-width: 0;
}
.ex-search-hist-item svg { color: rgba(255,255,255,.35); flex-shrink: 0; }
.ex-search-hist-item span {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-search-hist-item:hover { background: rgba(124,58,237,.08); color: #fff; }

.ex-search-hist-x {
background: transparent; border: 0;
color: rgba(255,255,255,.35);
font-size: 1.1rem;
width: 36px;
cursor: pointer;
transition: color .12s, background .12s;
}
.ex-search-hist-x:hover { color: #fff; background: rgba(255,255,255,.06); }

.ex-search-hist-row + .ex-search-hist-row { border-top: 1px solid rgba(255,255,255,.04); }

[data-theme="light"] .ex-search-hist-head { color: rgba(0,0,0,.45); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .ex-search-hist-clear { color: rgba(0,0,0,.55); }
[data-theme="light"] .ex-search-hist-clear:hover { color: #000; background: rgba(0,0,0,.04); }
[data-theme="light"] .ex-search-hist-item { color: rgba(0,0,0,.85); }
[data-theme="light"] .ex-search-hist-item svg { color: rgba(0,0,0,.35); }
[data-theme="light"] .ex-search-hist-item:hover { color: #000; }
[data-theme="light"] .ex-search-hist-x { color: rgba(0,0,0,.4); }
[data-theme="light"] .ex-search-hist-x:hover { color: #000; background: rgba(0,0,0,.04); }
[data-theme="light"] .ex-search-hist-row + .ex-search-hist-row { border-color: rgba(0,0,0,.06); }

/* ---- LIGHT MODE ---- */
[data-theme="light"] .ex-search-glass {
background: rgba(255,255,255,.7);
border-color: rgba(0,0,0,.06);
box-shadow: 0 4px 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="light"] .ex-search-glass:focus-within {
border-color: rgba(0,0,0,.18);
background: rgba(255,255,255,.85);
box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 0 0 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .ex-search-glass:focus-within .ex-search-icon { color: var(--text-body); }
[data-theme="light"] .ex-search-input { caret-color: var(--text-heading); }
[data-theme="light"] .ex-search-input:-webkit-autofill,
[data-theme="light"] .ex-search-input:-webkit-autofill:hover,
[data-theme="light"] .ex-search-input:-webkit-autofill:focus,
[data-theme="light"] .ex-search-input:-webkit-autofill:active {
caret-color: var(--text-heading) !important;
}
[data-theme="light"] .ex-search-input { color: var(--text-heading); }
[data-theme="light"] .ex-search-input::placeholder { color: var(--text-faint); }
[data-theme="light"] .ex-search-input:-webkit-autofill,
[data-theme="light"] .ex-search-input:-webkit-autofill:hover,
[data-theme="light"] .ex-search-input:-webkit-autofill:focus,
[data-theme="light"] .ex-search-input:-webkit-autofill:active {
-webkit-text-fill-color: var(--text-heading) !important;
}
[data-theme="light"] .ex-search-icon { color: var(--text-faint); }
[data-theme="light"] .ex-search-results {
background: rgba(255,255,255,.92);
border-color: rgba(0,0,0,.06);
box-shadow: 0 12px 40px rgba(0,0,0,.1);
}
[data-theme="light"] .ex-search-info h4 { color: var(--text-heading); }
[data-theme="light"] .ex-search-item:hover { background: rgba(124,58,237,.04); }
[data-theme="light"] .ex-search-item + .ex-search-item { border-color: #eee; }
[data-theme="light"] .ex-search-clear { background: rgba(0,0,0,.06); color: var(--text-muted); }

/* ---- SECTIONS ---- */

.ex-section {
padding: 0 16px;
margin-top: 44px;
}
.ex-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}
.ex-section-title {
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.015em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.1;
}
.ex-section-sub {
    margin: 4px 0 0;
    font-size: .8rem;
    color: rgba(232,228,245,.55);
    letter-spacing: .005em;
    line-height: 1.35;
}

/* Pulse beside "Fresh this week" to signal live-updating content */
.ex-section-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 14px rgba(167,139,250,.85), 0 0 0 4px rgba(167,139,250,.14);
    animation: ex-section-pulse 1.9s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ex-section-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 14px rgba(167,139,250,.85), 0 0 0 4px rgba(167,139,250,.14); }
    50%      { transform: scale(1.3);  box-shadow: 0 0 22px rgba(167,139,250,1), 0 0 0 7px rgba(167,139,250,.08); }
}

/* Empty-state line inside a horizontal rail */
.ex-rail-empty {
    padding: 26px 20px;
    margin: 0;
    border-radius: 14px;
    border: 1px dashed rgba(167,139,250,.22);
    color: rgba(232,228,245,.55);
    font-size: .82rem;
    flex: 1;
    text-align: center;
}
.ex-grid-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 12px;
}
.ex-sort {
padding: 9px 14px;
padding-right: 32px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.04);
color: var(--text-secondary);
font-size: .8rem;
font-weight: 600;
outline: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color .15s, background-color .15s;
}
.ex-sort:hover { border-color: rgba(255,255,255,.2); background-color: rgba(255,255,255,.06); }
.ex-sort:focus { border-color: var(--link-color); }
[data-theme="light"] .ex-section-title { color: var(--text-heading); }

/* ---- CONTINUE WATCHING ---- */

.ex-continue-card {
display: flex;
flex-direction: column;
width: 120px;
min-width: 120px;
text-decoration: none;
flex-shrink: 0;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
}
.ex-continue-img {
position: relative;
width: 100%;
aspect-ratio: 3/4;
border-radius: 10px;
overflow: hidden;
background: rgba(255,255,255,.04);
}
.ex-continue-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.ex-continue-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.35);
opacity: 0;
transition: opacity .15s;
}
.ex-continue-card:active .ex-continue-play { opacity: 1; }
.ex-continue-progress {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: rgba(255,255,255,.08);
}
.ex-continue-fill {
height: 100%;
background: var(--link-color);
border-radius: 0 2px 2px 0;
}
.ex-continue-title {
font-size: .72rem;
font-weight: 600;
color: var(--text-primary);
margin-top: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ex-continue-ep {
font-size: .65rem;
color: var(--text-muted);
margin-top: 1px;
}

/* ---- MOOD FILTERS ---- */

.ex-moods-section { margin-top: 28px; }
.ex-moods {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
padding: 0 0 4px;
}
.ex-moods::-webkit-scrollbar { display: none; }
.ex-mood {
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.1);
background: transparent;
color: rgba(255,255,255,.6);
font-size: .75rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: .015em;
transition: color .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out), transform .12s;
-webkit-tap-highlight-color: transparent;
}
.ex-mood:hover { color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.22); }
.ex-mood:active { transform: scale(.95); }
.ex-mood.active {
background: #fff;
border-color: #fff;
color: #0a0a18;
}
[data-theme="light"] .ex-mood.active { background: var(--text-heading); border-color: var(--text-heading); color: #fff; }

/* ---- HORIZONTAL SCROLL ROW ---- */

.ex-scroll-row {
display: flex;
gap: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-right: 40px;
}
.ex-scroll-row::-webkit-scrollbar { display: none; }

/* ---- LARGE CARD (trending / season) ---- */

.ex-card-lg {
display: flex;
flex-direction: column;
width: 138px;
min-width: 138px;
flex-shrink: 0;
text-decoration: none;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
transition: transform var(--dur-base) var(--ease-out);
will-change: transform;
}
.ex-card-lg-img {
position: relative;
width: 100%;
aspect-ratio: 2/3;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(22,12,48,.4));
box-shadow: 0 12px 28px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04);
transition: box-shadow var(--dur-base) var(--ease-out);
}
.ex-card-lg-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}

/* shade gradient at bottom of poster — keeps rating + status legible */
.ex-card-shade {
position: absolute;
inset: auto 0 0 0;
height: 55%;
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.18) 65%, transparent 100%);
opacity: .65;
transition: opacity var(--dur-base) var(--ease-out);
pointer-events: none;
}

/* Unified corner chip — one badge per poster, priority NEW > AIRING > score */
.ex-card-chip {
    position: absolute;
    top: 8px; left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 999px;
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.ex-card-chip--new {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    border-color: rgba(255,255,255,.25);
    box-shadow: 0 6px 16px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.28);
    animation: ex-chip-pulse 2.4s ease-in-out infinite;
}
.ex-card-chip--airing {
    background: rgba(6,6,18,.78);
    color: #6ee7a4;
    letter-spacing: .08em;
}
.ex-card-chip--airing .ex-card-chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,.9);
    animation: ex-chip-dot 1.8s ease-in-out infinite;
}
.ex-card-chip--score {
    background: rgba(6,6,18,.78);
    color: #fbbf24;
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 700;
}
@keyframes ex-chip-pulse {
    0%, 100% { box-shadow: 0 6px 16px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.28); }
    50%      { box-shadow: 0 8px 22px rgba(167,139,250,.75), inset 0 1px 0 rgba(255,255,255,.38); }
}
@keyframes ex-chip-dot {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.35); opacity: .7; }
}

/* big centered play FAB — hidden by default, fades in on hover/focus
   (desktop) or long-press (mobile, via .is-tapped — same trigger as
   .ex-card-actions). */
.ex-card-play-fab {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.9);
    background: rgba(15,15,30,.55);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px; /* optical-center the play triangle */
    box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-base) var(--ease-spring),
                background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.ex-card-lg .ex-card-play-fab { width: 58px; height: 58px; }
.ex-card-play-fab:active { transform: translate(-50%, -50%) scale(.95); }

@media (hover: hover) and (pointer: fine) {
    .ex-card-lg:hover .ex-card-play-fab,
    .ex-card:hover .ex-card-play-fab,
    .ex-card-lg:focus-within .ex-card-play-fab,
    .ex-card:focus-within .ex-card-play-fab {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }
    .ex-card-play-fab:hover {
        background: var(--link-color);
        border-color: rgba(255,255,255,1);
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* Mobile: reveal on long-press, mirroring .ex-card-actions behavior */
@media (hover: none) {
    .ex-card-lg.is-tapped .ex-card-play-fab,
    .ex-card.is-tapped .ex-card-play-fab {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 600px) {
    .ex-card-play-fab { width: 44px; height: 44px; }
    .ex-card-lg .ex-card-play-fab { width: 46px; height: 46px; }
}

/* quick action stack — bottom-right, fades in on hover/focus */
.ex-card-actions {
position: absolute;
bottom: 8px; right: 8px;
display: flex;
flex-direction: row;
gap: 6px;
opacity: 0;
transform: translateY(4px);
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
pointer-events: none;
}
.ex-card-act {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
border: none;
cursor: pointer;
background: rgba(15,15,30,.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.ex-card-act:hover { background: var(--link-color); transform: scale(1.12); }
.ex-card-act:active { transform: scale(.94); }
.ex-card-act--save.is-saved { background: var(--link-color); }
.ex-card-act--save.is-saved .ex-bm-path { fill: #fff; }

/* hover state — desktop only */
@media (hover: hover) and (pointer: fine) {
.ex-card-lg:hover, .ex-card:hover { transform: translateY(-4px); }
.ex-card-lg:hover .ex-card-lg-img,
.ex-card:hover .ex-card-img { box-shadow: var(--shadow-card-hover); }
.ex-card-lg:hover .ex-card-lg-img img,
.ex-card:hover .ex-card-img img { transform: scale(1.06); }
.ex-card-lg:hover .ex-card-shade,
.ex-card:hover .ex-card-shade { opacity: .9; }
.ex-card-lg:hover .ex-card-actions,
.ex-card:hover .ex-card-actions,
.ex-card-lg:focus-within .ex-card-actions,
.ex-card:focus-within .ex-card-actions {
opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* Siblings stay at full clarity — the hover-lift + glow is enough
   focus without the heavy blur that made rows feel cluttered. */
.ex-scroll-row .ex-card-lg,
.ex-grid .ex-card {
transition: transform var(--dur-base) var(--ease-out);
}
}

/* tap state — mobile gets a quick zoom + reveal of actions */
@media (hover: none) {
.ex-card-lg:active, .ex-card:active { transform: scale(.97); }
.ex-card-actions { opacity: 0; }
.ex-card-lg.is-tapped .ex-card-actions,
.ex-card.is-tapped .ex-card-actions {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
}

.ex-card-lg-body {
padding: 12px 2px 0;
}
.ex-card-lg-body h3 {
font-size: .88rem;
font-weight: 600;
color: #fff;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
letter-spacing: -.005em;
transition: color var(--dur-fast) var(--ease-out);
}
.ex-card-lg:hover .ex-card-lg-body h3,
.ex-card:hover .ex-card-title { color: var(--link-hover); }

.ex-card-meta {
font-size: .7rem;
color: rgba(232,228,245,.5);
display: block;
margin-top: 4px;
letter-spacing: .015em;
font-variant-numeric: tabular-nums;
}

/* ---- GRID CARD (browse all) ---- */

.ex-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 14px;
}
.ex-card {
display: flex;
flex-direction: column;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
will-change: transform;
}
.ex-card-img {
position: relative;
width: 100%;
aspect-ratio: 2/3;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(22,12,48,.4));
box-shadow: 0 12px 28px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04);
transition: box-shadow var(--dur-base) var(--ease-out);
}
.ex-card-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}

.ex-card-title {
font-size: .9rem;
font-weight: 600;
color: #fff;
margin: 12px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
letter-spacing: -.005em;
transition: color var(--dur-fast) var(--ease-out);
}

/* ---- TOAST (used by quick actions) ---- */
.ex-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
padding: 10px 18px;
background: rgba(15,15,30,.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #fff;
font-size: .82rem;
border-radius: 999px;
border: 1px solid var(--border-color);
box-shadow: 0 8px 24px rgba(0,0,0,.45);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
z-index: 9999;
pointer-events: none;
}
.ex-toast--in { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) { .ex-toast { bottom: 80px; } }

/* ---- SKELETONS ---- */

.ex-skel {
background: rgba(255,255,255,.04);
border-radius: 10px;
overflow: hidden;
}
.ex-card.ex-skel { aspect-ratio: 2/3.8; }
.ex-card-lg.ex-skel { aspect-ratio: 2/3; }
.ex-skel-shimmer {
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,.05) 50%, transparent 100%);
animation: ex-shimmer 1.4s infinite;
}
@keyframes ex-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

/* ---- LOAD MORE ---- */

.ex-load-more-wrap {
text-align: center;
margin-top: 24px;
padding-bottom: 8px;
}
.ex-load-more {
padding: 12px 40px;
font-size: .85rem;
}

/* ---- LIGHT MODE ---- */

[data-theme="light"] body.explore-page { background: #f2f2f8; }
[data-theme="light"] body.explore-page .navbar { background: rgba(242,242,248,.9); }
[data-theme="light"] .ex-hero-gradient {
    background: linear-gradient(to top, #f2f2f8 0%, rgba(242,242,248,.3) 60%, rgba(242,242,248,.1) 100%);
}
[data-theme="light"] .ex-hero-title { color: var(--text-heading); }
[data-theme="light"] .ex-hero-desc { color: var(--text-muted); }
[data-theme="light"] .ex-hero-watch-btn { box-shadow: 0 4px 16px rgba(124,58,237,.2); }
[data-theme="light"] .ex-section-title { color: var(--text-heading); }
[data-theme="light"] .ex-card-lg-body h3,
[data-theme="light"] .ex-card-title { color: var(--text-heading); }
[data-theme="light"] .ex-card-img,
[data-theme="light"] .ex-card-lg-img,
[data-theme="light"] .ex-continue-img { background: #e8e8f0; }
[data-theme="light"] .ex-skel { background: #e8e8f0; }
[data-theme="light"] .ex-mood { background: #fff; border-color: #ddd; color: var(--text-muted); }
[data-theme="light"] .ex-sort { background: #fff; border-color: #ddd; }
[data-theme="light"] .ex-hero-tag { background: rgba(0,0,0,.06); color: var(--text-muted); }
[data-theme="light"] .ex-btn-outline { background: rgba(0,0,0,.04); border-color: #ddd; }

/* ---- RESPONSIVE — tablet and up ---- */

@media (min-width: 480px) {
.ex-grid { grid-template-columns: repeat(3, 1fr); }
.ex-card-lg { width: 150px; min-width: 150px; }
.ex-continue-card { width: 150px; min-width: 150px; }
}

@media (min-width: 640px) {
body.explore-page .navbar { height: 56px; padding: 0 24px; }
body.explore-page .navbar .logo { font-size: 1.35rem; }
body.explore-page .search-wrap { display: block; }
.ex { padding: 0 16px 60px; }
.ex-hero { height: 40vh; max-height: 340px; border-radius: 0 0 16px 16px; }
.ex-hero-content { padding: 0 28px 22px; max-width: 480px; }
.ex-hero-title { font-size: 1.55rem; -webkit-line-clamp: 2; }
.ex-hero-desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .78rem;
    color: var(--text-muted);
    margin: 5px 0 0;
}
.ex-hero-watch-btn { padding: 10px 22px; }
.ex-hero-thumb { width: 44px; height: 26px; border-radius: 5px; }
.ex-hero-gradient {
    background:
        linear-gradient(to right, rgba(6,6,18,.92) 0%, rgba(6,6,18,.45) 50%, transparent 100%),
        linear-gradient(to top, #060612 0%, transparent 35%);
}
.ex-section { margin-top: 56px; }
.ex-section-title { font-size: 1.6rem; }
.ex-section-sub { font-size: .86rem; }
.ex-grid { grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
.ex-card-lg { width: 170px; min-width: 170px; }
.ex-continue-card { width: 160px; min-width: 160px; }
.ex-scroll-row { gap: 18px; }
.ex-mood { padding: 8px 18px; font-size: .78rem; }
}

@media (min-width: 1024px) {
.ex { padding: 0 0 80px; }
.ex-hero { height: 42vh; max-height: 400px; }
.ex-hero-content { max-width: 520px; padding: 0 36px 28px; }
.ex-hero-title { font-size: 1.9rem; }
.ex-hero-desc { -webkit-line-clamp: 2; }
.ex-section { padding: 0; margin-top: 72px; }
.ex-section-title { font-size: 1.8rem; margin-bottom: 0; }
.ex-section-head { margin-bottom: 24px; }
.ex-grid { grid-template-columns: repeat(5, 1fr); gap: 36px 22px; }
.ex-card-lg { width: 192px; min-width: 192px; }
.ex-scroll-row { padding-right: 0; gap: 22px; }
}

/* ============================================
   HOMEPAGE — Signature Experience
   ============================================ */

body.sg-body {
background: #040410;
overflow-x: hidden;
}

/* Page-enter transition (from landing) */
body.sg-body.page-enter {
opacity: 0;
transform: scale(.98);
animation: sg-enter .4s ease-out forwards;
}
@keyframes sg-enter {
to { opacity: 1; transform: scale(1); }
}

/* ---- 1. IMMERSIVE HERO ---- */

.sg-hero {
position: relative;
height: 100vh;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Shared brand gradient — both the "Comics" wordmark and the masked
   logo silhouette read from this variable, so any future palette tweak
   updates them in lockstep. No hot pink — lavender → violet → indigo
   → sky-blue, all cool. */
--brand-gradient: linear-gradient(120deg, #d8b4fe 0%, #c084fc 32%, #818cf8 62%, #38bdf8 100%);
}
.sg-hero-bg {
position: absolute;
inset: -20px;
/* Brand image is the default; .sg-hero-overlay above provides the
   darkening wash so content stays readable. home.js can override
   background-image inline when an admin curates a hero pick. */
background-color: #0a0828;
background-image: url('images/cca-hero-bg.jpg');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
filter: brightness(0.55) saturate(1.15);
animation: sg-zoom 20s ease-in-out infinite alternate;
}
@keyframes sg-zoom {
0% { transform: scale(1); }
100% { transform: scale(1.08); }
}

/* Ambient floating orbs — represent the three pillars (anime / games / community)
   as soft drifting color blobs behind the overlay. */
.sg-hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: .42;
pointer-events: none;
mix-blend-mode: screen;
will-change: transform;
}
.sg-hero-orb-1 {
width: 480px; height: 480px;
top: -140px; left: -120px;
background: radial-gradient(circle, rgba(244,63,94,.95), transparent 70%);
animation: sg-orb-drift-1 22s ease-in-out infinite alternate;
}
.sg-hero-orb-2 {
width: 560px; height: 560px;
bottom: -180px; right: -120px;
background: radial-gradient(circle, rgba(124,58,237,.95), transparent 70%);
animation: sg-orb-drift-2 26s ease-in-out infinite alternate;
}
.sg-hero-orb-3 {
width: 420px; height: 420px;
top: 28%; right: 32%;
background: radial-gradient(circle, rgba(56,189,248,.85), transparent 70%);
animation: sg-orb-drift-3 30s ease-in-out infinite alternate;
opacity: .32;
}
@keyframes sg-orb-drift-1 {
0%   { transform: translate(0, 0) scale(1); }
100% { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes sg-orb-drift-2 {
0%   { transform: translate(0, 0) scale(1); }
100% { transform: translate(-100px, -60px) scale(1.1); }
}
@keyframes sg-orb-drift-3 {
0%   { transform: translate(0, 0) scale(1); }
100% { transform: translate(-50px, 80px) scale(.9); }
}

/* Subtle vector-grid: gives the hero a "digital alliance" feel without
   competing with the bg image. Fades out radially. */
.sg-hero-grid {
position: absolute; inset: 0;
background-image:
    linear-gradient(rgba(168,85,247,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.07) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
pointer-events: none;
}

.sg-hero-overlay {
position: absolute;
inset: 0;
background:
    radial-gradient(ellipse at center, rgba(4,4,16,.2) 0%, rgba(4,4,16,.85) 70%),
    linear-gradient(180deg, transparent 50%, #040410 100%);
}
.sg-hero-content {
position: relative;
z-index: 1;
text-align: center;
padding: 0 24px;
}
.sg-hero-title {
font-family: "Orbitron", "Inter", system-ui, -apple-system, sans-serif;
font-size: 2.6rem;
font-weight: 900;
color: #fff;
letter-spacing: .01em;
line-height: 1;
margin-bottom: 14px;
text-transform: uppercase;
text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.sg-hero-title span {
background: var(--brand-gradient);
background-size: 240% 240%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: sg-title-shimmer 12s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes sg-title-shimmer {
0%, 100% { background-position: 0% 50%; }
50%      { background-position: 100% 50%; }
}
.sg-hero-sub {
font-size: 1rem;
color: rgba(255,255,255,.62);
font-weight: 500;
letter-spacing: .04em;
margin-bottom: 24px;
}

/* Pillar chips — Watch / Play / Create. Glassy, lit by per-pillar tint. */
.sg-hero-pillars {
display: flex; flex-wrap: wrap;
gap: 8px; justify-content: center;
margin-bottom: 30px;
}
.sg-hero-pillar {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px 7px 11px;
border-radius: 999px;
font-size: .72rem; font-weight: 600;
letter-spacing: .06em;
color: rgba(255,255,255,.88);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
text-decoration: none;
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform .2s, border-color .2s, background .2s;
-webkit-tap-highlight-color: transparent;
}
.sg-hero-pillar:active { transform: scale(.96); }
@media (hover: hover) {
.sg-hero-pillar:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
}
}
.sg-hero-pillar svg { width: 14px; height: 14px; }
.sg-hero-pillar-watch  { color: #fda4af; border-color: rgba(244,63,94,.28);  background: rgba(244,63,94,.08); }
.sg-hero-pillar-play   { color: #c4b5fd; border-color: rgba(124,58,237,.32); background: rgba(124,58,237,.10); }
.sg-hero-pillar-create { color: #fcd34d; border-color: rgba(250,204,21,.28); background: rgba(250,204,21,.08); }

/* Staggered entrance — fades each piece up in sequence. The logo
   keeps its continuous shimmer animation; rest get just the rise. */
.sg-hero-title,
.sg-hero-sub,
.sg-hero-pillars,
.sg-hero-actions {
opacity: 0;
transform: translateY(18px);
animation: sg-hero-rise .9s cubic-bezier(.16,1,.3,1) forwards;
}
.sg-hero-content .hero-logo {
opacity: 0;
transform: translateY(18px);
animation:
    sg-hero-rise .9s cubic-bezier(.16,1,.3,1) .05s forwards,
    sg-title-shimmer 12s cubic-bezier(.4,0,.6,1) infinite;
}
.sg-hero-title              { animation-delay: .18s; }
.sg-hero-sub                { animation-delay: .30s; }
.sg-hero-pillars            { animation-delay: .42s; }
.sg-hero-actions            { animation-delay: .54s; }
@keyframes sg-hero-rise {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.sg-hero-content .hero-logo,
.sg-hero-title,
.sg-hero-sub,
.sg-hero-pillars,
.sg-hero-actions {
    animation: none; opacity: 1; transform: none;
}
.sg-hero-orb, .sg-hero-bg { animation: none; }
}

/* Hero buttons */
.sg-btn-glow {
display: inline-flex; align-items: center; justify-content: center;
padding: 14px 32px; border-radius: 14px;
background: var(--link-color); color: #fff;
font-size: .9rem; font-weight: 700;
text-decoration: none; border: none; cursor: pointer;
box-shadow: 0 0 30px rgba(124,58,237,.35), 0 0 80px rgba(124,58,237,.1);
transition: transform .15s, box-shadow .15s;
-webkit-tap-highlight-color: transparent;
}
.sg-btn-glow:active { transform: scale(.96); }
@media (hover: hover) { .sg-btn-glow:hover { box-shadow: 0 0 40px rgba(124,58,237,.5), 0 0 100px rgba(124,58,237,.15); transform: translateY(-2px); } }

.sg-btn-ghost {
display: inline-flex; align-items: center; justify-content: center;
padding: 13px 28px; border-radius: 14px;
background: rgba(255,255,255,.05); color: rgba(255,255,255,.7);
font-size: .88rem; font-weight: 600;
text-decoration: none; border: 1px solid rgba(255,255,255,.1);
cursor: pointer; transition: border-color .2s, color .2s;
-webkit-tap-highlight-color: transparent;
}
.sg-btn-ghost:hover { border-color: rgba(255,255,255,.25); color: #fff; }

.sg-hero-actions {
display: flex; flex-direction: column; gap: 12px; align-items: center;
}

/* Scroll hint */
.sg-scroll-hint {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
z-index: 2; color: rgba(255,255,255,.3);
animation: sg-bounce 2s ease-in-out infinite;
transition: opacity .3s;
}
@keyframes sg-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}

/* ---- SECTIONS ---- */

.sg-section {
max-width: 900px; margin: 0 auto;
padding: 0 20px; margin-top: 48px;
}
.sg-section-title {
font-size: .85rem; font-weight: 700;
color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: .1em;
margin: 0 0 16px;
}

/* ---- 2. STORY FLOW — staggered cards ---- */

.sg-flow { margin-top: 0; padding-top: 48px; }
.sg-flow-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

.sg-flow-card {
position: relative;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1);
-webkit-tap-highlight-color: transparent;
}
/* stagger odd cards down */
.sg-flow-card:nth-child(even) { margin-top: 32px; }

.sg-flow-hidden {
opacity: 0;
transform: translateY(40px);
}
.sg-flow-visible {
opacity: 1;
transform: translateY(0);
}

.sg-flow-img-wrap {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
background: rgba(255,255,255,.03);
}
.sg-flow-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .4s;
}
.sg-flow-card:hover .sg-flow-img-wrap img { transform: scale(1.06); }

.sg-flow-glow {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(124,58,237,.15) 100%);
opacity: 0;
transition: opacity .3s;
}
.sg-flow-card:hover .sg-flow-glow { opacity: 1; }

.sg-flow-title {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 40px 14px 14px;
background: linear-gradient(to top, rgba(4,4,16,.9), transparent);
font-size: .85rem;
font-weight: 600;
color: #fff;
}

.sg-flow-skel {
aspect-ratio: 3/4; border-radius: 16px;
background: rgba(255,255,255,.03); overflow: hidden;
}

/* ---- 3. CONTINUE YOUR WORLD ---- */

.sg-continue-row {
display: flex; gap: 14px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory; scrollbar-width: none;
padding-right: 40px;
}
.sg-continue-row::-webkit-scrollbar { display: none; }

.sg-continue-card {
flex-shrink: 0; width: 220px; min-width: 220px;
scroll-snap-align: start;
border-radius: 14px; overflow: hidden;
background: var(--bg-card); border: 1px solid var(--border-color);
text-decoration: none; color: inherit;
transition: transform .25s, box-shadow .25s;
-webkit-tap-highlight-color: transparent;
}
.sg-continue-card:active { transform: scale(.97); }
@media (hover: hover) { .sg-continue-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(124,58,237,.2); border-color: var(--link-color); } }

.sg-continue-cover {
position: relative; aspect-ratio: 16/10; overflow: hidden;
background: rgba(255,255,255,.03);
}
.sg-continue-cover img { width: 100%; height: 100%; object-fit: cover; }
.sg-continue-bar {
position: absolute; bottom: 0; left: 0; right: 0;
height: 4px; background: rgba(255,255,255,.06);
}
.sg-continue-fill { height: 100%; background: var(--link-color); border-radius: 0 2px 2px 0; }
.sg-continue-info { padding: 12px 14px; }
.sg-continue-info h3 { font-size: .85rem; font-weight: 600; color: #fff; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-continue-info span { font-size: .7rem; color: var(--text-faint); }

.sg-continue-skel {
flex-shrink: 0; width: 220px; min-width: 220px;
aspect-ratio: 16/12; border-radius: 14px;
background: rgba(255,255,255,.03); overflow: hidden;
}

/* ---- 4. MOOD SELECTOR ---- */

.sg-mood-section { margin-top: 40px; }
.sg-mood-bar {
display: flex; gap: 8px; justify-content: center;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; flex-wrap: nowrap;
}
.sg-mood-bar::-webkit-scrollbar { display: none; }
.sg-mood {
padding: 8px 22px; border-radius: 24px;
border: 1px solid rgba(255,255,255,.08);
background: transparent;
color: var(--text-muted); font-size: .78rem; font-weight: 600;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
transition: all .15s;
-webkit-tap-highlight-color: transparent;
}
.sg-mood:active { transform: scale(.95); }
.sg-mood.active {
background: var(--link-color); border-color: var(--link-color); color: #fff;
box-shadow: 0 0 16px rgba(124,58,237,.3);
}

/* ---- 5. CREATOR SPOTLIGHT ---- */

.sg-spotlight { margin-top: 48px; }
.sg-spotlight-card {
position: relative;
border-radius: 20px;
overflow: hidden;
min-height: 200px;
}
.sg-spot-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: blur(12px) brightness(0.25) saturate(1.3);
transform: scale(1.15);
}
.sg-spot-overlay {
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, rgba(4,4,16,.3), rgba(4,4,16,.85));
}
.sg-spot-content {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center;
padding: 36px 20px 28px;
text-align: center;
}
.sg-spot-label {
font-size: .65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .12em;
color: var(--link-color); margin-bottom: 12px;
}
.sg-spot-avatar {
width: 56px; height: 56px; border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 20px rgba(124,58,237,.3);
border: 2px solid rgba(124,58,237,.3);
}
.sg-spot-avatar-init {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #a855f7);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; font-weight: 700; color: #fff;
box-shadow: 0 0 20px rgba(124,58,237,.3);
}
.sg-spot-name {
font-size: 1.1rem; font-weight: 700; color: #fff;
margin: 10px 0 2px;
}
.sg-spot-count { font-size: .75rem; color: var(--text-faint); }
.sg-spot-btn { margin-top: 16px; padding: 10px 24px; font-size: .8rem; }

/* ---- 6. RECOMMENDED ---- */

.sg-scroll-row {
display: flex; gap: 12px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory; scrollbar-width: none;
padding-right: 40px;
}
.sg-scroll-row::-webkit-scrollbar { display: none; }

.sg-rec-card {
flex-shrink: 0; width: 140px; min-width: 140px;
scroll-snap-align: start;
border-radius: 12px; overflow: hidden;
background: var(--bg-card); border: 1px solid var(--border-color);
text-decoration: none; color: inherit;
transition: transform .2s, box-shadow .2s;
-webkit-tap-highlight-color: transparent;
}
.sg-rec-card:active { transform: scale(.97); }
@media (hover: hover) { .sg-rec-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(124,58,237,.18); border-color: var(--link-color); } }
.sg-rec-img {
width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
background: rgba(255,255,255,.03);
}
.sg-rec-text {
width: 100%; aspect-ratio: 3/4;
background: linear-gradient(145deg, #1a1040, #2a1a5e);
color: var(--text-faint); font-size: .68rem; padding: 12px;
display: flex; align-items: flex-end; overflow: hidden;
}
.sg-rec-body { padding: 8px 10px 10px; }
.sg-rec-body h3 {
font-size: .78rem; font-weight: 600; color: #fff;
margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-rec-body span { font-size: .62rem; color: var(--text-faint); }

.sg-rec-skel {
flex-shrink: 0; width: 140px; min-width: 140px;
aspect-ratio: 3/5; border-radius: 12px;
background: rgba(255,255,255,.03); overflow: hidden;
}

/* ---- GUILDS ---- */

.sg-guild-grid {
display: flex;
flex-direction: column;
gap: 10px;
}

.sg-guild-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.05);
text-decoration: none;
color: inherit;
transition: background .15s, border-color .15s, transform .2s;
-webkit-tap-highlight-color: transparent;
}
.sg-guild-card:active { transform: scale(.98); }
@media (hover: hover) {
.sg-guild-card:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
}

.sg-guild-icon {
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}

.sg-guild-artisan  .sg-guild-icon { background: rgba(239,68,68,.1); color: #ef4444; }
.sg-guild-writer   .sg-guild-icon { background: rgba(59,130,246,.1); color: #3b82f6; }
.sg-guild-editor   .sg-guild-icon { background: rgba(34,197,94,.1); color: #22c55e; }
.sg-guild-mangakas .sg-guild-icon { background: rgba(236,72,153,.1); color: #ec4899; }

.sg-guild-info { flex: 1; min-width: 0; }
.sg-guild-info strong {
display: block;
font-size: .92rem;
font-weight: 700;
color: #fff;
}
.sg-guild-info span {
font-size: .75rem;
color: var(--text-faint);
}

.sg-guild-arrow {
color: var(--text-faint);
flex-shrink: 0;
transition: transform .15s;
}
.sg-guild-card:hover .sg-guild-arrow { transform: translateX(3px); }

/* light mode */
[data-theme="light"] .sg-guild-card { background: #fff; border-color: rgba(0,0,0,.04); box-shadow: 0 1px 4px rgba(80,60,120,.05); }
[data-theme="light"] .sg-guild-card:hover { box-shadow: 0 2px 8px rgba(80,60,120,.08); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .sg-guild-info strong { color: var(--text-heading); }

/* desktop — horizontal row */
@media (min-width: 640px) {
.sg-guild-grid { flex-direction: row; gap: 12px; }
.sg-guild-card { flex: 1; }
}

/* ---- 7. FINAL CTA ---- */

.sg-cta {
text-align: center;
padding: 60px 24px 80px;
margin-top: 48px;
background: radial-gradient(ellipse at center bottom, rgba(124,58,237,.08) 0%, transparent 60%);
}
.sg-cta-title {
font-size: 1.6rem; font-weight: 800; color: #fff;
margin-bottom: 20px; letter-spacing: -.02em;
}

/* ---- EMPTY ---- */
.sg-empty { font-size: .84rem; color: var(--text-faint); padding: 16px 0; text-align: center; }

/* ---- SKELETONS ---- */
.sg-skel-shimmer {
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,.04) 50%, transparent 100%);
animation: sg-shimmer 1.4s infinite;
}
@keyframes sg-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---- BOTTOM NAV ---- */

body.sg-body,
body.explore-page,
body.pf-body,
body.ws-body,
body.wr-body { padding-bottom: 64px; }

/* Hide bottom nav on full-screen layouts:
   - messages: bottom nav stays visible on the inbox list, hides only
     when a specific chat is open (body gets .msg-chat-open from messages.js).
   - post viewer (fv-body). */
body.msg-page.msg-chat-open .sg-bottom-nav,
body.fv-body .sg-bottom-nav { display: none !important; }

/* Room under the inbox list for the fixed bottom nav. */
body.msg-page:not(.msg-chat-open) #msgSidebar { padding-bottom: 56px; }

.sg-bottom-nav {
    display: flex; position: fixed;
    bottom: 0; left: 0; right: 0; z-index: 1000;
    height: 56px;
    background: rgba(10,10,24,.92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,.06);
    justify-content: space-around; align-items: center;
    padding: 0 4px; padding-bottom: env(safe-area-inset-bottom);
}
.sg-bnav {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: rgba(255,255,255,.3);
    font-size: .56rem; font-weight: 600;
    flex: 1; padding: 8px 0;
    -webkit-tap-highlight-color: transparent;
}
.sg-bnav svg { width: 22px; height: 22px; }
.sg-bnav.active { color: var(--link-color); }
.sg-bnav-create svg {
    width: 28px; height: 28px;
    background: var(--link-color); border-radius: 50%;
    padding: 4px; stroke: #fff;
    box-shadow: 0 0 12px rgba(124,58,237,.4);
}

/* Bottom-nav unread badge — pinned to the top-right of the icon. */
.sg-bnav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.sg-bnav-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-page, #0a0a12), 0 2px 6px rgba(239,68,68,.5);
    animation: sg-bnav-badge-pop .28s ease-out;
    pointer-events: none;
    line-height: 1;
}
@keyframes sg-bnav-badge-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
.sg-bnav.active .sg-bnav-badge {
    box-shadow: 0 0 0 2px var(--bg-page, #0a0a12), 0 0 10px rgba(239,68,68,.6);
}

/* Mobile-only chrome: footer hides under the nav, navbar goes transparent. */
@media (max-width: 768px) {
body.sg-body .footer,
body.explore-page .footer,
body.pf-body .footer,
body.ws-body .footer,
body.wr-body .footer { display: none; }

body.sg-body .navbar { background: transparent; border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Desktop: cap width and center so 8 items don't stretch across the screen. */
@media (min-width: 769px) {
.sg-bottom-nav {
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(680px, 96vw);
    border-radius: 14px 14px 0 0;
    border: 1px solid rgba(255,255,255,.06);
    border-bottom: none;
}
.sg-bnav { font-size: .6rem; }
}

/* ---- RESPONSIVE ---- */

@media (min-width: 640px) {
.sg-hero-title { font-size: 4rem; letter-spacing: .015em; }
.sg-hero-sub { font-size: 1.15rem; letter-spacing: .06em; margin-bottom: 26px; }
.sg-hero-pillar { padding: 8px 16px 8px 13px; font-size: .78rem; gap: 7px; }
.sg-hero-pillar svg { width: 15px; height: 15px; }
.sg-hero-pillars { gap: 10px; margin-bottom: 36px; }
.sg-hero-orb-1 { width: 600px; height: 600px; }
.sg-hero-orb-2 { width: 700px; height: 700px; }
.sg-hero-orb-3 { width: 520px; height: 520px; }
.sg-hero-actions { flex-direction: row; gap: 14px; }
.sg-flow-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sg-section { margin-top: 56px; padding: 0 32px; }
.sg-continue-card { width: 260px; min-width: 260px; }
.sg-continue-skel { width: 260px; min-width: 260px; }
.sg-rec-card { width: 155px; min-width: 155px; }
.sg-rec-skel { width: 155px; min-width: 155px; }
.sg-cta-title { font-size: 2rem; }
}

@media (min-width: 1024px) {
.sg-hero-title { font-size: 5rem; }
.sg-hero-sub { font-size: 1.25rem; }
.sg-flow-grid { gap: 24px; }
.sg-section { padding: 0; }
.sg-continue-card { width: 300px; min-width: 300px; }
.sg-continue-skel { width: 300px; min-width: 300px; }
.sg-rec-card { width: 170px; min-width: 170px; }
.sg-scroll-row { padding-right: 0; }
.sg-continue-row { padding-right: 0; }
.sg-cta-title { font-size: 2.4rem; }
}

/* ---- LIGHT MODE ---- */

/* The hero overlay + title/sub rules live in the dedicated LIGHT HERO
   block further down (~line 9150). The stale entries that used to sit
   here produced the "washed-out" look and have been removed. */
[data-theme="light"] .sg-flow-title { color: #fff; }
[data-theme="light"] .sg-section-title { color: var(--text-muted); }
[data-theme="light"] .sg-continue-info h3 { color: var(--text-heading); }
[data-theme="light"] .sg-rec-body h3 { color: var(--text-heading); }
[data-theme="light"] .sg-spot-name { color: #fff; }
[data-theme="light"] .sg-cta-title { color: var(--text-heading); }
[data-theme="light"] .sg-cta { background: radial-gradient(ellipse at center bottom, rgba(124,58,237,.05), transparent); }
[data-theme="light"] .sg-bottom-nav { background: rgba(255,255,255,.92); border-color: var(--border-color); }
[data-theme="light"] .sg-bnav { color: var(--text-faint); }
[data-theme="light"] .sg-rec-text { background: linear-gradient(145deg, #e8e0f8, #d8d0f0); color: var(--text-muted); }

/* Light-mode hero treatment for the new pieces — orbs read as harsh blobs
   on a pale page, so soften them; grid backs off too. */
[data-theme="light"] .sg-hero-orb { opacity: .22; mix-blend-mode: multiply; filter: blur(110px); }
[data-theme="light"] .sg-hero-grid {
background-image:
    linear-gradient(rgba(124,58,237,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.05) 1px, transparent 1px);
}
[data-theme="light"] .sg-hero-pillar { color: var(--text-secondary); background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .sg-hero-pillar-watch  { color: #be185d; background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.18); }
[data-theme="light"] .sg-hero-pillar-play   { color: #6d28d9; background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.18); }
[data-theme="light"] .sg-hero-pillar-create { color: #a16207; background: rgba(250,204,21,.12); border-color: rgba(250,204,21,.22); }

/* ============================================
   FEATURE BAND ROTATOR — auto-cycling carousel
   container holding all 6 bands. Each band is
   absolutely positioned and fades in/out via
   the .is-active flag set by JS. Dots below
   let the user jump directly.
   ============================================ */

.cca-band-rotator {
position: relative;
width: 100%;
overflow: hidden;
min-height: 124px;
margin-bottom: 8px;
}

/* Bands ride a horizontal track. The track is rotator-width but its
   children all claim 100% width so they overflow and queue offscreen
   to the right; the rotator's overflow:hidden hides anything that
   isn't currently centered. JS translates the track to slide. */
.cca-band-track {
display: flex;
width: 100%;
height: 100%;
flex-wrap: nowrap;
transition: transform .85s cubic-bezier(.65, .03, .25, 1);
will-change: transform;
}
.cca-band-track > .cca-band {
position: relative;
flex: 0 0 100%;
min-width: 100%;
margin: 0;
}

/* Dot pager — sits below the active band, centered. */
.cca-band-dots {
position: absolute;
left: 0; right: 0;
bottom: 6px;
display: flex; justify-content: center; gap: 7px;
z-index: 5;
pointer-events: auto;
}
.cca-band-dot {
width: 7px; height: 7px;
border-radius: 50%;
border: 0;
padding: 0;
background: rgba(255,255,255,.28);
cursor: pointer;
transition: background .25s, width .25s, transform .15s;
-webkit-tap-highlight-color: transparent;
}
.cca-band-dot:hover { background: rgba(255,255,255,.55); }
.cca-band-dot.is-active {
background: #fff;
width: 22px;
border-radius: 4px;
}

@media (min-width: 768px) {
.cca-band-rotator { min-height: 138px; }
.cca-band-dots    { bottom: 8px; gap: 8px; }
}

/* ============================================
   FEATURE BANDS — color-coded in-app ad bands.
   Edge-to-edge spotlight strips, one per major
   destination on CCA. All share the .cca-band
   base; each modifier theme overrides palette
   via CSS vars and lays its own motif on top
   via the .cca-band-fx layer. Whole set lives
   in a cool palette: violet→blue→cyan→teal
   →emerald, no warm reds/oranges.
   ============================================ */

.cca-band {
position: relative;
width: 100%;
margin: 0 0 8px;
padding: 18px 20px 22px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
/* Defaults — every theme overrides these. */
--band-c1: #06b6d4;
--band-c2: #22d3ee;
--band-c3: #67e8f9;
--band-eyebrow: #67e8f9;
--band-eyebrow-bg: rgba(34,211,238,.14);
--band-eyebrow-border: rgba(34,211,238,.4);
--band-eyebrow-dot: #22d3ee;
}

/* Floating ambient glows — one anchored, one slowly drifting. Same
   technique the guild heroes use (.ws-hero-glow-b animated with
   wsFloat) so the bands read alive instead of decorated. Glow colors
   are set per-theme via --band-glow-a / --band-glow-b. */
.cca-band-bg {
position: absolute; inset: -30px; z-index: 0;
overflow: hidden;
pointer-events: none;
}
.cca-band-bg::before,
.cca-band-bg::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(95px);
pointer-events: none;
}
.cca-band-bg::before {
width: 480px; height: 480px;
top: -200px; left: -140px;
opacity: .58;
background: radial-gradient(circle, var(--band-glow-a, rgba(139,92,246,.7)), transparent 70%);
}
.cca-band-bg::after {
width: 540px; height: 540px;
bottom: -220px; right: -140px;
opacity: .5;
background: radial-gradient(circle, var(--band-glow-b, rgba(99,102,241,.55)), transparent 70%);
animation: cb-glow-drift 16s ease-in-out infinite alternate;
}
@keyframes cb-glow-drift {
0%   { transform: translate(0, 0) scale(1); }
100% { transform: translate(-44px, 22px) scale(1.12); }
}

/* Soft bottom fade — adds depth at the cut, mirrors .ws-hero::after */
.cca-band::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 60px;
background: linear-gradient(180deg, transparent, rgba(2,2,8,.45));
pointer-events: none;
z-index: 0;
}

/* Per-band motif container — themes use ::before/::after + background here. */
.cca-band-fx {
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
}

.cca-band-content {
position: relative; z-index: 2;
width: 100%; max-width: 1100px;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

.cca-band-text { min-width: 0; flex: 1; }

.cca-band-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
padding: 3px 10px 3px 9px;
border-radius: 999px;
background: var(--band-eyebrow-bg);
border: 1px solid var(--band-eyebrow-border);
color: var(--band-eyebrow);
font-size: .6rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
margin-bottom: 5px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.cca-band-eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--band-eyebrow-dot);
box-shadow: 0 0 8px var(--band-eyebrow-dot), 0 0 16px var(--band-eyebrow-dot);
animation: cb-live-pulse 1.4s ease-in-out infinite;
}
@keyframes cb-live-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50%      { opacity: .35; transform: scale(.85); }
}

.cca-band-title {
font-family: "Orbitron", "Inter", system-ui, sans-serif;
font-size: clamp(1.15rem, 4vw, 1.7rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1;
margin: 0 0 4px;
color: #fff;
text-shadow: 0 0 14px rgba(0,0,0,.4), 0 1px 12px rgba(0,0,0,.5);
}
.cca-band-title span {
background: linear-gradient(90deg, var(--band-c3) 0%, var(--band-c1) 50%, var(--band-c2) 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: cb-title-shimmer 6s ease-in-out infinite;
}
@keyframes cb-title-shimmer {
0%, 100% { background-position: 0% 50%; }
50%      { background-position: 100% 50%; }
}

.cca-band-sub {
font-size: .78rem;
color: rgba(255,255,255,.72);
font-weight: 500;
letter-spacing: .02em;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cca-band-cta {
display: inline-flex;
align-items: center; gap: 6px;
flex-shrink: 0;
padding: 9px 16px;
border-radius: 10px;
background: linear-gradient(135deg, var(--band-c1) 0%, var(--band-c2) 100%);
color: #fff;
font-family: "Orbitron", "Inter", system-ui, sans-serif;
font-weight: 800;
font-size: .75rem;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid rgba(255,255,255,.15);
box-shadow:
    0 0 18px var(--band-c1),
    0 3px 12px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
transition: transform .15s, box-shadow .25s, filter .15s;
}
.cca-band-cta svg { width: 14px; height: 14px; }
.cca-band-cta:active { transform: scale(.97); }
@media (hover: hover) {
.cca-band-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.10);
    box-shadow:
        0 0 32px var(--band-c1),
        0 8px 22px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.25);
}
.cca-band-cta:hover svg { transform: translateX(3px); transition: transform .2s; }
}

@media (min-width: 768px) {
.cca-band         { padding: 22px 32px 26px; }
.cca-band-content { gap: 24px; }
.cca-band-title   { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.cca-band-sub     { font-size: .88rem; }
.cca-band-eyebrow { font-size: .64rem; padding: 4px 12px 4px 10px; }
.cca-band-cta     { padding: 11px 22px; font-size: .8rem; gap: 8px; }
.cca-band-cta svg { width: 16px; height: 16px; }
}

@media (max-width: 520px) {
.cca-band-sub     { white-space: normal; font-size: .72rem; line-height: 1.3; }
.cca-band-content { gap: 10px; }
.cca-band-cta     { padding: 8px 12px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
.cca-band-fx, .cca-band-fx::before, .cca-band-fx::after,
.cca-band-title span, .cca-band-eyebrow::before { animation: none !important; }
}

/* Slow ambient glide — diagonal streak (Battles) bakes its rotation
   into the keyframe so it isn't clobbered by the unified transform. */
@keyframes cb-streak-glide {
0%   { transform: translateX(-3%) rotate(-7deg); opacity: .55; }
100% { transform: translateX(4%)  rotate(-5deg); opacity: 1; }
}
/* Horizontal shimmer (Anime) — translate only, no rotation. */
@keyframes cb-shimmer-glide {
0%   { transform: translateX(-3%); opacity: .55; }
100% { transform: translateX(4%);  opacity: 1; }
}

/* ===== BATTLES — Storm Violet ===== */
.cca-band-battles {
--band-c1: #8b5cf6;
--band-c2: #6366f1;
--band-c3: #c4b5fd;
--band-eyebrow: #c4b5fd;
--band-eyebrow-bg: rgba(139,92,246,.14);
--band-eyebrow-border: rgba(139,92,246,.4);
--band-eyebrow-dot: #a78bfa;
--band-glow-a: rgba(167,139,250,.78);
--band-glow-b: rgba(99,102,241,.6);
background:
    radial-gradient(1200px 600px at 8% 20%, rgba(139,92,246,.42), transparent 60%),
    radial-gradient(900px 500px at 96% 90%, rgba(67,56,202,.36), transparent 65%),
    linear-gradient(135deg, #160a36 0%, #1e1b4b 45%, #07051c 100%);
}
/* Single soft violet streak — diagonal but heavily blurred so it
   reads like a light bloom rather than a drawn slash. */
.cca-band-battles .cca-band-fx::before {
content: "";
position: absolute;
left: -10%; width: 130%;
top: 38%; height: 22px;
background: linear-gradient(90deg, transparent 0%, rgba(167,139,250,0) 12%, rgba(167,139,250,.55) 50%, rgba(167,139,250,0) 88%, transparent 100%);
filter: blur(14px);
mix-blend-mode: screen;
animation: cb-streak-glide 11s ease-in-out infinite alternate;
}

/* ===== ANIME — Deep Ocean ===== */
.cca-band-anime {
--band-c1: #0ea5e9;
--band-c2: #06b6d4;
--band-c3: #7dd3fc;
--band-eyebrow: #7dd3fc;
--band-eyebrow-bg: rgba(14,165,233,.14);
--band-eyebrow-border: rgba(14,165,233,.4);
--band-eyebrow-dot: #38bdf8;
--band-glow-a: rgba(56,189,248,.7);
--band-glow-b: rgba(6,182,212,.55);
background:
    radial-gradient(1200px 600px at 8% 20%, rgba(14,165,233,.40), transparent 60%),
    radial-gradient(900px 500px at 96% 90%, rgba(8,145,178,.34), transparent 65%),
    linear-gradient(135deg, #062c40 0%, #0c4a6e 45%, #02182a 100%);
}
/* Single horizontal shimmer line that drifts slowly — reads like
   sunlight catching a wave, not a stripe pattern. */
.cca-band-anime .cca-band-fx::before {
content: "";
position: absolute;
left: 0; right: 0;
top: 50%;
height: 1.4px;
background: linear-gradient(90deg, transparent 5%, rgba(125,211,252,.4) 30%, rgba(186,230,253,.85) 50%, rgba(125,211,252,.4) 70%, transparent 95%);
filter: blur(.6px);
box-shadow: 0 0 14px rgba(56,189,248,.5);
mix-blend-mode: screen;
animation: cb-shimmer-glide 13s ease-in-out infinite alternate;
}

/* ===== MOVIES — Midnight Theatre ===== */
.cca-band-movies {
--band-c1: #6366f1;
--band-c2: #818cf8;
--band-c3: #c4b5fd;
--band-eyebrow: #c4b5fd;
--band-eyebrow-bg: rgba(99,102,241,.14);
--band-eyebrow-border: rgba(99,102,241,.4);
--band-eyebrow-dot: #818cf8;
--band-glow-a: rgba(129,140,248,.7);
--band-glow-b: rgba(167,139,250,.55);
background:
    radial-gradient(1200px 600px at 8% 20%, rgba(99,102,241,.40), transparent 60%),
    radial-gradient(900px 500px at 96% 90%, rgba(91,33,182,.36), transparent 65%),
    linear-gradient(135deg, #0e0d2e 0%, #1e1b4b 45%, #060418 100%);
}
/* Soft diagonal projector cone — wider, more diffuse, slow oscillate
   so it reads like a lit room rather than a hard beam. */
.cca-band-movies .cca-band-fx::before {
content: "";
position: absolute;
top: -80%; left: -15%;
width: 70%; height: 260%;
background: linear-gradient(105deg, rgba(196,181,253,.22) 0%, rgba(196,181,253,.05) 55%, transparent 100%);
filter: blur(40px);
transform: rotate(18deg);
mix-blend-mode: screen;
animation: movie-spotlight 12s ease-in-out infinite alternate;
}
@keyframes movie-spotlight {
0%   { opacity: .55; transform: rotate(18deg) translateX(-10px); }
100% { opacity: 1;   transform: rotate(20deg) translateX(20px); }
}

/* ===== SOULFRAME — Cyber Cyan ===== */
.cca-band-soulframe {
--band-c1: #06b6d4;
--band-c2: #0ea5e9;
--band-c3: #67e8f9;
--band-eyebrow: #7dd3fc;
--band-eyebrow-bg: rgba(14,165,233,.14);
--band-eyebrow-border: rgba(14,165,233,.4);
--band-eyebrow-dot: #38bdf8;
--band-glow-a: rgba(34,211,238,.72);
--band-glow-b: rgba(14,165,233,.55);
background:
    radial-gradient(1200px 600px at 8% 20%, rgba(6,182,212,.42), transparent 60%),
    radial-gradient(900px 500px at 96% 90%, rgba(14,116,144,.36), transparent 65%),
    linear-gradient(135deg, #042c3a 0%, #0c3f55 45%, #021420 100%);
}
/* One pulsing trace line, no hex grid — just a single circuit-trace
   sliding gently across the band. */
.cca-band-soulframe .cca-band-fx::before {
content: "";
position: absolute;
top: 50%; left: 0; right: 0;
height: 1.4px;
background: linear-gradient(90deg, transparent 8%, rgba(34,211,238,.25) 30%, #67e8f9 50%, rgba(34,211,238,.25) 70%, transparent 92%);
box-shadow: 0 0 16px rgba(34,211,238,.6);
filter: blur(.4px);
mix-blend-mode: screen;
animation: sf-trace 9s ease-in-out infinite alternate;
}
@keyframes sf-trace {
0%   { opacity: .5; transform: translateX(-8%); }
100% { opacity: 1; transform: translateX(8%); }
}

/* ===== WATCH PARTIES — Rose Glow ===== */
.cca-band-party {
--band-c1: #ec4899;
--band-c2: #d946ef;
--band-c3: #f9a8d4;
--band-eyebrow: #f9a8d4;
--band-eyebrow-bg: rgba(236,72,153,.14);
--band-eyebrow-border: rgba(236,72,153,.4);
--band-eyebrow-dot: #f472b6;
--band-glow-a: rgba(244,114,182,.72);
--band-glow-b: rgba(217,70,239,.55);
background:
    radial-gradient(1200px 600px at 8% 20%, rgba(236,72,153,.42), transparent 60%),
    radial-gradient(900px 500px at 96% 90%, rgba(157,23,77,.4), transparent 65%),
    linear-gradient(135deg, #2c0d2e 0%, #4a0d4a 45%, #170515 100%);
}
/* Two big slow drifting pink bubbles — softer, larger, longer cycle
   so the motion reads as ambient float rather than restless. */
.cca-band-party .cca-band-fx::before,
.cca-band-party .cca-band-fx::after {
content: "";
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(249,168,212,.5) 0%, rgba(236,72,153,.12) 55%, transparent 100%);
filter: blur(6px);
mix-blend-mode: screen;
}
.cca-band-party .cca-band-fx::before {
top: 12%; left: 12%;
width: 110px; height: 110px;
animation: party-bubble 14s ease-in-out infinite alternate;
}
.cca-band-party .cca-band-fx::after {
top: 48%; right: 14%;
width: 150px; height: 150px;
animation: party-bubble 18s ease-in-out 2.5s infinite alternate;
}
@keyframes party-bubble {
0%   { transform: translateY(14px) translateX(0); opacity: .55; }
100% { transform: translateY(-22px) translateX(10px); opacity: 1; }
}

/* ===== SHOP — Sapphire Vault ===== */
.cca-band-shop {
--band-c1: #3b82f6;
--band-c2: #6366f1;
--band-c3: #c7d2fe;
--band-eyebrow: #c7d2fe;
--band-eyebrow-bg: rgba(59,130,246,.14);
--band-eyebrow-border: rgba(59,130,246,.4);
--band-eyebrow-dot: #818cf8;
--band-glow-a: rgba(96,165,250,.7);
--band-glow-b: rgba(129,140,248,.55);
background:
    radial-gradient(1200px 600px at 8% 20%, rgba(59,130,246,.42), transparent 60%),
    radial-gradient(900px 500px at 96% 90%, rgba(67,56,202,.36), transparent 65%),
    linear-gradient(135deg, #0d184a 0%, #1e3a8a 45%, #050d2c 100%);
}
/* Two slow-twinkling diamond sparkles — bigger glow, slower turn,
   more delay between flashes so they feel like passing light catches. */
.cca-band-shop .cca-band-fx::before,
.cca-band-shop .cca-band-fx::after {
content: "";
position: absolute;
background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
filter: drop-shadow(0 0 14px rgba(199,210,254,.95));
animation: shop-twinkle 6s ease-in-out infinite;
}
.cca-band-shop .cca-band-fx::before {
top: 22%; left: 14%;
width: 18px; height: 18px;
animation-delay: 0s;
}
.cca-band-shop .cca-band-fx::after {
top: 60%; right: 18%;
width: 12px; height: 12px;
animation-delay: 3s;
}
@keyframes shop-twinkle {
0%, 100% { opacity: .2; transform: scale(.7) rotate(0deg); }
50%      { opacity: 1;  transform: scale(1.15) rotate(180deg); }
}

/* Light mode — bands stay dark/cinematic in either theme. */
[data-theme="light"] .cca-band { box-shadow: 0 0 0 1px rgba(0,0,0,.04); }


/* ---- HUB TILES — discovery grid for the major destinations ---- */

.sg-hub-section { margin-top: 28px; }

.sg-hub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.sg-hub-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 138px;
padding: 16px 16px 14px;
border-radius: 18px;
text-decoration: none;
color: inherit;
overflow: hidden;
isolation: isolate;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
transition: transform .2s, border-color .2s, box-shadow .25s;
-webkit-tap-highlight-color: transparent;
}
.sg-hub-tile::before {
content: "";
position: absolute; inset: 0;
background: var(--hub-tint, radial-gradient(circle at 110% -10%, rgba(124,58,237,.22), transparent 60%));
z-index: -1;
transition: opacity .25s, filter .25s;
}
.sg-hub-tile:active { transform: scale(.97); }
@media (hover: hover) {
.sg-hub-tile:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.14); }
.sg-hub-tile:hover::before { filter: brightness(1.25) saturate(1.1); }
}

.sg-hub-icon {
width: 40px; height: 40px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--hub-color, #7c3aed) 18%, transparent);
color: var(--hub-color, #fff);
flex-shrink: 0;
}
.sg-hub-icon svg { width: 22px; height: 22px; }

.sg-hub-body { margin-top: auto; }
.sg-hub-title {
font-size: 1rem; font-weight: 700; color: #fff;
letter-spacing: -.01em;
margin: 0;
}
.sg-hub-sub {
display: block; margin-top: 3px;
font-size: .72rem; line-height: 1.35;
color: rgba(255,255,255,.55);
font-weight: 500;
}

.sg-hub-arrow {
position: absolute; top: 14px; right: 14px;
color: rgba(255,255,255,.3);
transition: transform .15s, color .15s;
}
@media (hover: hover) {
.sg-hub-tile:hover .sg-hub-arrow { transform: translate(2px, -2px); color: #fff; }
}

/* Per-tile color identity */
.sg-hub-anime   { --hub-color: #f43f5e; --hub-tint: radial-gradient(circle at 110% -10%, rgba(244,63,94,.30), transparent 60%); }
.sg-hub-movies  { --hub-color: #38bdf8; --hub-tint: radial-gradient(circle at 110% -10%, rgba(56,189,248,.28), transparent 60%); }
.sg-hub-soul    { --hub-color: #a855f7; --hub-tint: radial-gradient(circle at 110% -10%, rgba(168,85,247,.34), transparent 55%); }
.sg-hub-battles { --hub-color: #fb923c; --hub-tint: radial-gradient(circle at 110% -10%, rgba(251,146,60,.30), transparent 60%); }
.sg-hub-party   { --hub-color: #2dd4bf; --hub-tint: radial-gradient(circle at 110% -10%, rgba(45,212,191,.28), transparent 60%); }
.sg-hub-shop    { --hub-color: #facc15; --hub-tint: radial-gradient(circle at 110% -10%, rgba(250,204,21,.28), transparent 60%); }

/* SoulFrame is the flagship — give it a thin glow */
.sg-hub-soul {
border-color: rgba(168,85,247,.25);
box-shadow: 0 0 24px rgba(124,58,237,.10);
}
@media (hover: hover) {
.sg-hub-soul:hover { box-shadow: 0 0 36px rgba(124,58,237,.22); }
}

@media (min-width: 640px) {
.sg-hub-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sg-hub-tile { min-height: 152px; padding: 18px 18px 16px; }
.sg-hub-title { font-size: 1.05rem; }
}

/* Light mode */
[data-theme="light"] .sg-hub-tile {
background: #fff;
border-color: rgba(0,0,0,.05);
box-shadow: 0 1px 4px rgba(80,60,120,.06);
}
[data-theme="light"] .sg-hub-tile:hover { box-shadow: 0 4px 16px rgba(80,60,120,.10); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .sg-hub-title { color: var(--text-heading); }
[data-theme="light"] .sg-hub-sub { color: var(--text-muted); }
[data-theme="light"] .sg-hub-arrow { color: var(--text-faint); }
[data-theme="light"] .sg-hub-icon { background: color-mix(in srgb, var(--hub-color) 14%, #fff); }

/* ============================================
   PROFILE PAGE — TikTok-inspired
   ============================================ */

body.pf-body { background: var(--bg-page); }

.pf {
max-width: 600px;
margin: 0 auto;
padding: 0 0 48px;
}

/* ---- HEADER ---- */

.pf-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 20px 0;
}

.pf-avatar {
width: 88px; height: 88px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--border-color);
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-avatar-init {
width: 88px; height: 88px;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #a855f7);
display: flex; align-items: center; justify-content: center;
font-size: 2.2rem; font-weight: 700; color: #fff;
border: 2px solid var(--border-color);
}

.pf-name {
font-size: 1.25rem; font-weight: 800; color: #fff;
margin: 12px 0 0; line-height: 1.2;
}
.pf-handle {
font-size: .85rem; font-weight: 500;
color: rgba(232,228,245,.58);
margin: 2px 0 0; letter-spacing: .01em;
}
.pf-id {
font-size: .68rem; color: var(--text-faint);
margin-top: 2px;
}

/* Stats — plain text, no boxes */
.pf-stats {
display: flex; gap: 24px;
margin-top: 16px;
}
.pf-stat {
font-size: .82rem; color: var(--text-secondary);
}
.pf-stat strong {
font-size: 1rem; font-weight: 800; color: #fff;
display: block; line-height: 1.1;
}

/* Roles — subtle, low priority */
.pf-roles {
display: flex; gap: 8px;
margin-top: 12px;
}
.pf-role {
font-size: .65rem; font-weight: 500;
color: var(--text-faint);
}
.pf-role + .pf-role::before {
content: "\00b7";
margin-right: 8px;
}

/* "In a party" pill — shown beneath guild roles when a user belongs to an
   adventurer party. Clickable, routes to /party.php. Shows the party avatar
   (or the party sigil as fallback), name, and role (leader/member). */
.pf-party-pill {
margin-top: 10px;
display: flex;
justify-content: center;
}
.pf-party-pill a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 6px;
background: rgba(124, 58, 237, 0.12);
border: 1px solid rgba(192, 132, 252, 0.35);
border-radius: 999px;
color: #e9d5ff;
text-decoration: none;
font-size: .78rem;
line-height: 1;
transition: background .15s, border-color .15s;
}
.pf-party-pill a:hover {
background: rgba(124, 58, 237, 0.2);
border-color: rgba(192, 132, 252, 0.6);
}
.pf-party-pill-av {
width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
background: rgba(255,255,255,.05);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.pf-party-pill-av-init { color: #d6bcff; border: 1px solid rgba(192,132,252,.4); }
.pf-party-pill-lbl {
font-weight: 600;
letter-spacing: .04em;
color: #c7a8ff;
}
.pf-party-pill-name { font-weight: 700; color: #fff; }
.pf-party-pill-role {
font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
color: #a88fe0;
padding-left: 6px; border-left: 1px solid rgba(192,132,252,.25);
}

/* Action buttons — simple */
.pf-actions {
display: flex; gap: 8px;
margin-top: 16px;
width: 100%;
max-width: 300px;
}
.pf-btn-primary {
flex: 1;
padding: 9px 0; border-radius: 8px;
background: var(--link-color); color: #fff;
font-size: .82rem; font-weight: 700;
border: none; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: opacity .15s;
}
.pf-btn-primary:active { opacity: .8; }
.pf-btn-primary.pf-following {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.pf-btn-primary.pf-following:hover { border-color: #ef4444; color: #ef4444; }
.pf-btn-secondary {
flex: 1;
padding: 9px 0; border-radius: 8px;
background: transparent; color: var(--text-secondary);
font-size: .82rem; font-weight: 600;
border: 1px solid var(--border-color);
text-decoration: none; text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s;
}
.pf-btn-secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }

/* ---- TABS — thin underline style ---- */

.pf-tabs {
display: flex;
border-bottom: 1px solid var(--border-color);
margin-top: 24px;
}
.pf-tab {
flex: 1;
padding: 12px 0;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-faint);
font-size: .82rem; font-weight: 500;
cursor: pointer;
transition: color .15s, border-color .15s;
-webkit-tap-highlight-color: transparent;
}
.pf-tab.active {
color: #fff;
border-bottom-color: #fff;
font-weight: 700;
}

/* ---- CONTENT GRID — image only, TikTok style ---- */

.pf-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
padding: 2px;
}

.pf-item {
position: relative;
display: block;
aspect-ratio: 1/1;
overflow: hidden;
background: rgba(255,255,255,.03);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.pf-item img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}

/* text-only post thumbnail */
.pf-item-text {
width: 100%; height: 100%;
background: linear-gradient(145deg, #14102a, #1e1440);
color: var(--text-faint);
font-size: .72rem; line-height: 1.5;
padding: 16px; display: flex;
align-items: center; justify-content: center;
text-align: center; overflow: hidden;
}

/* hover overlay — shows title + likes */
.pf-item-hover {
position: absolute; inset: 0;
background: rgba(0,0,0,.55);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
opacity: 0; transition: opacity .15s;
pointer-events: none;
}
.pf-item:hover .pf-item-hover,
.pf-item:active .pf-item-hover { opacity: 1; }

.pf-item-hover span {
font-size: .78rem; font-weight: 600; color: #fff;
text-align: center; padding: 0 8px;
max-width: 90%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-item-hover span:first-child {
font-size: .85rem; font-weight: 700;
}

.pf-empty {
text-align: center; color: var(--text-faint);
font-size: .85rem; padding: 40px 20px;
}

/* Skeleton */
.pf-skel {
aspect-ratio: 1/1;
background: rgba(255,255,255,.03);
animation: pf-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes pf-pulse {
0% { opacity: .3; }
100% { opacity: .6; }
}

/* ---- RESPONSIVE ---- */

@media (min-width: 480px) {
.pf-grid { grid-template-columns: repeat(3, 1fr); }
.pf-skel { aspect-ratio: 1/1; }
}

@media (min-width: 640px) {
.pf { max-width: 680px; }
.pf-avatar, .pf-avatar-init { width: 100px; height: 100px; font-size: 2.6rem; }
.pf-name { font-size: 1.4rem; }
.pf-stats { gap: 32px; margin-top: 18px; }
.pf-stat strong { font-size: 1.1rem; }
.pf-grid { gap: 3px; padding: 3px; }
}

@media (min-width: 1024px) {
.pf { max-width: 740px; }
.pf-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- LIGHT MODE ---- */

[data-theme="light"] .pf-name { color: var(--text-heading); }
[data-theme="light"] .pf-stat strong { color: var(--text-heading); }
[data-theme="light"] .pf-tab.active { color: var(--text-heading); border-bottom-color: var(--text-heading); }
[data-theme="light"] .pf-item-text { background: linear-gradient(145deg, #ebe5f8, #ddd5f0); color: var(--text-muted); }
[data-theme="light"] .pf-skel { background: #e8e8f0; }

/* ============================================
   POST VIEWER — Fullscreen Immersive
   ============================================ */

body.fv-body {
background: #000;
overflow: hidden;
height: 100vh; height: 100dvh;
position: fixed; width: 100%;
}
body.fv-body .navbar,
body.fv-body .footer,
body.fv-body .sidebar,
body.fv-body .sidebar-overlay { display: none !important; }

.fv {
position: fixed; inset: 0;
background: #000;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}

/* Content — fills screen */
.fv-content {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.fv-image {
width: 100%; height: 100%;
object-fit: contain;
}
.fv-text-content {
padding: 40px 24px;
font-size: 1rem; color: var(--text-primary);
line-height: 1.7; max-width: 500px;
text-align: center;
}

/* Bottom gradient for readability */
.fv-gradient {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}

/* ---- TOP BAR ---- */

.fv-top {
position: absolute;
top: 0; left: 0; right: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
z-index: 10;
}
.fv-top-btn {
width: 36px; height: 36px;
border-radius: 50%; border: none;
background: rgba(255,255,255,.08);
display: flex; align-items: center; justify-content: center;
cursor: pointer; text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background .15s;
}
.fv-top-btn:active { background: rgba(255,255,255,.15); }
.fv-top-logo {
font-size: .85rem; font-weight: 800;
color: rgba(255,255,255,.6); letter-spacing: 2px;
}

/* ---- RIGHT ACTION BAR ---- */

.fv-actions {
position: absolute;
right: 12px; bottom: 120px;
display: flex; flex-direction: column;
align-items: center; gap: 18px;
z-index: 5;
}

.fv-action-avatar {
position: relative;
margin-bottom: 4px;
}
.fv-creator-ring {
display: block;
width: 44px; height: 44px;
border-radius: 50%;
border: 2px solid var(--link-color);
overflow: hidden;
animation: fv-ring-pulse 3s ease-in-out infinite;
}
@keyframes fv-ring-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.4); }
50% { box-shadow: 0 0 0 4px rgba(124,58,237,.15); }
}
.fv-creator-ring img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.fv-creator-ring span {
display: flex; width: 100%; height: 100%;
align-items: center; justify-content: center;
background: linear-gradient(135deg, #7c3aed, #a855f7);
font-size: 1rem; font-weight: 700; color: #fff;
}

.fv-follow-dot {
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%);
width: 20px; height: 20px;
border-radius: 50%;
background: var(--link-color); color: #fff;
font-size: .75rem; font-weight: 800;
border: 2px solid #000;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.fv-action-btn {
display: flex; flex-direction: column;
align-items: center; gap: 2px;
background: none; border: none;
color: #fff; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .15s;
}
.fv-action-btn:active { transform: scale(1.25); }
.fv-action-btn span {
font-size: .68rem; font-weight: 600;
}

.fv-liked { color: #ef4444; }
.fv-saved { color: #eab308; }

/* Like burst animation */
.fv-like-pop {
animation: fv-pop .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes fv-pop {
0% { transform: scale(1); }
30% { transform: scale(1.5); }
60% { transform: scale(0.85); }
100% { transform: scale(1); }
}

.fv-burst-particle {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: #ef4444;
pointer-events: none;
animation: fv-burst .5s ease-out forwards;
}
@keyframes fv-burst {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Double-tap heart */
.fv-tap-heart {
position: fixed;
z-index: 100;
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
animation: fv-heart-pop .8s cubic-bezier(.175,.885,.32,1.275) forwards;
}
@keyframes fv-heart-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
60% { transform: translate(-50%, -50%) scale(1); opacity: .8; }
100% { transform: translate(-50%, -60%) scale(.8); opacity: 0; }
}

/* Follow dot vanish */
.fv-follow-vanish {
animation: fv-vanish .4s ease-out forwards;
}
@keyframes fv-vanish {
0% { transform: translateX(-50%) scale(1); opacity: 1; }
40% { transform: translateX(-50%) scale(1.3); opacity: .8; }
100% { transform: translateX(-50%) scale(0); opacity: 0; }
}

/* ---- BOTTOM INFO ---- */

.fv-info {
position: absolute;
bottom: 16px; left: 14px; right: 72px;
z-index: 5;
}
.fv-info-user {
display: flex; align-items: center; gap: 6px;
text-decoration: none; color: #fff;
font-size: .85rem;
}
.fv-info-user strong { font-weight: 700; }
.fv-info-user span { color: rgba(255,255,255,.5); font-size: .78rem; }

.fv-info-caption {
font-size: .82rem; color: rgba(255,255,255,.8);
margin: 4px 0 0; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.fv-info-extras {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 6px;
}

.fv-genre-badge {
display: inline-block;
padding: 2px 10px; border-radius: 10px;
font-size: .62rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .05em;
background: rgba(167,139,250,.12);
color: var(--link-color);
}

.fv-file-badge {
display: inline-block;
padding: 3px 10px; border-radius: 10px;
font-size: .62rem; font-weight: 600;
background: rgba(34,197,94,.1);
color: #22c55e;
text-decoration: none;
border: 1px solid rgba(34,197,94,.2);
}
.fv-file-badge:hover { background: rgba(34,197,94,.15); }

.fv-reuse-badge {
display: inline-block;
margin-top: 6px;
padding: 3px 10px; border-radius: 12px;
font-size: .62rem; font-weight: 700;
background: rgba(124,58,237,.15);
color: var(--link-color);
border: 1px solid rgba(124,58,237,.25);
box-shadow: 0 0 10px rgba(124,58,237,.15);
}

/* ---- SWIPE NAV ZONES ---- */
.fv-nav {
position: absolute; left: 0; right: 0;
height: 15vh; z-index: 2;
}
.fv-nav-prev { top: 0; }
.fv-nav-next { bottom: 0; }

/* ---- COMMENTS PANEL ---- */

.fv-comments-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 50;
opacity: 0; pointer-events: none;
transition: opacity .25s;
}
.fv-comments-overlay.fv-visible { opacity: 1; pointer-events: auto; }

.fv-comments-panel {
position: fixed;
bottom: 0; left: 0; right: 0;
height: 65vh;
background: var(--bg-card);
border-radius: 16px 16px 0 0;
z-index: 51;
display: flex; flex-direction: column;
transform: translateY(100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.fv-comments-panel.fv-visible { transform: translateY(0); }

.fv-comments-handle {
width: 36px; height: 4px; border-radius: 2px;
background: rgba(255,255,255,.15);
margin: 10px auto 0;
}

.fv-comments-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px 8px;
border-bottom: 1px solid var(--border-color);
}
.fv-comments-head h3 {
font-size: .92rem; font-weight: 700; color: #fff; margin: 0;
}
.fv-comments-head h3 span {
font-weight: 400; color: var(--text-faint); font-size: .82rem; margin-left: 4px;
}
.fv-comments-close {
width: 32px; height: 32px; border-radius: 50%;
border: none; background: transparent;
color: var(--text-muted); font-size: 1.4rem;
cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.fv-comments-list {
flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 8px 16px; min-height: 0;
}

.fv-comment {
display: flex; gap: 10px; padding: 10px 0;
}
.fv-comment-av {
width: 32px; height: 32px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
background: linear-gradient(135deg, #7c3aed, #a855f7);
display: flex; align-items: center; justify-content: center;
text-decoration: none;
}
.fv-comment-av img { width: 100%; height: 100%; object-fit: cover; }
.fv-comment-av span { font-size: .7rem; font-weight: 700; color: #fff; }

.fv-comment-body { flex: 1; min-width: 0; }
.fv-comment-user {
font-size: .78rem; font-weight: 700; color: #fff;
text-decoration: none;
}
.fv-comment-time {
font-size: .65rem; color: var(--text-faint); margin-left: 6px;
}
.fv-comment-body p {
font-size: .82rem; color: var(--text-secondary);
margin: 2px 0 0; line-height: 1.4;
}
.fv-comment-del {
font-size: .65rem; color: var(--text-faint);
background: none; border: none; cursor: pointer;
margin-top: 2px; padding: 0;
}
.fv-comment-del:hover { color: #ef4444; }

/* Threaded replies: indent + a subtle rail on the left. */
.fv-comment-reply { padding-left: 44px; position: relative; }
.fv-comment-reply::before {
    content: ""; position: absolute; left: 24px; top: 14px; bottom: 14px;
    width: 2px; background: var(--border-color); border-radius: 1px;
}

.fv-comment-actions {
    display: flex; align-items: center; gap: 14px;
    margin-top: 4px;
}
.fv-comment-like, .fv-comment-reply-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 2px 0;
    color: var(--text-faint); font-size: .72rem;
    cursor: pointer; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.fv-comment-like svg { transition: transform .15s; }
.fv-comment-like:active svg { transform: scale(1.3); }
.fv-comment-like.fv-liked { color: #ef4444; }
.fv-comment-reply-btn:hover { color: var(--text-primary); }
.fv-comment-sticker {
    display: block; max-width: 160px; max-height: 160px;
    margin: 4px 0; border-radius: 10px;
}

/* "Replying to X" banner above the input. */
.fv-reply-banner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px; font-size: .75rem;
    color: var(--text-faint);
    background: rgba(255,255,255,.03);
    border-top: 1px solid var(--border-color);
}
.fv-reply-banner strong { color: var(--text-primary); margin-left: 4px; }
.fv-reply-cancel {
    background: none; border: none; color: var(--text-faint);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px;
}

.fv-comment-empty, .fv-comment-loading {
text-align: center; color: var(--text-faint);
font-size: .85rem; padding: 24px 0;
}

.fv-comments-input {
display: flex; gap: 8px;
padding: 10px 16px; border-top: 1px solid var(--border-color);
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.fv-comments-input textarea {
flex: 1; padding: 9px 14px; border-radius: 20px;
border: 1px solid var(--border-color);
background: rgba(255,255,255,.04);
color: var(--text-primary); font-size: .84rem; font-family: inherit;
resize: none; outline: none;
}
.fv-comments-input textarea:focus { border-color: var(--link-color); }
.fv-comment-send {
width: 38px; height: 38px; border-radius: 50%;
background: var(--link-color); border: none;
color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.fv-comment-send:active { transform: scale(.9); }

/* ---- OPTIONS MENU ---- */

.fv-menu-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.4);
z-index: 60;
opacity: 0; pointer-events: none;
transition: opacity .2s;
}
.fv-menu-overlay.fv-visible { opacity: 1; pointer-events: auto; }

.fv-menu {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--bg-card);
border-radius: 16px 16px 0 0;
padding: 8px 8px 20px;
z-index: 61;
transform: translateY(100%);
transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.fv-menu.fv-visible { transform: translateY(0); }

.fv-menu-item {
display: block; width: 100%;
padding: 14px 16px;
background: transparent; border: none;
color: var(--text-primary);
font-size: .9rem; font-weight: 500;
text-align: center; text-decoration: none;
cursor: pointer; border-radius: 10px;
transition: background .12s;
-webkit-tap-highlight-color: transparent;
}
.fv-menu-item:hover { background: rgba(255,255,255,.04); }
.fv-menu-danger { color: #ef4444; }

/* ---- RESPONSIVE ---- */

@media (min-width: 640px) {
.fv-actions { right: 20px; bottom: 140px; gap: 20px; }
.fv-info { left: 24px; right: 100px; bottom: 24px; }
.fv-info-user { font-size: .92rem; }
.fv-info-caption { font-size: .88rem; }
.fv-top { padding: 16px 24px; }
.fv-creator-ring { width: 50px; height: 50px; }
.fv-comments-panel { max-width: 500px; left: auto; right: 0; height: 100vh; border-radius: 16px 0 0 16px; }
.fv-menu { max-width: 400px; left: 50%; transform: translateX(-50%) translateY(100%); border-radius: 16px; }
.fv-menu.fv-visible { transform: translateX(-50%) translateY(0); bottom: 20px; }
}

/* ============================================
   WRITER'S SPACE — Premium Reading App
   ============================================ */

body.wr-body {
background: linear-gradient(180deg, #0a0a18 0%, #080814 100%);
min-height: 100vh;
}

.wr {
max-width: 560px;
margin: 0 auto;
padding: 0 20px 60px;
}


/* ---- HEADER ---- */

.wr-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 0 20px;
}
.wr-greeting-sub {
font-size: .72rem;
color: var(--text-faint);
margin: 0;
font-family: Georgia, serif;
}
.wr-greeting-name {
font-size: 1.3rem;
font-weight: 700;
color: #fff;
margin: 2px 0 0;
font-family: Georgia, serif;
}
.wr-new-btn {
width: 42px; height: 42px;
border-radius: 50%;
border: none;
background: rgba(124,58,237,.12);
color: var(--link-color);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s;
}
.wr-new-btn:active { background: rgba(124,58,237,.2); }
.wr-join-btn {
padding: 8px 20px;
border-radius: 20px;
border: none;
background: var(--link-color);
color: #fff;
font-size: .8rem;
font-weight: 700;
cursor: pointer;
}

/* ---- QUOTE CARD ---- */

.wr-quote-card {
position: relative;
padding: 22px 24px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(99,102,241,.06));
margin-bottom: 28px;
overflow: hidden;
}
.wr-quote-glow {
position: absolute;
top: -20px; right: -20px;
width: 80px; height: 80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124,58,237,.15), transparent 70%);
}
.wr-quote-text {
font-family: Georgia, serif;
font-size: .92rem;
font-style: italic;
color: rgba(255,255,255,.75);
line-height: 1.7;
margin: 0;
position: relative;
}
.wr-quote-by {
display: block;
font-size: .7rem;
color: var(--text-faint);
margin-top: 8px;
font-family: Georgia, serif;
position: relative;
}

/* ---- SECTIONS ---- */

.wr-sec { margin-bottom: 28px; }
.wr-sec-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.wr-sec-head h2,
.wr-sec-title {
font-size: .9rem;
font-weight: 700;
color: rgba(255,255,255,.8);
margin: 0;
font-family: Georgia, serif;
}
.wr-see-all {
font-size: .72rem;
color: var(--link-color);
text-decoration: none;
font-weight: 600;
}

/* ---- CONTINUE READING — book covers ---- */

.wr-book-row {
display: flex;
gap: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-right: 32px;
scroll-snap-type: x mandatory;
}
.wr-book-row::-webkit-scrollbar { display: none; }

.wr-book {
flex-shrink: 0;
width: 100px;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
transition: transform .2s;
}
.wr-book:active { transform: scale(.95); }
.wr-book img {
width: 100%;
aspect-ratio: 2/3;
object-fit: cover;
border-radius: 10px;
display: block;
box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ---- CATEGORY PILLS ---- */

.wr-pills {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
.wr-pills::-webkit-scrollbar { display: none; }
.wr-pill {
padding: 8px 20px;
border-radius: 24px;
border: none;
background: rgba(255,255,255,.04);
color: var(--text-faint);
font-size: .78rem;
font-weight: 600;
font-family: Georgia, serif;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
transition: all .15s;
}
.wr-pill:active { transform: scale(.95); }
.wr-pill.active {
background: var(--link-color);
color: #fff;
box-shadow: 0 0 16px rgba(124,58,237,.25);
}

/* ---- FEATURED STORY — large card ---- */

.wr-feat-card {
display: flex;
gap: 18px;
padding: 20px;
border-radius: 20px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.05);
text-decoration: none;
color: inherit;
transition: border-color .2s, box-shadow .2s;
-webkit-tap-highlight-color: transparent;
}
.wr-feat-card:active { transform: scale(.99); }
@media (hover: hover) { .wr-feat-card:hover { border-color: rgba(124,58,237,.2); box-shadow: 0 8px 32px rgba(0,0,0,.3); } }

.wr-feat-cover {
width: 110px; min-width: 110px;
aspect-ratio: 2/3;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.wr-feat-cover-init {
width: 110px; min-width: 110px;
aspect-ratio: 2/3;
border-radius: 12px;
background: linear-gradient(145deg, #1a1535, #251e45);
display: flex; align-items: center; justify-content: center;
font-family: Georgia, serif;
font-size: 2.2rem; font-weight: 700;
color: var(--link-color);
box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

.wr-feat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wr-feat-genre {
font-size: .58rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--link-color);
margin-bottom: 6px;
}
.wr-feat-body h3 {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin: 0 0 4px;
font-family: Georgia, serif;
line-height: 1.3;
}
.wr-feat-by {
font-size: .72rem;
color: var(--text-faint);
margin-bottom: 8px;
}
.wr-feat-body p {
font-size: .78rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0 0 10px;
font-family: Georgia, serif;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wr-feat-info {
display: flex; gap: 12px;
font-size: .68rem; color: var(--text-faint);
margin-bottom: 12px;
}
.wr-feat-read {
display: inline-block;
padding: 8px 20px;
border-radius: 20px;
background: var(--link-color);
color: #fff;
font-size: .78rem;
font-weight: 700;
align-self: flex-start;
box-shadow: 0 2px 10px rgba(124,58,237,.25);
}

/* ---- STORY LIST — elevated cards ---- */

.wr-list { display: flex; flex-direction: column; gap: 12px; }

.wr-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255,255,255,.025);
text-decoration: none;
color: inherit;
transition: background .15s, transform .2s, box-shadow .2s;
-webkit-tap-highlight-color: transparent;
}
.wr-item:active { transform: scale(.98); }
@media (hover: hover) { .wr-item:hover { background: rgba(255,255,255,.04); box-shadow: 0 4px 16px rgba(0,0,0,.2); } }

.wr-item-cover {
width: 48px; height: 64px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.wr-item-init {
width: 48px; height: 64px;
border-radius: 8px;
background: linear-gradient(145deg, #1a1535, #251e45);
display: flex; align-items: center; justify-content: center;
font-family: Georgia, serif;
font-size: 1.2rem; font-weight: 700;
color: var(--link-color);
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.wr-item-info { flex: 1; min-width: 0; }
.wr-item-info h3 {
font-size: .88rem; font-weight: 600; color: #fff;
margin: 0;
font-family: Georgia, serif;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-item-by {
font-size: .7rem; color: var(--text-faint);
display: block; margin-top: 2px;
}
.wr-item-meta {
display: flex; align-items: center; gap: 8px;
margin-top: 4px;
font-size: .65rem; color: var(--text-faint);
}
.wr-item-genre {
font-size: .58rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
padding: 1px 6px; border-radius: 4px;
background: rgba(124,58,237,.1);
color: var(--link-color);
}

.wr-empty {
text-align: center;
color: var(--text-faint);
font-size: .85rem;
padding: 32px 0;
font-family: Georgia, serif;
font-style: italic;
}

/* Skeleton */
.wr-list-skel {
height: 80px;
border-radius: 16px;
background: rgba(255,255,255,.02);
animation: wr-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes wr-pulse { 0% { opacity: .3; } 100% { opacity: .5; } }

/* ---- WRITE FORM ---- */

.wf {
width: 100%; max-width: 500px;
max-height: 92vh; overflow-y: auto;
background: linear-gradient(180deg, #111120, #0d0d1a);
border-radius: 24px;
padding: 28px 22px 24px;
position: relative;
margin: auto;
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 16px 48px rgba(0,0,0,.5);
}

.wf-x {
position: absolute; top: 16px; right: 16px;
width: 32px; height: 32px; border-radius: 50%;
border: none; background: rgba(255,255,255,.05);
color: var(--text-muted); font-size: 1.1rem;
cursor: pointer; display: flex; align-items: center; justify-content: center;
z-index: 1;
}

.wf-card {
background: rgba(255,255,255,.025);
border-radius: 16px;
padding: 16px;
margin-bottom: 14px;
}

.wf-title {
width: 100%; padding: 0;
border: none; background: transparent;
color: #fff; font-size: 1.15rem; font-weight: 700;
font-family: Georgia, serif;
outline: none; margin-bottom: 12px;
box-sizing: border-box;
}
.wf-title::placeholder { color: rgba(255,255,255,.2); }

.wf-select {
width: 100%; padding: 10px 12px;
border-radius: 12px; border: none;
background: rgba(255,255,255,.04);
color: var(--text-secondary);
font-size: .85rem; font-family: Georgia, serif;
outline: none; cursor: pointer;
}

/* Cover card */
.wf-cover-card {
aspect-ratio: 16/10;
display: flex; align-items: center; justify-content: center;
cursor: pointer; position: relative;
-webkit-tap-highlight-color: transparent;
transition: background .2s;
}
.wf-cover-card:hover, .wf-cover-card.wf-drag { background: rgba(124,58,237,.04); }
.wf-cover-card.wf-has { padding: 0; }

.wf-cover-empty {
display: flex; flex-direction: column;
align-items: center; gap: 6px;
}
.wf-cover-empty span { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.wf-cover-empty small { font-size: .7rem; color: var(--text-faint); }

.wf-cover-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
border-radius: 16px;
}

/* Toggle */
.wf-toggle {
display: flex;
background: rgba(255,255,255,.03);
border-radius: 10px; padding: 3px;
margin-bottom: 12px;
}
.wf-tog {
flex: 1; padding: 8px 0;
border-radius: 7px; border: none;
background: transparent;
color: var(--text-faint);
font-size: .8rem; font-weight: 600;
font-family: Georgia, serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all .15s;
}
.wf-tog.active {
background: rgba(255,255,255,.06);
color: #fff;
}

/* Editor */
.wf-editor {
width: 100%; padding: 14px;
border-radius: 12px; border: none;
background: rgba(255,255,255,.02);
color: var(--text-primary);
font-size: .95rem;
font-family: Georgia, serif;
line-height: 1.85;
resize: vertical; outline: none;
min-height: 180px;
box-sizing: border-box;
}
.wf-editor::placeholder { color: rgba(255,255,255,.15); }
.wf-editor:focus { box-shadow: inset 0 0 0 1px rgba(124,58,237,.2); }

/* File drop */
.wf-drop {
display: flex; flex-direction: column;
align-items: center; gap: 6px;
padding: 28px 16px;
border-radius: 12px;
border: 2px dashed rgba(255,255,255,.06);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s;
}
.wf-drop:hover, .wf-drop.wf-drag { border-color: var(--link-color); }
.wf-drop span { font-size: .85rem; color: var(--text-muted); }
.wf-drop small { font-size: .7rem; color: var(--text-faint); }

.wf-file-pill {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 10px;
background: rgba(124,58,237,.06);
}
.wf-file-pill span { font-size: .8rem; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-file-rm {
width: 24px; height: 24px; border-radius: 50%;
border: none; background: transparent;
color: var(--text-faint); font-size: 1rem; cursor: pointer;
}
.wf-file-rm:hover { color: #ef4444; }

/* Advanced */
.wf-more { margin-top: 4px; }
.wf-more summary {
font-size: .75rem; font-weight: 600;
color: var(--text-faint);
cursor: pointer; padding: 8px 0;
list-style: none;
font-family: Georgia, serif;
-webkit-tap-highlight-color: transparent;
}
.wf-more summary::-webkit-details-marker { display: none; }
.wf-more summary::before { content: "+ "; color: var(--link-color); }
.wf-more[open] summary::before { content: "- "; }

.wf-more-body {
padding: 10px 0 0;
display: flex; flex-direction: column; gap: 12px;
}
.wf-quote-input {
width: 100%; padding: 10px 14px;
border-radius: 10px; border: none;
background: rgba(255,255,255,.03);
color: var(--text-primary);
font-size: .85rem; font-family: Georgia, serif;
font-style: italic; outline: none;
box-sizing: border-box;
}
.wf-quote-input:focus { box-shadow: inset 0 0 0 1px rgba(124,58,237,.15); }

.wf-check {
display: flex; align-items: center; gap: 8px;
font-size: .8rem; color: var(--text-muted);
cursor: pointer;
}
.wf-check input { width: 16px; height: 16px; cursor: pointer; }

/* ---- Oryx pre-publish review ---- */
.wf-oryx { margin: 10px 0 0; }
.wf-oryx-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(167,139,250,.3);
    background: rgba(167,139,250,.08);
    color: #d4c2ff;
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}
.wf-oryx-btn:hover:not(:disabled) {
    background: rgba(167,139,250,.18);
    border-color: rgba(167,139,250,.5);
    color: #fff;
}
.wf-oryx-btn:disabled { opacity: .55; cursor: default; }
.wf-oryx-hint {
    margin: 6px 0 0;
    font-size: .74rem;
    color: rgba(232,228,245,.5);
    line-height: 1.45;
}
.wf-oryx-panel {
    margin-top: 14px;
    padding: 16px 16px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(34,20,70,.6), rgba(14,8,30,.85));
    border: 1px solid rgba(167,139,250,.22);
    animation: wfOryxFade .35s ease-out;
}
.wf-oryx-panel[aria-hidden="true"] { display: none; }
@keyframes wfOryxFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.wf-oryx-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.wf-oryx-tag {
    font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #c4b1ff;
    background: rgba(167,139,250,.14);
    padding: 3px 9px; border-radius: 999px;
}
.wf-oryx-close {
    width: 26px; height: 26px; border-radius: 50%;
    border: none; background: transparent; color: rgba(232,228,245,.55);
    font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.wf-oryx-close:hover { color: #fff; background: rgba(255,255,255,.06); }
.wf-oryx-row { margin: 8px 0; }
.wf-oryx-row:first-of-type { margin-top: 0; }
.wf-oryx-k {
    display: block;
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #a78bfa;
    margin-bottom: 3px;
}
.wf-oryx-row p {
    margin: 0;
    font-size: .88rem;
    color: rgba(245,240,255,.88);
    line-height: 1.5;
    font-family: Georgia, serif;
}
.wf-oryx-foot {
    margin: 10px 0 0;
    font-size: .7rem;
    color: rgba(232,228,245,.48);
    font-style: italic;
}
.wf-oryx-err {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    color: #fca5a5;
    font-size: .82rem;
}
.wf-oryx-loading {
    display: flex; gap: 6px; justify-content: center;
    padding: 14px 0;
}
.wf-oryx-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #a78bfa;
    opacity: .4;
    animation: wfOryxDot 1.2s ease-in-out infinite;
}
.wf-oryx-dot:nth-child(2) { animation-delay: .15s; }
.wf-oryx-dot:nth-child(3) { animation-delay: .3s; }
@keyframes wfOryxDot {
    0%, 100% { opacity: .3; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.25); }
}

/* ---- Artisan/Mangaka "Request editor review" opt-in ---- */
.ws-review-opt { margin-top: 8px; }
.ws-review-note {
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,6,24,.55);
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .2s ease;
}
.ws-review-note:focus { outline: none; border-color: rgba(220,38,38,.4); }
.ws-review-note::placeholder { color: rgba(232,228,245,.32); }

/* Publish button */
.wf-publish {
width: 100%; padding: 14px 0;
border-radius: 16px; border: none;
background: var(--link-color);
color: #fff;
font-size: .92rem; font-weight: 700;
font-family: Georgia, serif;
cursor: pointer;
margin-top: 16px;
box-shadow: 0 4px 16px rgba(124,58,237,.25);
transition: opacity .15s;
-webkit-tap-highlight-color: transparent;
}
.wf-publish:active { opacity: .85; }
.wf-publish:disabled { opacity: .4; }

/* ---- RESPONSIVE ---- */

@media (min-width: 640px) {
.wr { max-width: 620px; padding: 0 28px 60px; }
.wr-greeting-name { font-size: 1.5rem; }
.wr-book { width: 110px; }
.wr-feat-cover, .wr-feat-cover-init { width: 130px; min-width: 130px; }
.wr-feat-body h3 { font-size: 1.2rem; }
.wf { max-width: 540px; padding: 32px 28px 28px; }
}

/* ---- LIGHT MODE ---- */

[data-theme="light"] body.wr-body { background: linear-gradient(180deg, #faf9f7, #f5f3f0); }
[data-theme="light"] .wr-greeting-name { color: var(--text-heading); }
[data-theme="light"] .wr-quote-card { background: linear-gradient(135deg, rgba(124,58,237,.05), rgba(99,102,241,.03)); }
[data-theme="light"] .wr-quote-text { color: var(--text-heading); }
[data-theme="light"] .wr-pill { background: rgba(0,0,0,.03); color: var(--text-muted); }
[data-theme="light"] .wr-pill.active { background: var(--link-color); color: #fff; }
[data-theme="light"] .wr-feat-card { background: #fff; border-color: #eee; }
[data-theme="light"] .wr-feat-body h3 { color: var(--text-heading); }
[data-theme="light"] .wr-item { background: rgba(0,0,0,.02); }
[data-theme="light"] .wr-item-info h3 { color: var(--text-heading); }
[data-theme="light"] .wf { background: linear-gradient(180deg, #fff, #f8f7f5); border-color: #e0ddd8; box-shadow: 0 8px 32px rgba(0,0,0,.08); }
[data-theme="light"] .wf-card { background: rgba(0,0,0,.02); }
[data-theme="light"] .wf-title { color: var(--text-heading); }
[data-theme="light"] .wf-editor { background: rgba(0,0,0,.02); color: var(--text-primary); }
[data-theme="light"] .wf-select { background: rgba(0,0,0,.03); }
[data-theme="light"] .wr-book img { box-shadow: 0 4px 12px rgba(0,0,0,.1); }

/* ============================================================
   ARTISAN STUDIO (.ws-*) — Cinematic rebuild
   ============================================================ */

body.ws-body {
    --ws-glow-low:  0 0 60px rgba(124,58,237,.10);
    --ws-glow-med:  0 24px 60px rgba(0,0,0,.35), 0 0 50px rgba(124,58,237,.12);
    --ws-glow-high: 0 18px 48px rgba(124,58,237,.55), 0 0 0 1px rgba(167,139,250,.3), inset 0 1px 0 rgba(255,255,255,.22);
    --ws-gap-section: 72px;

    background:
        radial-gradient(1600px 800px at 12% -14%, rgba(124,58,237,.34), transparent 62%),
        radial-gradient(1100px 700px at 108% 6%,  rgba(88,28,175,.32),  transparent 58%),
        radial-gradient(900px 600px at 50% 95%,  rgba(124,58,237,.14), transparent 60%),
        linear-gradient(180deg, #0a0614 0%, #060310 100%);
    min-height: 100vh;
    color: #ece8f8;
}
body.ws-body .footer { display: none; }

.ws {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px 180px;
}

/* ---------- 1. HERO ---------- */
.ws-hero {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 8px;
    margin-bottom: var(--ws-gap-section);
    padding: 112px max(40px, calc(50vw - 720px + 40px));
    min-height: 620px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
    align-items: center;
    background:
        radial-gradient(1400px 800px at 8% 20%,  rgba(124,58,237,.42), transparent 62%),
        radial-gradient(900px 700px at 96% 90%,  rgba(88,28,175,.38),  transparent 66%),
        linear-gradient(135deg, #1a0f38 0%, #241050 45%, #0c0520 100%);
    isolation: isolate;
}
.ws-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(10,6,20,0), rgba(10,6,20,.85));
    pointer-events: none;
    z-index: 0;
}
.ws-hero-glow {
    position: absolute;
    width: 640px; height: 640px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .6;
    z-index: 0;
    pointer-events: none;
}
.ws-hero-glow-a {
    top: -220px; left: -180px;
    background: radial-gradient(circle, rgba(167,139,250,.75), transparent 70%);
}
.ws-hero-glow-b {
    bottom: -240px; right: -160px;
    background: radial-gradient(circle, rgba(198,166,255,.6), transparent 70%);
    animation: wsFloat 14s ease-in-out infinite alternate;
}
@keyframes wsFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-50px, 24px) scale(1.1); }
}
.ws-hero-left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ws-hero-kicker {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    letter-spacing: .02em;
    color: rgba(232,228,245,.78);
    margin: 0 0 18px;
}
.ws-hero-name {
    font-family: Georgia, serif;
    font-size: 5.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 28px;
    line-height: .98;
    letter-spacing: -.03em;
    text-shadow: 0 8px 50px rgba(167,139,250,.45);
}
.ws-hero-sub {
    font-size: 1.25rem;
    color: rgba(232,228,245,.85);
    margin: 0 0 36px;
    max-width: 480px;
    line-height: 1.5;
}
.ws-hero-cta {
    margin-top: 44px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 34px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--ws-glow-high);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ws-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 56px rgba(124,58,237,.7), 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.3);
}
.ws-hero-cta:active { transform: translateY(0); }

.ws-hero-right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.ws-hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3.1;
    min-height: 500px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,.5), 0 0 80px rgba(124,58,237,.22);
    isolation: isolate;
    -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 68%, rgba(0,0,0,.9) 85%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(120% 120% at 50% 50%, #000 68%, rgba(0,0,0,.9) 85%, rgba(0,0,0,0) 100%);
}
.ws-hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(1.06);
}
/* ======================================================================
   WRITER HERO — per-character scene animation
   The Oryx-Books night scene: the girl's head gently tracks her reading,
   a page on the book slowly turns over and resets, and three cloud wisps
   drift across the sky (cloud #1 briefly crosses the moon).
   ====================================================================== */

/* 1. Page flip around the book's spine.
      transform-box: fill-box + origin 0% 50% pins the pivot to the
      spine (the left edge of the page). scaleX(1 → 0 → -1) fakes a
      3D rotate around the vertical spine axis without needing
      rotate3d (inconsistent on SVG across browsers). */
@keyframes wdPageFlip {
    0%,  12%  { transform: scaleX(1);     opacity: 1; }
    46%       { transform: scaleX(.04);   opacity: .88; }
    78%       { transform: scaleX(-1);    opacity: 1; }
    86%       { transform: scaleX(-1);    opacity: 0; }
    87%       { transform: scaleX(1);     opacity: 0; }
    97%, 100% { transform: scaleX(1);     opacity: 1; }
}
.wd-hero-art .wd-h-page {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: wdPageFlip 9.5s ease-in-out infinite;
    will-change: transform, opacity;
}

/* 2. Head tilt syncs with the page turn: slight lean to the right while
      reading the right page, neutral during the flip, gentle lean to
      the left once the page has turned. Period matches the flip. */
@keyframes wdHeadRead {
    0%,  12%  { transform: rotate(-1.5deg); }
    36%       { transform: rotate(-2deg); }
    48%       { transform: rotate(.2deg); }
    78%       { transform: rotate(1.8deg); }
    90%, 100% { transform: rotate(-1.5deg); }
}
.wd-hero-art .wd-h-head {
    transform-box: fill-box;
    transform-origin: 50% 88%;
    animation: wdHeadRead 9.5s ease-in-out infinite;
    will-change: transform;
}

/* 3. Clouds drift left-to-right at different altitudes / speeds.
      The outer <g> handles the straight drift; the inner <g> adds a
      slow vertical bob and subtle scale-breath so the clouds feel
      pushed by real (uneven) wind instead of a conveyor belt.
      Negative animation-delay starts each mid-drift so the scene is
      already populated on page load. */
@keyframes wdCloud1Drift { from { transform: translate(-200px,  92px); } to { transform: translate(760px,  92px); } }
@keyframes wdCloud2Drift { from { transform: translate(-160px,  52px); } to { transform: translate(780px,  52px); } }
@keyframes wdCloud3Drift { from { transform: translate(-220px, 158px); } to { transform: translate(800px, 158px); } }

.wd-hero-art .wd-h-cloud { will-change: transform; }
.wd-hero-art .wd-h-cloud-1 { animation: wdCloud1Drift 72s linear infinite; animation-delay: -28s; }
.wd-hero-art .wd-h-cloud-2 { animation: wdCloud2Drift 54s linear infinite; animation-delay: -18s; }
.wd-hero-art .wd-h-cloud-3 { animation: wdCloud3Drift 94s linear infinite; animation-delay: -66s; }

@keyframes wdCloudBob1 {
    0%, 100% { transform: translateY(0)   scale(1,    1);    }
    25%      { transform: translateY(-3px) scale(1.04, .98); }
    50%      { transform: translateY(2px)  scale(.97, 1.02); }
    75%      { transform: translateY(-2px) scale(1.02, 1);   }
}
@keyframes wdCloudBob2 {
    0%, 100% { transform: translateY(0)   scale(1,    1);    }
    33%      { transform: translateY(-4px) scale(1.03, .97); }
    66%      { transform: translateY(3px)  scale(.96, 1.03); }
}
@keyframes wdCloudBob3 {
    0%, 100% { transform: translateY(1px)  scale(1,    1);    }
    40%      { transform: translateY(-3px) scale(1.05, .98); }
    70%      { transform: translateY(4px)  scale(.95, 1.02); }
}
.wd-hero-art .wd-h-cloud-inner { will-change: transform; transform-origin: 50% 50%; }
.wd-hero-art .wd-h-cloud-1 .wd-h-cloud-inner { animation: wdCloudBob1 17s ease-in-out infinite; }
.wd-hero-art .wd-h-cloud-2 .wd-h-cloud-inner { animation: wdCloudBob2 13s ease-in-out infinite; animation-delay: -4s; }
.wd-hero-art .wd-h-cloud-3 .wd-h-cloud-inner { animation: wdCloudBob3 21s ease-in-out infinite; animation-delay: -9s; }

/* 4. Stars twinkle at random-feeling offsets via nth-child phase shifts. */
@keyframes wdStarTwinkle {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
.wd-hero-art .wd-h-stars circle {
    animation: wdStarTwinkle 4.5s ease-in-out infinite;
    transform-box: fill-box;
}
.wd-hero-art .wd-h-stars circle:nth-child(2n)  { animation-delay: -1.2s; animation-duration: 5.8s; }
.wd-hero-art .wd-h-stars circle:nth-child(3n)  { animation-delay: -2.4s; animation-duration: 4.1s; }
.wd-hero-art .wd-h-stars circle:nth-child(5n)  { animation-delay: -3.1s; animation-duration: 6.7s; }

/* ======================================================================
   ARTISAN HERO — per-character scene animation
   The moonlit studio: the brush makes slow strokes on the canvas,
   the palette sways gently as if being held, stars twinkle, and the
   sparkles near the canvas shimmer.
   ====================================================================== */
@keyframes asBrushStroke {
    0%, 12%  { transform: translate(0, 0)     rotate(0deg); }
    35%      { transform: translate(-2px, 4px) rotate(-1.5deg); }
    55%      { transform: translate(1px, 2px)  rotate(.5deg); }
    75%      { transform: translate(-1px, 5px) rotate(-1deg); }
    100%     { transform: translate(0, 0)     rotate(0deg); }
}
.ws-hero-art .as-h-brush {
    animation: asBrushStroke 6s ease-in-out infinite;
    transform-origin: 50% 0%;
    will-change: transform;
}

@keyframes asPaletteSway {
    0%, 100% { transform: translate(0, 0)      rotate(0deg); }
    50%      { transform: translate(1px, -2px) rotate(.8deg); }
}
.ws-hero-art .as-h-palette {
    animation: asPaletteSway 9s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform;
}

@keyframes asTwinkle {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
.ws-hero-art .as-h-stars circle {
    animation: asTwinkle 5s ease-in-out infinite;
    transform-box: fill-box;
}
.ws-hero-art .as-h-stars circle:nth-child(2n) { animation-delay: -1.4s; animation-duration: 6.2s; }
.ws-hero-art .as-h-stars circle:nth-child(3n) { animation-delay: -2.7s; animation-duration: 4.3s; }
.ws-hero-art .as-h-stars circle:nth-child(5n) { animation-delay: -3.5s; animation-duration: 7.1s; }

@keyframes asSparkle {
    0%, 100% { transform: scale(1)   rotate(0deg);  opacity: .85; }
    50%      { transform: scale(1.25) rotate(35deg); opacity: 1; }
}
.ws-hero-art .as-h-sparkles path {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: asSparkle 5.5s ease-in-out infinite;
}
.ws-hero-art .as-h-sparkles path:nth-child(2) { animation-delay: -2.4s; animation-duration: 7s; }

/* ======================================================================
   MANGAKAS HERO — per-character scene animation
   The desk at night: the dip pen lifts and returns (inking motion),
   the BAM! burst pulses like an impact frame, the speed lines flicker
   like the scene is mid-action, sparkles shimmer, stars twinkle.
   ====================================================================== */
@keyframes mkPenInk {
    0%, 20%  { transform: translate(0, 0)     rotate(0deg); }
    45%      { transform: translate(3px, -6px) rotate(-3deg); }
    70%      { transform: translate(-1px, 3px) rotate(1deg); }
    100%     { transform: translate(0, 0)     rotate(0deg); }
}
.ws-hero-art .mk-h-pen {
    animation: mkPenInk 7s ease-in-out infinite;
    transform-origin: 50% 100%;
    will-change: transform;
}

@keyframes mkBamPulse {
    0%, 65%, 100% { transform: scale(1)    rotate(0deg); }
    72%           { transform: scale(1.14) rotate(-3deg); }
    80%           { transform: scale(1.04) rotate(1.5deg); }
    88%           { transform: scale(1.08) rotate(-1deg); }
}
.ws-hero-art .mk-h-bam {
    animation: mkBamPulse 4.5s ease-in-out infinite;
    transform-origin: 50% 50%;
    transform-box: fill-box;
    will-change: transform;
}

@keyframes mkSpeedFlicker {
    0%, 100% { opacity: .7; }
    50%      { opacity: .35; }
}
.ws-hero-art .mk-h-speed {
    animation: mkSpeedFlicker 2.2s ease-in-out infinite;
}

@keyframes mkSparkle {
    0%, 100% { transform: scale(1)   rotate(0deg);   opacity: .92; }
    50%      { transform: scale(1.3) rotate(-45deg); opacity: 1; }
}
.ws-hero-art .mk-h-sparkles path {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: mkSparkle 5s ease-in-out infinite;
}
.ws-hero-art .mk-h-sparkles path:nth-child(2) { animation-delay: -2.2s; animation-duration: 6.5s; }

.ws-hero-art .mk-h-stars circle {
    animation: asTwinkle 4.8s ease-in-out infinite;
    transform-box: fill-box;
}
.ws-hero-art .mk-h-stars circle:nth-child(2n) { animation-delay: -1.3s; animation-duration: 6s; }
.ws-hero-art .mk-h-stars circle:nth-child(3n) { animation-delay: -2.5s; animation-duration: 4s; }
.ws-hero-art .mk-h-stars circle:nth-child(5n) { animation-delay: -3.2s; animation-duration: 6.8s; }

/* Shooting stars — each one is a head + short trail group. The keyframe
   parks it off-screen, flashes in, sweeps diagonally across the sky,
   fades, then waits offscreen for the rest of the cycle. Long cycles
   + negative delays space the streaks out so users see one every
   ~10 seconds without it looking busy. */
@keyframes mkShoot1 {
    0%, 6%   { transform: translate(560px, 20px);  opacity: 0; }
    8%       { opacity: 1; }
    20%      { transform: translate(80px, 220px);  opacity: 0; }
    100%     { transform: translate(80px, 220px);  opacity: 0; }
}
@keyframes mkShoot2 {
    0%, 10%  { transform: translate(520px, 50px);  opacity: 0; }
    13%      { opacity: 1; }
    26%      { transform: translate(40px, 240px);  opacity: 0; }
    100%     { transform: translate(40px, 240px);  opacity: 0; }
}
@keyframes mkShoot3 {
    0%, 3%   { transform: translate(600px, 80px);  opacity: 0; }
    5%       { opacity: 1; }
    16%      { transform: translate(120px, 210px); opacity: 0; }
    100%     { transform: translate(120px, 210px); opacity: 0; }
}
.ws-hero-art .mk-h-shoot {
    will-change: transform, opacity;
}
.ws-hero-art .mk-h-shoot-1 { animation: mkShoot1 22s ease-out infinite; }
.ws-hero-art .mk-h-shoot-2 { animation: mkShoot2 31s ease-out infinite; animation-delay: -9s;  }
.ws-hero-art .mk-h-shoot-3 { animation: mkShoot3 38s ease-out infinite; animation-delay: -20s; }

/* ======================================================================
   EDITOR BOARD — review-focused layout
   ====================================================================== */
.ed-wrap { max-width: 1240px; margin: 0 auto; padding: 36px 24px 80px; }

/* ---- Hero ---- */
.ed-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    padding: 44px 44px 48px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(20,14,46,.85), rgba(12,8,28,.96));
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    margin-bottom: 32px;
}
.ed-hero-glow {
    position: absolute;
    width: 540px; height: 540px;
    border-radius: 50%;
    filter: blur(110px);
    z-index: 0;
    pointer-events: none;
    opacity: .55;
}
.ed-hero-glow-a { top: -180px; left: -140px; background: radial-gradient(circle, rgba(220,38,38,.5), transparent 70%); }
.ed-hero-glow-b { bottom: -200px; right: -120px; background: radial-gradient(circle, rgba(251,191,36,.45), transparent 70%); }
.ed-hero-left  { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.ed-hero-right { position: relative; z-index: 1; }
.ed-hero-kicker { font-family: Georgia, serif; font-size: 1rem; color: rgba(232,228,245,.78); margin: 0 0 14px; }
.ed-hero-name {
    font-family: Georgia, serif;
    font-size: 3.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1;
    letter-spacing: -.02em;
    text-shadow: 0 8px 50px rgba(220,38,38,.25);
}
.ed-hero-sub { font-size: 1.05rem; color: rgba(232,228,245,.82); margin: 0 0 28px; line-height: 1.55; max-width: 480px; }
.ed-hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px; border-radius: 999px; border: none;
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: #fff; font-size: .98rem; font-weight: 700; cursor: pointer;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(220,38,38,.42), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ed-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(220,38,38,.55); }

.ed-hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3.1;
    min-height: 380px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 60px rgba(220,38,38,.15);
    isolation: isolate;
    -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 68%, rgba(0,0,0,.9) 85%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(120% 120% at 50% 50%, #000 68%, rgba(0,0,0,.9) 85%, rgba(0,0,0,0) 100%);
}
.ed-hero-art {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block;
    transform: scale(1.04);
}
.ed-hero-image-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(10,6,20,.65) 0%, rgba(10,6,20,.1) 45%, rgba(10,6,20,0) 75%),
        linear-gradient(180deg, rgba(10,6,20,.15) 0%, rgba(10,6,20,0) 40%, rgba(10,6,20,.6) 100%);
    z-index: 2; pointer-events: none;
}

/* ---- Editor hero character animations ---- */
@keyframes edLampPulse {
    0%, 100% { opacity: .75; }
    50%      { opacity: .95; }
}
.ed-hero-art .ed-h-lamplight { animation: edLampPulse 5.5s ease-in-out infinite; }

@keyframes edLampNudge {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    50%      { transform: translate(.6px, -1px) rotate(.6deg); }
}
.ed-hero-art .ed-h-lampshade {
    animation: edLampNudge 9s ease-in-out infinite;
    transform-origin: 20% 0%;
    transform-box: fill-box;
}

@keyframes edPenMark {
    0%, 18%  { transform: translate(0, 0)     rotate(0deg); }
    30%      { transform: translate(-4px, 8px) rotate(-4deg); }
    42%      { transform: translate(-8px, 10px) rotate(-6deg); }
    55%      { transform: translate(-12px, 6px) rotate(-3deg); }
    70%      { transform: translate(-6px, 3px) rotate(-1deg); }
    100%     { transform: translate(0, 0)     rotate(0deg); }
}
.ed-hero-art .ed-h-pen {
    animation: edPenMark 6.5s ease-in-out infinite;
    transform-origin: 50% 100%;
    will-change: transform;
}

@keyframes edTopSheetBreath {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-.8px); }
}
.ed-hero-art .ed-h-topsheet { animation: edTopSheetBreath 7s ease-in-out infinite; }

/* Red marks appear one at a time, synced with the pen's stroke rhythm */
@keyframes edMarkAppear {
    0%, 20%   { opacity: 0; stroke-dashoffset: 40; }
    40%       { opacity: 1; stroke-dashoffset: 0; }
    88%       { opacity: 1; }
    100%      { opacity: 0; }
}
.ed-hero-art .ed-h-mark {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    opacity: 0;
    animation: edMarkAppear 6.5s ease-in-out infinite;
}
.ed-hero-art .ed-h-mark-1 { animation-delay: 0s;   }
.ed-hero-art .ed-h-mark-2 { animation-delay: 1.6s; }
.ed-hero-art .ed-h-mark-3 { animation-delay: 3.2s; }
.ed-hero-art .ed-h-mark-4 { animation-delay: 4.8s; stroke-dasharray: 60; stroke-dashoffset: 60; }

@keyframes edStarTwinkle {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
.ed-hero-art .ed-h-stars circle { animation: edStarTwinkle 5s ease-in-out infinite; transform-box: fill-box; }
.ed-hero-art .ed-h-stars circle:nth-child(2n) { animation-delay: -1.3s; animation-duration: 6s; }
.ed-hero-art .ed-h-stars circle:nth-child(3n) { animation-delay: -2.6s; animation-duration: 4.2s; }

/* ---- Stats strip ---- */
.ed-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}
.ed-stat {
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20,14,46,.78), rgba(12,8,28,.92));
    border: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; gap: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.ed-stat-n { font-size: 1.65rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.ed-stat-l { font-size: .72rem; color: rgba(232,228,245,.6); letter-spacing: .1em; text-transform: uppercase; }

/* ---- Section headings ---- */
.ed-sec { margin-bottom: 40px; }
.ed-sec-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.ed-sec-title { font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: -.01em; }
.ed-sec-sub   { font-size: .86rem; color: rgba(232,228,245,.6); margin: 4px 0 0; }
.ed-sec-count { font-size: .72rem; color: rgba(232,228,245,.55); letter-spacing: .1em; text-transform: uppercase; }
.ed-empty     {
    padding: 26px 22px; border-radius: 14px;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.1);
    color: rgba(232,228,245,.65);
    text-align: center; font-size: .9rem;
    grid-column: 1 / -1;
}
.ed-empty em { color: #fbbf24; font-style: normal; font-weight: 600; }
.ed-skel {
    height: 118px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(30,18,60,.3), rgba(50,30,100,.25), rgba(30,18,60,.3));
    background-size: 200% 100%;
    animation: wdShimmer 1.8s linear infinite;
}
.ed-skel-tall { height: 210px; }

/* ---- Review queue ---- */
.ed-queue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}
.ed-queue-card {
    padding: 20px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(34,20,70,.65), rgba(14,8,30,.82));
    border: 1px solid rgba(251,191,36,.15);
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ed-queue-card:hover {
    transform: translateY(-3px);
    border-color: rgba(251,191,36,.4);
    box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 32px rgba(251,191,36,.18);
}
.ed-queue-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .7rem; }
.ed-queue-kind {
    padding: 3px 9px; border-radius: 999px;
    background: rgba(251,191,36,.14);
    color: #fcd34d;
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ed-queue-kind-lesson { background: rgba(56,189,248,.14); color: #7dd3fc; }
.ed-queue-when { color: rgba(232,228,245,.5); }
.ed-queue-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 2px 0 0; font-family: Georgia, serif; line-height: 1.25; }
.ed-queue-author { font-size: .82rem; color: rgba(212,194,255,.75); margin: 0; }
.ed-queue-note {
    margin: 6px 0 0;
    font-size: .86rem; font-style: italic;
    color: rgba(232,228,245,.78);
    line-height: 1.5;
    padding: 10px 12px;
    border-left: 2px solid rgba(251,191,36,.35);
    background: rgba(251,191,36,.06);
    border-radius: 0 8px 8px 0;
}
.ed-queue-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.ed-queue-peek { font-size: .78rem; color: rgba(232,228,245,.7); text-decoration: none; }
.ed-queue-peek:hover { color: #fff; }
.ed-queue-review {
    padding: 8px 18px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: #fff; font-weight: 700; font-size: .82rem; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 16px rgba(220,38,38,.38);
}
.ed-queue-review:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(220,38,38,.5); }

/* ---- Fresh work grid ---- */
.ed-fresh {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.ed-fresh-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20,14,46,.75), rgba(12,8,28,.92));
    border: 1px solid rgba(255,255,255,.06);
    transition: transform .22s ease, border-color .22s ease;
}
.ed-fresh-card:hover { transform: translateY(-3px); border-color: rgba(167,139,250,.25); }
.ed-fresh-cover {
    width: 72px; height: 96px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2a1a5c, #18103a);
}
.ed-fresh-cover-none {
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, serif; font-size: 1.8rem; color: rgba(255,255,255,.4);
}
.ed-fresh-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ed-fresh-top { display: flex; gap: 8px; align-items: center; }
.ed-fresh-guild {
    font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #a78bfa;
    background: rgba(167,139,250,.14);
    padding: 3px 8px; border-radius: 999px;
}
.ed-fresh-oryx {
    font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fcd34d;
    background: rgba(251,191,36,.14);
    border: 1px solid rgba(251,191,36,.28);
    padding: 2px 8px; border-radius: 999px;
}
.ed-fresh-sug {
    font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #7dd3fc;
    background: rgba(56,189,248,.12);
    padding: 2px 8px; border-radius: 999px;
}
.ed-fresh-card--oryx { border-color: rgba(251,191,36,.28); box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 24px rgba(251,191,36,.08); }
.ed-fresh-note {
    margin: 6px 0 0;
    font-size: .8rem; font-style: italic;
    color: rgba(232,228,245,.7);
    padding: 8px 10px;
    border-left: 2px solid rgba(251,191,36,.45);
    background: rgba(251,191,36,.06);
    border-radius: 0 6px 6px 0;
    line-height: 1.4;
}
.ed-fresh-done {
    font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #34d399;
    background: rgba(52,211,153,.14);
    padding: 3px 8px; border-radius: 999px;
}
.ed-fresh-title {
    font-size: .98rem; font-weight: 700; color: #fff; margin: 2px 0 0;
    font-family: Georgia, serif; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ed-fresh-author { font-size: .76rem; color: rgba(232,228,245,.55); margin: 0; }
.ed-fresh-actions { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; }
.ed-fresh-peek { font-size: .76rem; color: rgba(232,228,245,.7); text-decoration: none; }
.ed-fresh-peek:hover { color: #fff; }
.ed-fresh-review {
    padding: 6px 14px; border-radius: 8px; border: none;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff; font-weight: 700; font-size: .76rem; cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(124,58,237,.35);
    transition: transform .18s ease;
}
.ed-fresh-review:hover { transform: translateY(-1px); color: #fff; }

/* ---- Your reviews ---- */
.ed-mine {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.ed-mine-card {
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(16,10,32,.72);
    border: 1px solid rgba(255,255,255,.06);
    text-decoration: none;
    color: inherit;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .22s ease, transform .22s ease;
}
.ed-mine-card:hover { border-color: rgba(167,139,250,.3); transform: translateY(-2px); }
.ed-mine-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ed-mine-title { font-family: Georgia, serif; font-size: .98rem; font-weight: 700; color: #fff; }
.ed-mine-stars { font-size: .82rem; color: #fbbf24; letter-spacing: 1px; }
.ed-mine-author { font-size: .74rem; color: rgba(232,228,245,.55); margin: 0; }
.ed-mine-body { font-size: .85rem; color: rgba(232,228,245,.82); margin: 4px 0 0; line-height: 1.5; }

/* ---- Quick Review modal ---- */
#edReviewModal {
    position: fixed; inset: 0;
    background: rgba(6,4,16,.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none; align-items: center; justify-content: center;
    z-index: 200;
    padding: 20px;
}
.ed-review {
    position: relative;
    width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto;
    padding: 28px 30px 26px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(28,18,58,.96), rgba(14,8,28,.98));
    border: 1px solid rgba(220,38,38,.25);
    box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 60px rgba(220,38,38,.15);
}
.ed-review-x {
    position: absolute; top: 14px; right: 16px;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: transparent; color: rgba(232,228,245,.6);
    font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.ed-review-x:hover { color: #fff; background: rgba(255,255,255,.06); }
.ed-review-head h2 { font-size: 1.4rem; color: #fff; margin: 0 0 4px; font-family: Georgia, serif; letter-spacing: -.01em; }
.ed-review-target { font-size: .88rem; color: rgba(232,228,245,.65); margin: 0 0 18px; }
.ed-review-target strong { color: #fcd34d; font-weight: 700; }
.ed-review-body { display: flex; flex-direction: column; gap: 14px; }
.ed-review-lbl { display: flex; flex-direction: column; gap: 6px; }
.ed-review-k { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(232,228,245,.68); }
.ed-review-lbl textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,6,24,.65);
    color: #fff;
    font-family: Georgia, serif;
    font-size: .95rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .2s ease;
}
.ed-review-lbl textarea:focus { outline: none; border-color: rgba(220,38,38,.5); }
.ed-review-lbl textarea::placeholder { color: rgba(232,228,245,.32); }
.ed-review-rating { display: flex; flex-direction: column; gap: 6px; }
.ed-review-stars { display: flex; gap: 4px; }
.ed-review-stars button {
    width: 36px; height: 36px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,6,24,.45);
    color: rgba(232,228,245,.3);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all .15s ease;
}
.ed-review-stars button:hover { color: #fbbf24; border-color: rgba(251,191,36,.3); }
.ed-review-stars button.is-on { color: #fbbf24; background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.4); }
.ed-review-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; }
.ed-review-note { font-size: .74rem; color: rgba(232,228,245,.5); margin: 0; }
.ed-review-submit {
    padding: 11px 24px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: #fff; font-weight: 700; font-size: .9rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(220,38,38,.4);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ed-review-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(220,38,38,.55); }
.ed-review-submit:disabled { opacity: .55; cursor: default; }

/* Mobile tunes */
@media (max-width: 768px) {
    .ed-hero { grid-template-columns: 1fr; padding: 28px 24px 32px; }
    .ed-hero-right { order: -1; }
    .ed-hero-image { min-height: 0; aspect-ratio: 16/10; }
    .ed-hero-name { font-size: 2.4rem; }
    .ed-stats { grid-template-columns: repeat(2, 1fr); }
    .ed-wrap { padding: 20px 14px 60px; }
}

/* Honor the OS "reduce motion" preference — kill character loops. */
@media (prefers-reduced-motion: reduce) {
    .wd-hero-art .wd-h-page,
    .wd-hero-art .wd-h-head,
    .wd-hero-art .wd-h-cloud,
    .wd-hero-art .wd-h-cloud-inner,
    .wd-hero-art .wd-h-stars circle,
    .ws-hero-art .as-h-brush,
    .ws-hero-art .as-h-palette,
    .ws-hero-art .as-h-stars circle,
    .ws-hero-art .as-h-sparkles path,
    .ws-hero-art .mk-h-pen,
    .ws-hero-art .mk-h-bam,
    .ws-hero-art .mk-h-speed,
    .ws-hero-art .mk-h-sparkles path,
    .ws-hero-art .mk-h-stars circle,
    .ws-hero-art .mk-h-shoot,
    .ed-hero-art .ed-h-lamplight,
    .ed-hero-art .ed-h-lampshade,
    .ed-hero-art .ed-h-pen,
    .ed-hero-art .ed-h-topsheet,
    .ed-hero-art .ed-h-mark,
    .ed-hero-art .ed-h-stars circle {
        animation: none !important;
    }
}

.ws-hero-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10,6,20,.7) 0%, rgba(10,6,20,.25) 40%, rgba(10,6,20,0) 75%),
        linear-gradient(180deg, rgba(10,6,20,.15) 0%, rgba(10,6,20,0) 40%, rgba(10,6,20,.7) 100%);
    pointer-events: none;
}

/* Nav pills */
.ws-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.ws-nav-pill {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(15,8,28,.6);
    color: rgba(232,228,245,.75);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ws-nav-pill:hover {
    border-color: rgba(167,139,250,.35);
    color: #fff;
    transform: translateY(-1px);
}
.ws-nav-pill.active {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(124,58,237,.4), 0 0 0 1px rgba(167,139,250,.3);
}

/* ---------- 2. MAIN / SIDE GRID ---------- */
.ws-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 56px;
    align-items: start;
}
.ws-main { min-width: 0; display: flex; flex-direction: column; gap: var(--ws-gap-section); }
.ws-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 88px;
}

.ws-sec { margin: 0; }
.ws-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 12px;
}
.ws-sec-title {
    font-family: Georgia, serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em;
}
.ws-see-all {
    font-size: .9rem;
    color: #b89cff;
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.ws-see-all:hover { color: #d4c2ff; }

/* ---------- CONTINUE YOUR WORK ---------- */
.ws-continue-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
.ws-continue-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(38,22,78,.72), rgba(22,12,48,.75));
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: var(--ws-glow-med);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
    -webkit-tap-highlight-color: transparent;
}
.ws-continue-card:hover {
    transform: translateY(-4px);
    border-color: rgba(167,139,250,.3);
    box-shadow: 0 24px 50px rgba(0,0,0,.42), 0 0 40px rgba(124,58,237,.22);
}
.ws-continue-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(135deg, #2a1a5c, #18103a);
}
.ws-continue-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-continue-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(10,6,20,0), rgba(10,6,20,.55));
    opacity: 0;
    transition: opacity .2s;
}
.ws-continue-overlay span {
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: var(--ws-glow-high);
}
.ws-continue-card:hover .ws-continue-overlay { opacity: 1; }
.ws-continue-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 6px;
    background: rgba(0,0,0,.4);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.ws-continue-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #e2d4ff);
    box-shadow: 0 0 14px rgba(167,139,250,.7);
}
.ws-continue-info { padding: 18px 20px 20px; }
.ws-continue-info h3 {
    font-family: Georgia, serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.ws-continue-info span {
    font-size: .8rem;
    color: rgba(232,228,245,.6);
}
.ws-continue-skel {
    height: 300px;
    border-radius: 22px;
    background: linear-gradient(90deg, rgba(30,18,60,.3), rgba(50,30,100,.25), rgba(30,18,60,.3));
    background-size: 200% 100%;
    animation: wsShimmer 1.8s linear infinite;
}
@keyframes wsShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- TOOLBOX ---------- */
.ws-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}
.ws-tool {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-height: 120px;
    padding: 22px 22px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(135deg, rgba(34,20,70,.62), rgba(22,12,48,.72));
    color: rgba(232,228,245,.92);
    font-family: Georgia, serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    -webkit-tap-highlight-color: transparent;
    text-align: left;
}
.ws-tool:hover {
    transform: translateY(-3px);
    border-color: rgba(167,139,250,.38);
    box-shadow: 0 18px 38px rgba(0,0,0,.42), 0 0 36px rgba(124,58,237,.25);
}
.ws-tool-ico {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(124,58,237,.12));
    border: 1px solid rgba(167,139,250,.22);
    color: #d4c2ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    filter: drop-shadow(0 0 10px rgba(167,139,250,.25));
}
.ws-tool svg { display: block; }

/* ---------- LIBRARY ---------- */
.ws-lib-filter {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(15,8,28,.7);
    color: rgba(232,228,245,.9);
    font-size: .82rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c4b1ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.ws-lib-filter:focus { border-color: rgba(167,139,250,.4); box-shadow: 0 0 0 3px rgba(167,139,250,.15); }

.ws-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
}
.ws-lib-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(34,20,70,.62), rgba(22,12,48,.72));
    border: 1px solid rgba(255,255,255,.05);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ws-glow-low), 0 6px 20px rgba(0,0,0,.22);
    transition: transform .22s ease, border-color .22s, box-shadow .22s;
    -webkit-tap-highlight-color: transparent;
}
.ws-lib-card:hover {
    transform: translateY(-4px);
    border-color: rgba(167,139,250,.3);
    box-shadow: 0 24px 48px rgba(0,0,0,.42), 0 0 40px rgba(124,58,237,.22);
}
.ws-lib-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, #2a1a5c, #18103a);
}
.ws-lib-text-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    background:
        radial-gradient(circle at 80% 15%, rgba(167,139,250,.35), transparent 60%),
        linear-gradient(135deg, #2a1a5c, #18103a);
    color: rgba(232,228,245,.75);
    font-family: Georgia, serif;
    font-size: .92rem;
    line-height: 1.5;
    padding: 22px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    letter-spacing: -.005em;
}
.ws-lib-info { padding: 16px 18px 18px; }
.ws-lib-info h3 {
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.ws-lib-status {
    display: inline-flex;
    align-items: center;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 8px;
}
.ws-lib-status-pub {
    background: rgba(34,197,94,.14);
    color: #6ee7a4;
    border: 1px solid rgba(34,197,94,.28);
}
.ws-lib-status-draft {
    background: rgba(234,179,8,.12);
    color: #fbd44b;
    border: 1px solid rgba(234,179,8,.28);
}
.ws-lib-skel {
    aspect-ratio: 4/4.3;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(30,18,60,.3), rgba(50,30,100,.25), rgba(30,18,60,.3));
    background-size: 200% 100%;
    animation: wsShimmer 1.8s linear infinite;
}
.ws-lib-pagination {
    text-align: center;
    margin-top: 28px;
    color: rgba(232,228,245,.6);
}

/* ---------- PERFORMANCE ---------- */
.ws-perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}
.ws-perf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 26px 24px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(58,32,112,.55), rgba(22,12,50,.78));
    border: 1px solid rgba(167,139,250,.18);
    box-shadow: var(--ws-glow-low), 0 10px 30px rgba(0,0,0,.3);
    overflow: hidden;
}
.ws-perf-ico {
    color: #c4b1ff;
    filter: drop-shadow(0 0 10px rgba(167,139,250,.4));
}
.ws-perf-num {
    font-family: Georgia, serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgba(167,139,250,.4);
}
.ws-perf-label {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(232,228,245,.65);
    text-transform: uppercase;
    letter-spacing: .09em;
}

/* ---------- STATS CARD (side) ---------- */
.ws-stats-card, .ws-side-card {
    position: relative;
    padding: 32px 28px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(58,32,112,.72), rgba(22,12,50,.88));
    border: 1px solid rgba(167,139,250,.22);
    backdrop-filter: blur(24px) saturate(1.15);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    box-shadow: var(--ws-glow-med), inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
}
.ws-stats-glow {
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,139,250,.6), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}
.ws-stats-title {
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 22px;
    letter-spacing: .01em;
    position: relative;
}
.ws-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    position: relative;
}
.ws-stat {
    text-align: center;
    padding: 22px 8px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ws-stat:hover {
    border-color: rgba(167,139,250,.35);
    transform: translateY(-2px);
    box-shadow: var(--ws-glow-low);
}
.ws-stat-ico {
    color: #c4b1ff;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 10px rgba(167,139,250,.45));
}
.ws-stat-num {
    font-family: Georgia, serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgba(167,139,250,.4);
}
.ws-stat-lbl {
    font-size: .68rem;
    letter-spacing: .09em;
    color: rgba(232,228,245,.65);
    text-transform: uppercase;
    font-weight: 600;
}
.ws-milestone {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative;
}
.ws-milestone-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.ws-milestone-lbl {
    font-size: .8rem;
    color: rgba(232,228,245,.78);
}
.ws-milestone-val {
    font-size: .9rem;
    font-weight: 700;
    color: #c4b1ff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(167,139,250,.4);
}
.ws-milestone-bar {
    height: 10px;
    border-radius: 5px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.ws-milestone-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #d4c2ff);
    border-radius: 5px;
    box-shadow: 0 0 16px rgba(167,139,250,.65);
    transition: width .5s ease;
}
.ws-milestone-note {
    margin: 10px 0 0;
    font-size: .75rem;
    color: rgba(232,228,245,.5);
}

/* ---------- SCRATCHPAD CARD ---------- */
.ws-scratch-sub {
    margin: -12px 0 14px;
    font-size: .82rem;
    color: rgba(232,228,245,.65);
    line-height: 1.4;
    position: relative;
}
.ws-scratch-input {
    width: 100%;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.3);
    color: #fff;
    font-size: .92rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color .18s, background .18s, box-shadow .18s;
    position: relative;
}
.ws-scratch-input::placeholder { color: rgba(232,228,245,.42); }
.ws-scratch-input:focus {
    border-color: rgba(167,139,250,.5);
    background: rgba(0,0,0,.4);
    box-shadow: 0 0 0 3px rgba(167,139,250,.15);
}
.ws-scratch-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    position: relative;
}
.ws-scratch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(167,139,250,.08);
    border: 1px solid rgba(167,139,250,.16);
}
.ws-scratch-text {
    flex: 1;
    font-size: .88rem;
    color: rgba(232,228,245,.88);
    line-height: 1.35;
}
.ws-scratch-del {
    width: 26px; height: 26px;
    border: none; background: transparent;
    color: rgba(232,228,245,.45);
    font-size: 1.15rem; line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s, color .15s;
}
.ws-scratch-del:hover { background: rgba(248,113,113,.15); color: #f87171; }
.ws-scratch-empty {
    font-size: .82rem;
    color: rgba(232,228,245,.5);
    padding: 8px 0;
    line-height: 1.45;
    margin: 0;
}

/* ---------- TIP CARD ---------- */
.ws-tip-card .ws-tip-body {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: rgba(232,228,245,.82);
    position: relative;
}

/* ---------- EMPTY ---------- */
.ws-empty {
    grid-column: 1 / -1;
    padding: 40px 24px;
    border-radius: 16px;
    border: 1px dashed rgba(167,139,250,.22);
    text-align: center;
    color: rgba(232,228,245,.55);
    font-size: .9rem;
}

/* ---------- FAB ---------- */
.ws-fab {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
    width: 64px; height: 64px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 80;
    box-shadow: var(--ws-glow-high);
    transition: transform .2s, box-shadow .2s;
}
.ws-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 22px 50px rgba(124,58,237,.75), 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.3);
}
.ws-fab-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(167,139,250,.55);
    animation: wsPulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes wsPulse {
    0%   { transform: scale(1);    opacity: .7; }
    80%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* Join banner */
.ws-join-banner {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
    padding: 12px 16px 12px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(30,18,60,.95), rgba(18,10,40,.95));
    border: 1px solid rgba(167,139,250,.3);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: .88rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    z-index: 80;
}
.ws-join-btn {
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-weight: 700;
    font-size: .84rem;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.ws-join-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124,58,237,.5);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1120px) {
    .ws-grid { grid-template-columns: 1fr; gap: 48px; }
    .ws-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 24px; }
    .ws-stats-card, .ws-side-card { flex: 1 1 300px; }
    .ws-hero {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 80px max(32px, calc(50vw - 540px));
        min-height: 0;
    }
    .ws-hero-name { font-size: 3.8rem; }
    .ws-hero-image { aspect-ratio: 16/9; min-height: 0; }
}
@media (max-width: 760px) {
    .ws { padding: 0 20px 120px; }
    .ws-hero {
        margin-top: 8px;
        margin-bottom: 56px;
        padding: 56px 22px;
        gap: 32px;
    }
    .ws-hero-kicker { font-size: .9rem; margin-bottom: 10px; }
    .ws-hero-name { font-size: 2.6rem; margin-bottom: 18px; }
    .ws-hero-sub { font-size: 1rem; margin-bottom: 22px; }
    .ws-hero-cta { margin-top: 24px; padding: 14px 26px; font-size: .95rem; }
    .ws-hero-image { aspect-ratio: 16/10; border-radius: 22px; min-height: 0; -webkit-mask-image: none; mask-image: none; }
    .ws-nav-pill { padding: 8px 16px; font-size: .8rem; }
    .ws-sec-title { font-size: 1.18rem; }
    .ws-sec-head { margin-bottom: 18px; }
    .ws-continue-row { grid-template-columns: 1fr; }
    .ws-continue-skel { height: 260px; }
    .ws-tool-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ws-tool { min-height: 108px; padding: 18px; font-size: .88rem; }
    .ws-tool-ico { width: 38px; height: 38px; border-radius: 12px; }
    .ws-lib-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .ws-perf-grid { grid-template-columns: 1fr; }
    .ws-stats-card, .ws-side-card { padding: 26px 22px; }
    .ws-stats-grid { gap: 8px; }
    .ws-stat { padding: 18px 6px 14px; }
    .ws-stat-num { font-size: 1.5rem; }
    .ws-fab { right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 146px); width: 56px; height: 56px; }
    .ws-join-banner { right: 14px; left: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 146px); justify-content: space-between; }
}
@media (max-width: 480px) {
    .ws-lib-grid { grid-template-columns: 1fr; }
    .ws-hero-name { font-size: 2.1rem; }
    .ws-tool-grid { grid-template-columns: 1fr; }
}

/* ---------- LIGHT MODE (subtle — page mostly overrides) ---------- */
[data-theme="light"] body.ws-body {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.12), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(88,28,175,.1), transparent 60%),
        #f4f4f8;
    color: var(--text-primary);
}
[data-theme="light"] .ws-hero-name { text-shadow: 0 8px 40px rgba(124,58,237,.35); }
[data-theme="light"] .ws-tool,
[data-theme="light"] .ws-continue-card,
[data-theme="light"] .ws-lib-card,
[data-theme="light"] .ws-perf-card {
    background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(248,245,255,.6));
    border-color: rgba(124,58,237,.14);
    color: var(--text-primary);
}
[data-theme="light"] .ws-stats-card,
[data-theme="light"] .ws-side-card {
    background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(244,240,255,.75));
    border-color: rgba(124,58,237,.18);
    color: var(--text-primary);
}
[data-theme="light"] .ws-sec-title,
[data-theme="light"] .ws-stats-title,
[data-theme="light"] .ws-continue-info h3,
[data-theme="light"] .ws-lib-info h3,
[data-theme="light"] .ws-perf-num,
[data-theme="light"] .ws-stat-num { color: var(--text-heading); text-shadow: none; }
[data-theme="light"] .ws-scratch-input { background: rgba(255,255,255,.8); color: var(--text-primary); border-color: rgba(124,58,237,.18); }

/* ============================================
   WATCH PAGE — single-purpose viewing experience
   ============================================ */

/* Lock viewport */
body.watch-page {
background: #050510;
overflow-x: hidden;
}

.w {
max-width: none;
margin: 0;
padding: 0 0 48px;
}

/* ---- PLAYER ----
   Cinematic: full-bleed on mobile, dominant 88vw block on desktop.
   No frame, no shadow, no rounded corners — the video IS the page. */

.w-player-wrap {
position: relative;
background: #000;
border-radius: 0;
overflow: hidden;
box-shadow: none;
width: 100%;
margin: 0 auto;
}
.w-player { width: 100%; }
.w-player-ratio {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
}

.w-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
z-index: 2;
}

/* Skeleton loader */
.w-skeleton {
position: absolute;
inset: 0;
background: #0c0c1a;
z-index: 3;
overflow: hidden;
}
.w-skeleton-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,.06) 50%, transparent 100%);
animation: w-shimmer 1.5s infinite;
}
@keyframes w-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

/* Placeholder */
.w-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-muted);
font-size: .85rem;
z-index: 1;
}
.w-fatal-link {
color: var(--link-color);
font-size: .82rem;
margin-top: 4px;
}

/* Player slot (where iframe or video goes) */
.w-player-slot { position: absolute; inset: 0; z-index: 2; }
.w-local-video {
background: #000;
outline: none;
}

/* Player message (error/loading) */
.w-player-msg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 6px;
color: var(--text-muted);
font-size: .85rem;
text-align: center;
padding: 20px;
}
.w-player-msg small { font-size: .75rem; opacity: .6; }
.w-player-msg-err p { color: #ef4444; }

/* ---- CUSTOM VIDEO CONTROLS (local-file playback only) ----
   Cross-origin iframes render their own chrome; this overlay is
   attached only when we render our own <video> element. Auto-hides
   on inactivity (handled in JS), fades smoothly, keeps its shape
   when paused. */

.w-vc {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 10px;
padding: 36px 14px 10px;  /* top padding feathers the gradient over video */
background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,0) 100%);
color: #fff;
opacity: 0;
pointer-events: none;
transition: opacity .22s ease;
user-select: none;
-webkit-user-select: none;
font-family: inherit;
}
.w-vc.w-vc-on {
opacity: 1;
pointer-events: auto;
}
.w-player-ratio.w-vc-hide-cursor,
.w-player-ratio.w-vc-hide-cursor .w-local-video { cursor: none; }

.w-vc-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease, transform .15s ease;
-webkit-tap-highlight-color: transparent;
}
.w-vc-btn:hover  { background: rgba(255,255,255,.14); }
.w-vc-btn:active { transform: scale(.94); }
.w-vc-btn svg   { display: block; }

/* ---- Timeline ---- */
.w-vc-seek {
flex: 1 1 auto;
position: relative;
height: 18px;
cursor: pointer;
touch-action: none;
display: flex;
align-items: center;
}
.w-vc-seek-track,
.w-vc-seek-buf,
.w-vc-seek-fill {
position: absolute;
left: 0;
top: 50%;
height: 3px;
transform: translateY(-50%);
border-radius: 2px;
pointer-events: none;
transition: height .15s ease;
}
.w-vc-seek-track { right: 0; background: rgba(255,255,255,.22); }
.w-vc-seek-buf   { background: rgba(255,255,255,.35); width: 0; }
.w-vc-seek-fill  { background: #fff; width: 0; }
.w-vc-seek-thumb {
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
transform: translate(-50%, -50%) scale(0);
transition: transform .15s ease;
pointer-events: none;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.w-vc-seek:hover .w-vc-seek-track,
.w-vc-seek:hover .w-vc-seek-buf,
.w-vc-seek:hover .w-vc-seek-fill { height: 5px; }
.w-vc-seek:hover .w-vc-seek-thumb { transform: translate(-50%, -50%) scale(1); }

/* ---- Time readout ---- */
.w-vc-time {
flex-shrink: 0;
font-size: .75rem;
font-variant-numeric: tabular-nums;
color: rgba(255,255,255,.88);
min-width: 92px;
text-align: center;
letter-spacing: .02em;
}

/* ---- Volume slider ---- */
.w-vc-vol {
flex-shrink: 0;
position: relative;
width: 72px;
height: 18px;
cursor: pointer;
touch-action: none;
display: flex;
align-items: center;
}
.w-vc-vol-track,
.w-vc-vol-fill {
position: absolute;
left: 0;
top: 50%;
height: 3px;
transform: translateY(-50%);
border-radius: 2px;
pointer-events: none;
}
.w-vc-vol-track { right: 0; background: rgba(255,255,255,.22); }
.w-vc-vol-fill  { background: #fff; width: 100%; }

/* ---- Subtitle cue styling ----
   Defaults are tiny on most engines and the white-on-anything rendering
   tends to disappear over bright frames. Bump size, force a strong
   text-shadow, and lean on the browser's default bottom padding so subs
   clear our custom control bar. */
.w-local-video::cue {
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 1.05em;
    line-height: 1.35;
    text-shadow:
        0 0 4px rgba(0,0,0,.85),
        0 1px 2px rgba(0,0,0,.85);
    padding: 0 4px;
}

/* ---- Settings (gear) menu — houses the quality picker ---- */
.w-vc-settings { position: relative; flex-shrink: 0; }
.w-vc-set-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: rgba(10,10,22,.96);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 18px 42px rgba(0,0,0,.6);
    z-index: 4;
}
/* Explicit display:flex above defeats the browser's UA `hidden`
   attribute styling (which is just `display:none`). Re-assert it with
   higher specificity so [hidden] actually hides these. */
.w-vc-set-menu[hidden],
.w-vc-set-section[hidden] { display: none !important; }
.w-vc-set-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.w-vc-set-head {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    padding: 4px 10px 2px;
}
.w-vc-set-opts {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.w-vc-set-opt {
    border: none;
    background: transparent;
    color: rgba(255,255,255,.85);
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.w-vc-set-opt:hover { background: rgba(255,255,255,.08); color: #fff; }
.w-vc-set-opt.is-on {
    background: var(--link-color, #7c3aed);
    color: #fff;
}
.w-vc-set-empty {
    padding: 10px 12px;
    color: rgba(255,255,255,.55);
    font-size: .75rem;
    text-align: center;
}

/* ---- Mobile: tighten layout, drop volume slider (mute button stays) ---- */
@media (max-width: 560px) {
.w-vc { gap: 6px; padding: 28px 8px 8px; }
.w-vc-time { min-width: 78px; font-size: .7rem; }
.w-vc-vol { display: none; }
.w-vc-btn { width: 34px; height: 34px; }
}

/* ---- AUTO-NEXT OVERLAY ---- */

.w-autonext {
position: absolute;
inset: 0;
background: rgba(5,5,16,.92);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
backdrop-filter: blur(4px);
}
.w-autonext-body {
text-align: center;
color: #fff;
}
.w-autonext-body p {
font-size: .85rem;
color: var(--text-secondary);
margin: 0 0 4px;
}
.w-autonext-count {
font-size: 3rem;
font-weight: 800;
color: var(--link-color);
line-height: 1;
display: block;
margin: 8px 0 16px;
}
.w-autonext-btns {
display: flex;
gap: 10px;
justify-content: center;
}
.w-autonext-play {
padding: 10px 28px;
border-radius: 10px;
border: none;
background: var(--link-color);
color: #fff;
font-size: .88rem;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.w-autonext-play:hover { background: var(--link-hover); }
.w-autonext-cancel {
padding: 10px 20px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.15);
background: transparent;
color: var(--text-secondary);
font-size: .85rem;
cursor: pointer;
transition: border-color .15s;
}
.w-autonext-cancel:hover { border-color: rgba(255,255,255,.3); }

/* ---- CONTROLS BAR ---- */

.w-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 16px;
background: #0c0c1c;
border-radius: 0;
margin: -1px auto 0;
width: 100%;
}
.w-controls-left,
.w-controls-right {
display: flex;
align-items: center;
gap: 6px;
}

.w-ctrl-btn {
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .12s, color .12s;
}
.w-ctrl-btn:hover:not(:disabled) {
background: rgba(124,58,237,.1);
color: var(--link-color);
}
.w-ctrl-btn:disabled {
opacity: .25;
cursor: default;
}

.w-ctrl-label {
font-size: .78rem;
font-weight: 700;
color: var(--link-color);
background: rgba(124,58,237,.12);
padding: 3px 10px;
border-radius: 6px;
margin-left: 4px;
white-space: nowrap;
}

/* Server buttons */
.w-server-group {
display: flex;
gap: 3px;
}
.w-server-btn {
padding: 5px 12px;
border-radius: 6px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-muted);
font-size: .72rem;
font-weight: 600;
cursor: pointer;
transition: all .12s;
text-transform: uppercase;
letter-spacing: .03em;
}
.w-server-btn:hover {
border-color: var(--link-color);
color: var(--link-color);
}
.w-server-btn.active {
background: var(--link-color);
border-color: var(--link-color);
color: #fff;
}

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

/* ---- ANIME INFO ---- */

.w-info {
padding: 20px 16px 16px;
}
.w-info-row {
display: flex;
gap: 14px;
align-items: flex-start;
}
.w-info-poster {
width: 52px;
height: 72px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.w-info-text {
min-width: 0;
flex: 1;
}
.w-info-title {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.3;
}
.w-info-ep {
font-size: .84rem;
color: var(--link-color);
font-weight: 600;
margin: 4px 0 0;
}
.w-info-desc {
font-size: .8rem;
color: var(--text-muted);
line-height: 1.55;
margin: 8px 0 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.w-info-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.w-tag {
font-size: .7rem;
font-weight: 600;
color: var(--text-muted);
padding: 3px 10px;
border-radius: 20px;
background: rgba(255,255,255,.04);
border: 1px solid var(--border-color);
}
.w-tag-score {
background: rgba(234,179,8,.1);
border-color: rgba(234,179,8,.2);
color: #eab308;
}

/* ---- EPISODE LIST ---- */

.w-episodes {
padding: 0 16px;
margin-top: 24px;
}
.w-ep-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.w-ep-heading {
font-size: 1rem;
font-weight: 700;
color: #fff;
margin: 0;
}
.w-ep-count {
font-size: .78rem;
color: var(--text-muted);
}

/* Jump input */
.w-ep-jump {
margin-bottom: 12px;
}
.w-ep-jump-input {
width: 100%;
height: 38px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: rgba(255,255,255,.03);
color: var(--text-primary);
font-size: .82rem;
outline: none;
box-sizing: border-box;
transition: border-color .15s;
}
.w-ep-jump-input:focus { border-color: var(--link-color); }

/* Episode grid — compact numbered buttons */
/* Episode range selector */
.w-ep-ranges {
display: flex;
gap: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 16px 10px;
flex-wrap: nowrap;
}
.w-ep-ranges::-webkit-scrollbar { display: none; }
.w-range-btn {
padding: 5px 12px;
border-radius: 6px;
border: 1px solid var(--border-color);
background: rgba(255,255,255,.025);
color: var(--text-faint);
font-size: .68rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all .12s;
-webkit-tap-highlight-color: transparent;
}
.w-range-btn:active { transform: scale(.95); }
.w-range-btn.active {
background: var(--link-color);
border-color: var(--link-color);
color: #fff;
}

.w-ep-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
gap: 6px;
}

.w-ep-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: rgba(255,255,255,.025);
color: var(--text-secondary);
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: all .12s;
-webkit-tap-highlight-color: transparent;
}
.w-ep-btn:hover {
background: rgba(124,58,237,.08);
border-color: var(--link-color);
color: var(--link-color);
}
.w-ep-btn.active {
background: var(--link-color);
border-color: var(--link-color);
color: #fff;
box-shadow: 0 2px 12px rgba(124,58,237,.3);
}
.w-ep-num {
pointer-events: none;
}
.w-ep-filler {
position: absolute;
top: 3px;
right: 3px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #eab308;
}

/* Skeleton placeholders */
.w-ep-skel {
height: 40px;
border-radius: 8px;
background: rgba(255,255,255,.03);
overflow: hidden;
}
.w-ep-skel-shimmer {
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,.04) 50%, transparent 100%);
animation: w-shimmer 1.5s infinite;
}

/* ---- LIGHTS OFF ---- */

.w-lights-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.92);
z-index: 40;
display: none;
}
body.w-lights-off .w-player-wrap {
position: relative;
z-index: 41;
}
body.w-lights-off .w-controls {
position: relative;
z-index: 41;
}

/* ---- LIGHT MODE ---- */

[data-theme="light"] body.watch-page { background: #e9e9ef; }
[data-theme="light"] .w-player-wrap { box-shadow: none; }
[data-theme="light"] .w-controls { background: #fff; }
[data-theme="light"] .w-ep-btn { background: #fff; border-color: #ddd; }
[data-theme="light"] .w-ep-btn.active { background: var(--link-color); border-color: var(--link-color); color: #fff; }
[data-theme="light"] .w-info-title { color: var(--text-heading); }
[data-theme="light"] .w-ep-heading { color: var(--text-heading); }
[data-theme="light"] .w-tag { background: #f4f4f8; border-color: #ddd; }
[data-theme="light"] .w-ep-jump-input { background: #fff; border-color: #ddd; }
[data-theme="light"] .w-skeleton { background: #e8e8f0; }

/* ---- RESPONSIVE ---- */

/* Tablet: keep the player edge-to-edge. Cinematic framing stays. */
@media (min-width: 640px) {
.w { padding: 0 0 64px; }
.w-info,
.w-episodes { padding-left: 20px; padding-right: 20px; }
.w-ep-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

/* Desktop: player becomes the dominant ~88vw block (capped at 1600px),
   secondary content drops into a narrower 1100px reading column so the
   video visually outweighs everything else. */
@media (min-width: 1024px) {
.w { padding: 0 0 80px; }
.w-player-wrap,
.w-controls {
  width: 88vw;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.w-info,
.w-episodes {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.w-info { padding-top: 28px; }
.w-episodes { margin-top: 28px; }
.w-ep-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
}

/* Ultra-wide: let the player breathe but never stretch past 1600px. */
@media (min-width: 1800px) {
.w-player-wrap,
.w-controls { width: 80vw; }
}

/* ---- RESPONSIVE ---- */

@media (max-width: 768px) {

/* ---- MESSAGES: full native-app feel ---- */

/* Lock the page — no scroll, no bounce */
body.msg-page {
    position: fixed;
    width: 100%;
    height: 100vh; height: 100dvh;
    overflow: hidden;
    padding-top: 0 !important;
}
body.msg-page .navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 52px;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* Layout fills under navbar — use CSS var for keyboard-aware height */
.msg-layout {
    flex-direction: column;
    height: calc(var(--msg-vh, 100dvh) - 52px);
    margin-top: 52px;
    max-width: none;
    overflow: hidden;
    position: relative;
}

/* ---- Conversation list (full screen) ---- */
.msg-sidebar {
    width: 100%; min-width: 0;
    flex: 1 1 0;
    min-height: 0;
    border-right: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.msg-sidebar-hidden { display: none !important; }

.msg-sidebar-head {
    padding: 16px 16px 6px;
    flex-shrink: 0;
}
.msg-sidebar-head h2 {
    font-size: 1.5rem;
    font-weight: 800;
}
.msg-search-wrap {
    padding: 6px 16px 10px;
    flex-shrink: 0;
}
.msg-search {
    padding: 11px 12px 11px 38px;
    border-radius: 12px;
    font-size: .88rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.msg-search-icon {
    left: 28px;
}
.msg-add-friend {
    padding: 0 16px 10px;
    flex-shrink: 0;
}

/* Friend list — scrollable */
.msg-friends-list {
    padding: 4px 8px;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.msg-friend-item {
    padding: 14px 12px;
    border-radius: 14px;
    gap: 14px;
    min-height: 68px;
}
.msg-friend-avatar {
    width: 50px; height: 50px;
    font-size: 1.1rem;
}
.msg-friend-top strong {
    font-size: .95rem;
}
.msg-friend-preview {
    font-size: .82rem;
}
.msg-friend-time {
    font-size: .72rem;
}
.msg-dot {
    width: 12px; height: 12px;
    border-width: 2.5px;
}
.msg-unread-dot {
    width: 10px; height: 10px;
}
.msg-request-item {
    padding: 12px 8px;
}
.msg-accept-btn, .msg-reject-btn {
    padding: 8px 16px;
    font-size: .82rem;
    min-height: 36px;
}

/* ---- Chat view (full screen, flex column) ---- */
.msg-chat {
    display: none;
    min-height: 0;
    background: var(--bg-page);
    overflow: hidden;
}
.msg-chat.msg-chat-visible {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

/* Chat header — fixed at top of chat */
.msg-chat-header {
    padding: 10px 12px;
    gap: 10px;
    min-height: 52px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-page);
    flex-shrink: 0;
    z-index: 5;
}
.msg-back-btn {
    display: flex;
    width: 36px; height: 36px;
}
.msg-chat-avatar-inner {
    width: 38px; height: 38px;
}
.msg-chat-user strong {
    font-size: .92rem;
}

/* Messages area — takes all remaining space, scrolls */
.msg-messages {
    padding: 12px 14px;
    gap: 1px;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Bubbles — proper sizing */
.msg-bubble {
    max-width: 82%;
    padding: 10px 14px;
    font-size: .88rem;
    line-height: 1.45;
}
.msg-bubble-mine {
    border-radius: 20px 20px 4px 20px;
}
.msg-bubble-mine.msg-bubble-first { border-radius: 20px 20px 4px 20px; }
.msg-bubble-mine.msg-bubble-last { border-radius: 20px 4px 4px 20px; }
.msg-bubble-mine.msg-bubble-first.msg-bubble-last { border-radius: 20px 20px 4px 20px; }
.msg-bubble-theirs {
    border-radius: 20px 20px 20px 4px;
}
.msg-bubble-theirs.msg-bubble-first { border-radius: 20px 20px 20px 4px; }
.msg-bubble-theirs.msg-bubble-last { border-radius: 4px 20px 20px 4px; }
.msg-bubble-theirs.msg-bubble-first.msg-bubble-last { border-radius: 20px 20px 20px 4px; }
.msg-bubble-first { margin-top: 6px; }
.msg-bubble-time {
    font-size: .64rem;
}
.msg-read-receipt {
    font-size: .62rem;
}

/* Reply banner — sits above input */
.msg-reply-banner {
    padding: 8px 14px;
    flex-shrink: 0;
}

/* Pinned bar */
.msg-pinned-bar {
    padding: 8px 14px;
    flex-shrink: 0;
}

/* Typing indicator */
.msg-typing {
    flex-shrink: 0;
}

/* Input area — pinned to bottom, never hidden by keyboard */
.msg-input-area {
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-page);
    flex-shrink: 0;
    z-index: 5;
}
.msg-input {
    padding: 10px 16px;
    border-radius: 24px;
    font-size: 16px;
    min-height: 44px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}
.msg-send-btn {
    width: 44px; height: 44px;
}
.msg-attach-btn, .msg-voice-btn {
    width: 40px; height: 40px;
}

/* Voice recording */
.msg-voice-recording {
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    flex-shrink: 0;
}

/* Action panel — full width bottom sheet */
.msg-action-overlay { align-items: flex-end; }
.msg-action-panel {
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding: 6px 6px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.msg-action-item {
    padding: 16px 18px;
    font-size: .92rem;
    min-height: 52px;
    border-radius: 12px;
}

/* Share / wallpaper panels */
.msg-share-panel, .msg-wp-panel {
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Context menu — use bottom sheet instead of dropdown */
.msg-context-menu {
    position: fixed;
    top: auto; right: 0; bottom: 0; left: 0;
    margin-top: 0;
    min-width: auto; width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 6px 6px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 32px rgba(0,0,0,.3);
    z-index: 200;
}
.msg-context-item {
    padding: 16px 18px;
    font-size: .92rem;
    min-height: 52px;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
}

/* Empty state */
.msg-empty-state svg { width: 40px; height: 40px; }
.msg-empty-state p { font-size: .92rem; }
.msg-empty-state small { font-size: .82rem; }

/* Loading spinner */
.msg-loading-spinner { width: 24px; height: 24px; }
}

/* ============================================
   ADMIN PANEL — clean dashboard
   ============================================ */

body.adm-body { background: var(--bg-page); }
body.adm-body .hero,
body.adm-body .footer { display: none; }

.adm {
display: flex;
min-height: calc(100vh - 56px);
max-width: 1200px;
margin: 0 auto;
}

/* ---- SIDEBAR ---- */
.adm-side {
width: 200px;
min-width: 200px;
border-right: 1px solid var(--border-color);
padding: 20px 0;
position: sticky;
top: 56px;
height: calc(100vh - 56px);
overflow-y: auto;
}
.adm-side-head {
padding: 0 20px 16px;
}
.adm-side-logo {
font-size: 1rem;
font-weight: 800;
color: var(--link-color);
letter-spacing: .05em;
}
.adm-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 8px;
}
.adm-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
border: none;
background: transparent;
color: #b0b0cc;
font-size: .84rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background .12s, color .12s;
-webkit-tap-highlight-color: transparent;
}
.adm-nav-item svg { color: #8080a0; transition: color .12s; }
.adm-nav-item:hover { background: rgba(124,58,237,.08); color: #fff; }
.adm-nav-item:hover svg { color: var(--link-color); }
.adm-nav-item.active {
background: rgba(124,58,237,.12);
color: var(--link-color);
font-weight: 600;
}
.adm-nav-item.active svg { color: var(--link-color); }
.adm-nav-item svg { flex-shrink: 0; }

/* ---- MAIN AREA ---- */
.adm-main {
flex: 1;
min-width: 0;
padding: 24px 28px 40px;
}

.adm-page-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-heading);
margin: 0 0 20px;
}
.adm-sub-title {
font-size: .9rem;
font-weight: 700;
color: var(--text-heading);
margin: 0 0 12px;
}
.adm-hint {
font-size: .78rem;
color: var(--text-faint);
margin: -8px 0 14px;
}

/* Mobile tabs (hidden on desktop) */
.adm-mtabs { display: none; }

/* ---- STATS ---- */
.adm-stat-row {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
.adm-stat-card {
flex: 1;
padding: 18px 16px;
border-radius: 14px;
background: var(--bg-card);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
}
.adm-stat-num {
font-size: 1.6rem;
font-weight: 800;
color: var(--text-heading);
line-height: 1;
}
.adm-stat-label {
font-size: .68rem;
font-weight: 600;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 4px;
}

/* Quick actions */
.adm-quick-row {
display: flex;
gap: 10px;
margin-bottom: 24px;
}
.adm-quick {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-secondary);
font-size: .82rem;
font-weight: 500;
cursor: pointer;
transition: border-color .15s;
-webkit-tap-highlight-color: transparent;
}
.adm-quick:hover { border-color: var(--link-color); color: var(--link-color); }

/* Recent items */
.adm-recent { display: flex; flex-direction: column; gap: 6px; }
.adm-recent-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 14px;
border-radius: 10px;
background: var(--bg-card);
border: 1px solid var(--border-color);
text-decoration: none;
color: inherit;
transition: border-color .12s;
}
.adm-recent-item:hover { border-color: rgba(124,58,237,.25); }
.adm-recent-item strong { font-size: .85rem; color: var(--text-heading); }
.adm-recent-item span { font-size: .72rem; color: var(--text-faint); }

/* ---- SUB-TABS ---- */
.adm-sub-tabs {
display: flex;
gap: 4px;
background: rgba(255,255,255,.03);
border-radius: 10px;
padding: 3px;
border: 1px solid var(--border-color);
margin-bottom: 16px;
}
.adm-stab {
flex: 1;
padding: 8px 12px;
border-radius: 7px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: all .12s;
}
.adm-stab.active {
background: var(--link-color);
color: #fff;
}

/* ---- TOOLBAR ---- */
.adm-toolbar {
display: flex;
gap: 8px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.adm-search {
flex: 1;
min-width: 180px;
padding: 9px 14px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--bg-input);
color: var(--text-primary);
font-size: .85rem;
outline: none;
}
.adm-search:focus { border-color: var(--link-color); }
.adm-select {
padding: 9px 12px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--bg-input);
color: var(--text-secondary);
font-size: .82rem;
outline: none;
cursor: pointer;
}
.adm-btn {
padding: 9px 18px;
border-radius: 10px;
border: none;
background: var(--link-color);
color: #fff;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
}
.adm-btn-sm {
padding: 5px 12px;
border-radius: 6px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-secondary);
font-size: .75rem;
cursor: pointer;
}
.adm-btn-primary {
padding: 11px 24px;
border-radius: 10px;
border: none;
background: var(--link-color);
color: #fff;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
}
.adm-btn-block { width: 100%; margin-top: 12px; }

/* ---- TABLE ---- */
.adm-table-wrap {
border-radius: 12px;
border: 1px solid var(--border-color);
overflow: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.adm-table {
width: 100%;
border-collapse: collapse;
font-size: .84rem;
}
.adm-table th {
padding: 10px 14px;
text-align: left;
font-size: .72rem;
font-weight: 600;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: .04em;
background: rgba(255,255,255,.02);
border-bottom: 1px solid var(--border-color);
white-space: nowrap;
}
.adm-table td {
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,.03);
color: var(--text-primary);
}
.adm-table tbody tr:hover { background: rgba(124,58,237,.03); }
.adm-table a { color: var(--link-color); }

.adm-actions {
display: flex;
gap: 4px;
white-space: nowrap;
}
.adm-act {
padding: 4px 10px;
border-radius: 6px;
border: none;
background: rgba(255,255,255,.04);
color: var(--text-secondary);
font-size: .72rem;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background .12s;
}
.adm-act:hover { background: rgba(124,58,237,.08); color: var(--link-color); }
.adm-act-danger { color: var(--text-faint); }
.adm-act-danger:hover { background: rgba(239,68,68,.08); color: #ef4444; }

.adm-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: .68rem;
font-weight: 700;
background: rgba(124,58,237,.1);
color: var(--link-color);
}

.adm-pagination { margin-top: 12px; display: flex; gap: 4px; }
.adm-pag-btn {
padding: 6px 12px;
border-radius: 6px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-secondary);
font-size: .78rem;
cursor: pointer;
}
.adm-pag-btn.active { background: var(--link-color); border-color: var(--link-color); color: #fff; }

/* Settings */
.adm-settings-group {
max-width: 480px;
}
.adm-field {
margin-bottom: 14px;
}
.adm-field label {
display: block;
font-size: .78rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
}
.adm-input {
width: 100%;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--bg-input);
color: var(--text-primary);
font-size: .88rem;
outline: none;
box-sizing: border-box;
}
.adm-input:focus { border-color: var(--link-color); }

/* ---- MOBILE ---- */
@media (max-width: 768px) {
.adm-side { display: none; }
.adm-mtabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}
.adm-mtabs::-webkit-scrollbar { display: none; }
.adm-mtab {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #9090b0;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.adm-mtab.active { background: var(--link-color); color: #fff; }
.adm-main { padding: 16px; }
.adm-page-title { font-size: 1.15rem; }
.adm-stat-row { flex-wrap: wrap; }
.adm-stat-card { min-width: calc(33% - 8px); }
.adm-quick-row { flex-wrap: wrap; }
.adm-toolbar { flex-direction: column; }
.adm-search { min-width: 0; }
}

/* ---- LIGHT MODE ---- */
[data-theme="light"] .adm-nav-item { color: #555; }
[data-theme="light"] .adm-nav-item svg { color: #888; }
[data-theme="light"] .adm-nav-item:hover { background: rgba(124,58,237,.04); color: #222; }
[data-theme="light"] .adm-nav-item:hover svg { color: var(--link-color); }
[data-theme="light"] .adm-nav-item.active { background: rgba(124,58,237,.08); color: var(--link-color); }
[data-theme="light"] .adm-nav-item.active svg { color: var(--link-color); }
[data-theme="light"] .adm-mtab { color: #666; }
[data-theme="light"] .adm-mtab.active { background: var(--link-color); color: #fff; }
[data-theme="light"] .adm-table th { background: rgba(0,0,0,.02); }
[data-theme="light"] .adm-table td { border-color: #eee; }

/* ============================================
   CONTEXTUAL NAVBAR
   ============================================ */

/* ---- BASE NAVBAR ---- */

.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 52px;
background: rgba(10,10,22,.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255,255,255,.04);
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s, background .3s;
}
.navbar.nav-hidden {
transform: translateY(-100%);
}

/* offset body content for fixed navbar */
body { padding-top: 52px; }
/* pages that hide the navbar don't need the offset */
body.fv-body, body.watch-page { padding-top: 0; }

.nav-left {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

/* menu button */
.menu-btn {
width: 24px; height: 16px;
display: flex; flex-direction: column;
justify-content: space-between;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.menu-btn span {
display: block;
height: 2px;
border-radius: 2px;
background: #cccce0;
transition: .3s;
}
[data-theme="light"] .menu-btn span { background: #333; }

/* back button — shown on every page except the home/landing roots
   where there's nothing meaningful to go back to. */
.nav-back {
display: flex;
width: 32px; height: 32px;
border-radius: 50%;
align-items: center; justify-content: center;
color: var(--text-secondary);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background .15s;
}
.nav-back:hover { background: rgba(255,255,255,.06); }
body.sg-body .nav-back,
body.landing-body .nav-back { display: none; }

/* section name — hidden by default */
.nav-section-name {
display: none;
font-size: .88rem;
font-weight: 700;
color: var(--text-heading);
}

/* logo */
.logo {
font-size: 1.15rem;
font-weight: 800;
letter-spacing: 2px;
color: var(--link-color);
text-decoration: none;
}

/* context title — hidden by default */
.nav-ctx-title {
display: none;
font-size: .88rem;
font-weight: 600;
color: var(--text-heading);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}

.nav-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

/* profile picture — always visible */
.nav-pfp {
width: 30px; height: 30px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.nav-pfp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-pfp-init {
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
font-size: .75rem;
font-weight: 700;
text-decoration: none;
}
.nav-pfp-guest {
background: rgba(255,255,255,.06);
color: var(--text-muted);
cursor: pointer;
}

.profile-settings-btn {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
cursor: pointer; color: var(--text-faint);
-webkit-tap-highlight-color: transparent;
transition: color .15s;
}
.profile-settings-btn:hover { color: var(--link-color); }

/* search */
.search-wrap {
overflow: hidden;
max-width: 0;
transition: max-width .35s ease, opacity .25s;
opacity: 0;
}
.search-wrap.open { max-width: 180px; opacity: 1; }
.search-input {
width: 170px;
padding: 6px 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-input);
color: var(--text-heading);
font-size: .85rem;
outline: none;
}
.search-input:focus { border-color: var(--link-color); }

.search-icon {
font-size: 1rem;
cursor: pointer;
color: var(--text-muted);
-webkit-tap-highlight-color: transparent;
transition: color .15s;
}
.search-icon:hover { color: var(--text-primary); }

/* ---- CONTEXTUAL OVERRIDES ---- */

/* HOME / EXPLORE — default: menu + logo + search + pfp */
/* (this is the base state — nothing to override) */

/* ARTISAN WORKSPACE — back + section name + pfp */
body.ws-body .menu-btn { display: none; }
body.ws-body .nav-back { display: flex; }
body.ed-body .nav-back { display: flex; }
body.pr-body .nav-back { display: flex; }

/* ======================================================================
   POST REVIEW PAGE — editor critique surface
   ====================================================================== */
.pr-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 20px 80px; }

.pr-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap;
    padding: 20px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(20,14,46,.78), rgba(12,8,28,.94));
    border: 1px solid rgba(255,255,255,.06);
    margin-bottom: 24px;
}
.pr-head-meta { min-width: 0; flex: 1; }
.pr-head-kind { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(232,228,245,.55); }
.pr-head-title { font-family: Georgia, serif; font-size: 1.8rem; color: #fff; margin: 4px 0 6px; line-height: 1.15; letter-spacing: -.01em; }
.pr-head-by { font-size: .9rem; color: rgba(232,228,245,.68); margin: 0; }
.pr-head-by a { color: #d4c2ff; text-decoration: none; font-weight: 600; }
.pr-head-ai {
    margin: 10px 0 0; padding: 10px 12px;
    border-radius: 10px; border-left: 2px solid rgba(251,191,36,.5);
    background: rgba(251,191,36,.06);
    font-size: .86rem; color: rgba(245,240,255,.85); line-height: 1.5;
    font-style: italic;
}
.pr-head-ai-tag { color: #fcd34d; font-weight: 700; letter-spacing: .06em; margin-right: 6px; font-style: normal; }
.pr-head-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pr-role-chip {
    padding: 5px 12px; border-radius: 999px;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255,255,255,.06); color: rgba(232,228,245,.72);
    border: 1px solid rgba(255,255,255,.08);
}
.pr-role-editor { color: #ff9fb0; background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.28); }
.pr-role-author { color: #a7f3d0; background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); }
.pr-head-open { font-size: .8rem; color: rgba(232,228,245,.65); text-decoration: none; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.04); }
.pr-head-open:hover { color: #fff; background: rgba(255,255,255,.08); }

.pr-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 24px; align-items: flex-start; }

/* ---- Body card ---- */
.pr-body-card {
    position: relative;
    padding: 24px 28px 28px;
    border-radius: 18px;
    background: rgba(16,10,32,.75);
    border: 1px solid rgba(255,255,255,.06);
}
.pr-body-head h2 { font-size: 1rem; color: rgba(232,228,245,.75); margin: 0 0 4px; letter-spacing: .02em; }
.pr-body-hint { font-size: .78rem; color: rgba(232,228,245,.55); margin: 0 0 16px; }
.pr-body-hint strong { color: #fcd34d; font-weight: 700; }
.pr-body {
    font-family: Georgia, serif;
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(245,240,255,.94);
    user-select: text;
}
.pr-body p { margin: 0 0 1em; }
.pr-body h1, .pr-body h2, .pr-body h3 { color: #fff; line-height: 1.25; margin: 1.2em 0 .4em; }

/* Highlight spans */
.pr-hl {
    background: rgba(251,191,36,.18);
    border-bottom: 2px solid rgba(251,191,36,.55);
    padding: 1px 0;
    cursor: pointer;
    border-radius: 2px;
    transition: background .2s ease;
}
.pr-hl:hover { background: rgba(251,191,36,.3); }
.pr-hl-ai { background: rgba(167,139,250,.18); border-bottom-color: rgba(167,139,250,.55); }
.pr-hl-ai:hover { background: rgba(167,139,250,.3); }
.pr-hl-editor { background: rgba(251,191,36,.18); border-bottom-color: rgba(251,191,36,.55); }

/* Floating "Suggest edit" button */
.pr-float {
    position: absolute; display: none;
    z-index: 5;
    transform: translateZ(0);
}
.pr-float-btn {
    padding: 8px 16px; border-radius: 999px; border: none;
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: #fff; font-weight: 700; font-size: .76rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(220,38,38,.4);
}
.pr-float-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(220,38,38,.55); }

/* ---- Suggestions panel ---- */
.pr-side {
    position: sticky; top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20,14,46,.78), rgba(12,8,28,.92));
    border: 1px solid rgba(255,255,255,.06);
}
.pr-side-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.pr-side-head h2 { font-size: 1rem; color: #fff; margin: 0; letter-spacing: -.01em; }
.pr-side-count { font-size: .72rem; color: rgba(232,228,245,.5); letter-spacing: .1em; text-transform: uppercase; }
.pr-empty { font-size: .84rem; color: rgba(232,228,245,.6); line-height: 1.5; margin: 0; }
.pr-empty strong { color: #fcd34d; }
.pr-skel { height: 86px; border-radius: 12px; background: linear-gradient(90deg, rgba(30,18,60,.3), rgba(50,30,100,.25), rgba(30,18,60,.3)); background-size: 200% 100%; animation: wdShimmer 1.8s linear infinite; margin-bottom: 10px; }

.pr-suggestions { display: flex; flex-direction: column; gap: 12px; }
.pr-sug {
    padding: 14px 16px; border-radius: 14px;
    background: rgba(10,6,24,.5);
    border: 1px solid rgba(255,255,255,.06);
    transition: all .3s ease;
}
.pr-sug.is-flash { border-color: rgba(251,191,36,.5); box-shadow: 0 0 24px rgba(251,191,36,.2); }
.pr-sug--ai { border-color: rgba(167,139,250,.22); }
.pr-sug-accepted { opacity: .6; }
.pr-sug-rejected { opacity: .45; }
.pr-sug-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pr-sug-who {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    color: #d4c2ff;
}
.pr-sug-who-ai { color: #fcd34d; }
.pr-sug-status {
    font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
}
.pr-sug-status-accepted { color: #a7f3d0; background: rgba(52,211,153,.15); }
.pr-sug-status-rejected { color: #fca5a5; background: rgba(239,68,68,.15); }
.pr-sug-reason { font-size: .8rem; color: rgba(232,228,245,.8); margin: 4px 0 8px; line-height: 1.45; }
.pr-sug-orig {
    font-family: Georgia, serif;
    font-size: .82rem;
    font-style: italic;
    color: rgba(232,228,245,.68);
    padding: 8px 10px;
    border-left: 2px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.02);
    border-radius: 0 6px 6px 0;
}
.pr-sug-arrow { text-align: center; font-size: 1rem; color: rgba(167,139,250,.5); margin: 4px 0; }
.pr-sug-new {
    font-family: Georgia, serif;
    font-size: .86rem;
    color: #f2ecff;
    padding: 8px 10px;
    border-left: 2px solid rgba(167,139,250,.55);
    background: rgba(167,139,250,.08);
    border-radius: 0 6px 6px 0;
}
.pr-sug-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.pr-sug-accept, .pr-sug-reject {
    padding: 6px 14px; border-radius: 8px; border: none;
    font-size: .76rem; font-weight: 700; cursor: pointer;
    transition: opacity .18s ease;
}
.pr-sug-accept { background: linear-gradient(135deg, #10b981, #34d399); color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,.3); }
.pr-sug-reject { background: rgba(255,255,255,.06); color: rgba(232,228,245,.75); border: 1px solid rgba(255,255,255,.08); }
.pr-sug-accept:hover, .pr-sug-reject:hover { opacity: .88; }

/* ---- Suggest modal ---- */
#prModal {
    position: fixed; inset: 0;
    background: rgba(6,4,16,.82);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: none; align-items: center; justify-content: center;
    z-index: 200; padding: 20px;
}
.pr-modal {
    position: relative;
    width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto;
    padding: 26px 28px 22px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(28,18,58,.96), rgba(14,8,28,.98));
    border: 1px solid rgba(220,38,38,.2);
    box-shadow: 0 40px 80px rgba(0,0,0,.6);
}
.pr-modal-x {
    position: absolute; top: 12px; right: 14px;
    width: 30px; height: 30px; border-radius: 50%;
    border: none; background: transparent; color: rgba(232,228,245,.6);
    font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.pr-modal h2 { font-size: 1.3rem; color: #fff; margin: 0 0 4px; font-family: Georgia, serif; }
.pr-modal-sub { font-size: .82rem; color: rgba(232,228,245,.62); margin: 0 0 16px; }
.pr-modal-lbl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pr-modal-k { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(232,228,245,.65); }
.pr-modal-orig {
    font-family: Georgia, serif;
    font-size: .88rem;
    font-style: italic;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(251,191,36,.08);
    border-left: 2px solid rgba(251,191,36,.45);
    color: rgba(245,240,255,.88); line-height: 1.5;
}
.pr-modal textarea {
    width: 100%; padding: 10px 12px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,6,24,.65); color: #fff;
    font-family: Georgia, serif; font-size: .92rem; line-height: 1.5;
    resize: vertical; box-sizing: border-box;
}
.pr-modal textarea:focus { outline: none; border-color: rgba(220,38,38,.45); }
.pr-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.pr-modal-oryx {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 999px;
    border: 1px solid rgba(167,139,250,.3);
    background: rgba(167,139,250,.08);
    color: #d4c2ff; font-size: .78rem; font-weight: 700; cursor: pointer;
    transition: all .2s ease;
}
.pr-modal-oryx:hover:not(:disabled) { background: rgba(167,139,250,.18); color: #fff; }
.pr-modal-oryx:disabled { opacity: .6; cursor: default; }
.pr-modal-submit {
    padding: 10px 22px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer;
    box-shadow: 0 10px 24px rgba(220,38,38,.4);
}
.pr-modal-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(220,38,38,.55); }
.pr-modal-submit:disabled { opacity: .55; cursor: default; }

@media (max-width: 900px) {
    .pr-main { grid-template-columns: 1fr; }
    .pr-side { position: static; max-height: none; }
    .pr-head-title { font-size: 1.4rem; }
}
body.ws-body .nav-section-name { display: block; }
body.ws-body #navLogo { display: none; }
body.ws-body .search-icon { display: none; }
body.ws-body .search-wrap { display: none; }

/* WRITER'S SPACE — starts hidden, tap to reveal */
body.wr-body .navbar {
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
position: fixed;
left: 0; right: 0;
}
body.wr-body .navbar.nav-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
body.wr-body .menu-btn { display: none; }
body.wr-body .nav-back { display: flex; }
body.wr-body .nav-ctx-title { display: block; }
body.wr-body #navLogo { display: none; }
body.wr-body .search-icon { display: none; }
body.wr-body .search-wrap { display: none; }
body.wr-body .profile-settings-btn { display: none; }

/* PROFILE PAGE — back + username (via ctx title) + settings + pfp */
body.pf-body .menu-btn { display: none; }
body.pf-body .nav-back { display: flex; }
body.pf-body .nav-ctx-title { display: block; }
body.pf-body #navLogo { display: none; }
body.pf-body .search-icon { display: none; }
body.pf-body .search-wrap { display: none; }

/* POST VIEWER — already has its own fv-top bar */
body.fv-body .navbar { display: none; }

/* WATCH PAGE — already has its own controls */
body.watch-page .navbar { display: none; }

/* HOMEPAGE — transparent on hero */
body.sg-body .navbar {
background: transparent;
border-bottom: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

/* ---- LIGHT MODE ---- */
[data-theme="light"] .navbar {
background: rgba(255,255,255,.85);
border-bottom-color: rgba(0,0,0,.04);
}
[data-theme="light"] .logo { color: var(--link-color); }
[data-theme="light"] .nav-pfp-guest { background: rgba(0,0,0,.04); }
[data-theme="light"] body.sg-body .navbar { background: transparent; }

/* ============================================
   PREMIUM LIGHT MODE — global overrides
   ============================================ */

/* ---- BODY & PAGE ---- */
/* Dead rule removed — was overriding the layered radial wash set up
   in the main light-theme block (line ~94). Keeping this comment so the
   history is clear if a future edit reintroduces a body background here. */

/* ---- NAVBAR — frosted glass ---- */
[data-theme="light"] .navbar {
background: rgba(255,255,255,.72);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid rgba(0,0,0,.04);
box-shadow: 0 1px 3px rgba(80,60,120,.04);
}

/* ---- CARDS — elevation system ---- */
[data-theme="light"] .board-card,
[data-theme="light"] .alib-item,
[data-theme="light"] .adm-stat-card,
[data-theme="light"] .adm-recent-item,
[data-theme="light"] .ws-stat,
[data-theme="light"] .ws-continue-card,
[data-theme="light"] .ws-space-block,
[data-theme="light"] .ws-tool,
[data-theme="light"] .ws-lib-card,
[data-theme="light"] .ws-perf-card,
[data-theme="light"] .ws-scratch-item,
[data-theme="light"] .wr-item,
[data-theme="light"] .wr-feat-card,
[data-theme="light"] .sg-continue-card,
[data-theme="light"] .sg-rec-card,
[data-theme="light"] .db-space-block,
[data-theme="light"] .hp-card,
[data-theme="light"] .ex-card,
[data-theme="light"] .ex-card-lg,
[data-theme="light"] .ex-continue-card,
[data-theme="light"] .pf-item,
[data-theme="light"] .fv-comment,
[data-theme="light"] .msg-friend-item.active,
[data-theme="light"] .notif-item {
background: #fff;
border-color: rgba(0,0,0,.04);
box-shadow: 0 1px 4px rgba(80,60,120,.06), 0 4px 12px rgba(80,60,120,.03);
}

[data-theme="light"] .board-card:hover,
[data-theme="light"] .ws-continue-card:hover,
[data-theme="light"] .ws-lib-card:hover,
[data-theme="light"] .wr-item:hover,
[data-theme="light"] .wr-feat-card:hover,
[data-theme="light"] .sg-continue-card:hover,
[data-theme="light"] .sg-rec-card:hover,
[data-theme="light"] .hp-card:hover,
[data-theme="light"] .ex-card-lg:hover {
box-shadow: 0 2px 8px rgba(80,60,120,.1), 0 8px 24px rgba(80,60,120,.06);
border-color: rgba(124,58,237,.15);
}

/* ---- PANELS & MODALS ---- */
[data-theme="light"] .popup-box,
[data-theme="light"] .profile-panel,
[data-theme="light"] .wf,
[data-theme="light"] .wf-card,
[data-theme="light"] .adm-table-wrap {
background: #fff;
border-color: rgba(0,0,0,.06);
box-shadow: 0 4px 16px rgba(80,60,120,.06), 0 12px 40px rgba(80,60,120,.04);
}

/* ---- SIDEBAR — frosted glass ---- */
[data-theme="light"] .sidebar {
background: rgba(255,255,255,.92);
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
box-shadow: 4px 0 16px rgba(80,60,120,.06);
}

/* ---- BUTTONS — soft elevation ---- */
[data-theme="light"] .btn-primary,
[data-theme="light"] .sg-btn-glow,
[data-theme="light"] .wr-write-btn,
[data-theme="light"] .ws-btn-primary,
[data-theme="light"] .adm-btn,
[data-theme="light"] .adm-btn-primary,
[data-theme="light"] .wf-publish,
[data-theme="light"] .ex-hero-watch-btn,
[data-theme="light"] .pf-btn-primary:not(.pf-following) {
box-shadow: 0 2px 8px rgba(124,58,237,.2), 0 4px 12px rgba(124,58,237,.08);
}

[data-theme="light"] .btn-outline,
[data-theme="light"] .sg-btn-ghost,
[data-theme="light"] .pf-btn-secondary,
[data-theme="light"] .adm-btn-sm {
background: #fff;
border-color: #ddd;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ---- INPUTS — soft inset ---- */
[data-theme="light"] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
[data-theme="light"] textarea,
[data-theme="light"] select {
background: #f5f6fa;
border-color: #e0e1ea;
color: var(--text-primary);
box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
border-color: var(--link-color);
box-shadow: inset 0 1px 2px rgba(0,0,0,.03), 0 0 0 3px rgba(124,58,237,.06);
}

/* ---- TABLES — soft elevation ---- */
[data-theme="light"] .adm-table th {
background: #f8f8fc;
color: #666;
border-color: #eee;
}
[data-theme="light"] .adm-table td { border-color: #f0f0f4; }
[data-theme="light"] .adm-table tbody tr:hover { background: #fafaff; }

/* ---- BADGES & TAGS ---- */
[data-theme="light"] .adm-badge,
[data-theme="light"] .wr-genre-tag,
[data-theme="light"] .wr-item-genre,
[data-theme="light"] .hp-card-tag {
background: rgba(124,58,237,.08);
color: var(--link-color);
}

/* ---- PILLS & FILTERS ---- */
[data-theme="light"] .sg-mood,
[data-theme="light"] .wr-pill,
[data-theme="light"] .ex-mood,
[data-theme="light"] .db-mood {
background: #fff;
border-color: #e0e1ea;
color: #666;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
[data-theme="light"] .sg-mood.active,
[data-theme="light"] .wr-pill.active,
[data-theme="light"] .ex-mood.active,
[data-theme="light"] .db-mood.active {
background: var(--link-color);
border-color: var(--link-color);
color: #fff;
box-shadow: 0 2px 8px rgba(124,58,237,.2);
}

/* ---- STAT CARDS ---- */
[data-theme="light"] .db-stat,
[data-theme="light"] .ws-stat,
[data-theme="light"] .pf-stat {
background: #fff;
box-shadow: 0 1px 3px rgba(80,60,120,.05);
}
[data-theme="light"] .db-stat-num,
[data-theme="light"] .ws-stat-num,
[data-theme="light"] .pf-stat strong,
[data-theme="light"] .adm-stat-num {
color: var(--text-heading);
}

/* ---- SCROLL ROWS — peek shadows ---- */
[data-theme="light"] .sg-scroll-row,
[data-theme="light"] .db-scroll-row,
[data-theme="light"] .db-continue-row,
[data-theme="light"] .ws-continue-row,
[data-theme="light"] .ex-scroll-row,
[data-theme="light"] .wr-book-row {
mask-image: linear-gradient(to right, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

/* ---- SECTION TITLES ---- */
[data-theme="light"] .sg-section-title,
[data-theme="light"] .db-section-title,
[data-theme="light"] .ws-section-title,
[data-theme="light"] .ex-section-title,
[data-theme="light"] .wr-sec-head h2,
[data-theme="light"] .wr-sec-title,
[data-theme="light"] .adm-sub-title {
color: #444;
}

/* ---- DIVIDERS — softer ---- */
[data-theme="light"] .sb-user,
[data-theme="light"] .sb-footer {
border-color: #f0f0f4;
}

/* ============================================================
   HOMEPAGE HERO — LIGHT MODE (intentional redesign)
   ============================================================
   The old approach fogged the entire lower half of the screen to force
   legibility, which produced the washed-out / bottom-fade-bug look.
   The new approach is inverted: the background image is left ALONE,
   and the content itself becomes a floating glass card. Contrast is
   handled locally, not globally.
   ============================================================ */

/* 1. Kill the full-width overlay. Image renders clean edge-to-edge. */
[data-theme="light"] .sg-hero-overlay { background: transparent; }

/* 2. Content becomes a glass card — translucent white, blurred, rounded,
      soft-shadowed. Width capped so it reads as a focus point rather
      than a banner. Padding sized so it feels premium on desktop and
      still breathes on phones. */
[data-theme="light"] .sg-hero-content {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border: 1px solid rgba(28, 30, 55, .06);
    border-radius: 24px;
    padding: 40px 44px 36px;
    max-width: 480px;
    margin: 0 auto;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 20px 50px rgba(28, 30, 55, .18),
        0 4px 14px rgba(28, 30, 55, .08);
}

/* 3. Typography — strong dark-gray, no shadow hacks needed; the card
      provides the surface. */
[data-theme="light"] .sg-hero-title {
    color: var(--text-heading);
    text-shadow: none;
}
[data-theme="light"] .sg-hero-title span {
    background: var(--brand-gradient);
    background-size: 240% 240%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .sg-hero-sub {
    color: var(--text-secondary);
    text-shadow: none;
    opacity: 1;        /* remove any faded-look leftovers */
}

/* 4. Primary button — stronger purple gradient, compact soft lift. */
[data-theme="light"] .sg-btn-glow {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .5) inset,
        0 4px 16px rgba(124, 58, 237, .32);
}
[data-theme="light"] .sg-btn-glow:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .55) inset,
        0 8px 24px rgba(124, 58, 237, .42);
}

/* 5. Secondary button — SOLID light background, thin dark border,
      heading-colored text. No transparency, no hover tricks. */
[data-theme="light"] .sg-btn-ghost {
    background: #ffffff;
    color: var(--text-heading);
    border: 1px solid rgba(28, 30, 55, .14);
    box-shadow: 0 2px 6px rgba(28, 30, 55, .06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .sg-btn-ghost:hover {
    border-color: var(--link-color);
    color: var(--link-color);
    background: #ffffff;
}

/* 6. Logo (light) — override --brand-gradient so the masked logo and
   "Comics" wordmark both pick up the lighter palette in lockstep. */
[data-theme="light"] .sg-hero {
    --brand-gradient: linear-gradient(120deg, #a855f7 0%, #7c3aed 35%, #6366f1 65%, #3b82f6 100%);
}

/* 7. Scroll-hint chevron — readable on both image and card. */
[data-theme="light"] .sg-scroll-hint {
    color: var(--text-heading);
    opacity: .55;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}

/* 8. Top nav — keep solid white with a clear hair-line shadow so it
      separates from the hero image without a fog layer. */
[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(28, 30, 55, .08) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 4px 14px rgba(28, 30, 55, .06) !important;
}

/* 9. Bottom nav — solid, visible icons. Tune inactive-icon contrast up
      from text-faint to text-muted so the bar doesn't look washed. */
[data-theme="light"] .sg-bottom-nav {
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid rgba(28, 30, 55, .08);
    box-shadow: 0 -4px 18px rgba(28, 30, 55, .06);
}
[data-theme="light"] .sg-bnav { color: var(--text-muted); }
[data-theme="light"] .sg-bnav.active { color: var(--link-color); }

/* 10. Responsive — cards shrink padding on phones so buttons don't wrap. */
@media (max-width: 560px) {
    [data-theme="light"] .sg-hero-content {
        padding: 28px 22px 26px;
        max-width: calc(100% - 32px);
        border-radius: 20px;
    }
}

/* 11. ANTI-WASHOUT GUARANTEES
   ---------------------------
   Hard rules to prevent the "everything looks faded" class of bug
   recurring. None of the core UI wrappers may:
     (a) carry reduced opacity,
     (b) inherit a filter that lightens content,
     (c) sit under a translucent full-viewport layer that isn't behind
         the content stack.
   Below are the specific kills. */

/* a) Hero-bg default gradient & brightness filter were authored for the
      dark theme. In light mode the unloaded state used to flash a dark
      block, then a translucent card over it produced a grey muddy mid-
      tone. Reset to neutral surface + drop the brightness filter. */
[data-theme="light"] .sg-hero-bg {
    background: #f7f8fc;
    filter: none;
}

/* b) Make sure the content layer is never accidentally translucent.
      These wrappers have opacity:1 bar animation entry states (which
      target children, not the wrapper itself). */
[data-theme="light"] .sg-hero-content,
[data-theme="light"] .sg-hero-actions,
[data-theme="light"] .sg-hero-title,
[data-theme="light"] .sg-hero-sub {
    opacity: 1 !important;
    filter: none;
}

/* c) Strengthen text contrast slightly so tokens read confidently on
      the light card background. Original --text-muted passed WCAG AA
      but felt faint next to the dark-mode version. */
[data-theme="light"] {
    --text-faint: #7e819a;   /* was #8d90a6 — bump for readability */
}

/* d) Defensive: if any library-level rule ever sets body opacity in
      light mode, it will be overridden back to 1 by the token block
      above (opacity isn't in the token list — adding explicit rule). */
[data-theme="light"] body,
[data-theme="light"] main,
[data-theme="light"] .sg-body,
[data-theme="light"] .sg-section {
    opacity: 1 !important;
}

/* ---- EXPLORE PAGE ---- */
[data-theme="light"] body.explore-page { background: linear-gradient(180deg, #edeef4, #f0f1f5); }
[data-theme="light"] .ex-search-glass {
background: rgba(255,255,255,.75);
border-color: rgba(0,0,0,.06);
box-shadow: 0 2px 12px rgba(80,60,120,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="light"] .ex-search-results {
background: rgba(255,255,255,.95);
border-color: rgba(0,0,0,.06);
box-shadow: 0 8px 32px rgba(80,60,120,.08);
}

/* ---- WRITER'S SPACE ---- */
[data-theme="light"] body.wr-body { background: linear-gradient(180deg, #f5f4f2, #f0efec); }
[data-theme="light"] .wr-quote-card {
background: linear-gradient(135deg, rgba(124,58,237,.04), rgba(99,102,241,.02));
border: 1px solid rgba(124,58,237,.06);
box-shadow: 0 2px 8px rgba(80,60,120,.04);
}
[data-theme="light"] .wr-feat-card {
background: #fff;
border-color: rgba(0,0,0,.04);
box-shadow: 0 2px 8px rgba(80,60,120,.06);
}
[data-theme="light"] .wr-book img {
box-shadow: 0 2px 8px rgba(80,60,120,.1);
}

/* ---- ARTISAN WORKSPACE ---- */
[data-theme="light"] body.ws-body { background: linear-gradient(180deg, #edeef4, #f0f1f5); }
[data-theme="light"] .ws-tool {
background: #fff;
box-shadow: 0 1px 3px rgba(80,60,120,.04);
}

/* ---- PROFILE PAGE ---- */
[data-theme="light"] .pf-header-overlay {
background: radial-gradient(ellipse at center, rgba(240,241,245,.25), rgba(240,241,245,.88));
}
[data-theme="light"] .pf-tabs {
border-color: #e8e8f0;
}
[data-theme="light"] .pf-tab.active {
color: var(--text-heading);
border-bottom-color: var(--text-heading);
}
[data-theme="light"] .pf-item {
background: #f8f8fc;
}
[data-theme="light"] .pf-item:hover .pf-item-hover {
background: rgba(0,0,0,.4);
}

/* ---- MESSAGES ---- */
[data-theme="light"] .msg-bubble-mine {
background: var(--link-color);
box-shadow: 0 1px 4px rgba(124,58,237,.15);
}
[data-theme="light"] .msg-bubble-theirs {
background: #fff;
border-color: #eee;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ---- ADMIN ---- */
[data-theme="light"] .adm-side {
border-color: #eee;
background: #fafbff;
}
[data-theme="light"] .adm-nav-item:hover { background: #f0f0f8; }
[data-theme="light"] .adm-nav-item.active { background: rgba(124,58,237,.06); }
[data-theme="light"] .adm-quick {
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ---- COMMENTS PANEL ---- */
[data-theme="light"] .fv-comments-panel {
background: #fff;
box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}
[data-theme="light"] .fv-menu {
background: #fff;
box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}

/* ---- BOTTOM NAV ---- */
[data-theme="light"] .sg-bottom-nav,
[data-theme="light"] .db-bottom-nav {
background: rgba(255,255,255,.88);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
border-color: rgba(0,0,0,.04);
box-shadow: 0 -1px 3px rgba(0,0,0,.03);
}

/* ---- FAB ---- */
[data-theme="light"] .ws-fab,
[data-theme="light"] .db-fab {
box-shadow: 0 4px 12px rgba(124,58,237,.2), 0 8px 24px rgba(124,58,237,.08);
}

/* ---- TOAST ---- */
[data-theme="light"] .toast {
background: #fff;
color: var(--text-heading);
box-shadow: 0 4px 16px rgba(0,0,0,.08);
border: 1px solid rgba(0,0,0,.04);
}

/* ============================================
   GLOBAL MOBILE FIXES — all pages
   ============================================ */

@media (max-width: 640px) {

/* ---- GLOBAL MOBILE TOUCH ---- */
a, button { -webkit-tap-highlight-color: transparent; }

/* ---- NAVBAR ---- */
.navbar { height: 48px; padding: 0 14px; }
.navbar .logo { font-size: 1.1rem; letter-spacing: 2px; }
.menu-btn { width: 24px; height: 16px; }
.search-wrap.open { max-width: 160px; }
.search-input { width: 150px; font-size: .82rem; padding: 5px 10px; }
.profile-btn img { width: 26px; height: 26px; }
.profile-btn-avatar { width: 26px; height: 26px; font-size: .7rem; }
.profile-settings-btn { width: 24px; height: 24px; }
.profile-settings-btn svg { width: 15px; height: 15px; }
.nav-right { gap: 10px; }

/* ---- LANDING PAGE ---- */
.landing-title { font-size: 3.2rem; }
.landing-sub { font-size: .9rem; letter-spacing: .06em; }
.landing-logo { width: 68px; height: 68px; }

/* ---- GENERIC HERO (guild boards etc.) ---- */
.hero { padding: 40px 16px 32px; }
.hero-logo { width: 80px; }
.hero h1 { font-size: 1.5rem; }
.hero-sub { font-size: .85rem; }

/* ---- GUILD CARDS ---- */
.guild-grid { grid-template-columns: 1fr; gap: 12px; }
.guild-card { padding: 20px 16px; }
.guild-card h3 { font-size: 1rem; }
.guild-card p { font-size: .82rem; margin-bottom: 12px; }
.guild-icon { font-size: 1.8rem; }

/* ---- BOARD GRID (Editor, general) ---- */
.board-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 16px; }
.board-card { border-radius: 12px; }
.board-card-img { height: 160px; }
.board-card-text { height: 160px; padding: 14px; font-size: .82rem; }
.board-card-info { padding: 10px 12px; }
.board-card-info h3 { font-size: .82rem; }
.board-card-meta { font-size: .72rem; }
.board-card-stats { font-size: .72rem; }

/* ---- ANIME GRID (explore page, old) ---- */
.anime-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ---- GENERAL LAYOUT ---- */
.structure { grid-template-columns: 1fr; }
.footer-container,
.landing-footer .footer-container { grid-template-columns: 1fr; }
.cca-phrases { flex-direction: column; align-items: center; }
.phrase-card { max-width: 100%; }

/* ---- TOAST (above bottom nav) ---- */
.toast-container { left: 12px; right: 12px; bottom: 72px; }
.toast { font-size: .82rem; padding: 12px 16px; border-radius: 12px; }

/* ---- HOMEPAGE (sg-) ---- */
.sg-hero { height: 75vh; height: 75dvh; }
.sg-hero-title { font-size: 2rem; }
.sg-hero-title span { display: block; }
.sg-hero-sub { font-size: .82rem; margin-bottom: 20px; letter-spacing: .06em; }
.sg-hero-actions { gap: 10px; }
.sg-btn-glow { padding: 14px 24px; font-size: .85rem; width: 100%; justify-content: center; min-height: 48px; }
.sg-btn-ghost { padding: 13px 20px; font-size: .82rem; width: 100%; justify-content: center; min-height: 48px; }
.sg-section { margin-top: 28px; padding: 0 16px; }
.sg-section-title { font-size: .78rem; }
/* Single column stacked flow on mobile */
.sg-flow-grid { grid-template-columns: 1fr; gap: 12px; }
.sg-flow-card:nth-child(even) { margin-top: 0; }
.sg-flow-card { border-radius: 14px; }
.sg-flow-title { font-size: .8rem; padding: 20px 12px 10px; }
/* Horizontal scroll for continue row */
.sg-continue-card { width: 220px; min-width: 220px; }
.sg-continue-skel { width: 220px; min-width: 220px; }
.sg-continue-info { padding: 12px; }
.sg-continue-info h3 { font-size: .82rem; }
.sg-mood { padding: 8px 18px; font-size: .75rem; min-height: 36px; }
.sg-spotlight-card { min-height: 160px; }
.sg-spot-content { padding: 28px 16px 22px; }
.sg-spot-avatar, .sg-spot-avatar-init { width: 48px; height: 48px; font-size: 1.1rem; }
.sg-spot-name { font-size: 1rem; }
.sg-spot-btn { padding: 10px 20px; font-size: .78rem; min-height: 40px; }
/* Horizontal scroll for recommendations */
.sg-rec-card { width: 130px; min-width: 130px; }
.sg-rec-skel { width: 130px; min-width: 130px; }
.sg-rec-body h3 { font-size: .75rem; }
.sg-cta { padding: 36px 16px 48px; }
.sg-cta-title { font-size: 1.2rem; }
/* Guild cards stacked */
.sg-guild-grid { grid-template-columns: 1fr; gap: 10px; }
.sg-guild-card { padding: 16px; min-height: 56px; }

/* ---- PROFILE PAGE (pf-) ---- */
.pf { padding: 0 0 20px; }
.pf-head { padding: 20px 16px 0; }
.pf-avatar, .pf-avatar-init { width: 80px; height: 80px; font-size: 1.8rem; }
.pf-name { font-size: 1.15rem; }
.pf-stats { gap: 24px; margin-top: 16px; }
.pf-stat { font-size: .78rem; }
.pf-stat strong { font-size: .95rem; }
.pf-actions { max-width: 280px; gap: 8px; }
.pf-btn-primary, .pf-btn-secondary { min-height: 44px; font-size: .85rem; }
/* Sticky tabs for easy switching */
.pf-tabs { margin-top: 16px; position: sticky; top: 48px; z-index: 10; background: var(--bg-page); }
.pf-tab { padding: 12px 0; font-size: .82rem; min-height: 44px; }
/* 3-column grid for denser browsing */
.pf-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.pf-item { aspect-ratio: 1/1; }

/* ---- POST VIEWER (fv-) ---- */
.fv-top { padding: 10px 12px; }
.fv-top-btn { width: 32px; height: 32px; }
.fv-top-logo { font-size: .75rem; }
.fv-actions { right: 10px; bottom: 100px; gap: 16px; }
.fv-creator-ring { width: 40px; height: 40px; }
.fv-action-btn svg { width: 22px; height: 22px; }
.fv-action-btn span { font-size: .62rem; }
.fv-info { left: 12px; right: 64px; bottom: 14px; }
.fv-info-user { font-size: .8rem; }
.fv-info-caption { font-size: .78rem; }
.fv-comments-panel { height: 70vh; }

/* ---- WRITER'S SPACE (wr-) ---- */
.wr { padding: 0 16px 72px; }
.wr-header { padding: 20px 0 16px; }
.wr-greeting-name { font-size: 1.15rem; }
.wr-new-btn { width: 38px; height: 38px; }
.wr-quote-card { padding: 18px 20px; margin-bottom: 24px; }
.wr-quote-text { font-size: .85rem; }
.wr-sec { margin-bottom: 24px; }
.wr-sec-head h2, .wr-sec-title { font-size: .82rem; }
.wr-book { width: 85px; }
.wr-pill { padding: 7px 16px; font-size: .72rem; }
.wr-feat-card { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.wr-feat-cover, .wr-feat-cover-init { width: 100%; min-width: 100%; aspect-ratio: 16/9; border-radius: 20px 20px 0 0; }
.wr-feat-body { padding: 16px; }
.wr-feat-body h3 { font-size: 1rem; }
.wr-item { padding: 12px 14px; border-radius: 14px; }
.wr-item-cover, .wr-item-init { width: 44px; height: 58px; }
.wr-item-info h3 { font-size: .82rem; }
.wf { padding: 22px 18px 20px; border-radius: 20px; }
.wf-title { font-size: 1.05rem; }
.wf-editor { font-size: .9rem; min-height: 160px; }
.wf-publish { padding: 13px 0; font-size: .88rem; border-radius: 14px; }

/* ---- EXPLORE / BROWSE (ex-) ---- */
body.explore-page .navbar { height: 48px; padding: 0 14px; }
body.explore-page .navbar .logo { font-size: 1.1rem; }
.ex-section { padding: 0 16px; margin-bottom: 32px; }
.ex-section-head { margin-bottom: 14px; }
.ex-section-title { font-size: 1.1rem; }
.ex-section-sub { font-size: .72rem; }
/* Horizontal scroll only — no grid on mobile */
.ex-scroll-row { gap: 12px; padding-right: 16px; }
.ex-card-lg { width: 138px; min-width: 138px; }
.ex-continue-card { width: 140px; min-width: 140px; }
.ex-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
.ex-grid-card { border-radius: 10px; }
.ex-grid-title { font-size: .72rem; padding: 6px 4px; }
.ex-hero { height: auto; min-height: 220px; max-height: 280px; }
.ex-hero-title { font-size: 1.2rem; }
.ex-hero-watch-btn { min-height: 40px; font-size: .8rem; padding: 9px 18px; }
.ex-hero-thumb { width: 34px; height: 20px; border-radius: 4px; }
.ex-hero-controls { top: 10px; right: 10px; gap: 6px; }
.ex-hero-ctrl { width: 32px; height: 32px; }
.ex-search-glass { height: 48px; margin: -20px 16px 0; max-width: none; }
.ex-search-glass input { font-size: .88rem; }
.ex-mood-bar { gap: 8px; padding: 0 16px; }
.ex-mood { padding: 8px 16px; font-size: .75rem; min-height: 36px; }

/* ---- WATCH PAGE (w-) ---- */
.w-controls { padding: 8px 12px; }
.w-ctrl-btn { width: 32px; height: 32px; }
.w-ctrl-label { font-size: .72rem; padding: 2px 8px; }
.w-server-btn { padding: 4px 10px; font-size: .68rem; }
.w-info { padding: 14px 12px; }
.w-info-title { font-size: .92rem; }
.w-info-poster { width: 40px; height: 56px; }
.w-ep-header { padding: 0 12px; }
.w-ep-heading { font-size: .88rem; }

/* ---- MODALS / POPUPS ---- */
.popup-box { width: 92vw !important; max-width: 400px; padding: 20px 16px; }
.popup-box h2 { font-size: 1.1rem; }
.form-group label { font-size: .82rem; }
.form-group input,
.form-group textarea,
.form-group select { font-size: .88rem; padding: 10px 12px; }
.btn-block { padding: 12px; font-size: .88rem; }
.auth-switch { font-size: .78rem; }
.guild-checkboxes { flex-direction: column; gap: 8px; }

/* ---- ADMIN ---- */
.admin-tabs { flex-wrap: wrap; gap: 4px; }
.admin-tab { padding: 8px 12px; font-size: .75rem; }
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-stats { flex-wrap: wrap; }

/* ---- OLD SECTIONS (backward compat) ---- */
.dash-guild-row { flex-direction: column; }
.post-full-content { padding: 20px 16px; }
.comments-section { padding: 16px; }

}

/* ============================================
   CLICK ANIMATIONS — site-wide interactions
   ============================================ */

/* ---- RIPPLE EFFECT ---- */
.cca-ripple-host {
position: relative;
overflow: hidden;
}
.cca-ripple {
position: absolute;
border-radius: 50%;
background: rgba(124, 58, 237, .25);
transform: scale(0);
animation: cca-ripple-expand .5s ease-out forwards;
pointer-events: none;
z-index: 1;
}
[data-theme="light"] .cca-ripple {
background: rgba(124, 58, 237, .18);
}
@keyframes cca-ripple-expand {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(4); opacity: 0; }
}

/* ---- PRESS SPRING (cards & interactive elements) ---- */
.cca-spring {
transition: transform .2s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.cca-spring:active,
.cca-spring.cca-pressing {
transform: scale(.95) !important;
}

/* ---- GLOW PULSE on click ---- */
.cca-glow-click {
position: relative;
}
.cca-glow-click::after {
content: "";
position: absolute;
inset: -4px;
border-radius: inherit;
background: transparent;
box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
transition: box-shadow .3s ease;
pointer-events: none;
z-index: 0;
}
.cca-glow-click.cca-glowing::after {
box-shadow: 0 0 16px 4px rgba(124, 58, 237, .35);
}

/* ---- SPARKLE PARTICLES ---- */
.cca-sparkle {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: cca-sparkle-fly .55s ease-out forwards;
}
.cca-sparkle-star {
position: absolute;
pointer-events: none;
z-index: 9999;
animation: cca-sparkle-fly .6s ease-out forwards;
font-size: 12px;
line-height: 1;
}
@keyframes cca-sparkle-fly {
0% { opacity: 1; transform: translate(0, 0) scale(1); }
100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

/* ---- BUTTON POP ---- */
@keyframes cca-btn-pop {
0% { transform: scale(1); }
40% { transform: scale(.92); }
100% { transform: scale(1); }
}
.cca-btn-pop {
animation: cca-btn-pop .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- SEND SWOOSH ---- */
@keyframes cca-swoosh {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(40px, -30px) scale(.3); opacity: 0; }
}
.cca-swoosh {
animation: cca-swoosh .35s ease-in forwards;
}

/* ---- NAV TAP BOUNCE ---- */
@keyframes cca-nav-bounce {
0% { transform: translateY(0); }
30% { transform: translateY(-4px); }
50% { transform: translateY(1px); }
70% { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
.cca-nav-bounce {
animation: cca-nav-bounce .4s ease;
}

/* ---- HEART BURST (for likes) ---- */
@keyframes cca-heart-burst {
0% { transform: scale(0); opacity: 1; }
50% { transform: scale(1.3); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.cca-heart-burst {
animation: cca-heart-burst .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- CARD TILT 3D ---- */
.cca-tilt {
transition: transform .15s ease-out;
transform-style: preserve-3d;
will-change: transform;
}

/* ---- PAGE TRANSITION ---- */
@keyframes cca-page-enter {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
.cca-page-enter {
animation: cca-page-enter .35s ease-out;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
.cca-ripple { animation-duration: 0.01ms !important; }
.cca-spring:active, .cca-spring.cca-pressing { transform: none !important; }
.cca-sparkle, .cca-sparkle-star { animation-duration: 0.01ms !important; }
.cca-btn-pop { animation-duration: 0.01ms !important; }
.cca-swoosh { animation-duration: 0.01ms !important; }
.cca-nav-bounce { animation-duration: 0.01ms !important; }
.cca-heart-burst { animation-duration: 0.01ms !important; }
.cca-tilt { transition-duration: 0.01ms !important; }
.cca-page-enter { animation-duration: 0.01ms !important; }
}

/* ==========================================================
   ARTISAN LESSONS — admin
   ========================================================== */

.adm-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.adm-checkbox {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; color: var(--text-muted);
    margin: 8px 0 12px;
}

.art-series-list {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 16px;
}
.art-series-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 14px; align-items: center;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.art-series-cover {
    width: 80px; height: 50px;
    border-radius: 8px;
    background: var(--bg-input) center/cover no-repeat;
}
.art-series-title { font-weight: 600; font-size: .95rem; }
.art-series-meta  { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }

.art-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    margin-top: 12px;
}
.art-edit-col {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
}
.art-cover-preview {
    margin-top: 8px;
    width: 100%; max-width: 260px;
    border-radius: 10px;
    display: block;
}

.art-lessons-list { display: flex; flex-direction: column; gap: 6px; }
.art-lesson-row {
    display: grid;
    grid-template-columns: auto 28px 1fr auto auto auto;
    gap: 8px; align-items: center;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: grab;
    font-size: .88rem;
}
.art-lesson-row.dragging { opacity: .4; }
.art-lesson-grip  { color: var(--text-faint); cursor: grab; user-select: none; }
.art-lesson-num   { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.art-lesson-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-lesson-badge {
    font-size: .7rem; padding: 2px 8px; border-radius: 10px;
    background: var(--bg-secondary); color: var(--text-muted);
}

.art-video-toggle {
    display: flex; gap: 16px; margin-bottom: 8px;
    font-size: .85rem; color: var(--text-muted);
}
.art-video-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.art-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.art-modal-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    width: 100%; max-width: 520px;
    padding: 20px;
    max-height: 90vh; overflow-y: auto;
}
.art-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.art-modal-head h3 { margin: 0; font-size: 1.1rem; }
.art-modal-foot {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px;
}

@media (max-width: 780px) {
    .art-edit-grid       { grid-template-columns: 1fr; }
    .art-series-card     { grid-template-columns: 64px 1fr; }
    .art-series-card > button { grid-column: 1 / -1; justify-self: start; }
    .art-series-cover    { width: 64px; height: 40px; }
    .adm-field-row       { grid-template-columns: 1fr; }
    .art-lesson-row      { grid-template-columns: auto 24px 1fr auto; }
    .art-lesson-row > [data-do=edit],
    .art-lesson-row > .art-lesson-badge { display: none; }
}

/* ======================================================================
   LESSON ZONE (public)
   ====================================================================== */

.lz-body { background: var(--bg-color, #0b0b10); color: var(--text-color, #f4f4f8); }
.lz { max-width: 1240px; margin: 0 auto; padding: 28px 20px 80px; }

.lz-hero { padding: 28px 0 20px; }
.lz-hero-title { font-size: 2.2rem; font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; }
.lz-hero-desc { color: var(--text-muted, #9aa0ad); margin: 0; max-width: 640px; }

.lz-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 24px; }
.lz-tab {
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-color, #2a2a35);
    background: transparent; color: var(--text-color, #f4f4f8); cursor: pointer;
    font-size: .9rem; font-weight: 600; transition: background .15s, border-color .15s;
}
.lz-tab:hover { border-color: #6f6fff; }
.lz-tab.active { background: #6f6fff; border-color: #6f6fff; color: #fff; }

.lz-section { margin: 28px 0; }
.lz-section-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; }

.lz-scroll-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: 280px;
    gap: 14px; overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: thin;
}

.lz-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.lz-card {
    display: flex; flex-direction: column; border-radius: 12px;
    background: var(--surface-color, #16161f); overflow: hidden;
    border: 1px solid var(--border-color, #2a2a35);
    color: inherit; text-decoration: none; transition: transform .15s, border-color .15s;
}
.lz-card:hover { transform: translateY(-2px); border-color: #6f6fff; }

.lz-card-cover {
    width: 100%; aspect-ratio: 16/9;
    background-size: cover; background-position: center;
    background-color: #1e1e2a;
}
.lz-card-cover-empty { background: linear-gradient(135deg, #2a2a3a, #1a1a26); }
.lz-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.lz-card-guild {
    align-self: flex-start; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 8px; border-radius: 999px; background: #2a2a3a;
}
.lz-guild-artisan { background: #d946ef22; color: #e879f9; }
.lz-guild-writer  { background: #3b82f622; color: #60a5fa; }
.lz-guild-editor  { background: #10b98122; color: #34d399; }

.lz-card-title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.lz-card-meta  { color: var(--text-muted, #9aa0ad); font-size: .82rem; }

.lz-card-lg { min-width: 280px; }

.lz-skel { min-height: 180px; position: relative; overflow: hidden; }
.lz-skel-shimmer {
    position: absolute; inset: 0; background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    animation: lz-shim 1.4s infinite;
}
@keyframes lz-shim { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }

.lz-empty { color: var(--text-muted, #9aa0ad); padding: 12px 0; }

/* ---- detail view ---- */

.lz-detail-top { margin-bottom: 14px; }
.lz-back {
    background: transparent; border: 1px solid var(--border-color, #2a2a35);
    color: inherit; padding: 6px 12px; border-radius: 8px; cursor: pointer;
    font-size: .85rem;
}
.lz-back:hover { border-color: #6f6fff; }

.lz-detail-header {
    display: grid; grid-template-columns: 280px 1fr; gap: 20px;
    margin-bottom: 24px; align-items: start;
}
.lz-detail-cover {
    aspect-ratio: 16/9; border-radius: 12px;
    background-size: cover; background-position: center; background-color: #1e1e2a;
}
.lz-detail-title { margin: 8px 0 4px; font-size: 1.6rem; font-weight: 800; }
.lz-detail-sub { color: var(--text-muted, #9aa0ad); margin: 0 0 10px; font-size: .9rem; }
.lz-detail-desc { color: var(--text-color, #f4f4f8); margin: 0; line-height: 1.5; }

.lz-detail-layout {
    display: grid; grid-template-columns: 1fr 320px; gap: 20px;
    align-items: start;
}
.lz-player {
    aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.lz-player-empty { color: var(--text-muted, #9aa0ad); font-size: .95rem; padding: 24px; }
.lz-video { width: 100%; height: 100%; display: block; border: 0; }

.lz-lesson-info { margin-top: 16px; }
.lz-lesson-heading { margin: 0 0 6px; font-size: 1.25rem; }
.lz-lesson-desc { color: var(--text-muted, #9aa0ad); margin: 0; line-height: 1.5; }

.lz-lesson-list {
    background: var(--surface-color, #16161f);
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: 12px; padding: 12px; max-height: 560px; overflow-y: auto;
}
.lz-list-title { margin: 4px 4px 10px; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #9aa0ad); }

.lz-lesson-row {
    width: 100%; display: grid; grid-template-columns: 26px 1fr auto;
    align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
    background: transparent; border: 0; color: inherit; cursor: pointer;
    text-align: left; font-size: .92rem;
}
.lz-lesson-row:hover { background: rgba(111,111,255,.1); }
.lz-lesson-row.active { background: rgba(111,111,255,.18); color: #cdd0ff; }
.lz-lesson-row.done .lz-lesson-num { background: #10b981; color: #fff; border-color: #10b981; }
.lz-lesson-num {
    width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--border-color, #2a2a35);
    font-size: .78rem; font-weight: 600;
}
.lz-lesson-title { font-weight: 500; }
.lz-lesson-dur { color: var(--text-muted, #9aa0ad); font-size: .8rem; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
    .lz-detail-header { grid-template-columns: 1fr; }
    .lz-detail-layout { grid-template-columns: 1fr; }
    .lz-lesson-list { max-height: none; }
}

/* ======================================================================
   MESSAGES — additive features (emoji tray, info panel, mobile fixes)
   Everything is scoped to .msg-page so it doesn't leak site-wide.
   ====================================================================== */

/* mobile scrolling robustness --------------------------------------- */
.msg-page { overflow: hidden; overscroll-behavior: none; }
html:has(body.msg-page) { overflow: hidden; }

/* textarea at 16px on mobile so iOS doesn't auto-zoom on focus */
@media (max-width: 760px) {
    .msg-page #chatInput { font-size: 16px; }
}

.msg-page .msg-messages {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---- emoji button + tray ----------------------------------------- */

.msg-page .msg-emoji-btn {
    background: transparent; border: 0; color: inherit;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    opacity: .7; transition: opacity .15s, background .15s;
    flex-shrink: 0;
}
.msg-page .msg-emoji-btn:hover { opacity: 1; background: rgba(255,255,255,.06); }

.msg-page .msg-emoji-wrap { position: relative; display: inline-block; }

.msg-page .msg-emoji-tray {
    position: absolute; bottom: calc(100% + 8px); left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px; padding: 8px; width: 280px; max-width: 90vw;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    z-index: 30;
    animation: msg-emoji-pop .14s ease;
}
@keyframes msg-emoji-pop {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.msg-page .msg-emoji-tray button {
    width: 30px; height: 30px; border: 0; background: transparent;
    font-size: 1.1rem; cursor: pointer; border-radius: 6px;
    transition: background .1s, transform .1s;
}
.msg-page .msg-emoji-tray button:hover {
    background: rgba(127,127,127,.12); transform: scale(1.15);
}

/* ---- info panel (off-canvas overlay, both desktop & mobile) ------- */

.msg-page #mxInfoPanel {
    position: fixed; right: 0; top: var(--header-h, 60px);
    width: 320px; max-width: 90vw;
    height: calc(100vh - var(--header-h, 60px));
    height: calc(100dvh - var(--header-h, 60px));
    background: var(--bg-page);
    color: var(--text-primary);
    border-left: 1px solid var(--border-color);
    z-index: 40; padding: 22px 18px; overflow-y: auto;
    transform: translateX(100%); transition: transform .22s ease;
    display: flex; flex-direction: column;
}
.msg-page #mxInfoPanel.mx-info-open { transform: translateX(0); }

.msg-page #mxInfoPanel .mx-info-empty {
    flex: 1; display: grid; place-items: center; text-align: center;
    color: var(--text-muted); font-size: .85rem;
}
.msg-page #mxInfoPanel .mx-info-empty-text { margin: 0; max-width: 220px; line-height: 1.5; }

.msg-page #mxInfoPanel .mx-info-body {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; position: relative;
}

.msg-page .mx-info-close {
    position: absolute; top: -8px; right: -4px;
    background: transparent; border: 0;
    color: var(--text-muted); cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.msg-page .mx-info-close:hover { background: rgba(127,127,127,.1); color: var(--text-primary); }

.msg-page .mx-info-avatar {
    width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
    background: var(--bg-card);
    display: grid; place-items: center;
    font-size: 1.8rem; font-weight: 700; margin-bottom: 8px;
}
.msg-page .mx-info-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-page .mx-info-name { margin: 0; font-size: 1.15rem; font-weight: 700; text-align: center; color: var(--text-heading); }
.msg-page .mx-info-status { color: var(--text-muted); font-size: .8rem; }
.msg-page .mx-info-profile-link {
    color: var(--link-color); font-size: .82rem; text-decoration: none;
    margin-top: 2px; padding: 5px 12px; border-radius: 999px;
    background: rgba(124,58,237,.1); transition: filter .15s;
}
.msg-page .mx-info-profile-link:hover { filter: brightness(1.15); }

.msg-page .mx-info-section {
    width: 100%; margin-top: 22px; display: flex; flex-direction: column; gap: 6px;
}
.msg-page .mx-info-section-title {
    font-size: .72rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.msg-page .mx-info-action {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px; border: 0;
    background: var(--bg-card); color: var(--text-primary);
    border-radius: 10px; cursor: pointer; font-size: .85rem;
    transition: background .14s;
}
.msg-page .mx-info-action:hover { background: rgba(124,58,237,.1); }
.msg-page .mx-info-action-danger { color: #ef4444; }
.msg-page .mx-info-action-danger:hover { background: rgba(239,68,68,.08); }

/* info-toggle button in chat header — inherits .msg-icon-btn look */
.msg-page #infoToggleBtn svg { opacity: .75; }
.msg-page #infoToggleBtn:hover svg { opacity: 1; }

/* ======================================================================
   MESSAGES — premium refresh layer (Instagram / Discord / WhatsApp feel)
   Scoped to .msg-page. Uses the site's theme variables for colors so
   light and dark themes both work correctly.
   ====================================================================== */

/* ----- hide "CCA" (site logo) on messages pages ---------------- */
.msg-page #navLogo,
.msg-page .nav-ctx-title { display: none !important; }

/* ----- layout: remove the 52px navbar reservation on mobile ----- */
@media (max-width: 760px) {
    .msg-page .msg-layout {
        margin-top: 0;
        height: 100vh;
        height: 100dvh;
    }
    .msg-page .navbar { display: none; }
}

/* ----- sidebar: cleaner, no hard borders --------------------- */
.msg-page .msg-sidebar {
    border-right-color: var(--border-color);
}
.msg-page .msg-search {
    border-radius: 12px;
}

/* ----- chat header: clean alignment, one icon on right ------- */
.msg-page .msg-chat-header {
    padding: 14px 20px;
    gap: 14px;
    border-bottom-color: var(--border-color);
    min-height: 64px;
}
.msg-page .msg-chat-avatar-inner {
    width: 40px; height: 40px;
}
.msg-page .msg-chat-user strong {
    font-size: 1rem; letter-spacing: -.01em;
}
.msg-page .msg-status { font-size: .74rem; }
.msg-page .msg-status-online::before {
    content: ""; display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e; margin-right: 6px;
    transform: translateY(-1px);
}

/* back arrow alignment */
.msg-page .msg-back-btn { margin-right: -4px; }

/* ----- messages area: more air, group spacing --------------- */
.msg-page .msg-messages {
    padding: 16px 18px 8px;
    gap: 2px;
}

/* spacing between message GROUPS — new group starts on .msg-bubble-first */
.msg-page .msg-bubble-wrap .msg-bubble-first { margin-top: 18px; }
.msg-page .msg-bubble-wrap:first-child .msg-bubble-first { margin-top: 4px; }

/* ----- bubbles: theme colors, consistent radius ------------- */
.msg-page .msg-bubble {
    max-width: 72%;
    padding: 9px 14px;
    font-size: .92rem;
    line-height: 1.45;
}

.msg-page .msg-bubble-mine,
.msg-page .msg-bubble-mine.msg-bubble-first,
.msg-page .msg-bubble-mine.msg-bubble-last,
.msg-page .msg-bubble-mine.msg-bubble-first.msg-bubble-last {
    border-radius: 18px;
}
/* subtle corner cue for last bubble in a group from me */
.msg-page .msg-bubble-wrap-mine .msg-bubble-last {
    border-bottom-right-radius: 6px;
}

.msg-page .msg-bubble-theirs,
.msg-page .msg-bubble-theirs.msg-bubble-first,
.msg-page .msg-bubble-theirs.msg-bubble-last,
.msg-page .msg-bubble-theirs.msg-bubble-first.msg-bubble-last {
    border-radius: 18px;
}
.msg-page .msg-bubble-wrap-theirs .msg-bubble-last {
    border-bottom-left-radius: 6px;
}

/* timestamps: subtle, small */
.msg-page .msg-bubble-time {
    font-size: .68rem;
    opacity: .55;
}

/* ----- reply banner: tighter padding ------------------------- */
.msg-page .msg-reply-banner {
    padding: 10px 20px;
}

/* ----- input area: more padding ------------------------------ */
.msg-page .msg-input-area {
    padding: 12px 16px 16px;
    gap: 6px;
    align-items: center;
}

/* order: emoji → field → mic/send. Hide the share button visually. */
.msg-page .msg-emoji-wrap { order: 1; }
.msg-page .msg-input       { order: 2; }
.msg-page .msg-attach-btn  { display: none !important; }
.msg-page .msg-voice-btn,
.msg-page .msg-send-btn    { order: 3; }

.msg-page .msg-input {
    border-radius: 22px;
    padding: 11px 18px;
    font-size: 16px;  /* prevents iOS zoom; desktop breakpoint below overrides */
    min-height: 44px;
}
@media (min-width: 761px) {
    .msg-page .msg-input { font-size: .92rem; }
}

/* mic ↔ send toggle based on whether the textarea has content.
   JS flips .has-text on .msg-input-area when value length > 0. */
.msg-page .msg-input-area .msg-voice-btn  { display: flex; }
.msg-page .msg-input-area .msg-send-btn   { display: none; }
.msg-page .msg-input-area.has-text .msg-voice-btn { display: none; }
.msg-page .msg-input-area.has-text .msg-send-btn  { display: flex; }

/* ----- info panel: minimal (avatar + name + 2 buttons) ------- */
.msg-page #mxInfoPanel {
    padding: 24px 20px;
    background: var(--bg-page);
    color: var(--text-primary);
    border-left-color: var(--border-color);
}

/* shrink the heavy ring around the avatar and the image size */
.msg-page .mx-info-avatar {
    width: 68px; height: 68px;
    box-shadow: none;
    margin-bottom: 6px;
    font-size: 1.4rem;
    background: var(--bg-card);
}
.msg-page .mx-info-name { font-size: 1rem; color: var(--text-heading); }
.msg-page .mx-info-status { font-size: .78rem; color: var(--text-muted); }
.msg-page .mx-info-profile-link { display: none; }  /* remove extra pill */
.msg-page .mx-info-section-title { display: none; }  /* remove heading line */
.msg-page .mx-info-section { margin-top: 20px; gap: 8px; }

/* remove the info panel entirely on mobile */
@media (max-width: 760px) {
    .msg-page #mxInfoPanel { display: none !important; }
    .msg-page #infoToggleBtn { display: none !important; }
}

/* ----- chat transition: slide when switching conversations --- */
.msg-page .msg-chat {
    background: transparent;
}
.msg-page .msg-chat-entering {
    animation: msg-chat-slide .22s ease;
    opacity: 1;
}
@keyframes msg-chat-slide {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ----- emoji tray: tuned to match palette -------------------- */
.msg-page .msg-emoji-tray {
    background: #1a1c26;
    border-color: rgba(255,255,255,.06);
}

/* ======================================================================
   AVATAR CROPPER — shown when a user picks a profile picture file.
   Pan / pinch / wheel to adjust, circular preview, export to JPEG blob.
   ====================================================================== */

.avc-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: avc-fade .15s ease;
}
@keyframes avc-fade { from { opacity: 0 } to { opacity: 1 } }

.avc-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 14px;
    width: min(420px, 100%);
    max-height: 96vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    animation: avc-pop .18s ease;
}
@keyframes avc-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.avc-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
}
.avc-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }

.avc-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: #000;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.avc-stage.avc-dragging { cursor: grabbing; }

/* The image sits absolute and is transformed by JS */
.avc-img {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: center center;
    max-width: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Circular mask overlay — semi-transparent everywhere except the circle */
.avc-mask {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center,
            transparent 0,
            transparent calc(50% - 1px),
            rgba(0, 0, 0, .55) calc(50% - 1px),
            rgba(0, 0, 0, .55) 100%);
}
.avc-ring {
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .8) inset;
    pointer-events: none;
}

.avc-controls {
    padding: 12px 18px;
    display: flex; align-items: center; gap: 12px;
    border-top: 1px solid var(--border-color);
}
.avc-zoom-icon {
    color: var(--text-muted);
    display: inline-flex;
    flex-shrink: 0;
}
.avc-zoom {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 999px;
    outline: none;
}
.avc-zoom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--link-color);
    cursor: pointer;
    border: 0;
}
.avc-zoom::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--link-color);
    cursor: pointer;
    border: 0;
}

.avc-foot {
    padding: 12px 18px 16px;
    display: flex; justify-content: flex-end; gap: 8px;
    border-top: 1px solid var(--border-color);
}
.avc-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: 0;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, background .15s;
}
.avc-btn-cancel {
    background: transparent;
    color: var(--text-muted);
}
.avc-btn-cancel:hover { color: var(--text-primary); }
.avc-btn-save {
    background: var(--link-color);
    color: #fff;
}
.avc-btn-save:hover { filter: brightness(1.1); }
.avc-btn-save:disabled { opacity: .6; cursor: wait; }

/* ======================================================================
   ACCESS GATE — shown over anime player and lesson player for guests.
   Lives inside the existing player container and fills it.
   ====================================================================== */

.access-gate {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at center, rgba(0,0,0,.35), rgba(0,0,0,.7)),
        var(--bg-card);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 5;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* lesson player has position:relative, but watch.php player-slot may not */
.w-player-ratio { position: relative; }
.lz-player { position: relative; }

.access-gate-card {
    max-width: 380px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.access-gate-card svg { opacity: .85; margin-bottom: 2px; }
.access-gate-card h3 {
    margin: 4px 0 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.access-gate-card p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
}
.access-gate-card strong { color: #fff; }

.access-gate-btns {
    display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
    justify-content: center;
}
.access-gate-primary, .access-gate-secondary {
    padding: 10px 18px;
    border-radius: 8px;
    border: 0;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, background .15s;
}
.access-gate-primary {
    background: var(--link-color, #7c3aed);
    color: #fff;
}
.access-gate-primary:hover { filter: brightness(1.1); }
.access-gate-secondary {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.access-gate-secondary:hover { background: rgba(255, 255, 255, .2); }

/* ============================================================
   Lesson Zone — Premium design layer (lz2-*)
   Palette: bg = --bg-page, surface = --bg-card, accent = --link-color
   Radius: 12px everywhere. No heavy borders. No glow.
   ============================================================ */

:root {
    --lz2-radius: 12px;
    --lz2-radius-sm: 8px;
    --lz2-surface: var(--bg-card);
    --lz2-surface-2: var(--bg-elevated);
    --lz2-accent: var(--link-color);
    --lz2-text: var(--text-primary);
    --lz2-dim: var(--text-muted);
    --lz2-line: rgba(255,255,255,.06);
    --lz2-ease: cubic-bezier(.2,.8,.2,1);
}

/* anime background: subtle noise + optional blurred wallpaper */
.lz-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.lz-bg-noise {
    position: absolute; inset: 0; opacity: .04;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.lz-bg-wallpaper {
    position: absolute; inset: -40px; background-size: cover; background-position: center;
    filter: blur(40px) saturate(1.1); opacity: 0; transition: opacity 400ms var(--lz2-ease);
}
.lz-bg-wallpaper.on { opacity: .08; }

.lz-body .lz { position: relative; z-index: 1; }

/* sticky top bar */
.lz2-topbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 16px;
    background: rgba(11,11,25,.82); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.lz2-topbar .lz-back {
    background: transparent; border: 0;
    color: var(--text-secondary);
    font-size: .9rem; padding: 6px 10px;
    border-radius: var(--lz2-radius-sm);
    transition: background 160ms var(--lz2-ease);
}
.lz2-topbar .lz-back:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
.lz2-topbar-title {
    flex: 1; min-width: 0;
    font-weight: 600; font-size: 1rem; color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz2-topbar-pct {
    font-variant-numeric: tabular-nums;
    font-size: .85rem; font-weight: 600;
    color: var(--lz2-accent);
}
.lz2-progress-rail {
    position: sticky; top: 52px; z-index: 4;
    height: 3px; background: rgba(255,255,255,.04);
    overflow: hidden;
}
.lz2-progress-fill {
    height: 100%; width: 0;
    background: var(--lz2-accent);
    transition: width 400ms var(--lz2-ease);
}

/* detail header — kept lean */
.lz-detail-header { padding: 24px 16px 8px; position: relative; z-index: 1; }
.lz-detail-meta { max-width: 840px; margin: 0 auto; }

.lz2-mentor-chip {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 6px 12px 6px 6px;
    background: var(--lz2-surface); border-radius: 999px;
    font-size: .85rem; color: var(--text-secondary);
}
.lz2-mentor-chip img {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
}
.lz2-mentor-chip-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--lz2-accent), #ff8fd1);
}

.lz-detail-chips {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 12px;
}
.lz-detail-chips .lz2-mentor-chip { margin-top: 0; }
.lz-detail-tree {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: .85rem; font-weight: 600;
    transition: border-color .2s, color .2s, background .2s;
}
.lz-detail-tree:hover {
    border-color: var(--lz2-accent, #a78bfa);
    color: var(--lz2-accent, #a78bfa);
    background: color-mix(in srgb, var(--lz2-accent, #a78bfa) 10%, transparent);
}

/* ----------------- DASHBOARD ----------------- */

.lz2-dashboard {
    max-width: 840px; margin: 0 auto; padding: 8px 16px 64px;
    display: flex; flex-direction: column; gap: 32px;
}

.lz2-continue-card {
    display: block; width: 100%;
    background: var(--lz2-surface);
    border: 0;
    border-radius: var(--lz2-radius);
    padding: 24px;
    text-align: left; color: var(--lz2-text);
    cursor: default;
    transition: transform 160ms var(--lz2-ease), background 160ms var(--lz2-ease);
}
.lz2-continue-click { cursor: pointer; }
.lz2-continue-click:hover {
    transform: translateY(-1px);
    background: var(--lz2-surface-2);
}
.lz2-continue-click:active { transform: scale(.99); }
.lz2-continue-eyebrow {
    font-size: .75rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--lz2-accent); margin-bottom: 8px;
}
.lz2-continue-title {
    font-size: 1.5rem; font-weight: 700; line-height: 1.2;
    color: var(--text-heading);
}
.lz2-continue-module {
    font-size: .85rem; color: var(--lz2-dim); margin-top: 4px;
}
.lz2-continue-sub {
    font-size: .9rem; color: var(--text-secondary); margin-top: 12px;
}
.lz2-continue-cta {
    margin-top: 24px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    background: var(--lz2-accent); color: #fff;
    border-radius: var(--lz2-radius-sm);
    font-weight: 600; font-size: .9rem;
}
.lz2-continue-done { background: var(--lz2-surface); }
.lz2-continue-done .lz2-continue-eyebrow { color: var(--text-secondary); }

/* lesson path */
.lz2-path {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    position: relative;
}
.lz2-path::before {
    content: ""; position: absolute;
    left: 19px; top: 8px; bottom: 8px; width: 2px;
    background: var(--lz2-line);
}
.lz2-path-module {
    font-size: .75rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--lz2-dim);
    padding: 16px 0 8px 52px;
}
.lz2-path-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px 12px 0;
    margin-left: 0;
    position: relative;
    transition: background 160ms var(--lz2-ease);
    border-radius: var(--lz2-radius);
}
.lz2-path-item:hover { background: rgba(255,255,255,.02); }
.lz2-path-dot {
    flex: 0 0 14px; width: 14px; height: 14px;
    margin-left: 13px;
    border-radius: 50%;
    background: var(--lz2-surface-2);
    position: relative; z-index: 1;
    transition: all 200ms var(--lz2-ease);
}
.lz2-path-completed .lz2-path-dot {
    background: var(--lz2-accent);
}
.lz2-path-current .lz2-path-dot {
    background: var(--lz2-accent);
    box-shadow: 0 0 0 4px rgba(167,139,250,.18);
}
.lz2-path-locked .lz2-path-dot {
    background: var(--lz2-surface);
    opacity: .7;
}
.lz2-path-body {
    flex: 1; min-width: 0;
    padding-left: 16px;
}
.lz2-path-day {
    font-size: .72rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--lz2-dim);
}
.lz2-path-title {
    font-weight: 600; color: var(--text-heading);
    font-size: 1rem; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz2-path-meta {
    font-size: .8rem; color: var(--lz2-dim); margin-top: 2px;
}
.lz2-path-icon {
    flex: 0 0 auto;
    color: var(--lz2-dim);
    font-size: 1rem;
}
.lz2-path-completed .lz2-path-icon { color: var(--lz2-accent); }
.lz2-path-current   .lz2-path-icon { color: var(--lz2-accent); }
.lz2-path-locked    .lz2-path-title,
.lz2-path-locked    .lz2-path-day { color: var(--lz2-dim); }

/* ----------------- PLAYER SHELL ----------------- */

.lz2-player-shell {
    max-width: 1200px; margin: 0 auto;
    padding: 16px 16px 64px;
    display: grid; gap: 24px;
    grid-template-columns: minmax(0, 1fr) 300px;
}
.lz2-player-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.lz2-player {
    position: relative; width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--lz2-radius);
    overflow: hidden;
}
.lz2-video {
    width: 100%; height: 100%;
    display: block;
    border: 0;
}

/* mentor bubble (player) */
.lz2-mentor {
    display: flex; align-items: center; gap: 12px;
    background: var(--lz2-surface);
    padding: 12px 16px;
    border-radius: var(--lz2-radius);
}
.lz2-mentor-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
}
.lz2-mentor-avatar-empty {
    background: linear-gradient(135deg, var(--lz2-accent), #ff8fd1);
}
.lz2-mentor-body { min-width: 0; }
.lz2-mentor-name {
    font-size: .75rem; font-weight: 600; color: var(--lz2-accent);
    letter-spacing: .06em; text-transform: uppercase;
}
.lz2-mentor-msg {
    font-size: .92rem; color: var(--text-secondary);
    margin-top: 2px;
}

/* lesson meta */
.lz2-lesson-meta { padding: 4px 0; }
.lz2-lesson-eyebrow {
    font-size: .72rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--lz2-dim);
}
.lz2-lesson-title {
    font-size: 1.5rem; font-weight: 700; margin: 4px 0 4px;
    color: var(--text-heading);
}
.lz2-lesson-desc {
    color: var(--text-secondary); font-size: .95rem;
}

/* tabs */
.lz2-tabs {
    display: inline-flex; gap: 2px;
    background: var(--lz2-surface);
    padding: 4px;
    border-radius: var(--lz2-radius-sm);
    margin-top: 8px;
}
.lz2-tab {
    background: transparent; border: 0;
    color: var(--lz2-dim);
    font-size: .88rem; font-weight: 600;
    padding: 8px 16px;
    border-radius: calc(var(--lz2-radius-sm) - 2px);
    transition: background 160ms var(--lz2-ease), color 160ms var(--lz2-ease);
}
.lz2-tab:hover { color: var(--text-primary); }
.lz2-tab.active {
    background: var(--lz2-surface-2);
    color: var(--text-heading);
}

/* panes */
.lz2-pane {
    background: var(--lz2-surface);
    border-radius: var(--lz2-radius);
    padding: 20px;
    min-height: 160px;
}
.lz2-notes-admin {
    color: var(--text-secondary); font-size: .95rem; line-height: 1.6;
    margin-bottom: 16px;
}
.lz2-notes-admin h1,
.lz2-notes-admin h2,
.lz2-notes-admin h3 { color: var(--text-heading); margin: 12px 0 8px; }
.lz2-notes-admin ul { padding-left: 20px; margin: 8px 0; list-style: disc; }
.lz2-notes-admin li { margin: 4px 0; }
.lz2-notes-admin code {
    background: var(--bg-input);
    padding: 1px 6px; border-radius: 4px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .85em;
}
.lz2-notes-admin pre {
    background: var(--bg-input);
    padding: 12px; border-radius: var(--lz2-radius-sm);
    overflow-x: auto;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .85em;
}
.lz2-notes-admin pre code { background: transparent; padding: 0; }
.lz2-notes-admin p { margin: 8px 0; }
.lz2-notes-admin a { color: var(--lz2-accent); }

.lz2-notes-input {
    width: 100%; min-height: 140px;
    background: var(--bg-input);
    border: 0;
    border-radius: var(--lz2-radius-sm);
    padding: 12px;
    color: var(--text-primary);
    font-size: .92rem; font-family: inherit;
    resize: vertical;
    transition: background 160ms var(--lz2-ease);
}
.lz2-notes-input:focus {
    outline: 2px solid var(--lz2-accent);
    outline-offset: -2px;
}
.lz2-save-status {
    font-size: .75rem; color: var(--lz2-dim);
    min-height: 1em;
}

.lz2-notes-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.lz2-notes-improve {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    color: #0b0b19;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    border: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(124,58,237,.3);
    transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 140ms ease;
}
.lz2-notes-improve:hover  { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.45); }
.lz2-notes-improve:active { transform: scale(.96); }

/* tasks */
.lz2-tasks { display: flex; flex-direction: column; gap: 12px; }
.lz2-task {
    background: var(--bg-input);
    border-radius: var(--lz2-radius-sm);
    padding: 12px 16px;
}
.lz2-task-prompt {
    display: block;
    font-size: .92rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.lz2-task-req { color: var(--lz2-accent); }
.lz2-task-input {
    width: 100%;
    background: var(--bg-page);
    border: 0;
    border-radius: var(--lz2-radius-sm);
    padding: 10px;
    color: var(--text-primary);
    font-family: inherit; font-size: .9rem;
    resize: vertical;
}
.lz2-task-input:focus { outline: 2px solid var(--lz2-accent); outline-offset: -2px; }
.lz2-task-checkbox {
    display: flex; align-items: flex-start; gap: 12px;
    cursor: pointer;
}
.lz2-task-checkbox input {
    margin-top: 2px; accent-color: var(--lz2-accent);
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.lz2-task-checkbox span {
    color: var(--text-primary); font-size: .92rem;
    line-height: 1.5;
}

/* complete button */
.lz2-complete-wrap { display: flex; justify-content: flex-end; margin-top: 8px; }
.lz2-complete-btn {
    background: var(--lz2-accent); color: #fff;
    border: 0; border-radius: var(--lz2-radius-sm);
    padding: 12px 24px;
    font-weight: 600; font-size: .95rem;
    transition: transform 160ms var(--lz2-ease), filter 160ms var(--lz2-ease);
}
.lz2-complete-btn:hover:not(:disabled) {
    transform: translateY(-1px); filter: brightness(1.08);
}
.lz2-complete-btn:active:not(:disabled) { transform: scale(.98); }
.lz2-complete-btn:disabled {
    background: var(--lz2-surface-2); color: var(--lz2-dim);
    cursor: not-allowed;
}
.lz2-complete-done {
    background: transparent !important;
    color: var(--lz2-accent) !important;
    box-shadow: inset 0 0 0 1px var(--lz2-accent);
}

/* sidebar */
.lz2-sidebar {
    background: var(--lz2-surface);
    border-radius: var(--lz2-radius);
    padding: 16px 12px;
    height: fit-content;
    position: sticky; top: 72px;
    transition: max-width 200ms var(--lz2-ease);
}
.lz2-sidebar .lz-list-title {
    font-size: .78rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--lz2-dim); margin: 0 4px 8px;
}
.lz2-sidebar-toggle {
    float: right;
    background: transparent; border: 0;
    color: var(--lz2-dim); font-size: 1rem;
    padding: 2px 8px; cursor: pointer;
    border-radius: 6px;
}
.lz2-sidebar-toggle:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
.lz2-sidebar.collapsed .lz2-sidebar-body,
.lz2-sidebar.collapsed .lz-list-title { display: none; }

.lz2-sidebar-body { display: flex; flex-direction: column; gap: 2px; }
.lz2-side-row {
    display: flex; align-items: center; gap: 10px;
    background: transparent; border: 0;
    width: 100%; padding: 10px 12px;
    color: var(--text-primary);
    border-radius: var(--lz2-radius-sm);
    text-align: left; font-size: .9rem;
    cursor: pointer;
    transition: background 160ms var(--lz2-ease);
}
.lz2-side-row:hover:not(:disabled) { background: var(--lz2-surface-2); }
.lz2-side-row:disabled { cursor: not-allowed; color: var(--lz2-dim); }
.lz2-side-row.is-current { background: rgba(167,139,250,.12); color: var(--text-heading); }
.lz2-side-num {
    width: 24px; flex-shrink: 0;
    font-size: .78rem; color: var(--lz2-dim);
    font-variant-numeric: tabular-nums;
}
.lz2-side-title {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz2-side-completed .lz2-side-title { color: var(--lz2-dim); }
.lz2-side-locked    .lz2-side-title { color: var(--lz2-dim); }
.lz2-side-icon { color: var(--lz2-accent); flex-shrink: 0; }
.lz2-side-completed .lz2-side-icon { color: var(--lz2-accent); }
.lz2-side-locked    .lz2-side-icon { color: var(--text-faint); }

/* ----------------- ADMIN TASK REPEATER ----------------- */
.lz-admin-tasks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.lz-admin-task-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; background: var(--bg-input);
    border-radius: var(--lz2-radius-sm);
}
.lz-admin-task-row .lz-task-prompt { flex: 1; min-width: 0; }
.lz-admin-task-row .lz-task-required { margin: 0; white-space: nowrap; }

/* ----------------- MOBILE ----------------- */

@media (max-width: 960px) {
    .lz2-player-shell {
        grid-template-columns: 1fr;
        padding: 12px 12px 80px;
        gap: 16px;
    }
    .lz2-sidebar {
        position: static;
        order: 99;
        padding: 12px;
    }
    .lz2-sidebar-toggle { display: none; }
    .lz2-dashboard { padding: 8px 12px 64px; gap: 24px; }
    .lz2-continue-title { font-size: 1.25rem; }
    .lz2-lesson-title { font-size: 1.2rem; }
}

@media (max-width: 600px) {
    .lz2-topbar-title { font-size: .9rem; }
    .lz2-pane { padding: 16px; }
    .lz2-complete-wrap { justify-content: stretch; }
    .lz2-complete-btn { width: 100%; }
}

/* ============================================================
   Lesson Zone — Hub (premium landing) — lz-hub-*
   Palette: dark gradient + soft purple accent (--link-color)
   ============================================================ */

.lz-hub {
    max-width: 1160px;
    margin: 0 auto;
    padding: 16px 20px 96px;
    position: relative;
    z-index: 1;
}

/* subtle top gradient wash over the page */
.lz-body::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(1000px 600px at 15% -10%, rgba(167,139,250,.14), transparent 60%),
        radial-gradient(800px 500px at 90% 8%, rgba(255,143,209,.10), transparent 60%),
        linear-gradient(180deg, rgba(167,139,250,.04), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* ---- hero ---- */
.lz-hub-hero {
    display: flex; flex-wrap: wrap;
    gap: 24px; align-items: flex-end; justify-content: space-between;
    padding: 40px 8px 16px;
}
.lz-hub-hero-text { max-width: 620px; }
.lz-hub-eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--link-color);
    background: rgba(167,139,250,.10);
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.lz-hub-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    background: linear-gradient(180deg, var(--text-heading), var(--text-secondary));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lz-hub-subtitle {
    font-size: 1.02rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 52ch;
    line-height: 1.55;
}
.lz-hub-hero-cta:empty { display: none; }
.lz-hub-hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: var(--link-color); color: #fff !important;
    border-radius: 12px;
    font-weight: 700; font-size: .95rem;
    letter-spacing: .01em;
    box-shadow: 0 6px 20px rgba(167,139,250,.24);
    transition: transform 160ms var(--ease-out, ease-out), filter 160ms ease;
}
.lz-hub-hero-btn:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.lz-hub-hero-btn:active { transform: scale(.98); }

/* ---- sections ---- */
.lz-hub-section,
.lz-hub-continue-sec {
    margin-top: 32px;
}
.lz-hub-section-title {
    font-size: 1.1rem; font-weight: 600;
    color: var(--text-heading);
    margin: 0 0 12px 2px;
    letter-spacing: -0.005em;
}

/* ---- Continue Learning hero card ---- */
.lz-hub-continue-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(167,139,250,.22), rgba(255,143,209,.10)),
        var(--bg-card);
    padding: 24px 28px;
    border-radius: 18px;
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1),
                box-shadow 200ms ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.lz-hub-continue-card::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(600px 220px at 12% 0%, rgba(167,139,250,.22), transparent 70%);
    pointer-events: none;
}
.lz-hub-continue-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(167,139,250,.18);
    color: var(--text-primary);
}
.lz-hub-continue-glyph {
    width: 64px; height: 64px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    position: relative; z-index: 1;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(167,139,250,.28);
}
.lz-hub-continue-glyph svg { width: 32px; height: 32px; }
.lz-hub-continue-body { min-width: 0; position: relative; z-index: 1; }
.lz-hub-continue-eyebrow {
    font-size: .70rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--link-color);
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-hub-continue-course {
    font-size: 1.45rem; font-weight: 800;
    color: var(--text-heading);
    line-height: 1.15; letter-spacing: -0.01em;
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-hub-continue-lesson {
    font-size: .88rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-hub-continue-lesson-label {
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: .02em;
    font-size: .78rem;
    text-transform: uppercase;
    margin-right: 6px;
}
.lz-hub-continue-bar {
    display: flex; align-items: center; gap: 10px;
    max-width: 420px;
}
.lz-hub-continue-bar-rail {
    flex: 1; height: 6px;
    background: rgba(255,255,255,.10);
    border-radius: 999px; overflow: hidden;
}
.lz-hub-continue-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--link-color), #ff8fd1);
    border-radius: 999px;
    transition: width 400ms cubic-bezier(.2,.8,.2,1);
}
.lz-hub-continue-bar-pct {
    font-size: .78rem; font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
}
.lz-hub-continue-cta {
    flex-shrink: 0;
    position: relative; z-index: 1;
}
.lz-hub-continue-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: var(--link-color); color: #fff;
    border-radius: 12px;
    font-weight: 700; font-size: .95rem;
    letter-spacing: .01em;
    box-shadow: 0 8px 24px rgba(167,139,250,.32);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 200ms ease;
}
.lz-hub-continue-card:hover .lz-hub-continue-cta-btn {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 12px 30px rgba(167,139,250,.48);
}
.lz-hub-continue-card:active { transform: scale(.995); }

/* ---- Guild filter pills ---- */
.lz-hub-filters {
    display: flex; gap: 8px;
    padding: 6px;
    margin: 28px 0 0;
    background: rgba(255,255,255,.03);
    border-radius: 999px;
    width: fit-content;
}
.lz-pill {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: .9rem; font-weight: 600;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, transform 160ms ease;
}
.lz-pill:hover { color: var(--text-heading); background: rgba(255,255,255,.04); }
.lz-pill.active {
    background: var(--link-color);
    color: #fff;
    box-shadow: 0 4px 14px rgba(167,139,250,.28);
}
.lz-pill:active { transform: scale(.97); }

/* ---- Featured horizontal row ---- */
.lz-hub-feat-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.lz-hub-feat-row > .lz-hub-card { scroll-snap-align: start; }

/* ---- Course grid ---- */
.lz-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ---- Card ---- */
.lz-hub-card {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 200ms var(--ease-out, ease-out),
                background 200ms ease,
                box-shadow 200ms ease;
}
.lz-hub-card:hover {
    transform: translateY(-3px);
    background: var(--bg-elevated);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    color: var(--text-primary);
}
.lz-hub-card:active { transform: scale(.99); }
.lz-hub-card-feat {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
}

.lz-hub-card-cover {
    aspect-ratio: 16 / 9;
    background: var(--bg-elevated);
    background-size: cover; background-position: center;
    position: relative;
}
.lz-hub-card-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35));
    pointer-events: none;
}
.lz-hub-card-cover-empty {
    background:
        radial-gradient(300px 120px at 0% 0%, rgba(167,139,250,.26), transparent 60%),
        radial-gradient(300px 120px at 100% 100%, rgba(255,143,209,.22), transparent 60%),
        var(--bg-elevated);
    display: flex; align-items: center; justify-content: center;
}
.lz-hub-card-cover-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    opacity: .96;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.lz-hub-card-cover-glyph svg { width: 32px; height: 32px; }

.lz-hub-card-body {
    padding: 16px 18px 18px;
    display: flex; flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.lz-hub-card-guild {
    align-self: flex-start;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.lz-guild-artisan { color: #7dd3fc; background: rgba(125,211,252,.10); }
.lz-guild-writer  { color: #fbbf24; background: rgba(251,191,36,.10); }
.lz-guild-editor  { color: #f472b6; background: rgba(244,114,182,.10); }
.lz-guild-artisan-bg { background: linear-gradient(135deg,#7dd3fc,#60a5fa); color: #fff; }
.lz-guild-writer-bg  { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #fff; }
.lz-guild-editor-bg  { background: linear-gradient(135deg,#f472b6,#c084fc); color: #fff; }
.lz-hub-card-cover-glyph {
    width: 64px; height: 64px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    opacity: .92;
}

.lz-hub-card-title {
    font-size: 1.08rem; font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
    margin: 0;
}
.lz-hub-card-desc {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 2px 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lz-hub-card-meta {
    font-size: .78rem;
    color: var(--text-faint);
}
.lz-hub-card-progress {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px;
}
.lz-hub-card-progress-rail {
    flex: 1; height: 4px;
    background: rgba(255,255,255,.06);
    border-radius: 999px; overflow: hidden;
}
.lz-hub-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--link-color), #ff8fd1);
    border-radius: 999px;
    transition: width 400ms var(--ease-out, ease-out);
}
.lz-hub-card-progress-pct {
    font-size: .72rem; font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.lz-hub-card-cta {
    margin-top: 12px;
    display: flex; justify-content: flex-end;
}
.lz-hub-card-cta-label {
    font-weight: 600; font-size: .85rem;
    padding: 8px 16px;
    border-radius: 10px;
    transition: background 160ms ease;
}
.lz-hub-card-cta-start    { background: var(--link-color); color: #fff; }
.lz-hub-card-cta-continue { background: var(--link-color); color: #fff; }
.lz-hub-card-cta-complete { background: rgba(255,255,255,.06); color: var(--text-secondary); }
.lz-hub-card:hover .lz-hub-card-cta-start,
.lz-hub-card:hover .lz-hub-card-cta-continue { filter: brightness(1.1); }

/* ---- skeleton (reuse existing shimmer if any) ---- */
.lz-hub-card.lz-skel {
    aspect-ratio: 3 / 4;
    position: relative; overflow: hidden;
    background: var(--bg-card);
}
.lz-hub-card.lz-skel .lz-skel-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
    animation: lz-shimmer 1.6s infinite;
}
@keyframes lz-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---- Empty state ---- */
.lz-hub-empty {
    display: flex; justify-content: center;
    padding: 24px 0;
}
.lz-hub-empty-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 420px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.lz-hub-empty-card::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(400px 180px at 50% 0%, rgba(167,139,250,.14), transparent 70%);
    pointer-events: none;
}
.lz-hub-empty-ill {
    position: relative;
    margin-bottom: 8px;
    filter: drop-shadow(0 10px 24px rgba(167,139,250,.22));
}
.lz-hub-empty-title {
    font-size: 1.2rem; font-weight: 700;
    color: var(--text-heading);
    margin: 4px 0 6px;
}
.lz-hub-empty-sub {
    font-size: .92rem;
    color: var(--text-muted);
    margin: 0 0 20px;
    line-height: 1.5;
}
.lz-hub-empty-btn {
    background: var(--link-color);
    color: #fff;
    border: 0;
    padding: 10px 22px;
    font-size: .92rem; font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}
.lz-hub-empty-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* ---- Mobile ---- */
@media (max-width: 720px) {
    .lz-hub { padding: 12px 14px 96px; }
    .lz-hub-hero { padding: 24px 4px 8px; gap: 16px; }
    .lz-hub-hero-btn { width: 100%; justify-content: center; }
    .lz-hub-hero-cta { width: 100%; }
    .lz-hub-filters {
        width: auto;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 4px;
        scrollbar-width: none;
    }
    .lz-hub-filters::-webkit-scrollbar { display: none; }
    .lz-pill { flex-shrink: 0; padding: 8px 14px; font-size: .85rem; }
    .lz-hub-grid { grid-template-columns: 1fr; gap: 14px; }
    .lz-hub-card-title { font-size: 1rem; }
    .lz-hub-continue-card {
        flex-direction: column; align-items: stretch; gap: 14px;
        padding: 18px;
    }
    .lz-hub-continue-action { text-align: center; }
    .lz-hub-feat-row { grid-auto-columns: minmax(240px, 85%); }
}

/* ============================================================
   SITE-WIDE PREMIUM POLISH (cca-polish)
   Additive — inherited by every page. No existing class is
   renamed; existing layout is preserved. Only visual chrome
   (backgrounds, shadows, radii, hover states) is refined.
   ============================================================ */

/* ---- 1. Ambient page wash ----------------------------------
   Soft purple / pink radial glow behind every page. Stays behind
   all content via z-index:-1 — does not intercept clicks or cover
   any existing background. Pages that want full opacity cover
   (e.g. watch.php full-screen player) already set their own solid
   backgrounds on top which naturally occlude the wash. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1100px 600px at 12% -10%, rgba(167,139,250,.10), transparent 62%),
        radial-gradient(900px 520px at 92% 6%, rgba(255,143,209,.07), transparent 62%),
        linear-gradient(180deg, rgba(167,139,250,.025), transparent 38%);
    pointer-events: none;
    z-index: -1;
}
[data-theme="light"] body::before {
    background:
        radial-gradient(1100px 600px at 12% -10%, rgba(124,58,237,.06), transparent 62%),
        radial-gradient(900px 520px at 92% 6%, rgba(236,72,153,.04), transparent 62%);
}
/* watch page and landing often have own bg; keep wash but don't overpower */
body.watch-page::before { opacity: .35; }

/* ---- 2. Navbar — clearer glass ----------------------------- */
.navbar {
    background: rgba(11,11,25,.70);
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    border-bottom: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.18);
}
[data-theme="light"] .navbar {
    background: rgba(255,255,255,.78);
    border-bottom: 1px solid rgba(20,20,40,.06);
    box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 6px 20px rgba(40,20,80,.06);
}

/* ---- 3. Sidebar — softer separators + active state -------- */
.sb-link, .sb-sub {
    transition: background 180ms ease, color 180ms ease, transform 140ms ease;
    border-radius: 10px;
}
.sb-link:hover { transform: translateX(2px); }
.sb-link.sb-active,
.sb-sub.sb-active {
    background: linear-gradient(90deg, rgba(167,139,250,.18), rgba(167,139,250,.04));
    color: var(--link-color) !important;
    box-shadow: inset 2px 0 0 var(--link-color);
}
.sb-group-title { border-radius: 10px; transition: background 180ms ease; }
.sb-group-title:hover { background: rgba(255,255,255,.03); }
.sb-user {
    transition: background 180ms ease;
    border-radius: 12px;
}
.sb-user:hover { background: rgba(167,139,250,.08); }

/* ---- 4. Buttons — subtle lift & refined shadow ------------ */
.btn {
    transition: background .25s, transform .18s, box-shadow .25s, filter .18s;
    letter-spacing: .005em;
}
.btn-primary {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow: 0 6px 18px rgba(124,58,237,.30);
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 24px rgba(124,58,237,.40);
}
.btn-outline {
    border-color: rgba(167,139,250,.55);
    transition: background .2s, color .2s, transform .18s, border-color .2s;
}
.btn-outline:hover { transform: translateY(-1px); }

/* ---- 5. Form controls — consistent purple focus ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
textarea:focus, select:focus {
    outline: 2px solid var(--link-color);
    outline-offset: -2px;
}
input[type=checkbox], input[type=radio] {
    accent-color: var(--link-color);
}

/* ---- 6. Scrollbars — subtle, accent-tinted --------------- */
/* Only tint bars that aren't explicitly hidden (display:none). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(167,139,250,.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,.38); background-clip: content-box; }
* { scrollbar-color: rgba(167,139,250,.3) transparent; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(124,58,237,.22); background-clip: content-box; }
[data-theme="light"] * { scrollbar-color: rgba(124,58,237,.25) transparent; }

/* ---- 7. Profile panel — premium surface ----------------- */
/* (profile-panel styling moved to the pfp-* block earlier in this file) */

/* ============================================================
   ANIME DETAIL PAGE (.an-*)
   ============================================================ */

body.anime-page {
    background:
        radial-gradient(1400px 700px at 10% -8%, rgba(124,58,237,.28), transparent 62%),
        radial-gradient(1000px 600px at 100% 12%, rgba(88,28,175,.22), transparent 58%),
        linear-gradient(180deg, #0a0614 0%, #060310 100%);
    min-height: 100vh;
    color: #ece8f8;
}
body.anime-page .footer { display: none; }

.an {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0 140px;
}

/* ---------- HERO ---------- */
.an-hero {
    position: relative;
    margin-top: 0;
    min-height: 540px;
    height: 70vh;
    max-height: 720px;
    overflow: hidden;
    isolation: isolate;
}
.an-hero-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 18%;
    filter: saturate(1.05);
    /* widen the poster as a backdrop since posters are portrait */
    transform: scale(1.1);
    z-index: 0;
}
.an-hero-video {
    position: absolute; inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 500ms ease;
    pointer-events: none;
    z-index: 1;
}
.an-hero-video.is-visible { opacity: 1; }
.an-hero-video .ex-hero-video-frame { /* reuse sizing from explore hero */
    position: absolute;
    top: 50%; left: 50%;
    width: 115%;
    height: 145%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    background: #000;
}
.an-hero-gradient {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, #060310 0%, rgba(6,3,16,.95) 20%, rgba(6,3,16,.55) 45%, rgba(6,3,16,.15) 75%, transparent 100%),
        linear-gradient(to right, rgba(6,3,16,.75) 0%, rgba(6,3,16,.3) 45%, transparent 100%);
    z-index: 2;
}

.an-hero-controls {
    position: absolute;
    top: 18px; right: 20px;
    z-index: 5;
    display: inline-flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}
.an-hero:hover .an-hero-controls,
.an-hero:focus-within .an-hero-controls {
    opacity: 1;
    pointer-events: auto;
}

.an-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    max-width: 720px;
    padding: 0 28px 44px;
}
.an-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}
.an-hero-title {
    font-family: Georgia, serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-shadow: 0 4px 24px rgba(0,0,0,.55);
}
.an-hero-alt {
    margin: 0 0 14px;
    font-size: .9rem;
    color: rgba(232,228,245,.55);
    font-style: italic;
}
.an-hero-desc {
    font-size: 1rem;
    color: rgba(232,228,245,.82);
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 620px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.an-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.an-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.an-btn-primary {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    box-shadow: 0 14px 34px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.an-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(124,58,237,.65), inset 0 1px 0 rgba(255,255,255,.35);
}
.an-btn-secondary {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.an-btn-secondary:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.3);
    transform: translateY(-2px);
}
.an-btn-secondary:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.an-btn-ghost {
    background: transparent;
    color: rgba(232,228,245,.88);
    border-color: rgba(255,255,255,.16);
}
.an-btn-ghost:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.3);
    transform: translateY(-2px);
}
.an-btn-ghost.is-saved {
    background: rgba(167,139,250,.18);
    border-color: rgba(167,139,250,.45);
    color: #e4d7ff;
}
.an-btn-ghost.is-saved .an-bm-path { fill: currentColor; }
.an-btn-disabled {
    opacity: .55;
    pointer-events: none;
    box-shadow: none;
}

/* ---------- SECTIONS ---------- */
.an-section {
    padding: 0 28px;
    margin-top: 56px;
}
.an-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}
.an-section-title {
    font-family: Georgia, serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.015em;
}
.an-section-sub {
    margin: 4px 0 0;
    font-size: .82rem;
    color: rgba(232,228,245,.55);
}

/* ---------- EPISODES ---------- */
.an-ep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.an-ep {
    display: grid;
    grid-template-columns: 68px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(232,228,245,.9);
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.an-ep:hover {
    transform: translateY(-2px);
    background: rgba(167,139,250,.1);
    border-color: rgba(167,139,250,.3);
    box-shadow: 0 12px 28px rgba(124,58,237,.22);
}
.an-ep-num {
    font-family: Georgia, serif;
    font-size: .82rem;
    color: #c4b1ff;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}
.an-ep-title {
    font-size: .92rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.an-ep-dur {
    font-size: .76rem;
    color: rgba(232,228,245,.55);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.an-ep-arrow {
    color: rgba(232,228,245,.35);
    transition: color .18s ease, transform .18s ease;
}
.an-ep:hover .an-ep-arrow {
    color: #c4b1ff;
    transform: translateX(3px);
}

/* ---------- ABOUT ---------- */
.an-about {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
.an-about-synopsis {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(232,228,245,.85);
    white-space: pre-wrap;
}
.an-about-synopsis .ex-hero-skel-line { display: block; height: 14px; margin-bottom: 10px; background: rgba(255,255,255,.06); border-radius: 4px; }
.an-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(58,32,112,.4), rgba(22,12,50,.6));
    border: 1px solid rgba(167,139,250,.18);
    box-shadow: 0 14px 34px rgba(0,0,0,.3);
    margin: 0;
}
.an-fact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; align-items: baseline; }
.an-fact dt {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(196,177,255,.7);
    font-weight: 700;
    margin: 0;
}
.an-fact dd {
    font-size: .92rem;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

/* ---------- RELATED ---------- */
.an-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

/* ---------- TRAILER MODAL ---------- */
.an-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms ease;
}
.an-modal.is-open {
    pointer-events: auto;
    opacity: 1;
}
.an-modal-scrim {
    position: absolute; inset: 0;
    background: rgba(5,2,15,.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
}
.an-modal-panel {
    position: relative;
    width: min(1040px, calc(100vw - 48px));
    aspect-ratio: 16/9;
    max-height: calc(100vh - 64px);
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(167,139,250,.2);
}
.an-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(8,8,22,.72);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background .18s ease, transform .18s ease;
}
.an-modal-close:hover { background: rgba(124,58,237,.65); transform: scale(1.08); }
.an-modal-frame, .an-modal-frame iframe {
    width: 100%; height: 100%;
    border: 0;
    display: block;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .an-hero { min-height: 440px; height: 60vh; }
    .an-hero-title { font-size: 2.1rem; }
    .an-about { grid-template-columns: 1fr; gap: 22px; }
    .an-section { padding: 0 20px; margin-top: 44px; }
}
@media (max-width: 560px) {
    .an-hero { min-height: 400px; height: auto; padding-bottom: 0; }
    .an-hero-content { padding: 0 18px 28px; }
    .an-hero-title { font-size: 1.7rem; }
    .an-hero-alt { font-size: .82rem; }
    .an-hero-desc { font-size: .9rem; margin-bottom: 20px; }
    .an-hero-actions { width: 100%; }
    .an-btn { flex: 1; justify-content: center; padding: 12px 16px; font-size: .86rem; }
    .an-btn-ghost { flex-basis: 100%; order: 3; }
    .an-section { padding: 0 16px; margin-top: 36px; }
    .an-section-title { font-size: 1.2rem; }
    .an-ep-grid { grid-template-columns: 1fr; }
    .an-ep { grid-template-columns: 56px 1fr auto; padding: 12px 14px; }
    .an-ep-arrow { display: none; }
    .an-hero-controls { top: 12px; right: 12px; }
}

/* ---- 8. Guild tag palette (unify across site) ----------- */
/* Reuse the three distinct colors introduced in the Lesson Zone
   hub so guild chips look consistent on profile, header, feed. */
.guild-tag,
.badge-artisan, .badge-writer, .badge-editor, .badge-mangakas {
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .68rem;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}
.badge-artisan  { color: #7dd3fc; background: rgba(125,211,252,.12); border: 1px solid rgba(125,211,252,.22); }
.badge-writer   { color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.22); }
.badge-editor   { color: #c4b5fd; background: rgba(196,181,253,.14); border: 1px solid rgba(196,181,253,.26); }
.badge-mangakas { color: #f472b6; background: rgba(244,114,182,.14); border: 1px solid rgba(244,114,182,.28); }

/* ---- 9. Common card polish ------------------------------
   Add subtle lift to recurring card patterns without touching
   their layout. Only hover transforms + refined shadow. */
.feed-card,
.writers-card,
.leaderboard-card,
.wr-book,
.ex-card,
.sg-card,
.ws-card,
.post-card,
.adm-panel-card {
    transition: transform 200ms cubic-bezier(.2,.8,.2,1),
                background 200ms ease,
                box-shadow 200ms ease;
}
.feed-card:hover,
.writers-card:hover,
.leaderboard-card:hover,
.wr-book:hover,
.ex-card:hover,
.sg-card:hover,
.ws-card:hover,
.post-card:hover,
.adm-panel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
[data-theme="light"] .feed-card:hover,
[data-theme="light"] .writers-card:hover,
[data-theme="light"] .leaderboard-card:hover,
[data-theme="light"] .wr-book:hover,
[data-theme="light"] .ex-card:hover,
[data-theme="light"] .sg-card:hover,
[data-theme="light"] .ws-card:hover,
[data-theme="light"] .post-card:hover,
[data-theme="light"] .adm-panel-card:hover {
    box-shadow: 0 14px 34px rgba(40,20,80,.10);
}

/* ---- 10. Page headings — tightened tracking ------------ */
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* ---- 11. Auth modal — premium surface ------------------ */
.auth-modal,
.auth-modal-card {
    border-radius: 18px;
}
.auth-modal-card {
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* ---- 12. Bottom nav (mobile) ---------------------------- */
.bottom-nav {
    background: rgba(11,11,25,.78);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-top: 1px solid rgba(255,255,255,.04);
}
[data-theme="light"] .bottom-nav {
    background: rgba(255,255,255,.88);
    border-top: 1px solid rgba(20,20,40,.06);
}

/* ---- 13. Toast polish --------------------------------- */
.toast {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---- 14. Selection colour ----------------------------- */
::selection { background: rgba(167,139,250,.30); color: #fff; }
[data-theme="light"] ::selection { background: rgba(124,58,237,.22); color: #0f1021; }

/* ============================================================
   LESSON ZONE PLUS — retention, anime identity, micro polish
   Spacing scale enforced: 8 / 16 / 24 / 32 / 48.
   Additive. Only affects .lz-body pages.
   ============================================================ */

/* ---- Manga panel texture (lesson-zone pages only) ----
   Very faint diagonal speedline-style pattern behind content.
   Added as a fixed layer on top of the existing ambient wash but
   still below all UI via z-index:-1 on .lz-body::after. */
.lz-body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(115deg,
            rgba(255,255,255,.022) 0 2px,
            transparent 2px 14px);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: -1;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);
}

/* ---- Hero stat chips (streak, completions) ---- */
.lz-hub-stats {
    display: flex; flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.lz-hub-stats:empty { display: none; }

.lz-stat-chip {
    display: inline-flex; align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    transition: background 180ms ease;
}
.lz-stat-chip strong {
    color: var(--text-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lz-stat-chip svg { flex-shrink: 0; }
.lz-stat-streak {
    color: #ffb766;
    background: linear-gradient(135deg, rgba(255,150,90,.16), rgba(255,90,160,.10));
    box-shadow:
        inset 0 0 0 1px rgba(255,160,90,.22),
        0 6px 18px rgba(255,100,80,.14);
}
.lz-stat-streak strong { color: #fff; }
.lz-stat-streak svg { color: #ff6b3d; filter: drop-shadow(0 0 6px rgba(255,90,60,.55)); }

.lz-stat-badge {
    color: var(--link-color);
    background: rgba(167,139,250,.14);
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.24);
}
.lz-stat-badge strong { color: var(--text-heading); }

/* ---- Course-card completion state ---- */
.lz-hub-card-complete {
    outline: 1px solid rgba(167,139,250,.35);
    outline-offset: -1px;
}
.lz-hub-card-complete .lz-hub-card-title {
    background: linear-gradient(90deg, var(--link-color), #ff8fd1);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lz-hub-card-badge {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
    box-shadow: 0 4px 14px rgba(167,139,250,.38);
    z-index: 2;
}

/* ensure cover is the positioning context for the badge */
.lz-hub-card-cover { position: relative; }

/* ---- Soft glow on interactive accent elements ---- */
.lz-hub-hero-btn,
.lz2-complete-btn:not(:disabled),
.lz2-path-current .lz2-path-dot {
    box-shadow: 0 6px 20px rgba(167,139,250,.28);
}

/* Current-day marker in path — make it unmistakable */
.lz2-path-current {
    background: linear-gradient(90deg, rgba(167,139,250,.10), transparent 70%);
    border-radius: 12px;
}
.lz2-path-current::after {
    content: "Today";
    margin-left: auto; margin-right: 12px;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--link-color);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(167,139,250,.14);
}

/* Completed path item — softer treatment */
.lz2-path-completed .lz2-path-title {
    color: var(--text-secondary);
}

/* ---- Micro-interactions: quick scale feedback on clickable things ---- */
.lz-hub-card:active { transform: scale(.985); }
.lz-pill:active     { transform: scale(.94); }
.lz-hub-empty-btn:active { transform: scale(.96); }
.lz-stat-chip:hover { background: var(--bg-elevated); }

/* ---- Progress bars: live update pulse on write ---- */
@keyframes lz-bar-saved {
    0%   { box-shadow: 0 0 0 0 rgba(167,139,250,.55); }
    100% { box-shadow: 0 0 0 8px rgba(167,139,250,0);  }
}
.lz-hub-card-progress-fill,
.lz-hub-continue-bar-fill,
.lz2-progress-fill {
    will-change: width;
}
.lz-saved {
    animation: lz-bar-saved 600ms ease-out;
}

/* ---- Mobile polish for continue card ---- */
@media (max-width: 720px) {
    .lz-hub-continue-card {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "glyph body"
            "cta   cta";
        gap: 16px;
        padding: 20px;
    }
    .lz-hub-continue-glyph { grid-area: glyph; width: 52px; height: 52px; }
    .lz-hub-continue-glyph svg { width: 26px; height: 26px; }
    .lz-hub-continue-body  { grid-area: body; }
    .lz-hub-continue-cta   { grid-area: cta; }
    .lz-hub-continue-cta-btn { width: 100%; justify-content: center; }
    .lz-hub-continue-course { font-size: 1.2rem; }
    .lz-hub-stats { margin-top: 12px; }
}

/* ============================================================
   DAILY MISSIONS (dm-*)
   Accent: --link-color. Two variants: .dm-full (home) and
   .dm-compact (profile). Spacing scale: 8 / 16 / 24.
   ============================================================ */

.dm-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    position: relative;
    overflow: hidden;
}
.dm-card::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(520px 180px at 10% -10%, rgba(167,139,250,.12), transparent 70%);
    pointer-events: none;
}

/* skeleton */
.dm-skel { min-height: 200px; }
.dm-skel-shim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
    animation: lz-shimmer 1.6s infinite;
}

/* head */
.dm-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    position: relative;
}
.dm-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 2px;
    letter-spacing: -0.005em;
}
.dm-sub {
    font-size: .76rem;
    color: var(--text-faint);
    margin: 0;
}
.dm-head-right {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.dm-streak {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,150,90,.16), rgba(255,90,160,.10));
    box-shadow: inset 0 0 0 1px rgba(255,160,90,.22);
    color: #ffb766;
    font-size: .78rem;
}
.dm-streak strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-streak svg { color: #ff6b3d; filter: drop-shadow(0 0 6px rgba(255,90,60,.55)); }

.dm-xp {
    font-size: .78rem;
    color: var(--text-secondary);
    background: rgba(167,139,250,.14);
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.22);
}
.dm-xp strong { color: var(--text-heading); font-weight: 700; font-variant-numeric: tabular-nums; }

/* task list */
.dm-tasks {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
}
.dm-task {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,.025);
    border-radius: 12px;
    transition: background 180ms ease;
}
.dm-task:hover { background: rgba(255,255,255,.045); }
.dm-task-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--link-color);
}
.dm-task-body { flex: 1; min-width: 0; }
.dm-task-title {
    font-size: .9rem; font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 4px;
    line-height: 1.3;
}
.dm-task-meta {
    display: flex; align-items: center; gap: 8px;
}
.dm-task-rail {
    flex: 1; height: 4px;
    background: rgba(255,255,255,.06);
    border-radius: 999px; overflow: hidden;
    max-width: 220px;
}
.dm-task-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--link-color), #ff8fd1);
    border-radius: 999px;
    transition: width 400ms cubic-bezier(.2,.8,.2,1);
}
.dm-task-count {
    font-size: .72rem; font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.dm-task-cta { flex-shrink: 0; }
.dm-task-pct {
    font-size: .8rem; font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.dm-task-claim {
    background: var(--link-color); color: #fff;
    border: 0;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: .8rem; font-weight: 700;
    box-shadow: 0 4px 14px rgba(167,139,250,.34);
    transition: transform 140ms ease, filter 140ms ease, box-shadow 200ms ease;
    cursor: pointer;
}
.dm-task-claim:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dm-task-claim:active { transform: scale(.96); }
.dm-task-claim.dm-busy { opacity: .6; cursor: not-allowed; }

.dm-task-done {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600;
    color: var(--link-color);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(167,139,250,.12);
}
.dm-task-claimed .dm-task-title { color: var(--text-secondary); }
.dm-task-claimed .dm-task-icon  { color: var(--link-color); opacity: .75; }
.dm-task-ready  .dm-task-icon   { color: var(--link-color); background: rgba(167,139,250,.14); }

/* bonus row */
.dm-bonus {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: .88rem; font-weight: 600;
    text-align: center;
    position: relative;
}
.dm-bonus-wait {
    color: var(--text-faint);
    background: rgba(255,255,255,.03);
}
.dm-bonus-remain {
    font-size: .72rem;
    color: var(--text-faint);
    background: rgba(255,255,255,.05);
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: 4px;
}
button.dm-bonus-ready {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    box-shadow: 0 10px 28px rgba(167,139,250,.36);
    cursor: pointer;
    width: 100%;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 200ms ease;
}
button.dm-bonus-ready:hover {
    transform: translateY(-1px); filter: brightness(1.08);
    box-shadow: 0 14px 34px rgba(167,139,250,.48);
}
button.dm-bonus-ready:active { transform: scale(.985); }
.dm-bonus-done {
    color: var(--link-color);
    background: rgba(167,139,250,.10);
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.24);
}

/* compact variant (profile) */
.dm-compact { padding: 14px; }
.dm-compact .dm-title { font-size: .95rem; }
.dm-compact .dm-sub { display: none; }
.dm-compact .dm-head { margin-bottom: 10px; }
.dm-compact .dm-task { padding: 8px 10px; gap: 10px; }
.dm-compact .dm-task-icon { width: 28px; height: 28px; border-radius: 8px; }
.dm-compact .dm-task-icon svg { width: 14px; height: 14px; }
.dm-compact .dm-task-title { font-size: .84rem; }
.dm-compact .dm-task-rail  { max-width: 140px; }
.dm-compact .dm-task-claim { padding: 5px 10px; font-size: .72rem; }
.dm-compact .dm-bonus { padding: 10px 12px; font-size: .82rem; margin-top: 10px; }

/* mobile */
@media (max-width: 480px) {
    .dm-head-right { flex-wrap: wrap; }
    .dm-task-rail { max-width: 100px; }
    .dm-task { padding: 10px; }
}

/* profile mount spacing */
.pf-missions-wrap {
    margin: 0 auto 24px;
    max-width: 760px;
    padding: 0 16px;
}

/* ============================================================
   HOME ACHIEVEMENTS STRIP (ha-*)
   Streak / XP / Lessons tiles above the Daily Missions card.
   ============================================================ */

.ha-strip {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    position: relative;
    overflow: hidden;
}
.ha-strip::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(600px 220px at 85% -20%, rgba(255,143,209,.08), transparent 70%);
    pointer-events: none;
}
.ha-skel { min-height: 112px; }

.ha-header {
    display: flex; flex-direction: column;
    margin-bottom: 16px;
    position: relative;
}
.ha-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--text-heading);
    margin: 0;
    letter-spacing: -0.005em;
}
.ha-sub {
    font-size: .78rem;
    color: var(--text-faint);
    margin: 2px 0 0;
}

.ha-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    position: relative;
}

.ha-tile {
    display: flex; align-items: center; gap: 14px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1),
                background 180ms ease;
}
.ha-tile:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.045);
}
.ha-tile-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ha-tile-body { min-width: 0; }
.ha-tile-value {
    font-size: 1.6rem; font-weight: 800;
    color: var(--text-heading);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ha-tile-label {
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: 4px;
    letter-spacing: .02em;
}

/* --- streak variant (warm flame) --- */
.ha-tile-streak .ha-tile-icon {
    background: linear-gradient(135deg, rgba(255,150,90,.22), rgba(255,90,160,.14));
    color: #ff6b3d;
    box-shadow: inset 0 0 0 1px rgba(255,160,90,.24),
                0 6px 18px rgba(255,100,80,.16);
}
.ha-tile-streak .ha-tile-icon svg {
    filter: drop-shadow(0 0 6px rgba(255,90,60,.55));
}

/* --- xp variant (purple star) --- */
.ha-tile-xp .ha-tile-icon {
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
    box-shadow: 0 8px 22px rgba(167,139,250,.32);
}

/* --- lessons variant (checkmark) --- */
.ha-tile-lessons .ha-tile-icon {
    background: rgba(167,139,250,.16);
    color: var(--link-color);
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.22);
}

/* --- courses variant (trophy) --- */
.ha-tile-courses .ha-tile-icon {
    background: rgba(125,211,252,.14);
    color: #7dd3fc;
    box-shadow: inset 0 0 0 1px rgba(125,211,252,.22);
}

/* mobile */
@media (max-width: 520px) {
    .ha-strip { padding: 16px; }
    .ha-tiles { grid-template-columns: repeat(2, 1fr); }
    .ha-tile  { padding: 12px; gap: 10px; }
    .ha-tile-icon { width: 36px; height: 36px; border-radius: 10px; }
    .ha-tile-value { font-size: 1.35rem; }
}

/* Member-only section on index.php that hosts achievements + missions */
.sg-member {
    display: flex;
    justify-content: center;
    padding: 32px 16px;
}
.sg-member-wrap {
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   WATCH PARTY (wp-*)
   Split: video left, chat right (desktop).
   Mobile: full-bleed video, chat as slide-up sheet.
   ============================================================ */

.wp-body { background: #0a0a16; }

.wp { position: relative; z-index: 1; }

/* ---- gate (guests) ---- */
.wp-gate {
    display: flex; align-items: center; justify-content: center;
    min-height: 60vh;
    padding: 40px 16px;
}
.wp-gate-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.wp-gate-card svg { color: var(--link-color); margin-bottom: 8px; }
.wp-gate-card h2 { font-size: 1.3rem; color: var(--text-heading); margin: 4px 0 6px; }
.wp-gate-card p  { font-size: .94rem; color: var(--text-muted); margin: 0 0 24px; }
.wp-gate-btns { display: flex; gap: 10px; }
.wp-btn-primary, .wp-btn-ghost {
    flex: 1;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: .92rem; font-weight: 600;
    border: 0; cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}
.wp-btn-primary { background: var(--link-color); color: #fff; }
.wp-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.wp-btn-ghost { background: rgba(255,255,255,.08); color: var(--text-heading); }
.wp-btn-ghost:hover { background: rgba(255,255,255,.14); }

/* ---- lobby ---- */
.wp-lobby {
    display: flex; align-items: center; justify-content: center;
    min-height: 70vh;
    padding: 32px 16px;
}
.wp-lobby-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 32px;
    max-width: 480px; width: 100%;
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.wp-lobby-title {
    font-size: 1.6rem; font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.wp-lobby-sub {
    font-size: .92rem; color: var(--text-muted);
    margin: 0 0 24px; line-height: 1.5;
}
.wp-lobby-tabs {
    display: flex; gap: 4px;
    background: rgba(255,255,255,.04);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 16px;
}
.wp-lobby-tab {
    flex: 1;
    background: transparent; border: 0;
    color: var(--text-muted);
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .88rem; font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.wp-lobby-tab.active {
    background: var(--link-color); color: #fff;
}
.wp-lobby-pane { display: flex; flex-direction: column; gap: 12px; }

.wp-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wp-field > span {
    font-size: .78rem; font-weight: 600;
    color: var(--text-faint);
    letter-spacing: .02em;
}
.wp-field input {
    background: var(--bg-input);
    border: 0;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: .95rem;
    font-family: inherit;
}
.wp-field input:focus {
    outline: 2px solid var(--link-color);
    outline-offset: -2px;
}
.wp-field-row { display: flex; gap: 12px; }
.wp-btn-block { width: 100%; margin-top: 4px; }

/* ---- room top bar ---- */
.wp-room { display: flex; flex-direction: column; min-height: calc(100vh - 52px); }

.wp-top {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: rgba(10,10,22,.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.04);
    position: sticky; top: 52px; z-index: 20;
}
.wp-top-back {
    background: transparent; border: 0;
    color: var(--text-heading); font-size: 1.3rem;
    padding: 4px 10px; border-radius: 8px;
    cursor: pointer;
}
.wp-top-back:hover { background: rgba(255,255,255,.05); }
.wp-top-meta { flex: 1; min-width: 0; }
.wp-top-title {
    font-weight: 700; font-size: 1rem;
    color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-top-ep {
    font-size: .78rem; color: var(--text-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-top-members { display: flex; align-items: center; gap: -6px; }
.wp-chip {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg-elevated);
    margin-left: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(10,10,22,.9);
    font-size: .75rem; font-weight: 700;
    color: var(--text-heading);
}
.wp-chip img { width: 100%; height: 100%; object-fit: cover; }
.wp-chip-host {
    box-shadow: 0 0 0 2px var(--link-color);
}
.wp-top-share {
    background: rgba(167,139,250,.16);
    color: var(--link-color);
    border: 0; padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 160ms ease;
}
.wp-top-share:hover { background: rgba(167,139,250,.28); }

/* ---- split layout ---- */
.wp-split {
    flex: 1; display: flex;
    min-height: 0;
}
.wp-video-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    padding: 16px;
    gap: 12px;
}
.wp-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.wp-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}
.wp-video-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-faint);
    font-size: .92rem;
    text-align: center;
    padding: 24px;
}

/* controls row */
.wp-controls {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.wp-role-badge {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: var(--text-secondary);
    font-size: .76rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.wp-role-badge.wp-role-host {
    background: var(--link-color);
    color: #fff;
    box-shadow: 0 6px 18px rgba(167,139,250,.32);
}
.wp-sync-badge {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(125,211,252,.14);
    color: #7dd3fc;
    font-size: .72rem; font-weight: 600;
    transition: background 200ms ease, color 200ms ease;
}
.wp-sync-badge.wp-sync-drift {
    background: rgba(251,191,36,.18);
    color: #fbbf24;
}
.wp-skip {
    display: flex; gap: 4px;
    margin-left: 12px;
}
.wp-skip[hidden] { display: none; }
.wp-skip-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.05);
    color: var(--text-primary);
    font-size: .72rem; font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
    font-variant-numeric: tabular-nums;
}
.wp-skip-btn:hover { background: rgba(167,139,250,.18); }
.wp-skip-btn:active { transform: scale(.94); }

.wp-reactions {
    margin-left: auto;
    display: flex; gap: 6px;
}
.wp-react {
    background: rgba(255,255,255,.04);
    border: 0;
    font-size: 1.1rem;
    width: 38px; height: 38px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 160ms ease, transform 140ms ease;
}
.wp-react:hover { background: rgba(255,255,255,.10); transform: translateY(-1px); }
.wp-react:active { transform: scale(.9); }

/* ============================================================
   WATCH PARTY CHAT — minimal, animated, transparency-capable
   ============================================================ */

/* ---- chat column ---- */
.wp-chat-col {
    width: 340px;
    background: var(--bg-card);
    display: flex; flex-direction: column;
    border-left: 1px solid rgba(255,255,255,.04);
    transition: background 200ms ease, backdrop-filter 200ms ease;
}
.wp-chat-col.wp-chat-transparent {
    background: rgba(10, 10, 22, .55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ---- header ---- */
.wp-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.wp-chat-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.wp-chat-head-r { display: flex; align-items: center; gap: 4px; }
.wp-chat-head h3 {
    margin: 0; font-size: .9rem; font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.005em;
}
.wp-chat-viewers { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: nowrap; }
.wp-chat-viewer { display: inline-flex; }
.wp-chat-viewer-av {
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
    box-shadow: 0 0 0 2px var(--bg-card);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .62rem; font-weight: 700; color: #fff;
    margin-left: -6px;
}
.wp-chat-viewer:first-child .wp-chat-viewer-av { margin-left: 0; }
.wp-chat-viewer-more {
    font-size: .68rem; font-weight: 700;
    color: var(--text-faint);
    margin-left: 2px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    line-height: 18px;
}
.wp-chat-viewer-count {
    font-size: .68rem;
    color: var(--text-faint);
    margin-left: 6px;
    white-space: nowrap;
}
.wp-chat-trans, .wp-chat-close {
    background: transparent; border: 0;
    color: var(--text-faint);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 140ms ease, color 140ms ease;
}
.wp-chat-trans:hover, .wp-chat-close:hover { background: rgba(255,255,255,.06); color: var(--text-heading); }
.wp-chat-col.wp-chat-transparent .wp-chat-trans { color: var(--link-color); background: rgba(167,139,250,.14); }
.wp-chat-close { display: none; font-size: 1rem; }

/* ---- list ---- */
.wp-chat-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 4px;
    display: flex; flex-direction: column; gap: 4px;
    scroll-behavior: smooth;
}
.wp-chat-list::-webkit-scrollbar { width: 6px; }
.wp-chat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

/* ---- jump-to-bottom pill ---- */
.wp-chat-jump {
    align-self: center;
    margin: -4px 0 6px;
    padding: 5px 12px;
    background: var(--link-color);
    color: #fff;
    font-size: .72rem; font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(167,139,250,.35);
    animation: wp-fadeup 160ms ease;
}

/* ---- messages (grouped, no bubbles) ---- */
@keyframes wp-fadeup {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.wp-msg {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: flex-start;
    padding: 5px 4px;
    border-radius: 8px;
    font-size: .88rem;
    line-height: 1.4;
}
.wp-msg-enter { animation: wp-fadeup 180ms cubic-bezier(.2,.8,.2,1); }
.wp-msg-grouped { padding-top: 1px; padding-bottom: 1px; }
.wp-msg-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--bg-elevated);
    display: inline-flex; align-items: center; justify-content: center;
}
.wp-msg-avatar-init {
    font-size: .72rem; font-weight: 700;
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
}
.wp-msg-avatar-spacer { background: transparent; }
.wp-msg-body { min-width: 0; }
.wp-msg-meta {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 1px;
}
.wp-msg-user {
    font-weight: 600;
    color: var(--text-heading);
    font-size: .78rem;
    letter-spacing: .005em;
}
.wp-msg-mine .wp-msg-user { color: #7dd3fc; }
.wp-msg-host .wp-msg-user { color: #ffd166; }
.wp-msg-host-tag {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1a1a2e;
    background: #ffd166;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: 1px;
}
.wp-msg-time {
    font-size: .66rem;
    color: var(--text-faint);
    opacity: 0;
    transition: opacity 140ms ease;
}
.wp-msg:hover .wp-msg-time { opacity: 1; }
.wp-msg-text {
    color: var(--text-primary);
    word-break: break-word;
}
.wp-msg-host {
    background: linear-gradient(90deg, rgba(255,209,102,.06), transparent 50%);
    border-left: 2px solid rgba(255,209,102,.5);
    padding-left: 6px;
}

/* ---- system ---- */
.wp-msg-sys {
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
    padding: 4px 0;
}
.wp-msg-sys-text {
    font-size: .72rem;
    color: var(--text-faint);
    font-style: italic;
    padding: 2px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 999px;
}

/* ---- typing indicator ---- */
.wp-chat-typing {
    height: 0;
    overflow: hidden;
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px;
    color: var(--text-faint);
    font-size: .74rem;
    transition: height 160ms ease, padding 160ms ease;
}
.wp-chat-typing-on { height: 22px; padding: 4px 16px 6px; }
.wp-chat-typing-dots { display: inline-flex; gap: 3px; }
.wp-chat-typing-dots i {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--text-faint);
    animation: wp-typing 1s infinite ease-in-out;
}
.wp-chat-typing-dots i:nth-child(2) { animation-delay: .15s; }
.wp-chat-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wp-typing {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-2px); }
}

/* ---- input bar ---- */
.wp-chat-form {
    position: relative;
    display: flex; align-items: center; gap: 4px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255,255,255,.04);
    background: transparent;
}
.wp-chat-input {
    flex: 1;
    background: rgba(255,255,255,.05);
    border: 1px solid transparent;
    padding: 10px 12px;
    border-radius: 999px;
    color: var(--text-primary);
    font-size: .9rem; font-family: inherit;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.wp-chat-input::placeholder { color: var(--text-faint); }
.wp-chat-input:focus {
    outline: none;
    background: rgba(255,255,255,.08);
    border-color: rgba(167,139,250,.4);
    box-shadow: 0 0 0 4px rgba(167,139,250,.15);
}
.wp-chat-emoji-btn, .wp-chat-send {
    background: transparent;
    border: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--text-faint);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 140ms ease, color 140ms ease, transform 160ms ease;
}
.wp-chat-emoji-btn:hover { background: rgba(255,255,255,.06); color: var(--text-heading); }
.wp-chat-send {
    background: var(--link-color);
    color: #fff;
}
.wp-chat-send:hover { filter: brightness(1.1); transform: translateY(-1px); }
.wp-chat-send-fly { animation: wp-send-fly 260ms ease; }
@keyframes wp-send-fly {
    0%   { transform: translate(0,0) rotate(0); }
    50%  { transform: translate(6px,-8px) rotate(20deg); }
    100% { transform: translate(0,0) rotate(0); }
}

/* ---- emoji panel ---- */
.wp-chat-emoji-panel {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 12px;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
    z-index: 5;
    animation: wp-fadeup 140ms ease;
}
.wp-chat-emoji-panel button {
    background: transparent; border: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.wp-chat-emoji-panel button:hover { background: rgba(255,255,255,.08); transform: scale(1.15); }
.wp-chat-emoji-panel[hidden] { display: none; }

/* ---- floating reactions overlay (sits over the video; .wp-video-wrap is already relative) ---- */
.wp-react-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 4;
}
.wp-react-fly {
    position: absolute;
    bottom: 8%;
    transform: translateX(-50%);
    will-change: transform, opacity;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
    animation: wp-react-float 2.4s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes wp-react-float {
    0%   { transform: translate(-50%, 0)    scale(.6); opacity: 0; }
    15%  { transform: translate(-50%, -10%) scale(1);  opacity: 1; }
    100% { transform: translate(-50%, -90%) scale(1.3); opacity: 0; }
}

/* ---- floating chat FAB (mobile) ---- */
.wp-fab {
    display: none;
    position: fixed; right: 16px; bottom: 16px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--link-color); color: #fff;
    border: 0;
    box-shadow: 0 10px 28px rgba(167,139,250,.45);
    cursor: pointer;
    z-index: 50;
}
.wp-fab-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    background: #ff6b3d; color: #fff;
    border-radius: 999px;
    font-size: .68rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-page);
}

/* ---- chat link ---- */
.wp-link { color: var(--link-color); text-decoration: underline; word-break: break-all; }
.wp-msg-mine .wp-link { color: #fff; }

/* ---- share modal ---- */
.wp-share-modal {
    position: fixed; inset: 0; z-index: 200;
    display: none;
    align-items: center; justify-content: center;
    padding: 16px;
}
.wp-share-modal.open { display: flex; }
.wp-share-backdrop {
    position: absolute; inset: 0;
    background: rgba(5, 5, 12, .7);
    backdrop-filter: blur(4px);
}
.wp-share-card {
    position: relative;
    width: 100%; max-width: 400px;
    max-height: 80vh;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 20px 18px 18px;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.wp-share-close {
    position: absolute; top: 8px; right: 10px;
    background: transparent; border: 0;
    color: var(--text-muted);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer; padding: 4px 8px;
}
.wp-share-close:hover { color: var(--text-heading); }
.wp-share-title {
    margin: 0 0 14px;
    font-size: 1.05rem;
    color: var(--text-heading);
}
.wp-share-link-row {
    display: flex; gap: 8px; margin-bottom: 14px;
}
.wp-share-link {
    flex: 1; min-width: 0;
    padding: 8px 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    color: var(--text-body);
    font-size: .82rem;
}
.wp-share-copy { padding: 8px 14px; font-size: .85rem; }
.wp-share-divider {
    text-align: center;
    font-size: .72rem;
    color: var(--text-muted);
    margin: 4px 0 10px;
    position: relative;
}
.wp-share-divider::before,
.wp-share-divider::after {
    content: "";
    position: absolute; top: 50%;
    width: calc(50% - 90px);
    height: 1px;
    background: rgba(255,255,255,.08);
}
.wp-share-divider::before { left: 0; }
.wp-share-divider::after  { right: 0; }
.wp-share-friends {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 12px;
    min-height: 80px;
    max-height: 280px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 10px;
    padding: 4px;
}
.wp-share-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
}
.wp-share-friend {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.wp-share-friend:hover { background: rgba(255,255,255,.04); }
.wp-share-friend input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--link-color);
    cursor: pointer;
}
.wp-share-friend-av {
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(124,58,237,.15);
    color: var(--link-color);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem;
    flex-shrink: 0;
}
.wp-share-friend-av img { width: 100%; height: 100%; object-fit: cover; }
.wp-share-friend-name {
    flex: 1;
    font-size: .9rem;
    color: var(--text-body);
    display: flex; align-items: center; gap: 6px;
}
.wp-share-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2ecc71;
}
.wp-share-send:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
}

/* ---- mobile layout ---- */
@media (max-width: 900px) {
    .wp-split { flex-direction: column; }
    .wp-video-col { padding: 12px; }
    .wp-video-wrap { border-radius: 12px; }
    .wp-reactions { width: 100%; justify-content: space-between; margin-left: 0; }

    .wp-chat-col {
        position: fixed; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 70vh;
        border-left: 0;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        transform: translateY(100%);
        transition: transform 280ms cubic-bezier(.2,.8,.2,1);
        z-index: 45;
        box-shadow: 0 -20px 50px rgba(0,0,0,.5);
    }
    .wp-chat-col.wp-chat-open { transform: translateY(0); }
    .wp-chat-close { display: block; }
    .wp-fab { display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 480px) {
    .wp-top { padding: 8px 12px; }
    .wp-top-title { font-size: .92rem; }
    .wp-top-ep   { font-size: .72rem; }
    .wp-chip { width: 26px; height: 26px; }
    .wp-react { width: 34px; height: 34px; font-size: 1rem; }
}

/* "Party" launcher button on watch.php — hoists on hover, accent bg */
.w-party-btn {
    display: inline-flex !important;
    align-items: center; gap: 6px;
    background: var(--link-color) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    width: auto !important;
    box-shadow: 0 6px 18px rgba(167,139,250,.30);
    transition: transform 160ms ease, filter 160ms ease;
}
.w-party-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.w-party-btn span { font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
@media (max-width: 480px) {
    .w-party-btn span { display: none; }
    .w-party-btn { padding: 6px 8px !important; }
}

/* ============================================================
   ACHIEVEMENTS (ac-*)
   Grid of minimal badges: unlocked = accent, locked = dim.
   Popup toast on new unlocks.
   ============================================================ */

.ac-card-host {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    position: relative;
    overflow: hidden;
}
.ac-card-host::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(560px 180px at 85% -20%, rgba(167,139,250,.10), transparent 70%);
    pointer-events: none;
}
.ac-skel { min-height: 200px; }

.ac-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-bottom: 16px;
    position: relative;
}
.ac-h-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--text-heading);
    margin: 0;
    letter-spacing: -0.005em;
}
.ac-h-sub {
    font-size: .78rem; color: var(--text-faint);
    margin: 2px 0 0;
}
.ac-summary {
    padding: 7px 14px;
    background: rgba(167,139,250,.14);
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.22);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}
.ac-summary strong { color: var(--text-heading); font-weight: 700; }
.ac-summary span   { opacity: .7; }

.ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    position: relative;
}

.ac-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: rgba(255,255,255,.025);
    border-radius: 12px;
    cursor: default;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1),
                background 180ms ease;
}
.ac-card:hover { transform: translateY(-1px); background: rgba(255,255,255,.045); }

.ac-ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.ac-ico svg { width: 22px; height: 22px; }

/* ---- locked state ---- */
.ac-locked .ac-ico {
    background: rgba(255,255,255,.04);
    color: var(--text-faint);
}
.ac-locked .ac-title { color: var(--text-secondary); }
.ac-locked .ac-desc,
.ac-locked .ac-xp    { color: var(--text-faint); }
.ac-locked { opacity: .7; }

/* ---- unlocked states (varied color by category) ---- */
.ac-unlocked.ac-cat-learning .ac-ico {
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
    box-shadow: 0 8px 20px rgba(167,139,250,.32);
}
.ac-unlocked.ac-cat-meta .ac-ico {
    background: linear-gradient(135deg, #ffb766, #ff6b3d);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255,100,80,.30);
}
.ac-unlocked.ac-cat-social .ac-ico {
    background: linear-gradient(135deg, #7dd3fc, #60a5fa);
    color: #fff;
    box-shadow: 0 8px 20px rgba(96,165,250,.28);
}
.ac-unlocked.ac-cat-watch .ac-ico {
    background: linear-gradient(135deg, #34d399, #06b6d4);
    color: #fff;
    box-shadow: 0 8px 20px rgba(52,211,153,.26);
}

.ac-meta { min-width: 0; }
.ac-title {
    font-size: .92rem; font-weight: 700;
    color: var(--text-heading);
    line-height: 1.25;
    margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-desc {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-xp {
    font-size: .78rem; font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(167,139,250,.14);
    color: var(--link-color);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.ac-locked .ac-xp {
    background: rgba(255,255,255,.04);
    color: var(--text-faint);
}

/* ---- popup toast (appears from top-right on unlock) ---- */
.ac-pop {
    position: fixed;
    top: 76px; right: 20px;
    z-index: 200;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px 14px 14px;
    background: var(--bg-card);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5),
                0 0 0 1px rgba(167,139,250,.20);
    max-width: 320px;
    cursor: pointer;
    transform: translateX(calc(100% + 20px));
    opacity: 0;
    transition: transform 260ms cubic-bezier(.2,.8,.2,1),
                opacity   200ms ease;
}
.ac-pop-in  { transform: translateX(0); opacity: 1; }
.ac-pop-out { transform: translateX(calc(100% + 20px)); opacity: 0; }

.ac-pop-ico {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
    box-shadow: 0 8px 18px rgba(167,139,250,.40);
    flex-shrink: 0;
}
.ac-pop-ico svg { width: 20px; height: 20px; }
.ac-pop-body    { min-width: 0; }
.ac-pop-eyebrow {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--link-color);
}
.ac-pop-title {
    font-size: .98rem; font-weight: 700;
    color: var(--text-heading);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-pop-xp {
    font-size: .78rem; font-weight: 600;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* mobile */
@media (max-width: 520px) {
    .ac-grid { grid-template-columns: 1fr; }
    .ac-card { padding: 12px; }
    .ac-pop  { top: 64px; right: 12px; left: 12px; max-width: none; }
}

/* ============================================================
   ME / MY SPACE — private dashboard (me-*)
   Identity header + stacked sections.
   ============================================================ */

.me-body { background: var(--bg-page); }

.me {
    max-width: 920px;
    margin: 0 auto;
    padding: 24px 20px 96px;
}

/* ---- identity header ---- */
.me-head {
    display: flex; align-items: center; gap: 24px;
    padding: 28px 28px;
    background: var(--bg-card);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(0,0,0,.26);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}
.me-head::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(680px 260px at 10% -10%, rgba(167,139,250,.18), transparent 70%),
        radial-gradient(520px 220px at 90% -10%, rgba(255,143,209,.10), transparent 70%);
    pointer-events: none;
}
.me-head-left {
    display: flex; align-items: center; gap: 20px;
    flex: 1; min-width: 0;
    position: relative;
}
.me-avatar {
    width: 76px; height: 76px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,.32);
    background: var(--bg-elevated);
    display: inline-flex; align-items: center; justify-content: center;
}
.me-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-avatar-init {
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
    font-size: 2rem; font-weight: 800;
    letter-spacing: -0.02em;
}

.me-head-text { min-width: 0; }
.me-head-eyebrow {
    font-size: .7rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--link-color);
    margin-bottom: 2px;
}
.me-head-name {
    font-size: 1.8rem; font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.me-head-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.me-head-id {
    background: rgba(167,139,250,.14);
    color: var(--link-color);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .76rem;
}
.me-head-dot { opacity: .4; }
.me-head-guilds { display: flex; gap: 6px; flex-wrap: wrap; }

.me-head-actions {
    display: flex; gap: 8px;
    flex-wrap: wrap;
    position: relative;
}
.me-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.06);
    color: var(--text-heading);
    border: 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .84rem; font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, transform 140ms ease;
    text-decoration: none;
}
.me-btn-ghost:hover {
    background: rgba(255,255,255,.12);
    transform: translateY(-1px);
    color: var(--text-heading);
}
.me-btn-ghost svg { color: var(--link-color); flex-shrink: 0; }

/* ---- sections ---- */
.me-section { margin-top: 16px; }
.me-section:first-of-type { margin-top: 0; }

/* ---- mobile ---- */
@media (max-width: 640px) {
    .me { padding: 16px 14px 96px; }
    .me-head {
        padding: 20px;
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    .me-head-left  { gap: 14px; }
    .me-avatar { width: 64px; height: 64px; }
    .me-head-name { font-size: 1.45rem; }
    .me-head-actions { width: 100%; }
    .me-btn-ghost { flex: 1; justify-content: center; }
}

/* ---- "Back to My Space" chip on public profile (self-view) ---- */
.pf-self-link-wrap {
    max-width: 760px;
    margin: 0 auto 16px;
    padding: 0 16px;
}
.pf-self-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(167,139,250,.14);
    color: var(--link-color) !important;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease;
}
.pf-self-link:hover { background: rgba(167,139,250,.22); }

/* ============================================================
   "Daily Missions moved" one-time fly animation
   Played once per browser via localStorage flag. Scales + translates
   the banner to the avatar link top-right with an achievement feel.
   ============================================================ */

.dm-moved-banner {
    --fly-x: 0px;
    --fly-y: 0px;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px 14px 14px;
    background:
        linear-gradient(135deg, rgba(167,139,250,.22), rgba(255,143,209,.10)),
        var(--bg-card);
    border-radius: 14px;
    box-shadow:
        0 12px 32px rgba(0,0,0,.30),
        0 0 0 1px rgba(167,139,250,.22);
    position: relative;
    overflow: hidden;
    will-change: transform, opacity, box-shadow;
    transform-origin: center;
}
.dm-moved-banner::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(420px 180px at 0% 0%, rgba(167,139,250,.22), transparent 70%);
    pointer-events: none;
}
.dm-moved-ico {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
    box-shadow: 0 8px 20px rgba(167,139,250,.40);
    position: relative; z-index: 1;
}
.dm-moved-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.dm-moved-eyebrow {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--link-color);
}
.dm-moved-title {
    font-size: 1rem; font-weight: 700;
    color: var(--text-heading);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-moved-title a {
    color: var(--link-color);
    font-weight: 700;
    text-decoration: none;
}
.dm-moved-title a:hover { text-decoration: underline; }
.dm-moved-sub {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.dm-moved-pointer {
    color: var(--link-color);
    opacity: .65;
    flex-shrink: 0;
}

/* --- pulse phase: brief "claimed" glow before flight --- */
@keyframes dm-moved-pulse {
    0%   { box-shadow: 0 12px 32px rgba(0,0,0,.30), 0 0 0 1px rgba(167,139,250,.22), 0 0 0 0 rgba(167,139,250,.40); }
    50%  { box-shadow: 0 14px 38px rgba(167,139,250,.30), 0 0 0 1px rgba(167,139,250,.40), 0 0 0 10px rgba(167,139,250,.10); transform: scale(1.02); }
    100% { box-shadow: 0 12px 32px rgba(0,0,0,.30), 0 0 0 1px rgba(167,139,250,.22), 0 0 0 0 rgba(167,139,250,0);   transform: scale(1); }
}
.dm-moved-pulse { animation: dm-moved-pulse 600ms cubic-bezier(.2,.8,.2,1); }

/* --- flight phase: lift, scale down, translate to avatar --- */
.dm-moved-banner {
    transition:
        transform 860ms cubic-bezier(.64, -0.15, .25, 1.25),
        opacity   680ms ease-out 180ms,
        box-shadow 500ms ease;
}
.dm-moved-fly {
    transform: translate(var(--fly-x), var(--fly-y)) scale(0.08) rotate(-8deg);
    opacity: 0;
    box-shadow: 0 2px 8px rgba(167,139,250,.5);
}

/* collapse the layout space after the element has flown */
.dm-moved-collapse {
    transition: max-height 320ms ease, margin 320ms ease, padding 320ms ease;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* --- landing ping on the avatar link --- */
@keyframes nav-pfp-land {
    0%   { box-shadow: 0 0 0 0 rgba(167,139,250,.65); }
    40%  { box-shadow: 0 0 0 10px rgba(167,139,250,.30); }
    100% { box-shadow: 0 0 0 20px rgba(167,139,250,0);   }
}
.nav-pfp.nav-pfp-land {
    animation: nav-pfp-land 780ms ease-out;
    position: relative;
}

/* respect reduced-motion preference: skip the flight, just remove */
@media (prefers-reduced-motion: reduce) {
    .dm-moved-banner { display: none !important; }
}

/* ============================================================
   PROFILE COSMETICS — shared surface (pf-banner, pf-avatar-wrap,
   pf-frame-*, pf-level-chip, pf-status). Rendered on me.php +
   profile.php. Accent = var(--pf-accent) on <body>.
   ============================================================ */

/* accent default — override via inline body style */
:root { --pf-accent: var(--link-color); }

.pf-surface { position: relative; overflow: hidden; }

.pf-banner {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 140px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    z-index: 0;
    pointer-events: none;
}
.pf-banner::after {
    /* soft fade into the card below */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(20,20,40,.55) 100%);
}
.pf-banner-aurora {
    background: conic-gradient(from 210deg at 50% 50%, #a78bfa, #ff8fd1, #7dd3fc, #a78bfa) !important;
    filter: blur(6px);
}
@keyframes pf-aurora-shift { to { transform: rotate(360deg); } }
.pf-banner-aurora { animation: pf-aurora-shift 18s linear infinite; }

/* ============================================================
   BANNER OVERLAYS — decorative layer that sits on top of the
   banner but below the avatar/text.
   ============================================================ */
.pf-overlay {
    /* strength scalar: 0..1 — set inline per-user, defaults to 0.7 */
    --pf-ov-s: 0.7;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;        /* match .pf-head .pf-banner height */
    z-index: 1;           /* above banner (z:0), below avatar (z:2) */
    pointer-events: none;
    /* Pattern overlays use opacity to scale strength. Blur-family overrides
       this and scales blur radius instead. */
    opacity: var(--pf-ov-s);
    /* Fade the overlay out near the bottom so patterns don't create a
       hard horizontal edge where the avatar sits. */
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
            mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
}
@media (max-width: 640px) {
    .pf-overlay { height: 160px; }
}
.pf-overlay-vignette {
    background: radial-gradient(ellipse at center,
        transparent 45%,
        rgba(0,0,0,.45) 100%);
}
.pf-overlay-fade {
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(0,0,0,.45) 100%);
}
.pf-overlay-scanlines {
    background: repeating-linear-gradient(0deg,
        rgba(0,0,0,.18) 0 1px,
        transparent 1px 3px);
    mix-blend-mode: multiply;
}
.pf-overlay-stars {
    background-image:
        radial-gradient(1.5px 1.5px at 14% 22%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(1px 1px at 82% 18%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(1.5px 1.5px at 36% 42%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1px 1px at 68% 38%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1px 1px at 50% 18%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(2px 2px at 92% 32%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(1px 1px at 24% 54%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.65), transparent 60%);
    /* Animate brightness, not opacity — opacity is owned by the strength slider. */
    animation: pf-overlay-twinkle 4s ease-in-out infinite;
}
@keyframes pf-overlay-twinkle {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(0.55); }
}
.pf-overlay-grain {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
}
.pf-overlay-haze {
    background:
        radial-gradient(circle at 20% 30%, var(--pf-accent, #a78bfa) 0%, transparent 45%),
        radial-gradient(circle at 80% 30%, var(--pf-accent, #a78bfa) 0%, transparent 45%);
    filter: blur(22px);
    mix-blend-mode: screen;
}
/* Frosted glass — blur whatever is behind (banner pattern/image).
   Strength scales blur radius (up to 18px) rather than opacity. */
.pf-overlay-blur {
    opacity: 1;
    -webkit-backdrop-filter: blur(calc(var(--pf-ov-s) * 18px)) saturate(1.1);
            backdrop-filter: blur(calc(var(--pf-ov-s) * 18px)) saturate(1.1);
    background: rgba(18, 14, 36, calc(var(--pf-ov-s) * 0.2));
}
/* Pure Gaussian blur — heavier, no tint. Strength scales radius up to 40px. */
.pf-overlay-gaussian {
    opacity: 1;
    -webkit-backdrop-filter: blur(calc(var(--pf-ov-s) * 40px));
            backdrop-filter: blur(calc(var(--pf-ov-s) * 40px));
}
/* The fade-at-avatar mask looks wrong for blur overlays (the blur itself
   would be visibly truncated where the mask kicks in). Blurs extend all
   the way down. */
.pf-overlay-blur,
.pf-overlay-gaussian {
    -webkit-mask-image: none;
            mask-image: none;
}

/* avatar frame wrapper */
.pf-avatar-wrap {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    z-index: 2;
}
.pf-avatar-wrap[class*="pf-frame-"]:not(.pf-frame-default) {
    padding: 3px;
    background: transparent;
}
.pf-avatar-wrap.pf-frame-simple,
.pf-avatar-wrap.pf-frame-gold {
    box-shadow: inset 0 0 0 var(--pf-frame-border, 0 transparent);
    padding: 0;
    /* Real frame drawn by box-shadow via --pf-frame-border value */
    box-shadow: 0 0 0 var(--pf-frame-border, 0 transparent);
}
.pf-avatar-wrap.pf-frame-simple { box-shadow: 0 0 0 2px rgba(255,255,255,.22); }
.pf-avatar-wrap.pf-frame-gold   { box-shadow: 0 0 0 3px #fbbf24; }

.pf-avatar-wrap.pf-frame-neon {
    box-shadow:
        0 0 0 3px var(--pf-accent),
        0 0 24px rgba(167,139,250,.55);
}
/* Existing "Aura" free frame — animation moved to ::before so the avatar
   inside stays still while the ring spins. */
.pf-avatar-wrap.pf-frame-aura { padding: 4px; }
.pf-avatar-wrap.pf-frame-aura::before {
    background: conic-gradient(from 0deg,
        rgba(167,139,250,.55), rgba(125,211,252,.55),
        rgba(244,114,182,.45), rgba(167,139,250,.55));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.2),
        inset 0 0 10px rgba(0,0,0,.5),
        0 0 14px rgba(167,139,250,.3);
    filter: saturate(.85);
    animation: co-spin 12s linear infinite;
}
@keyframes co-spin { to { transform: rotate(360deg); } }

/* =======================================================================
   ISEKAI / ANIME FRAMES  (paid + earned)

   CRITICAL rule: animations NEVER go on `.pf-avatar-wrap` itself, because
   the wrap contains the avatar image and would drag it along. Instead:
     ::before = the animated ring (inset:0, z-index:-1 — sits behind the
                avatar but above the wrap's own background)
     ::after  = optional outer aura/glow (inset:-Npx, z-index:-2 — blur,
                pulse, smoke, etc. extending beyond the wrap)
   The wrap is a static positioning container with only padding.
   ======================================================================= */

/* Shared scaffold — any animated frame gets padding so the ring is visible
   through the gap between the wrap edge and the avatar. */
.pf-avatar-wrap[class*="pf-frame-"]:not(.pf-frame-default):not(.pf-frame-simple):not(.pf-frame-gold):not(.pf-frame-neon) {
    padding: 4px;
    background: transparent;
}
.pf-avatar-wrap[class*="pf-frame-"]:not(.pf-frame-default):not(.pf-frame-simple):not(.pf-frame-gold):not(.pf-frame-neon)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}
.pf-avatar-wrap[class*="pf-frame-"]:not(.pf-frame-default):not(.pf-frame-simple):not(.pf-frame-gold):not(.pf-frame-neon)::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    z-index: -2;
    pointer-events: none;
}

/* Common keyframes — animate pseudo-elements only, never the wrap. */
@keyframes pf-pulse {
    0%, 100% { opacity: .7; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.08); }
}
@keyframes pf-flicker {
    0%, 100% { opacity: .9; transform: translateY(0) scale(1); }
    40%      { opacity: 1;  transform: translateY(-2px) scale(1.03); }
    70%      { opacity: .7; transform: translateY(1px)  scale(.98); }
}
@keyframes pf-smoke {
    0%, 100% { transform: translateY(0)  scale(1);    opacity: .75; }
    50%      { transform: translateY(-6px) scale(1.08); opacity: 1; }
}
@keyframes pf-rise {
    0%   { transform: translateY(4px)  scale(.95); opacity: .7; }
    50%  { transform: translateY(-4px) scale(1.08); opacity: 1; }
    100% { transform: translateY(-12px) scale(1.15); opacity: 0; }
}
@keyframes pf-drip {
    0%   { transform: translateY(-4px); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}
@keyframes pf-jitter {
    0%   { transform: rotate(0deg)  scale(1); }
    33%  { transform: rotate(8deg)  scale(1.02); }
    66%  { transform: rotate(-6deg) scale(0.99); }
    100% { transform: rotate(4deg)  scale(1); }
}
@keyframes pf-hue-shift { to { filter: hue-rotate(360deg); } }
@keyframes pf-slime-morph {
    0%, 100% { border-radius: 50%; transform: scale(1); }
    50%      { border-radius: 46% 54% 52% 48% / 50% 48% 52% 50%;
               transform: scale(1.04); }
}

/* ---- Blue Slime — glossy resin droplet, slow wobble ---- */
.pf-avatar-wrap.pf-frame-slime::before {
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 28%),
        radial-gradient(circle at 50% 50%, #67e8f9 0%, #0ea5e9 55%, #0c4a6e 100%);
    box-shadow:
        inset 0 0 0 1px rgba(186,230,253,.45),
        inset 0 -3px 10px rgba(7,89,133,.55),
        0 0 14px rgba(56,189,248,.35);
    animation: pf-slime-morph 5s ease-in-out infinite;
}

/* ---- Wind Dancer — brushed jade with slow drift ---- */
.pf-avatar-wrap.pf-frame-wind_dancer::before {
    background: conic-gradient(from 0deg,
        #064e3b 0%, #115e59 22%, #0f766e 36%, #34d399 48%,
        #0f766e 60%, #115e59 78%, #064e3b 100%);
    box-shadow:
        inset 0 0 0 1px rgba(110,231,183,.35),
        inset 0 -4px 10px rgba(4,47,46,.6),
        0 0 12px rgba(16,185,129,.3);
    animation: co-spin 22s linear infinite;
}
.pf-avatar-wrap.pf-frame-wind_dancer::after {
    inset: -6px;
    background:
        radial-gradient(2px 4px at 50% 4%, rgba(167,243,208,.7), transparent 70%),
        radial-gradient(2px 4px at 96% 50%, rgba(110,231,183,.55), transparent 70%),
        radial-gradient(2px 4px at 50% 96%, rgba(167,243,208,.7), transparent 70%),
        radial-gradient(2px 4px at 4% 50%, rgba(110,231,183,.55), transparent 70%);
    filter: blur(.6px);
    animation: co-spin 18s linear infinite reverse;
    opacity: .8;
}

/* ---- Shadow Monarch — obsidian ring + violet rim ---- */
.pf-avatar-wrap.pf-frame-shadow_monarch::before {
    background: conic-gradient(from 140deg,
        #050509 0%, #1a1033 22%, #3d1d6b 40%, #7c3aed 50%,
        #3d1d6b 62%, #1a1033 80%, #050509 100%);
    box-shadow:
        inset 0 0 0 1px rgba(139,92,246,.4),
        inset 0 0 14px rgba(0,0,0,.85),
        0 0 20px rgba(76,29,149,.6);
    animation: co-spin 20s linear infinite;
}
.pf-avatar-wrap.pf-frame-shadow_monarch::after {
    inset: -10px;
    background: radial-gradient(circle, rgba(124,58,237,.4), transparent 66%);
    filter: blur(8px);
    animation: pf-pulse 5s ease-in-out infinite;
}

/* ---- Frost King — frosted glass with crystalline edge ---- */
.pf-avatar-wrap.pf-frame-frost_king::before {
    background: conic-gradient(from 220deg,
        #e0f2fe 0%, #bae6fd 18%, #7dd3fc 36%, #e0f2fe 52%,
        #93c5fd 70%, #bae6fd 86%, #e0f2fe 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.7),
        inset 0 -3px 10px rgba(56,189,248,.45),
        0 0 16px rgba(186,230,253,.55);
    animation: co-spin 40s linear infinite;
}
.pf-avatar-wrap.pf-frame-frost_king::after {
    inset: -4px;
    background:
        radial-gradient(1.5px 1.5px at 22% 12%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(1px   1px   at 78% 18%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(1.5px 1.5px at 72% 86%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(1px   1px   at 18% 74%, rgba(255,255,255,.75), transparent 60%);
    animation: pf-pulse 4.5s ease-in-out infinite;
    opacity: .85;
}

/* ---- Flame Demon — smoldering steel, heat rising from below ---- */
.pf-avatar-wrap.pf-frame-flame_demon::before {
    background: radial-gradient(ellipse at 50% 115%,
        #fbbf24 0%, #f59e0b 14%, #b45309 32%, #450a0a 60%, #0a0404 100%);
    box-shadow:
        inset 0 0 0 1px rgba(251,146,60,.4),
        inset 0 -5px 14px rgba(234,88,12,.55),
        0 0 18px rgba(234,88,12,.5);
    animation: pf-pulse 6s ease-in-out infinite;
}
.pf-avatar-wrap.pf-frame-flame_demon::after {
    inset: -10px;
    background:
        radial-gradient(ellipse at 50% 118%, rgba(251,146,60,.7), transparent 55%),
        radial-gradient(ellipse at 25% 110%, rgba(234,88,12,.5), transparent 55%),
        radial-gradient(ellipse at 75% 110%, rgba(234,88,12,.5), transparent 55%);
    filter: blur(6px);
    animation: pf-flicker 1.6s ease-in-out infinite;
}

/* ---- Moonlight — polished silver with slow specular sweep ---- */
.pf-avatar-wrap.pf-frame-moonlight::before {
    background: radial-gradient(circle at 30% 25%,
        #fafaf9 0%, #e5e7eb 40%, #9ca3af 78%, #374151 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.55),
        inset 0 -3px 10px rgba(107,114,128,.55),
        0 0 16px rgba(226,232,240,.4);
}
.pf-avatar-wrap.pf-frame-moonlight::after {
    inset: 0;
    background: conic-gradient(from 0deg,
        transparent 0%, transparent 38%,
        rgba(255,255,255,.85) 48%, rgba(255,255,255,.3) 52%,
        transparent 62%, transparent 100%);
    animation: co-spin 14s linear infinite;
    z-index: -1;
    opacity: .7;
}

/* ---- Lightning Edge — tempered brass with arc flicker ---- */
.pf-avatar-wrap.pf-frame-lightning_edge::before {
    background: conic-gradient(from 0deg,
        #78350f 0%, #b45309 20%, #fbbf24 38%, #fde68a 46%,
        #fbbf24 54%, #b45309 76%, #78350f 100%);
    box-shadow:
        inset 0 0 0 1px rgba(253,230,138,.5),
        inset 0 -3px 10px rgba(120,53,15,.6),
        0 0 14px rgba(251,191,36,.5);
    animation: co-spin 18s linear infinite;
}
.pf-avatar-wrap.pf-frame-lightning_edge::after {
    inset: -6px;
    background: conic-gradient(from 25deg,
        transparent 0 12%, rgba(254,240,138,.9) 12% 13%, transparent 13% 38%,
        rgba(253,224,71,.85) 38% 39%, transparent 39% 72%,
        rgba(254,243,199,.9) 72% 73%, transparent 73%);
    filter: drop-shadow(0 0 3px #fde047);
    animation: pf-jitter .9s steps(3) infinite;
    opacity: .7;
}

/* ---- Cursed Sigil — black ink + violet bleed ---- */
.pf-avatar-wrap.pf-frame-cursed_sigil::before {
    background: conic-gradient(from 200deg,
        #050510 0%, #1c0a2e 20%, #3b0764 40%, #6b21a8 52%,
        #3b0764 64%, #1c0a2e 82%, #050510 100%);
    box-shadow:
        inset 0 0 0 1px rgba(168,85,247,.35),
        inset 0 0 16px rgba(0,0,0,.85),
        0 0 20px rgba(107,33,168,.55);
    animation: co-spin 24s linear infinite reverse;
}
.pf-avatar-wrap.pf-frame-cursed_sigil::after {
    inset: -10px;
    background: radial-gradient(circle, rgba(147,51,234,.45), transparent 62%);
    filter: blur(9px);
    animation: pf-pulse 4s ease-in-out infinite;
}

/* ---- Chosen Hero — polished gold with specular sweep ---- */
.pf-avatar-wrap.pf-frame-hero_chosen::before {
    background: conic-gradient(from 0deg,
        #78350f 0%, #b45309 15%, #f59e0b 32%, #fde68a 46%,
        #f59e0b 58%, #b45309 80%, #78350f 100%);
    box-shadow:
        inset 0 0 0 1px rgba(253,230,138,.6),
        inset 0 -4px 12px rgba(120,53,15,.6),
        0 0 22px rgba(245,158,11,.5);
    animation: co-spin 26s linear infinite;
}
.pf-avatar-wrap.pf-frame-hero_chosen::after {
    inset: -10px;
    background: conic-gradient(from 0deg,
        transparent 0 44%,
        rgba(255,255,255,.7) 48%, rgba(255,255,255,.22) 52%,
        transparent 56% 100%);
    filter: blur(3px);
    animation: co-spin 7s linear infinite;
    opacity: .75;
}

/* ---- Dragon Scales — dark jade mail, etched scales ---- */
.pf-avatar-wrap.pf-frame-dragon_scales::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(6,95,70,.95) 6%, transparent 7%),
        radial-gradient(circle at 50% 16%, rgba(4,120,87,.95) 6%, transparent 7%),
        radial-gradient(circle at 82% 18%, rgba(6,95,70,.95) 6%, transparent 7%),
        radial-gradient(circle at 18% 82%, rgba(6,95,70,.95) 6%, transparent 7%),
        radial-gradient(circle at 50% 84%, rgba(4,120,87,.95) 6%, transparent 7%),
        radial-gradient(circle at 82% 82%, rgba(6,95,70,.95) 6%, transparent 7%),
        radial-gradient(circle at 30% 30%, #10b981 0%, #047857 55%, #022c22 100%);
    box-shadow:
        inset 0 0 0 1px rgba(52,211,153,.35),
        inset 0 -4px 10px rgba(4,44,34,.65),
        0 0 14px rgba(16,185,129,.35);
    animation: co-spin 36s linear infinite;
}

/* ---- Dark Knight — gunmetal + crimson etch + low smoke ---- */
.pf-avatar-wrap.pf-frame-dark_knight::before {
    background: radial-gradient(circle at 30% 25%,
        #3f3f46 0%, #18181b 55%, #050506 100%);
    box-shadow:
        inset 0 0 0 1px rgba(153,27,27,.65),
        inset 0 0 12px rgba(0,0,0,.8),
        0 0 18px rgba(127,29,29,.5);
}
.pf-avatar-wrap.pf-frame-dark_knight::after {
    inset: -14px;
    background:
        radial-gradient(ellipse at 50% 115%, rgba(87,83,78,.55), transparent 60%),
        radial-gradient(ellipse at 28% 120%, rgba(63,63,70,.5), transparent 55%),
        radial-gradient(ellipse at 72% 120%, rgba(63,63,70,.5), transparent 55%);
    filter: blur(6px);
    animation: pf-smoke 6s ease-in-out infinite;
}

/* ---- Phoenix Rising — smoldering bronze, heat rise ---- */
.pf-avatar-wrap.pf-frame-phoenix::before {
    background: conic-gradient(from 200deg,
        #431407 0%, #7c2d12 18%, #c2410c 35%, #f59e0b 48%,
        #c2410c 62%, #7c2d12 80%, #431407 100%);
    box-shadow:
        inset 0 0 0 1px rgba(251,191,36,.45),
        inset 0 -4px 12px rgba(67,20,7,.7),
        0 0 22px rgba(194,65,12,.55);
    animation: co-spin 16s linear infinite;
}
.pf-avatar-wrap.pf-frame-phoenix::after {
    inset: -14px;
    background:
        radial-gradient(ellipse at 50% 108%, rgba(234,88,12,.7), transparent 55%),
        radial-gradient(ellipse at 28% 100%, rgba(251,191,36,.55), transparent 55%),
        radial-gradient(ellipse at 72% 100%, rgba(239,68,68,.55), transparent 55%);
    filter: blur(5px);
    animation: pf-rise 4s ease-in-out infinite;
}

/* ---- Ember Heart — iron core, breathing orange heat ---- */
.pf-avatar-wrap.pf-frame-ember_heart::before {
    background: radial-gradient(circle at 50% 50%,
        #fde68a 0%, #f59e0b 22%, #c2410c 48%, #450a0a 82%, #0a0404 100%);
    box-shadow:
        inset 0 0 0 1px rgba(251,191,36,.45),
        inset 0 0 14px rgba(69,10,10,.75),
        0 0 22px rgba(194,65,12,.55);
    animation: pf-pulse 3.4s ease-in-out infinite;
}

/* ---- Aurora Veil — polar ice + slow aurora drift ---- */
.pf-avatar-wrap.pf-frame-aurora_veil::before {
    background: conic-gradient(from 0deg,
        #0c4a6e 0%, #0f766e 18%, #14b8a6 32%, #a5f3fc 45%,
        #818cf8 60%, #4f46e5 78%, #0c4a6e 100%);
    box-shadow:
        inset 0 0 0 1px rgba(165,243,252,.45),
        inset 0 -3px 10px rgba(12,74,110,.6),
        0 0 22px rgba(79,70,229,.4);
    filter: saturate(.85);
    animation: co-spin 22s linear infinite;
}
.pf-avatar-wrap.pf-frame-aurora_veil::after {
    inset: -12px;
    background: conic-gradient(from 0deg,
        rgba(20,184,166,.4), rgba(129,140,248,.5), rgba(165,243,252,.3),
        rgba(20,184,166,.4));
    filter: blur(16px);
    opacity: .55;
    animation: co-spin 22s linear infinite;
}

/* ---- Celestial Halo — hammered gold halo + soft rays ---- */
.pf-avatar-wrap.pf-frame-celestial_halo::before {
    background: conic-gradient(from 0deg,
        #78350f 0%, #b45309 15%, #f59e0b 32%, #fde68a 46%,
        #f59e0b 60%, #b45309 80%, #78350f 100%);
    box-shadow:
        inset 0 0 0 1px rgba(254,243,199,.55),
        inset 0 -3px 12px rgba(120,53,15,.55),
        0 0 32px rgba(245,158,11,.55);
    animation: co-spin 32s linear infinite;
}
.pf-avatar-wrap.pf-frame-celestial_halo::after {
    inset: -18px;
    background: conic-gradient(from 0deg,
        transparent 0 5%, rgba(255,255,255,.55) 5% 6%, transparent 6% 18%,
        rgba(255,255,255,.55) 18% 19%, transparent 19% 31%,
        rgba(255,255,255,.55) 31% 32%, transparent 32% 44%,
        rgba(255,255,255,.55) 44% 45%, transparent 45% 57%,
        rgba(255,255,255,.55) 57% 58%, transparent 58% 70%,
        rgba(255,255,255,.55) 70% 71%, transparent 71% 83%,
        rgba(255,255,255,.55) 83% 84%, transparent 84% 96%,
        rgba(255,255,255,.55) 96% 97%, transparent 97%);
    filter: blur(1px);
    animation: co-spin 28s linear infinite reverse;
    opacity: .75;
}

/* ---- Blood Pact — oxblood lacquer + slow drip ---- */
.pf-avatar-wrap.pf-frame-blood_pact::before {
    background: conic-gradient(from 250deg,
        #1f0606 0%, #450a0a 20%, #7f1d1d 40%, #b91c1c 50%,
        #7f1d1d 60%, #450a0a 80%, #1f0606 100%);
    box-shadow:
        inset 0 0 0 1px rgba(239,68,68,.4),
        inset 0 0 12px rgba(0,0,0,.7),
        0 0 20px rgba(127,29,29,.6);
    animation: co-spin 24s linear infinite;
}
.pf-avatar-wrap.pf-frame-blood_pact::after {
    inset: -6px;
    background:
        radial-gradient(3px 10px at 30% 100%, rgba(185,28,28,.75), transparent 70%),
        radial-gradient(3px 12px at 70% 100%, rgba(127,29,29,.75), transparent 70%),
        radial-gradient(circle, rgba(153,27,27,.35), transparent 60%);
    filter: blur(2px);
    animation: pf-drip 5s ease-in infinite;
}

/* ---- Void Crown — polished obsidian + violet corona ---- */
.pf-avatar-wrap.pf-frame-void_crown::before {
    background:
        radial-gradient(circle at 32% 28%, rgba(139,92,246,.35) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, #050510 0%, #0a0416 55%, #000 100%);
    box-shadow:
        inset 0 0 0 1px rgba(167,139,250,.35),
        inset 0 0 18px rgba(0,0,0,.95),
        0 0 28px rgba(109,40,217,.55);
    animation: pf-pulse 5s ease-in-out infinite;
}
.pf-avatar-wrap.pf-frame-void_crown::after {
    inset: -16px;
    background: radial-gradient(circle, transparent 58%, rgba(167,139,250,.3) 78%, transparent);
    filter: blur(10px);
    animation: pf-pulse 3.5s ease-in-out infinite reverse;
}

/* ---- Demon Lord — blackened iron + ember vein ---- */
.pf-avatar-wrap.pf-frame-demon_lord::before {
    background: conic-gradient(from 90deg,
        #050506 0%, #27272a 10%, #7f1d1d 22%, #dc2626 30%, #7f1d1d 38%,
        #18181b 52%, #27272a 68%, #450a0a 80%, #050506 100%);
    box-shadow:
        inset 0 0 0 1px rgba(220,38,38,.45),
        inset 0 0 14px rgba(0,0,0,.85),
        0 0 22px rgba(153,27,27,.55);
    animation: co-spin 28s linear infinite;
}
.pf-avatar-wrap.pf-frame-demon_lord::after {
    inset: -10px;
    background: radial-gradient(circle, rgba(220,38,38,.35), transparent 62%);
    filter: blur(8px);
    animation: pf-pulse 4.5s ease-in-out infinite;
}

/* ---- Goddess Blessing — rose gold + pearl sheen ---- */
.pf-avatar-wrap.pf-frame-goddess_blessing::before {
    background: conic-gradient(from 0deg,
        #7f1d3c 0%, #be185d 15%, #e11d48 28%, #fbcfe8 42%, #fde68a 52%,
        #fbcfe8 62%, #e11d48 78%, #7f1d3c 100%);
    box-shadow:
        inset 0 0 0 1px rgba(251,207,232,.55),
        inset 0 -3px 10px rgba(127,29,60,.55),
        0 0 22px rgba(244,114,182,.45);
    filter: saturate(.9);
    animation: co-spin 28s linear infinite;
}
.pf-avatar-wrap.pf-frame-goddess_blessing::after {
    inset: -4px;
    background:
        radial-gradient(3px 7px at 50% 6%, rgba(253,230,138,.8), transparent 70%),
        radial-gradient(3px 7px at 94% 50%, rgba(251,207,232,.8), transparent 70%),
        radial-gradient(3px 7px at 50% 94%, rgba(253,230,138,.8), transparent 70%),
        radial-gradient(3px 7px at 6% 50%, rgba(251,207,232,.8), transparent 70%);
    filter: blur(.8px);
    animation: co-spin 16s linear infinite reverse;
    opacity: .8;
}

/* ---- Starborn — deep space + realistic starfield ---- */
.pf-avatar-wrap.pf-frame-starborn::before {
    background:
        radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 60%),
        radial-gradient(.8px .8px at 82% 28%, #dbeafe, transparent 60%),
        radial-gradient(1.5px 1.5px at 55% 70%, #fff, transparent 60%),
        radial-gradient(.8px .8px at 25% 85%, #e0e7ff, transparent 60%),
        radial-gradient(.8px .8px at 70% 95%, #fff, transparent 60%),
        conic-gradient(from 0deg,
            #020617 0%, #1e1b4b 22%, #312e81 40%, #0f172a 55%,
            #312e81 72%, #1e1b4b 88%, #020617 100%);
    box-shadow:
        inset 0 0 0 1px rgba(139,92,246,.3),
        inset 0 0 16px rgba(0,0,0,.9),
        0 0 26px rgba(67,56,202,.5);
    animation: co-spin 50s linear infinite;
}
.pf-avatar-wrap.pf-frame-starborn::after {
    inset: -14px;
    background: radial-gradient(circle, rgba(99,102,241,.35), transparent 68%);
    filter: blur(16px);
    animation: pf-pulse 6s ease-in-out infinite;
}

/* ---- Oryx Trial — steel with cyan/violet anodizing ---- */
.pf-avatar-wrap.pf-frame-oryx_trial::before {
    background: conic-gradient(from 0deg,
        #0e7490 0% 38%, #22d3ee 44% 50%, #7e22ce 56% 62%, #4c1d95 68% 100%);
    box-shadow:
        inset 0 0 0 1px rgba(103,232,249,.4),
        inset 0 0 12px rgba(0,0,0,.6),
        0 0 18px rgba(103,232,249,.45), 0 0 18px rgba(126,34,206,.45);
    animation: co-spin 18s linear infinite;
}
.pf-avatar-wrap.pf-frame-oryx_trial::after {
    background: conic-gradient(from 180deg,
        #0e7490 0% 45%, #7e22ce 55% 100%);
    animation: co-spin 18s linear infinite reverse;
    opacity: .4;
    filter: blur(5px);
}

/* ---- Oryx Warden — antique bronze sigil ---- */
.pf-avatar-wrap.pf-frame-oryx_warden::before {
    background: conic-gradient(from 30deg,
        #451a03 0%, #78350f 20%, #b45309 35%, #fbbf24 48%,
        #b45309 62%, #78350f 80%, #451a03 100%);
    box-shadow:
        inset 0 0 0 1px rgba(252,211,77,.55),
        inset 0 -3px 10px rgba(69,26,3,.65),
        0 0 22px rgba(180,83,9,.6);
    animation: co-spin 26s linear infinite;
}
.pf-avatar-wrap.pf-frame-oryx_warden::after {
    inset: -12px;
    background: conic-gradient(from 45deg,
        transparent 0 22%, rgba(253,230,138,.7) 22% 23%, transparent 23% 47%,
        rgba(253,230,138,.7) 47% 48%, transparent 48% 72%,
        rgba(253,230,138,.7) 72% 73%, transparent 73% 97%,
        rgba(253,230,138,.7) 97% 98%, transparent 98%);
    filter: blur(.6px);
    animation: co-spin 22s linear infinite reverse;
    opacity: .75;
}

/* ---- Oryx Champion — tempered alloy + starfield ---- */
.pf-avatar-wrap.pf-frame-oryx_champion::before {
    background: conic-gradient(from 0deg,
        #064e5e 0%, #0e7490 15%, #06b6d4 25%,
        #4c1d95 40%, #7e22ce 50%, #a855f7 60%,
        #7c2d12 75%, #b45309 85%, #064e5e 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.35),
        inset 0 0 14px rgba(0,0,0,.7),
        0 0 32px rgba(168,85,247,.55);
    filter: saturate(.95);
    animation: co-spin 14s linear infinite;
}
.pf-avatar-wrap.pf-frame-oryx_champion::after {
    inset: -14px;
    background:
        radial-gradient(1.2px 1.2px at 22% 22%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 80% 30%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 30% 80%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 70% 70%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 52% 12%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 10% 52%, #fff, transparent 60%);
    animation: pf-pulse 3s ease-in-out infinite;
    opacity: .85;
}

/* ---- Prismatic Soul — iridescent holographic (Lvl 500) ---- */
.pf-avatar-wrap.pf-frame-prismatic::before {
    background: conic-gradient(from 0deg,
        #065f46 0%, #0e7490 14%, #1e40af 28%,
        #6d28d9 42%, #be185d 56%, #9a3412 70%,
        #b45309 84%, #065f46 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.5),
        inset 0 0 14px rgba(0,0,0,.65),
        0 0 26px rgba(124,58,237,.55);
    filter: saturate(.9);
    animation: co-spin 24s linear infinite, pf-hue-shift 16s linear infinite;
}

/* ---- Runic Master — engraved stone + glowing sigils (Lvl 750) ---- */
.pf-avatar-wrap.pf-frame-runic_master::before {
    background: conic-gradient(from 0deg,
        #0f172a 0%, #1e293b 20%, #1e3a8a 40%, #3b82f6 50%,
        #1e3a8a 60%, #1e293b 80%, #0f172a 100%);
    box-shadow:
        inset 0 0 0 1px rgba(147,197,253,.5),
        inset 0 0 14px rgba(0,0,0,.75),
        0 0 26px rgba(59,130,246,.6);
    animation: co-spin 30s linear infinite;
}
.pf-avatar-wrap.pf-frame-runic_master::after {
    inset: -12px;
    background: conic-gradient(from 0deg,
        transparent 0 9%, rgba(147,197,253,.9) 9% 10%, transparent 10% 22%,
        rgba(147,197,253,.9) 22% 23%, transparent 23% 36%,
        rgba(147,197,253,.9) 36% 37%, transparent 37% 50%,
        rgba(147,197,253,.9) 50% 51%, transparent 51% 64%,
        rgba(147,197,253,.9) 64% 65%, transparent 65% 78%,
        rgba(147,197,253,.9) 78% 79%, transparent 79% 92%,
        rgba(147,197,253,.9) 92% 93%, transparent 93%);
    animation: co-spin 60s linear infinite;
    filter: drop-shadow(0 0 4px #60a5fa);
}

/* ---- Cosmic Origin — event horizon + accretion (Lvl 1000) ---- */
.pf-avatar-wrap.pf-frame-cosmic_origin { padding: 6px; }
.pf-avatar-wrap.pf-frame-cosmic_origin::before {
    background: radial-gradient(circle at 50% 50%,
        #000 0%, #000 38%, #4c1d95 48%, #06b6d4 60%,
        #f59e0b 72%, #be185d 84%, #050510 100%);
    filter: saturate(1.05);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.35),
        inset 0 0 18px rgba(0,0,0,.9),
        0 0 40px rgba(236,72,153,.55),
        0 0 80px rgba(6,182,212,.35);
    animation: co-spin 8s linear infinite;
}
.pf-avatar-wrap.pf-frame-cosmic_origin::after {
    inset: -30px;
    background:
        radial-gradient(1.5px 1.5px at 12% 15%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 80% 22%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 25% 80%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 70% 85%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 45% 5%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 90% 55%, #fde047, transparent 60%),
        radial-gradient(1.5px 1.5px at 5% 50%, #ec4899, transparent 60%),
        conic-gradient(from 0deg,
            transparent 0 14%, rgba(6,182,212,.65) 14% 16%, transparent 16% 38%,
            rgba(236,72,153,.65) 38% 40%, transparent 40% 62%,
            rgba(253,224,71,.65) 62% 64%, transparent 64% 86%,
            rgba(168,85,247,.65) 86% 88%, transparent 88%);
    animation: co-spin 26s linear infinite, pf-pulse 5s ease-in-out infinite;
    filter: blur(1.5px) drop-shadow(0 0 6px rgba(255,255,255,.5));
}

/* =======================================================================
   IMAGE-MASK FRAMES — Ashim's uploaded PFP frames, processed into luminance
   masks. The pseudo's background (colored gradient) shines through the
   decorative strokes; black parts of the mask hide the element. The
   avatar sits z:2 above and covers the mask's center disk cleanly.

   Each frame:
     ::before — the masked art, tinted by a themed gradient
     ::after  — a colored glow / secondary aura that pulses or shimmers
   The wrap itself never animates, so the avatar image stays crisp.
   ======================================================================= */

/* Shared scaffold for every img-kind frame. Per-frame rules set the PNG via
   --pf-frame-png and the gradient fill via `background` below.

   The ::before becomes a TRUE picture frame: a ring-shaped decoration
   surrounding the avatar. Two mask layers combined via `mask-composite:
   intersect` guarantee that nothing lands on the pfp itself:
     layer 1 — the frame PNG (luminance): white decorations show, black bg hides.
     layer 2 — radial gradient (alpha): transparent over the avatar area
               (hides whatever would land on the face), opaque outside (lets
               layer 1 show normally).
   The gradient stops use calc(100% - inset - N) so the hole always lines up
   with the avatar edge, regardless of wrap size. */
.pf-avatar-wrap[class*="pf-frame-img-"],
.pf-avatar-wrap.pf-frame-inked_chains,
.pf-avatar-wrap.pf-frame-sword_slash,
.pf-avatar-wrap.pf-frame-moonlit_garden,
.pf-avatar-wrap.pf-frame-grimclock,
.pf-avatar-wrap.pf-frame-blossom_text,
.pf-avatar-wrap.pf-frame-grunge_star,
.pf-avatar-wrap.pf-frame-third_eye,
.pf-avatar-wrap.pf-frame-scorpio_pop,
.pf-avatar-wrap.pf-frame-time_seal {
    padding: 4px;
    background: transparent;
    /* How far the ::before extends beyond the wrap edge. The gradient
       cutout below uses this to align the "no-frame" zone with the pfp. */
    --pf-frame-inset: 44px;
}
.pf-avatar-wrap.pf-frame-inked_chains::before,
.pf-avatar-wrap.pf-frame-sword_slash::before,
.pf-avatar-wrap.pf-frame-moonlit_garden::before,
.pf-avatar-wrap.pf-frame-grimclock::before,
.pf-avatar-wrap.pf-frame-blossom_text::before,
.pf-avatar-wrap.pf-frame-grunge_star::before,
.pf-avatar-wrap.pf-frame-third_eye::before,
.pf-avatar-wrap.pf-frame-scorpio_pop::before,
.pf-avatar-wrap.pf-frame-time_seal::before {
    inset: calc(-1 * var(--pf-frame-inset));
    /* Above the avatar so the outer decorations render on top of the
       banner / page, below if we want clean layering. z:3 stays above
       the avatar image inside the wrap. */
    z-index: 3 !important;

    /* Two-layer mask: frame art (luminance) ∩ annulus cutout (alpha).
       The gradient's `closest-side` means 100% == half-width of ::before,
       so `100% - inset` lands exactly on the wrap edge (= avatar edge,
       modulo 4px padding). */
    -webkit-mask-image:
        var(--pf-frame-png),
        radial-gradient(
            circle closest-side at center,
            transparent 0,
            transparent calc(100% - var(--pf-frame-inset) - 2px),
            black       calc(100% - var(--pf-frame-inset) + 8px)
        );
            mask-image:
        var(--pf-frame-png),
        radial-gradient(
            circle closest-side at center,
            transparent 0,
            transparent calc(100% - var(--pf-frame-inset) - 2px),
            black       calc(100% - var(--pf-frame-inset) + 8px)
        );

    -webkit-mask-size: contain, 100% 100%;
            mask-size: contain, 100% 100%;
    -webkit-mask-position: center, center;
            mask-position: center, center;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
    -webkit-mask-mode: luminance, alpha;
            mask-mode: luminance, alpha;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}
.pf-avatar-wrap.pf-frame-inked_chains::after,
.pf-avatar-wrap.pf-frame-sword_slash::after,
.pf-avatar-wrap.pf-frame-moonlit_garden::after,
.pf-avatar-wrap.pf-frame-grimclock::after,
.pf-avatar-wrap.pf-frame-blossom_text::after,
.pf-avatar-wrap.pf-frame-grunge_star::after,
.pf-avatar-wrap.pf-frame-third_eye::after,
.pf-avatar-wrap.pf-frame-scorpio_pop::after,
.pf-avatar-wrap.pf-frame-time_seal::after {
    inset: calc(-1 * var(--pf-frame-inset));
    z-index: -2;
    filter: blur(14px);
    opacity: .55;
    pointer-events: none;
}

/* Per-frame rules: set --pf-frame-png on the wrap (inherited into ::before,
   where the shared mask-image rule above references it), and keep the
   gradient fill + filter + animation on ::before itself. */

/* ---- Inked Chains — crimson brush + chain sway ---- */
.pf-avatar-wrap.pf-frame-inked_chains { --pf-frame-png: url('uploads/frames/inked_chains.png'); }
.pf-avatar-wrap.pf-frame-inked_chains::before {
    background: linear-gradient(135deg, #fecaca, #dc2626 50%, #7f1d1d);
    animation: pf-img-sway 6s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(220,38,38,.7));
}
.pf-avatar-wrap.pf-frame-inked_chains::after {
    background: radial-gradient(circle, rgba(220,38,38,.55), transparent 65%);
    animation: pf-pulse 3s ease-in-out infinite;
}

/* ---- Sword Slash — cyan ink + katana shimmer ---- */
.pf-avatar-wrap.pf-frame-sword_slash { --pf-frame-png: url('uploads/frames/sword_slash.png'); }
.pf-avatar-wrap.pf-frame-sword_slash::before {
    background: linear-gradient(135deg, #cffafe, #22d3ee 50%, #0e7490);
    filter: drop-shadow(0 0 6px rgba(34,211,238,.7));
    animation: pf-img-shimmer 3.5s ease-in-out infinite;
}
.pf-avatar-wrap.pf-frame-sword_slash::after {
    background: radial-gradient(circle, rgba(34,211,238,.55), transparent 65%);
    animation: pf-pulse 4s ease-in-out infinite;
}

/* ---- Moonlit Garden — violet/pink with slow butterfly drift ---- */
.pf-avatar-wrap.pf-frame-moonlit_garden { --pf-frame-png: url('uploads/frames/moonlit_garden.png'); }
.pf-avatar-wrap.pf-frame-moonlit_garden::before {
    background:
        radial-gradient(circle at 30% 30%, #fbcfe8, transparent 60%),
        linear-gradient(135deg, #c084fc, #6d28d9 50%, #1e1b4b);
    filter: drop-shadow(0 0 8px rgba(192,132,252,.75));
    animation: pf-img-drift 7s ease-in-out infinite;
}
.pf-avatar-wrap.pf-frame-moonlit_garden::after {
    background:
        radial-gradient(circle at 30% 70%, rgba(244,114,182,.6), transparent 55%),
        radial-gradient(circle at 70% 30%, rgba(167,139,250,.6), transparent 55%);
    animation: pf-pulse 5s ease-in-out infinite;
}

/* ---- Grim Clock — muted silver/gold, slow clockwise creep ---- */
.pf-avatar-wrap.pf-frame-grimclock { --pf-frame-png: url('uploads/frames/grimclock.png'); }
.pf-avatar-wrap.pf-frame-grimclock::before {
    background: linear-gradient(135deg, #f3f4f6, #9ca3af 50%, #374151);
    filter: drop-shadow(0 0 6px rgba(243,244,246,.55));
    animation: pf-img-ticktock 12s steps(60) infinite;
}
.pf-avatar-wrap.pf-frame-grimclock::after {
    background: radial-gradient(circle, rgba(147,197,253,.4), transparent 70%);
    animation: pf-pulse 4s ease-in-out infinite;
}

/* ---- Blossom Verse — soft pink + pale shimmer ---- */
.pf-avatar-wrap.pf-frame-blossom_text { --pf-frame-png: url('uploads/frames/blossom_text.png'); }
.pf-avatar-wrap.pf-frame-blossom_text::before {
    background: linear-gradient(135deg, #fce7f3, #f9a8d4 50%, #be185d);
    filter: drop-shadow(0 0 6px rgba(249,168,212,.7));
    animation: pf-img-bloom 5s ease-in-out infinite;
}
.pf-avatar-wrap.pf-frame-blossom_text::after {
    background: radial-gradient(circle, rgba(244,114,182,.45), transparent 70%);
    animation: pf-pulse 4.5s ease-in-out infinite;
}

/* ---- Grunge Star — hot pink + cyan, hue-shifting sparkles ---- */
.pf-avatar-wrap.pf-frame-grunge_star { --pf-frame-png: url('uploads/frames/grunge_star.png'); }
.pf-avatar-wrap.pf-frame-grunge_star::before {
    background: conic-gradient(from 0deg, #ec4899, #a855f7, #06b6d4, #ec4899);
    filter: drop-shadow(0 0 8px rgba(236,72,153,.8));
    animation: pf-hue-shift 6s linear infinite, pf-img-shimmer 2.5s ease-in-out infinite;
}
.pf-avatar-wrap.pf-frame-grunge_star::after {
    background:
        radial-gradient(circle at 30% 70%, rgba(236,72,153,.65), transparent 55%),
        radial-gradient(circle at 70% 30%, rgba(6,182,212,.65), transparent 55%);
    animation: pf-pulse 2.5s ease-in-out infinite;
}

/* ---- Third Eye — amber/orange with blink-pulse ---- */
.pf-avatar-wrap.pf-frame-third_eye { --pf-frame-png: url('uploads/frames/third_eye.png'); }
.pf-avatar-wrap.pf-frame-third_eye::before {
    background: linear-gradient(135deg, #fed7aa, #f97316 50%, #7c2d12);
    filter: drop-shadow(0 0 6px rgba(249,115,22,.75));
    animation: pf-img-blink 4s ease-in-out infinite;
}
.pf-avatar-wrap.pf-frame-third_eye::after {
    background: radial-gradient(circle, rgba(249,115,22,.55), transparent 65%);
    animation: pf-pulse 3s ease-in-out infinite;
}

/* ---- Scorpio Pop — Persona-5 red/black with pop bounce ---- */
.pf-avatar-wrap.pf-frame-scorpio_pop { --pf-frame-png: url('uploads/frames/scorpio_pop.png'); }
.pf-avatar-wrap.pf-frame-scorpio_pop::before {
    background: conic-gradient(from 0deg, #fef2f2, #ef4444, #7f1d1d, #ef4444, #fef2f2);
    filter: drop-shadow(0 0 8px rgba(239,68,68,.8));
    animation: pf-img-pop 2.4s ease-in-out infinite;
}
.pf-avatar-wrap.pf-frame-scorpio_pop::after {
    background: radial-gradient(circle, rgba(239,68,68,.6), transparent 65%);
    animation: pf-pulse 2s ease-in-out infinite;
}

/* ---- Time Seal — slow-rotating ORV clock, cyan + pale gold ---- */
.pf-avatar-wrap.pf-frame-time_seal { --pf-frame-png: url('uploads/frames/time_seal.png'); }
.pf-avatar-wrap.pf-frame-time_seal::before {
    background: conic-gradient(from 0deg, #e0f2fe, #67e8f9, #fcd34d, #67e8f9, #e0f2fe);
    filter: drop-shadow(0 0 8px rgba(103,232,249,.75));
    animation: pf-img-slowrot 30s linear infinite;
}
.pf-avatar-wrap.pf-frame-time_seal::after {
    background:
        radial-gradient(circle, rgba(103,232,249,.55), transparent 65%),
        radial-gradient(circle at 80% 80%, rgba(252,211,77,.4), transparent 55%);
    animation: pf-pulse 4s ease-in-out infinite;
}

/* Keyframes for image-frame animations — all act on the pseudo only, so the
   avatar never moves. Kept gentle so the frames feel alive without being
   distracting on a profile page. */
@keyframes pf-img-sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}
@keyframes pf-img-shimmer {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,255,255,.45)) brightness(1); }
    50%      { filter: drop-shadow(0 0 14px rgba(255,255,255,.95)) brightness(1.2); }
}
@keyframes pf-img-drift {
    0%, 100% { transform: translate(0, 0)     rotate(0deg); }
    33%      { transform: translate(2px, -2px) rotate(0.8deg); }
    66%      { transform: translate(-2px, 2px) rotate(-0.8deg); }
}
@keyframes pf-img-ticktock {
    to { transform: rotate(360deg); }
}
@keyframes pf-img-bloom {
    0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 6px rgba(249,168,212,.7)); }
    50%      { transform: scale(1.04);  filter: drop-shadow(0 0 14px rgba(249,168,212,.95)); }
}
@keyframes pf-img-blink {
    0%, 90%, 100% { transform: scaleY(1);   filter: brightness(1); }
    95%           { transform: scaleY(.85); filter: brightness(1.35); }
}
@keyframes pf-img-pop {
    0%, 100% { transform: scale(1)    rotate(0deg); }
    50%      { transform: scale(1.05) rotate(2deg); }
}
@keyframes pf-img-slowrot {
    to { transform: rotate(-360deg); }
}

/* =======================================================================
   ANIME EMBLEM FRAMES — SVG ring overlays
   Each frame paints decorative anime art (chains, sigils, petals, stars)
   in a ring around the avatar. The SVGs are designed with a fully empty
   center, so the avatar is never covered. Per-frame rules set the SVG
   data URI and the glow accent color via custom properties.
   The wrap keeps its existing size — only the ::before / ::after extend.
   ======================================================================= */

.pf-avatar-wrap.pf-frame-voidblade_sigil,
.pf-avatar-wrap.pf-frame-gilded_oath,
.pf-avatar-wrap.pf-frame-astral_petals {
    overflow: visible;
    /* default accent — overridden per frame below */
    --pf-anime-glow: rgba(167, 139, 250, .85);
    /* how far the ring extends past the wrap, as % of wrap size */
    --pf-anime-spread: 44%;
}

/* The ring decoration — sits ABOVE the avatar so its outer parts overlap
   the page; the SVG's empty center keeps the face fully visible. */
.pf-avatar-wrap.pf-frame-voidblade_sigil::before,
.pf-avatar-wrap.pf-frame-gilded_oath::before,
.pf-avatar-wrap.pf-frame-astral_petals::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--pf-anime-spread));
    border-radius: 0;
    background-image: var(--pf-anime-svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 0 4px var(--pf-anime-glow));
    animation: pf-anime-orbit 60s linear infinite;
    transform-origin: center;
}

/* Soft pulsing glow halo behind the avatar */
.pf-avatar-wrap.pf-frame-voidblade_sigil::after,
.pf-avatar-wrap.pf-frame-gilded_oath::after,
.pf-avatar-wrap.pf-frame-astral_petals::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--pf-anime-spread) * 0.55);
    border-radius: 50%;
    background: radial-gradient(circle, var(--pf-anime-glow), transparent 70%);
    filter: blur(14px);
    opacity: .5;
    z-index: -2;
    pointer-events: none;
    animation: pf-anime-pulse 4.2s ease-in-out infinite;
}

@keyframes pf-anime-orbit { to { transform: rotate(360deg); } }
@keyframes pf-anime-pulse {
    0%, 100% { opacity: .32; transform: scale(1); }
    50%      { opacity: .58; transform: scale(1.06); }
}

/* ---- Voidblade Sigil — purple, sword-star + chains + shards ---- */
.pf-avatar-wrap.pf-frame-voidblade_sigil {
    --pf-anime-glow: rgba(167, 139, 250, .9);
    --pf-anime-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><circle cx='100' cy='100' r='94' stroke='%23ffffff' stroke-width='.7' stroke-dasharray='2 5' opacity='.55'/><circle cx='100' cy='100' r='74' stroke='%23ffffff' stroke-width='.5' opacity='.28'/><g transform='translate(100 14) rotate(8)'><path d='M0 -14 L3.5 -3.5 L14 0 L3.5 3.5 L0 14 L-3.5 3.5 L-14 0 L-3.5 -3.5 Z' fill='%23ffffff'/><path d='M0 -7 L1.8 -1.8 L7 0 L1.8 1.8 L0 7 L-1.8 1.8 L-7 0 L-1.8 -1.8 Z' fill='%23000000'/></g><g stroke='%23ffffff' stroke-width='1.4' fill='none' opacity='.85'><ellipse cx='176' cy='66' rx='4.5' ry='2.2' transform='rotate(-35 176 66)'/><ellipse cx='184' cy='78' rx='4.5' ry='2.2' transform='rotate(-35 184 78)'/><ellipse cx='190' cy='92' rx='4.5' ry='2.2' transform='rotate(-35 190 92)'/><ellipse cx='188' cy='106' rx='4.5' ry='2.2' transform='rotate(-35 188 106)'/></g><g fill='%23ffffff' opacity='.9'><path d='M22 178 L34 184 L20 192 L12 184 Z'/><path d='M8 168 L18 174 L12 184 L4 178 Z' opacity='.7'/></g><path d='M30 40 Q 16 48 18 64 T 30 88' stroke='%23ffffff' stroke-width='.9' fill='none' opacity='.7'/><g fill='%23ffffff'><circle cx='168' cy='30' r='1.4'/><circle cx='150' cy='18' r='.8'/><circle cx='42' cy='148' r='1.2'/><circle cx='14' cy='114' r='1'/><circle cx='174' cy='160' r='1.3'/><circle cx='62' cy='192' r='.9'/></g><g fill='%23ffffff'><path d='M196 130 L200 134 L196 138 L192 134 Z' opacity='.85'/><path d='M4 86 L8 90 L4 94 L0 90 Z' opacity='.75'/><path d='M120 196 L124 200 L120 204 L116 200 Z' opacity='.7'/></g><g fill='%23ffffff'><ellipse cx='52' cy='40' rx='2' ry='4.5' transform='rotate(45 52 40)' opacity='.6'/><ellipse cx='160' cy='184' rx='2' ry='4.5' transform='rotate(-30 160 184)' opacity='.5'/></g></svg>");
}

/* ---- Gilded Oath — gold, crown + laurel + flourish ---- */
.pf-avatar-wrap.pf-frame-gilded_oath {
    --pf-anime-glow: rgba(251, 191, 36, .9);
    --pf-anime-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><circle cx='100' cy='100' r='95' stroke='%23ffffff' stroke-width='.6' opacity='.5'/><circle cx='100' cy='100' r='90' stroke='%23ffffff' stroke-width='.5' stroke-dasharray='1 3' opacity='.4'/><g transform='translate(100 12)' fill='%23ffffff'><path d='M-16 6 L-12 -6 L-6 2 L0 -10 L6 2 L12 -6 L16 6 Z'/><path d='M-16 6 L16 6 L14 10 L-14 10 Z'/><circle cx='0' cy='-12' r='1.8'/><circle cx='-12' cy='-6' r='1.2'/><circle cx='12' cy='-6' r='1.2'/></g><g fill='%23ffffff' opacity='.85'><ellipse cx='14' cy='80' rx='2' ry='5' transform='rotate(-30 14 80)'/><ellipse cx='18' cy='90' rx='2' ry='5' transform='rotate(-15 18 90)'/><ellipse cx='20' cy='102' rx='2' ry='5'/><ellipse cx='18' cy='114' rx='2' ry='5' transform='rotate(15 18 114)'/><ellipse cx='14' cy='124' rx='2' ry='5' transform='rotate(30 14 124)'/></g><g fill='%23ffffff' opacity='.85'><ellipse cx='186' cy='80' rx='2' ry='5' transform='rotate(30 186 80)'/><ellipse cx='182' cy='90' rx='2' ry='5' transform='rotate(15 182 90)'/><ellipse cx='180' cy='102' rx='2' ry='5'/><ellipse cx='182' cy='114' rx='2' ry='5' transform='rotate(-15 182 114)'/><ellipse cx='186' cy='124' rx='2' ry='5' transform='rotate(-30 186 124)'/></g><g stroke='%23ffffff' stroke-width='.9' fill='none' opacity='.8'><path d='M70 188 Q 90 196 110 188 Q 130 180 140 192'/></g><g fill='%23ffffff' opacity='.9'><path d='M100 196 L104 200 L100 204 L96 200 Z'/></g><g fill='%23ffffff'><circle cx='40' cy='40' r='1.3'/><circle cx='160' cy='38' r='1.3'/><circle cx='44' cy='160' r='1'/><circle cx='156' cy='160' r='1'/><circle cx='30' cy='110' r='.8'/><circle cx='170' cy='110' r='.8'/><circle cx='100' cy='180' r='.8' opacity='.8'/></g></svg>");
}

/* ---- Astral Petals — blue, cherry-blossom drift ---- */
.pf-avatar-wrap.pf-frame-astral_petals {
    --pf-anime-glow: rgba(125, 211, 252, .9);
    --pf-anime-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><circle cx='100' cy='100' r='94' stroke='%23ffffff' stroke-width='.5' stroke-dasharray='2 4' opacity='.45'/><g fill='%23ffffff' opacity='.9'><path d='M100 12 Q 96 6 100 0 Q 104 6 100 12 Z'/><path d='M86 18 Q 80 14 82 6 Q 90 8 86 18 Z' opacity='.85'/><path d='M118 14 Q 124 8 124 0 Q 116 4 118 14 Z' opacity='.85'/><path d='M134 22 Q 142 18 144 8 Q 134 12 134 22 Z' opacity='.7'/><path d='M186 60 Q 194 60 196 52 Q 188 50 186 60 Z' opacity='.7'/><path d='M190 92 Q 198 92 198 100 Q 190 100 190 92 Z' opacity='.65'/><path d='M76 184 Q 70 188 64 184 Q 70 178 76 184 Z' opacity='.7'/><path d='M120 188 Q 130 192 138 186 Q 130 180 120 188 Z' opacity='.6'/><path d='M14 80 Q 6 76 4 84 Q 12 86 14 80 Z' opacity='.7'/><path d='M18 124 Q 8 128 6 136 Q 14 134 18 124 Z' opacity='.6'/></g><g stroke='%23ffffff' stroke-width='.5' fill='none' opacity='.4'><path d='M100 14 Q 130 30 160 60'/><path d='M14 110 Q 30 150 70 180'/></g><g fill='%23ffffff'><circle cx='50' cy='50' r='1.4'/><circle cx='160' cy='150' r='1.4'/><circle cx='30' cy='150' r='1'/><circle cx='150' cy='40' r='1'/><circle cx='100' cy='180' r='.8'/><circle cx='180' cy='110' r='.8'/></g><g fill='%23ffffff' opacity='.85'><path d='M64 30 L68 34 L64 38 L60 34 Z'/><path d='M170 170 L174 174 L170 178 L166 174 Z' opacity='.7'/></g></svg>");
}

/* Preview swatch — overlays inside the editor grid render smaller frames.
   The frame is shown as an empty .pf-avatar-wrap so only the ring animates. */
.co-swatch-frame.co-swatch-frame-isekai {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.co-swatch-frame-isekai > .pf-avatar-wrap {
    width: 42px; height: 42px;
    display: block;
}
.co-swatch-frame-isekai .co-mini-avatar {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #1f1430, #0a0514);
    position: relative;
    z-index: 1;                /* sit above the ::before ring */
}
.co-swatch-frame-isekai > .pf-avatar-wrap::before {
    inset: 0;
}
.co-swatch-frame-isekai > .pf-avatar-wrap::after {
    /* Clamp the outer aura so big frames (cosmic_origin, celestial_halo)
       don't overflow into neighboring cards. */
    inset: -6px !important;
}

/* level chip on avatar */
.pf-level-chip {
    position: absolute;
    bottom: -4px; right: -4px;
    z-index: 3;
    background: var(--pf-accent);
    color: #fff;
    font-size: .68rem; font-weight: 800;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 2px var(--bg-card);
    font-variant-numeric: tabular-nums;
}

/* The global `.pr-dot` sits at bottom-right of its host, which collides
   with the profile's level chip. Lift the dot to the top-right on
   profile avatars only. */
.pf-avatar-wrap > .pr-dot {
    top: 2px;
    right: 2px;
    bottom: auto;
}

.pf-status {
    font-size: .88rem;
    color: var(--text-secondary);
    margin: 2px 0 6px;
    font-style: italic;
    opacity: .92;
}
.pf-title {
    font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--pf-accent);
    margin: 0 0 4px;
}

/* ---- me.php identity header: re-layout to accommodate banner ---- */
.me-head {
    padding: 0 0 24px 0;
    overflow: hidden;
}
.me-head-main {
    position: relative;
    z-index: 2;
    padding: 96px 28px 0;   /* leave room for the 140px banner behind */
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.me-head .me-head-left { align-items: flex-start; }
.me-head .me-avatar {
    width: 104px; height: 104px;
    box-shadow: 0 12px 28px rgba(0,0,0,.38), 0 0 0 4px var(--bg-card);
    display: block;
}
.me-head-eyebrow { color: var(--pf-accent); }
.me-head-name    { margin-top: 2px; }

.pf-level-bar {
    margin-top: 10px;
    max-width: 420px;
}
.pf-level-bar-rail {
    height: 6px;
    background: rgba(255,255,255,.07);
    border-radius: 999px;
    overflow: hidden;
}
.pf-level-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pf-accent), #ff8fd1);
    border-radius: 999px;
    transition: width 450ms cubic-bezier(.2,.8,.2,1);
}
.pf-level-bar-meta {
    font-size: .72rem;
    color: var(--text-faint);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.pf-level-bar-meta strong { color: var(--text-secondary); font-weight: 700; }

.me-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--pf-accent); color: #fff;
    border: 0;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: .86rem; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(167,139,250,.32);
    transition: transform 140ms ease, filter 140ms ease;
}
.me-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.me-btn-primary:active { transform: scale(.98); }

/* ---- profile.php public header layout with banner ---- */
.pf-head { padding-top: 140px !important; position: relative; }
.pf-head .pf-banner { height: 200px; }
.pf-head .pf-avatar { position: relative; z-index: 2; }

/* ---- mobile ---- */
@media (max-width: 640px) {
    .me-head-main { padding: 80px 18px 0; }
    .me-head .me-avatar { width: 88px; height: 88px; }
    .pf-banner { height: 160px; }
    .pf-head { padding-top: 110px !important; }
}

/* ============================================================
   COSMETICS EDITOR MODAL (co-*)
   ============================================================ */

.co-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 240ms ease;
}
.co-modal.co-open { opacity: 1; }
.co-backdrop {
    position: absolute; inset: 0;
    background: rgba(5, 5, 15, .65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.co-shell {
    position: relative;
    background: var(--bg-card);
    border-radius: 20px;
    width: min(720px, 94vw);
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 40px 100px rgba(0,0,0,.55);
    transform: translateY(20px) scale(.98);
    transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.co-modal.co-open .co-shell { transform: translateY(0) scale(1); }

.co-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px;
    padding: 24px 24px 8px;
}
.co-title { font-size: 1.25rem; font-weight: 800; color: var(--text-heading); margin: 0; letter-spacing: -0.01em; }
.co-sub   { font-size: .85rem; color: var(--text-faint); margin: 4px 0 0; }
.co-close {
    background: transparent; border: 0;
    color: var(--text-muted);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background 160ms ease, color 160ms ease;
}
.co-close:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }

/* ---- live preview ---- */
.co-preview {
    margin: 12px 24px 16px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-elevated);
    position: relative;
}
.co-prev-banner {
    height: 84px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    position: relative;
    overflow: hidden;
}
.co-prev-banner .pf-overlay {
    inset: 0;
    height: auto;
}
.co-prev-banner-drag {
    cursor: grab;
    touch-action: none;
}
.co-prev-banner-drag:active,
.co-prev-banner-dragging { cursor: grabbing; }
.co-prev-banner-drag::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35));
    opacity: 0; transition: opacity .18s;
}
.co-prev-banner-drag:hover::after,
.co-prev-banner-dragging::after { opacity: 1; }
.co-prev-banner-hint {
    position: absolute;
    right: 10px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font: 600 10px/1 system-ui, -apple-system, sans-serif;
    letter-spacing: .3px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    opacity: .85;
}
.co-prev-banner-dragging .co-prev-banner-hint { opacity: 0; }
.co-prev-body {
    display: flex; align-items: center; gap: 14px;
    padding: 0 18px 16px;
    margin-top: -28px;
    position: relative;
}
.co-prev-avatar-wrap {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--bg-elevated);
}
.co-prev-avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.co-prev-avatar-init {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #a78bfa, #ff8fd1);
    color: #fff;
    font-weight: 800; font-size: 1.4rem;
}
.co-prev-lvl {
    position: absolute; bottom: -4px; right: -4px;
    background: var(--pf-accent, #a78bfa); color: #fff;
    font-size: .65rem; font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--bg-elevated);
}
.co-prev-text { min-width: 0; }
.co-prev-title {
    font-size: .7rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--pf-accent, #a78bfa);
}
.co-prev-name {
    font-size: 1.15rem; font-weight: 800;
    color: var(--text-heading);
    line-height: 1.15;
    margin-top: 2px;
}
.co-prev-status {
    font-size: .82rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 4px 0 0;
}

/* ---- tabs ---- */
.co-tabs {
    display: flex; gap: 4px;
    padding: 4px;
    margin: 0 24px 16px;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
}
.co-tab {
    flex: 1;
    background: transparent; border: 0;
    color: var(--text-muted);
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .86rem; font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.co-tab.active { background: var(--pf-accent, #a78bfa); color: #fff; }

/* ---- grid ---- */
.co-body { padding: 0 24px 24px; }
.co-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.co-card {
    display: flex; flex-direction: column;
    padding: 12px;
    background: var(--bg-elevated);
    border: 0; border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: transform 160ms cubic-bezier(.2,.8,.2,1),
                background 160ms ease,
                box-shadow 200ms ease;
    position: relative;
}
.co-card.co-unlocked:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.06);
}
.co-card:active { transform: scale(.985); }
.co-card.co-locked { opacity: .55; cursor: not-allowed; }
.co-card.co-equipped {
    box-shadow: 0 0 0 2px var(--pf-accent);
}

.co-swatch {
    width: 100%; height: 60px;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #222;
    position: relative;
    overflow: hidden;
}
/* Preview overlays inside the editor grid: scale to swatch, no bottom fade. */
.co-swatch-overlay .pf-overlay {
    position: absolute;
    inset: 0;
    height: auto;
    z-index: 1;
    --pf-ov-s: 1;           /* show swatches at full strength regardless of user slider */
    -webkit-mask-image: none;
            mask-image: none;
}

/* Price tag on priced cosmetic cards */
.co-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.co-price-coin  { color: #fbbf24; }
.co-price-token { color: #a78bfa; }
.co-card-buy {
    color: #fcd34d;
    font-weight: 600;
}
.co-card.co-buyable {
    /* Affordable but not yet purchased — treat as actionable, not locked */
    opacity: 1;
    cursor: pointer;
    border-color: rgba(252,211,77,.4);
}
.co-card.co-buyable:hover {
    border-color: rgba(252,211,77,.7);
    box-shadow: 0 0 0 1px rgba(252,211,77,.3);
}

/* Overlay strength slider */
.co-strength {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--bg-elevated, rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
}
.co-strength-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    flex: 0 0 auto;
}
.co-strength input[type="range"] {
    flex: 1 1 auto;
    accent-color: var(--pf-accent, #a78bfa);
}
.co-strength-val {
    font-size: .75rem;
    color: var(--text-muted, rgba(232,228,245,.65));
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.co-swatch-accent {
    height: 40px;
}
.co-swatch-frame {
    height: 56px;
    border-radius: 50%;
    width: 56px;
    margin: 0 auto 10px;
    background: var(--bg-card);
}

.co-card-title {
    font-size: .88rem; font-weight: 700;
    color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-card-meta {
    font-size: .7rem;
    color: var(--text-faint);
    margin-top: 3px;
    display: inline-flex; align-items: center; gap: 4px;
}
.co-card-eq { color: var(--pf-accent); font-weight: 700; }
.co-card-req { color: var(--text-faint); }
.co-card-req svg { opacity: .8; }
.co-card-upload { color: var(--pf-accent); font-weight: 700; }
.co-card-upload svg { opacity: .9; }

/* "custom" tile: dashed outline when empty to hint at upload */
.co-card-custom.co-unlocked:not(.co-equipped) .co-swatch {
    outline: 1px dashed rgba(255,255,255,.18);
    outline-offset: -2px;
}

/* ============================================================
   PRESENCE (pr-*)
   Status dots, activity lines, privacy toggle. Minimal colors:
     online  = soft green   idle = amber   offline = dim grey
   ============================================================ */

/* shared status dot overlaid on any avatar container */
.pr-host { }
.pr-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6b7080;
    box-shadow: 0 0 0 2px var(--bg-card);
    z-index: 4;
    transition: background 200ms ease, box-shadow 200ms ease;
    pointer-events: none;
}
.pr-dot-online    { background: #22c55e; box-shadow: 0 0 0 2px var(--bg-card), 0 0 8px rgba(34,197,94,.55); }
.pr-dot-idle      { background: #f59e0b; box-shadow: 0 0 0 2px var(--bg-card), 0 0 6px rgba(245,158,11,.40); }
.pr-dot-offline   { background: #555866; }
.pr-dot-invisible { background: #555866; }

/* size down on smaller avatars */
.ac-ico .pr-dot,
.me-head .me-avatar + .pr-dot { width: 10px; height: 10px; }

/* profile page presence line */
.pf-presence {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 6px 0 0;
    min-height: 1em;
}
.pf-presence-on   { color: #22c55e; font-weight: 600; }
.pf-presence-idle { color: #f59e0b; font-weight: 600; }

/* messages list: activity text replaces preview when online */
.msg-friend-activity {
    color: var(--pf-accent, var(--link-color)) !important;
    font-style: italic;
}
.msg-friend-item .msg-dot { /* legacy static dot — we hide via JS, keep rule defensive */ }

/* chat header status text uses the same palette */
.msg-status-online { color: #22c55e !important; }
.msg-status-idle   { color: #f59e0b !important; }
.msg-status-offline { color: var(--text-faint); }

/* ============================================================
   PRIVACY TOGGLE (pr-priv-*) on me.php
   ============================================================ */
.pr-privacy-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    position: relative;
    overflow: hidden;
}
.pr-privacy-card::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(520px 180px at 85% -20%, rgba(167,139,250,.08), transparent 70%);
    pointer-events: none;
}
.pr-privacy-head { margin-bottom: 14px; position: relative; }
.pr-privacy-head h3 {
    font-size: 1.05rem; font-weight: 700;
    color: var(--text-heading); margin: 0;
    letter-spacing: -0.005em;
}
.pr-privacy-head p {
    font-size: .82rem;
    color: var(--text-faint);
    margin: 3px 0 0;
}

.pr-privacy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    position: relative;
}
.pr-priv-opt {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px;
    border: 0;
    background: rgba(255,255,255,.025);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, background 180ms ease,
                box-shadow 200ms ease;
}
.pr-priv-opt:hover { transform: translateY(-1px); background: rgba(255,255,255,.045); }
.pr-priv-opt:active { transform: scale(.99); }
.pr-priv-active {
    background: rgba(167,139,250,.10) !important;
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.35);
}
.pr-priv-ico {
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
    margin-top: 3px;
}
/* dots on privacy cards use the same colour as live status */
.pr-priv-opt .pr-dot {
    position: static; width: 12px; height: 12px;
    box-shadow: 0 0 0 2px var(--bg-card);
}
.pr-priv-ico-online {
    background: #22c55e;
    position: relative;
}
.pr-priv-ico-online::after {
    content: ""; position: absolute; inset: -4px;
    border-radius: 50%; border: 2px solid rgba(34,197,94,.35);
}
.pr-priv-ico-invisible {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--text-faint);
    position: relative;
}
.pr-priv-ico-invisible::after {
    content: ""; position: absolute; inset: 6px;
    background: var(--text-faint);
    border-radius: 50%;
}
.pr-priv-txt { min-width: 0; }
.pr-priv-txt strong {
    display: block;
    font-size: .9rem; font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 2px;
}
.pr-priv-txt span {
    font-size: .76rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 520px) {
    .pr-privacy-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WEEKLY CHALLENGES (ch-* + sg-ch-*)
   ============================================================ */

/* accent color per guild */
.ch-accent-artisan { --ch-accent: #7dd3fc; }
.ch-accent-writer  { --ch-accent: #fbbf24; }
.ch-accent-editor  { --ch-accent: #f472b6; }
.ch-body .ch { max-width: 1160px; margin: 0 auto; padding: 16px 20px 96px; position: relative; z-index: 1; }

/* --- homepage featured banner (sg-*) --- */
.sg-challenge-section { padding: 24px 16px; display: flex; justify-content: center; }
.sg-challenge-wrap { width: 100%; max-width: 920px; }
.sg-challenge-banner {
    --ch-accent: #a78bfa;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 20px 24px;
    background:
        linear-gradient(135deg, rgba(167,139,250,.16), rgba(255,143,209,.08)),
        var(--bg-card);
    border-radius: 18px;
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: 0 14px 36px rgba(0,0,0,.26);
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease;
    position: relative; overflow: hidden;
}
.sg-challenge-banner::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(500px 180px at 10% 0%, rgba(167,139,250,.18), transparent 70%);
    pointer-events: none;
}
.sg-challenge-banner:hover {
    transform: translateY(-2px);
    color: var(--text-primary);
    box-shadow: 0 22px 48px rgba(167,139,250,.18);
}
.sg-ch-left { min-width: 0; position: relative; z-index: 1; }
.sg-ch-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sg-ch-label {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--link-color);
}
.sg-ch-title {
    font-size: 1.35rem; font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 4px;
}
.sg-ch-desc {
    font-size: .88rem;
    color: var(--text-muted);
    margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sg-ch-meta {
    display: flex; align-items: center; gap: 14px;
    font-size: .78rem; color: var(--text-faint);
}
.sg-ch-count strong, .sg-ch-timer strong { color: var(--text-secondary); }
.sg-ch-timer {
    color: var(--link-color);
    font-weight: 700;
}

.sg-ch-thumbs {
    display: flex; gap: 6px;
    position: relative; z-index: 1;
}
.sg-ch-thumb {
    width: 56px; height: 56px;
    border-radius: 10px;
    background: var(--bg-elevated) center/cover;
}
.sg-ch-thumb-empty { background: var(--bg-elevated); }

.sg-ch-cta {
    padding: 11px 18px;
    background: var(--link-color); color: #fff;
    border-radius: 10px;
    font-weight: 700; font-size: .88rem;
    box-shadow: 0 8px 22px rgba(167,139,250,.30);
    position: relative; z-index: 1;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .sg-challenge-banner {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
    }
    .sg-ch-thumbs { order: 3; }
    .sg-ch-cta { order: 4; width: 100%; text-align: center; }
}

/* --- list page --- */
.ch-hero {
    padding: 40px 4px 8px;
    max-width: 620px;
}
.ch-hero-eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--link-color);
    background: rgba(167,139,250,.10);
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.ch-hero-title {
    font-size: clamp(2rem, 4.4vw, 2.6rem);
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.ch-hero-sub {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    max-width: 56ch;
}

.ch-filters { margin: 20px 0 0; display: flex; gap: 8px; padding: 6px; background: rgba(255,255,255,.03); border-radius: 999px; width: fit-content; }

.ch-section { margin-top: 32px; }
.ch-section-title {
    font-size: 1.1rem; font-weight: 700;
    color: var(--text-heading); margin: 0 0 12px 2px;
    letter-spacing: -0.005em;
}
.ch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.ch-card {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.ch-card:hover {
    transform: translateY(-3px);
    background: var(--bg-elevated);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    color: var(--text-primary);
}
.ch-card-cover {
    aspect-ratio: 16 / 9;
    background: var(--bg-elevated) center/cover;
    position: relative;
}
.ch-card-cover-empty {
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 2rem;
    color: #fff;
}
.ch-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ch-card-row  { display: flex; align-items: center; gap: 8px; }
.ch-card-title { font-size: 1.04rem; font-weight: 700; color: var(--text-heading); line-height: 1.3; }
.ch-card-desc  {
    font-size: .84rem; color: var(--text-muted); margin: 2px 0 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch-card-meta  { font-size: .76rem; color: var(--text-faint); margin-top: auto; }

.ch-badge {
    font-size: .66rem; font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: .04em;
}
.ch-badge-active   { background: rgba(34,197,94,.14); color: #22c55e; }
.ch-badge-voting   { background: rgba(245,158,11,.14); color: #f59e0b; }
.ch-badge-closed   { background: rgba(255,255,255,.08); color: var(--text-faint); }
.ch-badge-upcoming { background: rgba(167,139,250,.14); color: var(--link-color); }

.ch-empty { display: flex; justify-content: center; padding: 24px 0; }
.ch-empty-line { color: var(--text-faint); text-align: center; padding: 16px; }

/* --- detail page --- */
.ch-back {
    background: transparent; border: 0;
    color: var(--text-secondary); font-size: .9rem;
    padding: 6px 10px;
    border-radius: 8px;
    margin: 24px 0 16px;
    cursor: pointer;
    transition: background 160ms ease;
}
.ch-back:hover { background: rgba(255,255,255,.05); color: var(--text-heading); }

.ch-detail-hero {
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0,0,0,.26);
    margin-bottom: 16px;
    position: relative;
}
.ch-detail-cover {
    aspect-ratio: 3 / 1;
    background: var(--bg-elevated) center/cover;
    position: relative;
}
.ch-detail-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(20,20,40,.65) 100%);
}
.ch-detail-text { padding: 24px 28px; }
.ch-detail-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ch-detail-title { font-size: 1.8rem; font-weight: 800; color: var(--text-heading); letter-spacing: -0.01em; margin: 0 0 6px; }
.ch-detail-desc  { color: var(--text-secondary); font-size: .96rem; max-width: 70ch; margin: 0 0 14px; }
.ch-detail-meta  {
    display: flex; gap: 18px; flex-wrap: wrap;
    font-size: .82rem; color: var(--text-faint);
}
.ch-detail-meta strong { color: var(--text-heading); }

.ch-submit-wrap:empty { display: none; }
.ch-submit-state {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px;
    background: var(--bg-card); border-radius: 14px;
    margin-bottom: 16px;
    color: var(--text-secondary); font-size: .9rem;
}
.ch-submit-state strong { color: var(--text-heading); }
.ch-submit-state-offer {
    background: linear-gradient(135deg, rgba(167,139,250,.14), rgba(255,143,209,.08)),
                var(--bg-card);
}
.ch-btn-primary {
    background: var(--link-color); color: #fff;
    border: 0; padding: 10px 18px;
    border-radius: 10px;
    font-size: .88rem; font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}
.ch-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ch-btn-ghost {
    background: rgba(255,255,255,.08); color: var(--text-heading);
    border: 0; padding: 8px 14px;
    border-radius: 8px;
    font-size: .82rem; font-weight: 600;
    cursor: pointer;
}
.ch-btn-ghost:hover { background: rgba(255,255,255,.14); }

.ch-subs-head { display: flex; align-items: baseline; justify-content: space-between; }
.ch-subs-count { font-size: .82rem; color: var(--text-faint); }

.ch-subs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.ch-sub {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none; color: var(--text-primary);
    position: relative;
    transition: transform 180ms ease, background 180ms ease;
}
.ch-sub:hover { transform: translateY(-2px); background: var(--bg-elevated); color: var(--text-primary); }
.ch-sub-thumb {
    aspect-ratio: 4 / 3;
    background: var(--bg-elevated) center/cover;
}
.ch-sub-thumb-empty { background: var(--bg-elevated); }
.ch-sub-crown, .ch-sub-rank {
    position: absolute; top: 8px; right: 8px;
    padding: 4px 8px;
    background: rgba(0,0,0,.55);
    border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ch-sub-crown {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1b2e;
}
.ch-sub-winner {
    box-shadow: 0 0 0 2px #fbbf24, 0 14px 32px rgba(251,191,36,.18);
}
.ch-sub-body { padding: 10px 12px 12px; min-width: 0; }
.ch-sub-title {
    font-size: .9rem; font-weight: 700;
    color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 6px;
}
.ch-sub-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: .76rem; color: var(--text-muted);
}
.ch-sub-avatar {
    width: 20px; height: 20px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
}
.ch-sub-avatar-init {
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .66rem; font-weight: 700;
}
.ch-sub-user { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sub-vote { color: var(--link-color); font-weight: 700; }

/* --- submit-picker modal --- */
.ch-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 200ms ease;
}
.ch-modal-open { opacity: 1; }
.ch-modal-back {
    position: absolute; inset: 0;
    background: rgba(5,5,15,.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ch-modal-shell {
    position: relative;
    background: var(--bg-card);
    border-radius: 16px;
    width: min(520px, 92vw); max-height: 80vh;
    overflow: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.ch-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px 10px;
}
.ch-modal-head h3 { margin: 0; font-size: 1.05rem; color: var(--text-heading); }
.ch-modal-close {
    background: transparent; border: 0; font-size: 1.5rem;
    color: var(--text-muted); cursor: pointer;
    padding: 4px 10px; border-radius: 8px;
}
.ch-modal-close:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.ch-modal-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.ch-modal-row {
    display: flex; gap: 12px; align-items: center;
    background: transparent; border: 0;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease;
}
.ch-modal-row:hover { background: var(--bg-elevated); }
.ch-modal-thumb {
    width: 50px; height: 50px;
    border-radius: 8px;
    background: var(--bg-elevated) center/cover;
    flex-shrink: 0;
}
.ch-modal-title { font-weight: 700; font-size: .9rem; color: var(--text-heading); margin-bottom: 2px; }
.ch-modal-date  { font-size: .72rem; color: var(--text-faint); }
.ch-modal-empty { padding: 28px 20px; text-align: center; color: var(--text-muted); font-size: .88rem; }

/* --- admin list --- */
.ca-list { display: flex; flex-direction: column; gap: 8px; }
.ca-list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; background: var(--bg-card); border-radius: 12px;
}
.ca-list-cover {
    width: 72px; height: 44px;
    border-radius: 8px;
    background: var(--bg-elevated) center/cover;
    flex-shrink: 0;
}
.ca-list-body { flex: 1; min-width: 0; }
.ca-list-title { color: var(--text-heading); font-weight: 600; }
.ca-list-meta  { font-size: .76rem; color: var(--text-faint); margin-top: 2px; }
.adm-badge-active   { background: rgba(34,197,94,.14); color: #22c55e; }
.adm-badge-voting   { background: rgba(245,158,11,.14); color: #f59e0b; }
.adm-badge-closed   { background: rgba(255,255,255,.08); color: var(--text-faint); }
.adm-badge-upcoming { background: rgba(167,139,250,.14); color: var(--link-color); }

.ca-subs { display: flex; flex-direction: column; gap: 6px; }
.ca-sub-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; background: var(--bg-card); border-radius: 10px;
}
.ca-sub-row.is-winner { box-shadow: inset 0 0 0 1px #fbbf24; }
.ca-sub-thumb {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: var(--bg-elevated) center/cover;
    flex-shrink: 0;
}
.ca-sub-meta { flex: 1; min-width: 0; }
.ca-sub-title { font-weight: 600; color: var(--text-heading); font-size: .88rem; }
.ca-sub-sub { font-size: .74rem; color: var(--text-faint); margin-top: 2px; }
.ca-star {
    background: rgba(255,255,255,.05); border: 0;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    font-weight: 700; font-size: .84rem;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.ca-star:hover { background: rgba(255,255,255,.10); color: #fbbf24; }
.is-winner .ca-star { background: #fbbf24; color: #1a1b2e; }

/* ============================================================
   NOTIFICATIONS (nav-bell + notif-*)
   Bell in header, dropdown panel, minimal list.
   ============================================================ */

.nav-bell {
    position: relative;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 160ms ease, transform 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-bell:hover { background: rgba(255,255,255,.06); }
.nav-bell:active { transform: scale(.94); }
.nav-bell-has-unread svg {
    animation: nav-bell-wiggle 1.8s ease-in-out 1;
}
@keyframes nav-bell-wiggle {
    0%,100% { transform: rotate(0); }
    15% { transform: rotate(-10deg); }
    30% { transform: rotate(10deg); }
    45% { transform: rotate(-6deg); }
    60% { transform: rotate(4deg); }
}

.nav-bell-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #ef4444; color: #fff;
    border-radius: 999px;
    font-size: .62rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px rgba(10,10,22,.85);
    font-variant-numeric: tabular-nums;
}

/* dropdown */
.notif-overlay {
    position: fixed; inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 90;
}
.notif-overlay-on { pointer-events: auto; }

.notif-panel {
    position: fixed;
    top: 64px; right: 14px;
    width: min(380px, calc(100vw - 28px));
    max-height: calc(100vh - 84px);
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55),
                0 0 0 1px rgba(255,255,255,.04);
    z-index: 95;
    display: flex; flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}
.notif-panel-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.notif-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.notif-panel-head h3 {
    margin: 0; font-size: .95rem; font-weight: 700;
    color: var(--text-heading);
}
.notif-mark-all {
    background: transparent; border: 0;
    color: var(--link-color);
    font-size: .76rem; font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 160ms ease;
}
.notif-mark-all:hover { background: rgba(167,139,250,.10); }

.notif-panel-body {
    flex: 1; overflow-y: auto;
    scrollbar-width: thin;
}

/* row */
.notif-row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 16px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.02);
    transition: background 160ms ease;
    position: relative;
}
.notif-row:hover { background: rgba(255,255,255,.03); color: var(--text-primary); }
.notif-row-unread { background: rgba(167,139,250,.05); }
.notif-row-unread:hover { background: rgba(167,139,250,.09); }

.notif-ico {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--link-color);
}
.notif-ico-lesson      { background: rgba(125,211,252,.12); color: #7dd3fc; }
.notif-ico-comment     { background: rgba(52,211,153,.12);  color: #34d399; }
.notif-ico-achievement { background: rgba(167,139,250,.14); color: var(--link-color); }
.notif-ico-challenge   { background: rgba(244,114,182,.14); color: #f472b6; }
.notif-ico-streak      { background: rgba(255,107,61,.14);  color: #ff6b3d; }
.notif-ico-system      { background: rgba(255,255,255,.06); color: var(--text-muted); }

.notif-text { flex: 1; min-width: 0; }
.notif-title {
    font-size: .88rem; font-weight: 600;
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: 2px;
}
.notif-body {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}
.notif-when {
    font-size: .7rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.notif-dot {
    position: absolute; top: 18px; right: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--link-color);
    box-shadow: 0 0 8px rgba(167,139,250,.55);
}

/* empty */
.notif-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
}
.notif-empty-ico {
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    background: rgba(167,139,250,.10);
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--link-color);
}
.notif-empty p {
    font-size: .95rem; font-weight: 600;
    color: var(--text-heading);
    margin: 0 0 4px;
}
.notif-empty small { font-size: .78rem; color: var(--text-faint); }

@media (max-width: 480px) {
    .notif-panel { right: 8px; left: 8px; width: auto; top: 60px; }
}

/* ============================================================
   PREMIUM POLISH LAYER (cca-* + global refinements)
   Additive. Adds formal tokens and low-specificity global rules.
   Does NOT override any existing animation, just tunes timing.
   ============================================================ */

:root {
    /* --- SPACING SCALE (8px base) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* --- RADII --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* --- TYPOGRAPHY --- */
    --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --text-2xs: .68rem;
    --text-xs:  .76rem;
    --text-sm:  .88rem;
    --text-md:  1rem;
    --text-lg:  1.15rem;
    --text-xl:  1.4rem;
    --text-2xl: 1.8rem;
    --text-3xl: 2.4rem;

    --leading-tight: 1.2;
    --leading-body: 1.5;

    /* --- MOTION (120–200ms sweet spot) --- */
    --dur-xs: 120ms;
    --dur-sm: 160ms;
    --dur-md: 200ms;
    --dur-lg: 280ms;
    --ease-snap: cubic-bezier(.2,.8,.2,1);
    --ease-in:   cubic-bezier(.4,0,1,1);
    --ease-out:  cubic-bezier(0,0,.2,1);
}

/* --- reduced motion preference: kill all animations/transitions --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- smooth scroll site-wide (except for CSS anchors that should jump) --- */
html { scroll-behavior: smooth; }

/* --- image defaults: no flicker, better mobile decode --- */
img {
    -webkit-user-drag: none;
}
img[loading="lazy"] {
    /* faint fade-in as the browser swaps in decoded bytes */
    animation: cca-img-in 320ms var(--ease-snap);
}
@keyframes cca-img-in {
    from { opacity: 0; transform: scale(1.01); }
    to   { opacity: 1; transform: scale(1); }
}

/* --- universal focus ring — visible keyboard nav, hidden on mouse --- */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

/* --- tap targets on mobile: minimum 40x40 for anything interactive --- */
@media (pointer: coarse) and (max-width: 768px) {
    button,
    a.btn,
    .lz-pill,
    .me-btn-primary,
    .me-btn-ghost,
    .wp-btn-primary,
    .wp-btn-ghost,
    .ch-btn-primary,
    .ch-btn-ghost,
    .dm-task-claim {
        min-height: 40px;
    }
}

/* --- universal micro-interactions for bare buttons/links.
       Specificity stays low so existing styled classes still win. --- */
button, .btn, a {
    transition-timing-function: var(--ease-snap);
}
button:not(:disabled),
a.btn {
    transition-duration: var(--dur-sm);
}
button:not(:disabled):active,
a.btn:active {
    transform: scale(.97);
}

/* --- unified card hover: any element tagged data-cca-lift --- */
[data-cca-lift] {
    transition: transform var(--dur-md) var(--ease-snap),
                box-shadow var(--dur-md) var(--ease-snap);
}
[data-cca-lift]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,.32);
}

/* --- CONTENT VISIBILITY — paints offscreen grids faster.
       Safe because every browser falls back to visible. --- */
.lz-hub-grid > *,
.pf-grid > *,
.ch-grid > *,
.ch-subs-grid > *,
.ac-grid > * {
    content-visibility: auto;
    contain-intrinsic-size: 260px;
}

/* ============================================================
   SHARED SKELETON SHIMMER (.cca-skel)
   Backdrop for any new loader — matches the tone of existing ones.
   ============================================================ */
.cca-skel {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    min-height: 80px;
}
.cca-skel::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,.045),
        transparent);
    animation: cca-shimmer 1.6s linear infinite;
    pointer-events: none;
}
@keyframes cca-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%);  }
}

/* ============================================================
   SHARED EMPTY STATE (.cca-empty)
   Drop-in card for any page that wants a consistent empty design.
   Markup:
     <div class="cca-empty">
       <div class="cca-empty-ico"><svg .../></div>
       <h3>Title</h3>
       <p>Subtitle.</p>
       <button class="cca-empty-cta">Action</button>
     </div>
   ============================================================ */
.cca-empty {
    max-width: 420px;
    margin: 24px auto;
    padding: var(--space-6) var(--space-5);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cca-empty::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(420px 160px at 50% 0%, rgba(167,139,250,.12), transparent 70%);
    pointer-events: none;
}
.cca-empty-ico {
    width: 56px; height: 56px;
    margin: 0 auto var(--space-3);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--link-color), #ff8fd1);
    color: #fff;
    box-shadow: 0 10px 24px rgba(167,139,250,.28);
    position: relative;
}
.cca-empty h3 {
    font-size: var(--text-lg); font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 var(--space-1);
}
.cca-empty p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0 0 var(--space-4);
    line-height: var(--leading-body);
}
.cca-empty-cta {
    background: var(--link-color); color: #fff;
    border: 0;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm); font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(167,139,250,.30);
    transition: transform var(--dur-sm) var(--ease-snap),
                filter var(--dur-sm);
}
.cca-empty-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cca-empty-cta:active { transform: scale(.97); }

/* ============================================================
   INPUT REFINEMENTS — one consistent look across inputs that
   opt in via .cca-input. Existing inputs unaffected.
   ============================================================ */
.cca-input {
    width: 100%;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    transition: background var(--dur-sm), box-shadow var(--dur-sm);
}
.cca-input:focus {
    outline: 2px solid var(--link-color);
    outline-offset: -2px;
}

/* ============================================================
   MOBILE NAV REFINEMENTS — slightly tighter hit areas without
   changing the layout. Only the feel.
   ============================================================ */
@media (max-width: 480px) {
    .nav-pfp, .nav-bell, .profile-settings-btn {
        transition: transform var(--dur-sm) var(--ease-snap);
    }
    .nav-pfp:active, .nav-bell:active, .profile-settings-btn:active {
        transform: scale(.92);
    }
}

/* ---- status pane ---- */
.co-status-pane {
    display: flex; flex-direction: column;
    gap: 8px;
}
.co-field-label {
    font-size: .78rem; font-weight: 600;
    color: var(--text-faint);
    letter-spacing: .02em;
}
.co-field-input {
    background: var(--bg-input);
    border: 0;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: .95rem; font-family: inherit;
}
.co-field-input:focus { outline: 2px solid var(--pf-accent); outline-offset: -2px; }
.co-field-hint { font-size: .72rem; color: var(--text-faint); }
.co-field-hint strong,
.co-field-hint span { font-variant-numeric: tabular-nums; }
.co-field-actions {
    display: flex; gap: 8px;
    margin-top: 4px;
}
.co-btn-primary {
    background: var(--pf-accent); color: #fff;
    border: 0; padding: 10px 18px;
    border-radius: 10px;
    font-size: .88rem; font-weight: 700;
    cursor: pointer;
    transition: transform 140ms ease, filter 140ms ease;
}
.co-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.co-btn-ghost {
    background: rgba(255,255,255,.06); color: var(--text-heading);
    border: 0; padding: 10px 16px;
    border-radius: 10px;
    font-size: .86rem; font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease;
}
.co-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* mobile */
@media (max-width: 520px) {
    .co-head, .co-tabs { margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; }
    .co-head { padding: 18px 16px 8px; margin: 0; }
    .co-tabs { margin: 0 16px 14px; }
    .co-preview { margin: 10px 16px 14px; }
    .co-body    { padding: 0 16px 20px; }
    .co-grid    { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   Duels
   ============================================================ */

.du-body { background: var(--color-bg, #0f1021); color: var(--color-text, #fff); }

.du { max-width: 900px; margin: 0 auto; padding: 24px 20px 100px; }

.du-hero { text-align: center; padding: 12px 0 20px; }
.du-hero-eyebrow {
    display: inline-block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: #a78bfa; margin-bottom: 8px;
}
.du-hero-title { font-size: 28px; font-weight: 800; margin: 4px 0 6px; }
.du-hero-sub   { font-size: 14px; opacity: .72; margin: 0 0 16px; }

.du-btn-primary {
    display: inline-block; padding: 10px 20px; border-radius: 999px; border: 0;
    background: linear-gradient(135deg, #a78bfa, #ff8fd1); color: #fff;
    font-weight: 600; cursor: pointer; font-size: 14px;
}
.du-btn-primary:hover { filter: brightness(1.08); }
.du-btn-secondary {
    display: inline-block; padding: 9px 18px; border-radius: 999px;
    background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.12);
    font-weight: 600; cursor: pointer; font-size: 14px;
}

/* Tabs */
.du-tabs {
    display: flex; gap: 4px; margin: 18px 0 14px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.08); overflow-x: auto;
}
.du-tab {
    background: transparent; border: 0; color: inherit; opacity: .6;
    padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.du-tab.active { opacity: 1; border-bottom-color: #a78bfa; color: #fff; }

/* List */
.du-list { display: flex; flex-direction: column; gap: 10px; }
.du-card {
    display: block; padding: 14px; border-radius: 14px; text-decoration: none;
    color: inherit; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08); transition: background .15s;
}
.du-card:hover { background: rgba(255,255,255,.07); }
.du-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.du-vs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.du-vs-name { font-weight: 600; font-size: 14px; }
.du-vs-x    { opacity: .5; font-size: 14px; padding: 0 2px; }
.du-card-meta {
    display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.du-card-prompt { font-size: 14px; opacity: .82; }
.du-card-footer { margin-top: 8px; font-size: 12px; opacity: .6; }

/* Avatars */
.du-avatar { border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #2a2b3a; }
.du-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.du-avatar-init {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; font-size: 14px;
    background: linear-gradient(135deg, #a78bfa, #ff8fd1);
}
.du-avatar-empty { background: rgba(255,255,255,.06); }

/* Badges */
.du-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.du-badge-pending { background: rgba(251,191,36,.15); color: #fbbf24; }
.du-badge-active  { background: rgba(16,185,129,.15); color: #34d399; }
.du-badge-voting  { background: rgba(167,139,250,.18); color: #a78bfa; }
.du-badge-done    { background: rgba(255,255,255,.08); color: #ddd; }
.du-badge-closed  { background: rgba(255,255,255,.06); color: #888; }
.du-chip-mini {
    display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px;
    background: rgba(255,255,255,.06); color: #ccc;
}

/* Empty / skeleton */
.du-empty { text-align: center; opacity: .6; padding: 30px 0; }
.du-skel {
    height: 80px; border-radius: 14px; background: rgba(255,255,255,.04);
    margin-bottom: 10px; animation: duPulse 1.4s ease-in-out infinite;
}
.du-skel-lg { height: 300px; }
@keyframes duPulse { 50% { opacity: .5; } }

/* Detail */
.du-back {
    background: transparent; border: 0; color: #a78bfa; font-weight: 600;
    cursor: pointer; margin-bottom: 14px; font-size: 14px; padding: 6px 0;
}

.du-detail-hero {
    text-align: center; padding: 20px 14px;
    background: rgba(255,255,255,.04); border-radius: 16px; margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,.08);
}
.du-detail-vs {
    display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.du-detail-user { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.du-detail-user a { color: inherit; text-decoration: none; }
.du-detail-name { font-weight: 700; font-size: 15px; }
.du-detail-x    { font-size: 28px; opacity: .5; }
.du-detail-meta {
    display: flex; gap: 8px; align-items: center; justify-content: center;
    margin-top: 12px;
}
.du-detail-prompt {
    font-size: 18px; font-style: italic; margin: 14px auto 8px; max-width: 600px;
    opacity: .92;
}
.du-detail-countdown {
    font-size: 13px; opacity: .72; margin: 4px 0 0; font-variant-numeric: tabular-nums;
}

/* Actions (accept/decline/hints) */
.du-actions {
    display: flex; gap: 10px; justify-content: center; margin: 0 0 16px;
}
.du-hint { text-align: center; opacity: .7; font-size: 14px; margin: 0 0 16px; }

/* Submit picker */
.du-submit-wrap { margin: 0 0 16px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.03); }
.du-field-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
                  text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.du-submit-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.du-submit-pick {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; color: inherit; cursor: pointer; overflow: hidden; text-align: left;
}
.du-submit-pick:hover { border-color: #a78bfa; }
.du-submit-pick img { width: 100%; height: 90px; object-fit: cover; display: block; }
.du-submit-pick > span { padding: 6px 8px 8px; font-size: 12px; }
.du-submit-text {
    padding: 28px 10px; font-size: 12px; text-align: center; opacity: .7;
    background: rgba(255,255,255,.02);
}

/* Arena */
.du-arena {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch;
}
.du-arena-side {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 10px; display: flex; flex-direction: column;
}
.du-arena-vs {
    align-self: center; font-size: 24px; opacity: .5;
}
.du-sub { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.du-sub-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.du-sub-user { font-size: 13px; font-weight: 600; }
.du-sub-link { display: block; color: inherit; text-decoration: none; border-radius: 10px; overflow: hidden; }
.du-sub-link img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.du-sub-title { font-size: 13px; padding: 6px 6px 4px; font-weight: 600; }
.du-sub-body  { padding: 10px; font-size: 13px; opacity: .9; line-height: 1.5; min-height: 120px; }
.du-sub-empty, .du-sub-hidden {
    padding: 38px 10px; text-align: center; opacity: .5; font-size: 13px;
    border: 1px dashed rgba(255,255,255,.1); border-radius: 10px;
}
.du-sub-text { background: rgba(255,255,255,.03); }

/* AI-content warning badge — surfaces Oryx's scan result on the submission. */
.du-sub-ai {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
}
.du-sub-ai.is-strong {
    color: #fca5a5;
    background: rgba(239, 68, 68, .10);
    border: 1px solid rgba(239, 68, 68, .35);
}
.du-sub-ai.is-soft {
    color: #fcd34d;
    background: rgba(234, 179, 8, .08);
    border: 1px solid rgba(234, 179, 8, .30);
}
.du-sub-ai-dot {
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; margin-right: 6px;
    vertical-align: middle;
}
.du-sub-ai-label { font-weight: 600; }
.du-sub-ai-reason {
    font-size: 11.5px;
    opacity: .85;
    font-weight: 400;
    color: var(--text-secondary);
}

.du-side-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 4px 2px; gap: 8px;
}
.du-votes { font-size: 13px; font-weight: 600; opacity: .85; }
.du-vote-btn {
    background: #a78bfa; color: #fff; border: 0; padding: 6px 14px;
    border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.du-vote-btn:hover:not(:disabled) { filter: brightness(1.1); }
.du-vote-btn-done { background: rgba(255,255,255,.08); color: #a0e8a0; cursor: default; }

/* Winner banner */
.du-banner {
    text-align: center; font-weight: 700; padding: 10px; border-radius: 12px; margin-bottom: 14px;
}
.du-banner-win  { background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(255,143,209,.22));
                  color: #fff; font-size: 15px; }
.du-banner-draw { background: rgba(255,255,255,.06); opacity: .85; }

/* Modal */
.du-modal { position: fixed; inset: 0; z-index: 9500; }
.du-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.du-modal-card {
    position: relative; max-width: 500px; margin: 40px auto; padding: 22px 22px 18px;
    background: #151527; border-radius: 18px; border: 1px solid rgba(255,255,255,.1);
    max-height: calc(100vh - 80px); overflow-y: auto;
}
.du-modal-close {
    position: absolute; top: 10px; right: 12px; background: transparent; border: 0;
    color: #aaa; font-size: 22px; cursor: pointer; width: 32px; height: 32px;
}
.du-modal-title { margin: 0 0 14px; font-size: 20px; }
.du-field { display: block; margin: 0 0 14px; }
.du-field > .du-field-label { margin-bottom: 6px; }
.du-field input, .du-field select, .du-field textarea {
    width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px;
    background: rgba(255,255,255,.04); color: #fff; border: 1px solid rgba(255,255,255,.12);
    font-family: inherit;
}
.du-field input:focus, .du-field select:focus, .du-field textarea:focus {
    outline: none; border-color: #a78bfa;
}
.du-field-hint { display: block; margin-top: 4px; font-size: 11px; opacity: .55; text-align: right; }
.du-ac {
    max-height: 220px; overflow-y: auto; margin-top: 4px;
    border-radius: 10px; background: rgba(0,0,0,.25);
}
.du-ac:empty { display: none; }
.du-ac-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; width: 100%;
    background: transparent; border: 0; color: inherit; cursor: pointer; text-align: left;
    font-size: 14px;
}
.du-ac-row:hover { background: rgba(255,255,255,.07); }

.du-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.du-chip {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    padding: 7px 14px; border-radius: 999px; color: inherit; cursor: pointer;
    font-size: 13px; font-weight: 600;
}
.du-chip.active {
    background: linear-gradient(135deg, #a78bfa, #ff8fd1); border-color: transparent; color: #fff;
}

.du-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* Profile W/L row */
.pf-duel-stat {
    display: flex; justify-content: center; gap: 8px; margin-top: 8px; font-size: 14px;
    opacity: .82;
}
.pf-duel-stat strong { color: #fff; }

/* Mobile */
@media (max-width: 640px) {
    .du { padding: 16px 12px 100px; }
    .du-arena { grid-template-columns: 1fr; }
    .du-arena-vs { display: none; }
    .du-hero-title { font-size: 22px; }
    .du-detail-vs { gap: 10px; }
    .du-detail-x  { font-size: 20px; }
}

/* =========================================================================
   SKILL TREE — dark minimal node graph over lesson prerequisites.
   Uses CSS vars so it auto-inverts with the site's light/dark theme.
   ========================================================================= */

.st-body {
    --st-bg:          #0a0b0f;
    --st-bg-2:        #11131a;
    --st-grid:        rgba(255,255,255,.035);
    --st-ink:         #e9ecf3;
    --st-ink-sub:     #8a91a3;
    --st-node-bg:     #181a22;
    --st-node-border: #262a36;
    --st-done:        #4ade80;
    --st-open:        #a78bfa;
    --st-lock:        #3a3f4d;
    --st-current:     #ff8fd1;
    --st-ring-bg:     #1f2230;
    --st-ring-fg:     #a78bfa;
    background: var(--st-bg);
    color: var(--st-ink);
}
[data-theme="light"] .st-body {
    --st-bg:          #f7f8fb;
    --st-bg-2:        #eef0f6;
    --st-grid:        rgba(0,0,0,.04);
    --st-ink:         #171923;
    --st-ink-sub:     #5c6478;
    --st-node-bg:     #ffffff;
    --st-node-border: #dfe3ed;
    --st-done:        #16a34a;
    --st-open:        #7c3aed;
    --st-lock:        #b4bac7;
    --st-current:     #e11d74;
    --st-ring-bg:     #e3e6ef;
    --st-ring-fg:     #7c3aed;
}

.st-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 16px 100px;
}

.st-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px 14px;
}
.st-back {
    background: transparent;
    border: 1px solid var(--st-node-border);
    color: var(--st-ink);
    width: 36px; height: 36px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    display: grid; place-items: center;
    transition: background .15s, border-color .15s;
}
.st-back:hover { background: var(--st-bg-2); border-color: var(--st-open); }
.st-head-text { flex: 1; min-width: 0; }
.st-head-eyebrow {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--st-ink-sub);
}
.st-head-title {
    margin: 2px 0 0;
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.st-ring { position: relative; width: 44px; height: 44px; }
.st-ring svg { display: block; }
.st-ring #stRingArc { transition: stroke-dashoffset .5s ease; }
.st-ring-label {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600;
    color: var(--st-ink);
}

.st-viewport {
    position: relative;
    background:
        linear-gradient(var(--st-grid) 1px, transparent 1px) 0 0 / 30px 30px,
        linear-gradient(90deg, var(--st-grid) 1px, transparent 1px) 0 0 / 30px 30px,
        var(--st-bg-2);
    border: 1px solid var(--st-node-border);
    border-radius: 14px;
    overflow: auto;
    min-height: 520px;
    max-height: calc(100vh - 220px);
    -webkit-overflow-scrolling: touch;
}

.st-canvas { position: relative; min-width: 100%; min-height: 100%; }

.st-edges { position: absolute; left: 0; top: 0; pointer-events: none; }
.st-edge {
    fill: none; stroke-width: 2.5;
    stroke-linecap: round;
    opacity: .9;
}
.st-edge.e-done { stroke: var(--st-done); }
.st-edge.e-open { stroke: var(--st-open); stroke-dasharray: 6 4; }
.st-edge.e-lock { stroke: var(--st-lock); stroke-dasharray: 3 6; opacity: .55; }

.st-nodes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.st-node {
    position: absolute;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    min-height: 52px;
    background: var(--st-node-bg);
    border: 1.5px solid var(--st-node-border);
    border-radius: 12px;
    color: var(--st-ink);
    font: inherit; font-size: 13px; font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.st-node:hover { transform: translateY(-2px); }
.st-node:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-open) 40%, transparent);
}

.st-node-icon {
    display: grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 8px;
    flex: 0 0 24px;
}
.st-node-title {
    flex: 1;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.st-node-completed { border-color: color-mix(in srgb, var(--st-done) 60%, transparent); }
.st-node-completed .st-node-icon {
    background: color-mix(in srgb, var(--st-done) 18%, transparent);
    color: var(--st-done);
}
.st-node-completed .st-node-title { color: var(--st-ink-sub); }

.st-node-available {
    border-color: color-mix(in srgb, var(--st-open) 55%, transparent);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--st-open) 20%, transparent);
}
.st-node-available .st-node-icon {
    background: color-mix(in srgb, var(--st-open) 22%, transparent);
    color: var(--st-open);
}

.st-node-locked,
.st-node-gated {
    opacity: .7;
    cursor: help;
    color: var(--st-ink-sub);
}
.st-node-locked .st-node-icon,
.st-node-gated  .st-node-icon {
    background: color-mix(in srgb, var(--st-lock) 30%, transparent);
    color: var(--st-ink-sub);
}

.st-node.is-current {
    border-color: var(--st-current);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--st-current) 22%, transparent),
        0 2px 18px color-mix(in srgb, var(--st-current) 30%, transparent);
    animation: st-pulse 2.2s ease-in-out infinite;
}
@keyframes st-pulse {
    0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-current) 22%, transparent),
                          0 2px 18px color-mix(in srgb, var(--st-current) 30%, transparent); }
    50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-current) 10%, transparent),
                          0 2px 22px color-mix(in srgb, var(--st-current) 40%, transparent); }
}

.st-empty {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--st-ink-sub);
}

.st-legend {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-top: 12px; padding: 0 4px;
    font-size: 12px; color: var(--st-ink-sub);
}
.st-leg { display: inline-flex; align-items: center; gap: 6px; }
.st-leg::before {
    content: ""; width: 10px; height: 10px; border-radius: 3px;
    display: inline-block;
}
.st-leg-done::before { background: var(--st-done); }
.st-leg-open::before { background: var(--st-open); }
.st-leg-lock::before { background: var(--st-lock); }

.st-tip {
    position: absolute;
    z-index: 80;
    background: var(--st-node-bg);
    color: var(--st-ink);
    border: 1px solid var(--st-node-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    max-width: 240px;
    box-shadow: 0 8px 26px rgba(0,0,0,.45);
    pointer-events: none;
}
.st-tip strong { color: var(--st-current); }
.st-tip ul { margin: 6px 0 0; padding-left: 18px; color: var(--st-ink-sub); }
.st-tip li { margin: 2px 0; }

@media (max-width: 640px) {
    .st-page { padding: 10px 8px 100px; }
    .st-viewport { border-radius: 10px; min-height: 60vh; max-height: calc(100vh - 180px); }
    .st-node { min-height: 58px; font-size: 13.5px; }
    .st-head-title { font-size: 18px; }
}

/* ---- Skill Tree: admin edit mode ---- */
.st-editbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 10px; padding: 8px 12px;
    background: color-mix(in srgb, var(--st-current) 14%, var(--st-bg-2));
    border: 1px solid color-mix(in srgb, var(--st-current) 45%, transparent);
    border-radius: 10px;
    color: var(--st-ink);
    font-size: 13px;
}
.st-editbar-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--st-current);
    box-shadow: 0 0 10px var(--st-current);
    animation: st-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes st-pulse-dot {
    0%,100% { opacity: 1; }
    50%     { opacity: .45; }
}
.st-editbar-hint { color: var(--st-ink-sub); flex: 1; min-width: 220px; }
.st-editbar-hint em { color: var(--st-current); font-style: normal; font-weight: 700; }
.st-editbar-exit {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--st-node-border);
    color: var(--st-ink);
    background: var(--st-node-bg);
}
.st-editbar-exit:hover { border-color: var(--st-current); color: var(--st-current); }

.st-node-link {
    position: absolute;
    right: -10px; bottom: -10px;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--st-current);
    color: #fff;
    font-size: 16px; font-weight: 700; line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.st-node-link:active { cursor: grabbing; }
.st-node.is-dragging {
    opacity: .9;
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
    transform: scale(1.03);
    z-index: 5;
    transition: none;
}
.st-edge-ghost {
    stroke: var(--st-current);
    stroke-width: 2.5;
    stroke-dasharray: 5 4;
    opacity: .9;
    pointer-events: none;
}
/* In edit mode the nodes are draggable; hint cursor + tame the hover lift. */
.st-edit .st-node { cursor: grab; touch-action: none; }
.st-edit .st-node.is-dragging { cursor: grabbing; }
.st-edit .st-node:hover { transform: none; }
.st-edit .st-edge:hover { stroke-width: 4; opacity: 1; }

/* ==================================================
   MENTOR FEEDBACK — cards above comments, profile tab, mentor queue
   ================================================== */

:root {
    --mf-accent:   #ffb347;     /* warm amber — distinguishes mentor voice from user chatter */
    --mf-accent-2: #ff8fd1;
    --mf-admin:    #a78bfa;
    --mf-ring:     rgba(255,179,71,.25);
}

/* Section above the comments list */
.mf-section {
    padding: 12px 14px 4px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mf-accent) 7%, transparent) 0%,
        transparent 100%);
    border-bottom: 1px solid var(--border-color);
}
.mf-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--mf-accent);
    margin-bottom: 10px;
}
.mf-section-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mf-accent);
    box-shadow: 0 0 8px var(--mf-accent);
}
.mf-count {
    margin-left: auto;
    font-size: 11px; font-weight: 600; letter-spacing: 0;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 2px 8px; border-radius: 999px;
}

/* Individual card */
.mf-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--mf-accent) 40%, var(--border-color));
    border-left: 3px solid var(--mf-accent);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.mf-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.mf-head-left {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
    flex: 1; min-width: 0;
}
.mf-av {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; flex: 0 0 34px;
    display: grid; place-items: center;
    background: var(--bg-elevated);
    color: var(--text-heading);
    font-weight: 700; font-size: 14px;
}
.mf-av-fallback { background: linear-gradient(135deg, var(--mf-accent), var(--mf-accent-2)); color: #1a1a2e; }
.mf-name {
    font-weight: 700; font-size: 14px; color: var(--text-heading);
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mf-meta {
    font-size: 11px; color: var(--text-muted);
    margin-top: 2px;
}
.mf-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-color); }
.mf-meta a:hover { color: var(--mf-accent); }

/* Badges */
.mf-badge {
    display: inline-block;
    padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--mf-accent) 20%, transparent);
    color: var(--mf-accent);
    border: 1px solid color-mix(in srgb, var(--mf-accent) 45%, transparent);
}
.mf-badge-admin {
    background: color-mix(in srgb, var(--mf-admin) 20%, transparent);
    color: var(--mf-admin);
    border-color: color-mix(in srgb, var(--mf-admin) 45%, transparent);
}

/* Stars */
.mf-stars { flex: 0 0 auto; letter-spacing: 1px; }
.mf-star { color: var(--border-color); font-size: 13px; }
.mf-star-on { color: var(--mf-accent); }

/* Structured points */
.mf-body { display: flex; flex-direction: column; gap: 10px; }
.mf-point {
    position: relative;
    padding-left: 10px;
    border-left: 2px solid var(--border-color);
}
.mf-point-strengths { border-left-color: #4ade80; }
.mf-point-improve   { border-left-color: var(--mf-accent); }
.mf-point-next      { border-left-color: #60a5fa; }
.mf-point-label {
    display: block;
    font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.mf-point-body {
    font-size: 13.5px; line-height: 1.55;
    color: var(--text-primary);
    white-space: pre-wrap; word-wrap: break-word;
}

/* Request + give actions below the feedback list */
.mf-actions {
    padding: 10px 14px 14px;
    display: flex; flex-direction: column; gap: 10px;
    border-bottom: 1px solid var(--border-color);
}
.mf-req-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 14px;
    background: color-mix(in srgb, var(--mf-accent) 15%, transparent);
    color: var(--mf-accent);
    border: 1px dashed color-mix(in srgb, var(--mf-accent) 60%, transparent);
    border-radius: 10px;
    font-weight: 600; font-size: 13.5px;
    transition: background .2s, border-color .2s;
}
.mf-req-btn:hover {
    background: color-mix(in srgb, var(--mf-accent) 22%, transparent);
    border-style: solid;
}
.mf-req {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 13px;
}
.mf-req-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mf-accent);
    animation: mf-pulse 1.6s ease-in-out infinite;
}
@keyframes mf-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: .4; }
}
.mf-req-cancel {
    margin-left: auto;
    padding: 4px 10px; border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12px;
}
.mf-req-cancel:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* Give-feedback form (admin/mentor) */
.mf-give {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.mf-give-summary {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600; font-size: 13px;
    color: var(--mf-accent);
    list-style: none;
}
.mf-give-summary::-webkit-details-marker { display: none; }
.mf-give[open] .mf-give-summary { border-bottom: 1px solid var(--border-color); }
.mf-form {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 14px 14px;
}
.mf-form label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted);
}
.mf-form textarea, .mf-form select {
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px; font-family: inherit;
    letter-spacing: 0; text-transform: none;
    resize: vertical;
}
.mf-form textarea:focus, .mf-form select:focus {
    outline: none;
    border-color: var(--mf-accent);
    box-shadow: 0 0 0 2px var(--mf-ring);
}
.mf-form-row {
    display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
}
.mf-rating-label { flex: 0 0 auto; }
.mf-rating-label select { min-width: 64px; }
.mf-submit {
    margin-left: auto;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--mf-accent), var(--mf-accent-2));
    color: #1a1a2e;
    border: 0; border-radius: 8px;
    font-weight: 700; font-size: 13px;
}
.mf-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Profile feedback tab */
.pf-feedback {
    max-width: 720px; margin: 0 auto;
    padding: 8px 4px 40px;
    display: flex; flex-direction: column; gap: 10px;
}

/* Mentor queue page */
.mf-page {
    max-width: 900px; margin: 0 auto;
    padding: 24px 16px 100px;
}
.mf-page-head { margin-bottom: 20px; }
.mf-page-eyebrow {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--mf-accent); font-weight: 700;
}
.mf-page-head h1 {
    font-size: clamp(24px, 3vw, 32px);
    margin: 4px 0 6px; color: var(--text-heading);
}
.mf-page-sub { color: var(--text-muted); font-size: 14px; max-width: 640px; }
.mf-queue {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.mf-empty {
    color: var(--text-muted); text-align: center;
    padding: 40px 20px; font-size: 14px;
}
.mf-qcard {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--mf-accent);
    border-radius: 10px;
    padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color .2s, transform .15s;
}
.mf-qcard:hover { border-color: var(--mf-accent); transform: translateY(-2px); }
.mf-qwho {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--text-heading);
    font-weight: 600; font-size: 13.5px;
}
.mf-qwho .mf-av { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
.mf-qmeta { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); }
.mf-qtype {
    padding: 2px 8px; border-radius: 999px;
    background: var(--bg-elevated);
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    color: var(--text-secondary);
}
.mf-qtype-lesson { color: #60a5fa; }
.mf-qtype-post   { color: var(--mf-accent); }
.mf-qtitle {
    font-size: 15px; font-weight: 700; line-height: 1.3;
    margin: 0;
}
.mf-qtitle a { color: var(--text-heading); text-decoration: none; }
.mf-qtitle a:hover { color: var(--mf-accent); }
.mf-qnote {
    font-size: 13px; color: var(--text-secondary);
    padding: 8px 10px;
    background: var(--bg-panel);
    border-radius: 6px;
    border-left: 2px solid var(--border-color);
}
.mf-qcta { margin-top: auto; }
.mf-qopen {
    display: inline-block;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--mf-accent) 15%, transparent);
    color: var(--mf-accent);
    border-radius: 6px;
    font-size: 12px; font-weight: 600;
    text-decoration: none;
}
.mf-qopen:hover { background: color-mix(in srgb, var(--mf-accent) 25%, transparent); }

/* Mentor-reviewed badge — profile grid (absolute corner star) */
.pf-item { position: relative; }
.pf-item-mentor {
    position: absolute;
    top: 8px; right: 8px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(10,10,20,.65);
    color: var(--mf-accent, #ffb347);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    z-index: 2;
    pointer-events: none;
}

/* Mentor-reviewed pill — post page header */
.fv-mentor-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--mf-accent, #ffb347) 22%, rgba(0,0,0,.5));
    color: var(--mf-accent, #ffb347);
    border: 1px solid color-mix(in srgb, var(--mf-accent, #ffb347) 55%, transparent);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.fv-mentor-badge:hover { background: color-mix(in srgb, var(--mf-accent, #ffb347) 32%, rgba(0,0,0,.5)); }
.fv-mentor-badge:active { transform: scale(.96); }

/* Admin badge — mentor variant */
.adm-badge-mentor {
    background: color-mix(in srgb, var(--mf-accent) 22%, transparent);
    color: var(--mf-accent);
    border: 1px solid color-mix(in srgb, var(--mf-accent) 45%, transparent);
}
.adm-badge-banned {
    background: rgba(239,68,68,.18);
    color: #fecaca;
    border: 1px solid rgba(239,68,68,.5);
}

/* Mobile */
@media (max-width: 640px) {
    .mf-section { padding: 10px 12px 4px; }
    .mf-card { padding: 10px 12px; }
    .mf-av { width: 30px; height: 30px; flex: 0 0 30px; }
    .mf-name { font-size: 13px; }
    .mf-queue { grid-template-columns: 1fr; }
}

/* ==================================================
   COMIC BATTLES — split-screen arena + list + voting bar
   ================================================== */

.bt-body {
    --bt-a:          #60a5fa;   /* blue */
    --bt-a-soft:     rgba(96,165,250,.15);
    --bt-b:          #f87171;   /* red */
    --bt-b-soft:     rgba(248,113,113,.15);
    --bt-accent:     #facc15;   /* amber — for "top" highlights */
    --bt-open:       #4ade80;
    --bt-locked:     #a78bfa;
    --bt-voting:     var(--bt-accent);
    --bt-result:     #a0a0b8;

    /* Animation tokens — keep 120–200ms for micro-interactions.
       Longer values reserved for the one-shot entry / reveal sequence. */
    --bt-fast:     140ms;
    --bt-mid:      180ms;
    --bt-slow:     220ms;
    --bt-entry:    520ms;      /* entry keyframes */
    --bt-reveal:   700ms;      /* winner reveal */
    --bt-ease:     cubic-bezier(0.22, 1, 0.36, 1);
    --bt-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Honor reduced-motion: disable entry / reveal / pulses everywhere. */
@media (prefers-reduced-motion: reduce) {
    .bt-body *,
    .bt-body *::before,
    .bt-body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ----- List page ----- */
.bt-list-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 100px; }
.bt-list-head { margin-bottom: 18px; }
.bt-list-eyebrow {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--bt-a); font-weight: 700;
}
.bt-list-head h1 { font-size: clamp(24px, 3vw, 34px); margin: 4px 0 6px; color: var(--text-heading); }
.bt-list-sub { color: var(--text-muted); font-size: 14px; }

.bt-list-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.bt-filter {
    padding: 7px 14px; border-radius: 999px;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 13px; font-weight: 600;
    transition: color .15s, border-color .15s, background .15s;
}
.bt-filter:hover { color: var(--text-primary); border-color: var(--text-muted); }
.bt-filter.active {
    background: var(--bg-elevated);
    color: var(--text-heading);
    border-color: var(--bt-accent);
}

.bt-list {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.bt-empty {
    grid-column: 1/-1;
    color: var(--text-muted); text-align: center;
    padding: 40px 20px; font-size: 14px;
}

.bt-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: inherit; text-decoration: none;
    transition: border-color .15s, transform .15s, box-shadow .2s;
    position: relative;
}
.bt-card:hover {
    transform: translateY(-2px);
    border-color: var(--bt-accent);
    box-shadow: var(--shadow-card-hover);
}
.bt-card-win-a { border-color: var(--bt-a); }
.bt-card-win-b { border-color: var(--bt-b); }
.bt-card-draw  { border-color: var(--text-muted); }
.bt-card-heads {
    display: flex; align-items: center; gap: 10px;
}
.bt-card-head {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 13px;
    color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt-card-head img {
    width: 40px; height: 40px; border-radius: 10px;
    object-fit: cover; flex: 0 0 40px;
}
.bt-card-fallback {
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center;
    font-weight: 800; color: #1a1a2e;
    flex: 0 0 40px;
}
.bt-card-a .bt-card-fallback { background: var(--bt-a); }
.bt-card-b .bt-card-fallback { background: var(--bt-b); }
.bt-card-head span {
    overflow: hidden; text-overflow: ellipsis;
}
.bt-card-b { justify-content: flex-end; text-align: right; }
.bt-card-b img, .bt-card-b .bt-card-fallback { order: 2; }
.bt-card-vs {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    color: var(--text-muted);
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
}
.bt-card-title {
    font-size: 15px; font-weight: 700; line-height: 1.3;
    color: var(--text-heading);
    margin: 0;
}
.bt-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--text-muted);
}

/* Phase pill (shared between list + detail) */
.bt-phase-chip, .bt-phase {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.bt-phase-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    animation: bt-pulse 1.8s ease-in-out infinite;
}
@keyframes bt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.bt-phase-chip.bt-phase-open,   .bt-phase.bt-phase-open   { color: var(--bt-open);   border-color: color-mix(in srgb, var(--bt-open) 55%, transparent); }
.bt-phase-chip.bt-phase-locked, .bt-phase.bt-phase-locked { color: var(--bt-locked); border-color: color-mix(in srgb, var(--bt-locked) 55%, transparent); }
.bt-phase-chip.bt-phase-voting, .bt-phase.bt-phase-voting { color: var(--bt-voting); border-color: color-mix(in srgb, var(--bt-voting) 55%, transparent); }
.bt-phase-chip.bt-phase-result, .bt-phase.bt-phase-result { color: var(--bt-result); border-color: var(--border-color); }
.bt-phase-chip.bt-phase-result .bt-phase-dot,
.bt-phase.bt-phase-result .bt-phase-dot { animation: none; }

/* ----- Battle page ----- */
.bt-page { max-width: 1200px; margin: 0 auto; padding: 16px 16px 100px; }

.bt-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px; align-items: center;
    padding: 10px 4px 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
}
.bt-back {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none; font-size: 18px;
}
.bt-back:hover { background: var(--bg-elevated); color: var(--bt-accent); }
.bt-head-text { min-width: 0; }
.bt-title { font-size: clamp(20px, 3vw, 28px); font-weight: 700; color: var(--text-heading); margin: 4px 0 4px; line-height: 1.2; }
.bt-prompt { color: var(--text-muted); font-size: 13px; margin: 0; }
.bt-timer {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 14px; font-weight: 700;
    padding: 6px 12px; border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--text-heading);
    white-space: nowrap;
}

/* Ask-Oryx button in the battle header — compact, premium, keyed to Oryx palette */
.bt-oryx-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .03em;
    color: #0b0b19;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    border: 0; border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(124,58,237,.35);
    transition: transform var(--bt-fast) var(--bt-spring),
                box-shadow var(--bt-fast) var(--bt-ease);
}
.bt-oryx-btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.5); }
.bt-oryx-btn:active { transform: scale(.96); }

/* ----- Arena ----- */
.bt-arena {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    position: relative;
    align-items: stretch;
}
.bt-side {
    display: flex; flex-direction: column;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.bt-side-a {
    border-right: none;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(135deg, var(--bt-a-soft), var(--bg-card) 60%);
    border-top: 3px solid var(--bt-a);
}
.bt-side-b {
    border-left: none;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(225deg, var(--bt-b-soft), var(--bg-card) 60%);
    border-top: 3px solid var(--bt-b);
}
.bt-vs {
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    min-width: 56px;
    background: var(--bg-page);
    font-weight: 900; font-size: 18px;
    color: var(--text-heading);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.bt-vs::before, .bt-vs::after {
    content: ""; position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 2px; height: 20px;
    background: linear-gradient(to bottom, transparent, var(--border-color));
}
.bt-vs::before { top: 0; }
.bt-vs::after  { bottom: 0; transform: translateX(-50%) rotate(180deg); }

/* Fighter portrait */
.bt-fighter { text-align: center; padding-bottom: 14px; }
.bt-fighter-img {
    width: 150px; height: 150px;
    margin: 0 auto 10px;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--bg-elevated);
    border: 3px solid currentColor;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.bt-side-a .bt-fighter-img { color: var(--bt-a); }
.bt-side-b .bt-fighter-img { color: var(--bt-b); }
.bt-fighter-img img { width: 100%; height: 100%; object-fit: cover; }
.bt-fighter-fallback {
    font-size: 54px; font-weight: 900;
    color: inherit;
}
.bt-fighter-name {
    font-size: 22px; font-weight: 800; color: var(--text-heading);
    margin: 0 0 4px;
}
.bt-fighter-meta {
    color: var(--text-muted); font-size: 12px; margin-bottom: 12px;
}
.bt-count { color: var(--text-heading); font-weight: 700; }

.bt-join-btn {
    padding: 10px 20px; border-radius: 10px;
    border: 1px solid currentColor;
    background: transparent;
    font-weight: 700; font-size: 13px;
    transition: background .2s;
    min-height: 40px;
}
.bt-side-a .bt-join-btn { color: var(--bt-a); }
.bt-side-b .bt-join-btn { color: var(--bt-b); }
.bt-join-btn:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 15%, transparent);
}
.bt-join-btn:disabled { opacity: .7; cursor: default; }
.bt-join-btn.bt-joined { background: color-mix(in srgb, currentColor 15%, transparent); }

/* Arguments */
.bt-args { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bt-args-empty {
    color: var(--text-muted); font-size: 12px;
    padding: 16px; text-align: center;
    background: var(--bg-panel);
    border-radius: 10px;
    border: 1px dashed var(--border-color);
}
.bt-arg {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
}
.bt-arg-top {
    border-color: var(--bt-accent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bt-accent) 10%, transparent),
        var(--bg-panel));
}
.bt-arg-top-badge {
    position: absolute; top: -8px; right: 10px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--bt-accent); color: #1a1a2e;
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase;
}
.bt-arg-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px; color: var(--text-muted);
}
.bt-arg-user {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-heading);
    text-decoration: none; font-weight: 600;
}
.bt-arg-user img, .bt-arg-av-fallback {
    width: 22px; height: 22px; border-radius: 50%;
    object-fit: cover;
    display: grid; place-items: center;
    background: var(--bg-elevated);
    font-size: 11px; font-weight: 700;
}
.bt-arg-body { margin: 0; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; }
.bt-arg-foot {
    display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.bt-like, .bt-report {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 6px;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 12px;
    transition: color .15s, border-color .15s, background .15s;
}
.bt-like:hover:not(:disabled), .bt-report:hover {
    color: var(--bt-accent); border-color: var(--bt-accent);
}
.bt-like:disabled { opacity: .5; cursor: not-allowed; }
.bt-arg-liked .bt-like {
    color: var(--bt-accent);
    background: color-mix(in srgb, var(--bt-accent) 15%, transparent);
    border-color: var(--bt-accent);
}
.bt-report { padding: 4px 6px; }

/* Compose form */
.bt-compose {
    margin-top: 18px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--bt-accent);
    border-radius: 14px;
}
.bt-compose-label {
    display: block;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 700;
    margin-bottom: 8px;
}
.bt-compose-label span { color: var(--text-heading); }
#btComposeBody {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary); font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
#btComposeBody:focus {
    outline: none; border-color: var(--bt-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bt-accent) 25%, transparent);
}
.bt-compose-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px;
}
.bt-compose-counter { color: var(--text-muted); font-size: 12px; }
.bt-submit {
    padding: 10px 20px; border-radius: 10px;
    background: linear-gradient(135deg, var(--bt-accent), #ff8fd1);
    color: #1a1a2e;
    border: 0;
    font-weight: 700; font-size: 13px;
}
.bt-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Voting section */
.bt-vote {
    margin-top: 22px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    text-align: center;
}
.bt-vote-title {
    font-size: 18px; color: var(--text-heading); margin: 0 0 14px;
    font-weight: 700;
}
.bt-vote-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 12px;
}
.bt-vote-chip {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px; border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-heading);
    font-weight: 700; cursor: pointer;
    transition: border-color .2s, background .2s, transform .1s;
}
.bt-vote-chip:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: currentColor;
}
.bt-vote-chip:disabled { cursor: default; }
.bt-vote-chip.bt-vote-a { color: var(--bt-a); }
.bt-vote-chip.bt-vote-b { color: var(--bt-b); }
.bt-vote-chip.bt-voted {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 15%, transparent);
}
.bt-vote-name { font-size: 14px; }
.bt-vote-pct { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }

.bt-vote-meter {
    height: 8px; border-radius: 999px; overflow: hidden;
    display: flex;
    background: var(--bg-elevated);
    margin-bottom: 8px;
}
.bt-vote-meter-a { background: var(--bt-a); transition: width .5s var(--ease-out); }
.bt-vote-meter-b { background: var(--bt-b); transition: width .5s var(--ease-out); }

.bt-vote-meta { color: var(--text-muted); font-size: 12px; margin: 0; }

/* Result banner */
.bt-result {
    margin-top: 16px;
    padding: 20px;
    border-radius: 14px;
    text-align: center;
    background: var(--bg-card);
    border: 2px solid var(--text-muted);
}
.bt-result strong {
    display: block;
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 900;
    color: var(--text-heading);
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}
.bt-result span { color: var(--text-muted); font-size: 13px; }
.bt-result-a { border-color: var(--bt-a); background: linear-gradient(180deg, var(--bt-a-soft), var(--bg-card)); }
.bt-result-a strong { color: var(--bt-a); }
.bt-result-b { border-color: var(--bt-b); background: linear-gradient(180deg, var(--bt-b-soft), var(--bg-card)); }
.bt-result-b strong { color: var(--bt-b); }

/* Curated rows on the list page */
.bt-row { margin-bottom: 22px; }
.bt-row-title {
    font-size: 14px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-heading);
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 8px;
}
.bt-row-flame, .bt-row-clock { font-size: 16px; }
.bt-list-row {
    display: flex; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.bt-list-row .bt-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

/* Card-level vote meter (list page) */
.bt-card-meter {
    display: flex; height: 6px; border-radius: 999px; overflow: hidden;
    background: var(--bg-elevated);
    margin-top: 2px;
}
.bt-card-meter-a { background: var(--bt-a); transition: width .4s var(--ease-out); }
.bt-card-meter-b { background: var(--bt-b); transition: width .4s var(--ease-out); }
.bt-card-pcts {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 700;
    margin-top: 2px;
}
.bt-pct-a { color: var(--bt-a); }
.bt-pct-b { color: var(--bt-b); }

/* Reply thread under each argument */
.bt-reply-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 6px;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 12px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.bt-reply-toggle:hover { color: var(--bt-accent); border-color: var(--bt-accent); }
.bt-replies {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}
.bt-reply-list {
    list-style: none;
    display: flex; flex-direction: column; gap: 8px;
    padding: 0; margin: 0 0 8px;
}
.bt-reply {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-panel);
    border-radius: 8px;
    font-size: 12.5px;
}
.bt-reply p { margin: 2px 0 0; color: var(--text-primary); line-height: 1.45; }
.bt-reply-form {
    display: flex; gap: 6px; align-items: center;
}
.bt-reply-form input {
    flex: 1; padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px; color: var(--text-primary); font-size: 13px;
    font-family: inherit;
}
.bt-reply-form input:focus {
    outline: none; border-color: var(--bt-accent);
}
.bt-reply-form button {
    padding: 6px 12px; border-radius: 6px;
    background: var(--bt-accent); color: #1a1a2e; border: 0;
    font-size: 12px; font-weight: 700; cursor: pointer;
}
.bt-reply-note { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; }

/* Live activity feed */
.bt-activity {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.bt-activity-title {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted);
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 10px;
}
.bt-activity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bt-open);
    box-shadow: 0 0 8px var(--bt-open);
    animation: bt-pulse 1.6s ease-in-out infinite;
}
.bt-activity-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bt-activity-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text-secondary);
    padding: 4px 0;
}
.bt-activity-item strong { color: var(--text-heading); font-weight: 600; }
.bt-activity-item .bt-arg-user img,
.bt-activity-item .bt-arg-av-fallback { width: 22px; height: 22px; font-size: 11px; }
.bt-activity-vote     { border-left: 2px solid var(--bt-accent); padding-left: 8px; }
.bt-activity-argument { border-left: 2px solid var(--bt-a);      padding-left: 8px; }
.bt-activity-reply    { border-left: 2px solid var(--text-muted); padding-left: 8px; }

/* =========================================================
   ANIMATIONS — entry / side select / live votes / countdown
   Rules: transform + opacity first; 120–200ms for interactions.
   ========================================================= */

/* --- Entry: body fades in, sides slide from outside, VS pulses --- */
@keyframes bt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes bt-slide-in-left {
    from { transform: translateX(-28px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes bt-slide-in-right {
    from { transform: translateX(28px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes bt-vs-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.15); opacity: .85; }
}

.bt-page.bt-enter { animation: bt-fade-in var(--bt-entry) var(--bt-ease) both; }
.bt-page.bt-enter .bt-side-a {
    animation: bt-slide-in-left var(--bt-entry) var(--bt-ease) both;
    animation-delay: 60ms;
}
.bt-page.bt-enter .bt-side-b {
    animation: bt-slide-in-right var(--bt-entry) var(--bt-ease) both;
    animation-delay: 60ms;
}
.bt-page.bt-enter .bt-vs {
    animation: bt-fade-in var(--bt-entry) var(--bt-ease) both,
               bt-vs-pulse 1.4s var(--bt-ease) 420ms 1;
    animation-delay: 220ms, 420ms;
}

/* --- Side selection: chosen expands slightly, other dims --- */
.bt-side {
    transition: transform var(--bt-slow) var(--bt-spring),
                opacity   var(--bt-slow) var(--bt-ease),
                box-shadow var(--bt-slow) var(--bt-ease);
}
.bt-side.is-chosen {
    transform: scale(1.015);
    box-shadow: 0 0 0 1px currentColor,
                0 12px 28px color-mix(in srgb, currentColor 25%, transparent);
}
.bt-side-a.is-chosen { color: var(--bt-a); }
.bt-side-b.is-chosen { color: var(--bt-b); }
.bt-side.is-dimmed {
    opacity: .55;
    transform: scale(.985);
}

/* --- Argument cards: entry slide-up + fade --- */
@keyframes bt-arg-enter {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.bt-arg { transition: transform var(--bt-fast) var(--bt-ease); }
.bt-arg.bt-arg-new {
    animation: bt-arg-enter var(--bt-slow) var(--bt-ease) both;
}

/* --- Voting: count-up bump when % changes --- */
@keyframes bt-bump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.bt-pct-bump { animation: bt-bump var(--bt-slow) var(--bt-spring); }
.bt-vote-pct { transition: color var(--bt-fast) var(--bt-ease); display: inline-block; }
.bt-vote-meter-a, .bt-vote-meter-b { transition: width var(--bt-slow) var(--bt-ease); }
.bt-card-meter-a, .bt-card-meter-b { transition: width var(--bt-slow) var(--bt-ease); }

/* --- Live vote activity float "+1" --- */
@keyframes bt-vote-float {
    0%   { transform: translateY(0)    scale(.8); opacity: 0; }
    20%  { transform: translateY(-6px) scale(1);  opacity: 1; }
    100% { transform: translateY(-28px) scale(1); opacity: 0; }
}
.bt-vote-float-host { position: relative; }
.bt-vote-float {
    position: absolute;
    top: -4px;
    font-size: 13px; font-weight: 800;
    pointer-events: none;
    animation: bt-vote-float 1200ms var(--bt-ease) both;
}
.bt-vote-float-a { color: var(--bt-a); left: 8px; }
.bt-vote-float-b { color: var(--bt-b); right: 8px; }

/* --- Activity feed rows: slide down + fade on append --- */
@keyframes bt-activity-in {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.bt-activity-item.bt-activity-new {
    animation: bt-activity-in var(--bt-slow) var(--bt-ease) both;
}

/* --- Countdown: ticking + urgency --- */
@keyframes bt-urgent-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.bt-timer { transition: color var(--bt-fast) var(--bt-ease), background var(--bt-fast) var(--bt-ease); }
.bt-timer.is-urgent {
    color: var(--bt-b);
    background: color-mix(in srgb, var(--bt-b) 20%, var(--bg-elevated));
    animation: bt-urgent-pulse 900ms var(--bt-ease) infinite;
}

/* --- Phase transition toast --- */
@keyframes bt-toast-in {
    0%   { transform: translate(-50%, -10px); opacity: 0; }
    15%  { transform: translate(-50%, 0);     opacity: 1; }
    85%  { transform: translate(-50%, 0);     opacity: 1; }
    100% { transform: translate(-50%, -10px); opacity: 0; }
}
.bt-phase-toast {
    position: fixed;
    top: 76px; left: 50%;
    transform: translate(-50%, -10px);
    padding: 10px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--bt-accent);
    border-radius: 999px;
    color: var(--text-heading);
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
    z-index: 90;
    pointer-events: none;
    animation: bt-toast-in 2400ms var(--bt-ease) both;
}
.bt-phase-toast-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bt-accent);
    margin-right: 8px;
    vertical-align: middle;
}

/* --- Winner reveal (refined) --- */
@keyframes bt-reveal {
    0%   { transform: translateY(12px) scale(.97); opacity: 0; }
    60%  { transform: translateY(-2px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes bt-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
    50%      { box-shadow: 0 0 24px 6px color-mix(in srgb, currentColor 45%, transparent); }
}
@keyframes bt-winner-expand {
    from { transform: scale(1); }
    to   { transform: scale(1.03); }
}
.bt-result-reveal {
    animation: bt-reveal var(--bt-reveal) var(--bt-spring) both,
               bt-glow 2.2s ease-in-out calc(var(--bt-reveal) + 60ms) 2;
}
.bt-side-winner {
    animation: bt-winner-expand var(--bt-slow) var(--bt-spring) forwards,
               bt-glow 2.2s ease-in-out 200ms 2;
    z-index: 2;
}
.bt-side-winner .bt-fighter-img {
    transform: scale(1.06);
    transition: transform var(--bt-slow) var(--bt-spring);
}

/* --- Micro-interactions: button press + card hover --- */
.bt-card { transition: transform var(--bt-fast) var(--bt-ease),
                       border-color var(--bt-fast) var(--bt-ease),
                       box-shadow var(--bt-mid) var(--bt-ease); }
.bt-card:active { transform: translateY(-1px) scale(.995); }

.bt-join-btn, .bt-vote-chip, .bt-submit, .bt-like, .bt-report, .bt-reply-toggle {
    transition: transform var(--bt-fast) var(--bt-spring),
                background var(--bt-fast) var(--bt-ease),
                color var(--bt-fast) var(--bt-ease),
                border-color var(--bt-fast) var(--bt-ease),
                box-shadow var(--bt-fast) var(--bt-ease);
}
.bt-join-btn:active:not(:disabled),
.bt-vote-chip:active:not(:disabled),
.bt-submit:active:not(:disabled),
.bt-like:active:not(:disabled),
.bt-report:active,
.bt-reply-toggle:active { transform: scale(.96); }

/* ----- Admin: image upload drop zone ----- */
.bt-upload { position: relative; }
.bt-upload-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 18px 14px;
    min-height: 104px;
    background: var(--bg-input);
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s, color .15s;
    outline: none;
}
.bt-upload-drop:hover,
.bt-upload-drop:focus-visible { border-color: var(--bt-accent); color: var(--text-primary); }
.bt-upload-drop.is-drag { border-color: var(--bt-accent); background: color-mix(in srgb, var(--bt-accent) 10%, var(--bg-input)); }
.bt-upload-drop.is-uploading { opacity: .5; pointer-events: none; }
.bt-upload-drop strong { font-size: 13px; color: var(--text-heading); font-weight: 600; }
.bt-upload-drop span  { font-size: 11px; }
.bt-upload-drop svg   { opacity: .8; }

.bt-upload-preview {
    position: relative;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    min-height: 104px;
    display: flex; align-items: center; justify-content: center;
}
.bt-upload-preview img {
    max-width: 100%; max-height: 200px;
    object-fit: contain;
}
.bt-upload-clear {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,.6); color: #fff;
    border: 0; font-size: 16px; line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.bt-upload-clear:hover { background: var(--bt-b); }

/* Mobile: stack the arena vertically, hide center VS chip. */
@media (max-width: 760px) {
    .bt-arena {
        grid-template-columns: 1fr;
    }
    .bt-vs { display: none; }
    .bt-side-a {
        border-radius: 14px 14px 0 0;
        border-right: 1px solid var(--border-color);
    }
    .bt-side-b {
        border-radius: 0 0 14px 14px;
        border-left: 1px solid var(--border-color);
        border-top-color: var(--bt-b);
    }
    .bt-fighter-img { width: 110px; height: 110px; }
    .bt-fighter-name { font-size: 18px; }
    .bt-head { grid-template-columns: auto 1fr; }
    .bt-timer { grid-column: 1 / -1; text-align: center; }
}

/* ==================================================
   CCA AI ASSISTANT — floating button + slide-up panel
   ================================================== */

.ai-root {
    --ai-accent: #a78bfa;
    --ai-accent-2: #60a5fa;
    --ai-user-bg: color-mix(in srgb, var(--ai-accent) 22%, transparent);
    --ai-bot-bg: var(--bg-panel);
    --ai-fast: 160ms;
    --ai-mid: 220ms;
    --ai-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Floating button — lives bottom-right, above bottom nav if present */
.ai-fab {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent-2));
    color: #0b0b19;
    box-shadow: 0 6px 22px rgba(124, 58, 237, .4), 0 2px 6px rgba(0,0,0,.3);
    cursor: pointer;
    z-index: 60;
    transition: transform var(--ai-fast) var(--ai-ease),
                box-shadow var(--ai-fast) var(--ai-ease);
}
.ai-fab:hover  { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 28px rgba(124, 58, 237, .55); }
.ai-fab:active { transform: translateY(0)     scale(.96); }
.ai-fab        { cursor: grab; touch-action: none; }
.ai-fab.is-dragging,
.ai-fab.is-dragging:hover,
.ai-fab.is-dragging:active {
    cursor: grabbing;
    transform: none;
    transition: none;
}
.ai-fab-dot {
    position: absolute; top: 6px; right: 6px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #f87171; border: 2px solid var(--bg-page);
}

/* Backdrop + panel */
.ai-backdrop {
    position: fixed; inset: 0;
    background: rgba(6, 6, 18, .45);
    backdrop-filter: blur(3px);
    z-index: 69;
}
.ai-panel {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    width: min(420px, calc(100vw - 36px));
    height: min(620px, calc(100vh - 160px));
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transform-origin: bottom right;
    transition: opacity var(--ai-mid) var(--ai-ease),
                transform var(--ai-mid) var(--ai-ease);
    z-index: 70;
    overflow: hidden;
}
.ai-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }

.ai-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ai-accent) 12%, transparent), transparent);
}
.ai-head-title {
    font-size: 13px; font-weight: 400; color: var(--text-secondary);
    letter-spacing: .04em;
    display: inline-flex; align-items: center; gap: 8px;
}
.ai-head-mark {
    position: relative;
    isolation: isolate;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent-2));
    color: #0b0b19;
    flex-shrink: 0;
    animation: ai-head-mark-spin 14s linear infinite,
               ai-head-mark-glow 3.2s ease-in-out infinite;
}
/* Soft halo around the mark — pulses with the glow animation. */
.ai-head-mark::before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--ai-accent) 55%, transparent) 0%,
        transparent 65%);
    filter: blur(4px);
    opacity: .7;
    pointer-events: none;
    z-index: -1;
}
@keyframes ai-head-mark-spin {
    to { transform: rotate(360deg); }
}
@keyframes ai-head-mark-glow {
    0%, 100% {
        box-shadow:
            0 0 6px  rgba(167, 139, 250, .45),
            0 0 14px rgba(96, 165, 250, .30);
    }
    50% {
        box-shadow:
            0 0 12px rgba(167, 139, 250, .75),
            0 0 26px rgba(96, 165, 250, .55);
    }
}
.ai-head-sub {
    font-size: 10px;
    color: color-mix(in srgb, var(--text-muted) 70%, transparent);
    letter-spacing: .01em;
    margin-top: 1px;
    font-weight: 400;
}
.ai-head-actions { display: flex; gap: 6px; }
.ai-iconbtn {
    width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-color);
    cursor: pointer; font-size: 18px; line-height: 1;
    transition: color var(--ai-fast),
                border-color var(--ai-fast),
                background var(--ai-fast),
                box-shadow 220ms var(--ai-ease),
                transform 160ms var(--ai-ease);
}
.ai-iconbtn:hover {
    color: var(--ai-accent);
    border-color: var(--ai-accent);
    background: color-mix(in srgb, var(--ai-accent) 10%, var(--bg-elevated));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ai-accent) 25%, transparent),
        0 0 14px color-mix(in srgb, var(--ai-accent) 35%, transparent);
    transform: translateY(-1px);
}
.ai-iconbtn:active { transform: scale(.92); }

/* Log */
.ai-log {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 10px 14px 4px;
    display: flex; flex-direction: column; gap: 8px;
    scroll-behavior: smooth;
}
.ai-log::-webkit-scrollbar { width: 6px; }
.ai-log::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

.ai-welcome {
    color: var(--text-secondary);
    font-size: 13.5px; line-height: 1.5;
    padding: 2px 0;
}
.ai-welcome p { margin: 0 0 8px; }
.ai-welcome-head {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-heading);
    margin-bottom: 8px;
    display: inline-flex; align-items: center; gap: 8px;
}
.ai-welcome-head::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent-2));
    box-shadow: 0 0 8px color-mix(in srgb, var(--ai-accent) 70%, transparent);
    animation: ai-welcome-dot 2.6s ease-in-out infinite;
}
@keyframes ai-welcome-dot {
    0%, 100% { opacity: .55; transform: scale(.9);  }
    50%      { opacity: 1;   transform: scale(1.15); }
}
.ai-welcome-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.ai-welcome-list li {
    position: relative;
    padding: 4px 0 4px 16px;
    font-size: 13px;
    font-weight: 350;
    color: var(--text-secondary);
    line-height: 1.45;
}
.ai-welcome-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: 50%;
    width: 6px; height: 1px;
    background: color-mix(in srgb, var(--ai-accent) 60%, transparent);
    transform: translateY(-50%);
}
.ai-welcome-tip {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--ai-accent) 22%, transparent);
    font-size: 12px;
    color: var(--text-faint);
}
.ai-welcome-tip code {
    padding: 1px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--ai-accent) 14%, transparent);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
}
.ai-suggest-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-suggest {
    padding: 6px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--ai-fast), background var(--ai-fast);
}
.ai-suggest:hover { border-color: var(--ai-accent); background: var(--bg-elevated); }

.ai-msg {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 350;
    line-height: 1.5;
    max-width: 88%;
    word-wrap: break-word;
    animation: ai-msg-in var(--ai-mid) var(--ai-ease) both;
}
@keyframes ai-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-msg-user {
    align-self: flex-end;
    background: var(--ai-user-bg);
    color: var(--text-heading);
    border: 1px solid color-mix(in srgb, var(--ai-accent) 35%, transparent);
    white-space: pre-wrap;
}
.ai-msg-assistant {
    align-self: flex-start;
    background: var(--ai-bot-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}
.ai-msg-assistant p { margin: 0 0 8px; }
/* New blocks (paragraphs, lists) appearing during streaming fade + rise. */
.ai-msg-assistant .ai-token-in {
    animation: ai-token-in 140ms ease-out both;
}
@keyframes ai-token-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-msg-assistant p:last-child { margin-bottom: 0; }
.ai-msg-assistant ul { margin: 4px 0 6px; padding-left: 18px; }
.ai-msg-assistant li { margin: 2px 0; }
.ai-msg-assistant strong { color: var(--text-heading); }
.ai-msg-assistant code {
    background: var(--bg-elevated);
    padding: 1px 5px; border-radius: 4px;
    font-size: 12px; font-family: 'Menlo','Consolas',monospace;
}
.ai-msg-error {
    align-self: stretch;
    background: color-mix(in srgb, #ef4444 15%, transparent);
    border-color: #ef4444; color: #f87171;
    font-size: 12.5px;
}

/* Typing / streaming indicator */
.ai-typing {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 0;
}
.ai-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted);
    animation: ai-typing 1.1s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .18s; }
.ai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes ai-typing {
    0%,100% { transform: scale(.6); opacity: .45; }
    50%     { transform: scale(1);  opacity: 1;   }
}
.ai-streaming { position: relative; }
.ai-streaming::after {
    content: "";
    display: inline-block;
    width: 7px; height: 14px;
    background: var(--ai-accent);
    margin-left: 2px;
    vertical-align: -2px;
    animation: ai-caret 1.1s steps(2) infinite;
}
@keyframes ai-caret { 50% { opacity: 0; } }

/* Quick-action chips above the composer — always visible, one-tap. */
.ai-chips {
    display: flex; flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 14px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.ai-chips::-webkit-scrollbar { height: 0; }
.ai-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 6px 12px;
    font-size: 12px; font-weight: 500;
    color: color-mix(in srgb, var(--text-secondary) 75%, transparent);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: 999px;
    cursor: pointer; white-space: nowrap;
    transition: color var(--ai-fast), border-color var(--ai-fast),
                background var(--ai-fast), transform var(--ai-fast);
}
.ai-chip:hover {
    color: var(--ai-accent);
    border-color: var(--ai-accent);
    background: color-mix(in srgb, var(--ai-accent) 10%, transparent);
}
.ai-chip:active { transform: scale(.96); }

/* First chip is the suggested one — warmer tint, stronger border, bolder. */
.ai-chip:first-child {
    font-weight: 600;
    color: var(--ai-accent);
    background: color-mix(in srgb, var(--ai-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--ai-accent) 45%, var(--border-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai-accent) 18%, transparent);
}
.ai-chip:first-child:hover {
    background: color-mix(in srgb, var(--ai-accent) 22%, transparent);
    border-color: var(--ai-accent);
}

/* Quick / Deep mode toggle in header */
.ai-head { gap: 8px; }
.ai-head-text { flex: 1; min-width: 0; }
.ai-mode {
    position: relative;
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-panel);
    flex-shrink: 0;
}
/* Sliding pill — tracks the active button via :has(). */
.ai-mode::before {
    content: "";
    position: absolute;
    top: 2px; bottom: 2px; left: 2px;
    width: calc(50% - 2px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent-2));
    box-shadow: 0 1px 4px rgba(124, 58, 237, .35);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0;
}
.ai-mode:has(.ai-mode-btn[data-mode="deep"].is-active)::before {
    transform: translateX(100%);
}
.ai-mode-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 46px;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: transparent; border: 0;
    color: color-mix(in srgb, var(--text-muted) 55%, transparent);
    cursor: pointer;
    transition: color 240ms var(--ai-ease);
}
.ai-mode-btn.is-active { color: #0b0b19; }

/* Full-screen expand — blows panel up to fill the viewport. */
.ai-panel.is-expanded {
    right: 0; bottom: 0; left: 0; top: 0;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    border: 0;
}

/* Composer */
.ai-input {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-panel);
}

/* Oryx presence orb — small living dot in the composer. */
.ai-presence {
    align-self: center;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #fff 0%, var(--ai-accent) 45%, var(--ai-accent-2) 100%);
    box-shadow:
        0 0 6px  color-mix(in srgb, var(--ai-accent) 55%, transparent),
        0 0 14px color-mix(in srgb, var(--ai-accent-2) 35%, transparent);
    flex-shrink: 0;
    animation: ai-presence-breathe 3.8s ease-in-out infinite;
}
@keyframes ai-presence-breathe {
    0%, 100% { transform: scale(.85); opacity: .55; }
    50%      { transform: scale(1.1);  opacity: 1;   }
}
/* Panel enters "thinking" while Oryx is streaming — orb quickens and brightens. */
.ai-panel.is-thinking .ai-presence {
    animation: ai-presence-think 0.85s ease-in-out infinite;
}
@keyframes ai-presence-think {
    0%, 100% {
        transform: scale(.9);
        opacity: .8;
        box-shadow:
            0 0 6px  color-mix(in srgb, var(--ai-accent) 55%, transparent),
            0 0 12px color-mix(in srgb, var(--ai-accent-2) 40%, transparent);
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
        box-shadow:
            0 0 12px color-mix(in srgb, var(--ai-accent) 85%, transparent),
            0 0 24px color-mix(in srgb, var(--ai-accent-2) 70%, transparent);
    }
}
.ai-input textarea {
    flex: 1;
    padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    caret-color: var(--ai-accent);
    font: 13.5px/1.4 inherit;
    resize: none;
    max-height: 140px;
    transition: border-color var(--ai-fast), box-shadow 220ms var(--ai-ease);
}
.ai-input textarea:focus {
    outline: none;
    border-color: var(--ai-accent);
    box-shadow:
        0 0 0 2px  color-mix(in srgb, var(--ai-accent) 28%, transparent),
        0 0 18px 2px color-mix(in srgb, var(--ai-accent) 22%, transparent);
}

.ai-send {
    position: relative;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(135deg, var(--ai-accent), var(--ai-accent-2));
    color: #0b0b19;
    cursor: pointer; flex-shrink: 0;
    transition: transform 200ms var(--ai-ease),
                box-shadow 220ms var(--ai-ease),
                opacity var(--ai-fast);
}
.ai-send:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ai-accent) 45%, transparent);
}
.ai-send:hover:not(:disabled) svg {
    animation: ai-send-nudge 500ms var(--ai-ease);
}
@keyframes ai-send-nudge {
    0%   { transform: translate(0, 0); }
    40%  { transform: translate(3px, -3px); }
    70%  { transform: translate(-1px, 1px); }
    100% { transform: translate(0, 0); }
}
.ai-send:active:not(:disabled) { transform: scale(.94); }
.ai-send:disabled { opacity: .5; cursor: not-allowed; }

/* Mobile */
@media (max-width: 640px) {
    .ai-fab { right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); }
    .ai-panel {
        right: 10px; left: 10px;
        width: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
        height: min(76vh, 600px);
    }
}

/* ==================================================
   Oryx — click burst, panel bloom, calming ambient
   ================================================== */

/* FAB click — two rings ripple outward and the icon spins once. */
.ai-fab { overflow: visible; }
.ai-fab::before,
.ai-fab::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ai-accent);
    opacity: 0;
    pointer-events: none;
}
.ai-fab.is-bursting::before { animation: ai-fab-burst 650ms var(--ai-ease) forwards; }
.ai-fab.is-bursting::after  { animation: ai-fab-burst 650ms var(--ai-ease) 110ms forwards; }
@keyframes ai-fab-burst {
    0%   { transform: scale(.9);  opacity: .8; border-width: 3px; }
    100% { transform: scale(2.6); opacity: 0;  border-width: 1px; }
}
.ai-fab.is-bursting svg {
    animation: ai-fab-spin 650ms var(--ai-ease);
    transform-origin: center;
}
@keyframes ai-fab-spin {
    0%   { transform: rotate(0deg)   scale(1);    }
    40%  { transform: rotate(180deg) scale(1.18); }
    100% { transform: rotate(360deg) scale(1);    }
}

/* Panel bloom — blurred entry that clears as it settles. */
.ai-panel {
    isolation: isolate;
    filter: blur(6px);
    transition: opacity 300ms var(--ai-ease),
                transform 380ms var(--ai-ease),
                filter   300ms var(--ai-ease);
}
.ai-panel.is-open { filter: blur(0); }

/* Slow-drifting aurora behind panel content — calming, never distracting. */
.ai-panel::before {
    content: "";
    position: absolute; inset: -30%;
    background:
        radial-gradient(closest-side at 25% 20%,
            color-mix(in srgb, var(--ai-accent) 20%, transparent), transparent 70%),
        radial-gradient(closest-side at 80% 75%,
            color-mix(in srgb, var(--ai-accent-2) 18%, transparent), transparent 70%);
    opacity: .55;
    pointer-events: none;
    animation: ai-aurora-drift 22s ease-in-out infinite alternate;
    z-index: -1;
}
@keyframes ai-aurora-drift {
    0%   { transform: translate(-3%, -2%) rotate(-3deg); }
    50%  { transform: translate( 3%,  2%) rotate( 4deg); }
    100% { transform: translate(-2%,  3%) rotate(-2deg); }
}

/* Stagger the inner rows so the panel assembles instead of snapping in. */
.ai-panel.is-open .ai-head  { animation: ai-section-in 420ms var(--ai-ease) 40ms  both; }
.ai-panel.is-open .ai-log   { animation: ai-section-in 420ms var(--ai-ease) 110ms both; }
.ai-panel.is-open .ai-chips { animation: ai-section-in 420ms var(--ai-ease) 170ms both; }
.ai-panel.is-open .ai-input { animation: ai-section-in 420ms var(--ai-ease) 220ms both; }
@keyframes ai-section-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Calming shimmer drifting across the header — a slow breath. */
.ai-head { position: relative; overflow: hidden; isolation: isolate; }
.ai-head::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(115deg,
        transparent 42%,
        color-mix(in srgb, var(--ai-accent) 10%, transparent) 50%,
        transparent 58%);
    background-size: 220% 100%;
    animation: ai-head-shimmer 10s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes ai-head-shimmer {
    0%   { background-position: 220% 0; }
    100% { background-position: -120% 0; }
}

/* Composer textarea gently breathes when idle — stops on focus. */
.ai-input textarea { animation: ai-input-breathe 6s ease-in-out infinite; }
.ai-input textarea:focus { animation: none; }
@keyframes ai-input-breathe {
    0%, 100% { box-shadow: 0 0 0 0   rgba(167, 139, 250, 0);   }
    50%      { box-shadow: 0 0 0 3px rgba(167, 139, 250, .10); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-panel, .ai-panel::before,
    .ai-panel.is-open .ai-head, .ai-panel.is-open .ai-log,
    .ai-panel.is-open .ai-chips, .ai-panel.is-open .ai-input,
    .ai-msg, .ai-msg-assistant .ai-token-in,
    .ai-typing span, .ai-streaming::after,
    .ai-head::after, .ai-head-mark, .ai-welcome-head::before,
    .ai-presence, .ai-input textarea,
    .ai-mode::before, .ai-mode-btn,
    .ai-send, .ai-send svg,
    .ai-fab::before, .ai-fab::after, .ai-fab svg {
        animation: none !important;
        transition: none !important;
    }
    .ai-panel { filter: none !important; }
}

/* ============================================================
   PREMIUM LEADERBOARD (v2) — lb2-* namespace.
   Glassmorphism, podium centerpiece, Daily/Weekly/Monthly tabs.
   ============================================================ */

.lb2-body {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(56, 189, 248, 0.15), transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 100%, rgba(139, 92, 246, 0.12), transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 100%, rgba(20, 184, 166, 0.12), transparent 60%),
        #070a18;
    min-height: 100vh;
    color: #e2e8f0;
}
.lb2-stage {
    position: relative;
    max-width: 1100px;
    margin: 40px auto 80px;
    padding: 0 18px;
}
.lb2-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.5;
    animation: lb2-drift 18s ease-in-out infinite;
}
.lb2-glow-a { top: -40px;  left: 10%;  width: 260px; height: 260px; background: #22d3ee; }
.lb2-glow-b { top: 340px;  right: 5%;  width: 220px; height: 220px; background: #8b5cf6; animation-delay: -6s; }
.lb2-glow-c { bottom: 60px; left: 40%; width: 280px; height: 200px; background: #14b8a6; animation-delay: -12s; }
@keyframes lb2-drift {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(30px,-20px) scale(1.08); }
    66%     { transform: translate(-20px,30px) scale(0.94); }
}

.lb2-shell {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(14, 20, 40, 0.75), rgba(7, 10, 24, 0.85));
    border: 1px solid rgba(103, 232, 249, 0.12);
    border-radius: 24px;
    padding: 28px 28px 34px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 60px rgba(8, 12, 30, 0.6), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* --- Top row --- */
.lb2-top {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    margin-bottom: 22px;
}
.lb2-back {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #cbd5e1;
    transition: background 0.15s, color 0.15s;
}
.lb2-back:hover { background: rgba(56,189,248,0.15); color: #fff; }
.lb2-title {
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #fff, #67e8f9);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lb2-top-pad { width: 38px; }

/* --- Tabs (pill) --- */
.lb2-tabs {
    position: relative;
    display: inline-flex;
    gap: 2px;
    margin: 0 auto 32px;
    padding: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 100px;
    justify-self: center;
}
.lb2-shell { display: flex; flex-direction: column; }
.lb2-shell .lb2-tabs { align-self: center; }

.lb2-tab {
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    color: #94a3b8;
    padding: 8px 22px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
}
.lb2-tab:hover { color: #e2e8f0; }
.lb2-tab.active { color: #0b1020; }
.lb2-tab-slider {
    position: absolute;
    top: 4px; left: 0;
    height: calc(100% - 8px);
    background: linear-gradient(135deg, #67e8f9, #38bdf8);
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.5);
    transition: transform 180ms ease, width 180ms ease;
    pointer-events: none;
    z-index: 0;
}

/* --- Top 3 podium --- */
.lb2-podium {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 12px;
    align-items: end;
    justify-items: center;
    padding: 20px 8px 32px;
    animation: lb2-fade-in 500ms ease both;
}
.lb2-plinth {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    position: relative;
    padding-top: 26px;   /* room for the crown/badge */
    min-height: 180px;
    animation: lb2-fade-up 500ms ease both;
}
.lb2-plinth-2 { animation-delay: 100ms; }
.lb2-plinth-1 { animation-delay: 0ms; transform: translateY(-16px); }
.lb2-plinth-3 { animation-delay: 200ms; }
.lb2-plinth-empty { opacity: 0.25; }
.lb2-plinth-empty::after {
    content: '—';
    color: #475569;
    font-size: 2rem;
    margin: 40px auto 0;
}

.lb2-crown {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 12px rgba(245, 196, 74, 0.6));
    animation: lb2-float 2.5s ease-in-out infinite;
}
.lb2-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #1e293b;
    border: 3px solid rgba(255,255,255,0.2);
}
.lb2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb2-avatar-lg {
    width: 100px; height: 100px;
    border-color: #f5c44a;
    box-shadow:
        0 0 0 4px rgba(245, 196, 74, 0.2),
        0 0 40px rgba(245, 196, 74, 0.45);
    animation: lb2-pulse 2.5s ease-in-out infinite;
}
.lb2-plinth-2 .lb2-avatar { border-color: #cbd5e1; }
.lb2-plinth-3 .lb2-avatar { border-color: #cd7f32; }

.lb2-badge {
    position: absolute;
    top: -4px;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: #0b1020;
    border: 2px solid rgba(0,0,0,0.3);
    z-index: 2;
}
.lb2-plinth-1 .lb2-badge { display: none; /* crown replaces it for rank 1 */ }
.lb2-plinth-2 .lb2-badge { right: 30%; top: 60px; }
.lb2-plinth-3 .lb2-badge { right: 30%; top: 60px; }
.lb2-badge-gold   { background: linear-gradient(135deg, #fde68a, #f5c44a); }
.lb2-badge-silver { background: linear-gradient(135deg, #f1f5f9, #94a3b8); }
.lb2-badge-bronze { background: linear-gradient(135deg, #fed7aa, #c08457); }

.lb2-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #f1f5f9;
    margin-top: 4px;
    max-width: 140px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb2-plinth-1 .lb2-name { font-size: 1.05rem; }
.lb2-handle {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.7);
    font-weight: 500;
    margin-top: 1px;
    max-width: 140px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb2-score {
    font-size: 0.85rem;
    color: #67e8f9;
    font-weight: 600;
}
.lb2-score small { color: #94a3b8; font-weight: 500; margin-left: 2px; }
.lb2-score-lg { font-size: 1rem; }

/* --- Divider --- */
.lb2-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(103, 232, 249, 0.05) 20%,
        rgba(103, 232, 249, 0.5) 50%,
        rgba(103, 232, 249, 0.05) 80%,
        transparent 100%);
    margin: 12px 0 24px;
    box-shadow: 0 0 8px rgba(103, 232, 249, 0.3);
}

/* --- Your Rank card --- */
.lb2-your {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 22px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(103, 232, 249, 0.09), rgba(139, 92, 246, 0.09));
    border: 1px solid rgba(103, 232, 249, 0.25);
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(103, 232, 249, 0.08), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: lb2-fade-up 400ms ease 300ms both;
}
.lb2-your-label { color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.lb2-your-rank  { font-size: 1.75rem; font-weight: 800; color: #67e8f9; }
.lb2-your-info strong { display: block; color: #f1f5f9; font-size: 1rem; }
.lb2-your-info small  { color: #94a3b8; font-size: 0.8rem; }
.lb2-your-score       { text-align: right; }
.lb2-your-score span  { display: block; font-size: 1.3rem; font-weight: 700; color: #f1f5f9; }
.lb2-your-score small { color: #94a3b8; font-size: 0.75rem; }
.lb2-your-empty { opacity: 0.7; }

/* --- List rows --- */
.lb2-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lb2-row {
    display: grid;
    grid-template-columns: 60px 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    animation: lb2-fade-up 300ms ease both;
}
.lb2-row:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(103,232,249,0.08), rgba(139,92,246,0.05));
    border-color: rgba(103, 232, 249, 0.2);
}
.lb2-row-self {
    background: linear-gradient(135deg, rgba(103,232,249,0.14), rgba(139,92,246,0.10));
    border-color: rgba(103, 232, 249, 0.4);
    box-shadow: 0 0 14px rgba(103, 232, 249, 0.18);
}
.lb2-row-rank {
    font-weight: 700;
    font-size: 0.95rem;
    color: #94a3b8;
}
.lb2-row-rank-gold   { color: #f5c44a; text-shadow: 0 0 8px rgba(245,196,74,0.4); }
.lb2-row-rank-silver { color: #e2e8f0; }
.lb2-row-rank-bronze { color: #cd7f32; }
.lb2-row-avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: #1e293b; border: 1px solid rgba(255,255,255,0.1);
}
.lb2-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb2-row-id strong { display: block; color: #f1f5f9; font-size: 0.95rem; }
.lb2-row-id small  { color: #94a3b8; font-size: 0.75rem; }
.lb2-row-score {
    font-weight: 700;
    color: #67e8f9;
    font-size: 1rem;
    text-align: right;
}
.lb2-row-score small { display: block; color: #64748b; font-size: 0.7rem; font-weight: 500; margin-top: -2px; }

/* --- Empty state --- */
.lb2-empty {
    text-align: center;
    color: #64748b;
    padding: 40px 20px;
    font-size: 0.9rem;
}

/* --- Pagination --- */
.lb2-pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}
.lb2-pg {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #cbd5e1;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lb2-pg:hover:not(:disabled) {
    background: rgba(103, 232, 249, 0.12);
    color: #fff;
    border-color: rgba(103, 232, 249, 0.3);
}
.lb2-pg.active {
    background: linear-gradient(135deg, #67e8f9, #38bdf8);
    color: #0b1020;
    border-color: transparent;
}
.lb2-pg:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- Animations --- */
@keyframes lb2-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb2-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lb2-float {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%     { transform: translateX(-50%) translateY(-4px); }
}
@keyframes lb2-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(245, 196, 74, 0.2), 0 0 40px rgba(245, 196, 74, 0.45); }
    50%     { box-shadow: 0 0 0 4px rgba(245, 196, 74, 0.35), 0 0 60px rgba(245, 196, 74, 0.7); }
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .lb2-stage { padding: 0 10px; }
    .lb2-shell { padding: 18px 14px 24px; border-radius: 18px; }
    .lb2-title { font-size: 1.2rem; }
    .lb2-tab   { padding: 7px 16px; font-size: 0.82rem; }
    .lb2-podium {
        grid-template-columns: 1fr 1.1fr 1fr;
        gap: 4px;
        padding: 14px 4px 24px;
    }
    .lb2-avatar    { width: 56px; height: 56px; }
    .lb2-avatar-lg { width: 78px; height: 78px; }
    .lb2-name      { font-size: 0.85rem; max-width: 90px; }
    .lb2-score     { font-size: 0.78rem; }
    .lb2-your {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        padding: 12px 14px;
    }
    .lb2-your-label { display: none; }
    .lb2-row {
        grid-template-columns: 46px 36px 1fr auto;
        gap: 10px;
        padding: 10px 12px;
    }
    .lb2-row-rank { font-size: 0.85rem; }
    .lb2-row-avatar { width: 32px; height: 32px; }
    .lb2-row-id strong { font-size: 0.88rem; }
}

/* ============================================================
   READER VIEW — rd-* namespace (read.php)
   Kindle / Medium / Audible hybrid. Serif prose, centered column,
   sticky audio bar, focus mode, progress indicator. Dark-only.
   ============================================================ */

body.rd-body {
    background: #0c0d14;
    color: #e8e8f0;
    font-family: 'Iowan Old Style', 'Apple Garamond', 'Palatino', 'Baskerville', 'Georgia', serif;
    font-feature-settings: "liga", "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scroll progress bar — v2 reader skips the site navbar, so it sits
   at the very top of the viewport above the minimal reader bar. */
.rd-progress {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    height: 2px;
    background: rgba(255, 255, 255, .04);
    z-index: 55;
    pointer-events: none;
}
.rd-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #ec4899);
    width: 0;
    transition: width 80ms linear;
}

/* Article column — narrow, centered, generous breathing room.
   Max-width matches the editor (720px) so writing = reading. */
.rd-article {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 140px;
    position: relative;
}

/* Back button — unobtrusive, top-left of article. */
.rd-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(232, 232, 240, .55);
    font-size: .85rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-decoration: none;
    margin-bottom: 32px;
    transition: color .15s;
}
.rd-back:hover { color: rgba(232, 232, 240, .9); }

/* Header block — eyebrow genre, title, byline, tools. */
.rd-header { margin-bottom: 36px; }
.rd-eyebrow {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a78bfa;
    margin-bottom: 14px;
    font-weight: 600;
}
.rd-title {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: clamp(2.1rem, 4.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #f5f5fa;
    margin: 0 0 20px;
}
.rd-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .88rem;
    color: rgba(232, 232, 240, .6);
    margin-bottom: 18px;
}
.rd-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(232, 232, 240, .85);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.rd-author:hover { color: #fff; }
.rd-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2a4a;
}
.rd-avatar-fallback {
    display: inline-flex;
    align-items: center; justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: #c4b5fd;
    background: linear-gradient(135deg, #312e81, #4c1d95);
}
.rd-meta-sep { opacity: .4; }
.rd-meta-faint { opacity: .65; }

/* Tool row — focus, text size, etc. */
.rd-tools {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.rd-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .04);
    color: rgba(232, 232, 240, .7);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 999px;
    padding: 6px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.rd-tool:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rd-tool.active {
    background: rgba(167, 139, 250, .18);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, .35);
}

/* Cover image — optional hero. */
.rd-cover {
    margin: 0 0 40px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.rd-cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* The prose. Serif, generous line-height, matches editor #wrEdBody. */
.rd-body-prose {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 1.25rem;
    line-height: 1.75;
    color: #d8d8e4;
    letter-spacing: .005em;
    transition: font-size .2s, line-height .2s, color var(--dur-base) var(--ease-out);
}
.rd-body-prose p {
    margin: 0 0 1.3em;
}
.rd-body-prose p:first-of-type::first-letter {
    /* Gentle drop-cap on the opening paragraph — a Kindle touch. */
    font-size: 3.2em;
    line-height: .9;
    float: left;
    padding-right: 10px;
    padding-top: 4px;
    color: #c4b5fd;
    font-weight: 600;
}
.rd-body-prose h2 {
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 2em 0 .7em;
    color: #f5f5fa;
}
.rd-body-prose h3 {
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 1.6em 0 .5em;
    color: #e8e8f0;
}
.rd-body-prose blockquote {
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: 1.3rem;
    line-height: 1.6;
    margin: 1.4em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid #a78bfa;
    color: rgba(216, 216, 228, .88);
    font-style: italic;
}
.rd-body-prose hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    margin: 2.4em auto;
    width: 40%;
    opacity: .7;
}
.rd-body-prose a {
    color: #c4b5fd;
    text-decoration: underline;
    text-decoration-color: rgba(196, 181, 253, .3);
    text-underline-offset: 3px;
}
.rd-body-prose a:hover { text-decoration-color: #c4b5fd; }
.rd-body-prose strong { color: #f0f0f8; }
.rd-body-prose em { color: #e0e0ea; }
.rd-body-prose img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1.4em 0;
}

/* Text-size toggle states. Base is 1.25rem (matches editor). */
.rd-body-prose.rd-size-small   { font-size: 1.1rem;  line-height: 1.7; }
.rd-body-prose.rd-size-regular { font-size: 1.25rem; line-height: 1.75; }
.rd-body-prose.rd-size-large   { font-size: 1.4rem;  line-height: 1.8; }

/* Author footer card. */
.rd-author-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 56px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(167, 139, 250, .04), rgba(236, 72, 153, .03));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rd-author-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.rd-author-card-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 1.1rem;
}
.rd-author-card-label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(232, 232, 240, .5);
    margin-bottom: 2px;
}
.rd-author-card-name {
    font-size: 1.05rem;
    color: #f5f5fa;
    display: block;
}
.rd-author-card-xp {
    color: rgba(232, 232, 240, .55);
    font-size: .8rem;
}
.rd-author-card-follow {
    font-size: .85rem;
    font-weight: 600;
    color: #c4b5fd;
    padding: 8px 16px;
    border: 1px solid rgba(167, 139, 250, .4);
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.rd-author-card-follow:hover {
    background: rgba(167, 139, 250, .15);
    color: #fff;
}

/* More from author. */
.rd-more {
    margin-top: 48px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rd-more-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(232, 232, 240, .8);
    letter-spacing: -.01em;
    margin: 0 0 16px;
}
.rd-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.rd-more-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s, border-color .15s;
    background: rgba(255, 255, 255, .02);
}
.rd-more-card:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 139, 250, .3);
}
.rd-more-cover {
    height: 110px;
    background-size: cover;
    background-position: center;
    background-color: #1a1a28;
}
.rd-more-cover-blank {
    background: linear-gradient(135deg, #1a1a28, #2a2a40);
}
.rd-more-body {
    padding: 10px 12px 12px;
}
.rd-more-body strong {
    display: block;
    font-size: .92rem;
    color: #f0f0f8;
    margin-bottom: 2px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rd-more-body small { color: rgba(232, 232, 240, .45); font-size: .75rem; }

/* Narration player lives in narration.css (rd-nar namespace). */

/* ---- FOCUS MODE ---- */
body.rd-focus .navbar,
body.rd-focus .sg-bottom-nav,
body.rd-focus .rd-bar,
body.rd-focus .rd-ch-nav,
body.rd-focus #toastContainer { opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out); }
body.rd-focus .rd-bar { transform: translateY(-100%); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
body.rd-focus .rd-article { padding-top: 8vh; }
body.rd-focus .rd-progress { opacity: .25; transition: opacity .25s; }
body.rd-focus .rd-progress:hover { opacity: 1; }
body.rd-focus .rd-bar:hover { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
    .rd-article { padding: 28px 18px 160px; }
    .rd-cover { margin-bottom: 28px; }
    .rd-body-prose { font-size: 1.05rem; line-height: 1.75; }
    .rd-body-prose.rd-size-small { font-size: .95rem; }
    .rd-body-prose.rd-size-large { font-size: 1.18rem; }
    .rd-author-card { flex-direction: column; align-items: flex-start; }
    .rd-author-card-follow { align-self: stretch; text-align: center; }
}

/* ============================================================
   STORY PUBLISHER — pub-* namespace (publish.php)
   4-step flow: Basics → Write → Cover → Preview.
   ============================================================ */

body.pub-body {
    background: #0a0b14;
    color: #e8e8f0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pub-shell {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 22px 140px;
}

/* ---- Step indicator ---- */
.pub-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pub-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    color: rgba(232, 232, 240, .45);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
    transition: color .15s;
}
.pub-step:hover { color: rgba(232, 232, 240, .75); }
.pub-step.active { color: #f5f5fa; }
.pub-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    font-size: .72rem;
    transition: background .15s, color .15s;
}
.pub-step.active .pub-step-n {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    color: #0a0b14;
}
.pub-step-line {
    flex: 0 1 32px;
    height: 1px;
    background: rgba(255, 255, 255, .1);
}

.pub-status {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .72rem;
    color: rgba(232, 232, 240, .4);
    letter-spacing: .04em;
    margin-bottom: 34px;
}
.pub-status[data-kind="ok"]  { color: #86efac; }
.pub-status[data-kind="err"] { color: #fca5a5; }

/* ---- Panels ---- */
.pub-panel {
    display: none;
    animation: pub-fade-in .3s ease both;
}
.pub-panel.active { display: block; }
@keyframes pub-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pub-h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 8px;
    color: #f5f5fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pub-h1-inline { display: inline; margin-right: 14px; font-size: 1.4rem; }
.pub-sub {
    margin: 0 0 28px;
    color: rgba(232, 232, 240, .55);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .95rem;
}

/* ---- Fields (Basics) ---- */
.pub-label {
    display: block;
    position: relative;
    margin-bottom: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pub-label-text {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(232, 232, 240, .6);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pub-label-text small {
    display: inline;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: rgba(232, 232, 240, .4);
    margin-left: 8px;
}
.pub-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .03);
    color: #f5f5fa;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color .15s, background .15s;
}
.pub-input:focus {
    outline: none;
    border-color: rgba(167, 139, 250, .6);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .12);
}
.pub-textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.pub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pub-label-half { margin-bottom: 22px; }
@media (max-width: 540px) { .pub-row { grid-template-columns: 1fr; } }

/* Oryx helper button */
.pub-ai {
    position: absolute;
    top: 0; right: 0;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(167, 139, 250, .12);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, .25);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.pub-ai:hover:not(:disabled) { background: rgba(167, 139, 250, .22); }
.pub-ai:disabled { opacity: .55; cursor: default; }
.pub-ai-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -14px 0 22px;
}
.pub-ai-pill {
    background: rgba(167, 139, 250, .08);
    color: #e8e8f0;
    border: 1px dashed rgba(167, 139, 250, .35);
    padding: 6px 12px;
    border-radius: 999px;
    font-family: inherit;
    font-size: .88rem;
    cursor: pointer;
    transition: background .15s;
}
.pub-ai-pill:hover { background: rgba(167, 139, 250, .18); }

/* ---- Actions ---- */
.pub-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 32px;
}
.pub-actions-split { justify-content: space-between; }
.pub-btn {
    padding: 11px 22px;
    background: rgba(255, 255, 255, .06);
    color: #e8e8f0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.pub-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.pub-btn:active { transform: scale(.98); }
.pub-btn:disabled { opacity: .5; cursor: default; }
.pub-btn-primary {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    color: #0a0b14;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(139, 92, 246, .35);
}
.pub-btn-primary:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(139, 92, 246, .5); }

/* ---- Editor (Step 2) ---- */
.pub-editor-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pub-chapters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.pub-chapter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .04);
    color: rgba(232, 232, 240, .7);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    max-width: 180px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-chapter:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pub-chapter.active {
    background: rgba(167, 139, 250, .18);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, .35);
}
.pub-chapter-x {
    opacity: .5;
    padding: 0 2px;
    font-weight: 700;
    font-size: .95rem;
}
.pub-chapter-x:hover { opacity: 1; color: #fca5a5; }
.pub-chapter-add {
    background: transparent;
    color: rgba(232, 232, 240, .55);
    border: 1px dashed rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s, border-color .15s;
}
.pub-chapter-add:hover { color: #c4b5fd; border-color: rgba(167, 139, 250, .4); }

.pub-editor-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
}
.pub-fmt {
    background: transparent;
    color: rgba(232, 232, 240, .7);
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .85rem;
    cursor: pointer;
    min-width: 32px;
    transition: background .15s, color .15s;
}
.pub-fmt:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pub-fmt-sep {
    width: 1px; height: 18px;
    background: rgba(255, 255, 255, .1);
    margin: 0 4px;
}

.pub-chapter-title-input {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .03);
    color: rgba(232, 232, 240, .85);
    border: 1px solid rgba(255, 255, 255, .06);
    border-top: 0;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
}
.pub-chapter-title-input::placeholder { color: rgba(232, 232, 240, .3); }

.pub-editor {
    min-height: 360px;
    padding: 20px 20px 40px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    font-family: 'Iowan Old Style', 'Georgia', serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #e0e0ea;
    outline: none;
}
.pub-editor:empty::before {
    content: attr(data-placeholder);
    color: rgba(232, 232, 240, .3);
    pointer-events: none;
}
.pub-editor p { margin: 0 0 1em; }
.pub-editor h2 { font-size: 1.4rem; margin: 1.2em 0 .5em; color: #f5f5fa; }
.pub-editor h3 { font-size: 1.1rem; margin: 1em 0 .4em; color: #f0f0f8; }
.pub-editor blockquote {
    margin: 1em 0;
    padding-left: 16px;
    border-left: 3px solid #a78bfa;
    color: rgba(224, 224, 234, .85);
    font-style: italic;
}
.pub-editor ul, .pub-editor ol { padding-left: 28px; margin: 0 0 1em; }

.pub-counter {
    margin-top: 10px;
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .75rem;
    color: rgba(232, 232, 240, .45);
}

/* ---- Cover (Step 3) ---- */
.pub-cover-zone {
    position: relative;
    border: 2px dashed rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, background .15s;
}
.pub-cover-zone:hover { border-color: rgba(167, 139, 250, .35); background: rgba(167, 139, 250, .04); }
.pub-cover-zone.dragover { border-color: #a78bfa; background: rgba(167, 139, 250, .1); }
.pub-cover-empty {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 40px 20px;
    color: rgba(232, 232, 240, .65);
}
.pub-cover-empty p { margin: 14px 0 6px; font-size: 1rem; }
.pub-cover-empty small { color: rgba(232, 232, 240, .4); }
.pub-cover-preview {
    display: block;
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto;
    border-radius: 10px;
}
.pub-cover-clear {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(10, 11, 20, .75);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: 1.2rem;
    cursor: pointer;
}
.pub-cover-clear:hover { background: rgba(239, 68, 68, .85); }

/* ---- Preview (Step 4) ---- */
.pub-preview {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 30px 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pub-prev-cover {
    height: 240px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 24px;
}
.pub-prev-head { margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .06); padding-bottom: 18px; }
.pub-prev-eyebrow {
    display: inline-block;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a78bfa;
    margin-bottom: 10px;
    font-weight: 600;
}
.pub-prev-head h1 {
    margin: 0 0 10px;
    font-size: 1.8rem;
    color: #f5f5fa;
    font-weight: 700;
    letter-spacing: -.01em;
}
.pub-prev-desc { margin: 0; color: rgba(232, 232, 240, .7); font-size: .95rem; font-style: italic; }
.pub-prev-body {
    font-family: 'Iowan Old Style', 'Georgia', serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #d8d8e4;
}
.pub-prev-body > *:first-child { margin-top: 0; }

/* ---- Discard ---- */
.pub-discard-wrap { text-align: center; margin-top: 28px; }
.pub-discard {
    background: transparent;
    border: 0;
    color: rgba(232, 232, 240, .35);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .8rem;
    cursor: pointer;
    transition: color .15s;
}
.pub-discard:hover { color: #fca5a5; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .pub-shell { padding: 22px 14px 160px; }
    .pub-steps { gap: 6px; }
    .pub-step span:not(.pub-step-n) { display: none; }
    .pub-step-line { flex: 0 1 16px; }
    .pub-h1 { font-size: 1.5rem; }
    .pub-preview { padding: 22px 16px; }
    .pub-prev-cover { height: 180px; }
    .pub-editor { padding: 16px 14px 28px; min-height: 300px; font-size: 1rem; }
    .pub-actions { flex-direction: column-reverse; }
    .pub-actions .pub-btn { width: 100%; }
}

/* ============================================================
   GUILDS HUB — gd-* namespace (guilds.php)
   ============================================================ */

body.gd-body { background: #0a0b14; color: #e8e8f0; }

.gd-shell {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 22px 140px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.gd-top { margin-bottom: 28px; }
.gd-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #f5f5fa;
    margin: 0 0 8px;
}
.gd-sub {
    margin: 0;
    color: rgba(232, 232, 240, .6);
    font-size: .95rem;
}

.gd-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 40px;
}
.gd-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: transform .15s, border-color .15s, background .15s;
}
.gd-card:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 139, 250, .35);
    background: linear-gradient(135deg, rgba(167, 139, 250, .08), rgba(255, 255, 255, .02));
}
.gd-card-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(167, 139, 250, .14);
    color: #c4b5fd;
}
.gd-card-artisan  .gd-card-icon { background: rgba(251, 146, 60, .14); color: #fb923c; }
.gd-card-writer   .gd-card-icon { background: rgba(167, 139, 250, .14); color: #c4b5fd; }
.gd-card-editor   .gd-card-icon { background: rgba(34, 211, 238, .14); color: #67e8f9; }
.gd-card-mangakas .gd-card-icon { background: rgba(236, 72, 153, .14); color: #f472b6; }

.gd-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.gd-card-name {
    font-size: 1.1rem;
    color: #f5f5fa;
    font-weight: 700;
    letter-spacing: -.005em;
}
.gd-card-badge {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .14);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, .3);
}
.gd-card-blurb {
    margin: 0 0 8px;
    color: rgba(232, 232, 240, .7);
    font-size: .9rem;
    line-height: 1.5;
}
.gd-card-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: rgba(232, 232, 240, .5);
}
.gd-card-stats strong { color: #e8e8f0; font-weight: 600; }
.gd-card-stat-sep { opacity: .4; }
.gd-card-arrow {
    color: rgba(232, 232, 240, .4);
    transition: transform .15s, color .15s;
}
.gd-card:hover .gd-card-arrow {
    transform: translateX(2px);
    color: #c4b5fd;
}

/* ---- Quick actions ---- */
.gd-sub-title {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(232, 232, 240, .5);
    margin: 0 0 12px;
}
.gd-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.gd-shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    color: rgba(232, 232, 240, .85);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.gd-shortcut:hover {
    background: rgba(167, 139, 250, .08);
    border-color: rgba(167, 139, 250, .25);
    color: #fff;
    transform: translateY(-1px);
}
.gd-shortcut svg { color: #c4b5fd; flex-shrink: 0; }

@media (max-width: 540px) {
    .gd-shell { padding: 24px 16px 140px; }
    .gd-title { font-size: 1.5rem; }
    .gd-card { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 16px; }
    .gd-card-icon { width: 44px; height: 44px; border-radius: 10px; }
    .gd-card-name { font-size: 1rem; }
}

/* ==================================================================
   WRITER EDITOR — Medium/Notion-style distraction-free canvas.
   Used by publish.php. No framework; all state in publish.js.
   Typography: serif (Georgia) for the prose, system sans for chrome.
   Rule: no borders, no boxed layout, no heavy containers on the canvas.
   ================================================================== */

.wr-ed-body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ---- Top bar ---- */
.wr-ed-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 20px;
    background: color-mix(in srgb, var(--bg-page) 88%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    transition: opacity var(--dur-base) var(--ease-out);
}
.wr-ed-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
}
.wr-ed-bar-status {
    font-size: 12.5px;
    color: var(--text-faint);
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}
.wr-ed-bar-status[data-kind="ok"]  { color: var(--text-muted); }
.wr-ed-bar-status[data-kind="err"] { color: #f87171; }
.wr-ed-bar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    justify-content: flex-end;
}
.wr-ed-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-back:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }

.wr-ed-crumb {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
}
.wr-ed-crumb-story {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
}
.wr-ed-crumb-ch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font-size: 12.5px;
    font-family: inherit;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-crumb-ch:hover { background: rgba(255,255,255,.04); color: var(--text-primary); }

.wr-ed-mini {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-mini:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }

.wr-ed-publish {
    border: 0;
    background: var(--link-color);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wr-ed-publish:hover { background: var(--link-hover); transform: translateY(-1px); }

/* ---- Chapter dropdown ---- */
.wr-ed-ch-menu {
    position: fixed;
    top: 58px;
    left: 68px;
    z-index: 45;
    min-width: 220px;
    max-width: 280px;
    padding: 6px;
    background: var(--bg-modal);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    animation: wrEdDropIn var(--dur-fast) var(--ease-out);
}
@keyframes wrEdDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wr-ed-ch-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.wr-ed-ch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out);
}
.wr-ed-ch-item:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
.wr-ed-ch-item.active { background: rgba(167,139,250,.10); color: #e0e0f0; }
.wr-ed-ch-item span:first-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.wr-ed-ch-x {
    color: var(--text-faint);
    padding: 0 4px;
    border-radius: 4px;
    line-height: 1;
    font-size: 15px;
}
.wr-ed-ch-x:hover { background: rgba(248,113,113,.12); color: #f87171; }
.wr-ed-ch-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12.5px;
    padding: 10px 10px 6px;
    border-radius: 0;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}
.wr-ed-ch-add:hover { color: var(--text-primary); }

/* ---- Canvas ---- */
.wr-ed-canvas {
    position: relative;
    padding: 48px 24px 200px;
}
.wr-ed-column {
    max-width: 720px;
    margin: 0 auto;
}

.wr-ed-title {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--text-heading);
    outline: none;
    margin: 24px 0 8px;
    word-wrap: break-word;
}
.wr-ed-chapter-title {
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: 1.35rem;
    font-weight: 500;
    font-style: italic;
    color: var(--text-muted);
    outline: none;
    margin: 0 0 12px;
}
#wrEdBody {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 1.25rem;
    line-height: 1.75;
    color: var(--text-primary);
    outline: none;
    min-height: 60vh;
    margin-top: 28px;
    letter-spacing: .005em;
}
#wrEdBody p { margin: 0 0 1.3em; }
#wrEdBody h2 {
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -.01em;
    margin: 1.6em 0 .6em;
}
#wrEdBody h3 {
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-heading);
    margin: 1.4em 0 .5em;
}
#wrEdBody blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--link-color);
    font-style: italic;
    color: rgba(216, 216, 228, .88);
    font-size: 1.3rem;
    line-height: 1.6;
}
#wrEdBody ul, #wrEdBody ol { padding-left: 28px; margin: 0 0 1.3em; }
#wrEdBody li { margin-bottom: .4em; }
#wrEdBody img {
    max-width: 100%;
    display: block;
    border-radius: 8px;
    margin: 1.4em auto;
}
#wrEdBody hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 2.4em auto;
    width: 40%;
    opacity: .7;
}
#wrEdBody a {
    color: var(--link-hover);
    text-decoration: underline;
    text-decoration-color: rgba(196,181,253,.3);
    text-underline-offset: 3px;
}

/* Placeholder (visible when empty) */
.wr-ed-title[contenteditable="true"]:empty::before,
.wr-ed-chapter-title[contenteditable="true"]:empty::before,
#wrEdBody[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-faint);
    opacity: .55;
    pointer-events: none;
}
#wrEdBody[contenteditable="true"]:focus:empty::before { opacity: .35; }

.wr-ed-counter {
    font-size: 12.5px;
    color: var(--text-faint);
    margin-top: 32px;
    letter-spacing: .02em;
}

/* Selection (matches site accent) */
.wr-ed-title::selection,
.wr-ed-chapter-title::selection,
#wrEdBody ::selection,
#wrEdBody::selection {
    background: rgba(167,139,250,.28);
    color: #fff;
}

/* Caret colour */
.wr-ed-title, .wr-ed-chapter-title, #wrEdBody { caret-color: var(--link-hover); }

/* ---- Left rail (+ Insert) ---- */
.wr-ed-rail {
    position: fixed;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: wrEdFade var(--dur-fast) var(--ease-out);
}
@keyframes wrEdFade { from { opacity: 0; } to { opacity: 1; } }
.wr-ed-rail-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-page);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wr-ed-rail-btn:hover { color: var(--text-primary); border-color: var(--link-color); transform: scale(1.05); }
.wr-ed-rail-menu {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-modal);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
    animation: wrEdDropIn var(--dur-fast) var(--ease-out);
}
.wr-ed-rail-opt {
    width: 30px; height: 30px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-rail-opt:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }

/* ---- Floating toolbar ---- */
.wr-ed-float {
    position: fixed;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    background: #0f0f24;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
    animation: wrEdFloatIn 120ms var(--ease-out);
}
@keyframes wrEdFloatIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wr-ed-float-btn {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: Georgia, serif;
    font-size: 14px;
    width: 32px; height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-float-btn:hover { background: rgba(167,139,250,.12); color: #fff; }
.wr-ed-float-btn strong { font-weight: 700; }
.wr-ed-float-btn em     { font-style: italic; }
.wr-ed-float-btn small  { font-size: 11px; }
.wr-ed-float-sep {
    width: 1px; height: 18px;
    background: var(--border-color);
    margin: 0 3px;
}

/* ---- Focus mode ---- */
body.wr-focus .wr-ed-bar,
body.wr-focus .wr-ed-rail,
body.wr-focus .wr-ed-counter { opacity: 0; pointer-events: none; }
body.wr-focus .wr-ed-bar { transform: translateY(-100%); }
body.wr-focus .wr-ed-canvas { padding-top: 8vh; }
.wr-ed-bar, .wr-ed-rail, .wr-ed-counter { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

/* ---- Metadata drawer ---- */
.wr-ed-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: block;
}
.wr-ed-drawer-scrim {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}
.wr-ed-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--bg-modal);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.wr-ed-drawer.open .wr-ed-drawer-scrim { opacity: 1; }
.wr-ed-drawer.open .wr-ed-drawer-panel { transform: translateX(0); }

.wr-ed-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--border-color);
}
.wr-ed-drawer-head h3 {
    font-size: 1.05rem; font-weight: 600; color: var(--text-heading);
    letter-spacing: .005em;
}
.wr-ed-drawer-x {
    border: 0; background: transparent;
    color: var(--text-faint);
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-drawer-x:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }

.wr-ed-drawer-body {
    flex: 1;
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.wr-ed-field { display: flex; flex-direction: column; gap: 7px; }
.wr-ed-field-label {
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    letter-spacing: .04em; text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between;
}
.wr-ed-field-label small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); }
.wr-ed-field-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    padding: 10px 12px;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wr-ed-field-input:focus {
    border-color: var(--link-color);
    box-shadow: 0 0 0 3px rgba(167,139,250,.15);
}
.wr-ed-field-textarea { resize: vertical; min-height: 74px; line-height: 1.5; }

.wr-ed-oryx {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-oryx:hover { background: rgba(167,139,250,.10); color: var(--link-hover); }
.wr-ed-oryx svg { color: var(--link-color); }

.wr-ed-cover-zone {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wr-ed-cover-zone:hover,
.wr-ed-cover-zone.dragover {
    border-color: var(--link-color);
    background: rgba(167,139,250,.04);
}
.wr-ed-cover-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}
.wr-ed-cover-prev {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.wr-ed-cover-x {
    position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px;
    border: 0;
    background: rgba(0,0,0,.65);
    color: #fff;
    border-radius: 50%;
    font-size: 16px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

.wr-ed-drawer-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border-color);
}
.wr-ed-drawer-discard {
    border: 0; background: transparent;
    color: var(--text-faint);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color var(--dur-fast) var(--ease-out);
}
.wr-ed-drawer-discard:hover { color: #f87171; }
.wr-ed-drawer-publish {
    border: 0;
    background: var(--link-color);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wr-ed-drawer-publish:hover { background: var(--link-hover); transform: translateY(-1px); }
.wr-ed-drawer-publish:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---- Preview lightbox ---- */
.wr-ed-preview {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--bg-page);
    overflow-y: auto;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}
.wr-ed-preview.open { opacity: 1; }
.wr-ed-preview-x {
    position: fixed;
    top: 16px; right: 20px;
    z-index: 2;
    width: 36px; height: 36px;
    border: 0;
    background: var(--bg-modal);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-preview-x:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }
.wr-ed-preview-doc {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 24px 160px;
}
.wr-ed-preview-cover {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 32px;
}
.wr-ed-preview-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--link-hover);
    margin-bottom: 14px;
}
.wr-ed-preview-title {
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--text-heading);
    margin: 0 0 14px;
}
.wr-ed-preview-desc {
    font-family: Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0 36px;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .wr-ed-bar { padding: 0 12px; gap: 8px; }
    .wr-ed-bar-status { display: none; }
    .wr-ed-crumb-story { max-width: 160px; font-size: 13px; }
    .wr-ed-mini { padding: 6px 10px; font-size: 12.5px; }
    .wr-ed-publish { padding: 7px 14px; font-size: 12.5px; }

    .wr-ed-canvas { padding: 28px 18px 160px; }
    .wr-ed-title { font-size: 2rem; margin-top: 10px; }
    .wr-ed-chapter-title { font-size: 1.1rem; }
    #wrEdBody { font-size: 1.1rem; line-height: 1.7; margin-top: 20px; }
    #wrEdBody h2 { font-size: 1.4rem; }
    #wrEdBody h3 { font-size: 1.15rem; }
    #wrEdBody blockquote { font-size: 1.1rem; }

    .wr-ed-rail { display: none; }
    .wr-ed-drawer-panel { width: 100%; }

    .wr-ed-preview-doc { padding: 60px 18px 120px; }
    .wr-ed-preview-title { font-size: 2rem; }
    .wr-ed-preview-desc { font-size: 1.1rem; }
    .wr-ed-preview-cover { max-height: 240px; margin-bottom: 24px; }
}

/* ---- Light-theme tweaks ---- */
[data-theme="light"] .wr-ed-float { background: #ffffff; }
[data-theme="light"] #wrEdBody blockquote { color: rgba(42,45,69,.88); }
[data-theme="light"] .wr-ed-rail-btn { background: #ffffff; }

/* ==================================================================
   READER V2 — chapter reading experience. Chrome mirrors the editor
   (.wr-ed-bar / .wr-ed-publish) so writing and reading feel unified.
   Used by read.php when body.rd-v2 is set.
   ================================================================== */

body.rd-v2 {
    background: #0c0d14;
    color: #e8e8f0;
}

/* ---- Minimal top bar ---- */
.rd-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 20px;
    background: color-mix(in srgb, #0c0d14 88%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.rd-bar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    color: rgba(232,232,240,.55);
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rd-bar-back:hover { background: rgba(255,255,255,.06); color: #e8e8f0; }
.rd-bar-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    font-size: 13.5px;
    color: rgba(232,232,240,.55);
    overflow: hidden;
}
.rd-bar-story {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(232,232,240,.75);
    max-width: 360px;
}
.rd-bar-sep { opacity: .4; }
.rd-bar-ch {
    font-size: 12.5px;
    color: rgba(232,232,240,.5);
    white-space: nowrap;
}
.rd-bar-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.rd-bar-mini {
    border: 0;
    background: transparent;
    color: rgba(232,232,240,.6);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    width: 34px; height: 34px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rd-bar-mini:hover { background: rgba(255,255,255,.06); color: #e8e8f0; }
.rd-bar-mini.active {
    background: rgba(167,139,250,.14);
    color: #c4b5fd;
}

/* ---- Compact story line (chapters 2+) ---- */
.rd-story-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    font-size: 13.5px;
    color: rgba(232,232,240,.6);
}
.rd-story-line-back {
    color: rgba(232,232,240,.85);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out);
}
.rd-story-line-back:hover { color: #fff; text-decoration: underline; }
.rd-story-line-author { font-size: 13.5px; }
.rd-story-line-author .rd-avatar { width: 22px; height: 22px; }

/* ---- Chapter head (between cover and prose) ---- */
.rd-ch-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 44px 0 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.06);
}
/* When the chapter head is the first content (chapters 2+ with no
   story-line above), drop the separator border. */
.rd-article > .rd-ch-head:first-child,
.rd-article > .rd-story-line + .rd-ch-head {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
}
.rd-ch-num {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: #a78bfa;
}
.rd-ch-title {
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #f5f5fa;
    margin: 2px 0 6px;
}
.rd-ch-meta {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    font-size: 12.5px;
    color: rgba(232,232,240,.45);
    letter-spacing: .01em;
}

/* ---- Chapter bottom nav ---- */
.rd-ch-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin: 64px 0 40px;
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}
.rd-ch-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(232,232,240,.75);
    font-size: 13px;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    min-width: 0;
}
.rd-ch-btn-prev { justify-self: start; }
.rd-ch-btn-next { justify-self: end; text-align: right; }
.rd-ch-btn-ghost { visibility: hidden; }
.rd-ch-btn:hover { background: rgba(255,255,255,.04); color: #fff; }
.rd-ch-btn-prev:hover { transform: translateX(-2px); }
.rd-ch-btn-next:hover { transform: translateX(2px); }
.rd-ch-btn span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rd-ch-btn small {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(232,232,240,.45);
    font-weight: 500;
}
.rd-ch-btn strong {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.rd-ch-btn svg { color: rgba(232,232,240,.5); flex-shrink: 0; }
.rd-ch-btn:hover svg { color: #c4b5fd; }
.rd-ch-dot {
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(232,232,240,.35);
    white-space: nowrap;
}

/* ---- Reading themes (scoped to reader; override dark defaults) ---- */
body.rd-theme-sepia {
    background: #f3e9d2;
    color: #4a3a22;
}
body.rd-theme-sepia .rd-bar {
    background: color-mix(in srgb, #f3e9d2 88%, transparent);
}
body.rd-theme-sepia .rd-bar-back,
body.rd-theme-sepia .rd-bar-title,
body.rd-theme-sepia .rd-bar-mini,
body.rd-theme-sepia .rd-bar-story { color: rgba(74,58,34,.7); }
body.rd-theme-sepia .rd-bar-story { color: #3b2e1b; }
body.rd-theme-sepia .rd-bar-mini:hover,
body.rd-theme-sepia .rd-bar-back:hover { background: rgba(74,58,34,.08); color: #3b2e1b; }

body.rd-theme-sepia .rd-title,
body.rd-theme-sepia .rd-ch-title,
body.rd-theme-sepia .rd-body-prose h2,
body.rd-theme-sepia .rd-body-prose h3,
body.rd-theme-sepia .rd-author-card-name,
body.rd-theme-sepia .rd-more-title { color: #2b200f; }
body.rd-theme-sepia .rd-body-prose { color: #4a3a22; }
body.rd-theme-sepia .rd-body-prose blockquote {
    color: rgba(74,58,34,.88);
    border-left-color: #8b5cf6;
}
body.rd-theme-sepia .rd-body-prose p:first-of-type::first-letter { color: #8b5cf6; }
body.rd-theme-sepia .rd-body-prose strong { color: #2b200f; }
body.rd-theme-sepia .rd-body-prose a { color: #7c3aed; text-decoration-color: rgba(124,58,237,.35); }
body.rd-theme-sepia .rd-byline,
body.rd-theme-sepia .rd-meta,
body.rd-theme-sepia .rd-ch-meta,
body.rd-theme-sepia .rd-ch-btn small,
body.rd-theme-sepia .rd-ch-dot,
body.rd-theme-sepia .rd-author-card-label,
body.rd-theme-sepia .rd-author-card-xp { color: rgba(74,58,34,.6); }
body.rd-theme-sepia .rd-ch-head,
body.rd-theme-sepia .rd-ch-nav { border-color: rgba(74,58,34,.15); }
body.rd-theme-sepia .rd-author-card { background: rgba(139,92,246,.06); border-color: rgba(74,58,34,.12); }
body.rd-theme-sepia .rd-more-card { background: rgba(255,255,255,.4); }
body.rd-theme-sepia .rd-progress { background: rgba(74,58,34,.1); }
body.rd-theme-sepia .rd-ch-btn:hover { background: rgba(74,58,34,.06); color: #2b200f; }
body.rd-theme-sepia .rd-body-prose hr { border-top-color: rgba(74,58,34,.25); }

body.rd-theme-light {
    background: #ffffff;
    color: #1f2132;
}
body.rd-theme-light .rd-bar {
    background: color-mix(in srgb, #ffffff 88%, transparent);
    border-bottom: 1px solid rgba(31,33,50,.06);
}
body.rd-theme-light .rd-bar-back,
body.rd-theme-light .rd-bar-title,
body.rd-theme-light .rd-bar-mini { color: rgba(31,33,50,.6); }
body.rd-theme-light .rd-bar-story { color: #1d1f35; }
body.rd-theme-light .rd-bar-mini:hover,
body.rd-theme-light .rd-bar-back:hover { background: rgba(31,33,50,.05); color: #1d1f35; }

body.rd-theme-light .rd-title,
body.rd-theme-light .rd-ch-title,
body.rd-theme-light .rd-body-prose h2,
body.rd-theme-light .rd-body-prose h3,
body.rd-theme-light .rd-author-card-name,
body.rd-theme-light .rd-more-title { color: #1d1f35; }
body.rd-theme-light .rd-body-prose { color: #2a2d45; }
body.rd-theme-light .rd-body-prose blockquote { color: rgba(42,45,69,.88); border-left-color: #7c3aed; }
body.rd-theme-light .rd-body-prose strong { color: #1d1f35; }
body.rd-theme-light .rd-body-prose a { color: #7c3aed; text-decoration-color: rgba(124,58,237,.3); }
body.rd-theme-light .rd-body-prose p:first-of-type::first-letter { color: #7c3aed; }
body.rd-theme-light .rd-byline,
body.rd-theme-light .rd-meta,
body.rd-theme-light .rd-ch-meta,
body.rd-theme-light .rd-ch-btn small,
body.rd-theme-light .rd-ch-dot,
body.rd-theme-light .rd-author-card-label,
body.rd-theme-light .rd-author-card-xp { color: rgba(42,45,69,.55); }
body.rd-theme-light .rd-ch-head,
body.rd-theme-light .rd-ch-nav { border-color: rgba(31,33,50,.08); }
body.rd-theme-light .rd-author-card { background: rgba(139,92,246,.05); border-color: rgba(31,33,50,.08); }
body.rd-theme-light .rd-more-card { background: rgba(31,33,50,.03); }
body.rd-theme-light .rd-progress { background: rgba(31,33,50,.06); }
body.rd-theme-light .rd-ch-btn:hover { background: rgba(31,33,50,.04); color: #1d1f35; }
body.rd-theme-light .rd-body-prose hr { border-top-color: rgba(31,33,50,.12); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .rd-bar { padding: 0 12px; gap: 8px; }
    .rd-bar-story { max-width: 180px; font-size: 13px; }
    .rd-bar-ch { display: none; }
    .rd-bar-mini { width: 32px; height: 32px; }

    body.rd-v2 .rd-article { padding: 28px 18px 120px; }
    .rd-title { font-size: 1.85rem; }
    .rd-body-prose { font-size: 1.1rem; line-height: 1.7; }
    .rd-body-prose h2, .rd-ch-title { font-size: 1.4rem; }
    .rd-body-prose h3 { font-size: 1.15rem; }
    .rd-body-prose blockquote { font-size: 1.1rem; }
    .rd-body-prose.rd-size-small   { font-size: 1rem;   line-height: 1.65; }
    .rd-body-prose.rd-size-regular { font-size: 1.1rem; line-height: 1.7; }
    .rd-body-prose.rd-size-large   { font-size: 1.22rem; line-height: 1.75; }

    .rd-ch-head { margin: 36px 0 22px; padding-top: 22px; }
    .rd-ch-nav { grid-template-columns: 1fr 1fr; gap: 8px; margin: 48px 0 24px; }
    .rd-ch-dot { grid-column: 1 / -1; order: -1; text-align: center; }
    .rd-ch-btn strong { max-width: 120px; font-size: 13.5px; }
    .rd-ch-btn { padding: 8px 10px; }
}

/* ==================================================================
   WRITER EDITOR — Drafts drawer (multi-draft picker).
   Slides in from the left; lists the user's drafts, lets them switch
   between drafts and create a new blank one.
   ================================================================== */

.wr-ed-drafts-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.07);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-drafts-btn:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--text-primary); }
.wr-ed-drafts-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent, #7c5cff);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.wr-ed-new-label { font-size: 12.5px; }

.wr-ed-drafts {
    position: fixed;
    inset: 0;
    z-index: 70;
}
.wr-ed-drafts-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}
.wr-ed-drafts.open .wr-ed-drafts-scrim { opacity: 1; }
.wr-ed-drafts-panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--bg-card, #16161c);
    border-right: 1px solid rgba(255,255,255,.06);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    box-shadow: 24px 0 60px rgba(0,0,0,.4);
}
.wr-ed-drafts.open .wr-ed-drafts-panel { transform: translateX(0); }
.wr-ed-drafts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.wr-ed-drafts-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-primary);
}
.wr-ed-drafts-x {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wr-ed-drafts-x:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }

.wr-ed-drafts-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 16px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wr-ed-drafts-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px dashed rgba(255,255,255,.18);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-drafts-new:hover { background: rgba(124,92,255,.08); border-color: var(--accent, #7c5cff); color: var(--text-primary); }

.wr-ed-drafts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.wr-ed-drafts-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-faint);
    font-size: 13px;
}
.wr-ed-drafts-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(255,255,255,.02);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wr-ed-drafts-item:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.wr-ed-drafts-item.active {
    background: rgba(124,92,255,.1);
    border-color: rgba(124,92,255,.35);
}
.wr-ed-drafts-cover {
    width: 52px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(255,255,255,.04);
}
.wr-ed-drafts-cover-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
}
.wr-ed-drafts-item-body { min-width: 0; }
.wr-ed-drafts-item-body h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wr-ed-drafts-preview {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.wr-ed-drafts-meta {
    font-size: 11.5px;
    color: var(--text-faint);
    letter-spacing: .02em;
}
.wr-ed-drafts-del {
    border: 0;
    background: transparent;
    color: var(--text-faint);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wr-ed-drafts-del:hover { background: rgba(248,113,113,.12); color: #f87171; }

@media (max-width: 560px) {
    .wr-ed-drafts-panel { width: 100vw; }
    .wr-ed-new-label { display: none; }
}


/* ============================================================
   WRITER DASHBOARD (.wd-*) — Cinematic rebuild
   ============================================================ */

body.wd-body {
    /* Unified glow tiers — used across all .wd-* components */
    --wd-glow-low:  0 0 60px rgba(124,58,237,.10);
    --wd-glow-med:  0 24px 60px rgba(0,0,0,.35), 0 0 50px rgba(124,58,237,.12);
    --wd-glow-high: 0 18px 48px rgba(124,58,237,.55), 0 0 0 1px rgba(167,139,250,.3), inset 0 1px 0 rgba(255,255,255,.22);
    /* Unified section rhythm */
    --wd-gap-section: 72px;

    background:
        radial-gradient(1600px 800px at 12% -14%, rgba(124,58,237,.34), transparent 62%),
        radial-gradient(1100px 700px at 108% 6%,  rgba(88,28,175,.32),  transparent 58%),
        radial-gradient(900px 600px at 50% 95%,  rgba(124,58,237,.14), transparent 60%),
        linear-gradient(180deg, #0a0614 0%, #060310 100%);
    min-height: 100vh;
    color: #ece8f8;
}
body.wd-body .footer { display: none; }

.wd {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px 180px;
}

/* ---------- 1. HERO ---------- */
.wd-hero {
    position: relative;
    /* Break out of .wd container to full viewport width */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 8px;
    margin-bottom: var(--wd-gap-section);
    /* Pad back in so content aligns with the .wd column (max-width 1440 + 40px edge) */
    padding: 112px max(40px, calc(50vw - 720px + 40px));
    min-height: 620px;
    border-radius: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
    align-items: center;
    background:
        radial-gradient(1400px 800px at 8% 20%,  rgba(124,58,237,.42), transparent 62%),
        radial-gradient(900px 700px at 96% 90%,  rgba(88,28,175,.38),  transparent 66%),
        linear-gradient(135deg, #1a0f38 0%, #241050 45%, #0c0520 100%);
    border: none;
    box-shadow: none;
    isolation: isolate;
}
.wd-hero::after {
    /* soft bottom fade into page, kills the hard edge */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(10,6,20,0), rgba(10,6,20,.85));
    pointer-events: none;
    z-index: 0;
}
.wd-hero-glow {
    position: absolute;
    width: 640px; height: 640px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .6;
    z-index: 0;
    pointer-events: none;
}
.wd-hero-glow-a {
    top: -220px; left: -180px;
    background: radial-gradient(circle, rgba(167,139,250,.75), transparent 70%);
}
.wd-hero-glow-b {
    bottom: -240px; right: -160px;
    background: radial-gradient(circle, rgba(198,166,255,.6), transparent 70%);
    animation: wdFloat 14s ease-in-out infinite alternate;
}
@keyframes wdFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-50px, 24px) scale(1.1); }
}
.wd-hero-left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.wd-hero-kicker {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    letter-spacing: .02em;
    color: rgba(232,228,245,.78);
    margin: 0 0 18px;
}
.wd-hero-name {
    font-family: Georgia, serif;
    font-size: 5.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 28px;
    line-height: .98;
    letter-spacing: -.03em;
    text-shadow: 0 8px 50px rgba(167,139,250,.45);
}
.wd-hero-sub {
    font-size: 1.25rem;
    color: rgba(232,228,245,.85);
    margin: 0 0 52px;
    max-width: 480px;
    line-height: 1.5;
}
.wd-hero-cta {
    margin-top: 44px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 34px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--wd-glow-high);
    transition: transform .18s ease, box-shadow .18s ease;
}
.wd-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 56px rgba(124,58,237,.7), 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.3);
}
.wd-hero-cta:active { transform: translateY(0); }

/* Right image panel — larger, less boxed (bleeds visually into page) */
.wd-hero-right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.wd-hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3.1;
    min-height: 500px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,.5), 0 0 80px rgba(124,58,237,.22);
    isolation: isolate;
    /* soft outer halo blends image into hero background, reducing "boxed" feel */
    -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 68%, rgba(0,0,0,.9) 85%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(120% 120% at 50% 50%, #000 68%, rgba(0,0,0,.9) 85%, rgba(0,0,0,0) 100%);
}
.wd-hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(1.06);
}
.wd-hero-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10,6,20,.7) 0%, rgba(10,6,20,.25) 40%, rgba(10,6,20,0) 75%),
        linear-gradient(180deg, rgba(10,6,20,.15) 0%, rgba(10,6,20,0) 40%, rgba(10,6,20,.7) 100%);
    pointer-events: none;
}
.wd-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wd-nav-pill {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(15,8,28,.6);
    color: rgba(232,228,245,.75);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wd-nav-pill:hover {
    border-color: rgba(167,139,250,.35);
    color: #fff;
    transform: translateY(-1px);
}
.wd-nav-pill.active {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(124,58,237,.4), 0 0 0 1px rgba(167,139,250,.3);
}
.wd-nav-count {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255,255,255,.22);
    font-size: .7rem;
    font-weight: 700;
}
.wd-nav-pill.active .wd-nav-count { background: rgba(255,255,255,.3); }

/* ---------- 2 + 3. MAIN / SIDE GRID ---------- */
.wd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 56px;
    align-items: start;
}
.wd-main { min-width: 0; display: flex; flex-direction: column; gap: var(--wd-gap-section); }
.wd-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 88px;
}

.wd-sec { margin: 0; }
.wd-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 12px;
}
.wd-sec-title {
    font-family: Georgia, serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em;
}
.wd-sec-count {
    font-size: .85rem;
    color: rgba(232,228,245,.6);
}
.wd-see-all {
    font-size: .9rem;
    color: #b89cff;
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.wd-see-all:hover { color: #d4c2ff; }

/* ---------- 2. CONTINUE READING ---------- */
.wd-continue {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.wd-cont {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 26px;
    align-items: center;
    padding: 26px 28px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(38,22,78,.72), rgba(22,12,48,.75));
    border: 1px solid rgba(255,255,255,.05);
    text-decoration: none;
    color: inherit;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
    overflow: hidden;
    box-shadow: var(--wd-glow-med);
}
.wd-cont:hover {
    transform: translateY(-3px);
    border-color: rgba(167,139,250,.3);
    box-shadow: 0 24px 50px rgba(0,0,0,.42), 0 0 40px rgba(124,58,237,.22);
}
/* Hero/first card — larger scale, stronger glow */
.wd-cont.wd-cont-glow {
    grid-template-columns: 160px 1fr auto;
    gap: 32px;
    padding: 34px;
    border-color: rgba(167,139,250,.55);
    background: linear-gradient(135deg, rgba(48,28,108,.78), rgba(28,14,62,.82));
    box-shadow: 0 0 0 1px rgba(167,139,250,.35), 0 22px 60px rgba(124,58,237,.48), 0 0 100px rgba(167,139,250,.22);
}
.wd-cont.wd-cont-glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(167,139,250,.5), transparent 50%, rgba(124,58,237,.45));
    z-index: -1;
    filter: blur(18px);
    opacity: .8;
    pointer-events: none;
}
.wd-cont.wd-cont-glow .wd-cont-cover  { width: 160px; height: 214px; border-radius: 16px; }
.wd-cont.wd-cont-glow .wd-cont-title  { font-size: 1.42rem; white-space: normal; line-height: 1.18; }
.wd-cont.wd-cont-glow .wd-cont-by     { font-size: .92rem; }
.wd-cont.wd-cont-glow .wd-cont-chapter{ font-size: .85rem; margin-bottom: 14px; }
.wd-cont.wd-cont-glow .wd-cont-bar    { height: 9px; }
.wd-cont.wd-cont-glow .wd-cont-play   { width: 64px; height: 64px; }
.wd-cont.wd-cont-glow .wd-cont-play svg { width: 26px; height: 26px; }

.wd-cont-cover {
    width: 120px; height: 160px;
    border-radius: 14px;
    object-fit: cover;
    background: linear-gradient(135deg, #2a1a5c, #18103a);
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, serif;
    font-size: 2.2rem;
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
    box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
.wd-cont-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wd-cont-title {
    font-family: Georgia, serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.01em;
}
.wd-cont-by { font-size: .88rem; color: rgba(232,228,245,.68); }
.wd-cont-chapter { font-size: .82rem; color: rgba(232,228,245,.55); margin-bottom: 12px; }
.wd-cont-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}
.wd-cont-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #e2d4ff);
    border-radius: 4px;
    box-shadow: 0 0 18px rgba(167,139,250,.85);
}
.wd-cont-play {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--wd-glow-high);
    flex-shrink: 0;
    color: #fff;
    transition: transform .18s, box-shadow .18s;
}
.wd-cont-play svg { width: 22px; height: 22px; margin-left: 2px; }
.wd-cont:hover .wd-cont-play { transform: scale(1.1); box-shadow: 0 20px 44px rgba(124,58,237,.75), 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.3); }
.wd-cont-skel {
    height: 214px;
    border-radius: 22px;
    background: linear-gradient(90deg, rgba(30,18,60,.3), rgba(50,30,100,.25), rgba(30,18,60,.3));
    background-size: 200% 100%;
    animation: wdShimmer 1.8s linear infinite;
}
.wd-cont-skel:first-child { height: 268px; }
@keyframes wdShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- 3. STATS CARD (side) ---------- */
.wd-stats-card, .wd-side-card {
    position: relative;
    padding: 36px 32px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(58,32,112,.72), rgba(22,12,50,.88));
    border: 1px solid rgba(167,139,250,.22);
    backdrop-filter: blur(24px) saturate(1.15);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    box-shadow: var(--wd-glow-med), inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
}
.wd-stats-glow {
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,139,250,.6), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}
.wd-stats-title {
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 26px;
    letter-spacing: .01em;
    position: relative;
}
.wd-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    position: relative;
}
.wd-stat {
    text-align: center;
    padding: 26px 10px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.wd-stat:hover {
    border-color: rgba(167,139,250,.35);
    transform: translateY(-2px);
    box-shadow: var(--wd-glow-low);
}
.wd-stat-ico { color: #c4b1ff; opacity: 1; margin-bottom: 6px; filter: drop-shadow(0 0 10px rgba(167,139,250,.45)); }
.wd-stat-num {
    font-family: Georgia, serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.015em;
    text-shadow: 0 2px 18px rgba(167,139,250,.4);
}
.wd-stat-lbl {
    font-size: .72rem;
    letter-spacing: .09em;
    color: rgba(232,228,245,.65);
    text-transform: uppercase;
    font-weight: 600;
}
.wd-milestone {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative;
}
.wd-milestone-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.wd-milestone-lbl {
    font-size: .82rem;
    color: rgba(232,228,245,.78);
}
.wd-milestone-val {
    font-size: .95rem;
    font-weight: 700;
    color: #c4b1ff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(167,139,250,.4);
}
.wd-milestone-bar {
    height: 10px;
    border-radius: 5px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.wd-milestone-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #d4c2ff);
    border-radius: 5px;
    box-shadow: 0 0 16px rgba(167,139,250,.65);
    transition: width .5s ease;
}
.wd-milestone-note {
    margin: 12px 0 0;
    font-size: .76rem;
    color: rgba(232,228,245,.5);
}

/* Tips card */
.wd-tip-body {
    margin: 0 0 14px;
    font-size: .88rem;
    line-height: 1.5;
    color: rgba(232,228,245,.8);
}
.wd-tip-next {
    background: transparent;
    border: none;
    color: #a78bfa;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: color .15s;
}
.wd-tip-next:hover { color: #c4b1ff; }

/* Oryx Books card */
.wd-oryx {
    position: relative;
    overflow: hidden;
    /* subtle brand-tinted surface distinct from the Stats card */
    background:
        linear-gradient(160deg, rgba(96,165,250,.14) 0%, transparent 45%),
        linear-gradient(160deg, rgba(58,32,112,.72), rgba(22,12,50,.88));
    border-color: rgba(167,139,250,.28);
}
.wd-oryx-glow {
    position: absolute;
    top: -60px; left: -40px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,.45), transparent 65%);
    filter: blur(45px);
    pointer-events: none;
}
.wd-oryx-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
}
.wd-oryx-head .wd-stats-title { margin: 0; }
.wd-oryx-badge {
    width: 36px; height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    color: #0b0b19;
    box-shadow: 0 8px 20px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.3);
    flex-shrink: 0;
}
.wd-oryx-sub {
    margin: 2px 0 0;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(196,177,255,.7);
    font-weight: 600;
}
.wd-oryx-body {
    margin: 0 0 16px;
    font-size: .86rem;
    line-height: 1.5;
    color: rgba(232,228,245,.78);
    position: relative;
}
.wd-oryx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    position: relative;
}
.wd-oryx-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(167,139,250,.3);
    background: rgba(167,139,250,.08);
    color: #e8e4f5;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .01em;
    transition: all .18s;
    -webkit-tap-highlight-color: transparent;
}
.wd-oryx-chip:hover {
    background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(96,165,250,.18));
    border-color: rgba(167,139,250,.5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(124,58,237,.3);
}
.wd-oryx-open {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 100%);
    color: #0b0b19;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(124,58,237,.4), 0 0 0 1px rgba(167,139,250,.28), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform .18s, box-shadow .18s;
}
.wd-oryx-open:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---------- 4. QUICK DRAFT ---------- */
.wd-draft {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(34,20,70,.65), rgba(22,12,48,.75));
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.wd-draft-toggle {
    display: inline-flex;
    background: rgba(0,0,0,.35);
    border-radius: 14px;
    padding: 4px;
}
.wd-draft-tog {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: rgba(232,228,245,.6);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    transition: all .18s;
}
.wd-draft-tog.active {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    box-shadow: 0 6px 18px rgba(124,58,237,.4);
}
.wd-draft-input {
    width: 100%;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.3);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.wd-draft-input::placeholder { color: rgba(232,228,245,.42); }
.wd-draft-input:focus {
    border-color: rgba(167,139,250,.55);
    background: rgba(0,0,0,.4);
    box-shadow: 0 0 0 3px rgba(167,139,250,.15), 0 0 24px rgba(167,139,250,.18);
}
.wd-draft-actions { display: inline-flex; gap: 10px; }
.wd-draft-act {
    width: 50px; height: 50px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.04);
    color: #b89cff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .18s;
}
.wd-draft-act svg { width: 20px; height: 20px; }
.wd-draft-act:hover {
    background: rgba(167,139,250,.16);
    border-color: rgba(167,139,250,.35);
    color: #d4c2ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124,58,237,.28);
}
.wd-draft-act-save { color: #a78bfa; }
.wd-draft-notes {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wd-draft-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 14px;
    border-radius: 999px;
    background: rgba(167,139,250,.08);
    border: 1px solid rgba(167,139,250,.18);
    font-size: .82rem;
    color: rgba(232,228,245,.85);
    max-width: 100%;
}
.wd-draft-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.wd-draft-chip-x {
    background: none; border: none;
    color: rgba(232,228,245,.5);
    cursor: pointer; font-size: 1.1rem; line-height: 1;
    padding: 0 2px;
}
.wd-draft-chip-x:hover { color: #f87171; }

/* ---------- 5. CATEGORIES ---------- */
.wd-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.wd-cat {
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(20,12,40,.55);
    color: rgba(232,228,245,.75);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: all .18s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.wd-cat:hover {
    border-color: rgba(167,139,250,.4);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(124,58,237,.2);
}
.wd-cat.active {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(124,58,237,.5), 0 0 0 1px rgba(167,139,250,.25);
}

/* ---------- 6. STORY LIST (Otaku-Hub-style poster grid) ---------- */
.wd-stories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.wd-story {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(34,20,70,.62), rgba(22,12,48,.72));
    border: 1px solid rgba(255,255,255,.05);
    text-decoration: none;
    color: inherit;
    transition: transform .22s ease, border-color .22s, box-shadow .22s;
    box-shadow: var(--wd-glow-low), 0 6px 20px rgba(0,0,0,.22);
}
.wd-story:hover {
    transform: translateY(-4px);
    border-color: rgba(167,139,250,.3);
    box-shadow: 0 24px 48px rgba(0,0,0,.42), 0 0 40px rgba(124,58,237,.22);
}
.wd-story-cover {
    width: 100%;
    height: 260px;
    border-radius: 0;
    object-fit: cover;
    background: linear-gradient(135deg, #2a1a5c, #18103a);
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, serif;
    font-size: 2.4rem;
    color: rgba(255,255,255,.42);
    flex-shrink: 0;
}
.wd-story-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px 16px;
}
.wd-story-title {
    font-family: Georgia, serif;
    font-size: .98rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.28;
    letter-spacing: -.01em;
}
.wd-story-by { font-size: .78rem; color: rgba(232,228,245,.6); }
.wd-story-meta {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
    font-size: .72rem;
    color: rgba(232,228,245,.6);
    flex-wrap: wrap;
}
.wd-story-genre {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(167,139,250,.14);
    color: #d4c2ff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.wd-story-action {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(8,4,20,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    color: #e8e4f5;
    transition: all .2s ease;
    opacity: 0;
    transform: translateY(-4px);
    flex-shrink: 0;
}
.wd-story:hover .wd-story-action {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    box-shadow: 0 6px 18px rgba(124,58,237,.5);
}
.wd-story-skel {
    height: 340px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(30,18,60,.3), rgba(50,30,100,.25), rgba(30,18,60,.3));
    background-size: 200% 100%;
    animation: wdShimmer 1.8s linear infinite;
}

/* ======================================================================
   6b. QUOTE STAGE — horizontal, mood-driven, auto-rotating
   ====================================================================== */

/* ---- Mood filter pills ---- */
.wd-qmoods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.wd-qmood {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(18,10,38,.55);
    color: rgba(232,228,245,.7);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease;
}
.wd-qmood:hover {
    color: #fff;
    border-color: rgba(167,139,250,.3);
}
.wd-qmood.active {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(124,58,237,.35);
}
.wd-qmood-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
    background: currentColor;
    opacity: .65;
}

/* ---- Stage ---- */
.wd-qstage {
    position: relative;
    width: 100%;
    min-height: 280px;
    border-radius: 24px;
    overflow: hidden;
    padding: 56px 72px;
    box-sizing: border-box;
    background: radial-gradient(circle at 20% 10%, rgba(124,58,237,.18), transparent 60%),
                radial-gradient(circle at 90% 90%, rgba(79,70,229,.16), transparent 55%),
                linear-gradient(180deg, rgba(26,16,52,.72), rgba(14,8,30,.88));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 48px rgba(0,0,0,.3);
    transition: background 1.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gently-drifting backdrop orbs add "vivation" behind the letters */
.wd-qstage-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.wd-qstage-orbs span {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    will-change: transform, opacity;
}
.wd-qstage-orbs span:nth-child(1) { top: -10%; left: -5%;  width: 240px; height: 240px; background: rgba(167,139,250,.5); animation: qorb-a 16s ease-in-out infinite; }
.wd-qstage-orbs span:nth-child(2) { bottom: -15%; right: -8%; width: 300px; height: 300px; background: rgba(124,58,237,.45); animation: qorb-b 22s ease-in-out infinite; }
.wd-qstage-orbs span:nth-child(3) { top: 30%; right: 20%; width: 180px; height: 180px; background: rgba(99,102,241,.35); animation: qorb-c 19s ease-in-out infinite; }
@keyframes qorb-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.1); } }
@keyframes qorb-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,-40px) scale(1.15); } }
@keyframes qorb-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,20px) scale(.9); } }

/* ---- Slot (the currently-visible quote) ---- */
.wd-qslot {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
    text-align: center;
    opacity: 1;
    transition: opacity .8s ease;
}
.wd-qslot.is-fading { opacity: 0; }

.wd-qslot-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,215,100,.92);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.wd-qslot-badge::before { content: '\2726'; }

.wd-qslot-body {
    margin: 0;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    line-height: 1.55;
    color: rgba(245,240,255,.96);
    letter-spacing: .005em;
}
.wd-qslot-body .wd-qword {
    display: inline-block;
    will-change: transform;
    animation: qfloat 6s ease-in-out infinite;
    animation-delay: calc(var(--w, 0) * .12s);
}
@keyframes qfloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

.wd-qslot-foot {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: .78rem;
    color: rgba(232,228,245,.65);
    letter-spacing: .04em;
}
.wd-qslot-by { color: #d4c2ff; font-weight: 600; }
.wd-qslot-sep { opacity: .35; }
.wd-qslot-mood {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(232,228,245,.75);
}
.wd-qslot-mood-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }

/* ---- Engagement counts, tucked out of the way ----
   Pinned to the stage top-right, very faint so they don't fight with
   the quote; whole group fades up and brightens on stage hover. */
.wd-qstage-meta {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    opacity: .32;
    transform: translateY(-2px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.wd-qstage:hover .wd-qstage-meta {
    opacity: .9;
    transform: translateY(0);
}
.wd-qstage-meta-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(10,6,24,.35);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(232,228,245,.72);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    text-decoration: none;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: color .25s ease, border-color .25s ease;
}
.wd-qstage-meta-inner:hover {
    color: #fff;
    border-color: rgba(167,139,250,.3);
}

/* The meta "button" is now a like toggle — give it button affordance. */
button.wd-qstage-meta-inner {
    cursor: pointer;
    font: inherit;
}
.wd-qstage-meta-inner.is-liked {
    color: #ff9fb0;
    border-color: rgba(255,159,176,.5);
    background: rgba(255,159,176,.14);
}
.wd-qstage-meta-inner.is-liked .wd-qlike-ico {
    animation: qlikePop .35s ease;
}
@keyframes qlikePop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Author-name pill inside the footer — now a button that opens the peek */
button.wd-qslot-by {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #d4c2ff;
    font-weight: 600;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    transition: color .2s ease, text-shadow .2s ease;
}
button.wd-qslot-by:hover {
    color: #fff;
    text-shadow: 0 0 16px rgba(167,139,250,.45);
}

/* ---- Author peek overlay (floats inside the stage) ---- */
.wd-qpeek {
    position: absolute;
    bottom: 22px;
    left: 22px;
    z-index: 3;
    width: 280px;
    max-width: calc(100% - 44px);
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: rgba(10,6,24,.88);
    border: 1px solid rgba(167,139,250,.22);
    box-shadow: 0 20px 48px rgba(0,0,0,.5), 0 0 32px rgba(124,58,237,.18);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    opacity: 0;
    transform: translateY(8px) scale(.96);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.wd-qpeek.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.wd-qpeek-x {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(232,228,245,.55);
    font-size: 1.15rem;
    cursor: pointer;
    line-height: 1;
}
.wd-qpeek-x:hover { color: #fff; background: rgba(255,255,255,.06); }
.wd-qpeek-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.wd-qpeek-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border: 2px solid rgba(167,139,250,.35);
    box-shadow: 0 4px 16px rgba(124,58,237,.4);
}
.wd-qpeek-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wd-qpeek-avatar-init {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;
}
.wd-qpeek-who { min-width: 0; flex: 1; }
.wd-qpeek-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.wd-qpeek-tag {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fbbf24;
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.3);
    padding: 2px 7px;
    border-radius: 999px;
}
.wd-qpeek-mid {
    display: block;
    margin-top: 3px;
    font-size: .7rem;
    color: rgba(232,228,245,.48);
    letter-spacing: .04em;
}
.wd-qpeek-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.wd-qpeek-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.wd-qpeek-stat-n {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.wd-qpeek-stat-l {
    font-size: .62rem;
    color: rgba(232,228,245,.55);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.wd-qpeek-follow {
    width: 100%;
    padding: 10px 0;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    box-shadow: 0 6px 18px rgba(124,58,237,.4);
}
.wd-qpeek-follow:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(124,58,237,.55); }
.wd-qpeek-follow:disabled { opacity: .6; cursor: default; }
.wd-qpeek-follow.is-following {
    background: transparent;
    border: 1px solid rgba(167,139,250,.4);
    color: #d4c2ff;
    box-shadow: none;
}
.wd-qpeek-note {
    margin: 0;
    font-size: .76rem;
    color: rgba(232,228,245,.55);
    text-align: center;
    letter-spacing: .03em;
    padding: 6px 0;
}

@media (max-width: 768px) {
    .wd-qpeek { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
}

/* ---- Nav arrows + dots ---- */
.wd-qnav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(10,6,24,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(232,228,245,.85);
    font-size: 1.4rem;
    font-family: Georgia, serif;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
    opacity: .55;
}
.wd-qnav:hover { opacity: 1; background: rgba(124,58,237,.35); border-color: rgba(167,139,250,.3); }
.wd-qnav-prev { left: 18px; }
.wd-qnav-next { right: 18px; }

.wd-qdots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 7px;
}
.wd-qdot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(232,228,245,.22);
    cursor: pointer;
    transition: all .3s ease;
}
.wd-qdot.active { background: #d4c2ff; width: 22px; border-radius: 3px; }

/* ======================================================================
   MOOD THEMES — each mood paints its own backdrop + letter animation
   ====================================================================== */

/* CALM — seafoam / teal, long slow breath */
.wd-qstage.mood-calm {
    background: radial-gradient(circle at 25% 20%, rgba(45,212,191,.22), transparent 60%),
                radial-gradient(circle at 90% 90%, rgba(56,189,248,.18), transparent 55%),
                linear-gradient(180deg, rgba(8,30,42,.88), rgba(5,18,28,.96));
}
.wd-qstage.mood-calm .wd-qstage-orbs span:nth-child(1) { background: rgba(94,234,212,.5); }
.wd-qstage.mood-calm .wd-qstage-orbs span:nth-child(2) { background: rgba(56,189,248,.45); }
.wd-qstage.mood-calm .wd-qstage-orbs span:nth-child(3) { background: rgba(45,212,191,.35); }
.wd-qstage.mood-calm .wd-qslot-body .wd-qword { animation-name: qfloat-calm; animation-duration: 9s; }
@keyframes qfloat-calm {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* UPLIFT — gold / peach, gentle buoyant bounce */
.wd-qstage.mood-uplift {
    background: radial-gradient(circle at 20% 15%, rgba(251,191,36,.22), transparent 60%),
                radial-gradient(circle at 90% 85%, rgba(249,115,22,.18), transparent 55%),
                linear-gradient(180deg, rgba(42,24,10,.88), rgba(26,14,6,.96));
}
.wd-qstage.mood-uplift .wd-qstage-orbs span:nth-child(1) { background: rgba(251,191,36,.5); }
.wd-qstage.mood-uplift .wd-qstage-orbs span:nth-child(2) { background: rgba(249,115,22,.4); }
.wd-qstage.mood-uplift .wd-qstage-orbs span:nth-child(3) { background: rgba(253,224,71,.35); }
.wd-qstage.mood-uplift .wd-qslot-body .wd-qword { animation-name: qfloat-uplift; animation-duration: 3.6s; }
@keyframes qfloat-uplift {
    0%, 100% { transform: translateY(0) rotate(0); }
    30%      { transform: translateY(-8px) rotate(-.5deg); }
    60%      { transform: translateY(-2px) rotate(.5deg); }
}

/* REFLECT — violet indigo, long ponderous drift (the default CCA vibe) */
.wd-qstage.mood-reflect {
    background: radial-gradient(circle at 20% 10%, rgba(124,58,237,.22), transparent 60%),
                radial-gradient(circle at 90% 90%, rgba(79,70,229,.18), transparent 55%),
                linear-gradient(180deg, rgba(26,16,52,.72), rgba(14,8,30,.92));
}
.wd-qstage.mood-reflect .wd-qslot-body .wd-qword { animation-name: qfloat-reflect; animation-duration: 8s; }
@keyframes qfloat-reflect {
    0%, 100% { transform: translateY(0) translateX(0); }
    33%      { transform: translateY(-4px) translateX(1px); }
    66%      { transform: translateY(2px) translateX(-1px); }
}

/* FIERCE — crimson / ember, tight rising pulse */
.wd-qstage.mood-fierce {
    background: radial-gradient(circle at 15% 20%, rgba(239,68,68,.22), transparent 60%),
                radial-gradient(circle at 85% 85%, rgba(234,88,12,.2), transparent 55%),
                linear-gradient(180deg, rgba(38,10,10,.88), rgba(18,4,4,.96));
}
.wd-qstage.mood-fierce .wd-qstage-orbs span:nth-child(1) { background: rgba(239,68,68,.55); }
.wd-qstage.mood-fierce .wd-qstage-orbs span:nth-child(2) { background: rgba(234,88,12,.45); }
.wd-qstage.mood-fierce .wd-qstage-orbs span:nth-child(3) { background: rgba(250,204,21,.3); }
.wd-qstage.mood-fierce .wd-qslot-body .wd-qword { animation-name: qfloat-fierce; animation-duration: 2.8s; }
@keyframes qfloat-fierce {
    0%, 100% { transform: translateY(0) scale(1); }
    20%      { transform: translateY(-6px) scale(1.04); }
    40%      { transform: translateY(-1px) scale(1); }
    60%      { transform: translateY(-4px) scale(1.02); }
}

/* DREAM — pink / lilac mist, long horizontal drift */
.wd-qstage.mood-dream {
    background: radial-gradient(circle at 25% 20%, rgba(244,114,182,.22), transparent 60%),
                radial-gradient(circle at 85% 85%, rgba(167,139,250,.18), transparent 55%),
                linear-gradient(180deg, rgba(36,16,48,.88), rgba(18,8,28,.96));
}
.wd-qstage.mood-dream .wd-qstage-orbs span:nth-child(1) { background: rgba(244,114,182,.5); }
.wd-qstage.mood-dream .wd-qstage-orbs span:nth-child(2) { background: rgba(192,132,252,.45); }
.wd-qstage.mood-dream .wd-qstage-orbs span:nth-child(3) { background: rgba(236,72,153,.3); }
.wd-qstage.mood-dream .wd-qslot-body .wd-qword { animation-name: qfloat-dream; animation-duration: 10s; }
@keyframes qfloat-dream {
    0%, 100% { transform: translate(0,0); }
    25%      { transform: translate(3px,-3px); }
    50%      { transform: translate(0,-5px); }
    75%      { transform: translate(-3px,-3px); }
}

/* FOCUS — cool slate / cyan, minimal steady bob */
.wd-qstage.mood-focus {
    background: radial-gradient(circle at 20% 20%, rgba(14,165,233,.2), transparent 60%),
                radial-gradient(circle at 90% 85%, rgba(148,163,184,.14), transparent 55%),
                linear-gradient(180deg, rgba(10,18,30,.92), rgba(6,12,20,.98));
}
.wd-qstage.mood-focus .wd-qstage-orbs span:nth-child(1) { background: rgba(56,189,248,.5); }
.wd-qstage.mood-focus .wd-qstage-orbs span:nth-child(2) { background: rgba(148,163,184,.35); }
.wd-qstage.mood-focus .wd-qstage-orbs span:nth-child(3) { background: rgba(34,211,238,.3); }
.wd-qstage.mood-focus .wd-qslot-body .wd-qword { animation-name: qfloat-focus; animation-duration: 5.5s; }
@keyframes qfloat-focus {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Mood dot colors used in pill labels + mood chip under a quote */
.wd-qmood.is-calm    { color: #5eead4; }
.wd-qmood.is-uplift  { color: #fbbf24; }
.wd-qmood.is-reflect { color: #a78bfa; }
.wd-qmood.is-fierce  { color: #f87171; }
.wd-qmood.is-dream   { color: #f472b6; }
.wd-qmood.is-focus   { color: #38bdf8; }
.wd-qmood.is-auto    { color: #e8e4f5; }
.mood-calm    .wd-qslot-mood { color: #5eead4; }
.mood-uplift  .wd-qslot-mood { color: #fbbf24; }
.mood-reflect .wd-qslot-mood { color: #a78bfa; }
.mood-fierce  .wd-qslot-mood { color: #f87171; }
.mood-dream   .wd-qslot-mood { color: #f472b6; }
.mood-focus   .wd-qslot-mood { color: #38bdf8; }

/* Accessibility: respect reduced-motion — kill floating + orb drift */
@media (prefers-reduced-motion: reduce) {
    .wd-qslot-body .wd-qword,
    .wd-qstage-orbs span { animation: none !important; }
}

/* ---------- WRITE MODAL — Story/Quote toggle ---------- */
.wf-type-card { padding: 6px; }
.wf-type-toggle {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(10,6,24,.5);
    border-radius: 12px;
}
.wf-type {
    flex: 1;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: rgba(232,228,245,.62);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .02em;
    border-radius: 8px;
    cursor: pointer;
    transition: all .18s ease;
}
.wf-type:hover { color: #fff; }
.wf-type.active {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    box-shadow: 0 6px 18px rgba(124,58,237,.42);
}

/* ---------- WRITE MODAL — Quote mode skin ---------- */
/* Applied to the .wf wrapper when post type = quote. Hides story-only
   widgets and reskins the editor into a calm, serif, centered composer
   that matches the quote-card vibe. */
.wf--quote .wf-cover-card,
.wf--quote .wf-toggle,
.wf--quote #wfUploadArea,
.wf--quote .wf-select,
.wf--quote .wf-more { display: none !important; }

.wf--quote .wf-title {
    font-size: .9rem;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: .04em;
    color: rgba(212,194,255,.8);
    text-transform: none;
    text-align: center;
}
.wf--quote .wf-title::placeholder {
    color: rgba(212,194,255,.35);
    font-style: italic;
}

.wf--quote .wf-card:has(#postBody),
.wf--quote #wfWriteArea {
    position: relative;
}
.wf--quote .wf-editor {
    background:
        radial-gradient(circle at 18% -10%, rgba(167,139,250,.10), transparent 55%),
        radial-gradient(circle at 105% 115%, rgba(124,58,237,.08), transparent 50%),
        rgba(14,8,30,.55);
    border-radius: 18px;
    padding: 44px 34px;
    min-height: 220px;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.65;
    color: rgba(245,240,255,.95);
    text-align: center;
    letter-spacing: .005em;
    resize: none;
    transition: box-shadow .4s ease;
}
.wf--quote .wf-editor::placeholder {
    color: rgba(232,228,245,.28);
    font-style: italic;
    text-align: center;
}
.wf--quote .wf-editor:focus {
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.25), 0 0 32px rgba(124,58,237,.12);
}

/* Soft watermark quote mark behind the composer */
.wf--quote #wfWriteArea::before {
    content: '\201C';
    position: absolute;
    top: -6px;
    right: 18px;
    font-family: Georgia, serif;
    font-weight: 300;
    font-size: 7rem;
    line-height: 1;
    color: rgba(167,139,250,.10);
    pointer-events: none;
    user-select: none;
    letter-spacing: -.06em;
    z-index: 0;
}
.wf--quote .wf-editor { position: relative; z-index: 1; }

.wf--quote .wf-publish {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
}
.wd-empty {
    grid-column: 1 / -1;
    padding: 40px 24px;
    border-radius: 16px;
    border: 1px dashed rgba(167,139,250,.2);
    text-align: center;
    color: rgba(232,228,245,.55);
    font-size: .9rem;
}

/* ---------- 7. FAB ---------- */
.wd-fab {
    position: fixed;
    /* Align with Oryx AI FAB column and stack above it */
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
    width: 64px; height: 64px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 80;
    box-shadow: var(--wd-glow-high);
    transition: transform .2s, box-shadow .2s;
}
.wd-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 22px 50px rgba(124,58,237,.75), 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.3);
}
.wd-fab-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(167,139,250,.55);
    animation: wdPulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes wdPulse {
    0%   { transform: scale(1);    opacity: .7; }
    80%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* Join banner */
.wd-join-banner {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
    padding: 12px 16px 12px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(30,18,60,.95), rgba(18,10,40,.95));
    border: 1px solid rgba(167,139,250,.3);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: .88rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    z-index: 80;
}
.wd-join-btn {
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-weight: 700;
    font-size: .84rem;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.wd-join-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124,58,237,.5);
}

/* ---------- NOTEPAD DRAWER — paper, rules, spiral ---------- */
.wd-pad {
    position: fixed; inset: 0;
    z-index: 120;
    pointer-events: none;
    /* paper theme tokens */
    --pad-paper:   #f6efd9;
    --pad-shade:   #ebe3c3;
    --pad-ink:     #1f2a5c;
    --pad-rule:    #c9d7f0;
    --pad-margin:  #d4605c;
    --pad-muted:   #6e6a53;
    --pad-line:    28px;
}
.wd-pad.open { pointer-events: auto; }

.wd-pad-scrim {
    position: absolute; inset: 0;
    background: rgba(5,2,15,.62);
    opacity: 0;
    transition: opacity .22s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.wd-pad.open .wd-pad-scrim { opacity: 1; }

.wd-pad-panel {
    position: absolute;
    top: 24px; right: 24px; bottom: 24px;
    width: 440px; max-width: calc(100vw - 48px);
    background: var(--pad-paper);
    border-radius: 8px 8px 14px 14px;
    transform: translateX(calc(100% + 40px));
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        -22px 30px 60px rgba(0,0,0,.55),
        -2px 0 0 rgba(0,0,0,.15),
        inset 0 -6px 0 var(--pad-shade),
        inset 0 1px 0 rgba(255,255,255,.5);
}
.wd-pad.open .wd-pad-panel { transform: translateX(0); }

/* Spiral binding strip */
.wd-pad-spiral {
    position: relative;
    height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 18px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 80%),
        linear-gradient(180deg, #2a1a4d 0%, #1a0f35 100%);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.35);
}
.wd-pad-spiral::before {
    /* torn/perforated line where the paper meets the binding */
    content: "";
    position: absolute;
    left: 8px; right: 8px;
    bottom: -6px;
    height: 12px;
    background:
        radial-gradient(circle at 8px 0, transparent 5px, var(--pad-paper) 5.5px) 0 0 / 18px 12px repeat-x;
    pointer-events: none;
}
.wd-pad-spiral span {
    width: 14px; height: 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, #eee 0 18%, #b0b0b8 20% 60%, #6a6a72 62% 100%);
    box-shadow:
        0 1px 2px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -2px 3px rgba(0,0,0,.35);
    position: relative;
    z-index: 1;
}
.wd-pad-spiral span::after {
    /* little hole shadow under each ring */
    content: "";
    position: absolute;
    left: 50%; top: calc(100% + 2px);
    transform: translateX(-50%);
    width: 8px; height: 4px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.35), transparent 70%);
}

/* Close button — sits on the binding strip */
.wd-pad-close {
    position: absolute;
    top: 4px; right: 10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    font-size: 1.2rem; line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: all .15s;
}
.wd-pad-close:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Paper */
.wd-pad-paper {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 22px 28px 48px 72px;
    background:
        /* red left margin */
        linear-gradient(90deg, transparent 60px, var(--pad-margin) 60px, var(--pad-margin) 61px, transparent 61px),
        /* horizontal ruled lines */
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pad-line) - 1px), var(--pad-rule) calc(var(--pad-line) - 1px), var(--pad-rule) var(--pad-line)),
        /* subtle paper grain */
        radial-gradient(1200px 800px at 20% 10%, rgba(255,250,220,.6), transparent 60%),
        linear-gradient(180deg, var(--pad-paper), #f1e9c9);
    color: var(--pad-ink);
    background-attachment: local;
}
.wd-pad-paper::before {
    /* extra grain / paper fiber */
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(2px 1px at 30% 30%, rgba(120,100,60,.08), transparent 60%),
        radial-gradient(1px 2px at 70% 50%, rgba(120,100,60,.06), transparent 60%),
        radial-gradient(1px 1px at 40% 80%, rgba(120,100,60,.07), transparent 60%);
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: .6;
}

/* Top: date + title, sits above first ruled line */
.wd-pad-top {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: -6px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(120,100,60,.28);
    position: relative;
}
.wd-pad-date {
    font-family: Georgia, serif;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pad-muted);
}
.wd-pad-title {
    font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--pad-ink);
    margin: 0;
    line-height: 1;
    transform: rotate(-1.2deg);
}

/* Writing area — inherits ruled lines from .wd-pad-paper */
.wd-pad-write {
    width: 100%;
    min-height: calc(var(--pad-line) * 9);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    padding: 0;
    margin: 0;
    font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
    font-size: 1.45rem;
    line-height: var(--pad-line);
    color: var(--pad-ink);
    caret-color: var(--pad-margin);
    letter-spacing: .01em;
}
.wd-pad-write::placeholder { color: rgba(31,42,92,.32); font-style: italic; }
.wd-pad-write::selection   { background: rgba(124,58,237,.2); }

.wd-pad-actions {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.wd-pad-hint {
    font-family: Georgia, serif;
    font-size: .72rem;
    color: var(--pad-muted);
    font-style: italic;
}
.wd-pad-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--pad-ink);
    background: transparent;
    color: var(--pad-ink);
    font-family: Georgia, serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all .15s;
}
.wd-pad-save:hover {
    background: var(--pad-ink);
    color: var(--pad-paper);
    transform: translateY(-1px);
}

.wd-pad-divider {
    height: 0;
    margin: 26px 0 16px;
    border-top: 2px dashed rgba(120,100,60,.3);
}

/* Pinned notes */
.wd-pad-pinned-head {
    font-family: Georgia, serif;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pad-muted);
    margin: 0 0 14px;
    font-weight: 700;
}
.wd-pad-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wd-pad-empty {
    margin: 4px 0;
    font-family: Georgia, serif;
    font-size: .85rem;
    font-style: italic;
    color: var(--pad-muted);
    line-height: 1.5;
}
.wd-pad-empty em { color: var(--pad-ink); font-weight: 600; }

.wd-pad-item {
    position: relative;
    padding: 10px 38px 10px 12px;
    font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--pad-ink);
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.15));
    border-left: 3px solid var(--pad-margin);
    border-radius: 2px 4px 4px 2px;
    box-shadow: 1px 1px 0 rgba(120,100,60,.12);
    transform: rotate(-.3deg);
    transition: transform .15s;
}
.wd-pad-item:nth-child(even) { transform: rotate(.35deg); }
.wd-pad-item:hover { transform: rotate(0); }

.wd-pad-item-meta {
    display: block;
    font-family: Georgia, serif;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pad-muted);
    margin-bottom: 2px;
    font-style: normal;
}
.wd-pad-item-x {
    position: absolute;
    top: 6px; right: 6px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--pad-muted);
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    transition: all .15s;
}
.wd-pad-item-x:hover { background: rgba(212,96,92,.15); color: var(--pad-margin); }

/* Dark-mode override already matched via the overall wd-pad theme tokens;
   no light-theme overrides needed because the pad owns its colors. */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1120px) {
    .wd-grid { grid-template-columns: 1fr; gap: 48px; }
    .wd-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 24px; }
    .wd-stats-card, .wd-side-card { flex: 1 1 300px; }
    .wd-hero {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 80px max(32px, calc(50vw - 540px));
        min-height: 0;
    }
    .wd-hero-name { font-size: 3.8rem; }
    .wd-hero-image { aspect-ratio: 16/9; min-height: 0; }
}
@media (max-width: 760px) {
    .wd { padding: 0 20px 120px; }
    .wd-hero {
        margin-top: 8px;
        margin-bottom: 56px;
        padding: 56px 22px;
        gap: 32px;
    }
    .wd-hero-kicker { font-size: .9rem; margin-bottom: 10px; }
    .wd-hero-name { font-size: 2.6rem; margin-bottom: 18px; }
    .wd-hero-sub { font-size: 1rem; margin-bottom: 30px; }
    .wd-hero-cta { margin-top: 28px; padding: 14px 26px; font-size: .95rem; }
    .wd-hero-image { aspect-ratio: 16/10; border-radius: 22px; min-height: 0; -webkit-mask-image: none; mask-image: none; }
    .wd-cont { grid-template-columns: 88px 1fr auto; gap: 16px; padding: 18px; }
    .wd-cont.wd-cont-glow { grid-template-columns: 108px 1fr auto; padding: 22px; gap: 20px; }
    .wd-cont.wd-cont-glow .wd-cont-cover { width: 108px; height: 144px; }
    .wd-cont.wd-cont-glow .wd-cont-title { font-size: 1.1rem; }
    .wd-cont-cover { width: 88px; height: 118px; }
    .wd-cont-title { font-size: 1rem; }
    .wd-nav-pill { padding: 8px 16px; font-size: .8rem; }
    .wd-sec-title { font-size: 1.18rem; }
    .wd-cont-play { width: 44px; height: 44px; }
    .wd-draft { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
    .wd-draft-toggle { justify-self: start; }
    .wd-draft-actions { justify-content: flex-end; }
    .wd-stories { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .wd-story-cover { height: 220px; }
    .wd-story-skel { height: 290px; }
    .wd-story-title { font-size: .9rem; }
    .wd-story-body { padding: 10px 12px 14px; }
    .wd-qstage { padding: 42px 52px; min-height: 240px; border-radius: 20px; }
    .wd-qslot-body { font-size: 1.1rem; line-height: 1.55; }
    .wd-qnav { width: 32px; height: 32px; font-size: 1.1rem; }
    .wd-qnav-prev { left: 10px; }
    .wd-qnav-next { right: 10px; }
    .wd-qmood { padding: 6px 11px; font-size: .68rem; letter-spacing: .05em; }
    .wd-qslot-foot { flex-wrap: wrap; gap: 10px; font-size: .72rem; }
    .wd-stat-num { font-size: 1.25rem; }
    .wd-fab { right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 146px); width: 56px; height: 56px; }
    .wd-join-banner { right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 146px); left: 14px; justify-content: space-between; }
    .wd-pad-panel { top: 16px; right: 12px; bottom: 16px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
    .wd-pad-paper { padding: 18px 22px 40px 60px; }
}
/* ============================================================
   Oryx Games — hub page + modal mini-games
   ============================================================ */
.og-body { background: var(--bg); }

.og { max-width: 1060px; margin: 0 auto; padding: 0 16px 120px; }

/* ---------- HERO ---------- */
.og-hero {
    position: relative;
    margin: 18px 0 8px;
    padding: 54px 28px 38px;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(1200px 400px at 15% -10%, rgba(167,139,250,.20), transparent 55%),
        radial-gradient(900px 340px at 110% 120%, rgba(236,72,153,.18), transparent 55%),
        linear-gradient(145deg, #1a1040 0%, #2a1a5e 55%, #0b0b19 100%);
    border: 1px solid rgba(167,139,250,.22);
    isolation: isolate;
}
.og-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    animation: ogOrbFloat 14s ease-in-out infinite;
}
.og-hero-orb-a { width: 280px; height: 280px; left: -60px;  top: -80px;
    background: radial-gradient(circle at 30% 30%, #a78bfa, transparent 70%); }
.og-hero-orb-b { width: 340px; height: 340px; right: -80px; bottom: -120px;
    background: radial-gradient(circle at 60% 60%, #ec4899, transparent 70%);
    animation-delay: -4s; animation-duration: 18s; }
.og-hero-orb-c { width: 180px; height: 180px; left: 55%; top: 10%;
    background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 70%);
    opacity: .32; animation-delay: -7s; animation-duration: 22s; }
@keyframes ogOrbFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(18px, -14px) scale(1.06); }
}
.og-hero-grid {
    position: absolute; inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 75%);
    opacity: .55;
    pointer-events: none;
}
.og-hero-inner { position: relative; z-index: 1; max-width: 640px; }

.og-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: #fbbf24;
    background: rgba(251,191,36,.10);
    border: 1px solid rgba(251,191,36,.28);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.og-hero-eyebrow svg { filter: drop-shadow(0 0 6px rgba(251,191,36,.7)); }

.og-hero-title {
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    text-shadow: 0 2px 30px rgba(167,139,250,.35);
}
.og-hero-title-gradient {
    background: linear-gradient(90deg, #a78bfa 0%, #ec4899 50%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.og-hero-sub {
    font-size: 1rem; line-height: 1.6;
    color: rgba(255,255,255,.78);
    margin: 0 0 22px;
    max-width: 56ch;
}
.og-hero-sub strong { color: #fbbf24; font-weight: 700; }

.og-status { display: flex; flex-wrap: wrap; gap: 10px; }
.og-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 999px;
    font-size: .85rem; font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.og-chip-primary {
    background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(236,72,153,.16));
    border-color: rgba(167,139,250,.4);
    box-shadow: 0 4px 18px rgba(124,58,237,.2);
}
.og-chip-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px #34d399;
    animation: ogChipPulse 2.4s ease-in-out infinite;
}
@keyframes ogChipPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}
.og-chip-label { opacity: .7; font-weight: 500; }
.og-chip-suffix { opacity: .55; font-weight: 600; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.og-chip-muted { background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); }
.og-chip strong { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.og-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(135deg, #a78bfa, #ec4899);
    color: #fff; border: 0;
    border-radius: 999px;
    font-weight: 700; font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(167,139,250,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.og-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(167,139,250,.5); }

/* ---------- SECTION HEAD ---------- */
.og-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 34px 4px 14px;
    gap: 12px; flex-wrap: wrap;
}
.og-section-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    position: relative; padding-left: 14px;
}
.og-section-title::before {
    content: "";
    position: absolute; left: 0; top: 4px;
    width: 4px; height: calc(100% - 8px);
    border-radius: 2px;
    background: linear-gradient(180deg, #a78bfa, #ec4899);
    box-shadow: 0 0 10px rgba(167,139,250,.7);
}
.og-section-sub { font-size: .8rem; color: var(--text-faint); letter-spacing: .02em; }

/* ---------- GAME TILES ---------- */
.og-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.og-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    overflow: hidden;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: none;
    isolation: isolate;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.og-card::after {
    /* subtle inner sheen — plays up the "game tile" feel */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 40%);
    border-radius: inherit;
}
.og-card:hover:not(:disabled) {
    transform: translateY(-4px);
    border-color: rgba(167,139,250,.4);
    box-shadow: 0 22px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(167,139,250,.25);
}
.og-card:active:not(:disabled) { transform: translateY(-1px); }
.og-card:disabled { opacity: .55; cursor: not-allowed; }

/* Featured tile — larger on wide layouts */
.og-card-feature {
    grid-column: span 2;
}
@media (max-width: 700px) {
    .og-card-feature { grid-column: auto; }
}

/* ---- art panel ---- */
.og-tile-art {
    position: relative;
    aspect-ratio: 20 / 13;
    overflow: hidden;
    background: #0b0b19;
    isolation: isolate;
}
.og-card-feature .og-tile-art { aspect-ratio: 24 / 10; }
.og-tile-svg {
    width: 100%; height: 100%;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.og-card:hover:not(:disabled) .og-tile-svg { transform: scale(1.06); }
.og-tile-art::before {
    /* inner vignette so the foreground body reads clean */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
    z-index: 1;
}
.og-tile-art::after {
    /* top shine — sweeps across on hover */
    content: ""; position: absolute;
    top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
    transition: left .9s ease;
}
.og-card:hover:not(:disabled) .og-tile-art::after { left: 130%; }

.og-tile-chip {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    padding: 5px 10px;
    background: rgba(11,11,25,.65);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    font-size: .7rem; font-weight: 800;
    color: #fff;
    letter-spacing: .03em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.og-tile-chip-prime {
    background: linear-gradient(135deg, rgba(251,191,36,.9), rgba(249,115,22,.85));
    border-color: rgba(251,191,36,.7);
    color: #1a1a2e;
    box-shadow: 0 6px 18px rgba(251,191,36,.35);
}
/* Dungeon tag — placed at the bottom-left of the art area. Small and
   deliberately understated so it reads as "system labeling" not "UI clutter". */
.og-dungeon-tag {
    position: absolute;
    left: 10px; bottom: 10px;
    z-index: 3;
    padding: 3px 9px;
    background: rgba(5,6,14,.7);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 700; color: #dfe4ff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.og-dungeon-mid, .og-dungeon-mind     { color:#7be6ff; border-color: rgba(123,230,255,.45); }
.og-dungeon-reflex                    { color:#f5c518; border-color: rgba(245,197,24,.45); }
.og-dungeon-creation                  { color:#c084fc; border-color: rgba(192,132,252,.45); }

/* ---- body ---- */
.og-tile-body {
    position: relative;
    z-index: 1;
    padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 6px;
    flex: 1;
}
.og-tile-body h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}
.og-tile-body p {
    margin: 0;
    color: rgba(255,255,255,.65);
    font-size: .85rem;
    line-height: 1.45;
    flex: 1;
}
.og-tile-play {
    margin-top: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .2s ease, transform .2s ease;
    align-self: flex-start;
}
.og-card:hover:not(:disabled) .og-tile-play { color: #ec4899; transform: translateX(2px); }

/* ---- per-game theming (art glow + border tint on hover) ---- */
.og-card-poster:hover:not(:disabled)   { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(96,165,250,.4),  0 0 36px rgba(96,165,250,.25); }
.og-card-hilo:hover:not(:disabled)     { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(52,211,153,.4),  0 0 36px rgba(52,211,153,.25); }
.og-card-scramble:hover:not(:disabled) { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(251,146,60,.45), 0 0 36px rgba(251,146,60,.25); }
.og-card-opening:hover:not(:disabled)  { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(244,114,182,.45),0 0 36px rgba(244,114,182,.25); }
.og-card-clash:hover:not(:disabled)    { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(249,115,22,.45), 0 0 36px rgba(249,115,22,.25); }
.og-card-slash:hover:not(:disabled)    { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(239,68,68,.45),  0 0 36px rgba(239,68,68,.25); }
.og-card-memory:hover:not(:disabled)   { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(52,211,153,.45), 0 0 36px rgba(52,211,153,.25); }
.og-card-speeddraw:hover:not(:disabled){ box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(236,72,153,.45), 0 0 36px rgba(236,72,153,.28); }
.og-card-glitch:hover:not(:disabled)   { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,209,.5),   0 0 36px rgba(0,255,209,.3); }
.og-card-timeline:hover:not(:disabled) { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(184,165,255,.5),  0 0 36px rgba(184,165,255,.28); }
.og-card-chess:hover:not(:disabled)    { box-shadow: 0 22px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(251,191,36,.5),  0 0 36px rgba(251,191,36,.3); }

.og-card-poster   .og-tile-play { color: #60a5fa; }
.og-card-hilo     .og-tile-play { color: #34d399; }
.og-card-scramble .og-tile-play { color: #fb923c; }
.og-card-opening  .og-tile-play { color: #f472b6; }
.og-card-clash    .og-tile-play { color: #fb923c; }
.og-card-slash    .og-tile-play { color: #ef4444; }
.og-card-memory   .og-tile-play { color: #34d399; }
.og-card-speeddraw.og-card .og-tile-play { color: #ec4899; }
.og-card-glitch   .og-tile-play { color: #00ffd1; }
.og-card-timeline .og-tile-play { color: #b8a5ff; }
.og-card-chess    .og-tile-play { color: #fbbf24; }

.og-note {
    margin: 34px 4px 0;
    color: var(--text-faint);
    font-size: .85rem;
    text-align: center;
    opacity: .8;
}

@media (max-width: 600px) {
    .og-hero { padding: 36px 20px 28px; border-radius: 20px; }
    .og-hero-title { font-size: clamp(1.8rem, 7vw, 2.2rem); }
    .og-grid { gap: 14px; }
}

/* --- modal --- */
.og-modal {
    position: fixed; inset: 0;
    display: none; align-items: center; justify-content: center;
    z-index: 9000;
    padding: 20px;
}
.og-modal-shade {
    position: absolute; inset: 0;
    background: rgba(6,7,12,.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.og-modal-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    padding: 28px;
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.og-modal-close {
    position: absolute; top: 10px; right: 14px;
    background: transparent; border: 0; color: var(--text-secondary);
    font-size: 1.6rem; line-height: 1; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
}
.og-modal-close:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }

.og-loading { text-align: center; padding: 40px 0; color: var(--text-secondary); }

/* --- game common --- */
.og-game-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.og-pill {
    font-size: .7rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--link-color);
    background: rgba(167,139,250,.12);
    padding: 5px 10px; border-radius: 999px;
}
.og-timer { font-size: 1rem; font-weight: 700; color: #ffbaba; font-variant-numeric: tabular-nums; }
.og-hint  { color: var(--text-secondary); font-size: .85rem; }

.og-btn {
    padding: 10px 18px;
    border: 0; border-radius: 12px;
    font-weight: 700; cursor: pointer;
    font: inherit;
}
.og-btn-primary { background: linear-gradient(135deg, #a78bfa, #ff8fd1); color: #fff; }
.og-btn-ghost   { background: rgba(255,255,255,.05); color: var(--text-primary); }

/* --- Poster Pop --- */
.og-poster-stage {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 440px;
    overflow: hidden;
    border-radius: 14px;
    background: #0d0f16;
    display: flex; align-items: center; justify-content: center;
}
.og-poster-stage img {
    width: 100%; height: 100%; object-fit: cover;
    transition: filter 900ms ease;
}
.og-options {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-top: 16px;
}
.og-opt {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 600; font-size: .88rem;
    text-align: left; cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
    font: inherit;
}
.og-opt:hover { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.35); }
.og-opt-chosen { background: rgba(167,139,250,.24); border-color: rgba(167,139,250,.55); }

/* --- Higher or Lower --- */
.og-hilo-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.og-hilo-card {
    display: flex; flex-direction: column; gap: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 10px;
    cursor: pointer;
    color: var(--text-primary);
    text-align: center;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
    font: inherit;
}
.og-hilo-card:hover { transform: translateY(-2px); border-color: rgba(167,139,250,.45); background: rgba(167,139,250,.08); }
.og-hilo-chosen { border-color: rgba(167,139,250,.7); background: rgba(167,139,250,.14); }
.og-hilo-cover {
    width: 100%; aspect-ratio: 3 / 4;
    overflow: hidden; border-radius: 10px; background: #0d0f16;
}
.og-hilo-cover img { width: 100%; height: 100%; object-fit: cover; }
.og-hilo-title { font-weight: 700; font-size: .85rem; line-height: 1.3; }
.og-hilo-year  { font-size: .75rem; color: var(--text-secondary); }
.og-vs {
    font-weight: 900; font-size: 1rem; color: var(--link-color);
    background: rgba(167,139,250,.14);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}

/* --- Title Scramble --- */
.og-scramble-art {
    width: 100%; aspect-ratio: 16 / 9;
    overflow: hidden; border-radius: 12px; background: #0d0f16;
    margin-bottom: 14px;
}
.og-scramble-art img { width: 100%; height: 100%; object-fit: cover; }
.og-scramble-puzzle {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.4rem; font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    padding: 16px 12px;
    background: rgba(167,139,250,.08);
    border: 1px dashed rgba(167,139,250,.35);
    border-radius: 12px;
    margin-bottom: 14px;
    color: #e8deff;
    word-break: break-word;
}
.og-scramble-form {
    display: flex; gap: 8px;
}
.og-scramble-form input {
    flex: 1;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 1rem;
    font: inherit;
}
.og-scramble-form input:focus { outline: 0; border-color: rgba(167,139,250,.55); }

/* --- result panel --- */
.og-result { text-align: center; padding: 20px 6px; }
.og-result h3 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 800; }
.og-result-win h3  { color: #6ee7b7; }
.og-result-loss h3 { color: #ffb4b4; }
.og-result-answer { color: var(--text-primary); font-size: 1rem; margin-bottom: 10px; }
.og-result-xp {
    display: inline-block;
    padding: 8px 18px;
    font-size: 1.1rem; font-weight: 800;
    background: linear-gradient(135deg, rgba(110,231,183,.18), rgba(167,139,250,.18));
    color: #b6f1d5;
    border-radius: 999px;
    margin: 10px 0 18px;
}
.og-result-cap { color: #ffbaba; background: rgba(255,186,186,.1); }
.og-result-actions { display: flex; gap: 10px; justify-content: center; }

@media (max-width: 540px) {
    .og-options { grid-template-columns: 1fr; }
    .og-hilo-row { grid-template-columns: 1fr; }
    .og-vs { margin: 4px auto; }
    .og-modal-card { padding: 22px 18px; }
    .og-scramble-puzzle { font-size: 1.1rem; }
}

/* ============================================================
   Oryx Games — Opening Guess + Chess vs Oryx
   ============================================================ */

.og-card-opening .og-card-art { background: linear-gradient(135deg, rgba(244,114,182,.18), rgba(251,146,60,.14)); color: #ffc4da; }
.og-card-chess   .og-card-art { background: linear-gradient(135deg, rgba(148,163,184,.20), rgba(56,189,248,.14)); color: #d8e5f1; }

/* --- Opening Guess --- */
.og-opening-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #0d0f16;
}
.og-opening-stage iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0;
}
.og-opening-veil {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6,7,12,.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
}
.og-opening-veil-label {
    font-size: 1.2rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: #e8deff;
    padding: 10px 20px;
    background: rgba(167,139,250,.14);
    border-radius: 999px;
}
.og-opening-veil-timeout { background: rgba(40,6,12,.9); }

/* --- Chess vs Oryx --- */
.og-chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0,0,0,.45);
    user-select: none;
}
.og-chess-sq {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.og-chess-light { background: #eadcc2; }
.og-chess-dark  { background: #8e6c4a; }

.og-chess-piece {
    font-size: clamp(1.6rem, 5.6vw, 2.4rem);
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.og-chess-piece-w { color: #fff; }
.og-chess-piece-b { color: #1a1a1a; }

.og-chess-sel { box-shadow: inset 0 0 0 3px rgba(167,139,250,.9); }
.og-chess-dot::after {
    content: "";
    position: absolute;
    width: 26%; height: 26%;
    border-radius: 50%;
    background: rgba(167,139,250,.55);
}
.og-chess-cap {
    box-shadow: inset 0 0 0 3px rgba(255,143,209,.9);
}

.og-chess-status {
    text-align: center;
    margin-top: 14px;
    font-weight: 600;
    color: var(--text-primary);
    min-height: 24px;
}
.og-chess-actions {
    display: flex; gap: 10px; justify-content: center;
    margin-top: 12px;
}

@media (max-width: 540px) {
    .og-chess-board { max-width: 100%; }
    .og-chess-piece { font-size: clamp(1.3rem, 8.2vw, 1.9rem); }
}

/* ============================================================
   Oryx Games — win / loss celebrations
   ============================================================ */

/* Confetti cascade inside the modal card */
.og-confetti-layer {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 20;
    border-radius: inherit;
}
.og-confetti-bit {
    position: absolute;
    top: -14px;
    width: 8px; height: 12px;
    border-radius: 2px;
    animation: og-confetti-fall 1.8s ease-in forwards;
    transform-origin: center;
}
@keyframes og-confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(540px) rotate(720deg); opacity: 0; }
}

/* Splash word (CHECKMATE / BULLSEYE / CORRECT) */
.og-splash {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 18px rgba(167,139,250,.8), 0 4px 18px rgba(0,0,0,.5);
    animation: og-splash-pop 1.5s cubic-bezier(.2,.7,.2,1) forwards;
    z-index: 15;
}
.og-splash-win  { color: #fff2c2; text-shadow: 0 0 18px rgba(251,191,36,.9), 0 4px 18px rgba(0,0,0,.5); }
.og-splash-loss { color: #ffdcdc; text-shadow: 0 0 18px rgba(239,68,68,.8), 0 4px 18px rgba(0,0,0,.5); }
@keyframes og-splash-pop {
    0%   { opacity: 0; transform: scale(.4); }
    30%  { opacity: 1; transform: scale(1.15); }
    55%  { transform: scale(1.0); }
    85%  { opacity: 1; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(1.1); }
}

/* XP badge pop */
.og-xp-pop { animation: og-xp-pop-kf .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes og-xp-pop-kf {
    0%   { transform: scale(.3); opacity: 0; }
    70%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}

/* --- Poster: pulse ring + win/loss flash --- */
.og-poster-stage { position: relative; }
.og-ring {
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 12;
}
.og-ring-win {
    box-shadow: inset 0 0 0 3px rgba(251,191,36,.95), 0 0 60px rgba(251,191,36,.5);
    animation: og-ring-pulse 1.2s ease-out forwards;
}
.og-ring-loss {
    box-shadow: inset 0 0 0 3px rgba(239,68,68,.9);
    animation: og-ring-loss 1s ease-out forwards;
}
@keyframes og-ring-pulse {
    0%   { opacity: 0; transform: scale(1.05); }
    30%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes og-ring-loss {
    0%, 60%, 100% { opacity: 1; }
    30%, 90%      { opacity: .3; }
}

/* --- Higher/Lower: score badge, winner glow, loser dim --- */
.og-hilo-card { position: relative; overflow: hidden; }
.og-hilo-score {
    position: absolute;
    top: 12px; right: 12px;
    padding: 4px 10px;
    font-weight: 800;
    font-size: .85rem;
    background: rgba(0,0,0,.6);
    color: #fff;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    animation: og-xp-pop-kf .6s cubic-bezier(.2,.7,.2,1) both;
    z-index: 5;
}
.og-hilo-score-win {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #241200;
    box-shadow: 0 0 18px rgba(251,191,36,.6);
}
.og-hilo-reveal-win {
    animation: og-hilo-pop .8s cubic-bezier(.2,.7,.2,1) both;
    border-color: rgba(251,191,36,.8) !important;
    background: rgba(251,191,36,.12) !important;
}
.og-hilo-reveal-loss {
    animation: og-hilo-dim .8s ease both;
    filter: saturate(.3) brightness(.7);
}
.og-hilo-correct { outline: 3px solid rgba(110,231,183,.7); outline-offset: 2px; }
.og-hilo-wrong   { outline: 3px solid rgba(239,68,68,.8); outline-offset: 2px; }
@keyframes og-hilo-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06); }
    100% { transform: scale(1.02); }
}
@keyframes og-hilo-dim { to { filter: saturate(.3) brightness(.6); } }

/* --- Scramble: resolve to answer with shimmer, or shake on miss --- */
.og-scramble-resolve {
    animation: og-scramble-resolve-kf 1.3s ease-out both;
    background: linear-gradient(120deg,
        rgba(167,139,250,.15) 0%,
        rgba(251,191,36,.35) 40%,
        rgba(167,139,250,.15) 80%) !important;
    background-size: 200% 100% !important;
    color: #fff2c2 !important;
    border-color: rgba(251,191,36,.6) !important;
}
@keyframes og-scramble-resolve-kf {
    0%   { transform: scale(.95); background-position: 0% 0%; }
    40%  { transform: scale(1.04); background-position: 100% 0%; }
    100% { transform: scale(1); background-position: 100% 0%; }
}
.og-scramble-shake {
    animation: og-shake .55s cubic-bezier(.36,.07,.19,.97) both;
    border-color: rgba(239,68,68,.55) !important;
}
@keyframes og-shake {
    10%, 90%  { transform: translateX(-2px); }
    20%, 80%  { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60%  { transform: translateX(8px); }
}

/* --- Opening: veil bursts into particles on win --- */
.og-opening-veil {
    transition: opacity .35s ease;
}
.og-opening-veil-burst {
    animation: og-veil-burst .9s ease-in forwards;
}
@keyframes og-veil-burst {
    0%   { opacity: 1; transform: scale(1); filter: blur(14px); }
    40%  { opacity: .8; transform: scale(1.04); filter: blur(0); }
    100% { opacity: 0;  transform: scale(1.2);  filter: blur(0); }
}

/* --- Chess: board shake, king topple, splash --- */
.og-chess-shake {
    animation: og-chess-shake-kf .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes og-chess-shake-kf {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}
.og-chess-king-fall {
    display: inline-block;
    animation: og-king-fall 1.1s ease-in forwards;
    transform-origin: bottom center;
}
@keyframes og-king-fall {
    0%   { transform: rotate(0deg); }
    40%  { transform: rotate(-12deg); }
    100% { transform: rotate(-84deg) translateY(6px); opacity: .7; }
}

/* ============================================================
   XP Toast · Level Up · Sidebar XP chip
   ============================================================ */

/* Toast stack (top-right, below navbar) */
.xp-toast-wrap {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    right: 18px;
    z-index: 9500;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.xp-toast {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(167,139,250,.95), rgba(255,143,209,.95));
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 10px 28px rgba(167,139,250,.45), 0 2px 8px rgba(0,0,0,.3);
    animation: xp-toast-in .35s cubic-bezier(.2,.8,.2,1) both;
    transform-origin: right center;
}
.xp-toast-amount { font-weight: 800; letter-spacing: .03em; }
.xp-toast-label { font-weight: 500; opacity: .88; font-size: .82rem; }
.xp-toast-leave { animation: xp-toast-out .5s ease forwards; }
@keyframes xp-toast-in {
    0%   { opacity: 0; transform: translateX(40px) scale(.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes xp-toast-out {
    0%   { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(40px) scale(.95); }
}

/* Level Up overlay — Solo Leveling system window
   ------------------------------------------------
   Cyan/electric-blue palette, sharp corner brackets, glitch fade-in.
   Visual references: Solo Leveling system notifications, JRPG status windows.
*/
.xp-lvlup {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    background: radial-gradient(circle at center, rgba(56,189,248,.18), rgba(2,6,12,.92));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.xp-lvlup-in  { opacity: 1; }
.xp-lvlup-out { opacity: 0; }

/* Subtle scanline grid behind the card */
.xp-lvlup-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(125,211,252,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125,211,252,.06) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.85), transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,.85), transparent 70%);
    animation: xp-grid-drift 8s linear infinite;
}
@keyframes xp-grid-drift {
    to { background-position: 36px 36px, 36px 36px; }
}

.xp-lvlup-card {
    position: relative;
    min-width: 340px;
    padding: 26px 44px 28px;
    background:
        linear-gradient(180deg, rgba(8,16,28,.94), rgba(4,10,20,.94));
    border: 1px solid rgba(125,211,252,.55);
    box-shadow:
        0 0 0 1px rgba(56,189,248,.15) inset,
        0 0 40px rgba(56,189,248,.45),
        0 0 120px rgba(56,189,248,.2),
        0 30px 80px rgba(0,0,0,.7);
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: xp-card-glitch .55s steps(6, end) forwards;
}
@keyframes xp-card-glitch {
    0%   { clip-path: inset(45% 0 45% 0); opacity: 0; transform: translateY(-2px); }
    20%  { clip-path: inset(45% 0 45% 0); opacity: 1; }
    35%  { clip-path: inset(20% 0 60% 0); transform: translate(2px, 0); }
    55%  { clip-path: inset(60% 0 10% 0); transform: translate(-2px, 0); }
    75%  { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* Sharp corner brackets — the signature Solo Leveling frame */
.xp-lvlup-corner {
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid #7dd3fc;
    box-shadow: 0 0 8px rgba(125,211,252,.7);
}
.xp-lvlup-corner-tl { top: -2px; left: -2px;  border-right: 0; border-bottom: 0; }
.xp-lvlup-corner-tr { top: -2px; right: -2px; border-left: 0;  border-bottom: 0; }
.xp-lvlup-corner-bl { bottom: -2px; left: -2px;  border-right: 0; border-top: 0; }
.xp-lvlup-corner-br { bottom: -2px; right: -2px; border-left: 0;  border-top: 0; }

.xp-lvlup-header {
    font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .35em;
    color: #7dd3fc;
    margin-bottom: 14px;
    text-shadow: 0 0 8px rgba(125,211,252,.6);
}
.xp-lvlup-eyebrow {
    font-size: .72rem; font-weight: 800;
    letter-spacing: .4em; text-transform: uppercase;
    color: #bae6fd;
    margin-bottom: 10px;
    opacity: .85;
}
.xp-lvlup-level-row {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 10px;
}
.xp-lvlup-prev {
    font-size: 1.7rem; font-weight: 800;
    color: rgba(186,230,253,.45);
    font-variant-numeric: tabular-nums;
}
.xp-lvlup-arrow { color: rgba(125,211,252,.9); filter: drop-shadow(0 0 6px rgba(125,211,252,.7)); }
.xp-lvlup-new {
    font-size: 3rem; font-weight: 900;
    color: #f0f9ff;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 0 10px rgba(125,211,252,.85),
        0 0 24px rgba(56,189,248,.55),
        0 0 48px rgba(14,165,233,.35);
}
.xp-lvlup-rank {
    font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .25em; text-transform: uppercase;
    color: #e0f2fe;
    margin-top: 4px;
}
.xp-lvlup-sys {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(125,211,252,.3);
    font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
    font-size: .78rem;
    color: #7dd3fc;
    letter-spacing: .05em;
    opacity: .9;
}

/* Sidebar XP chip (augments the existing sb-user card, no redesign) */
.sb-xp {
    margin: 0 14px 10px;
    padding: 10px 12px;
    background: rgba(167,139,250,.08);
    border: 1px solid rgba(167,139,250,.16);
    border-radius: 14px;
}
.sb-xp-top {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .78rem;
}
.sb-xp-lvl {
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24, #ff8fd1);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: .03em;
}
.sb-xp-rank {
    font-weight: 700; color: var(--link-color);
    letter-spacing: .06em; text-transform: uppercase;
    font-size: .7rem;
}
.sb-xp-bar {
    margin-top: 8px;
    height: 6px;
    background: rgba(255,255,255,.05);
    border-radius: 999px;
    overflow: hidden;
}
.sb-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #ff8fd1);
    border-radius: inherit;
    width: 0;
    transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.sb-xp-foot {
    margin-top: 6px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: .68rem; color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Inline rank/level chip (comments, profile headers) */
.rank-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: .62rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    border-radius: 999px;
    background: rgba(167,139,250,.14);
    color: var(--link-color);
    vertical-align: middle;
}
.rank-chip-lv { opacity: .85; font-weight: 600; }
.rank-chip-master   { background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(255,143,209,.22)); color: #fbbf24; }
.rank-chip-elite    { background: rgba(96,165,250,.18); color: #9fd0ff; }
.rank-chip-creator  { background: rgba(110,231,183,.18); color: #6ee7b7; }
.rank-chip-sketcher { background: rgba(167,139,250,.18); color: #c4b3ff; }
.rank-chip-rookie   { background: rgba(255,255,255,.06); color: var(--text-secondary); }

@media (max-width: 540px) {
    .xp-toast-wrap { right: 10px; left: 10px; align-items: flex-end; }
    .xp-toast { max-width: 80vw; }
    .xp-lvlup-card { min-width: 0; width: calc(100vw - 48px); padding: 22px 28px 24px; }
    .xp-lvlup-new { font-size: 2.4rem; }
    .xp-lvlup-header { letter-spacing: .25em; }
}

/* ============================================================
   Quest Notification Layer — center banner, quest toasts, HUD pulse
   Companion to xp-toast.js. Cyan system theme to match level-up overlay.
   ============================================================ */

.qn-banner-host {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 96px);
    left: 0; right: 0;
    z-index: 9800;
    display: flex; justify-content: center;
    pointer-events: none;
}
.qn-banner {
    display: inline-flex; align-items: center; gap: 18px;
    padding: 13px 30px;
    background: linear-gradient(180deg, rgba(8,16,28,.94), rgba(4,10,20,.94));
    border-top: 1px solid rgba(125,211,252,.65);
    border-bottom: 1px solid rgba(125,211,252,.65);
    box-shadow:
        0 0 30px rgba(56,189,248,.5),
        0 0 90px rgba(56,189,248,.22),
        0 12px 40px rgba(0,0,0,.45);
    color: #e0f2fe;
    font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .35em;
    text-shadow: 0 0 10px rgba(125,211,252,.7);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease;
}
.qn-banner-in  { opacity: 1; transform: translateY(0); animation: qn-banner-pulse 1.6s ease-in-out infinite; }
.qn-banner-out { opacity: 0; transform: translateY(-8px); animation: none; }

@keyframes qn-banner-pulse {
    0%, 100% { box-shadow: 0 0 24px rgba(56,189,248,.4), 0 0 70px rgba(56,189,248,.18), 0 12px 40px rgba(0,0,0,.45); }
    50%      { box-shadow: 0 0 36px rgba(56,189,248,.7), 0 0 110px rgba(56,189,248,.3), 0 12px 40px rgba(0,0,0,.45); }
}

.qn-banner-bracket {
    width: 12px; height: 16px;
    border: 2px solid #7dd3fc;
    box-shadow: 0 0 6px rgba(125,211,252,.7);
    flex-shrink: 0;
}
.qn-banner-bracket-l { border-right: 0; }
.qn-banner-bracket-r { border-left: 0; }

.qn-banner-quest_complete { border-color: rgba(110,231,183,.7); }
.qn-banner-quest_complete .qn-banner-bracket { border-color: #6ee7b7; box-shadow: 0 0 6px rgba(110,231,183,.7); }
.qn-banner-quest_complete .qn-banner-text { text-shadow: 0 0 10px rgba(110,231,183,.7); color: #ecfdf5; }

.qn-toast {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    background: linear-gradient(135deg, rgba(8,16,28,.96), rgba(4,10,20,.96));
    border: 1px solid rgba(125,211,252,.5);
    border-radius: 6px;
    color: #e0f2fe;
    font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 16px rgba(56,189,248,.28);
    animation: qn-toast-in .3s cubic-bezier(.2,.8,.2,1) both;
    pointer-events: auto;
}
.qn-toast-icon { color: #7dd3fc; font-weight: 900; text-shadow: 0 0 6px rgba(125,211,252,.7); }
.qn-toast-leave { animation: qn-toast-out .35s ease forwards; }
@keyframes qn-toast-in  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qn-toast-out { to   { opacity: 0; transform: translateX(28px); } }

.qn-hud-pulse { position: relative; z-index: 1; }
.qn-hud-pulse::after {
    content: "";
    position: absolute; inset: -4px;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: 0 0 0 2px rgba(125,211,252,.85), 0 0 22px rgba(56,189,248,.7);
    animation: qn-hud-pulse 1.4s ease-in-out infinite;
}
@keyframes qn-hud-pulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.015); }
}

@media (max-width: 540px) {
    .qn-banner-host { top: calc(env(safe-area-inset-top, 0px) + 64px); padding: 0 12px; }
    .qn-banner {
        font-size: .82rem; padding: 9px 18px; gap: 12px;
        letter-spacing: .22em;
        max-width: calc(100vw - 24px);
    }
    .qn-banner-in { animation-duration: 1.2s; }
    .qn-banner-bracket { width: 8px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .qn-banner-in, .qn-hud-pulse::after, .qn-toast { animation: none; }
}

/* ============================================================
   Oryx chat — inline links + rich post preview card
   ============================================================ */
.ai-msg a.ai-link {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px dashed rgba(167,139,250,.45);
    word-break: break-word;
}
.ai-msg a.ai-link:hover {
    color: #fff;
    border-bottom-color: rgba(255,143,209,.65);
}

.ai-post-card {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 10px 0 4px;
    padding: 10px;
    background: rgba(167,139,250,.07);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
    max-width: 360px;
}
.ai-post-card:hover {
    background: rgba(167,139,250,.14);
    border-color: rgba(167,139,250,.42);
    transform: translateY(-1px);
}
.ai-post-card-cover {
    flex: 0 0 64px;
    width: 64px; height: 84px;
    background: #0d0f16 center/cover no-repeat;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.ai-post-card-cover-empty {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(255,143,209,.14));
    color: rgba(255,255,255,.55);
}
.ai-post-card-body {
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}
.ai-post-card-guild {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--link-color);
    opacity: .85;
}
.ai-post-card-title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-heading);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-post-card-author {
    font-size: .75rem;
    color: var(--text-secondary);
}

/* Oryx Books + FAB is quote-only: hide the Story/Quote toggle when the
   modal is opened in locked-quote mode. Story creation still works via
   the hero "Start Writing" button and publish.php. */
#newPostModal.wf-lock-quote .wf-type-card { display: none; }

/* ============================================================
   Reaction Slash — enemy, flash, feedback, HUD
   ============================================================ */

.og-card-slash .og-card-art {
    background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(251,191,36,.18));
    color: #ffd7d7;
}

.og-game-slash {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.og-slash-stage {
    position: relative;
    width: 100%;
    min-height: 320px;
    aspect-ratio: 4 / 3;
    max-height: 420px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 40%, rgba(167,139,250,.18) 0%, rgba(6,7,12,0) 60%),
        linear-gradient(180deg, #13141c 0%, #0a0a12 100%);
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
    outline: none;
    transition: background 120ms ease, box-shadow 120ms ease;
}
.og-slash-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(167,139,250,.55); }

.og-slash-enemy {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #e8deff;
    animation: og-slash-float 2.6s ease-in-out infinite;
    transition: color 80ms ease, transform 80ms ease;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.5));
    pointer-events: none;
}
@keyframes og-slash-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-8px); }
}

/* Flash = attack telegraph. The enemy turns red-hot and scales up. */
.og-slash-enemy.og-slash-flash {
    animation: og-slash-flash-kf .18s cubic-bezier(.2,.8,.2,1) forwards;
    color: #ffd166;
}
@keyframes og-slash-flash-kf {
    0%   { transform: translate(-50%, -50%) scale(1);   filter: drop-shadow(0 0 0 rgba(255,209,102,0)); }
    60%  { transform: translate(-50%, -50%) scale(1.22); filter: drop-shadow(0 0 22px rgba(255,209,102,.95)); }
    100% { transform: translate(-50%, -50%) scale(1.12); filter: drop-shadow(0 0 32px rgba(239,68,68,.9)); }
}

.og-slash-prompt {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text-secondary);
    pointer-events: none;
}
.og-slash-prompt-armed {
    color: #ffd166;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(255,209,102,.7);
    animation: og-slash-strike-pop .2s ease-out both;
}
@keyframes og-slash-strike-pop {
    0%   { opacity: 0; transform: scale(.7); }
    100% { opacity: 1; transform: scale(1); }
}

/* Feedback text after a strike. */
.og-slash-feedback {
    position: absolute;
    left: 50%; top: 14px;
    transform: translateX(-50%);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
}
.og-slash-feedback-perfect {
    color: #fbbf24;
    text-shadow: 0 0 14px rgba(251,191,36,.75);
    animation: og-slash-fb 1s cubic-bezier(.2,.8,.2,1) both;
}
.og-slash-feedback-good {
    color: #6ee7b7;
    text-shadow: 0 0 14px rgba(110,231,183,.55);
    animation: og-slash-fb 1s cubic-bezier(.2,.8,.2,1) both;
}
.og-slash-feedback-miss {
    color: #ffbaba;
    text-shadow: 0 0 14px rgba(239,68,68,.55);
    animation: og-slash-fb 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes og-slash-fb {
    0%   { opacity: 0; transform: translate(-50%, -10px); }
    20%  { opacity: 1; transform: translate(-50%, 0); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* Stage flash + shake after a result. */
.og-slash-stage.og-slash-hit-perfect {
    background:
        radial-gradient(circle at 50% 40%, rgba(251,191,36,.32) 0%, rgba(6,7,12,0) 60%),
        linear-gradient(180deg, #1b160c 0%, #0a0a12 100%);
    box-shadow: inset 0 0 0 2px rgba(251,191,36,.45);
}
.og-slash-stage.og-slash-hit-good {
    background:
        radial-gradient(circle at 50% 40%, rgba(110,231,183,.22) 0%, rgba(6,7,12,0) 60%),
        linear-gradient(180deg, #101b17 0%, #0a0a12 100%);
    box-shadow: inset 0 0 0 2px rgba(110,231,183,.35);
}
.og-slash-stage.og-slash-hit-miss {
    animation: og-slash-shake .35s cubic-bezier(.36,.07,.19,.97) both;
    background:
        radial-gradient(circle at 50% 40%, rgba(239,68,68,.25) 0%, rgba(6,7,12,0) 60%),
        linear-gradient(180deg, #1b0c0c 0%, #0a0a12 100%);
    box-shadow: inset 0 0 0 2px rgba(239,68,68,.45);
}
@keyframes og-slash-shake {
    10%, 90% { transform: translateX(-4px); }
    20%, 80% { transform: translateX(5px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

/* Slash overlay — a quick diagonal katana stroke on perfect hits. */
.og-slash-stage.og-slash-hit-perfect::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, transparent 44%, rgba(255,255,255,.85) 48%, rgba(255,209,102,.95) 50%, rgba(255,255,255,.85) 52%, transparent 56%);
    opacity: 0;
    animation: og-slash-cut .35s ease-out both;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes og-slash-cut {
    0%   { opacity: 0;  transform: translateX(-40%) rotate(0deg); }
    40%  { opacity: 1;  transform: translateX(0)    rotate(0deg); }
    100% { opacity: 0;  transform: translateX(40%)  rotate(0deg); }
}

.og-slash-hud {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 6px;
    font-size: .85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.og-slash-hud strong {
    color: var(--text-primary);
    margin-left: 6px;
    font-weight: 800;
    font-size: 1rem;
}

@media (max-width: 540px) {
    .og-slash-stage { min-height: 280px; }
    .og-slash-prompt-armed { font-size: 1.15rem; }
    .og-slash-feedback { font-size: 1.1rem; }
}

/* ============================================================
   Power Clash — tap-vs-AI power bar, three visual themes
   ============================================================ */

.og-card-clash .og-card-art {
    background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(251,146,60,.18));
    color: #ffd7b8;
}

.og-game-clash {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.og-clash-stage {
    position: relative;
    width: 100%;
    min-height: 260px;
    aspect-ratio: 4 / 3;
    max-height: 360px;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    outline: none;
    background: linear-gradient(180deg, #14131d 0%, #0a0a12 100%);
    transition: transform 90ms ease, box-shadow 90ms ease, background 150ms ease;
}
.og-clash-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(167,139,250,.55); }

/* --- tap pulse: the whole stage pops briefly after every tap --- */
.og-clash-pulse {
    animation: og-clash-pulse-kf .12s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes og-clash-pulse-kf {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.01); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
    100% { transform: scale(1); }
}

/* --- the bar itself, centered vertically --- */
.og-clash-track {
    position: absolute;
    left: 6%; right: 6%;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.55);
    overflow: hidden;
}
.og-clash-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a78bfa 0%, #ff8fd1 100%);
    box-shadow: 0 0 28px rgba(167,139,250,.55);
    transition: width 80ms linear, background 180ms ease, box-shadow 180ms ease;
}
.og-clash-mid {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background: rgba(255,255,255,.25);
}
.og-clash-label {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    font-weight: 900;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.og-clash-label-you { left: 14px; }
.og-clash-label-ai  { right: 14px; color: rgba(255,255,255,.85); }

/* --- tap-hint overlay --- */
.og-clash-tap {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    text-align: center;
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: .3em;
    color: #ffd166;
    text-shadow: 0 0 12px rgba(255,209,102,.55);
    pointer-events: none;
    animation: og-clash-tap-flash 1s ease-in-out infinite;
}
@keyframes og-clash-tap-flash {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1;  }
}

/* --- danger + surge states --- */
.og-clash-danger .og-clash-fill {
    background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
    box-shadow: 0 0 32px rgba(239,68,68,.75);
}
.og-clash-danger {
    animation: og-clash-panic 400ms ease-in-out infinite;
}
@keyframes og-clash-panic {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
.og-clash-surge .og-clash-fill {
    background: linear-gradient(90deg, #6ee7b7 0%, #fbbf24 100%);
    box-shadow: 0 0 44px rgba(251,191,36,.8);
}

/* --- end states --- */
.og-clash-end-win {
    box-shadow: inset 0 0 0 3px rgba(251,191,36,.65), 0 0 60px rgba(251,191,36,.45);
    animation: og-clash-win-glow 1s ease-out both;
}
@keyframes og-clash-win-glow {
    0%   { box-shadow: inset 0 0 0 2px rgba(251,191,36,.2), 0 0 0 rgba(251,191,36,0); }
    50%  { box-shadow: inset 0 0 0 4px rgba(251,191,36,.8), 0 0 80px rgba(251,191,36,.7); }
    100% { box-shadow: inset 0 0 0 3px rgba(251,191,36,.55), 0 0 40px rgba(251,191,36,.35); }
}
.og-clash-end-loss {
    animation: og-clash-loss-shake .45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes og-clash-loss-shake {
    10%, 90% { transform: translateX(-4px); }
    20%, 80% { transform: translateX(5px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

/* --- HUD --- */
.og-clash-hud {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 6px;
    font-size: .85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.og-clash-hud strong {
    color: var(--text-primary);
    margin-left: 6px;
    font-weight: 800;
    font-size: 1rem;
}
.og-clash-theme {
    text-transform: capitalize;
    font-weight: 600;
    letter-spacing: .08em;
    opacity: .8;
}

/* =========================== THEMES =========================== */

.og-clash-theme-fire .og-clash-stage {
    background:
        radial-gradient(circle at 20% 80%, rgba(239,68,68,.22) 0%, rgba(6,7,12,0) 60%),
        radial-gradient(circle at 80% 20%, rgba(251,146,60,.22) 0%, rgba(6,7,12,0) 60%),
        linear-gradient(180deg, #1a0d10 0%, #0a0a12 100%);
}
.og-clash-theme-fire .og-clash-fill {
    background: linear-gradient(90deg, #ef4444 0%, #fbbf24 100%);
    box-shadow: 0 0 32px rgba(239,68,68,.7);
}
.og-clash-theme-fire .og-clash-tap { color: #ff8a5b; text-shadow: 0 0 12px rgba(239,68,68,.6); }

.og-clash-theme-shadow .og-clash-stage {
    background:
        radial-gradient(circle at 50% 50%, rgba(139,92,246,.2) 0%, rgba(6,7,12,0) 60%),
        linear-gradient(180deg, #0f0a1a 0%, #050509 100%);
}
.og-clash-theme-shadow .og-clash-fill {
    background: linear-gradient(90deg, #6b21a8 0%, #d946ef 100%);
    box-shadow: 0 0 32px rgba(217,70,239,.55);
}
.og-clash-theme-shadow .og-clash-tap { color: #d6bbff; text-shadow: 0 0 12px rgba(167,139,250,.6); }

.og-clash-theme-frost .og-clash-stage {
    background:
        radial-gradient(circle at 30% 30%, rgba(96,165,250,.22) 0%, rgba(6,7,12,0) 60%),
        radial-gradient(circle at 70% 70%, rgba(165,243,252,.16) 0%, rgba(6,7,12,0) 60%),
        linear-gradient(180deg, #0b1722 0%, #050812 100%);
}
.og-clash-theme-frost .og-clash-fill {
    background: linear-gradient(90deg, #60a5fa 0%, #a5f3fc 100%);
    box-shadow: 0 0 32px rgba(96,165,250,.6);
}
.og-clash-theme-frost .og-clash-tap { color: #bae6fd; text-shadow: 0 0 12px rgba(125,211,252,.6); }

@media (max-width: 540px) {
    .og-clash-stage { min-height: 220px; }
    .og-clash-track { height: 38px; }
    .og-clash-tap   { font-size: .85rem; }
}

/* ---- Memory Flip hub card ---- */
.og-card-memory .og-card-art {
    color: #a7f3d0;
    background: radial-gradient(140% 140% at 0% 0%, rgba(16,185,129,.18), rgba(16,24,39,0) 60%),
                radial-gradient(120% 120% at 100% 100%, rgba(99,102,241,.14), rgba(16,24,39,0) 55%);
}

/* ---- Memory Flip game ---- */
.og-game-memory { padding: 6px 4px 8px; }
.og-memory-intro { text-align: center; padding: 16px 4px 4px; }
.og-memory-intro p { color: #cbd0d6; margin: 0 0 14px; font-size: 14px; }
.og-memory-diffs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.og-memory-diffs .og-btn { display: inline-flex; flex-direction: column; align-items: center;
    padding: 10px 18px; gap: 2px; }
.og-memory-diffs .og-btn small { font-size: 11px; opacity: .75; font-weight: 400; }

.og-memory-hud { gap: 12px; }
.og-memory-stat { font-size: 13px; color: #cbd0d6; }
.og-memory-stat strong { color: #fff; font-variant-numeric: tabular-nums; }

.og-memory-grid {
    display: grid;
    gap: 8px;
    padding: 10px 2px;
    max-width: 520px;
    margin: 0 auto;
}
.og-mem-card {
    background: transparent;
    border: 0;
    padding: 0;
    perspective: 700px;
    cursor: pointer;
    aspect-ratio: 2 / 3;
    min-width: 0;
}
.og-mem-card:disabled { cursor: default; }
.og-mem-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.og-mem-card.og-mem-open .og-mem-inner,
.og-mem-card.og-mem-matched .og-mem-inner {
    transform: rotateY(180deg);
}
.og-mem-back,
.og-mem-face {
    position: absolute; inset: 0;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.og-mem-back {
    background: linear-gradient(135deg, #6d28d9 0%, #312e81 60%, #0f172a 100%);
    color: rgba(255,255,255,.7);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.3);
}
.og-mem-back::before {
    content: "";
    position: absolute; inset: 6px;
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 6px;
}
.og-mem-face {
    transform: rotateY(180deg);
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.35);
}
.og-mem-card.og-mem-matched .og-mem-face {
    box-shadow: inset 0 0 0 2px #34d399, 0 0 14px rgba(52,211,153,.4);
}

@media (max-width: 540px) {
    .og-memory-grid { gap: 6px; padding: 8px 0; }
    .og-memory-diffs .og-btn { padding: 8px 14px; }
}

/* ============================================================
   SYSTEM HUD NAVBAR
   Anime-style top HUD overlaid on .navbar. Only active when the
   navbar carries .navbar-hud (server-rendered for logged-in users).
   Components:
     .hud-profile    — left: avatar + name + Lv/Rank (→ status.php)
     .hud-xp         — centered XP bar (thin line along bottom edge)
     .hud-currency   — right: streak flame (+ count)
   ============================================================ */

/* #mainNavbar is used for height/bg so these rules beat per-page
   overrides like `body.explore-page .navbar { height: 56px }`. */
#mainNavbar.navbar-hud {
    height: 58px;
    background: linear-gradient(180deg, rgba(10,10,22,.92), rgba(10,10,22,.78));
    border-bottom: 1px solid rgba(124,58,237,.22);
    box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 24px -12px rgba(0,0,0,.6);
    transition: height .25s cubic-bezier(.4,0,.2,1),
                background .3s,
                transform .35s cubic-bezier(.4,0,.2,1);
}
body:has(#mainNavbar.navbar-hud) { padding-top: 58px; }

/* Scroll-shrink: slightly compact the HUD after the user scrolls. */
#mainNavbar.navbar-hud.navbar-hud-shrunk { height: 48px; }
body:has(#mainNavbar.navbar-hud.navbar-hud-shrunk) { padding-top: 48px; }
.navbar-hud.navbar-hud-shrunk .hud-avatar { width: 26px; height: 26px; font-size: .72rem; }
.navbar-hud.navbar-hud-shrunk .hud-ident { gap: 0; }
.navbar-hud.navbar-hud-shrunk .hud-name { font-size: .78rem; }
.navbar-hud.navbar-hud-shrunk .hud-meta { font-size: .62rem; }
.navbar-hud.navbar-hud-shrunk .hud-xp-label { font-size: .6rem; }
.navbar-hud.navbar-hud-shrunk .hud-xp { bottom: 0; }

/* Spec: always visible — override the generic scroll-hide. */
.navbar-hud.nav-hidden { transform: none; }

/* ---- Left: OtakuHub wordmark (replaces .hud-profile on anime pages) ---- */
.otaku-brand {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    color: #fff;
    font-family: "Orbitron", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .02em;
    line-height: 1;
    transition: background .2s, border-color .2s, box-shadow .25s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.otaku-brand-hub {
    color: #fb923c;
    text-shadow: 0 0 14px rgba(251,146,60,.55);
}
.otaku-brand:hover {
    background: rgba(251,146,60,.10);
    border-color: rgba(251,146,60,.45);
    box-shadow: 0 0 0 1px rgba(251,146,60,.18), 0 0 18px -4px rgba(251,146,60,.55);
}
.otaku-brand:active { transform: scale(.97); }

[data-theme="light"] .otaku-brand {
    background: #fff;
    border-color: rgba(0,0,0,.06);
    color: var(--text-heading);
    box-shadow: 0 1px 4px rgba(80,60,120,.06);
}

/* ---- Left: mini profile ---- */
.hud-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    transition: background .2s, border-color .2s, box-shadow .25s, transform .15s;
    -webkit-tap-highlight-color: transparent;
    max-width: 220px;
    min-width: 0;
}
.hud-profile:hover {
    background: rgba(124,58,237,.10);
    border-color: rgba(167,139,250,.45);
    box-shadow: 0 0 0 1px rgba(167,139,250,.15), 0 0 18px -4px rgba(167,139,250,.55);
}
.hud-profile:active { transform: scale(.97); }

.hud-avatar {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: .78rem; font-weight: 800;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 10px -2px rgba(167,139,250,.35);
    transition: width .2s, height .2s, box-shadow .25s;
}
.hud-avatar.has-img { background: #1a1a2e; }
.hud-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hud-ident {
    display: flex; flex-direction: column;
    gap: 1px;
    line-height: 1.1;
    min-width: 0;
}
.hud-name {
    font-size: .82rem;
    font-weight: 700;
    color: #eaeaf5;
    letter-spacing: .01em;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hud-meta {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a78bfa;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hud-meta .hud-sep { color: rgba(255,255,255,.25); font-weight: 400; }
.hud-lvl { color: #c4b5fd; }
.hud-rank {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251,191,36,.4);
}

/* ---- Center: XP bar (absolute so it spans full width, doesn't push flex) ---- */
.hud-xp {
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    width: min(420px, 46vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none; /* track is thin; label is decorative */
}
.hud-xp-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(200,200,230,.55);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    gap: 3px;
    opacity: .0;
    transform: translateY(2px);
    transition: opacity .2s, transform .2s, font-size .2s;
}
.navbar-hud:hover .hud-xp-label,
.hud-xp.hud-xp-flash .hud-xp-label {
    opacity: 1;
    transform: translateY(0);
}
.hud-xp-sep { color: rgba(200,200,230,.25); }
.hud-xp-unit { color: #a78bfa; margin-left: 2px; }

.hud-xp-track {
    position: relative;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(124,58,237,.10);
}
.hud-xp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 55%, #c4b5fd 100%);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(167,139,250,.55);
    transition: width .9s cubic-bezier(.22,1,.36,1);
    position: relative;
}
.hud-xp-fill::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-100%);
    animation: hud-xp-sheen 3.4s ease-in-out infinite;
}
@keyframes hud-xp-sheen {
    0%, 40%   { transform: translateX(-100%); }
    70%, 100% { transform: translateX(120%); }
}

/* Level-up glow when the user is close to the next level (>= 85%). */
.hud-xp.hud-xp-near .hud-xp-fill {
    background: linear-gradient(90deg, #a855f7, #fbbf24);
    box-shadow: 0 0 12px rgba(251,191,36,.7);
    animation: hud-xp-glow 1.6s ease-in-out infinite;
}
@keyframes hud-xp-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(251,191,36,.55); }
    50%      { box-shadow: 0 0 18px rgba(251,191,36,.95); }
}

/* Brief pulse when XP is gained. */
.hud-xp.hud-xp-flash .hud-xp-track {
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.45), 0 0 18px rgba(167,139,250,.55);
}

/* Level-up flash — full-width sweep across the navbar. */
.navbar-hud.navbar-hud-lvlup::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(251,191,36,.0) 20%,
        rgba(251,191,36,.35) 50%,
        rgba(167,139,250,.25) 70%,
        transparent 100%);
    animation: hud-lvlup-sweep 900ms ease-out 1;
    pointer-events: none;
}
@keyframes hud-lvlup-sweep {
    0%   { opacity: 0; transform: translateX(-100%); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%); }
}

/* ============================================================
   SOLO-LEVELING SYSTEM WINDOW
   Cyan holographic popup floated under the XP bar on award.
   ============================================================ */
.hud-sys-popup {
    position: fixed;
    top: 58px;
    left: 50%;
    z-index: 101;
    min-width: 220px;
    padding: 10px 18px 11px;
    color: #bae6fd;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", "Courier New", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    background: linear-gradient(180deg, rgba(8,20,40,.94), rgba(3,12,28,.88));
    border: 1px solid rgba(56,189,248,.55);
    box-shadow:
        0 0 0 1px rgba(56,189,248,.15),
        0 0 24px -2px rgba(56,189,248,.65),
        0 10px 30px -10px rgba(0,0,0,.8),
        inset 0 0 0 1px rgba(255,255,255,.02);
    pointer-events: none;
    text-align: center;
    transform: translate(-50%, 0);
    animation: hud-sys-pop 2400ms cubic-bezier(.22,1,.36,1) forwards;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    isolation: isolate;
    overflow: hidden;
}

/* L-shaped corner brackets — the Solo-Leveling signature. */
.hud-sys-corner {
    position: absolute;
    width: 10px; height: 10px;
    border-color: #38bdf8;
    border-style: solid;
    filter: drop-shadow(0 0 4px rgba(56,189,248,.8));
    pointer-events: none;
    z-index: 2;
}
.hud-sys-corner-tl { top: -2px; left: -2px;  border-width: 2px 0 0 2px; }
.hud-sys-corner-tr { top: -2px; right: -2px; border-width: 2px 2px 0 0; }
.hud-sys-corner-bl { bottom: -2px; left: -2px;  border-width: 0 0 2px 2px; }
.hud-sys-corner-br { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

/* scan-line sweep inside the window. */
.hud-sys-scan {
    position: absolute;
    left: 0; right: 0;
    height: 40%;
    top: -40%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(56,189,248,.22) 45%,
        rgba(56,189,248,.40) 50%,
        rgba(56,189,248,.22) 55%,
        transparent 100%);
    animation: hud-sys-scan 2400ms ease-out forwards;
    mix-blend-mode: screen;
    z-index: 0;
    pointer-events: none;
}
@keyframes hud-sys-scan {
    0%   { top: -50%; opacity: 0; }
    15%  { opacity: 1; }
    60%  { top: 110%; opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

.hud-sys-head {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #38bdf8;
    text-shadow: 0 0 6px rgba(56,189,248,.6);
    margin-bottom: 4px;
}
.hud-sys-dot {
    width: 6px; height: 6px;
    background: #38bdf8;
    border-radius: 50%;
    box-shadow: 0 0 8px #38bdf8, 0 0 2px #fff;
    animation: hud-sys-blink 900ms ease-in-out infinite;
}
@keyframes hud-sys-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
.hud-sys-tag {
    font-size: .58rem;
    color: rgba(186,230,253,.55);
    letter-spacing: .22em;
}

.hud-sys-body {
    position: relative; z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 800;
    animation: hud-sys-glitch 240ms steps(3) 1;
}
.hud-sys-plus {
    font-size: 1.35rem;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56,189,248,.9);
}
.hud-sys-val {
    font-size: 1.9rem;
    color: #fff;
    text-shadow:
        0 0 8px rgba(56,189,248,.95),
        0 0 20px rgba(56,189,248,.55),
        0 0 1px #fff;
    line-height: 1;
}
.hud-sys-unit {
    font-size: .82rem;
    color: #7dd3fc;
    letter-spacing: .2em;
    margin-left: 3px;
    text-shadow: 0 0 6px rgba(56,189,248,.6);
}
@keyframes hud-sys-glitch {
    0%   { transform: translateX(0); }
    33%  { transform: translateX(-1.5px); }
    66%  { transform: translateX(1.5px); }
    100% { transform: translateX(0); }
}

.hud-sys-foot {
    position: relative; z-index: 1;
    margin-top: 3px;
    font-size: .66rem;
    color: rgba(186,230,253,.72);
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Entry flicker → hold → fade. */
@keyframes hud-sys-pop {
    0%   { opacity: 0; transform: translate(-50%, -8px) scaleY(.6); filter: brightness(2); }
    10%  { opacity: 1; transform: translate(-50%, 2px)  scaleY(1.05); filter: brightness(1.5); }
    16%  { opacity: .3; }
    22%  { opacity: 1; transform: translate(-50%, 0)    scaleY(1); filter: brightness(1); }
    75%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* ---- Right: currency chip ---- */
.hud-currency {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    color: #eaeaf5;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background .2s, border-color .2s, box-shadow .25s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.hud-currency:hover {
    background: rgba(249,115,22,.10);
    border-color: rgba(251,146,60,.45);
    box-shadow: 0 0 18px -4px rgba(251,146,60,.55);
}
.hud-currency:active { transform: scale(.95); }
.hud-flame {
    color: #fb923c;
    filter: drop-shadow(0 0 4px rgba(251,146,60,.6));
}

/* Logo hides on the HUD — the left profile chip fills its role; the logo
   is still reachable from the sidebar. */
.navbar-hud .logo { display: none; }
.navbar-hud .nav-ctx-title { display: none; }

/* Writer's Space / focus pages keep their own nav behavior — they hide the
   navbar outright, so the HUD comes along for the ride. */
body.wr-body .navbar-hud .hud-xp { display: none; }

/* ---- Tablet ---- */
@media (max-width: 820px) {
    .hud-profile { max-width: 180px; padding: 3px 8px 3px 3px; gap: 6px; }
    .hud-avatar  { width: 28px; height: 28px; font-size: .72rem; }
    .hud-name    { font-size: .78rem; max-width: 110px; }
    .hud-meta    { font-size: .6rem; }
    .hud-xp      { width: min(320px, 40vw); }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .navbar-hud { height: 54px; padding: 0 10px; }
    body:has(.navbar-hud) { padding-top: 54px; }
    .navbar-hud.navbar-hud-shrunk { height: 46px; }
    body:has(.navbar-hud.navbar-hud-shrunk) { padding-top: 46px; }

    /* Username hidden on narrow screens — avatar + Lv only. Spec: "Short labels (Lv.12)". */
    .hud-profile { padding: 2px 8px 2px 2px; max-width: none; }
    .hud-name    { display: none; }
    .hud-avatar  { width: 28px; height: 28px; font-size: .72rem; }
    .hud-meta    { font-size: .66rem; }

    .hud-xp { width: min(220px, 44vw); }
    .hud-xp-label { display: none; }

    .hud-currency { padding: 4px 8px; font-size: .74rem; }

    /* Solo-Leveling system window — narrower on phones. */
    .hud-sys-popup { min-width: 180px; padding: 8px 14px 9px; top: 54px; }
    .hud-sys-val   { font-size: 1.5rem; }
    .hud-sys-plus  { font-size: 1.15rem; }
    .hud-sys-unit  { font-size: .72rem; }
    .hud-sys-tag   { display: none; }
}

@media (max-width: 380px) {
    .hud-xp { width: 110px; }
    .hud-currency { padding: 4px 6px; }
    .hud-meta .hud-sep { display: none; }
}

/* ---- Notification bell — extra bounce when new notifications arrive ---- */
.nav-bell.nav-bell-bounce { animation: hud-bell-bounce 600ms cubic-bezier(.22,1.4,.36,1) 1; }
@keyframes hud-bell-bounce {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-4px) scale(1.08); }
    60%  { transform: translateY(0) scale(.96); }
    100% { transform: translateY(0) scale(1); }
}

/* Reduced motion — kill decorative animations. */
@media (prefers-reduced-motion: reduce) {
    .hud-xp-fill::after { animation: none; }
    .hud-xp.hud-xp-near .hud-xp-fill { animation: none; }
    .navbar-hud.navbar-hud-lvlup::before { animation-duration: 400ms; }
    .hud-sys-popup { animation-duration: 1600ms; }
    .hud-sys-scan, .hud-sys-body, .hud-sys-dot { animation: none; }
    .nav-bell.nav-bell-bounce { animation: none; }
}

/* ============================================================
   LEVEL-UP STATUS POPUP (.sl-lvlup)
   Anime-system-style centered overlay. Renders once per level-up,
   holds ~1.5s, then fades. Replaces the old .xp-lvlup card.
   ============================================================ */
.sl-lvlup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", "Courier New", ui-monospace, monospace;
    opacity: 0;
    transition: opacity .2s ease;
}
/* Interactive variant — user clicks +/- / CONFIRM, so the overlay and
   its children must receive pointer events. (Backdrop captures clicks
   outside the panel so the page behind can't be touched.) */
.sl-lvlup-interactive { pointer-events: auto; }
.sl-lvlup.sl-lvlup-in  { opacity: 1; }
.sl-lvlup.sl-lvlup-out { opacity: 0; }

.sl-lvlup-backdrop {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(8,20,40,.55) 0%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.88) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.sl-lvlup-panel {
    position: relative;
    z-index: 1;
    min-width: 520px;
    max-width: 600px;
    padding: 22px 28px 22px;
    color: #bae6fd;
    background:
        linear-gradient(180deg, rgba(8,20,40,.88), rgba(3,12,28,.82));
    border: 1px solid rgba(56,189,248,.45);
    box-shadow:
        0 0 0 1px rgba(56,189,248,.12),
        0 0 32px -4px rgba(56,189,248,.55),
        0 20px 50px -10px rgba(0,0,0,.75),
        inset 0 0 0 1px rgba(255,255,255,.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: scale(.94) translateY(6px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    isolation: isolate;
}
.sl-lvlup.sl-lvlup-in  .sl-lvlup-panel { transform: scale(1) translateY(0); opacity: 1; }
.sl-lvlup.sl-lvlup-out .sl-lvlup-panel { transform: scale(.97) translateY(-4px); opacity: 0; }

/* corner brackets */
.sl-corner {
    position: absolute;
    width: 14px; height: 14px;
    border-color: #38bdf8;
    border-style: solid;
    filter: drop-shadow(0 0 6px rgba(56,189,248,.75));
    pointer-events: none;
    z-index: 2;
}
.sl-corner-tl { top: -3px; left:  -3px; border-width: 2px 0 0 2px; }
.sl-corner-tr { top: -3px; right: -3px; border-width: 2px 2px 0 0; }
.sl-corner-bl { bottom: -3px; left:  -3px; border-width: 0 0 2px 2px; }
.sl-corner-br { bottom: -3px; right: -3px; border-width: 0 2px 2px 0; }

/* ---- header ---- */
.sl-lvlup-header {
    text-align: center;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .72em;
    padding-left: .72em; /* offset tracking so text reads centered */
    color: #7dd3fc;
    text-shadow: 0 0 10px rgba(56,189,248,.6);
    margin-bottom: 14px;
    text-transform: uppercase;
}

/* ---- top zone: level + identity ---- */
.sl-lvlup-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 10px 4px 14px;
    border-top: 1px solid rgba(56,189,248,.18);
    border-bottom: 1px solid rgba(56,189,248,.18);
}
.sl-lvlup-level {
    display: flex; flex-direction: column; align-items: flex-start;
    line-height: 1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease .15s, transform .35s cubic-bezier(.22,1,.36,1) .15s;
}
.sl-lvlup.sl-lvlup-in .sl-lvlup-level { opacity: 1; transform: none; }

.sl-lvlup-level-eyebrow {
    font-size: .62rem;
    letter-spacing: .34em;
    color: rgba(186,230,253,.6);
    margin-bottom: 6px;
}
.sl-lvlup-level-row {
    display: inline-flex; align-items: baseline; gap: 8px;
}
.sl-lvlup-prev {
    font-size: 1.1rem;
    color: rgba(186,230,253,.45);
    font-weight: 600;
}
.sl-lvlup-arrow {
    color: #38bdf8;
    font-size: 1.2rem;
    text-shadow: 0 0 8px rgba(56,189,248,.9);
}
.sl-lvlup-new {
    font-size: 3.4rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 0 12px rgba(56,189,248,.95),
        0 0 24px rgba(56,189,248,.55),
        0 0 1px #fff;
}
.sl-lvlup-rank {
    font-size: .68rem;
    letter-spacing: .3em;
    color: #38bdf8;
    margin-top: 4px;
    text-transform: uppercase;
}
.sl-lvlup-ident {
    text-align: right;
    font-size: .74rem;
    line-height: 1.7;
    color: #cbd5e1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease .25s, transform .35s ease .25s;
}
.sl-lvlup.sl-lvlup-in .sl-lvlup-ident { opacity: 1; transform: none; }
.sl-lvlup-name {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: #fff;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.sl-lvlup-idrow {
    display: flex; justify-content: flex-end; gap: 10px;
    letter-spacing: .08em;
}
.sl-lvlup-k {
    color: rgba(186,230,253,.5);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .64rem;
    align-self: center;
}
.sl-lvlup-v {
    color: #e0f2fe;
    font-weight: 600;
}

/* ---- resources ---- */
.sl-lvlup-resources {
    display: grid;
    gap: 6px;
    padding: 12px 4px 10px;
    border-bottom: 1px solid rgba(56,189,248,.18);
}
.sl-res {
    display: grid;
    grid-template-columns: 18px 48px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .25s ease, transform .25s ease;
}
.sl-lvlup.sl-lvlup-in .sl-res-hp  { transition-delay: .30s; opacity: 1; transform: none; }
.sl-lvlup.sl-lvlup-in .sl-res-mp  { transition-delay: .40s; opacity: 1; transform: none; }
.sl-lvlup.sl-lvlup-in .sl-res-fat { transition-delay: .50s; opacity: 1; transform: none; }

.sl-res-ico {
    display: inline-flex; align-items: center; justify-content: center;
    color: #38bdf8;
    filter: drop-shadow(0 0 4px rgba(56,189,248,.6));
}
.sl-res-hp  .sl-res-ico { color: #f87171; filter: drop-shadow(0 0 4px rgba(248,113,113,.6)); }
.sl-res-mp  .sl-res-ico { color: #60a5fa; filter: drop-shadow(0 0 4px rgba(96,165,250,.6)); }
.sl-res-fat .sl-res-ico { color: #fbbf24; filter: drop-shadow(0 0 4px rgba(251,191,36,.6)); }

.sl-res-label {
    font-size: .66rem;
    letter-spacing: .22em;
    color: rgba(186,230,253,.75);
    text-transform: uppercase;
    font-weight: 700;
}
.sl-res-bar {
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(56,189,248,.12);
}
.sl-res-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width .7s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 0 8px rgba(56,189,248,.5);
}
.sl-res-hp  .sl-res-fill { background: linear-gradient(90deg, #f87171, #fca5a5); box-shadow: 0 0 8px rgba(248,113,113,.6); }
.sl-res-mp  .sl-res-fill { background: linear-gradient(90deg, #60a5fa, #7dd3fc); box-shadow: 0 0 8px rgba(96,165,250,.6); }
.sl-res-fat .sl-res-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); box-shadow: 0 0 8px rgba(251,191,36,.5); }

.sl-res-val {
    font-size: .7rem;
    font-weight: 700;
    color: #e0f2fe;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}
.sl-res-sep { color: rgba(186,230,253,.35); margin: 0 2px; }

/* ---- stat grid ---- */
.sl-lvlup-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding: 14px 4px 4px;
}
.sl-lvlup-col {
    display: flex; flex-direction: column; gap: 6px;
}
.sl-stat {
    display: grid;
    /* label | dots | [-] | value | [+] | +delta */
    grid-template-columns: 42px 1fr 26px 38px 26px 30px;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(56,189,248,.04);
    border: 1px solid rgba(56,189,248,.10);
    font-size: .82rem;
    font-weight: 700;
    color: #e0f2fe;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease, background .2s, border-color .2s, box-shadow .2s;
}
.sl-lvlup.sl-lvlup-in .sl-lvlup-col:nth-child(1) .sl-stat:nth-child(1) { transition-delay: .55s; opacity: 1; transform: none; }
.sl-lvlup.sl-lvlup-in .sl-lvlup-col:nth-child(1) .sl-stat:nth-child(2) { transition-delay: .62s; opacity: 1; transform: none; }
.sl-lvlup.sl-lvlup-in .sl-lvlup-col:nth-child(1) .sl-stat:nth-child(3) { transition-delay: .69s; opacity: 1; transform: none; }
.sl-lvlup.sl-lvlup-in .sl-lvlup-col:nth-child(2) .sl-stat:nth-child(1) { transition-delay: .58s; opacity: 1; transform: none; }
.sl-lvlup.sl-lvlup-in .sl-lvlup-col:nth-child(2) .sl-stat:nth-child(2) { transition-delay: .65s; opacity: 1; transform: none; }

.sl-stat-label {
    color: #7dd3fc;
    letter-spacing: .2em;
}
.sl-stat-dots {
    height: 1px;
    border-bottom: 1px dashed rgba(56,189,248,.2);
    align-self: center;
}
.sl-stat-val {
    color: #fff;
    text-align: center;
    transition: transform .15s ease, color .2s;
}
.sl-stat-up .sl-stat-val {
    color: #4ade80;
    text-shadow: 0 0 8px rgba(74,222,128,.5);
}
.sl-stat-delta {
    color: #4ade80;
    font-weight: 800;
    letter-spacing: .04em;
    text-shadow: 0 0 8px rgba(74,222,128,.7);
    text-align: right;
    transition: opacity .15s;
}

/* +/- buttons */
.sl-stat-btn {
    width: 26px; height: 26px;
    border-radius: 4px;
    border: 1px solid rgba(56,189,248,.28);
    background: rgba(56,189,248,.06);
    color: #7dd3fc;
    font-family: inherit;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
}
.sl-stat-btn:hover:not(:disabled) {
    background: rgba(56,189,248,.16);
    border-color: rgba(56,189,248,.6);
    color: #fff;
    box-shadow: 0 0 10px rgba(56,189,248,.45);
}
.sl-stat-btn:active:not(:disabled) { transform: scale(.92); }
.sl-stat-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    border-color: rgba(56,189,248,.12);
    color: rgba(186,230,253,.4);
}
.sl-stat-plus:hover:not(:disabled)  { color: #4ade80; border-color: rgba(74,222,128,.55); box-shadow: 0 0 10px rgba(74,222,128,.45); }
.sl-stat-minus:hover:not(:disabled) { color: #f87171; border-color: rgba(248,113,113,.55); box-shadow: 0 0 10px rgba(248,113,113,.45); }

.sl-stat-up {
    background: rgba(74,222,128,.08);
    border-color: rgba(74,222,128,.32);
    box-shadow: 0 0 14px -2px rgba(74,222,128,.38);
}

/* ============================================================
   AVAILABLE POINTS + ACTIONS + HINTS
   ============================================================ */
.sl-points-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 12px 0 0;
    background: linear-gradient(90deg, rgba(56,189,248,.08), rgba(56,189,248,.03));
    border: 1px solid rgba(56,189,248,.28);
    box-shadow: 0 0 14px -4px rgba(56,189,248,.35), inset 0 0 0 1px rgba(255,255,255,.02);
}
.sl-points-label {
    font-size: .66rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #7dd3fc;
}
.sl-points-val {
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(56,189,248,.95), 0 0 20px rgba(56,189,248,.55);
    transition: transform .2s cubic-bezier(.22,1.6,.36,1), color .2s;
    display: inline-block;
}
.sl-no-points .sl-points-val {
    color: rgba(186,230,253,.55);
    text-shadow: none;
}

/* +N / -N fly-away ghost */
.sl-fly {
    position: fixed;
    z-index: 9100;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", ui-monospace, monospace;
    font-size: .9rem;
    font-weight: 800;
    color: #4ade80;
    text-shadow: 0 0 8px rgba(74,222,128,.75);
    pointer-events: none;
    transform: translate(-50%, 0);
    animation: sl-fly-up 700ms cubic-bezier(.22,1,.36,1) forwards;
}
.sl-fly-neg {
    color: #f87171;
    text-shadow: 0 0 8px rgba(248,113,113,.7);
    animation-name: sl-fly-down;
}
@keyframes sl-fly-up {
    0%   { opacity: 0; transform: translate(-50%, 4px); }
    15%  { opacity: 1; transform: translate(-50%, -2px); }
    100% { opacity: 0; transform: translate(-50%, -22px); }
}
@keyframes sl-fly-down {
    0%   { opacity: 0; transform: translate(-50%, -4px); }
    15%  { opacity: 1; transform: translate(-50%, 2px); }
    100% { opacity: 0; transform: translate(-50%, 18px); }
}

/* action buttons */
.sl-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(56,189,248,.18);
}
.sl-btn {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid rgba(56,189,248,.4);
    background: rgba(56,189,248,.08);
    color: #bae6fd;
    font-family: inherit;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.sl-btn:hover:not(:disabled) {
    background: rgba(56,189,248,.16);
    border-color: rgba(56,189,248,.75);
    color: #fff;
    box-shadow: 0 0 18px -2px rgba(56,189,248,.55);
}
.sl-btn:active:not(:disabled) { transform: scale(.97); }
.sl-btn:disabled { opacity: .5; cursor: wait; }

.sl-btn-auto {
    background: rgba(56,189,248,.04);
}
.sl-btn-confirm {
    background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(56,189,248,.1));
    color: #fff;
    border-color: rgba(56,189,248,.6);
    text-shadow: 0 0 8px rgba(56,189,248,.6);
}
.sl-btn-confirm:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(56,189,248,.35), rgba(56,189,248,.15));
}

.sl-hint {
    margin-top: 8px;
    min-height: 1.1em;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(248,113,113,.85);
    text-align: center;
    opacity: 0;
    transition: opacity .2s;
}
.sl-hint.sl-hint-on { opacity: 1; }

/* Confirm flash — briefly pulses the panel, then the popup fades out. */
.sl-lvlup.sl-lvlup-flash .sl-lvlup-panel {
    box-shadow:
        0 0 0 1px rgba(56,189,248,.4),
        0 0 60px 4px rgba(56,189,248,.75),
        0 20px 50px -10px rgba(0,0,0,.75);
    border-color: rgba(56,189,248,.9);
    transition: box-shadow .35s ease, border-color .35s ease;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 600px) {
    .sl-lvlup-panel { min-width: 0; width: calc(100vw - 24px); padding: 16px 14px 16px; max-height: 92vh; overflow-y: auto; }
    .sl-lvlup-new   { font-size: 2.4rem; }
    .sl-lvlup-top   { gap: 14px; }
    .sl-lvlup-stats { grid-template-columns: 1fr; gap: 8px; }

    .sl-points-bar { padding: 9px 12px; margin: 10px 0 0; }
    .sl-points-val { font-size: 1.5rem; }

    /* Bigger tap targets — 36px minimum. Stat cell gets an extra column
       for delta and a slightly generous middle gap. */
    .sl-stat {
        grid-template-columns: 38px 1fr 36px 42px 36px 32px;
        gap: 8px;
        padding: 8px 10px;
        font-size: .84rem;
    }
    .sl-stat-btn { width: 36px; height: 36px; font-size: 1.05rem; }

    .sl-actions {
        position: sticky;
        bottom: 0;
        background: linear-gradient(180deg, rgba(3,12,28,.3), rgba(3,12,28,.92));
        padding: 12px 0 2px;
        margin-top: 12px;
    }
    .sl-btn { padding: 13px 10px; font-size: .74rem; letter-spacing: .2em; }
}

/* Silence the legacy xp-lvlup card if a pre-hook path somehow still fires
   it (e.g. cached JS) — the new popup owns the level-up moment. */
.sl-lvlup ~ .xp-lvlup { display: none !important; }

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .sl-lvlup, .sl-lvlup *, .sl-stat-delta { transition-duration: .15s !important; animation-duration: .3s !important; }
    .sl-res-fill { transition-duration: .3s !important; }
}

/* ============================================================
   SYSTEM ALERT POPUPS — .sl-alert*
   Small SL-style notifications for skill / title / currency events.
   Stack vertically below the navbar, auto-dismiss, non-modal.
   ============================================================ */
.sl-alert-stack {
    position: fixed;
    top: 70px;              /* below the HUD navbar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 8000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;   /* don't block the page */
    width: min(460px, calc(100vw - 24px));
}

.sl-alert {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    align-items: center;
    padding: 11px 14px 12px;
    color: #bae6fd;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", "Courier New", ui-monospace, monospace;
    background: linear-gradient(180deg, rgba(8,20,40,.94), rgba(3,12,28,.86));
    border: 1px solid rgba(56,189,248,.45);
    box-shadow:
        0 0 0 1px rgba(56,189,248,.12),
        0 0 22px -4px rgba(56,189,248,.55),
        0 10px 24px -10px rgba(0,0,0,.75),
        inset 0 0 0 1px rgba(255,255,255,.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-10px) scale(.98);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
    pointer-events: auto;   /* hover works; tap doesn't dismiss */
    isolation: isolate;
    overflow: hidden;
}
.sl-alert.sl-alert-in  { opacity: 1; transform: translateY(0) scale(1); }
.sl-alert.sl-alert-out { opacity: 0; transform: translateY(-6px) scale(.97); }

/* corner brackets — inherits colour from the alert variant. */
.sl-alert .sl-corner {
    position: absolute;
    width: 10px; height: 10px;
    border-style: solid;
    border-color: inherit;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 4px currentColor);
}
.sl-alert .sl-corner-tl { top: -2px; left:  -2px; border-width: 2px 0 0 2px; }
.sl-alert .sl-corner-tr { top: -2px; right: -2px; border-width: 2px 2px 0 0; }
.sl-alert .sl-corner-bl { bottom: -2px; left:  -2px; border-width: 0 0 2px 2px; }
.sl-alert .sl-corner-br { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

/* one-shot scan sweep on entry */
.sl-alert-scan {
    position: absolute;
    left: 0; right: 0;
    top: -30%; height: 30%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255,255,255,.08) 45%,
        currentColor 50%,
        rgba(255,255,255,.08) 55%,
        transparent 100%);
    opacity: .0;
    mix-blend-mode: screen;
    z-index: 0;
    pointer-events: none;
    animation: sl-alert-scan 1400ms ease-out 1;
}
@keyframes sl-alert-scan {
    0%   { top: -30%; opacity: 0; }
    15%  { opacity: .9; }
    55%  { top: 100%; opacity: .9; }
    100% { top: 100%; opacity: 0; }
}

/* ---- layout ---- */
.sl-alert-icon {
    position: relative; z-index: 1;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.28);
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.sl-alert-icon svg { filter: drop-shadow(0 0 6px currentColor); }

.sl-alert-text {
    position: relative; z-index: 1;
    min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.sl-alert-header {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
}
.sl-alert-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: sl-alert-blink 900ms ease-in-out infinite;
}
@keyframes sl-alert-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
}
.sl-alert-tag { color: inherit; }

/* Tiny Oryx mark at the top-right of each popup card so every pop
   reads as the System speaking after a game run. */
.sl-alert-oryx {
    position: absolute;
    top: 6px;
    right: 12px;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(123, 230, 255, 0.75);
    text-shadow: 0 0 6px rgba(123, 230, 255, 0.35);
    opacity: 0.9;
    pointer-events: none;
}

.sl-alert-name {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
    text-shadow: 0 0 8px currentColor, 0 0 1px #fff;
    line-height: 1.15;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-alert-desc {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .03em;
    color: rgba(186,230,253,.8);
    line-height: 1.35;
    margin-top: 2px;
    /* Clamp to two lines — avoids layout jumps for long copy. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- per-kind accents ----
   Each variant sets a currentColor via `color:` on the root so the scan
   sweep, dot, icon glow, name text-shadow all tint together. */
.sl-alert-skill {
    color: #38bdf8;  /* cyan */
}
.sl-alert-skill .sl-alert-icon {
    color: #7dd3fc;
    border-color: rgba(56,189,248,.35);
    background: rgba(56,189,248,.1);
}

.sl-alert-title {
    color: #fbbf24;  /* gold */
    border-color: rgba(251,191,36,.55);
    box-shadow:
        0 0 0 1px rgba(251,191,36,.16),
        0 0 26px -4px rgba(251,191,36,.65),
        0 10px 24px -10px rgba(0,0,0,.75),
        inset 0 0 0 1px rgba(255,255,255,.03);
}
.sl-alert-title .sl-alert-icon {
    color: #fcd34d;
    border-color: rgba(251,191,36,.4);
    background: rgba(251,191,36,.1);
}
.sl-alert-title .sl-alert-name { text-shadow: 0 0 10px rgba(251,191,36,.85), 0 0 1px #fff; }
.sl-alert-title .sl-alert-desc { color: rgba(253,230,138,.82); }

.sl-alert-currency {
    color: #fb923c;  /* amber */
    border-color: rgba(251,146,60,.55);
    box-shadow:
        0 0 0 1px rgba(251,146,60,.14),
        0 0 26px -4px rgba(251,146,60,.6),
        0 10px 24px -10px rgba(0,0,0,.75),
        inset 0 0 0 1px rgba(255,255,255,.03);
}
.sl-alert-currency .sl-alert-icon {
    color: #fdba74;
    border-color: rgba(251,146,60,.38);
    background: rgba(251,146,60,.1);
}
.sl-alert-currency .sl-alert-name { text-shadow: 0 0 10px rgba(251,146,60,.8), 0 0 1px #fff; }
.sl-alert-currency .sl-alert-desc { color: rgba(254,215,170,.8); }

/* ---- mobile ---- */
@media (max-width: 640px) {
    .sl-alert-stack { top: 60px; width: calc(100vw - 16px); }
    .sl-alert { grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 12px; }
    .sl-alert-icon { width: 44px; height: 44px; }
    .sl-alert-icon svg { width: 24px; height: 24px; }
    .sl-alert-name { font-size: .94rem; }
    .sl-alert-header { font-size: .56rem; letter-spacing: .26em; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sl-alert { transition-duration: .15s; }
    .sl-alert-scan, .sl-alert-dot { animation: none; }
}

/* ============================================
   Oryx first-run intro — halo + tethered callout.
   Mirrors the FAB's fixed bottom-right anchor so the ring wraps it and
   the callout floats above it with a small tether arrow.
   ============================================ */
.oryx-intro[hidden] { display: none; }
.oryx-intro {
    --oi-accent:   var(--ai-accent, #a78bfa);
    --oi-accent-2: var(--ai-accent-2, #60a5fa);
    position: fixed;
    z-index: 59;
    pointer-events: none;
}

/* Halo — positioned exactly on top of the FAB, two rings ripple outward. */
.oryx-intro-halo {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    width: 52px; height: 52px;
    border-radius: 50%;
    pointer-events: none;
}
.oryx-intro-halo .oryx-intro-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--oi-accent);
    opacity: 0;
    box-shadow: 0 0 24px rgba(167, 139, 250, .45);
}
.oryx-intro.is-visible .oryx-intro-halo .oryx-intro-ring {
    animation: oryxIntroRing 2.2s cubic-bezier(.22,1,.36,1) infinite;
}
.oryx-intro.is-visible .oryx-intro-halo .oryx-intro-ring:nth-child(2) {
    animation-delay: 1.1s;
}
@keyframes oryxIntroRing {
    0%   { transform: scale(.95); opacity: .0; border-width: 2px; }
    10%  { opacity: .9; }
    100% { transform: scale(2.3); opacity: 0; border-width: 1px; }
}

/* Callout — floats above the FAB, tethered with a small arrow. */
.oryx-intro-callout {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
    width: 280px;
    max-width: calc(100vw - 36px);
    padding: 16px 16px 14px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(22, 20, 44, .96), rgba(14, 13, 30, .96));
    border: 1px solid rgba(167, 139, 250, .28);
    box-shadow:
        0 18px 44px -14px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(255, 255, 255, .02) inset,
        0 -30px 60px -40px rgba(96, 165, 250, .45) inset;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    color: #e8e6ff;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transform-origin: bottom right;
    transition: opacity 300ms cubic-bezier(.22,1,.36,1),
                transform 300ms cubic-bezier(.22,1,.36,1);
}
.oryx-intro.is-visible .oryx-intro-callout {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.oryx-intro.is-leaving .oryx-intro-callout {
    opacity: 0;
    transform: translateY(6px) scale(.98);
    transition-duration: 220ms;
}
/* Top accent line — faint gradient that fades through the border. */
.oryx-intro-callout::before {
    content: "";
    position: absolute;
    top: -1px; left: 14px; right: 34px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--oi-accent) 30%,
        var(--oi-accent-2) 70%,
        transparent);
    opacity: .8;
}

/* Tether — small diamond pointing from the callout toward the FAB. */
.oryx-intro-tether {
    position: absolute;
    right: 18px;
    bottom: -6px;
    width: 12px; height: 12px;
    background: linear-gradient(135deg, rgba(22, 20, 44, .96), rgba(14, 13, 30, .96));
    border-right: 1px solid rgba(167, 139, 250, .28);
    border-bottom: 1px solid rgba(167, 139, 250, .28);
    transform: rotate(45deg);
}

/* Eyebrow — "NEW TRANSMISSION" with a pulsing dot. */
.oryx-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .62rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(232, 230, 255, .58);
    margin-bottom: 8px;
}
.oryx-intro-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--oi-accent);
    box-shadow: 0 0 8px var(--oi-accent);
    animation: oryxIntroPulse 1.6s ease-in-out infinite;
}
@keyframes oryxIntroPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: .55; }
}

.oryx-intro-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0 0 6px;
    background: linear-gradient(120deg, #ffffff 20%, var(--oi-accent) 70%, var(--oi-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.oryx-intro-body {
    margin: 0 0 14px;
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(232, 230, 255, .75);
}

.oryx-intro-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.oryx-intro-primary {
    flex: 1;
    border: 0;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #0b0b19;
    background: linear-gradient(135deg, var(--oi-accent), var(--oi-accent-2));
    box-shadow: 0 6px 18px -6px rgba(124, 58, 237, .55);
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.oryx-intro-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px -8px rgba(124, 58, 237, .7);
}
.oryx-intro-primary:active { transform: translateY(0); }

.oryx-intro-later {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: .78rem;
    color: rgba(232, 230, 255, .65);
    background: transparent;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.oryx-intro-later:hover {
    background: rgba(255, 255, 255, .04);
    color: #fff;
    border-color: rgba(255, 255, 255, .14);
}

.oryx-intro-dismiss {
    position: absolute;
    top: 8px; right: 8px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: rgba(232, 230, 255, .55);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.oryx-intro-dismiss:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Mobile: match the FAB's tighter inset (right: 14px, bottom: +78px). */
@media (max-width: 560px) {
    .oryx-intro-halo {
        right: 14px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
    }
    .oryx-intro-callout {
        right: 14px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 146px);
        width: calc(100vw - 28px);
        max-width: 320px;
    }
    .oryx-intro-tether { right: 22px; }
}

/* Reduced motion — kill the ring ripple + pulse, keep the fade. */
@media (prefers-reduced-motion: reduce) {
    .oryx-intro.is-visible .oryx-intro-halo .oryx-intro-ring,
    .oryx-intro-pulse { animation: none; }
    .oryx-intro-halo .oryx-intro-ring { opacity: .5; transform: scale(1.15); }
}

/* Light theme — swap the dark glass for soft white glass. */
[data-theme="light"] .oryx-intro-callout {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 246, 255, .96));
    border: 1px solid rgba(124, 58, 237, .18);
    color: #1c1e37;
    box-shadow:
        0 18px 44px -14px rgba(124, 58, 237, .22),
        0 0 0 1px rgba(255, 255, 255, .6) inset;
}
[data-theme="light"] .oryx-intro-tether {
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 246, 255, .96));
    border-right: 1px solid rgba(124, 58, 237, .18);
    border-bottom: 1px solid rgba(124, 58, 237, .18);
}
[data-theme="light"] .oryx-intro-eyebrow { color: rgba(28, 30, 55, .55); }
[data-theme="light"] .oryx-intro-body    { color: rgba(28, 30, 55, .72); }
[data-theme="light"] .oryx-intro-later {
    color: rgba(28, 30, 55, .7);
    border-color: rgba(28, 30, 55, .12);
}
[data-theme="light"] .oryx-intro-later:hover {
    background: rgba(28, 30, 55, .04);
    color: #111;
    border-color: rgba(28, 30, 55, .2);
}
[data-theme="light"] .oryx-intro-dismiss {
    background: rgba(28, 30, 55, .06);
    color: rgba(28, 30, 55, .55);
}
[data-theme="light"] .oryx-intro-dismiss:hover {
    background: rgba(28, 30, 55, .12);
    color: #111;
}

/* ============================================
   MESSAGES — CCA System-UI identity retrofit.
   Identity layer only: no new features, no endpoint changes. Rebrands
   the existing chat with the gradient / halo / glass language used by
   Oryx, the Status Screen, and the XP HUD.
   ============================================ */

/* ----- Sidebar header: gradient title + "Private Transmissions" tag */
.msg-sidebar-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msg-page .msg-sidebar-head h2 {
    background: linear-gradient(120deg, #ffffff 10%, #a78bfa 55%, #60a5fa 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0;
}
.msg-sidebar-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .58rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(232, 230, 255, .5);
}
.msg-sidebar-tag-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 8px #a78bfa;
    animation: msgSidebarPulse 1.8s ease-in-out infinite;
}
@keyframes msgSidebarPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: .5; }
}

/* ----- Online presence ring: pulsing purple halo around online avatars */
.msg-friend-avatar-wrap .msg-dot-online {
    background: #a78bfa;
    box-shadow: 0 0 0 0 rgba(167, 139, 250, .6);
    animation: msgOnlinePulse 2s ease-out infinite;
}
@keyframes msgOnlinePulse {
    0%   { box-shadow: 0 0 0 0   rgba(167, 139, 250, .7); }
    70%  { box-shadow: 0 0 0 7px rgba(167, 139, 250, 0);  }
    100% { box-shadow: 0 0 0 0   rgba(167, 139, 250, 0);  }
}

/* ----- Rank chip: appears next to the friend's username in the list
   and in the chat header. Colour graduates by tier (F→S). */
.msg-rank-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 6px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    color: #0b0b19;
    background: linear-gradient(135deg, #c9c9d6, #9a9aae);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
    flex-shrink: 0;
    vertical-align: middle;
}
.msg-rank-F { background: linear-gradient(135deg, #7a7a88, #5a5a68); color: #e8e6ff; }
.msg-rank-E { background: linear-gradient(135deg, #7a9e8f, #4f7a6b); color: #e8e6ff; }
.msg-rank-D { background: linear-gradient(135deg, #6ea8d8, #3b78b5); color: #fff; }
.msg-rank-C { background: linear-gradient(135deg, #8b5cf6, #6d46c8); color: #fff; }
.msg-rank-B { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: #fff; }
.msg-rank-A { background: linear-gradient(135deg, #f7b733, #e87a00); color: #1a1004; }
.msg-rank-S {
    background: linear-gradient(135deg, #fbbf24, #a78bfa, #60a5fa);
    color: #0b0b19;
    box-shadow: 0 0 12px rgba(167, 139, 250, .5),
                0 0 0 1px rgba(255, 255, 255, .14) inset;
}
.msg-rank-SS {
    background: linear-gradient(135deg, #fef08a, #f472b6, #a78bfa, #60a5fa);
    background-size: 200% 200%;
    color: #0b0b19;
    box-shadow: 0 0 14px rgba(244, 114, 182, .55),
                0 0 0 1px rgba(255, 255, 255, .22) inset;
    animation: msg-rank-ss-shimmer 4s ease-in-out infinite;
    letter-spacing: .03em;
}
@keyframes msg-rank-ss-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.msg-rank-SSS {
    background: linear-gradient(
        120deg,
        #fff9c4 0%,
        #fbbf24 18%,
        #f472b6 38%,
        #a78bfa 58%,
        #60a5fa 78%,
        #34d399 100%
    );
    background-size: 300% 100%;
    color: #0b0b19;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow:
        0 0 16px rgba(251, 191, 36, .55),
        0 0 28px rgba(167, 139, 250, .35),
        0 0 0 1px rgba(255, 255, 255, .28) inset;
    animation: msg-rank-sss-shimmer 3s linear infinite;
    position: relative;
}
.msg-rank-SSS::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse at top,
        rgba(255,255,255,.35) 0%, transparent 65%);
    mix-blend-mode: overlay;
}
@keyframes msg-rank-sss-shimmer {
    0%   { background-position:   0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ----- Active conversation: gradient accent bar on the left edge */
.msg-page .msg-friend-item.active {
    background: linear-gradient(90deg,
        rgba(167, 139, 250, .18) 0%,
        rgba(96, 165, 250, .06) 100%);
    box-shadow: inset 3px 0 0 0 #a78bfa;
}
.msg-page .msg-friend-item.active .msg-friend-top strong {
    color: #fff;
}

/* ----- Messages pane: subtle scan-line overlay evoking the System UI */
.msg-page .msg-messages {
    position: relative;
}
.msg-page .msg-messages::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(167, 139, 250, .015) 0px,
            rgba(167, 139, 250, .015) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: screen;
    z-index: 0;
}
.msg-page .msg-messages > * { position: relative; z-index: 1; }

/* ----- Bubbles: gradient mine, glass theirs */
.msg-page .msg-bubble-mine {
    background: linear-gradient(135deg, #8b5cf6, #6d46c8 60%, #4f46e5);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(124, 58, 237, .55),
                0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.msg-page .msg-bubble-theirs {
    background: linear-gradient(180deg,
        rgba(28, 25, 52, .82),
        rgba(20, 18, 40, .82));
    border: 1px solid rgba(167, 139, 250, .14);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    color: #e8e6ff;
}

/* ----- Input: gradient focus ring matching the Oryx FAB */
.msg-page .msg-input {
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.msg-page .msg-input:focus {
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .14),
                0 0 18px -4px rgba(96, 165, 250, .35);
    outline: none;
}

/* ----- Empty state: "Awaiting signal" System-UI treatment */
.msg-empty-system {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px 20px;
}
.msg-empty-glyph {
    position: relative;
    width: 74px; height: 74px;
    display: grid; place-items: center;
    margin-bottom: 10px;
    color: rgba(232, 230, 255, .7);
}
.msg-empty-glyph svg { position: relative; z-index: 1; }
.msg-empty-glyph .msg-empty-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, .45);
    animation: msgEmptyRing 2.6s cubic-bezier(.22,1,.36,1) infinite;
    opacity: 0;
}
.msg-empty-glyph .msg-empty-ring:nth-child(2) { animation-delay: 1.3s; }
@keyframes msgEmptyRing {
    0%   { transform: scale(.85); opacity: 0; }
    15%  { opacity: .85; }
    100% { transform: scale(1.6); opacity: 0; }
}
.msg-empty-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .6rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(232, 230, 255, .55);
    margin-bottom: 4px;
}
.msg-empty-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 8px #a78bfa;
    animation: msgSidebarPulse 1.8s ease-in-out infinite;
}
.msg-empty-system p {
    font-size: 1rem;
    font-weight: 700;
    margin: 2px 0;
    background: linear-gradient(120deg, #ffffff 10%, #a78bfa 70%, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.msg-empty-system small {
    font-size: .78rem;
    color: rgba(232, 230, 255, .55);
}

/* ----- Reduced motion: kill the ripples, keep the static glow */
@media (prefers-reduced-motion: reduce) {
    .msg-sidebar-tag-pulse,
    .msg-empty-dot,
    .msg-friend-avatar-wrap .msg-dot-online,
    .msg-empty-glyph .msg-empty-ring {
        animation: none;
    }
    .msg-empty-glyph .msg-empty-ring { opacity: .4; transform: scale(1.2); }
}

/* ----- Light theme fallbacks — messages.php force-enables dark via
   <html data-theme="dark">, but keep parity in case that changes. */
[data-theme="light"] .msg-page .msg-bubble-theirs {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,246,255,.95));
    border-color: rgba(124, 58, 237, .16);
    color: #1c1e37;
}
[data-theme="light"] .msg-sidebar-tag { color: rgba(28, 30, 55, .48); }
[data-theme="light"] .msg-empty-system small { color: rgba(28, 30, 55, .55); }

/* ============================================
   MESSAGES — Open-channel DM requests (non-friend DMs).
   ============================================ */

/* Twin-button stack in the user search panel. */
.msg-search-btns {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.msg-dm-btn {
    background: transparent;
    color: var(--link-color);
    border: 1px solid rgba(167, 139, 250, .4);
    padding: 5px 10px;
    border-radius: 14px;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.msg-dm-btn:hover {
    background: rgba(167, 139, 250, .12);
    border-color: rgba(167, 139, 250, .7);
    color: #fff;
}

/* Inline composer that appears inside a search-result row. */
.msg-dm-composer {
    flex-basis: 100%;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(167, 139, 250, .06);
    border: 1px solid rgba(167, 139, 250, .16);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.msg-dm-composer-input {
    width: 100%;
    resize: vertical;
    min-height: 56px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font: inherit;
    font-size: .86rem;
    line-height: 1.4;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.msg-dm-composer-input:focus {
    outline: none;
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}
.msg-dm-composer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.msg-dm-composer-cancel,
.msg-dm-composer-send {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, filter 140ms ease;
}
.msg-dm-composer-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.msg-dm-composer-cancel:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, .2);
}
.msg-dm-composer-send {
    background: linear-gradient(135deg, #8b5cf6, #60a5fa);
    color: #0b0b19;
    border: 0;
    box-shadow: 0 6px 18px -8px rgba(124, 58, 237, .55);
}
.msg-dm-composer-send:hover { filter: brightness(1.06); }

/* "First message" / pending-state banner shown above the messages
   area when a DM channel isn't yet fully accepted. */
.msg-pending-banner {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: .82rem;
    line-height: 1.4;
    color: #fde68a;
    background: rgba(250, 204, 21, .08);
    border-bottom: 1px solid rgba(250, 204, 21, .22);
}

/* Legacy compose pane — kept so old cached DOM doesn't error. */
.msg-compose-pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 28px;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}
.msg-compose-back {
    position: absolute;
    top: 12px;
    left: 12px;
    display: none;
}
.msg-compose-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(167, 139, 250, .06);
    border: 1px solid rgba(167, 139, 250, .16);
    flex-wrap: wrap;
}
.msg-compose-avatar {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #8b5cf6, #60a5fa);
    color: #0b0b19;
    font-weight: 700;
    font-size: 1.02rem;
}
.msg-compose-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.msg-compose-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msg-compose-info strong {
    color: var(--text-primary);
    font-size: 1.02rem;
}
.msg-compose-sub {
    font-size: .78rem;
    color: var(--text-muted);
}
.msg-compose-profile-link {
    font-size: .78rem;
    color: #a78bfa;
    text-decoration: none;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(167, 139, 250, .25);
    transition: background 140ms ease, border-color 140ms ease;
}
.msg-compose-profile-link:hover {
    background: rgba(167, 139, 250, .1);
    border-color: rgba(167, 139, 250, .55);
}
.msg-compose-notice {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(250, 204, 21, .08);
    border: 1px solid rgba(250, 204, 21, .25);
    color: #fde68a;
    font-size: .85rem;
    line-height: 1.45;
}
.msg-compose-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msg-compose-input {
    width: 100%;
    resize: vertical;
    min-height: 120px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font: inherit;
    font-size: .92rem;
    line-height: 1.5;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.msg-compose-input:focus {
    outline: none;
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}
.msg-compose-input:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.msg-compose-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.msg-compose-cancel,
.msg-compose-send {
    padding: 9px 18px;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, filter 140ms ease, opacity 140ms ease;
}
.msg-compose-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.msg-compose-cancel:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, .2);
}
.msg-compose-send {
    background: linear-gradient(135deg, #8b5cf6, #60a5fa);
    color: #0b0b19;
    border: 0;
    box-shadow: 0 8px 22px -10px rgba(124, 58, 237, .55);
}
.msg-compose-send:hover:not(:disabled) { filter: brightness(1.06); }
.msg-compose-send:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}
.msg-compose-help {
    font-size: .76rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 760px) {
    .msg-compose-back { display: flex; }
    .msg-compose-pane { padding: 52px 14px 20px; }
    .msg-compose-head { padding: 12px; }
    .msg-compose-profile-link { width: 100%; text-align: center; }
}

/* Incoming DM requests panel — structured like friend requests but
   with a message preview block between header and actions. */
.msg-dm-requests .msg-requests-head span:first-child::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 8px #a78bfa;
    margin-right: 8px;
    vertical-align: middle;
    animation: msgSidebarPulse 1.8s ease-in-out infinite;
}
.msg-dm-req-item {
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg,
        rgba(167, 139, 250, .08),
        rgba(96, 165, 250, .03));
    border: 1px solid rgba(167, 139, 250, .14);
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.msg-dm-req-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.msg-dm-req-info { flex: 1; min-width: 0; }
.msg-dm-req-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .88rem;
}
.msg-dm-req-name strong { color: var(--text-heading); }
.msg-dm-req-info small {
    display: block;
    font-size: .7rem;
    color: var(--text-faint);
}
.msg-dm-req-preview {
    margin: 0;
    padding: 8px 10px;
    border-left: 3px solid rgba(167, 139, 250, .5);
    background: rgba(10, 10, 22, .35);
    border-radius: 4px;
    font-size: .82rem;
    line-height: 1.4;
    color: rgba(232, 230, 255, .82);
    font-style: italic;
    word-wrap: break-word;
}
.msg-dm-req-extra {
    display: inline-block;
    margin-left: 6px;
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(167, 139, 250, .85);
    font-style: normal;
    font-weight: 600;
}
.msg-dm-req-item .msg-request-actions {
    justify-content: flex-end;
}
@media (prefers-reduced-motion: reduce) {
    .msg-dm-requests .msg-requests-head span:first-child::before { animation: none; }
}

/* Four-button (Accept/Decline/Ignore/Block) actions wrap on narrow
   screens. Tight sizing so they fit the 280px sidebar. */
.msg-dm-req-actions {
    flex-wrap: wrap;
    gap: 6px !important;
}
.msg-decline-btn,
.msg-ignore-btn,
.msg-block-btn,
.msg-report-btn {
    padding: 5px 10px;
    border-radius: 10px;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.msg-decline-btn:hover { color: #f59e0b; border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .08); }
.msg-ignore-btn:hover  { color: #9ca3af; border-color: rgba(156, 163, 175, .5); background: rgba(156, 163, 175, .08); }
.msg-block-btn         { color: #ef4444; border-color: rgba(239, 68, 68, .35); }
.msg-block-btn:hover   { color: #fff;    border-color: #ef4444; background: rgba(239, 68, 68, .18); }
.msg-report-btn        { color: #fbbf24; border-color: rgba(251, 191, 36, .35); }
.msg-report-btn:hover  { color: #1a1004; background: linear-gradient(135deg, #fbbf24, #f59e0b); border-color: transparent; }

/* ============================================
   REPORT MODAL — Oryx moderation reason picker
   ============================================ */
.msg-report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 16, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 180ms ease;
}
.msg-report-overlay.visible { opacity: 1; }
.msg-report-panel {
    position: relative;
    width: 440px;
    max-width: 100%;
    padding: 22px 22px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(22, 20, 44, .98), rgba(14, 13, 30, .98));
    border: 1px solid rgba(167, 139, 250, .28);
    box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .6),
                0 0 0 1px rgba(255, 255, 255, .02) inset;
    color: #e8e6ff;
    transform: translateY(10px) scale(.98);
    transition: transform 180ms cubic-bezier(.22,1,.36,1);
}
.msg-report-overlay.visible .msg-report-panel {
    transform: translateY(0) scale(1);
}
.msg-report-head { margin-bottom: 14px; }
.msg-report-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .62rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(232, 230, 255, .55);
    margin-bottom: 8px;
}
.msg-report-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 8px #fbbf24;
    animation: msgSidebarPulse 1.8s ease-in-out infinite;
}
.msg-report-panel h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(120deg, #ffffff 10%, #fbbf24 55%, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.msg-report-sub {
    margin: 0;
    font-size: .82rem;
    color: rgba(232, 230, 255, .65);
    line-height: 1.45;
}
.msg-report-reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 14px 0 12px;
}
.msg-report-reason {
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .02);
    color: rgba(232, 230, 255, .82);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
}
.msg-report-reason:hover {
    border-color: rgba(167, 139, 250, .45);
    background: rgba(167, 139, 250, .08);
    color: #fff;
}
.msg-report-reason.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    color: #0b0b19;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.msg-report-note {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(10, 10, 22, .5);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #e8e6ff;
    font: inherit;
    font-size: .84rem;
    resize: vertical;
    min-height: 56px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.msg-report-note:focus {
    outline: none;
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}
.msg-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.msg-report-cancel,
.msg-report-submit {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, filter 140ms ease;
}
.msg-report-cancel {
    background: transparent;
    color: rgba(232, 230, 255, .65);
    border: 1px solid rgba(255, 255, 255, .1);
}
.msg-report-cancel:hover {
    background: rgba(255, 255, 255, .04);
    color: #fff;
}
.msg-report-submit {
    border: 0;
    background: linear-gradient(135deg, #fbbf24, #a78bfa);
    color: #0b0b19;
    box-shadow: 0 6px 18px -6px rgba(167, 139, 250, .55);
}
.msg-report-submit:hover:not(:disabled) { filter: brightness(1.06); }
.msg-report-submit:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.msg-report-footer {
    min-height: 18px;
    margin-top: 10px;
    text-align: center;
    font-size: .8rem;
}
.msg-report-working { color: rgba(167, 139, 250, .85); }
.msg-report-done    { color: #22c55e; }
.msg-report-err     { color: #ef4444; }

/* ============================================
   ADMIN — Reports pane
   ============================================ */
.adm-nav-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 6px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    text-align: center;
}
.adm-reports-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.adm-seg {
    display: inline-flex;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
}
.adm-seg-btn {
    padding: 7px 14px;
    background: transparent;
    color: rgba(232, 230, 255, .65);
    font-size: .8rem;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.adm-seg-btn:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.adm-seg-btn.adm-seg-on {
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    color: #0b0b19;
}

.adm-rep-row {
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(167, 139, 250, .04);
    border: 1px solid rgba(167, 139, 250, .14);
}
.adm-rep-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.adm-rep-reason {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(167, 139, 250, .18);
    color: #a78bfa;
}
.adm-rep-verdict {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.adm-rep-verdict-match    { background: rgba(239, 68, 68, .15);  color: #ef4444; }
.adm-rep-verdict-mismatch { background: rgba(34, 197, 94, .15);  color: #22c55e; }
.adm-rep-verdict-unsure,
.adm-rep-verdict-pending  { background: rgba(156, 163, 175, .15); color: #9ca3af; }
.adm-rep-ban-rec {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
}
.adm-rep-ban-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .68rem;
    font-weight: 700;
    background: rgba(239, 68, 68, .2);
    color: #fecaca;
}
.adm-rep-time {
    margin-left: auto;
    font-size: .74rem;
    color: rgba(232, 230, 255, .4);
}
.adm-rep-meta {
    font-size: .86rem;
    color: rgba(232, 230, 255, .78);
    margin-bottom: 8px;
}
.adm-rep-body {
    margin: 0 0 8px;
    padding: 10px 12px;
    border-left: 3px solid rgba(167, 139, 250, .5);
    background: rgba(10, 10, 22, .5);
    border-radius: 4px;
    font-size: .85rem;
    line-height: 1.5;
    color: rgba(232, 230, 255, .88);
    word-wrap: break-word;
}
.adm-rep-note,
.adm-rep-oryx {
    margin: 4px 0;
    font-size: .82rem;
    color: rgba(232, 230, 255, .7);
}
.adm-rep-oryx { color: rgba(167, 139, 250, .85); }
.adm-rep-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.adm-btn-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.adm-btn-danger:hover { filter: brightness(1.08); }

/* ============================================================
   Dedicated DM page (dm.php) — single-conversation, no sidebar.
   Everything scoped under .dm-page so it can't conflict with
   the main messages.php layout.
   ============================================================ */

body.dm-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-page, #0a0a12);
    overflow: hidden;
}

.dm-shell {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 60px);
    max-width: 860px;
    margin: 0 auto;
    border-left: 1px solid rgba(255,255,255,.04);
    border-right: 1px solid rgba(255,255,255,.04);
    background: var(--bg-page, #0a0a12);
    position: relative;
}

.dm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: var(--bg-page, #0a0a12);
    flex-shrink: 0;
    min-height: 56px;
    position: relative;
}
.dm-back {
    display: flex;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border-radius: 9px;
    color: var(--text-muted, #aab);
    text-decoration: none;
    transition: background 140ms ease;
}
.dm-back:hover { background: rgba(255,255,255,.06); color: #fff; }

.dm-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    flex: 0 0 40px;
    background: linear-gradient(135deg, #8b5cf6, #60a5fa);
    color: #0b0b19;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.dm-avatar.has-img { background: transparent; }
.dm-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dm-head-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dm-head-info strong {
    color: var(--text-primary, #fff);
    font-size: 1rem;
    line-height: 1.2;
}
.dm-handle {
    font-size: .76rem;
    color: var(--text-muted, rgba(232,228,245,.58));
    line-height: 1.2;
}
.msg-chat-handle {
    font-size: .8em;
    color: rgba(232,228,245,.55);
    font-weight: 500;
    margin-left: 6px;
}
.dm-status {
    font-size: .76rem;
    color: var(--text-muted, #99a);
}
.dm-status-online { color: #22c55e; }
.dm-status-online::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    margin-right: 4px;
    vertical-align: middle;
}

.dm-head-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    position: relative;
}
.dm-icon-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text-muted, #aab);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
    text-decoration: none;
}
.dm-icon-btn:hover { background: rgba(255,255,255,.06); color: #fff; }

.dm-menu {
    position: absolute;
    top: 42px;
    right: 0;
    background: #1a1c26;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 4px;
    min-width: 180px;
    z-index: 20;
    box-shadow: 0 12px 28px -12px rgba(0,0,0,.6);
}
.dm-menu-item {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    border-radius: 7px;
    color: var(--text-primary, #eee);
    text-align: left;
    cursor: pointer;
    font-size: .84rem;
}
.dm-menu-item:hover { background: rgba(167, 139, 250, .12); }
.dm-menu-item-danger { color: #fca5a5; }
.dm-menu-item-danger:hover { background: rgba(239,68,68,.12); }

.dm-banner {
    flex-shrink: 0;
    padding: 10px 14px;
    background: rgba(250, 204, 21, .08);
    border-bottom: 1px solid rgba(250, 204, 21, .22);
    color: #fde68a;
    font-size: .82rem;
    line-height: 1.4;
}

.dm-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}
.dm-empty {
    margin: auto;
    color: var(--text-muted, #88a);
    font-size: .9rem;
}
.dm-loading { margin: auto; }

.dm-row {
    display: flex;
    width: 100%;
}
.dm-row-mine   { justify-content: flex-end; }
.dm-row-theirs { justify-content: flex-start; }

.dm-bubble {
    max-width: 78%;
    padding: 9px 12px 6px;
    border-radius: 16px;
    font-size: .92rem;
    line-height: 1.4;
    word-wrap: break-word;
    position: relative;
}
.dm-bubble p { margin: 0 0 4px; white-space: pre-wrap; }
.dm-bubble-mine {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.dm-bubble-theirs {
    background: rgba(255,255,255,.06);
    color: var(--text-primary, #eee);
    border: 1px solid rgba(255,255,255,.06);
    border-bottom-left-radius: 4px;
}
.dm-bubble-time {
    font-size: .68rem;
    opacity: .7;
    display: block;
    text-align: right;
}
.dm-bubble-mine .dm-bubble-time { color: rgba(255,255,255,.75); }

.dm-row-sending .dm-bubble { opacity: .6; }
.dm-row-failed  .dm-bubble { opacity: .7; border: 1px solid #ef4444; }

.dm-link { color: #fff; text-decoration: underline; word-break: break-all; }
.dm-bubble-theirs .dm-link { color: #a78bfa; }

.dm-composer {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: var(--bg-page, #0a0a12);
}
.dm-input {
    flex: 1 1 auto;
    resize: none;
    min-height: 42px;
    max-height: 120px;
    padding: 10px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: .94rem;
    line-height: 1.35;
}
.dm-input:focus {
    outline: none;
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}
.dm-send-btn {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #60a5fa);
    color: #0b0b19;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
}
.dm-send-btn:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.04); }
.dm-send-btn:disabled { opacity: .5; cursor: not-allowed; }

.dm-action-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
}
.dm-action-sheet {
    width: 100%;
    max-width: 380px;
    background: #1a1c26;
    border-radius: 14px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid rgba(255,255,255,.08);
}
.dm-action-sheet button {
    background: transparent;
    border: 0;
    color: var(--text-primary, #eee);
    padding: 14px;
    border-radius: 10px;
    font-size: .95rem;
    cursor: pointer;
    text-align: center;
    transition: background 140ms ease;
}
.dm-action-sheet button:hover { background: rgba(255,255,255,.05); }
.dm-action-sheet button.dm-action-danger { color: #fca5a5; }
.dm-action-sheet button.dm-action-danger:hover { background: rgba(239,68,68,.12); }

@media (max-width: 760px) {
    .dm-shell {
        height: calc(100dvh - 52px);
        border: 0;
    }
    .dm-composer { padding: 8px 10px env(safe-area-inset-bottom, 10px); }
    .dm-bubble { max-width: 85%; font-size: .95rem; }
}

/* ================================================================
   Audio calls — WebRTC
   ---------------------------------------------------------------
   Two UIs: a full-screen incoming-call overlay (ringing) and a
   bottom-right active-call pill (connecting + in-call timer).
   A third, lightweight element is the inline "call" bubble used
   for the conversation log.
   ================================================================ */

/* ---- Incoming call overlay (full screen, ringing) ---- */
.call-incoming-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(6, 8, 18, .78);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: call-overlay-fade .2s ease;
}
@keyframes call-overlay-fade {
    from { opacity: 0 } to { opacity: 1 }
}
.call-incoming-card {
    background: linear-gradient(180deg, rgba(30,20,60,.96), rgba(14,10,30,.96));
    border: 1px solid rgba(124,58,237,.25);
    border-radius: 18px;
    padding: 28px 26px 22px;
    width: min(360px, 90vw);
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.call-incoming-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: rgba(124,58,237,.2);
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid rgba(124,58,237,.4);
    animation: call-avatar-pulse 1.6s ease-in-out infinite;
}
.call-incoming-avatar img { width: 100%; height: 100%; object-fit: cover; }
@keyframes call-avatar-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.5); }
    50%      { box-shadow: 0 0 0 14px rgba(124,58,237,0); }
}
.call-incoming-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}
.call-incoming-sub {
    font-size: .85rem;
    color: rgba(255,255,255,.6);
    margin-bottom: 14px;
}
.call-incoming-pulse {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 22px;
}
.call-incoming-pulse span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(124,58,237,.6);
    animation: call-dot 1.2s ease-in-out infinite;
}
.call-incoming-pulse span:nth-child(2) { animation-delay: .15s; }
.call-incoming-pulse span:nth-child(3) { animation-delay: .3s; }
@keyframes call-dot {
    0%, 100% { transform: scale(.6); opacity: .4; }
    50%      { transform: scale(1);  opacity: 1; }
}
.call-incoming-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
}
.call-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 999px;
    border: 0;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .1s ease, background .15s ease;
}
.call-btn:active { transform: scale(.96); }
.call-btn-accept  { background: #22c55e; }
.call-btn-accept:hover  { background: #16a34a; }
.call-btn-decline { background: #dc2626; }
.call-btn-decline:hover { background: #b91c1c; }

/* ---- Active-call pill (bottom right) ---- */
.call-active-pill {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 99999;
    background: rgba(18, 14, 36, .96);
    border: 1px solid rgba(124,58,237,.3);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    color: #fff;
    min-width: 240px;
    max-width: 340px;
}
.call-active-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(124,58,237,.25);
    color: #fff;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.call-active-avatar img { width: 100%; height: 100%; object-fit: cover; }
.call-active-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.call-active-info strong {
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.call-active-info span {
    font-size: .75rem;
    color: rgba(255,255,255,.6);
}
.call-active-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    flex-shrink: 0;
}
.call-active-btn:active { transform: scale(.92); }
.call-active-mute { background: rgba(124,58,237,.3); }
.call-active-mute:hover { background: rgba(124,58,237,.5); }
.call-active-mute.call-active-mute-on { background: #f59e0b; }
.call-active-hangup { background: #dc2626; }
.call-active-hangup:hover { background: #b91c1c; }

@media (max-width: 640px) {
    .call-active-pill {
        left: 10px;
        right: 10px;
        bottom: 70px; /* above the bottom-nav */
        min-width: 0;
    }
}

/* ---- Call-log bubble (inside message timeline) ---- */
.msg-call-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
}
.msg-call-ico {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(34,197,94,.2);
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-call-ico-missed {
    background: rgba(220,38,38,.18);
    color: #ef4444;
}
.msg-call-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.msg-call-info strong {
    font-size: .85rem;
    font-weight: 600;
}
.msg-call-info span {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
}

/* ================================================================
   Call Stage — full-screen audio-call experience.
   One component, four states via data-call-state:
     incoming | outgoing | connecting | live
   Replaces the old minimal incoming overlay. The bottom-right
   `.call-active-pill` is kept as the minimized form.
   ================================================================ */

.call-stage {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
    background: #07081a;
    animation: call-stage-in .28s cubic-bezier(.22,1,.36,1);
}
@keyframes call-stage-in {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}
.call-stage.call-stage-out {
    animation: call-stage-out .22s ease forwards;
}
@keyframes call-stage-out {
    to { opacity: 0; transform: scale(.98); }
}

/* ---- Aurora backdrop + grid ---- */
.call-stage-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1200px 800px at 50% -10%, rgba(124,58,237,.18), transparent 60%),
        radial-gradient(900px 700px at 100% 110%, rgba(34,197,94,.08), transparent 55%),
        linear-gradient(180deg, #0a0918 0%, #050411 100%);
}
.call-aurora {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    will-change: transform;
    mix-blend-mode: screen;
}
.call-aurora-a {
    background: radial-gradient(circle, rgba(124,58,237,.95) 0%, rgba(124,58,237,0) 70%);
    top: -140px; left: -120px;
    animation: call-aurora-drift-a 18s ease-in-out infinite alternate;
}
.call-aurora-b {
    background: radial-gradient(circle, rgba(59,130,246,.85) 0%, rgba(59,130,246,0) 70%);
    bottom: -180px; right: -120px;
    animation: call-aurora-drift-b 22s ease-in-out infinite alternate;
}
.call-aurora-c {
    background: radial-gradient(circle, rgba(236,72,153,.55) 0%, rgba(236,72,153,0) 70%);
    top: 40%; left: 55%;
    width: 380px; height: 380px;
    animation: call-aurora-drift-c 26s ease-in-out infinite alternate;
}
@keyframes call-aurora-drift-a {
    0%   { transform: translate(0,0)        scale(1); }
    100% { transform: translate(160px,90px) scale(1.15); }
}
@keyframes call-aurora-drift-b {
    0%   { transform: translate(0,0)           scale(1); }
    100% { transform: translate(-120px,-100px) scale(1.1); }
}
@keyframes call-aurora-drift-c {
    0%   { transform: translate(-50%,-50%) scale(1); }
    100% { transform: translate(-30%,-65%) scale(1.18); }
}
.call-stage-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    opacity: .6;
}

/* ---- Top bar: status chip + minimize ---- */
.call-stage-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    padding-top: max(18px, env(safe-area-inset-top));
}
.call-stage-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.call-stage-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #7c3aed;
    box-shadow: 0 0 10px rgba(124,58,237,.9);
    animation: call-stage-pulse-dot 1.4s ease-in-out infinite;
}
.call-stage[data-call-state="live"] .call-stage-pulse {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34,197,94,.9);
}
.call-stage[data-call-state="incoming"] .call-stage-pulse {
    background: #ec4899;
    box-shadow: 0 0 10px rgba(236,72,153,.9);
}
@keyframes call-stage-pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.6); opacity: .6; }
}
.call-stage-minimize {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.85);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .1s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.call-stage-minimize:hover { background: rgba(255,255,255,.1); }
.call-stage-minimize:active { transform: scale(.94); }
.call-stage[data-call-state="incoming"] .call-stage-minimize { display: none; }

/* ---- Center stack ---- */
.call-stage-center {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}
.call-stage-rings {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 320px; height: 320px;
    pointer-events: none;
}
.call-stage-rings span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(124,58,237,.45);
    animation: call-stage-ring 3.2s cubic-bezier(.22,1,.36,1) infinite;
    opacity: 0;
}
.call-stage-rings span:nth-child(2) { animation-delay: 1.06s; }
.call-stage-rings span:nth-child(3) { animation-delay: 2.12s; }
.call-stage[data-call-state="incoming"] .call-stage-rings span {
    border-color: rgba(236,72,153,.55);
    animation-duration: 2.2s;
}
.call-stage[data-call-state="incoming"] .call-stage-rings span:nth-child(2) { animation-delay: .73s; }
.call-stage[data-call-state="incoming"] .call-stage-rings span:nth-child(3) { animation-delay: 1.46s; }
.call-stage[data-call-state="live"] .call-stage-rings {
    display: none; /* rings give way to the visualizer */
}
@keyframes call-stage-ring {
    0%   { transform: scale(.5); opacity: 0; }
    20%  { opacity: .9; }
    100% { transform: scale(1.6); opacity: 0; }
}
.call-stage-avatar {
    position: relative;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(236,72,153,.3));
    color: #fff;
    font-size: 3rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.12);
    box-shadow:
        0 0 0 6px rgba(124,58,237,.12),
        0 0 40px rgba(124,58,237,.35),
        inset 0 0 0 1px rgba(255,255,255,.05);
    z-index: 1;
}
.call-stage[data-call-state="live"] .call-stage-avatar {
    box-shadow:
        0 0 0 6px rgba(34,197,94,.12),
        0 0 40px rgba(34,197,94,.3),
        inset 0 0 0 1px rgba(255,255,255,.05);
}
.call-stage-avatar img { width: 100%; height: 100%; object-fit: cover; }
.call-stage-name {
    margin: 20px 0 4px;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
    z-index: 1;
    position: relative;
}
.call-stage-sub {
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .02em;
    z-index: 1;
    position: relative;
}
.call-stage-timer {
    margin-top: 14px;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: rgba(255,255,255,.85);
    display: none;
    z-index: 1;
    position: relative;
}
.call-stage[data-call-state="live"] .call-stage-timer { display: block; }

/* ---- Visualizer ---- */
.call-stage-viz {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 56px;
    z-index: 1;
    position: relative;
}
.call-stage-viz span {
    display: block;
    width: 4px;
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(124,58,237,.9), rgba(236,72,153,.75));
    transform-origin: center;
    transition: transform .08s linear;
}
.call-stage[data-call-state="live"] .call-stage-viz span {
    background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(124,58,237,.8));
}
/* Idle animation while we wait — cycles through a sine-ish pattern. */
.call-stage[data-call-state="outgoing"]   .call-stage-viz span,
.call-stage[data-call-state="connecting"] .call-stage-viz span,
.call-stage[data-call-state="incoming"]   .call-stage-viz span {
    animation: call-stage-viz-idle 1.6s ease-in-out infinite;
}
.call-stage-viz span:nth-child(1)  { animation-delay: .00s; }
.call-stage-viz span:nth-child(2)  { animation-delay: .06s; }
.call-stage-viz span:nth-child(3)  { animation-delay: .12s; }
.call-stage-viz span:nth-child(4)  { animation-delay: .18s; }
.call-stage-viz span:nth-child(5)  { animation-delay: .24s; }
.call-stage-viz span:nth-child(6)  { animation-delay: .30s; }
.call-stage-viz span:nth-child(7)  { animation-delay: .36s; }
.call-stage-viz span:nth-child(8)  { animation-delay: .42s; }
.call-stage-viz span:nth-child(9)  { animation-delay: .48s; }
.call-stage-viz span:nth-child(10) { animation-delay: .54s; }
.call-stage-viz span:nth-child(11) { animation-delay: .60s; }
.call-stage-viz span:nth-child(12) { animation-delay: .66s; }
.call-stage-viz span:nth-child(13) { animation-delay: .60s; }
.call-stage-viz span:nth-child(14) { animation-delay: .54s; }
.call-stage-viz span:nth-child(15) { animation-delay: .48s; }
.call-stage-viz span:nth-child(16) { animation-delay: .42s; }
.call-stage-viz span:nth-child(17) { animation-delay: .36s; }
.call-stage-viz span:nth-child(18) { animation-delay: .30s; }
.call-stage-viz span:nth-child(19) { animation-delay: .24s; }
.call-stage-viz span:nth-child(20) { animation-delay: .18s; }
.call-stage-viz span:nth-child(21) { animation-delay: .12s; }
.call-stage-viz span:nth-child(22) { animation-delay: .06s; }
.call-stage-viz span:nth-child(23) { animation-delay: .00s; }
.call-stage-viz span:nth-child(24) { animation-delay: .06s; }
@keyframes call-stage-viz-idle {
    0%, 100% { transform: scaleY(.4); opacity: .5; }
    50%      { transform: scaleY(1.4); opacity: 1; }
}

/* ---- Bottom actions ---- */
.call-stage-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 20px 34px;
    padding-bottom: max(34px, env(safe-area-inset-bottom));
}
.call-stage-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform .12s cubic-bezier(.22,1,.36,1), background .15s, box-shadow .15s;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
}
.call-stage-btn:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.call-stage-btn:active { transform: scale(.92); }
.call-stage-btn svg { width: 22px; height: 22px; }
.call-stage-btn-label {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .7rem;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.call-stage-btn.is-mute-on {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 8px 24px rgba(245,158,11,.35);
}
.call-stage-btn.is-speaker-on {
    background: rgba(124,58,237,.85);
    border-color: rgba(124,58,237,.95);
    box-shadow: 0 8px 24px rgba(124,58,237,.45);
}
.call-stage-btn.is-camera-off {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 8px 24px rgba(220,38,38,.35);
}

/* Big danger / accept buttons */
.call-stage-btn-hangup,
.call-stage-btn-decline {
    background: #dc2626;
    border-color: rgba(255,255,255,.08);
    width: 72px; height: 72px;
    box-shadow: 0 10px 30px rgba(220,38,38,.4);
}
.call-stage-btn-hangup:hover,
.call-stage-btn-decline:hover { background: #ef4444; }
.call-stage-btn-hangup svg,
.call-stage-btn-decline svg { transform: rotate(135deg); width: 26px; height: 26px; }

.call-stage-btn-accept {
    background: #22c55e;
    border-color: rgba(255,255,255,.08);
    width: 72px; height: 72px;
    box-shadow: 0 10px 30px rgba(34,197,94,.4);
    animation: call-stage-accept-pulse 1.6s ease-in-out infinite;
}
.call-stage-btn-accept:hover { background: #16a34a; }
.call-stage-btn-accept svg { width: 26px; height: 26px; }
@keyframes call-stage-accept-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(34,197,94,.4), 0 0 0 0 rgba(34,197,94,.55); }
    50%      { box-shadow: 0 10px 30px rgba(34,197,94,.4), 0 0 0 18px rgba(34,197,94,0); }
}

/* Which buttons are visible per state */
.call-stage-btn-mute,
.call-stage-btn-camera,
.call-stage-btn-speaker,
.call-stage-btn-hangup,
.call-stage-btn-decline,
.call-stage-btn-accept { display: none; }

.call-stage[data-call-state="outgoing"]   .call-stage-btn-mute,
.call-stage[data-call-state="outgoing"]   .call-stage-btn-speaker,
.call-stage[data-call-state="outgoing"]   .call-stage-btn-hangup,
.call-stage[data-call-state="connecting"] .call-stage-btn-mute,
.call-stage[data-call-state="connecting"] .call-stage-btn-speaker,
.call-stage[data-call-state="connecting"] .call-stage-btn-hangup,
.call-stage[data-call-state="live"]       .call-stage-btn-mute,
.call-stage[data-call-state="live"]       .call-stage-btn-speaker,
.call-stage[data-call-state="live"]       .call-stage-btn-hangup { display: inline-flex; }

.call-stage[data-call-state="incoming"] .call-stage-btn-decline,
.call-stage[data-call-state="incoming"] .call-stage-btn-accept { display: inline-flex; }

/* Camera toggle: only visible on video calls, during outgoing/connecting/live. */
.call-stage[data-call-mode="video"][data-call-state="outgoing"]   .call-stage-btn-camera,
.call-stage[data-call-mode="video"][data-call-state="connecting"] .call-stage-btn-camera,
.call-stage[data-call-mode="video"][data-call-state="live"]       .call-stage-btn-camera { display: inline-flex; }

/* ---- Video mode layout ----
   Remote video fills the center; local video sits as a rounded PIP in
   the corner. Hide the avatar/viz/rings chrome that's for audio only. */
.call-stage-remote-video,
.call-stage-local-video { display: none; }
.call-stage[data-call-mode="video"] .call-stage-remote-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    z-index: 0;
}
.call-stage[data-call-mode="video"] .call-stage-local-video {
    display: block;
    position: absolute;
    bottom: 120px;
    right: 22px;
    width: 120px;
    height: 170px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
    background: #0a0a16;
    z-index: 3;
    /* Selfie-mirror so users see themselves right-way-round. */
    transform: scaleX(-1);
}
.call-stage[data-call-mode="video"] .call-stage-rings,
.call-stage[data-call-mode="video"] .call-stage-viz { display: none; }
.call-stage[data-call-mode="video"][data-call-state="live"] .call-stage-avatar,
.call-stage[data-call-mode="video"][data-call-state="live"] .call-stage-name,
.call-stage[data-call-mode="video"][data-call-state="live"] .call-stage-sub,
.call-stage[data-call-mode="video"][data-call-state="live"] .call-stage-timer {
    /* Once the call is live, recede the text overlay — the video tells
       the story. Keep the timer visible via the top chip. */
    display: none;
}
.call-stage[data-call-mode="video"] .call-stage-center {
    padding: 0;
}

/* Mobile PIP size */
@media (max-width: 640px) {
    .call-stage[data-call-mode="video"] .call-stage-local-video {
        width: 96px;
        height: 136px;
        bottom: 110px;
        right: 14px;
    }
}

/* ---- Pill restore hint ---- */
.call-active-pill {
    cursor: pointer;
}
.call-active-pill:hover { background: rgba(24,18,46,.98); }

/* Mobile */
@media (max-width: 640px) {
    .call-stage-avatar { width: 120px; height: 120px; font-size: 2.4rem; }
    .call-stage-rings { width: 260px; height: 260px; }
    .call-stage-name { font-size: 1.4rem; }
    .call-stage-viz { height: 48px; }
    .call-stage-btn { width: 58px; height: 58px; }
    .call-stage-btn-hangup,
    .call-stage-btn-decline,
    .call-stage-btn-accept { width: 66px; height: 66px; }
}

/* ========================================================
   STICKER PICKER — shared by messages + comments
   ======================================================== */
.cca-sticker-picker {
    position: fixed;
    left: 50%; bottom: 0;
    transform: translate(-50%, 100%);
    width: min(420px, 100%);
    max-height: 60vh;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.35);
    z-index: 1000;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.cca-sticker-picker.csp-open { transform: translate(-50%, 0); }

.csp-tabs {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}
.csp-tab {
    background: none; border: none;
    color: var(--text-faint); font: 600 .78rem inherit;
    padding: 6px 12px; border-radius: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.csp-tab-active {
    background: var(--link-color); color: #fff;
}
.csp-close {
    margin-left: auto;
    background: none; border: none;
    font-size: 1.4rem; line-height: 1;
    color: var(--text-faint); cursor: pointer;
    padding: 4px 10px;
}

.csp-search-row {
    display: flex; gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}
.csp-search-input {
    flex: 1; padding: 7px 12px;
    border-radius: 18px; border: 1px solid var(--border-color);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-size: .82rem; outline: none;
}
.csp-search-input:focus { border-color: var(--link-color); }
.csp-search-go {
    padding: 7px 16px;
    border-radius: 18px; border: none;
    background: var(--link-color); color: #fff;
    font: 600 .78rem inherit; cursor: pointer;
}

.csp-body {
    flex: 1; min-height: 160px;
    overflow-y: auto;
    padding: 10px;
}

.csp-section-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-faint);
    margin: 6px 2px 4px;
}

.csp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.csp-item {
    position: relative;
    aspect-ratio: 1/1;
    background: rgba(255,255,255,.03);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .12s, border-color .12s;
    -webkit-tap-highlight-color: transparent;
}
.csp-item img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.csp-item:hover { border-color: var(--link-color); transform: scale(1.04); }
.csp-item:active { transform: scale(.95); }

.csp-web-badge {
    position: absolute;
    left: 4px; bottom: 4px;
    font-size: .55rem; font-weight: 700;
    letter-spacing: .5px;
    padding: 2px 5px; border-radius: 4px;
    background: rgba(0,0,0,.65);
    color: #fff;
    pointer-events: none;
}

.csp-loading { opacity: .5; pointer-events: none; }
.csp-loading::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
    border-radius: 10px;
}

.csp-empty {
    text-align: center;
    color: var(--text-faint);
    font-size: .8rem;
    padding: 30px 16px;
    line-height: 1.5;
}

.csp-hint {
    font-size: .68rem; color: var(--text-faint);
    text-align: center;
    padding: 6px; border-top: 1px solid var(--border-color);
    padding-bottom: max(6px, env(safe-area-inset-bottom));
}


/* =========================================================================
   POST VIEWER — editorial dark-glass layout, replaces fullscreen TikTok card.
   Driven by post.php + post-viewer.js.
   ========================================================================= */

.pv-body { background: var(--bg-page); color: var(--text-primary); }

.pv {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px clamp(14px, 3vw, 32px) 120px;
}

/* Layout — hero dominates, dossier is the calmer companion.
   Stacks cleanly on narrow screens. */
.pv-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    gap: clamp(18px, 2.4vw, 32px);
    align-items: start;
}
@media (max-width: 960px) {
    .pv-layout { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- HERO ---------- */
.pv-hero {
    position: relative;
    min-height: 360px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 30% 0%,
            color-mix(in srgb, var(--link-color) 18%, transparent) 0%,
            transparent 65%),
        linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 80%, #000 20%));
    border: 1px solid var(--border-color);
    display: grid; place-items: center;
    overflow: hidden;
    isolation: isolate;
    padding: 18px;
}
.pv-hero-media {
    position: relative; z-index: 1;
    width: 100%;
    display: grid; place-items: center;
    min-height: 320px;
}
.pv-hero-img {
    max-width: 100%;
    max-height: min(74vh, 720px);
    object-fit: contain;
    border-radius: 10px;
    display: block;
    box-shadow: 0 20px 48px -18px rgba(0,0,0,.7);
}

/* Text-only hero (quotes / no image) */
.pv-hero-text {
    position: relative; z-index: 1;
    max-width: 640px;
    padding: 40px 28px;
    text-align: center;
}
.pv-hero-quote-mark {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 96px; line-height: .5;
    color: var(--link-color);
    opacity: .4;
    margin-bottom: 14px;
}
.pv-hero-text-body {
    font-size: clamp(16px, 1.8vw, 22px);
    line-height: 1.55;
    color: var(--text-heading);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

/* ---------- DOSSIER (right column) ---------- */
.pv-dossier {
    position: sticky;
    top: 82px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 2px;
    display: flex; flex-direction: column;
    gap: 18px;
}
@media (max-width: 960px) {
    .pv-dossier { position: static; max-height: none; }
}
.pv-dossier::-webkit-scrollbar { width: 6px; }
.pv-dossier::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

/* Head — title first, author below. Clean hierarchy, no boxes. */
.pv-head { display: flex; flex-direction: column; gap: 12px; }

.pv-title {
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--text-heading);
    margin: 0;
    font-weight: 700;
}

.pv-author {
    display: flex; align-items: center; gap: 10px;
}
.pv-author-av {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--link-color), #60a5fa);
    color: #0b0b19; font-weight: 700;
    display: grid; place-items: center;
    text-decoration: none;
    font-size: 14px;
}
.pv-author-av img { width: 100%; height: 100%; object-fit: cover; }
.pv-author-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pv-author-name {
    font-size: 14px; font-weight: 600;
    color: var(--text-heading);
    text-decoration: none;
}
.pv-author-name:hover { color: var(--link-color); }
.pv-author-sub {
    font-size: 12px;
    color: var(--text-faint);
    letter-spacing: .01em;
}

.pv-follow {
    padding: 6px 14px;
    font-size: 12px; font-weight: 600;
    letter-spacing: .02em;
    background: var(--link-color);
    color: #0b0b19;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: filter .15s, transform .12s;
}
.pv-follow:hover { transform: translateY(-1px); filter: brightness(1.08); }
.pv-follow.is-following {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* Caption — only shows on image posts with body text */
.pv-caption {
    margin: 0;
    font-size: 14px; line-height: 1.6;
    color: var(--text-secondary);
}

/* Meta chips — subtle, only when there's something to say */
.pv-meta {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.pv-meta-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    font-size: 11px; font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.pv-meta-chip:hover { border-color: var(--link-color); color: var(--text-primary); }
.pv-meta-star       { color: #fbbf24; border-color: rgba(251,191,36,.28); }
.pv-meta-star:hover { color: #fbbf24; border-color: rgba(251,191,36,.6); }

/* Tagged friends — avatar stack + inline text */
.pv-tags {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.pv-tags-stack {
    display: flex;
    flex-shrink: 0;
    min-height: 26px;
}
.pv-tags-stack:empty { display: none; }
.pv-tag-chip {
    width: 26px; height: 26px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--bg-elevated);
    background: linear-gradient(135deg, var(--link-color), #60a5fa);
    display: grid; place-items: center;
    color: #0b0b19; font-weight: 700; font-size: 11px;
    text-decoration: none;
    flex-shrink: 0;
    margin-left: -8px;
    transition: transform .15s, z-index 0s;
    position: relative;
}
.pv-tag-chip:first-child { margin-left: 0; }
.pv-tag-chip:hover { transform: translateY(-2px) scale(1.12); z-index: 5; }
.pv-tag-chip img { width: 100%; height: 100%; object-fit: cover; }
.pv-tag-init { font-size: 11px; }
.pv-tags-text {
    flex: 1; min-width: 0;
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-tags-text:empty { display: none; }
.pv-tags-text strong { color: var(--text-heading); font-weight: 600; }
.pv-tag-add {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    display: grid; place-items: center;
    cursor: pointer;
    transition: color .15s, border-color .15s, transform .12s;
}
.pv-tag-add:hover { color: var(--link-color); border-color: var(--link-color); transform: scale(1.08); }

/* ---------- ACTION RAIL (icon-first) ---------- */
.pv-rail {
    display: flex; align-items: center; gap: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}
.pv-rail-grow { flex: 1; }
.pv-act {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    min-width: 42px; min-height: 42px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, transform .12s;
    position: relative;
}
.pv-act:hover { background: var(--bg-elevated); color: var(--text-heading); }
.pv-act:active { transform: scale(.95); }
.pv-act.is-on { color: #f87171; }
.pv-act-menu { color: var(--text-muted); }
.pv-act.pv-pop { animation: pvPop .38s cubic-bezier(.22,1,.36,1); }
@keyframes pvPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* like burst */
.pv-burst-particle {
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px; border-radius: 50%;
    background: #f87171;
    pointer-events: none;
    animation: pvBurst .6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes pvBurst {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; }
}
.pv-tap-heart {
    position: fixed;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none; z-index: 120;
    animation: pvTapHeart .8s cubic-bezier(.22,1,.36,1) forwards;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
@keyframes pvTapHeart {
    0%   { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
    22%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -80%) scale(.85);  opacity: 0; }
}

/* ---------- COMMENTS (inline, no overlay) ---------- */
.pv-comments {
    display: flex; flex-direction: column; gap: 12px;
    padding-top: 4px;
}
.pv-comments-title {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pv-comments-title .pv-count {
    font-size: 11px;
    color: var(--link-color);
    background: color-mix(in srgb, var(--link-color) 14%, transparent);
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0;
}
.pv-comments-list {
    display: flex; flex-direction: column; gap: 14px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
}
.pv-comments-list::-webkit-scrollbar { width: 6px; }
.pv-comments-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.pv-comments-empty,
.pv-comments-loading {
    color: var(--text-faint);
    font-size: 13px;
    text-align: center;
    padding: 22px 10px;
}

.pv-comment { display: flex; gap: 10px; }
.pv-comment-reply { margin-left: 42px; }
.pv-comment-av {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--link-color), #60a5fa);
    color: #0b0b19; font-weight: 700; font-size: 13px;
    display: grid; place-items: center;
    text-decoration: none;
}
.pv-comment-av img { width: 100%; height: 100%; object-fit: cover; }
.pv-comment-body { flex: 1; min-width: 0; }
.pv-comment-user {
    font-size: 13px; font-weight: 600;
    color: var(--text-heading);
    text-decoration: none;
}
.pv-comment-user:hover { color: var(--link-color); }
.pv-comment-handle {
    font-size: 11px;
    color: var(--text-faint);
    margin-left: 4px;
    font-weight: 500;
}
.pv-comment-time {
    font-size: 11px;
    color: var(--text-faint);
    margin-left: 6px;
}
.pv-comment-body p {
    margin: 3px 0 0;
    font-size: 14px; line-height: 1.5;
    color: var(--text-primary);
    word-wrap: break-word;
}
.pv-comment-sticker {
    max-width: 110px; height: auto; display: block;
    margin-top: 6px;
}
.pv-comments-sticker-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.pv-comments-sticker-btn:hover { background: rgba(124,58,237,.1); transform: scale(1.05); }
.pv-comments-sticker-btn:active { transform: scale(.92); }
.pv-comments-sticker-btn svg { display: block; }
.pv-comment-actions {
    display: flex; gap: 12px;
    margin-top: 5px;
    font-size: 11px;
}
.pv-comment-actions button {
    background: none; border: 0;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 0;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color .15s;
}
.pv-comment-actions button:hover { color: var(--text-primary); }
.pv-comment-like.is-on { color: #f87171; }

.pv-comments-input {
    display: flex; gap: 8px; align-items: flex-end;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px 6px 6px 12px;
    transition: border-color .15s;
}
.pv-comments-input:focus-within { border-color: var(--link-color); }
.pv-comments-input textarea {
    flex: 1;
    background: transparent; border: 0; outline: 0;
    color: var(--text-primary);
    font-size: 14px;
    resize: none;
    min-height: 32px; max-height: 120px;
    padding: 6px 0;
    font-family: inherit;
}
.pv-comments-send {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--link-color);
    color: #0b0b19;
    border: 0; border-radius: 10px;
    cursor: pointer;
    transition: transform .12s, filter .15s;
}
.pv-comments-send:hover { transform: scale(1.06); filter: brightness(1.08); }
.pv-comments-send:disabled { opacity: .45; cursor: not-allowed; }
.pv-comments-login {
    text-align: center;
    color: var(--text-faint); font-size: 13px;
    padding: 10px;
}
.pv-comments-login a { color: var(--link-color); font-weight: 600; }

.pv-reply-banner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--link-color) 14%, transparent);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.pv-reply-cancel {
    background: none; border: 0;
    color: var(--text-faint);
    font-size: 16px; cursor: pointer;
    line-height: 1;
}

/* ---------- PREV / NEXT ---------- */
.pv-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin: 34px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.pv-nav-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: border-color .15s, color .15s, background .15s, transform .12s;
}
.pv-nav-link:hover {
    border-color: var(--link-color);
    color: var(--text-heading);
    background: color-mix(in srgb, var(--link-color) 10%, transparent);
    transform: translateY(-1px);
}

/* ---------- MODALS (share / tag) ---------- */
.pv-modal[hidden] { display: none; }
.pv-modal {
    position: fixed; inset: 0;
    z-index: 100;
    display: grid; place-items: center;
}
.pv-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 6, 18, .62);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .22s cubic-bezier(.22,1,.36,1);
}
.pv-modal.is-open .pv-modal-backdrop { opacity: 1; }
.pv-modal-card {
    position: relative;
    width: min(460px, calc(100vw - 24px));
    max-height: min(640px, calc(100vh - 60px));
    background: var(--bg-modal, var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 24px 72px rgba(0,0,0,.6);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(14px) scale(.98);
    opacity: 0;
    transition: transform .22s cubic-bezier(.22,1,.36,1),
                opacity .22s cubic-bezier(.22,1,.36,1);
}
.pv-modal.is-open .pv-modal-card { transform: translateY(0) scale(1); opacity: 1; }

.pv-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}
.pv-modal-head h2 {
    margin: 0;
    font-size: 15px; font-weight: 600;
    color: var(--text-heading);
}
.pv-modal-close {
    background: none; border: 0;
    color: var(--text-faint);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .12s, color .12s;
}
.pv-modal-close:hover { color: var(--text-primary); background: var(--bg-elevated); }

.pv-modal-body {
    flex: 1;
    padding: 12px 14px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
}
.pv-modal-search,
.pv-modal-note {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: 0;
    transition: border-color .15s;
}
.pv-modal-search:focus,
.pv-modal-note:focus { border-color: var(--link-color); }
.pv-modal-note { resize: vertical; min-height: 44px; max-height: 120px; }
.pv-modal-hint { font-size: 12px; color: var(--text-faint); margin: 2px 4px; }
.pv-modal-list {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 80px;
}
.pv-modal-empty {
    text-align: center;
    color: var(--text-faint);
    font-size: 13px;
    padding: 22px 10px;
}

.pv-picker-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s;
}
.pv-picker-row:hover { background: var(--bg-elevated); }
.pv-picker-row.is-checked { background: color-mix(in srgb, var(--link-color) 14%, transparent); }
.pv-picker-row input[type="checkbox"] { accent-color: var(--link-color); width: 16px; height: 16px; }
.pv-picker-av {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--link-color), #60a5fa);
    display: grid; place-items: center;
    color: #0b0b19; font-weight: 700; font-size: 13px;
}
.pv-picker-av img { width: 100%; height: 100%; object-fit: cover; }
.pv-picker-name {
    flex: 1; min-width: 0;
    font-size: 14px;
    color: var(--text-primary);
    display: flex; flex-direction: column;
    line-height: 1.3;
}
.pv-picker-hint { font-size: 11px; color: var(--text-faint); }

.pv-modal-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
}
.pv-modal-count { font-size: 12px; color: var(--text-faint); }
.pv-modal-send {
    padding: 9px 20px;
    background: var(--link-color);
    color: #0b0b19;
    border: 0; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: transform .12s, filter .15s, opacity .15s;
}
.pv-modal-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.pv-modal-send:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- OPTIONS MENU (⋯) ---------- */
.pv-menu-overlay,
.pv-menu { display: none; }
.pv-menu-overlay.is-open {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    z-index: 100;
}
.pv-menu.is-open {
    display: flex; flex-direction: column;
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    transform: translateX(-50%);
    width: min(360px, calc(100vw - 24px));
    background: var(--bg-modal, var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    z-index: 101;
    box-shadow: 0 20px 48px rgba(0,0,0,.55);
    animation: pvMenuRise .22s cubic-bezier(.22,1,.36,1);
}
@keyframes pvMenuRise {
    from { transform: translate(-50%, 12px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}
.pv-menu-item {
    padding: 14px 18px;
    background: transparent; border: 0;
    text-align: left;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background .12s;
}
.pv-menu-item:last-child { border-bottom: 0; }
.pv-menu-item:hover { background: var(--bg-elevated); }
.pv-menu-danger { color: #ef4444; }

/* Mobile polish — give the rail a bit more breathing room */
@media (max-width: 520px) {
    .pv-hero { min-height: 280px; padding: 12px; }
    .pv-hero-img { max-height: 64vh; }
    .pv-title { font-size: 20px; }
    .pv-rail { padding-top: 8px; }
    .pv-act { padding: 10px 10px; }
}

/* ========================================================
   PROFILE — VIEW MODE TOGGLE + TIKTOK-STYLE FEED
   ======================================================== */
.pf-viewmode {
    display: flex; justify-content: center; gap: 6px;
    margin: 12px 0 4px;
    padding: 0 12px;
}
.pf-viewmode-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-faint);
    font: 600 .78rem inherit;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.pf-viewmode-btn.active {
    color: #fff;
    background: var(--link-color);
    border-color: var(--link-color);
}
.pf-viewmode-btn:hover:not(.active) { color: var(--text-primary); }

/* When the feed is active (body carries a marker class the JS sets),
   pin the toggle above the fullscreen feed so the user can always tap
   "Grid" to exit. Before this, the fixed feed covered the toggle and
   there was no escape. */
.pf-body.pf-feed-active .pf-viewmode {
    position: fixed;
    top: calc(var(--cca-header-h, 52px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    margin: 0;
    padding: 4px 6px;
    background: rgba(10,10,24,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

/* Feed: each slide is the full viewport (minus header).
   Scroll-snap locks one post per screen, vertical swipe moves
   between them. Mobile-first; desktop gets a centered column. */
.pf-feed {
    position: fixed;
    left: 0; right: 0;
    top: var(--cca-header-h, 52px);
    bottom: var(--cca-bottom-nav-h, 56px);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    background: #000;
    z-index: 50;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
    .pf-feed {
        position: relative;
        top: 0; bottom: 0; left: auto; right: auto;
        height: calc(100vh - 160px);
        max-width: 480px;
        margin: 12px auto 24px;
        border-radius: 16px;
        border: 1px solid var(--border-color);
    }
    /* On desktop the feed lives in-flow, so the toggle doesn't need
       to be pinned — restore normal positioning. */
    .pf-body.pf-feed-active .pf-viewmode {
        position: static; transform: none;
        margin: 12px 0 4px; background: transparent;
        box-shadow: none; padding: 0 12px;
    }
}

.pf-feed-slide {
    position: relative;
    height: 100%;
    min-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.pf-feed-media {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.pf-feed-media-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.pf-feed-media-img::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(24px);
}
.pf-feed-media-img img {
    position: relative;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    z-index: 1;
}
.pf-feed-media-text {
    background: linear-gradient(160deg, #1a1838, #060614);
    padding: 40px 28px;
}
.pf-feed-media-text p {
    color: #fff; font-size: 1rem;
    line-height: 1.6;
    max-width: 34ch;
    text-align: left;
    font-family: Georgia, "Times New Roman", serif;
    opacity: .92;
}

.pf-feed-gradient {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.pf-feed-caption {
    position: absolute;
    left: 14px; right: 80px;
    bottom: 18px;
    color: #fff;
    font-size: .9rem;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    pointer-events: none;
}
.pf-feed-caption strong { display: block; font-size: 1rem; }
.pf-feed-genre {
    display: inline-block;
    margin-top: 4px;
    font-size: .65rem; font-weight: 600;
    padding: 2px 7px; border-radius: 10px;
    background: rgba(255,255,255,.18);
    color: #fff;
}

.pf-feed-rail {
    position: absolute;
    right: 8px; bottom: 18px;
    display: flex; flex-direction: column;
    gap: 14px;
    align-items: center;
}
.pf-feed-act {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none; border: none;
    color: #fff;
    cursor: pointer;
    font: 600 .65rem inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.pf-feed-act svg { transition: transform .12s; }
.pf-feed-act:active svg { transform: scale(.85); }
.pf-feed-act-like.is-on { color: #ef4444; }

/* ============================================================
   OtakuHub: "Airing this season" grid + watchlist page.
   Seasonal cards live in an .ex-scroll-row alongside CCA's other
   horizontal carousels. Watchlist page reuses the .seasonal-card
   layout in a responsive grid.
   ============================================================ */
.seasonal-card {
    position: relative;
    flex: 0 0 168px;
    scroll-snap-align: start;
    background: rgba(20, 22, 28, .7);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.seasonal-cover {
    display: block;
    aspect-ratio: 2 / 3;
    background: #0d0f15;
    overflow: hidden;
}
.seasonal-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.seasonal-cover:hover img { transform: scale(1.04); }
.seasonal-cover-blank { width: 100%; height: 100%; background: linear-gradient(135deg, #1c2030, #0d0f15); }
.seasonal-meta {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.seasonal-title {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.05em;
}
.seasonal-line {
    font-size: .7rem;
    color: rgba(255, 255, 255, .65);
    display: flex;
    gap: 8px;
    align-items: center;
}
.seasonal-cd {
    font-variant-numeric: tabular-nums;
    color: #ffd166;
    font-weight: 600;
}
.seasonal-stats { gap: 10px; }
.seasonal-score { color: #ffd166; font-weight: 600; }
.seasonal-eps   { color: rgba(255,255,255,.55); }

.seasonal-add {
    margin-top: 4px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    border-radius: 8px;
    font: 600 .72rem inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.seasonal-add:hover { background: rgba(255, 255, 255, .1); }
.seasonal-add:disabled { opacity: .55; cursor: wait; }
.seasonal-add.is-on-list {
    background: rgba(99, 132, 255, .18);
    border-color: rgba(99, 132, 255, .55);
    color: #c4d0ff;
}

.seasonal-empty {
    padding: 20px;
    color: rgba(255, 255, 255, .5);
    font-size: .85rem;
}

/* "Up next on your list" — compact strip rendered above the seasonal
   carousel. Smaller than .seasonal-card so it reads as a personal feed
   rather than another browse row. */
.upnext-card {
    position: relative;
    flex: 0 0 132px;
    scroll-snap-align: start;
    background: rgba(20,22,28,.7);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.upnext-cover {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    background: #0d0f15;
    overflow: hidden;
}
.upnext-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.upnext-cover:hover img { transform: scale(1.04); }
.upnext-ep {
    position: absolute;
    top: 6px; left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.7);
    color: #ffd166;
    font: 700 .65rem inherit;
    letter-spacing: .04em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.upnext-meta { padding: 8px 10px 10px; }
.upnext-title {
    font: 600 .76rem inherit;
    margin: 0 0 3px;
    color: #fff;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2em;
}
.upnext-cd {
    font: 700 .68rem inherit;
    color: #ffd166;
    font-variant-numeric: tabular-nums;
}

/* OtakuHub section-head action links (e.g. "This Week →"). */
.ex-section-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.ex-section-more {
    color: #6384ff;
    font: 600 .82rem inherit;
    text-decoration: none;
    white-space: nowrap;
}
.ex-section-more:hover { text-decoration: underline; }

/* "Watch on …" pills: AniList-sourced streaming links. Each pill is a
   real <a target=_blank> so it pre-empts the card's other handlers. */
.seasonal-watch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.seasonal-watch-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font: 700 .62rem inherit;
    letter-spacing: .02em;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .12s, background .15s, border-color .15s;
    white-space: nowrap;
}
.seasonal-watch-pill:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}
/* Brand tints for the most common services. Subtle so they read as
   informative rather than as buttons that dominate the card. */
.seasonal-watch-pill[data-site="crunchyroll"]        { background: rgba(244,117,33,.18); border-color: rgba(244,117,33,.5); color: #ffb47a; }
.seasonal-watch-pill[data-site="netflix"]            { background: rgba(229,9,20,.18);  border-color: rgba(229,9,20,.5);  color: #ff8a8a; }
.seasonal-watch-pill[data-site="hidive"]             { background: rgba(0,184,201,.18); border-color: rgba(0,184,201,.5); color: #6fe5f0; }
.seasonal-watch-pill[data-site="amazon prime video"] { background: rgba(0,168,225,.18); border-color: rgba(0,168,225,.5); color: #7cd6ff; }
.seasonal-watch-pill[data-site="hulu"]               { background: rgba(28,231,131,.18);border-color: rgba(28,231,131,.5);color: #8fefbe; }
.seasonal-watch-pill[data-site="disney plus"]        { background: rgba(17,60,207,.22); border-color: rgba(17,60,207,.55);color: #9aaaff; }
.seasonal-watch-pill[data-site="youtube"]            { background: rgba(255,0,0,.18);   border-color: rgba(255,0,0,.5);   color: #ff8a8a; }

/* ---------- My Watchlist page ---------- */
.wl-page { padding: 16px 18px 80px; max-width: 1200px; margin: 0 auto; }
.wl-page h1 {
    font-size: 1.4rem;
    margin: 8px 0 4px;
}
.wl-sub { color: rgba(255,255,255,.55); font-size: .85rem; margin-bottom: 16px; }
.wl-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 14px;
}
.wl-tab {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.6);
    padding: 8px 12px;
    font: 600 .82rem inherit;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.wl-tab.is-active {
    color: #fff;
    border-bottom-color: #6384ff;
}
.wl-tab .wl-tab-count {
    margin-left: 6px;
    font-size: .68rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    font-weight: 700;
}
.wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.wl-empty {
    padding: 40px 16px;
    text-align: center;
    color: rgba(255,255,255,.5);
    font-size: .9rem;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 14px;
}
.wl-empty a { color: #6384ff; text-decoration: none; }

.wl-card-progress {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem;
    color: rgba(255,255,255,.7);
    margin-top: 2px;
}
.wl-card-progress .wl-step {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: #fff;
    font: 700 .8rem inherit;
    cursor: pointer;
    line-height: 1;
}
.wl-card-progress .wl-step:hover { background: rgba(255,255,255,.1); }
.wl-card-progress .wl-step:disabled { opacity: .35; cursor: not-allowed; }
.wl-card-progress .wl-progress-text { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }

.wl-card-actions {
    display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;
}
.wl-card-actions select,
.wl-card-actions button {
    flex: 1 0 auto;
    padding: 6px 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    color: #fff;
    font: 600 .68rem inherit;
    cursor: pointer;
}
.wl-card-actions button.wl-remove {
    color: #ff8a8a;
    border-color: rgba(255, 90, 90, .3);
}
.wl-card-actions button.wl-remove:hover {
    background: rgba(255, 90, 90, .1);
}

/* ============================================================
   This Week in Anime — schedule page (/anime-schedule.php).
   Day-grouped vertical timeline. Each row is a horizontal record:
   time | cover | title+meta+pills | add button.
   ============================================================ */
.sched-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 18px 80px;
}
.sched-head h1 { font-size: 1.4rem; margin: 4px 0 6px; }
.sched-sub    { color: rgba(255,255,255,.55); font-size: .85rem; margin: 0 0 14px; }

.sched-day-nav {
    position: sticky;
    top: 56px;            /* sit just under the navbar */
    z-index: 10;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 0;
    margin-bottom: 6px;
    background: linear-gradient(180deg, rgba(8,9,12,.95), rgba(8,9,12,.85));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    scrollbar-width: none;
}
.sched-day-nav::-webkit-scrollbar { display: none; }
.sched-day-tab {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
    font: 600 .78rem inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, border-color .15s;
}
.sched-day-tab:hover { background: rgba(255,255,255,.1); }
.sched-day-tab.is-today {
    background: rgba(99, 132, 255, .18);
    border-color: rgba(99, 132, 255, .55);
    color: #c4d0ff;
}
.sched-day-count {
    font-size: .65rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
    font-weight: 700;
}

.sched-day {
    margin: 18px 0;
    scroll-margin-top: 110px;
}
.sched-day-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sched-day.is-today .sched-day-title { color: #c4d0ff; border-bottom-color: rgba(99,132,255,.45); }

.sched-row {
    display: grid;
    grid-template-columns: 64px 60px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.sched-row.is-aired { opacity: .5; }
.sched-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #ffd166;
    font-size: .82rem;
    text-align: right;
}
.sched-cover {
    display: block;
    width: 60px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    background: #0d0f15;
}
.sched-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sched-info { min-width: 0; }
.sched-title {
    font-size: .9rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sched-meta {
    font-size: .72rem;
    color: rgba(255,255,255,.6);
    margin: 3px 0;
}
.sched-info .seasonal-watch-row { margin-top: 4px; }

.sched-add {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    padding: 7px 12px;
    border-radius: 8px;
    font: 700 .72rem inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.sched-add:hover { background: rgba(255,255,255,.12); }
.sched-add:disabled { opacity: .55; cursor: wait; }
.sched-add.is-on-list {
    background: rgba(99,132,255,.18);
    border-color: rgba(99,132,255,.55);
    color: #c4d0ff;
}

.sched-empty,
.sched-loading {
    padding: 40px 16px;
    text-align: center;
    color: rgba(255,255,255,.5);
    font-size: .9rem;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 14px;
}

@media (max-width: 600px) {
    .sched-row { grid-template-columns: 56px 48px 1fr auto; gap: 10px; }
    .sched-cover { width: 48px; height: 72px; }
    .sched-time { font-size: .76rem; }
    .sched-add { padding: 6px 9px; }
}

/* ============================================================
   WATCH PAGE — AnimeKai-style two-column layout
   Left:  breadcrumb + player + action toolbar
   Right: episodes panel (search / sort / range / grid)
   ============================================================ */

:root {
    --w-accent: #f97316;            /* orange — current ep + active toggle */
    --w-accent-soft: rgba(249,115,22,.18);
    --w-panel: #15151a;             /* episodes panel background */
    --w-panel-border: rgba(255,255,255,.06);
    --w-row-bg: #0f0f12;            /* sub-rows inside the panel */
}

.watch-page { background: #0a0a0c; }

/* Override the older single-column desktop rules — those were keyed
   to .w-info / .w-episodes / .w-controls which no longer exist in
   this layout, but the .w-player-wrap rule is still active. */
@media (min-width: 1024px) {
    .w-player-wrap { width: 100%; max-width: none; margin: 0; }
}
@media (min-width: 1800px) {
    .w-player-wrap { width: 100%; }
}

.w-crumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px;
    padding: 14px 24px 10px;
    font-size: .82rem;
    color: var(--text-faint, #9aa0a6);
    max-width: 1700px; margin: 0 auto;
}
.w-crumb-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--text-faint, #9aa0a6);
    text-decoration: none;
}
.w-crumb-link:hover { color: var(--text-primary, #fff); }
.w-crumb-sep { color: rgba(255,255,255,.18); }
.w-crumb-current {
    color: var(--text-primary, #fff);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 60vw;
}

.w-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    padding: 0 24px 80px;
    max-width: 1700px;
    margin: 0 auto;
}
.w-main { min-width: 0; }
.w-aside { min-width: 0; }

/* Player frame — modest border-radius now that it's inside a column */
.w-main .w-player-wrap {
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

/* Skip Intro / Skip Outro pill — bottom-right inside the player */
.w-skip {
    position: absolute;
    right: 14px;
    bottom: 70px;
    z-index: 6;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    font-size: .82rem; font-weight: 600;
    color: #fff;
    background: rgba(20,20,24,.85);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .15s var(--ease-out, ease), background .15s ease, border-color .15s ease;
}
.w-skip:hover {
    background: rgba(30,30,36,.95);
    border-color: var(--w-accent);
    transform: translateY(-1px);
}

/* ---- Action toolbar ---- */
.w-acts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    margin-top: 10px;
    padding: 6px 4px;
}
.w-act {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 11px;
    background: transparent;
    color: var(--text-faint, #9aa0a6);
    border: none;
    border-radius: 6px;
    font-size: .8rem; font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.w-act:hover { background: rgba(255,255,255,.05); color: var(--text-primary, #fff); }
.w-act:disabled { opacity: .35; cursor: not-allowed; }
.w-act:disabled:hover { background: transparent; }
.w-act svg { color: inherit; }
.w-act-on { color: var(--w-accent); }
.w-act-on:hover { color: var(--w-accent); background: var(--w-accent-soft); }
.w-act-servers { display: none; }   /* server picker not surfaced in toolbar yet */

/* ---- Sub/Dub segmented toggle (lives in .w-acts) ---- */
.w-audio-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 3px;
    margin-right: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
}
.w-audio-toggle[hidden] { display: none; }
.w-audio-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-faint, #9aa0a6);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.w-audio-btn:hover:not(:disabled):not(.is-on) {
    background: rgba(255,255,255,.06);
    color: var(--text-primary, #fff);
}
.w-audio-btn.is-on {
    background: var(--w-accent, var(--link-color, #7c3aed));
    color: #fff;
    box-shadow: 0 4px 12px rgba(124,58,237,.35);
}
.w-audio-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ---- Episodes sidebar panel ---- */
.w-eps-panel {
    background: var(--w-panel);
    border: 1px solid var(--w-panel-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 140px);
}
.w-eps-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--w-panel-border);
}
.w-eps-title {
    margin: 0;
    font-size: 1rem; font-weight: 700; letter-spacing: .01em;
    color: var(--text-primary, #fff);
}
.w-eps-find {
    height: 30px;
    padding: 0 10px;
    background: var(--w-row-bg);
    border: 1px solid var(--w-panel-border);
    border-radius: 6px;
    color: var(--text-primary, #fff);
    font-size: .82rem;
    outline: none;
    transition: border-color .15s ease;
    min-width: 0;
}
.w-eps-find:focus { border-color: var(--w-accent); }
.w-eps-find::placeholder { color: rgba(255,255,255,.3); }
.w-eps-sort { display: inline-flex; gap: 4px; }
.w-eps-sort-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--w-row-bg);
    border: 1px solid var(--w-panel-border);
    border-radius: 6px;
    color: var(--text-faint, #9aa0a6);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.w-eps-sort-btn:hover { color: var(--text-primary, #fff); }
.w-eps-sort-btn.active {
    color: var(--w-accent);
    border-color: var(--w-accent);
    background: var(--w-accent-soft);
}

.w-eps-range {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--w-panel-border);
}

/* Episode grid — keep .w-ep-btn from the existing CSS but tighten
   for the panel layout and switch the active-state color to orange. */
.w-eps-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 12px 14px;
    overflow-y: auto;
}
.w-eps-grid .w-ep-btn {
    width: auto; height: 36px;
    padding: 0;
    background: var(--w-row-bg);
    color: var(--text-primary, #fff);
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.w-eps-grid .w-ep-btn:hover { background: rgba(255,255,255,.06); }
.w-eps-grid .w-ep-btn.active {
    background: var(--w-accent);
    color: #fff;
    border-color: var(--w-accent);
}

/* Range buttons inside the new panel */
.w-eps-range .w-range-btn {
    background: var(--w-row-bg);
    border: 1px solid var(--w-panel-border);
    color: var(--text-faint, #9aa0a6);
}
.w-eps-range .w-range-btn.active {
    color: var(--w-accent);
    border-color: var(--w-accent);
    background: var(--w-accent-soft);
}

/* ---- Mobile: stack columns ---- */
@media (max-width: 1023px) {
    .w-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 12px 80px;
        gap: 12px;
    }
    .w-aside { order: 2; }
    .w-eps-panel { max-height: 60vh; }
    .w-crumb { padding: 12px 14px 8px; font-size: .78rem; }
    .w-acts { gap: 2px; }
    .w-act { padding: 7px 8px; font-size: .74rem; }
    .w-act span { display: none; }   /* icons only on small screens */
    .w-act svg { width: 16px; height: 16px; }
    .w-act-on span { display: inline; }   /* show label for active toggles */
    .w-skip { right: 10px; bottom: 60px; padding: 7px 11px; font-size: .76rem; }
}

@media (max-width: 480px) {
    .w-eps-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   OTAKUHUB EXPLORE — homepage hero stats, carousel nav, Top-10
   ============================================================ */

/* ---- Hero stats strip (Episodes / On Watchlist / Score) ---- */
.ex-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 14px 0 16px;
    max-width: 360px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ex-hero-stat {
    padding: 10px 12px;
    background: rgba(20,20,24,.65);
    display: flex; flex-direction: column; gap: 2px;
}
.ex-hero-stat-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.5);
}
.ex-hero-stat-value {
    font-size: .98rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ---- Hero manual nav (prev / counter / next) ---- */
.ex-hero-nav {
    position: absolute;
    right: 22px;
    bottom: 28px;
    z-index: 5;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ex-hero-nav-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.85);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ex-hero-nav-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.ex-hero-counter {
    font-size: .76rem;
    color: rgba(255,255,255,.7);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    min-width: 38px;
    text-align: center;
}

/* ---- Top-10 list ---- */
.ex-section-top10 .ex-top10-pulse {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 0 0 rgba(249,115,22,.6);
    animation: ex-top10-pulse 2s ease-out infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes ex-top10-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(249,115,22,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
    100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

.ex-top10-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ex-top10-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px;
    background: rgba(20,20,24,.55);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 10px;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.ex-top10-row:hover {
    border-color: rgba(249,115,22,.35);
    transform: translateY(-1px);
    background: rgba(28,28,34,.7);
}
.ex-top10-rank {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    color: rgba(255,255,255,.18);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    /* For ranks 1-3 we punch up the rank chrome — visual hierarchy
       like AnimeKai's mock but with the CCA orange. */
}
.ex-top10-rank-top {
    color: #f97316;
    text-shadow: 0 0 18px rgba(249,115,22,.35);
}
.ex-top10-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.ex-top10-thumb {
    width: 48px; height: 64px;
    border-radius: 6px;
    background: #1a1a1f center/cover no-repeat;
    flex-shrink: 0;
}
.ex-top10-body {
    min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.ex-top10-title {
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
}
.ex-top10-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem;
    color: rgba(255,255,255,.55);
}
.ex-top10-pill {
    display: inline-block;
    padding: 1px 7px;
    background: rgba(249,115,22,.16);
    color: #fdba74;
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ex-top10-dot { color: rgba(255,255,255,.3); }

/* ---- Mobile: one column for Top-10, smaller hero stats card ---- */
@media (max-width: 768px) {
    .ex-top10-list { grid-template-columns: 1fr; }
    .ex-top10-rank { font-size: 1.7rem; }
}

/* ============================================================
   OTAKUHUB EXPLORE — full-bleed AnimeKai-style hero
   These selectors override the older compact-hero rules above.
   ============================================================ */

/* Edge-to-edge hero — kill the page padding AND the 1200px max-width
   cap that was squeezing the hero on wide viewports. The .ex container
   inherits a `max-width: 1200px; margin: 0 auto` from the global rule
   (style.css:4908); that cap is meant for narrow reading-column
   layouts and it makes the hero look squeezed. With it removed the
   hero stretches viewport-edge to viewport-edge.

   Inner sections (Continue Watching, trending rows, etc.) still get
   sensible side padding from the `.ex > section.ex-section` rule
   below, so they don't bleed into the very edges either. */
body.explore-page .ex {
    max-width: none;
    margin: 0;
    padding: 0 0 80px;
}
body.explore-page .ex > section.ex-section,
body.explore-page .ex > .ex-search-wrap,
body.explore-page .ex > .ex-underhero { padding-left: 24px; padding-right: 24px; }

.ex-hero {
    position: relative;
    height: 72vh;
    min-height: 460px;
    max-height: 720px;
    overflow: hidden;
    border-radius: 0;
}
.ex-hero-bg {
    background-position: center 28%;
}
.ex-hero-bg-blur {
    background-position: center 28%;
    /* Wider feather + stronger blur on desktop where the hero is
       much taller and the morph needs more room to look natural. */
    width: 50%;
    left: -8%;
    filter: blur(90px) saturate(1.1);
}
.ex-hero-gradient {
    background:
        linear-gradient(to top, #060612 0%, rgba(6,6,18,.92) 18%, rgba(6,6,18,.55) 45%, rgba(6,6,18,.05) 80%, transparent 100%),
        linear-gradient(to right, rgba(6,6,18,.85) 0%, rgba(6,6,18,.45) 35%, transparent 60%);
}
.ex-hero-content {
    padding: 0 56px 56px;
    max-width: 720px;
    z-index: 2;
}

/* AnimeKai-style colored badge pills next to the title. */
.ex-hero-badges {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 14px;
}
.ex-hero-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
}
.ex-hero-badge-ep   { background: #f97316; }      /* orange — CCA accent */
.ex-hero-badge-on   { background: #16a34a; }      /* green — currently on */
.ex-hero-badge-type { background: #2563eb; }      /* blue  — media type */
.ex-hero-badge svg  { display: block; }

/* Title — much bigger; up to 2 lines. */
.ex-hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    -webkit-line-clamp: 2;
    margin: 0 0 10px;
    text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.ex-hero-desc {
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255,255,255,.78);
    margin: 0 0 20px;
    max-width: 560px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dark stats card with internal dividers — Rating / Release / Quality. */
.ex-hero-stats {
    display: inline-flex;
    align-items: stretch;
    margin: 0 0 20px;
    background: rgba(8,8,12,.78);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ex-hero-stat {
    padding: 10px 22px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 100px;
}
.ex-hero-stat-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,.07);
}
.ex-hero-stat-label {
    font-size: .66rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.ex-hero-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Big orange WATCH NOW button + bookmark icon. */
.ex-hero-actions {
    display: flex; align-items: center; gap: 12px;
    margin-top: 4px;
}
.ex-hero-watch-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px;
    background: #f97316;
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(249,115,22,.32);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ex-hero-watch-btn:hover {
    background: #ea7218;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(249,115,22,.45);
}
.ex-hero-watch-btn:active { transform: translateY(0); }
.ex-hero-bookmark {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(8,8,12,.78);
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ex-hero-bookmark:hover {
    border-color: rgba(249,115,22,.5);
    color: #f97316;
}
.ex-hero-bookmark[aria-pressed="true"] {
    background: rgba(249,115,22,.15);
    border-color: #f97316;
    color: #f97316;
}
.ex-hero-bookmark[aria-pressed="true"] svg { fill: currentColor; }

/* Bottom-right pagination cluster with dots. */
.ex-hero-nav {
    position: absolute;
    right: 32px;
    bottom: 40px;
    z-index: 5;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    background: rgba(8,8,12,.6);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ex-hero-dots {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 4px;
}
.ex-hero-dot {
    width: 6px; height: 6px;
    background: rgba(255,255,255,.3);
    border: none;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.ex-hero-dot.is-active {
    width: 18px;
    background: #f97316;
}
.ex-hero-nav-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.85);
    border-radius: 999px;
    cursor: pointer;
}
.ex-hero-nav-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.ex-hero-counter {
    font-size: .76rem;
    color: rgba(255,255,255,.7);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    min-width: 38px;
    text-align: center;
}

/* ============================================================
   UNDER-HERO STRIP — share row + Top Trending sidebar
   ============================================================ */
.ex-underhero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    margin-top: 28px;
    align-items: stretch;
}

/* Share strip (left). */
.ex-share {
    display: flex; align-items: center; gap: 22px;
    padding: 18px 22px;
    background: rgba(20,20,26,.55);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;
    flex-wrap: wrap;
}
.ex-share-text { display: flex; flex-direction: column; gap: 2px; }
.ex-share-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    display: inline-flex; align-items: center; gap: 7px;
}
.ex-share-sub {
    margin: 0;
    font-size: .8rem;
    color: rgba(255,255,255,.55);
}
.ex-share-btns { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; justify-content: flex-end; }
.ex-share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
}
.ex-share-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ex-share-fb       { background: #1877f2; }
.ex-share-bird     { background: #111; border: 1px solid #333; }
.ex-share-discord  { background: #5865f2; }
.ex-share-reddit   { background: #ff4500; }
.ex-share-msg      { background: #25d366; color: #fff; }

/* Trending sidebar (right). */
.ex-trending-side {
    background: rgba(20,20,26,.55);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;
    padding: 14px 16px 8px;
    display: flex; flex-direction: column;
}
.ex-trending-side-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.ex-trending-side-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    display: inline-flex; align-items: center; gap: 8px;
}
.ex-trending-side-pulse {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 0 0 rgba(249,115,22,.6);
    animation: ex-top10-pulse 2s ease-out infinite;
}
.ex-trending-side-now {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    background: rgba(249,115,22,.15);
    color: #f97316;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
}
.ex-trending-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.ex-trending-side-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background .15s ease;
}
.ex-trending-side-row:hover { background: rgba(255,255,255,.04); }
.ex-trending-side-rank {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    color: rgba(255,255,255,.18);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
}
.ex-trending-side-rank.is-top {
    color: #f97316;
    text-shadow: 0 0 14px rgba(249,115,22,.35);
}
.ex-trending-side-card {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.ex-trending-side-thumb {
    width: 40px; height: 56px;
    border-radius: 4px;
    background: #1a1a1f center/cover no-repeat;
    flex-shrink: 0;
}
.ex-trending-side-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ex-trending-side-title {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.ex-trending-side-meta {
    display: flex; gap: 6px; align-items: center;
    font-size: .7rem;
    color: rgba(255,255,255,.5);
}
.ex-trending-side-pill {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(37,99,235,.18);
    color: #93c5fd;
    border-radius: 3px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ============================================================
   RESPONSIVE — tablet + mobile
   ============================================================ */
@media (max-width: 1023px) {
    .ex-hero { height: 60vh; min-height: 380px; }
    .ex-hero-content { padding: 0 32px 36px; max-width: 100%; }
    .ex-hero-title { font-size: 2rem; }
    .ex-hero-desc { font-size: .85rem; }
    .ex-hero-stat { padding: 8px 16px; min-width: 80px; }
    .ex-hero-stat-value { font-size: .92rem; }
    .ex-hero-nav { right: 18px; bottom: 22px; }
    .ex-underhero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
    .ex-hero { height: 56vh; min-height: 360px; max-height: none; }
    .ex-hero-content { padding: 0 18px 24px; }
    .ex-hero-title { font-size: 1.6rem; }
    .ex-hero-desc { -webkit-line-clamp: 2; }
    .ex-hero-stats { width: 100%; }
    .ex-hero-stat { flex: 1; padding: 8px 10px; min-width: 0; }
    .ex-hero-watch-btn { padding: 11px 18px; font-size: .82rem; }
    .ex-hero-bookmark { width: 40px; height: 40px; }
    .ex-hero-nav {
        right: 14px; bottom: 14px;
        gap: 6px; padding: 5px 8px;
    }
    .ex-hero-dots { display: none; }
    .ex-share { padding: 14px 16px; gap: 14px; }
    .ex-share-btns { justify-content: flex-start; }
    .ex-share-btn span { display: none; }
    .ex-share-btn { padding: 9px; }
}

/* ============================================================
   OTAKUHUB POLISH PASS — visual depth + motion (no layout changes)
   ============================================================ */

/* Richer hero vignette: subtle top darkening, deeper bottom blend,
   and a left-side accent so the content column reads cleanly even
   on bright/busy backgrounds. */
.ex-hero-gradient {
    background:
        radial-gradient(ellipse 100% 80% at 25% 100%, rgba(249,115,22,.08) 0%, transparent 60%),
        linear-gradient(to top, #060612 0%, rgba(6,6,18,.94) 22%, rgba(6,6,18,.55) 50%, rgba(6,6,18,.05) 82%, transparent 100%),
        linear-gradient(to right, rgba(6,6,18,.88) 0%, rgba(6,6,18,.45) 38%, transparent 65%),
        linear-gradient(to bottom, rgba(6,6,18,.55) 0%, transparent 22%);
}

/* Slide-change reveal: each slide fades + slides up the content
   stack. Triggered by JS toggling .is-entering on .ex-hero-content
   when renderHero runs. */
@keyframes ex-hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ex-hero-content.is-entering > * {
    animation: ex-hero-rise .55s cubic-bezier(.2, .65, .25, 1) both;
}
.ex-hero-content.is-entering > .ex-hero-badges  { animation-delay: .00s; }
.ex-hero-content.is-entering > .ex-hero-title   { animation-delay: .06s; }
.ex-hero-content.is-entering > .ex-hero-desc    { animation-delay: .12s; }
.ex-hero-content.is-entering > .ex-hero-stats   { animation-delay: .18s; }
.ex-hero-content.is-entering > .ex-hero-actions { animation-delay: .24s; }

/* Badges: gradient depth + subtle inner highlight for that AnimeKai
   "stickered onto the page" feel. Hover scale gives them life. */
.ex-hero-badge {
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 2px 6px rgba(0,0,0,.32);
    transition: transform .18s cubic-bezier(.2, .65, .25, 1), filter .18s ease;
}
.ex-hero-badge:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.1); }
.ex-hero-badge-ep   { background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%); }
.ex-hero-badge-on   { background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%); }
.ex-hero-badge-type { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%); }

/* Title: tighter tracking + subtle gradient highlight on the white. */
.ex-hero-title {
    background: linear-gradient(180deg, #ffffff 0%, #e8e8ed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback so the gradient never makes the text invisible if the
       browser drops `background-clip: text` (older Firefox, some
       embedded webviews). */
    color: #fff;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .ex-hero-title { color: transparent; }
}
.ex-hero-desc { color: rgba(255,255,255,.82); }

/* Stats card: warmer card bg, brighter labels for hierarchy. */
.ex-hero-stats {
    background: linear-gradient(180deg, rgba(14,14,20,.85) 0%, rgba(8,8,12,.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 4px 18px rgba(0,0,0,.35);
}
.ex-hero-stat-label { color: rgba(255,255,255,.5); }
.ex-hero-stat-value {
    background: linear-gradient(180deg, #ffffff 0%, #d4d4d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .ex-hero-stat-value { color: transparent; }
}

/* WATCH NOW: gradient + breathing glow halo so it pulls focus. */
@keyframes ex-watch-pulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(249,115,22,.32), 0 0 0 0 rgba(249,115,22,.45); }
    50%      { box-shadow: 0 8px 26px rgba(249,115,22,.42), 0 0 0 8px rgba(249,115,22,0); }
}
.ex-hero-watch-btn {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
    animation: ex-watch-pulse 2.6s ease-in-out infinite;
    transition: transform .18s cubic-bezier(.2, .65, .25, 1), filter .18s ease;
}
.ex-hero-watch-btn:hover {
    background: linear-gradient(135deg, #fdb673 0%, #fb923c 50%, #f97316 100%);
    animation-play-state: paused;
    filter: brightness(1.06);
}
.ex-hero-watch-btn svg {
    transition: transform .25s cubic-bezier(.2, .65, .25, 1);
}
.ex-hero-watch-btn:hover svg { transform: translateX(2px); }

/* Bookmark: filled icon when pressed, ripple on click. */
.ex-hero-bookmark[aria-pressed="true"] svg path { fill: currentColor; }
.ex-hero-bookmark {
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .15s cubic-bezier(.2, .65, .25, 1);
}
.ex-hero-bookmark:active { transform: scale(.92); }

/* Pagination dots: bouncier expand on active. */
.ex-hero-dot {
    transition:
        width .35s cubic-bezier(.2, .9, .25, 1),
        background .25s ease;
}
.ex-hero-dot.is-active {
    background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
    box-shadow: 0 0 12px rgba(249,115,22,.55);
}

/* Trending sidebar: row hover slides a soft orange wash from left,
   thumb scales subtly. Premium-feeling without being noisy. */
.ex-trending-side-row {
    position: relative;
    overflow: hidden;
    transition: background .2s ease;
}
.ex-trending-side-row::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(249,115,22,.12) 0%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.2, .65, .25, 1);
    pointer-events: none;
}
.ex-trending-side-row:hover::before { transform: translateX(0); }
.ex-trending-side-row:hover { background: transparent; }
.ex-trending-side-thumb {
    transition: transform .25s cubic-bezier(.2, .65, .25, 1);
}
.ex-trending-side-row:hover .ex-trending-side-thumb {
    transform: scale(1.06);
}
.ex-trending-side-rank.is-top {
    background: linear-gradient(180deg, #fb923c 0%, #f97316 60%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f97316;
    text-shadow: 0 0 18px rgba(249,115,22,.45);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .ex-trending-side-rank.is-top { color: transparent; }
}

/* Share buttons: subtle gradient + lift on hover, icon scales. */
.ex-share-btn {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 2px 8px rgba(0,0,0,.2);
    transition:
        transform .18s cubic-bezier(.2, .65, .25, 1),
        filter .18s ease,
        box-shadow .18s ease;
}
.ex-share-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 6px 16px rgba(0,0,0,.32);
}
.ex-share-btn svg { transition: transform .2s ease; }
.ex-share-btn:hover svg { transform: scale(1.15); }
.ex-share-fb       { background: linear-gradient(135deg, #2563eb 0%, #1877f2 100%); }
.ex-share-bird     { background: linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 100%); border-color: #2a2a2a; }
.ex-share-discord  { background: linear-gradient(135deg, #6b73f5 0%, #5865f2 100%); }
.ex-share-reddit   { background: linear-gradient(135deg, #ff5722 0%, #ff4500 100%); }
.ex-share-msg      { background: linear-gradient(135deg, #34d97a 0%, #25d366 100%); }

/* Underhero panel chrome: glassier, subtle border highlight on hover. */
.ex-share, .ex-trending-side {
    background: linear-gradient(180deg, rgba(24,24,32,.62) 0%, rgba(16,16,22,.55) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 4px 24px rgba(0,0,0,.25);
    transition: border-color .25s ease;
}
.ex-share:hover, .ex-trending-side:hover {
    border-color: rgba(249,115,22,.18);
}
.ex-share-title svg { filter: drop-shadow(0 0 6px rgba(249,115,22,.4)); }

/* Hero progress fill: gradient instead of flat. */
.ex-hero-progress-fill {
    background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #fed7aa 100%);
    box-shadow: 0 0 10px rgba(249,115,22,.45);
}

/* Hero nav cluster: deeper glass + soft inner highlight. */
.ex-hero-nav {
    background: linear-gradient(180deg, rgba(14,14,20,.7) 0%, rgba(8,8,12,.75) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 6px 22px rgba(0,0,0,.35);
}
.ex-hero-nav-btn {
    transition: background .18s ease, color .18s ease, transform .15s ease;
}
.ex-hero-nav-btn:active { transform: scale(.92); }

/* Initial page load: hero content does the rise animation once. */
.ex-hero-content { animation: ex-hero-rise .65s cubic-bezier(.2, .65, .25, 1) both; }

/* Section heads (already-rendered scroll rows) — give them a subtle
   underline accent that matches the OtakuHub orange identity. */
body.explore-page .ex-section-pulse {
    background: #f97316;
    box-shadow: 0 0 0 0 rgba(249,115,22,.6);
    animation: ex-top10-pulse 2s ease-out infinite;
}

/* ============================================================
   OTAKUHUB POLISH PASS 2 — picture-first hero, restrained content
   The previous pass made the title and stats compete with the
   anime art. AnimeKai keeps content reserved and lets the art
   carry the frame; these overrides shrink the content stack and
   let the right side of the image breathe through.
   ============================================================ */

/* Lighter right-side gradient so the character art shows through.
   The previous version walled off the right with a 60%-opaque dark
   pass — now it fades much faster. Keep the bottom blend so the
   transition into the page below stays clean. */
.ex-hero-gradient {
    background:
        radial-gradient(ellipse 80% 60% at 18% 100%, rgba(249,115,22,.06) 0%, transparent 55%),
        linear-gradient(to top, #060612 0%, rgba(6,6,18,.88) 18%, rgba(6,6,18,.35) 45%, transparent 75%),
        linear-gradient(to right, rgba(6,6,18,.78) 0%, rgba(6,6,18,.25) 32%, transparent 52%);
}

/* Narrower content column so the art on the right gets visual room. */
.ex-hero-content { max-width: 540px; padding: 0 56px 48px; }

/* Smaller, restrained title — proportions matter. AnimeKai's hero
   doesn't shout; it lets the art shout. */
.ex-hero-title {
    font-size: 1.85rem;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    -webkit-line-clamp: 2;
}
.ex-hero-desc {
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255,255,255,.68);
    margin: 0 0 16px;
    -webkit-line-clamp: 1;     /* one line — tight & confident */
    max-width: 480px;
}

/* Tighter badges */
.ex-hero-badges { gap: 6px; margin-bottom: 10px; }
.ex-hero-badge { padding: 3px 8px; font-size: .66rem; }

/* Compact stats card — smaller cells, less visual mass. */
.ex-hero-stats {
    margin: 0 0 16px;
    border-radius: 6px;
}
.ex-hero-stat { padding: 8px 16px; min-width: 88px; }
.ex-hero-stat-label { font-size: .6rem; letter-spacing: .1em; }
.ex-hero-stat-value { font-size: .92rem; }

/* WATCH NOW: drop the breathing pulse — it was too loud. Keep the
   gradient + lift, lose the constant motion. */
.ex-hero-watch-btn {
    animation: none;
    padding: 11px 22px;
    font-size: .82rem;
    box-shadow: 0 6px 18px rgba(249,115,22,.28);
}
.ex-hero-watch-btn:hover {
    box-shadow: 0 10px 24px rgba(249,115,22,.42);
}
.ex-hero-bookmark { width: 40px; height: 40px; }

/* Hero entrance — quicker, less staggered, less floaty.
   220ms total cascade vs the old 480ms; the goal is "snap into
   place," not "make a show of it". */
.ex-hero-content.is-entering > .ex-hero-badges  { animation-delay: 0s; }
.ex-hero-content.is-entering > .ex-hero-title   { animation-delay: .04s; }
.ex-hero-content.is-entering > .ex-hero-desc    { animation-delay: .08s; }
.ex-hero-content.is-entering > .ex-hero-stats   { animation-delay: .12s; }
.ex-hero-content.is-entering > .ex-hero-actions { animation-delay: .16s; }
.ex-hero-content.is-entering > * {
    animation-duration: .42s;
}

/* Hero height — slightly shorter so the proportions match a typical
   wide cinema-card vibe instead of a billboard. */
.ex-hero { height: 64vh; min-height: 420px; max-height: 620px; }

/* ===== Trending sidebar — small rank badges (AnimeKai-style) ===== */
.ex-trending-side-row {
    grid-template-columns: 22px 1fr;
    gap: 10px;
    padding: 7px 6px;
}
.ex-trending-side-rank {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    text-shadow: none;
    letter-spacing: 0;
    /* Override the previous huge-numeral treatment. */
    line-height: 1;
}
.ex-trending-side-rank.is-top {
    color: #fff;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 60%, #ea580c 100%);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    -webkit-text-fill-color: #fff;
    box-shadow: 0 2px 8px rgba(249,115,22,.35);
}

/* Larger thumbnails for the AnimeKai feel */
.ex-trending-side-card { grid-template-columns: 44px 1fr; gap: 12px; }
.ex-trending-side-thumb { width: 44px; height: 60px; border-radius: 5px; }

@media (max-width: 1023px) {
    .ex-hero { height: 56vh; min-height: 360px; }
    .ex-hero-content { max-width: 100%; padding: 0 28px 28px; }
    .ex-hero-title { font-size: 1.55rem; }
}
@media (max-width: 640px) {
    .ex-hero { height: 50vh; min-height: 320px; }
    .ex-hero-content { padding: 0 16px 18px; }
    .ex-hero-title { font-size: 1.32rem; }
    .ex-hero-desc { font-size: .76rem; -webkit-line-clamp: 2; }
    .ex-hero-stat { padding: 6px 10px; min-width: 0; }
    .ex-hero-stat-value { font-size: .85rem; }
}

/* ============================================================
   NAVBAR SEARCH — AnimeKai-style site-wide search
   Sits in the middle of the navbar, with a fixed-position results
   dropdown rendered just below the bar. Filter / aux cluster
   (community / shuffle / sub-dub) sits to the right of the search.
   ============================================================ */
.nav-search {
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 18px;
    display: inline-flex; align-items: center; gap: 6px;
    height: 46px;
    padding: 0 8px 0 18px;
    background: rgba(20,20,30,.7);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 6px 20px rgba(0,0,0,.35);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav-search:hover {
    border-color: rgba(255,255,255,.18);
    background: rgba(24,24,34,.78);
}
.nav-search:focus-within {
    border-color: rgba(249,115,22,.55);
    background: rgba(20,20,30,.82);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 24px rgba(0,0,0,.45),
        0 0 0 4px rgba(249,115,22,.12);
}
.nav-search-icon {
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
    width: 17px;
    height: 17px;
}
.nav-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .92rem;
    padding: 0 10px;
}
.nav-search-input::placeholder { color: rgba(255,255,255,.5); }
.nav-search-clear {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.5);
    width: 24px; height: 24px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.nav-search-clear:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-search-filter {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0 12px;
    height: 28px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.65);
    border-left: 1px solid rgba(255,255,255,.08);
    margin-left: 4px;
    cursor: pointer;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    transition: color .15s ease;
}
.nav-search-filter:hover { color: #fff; }
.nav-search-filter-text { line-height: 1; }

/* Aux cluster — community / shuffle / sub-dub. */
.nav-aux {
    display: inline-flex; align-items: center; gap: 6px;
    margin-right: 6px;
}
.nav-aux-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.7);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-aux-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-aux-btn:active { transform: scale(.92); }
.nav-aux-btn:disabled { opacity: .5; cursor: not-allowed; }

.nav-lang {
    display: inline-flex; align-items: center;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    padding: 2px;
}
.nav-lang-btn {
    height: 24px;
    padding: 0 11px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.55);
    border-radius: 999px;
    cursor: pointer;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background .15s ease, color .15s ease;
}
.nav-lang-btn:hover { color: rgba(255,255,255,.9); }
.nav-lang-btn.is-on {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(249,115,22,.35);
}

/* Search results dropdown — fixed beneath the navbar. */
.nav-search-results {
    position: fixed;
    top: 64px;                    /* sits flush below the navbar */
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 28px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    background: rgba(15,15,21,.92);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 90;
}
.nav-search-results[hidden] { display: none; }
.nav-search-loading,
.nav-search-empty {
    padding: 22px 16px;
    text-align: center;
    color: rgba(255,255,255,.55);
    font-size: .82rem;
}
.nav-search-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease;
}
.nav-search-item:hover { background: rgba(255,255,255,.05); }
.nav-search-thumb {
    width: 44px; height: 60px;
    border-radius: 5px;
    background: #1a1a1f;
    object-fit: cover;
}
.nav-search-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.nav-search-info h4 {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.nav-search-info span {
    font-size: .72rem;
    color: rgba(255,255,255,.5);
}

/* History rows */
.nav-search-hist-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px 8px;
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.nav-search-hist-clear {
    background: transparent; border: none;
    color: rgba(249,115,22,.85);
    font-size: .72rem; font-weight: 600;
    cursor: pointer;
}
.nav-search-hist-clear:hover { color: #f97316; }
.nav-search-hist-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    align-items: center;
}
.nav-search-hist-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: transparent; border: none;
    color: rgba(255,255,255,.78);
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    width: 100%;
    overflow: hidden; text-overflow: ellipsis;
}
.nav-search-hist-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-search-hist-x {
    width: 26px; height: 26px;
    background: transparent; border: none;
    color: rgba(255,255,255,.4);
    border-radius: 999px;
    cursor: pointer;
    font-size: 1rem;
    transition: background .15s ease, color .15s ease;
}
.nav-search-hist-x:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Mobile: collapse search to icon-only that expands; hide aux labels. */
@media (max-width: 900px) {
    .nav-search { max-width: 220px; margin: 0 8px; }
    .nav-search-filter-text { display: none; }
    .nav-search-filter { padding: 0 8px; }
    .nav-aux { gap: 4px; }
    .nav-aux-btn { width: 28px; height: 28px; }
    .nav-lang-btn { padding: 0 8px; font-size: .62rem; }
}
@media (max-width: 640px) {
    .nav-search { max-width: none; flex: 1 1 0; margin: 0 6px; }
    .nav-aux { display: none; }     /* the sidebar has these too */
    .nav-search-filter { display: none; }
}

/* ============================================================
   HERO REBUILD — per detailed brief
   Premium streaming layout: 75vh full-bleed banner, content
   left-aligned with strong dark gradient, edge arrows, floating
   glass search overlapping the bottom edge.
   These overrides sit AFTER all earlier hero rules so they win.
   ============================================================ */

.ex-hero {
    height: 75vh;
    min-height: 480px;
    max-height: 760px;
    border-radius: 0;
    /* Spare room at the bottom for the floating search overlay so
       it never clips the hero content. */
    margin-bottom: 36px;
}
.ex-hero-bg {
    background-position: center 22%;
    background-size: cover;
}
/* Strong dark gradient — left → transparent (right). Reads cleanly
   over the brightest character art while keeping the right side
   visually open. */
.ex-hero-gradient {
    background:
        linear-gradient(to right, rgba(6,6,12,.92) 0%, rgba(6,6,12,.78) 22%, rgba(6,6,12,.45) 42%, rgba(6,6,12,.1) 65%, transparent 80%),
        linear-gradient(to top, rgba(6,6,12,.95) 0%, rgba(6,6,12,.55) 18%, rgba(6,6,12,.05) 50%, transparent 75%);
}

.ex-hero-content {
    padding: 0 64px 96px;
    max-width: 640px;
    z-index: 2;
    /* `flex-end` justify-content keeps the column anchored to the
       bottom-left of the hero (left-aligned per the brief). */
}

/* ---- Title ---- */
.ex-hero-title {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    -webkit-text-fill-color: #fff;     /* override earlier gradient-text */
    background: none;
    margin: 0 0 14px;
    text-shadow: 0 4px 22px rgba(0,0,0,.55);
    -webkit-line-clamp: 2;
    max-width: 580px;
}

/* ---- Metadata badges (rating / year / quality / type) ---- */
.ex-hero-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 16px;
}
.ex-hero-meta-badge {
    display: inline-flex; align-items: center;
    padding: 4px 11px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* No bright fills — soft, premium-feeling chips. */
    text-shadow: none;
    box-shadow: none;
}
.ex-hero-meta-quality {
    color: #fdba74;
    border-color: rgba(249,115,22,.28);
    background: rgba(249,115,22,.1);
}

/* ---- Description ---- */
.ex-hero-desc {
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(255,255,255,.62);
    margin: 0 0 16px;
    max-width: 540px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Genre pills (muted) ---- */
.ex-hero-genres {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 22px;
}
.ex-hero-genre {
    padding: 3px 10px;
    font-size: .7rem;
    color: rgba(255,255,255,.55);
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    transition: color .18s ease, border-color .18s ease;
}
.ex-hero-genre:hover {
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.25);
}

/* ---- Action row ---- */
.ex-hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 0; }
.ex-hero-watch-btn {
    padding: 14px 30px;
    font-size: .92rem;
    font-weight: 700;
    text-transform: none;       /* per brief: not shouty caps */
    letter-spacing: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 60%, #ea580c 100%);
    box-shadow: 0 8px 24px rgba(249,115,22,.32);
    animation: none;            /* drop the breathing pulse */
}
.ex-hero-watch-btn:hover {
    background: linear-gradient(135deg, #fdb673 0%, #fb923c 60%, #f97316 100%);
    box-shadow: 0 12px 32px rgba(249,115,22,.45);
    transform: translateY(-2px);
}
.ex-hero-bookmark { width: 46px; height: 46px; border-radius: 8px; }

/* ---- Edge-positioned carousel arrows ---- */
.ex-hero-edge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(8,8,14,.55);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .25s ease, background .18s ease, transform .18s ease;
}
.ex-hero:hover .ex-hero-edge,
.ex-hero:focus-within .ex-hero-edge { opacity: 1; }
.ex-hero-edge:hover {
    background: rgba(249,115,22,.18);
    border-color: rgba(249,115,22,.5);
    color: #fff;
}
.ex-hero-edge:active { transform: translateY(-50%) scale(.94); }
.ex-hero-edge-prev { left: 18px; }
.ex-hero-edge-next { right: 18px; }

/* ---- Counter (bottom-right text only) ---- */
.ex-hero-counter-wrap {
    position: absolute;
    right: 32px;
    bottom: 32px;
    z-index: 5;
    padding: 6px 12px;
    background: rgba(8,8,14,.55);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ex-hero-counter {
    font-size: .78rem;
    color: rgba(255,255,255,.78);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    min-width: auto;
}

/* ---- Floating glass search bar (overlaps the bottom of hero) ---- */
.ex-hero-search {
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    z-index: 6;
    width: min(560px, calc(100% - 48px));
    height: 56px;
    display: flex; align-items: center; gap: 10px;
    padding: 0 22px;
    background: rgba(15,15,21,.62);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 38px rgba(0,0,0,.55);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ex-hero-search:focus-within {
    border-color: rgba(249,115,22,.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 20px 42px rgba(0,0,0,.6),
        0 0 0 4px rgba(249,115,22,.1);
}
.ex-hero-search-icon { color: rgba(255,255,255,.55); flex-shrink: 0; }
.ex-hero-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .95rem;
}
.ex-hero-search-input::placeholder { color: rgba(255,255,255,.4); }

/* ---- Hide the legacy stats card / dot indicators if any DOM
   remnants render ---- */
.ex-hero-stats, .ex-hero-dots, .ex-hero-thumb { display: none !important; }

/* ---- Responsive ---- */
@media (max-width: 1023px) {
    .ex-hero { height: 70vh; min-height: 420px; }
    .ex-hero-content { padding: 0 44px 80px; max-width: 100%; }
    .ex-hero-title { font-size: clamp(1.45rem, 4.5vw, 2.05rem); }
    .ex-hero-edge { width: 38px; height: 38px; opacity: .85; }
    .ex-hero-counter-wrap { right: 18px; bottom: 22px; }
}
@media (max-width: 640px) {
    .ex-hero { height: 64vh; min-height: 360px; margin-bottom: 32px; }
    .ex-hero-content { padding: 0 22px 84px; }
    .ex-hero-title { font-size: 1.4rem; max-width: 100%; }
    .ex-hero-desc { font-size: .82rem; -webkit-line-clamp: 2; }
    .ex-hero-meta-badge { font-size: .65rem; padding: 3px 8px; }
    .ex-hero-watch-btn { padding: 11px 22px; font-size: .82rem; }
    .ex-hero-bookmark { width: 42px; height: 42px; }
    .ex-hero-edge { display: none; }      /* swipe instead on touch */
    .ex-hero-counter-wrap { right: 14px; bottom: 76px; padding: 4px 10px; }
    .ex-hero-counter { font-size: .72rem; }
    .ex-hero-search {
        bottom: -26px;
        height: 48px;
        padding: 0 18px;
    }
    .ex-hero-search-input { font-size: .85rem; }
}

/* ============================================================
   HERO — pixel-locked spec (final, overrides everything above)
   Mapped 1:1 from the supplied measurement sheet.
   ============================================================ */

/* ----- size ----- */
.ex-hero {
    position: relative;
    width: 100%;
    height: 75vh;
    min-height: 580px;
    max-height: none;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 36px;
}
.ex-hero-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    /* `cover` so the image fills the full hero with no empty band on
       the left — that empty band created a sharp vertical seam where
       the image met the page bg. With cover + the mask below, the
       image extends to the left edge of the hero and visibly
       dissolves there. */
    background-size: cover;
    background-position: center 25%;
    background-color: #060612;
    filter: saturate(1.08) contrast(1.04);
    transform: translateZ(0);
    will-change: background-image;
    image-rendering: -webkit-optimize-contrast;
    /* Strong fade on the left so the image content disappears into
       the page background instead of stopping at a hard line. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 14%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.9) 42%, #000 55%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 14%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.9) 42%, #000 55%);
}
/* Heavy blurred mirror for this layout — wider, stronger blur so the
   mask transition zone is filled with a soft halo rather than dead
   page bg. */
.ex-hero-bg-blur {
    position: absolute;
    top: 0; bottom: 0;
    left: -10%;
    width: 70%;
    background-size: cover;
    background-position: center 25%;
    filter: blur(120px) saturate(1.15);
    transform: scale(1.2);
    transform-origin: left center;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.35) 75%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.35) 75%, transparent 100%);
}

@media (max-width: 640px) {
    .ex-hero-bg {
        background-position: center 28%;
    }
    .ex-hero-bg-blur {
        width: 65%;
        filter: blur(70px) saturate(1.1);
    }
}

/* ----- layered overlay -----
   Asymmetric design: the LEFT half is heavily darkened so the title
   carries the eye; the RIGHT half is left almost untouched so the
   character art reads clean and bright. Edge fades blend the viewport
   borders into the page bg (#060612).

   Layers (CSS paints LAST first → list top is topmost):
     1. Right edge — 220px soft fade to #060612 (long, gentle)
     2. Left  edge — 32px crisp fade to #060612
     3. Top + bottom edge fades
     4. Asymmetric reading vignette: dark left for title, clear right
        for art (.95 → .85 → .35 → 0). */
.ex-hero-gradient {
    position: absolute;
    inset: 0;
    background:
        /* Right edge — no fade. The right side stays crisp; the art
           runs all the way to the viewport edge. */
        /* Left edge — keep the 32px fade for the page-bg blend. */
        linear-gradient(to right,  #060612 0%, transparent 32px),
        /* Top + bottom fade. */
        linear-gradient(to bottom, #060612 0%, transparent 60px, transparent calc(100% - 180px), #060612 100%),
        /* Reading vignette: heavy on the LEFT for the title, fully
           clear from ~52% onward so the right-half art renders at
           native brightness with zero tint. */
        linear-gradient(to right,
            rgba(6,6,18,.95) 0%,
            rgba(6,6,18,.82) 22%,
            rgba(6,6,18,.4)  38%,
            rgba(6,6,18,.05) 50%,
            transparent      55%);
}

/* Drop the bottom margin between hero and the next section — the
   gradient itself is the blend now, no need for a gap. */
.ex-hero { margin-bottom: 0; }

/* ----- content layout (anchored left, not centered in a 1280 box) -----
   Removed the 1280px max-width + auto margin so the content stack
   sits closer to the actual left edge of the viewport. Padding is
   the only horizontal offset now. */
.ex-hero-content {
    position: relative;
    z-index: 2;
    max-width: none;
    margin: 0;
    height: 100%;
    padding: 0 48px;                     /* was 96px — pulled left */
    display: flex;
    flex-direction: column;
    justify-content: center;     /* vertical center */
    align-items: flex-start;     /* horizontal LEFT */
}

/* ----- title ----- */
.ex-hero-title {
    width: 520px;                        /* was 620 */
    max-width: 100%;
    font-size: 44px;                     /* was 64 */
    font-weight: 700;
    line-height: 1.12;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    margin: 0 0 12px;                    /* tightened spacing */
    letter-spacing: -.02em;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 4px 22px rgba(0,0,0,.55);
}

/* ----- metadata badges ----- */
.ex-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;                            /* was 10 */
    margin: 0 0 10px;                    /* was 12 */
}
.ex-hero-meta-badge {
    height: 24px;                        /* was 28 */
    padding: 0 10px;                     /* was 12 */
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;                   /* was 12.5 */
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid transparent;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ex-hero-meta-quality {
    /* keep quality subtle — no bright accent fill */
    color: rgba(255,255,255,.95);
    background: rgba(255,255,255,.08);
    border-color: transparent;
}

/* ----- description ----- */
.ex-hero-desc {
    width: 460px;                        /* was 520 */
    max-width: 100%;
    margin: 0 0 20px;                    /* was 24 */
    font-size: 13.5px;                   /* was 15 */
    line-height: 1.5;
    color: rgba(255,255,255,.68);
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide optional genre pills — spec doesn't include them in this rev. */
.ex-hero-genres { display: none; }

/* ----- action row ----- */
.ex-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Primary: smaller pill + softer shadow */
.ex-hero-watch-btn {
    height: 40px;                        /* was 48 */
    padding: 0 22px;                     /* was 28 */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;                   /* was 15 */
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 60%, #ea580c 100%);
    border: none;
    border-radius: 999px;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 6px 18px rgba(249,115,22,.26);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    animation: none;
}
.ex-hero-watch-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 9px 24px rgba(249,115,22,.38);
}

/* Secondary: 40×40 square glass to match the smaller primary */
.ex-hero-bookmark {
    width: 40px;                         /* was 48 */
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;                 /* was 12 */
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .18s ease, border-color .18s ease;
}
.ex-hero-bookmark:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.25);
}
.ex-hero-bookmark[aria-pressed="true"] {
    background: rgba(249,115,22,.15);
    border-color: rgba(249,115,22,.55);
    color: #f97316;
}
.ex-hero-bookmark[aria-pressed="true"] svg path { fill: currentColor; }

/* ----- carousel arrows: 44px, vertically centered, glass ----- */
.ex-hero-edge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.4);
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;                                /* always-on per spec */
    transition: background .18s ease, transform .15s ease;
}
.ex-hero-edge:hover { background: rgba(0,0,0,.6); }
.ex-hero-edge:active { transform: translateY(-50%) scale(.94); }
.ex-hero-edge-prev { left: 24px; }
.ex-hero-edge-next { right: 24px; }

/* ----- slide counter: bottom right, 14px, 0.7 opacity ----- */
.ex-hero-counter-wrap {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 5;
    background: transparent;
    border: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ex-hero-counter {
    font-size: 14px;
    color: #fff;
    opacity: .7;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    min-width: auto;
    padding: 0;
}

/* ----- floating glass search: 520×56 ----- */
.ex-hero-search {
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    z-index: 6;
    width: 520px;
    max-width: calc(100% - 48px);
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    background: rgba(20,20,30,.75);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 38px rgba(0,0,0,.55);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ex-hero-search:focus-within {
    border-color: rgba(249,115,22,.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 20px 42px rgba(0,0,0,.6),
        0 0 0 4px rgba(249,115,22,.1);
}
.ex-hero-search-icon { color: rgba(255,255,255,.55); flex-shrink: 0; }
.ex-hero-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 15px;
}
.ex-hero-search-input::placeholder { color: rgba(255,255,255,.4); }

/* Kill any leftover stats card / dot indicator DOM. */
.ex-hero-stats, .ex-hero-dots, .ex-hero-thumb { display: none !important; }

/* ----- slide-change animation: fade + slight scale, 400ms ease-in-out ----- */
@keyframes ex-hero-fade-scale {
    from { opacity: 0; transform: scale(.98); }
    to   { opacity: 1; transform: scale(1); }
}
.ex-hero-content.is-entering {
    animation: ex-hero-fade-scale 400ms ease-in-out both;
}
/* Cancel the staggered child cascade from the earlier polish pass —
   the spec wants ONE unified fade+scale, not a per-child cascade. */
.ex-hero-content.is-entering > * {
    animation: none !important;
}

/* ----- responsive ----- */
@media (max-width: 1023px) {
    .ex-hero-content { padding: 0 48px; }
    .ex-hero-title { font-size: 48px; width: 100%; }
    .ex-hero-edge { width: 40px; height: 40px; }
    .ex-hero-edge-prev { left: 16px; }
    .ex-hero-edge-next { right: 16px; }
    .ex-hero-counter-wrap { right: 16px; bottom: 16px; }
}
@media (max-width: 640px) {
    .ex-hero { height: 60vh; min-height: 460px; }
    .ex-hero-content { padding: 0 24px; }
    .ex-hero-title { font-size: 32px; margin-bottom: 16px; }
    .ex-hero-meta-badge { height: 26px; padding: 0 10px; font-size: 11.5px; }
    .ex-hero-desc { font-size: 14px; }
    .ex-hero-watch-btn { height: 44px; padding: 0 22px; font-size: 14px; }
    .ex-hero-bookmark { width: 44px; height: 44px; }
    .ex-hero-edge { display: none; }     /* swipe instead of arrows on touch */
    .ex-hero-counter-wrap { right: 14px; bottom: 76px; }
    .ex-hero-search {
        width: calc(100% - 28px);
        height: 48px;
        bottom: -24px;
        padding: 0 18px;
    }
    .ex-hero-search-input { font-size: 14px; }
}

/* =====================================================================
   CCA LOADER + OFFLINE OVERLAY
   The loader is the signature CCA "circle thingy": three concentric
   rings (gradient → dashed → solid) layered around a wordmark core,
   with an aura pulse behind. Reused inside the offline overlay; the
   .cca-loader element by itself is also drop-in usable anywhere a
   page needs an inline branded spinner.
   ===================================================================== */

/* ---- The loader (standalone — usable inside any container) ---- */
.cca-loader {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}
.cca-loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
/* Outer ring: conic gradient masked into an annulus. The mask is what
   makes the ring hollow without needing a separate inner element. */
.cca-loader-ring-1 {
    background: conic-gradient(from 0deg,
        #7c3aed 0%, #ec4899 28%, #38bdf8 56%, #a78bfa 82%, #7c3aed 100%);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
            mask: radial-gradient(circle, transparent 60%, #000 62%);
    filter: drop-shadow(0 0 12px rgba(167,139,250,.55));
    animation: cca-spin 2.4s linear infinite;
}
/* Middle ring: dashed border that slowly counter-rotates. */
.cca-loader-ring-2 {
    inset: 14px;
    border: 2px dashed rgba(167,139,250,.55);
    animation: cca-spin 7s linear infinite reverse;
}
/* Inner ring: thin glow circle that stays still — anchors the eye. */
.cca-loader-ring-3 {
    inset: 24px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        inset 0 0 18px rgba(124,58,237,.35),
        0 0 22px rgba(124,58,237,.25);
}
/* Core disc with the wordmark. */
.cca-loader-core {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%),
        radial-gradient(circle at 50% 50%, #1a1530 0%, #0a0818 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset 0 -6px 14px rgba(0,0,0,.55);
    animation: cca-core-pulse 2.4s ease-in-out infinite;
}
.cca-loader-mark {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .18em;
    color: #fff;
    background: linear-gradient(180deg, #fff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 14px rgba(167,139,250,.5);
}
@keyframes cca-spin { to { transform: rotate(360deg); } }
@keyframes cca-core-pulse {
    0%, 100% { transform: scale(1);    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -6px 14px rgba(0,0,0,.55), 0 0 18px rgba(124,58,237,.25); }
    50%      { transform: scale(1.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -6px 14px rgba(0,0,0,.55), 0 0 32px rgba(124,58,237,.55); }
}

/* Compact size modifier for inline use. */
.cca-loader-sm { width: 72px; height: 72px; }
.cca-loader-sm .cca-loader-ring-2 { inset: 8px; border-width: 1.5px; }
.cca-loader-sm .cca-loader-ring-3 { inset: 14px; }
.cca-loader-sm .cca-loader-core   { inset: 18px; }
.cca-loader-sm .cca-loader-mark   { font-size: .68rem; letter-spacing: .14em; }

@media (prefers-reduced-motion: reduce) {
    .cca-loader-ring-1, .cca-loader-ring-2, .cca-loader-core { animation: none; }
}

/* ---- Offline overlay ---- */
.cca-offline {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    background: radial-gradient(circle at 50% 35%, rgba(20,12,48,.92) 0%, rgba(5,3,18,.97) 70%);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
.cca-offline.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility 0s;
}
/* Large blurred halo behind the loader. */
.cca-offline-aura {
    position: absolute;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.45) 0%, rgba(124,58,237,0) 65%);
    filter: blur(40px);
    animation: cca-aura-breathe 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cca-aura-breathe {
    0%, 100% { transform: scale(1);    opacity: .55; }
    50%      { transform: scale(1.12); opacity: .85; }
}
.cca-offline-title {
    margin: 6px 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.cca-offline-sub {
    margin: 0;
    color: rgba(255,255,255,.7);
    font-size: .92rem;
    text-align: center;
    max-width: 320px;
}
.cca-offline-retry {
    margin-top: 4px;
    padding: 10px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(124,58,237,.45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cca-offline-retry:hover  { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(124,58,237,.55); }
.cca-offline-retry:active { transform: translateY(0)    scale(.97); }

/* When the overlay is up, freeze the page underneath. */
html.cca-offline-lock,
html.cca-offline-lock body { overflow: hidden; }

/* ============================================
   W2G OVERLAY — in-place watch-together UI
   ============================================
   Layered on top of watch.php's player. The
   member-avatar bar floats top-right of the
   video. The chat panel slides in from the
   right edge. Hidden by default; w2g-overlay.js
   un-hides on create/join. */

.w2g-members {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: row-reverse; /* newest joiner on the left, host stays on the right */
    pointer-events: auto;
}
.w2g-member {
    width: 34px; height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(0,0,0,.55);
    background: linear-gradient(135deg, #6366f1, #a855f7);
    margin-left: -10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
    position: relative;
    flex-shrink: 0;
    transition: transform .15s;
}
.w2g-member:hover { transform: translateY(-2px) scale(1.06); z-index: 2; }
.w2g-member img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.w2g-member-init {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: -.02em;
}
.w2g-member-host {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251,191,36,.65), 0 2px 10px rgba(251,191,36,.35);
}
.w2g-member-host::after {
    content: "";
    position: absolute;
    top: -3px; right: -3px;
    width: 12px; height: 12px;
    background:
        radial-gradient(circle, #fbbf24 0%, #f59e0b 80%);
    border: 2px solid rgba(0,0,0,.55);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(251,191,36,.7);
}

/* ---- Chat panel ---- */

.w2g-chat {
    position: fixed;
    top: 0; right: 0;
    bottom: 0;
    width: min(360px, 100vw);
    z-index: 1100;
    background: rgba(14,12,30,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.32,.72,0,1);
    box-shadow: -8px 0 32px rgba(0,0,0,.4);
}
.w2g-chat.is-open { transform: translateX(0); }

.w2g-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.2);
}
.w2g-chat-head-meta { flex: 1; min-width: 0; }
.w2g-chat-title {
    display: block;
    font-size: .9rem; font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.w2g-chat-code {
    display: block;
    font-size: .68rem;
    color: rgba(255,255,255,.5);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .12em;
    margin-top: 2px;
}
.w2g-chat-leave,
.w2g-chat-close {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-chat-leave:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: #fca5a5; }
.w2g-chat-close { padding: 6px 10px; font-size: 1rem; }
.w2g-chat-close:hover { background: rgba(255,255,255,.12); }

.w2g-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}
.w2g-chat-list::-webkit-scrollbar { width: 6px; }
.w2g-chat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

.w2g-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.w2g-msg-av {
    width: 28px; height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #a855f7);
}
.w2g-msg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w2g-msg-av-init {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .7rem; font-weight: 700;
}
.w2g-msg-body { flex: 1; min-width: 0; }
.w2g-msg-meta {
    font-size: .65rem;
    color: rgba(255,255,255,.45);
    margin-bottom: 2px;
}
.w2g-msg-name { color: rgba(255,255,255,.85); font-weight: 600; }
.w2g-msg-name-host { color: #fbbf24; }
.w2g-msg-text {
    font-size: .85rem;
    color: rgba(255,255,255,.92);
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.w2g-msg-system {
    text-align: center;
    font-size: .7rem;
    color: rgba(255,255,255,.45);
    padding: 4px 0;
    font-style: italic;
}

.w2g-chat-form {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.2);
}
.w2g-chat-input {
    flex: 1;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s, background .15s;
}
.w2g-chat-input:focus {
    border-color: rgba(167,139,250,.5);
    background: rgba(255,255,255,.08);
}
.w2g-chat-send {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-chat-send:hover { filter: brightness(1.1); transform: translateY(-1px); }
.w2g-chat-send:active { transform: scale(.95); }
.w2g-chat-send:disabled { opacity: .4; cursor: default; }

/* ---- Floating reopen button (visible when chat is closed) ---- */

.w2g-fab {
    position: fixed;
    right: 18px;
    bottom: 80px;
    z-index: 1050;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    box-shadow: 0 6px 24px rgba(124,58,237,.55);
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: transform .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-fab:hover { filter: brightness(1.1); transform: translateY(-2px); }
.w2g-fab:active { transform: scale(.94); }
.w2g-fab-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center; justify-content: center;
    border: 2px solid rgba(20,12,40,.85);
}

/* While a party is active, hide the W2G action button via this body class. */
body.w2g-active .w-act[data-act="w2g"] { display: none !important; }

/* Smaller member circles on narrow viewports so they don't crowd the player. */
@media (max-width: 640px) {
    .w2g-members { top: 8px; right: 8px; }
    .w2g-member { width: 28px; height: 28px; margin-left: -8px; }
    .w2g-fab { width: 46px; height: 46px; right: 14px; bottom: 70px; }
}

/* ============================================
   W2G INVITE MODAL — host's friend picker
   ============================================ */

.w2g-chat-invite {
    background: rgba(167,139,250,.15);
    border: 1px solid rgba(167,139,250,.4);
    color: #c4b5fd;
    padding: 6px 9px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-chat-invite:hover {
    background: rgba(167,139,250,.25);
    border-color: rgba(167,139,250,.65);
    color: #fff;
}
.w2g-chat-invite:active { transform: scale(.95); }

.w2g-invite {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.w2g-invite-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,4,12,.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: w2g-fade-in .2s ease-out;
}
@keyframes w2g-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes w2g-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.w2g-invite-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #1a1535 0%, #110a26 100%);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(167,139,250,.08);
    overflow: hidden;
    animation: w2g-pop-in .25s cubic-bezier(.16,1,.3,1);
}

.w2g-invite-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.w2g-invite-head h3 {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.w2g-invite-close {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-invite-close:hover { background: rgba(255,255,255,.12); color: #fff; }

.w2g-invite-search-wrap {
    position: relative;
    padding: 12px 14px 10px;
}
.w2g-invite-search-icon {
    position: absolute;
    top: 50%; left: 26px;
    transform: translateY(-50%);
    color: rgba(255,255,255,.4);
    pointer-events: none;
}
.w2g-invite-search {
    width: 100%;
    padding: 9px 12px 9px 32px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    color: #fff;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s, background .15s;
}
.w2g-invite-search:focus {
    border-color: rgba(167,139,250,.5);
    background: rgba(255,255,255,.06);
}

.w2g-invite-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
    min-height: 80px;
}
.w2g-invite-list::-webkit-scrollbar { width: 6px; }
.w2g-invite-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

.w2g-invite-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.w2g-invite-row:hover { background: rgba(255,255,255,.04); }
.w2g-invite-row.is-selected {
    background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(167,139,250,.10));
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.4);
}

.w2g-invite-av {
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    flex-shrink: 0;
    position: relative;
}
.w2g-invite-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w2g-invite-av-init {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .85rem;
}
.w2g-invite-av-online::after {
    content: "";
    position: absolute;
    bottom: -1px; right: -1px;
    width: 10px; height: 10px;
    background: #22c55e;
    border: 2px solid #110a26;
    border-radius: 50%;
}

.w2g-invite-meta { flex: 1; min-width: 0; }
.w2g-invite-name {
    font-size: .85rem; font-weight: 600;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w2g-invite-handle {
    font-size: .68rem;
    color: rgba(255,255,255,.45);
    margin-top: 2px;
}

.w2g-invite-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.2);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
}
.w2g-invite-row.is-selected .w2g-invite-check {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-color: #a855f7;
}
.w2g-invite-check svg {
    width: 13px; height: 13px;
    color: #fff;
    opacity: 0;
    transition: opacity .12s;
}
.w2g-invite-row.is-selected .w2g-invite-check svg { opacity: 1; }

.w2g-invite-empty {
    text-align: center;
    color: rgba(255,255,255,.4);
    font-size: .82rem;
    padding: 28px 14px;
}

.w2g-invite-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.18);
}
.w2g-invite-count {
    font-size: .75rem;
    color: rgba(255,255,255,.6);
    font-weight: 500;
}
.w2g-invite-send {
    padding: 9px 18px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124,58,237,.45);
    transition: filter .15s, transform .15s, opacity .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-invite-send:hover { filter: brightness(1.1); transform: translateY(-1px); }
.w2g-invite-send:active { transform: scale(.97); }
.w2g-invite-send:disabled {
    opacity: .4;
    cursor: default;
    filter: none; transform: none;
    box-shadow: none;
}

/* Critical: the [hidden] HTML attribute sets display:none via UA
   stylesheet at specificity (0,1,0). Our flex/inline-flex rules
   above (e.g. .w2g-invite, .w2g-chat, .w2g-fab) tie or beat that
   specificity, which means they keep showing even when JS sets
   `hidden=true`. These explicit attribute-selector overrides force
   the element to actually disappear when the attribute is set —
   without them, the close button on the invite modal looks broken
   because the modal never collapses. */
.w2g-members[hidden],
.w2g-chat[hidden],
.w2g-fab[hidden],
.w2g-fab-badge[hidden],
.w2g-invite[hidden],
.w2g-chat-invite[hidden] {
    display: none !important;
}