/* ============================================================
   RAW — rAthena-AI world THEME LAYER  v2.0.0
   Full design system: deep-space + ember-gold + AI-cyan, with
   strong Ragnarok Online appeal (kingdom/ancient warmth, glint,
   class flavor) fused with a living 2026 animated UI.

   Philosophy (research-backed, @Hyperplexed-inspired):
   - One palette via CSS vars (no war with the base theme).
   - Glass + depth + animated gradient edges, GPU-safe transforms.
   - Motion with meaning; fully honors prefers-reduced-motion.
   - RO appeal: gold "gnosis" accents, rune-glow, midgard-blue
     energy, pixel-adjacent glyphs — never a cold tech slab.
   Non-destructive: builds on the base FluxCP skin; no feature off.
   ============================================================ */

/* ---------- 0. Design tokens (single source) ---------- */
:root {
    /* surfaces */
    --raw-abyss:    #070b14;   /* page deepest */
    --raw-deep:     #0d1b2a;   /* panel base */
    --raw-panel:    #132a47;   /* raised card */
    --raw-card:     #16213a;   /* bento card */
    --raw-edge:     #223349;   /* hairline */
    --glass:        rgba(19, 42, 71, 0.55);
    /* accents: RO kingdom gold + AI midgard cyan */
    --raw-gold:     #e0b15d;
    --raw-gold-hot: #f5c77e;
    --ai-cyan:      #2dd4bf;
    --ai-blue:      #38bdf8;
    --ai-glow:      rgba(56, 189, 248, 0.35);
    --rune:         #b48cff;   /* mystic rune accent (archer/mage vibe) */
    --danger:       #ff5c7a;
    --ok:           #34d399;
    /* text */
    --text-high:    #eef4ff;
    --text-mid:     #a6b8d0;
    --text-low:     #7a90ad;
    /* radii + shadows */
    --rad-sm: 8px;  --rad: 12px; --rad-lg: 18px;
    --sh-card: 0 10px 30px rgba(7,11,20,.45);
    --sh-glow: 0 0 22px var(--ai-glow);
    /* fonts */
    --font-disp: "Space Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Monaco", ui-monospace, monospace;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

    /* Override the BASE FluxCP light-theme color tokens so every container that
       uses them (news, service-desk, panels, borders — not just OUR cards) renders
       dark-theme readable. Raw.css loads after flux.css, so these win at equal
       specificity. This fixes light-gray-bg + light-text everywhere. */
    --color-bg: #070b14;
    --color-bg-alt: #101d2f;
    --color-bg-sidebar: #0d1b2a;
    --color-text: #eef4ff;
    --color-text-light: #a6b8d0;
    --color-text-muted: #7a90ad;
    --color-border: #223349;
    --color-border-light: #1a2a42;
    --color-primary: #38bdf8;
    --color-primary-dark: #2d9cdb;
    --color-primary-light: #7a90ad;   /* semantic "light" accent (text/link), keep readable on dark */
    --color-header-bg: #132a47;       /* dark header */
    --color-header-text: #eef4ff;
    --color-footer-bg: #0a1220;       /* dark footer (was #f0f0f0) */
}

/* ---------- 1. Base typography & body ---------- */
body {
    font-family: var(--font-body);
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(45,212,191,.06), transparent 60%),
        radial-gradient(900px 500px at 0% 0%, rgba(224,177,93,.05), transparent 55%),
        var(--raw-abyss);
    color: var(--text-high);
}
#main-wrapper, .content-wrapper, .content { background: transparent; }

h1, h2, h3, h4 { font-family: var(--font-disp); color: var(--text-high); }
.menu-actions, .menuitem strong { font-family: var(--font-disp); }

/* RO gold glint on key headings */
h1 a, h2 { color: var(--text-high); }
h2 { font-weight: 600; letter-spacing: .005em; }

/* ---------- 2. Header ---------- */
#site-header, #header, .header {
    background: linear-gradient(135deg, var(--raw-deep) 0%, #10233f 60%, var(--raw-deep) 100%);
    border-bottom: 1px solid var(--raw-edge);
    box-shadow: 0 4px 22px rgba(7,11,20,.55);
}
.site-title a, #header h1, h1.logo { color: var(--raw-gold); font-family: var(--font-disp); }
.site-title a { letter-spacing: .04em; }
.site-title a::after { content:""; display:block; height:2px; width:0; background:linear-gradient(90deg,var(--raw-gold),var(--ai-cyan)); transition:width .3s ease; }
.site-title a:hover::after { width: 100%; }

/* ---------- 3. Sidebar (player-first, RO-tinted, DARK SURFACE) ---------- */
#sidebar, #admin_sidebar { border:0; }

/* Login-status box (currently logged in as X) — dark surface. The base template uses
   bgcolor="#e1eaf3" (light blue) + gif corners; CSS overrides the attribute. */
