@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;800&display=swap');

:root {
    --accent: #c026d3;
    --glass: rgba(15,23,42,0.96);
    --border: rgba(139,92,246,0.30);

    /* New sidebar palette */
    --sb-bg: rgba(12,12,26,0.98);
    --sb-surface: #111126;
    --sb-raised: rgba(17,17,38,0.95);
    --sb-hover: #16163a;
    --sb-border-dim: rgba(99,102,241,0.10);
    --sb-border: rgba(99,102,241,0.18);
    --sb-border-glow: rgba(99,102,241,0.40);
    --sb-accent: #818cf8;
    --sb-accent-bright: #a5b4fc;
    --sb-accent-dim: rgba(129,140,248,0.12);
    --sb-amber: #f59e0b;
    --sb-amber-dim: rgba(245,158,11,0.12);
    --sb-amber-glow: rgba(245,158,11,0.35);
    --sb-cyan: #22d3ee;
    --sb-cyan-dim: rgba(34,211,238,0.10);
    --sb-text-1: #e2e8f0;
    --sb-text-2: #94a3b8;
    --sb-text-3: #475569;
    --sb-text-muted: #334155;
}

html, body { height: 100%; margin: 0; overflow: hidden; background-color: #0a0a1f; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }

/* PWA safe-area insets (notches / home indicator) */
#top-header { padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; }
#info-panel, #mini-ui, #event-ticker-wrap { margin-bottom: env(safe-area-inset-bottom, 0px); }
#spoiler-menu, #arcanum-modal > div, #codex-modal > div { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (display-mode: standalone), (display-mode: fullscreen) {
    .pwa-only { display: inline-flex !important; }
}
body { font-family: 'DM Sans', 'Inter', system-ui; }
.title { font-family: 'Space Grotesk', sans-serif; }

canvas { display: block; image-rendering: auto; touch-action: none; }
.glass { background: var(--glass); backdrop-filter: blur(20px); border-color: var(--border); }

.celestial-card { transition: all 0.2s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; }
.celestial-card:hover { transform: translateX(2px); box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.3); border-color: rgba(99,102,241,0.40); }

#info-panel { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); opacity: 0; pointer-events: none; transform: translateY(20px) scale(0.95); }
#info-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
@media (min-width: 1024px) { #info-panel { transform: translateX(20px) scale(0.95); } #info-panel.open { transform: translateX(0) scale(1); } }
.info-left-slot { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 2px solid var(--accent); background: #18181b; }
.info-portrait { width: 100%; height: 100%; object-fit: cover; }

/* ====== REDESIGNED SIDEBAR ====== */
#sidebar {
    width: 300px; flex-shrink: 0; height: calc(100vh - 48px);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--sb-bg); border-right: 1px solid var(--sb-border-dim);
    display: flex; flex-direction: column; position: relative;
}
#sidebar::after {
    content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
    background: linear-gradient(180deg, rgba(99,102,241,0.25) 0%, transparent 30%, transparent 70%, rgba(99,102,241,0.25) 100%);
    pointer-events: none; z-index: 1;
}
#sidebar.collapsed { width: 0; overflow: hidden; }

