/* ==================================================
   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 {
/* Base ground — the 2026 violet (#2b1557). Surfaces above it climb the
   same hue toward the mid-violet accent (#5e3091), so page → panel →
   card → elevated reads as one material rather than black with purple
   sitting on top. Buttons are the logo's pale lavender (#ddb1f9). */
--bg-page: #2b1557;
--bg-card: #442277;
--bg-panel: #3c1e6c;
--bg-input: #241145;
--bg-elevated: #5e3091;
--bg-modal: #361b65;
--brand-mid: #5e3091;
--brand-light: #ddb1f9;
--text-primary: #d8d8e8;
--text-heading: #e0e0f0;
--text-secondary: #b8b8d0;
--text-muted: #a0a0b8;
--text-faint: #808098;
--border-color: #51307e;
--link-color: #c79bff;
--link-hover: #dcc8ff;
--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(199,155,255,.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"] {
/* Light mode is the PAGE that flips, not the whole UI.
   From Ashim's mockup (uploads/light-lab/ref.png): the ground becomes a
   pale lavender and the panels — search bar, cards, menus — stay the
   deep violet they are in dark mode, with their light text intact. So
   only the ground and the ink that sits directly on it change here; the
   surface and text tokens deliberately keep their dark values. */
--bg-page:     #ede0fe;
--bg-panel:    #341961;
--bg-card:     #341961;
--bg-modal:    #341961;
--bg-elevated: #3f2079;
--bg-input:    #241145;
--border-color:#4a2a7d;

/* Ink for text sitting ON the pale ground. Everything inside a panel
   keeps --text-* (unchanged from dark). */
--ink-page:    #2b1557;
--ink-page-2:  #44236e;
--ink-page-3:  #5e3091;

--overlay: rgba(43, 21, 87, .35);
--shadow:  rgba(43, 21, 87, .14);
--shadow-card:       0 1px 2px rgba(43, 21, 87, .10), 0 8px 24px rgba(43, 21, 87, .14);
--shadow-card-hover: 0 4px 8px rgba(43, 21, 87, .14), 0 24px 48px rgba(43, 21, 87, .22);
}

/* Body wash — the same three drifting blobs the dark theme gets its
   depth from, over the lavender ground instead of a flat fill. */
/* Flat ground, no wash. The mockup's page is one even pale lavender —
   the depth comes from the violet panels sitting on it, not from the
   backdrop. Text directly on this ground takes the violet ink; anything
   inside a panel keeps the light text it has in dark mode. */
[data-theme="light"] body {
    /* Lightest at the top, deepening toward the bottom. The page used to
       read the other way round: the ambient glow layer paints its radials
       in the TOP corners, which tinted the top and left the bottom pale. */
    background: linear-gradient(180deg, #f7effe 0%, var(--bg-page) 48%, #dfcbf9 100%);
    background-attachment: fixed;
    color: var(--ink-page);
}
/* That glow layer would fight the gradient, so it is muted in light mode. */
[data-theme="light"] body::before { opacity: .25; }

/* 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, #ddb1f9, #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, #ddb1f9, #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: #ddb1f9;
color: #000;
box-shadow: 0 2px 10px rgba(221,177,249,.16);
}
.btn-primary:hover {
background: #e7c6fb;
box-shadow: 0 4px 14px rgba(221,177,249,.22);
}

.btn-outline {
background: transparent;
color: #ddb1f9;
border: 1px solid #ddb1f9;
}
.btn-outline:hover {
background: #ddb1f9;
color: #000;
}

.btn-block { width: 100%; }

.gradient-text {
background: linear-gradient(135deg, #c79bff 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: #000;
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); }

/* Primary tab shortcuts — the mobile bottom bar (Home/Search/Create/Guilds/
   Duels/Ranks/Messages/Profile) lives here on desktop instead. Hidden on
   mobile, where the bottom bar already covers those destinations. */
.sb-primary { display: none; }
@media (min-width: 769px) {
    .sb-primary { display: flex; flex-direction: column; }
    .sb-mobile-only { display: none !important; }
}

/* 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-family: 'Outfit', system-ui, sans-serif;
font-size: .9rem;
font-weight: 200;
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(255,255,255,.06);
color: #fff;
font-weight: 300;
}
.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-family: 'Outfit', system-ui, sans-serif;
font-size: .82rem;
font-weight: 300;
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-family: 'Outfit', system-ui, sans-serif;
font-size: .86rem;
font-weight: 200;
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: #fff; background: rgba(255,255,255,.06); }

/* Inline collapsible groups inside the main nav (Watchtower, Oryx's Library).
   Children stay full sb-link items (with icons) — only the parent summary
   gets the muted-uppercase group-title look + a leading icon. */
.sb-group-nav { margin: 2px 0 4px; }
.sb-group-title-icon {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
}
.sb-group-title-icon svg { flex-shrink: 0; opacity: .8; }
.sb-group-body-nav {
    margin-left: 10px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,.06);
    gap: 1px;
}
.sb-group-body-nav .sb-link { padding-left: 12px; }
[data-theme="light"] .sb-group-body-nav { border-left-color: rgba(0,0,0,.08); }

/* Thin separator that demarcates the bottom "footer zone" of the sidebar
   (Account / Create / privileged / Install) from the main destinations. */
.sb-divider {
    height: 1px;
    margin: 14px 14px 6px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    border: 0;
}
.sb-divider-faint {
    margin: 10px 14px 4px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
[data-theme="light"] .sb-divider {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.10), transparent);
}
[data-theme="light"] .sb-divider-faint {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
}

/* 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(199,155,255,.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(199,155,255,.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(199,155,255,.28);
    box-shadow: 0 12px 30px rgba(124,58,237,.4), 0 0 0 4px rgba(199,155,255,.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, #c79bff);
    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(199,155,255,.7);
    margin: 4px 8px 8px;
}

.pfp-divider {
    height: 1px;
    margin: 10px 4px;
    background: linear-gradient(90deg, transparent, rgba(199,155,255,.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(199,155,255,.08);
    border-color: rgba(199,155,255,.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(199,155,255,.12);
    color: #c4b1ff;
    border: 1px solid rgba(199,155,255,.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 10px;
width: 72px;
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/icon-192.png');
        mask-image: url('images/icon-192.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(199,155,255,.1);
border: 1px solid rgba(199,155,255,.2);
border-radius: 20px;
font-size: .9rem;
color: #dcc8ff;
}
.welcome-tag code {
background: rgba(199,155,255,.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: #dcc8ff;
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: #c79bff;
}

/* 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: #c79bff;
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: #c79bff;
flex-shrink: 0;
box-shadow: 0 0 8px rgba(199,155,255,.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: #dcc8ff; 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(199,155,255,.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: #ddb1f9;
color: #000;
font-size: .9rem;
font-weight: 600;
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 0 20px rgba(221,177,249, .2);
transition: transform .15s ease, box-shadow .25s ease;
letter-spacing: .02em;
}
.auth-btn:hover {
box-shadow: 0 0 28px rgba(221,177,249, .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: #c79bff;
text-decoration: none;
transition: color .2s;
}
.auth-switch a:hover {
color: #dcc8ff;
}

/* 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/icon-192.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); }

/* Site-wide incoming-message banner (msg-alerts.js) — the exact message
   text drops in at the top of the screen on any page when a DM arrives. */
.cca-msg-alert-wrap {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 24px));
  z-index: 10000;            /* above the fixed navbar (z-index:100) */
  pointer-events: none;
}
.cca-msg-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(20,18,32,.92);
  border: 1px solid rgba(199,155,255,.28);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
  transform: translateY(-16px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s;
  pointer-events: auto;
}
.cca-msg-alert.show { transform: translateY(0); opacity: 1; }
.cca-msg-alert-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cca-msg-alert-av-ph {
  background: linear-gradient(135deg, #ddb1f9, #c79bff);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}
.cca-msg-alert-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cca-msg-alert-name { font-size: .82rem; font-weight: 600; color: #c79bff; }
.cca-msg-alert-body {
  font-size: .9rem;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .cca-msg-alert { transition-duration: .01ms; transform: none; }
}

/* Watchlist "Removed — Undo" toast: message + inline action, no browser dialog. */
.wl-undo-toast { display: flex; align-items: center; gap: 16px; }
.wl-undo-btn {
    background: none; border: 0; padding: 2px 2px;
    color: #c79bff; font: 800 .86rem inherit;
    letter-spacing: .02em; cursor: pointer; white-space: nowrap;
}
.wl-undo-btn:hover { color: #ddc4ff; text-decoration: underline; }

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

/* Google website-translate widget: hide its banner/chrome, keep our layout */
#google_translate_element { display: none !important; }
.goog-te-banner-frame, .goog-te-gadget, .skiptranslate { display: none !important; }
body { top: 0 !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.footer {
background: #000;
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: #c79bff;
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: #dcc8ff; }

.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(199,155,255,.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: #c79bff;
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: #c79bff;
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(199,155,255,.45);
    background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(199,155,255,.04));
    box-shadow: 0 0 0 1px rgba(199,155,255,.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(199,155,255,.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, #c79bff);
    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(199,155,255,.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(199,155,255,.35);
    background:
        radial-gradient(400px 160px at 0% 0%, rgba(199,155,255,.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: #c79bff;
    box-shadow: 0 0 14px rgba(199,155,255,.9), 0 0 0 6px rgba(199,155,255,.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(199,155,255,.9), 0 0 0 6px rgba(199,155,255,.12); }
    50%      { transform: scale(1.25); box-shadow: 0 0 22px rgba(199,155,255,1), 0 0 0 10px rgba(199,155,255,.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: #ddb1f9;
    color: #000 !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(221,177,249,.4);
}
.adm-act-primary:hover {
    box-shadow: 0 10px 24px rgba(221,177,249,.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(199,155,255,.04); }

.admin-table a { color: #c79bff; }
.admin-table a:hover { color: #dcc8ff; }

.admin-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: .7rem;
font-weight: 700;
background: rgba(124,58,237,.2);
color: #c79bff;
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: #c79bff;
border-color: rgba(199,155,255,.3);
}
.abtn-view:hover { background: rgba(199,155,255,.1); color: #dcc8ff; }

.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(199,155,255,.6),
0 0 30px rgba(199,155,255,.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(199,155,255,.5),
0 0 30px rgba(199,155,255,.3),
0 0 60px rgba(124,58,237,.2),
0 0 100px rgba(124,58,237,.1);
}
100% {
text-shadow:
0 0 14px rgba(199,155,255,.8),
0 0 40px rgba(199,155,255,.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: #c79bff;
border: 2px solid rgba(199,155,255,.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(199,155,255,.8);
box-shadow:
0 0 20px rgba(199,155,255,.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: #c79bff; }

/* 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: #c79bff;
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: #c79bff;
}

.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: #c79bff;
font-size: .9rem;
}
.back-link:hover { color: #dcc8ff; }

.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: #dcc8ff; 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: #dcc8ff; }
.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;

/* === Messages palette — deep-ocean teal. Distinct from the rest of
   the site (purple) and from OtakuRun (orange) / Hearth (warm), so the
   chat surface feels its own thing. Outgoing bubbles use --link-color
   automatically, so the accent doubles as the "you" bubble tint. === */
--bg-page:     #000000;
--bg-card:     #030608;
--bg-panel:    #020405;
--bg-input:    #010203;
--bg-elevated: #06121a;
--bg-modal:    #030608;
--text-primary:   #c8dee5;
--text-heading:   #e2f1f5;
--text-secondary: #8aa9b5;
--text-muted:     #6e8c9a;
--text-faint:     #4f6c7a;
--border-color: #1a3a47;
--link-color:  #c79bff;
--link-hover:  #5eead4;
--shadow-card-hover: 0 4px 8px rgba(0,0,0,.5), 0 24px 48px rgba(199, 155, 255,.18);

background:
    radial-gradient(ellipse 60% 45% at 12% 0%,  rgba(199, 155, 255,.04), transparent 60%),
    radial-gradient(ellipse 55% 45% at 95% 100%, rgba(221, 177, 249,.03), transparent 60%),
    #000000;
background-attachment: fixed;
}

.msg-layout {
display: flex;
height: calc(100vh - 52px);
height: calc(100dvh - 52px);
margin-top: 52px;
max-width: none;
width: 100%;
overflow: hidden;
}
/* When the site-wide nav slides away (body.nav-is-hidden), let the
   chat layout reclaim those 52px so messages cover the now-empty
   space above. */
body.msg-page.nav-is-hidden .msg-layout {
    margin-top: 0;
    height: 100vh;
    height: 100dvh;
}

/* Home view (no chat open): the conversation list takes the entire
   viewport edge-to-edge instead of being pinned at 340px with empty
   space beside it. As soon as a chat is opened (body.msg-chat-open)
   we drop back to the sidebar + chat split. */
body.msg-page:not(.msg-chat-open) .msg-sidebar {
    width: 100%;
    min-width: 0;
    max-width: none;
    border-right: 0;
    flex: 1;
}
body.msg-page:not(.msg-chat-open) .msg-chat,
body.msg-page:not(.msg-chat-open) .msg-chat-empty {
    display: none;
}
/* Keep the rows themselves readable — center the list within the
   full-width sidebar so avatars + names don't stretch out across
   half a kilometre of desktop. */
@media (min-width: 769px) {
    body.msg-page:not(.msg-chat-open) .msg-sidebar-head,
    body.msg-page:not(.msg-chat-open) .msg-search-wrap,
    body.msg-page:not(.msg-chat-open) .msg-add-friend,
    body.msg-page:not(.msg-chat-open) .msg-requests,
    body.msg-page:not(.msg-chat-open) .msg-friends-list {
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* -- 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;
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.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: 1200;
}
/* The chat header must own a stacking context above the message list
   so the dropdown menu (anchored to a header button) renders on top of
   the bubbles instead of slipping behind them. The `> *` rule in the
   redesign block pins every child of .msg-chat to z-index 1, so we
   need !important + a much higher value to break out. */
.msg-chat-header,
.msg-page .msg-chat > .msg-chat-header { position: relative !important; z-index: 1100 !important; }
.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; }

/* Bare bubble — drops chat-bubble chrome so a self-contained card
   (e.g. watch-party invite poster) can stand on its own. */
.msg-bubble.msg-bubble-bare,
.msg-bubble.msg-bubble-bare.msg-bubble-mine,
.msg-bubble.msg-bubble-bare.msg-bubble-theirs {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    max-width: none;
}

.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(199, 155, 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(199, 155, 255,.03) 0, rgba(199, 155, 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(199, 155, 255,.14), rgba(199, 155, 255,.12));
    border-bottom: 1px solid rgba(199, 155, 255,.2);
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}
.msg-ap-eyebrow { color: #c79bff; }
.msg-ap-slots   { color: #c79bff; }
.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(199, 155, 255,.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: #c79bff;
    border-top: 1px dashed rgba(199, 155, 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); }

/* ---------- Watch-party invite card (poster style) ---------- */
.msg-wp-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(124,58,237,.16), rgba(236,72,153,.10));
    border: 1px solid rgba(199, 155, 255,.32);
    width: 240px;
    max-width: 100%;
    margin: 2px 0 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.msg-wp-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.35);
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.msg-wp-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.msg-wp-cover-fallback {
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}
/* OtakuRun badge — bottom-left of the cover. Sits on a soft scrim so
   the shield + wordmark stay readable on any artwork. */
.msg-wp-cover::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0));
    pointer-events: none;
}
.msg-wp-oh {
    position: absolute;
    bottom: 8px; left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
}
.msg-wp-oh-mark {
    width: 22px; height: 22px;
    border-radius: 5px;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    /* CCA brand-lavender chip so the white CCA logo reads on any cover. */
    background: linear-gradient(135deg, #c79bff, #ddb1f9);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.msg-wp-oh-mark img { width: 15px; height: 15px; display: block; object-fit: contain; }
.msg-wp-oh-word {
    font-size: .82rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.msg-wp-oh-word-run { color: #c79bff; }
.msg-wp-body {
    display: flex; flex-direction: column; gap: 3px;
    padding: 0 2px;
    min-width: 0;
}
.msg-wp-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.msg-wp-host {
    font-size: .76rem;
    color: rgba(230,225,255,.78);
}
.msg-wp-enter {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #c79bff 0%, #ddb1f9 50%, #a855f7 100%);
    color: #000;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .04em;
    transition: transform .1s, box-shadow .15s, filter .15s;
    box-shadow: 0 3px 12px rgba(221,177,249,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.msg-wp-enter:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 5px 16px rgba(221,177,249,.6), 0 0 0 1px rgba(255,255,255,.1) inset; }
.msg-wp-enter:active { transform: scale(.97); }

.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) --
   Intentionally NOT a bubble: thin slab tinted slightly lighter than the
   chat background, monospace face, small caps-feel — reads like a log
   line so it doesn't get confused with conversational text. */
.msg-bubble-wrap-activity {
align-items: center;
margin: 14px 0;
}
.msg-activity {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 3px 10px;
border-radius: 4px;
background: rgba(255,255,255,.03);
border: none;
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: .62rem;
letter-spacing: .04em;
color: var(--text-muted);
opacity: .75;
}
.msg-activity-time {
font-size: .58rem;
opacity: .6;
}

/* -- 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); }
/* photo (Cy) wallpaper swatches — taller to show the portrait crop */
.msg-wp-img { height: 96px; background-size: cover; background-position: center; }
.msg-wp-note { margin: 12px 2px 0; font-size: .78rem; color: var(--text-muted); text-align: center; }
/* 1:1 photo wallpapers are mobile-only for now: hide the swatches and show
   the note on desktop. A GROUP wallpaper is different — the admin sets one
   for the whole group and every member sees it on every screen size, so in
   a group chat the swatches stay and the note goes. */
@media (min-width: 761px) {
    .msg-wp-mobile { display: none; }
    body.msg-chat-group .msg-wp-mobile { display: block; }
    body.msg-chat-group .msg-wp-note   { display: none; }
}
@media (max-width: 760px) { .msg-wp-note { display: none; } }
/* "Change wallpaper" in the ⋮ menu — mobile only (desktop reaches it via the
   info panel, which is removed on mobile). */
@media (min-width: 761px) { .msg-ctx-wp { display: none !important; } }

/* -- 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-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: #2b1557; }

/* 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%;
/* Slow, symmetric cross-dissolve — ease-in-out glides through the
   opacity crossover quickly so there's no mid-fade darkening dip,
   reading as one clean, buttery image-to-image morph. */
transition: opacity 1.5s ease-in-out;
will-change: opacity, transform;
transform-origin: center;
/* Fade the sharp image's left edge AND bottom edge to transparent so
   it dissolves into the page background instead of ending at a hard
   line. The blurred mirror layer (.ex-hero-bg-blur) fills the left
   void with a soft halo of color, and the dark page bg + gradient
   finish the morph along the bottom. Two mask gradients combined via
   mask-composite so only the intersection (right side + upper area)
   stays opaque. */
-webkit-mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.15) 18%, rgba(0,0,0,.6) 28%, #000 42%),
    linear-gradient(to bottom, #000 35%, rgba(0,0,0,.55) 70%, transparent 100%);
-webkit-mask-composite: source-in;
        mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.15) 18%, rgba(0,0,0,.6) 28%, #000 42%),
    linear-gradient(to bottom, #000 35%, rgba(0,0,0,.55) 70%, transparent 100%);
        mask-composite: intersect;
}
/* Slow ken-burns zoom on the active hero image — identical drift to the
   MovieVault hero (.mvx-hero-bg.is-on). explore-page.js re-applies the
   class on every slide so each picture gets a fresh subtle zoom-in. */
.ex-hero-bg.ex-kb {
    animation: exHeroKenBurns 22s linear forwards;
}
@keyframes exHeroKenBurns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.05); }
}
/* 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: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
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%),
    linear-gradient(to bottom, #000 35%, rgba(0,0,0,.5) 70%, transparent 100%);
-webkit-mask-composite: source-in;
        mask-image:
    linear-gradient(to right,  #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 70%, transparent 100%),
    linear-gradient(to bottom, #000 35%, rgba(0,0,0,.5) 70%, transparent 100%);
        mask-composite: intersect;
}
.ex-hero-gradient {
position: absolute;
inset: 0;
background:
    linear-gradient(to top, #000 0%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.15) 78%, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,.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(221,177,249,.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(199,155,255,.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, #c79bff, #d4c2ff);
    box-shadow: 0 0 10px rgba(199,155,255,.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: #c79bff;
    box-shadow: 0 4px 14px rgba(124,58,237,.5), 0 0 0 2px rgba(199,155,255,.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: 30px;
}
.ex-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}
.ex-section-title {
    font-family: 'Space Grotesk', 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.1;
}
/* Row subtitles removed — titles stand on their own. */
.ex-section-sub { display: none !important; }

/* Pulse beside "Fresh this week" to signal live-updating content */
.ex-section-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #c79bff;
    box-shadow: 0 0 14px rgba(199,155,255,.85), 0 0 0 4px rgba(199,155,255,.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(199,155,255,.85), 0 0 0 4px rgba(199,155,255,.14); }
    50%      { transform: scale(1.3);  box-shadow: 0 0 22px rgba(199,155,255,1), 0 0 0 7px rgba(199,155,255,.08); }
}

/* Trending section sits on the same manga screentone backdrop used behind
   the manga page hero (.mx-cover-marquee). */
.ex-section-new {
    position: relative;
    padding-top: 26px;
    padding-bottom: 26px;
    isolation: isolate;
}
.ex-section-new::before {
    content: "";
    position: absolute; inset: 0;
    background: #000 url('images/manga-hero-bg.webp') center / cover no-repeat;
    opacity: .5;
    z-index: -1;
    pointer-events: none;
}
/* Fade the texture into the page at top/bottom so the band doesn't read as a
   hard rectangle. */
.ex-section-new::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--bg, #000) 0%, transparent 16%, transparent 84%, var(--bg, #000) 100%);
    z-index: -1;
    pointer-events: none;
}

/* Empty-state line inside a horizontal rail */
.ex-rail-empty {
    padding: 26px 20px;
    margin: 0;
    border-radius: 14px;
    border: 1px dashed rgba(199,155,255,.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: 220px;
min-width: 220px;
text-decoration: none;
flex-shrink: 0;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
}
/* Landscape 16:9 frame — Continue Watching shows the actual episode
   still (TMDB), so the card is widescreen like Netflix/Crunchyroll
   instead of a portrait poster. */
.ex-continue-img {
position: relative;
width: 100%;
aspect-ratio: 16/9;
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: .8rem;
font-weight: 600;
color: var(--text-primary);
margin-top: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Title-logo art on Continue Watching cards — lift it above the thin
   progress bar and scale to the smaller card; hide the text title when
   the logo loads (matches the poster cards). */
/* Keep the title-logo small on the landscape Continue Watching thumbnail —
   bottom-left like a label, never a banner across the whole frame. */
.ex-continue-img .ex-card-logo-wrap {
    left: 10px; right: auto; bottom: 8px;
    justify-content: flex-start;
    max-width: 62%;
}
.ex-continue-img .ex-card-logo { max-height: 30px; max-width: 100%; }
.ex-continue-card.ex-has-logo .ex-continue-title { display: none; }

/* ── Continue Watching hover: enlarge + Continue/Remove buttons ── */
.ex-continue-card { position: relative; transition: transform .2s var(--ease-out, ease); transform-origin: center center; }
.ex-continue-img { display: block; cursor: pointer; }
/* Vertical room so the scaled card isn't clipped by the row's overflow. */
#exContinueRow { padding-top: 20px; padding-bottom: 20px; }

.ex-continue-actions {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    z-index: 4;
    opacity: 0;
    background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.3));
    transition: opacity .18s ease;
    pointer-events: none;   /* clicks fall through to the poster until hover */
}
.ex-cont-btn {
    pointer-events: none;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.ex-cont-btn:active { transform: scale(.95); }
.ex-cont-go { background: #fff; color: #14101f; }
.ex-cont-go:hover { background: #e6d8ff; }
.ex-cont-remove {
    background: rgba(15,12,22,.78);
    color: #fff;
    border: 1px solid rgba(255,255,255,.32);
}
.ex-cont-remove:hover { background: rgba(214,52,52,.9); border-color: transparent; }
.ex-cont-remove[disabled] { opacity: .6; cursor: default; }

/* Removal collapse */
.ex-continue-card.ex-continue-removing {
    opacity: 0;
    transform: scale(.9);
    transition: opacity .2s ease, transform .2s ease;
}

/* Hover only where there's a real pointer — on touch the buttons stay
   hidden/inert and a tap just resumes the episode. */
@media (hover: hover) {
    .ex-continue-card:hover { transform: scale(1.07); z-index: 6; }
    .ex-continue-card:hover .ex-continue-actions { opacity: 1; }
    .ex-continue-card:hover .ex-cont-btn { pointer-events: auto; }
}
/* Mobile/touch: no hover means the overlay Remove can't be reached, so show a
   quiet explicit Remove button below the card. Hidden on pointer devices, where
   hover already exposes the overlay action. */
.ex-continue-remove-m { display: none; }
@media (hover: none) {
    .ex-continue-remove-m {
        display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        width: 100%; margin-top: 7px; padding: 6px 10px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 8px;
        color: var(--text-muted);
        font-size: .68rem; font-weight: 600; letter-spacing: .01em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
    }
    .ex-continue-remove-m:active {
        transform: scale(.97);
        background: rgba(214,52,52,.16); border-color: rgba(214,52,52,.4); color: #fff;
    }
    .ex-continue-remove-m[disabled] { opacity: .5; cursor: default; }
}
.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: 220px;
min-width: 220px;
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: 12px;
overflow: hidden;
background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(15,15,20,1));
box-shadow: 0 8px 24px rgba(0,0,0,.4);
transition: box-shadow var(--dur-base) var(--ease-out), transform 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);
}

/* Top-N rank cards (Trending row) — fat numeral peeking from the
   left edge of each poster, à la Netflix Top 10. Mirrors MovieVault's
   .mvx-card-ranked / .mvx-card-rank so both pillars match. */
.ex-card-lg.is-ranked {
position: relative;
padding-left: 50px;
width: 220px;
min-width: 220px;
}
.ex-card-rank {
position: absolute;
left: -10px; top: -10px; bottom: 38px;
width: 70px;
font-family: ui-serif, Georgia, "Times New Roman", serif;
font-weight: 900;
font-size: 9.5rem;
line-height: 1;
color: #050507;
-webkit-text-stroke: 2px rgba(255,255,255,.85);
text-stroke: 2px rgba(255,255,255,.85);
user-select: none;
z-index: 1;
text-align: center;
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none;
}
.ex-card-lg.is-ranked .ex-card-lg-img,
.ex-card-lg.is-ranked .ex-card-lg-body { position: relative; z-index: 2; }
@media (max-width: 720px) {
.ex-card-lg.is-ranked { padding-left: 36px; width: 220px; min-width: 220px; }
.ex-card-rank { width: 50px; font-size: 6.5rem; }
}

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

/* Title-logo art overlaid on the poster — the show's official Fanart.tv
   wordmark (transparent PNG) replaces the text title when available.
   Painted by explore-page.js hydrateCardLogo(); sits bottom-center over
   the shade gradient. */
.ex-card-logo-wrap {
position: absolute;
left: 8%; right: 8%; bottom: 9px;
z-index: 3;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
}
.ex-card-logo {
max-width: 100%;
max-height: 58px;
width: auto; height: auto;
object-fit: contain;
filter: drop-shadow(0 2px 7px rgba(0,0,0,.85));
animation: exLogoIn .28s ease both;
}
@keyframes exLogoIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Grid cards are smaller — scale the logo down to match. */
.ex-card .ex-card-logo { max-height: 46px; }

/* When a logo is showing, drop the text title (keep the meta line).
   Cards with no logo keep their text title as the fallback. */
.ex-has-logo .ex-card-title,
.ex-has-logo .ex-card-lg-title { display: none; }

@media (max-width: 720px) {
.ex-card-logo { max-height: 48px; }
.ex-card .ex-card-logo { max-height: 38px; }
}

/* 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: 4px;
    padding: 2px 6px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .04em;
    border-radius: 5px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.7);
    color: #fff;
}
.ex-card-chip--new {
    background: linear-gradient(135deg, #c79bff, #a855f7);
    border-color: transparent;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .53rem;
}
.ex-card-chip--airing {
    color: #6ee7a4;
}
.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(251,191,36,.92);
    color: #1a1100;
    border-color: transparent;
}
/* Franchise "collection" chip — top-right, opposite the score/status chip.
   Marks a card that represents a whole franchise (Fate, SAO…); the count is
   how many entries sit under its Seasons tab. */
.ex-card-fchip {
    position: absolute;
    top: 8px; right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 5px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .03em;
    border-radius: 5px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid transparent;
    background: rgba(221,177,249,.92);
    color: #000;
    z-index: 2;
}
.ex-card-fchip svg { width: 11px; height: 11px; }
@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(199,155,255,.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; }

/* ===========================================================
   Netflix-style hover preview popover (explore-page.js HoverCard).
   Floats above the hovered poster as a mini detail card.
   =========================================================== */
.ex-hcard {
    position: fixed;
    z-index: 2000;
    width: 350px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
    opacity: 0;
    transform: scale(var(--hc-start, .86));
    transition: opacity .2s var(--ease-out, ease), transform .22s var(--ease-out, ease);
    pointer-events: none;
    will-change: transform, opacity;
}
.ex-hcard.is-on { opacity: 1; transform: scale(1); pointer-events: auto; }

.ex-hcard-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    text-decoration: none;
}
/* Hidden until the new poster actually loads — the popover is a single
   shared element reused for every card, so without this it would paint
   the PREVIOUS card's image until the new src finished downloading. JS
   adds .is-loaded on the img's load/error. */
.ex-hcard-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .18s ease; }
.ex-hcard-img.is-loaded { opacity: 1; }
.ex-hcard-media-fade {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000, transparent 55%);
    pointer-events: none;
}

.ex-hcard-body { padding: 14px 16px 16px; }
.ex-hcard-actions { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.ex-hcard-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 37px; height: 37px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5);
    background: rgba(20,16,31,.4);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.ex-hcard-act:hover { border-color: #fff; transform: scale(1.08); }
.ex-hcard-act:active { transform: scale(.94); }
.ex-hcard-play { background: #fff; color: #14101f; border-color: #fff; }
.ex-hcard-play:hover { background: #e6d8ff; border-color: #e6d8ff; }
.ex-hcard-add.is-added { background: var(--link-color, #ddb1f9); border-color: transparent; color: #fff; }
.ex-hcard-more { margin-left: auto; }

.ex-hcard-title {
    font-size: 1.22rem; font-weight: 800; color: #fff;
    line-height: 1.2; margin-bottom: 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-hcard-title.has-logo { white-space: normal; overflow: visible; }
.ex-hcard-logo {
    max-height: 54px; max-width: 82%;
    width: auto; height: auto;
    object-fit: contain; display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.8));
}
.ex-hcard-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
    font-size: .8rem; color: rgba(255,255,255,.72); margin-bottom: 7px;
}
.ex-hcard-score { color: #6ee7a4; font-weight: 700; }
.ex-hcard-hd {
    border: 1px solid rgba(255,255,255,.3); border-radius: 4px;
    padding: 0 5px; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
    color: rgba(255,255,255,.8);
}
.ex-hcard-genres {
    font-size: .8rem; color: rgba(255,255,255,.82);
    display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    margin-bottom: 8px;
}
.ex-hcard-dot { color: var(--link-color, #ddb1f9); }
.ex-hcard-syn {
    margin: 0; font-size: .82rem; line-height: 1.45;
    color: rgba(255,255,255,.6);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ex-hcard-syn:empty { display: none; }

/* 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: 0 14px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12);
}
.ex-card-lg:hover .ex-card-lg-img img,
.ex-card:hover .ex-card-img img { transform: scale(1.05); }
.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: 6px 2px 0;
}
.ex-card-lg-body h3 {
font-size: .66rem;
font-weight: 400;
color: rgba(255,255,255,.85);
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
letter-spacing: 0;
transition: color var(--dur-fast) var(--ease-out);
}

.ex-card-meta {
font-size: .72rem;
color: rgba(255,255,255,.55);
display: flex;
gap: 8px;
align-items: center;
margin: 0 2px;
letter-spacing: .015em;
font-variant-numeric: tabular-nums;
}

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

.ex-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 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: 12px;
overflow: hidden;
background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(15,15,20,1));
box-shadow: 0 8px 24px rgba(0,0,0,.4);
transition: box-shadow var(--dur-base) var(--ease-out), transform 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: .66rem;
font-weight: 400;
color: rgba(255,255,255,.85);
margin: 6px 2px 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
letter-spacing: 0;
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: 12px;
overflow: hidden;
}
.ex-card.ex-skel { aspect-ratio: 2/3; }
.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%); }
}

/* ---- UPCOMING RELEASES (banner stack) ---- */

.ex-releases {
display: flex;
flex-direction: column;
gap: 10px;
}
.ex-release-card {
position: relative;
display: block;
width: 100%;
height: 204px;
border-radius: 14px;
overflow: hidden;
background: #0e0f16;
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
isolation: isolate;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.ex-release-card:hover {
transform: translateY(-2px);
border-color: var(--accent, rgba(124,58,237,.55));
box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.ex-release-art {
position: absolute;
inset: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0;
transition: transform .4s ease;
}
a.ex-release-card:hover .ex-release-art { transform: scale(1.04); }
/* Left→right dark wash so the headline stays legible over any art. */
.ex-release-shade {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, #05060a 0%, rgba(5,6,10,.92) 26%, rgba(5,6,10,.55) 55%, rgba(5,6,10,.05) 100%),
linear-gradient(0deg, rgba(5,6,10,.55) 0%, transparent 45%);
}
.ex-release-body {
position: absolute;
z-index: 2;
left: 22px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
max-width: 70%;
}
.ex-release-pill {
display: inline-block;
font-style: italic;
font-weight: 800;
font-size: .8rem;
letter-spacing: .2px;
color: #1a1205;
background: linear-gradient(135deg, #ffd34d 0%, #f4b81e 100%);
padding: 3px 11px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(244,184,30,.28);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ex-release-headline {
font-weight: 900;
font-size: clamp(1.5rem, 4.4vw, 2.3rem);
line-height: 1;
letter-spacing: .5px;
color: #fff;
text-transform: uppercase;
text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.ex-release-date {
font-weight: 700;
font-size: .82rem;
color: #e7e9f2;
text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.ex-release-card.ex-skel { height: 204px; border-radius: 14px; }

@media (max-width: 640px) {
.ex-release-card, .ex-release-card.ex-skel { height: 166px; border-radius: 12px; }
.ex-release-body { left: 16px; max-width: 66%; gap: 3px; }
.ex-release-pill { font-size: .72rem; padding: 2px 9px; }
.ex-release-date { font-size: .74rem; }
}

/* ---- 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(221,177,249,.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(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ex-card-lg { width: 192px; min-width: 192px; }
.ex-continue-card { width: 240px; min-width: 240px; }
}

@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(0,0,0,.92) 0%, rgba(0,0,0,.45) 50%, transparent 100%),
        linear-gradient(to top, #000 0%, transparent 35%);
}
.ex-section { margin-top: 40px; }
.ex-section-title { font-size: 1.6rem; }
.ex-section-sub { font-size: .86rem; }
.ex-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ex-card-lg { width: 214px; min-width: 214px; }
.ex-continue-card { width: 260px; min-width: 260px; }
.ex-scroll-row { gap: 12px; }
.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: 52px; }
.ex-section-title { font-size: 1.8rem; margin-bottom: 0; }
.ex-section-head { margin-bottom: 24px; }
.ex-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.ex-card-lg { width: 248px; min-width: 248px; }
.ex-scroll-row { padding-right: 0; gap: 14px; }
}

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

body.sg-body {
background: #2b1557;
overflow-x: hidden;
}
/* keep the ambient purple wash behind the hero only — everything below the
   hero is pure black. The glow lives in the upper half, so a height shorter
   than the hero (100dvh / 75dvh on mobile) keeps the hero look while leaving
   a black buffer above the content. */
body.sg-body::before {
    position: absolute;
    inset: 0 0 auto 0;
    height: 80vh;
    height: 80dvh;
}

/* 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: 0;
/* Provided home background — used exactly as is: no dim filter, no
   darkening overlay, no colour orbs (those layers are hidden below). */
background-color: #000;
background-image:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 50%, rgba(0,0,0,0) 100%),
    url('images/home-bg.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
/* Match the landing page backdrop dimming (.landing-body::before). */
opacity: .75;
}
/* Keep the home hero image pristine — drop the darkening wash, the
   edge vignette and the coloured ambient orbs. */
.sg-hero-overlay,
.sg-hero-vignette,
.sg-hero-orb { display: none !important; }
@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;
}

/* Sparse twinkling starfield. Stars are stacked radial gradients so we
   can place ~15 of them without any JS or extra elements. Opacity
   breathes between low/high so it feels alive, not static. Sits behind
   the orbs so the colored glow drifts on top of the stars. */
.sg-hero-stars {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at  8% 22%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1px 1px at 22% 12%, rgba(216,180,254,.75), transparent 60%),
        radial-gradient(1px 1px at 38% 30%, rgba(255,255,255,.65), transparent 60%),
        radial-gradient(2px 2px at 52%  8%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(1px 1px at 64% 24%, rgba(184,159,249,.75), transparent 60%),
        radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,.6),  transparent 60%),
        radial-gradient(2px 2px at 92% 32%, rgba(255,255,255,.7),  transparent 60%),
        radial-gradient(1px 1px at 12% 62%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(1px 1px at 28% 78%, rgba(216,180,254,.6),  transparent 60%),
        radial-gradient(2px 2px at 42% 70%, rgba(255,255,255,.5),  transparent 60%),
        radial-gradient(1px 1px at 58% 86%, rgba(255,255,255,.65), transparent 60%),
        radial-gradient(1px 1px at 70% 64%, rgba(168,197,255,.75), transparent 60%),
        radial-gradient(1px 1px at 84% 80%, rgba(255,255,255,.6),  transparent 60%),
        radial-gradient(2px 2px at 18% 42%, rgba(255,255,255,.7),  transparent 60%),
        radial-gradient(1px 1px at 88% 52%, rgba(168,197,255,.7),  transparent 60%);
    background-repeat: no-repeat;
    animation: sg-stars-twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes sg-stars-twinkle {
    0%   { opacity: .38; }
    100% { opacity: .95; }
}

/* Halftone comic-print dots — the signature texture of comic-book
   reproduction. Direct brand tie to "Cyber*Comics*". Pans diagonally
   over a very long cycle so the texture reads as alive instead of
   static wallpaper. A radial mask fades the dots out at the edges so
   the pattern never frames the content with a hard boundary. */
.sg-hero-halftone {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: radial-gradient(rgba(192, 132, 252, .15) 1.2px, transparent 1.6px);
    background-size: 18px 18px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 25%, transparent 85%);
            mask-image: radial-gradient(ellipse 80% 70% at center, black 25%, transparent 85%);
    animation: sg-halftone-drift 90s linear infinite;
    mix-blend-mode: screen;
}
@keyframes sg-halftone-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 360px 240px; }
}

/* Cinematic vignette — darker corners pull the eye inward toward the
   wordmark. Final ambient layer; centered content sits above it via
   z-index: 1 on .sg-hero-content (set further below). */
.sg-hero-vignette {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        ellipse 80% 65% at 50% 50%,
        transparent 40%,
        rgba(2, 0, 10, .55) 88%,
        rgba(0, 0, 6, .85) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
    .sg-hero-stars,
    .sg-hero-halftone { animation: 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: "Comfortaa", "Quicksand", "Inter", system-ui, -apple-system, sans-serif;
font-size: 1.1rem;
font-weight: 500;
color: #fff;
letter-spacing: .01em;
line-height: 1;
margin-bottom: 4px;
text-shadow: 0 2px 30px rgba(0,0,0,.4);
/* Force "Cyber" + "Comics" to stay on a single line even if the
   viewport gets narrow. */
white-space: nowrap;
}
/* Brand wordmark third line — sits just under "Cyber Comics" and uses
   the same gradient as the "Comics" span so the alliance reads as
   part of the same mark. */
.sg-hero-alliance {
font-family: "Comfortaa", "Quicksand", "Inter", system-ui, -apple-system, sans-serif;
font-size: .58rem;
font-weight: 700;
letter-spacing: .42em;
text-indent: .42em; /* re-balance the optical center given the wide tracking */
text-transform: lowercase;
margin: 0 0 12px;
line-height: 1;
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;
}
.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; }
/* Explore popups kept plain — no per-pillar colour, just the quiet
   white-on-glass base. */
.sg-hero-pillar-watch,
.sg-hero-pillar-play,
.sg-hero-pillar-create { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.06); }

/* 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-alliance,
.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-alliance {
/* Carry the same shimmer the gradient text relies on, plus the rise. */
animation:
    sg-hero-rise .9s cubic-bezier(.16,1,.3,1) .24s forwards,
    sg-title-shimmer 12s cubic-bezier(.4,0,.6,1) infinite;
}
.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;
}

/* ---- Section header with inline filter (used by Recommended) ---- */
.sg-section-head {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
margin-bottom: 18px;
}
.sg-section-head .sg-section-title { margin: 0; }

/* ---- Mood filter chips ---- */
.sg-mood-bar {
display: flex; gap: 6px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; flex-wrap: nowrap;
}
.sg-mood-bar::-webkit-scrollbar { display: none; }
.sg-mood {
padding: 5px 14px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.08);
background: transparent;
color: var(--text-muted); font-size: .74rem; font-weight: 600;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
transition: all .15s;
-webkit-tap-highlight-color: transparent;
}
.sg-mood:hover  { color: #fff; border-color: rgba(255,255,255,.18); }
.sg-mood:active { transform: scale(.95); }
.sg-mood.active {
background: var(--link-color); border-color: var(--link-color); color: #fff;
box-shadow: 0 0 14px rgba(124,58,237,.35);
}

/* ---- 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 {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 16px;
background:
  linear-gradient(152deg, rgba(var(--gc, 199,155,255),.06), rgba(255,255,255,.012) 62%),
  rgba(255,255,255,.022);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
color: inherit;
overflow: hidden;
isolation: isolate;
transition: transform .24s cubic-bezier(.16,1,.3,1), border-color .24s ease, box-shadow .24s ease, background .24s ease;
-webkit-tap-highlight-color: transparent;
}
/* soft corner bloom in the guild's accent — quiet at rest, lit on hover */
.sg-guild-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(130% 130% at 0% 0%, rgba(var(--gc, 199,155,255),.18), transparent 52%);
opacity: 0;
transition: opacity .26s ease;
}
.sg-guild-card:active { transform: scale(.985); }
@media (hover: hover) {
.sg-guild-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--gc, 199,155,255),.42);
  box-shadow: 0 14px 30px rgba(0,0,0,.34), 0 8px 22px rgba(var(--gc, 199,155,255),.16);
}
.sg-guild-card:hover::before { opacity: 1; }
}

.sg-guild-icon {
position: relative;
width: 46px; height: 46px;
border-radius: 13px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: rgb(var(--gc, 199,155,255));
background: linear-gradient(150deg, rgba(var(--gc, 199,155,255),.20), rgba(var(--gc, 199,155,255),.05));
border: 1px solid rgba(var(--gc, 199,155,255),.24);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
transition: transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s ease;
}
.sg-guild-card:hover .sg-guild-icon {
transform: scale(1.06);
box-shadow: 0 8px 18px rgba(var(--gc, 199,155,255),.42), inset 0 1px 0 rgba(255,255,255,.16);
}

/* per-guild accent (rgb triplet, read by every rgba(var(--gc)) above) */
.sg-guild-artisan  { --gc: 251,146,60; }
.sg-guild-writer   { --gc: 199,155,255; }
.sg-guild-editor   { --gc: 103,232,249; }
.sg-guild-mangakas { --gc: 236,72,153; }
.sg-guild-comics   { --gc: 248,113,113; }

.sg-guild-info { flex: 1; min-width: 0; }
.sg-guild-info strong {
display: block;
font-size: .95rem;
font-weight: 700;
color: #fff;
letter-spacing: -.01em;
margin-bottom: 2px;
}
.sg-guild-info span {
font-size: .75rem;
color: var(--text-faint);
}

.sg-guild-arrow {
color: var(--text-faint);
flex-shrink: 0;
transition: transform .2s ease, color .2s ease;
}
.sg-guild-card:hover .sg-guild-arrow { transform: translateX(4px); color: rgb(var(--gc, 199,155,255)); }

/* 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 — wrapping grid so each card has room for icon + label + arrow
   on one line (5-across in a 900px column was too cramped). */
@media (min-width: 640px) {
.sg-guild-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 12px; }
.sg-guild-card { flex: none; }
}

/* ---- 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.pv-body .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(15,15,16,.96);
    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: 3px;
    text-decoration: none; color: #fff;
    font-size: .6rem; font-weight: 400; letter-spacing: .01em;
    flex: 1; min-width: 0; 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: #ddb1f9; border-radius: 50%;
    padding: 4px; stroke: #000;
    box-shadow: none;
}

/* 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) {
/* Account now lives in the bottom bar — drop the header pfp on mobile */
#hudProfile { display: none !important; }
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: the bottom bar is mobile-only. Its tabs move into the sidebar
   (.sb-primary) on wider screens, where the hamburger reveals them. */
@media (min-width: 769px) {
.sg-bottom-nav { display: none; }
}

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

@media (min-width: 640px) {
.sg-hero-title { font-size: 1.6rem; 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: 36px;
margin-bottom: 6px;
}

/* 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 .52s cubic-bezier(.22, 1, .36, 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: 44px; }
.cca-band-dots    { bottom: 3px; gap: 6px; }
}

/* ============================================
   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 6px;
padding: 3px 16px 6px;
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: 2px;
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(.92rem, 3.4vw, 1.25rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1;
margin: 0 0 2px;
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: .72rem;
color: rgba(255,255,255,.72);
font-weight: 500;
letter-spacing: .02em;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: none;          /* mobile: no room — desktop override re-shows */
}
@media (min-width: 768px) {
.cca-band-sub { display: block; }
}

.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: 6px 26px 10px; }
.cca-band-content { gap: 20px; }
.cca-band-title   { font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.cca-band-sub     { font-size: .78rem; }
.cca-band-eyebrow { font-size: .58rem; padding: 2px 10px 2px 8px; }
.cca-band-cta     { padding: 7px 16px; font-size: .72rem; gap: 6px; }
.cca-band-cta svg { width: 14px; height: 14px; }
}

@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; }
}

/* ============================================================
 * Calm-mode override for the band rotator.
 * The rotator was competing with the brand logo + main hero —
 * busy motifs, neon gradients, glowing CTAs. We keep the per-
 * band CSS variables (so themes can return) but visually flatten
 * everything except the words. Focus = the title + eyebrow + CTA
 * label, nothing else.
 * ============================================================ */

/* Hide the per-band motif/pattern layer (streaks, dots, panels). */
.cca-band-fx,
.cca-band-fx::before,
.cca-band-fx::after { display: none !important; }

/* Soften the ambient glow blobs to a barely-there tint. */
.cca-band-bg::before { opacity: .12 !important; filter: blur(70px); }
.cca-band-bg::after  { opacity: .08 !important; filter: blur(70px); animation: none !important; }

/* Bottom dark fade no longer needed without the busy bg. */
.cca-band::after { opacity: .35; }

/* Subtle neutral surface so each slide reads as a quiet card,
   not a poster. The per-band glow tints still bleed through. */
.cca-band {
background-color: rgba(15, 16, 26, .55);
clip-path: none;
border-radius: 12px;
}

/* Title — drop the moving gradient + shimmer; use a calm off-white. */
.cca-band-title {
text-shadow: 0 1px 2px rgba(0,0,0,.35);
color: rgba(255,255,255,.92);
}
.cca-band-title span {
background: none !important;
-webkit-text-fill-color: rgba(255,255,255,.92) !important;
color: rgba(255,255,255,.92) !important;
animation: none !important;
}

/* Eyebrow — flatten to a neutral muted chip, drop the live-pulse. */
.cca-band-eyebrow {
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.72) !important;
}
.cca-band-eyebrow::before {
background: rgba(255,255,255,.55) !important;
box-shadow: none !important;
animation: none !important;
}

/* Sub copy — a notch quieter so it doesn't shout. */
.cca-band-sub { color: rgba(255,255,255,.55); }

/* CTA — keep it tappable but lose the colored gradient + glow.
   Now a soft glassy chip; per-band themes survive only as a hairline tint. */
.cca-band-cta {
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.14) !important;
color: rgba(255,255,255,.92) !important;
box-shadow: none !important;
text-shadow: none;
font-weight: 700;
}
@media (hover: hover) {
.cca-band-cta:hover {
    background: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
    filter: none;
    transform: translateY(-1px);
}
}

/* Dot pager — already small; just dim it further. */
.cca-band-dot           { background: rgba(255,255,255,.20); }
.cca-band-dot.is-active { background: rgba(255,255,255,.65); }

/* Close button — quiet × pinned to the rotator's top-right. Hover only on
   pointer devices so it doesn't take a mobile tap to discover. */
.cca-band-close {
position: absolute;
top: 4px; right: 6px;
z-index: 6;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
background: rgba(0,0,0,.35);
color: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.08);
border-radius: 50%;
cursor: pointer;
opacity: .6;
transition: opacity .15s, background .15s, color .15s, transform .12s;
-webkit-tap-highlight-color: transparent;
}
.cca-band-close:hover {
opacity: 1;
background: rgba(0,0,0,.55);
color: #fff;
}
.cca-band-close:active { transform: scale(.92); }
.cca-band-close svg { display: block; }

/* "Show ads" — tiny pill that takes the rotator's place when dismissed. */
.cca-band-show {
display: inline-flex; align-items: center; gap: 5px;
margin: 0 0 8px;
padding: 4px 10px;
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.45);
border: 1px solid rgba(255,255,255,.06);
border-radius: 999px;
font-size: .68rem; font-weight: 600;
font-family: inherit;
letter-spacing: .04em;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
-webkit-tap-highlight-color: transparent;
}
.cca-band-show:hover {
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.85);
border-color: rgba(255,255,255,.14);
}
.cca-band-show svg { opacity: .85; }

/* 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: #ddb1f9;
--band-c2: #6366f1;
--band-c3: #dcc8ff;
--band-eyebrow: #dcc8ff;
--band-eyebrow-bg: rgba(139,92,246,.14);
--band-eyebrow-border: rgba(139,92,246,.4);
--band-eyebrow-dot: #c79bff;
--band-glow-a: rgba(199,155,255,.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(199,155,255,0) 12%, rgba(199,155,255,.55) 50%, rgba(199,155,255,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: #dcc8ff;
--band-eyebrow: #dcc8ff;
--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(199,155,255,.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); }
body.pf-body::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(124,58,237,.20), transparent 60%),
        radial-gradient(900px 540px at 90% 4%, rgba(244,114,182,.12), transparent 62%),
        linear-gradient(180deg, rgba(124,58,237,.04), transparent 40%);
    pointer-events: none;
    z-index: -1;
}

.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: 10px 0 0; line-height: 1.15;
}
/* Combined handle · member-id · presence strip — keeps each piece
   visible but collapses three stacked lines into one row. */
.pf-meta-row {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 6px 8px;
margin: 4px 0 0;
font-size: .78rem;
line-height: 1.3;
color: rgba(232,228,245,.58);
letter-spacing: .01em;
}
.pf-meta-row .pf-handle,
.pf-meta-row .pf-id,
.pf-meta-row .pf-presence {
margin: 0; padding: 0;
}
.pf-meta-row .pf-id { font-size: .72rem; color: var(--text-faint); }
.pf-meta-row .pf-joined { font-size: .72rem; color: var(--text-faint); white-space: nowrap; cursor: default; }
.pf-meta-row .pf-presence { color: var(--text-secondary); }
.pf-meta-sep {
color: rgba(232,228,245,.25);
font-size: .8rem;
user-select: none;
}
/* If presence text is empty, hide the trailing bullet so we don't get
   an orphan "· " on the right. */
.pf-meta-row .pf-presence:empty,
.pf-meta-row .pf-presence:empty + .pf-meta-sep,
.pf-meta-sep-presence:has(+ .pf-presence:empty) { display: none; }

/* Stats — glass chips */
.pf-stats {
display: flex; gap: 10px;
margin-top: 16px;
width: 100%; max-width: 360px;
}
.pf-stat {
flex: 1; min-width: 0;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
border-radius: 14px;
padding: 10px 8px;
font-size: .66rem; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.pf-stat:hover {
transform: translateY(-2px);
border-color: rgba(199,155,255,.35);
background: rgba(199,155,255,.07);
}
.pf-stat strong {
font-size: 1.25rem; font-weight: 800; color: #fff;
display: block; line-height: 1.1; margin-bottom: 3px;
}

/* Roles — subtle, low priority */
.pf-roles {
display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
margin-top: 10px;
}
.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: 8px;
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: 14px;
padding-top: 14px;
width: 100%;
max-width: 300px;
border-top: 1px solid rgba(232,228,245,.08);
}
.pf-btn-primary {
flex: 1;
padding: 11px 0; border-radius: 999px;
background: #ddb1f9; color: #000;
font-size: .82rem; font-weight: 700;
border: none; cursor: pointer;
box-shadow: 0 6px 18px rgba(221,177,249,.30);
-webkit-tap-highlight-color: transparent;
transition: transform .16s ease, filter .16s ease, box-shadow .2s ease, opacity .15s;
}
.pf-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(221,177,249,.45); }
.pf-btn-primary:active { opacity: .85; transform: scale(.98); }
.pf-btn-primary.pf-following {
background: rgba(255,255,255,.05);
border: 1px solid var(--border-color);
color: var(--text-secondary);
box-shadow: none;
}
.pf-btn-primary.pf-following:hover { border-color: #ef4444; color: #ef4444; filter: none; transform: translateY(-1px); }
.pf-btn-secondary {
flex: 1;
padding: 11px 0; border-radius: 999px;
background: rgba(255,255,255,.05); color: var(--text-secondary);
font-size: .82rem; font-weight: 600;
border: 1px solid rgba(255,255,255,.10);
text-decoration: none; text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s, background .15s, transform .16s ease;
}
.pf-btn-secondary:hover { border-color: var(--text-muted); color: var(--text-primary); background: rgba(255,255,255,.08); transform: translateY(-1px); }

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

.pf-tabs {
display: flex;
gap: 4px;
margin: 22px 14px 0;
padding: 5px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
border-radius: 999px;
}
.pf-tab {
flex: 1;
padding: 9px 4px;
background: transparent;
border: none;
border-radius: 999px;
color: var(--text-faint);
font-size: .8rem; font-weight: 600;
cursor: pointer;
transition: color .18s, background .18s, box-shadow .18s;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
}
.pf-tab:hover { color: var(--text-secondary); }
.pf-tab.active {
color: #fff;
font-weight: 700;
background: linear-gradient(135deg, #7c3aed, #a855f7);
box-shadow: 0 4px 14px rgba(124,58,237,.35);
}

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

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

.pf-item {
position: relative;
display: block;
aspect-ratio: 1/1;
overflow: hidden;
border-radius: 14px;
background: rgba(255,255,255,.03);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease;
}
.pf-item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.42); z-index: 2; }
.pf-item img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 460ms cubic-bezier(.22,1,.36,1);
}
.pf-item:hover img { transform: scale(1.06); }

/* 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(199,155,255,.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(199,155,255,.3);
    background: rgba(199,155,255,.08);
    color: #d4c2ff;
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}
.wf-oryx-btn:hover:not(:disabled) {
    background: rgba(199,155,255,.18);
    border-color: rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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: #c79bff;
    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-row-quote {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(199,155,255,.10);
    border: 1px solid rgba(199,155,255,.25);
}
.wf-oryx-quote {
    margin: 0;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.45;
    color: #f5f0ff;
}
.wf-oryx-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.wf-oryx-apply {
    background: linear-gradient(135deg, #7c3aed, #c79bff);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(124,58,237,.45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wf-oryx-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(124,58,237,.55);
}
.wf-oryx-apply:active { transform: translateY(0); }
.wf-oryx-loading {
    display: flex; gap: 6px; justify-content: center;
    padding: 14px 0;
}
.wf-oryx-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #c79bff;
    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(199,155,255,.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(199,155,255,.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(199,155,255,.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: #ddb1f9;
    color: #000;
    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(221,177,249,.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(199,155,255,.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: #c79bff;
    background: rgba(199,155,255,.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, #c79bff);
    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(199,155,255,.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(199,155,255,.35);
    color: #fff;
    transform: translateY(-1px);
}
.ws-nav-pill.active {
    background: linear-gradient(135deg, #7c3aed, #c79bff);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(124,58,237,.4), 0 0 0 1px rgba(199,155,255,.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(199,155,255,.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, #c79bff);
    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, #c79bff, #e2d4ff);
    box-shadow: 0 0 14px rgba(199,155,255,.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(199,155,255,.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(199,155,255,.18), rgba(124,58,237,.12));
    border: 1px solid rgba(199,155,255,.22);
    color: #d4c2ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    filter: drop-shadow(0 0 10px rgba(199,155,255,.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(199,155,255,.4); box-shadow: 0 0 0 3px rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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, #c79bff, #d4c2ff);
    border-radius: 5px;
    box-shadow: 0 0 16px rgba(199,155,255,.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(199,155,255,.5);
    background: rgba(0,0,0,.4);
    box-shadow: 0 0 0 3px rgba(199,155,255,.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(199,155,255,.08);
    border: 1px solid rgba(199,155,255,.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(199,155,255,.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, #c79bff);
    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(199,155,255,.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(199,155,255,.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: #ddb1f9;
    color: #000;
    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(221,177,249,.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: #000;
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;
}

/* Fullscreen: drop the 16:9 padding lock so the video fills the
   viewport and stays vertically centered on non-16:9 displays
   (laptop 16:10 / 3:2 panels would otherwise leave a black gap
   at the bottom). */
.w-player-wrap:fullscreen,
.w-player-wrap:-webkit-full-screen {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.w-player-wrap:fullscreen .w-player,
.w-player-wrap:-webkit-full-screen .w-player {
width: 100%;
height: 100%;
}
.w-player-wrap:fullscreen .w-player-ratio,
.w-player-wrap:-webkit-full-screen .w-player-ratio {
width: 100%;
height: 100%;
padding-top: 0;
}
.w-player-wrap:fullscreen .w-local-video,
.w-player-wrap:fullscreen .w-iframe,
.w-player-wrap:-webkit-full-screen .w-local-video,
.w-player-wrap:-webkit-full-screen .w-iframe {
width: 100%;
height: 100%;
object-fit: contain;
}

/* 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; }
.w-ext-link {
display: inline-block;
margin-top: 6px;
padding: 6px 14px;
border-radius: 999px;
background: var(--surface-2, #1f2937);
color: var(--accent, #60a5fa);
text-decoration: none;
font-size: .8rem;
font-weight: 500;
border: 1px solid rgba(96, 165, 250, .4);
}
.w-ext-link:hover { background: rgba(96, 165, 250, .12); }

/* ---- BUFFERING SPINNER (OtakuRun palette) ----
   A single clean arc rotating around a transparent center, using
   the OtakuRun orange gradient (#c79bff → #ddb1f9 → #a855f7) that
   the brand shield and wordmark already carry. Pointer-events:none
   so tap-to-pause / double-tap-seek gestures reach the video
   underneath. Lives inside .w-player-ratio so teardownPlayer()
   removes it with the rest of the player. */
.w-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 6;
}
.w-spinner.w-spinner-on { opacity: 1; }
/* Three equally-spaced dots in a row. Each pulses (scales up + brightens)
   over ~1s; the next starts half a pulse (.5s) behind the previous, so the
   highlight travels 1 → 2 → 3 as a smooth, infinitely-looping wave. The
   1.5s cycle = 3 dots × .5s stagger keeps the loop seamless. */
.w-spinner-dots {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.w-spinner-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #c79bff;            /* brand lavender */
    transform: scale(.6);
    opacity: .35;
    animation: w-bubble-pulse 1.5s ease-in-out infinite both;
    will-change: transform, opacity;
}
.w-spinner-dot:nth-child(1) { animation-delay: 0s; }
.w-spinner-dot:nth-child(2) { animation-delay: .5s; }
.w-spinner-dot:nth-child(3) { animation-delay: 1s; }
@keyframes w-bubble-pulse {
    0%   { transform: scale(.6);  opacity: .35; }
    33%  { transform: scale(1.25); opacity: 1; }   /* peak at ~.5s — when the next dot kicks off */
    66%  { transform: scale(.6);  opacity: .35; }   /* settled by ~1s — pulse lasts ~1s */
    100% { transform: scale(.6);  opacity: .35; }   /* rest the remaining .5s, then loop */
}
@media (prefers-reduced-motion: reduce) {
    .w-spinner-dot { animation: none; opacity: .8; transform: none; }
}
@media (max-width: 560px) {
    .w-spinner { width: 52px; height: 52px; }
    .w-spinner-dots { gap: 7px; }
    .w-spinner-dot { width: 11px; height: 11px; }
}

/* ---- 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;
/* Above the centered transport overlay (.w-vc-overlay, z-index 6) so the
   settings popup (Speed/Quality list) paints OVER the play buttons rather
   than being clipped behind them. The bar and overlay don't overlap
   spatially — only the upward-opening menu does. */
z-index: 7;
display: flex;
flex-direction: column;
gap: 2px;
padding: 42px 14px 8px;  /* top padding feathers the gradient over video */
background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.36) 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;
}
/* Bottom controls row — two clusters now: left (play-mini/volume/time) and
   right (gear/pip/captions/fullscreen). The transport controls (rewind/play/
   forward) live in a centered overlay over the video, so the row just pins
   its two side clusters to opposite edges. */
.w-vc-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
width: 100%;
}
.w-vc-group {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
.w-vc-group-r { justify-content: flex-end; }

/* In-player Sub/Dub segmented toggle. Lives in the right group of
   .w-vc-row so it's reachable in fullscreen (the toolbar toggle
   above the player only exists in windowed mode). Hidden via the
   [hidden] attribute when the current episode is sub-only / dub-only —
   buildAudioMenu() manages that. */
.w-vc-audio {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 2px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    flex-shrink: 0;
}
.w-vc-audio[hidden] { display: none; }
.w-vc-audio-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.78);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 5px 11px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.w-vc-audio-btn:hover:not(:disabled):not(.is-on) {
    background: rgba(255,255,255,.10);
    color: #fff;
}
.w-vc-audio-btn.is-on {
    /* Single solid brand purple with black text — same as the home-page
       solid buttons. */
    background: #ddb1f9;
    color: #000;
    box-shadow: 0 3px 10px rgba(221,177,249,.4);
}
.w-vc-audio-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
/* Missing variant: button stays clickable (click triggers a re-fetch)
   but visually subdued so the user knows it's not loaded yet. */
.w-vc-audio-btn.is-missing {
    opacity: .55;
    color: rgba(255,255,255,.55);
}
.w-vc-audio-btn.is-missing:hover {
    opacity: .85;
    color: #fff;
    background: rgba(255,255,255,.06);
}
/* Pending: spinner-ish pulse while a missing-variant fetch is in flight. */
.w-vc-audio-btn.is-pending {
    cursor: progress;
    animation: w-audio-pending 1s ease-in-out infinite;
}
@keyframes w-audio-pending {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* Floating toast over the player when a missing-variant fetch returns
   empty. Auto-removes after 4s (handled in JS). */
.w-variant-toast {
    position: absolute;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.82);
    color: #fff;
    font-size: .8rem;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    z-index: 7;
    pointer-events: none;
    animation: w-toast-in .25s ease;
}
@keyframes w-toast-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Mobile: tighter padding so the row still fits on a phone. */
@media (max-width: 560px) {
    .w-vc-audio-btn { padding: 4px 8px; font-size: .66rem; }
    .w-variant-toast { bottom: 90px; font-size: .72rem; padding: 8px 12px; }
}

/* Bigger, friendlier play button. Anchored in the center column of
   .w-vc-row so it always sits in the middle, slightly raised by its
   own border-radius + tint so the eye lands on it first. */
.w-vc-btn.w-vc-play {
width: 60px;
height: 60px;
border-radius: 50%;
background: transparent;
border: none;
}
.w-vc-btn.w-vc-play:hover  { background: transparent; transform: scale(1.06); }
.w-vc-btn.w-vc-play:active { transform: scale(.93); }
.w-vc-btn.w-vc-play svg { width: 34px; height: 34px; }
/* Rewind / Forward 10s buttons flank the play button in the centre column —
   larger than the secondary controls so they're easy to hit. */
.w-vc-center {
display: inline-flex;
align-items: center;
gap: 14px;
}
.w-vc-btn.w-vc-rew,
.w-vc-btn.w-vc-fwd {
color: #fff;
width: 50px;
height: 50px;
}
.w-vc-btn.w-vc-rew svg,
.w-vc-btn.w-vc-fwd svg { width: 32px; height: 32px; }
.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; }

/* While the stream is loading/buffering (spinner up), hide the center
   control cluster — the big play button and the rewind/forward (< >)
   buttons — so they don't sit on top of a loading frame. They reappear
   the instant playback is ready or the user pauses.
   NOTE: the matching "tap on a buffering frame must not start playback"
   guard lives in watch.js's video click handler — without it, a tap
   landing here while the buttons are hidden would fall through to the
   video and toggle play, which is what made rewind/forward feel like
   they needed several taps. */
.w-player-ratio.w-vc-loading .w-vc-center {
    opacity: 0;
    pointer-events: none;
}

/* ----- Double-tap gesture feedback overlay -----
   Sits above the <video>, below the control bar. Pointer-events: none so
   gestures keep reaching the video. A single .w-gesture-fx-on toggle plus
   a data-gesture attribute light up exactly one of the three zones. */
.w-gesture-fx {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
pointer-events: none;
}
.w-gesture-fx-zone {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #fff;
opacity: 0;
transform: scale(.92);
transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
text-shadow: 0 2px 14px rgba(0,0,0,.55);
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
}
.w-gesture-fx-zone svg {
filter: drop-shadow(0 2px 14px rgba(0,0,0,.6));
}
/* Radial halo behind the icon for that "tap landed" feel. */
.w-gesture-fx-zone::before {
content: "";
position: absolute;
width: 120px; height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
opacity: 0;
transition: opacity .35s ease, transform .35s ease;
transform: scale(.6);
pointer-events: none;
}
.w-gesture-fx[data-gesture="rewind"]   .w-gesture-fx-left,
.w-gesture-fx[data-gesture="forward"]  .w-gesture-fx-right,
.w-gesture-fx[data-gesture="fs"]       .w-gesture-fx-center,
.w-gesture-fx[data-gesture="fs-enter"] .w-gesture-fx-center,
.w-gesture-fx[data-gesture="fs-exit"]  .w-gesture-fx-center {
animation: w-gesture-pop .65s ease forwards;
}
.w-gesture-fx[data-gesture="rewind"]   .w-gesture-fx-left::before,
.w-gesture-fx[data-gesture="forward"]  .w-gesture-fx-right::before,
.w-gesture-fx[data-gesture="fs"]       .w-gesture-fx-center::before,
.w-gesture-fx[data-gesture="fs-enter"] .w-gesture-fx-center::before,
.w-gesture-fx[data-gesture="fs-exit"]  .w-gesture-fx-center::before {
animation: w-gesture-halo .65s ease forwards;
}
@keyframes w-gesture-pop {
0%   { opacity: 0; transform: scale(.7);  }
25%  { opacity: 1; transform: scale(1.08); }
60%  { opacity: 1; transform: scale(1);    }
100% { opacity: 0; transform: scale(1.05); }
}
@keyframes w-gesture-halo {
0%   { opacity: 0; transform: scale(.6); }
25%  { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(1.6); }
}

.w-vc-btn {
flex-shrink: 0;
width: 48px;
height: 48px;
padding: 0;
border: none;
border-radius: 10px;
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; width: 31px; height: 31px; }

/* ---- Timeline ----
   Full-width across the top of the control bar. The .w-vc-seek itself
   is a 20px tall hit zone (oversized so flick-seeks on touch land
   reliably) with the visible rail centered inside. Rail thickness
   grows on hover/scrub for the classic YouTube "bar swells when you
   touch it" feel. */
.w-vc-seek {
width: 100%;
position: relative;
height: 20px;
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: 6px;
transform: translateY(-50%);
border-radius: 3px;
pointer-events: none;
transition: height .15s ease;
}
.w-vc-seek-track { right: 0; background: rgba(255,255,255,.25); }
.w-vc-seek-buf   { background: rgba(255,255,255,.42); width: 0; }
.w-vc-seek-fill  {
    width: 0;
    /* Played progress is white; the intro/outro markers carry the purple. */
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255, .35);
}
.w-vc-seek-thumb {
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
/* Scrubber dot always visible (scale 1), not just on hover. Plain white
   dot — no black outline ring, just a soft purple glow. */
transform: translate(-50%, -50%) scale(1);
transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
pointer-events: none;
z-index: 3;   /* above the intro/outro marks */
box-shadow: 0 0 10px rgba(221,177,249, .6);
}
.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: 8px; }
/* On hover the dot becomes outline-only (no fill) — a white ring with a
   see-through centre, like the mute button. */
.w-vc-seek:hover .w-vc-seek-thumb {
    background: transparent;
    box-shadow: inset 0 0 0 2px #fff, 0 0 10px rgba(221,177,249, .6);
}

/* Intro / outro stripes — colored sections of the rail showing OP/ED
   windows so the user can see them coming. Positioned in absolute %
   coordinates by paintSkipMarkers() in watch.js. Sit between buf and
   fill in DOM order (z-stack), so the fill paints over them on the
   played portion and they remain visible on the unplayed remainder
   of the window. Tinted with the OtakuRun orange palette but lower
   opacity than the fill so the played-progress stays the dominant
   accent. */
.w-vc-seek-mark {
    position: absolute;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 2px;
    pointer-events: none;
    transition: height .15s ease;
    z-index: 2;   /* sit ABOVE the purple fill so the intro/outro lines stay
                     visible even after the playhead passes them */
}
.w-vc-seek-mark[hidden] { display: none; }
.w-vc-seek-mark-intro,
.w-vc-seek-mark-outro {
    background: #ddb1f9;   /* solid brand purple — same band for both intro/outro */
}
.w-vc-seek:hover .w-vc-seek-mark { height: 8px; }

/* Hover/scrub time bubble — shows the timestamp at the cursor position
   above the bar (e.g. "1:45"), positioned by watch.js, toggled via .is-on. */
.w-vc-seek-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 7px;
    background: rgba(0,0,0,.9);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-family: "Quicksand", "Comfortaa", system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    z-index: 5;
}
.w-vc-seek-tip.is-on { opacity: 1; }

/* ---- Time readout ---- */
.w-vc-time {
flex-shrink: 0;
font-family: "Quicksand", "Comfortaa", system-ui, sans-serif;
font-size: .78rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: rgba(255,255,255,.88);
min-width: 40px;
text-align: left;
letter-spacing: .03em;
}

/* ---- 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 — two-level: root (category list) + per-
       category panel (Quality / Captions / Audio). Only one of root /
       panel is visible at a time. ---- */
.w-vc-settings { position: relative; flex-shrink: 0; margin-right: -12px; }
/* Pull the PiP icon (and via the gear's own negative margin, the gear too)
   closer to the CC icon that follows it in the bottom-bar right group. */
.w-vc-pip { margin-right: -12px; }
/* And tighten CC → fullscreen the same way. */
.w-vc-cc { margin-right: -12px; }
/* NOTE: the center play / rewind / forward buttons are NOT tightened with a
   negative margin — they live in the big-button overlay (.w-vc-center has only
   a 4px gap), so a -12px margin made those large buttons overlap and steal each
   other's clicks. They're brought closer by trimming their box padding instead
   (see .w-vc-overlay sizing in watch.php). */
.w-vc-set-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    min-width: 288px;
    max-width: 380px;
    background: rgba(0,0,0,.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: 14px;
    padding: 8px;
    box-shadow: 0 18px 42px rgba(0,0,0,.6);
    z-index: 30;
    overflow: hidden;
}
/* [hidden] correctness — UA default is overridden by our flex/grid
   declarations on these elements, so re-assert it. */
.w-vc-set-menu[hidden],
.w-vc-set-section[hidden],
.w-vc-set-row[hidden],
.w-vc-set-root[hidden] { display: none !important; }

/* ---- Root view: one row per category ---- */
.w-vc-set-root {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.w-vc-set-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.92);
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 600;
    text-align: left;
    transition: background .12s ease;
}
.w-vc-set-row:hover { background: rgba(255,255,255,.06); }
.w-vc-set-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.w-vc-set-row-label { color: #fff; }
.w-vc-set-row-value {
    color: rgba(255,255,255,.55);
    font-size: .82rem;
    font-weight: 500;
    text-align: right;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w-vc-set-row-chev {
    color: #fff;
    display: inline-flex;
    align-items: center;
}

/* ---- Sub-panel: back button + options list ---- */
.w-vc-set-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.w-vc-set-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.w-vc-set-back:hover { background: rgba(255,255,255,.06); color: #fff; }
.w-vc-set-back span { font-size: .72rem; letter-spacing: .12em; }
.w-vc-set-opts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 380px;
    overflow-y: auto;
}
.w-vc-set-opt {
    border: none;
    background: transparent;
    color: rgba(255,255,255,.85);
    text-align: left;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: .9rem;
    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;
}
/* Quality options carry a secondary note ("Full HD", "HD", "SD") next
   to the resolution number. Render as label + chip on one row. */
.w-vc-set-opt-quality {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.w-vc-set-opt-label { font-weight: 700; }
.w-vc-set-opt-note {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
}
.w-vc-set-opt.is-on .w-vc-set-opt-note { color: rgba(255,255,255,.85); }
.w-vc-set-empty {
    padding: 14px 12px;
    color: rgba(255,255,255,.55);
    font-size: .78rem;
    text-align: center;
}

/* ---- Mobile: tighten layout, drop volume slider (mute button stays) ---- */
@media (max-width: 560px) {
.w-vc { padding: 32px 8px 6px; }
.w-vc-row { gap: 4px; }
.w-vc-group { gap: 2px; }
.w-vc-time { min-width: 36px; font-size: .72rem; }
.w-vc-vol { display: none; }
/* Smaller bottom-bar control icons on phones (play/next/mute/gear/pip/cc/
   fullscreen) — desktop sizes are untouched. */
.w-vc-btn { width: 38px; height: 38px; }
.w-vc-btn svg { width: 22px; height: 22px; }
.w-vc-seek { height: 24px; }  /* taller hit zone for thumbs */
/* (The Sub/Dub toggle is now lifted into the .w-vc-corner cluster at the
   player's top-right for ALL sizes — see watch.php — so the old mobile-only
   float here was removed.) */
}

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

.w-autonext {
position: absolute;
inset: 0;
background: rgba(0,0,0,.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: #000;
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;
}

/* Provider chips — filter wServers by upstream source. Hidden when
   only one provider has servers for this episode (set in watch.js). */
.w-provider-row {
display: flex;
gap: 4px;
align-items: center;
margin-right: 6px;
}
.w-provider-row[hidden] { display: none; }
/* Provider chips ("All", "animepahe (3)") are hidden from the player
   UI — the server-row + stall watchdog handle source switching now,
   so the chips would just be visual clutter. The DOM is kept intact
   so presentSources() / writeProviderPref() keep working; if we ever
   want them back, removing this single rule restores them. */
#wProviders { display: none !important; }
.w-provider-chip {
padding: 4px 9px;
border-radius: 999px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-muted);
font-size: .65rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
transition: all .12s;
}
.w-provider-chip:hover {
border-color: var(--link-color);
color: var(--link-color);
}
.w-provider-chip.active {
background: var(--link-color);
border-color: var(--link-color);
color: #fff;
}
.w-provider-chip.empty {
opacity: .55;
border-style: dashed;
}
.w-provider-chip.empty:hover {
opacity: 1;
}

/* Inline message in the wServers row when the user has filtered to a
   provider with no streams for the current episode. */
.w-server-empty {
font-size: .68rem;
color: var(--text-muted);
padding: 5px 4px;
margin-right: 6px;
align-self: center;
}

.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: #000;
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: #000;
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: #000;
}
/* Kill the site-wide purple ambient glow overlay on the admin page —
   admin stays a clean neutral greyscale, not the global violet wash. */
body.adm-body::before,
body.adm-body::after { display: none !important; }
body.adm-body .hero,
body.adm-body .footer { display: none; }

.adm {
display: flex;
gap: 22px;
align-items: flex-start;
min-height: calc(100vh - 58px);
max-width: 1320px;
margin: 0 auto;
padding: 24px 22px 56px;
}

/* ---- SIDEBAR (floating glass) ---- */
.adm-side {
width: 220px;
min-width: 220px;
padding: 14px 10px;
position: sticky;
top: 78px;
max-height: calc(100vh - 100px);
overflow-y: auto;
border: none;
border-radius: 20px;
background: #000;
}
.adm-side-head {
padding: 8px 12px 16px;
margin-bottom: 8px;
border-bottom: 1px solid #2e2e2e;
}
.adm-side-logo {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1rem;
font-weight: 800;
color: var(--text-heading);
letter-spacing: .06em;
}
.adm-side-logo::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #e0e0e0;
box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.adm-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 8px;
}
.adm-nav-sec {
padding: 12px 14px 4px;
margin-top: 10px;
border-top: 1px solid rgba(255,255,255,.06);
font-size: .64rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #6a6a6a;
}
.adm-nav-sec:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.adm-nav-item {
position: relative;
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 .14s, color .14s;
-webkit-tap-highlight-color: transparent;
}
.adm-nav-item svg { color: #888; transition: color .14s; }
.adm-nav-item:hover { background: #242424; color: #fff; }
.adm-nav-item:hover svg { color: #ddd; }
.adm-nav-item.active {
background: #2a2a2a;
color: #fff;
font-weight: 600;
}
.adm-nav-item.active::before {
content: "";
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 17px;
border-radius: 3px;
background: #e0e0e0;
}
.adm-nav-item.active svg { color: #fff; }
.adm-nav-item svg { flex-shrink: 0; }

/* ---- MAIN AREA ---- */
.adm-main {
flex: 1;
min-width: 0;
padding: 0;
}

/* ---- DASHBOARD HERO ---- */
.adm-hero {
position: relative;
overflow: hidden;
border-radius: 16px;
padding: 26px 24px 28px;
margin-bottom: 14px;
border: 1px solid #2e2e2e;
background: #1d1d1d;
box-shadow: 0 8px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.03);
}
.adm-hero-glow { display: none; }
.adm-hero-text { position: relative; z-index: 1; }
.adm-hero-eyebrow {
display: inline-block;
font-size: .68rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #9a9a9a;
margin-bottom: 8px;
}
.adm-hero-title {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -.015em;
color: var(--text-heading);
margin: 0 0 6px;
}
.adm-hero-sub {
font-size: .9rem;
color: var(--text-muted);
margin: 0;
}

.adm-page-title {
position: relative;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -.01em;
color: var(--text-heading);
margin: 0 0 22px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-color);
}
.adm-page-title::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 42px;
height: 2px;
border-radius: 2px;
background: #d0d0d0;
}
.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: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 26px;
}
.adm-stat-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 18px;
border-radius: 16px;
border: 1px solid #2e2e2e;
background: #1d1d1d;
box-shadow: 0 8px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.03);
}
.adm-stat-ic {
flex: 0 0 auto;
width: 46px; height: 46px;
display: grid;
place-items: center;
border-radius: 13px;
color: #cfcfcf;
background: #262626;
border: 1px solid #383838;
}
.adm-stat-meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
/* Clickable dashboard stat cards — jump to the matching tab. */
.adm-stat-link {
cursor: pointer;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
-webkit-tap-highlight-color: transparent;
}
.adm-stat-link:hover {
transform: translateY(-3px);
border-color: #444;
background: #222;
box-shadow: 0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.adm-stat-link:focus-visible {
outline: 2px solid rgba(199,155,255,.6);
outline-offset: 2px;
}
.adm-stat-num {
font-size: 1.7rem;
font-weight: 800;
color: var(--text-heading);
line-height: 1;
}
.adm-stat-label {
font-size: .66rem;
font-weight: 600;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: .06em;
}

/* 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: 12px 16px;
border-radius: 12px;
background: #1a1a1a;
border: 1px solid #2a2a2a;
text-decoration: none;
color: inherit;
transition: border-color .14s, background .14s, transform .14s;
}
.adm-recent-item:hover { border-color: #3c3c3c; background: #212121; transform: translateX(2px); }
.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: inline-flex;
gap: 4px;
background: #1a1a1a;
border-radius: 12px;
padding: 4px;
border: 1px solid #2a2a2a;
margin-bottom: 18px;
}
.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: #ededed;
color: #141414;
box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* ---- 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: 16px;
border: 1px solid #2a2a2a;
background: #161616;
box-shadow: 0 8px 26px rgba(0,0,0,.22);
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(255,255,255,.04); }
.adm-table a { color: #d6d6d6; }

.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(255,255,255,.08); color: #fff; }
.adm-act-danger { color: var(--text-faint); }
.adm-act-danger:hover { background: rgba(239,68,68,.08); color: #ef4444; }

/* Per-row ⋯ dropdown menu (Users table). */
.adm-rmenu { position: relative; display: inline-block; }
.adm-rmenu-btn {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--text-secondary);
    padding: 4px 12px;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: .08em;
}
.adm-rmenu-btn:hover {
    background: rgba(124,58,237,.1);
    color: var(--link-color);
    border-color: rgba(124,58,237,.3);
}
.adm-rmenu-pop {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    min-width: 180px;
    padding: 4px;
    background: #1a1232;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(0,0,0,.5);
}
.adm-rmenu.open .adm-rmenu-pop { display: block; }
.adm-rmenu-pop button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-color);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.adm-rmenu-pop button:hover { background: rgba(124,58,237,.14); color: var(--link-color); }
.adm-rmenu-pop button.danger { color: #f87171; }
.adm-rmenu-pop button.danger:hover { background: rgba(239,68,68,.12); color: #ef4444; }

/* "Replace API key" link button — shown only when a key is already saved. */
.adm-key-toggle {
    background: none;
    border: none;
    color: var(--link-color);
    padding: 0;
    margin: 4px 0 14px;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.adm-key-toggle:hover { color: #d4c2ff; }

/* Inline expanded details row (Users table — per-user reveal). */
.adm-user-detail td {
    background: rgba(124,58,237,.05);
    padding: 14px 18px;
    border-top: 1px dashed rgba(124,58,237,.22);
}
.adm-user-detail-wrap {
    position: relative;
    padding-right: 36px;
}
.adm-user-detail-close {
    position: absolute;
    top: -4px;
    right: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(255,255,255,.05);
    color: var(--text-faint);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.adm-user-detail-close:hover { background: rgba(239,68,68,.15); color: #f87171; }
.adm-user-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.adm-user-detail-lbl {
    display: block;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    margin-bottom: 4px;
    font-weight: 600;
}
.adm-user-detail-val {
    display: block;
    font-size: .9rem;
    color: var(--text-color);
}
/* Owner-only password (hash) row in the user detail panel. */
.adm-user-detail-pw {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.adm-pw-hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    color: #e4d7ff;
    background: rgba(221,177,249,.1);
    border: 1px solid rgba(199,155,255,.28);
    border-radius: 8px;
    padding: 7px 10px;
    word-break: break-all;
    user-select: all;
}

/* Avatar pill next to a username in the users table. */
.adm-user-cell { display: inline-flex; align-items: center; gap: 9px; }
.adm-user-pfp {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, #6d54a8, #2a2140);
    border: 1px solid rgba(255,255,255,.12);
}
.adm-user-pfp b {
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.adm-user-pfp img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.adm-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: .68rem;
font-weight: 700;
background: #2a2a2a;
color: #c8c8c8;
}

.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 { padding: 14px 12px 44px; gap: 0; }
.adm-main { padding: 0; }
.adm-page-title { font-size: 1.2rem; }
.adm-hero { padding: 22px 20px 24px; border-radius: 16px; }
.adm-hero-title { font-size: 1.35rem; }
.adm-stat-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.adm-stat-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px; }
.adm-stat-ic { width: 38px; height: 38px; }
.adm-stat-num { font-size: 1.3rem; }
.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: 58px;
/* Unified chrome — matches the OtakuRun / MovieVault floating header:
   transparent at the top of the page, fading to a solid black backing
   as the user scrolls. The black backing + bottom border live on the
   ::before layer (driven by --nav-fade) so the brand/tabs/icons never
   fade with it. No backdrop blur — the chrome doesn't use one. */
background: transparent;
-webkit-backdrop-filter: none;
        backdrop-filter: none;
border-bottom: none;
box-shadow: none;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s;
}
/* Scroll-driven black backing — mirrors .oh-headerbar / .mvx-headerbar.
   Opacity ramps 0 → 1 over the first ~120px scrolled (set on #mainNavbar
   by the driver in header.php). Sits behind the nav content. */
.navbar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #000;
border-bottom: 1px solid rgba(255,255,255,.06);
opacity: var(--nav-fade, 0);
pointer-events: none;
transition: opacity .7s cubic-bezier(.22, 1, .36, 1);
will-change: opacity;
}
.navbar.nav-hidden {
transform: translateY(-100%);
}

/* offset body content for fixed navbar */
body { padding-top: 58px; }
/* 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); }
.profile-settings-btn.is-active { color: var(--link-color); }

/* Device display preferences (toggled on the Settings page) */
[data-reduce-motion="1"] *,
[data-reduce-motion="1"] *::before,
[data-reduce-motion="1"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}
/* Data saver: drop the decorative background blooms/auroras to cut paint */
[data-data-saver="1"] .set-page::before,
[data-data-saver="1"] .ss::before,
[data-data-saver="1"] .hp-aurora,
[data-data-saver="1"] .hp-opt-glow { display: none !important; }

/* 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(199,155,255,.18); border-bottom-color: rgba(199,155,255,.55); }
.pr-hl-ai:hover { background: rgba(199,155,255,.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(199,155,255,.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(199,155,255,.5); margin: 4px 0; }
.pr-sug-new {
    font-family: Georgia, serif;
    font-size: .86rem;
    color: #f2ecff;
    padding: 8px 10px;
    border-left: 2px solid rgba(199,155,255,.55);
    background: rgba(199,155,255,.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(199,155,255,.3);
    background: rgba(199,155,255,.08);
    color: #d4c2ff; font-size: .78rem; font-weight: 700; cursor: pointer;
    transition: all .2s ease;
}
.pr-modal-oryx:hover:not(:disabled) { background: rgba(199,155,255,.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: inline-flex; }
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(221,177,249,.2), 0 4px 12px rgba(221,177,249,.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, #ddb1f9);
    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: 58px; padding: 0 14px; }
body { padding-top: 58px; }
.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; }
/* Two-column poster grid on mobile — a single full-width column turned the
   Story Flow into a ~2900px wall of dark covers that swallowed the page.
   A 2-up grid keeps it compact (matches the desktop poster-wall intent and
   the rest of the site's mobile grids). */
.sg-flow-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.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 14px; margin: 24px 0 0; }
.ex-section-head { margin-bottom: 11px; }
.ex-section-title { font-size: 1.1rem; }
.ex-section-sub { font-size: .72rem; }
/* Denser cards so the rails/grid don't read as empty — ~3 across with a
   peek, instead of the old 2-and-a-bit. */
.ex-scroll-row { gap: 10px; padding-right: 14px; }
.ex-card-lg { width: 146px; min-width: 146px; }
.ex-continue-card { width: 198px; min-width: 198px; }
.ex-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.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: #1a1726; 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-guild-mangakas { background: #c79bff22; color: #dcc8ff; }
.lz-guild-comics   { background: #fb923c22; color: #fdba74; }

.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);
    /* Sits above the chat header (z-index 1100) so the panel's top
       isn't clipped by the header bar. */
    z-index: 1200; 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-content button visually
   but keep image-attach + sticker buttons reachable. */
.msg-page .msg-emoji-wrap { order: 1; }
.msg-page .msg-input       { order: 2; }
.msg-page #shareBtn        { display: none !important; }
.msg-page #imageAttachBtn   { order: 1; }
.msg-page #stickerBtn       { order: 3; }
.msg-page #imageGalleryBtn  { order: 4; }
.msg-page .msg-voice-btn,
.msg-page .msg-send-btn    { order: 5; }

.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; }
}

/* Empty state — right-side accessory buttons are visible, send hidden. */
body.msg-page .msg-input-area .msg-voice-btn { display: flex !important; }
body.msg-page .msg-input-area .msg-send-btn  { display: none !important; }
/* Typing state — sticker, picture and voice collapse; send takes over. */
body.msg-page .msg-input-area.has-text .msg-voice-btn,
body.msg-page .msg-input-area.has-text #stickerBtn,
body.msg-page .msg-input-area.has-text #imageGalleryBtn { display: none !important; }
body.msg-page .msg-input-area.has-text .msg-send-btn    { display: flex !important; }

/* Camera button picks up the send-button gradient + glow while the
   user is typing, signalling it's an active control alongside send. */
body.msg-page .msg-input-area.has-text #imageAttachBtn {
    background: var(--m-grad) !important;
    color: #05060e !important;
    border-color: transparent !important;
    box-shadow:
        0 6px 18px -6px rgba(199, 155, 255, .55),
        0 0 22px -8px rgba(221, 177, 249, .55) !important;
}
body.msg-page .msg-input-area.has-text #imageAttachBtn:hover {
    filter: brightness(1.1);
}

/* ----- 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: 20000;
    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;
}

/* --- Wide variant (16:9 covers): same controls, different mask --- */
.avc-card.avc-card-wide { width: min(720px, 100%); }
.avc-head .avc-sub {
    margin: 4px 0 0;
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 400;
}
.avc-stage.avc-stage-wide {
    aspect-ratio: 16 / 9;
}
/* Solid white frame around the visible 16:9 area, with a thin guide grid. */
.avc-mask.avc-mask-wide {
    background: transparent;
    box-shadow:
        0 0 0 9999px rgba(0,0,0,.55),
        0 0 0 2px rgba(255,255,255,.8) inset;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.16) 1px, transparent 1px);
    background-size: 33.333% 33.333%;
}

.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); }

/* The brand fill always carries black text (never white-on-purple). */
.access-gate-primary { color: #000; }

/* ---- Watch-page guest gate (.wgate) --------------------------------
   Guests get the episode, not a wall: it loads and holds on its first
   frame. The overlay starts invisible (it only blocks interaction),
   shows a big play button once the frame is up, and dims the frame
   behind a short note if the visitor closes the sign-in popup. */
.access-gate.wgate {
    flex-direction: column;
    gap: 16px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background .35s ease;
}
.access-gate.wgate.is-declined {
    /* Dim only — the paused frame stays readable underneath. */
    background: rgba(4, 3, 10, .6);
}

.wgate-play {
    display: none;
    width: 86px; height: 86px;
    align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(10, 8, 18, .5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background .2s, border-color .2s;
    animation: wgatePlayIn .35s ease-out both;
}
.wgate-play svg { width: 34px; height: 34px; margin-left: 4px; }
.wgate-play:hover { transform: scale(1.05); background: rgba(20, 16, 32, .62); border-color: rgba(255, 255, 255, .38); }
.wgate-play:active { transform: scale(.97); }
.access-gate.wgate.is-ready .wgate-play { display: flex; }
.access-gate.wgate.is-declined .wgate-play { display: none; }

@keyframes wgatePlayIn {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}

.access-gate.wgate .wgate-card { display: none; }
.access-gate.wgate.is-declined .wgate-card {
    display: flex;
    animation: wgatePlayIn .3s ease-out both;
}
.wgate-card svg { color: rgba(255, 255, 255, .72); }

@media (max-width: 620px) {
    .wgate-play { width: 66px; height: 66px; }
    .wgate-play svg { width: 26px; height: 26px; }
    .access-gate.wgate .wgate-card h3 { font-size: 1.05rem; }
    .access-gate.wgate .wgate-card p { font-size: .84rem; }
}

/* ============================================================
   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, #c79bff);
    color: var(--lz2-accent, #c79bff);
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 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(199,155,255,.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;
}
.lz2-credit {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 10px; padding: 6px 10px;
    background: var(--lz2-surface); border-radius: 999px;
    font-size: .82rem; color: var(--text-secondary);
}
.lz2-credit-label { color: var(--lz2-dim); }
.lz2-credit-name { color: var(--text-heading); font-weight: 600; }
.lz2-credit-link { color: inherit; text-decoration: none; }
.lz2-credit-link:hover .lz2-credit-name { color: var(--lz2-accent); }
.lz2-credit-sub {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    background: #ff0033; color: #fff !important;
    font-weight: 600; font-size: .78rem;
    text-decoration: none; line-height: 1;
}
.lz2-credit-sub:hover { background: #d4002a; }

/* 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: 220px;
    background: var(--bg-input);
    border: 0;
    border-radius: var(--lz2-radius-sm);
    padding: 12px;
    color: var(--text-primary);
    font-size: .94rem; font-family: inherit;
    line-height: 1.55;
    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;
}

/* Notepad toolbar — sits above the textarea, sticky inside the pane. */
.lz2-notes-toolbar {
    display: flex; align-items: center; gap: 2px;
    padding: 5px;
    margin-bottom: 8px;
    background: var(--bg-input);
    border-radius: var(--lz2-radius-sm);
    flex-wrap: wrap;
}
.lz2-tb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    padding: 0; background: transparent; border: 0;
    color: var(--text-secondary);
    border-radius: 6px; cursor: pointer;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.lz2-tb-btn:hover  { background: rgba(255,255,255,.08); color: var(--text-primary); }
.lz2-tb-btn:active { transform: scale(.92); }
.lz2-tb-btn.active { background: var(--lz2-accent); color: #fff; }
.lz2-tb-btn svg    { width: 16px; height: 16px; }
.lz2-tb-sep {
    width: 1px; height: 18px;
    background: rgba(255,255,255,.10);
    margin: 0 4px;
}
.lz2-tb-spacer { flex: 1 1 auto; }

/* Preview pane mirrors the textarea slot when the user toggles preview. */
.lz2-notes-preview {
    min-height: 220px;
    background: var(--bg-input);
    border-radius: var(--lz2-radius-sm);
    padding: 14px;
    color: var(--text-primary);
    font-size: .94rem; line-height: 1.6;
    overflow-wrap: anywhere;
}
.lz2-notes-preview h1,
.lz2-notes-preview h2,
.lz2-notes-preview h3 { color: var(--text-heading); margin: 12px 0 8px; }
.lz2-notes-preview p  { margin: 8px 0; }
.lz2-notes-preview ul { padding-left: 20px; margin: 8px 0; list-style: disc; }
.lz2-notes-preview li { margin: 4px 0; }
.lz2-notes-preview blockquote {
    border-left: 3px solid var(--lz2-accent);
    padding: 2px 12px; margin: 8px 0;
    color: var(--text-secondary);
    background: rgba(255,255,255,.02);
    border-radius: 0 6px 6px 0;
}
.lz2-notes-preview code {
    background: var(--bg-page);
    padding: 1px 6px; border-radius: 4px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .85em;
}
.lz2-notes-preview pre {
    background: var(--bg-page);
    padding: 12px; border-radius: var(--lz2-radius-sm);
    overflow-x: auto;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .85em;
}
.lz2-notes-preview pre code { background: transparent; padding: 0; }
.lz2-notes-preview a { color: var(--lz2-accent); }
.lz2-notes-preview-empty {
    color: var(--lz2-dim); font-style: italic;
}

/* Click-to-seek video timestamp pill, used inside admin notes and preview. */
.lz2-ts-link {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(199,155,255,.16);
    color: #dcc8ff;
    padding: 1px 9px;
    margin: 0 1px;
    border-radius: 999px; border: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .82em; font-weight: 600;
    cursor: pointer;
    vertical-align: baseline;
    transition: background 120ms ease, transform 120ms ease, color 120ms ease;
}
.lz2-ts-link::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
}
.lz2-ts-link:hover  { background: rgba(199,155,255,.32); color: #fff; transform: translateY(-1px); }
.lz2-ts-link:active { transform: scale(.94); }

.lz2-notes-meta {
    font-size: .72rem; color: var(--lz2-dim);
    margin-right: auto;
}

.lz2-notes-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; 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, #c79bff, #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;
}

/* ---- Task gate banner — sits above the tasks list to remind students
   that the next lesson is locked behind these tasks. */
.lz2-tasks-gate {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(199,155,255,.18), rgba(255,143,209,.10));
    border: 1px solid rgba(199,155,255,.35);
    border-radius: var(--lz2-radius-sm);
    color: #e4d7ff;
    font-size: .88rem;
    line-height: 1.4;
}
.lz2-tasks-gate svg { flex-shrink: 0; color: var(--lz2-accent, #c79bff); }

/* ---- Graded tasks (drawing + writing) ---- */
.lz2-task-graded {
    border: 1px solid rgba(255,255,255,.06);
    transition: border-color 200ms ease, background 200ms ease;
}
.lz2-task-graded.lz2-task-passed {
    border-color: rgba(74,222,128,.45);
    background: linear-gradient(135deg, rgba(74,222,128,.08), rgba(255,255,255,.02));
}
.lz2-task-kind {
    display: inline-block;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(199,155,255,.16);
    color: var(--lz2-accent, #c79bff);
    margin-right: 8px;
}
.lz2-task-hint {
    font-size: .82rem; color: var(--text-muted, #9aa0ad);
    margin: 6px 0 10px;
}
.lz2-task-warn {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px;
    margin: 6px 0 10px;
    border-radius: 8px;
    background: rgba(251,146,60,.10);
    border: 1px solid rgba(251,146,60,.32);
    color: #fdba74;
    font-size: .82rem; line-height: 1.4;
}
.lz2-task-warn svg { flex-shrink: 0; margin-top: 2px; color: #fb923c; }
.lz2-task-write {
    min-height: 140px;
    margin-top: 4px;
}
.lz2-task-upload {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.lz2-task-file-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--text-primary);
    cursor: pointer;
    font-size: .86rem; font-weight: 600;
    transition: background 160ms ease, border-color 160ms ease;
}
.lz2-task-file-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(199,155,255,.35); }
.lz2-task-submit {
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--lz2-accent, #c79bff);
    color: #fff;
    border: 0;
    font-size: .86rem; font-weight: 600;
    cursor: pointer;
    transition: filter 160ms ease, transform 140ms ease;
}
.lz2-task-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.lz2-task-submit:disabled { opacity: .45; cursor: not-allowed; }
.lz2-task-preview {
    margin-top: 10px;
    max-width: 100%;
    max-height: 240px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    object-fit: contain;
    background: rgba(0,0,0,.25);
}
.lz2-task-result {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.lz2-task-result:empty { display: none; }
.lz2-task-result-pass {
    border-color: rgba(74,222,128,.40);
    background: rgba(74,222,128,.08);
}
.lz2-task-result-fail {
    border-color: rgba(251,113,133,.40);
    background: rgba(251,113,133,.06);
}
.lz2-task-result-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 4px;
}
.lz2-task-result-state {
    font-weight: 700; font-size: .85rem;
    letter-spacing: .04em; text-transform: uppercase;
}
.lz2-task-result-pass .lz2-task-result-state { color: #4ade80; }
.lz2-task-result-fail .lz2-task-result-state { color: #fb7185; }
.lz2-task-result-score {
    font-size: .85rem; font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.lz2-task-result-fb {
    margin: 0;
    font-size: .86rem; line-height: 1.45;
    color: var(--text-secondary);
}
.lz2-task-aiverdict {
    margin-top: 6px;
    font-size: .76rem; font-weight: 600;
    color: #fb923c;
    letter-spacing: .04em; text-transform: uppercase;
}

/* 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(199,155,255,.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); }

/* Lesson thumbnails — dashboard path + sidebar list. */
.lz2-path-thumb {
    flex: 0 0 96px; width: 96px; height: 56px;
    border-radius: 8px;
    background: var(--lz2-surface-2) center/cover no-repeat;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.lz2-path-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--lz2-dim); font-weight: 700; font-size: 1.05rem;
    background-image: linear-gradient(135deg, rgba(199,155,255,.18), rgba(255,143,209,.12));
}
.lz2-path-thumb-dur {
    position: absolute; right: 4px; bottom: 4px;
    background: rgba(0,0,0,.7); color: #fff;
    font-size: .68rem; font-variant-numeric: tabular-nums;
    padding: 1px 5px; border-radius: 3px;
    line-height: 1.2;
}
.lz2-path-thumb-lock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); color: #fff; font-size: 1.1rem;
}
.lz2-path-locked .lz2-path-thumb { filter: grayscale(.6); opacity: .75; }
.lz2-path-completed .lz2-path-thumb { opacity: .85; }

/* Admin-only drag handle + drop indicators on the dashboard path. */
.lz2-path-grab {
    flex: 0 0 18px;
    width: 18px;
    margin-left: 6px;
    color: var(--lz2-dim);
    font-size: 1rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
    text-align: center;
    opacity: .55;
    transition: opacity 140ms ease, color 140ms ease;
}
.lz2-path-grab:hover { opacity: 1; color: var(--lz2-accent); }
.lz2-path-grab:active { cursor: grabbing; }
.lz2-path-item.is-dragging { opacity: .4; }
.lz2-path-item.lz2-path-drop-before { box-shadow: 0 -2px 0 0 var(--lz2-accent) inset; border-top: 2px solid var(--lz2-accent); }
.lz2-path-item.lz2-path-drop-after  { box-shadow: 0 2px 0 0 var(--lz2-accent) inset; border-bottom: 2px solid var(--lz2-accent); }

/* =====================================================================
   Lesson Zone — beauty pass v2
   Cinematic series hero, banner Continue card, episode-style lesson rows.
   ===================================================================== */

/* ---- Series detail header → cinematic hero ---- */
.lz-detail-header.lz-detail-header-hero {
    position: relative;
    padding: 64px 16px 40px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 0 0 28px 28px;
    margin-bottom: 16px;
}
.lz-detail-header.lz-detail-header-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--lz-hero-bg);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.15) brightness(.55);
    transform: scale(1.15);
    z-index: -2;
}
.lz-detail-hero-veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 80% at 18% 0%, rgba(199,155,255,.32), transparent 70%),
        radial-gradient(45% 70% at 95% 100%, rgba(255,143,209,.18), transparent 70%),
        linear-gradient(180deg, rgba(8,9,16,.35) 0%, rgba(8,9,16,.85) 90%);
    z-index: -1;
    pointer-events: none;
}
.lz-detail-header-hero .lz-detail-meta {
    position: relative;
    max-width: 880px;
}
.lz-detail-header-hero .lz-detail-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 8px 0 8px;
    background: linear-gradient(180deg, #fff, #d4ccff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.lz-detail-header-hero .lz-detail-sub {
    color: rgba(255,255,255,.78);
    font-weight: 500;
}
.lz-detail-header-hero .lz-detail-desc {
    color: rgba(255,255,255,.85);
    max-width: 64ch;
    line-height: 1.6;
}
.lz-detail-header-hero .lz-detail-chips { margin-top: 16px; }
.lz-detail-header-hero .lz2-mentor-chip {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
}
.lz-detail-header-hero .lz-detail-tree {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,.18);
}

/* ---- Continue card → cinematic banner ---- */
.lz2-continue-card.lz2-continue-has-thumb {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(199,155,255,.18), rgba(255,143,209,.08)),
        var(--lz2-surface);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,.32),
                inset 0 1px 0 rgba(255,255,255,.04);
    position: relative;
    transition: transform 220ms var(--lz2-ease), box-shadow 220ms var(--lz2-ease);
}
.lz2-continue-card.lz2-continue-has-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 56px rgba(199,155,255,.22),
                inset 0 1px 0 rgba(255,255,255,.06);
}
.lz2-continue-thumb {
    position: relative;
    background: var(--lz2-surface-2) center/cover no-repeat;
    min-height: 160px;
}
.lz2-continue-thumb::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 50%, var(--lz2-surface) 100%);
    pointer-events: none;
}
.lz2-continue-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: none;
    transition: transform 220ms var(--lz2-ease), background 220ms var(--lz2-ease);
}
.lz2-continue-card.lz2-continue-has-thumb:hover .lz2-continue-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0,0,0,.5);
}
.lz2-continue-text {
    padding: 22px 24px;
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.lz2-continue-card.lz2-continue-has-thumb .lz2-continue-cta {
    margin-top: 12px;
    display: inline-flex; align-self: flex-start;
    background: var(--lz2-accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700; font-size: .9rem;
    box-shadow: 0 8px 22px rgba(199,155,255,.35);
}
@media (max-width: 540px) {
    .lz2-continue-card.lz2-continue-has-thumb {
        grid-template-columns: 1fr;
    }
    .lz2-continue-thumb { min-height: 140px; }
    .lz2-continue-thumb::after {
        background: linear-gradient(180deg, transparent 50%, var(--lz2-surface) 100%);
    }
}

/* ---- Lesson rows → episode cards ---- */
.lz2-path { gap: 10px; }
/* The old dot+timeline made sense for a flat list; the new card chrome
 * carries state on its own, so we retire them. */
.lz2-path::before { display: none; }
.lz2-path .lz2-path-dot { display: none; }
.lz2-path-module {
    padding: 16px 0 8px 4px;
}
.lz2-path-item {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
    border: 1px solid var(--lz2-line);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 6px 18px rgba(0,0,0,.18);
    transition: transform 180ms var(--lz2-ease),
                background 180ms var(--lz2-ease),
                border-color 180ms var(--lz2-ease),
                box-shadow 180ms var(--lz2-ease);
}
.lz2-path-item:hover {
    background: linear-gradient(180deg, rgba(199,155,255,.06), rgba(255,255,255,.015));
    border-color: rgba(199,155,255,.25);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 28px rgba(0,0,0,.28);
}
.lz2-path-current {
    background: linear-gradient(180deg, rgba(199,155,255,.10), rgba(255,143,209,.04));
    border-color: rgba(199,155,255,.45);
    box-shadow: 0 0 0 1px rgba(199,155,255,.10) inset,
                0 14px 36px rgba(199,155,255,.18);
}
.lz2-path-completed {
    opacity: .82;
}
.lz2-path-completed .lz2-path-title {
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,.18);
    text-decoration-thickness: 1px;
}
.lz2-path-locked {
    opacity: .55;
}

/* Status pill replaces the comma-separated meta line. */
.lz2-path-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 6px;
}
.lz2-path-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: var(--lz2-dim);
}
.lz2-path-pill-completed {
    background: rgba(80, 200, 130, .14);
    color: #6ed79b;
}
.lz2-path-pill-locked {
    background: rgba(255,255,255,.04);
    color: var(--text-faint);
}
.lz2-path-pill-current,
.lz2-path-pill.lz2-path-pill-current {
    background: rgba(199,155,255,.18);
    color: #c5b3ff;
    box-shadow: 0 0 0 1px rgba(199,155,255,.35) inset;
}
.lz2-path-dur {
    font-size: .75rem;
    color: var(--lz2-dim);
    font-variant-numeric: tabular-nums;
}
.lz2-path-icon {
    color: rgba(255,255,255,.35);
    transition: color 180ms var(--lz2-ease), transform 180ms var(--lz2-ease);
}
.lz2-path-item:hover .lz2-path-icon { color: var(--lz2-accent); transform: translateX(3px); }
.lz2-path-completed .lz2-path-icon { color: #6ed79b; }

/* Bigger thumbnail in the card layout, with a play hover overlay. */
.lz2-path-thumb { flex-basis: 120px; width: 120px; height: 68px; border-radius: 10px; }
.lz2-path-item:hover .lz2-path-thumb { box-shadow: 0 6px 14px rgba(0,0,0,.4); }

@media (max-width: 540px) {
    .lz2-path-thumb { flex-basis: 88px; width: 88px; height: 50px; }
    .lz2-path-item { padding: 10px 12px; }
}

.lz2-side-thumb {
    flex: 0 0 56px; width: 56px; height: 32px;
    border-radius: 4px;
    background: var(--lz2-surface-2) center/cover no-repeat;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.lz2-side-thumb-empty {
    background-image: linear-gradient(135deg, rgba(199,155,255,.18), rgba(255,143,209,.12));
}
.lz2-side-locked    .lz2-side-thumb { filter: grayscale(.6); opacity: .65; }
.lz2-side-completed .lz2-side-thumb { opacity: .8; }

@media (max-width: 540px) {
    .lz2-path-thumb { flex-basis: 76px; width: 76px; height: 44px; }
    .lz2-side-thumb { display: none; }
}

/* ----------------- 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;
}

/* deep purple wash over the page */
.lz-body::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(1100px 650px at 15% -10%, rgba(76,29,149,.55), transparent 60%),
        radial-gradient(900px 520px at 90% 8%, rgba(124,58,237,.30), transparent 62%),
        linear-gradient(180deg, #0a0418 0%, #07020f 100%);
    pointer-events: none;
    z-index: 0;
}

/* ---- hero ---- */
.lz-hub-hero {
    display: flex; flex-wrap: wrap;
    gap: 24px; align-items: center; justify-content: space-between;
    padding: 40px 8px 16px;
}
.lz-hub-hero-text { max-width: 620px; flex: 1 1 360px; }

/* Hero orbit — non-interactive decorative SVG. The four guild glyphs
   orbit a glowing brand-gradient core on independent loops, so the
   constellation feels alive but never busy. */
.lz-hub-orbit {
    flex: 0 0 auto;
    width: 240px; height: 240px;
    pointer-events: none;
    filter: drop-shadow(0 12px 40px rgba(124,58,237,.18));
}
.lz-hub-orbit svg { display: block; overflow: visible; }
.lz-orb-core {
    transform-origin: 120px 120px;
    animation: lz-orb-breathe 6s ease-in-out infinite;
}
.lz-orb-pulse {
    transform-origin: 120px 120px;
    animation: lz-orb-pulse 2.4s ease-in-out infinite;
}
.lz-orb-clouds circle {
    transform-origin: 120px 120px;
    animation: lz-orb-drift 18s ease-in-out infinite;
}
.lz-orb-clouds circle:nth-child(2) { animation-duration: 22s; animation-delay: -6s; }
.lz-orb-clouds circle:nth-child(3) { animation-duration: 26s; animation-delay: -12s; }
.lz-orb-stars circle { animation: lz-orb-twinkle 4s ease-in-out infinite; }
.lz-orb-stars circle:nth-child(2) { animation-delay: -.8s; }
.lz-orb-stars circle:nth-child(3) { animation-delay: -1.6s; }
.lz-orb-stars circle:nth-child(4) { animation-delay: -2.4s; }
.lz-orb-stars circle:nth-child(5) { animation-delay: -3.2s; }
.lz-orb-stars circle:nth-child(6) { animation-delay: -1.2s; }

/* Each satellite gets its own duration so the cluster doesn't lockstep.
   transform-origin is set inline (centre of the SVG) since CSS can't
   target SVG inner geometry without it. */
.lz-orb-sat   { animation: lz-orb-spin 1s linear infinite; }
.lz-orb-sat-a { animation-duration: 22s; }
.lz-orb-sat-b { animation-duration: 28s; animation-direction: reverse; }
.lz-orb-sat-c { animation-duration: 34s; }
.lz-orb-sat-d { animation-duration: 26s; animation-direction: reverse; }
/* Counter-rotate the inner glyph so the icons stay upright as their
   parent orbits — same speeds, opposite direction. */
.lz-orb-sat-a .lz-orb-glyph { animation: lz-orb-spin 22s linear infinite reverse; transform-origin: 7px 7px; }
.lz-orb-sat-b .lz-orb-glyph { animation: lz-orb-spin 28s linear infinite;          transform-origin: 7px 7px; }
.lz-orb-sat-c .lz-orb-glyph { animation: lz-orb-spin 34s linear infinite reverse; transform-origin: 7px 7px; }
.lz-orb-sat-d .lz-orb-glyph { animation: lz-orb-spin 26s linear infinite;          transform-origin: 7px 7px; }

@keyframes lz-orb-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}
@keyframes lz-orb-drift {
    0%, 100% { transform: translate(0, 0)     scale(1);   opacity: .85; }
    50%      { transform: translate(6px, -4px) scale(1.07); opacity: 1;   }
}
@keyframes lz-orb-breathe {
    0%, 100% { transform: scale(1);     opacity: .92; }
    50%      { transform: scale(1.08);  opacity: 1;   }
}
@keyframes lz-orb-pulse {
    0%, 100% { transform: scale(1);    opacity: .92; }
    50%      { transform: scale(.78);  opacity: .55; }
}
@keyframes lz-orb-twinkle {
    0%, 100% { opacity: .25; }
    50%      { opacity: .9;  }
}

@media (prefers-reduced-motion: reduce) {
    .lz-orb-core, .lz-orb-pulse, .lz-orb-clouds circle,
    .lz-orb-sat, .lz-orb-sat .lz-orb-glyph,
    .lz-orb-stars circle { animation: none; }
}
.lz-hub-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: #c4abef;
    background: rgba(199,155,255,.07);
    border: 1px solid rgba(199,155,255,.14);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
    box-shadow: none;
}
.lz-hub-eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #c084fc; box-shadow: 0 0 5px rgba(192,132,252,.5);
    flex-shrink: 0;
}
.lz-hub-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

/* Brand-gradient accent for the "Zone" word — same lavender → violet →
   indigo → sky-blue palette as the homepage "Comics" wordmark, with the
   slow shimmer pan so the two pages feel like one product. */
.lz-hub-title-grad {
    background: linear-gradient(120deg, #d8b4fe 0%, #c084fc 32%, #818cf8 62%, #38bdf8 100%);
    background-size: 240% 240%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lz-title-shimmer 12s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes lz-title-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.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(199,155,255,.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-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem; font-weight: 700;
    color: #fff;
    margin: 0 0 16px 2px;
    letter-spacing: -0.015em;
    display: flex; align-items: center; gap: 11px;
}
.lz-hub-section-title::before {
    content: ""; width: 3px; height: 1.05em;
    border-radius: 999px;
    background: linear-gradient(180deg, #c084fc, #ec4899);
    box-shadow: 0 0 6px rgba(192,132,252,.22);
    flex-shrink: 0;
}

/* ---- 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(199,155,255,.12), rgba(255,143,209,.05)),
        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(199,155,255,.12), transparent 70%);
    pointer-events: none;
}
.lz-hub-continue-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.28);
}
.lz-pill:active { transform: scale(.97); }

/* ---- Hero guild tab stack (right of hero) ---------------------
   Functional vertical replacement for the old decorative orbit.
   Each tab carries its guild's accent colour; the active tab fills
   with that colour, others sit muted with a tinted dot. On mobile
   the hero stacks vertically and this becomes a horizontal scroll
   row so all guilds remain reachable. */
.lz-hub-hero-guilds {
    flex: 0 0 auto;
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lz-hub-hero-guilds .lz-guild-tab {
    --gtab-color: #c79bff;
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .92rem; font-weight: 600;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: background 180ms ease, color 180ms ease,
                border-color 180ms ease, transform 160ms ease;
}
.lz-hub-hero-guilds .lz-guild-tab-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--gtab-color);
    box-shadow: 0 0 8px var(--gtab-color);
    flex-shrink: 0;
    opacity: .85;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.lz-hub-hero-guilds .lz-guild-tab:hover {
    color: var(--text-heading);
    background: rgba(255,255,255,.04);
}
.lz-hub-hero-guilds .lz-guild-tab.active {
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--gtab-color) 28%, transparent),
                color-mix(in srgb, var(--gtab-color) 12%, transparent));
    color: #fff;
    border-color: color-mix(in srgb, var(--gtab-color) 50%, transparent);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--gtab-color) 28%, transparent);
}
.lz-hub-hero-guilds .lz-guild-tab.active .lz-guild-tab-dot {
    transform: scale(1.25);
    box-shadow: 0 0 14px var(--gtab-color);
}
.lz-hub-hero-guilds .lz-guild-tab:active { transform: scale(.985); }

/* Per-guild accent. The "All" tab keeps the default lavender. */
.lz-hub-hero-guilds .gtab-artisan  { --gtab-color: #7dd3fc; }
.lz-hub-hero-guilds .gtab-writer   { --gtab-color: #fbbf24; }
.lz-hub-hero-guilds .gtab-editor   { --gtab-color: #f472b6; }
.lz-hub-hero-guilds .gtab-mangakas { --gtab-color: #c79bff; }
.lz-hub-hero-guilds .gtab-comics   { --gtab-color: #fb923c; }

/* ---- 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: none;            /* Firefox */
    -ms-overflow-style: none;          /* old Edge / IE */
}
.lz-hub-feat-row::-webkit-scrollbar { display: none; }
.lz-hub-feat-row > .lz-hub-card { scroll-snap-align: start; }

/* Wrap that holds the row + the absolute-positioned arrow controls. */
.lz-hub-feat-wrap {
    position: relative;
}
.lz-hub-feat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(30,28,46,.92), rgba(20,18,34,.92));
    backdrop-filter: blur(8px);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    transition: transform 160ms ease, background 180ms ease, opacity 160ms ease;
}
.lz-hub-feat-arrow:hover {
    background: linear-gradient(180deg, rgba(199,155,255,.85), rgba(124,58,237,.85));
    transform: translateY(-50%) scale(1.08);
}
.lz-hub-feat-arrow:active { transform: translateY(-50%) scale(.96); }
.lz-hub-feat-arrow[hidden] { display: none; }
.lz-hub-feat-arrow-prev { left: -8px; }
.lz-hub-feat-arrow-next { right: -8px; }
@media (max-width: 720px) {
    .lz-hub-feat-arrow { display: none; }   /* mobile: native swipe is enough */
}

/* ---- Course grid ---- */
.lz-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* When the active guild has sectors (currently Artisan), the grid stacks
   one section per row and each section runs its own inner card grid. */
.lz-hub-grid.lz-hub-grid-sectored {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 28px 24px;
    align-items: start;
}
/* Named sectors flow in the left column, one above the next. */
.lz-hub-grid.lz-hub-grid-sectored > .lz-sector {
    grid-column: 1;
}
/* Unsorted gets parked on the right and spans every row of the left column.
 * Sticky so it stays visible while scrolling through named sectors. */
.lz-hub-grid.lz-hub-grid-sectored > .lz-sector-unsorted {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
}
/* Inside the narrow Unsorted column, force one card per row. */
.lz-hub-grid.lz-hub-grid-sectored > .lz-sector-unsorted .lz-sector-body {
    grid-template-columns: 1fr;
}
/* On narrower screens, drop back to a single column so Unsorted sits below. */
@media (max-width: 960px) {
    .lz-hub-grid.lz-hub-grid-sectored {
        grid-template-columns: 1fr;
    }
    .lz-hub-grid.lz-hub-grid-sectored > .lz-sector-unsorted {
        grid-column: 1;
        grid-row: auto;
        position: static;
        max-height: none;
    }
    .lz-hub-grid.lz-hub-grid-sectored > .lz-sector-unsorted .lz-sector-body {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}
.lz-sector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lz-sector-head {
    display: flex; align-items: baseline; gap: 10px;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.lz-sector-title {
    margin: 0;
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: .02em;
    color: var(--text, #f4f4f5);
}
.lz-sector-count {
    font-size: .75rem;
    color: var(--text-muted, #9aa0ad);
    background: rgba(255,255,255,.05);
    padding: 2px 8px;
    border-radius: 999px;
}
.lz-sector-unsorted .lz-sector-title {
    color: var(--text-muted, #9aa0ad);
    font-style: italic;
}
.lz-sector-body {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    min-height: 80px;
    padding: 6px;
    border-radius: 12px;
    border: 1px dashed transparent;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: background .15s ease, border-color .15s ease;
}
.lz-sector-body::-webkit-scrollbar { display: none; }

/* Wrap that holds the sector body + its arrow controls. */
.lz-sector-body-wrap { position: relative; }
.lz-sector-body-wrap > .lz-hub-feat-arrow-prev { left: -10px; }
.lz-sector-body-wrap > .lz-hub-feat-arrow-next { right: -10px; }
/* Cards in a horizontal row need a fixed width — they were sized by the
   grid track before. 280px keeps parity with the flat-grid minmax(). */
.lz-sector-body > .lz-hub-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}
/* Empty admin drop zone gets a hint outline so it reads as a target. */
.lz-sector-droppable:empty,
.lz-sector-droppable:has(> .lz-hub-card-admin:only-child) {
    border-color: rgba(255,255,255,.10);
}
.lz-sector-dragover {
    background: rgba(199,155,255,.08);
    border-color: rgba(199,155,255,.45) !important;
}
.lz-hub-card-draggable {
    cursor: grab;
}
.lz-hub-card-draggable:active {
    cursor: grabbing;
}
.lz-hub-card.lz-dragging {
    opacity: .45;
    transform: scale(.98);
}
/* Insertion indicator on a hover-target card (left or right edge), shown
   while another card is dragged over it so admin can place it precisely. */
.lz-hub-card-draggable { position: relative; }
.lz-hub-card-draggable.lz-card-drop-before::before,
.lz-hub-card-draggable.lz-card-drop-after::after {
    content: "";
    position: absolute;
    top: 8%; bottom: 8%;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #c084fc, #38bdf8);
    box-shadow: 0 0 10px rgba(199,155,255,.55);
    pointer-events: none;
    z-index: 5;
}
.lz-hub-card-draggable.lz-card-drop-before::before { left: -10px; }
.lz-hub-card-draggable.lz-card-drop-after::after  { right: -10px; }

/* ---- Card ---- */
.lz-hub-card {
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), var(--bg-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    overflow: hidden;
    color: var(--text-primary);
    text-decoration: none;
    position: relative;
    transform-origin: center center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: transform 280ms cubic-bezier(.22,1,.36,1),
                border-color 220ms ease,
                box-shadow 280ms ease;
    will-change: transform;
}
.lz-hub-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199,155,255,.26);
    box-shadow: 0 16px 38px rgba(0,0,0,.4), 0 4px 16px rgba(124,58,237,.12);
    color: var(--text-primary);
    z-index: 3;
}
.lz-hub-card:active { transform: translateY(-2px); }
.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;
    transition: transform 460ms cubic-bezier(.22,1,.36,1);
}
.lz-hub-card:hover .lz-hub-card-cover { transform: scale(1.045); }
.lz-hub-card-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(8,4,20,.55) 100%);
    pointer-events: none;
}
.lz-hub-card-cover-empty {
    background:
        radial-gradient(300px 120px at 0% 0%, rgba(199,155,255,.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: .64rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.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-mangakas { color: #c79bff; background: rgba(199,155,255,.10); }
.lz-guild-comics   { color: #fb923c; background: rgba(251,146,60,.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-guild-mangakas-bg { background: linear-gradient(135deg,#c79bff,#7c3aed); color: #fff; }
.lz-guild-comics-bg   { background: linear-gradient(135deg,#fb923c,#ef4444); 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.12rem; font-weight: 700;
    color: #fff;
    line-height: 1.28;
    margin: 0;
    letter-spacing: -.01em;
}
.lz-hub-card-desc {
    font-size: .86rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 4px 0 6px;
    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: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 999px; overflow: hidden;
}
.lz-hub-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, var(--link-color), #ff8fd1);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(199,155,255,.5);
    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: 700; font-size: .82rem;
    padding: 9px 18px;
    border-radius: 999px;
    letter-spacing: .01em;
    transition: background 160ms ease, transform 160ms ease, box-shadow 200ms ease, filter 160ms ease;
}
.lz-hub-card-cta-start,
.lz-hub-card-cta-continue {
    background: #ddb1f9;
    color: #000;
    box-shadow: 0 6px 18px rgba(221,177,249,.30);
}
.lz-hub-card-cta-complete {
    background: rgba(255,255,255,.07);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,.10);
}
.lz-hub-card:hover .lz-hub-card-cta-start,
.lz-hub-card:hover .lz-hub-card-cta-continue {
    filter: brightness(1.08);
    box-shadow: 0 10px 26px rgba(221,177,249,.45);
}

/* ---- skeleton (reuse existing shimmer if any) ---- */
.lz-hub-card.lz-skel {
    aspect-ratio: 3 / 4;
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--bg-card);
    border: 1px solid rgba(255,255,255,.05);
}
.lz-hub-card.lz-skel .lz-skel-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(199,155,255,.10) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: lz-shimmer 1.5s linear infinite;
}
@keyframes lz-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- 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(199,155,255,.14), transparent 70%);
    pointer-events: none;
}
.lz-hub-empty-ill {
    position: relative;
    margin-bottom: 8px;
    filter: drop-shadow(0 10px 24px rgba(199,155,255,.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 (tablet + phone) ---- */
@media (max-width: 720px) {
    .lz-hub { padding: 6px 10px 96px; }

    /* Hero: tighten everything, text-first, orbit shrunk and centred. */
    .lz-hub-hero { padding: 10px 2px 2px; gap: 8px; justify-content: center; text-align: left; }
    .lz-hub-hero-text { flex: 1 1 100%; max-width: 100%; }
    .lz-hub-eyebrow { font-size: .62rem; padding: 3px 7px; margin-bottom: 6px; }
    .lz-hub-title { font-size: 1.4rem; margin: 0 0 4px; line-height: 1.08; }
    .lz-hub-subtitle { font-size: .82rem; line-height: 1.4; }
    .lz-hub-stats { margin-top: 8px; gap: 5px; }
    .lz-stat-chip { padding: 3px 8px; font-size: .72rem; }
    .lz-hub-hero-btn { width: 100%; justify-content: center; padding: 10px 16px; font-size: .88rem; }
    .lz-hub-hero-cta { width: 100%; }
    .lz-hub-orbit { width: 108px; height: 108px; margin: 0 auto; }

    /* Search: full width, slightly smaller height. */
    .lz-hub-search-wrap { margin-top: 10px; }
    .lz-hub-search { padding: 0 8px 0 12px; }
    .lz-hub-search-input { padding: 8px 0; font-size: .88rem; }

    /* Section rhythm — tighter than desktop, headings calmer. */
    .lz-hub-section,
    .lz-hub-continue-sec { margin-top: 16px; }
    .lz-hub-section-title { font-size: .92rem; margin: 0 0 8px 2px; }

    /* Hero guild tabs collapse to a horizontal scroll row on phones so they
       sit beneath the hero text without consuming a full screen of height. */
    .lz-hub-hero-guilds {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 4px;
        border-radius: 999px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .lz-hub-hero-guilds::-webkit-scrollbar { display: none; }
    .lz-hub-hero-guilds .lz-guild-tab {
        width: auto;
        flex-shrink: 0;
        padding: 7px 12px;
        font-size: .8rem;
        border-radius: 999px;
    }
    .lz-hub-hero-guilds .lz-guild-tab-dot { width: 7px; height: 7px; }

    /* Single-column feed. YouTube-style: full-width 16:9 cover, tight body. */
    .lz-hub-grid { grid-template-columns: 1fr; gap: 14px; }
    .lz-hub-card { border-radius: 12px; }
    .lz-hub-card:hover { transform: none; box-shadow: none; }
    .lz-hub-card:active { transform: scale(.99); }
    .lz-hub-card-body { padding: 10px 12px 12px; gap: 3px; }
    .lz-hub-card-guild { font-size: .58rem; padding: 2px 6px; margin-bottom: 3px; }
    .lz-hub-card-title { font-size: .9rem; line-height: 1.25; }
    .lz-hub-card-desc {
        font-size: .76rem; line-height: 1.38;
        -webkit-line-clamp: 2;
    }
    .lz-hub-card-meta { font-size: .68rem; }
    .lz-hub-card-progress { margin-top: 6px; }
    .lz-hub-card-cta { margin-top: 6px; }
    .lz-hub-card-cta-label { padding: 5px 10px; font-size: .74rem; }

    /* Featured row peeks the next card, like YouTube shelves. */
    .lz-hub-feat-row { grid-auto-columns: 72%; gap: 10px; }
    .lz-hub-feat-row > .lz-hub-card { border-radius: 12px; }

    /* Continue Learning: stacked, slimmer. */
    .lz-hub-continue-card {
        flex-direction: column; align-items: stretch; gap: 12px;
        padding: 14px;
    }
    .lz-hub-continue-action { text-align: center; }

    /* Sectored grids on mobile use a horizontal scroll per sector — make
       sector cards readable without forcing the user to side-scroll forever. */
    .lz-sector-body > .lz-hub-card { flex-basis: 72%; }
}

/* ---- Small phones: even tighter ---- */
@media (max-width: 480px) {
    .lz-hub { padding: 4px 8px 96px; }

    /* Decorative orbit is hidden on tiny screens — it eats real estate
       without adding info. Hero becomes a clean text block. */
    .lz-hub-hero { padding: 6px 0 0; gap: 6px; }
    .lz-hub-orbit { display: none; }
    .lz-hub-title { font-size: 1.2rem; }
    .lz-hub-subtitle {
        font-size: .76rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .lz-hub-section,
    .lz-hub-continue-sec { margin-top: 14px; }
    .lz-hub-section-title { font-size: .86rem; margin: 0 0 6px 2px; }

    .lz-pill { padding: 5px 10px; font-size: .72rem; }

    .lz-hub-grid { gap: 12px; }
    .lz-hub-card-body { padding: 8px 10px 10px; }
    .lz-hub-card-title { font-size: .86rem; }
    .lz-hub-card-desc { -webkit-line-clamp: 2; font-size: .74rem; }
    .lz-hub-card-cta-label { padding: 4px 9px; font-size: .7rem; }

    .lz-hub-feat-row { grid-auto-columns: 80%; gap: 8px; }
    .lz-sector-body > .lz-hub-card { flex-basis: 80%; }

    .lz-hub-continue-card { padding: 12px; }
    .lz-hub-continue-course { font-size: 1rem; }
    .lz-hub-continue-glyph { width: 40px; height: 40px; }
    .lz-hub-continue-glyph svg { width: 20px; height: 20px; }
}

/* ============================================================
   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(199,155,255,.10), transparent 62%),
        radial-gradient(900px 520px at 92% 6%, rgba(255,143,209,.07), transparent 62%),
        linear-gradient(180deg, rgba(199,155,255,.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 — unified floating chrome -------------------
   Was a frosted-glass bar; now matches the OtakuRun / MovieVault
   chrome: transparent header whose black backing fades in on scroll
   via .navbar::before. Keep these transparent so the base rule wins. */
.navbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}
/* Home page — invisible navbar so the gear / bell / avatar / pillars
   float directly on the hero. Scoped to body.sg-body so other pages
   keep their glass header. */
body.sg-body .navbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
/* Slimmer home header — the navbar floats transparent over the hero, so
   a shorter bar just tucks the logo / HUD icons up into a tighter band.
   Scoped to body.sg-body so every other page keeps the 58px chrome.
   Covers guest (.navbar), logged-in (.navbar-hud) and the scroll-shrunk
   state, all of which otherwise pin 58px via an #id rule. */
body.sg-body .navbar,
body.sg-body #mainNavbar.navbar-hud,
body.sg-body #mainNavbar.navbar-hud.navbar-hud-shrunk { height: 46px; }

/* Smaller brand logo on the home page only — the 44px glyph nearly fills
   the slimmer 46px home bar, so trim the icon + wordmark to sit neatly. */
body.sg-body .brand-mark-glyph { width: 30px; height: 30px; }
body.sg-body .brand-mark-wordmark { height: 14px; }
/* Pull the section tabs in toward the logo on the home bar. */
body.sg-body .nav-tabs { margin-left: 4px; }

/* Drop the body padding that normally clears the fixed navbar — the
   home hero now extends to the very top of the viewport and the
   transparent navbar floats over it. */
body.sg-body { padding-top: 0 !important; }
/* And pull the hero up so the orbs / starfield / vignette fill the
   space behind where the navbar used to clip them. */
body.sg-body .sg-hero { margin-top: 0; }

/* ---- 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: rgba(255,255,255,.06) !important;
    color: #fff !important;
    box-shadow: none;
}
.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(199,155,255,.08); }

/* ---- 4. Buttons — subtle lift & refined shadow ------------ */
.btn {
    transition: background .25s, transform .18s, box-shadow .25s, filter .18s;
    letter-spacing: .005em;
}
.btn-primary {
    background: #ddb1f9;
    box-shadow: 0 2px 10px rgba(221,177,249,.16);
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 4px 14px rgba(221,177,249,.22);
}
.btn-outline {
    border-color: rgba(221,177,249,.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: none;
}
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(199,155,255,.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(199,155,255,.38); background-clip: content-box; }
* { scrollbar-color: rgba(199,155,255,.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: #ddb1f9;
    color: #000;
    box-shadow: 0 14px 34px rgba(221,177,249,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.an-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(221,177,249,.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(199,155,255,.18);
    border-color: rgba(199,155,255,.45);
    color: #e4d7ff;
}
.an-btn-ghost.is-saved .an-bm-path { fill: currentColor; }
.an-btn-ghost.is-fav {
    background: rgba(251,191,36,.18);
    border-color: rgba(251,191,36,.5);
    color: #fde68a;
}
.an-btn-ghost.is-fav .an-fv-path { fill: currentColor; stroke: currentColor; }

/* ---------- CAST GRID ---------- */
.an-cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.an-cast-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.an-cast-img {
    position: relative;
    aspect-ratio: 3 / 4;
    background: rgba(0,0,0,.3);
    overflow: hidden;
}
.an-cast-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.an-cast-img-empty {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(199,155,255,.12), rgba(56,189,248,.12));
}
.an-cast-name {
    padding: 8px 10px 4px;
    font-weight: 600;
    font-size: .9rem;
    color: rgba(232,228,245,.95);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.an-cast-va {
    padding: 0 10px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    color: rgba(232,228,245,.6);
}
.an-cast-va img {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.an-cast-va span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 700px) {
    .an-cast-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .an-cast-name { font-size: .82rem; }
    .an-cast-va { font-size: .7rem; }
}
.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(199,155,255,.1);
    border-color: rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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, .an-modal-frame video {
    width: 100%; height: 100%;
    border: 0;
    display: block;
}
.an-modal-frame video { object-fit: contain; background: #000; }
/* trailer is fetched + cached server-side on first play (a few seconds); show a
   quiet status until the <video> can play, then hide it. */
.an-trailer-loading {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    color: #cdd1d8; font-size: .95rem; font-weight: 600;
    background: #000; pointer-events: none;
}
.an-trailer-loading::before {
    content: ""; width: 30px; height: 30px; margin-right: 10px;
    border: 3px solid rgba(199,155,255,.3); border-top-color: #c79bff;
    border-radius: 50%; animation: an-tspin .8s linear infinite;
}
@keyframes an-tspin { to { transform: rotate(360deg); } }
/* spinner-less message (e.g. "Trailer unavailable.") — no YouTube embed fallback */
.an-trailer-msg {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    color: #aab0bb; font-size: .95rem; font-weight: 600;
    background: #000; pointer-events: none;
}

/* ---------- 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: #dcc8ff; 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);
}

/* OtakuRun browse-grid cards opt out of the generic card-hover above —
   they're MovieVault-style posters, so the lift + glow belong on the
   poster image (.ex-card-img), not the transparent <a> wrapper. */
.oh-domain .ex-card:hover {
    transform: translateY(-4px);
    box-shadow: none;
}

/* ---- 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(199,155,255,.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(199,155,255,.14);
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.24);
}
.lz-stat-badge strong { color: var(--text-heading); }

/* ---- Course-card completion state ---- */
.lz-hub-card-complete {
    outline: 1px solid rgba(199,155,255,.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(199,155,255,.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(199,155,255,.28);
}

/* Current-day marker in path — make it unmistakable */
.lz2-path-current {
    background: linear-gradient(90deg, rgba(199,155,255,.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(199,155,255,.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-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(199,155,255,.55); }
    100% { box-shadow: 0 0 0 8px rgba(199,155,255,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(199,155,255,.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(199,155,255,.14);
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.48);
}
button.dm-bonus-ready:active { transform: scale(.985); }
.dm-bonus-done {
    color: var(--link-color);
    background: rgba(199,155,255,.10);
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.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(199,155,255,.32);
}

/* --- lessons variant (checkmark) --- */
.ha-tile-lessons .ha-tile-icon {
    background: rgba(199,155,255,.16);
    color: var(--link-color);
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.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: none;
}
.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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-sticker {
    display: block;
    max-width: 140px; max-height: 140px;
    margin-top: 2px;
    border-radius: 8px;
}
.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(199,155,255,.4);
    box-shadow: 0 0 0 4px rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.14);
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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-body::before {
    content: "";
    position: fixed; inset: 0;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(124,58,237,.18), transparent 60%),
        radial-gradient(900px 540px at 90% 4%, rgba(244,114,182,.11), transparent 62%),
        linear-gradient(180deg, rgba(124,58,237,.04), transparent 40%);
    pointer-events: none;
    z-index: -1;
}

.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: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), var(--bg-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(0,0,0,.30);
    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(199,155,255,.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(199,155,255,.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: 11px 16px;
    border-radius: 999px;
    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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.22), 0 0 0 0 rgba(199,155,255,.40); }
    50%  { box-shadow: 0 14px 38px rgba(199,155,255,.30), 0 0 0 1px rgba(199,155,255,.40), 0 0 0 10px rgba(199,155,255,.10); transform: scale(1.02); }
    100% { box-shadow: 0 12px 32px rgba(0,0,0,.30), 0 0 0 1px rgba(199,155,255,.22), 0 0 0 0 rgba(199,155,255,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(199,155,255,.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(199,155,255,.65); }
    40%  { box-shadow: 0 0 0 10px rgba(199,155,255,.30); }
    100% { box-shadow: 0 0 0 20px rgba(199,155,255,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%, #c79bff, #ff8fd1, #7dd3fc, #c79bff) !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, #c79bff) 0%, transparent 45%),
        radial-gradient(circle at 80% 30%, var(--pf-accent, #c79bff) 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(199,155,255,.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(199,155,255,.55), rgba(125,211,252,.55),
        rgba(244,114,182,.45), rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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: .85rem;
    color: var(--text-secondary);
    margin: 4px 0 2px;
    font-style: italic;
    opacity: .92;
    max-width: 360px;
    line-height: 1.35;
}
.pf-title {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--pf-accent);
    margin: 8px 0 0;
}

/* ---- 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: 11px 20px;
    border-radius: 999px;
    font-size: .86rem; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(199,155,255,.32);
    transition: transform 140ms ease, filter 140ms ease, box-shadow 200ms ease;
}
.me-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 28px rgba(199,155,255,.45); }
.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, #c79bff, #ff8fd1);
    color: #fff;
    font-weight: 800; font-size: 1.4rem;
}
.co-prev-lvl {
    position: absolute; bottom: -4px; right: -4px;
    background: var(--pf-accent, #c79bff); 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, #c79bff);
}
.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, #c79bff); 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: #c79bff; }
.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, #c79bff);
}
.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(199,155,255,.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;
}

/* ── Invite-friends (referral) card ── */
.rf-linkrow {
    display: flex;
    gap: 8px;
    position: relative;
    margin-top: 4px;
}
.rf-link {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: var(--text-secondary);
    font-size: .82rem;
    font-family: inherit;
}
.rf-btn {
    flex: 0 0 auto;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    background: #ddb1f9;
    color: #000;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: background .2s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.rf-btn:hover { background: #e7c6fb; }
.rf-btn:active { transform: scale(.96); }
.rf-btn-share {
    background: rgba(255,255,255,.08);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,.12);
}
.rf-btn-share:hover { background: rgba(255,255,255,.14); }
.rf-stats {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    position: relative;
}
.rf-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
}
.rf-stat-num { font-size: 1.25rem; font-weight: 800; color: #c79bff; line-height: 1; }
.rf-stat-lbl { font-size: .68rem; color: var(--text-faint); letter-spacing: .03em; text-transform: uppercase; }
.rf-foot { margin: 12px 0 0; font-size: .76rem; color: var(--text-faint); position: relative; }

.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(199,155,255,.10) !important;
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.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; }
}

/* ============================================================
   MY HOME — landing-page picker (hp-*)
   Shared grid used by the me.php "Home Screen" card and the
   first-time onboarding modal on index.php.
   ============================================================ */
.hp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 12px;
    position: relative;
}

/* ---- a single tile. --acc (set inline per tile) drives every colour ---- */
.hp-opt {
    --acc: #c79bff;
    display: flex; align-items: center; gap: 13px;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.07);
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    border-radius: 15px;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 200ms cubic-bezier(.2,.8,.25,1),
                border-color 200ms ease, box-shadow 240ms ease, background 200ms ease;
}
/* accent wash that fades up from the bottom on hover/active */
.hp-opt-glow {
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(120% 90% at 18% 120%,
                color-mix(in srgb, var(--acc) 42%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 260ms ease;
}
/* thin accent rail down the left edge, grows in on hover/active */
.hp-opt::before {
    content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
    width: 3px; height: 0; border-radius: 0 3px 3px 0;
    background: var(--acc);
    box-shadow: 0 0 12px var(--acc);
    transition: height 240ms cubic-bezier(.2,.8,.25,1);
}
.hp-opt:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--acc) 55%, transparent);
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--acc) 60%, transparent);
}
.hp-opt:hover .hp-opt-glow { opacity: .5; }
.hp-opt:hover::before { height: 56%; }
.hp-opt:active { transform: translateY(-1px) scale(.99); }

.hp-active {
    border-color: color-mix(in srgb, var(--acc) 70%, transparent);
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--acc) 16%, transparent),
                color-mix(in srgb, var(--acc) 5%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent),
                0 16px 36px -16px color-mix(in srgb, var(--acc) 75%, transparent);
}
.hp-active .hp-opt-glow { opacity: .7; }
.hp-active::before { height: 64%; }

/* icon badge — uses the real tab SVG, tinted to the accent */
.hp-opt-ico {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px;
    color: var(--acc);
    background: color-mix(in srgb, var(--acc) 15%, rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 28%, transparent);
    transition: transform 240ms cubic-bezier(.2,.8,.25,1), box-shadow 240ms ease, background 240ms ease;
}
.hp-opt-ico svg { width: 23px; height: 23px; display: block; }
.hp-opt:hover .hp-opt-ico {
    transform: scale(1.06) rotate(-3deg);
    background: color-mix(in srgb, var(--acc) 24%, rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent),
                0 0 18px -4px color-mix(in srgb, var(--acc) 70%, transparent);
}
.hp-active .hp-opt-ico {
    background: color-mix(in srgb, var(--acc) 28%, rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent),
                0 0 22px -4px color-mix(in srgb, var(--acc) 75%, transparent);
}

.hp-opt-txt { min-width: 0; flex: 1; }
.hp-opt-txt strong {
    display: block;
    font-size: .92rem; font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 2px; letter-spacing: -0.005em;
}
.hp-opt-txt span {
    font-size: .76rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* selection check — empty ring by default, fills with the accent when chosen */
.hp-opt-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.16);
    position: relative;
    transition: box-shadow 200ms ease, background 200ms ease, transform 200ms ease;
}
.hp-opt:hover .hp-opt-check { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 60%, transparent); }
.hp-active .hp-opt-check {
    background: var(--acc);
    box-shadow: inset 0 0 0 2px var(--acc), 0 0 14px -2px var(--acc);
    transform: scale(1.06);
}
.hp-active .hp-opt-check::after {
    content: ""; position: absolute;
    left: 7px; top: 3.5px; width: 5px; height: 10px;
    border: solid #0c0814; border-width: 0 2.4px 2.4px 0;
    transform: rotate(45deg);
}
@media (max-width: 540px) { .hp-grid { grid-template-columns: 1fr; } }

/* ---------------- onboarding modal ---------------- */
.hp-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.hp-modal.hp-modal-open { display: flex; }
.hp-modal-backdrop {
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(199,155,255,.18), transparent 70%),
        rgba(6,4,12,.78);
    backdrop-filter: blur(7px);
    animation: hpFade 240ms ease;
}
@keyframes hpFade { from { opacity: 0; } to { opacity: 1; } }

.hp-modal-card {
    position: relative;
    width: min(820px, 100%);
    max-height: 90vh;
    display: flex; flex-direction: column;
    border-radius: 22px;
    padding: 28px 26px 22px;
    /* gradient border via dual background-clip */
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, #15101f, #0e0a16) padding-box,
        linear-gradient(140deg, rgba(199,155,255,.65), rgba(56,189,248,.35) 45%, rgba(244,63,94,.45)) border-box;
    box-shadow: 0 40px 100px -20px rgba(0,0,0,.75);
    overflow: hidden;
    animation: hpModalIn 320ms cubic-bezier(.2,.85,.25,1);
}
@keyframes hpModalIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
/* drifting aurora blobs behind the content */
.hp-aurora {
    position: absolute; z-index: 0;
    width: 360px; height: 360px; border-radius: 50%;
    filter: blur(60px); opacity: .5; pointer-events: none;
    background: radial-gradient(circle, rgba(199,155,255,.8), transparent 65%);
    top: -140px; left: -120px;
    animation: hpDrift 14s ease-in-out infinite;
}
.hp-aurora-2 {
    background: radial-gradient(circle, rgba(56,189,248,.7), transparent 65%);
    top: auto; bottom: -160px; left: auto; right: -130px;
    animation-duration: 18s; animation-direction: reverse;
}
@keyframes hpDrift {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(40px, 30px) scale(1.12); }
}
.hp-modal-card > .hp-modal-head,
.hp-modal-card > .hp-grid,
.hp-modal-card > .hp-modal-foot { position: relative; z-index: 1; }

.hp-modal-x {
    position: absolute; top: 14px; right: 16px; z-index: 2;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: var(--text-muted);
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.hp-modal-x:hover { background: rgba(255,255,255,.14); color: #fff; transform: rotate(90deg); }

.hp-modal-head { margin-bottom: 18px; padding-right: 34px; }
.hp-modal-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #d6c8ff; margin-bottom: 12px;
    padding: 5px 11px 5px 9px; border-radius: 999px;
    background: color-mix(in srgb, #c79bff 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #c79bff 35%, transparent);
}
.hp-modal-eyebrow svg { width: 13px; height: 13px; color: #dcc8ff; }
.hp-modal-head h2 {
    margin: 0 0 8px;
    font-size: 1.7rem; font-weight: 800; line-height: 1.1;
    letter-spacing: -0.02em;
    background: linear-gradient(100deg, #fff 30%, #dcc8ff 70%, #8ed8ff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hp-modal-head p {
    margin: 0; font-size: .88rem; line-height: 1.55;
    color: var(--text-muted);
}
.hp-modal-head p strong { color: var(--text-heading); font-weight: 700; }

/* the option list scrolls inside the card so the aurora stays clipped */
.hp-modal-card > .hp-grid {
    overflow-y: auto;
    padding: 2px 4px 2px 2px;
    margin: 0 -2px;
    gap: 14px;
}
.hp-modal-card > .hp-grid::-webkit-scrollbar { width: 8px; }
.hp-modal-card > .hp-grid::-webkit-scrollbar-thumb {
    background: rgba(199,155,255,.35); border-radius: 8px;
}

/* roomier tiles inside the popup specifically (the settings-card grid in
   My Space keeps the compact size). */
.hp-modal-card > .hp-grid .hp-opt {
    gap: 16px;
    padding: 20px 20px;
    border-radius: 18px;
}
.hp-modal-card > .hp-grid .hp-opt-ico {
    width: 56px; height: 56px;
    border-radius: 16px;
}
.hp-modal-card > .hp-grid .hp-opt-ico svg { width: 29px; height: 29px; }
.hp-modal-card > .hp-grid .hp-opt-txt strong { font-size: 1.02rem; margin-bottom: 4px; }
.hp-modal-card > .hp-grid .hp-opt-txt span { font-size: .82rem; }
.hp-modal-card > .hp-grid .hp-opt-check { width: 24px; height: 24px; }
.hp-modal-card > .hp-grid .hp-active .hp-opt-check::after { left: 8px; top: 4px; }

.hp-modal-foot {
    margin-top: 16px; padding-top: 4px;
    display: flex; justify-content: center;
}
.hp-skip {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: var(--text-faint);
    font-size: .82rem; font-weight: 600; cursor: pointer;
    padding: 9px 20px; border-radius: 999px;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.hp-skip:hover {
    color: var(--text-heading);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.22);
}

@media (prefers-reduced-motion: reduce) {
    .hp-aurora { animation: none; }
    .hp-opt, .hp-opt-ico, .hp-modal-card { transition: none; animation: none; }
}

/* ============================================================
   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 { background: #000; }
/* kill the site-wide ambient purple wash on this page so it's fully black */
body.ch-body::before { background: none; }
.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 {
    --acc: 150,150,158; /* neutral grey — the whole banner is monochrome */
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 18px 20px;
    background: #5c5c63; /* flat neutral grey card */
    border: 1px solid rgba(255,255,255,.14);
    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, border-color 200ms ease;
    position: relative; overflow: hidden;
}
.sg-challenge-banner:hover {
    transform: translateY(-2px);
    color: var(--text-primary);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 22px 48px rgba(0,0,0,.34);
}
.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: rgb(var(--acc));
}
.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: rgb(var(--acc));
    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;
    /* exact "Begin Exploring" purple */
    background: #ddb1f9;
    border: 1px solid #ddb1f9;
    color: #000;
    border-radius: 10px;
    font-weight: 800; font-size: .88rem;
    box-shadow: none;
    position: relative; z-index: 1;
    white-space: nowrap;
    transition: background .25s, border-color .25s;
}
.sg-challenge-banner:hover .sg-ch-cta {
    background: #e7c6fb;
    border-color: #e7c6fb;
}

/* ---- mini guild "hero" emblem (themed per-guild via --acc) ---- */
.ch-mini {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: rgb(var(--acc));
    background:
        radial-gradient(120% 120% at 78% 14%, rgba(var(--acc),.30), transparent 60%),
        linear-gradient(150deg, rgba(var(--acc),.10), transparent 60%),
        linear-gradient(135deg, #15101f, #0b0712);
    isolation: isolate;
}
.ch-mini::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
    background-size: 15px 15px;
    -webkit-mask-image: radial-gradient(120% 120% at 80% 8%, #000, transparent 62%);
            mask-image: radial-gradient(120% 120% at 80% 8%, #000, transparent 62%);
}
.ch-mini-glow {
    position: absolute; width: 150px; height: 150px; border-radius: 50%;
    top: -46px; right: -38px; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, rgba(var(--acc),.55), transparent 70%);
    filter: blur(26px); opacity: .85;
    animation: chMiniFloat 14s ease-in-out infinite alternate;
}
@keyframes chMiniFloat {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(-14px, 10px) scale(1.12); }
}
.ch-mini-glyph {
    width: 48%; max-width: 88px; aspect-ratio: 1;
    filter: drop-shadow(0 6px 16px rgba(var(--acc),.5));
}
/* example-image overlay: sits on top of the emblem; on load() error the
   <img> removes itself (JS) and the guild emblem shows through underneath */
.ch-cover-img {
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: inherit;
}
/* banner-sized emblem */
.sg-ch-mini {
    width: 104px; height: 86px; border-radius: 14px;
    z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(var(--acc),.22);
}
.sg-ch-mini .ch-mini-glyph { width: 44px; max-width: 44px; }
/* keep the list-card bottom scrim above the example image for the melt-into-body look */
.ch-card-cover.ch-mini::after { z-index: 3; }
/* detail-hero cover fill */
.ch-detail-mini { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
    .ch-mini-glow { animation: none; }
}

/* "See an example" link on the detail page */
.ch-example-link {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 2px 0 14px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(var(--acc),.12);
    border: 1px solid rgba(var(--acc),.35);
    color: rgb(var(--acc));
    font-size: .86rem; font-weight: 700;
    text-decoration: none;
    width: fit-content;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ch-example-link:hover {
    background: rgba(var(--acc),.20);
    border-color: rgba(var(--acc),.6);
    color: rgb(var(--acc));
    transform: translateY(-1px);
}
.ch-example-arrow { transition: transform .18s ease; }
.ch-example-link:hover .ch-example-arrow { transform: translateX(3px); }

@media (max-width: 720px) {
    .sg-challenge-banner {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }
    .sg-ch-mini { order: 1; width: 100%; height: 96px; }
    .sg-ch-left { order: 2; }
    .sg-ch-cta { order: 3; width: 100%; text-align: center; }
}

/* --- list page --- */
.ch-hero {
    position: relative;
    padding: 48px 4px 10px;
    max-width: 640px;
    background: none; /* keep the page fully black — no purple haze */
}
.ch-hero-eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--link-color);
    background: rgba(199,155,255,.12);
    border: 1px solid rgba(199,155,255,.18);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.ch-hero-title {
    font-size: clamp(2rem, 4.4vw, 2.7rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    background: linear-gradient(118deg, #ffffff 0%, #ecdfff 52%, #c79bff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.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 {
    --acc: 199,155,255; /* fallback; .ch-accent-* on the card overrides */
    position: relative;
    display: flex; flex-direction: column;
    background: #000;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    overflow: hidden;
    color: var(--text-primary);
    text-decoration: none;
    transition: transform .24s cubic-bezier(.16,1,.3,1), border-color .24s ease, box-shadow .24s ease;
}
/* per-guild accent hairline across the top */
.ch-card::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
    background: linear-gradient(90deg, transparent, rgb(var(--acc)), transparent);
    opacity: .55; transition: opacity .24s ease;
}
.ch-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--acc),.42);
    box-shadow: 0 22px 46px rgba(0,0,0,.42), 0 8px 26px rgba(var(--acc),.18);
    color: var(--text-primary);
}
.ch-card:hover::after { opacity: .9; }
.ch-card-cover {
    aspect-ratio: 16 / 9;
    /* set color/size/position separately (NOT the `background` shorthand) so
       the per-guild gradient from .lz-guild-*-bg isn't clobbered on empty
       covers; inline background-image still wins for real cover images. */
    background-color: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
/* bottom scrim so the body melts into the cover */
.ch-card-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 54%, rgba(8,6,14,.5));
    pointer-events: none;
}
.ch-card-cover-empty {
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 4.4rem;
    letter-spacing: -.03em;
    color: rgba(255,255,255,.96);
    text-shadow: 0 4px 22px rgba(0,0,0,.28);
}
/* soft top highlight + faint dot-grid texture over the guild gradient,
   so empty covers read as a designed tile instead of a lone letter */
.ch-card-cover-empty::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(90% 120% at 18% -10%, rgba(255,255,255,.30), transparent 56%),
        radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px);
    background-size: auto, 15px 15px;
    mix-blend-mode: soft-light;
    pointer-events: none;
}
.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(199,155,255,.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 {
    --acc: 199,155,255;
    position: relative;
    background: #000;
    border: 1px solid rgba(var(--acc),.24);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(0,0,0,.42), 0 0 60px rgba(var(--acc),.10);
    margin-bottom: 16px;
    isolation: isolate;
}
/* faint dot texture fading in from the accent corner — quiet "designed" backdrop */
.ch-detail-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(120% 120% at 92% 0%, #000, transparent 60%);
            mask-image: radial-gradient(120% 120% at 92% 0%, #000, transparent 60%);
}
/* gradient hairline along the top edge */
.ch-detail-hero::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--acc),.6), transparent);
}
/* per-guild accent (rgb triplet, inherited by the meta chips below) */
.ch-accent-artisan  { --acc: 125,211,252; }
.ch-accent-writer   { --acc: 251,191,36; }
.ch-accent-editor   { --acc: 244,114,182; }
.ch-accent-mangakas { --acc: 199,155,255; }
.ch-accent-comics   { --acc: 251,146,60; }

.ch-detail-cover {
    aspect-ratio: 3 / 1;
    background-color: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    position: relative;
}
.ch-detail-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 36%, rgba(12,10,22,.7) 100%);
}
.ch-detail-text { position: relative; z-index: 1; padding: 26px 30px 28px; }
.ch-detail-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ch-detail-title {
    font-size: clamp(1.8rem, 3.4vw, 2.2rem); font-weight: 800;
    color: var(--text-heading); letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 8px;
}
.ch-detail-desc  { color: var(--text-secondary); font-size: .98rem; line-height: 1.6; max-width: 70ch; margin: 0 0 18px; }
.ch-detail-meta  {
    display: flex; gap: 10px; flex-wrap: wrap;
    font-size: .8rem; color: var(--text-secondary);
}
.ch-detail-meta span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: 11px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
}
.ch-detail-meta span:first-child {
    background: linear-gradient(135deg, rgba(var(--acc),.20), rgba(var(--acc),.06));
    border-color: rgba(var(--acc),.32);
}
.ch-detail-meta strong { color: var(--text-heading); font-weight: 700; }

.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(199,155,255,.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(199,155,255,.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: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    /* Solid brand purple — the exact fill of the "Begin Exploring" button
       (#ddb1f9). Black ring matches the navbar so the pill cuts out cleanly;
       glow kept barely-there per the minimalist look. Pinned to the corner
       (was -3px) so the number reads clear of the bell icon; line-height
       matches the height for crisp vertical centering. */
    background: #ddb1f9;
    color: #000;
    border-radius: 999px;
    font-size: .66rem; font-weight: 800; line-height: 18px;
    letter-spacing: -.2px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px #000,
                0 1px 4px rgba(221,177,249,.28);
    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: 60px; right: 14px;
    width: min(320px, calc(100vw - 28px));
    max-height: min(440px, calc(100vh - 84px));
    /* Same surface colour as the other popups (.nav-tab-menu), no rim —
       just a soft drop shadow for separation. */
    background: #161619;
    border: 0;
    border-radius: 13px;
    box-shadow: 0 26px 60px -18px rgba(0,0,0,.88);
    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;
}
/* Empty (no notifications) → shrink to a small compact card. */
.notif-panel.notif-panel-empty {
    width: 210px;
    max-height: none;
}
.notif-panel-empty .notif-mark-all { display: none; }
/* Nothing left in the head when empty → hide it so the popup is just
   the icon + message. */
.notif-panel-empty .notif-panel-head { display: none; }
.notif-panel-empty .notif-empty { padding: 18px 16px 22px; }
.notif-panel-empty .notif-empty-ico { width: 38px; height: 38px; margin-bottom: 9px; }
.notif-panel-empty .notif-empty p { font-size: .85rem; }

.notif-panel-head {
    display: flex; justify-content: flex-end; 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(199,155,255,.10); }

/* ============================================================
   Push opt-in row — sits between the panel head and the
   notification list. Three states via [data-state]:
     unknown/off → muted prompt + primary "Turn on"
     on          → green dot + "Turn off" + ghost "Test"
     denied      → amber explanation + "How?"
   ============================================================ */
.notif-push-row {
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    padding: 10px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    background: rgba(199,155,255,.05);
}
.notif-push-row[data-state="on"]     { background: rgba(34,197,94,.06); }
.notif-push-row[data-state="denied"] { background: rgba(245,158,11,.07); }
.notif-push-text {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.notif-push-text strong {
    font-size: .8rem; font-weight: 700;
    color: var(--text-heading);
    display: inline-flex; align-items: center; gap: 6px;
}
.notif-push-row[data-state="on"] .notif-push-text strong::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.7);
}
.notif-push-text span {
    font-size: .72rem; line-height: 1.35;
    color: var(--text-secondary, rgba(255,255,255,.55));
}
.notif-push-actions { display: flex; gap: 6px; flex-shrink: 0; }
.notif-push-btn {
    border: 0; cursor: pointer;
    font-size: .74rem; font-weight: 600;
    padding: 6px 11px; border-radius: 8px;
    background: var(--link-color, #c79bff); color: #0b0a16;
    transition: filter 160ms ease, background 160ms ease;
}
.notif-push-btn:hover:not(:disabled) { filter: brightness(1.1); }
.notif-push-btn:disabled { opacity: .55; cursor: progress; }
.notif-push-btn-ghost {
    background: transparent; color: var(--link-color, #c79bff);
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.35);
}
.notif-push-btn-ghost:hover:not(:disabled) { background: rgba(199,155,255,.10); }

/* ============================================================
   First-visit nudge — a small bottom-right toast that surfaces
   the feature once. Self-dismisses on click; remembered via
   localStorage so it never nags. Slides up on appear.
   ============================================================ */
.cca-push-nudge {
    position: fixed; right: 16px; bottom: 16px;
    z-index: 9000;
    width: min(340px, calc(100vw - 32px));
    background: var(--bg-card, #121226);
    color: var(--text-primary, #fff);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55),
                0 0 0 1px rgba(199,155,255,.25);
    display: flex; flex-direction: column; gap: 12px;
    opacity: 0; transform: translateY(10px);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}
.cca-push-nudge.is-in { opacity: 1; transform: translateY(0); }
.cca-push-nudge-body { display: flex; flex-direction: column; gap: 4px; }
.cca-push-nudge-body strong {
    font-size: .9rem; font-weight: 700;
    color: var(--text-heading, #fff);
}
.cca-push-nudge-body span {
    font-size: .78rem; line-height: 1.4;
    color: var(--text-secondary, rgba(255,255,255,.6));
}
.cca-push-nudge-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cca-push-nudge-btn {
    border: 0; cursor: pointer;
    font-size: .78rem; font-weight: 600;
    padding: 7px 14px; border-radius: 9px;
    background: transparent; color: var(--text-secondary, rgba(255,255,255,.7));
    transition: background 160ms ease;
}
.cca-push-nudge-btn:hover { background: rgba(255,255,255,.06); }
.cca-push-nudge-primary {
    background: var(--link-color, #c79bff); color: #0b0a16;
}
.cca-push-nudge-primary:hover { filter: brightness(1.1); background: var(--link-color, #c79bff); }

.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(199,155,255,.05); }
.notif-row-unread:hover { background: rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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(255,255,255,.06);
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.45);
}
.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: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

/* --- tap targets on mobile: minimum 40x40 for anything interactive ---
   Pager-dot buttons (carousel indicators) are deliberately tiny visual
   markers — exclude them so they don't get stretched into vertical bars. */
@media (pointer: coarse) and (max-width: 768px) {
    button:not(.cca-band-dot):not(.mvx-hero-dot),
    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(199,155,255,.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(199,155,255,.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(199,155,255,.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: none;
}

/* ============================================================
   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: #c79bff; 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, #c79bff, #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: #c79bff; 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, #c79bff, #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(199,155,255,.18); color: #c79bff; }
.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: #c79bff; 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: #c79bff; }
.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: #c79bff; 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(199,155,255,.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: #c79bff;
}
.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, #c79bff, #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:        #c79bff;
    --st-lock:        #3a3f4d;
    --st-current:     #ff8fd1;
    --st-ring-bg:     #1f2230;
    --st-ring-fg:     #c79bff;
    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; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    min-height: 96px;
    background: var(--st-node-bg);
    border: 1.5px solid var(--st-node-border);
    border-radius: 14px;
    color: var(--st-ink);
    font: inherit; font-size: 13px; font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.32);
    transition: transform .18s ease, border-color .18s ease,
                box-shadow .18s ease, opacity .18s ease;
}
.st-node:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.st-node:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-open) 40%, transparent);
}
.st-node-head {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.st-node-icon {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 7px;
    flex: 0 0 22px;
}
.st-node-title {
    flex: 1; min-width: 0;
    line-height: 1.2;
    font-size: 13.5px; font-weight: 700;
    color: var(--st-ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.st-node-sub {
    font-size: 11.5px; font-weight: 500;
    line-height: 1.35;
    color: var(--st-ink-sub);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.st-node-techs {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 2px;
}
.st-tech-chip {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--st-open) 80%, var(--st-ink));
    background: color-mix(in srgb, var(--st-open) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--st-open) 24%, transparent);
    border-radius: 999px;
    line-height: 1.4;
}

/* Path highlighting — when a node is hovered or its detail is open, dim
   everything not on the prerequisite/unlock chain so the route reads at a
   glance. */
.st-canvas.st-path-active .st-node            { opacity: .35; }
.st-canvas.st-path-active .st-node.is-pathlit { opacity: 1; }
.st-canvas.st-path-active .st-node.is-pathend {
    opacity: 1;
    border-color: var(--st-current);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-current) 25%, transparent),
                0 12px 30px color-mix(in srgb, var(--st-current) 32%, transparent);
}
.st-canvas.st-path-active .st-edge            { opacity: .18; }
.st-canvas.st-path-active .st-edge.is-pathlit {
    opacity: 1;
    stroke-width: 2.4;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--st-current) 65%, transparent));
}

.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; }

.st-editbar-action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--st-current) 50%, transparent);
    background: color-mix(in srgb, var(--st-current) 18%, transparent);
    color: var(--st-ink);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.st-editbar-action:hover { filter: brightness(1.15); transform: translateY(-1px); }
.st-editbar-action:disabled { opacity: .55; cursor: progress; }

/* ---- Skill detail panel (slides in from the right on click) ---- */
.st-detail {
    position: fixed;
    top: 64px; right: 0; bottom: 0;
    width: min(380px, 92vw);
    z-index: 90;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--st-current) 12%, var(--st-bg-2)) 0%,
        var(--st-bg-2) 24%);
    border-left: 1px solid color-mix(in srgb, var(--st-current) 35%, transparent);
    box-shadow: -16px 0 40px rgba(0,0,0,.4);
    color: var(--st-ink);
    overflow-y: auto;
    padding: 22px 22px 28px;
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.st-detail.is-open { transform: translateX(0); }
.st-detail-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: var(--st-ink);
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: background .15s ease;
}
.st-detail-close:hover { background: rgba(255,255,255,.12); }
.st-detail-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    margin: 4px 0 14px;
}
.st-detail-state-completed {
    background: color-mix(in srgb, var(--st-done) 22%, transparent);
    color: var(--st-done);
}
.st-detail-state-available {
    background: color-mix(in srgb, var(--st-open) 22%, transparent);
    color: var(--st-open);
}
.st-detail-state-locked,
.st-detail-state-gated {
    background: color-mix(in srgb, var(--st-lock) 30%, transparent);
    color: var(--st-ink-sub);
}
.st-detail-title {
    margin: 0 0 6px;
    font-size: 22px; font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}
.st-detail-summary {
    margin: 0 0 16px;
    font-size: 14px; line-height: 1.5;
    color: var(--st-ink-sub);
}
.st-detail-lesson {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--st-node-border);
    margin-bottom: 14px;
}
.st-detail-lesson-eyebrow {
    display: block;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--st-ink-sub);
    margin-bottom: 4px;
}
.st-detail-lesson-title {
    font-size: 13.5px; font-weight: 700;
    color: var(--st-ink);
}
.st-detail-block {
    margin: 0 0 14px;
}
.st-detail-block h4 {
    margin: 0 0 6px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--st-ink-sub);
}
.st-detail-block ul {
    margin: 0; padding: 0; list-style: none;
}
.st-detail-block li {
    padding: 5px 0;
    font-size: 13px;
    color: var(--st-ink);
    border-bottom: 1px dashed color-mix(in srgb, var(--st-node-border) 60%, transparent);
}
.st-detail-block li:last-child { border-bottom: 0; }
.st-detail-techs { display: flex; flex-wrap: wrap; gap: 6px; }
.st-detail-actions { margin-top: 18px; }
.st-detail-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 18px;
    background: var(--st-current);
    color: #fff;
    border: 0; border-radius: 10px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.st-detail-cta:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
@media (max-width: 640px) {
    .st-detail { top: 58px; width: 100vw; padding: 18px 16px 24px; }
    .st-detail-title { font-size: 20px; }
}

/* ==================================================
   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:    #c79bff;
    --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:     #c79bff;
    --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);
}

/* Ambient page bloom — game palette (blue / amber / red). */
body.bt-body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1000px 560px at 12% -8%, rgba(96,165,250,.12), transparent 60%),
        radial-gradient(820px 520px at 90% 6%, rgba(250,204,21,.08), transparent 62%),
        radial-gradient(700px 480px at 50% 108%, rgba(248,113,113,.08), transparent 60%);
}

/* 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);
    box-shadow: 0 4px 14px rgba(250,204,21,.20);
}

.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(-4px);
    border-color: var(--bt-accent);
    box-shadow: var(--shadow-card-hover), 0 0 22px rgba(250,204,21,.12);
}
.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, #c79bff, #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), 0 0 26px color-mix(in srgb, currentColor 45%, transparent);
}
.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: #c79bff;
    /* Single flat tone — no two-colour gradients; keeps Oryx quiet & clean. */
    --ai-accent-2: #c79bff;
    --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: 1px solid color-mix(in srgb, var(--ai-accent) 32%, transparent);
    background: color-mix(in srgb, var(--ai-accent) 9%, rgba(11,11,25,.72));
    color: var(--ai-accent);
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    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 8px 20px rgba(0,0,0,.34); }
.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;
}

/* Orb life — the FAB reads as a small living orb: a soft accent aura that
   breathes out from behind the disc, and the mark itself drifts gently. The
   glow rides a pseudo so it never fights the drag/hover transforms. */
.ai-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: ai-orb-breathe 4.2s ease-in-out infinite;
}
@keyframes ai-orb-breathe {
    0%, 100% { box-shadow: 0 0 14px 1px color-mix(in srgb, var(--ai-accent) 28%, transparent); }
    50%      { box-shadow: 0 0 24px 5px color-mix(in srgb, var(--ai-accent) 45%, transparent); }
}
.ai-fab-star {
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 0 10px color-mix(in srgb, var(--ai-accent) 55%, transparent);
    animation: ai-orb-bob 4.2s ease-in-out infinite;
}
.ai-fab svg {
    animation: ai-orb-bob 4.2s ease-in-out infinite;
}
@keyframes ai-orb-bob {
    0%, 100% { transform: translateY(0)     scale(1);    }
    50%      { transform: translateY(-1px)  scale(1.05); }
}
/* The in-panel header mark breathes too, a touch quieter. */
.ai-head-mark svg { animation: ai-orb-bob 4.6s ease-in-out infinite; }
.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 {
    --ai-radius: 28px;
    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;
    background: transparent;
    border: 0;
    border-radius: var(--ai-radius);
    /* Outer drop + the two super-subtle ambient glows (blue + lavender). */
    box-shadow:
        0 22px 56px -16px rgba(0,0,0,.5),
        0 8px 20px -10px rgba(0,0,0,.4),
        0 0 60px rgba(117,186,250,.05),
        0 0 120px rgba(192,166,245,.03);
    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;
}
.ai-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }

/* Optional backdrop image (set via /admin-oryx-popup-bg.php; the URL arrives as
   the --oryx-popup-bg custom property on <body>). The image fills the panel
   behind the content via a ::before layer, with a strong veil so messages and
   the composer stay legible. Only renders when the body opts in, so default
   popups are untouched. The head/log are transparent, so the image reads
   through them; the composer keeps its own bar. */
.has-oryx-popup-bg .ai-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(180deg, rgba(10,11,22,.55) 0%, rgba(10,11,22,.72) 55%, rgba(8,9,18,.86) 100%),
        var(--oryx-popup-bg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    pointer-events: none;
}
/* Lift the real content above the ::before image layer. */
.has-oryx-popup-bg .ai-panel > * { position: relative; z-index: 1; }
/* The composer's solid bar would hide the image; let the picture read through
   it with a translucent tint instead. */
.has-oryx-popup-bg .ai-input {
    background: color-mix(in srgb, var(--bg-panel) 62%, transparent);
    backdrop-filter: blur(6px);
}

/* ---- Layer 1 · glass — the single translucent, blurred surface that carries
   the one and only visible border. Everything inside stays borderless. ---- */
.ai-glass {
    position: absolute;
    inset: 0;
    border-radius: var(--ai-radius);
    background: rgba(10, 10, 20, .65);
    -webkit-backdrop-filter: blur(30px) saturate(1.05);
    backdrop-filter: blur(30px) saturate(1.05);
    border: 1px solid rgba(255, 255, 255, .04);
    z-index: 0;
}

/* ---- Layer 2 · ambient glow — a faint light ribbon drifting through the
   glass (same blue + lavender as the bottom-nav ribbon it floats above) plus a
   soft pool at the base so the panel reads as tethered to that ribbon. ---- */
.ai-ambient {
    position: absolute;
    inset: 0;
    border-radius: var(--ai-radius);
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.ai-ambient::before {
    content: "";
    position: absolute;
    left: -40%; right: -40%; top: -30%;
    height: 80%;
    background: linear-gradient(115deg,
        transparent 36%,
        rgba(117, 186, 250, .06) 50%,
        rgba(192, 166, 245, .05) 60%,
        transparent 72%);
    filter: blur(26px);
    animation: ai-ribbon-drift 16s ease-in-out infinite;
}
.ai-ambient::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -1px;
    width: 72%; height: 44px;
    transform: translateX(-50%);
    background: radial-gradient(60% 100% at 50% 100%,
        rgba(117, 186, 250, .10), transparent 72%);
    filter: blur(6px);
}
@keyframes ai-ribbon-drift {
    0%, 100% { transform: translateY(2%)  rotate(-2deg);  opacity: .85; }
    50%      { transform: translateY(11%) rotate(1.5deg); opacity: 1; }
}

/* ---- Layer 3 · content — the actual UI, transparent so the glass reads
   through it. Clips its own scroll to the rounded shell. ---- */
.ai-content {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--ai-radius);
    overflow: hidden;
}

.ai-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px;
    background: 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;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ai-accent);
    color: #0b0b19;
    flex-shrink: 0;
}
.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: 0;
    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(--text-secondary);
    background: rgba(255, 255, 255, .06);
}
.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: var(--ai-accent);
}
.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: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: background var(--ai-fast);
}
.ai-suggest:hover { background: rgba(255, 255, 255, .09); }

.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: 0;
    white-space: pre-wrap;
}
.ai-msg-assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, .04);
    color: var(--text-primary);
    border: 0;
    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 .ai-img {
    display: block;
    max-width: 100%;
    margin: 6px 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

/* ---- Cy video-download card (cy-video.js) ----
   Rendered from a [[cyvid:<id>]] marker in Cy's reply, in both the assistant
   panel (.ai-msg) and the full-page chat (.oai-msg), so the rules are hung off
   .cyv-* alone rather than either prefix. */
.cyv-card {
    margin: 8px 0 2px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elevated);
    max-width: 100%;
}
.cyv-main { display: flex; gap: 10px; align-items: flex-start; }
.cyv-thumb {
    flex: 0 0 84px;
    width: 84px; height: 56px;
    border-radius: 8px; overflow: hidden;
    background: var(--bg-card);
}
.cyv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cyv-info { min-width: 0; flex: 1 1 auto; }
.cyv-title {
    color: var(--text-heading);
    font-weight: 600; font-size: 13px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cyv-meta   { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.cyv-status { color: #c79bff; font-size: 12px; margin-top: 4px; }
.cyv-status.is-bad { color: #f87171; }
.cyv-note   { color: var(--text-muted); font-size: 11px; margin-top: 2px; }

.cyv-bar {
    margin-top: 8px; height: 4px; border-radius: 999px;
    background: var(--bg-card); overflow: hidden;
}
.cyv-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: #ddb1f9; transition: width .3s ease;
}
/* Queued: no percentage to show yet, so sweep instead of sitting at 0. */
.cyv-bar.is-indet i {
    background: linear-gradient(90deg, transparent, #ddb1f9, transparent);
    animation: cyvSweep 1.2s ease-in-out infinite;
}
@keyframes cyvSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.cyv-actions:empty { display: none; }
.cyv-actions { margin-top: 9px; display: flex; gap: 8px; align-items: center; }
.cyv-btn {
    background: #ddb1f9; color: #000;
    border: 0; border-radius: 9px;
    padding: 7px 14px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
}
.cyv-btn:hover { background: #b47dff; }
.cyv-cancel {
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 9px;
    padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.cyv-cancel:hover { color: var(--text-heading); }

@media (prefers-reduced-motion: reduce) {
    .cyv-bar.is-indet i { animation: none; }
    .cyv-bar i { transition: none; }
}

.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: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 999px;
    cursor: pointer; white-space: nowrap;
    transition: color var(--ai-fast),
                background var(--ai-fast), transform var(--ai-fast);
}
.ai-chip:hover {
    color: var(--ai-accent);
    background: color-mix(in srgb, var(--ai-accent) 14%, transparent);
}
.ai-chip:active { transform: scale(.96); }

/* First chip is the suggested one — warmer accent tint, bolder. */
.ai-chip:first-child {
    font-weight: 600;
    color: var(--ai-accent);
    background: color-mix(in srgb, var(--ai-accent) 14%, transparent);
}
.ai-chip:first-child:hover {
    background: color-mix(in srgb, var(--ai-accent) 22%, transparent);
}

/* 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: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    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: var(--ai-accent);
    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 {
    --ai-radius: 0px;
    right: 0; bottom: 0; left: 0; top: 0;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    border: 0;
}
.ai-panel.is-expanded .ai-glass { border: 0; }
/* Full-screen: drop the bottom-tether glow — there's no ribbon to attach to. */
.ai-panel.is-expanded .ai-ambient::after { display: none; }

/* Composer */
.ai-input {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 14px 12px;
    background: transparent;
}

/* Oryx presence orb — small living dot in the composer. */
.ai-presence {
    align-self: center;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ai-accent);
    flex-shrink: 0;
    opacity: .7;
}
/* Panel enters "thinking" while Oryx is streaming — orb fades in and out. */
.ai-panel.is-thinking .ai-presence {
    animation: ai-presence-think 1s ease-in-out infinite;
}
@keyframes ai-presence-think {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1;   }
}
.ai-input textarea {
    flex: 1;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 12px;
    color: var(--text-primary);
    caret-color: var(--ai-accent);
    font: 13.5px/1.4 inherit;
    resize: none;
    max-height: 140px;
    transition: background var(--ai-fast);
}
.ai-input textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, .08);
}

.ai-send {
    position: relative;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    border: 0;
    background: var(--ai-accent);
    color: #0b0b19;
    cursor: pointer; flex-shrink: 0;
    transition: transform 200ms var(--ai-ease),
                background 220ms var(--ai-ease),
                opacity var(--ai-fast);
}
.ai-send:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ai-accent) 85%, #fff);
}
.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
   ================================================== */

/* 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); }
}

@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-head-mark svg, .ai-welcome-head::before,
    .ai-presence, .ai-input textarea,
    .ai-mode::before, .ai-mode-btn,
    .ai-send, .ai-send svg,
    .ai-ambient::before, .ai-ambient::after,
    .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: #ddb1f9; 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, #c79bff, #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: #c79bff;
    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: #dcc8ff;
    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: #dcc8ff;
    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: #dcc8ff;
    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 #c79bff;
    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: #dcc8ff;
    text-decoration: underline;
    text-decoration-color: rgba(196, 181, 253, .3);
    text-underline-offset: 3px;
}
.rd-body-prose a:hover { text-decoration-color: #dcc8ff; }
.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: #dcc8ff;
    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, #c79bff, #ddb1f9);
    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: #dcc8ff;
    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, #c79bff, #ddb1f9);
    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: #dcc8ff;
    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: #dcc8ff; 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 #c79bff;
    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: #c79bff; 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: #c79bff;
    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; }
body.gd-body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(221,177,249,.13), transparent 60%),
        radial-gradient(900px 540px at 90% 4%, rgba(244,114,182,.08), transparent 62%);
}

.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-eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #c79bff;
    margin: 0 0 10px;
}
.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 {
    /* Per-guild accent — set by the tint class below. Defaults to brand lavender. */
    --gd-accent: #c79bff;
    --gd-accent-soft: rgba(199, 155, 255, .12);
    --gd-accent-line: rgba(199, 155, 255, .40);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px 20px 26px;
    /* Faint wash of the guild's colour, always on, so each card has identity at rest. */
    background:
        linear-gradient(100deg, var(--gd-accent-soft), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
/* Left rail in the guild's colour — visible at rest, brightens on hover. */
.gd-card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--gd-accent);
    opacity: .55;
    transition: opacity .18s ease, box-shadow .18s ease;
}
.gd-card:hover {
    transform: translateY(-2px);
    border-color: var(--gd-accent-line);
    background:
        linear-gradient(100deg, var(--gd-accent-soft), transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
}
.gd-card:hover::before {
    opacity: 1;
    box-shadow: 0 0 14px -2px var(--gd-accent);
}
.gd-card-icon {
    width: 60px; height: 60px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    /* Gradient chip in the guild colour + a soft inner ring. */
    background: linear-gradient(150deg, var(--gd-accent-soft), rgba(255, 255, 255, .02));
    box-shadow: inset 0 0 0 1px var(--gd-accent-line);
    color: var(--gd-accent);
    transition: transform .18s ease, box-shadow .18s ease;
}
.gd-card:hover .gd-card-icon {
    transform: scale(1.06);
    box-shadow: inset 0 0 0 1px var(--gd-accent-line), 0 0 18px -4px var(--gd-accent);
}

.gd-card-artisan  { --gd-accent: #fb923c; --gd-accent-soft: rgba(251, 146, 60, .13); --gd-accent-line: rgba(251, 146, 60, .40); }
.gd-card-writer   { --gd-accent: #c79bff; --gd-accent-soft: rgba(199, 155, 255, .13); --gd-accent-line: rgba(199, 155, 255, .42); }
.gd-card-editor   { --gd-accent: #67e8f9; --gd-accent-soft: rgba(103, 232, 249, .13); --gd-accent-line: rgba(103, 232, 249, .40); }
.gd-card-mangakas { --gd-accent: #f472b6; --gd-accent-soft: rgba(244, 114, 182, .13); --gd-accent-line: rgba(244, 114, 182, .40); }
.gd-card-comics   { --gd-accent: #fca5a5; --gd-accent-soft: rgba(252, 165, 165, .13); --gd-accent-line: rgba(252, 165, 165, .40); }

.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-specialties {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 2px 0 10px;
}
.gd-card-spec-chip {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(232,232,240,.85);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    padding: 3px 8px;
    border-radius: 999px;
}
.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: var(--gd-accent);
}

/* ---- 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(199, 155, 255, .08);
    border-color: rgba(199, 155, 255, .25);
    color: #fff;
    transform: translateY(-1px);
}
.gd-shortcut svg { color: #c79bff; 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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.14);
    color: #dcc8ff;
}

/* ---- 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: #c79bff;
}
.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: #dcc8ff; }
.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: #ddb1f9;
}
body.rd-theme-sepia .rd-body-prose p:first-of-type::first-letter { color: #ddb1f9; }
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); }

/* ---- Nova-only themes ----------------------------------------------
   Midnight Gold: warm onyx with brushed-gold accents. Aurora: deep
   blue-violet with a slow gradient and aurora-green pulls. Both gate
   on body.rd-nova-on (set when isNova($me) === true on read.php); the
   theme classes themselves are still added unconditionally — the gate
   is enforced in JS so a paste-in body class can't bypass it. */
body.rd-theme-midnight {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(202,138,4,.10), transparent 70%),
        radial-gradient(ellipse 50% 50% at 100% 100%, rgba(120,53,15,.10), transparent 60%),
        #0c0a07;
    color: #e8dcc1;
}
body.rd-theme-midnight .rd-bar {
    background: color-mix(in srgb, #0c0a07 88%, transparent);
    border-bottom: 1px solid rgba(202,138,4,.10);
}
body.rd-theme-midnight .rd-bar-back,
body.rd-theme-midnight .rd-bar-title,
body.rd-theme-midnight .rd-bar-mini { color: rgba(232,220,193,.6); }
body.rd-theme-midnight .rd-bar-story { color: #fbe6a8; }
body.rd-theme-midnight .rd-bar-mini:hover,
body.rd-theme-midnight .rd-bar-back:hover { background: rgba(202,138,4,.10); color: #fbe6a8; }
body.rd-theme-midnight .rd-title,
body.rd-theme-midnight .rd-ch-title,
body.rd-theme-midnight .rd-body-prose h2,
body.rd-theme-midnight .rd-body-prose h3,
body.rd-theme-midnight .rd-author-card-name,
body.rd-theme-midnight .rd-more-title {
    color: #fbe6a8;
    background: linear-gradient(180deg, #fde68a 0%, #ca8a04 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.rd-theme-midnight .rd-body-prose { color: #e8dcc1; }
body.rd-theme-midnight .rd-body-prose blockquote {
    color: rgba(232,220,193,.92);
    border-left-color: #ca8a04;
}
body.rd-theme-midnight .rd-body-prose p:first-of-type::first-letter { color: #ca8a04; }
body.rd-theme-midnight .rd-body-prose strong { color: #fde68a; }
body.rd-theme-midnight .rd-body-prose a { color: #fbbf24; text-decoration-color: rgba(202,138,4,.45); }
body.rd-theme-midnight .rd-byline,
body.rd-theme-midnight .rd-meta,
body.rd-theme-midnight .rd-ch-meta,
body.rd-theme-midnight .rd-ch-btn small,
body.rd-theme-midnight .rd-ch-dot,
body.rd-theme-midnight .rd-author-card-label,
body.rd-theme-midnight .rd-author-card-xp { color: rgba(232,220,193,.55); }
body.rd-theme-midnight .rd-ch-head,
body.rd-theme-midnight .rd-ch-nav { border-color: rgba(202,138,4,.18); }
body.rd-theme-midnight .rd-author-card { background: rgba(202,138,4,.05); border-color: rgba(202,138,4,.18); }
body.rd-theme-midnight .rd-more-card { background: rgba(255,255,255,.02); border-color: rgba(202,138,4,.10); }
body.rd-theme-midnight .rd-progress { background: rgba(202,138,4,.10); }
body.rd-theme-midnight .rd-progress-fill { background: linear-gradient(90deg, #fde68a, #ca8a04); }
body.rd-theme-midnight .rd-ch-btn:hover { background: rgba(202,138,4,.08); color: #fbe6a8; }
body.rd-theme-midnight .rd-body-prose hr { border-top-color: rgba(202,138,4,.25); }

body.rd-theme-aurora {
    background:
        radial-gradient(ellipse 75% 60% at 20% 10%, rgba(34,211,238,.10), transparent 70%),
        radial-gradient(ellipse 75% 60% at 80% 90%, rgba(199,155,255,.12), transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(16,185,129,.04), transparent 80%),
        #060a18;
    color: #d6e2f4;
    background-attachment: fixed;
}
body.rd-theme-aurora .rd-bar {
    background: color-mix(in srgb, #060a18 86%, transparent);
    border-bottom: 1px solid rgba(199,155,255,.10);
}
body.rd-theme-aurora .rd-bar-back,
body.rd-theme-aurora .rd-bar-title,
body.rd-theme-aurora .rd-bar-mini { color: rgba(214,226,244,.6); }
body.rd-theme-aurora .rd-bar-story {
    background: linear-gradient(90deg, #dcc8ff 0%, #22d3ee 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.rd-theme-aurora .rd-bar-mini:hover,
body.rd-theme-aurora .rd-bar-back:hover { background: rgba(199,155,255,.10); color: #fff; }
body.rd-theme-aurora .rd-title,
body.rd-theme-aurora .rd-ch-title {
    background: linear-gradient(90deg, #fff 0%, #dcc8ff 50%, #22d3ee 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.rd-theme-aurora .rd-body-prose h2,
body.rd-theme-aurora .rd-body-prose h3,
body.rd-theme-aurora .rd-author-card-name,
body.rd-theme-aurora .rd-more-title { color: #e9d5ff; }
body.rd-theme-aurora .rd-body-prose { color: #d6e2f4; }
body.rd-theme-aurora .rd-body-prose blockquote {
    color: rgba(214,226,244,.92);
    border-left-color: #c79bff;
}
body.rd-theme-aurora .rd-body-prose p:first-of-type::first-letter {
    background: linear-gradient(135deg, #dcc8ff 0%, #22d3ee 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.rd-theme-aurora .rd-body-prose strong { color: #e9d5ff; }
body.rd-theme-aurora .rd-body-prose a { color: #67e8f9; text-decoration-color: rgba(103,232,249,.4); }
body.rd-theme-aurora .rd-byline,
body.rd-theme-aurora .rd-meta,
body.rd-theme-aurora .rd-ch-meta,
body.rd-theme-aurora .rd-ch-btn small,
body.rd-theme-aurora .rd-ch-dot,
body.rd-theme-aurora .rd-author-card-label,
body.rd-theme-aurora .rd-author-card-xp { color: rgba(214,226,244,.55); }
body.rd-theme-aurora .rd-ch-head,
body.rd-theme-aurora .rd-ch-nav { border-color: rgba(199,155,255,.18); }
body.rd-theme-aurora .rd-author-card { background: rgba(199,155,255,.06); border-color: rgba(199,155,255,.18); }
body.rd-theme-aurora .rd-more-card { background: rgba(199,155,255,.04); border-color: rgba(199,155,255,.12); }
body.rd-theme-aurora .rd-progress { background: rgba(199,155,255,.12); }
body.rd-theme-aurora .rd-progress-fill { background: linear-gradient(90deg, #c79bff, #22d3ee); }
body.rd-theme-aurora .rd-ch-btn:hover { background: rgba(199,155,255,.10); color: #fff; }
body.rd-theme-aurora .rd-body-prose hr { border-top-color: rgba(199,155,255,.25); }

/* Theme picker popover — used by all readers but Nova-only themes
   show a lock + upsell pill for free users. */
.rd-theme-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(15, 17, 28, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 8px;
    min-width: 224px;
    z-index: 200;
    box-shadow: 0 16px 48px rgba(0,0,0,.5);
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.rd-theme-pop.is-open { display: block; opacity: 1; transform: translateY(0); }
.rd-theme-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: #d3d4dc;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.rd-theme-opt:hover { background: rgba(255,255,255,.04); }
.rd-theme-opt.is-active { background: rgba(124,58,237,.16); border-color: rgba(199,155,255,.4); color: #fff; }
.rd-theme-opt.is-locked { color: rgba(232,232,240,.55); }
.rd-theme-opt.is-locked:hover { background: rgba(199,155,255,.06); }
.rd-theme-swatch {
    width: 18px; height: 18px; border-radius: 6px;
    flex: 0 0 18px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.rd-theme-swatch-dark     { background: linear-gradient(135deg, #1a1c2c 0%, #0b0c14 100%); }
.rd-theme-swatch-sepia    { background: linear-gradient(135deg, #f3e9d2 0%, #d9c89b 100%); }
.rd-theme-swatch-light    { background: linear-gradient(135deg, #fff 0%, #e5e7eb 100%); }
.rd-theme-swatch-midnight { background: linear-gradient(135deg, #fde68a 0%, #ca8a04 60%, #0c0a07 100%); }
.rd-theme-swatch-aurora   { background: linear-gradient(135deg, #dcc8ff 0%, #22d3ee 50%, #060a18 100%); }
.rd-theme-opt-lbl { flex: 1; }
.rd-theme-opt-pill {
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: linear-gradient(135deg, #c79bff, #ec4899);
    color: #fff;
    padding: 2.5px 6px;
    border-radius: 999px;
}
.rd-theme-opt-lock {
    width: 12px; height: 12px;
    color: rgba(232,232,240,.4);
    flex: 0 0 12px;
}

/* ---- 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, #ddb1f9);
    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(221,177,249,.08); border-color: var(--accent, #ddb1f9); 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(221,177,249,.1);
    border-color: rgba(221,177,249,.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(199,155,255,.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: 56px max(40px, calc(50vw - 720px + 40px));
    min-height: 0;
    border-radius: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    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(199,155,255,.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: .95rem;
    letter-spacing: .02em;
    color: rgba(232,228,245,.78);
    margin: 0 0 10px;
}
.wd-hero-name {
    font-family: Georgia, serif;
    font-size: 3.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1;
    letter-spacing: -.03em;
    text-shadow: 0 8px 50px rgba(199,155,255,.45);
}
.wd-hero-sub {
    font-size: 1.05rem;
    color: rgba(232,228,245,.85);
    margin: 0 0 22px;
    max-width: 480px;
    line-height: 1.45;
}
.wd-hero-cta {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 34px;
    border-radius: 999px;
    border: none;
    background: #ddb1f9;
    color: #000;
    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(221,177,249,.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: 16 / 10;
    min-height: 0;
    border-radius: 24px;
    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(199,155,255,.35);
    color: #fff;
    transform: translateY(-1px);
}
.wd-nav-pill.active {
    background: linear-gradient(135deg, #7c3aed, #c79bff);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(124,58,237,.4), 0 0 0 1px rgba(199,155,255,.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(199,155,255,.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(199,155,255,.55);
    background: linear-gradient(135deg, rgba(48,28,108,.78), rgba(28,14,62,.82));
    box-shadow: 0 0 0 1px rgba(199,155,255,.35), 0 22px 60px rgba(124,58,237,.48), 0 0 100px rgba(199,155,255,.22);
}
.wd-cont.wd-cont-glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(199,155,255,.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, #c79bff, #e2d4ff);
    border-radius: 4px;
    box-shadow: 0 0 18px rgba(199,155,255,.85);
}
.wd-cont-play {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #c79bff);
    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-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12,6,30,.62);
    color: rgba(232,228,245,.78);
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.wd-cont:hover .wd-cont-dismiss,
.wd-cont:focus-within .wd-cont-dismiss,
.wd-cont-dismiss:focus-visible { opacity: 1; }
.wd-cont-dismiss:hover {
    background: rgba(180,40,80,.85);
    color: #fff;
    transform: scale(1.06);
}
.wd-cont-dismiss:focus-visible { outline: 2px solid rgba(199,155,255,.7); outline-offset: 2px; }
@media (hover: none) {
    .wd-cont-dismiss { opacity: .85; }
}
.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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, #c79bff, #d4c2ff);
    border-radius: 5px;
    box-shadow: 0 0 16px rgba(199,155,255,.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: #c79bff;
    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(199,155,255,.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, #c79bff, #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(199,155,255,.3);
    background: rgba(199,155,255,.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(199,155,255,.22), rgba(96,165,250,.18));
    border-color: rgba(199,155,255,.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, #c79bff 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(199,155,255,.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, #c79bff);
    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(199,155,255,.55);
    background: rgba(0,0,0,.4);
    box-shadow: 0 0 0 3px rgba(199,155,255,.15), 0 0 24px rgba(199,155,255,.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(199,155,255,.16);
    border-color: rgba(199,155,255,.35);
    color: #d4c2ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124,58,237,.28);
}
.wd-draft-act-save { color: #c79bff; }
.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(199,155,255,.08);
    border: 1px solid rgba(199,155,255,.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(199,155,255,.4);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(124,58,237,.2);
}
.wd-cat.active {
    background: linear-gradient(135deg, #7c3aed, #c79bff);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(124,58,237,.5), 0 0 0 1px rgba(199,155,255,.25);
}

/* When the genre filter sits inside the Published Books section,
   keep it visually tied to the heading and give it room before the grid. */
.wd-sec-feature .wd-sec-head { margin-bottom: 18px; }
.wd-sec-feature .wd-cats { margin-bottom: 22px; }

/* ---------- 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(199,155,255,.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(199,155,255,.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: #ddb1f9;
    color: #000;
    box-shadow: 0 6px 18px rgba(221,177,249,.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(199,155,255,.3);
}
.wd-qmood.active {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #c79bff);
    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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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, #c79bff);
    border: 2px solid rgba(199,155,255,.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, #c79bff);
    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(199,155,255,.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(199,155,255,.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(199,155,255,.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: #c79bff; }
.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: #c79bff; }
.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, #c79bff);
    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(199,155,255,.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(199,155,255,.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(199,155,255,.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, #c79bff);
}
.wd-empty {
    grid-column: 1 / -1;
    padding: 40px 24px;
    border-radius: 16px;
    border: 1px dashed rgba(199,155,255,.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, #c79bff);
    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(199,155,255,.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(199,155,255,.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: #ddb1f9;
    color: #000;
    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(221,177,249,.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: 32px;
        padding: 48px max(32px, calc(50vw - 540px));
        min-height: 0;
    }
    .wd-hero-name { font-size: 2.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(199,155,255,.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(199,155,255,.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%, #c79bff, 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(199,155,255,.35);
}
.og-hero-title-gradient {
    background: linear-gradient(90deg, #c79bff 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(199,155,255,.22), rgba(236,72,153,.16));
    border-color: rgba(199,155,255,.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, #c79bff, #ec4899);
    color: #fff; border: 0;
    border-radius: 999px;
    font-weight: 700; font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(199,155,255,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.og-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(199,155,255,.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, #c79bff, #ec4899);
    box-shadow: 0 0 10px rgba(199,155,255,.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(199,155,255,.4);
    box-shadow: 0 22px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(199,155,255,.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: #c79bff;
    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(199,155,255,.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, #c79bff, #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(199,155,255,.12); border-color: rgba(199,155,255,.35); }
.og-opt-chosen { background: rgba(199,155,255,.24); border-color: rgba(199,155,255,.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(199,155,255,.45); background: rgba(199,155,255,.08); }
.og-hilo-chosen { border-color: rgba(199,155,255,.7); background: rgba(199,155,255,.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(199,155,255,.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(199,155,255,.08);
    border: 1px dashed rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.9); }
.og-chess-dot::after {
    content: "";
    position: absolute;
    width: 26%; height: 26%;
    border-radius: 50%;
    background: rgba(199,155,255,.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(199,155,255,.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(199,155,255,.15) 0%,
        rgba(251,191,36,.35) 40%,
        rgba(199,155,255,.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(199,155,255,.95), rgba(255,143,209,.95));
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 10px 28px rgba(199,155,255,.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; }
.xp-toast.xp-toast-cap {
    background: linear-gradient(135deg, rgba(90,98,120,.95), rgba(60,68,90,.95));
    box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}
.xp-toast.xp-toast-cap .xp-toast-label { text-transform: capitalize; }
@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(199,155,255,.08);
    border: 1px solid rgba(199,155,255,.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, #c79bff, #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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.07);
    border: 1px solid rgba(199,155,255,.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(199,155,255,.14);
    border-color: rgba(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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(199,155,255,.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, #c79bff 0%, #ff8fd1 100%);
    box-shadow: 0 0 28px rgba(199,155,255,.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(199,155,255,.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;
    /* Unified chrome — transparent bar, black backing fades in on scroll
       via .navbar::before (see base .navbar rule). Matches the OtakuRun /
       MovieVault floating header in both size (68px) and treatment. */
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
body:has(#mainNavbar.navbar-hud) { padding-top: 58px; }

/* Scroll-shrink: height stays flat at the uniform 68px so the header is
   exactly the size of the OtakuRun / MovieVault chrome on every page;
   only the HUD avatar/labels tighten (rules below). */
#mainNavbar.navbar-hud.navbar-hud-shrunk { height: 58px; }
body:has(#mainNavbar.navbar-hud.navbar-hud-shrunk) { padding-top: 58px; }
.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; }

/* HUD navbar uses the same auto-hide as the base navbar. (Previously
   pinned via `transform: none` — removed so the nav hides until the
   user hovers/scrolls per the universal behavior in header.php.) */

/* ---- Left: OtakuRun 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 + border removed — the avatar + name now floats on
       the navbar itself instead of inside a dark pill. */
    background: transparent;
    border: 1px solid transparent;
    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: transparent; border-color: transparent; box-shadow: none; }
.hud-profile:hover .hud-avatar { transform: scale(1.05); }
.hud-profile:active { transform: scale(.97); }

.hud-avatar {
    width: 42px; height: 42px;
    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: .9rem; font-weight: 800;
    box-shadow: none;
    transition: width .2s, height .2s, transform .15s;
}
.hud-avatar.has-img { background: #1a1a2e; }
.hud-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Header section tabs ---- */
.nav-tabs {
    display: flex; align-items: center; gap: 22px;
    margin-left: 22px;
}
.nav-tab {
    position: relative;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: .95rem; font-weight: 500;
    color: var(--text-muted); text-decoration: none;
    padding: 8px 14px; border-radius: 9px;
    opacity: .65;
    transition: color .15s ease, background .15s ease, opacity .15s ease;
    white-space: nowrap;
}
.nav-tab:hover { color: #fff; background: rgba(255,255,255,.06); opacity: 1; }
/* Selected tab: a simple clean underline rather than a filled pill. */
.nav-tab-active { color: #fff; background: transparent; opacity: 1; }
.nav-tab-active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 3px;
    height: 2px; border-radius: 2px;
    background: var(--link-color);
}
/* Collapse the horizontal section tabs into the hamburger menu only once
   they'd actually crowd the right-side HUD icons. The old 940px cutoff hid
   them while the bar was still mostly empty, so a slightly-narrow or
   zoomed-in desktop window (e.g. a MacBook) lost all its tabs for no reason. */
@media (max-width: 880px) { .nav-tabs { display: none; } }

/* Guilds tab dropdown */
.nav-tab-dd { position: relative; display: flex; align-items: center; height: 100%; }
.nav-tab-dd > .nav-tab { display: inline-flex; align-items: center; gap: 5px; }
.nav-tab-caret { width: 13px; height: 13px; opacity: .8; transition: transform .2s ease; }
.nav-tab-dd:hover .nav-tab-caret, .nav-tab-dd:focus-within .nav-tab-caret, .nav-tab-dd.open .nav-tab-caret { transform: rotate(180deg); }
.nav-tab-menu {
    position: absolute; top: 100%; left: 0; min-width: 210px;
    background: #161619; border: 1px solid rgba(255,255,255,.12); border-radius: 13px;
    padding: 6px; box-shadow: 0 26px 60px -18px rgba(0,0,0,.88);
    display: none; z-index: 300;
}
.nav-tab-dd:hover .nav-tab-menu, .nav-tab-dd:focus-within .nav-tab-menu, .nav-tab-dd.open .nav-tab-menu { display: block; animation: pfpMenuIn .15s ease; }
.nav-tab-mi {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border-radius: 10px; text-decoration: none;
    color: var(--text-heading); font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: .92rem; font-weight: 500; transition: background .14s ease;
    /* Reset native control styling so <button> items match <a> items —
       the default tab popup item works for either tag (no white bubbles). */
    appearance: none; -webkit-appearance: none;
    background: transparent; border: 0; cursor: pointer;
    text-align: left; line-height: 1.2;
}
.nav-tab-mi:hover { background: rgba(255,255,255,.08); }
.nav-tab-mi svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.nav-tab-mi:hover svg { color: var(--text-heading); }
.nav-tab-sep { height: 1px; background: rgba(255,255,255,.08); margin: 6px 6px; }
.nav-tab-mi-all { color: var(--text-muted); }

/* ---- Minimal header (Nova page): logo + Explore only ---- */
.nav-explore { display: none; }
body.nv-body .menu-btn,
body.nv-body .nav-tabs,
body.nv-body .nav-search-btn,
body.nv-body .hud-currency,
body.nv-body .pfp-dd,
body.nv-body .nav-pfp-guest,
body.nv-body .nav-ctx-title { display: none !important; }
body.nv-body .nav-explore {
    display: inline-flex; align-items: center;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: .95rem; font-weight: 500; color: #fff; text-decoration: none;
    padding: 8px 20px; border-radius: 999px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
    transition: background .15s ease, border-color .15s ease;
}
body.nv-body .nav-explore:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); }

/* ---- Minimal header (Help Center): logo + Home tab only ---- */
body.hc-body .menu-btn,
body.hc-body .nav-section-name,
body.hc-body .nav-search-btn,
body.hc-body .hud-currency,
body.hc-body .nav-bell,
body.hc-body .profile-settings-btn,
body.hc-body .pfp-dd,
body.hc-body .nav-pfp-guest,
body.hc-body .nav-ctx-title,
body.hc-body .nav-tabs > a.nav-tab:not(:first-child):not(.hc-htab),
body.hc-body .nav-tabs > .nav-tab-dd:not(.hc-htab) { display: none !important; }
/* the language switcher + Contact tab, pinned flush to the extreme right */
.hc-htabs { display: flex; align-items: center; gap: 6px; }
.hc-htabs .nav-tab-menu-right { left: auto; right: 0; }
.hc-htabs .nav-tab-mi.is-sel { color: #dcc8ff; }
/* Help Center top tabs (language picker + Contact Us) must render at the same
   size/font as the Home tab — the standard .nav-tab (.95rem Space Grotesk).
   The !important + inner span/font targets defeat any size the Google-Translate
   <font> wrapping or label width was adding. This is the default tab size. */
.hc-htabs .nav-tab,
.hc-htabs .nav-tab span,
.hc-htabs .nav-tab font,
#hcLangCur, #hcContactBtn {
    font-size: .95rem !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-weight: 500;
    line-height: 1.2;
}

/* translucent header on the Nova page */
body.nv-body #mainNavbar,
body.nv-body #mainNavbar.navbar-hud {
    background: rgba(10,8,16,.35) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: none !important;
}

/* ---- Header search button ---- */
.nav-search-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-faint); cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: color .15s ease, background .15s ease;
}
.nav-search-btn:hover { color: #fff; background: rgba(255,255,255,.08); }

/* CCA logo shown in the streaming/reader chrome home button (OtakuRun,
   MovieVault, etc.) so the logo appears on every page. */
.cca-home-mark img { width: 30px; height: 30px; object-fit: contain; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
@media (max-width: 720px) { .cca-home-mark img { width: 30px; height: 30px; } }

/* Watchtower header avatar — floating top-right user pfp shared by the
   OtakuRun + MovieVault chrome (watchtower-pfp.php). Mirrors the home
   mark pinned top-left. Tap → me.php (My Space); guests → landing.php. */
/* Positioning-only wrapper — the homepage's .hud-avatar inside provides
   the actual look, so the watchtower profile is the exact same component
   as the site navbar's. */
.wt-pfp {
    position: fixed;
    top: 12px; right: 12px;
    z-index: 1200;
    display: inline-flex;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease;
}
.wt-pfp:hover  { transform: translateY(-1px); }
.wt-pfp:active { transform: translateY(0) scale(.94); }
@media (max-width: 720px) {
    .wt-pfp { top: 10px; right: 10px; }
    .wt-pfp .hud-avatar { width: 38px; height: 38px; }
}

/* ---- Global search overlay ---- */
.cca-search { position: fixed; inset: 0; z-index: 400; display: none; }
.cca-search.open { display: block; }
.cca-search-backdrop { position: absolute; inset: 0; background: rgba(6,4,12,.72); backdrop-filter: blur(5px); }
.cca-search-panel {
    position: relative; z-index: 1;
    width: min(640px, calc(100% - 28px));
    margin: 84px auto 0;
    background: #161619; border: 0; border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
    animation: csIn .16s ease;
}
@keyframes csIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cca-search-bar { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 0; }
.cca-search-bar > svg { width: 20px; height: 20px; color: var(--text-faint); flex-shrink: 0; }
#ccaSearchInput {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
    color: var(--text-heading); font: inherit; font-size: 1rem;
}
.cca-search-x { background: none; border: 0; color: var(--text-faint); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.cca-search-x:hover { color: #fff; }
.cca-search-results { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
.cs-hint, .cs-empty { padding: 22px 16px; color: var(--text-faint); font-size: .9rem; text-align: center; }
.cs-group { padding: 4px 0 6px; }
.cs-group-h { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }
.cs-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--text-heading); }
.cs-item:hover { background: rgba(255,255,255,.07); }
.cs-thumb { width: 34px; height: 46px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #26262c; }
.cs-thumb-ph { display: inline-block; }
.cs-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #26262c; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.cs-txt { display: flex; flex-direction: column; min-width: 0; }
.cs-txt strong { font-size: .92rem; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-txt small { font-size: .76rem; color: var(--text-muted); }
.cs-go { width: 36px; text-align: center; color: var(--text-faint); font-size: 1.1rem; flex-shrink: 0; }

/* ---- Profile dropdown menu (navbar pfp) ---- */
.pfp-dd { position: relative; }
.pfp-dd .hud-profile {
    cursor: pointer; border: 0; border-radius: 999px;
    background: transparent;
    transition: background .16s ease, box-shadow .16s ease;
}
/* clear hover/open feedback so it reads as clickable. Gated to real pointers:
   on touch, :hover sticks after a tap and would leave a white ring around the
   avatar (the menu opening is feedback enough on mobile). */
@media (hover: hover) {
    .pfp-dd .hud-profile:hover {
        background: rgba(255,255,255,.08) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important;
    }
}
.pfp-dd-open .hud-profile {
    background: rgba(199,155,255,.16) !important;
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.45) !important;
}
.pfp-dd-caret { color: var(--text-muted); flex-shrink: 0; transition: transform .2s ease, color .16s ease; }
@media (hover: hover) {
    .pfp-dd .hud-profile:hover .hud-avatar { transform: scale(1.05); }
    .pfp-dd .hud-profile:hover .pfp-dd-caret { color: #fff; }
}
.pfp-dd-open .pfp-dd-caret { transform: rotate(180deg); color: #dcc8ff; }
.pfp-menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 224px;
    background: #161619;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 26px 60px -18px rgba(0,0,0,.88);
    display: none;
    z-index: 300;
}
.pfp-dd-open .pfp-menu { display: block; animation: pfpMenuIn .15s ease; }
@keyframes pfpMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pfp-menu-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 12px; border-radius: 10px;
    background: transparent; border: 0;
    color: var(--text-heading);
    font-family: 'Space Grotesk', system-ui, sans-serif; font-size: .92rem; font-weight: 500; letter-spacing: .01em;
    text-decoration: none; text-align: left; cursor: pointer;
    transition: background .14s ease;
}
.pfp-menu-item:hover, .pfp-menu-item:focus-visible {
    background: rgba(255,255,255,.08);
    outline: none;
}
.pfp-menu-item svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.pfp-menu-item span { flex: 1; min-width: 0; }
.pfp-menu-sep { height: 1px; background: rgba(255,255,255,.08); margin: 6px 6px; }
.pfp-menu-danger { color: #fb7185; }
.pfp-menu-danger svg { color: #fb7185; }
.pfp-menu-danger:hover, .pfp-menu-danger:focus-visible { background: rgba(255,255,255,.08); }
/* Compact count pill at the right edge of the "Notifications" row.
   The `span.` selector beats `.pfp-menu-item span { flex:1 }` so the
   badge no longer stretches across and covers the label. */
.pfp-menu-item span.pfp-menu-badge {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 7px;
    background: linear-gradient(155deg, #c79bff 0%, #ddb1f9 100%);
    color: #fff;
    font-size: .68rem; font-weight: 800; line-height: 1.5;
    border-radius: 999px;
    text-align: center;
    box-shadow: 0 1px 5px rgba(221,177,249,.4);
}

.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: #c79bff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hud-meta .hud-sep { color: rgba(255,255,255,.25); font-weight: 400; }
.hud-lvl { color: #dcc8ff; }
.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: #c79bff; 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%, #dcc8ff 100%);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(199,155,255,.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(199,155,255,.45), 0 0 18px rgba(199,155,255,.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(199,155,255,.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(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    box-shadow: none;
}
.hud-currency:active { transform: scale(.95); }

/* Streak flame — an actual flame with the day count inside it; the flame
   "heats up" with the streak length (tier class set by JS). */
.hud-streak {
    position: relative;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 25px; height: 36px;
    color: #c4c4ce;            /* solid grayscale flame */
    transition: color .3s ease, filter .3s ease, transform .15s ease;
}
.hud-streak:hover { background: none !important; transform: scale(1.1); }
.hud-streak-svg { width: 100%; height: 100%; display: block; }
/* the day count, knocked OUT of the flame (shows the dark navbar through it).
   font-size is in viewBox user units (viewBox is 736×1062). */
.hud-streak-num {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 360px; font-weight: 800;
}
.hud-streak.s-1d .hud-streak-num { font-size: 440px; }
.hud-streak.s-3d .hud-streak-num { font-size: 250px; }
/* grayscale heat — flame brightens (stays gray) the longer the streak */
.hud-streak.streak-t0 { color: #9a9aa4; }
.hud-streak.streak-t1 { color: #b0b0ba; }
.hud-streak.streak-t2 { color: #c4c4ce; }
.hud-streak.streak-t3 { color: #d8d8e0; filter: drop-shadow(0 0 4px rgba(255,255,255,.18)); }
.hud-streak.streak-t4 { color: #ededf2; filter: drop-shadow(0 0 7px rgba(255,255,255,.35)); }

/* 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: 58px; padding: 0 10px; }
    body:has(.navbar-hud) { padding-top: 58px; }
    .navbar-hud.navbar-hud-shrunk { height: 58px; }
    body:has(.navbar-hud.navbar-hud-shrunk) { padding-top: 58px; }

    /* 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, #c79bff);
    position: fixed;
    z-index: 59;
    pointer-events: none;
}

/* Halo — positioned exactly on top of the FAB, a single quiet ring breathes
   outward. No glow; the rest of the site keeps halos barely visible. */
.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: 1px solid color-mix(in srgb, var(--oi-accent) 45%, transparent);
    opacity: 0;
}
.oryx-intro.is-visible .oryx-intro-halo .oryx-intro-ring {
    animation: oryxIntroRing 2.6s cubic-bezier(.22,1,.36,1) infinite;
}
.oryx-intro.is-visible .oryx-intro-halo .oryx-intro-ring:nth-child(2) {
    animation-delay: 1.3s;
}
@keyframes oryxIntroRing {
    0%   { transform: scale(.95); opacity: 0; }
    12%  { opacity: .4; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* Callout — floats above the FAB, tethered with a small arrow. Flat surface,
   same language as the chat panel (bg-card + thin border + soft shadow). */
.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: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .55);
    color: var(--text-primary);
    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;
}

/* Tether — small diamond pointing from the callout toward the FAB. */
.oryx-intro-tether {
    position: absolute;
    right: 18px;
    bottom: -6px;
    width: 12px; height: 12px;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transform: rotate(45deg);
}

/* Eyebrow — quiet label with a small accent dot. */
.oryx-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.oryx-intro-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--oi-accent);
    animation: oryxIntroPulse 1.8s ease-in-out infinite;
}
@keyframes oryxIntroPulse {
    0%, 100% { opacity: 1;  }
    50%      { opacity: .4; }
}

.oryx-intro-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0 0 6px;
    color: var(--text-heading);
}
.oryx-intro-body {
    margin: 0 0 14px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.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: var(--oi-accent);
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.oryx-intro-primary:hover {
    background: color-mix(in srgb, var(--oi-accent) 85%, #fff);
}
.oryx-intro-primary:active { transform: scale(.98); }

.oryx-intro-later {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: .78rem;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.oryx-intro-later:hover {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-color: var(--text-muted);
}

.oryx-intro-dismiss {
    position: absolute;
    top: 8px; right: 8px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.oryx-intro-dismiss:hover {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

/* 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 redesign (2026-05-03).
   Adopts the same visual vocabulary as Status Screen / SoulFrame:
     · atmospheric backdrop (drifting cyan + violet + pink blobs)
     · card surfaces (dark gradient + accent border + scan-line + soft heavy shadow)
     · dual-accent palette (cyan #7be6ff → violet #c084fc) — used with discipline
     · pulsing glow on the active conversation
     · gradient text on the title
   Identity-only — JS bindings unchanged.
   ============================================ */

.msg-page {
    --m-bg:        #000000;
    --m-card:      #000000;
    --m-card-2:    #000000;
    --m-line:      rgba(199, 155, 255, .14);
    --m-line-on:   rgba(199, 155, 255, .4);
    --m-cyan:      #c79bff;
    --m-violet:    #ddb1f9;
    --m-grad:      linear-gradient(135deg, #c79bff 0%, #ddb1f9 100%);
    --m-grad-soft: linear-gradient(135deg, rgba(199, 155, 255, .10), rgba(221, 177, 249, .10));
    --m-ink:       #d8e6ee;
    --m-mute:      #6e8c9a;
    --m-shadow:    0 18px 40px rgba(0, 0, 0, .55);
    --m-mono:      'Space Mono', ui-monospace, "SF Mono", Menlo, monospace;
}

/* ----- Atmospheric backdrop — pure-black floor, faintest teal/sky
   washes so the surface isn't dead flat. ----------------------------- */
body.msg-page {
    background:
        radial-gradient(50% 50% at 12% 0%,  rgba(199, 155, 255, .05), transparent 65%),
        radial-gradient(55% 50% at 95% 100%, rgba(221, 177, 249, .035), transparent 65%),
        #000000;
    background-attachment: fixed;
}

/* ----- Layout: full-width — no centred 1280px box ------------------ */
.msg-page .msg-layout { max-width: none; width: 100%; gap: 0; padding: 0; }

/* ----- SIDEBAR — same black as the page so the home list reads as a
   single dark canvas instead of a floating card. ---------------------- */
.msg-page .msg-sidebar {
    width: 340px;
    min-width: 340px;
    background: var(--m-bg);
    border-right: 1px solid var(--m-line);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}
.msg-page .msg-sidebar::before { content: none; }
.msg-page .msg-sidebar > * { position: relative; z-index: 1; }

/* Sidebar header */
.msg-page .msg-sidebar-head {
    padding: 22px 20px 14px;
    border-bottom: 1px solid var(--m-line);
}
.msg-sidebar-title { display: flex; flex-direction: column; gap: 8px; }

/* Eyebrow strip with hairlines, like .ss-sysline */
.msg-sidebar-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--m-mono);
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--m-cyan);
    margin-bottom: 2px;
}
.msg-sidebar-tag::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--m-line), transparent);
}
.msg-sidebar-tag-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--m-cyan);
    box-shadow: 0 0 10px var(--m-cyan);
    animation: msgPulse 1.6s ease-in-out infinite;
}
@keyframes msgPulse { 50% { opacity: .35; } }

/* Gradient title — cyan → violet, the CCA dual-accent. */
.msg-page .msg-sidebar-head h2 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    background: var(--m-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.msg-page .msg-icon-btn {
    color: var(--m-mute);
    border: 1px solid transparent;
}
.msg-page .msg-icon-btn:hover {
    background: rgba(199, 155, 255, .08);
    border-color: rgba(199, 155, 255, .3);
    color: var(--m-cyan);
}

/* Search */
.msg-page .msg-search-wrap { padding: 14px 20px 12px; }
.msg-page .msg-search {
    background: rgba(7, 9, 22, .65);
    border: 1px solid var(--m-line);
    border-radius: 10px;
    padding: 11px 14px 11px 38px;
    font-size: .88rem;
    color: var(--m-ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.msg-page .msg-search:focus {
    border-color: var(--m-line-on);
    background: rgba(7, 9, 22, .85);
    /* no purple focus ring on inputs (site rule) — border tint only */
}
.msg-page .msg-search::placeholder { color: var(--m-mute); }
.msg-page .msg-search-icon { left: 32px; color: var(--m-cyan); opacity: .65; }

/* Conversation list */
.msg-page .msg-friends-list { padding: 6px 10px 18px; }

.msg-page .msg-friend-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
    transform: none !important;
}
.msg-page .msg-friend-item:hover {
    background: rgba(199, 155, 255, .05);
    border-color: rgba(199, 155, 255, .14);
}

/* Active row — pulsing cyan↔violet glow + accent border */
.msg-page .msg-friend-item.active {
    background: var(--m-grad-soft);
    border-color: rgba(199, 155, 255, .35);
    box-shadow:
        inset 0 0 24px -8px rgba(199, 155, 255, .35),
        0 0 0 1px rgba(199, 155, 255, .14);
    animation: msgActivePulse 3s ease-in-out infinite;
}
@keyframes msgActivePulse {
    0%, 100% {
        box-shadow:
            inset 0 0 24px -8px rgba(199, 155, 255, .35),
            0 0 0 1px rgba(199, 155, 255, .14);
    }
    50% {
        box-shadow:
            inset 0 0 28px -6px rgba(199, 155, 255, .40),
            0 0 0 1px rgba(199, 155, 255, .25);
    }
}
.msg-page .msg-friend-item.active .msg-friend-top strong { color: #fff; }

.msg-page .msg-friend-avatar {
    width: 46px; height: 46px;
    border: 0;
    background: linear-gradient(135deg, rgba(199, 155, 255, .18), rgba(199, 155, 255, .18));
    color: var(--m-ink);
}
.msg-page .msg-friend-item.active .msg-friend-avatar {
    border: 0;
    box-shadow: none;
}

.msg-page .msg-friend-top strong { font-size: .92rem; font-weight: 600; color: var(--m-ink); }
.msg-page .msg-friend-preview    { font-size: .82rem; color: var(--m-mute); }
.msg-page .msg-friend-time       { font-size: .7rem;  color: var(--m-mute); font-family: var(--m-mono); letter-spacing: .04em; }

/* Online dot — green with pulse halo */
.msg-page .msg-friend-avatar-wrap .msg-dot-online {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
    border-color: var(--m-bg);
    animation: msgOnlinePulse 2.4s ease-out infinite;
}
@keyframes msgOnlinePulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Unread row */
.msg-page .msg-friend-item.unread .msg-friend-top strong { color: #fff; }
.msg-page .msg-friend-item.unread .msg-friend-preview     { color: var(--m-ink); font-weight: 500; }
.msg-page .msg-friend-item.unread .msg-friend-time {
    color: var(--m-cyan);
    font-weight: 700;
    background: none;
    -webkit-text-fill-color: var(--m-cyan);
}
.msg-page .msg-unread-dot {
    width: 8px; height: 8px;
    background: var(--m-cyan);
    box-shadow: 0 0 8px rgba(199, 155, 255, .7);
}

/* Level chip — quiet card style */
.msg-rank-chip,
.msg-level-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 7px;
    margin-left: 6px;
    border-radius: 5px;
    font-family: var(--m-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    color: var(--m-cyan);
    background: rgba(199, 155, 255, .08);
    border: 1px solid rgba(199, 155, 255, .25);
    box-shadow: none;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Pending requests strip */
.msg-page .msg-requests {
    padding: 14px 20px;
    border-bottom: 1px solid var(--m-line);
    background: rgba(7, 9, 22, .35);
}
.msg-page .msg-requests-head {
    color: var(--m-mute);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-family: var(--m-mono);
    font-size: .68rem;
    font-weight: 600;
}
.msg-page .msg-badge {
    background: var(--m-cyan);
    color: #05060e;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(199, 155, 255, .5);
}
.msg-page .msg-accept-btn {
    background: var(--m-grad);
    color: #05060e;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px rgba(199, 155, 255, .55);
    transition: filter .15s ease;
}
.msg-page .msg-accept-btn:hover { filter: brightness(1.08); opacity: 1; }
.msg-page .msg-reject-btn { border-color: var(--m-line); color: var(--m-mute); }

/* ----- CHAT panel ---------------------------------------------------- */
.msg-page .msg-chat {
    background: #000000;
    border-left: 1px solid var(--m-line);
    box-shadow: none;
    position: relative;
}
.msg-page .msg-chat::before { content: none; }
.msg-page .msg-chat > * { position: relative; z-index: 1; }

/* Chat header */
.msg-page .msg-chat-header {
    background: #000000;
    border-bottom: 1px solid var(--m-line);
    padding: 14px 22px;
}
.msg-page .msg-chat-avatar-inner {
    width: 40px; height: 40px;
    border: 1px solid rgba(199, 155, 255, .35);
    background: linear-gradient(135deg, rgba(199, 155, 255, .15), rgba(199, 155, 255, .15));
    color: var(--m-ink);
    box-shadow: 0 0 18px -4px rgba(199, 155, 255, .35);
}
.msg-page .msg-chat-user strong { font-size: 1rem; color: var(--m-ink); letter-spacing: -.005em; }
.msg-page .msg-status {
    font-family: var(--m-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.msg-page .msg-status-online  { color: #34d399; }
.msg-page .msg-status-offline { color: var(--m-mute); }

.msg-page .msg-call-btn,
.msg-page .msg-menu-btn { color: var(--m-mute); }
.msg-page .msg-call-btn:hover,
.msg-page .msg-menu-btn:hover {
    background: rgba(199, 155, 255, .08);
    border-color: rgba(199, 155, 255, .3);
    color: var(--m-cyan);
}

/* Pinned bar */
.msg-page .msg-pinned-bar {
    background: linear-gradient(180deg, rgba(199, 155, 255, .06), rgba(199, 155, 255, .03));
    border-bottom: 1px solid var(--m-line);
    color: var(--m-ink);
}
.msg-page .msg-pinned-bar:hover {
    background: linear-gradient(180deg, rgba(199, 155, 255, .10), rgba(199, 155, 255, .06));
}
.msg-page .msg-pinned-bar svg { color: var(--m-cyan); }
.msg-page .msg-pinned-count {
    background: rgba(199, 155, 255, .14);
    border: 1px solid rgba(199, 155, 255, .35);
    color: var(--m-cyan);
}

/* Messages pane */
.msg-page .msg-messages { padding: 24px 28px; gap: 4px; }

/* ----- BUBBLES ------------------------------------------------------ */
.msg-page .msg-bubble {
    max-width: min(78%, 580px);
    padding: 11px 16px;
    font-size: .94rem;
    line-height: 1.5;
}

/* Outgoing — same shape, shifted toward blue so the bubble reads as
   ocean/sky rather than teal/green. */
.msg-page .msg-bubble-mine {
    background: linear-gradient(135deg, #3a2170 0%, #5e3aa8 100%);
    color: #efeaff;
    font-weight: 500;
    border-radius: 18px 18px 6px 18px;
    box-shadow:
        0 8px 22px -10px rgba(221, 177, 249, .28),
        0 0 18px -10px rgba(221, 177, 249, .22);
}
.msg-page .msg-bubble-mine.msg-bubble-first { border-radius: 18px 18px 6px 18px; }
.msg-page .msg-bubble-mine.msg-bubble-last  { border-radius: 18px 6px 6px 18px; }
.msg-page .msg-bubble-mine.msg-bubble-first.msg-bubble-last { border-radius: 18px 18px 6px 18px; }

/* Incoming — card surface with scan-line, accent border */
.msg-page .msg-bubble-theirs {
    background: var(--m-card);
    border: 1px solid var(--m-line);
    color: #b8c4ca;
    border-radius: 18px 18px 18px 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    overflow: hidden;
}
.msg-page .msg-bubble-theirs::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(199, 155, 255, .025) 0px,
        rgba(199, 155, 255, .025) 1px,
        transparent 1px,
        transparent 3px
    );
}
.msg-page .msg-bubble-theirs > * { position: relative; }
.msg-page .msg-bubble-theirs.msg-bubble-first { border-radius: 18px 18px 18px 6px; }
.msg-page .msg-bubble-theirs.msg-bubble-last  { border-radius: 6px 18px 18px 6px; }
.msg-page .msg-bubble-theirs.msg-bubble-first.msg-bubble-last { border-radius: 18px 18px 18px 6px; }

.msg-page .msg-bubble-first { margin-top: 14px; }

.msg-page .msg-bubble-mine .msg-reply-quote {
    border-left: 2px solid rgba(5, 6, 14, .45);
    background: rgba(5, 6, 14, .15);
}
.msg-page .msg-bubble-theirs .msg-reply-quote {
    border-left: 2px solid var(--m-cyan);
    background: rgba(199, 155, 255, .08);
}
.msg-page .msg-reply-quote-name { font-weight: 700; opacity: .9; }

.msg-page .msg-bubble-time,
.msg-page .msg-read-receipt {
    font-family: var(--m-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}
.msg-page .msg-bubble-mine .msg-bubble-time,
.msg-page .msg-bubble-mine .msg-read-receipt { color: rgba(5, 6, 14, .65); opacity: .8; }

.msg-page .msg-bubble-enter { animation: msgBubbleIn .25s cubic-bezier(.22,1,.36,1); }
@keyframes msgBubbleIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ----- TYPING indicator ------------------------------------------- */
.msg-page .msg-typing { padding: 6px 28px 8px; }
.msg-page .msg-typing-dots span {
    background: var(--m-cyan);
    box-shadow: 0 0 6px rgba(199, 155, 255, .5);
}
.msg-page .msg-typing-text {
    font-family: var(--m-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--m-cyan);
    background: none;
    -webkit-text-fill-color: var(--m-cyan);
    animation: none;
}

/* ----- REPLY banner ----------------------------------------------- */
.msg-page .msg-reply-banner {
    background: linear-gradient(180deg, rgba(14, 16, 34, .85), rgba(8, 9, 22, .85));
    border-top: 1px solid var(--m-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.msg-page .msg-reply-banner-content { border-left: 2px solid var(--m-cyan); }
.msg-page .msg-reply-banner-label strong { color: var(--m-cyan); }

/* ----- COMPOSER --------------------------------------------------- */
/* Input row is a single rounded bubble — the emoji/attach/voice/send
   buttons live INSIDE the pill alongside the textarea, so the whole row
   reads as one capsule against the black chat background. */
.msg-page .msg-input-area {
    background: #0e0e0e;
    border: 0;
    border-radius: 9999px;
    margin: 10px 18px 14px;
    padding: 6px 8px;
    gap: 4px;
    align-items: center;
}
.msg-page .msg-input-area:focus-within {
    background: #0e0e0e;
    box-shadow: none;
}
.msg-page .msg-input {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 6px 8px;
    font-size: .92rem;
    line-height: 1.45;
    color: var(--m-ink);
}
.msg-page .msg-input:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}
.msg-page .msg-input::placeholder { color: var(--m-mute); }

.msg-page .msg-emoji-btn,
.msg-page .msg-attach-btn,
.msg-page .msg-voice-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--m-mute);
    background: transparent;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.msg-page .msg-emoji-btn:hover,
.msg-page .msg-attach-btn:hover,
.msg-page .msg-voice-btn:hover {
    background: rgba(199, 155, 255, .08);
    border-color: rgba(199, 155, 255, .3);
    color: var(--m-cyan);
    transform: none;
}

/* THE accent: send button — cyan → violet with brand glow */
.msg-page .msg-send-btn {
    width: 42px; height: 42px;
    background: var(--m-grad);
    color: #05060e;
    box-shadow:
        0 6px 18px -6px rgba(199, 155, 255, .55),
        0 0 22px -8px rgba(199, 155, 255, .55);
    transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.msg-page .msg-send-btn:hover {
    filter: brightness(1.1);
    box-shadow:
        0 8px 22px -4px rgba(199, 155, 255, .65),
        0 0 26px -6px rgba(199, 155, 255, .65);
}
.msg-page .msg-send-btn:active { transform: scale(.94); }

/* ----- VOICE recording -------------------------------------------- */
.msg-page .msg-voice-recording {
    background: linear-gradient(180deg, rgba(14, 16, 34, .85), rgba(8, 9, 22, .85));
    border-top: 1px solid var(--m-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.msg-page .msg-voice-recording-dot {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, .65);
}
.msg-page .msg-voice-recording-time { font-family: var(--m-mono); color: var(--m-cyan); }
.msg-page .msg-voice-send {
    background: var(--m-grad);
    color: #05060e;
    box-shadow: 0 6px 16px -6px rgba(199, 155, 255, .55);
}

/* ----- ACTION panel + modals + context menu ----------------------- */
.msg-page .msg-action-panel,
.msg-page .msg-share-panel,
.msg-page .msg-wp-panel,
.msg-page .msg-report-panel,
.msg-page .msg-context-menu {
    background: var(--m-card);
    border: 1px solid var(--m-line);
    box-shadow:
        0 24px 50px -16px rgba(0, 0, 0, .6),
        0 0 50px -20px rgba(199, 155, 255, .3);
    color: var(--m-ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.msg-page .msg-action-panel { border-bottom: none; border-radius: 18px 18px 0 0; }
.msg-page .msg-action-item {
    border-radius: 10px;
    color: var(--m-ink);
    transition: background .15s ease;
    transform: none !important;
}
.msg-page .msg-action-item:hover { background: rgba(199, 155, 255, .08); }
.msg-page .msg-action-item:hover svg { color: var(--m-cyan); }

/* ----- Slim brand-tinted scrollbars ------------------------------- */
.msg-page .msg-friends-list,
.msg-page .msg-messages,
.msg-page .msg-search-results {
    scrollbar-width: thin;
    scrollbar-color: rgba(199, 155, 255, .25) transparent;
}
.msg-page .msg-friends-list::-webkit-scrollbar,
.msg-page .msg-messages::-webkit-scrollbar,
.msg-page .msg-search-results::-webkit-scrollbar { width: 6px; }
.msg-page .msg-friends-list::-webkit-scrollbar-thumb,
.msg-page .msg-messages::-webkit-scrollbar-thumb,
.msg-page .msg-search-results::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(199, 155, 255, .35), rgba(199, 155, 255, .25));
    border-radius: 4px;
}
.msg-page .msg-friends-list::-webkit-scrollbar-thumb:hover,
.msg-page .msg-messages::-webkit-scrollbar-thumb:hover,
.msg-page .msg-search-results::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--m-cyan), var(--m-violet));
}

/* ----- EMPTY state ------------------------------------------------ */
.msg-empty-system {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 36px 24px;
    max-width: 360px;
}
.msg-empty-glyph {
    position: relative;
    width: 78px; height: 78px;
    display: grid; place-items: center;
    margin-bottom: 16px;
    color: var(--m-cyan);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(199, 155, 255, .14) 0%, transparent 70%);
}
.msg-empty-glyph svg {
    position: relative; z-index: 1;
    filter: drop-shadow(0 0 10px rgba(199, 155, 255, .55));
}
.msg-empty-glyph .msg-empty-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(199, 155, 255, .45);
    animation: msgEmptyRing 2.8s cubic-bezier(.22,1,.36,1) infinite;
    opacity: 0;
}
.msg-empty-glyph .msg-empty-ring:nth-child(2) { animation-delay: 1.4s; }
@keyframes msgEmptyRing {
    0%   { transform: scale(.9); opacity: 0;  }
    20%  { opacity: .6; }
    100% { transform: scale(1.7); opacity: 0; }
}
.msg-empty-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--m-mono);
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--m-cyan);
    font-weight: 600;
    margin-bottom: 6px;
}
.msg-empty-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--m-cyan);
    box-shadow: 0 0 10px var(--m-cyan);
    animation: msgPulse 1.6s ease-in-out infinite;
}
.msg-empty-system p {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 4px 0 6px;
    background: var(--m-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.005em;
}
.msg-empty-system small {
    font-size: .82rem;
    color: var(--m-mute);
    line-height: 1.5;
}

/* ----- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.msg-page::before { animation: none; }
    .msg-page .msg-friend-item.active { animation: none; }
    .msg-page .msg-bubble-enter { animation: none; }
    .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: .35; transform: scale(1.2); }
}

/* ----- Light theme fallback (messages.php force-enables dark) ----- */
[data-theme="light"] .msg-page .msg-bubble-theirs {
    background: linear-gradient(180deg, #ffffff, #f7f7fc);
    border-color: rgba(124, 58, 237, .16);
    color: #1c1e37;
}
[data-theme="light"] .msg-page .msg-bubble-theirs::before { display: none; }
[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, #c79bff 0%, #c79bff 100%);
    color: #05060e;
    border: 0;
    box-shadow: 0 6px 16px -6px rgba(199, 155, 255, .55);
    font-weight: 700;
}
.msg-dm-composer-send:hover { filter: brightness(1.08); }

/* "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, rgba(199, 155, 255, .25), rgba(199, 155, 255, .25));
    border: 1px solid rgba(199, 155, 255, .35);
    color: #dfe4ff;
    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: #c79bff;
    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, #ddb1f9, #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: #c79bff;
    box-shadow: 0 0 8px #c79bff;
    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%, #c79bff);
    -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, #c79bff, #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(199, 155, 255, .55);
    box-shadow: none;
}
.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, #c79bff);
    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, #c79bff, #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: #c79bff;
}
.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, #ddb1f9, #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, #ddb1f9, #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: #c79bff; }

.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, #ddb1f9, #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: linear-gradient(135deg, rgba(20, 16, 42, .96), rgba(14, 12, 28, .96));
    border: 1px solid rgba(124,58,237,.36);
    border-radius: 16px;
    padding: 10px 12px 10px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow:
        0 12px 32px rgba(0,0,0,.5),
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 0 28px rgba(124,58,237,.28);
    color: #fff;
    min-width: 240px;
    max-width: 340px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .15s ease, box-shadow .2s ease;
    animation: call-pill-in .25s cubic-bezier(.22,1,.36,1);
}
.call-active-pill:hover {
    transform: translateY(-1px);
    box-shadow:
        0 16px 38px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 36px rgba(124,58,237,.36);
}
@keyframes call-pill-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Live-pulse dot in front of the status line — mirrors the stage-status
   chip so the minimized pill keeps the same "we're still on a call" cue. */
.call-active-info span::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,.85);
    margin-right: 6px;
    vertical-align: 1px;
    animation: call-pill-pulse 1.6s ease-in-out infinite;
}
@keyframes call-pill-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.5); opacity: .5; }
}
.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,.22), transparent 60%),
        radial-gradient(900px 700px at 100% 110%, rgba(34,197,94,.10), transparent 55%),
        radial-gradient(700px 600px at 0% 110%, rgba(236,72,153,.10), transparent 60%),
        linear-gradient(180deg, #0a0918 0%, #04030d 100%);
}
/* Outer vignette + film grain — settles the bright auroras into the
   surrounding chrome instead of letting them halo onto the edge. */
.call-stage-bg::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
}
.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: 9px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    background: rgba(20, 16, 42, .58);
    border: 1px solid rgba(255,255,255,.10);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.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: 148px; height: 148px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(124,58,237,.45), rgba(236,72,153,.32));
    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,.14);
    box-shadow:
        0 0 0 3px rgba(255,255,255,.04),
        0 0 0 10px rgba(124,58,237,.10),
        0 0 60px rgba(124,58,237,.45),
        0 24px 60px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.06);
    z-index: 1;
    transition: box-shadow .5s ease;
}
.call-stage[data-call-state="incoming"] .call-stage-avatar {
    box-shadow:
        0 0 0 3px rgba(255,255,255,.04),
        0 0 0 10px rgba(236,72,153,.14),
        0 0 70px rgba(236,72,153,.55),
        0 24px 60px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.06);
    animation: call-stage-avatar-breathe 2.6s ease-in-out infinite;
}
.call-stage[data-call-state="live"] .call-stage-avatar {
    box-shadow:
        0 0 0 3px rgba(255,255,255,.04),
        0 0 0 10px rgba(34,197,94,.12),
        0 0 60px rgba(34,197,94,.4),
        0 24px 60px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.06);
}
@keyframes call-stage-avatar-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.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 ----
   Buttons sit inside a translucent glass dock so they read as a single
   control surface instead of floating icons on a busy backdrop. */
.call-stage-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 22px 20px 32px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    margin: 0 auto;
    width: fit-content;
    max-width: calc(100% - 32px);
    border-radius: 32px;
    background: rgba(12, 10, 26, .42);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    margin-bottom: 28px;
    margin-bottom: max(28px, 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));
}

/* ---- Adding-to-pack banner (sits just above the body) ---- */
.csp-banner {
    padding: 8px 12px;
    background: rgba(124,58,237,.18);
    border-bottom: 1px solid rgba(124,58,237,.30);
    font-size: .78rem;
    color: var(--text-primary);
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.csp-banner-cancel {
    background: rgba(255,255,255,.10);
    border: 0; color: var(--text-primary);
    font: 600 .72rem inherit;
    padding: 4px 10px; border-radius: 999px;
    cursor: pointer;
}
.csp-banner-cancel:hover { background: rgba(255,255,255,.18); }

/* ---- Per-tile heart + remove affordances ---- */
.csp-item-fav,
.csp-item-rm {
    position: absolute;
    top: 3px; right: 3px;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.65);
    border-radius: 999px;
    z-index: 2;
    cursor: pointer;
    transition: color .15s, background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.csp-item-rm {
    left: 3px; right: auto;
    font: 700 14px/1 inherit;
    background: rgba(220,38,38,.85);
    color: #fff;
}
.csp-item-fav:hover,
.csp-item-fav:focus-visible { color: #fff; background: rgba(0,0,0,.75); outline: none; }
.csp-item-fav-on { color: #ec4899 !important; background: rgba(236,72,153,.18) !important; }
.csp-item-fav-on:hover { color: #fff !important; background: rgba(236,72,153,.55) !important; }

.csp-item-added {
    animation: csp-tile-added .65s ease;
}
@keyframes csp-tile-added {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6) inset; }
    35%  { box-shadow: 0 0 0 3px rgba(34,197,94,.45) inset; }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0) inset; }
}

/* ---- Yours tab: action buttons + pack cards ---- */
.csp-yours-actions {
    display: flex; gap: 8px;
    margin-bottom: 10px;
}
.csp-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font: 600 .76rem inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
}
.csp-cta:hover  { background: rgba(255,255,255,.08); }
.csp-cta:active { transform: scale(.97); }
.csp-cta-primary {
    background: var(--link-color); color: #fff; border-color: transparent;
}
.csp-cta-primary:hover { background: var(--link-color); filter: brightness(1.1); }

.csp-empty-soft {
    text-align: left;
    padding: 12px 4px;
    font-size: .76rem;
    color: var(--text-faint);
}

.csp-pack-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 12px;
}
.csp-pack-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    text-align: left;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.csp-pack-card:hover { background: rgba(255,255,255,.07); border-color: rgba(124,58,237,.35); }
.csp-pack-cover {
    width: 44px; height: 44px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(124,58,237,.30), rgba(236,72,153,.30));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-weight: 700; font-size: 1.1rem;
}
.csp-pack-cover img { width: 100%; height: 100%; object-fit: cover; }
.csp-pack-cover-fallback { line-height: 1; }
.csp-pack-meta {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
    color: var(--text-primary);
}
.csp-pack-meta strong {
    font-weight: 600; font-size: .88rem;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.csp-pack-meta span {
    font-size: .7rem; color: var(--text-faint);
}
.csp-pack-by { font-size: .68rem; color: var(--text-faint); }
.csp-pack-pubbadge {
    font-size: .58rem; font-weight: 700;
    padding: 1px 6px; border-radius: 4px;
    background: rgba(34,197,94,.22); color: #4ade80;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.csp-pack-kebab {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-faint);
    border-radius: 8px;
    cursor: pointer;
}
.csp-pack-kebab:hover { background: rgba(255,255,255,.10); color: var(--text-primary); }

/* ---- Pack content view (head bar + grid) ---- */
.csp-pack-head {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.csp-pack-back {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 0; background: rgba(255,255,255,.06);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.csp-pack-back:hover { background: rgba(255,255,255,.12); }
.csp-pack-title {
    flex: 1 1 auto; min-width: 0;
    font: 600 .9rem inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text-primary);
}
.csp-pack-count {
    font-size: .7rem;
    color: var(--text-faint);
    background: rgba(255,255,255,.04);
    padding: 2px 7px; border-radius: 999px;
}
.csp-pack-act {
    background: rgba(255,255,255,.06);
    border: 0; color: var(--text-primary);
    font: 600 .72rem inherit;
    padding: 5px 10px; border-radius: 999px;
    cursor: pointer;
}
.csp-pack-act:hover { background: rgba(255,255,255,.12); }

/* ---- Popover menu (kebab → actions, long-press → "Add to pack…") ---- */
.csp-popmenu {
    position: fixed;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    padding: 4px;
    z-index: 1100;
    animation: csp-pop .12s ease;
}
@keyframes csp-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.csp-popmenu-hint {
    padding: 6px 10px 4px;
    font: 700 .62rem inherit;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
}
.csp-popmenu-item {
    display: block; width: 100%;
    text-align: left;
    background: transparent; border: 0;
    color: var(--text-primary);
    font: 500 .82rem inherit;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.csp-popmenu-item:hover { background: rgba(124,58,237,.18); }
.csp-popmenu-danger { color: #f87171; }
.csp-popmenu-danger:hover { background: rgba(220,38,38,.16); color: #fff; }

/* ---- Modals (create pack, share, friend picker) ---- */
.csp-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: csp-modal-in .14s ease;
}
@keyframes csp-modal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.csp-modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
    width: min(420px, 100%);
    max-height: 80vh;
    overflow: auto;
    color: var(--text-primary);
}
.csp-modal-card h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
}
.csp-modal-sub {
    font-size: .78rem;
    color: var(--text-faint);
    margin: 0 0 14px;
}
.csp-modal-input,
.csp-modal-area {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font: 400 .85rem inherit;
    outline: none;
    margin-bottom: 10px;
}
.csp-modal-area { min-height: 60px; resize: vertical; }
.csp-modal-input:focus,
.csp-modal-area:focus { border-color: var(--link-color); }
.csp-modal-check {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; color: var(--text-faint);
    margin-bottom: 10px;
    cursor: pointer;
}
.csp-modal-btns {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 4px;
}
.csp-modal-cancel,
.csp-modal-go {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font: 600 .78rem inherit;
    cursor: pointer;
}
.csp-modal-cancel:hover { background: rgba(255,255,255,.08); }
.csp-modal-go {
    background: var(--link-color);
    color: #fff; border-color: transparent;
}
.csp-modal-go:hover { filter: brightness(1.1); }
.csp-modal-go:disabled { opacity: .55; cursor: default; }

/* Share link row */
.csp-share-link {
    display: flex; gap: 6px; margin-bottom: 14px;
}
.csp-share-link input {
    flex: 1;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font: 400 .78rem monospace;
    outline: none;
}

/* Friend picker */
.csp-modal-tall .csp-friend-list {
    max-height: 320px;
    overflow-y: auto;
    margin: 6px 0 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.02);
}
.csp-friend-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.csp-friend-row:last-child { border-bottom: 0; }
.csp-friend-row:hover { background: rgba(124,58,237,.10); }
.csp-friend-av {
    width: 32px; height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(236,72,153,.35));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 600 .8rem inherit;
}
.csp-friend-av img { width: 100%; height: 100%; object-fit: cover; }
.csp-friend-name { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.csp-friend-name strong { font: 600 .85rem inherit; }
.csp-friend-name small  { font-size: .7rem; color: var(--text-faint); }
.csp-friend-send {
    font: 600 .72rem inherit;
    color: var(--link-color);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(124,58,237,.15);
}

/* Shared-pack landing inside the picker (after ?pack_token deep link) */
.csp-share-landing { padding: 6px 0; }
.csp-share-landing h3 {
    margin: 0 0 4px;
    font: 700 1rem inherit;
}
.csp-grid-preview {
    max-height: 240px;
    overflow-y: auto;
    margin: 14px 0;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
}

/* ============== Messages-side: sticker fave + shared-pack card ============== */
.msg-sticker-wrap {
    position: relative;
    display: inline-block;
}
.msg-sticker-fave {
    position: absolute;
    bottom: -4px; right: -4px;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(14, 14, 26, .9);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.65);
    border-radius: 50%;
    cursor: pointer;
    transition: color .15s, background .15s, transform .12s;
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
    opacity: 0;
}
.msg-sticker-wrap:hover .msg-sticker-fave,
.msg-sticker-fave-on { opacity: 1; }
.msg-sticker-fave:hover { color: #ec4899; background: rgba(14,14,26,.95); }
.msg-sticker-fave-on { color: #ec4899; }
.msg-sticker-fave:active { transform: scale(.9); }

.msg-pack-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px;
    min-width: 240px;
    max-width: 340px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(236,72,153,.16));
    border: 1px solid rgba(124,58,237,.28);
}
.msg-pack-cover {
    width: 52px; height: 52px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,.50), rgba(236,72,153,.42));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.msg-pack-cover img { width: 100%; height: 100%; object-fit: cover; }
.msg-pack-info {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    color: #fff;
}
.msg-pack-info strong {
    font: 600 .9rem inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-pack-info span { font-size: .72rem; opacity: .8; }
.msg-pack-save {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    border: 0;
    background: #fff;
    color: #4c1d95;
    font: 700 .74rem inherit;
    cursor: pointer;
    transition: transform .12s ease, filter .15s ease;
}
.msg-pack-save:hover  { filter: brightness(.95); }
.msg-pack-save:active { transform: scale(.95); }
.msg-pack-save:disabled { cursor: default; opacity: .8; }
.msg-pack-save-sent {
    background: transparent;
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.2);
    cursor: default;
    font-weight: 600;
}
.msg-pack-save-done {
    background: rgba(34,197,94,.85);
    color: #fff;
}


/* =========================================================================
   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 {
    /* One reading column, not the full page. This was 1180px, left over
       from the two-column dossier layout — with the dossier folded into
       one block that made the title, the artwork and every comment run
       nearly twice as wide as the reference's column, which is the first
       thing that makes the page read as a different design. */
    max-width: 804px;
    margin: 0 auto;
    padding: 18px clamp(14px, 3vw, 32px) 120px;


    /* The soft filled surface every pill on this page sits on — action
       row, flair, sort, search. One token so they can never drift apart,
       and a pair per theme because "slightly raised off the ground"
       means a lighter fill on dark and a darker one on light. */
    --pv-pill:    rgba(255, 255, 255, .07);
    --pv-pill-hi: rgba(255, 255, 255, .12);
    --pv-thread:  rgba(255, 255, 255, .13);
}
@media (min-width: 900px) {
    .pv { padding-top: 30px; }
}
[data-theme="light"] .pv {
    --pv-pill:    rgba(43, 21, 87, .07);
    --pv-pill-hi: rgba(43, 21, 87, .13);
    --pv-thread:  rgba(43, 21, 87, .16);
}

/* 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: 16px;
    display: block;
    box-shadow: 0 20px 48px -18px rgba(0,0,0,.7);
}

/* Prose card — the story's excerpt as the feed shows it, with the way
   through to the reading view. No quote mark: this is an opening, not a
   pull quote. */
/* Doubled selector so these beat .pv-hero-text / .pv-hero-text-body,
   which centre the text and set it in italic serif — right for a pull
   quote, wrong for the opening of a story. The feed shows a story's
   excerpt as plain left-aligned prose, and this is the same content. */
.pv-hero-text.pv-hero-prose {
    text-align: left; max-width: none;
    padding: 20px 22px 22px;
}
.pv-hero-text.pv-hero-prose .pv-hero-text-body {
    font-family: inherit; font-style: normal;
    font-size: .98rem; line-height: 1.72;
    color: var(--text-secondary);
}
.pv-hero-open {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 18px; height: 38px; padding: 0 17px;
    border: 1px solid #ddb1f9;
    border-radius: 999px;
    background: #ddb1f9; color: #000;
    font-size: .87rem; font-weight: 700; text-decoration: none;
    transition: background .16s ease-out, color .16s ease-out;
}
/* Hover swaps the two: the lavender moves from the fill to the text and
   the dark moves the other way. The border was already the fill colour,
   so it simply stays put and keeps the button a button once the fill
   goes dark against this near-black ground. */
.pv-hero-open:hover { background: #0d1113; color: #ddb1f9; }
[data-theme="light"] .pv-hero-open:hover { background: #2b1557; color: #ddb1f9; }
/* The same button under a cover's caption. It sits in the dossier's flex
   column, which would stretch it edge to edge. */
.pv-read-more { align-self: flex-start; margin-top: 2px; }

/* 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); }

/* ============================================================
   THE DOCKED NAV RAIL — one definition, every page
   ============================================================
   This lived inline in feed.php and had been copied into post.php, which
   is how the two drifted: the copy missed the black fill, so walking
   from the feed into a post changed the rail's colour and its blur. It
   is the same #sidebar the burger opens everywhere — there is no second
   nav — so its docked form is defined once, here, and any page that
   wants it just adds `cca-rail` to its <body>.

   Below 1100px nothing here applies and the rail goes back to being a
   drawer over a full-width page. */
@media (min-width: 1100px) {
    body.cca-rail #sidebar {
        transform: none !important;
        z-index: 90;                       /* under the navbar, over the page */
        border-right: 1px solid rgba(255,255,255,.08);
    }
    [data-theme="dark"] body.cca-rail #sidebar {
        background: #000;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    [data-theme="light"] body.cca-rail #sidebar { border-right-color: rgba(43,21,87,.14); }

    body.cca-rail #sidebarOverlay { display: none !important; }
    body.cca-rail .menu-btn { display: none; }

    /* With the rail docked the header tab row is the same links twice. */
    body.cca-rail .nav-tabs { display: none; }

    /* Search dead centre of the header — absolutely centred rather than
       flexed, so the logo and the avatar cluster can't pull it off axis. */
    body.cca-rail .nav-searchbar {
        position: absolute;
        left: 50%; transform: translateX(-50%);
        width: min(560px, 42vw); max-width: none; margin: 0;
    }

    /* The rail carries its icons, and its current row is a quiet grey
       pill rather than a bright chip. */
    body.cca-rail #sidebar .sb-link svg,
    body.cca-rail #sidebar .sb-sub svg { display: inline-block !important; width: 20px; height: 20px; }
    body.cca-rail #sidebar .sb-link,
    body.cca-rail #sidebar .sb-sub {
        display: flex !important; align-items: center; gap: 12px !important;
        border-radius: 10px !important;
    }
    body.cca-rail #sidebar .sb-link.sb-active {
        background: rgba(255,255,255,.09) !important;
        color: #fff !important;
    }
    [data-theme="light"] body.cca-rail #sidebar .sb-link.sb-active {
        background: rgba(255,255,255,.12) !important; color: #fff !important;
    }
}

/* ---------- ACTION ROW (filled pills) ----------
   Vote, comment and share sit in soft filled pills rather than reading as
   bare icons — the pill is what tells you they are controls. The vote is
   a single pill: up arrow, score, down arrow, the way a score belongs to
   both arrows rather than to either one. */
.pv-rail {
    display: flex; align-items: center; gap: 8px;
    padding-top: 6px; flex-wrap: wrap;
}
.pv-rail-grow { flex: 1; }

.pv-pill, .pv-vote {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 14px;
    border-radius: 999px;
    background: var(--pv-pill);
    border: 0;
    color: var(--text-secondary);
    font-family: inherit; font-size: .86rem; font-weight: 600;
    text-decoration: none;
    transition: background .16s, color .16s;
}
.pv-pill { cursor: pointer; }
.pv-pill:hover { background: var(--pv-pill-hi); color: var(--text-heading); }
.pv-pill svg { flex: none; }

/* The vote pill's own padding is tighter — the arrows carry their own. */
.pv-vote { padding: 0 4px; gap: 2px; }
.pv-vote-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: none; color: inherit; cursor: pointer;
    transition: background .16s, color .16s;
}
.pv-vote-btn:hover { background: var(--pv-pill-hi); }
.pv-vote-score { min-width: 14px; text-align: center; font-variant-numeric: tabular-nums; }
/* Voted, the feed's way (.fd-like.is-on): the pill keeps its own quiet
   fill and only the heart and the number take the colour. Tinting the
   whole pill red put a red outline around the control, which read as an
   error state rather than a like. */
.pv-vote.is-up   .pv-vote-up,   .pv-vote.is-up   .pv-vote-score   { color: #ff3b5c; }
.pv-vote.is-down .pv-vote-down, .pv-vote.is-down .pv-vote-score   { color: #7d8ea8; }
.pv-vote.is-up .pv-vote-up svg     { fill: currentColor; }
.pv-vote.is-down .pv-vote-down svg { fill: currentColor; }
[data-theme="light"] .pv-vote.is-up .pv-vote-up,
[data-theme="light"] .pv-vote.is-up .pv-vote-score { color: #e0244a; }

/* The ⋯ button lives in the byline now, so it is a plain round icon
   button rather than one of the pills. */
.pv-act-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none;
    margin-left: 4px;
    background: none; border: 0; border-radius: 50%;
    color: var(--text-muted); cursor: pointer;
    transition: background .16s, color .16s;
}
.pv-act-menu:hover { background: var(--pv-pill); color: var(--text-heading); }

/* ---------- FLAIR ----------
   The chips between the title and the work. Small, filled, quiet — the
   genre is the post's own flair and the rest are facts about it. */
.pv-flair { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pv-flair-chip {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border: 0; border-radius: 6px;
    background: var(--pv-pill);
    color: var(--text-secondary);
    font-family: inherit; font-size: .72rem; font-weight: 600;
    letter-spacing: .01em;
}
button.pv-flair-chip { cursor: pointer; }
.pv-flair-genre { background: rgba(221,177,249,.18); color: #ddb1f9; }
[data-theme="light"] .pv-flair-genre { background: rgba(94,48,145,.14); color: #5e3091; }
.pv-flair-star  { background: rgba(251,191,36,.16); color: #fbbf24; }

/* ---------- COMMENTS (inline, no overlay) ---------- */
.pv-comments {
    display: flex; flex-direction: column; gap: 12px;
    padding-top: 4px;
}
/* The comment section on the reading page. It borrows the whole .pv-*
   section wholesale, so all this has to do is give it the article's
   measure and some air under the prose. */
.rd-comments {
    max-width: 720px;
    margin: 40px auto 0;
    /* The narration player is fixed to the bottom of this page, so the
       thread needs room to clear it — without this the last comments sit
       underneath it and can't be read or replied to. */
    padding: 0 clamp(16px, 4vw, 28px) 190px;
    --pv-pill:    rgba(255, 255, 255, .07);
    --pv-pill-hi: rgba(255, 255, 255, .12);
    --pv-thread:  rgba(255, 255, 255, .13);
}
[data-theme="light"] .rd-comments {
    --pv-pill:    rgba(43, 21, 87, .07);
    --pv-pill-hi: rgba(43, 21, 87, .13);
    --pv-thread:  rgba(43, 21, 87, .16);
}

/* ---------- SORT + FIND ----------
   The row between the composer and the thread. Both controls work on the
   comments already on the page, so neither costs a request. */
.pv-cbar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin: 2px 0 4px;
}
.pv-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.pv-sort-label { font-size: .78rem; color: var(--text-muted); }
.pv-sort-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 11px;
    background: none; border: 0; border-radius: 999px;
    color: var(--text-heading);
    font-family: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer;
    transition: background .16s;
}
.pv-sort-btn:hover { background: var(--pv-pill); }
/* `display: flex` here beat the [hidden] attribute's display:none — a
   class rule outranks the UA sheet — so this menu and the comment one
   below painted over the thread permanently. Both carry their own
   [hidden] rule now.

   Surface matches the site's other dropdowns (.nav-tab-menu): a near
   black panel with a white hairline, not --bg-elevated, which is a
   bright violet on this ground. */
.pv-sort-menu {
    position: absolute; top: 36px; left: 0; z-index: 20;
    min-width: 132px; padding: 5px;
    background: #161619;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: 0 26px 60px -18px rgba(0,0,0,.88);
    display: flex; flex-direction: column;
}
.pv-sort-menu[hidden] { display: none; }
[data-theme="light"] .pv-sort-menu { background: #fff; border-color: rgba(43,21,87,.16); box-shadow: 0 20px 46px -18px rgba(43,21,87,.3); }
.pv-sort-item {
    padding: 8px 11px;
    background: none; border: 0; border-radius: 8px;
    color: var(--text-secondary);
    font-family: inherit; font-size: .84rem; text-align: left;
    cursor: pointer;
}
.pv-sort-item:hover { background: var(--pv-pill); color: var(--text-heading); }
.pv-sort-item.is-on { color: var(--text-heading); font-weight: 600; }

.pv-csearch {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 14px;
    border-radius: 999px;
    background: var(--pv-pill);
    color: var(--text-muted);
    transition: background .16s;
}
.pv-csearch:focus-within { background: var(--pv-pill-hi); }
.pv-csearch svg { flex: none; }
.pv-csearch { flex: 1 1 auto; min-width: 0; max-width: 260px; }
.pv-csearch input {
    flex: 1; width: 100%; min-width: 0;
    background: none; border: 0; outline: 0;
    color: var(--text-primary);
    font: inherit; font-size: .82rem;
}
.pv-csearch input::placeholder { color: var(--text-muted); }

/* The thread runs down the page — no inner scroller. A comment section
   that scrolls inside a 460px window hides the conversation and traps
   the page's own scroll on a phone. */
.pv-comments-list {
    display: flex; flex-direction: column; gap: 4px;
}
.pv-comments-empty,
.pv-comments-loading {
    color: var(--text-faint);
    font-size: 13px;
    text-align: center;
    padding: 22px 10px;
}

/* A comment is avatar + column. Replies are indented and carry the
   thread line that ties them back to their parent — the line IS the
   nesting, so no reply needs a border or a panel of its own. */
.pv-comment { display: flex; gap: 9px; padding: 6px 0; }
.pv-comment-reply {
    margin-left: 15px;
    padding-left: 20px;
    border-left: 2px solid var(--pv-thread);
    border-radius: 0;
}
.pv-comment.is-collapsed .pv-comment-body > :not(.pv-comment-head) { display: none; }
.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; }
/* Name, handle, rank and age on one line — and the one thing a collapsed
   comment keeps, so a folded thread still says who is under it. */
.pv-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }

.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;
}
/* Quiet, and on the right with the send button — it was a filled violet
   square at the head of the field, the first thing the eye landed on in
   a box whose whole job is to say "write something". */
.pv-comments-input .pv-comments-sticker-btn { order: 2; color: var(--text-muted); background: none; }
.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; }
/* Per-comment actions, matching the post's row one size down: a vote
   pill, then Reply, then the rest — all of them chips, none of them bare
   text. */
.pv-comment-actions {
    display: flex; align-items: center; gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.pv-comment-actions button {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 10px;
    background: none; border: 0; border-radius: 999px;
    color: var(--text-muted);
    font-family: inherit; font-size: .76rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pv-comment-actions button:hover { background: var(--pv-pill); color: var(--text-heading); }

.pv-cvote { display: inline-flex; align-items: center; gap: 1px; }
.pv-cvote button { padding: 0; width: 26px; height: 26px; justify-content: center; border-radius: 50%; }
.pv-cvote-score {
    min-width: 12px; text-align: center;
    font-size: .76rem; font-weight: 600; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.pv-comment-like.is-on { color: #ff3b5c; }
.pv-comment-like.is-on svg { fill: currentColor; }
.pv-comment-dislike.is-on { color: #7d8ea8; }
.pv-comment-dislike.is-on svg { fill: currentColor; }
.pv-cvote.is-up .pv-cvote-score   { color: #ff3b5c; }
.pv-cvote.is-down .pv-cvote-score { color: #7d8ea8; }

/* Collapse handle — the ⊖ that folds a thread away. It is the first
   thing in the action row, not a gutter control: that is where the
   reference puts it, and it means a thread is folded from the same row
   you vote and reply in. Only comments with replies get one. */
.pv-collapse { width: 26px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }

/* Expand chip — the way back out of a folded thread, and the only thing
   a collapsed comment shows besides its name. */
.pv-expand {
    display: none;
    margin-left: 6px;
    width: 20px; height: 20px; line-height: 1;
    background: var(--pv-pill); border: 0; border-radius: 50%;
    color: var(--text-muted);
    font-family: inherit; font-size: .8rem; font-weight: 700;
    cursor: pointer;
}
.pv-comment.is-collapsed .pv-expand { display: inline-flex; align-items: center; justify-content: center; }
.pv-comment.is-collapsed .pv-comment-flair,
.pv-comment.is-collapsed .pv-comment-actions,
.pv-comment.is-collapsed .pv-comment-sticker,
.pv-comment.is-collapsed .pv-comment-body p { display: none; }

/* Flair sits on its own line under the name, not trailing off it. */
.pv-comment-flair { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 0; }

/* Per-comment ⋯ menu. */
.pv-cmenu-wrap { position: relative; display: inline-flex; }
.pv-cmenu-btn {
    width: 28px; padding: 0 !important; justify-content: center; border-radius: 50% !important;
}
.pv-cmenu {
    position: absolute; top: 30px; right: 0; z-index: 25;
    min-width: 140px; padding: 5px;
    background: #161619;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: 0 26px 60px -18px rgba(0,0,0,.88);
    display: flex; flex-direction: column;
}
.pv-cmenu[hidden] { display: none; }
[data-theme="light"] .pv-cmenu { background: #fff; border-color: rgba(43,21,87,.16); box-shadow: 0 20px 46px -18px rgba(43,21,87,.3); }
.pv-cmenu-item {
    height: auto !important;
    padding: 8px 11px !important;
    border-radius: 8px !important;
    justify-content: flex-start;
    font-size: .82rem !important; font-weight: 500 !important;
    text-align: left;
}
.pv-cmenu-danger { color: #ff8f9e !important; }

/* The composer is one tall rounded field — the reference's "join the
   conversation" box, which is a prompt to write rather than an input
   crammed under a heading. */
.pv-comments-input { min-height: 46px; border-radius: 24px; padding: 5px 5px 5px 16px; align-items: center; }
.pv-comments-input textarea { padding: 11px 0; font-size: .9rem; }
.pv-comments-input textarea::placeholder { color: var(--text-muted); }

/* The header search bar's colour, to the digit (.nav-searchbar) — the
   same translucent near-black and the same white hairline, so the two
   fields on the page read as the same control. The radius already
   matched at 12px. Focus brightens the edge the way the search bar's
   does, rather than turning it violet. */
.pv-comments-input {
    display: flex; gap: 8px; align-items: flex-end;
    background: rgba(13, 9, 24, .46);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    padding: 6px 6px 6px 12px;
    transition: background .18s ease-out, border-color .18s ease-out;
}
.pv-comments-input:focus-within {
    background: rgba(13, 9, 24, .58);
    border-color: rgba(255, 255, 255, .2);
}
/* Light mode mirrors the search bar too: the field stays the deep violet
   panel on the pale ground instead of turning into a white box. */
[data-theme="light"] .pv-comments-input {
    background: #341961;
    border-color: rgba(255, 255, 255, .10);
}
[data-theme="light"] .pv-comments-input:focus-within {
    background: #3d1e73;
    border-color: rgba(255, 255, 255, .2);
}
.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;
}
/* Round to match the field, and it only appears once there is something
   to send — the reference's box is empty until you type in it, and a
   permanent violet button made this read as a form rather than a
   prompt. .has-text is set by post-viewer.js as you type. */
.pv-comments-send {
    order: 3;
    width: 34px; height: 34px; flex: none;
    display: none; place-items: center;
    background: #ddb1f9;
    color: #000;
    border: 0; border-radius: 50%;
    cursor: pointer;
    transition: transform .12s, filter .15s;
}
.pv-comments-input.has-text .pv-comments-send { display: grid; }
.pv-comments-send:hover { transform: scale(1.06); filter: brightness(1.08); }
.pv-comments-send:disabled { opacity: .45; cursor: not-allowed; }
/* Signed out, this stands in for the composer — so it takes the
   composer's shape rather than floating as centred grey text where the
   reference has a full-width box. */
.pv-comments-login {
    /* gap, because flex makes the link and the text two items and eats
       the whitespace between them — it read as "Log into comment." */
    display: flex; align-items: center; gap: 4px;
    min-height: 46px; margin: 0;
    padding: 0 16px;
    border-radius: 24px;
    background: rgba(13, 9, 24, .46);
    border: 1px solid rgba(255, 255, 255, .11);
    color: var(--text-muted); font-size: .9rem;
}
[data-theme="light"] .pv-comments-login {
    background: #341961; border-color: rgba(255, 255, 255, .10); color: #cdc2e6;
}
.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 ---------- */
/* No rule here either — the gap above the pills is the separation. */
.pv-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin: 34px 0 8px;
    padding-top: 20px;
}
.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;
}
/* Same construction as .blurfill, at this feed's own lighter settings:
   the picture is handed over as --bf-img and blurred by a painted layer
   rather than sitting on the frame as a cover background under a
   backdrop-filter. A frame that paints the sharp picture itself bleeds a
   sliver of it past the rounded clip as a bright hairline on the
   corners, and a backdrop-filtered layer can't cover that sliver because
   its own clip is antialiased a hair narrower. */
.pf-feed-media-img {
    background: #0a0616;
}
.pf-feed-media-img::before {
    content: ""; position: absolute; inset: -48px;
    background-image: var(--bf-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(24px);
    pointer-events: none;
}
/* The wash is its own layer — folded into ::before it would be blurred
   along with the picture. */
.pf-feed-media-img::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,.35);
    pointer-events: none;
}
.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; }

/* ============================================================
   OtakuRun: "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;
}

/* OtakuRun 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; }

/* ============================================================
   My Watchlist v2 — own-section layout. The page no longer uses
   OtakuRun chrome; this hero gives it its own identity and
   funnels back into either streaming hub via two jump pills.
   ============================================================ */
.wl-page-v2 { padding: 22px 18px 80px; max-width: 1200px; }

.wl-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 22px 22px;
    margin: 6px 0 22px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 60% 80% at 12% 30%, rgba(199,155,255,.22), transparent 70%),
        radial-gradient(ellipse 60% 80% at 88% 70%, rgba(168,85,247,.20), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 36px rgba(0,0,0,.35);
    overflow: hidden;
    isolation: isolate;
}
.wl-hero::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 20%, transparent 80%);
            mask-image: radial-gradient(ellipse 80% 70% at center, black 20%, transparent 80%);
    opacity: .55;
    z-index: 0;
}
.wl-hero-text { position: relative; z-index: 1; min-width: 0; flex: 1 1 280px; }
.wl-hero-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    font-size: .64rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: #fde68a;
    margin-bottom: 10px;
}
.wl-hero-pill::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245,158,11,.7);
}
.wl-hero-title {
    margin: 0 0 6px;
    font-family: "Comfortaa", "Quicksand", "Inter", system-ui, sans-serif;
    font-size: clamp(1.55rem, 3.4vw, 2.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    background: linear-gradient(110deg, #c79bff 0%, #ddb1f9 32%, #ec4899 70%, #a855f7 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.wl-hero-sub {
    margin: 0;
    color: rgba(255,255,255,.7);
    font-size: .92rem;
    line-height: 1.5;
    max-width: 48ch;
}

/* ===== Personal "My Space" per watching area — stat chips + continue rail.
   --ms-acc is the section accent (lavender for anime; movies/hentami override). ===== */
.wl-page-v2 { --ms-acc: 199,155,255; }
.wl-page-v2[data-wl-mode="movie"]   { --ms-acc: 236,72,153; }
.wl-page-v2[data-wl-mode="hanime"]  { --ms-acc: 244,114,182; }

.ms-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ms-stat {
    display: flex; flex-direction: column; align-items: center;
    min-width: 66px; padding: 9px 15px;
    border-radius: 13px;
    background: linear-gradient(160deg, rgba(var(--ms-acc),.10), rgba(255,255,255,.012));
    border: 1px solid rgba(var(--ms-acc),.20);
}
.ms-stat-n { font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1; }
.ms-stat-l { margin-top: 5px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

.ms-continue { margin: 0 0 26px; }
.ms-continue-h { margin: 0 0 12px 2px; font-size: 1.05rem; font-weight: 700; color: var(--text-heading); letter-spacing: -.01em; }
.ms-rail { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ms-rail::-webkit-scrollbar { height: 6px; }
.ms-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.ms-rail-card { flex: 0 0 150px; width: 150px; scroll-snap-align: start; text-decoration: none; color: inherit; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.ms-rail-card:hover { transform: translateY(-4px); }
.ms-rail-cover {
    position: relative; aspect-ratio: 2/3; border-radius: 14px; overflow: hidden;
    background: #15131d center/cover no-repeat;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 24px rgba(0,0,0,.4);
    transition: border-color .2s, box-shadow .2s;
}
.ms-rail-card:hover .ms-rail-cover { border-color: rgba(var(--ms-acc),.5); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 6px 18px rgba(var(--ms-acc),.28); }
.ms-rail-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.55); }
.ms-rail-prog span { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--ms-acc)), rgba(var(--ms-acc),.6)); }
.ms-rail-title { margin-top: 8px; font-size: .82rem; font-weight: 600; color: var(--text-primary); line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-rail-ep { margin-top: 2px; font-size: .72rem; color: var(--text-faint); }

/* Two jump pills: OtakuRun (orange) and MovieVault (pink/violet).
   Each links directly to the corresponding hub so users can keep
   adding to their list without a detour. */
.wl-hero-jumps {
    position: relative; z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wl-jump {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 14px 9px 10px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(6px);
    transition: transform .2s, box-shadow .25s, border-color .2s, background .2s;
    min-width: 200px;
}
.wl-jump:hover { transform: translateY(-2px); }
.wl-jump-ico {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
}
.wl-jump-ico img { width: 100%; height: 100%; display: block; object-fit: cover; }
.wl-jump-ico svg { width: 22px; height: 22px; }
.wl-jump-text { display: flex; flex-direction: column; line-height: 1.15; }
.wl-jump-text strong { font-size: .92rem; font-weight: 700; }
.wl-jump-text small  { font-size: .72rem; color: rgba(255,255,255,.6); }
.wl-jump-arrow {
    width: 16px; height: 16px;
    margin-left: 4px;
    opacity: .7;
    transition: transform .2s, opacity .2s;
}
.wl-jump:hover .wl-jump-arrow { transform: translateX(3px); opacity: 1; }

.wl-jump-oh {
    border-color: rgba(199,155,255,.32);
    background: linear-gradient(135deg, rgba(199,155,255,.14), rgba(221,177,249,.06));
    box-shadow: 0 8px 20px rgba(221,177,249,.18);
}
.wl-jump-oh:hover {
    border-color: rgba(199,155,255,.55);
    box-shadow: 0 14px 28px rgba(221,177,249,.30);
}
.wl-jump-oh .wl-jump-ico { background: linear-gradient(135deg, #c79bff, #ddb1f9); }
.wl-jump-oh .wl-jump-ico img { object-fit: contain; padding: 8px; box-sizing: border-box; }

.wl-jump-mv {
    border-color: rgba(168,85,247,.32);
    background: linear-gradient(135deg, rgba(236,72,153,.14), rgba(124,58,237,.06));
    box-shadow: 0 8px 20px rgba(124,58,237,.18);
}
.wl-jump-mv:hover {
    border-color: rgba(168,85,247,.55);
    box-shadow: 0 14px 28px rgba(124,58,237,.30);
}
.wl-jump-mv .wl-jump-ico {
    background: linear-gradient(135deg, #ec4899, #7c3aed);
    color: #fff;
}

@media (max-width: 720px) {
    .wl-hero { padding: 18px 16px; }
    .wl-hero-jumps { width: 100%; }
    .wl-jump { flex: 1 1 calc(50% - 5px); min-width: 0; }
}
@media (max-width: 460px) {
    .wl-jump { flex: 1 1 100%; }
}
.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: #c79bff;
}
.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;
}
/* My List mini tabs — switch the grid source (Watchlist / CyberList /
   History) without touching the rest of the page. */
.wl-mini-tabs {
    display: flex; gap: 10px;
    margin: 0 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.wl-mini {
    background: transparent; border: 0;
    color: rgba(255,255,255,.55);
    padding: 9px 4px; margin-bottom: -1px;
    font: 700 .92rem inherit;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.wl-mini:hover { color: rgba(255,255,255,.85); }
.wl-mini.is-active { color: #fff; border-bottom-color: #c79bff; }

.wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
/* v2 layout bumps card size + interior breathing room so the page
   feels less cramped and the meta block has room for the new
   labeled controls. */
.wl-page-v2 .wl-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
.wl-page-v2 .wl-card { font-size: .98rem; }
.wl-page-v2 .wl-card .seasonal-cover { aspect-ratio: 2 / 3; }
.wl-page-v2 .wl-card .seasonal-meta  { padding: 12px 12px 14px; }
.wl-page-v2 .wl-card .seasonal-title { font-size: 1rem; line-height: 1.25; }
.wl-page-v2 .wl-card .wl-card-progress { font-size: .82rem; margin-top: 6px; }
.wl-page-v2 .wl-card .wl-card-progress .wl-step { width: 28px; height: 28px; font-size: .9rem; }
.wl-page-v2 .wl-card .wl-card-actions { margin-top: 10px; }
.wl-page-v2 .wl-card .wl-card-actions select,
.wl-page-v2 .wl-card .wl-card-actions button { padding: 8px 10px; font-size: .78rem; }
.wl-page-v2 .wl-card .wl-kind-badge { font-size: .7rem; padding: 3px 9px; }
.wl-page-v2 .wl-card .wl-play { font-size: .86rem; }
.wl-page-v2 .wl-card .wl-movie-flag { font-size: .82rem; }
@media (max-width: 520px) {
    .wl-page-v2 .wl-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 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: #c79bff; 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(221,177,249,.18); border-color: rgba(199,155,255,.4); }
.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; }

/* Thin episode progress bar under the +/- counter (anime cards). */
.wl-bar {
    height: 4px; margin-top: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    overflow: hidden;
}
.wl-bar > span {
    display: block; height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ddb1f9, #c79bff);
    transition: width .35s ease;
}

.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;
}
/* Icon action buttons: a Like heart + a Remove trash. Remove is
   intentionally non-coloured (neutral grey); the heart fills brand
   lavender when liked. */
.wl-card-actions .wl-like,
.wl-card-actions .wl-remove {
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.6);
}
.wl-card-actions .wl-like svg,
.wl-card-actions .wl-remove svg { width: 16px; height: 16px; display: block; }
.wl-card-actions .wl-remove:hover {
    color: #fff;
    border-color: rgba(255,255,255,.28);
    background-color: rgba(255,255,255,.08);
}
.wl-card-actions .wl-like:hover { color: #c79bff; }
.wl-card-actions .wl-like.is-liked { color: #c79bff; border-color: rgba(199,155,255,.5); }
.wl-card-actions .wl-like.is-liked svg { fill: #c79bff; }
/* Custom chevron + lavender hover/focus so the status dropdown stops
   looking like a bare native <select>. */
.wl-card-actions select {
    appearance: none; -webkit-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23c79bff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.wl-card-actions select:hover,
.wl-card-actions button:not(.wl-remove):hover {
    border-color: rgba(199,155,255,.45);
    background-color: rgba(221,177,249,.12);
}
.wl-card-actions select:focus-visible,
.wl-card-actions button:focus-visible {
    border-color: rgba(199,155,255,.6);
}

/* ---------- Two-axis filter block (Type + Status) ----------
   Both rows share a left-side label so it's obvious at a glance
   what each chip strip is filtering. On the v2 page they sit in
   a single panel; outside v2 the bare rows still work. */
.wl-filter-block {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
    margin: 0 0 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
}
.wl-filter-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.wl-filter-label {
    flex: 0 0 auto;
    min-width: 56px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.wl-filter-block .wl-source-row,
.wl-filter-block .wl-tabs {
    margin: 0;
    border-bottom: 0;
    flex: 1 1 auto;
}

/* ---------- Source filter chips (Anime / Movies / Shows / All) ---------- */
.wl-source-row {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.wl-source {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.65);
    padding: 6px 12px;
    border-radius: 999px;
    font: 600 .78rem inherit;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s, background .15s, border-color .15s;
}
/* Library switcher reuses the source-chip look but the chips are links
   to the two separate watchlist pages, not in-page filters. */
.wl-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-source:hover { background: rgba(255,255,255,.08); color: #fff; }
.wl-source.is-active {
    background: rgba(221, 177, 249, .18);
    border-color: rgba(199, 155, 255, .55);
    color: #fff;
}
.wl-source .wl-source-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;
}

/* ---------- Hub badge: top-right corner sigil that names the
   destination this card lives under (OtakuRun for anime, MovieVault
   for movies/TV). Clickable — jumps to that hub's catalog. ---------- */
.wl-card { position: relative; }
.wl-hub-badge {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px 4px 5px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font: 800 .68rem inherit;
    letter-spacing: .01em;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 6px 16px rgba(0,0,0,.45);
    transition: transform .18s ease, box-shadow .2s, border-color .2s, filter .2s;
}
.wl-hub-badge:hover { transform: translateY(-1px) scale(1.03); }
.wl-hub-badge img,
.wl-hub-badge .wl-hub-ico {
    width: 18px; height: 18px;
    border-radius: 6px;
    display: block;
    flex: 0 0 auto;
}
.wl-hub-badge img { object-fit: cover; }
.wl-hub-name { white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* Anime hub badge now carries the white CCA mark — contain it (don't crop
   the logo) inside the lavender pill, like the Movies badge's white glyph. */
.wl-hub-oh img { object-fit: contain; padding: 1px; box-sizing: border-box; }

/* OtakuRun — lavender palette. */
.wl-hub-oh {
    background: linear-gradient(135deg, rgba(199,155,255,.92), rgba(221,177,249,.92));
    border-color: rgba(199,155,255,.55);
    box-shadow: 0 6px 16px rgba(221,177,249,.45);
}
.wl-hub-oh:hover {
    border-color: rgba(199,155,255,.85);
    box-shadow: 0 10px 22px rgba(221,177,249,.6);
}

/* MovieVault — pink → violet palette. */
.wl-hub-mv {
    background: linear-gradient(135deg, rgba(236,72,153,.92), rgba(124,58,237,.92));
    border-color: rgba(168,85,247,.55);
    box-shadow: 0 6px 16px rgba(124,58,237,.45);
}
.wl-hub-mv:hover {
    border-color: rgba(245,208,254,.85);
    box-shadow: 0 10px 22px rgba(124,58,237,.6);
}
.wl-hub-mv .wl-hub-ico {
    background: rgba(255,255,255,.16);
    padding: 2px;
}

/* v2 cards have more room — slightly larger badge so it reads at the
   bigger cover size. */
.wl-page-v2 .wl-hub-badge {
    top: 10px; right: 10px;
    padding: 5px 11px 5px 6px;
    font-size: .72rem;
}
.wl-page-v2 .wl-hub-badge img,
.wl-page-v2 .wl-hub-badge .wl-hub-ico { width: 20px; height: 20px; }

/* Hide the badge label on the smallest cards so it doesn't wrap; the
   logo alone still communicates the hub. */
@media (max-width: 460px) {
    .wl-hub-name { display: none; }
    .wl-hub-badge { padding: 5px; }
}

/* ---------- Movie / TV card variants ---------- */
.wl-card .seasonal-cover { position: relative; }
.wl-kind-badge {
    position: absolute; top: 6px; left: 6px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font: 700 .62rem inherit;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    pointer-events: none;
}
.seasonal-title a {
    color: inherit; text-decoration: none;
}
.seasonal-title a:hover { color: #c79bff; }

.wl-card-progress-flat {
    display: flex; gap: 6px; align-items: center; justify-content: space-between;
}
.wl-step-wide {
    width: auto !important;
    height: auto !important;
    padding: 4px 10px;
    font-size: .72rem !important;
}
.wl-movie-flag {
    color: #8fefbe;
    font-weight: 700;
    font-size: .72rem;
}
.wl-play {
    color: #c79bff;
    text-decoration: none;
    font-weight: 700;
    font-size: .76rem;
}
.wl-play:hover { text-decoration: underline; }

.wl-card-se { gap: 8px; }
.wl-card-se label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .68rem; color: rgba(255,255,255,.65);
}
.wl-card-se input[type="number"] {
    width: 44px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    color: #fff;
    padding: 3px 5px;
    font: 600 .75rem inherit;
    text-align: center;
    -moz-appearance: textfield;
}
.wl-card-se input[type="number"]::-webkit-outer-spin-button,
.wl-card-se input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* ============================================================
   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: 58px;            /* 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: #ddb1f9;            /* orange — current ep + active toggle */
    --w-accent-soft: rgba(221,177,249,.18);
    --w-panel: #000;                /* episodes panel background */
    --w-panel-border: rgba(255,255,255,.06);
    --w-row-bg: #000;               /* sub-rows inside the panel */
}

.watch-page { background: #000; }

/* 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);
}

/* Admin floating shortcut — bottom-left of the player, mirrors the
   Skip Intro pill on the right so the two are visually paired. */
.w-skipset-fab {
    position: absolute;
    left: 14px; bottom: 70px;
    z-index: 6;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    font-size: .78rem; font-weight: 600;
    color: #fff;
    background: rgba(124,58,237,.78);
    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;
}
.w-skipset-fab:hover {
    background: rgba(124,58,237,.95);
    transform: translateY(-1px);
}

/* Admin "Set Skip Times" modal — fills the gap when AniSkip has no
   data. Compact dialog so admins can mark OP/ED windows in-place
   without leaving the watch page. */
.w-skipset-mask {
    position: fixed; inset: 0;
    z-index: 70;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
}
.w-skipset-mask[hidden] { display: none; }
.w-skipset {
    position: fixed;
    z-index: 71;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: min(440px, calc(100vw - 32px));
    background: #000;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 18px 20px;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.w-skipset[hidden] { display: none; }
.w-skipset-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 4px;
}
.w-skipset-head h3 { font-size: 1rem; margin: 0; flex: 1; }
.w-skipset-x {
    background: transparent; border: none; color: #999;
    font-size: 1.5rem; cursor: pointer; padding: 0 6px;
}
.w-skipset-x:hover { color: #fff; }
.w-skipset-hint {
    font-size: .78rem; color: #8a8a99; margin: 0 0 14px;
}
.w-skipset-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 12px;
}
.w-skipset-row label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: .76rem; color: #b9bac5;
}
.w-skipset-row label span {
    display: flex; gap: 6px; align-items: stretch;
}
.w-skipset-row input {
    flex: 1; min-width: 0;
    padding: 7px 9px;
    font-size: .9rem;
    background: #000;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    color: #fff;
}
.w-skipset-now {
    padding: 0 9px;
    font-size: .72rem; font-weight: 600;
    background: rgba(124,58,237,.15);
    border: 1px solid rgba(124,58,237,.35);
    color: #c4a8ff;
    border-radius: 6px;
    cursor: pointer;
}
.w-skipset-now:hover { background: rgba(221,177,249,.25); }
.w-skipset-foot {
    display: flex; gap: 8px; align-items: center;
    margin-top: 8px;
}
.w-skipset-foot button {
    padding: 8px 14px;
    font-size: .82rem; font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.10);
    background: #000; color: #fff;
}
.w-skipset-clear { color: #ff8b8b !important; border-color: rgba(255,80,80,.25) !important; }
.w-skipset-cancel:hover { background: #25262e; }
.w-skipset-save {
    background: var(--w-accent, #7c3aed) !important;
    border-color: var(--w-accent, #7c3aed) !important;
}
.w-skipset-save:hover { filter: brightness(1.1); }

/* Brand overlay — covers KAA's `kaa.mx` watermark in the top-right
   during the first few seconds of playback. Sized + positioned to
   cover the burnt-in pixels, with backdrop-blur so any KAA pixels
   that bleed past the edges blur into the page background. */
.w-brand-overlay {
    position: absolute;
    /* KAA's watermark sits roughly 9% from the right edge of the
       player and 1.5% down from the top (measured against the 16:9
       video frame, so it scales with the player). Percent-based
       positioning keeps the cover aligned at any size — fixed pixel
       offsets drift on resize / fullscreen. */
    top: 0.2%; right: 9%;
    z-index: 5;
    padding: 6px 12px;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(0, 0, 0, .92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    user-select: none;
    transition: opacity .35s ease;
}
.w-brand-overlay[hidden] { display: none; }

/* Skip Intro / Skip Outro pill — bottom-right inside the player */
.w-skip {
    position: absolute;
    right: 14px;
    bottom: 92px;
    /* Above the control layer (.w-vc, z-index 7) so it stays tappable — the
       bar's gradient box reaches up into this pill's area. */
    z-index: 8;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px;
    font-size: .82rem; font-weight: 600;
    color: #111;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(0,0,0,.08);
    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: #fff;
    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: 8px;
    height: 32px;
    padding: 0 12px;
    background: transparent;
    color: rgba(255,255,255,.7);
    border: none;
    border-radius: 8px;
    font-size: .78rem; font-weight: 500;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s ease, background .12s ease;
}
.w-act:hover { background: rgba(255,255,255,.07); color: #fff; }
.w-act:hover svg { opacity: 1; }
.w-act:disabled { opacity: .35; cursor: not-allowed; }
.w-act:disabled:hover { background: transparent; }
.w-act svg { color: inherit; opacity: .85; flex: 0 0 auto; }
.w-act-on { color: var(--w-accent); }
.w-act-on:hover { color: var(--w-accent); background: var(--w-accent-soft); }
.w-act[data-act="dislike"].w-act-on { color: #f87171; }
.w-act[data-act="dislike"].w-act-on:hover { color: #f87171; background: rgba(248,113,113,.12); }
.w-act-servers { display: none; }   /* server picker not surfaced in toolbar yet */

/* Locked w-act — same shape, dimmed, padlock visible. The label text
   already carries the "· Lv N" suffix from the server render so the
   user can see the cost without hovering. Click handler in watch.js
   intercepts and toasts the hint instead of running the action. */
.w-act-locked { opacity: .55; cursor: help; }
.w-act-locked:hover { background: transparent; color: var(--text-faint, #9aa0a6); }
.w-act .w-act-lock { display: none; margin-left: 4px; }
.w-act-locked .w-act-lock { display: inline-flex; }

/* ---- 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; }
/* The toolbar Sub/Dub toggle (above the player) stays hidden — since
   2026-05-23 the canonical Sub/Dub control is the in-player chrome
   toggle (.w-vc-audio, next to the gear icon). Keeping both would be a
   redundant second toggle. Markup + buildAudioMenu wiring stay intact;
   remove this rule to bring the toolbar one back. */
#wAudioToggle { display: none !important; }
.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: #000;
    border: 1px solid var(--w-panel-border);
    border-radius: 14px;
    padding: 2px 12px 10px;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 140px);
}
.w-eps-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 2px;
}
.w-eps-title {
    margin: 0;
    margin-right: auto;
    font-size: 1rem; font-weight: 700; letter-spacing: .01em;
    color: var(--text-primary, #fff);
}
.w-eps-find-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 96px;
}
.w-eps-find-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
    opacity: .9;
}
.w-eps-find {
    width: 100%;
    height: 28px;
    padding: 0 8px 0 26px;
    background: var(--w-row-bg);
    border: 1px solid var(--w-panel-border);
    border-radius: 6px;
    color: var(--text-primary, #fff);
    font-size: .78rem;
    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 2px;
}

/* Season selector — sits above the range chooser for multi-season
   franchises. Mirrors the range chips but with a leading label so the
   row reads as "Seasons: S1 S2 S3 …". */
.w-eps-seasons {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 10px 2px 4px;
}
.w-eps-seasons-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    color: var(--text-faint); text-transform: uppercase;
    margin-right: 4px;
}
.w-season-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #000;
    color: var(--text-faint);
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .12s;
    -webkit-tap-highlight-color: transparent;
}
.w-season-btn:hover:not(.active) { color: var(--text-primary, #fff); border-color: var(--link-color); }
.w-season-btn:active { transform: scale(.95); }
.w-season-btn.active {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #fff;
}

/* 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 2px;
    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 rgba(255,255,255,.08);
    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 { height: 32px; padding: 0 9px; 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: 80px; 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: #ddb1f9;
    box-shadow: 0 0 0 0 rgba(221,177,249,.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(221,177,249,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(221,177,249,0); }
    100% { box-shadow: 0 0 0 0 rgba(221,177,249,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(221,177,249,.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: #ddb1f9;
    text-shadow: 0 0 18px rgba(221,177,249,.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(221,177,249,.16);
    color: #d9bcff;
    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, #000 0%, rgba(0,0,0,.92) 18%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.05) 80%, transparent 100%),
        linear-gradient(to right, rgba(0,0,0,.85) 0%, rgba(0,0,0,.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: #ddb1f9; }      /* 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: #ddb1f9;
    color: #000;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ex-hero-watch-btn:hover {
    background: #e7c6fb;
    transform: translateY(-2px);
    box-shadow: none;
}
.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(221,177,249,.5);
    color: #ddb1f9;
}
.ex-hero-bookmark[aria-pressed="true"] {
    background: rgba(221,177,249,.15);
    border-color: #ddb1f9;
    color: #ddb1f9;
}
.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: #ddb1f9;
}
.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; }
.ex-share-snap     { background: #FFFC00; color: #111; }
.ex-share-ig       { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); color: #fff; }
.ex-share-tt       { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.18); }

/* 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: #ddb1f9;
    box-shadow: 0 0 0 0 rgba(221,177,249,.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(221,177,249,.15);
    color: #ddb1f9;
    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: #ddb1f9;
    text-shadow: 0 0 14px rgba(221,177,249,.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(221,177,249,.08) 0%, transparent 60%),
        linear-gradient(to top, #000 0%, rgba(0,0,0,.94) 22%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.05) 82%, transparent 100%),
        linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 38%, transparent 65%),
        linear-gradient(to bottom, rgba(0,0,0,.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, #c79bff 0%, #ddb1f9 50%, #a855f7 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(221,177,249,.32), 0 0 0 0 rgba(221,177,249,.45); }
    50%      { box-shadow: 0 8px 26px rgba(221,177,249,.42), 0 0 0 8px rgba(221,177,249,0); }
}
.ex-hero-watch-btn {
    background: #ddb1f9;
    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, #d9bcff 0%, #c79bff 50%, #ddb1f9 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, #ddb1f9 0%, #c79bff 100%);
    box-shadow: 0 0 12px rgba(221,177,249,.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(221,177,249,.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, #c79bff 0%, #ddb1f9 60%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ddb1f9;
    text-shadow: 0 0 18px rgba(221,177,249,.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); }
/* When .ex-share-btn is rendered as <button> (Instagram, TikTok) reset
   the user-agent border/cursor/font so it visually matches the anchors. */
button.ex-share-btn { border: 0; cursor: pointer; font: inherit; font-family: inherit; }

.ex-share-discord  { background: linear-gradient(135deg, #6b73f5 0%, #5865f2 100%); }
.ex-share-msg      { background: linear-gradient(135deg, #34d97a 0%, #25d366 100%); }
.ex-share-snap     { background: linear-gradient(135deg, #fffc55 0%, #fffc00 100%); color: #1f1f1f; }
.ex-share-snap:hover { color: #000; }
.ex-share-ig       {
    background: linear-gradient(135deg, #515bd4 0%, #8134af 25%, #dd2a7b 55%, #feda77 100%);
}
.ex-share-tt       {
    background: linear-gradient(135deg, #25f4ee 0%, #161823 50%, #fe2c55 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(221,177,249,.18);
}
.ex-share-title svg { filter: drop-shadow(0 0 6px rgba(221,177,249,.4)); }

/* Hero progress fill: gradient instead of flat. */
.ex-hero-progress-fill {
    background: linear-gradient(90deg, #ddb1f9 0%, #c79bff 50%, #e9d8ff 100%);
    box-shadow: 0 0 10px rgba(221,177,249,.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 OtakuRun orange identity. */
body.explore-page .ex-section-pulse {
    background: #ddb1f9;
    box-shadow: 0 0 0 0 rgba(221,177,249,.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(221,177,249,.06) 0%, transparent 55%),
        linear-gradient(to top, #000 0%, rgba(0,0,0,.88) 18%, rgba(0,0,0,.35) 45%, transparent 75%),
        linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(0,0,0,.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;
}

/* Title is the official Fanart.tv HD logo PNG — show the artwork
   exactly as the production committee distributed it (real typeface,
   colors, layout). Drop the H1 text styling so the image sits flush. */
.ex-hero-title.ex-hero-title-logo {
    padding: 0;
    line-height: 1;
    text-shadow: none;
    color: transparent;
    -webkit-line-clamp: initial;
    overflow: visible;
    display: block;
    max-width: none;
}
.ex-hero-title-logo-img {
    display: block;
    /* Wide wordmarks (long titles like Slime / Witch Hat Atelier) used to hit
       the max-width first and render short/tiny — give them far more width so
       they grow toward the same height as compact logos. */
    max-width: min(500px, 100%);
    max-height: 116px;
    height: auto;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
@media (max-width: 720px) {
    .ex-hero-title-logo-img { max-width: 90%; max-height: 92px; }
}
.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(221,177,249,.28);
}
.ex-hero-watch-btn:hover {
    box-shadow: 0 10px 24px rgba(221,177,249,.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, #c79bff 0%, #ddb1f9 60%, #a855f7 100%);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    -webkit-text-fill-color: #fff;
    box-shadow: 0 2px 8px rgba(221,177,249,.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; }
}

/* ============================================================
   OTAKUHUB CONTROL BAR — sticky bar below the page hero on
   anime-flow pages (explore, anime, watch, anime-schedule,
   my-anime). Hosts the search, filter, and Parties/Shuffle/
   Sub-Dub aux cluster — previously rendered in the navbar.
   Mirrors the movies/tv `.mvx-bar` layout pattern.
   ============================================================ */
.otakurun-bar {
    position: relative;
    z-index: 30;
    margin: -34px auto 22px;
    max-width: 1280px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
/* Pages without a hero — sit at the top of the content area instead
   of pulling up into where a hero would have been. */
.otakurun-bar.otakurun-bar-flat {
    margin: 20px auto 22px;
}
@media (max-width: 760px) {
    .otakurun-bar          { margin: -20px auto 16px; padding: 0 14px; gap: 10px; }
    .otakurun-bar.otakurun-bar-flat { margin: 14px auto 16px; }
}

/* Search input + aux cluster — reset the navbar-specific sizing so they
   lay out cleanly inside the wider sticky bar. */
.otakurun-bar .nav-search {
    flex: 1 1 320px;
    max-width: 620px;
    margin: 0;
}
.otakurun-bar .nav-aux {
    margin-right: 0;
    flex-wrap: wrap;
}
/* Anchor the results dropdown to the search bar itself (rather than
   the fixed-position navbar). Sits flush under the search pill. */
.otakurun-bar .nav-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 24px;
    transform: none;
    width: min(560px, calc(100% - 48px));
    z-index: 31;
}
@media (max-width: 760px) {
    .otakurun-bar .nav-search-results {
        left: 14px;
        width: calc(100% - 28px);
    }
}

/* ============================================================
   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: 0;
    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 {
    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);
}

/* ============================================================
   UNIFIED SEARCH BARS — every content search bar is the SAME small
   version of the OtakuRun search pill: a compact 40px translucent
   pill (magnifier + input), no border, no glow. !important so it
   also overrides the per-page inline styles (hanime/help-center…).
   Covers OtakuRun(.nav-search), Lessons(.lz-hub-search),
   Boards(.rb-search), Help Center(.hc-search), Hanime(.hnm-search),
   Messages(.msg-search-wrap), Watch2Gether(.w2g-invite-search-wrap).
   ============================================================ */
.nav-search,
.lz-hub-search,
.rb-search,
.hc-search,
.hnm-search,
.msg-search-wrap,
.w2g-invite-search-wrap,
.cca-search-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px 0 13px !important;
    background: rgba(255,255,255,.06) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
}
/* global site-search overlay: the pill sits inside a card, give it breathing room */
.cca-search-bar { margin: 12px 12px 4px !important; padding-right: 6px !important; }
.nav-search:hover,            .nav-search:focus-within,
.lz-hub-search:hover,         .lz-hub-search:focus-within,
.rb-search:hover,             .rb-search:focus-within,
.hc-search:hover,             .hc-search:focus-within,
.hnm-search:hover,            .hnm-search:focus-within,
.msg-search-wrap:hover,       .msg-search-wrap:focus-within,
.w2g-invite-search-wrap:hover,.w2g-invite-search-wrap:focus-within,
.cca-search-bar:hover,        .cca-search-bar:focus-within {
    background: rgba(255,255,255,.1) !important;
    box-shadow: none !important;
}
/* leading magnifier icon — same size + colour everywhere */
.nav-search > svg, .nav-search .nav-search-icon,
.lz-hub-search > svg,
.rb-search > svg,
.hc-search > svg,
.hnm-search > svg,
.msg-search-wrap > svg,
.w2g-invite-search-wrap > svg,
.cca-search-bar > svg {
    position: static !important;
    width: 15px !important; height: 15px !important;
    flex: 0 0 auto !important;
    transform: none !important;
    color: rgba(255,255,255,.6) !important;
}
/* the input itself — transparent, borderless, fills the pill */
.nav-search-input,
.lz-hub-search-input,
.rb-search-input,
.hc-search input,
.hnm-search input,
.msg-search-wrap .msg-search,
.w2g-invite-search-wrap .w2g-invite-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font: 500 .85rem/1 inherit !important;
    padding: 0 !important;
}
.nav-search-input::placeholder,
.lz-hub-search-input::placeholder,
.rb-search-input::placeholder,
.hc-search input::placeholder,
.hnm-search input::placeholder,
.msg-search-wrap .msg-search::placeholder,
.w2g-invite-search-wrap .w2g-invite-search::placeholder {
    color: rgba(255,255,255,.45) !important;
}
/* the borderless/no-glow input treatment also for the overlay/popover
   search fields (global + MovieVault + Hanime mobile popover). */
#ccaSearchInput,
.mvx-search-pop-field input,
.hnm-search-pop input {
    border: 0 !important; outline: none !important; box-shadow: none !important;
}
/* Plain filter inputs with no icon wrapper (english-vocab, admin, post-tag
   modal, kanvas brush, boards Pinterest finder). These can't be the full
   icon-pill, so give them the same translucent borderless rounded look —
   no border, no coloured focus glow — without forcing a fixed height, so
   the 22px kanvas micro-field and compact admin rows keep their size. */
.ev-search,
.adm-search,
.an-search input,
.pv-modal-search,
.ck-brush-search,
.rb-find-search input {
    background: rgba(255,255,255,.06) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff !important;
    transition: background .15s ease !important;
}
.ev-search:hover,            .ev-search:focus,
.adm-search:hover,           .adm-search:focus,
.an-search input:hover,      .an-search input:focus,
.pv-modal-search:hover,      .pv-modal-search:focus,
.ck-brush-search:hover,      .ck-brush-search:focus,
.rb-find-search input:hover, .rb-find-search input:focus {
    background: rgba(255,255,255,.1) !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.ev-search::placeholder,
.adm-search::placeholder,
.an-search input::placeholder,
.pv-modal-search::placeholder,
.ck-brush-search::placeholder,
.rb-find-search input::placeholder {
    color: rgba(255,255,255,.45) !important;
}
.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); }
/* Suppress the global :focus-visible outline (purple ring from the
   accessibility rule near line 22117). The pill container already
   shows an orange focus state via .nav-search:focus-within, so the
   inner input's own rim is redundant and visually noisy. */
.nav-search-input:focus,
.nav-search-input:focus-visible { outline: none !important; box-shadow: none; }
.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, #c79bff 0%, #ddb1f9 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(221,177,249,.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(221,177,249,.85);
    font-size: .72rem; font-weight: 600;
    cursor: pointer;
}
.nav-search-hist-clear:hover { color: #ddb1f9; }
.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; min-width: 0; }
    .nav-aux { display: none; }     /* the sidebar has these too */
    .nav-search-filter { display: none; }
    /* On OtakuRun specifically the navbar carries a second wordmark
       ("OtakuRun") + the full hud-profile (avatar + nickname + Lv/rank
       text). At <=640px those collapse the search pill until it falls
       off the right edge of the screen. Drop the wordmark + textual
       parts of hud-profile so the search has room to breathe — the
       OtakuRun identity is already implied by the visible search +
       sub/dub toggle inside the sidebar. */
    .navbar-otaku .otaku-brand { display: none; }
    .navbar-otaku .brand-mark-name { display: none; }
    .navbar-otaku .hud-profile .hud-ident { display: none; }
    .navbar-otaku .hud-currency .hud-currency-val { display: none; }
}
@media (max-width: 420px) {
    /* Ultra-narrow phones (≤420px): also drop the settings cog on
       OtakuRun so the search pill keeps a usable width. The cog still
       lives in the sidebar and on every other page. */
    .navbar-otaku .profile-settings-btn { 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: #d9bcff;
    border-color: rgba(221,177,249,.28);
    background: rgba(221,177,249,.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; }
/* Frosted-glass CTA: low-opacity white over a backdrop blur, with an
   orange-tinted border + outer halo so the button still reads as the
   primary action against the hero artwork. */
.ex-hero-watch-btn {
    padding: 14px 30px;
    font-size: .92rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px;
    color: #fff;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(221,177,249,.45);
    box-shadow:
        0 0 22px rgba(221,177,249,.30),
        0 8px 28px rgba(221,177,249,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
    animation: none;
}
.ex-hero-watch-btn:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(221,177,249,.72);
    box-shadow:
        0 0 30px rgba(221,177,249,.48),
        0 12px 36px rgba(221,177,249,.34),
        inset 0 1px 0 rgba(255,255,255,.24);
    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(221,177,249,.18);
    border-color: rgba(221,177,249,.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(221,177,249,.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(221,177,249,.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: 88vh;
    min-height: 680px;
    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: #000;
    filter: brightness(1.08) saturate(1.1) contrast(1.04);
    transform: translateZ(0);
    will-change: opacity;
    transition: opacity .55s ease;
    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;
    will-change: opacity;
    transition: opacity .55s ease;
    -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 (#000).

   Layers (CSS paints LAST first → list top is topmost):
     1. Right edge — 220px soft fade to #000 (long, gentle)
     2. Left  edge — 32px crisp fade to #000
     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,  #000 0%, transparent 32px),
        /* Top + bottom fade. */
        linear-gradient(to bottom, #000 0%, transparent 60px, transparent calc(100% - 180px), #000 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(10,10,20,.95) 0%,
            rgba(20,10,40,.72) 22%,
            rgba(10,6,20,.5)   40%,
            rgba(4,4,10,.22)   56%,
            transparent        74%);
}

/* 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: 50px;                     /* 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);
}

/* Hero logline — an AI-distilled ≤6-word essence of the whole series.
   Reads as a prestige tagline under the title; lavender to tie into the
   site palette. Fades in once renderHero sets it. */
.ex-hero-tagline {
    margin: -2px 0 14px;
    max-width: 520px;
    font-size: clamp(13px, 1.55vw, 17px);
    font-weight: 500;
    font-style: italic;
    letter-spacing: .01em;
    line-height: 1.3;
    color: #c79bff;
    text-shadow: 0 2px 14px rgba(0,0,0,.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .45s ease, transform .45s ease;
}
.ex-hero-tagline.is-in { opacity: 1; transform: none; }
.ex-hero-tagline[hidden] { display: none; }
@media (max-width: 640px) {
    .ex-hero-tagline { margin: 0 0 8px; -webkit-line-clamp: 1; }
}

/* ----- 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;
    position: relative;          /* anchor for the synopsis popover */
}

/* Primary: frosted-glass pill with an orange halo.
   Backdrop-blur lets the hero artwork show through; an orange-tinted
   border + outer glow keep it readable as the primary CTA. */
.ex-hero-watch-btn {
    height: 32px;
    padding: 0 14px;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
    background: #ddb1f9;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    transition: transform .18s ease, background .18s ease;
    animation: none;
}
.ex-hero-watch-btn svg { width: 14px; height: 14px; }
/* Higher-specificity guard so any stray earlier rule with .ex-hero-actions
   or body.explore-page prefix can't accidentally re-inflate the button. */
body .ex-hero-actions .ex-hero-watch-btn {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    align-self: center;
    flex: 0 0 auto;
}
.ex-hero-watch-btn:hover {
    transform: translateY(-1px);
    background: #ddb1f9;
    box-shadow: none;
}

/* Secondary CTA: frosted-glass pill, lavender-tinted, next to Watch Now.
   Links to the full anime detail page (full synopsis lives there). */
.ex-hero-details-btn {
    height: 32px;
    padding: 0 14px;
    align-self: center;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(199,155,255,.35);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ex-hero-details-btn svg { width: 14px; height: 14px; }
.ex-hero-details-btn:hover {
    transform: translateY(-1px);
    background: rgba(199,155,255,.16);
    border-color: rgba(199,155,255,.65);
}
.ex-hero-details-btn:active { transform: scale(.97); }
.ex-hero-details-btn[aria-expanded="true"] {
    background: rgba(199,155,255,.18);
    border-color: rgba(199,155,255,.7);
}

/* Synopsis popover — the show's blurb, revealed by the Details button
   and anchored just above it (a little caret points back down). */
.ex-hero-synopsis-pop {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    width: min(440px, 78vw);
    z-index: 6;
    background: rgba(10,10,18,.94);
    border: 1px solid rgba(199,155,255,.28);
    border-radius: 14px;
    padding: 14px 16px 13px;
    box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(6px);
    transform-origin: bottom left;
    transition: opacity .2s ease, transform .2s ease;
}
.ex-hero-synopsis-pop.is-open { opacity: 1; transform: none; }
.ex-hero-synopsis-pop[hidden] { display: none; }
.ex-hero-synopsis-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 30px;
    border: 7px solid transparent;
    border-top-color: rgba(10,10,18,.94);
}
.ex-hero-synopsis-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.58;
    color: rgba(255,255,255,.86);
    max-height: 200px;
    overflow-y: auto;
}
.ex-hero-synopsis-more {
    display: inline-block;
    margin-top: 11px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #c79bff;
    text-decoration: none;
}
.ex-hero-synopsis-more:hover { text-decoration: underline; }

/* 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(221,177,249,.15);
    border-color: rgba(221,177,249,.55);
    color: #ddb1f9;
}
.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(221,177,249,.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(221,177,249,.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: 54px; 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: 36px; 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: 32px; padding: 0 14px; font-size: 12px; }
    .ex-hero-bookmark { width: 32px; height: 32px; }
    .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%, #c79bff 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(199,155,255,.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(199,155,255,.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%, #dcc8ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 14px rgba(199,155,255,.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(18,12,6,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(221,177,249,.18);
    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;
    animation: w2g-msg-in .55s cubic-bezier(.22,.61,.36,1) both;
    transform-origin: bottom left;
    will-change: transform, opacity;
}
.w2g-msg-system {
    animation: w2g-msg-sys-in .5s cubic-bezier(.22,.61,.36,1) both;
}
.w2g-msg .w2g-msg-av {
    animation: w2g-msg-av-in .6s cubic-bezier(.22,.61,.36,1) .05s both;
    will-change: transform, opacity;
}
.w2g-msg .w2g-msg-text {
    animation: w2g-msg-text-in .55s cubic-bezier(.22,.61,.36,1) .1s both;
    will-change: transform, opacity;
}
@keyframes w2g-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes w2g-msg-av-in {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1);   }
}
@keyframes w2g-msg-text-in {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0);    }
}
@keyframes w2g-msg-sys-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .w2g-msg, .w2g-msg-system,
    .w2g-msg .w2g-msg-av, .w2g-msg .w2g-msg-text { animation: none; }
}
.w2g-msg-av {
    width: 28px; height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #c79bff, #ddb1f9);
}
.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(221,177,249,.55);
    background: rgba(255,255,255,.08);
}
.w2g-chat-send {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #c79bff, #ddb1f9);
    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, #c79bff, #ddb1f9);
    color: #fff;
    box-shadow: 0 6px 24px rgba(221,177,249,.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(18,12,6,.9);
}

/* 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 START POPUP — appears before a room exists
   ============================================ */
.w2g-start {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.w2g-start-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,4,8,.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: w2g-fade-in .2s ease-out;
}
.w2g-start-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: linear-gradient(160deg, #251608 0%, #14100a 100%);
    border: 1px solid rgba(221,177,249,.2);
    border-radius: 16px;
    padding: 22px 22px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(221,177,249,.08);
    animation: w2g-pop-in .25s cubic-bezier(.16,1,.3,1);
}
.w2g-start-cancel {
    position: absolute;
    top: 10px; right: 10px;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-start-cancel:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.w2g-start-title {
    margin: 4px 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.w2g-start-sub {
    margin: 0 0 18px;
    font-size: .8rem;
    line-height: 1.4;
    color: rgba(255,255,255,.6);
}
.w2g-start-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #c79bff, #ddb1f9);
    color: #fff;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(221,177,249,.5);
    transition: filter .15s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-start-go:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.w2g-start-go:active { transform: scale(.97); }

/* The hidden attribute would otherwise lose to our flex rule above. */
.w2g-start[hidden] { display: none; }

/* ============================================
   W2G LEAVE CONFIRM — replaces window.confirm()
   ============================================ */
.w2g-leave-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.w2g-leave-modal[hidden] { display: none; }
.w2g-leave-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,4,8,.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: w2g-fade-in .2s ease-out;
}
.w2g-leave-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: linear-gradient(160deg, #251608 0%, #14100a 100%);
    border: 1px solid rgba(221,177,249,.2);
    border-radius: 16px;
    padding: 22px 22px 18px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(221,177,249,.08);
    animation: w2g-pop-in .25s cubic-bezier(.16,1,.3,1);
}
.w2g-leave-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.w2g-leave-sub {
    margin: 0 0 18px;
    font-size: .8rem;
    line-height: 1.45;
    color: rgba(255,255,255,.6);
}
.w2g-leave-row {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.w2g-leave-stay,
.w2g-leave-go {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
}
.w2g-leave-stay {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.88);
}
.w2g-leave-stay:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.w2g-leave-go {
    background: linear-gradient(135deg, #c79bff, #ddb1f9);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(221,177,249,.5);
}
.w2g-leave-go:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.w2g-leave-go:active { transform: scale(.97); }

/* ============================================
   W2G INVITE MODAL — host's friend picker
   ============================================ */

.w2g-chat-invite {
    background: rgba(221,177,249,.16);
    border: 1px solid rgba(221,177,249,.42);
    color: #d9bcff;
    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(221,177,249,.28);
    border-color: rgba(221,177,249,.7);
    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, #251608 0%, #14100a 100%);
    border: 1px solid rgba(221,177,249,.2);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(221,177,249,.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(221,177,249,.55);
    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(221,177,249,.16), rgba(199,155,255,.10));
    box-shadow: inset 0 0 0 1px rgba(221,177,249,.45);
}

.w2g-invite-av {
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #c79bff, #ddb1f9);
    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 #14100a;
    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, #c79bff, #ddb1f9);
    border-color: #ddb1f9;
}
.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, #c79bff, #ddb1f9);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(221,177,249,.5);
    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;
}

/* ================================================================
   Lesson Zone — inline admin (admin-only entry points + modal)
   Mounted by lessons-inline-admin.js. Mirrors lz2 tokens.
   ================================================================ */

/* --- Hub: "+ New Series" admin tile --- */
.lz-hub-card-admin {
    background: transparent;
    border: 1.5px dashed color-mix(in srgb, var(--lz2-accent, #c79bff) 50%, transparent);
    color: var(--lz2-accent, #c79bff);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color .15s, transform .15s, background .15s;
}
.lz-hub-card-admin:hover {
    border-color: var(--lz2-accent, #c79bff);
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 6%, transparent);
    transform: translateY(-2px);
}
.lz-hub-card-cover-admin {
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 12%, transparent) !important;
}
.lz-hub-admin-plus {
    font-size: 56px; line-height: 1; font-weight: 200;
    color: var(--lz2-accent, #c79bff); opacity: .85;
}

/* --- Detail header admin strip --- */
.lz-detail-admin {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed color-mix(in srgb, var(--text-secondary) 25%, transparent);
}
.lz-admin-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
    background: var(--lz2-surface, #1a1d2e);
    color: var(--text-secondary);
    font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.lz-admin-btn:hover {
    border-color: var(--lz2-accent, #c79bff);
    color: var(--text-heading);
}
.lz-admin-btn.lz-admin-primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--lz2-accent, #c79bff), #ff8fd1);
    padding: 9px 18px;
    font-size: .9rem;
    box-shadow: 0 8px 22px rgba(199,155,255,.40);
}
.lz-admin-btn.lz-admin-primary:hover {
    background: linear-gradient(135deg, #b89cfb, #ff9fda);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(199,155,255,.55);
}
.lz-admin-btn.lz-admin-primary .lz-admin-plus {
    font-size: 1.25rem; font-weight: 600;
}
.lz-admin-btn.lz-admin-danger { color: #ff8a8a; }
.lz-admin-btn.lz-admin-danger:hover {
    border-color: #ff5e5e; color: #ff5e5e;
}
.lz-admin-plus { font-size: 1.05rem; line-height: 1; font-weight: 400; }

/* --- Per-lesson row controls --- */
.lz-admin-lesson {
    display: inline-flex; gap: 4px; margin-left: auto; padding-left: 8px;
    align-items: center; flex-shrink: 0;
}
.lz-admin-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer; line-height: 1;
    transition: border-color .15s, color .15s, background .15s;
}
.lz-admin-icon:hover {
    border-color: var(--lz2-accent, #c79bff);
    color: var(--lz2-accent, #c79bff);
}
.lz-admin-icon.lz-admin-danger { font-size: 18px; font-weight: 300; }
.lz-admin-icon.lz-admin-danger:hover {
    border-color: #ff5e5e; color: #ff5e5e;
}

/* Sidebar wraps the row + admin controls together. */
.lz2-side-wrap {
    display: flex; align-items: stretch; gap: 4px;
}
.lz2-side-wrap > .lz2-side-row { flex: 1; }
.lz2-side-wrap .lz-admin-lesson {
    margin: 4px 4px 4px 0;
    flex-direction: column; padding-left: 0;
}

/* Path "+ Add a lesson" item. */
.lz2-path-add {
    border: 1.5px dashed color-mix(in srgb, var(--lz2-accent, #c79bff) 45%, transparent);
    background: transparent;
    border-radius: var(--lz2-radius);
    margin-top: 8px;
    color: var(--lz2-accent, #c79bff);
}
.lz2-path-add:hover {
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 6%, transparent);
}
.lz2-path-dot-add {
    background: var(--lz2-accent, #c79bff) !important;
    color: #fff;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-weight: 600; font-size: 16px;
}

/* ================================================================
   Inline admin modal (.lia-*)
   ================================================================ */

body.lia-locked { overflow: hidden; }

.lia-root {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 16px 16px;
    overflow-y: auto;
}
.lia-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 10, 24, .76);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lia-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 640px;
    background: var(--bg-card, #181b2e);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    display: flex; flex-direction: column; max-height: 90vh;
    overflow: hidden;
}
.lia-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
}
.lia-title { margin: 0; font-size: 1.05rem; color: var(--text-heading); font-weight: 700; }
.lia-close {
    background: transparent; border: 0; color: var(--text-secondary);
    font-size: 24px; line-height: 1; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px;
}
.lia-close:hover { background: color-mix(in srgb, var(--text-secondary) 12%, transparent); color: var(--text-heading); }
.lia-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.lia-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
    background: color-mix(in srgb, var(--bg-card, #181b2e) 90%, #000);
}

.lia-form { display: flex; flex-direction: column; gap: 12px; }
.lia-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .lia-row { grid-template-columns: 1fr; } }
.lia-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lia-label {
    font-size: .78rem; font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: .02em;
}
.lia-hint { font-size: .75rem; color: var(--lz2-dim, #8a8aa3); }

.lia-input, .lia-file {
    width: 100%; box-sizing: border-box;
    padding: 9px 12px;
    background: var(--bg-elevated, #11132a);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-radius: 9px;
    color: var(--text-heading);
    font: inherit; font-size: .92rem;
    transition: border-color .15s, background .15s;
}
.lia-input:focus, .lia-file:focus {
    outline: none; border-color: var(--lz2-accent, #c79bff);
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 6%, var(--bg-elevated, #11132a));
}
textarea.lia-input { resize: vertical; min-height: 60px; line-height: 1.4; }
textarea.lia-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.lia-file { padding: 7px 10px; font-size: .85rem; }
.lia-preview { display: block; margin-top: 8px; max-width: 180px; max-height: 120px; border-radius: 8px; }
.lia-preview-sm { max-width: 80px; max-height: 80px; border-radius: 50%; object-fit: cover; }

.lia-check {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-secondary); font-size: .9rem;
    cursor: pointer;
}
.lia-check input { accent-color: var(--lz2-accent, #c79bff); }

.lia-collapse {
    border: 1px dashed color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
}
.lia-collapse summary {
    cursor: pointer; color: var(--text-secondary); font-weight: 600;
    font-size: .85rem;
}
.lia-collapse[open] summary { margin-bottom: 10px; color: var(--text-heading); }
.lia-collapse-body { display: flex; flex-direction: column; gap: 10px; }

.lia-btn {
    padding: 9px 16px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent);
    background: var(--lz2-surface, #1a1d2e);
    color: var(--text-secondary);
    font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.lia-btn:hover { border-color: var(--lz2-accent, #c79bff); color: var(--text-heading); }
.lia-btn.lia-primary {
    background: var(--lz2-accent, #c79bff);
    border-color: var(--lz2-accent, #c79bff);
    color: #fff;
}
.lia-btn.lia-primary:hover { filter: brightness(1.08); color: #fff; }
.lia-btn:disabled { opacity: .55; cursor: default; }

.lia-btn-sm {
    padding: 5px 11px; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent);
    background: transparent;
    color: var(--text-secondary);
    font: inherit; font-size: .8rem; font-weight: 600;
    cursor: pointer;
}
.lia-btn-sm:hover { color: var(--lz2-accent, #c79bff); border-color: var(--lz2-accent, #c79bff); }

/* Scrape row */
.lia-scrape { display: flex; gap: 6px; align-items: stretch; }
.lia-scrape > .lia-input { flex: 1; }
.lia-scrape-btn {
    flex-shrink: 0;
    padding: 0 14px; border-radius: 9px;
    border: 1px solid var(--lz2-accent, #c79bff);
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 14%, transparent);
    color: var(--lz2-accent, #c79bff);
    font: inherit; font-size: .85rem; font-weight: 600; white-space: nowrap;
    cursor: pointer;
    transition: background .15s;
}
.lia-scrape-btn:hover { background: color-mix(in srgb, var(--lz2-accent, #c79bff) 22%, transparent); }
.lia-scrape-btn:disabled { opacity: .55; cursor: default; }
.lia-scrape-status { margin-top: 6px; font-size: .8rem; color: var(--text-secondary); }
.lia-scrape-ok    { color: #6ee7b7; }
.lia-scrape-warn  { color: #fbbf24; }
.lia-scrape-error { color: #ff8a8a; }

/* Tasks repeater */
.lia-tasks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.lia-task {
    display: grid;
    grid-template-columns: 1fr 110px auto 28px;
    gap: 6px; align-items: center;
}
@media (max-width: 540px) {
    .lia-task { grid-template-columns: 1fr 1fr; grid-template-areas: "p p" "t r" "t d"; }
    .lia-task-prompt { grid-area: p; }
    .lia-task-type   { grid-area: t; }
    .lia-task-req    { grid-area: r; }
    .lia-task-del    { grid-area: d; }
}
.lia-task-del {
    width: 28px; height: 28px;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer; line-height: 1; font-size: 16px;
}
.lia-task-del:hover { border-color: #ff5e5e; color: #ff5e5e; }

/* ================================================================
   Oryx cover generator — shared modal (.oxc-*)
   ================================================================ */

body.oxc-locked { overflow: hidden; }

.oxc-root {
    position: fixed; inset: 0; z-index: 10010;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 16px 16px;
    overflow-y: auto;
}
.oxc-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 10, 24, .76);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.oxc-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 560px;
    background: var(--bg-card, #181b2e);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    display: flex; flex-direction: column; max-height: 92vh;
    overflow: hidden;
}
.oxc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
}
.oxc-title { margin: 0; font-size: 1.05rem; color: var(--text-heading); font-weight: 700; }
.oxc-close {
    background: transparent; border: 0; color: var(--text-secondary);
    font-size: 24px; line-height: 1; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px;
}
.oxc-close:hover { background: color-mix(in srgb, var(--text-secondary) 12%, transparent); color: var(--text-heading); }
.oxc-body { padding: 16px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.oxc-foot {
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
    padding: 12px 18px;
    border-top: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
    background: color-mix(in srgb, var(--bg-card, #181b2e) 90%, #000);
}

.oxc-field { display: flex; flex-direction: column; gap: 6px; }
.oxc-label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.oxc-hint  { font-size: .75rem; color: var(--lz2-dim, #8a8aa3); }
.oxc-input {
    width: 100%; box-sizing: border-box;
    padding: 9px 12px;
    background: var(--bg-elevated, #11132a);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-radius: 9px;
    color: var(--text-heading);
    font: inherit; font-size: .92rem; line-height: 1.4;
}
.oxc-input:focus {
    outline: none; border-color: var(--lz2-accent, #c79bff);
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 6%, var(--bg-elevated, #11132a));
}
textarea.oxc-input { resize: vertical; min-height: 70px; }

.oxc-aspects { display: flex; gap: 6px; flex-wrap: wrap; }
.oxc-chip {
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent);
    background: transparent; color: var(--text-secondary);
    font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.oxc-chip:hover { color: var(--text-heading); border-color: var(--lz2-accent, #c79bff); }
.oxc-chip.active {
    background: var(--lz2-accent, #c79bff);
    border-color: var(--lz2-accent, #c79bff);
    color: #fff;
}

.oxc-stage {
    background: var(--bg-elevated, #0f1124);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
    border-radius: 12px;
    min-height: 220px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.oxc-stage-empty {
    color: var(--lz2-dim, #8a8aa3);
    font-size: .85rem;
    padding: 24px;
}
.oxc-preview {
    display: block; max-width: 100%; max-height: 60vh;
    border-radius: 8px;
}
.oxc-preview.oxc-aspect-square { aspect-ratio: 1 / 1; width: 320px; max-width: 100%; object-fit: cover; }
.oxc-preview.oxc-aspect-wide   { aspect-ratio: 3 / 2; width: 100%;  object-fit: cover; }
.oxc-preview.oxc-aspect-tall   { aspect-ratio: 2 / 3; width: 260px; max-width: 100%; object-fit: cover; }

.oxc-status { font-size: .82rem; }
.oxc-status-info  { color: var(--text-secondary); }
.oxc-status-ok    { color: #6ee7b7; }
.oxc-status-error { color: #ff8a8a; }

.oxc-btn {
    padding: 9px 16px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent);
    background: var(--lz2-surface, #1a1d2e);
    color: var(--text-secondary);
    font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.oxc-btn:hover { border-color: var(--lz2-accent, #c79bff); color: var(--text-heading); }
.oxc-btn:disabled { opacity: .55; cursor: default; }
.oxc-btn.oxc-primary {
    background: var(--lz2-accent, #c79bff);
    border-color: var(--lz2-accent, #c79bff);
    color: #fff;
}
.oxc-btn.oxc-primary:hover { filter: brightness(1.08); color: #fff; }

/* Cover row inside .lia-* (inline lesson admin) */
.lia-cover-row { display: flex; gap: 6px; align-items: stretch; }
.lia-cover-row > .lia-file { flex: 1; }

/* =====================================================================
   Lesson Zone HUB — beauty pass
   Animated aurora, cinematic hero, prominent stats, premium series cards.
   Scoped to #lzHubView so the per-series detail page is unaffected.
   ===================================================================== */

/* Animated aurora behind the hub. The two orbs drift in opposite slow loops.
 * Hidden on the detail page since #lzHubView is display:none there. */
#lzHubView { position: relative; }
#lzHubView::before,
#lzHubView::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: .55;
}
#lzHubView::before {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(199,155,255,.55), transparent 65%);
    top: -120px; left: -160px;
    animation: lz-hub-orb-a 24s ease-in-out infinite alternate;
}
#lzHubView::after {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(255,143,209,.40), transparent 65%);
    top: 80px; right: -120px;
    animation: lz-hub-orb-b 28s ease-in-out infinite alternate;
}
#lzHubView > * { position: relative; z-index: 1; }
@keyframes lz-hub-orb-a {
    0%   { transform: translate(0,0)        scale(1); }
    50%  { transform: translate(60px, 40px) scale(1.08); }
    100% { transform: translate(-30px, 90px) scale(.95); }
}
@keyframes lz-hub-orb-b {
    0%   { transform: translate(0,0)         scale(1); }
    50%  { transform: translate(-50px, 70px) scale(1.05); }
    100% { transform: translate(30px, 30px)  scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
    #lzHubView::before, #lzHubView::after { animation: none; }
}

/* ---- Hero typography lift ---- */
#lzHubView .lz-hub-hero {
    padding-top: 64px;
    padding-bottom: 28px;
    align-items: flex-start;
}
#lzHubView .lz-hub-eyebrow {
    background: linear-gradient(135deg, rgba(199,155,255,.18), rgba(255,143,209,.10));
    color: #d4ccff;
    box-shadow: 0 0 0 1px rgba(199,155,255,.25) inset;
    backdrop-filter: blur(6px);
}
#lzHubView .lz-hub-title {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    color: #fff;
    margin-bottom: 16px;
}
#lzHubView .lz-hub-subtitle {
    color: rgba(244,244,245,.78);
    font-size: 1.08rem;
}

/* ---- Stat chips → premium pills ---- */
#lzHubStats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lz-stat-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: .85rem;
    backdrop-filter: blur(8px);
    transition: transform 180ms var(--lz2-ease, ease), border-color 180ms ease, background 180ms ease;
}
.lz-stat-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(199,155,255,.35);
    background: linear-gradient(180deg, rgba(199,155,255,.10), rgba(255,255,255,.02));
}
.lz-stat-chip strong {
    color: var(--text-heading);
    font-weight: 800;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.lz-stat-chip svg { color: var(--lz2-accent, #c79bff); flex-shrink: 0; }
.lz-stat-streak {
    background: linear-gradient(180deg, rgba(251,146,60,.14), rgba(251,146,60,.04));
    border-color: rgba(251,146,60,.28);
}
.lz-stat-streak svg { color: #fb923c; }
.lz-stat-streak strong { color: #ffd9b3; }
.lz-stat-badge {
    background: linear-gradient(180deg, rgba(250,204,21,.14), rgba(250,204,21,.04));
    border-color: rgba(250,204,21,.28);
}
.lz-stat-badge svg { color: #facc15; }
.lz-stat-badge strong { color: #fff5c2; }

/* ---- Section headings — accent bar + softer scale ---- */
#lzHubView .lz-hub-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.01em;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
#lzHubView .lz-hub-section-title::before {
    content: "";
    width: 4px; height: 22px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--lz2-accent, #c79bff), #ff8fd1);
    box-shadow: 0 0 12px rgba(199,155,255,.5);
}
#lzFeaturedSection .lz-hub-section-title {
    background: linear-gradient(90deg, #fff, #ffd1ee);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
#lzFeaturedSection .lz-hub-section-title::before {
    background: linear-gradient(180deg, #ffd1ee, #ff8fd1);
}

/* ---- Guild filter pills — frosted track + active glow ---- */
#lzHubView .lz-hub-filters {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
#lzHubView .lz-pill.active {
    background: linear-gradient(135deg, var(--link-color, #c79bff), #c084fc);
    box-shadow: 0 6px 22px rgba(199,155,255,.45),
                0 0 0 1px rgba(255,255,255,.10) inset;
}

/* ---- Series cards — premium hover with play overlay + guild stripe ---- */
.lz-hub-card {
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    position: relative;
}
.lz-hub-card::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lz2-accent, #c79bff), #ff8fd1);
    opacity: 0;
    transition: opacity 240ms ease;
    z-index: 2;
}
.lz-hub-card:hover {
    border-color: rgba(199,155,255,.30);
    box-shadow: 0 22px 48px rgba(0,0,0,.40), 0 0 0 1px rgba(199,155,255,.15) inset;
}
.lz-hub-card:hover::before { opacity: 1; }
/* Per-guild top stripe color */
.lz-hub-card:has(.lz-guild-artisan)::before  { background: linear-gradient(90deg, #7dd3fc, #60a5fa); }
.lz-hub-card:has(.lz-guild-writer)::before   { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.lz-hub-card:has(.lz-guild-editor)::before   { background: linear-gradient(90deg, #f472b6, #c084fc); }
.lz-hub-card:has(.lz-guild-mangakas)::before { background: linear-gradient(90deg, #c79bff, #7c3aed); }
.lz-hub-card:has(.lz-guild-comics)::before   { background: linear-gradient(90deg, #fb923c, #ef4444); }

.lz-hub-card-cover {
    overflow: hidden;
}
/* (Removed: violet radial bloom on hover. The play button stands alone now.) */
/* Subtle zoom on the cover image while hovered. */
.lz-hub-card[style*="background-image"],
.lz-hub-card-cover[style*="background-image"] {
    transition: background-size 600ms ease, background-position 600ms ease;
    background-size: 105% auto;
}
.lz-hub-card:hover .lz-hub-card-cover[style*="background-image"] {
    background-size: 115% auto;
}
/* Play button overlay revealed on hover. */
.lz-hub-card-cover::after {
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
}
.lz-hub-card .lz-hub-card-cover {
    position: relative;
}
.lz-hub-card .lz-hub-card-cover .lz-hub-card-play {
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    transform: translate(-50%, -50%) scale(.7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    color: #fff;
    box-shadow: none;
    opacity: 0;
    transition: opacity 240ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
    z-index: 2;
    pointer-events: none;
}
.lz-hub-card:hover .lz-hub-card-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Featured cards get a small star badge and a richer surface. */
.lz-hub-card-feat {
    background: linear-gradient(180deg, rgba(199,155,255,.08), var(--bg-card) 60%);
    box-shadow: 0 8px 20px rgba(0,0,0,.22), 0 0 0 1px rgba(199,155,255,.12) inset;
}
.lz-hub-card-feat .lz-hub-card-title::before {
    content: "★";
    color: #facc15;
    margin-right: 6px;
    font-size: .9em;
    text-shadow: 0 0 12px rgba(250,204,21,.5);
}

/* ---- Continue Learning card — subtle aurora veil ---- */
#lzHubContinueSec .lz-hub-continue-card {
    border: 1px solid rgba(199,155,255,.18);
}

/* ---- Featured horizontal row — soft edge fade so cards feather in/out ---- */
#lzFeaturedSection .lz-hub-feat-row {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    padding: 4px 24px;
    margin: 0 -24px;
}

/* ---- Section spacing rhythm ---- */
#lzHubView .lz-hub-section,
#lzHubView .lz-hub-continue-sec { margin-top: 48px; }

/* =====================================================================
   CCA Editor — full-screen video editor at /edit.php
   Three-pane: media (left) · canvas+transport (center) · properties (right)
   Below: timeline with track labels + ruler + playhead.
   ===================================================================== */

.ce-body {
    margin: 0;
    background: #0f0d18;
    color: #e9e6f6;
    overflow: hidden;
}
.ed-app {
    display: grid;
    /* top · main · timeline · toolbar — toolbar size is content-driven so
       it always fits its single row of pills. */
    grid-template-rows: 48px 1fr 220px auto;
    height: 100vh;
    width: 100%;
}

/* --- Top bar --- */
.ed-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px;
    background: #16131f;
    border-bottom: 1px solid rgba(255,255,255,.06);
    gap: 12px;
}
.ed-top-left, .ed-top-right { display: flex; align-items: center; gap: 10px; }
.ed-back {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: #c9c5dc;
    text-decoration: none;
    background: rgba(255,255,255,.04);
}
.ed-back:hover { background: rgba(199,155,255,.15); color: #fff; }
.ed-name-input {
    background: transparent;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    padding: 6px 10px;
    border-radius: 8px;
    width: 240px;
}
.ed-name-input:hover, .ed-name-input:focus {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
    outline: none;
}
.ed-save-status {
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    margin-left: 4px;
}
.ed-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 0; border-radius: 8px;
    font-size: .85rem; font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.ed-btn-primary {
    background: #ddb1f9;
    color: #000;
    box-shadow: 0 6px 16px rgba(199,155,255,.35);
}
.ed-btn-primary:hover { filter: brightness(1.08); }
.ed-btn-ghost { background: rgba(255,255,255,.06); color: #e9e6f6; }
.ed-btn-ghost:hover { background: rgba(255,255,255,.10); }
.ed-btn-danger {
    background: rgba(239,68,68,.12);
    color: #fda4af;
    border: 1px solid rgba(239,68,68,.30);
    width: 100%;
    margin-top: 8px;
}
.ed-btn-danger:hover { background: rgba(239,68,68,.20); }

/* --- Main 3-column --- */
.ed-main {
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ed-side {
    background: #16131f;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ed-side-left { border-right: 1px solid rgba(255,255,255,.06); }
.ed-side-right { border-left: 1px solid rgba(255,255,255,.06); }
.ed-side-head {
    padding: 12px 14px;
    font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ed-side-foot { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.04); }
.ed-add-btn {
    background: rgba(199,155,255,.16);
    color: #c9bdff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem; font-weight: 700;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: .04em;
}
.ed-add-btn:hover { background: rgba(199,155,255,.28); color: #fff; }
.ed-add-text {
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px dashed rgba(255,255,255,.14);
    color: #c9c5dc;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .82rem;
}
.ed-add-text:hover { background: rgba(199,155,255,.12); border-color: rgba(199,155,255,.35); color: #fff; }

.ed-asset-list { flex: 1; overflow-y: auto; padding: 8px; position: relative; }
/* One-shot button to generate filmstrips for older video uploads. Auto-shows
 * when at least one video lacks a strip, vanishes after backfill. */
.ed-asset-backfill {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, rgba(199,155,255,.18), rgba(255,143,209,.10));
    border: 1px dashed rgba(199,155,255,.40);
    color: #d4c8ff;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: .78rem; font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background .15s ease, border-color .15s ease;
}
.ed-asset-backfill:hover { background: rgba(199,155,255,.28); color: #fff; border-color: rgba(199,155,255,.65); }
.ed-asset-backfill:disabled { opacity: .6; cursor: progress; }
.ed-asset-list.ed-dropping,
.ed-tl-tracks.ed-dropping {
    outline: 2px dashed rgba(199,155,255,.55);
    outline-offset: -6px;
    background-color: rgba(199,155,255,.08);
}
.ed-asset {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.02);
    margin-bottom: 6px;
    cursor: grab;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}
.ed-asset:hover { background: rgba(199,155,255,.08); border-color: rgba(199,155,255,.18); }
.ed-asset:active { cursor: grabbing; }
.ed-asset-thumb {
    width: 50px; height: 32px;
    background: #2a2336 center/cover no-repeat;
    border-radius: 5px;
    flex: 0 0 50px;
    display: flex; align-items: center; justify-content: center;
    color: #c9bdff;
}
.ed-asset-thumb-vid { background: linear-gradient(135deg, #6d28d9, #4c1d95); }
.ed-asset-meta { flex: 1; min-width: 0; }
.ed-asset-name {
    font-size: .82rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #f1edff;
}
.ed-asset-sub { font-size: .7rem; color: rgba(255,255,255,.45); margin-top: 2px; }
.ed-asset-del {
    background: transparent; border: 0;
    color: rgba(255,255,255,.4);
    font-size: 1.2rem;
    width: 24px; height: 24px;
    border-radius: 5px;
    cursor: pointer;
}
.ed-asset-del:hover { background: rgba(239,68,68,.18); color: #fda4af; }
.ed-empty {
    padding: 18px 12px;
    color: rgba(255,255,255,.45);
    font-size: .82rem;
    text-align: center;
}

/* --- Center stage --- */
.ed-stage-wrap {
    background: #0a0810;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ed-stage {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 12px;
    position: relative;
}
.ed-stage canvas {
    max-width: 100%;
    max-height: 100%;
    background: #000;
    box-shadow: 0 12px 48px rgba(0,0,0,.5);
    border-radius: 6px;
}
.ed-stage-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.4);
    pointer-events: none;
    font-size: .9rem;
}
.ed-transport {
    background: #16131f;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
}
.ed-tx {
    background: rgba(255,255,255,.06);
    border: 0; color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.ed-tx:hover { background: rgba(199,155,255,.30); }
.ed-time {
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,.7);
    font-size: .85rem;
}
.ed-spacer { flex: 1; }
.ed-zoom { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.55); }
.ed-zoom input { width: 120px; }

/* --- Right properties --- */
.ed-props { flex: 1; overflow-y: auto; padding: 12px; }
.ed-prop-grp { display: flex; flex-direction: column; gap: 10px; }
.ed-prop-row { display: flex; flex-direction: column; gap: 4px; }
.ed-prop-row label {
    font-size: .7rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.ed-prop-row input,
.ed-prop-row select,
.ed-prop-row textarea {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    color: #f1edff;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: .85rem;
    font-family: inherit;
}
.ed-prop-row input[type="color"] { padding: 2px; height: 32px; }
.ed-prop-row input:focus,
.ed-prop-row select:focus,
.ed-prop-row textarea:focus {
    outline: none;
    border-color: rgba(199,155,255,.55);
    background: rgba(199,155,255,.08);
}

/* --- Timeline --- */
.ed-timeline {
    background: #100d18;
    overflow: hidden;
    display: flex; flex-direction: column;
}

/* Bottom tool strip — horizontally scrollable row of pill buttons. Anchored
   under the timeline so it's always reachable. Mobile keeps the same row;
   the scroll behaviour handles overflow on any width. The chunky bottom
   padding lifts the strip clear of the OS taskbar / macOS dock on desktop
   browsers where the page can extend behind those system surfaces. */
/* The `hidden` attribute needs to win over `display: flex` below. Without
   this the subtoolbar renders on top of the primary row even when hidden. */
.ed-toolbar[hidden] { display: none !important; }

.ed-toolbar {
    display: flex;
    align-items: center;
    /* Distribute leftover space evenly across the row when everything fits
       (the desktop case). On narrower screens the buttons overflow and the
       scroll kicks in — `space-evenly` is harmless then since flex packs
       from the start once content exceeds the container. */
    justify-content: space-evenly;
    gap: 6px;
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 56px);
    background: #0e0b16;
    border-top: 1px solid rgba(255,255,255,.06);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.ed-toolbar::-webkit-scrollbar { height: 6px; }
.ed-toolbar::-webkit-scrollbar-track { background: transparent; }
.ed-toolbar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14);
    border-radius: 999px;
}
.ed-toolbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }

.ed-tool {
    flex: 0 0 auto;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    min-width: 64px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(232,232,240,.78);
    font-size: .68rem; font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    scroll-snap-align: start;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ed-tool svg { display: block; opacity: .9; }
.ed-tool:hover {
    background: rgba(255,255,255,.05);
    color: #f4f4f5;
}
.ed-tool.active {
    background: rgba(199,155,255,.14);
    border-color: rgba(199,155,255,.35);
    color: #d8b4fe;
}
.ed-tool:active { transform: scale(.96); }

/* Back-arrow chip on subtoolbars: pinned left so it never gets swept away
   by the space-evenly distribution. */
.ed-tool-back {
    color: rgba(232,232,240,.95);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
    margin-right: 4px;
}
.ed-tool-back:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
}
/* Destructive subtools (Delete) read as red on hover/active. */
.ed-tool-danger:hover {
    background: rgba(239, 68, 68, .12);
    color: #fca5a5;
}
.ed-tool-danger.active {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .35);
    color: #fca5a5;
}

/* Volume popover — floats above the Volume button on the Edit subtoolbar.
   Position is set inline by JS; CSS only handles the visual chrome. */
.ed-vol-pop {
    position: fixed;
    z-index: 10000;
    width: 220px;
    background: rgba(20,17,30,.98);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.55);
    padding: 10px 12px 12px;
    color: #f4f4f5;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.ed-vol-pop[hidden] { display: none; }
.ed-vol-pop::after { /* tail pointing down at the button */
    content: "";
    position: absolute;
    bottom: -6px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: rgba(20,17,30,.98);
    border-right: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.ed-vol-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.ed-vol-mute {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    border: 0; border-radius: 6px;
    color: rgba(255,255,255,.85);
    cursor: pointer;
}
.ed-vol-mute:hover { background: rgba(255,255,255,.12); color: #fff; }
.ed-vol-label {
    flex: 1 1 auto;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(232,232,240,.78);
}
.ed-vol-readout {
    font-size: .78rem;
    font-weight: 600;
    color: #d8b4fe;
    font-variant-numeric: tabular-nums;
}
.ed-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 4px;
    background: rgba(255,255,255,.14);
    border-radius: 999px;
    outline: none;
}
.ed-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; height: 14px;
    background: #dcc8ff;
    border-radius: 50%;
    border: 2px solid #1a1530;
    cursor: pointer;
}
.ed-vol-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    background: #dcc8ff;
    border-radius: 50%;
    border: 2px solid #1a1530;
    cursor: pointer;
}

@media (max-width: 720px) {
    /* Mobile: clear the in-page bottom-nav (≈64px) plus the iOS home bar. */
    .ed-toolbar {
        padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 72px);
        gap: 4px;
    }
    .ed-tool { min-width: 58px; padding: 6px 8px; font-size: .62rem; }
}
.ed-tl-head {
    flex: 1;
    display: grid;
    grid-template-columns: 96px 1fr;
    overflow: hidden;
}
.ed-tl-track-labels {
    display: flex; flex-direction: column;
    background: #16131f;
    border-right: 1px solid rgba(255,255,255,.06);
}
.ed-tl-track-label {
    height: 56px;
    display: flex; align-items: center;
    padding: 0 12px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ed-tl-track-label:first-child { padding-top: 28px; height: 84px; }   /* space for ruler */
.ed-tl-ruler-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}
.ed-tl-ruler-wrap::-webkit-scrollbar { height: 8px; }
.ed-tl-ruler-wrap::-webkit-scrollbar-thumb { background: rgba(199,155,255,.35); border-radius: 999px; }
.ed-tl-ruler {
    height: 28px;
    position: relative;
    background: linear-gradient(180deg, #1d1929, #16131f);
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
}
.ed-tl-tick {
    position: absolute;
    top: 0; bottom: 0;
    border-left: 1px solid rgba(255,255,255,.10);
}
.ed-tl-tick span {
    position: absolute;
    left: 4px; top: 4px;
    font-size: .65rem;
    color: rgba(255,255,255,.55);
    font-variant-numeric: tabular-nums;
}
.ed-tl-tracks {
    position: relative;
    min-height: 168px;   /* 3 tracks × 56 */
}
.ed-tl-track {
    position: relative;
    height: 56px;
    background: rgba(255,255,255,.015);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ed-tl-track:nth-child(2) { background: rgba(199,155,255,.03); }
.ed-tl-clip {
    position: absolute;
    top: 6px; bottom: 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(199,155,255,.85), rgba(124,58,237,.85));
    color: #fff;
    font-size: .75rem;
    overflow: hidden;
    cursor: grab;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.10);
    user-select: none;
}
.ed-tl-clip:active { cursor: grabbing; }
.ed-tl-clip-image { background: linear-gradient(180deg, rgba(244,114,182,.85), rgba(192,84,252,.85)); }
.ed-tl-clip-text  { background: linear-gradient(180deg, rgba(125,211,252,.85), rgba(96,165,250,.85)); }
.ed-tl-clip-audio { background: linear-gradient(180deg, rgba(110,215,155,.85), rgba(45,180,140,.85)); }
.ed-asset-thumb-aud { background: linear-gradient(135deg, #16a34a, #047857); }
.ed-tl-track-audio { background: rgba(110,215,155,.04); }
.ed-tl-track-text  { background: rgba(125,211,252,.04); }

/* Track labels: name + remove button + the bottom "+ Track" buttons. */
.ed-tl-track-label {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
}
.ed-tl-track-label-audio .ed-tl-track-name { color: #6ed79b; }
.ed-tl-track-label-text  .ed-tl-track-name { color: #7dd3fc; }
.ed-tl-track-del {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.3);
    width: 20px; height: 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
}
.ed-tl-track-del:hover { background: rgba(239,68,68,.2); color: #fda4af; }
.ed-tl-track-add {
    padding: 8px 12px;
    display: flex; flex-direction: column; gap: 4px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.ed-tl-track-add button {
    background: rgba(199,155,255,.10);
    border: 1px dashed rgba(199,155,255,.25);
    color: #c9bdff;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: .72rem; font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.ed-tl-track-add button:hover { background: rgba(199,155,255,.25); color: #fff; }

/* Split button in the transport bar */
.ed-tx-split { width: 32px; height: 32px; }
.ed-tx-split:hover { background: rgba(255,143,209,.30); color: #ff8fd1; }

/* Keyframe button — diamond glyph styled like the split button so the
   transport reads as a tight cluster of edit actions. */
.ed-tx-kf { width: 32px; height: 32px; color: #dcc8ff; }
.ed-tx-kf:hover { background: rgba(199,155,255,.28); color: #d8b4fe; }

/* Undo / redo buttons — neutral chrome; greyed out when nothing to do. */
.ed-tx-undo, .ed-tx-redo { width: 32px; height: 32px; }
.ed-tx-undo:hover:not(:disabled),
.ed-tx-redo:hover:not(:disabled) {
    background: rgba(199,155,255,.22);
    color: #d8b4fe;
}
.ed-tx-undo:disabled, .ed-tx-redo:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Properties panel — group headings + 2-col grid for transform */
.ed-prop-grp-head {
    margin-top: 14px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    margin-bottom: 6px;
}
.ed-prop-grp-head:first-child { margin-top: 0; }
.ed-prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-prop-grid .ed-prop-row { gap: 4px; }
.ed-prop-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; cursor: pointer; }
.ed-prop-check input { width: auto !important; }
.ed-prop-static {
    background: rgba(255,255,255,.04);
    padding: 7px 10px;
    border-radius: 6px;
    color: rgba(255,255,255,.65);
    font-size: .82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Keyframe controls in the properties panel */
.ed-prop-kf-actions {
    display: flex !important; flex-direction: row !important; gap: 6px;
}
.ed-prop-kf-actions .ed-btn { padding: 5px 10px; font-size: .75rem; flex: 1; }
.ed-prop-kf-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.ed-prop-kf {
    display: grid;
    grid-template-columns: 56px 1fr 22px;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255,143,209,.08);
    border-left: 2px solid #ff8fd1;
    border-radius: 4px;
    font-size: .72rem;
}
.ed-prop-kf-time { color: #ff8fd1; font-variant-numeric: tabular-nums; font-weight: 700; }
.ed-prop-kf-vals {
    color: rgba(255,255,255,.65);
    font-family: ui-monospace, monospace;
    font-size: .68rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-prop-kf-del {
    background: transparent; border: 0; color: rgba(255,255,255,.4);
    width: 22px; height: 22px; border-radius: 4px; cursor: pointer;
    font-size: 1rem; line-height: 1;
}
.ed-prop-kf-del:hover { background: rgba(239,68,68,.2); color: #fda4af; }

.ed-tl-clip.is-selected {
    box-shadow: 0 0 0 2px #fff inset, 0 4px 16px rgba(199,155,255,.55);
}
.ed-tl-clip-body {
    padding: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 600;
    height: 100%;
    display: flex; align-items: flex-end;
    position: relative;
}
/* Per-frame tile strip — each <img> takes equal width and uses native
   object-fit: cover so the frame is recognisable at any source ratio.
   Sits absolutely behind the label/keyframe markers. */
.ed-tl-clip-frames {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: nowrap;
    z-index: 0;
    overflow: hidden; /* anything past the bar's right edge is clipped */
    background: transparent;
}
/* Lift the filename pill + keyframe diamonds above the frame tiles. */
.ed-tl-clip-body > .ed-tl-clip-label,
.ed-tl-clip-body > .ed-tl-clip-kfs { position: relative; z-index: 2; }
.ed-tl-clip-frame {
    /* Each tile renders at the SOURCE'S native aspect (height = bar
       height, width = whatever matches). The renderer in edit.js picks
       exactly as many tiles as fit the bar width, then samples those
       frames evenly across the clip's duration — so positions line up
       with the preview AND there's no zoom-crop or letterbox. */
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    display: block;
    user-select: none;
    pointer-events: none;
    transition: outline-color .12s ease;
    outline: 0 solid transparent;
    outline-offset: -2px;
}
/* The tile whose sampled frame matches what the canvas is currently
   showing — paired visually with the pink playhead line. */
.ed-tl-clip-frame.is-current {
    outline: 2px solid #ff8fd1;
}
/* Filename label sits in a soft dark pill at the bottom-left so the
 * filmstrip frames behind it stay visible. */
.ed-tl-clip-label {
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .68rem;
    padding: 2px 8px;
    margin: 0 0 4px 6px;
    border-radius: 3px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
}
.ed-tl-clip-grip {
    position: absolute;
    top: 0; bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: rgba(0,0,0,.0);
}
.ed-tl-clip-grip-l { left: 0; }
.ed-tl-clip-grip-r { right: 0; }
.ed-tl-clip-grip:hover { background: rgba(255,255,255,.18); }

/* Keyframe diamonds shown along the bottom of a clip in the timeline so
   you can see at a glance where animation points have been placed. */
.ed-tl-clip-kfs {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}
.ed-tl-clip-kf {
    position: absolute;
    top: 50%;
    width: 8px; height: 8px;
    background: #dcc8ff;
    border: 1px solid rgba(20,17,30,.85);
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 6px rgba(199,155,255,.55);
}
.ed-tl-playhead {
    position: absolute;
    top: -28px; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #ff8fd1, #ff8fd180);
    /* Was `none` — now grabbable. ::after extends a wider invisible hit
       area so users don't have to click a 2px line precisely. */
    pointer-events: auto;
    cursor: ew-resize;
    z-index: 10;
    box-shadow: 0 0 10px rgba(255,143,209,.7);
}
.ed-tl-playhead::before {
    content: "";
    position: absolute;
    top: 0; left: -6px;
    width: 14px; height: 14px;
    background: #ff8fd1;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,143,209,.7);
    cursor: grab;
}
/* Wider invisible hit area along the full vertical line. */
.ed-tl-playhead::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -7px;
    width: 16px;
}
.ed-tl-playhead:active { cursor: grabbing; }
.ed-tl-playhead:active::before { cursor: grabbing; }
/* Make the ruler read as scrubbable on hover. */
.ed-tl-ruler { cursor: pointer; }

/* --- Modals --- */
.ed-modal {
    position: fixed; inset: 0;
    z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ed-modal[hidden] { display: none; }
.ed-modal-back {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);
}
.ed-modal-card {
    position: relative;
    background: #16131f;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    width: min(560px, 100%);
    max-height: 85vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.ed-modal-head {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between;
}
.ed-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.ed-modal-close {
    background: transparent; border: 0;
    color: rgba(255,255,255,.6);
    font-size: 1.4rem; cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 6px;
}
.ed-modal-close:hover { background: rgba(255,255,255,.06); color: #fff; }
.ed-modal-body { padding: 20px; overflow-y: auto; }
.ed-modal-sub { color: rgba(255,255,255,.6); font-size: .85rem; margin: 0 0 12px; }
.ed-modal-sub-nova { color: rgba(196, 181, 253, .82); font-size: .8rem; margin: -4px 0 14px; }
.ed-modal-sub-nova em { font-style: normal; color: rgba(255,255,255,.92); }
.ed-modal-sub-nova a {
    color: #dcc8ff;
    text-decoration: underline;
    text-decoration-color: rgba(167, 139, 250, .4);
}
.ed-modal-sub-nova a:hover { color: #fff; text-decoration-color: #c79bff; }

.ed-project-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ed-project {
    display: flex; align-items: center; gap: 12px;
    padding: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    cursor: pointer;
    color: #f1edff;
    text-align: left;
    width: 100%;
}
.ed-project:hover { background: rgba(199,155,255,.10); border-color: rgba(199,155,255,.30); }
.ed-project-thumb {
    width: 80px; height: 45px;
    background: #2a2336 center/cover no-repeat;
    border-radius: 6px;
    flex: 0 0 80px;
}
.ed-project-meta { flex: 1; min-width: 0; }
.ed-project-name { font-weight: 600; }
.ed-project-sub { font-size: .72rem; color: rgba(255,255,255,.5); margin-top: 2px; }
.ed-project-del {
    background: transparent; border: 0; color: rgba(255,255,255,.4);
    font-size: 1.3rem; width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
}
.ed-project-del:hover { background: rgba(239,68,68,.18); color: #fda4af; }

.ed-export-progress { margin: 14px 0; }
.ed-export-bar {
    height: 8px;
    background: rgba(255,255,255,.06);
    border-radius: 999px; overflow: hidden;
    margin-bottom: 6px;
}
.ed-export-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #c79bff, #ff8fd1);
    transition: width .2s ease;
}
.ed-export-stat { font-size: .75rem; color: rgba(255,255,255,.55); }

@media (max-width: 900px) {
    .ed-main { grid-template-columns: 220px 1fr; }
    .ed-side-right { display: none; }
}

/* --- CCA Studio dashboard inside the Editor guild --- */
.lz-editor-studio {
    margin-top: 28px;
    display: flex; flex-direction: column;
    gap: 24px;
}
.lz-editor-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 36px 32px;
    background:
        radial-gradient(700px 320px at 0% 0%, rgba(199,155,255,.30), transparent 65%),
        radial-gradient(500px 280px at 100% 100%, rgba(255,143,209,.20), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid rgba(199,155,255,.28);
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(199,155,255,.22),
                0 0 0 1px rgba(255,255,255,.04) inset;
    position: relative;
    overflow: hidden;
}
.lz-editor-hero-text { max-width: 540px; }
.lz-editor-hero-eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: #d4c8ff;
    background: rgba(199,155,255,.18);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.lz-editor-hero-title {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    background: linear-gradient(180deg, #fff, #d8ccff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lz-editor-hero-sub {
    color: rgba(255,255,255,.78);
    margin: 0 0 20px;
    max-width: 56ch;
    line-height: 1.55;
}
.lz-editor-hero-actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.lz-editor-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px;
    background: #ddb1f9;
    color: #000 !important;
    border-radius: 12px;
    font-weight: 700; font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(199,155,255,.40);
    transition: transform .18s ease, filter .18s ease;
}
.lz-editor-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.lz-editor-cta-link {
    color: #d4c8ff !important;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.lz-editor-cta-link:hover { color: #fff !important; }
.lz-editor-hero-art { opacity: .95; flex-shrink: 0; }
@media (max-width: 820px) {
    .lz-editor-hero { grid-template-columns: 1fr; padding: 26px; }
    .lz-editor-hero-art { display: none; }
}

/* Projects strip */
.lz-editor-projects-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}
.lz-editor-projects-title {
    margin: 0;
    font-size: 1.1rem; font-weight: 700;
    color: #fff;
}
.lz-editor-projects-all {
    color: #c9bdff !important;
    font-size: .85rem;
    text-decoration: none;
    font-weight: 600;
}
.lz-editor-projects-all:hover { color: #fff !important; }
.lz-editor-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.lz-editor-projects-loading {
    color: rgba(255,255,255,.5);
    padding: 20px;
    text-align: center;
    font-size: .9rem;
}
.lz-editor-project {
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #f1edff;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.lz-editor-project:hover {
    transform: translateY(-3px);
    background: rgba(199,155,255,.08);
    border-color: rgba(199,155,255,.32);
    box-shadow: 0 14px 32px rgba(199,155,255,.20);
}
.lz-editor-project-thumb {
    aspect-ratio: 16 / 9;
    background: #1d1929 center/cover no-repeat;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.lz-editor-project-thumb-empty {
    background:
        radial-gradient(120px 80px at 30% 30%, rgba(199,155,255,.30), transparent 70%),
        #1d1929;
}
.lz-editor-project-name {
    padding: 10px 12px 4px;
    font-size: .85rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-editor-project-sub {
    padding: 0 12px 12px;
    font-size: .72rem;
    color: rgba(255,255,255,.5);
    font-variant-numeric: tabular-nums;
}
.lz-editor-project-new .lz-editor-project-thumb {
    display: flex; align-items: center; justify-content: center;
    background:
        repeating-linear-gradient(135deg, rgba(199,155,255,.06) 0 12px, transparent 12px 24px),
        rgba(199,155,255,.04);
}
.lz-editor-project-new .lz-editor-project-thumb span {
    font-size: 2rem;
    color: #c9bdff;
    font-weight: 300;
}
.lz-editor-project-new {
    border-style: dashed;
    border-color: rgba(199,155,255,.30);
}
.lz-editor-project-new .lz-editor-project-name {
    color: #c9bdff;
}


/* ============== Global picture-in-picture mini-player ==============
   Simpler-than-before chrome: a slim grip with the title + three icon
   buttons (pop-out / open full / close), the video stage, and a single
   thin progress row. The close pill is high-contrast and always visible
   so users can dismiss the mini-player without hunting for it. */
.cca-pip {
    position: fixed;
    right: 16px; bottom: 16px;
    width: 320px;
    background: rgba(14, 14, 24, .94);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,.58);
    color: #f4f4f5;
    font-family: inherit;
    z-index: 9999;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column;
}
.cca-pip[hidden] { display: none; }

/* When the browser's native PiP window is up, hide our in-page chrome —
   the OS-level floating window IS the player at that point. */
.cca-pip.cca-pip-os-active { display: none; }

/* Auto-hide chrome while the video is playing — JS adds this class
   ~1s after playback starts, removes it on pause / user activity.
   Grip (title + buttons) and bottom controls (scrub + time) both fade
   out together so the picture is unobstructed during playback. */
.cca-pip-grip,
.cca-pip-controls {
    transition: opacity .35s ease;
}
.cca-pip.cca-pip-chrome-hidden .cca-pip-grip,
.cca-pip.cca-pip-chrome-hidden .cca-pip-controls {
    opacity: 0;
    pointer-events: none;
}

/* Floating grip — overlays the top of the video stage instead of sitting
   in its own grey bar. A short top-down gradient keeps the title +
   buttons legible against bright video content. The grip is still the
   drag handle (data-pip-drag in markup) and still owns the click
   targets, so it absorbs pointer events along the top strip and
   doesn't bleed clicks through to the tap-to-toggle stage below. */
.cca-pip-grip {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 4;
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    /* Left pad clears the .cca-pip-resize handle in the same corner;
       bottom pad lets the gradient fade out before reaching the video. */
    padding: 8px 8px 18px 28px;
    cursor: grab;
    user-select: none;
    background: linear-gradient(to bottom,
        rgba(0,0,0,.58) 0%,
        rgba(0,0,0,.30) 55%,
        rgba(0,0,0,0)   100%);
    border: 0;
}
.cca-pip-grip:active { cursor: grabbing; }

.cca-pip-title {
    /* Title of what's playing removed per request — the grip just holds the
       action buttons now. flex:1 keeps them pushed to the right. */
    display: none;
    flex: 1 1 auto; min-width: 0;
}

/* Plain, colourless close button — just a white X, round like the other
   controls (no red pill). */
.cca-pip-x {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cca-pip-x:hover,
.cca-pip-x:focus-visible {
    background: rgba(255,255,255,.12);
    color: #fff;
    outline: none;
}
.cca-pip-x svg { display: block; }

/* Resize affordance — top-left corner, NW/SE diagonal cursor. Sits above
   the iframe so pointer events don't get swallowed by cross-origin
   players. */
.cca-pip-resize {
    position: absolute;
    top: 0; left: 0;
    width: 26px; height: 26px;   /* bigger touch target for mobile */
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    background: rgba(18,18,30,.55);
    border-radius: 12px 0 10px 0;
    cursor: nwse-resize;
    z-index: 6;                  /* ABOVE the grip (z:4) so it's grabbable */
    user-select: none;
    touch-action: none;          /* let the drag-to-resize own the gesture */
    transition: color .15s, background .15s;
}
.cca-pip-resize:hover { color: #fff; background: rgba(199,155,255,.40); }
.cca-pip-resize svg { display: block; transform: rotate(90deg); }

.cca-pip-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    cursor: pointer;  /* tap-to-toggle the overlay */
}
.cca-pip-stage > video,
.cca-pip-stage > iframe {
    width: 100%; height: 100%;
    display: block;
    border: 0;
}

/* ----- Tap-to-toggle skip overlay on the PiP stage -----
   Starts hidden; un-hides on stage tap, auto-hides after 2s, hides again
   on a second tap. The .cca-pip-skip buttons get a glass-pill treatment
   so they read clearly on busy video content. */
.cca-pip-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    pointer-events: none;  /* enabled by .cca-pip-overlay-on */
    opacity: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.10) 50%, rgba(0,0,0,.35));
    transition: opacity .18s ease;
    z-index: 2;
}
.cca-pip-overlay[hidden] { display: none; }
.cca-pip-overlay.cca-pip-overlay-on {
    opacity: 1;
    pointer-events: auto;
}
.cca-pip-skip {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 46px; height: 46px;
    background: rgba(14, 14, 24, .70);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    transition: transform .12s ease, background .15s ease;
}
.cca-pip-skip:hover,
.cca-pip-skip:focus-visible {
    background: rgba(124, 58, 237, .55);
    outline: none;
}
.cca-pip-skip:active { transform: scale(.92); }
.cca-pip-skip svg    { display: block; }
.cca-pip-skip span {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    margin-top: 1px;
    opacity: .85;
}
.cca-pip-skip-play {
    width: 54px; height: 54px;  /* center button is the largest target */
}

/* (timeline frame tiles styling lives further down in this file) */

/* Floating scrub row — pinned to the bottom of the stage, no grey bar,
   a short upward gradient keeps the slider + time legible against any
   video content. Stage already has overflow:hidden so the row never
   bleeds out of the rounded corner. */
.cca-pip-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 4;
    display: flex; align-items: center; gap: 8px;
    padding: 16px 10px 8px;
    background: linear-gradient(to top,
        rgba(0,0,0,.60) 0%,
        rgba(0,0,0,.28) 55%,
        rgba(0,0,0,0)   100%);
    border: 0;
}
.cca-pip-controls[hidden] { display: none; }

/* Center play/pause — glass pill floating in the middle of the video
   stage, always visible (no tap-to-toggle). Semi-transparent backdrop
   so the video underneath still shows through. */
.cca-pip-play-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 56px; height: 56px;
    border: 0;
    /* Bare play button — same style as the main watch player: no dark
       circle, just the icon with a soft drop-shadow for legibility. */
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .12s ease, opacity .2s ease;
}
.cca-pip-play-center,
.cca-pip-play-center:hover,
.cca-pip-play-center:focus-visible,
.cca-pip-play-center:active {
    /* No scale/movement on hover or click. !important beats the global
       button:active{scale(.97)} / button:hover{translateY} micro-interactions
       that would otherwise clobber the centering translate and make it jump. */
    outline: none;
    transform: translate(-50%, -50%) !important;
}
.cca-pip-play-center[hidden] { display: none; }
.cca-pip-play-center svg {
    display: block;
    width: 34px; height: 34px;
    filter: drop-shadow(0 2px 7px rgba(0,0,0,.7));
}
/* −10s / +10s seek buttons flanking the play button. Bare icons, no
   movement on click, shown/hidden with the play button by the JS. */
.cca-pip-side-btn {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.cca-pip-side-btn[hidden] { display: none; }
/* !important keeps them pinned against the global button :active/:hover
   transforms (which would otherwise drop the centering translate). */
.cca-pip-seek-back,
.cca-pip-seek-back:hover,
.cca-pip-seek-back:focus-visible,
.cca-pip-seek-back:active { left: calc(50% - 66px); transform: translate(-50%, -50%) !important; outline: none; }
.cca-pip-seek-fwd,
.cca-pip-seek-fwd:hover,
.cca-pip-seek-fwd:focus-visible,
.cca-pip-seek-fwd:active { left: calc(50% + 66px); transform: translate(-50%, -50%) !important; outline: none; }
.cca-pip-side-btn svg { display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
/* Respect the inline `hidden` attribute on the inactive icon —
   otherwise the rule above forces both play AND pause SVGs to render
   stacked on top of each other. */
.cca-pip-play-center svg[hidden] { display: none; }
.cca-pip-play-center .cca-pip-icon-play { margin-left: 3px; }

.cca-pip-btn {
    width: 26px; height: 26px;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0; border-radius: 50%;   /* round, like the video-player buttons */
    color: rgba(255,255,255,.85);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cca-pip-btn:hover,
.cca-pip-btn:focus-visible {
    background: rgba(255,255,255,.10);
    color: #fff;
    outline: none;
}
.cca-pip-btn[hidden] { display: none; }
.cca-pip-btn svg { display: block; }

/* Ghost-style header icons (pop-out, open-full) — slightly smaller and
   dimmer than the close pill so close remains the primary affordance. */
.cca-pip-btn-ghost {
    color: rgba(255,255,255,.65);
}

.cca-pip-time {
    flex: 0 0 auto;
    font-size: .7rem;
    color: rgba(255,255,255,.7);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cca-pip-scrub {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    outline: none;
    margin: 0;
    min-width: 0;
}
/* Thumb is a slim vertical LINE (not a dot). */
.cca-pip-scrub::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px; height: 14px;
    background: #fff;
    border-radius: 2px;
    cursor: pointer;
}
.cca-pip-scrub::-moz-range-thumb {
    width: 4px; height: 14px;
    background: #fff;
    border-radius: 2px;
    border: 0;
    cursor: pointer;
}

@media (max-width: 720px) {
    .cca-pip {
        width: 260px;
        right: 8px; bottom: 80px; /* clear bottom-nav */
    }
}
/* =====================================================================
   GROUP CHAT
   ===================================================================== */

/* Group avatar in sidebar / chat header — gradient instead of initials */
.msg-group-avatar {
    background: linear-gradient(135deg, #c79bff 0%, #c79bff 100%) !important;
    color: #05060e !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.msg-group-avatar svg { color: #05060e; }

/* In dark theme messages page, soften the group avatar contrast */
.msg-page .msg-group-avatar {
    background: linear-gradient(135deg, rgba(199, 155, 255,.85), rgba(199, 155, 255,.85)) !important;
    color: #05060e !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Sender label above incoming group bubble */
.msg-group-sender {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px 4px;
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1;
}
.msg-group-sender-avatar {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(124,58,237,.15);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--link-color);
    font-weight: 700;
    font-size: .62rem;
    overflow: hidden;
    flex-shrink: 0;
}
.msg-group-sender-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; }
.msg-group-sender-name {
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: .01em;
}

/* Hide DM-only chat header actions when a group is open */
body.msg-chat-group .msg-call-btn,
body.msg-chat-group #infoToggleBtn,
body.msg-chat-group #chatMenuBtn,
body.msg-chat-group #stickerBtn,
body.msg-chat-group .msg-voice-btn,
body.msg-chat-group #pinnedBar,
body.msg-chat-group .msg-pinned-bar,
body.msg-chat-group #replyBanner { display: none !important; }

/* In group, the right-side info panel slot stays empty — keep it tidy */
body.msg-chat-group #mxInfoPanel { display: none !important; }

/* =====================================================================
   CREATE-GROUP MODAL
   ===================================================================== */

.msg-cg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 4, 14, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 250;
    opacity: 0;
    transition: opacity .18s ease;
    padding: 16px;
}
.msg-cg-overlay.visible { opacity: 1; }
.msg-cg-panel {
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
    transform: translateY(8px) scale(.98);
    transition: transform .18s ease;
}
.msg-cg-overlay.visible .msg-cg-panel { transform: translateY(0) scale(1); }

.msg-cg-name {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 12px;
    padding-left: 14px !important;
}
.msg-cg-section-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin: 4px 0 6px;
    font-weight: 600;
}
.msg-cg-friend-filter { padding-left: 14px !important; margin-bottom: 8px; }

.msg-cg-friends {
    flex: 1;
    overflow-y: auto;
    min-height: 180px;
    max-height: 360px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    background: rgba(255,255,255,.015);
}

.msg-cg-friend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    border: 1px solid transparent;
}
.msg-cg-friend:hover { background: rgba(124,58,237,.06); }
.msg-cg-friend.is-picked {
    background: rgba(124,58,237,.10);
    border-color: rgba(124,58,237,.35);
}
.msg-cg-friend input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--link-color);
    cursor: pointer;
    flex-shrink: 0;
}
.msg-cg-friend-avatar {
    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: .85rem;
    overflow: hidden;
    flex-shrink: 0;
}
.msg-cg-friend-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; }
.msg-cg-friend-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.msg-cg-friend-info strong { font-size: .88rem; color: var(--text-heading); }
.msg-cg-friend-info small  { font-size: .72rem; color: var(--text-muted); }

.msg-cg-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* =====================================================================
   GROUP MEMBERS PANEL
   ===================================================================== */

.msg-gm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 4, 14, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 250;
    opacity: 0;
    transition: opacity .18s ease;
    padding: 16px;
}
.msg-gm-overlay.visible { opacity: 1; }
.msg-gm-panel {
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    display: flex;
    flex-direction: column;
    padding: 18px;
    transform: translateY(8px) scale(.98);
    transition: transform .18s ease;
}
.msg-gm-overlay.visible .msg-gm-panel { transform: translateY(0) scale(1); }

.msg-gm-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 6px;
    margin-bottom: 12px;
    max-height: 360px;
}
.msg-gm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color);
}
.msg-gm-row:last-child { border-bottom: none; }
.msg-gm-avatar {
    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: .85rem;
    overflow: hidden;
    flex-shrink: 0;
}
.msg-gm-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; }
.msg-gm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.msg-gm-info strong { font-size: .88rem; color: var(--text-heading); }
.msg-gm-info small  { font-size: .72rem; color: var(--text-muted); }
.msg-gm-row .msg-dot { position: static; }

.msg-gm-add { margin-bottom: 10px; }
.msg-cg-add-friend-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--link-color);
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.msg-cg-add-friend-btn:hover {
    background: rgba(124,58,237,.06);
    border-color: var(--link-color);
}

.msg-gm-picker {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.msg-gm-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.msg-gm-pick:hover { background: rgba(124,58,237,.08); }
.msg-gm-pick-avatar {
    width: 28px; height: 28px;
    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: .75rem;
    overflow: hidden;
    flex-shrink: 0;
}
.msg-gm-pick-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; }

.msg-gm-leave {
    color: #ef4444 !important;
    border-color: rgba(239,68,68,.5) !important;
}
.msg-gm-leave:hover {
    background: rgba(239,68,68,.10) !important;
    border-color: #ef4444 !important;
}

/* Mobile tightening */
@media (max-width: 540px) {
    .msg-cg-panel, .msg-gm-panel {
        max-height: 92vh;
        border-radius: 14px;
    }
    .msg-cg-friends, .msg-gm-list { max-height: 50vh; }
}

/* ============================================================
 * Reference Boards (boards.php / boards.js)
 * Character-design mood boards for Artisan / Mangaka / Comic.
 * ============================================================ */
.rb-body { background: var(--bg-page, #0b0b13); color: var(--text-primary, #e7e7e7); }
body.rb-body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(124,58,237,.16), transparent 60%),
        radial-gradient(900px 540px at 90% 4%, rgba(251,146,60,.10), transparent 62%);
}
.rb {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 18px 80px;
}

/* hero / hub head */
.rb-hero {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.rb-eyebrow {
    display: inline-block;
    font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase;
    color: #dcc8ff;
    background: linear-gradient(90deg, rgba(199,155,255,.16), rgba(251,146,60,.10));
    padding: 4px 10px; border-radius: 999px;
    margin-bottom: 8px;
}
.rb-title {
    margin: 0; font-size: 2rem; font-weight: 800;
    color: var(--text-heading, #fff);
    line-height: 1.05;
}
.rb-title-grad {
    background: linear-gradient(90deg, #c79bff, #fb923c);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.rb-subtitle {
    margin: 8px 0 0; max-width: 640px;
    color: var(--text-secondary, #a3a3b3);
    font-size: .95rem; line-height: 1.55;
}
.rb-hero-actions { display: flex; gap: 8px; }

.rb-hub-meta {
    font-size: .75rem; color: var(--lz2-dim, #6b7280);
    margin: 4px 0 14px;
    text-transform: uppercase; letter-spacing: .08em;
}

/* buttons */
.rb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    background: rgba(255,255,255,.06);
    color: var(--text-primary, #e7e7e7);
    border: 0; border-radius: 10px;
    font-weight: 600; font-size: .88rem;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.rb-btn:hover  { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.rb-btn:active { transform: scale(.96); }
.rb-btn-primary {
    background: linear-gradient(135deg, #c79bff, #fb923c);
    color: #fff;
    box-shadow: 0 2px 12px rgba(199,155,255,.30);
}
.rb-btn-primary:hover { box-shadow: 0 4px 18px rgba(251,146,60,.40); }
.rb-btn-ghost  { background: transparent; border: 1px solid rgba(255,255,255,.16); }
.rb-btn-danger {
    background: rgba(239,68,68,.12); color: #fca5a5;
}
.rb-btn-danger:hover { background: rgba(239,68,68,.22); }

/* hub grid */
.rb-hub-bar {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
}
.rb-hub-bar .rb-hub-meta { margin: 0; flex: 1 1 auto; min-width: 0; }
.rb-search {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    min-width: 220px;
    transition: border-color 160ms ease, background 160ms ease;
}
.rb-search:focus-within {
    border-color: rgba(199,155,255,.55);
    background: rgba(255,255,255,.06);
}
.rb-search-ico { color: var(--text-secondary, #9aa0a8); flex: 0 0 auto; }
.rb-search-input {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: 0; outline: 0;
    color: var(--text-primary, #fff);
    font-size: .9rem;
    padding: 2px 0;
}
.rb-search-input::placeholder { color: var(--text-secondary, #9aa0a8); }
.rb-no-results {
    margin-top: 18px; text-align: center;
    color: var(--text-secondary, #a3a3b3);
    font-size: .92rem;
}

.rb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.rb-card {
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 10px;
    min-height: 110px;
    padding: 16px 16px 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 220ms cubic-bezier(.22,1,.36,1), border-color 200ms ease, box-shadow 220ms ease, background 200ms ease;
}
.rb-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199,155,255,.45);
    background: rgba(255,255,255,.06);
    box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06);
}
.rb-card-title {
    font-weight: 700; font-size: 1.15rem;
    line-height: 1.25;
    color: var(--text-primary, #fff);
    /* clamp long titles to 2 lines so cards stay tidy */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.rb-card-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: .78rem; color: var(--text-secondary, #a3a3b3);
    min-width: 0;
}
.rb-card-count { font-weight: 600; color: #dcc8ff; flex: 0 0 auto; }
.rb-card-vibe {
    color: var(--text-secondary, #9aa0a8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}

/* skeleton card */
.rb-skel {
    position: relative; overflow: hidden;
    height: 110px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
}
.rb-skel-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    animation: rbShim 1.4s linear infinite;
}
@keyframes rbShim { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

/* empty hub */
.rb-empty { margin-top: 30px; }
.rb-empty-card {
    max-width: 440px; margin: 0 auto;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 28px 24px; text-align: center;
}
.rb-empty-ill { display: block; margin: 0 auto 14px; }
.rb-empty-title { margin: 0 0 6px; font-size: 1.15rem; }
.rb-empty-sub { margin: 0 0 16px; color: var(--text-secondary, #a3a3b3); font-size: .92rem; }

/* ===== board view ===== */
.rb-board { display: flex; flex-direction: column; gap: 14px; }

.rb-back {
    align-self: flex-start;
    background: transparent; color: var(--text-secondary, #a3a3b3);
    border: 0; padding: 0; font-size: .9rem; cursor: pointer;
}
.rb-back:hover { color: var(--text-primary, #fff); }

.rb-board-head {
    display: flex; flex-direction: column; gap: 6px;
    align-items: center;
    text-align: center;
    padding: 18px 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.rb-board-name-row {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}
.rb-board-name-display {
    margin: 0;
    padding: 4px 0;
    color: var(--text-heading, #fff);
    font-size: clamp(2.4rem, 5.5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    cursor: pointer;
    border-bottom: 2px dashed transparent;
    transition: border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.rb-board-name-display:hover {
    border-bottom-color: rgba(199,155,255,.45);
    transform: scale(1.01);
}
.rb-board-name-empty {
    color: var(--lz2-dim, #6b7280);
    font-style: italic;
}
.rb-board-name-edit {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    background: rgba(255,255,255,.06);
    color: var(--text-secondary, #a3a3b3);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    font-size: .78rem; font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.rb-board-name-edit:hover {
    background: rgba(199,155,255,.15);
    color: #dcc8ff;
}
.rb-board-name-edit:active { transform: scale(.96); }
.rb-board-name-input {
    flex: 1 1 360px; min-width: 0; max-width: 720px;
    background: rgba(0,0,0,.30);
    border: 1px solid rgba(199,155,255,.45);
    border-radius: 10px;
    padding: 10px 16px;
    color: var(--text-heading, #fff);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    font-family: inherit;
    text-align: center;
    outline: none;
}
.rb-board-name-input:focus {
    border-color: #c79bff;
    box-shadow: 0 0 0 3px rgba(199,155,255,.18);
}

/* Vibe-themed titles get a subtle matching glow so the gradient text reads
   even when the typeface is delicate. The data-vibe attribute is set by
   applyVibeTheme() in boards.js based on the user's vibe blurb. */
.rb-board-name-display[data-vibe],
.rb-card-title[data-vibe] {
    transition: text-shadow 200ms ease, filter 200ms ease;
    line-height: 1.18;
}
.rb-board-name-display[data-vibe="cyber"]   { filter: drop-shadow(0 0 8px rgba(34,211,238,.35)); }
.rb-board-name-display[data-vibe="gothic"]  { filter: drop-shadow(0 1px 2px rgba(239,68,68,.45)); letter-spacing: .02em; }
.rb-board-name-display[data-vibe="dark"]    { filter: drop-shadow(0 0 8px rgba(199,155,255,.40)); }
.rb-board-name-display[data-vibe="wild"]    { filter: drop-shadow(0 0 10px rgba(249,115,22,.50)); }
.rb-board-name-display[data-vibe="noble"]   { filter: drop-shadow(0 0 6px rgba(252,211,77,.45)); }
.rb-board-name-display[data-vibe="mystic"]  { filter: drop-shadow(0 0 8px rgba(192,132,252,.50)); }
.rb-board-name-display[data-vibe="cute"]    { filter: drop-shadow(0 1px 0 rgba(244,114,182,.35)); }
.rb-board-name-display[data-vibe="playful"] { filter: drop-shadow(0 1px 0 rgba(199,155,255,.40)); }
.rb-board-name-display[data-vibe="zen"]     { filter: drop-shadow(0 1px 0 rgba(120,113,108,.30)); }
.rb-board-name-display[data-vibe="romantic"]{ filter: drop-shadow(0 0 6px rgba(249,168,212,.40)); }
.rb-board-name-display[data-vibe="noir"]    { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
/* Hub-card titles get a gentler version (smaller text needs less halo) */
.rb-card-title[data-vibe] { filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.rb-board-meta {
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    font-size: .78rem; color: var(--lz2-dim, #6b7280);
}
.rb-board-author { letter-spacing: .04em; }
.rb-board-status { color: var(--lz2-dim, #6b7280); min-height: 1em; }

/* toolbar above canvas */
.rb-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    flex-wrap: wrap;
}
.rb-tb-add { font-size: .85rem; padding: 7px 12px; }
.rb-tb-hint {
    font-size: .76rem; color: var(--lz2-dim, #6b7280);
    margin-left: auto;
}
.rb-tb-hint kbd {
    background: rgba(255,255,255,.08);
    color: var(--text-secondary, #c0c0cc);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 5px;
    padding: 1px 6px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .9em;
}

/* ===== freeform canvas ===== */
.rb-canvas {
    position: relative;
    min-height: 160vh;
    width: 100%;
    background:
        radial-gradient(circle at 18% 22%, rgba(199,155,255,.06), transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(251,146,60,.05), transparent 55%),
        #07070b;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(199,155,255,.06), transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(251,146,60,.05), transparent 55%),
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: auto, auto, 24px 24px;
    background-color: #07070b;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    overflow: auto;
    cursor: default;
    transition: border-color 140ms ease, box-shadow 140ms ease;
    /* Allow tiles to overflow visually before scroll catches up */
    box-shadow: 0 1px 0 rgba(255,255,255,.02) inset;
}
.rb-canvas:focus { outline: none; border-color: rgba(199,155,255,.40); }
.rb-canvas-drop {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 2px rgba(251,146,60,.30) inset !important;
}

.rb-canvas-empty {
    position: absolute;
    inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    color: rgba(255,255,255,.30);
    pointer-events: none;
    text-align: center; padding: 20px;
}
.rb-canvas-empty-title { font-size: 1.05rem; font-weight: 700; color: rgba(255,255,255,.55); }
.rb-canvas-empty-hint  { font-size: .88rem; max-width: 420px; line-height: 1.5; }
.rb-canvas-empty strong { color: #dcc8ff; font-weight: 700; }

/* ===== freeform tile ===== */
.rb-tile {
    position: absolute;
    left: 0; top: 0;
    width: 280px;
    border-radius: 10px;
    overflow: visible;
    background: #15171c;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    user-select: none;
    touch-action: none;        /* let pointer events drive drag, not scroll */
    cursor: grab;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}
.rb-tile:hover {
    border-color: rgba(199,155,255,.45);
    box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.rb-tile.rb-tile-active {
    cursor: grabbing;
    box-shadow: 0 14px 36px rgba(0,0,0,.65), 0 0 0 2px rgba(199,155,255,.55);
}
.rb-tile.rb-tile-resizing {
    box-shadow: 0 14px 36px rgba(0,0,0,.65), 0 0 0 2px rgba(251,146,60,.65);
}
.rb-tile-img {
    display: block;
    width: 100%; height: auto;
    border-radius: 9px;
    background: #0c0d11;
    -webkit-user-drag: none;
}
/* In edit mode the img is clicks-through so the tile's drag handler fires.
   The dedicated zoom button (rb-tile-zoom) handles "view full size" in edit. */
.rb-canvas:not(.rb-canvas-readonly) .rb-tile-img { pointer-events: none; }

.rb-tile-x,
.rb-tile-zoom,
.rb-tile-src {
    position: absolute;
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,.72); color: #fff;
    cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(6px);
}
.rb-tile-x    { top: 6px; right: 6px; font-size: 16px; line-height: 1; }
.rb-tile-zoom { top: 6px; right: 38px; }
.rb-tile-src  { bottom: 6px; right: 6px; font-size: 13px; }
.rb-tile:hover .rb-tile-x,
.rb-tile:hover .rb-tile-zoom,
.rb-tile:hover .rb-tile-src,
.rb-tile.rb-tile-active .rb-tile-x,
.rb-tile.rb-tile-active .rb-tile-zoom,
.rb-tile.rb-tile-active .rb-tile-src { display: inline-flex; }
.rb-tile-x:hover    { background: #ef4444; }
.rb-tile-zoom:hover { background: rgba(199,155,255,.85); }
.rb-tile-src:hover  { background: rgba(199,155,255,.85); }

/* bottom-right resize handle */
.rb-tile-resize {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 18px; height: 18px;
    cursor: nwse-resize;
    border-radius: 4px;
    display: none;
    background:
        linear-gradient(135deg, transparent 50%, rgba(199,155,255,.65) 50%, rgba(199,155,255,.95));
    box-shadow: 0 0 0 1px rgba(0,0,0,.5);
    touch-action: none;
}
.rb-tile:hover .rb-tile-resize,
.rb-tile.rb-tile-active .rb-tile-resize,
.rb-tile.rb-tile-resizing .rb-tile-resize { display: block; }

/* footer (vibe + delete) */
.rb-board-foot {
    margin-top: 8px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 16px 18px;
}
.rb-vibe-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 700;
    color: #dcc8ff;
    margin-bottom: 8px;
    letter-spacing: .04em;
}
.rb-vibe-input {
    width: 100%; min-height: 110px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-primary, #e7e7e7);
    font-family: inherit;
    font-size: .94rem; line-height: 1.55;
    resize: vertical;
    outline: none;
    transition: border-color 140ms ease, background 140ms ease;
}
.rb-vibe-input:focus { border-color: rgba(199,155,255,.55); background: rgba(0,0,0,.35); }
.rb-vibe-input::placeholder { color: rgba(255,255,255,.25); font-style: italic; }
.rb-board-actions {
    display: flex; justify-content: flex-end; margin-top: 12px;
}

/* lightbox */
.rb-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.88);
    display: flex; align-items: center; justify-content: center;
    padding: 28px;
    cursor: zoom-out;
}
.rb-lightbox img {
    max-width: 100%; max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.rb-lightbox-close {
    position: absolute; top: 14px; right: 18px;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.08); color: #fff;
    border: 0; border-radius: 50%;
    font-size: 22px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.rb-lightbox-close:hover { background: rgba(255,255,255,.18); }

/* in-app confirm modal — used for Delete prompts so the browser's
   "<origin> says…" chrome doesn't show. */
.rb-confirm {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: rbConfirmFade 140ms ease;
}
@keyframes rbConfirmFade { from { opacity: 0 } to { opacity: 1 } }
.rb-confirm-card {
    width: 100%; max-width: 400px;
    background: #15171c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,.6);
    color: var(--text-primary, #e7e7e7);
    animation: rbConfirmPop 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rbConfirmPop {
    from { transform: translateY(8px) scale(.96); opacity: 0 }
    to   { transform: translateY(0)   scale(1);   opacity: 1 }
}
.rb-confirm-title {
    font-size: 1.08rem; font-weight: 700;
    color: var(--text-heading, #fff);
    margin-bottom: 8px;
}
.rb-confirm-body {
    color: var(--text-secondary, #a3a3b3);
    font-size: .92rem; line-height: 1.55;
    margin-bottom: 18px;
}
.rb-confirm-actions {
    display: flex; gap: 8px; justify-content: flex-end;
}
.rb-confirm-actions .rb-btn { padding: 8px 14px; font-size: .88rem; }

/* ---- Import from Pinterest ---- */
.rb-tb-pin { display: inline-flex; align-items: center; gap: 6px; }
.rb-tb-pin svg { color: #e60023; }
.rb-btn-pin {
    background: #e60023;
    border: 1px solid #e60023;
    color: #fff; font-weight: 600;
}
.rb-btn-pin:hover:not(:disabled) { background: #c8001e; border-color: #c8001e; }
.rb-btn-pin:disabled { opacity: .6; cursor: default; }

.rb-pin-card { max-width: 460px; }
.rb-pin-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
}
.rb-pin-head .rb-confirm-title { margin-bottom: 0; }
.rb-pin-input {
    width: 100%; box-sizing: border-box;
    background: #0e0f13;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    padding: 10px 12px;
    color: var(--text-primary, #e7e7e7);
    font-size: .88rem; line-height: 1.5;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    resize: vertical; min-height: 84px;
    margin-bottom: 10px;
}
.rb-pin-input:focus { outline: none; border-color: #e60023; box-shadow: 0 0 0 2px rgba(230,0,35,.25); }
.rb-pin-status {
    min-height: 18px; font-size: .84rem; margin-bottom: 12px;
    color: var(--text-secondary, #a3a3b3);
}
.rb-pin-status.rb-pin-busy { color: #fbbf24; }
.rb-pin-status.rb-pin-busy::before {
    content: ""; display: inline-block; width: 11px; height: 11px;
    margin-right: 7px; vertical-align: -1px;
    border: 2px solid rgba(251,191,36,.35); border-top-color: #fbbf24;
    border-radius: 50%; animation: rbPinSpin .7s linear infinite;
}
@keyframes rbPinSpin { to { transform: rotate(360deg) } }
.rb-pin-status.rb-pin-ok  { color: #34d399; }
.rb-pin-status.rb-pin-err { color: #f87171; }

/* ---- Find-references: full-screen Pinterest-style browser ---- */
.rb-find {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; flex-direction: column;
    background: #0f1014;
    animation: rbFindFade 160ms ease;
}
@keyframes rbFindFade { from { opacity: 0 } to { opacity: 1 } }
.rb-find[hidden] { display: none; }

/* Sticky top bar: title · search · pinterest toggle · paste · close */
.rb-find-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 22px;
    background: #14161c;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.rb-find-title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; font-size: 1.05rem; }
.rb-find-search { display: flex; gap: 8px; flex: 1 1 360px; max-width: 620px; }
.rb-find-search input {
    flex: 1; min-width: 0; box-sizing: border-box;
    background: #0b0c10; border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px; padding: 11px 18px; color: #e7e7e7; font-size: .95rem;
}
.rb-find-search input:focus { outline: none; border-color: #e60023; box-shadow: 0 0 0 3px rgba(230,0,35,.22); }
.rb-find-search .rb-btn-pin { border-radius: 999px; padding-left: 20px; padding-right: 20px; }
.rb-find-toggle {
    display: flex; align-items: center; gap: 7px;
    font-size: .85rem; color: var(--text-secondary, #c3c3cf); cursor: pointer; white-space: nowrap;
}
.rb-find-toggle input { accent-color: #e60023; width: 16px; height: 16px; }
.rb-find-paste { color: #e60023; text-decoration: none; font-size: .85rem; white-space: nowrap; }
.rb-find-paste:hover { text-decoration: underline; }
.rb-find-close {
    background: none; border: none; color: #9aa; font-size: 1.8rem; line-height: 1;
    cursor: pointer; padding: 0 4px; margin-left: auto;
}
.rb-find-close:hover { color: #fff; }

/* Scrollable masonry area */
.rb-find-results { flex: 1 1 auto; overflow-y: auto; padding: 20px 22px 60px; }
.rb-find-results.rb-find-loading { opacity: .6; }
.rb-find-cols { display: flex; align-items: flex-start; gap: 16px; }
.rb-find-col  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rb-find-empty, .rb-find-msg {
    color: var(--text-secondary, #8b8b97);
    font-size: .95rem; line-height: 1.6; padding: 60px 20px; text-align: center; max-width: 520px; margin: 0 auto;
}

/* Pinterest-style pin: full image, rounded, hover-lift + Save overlay */
.rb-find-cell {
    position: relative; display: block; width: 100%; padding: 0;
    border: none; background: #15171c; border-radius: 16px; overflow: hidden;
    cursor: zoom-in; transition: transform .12s ease, box-shadow .12s ease;
}
.rb-find-cell:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.rb-find-ph  { display: block; width: 100%; background: #0c0d11; }   /* aspect spacer — no reflow on load */
.rb-find-cell img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.rb-find-pin {
    position: absolute; top: 8px; left: 8px; font-size: .8rem; z-index: 2;
    background: rgba(0,0,0,.55); border-radius: 8px; padding: 2px 6px;
}
.rb-find-add {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: #e60023; color: #fff; font-size: .82rem; font-weight: 700;
    padding: 8px 14px; border-radius: 999px;
    opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease;
}
.rb-find-cell:hover .rb-find-add { opacity: 1; transform: translateY(0); }
.rb-find-cell.rb-find-adding { opacity: .6; }
.rb-find-cell.rb-find-added::after {
    content: "✓ Saved"; position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: rgba(16,24,20,.74); color: #34d399; font-weight: 800; font-size: 1rem;
}

/* Infinite-scroll affordances */
.rb-find-sentinel { height: 1px; }
.rb-find-spinner { text-align: center; color: #fbbf24; font-size: .9rem; padding: 22px; }
.rb-find-spinner::before {
    content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid rgba(251,191,36,.35); border-top-color: #fbbf24; border-radius: 50%;
    animation: rbPinSpin .7s linear infinite;
}
@media (max-width: 600px) {
    .rb-find-head { gap: 10px; padding: 12px 14px; }
    .rb-find-results { padding: 14px 14px 50px; }
    .rb-find-cols { gap: 10px; }
    .rb-find-col { gap: 10px; }
}

/* ============================================================
 * CCAKanvas (kanvas.php / cca-kanvas.js)
 * Browser drawing studio for Artisan / Mangaka / Comic.
 * ============================================================ */

/* ---------- PRO REDESIGN: tokens + app shell -------------- */
.ck-app {
    /* Tokens — neutral dark, Krita/Photoshop-inspired */
    --ck-bg:        #1d1d20;
    --ck-bg-elev:   #26262b;
    --ck-bg-hi:     #2e2e34;
    --ck-bg-deep:   #161619;
    --ck-bg-stage:  #1a1a1f;
    --ck-border:    #0c0c0e;
    --ck-border-soft: rgba(255,255,255,.06);
    --ck-text:      #cfcfd4;
    --ck-text-dim:  #7d7d86;
    --ck-text-hi:   #ffffff;
    --ck-accent:    #5b6cff;
    --ck-accent-2:  #4a59e0;
    --ck-accent-soft: rgba(91,108,255,.18);
    --ck-hover:     rgba(255,255,255,.05);
    --ck-active:    rgba(91,108,255,.20);
    --ck-danger:    #e25555;
    --ck-radius:    3px;
    --ck-h-menubar: 30px;
    --ck-h-options: 34px;
    --ck-h-status:  22px;
    --ck-w-toolbar: 44px;
    --ck-w-dock:    288px;

    position: relative;
    display: grid;
    grid-template-rows: var(--ck-h-menubar) var(--ck-h-options) 1fr var(--ck-h-status);
    height: calc(100vh - var(--header-h, 60px));
    background: var(--ck-bg);
    color: var(--ck-text);
    font: 12px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    overflow: hidden;
}
.ck-app * { box-sizing: border-box; }

/* MENU BAR */
.ck-menubar {
    display: flex; align-items: center; gap: 2px;
    height: var(--ck-h-menubar);
    padding: 0 8px;
    background: var(--ck-bg-elev);
    border-bottom: 1px solid var(--ck-border);
    font-size: 12px;
}
.ck-menubar-brand {
    display: inline-flex; align-items: center;
    padding: 0 8px;
    font-weight: 700; font-size: 11px;
    color: var(--ck-text-hi);
    letter-spacing: .03em;
    margin-right: 6px;
}
.ck-menubar-menu {
    height: 22px; padding: 0 8px;
    background: transparent;
    color: var(--ck-text);
    border: 0;
    border-radius: var(--ck-radius);
    cursor: pointer;
    font: inherit;
}
.ck-menubar-menu:hover, .ck-menubar-menu.is-open {
    background: var(--ck-bg-hi);
    color: var(--ck-text-hi);
}
.ck-menubar-spacer { flex: 1; }
.ck-menubar-title {
    width: 200px; max-width: 30vw;
    height: 22px;
    background: var(--ck-bg-deep); color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    padding: 0 8px;
    font: inherit;
    text-align: center;
    margin-right: 8px;
}
.ck-menubar-title:focus { outline: none; border-color: var(--ck-accent); }
.ck-menubar-status {
    font-size: 11px;
    color: var(--ck-text-dim);
    min-width: 80px; text-align: right;
    margin-right: 8px;
}
.ck-menubar-btn {
    height: 22px; padding: 0 10px;
    background: var(--ck-bg-hi); color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    font: inherit; cursor: pointer;
}
.ck-menubar-btn:hover { background: #38383f; color: var(--ck-text-hi); }
.ck-menubar-btn-primary {
    background: var(--ck-accent); color: #fff;
    border-color: var(--ck-accent-2);
}
.ck-menubar-btn-primary:hover { background: var(--ck-accent-2); }

/* Menu dropdown */
/* Note: the menu dropdown is appended at body level — outside .ck-app —
   so the --ck-* custom properties don't resolve here. Use explicit colors
   so the dropdown is opaque regardless of where it gets mounted. */
.ck-menu-dd {
    position: fixed; z-index: 10001;
    min-width: 220px;
    background: #26262b;
    border: 1px solid #0c0c0e;
    border-radius: 3px;
    box-shadow: 0 12px 28px rgba(0,0,0,.6);
    padding: 4px;
    color: #cfcfd4;
}
.ck-menu-dd[hidden] { display: none; }
.ck-menu-item {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center; gap: 8px;
    width: 100%; padding: 5px 8px;
    background: transparent; color: #cfcfd4;
    border: 0; border-radius: 3px;
    font: inherit; text-align: left; cursor: pointer;
}
.ck-menu-item:hover:not(.is-disabled) { background: rgba(91,108,255,.22); color: #ffffff; }
.ck-menu-item.is-disabled { color: #7d7d86; cursor: default; }
.ck-menu-check { font-size: 11px; color: #5b6cff; }
.ck-menu-sc    { font-size: 10px; color: #7d7d86; }
.ck-menu-sep   { height: 1px; background: rgba(255,255,255,.08); margin: 4px 6px; }

/* OPTIONS BAR */
.ck-options-bar {
    display: flex; align-items: center; gap: 10px;
    height: var(--ck-h-options);
    padding: 0 12px;
    background: var(--ck-bg);
    border-bottom: 1px solid var(--ck-border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.ck-options-bar::-webkit-scrollbar { height: 4px; }
.ck-options-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 2px; }
.ck-opt-tool-name {
    font-weight: 600;
    color: var(--ck-text-hi);
    font-size: 12px;
    min-width: 60px;
}
.ck-opt-sep { width: 1px; height: 18px; background: var(--ck-border-soft); }
.ck-opt {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ck-text-dim);
}
.ck-opt-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ck-opt input[type="range"] {
    width: 90px; accent-color: var(--ck-accent);
}
.ck-opt-val {
    min-width: 28px; text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ck-text); font-size: 11px;
}
.ck-opt-check {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--ck-text-dim); font-size: 11px; cursor: pointer;
}
.ck-opt-check input { accent-color: var(--ck-accent); }
.ck-opt-spacer { flex: 1; }
.ck-opt-btn {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    cursor: pointer;
}
.ck-opt-btn:hover { background: var(--ck-hover); color: var(--ck-text-hi); }
.ck-opt-btn.is-on { background: var(--ck-active); border-color: var(--ck-accent); color: var(--ck-text-hi); }
.ck-options-bar.is-non-paint .ck-opt:not(.ck-opt-tool-name),
.ck-options-bar.is-non-paint .ck-opt-check { opacity: .35; pointer-events: none; }

/* WORKSPACE */
.ck-workspace {
    display: grid;
    grid-template-columns: var(--ck-w-toolbar) 1fr var(--ck-w-dock);
    min-height: 0;
}

/* LEFT TOOLBAR */
.ck-toolbar {
    display: flex; flex-direction: column; align-items: center;
    gap: 1px;
    padding: 6px 4px;
    background: var(--ck-bg-elev);
    border-right: 1px solid var(--ck-border);
}
.ck-tb-tool {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ck-text);
    border: 1px solid transparent;
    border-radius: var(--ck-radius);
    cursor: pointer;
    transition: background 80ms, color 80ms, border-color 80ms;
}
.ck-tb-tool:hover { background: var(--ck-hover); color: var(--ck-text-hi); }
.ck-tb-tool.active {
    background: var(--ck-active);
    border-color: var(--ck-accent);
    color: var(--ck-text-hi);
}
.ck-tb-tool.is-on { background: var(--ck-active); color: var(--ck-text-hi); }
.ck-tb-tool.ck-tb-coming { opacity: .3; cursor: not-allowed; }
.ck-tb-tool[disabled] { opacity: .3; cursor: not-allowed; }
.ck-tb-sep { width: 24px; height: 1px; background: var(--ck-border-soft); margin: 4px 0; }
.ck-tb-spacer { flex: 1; }
.ck-tb-colors {
    position: relative;
    width: 32px; height: 32px;
    margin-top: 6px;
}
.ck-tb-color {
    position: absolute;
    width: 20px; height: 20px;
    border: 1px solid #000;
    border-radius: 1px;
    cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4);
}
.ck-tb-fg-color { left: 0;  top: 0;     z-index: 2; background: #000; }
.ck-tb-bg-color { right: 0; bottom: 0;  z-index: 1; background: #fff; }
.ck-tb-color-swap {
    position: absolute; right: -2px; top: -2px;
    width: 12px; height: 12px;
    background: transparent; color: var(--ck-text-dim);
    border: 0; padding: 0; cursor: pointer;
    z-index: 3;
}
.ck-tb-color-swap:hover { color: var(--ck-text-hi); }

/* STAGE — overrides legacy gradient with neutral checkerboard backdrop */
.ck-app .ck-stage {
    position: relative;
    overflow: hidden;
    background:
        repeating-conic-gradient(#171719 0% 25%, #1a1a1c 0% 50%) 0 0/24px 24px,
        var(--ck-bg-stage);
}
.ck-app .ck-canvas-wrap {
    position: absolute; left: 0; top: 0;
    transform-origin: 0 0;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 8px 28px rgba(0,0,0,.45);
    border-radius: 0;
}

/* DOCK */
.ck-dock {
    display: flex; flex-direction: column;
    background: var(--ck-bg-elev);
    border-left: 1px solid var(--ck-border);
    overflow-y: auto;
    scrollbar-width: thin;
}
.ck-dock::-webkit-scrollbar { width: 6px; }
.ck-dock::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 3px; }

.ck-app .ck-panel {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ck-border);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.ck-app .ck-panel-head {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center; gap: 6px;
    height: 26px; padding: 0 8px 0 6px;
    background: var(--ck-bg);
    border-bottom: 1px solid var(--ck-border);
    cursor: default;
}
.ck-app .ck-panel-head h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ck-text-dim);
}
.ck-panel-collapse {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ck-text-dim);
    border: 0; padding: 0; cursor: pointer;
    transition: transform 120ms ease;
}
.ck-panel-collapse:hover { color: var(--ck-text-hi); }
.ck-panel.is-collapsed .ck-panel-collapse { transform: rotate(-90deg); }
.ck-panel.is-collapsed .ck-panel-body { display: none; }
.ck-panel-actions { display: inline-flex; gap: 2px; }
.ck-panel-body {
    padding: 8px;
    background: var(--ck-bg-elev);
}

/* mini buttons inside panels */
.ck-app .ck-mini-btn {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ck-text-dim);
    border: 1px solid transparent;
    border-radius: var(--ck-radius);
    cursor: pointer;
    font-size: 11px;
}
.ck-app .ck-mini-btn:hover { background: var(--ck-hover); color: var(--ck-text-hi); }

/* COLOR PANEL */
.ck-app .ck-color-wheel-wrap {
    position: relative;
    width: 180px; height: 180px;
    margin: 0 auto 8px;
}
.ck-color-sliders {
    display: flex; flex-direction: column; gap: 3px;
    margin-bottom: 8px;
    padding: 6px 4px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
}
.ck-cs-row {
    display: grid;
    grid-template-columns: 14px 1fr 30px;
    align-items: center; gap: 6px;
    font-size: 11px;
}
.ck-cs-row label { color: var(--ck-text-dim); font-weight: 600; text-align: center; }
.ck-cs-row input[type="range"] { width: 100%; accent-color: var(--ck-accent); }
.ck-cs-val { font-variant-numeric: tabular-nums; text-align: right; color: var(--ck-text); }
.ck-color-hex-row {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 8px;
    padding: 0 2px;
    color: var(--ck-text-dim);
}
.ck-app .ck-hex-input {
    flex: 1;
    height: 22px;
    background: var(--ck-bg-deep); color: var(--ck-text-hi);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    padding: 0 6px;
    font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ck-color-subhead {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ck-text-dim);
    margin: 4px 0 4px;
}
.ck-palette-select {
    height: 18px;
    background: var(--ck-bg); color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    font: 10px/1 inherit;
    padding: 0 4px;
}
.ck-palette {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
    margin-bottom: 4px;
}
.ck-palette-swatch {
    width: 100%; aspect-ratio: 1;
    border: 1px solid rgba(0,0,0,.4);
    border-radius: 1px;
    cursor: pointer; padding: 0;
}
.ck-palette-swatch:hover { transform: scale(1.06); border-color: var(--ck-accent); }

.ck-app .ck-recent-colors {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
    margin: 0 0 4px;
}
.ck-app .ck-recent-swatch {
    width: 100%; aspect-ratio: 1;
    border-radius: 1px;
    border: 1px solid rgba(0,0,0,.4);
    cursor: pointer; padding: 0;
}
.ck-app .ck-recent-swatch:hover { transform: scale(1.06); border-color: var(--ck-accent); }

/* BRUSH PANEL */
.ck-brush-search {
    width: 100%; height: 22px;
    background: var(--ck-bg-deep); color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    padding: 0 8px;
    font: inherit;
    margin-bottom: 6px;
}
.ck-brush-search:focus { outline: none; border-color: var(--ck-accent); }
.ck-brush-cats {
    display: flex; flex-wrap: wrap; gap: 2px;
    margin-bottom: 8px;
}
.ck-brush-cats button {
    flex: 1 0 auto;
    min-width: 32px;
    height: 20px; padding: 0 6px;
    background: transparent; color: var(--ck-text-dim);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    font: 10px/1 inherit;
    text-transform: uppercase; letter-spacing: .04em;
    cursor: pointer;
}
.ck-brush-cats button:hover { background: var(--ck-hover); color: var(--ck-text-hi); }
.ck-brush-cats button.active {
    background: var(--ck-active);
    color: var(--ck-text-hi);
    border-color: var(--ck-accent);
}
.ck-brush-grid {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 280px; overflow-y: auto;
    scrollbar-width: thin;
}
.ck-brush-grid::-webkit-scrollbar { width: 4px; }
.ck-brush-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 2px; }
.ck-brush-card {
    display: grid;
    grid-template-columns: 1fr 16px;
    align-items: center; gap: 4px;
    padding: 4px 6px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    cursor: pointer;
    transition: background 80ms, border-color 80ms;
}
.ck-brush-card:hover { background: var(--ck-bg-hi); border-color: rgba(255,255,255,.10); }
.ck-brush-card.is-active {
    background: var(--ck-active);
    border-color: var(--ck-accent);
}
.ck-brush-card-info { display: contents; }
.ck-brush-preview {
    grid-column: 1; grid-row: 1;
    width: 100%; height: 28px;
    border-radius: 1px;
    background: var(--ck-bg-deep);
    image-rendering: auto;
}
.ck-brush-name {
    grid-column: 1; grid-row: 2;
    font-size: 11px;
    color: var(--ck-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-brush-fav {
    grid-column: 2; grid-row: 1 / span 2;
    width: 16px; height: 16px;
    background: transparent;
    color: rgba(255,255,255,.18);
    border: 0; padding: 0;
    font-size: 13px; line-height: 1;
    cursor: pointer; align-self: center;
}
.ck-brush-fav.is-on { color: #fbbf24; }
.ck-brush-fav:hover { color: var(--ck-text-hi); }

/* LAYERS panel — re-style for new dock */
.ck-app .ck-layers {
    max-height: 340px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    scrollbar-width: thin;
}
.ck-app .ck-layer {
    display: grid;
    grid-template-columns: 18px 38px 1fr;
    gap: 5px;
    padding: 4px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
}
.ck-app .ck-layer:hover { background: var(--ck-bg-hi); }
.ck-app .ck-layer-active {
    background: var(--ck-active) !important;
    border-color: var(--ck-accent) !important;
    box-shadow: none;
}
.ck-app .ck-layer-thumb {
    width: 38px; height: 28px;
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 1px;
}
.ck-app .ck-layer-name {
    font-size: 11px; font-weight: 500;
    color: var(--ck-text);
}
.ck-app .ck-layer-blend {
    height: 18px;
    background: var(--ck-bg-deep); color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    font: 10px/1 inherit;
    padding: 0 16px 0 4px;
}
.ck-app .ck-layer-icon-btn {
    width: 18px; height: 18px;
    border-radius: var(--ck-radius);
    color: var(--ck-text-dim);
}
.ck-app .ck-layer-icon-btn.is-on {
    background: var(--ck-active);
    border-color: var(--ck-accent);
    color: var(--ck-text-hi);
}

/* NAVIGATOR */
.ck-nav-wrap {
    width: 100%;
    background: var(--ck-bg-deep);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    padding: 4px;
    display: flex; justify-content: center;
}
#ckNav {
    width: 100%;
    max-width: 240px;
    height: auto;
    cursor: crosshair;
    image-rendering: auto;
}
.ck-nav-zoom {
    display: flex; align-items: center; gap: 4px;
    margin-top: 4px;
    justify-content: center;
}
.ck-nav-zoom-val {
    font-size: 11px;
    color: var(--ck-text);
    font-variant-numeric: tabular-nums;
    min-width: 44px; text-align: center;
}

/* HISTORY */
.ck-history-list {
    display: flex; flex-direction: column; gap: 1px;
    max-height: 220px; overflow-y: auto;
    scrollbar-width: thin;
}
.ck-hist-row {
    display: flex; align-items: center;
    height: 22px; padding: 0 8px;
    background: transparent; color: var(--ck-text);
    border: 0;
    text-align: left;
    font: 11px/1 inherit;
    cursor: pointer;
}
.ck-hist-row:hover { background: var(--ck-hover); }
.ck-hist-row.is-active {
    background: var(--ck-active);
    color: var(--ck-text-hi);
    font-weight: 600;
}
.ck-hist-row.is-future { color: var(--ck-text-dim); }

/* MY DRAWINGS — keep but tweak */
.ck-app .ck-works {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 260px; overflow-y: auto;
}
.ck-app .ck-work {
    display: grid; grid-template-columns: 48px 1fr; gap: 6px;
    padding: 4px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
}
.ck-app .ck-work:hover { background: var(--ck-bg-hi); }
.ck-app .ck-work-active { border-color: var(--ck-accent) !important; }
.ck-app .ck-work-thumb { width: 48px; height: 36px; }
.ck-app .ck-work-title { font-size: 11px; color: var(--ck-text); }
.ck-app .ck-work-meta  { font-size: 10px; color: var(--ck-text-dim); }
.ck-app .ck-works-empty { color: var(--ck-text-dim); font-size: 11px; padding: 8px; text-align: center; }

/* STATUS BAR */
.ck-statusbar {
    display: flex; align-items: center; gap: 8px;
    height: var(--ck-h-status);
    padding: 0 10px;
    background: var(--ck-bg-elev);
    border-top: 1px solid var(--ck-border);
    font-size: 11px;
    color: var(--ck-text-dim);
}
.ck-st-tool   { color: var(--ck-text-hi); font-weight: 600; }
.ck-st-sep    { color: var(--ck-text-dim); opacity: .5; }
.ck-st-info   { color: var(--ck-text); }
.ck-st-coord  { font-variant-numeric: tabular-nums; min-width: 100px; text-align: right; }
.ck-st-spacer { flex: 1; }
.ck-st-btn {
    height: 18px; padding: 0 8px;
    background: transparent; color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    cursor: pointer;
    font: inherit;
}
.ck-st-btn:hover { background: var(--ck-hover); color: var(--ck-text-hi); }

/* Reference button + drawer — re-tint for new theme */
.ck-app .ck-ref-toggle {
    background: rgba(91,108,255,.18);
    color: var(--ck-text-hi);
    border: 1px solid rgba(91,108,255,.40);
    border-right: 0;
    font-size: 10px;
    letter-spacing: .08em;
}

/* Toasts inside the app stay above panels */
.ck-app .toast-container { z-index: 10010; }

/* ---------- floating / pin / drag-rearrange dock ------------------ */

.ck-panel-head { cursor: grab; user-select: none; }
.ck-panel-head:active { cursor: grabbing; }
.ck-panel-head h3 { pointer-events: none; }
.ck-panel-head .ck-panel-actions button { cursor: pointer; }
.ck-panel-pin, .ck-panel-float {
    width: 18px; height: 18px;
    background: transparent;
    color: var(--ck-text-dim);
    border: 1px solid transparent;
    border-radius: var(--ck-radius);
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.ck-panel-pin:hover, .ck-panel-float:hover { background: var(--ck-hover); color: var(--ck-text-hi); }
.ck-panel-pin.is-on {
    color: var(--ck-accent);
    background: var(--ck-active);
    border-color: var(--ck-accent);
}

.ck-floats { position: absolute; left: 0; top: 0; pointer-events: none; }
.ck-panel.is-floating {
    pointer-events: auto;
    position: fixed;
    z-index: 9000;
    min-width: 220px;
    min-height: 80px;
    background: var(--ck-bg-elev);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.4);
    display: flex; flex-direction: column;
}
.ck-panel.is-floating .ck-panel-head { background: var(--ck-bg-hi); border-bottom: 1px solid var(--ck-border-soft); }
.ck-panel.is-floating .ck-panel-body { flex: 1 1 auto; overflow: auto; }
.ck-panel-resize {
    position: absolute; right: 0; bottom: 0;
    width: 14px; height: 14px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 50%, var(--ck-text-dim) 50%, var(--ck-text-dim) 60%, transparent 60%, transparent 75%, var(--ck-text-dim) 75%, var(--ck-text-dim) 85%, transparent 85%);
    opacity: .6;
}

.ck-drop-indicator {
    position: fixed;
    z-index: 9100;
    height: 3px;
    background: var(--ck-accent);
    box-shadow: 0 0 6px var(--ck-accent);
    pointer-events: none;
    border-radius: 2px;
}

/* Auto-hide pin: panel collapses on pointer-leave when unpinned, expands
   while hovered. Pinned (.is-pinned) panels never auto-collapse. */
.ck-panel.is-autohide:not(.is-pinned):not(:hover):not(.is-floating) .ck-panel-body {
    display: none;
}
.ck-panel.is-autohide:not(.is-pinned) .ck-panel-head h3::after {
    content: " ▾";
    color: var(--ck-text-dim);
    font-size: 9px;
}

/* ---------- new tool options (text + shape) ----------------------- */

.ck-opt-select {
    height: 20px;
    background: var(--ck-bg-deep); color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    padding: 0 4px; font: 11px/1 inherit;
}
.ck-opt-num {
    width: 56px; height: 20px;
    background: var(--ck-bg-deep); color: var(--ck-text);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    padding: 0 4px; font: 11px/1 inherit;
    text-align: right; font-variant-numeric: tabular-nums;
}

/* By default text+shape extras are hidden — JS reveals them per active tool. */
.ck-opt-text, .ck-opt-shape { display: none; }
.ck-app[data-active-tool="text"] .ck-opt-text { display: inline-flex; }
.ck-app[data-active-tool="shape-rect"] .ck-opt-shape,
.ck-app[data-active-tool="shape-ellipse"] .ck-opt-shape { display: inline-flex; }

/* When a selection / move / text / shape tool is active, the paint sliders
   are dimmed so the bar doesn't look stale. */
.ck-app[data-active-tool="move"] .ck-opt:not(.ck-opt-tool-name),
.ck-app[data-active-tool="rect-select"] .ck-opt:not(.ck-opt-tool-name),
.ck-app[data-active-tool="lasso"] .ck-opt:not(.ck-opt-tool-name),
.ck-app[data-active-tool="hand"] .ck-opt:not(.ck-opt-tool-name) { opacity: .35; pointer-events: none; }

/* ---------- brush editor modal ------------------------------------ */

.ck-brush-editor {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 10020;
    display: flex; align-items: center; justify-content: center;
}
.ck-brush-editor-card {
    background: var(--ck-bg-elev);
    border: 1px solid var(--ck-border-soft);
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    width: min(560px, 92vw);
    max-height: 90vh;
    display: flex; flex-direction: column;
}
.ck-brush-editor-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ck-border-soft);
}
.ck-brush-editor-title { font-size: 14px; color: var(--ck-text-hi); margin: 0; }
.ck-brush-editor-body { padding: 14px; overflow-y: auto; }
.ck-be-row {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    align-items: center; gap: 8px;
    margin-bottom: 8px;
    font-size: 12px; color: var(--ck-text-dim);
}
.ck-be-lbl { color: var(--ck-text-dim); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.ck-be-input {
    height: 24px;
    background: var(--ck-bg-deep); color: var(--ck-text-hi);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    padding: 0 6px; font: 12px/1 inherit;
}
.ck-be-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ck-text); }
.ck-be-curves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ck-be-curve {
    background: var(--ck-bg);
    border: 1px solid var(--ck-border-soft);
    border-radius: var(--ck-radius);
    padding: 8px;
}
.ck-be-curve-lbl { font-size: 10px; color: var(--ck-text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.ck-be-curve canvas { display: block; width: 100%; height: 120px; background: var(--ck-bg-deep); border-radius: 2px; cursor: crosshair; }
.ck-be-curves-hint { color: var(--ck-text-dim); font-size: 10px; margin-top: 8px; }
.ck-be-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 10px 14px; border-top: 1px solid var(--ck-border-soft);
}

/* ---------- selection marching ants on overlay --------------------- */
.ck-selection-active .ck-canvas-wrap { cursor: crosshair; }

/* ---------- report-a-problem modal --------------------------------- */
.ck-report {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 10025;
    display: flex; align-items: center; justify-content: center;
}
.ck-report-card {
    background: #26262b;
    border: 1px solid #0c0c0e;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    width: min(520px, 92vw);
    color: #cfcfd4;
    display: flex; flex-direction: column;
}
.ck-report-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ck-report-title { font-size: 14px; color: #ffffff; margin: 0; }
.ck-report-body { padding: 14px; }
.ck-report-hint { color: #7d7d86; font-size: 12px; margin: 0 0 10px; }
.ck-report-row  { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #7d7d86; }
.ck-report-lbl  { text-transform: uppercase; letter-spacing: .04em; }
.ck-report-row textarea {
    width: 100%;
    background: #161619; color: #ffffff;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 3px;
    padding: 8px 10px;
    font: 12px/1.45 inherit;
    resize: vertical;
}
.ck-report-row textarea:focus { outline: none; border-color: #5b6cff; }
.ck-report-check {
    flex-direction: row; align-items: center; gap: 6px;
    margin-top: 8px;
    color: #cfcfd4; font-size: 12px;
}
.ck-report-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ---------- END PRO REDESIGN ---------------------------- */

.ck-body { background: #06060b; color: #e7e7e7; overflow: hidden; }
.ck { display: flex; flex-direction: column; height: calc(100vh - var(--header-h, 60px)); padding: 0; }

.ck-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 18px;
    background: rgba(15,15,22,.85);
    border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
    flex: 0 0 auto;
}
.ck-hero-left  { display: flex; flex-direction: column; line-height: 1; }
.ck-hero-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-eyebrow {
    font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
    color: #dcc8ff;
}
.ck-title {
    margin: 4px 0 0; font-size: 1.15rem; font-weight: 800;
    color: #fff; line-height: 1;
}
.ck-title-grad {
    background: linear-gradient(90deg, #c79bff, #fb923c);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ck-title-input {
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 7px 12px;
    color: #e7e7e7; font-size: .9rem; font-family: inherit;
    width: 240px;
    outline: none;
}
.ck-title-input:focus { border-color: rgba(199,155,255,.55); }

.ck-size-select {
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 7px 8px;
    color: #e7e7e7; font-size: .82rem; font-family: inherit;
    outline: none; cursor: pointer;
}
.ck-size-select:focus { border-color: rgba(199,155,255,.55); }

.ck-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: rgba(255,255,255,.06); color: #e7e7e7;
    border: 0; border-radius: 8px;
    font-weight: 600; font-size: .82rem; cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.ck-btn:hover  { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.ck-btn:active { transform: scale(.96); }
.ck-btn-primary {
    background: linear-gradient(135deg, #c79bff, #fb923c); color: #fff;
    box-shadow: 0 2px 10px rgba(199,155,255,.30);
}
.ck-btn-ghost  { background: transparent; border: 1px solid rgba(255,255,255,.10); }
.ck-btn-danger { background: rgba(239,68,68,.15); color: #fca5a5; }
.ck-btn-danger:hover { background: rgba(239,68,68,.28); }

/* main 3-column layout: tools | stage | side */
.ck-main {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 1024px) {
    .ck-main { grid-template-columns: 200px 1fr; }
    .ck-side { display: none; }
}
@media (max-width: 720px) {
    .ck-main { grid-template-columns: 64px 1fr; }
    .ck-tools { padding: 8px 4px; }
    .ck-tools .ck-slider, .ck-tools .ck-check { display: none; }
}

/* TOOLS palette */
.ck-tools {
    background: #0c0c14;
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 14px 12px;
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto;
}
.ck-tool-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.ck-tool {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 38px;
    background: rgba(255,255,255,.04); color: #c0c0cc;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px; cursor: pointer;
    font-weight: 600; font-size: .9rem;
    transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.ck-tool:hover  { background: rgba(199,155,255,.12); color: #fff; }
.ck-tool.active {
    background: linear-gradient(135deg, #c79bff, #fb923c);
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px rgba(199,155,255,.35);
}
.ck-tool.is-on {
    background: rgba(199,155,255,.18);
    color: #fff;
    border-color: rgba(199,155,255,.55);
}
.ck-sep { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }

.ck-color-wrap {
    position: relative; display: block; height: 42px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.10); cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.30);
}
.ck-color-swatch {
    display: block; width: 100%; height: 100%;
    background: #000;
    border: 0; cursor: pointer; padding: 0;
    transition: filter 120ms ease;
}
.ck-color-wrap:hover .ck-color-swatch { filter: brightness(.92); }
.ck-recent-colors {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
    margin-top: 2px;
}
.ck-recent-swatch {
    width: 100%; aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.10);
    cursor: pointer;
    padding: 0;
    transition: transform 80ms ease, border-color 120ms ease;
}
.ck-recent-swatch:hover { transform: scale(1.08); border-color: rgba(199,155,255,.60); }

.ck-slider {
    display: grid;
    grid-template-columns: 60px 1fr 32px;
    align-items: center; gap: 6px;
}
.ck-slider-label { font-size: .72rem; color: #8b8b9a; text-transform: uppercase; letter-spacing: .04em; }
.ck-slider input[type="range"] { width: 100%; accent-color: #c79bff; }
.ck-slider-val { font-size: .78rem; color: #c0c0cc; text-align: right; font-variant-numeric: tabular-nums; }

.ck-check {
    display: flex; align-items: center; gap: 8px;
    color: #c0c0cc; font-size: .82rem; cursor: pointer;
}
.ck-check input { accent-color: #c79bff; }

.ck-zoom {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px;
}
.ck-zoom .ck-tool { font-size: 1rem; padding: 0; }
.ck-zoom-val {
    grid-column: span 2;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; color: #c0c0cc; font-variant-numeric: tabular-nums;
}

/* STAGE — the canvas viewport */
.ck-stage {
    position: relative;
    background:
        linear-gradient(135deg, #07070b, #0a0a14);
    overflow: hidden;
    cursor: default;
}
.ck-canvas-wrap {
    position: absolute; left: 0; top: 0;
    transform-origin: 0 0;
    box-shadow: 0 18px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.18);
    background: #ffffff;
    border-radius: 4px;
}
#ckCanvas, #ckOverlay {
    display: block;
    /* Force the highest-quality resampling when the canvas is CSS-scaled.
       Browsers default to bilinear for canvases; "high-quality" upgrades to
       bicubic/lanczos on Chrome and Safari which keeps strokes silky on big
       canvases viewed at fit-zoom. */
    image-rendering: auto;
    image-rendering: smooth;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
}
#ckOverlay {
    position: absolute; left: 0; top: 0;
    pointer-events: none;
}
.ck-stage-foot {
    position: absolute; bottom: 8px; left: 0; right: 0;
    display: flex; justify-content: center; align-items: center; gap: 16px;
    font-size: .72rem; color: rgba(255,255,255,.45);
    pointer-events: none;
}

/* SIDE panel — layers + works */
.ck-side {
    background: #0c0c14;
    border-left: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column;
    min-height: 0;
}
.ck-panel {
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 10px 12px;
    display: flex; flex-direction: column;
    min-height: 0;
}
.ck-panel:last-child { flex: 1 1 auto; overflow: hidden; }
.ck-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.ck-panel-head h3 {
    margin: 0; font-size: .82rem; font-weight: 700;
    color: #c0c0cc; letter-spacing: .04em; text-transform: uppercase;
}
.ck-mini-btn {
    background: rgba(255,255,255,.06); color: #c0c0cc;
    border: 0; border-radius: 6px; cursor: pointer;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700;
}
.ck-mini-btn:hover { background: rgba(199,155,255,.20); color: #fff; }

/* Layers list */
.ck-layers { display: flex; flex-direction: column; gap: 3px; max-height: 50vh; overflow-y: auto; padding: 2px 0; }
.ck-layer {
    display: grid;
    grid-template-columns: 20px 44px 1fr;
    align-items: stretch; gap: 6px;
    padding: 6px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.ck-layer:hover { background: rgba(255,255,255,.05); }
.ck-layer-active {
    background: rgba(199,155,255,.12) !important;
    border-color: rgba(199,155,255,.50) !important;
    box-shadow: inset 0 0 0 1px rgba(199,155,255,.20);
}
.ck-layer.is-dragging  { opacity: .5; }
.ck-layer.is-drop-target { outline: 2px dashed rgba(199,155,255,.65); outline-offset: -2px; }
.ck-layer-vis {
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: #c0c0cc;
    border: 0; cursor: pointer;
    border-radius: 4px;
}
.ck-layer-vis:hover { background: rgba(255,255,255,.08); color: #fff; }
.ck-layer-thumb {
    width: 44px; height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.10);
    background: #15171c;
    image-rendering: auto;
    display: block;
    align-self: center;
}
.ck-layer-body {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.ck-layer-top {
    display: grid; grid-template-columns: 1fr auto auto; gap: 4px; align-items: center;
}
.ck-layer-mid {
    display: grid;
    grid-template-columns: 1fr 60px auto auto;
    gap: 4px; align-items: center;
}
.ck-layer-name {
    background: transparent; border: 0; padding: 2px 4px;
    color: #e7e7e7; font-size: .82rem; font-weight: 600; font-family: inherit;
    min-width: 0; outline: none;
    border-bottom: 1px dashed transparent;
}
.ck-layer-name:hover { border-bottom-color: rgba(199,155,255,.35); }
.ck-layer-name:focus { border-bottom-color: #c79bff; }
.ck-layer-opacity { width: 100%; accent-color: #c79bff; }
.ck-layer-blend {
    appearance: none;
    background: rgba(255,255,255,.05); color: #e7e7e7;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 5px;
    padding: 3px 18px 3px 6px;
    font-size: .72rem; font-family: inherit;
    min-width: 0; cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #a3a3b3 50%),
        linear-gradient(135deg, #a3a3b3 50%, transparent 50%);
    background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}
.ck-layer-blend:focus { outline: none; border-color: rgba(199,155,255,.60); }
.ck-layer-icon-btn {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #8b8b9a;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.ck-layer-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.ck-layer-icon-btn.is-on {
    background: rgba(199,155,255,.18); color: #fff;
    border-color: rgba(199,155,255,.55);
}
.ck-layer-icon-danger:hover { background: rgba(239,68,68,.25); color: #fff; }

/* My drawings list */
.ck-works {
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto;
    flex: 1 1 auto; min-height: 0;
}
.ck-works-empty { color: #6b7280; font-size: .82rem; padding: 14px 4px; font-style: italic; text-align: center; }
.ck-work {
    position: relative;
    display: grid; grid-template-columns: 56px 1fr; gap: 8px;
    padding: 6px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.ck-work:hover { background: rgba(255,255,255,.06); border-color: rgba(199,155,255,.30); }
.ck-work-active { border-color: rgba(199,155,255,.55) !important; background: rgba(199,155,255,.08) !important; }
.ck-work-thumb {
    width: 56px; height: 42px; object-fit: cover;
    background: #15171c; border-radius: 4px; display: block;
}
.ck-work-thumb-empty { background: linear-gradient(135deg, #15171c, #0e0e15); }
.ck-work-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ck-work-title {
    font-size: .85rem; font-weight: 600; color: #e7e7e7;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-work-meta { font-size: .68rem; color: #6b7280; }
.ck-work-del {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px;
    background: rgba(0,0,0,.65); color: #fff;
    border: 0; border-radius: 50%;
    cursor: pointer; font-size: 13px; line-height: 1;
    display: none; align-items: center; justify-content: center;
}
.ck-work:hover .ck-work-del { display: inline-flex; }
.ck-work-del:hover { background: #ef4444; }

.ck-save-status, .ck-canvas-info { padding: 4px 10px; background: rgba(0,0,0,.45); border-radius: 6px; }

/* Confirm modal — same shape as boards */
.ck-confirm {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ck-confirm-card {
    width: 100%; max-width: 400px;
    background: #15171c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,.6);
    color: #e7e7e7;
}
.ck-confirm-title { font-size: 1.08rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ck-confirm-body  { color: #a3a3b3; font-size: .92rem; line-height: 1.55; margin-bottom: 18px; }
.ck-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ck-confirm-actions .ck-btn { padding: 8px 14px; font-size: .88rem; }

/* Initial canvas-size picker (kanvas.php) */
.ck-size-picker {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ck-size-picker-card {
    width: 100%; max-width: 720px;
    background: #15171c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 24px 64px rgba(0,0,0,.7);
    color: #e7e7e7;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.ck-size-picker-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 18px;
}
.ck-size-picker-eyebrow {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: #c79bff; font-weight: 700; margin-bottom: 4px;
}
.ck-size-picker-title {
    font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0;
}
.ck-size-picker-close {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    color: #a3a3b3; width: 32px; height: 32px; border-radius: 8px;
    font-size: 1.2rem; cursor: pointer; line-height: 1;
    transition: background 120ms ease, color 120ms ease;
}
.ck-size-picker-close:hover { background: rgba(255,255,255,.12); color: #fff; }

.ck-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.ck-size-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 10px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    color: #e7e7e7;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.ck-size-card:hover {
    background: rgba(199,155,255,.10);
    border-color: rgba(199,155,255,.50);
    transform: translateY(-1px);
}
.ck-size-card.is-active {
    background: rgba(199,155,255,.16);
    border-color: rgba(199,155,255,.70);
}
.ck-size-thumb {
    display: block;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 4px;
}
.ck-size-name {
    font-size: .88rem; font-weight: 600; color: #fff; margin-top: 4px;
}
.ck-size-dim {
    font-size: .72rem; color: #a3a3b3; letter-spacing: .02em;
}

.ck-size-custom {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    margin-bottom: 14px;
}
.ck-size-custom-label {
    font-size: .82rem; font-weight: 600; color: #fff;
    margin-right: 4px;
}
.ck-size-custom-input {
    width: 88px; padding: 7px 10px;
    background: #0a0b10; color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    font-size: .88rem;
    font-family: inherit;
}
.ck-size-custom-input:focus { outline: none; border-color: rgba(199,155,255,.60); }
.ck-size-x { color: #a3a3b3; font-size: .9rem; }
.ck-size-custom-unit { color: #a3a3b3; font-size: .78rem; }
.ck-size-custom-go { margin-left: auto; padding: 8px 14px; font-size: .82rem; }

.ck-size-picker-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.ck-size-remember {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .82rem; color: #a3a3b3; cursor: pointer; user-select: none;
}
.ck-size-remember input { accent-color: #c79bff; }

@media (max-width: 520px) {
    .ck-size-picker-card { padding: 18px; }
    .ck-size-grid { grid-template-columns: repeat(2, 1fr); }
    .ck-size-custom-go { margin-left: 0; width: 100%; }
}

/* ============================================================
   CCAKanvas — pro upgrade: brush presets, color picker popover,
   shortcuts modal, polish.
   ============================================================ */

/* Preset chips bar (sits between the hero and the workspace) */
.ck-presets-bar {
    display: flex; gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(180deg, rgba(14,15,22,.92), rgba(10,11,18,.92));
    border-bottom: 1px solid rgba(255,255,255,.05);
    overflow-x: auto;
    scrollbar-width: thin;
    flex-wrap: nowrap;
}
.ck-presets-bar::-webkit-scrollbar { height: 6px; }
.ck-presets-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 4px; }
.ck-preset {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px;
    background: rgba(255,255,255,.04);
    color: #c0c0cc;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 9px;
    font-size: .78rem; font-weight: 600; font-family: inherit;
    white-space: nowrap; cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.ck-preset:hover {
    background: rgba(199,155,255,.10);
    border-color: rgba(199,155,255,.40);
    color: #fff;
    transform: translateY(-1px);
}
.ck-preset.is-active {
    background: linear-gradient(135deg, rgba(199,155,255,.30), rgba(251,146,60,.28));
    border-color: rgba(199,155,255,.65);
    color: #fff;
    box-shadow: 0 4px 14px rgba(199,155,255,.30);
}
.ck-preset-icon {
    font-size: 1rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
}
.ck-preset-name { letter-spacing: .01em; }

/* Color picker popover */
.ck-color-pop {
    position: fixed;
    left: 80px;
    top: 200px;
    z-index: 9000;
    background: #121319;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,.6);
    padding: 12px;
    width: 200px;
}
.ck-color-pop[hidden] { display: none; }
.ck-color-pop-row { display: flex; align-items: center; justify-content: center; }
.ck-color-pop-row + .ck-color-pop-row { margin-top: 10px; }
.ck-color-pop-row-tight { gap: 6px; }
.ck-color-wheel-wrap {
    position: relative;
    width: 180px; height: 180px;
}
#ckColorWheel {
    width: 180px; height: 180px;
    display: block; cursor: crosshair;
    touch-action: none;
}
.ck-color-sv {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    cursor: crosshair;
    touch-action: none;
}
.ck-hex-input {
    flex: 1;
    background: #0a0b10; color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit; font-size: .82rem;
    text-align: center; letter-spacing: .04em;
    text-transform: uppercase;
}
.ck-hex-input:focus { outline: none; border-color: rgba(199,155,255,.60); }

/* Keyboard shortcuts modal */
.ck-shortcuts {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ck-shortcuts[hidden] { display: none; }
.ck-shortcuts-card {
    width: 100%; max-width: 720px;
    background: #15171c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 24px 64px rgba(0,0,0,.7);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.ck-shortcuts-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.ck-shortcuts-title { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0; }
.ck-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px 22px;
}
.ck-shortcuts-group h4 {
    color: #c79bff;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    margin: 0 0 6px;
}
.ck-sc {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
    font-size: .82rem; color: #c0c0cc;
}
.ck-sc kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 1px 6px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .72rem; color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.ck-sc span { flex: 1; }


.ck-ref-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 10px 8px 12px;
    background: rgba(199,155,255,.22);
    color: #fff;
    border: 1px solid rgba(199,155,255,.50);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: -4px 0 16px rgba(0,0,0,.35);
    transition: background 120ms ease, right 200ms ease;
}
.ck-ref-toggle:hover { background: rgba(199,155,255,.36); }

.ck-ref-panel {
    position: absolute;
    top: 16px; right: 56px;
    width: 280px; height: 380px;
    z-index: 3;
    background: rgba(12,12,20,.95);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    display: flex; flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,.55);
    overflow: hidden;
}
.ck-ref-panel[hidden] { display: none; }

.ck-ref-head {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px;
    background: rgba(199,155,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor: move;
    user-select: none;
    touch-action: none;
    flex: 0 0 auto;
}
.ck-ref-grip {
    color: rgba(255,255,255,.35);
    font-size: .9rem; line-height: 1;
    cursor: move; padding-right: 2px;
}

.ck-ref-resize {
    position: absolute; bottom: 0; right: 0;
    width: 18px; height: 18px;
    cursor: se-resize;
    touch-action: none;
    background: linear-gradient(135deg, transparent 50%, rgba(199,155,255,.55) 50%);
}
.ck-ref-select {
    flex: 1 1 auto;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 6px 8px;
    color: #e7e7e7;
    font-size: .82rem;
    font-family: inherit;
    outline: none;
    min-width: 0;
}
.ck-ref-select:focus { border-color: rgba(199,155,255,.55); }

.ck-ref-body {
    flex: 1 1 auto; overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    align-content: start;
}
.ck-ref-empty {
    grid-column: 1 / -1;
    color: #8b8b9a; font-size: .82rem; padding: 22px 8px;
    font-style: italic; text-align: center; line-height: 1.5;
}
.ck-ref-empty a { color: #dcc8ff; text-decoration: underline; }

.ck-ref-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #15171c;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 6px;
    overflow: hidden;
    cursor: zoom-in;
    padding: 0;
    transition: border-color 120ms, transform 120ms;
}
.ck-ref-thumb:hover { border-color: rgba(199,155,255,.55); transform: translateY(-1px); }
.ck-ref-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    pointer-events: none;
}

/* Floating reference viewer — stays over the canvas while you draw */
.ck-ref-floater {
    position: absolute;
    top: 60px; left: 60px;
    width: 320px;
    z-index: 5;
    background: #15171c;
    border: 1px solid rgba(199,155,255,.45);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,.55);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.ck-ref-floater[hidden] { display: none; }
.ck-ref-floater-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(199,155,255,.20);
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor: move;
    user-select: none;
    touch-action: none;
}
.ck-ref-floater-title {
    font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    color: #fff; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto;
}
.ck-ref-floater img {
    display: block;
    width: 100%; height: auto; max-height: 70vh;
    object-fit: contain;
    background: #07070b;
}
.ck-ref-floater-resize {
    position: absolute; bottom: 0; right: 0;
    width: 18px; height: 18px;
    cursor: se-resize;
    touch-action: none;
    background: linear-gradient(135deg, transparent 50%, rgba(199,155,255,.65) 50%);
}

@media (max-width: 720px) {
    .ck-ref-panel  { width: 86vw; }
    .ck-ref-toggle.is-open { right: 86vw; }
}

/* CCAKanvas entry buttons inside guild Toolbox + guilds.php quick-actions */
.ws-tool-kanvas {
    position: relative;
    background: linear-gradient(135deg, rgba(199,155,255,.15), rgba(251,146,60,.12)) !important;
    border-color: rgba(199,155,255,.40) !important;
}
.ws-tool-kanvas:hover {
    background: linear-gradient(135deg, rgba(199,155,255,.28), rgba(251,146,60,.22)) !important;
    border-color: rgba(199,155,255,.65) !important;
    transform: translateY(-1px);
}
.ws-tool-kanvas .ws-tool-ico {
    color: #dcc8ff;
}
.gd-shortcut-feat {
    background: linear-gradient(135deg, rgba(199,155,255,.18), rgba(251,146,60,.14)) !important;
    border-color: rgba(199,155,255,.45) !important;
}
.gd-shortcut-feat:hover {
    background: linear-gradient(135deg, rgba(199,155,255,.30), rgba(251,146,60,.22)) !important;
}


/* ===== Anime download modal ============================================
   Opened by the Download button in watch.php's action bar. The phase
   blocks (.w-dl-pick, .w-dl-prog, .w-dl-err) are mounted together and
   toggled by watch.js's [hidden] attribute — single overlay, three
   states.
   ====================================================================== */
.w-dl-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.w-dl-modal[hidden] { display: none; }
.w-dl-card {
    width: min(440px, 100%);
    background: #000;
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.w-dl-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.w-dl-head h2 {
    margin: 0; font-size: 15px; font-weight: 600;
    color: #f3f4f6; letter-spacing: 0.2px;
}
.w-dl-close {
    background: transparent; border: 0; color: #9ca3af;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
    border-radius: 6px;
}
.w-dl-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.w-dl-body { padding: 16px 18px 18px; }
.w-dl-sub { margin: 0 0 12px; color: #c79bff; font-size: 13px; }
.w-dl-variants {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.w-dl-variant-btn {
    background: rgba(167, 139, 250, 0.10);
    border: 1px solid rgba(167, 139, 250, 0.22);
    color: #f3f4f6;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 500;
    text-align: left;
    display: flex; justify-content: space-between; align-items: center;
}
.w-dl-variant-btn:hover {
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.4);
}
.w-dl-variant-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.w-dl-variant-tag {
    font-size: 11px; padding: 2px 8px; border-radius: 99px;
    background: rgba(251, 146, 60, 0.18); color: #fdba74;
}
.w-dl-step-label {
    margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: #9ca3af;
}
/* Destination chooser — "to my device" vs "keep in app" */
.w-dl-dest { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.w-dl-dest-btn {
    display: flex; align-items: flex-start; gap: 12px;
    width: 100%;
    background: rgba(167, 139, 250, 0.10);
    border: 1px solid rgba(167, 139, 250, 0.22);
    color: #f3f4f6;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.w-dl-dest-btn:hover {
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.45);
}
.w-dl-dest-btn:active { transform: scale(.99); }
.w-dl-dest-ico {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(167, 139, 250, 0.16);
    color: #c79bff;
}
.w-dl-dest-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.w-dl-dest-txt strong { font-size: 14px; font-weight: 600; }
.w-dl-dest-txt small { font-size: 11.5px; color: #9ca3af; }
.w-dl-dest-txt small a { color: #c79bff; text-decoration: underline; text-decoration-color: rgba(221,177,249,.35); }
.w-dl-back {
    background: transparent; border: 0; color: #9ca3af;
    font-size: 12px; cursor: pointer; padding: 2px 0; margin-bottom: 6px;
}
.w-dl-back:hover { color: #fff; }
.w-dl-note {
    margin: 4px 0 0; font-size: 11px; color: #9ca3af; line-height: 1.5;
}
.w-dl-note .w-dl-upsell {
    color: #dcc8ff;
    text-decoration: underline;
    text-decoration-color: rgba(167, 139, 250, .35);
}
.w-dl-note .w-dl-upsell:hover { color: #fff; text-decoration-color: #c79bff; }
.w-dl-nova-pill {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #c79bff, #ec4899);
    color: #fff;
    vertical-align: middle;
}
.w-dl-stage {
    margin: 0 0 10px; color: #f3f4f6; font-size: 14px; font-weight: 500;
}
.w-dl-bar {
    height: 10px; background: rgba(255,255,255,0.06);
    border-radius: 99px; overflow: hidden; margin-bottom: 10px;
}
.w-dl-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #c79bff, #fb923c);
    width: 0%;
    transition: width 0.4s ease;
}
/* Indeterminate state — used while the file is building but we can't compute a
   percentage yet (e.g. the stream duration hasn't resolved). A sliding sheen
   so the modal never looks frozen at 0%. */
.w-dl-bar.is-indeterminate { position: relative; }
.w-dl-bar.is-indeterminate .w-dl-bar-fill {
    width: 35% !important;
    transition: none;
    animation: w-dl-indet 1.15s ease-in-out infinite;
}
@keyframes w-dl-indet {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
.w-dl-meta { margin: 0 0 14px; font-size: 12px; color: #9ca3af; }
.w-dl-actions { display: flex; gap: 8px; justify-content: flex-end; }
.w-dl-cancel, .w-dl-retry {
    background: transparent; border: 1px solid rgba(255,255,255,0.12);
    color: #d1d5db; padding: 8px 14px; border-radius: 8px;
    cursor: pointer; font-size: 13px;
}
.w-dl-cancel:hover, .w-dl-retry:hover {
    background: rgba(255,255,255,0.06); color: #fff;
}
.w-dl-save {
    background: linear-gradient(135deg, #c79bff, #fb923c);
    color: #1a1a2e !important;
    padding: 8px 14px; border-radius: 8px;
    font-weight: 600; font-size: 13px; text-decoration: none;
    display: inline-block;
}
.w-dl-save:hover { filter: brightness(1.08); }
.w-dl-offline-btn {
    margin-left: 8px;
    background: rgba(167, 139, 250, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.5);
    color: #dcc8ff;
    padding: 8px 14px; border-radius: 8px;
    font-weight: 600; font-size: 13px; cursor: pointer;
}
.w-dl-offline-btn:hover { background: rgba(221,177,249,0.24); }
.w-dl-offline-btn[disabled] { opacity: 0.7; cursor: default; }
.w-dl-err-msg { color: #fca5a5; font-size: 13px; margin: 0 0 12px; }

/* ============================================================
   Lesson Zone — playful background refresh (2026-05-09)
   Layers (all decorative, pointer-events:none, behind UI):
     · two extra aurora orbs (cyan + amber) → full-rainbow palette
     · halftone dot pattern — anime/manga signature
     · drifting sparkle motes across the whole zone
     · comic speed-ray burst behind the hero constellation
     · twinkling glyphs on eyebrow + section titles
   Additive on top of the existing #lzHubView aurora pass.
   ============================================================ */

/* (a) Halftone dots overlay — uses .lz-bg::after so it lives on the
   fixed background layer beneath all UI. Top-radial mask keeps it
   from competing with content lower on the page. */
.lz-body .lz-bg::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
    background-size: 18px 18px;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse 92% 60% at 50% 0%, #000 28%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse 92% 60% at 50% 0%, #000 28%, transparent 82%);
}

/* (b) Sparkle motes — small ★/✦ doodles + dots that pan slowly upward.
   Layered as .lz-bg::before so it stays on the same fixed bg plane.
   The mask fades the top + bottom edges so the loop never feels obvious. */
.lz-body .lz-bg::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke-linecap='round'><path d='M40 50l2.5-7.5 2.5 7.5 7.5 2.5-7.5 2.5-2.5 7.5-2.5-7.5-7.5-2.5z' fill='%23d8b4fe' opacity='.65'/><path d='M250 80l2-6 2 6 6 2-6 2-2 6-2-6-6-2z' fill='%23ff8fd1' opacity='.65'/><path d='M170 230l2-6 2 6 6 2-6 2-2 6-2-6-6-2z' fill='%237dd3fc' opacity='.60'/><path d='M70 250l1.6-5 1.6 5 5 1.6-5 1.6-1.6 5-1.6-5-5-1.6z' fill='%23fbbf24' opacity='.55'/><circle cx='220' cy='160' r='1.6' fill='%23ffffff' opacity='.65'/><circle cx='120' cy='100' r='1.2' fill='%23ffffff' opacity='.50'/><circle cx='280' cy='280' r='1.4' fill='%23ffffff' opacity='.60'/><circle cx='30' cy='180' r='1' fill='%23ffffff' opacity='.45'/></g></svg>");
    background-repeat: repeat;
    background-size: 320px 320px;
    opacity: .9;
    animation: lz-mote-drift 90s linear infinite;
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
@keyframes lz-mote-drift {
    from { background-position: 0 0; }
    to   { background-position: 0 -640px; }
}

/* (c) Two extra aurora orbs (cyan + amber) so the rainbow feels full.
   The existing #lzHubView::before/::after carry purple + pink. */
#lzHubView .lz-hub { position: relative; }
#lzHubView .lz-hub::before,
#lzHubView .lz-hub::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: .55;
}
#lzHubView .lz-hub::before {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(56,189,248,.50), transparent 65%);
    bottom: 12%; left: 8%;
    animation: lz-hub-orb-c 30s ease-in-out infinite alternate;
}
#lzHubView .lz-hub::after {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(250,204,21,.32), transparent 65%);
    top: 38%; right: -100px;
    animation: lz-hub-orb-d 34s ease-in-out infinite alternate;
}
#lzHubView .lz-hub > * { position: relative; z-index: 1; }
@keyframes lz-hub-orb-c {
    0%   { transform: translate(0,0)         scale(1);    }
    50%  { transform: translate(-40px,-50px) scale(1.08); }
    100% { transform: translate(60px,30px)   scale(.94);  }
}
@keyframes lz-hub-orb-d {
    0%   { transform: translate(0,0)         scale(1);    }
    50%  { transform: translate(40px,-40px)  scale(1.06); }
    100% { transform: translate(-30px,50px)  scale(.95);  }
}

/* (d) Comic speed-ray burst behind the hero constellation.
   Conic-gradient stripes radiating outward, masked to a soft circle,
   slowly rotating — adds a "pow!" vibe without distracting. */
.lz-hub-orbit { position: relative; }
.lz-hub-orbit::before {
    content: "";
    position: absolute;
    inset: -50px;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,255,255,.08) 0deg 1.4deg,
        transparent           1.4deg 14deg
    );
    border-radius: 50%;
    pointer-events: none;
    mask-image: radial-gradient(circle at center, transparent 22%, #000 38%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at center, transparent 22%, #000 38%, transparent 72%);
    z-index: -1;
    animation: lz-burst-spin 60s linear infinite;
}
@keyframes lz-burst-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* (e) Eyebrow gets a sparkle prefix — small but cute. */
#lzHubView .lz-hub-eyebrow::before {
    content: "✦ ";
    color: var(--link-color, #c79bff);
    text-shadow: 0 0 8px rgba(199,155,255,.65);
}

/* (f) Section titles get a twinkling sparkle after the text. */
#lzHubView .lz-hub-section-title::after {
    content: "✦";
    color: rgba(199,155,255,.5);
    font-size: .72em;
    margin-left: 4px;
    text-shadow: 0 0 10px rgba(199,155,255,.55);
    animation: lz-spark-twinkle 3.4s ease-in-out infinite;
}
@keyframes lz-spark-twinkle {
    0%, 100% { opacity: .35; transform: scale(1)               rotate(0deg);  }
    50%      { opacity: .9;  transform: scale(1.25)            rotate(15deg); }
}

/* (g) Filter pills lift on hover for a touch more bounce. */
#lzHubView .lz-pill {
    transition: transform 220ms cubic-bezier(.2,.8,.2,1),
                background 180ms ease, color 180ms ease, box-shadow 200ms ease;
}
#lzHubView .lz-pill:not(.active):hover { transform: translateY(-2px); }
#lzHubView .lz-pill.active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
    .lz-body .lz-bg::before,
    #lzHubView .lz-hub::before,
    #lzHubView .lz-hub::after,
    .lz-hub-orbit::before,
    #lzHubView .lz-hub-section-title::after { animation: none; }
}

/* ============================================================
   Lesson Zone — mentor quick-access controls (2026-05-09)
   Topbar Edit-series button + floating Add-lesson FAB.
   Both only render for admins/mentors via JS (lessons.js).
   ============================================================ */

/* Edit-series chip in the sticky topbar — sits between title and %. */
.lz2-topbar-admin {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--lz2-accent, #c79bff) 50%, transparent);
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 12%, transparent);
    color: var(--lz2-accent, #c79bff);
    font: inherit; font-size: .82rem; font-weight: 700;
    cursor: pointer; flex-shrink: 0;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.lz2-topbar-admin:hover {
    background: color-mix(in srgb, var(--lz2-accent, #c79bff) 22%, transparent);
    border-color: var(--lz2-accent, #c79bff);
    transform: translateY(-1px);
}
.lz2-topbar-admin:active { transform: scale(.97); }
.lz2-topbar-admin svg { flex-shrink: 0; }
@media (max-width: 540px) {
    .lz2-topbar-admin span { display: none; }
    .lz2-topbar-admin { padding: 7px 9px; }
}

/* Floating Add-lesson button — fixed bottom-right, always reachable
   while scrolling the lesson list. Bigger than the in-header primary
   so a mentor can drop a new lesson from anywhere on the page. */
.lz-admin-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 50;
    pointer-events: auto;
}
.lz-admin-fab-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px 14px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lz2-accent, #c79bff), #ff8fd1);
    color: #fff;
    font: inherit; font-size: .95rem; font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow:
        0 10px 28px rgba(199,155,255,.50),
        0 4px 10px rgba(0,0,0,.30),
        0 0 0 1px rgba(255,255,255,.08) inset;
    transition: transform .18s cubic-bezier(.2,.8,.2,1),
                box-shadow .18s ease, filter .18s ease;
    animation: lz-fab-pop 380ms cubic-bezier(.34,1.56,.64,1);
}
.lz-admin-fab-btn:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.06);
    color: #fff;
    box-shadow:
        0 14px 36px rgba(199,155,255,.60),
        0 6px 14px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.12) inset;
}
.lz-admin-fab-btn:active { transform: translateY(0) scale(.98); }
.lz-admin-fab-btn svg {
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
@keyframes lz-fab-pop {
    from { opacity: 0; transform: translateY(20px) scale(.9); }
    to   { opacity: 1; transform: translateY(0)    scale(1);  }
}
@media (max-width: 540px) {
    .lz-admin-fab { bottom: 16px; right: 16px; }
    .lz-admin-fab-btn { padding: 14px; }
    .lz-admin-fab-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lz-admin-fab-btn { animation: none; }
    .lz-admin-fab-btn:hover { transform: none; }
}

/* ============================================================
   Lesson Zone — series search bar (2026-05-09)
   Sits between the hero and the guild filter pills. Live filters
   the cached series list in lessons.js (matchesQuery + applyHubSearch).
   ============================================================ */
.lz-hub-search-wrap {
    margin: 18px 0 0;
    display: flex;
}
.lz-hub-search {
    position: relative;
    flex: 1;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 0 14px 0 18px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lz-hub-search:hover {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
}
.lz-hub-search:focus-within {
    border-color: rgba(199,155,255,.55);
    background: rgba(199,155,255,.10);
    box-shadow: 0 0 0 4px rgba(199,155,255,.18);
}
.lz-hub-search-icon {
    flex-shrink: 0;
    color: var(--text-faint, #8a869b);
    transition: color .18s ease;
}
.lz-hub-search:focus-within .lz-hub-search-icon {
    color: var(--lz2-accent, #c79bff);
}
.lz-hub-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-primary, #f4f4f8);
    font: inherit;
    font-size: .95rem;
    padding: 12px 0;
}
.lz-hub-search-input::placeholder { color: var(--text-faint, #8a869b); }
/* Hide the browser-default clear "x" on type="search"; we render our own. */
.lz-hub-search-input::-webkit-search-cancel-button,
.lz-hub-search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.lz-hub-search-clear {
    flex-shrink: 0;
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-faint, #8a869b);
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.lz-hub-search-clear:hover {
    background: rgba(255,255,255,.08);
    color: var(--text-primary, #fff);
}
.lz-hub-search-clear:active { transform: scale(.92); }
.lz-hub-search-clear[hidden] { display: none; }
@media (max-width: 540px) {
    .lz-hub-search { max-width: none; }
    .lz-hub-search-input { font-size: .9rem; }
}

/* Oryx-expanded keyword chips — between search and guild pills. Shown
   while Oryx is loading and once keywords arrive; hidden when query
   is empty or Oryx errored out. */
.lz-hub-ai-chips {
    margin: 12px 0 0;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px;
    animation: lz-ai-fade .25s ease-out;
}
.lz-hub-ai-chips[hidden] { display: none; }
@keyframes lz-ai-fade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.lz-hub-ai-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .76rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--lz2-accent, #c79bff);
    margin-right: 4px;
}
.lz-hub-ai-label svg {
    color: #ff8fd1;
    filter: drop-shadow(0 0 6px rgba(255,143,209,.55));
    animation: lz-ai-twinkle 2.4s ease-in-out infinite;
}
@keyframes lz-ai-twinkle {
    0%, 100% { transform: scale(1)    rotate(0deg);   opacity: .85; }
    50%      { transform: scale(1.18) rotate(15deg);  opacity: 1;   }
}
.lz-hub-ai-chip {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    color: #d8c8ff;
    background: linear-gradient(135deg, rgba(199,155,255,.16), rgba(255,143,209,.12));
    border: 1px solid rgba(199,155,255,.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Per-card Oryx-match tag — appears when a series was surfaced only by
   AI keyword expansion (no literal substring hit). */
.lz-hub-card-ai-tag {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--lz2-accent, #c79bff), #ff8fd1);
    box-shadow: 0 4px 12px rgba(199,155,255,.35);
    margin: -2px 0 6px;
}
.lz-hub-card-ai-tag svg {
    filter: drop-shadow(0 0 4px rgba(255,255,255,.45));
}
@media (prefers-reduced-motion: reduce) {
    .lz-hub-ai-chips { animation: none; }
    .lz-hub-ai-label svg { animation: none; }
}

/* ============================================================
   Messages — typography refinement + crisper avatars
   Scoped to body.msg-page so the rest of the site is untouched.
   ============================================================ */

body.msg-page .msg-bubble,
body.msg-page .msg-input,
body.msg-page .msg-friend-preview,
body.msg-page .msg-friend-top strong,
body.msg-page .msg-reply-quote,
body.msg-page .msg-group-sender-name,
body.msg-page .msg-pinned-text,
body.msg-page .msg-typing-text {
    font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-feature-settings: "ss01", "cv11", "calt";
}

body.msg-page .msg-bubble {
    font-size: .95rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.msg-page .msg-bubble-mine  { letter-spacing: -0.003em; }

body.msg-page .msg-input {
    font-size: .95rem;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
}

/* Crisper avatar rendering across the messages page */
body.msg-page .msg-friend-avatar img,
body.msg-page .msg-chat-avatar-inner img,
body.msg-page .msg-group-sender-avatar img,
body.msg-page .msg-preview-avatar-inner img,
body.msg-page .mx-info-avatar img,
body.msg-page .msg-cg-friend-avatar img,
body.msg-page .msg-gm-avatar img,
body.msg-page .msg-gm-pick-avatar img {
    /* auto/smooth lets Chrome use its HIGH-quality downscaler; -webkit-optimize-contrast
       forced a cheap aliased downscale that actually looked pixelated at these sizes. */
    image-rendering: auto;
    image-rendering: smooth;
}

/* Slightly bigger avatars + crisper rendering — bigger render target
   yields better perceived resolution on hi-DPI screens. We preserve the
   existing themed glow rings and only nudge sizes / sharpen the image. */
body.msg-page .msg-friend-avatar {
    width: 48px; height: 48px;
}
body.msg-page .msg-chat-avatar-inner {
    width: 44px; height: 44px;
}
body.msg-page .msg-group-sender-avatar {
    width: 22px; height: 22px;
    font-size: .68rem;
}

/* Subtle inner highlight on the photo edge — gives the avatar a soft
   bevel without fighting the cyan/purple glow already on the page. */
body.msg-page .msg-friend-avatar.has-img,
body.msg-page .msg-chat-avatar-inner.has-img,
body.msg-page .msg-group-sender-avatar.has-img,
body.msg-page .msg-preview-avatar-inner.has-img,
body.msg-page .mx-info-avatar.has-img {
    position: relative;
}
body.msg-page .msg-friend-avatar.has-img::after,
body.msg-page .msg-chat-avatar-inner.has-img::after,
body.msg-page .mx-info-avatar.has-img::after {
    content: none;
}

/* Presence line under each name — green tint when online, faint muted
   when offline. Replaces the old last-message preview. */
.msg-friend-presence-online  { color: #34d399; font-weight: 500; }
.msg-friend-presence-offline { color: var(--text-faint); }

/* ====================================================================
   CCA CAMERA ZONE — full-screen viewfinder triggered from the messages
   page. Mixes a near-black canvas with cyan/violet brand accents,
   corner crosshairs, a scan-line CRT overlay, and a halo shutter so it
   feels like a proper CCA tool rather than a generic file dialog.
   =================================================================== */
.cca-cam {
    position: fixed; inset: 0;
    z-index: 4000;
    background: #000;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    --cca-cam-cyan:   #7be6ff;
    --cca-cam-violet: #c084fc;
    --cca-cam-line:   rgba(123, 230, 255, .35);
}
.cca-cam-video {
    width: 100%; height: 100%;
    object-fit: cover;
    background: #000;
    filter: contrast(1.04) saturate(1.05);
}

/* CRT scan-lines + faint vignette — sits above the video, below UI. */
.cca-cam-scan {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg,
            rgba(123, 230, 255, .04) 0,
            rgba(123, 230, 255, .04) 1px,
            transparent 1px, transparent 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
    z-index: 1;
}

/* Corner crosshairs — frames the viewfinder like a proper camera HUD. */
.cca-cam-frame {
    position: absolute; inset: 64px 24px 124px;
    pointer-events: none; z-index: 2;
}
.cca-cam-corner {
    position: absolute;
    width: 28px; height: 28px;
    border: 2px solid var(--cca-cam-cyan);
    box-shadow: 0 0 10px -2px rgba(123, 230, 255, .55);
    filter: drop-shadow(0 0 6px rgba(123, 230, 255, .3));
}
.cca-cam-corner-tl { top: 0;    left: 0;    border-right: 0;  border-bottom: 0; border-top-left-radius: 4px; }
.cca-cam-corner-tr { top: 0;    right: 0;   border-left: 0;   border-bottom: 0; border-top-right-radius: 4px; }
.cca-cam-corner-bl { bottom: 0; left: 0;    border-right: 0;  border-top: 0;    border-bottom-left-radius: 4px; }
.cca-cam-corner-br { bottom: 0; right: 0;   border-left: 0;   border-top: 0;    border-bottom-right-radius: 4px; }

/* Header strip — brand mark on the left, LIVE pill on the right. */
.cca-cam-head {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px calc(18px + env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0));
    pointer-events: none;
}
.cca-cam-brand {
    display: inline-flex; align-items: center; gap: 10px;
}
.cca-cam-mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(123,230,255,.18), rgba(192,132,252,.18));
    border: 1px solid var(--cca-cam-line);
    color: var(--cca-cam-cyan);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 14px -2px rgba(123,230,255,.4);
}
.cca-cam-mark svg { width: 16px; height: 16px; }
.cca-cam-word {
    font-family: 'Space Mono', ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.cca-cam-word-cca {
    background: linear-gradient(135deg, var(--cca-cam-cyan), var(--cca-cam-violet));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    padding-right: 6px;
}
.cca-cam-word-sep { color: var(--cca-cam-cyan); margin-right: 6px; opacity: .6; }

.cca-cam-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: rgba(0,0,0,.45);
    border: 1px solid var(--cca-cam-line);
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: #fff;
}
.cca-cam-rec-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff5e72;
    box-shadow: 0 0 10px rgba(255, 94, 114, .8);
    animation: cca-cam-pulse 1.4s ease-in-out infinite;
}
@keyframes cca-cam-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .35; transform: scale(.85); }
}

/* Bottom control bar — close (left), halo shutter (center), flip (right). */
.cca-cam-controls {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 36px calc(28px + env(safe-area-inset-bottom));
    gap: 24px;
    background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.cca-cam-side {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--cca-cam-line);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s, border-color .15s, transform .08s;
}
.cca-cam-side:hover {
    background: rgba(123,230,255,.10);
    border-color: rgba(123,230,255,.55);
}
.cca-cam-side:active { transform: scale(.94); }

/* Halo shutter — concentric ring + dot, brand glow when held. */
.cca-cam-shutter {
    position: relative;
    width: 78px; height: 78px;
    border-radius: 50%;
    background: rgba(0,0,0,.4);
    border: 2px solid var(--cca-cam-cyan);
    box-shadow:
        0 0 0 6px rgba(123,230,255,.08),
        0 0 28px -4px rgba(123,230,255,.45),
        0 0 28px -8px rgba(192,132,252,.4);
    cursor: pointer;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .08s, box-shadow .15s;
}
.cca-cam-shutter:hover {
    box-shadow:
        0 0 0 8px rgba(123,230,255,.12),
        0 0 36px -4px rgba(123,230,255,.6),
        0 0 36px -8px rgba(192,132,252,.55);
}
.cca-cam-shutter:active { transform: scale(.94); }
.cca-cam-shutter-core {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff 0%, #d8efff 50%, #f0e6ff 100%);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
}

@media (max-width: 720px) {
    .cca-cam-frame { inset: 56px 16px 130px; }
    .cca-cam-corner { width: 22px; height: 22px; }
    .cca-cam-controls { padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); }
    .cca-cam-shutter { width: 72px; height: 72px; }
    .cca-cam-shutter-core { width: 52px; height: 52px; }
}



/* =====================================================================
   ORYX AI — minimalist conversational surface (/oryx-ai.php).
   Black void + faint neural field as the hero; a centered column holds
   the wordmark, a borderless floating composer, and pill prompts.
   Claude / ChatGPT / Perplexity class — quiet, modern, no boxes-in-boxes.
   ===================================================================== */
.oai-body { background: #050507; }

.oai {
    --oai-bg:     #060609;
    --oai-text:   #ececf1;
    --oai-mute:   #9a9ab2;
    --oai-faint:  rgba(255,255,255,.055);
    --oai-faint2: rgba(255,255,255,.10);
    --oai-accent: #c79bff;
    --oai-font:   'Space Grotesk','Inter',system-ui,sans-serif;

    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 58px);
    margin: 0;
    color: var(--oai-text);
    font-family: var(--oai-font);
    isolation: isolate;
    overflow: hidden;
}

/* ---- background: black void + faint neural field (the hero) ---- */
.oai-void {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none; overflow: hidden;
    background: radial-gradient(125% 100% at 50% -10%, #0c0c14 0%, #070709 55%, #030305 100%);
}
.oai-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }
/* Optional owner image sits dimmed under the field so the void still reads. */
.oai-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: .22;
}

/* ---- top bar ---- */
.oai-topbar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px;
}
.oai-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--oai-text); }
.oai-brand-mark {
    width: 26px; height: 26px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--oai-accent); color: #190b32;
}
.oai-brand-name { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.oai-newchat {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border: 0; border-radius: 999px;
    background: var(--oai-faint); color: var(--oai-mute);
    font: 600 12.5px var(--oai-font); cursor: pointer;
    transition: background .15s, color .15s;
}
.oai-newchat:hover { background: var(--oai-faint2); color: var(--oai-text); }

/* ---- centered conversation column ---- */
.oai-main {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center;
    padding: 0 18px; scroll-behavior: smooth;
}
.oai-main::-webkit-scrollbar { width: 9px; }
.oai-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }
.oai-col {
    width: 100%; max-width: 720px; flex: 1 1 auto;
    display: flex; flex-direction: column; min-height: 100%;
}
/* Empty state — center the hero + composer + pills as one block. */
.oai[data-empty="1"] .oai-col  { justify-content: center; }
.oai[data-empty="1"] .oai-log  { display: none; }
.oai[data-empty="1"] .oai-foot { position: static; }
/* Active state — hero + pills retire, composer docks to the bottom. */
.oai[data-empty="0"] .oai-hero  { display: none; }
.oai[data-empty="0"] .oai-pills { display: none; }

/* ---- hero (empty state) ---- */
.oai-hero { text-align: center; padding: 8px 0 30px; }
.oai-hero-orb {
    width: 58px; height: 58px; margin: 0 auto 20px;
    display: grid; place-items: center; border-radius: 50%;
    color: var(--oai-accent);
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--oai-accent) 55%, transparent), transparent 70%);
    animation: oai-orb 4.6s ease-in-out infinite;
}
@keyframes oai-orb {
    0%, 100% { transform: scale(1);    opacity: .9; }
    50%      { transform: scale(1.06); opacity: 1;  }
}
.oai-hero-title {
    margin: 0; font-weight: 700;
    font-size: clamp(34px, 7vw, 54px); letter-spacing: .16em;
    color: #fff;
}
.oai-hero-sub {
    margin: 13px 0 0; font-weight: 400;
    font-size: clamp(15px, 2.4vw, 18px); color: var(--oai-mute);
}

/* ---- message log ---- */
.oai-log { display: flex; flex-direction: column; gap: 20px; padding: 26px 0 10px; }
.oai-msg {
    font-size: 15px; line-height: 1.62; max-width: 100%;
    word-wrap: break-word; overflow-wrap: anywhere;
    animation: oai-msg-in .26s ease both;
}
@keyframes oai-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.oai-msg-user {
    align-self: flex-end; max-width: 82%;
    background: var(--oai-faint2); color: var(--oai-text);
    padding: 11px 16px; border-radius: 20px 20px 6px 20px;
    white-space: pre-wrap;
}
.oai-msg-assistant { align-self: stretch; color: var(--oai-text); }
.oai-msg-assistant p { margin: 0 0 11px; }
.oai-msg-assistant p:last-child { margin-bottom: 0; }
.oai-msg-assistant ul { margin: 7px 0 11px; padding-left: 20px; }
.oai-msg-assistant li { margin: 4px 0; }
.oai-msg-assistant strong { color: #fff; font-weight: 600; }
.oai-msg-assistant em { color: #fff; }
.oai-msg-assistant code {
    background: var(--oai-faint); padding: 1.5px 6px; border-radius: 6px;
    font-size: 13px; font-family: 'Menlo','Consolas',monospace;
}
.oai-msg-assistant a {
    color: var(--oai-accent); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--oai-accent) 40%, transparent);
}
.oai-msg-assistant a:hover { border-bottom-color: var(--oai-accent); }
.oai-msg-error { align-self: stretch; color: #fca5a5; }
.oai-img { display: block; max-width: 100%; margin: 8px 0; border-radius: 12px; }

/* typing indicator */
.oai-typing { display: inline-flex; gap: 5px; padding: 4px 0; align-items: center; }
.oai-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--oai-mute); animation: oai-typing 1.1s ease-in-out infinite;
}
.oai-typing span:nth-child(2) { animation-delay: .18s; }
.oai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes oai-typing {
    0%, 100% { opacity: .35; transform: scale(.7); }
    50%      { opacity: 1;   transform: scale(1);  }
}

/* ---- footer: floating composer + pills (sticky to the bottom in chat) ---- */
.oai-foot {
    position: sticky; bottom: 0; flex: 0 0 auto;
    padding: 12px 0 18px;
    background: linear-gradient(to top, var(--oai-bg) 58%, transparent);
}
.oai-composer {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 7px 7px 7px 18px;
    border-radius: 26px;
    background: rgba(255,255,255,.06);
    box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.045);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: box-shadow .18s;
}
.oai-composer:focus-within { box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--oai-accent) 30%, transparent); }
.oai-input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    color: var(--oai-text); font: 15px/1.5 var(--oai-font);
    resize: none; max-height: 180px; padding: 9px 0; outline: none;
}
.oai-input::placeholder { color: var(--oai-mute); }
.oai-send {
    flex: 0 0 auto; width: 38px; height: 38px;
    display: grid; place-items: center; border: 0; border-radius: 50%;
    background: var(--oai-accent); color: #190b32; cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.oai-send:hover:not(:disabled) { transform: translateY(-1px); }
.oai-send:active:not(:disabled) { transform: scale(.94); }
.oai-send:disabled { opacity: .4; cursor: not-allowed; }

/* prompt pills */
.oai-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 16px 0 0; }
.oai-pill {
    padding: 8px 15px; border: 0; border-radius: 999px;
    background: var(--oai-faint); color: var(--oai-mute);
    font: 500 13px var(--oai-font); cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, transform .12s;
}
.oai-pill:hover { background: var(--oai-faint2); color: var(--oai-text); }
.oai-pill:active { transform: scale(.96); }

/* ---- responsive ---- */
@media (max-width: 640px) {
    .oai-topbar { padding: 10px 14px; }
    .oai-main { padding: 0 12px; }
    .oai-hero-title { letter-spacing: .12em; }
    .oai-msg-user { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
    .oai-hero-orb, .oai-typing span, .oai-msg { animation: none !important; }
}

/* ==================================================================
   READER v2.1 — atmosphere & editorial polish
   Refinement layer on top of the existing rd-* reader. Adds cinematic
   background depth, refined typography, cover halo, smoother progress
   bar, and on-scroll reveal animations. Does NOT redesign the page;
   every selector here is additive or scoped to body.rd-v2 so existing
   sepia/light themes still work.
   ================================================================== */

/* ---- Layered atmosphere (behind everything) ---------------------- */
body.rd-v2 {
    /* keep the existing #0c0d14 but add a faint cinematic wash */
    background:
        radial-gradient(1200px 700px at 20% -10%, rgba(99, 102, 241, .08), transparent 60%),
        radial-gradient(900px 600px at 100% 110%, rgba(236, 72, 153, .06), transparent 65%),
        #0a0b13;
}
.rd-atmos {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.rd-atmos-glow {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    will-change: transform;
}
.rd-atmos-glow-a {
    top: -28vmax;
    left: -18vmax;
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, .55), transparent 60%);
    animation: rd-atmos-drift-a 28s ease-in-out infinite alternate;
}
.rd-atmos-glow-b {
    bottom: -32vmax;
    right: -22vmax;
    background: radial-gradient(circle at 50% 50%, rgba(56, 109, 219, .45), transparent 60%);
    animation: rd-atmos-drift-b 34s ease-in-out infinite alternate;
}
@keyframes rd-atmos-drift-a {
    from { transform: translate3d(0, 0, 0)       scale(1);   }
    to   { transform: translate3d(4vw, 3vh, 0)   scale(1.06);}
}
@keyframes rd-atmos-drift-b {
    from { transform: translate3d(0, 0, 0)       scale(1);   }
    to   { transform: translate3d(-3vw, -4vh, 0) scale(1.08);}
}
.rd-atmos-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center,
            transparent 45%,
            rgba(6, 7, 16, .35) 78%,
            rgba(6, 7, 16, .75) 100%);
    mix-blend-mode: multiply;
}
.rd-atmos-grain {
    position: absolute;
    inset: -50%;
    opacity: .04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><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.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    pointer-events: none;
}

/* Keep content above the atmospheric layers. The bar / progress / nar
   already have their own z-index from their original rules; the article
   needs an explicit z-index so it floats above .rd-atmos (z-index 0). */
body.rd-v2 .rd-article { z-index: 2; }

/* Sepia / light readers don't want the purple wash — flatten them. */
body.rd-theme-sepia,
body.rd-theme-light {
    background-image: none !important;
}
body.rd-theme-sepia .rd-atmos,
body.rd-theme-light .rd-atmos { display: none; }

/* ---- Progress bar: cinematic glowing thread --------------------- */
body.rd-v2 .rd-progress {
    height: 2.5px;
    background: rgba(255, 255, 255, .035);
}
body.rd-v2 .rd-progress-fill {
    background: linear-gradient(90deg, #ddb1f9 0%, #c79bff 45%, #ec4899 100%);
    box-shadow:
        0 0 8px rgba(167, 139, 250, .65),
        0 0 18px rgba(167, 139, 250, .35);
    transition: width 120ms cubic-bezier(.4, 0, .2, 1);
}

/* ---- Top bar: even softer, more atmospheric --------------------- */
body.rd-v2 .rd-bar {
    background: linear-gradient(180deg,
        color-mix(in srgb, #0a0b13 92%, transparent) 0%,
        color-mix(in srgb, #0a0b13 60%, transparent) 100%);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

/* ---- Title: cinematic depth & balanced kerning ------------------ */
body.rd-v2 .rd-title {
    font-size: clamp(2.3rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
    background: linear-gradient(180deg, #ffffff 0%, #d9d6f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    filter: drop-shadow(0 6px 28px rgba(167, 139, 250, .12));
    margin-bottom: 22px;
}
body.rd-theme-sepia .rd-title,
body.rd-theme-light .rd-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #2b200f;
    filter: none;
    text-shadow: none;
}
body.rd-theme-light .rd-title { color: #1d1f35; }

/* ---- Eyebrow: thinner separator on the right -------------------- */
body.rd-v2 .rd-eyebrow {
    position: relative;
    padding-right: 28px;
    color: #dcc8ff;
}
body.rd-v2 .rd-eyebrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, rgba(167, 139, 250, .6), transparent);
    transform: translateY(-50%);
}

/* ---- Byline: refined editorial rhythm --------------------------- */
body.rd-v2 .rd-byline {
    gap: 10px;
    font-size: .9rem;
    color: rgba(232, 232, 240, .62);
    letter-spacing: .005em;
}
body.rd-v2 .rd-byline .rd-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    display: inline-block;
    margin: 0 2px;
    font-size: 0;
    line-height: 0;
}
body.rd-v2 .rd-author { gap: 10px; }
body.rd-v2 .rd-avatar {
    width: 30px; height: 30px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08),
        0 4px 14px rgba(0, 0, 0, .35);
}

/* ---- Cover: ambient halo + soft floating frame ------------------ */
body.rd-v2 .rd-cover {
    position: relative;
    margin: 8px 0 56px;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    isolation: isolate;
}
.rd-cover-halo {
    position: absolute;
    inset: -8% -6% -14% -6%;
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(140%);
    opacity: .55;
    transform: translateZ(0);
    z-index: -1;
    border-radius: 24px;
    pointer-events: none;
}
.rd-cover-halo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 11, 19, .55) 80%);
}
.rd-cover-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 18px 48px rgba(0, 0, 0, .55),
        0 4px 14px rgba(0, 0, 0, .35);
    transform: translateZ(0);
    will-change: transform;
    /* Smooth box-shadow + border-radius morph so the frame's chrome
       eases into / out of the docked look instead of snapping when the
       .rd-cover-docked class toggles mid-flight. */
    transition:
        box-shadow .55s cubic-bezier(.16, 1, .3, 1),
        border-radius .55s cubic-bezier(.16, 1, .3, 1);
}
.rd-cover-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.25) 100%);
}
/* Cover img + halo are translated by read.js for a whisper of parallax —
   no CSS transition here, the inline transform updates per scroll frame. */
body.rd-v2 .rd-cover img { will-change: transform; }
body.rd-v2 .rd-cover-halo {
    will-change: transform, filter, opacity;
    /* Smooth halo's blur/opacity/inset across the dock morph. */
    transition:
        filter .55s cubic-bezier(.16, 1, .3, 1),
        opacity .55s cubic-bezier(.16, 1, .3, 1),
        inset .55s cubic-bezier(.16, 1, .3, 1),
        border-radius .55s cubic-bezier(.16, 1, .3, 1);
}

/* ---- Prose: a touch more breath, refined size ------------------- */
body.rd-v2 .rd-body-prose {
    font-size: 1.22rem;
    line-height: 1.78;
    letter-spacing: .003em;
    color: #d6d6e2;
    text-wrap: pretty;
}
body.rd-v2 .rd-body-prose p { margin: 0 0 1.45em; }

/* Cinematic rhythm: a stronger pause after each scene-break <hr>.
   And a small lift on the paragraph right after a heading. */
body.rd-v2 .rd-body-prose hr {
    border: 0;
    width: 0;
    margin: 2.6em auto 2.4em;
    text-align: center;
    height: auto;
    opacity: 1;
}
body.rd-v2 .rd-body-prose hr::after {
    content: "✦";
    color: rgba(196, 181, 253, .55);
    font-size: .9rem;
    letter-spacing: 1em;
    padding-left: 1em;
    text-shadow: 0 0 14px rgba(167, 139, 250, .35);
}
body.rd-v2 .rd-body-prose h2 + p,
body.rd-v2 .rd-body-prose h3 + p { margin-top: -.2em; }

/* The final paragraph gets a touch more emotional breathing room. */
body.rd-v2 .rd-body-prose p:last-child {
    margin-bottom: .6em;
    /* uncomment for hard-emotional close */
    /* text-align: center; */
}

/* ---- Drop cap: refined editorial serif with subtle glow --------- */
body.rd-v2 .rd-body-prose p:first-of-type::first-letter {
    font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
    font-size: 4.4em;
    line-height: .82;
    float: left;
    padding: 6px 14px 0 0;
    margin-top: 2px;
    font-weight: 500;
    background: linear-gradient(180deg, #e9d8ff 0%, #c79bff 60%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 28px rgba(167, 139, 250, .25);
    font-feature-settings: "ss01", "liga";
}
body.rd-theme-sepia .rd-body-prose p:first-of-type::first-letter,
body.rd-theme-light .rd-body-prose p:first-of-type::first-letter {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #7c3aed;
    text-shadow: none;
}

/* ---- Headings inside prose: tighter, more literary -------------- */
body.rd-v2 .rd-body-prose h2 {
    font-size: 1.9rem;
    letter-spacing: -.018em;
    margin: 2.1em 0 .55em;
}
body.rd-v2 .rd-body-prose h3 {
    font-size: 1.4rem;
    letter-spacing: -.012em;
}

/* ---- Blockquote: more presence, ambient left rail --------------- */
body.rd-v2 .rd-body-prose blockquote {
    position: relative;
    margin: 1.8em 0;
    padding: .2em 0 .2em 28px;
    border-left: 0;
    font-size: 1.32rem;
    color: #ece8f8;
    font-style: italic;
}
body.rd-v2 .rd-body-prose blockquote::before {
    content: "";
    position: absolute;
    left: 0; top: .35em; bottom: .35em;
    width: 2px;
    background: linear-gradient(180deg, #c79bff, transparent);
    box-shadow: 0 0 14px rgba(167, 139, 250, .45);
}

/* ---- Chapter head: gentler border, more space ------------------- */
body.rd-v2 .rd-ch-head {
    margin: 56px 0 36px;
    padding-top: 32px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(199,155,255,.25), transparent) 1;
}

/* ---- Reveal-on-scroll for prose blocks -------------------------- */
body.rd-v2 .rd-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity   .9s cubic-bezier(.2,.8,.2,1),
        transform .9s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}
body.rd-v2 .rd-reveal.rd-revealed {
    opacity: 1;
    transform: none;
}

/* ---- Author card: glass + atmospheric depth --------------------- */
body.rd-v2 .rd-author-card {
    margin-top: 72px;
    padding: 22px 24px;
    background:
        linear-gradient(135deg, rgba(139, 92, 246, .08), rgba(56, 109, 219, .05)),
        rgba(20, 22, 34, .55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(167, 139, 250, .18);
    border-radius: 16px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(255, 255, 255, .02) inset;
}
body.rd-v2 .rd-author-card-avatar {
    width: 52px; height: 52px;
    box-shadow:
        0 0 0 1px rgba(167, 139, 250, .35),
        0 6px 18px rgba(0, 0, 0, .4);
}
body.rd-v2 .rd-author-card-follow {
    background: linear-gradient(135deg, rgba(167, 139, 250, .14), rgba(236, 72, 153, .1));
    border-color: rgba(167, 139, 250, .35);
    backdrop-filter: blur(6px);
}
body.rd-v2 .rd-author-card-follow:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, .28), rgba(236, 72, 153, .2));
    color: #fff;
}

/* ---- More-from-author: gentler cards ---------------------------- */
body.rd-v2 .rd-more-title {
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: 1.15rem;
    color: rgba(232, 232, 240, .85);
    letter-spacing: -.012em;
    font-weight: 700;
}
body.rd-v2 .rd-more-card {
    background: rgba(20, 22, 34, .45);
    backdrop-filter: blur(6px);
    transition: transform .25s cubic-bezier(.2,.8,.2,1),
                border-color .25s,
                box-shadow .25s;
}
body.rd-v2 .rd-more-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .4);
    border-color: rgba(167, 139, 250, .35);
}

/* ---- Narration bar: softer, more integrated --------------------- */
body.rd-v2 .rd-nar {
    background:
        linear-gradient(180deg, rgba(28, 26, 48, .72), rgba(16, 18, 32, .78));
    border: 1px solid rgba(167, 139, 250, .14);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(255, 255, 255, .02) inset,
        0 -1px 0 rgba(255, 255, 255, .04) inset;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* ---- Reduced motion: kill the drifting glows + reveals ---------- */
@media (prefers-reduced-motion: reduce) {
    .rd-atmos-glow { animation: none !important; }
    body.rd-v2 .rd-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    body.rd-v2 .rd-cover img { transition: none !important; }
}

/* ---- Mobile tuning ---------------------------------------------- */
@media (max-width: 600px) {
    body.rd-v2 .rd-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    body.rd-v2 .rd-body-prose { font-size: 1.08rem; line-height: 1.78; }
    body.rd-v2 .rd-body-prose p:first-of-type::first-letter {
        font-size: 3.6em;
        padding: 4px 10px 0 0;
    }
    .rd-cover-halo { inset: -4% -3% -8% -3%; filter: blur(32px) saturate(140%); }
}

/* ============================================================
   WRITER GUILD — Polish Layer (refinement, not redesign)
   ============================================================
   Built on top of the existing .wd-* system. Refines:
     - vertical rhythm (-25–30% global spacing)
     - surface hierarchy across sidebar panels
     - hero CTA + ambient depth
     - book / quote card breathing room
     - cinematic decorative marks on the quote stage
     - subtle microinteractions on entry/hover
     - typography split (editorial serif vs UI sans-serif)
   Aesthetic preserved: dark purple, restrained glow, serif accents.
   ============================================================ */

body.wd-body {
    --wd-ease:        cubic-bezier(.2,.7,.2,1);
    --wd-ease-soft:   cubic-bezier(.32,.72,.32,1);
    --wd-gap-section: 52px;
    --wd-ui-sans:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wd-edge-soft:   1px solid rgba(255,255,255,.06);
    --wd-edge-bright: 1px solid rgba(199,155,255,.28);
    --wd-surface-purple:
        linear-gradient(160deg, rgba(58,32,112,.78), rgba(22,12,50,.92));
    --wd-surface-glass:
        linear-gradient(160deg, rgba(96,165,250,.16) 0%, transparent 50%),
        linear-gradient(160deg, rgba(54,32,108,.78), rgba(24,14,58,.92));
    --wd-surface-warm:
        linear-gradient(160deg, rgba(255,182,140,.07) 0%, transparent 55%),
        linear-gradient(160deg, rgba(48,28,76,.74), rgba(20,12,40,.92));
}

/* Tighten vertical rhythm without crowding. Sections breathe at ~52px. */
.wd-grid     { gap: 44px; }
.wd-side     { gap: 20px; top: 84px; }
.wd          { padding-bottom: 140px; }

/* Section heading — small accent dot for editorial rhythm. */
.wd-sec-head { margin-bottom: 18px; }
.wd-sec-title {
    font-size: 1.4rem;
    text-shadow: 0 4px 28px rgba(199,155,255,.22);
}
.wd-sec-title::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin: 0 12px 5px 0;
    vertical-align: middle;
    background: linear-gradient(135deg, #c79bff, #d4c2ff);
    box-shadow: 0 0 10px rgba(199,155,255,.7);
}

/* Faint top-band glow above each main section — layered depth, never harsh. */
.wd-main > .wd-sec { position: relative; }
.wd-main > .wd-sec::before {
    content: "";
    position: absolute;
    top: -18px; left: 0; right: 0;
    height: 58px;
    background: radial-gradient(120% 70% at 50% 0%, rgba(199,155,255,.10), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.wd-main > .wd-sec > * { position: relative; z-index: 1; }

/* ---------- HERO ---------- */
.wd-hero {
    gap: 48px;
    margin-bottom: var(--wd-gap-section);
    padding-top: 50px;
    padding-bottom: 50px;
}
.wd-hero-kicker {
    font-family: var(--wd-ui-sans);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: rgba(196,177,255,.85);
    margin-bottom: 12px;
}
.wd-hero-name {
    font-size: clamp(2.4rem, 4vw, 3rem);
    margin-bottom: 14px;
    text-shadow: 0 10px 60px rgba(199,155,255,.5);
}
.wd-hero-sub {
    font-family: var(--wd-ui-sans);
    font-size: 1rem;
    color: rgba(232,228,245,.78);
    margin-bottom: 26px;
}
.wd-nav        { gap: 8px; margin-top: 20px; }
.wd-nav-pill   { padding: 9px 18px; font-family: var(--wd-ui-sans); letter-spacing: .01em; }

/* CTA — softer, glowier, more dominant on the page. */
.wd-hero-cta {
    margin-top: 22px;
    padding: 18px 38px;
    font-size: 1.05rem;
    font-family: var(--wd-ui-sans);
    letter-spacing: .02em;
    box-shadow:
        0 18px 40px rgba(221,177,249,.55),
        0 0 0 1px rgba(199,155,255,.35),
        inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .22s var(--wd-ease), box-shadow .22s var(--wd-ease);
}
.wd-hero-cta::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(199,155,255,.5), transparent 70%);
    filter: blur(22px);
    z-index: -1;
    opacity: .6;
    transition: opacity .25s var(--wd-ease);
    pointer-events: none;
}
.wd-hero-cta:hover {
    transform: translateY(-3px);
    box-shadow:
        0 28px 64px rgba(221,177,249,.72),
        0 0 0 1px rgba(255,255,255,.22),
        inset 0 1px 0 rgba(255,255,255,.34);
}
.wd-hero-cta:hover::before { opacity: 1; }

/* Illustration — inner luminance ring blends it into the hero atmosphere. */
.wd-hero-image {
    box-shadow:
        0 50px 100px rgba(0,0,0,.55),
        0 0 90px rgba(124,58,237,.28),
        inset 0 0 0 1px rgba(199,155,255,.22);
}
.wd-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 140px rgba(199,155,255,.20);
    pointer-events: none;
    z-index: 2;
}

/* ---------- CONTINUE READING ---------- */
.wd-continue { gap: 18px; }
.wd-cont {
    padding: 24px 28px;
    gap: 26px;
    transition:
        transform .28s var(--wd-ease),
        box-shadow .28s var(--wd-ease),
        border-color .28s var(--wd-ease);
}
.wd-cont::after {
    /* gentle diagonal sheen that wakes up on hover */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.05) 50%, transparent 62%);
    opacity: 0;
    transition: opacity .35s var(--wd-ease);
    pointer-events: none;
    z-index: 0;
}
.wd-cont:hover            { transform: translateY(-4px); }
.wd-cont:hover::after     { opacity: 1; }
.wd-cont-body             { gap: 7px; }
.wd-cont-title            { font-size: 1.22rem; letter-spacing: -.012em; }
.wd-cont.wd-cont-glow .wd-cont-title { font-size: 1.5rem; }
.wd-cont-by, .wd-cont-chapter { font-family: var(--wd-ui-sans); }

/* ---------- BOOK / STORY GRID ---------- */
.wd-stories { gap: 22px; }
.wd-story {
    transition:
        transform .28s var(--wd-ease),
        box-shadow .28s var(--wd-ease),
        border-color .28s var(--wd-ease);
}
.wd-story:hover { transform: translateY(-5px); }
.wd-story-body  { padding: 14px 16px 18px; gap: 7px; }
.wd-story-title { font-size: 1.04rem; line-height: 1.32; }
.wd-story-by, .wd-story-meta { font-family: var(--wd-ui-sans); }

/* ---------- SIDEBAR — three distinct surfaces ---------- */

/* Stats card — keep purple, slightly deeper. */
.wd-stats-card {
    background: var(--wd-surface-purple);
    border: var(--wd-edge-bright);
}

/* Oryx — brighter glassy with blue accent strip and inner luminance. */
.wd-oryx {
    background: var(--wd-surface-glass);
    border: 1px solid rgba(96,165,250,.30);
    box-shadow:
        var(--wd-glow-med),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 70px rgba(96,165,250,.06);
}
.wd-oryx::after {
    /* slim luminous tab — futuristic without neon */
    content: "";
    position: absolute;
    top: 0; left: 28px;
    width: 64px; height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, #c79bff, #60a5fa, transparent);
    box-shadow: 0 0 14px rgba(199,155,255,.55);
    pointer-events: none;
}

/* Writer Tip — warmer, calmer, visually secondary. */
.wd-tips {
    background: var(--wd-surface-warm);
    border-color: rgba(255,200,160,.16);
    box-shadow:
        0 20px 48px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.05);
}
.wd-tips .wd-stats-title {
    color: #f5d6b8;
    text-shadow: 0 0 14px rgba(255,184,138,.22);
}
.wd-tip-body {
    color: rgba(245,230,215,.82);
    font-family: Georgia, "Cormorant Garamond", serif;
    font-style: italic;
    line-height: 1.55;
}
.wd-tip-next        { color: #f5b78a; font-family: var(--wd-ui-sans); }
.wd-tip-next:hover  { color: #ffd9b8; }

/* ---------- QUOTE STAGE — cinematic ---------- */
.wd-qstage {
    padding: 64px 80px;
    border-radius: 28px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 30px 70px rgba(0,0,0,.42),
        0 0 60px rgba(124,58,237,.12);
}
.wd-qstage::before {
    /* oversized open-quote glyph as decorative depth */
    content: "\201C";
    position: absolute;
    top: -6px; left: 26px;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-size: 11rem;
    line-height: 1;
    color: rgba(199,155,255,.10);
    pointer-events: none;
    z-index: 0;
}
.wd-qstage::after {
    content: "\201D";
    position: absolute;
    right: 28px; bottom: -36px;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-size: 11rem;
    line-height: 1;
    color: rgba(199,155,255,.08);
    pointer-events: none;
    z-index: 0;
}
.wd-qslot-body {
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    line-height: 1.5;
    color: rgba(248,243,255,.97);
    text-shadow: 0 2px 30px rgba(124,58,237,.22);
}

/* ---------- QUICK DRAFT — floating, glassy bottom input ---------- */
.wd-draft {
    padding: 14px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(38,22,80,.55), rgba(20,12,46,.70));
    border: 1px solid rgba(199,155,255,.18);
    box-shadow:
        0 24px 60px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.wd-draft-input         { background: rgba(0,0,0,.32); font-family: var(--wd-ui-sans); }
.wd-draft-input:focus   {
    border-color: rgba(199,155,255,.6);
    box-shadow:
        0 0 0 3px rgba(199,155,255,.18),
        0 0 30px rgba(199,155,255,.25);
}

/* ---------- TYPOGRAPHY — sans-serif for UI utility text ---------- */
.wd-stat-lbl, .wd-cat, .wd-nav-pill, .wd-sec-count,
.wd-qmood, .wd-oryx-chip, .wd-milestone-lbl, .wd-milestone-note,
.wd-draft-tog, .wd-cont-by, .wd-cont-chapter,
.wd-story-by, .wd-story-meta, .wd-story-genre {
    font-family: var(--wd-ui-sans);
}

/* ---------- MICROINTERACTIONS — calm fade-up on entry ---------- */
@keyframes wdSecFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wd-main > .wd-sec       { animation: wdSecFadeIn .55s var(--wd-ease) both; }
.wd-main > .wd-sec:nth-child(2) { animation-delay: .06s; }
.wd-main > .wd-sec:nth-child(3) { animation-delay: .12s; }
.wd-main > .wd-sec:nth-child(4) { animation-delay: .18s; }
.wd-side  > section      { animation: wdSecFadeIn .55s var(--wd-ease) both; }
.wd-side  > section:nth-child(2) { animation-delay: .12s; }
.wd-side  > section:nth-child(3) { animation-delay: .20s; }
@media (prefers-reduced-motion: reduce) {
    .wd-main > .wd-sec, .wd-side > section { animation: none; }
    .wd-cont::after, .wd-hero-cta::before  { transition: none; }
}

/* ---------- RESPONSIVE — keep the new rhythm on smaller screens ---------- */
@media (max-width: 1120px) {
    body.wd-body { --wd-gap-section: 44px; }
    .wd-grid     { gap: 32px; }
    .wd-side     { gap: 16px; }
}
@media (max-width: 760px) {
    body.wd-body { --wd-gap-section: 38px; }
    .wd-hero { gap: 28px; padding-top: 40px; padding-bottom: 40px; margin-bottom: 40px; }
    .wd-hero-name { font-size: clamp(2rem, 7vw, 2.4rem); }
    .wd-hero-cta  { padding: 14px 28px; font-size: .98rem; }
    .wd-qstage { padding: 42px 22px; border-radius: 22px; }
    .wd-qstage::before, .wd-qstage::after { display: none; }
    .wd-main > .wd-sec::before            { display: none; }
    .wd-sec-title { font-size: 1.2rem; }
}

/* Hero CTA needs its own stacking context so the ::before glow halo
   sits behind the button surface (z-index: -1) but in front of the hero
   background — without isolation it can fall behind the whole section. */
.wd-hero-cta { position: relative; isolation: isolate; overflow: visible; }

/* ==================================================================
   READER v2.1 — cover side-dock
   When the user scrolls past the hero cover, the cover flies to a
   small fixed dock on the left of the viewport (see read.js).
   ================================================================== */

.rd-cover-placeholder {
    height: 0;
    margin: 0;
    pointer-events: none;
    /* placeholder height is set by JS once the cover docks; the smooth
       morph itself is driven by FLIP transforms on .rd-cover, so this
       element doesn't need a transition. */
}

body.rd-v2 .rd-cover.rd-cover-docked {
    position: fixed;
    /* sit just under the rd-bar (56px) with a comfortable gap */
    top: 88px;
    /* park in the left gutter, ~156px to the left of the 720px column */
    left: max(20px, calc((100vw - 720px) / 2 - 156px));
    width: 124px;
    height: auto;
    margin: 0;
    z-index: 35;
    cursor: pointer;
}
body.rd-v2 .rd-cover.rd-cover-docked .rd-cover-frame {
    border-radius: 10px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,
        0 14px 36px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(167, 139, 250, .22);
    /* base .rd-cover-frame already transitions box-shadow + border-radius,
       so undocking eases out smoothly too — no override needed here. */
}
body.rd-v2 .rd-cover.rd-cover-docked .rd-cover-halo {
    /* tighter halo around the docked thumbnail */
    inset: -10% -8% -14% -8%;
    filter: blur(28px) saturate(160%);
    opacity: .55;
    border-radius: 18px;
}
body.rd-v2 .rd-cover.rd-cover-docked .rd-cover-halo::after {
    background: radial-gradient(ellipse at center, transparent 35%, rgba(10, 11, 19, .35) 85%);
}

/* Tiny "back to top" affordance — a faint label that fades in on hover. */
body.rd-v2 .rd-cover.rd-cover-docked::after {
    content: "↑ Top";
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(196, 181, 253, .65);
    opacity: 0;
    transition: opacity .25s ease-out, transform .25s ease-out;
    pointer-events: none;
    white-space: nowrap;
}
body.rd-v2 .rd-cover.rd-cover-docked:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}
body.rd-v2 .rd-cover.rd-cover-docked:hover .rd-cover-frame {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .12) inset,
        0 22px 44px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(167, 139, 250, .4),
        0 0 32px rgba(167, 139, 250, .25);
}
body.rd-v2 .rd-cover.rd-cover-docked:hover .rd-cover-halo {
    opacity: .8;
}

/* Hide the dock when the reader is in focus mode or on the narrow
   layout where there's no room beside the column. */
body.rd-v2.rd-focus .rd-cover.rd-cover-docked {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow, .35s) var(--ease-out, ease-out);
}
@media (max-width: 1023px) {
    body.rd-v2 .rd-cover.rd-cover-docked {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        margin: 8px 0 56px !important;
    }
    body.rd-v2 .rd-cover.rd-cover-docked::after { display: none; }
    .rd-cover-placeholder { height: 0 !important; margin: 0 !important; }
}

/* Right-to-left languages: park on the right side instead. */
[dir="rtl"] body.rd-v2 .rd-cover.rd-cover-docked {
    left: auto;
    right: max(20px, calc((100vw - 720px) / 2 - 156px));
}

/* ============================================================
   Homepage — Quote of the Moment
   ------------------------------------------------------------
   Sits between Creative Guilds and Recommended For You on index.php.
   Single rotating quote sourced from Writer-guild quote posts.
   Visual DNA matches the Writer board's quote stage but more compact.
   ============================================================ */
.sg-quote-sec { margin-top: 48px; }
.sg-quote-card {
    position: relative;
    margin: 0 auto;
    max-width: 760px;
    padding: 46px 56px 34px;
    border-radius: 24px;
    background:
        radial-gradient(120% 80% at 16% -12%, rgba(199,155,255,.20), transparent 58%),
        radial-gradient(120% 90% at 94% 112%, rgba(221,177,249,.17), transparent 60%),
        linear-gradient(162deg, rgba(30,18,58,.84), rgba(13,8,28,.95));
    border: 1px solid rgba(199,155,255,.22);
    box-shadow:
        0 30px 66px rgba(0,0,0,.46),
        0 0 70px rgba(221,177,249,.12),
        inset 0 1px 0 rgba(255,255,255,.07);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}
/* slow drifting brand aurora behind the quote (paused under reduced motion) */
.sg-quote-card::before {
    content: "";
    position: absolute;
    inset: -45%;
    z-index: -1;
    background:
        radial-gradient(38% 38% at 28% 30%, rgba(199,155,255,.16), transparent 70%),
        radial-gradient(42% 42% at 74% 72%, rgba(221,177,249,.13), transparent 70%);
    animation: sg-quote-aurora 18s ease-in-out infinite alternate;
}
@keyframes sg-quote-aurora {
    from { transform: translate(-3%, -2%) scale(1); }
    to   { transform: translate(3%, 3%) scale(1.1); }
}
/* gradient hairline along the top edge — a quiet premium detail */
.sg-quote-card::after {
    content: "";
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(199,155,255,.65), transparent);
    z-index: 1;
}
.sg-quote-mark {
    position: absolute;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-size: 7.5rem;
    line-height: 1;
    background: linear-gradient(150deg, rgba(199,155,255,.42), rgba(221,177,249,.12));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.sg-quote-mark-l { top: 4px;     left: 22px; }
.sg-quote-mark-r { bottom: -46px; right: 24px; }
.sg-quote-body {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-style: italic;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.58;
    color: rgba(248,243,255,.97);
    text-shadow: 0 2px 26px rgba(221,177,249,.22);
    transition: opacity .28s ease;
}
.sg-quote-card.is-fading .sg-quote-body { opacity: 0; }
.sg-quote-foot {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: .82rem;
    color: rgba(232,228,245,.62);
    letter-spacing: .02em;
}
.sg-quote-by {
    color: #c4b1ff;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease, text-shadow .18s ease;
}
.sg-quote-by:hover {
    color: #fff;
    text-shadow: 0 0 14px rgba(199,155,255,.5);
}
.sg-quote-sep { opacity: .4; }
.sg-quote-more {
    color: rgba(196,177,255,.72);
    text-decoration: none;
    font-weight: 600;
    transition: color .18s ease;
}
.sg-quote-more:hover { color: #fff; }
.sg-quote-dots {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.sg-quote-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(199,155,255,.25);
    transition: background .25s ease, transform .25s ease;
}
.sg-quote-dot.is-on {
    background: linear-gradient(135deg, #c79bff, #d4c2ff);
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(199,155,255,.7);
}

@media (max-width: 600px) {
    .sg-quote-card {
        padding: 32px 26px 24px;
        border-radius: 18px;
    }
    .sg-quote-mark      { font-size: 4.5rem; }
    .sg-quote-mark-l    { top: -4px;   left: 10px; }
    .sg-quote-mark-r    { bottom: -22px; right: 12px; }
    .sg-quote-body      { font-size: 1.05rem; line-height: 1.5; }
    .sg-quote-foot      { font-size: .76rem; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-quote-body { transition: none; }
    .sg-quote-card::before { animation: none; }
    .sg-quote-dot  { transition: none; }
}

/* ============================================================
   Reader — "Finished?" like card (last chapter only)
   ------------------------------------------------------------
   Subdued by default; once the reader has scrolled past ~75% of the
   article, .is-unlocked fades in a soft heart-glow so the prompt
   feels earned. Wired to the existing posts.php?action=like API —
   no new persistence, no XP, just social signal.
   ============================================================ */
.rd-finish {
    position: relative;
    margin: 56px auto 28px;
    max-width: 640px;
    padding: 34px 36px 30px;
    border-radius: 22px;
    background:
        radial-gradient(140% 90% at 50% 0%, rgba(199,155,255,.12), transparent 60%),
        linear-gradient(160deg, rgba(34,20,72,.78), rgba(16,8,38,.92));
    border: 1px solid rgba(199,155,255,.18);
    box-shadow:
        0 24px 56px rgba(0,0,0,.45),
        0 0 60px rgba(124,58,237,.10),
        inset 0 1px 0 rgba(255,255,255,.05);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    opacity: .82;
    transform: translateY(8px);
    transition: opacity .6s ease, transform .6s ease, border-color .6s ease, box-shadow .6s ease;
}
.rd-finish.is-unlocked {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(199,155,255,.32);
    box-shadow:
        0 28px 64px rgba(0,0,0,.5),
        0 0 80px rgba(124,58,237,.18),
        inset 0 1px 0 rgba(255,255,255,.06);
}
.rd-finish-glow {
    position: absolute;
    top: -120px; left: 50%;
    width: 360px; height: 360px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,159,176,.20), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .8s ease;
}
.rd-finish.is-unlocked .rd-finish-glow { opacity: .9; }
.rd-finish.is-liked .rd-finish-glow {
    background: radial-gradient(circle, rgba(255,120,160,.36), transparent 70%);
}

.rd-finish-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(196,177,255,.85);
    margin: 0 0 14px;
}
.rd-finish-title {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    line-height: 1.3;
    color: #fff;
    letter-spacing: -.01em;
}
.rd-finish-sub {
    position: relative;
    z-index: 1;
    margin: 0 0 22px;
    font-size: .92rem;
    line-height: 1.5;
    color: rgba(232,228,245,.72);
}

/* The like control — pill button with a heart that pops + fills on press. */
.rd-finish-like,
.rd-finish-meta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    border-radius: 999px;
    border: 1px solid rgba(199,155,255,.32);
    background: linear-gradient(135deg, rgba(199,155,255,.16), rgba(124,58,237,.10));
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform .22s cubic-bezier(.2,.7,.2,1),
                box-shadow .22s cubic-bezier(.2,.7,.2,1),
                border-color .22s cubic-bezier(.2,.7,.2,1),
                background .22s ease;
}
.rd-finish-meta { cursor: default; }
.rd-finish-like:hover {
    transform: translateY(-2px);
    border-color: rgba(255,159,176,.55);
    background: linear-gradient(135deg, rgba(255,159,176,.18), rgba(199,155,255,.12));
    box-shadow: 0 14px 32px rgba(124,58,237,.32), 0 0 0 1px rgba(255,159,176,.25);
}
.rd-finish.is-liked .rd-finish-like {
    border-color: rgba(255,120,160,.55);
    background: linear-gradient(135deg, rgba(255,120,160,.24), rgba(199,155,255,.14));
    color: #ffd2dd;
    box-shadow: 0 16px 36px rgba(255,120,160,.32), 0 0 0 1px rgba(255,120,160,.32);
}
.rd-finish-like.is-busy { opacity: .85; pointer-events: none; }

.rd-finish-heart {
    position: relative;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffd2dd;
}
.rd-finish-heart-outline,
.rd-finish-heart-fill {
    position: absolute;
    inset: 0;
    margin: auto;
    transition: opacity .25s ease, transform .25s ease;
}
.rd-finish-heart-fill {
    opacity: 0;
    transform: scale(.65);
    color: #ff6b8e;
    filter: drop-shadow(0 0 12px rgba(255,107,142,.6));
}
.rd-finish.is-liked .rd-finish-heart-outline { opacity: 0; }
.rd-finish.is-liked .rd-finish-heart-fill    { opacity: 1; transform: scale(1); }

/* Pop animation when the user toggles the like — short and snappy. */
.rd-finish-like.is-popping .rd-finish-heart {
    animation: rdFinishHeartPop .42s cubic-bezier(.2,.7,.2,1);
}
@keyframes rdFinishHeartPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    60%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

.rd-finish-label {
    letter-spacing: .01em;
}
.rd-finish-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.08);
    font-size: .78rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    font-variant-numeric: tabular-nums;
}
.rd-finish.is-liked .rd-finish-count {
    background: rgba(255,107,142,.22);
    border-color: rgba(255,107,142,.42);
    color: #fff;
}

@media (max-width: 600px) {
    .rd-finish      { margin: 44px 16px 22px; padding: 28px 22px 24px; }
    .rd-finish-title { font-size: 1.2rem; }
    .rd-finish-sub   { font-size: .88rem; }
    .rd-finish-like, .rd-finish-meta { padding: 11px 18px; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rd-finish, .rd-finish-glow, .rd-finish-like,
    .rd-finish-heart-outline, .rd-finish-heart-fill,
    .rd-finish-like.is-popping .rd-finish-heart { transition: none; animation: none; }
}

/* ==================================================================
   CCA Nova — shared member badges + avatar ring
   Used wherever bylines or avatars surface a Nova member: read.php
   (rd-author / rd-author-card), profile.php (pf-name / pf-avatar-wrap),
   and any future feed/comment surfaces that render an author. Output by
   renderNovaBadge() + novaClass() from nova-lib.php.
   ================================================================== */

/* ---- Pill badge — premium membership treatment ------------------- */
/* The pill is a glass capsule rather than a solid colour: a dark
   translucent base that works on both light and dark surfaces, with a
   gradient-stroked edge, holographic wordmark, and a slow sheen sweep.
   Mirrors the premium-card design language used by Apple Card /
   credit-card UIs — a calmer, more "membership" feel than the previous
   solid lavender pill. */
.nova-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 19px;
    padding: 0 9px 0 7px;
    margin-left: 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    flex-shrink: 0;
    overflow: hidden;
    isolation: isolate;
    /* Layered background: subtle gradient + dark glass base */
    background:
        linear-gradient(135deg, rgba(167, 139, 250, .22), rgba(236, 72, 153, .12) 50%, rgba(56, 109, 219, .18)) padding-box,
        radial-gradient(120% 200% at 50% 0%, rgba(255, 255, 255, .08), transparent 50%) padding-box,
        rgba(12, 13, 22, .82) padding-box,
        /* Gradient border via border-box layer */
        linear-gradient(135deg, rgba(196, 181, 253, .9) 0%, rgba(236, 72, 153, .6) 50%, rgba(56, 109, 219, .75) 100%) border-box;
    border: 1px solid transparent;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,        /* inner highlight */
        0 6px 18px rgba(124, 58, 237, .28),            /* drop shadow */
        0 0 0 1px rgba(0, 0, 0, .35);                  /* legibility ring on light bgs */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .28s cubic-bezier(.16,1,.3,1),
                box-shadow .28s ease-out;
}
.nova-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .12) inset,
        0 10px 24px rgba(124, 58, 237, .42),
        0 0 0 1px rgba(0, 0, 0, .35);
}
.nova-badge:hover .nova-badge-sheen { animation-duration: 1.6s; }

/* Sheen sweep — a soft diagonal highlight that slides across the pill.
   Sits above the background but below the glyph + label so it sweeps
   under the wordmark like premium-card light catch. */
.nova-badge-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, .35) 50%,
        transparent 62%,
        transparent 100%);
    background-size: 220% 100%;
    background-position: 220% 0;
    pointer-events: none;
    z-index: 1;
    animation: nova-badge-sheen 6.5s ease-in-out infinite;
    mix-blend-mode: overlay;
}
@keyframes nova-badge-sheen {
    0%, 12%   { background-position: 220% 0; opacity: 0; }
    18%       { opacity: 1; }
    45%       { background-position: -120% 0; opacity: 1; }
    52%, 100% { background-position: -120% 0; opacity: 0; }
}

/* Glyph — 4-point sparkle with a soft inner highlight + slow rotation. */
.nova-badge-glyph {
    position: relative;
    z-index: 2;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #dcc8ff;
    filter: drop-shadow(0 0 3px rgba(196, 181, 253, .9))
            drop-shadow(0 0 6px rgba(167, 139, 250, .55));
    animation: nova-badge-glyph-spin 16s linear infinite;
}
.nova-badge-glyph-core {
    /* Highlight sits on the same path, scaled down — gives the sparkle
       a luminous core without needing a CSS filter. */
    transform-origin: 12px 12px;
}
@keyframes nova-badge-glyph-spin { to { transform: rotate(360deg); } }

/* Wordmark — holographic gradient text, slightly more letterspaced
   than before so it reads as a "mark" rather than a label. */
.nova-badge-lbl {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #fff 0%, #e9d5ff 55%, #dcc8ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    text-shadow: 0 0 12px rgba(196, 181, 253, .35);
}

/* Lifetime variant — gold/violet duotone, warmer glow, refined ✦ mark
   that sits inline (not glued to the label end-letter like before). */
.nova-badge.is-lifetime {
    background:
        linear-gradient(135deg, rgba(252, 211, 77, .25), rgba(236, 72, 153, .14) 55%, rgba(167, 139, 250, .22)) padding-box,
        radial-gradient(120% 200% at 50% 0%, rgba(255, 255, 255, .10), transparent 50%) padding-box,
        rgba(20, 14, 10, .85) padding-box,
        linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #dcc8ff 100%) border-box;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .12) inset,
        0 6px 18px rgba(202, 138, 4, .38),
        0 0 0 1px rgba(0, 0, 0, .35);
}
.nova-badge.is-lifetime:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .16) inset,
        0 10px 24px rgba(202, 138, 4, .55),
        0 0 0 1px rgba(0, 0, 0, .35);
}
.nova-badge.is-lifetime .nova-badge-glyph {
    color: #fde68a;
    filter: drop-shadow(0 0 3px rgba(253, 230, 138, .95))
            drop-shadow(0 0 6px rgba(245, 158, 11, .55));
}
.nova-badge.is-lifetime .nova-badge-lbl {
    background: linear-gradient(180deg, #fff 0%, #fde68a 55%, #f59e0b 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    text-shadow: 0 0 12px rgba(252, 211, 77, .4);
}
.nova-badge-life-mark {
    position: relative;
    z-index: 2;
    margin-left: 1px;
    font-size: 9px;
    line-height: 1;
    background: linear-gradient(180deg, #fff 0%, #fde68a 70%, #f59e0b 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    filter: drop-shadow(0 0 3px rgba(252, 211, 77, .8));
    animation: nova-badge-life-pulse 3.2s ease-in-out infinite;
}
@keyframes nova-badge-life-pulse {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.18); }
}

/* Dot variant — refined circular chip for tight surfaces (chapter rail,
   header HUD, comment bylines). Mini-pill drops the wordmark but keeps
   the glyph + glow so the membership signal still reads. */
.nova-badge-dot {
    height: 16px;
    width: 16px;
    padding: 0;
    margin-left: 6px;
    justify-content: center;
    border-radius: 50%;
    gap: 0;
}
.nova-badge-dot .nova-badge-glyph { width: 10px; height: 10px; }
.nova-badge-dot .nova-badge-lbl,
.nova-badge-dot .nova-badge-life-mark,
.nova-badge-dot .nova-badge-sheen { display: none; }

/* ---- Avatar ring (used wherever .is-nova is on the avatar's parent) */
/* The ring is built with two outlines + a glow shadow, so it doesn't
   require an extra DOM wrapper. Single-color outline is intentional —
   conic-gradients can't be box-shadows and the gradient pill nearby
   already carries the "premium" color story. */
.rd-author.is-nova .rd-avatar,
.rd-author-card.is-nova .rd-author-card-avatar {
    outline: 2px solid #dcc8ff;
    outline-offset: 2px;
    box-shadow:
        0 0 0 1px rgba(12, 13, 20, .9),     /* inner dark separator */
        0 0 14px rgba(167, 139, 250, .55);  /* halo */
    transition: outline-color .25s ease-out, box-shadow .25s ease-out;
}
.rd-author.is-nova:hover .rd-avatar,
.rd-author-card.is-nova .rd-author-card-head:hover .rd-author-card-avatar {
    outline-color: #fff;
    box-shadow:
        0 0 0 1px rgba(12, 13, 20, .9),
        0 0 20px rgba(167, 139, 250, .75);
}

/* Author-card upgrade for Nova members — borrow the gradient + glow. */
body.rd-v2 .rd-author-card.is-nova {
    background:
        linear-gradient(135deg, rgba(167, 139, 250, .14), rgba(236, 72, 153, .06)),
        rgba(20, 22, 34, .65);
    border-color: rgba(167, 139, 250, .35);
    box-shadow:
        0 12px 44px rgba(0, 0, 0, .4),
        0 0 0 1px rgba(167, 139, 250, .12) inset,
        0 0 36px rgba(167, 139, 250, .12);
}

/* Profile-page avatar ring — animated conic gradient via a pseudo-element
   on the wrap. The wrap is already positioned (it holds the level chip),
   so an absolute pseudo behind it sits perfectly around the avatar. */
.pf-avatar-wrap.is-nova { position: relative; isolation: isolate; }
.pf-avatar-wrap.is-nova::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(167, 139, 250, .9),
        rgba(236, 72, 153, .8),
        rgba(56, 109, 219, .85),
        rgba(167, 139, 250, .9)
    );
    filter: blur(.5px);
    z-index: -1;
    animation: nova-ring-spin 6s linear infinite;
    pointer-events: none;
}
.pf-avatar-wrap.is-nova::after {
    /* dark gap between the ring and the avatar so the gradient reads as
       a ring rather than a fuzzy halo */
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--pf-bg, #0c0d14);
    z-index: -1;
    pointer-events: none;
}
@keyframes nova-ring-spin { to { transform: rotate(360deg); } }

/* ---- Generic Nova ring — drop-in for any avatar surface --------------
   Wrap any round avatar element with .nova-ring (medium+ avatars get
   the animated conic ring; small lists use .nova-ring-sm for a static
   outline that's cheap to repaint at scale). Both variants assume the
   wrapped child is the avatar — image, initial bubble, or canvas. */
.nova-ring {
    position: relative;
    isolation: isolate;
}
.nova-ring::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        rgba(167, 139, 250, .9),
        rgba(236, 72, 153, .8),
        rgba(56, 109, 219, .85),
        rgba(167, 139, 250, .9)
    );
    filter: blur(.5px);
    z-index: -1;
    animation: nova-ring-spin 6s linear infinite;
    pointer-events: none;
}
.nova-ring::after {
    /* dark gap so the gradient reads as a discrete ring, not a halo */
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: var(--nova-ring-bg, #0c0d14);
    z-index: -1;
    pointer-events: none;
}
/* Lifetime members get a warmer gold→violet sweep so it reads as
   "founder" even at a glance. */
.nova-ring.is-lifetime::before {
    background: conic-gradient(
        from 0deg,
        #fde68a,
        #ca8a04,
        #c79bff,
        #ec4899,
        #fde68a
    );
}
/* Small variant — cheap static outline + halo, no animation. Use for
   anything ≤32px (DM list, comment threads, leaderboard rows). */
.nova-ring-sm {
    outline: 2px solid #dcc8ff;
    outline-offset: 2px;
    box-shadow:
        0 0 0 1px rgba(12, 13, 20, .9),
        0 0 10px rgba(167, 139, 250, .55);
    border-radius: 50%;
}
.nova-ring-sm.is-lifetime {
    outline-color: #fde68a;
    box-shadow:
        0 0 0 1px rgba(12, 13, 20, .9),
        0 0 10px rgba(252, 211, 77, .55);
}

/* When the profile-page Nova badge appears in the H1, give it a slight
   vertical lift so it aligns with the large name's optical baseline. */
.pf-name .nova-badge { transform: translateY(-3px); }
.pf-name .nova-badge:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
    .nova-badge-glyph,
    .nova-badge-sheen,
    .nova-badge-life-mark,
    .pf-avatar-wrap.is-nova::before,
    .nova-ring::before { animation: none !important; }
    .nova-badge-sheen { display: none; }
}

/* ==================================================================
   Sidebar — CCA Nova entry (sb-link-nova)
   Sits at the top of the footer zone. Three states:
     .is-free      — free user, gentle gradient + pulse to draw attention
     .is-active    — paid member, calmer gradient, status under the label
     .is-lifetime  — gold/violet, founder-tier visual treatment
   Uses the same gradient family as .nova-badge so the membership story
   is visually consistent everywhere it surfaces.
   ================================================================== */

.sb-link-nova {
    position: relative;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 8px 0 6px;
    border: 0;
    overflow: hidden;
    /* muted purple → gold blend */
    background: linear-gradient(120deg, #3f367f 0%, #4f4093 50%, #a07c30 140%);
    isolation: isolate;
}
.sb-link-nova::before { display: none; }
.sb-link-nova:hover { background: linear-gradient(120deg, #483e90 0%, #5a4aa6 50%, #b88e38 140%); }
.sb-link-nova-glyph {
    color: #f3cf6b;
    filter: none;
    margin-top: 1px;
    flex-shrink: 0;
}
.sb-link-nova-lbl {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.2;
}
.sb-link-nova-lbl strong {
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: #fff;
}
.sb-link-nova-lbl small {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .75);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Same muted purple→gold blend for every Nova state. */
.sb-link-nova.is-free,
.sb-link-nova.is-active,
.sb-link-nova.is-lifetime { background: linear-gradient(120deg, #3f367f 0%, #4f4093 50%, #a07c30 140%) !important; border: 0 !important; }
.sb-link-nova.is-free .sb-link-nova-lbl small,
.sb-link-nova.is-active .sb-link-nova-lbl small,
.sb-link-nova.is-lifetime .sb-link-nova-lbl small { color: rgba(255,255,255,.8); }
.sb-link-nova.is-lifetime .sb-link-nova-glyph { color: #f3cf6b; filter: none; }
.sb-link-nova.is-lifetime .sb-link-nova-lbl strong { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.sb-link-nova.sb-active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

/* Free state — animated shimmer + subtle border pulse so the link
   reads as a CTA rather than just another nav row. */
.sb-link-nova.is-free {
    border-color: rgba(167, 139, 250, .18);
}
.sb-link-nova.is-free::before {
    animation: sb-nova-shimmer 5.5s ease-in-out infinite;
}
@keyframes sb-nova-shimmer {
    0%   { transform: translateX(-100%); }
    65%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
.sb-link-nova.is-free .sb-link-nova-lbl small {
    color: #dcc8ff;
    font-weight: 600;
}

/* Active member — calmer, no shimmer, status reads as info, not CTA. */
.sb-link-nova.is-active {
    border-color: rgba(167, 139, 250, .3);
    background:
        linear-gradient(135deg, rgba(167, 139, 250, .16), rgba(56, 109, 219, .08)),
        rgba(20, 22, 34, .5);
}
.sb-link-nova.is-active .sb-link-nova-lbl small {
    color: rgba(196, 181, 253, .75);
}

/* Lifetime — gold-leaning gradient, mirrors the lifetime badge variant. */
.sb-link-nova.is-lifetime {
    border-color: rgba(245, 158, 11, .35);
    background:
        linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(196, 181, 253, .06)),
        rgba(20, 22, 34, .5);
}
.sb-link-nova.is-lifetime .sb-link-nova-glyph {
    color: #fcd34d;
    filter: drop-shadow(0 0 8px rgba(252, 211, 77, .55));
}
.sb-link-nova.is-lifetime .sb-link-nova-lbl strong {
    background: linear-gradient(135deg, #fff4d6 0%, #fcd34d 60%, #dcc8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sb-link-nova.is-lifetime .sb-link-nova-lbl small {
    color: rgba(252, 211, 77, .8);
}

/* Active-page state — slight glow lift so the current location is obvious. */
.sb-link-nova.sb-active {
    box-shadow: 0 0 0 1px rgba(167, 139, 250, .35) inset,
                0 0 18px rgba(167, 139, 250, .15);
}

@media (prefers-reduced-motion: reduce) {
    .sb-link-nova::before { animation: none !important; }
}

/* ==================================================================
   Reader — Download button (rd-download)
   Sits between the like footer and the author card on the last
   chapter. Two variants: active (Nova members get the real EPUB link)
   and -nova (free users get a calm upgrade nudge that respects the
   emotional close of the story).
   ================================================================== */

.rd-download {
    margin: 36px 0 22px;
}
.rd-download-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(20, 22, 34, .55);
    backdrop-filter: blur(10px);
    transition:
        transform .25s cubic-bezier(.16, 1, .3, 1),
        background .25s ease-out,
        border-color .25s ease-out,
        box-shadow .25s ease-out;
}
.rd-download-btn svg { flex-shrink: 0; }
.rd-download-btn span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rd-download-btn strong {
    font-size: 14.5px;
    font-weight: 600;
    color: #f5f5fa;
    letter-spacing: -.005em;
}
.rd-download-btn small {
    font-size: 12px;
    color: rgba(232, 232, 240, .55);
    letter-spacing: .02em;
}
.rd-download-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 139, 250, .35);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

/* Active (Nova member) — lavender accent, ready to download. */
.rd-download-btn-active {
    background:
        linear-gradient(135deg, rgba(167, 139, 250, .14), rgba(56, 109, 219, .06)),
        rgba(20, 22, 34, .55);
    border-color: rgba(167, 139, 250, .3);
}
.rd-download-btn-active svg { color: #dcc8ff; }
.rd-download-btn-active:hover {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, .4),
        0 0 24px rgba(167, 139, 250, .2);
}

/* Free user — quieter, italic emphasis on "CCA Nova" to teach the brand. */
.rd-download-btn-nova svg {
    color: #dcc8ff;
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, .55));
    animation: rd-dl-nova-pulse 4s ease-in-out infinite;
}
@keyframes rd-dl-nova-pulse {
    0%, 100% { transform: scale(1);    opacity: .85; }
    50%      { transform: scale(1.08); opacity: 1;   }
}
.rd-download-btn-nova small em {
    color: #dcc8ff;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .04em;
}

/* Sepia + light themes inherit the structure but lose the dark glass. */
body.rd-theme-sepia .rd-download-btn,
body.rd-theme-light .rd-download-btn {
    background: rgba(0, 0, 0, .03);
    backdrop-filter: none;
    border-color: rgba(0, 0, 0, .08);
}
body.rd-theme-sepia .rd-download-btn strong,
body.rd-theme-light .rd-download-btn strong { color: inherit; }
body.rd-theme-sepia .rd-download-btn small,
body.rd-theme-light .rd-download-btn small { color: rgba(0, 0, 0, .55); }

@media (prefers-reduced-motion: reduce) {
    .rd-download-btn-nova svg { animation: none !important; }
}

/* ==================================================================
   Navbar — brand mark (.brand-mark)
   Replaces the centre .logo that used to live mid-navbar. The mark now
   sits in .nav-left so the home anchor reads from the same spot on
   every page. When the viewer has Nova, renderNovaBadge() drops a
   compact dot-variant badge inline right after the wordmark.
   ================================================================== */

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 4px 10px 4px 6px;
    margin-left: 2px;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease-out;
}
.brand-mark:hover { background: rgba(255, 255, 255, .04); }
[data-theme="light"] .brand-mark:hover { background: rgba(0, 0, 0, .04); }

.brand-mark-glyph {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    /* Same artwork as the browser favicon (images/icon-192.png).
       Image-rendering hints keep the mark crisp when scaled down from
       512→30. NO brightness(0) invert(1) here: the mark is a lavender
       isometric cube on transparency, and forcing it white would strip
       the brand colour out of it. (The tile-backed logo it replaced fared
       worse still — whitening flattened the whole tile into a blank white
       square, which is how the mark "disappeared" site-wide.) Render the
       artwork as-is. */
    image-rendering: -webkit-optimize-contrast;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.brand-mark:hover .brand-mark-glyph { transform: scale(1.06); }
.brand-mark:active .brand-mark-glyph { transform: scale(.97); }
.brand-mark-name {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 2px;
    /* Matches the uploaded CCA wordmark: lavender → cyan-blue. */
    background: linear-gradient(100deg, #cbb4f7 0%, #8ea0f1 48%, #45b8ef 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
/* CCA wordmark image (the uploaded title art) used in the header brand. */
.brand-mark-wordmark {
    height: 14px;
    width: auto;
    display: block;
    flex-shrink: 0;
    /* Force the wordmark to solid white, same as the landing page. */
    filter: brightness(0) invert(1);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.brand-mark:hover .brand-mark-wordmark { transform: scale(1.04); }
[data-theme="light"] .brand-mark-name {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 60%, #be185d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Nova badge inline next to the brand mark — keep the 'dot' variant
   tight; the navbar is the highest-traffic surface so we don't want it
   to dominate the brand identity. */
.brand-mark .nova-badge-dot {
    margin-left: 0;
    height: 18px;
    width: 18px;
    padding: 0;
}
.brand-mark .nova-badge-dot .nova-badge-glyph { width: 11px; height: 11px; }

/* ---- Nova-viewer brand mark ----------------------------------------
   When a Nova member is browsing, the navbar flips to the same
   gold-on-black palette they wear on their badge. This isn't a brand
   *change* — the layout, weights and proportions stay identical — just
   a tier-aware repaint so the membership reads everywhere. Toggled by
   .navbar-nova (active members) and .navbar-nova-lifetime (warmer,
   richer gold) which header.php applies based on novaStatus().

   Pattern: a tinted glass background on the .brand-mark anchor that
   reads as "the logo lives inside a Nova chip", plus a gold gradient
   wordmark. The logo glyph keeps its original artwork (looks weird if
   we recolour it, since the icon is multi-hued), but gets a gold
   drop-shadow halo so it visually belongs in the chip. */
.navbar-nova .brand-mark {
    background:
        linear-gradient(135deg, rgba(167, 139, 250, .14), rgba(236, 72, 153, .06) 50%, rgba(56, 109, 219, .12)) padding-box,
        rgba(12, 13, 22, .55) padding-box,
        linear-gradient(135deg, rgba(196, 181, 253, .55) 0%, rgba(236, 72, 153, .35) 50%, rgba(56, 109, 219, .45) 100%) border-box;
    border: 1px solid transparent;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 4px 14px rgba(124, 58, 237, .22);
    transition: background .2s ease-out, box-shadow .2s ease-out;
}
.navbar-nova .brand-mark:hover {
    background:
        linear-gradient(135deg, rgba(167, 139, 250, .22), rgba(236, 72, 153, .10) 50%, rgba(56, 109, 219, .18)) padding-box,
        rgba(12, 13, 22, .6) padding-box,
        linear-gradient(135deg, rgba(196, 181, 253, .75) 0%, rgba(236, 72, 153, .45) 50%, rgba(56, 109, 219, .6) 100%) border-box;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .10) inset,
        0 6px 18px rgba(124, 58, 237, .35);
}
.navbar-nova .brand-mark-glyph {
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, .55))
            drop-shadow(0 0 12px rgba(124, 58, 237, .35));
}
/* When the navbar serves the gold Nova logo, the artwork already
   carries its own black disc + gold rim. Swap the violet halo for a
   warmer amber drop-shadow so the small mark reads as the same logo
   from /nova.php, just sized down. Lifetime members override below
   for an even stronger gold glow. */
.brand-mark-glyph-nova {
    border-radius: 50%;
    /* Slight scale up so the logo's gold ring is more visible at 28px. */
    width: 30px !important;
    height: 30px !important;
    filter:
        drop-shadow(0 0 4px rgba(252, 211, 77, .65))
        drop-shadow(0 0 10px rgba(245, 158, 11, .35)) !important;
}
.navbar-nova .brand-mark:hover .brand-mark-glyph-nova {
    filter:
        drop-shadow(0 0 5px rgba(252, 211, 77, .8))
        drop-shadow(0 0 14px rgba(245, 158, 11, .5)) !important;
}
.navbar-nova .brand-mark-name {
    background: linear-gradient(180deg, #fff 0%, #e9d5ff 55%, #dcc8ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 0 14px rgba(196, 181, 253, .35);
}
/* Light theme — keep the gradient but in a darker register so it stays
   legible on white. */
[data-theme="light"] .navbar-nova .brand-mark-name {
    background: linear-gradient(180deg, #4c1d95 0%, #7c3aed 55%, #be185d 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* Lifetime — full gold-on-black "premium membership card" treatment.
   Warmer gradients, amber halo on the glyph, gold wordmark. This is the
   tier the user described — the same look as the lifetime badge button,
   propagated to the navbar. */
.navbar-nova.navbar-nova-lifetime .brand-mark {
    background:
        linear-gradient(135deg, rgba(252, 211, 77, .18), rgba(236, 72, 153, .06) 50%, rgba(167, 139, 250, .14)) padding-box,
        rgba(10, 8, 4, .72) padding-box,
        linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #dcc8ff 100%) border-box;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .10) inset,
        0 6px 18px rgba(202, 138, 4, .35),
        0 0 0 1px rgba(0, 0, 0, .25);
}
.navbar-nova.navbar-nova-lifetime .brand-mark:hover {
    background:
        linear-gradient(135deg, rgba(252, 211, 77, .26), rgba(236, 72, 153, .12) 50%, rgba(167, 139, 250, .20)) padding-box,
        rgba(10, 8, 4, .78) padding-box,
        linear-gradient(135deg, #fff4d6 0%, #f59e0b 45%, #dcc8ff 100%) border-box;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .14) inset,
        0 10px 26px rgba(202, 138, 4, .48),
        0 0 0 1px rgba(0, 0, 0, .25);
}
.navbar-nova.navbar-nova-lifetime .brand-mark-glyph {
    filter: drop-shadow(0 0 6px rgba(253, 230, 138, .85))
            drop-shadow(0 0 14px rgba(245, 158, 11, .55));
}
/* Lifetime + gold logo — deeper amber glow that breathes very slowly,
   matching the breathing wordmark next to it. */
.navbar-nova.navbar-nova-lifetime .brand-mark-glyph-nova {
    filter:
        drop-shadow(0 0 5px rgba(253, 230, 138, .9))
        drop-shadow(0 0 14px rgba(245, 158, 11, .55)) !important;
    animation: nv-brand-glyph-breathe 5.4s ease-in-out infinite;
}
@keyframes nv-brand-glyph-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .navbar-nova.navbar-nova-lifetime .brand-mark-glyph-nova { animation: none !important; }
}
.navbar-nova.navbar-nova-lifetime .brand-mark-name {
    background: linear-gradient(180deg, #fff 0%, #fde68a 55%, #f59e0b 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 0 14px rgba(252, 211, 77, .42);
}
[data-theme="light"] .navbar-nova.navbar-nova-lifetime .brand-mark-name {
    background: linear-gradient(180deg, #78350f 0%, #b45309 55%, #c2410c 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* Slow gold→amber breathing — the brand sits in the nav all day so it
   needs to be calm; this is a 6s ease-in-out drift between two stops,
   not a sparkle. Hidden under reduced-motion. */
.navbar-nova.navbar-nova-lifetime .brand-mark-name {
    animation: nova-brand-gold-breathe 6.5s ease-in-out infinite;
    background-size: 100% 200%;
}
@keyframes nova-brand-gold-breathe {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 0% 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .navbar-nova.navbar-nova-lifetime .brand-mark-name { animation: none !important; }
}

/* The header brand is the standard CCA logo + wordmark for EVERYONE — no
   Nova glow on the logo, no gold wordmark, no badge. (Overrides the
   .navbar-nova brand rules above; the profile chip keeps its Nova look.) */
.navbar-nova .brand-mark,
.navbar-nova.navbar-nova-lifetime .brand-mark { box-shadow: none !important; border: 0 !important; background: none !important; }
.navbar-nova .brand-mark:hover,
.navbar-nova.navbar-nova-lifetime .brand-mark:hover { background: rgba(255,255,255,.04) !important; }
/* Nova viewers get the same untouched artwork as everyone else — the old
   white-force is gone (it blanked the purple-tile logo into a square). */
.navbar-nova .brand-mark-glyph,
.navbar-nova.navbar-nova-lifetime .brand-mark-glyph { filter: none !important; }
.navbar-nova .brand-mark-name,
.navbar-nova.navbar-nova-lifetime .brand-mark-name {
    background: linear-gradient(100deg, #cbb4f7 0%, #8ea0f1 48%, #45b8ef 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    animation: none !important;
}

/* Mobile — tighten everything so the brand still fits alongside the
   HUD profile chip and the back button on narrow screens. */
@media (max-width: 640px) {
    .brand-mark { gap: 5px; padding: 3px 6px 3px 4px; }
    .brand-mark-glyph { width: 30px; height: 30px; }
    .brand-mark-glyph-nova { width: 24px !important; height: 24px !important; }
    .brand-mark-name { font-size: .88rem; letter-spacing: 1.4px; }
    .brand-mark-wordmark { height: 14px; }
}
@media (max-width: 420px) {
    /* Below ~420px the upper-left gets really crowded. Hide the
       wordmark and keep just the glyph + badge — the glyph still works
       as the home anchor. */
    .brand-mark-name { display: none; }
}

/* ── Mobile headers: logo only (no CCA wordmark), a bigger logo, and NO
   profile chip in the header. Applies across the main navbar, the OtakuRun
   topbar and the MovieVault chrome. Account access stays available via the
   bottom nav + sidebar drawer. (2026-06-20) ─────────────────────────────── */
@media (max-width: 768px) {
    /* Main navbar — drop the CCA wordmark, let the (enlarged) glyph carry the
       brand on its own. */
    /* Logo-only on phones across EVERY header system, all at the same
       30px glyph so the brand never changes size page-to-page. The CCA
       wordmark / section title is dropped on phones (room is tight); the
       glyph alone carries the brand and anchors Home. */
    .brand-mark-wordmark,
    .brand-mark-name   { display: none !important; }
    .brand-mark-glyph  { width: 30px !important; height: 30px !important; }

    /* OtakuRun topbar (explore/schedule/comics/manga) */
    .oh-tb-title       { display: none !important; }
    .oh-tb-logo img    { width: 30px !important; height: 30px !important; }

    /* OtakuRun floating chrome (anime/watch) + MovieVault chrome
       (movie pages) — hide their wordmarks too so these pages are
       logo-only on phones, exactly like the navbar/topbar above. */
    .oh-wordmark,
    .mvx-wordmark      { display: none !important; }

    /* Remove the profile chip from the header on every page that shows one:
       main navbar (.nav-pfp button + its #pfpDd dropdown wrapper) and the
       Watchtower chrome (.wt-pfp — OtakuRun & MovieVault). */
    .nav-pfp,
    #pfpDd,
    .wt-pfp            { display: none !important; }
}

/* ==================================================================
   HUD profile — right-zone variant
   The .hud-profile now lives in .nav-right (replacing the plain pfp).
   Avatar anchors the right edge; the name + Lv/rank read in toward it.
   The .nav-pfp class is kept as a hook so existing JS animations (e.g.
   the "missions moved" banner flight) still find the target — but its
   30px width/height base style must be neutralised on this element.
   ================================================================== */

/* When .nav-pfp is on the hud-profile, drop the round-pfp width/height
   so the chip can size to its content like the original left-zone HUD. */
.hud-profile.nav-pfp {
    width: auto;
    height: auto;
    border-radius: 999px;
    overflow: visible;
    display: inline-flex;
}

/* Right-zone layout: ident on the LEFT of the avatar, padding mirrored
   so the visual breathing room is on the name side, and the ident text
   right-aligned for clean optical alignment with the avatar edge. */
.hud-profile.hud-profile-right {
    padding: 4px 4px 4px 12px;
}
.hud-profile-right .hud-ident {
    align-items: flex-end;
    text-align: right;
}
.hud-profile-right .hud-name {
    /* Tighter cap on the right side — the navbar is denser here than
       the old left-zone position was. */
    max-width: 120px;
}

/* Mobile — collapse the ident below 640px so the HUD chip stays a clean
   avatar circle on phones, but with Lv as a tiny chip below for status. */
@media (max-width: 640px) {
    .hud-profile.hud-profile-right { padding: 2px; }
    .hud-profile-right .hud-ident { display: none; }
    .hud-profile-right .hud-avatar { width: 30px; height: 30px; font-size: .72rem; }
}

/* Nova members get the gradient lavender ring around the avatar, matching
   the byline + profile-page treatment. Skipped on mobile where the chip
   collapses to a tiny circle (the ring would dominate). */
.hud-profile-right.is-nova .hud-avatar {
    box-shadow:
        0 0 0 2px #dcc8ff,
        0 0 12px rgba(167, 139, 250, .5);
}

/* When the viewer is a Nova member, the whole HUD profile chip gets the
   same glass-pill treatment as the brand mark, so the upper-left and
   upper-right of the navbar both read as "premium". Lifetime members
   get the warmer gold register. */
.navbar-nova .hud-profile-right {
    background:
        linear-gradient(135deg, rgba(167, 139, 250, .14), rgba(236, 72, 153, .06) 50%, rgba(56, 109, 219, .12)) padding-box,
        rgba(12, 13, 22, .55) padding-box,
        linear-gradient(135deg, rgba(196, 181, 253, .55) 0%, rgba(236, 72, 153, .35) 50%, rgba(56, 109, 219, .45) 100%) border-box !important;
    border: 1px solid transparent !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 4px 14px rgba(124, 58, 237, .22) !important;
}
.navbar-nova .hud-profile-right .hud-name {
    background: linear-gradient(180deg, #fff 0%, #e9d5ff 55%, #dcc8ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
[data-theme="light"] .navbar-nova .hud-profile-right .hud-name {
    background: linear-gradient(180deg, #4c1d95 0%, #7c3aed 55%, #be185d 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.navbar-nova.navbar-nova-lifetime .hud-profile-right {
    background:
        linear-gradient(135deg, rgba(252, 211, 77, .18), rgba(236, 72, 153, .06) 50%, rgba(167, 139, 250, .14)) padding-box,
        rgba(10, 8, 4, .72) padding-box,
        linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #dcc8ff 100%) border-box !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .10) inset,
        0 6px 18px rgba(202, 138, 4, .35),
        0 0 0 1px rgba(0, 0, 0, .25) !important;
}
.navbar-nova.navbar-nova-lifetime .hud-profile-right .hud-name {
    background: linear-gradient(180deg, #fff 0%, #fde68a 55%, #f59e0b 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 0 12px rgba(252, 211, 77, .35);
}
/* Lifetime avatar ring switches to gold to match. */
.navbar-nova.navbar-nova-lifetime .hud-profile-right.is-nova .hud-avatar {
    box-shadow:
        0 0 0 2px #fde68a,
        0 0 12px rgba(252, 211, 77, .55) !important;
}

/* Navbar profile chip: plain larger avatar — no name/level, no glow,
   no Nova pill/ring. (Overrides the Nova chip + ring rules above.) */
.hud-profile-right .hud-ident { display: none !important; }
.navbar-nova .hud-profile-right,
.navbar-nova.navbar-nova-lifetime .hud-profile-right {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.hud-profile-right .hud-avatar,
.hud-profile-right.is-nova .hud-avatar,
.navbar-nova.navbar-nova-lifetime .hud-profile-right.is-nova .hud-avatar {
    box-shadow: none !important;
    width: 42px !important; height: 42px !important; font-size: .9rem !important;
}

/* =====================================================================
   Watch page — Episode comments panel
   ===================================================================== */
.w-comments {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    color: var(--text-primary);
    background: rgba(0, 0, 0, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px rgba(0,0,0,.45);
    display: flex; flex-direction: column;
    height: 78vh;
    max-height: 84vh;
    transform: translateY(calc(100% - 62px));
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.w-comments.is-open { transform: translateY(0); }
.w-comments.is-dragging { transition: none; }
.w-comments[hidden] { display: none; }

.w-comments-grab {
    flex: 0 0 auto;
    width: 44px; height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,.28);
    margin: 8px auto 2px;
    cursor: grab;
    touch-action: none;
}
.w-comments-grab:active { cursor: grabbing; background: rgba(255,255,255,.45); }
.w-comments-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    margin: 0;
    padding: 10px 18px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
}
.w-comments-head h3 {
    font-size: .85rem; font-weight: 400;
    margin: 0;
    letter-spacing: -.01em;
}
.w-comments-chevron {
    margin-left: 4px;
    color: var(--text-faint);
    transition: transform .25s ease;
}
.w-comments.is-open .w-comments-chevron { transform: rotate(180deg); }
.w-comments-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 18px 18px;
}
.w-comments-ep {
    font-size: .8rem; color: var(--text-faint);
}
.w-comments-count {
    margin-left: auto;
    font-size: .72rem;
    color: var(--text-faint);
    background: rgba(255,255,255,.04);
    padding: 2px 9px; border-radius: 999px;
}

/* Compose is a single clean input (no outer box) — the textarea is the only
   framed surface, so it no longer reads as a box-in-a-box. */
.w-comment-compose {
    margin-bottom: 18px;
    background: transparent;
    border: 0;
    padding: 0;
}
.w-comment-locked {
    margin-bottom: 16px;
    background: #000;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 10px;
    text-align: center;
}
.w-comment-locked p { margin: 6px 0 10px; font-size: .85rem; color: var(--text-faint); }
.w-comment-locked-btns {
    display: flex; gap: 8px; justify-content: center;
}
.w-comment-locked-btns button {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--link-color);
    color: #fff;
    font: 600 .78rem inherit;
    cursor: pointer;
}
.w-comment-locked-btns button.secondary {
    background: transparent;
    color: var(--text-primary);
}

.w-comment-input-wrap {
    position: relative;
    display: flex; align-items: flex-end;
    gap: 6px;
}
.w-comment-input-wrap textarea {
    flex: 1 1 auto;
    width: 100%;
    background: #000;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 8px 10px;
    font: 400 .88rem inherit;
    resize: vertical;
    min-height: 38px;
    max-height: 200px;
    outline: none;
}
.w-comment-input-wrap textarea:focus { border-color: var(--link-color); }
.w-comment-sticker-btn {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: background .15s, transform .12s;
}
.w-comment-sticker-btn:hover  { background: rgba(221,177,249,.20); }
.w-comment-sticker-btn:active { transform: scale(.93); }

.w-comment-foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px;
}
.w-comment-hint {
    flex: 1 1 auto;
    font-size: .72rem;
    color: var(--text-faint);
}
.w-comment-send {
    padding: 6px 16px;
    background: var(--link-color);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font: 600 .78rem inherit;
    cursor: pointer;
}
.w-comment-send:hover { filter: brightness(1.1); }

/* ---- Comment list + bubble ---- */
.w-comments-list {
    display: flex; flex-direction: column; gap: 12px;
}
.w-comments-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: .85rem;
    color: var(--text-faint);
}
.w-comment {
    display: flex; gap: 12px;
    padding: 8px 4px;
}
.w-comment-av {
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(236,72,153,.35));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 600 .9rem inherit;
    text-decoration: none;
}
.w-comment-av img { width: 100%; height: 100%; object-fit: cover; }
.w-comment-meta { flex: 1 1 auto; min-width: 0; }
.w-comment-meta header {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 2px;
}
.w-comment-name {
    font-weight: 600; font-size: .85rem;
    color: var(--text-primary);
    text-decoration: none;
}
.w-comment-name:hover { color: var(--link-color); }
.w-comment-time {
    font-size: .68rem;
    color: var(--text-faint);
}
.w-comment-del {
    margin-left: auto;
    background: transparent;
    border: 0; color: var(--text-faint);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    padding: 0 4px;
}
.w-comment-del:hover { color: #f87171; }
.w-comment-body {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 4px;
    word-wrap: break-word;
}
.w-comment-deleted { color: var(--text-faint); }
.w-comment-sticker {
    display: block;
    max-width: 140px; max-height: 140px;
    margin: 4px 0;
    border-radius: 8px;
}
.w-comment-sticker-sm { max-width: 110px; max-height: 110px; }
.w-comment-meta footer {
    display: flex; gap: 12px; align-items: center;
    margin-top: 4px;
}
.w-comment-like,
.w-comment-reply {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent;
    border: 0;
    color: var(--text-faint);
    font: 600 .72rem inherit;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.w-comment-like:hover  { color: #ec4899; background: rgba(236,72,153,.10); }
.w-comment-reply:hover { color: var(--link-color); background: rgba(221,177,249,.10); }
.w-comment-like-on { color: #ec4899; }
.w-comment-like svg { display: block; }

.w-comment-reply-form {
    margin: 6px 0 4px;
    padding: 6px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.w-comment-reply-form[hidden] { display: none; }
.w-comment-reply-form .w-comment-foot {
    margin-top: 6px;
    justify-content: flex-end;
}
.w-comment-cancel,
.w-comment-post-reply {
    padding: 4px 12px;
    border-radius: 999px;
    border: 0;
    font: 600 .72rem inherit;
    cursor: pointer;
}
.w-comment-cancel { background: rgba(255,255,255,.06); color: var(--text-primary); }
.w-comment-cancel:hover { background: rgba(255,255,255,.10); }
.w-comment-post-reply { background: var(--link-color); color: #fff; }
.w-comment-post-reply:hover { filter: brightness(1.1); }

.w-comment-replies {
    margin-top: 6px;
    padding-left: 8px;
    border-left: 2px solid rgba(124,58,237,.18);
    display: flex; flex-direction: column; gap: 8px;
}
.w-comment-reply-bubble .w-comment-av { width: 30px; height: 30px; font-size: .8rem; }
.w-comment-reply-bubble .w-comment-body { font-size: .85rem; }

@media (max-width: 720px) {
    .w-comments { height: 82vh; max-height: 88vh; }
    .w-comments-body { padding: 10px 12px 16px; }
    .w-comment-av { width: 32px; height: 32px; }
}

/* Page reserves space for the collapsed comments drawer (only when shown) */
body.watch-page:has(.w-comments:not([hidden])) { padding-bottom: 72px; }

/* =====================================================================
   Watch page — Oryx end-of-series review modal
   ===================================================================== */
.w-review {
    position: fixed; inset: 0;
    z-index: 1300;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: w-review-fade-in .2s ease;
}
.w-review[hidden] { display: none; }
@keyframes w-review-fade-in { from { opacity: 0 } to { opacity: 1 } }
.w-review-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.w-review-card {
    position: relative;
    background: #000;
    border: 1px solid rgba(124,58,237,.35);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 36px rgba(124,58,237,.25);
    width: min(560px, 100%);
    max-height: 86vh;
    overflow: auto;
    padding: 20px;
    color: var(--text-primary);
    animation: w-review-pop .22s cubic-bezier(.22,1,.36,1);
}
@keyframes w-review-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.w-review-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.w-review-oryx {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: linear-gradient(135deg, rgba(124,58,237,.45), rgba(236,72,153,.40));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.w-review-oryx::after { content: "O"; font: 700 1.1rem inherit; }
.w-review-oryx img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; background: transparent; }
.w-review-oryx img:not([style*="display: none"]) ~ .w-review-oryx::after { display: none; }
.w-review-head-text { flex: 1 1 auto; min-width: 0; }
.w-review-head-text h2 {
    margin: 0; font-size: 1.05rem;
}
.w-review-head-text p {
    margin: 2px 0 0;
    font-size: .82rem;
    color: var(--text-faint);
}
.w-review-close {
    background: transparent;
    border: 0; color: var(--text-faint);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.w-review-close:hover { color: var(--text-primary); }

.w-review-q {
    font: 600 .95rem inherit;
    margin: 0 0 14px;
    color: var(--text-primary);
}

/* Step 1 — recommend yes/no */
.w-review-recommend-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.w-review-rec {
    display: inline-flex; align-items: center; gap: 8px;
    justify-content: center;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font: 600 .9rem inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
}
.w-review-rec:hover  { transform: translateY(-1px); }
.w-review-rec-yes:hover { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.55); }
.w-review-rec-no:hover  { background: rgba(220,38,38,.18); border-color: rgba(220,38,38,.5); }

/* Step 2 — stars */
.w-review-stars {
    display: flex; gap: 6px;
    margin-bottom: 12px;
}
.w-review-stars button {
    flex: 1;
    background: transparent;
    border: 0;
    font-size: 2rem;
    line-height: 1;
    color: rgba(255,255,255,.18);
    cursor: pointer;
    transition: color .15s, transform .12s;
}
.w-review-stars button:hover  { transform: scale(1.06); color: #fbbf24; }
.w-review-stars button.on     { color: #fbbf24; }
.w-review-blurb {
    width: 100%;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 8px 10px;
    font: 400 .88rem inherit;
    resize: vertical;
    min-height: 44px;
    outline: none;
    margin-bottom: 12px;
}
.w-review-blurb:focus { border-color: var(--link-color); }
.w-review-step-btns {
    display: flex; justify-content: flex-end; gap: 8px;
}
.w-review-skip,
.w-review-next {
    padding: 7px 16px;
    border-radius: 999px;
    border: 0;
    font: 600 .78rem inherit;
    cursor: pointer;
}
.w-review-skip {
    background: rgba(255,255,255,.06); color: var(--text-primary);
}
.w-review-skip:hover { background: rgba(255,255,255,.10); }
.w-review-next {
    background: var(--link-color); color: #fff;
}
.w-review-next:hover { filter: brightness(1.1); }

/* Step 3 — more like this? */
.w-review-more-btns {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.w-review-more {
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font: 600 .85rem inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
    line-height: 1.35;
    text-align: center;
}
.w-review-more:hover { background: rgba(221,177,249,.18); border-color: rgba(221,177,249,.4); transform: translateY(-1px); }
.w-review-more-community:hover { background: rgba(236,72,153,.18); border-color: rgba(236,72,153,.42); }

/* Step 4 — recommendations grid */
.w-review-step-recs .w-review-q { margin-bottom: 10px; }
.w-review-recs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    max-height: 48vh;
    overflow-y: auto;
    padding: 4px;
}
.w-review-recs-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-faint);
    padding: 24px;
    font-size: .85rem;
}
.w-review-rec-card {
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform .12s, border-color .15s;
}
.w-review-rec-card:hover { transform: translateY(-2px); border-color: rgba(221,177,249,.45); }
.w-review-rec-cover {
    aspect-ratio: 3 / 4;
    background: #000;
    overflow: hidden;
}
.w-review-rec-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-review-rec-info {
    padding: 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.w-review-rec-info strong {
    font: 600 .82rem inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-review-rec-info span { font-size: .68rem; color: var(--text-faint); }
.w-review-rec-comm {
    font-size: .65rem;
    color: #4ade80;
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 520px) {
    .w-review-recommend-btns,
    .w-review-more-btns { grid-template-columns: 1fr; }
}

/* ---- Website QR Code modal ---- */
.site-qr-card {
    max-width: 360px;
    text-align: center;
}
.site-qr-frame {
    margin: 8px auto 14px;
    padding: 14px;
    width: 100%;
    max-width: 280px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.site-qr-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 200px;
}
.site-qr-canvas canvas { display: block; image-rendering: pixelated; border-radius: 4px; }
.site-qr-err {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    font-size: .85rem;
    padding: 20px;
}
.site-qr-url {
    margin: 0 auto 18px;
    padding: 8px 12px;
    font: 600 .82rem ui-monospace, SFMono-Regular, Menlo, monospace;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    word-break: break-all;
}
.site-qr-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.site-qr-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    color: rgba(255,255,255,.85);
    font: 600 .78rem inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .12s, color .2s;
}
.site-qr-btn:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
    color: #fff;
}
.site-qr-btn:active { transform: translateY(1px); }
.site-qr-btn svg { opacity: .85; }
.site-qr-btn-primary {
    background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(220,38,38,.25));
    border-color: rgba(199,155,255,.35);
    color: #fff;
}
.site-qr-btn-primary:hover {
    background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(220,38,38,.4));
    border-color: rgba(199,155,255,.6);
}
.site-qr-btn-done {
    background: rgba(34,197,94,.18);
    border-color: rgba(34,197,94,.5);
    color: #bbf7d0;
}
.site-qr-btn-done svg { opacity: 1; }


/* =====================================================================
   Desktop OtakuRun: the under-hero search bar was removed from the
   explore page. Search now lives behind the mini-header magnifier as a
   centered overlay on ALL sizes (mirrors the phone behaviour below), so
   the DOM nodes the search JS binds to still exist — they're just hidden
   until the magnifier flips body.oh-search-open. */
@media (min-width: 641px) {
  body.explore-page .otakurun-bar { display: none; }

  body.explore-page.oh-search-open .otakurun-bar {
    display: flex;
    position: fixed;
    top: 64px; left: 50%;
    transform: translateX(-50%);
    width: min(380px, calc(100% - 32px));
    max-width: 380px;
    margin: 0;
    padding: 0;
    z-index: 1300;
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex-wrap: wrap;
    gap: 10px;
  }
  body.explore-page.oh-search-open .otakurun-bar .nav-search {
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
    height: 32px !important;
    min-height: 32px !important;
  }
  /* SUB/DUB + Parties/Shuffle live in the mini-header — redundant inside
     the search overlay. */
  body.explore-page.oh-search-open .otakurun-bar .nav-aux { display: none; }
  body.explore-page.oh-search-open .otakurun-bar .nav-search-results {
    position: absolute;
    left: 14px; right: 14px;
    top: calc(100% - 2px);
    width: auto;
    max-height: 70vh;
  }
  /* Dim the page behind the overlay; tap to close (handled in JS).
     Uses ::after, not ::before — the OtakuRun page-bloom already owns
     body.explore-page.oh-domain::before, which would otherwise win. */
  body.explore-page.oh-search-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1250;
  }
}

/* =====================================================================
   OtakuRun mobile overhaul — phones only (<=640px).
   Floating mini-header on the hero (logo / search / SUB-DUB), edge-to-
   edge content, transparent hero, hidden left-side dark gradient, no
   hero progress bar, tighter card rails, darker page bg, and a global
   slide-up of body content when the main CCA navbar is hidden so the
   hero covers the top edge of the phone.
   ===================================================================== */
@media (max-width: 640px) {

  /* --- fully black page bg under the hub --- */
  body.explore-page { background: #2b1557; }

  /* --- edge-to-edge: kill the container/section side padding ---
     Matches the desktop-side selector at line ~37377 in specificity so
     the existing `.ex > section.ex-section { padding: 0 24px }` rule
     doesn't keep winning at this width. */
  body.explore-page .ex { padding-left: 0; padding-right: 0; max-width: 100%; }
  body.explore-page .ex > section.ex-section,
  body.explore-page .ex > .ex-search-wrap,
  body.explore-page .ex > .ex-underhero { padding-left: 8px; padding-right: 8px; }
  body.explore-page .ex-grid-header,
  body.explore-page .ex-moods,
  body.explore-page .ex-section-head { padding-left: 0; padding-right: 0; }
  body.explore-page .ex-section { margin-top: 24px; }

  /* card rails: tighter gap, no big right-edge gutter */
  body.explore-page .ex-scroll-row { gap: 4px; padding-right: 12px; padding-left: 8px; }
  /* grid: tighter gap to match the rails */
  body.explore-page .ex-grid { gap: 6px; }

  /* --- mobile mini-header (floats above the transparent hero) --- */
  .oh-mhdr {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 0;
    pointer-events: none; /* let hero scroll/swipe through empty zones */
  }
  .oh-mhdr-brand,
  .oh-mhdr-actions { pointer-events: auto; }

  .oh-mhdr-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .02em;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
  }
  .oh-mhdr-logo { color: #c79bff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
  .oh-mhdr-brand-text { font-size: .98rem; }

  .oh-mhdr-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .oh-mhdr-search {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(8,8,18,.55);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .oh-mhdr-search:active { transform: scale(.94); }

  .oh-mhdr-lang {
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(8,8,18,.55);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    overflow: hidden;
  }
  .oh-mhdr-lang-btn {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.65);
    padding: 7px 11px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .oh-mhdr-lang-btn.is-on { background: #fff; color: #0a0a18; }

  /* --- hero: transparent framing + no left fade + bigger button area --- */
  body.explore-page .ex-hero {
    height: 56vh;
    min-height: 320px;
    max-height: 460px;
  }
  /* drop the masks that fade the image into the page bg */
  body.explore-page .ex-hero-bg {
    -webkit-mask-image: none;
            mask-image: none;
  }
  body.explore-page .ex-hero-bg-blur { display: none; }
  /* gradient: keep a soft bottom darken so the watch button reads, but
     kill the left-side dark wash the user called out */
  body.explore-page .ex-hero-gradient {
    background:
      linear-gradient(to top,
        rgba(0,0,0,.96) 0%,
        rgba(0,0,0,.78) 14%,
        rgba(0,0,0,.30) 36%,
        rgba(0,0,0,0)   62%);
  }
  /* hide the slide-progress bar (the orange line) on mobile */
  body.explore-page .ex-hero-progress { display: none; }
  /* hide the edge prev/next chevrons on the carousel — gesture-driven */
  body.explore-page .ex-hero-edge { display: none; }
  body.explore-page .ex-hero-counter-wrap { display: none; }

  /* hero content: smaller, lower, leave room for the full-width btn */
  body.explore-page .ex-hero-content {
    padding: 0 12px 76px;
    justify-content: flex-end;
    max-width: 100%;
  }
  body.explore-page .ex-hero-title {
    font-size: 1.12rem;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    margin: 0 0 4px;
  }
  body.explore-page .ex-hero-meta {
    margin: 0 0 4px;
    gap: 5px;
  }
  body.explore-page .ex-hero-meta-badge { font-size: .58rem; padding: 2px 6px; }
  body.explore-page .ex-hero-desc {
    font-size: .68rem;
    -webkit-line-clamp: 1;
    margin: 2px 0 0;
  }
  body.explore-page .ex-hero-genres { display: none; }

  /* watch-now: full-width pill anchored to the bottom of the hero */
  body.explore-page .ex-hero-actions {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    display: flex;
    gap: 8px;
  }
  body.explore-page .ex-hero-watch-btn {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    border-radius: 999px;
    align-self: flex-start;
    margin: 0 auto 0 0;
  }
  body.explore-page .ex-hero-bookmark {
    width: 46px; height: 46px;
    flex-shrink: 0;
  }

  /* --- below-hero otakurun control bar: hide entirely on phones by
     default. Tapping the magnifier in the mini-header flips body to
     .oh-search-open which lifts the bar into a top-fixed overlay so
     all the existing search JS (typeahead, filters, history) keeps
     working with no DOM relocation. --- */
  body.explore-page .otakurun-bar { display: none; }

  body.explore-page.oh-search-open .otakurun-bar {
    display: flex;
    position: fixed;
    /* Push below the OtakuRun chrome row (home button + brand mark +
       wordmark + mini-header all sit at top:10px with 38px height, so
       58px clears them with breathing room). Lift z-index above the
       chrome (1200) so the bar sits on top and stays tappable. */
    top: 58px; left: 0; right: 0;
    z-index: 1300;
    margin: 0;
    padding: 10px 12px;
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  body.explore-page.oh-search-open .otakurun-bar .nav-search {
    flex: 1 1 100%;
    margin: 0;
    height: 32px !important;
    min-height: 32px !important;
  }
  /* Aux + SUB/DUB are redundant inside the search overlay — they live
     in the mini-header / global nav. */
  body.explore-page.oh-search-open .otakurun-bar .nav-aux { display: none; }
  body.explore-page.oh-search-open .otakurun-bar .nav-search-results {
    position: absolute;
    left: 12px; right: 12px;
    top: calc(100% - 2px);
    max-height: 70vh;
  }

  /* Page scrim while the search overlay is open. Sits above the chrome
     buttons (z-index 1200) so the whole top row dims while searching;
     the bar itself (z 1300) and its results panel float above the
     scrim. Tap the scrim to close. (::after — ::before is the page bloom.) */
  body.explore-page.oh-search-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1250;
  }

  /* Mobile body slide-up when navbar is hidden — desktop is handled by
     the global rule below. `!important` because `body:has(#mainNavbar.navbar-hud)`
     (line ~30903) carries ID-level specificity and would otherwise win. */
  body.nav-is-hidden { padding-top: 0 !important; }
}

/* =====================================================================
   Navbar pull-down handle — visible on every viewport when the main
   navbar auto-hides. Mobile renders the original compact tab; desktop
   gets a wider, more discoverable chevron pill so users don't have to
   guess that hovering the top edge reveals the nav.
   ===================================================================== */
.nav-pulldown {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    display: none;
    align-items: flex-end;
    justify-content: center;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}
.nav-pulldown.is-visible { display: inline-flex; }

/* Desktop look — a wider rounded tab with a faint gradient + soft glow.
   Slides down a few pixels on hover so it feels grab-able. */
.nav-pulldown {
    width: 96px; height: 22px;
    padding: 0 14px 3px;
    background: linear-gradient(180deg, rgba(20, 22, 44, .82), rgba(10, 11, 26, .82));
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(167, 139, 250, .18) inset;
    transition: transform .18s ease, color .15s ease, box-shadow .18s ease, background .15s ease;
}
.nav-pulldown::before {
    /* Subtle brand-coloured glow strip under the chevron */
    content: "";
    position: absolute;
    left: 14px; right: 14px; top: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .55), transparent);
    opacity: .65;
    transition: opacity .15s ease;
}
.nav-pulldown svg {
    width: 18px; height: 10px;
    transition: transform .15s ease;
}
.nav-pulldown:hover {
    transform: translateX(-50%) translateY(2px);
    color: #fff;
    background: linear-gradient(180deg, rgba(30, 28, 60, .92), rgba(16, 14, 34, .92));
    box-shadow:
        0 8px 22px rgba(124, 58, 237, .35),
        0 0 0 1px rgba(167, 139, 250, .32) inset;
}
.nav-pulldown:hover::before { opacity: 1; }
.nav-pulldown:hover svg { transform: translateY(1px); }
.nav-pulldown:active {
    transform: translateX(-50%) translateY(3px) scale(.97);
    background: linear-gradient(180deg, rgba(40, 36, 76, .95), rgba(20, 18, 40, .95));
}

/* Mobile — keep the original compact tab so it doesn't dominate small
   screens. Overrides the desktop pill defined above. */
@media (max-width: 640px) {
    .nav-pulldown {
        width: 56px; height: 18px;
        padding: 0 0 2px;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        background: rgba(10, 10, 22, .72);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
        color: rgba(255, 255, 255, .7);
    }
    .nav-pulldown::before { display: none; }
    .nav-pulldown svg { width: 16px; height: 10px; }
    .nav-pulldown:hover,
    .nav-pulldown:active {
        transform: translateX(-50%);
        background: rgba(20, 20, 40, .85);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
        color: rgba(255, 255, 255, .85);
    }
}

/* ====================================================================
   MESSAGES — long-press action popup, floating variant.
   - Anchored to the long-pressed bubble (positioned by JS).
   - Small, rounded card with frosted backdrop dim.
   - Highlights the target bubble while the menu is open.
   =================================================================== */
body.msg-page .msg-action-overlay {
    /* No `display` here — JS toggles inline display:none ↔ block so
       the overlay actually hides between long-presses. */
    align-items: initial;
    justify-content: initial;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1500;
}
body.msg-page .msg-action-panel {
    position: absolute !important;
    width: auto !important;
    max-width: 220px !important;
    min-width: 180px;
    padding: 6px !important;
    gap: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #0e1a22, #07111a) !important;
    border: 1px solid rgba(199, 155, 255, .22) !important;
    box-shadow:
        0 18px 40px -8px rgba(0, 0, 0, .7),
        0 0 24px -8px rgba(199, 155, 255, .35) !important;
    transform: scale(.92) translateY(-4px) !important;
    transform-origin: top center;
    opacity: 0;
    transition: opacity .14s ease, transform .14s cubic-bezier(.34,1.56,.64,1) !important;
    z-index: 1;
}
body.msg-page .msg-action-overlay.visible .msg-action-panel {
    opacity: 1;
    transform: scale(1) translateY(0) !important;
}
body.msg-page .msg-action-item {
    padding: 9px 12px !important;
    font-size: .82rem !important;
    gap: 10px !important;
    border-radius: 9px !important;
    color: #d8e6ee !important;
}
body.msg-page .msg-action-item svg {
    width: 15px; height: 15px;
    color: rgba(216, 230, 238, .65) !important;
}
body.msg-page .msg-action-item:hover {
    background: rgba(199, 155, 255, .10) !important;
}
body.msg-page .msg-action-item:hover svg {
    color: #c79bff !important;
}
body.msg-page .msg-action-item.msg-action-danger        { color: #fca5a5 !important; }
body.msg-page .msg-action-item.msg-action-danger svg    { color: #fca5a5 !important; }
body.msg-page .msg-action-item.msg-action-danger:hover  { background: rgba(239, 68, 68, .14) !important; }
body.msg-page .msg-action-item.msg-action-danger:hover svg { color: #ef4444 !important; }

/* Subtle highlight on the long-pressed message — soft teal ring around
   the bubble so the user can see exactly which message the menu acts on. */
body.msg-page .msg-bubble-actioned .msg-bubble {
    outline: 2px solid rgba(199, 155, 255, .55);
    outline-offset: 2px;
    box-shadow: 0 0 22px -4px rgba(199, 155, 255, .35) !important;
    transition: outline-color .15s, box-shadow .15s;
}



/* Report-a-problem modal — mirrors .w-skipset visual language. */
.w-report-mask {
    position: fixed; inset: 0;
    z-index: 70;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
}
.w-report-mask[hidden] { display: none; }
.w-report {
    position: fixed;
    z-index: 71;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: min(420px, calc(100vw - 32px));
    background: #000;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 18px 20px;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.w-report[hidden] { display: none; }
.w-report-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.w-report-head h3 { font-size: 1rem; margin: 0; flex: 1; }
.w-report-x {
    background: transparent; border: none; color: #999;
    font-size: 1.5rem; cursor: pointer; padding: 0 6px;
}
.w-report-x:hover { color: #fff; }
.w-report-hint { font-size: .78rem; color: #8a8a99; margin: 0 0 12px; }
.w-report-cats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
    margin-bottom: 12px;
}
.w-report-cats label {
    display: flex; align-items: center; gap: 7px;
    font-size: .82rem; color: #d0d0db;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}
.w-report-cats label:hover { background: rgba(255,255,255,.03); }
.w-report-cats input[type="radio"] {
    accent-color: #ff8a3d;
    width: 14px; height: 14px;
    margin: 0;
}
.w-report textarea {
    width: 100%; box-sizing: border-box;
    padding: 8px 10px;
    font-size: .88rem;
    background: #000;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    color: #fff;
    resize: vertical;
    font-family: inherit;
}
.w-report-foot {
    display: flex; justify-content: flex-end; margin-top: 12px;
}
.w-report-submit {
    padding: 9px 20px;
    font-size: .85rem; font-weight: 600;
    background: #ff8a3d;
    border: none; border-radius: 6px;
    color: #1a1208;
    cursor: pointer;
}
.w-report-submit:hover { background: #ffa05c; }
.w-report-submit:disabled { opacity: .55; cursor: wait; }
@media (max-width: 480px) {
    .w-report-cats { grid-template-columns: 1fr; }
}

/* ============================================================
   OTAKURUN HERO — 1:1 MovieVault clone (layout · design · buttons ·
   positions). Mirrors movies.php `.mvx-hero` exactly; only the tag-dot
   accent is OtakuRun lavender instead of MovieVault pink. Scoped to
   body.explore-page + placed last so it overrides every earlier
   .ex-hero* rule by specificity AND source order.
   ============================================================ */
body.explore-page .ex-hero {
    height: clamp(480px, 78vh, 820px);
    margin-bottom: 28px;
}
body.explore-page .ex-hero-gradient {
    background:
        linear-gradient(to top,   #050507 0%, rgba(5,5,7,.85) 18%, rgba(5,5,7,.4) 45%, rgba(5,5,7,.05) 75%, transparent 100%),
        linear-gradient(to right, rgba(5,5,7,.85) 0%, rgba(5,5,7,.45) 35%, transparent 65%);
}
body.explore-page .ex-hero-content {
    position: relative;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 56px 80px;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 2;
    color: #fff;
}
body.explore-page .ex-hero-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #fff;
    backdrop-filter: blur(8px);
    margin-bottom: 14px;
    width: max-content;
}
body.explore-page .ex-hero-tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #ddb1f9;
    box-shadow: 0 0 0 0 rgba(221,177,249,.7);
    animation: exHeroPulse 1.6s ease-out infinite;
}
@keyframes exHeroPulse {
    0%   { box-shadow: 0 0 0 0 rgba(221,177,249,.6); }
    100% { box-shadow: 0 0 0 8px rgba(221,177,249,0); }
}
body.explore-page .ex-hero-title {
    margin: 0;
    width: auto;
    max-width: 720px;
    font-size: clamp(1.3rem, 3vw, 2.3rem);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.1;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    -webkit-line-clamp: 2;
    text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
body.explore-page .ex-hero-meta {
    margin: 12px 0 8px;
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    align-items: center;
    font-size: .82rem;
    color: rgba(255,255,255,.78);
}
body.explore-page .ex-hero-meta-pill {
    padding: 2px 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
}
body.explore-page .ex-hero-meta-score { color: #fbbf24; font-weight: 700; }
body.explore-page .ex-hero-desc {
    margin: 4px 0 22px;
    max-width: 580px;
    font-size: .98rem; line-height: 1.55;
    color: rgba(255,255,255,.82);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
body.explore-page .ex-hero-actions {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    position: static;
}
body.explore-page .ex-hero-actions .ex-hero-watch-btn {
    height: auto; align-self: auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px;
    background: #ddb1f9; color: #000;
    border: 0; border-radius: 999px;
    font-size: .92rem; font-weight: 800; letter-spacing: .01em;
    text-decoration: none; cursor: pointer;
    backdrop-filter: none;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body.explore-page .ex-hero-actions .ex-hero-watch-btn:hover {
    transform: translateY(-1px); background: #e7c6fb;
    box-shadow: none;
}
body.explore-page .ex-hero-actions .ex-hero-watch-btn:active { transform: translateY(0) scale(.98); }
body.explore-page .ex-hero-watch-btn svg { width: 14px; height: 14px; }
body.explore-page .ex-hero-info-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    font-size: .92rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background .15s ease, border-color .15s ease;
}
body.explore-page .ex-hero-info-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); }
body.explore-page .ex-hero-info-btn svg { width: 14px; height: 14px; }
body.explore-page .ex-hero-dots {
    position: absolute;
    bottom: 26px; right: 56px;
    display: flex !important;          /* beats the earlier .ex-hero-dots{display:none!important} */
    gap: 8px; z-index: 3;
}
body.explore-page .ex-hero-dot {
    width: 28px; height: 3px; padding: 0;
    background: rgba(255,255,255,.25);
    border: 0; border-radius: 4px; cursor: pointer;
    transition: background .2s ease, width .2s ease;
}
body.explore-page .ex-hero-dot.is-active { background: #fff; width: 44px; }
@media (max-width: 720px) {
    body.explore-page .ex-hero { height: clamp(440px, 72vh, 620px); margin-bottom: 18px; }
    body.explore-page .ex-hero-content { padding: 0 22px 60px; justify-content: flex-end; }
    body.explore-page .ex-hero-dots { right: 22px; bottom: 18px; }
}
/* Re-assert the clone on the small breakpoint (overrides the older
   explore-page mobile redesign that restructured these). */
@media (max-width: 640px) {
    body.explore-page .ex-hero-content { padding: 0 22px 60px; justify-content: flex-end; }
    body.explore-page .ex-hero-title { font-size: clamp(1.3rem, 5.4vw, 1.85rem); }
    body.explore-page .ex-hero-desc { font-size: .9rem; -webkit-line-clamp: 3; margin: 4px 0 20px; }
    body.explore-page .ex-hero-actions { position: static; left: auto; right: auto; bottom: auto; }
    body.explore-page .ex-hero-actions .ex-hero-watch-btn { width: auto; }
}

/* Page background — mirrors MovieVault's body.mvx-page (#050507 + a
   fixed full-page bloom behind all content), recolored to OtakuRun
   lavender. Scoped to .oh-domain so it only touches OtakuRun explore,
   never MovieVault (which keeps its own purple/pink/blue bloom). */
/* Pure flat black — matches MovieVault's body.mvx-page (#000, no bloom). */
body.explore-page.oh-domain { background: #2b1557; }
body.explore-page.oh-domain::before { display: none; }

/* ============================================================
   MANGA + COMICS + ANIME explore — FIT TO FULL SCREEN WIDTH (2026-06-14,
   Ashim: "make it fully cover the screen / fit to width"). The base caps
   .ex at 1200px (a narrow centered column on desktop); remove the cap so
   the explore hubs fill the entire viewport width, and on desktop enlarge
   the covers so the rows/grid fill that width with big readable cards
   instead of small ones leaving gaps. In style.css (not manga.css)
   because explore.php doesn't load manga.css. Scoped to the explore
   contexts; the anime DETAIL page (.an-*) and the readers are untouched. */
body[data-ai-context="manga"] .ex,
body[data-ai-context="comics"] .ex,
body[data-ai-context="explore"] .ex {
    max-width: none !important; margin-left: auto !important; margin-right: auto !important;
}
@media (min-width: 1024px) {
    /* Rail cards GROW to fill the row when a section is short (few cards →
       they stretch to span the full width), but keep their size and scroll
       when a section is long. flex-grow only kicks in when there's free
       space, so many-card rows still scroll normally. aspect-ratio 2/3 keeps
       the posters proportional as they widen. */
    body[data-ai-context="manga"] .ex-scroll-row .ex-card-lg,
    body[data-ai-context="comics"] .ex-scroll-row .ex-card-lg,
    body[data-ai-context="explore"] .ex-scroll-row .ex-card-lg {
        flex: 1 0 244px !important; width: auto !important; min-width: 244px !important;
    }
    /* Browse grid: auto-fit (not auto-fill) so the columns stretch to fill
       the full width even when there are only a few items. */
    body[data-ai-context="manga"] .ex-grid,
    body[data-ai-context="comics"] .ex-grid,
    body[data-ai-context="explore"] .ex-grid { grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)) !important; }
    /* OtakuRun (anime) + manga cards match MovieVault's 220px poster exactly. */
    body[data-ai-context="explore"] .ex-scroll-row .ex-card-lg,
    body[data-ai-context="manga"] .ex-scroll-row .ex-card-lg {
        flex: 1 0 220px !important; min-width: 220px !important;
    }
    body[data-ai-context="explore"] .ex-grid,
    body[data-ai-context="manga"] .ex-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
}

/* ============================================================
   Bottom "Home" button — manga/comic pages end with a Home link so you
   can always get back to the homepage from the very bottom (2026-06-14).
   ============================================================ */
.oh-bottom-home { display: flex; justify-content: center; padding: 30px 16px 44px; }
.oh-home-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
    color: #fff; text-decoration: none; font: 700 .9rem/1 system-ui, sans-serif;
    transition: background .15s, transform .15s;
}
.oh-home-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }

/* ============================================================================
   Installed-app polish — only applies when launched as an installed PWA / app
   (display-mode standalone or fullscreen), NEVER in a normal browser tab.
   Kills the "this is just a browser" tells: pull-to-refresh, rubber-band
   overscroll, the tap-flash highlight, and long-press text selection on chrome.
   ========================================================================== */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  html, body {
    overscroll-behavior: none;          /* no pull-to-refresh, no bounce reload */
    -webkit-tap-highlight-color: transparent;
  }
  body {
    -webkit-user-select: none;          /* no long-press selection on app chrome */
    user-select: none;
    -webkit-touch-callout: none;        /* no iOS long-press menu */
  }
  /* Real content the user should still be able to select / type in. */
  input, textarea, [contenteditable], .msg-bubble, .cmt-body, p, article {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ============================================================
   Burger / sidebar tabs — matched to the home dashboard drawer
   (.cyh-drawer): flat always-open groups, uppercase section
   labels, plain-text tabs, dark blurred panel, lavender hovers.
   No accordions, no icons.
   ============================================================ */
.sidebar {
    width: 248px;
    background: rgba(14,12,22,.97);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border-right: 1px solid rgba(255,255,255,.08);
}
.sb-nav { padding: 10px 14px calc(env(safe-area-inset-bottom) + 28px); }

/* flatten the <details> accordions into always-open flat groups */
.sb-nav .sb-group { margin: 14px 0 0 !important; border: 0 !important; background: none !important; }
.sb-nav .sb-group:first-of-type { margin-top: 2px !important; }
.sb-nav .sb-group-body,
.sb-nav .sb-group-body-nav { display: block !important; height: auto !important; padding: 0 !important; background: none !important; }

/* summary → uppercase group label like .cyh-dr-group */
.sb-nav .sb-group-title,
.sb-nav .sb-group-title-icon {
    font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .13em !important;
    text-transform: uppercase; color: #7d7795 !important; background: none !important;
    padding: 0 14px 6px !important; margin: 0 !important; border-radius: 0 !important;
    cursor: default; list-style: none; pointer-events: none;
}
.sb-nav .sb-group-title::-webkit-details-marker { display: none; }
.sb-nav .sb-group-title::marker { content: ""; }
.sb-nav .sb-group-title svg { display: none !important; }
.sb-nav .sb-group[open] .sb-group-title { color: #7d7795 !important; }

/* tabs → flat plain-text items like .cyh-dr-item */
.sb-nav .sb-link {
    display: block !important; padding: 9px 14px !important; border-radius: 11px !important;
    color: #a59fc0 !important; font-weight: 600 !important; font-size: .92rem !important;
    text-decoration: none; background: none !important; transform: none !important; gap: 0 !important;
}
.sb-nav .sb-link svg { display: none !important; }
.sb-nav .sb-link:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; transform: none !important; }
.sb-nav .sb-link.sb-active { background: linear-gradient(180deg,#C0A6F5,#a888f0) !important; color: #1a1030 !important; }

/* drop the primary-row divider so it reads as one flat list */
.sb-nav .sb-divider { display: none !important; }

/* =====================================================================
   LONG-PRESS MULTI-SELECT (messages sidebar)
   Holding a friend row starts a selection. 3+ picked unlocks "Create
   group"; 1-2 picked get the per-conversation actions instead.
   ===================================================================== */

/* Stop the browser turning a long press into a text selection / callout. */
body.msg-select-mode .msg-friends-list {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.msg-friend-item.msg-friend-selected { background: rgba(124,58,237,.12); }
.msg-friend-item.msg-friend-selected:hover { background: rgba(124,58,237,.16); }

.msg-sel-tick {
    position: absolute;
    bottom: -1px; left: -1px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--link-color);
    color: #000;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-page);
}
.msg-friend-selected .msg-sel-tick { display: flex; }

/* Muted conversations read one notch quieter in the list. */
.msg-friend-item.msg-friend-muted .msg-friend-top strong { opacity: .62; }

.msg-sel-bar {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 10px 14px 12px;
}
.msg-sel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.msg-sel-count {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    color: var(--text-muted);
}
.msg-sel-cancel {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.msg-sel-cancel:hover { color: var(--text-heading); }

.msg-sel-actions { display: flex; flex-direction: column; gap: 6px; }
.msg-sel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.msg-sel-btn:hover {
    background: rgba(124,58,237,.06);
    border-color: var(--link-color);
}
.msg-sel-btn-primary {
    background: #ddb1f9;
    border-color: #ddb1f9;
    color: #000;
}
.msg-sel-btn-primary:hover {
    background: #b17dff;
    border-color: #b17dff;
    color: #000;
}

/* =====================================================================
   GROUP ADMIN
   ===================================================================== */

.msg-admin-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(124,58,237,.16);
    color: var(--link-color);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.msg-gm-admin {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-bottom: 12px;
}
.msg-gm-name-row { display: flex; gap: 8px; margin-bottom: 8px; }
.msg-gm-name-input { flex: 1; min-width: 0; padding-left: 14px !important; }
.msg-gm-name-save {
    flex-shrink: 0;
    padding: 0 16px;
    border-radius: 12px;
    border: none;
    background: #ddb1f9;
    color: #000;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}
.msg-gm-name-save:hover { background: #b17dff; }
.msg-gm-wp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.msg-gm-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    cursor: pointer;
}
.msg-gm-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.msg-gm-toggle-track {
    position: relative;
    width: 36px; height: 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.msg-gm-toggle-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform .15s, background .15s;
}
.msg-gm-toggle input:checked + .msg-gm-toggle-track {
    background: rgba(221,177,249,.30);
    border-color: #ddb1f9;
}
.msg-gm-toggle input:checked + .msg-gm-toggle-track .msg-gm-toggle-knob {
    transform: translateX(16px);
    background: #ddb1f9;
}
.msg-gm-toggle-label { font-size: .84rem; color: var(--text-primary); }

/* The mobile bottom nav is fixed over the list view, so lift the selection
   bar clear of it. */
@media (max-width: 768px) {
    body.msg-page:not(.msg-chat-open) .msg-sel-bar {
        padding-bottom: calc(12px + 56px + env(safe-area-inset-bottom));
    }
}

/* =====================================================================
   PHONE, WINDOWED PLAYER CHROME

   One line: [time] [==== seek ====] [HD] [download] [fullscreen].
   Everything else is moved out of the bar by applyPhoneChrome() in
   watch.js — the ⋮ button to the video's top-right corner (with Next
   episode / Captions / Mute / Cast / PiP as rows inside its menu) and
   Sub/Dub up into the page header.

   Gated on BOTH `(hover: none)` and `:not(.w-desktop-chrome)`: going
   fullscreen on a phone stamps .w-desktop-chrome on .w-player-ratio and
   restores the laptop two-row bar.

   The wrappers become `display: contents` so their children join the one
   flex line directly. That means .w-vc-row and the groups generate NO
   box — anything that needs to hide or fade must target the buttons or
   .w-vc-group-r itself, never the row.
   ===================================================================== */
@media (hover: none) {

.w-player-ratio:not(.w-desktop-chrome) .w-vc {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 30px 10px 8px;
}
.w-player-ratio:not(.w-desktop-chrome) .w-vc-row,
.w-player-ratio:not(.w-desktop-chrome) .w-vc-group-l,
.w-player-ratio:not(.w-desktop-chrome) .w-vc-group-r { display: contents; }

/* The big centre button owns play/pause here, so the transport cluster
   and the mini play button both come off the bar. */
.w-player-ratio:not(.w-desktop-chrome) .w-vc-center,
.w-player-ratio:not(.w-desktop-chrome) .w-vc-play-mini { display: none !important; }

/* Left to right, with the seek bar taking all the slack. */
.w-player-ratio:not(.w-desktop-chrome) .w-vc-time { order: 1; flex: 0 0 auto; }
.w-player-ratio:not(.w-desktop-chrome) .w-vc-seek { order: 2; flex: 1 1 auto; width: auto; min-width: 0; }
.w-player-ratio:not(.w-desktop-chrome) .w-vc-hd   { order: 3; flex: 0 0 auto; }
.w-player-ratio:not(.w-desktop-chrome) .w-vc-dl   { order: 4; flex: 0 0 auto; }
.w-player-ratio:not(.w-desktop-chrome) .w-vc-fs   { order: 5; flex: 0 0 auto; }

/* ⋮ parked in the video's top-right corner. It sits above the bar's
   z-index so its menu paints over the video, not behind it. */
.w-player-ratio:not(.w-desktop-chrome) > .w-vc-settings {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 8;
}
/* The menu opens DOWNWARD from the corner button (the bar version opens
   upward from the bottom edge). */
.w-player-ratio:not(.w-desktop-chrome) > .w-vc-settings .w-vc-set-menu {
    bottom: auto;
    top: calc(100% + 6px);
    right: 0;
}

/* Sub/Dub parked in the page header. The header's own children (logo,
   wordmark, back arrow, avatar) are position:absolute, so an appended
   node lands at the flow origin — top-left, on top of the back button
   and the logo. Pin it to the far right, which is where the spec puts
   it. .oh-headerbar is itself absolutely positioned on this page, so it
   is the positioning context. */
.oh-headerbar > .w-vc-audio {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

/* Action rows: the real control button on the left, its label beside it,
   so the menu reads as a list rather than a row of bare icons. */
/* .w-vc-btn sets display:inline-flex, which outranks the browser's
   [hidden]{display:none} — without this the HD/download buttons stay
   visible in fullscreen even after revert re-adds the attribute. */
.w-vc-btn[hidden] { display: none !important; }

.w-vc-set-actrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 6px;
    border-radius: 9px;
}
.w-vc-set-actrow:hover { background: rgba(255,255,255,.07); }
.w-vc-set-actrow .w-vc-btn { flex: 0 0 auto; }
.w-vc-set-actrow-label {
    font-size: .86rem;
    color: var(--text-primary, #ececf0);
    white-space: nowrap;
}

}

/* ============================================================
   AUTH POPUP (auth-modal.php)
   The landing page's hero sign-in box, reused as the site-wide
   sign-in popup. The .hero-auth* rules below are the landing box
   verbatim (landing.php still carries its own inline copy, which
   wins there) so the popup and the landing card stay identical;
   .hero-auth-pop then shrinks it slightly for popup use.
   ============================================================ */
/* === Hero sign-in / sign-up box ===
   A solid white card pinned to the right of the hero — the landing
   page's primary action, lifted out of the header nav. New visitors
   sign up; returning members flip the toggle to "Log in" and sign in
   inline, right here. All styles are scoped under .hero-auth so the
   white surface never leaks into the dark page. */
.hero-auth {
  position: relative;
  margin: 0 auto;
  width: min(372px, 90vw);
  box-sizing: border-box;
  background: rgba(22, 22, 34, .42);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  padding: 22px 28px 20px;
  box-shadow: 0 28px 70px -22px rgba(0, 0, 0, .55);
  z-index: 4;
  text-align: left;
  color: #e4e2f5;
  opacity: 0;
  animation: l-card-in .7s ease-out .4s both;
}
/* Cy mascot peeking over / gripping the top of the auth card.
   Sized & positioned as % of the card so it scales on mobile. */
.hero-auth-cy {
  position: absolute;
  left: 71.3%;
  top: 0;
  width: 53.3%;
  transform: translate(-50%, -93.2%);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}
.hero-auth-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}
.hero-auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 0;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #a5a4c4;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.hero-auth-tab.is-active {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .4);
}
.hero-auth-panel { display: none; }
.hero-auth-panel.is-active { display: block; }
.hero-auth-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 5px;
}
.hero-auth-sub {
  font-size: .85rem;
  line-height: 1.45;
  color: #a5a4c4;
  margin: 0 0 16px;
}
.hero-auth-err {
  display: none;
  background: rgba(239, 68, 68, .14);
  border: 1px solid rgba(239, 68, 68, .4);
  color: #fca5a5;
  font-size: .82rem;
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.hero-auth-field { margin-bottom: 11px; }
.hero-auth-field label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8d8aab;
  margin-bottom: 6px;
}
.hero-auth-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  font-size: .92rem;
  color: #fff;
  transition: border-color .2s, background .2s;
}
.hero-auth-field input::placeholder { color: #76738f; }
.hero-auth-field input:focus {
  border-color: #ddb1f9;
  background: rgba(255, 255, 255, .07);
}
.hero-auth-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: #ddb1f9;
  color: #000;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.hero-auth-btn:hover { background: #e7c6fb; transform: translateY(-1px); }
.hero-auth-btn:active { transform: scale(.98); }
.hero-auth-btn:disabled { opacity: .6; cursor: default; transform: none; }
/* "Get started" reads in black on the brand fill. */
#heroSignupBtn { color: #000; }
/* "Log in" is a plain white button — no brand color. */
#heroLoginBtn { background: #fff; color: #000; }
#heroLoginBtn:hover { background: #ececff; }
.hero-auth-foot {
  margin: 16px 0 2px;
  text-align: center;
  font-size: .82rem;
  color: #a5a4c4;
}
.hero-auth-foot a {
  color: #c79bff;
  font-weight: 700;
  text-decoration: none;
}
.hero-auth-foot a:hover { text-decoration: underline; }

/* "or" divider + the Google Identity Services button, shared below
   both panels (Google handles signup and login in one tap). */
.hero-auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: #8d8aab;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-auth-or::before,
.hero-auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .1);
}
.hero-auth-google {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
/* Bare multicolour Google "G" — no background; purely visual. */
.hero-google-icon {
  display: flex;
  line-height: 0;
  pointer-events: none;
  transition: transform .15s;
}
.hero-auth-google:hover .hero-google-icon { transform: scale(1.08); }
/* The real GIS button, invisible, centred over the icon as the click
   target (opacity:0 still receives clicks; visibility:hidden would not). */
.hero-google-gis {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* Shared fade-up entry for the stacked hero headline + auth card. */
@keyframes l-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- popup shell: dead-centre over whatever page opened it ---
   .auth-overlay's base rules (shared with the site-QR modal) pin the
   card to the top; the popup variant centres it instead. `safe center`
   keeps the top of a tall card reachable when it outgrows the viewport
   — older browsers just fall back to plain centring. */
.auth-overlay.auth-overlay-pop.active {
  align-items: center;
  align-items: safe center;
  justify-content: center;
  padding: 20px 16px;
  box-sizing: border-box;
}

/* --- the card itself: the landing box, ~10% smaller --- */
.auth-overlay-pop .hero-auth-pop {
  width: min(336px, 88vw);
  /* Extra top padding gives the close (X) its own band in the corner,
     clear of both Cy's paws and the Sign up / Log in toggle. */
  padding: 34px 24px 18px;
  /* Cy overhangs the card's top edge by ~120px at this width — the top
     margin reserves that space so his head never clips against the top
     of the viewport, while the card itself still reads as centred. */
  margin: 100px 0 0;
  /* The landing card fades in once on page load; the popup should fade
     in each time it opens instead. */
  opacity: 1;
  animation: none;
}
.auth-overlay-pop.active .hero-auth-pop { animation: l-card-in .28s ease-out both; }
.auth-overlay-pop .hero-auth-pop .hero-auth-title { font-size: 1.28rem; }
.auth-overlay-pop .hero-auth-pop .hero-auth-sub { font-size: .82rem; margin-bottom: 14px; }
.auth-overlay-pop .hero-auth-pop .hero-auth-toggle { margin-bottom: 14px; }
.auth-overlay-pop .hero-auth-pop .hero-auth-tab { padding: 8px 0; font-size: .84rem; }
.auth-overlay-pop .hero-auth-pop .hero-auth-field input { padding: 11px 13px; }
.auth-overlay-pop .hero-auth-pop .hero-auth-btn { padding: 12px; }
.auth-overlay-pop .hero-auth-pop .hero-auth-or { margin: 15px 0 12px; }

/* Settings opens the change-password / username / nickname panels in
   this same popup. They have no tab bar, so give the title back the
   breathing room the toggle was occupying. */
.auth-overlay-pop .hero-auth-pop.hero-auth-pop-solo { padding-top: 26px; }
/* …and Google sign-in has no business on a change-password panel. */
.auth-overlay-pop .hero-auth-pop-solo #authPopOr,
.auth-overlay-pop .hero-auth-pop-solo #authPopGoogle { display: none; }
.auth-overlay-pop .hero-auth-pop .auth-title { text-align: left; margin-bottom: 4px; }
.auth-overlay-pop .hero-auth-pop .auth-subtitle { text-align: left; }

/* "Get started" and "Log in" read in black, matching the landing box. */
#authPopSignupBtn { color: #000; }
#authPopLoginBtn { background: #fff; color: #000; }
#authPopLoginBtn:hover { background: #ececff; }

/* The close (X) sits inside the card's top-right corner, clear of Cy. */
.auth-overlay-pop .hero-auth-pop .auth-close { top: 9px; right: 11px; }

/* --- navbar "Sign in" button (replaces the avatar for guests) --- */
.nav-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: #ddb1f9;
  color: #000;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, transform .15s;
}
.nav-signin-btn:hover { background: #e7c6fb; }
.nav-signin-btn:active { transform: scale(.97); }
@media (max-width: 560px) {
  .nav-signin-btn { height: 31px; padding: 0 13px; font-size: .8rem; }
}

/* ═══ LIGHT MODE, part 2: undo the old white theme ═══
   style.css still carries the light theme from before the site went
   dark-only — 548 rules that repaint panels, menus and inputs white.
   The mockup keeps those surfaces violet, so each of those rules is
   put back to whatever the dark theme gives the same selector. Values
   below are copied from the dark rules, not invented. */
[data-theme="light"] .ai-panel, [data-theme="light"] .ai-dock { background: transparent; }
[data-theme="light"] .modal-content, [data-theme="light"] .auth-modal, [data-theme="light"] .notif-panel { background: var(--bg-card); }
[data-theme="light"] .sidebar { background: rgba(14,12,22,.97); }
[data-theme="light"] .sb-link { color: #b0b0cc; }
[data-theme="light"] .sb-link:hover { color: #fff; }
[data-theme="light"] .sb-group-title:hover { color: #ccc; }
[data-theme="light"] .sb-group[open] .sb-group-title { color: #b0b0cc; }
[data-theme="light"] .sb-sub { color: #9898b8; }
[data-theme="light"] .sb-sub:hover { color: #ddd; }
[data-theme="light"] .profile-panel { 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)); }
[data-theme="light"] .pfp-card { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); }
[data-theme="light"] .navbar { background: transparent; }
[data-theme="light"] .navbar .logo { color: var(--text-primary); }
[data-theme="light"] .sidebar a { background: var(--bg-card); }
[data-theme="light"] .sidebar a:hover { color: var(--text-primary); }
[data-theme="light"] .sidebar a.active { color: var(--text-primary); }
[data-theme="light"] .btn-outline { color: #ddb1f9; }
[data-theme="light"] .footer-section ul li a:hover { color: #dcc8ff; }
[data-theme="light"] .like-btn:hover { color: #f87171; }
[data-theme="light"] .lb-rank-bronze { color: #fff; }
[data-theme="light"] .admin-tab.active { color: #c79bff; }
[data-theme="light"] .avatar-edit-btn { color: var(--text-primary); }
[data-theme="light"] .post-meta .post-author { color: #dcc8ff; }
[data-theme="light"] .board-card-stats { color: #c79bff; }
[data-theme="light"] .msg-bubble-theirs { background: var(--bg-card); }
[data-theme="light"] .msg-search:focus { background: var(--bg-card); }
[data-theme="light"] .msg-context-menu { background: var(--bg-card); }
[data-theme="light"] .msg-input:focus { background: var(--bg-card); }
[data-theme="light"] .msg-action-panel { background: var(--bg-card); }
[data-theme="light"] .msg-share-panel, [data-theme="light"] .msg-wp-panel { background: var(--bg-card); }
[data-theme="light"] .sb-install-btn { color: #b0b0cc; }
[data-theme="light"] .sb-install-btn:hover { color: #fff; }
[data-theme="light"] .ex-search-hist-clear:hover { color: #fff; }
[data-theme="light"] .ex-search-hist-item:hover { color: #fff; }
[data-theme="light"] .ex-search-hist-x:hover { color: #fff; }
[data-theme="light"] .ex-search-glass { background: rgba(255,255,255,.06); }
[data-theme="light"] .ex-search-glass:focus-within { background: rgba(255,255,255,.08); }
[data-theme="light"] .ex-search-results { background: rgba(16,16,32,.92); }
[data-theme="light"] .ex-mood { background: transparent; }
[data-theme="light"] .ex-sort { background: rgba(255,255,255,.04); }
[data-theme="light"] .sg-guild-card { background: linear-gradient(152deg, rgba(var(--gc, 199,155,255),.06), rgba(255,255,255,.012) 62%),
  rgba(255,255,255,.022); }
[data-theme="light"] .sg-bottom-nav { background: rgba(15,15,16,.96); }
[data-theme="light"] .sg-hero-pillar { background: rgba(255,255,255,.06); }
[data-theme="light"] .sg-hero-pillar-watch { color: var(--text-primary); }
[data-theme="light"] .sg-hero-pillar-play { color: var(--text-primary); }
[data-theme="light"] .sg-hero-pillar-create { color: var(--text-primary); }
[data-theme="light"] .sg-hub-tile { background: rgba(255,255,255,.03); }
[data-theme="light"] .sg-hub-icon { background: color-mix(in srgb, var(--hub-color, #7c3aed) 18%, transparent); }
[data-theme="light"] .wr-feat-card { background: rgba(255,255,255,.03); }
[data-theme="light"] .wf { background: linear-gradient(180deg, #111120, #0d0d1a); }
[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(34,20,70,.62), rgba(22,12,48,.72)); }
[data-theme="light"] .ws-stats-card, [data-theme="light"] .ws-side-card { background: var(--bg-card); }
[data-theme="light"] .ws-scratch-input { background: rgba(0,0,0,.3); }
[data-theme="light"] .w-controls { background: #000; }
[data-theme="light"] .w-ep-btn { background: #000; }
[data-theme="light"] .w-ep-jump-input { background: rgba(255,255,255,.03); }
[data-theme="light"] .adm-nav-item { color: #b0b0cc; }
[data-theme="light"] .adm-nav-item:hover { color: #fff; }
[data-theme="light"] .adm-mtab { color: #9090b0; }
[data-theme="light"] .navbar { background: transparent; }
[data-theme="light"] .navbar { background: transparent; }
[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: #141428; }
[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: #16162e; }
[data-theme="light"] .sidebar { background: rgba(14,12,22,.97); }
[data-theme="light"] .btn-outline, [data-theme="light"] .sg-btn-ghost, [data-theme="light"] .pf-btn-secondary, [data-theme="light"] .adm-btn-sm { background: transparent; }
[data-theme="light"] .adm-table th { color: var(--text-faint); }
[data-theme="light"] .sg-mood, [data-theme="light"] .wr-pill, [data-theme="light"] .ex-mood, [data-theme="light"] .db-mood { background: transparent; color: var(--text-muted); }
[data-theme="light"] .db-stat, [data-theme="light"] .ws-stat, [data-theme="light"] .pf-stat { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); }
[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: rgba(255,255,255,.5); }
[data-theme="light"] .sg-hero-content { background: var(--bg-card); }
[data-theme="light"] .sg-btn-ghost { background: rgba(255,255,255,.05); }
[data-theme="light"] .sg-btn-ghost:hover { background: var(--bg-card); }
[data-theme="light"] .navbar { background: transparent; }
[data-theme="light"] .sg-bottom-nav { background: rgba(15,15,16,.96); }
[data-theme="light"] .sg-hero-bg { background: var(--bg-card); }
[data-theme="light"] .ex-search-glass { background: rgba(255,255,255,.06); }
[data-theme="light"] .ex-search-results { background: rgba(16,16,32,.92); }
[data-theme="light"] .wr-feat-card { background: rgba(255,255,255,.03); }
[data-theme="light"] .ws-tool { background: linear-gradient(135deg, rgba(34,20,70,.62), rgba(22,12,48,.72)); }
[data-theme="light"] .msg-bubble-theirs { background: var(--bg-card); }
[data-theme="light"] .adm-quick { background: transparent; }
[data-theme="light"] .fv-comments-panel { background: var(--bg-card); }
[data-theme="light"] .fv-menu { background: var(--bg-card); }
[data-theme="light"] .sg-bottom-nav, [data-theme="light"] .db-bottom-nav { background: rgba(15,15,16,.96); }
[data-theme="light"] .toast { background: #1e1e3a; }
[data-theme="light"] .bottom-nav { background: rgba(11,11,25,.78); }
[data-theme="light"] ::selection { color: #fff; }
[data-theme="light"] .wr-ed-float { background: #0f0f24; }
[data-theme="light"] .wr-ed-rail-btn { background: var(--bg-page); }
[data-theme="light"] .otaku-brand { background: rgba(255,255,255,.03); }
[data-theme="light"] .oryx-intro-callout { background: var(--bg-card); color: var(--text-primary); }
[data-theme="light"] .oryx-intro-tether { background: var(--bg-card); }
[data-theme="light"] .oryx-intro-later:hover { color: var(--text-secondary); }
[data-theme="light"] .oryx-intro-dismiss:hover { color: var(--text-secondary); }
[data-theme="light"] .msg-page .msg-bubble-theirs { background: var(--m-card); color: #b8c4ca; }

/* ═══ LIGHT MODE, part 3: ink on the pale ground ═══
   Text sitting directly on the page (section labels, headings, page copy)
   takes the violet; text inside a violet panel is untouched. */
[data-theme="light"] .sg-section-title,
[data-theme="light"] .db-section-title,
[data-theme="light"] .section-title,
[data-theme="light"] .page-title,
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 { color: var(--ink-page); }
[data-theme="light"] .card h1, [data-theme="light"] .card h2, [data-theme="light"] .card h3,
[data-theme="light"] .modal-content h1, [data-theme="light"] .modal-content h2,
[data-theme="light"] .modal-content h3, [data-theme="light"] .post-card h3,
[data-theme="light"] .profile-panel h2, [data-theme="light"] .profile-panel h3 { color: var(--text-heading); }

/* Brand mark — the lavender logo would vanish into the pale ground, so
   both marks swap to the violet. Recoloured copies of the same artwork
   rather than a filter, which can only approximate an exact brand hex. */
[data-theme="light"] .brand-mark-glyph { content: url("images/cca-logo-violet.png"); }
[data-theme="light"] .brand-mark-wordmark {
    content: url("images/cca-wordmark-violet.png");
    filter: none;
}

/* ═══ LIGHT MODE, part 4: form fields ═══
   The old white theme painted every input a pale grey through a rule
   carrying four :not() clauses — specificity (0,5,1), which quietly beat
   anything sane written later. Fields belong to the violet surface now,
   so restate it at the same weight. */
[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: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ── Blur-fill frames ──────────────────────────────────────────────────
   Art almost never matches the shape of the box it lands in. Rather than
   pillarbox it against a flat panel, the leftover space is filled with a
   blown-up, heavily blurred copy of the picture itself — the frame picks
   up the artwork's own colour and the piece reads as intentional rather
   than as something that didn't fit.

   Same technique the profile feed already used (.pf-feed-media-img): the
   frame carries the image as a cover background, and a ::before layer
   blurs it with backdrop-filter. The sharp copy sits above on z-index 1.

   Usage: put .blurfill on the frame with style="background-image:url(…)"
   and leave the real <img> inside it as a child. */
.blurfill {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Solid, dark, and deliberately NOT the artwork.

       The frame used to carry the picture itself as a cover background,
       with the blur stacked on top. That is what the corner hairline
       actually was: the clip that trims the frame's OWN background is
       antialiased a hair wider than the one that trims the layers above
       it, so along each corner arc a sliver of that sharp, full-
       brightness copy survived — a bright outline that no `border: 0`
       could remove, because it was never a border.

       The picture now lives only on ::before, handed over as --bf-img.
       Nothing bright is painted at the frame's own level any more, so
       the worst a corner can leak is this dark fill, which is what the
       corner is supposed to look like. It is a solid colour rather than
       `transparent` on purpose: transparent would leak the page behind
       it, and in light mode that page is pale. */
    background: #0a0616;
}
/* The blur is PAINTED, not a backdrop-filter. backdrop-filter put this
   layer on the compositor, where its rounded clip is antialiased a hair
   softer than the frame's own background paint — so along the corner
   arcs a sub-pixel sliver of the sharp, undarkened background image
   survived and read as a faint bright outline on the corners.

   Instead ::before carries the picture itself, handed to it as the
   --bf-img custom property, and blurs it with a plain filter. It
   overshoots the frame by 80px — comfortably more than the blur radius
   — because a blur samples transparency from outside its own box and
   would otherwise fade out at the edges. */
.blurfill::before {
    content: "";
    position: absolute; inset: -80px;
    /* --bf-img, not `inherit`: the frame no longer has a background
       image of its own to inherit, which is the whole point. */
    background-image: var(--bf-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(44px) saturate(1.25) brightness(.72);
    pointer-events: none;
}
/* A dark wash — the frame sits well back from the artwork so the piece
   is the brightest thing in the post. Faintly violet rather than flat
   black, but the job of this layer is to darken. It is its own element
   now: ::before is the blurred picture, and folding a flat colour into
   that element's background would have been blurred along with it. */
.blurfill::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(10, 6, 22, .66);
    pointer-events: none;
}
.blurfill > * { position: relative; z-index: 1; }

/* Navbar tabs sit on the pale navbar in light mode, so they take the page
   ink. .nav-tab-active is hard-coded #fff — white on a near-white bar left
   the current page's own tab as nothing but its underline. */
[data-theme="light"] .nav-tab { color: var(--ink-page-3); }
[data-theme="light"] .nav-tab-active { color: var(--ink-page); }

/* ── The nav drawer opens BELOW the header ──
   It used to start at the top of the viewport and cover the brand mark
   and the tab row, so opening the menu hid the very chrome it belongs
   to. Anchoring it under the 58px navbar keeps the header visible and
   makes the two layers read as one piece of chrome. The overlay starts
   at the same line, which leaves the header clickable while the drawer
   is open. */
.sidebar {
    top: 58px;
    height: calc(100vh - 58px);
    height: calc(100dvh - 58px);
    max-height: calc(100vh - 58px);
    max-height: calc(100dvh - 58px);
}
.sidebar-overlay { top: 58px; }

/* ── Header search bar ──
   Modelled on the landing page's omnibox (.cyh-omni in index.php): a
   SQUARED bar, not the 999px site pill, translucent over a blur with a
   hairline edge that brightens on focus. Same shape at header scale.

   It is a handoff control, not a second search — focusing it opens the
   global overlay. It shows at EVERY width, including phones: hiding it
   under a breakpoint is what made it look like it was never added. */
.nav-searchbar {
    display: flex; align-items: center; gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
    margin: 0 10px;
    height: 38px; padding: 0 13px;
    border-radius: 12px;                    /* squared, like .cyh-omni */
    background: rgba(13, 9, 24, .46);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
            backdrop-filter: blur(26px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .11);
    transition: background .18s ease-out, border-color .18s ease-out;
}
.nav-searchbar:focus-within {
    background: rgba(13, 9, 24, .58);
    border-color: rgba(255, 255, 255, .2);
}
.nav-searchbar > svg { width: 16px; height: 16px; flex: none; color: #a59fc0; }
/* A contenteditable div, not an input (see header.php) — so it needs the
   single-line behaviour and the placeholder an input gives for free. */
#navSearchInput {
    flex: 1; min-width: 0;
    background: none !important; border: 0 !important; outline: none !important;
    box-shadow: none !important;
    color: #ece7f5; font: inherit; font-size: .88rem; letter-spacing: -.01em;
    white-space: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    line-height: 1.2;
    cursor: text;
    -webkit-user-modify: read-write-plaintext-only;   /* no rich text */
}
#navSearchInput::-webkit-scrollbar { display: none; }
#navSearchInput:empty::before {
    content: attr(data-placeholder);
    color: #7d7795;
    pointer-events: none;
}
[data-theme="light"] #navSearchInput:empty::before { color: #a893c9; }

/* Light mode mirrors the landing bar exactly: the field stays the deep
   violet panel on the pale ground, rather than turning into a white box. */
[data-theme="light"] .nav-searchbar {
    background: #341961;
    border-color: rgba(255, 255, 255, .10);
}
[data-theme="light"] .nav-searchbar:focus-within {
    background: #3d1e73;
    border-color: rgba(255, 255, 255, .2);
}
[data-theme="light"] #navSearchInput { color: #ece7f5; }
[data-theme="light"] .nav-searchbar > svg { color: #a893c9; }

/* The icon button is redundant now the bar never hides. */
.nav-search-btn { display: none !important; }

/* Phones: the bar shares the row with the streak, bell and avatar. It
   gives up width first, but only down to a floor — allowed to shrink
   freely it collapsed to a ~24px sliver with the placeholder clipped
   inside it, which reads as the header being cropped. Below the floor
   the row would rather tighten its own gaps than crush the field. */
@media (max-width: 640px) {
    .nav-searchbar { margin: 0 6px; height: 34px; padding: 0 10px; min-width: 96px; }
    #navSearchInput { font-size: .82rem; }
    .navbar { padding: 0 10px; }
    .navbar .nav-left { gap: 6px; }
}
/* The burger and the brand are fixed furniture — flex was shrinking the
   burger to ZERO width to make room, which is the header "cropping". */
.navbar .menu-btn, .navbar .brand-mark { flex: 0 0 auto; }
/* Nothing inside the bar may spill past it either. */
.nav-searchbar { overflow: hidden; }

/* Very narrow phones: the field is what gives, not the row. Icon-only
   keeps search reachable with nothing clipped or overlapping. */
@media (max-width: 360px) {
    .nav-searchbar { min-width: 0; width: 38px; flex: 0 0 auto; padding: 0; justify-content: center; }
    #navSearchInput { display: none; }
}

/* Phones: trim the cluster down to what matters — streak, bell, account.
   Anything else that has drifted into the right zone (section tabs, the
   Contact link) belongs to wider screens. */
@media (max-width: 640px) {
    .navbar .nav-right { gap: 6px; }
    .navbar .nav-right .nav-tab,
    .navbar .nav-right .hc-htab { display: none; }
}

/* Header search: kill Chrome's autofill paint and the white ring it draws.
   Same paint-over trick already used on .ex-search-input — a giant inset
   box-shadow plus a transition long enough that the fade never lands. */
#navSearchInput:-webkit-autofill,
#navSearchInput:-webkit-autofill:hover,
#navSearchInput:-webkit-autofill:focus,
#navSearchInput:-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: #ece7f5 !important;
    caret-color: #ece7f5 !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
#navSearchInput:-internal-autofill-selected {
    background-color: transparent !important;
    -webkit-text-fill-color: #ece7f5 !important;
}
/* The white outline was the browser's own focus ring on the field; the
   bar itself already shows focus by brightening its edge. */
#navSearchInput:focus,
#navSearchInput:focus-visible { outline: none !important; box-shadow: none !important; }
/* And the little clear "x" WebKit adds to type=search, which doesn't
   match anything else in the chrome. */
#navSearchInput::-webkit-search-decoration,
#navSearchInput::-webkit-search-cancel-button,
#navSearchInput::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }

/* The header row must be able to shrink now that it carries a search bar.
   .nav-left was flex:0 0 auto with min-width:auto, so the bar's flex-grow
   had nowhere to resolve against and simply pushed the right-hand cluster
   (Sign in / streak / bell / avatar) off the edge of a phone screen. */
.navbar .nav-left { flex: 1 1 auto; min-width: 0; }
/* nav-right must shrink too. Pinning it to flex:0 0 auto fixed the guest
   header and broke the signed-in one: that cluster is ~480px of streak +
   bell + avatar, so on a 390px phone it simply ran off the screen and the
   avatar collapsed to zero width. */
.navbar .nav-right { flex: 0 1 auto; min-width: 0; }
/* Whatever else gives way, the account button does not — it is the way
   back to your profile, settings and sign-out. */
.navbar .pfp-dd,
.navbar .nav-right .hud-profile { flex: 0 0 auto; }

/* The account chip belongs in the phone header. An older rule removes it
   under 768px on the grounds that the bottom nav carries Profile, but the
   layout Ashim asked for keeps the avatar in the header (as the reference
   does), and its dropdown is the only route to settings, theme and
   sign-out on a phone. Restored, and pinned so it can't be squeezed. */
@media (max-width: 768px) {
    .nav-pfp,
    #pfpDd { display: flex !important; align-items: center; flex: 0 0 auto; }
    /* #hudProfile is hidden separately by an ID rule ("Account now lives
       in the bottom bar"), so unhiding the wrapper alone left an empty
       304px-wide box where the avatar should be. */
    #hudProfile { display: inline-flex !important; align-items: center; flex: 0 0 auto; padding: 2px; }
}

/* The login-streak chip was removed from the header and its slot given to
   Messages (see header.php). This rule stays as a belt-and-braces catch in
   case a page renders its own copy of the chip. The streak still counts and
   still shows on /status.php. */
#hudCurrency,
.nav-right .hud-currency { display: none !important; }

/* Messages button — same footprint as the bell it sits next to. */
.nav-msg { text-decoration: none; }
.nav-msg:hover { color: var(--link-color); }

/* Create — shares the bell's footprint like Messages does. */
.nav-create { text-decoration: none; }
.nav-create:hover { color: var(--link-color); }

/* While the header bar is driving the search, the overlay is results only —
   its own input would be a second search box for the same query. */
.cca-search.from-header .cca-search-bar { display: none !important; }
.cca-search.from-header .cca-search-panel { padding-top: 6px; }

/* Header controls carry the brand colour — the same lavender as the logo
   glyph in dark, and the violet the logo swaps to in light. They read as
   one set with the mark rather than as generic grey icons. */
.nav-bell,
.nav-msg,
.nav-create,
.nav-search-btn,
.nav-searchbar > svg { color: #ddb1f9; }
[data-theme="light"] .nav-bell,
[data-theme="light"] .nav-msg,
[data-theme="light"] .nav-create,
[data-theme="light"] .nav-search-btn { color: #2b1557; }
.nav-bell:hover, .nav-msg:hover, .nav-create:hover { color: #e7c6fb; }
[data-theme="light"] .nav-bell:hover,
[data-theme="light"] .nav-msg:hover,
[data-theme="light"] .nav-create:hover { color: #5e3091; }

/* Slightly smaller type across the site. One lever: everything sized in
   rem scales with it, so proportions stay exactly as designed. */
html { font-size: 15px; }

/* Phone header breathing room: the avatar and the burger were the two
   widest items and left the icon buttons cramped. */
@media (max-width: 768px) {
    #hudProfile .hud-avatar { width: 26px !important; height: 26px !important; font-size: .68rem !important; }
    #pfpDd .pfp-dd-caret { width: 11px; height: 11px; }
    .menu-btn { transform: scale(.85); transform-origin: left center; }
}

/* The magnifier stays the logo's lavender in BOTH themes: the search bar
   keeps its deep-violet panel in light mode (it mirrors the landing bar),
   so a violet icon there was dark-on-dark and nearly invisible. */
.nav-searchbar > svg,
[data-theme="light"] .nav-searchbar > svg { color: #ddb1f9 !important; }

/* Cubi pinned at the top of the inbox — a permanent conversation, marked
   as the assistant rather than a person. */
.msg-cubi-item { position: relative; }
.msg-cubi-item::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
    height: 1px; background: rgba(255,255,255,.07);
}
[data-theme="light"] .msg-cubi-item::after { background: rgba(43,21,87,.12); }
.msg-cubi-avatar { object-fit: cover; background: #241145; }
.msg-cubi-chip {
    background: #ddb1f9; color: #2b1557;
    font-size: .58rem; font-weight: 800; letter-spacing: .08em;
    padding: 2px 6px; border-radius: 999px; text-transform: uppercase;
}

/* Cubi's replies use a light bubble so the assistant is visually distinct
   from a person's messages in the same thread. */
.msg-bubble-cubi {
    background: #ede0fe !important;
    color: #2b1557 !important;
    border: 0 !important;
}
.msg-bubble-cubi a { color: #5e3091; }
[data-theme="light"] .msg-bubble-cubi { background: #ffffff !important; }
/* The pinned row's avatar shows the whole mascot rather than a crop. */
.msg-chat-cubi #chatAvatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Search suggestions, header-driven ──
   A small dropdown hanging off the bar, not the centred overlay: page
   colours, compact rows, no full-screen dim. Positioned in header.php
   from the bar's own rect. */
.cca-search.from-header { background: none; }
.cca-search.from-header .cca-search-backdrop { background: transparent; }
.cca-search.from-header .cca-search-panel {
    position: fixed;
    margin: 0;
    max-width: none;
    background: var(--bg-page);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    box-shadow: 0 18px 40px -20px rgba(0,0,0,.8);
    padding: 4px;
    overflow: hidden;
}
[data-theme="dark"] body.fd-body .cca-search.from-header .cca-search-panel { background: #0d1113; }
[data-theme="light"] .cca-search.from-header .cca-search-panel {
    background: #f7effe;
    border-color: rgba(43,21,87,.14);
    box-shadow: 0 18px 40px -20px rgba(43,21,87,.3);
}
.cca-search.from-header .cca-search-results { max-height: 240px; padding: 2px; }
.cca-search.from-header .cs-item { padding: 6px 8px; border-radius: 8px; gap: 8px; font-size: .8rem; }
.cca-search.from-header .cs-thumb { width: 26px; height: 26px; }
.cca-search.from-header .cs-group-h { font-size: .58rem; padding: 6px 8px 2px; }
.cca-search.from-header .cs-hint,
.cca-search.from-header .cs-empty { padding: 12px 10px; font-size: .78rem; }

/* Text follows the theme rather than the overlay's fixed dark palette. */
[data-theme="light"] .cca-search.from-header .cs-item { color: var(--ink-page); }
[data-theme="light"] .cca-search.from-header .cs-item:hover { background: rgba(43,21,87,.08); }
[data-theme="light"] .cca-search.from-header .cs-group-h,
[data-theme="light"] .cca-search.from-header .cs-hint,
[data-theme="light"] .cca-search.from-header .cs-empty { color: var(--ink-page-3); }

/* Cubi's floating button is gone — he lives in the inbox now, pinned at
   the top of the conversation list. The panel itself stays wired up
   (window.Oryx.open still works, and other features call it), so this
   only removes the button. */
.ai-fab { display: none !important; }

/* ══ Inbox panel (inbox-popup.php) ══
   The conversation list and a thread in a small panel, sitting exactly
   where Cubi's assistant panel used to — right 18px, above the bottom
   nav. Colours follow the theme rather than being fixed dark, since it
   opens over a light page too. */
.ibx {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    width: min(360px, calc(100vw - 28px));
    height: min(520px, calc(100vh - 150px));
    display: none;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #12121a;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 22px 56px -16px rgba(0,0,0,.6);
    z-index: 260;
    color: #ece7f5;
}
.ibx.is-open { display: flex; }
[data-theme="light"] .ibx {
    background: #f7effe;
    border-color: rgba(43,21,87,.14);
    box-shadow: 0 22px 56px -16px rgba(43,21,87,.28);
    color: var(--ink-page);
}

.ibx-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 14px;
            border-bottom: 1px solid rgba(255,255,255,.08); }
[data-theme="light"] .ibx-head { border-bottom-color: rgba(43,21,87,.12); }
.ibx-title { font-size: .92rem; font-weight: 700; }
.ibx-sp { flex: 1; }
.ibx-btn, .ibx-back {
    width: 30px; height: 30px; min-height: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 9px; background: none; cursor: pointer;
    color: inherit; opacity: .7; text-decoration: none;
}
.ibx-btn:hover, .ibx-back:hover { opacity: 1; background: rgba(255,255,255,.08); }
[data-theme="light"] .ibx-btn:hover, [data-theme="light"] .ibx-back:hover { background: rgba(43,21,87,.08); }
.ibx-btn svg, .ibx-back svg { width: 16px; height: 16px; }

.ibx-body { flex: 1; min-height: 0; display: flex; }
.ibx-list, .ibx-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.ibx-thread { display: flex; flex-direction: column; gap: 6px; padding: 12px; }

.ibx-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: 10px; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 0;
}
.ibx-row:hover { background: rgba(255,255,255,.07); }
[data-theme="light"] .ibx-row:hover { background: rgba(43,21,87,.07); }
.ibx-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
          background: #2b1557; }
.ibx-av-ph { display: inline-flex; align-items: center; justify-content: center;
             font-weight: 700; font-size: .8rem; color: #ddb1f9; }
.ibx-row-txt { display: flex; flex-direction: column; min-width: 0; }
.ibx-row-txt strong { font-size: .86rem; font-weight: 600; }
.ibx-row-txt span { font-size: .72rem; opacity: .6; }
.ibx-chip { margin-left: auto; background: #ddb1f9; color: #2b1557;
            font-size: .56rem; font-weight: 800; letter-spacing: .08em;
            padding: 2px 6px; border-radius: 999px; text-transform: uppercase; }
.ibx-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #ff6b8a; }
.ibx-empty { padding: 22px 14px; text-align: center; font-size: .8rem; opacity: .6; }

.ibx-msg { max-width: 82%; padding: 8px 11px; border-radius: 14px; font-size: .82rem;
           line-height: 1.45; word-break: break-word; }
.ibx-msg-mine { align-self: flex-end; background: #ddb1f9; color: #2b1557; }
.ibx-msg-theirs { align-self: flex-start; background: rgba(255,255,255,.09); }
[data-theme="light"] .ibx-msg-theirs { background: rgba(43,21,87,.09); color: var(--ink-page); }
/* Cubi's replies read light in both themes, as on the inbox page. */
.ibx-msg-cubi { background: #ede0fe !important; color: #2b1557 !important; }

.ibx-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.08); }
[data-theme="light"] .ibx-compose { border-top-color: rgba(43,21,87,.12); }
.ibx-compose input {
    flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 999px;
    background: rgba(255,255,255,.07) !important;
    border: 0 !important; outline: none !important; box-shadow: none !important;
    color: #ece7f5 !important; font: inherit; font-size: .82rem;
}
[data-theme="light"] .ibx-compose input {
    background: rgba(43,21,87,.07) !important;
    color: var(--ink-page) !important;
}
.ibx-send { width: 34px; height: 34px; min-height: 0; flex: none; border: 0; border-radius: 50%;
            background: #ddb1f9; color: #2b1557; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; }
.ibx-send svg { width: 15px; height: 15px; }

@media (max-width: 560px) {
    .ibx { right: 10px; left: 10px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
           height: min(70vh, 520px); }
}

/* Typing in the header search must not blur the header itself — the
   backdrop starts below it. */
.cca-search.from-header .cca-search-backdrop {
    top: 58px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Inbox scrim — blurs the page but starts BELOW the header, so the nav
   stays sharp and usable while the panel is open. */
.ibx-scrim {
    position: fixed;
    top: 58px; left: 0; right: 0; bottom: 0;
    background: rgba(6,4,12,.45);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    z-index: 250;
}
[data-theme="light"] .ibx-scrim { background: rgba(43,21,87,.25); }
.ibx-scrim[hidden] { display: none; }

/* Page is frozen while the panel is open — only the panel's own lists
   scroll. overflow:hidden on BOTH html and body: which one is the
   scroller differs per page, and the position:fixed + negative-top trick
   can't be used here because a Google-translate fix sets
   `body { top: 0 !important }`, which would slam the page to the top. */
html.ibx-locked, body.ibx-locked { overflow: hidden !important; }
/* And no scroll chaining out of the panel's lists into the page. */
.ibx-list, .ibx-thread { overscroll-behavior: contain; }

/* No rim on any blur-filled art frame, here or on pages added later —
   the wash is the frame, so a border or a background underneath it only
   ever shows as a hairline at the rounded corners. */
.blurfill { border: 0; outline: 0; }