#loginbox { background: transparent; }
#loginbox td { background-color: #101d2f !important; color: var(--text-mid); }
#loginbox a { color: var(--ai-blue); }
#loginbox td img[src*="loginbox_tl"], #loginbox td img[src*="loginbox_tr"],
#loginbox td img[src*="loginbox_bl"], #loginbox td img[src*="loginbox_br"] { display:none; }
#loginbox { border:1px solid var(--raw-edge); border-radius: var(--rad-sm); }
/* Drop the legacy gif-corner images (keep rows/menu intact) in favor of a clean flat card */
#sidebar td img[src*="sidebar_complete"], #admin_sidebar td img[src*="sidebar_admin_complete"] { display:none; }
/* Dark solid surface (not translucent) so the side menu reads as a distinct dark panel */
#sidebar, #admin_sidebar {
    background: linear-gradient(175deg, #0d1b2a 0%, #0a1220 100%);
    border: 1px solid var(--raw-edge);
    border-radius: var(--rad);
    padding: 10px 8px 12px;
    box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
#sidebar th.menuitem, #admin_sidebar th.menuitem {
    color: var(--raw-gold);
    font-family: var(--font-disp);
    font-size: .82em; text-transform: uppercase; letter-spacing: .06em;
    padding: 12px 8px 6px; border-bottom:1px solid var(--raw-edge);
    cursor: pointer;
    background: transparent;
}
/* Explicit dark surfaces for the legacy sidebar CELLS — always dark, never light. */
#sidebar td, #admin_sidebar td,
#sidebar td.menuitem, #admin_sidebar td.menuitem,
#sidebar td.sidebar-left, #sidebar td.sidebar-right {
    background: transparent;
}
#sidebar td.sidebar-left, #sidebar td.sidebar-right { background: transparent; }
#sidebar td.menuitem a, #admin_sidebar td.menuitem a { background: transparent; }
/* Menu item = dark pill/card with clear surface + readable text */
#sidebar .menuitem a, #admin_sidebar .menuitem a {
    display:block; padding:8px 10px 8px 12px; margin:2px 0;
    border-radius: var(--rad-sm);
    background: rgba(13,27,42,.55);
    border:1px solid rgba(34,51,73,.55);
    color: var(--text-mid); font-size:.95em; transition: all .15s ease;
}
#sidebar .menuitem a:hover, #admin_sidebar .menuitem a:hover {
    background: linear-gradient(90deg, rgba(224,177,93,.16), rgba(56,189,248,.08));
    border-color: var(--raw-gold);
    color: var(--raw-gold); border-left:2px solid var(--raw-gold); padding-left:11px;
}
/* active page accent */
#sidebar .menuitem a[aria-current], #sidebar .menuitem a.active {
    color: var(--ai-blue); font-weight:600;
    background: linear-gradient(90deg, rgba(56,189,248,.14), rgba(56,189,248,.04));
}
/* Admin shield divider — inline SVG (no emoji) */
#sidebar th.menuitem.menuitem-admin::before {
    content:""; display:inline-block; width:1em; height:1em; margin-right:6px; vertical-align:-.12em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e0b15d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z"/><path d="M9 12l2 2 4-4"/></svg>') center/contain no-repeat;
    letter-spacing:0;
}
/* Category icon glyph */
.raw-cat-icon { margin-right: 6px; font-size: 1.05em; display:inline-flex; align-items:center; vertical-align:middle; }
.raw-cat-icon svg { display:block; }
#sidebar th.menuitem .raw-cat-icon, #admin_sidebar th.menuitem .raw-cat-icon { filter: saturate(1.1); }
#sidebar th.menuitem.menuitem-admin { border-top: 2px dashed var(--raw-edge); margin-top: 8px; }
#sidebar th.menuitem.menuitem-admin .raw-cat-icon { opacity: .85; }

/* ---------- 4. Buttons & actions (RO-wardrobe flavor) ---------- */
button[type="submit"], .button, .actions input[type="submit"], a.button {
    background: linear-gradient(135deg, var(--ai-blue), var(--ai-cyan));
    color:#06121f; border:none; border-radius: var(--rad-sm);
    font-family: var(--font-disp); font-weight:700; padding:10px 18px;
    transition: transform .12s ease, box-shadow .2s ease;
    box-shadow: 0 2px 0 rgba(255,255,255,.06) inset;
}
button[type="submit"]:hover, .button:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-glow);
}
button[type="submit"]:active, .button:active { transform: translateY(0); }