#sidebar-content { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0; display: flex; flex-direction: column; gap: 0; scrollbar-width: none; }
#sidebar-content::-webkit-scrollbar { display: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 1023px) {
    #sidebar { position: fixed; top: 48px; left: 0; height: calc(100vh - 48px); z-index: 60; box-shadow: 4px 0 20px -4px rgb(0 0 0 / 0.6); }
    body.sidebar-collapsed #canvas-container { margin-left: 0 !important; width: 100% !important; }
}
@media (min-width: 1024px) { body.sidebar-collapsed #canvas-container { margin-left: 0; } }

input[type="checkbox"]:checked + div svg { opacity: 1; }

@keyframes ticker { 0% { transform: translateX(100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } }
.ticker-text { animation: ticker 25s linear infinite; white-space: nowrap; }

#search-dropdown { max-height: 250px; overflow-y: auto; }
.search-item { transition: background-color 0.15s; }
.search-item:hover { background-color: rgba(99,102,241,0.15); }

/* -- Timeline Command Bar -- */
.sb-timeline-bar { background: linear-gradient(180deg, var(--sb-surface) 0%, var(--sb-bg) 100%); border-bottom: 1px solid var(--sb-border-dim); padding: 14px 16px 12px; flex-shrink: 0; position: relative; z-index: 50; }
.sb-tl-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }

.sb-play-btn {
    width:36px; height:36px; border:none; border-radius:50%;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 0 18px rgba(99,102,241,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1); flex-shrink:0; position: relative; line-height:1;
}
.sb-play-btn:hover { transform:scale(1.08); box-shadow: 0 0 24px rgba(99,102,241,0.5); }
.sb-play-btn:active { transform:scale(0.95); }
.sb-play-btn .sb-ring {
    position:absolute; inset:-3px; border-radius:50%; border: 2px solid transparent; border-top-color: var(--sb-accent);
    animation: sb-spin 2.5s linear infinite; opacity: 0; transition: opacity 0.3s;
}
.sb-play-btn.sb-playing .sb-ring { opacity: 1; }
@keyframes sb-spin { to { transform: rotate(360deg); } }

.sb-year-block { flex:1; min-width:0; }
.sb-year-val { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:15px; color:#fff; letter-spacing:0.5px; line-height:1; }
.sb-era-badge { display:inline-flex; align-items:center; gap:4px; margin-top:5px; font-size:9px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; color: var(--sb-amber); line-height:1; }
.sb-era-badge::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--sb-amber); box-shadow: 0 0 6px var(--sb-amber-glow); }

/* -- Era Buttons (GRID FORMAT) -- */
.sb-era-tabs {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; 
    padding: 4px 0 8px; margin-top: 4px;
}
.sb-era-tab {
    width: 100%; padding: 7px 4px; border-radius: 6px; font-size: 9px; font-weight: 600;
    color: var(--sb-text-2); background: var(--sb-surface); border: 1px solid var(--sb-border-dim);
    cursor: pointer; transition: all 0.15s; white-space: nowrap; letter-spacing: 0.5px; 
    text-transform: uppercase; text-align: center; overflow: hidden; text-overflow: ellipsis;
}
.sb-era-tab:hover { border-color: var(--sb-border-glow); color: var(--sb-text-1); background: var(--sb-hover); }
.sb-era-tab.sb-active {
    background: var(--sb-amber-dim); border-color: var(--sb-amber); color: var(--sb-amber);
    box-shadow: 0 0 8px var(--sb-amber-glow);
}

/* Slider */
.sb-slider-wrap { position:relative; padding:4px 0; cursor:pointer; }
.custom-range { -webkit-appearance: none; width: 100%; background: transparent; position: relative; z-index: 30; margin: 0; cursor: pointer; }
.custom-range:focus { outline: none; }
.custom-range::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; border-radius: 99px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); background: rgba(6,6,15,0.8); }
.custom-range::-webkit-slider-thumb {
    height: 16px; width: 16px; border-radius: 50%; background: var(--sb-amber); border: 2px solid #fff;
    box-shadow: 0 0 10px var(--sb-amber-glow), 0 0 0 2px rgba(245,158,11,0.15); cursor: pointer; -webkit-appearance: none; margin-top: -5px; 
}
.sb-slider-track { position:relative; height:4px; border-radius:99px; background: rgba(6,6,15,0.8); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
.sb-slider-fill { position:absolute; top:0; left:0; height:100%; border-radius:99px; background: linear-gradient(90deg, var(--sb-amber) 0%, #fbbf24 100%); box-shadow: 0 0 10px var(--sb-amber-glow); transition: width 0.05s linear; pointer-events:none; }
#timeline-slider, #mini-timeline-slider { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:10; margin:0; }
.sb-slider-thumb-visual { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; background: var(--sb-amber); box-shadow: 0 0 8px var(--sb-amber-glow), 0 2px 4px rgba(0,0,0,0.4); transform: translate(-50%,-50%); pointer-events:none; z-index:5; transition: box-shadow 0.15s; }

/* Speed Row */
.sb-tl-controls { display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:10px; border-top:1px solid var(--sb-border-dim); }
.sb-speed-group { display:flex; align-items:center; gap:6px; flex:1; }
.sb-speed-label { font-size:9px; font-weight:600; color:var(--sb-text-3); letter-spacing:1.5px; text-transform:uppercase; }
.sb-speed-val { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; color:var(--sb-cyan); background:var(--sb-cyan-dim); border-radius:4px; padding:2px 6px; }
.sb-speed-adj {
    width:22px; height:22px; border-radius:4px; border:1px solid var(--sb-border); background:var(--sb-surface); color:var(--sb-text-2); font-size:13px; font-weight:700;
    cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.12s; font-family:'DM Sans','Inter',sans-serif; line-height:1;
}
.sb-speed-adj:hover { background:var(--sb-hover); border-color:var(--sb-border-glow); color:#fff; }
#speed { display:none; }

/* -- Search -- */
.sb-search-wrap { position:relative; }
.sb-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--sb-text-3); pointer-events:none; font-size:13px; line-height:1; }
#search {
    width:100%; background:var(--sb-surface); border:1px solid var(--sb-border-dim); border-radius:10px; padding:9px 12px 9px 34px;
    font-size:12px; color:var(--sb-text-1); font-family:'DM Sans','Inter',sans-serif; outline:none; transition: all 0.2s;
}
#search::placeholder { color:var(--sb-text-3); font-weight:400; }
#search:focus { border-color:var(--sb-accent); background:rgba(6,6,15,0.8); box-shadow: 0 0 0 3px var(--sb-accent-dim); }
#search:hover:not(:focus) { border-color: var(--sb-border); }
#search-dropdown { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); }

/* -- Settings Panel -- */
.sb-settings-toggle {
    display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background:var(--sb-surface); border:1px solid var(--sb-border-dim);
    border-radius:10px; cursor:pointer; transition:all 0.15s; -webkit-user-select:none; user-select:none;
}
.sb-settings-toggle:hover { border-color:var(--sb-border); }
.sb-settings-label { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--sb-text-2); }
.sb-settings-chevron { color:var(--sb-text-3); transition:transform 0.25s cubic-bezier(0.4,0,0.2,1); font-size:10px; }
.sb-settings-toggle.sb-open .sb-settings-chevron { transform:rotate(180deg); }
.sb-settings-panel { overflow:hidden; max-height:0; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.3s; padding:0; }
.sb-settings-panel.sb-open { max-height:500px; padding:8px 0 4px; }
#visual-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.sb-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; padding:5px 7px; border-radius:6px; transition:background 0.12s; }
.sb-toggle-row:hover { background:var(--sb-surface); }
.sb-toggle-label { font-size:10.5px; color:var(--sb-text-2); white-space:nowrap; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sb-toggle-switch {
    position:relative; width:28px; height:16px; border-radius:99px; background:rgba(6,6,15,0.8); border:1px solid var(--sb-border); cursor:pointer; transition:all 0.2s; flex-shrink:0;
}
.sb-toggle-switch::after { content:''; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--sb-text-3); transition:all 0.2s; }
.sb-toggle-switch.sb-on { background:var(--sb-accent-dim); border-color:var(--sb-accent); }
.sb-toggle-switch.sb-on::after { transform:translateX(12px); background:var(--sb-accent-bright); box-shadow: 0 0 4px var(--sb-accent); }

/* -- Directory Tabs (Grid Format) -- */
.sb-dir-tabs { 
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; 
    padding: 4px 0 8px; 
}
.sb-dir-tab {
    width: 100%; padding: 6px 2px; border-radius: 6px; font-size: 9.5px; font-weight: 500; 
    color: var(--sb-text-2); background: var(--sb-surface); border: 1px solid var(--sb-border-dim);
    cursor: pointer; transition: all 0.15s; white-space: nowrap; text-align: center; 
    overflow: hidden; text-overflow: ellipsis; font-family: 'DM Sans', 'Inter', sans-serif;
}
.sb-dir-tab:hover { color: var(--sb-text-1); border-color: var(--sb-border-glow); background: var(--sb-hover); }
.sb-dir-tab.sb-active { 
    color: #fff; background: var(--sb-accent-dim); border-color: var(--sb-border-glow); 
    box-shadow: 0 0 10px rgba(99,102,241,0.15); 
}