/* gold secondary / danger variants (class hooks) */
.raw-btn {
    display:inline-block; padding:12px 22px; border-radius: var(--rad-sm);
    font-family: var(--font-disp); font-weight:700; color: var(--ai-blue);
    background: rgba(56,189,248,.10); border:1px solid var(--raw-edge);
    text-decoration:none; transition: all .15s ease; position:relative;
}
.raw-btn:hover { background: rgba(56,189,248,.18); color:#fff; border-color: var(--ai-blue); box-shadow: var(--sh-glow); }
.raw-btn-primary {
    color:#06121f; background: linear-gradient(135deg,var(--raw-gold),var(--raw-gold-hot));
    border-color: var(--raw-gold);
    background-image:
        linear-gradient(135deg, rgba(224,177,93,1), rgba(245,199,126,1));
}
.raw-btn-primary:hover { color:#06121f; background: linear-gradient(135deg,#e9bd73,#ffd58c); box-shadow: 0 0 20px rgba(224,177,93,.4); }

/* ------------- 5. Signature effects ------------- */
/* 5a. Animated gradient border on hero + primary cards
   Composited version: a wide gradient layer translates on X (transform is
   GPU-composited). background-position animation (previous) repainted every
   frame -> PageSpeed 'non-composited animation' + main-thread jank. */
.raw-anim-border { position: relative; overflow: hidden; }
.raw-anim-border::before {
    content:""; position:absolute; inset:-1px; z-index:0; border-radius: var(--rad);
    padding:2px;
    background: linear-gradient(120deg, var(--raw-gold), var(--ai-cyan), var(--rune), var(--raw-gold));
    background-size: 300% 100%;
    /* pseudo-layer wider than the element; translateX sweeps it (composited) */
    width: 300%; height: 100%; left: -100%;
    animation: raw-edge-flow 8s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events:none;
    will-change: transform;
}
@keyframes raw-edge-flow {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(33.333%); } /* sweep one gradient period */
}

/* 5b. AI-NPC liveliness orb (breathing heart-pool) */
.raw-orb {
    width:14px; height:14px; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #7fffe8, var(--ai-cyan) 60%, #0a6a5f 100%);
    box-shadow: 0 0 12px var(--ai-glow);
    animation: raw-breathe 3s ease-in-out infinite;
    display:inline-block; vertical-align:middle; margin-right:8px;
}
@keyframes raw-breathe { 0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.25); opacity:1} }

/* 5c. Live online pulse (ring) */
.raw-pulse { position:relative; display:inline-block; }
.raw-pulse::after {
    content:""; position:absolute; inset:-4px; border-radius:50%;
    border:2px solid var(--ok); animation: raw-ring 1.8s ease-out infinite;
}
@keyframes raw-ring { 0%{transform:scale(.6); opacity:1} 100%{transform:scale(1.6); opacity:0} }

/* 5d. Reveal-on-scroll (bento cards) — SAFE: content is visible by default;
   only JS-gated `.raw-reveal` animate in. If JS fails, .raw-reveal simply stays
   visible (opacity 1) — a hidden section is never possible. */