/* -- Section Spacing -- */
.sb-section { padding: 12px 16px 0; }
.sb-section:last-child { padding-bottom: 12px; }
.sb-sep { height:1px; background:var(--sb-border-dim); margin:6px 0; }

/* -- Card List -- */
.sb-card-list { flex:1; display:flex; flex-direction:column; gap:2px; overflow-y:auto; scrollbar-width:none; padding: 0 16px 20px; }
.sb-card-list::-webkit-scrollbar { display:none; }

.celestial-card {
    position:relative; overflow:hidden; padding: 10px 12px; margin-bottom: 2px; background: var(--sb-surface); border: 1px solid var(--sb-border-dim); border-radius: 10px;
}
.celestial-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background: var(--accent); opacity:0; transition: opacity 0.2s; }
.celestial-card:hover::before { opacity:1; }
.celestial-card:hover { background: var(--sb-hover); border-color: var(--sb-border); transform: translateX(2px); }

/* -- Footer -- */
.sb-footer { padding:10px 16px; border-top:1px solid var(--sb-border-dim); display:flex; align-items:center; justify-content:space-between; background: rgba(6,6,15,0.9); flex-shrink:0; }
.sb-hint-keys { display:flex; gap:8px; }
.sb-hint-key { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--sb-text-muted); }
.sb-reset-btn {
    padding:6px 14px; border-radius:6px; border:1px solid var(--sb-border); background:var(--sb-surface); color:var(--sb-accent-bright); font-size:10px; font-weight:600;
    letter-spacing:0.8px; text-transform:uppercase; cursor:pointer; transition:all 0.15s; font-family:'DM Sans','Inter',sans-serif;
}
.sb-reset-btn:hover { background:var(--sb-accent-dim); border-color:var(--sb-accent); box-shadow: 0 0 10px rgba(99,102,241,0.2); }

#directory-select, #era-jump-select { display:none; }

/* HOVER TOOLTIP */
#hover-tooltip {
    position:fixed; pointer-events:none; z-index:200; background:rgba(12,12,26,0.95); border:1px solid var(--sb-border);
    border-radius:6px; padding:4px 8px; font-size:10px; font-weight:600; color:var(--sb-text-1); opacity:0; transition:opacity 0.08s; white-space:nowrap;
    box-shadow:0 4px 15px rgba(0,0,0,0.5); margin-top: 15px; margin-left: 15px;
}
#hover-tooltip.tt-show { opacity:1; }
#hover-tooltip .tt-type { font-size:8px; text-transform:uppercase; letter-spacing:1px; color:var(--sb-accent-bright); display:block; margin-top:2px; font-weight:700; }

/* MINIMAP */
#minimap-wrap { position:absolute; bottom:80px; right:16px; z-index:30; border-radius:12px; overflow:hidden; border:1px solid rgba(139,92,246,0.45); background:rgba(5,5,18,0.92); box-shadow:0 4px 28px rgba(0,0,0,0.5); transition:opacity 0.25s, transform 0.25s; }
#minimap-wrap.mm-hidden { opacity:0; pointer-events:none; transform:translateY(6px) scale(0.96); }
#minimap-wrap .mm-label { position:absolute; top:5px; left:7px; font-size:7.5px; text-transform:uppercase; letter-spacing:2px; color:rgba(139,92,246,0.6); font-family:'Space Grotesk',sans-serif; font-weight:700; pointer-events:none; }
#mm-btn { position:absolute; bottom:84px; right:188px; z-index:35; background:rgba(10,10,31,0.9); border:1px solid rgba(139,92,246,0.35); border-radius:8px; padding:5px 9px; font-size:11px; color:rgba(139,92,246,0.8); cursor:pointer; transition:all 0.15s; }
#mm-btn:hover { background:rgba(139,92,246,0.15); color:white; }