html.js .raw-reveal { opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.js .raw-reveal.raw-in { opacity:1; transform:none; }

/* 5e. Card tilt-on-cursor (transform-only, GPU-safe) */
.raw-tilt { transition: transform .2s ease, box-shadow .25s ease; will-change: transform; }
.raw-tilt:hover { transform: translateY(-4px); box-shadow: var(--sh-card), var(--sh-glow); }

/* 5f. Skeleton shimmer for loading cards */
.raw-skeleton {
    background: linear-gradient(90deg, var(--raw-deep) 25%, var(--raw-panel) 37%, var(--raw-deep) 63%);
    background-size:400% 100%; animation: raw-shimmer 1.4s ease infinite; border-radius: var(--rad-sm);
}
@keyframes raw-shimmer { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* 5g. Focus-visible ring (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--ai-blue); outline-offset: 2px; border-radius: 4px;
}

/* ------------- 6. Hero (Batch 2 markup hooks) ------------- */
.raw-hero {
    position:relative; overflow:hidden; border:1px solid var(--raw-edge);
    border-radius: var(--rad-lg); margin:0 0 26px; box-shadow: var(--sh-card);
    background:
        radial-gradient(circle at 15% -10%, rgba(224,177,93,.14), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(56,189,248,.12), transparent 45%),
        linear-gradient(135deg, var(--raw-deep) 0%, #0f233f 55%, var(--raw-deep) 100%);
}
.raw-hero::before { /* subtle grid/rune-line */
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.12;
    background-image:
        linear-gradient(rgba(56,189,248,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,189,248,.18) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 75%);
            mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 75%);
}
.raw-hero-inner { position:relative; z-index:1; padding: 34px 30px 24px; }
.raw-hero-title { margin:0 0 10px; font-family:var(--font-disp); font-weight:800; font-size:clamp(2.1rem,4vw,3.2rem); letter-spacing:.01em; line-height:1.08; }
.raw-hero-sub { margin:0 0 24px; max-width:640px; color:var(--text-mid); font-size:1.06rem; line-height:1.6; }
.raw-hero-sub strong { color:var(--raw-gold); }
.raw-hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.raw-hero-meta { font-size:.92em; color:var(--text-low); border-top:1px solid var(--raw-edge); padding-top:14px; }
.raw-hero-meta code { font-family:var(--font-mono); background:var(--raw-deep); color:var(--raw-gold); padding:2px 7px; border-radius:5px; }
.raw-hero-meta .live-dot { color:var(--ok); }

/* ===== ad-space landing page (ads module) ===== */
.adspace-hero { padding: 2.4rem 2rem; text-align:center; }
.adspace-hero .raw-hero-title { font-size: clamp(1.6rem,3.5vw,2.4rem); }
.adspace-tagline { opacity:.9; font-size:1.05rem; margin:.4rem 0 0; }
.adspace-lede { max-width:720px; margin:.9rem auto; line-height:1.6; }
.adspace-lede strong { color: var(--raw-gold); }
.adspace-anti-p2w { font-weight:700; color:#ffd479; margin:.9rem auto 0; font-size:1.05rem; letter-spacing:.2px; }
.adspace-stats { margin-top:1.4rem; gap:14px; }
.adspace-stats .adspace-stat { grid-column: span 3; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
@media (max-width: 900px) { .adspace-stats .adspace-stat { grid-column: span 6; } }
@media (max-width: 560px) { .adspace-stats .adspace-stat { grid-column: span 12; } }
.adspace-stat-value { font-size:1.7rem; font-weight:700; color:var(--text-high); line-height:1.1; }
.adspace-stat-label { margin-top:.45rem; font-size:.78rem; color:var(--text-low); text-transform:uppercase; letter-spacing:.06em; }
.adspace-about { margin-top:1.4rem; padding:1.5rem; background:#101d2f; border:1px solid var(--raw-edge); border-radius: var(--rad); }
.adspace-about h2 { font-family:var(--font-disp); margin-top:0; color:var(--raw-gold); }
.adspace-about p { line-height:1.6; color:var(--text-mid); }
.adspace-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem; }

/* ===== ads module: dark-surface overrides for inline light backgrounds =====
   The other ads views (transparency/partner/admin/gdpr/reports) render inline
   `background:#fff` cards and `#f0f4fa` table headers. Override them to the dark
   theme with equal-or-higher specificity + important so inline styles yield. */
/* light card divs (inline background:#fff / #f5f8ff) */
div[style*="background:#fff"], div[style*="background: #fff"],
div[style*="background:#ffffff"], div[style*="background:#f5f8ff"],
td[style*="background:#fff"] {
    background-color: #101d2f !important;
    color: var(--text-high) !important;
    border-color: var(--raw-edge) !important;
}
/* table header rows that used a light fill */
tr[style*="background:#f0f4fa"], tr[style*="background: #f0f4fa"] {
    background-color: #132a47 !important;
}
tr[style*="background:#f0f4fa"] th { color: var(--text-high) !important; background: transparent; }
/* success / error alert boxes (inline pastel) */
div[style*="background:#e6f7e6"] { background-color: #14241a !important; color: #7ce38b !important; }
div[style*="background:#fde8e8"] { background-color: #2b1416 !important; color: #ff7b7b !important; }
/* auth: any ads tables */
.adspace-landing table { color: var(--text-mid); border-color: var(--raw-edge); }

/* ===== ads branches (transparency/partner/admin/gdpr/reports): text + alignment =====
   These views use inline-flex card containers + dark-muted inline text (#888/#666/#1a7f1a/
   #b00020) that are barely readable on the dark theme. Brighten the muted text, fix the
   flex-card alignment to a responsive grid, and keep colored status text on dark. */
/* Flex-card containers -> consistent responsive grid alignment */
div[style*="display:flex"][style*="min-width:300"],
div[style*="display: flex"][style*="min-width:300"],
div[style*="flex-wrap:wrap"][style*="gap:1.5rem"],
div[style*="flex-wrap: wrap"][style*="gap:1.5rem"],
div[style*="flex-wrap:wrap"][style*="gap:1rem"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
}

/* Muted helper text : brighten to readable dark-theme muted */
span[style*="color:#888"], span[style*="color: #888"],
p[style*="color:#666"], p[style*="color: #666"],
div[style*="color:#888"], div[style*="color: #888"],
li[style*="color:#888"], td[style*="color:#888"] {
    color: #9fb4cd !important;
}
/* Dark red / green status text -> brighter for contrast on dark */
p[style*="color:#b00020"], div[style*="color:#b00020"], a[style*="color:#b00020"] { color: #ff7b7b !important; }
a[style*="color:#1a7f1a"], p[style*="color:#1a7f1a"], div[style*="color:#1a7f1a"] { color: #7ce38b !important; }
a[style*="color:#1a7f1a"]:hover { color: #98f0a8 !important; }
/* light amber action links on dark */
a[style*="color:#ffd479"], a[style*="color: #ffd479"] { color: #ffd479 !important; }



/* stat strip */
.raw-stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:0 0 26px; }
.raw-stat {
    background: var(--glass); backdrop-filter: blur(8px); border:1px solid var(--raw-edge);
    border-radius: var(--rad); padding:14px 16px; text-align:center;
}
.raw-stat .raw-stat-label { font-size:.72em; text-transform:uppercase; letter-spacing:.08em; color:var(--text-low); }
.raw-stat .raw-stat-value { font-family:var(--font-disp); font-weight:700; font-size:1.5rem; color:var(--raw-gold); }

/* bento grid */
.raw-bento { display:grid; grid-template-columns: repeat(12,1fr); gap:16px; }
.raw-bento-card {
    grid-column: span 4; background: linear-gradient(160deg, var(--raw-card), var(--raw-deep));
    border:1px solid var(--raw-edge); border-radius: var(--rad); padding:22px;
    position:relative; overflow:hidden;
}
.raw-bento-card.raw-span6 { grid-column: span 6; }
.raw-bento-card.raw-span8 { grid-column: span 8; }
.raw-bento-card h3 { margin:0 0 6px; font-family:var(--font-disp); }
.raw-bento-card:hover { border-color: rgba(56,189,248,.4); }
.raw-bento-card .raw-icon { font-size:1.5rem; margin-bottom:8px; }

/* news slider (Latest from the world) */
.raw-news { margin:20px 0; }
.raw-news-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    margin:12px 0 6px;
}
.raw-news-head h2 { margin:0; font-weight:700; }
.raw-news-controls { display:flex; align-items:center; gap:8px; }
.raw-news-all { color:var(--ai-blue); font-size:.9rem; text-decoration:none; white-space:nowrap; }
.raw-news-all:hover { text-decoration:underline; }
.raw-news-arrow {
    width:34px; height:34px; border-radius:50%; cursor:pointer; border:1px solid var(--raw-edge);
    background: var(--glass); color:var(--text-high); font-size:1rem; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.raw-news-arrow:hover { border-color: rgba(56,189,248,.5); color:var(--ai-blue); }
.raw-news-arrow[disabled] { opacity:.35; cursor:default; pointer-events:none; }

.raw-news-track {
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scroll-padding: 2px;
    padding:4px 2px 14px; scrollbar-width: thin; scrollbar-color: rgba(56,189,248,.45) transparent;
}
.raw-news-track::-webkit-scrollbar { height:6px; }
.raw-news-track::-webkit-scrollbar-thumb { background: rgba(56,189,248,.45); border-radius:999px; }
.raw-news-track::-webkit-scrollbar-track { background: transparent; }

.raw-news-card {
    flex: 0 0 min(360px, 78vw); scroll-snap-align: start;
    display:flex; flex-direction:column;
    background: linear-gradient(150deg, var(--raw-card), var(--raw-deep));
    border:1px solid var(--raw-edge); border-radius: var(--rad); padding:18px 20px;
    min-height: 210px; max-height: 320px; overflow:hidden;
}
.raw-news-card h4 { margin:0 0 4px; color: var(--ai-blue); font-size:1.08rem; line-height:1.3; }
.raw-news-card .raw-news-date { font-size:.8em; color:var(--text-low); font-family:var(--font-mono); flex:0 0 auto; }
.raw-news-card .raw-news-excerpt {
    margin:8px 0 0; color:var(--text-mid); line-height:1.55; font-size:.94rem;
    flex:1 1 auto; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
}
.raw-news-card .raw-news-more { margin:10px 0 0; flex:0 0 auto; color:var(--ai-blue); font-size:.9rem; text-decoration:none; }
.raw-news-card .raw-news-more:hover { text-decoration:underline; }

/* no-JS + reduced-motion fallback: everything visible, normal wrapping */
html.no-js .raw-news-track, .raw-news-track.raw-news-static {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); overflow:visible;
    scroll-snap-type:none;
}
html.no-js .raw-news-track .raw-news-card, .raw-news-track.raw-news-static .raw-news-card {
    flex:1 1 auto; max-height:none; overflow:visible; scroll-snap-align:none;
}
html.no-js .raw-news-track .raw-news-card .raw-news-excerpt,
.raw-news-track.raw-news-static .raw-news-card .raw-news-excerpt { -webkit-line-clamp:none; display:block; }

/* connect band CTA */
.raw-connect-band {
    display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:12px;
    background: linear-gradient(135deg, rgba(224,177,93,.08), rgba(56,189,248,.06));
    border:1px solid var(--raw-edge); border-radius: var(--rad-lg); padding:22px; margin:26px 0;
}

/* ---------- 7b. panels / chips / code / steps (connect & reuse) ---------- */
.raw-page-title { font-family: var(--font-disp); font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); margin: 6px 0 4px; }
.raw-panel-card {
    background: linear-gradient(160deg, var(--raw-card), var(--raw-deep));
    border:1px solid var(--raw-edge); border-radius: var(--rad); padding:20px 24px; margin:18px 0;
}
.raw-panel-card h3 { margin:0 0 10px; font-family:var(--font-disp); color:var(--text-high); }
.raw-panel-card h3 .raw-head-ico { margin-right:6px; }
.raw-chip {
    display:inline-flex; align-items:center; gap:8px;
    background: var(--raw-deep); border:1px solid var(--raw-edge); border-radius: 8px;
    padding:8px 12px; font-family:var(--font-mono); font-size:.92rem; color:var(--text-high);
    margin:4px 6px 4px 0;
}
.raw-chip .raw-chip-label { color:var(--text-low); font-family:var(--font-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.raw-chip code { color:var(--raw-gold); }
.raw-code {
    background:#080d18; border:1px solid var(--raw-edge); border-radius: var(--rad-sm);
    color:#d6e3f2; font-family:var(--font-mono); font-size:.86rem; line-height:1.5;
    padding:16px; overflow-x:auto; margin:12px 0; white-space:pre;
}
.raw-steps { counter-reset: rawstep; display:grid; gap:0; margin:6px 0; }
.raw-step { display:flex; gap:16px; align-items:flex-start; margin:14px 0; }
.raw-step::before {
    counter-increment: rawstep; content: counter(rawstep);
    flex:0 0 34px; height:34px; border-radius:50%;
    background: linear-gradient(135deg, var(--raw-gold), var(--raw-gold-hot));
    color: #06121f; font-family: var(--font-disp); font-weight:800;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    box-shadow: 0 0 14px rgba(224,177,93,.35);
}
.raw-step .raw-step-body { flex:1; }
.raw-step .raw-step-body h4 { margin:2px 0 4px; color:var(--ai-blue); font-family:var(--font-disp); }
.raw-step .raw-step-body p { margin:0; color:var(--text-mid); line-height:1.55; }
.raw-status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.raw-status-up { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.raw-status-down { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.raw-note { border-left:3px solid var(--raw-gold); background: rgba(224,177,93,.07); padding:12px 16px; border-radius: 6px; margin:14px 0; color: var(--text-mid); }
.raw-warn { border-left:3px solid var(--danger); background: rgba(255,92,122,.07); padding:12px 16px; border-radius: 6px; margin:14px 0; color: var(--text-mid); }
.raw-feature-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.raw-feature-grid .raw-bento-card { grid-column: auto; }

/* ---------- 7c. auth cards (login/register), donate tiers, meters ---------- */
.raw-glass-card {
    background: var(--glass); backdrop-filter: blur(8px);
    border:1px solid var(--raw-edge); border-radius: var(--rad-lg);
    padding:26px 30px; margin:20px auto; max-width:520px;
    box-shadow: var(--sh-card);
}
.raw-glass-card h2 { margin:0 0 16px; text-align:center; }
.raw-discord-btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:14px 20px; border-radius: var(--rad-sm);
    background: linear-gradient(135deg,#5865F2,#3b45c0); color:#fff;
    font-family: var(--font-disp); font-weight:700; font-size:1.02rem;
    text-decoration:none; transition: transform .12s ease, box-shadow .2s ease;
    box-shadow: 0 4px 16px rgba(88,101,242,.35);
}
.raw-discord-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(88,101,242,.5); color:#fff; }
.raw-or-sep { text-align:center; color:var(--text-low); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin:18px 0 4px; }
.raw-donate-tiers { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:20px 0; }
.raw-donate-tier { background: linear-gradient(160deg, var(--raw-card), var(--raw-deep)); border:1px solid var(--raw-edge); border-radius: var(--rad); padding:22px; text-align:center; position:relative; }
.raw-donate-tier.raw-featured { border:2px solid var(--raw-gold); box-shadow: 0 0 20px rgba(224,177,93,.25); }
.raw-donate-tier .raw-tier-name { font-family: var(--font-disp); font-weight:700; font-size:1.2rem; color:var(--raw-gold); }
.raw-donate-tier .raw-tier-price { font-family: var(--font-mono); font-size:1.1rem; color:var(--text-high); margin:6px 0 12px; }
.raw-tier-list { list-style:none; padding:0; margin:0 0 16px; color:var(--text-mid); font-size:.9rem; line-height:2; }
.raw-tier-list li::before { content:"✓ "; color: var(--ai-cyan); }
.raw-meter { height:10px; border-radius:999px; background: var(--raw-deep); overflow:hidden; margin-top:6px; }
.raw-meter-fill { height:100%; border-radius:999px; background: linear-gradient(90deg, var(--ai-cyan), var(--ai-blue)); width:0%; transition: width .6s ease; }

/* ------------- 7. Tables re-skin (RO-wardrobe) ------------- */
.horizontal-table, .vertical-table { border-collapse: collapse; width:100%; background: rgba(13,27,42,.6); border-radius: var(--rad-sm); overflow:hidden; }
.horizontal-table th, .vertical-table th {
    background: linear-gradient(135deg, var(--raw-panel), #0f233f); color: var(--raw-gold);
    font-family: var(--font-disp); font-weight:600; text-align:left; padding:11px 12px; border-bottom:1px solid var(--raw-edge);
}
.horizontal-table td, .vertical-table td { padding:11px 12px; border-bottom:1px solid rgba(34,51,73,.35); color: var(--text-mid); }
.horizontal-table tr:hover td, .vertical-table tr:hover td { background: rgba(56,189,248,.05); }
.horizontal-table tr:nth-child(even) td { background: rgba(255,255,255,.015); }

/* Ranking RO flavor: top-3 medal badge (rank column) + row lift */
.ranking .horizontal-table tbody tr td:first-child, table.ranking-table td:first-child { text-align:center; font-family:var(--font-disp); font-weight:800; }
.horizontal-table tr.top-ranked.gold-row td { background: rgba(224,177,93,.09); }
.horizontal-table tr.silver-row td { background: rgba(192,192,192,.06); }
.horizontal-table tr.bronze-row td { background: rgba(205,127,50,.06); }
.horizontal-table tr:hover td { background: rgba(56,189,248,.08); transform: translateY(-1px); }

/* ---------- 7d. shop / item cards ---------- */
.raw-item-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin:18px 0; }
.raw-item-card {
    background: linear-gradient(160deg, var(--raw-card), var(--raw-deep));
    border:1px solid var(--raw-edge); border-radius: var(--rad); padding:16px; text-align:center;
    transition: transform .15s ease, box-shadow .2s ease; position:relative;
}
.raw-item-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card), var(--sh-glow); }
.raw-item-card .raw-item-name { font-family:var(--font-disp); font-weight:600; color:var(--text-high); margin:8px 0 2px; font-size:.95rem; }
.raw-item-card .raw-item-price { color:var(--raw-gold); font-family:var(--font-mono); margin:4px 0 10px; }
.raw-item-card .raw-item-stock { position:absolute; top:8px; right:8px; font-size:.68rem; color:var(--text-low); background:var(--raw-deep); padding:2px 6px; border-radius:999px; }

/* Item shop: table -> responsive card grid (pure CSS re-skin, RO flavor) */
.shop-table { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:16px; width:100%; border:none; background:transparent; }
.shop-table > tr {
    display:block; background: linear-gradient(160deg, var(--raw-card), var(--raw-deep));
    border:1px solid var(--raw-edge); border-radius: var(--rad); padding:16px;
    transition: transform .15s ease, box-shadow .2s ease;
}
.shop-table > tr:hover { transform: translateY(-3px); box-shadow: var(--sh-card), var(--sh-glow); }
.shop-table > tr > td { display:block; border:none; background:none !important; padding:4px 0; }
.shop-table .shop-item-image { text-align:center; min-height:48px; }
.shop-table .shop-item-name { font-family:var(--font-disp); color:var(--text-high); margin:4px 0; }
.shop-table .shop-item-info { color:var(--text-mid); font-size:.86rem; line-height:1.5; }
.shop-table .shop-item-cost-qty .cost { color:var(--raw-gold); font-family:var(--font-mono); font-weight:700; }
.shop-table .shop-item-action a { color: var(--ai-blue); }
.shop-table .shop-item-action a:hover { color: var(--raw-gold); }
@media (max-width: 560px) { .shop-table { grid-template-columns: 1fr; } }

/* ---------- 8. Panels, forms, messages ---------- */
.panel, .box, .content, .account-info { border-color: var(--raw-edge); background: rgba(13,27,42,.5); border-radius: var(--rad); }
input[type=text], input[type=password], input[type=email], input[type=number], textarea, select {
    background: var(--raw-deep); color: var(--text-high); border:1px solid var(--raw-edge); border-radius: 6px; padding:9px 11px; font-size:.98rem;
}
input:focus, textarea:focus, select:focus { border-color: var(--ai-blue); box-shadow: var(--sh-glow); }
.message, .notice { border-radius: var(--rad-sm); }
.notice { color: var(--raw-gold); }

/* ---------- 9. Footer ---------- */
#footer, footer, .footer, #site-footer, .site-footer { background: var(--raw-deep); border-top:1px solid var(--raw-edge); color: var(--text-low); margin-top:40px; }
#footer a, footer a, #site-footer a { color: #7dd3fc; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(125,211,252,.45); }
#footer a:hover, footer a:hover { color: var(--raw-gold); text-decoration-color: var(--raw-gold); }
.raw-social { margin:8px 0 0; font-size:.9em; color:var(--text-low); }
.raw-social a { color: var(--ai-blue); }
.raw-social a:hover { color: var(--raw-gold); }
.render-details { font-size:.78em; color:var(--text-low); }
/* Footer links/text must be readable on the dark footer (base gave light #f0f0f0 bg) */
footer .copyright, .site-footer .copyright, footer p, .site-footer p,
#footer p, footer strong, footer .footer-controls, footer select, footer option {
    color: var(--text-low);
}

/* ============ 9e. GLOBAL DARK-SURFACE PASS ============
   Replace every remaining base-FluxCP LIGHT background (#fff / #eee / numeric light)
   with the dark theme so our dark-theme text is always readable. Covers the register/
   login form boxes, form tables, inputs, buttons, textareas and code blocks — anything
   that still painted a bright/white background. */
.horizontal-table th, .vertical-table th, .generic-form-table th { background-color: #132a47; color: var(--text-high); }
.horizontal-table td, .vertical-table td, .generic-form-table td { background-color: #101d2f; color: var(--text-high); }
.horizontal-table tr:hover td, .vertical-table tr:hover td { background-color: #16273f; }

/* RAW — auth/glass-card form alignment: tables fill the card, label column fixed so
   inputs line up vertically across rows (no leftover whitespace / ragged columns). */
.raw-glass-card .generic-form-table { width:100%; border-collapse:collapse; }
.raw-glass-card .generic-form-table th { width:140px; min-width:120px; text-align:left; padding:8px 12px; vertical-align:middle; }
.raw-glass-card .generic-form-table td { padding:8px 6px 8px 12px; }
.raw-glass-card .generic-form-table td:has(> input[type=submit]) , 
.raw-glass-card .generic-form-table td:has(button) { padding-left:12px; }
.raw-glass-card .generic-form-table input[type=text],
.raw-glass-card .generic-form-table input[type=password],
.raw-glass-card .generic-form-table input[type=email],
.raw-glass-card .generic-form-table select { width:100%; box-sizing:border-box; max-width:280px; }

/* Form inputs / textareas / selects — dark fields, light text */
input[type=text], input[type=password], input[type=email], input[type=number],
textarea, select, .generic-form-table input, .generic-form-table textarea, .generic-form-table select {
    background-color: #0d1b2a !important;
    color: #eef4ff !important;
    border: 1px solid #223349 !important;
}
input::placeholder, textarea::placeholder { color: #7a90ad !important; }

/* Buttons — give base white/light buttons a dark-theme surface with readable text */
button, input[type=submit] {
    background-color: #2d9cdb;
    color: #0b1220;
    border: 1px solid transparent;
    cursor: pointer;
}
button[type=submit], input[type=submit] { background-color: #2d9cdb; color: #fff; }

/* Code / pre blocks that were white */
pre, code, .mono {
    background-color: #0b1220 !important;
    color: #a6e0b5 !important;
    border: 1px solid #223349 !important;
}

/* ---------- 10. Accessible + responsive + reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .raw-reveal { opacity:1; transform:none; }
    .raw-hero::before, .raw-orb::after, .raw-pulse::after { display:none; }
}
@media (max-width: 900px) {
    .raw-bento-card, .raw-bento-card.raw-span6, .raw-bento-card.raw-span8 { grid-column: span 12; }
}
@media (max-width: 700px) {
    .raw-hero-inner { padding:22px 18px 18px; }
    .raw-hero-title { font-size:1.7rem; }
    .raw-hero-cta { flex-direction: column; }
    .raw-btn { text-align:center; }
    .raw-hero-meta span { display:block; margin:4px 0; }
    .raw-stats { grid-template-columns: repeat(2,1fr); }
}

/* ── Status badges (replaces emoji ✅⚠⛔ with theme-consistent chips) ── */
.raw-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 12px; border-radius:999px;
    font-size:.82rem; font-weight:700; line-height:1.6;
}
.raw-badge::before { content:""; width:8px; height:8px; border-radius:50%; }
.raw-badge-ok   { background:rgba(52,211,153,.12); color:#34d399; border:1px solid rgba(52,211,153,.35); }
.raw-badge-ok::before   { background:#34d399; box-shadow:0 0 6px #34d399; }
.raw-badge-warn { background:rgba(245,199,126,.12); color:#f5c77e; border:1px solid rgba(245,199,126,.35); }
.raw-badge-warn::before { background:#f5c77e; box-shadow:0 0 6px #f5c77e; }
.raw-badge-err  { background:rgba(255,92,122,.12); color:#ff5c7a; border:1px solid rgba(255,92,122,.35); }
.raw-badge-err::before  { background:#ff5c7a; box-shadow:0 0 6px #ff5c7a; }

/* ── Role badge (account view: LLM Token Supporter) ──────────────── */
.role-badge {
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    line-height:1.5;
}
.role-badge.badge-llm {
    background:rgba(52,211,153,.12);
    color:#34d399;
    border:1px solid rgba(52,211,153,.35);
}

/* RAW — header user status (visible-but-subtle, no box) */
.raw-user-status {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:.65rem;
    font-size:.85rem;
    color:var(--text-mid,#9db2d0);
    white-space:nowrap;
}
.raw-user-status a {
    color:var(--raw-gold,#f2c94c);
    text-decoration:none;
}
.raw-user-status a:hover { text-decoration:underline; }
.raw-user-name a { color:var(--text-mid,#c8d6ee); font-weight:500; }
.raw-user-logout { color:var(--text-mid,#9db2d0); font-size:.8rem; }
.raw-user-sep { color:rgba(157,178,208,.4); }
@media (max-width:600px){ .raw-user-status{ font-size:.78rem; } }