/* SHARD CARDS */
.shard-card { border-radius:14px; border:1px solid; transition:all 0.2s; cursor:pointer; flex-shrink: 0; }
.shard-card:hover { transform:translateY(-1px); filter:brightness(1.08); }
.s-whole { background:rgba(34,197,94,0.07); border-color:rgba(34,197,94,0.3)!important; }
.s-splintered { background:rgba(239,68,68,0.07); border-color:rgba(239,68,68,0.3)!important; }
.s-merged { background:rgba(139,92,246,0.07); border-color:rgba(139,92,246,0.3)!important; }
.s-unknown { background:rgba(113,113,122,0.07); border-color:rgba(113,113,122,0.22)!important; }
.b-whole { color:#4ade80; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.4); border-radius:99px; font-size:9px; padding:1px 7px; letter-spacing:1px; text-transform:uppercase; }
.b-splintered { color:#f87171; background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.4); border-radius:99px; font-size:9px; padding:1px 7px; letter-spacing:1px; text-transform:uppercase; }
.b-merged { color:#a78bfa; background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.4); border-radius:99px; font-size:9px; padding:1px 7px; letter-spacing:1px; text-transform:uppercase; }
.b-unknown { color:#a1a1aa; background:rgba(113,113,122,0.1); border:1px solid rgba(113,113,122,0.3); border-radius:99px; font-size:9px; padding:1px 7px; letter-spacing:1px; text-transform:uppercase; }

.kbd { display:inline-block; padding:1px 5px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:8px; color:rgba(255,255,255,0.45); line-height:1.5; }
.char-chip { font-size:11px; padding:3px 10px; border-radius:99px; cursor:pointer; transition:all 0.15s; display:inline-block; }
.char-chip:hover { filter:brightness(1.4); transform:scale(1.04); }
.dragon-card { border-radius:14px; border:1px solid rgba(251,191,36,0.3); background:rgba(251,191,36,0.05); transition:all 0.2s; cursor:pointer; flex-shrink: 0; }
.dragon-card:hover { transform:translateY(-1px); filter:brightness(1.08); border-color:rgba(251,191,36,0.6); }
.dragon-shard-link { font-size:9px; padding:1px 7px; border-radius:99px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all 0.15s; display:inline-block; }
.dragon-shard-link:hover { filter:brightness(1.3); transform:scale(1.05); }

canvas.c-hover { cursor:pointer; }
canvas.c-panning { cursor:grabbing; }

/* CITATION & CANONICITY */
.cite-box { margin-top:14px; padding-top:14px; border-top:1px solid rgba(139,92,246,0.18); }
.canon-badge {
    display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase; padding:3px 9px; border-radius:99px;
    border:1px solid; cursor:help;
}
.canon-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.cn-canon    { color:#4ade80; background:rgba(74,222,128,0.10);  border-color:rgba(74,222,128,0.40); }
.cn-wob      { color:#fbbf24; background:rgba(251,191,36,0.10);  border-color:rgba(251,191,36,0.40); }
.cn-spec     { color:#c084fc; background:rgba(192,132,252,0.10); border-color:rgba(192,132,252,0.40); }
.cn-noncanon { color:#a1a1aa; background:rgba(161,161,170,0.10); border-color:rgba(161,161,170,0.35); }
.src-line { margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.src-key { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#71717a; }
.src-chip {
    font-size:10px; color:#cbd5e1; background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.10); border-radius:6px; padding:2px 8px;
}
.src-notes { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.src-note {
    font-size:11px; color:#a1a1aa; line-height:1.45; display:flex; align-items:flex-start; gap:7px;
    background:rgba(192,132,252,0.05); border:1px solid rgba(192,132,252,0.15);
    border-radius:8px; padding:7px 9px;
}
.canon-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.src-note-field { color:#d4d4d8; font-weight:600; font-style:italic; margin-right:4px; }

/* LORE WEB LEGEND / path-finder */
.wl-row { display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    background:transparent; border:none; cursor:pointer; padding:3px 2px; transition:opacity 0.12s; }
.wl-row:hover { opacity:0.85; }
.wl-row.wl-off { opacity:0.32; }
.wl-sw { width:14px; height:3px; border-radius:2px; flex-shrink:0; }
.wl-row.wl-off .wl-sw { box-shadow:none !important; background:#52525b !important; }
.wl-lb { font-size:11px; color:var(--sb-text-1); }
.wl-row.wl-off .wl-lb { text-decoration:line-through; color:var(--sb-text-3); }

/* THE CODEX — knowledge hub */
.cx-filter {
    font-size:10px; font-weight:600; letter-spacing:0.5px; padding:5px 11px; border-radius:99px;
    background:var(--sb-surface); color:var(--sb-text-2); border:1px solid var(--sb-border-dim);
    cursor:pointer; transition:all 0.13s;
}
.cx-filter:hover { color:#fff; border-color:var(--sb-border-glow); }
.cx-filter-on { background:var(--sb-accent-dim); color:var(--sb-accent-bright); border-color:var(--sb-accent); }
.cx-card { padding:12px 14px; border-radius:12px; cursor:pointer;
    background:rgba(255,255,255,0.03); border:1px solid rgba(139,92,246,0.18); transition:all 0.15s; }
.cx-card:hover { background:rgba(255,255,255,0.06); border-color:var(--sb-accent); transform:translateX(2px); }
.cx-card-top { display:flex; align-items:center; gap:9px; }
.cx-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cx-name { font-weight:700; font-size:14px; color:#fff; flex:1; min-width:0; }
.cx-badge { font-size:8.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--sb-accent-bright); background:rgba(129,140,248,0.12); border:1px solid rgba(129,140,248,0.3);
    border-radius:99px; padding:2px 8px; flex-shrink:0; }
.cx-blurb { font-size:11.5px; color:var(--sb-text-2); line-height:1.5; margin-top:6px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cx-rel { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.cx-chip { font-size:10px; color:#cbd5e1; background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:2px 8px; cursor:pointer; transition:all 0.12s; }
.cx-chip:hover { background:var(--sb-accent-dim); border-color:var(--sb-accent); color:#fff; }

/* THE ARCANUM — magic explorer */
.arc-card {
    position:relative; text-align:left; display:flex; flex-direction:column; gap:3px;
    padding:14px 14px 14px 16px; border-radius:14px; cursor:pointer;
    background:rgba(255,255,255,0.03); border:1px solid rgba(139,92,246,0.22);
    transition:all 0.18s; overflow:hidden;
}
.arc-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--mc); opacity:0.7; }
.arc-card:hover { transform:translateY(-2px); border-color:var(--mc); background:rgba(255,255,255,0.06); box-shadow:0 8px 22px -8px var(--mc); }
.arc-card-dot { position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%; background:var(--mc); box-shadow:0 0 8px var(--mc); }
.arc-card-name { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:#fff; }
.arc-card-world { font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--mc); }
.arc-card-type { font-size:10.5px; color:var(--sb-text-2); margin-top:2px; }
.arc-detail-head { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.arc-orb { width:54px; height:54px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,0.12); }
.arc-detail-name { font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:26px; color:#fff; letter-spacing:-0.5px; }
.arc-detail-type { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--mc); margin-top:3px; }
.arc-desc { font-size:13.5px; line-height:1.6; color:#d4d4d8; margin:0 0 16px; }
.arc-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.arc-field { background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:10px 12px; }
.arc-field:nth-child(3), .arc-field:nth-child(4) { grid-column:1 / -1; }
.arc-fk { display:block; font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--sb-text-3); margin-bottom:4px; }
.arc-fv { font-size:12.5px; color:#e2e8f0; line-height:1.5; }
.arc-table-wrap { overflow-x:auto; border:1px solid rgba(139,92,246,0.2); border-radius:12px; margin-bottom:18px; }
.arc-table { width:100%; border-collapse:collapse; font-size:12px; }
.arc-table th { text-align:left; padding:9px 12px; background:rgba(139,92,246,0.12); color:var(--sb-accent-bright);
    font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
.arc-table td { padding:8px 12px; border-top:1px solid rgba(255,255,255,0.05); color:#cbd5e1; }
.arc-table .arc-c0 { font-weight:700; color:#fff; }
.arc-trow { cursor:pointer; transition:background 0.12s; }
.arc-trow:hover { background:rgba(255,255,255,0.04); }
.arc-trow-on { background:rgba(139,92,246,0.16) !important; }
.arc-trow-on .arc-c0 { color:var(--sb-accent-bright); }

/* READING COMPANION */
.rc-title { font-size:13px; font-weight:700; color:var(--sb-accent-bright); margin-bottom:2px; }
.rc-sub { font-size:10.5px; color:var(--sb-text-2); margin-bottom:10px; line-height:1.4; }
.rc-row { display:flex; gap:6px; margin-bottom:8px; }
.rc-sel {
    flex:1; min-width:0; background:var(--sb-surface); color:var(--sb-text-1);
    border:1px solid var(--sb-border); border-radius:8px; padding:7px 8px; font-size:11px;
    font-family:'DM Sans','Inter',sans-serif; outline:none; cursor:pointer;
}
.rc-sel:focus { border-color:var(--sb-accent); }
.rc-btn {
    flex:1; padding:8px 6px; border-radius:8px; font-size:10.5px; font-weight:600; cursor:pointer;
    background:var(--sb-surface); color:var(--sb-text-2); border:1px solid var(--sb-border);
    transition:all 0.15s; font-family:'DM Sans','Inter',sans-serif;
}
.rc-btn:hover { border-color:var(--sb-border-glow); color:#fff; background:var(--sb-hover); }
.rc-btn-main { background:var(--sb-accent-dim); border-color:var(--sb-accent); color:var(--sb-accent-bright); }
.rc-btn-main:hover { background:rgba(129,140,248,0.22); color:#fff; }
.rc-status { font-size:10px; color:var(--sb-text-2); line-height:1.5; margin-top:6px; }
.rc-status strong { color:var(--sb-accent-bright); }
.rc-new {
    display:inline-block; margin-left:7px; font-size:8.5px; font-weight:700; letter-spacing:0.5px;
    text-transform:uppercase; color:#fde047; background:rgba(253,224,71,0.12);
    border:1px solid rgba(253,224,71,0.4); border-radius:99px; padding:1px 6px; vertical-align:middle;
}

/* SPOILER 2.0 — per-series milestone steppers */
.sp-series { display:flex; flex-direction:column; gap:6px; }
.sp-series-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.sp-series-title { font-size:12px; font-weight:600; color:var(--sb-text-1); }
.sp-series-cur { font-size:9.5px; font-weight:600; letter-spacing:0.5px; color:var(--sb-amber); text-align:right; }
.sp-series-cur.sp-cur-none { color:var(--sb-text-3); }
.sp-segs { display:flex; gap:3px; flex-wrap:wrap; }
.sp-seg {
    min-width:22px; height:22px; padding:0 5px; border-radius:5px; cursor:pointer;
    font-size:10px; font-weight:700; font-family:'JetBrains Mono',monospace;
    color:var(--sb-text-3); background:var(--sb-surface); border:1px solid var(--sb-border-dim);
    transition:all 0.12s; display:flex; align-items:center; justify-content:center; line-height:1;
}
.sp-seg:hover { border-color:var(--sb-border-glow); color:var(--sb-text-1); }
.sp-seg-on { color:#fff; background:var(--sb-amber-dim); border-color:var(--sb-amber); }
.sp-seg-cur { box-shadow:0 0 8px var(--sb-amber-glow); outline:1px solid var(--sb-amber); }

/* ACCURATE TIME ENGINE */
.yr-real { font-size:12px; line-height:1.25; letter-spacing:0.2px; cursor:help; display:inline-block; }
.approx-mark { color:var(--sb-amber); font-weight:700; cursor:help; }