/* ===========================================================
   RUNECLICKER — UNIFIED DESIGN SYSTEM

   Reverse-engineered from the ceremonial window language
   (ep-cz-loot, orb-ritual, offline-report) and extended to
   every game surface. Not a reskin — a ground-up recreation.

   Scope: body.ds-unified (mashflake-only until promoted)
   =========================================================== */


/* ─── § 1  DESIGN TOKENS ─────────────────────────────────── */

body.ds-unified {
    /* ── Surfaces ── */
    --ds-bg:           #0a0806;
    --ds-surface-0:    #5d5549;                    /* outer stone shell base */
    --ds-surface-1:    #2a241e;                    /* inner carved stone */
    --ds-surface-2:    #1e1a14;                    /* cards, deep content */
    --ds-surface-3:    #161210;                    /* ultra-deep recessed */
    --ds-surface-raised: #3a342c;                  /* slightly raised from surface-1 */

    /* ── Outer stone shell gradient ── */
    --ds-shell: linear-gradient(180deg,
        #7a6b57 0%, #5d5549 12%, #4a4238 92%, #2f2924 100%);
    --ds-shell-subtle: linear-gradient(180deg,
        #5d5549 0%, #4a4238 50%, #3a342c 100%);
    --ds-shell-tab: linear-gradient(180deg,
        #4a4238 0%, #3a342c 50%, #2a241e 100%);
    --ds-shell-tab-hover: linear-gradient(180deg,
        #5d5549 0%, #4a4238 50%, #3a342c 100%);
    --ds-shell-tab-active: linear-gradient(180deg,
        #5d5549 0%, #4a4238 100%);

    /* ── Texture ── */
    --ds-texture: url('../img/viewport-background-texture.png') center/cover no-repeat;
    --ds-weave:
        repeating-linear-gradient(45deg,
            rgba(255,180,60,0.018) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-45deg,
            rgba(0,0,0,0.12) 0 2px, transparent 2px 6px);

    /* ── Borders ── */
    --ds-border-hard:      2px solid #000;
    --ds-border-hard-1:    1px solid #000;
    --ds-border-frame:     1px solid #120f09;
    --ds-border-accent:    1px solid rgba(201,162,74,0.22);
    --ds-border-accent-hi: 1px solid rgba(201,162,74,0.45);
    --ds-border-subtle:    1px solid rgba(201,162,74,0.12);

    /* ── Shadows ── */
    --ds-shadow-shell:
        inset 1px 1px 0 #a08558,
        inset -1px -1px 0 #1a1410,
        0 0 0 1px rgba(255,215,0,0.06);
    --ds-shadow-inner:
        inset 0 0 0 1px rgba(255,215,0,0.06),
        inset 0 0 60px rgba(0,0,0,0.45);
    --ds-shadow-card:
        inset 0 1px 0 rgba(255,215,0,0.08),
        0 2px 6px rgba(0,0,0,0.4);
    --ds-shadow-recessed:
        inset 0 1px 3px rgba(0,0,0,0.6),
        inset 0 0 0 1px rgba(0,0,0,0.3);
    --ds-shadow-glow:
        0 0 80px rgba(255,180,60,0.18);
    --ds-shadow-depth:
        0 4px 16px rgba(0,0,0,0.55);

    /* ── Colors ── */
    --ds-gold-1: #fff2c2;
    --ds-gold-2: #f1d98b;
    --ds-gold-3: #c9a24a;
    --ds-gold-4: #8a6a2a;
    --ds-gold:   #FFD700;
    --ds-orange: #FF981F;
    --ds-amber:  rgba(201,162,74,0.75);
    --ds-green:  #9fe07a;
    --ds-red:    #ff8080;
    --ds-blue:   #7ac8e0;

    /* ── Text ── */
    --ds-text:          #F5F0E0;
    --ds-text-dim:      rgba(220,200,150,0.72);
    --ds-text-muted:    rgba(201,162,74,0.65);
    --ds-text-faint:    rgba(201,162,74,0.4);

    /* ── Gold gradient (for clip-text headings) ── */
    --ds-gold-gradient: linear-gradient(180deg,
        #fff2c2 0%, #f1d98b 40%, #c9a24a 72%, #8a6a2a 100%);

    /* ── Typography ── */
    --ds-font-display: 'Cinzel', 'Lexend', serif;
    --ds-font-body:    'Lexend', sans-serif;

    /* ── Timing ── */
    --ds-ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1);
    --ds-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Pillar (sidebar stone column) ── */
    --ds-pillar: linear-gradient(90deg,
        #1a1410 0px, #4a4238 1px, #5d5549 2px,
        #4a4238 4px, #3a342c 5px, #2a241e 6px, #1a1410 7px);

    /* Override base variables so downstream components that read
       var(--gold), var(--frame) etc. also shift */
    --frame:     #4a4238;
    --frame-hi:  #5d5549;
    --frame-lo:  #2a241e;
    --panel-bg:  #2a241e;
    --dark-bg:   #1e1a14;
    --darkest:   #161210;
    --gold:      #c9a24a;
    --gold-dim:  #8a6a2a;
    --green:     #9fe07a;
    --red:       #ff8080;
    --white:     #F5F0E0;
    --muted:     rgba(201,162,74,0.65);
    --chat-bg:   #0e0b07;
    --cell-bg:   #1e1a14;
    --cell-hover: #2a241e;
    --cell-active: #3a342c;

    /* Parchment shade (used by rebrand's shared surfaces) */
    --parchment-shade-base: #2a241e;
    --parchment-shade-overlay: linear-gradient(180deg,
        rgba(42,36,30,0.6), rgba(22,18,16,0.7));
    --parchment-shade-radial: radial-gradient(ellipse at center,
        rgba(255,215,0,0.03) 0%, transparent 60%);
    --parchment-shade-image: url('../img/viewport-background-texture.png');

    background: var(--ds-bg);
}


/* ─── § 2  TYPOGRAPHY FOUNDATION ──────────────────────────── */

/* Body font: Lexend everywhere */
body.ds-unified,
body.ds-unified *:not(input):not(textarea):not(select) {
    font-family: var(--ds-font-body) !important;
}
body.ds-unified input,
body.ds-unified textarea,
body.ds-unified select {
    font-family: var(--ds-font-body);
}

/* Smooth icon rendering (not pixelated) */
body.ds-unified img {
    image-rendering: auto;
}

/* Gold text utility */
body.ds-unified .gold { color: var(--ds-gold); }


/* ─── § 3  SCROLLBAR ──────────────────────────────────────── */

body.ds-unified ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
body.ds-unified ::-webkit-scrollbar-track {
    background: var(--ds-surface-3);
}
body.ds-unified ::-webkit-scrollbar-thumb {
    background: rgba(201,162,74,0.25);
    border-radius: 3px;
}
body.ds-unified ::-webkit-scrollbar-thumb:hover {
    background: rgba(201,162,74,0.45);
}
body.ds-unified ::-webkit-scrollbar-corner {
    background: var(--ds-surface-3);
}
/* Firefox */
body.ds-unified * {
    scrollbar-width: thin;
    scrollbar-color: rgba(201,162,74,0.25) var(--ds-surface-3);
}


/* ─── § 4  TOPBAR ─────────────────────────────────────────── */

body.ds-unified .topbar {
    height: 52px;
    padding: 0 18px;
    background: var(--ds-surface-0);
    background-image: var(--ds-shell);
    border-bottom: var(--ds-border-hard);
    box-shadow:
        var(--ds-shadow-shell),
        0 4px 20px rgba(0,0,0,0.6);
    position: relative;
    z-index: 100;
}
/* Subtle cross-weave texture on topbar */
body.ds-unified .topbar::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: var(--ds-weave);
    mix-blend-mode: overlay;
    opacity: 0.4;
    z-index: 0;
}
body.ds-unified .topbar > * {
    position: relative;
    z-index: 1;
}

body.ds-unified .topbar-title {
    font-family: var(--ds-font-display) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--ds-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}
body.ds-unified .topbar-logo {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    filter: drop-shadow(0 0 6px rgba(255,200,80,0.25));
}

body.ds-unified .topbar-alpha {
    font-family: var(--ds-font-body) !important;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--ds-gold-2), var(--ds-gold-4));
    color: #1b1308;
    padding: 2px 6px;
    border-radius: 2px;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

body.ds-unified .topbar-online {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--ds-text-dim);
}
body.ds-unified .online-dot {
    width: 5px; height: 5px;
    background: var(--ds-green);
    box-shadow: 0 0 6px rgba(159,224,122,0.5);
}
body.ds-unified .server-dot.connected {
    background: var(--ds-green);
    box-shadow: 0 0 6px rgba(159,224,122,0.5);
}

body.ds-unified .topbar-stats {
    font-size: 12px;
    gap: 12px;
    color: var(--ds-text-dim);
}
body.ds-unified .topbar-stat {
    color: var(--ds-text-dim);
    font-size: 12px;
    font-weight: 500;
}
body.ds-unified .stat-val {
    font-weight: 700;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .stat-val.gold {
    color: var(--ds-gold);
}

body.ds-unified .topbar-coin-icon {
    width: 14px; height: 14px;
    margin-right: 3px;
    filter: drop-shadow(0 0 3px rgba(255,215,0,0.3));
}

body.ds-unified .topbar-settings-btn,
body.ds-unified .topbar-cloud-save,
body.ds-unified .topbar-roadmap,
body.ds-unified .pause-btn {
    color: var(--ds-text-muted);
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
body.ds-unified .topbar-settings-btn:hover,
body.ds-unified .topbar-cloud-save:hover,
body.ds-unified .topbar-roadmap:hover,
body.ds-unified .pause-btn:hover {
    background: rgba(201,162,74,0.1);
    color: var(--ds-text);
}
body.ds-unified .pause-btn.paused {
    background: rgba(201,162,74,0.2);
    color: var(--ds-gold-2);
}

body.ds-unified .topbar-char-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 3px;
    transition: background 0.15s;
}
body.ds-unified .topbar-char-btn:hover {
    background: rgba(201,162,74,0.1);
}
body.ds-unified .topbar-char-icon {
    width: 14px; height: 14px;
    color: var(--ds-text-muted);
}

body.ds-unified .topbar-support {
    opacity: 0.75;
}
body.ds-unified .topbar-support img {
    height: 28px;
}

/* Prestige badge in topbar */
body.ds-unified .prestige-badge {
    font-family: var(--ds-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(180deg, rgba(201,162,74,0.2), rgba(0,0,0,0.3));
    border: var(--ds-border-accent);
    border-radius: 3px;
    padding: 2px 8px;
    color: var(--ds-gold-2);
    text-shadow: 0 0 8px rgba(255,200,80,0.3);
}

/* Rolling banner */
body.ds-unified .topbar-rolling-text {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    color: var(--ds-text-dim);
}
body.ds-unified .topbar-rolling-banner {
    background: linear-gradient(180deg, rgba(201,162,74,0.12), rgba(0,0,0,0.2));
    border: var(--ds-border-accent);
    border-radius: 3px;
}


/* ─── § 5  GAME BODY / LAYOUT ─────────────────────────────── */

body.ds-unified .game-body {
    background: var(--ds-bg);
    position: relative;
}
body.ds-unified .game {
    background: var(--ds-bg);
}
body.ds-unified .left-col {
    z-index: 1;
}


/* ─── § 6  VIEWPORT ───────────────────────────────────────── */

body.ds-unified .viewport {
    border: var(--ds-border-hard);
    box-shadow:
        var(--ds-shadow-inner),
        0 0 40px rgba(0,0,0,0.4);
    padding: 18px;
}
/* Cross-weave texture on viewport */
body.ds-unified .viewport::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: var(--ds-weave);
    mix-blend-mode: overlay;
    opacity: 0.3;
    z-index: 0;
}

body.ds-unified .action-status {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

body.ds-unified .action-skill-name {
    font-family: var(--ds-font-display) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--ds-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
    text-shadow: none;
}
body.ds-unified .action-method-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-dim);
    letter-spacing: 0.5px;
}
body.ds-unified .action-xp {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-green);
    letter-spacing: 0.3px;
}
body.ds-unified .action-cost {
    font-size: 11px;
    font-weight: 500;
    color: var(--ds-text-muted);
}
body.ds-unified .weapon-display {
    font-size: 11px;
    color: var(--ds-text-dim);
}

/* Action progress bar */
body.ds-unified .action-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(0,0,0,0.5);
    z-index: 5;
    overflow: hidden;
}
body.ds-unified .action-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--ds-gold-4), var(--ds-gold-3), var(--ds-gold-2));
    box-shadow:
        0 0 8px rgba(255,200,80,0.6),
        inset 0 0 0 1px rgba(255,255,255,0.2);
    transition: width 0.1s linear;
}

/* Action icon (orb click zone) */
body.ds-unified #click-zone {
    position: relative;
}
body.ds-unified .action-icon {
    position: relative;
    z-index: 1;
}
body.ds-unified #click-zone::before {
    background: radial-gradient(circle, rgba(201,162,74,0.4) 0%, transparent 60%);
}

/* Monster HP section */
body.ds-unified .monster-hp-wrap {
    width: 100%;
    max-width: 400px;
}
body.ds-unified .monster-hp-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text);
    letter-spacing: 0.3px;
}
body.ds-unified #monster-name {
    font-family: var(--ds-font-display) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ds-text);
}
body.ds-unified #monster-hp-text {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ds-text-dim);
}
body.ds-unified .monster-hp-bar {
    height: 8px;
    background: var(--ds-surface-3);
    border: 1px solid rgba(0,0,0,0.6);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
body.ds-unified .monster-hp-fill {
    height: 100%;
    background: linear-gradient(180deg, #4ade4a, #2d8b2d);
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(74,222,74,0.3);
    transition: width 0.15s ease;
}
body.ds-unified .dps-meter {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-muted);
    letter-spacing: 0.5px;
}


/* ─── § 7  CHATBOX ────────────────────────────────────────── */

body.ds-unified .chatbox-splitter {
    height: 8px;
    background: var(--ds-surface-3);
}
body.ds-unified .chatbox-splitter::after {
    width: 36px;
    height: 2px;
    background: var(--ds-gold-4);
    border-radius: 1px;
    opacity: 0.5;
}
body.ds-unified .chatbox-splitter:hover::after,
body.ds-unified .chatbox-splitter:active::after {
    background: var(--ds-gold-3);
    opacity: 0.8;
}

body.ds-unified .chatbox {
    background: var(--ds-surface-2);
    border: none;
    border-top: var(--ds-border-frame);
    box-shadow:
        inset 0 0 0 1px rgba(201,162,74,0.06),
        inset 0 0 30px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
}
/* Thin gold accent line at top */
body.ds-unified .chatbox::before {
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(201,162,74,0.3), transparent);
    z-index: 2;
    pointer-events: none;
}

body.ds-unified .chatbox-inner {
    background: var(--ds-surface-3);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    padding: 8px 14px;
}
/* Chat text */
body.ds-unified .chat-line {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ds-text);
}

/* Chat tabs — stone slabs with gold glow on active */
body.ds-unified .chatbox-tabs {
    height: 30px;
    background: var(--ds-surface-3);
    border-top: 1px solid rgba(0,0,0,0.6);
    gap: 1px;
    padding: 0 1px;
}
body.ds-unified .chatbox-tab {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-shell-tab);
    border: none;
    border-right: 1px solid rgba(0,0,0,0.3);
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    transition: color 0.15s, background 0.15s;
    padding: 0 10px;
}
body.ds-unified .chatbox-tab:last-child {
    border-right: none;
}
body.ds-unified .chatbox-tab:hover {
    color: var(--ds-text);
    background: var(--ds-shell-tab-hover);
}
body.ds-unified .chatbox-tab.active {
    color: var(--ds-gold-2);
    background: var(--ds-shell-tab-active);
    box-shadow: inset 0 -2px 0 var(--ds-gold-3);
    text-shadow: 0 0 8px rgba(255,200,80,0.2);
}
body.ds-unified .chatbox-tab .tab-state {
    font-size: 7px;
    color: var(--ds-green);
    letter-spacing: 0.5px;
}

/* Chat input */
body.ds-unified .chat-input {
    font-family: var(--ds-font-body) !important;
    font-size: 13px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    box-shadow: var(--ds-shadow-recessed);
    padding: 6px 10px;
}
body.ds-unified .chat-input::placeholder {
    color: var(--ds-text-faint);
    font-size: 12px;
}
body.ds-unified .chat-input:focus {
    border-color: var(--ds-gold-3);
    box-shadow:
        var(--ds-shadow-recessed),
        0 0 6px rgba(201,162,74,0.2);
}


/* ─── § 8  SIDEBAR ────────────────────────────────────────── */

body.ds-unified .sidebar {
    width: 410px;
    background: var(--ds-surface-1);
    border: none;
    border-left: var(--ds-border-hard);
    box-shadow: -4px 0 20px rgba(0,0,0,0.4);
}

/* Stone pillars — carved column feel */
body.ds-unified .sidebar::before,
body.ds-unified .sidebar::after {
    background: var(--ds-pillar) !important;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5) !important;
}

body.ds-unified .sidebar-inner {
    background: var(--ds-surface-2);
}

/* Sidebar body — deep recessed interior */
body.ds-unified .sidebar-body {
    background: var(--ds-surface-2);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
}

/* Sidebar splitter */
body.ds-unified .sidebar-splitter {
    background: var(--ds-surface-3);
    border-color: #000;
}
body.ds-unified .sidebar-splitter::after {
    background: var(--ds-gold-4);
}
body.ds-unified .sidebar-splitter:hover::after {
    background: var(--ds-gold-3);
}

/* ── Sidebar tabs — recessed stone slabs ── */
body.ds-unified .sidebar-top-tabs,
body.ds-unified .sidebar-tabs {
    height: 44px;
    background: var(--ds-surface-3);
    border-bottom: var(--ds-border-hard);
    border-top: none;
    gap: 2px;
    padding: 3px 3px 0;
}
body.ds-unified .sidebar-tabs {
    border-top: var(--ds-border-hard);
}

body.ds-unified .sidebar-top-tab,
body.ds-unified .sidebar-tab {
    background: var(--ds-shell-tab);
    border: 1px solid rgba(0,0,0,0.5);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    position: relative;
    transition: background 0.12s, box-shadow 0.12s;
}
body.ds-unified .sidebar-top-tab:hover,
body.ds-unified .sidebar-tab:hover {
    background: var(--ds-shell-tab-hover);
}
body.ds-unified .sidebar-top-tab.active,
body.ds-unified .sidebar-tab.active {
    background: var(--ds-shell-tab-active);
    border-color: var(--ds-gold-4);
    border-bottom-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,215,0,0.1),
        0 -1px 8px rgba(255,200,80,0.08);
    z-index: 1;
}
/* Active tab bottom merge line */
body.ds-unified .sidebar-top-tab.active::before,
body.ds-unified .sidebar-tab.active::before {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 3px;
    background: var(--ds-surface-2);
}

body.ds-unified .sidebar-top-tab img,
body.ds-unified .sidebar-tab img {
    width: 24px; height: 24px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
    opacity: 0.65;
    transition: opacity 0.12s;
}
body.ds-unified .sidebar-top-tab:hover img,
body.ds-unified .sidebar-tab:hover img {
    opacity: 0.85;
}
body.ds-unified .sidebar-top-tab.active img,
body.ds-unified .sidebar-tab.active img {
    opacity: 1;
    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,0.6))
        drop-shadow(0 0 4px rgba(255,200,80,0.2));
}


/* ─── § 9  SKILL GRID ─────────────────────────────────────── */

body.ds-unified .skill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding: 6px;
    background: var(--ds-surface-3);
}

/* Skill cell — inlaid stone tile */
body.ds-unified .skill-cell {
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.15)),
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: normal, overlay, normal;
    background-size: auto, auto auto, cover;
    border: 1px solid rgba(201,162,74,0.15);
    border-radius: 0;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,215,0,0.04),
        0 1px 3px rgba(0,0,0,0.3);
    aspect-ratio: 2 / 1;
    -webkit-mask: none;
    mask: none;
    padding: 4px 4px 4px 6px;
}

body.ds-unified .skill-cell:hover {
    border-color: rgba(201,162,74,0.35);
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,215,0,0.06),
        0 3px 10px rgba(0,0,0,0.4);
}

body.ds-unified .skill-cell.active {
    border-color: var(--ds-gold-3);
    box-shadow:
        inset 0 0 0 1px rgba(201,162,74,0.1),
        inset 0 1px 0 rgba(255,215,0,0.08),
        0 0 12px rgba(201,162,74,0.1),
        0 2px 6px rgba(0,0,0,0.35);
}

/* XP progress bar at bottom — molten gold fill */
body.ds-unified .skill-cell::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 6%; width: 88%;
    height: 2px;
    background: rgba(0,0,0,0.4);
    border-radius: 1px;
}
body.ds-unified .skill-cell .sk-xp-bar {
    position: absolute;
    bottom: 2px; left: 6%;
    width: calc(88% * var(--progress, 0));
    height: 2px;
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3), var(--ds-gold-2));
    border-radius: 1px;
    z-index: 1;
    box-shadow: 0 0 4px rgba(255,200,80,0.3);
    transition: width 0.3s ease;
}

/* Maxed skill — gold border glow */
body.ds-unified .skill-cell.maxed {
    border-color: rgba(201,162,74,0.4);
    box-shadow:
        inset 0 0 0 1px rgba(201,162,74,0.08),
        0 0 10px rgba(201,162,74,0.1);
}
body.ds-unified .skill-cell.maxed::after { display: none; }
body.ds-unified .skill-cell.maxed .sk-xp-bar {
    background: linear-gradient(90deg, var(--ds-gold-3), var(--ds-gold-2));
    width: 88%;
}

/* Level display — Cinzel for numbers */
body.ds-unified .sk-hi {
    font-family: var(--ds-font-display) !important;
    font-size: 20px;
    font-weight: 700;
    color: var(--ds-gold-2);
    text-shadow:
        0 0 6px rgba(255,200,80,0.2),
        1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}

body.ds-unified .sk-icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Total level row */
body.ds-unified .total-level-cell {
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(201,162,74,0.06), rgba(0,0,0,0.2)),
        var(--ds-texture);
    background-size: auto, cover;
    border: 1px solid rgba(201,162,74,0.2);
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    padding: 7px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
body.ds-unified .total-level-cell .total-num {
    font-family: var(--ds-font-display) !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-gold-2);
    text-shadow: 0 0 8px rgba(255,200,80,0.25);
    letter-spacing: 0;
}


/* ─── § 10  RL BAR + RL PANEL ─────────────────────────────── */

body.ds-unified .rl-bar {
    width: 38px;
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.15)),
        var(--ds-texture);
    background-size: auto, cover;
    border-left: var(--ds-border-hard);
    box-shadow: inset 1px 0 0 rgba(201,162,74,0.06);
    padding: 8px 0;
    gap: 2px;
}
body.ds-unified .rl-bar-btn {
    width: 30px; height: 30px;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
body.ds-unified .rl-bar-btn:hover {
    background: rgba(201,162,74,0.1);
    border-color: rgba(201,162,74,0.15);
}
body.ds-unified .rl-bar-btn.active {
    background: rgba(201,162,74,0.18);
    border-color: rgba(201,162,74,0.35);
    box-shadow: 0 0 6px rgba(201,162,74,0.1);
}
body.ds-unified .rl-bar-btn img {
    width: 20px; height: 20px;
    opacity: 0.6;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
body.ds-unified .rl-bar-btn:hover img { opacity: 0.85; }
body.ds-unified .rl-bar-btn.active img { opacity: 1; }

body.ds-unified .rl-bar-sep {
    width: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,162,74,0.25), transparent);
    margin: 4px auto;
}

body.ds-unified .rl-bar-prestige {
    background: linear-gradient(135deg, rgba(201,162,74,0.12), rgba(0,0,0,0.2));
    border-color: var(--ds-gold-3);
}
body.ds-unified .rl-bar-prestige span {
    font-family: var(--ds-font-display) !important;
    font-size: 10px;
    font-weight: 700;
    color: var(--ds-gold-2);
}

/* RL slide-in panel */
body.ds-unified .rl-panel {
    background: var(--ds-surface-0);
    background-image: var(--ds-shell);
    border-left: var(--ds-border-hard);
    box-shadow:
        var(--ds-shadow-shell),
        -6px 0 24px rgba(0,0,0,0.5);
}
body.ds-unified .rl-panel-header {
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.03), rgba(0,0,0,0.15)),
        var(--ds-texture);
    background-size: auto, cover;
    border-bottom: var(--ds-border-hard-1);
    padding: 10px 14px;
}
body.ds-unified .rl-panel-title {
    font-family: var(--ds-font-display) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
body.ds-unified .rl-panel-close {
    color: var(--ds-text-muted);
    font-size: 18px;
    transition: color 0.12s;
}
body.ds-unified .rl-panel-close:hover {
    color: var(--ds-text);
}
body.ds-unified .rl-panel-body {
    background: var(--ds-surface-2);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}


/* ─── § 11  RC PANEL TEMPLATE (sidebar panels) ────────────── */

body.ds-unified .rc-panel-head {
    padding: 8px 10px;
    font-family: var(--ds-font-display) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.03), rgba(0,0,0,0.15)),
        var(--ds-texture);
    background-size: auto, cover;
    border-bottom: var(--ds-border-hard-1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
body.ds-unified .rc-panel-head-info {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 500;
    color: var(--ds-text-muted);
    letter-spacing: 0.5px;
    text-transform: none;
}

body.ds-unified .rc-panel-tabs {
    background: var(--ds-surface-3);
    border-bottom: var(--ds-border-hard-1);
    padding: 3px 4px 0;
    gap: 2px;
}
body.ds-unified .rc-panel-tab {
    background: var(--ds-shell-tab);
    border: 1px solid rgba(0,0,0,0.4);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    color: var(--ds-text-muted);
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    opacity: 1;
    transition: background 0.12s, color 0.12s;
    padding: 4px 2px;
}
body.ds-unified .rc-panel-tab:hover {
    background: var(--ds-shell-tab-hover);
    color: var(--ds-text);
    opacity: 1;
}
body.ds-unified .rc-panel-tab.active {
    background: var(--ds-shell-tab-active);
    color: var(--ds-gold-2);
    border-color: var(--ds-gold-4);
    border-bottom-color: transparent;
    opacity: 1;
    box-shadow: inset 0 1px 0 rgba(255,215,0,0.08);
}

body.ds-unified .rc-panel-search {
    background: var(--ds-surface-3);
    border-bottom: var(--ds-border-hard-1);
    padding: 5px 8px;
}
body.ds-unified .rc-panel-search input {
    font-family: var(--ds-font-body) !important;
    font-size: 12px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    box-shadow: var(--ds-shadow-recessed);
    border-radius: 2px;
    padding: 5px 8px;
}
body.ds-unified .rc-panel-search input::placeholder {
    color: var(--ds-text-faint);
}
body.ds-unified .rc-panel-search input:focus {
    border-color: var(--ds-gold-3);
    box-shadow:
        var(--ds-shadow-recessed),
        0 0 6px rgba(201,162,74,0.15);
}

body.ds-unified .rc-panel-body {
    background: var(--ds-surface-2);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}

body.ds-unified .rc-panel-foot {
    background: var(--ds-surface-3);
    border-top: 1px solid rgba(0,0,0,0.5);
    font-size: 10px;
    font-weight: 500;
    color: var(--ds-text-muted);
    padding: 6px 10px;
}


/* ─── § 12  RC MODAL TEMPLATE (overlay modals) ────────────── */

body.ds-unified .rc-overlay {
    background: rgba(10,8,6,0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body.ds-unified .rc-modal {
    background: var(--ds-surface-0);
    background-image: var(--ds-shell);
    border: var(--ds-border-hard);
    border-radius: 6px;
    padding: 5px;
    box-shadow:
        var(--ds-shadow-shell),
        0 12px 48px rgba(0,0,0,0.75),
        var(--ds-shadow-glow);
    animation: ds-modal-enter 0.45s var(--ds-ease-spring) both;
}
@keyframes ds-modal-enter {
    0%   { opacity: 0; transform: scale(0.9) translateY(12px); filter: brightness(1.3) blur(4px); }
    50%  { filter: brightness(1.1) blur(0); }
    80%  { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1) blur(0); }
}

body.ds-unified .rc-modal-inner {
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.2)),
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: normal, overlay, normal;
    background-size: auto, auto auto, cover;
    border: var(--ds-border-frame);
    border-radius: 3px;
    box-shadow: var(--ds-shadow-inner);
}

body.ds-unified .rc-modal-head {
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid rgba(201,162,74,0.12);
    position: relative;
}
/* Diamond rule under modal header */
body.ds-unified .rc-modal-head::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 50%;
    width: 6px; height: 6px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, var(--ds-gold-2), var(--ds-gold-4));
    box-shadow: 0 0 6px rgba(255,200,80,0.3);
    z-index: 1;
}

body.ds-unified .rc-modal-title {
    font-family: var(--ds-font-display) !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--ds-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}

body.ds-unified .rc-modal-close {
    color: var(--ds-text-muted);
    font-family: var(--ds-font-body) !important;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    transition: color 0.12s;
    width: 24px; height: 24px;
}
body.ds-unified .rc-modal-close:hover {
    color: var(--ds-text);
}

body.ds-unified .rc-modal-body {
    padding: 4px;
}
body.ds-unified .rc-modal-head-right {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    color: var(--ds-text-muted);
}


/* ─── § 13  METHOD LIST ───────────────────────────────────── */

body.ds-unified .method-list-head {
    padding: 8px 10px;
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.03), rgba(0,0,0,0.15)),
        var(--ds-texture);
    background-size: auto, cover;
    border-bottom: var(--ds-border-hard-1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

body.ds-unified .method-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    background: var(--ds-surface-3);
}

/* Method row — carved inner-frame feel, gold left-accent on active */
body.ds-unified .method-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.015), rgba(0,0,0,0.1)),
        var(--ds-texture);
    background-size: auto, cover;
    border: 1px solid rgba(201,162,74,0.1);
    border-left: 2px solid transparent;
    border-radius: 0;
    color: var(--ds-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
    box-shadow:
        inset 0 1px 0 rgba(255,215,0,0.03),
        0 1px 2px rgba(0,0,0,0.2);
    /* Remove the old scalloped mask */
    -webkit-mask: none;
    mask: none;
}
body.ds-unified .method-row:hover:not(:disabled) {
    background-color: var(--ds-surface-raised);
    border-color: rgba(201,162,74,0.25);
    border-left-color: rgba(201,162,74,0.3);
    box-shadow:
        inset 0 1px 0 rgba(255,215,0,0.05),
        0 2px 6px rgba(0,0,0,0.25);
}
body.ds-unified .method-row.active {
    border-color: rgba(201,162,74,0.3);
    border-left-color: var(--ds-gold-3);
    border-left-width: 3px;
    background-color: var(--ds-surface-raised);
    box-shadow:
        inset 0 1px 0 rgba(255,215,0,0.06),
        inset 4px 0 12px rgba(201,162,74,0.06),
        0 2px 6px rgba(0,0,0,0.3);
}
body.ds-unified .method-row.locked .meth-name {
    color: var(--ds-text-muted);
}
body.ds-unified .method-row.locked .meth-stats {
    opacity: 0.35;
}

/* Method name */
body.ds-unified .meth-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text);
    letter-spacing: 0.2px;
}
body.ds-unified .meth-stats {
    font-size: 10px;
    color: var(--ds-text-dim);
    font-weight: 500;
}
body.ds-unified .meth-icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* Collection log complete */
body.ds-unified .method-row.clog-complete {
    background-color: rgba(159,224,122,0.06);
    border-color: rgba(159,224,122,0.15);
}
body.ds-unified .method-row.clog-complete .meth-name {
    color: var(--ds-green);
}

/* Method detail card (expanded) */
body.ds-unified .method-detail {
    background: var(--ds-surface-2);
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2)),
        var(--ds-texture);
    background-size: auto, cover;
    border: 1px solid rgba(201,162,74,0.1);
    border-top: none;
    padding: 12px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
body.ds-unified .method-detail-stats .detail-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}
body.ds-unified .method-detail-stats .detail-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .method-detail-stats .detail-value.green { color: var(--ds-green); }
body.ds-unified .method-detail-stats .detail-value.gold { color: var(--ds-gold-2); }
body.ds-unified .method-detail-stats .detail-value.red { color: var(--ds-red); }

/* Monster info sections */
body.ds-unified .md-section {
    background: rgba(0,0,0,0.25);
    border: var(--ds-border-accent);
    border-radius: 2px;
    padding: 6px 8px;
}
body.ds-unified .md-section-title {
    font-family: var(--ds-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .mon-level {
    font-family: var(--ds-font-display) !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-gold-2);
    text-shadow: 0 0 8px rgba(255,200,80,0.2);
    letter-spacing: 1px;
}


/* ─── § 14  BANK ──────────────────────────────────────────── */

body.ds-unified .bank-grid {
    background: var(--ds-surface-3);
    gap: 1px;
}
body.ds-unified .bank-item {
    background: var(--ds-surface-2);
    border: 1px solid rgba(201,162,74,0.06);
    transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
    min-height: 44px;
}
body.ds-unified .bank-item:hover {
    background: var(--ds-surface-1);
    border-color: rgba(201,162,74,0.2);
}
body.ds-unified .bank-item.equipable:hover {
    background: var(--ds-surface-1);
    box-shadow: inset 0 0 0 1px rgba(201,162,74,0.15);
    border-color: rgba(201,162,74,0.3);
}
body.ds-unified .bank-item.bank-drag-over {
    background: rgba(201,162,74,0.1);
    box-shadow: inset 0 0 0 1px rgba(201,162,74,0.25);
}

body.ds-unified .bi-qty {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 700;
    color: var(--ds-gold-2);
    text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
    font-variant-numeric: tabular-nums;
}
body.ds-unified .bi-qty.qty-white { color: #fff; }
body.ds-unified .bi-qty.qty-green { color: var(--ds-green); }

body.ds-unified .bank-tier-badge {
    font-family: var(--ds-font-body) !important;
    font-size: 8px;
    font-weight: 700;
    color: var(--ds-gold-2);
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(201,162,74,0.25);
    border-radius: 2px;
    padding: 0 3px;
}

body.ds-unified .bank-grid.sell-mode {
    background: rgba(180,40,30,0.12);
}


/* ─── § 15  EQUIPMENT ─────────────────────────────────────── */

body.ds-unified .equip-grid {
    background: var(--ds-surface-2);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
    padding: 12px;
    gap: 5px;
}

/* Equipment slots — ritual pedestals */
body.ds-unified .eq-slot {
    width: 50px; height: 50px;
    background: var(--ds-surface-3);
    border: 2px solid rgba(201,162,74,0.15);
    border-radius: 2px;
    box-shadow:
        var(--ds-shadow-recessed),
        0 1px 2px rgba(0,0,0,0.3);
    transition: border-color 0.12s, box-shadow 0.12s;
}
body.ds-unified .eq-slot:hover {
    border-color: rgba(201,162,74,0.4);
    box-shadow:
        var(--ds-shadow-recessed),
        0 0 6px rgba(201,162,74,0.1);
}
body.ds-unified .eq-slot.filled {
    border-color: rgba(201,162,74,0.3);
    background: var(--ds-surface-2);
    box-shadow:
        inset 0 0 0 1px rgba(255,215,0,0.04),
        0 1px 3px rgba(0,0,0,0.3);
}

body.ds-unified .eq-name {
    font-family: var(--ds-font-body) !important;
    font-size: 7px;
    font-weight: 600;
    color: var(--ds-text-dim);
    letter-spacing: 0.3px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}

/* Equipment stat sections */
body.ds-unified .eq-section-head {
    font-family: var(--ds-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    background: var(--ds-surface-1) !important;
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.03), rgba(0,0,0,0.15)),
        var(--ds-texture) !important;
    background-size: auto, cover !important;
    border: 1px solid rgba(201,162,74,0.15) !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,215,0,0.04),
        0 1px 3px rgba(0,0,0,0.2) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

body.ds-unified .equip-stats,
body.ds-unified .equip-tools,
body.ds-unified .loadout-controls,
body.ds-unified .equip-prayer-row,
body.ds-unified .equip-style-row,
body.ds-unified .equip-actions {
    background: var(--ds-surface-2) !important;
    background-image:
        var(--ds-weave),
        var(--ds-texture) !important;
    background-blend-mode: overlay, normal !important;
    background-size: auto auto, cover !important;
}

/* Prayer cells */
body.ds-unified .prayer-cell {
    background: var(--ds-surface-3);
    border: 1px solid rgba(201,162,74,0.08);
    border-radius: 2px;
    transition: border-color 0.12s, background 0.12s;
}
body.ds-unified .prayer-cell:hover {
    border-color: rgba(201,162,74,0.2);
    background: var(--ds-surface-2);
}
body.ds-unified .prayer-cell.active {
    border-color: var(--ds-gold-3);
    background: rgba(201,162,74,0.08);
    box-shadow: 0 0 6px rgba(201,162,74,0.1);
}


/* ─── § 16  COMBAT TAB ────────────────────────────────────── */

body.ds-unified .combat-tab-grid,
body.ds-unified .combat-tab-category {
    background: var(--ds-surface-2) !important;
    background-image:
        var(--ds-weave),
        var(--ds-texture) !important;
    background-blend-mode: overlay, normal !important;
    background-size: auto auto, cover !important;
}

body.ds-unified .combat-tab-category {
    font-family: var(--ds-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    padding: 6px 10px;
    border-bottom: 1px solid rgba(201,162,74,0.1);
}


/* ─── § 17  BUTTONS (global) ──────────────────────────────── */

/* Primary gold button — matches ep-cz-loot-ok */
body.ds-unified .osrs-btn,
body.ds-unified .charslot-load,
body.ds-unified .charslot-create,
body.ds-unified .charslot-confirm {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1b1308;
    background: linear-gradient(180deg,
        var(--ds-gold-2) 0%, #d8b65a 45%, #a07828 100%);
    border: 1px solid #000;
    border-radius: 3px;
    padding: 6px 14px;
    text-shadow: 0 1px 0 rgba(255,240,180,0.5);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        0 2px 0 #4a3412,
        0 3px 8px rgba(0,0,0,0.45);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s, filter 0.12s;
}
body.ds-unified .osrs-btn:hover,
body.ds-unified .charslot-load:hover,
body.ds-unified .charslot-create:hover,
body.ds-unified .charslot-confirm:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        0 3px 0 #4a3412,
        0 5px 12px rgba(0,0,0,0.5),
        0 0 10px rgba(255,215,0,0.2);
}
body.ds-unified .osrs-btn:active,
body.ds-unified .charslot-load:active,
body.ds-unified .charslot-create:active,
body.ds-unified .charslot-confirm:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 1px 0 #4a3412,
        0 1px 4px rgba(0,0,0,0.45);
}

/* Ghost button (secondary) */
body.ds-unified .osrs-btn.danger {
    background: linear-gradient(180deg, #cc4444 0%, #992222 60%, #661515 100%);
    color: #fff;
    border-color: #441010;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .osrs-btn.danger:hover {
    background: linear-gradient(180deg, #dd5555 0%, #aa3333 60%, #772222 100%);
}

/* Subtle/tertiary buttons */
body.ds-unified .charslot-cancel,
body.ds-unified .charslot-export,
body.ds-unified .charselect-signout-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--ds-text-muted);
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.15)),
        var(--ds-texture);
    background-size: auto, cover;
    border: var(--ds-border-accent);
    border-radius: 3px;
    padding: 5px 12px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
body.ds-unified .charslot-cancel:hover,
body.ds-unified .charslot-export:hover {
    color: var(--ds-text);
    border-color: rgba(201,162,74,0.4);
}

/* Delete button */
body.ds-unified .charslot-delete {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(180deg, #cc4444, #882222);
    color: #fff;
    border: 1px solid #441010;
    border-radius: 3px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

/* Clue scroll sell-all button */
body.ds-unified .clue-sell-all {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.04), rgba(0,0,0,0.15)),
        var(--ds-texture);
    background-size: auto, cover;
    border: var(--ds-border-accent);
    border-radius: 3px;
    padding: 6px 16px;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .clue-sell-all:hover {
    border-color: rgba(201,162,74,0.45);
    background-color: var(--ds-surface-raised);
}


/* ─── § 18  INPUTS (global) ───────────────────────────────── */

body.ds-unified input[type="text"],
body.ds-unified input[type="number"],
body.ds-unified input[type="password"],
body.ds-unified input[type="email"],
body.ds-unified input[type="search"],
body.ds-unified textarea,
body.ds-unified select {
    font-family: var(--ds-font-body);
    font-size: 12px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
    padding: 5px 8px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.ds-unified input:focus,
body.ds-unified textarea:focus,
body.ds-unified select:focus {
    border-color: var(--ds-gold-3);
    box-shadow:
        var(--ds-shadow-recessed),
        0 0 6px rgba(201,162,74,0.15);
}
body.ds-unified input::placeholder,
body.ds-unified textarea::placeholder {
    color: var(--ds-text-faint);
}


/* ─── § 19  CHARACTER SELECT ──────────────────────────────── */

body.ds-unified .charselect-overlay {
    background: rgba(10,8,6,0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
body.ds-unified .charselect-panel {
    background: var(--ds-surface-0);
    background-image: var(--ds-shell);
    border: var(--ds-border-hard);
    border-radius: 6px;
    padding: 5px;
    box-shadow:
        var(--ds-shadow-shell),
        0 12px 48px rgba(0,0,0,0.75),
        var(--ds-shadow-glow);
    animation: ds-modal-enter 0.45s var(--ds-ease-spring) both;
}
body.ds-unified .charselect-inner {
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.2)),
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: normal, overlay, normal;
    background-size: auto, auto auto, cover;
    border: var(--ds-border-frame);
    border-radius: 3px;
    box-shadow: var(--ds-shadow-inner);
}
body.ds-unified .charselect-header {
    padding: 14px 16px;
    background: transparent;
    border-bottom: 1px solid rgba(201,162,74,0.12);
}
body.ds-unified .charselect-title {
    font-family: var(--ds-font-display) !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: var(--ds-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}
body.ds-unified .charselect-close {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text-muted);
    font-size: 16px;
}
body.ds-unified .charselect-close:hover { color: var(--ds-text); }

body.ds-unified .charselect-footer {
    background: transparent;
    border-top: 1px solid rgba(201,162,74,0.1);
    padding: 10px 16px;
}
body.ds-unified .charselect-footer-email {
    font-size: 11px;
    color: var(--ds-text-faint);
}

body.ds-unified .charslot {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    padding: 10px 14px;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
body.ds-unified .charslot:hover {
    border-color: rgba(201,162,74,0.35);
    background: var(--ds-surface-raised);
}
body.ds-unified .charslot-active {
    border-color: var(--ds-gold-3);
    background: var(--ds-surface-raised);
    box-shadow: 0 0 8px rgba(201,162,74,0.1);
}
body.ds-unified .charslot-name {
    font-family: var(--ds-font-display) !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-text);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
}
body.ds-unified .charslot-name.charslot-empty {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text-muted);
    font-style: italic;
    letter-spacing: 0;
}
body.ds-unified .charslot-playing {
    font-size: 10px;
    color: var(--ds-green);
    font-weight: 600;
    letter-spacing: 0.5px;
}
body.ds-unified .charslot-stats {
    font-size: 11px;
    color: var(--ds-text-dim);
}


/* ─── § 20  CLUE SCROLL LOOT ──────────────────────────────── */

body.ds-unified .clue-scroll-grid {
    background: var(--ds-surface-3);
    gap: 1px;
    padding: 6px;
}
body.ds-unified .clue-reward-item {
    background: var(--ds-surface-2);
    border: 1px solid rgba(201,162,74,0.08);
    transition: background 0.1s, border-color 0.1s;
}
body.ds-unified .clue-reward-item:hover {
    background: var(--ds-surface-1);
    border-color: rgba(201,162,74,0.25);
}
body.ds-unified .clue-scroll-value {
    background: var(--ds-surface-2);
    border-top: 1px solid rgba(201,162,74,0.1);
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-dim);
    padding: 6px 10px;
}
body.ds-unified .clue-reward-item .clue-item-tooltip {
    background: var(--ds-surface-3);
    border: var(--ds-border-accent);
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}


/* ─── § 21  SETTINGS ──────────────────────────────────────── */

body.ds-unified .settings-title,
body.ds-unified .settings-section-title {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .settings-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text);
}
body.ds-unified .settings-description {
    font-size: 11px;
    color: var(--ds-text-dim);
}


/* ─── § 22  GLOBAL SEARCH ─────────────────────────────────── */

body.ds-unified .global-search-wrap input {
    font-family: var(--ds-font-body) !important;
    font-size: 12px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 3px;
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .global-search-wrap input:focus {
    border-color: var(--ds-gold-3);
    box-shadow:
        var(--ds-shadow-recessed),
        0 0 6px rgba(201,162,74,0.15);
}
body.ds-unified .global-search-dropdown {
    background: var(--ds-surface-1) !important;
    background-image:
        var(--ds-weave),
        var(--ds-texture) !important;
    background-blend-mode: overlay, normal !important;
    background-size: auto auto, cover !important;
    border: var(--ds-border-hard);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
body.ds-unified .gs-result-row {
    font-size: 12px;
    color: var(--ds-text);
    border-bottom: 1px solid rgba(201,162,74,0.06);
    transition: background 0.1s;
}
body.ds-unified .gs-result-row:hover {
    background: rgba(201,162,74,0.08);
}
body.ds-unified .gs-result-name {
    font-weight: 600;
}
body.ds-unified .gs-result-detail {
    font-size: 10px;
    color: var(--ds-text-muted);
}
body.ds-unified .gs-empty {
    color: var(--ds-text-muted);
    font-size: 12px;
    font-style: italic;
}


/* ─── § 23  DISCONNECT NOTICE ─────────────────────────────── */

body.ds-unified .disconnect-notice {
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.03), rgba(0,0,0,0.15)),
        var(--ds-texture);
    background-size: auto, cover;
    border: var(--ds-border-accent);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    font-size: 12px;
    color: var(--ds-text);
}
body.ds-unified .disconnect-spinner {
    border-color: rgba(201,162,74,0.3);
    border-top-color: var(--ds-gold-2);
}


/* ─── § 24  HISCORES ──────────────────────────────────────── */

body.ds-unified .hiscores-panel {
    background: var(--ds-surface-2);
}
body.ds-unified .hiscores-table th {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-surface-1);
    border-bottom: 1px solid rgba(201,162,74,0.12);
    padding: 6px 8px;
}
body.ds-unified .hiscores-table td {
    font-size: 12px;
    color: var(--ds-text);
    border-bottom: 1px solid rgba(0,0,0,0.15);
    padding: 5px 8px;
}
body.ds-unified .hiscores-table tr:hover td {
    background: rgba(201,162,74,0.04);
}


/* ─── § 25  FRIENDS LIST ──────────────────────────────────── */

body.ds-unified .friends-panel-body {
    background: var(--ds-surface-2) !important;
    background-image:
        var(--ds-weave),
        var(--ds-texture) !important;
    background-blend-mode: overlay, normal !important;
    background-size: auto auto, cover !important;
}


/* ─── § 26  PROFILE HUB ──────────────────────────────────── */

body.ds-unified .profile-hub {
    background: var(--ds-surface-2);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}


/* ─── § 27  QUEST PANEL ───────────────────────────────────── */

body.ds-unified .quest-detail-title {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .quest-lore-block {
    font-size: 12px;
    font-style: italic;
    color: var(--ds-text-dim);
    line-height: 1.5;
    border-left: 2px solid var(--ds-gold-4);
    padding-left: 12px;
    margin: 8px 0;
}


/* ─── § 28  MARKETPLACE ───────────────────────────────────── */

body.ds-unified #marketplace-panel-body {
    background: var(--ds-surface-2) !important;
    background-image:
        var(--ds-weave),
        var(--ds-texture) !important;
    background-blend-mode: overlay, normal !important;
    background-size: auto auto, cover !important;
}
body.ds-unified .marketplace-header {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
}


/* ─── § 29  PRESTIGE HUB ─────────────────────────────────── */

body.ds-unified .prestige-hub {
    background: var(--ds-surface-2);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .prestige-hub-header {
    font-family: var(--ds-font-display) !important;
}


/* ─── § 30  SLAYER HUB ────────────────────────────────────── */

body.ds-unified .slayer-hub {
    background: var(--ds-surface-2);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}


/* ─── § 31  RAID HUB ──────────────────────────────────────── */

body.ds-unified .raid-hub {
    background: var(--ds-surface-2);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .raid-tab {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-shell-tab);
    border: 1px solid rgba(0,0,0,0.4);
    transition: background 0.12s, color 0.12s;
}
body.ds-unified .raid-tab:hover {
    background: var(--ds-shell-tab-hover);
    color: var(--ds-text);
}
body.ds-unified .raid-tab.active {
    background: var(--ds-shell-tab-active);
    color: var(--ds-gold-2);
    border-color: var(--ds-gold-4);
}


/* ─── § 32  EVENTS HUB ────────────────────────────────────── */

body.ds-unified .events-hub-btn {
    font-family: var(--ds-font-body) !important;
}
body.ds-unified .events-header {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}


/* ─── § 33  SKILLING CHEST ────────────────────────────────── */

body.ds-unified .skilling-chest-header {
    font-family: var(--ds-font-display) !important;
}


/* ─── § 34  TIMER HUB ─────────────────────────────────────── */

body.ds-unified .timer-hub {
    background: var(--ds-surface-3);
    border-top: 1px solid rgba(0,0,0,0.5);
}
body.ds-unified .timer-hub-header {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    padding: 5px 10px;
}


/* ─── § 35  EMBER LEVEL-UP SPLASH ─────────────────────────── */

body.ds-unified .ember-lu-content .ember-lu-title {
    font-family: var(--ds-font-display) !important;
}


/* ─── § 36  SHARED CONTENT SURFACE OVERRIDES ──────────────── */
/* Remove the old rebrand parchment texture and apply unified surfaces */

body.ds-unified .sidebar-body,
body.ds-unified .rc-panel-body:not(#rc-panel-body-bank),
body.ds-unified .rl-panel-body,
body.ds-unified .friends-panel-body,
body.ds-unified #marketplace-panel-body,
body.ds-unified .equip-tools,
body.ds-unified .equip-stats,
body.ds-unified .loadout-controls,
body.ds-unified .equip-prayer-row,
body.ds-unified .equip-style-row,
body.ds-unified .equip-actions,
body.ds-unified .combat-tab-grid,
body.ds-unified .method-list,
body.ds-unified .prayer-tab,
body.ds-unified .prayer-summary {
    background-color: var(--ds-surface-2) !important;
    background-image:
        var(--ds-weave),
        var(--ds-texture) !important;
    background-blend-mode: overlay, normal !important;
    background-size: auto auto, cover !important;
    background-position: center, center !important;
    background-repeat: repeat, no-repeat !important;
}

body.ds-unified .rc-panel-head,
body.ds-unified .rc-panel-tabs,
body.ds-unified .rc-panel-search,
body.ds-unified .rc-panel-foot,
body.ds-unified .rc-modal,
body.ds-unified .rc-modal-inner,
body.ds-unified .rc-modal-head,
body.ds-unified .eq-section-head,
body.ds-unified .method-list-head,
body.ds-unified .combat-tab-category,
body.ds-unified .autocast-info-panel,
body.ds-unified .charselect-panel,
body.ds-unified .charselect-inner,
body.ds-unified .charselect-header,
body.ds-unified .charselect-footer,
body.ds-unified .global-search-dropdown {
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.15)),
        var(--ds-weave),
        var(--ds-texture) !important;
    background-blend-mode: normal, overlay, normal !important;
    background-size: auto, auto auto, cover !important;
    background-position: center, center, center !important;
    background-repeat: repeat, repeat, no-repeat !important;
}

/* Bank panel body keeps its own treatment */
body.ds-unified [data-panel="bank"] > .rc-panel-body {
    background-color: var(--ds-surface-3) !important;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2)),
        var(--ds-texture) !important;
    background-blend-mode: normal, normal !important;
    background-size: auto, cover !important;
}


/* ─── § 37  XP TRACKER / FLOATING OVERLAYS ────────────────── */

body.ds-unified .xpt-wrap {
    font-family: var(--ds-font-body) !important;
}
body.ds-unified .xpt-skill-name {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--ds-gold-2);
}


/* ─── § 38  OSRS CHECKBOX / TOGGLE OVERRIDE ───────────────── */

body.ds-unified .osrs-checkbox {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .osrs-checkbox.checked,
body.ds-unified .osrs-checkbox .checkmark {
    color: var(--ds-gold-2);
}


/* ─── § 39  CONTEXT MENU ──────────────────────────────────── */

body.ds-unified .ctx-menu {
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.15)),
        var(--ds-texture);
    background-size: auto, cover;
    border: var(--ds-border-hard);
    border-radius: 3px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
body.ds-unified .ctx-option {
    font-size: 12px;
    color: var(--ds-text);
    padding: 5px 12px;
    transition: background 0.1s;
}
body.ds-unified .ctx-option:hover {
    background: rgba(201,162,74,0.1);
    color: var(--ds-gold-2);
}


/* ─── § 40  SHOP / ITEM TOOLTIPS ──────────────────────────── */

body.ds-unified .shop-item:hover {
    background: rgba(201,162,74,0.08);
    box-shadow: inset 0 0 0 1px rgba(201,162,74,0.2);
}
body.ds-unified .shop-item .bi-qty {
    color: var(--ds-gold-2);
}


/* ─── § 41  AWAKENED / ORB TOGGLE ─────────────────────────── */

body.ds-unified .awakened-toggle {
    background: rgba(0,0,0,0.35);
    border-radius: 3px;
}
body.ds-unified .awakened-toggle.active {
    background: rgba(201,162,74,0.15);
    box-shadow: 0 0 6px rgba(201,162,74,0.2);
}
body.ds-unified .awakened-count {
    font-size: 10px;
    color: var(--ds-text-muted);
}
body.ds-unified .awakened-toggle.active .awakened-count {
    color: var(--ds-gold-2);
}


/* ─── § 42  SPEC ATTACK SECTION ───────────────────────────── */

body.ds-unified .spec-attack-wrap {
    background: var(--ds-surface-2) !important;
    background-image:
        var(--ds-weave),
        var(--ds-texture) !important;
    background-blend-mode: overlay, normal !important;
    background-size: auto auto, cover !important;
}


/* ─── § 43  MOBILE NAV (nav-v2 overrides) ─────────────────── */

body.ds-unified #mobile-tab-strip {
    background: var(--ds-surface-1);
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.2)),
        var(--ds-texture);
    background-size: auto, cover;
    border-top: var(--ds-border-hard);
}

body.ds-unified .mts-btn {
    color: var(--ds-text-muted);
}
body.ds-unified .mts-btn.active {
    color: var(--ds-gold-2);
}
body.ds-unified .mts-label {
    font-family: var(--ds-font-body) !important;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Drawer / Grimoire */
body.ds-unified .rc-drawer {
    background: var(--ds-surface-1);
    background-image:
        var(--ds-weave),
        var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .rc-drawer-title {
    font-family: var(--ds-font-display) !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
}
body.ds-unified .rc-drawer-section {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}
body.ds-unified .rc-drawer-tile {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s, background 0.12s;
}
body.ds-unified .rc-drawer-tile:hover {
    border-color: rgba(201,162,74,0.35);
    background: var(--ds-surface-raised);
}
body.ds-unified .rc-drawer-tile-label {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    color: var(--ds-text-dim);
}


/* ─── § 44  IRONMAN STYLING ───────────────────────────────── */

body.ds-unified .ironman-toggle {
    font-family: var(--ds-font-body) !important;
}


/* ─── § 45  POH (Player Owned House) ──────────────────────── */

body.ds-unified .poh-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}


/* ─── § 46  BELL WARDEN BOSS ──────────────────────────────── */

body.ds-unified .bell-warden-title {
    font-family: var(--ds-font-display) !important;
}


/* ─── § 47  SEASON / BATTLE PASS ──────────────────────────── */

body.ds-unified .reward-track-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}


/* ─── § 48  LOOT TRACKER PANEL ────────────────────────────── */

body.ds-unified .rl-loot-boss-row {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text);
    border-bottom: 1px solid rgba(201,162,74,0.06);
    transition: background 0.1s;
}
body.ds-unified .rl-loot-boss-row:hover {
    background: rgba(201,162,74,0.04);
}


/* ─── § 49  COLLECTION LOG ────────────────────────────────── */

body.ds-unified .clog-item {
    border: 1px solid rgba(201,162,74,0.08);
    background: var(--ds-surface-2);
    transition: border-color 0.1s, background 0.1s;
}
body.ds-unified .clog-item:hover {
    border-color: rgba(201,162,74,0.25);
    background: var(--ds-surface-1);
}
body.ds-unified .clog-item.obtained {
    border-color: rgba(159,224,122,0.2);
}


/* ─── § 50  LOAD-IN ANIMATION OVERRIDE ────────────────────── */

body.ds-unified .game {
    animation: ds-game-load 0.7s var(--ds-ease-out);
}
@keyframes ds-game-load {
    0% { opacity: 0; transform: scale(0.98); filter: blur(6px); }
    40% { filter: blur(0); }
    100% { opacity: 1; transform: scale(1); }
}

body.ds-unified .topbar {
    animation: ds-topbar-in 0.5s var(--ds-ease-out) 0.1s both;
}
@keyframes ds-topbar-in {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: none; }
}

body.ds-unified .sidebar {
    animation: ds-sidebar-in 0.5s var(--ds-ease-out) 0.2s both;
}
@keyframes ds-sidebar-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}

body.ds-unified .viewport {
    animation: ds-viewport-in 0.6s var(--ds-ease-out) 0.25s both;
}
@keyframes ds-viewport-in {
    0% { opacity: 0; transform: scale(0.97); }
    40% { box-shadow: var(--ds-shadow-inner), 0 0 40px rgba(201,162,74,0.2); }
    100% { opacity: 1; transform: none; }
}

body.ds-unified .chatbox {
    animation: ds-chat-in 0.5s var(--ds-ease-out) 0.35s both;
}
@keyframes ds-chat-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

body.ds-unified .rl-bar {
    animation: ds-rlbar-in 0.5s var(--ds-ease-out) 0.22s both;
}
@keyframes ds-rlbar-in {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: none; }
}

/* Skill cells staggered pop */
body.ds-unified #skill-grid .skill-cell {
    animation: ds-cell-pop 0.35s var(--ds-ease-spring) both;
}
body.ds-unified #skill-grid .skill-cell:nth-child(1)  { animation-delay: 0.4s; }
body.ds-unified #skill-grid .skill-cell:nth-child(2)  { animation-delay: 0.42s; }
body.ds-unified #skill-grid .skill-cell:nth-child(3)  { animation-delay: 0.44s; }
body.ds-unified #skill-grid .skill-cell:nth-child(4)  { animation-delay: 0.46s; }
body.ds-unified #skill-grid .skill-cell:nth-child(5)  { animation-delay: 0.48s; }
body.ds-unified #skill-grid .skill-cell:nth-child(6)  { animation-delay: 0.50s; }
body.ds-unified #skill-grid .skill-cell:nth-child(7)  { animation-delay: 0.52s; }
body.ds-unified #skill-grid .skill-cell:nth-child(8)  { animation-delay: 0.54s; }
body.ds-unified #skill-grid .skill-cell:nth-child(9)  { animation-delay: 0.56s; }
body.ds-unified #skill-grid .skill-cell:nth-child(10) { animation-delay: 0.58s; }
body.ds-unified #skill-grid .skill-cell:nth-child(11) { animation-delay: 0.60s; }
body.ds-unified #skill-grid .skill-cell:nth-child(12) { animation-delay: 0.62s; }
body.ds-unified #skill-grid .skill-cell:nth-child(13) { animation-delay: 0.64s; }
body.ds-unified #skill-grid .skill-cell:nth-child(14) { animation-delay: 0.66s; }
body.ds-unified #skill-grid .skill-cell:nth-child(15) { animation-delay: 0.68s; }
body.ds-unified #skill-grid .skill-cell:nth-child(16) { animation-delay: 0.70s; }
body.ds-unified #skill-grid .skill-cell:nth-child(17) { animation-delay: 0.72s; }
body.ds-unified #skill-grid .skill-cell:nth-child(18) { animation-delay: 0.74s; }
body.ds-unified #skill-grid .skill-cell:nth-child(19) { animation-delay: 0.76s; }
body.ds-unified #skill-grid .skill-cell:nth-child(20) { animation-delay: 0.78s; }
body.ds-unified #skill-grid .skill-cell:nth-child(21) { animation-delay: 0.80s; }
body.ds-unified #skill-grid .skill-cell:nth-child(22) { animation-delay: 0.82s; }
body.ds-unified #skill-grid .skill-cell:nth-child(23) { animation-delay: 0.84s; }
body.ds-unified #skill-grid .skill-cell:nth-child(24) { animation-delay: 0.86s; }
@keyframes ds-cell-pop {
    0%   { opacity: 0; transform: scale(0.85) translateY(6px); }
    60%  { transform: scale(1.03); }
    100% { opacity: 1; transform: none; }
}


/* ─── § 51  PM BADGE ──────────────────────────────────────── */

body.ds-unified .pm-badge {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 700;
    background: var(--ds-red);
    color: #fff;
}


/* ─── § 52  AUTOCAST PANEL ────────────────────────────────── */

body.ds-unified .autocast-info-panel {
    background: var(--ds-surface-1) !important;
    background-image:
        linear-gradient(180deg, rgba(255,215,0,0.02), rgba(0,0,0,0.15)),
        var(--ds-texture) !important;
    background-size: auto, cover !important;
    border: var(--ds-border-accent) !important;
}


/* ─── § 53  SPELLBOOK ─────────────────────────────────────── */

body.ds-unified .spell-tooltip {
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    font-size: 11px;
    color: var(--ds-text);
}


/* ─── § 54  LAMP OVERLAY ──────────────────────────────────── */

body.ds-unified #lamp-overlay .rc-modal-body {
    background: var(--ds-surface-2);
}


/* ─── § 55  BOTTOM BAR (sidebar) ──────────────────────────── */

body.ds-unified .sidebar-bottom-bar {
    background: var(--ds-surface-3);
    border-top: 1px solid rgba(0,0,0,0.5);
}


/* ─── § 56  FORGING / TIER SYSTEM ─────────────────────────── */

body.ds-unified .forge-bar-track {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .forge-bar-fill {
    background: linear-gradient(90deg,
        var(--ds-gold-4), var(--ds-gold-3), var(--ds-gold-2));
    box-shadow: 0 0 6px rgba(255,200,80,0.3);
}


/* ─── § 57  SUPERIOR / BURST TOGGLE ───────────────────────── */

body.ds-unified .superior-toggle,
body.ds-unified .burst-toggle-wrap {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-dim);
    letter-spacing: 0.3px;
}


/* ─── § 58  IDLE MODE MARKER ──────────────────────────────── */

/* When no action is running, make the viewport feel dormant */
body.ds-unified .viewport .action-status {
    opacity: 0.8;
}


/* ─── § 59  XP BAR / XP TRACKER ───────────────────────────── */

body.ds-unified .xp-bar-wrap {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
    overflow: hidden;
}
body.ds-unified .xp-bar {
    height: 100%;
    background: var(--ds-surface-3);
}
body.ds-unified .xp-bar-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3), var(--ds-gold-2));
    box-shadow: 0 0 6px rgba(255,200,80,0.3);
}
body.ds-unified .xp-bar-label {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text);
    text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}

/* XP bar float overlay */
body.ds-unified #xp-bar-float {
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
body.ds-unified .xpb-icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
body.ds-unified .xpb-info {
    font-family: var(--ds-font-body) !important;
}
body.ds-unified .xpb-labels {
    font-size: 10px;
    color: var(--ds-text-dim);
    font-weight: 500;
}
body.ds-unified .xpb-track {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
    overflow: hidden;
}
body.ds-unified .xpb-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3), var(--ds-gold-2));
    box-shadow: 0 0 4px rgba(255,200,80,0.3);
}

/* XP Tracker panel */
body.ds-unified .xpt-wrap {
    font-family: var(--ds-font-body) !important;
    background: var(--ds-surface-2);
}
body.ds-unified .xpt-head {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .xpt-btn-icon {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
body.ds-unified .xpt-btn-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--ds-text-muted);
}
body.ds-unified .xpt-empty {
    font-size: 12px;
    color: var(--ds-text-muted);
    font-style: italic;
}
body.ds-unified .xpt-list {
    background: var(--ds-surface-3);
}
body.ds-unified .xpt-row {
    border-bottom: 1px solid rgba(201,162,74,0.06);
    transition: background 0.1s;
}
body.ds-unified .xpt-row:hover {
    background: rgba(201,162,74,0.04);
}
body.ds-unified .xpt-icon {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
body.ds-unified .xpt-name {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: 0.3px;
}
body.ds-unified .xpt-skill-name {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--ds-gold-2);
}
body.ds-unified .xpt-detail {
    font-size: 10px;
    color: var(--ds-text-dim);
}
body.ds-unified .xpt-rate {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-green);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .xpt-remaining {
    font-size: 10px;
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .xpt-ttl {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-dim);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .xpt-canvas-label {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    color: var(--ds-text-muted);
}
body.ds-unified .xpt-reset,
body.ds-unified .xpt-reset-all {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: color 0.12s;
}
body.ds-unified .xpt-reset:hover,
body.ds-unified .xpt-reset-all:hover {
    color: var(--ds-text);
}
body.ds-unified .xpt-click-row {
    font-size: 10px;
    color: var(--ds-text-dim);
}


/* ─── § 60  EMBER LEVEL-UP SPLASH ─────────────────────────── */

body.ds-unified .ember-levelup {
    z-index: 99999;
}
body.ds-unified .ember-lu-backdrop {
    background: radial-gradient(ellipse at center,
        rgba(201,162,74,0.15), transparent 50%),
        rgba(10,8,6,0.75);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
body.ds-unified .ember-lu-content {
    text-align: center;
}
body.ds-unified .ember-lu-ring {
    border-color: rgba(201,162,74,0.3);
    box-shadow: 0 0 30px rgba(201,162,74,0.2);
}
body.ds-unified .ember-lu-shockwave {
    border-color: rgba(201,162,74,0.4);
}
body.ds-unified .ember-lu-icon {
    filter: drop-shadow(0 0 12px rgba(201,162,74,0.4));
}
body.ds-unified .ember-lu-title {
    font-family: var(--ds-font-display) !important;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: var(--ds-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}
body.ds-unified .ember-lu-mastery {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
    text-shadow: 0 0 12px rgba(255,200,80,0.4);
}
body.ds-unified .ember-lu-skill {
    font-family: var(--ds-font-display) !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--ds-gold-2);
    text-shadow: 0 0 8px rgba(255,200,80,0.3);
}
body.ds-unified .ember-lu-flavor {
    font-family: var(--ds-font-body) !important;
    font-size: 12px;
    font-style: italic;
    color: var(--ds-text-dim);
    letter-spacing: 0.5px;
}


/* ─── § 61  EVENTS HUB ITEMS ──────────────────────────────── */

body.ds-unified .events-hub-grid {
    gap: 6px;
    padding: 6px;
}
body.ds-unified .events-hub-item {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
    box-shadow: var(--ds-shadow-card);
}
body.ds-unified .events-hub-item:hover {
    border-color: rgba(201,162,74,0.35);
    background: var(--ds-surface-raised);
    box-shadow:
        var(--ds-shadow-card),
        0 0 8px rgba(201,162,74,0.06);
}
body.ds-unified .events-hub-item-icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
body.ds-unified .events-hub-item-name {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: 0.3px;
}
body.ds-unified .events-hub-item-status {
    font-size: 10px;
    color: var(--ds-text-muted);
    font-weight: 500;
}
body.ds-unified .events-hub-item-badge {
    font-family: var(--ds-font-body) !important;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.ds-unified .event-banner {
    border: var(--ds-border-accent);
    border-radius: 4px;
    overflow: hidden;
}
body.ds-unified .event-title {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
}
body.ds-unified .event-subtitle {
    font-size: 11px;
    color: var(--ds-text-dim);
}
body.ds-unified .event-progress-wrap {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    overflow: hidden;
}
body.ds-unified .event-progress-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3), var(--ds-gold-2));
    box-shadow: 0 0 4px rgba(255,200,80,0.3);
}
body.ds-unified .event-progress-text {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text);
    text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
body.ds-unified .event-flavor {
    font-size: 11px;
    font-style: italic;
    color: var(--ds-text-dim);
}

/* Egg rows */
body.ds-unified .event-egg-row {
    border-bottom: 1px solid rgba(201,162,74,0.06);
}
body.ds-unified .event-egg-name {
    font-weight: 600;
    color: var(--ds-text);
}
body.ds-unified .event-egg-claimer {
    font-size: 10px;
    color: var(--ds-gold-2);
}
body.ds-unified .event-egg-source {
    font-size: 10px;
    color: var(--ds-text-muted);
}
body.ds-unified .event-egg-status {
    font-size: 10px;
    font-weight: 600;
}
body.ds-unified .event-egg-available {
    color: var(--ds-green);
}


/* ─── § 62  QUEST LIST ────────────────────────────────────── */

body.ds-unified .quest-search-wrap {
    background: var(--ds-surface-3);
    padding: 5px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.4);
}
body.ds-unified .quest-search {
    font-family: var(--ds-font-body) !important;
    font-size: 12px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .quest-search::placeholder {
    color: var(--ds-text-faint);
}
body.ds-unified .quest-back-btn {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text-muted);
    transition: color 0.12s;
}
body.ds-unified .quest-back-btn:hover {
    color: var(--ds-text);
}

body.ds-unified .quest-detail-title {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .quest-detail-name {
    font-family: var(--ds-font-display) !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ds-text);
}
body.ds-unified .quest-detail-diff {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}
body.ds-unified .quest-detail-status {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
body.ds-unified .quest-detail-section {
    background: rgba(0,0,0,0.15);
    border: var(--ds-border-accent);
    border-radius: 2px;
    padding: 8px 10px;
}
body.ds-unified .quest-section-title {
    font-family: var(--ds-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .quest-req {
    font-size: 11px;
    color: var(--ds-text);
}
body.ds-unified .quest-req-lvl {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.ds-unified .quest-reward {
    font-size: 11px;
    color: var(--ds-text);
}
body.ds-unified .quest-complete-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1b1308;
    background: linear-gradient(180deg,
        var(--ds-gold-2) 0%, #d8b65a 45%, #a07828 100%);
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 2px 0 #4a3412;
    text-shadow: 0 1px 0 rgba(255,240,180,0.5);
}
body.ds-unified .quest-cancel-btn {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text-muted);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
}

body.ds-unified .quest-lore-block {
    font-size: 12px;
    font-style: italic;
    color: var(--ds-text-dim);
    line-height: 1.5;
    border-left: 2px solid var(--ds-gold-4);
    padding-left: 12px;
}
body.ds-unified .quest-lore-title {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-gold-2);
    letter-spacing: 0.5px;
}
body.ds-unified .quest-lore-text {
    font-size: 12px;
    color: var(--ds-text-dim);
    line-height: 1.5;
}
body.ds-unified .quest-lore-toggle {
    font-size: 10px;
    color: var(--ds-text-muted);
    cursor: pointer;
}
body.ds-unified .quest-lore-toggle:hover {
    color: var(--ds-gold-2);
}

/* Quest timers */
body.ds-unified .quest-detail-timer {
    background: rgba(0,0,0,0.2);
    border: var(--ds-border-accent);
    border-radius: 2px;
    padding: 6px 8px;
}
body.ds-unified .quest-timer-name {
    font-weight: 600;
    color: var(--ds-text);
}
body.ds-unified .quest-timer-bar {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    overflow: hidden;
}
body.ds-unified .quest-timer-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3));
    box-shadow: 0 0 4px rgba(255,200,80,0.2);
}
body.ds-unified .quest-timer-time {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-dim);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .quest-timer-divider {
    background: linear-gradient(90deg, transparent, rgba(201,162,74,0.15), transparent);
    height: 1px;
}


/* ─── § 63  MARKETPLACE ITEMS ─────────────────────────────── */

body.ds-unified .marketplace-title {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
}
body.ds-unified .marketplace-gold {
    color: var(--ds-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.ds-unified .marketplace-actions {
    display: flex;
    gap: 6px;
}
body.ds-unified .marketplace-action-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    color: var(--ds-text);
    transition: border-color 0.12s, background 0.12s;
    cursor: pointer;
}
body.ds-unified .marketplace-action-btn:hover {
    border-color: rgba(201,162,74,0.4);
    background: var(--ds-surface-raised);
}
body.ds-unified .marketplace-action-buy {
    border-left: 3px solid var(--ds-green);
}
body.ds-unified .marketplace-action-sell {
    border-left: 3px solid var(--ds-red);
}

body.ds-unified .marketplace-collect-banner {
    background: linear-gradient(90deg, rgba(201,162,74,0.1), rgba(0,0,0,0.1));
    border: var(--ds-border-accent);
    border-radius: 3px;
}
body.ds-unified .marketplace-collect-banner-text {
    font-size: 11px;
    color: var(--ds-gold-2);
    font-weight: 600;
}

body.ds-unified .marketplace-empty-state {
    text-align: center;
    padding: 20px;
}
body.ds-unified .marketplace-empty-text {
    font-size: 13px;
    color: var(--ds-text-dim);
}
body.ds-unified .marketplace-empty-hint {
    font-size: 11px;
    color: var(--ds-text-muted);
    font-style: italic;
}

body.ds-unified .marketplace-offer-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
body.ds-unified .marketplace-offer-row {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s, background 0.12s;
    padding: 8px 10px;
}
body.ds-unified .marketplace-offer-row:hover {
    border-color: rgba(201,162,74,0.35);
    background: var(--ds-surface-raised);
}
body.ds-unified .marketplace-offer-complete {
    border-color: rgba(159,224,122,0.25);
    background: rgba(159,224,122,0.04);
}
body.ds-unified .marketplace-offer-collectable {
    border-color: rgba(201,162,74,0.4);
}

body.ds-unified .marketplace-offer-type-badge {
    font-family: var(--ds-font-body) !important;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 1px 5px;
}
body.ds-unified .marketplace-badge-buy {
    background: rgba(159,224,122,0.15);
    color: var(--ds-green);
    border: 1px solid rgba(159,224,122,0.25);
}
body.ds-unified .marketplace-badge-sell {
    background: rgba(255,128,128,0.12);
    color: var(--ds-red);
    border: 1px solid rgba(255,128,128,0.2);
}

body.ds-unified .marketplace-offer-name {
    font-weight: 600;
    color: var(--ds-text);
    font-size: 12px;
}
body.ds-unified .marketplace-offer-detail {
    font-size: 10px;
    color: var(--ds-text-dim);
}
body.ds-unified .marketplace-offer-progress {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    overflow: hidden;
    height: 4px;
}
body.ds-unified .marketplace-offer-progress-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3));
    height: 100%;
}

body.ds-unified .marketplace-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: filter 0.1s, transform 0.1s;
}
body.ds-unified .marketplace-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
body.ds-unified .marketplace-btn-collect {
    background: linear-gradient(180deg, var(--ds-gold-2), #a07828);
    color: #1b1308;
    border: 1px solid #000;
}
body.ds-unified .marketplace-btn-cancel {
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    color: var(--ds-text-muted);
}

/* Marketplace create overlay */
body.ds-unified .marketplace-create-overlay {
    background: rgba(10,8,6,0.65);
    backdrop-filter: blur(2px);
}
body.ds-unified .marketplace-create-panel {
    background: var(--ds-surface-0);
    background-image: var(--ds-shell);
    border: var(--ds-border-hard);
    border-radius: 6px;
    padding: 5px;
    box-shadow: var(--ds-shadow-shell), var(--ds-shadow-glow);
}
body.ds-unified .marketplace-create-panel-inner {
    background: var(--ds-surface-1);
    border: var(--ds-border-frame);
    border-radius: 3px;
    box-shadow: var(--ds-shadow-inner);
}
body.ds-unified .marketplace-create-title {
    font-family: var(--ds-font-display) !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
}
body.ds-unified .marketplace-create-close {
    color: var(--ds-text-muted);
    transition: color 0.12s;
}
body.ds-unified .marketplace-create-close:hover {
    color: var(--ds-text);
}


/* ─── § 64  POH ROOMS ─────────────────────────────────────── */

body.ds-unified .poh-grid {
    background: var(--ds-surface-3);
    gap: 4px;
    padding: 6px;
}
body.ds-unified .poh-room-grid {
    gap: 4px;
}
body.ds-unified .poh-room-card {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s, background 0.12s;
    box-shadow: var(--ds-shadow-card);
    cursor: pointer;
}
body.ds-unified .poh-room-card:hover {
    border-color: rgba(201,162,74,0.35);
    background: var(--ds-surface-raised);
}
body.ds-unified .poh-room-card-name {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-gold-2);
    letter-spacing: 0.3px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .poh-room-card-desc {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    color: var(--ds-text-dim);
}
body.ds-unified .poh-room-card-max {
    font-size: 10px;
    color: var(--ds-text-muted);
}
body.ds-unified .poh-room-card-req {
    font-size: 10px;
    color: var(--ds-red);
}

body.ds-unified .poh-tier-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    color: var(--ds-text);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
body.ds-unified .poh-tier-btn:hover {
    border-color: rgba(201,162,74,0.4);
    background: var(--ds-surface-raised);
}

body.ds-unified .poh-room-header {
    background: var(--ds-surface-1);
    border-bottom: 1px solid rgba(201,162,74,0.1);
}
body.ds-unified .poh-room-header-name {
    font-family: var(--ds-font-display) !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .poh-room-header-tier {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-muted);
}
body.ds-unified .poh-room-header-base {
    font-size: 10px;
    color: var(--ds-text-dim);
}


/* ─── § 65  PRESTIGE HUB INTERIOR ─────────────────────────── */

body.ds-unified .prestige-hub {
    background: var(--ds-surface-2);
    background-image: var(--ds-weave), var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .prestige-hub-header,
body.ds-unified .ph-hero {
    font-family: var(--ds-font-display) !important;
}
body.ds-unified .ph-name {
    font-family: var(--ds-font-display) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ds-text);
}
body.ds-unified .ph-clan {
    font-size: 11px;
    color: var(--ds-text-muted);
}
body.ds-unified .ph-lvl-pill {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 600;
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    color: var(--ds-text);
}

body.ds-unified .ph-section {
    background: rgba(0,0,0,0.15);
    border: var(--ds-border-accent);
    border-radius: 3px;
    padding: 8px 10px;
}
body.ds-unified .ph-section-label {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

body.ds-unified .ph-vital-track {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    overflow: hidden;
}
body.ds-unified .ph-fill-hp {
    background: linear-gradient(90deg, #2d8b2d, #4ade4a);
}
body.ds-unified .ph-fill-prayer {
    background: linear-gradient(90deg, #2d6b8b, #4abede);
}
body.ds-unified .ph-vital-text {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}

body.ds-unified .ph-slayer-name {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    color: var(--ds-text);
}
body.ds-unified .ph-slayer-track {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    overflow: hidden;
}
body.ds-unified .ph-slayer-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3));
}
body.ds-unified .ph-slayer-text {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .ph-slayer-empty {
    font-size: 11px;
    color: var(--ds-text-muted);
    font-style: italic;
}

body.ds-unified .ph-theme-picker {
    gap: 4px;
}
body.ds-unified .ph-theme-option {
    border: var(--ds-border-accent);
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.12s;
}
body.ds-unified .ph-theme-option:hover {
    border-color: rgba(201,162,74,0.4);
}
body.ds-unified .ph-theme-gear {
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: color 0.12s;
}
body.ds-unified .ph-theme-gear:hover {
    color: var(--ds-text);
}

/* Prestige-specific buttons and cards */
body.ds-unified .prestige-btn,
body.ds-unified .prestige-confirm {
    font-family: var(--ds-font-body) !important;
}
body.ds-unified .prestige-card {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
}
body.ds-unified .prestige-tier {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}

/* Bingo */
body.ds-unified .bingo-tile {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    transition: border-color 0.12s;
}
body.ds-unified .bingo-tile:hover {
    border-color: rgba(201,162,74,0.35);
}


/* ─── § 66  SLAYER HUB INTERIOR ───────────────────────────── */

body.ds-unified .slayer-hub {
    background: var(--ds-surface-2);
    background-image: var(--ds-weave), var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .slayer-hub-header {
    font-family: var(--ds-font-display) !important;
}
body.ds-unified .slayer-hub-title-row {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .slayer-hub-stats {
    font-size: 11px;
    color: var(--ds-text-dim);
}
body.ds-unified .slayer-hub-content {
    background: var(--ds-surface-3);
}

body.ds-unified .slayer-active-task {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-left: 3px solid var(--ds-gold-3);
    border-radius: 3px;
    box-shadow: var(--ds-shadow-card);
}
body.ds-unified .slayer-task-name {
    font-family: var(--ds-font-display) !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: 0.5px;
}
body.ds-unified .slayer-task-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text-dim);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .slayer-task-meta {
    font-size: 10px;
    color: var(--ds-text-muted);
}
body.ds-unified .slayer-task-bar-wrap {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    overflow: hidden;
}
body.ds-unified .slayer-task-bar {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3));
    box-shadow: 0 0 4px rgba(255,200,80,0.2);
}
body.ds-unified .slayer-task-btns {
    gap: 4px;
}
body.ds-unified .slayer-task-focus {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 700;
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    color: var(--ds-text);
    cursor: pointer;
    transition: border-color 0.12s;
}
body.ds-unified .slayer-task-focus:hover {
    border-color: rgba(201,162,74,0.4);
}


/* ─── § 67  SETTINGS CONTROLS ─────────────────────────────── */

body.ds-unified .settings-body {
    background: var(--ds-surface-2);
    background-image: var(--ds-weave), var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .settings-row {
    border-bottom: 1px solid rgba(201,162,74,0.06);
    padding: 8px 10px;
    transition: background 0.1s;
}
body.ds-unified .settings-row:hover {
    background: rgba(201,162,74,0.03);
}
body.ds-unified .settings-row-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text);
}
body.ds-unified .settings-row-icon {
    color: var(--ds-text-muted);
}
body.ds-unified .settings-chevron-right,
body.ds-unified .settings-chevron-left {
    color: var(--ds-text-muted);
}
body.ds-unified .settings-divider {
    background: linear-gradient(90deg, transparent, rgba(201,162,74,0.15), transparent);
    height: 1px;
}
body.ds-unified .settings-group {
    background: rgba(0,0,0,0.1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    padding: 8px;
}

body.ds-unified .settings-btn,
body.ds-unified .settings-discord-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    color: var(--ds-text);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
body.ds-unified .settings-btn:hover,
body.ds-unified .settings-discord-btn:hover {
    border-color: rgba(201,162,74,0.4);
    background: var(--ds-surface-raised);
}
body.ds-unified .settings-delete-account-btn {
    font-family: var(--ds-font-body) !important;
    background: rgba(180,40,30,0.15);
    border: 1px solid rgba(180,40,30,0.3);
    color: var(--ds-red);
}

body.ds-unified .settings-broadcast-name {
    font-family: var(--ds-font-body) !important;
    font-size: 12px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .settings-eat-value {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-gold-2);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .settings-eat-slider {
    accent-color: var(--ds-gold-3);
}

body.ds-unified .settings-tab {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-shell-tab);
    border: 1px solid rgba(0,0,0,0.4);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
body.ds-unified .settings-tab:hover {
    background: var(--ds-shell-tab-hover);
    color: var(--ds-text);
}
body.ds-unified .settings-tab.active {
    background: var(--ds-shell-tab-active);
    color: var(--ds-gold-2);
    border-color: var(--ds-gold-4);
}

body.ds-unified .settings-vol-icon {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
body.ds-unified .settings-range {
    accent-color: var(--ds-gold-3);
}


/* ─── § 68  SEASON / REWARD TRACK ─────────────────────────── */

body.ds-unified .ep-wrap {
    background: var(--ds-surface-2);
    background-image: var(--ds-weave), var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .ep-hero {
    position: relative;
}
body.ds-unified .ep-hero-title {
    font-family: var(--ds-font-display) !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: var(--ds-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}
body.ds-unified .ep-hero-sub {
    font-size: 11px;
    color: var(--ds-text-dim);
    letter-spacing: 0.5px;
}
body.ds-unified .ep-hero-days {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-muted);
}
body.ds-unified .ep-hero-rule {
    background: linear-gradient(90deg, transparent, rgba(201,162,74,0.3), transparent);
    height: 1px;
}
body.ds-unified .ep-hero-pre {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}
body.ds-unified .ep-x {
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: color 0.12s;
}
body.ds-unified .ep-x:hover {
    color: var(--ds-text);
}

body.ds-unified .ep-track-wrap {
    background: var(--ds-surface-3);
    border: var(--ds-border-accent);
    border-radius: 3px;
}
body.ds-unified .ep-ch-label {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

body.ds-unified .ep-node {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s;
}
body.ds-unified .ep-node:hover {
    border-color: rgba(201,162,74,0.35);
}
body.ds-unified .ep-node-day {
    font-size: 9px;
    font-weight: 600;
    color: var(--ds-text-muted);
}
body.ds-unified .ep-conn {
    background: rgba(201,162,74,0.2);
}

body.ds-unified .ep-claim-zone {
    background: var(--ds-surface-1);
    border: var(--ds-border-accent-hi);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(201,162,74,0.08);
}
body.ds-unified .ep-cz-day {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

body.ds-unified .ep-notif-dot {
    background: var(--ds-gold-2);
    box-shadow: 0 0 6px rgba(255,200,80,0.5);
}


/* ─── § 69  BELL WARDEN ───────────────────────────────────── */

body.ds-unified .bell-warden-title {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    color: var(--ds-gold-2);
}
body.ds-unified .bell-warden-bells {
    gap: 4px;
}
body.ds-unified .resonant-bell-icon {
    filter: drop-shadow(0 0 4px rgba(201,162,74,0.3));
}
body.ds-unified .spec-debuff-warn {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-red);
}


/* ─── § 70  IRONMAN ───────────────────────────────────────── */

body.ds-unified .ironman-toggle {
    font-family: var(--ds-font-body) !important;
}
body.ds-unified .ironman-banner-icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}


/* ─── § 71  SKILL HUB (fullscreen overlay) ────────────────── */

body.ds-unified .skill-hub {
    background: var(--ds-surface-2);
    background-image: var(--ds-weave), var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .hub-header {
    font-family: var(--ds-font-display) !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .hub-tabs {
    background: var(--ds-surface-3);
    gap: 2px;
    padding: 3px;
}
body.ds-unified .hub-tab {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-shell-tab);
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
body.ds-unified .hub-tab:hover {
    background: var(--ds-shell-tab-hover);
    color: var(--ds-text);
}
body.ds-unified .hub-tab.active {
    background: var(--ds-shell-tab-active);
    color: var(--ds-gold-2);
    border-color: var(--ds-gold-4);
}
body.ds-unified .hub-body {
    background: var(--ds-surface-2);
    background-image: var(--ds-weave), var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
}
body.ds-unified .hub-swap {
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: color 0.12s;
}
body.ds-unified .hub-swap:hover {
    color: var(--ds-gold-2);
}


/* ─── § 72  BANK EXTRAS (lock, sort, empty, value bar) ────── */

body.ds-unified .bank-lock {
    opacity: 0.6;
    filter: drop-shadow(0 0 1px #000);
}
body.ds-unified .bank-sort-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 2px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
body.ds-unified .bank-sort-btn:hover {
    color: var(--ds-text);
    border-color: rgba(201,162,74,0.35);
}
body.ds-unified .bank-value-bar {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-dim);
    background: var(--ds-surface-3);
    border-top: 1px solid rgba(0,0,0,0.4);
    padding: 4px 8px;
}


/* ─── § 73  PRAYER DETAIL ─────────────────────────────────── */

body.ds-unified .prayer-summary {
    background: var(--ds-surface-2) !important;
    font-size: 11px;
    color: var(--ds-text);
}
body.ds-unified .prayer-footer {
    background: var(--ds-surface-3);
    border-top: 1px solid rgba(0,0,0,0.4);
    font-size: 10px;
    color: var(--ds-text-dim);
}
body.ds-unified .prayer-points-footer {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text);
}


/* ─── § 74  MOBILE DRAWER EXTRAS ──────────────────────────── */

body.ds-unified .rc-drawer-scrim {
    background: rgba(10,8,6,0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
body.ds-unified .rc-drawer-close {
    color: var(--ds-text-muted);
    transition: color 0.12s;
}
body.ds-unified .rc-drawer-close:hover {
    color: var(--ds-text);
}


/* ─── § 75  RL SHARED DESIGN SYSTEM (panel rows/tabs/buttons) ─ */

body.ds-unified .rl-row {
    border-bottom: 1px solid rgba(201,162,74,0.06);
    transition: background 0.1s;
    font-size: 12px;
    color: var(--ds-text);
}
body.ds-unified .rl-row:hover {
    background: rgba(201,162,74,0.04);
}
body.ds-unified .rl-tab {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-shell-tab);
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 3px 3px 0 0;
    transition: background 0.12s, color 0.12s;
}
body.ds-unified .rl-tab:hover {
    background: var(--ds-shell-tab-hover);
    color: var(--ds-text);
}
body.ds-unified .rl-tab.active {
    background: var(--ds-shell-tab-active);
    color: var(--ds-gold-2);
    border-color: var(--ds-gold-4);
}
body.ds-unified .rl-tabs--raised .rl-tab {
    background: var(--ds-shell-tab);
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .rl-tabs--raised .rl-tab:hover {
    background: var(--ds-shell-tab-hover);
}
body.ds-unified .rl-tabs--raised .rl-tab.active {
    background: var(--ds-shell-tab-active);
    border-color: var(--ds-gold-4);
}

body.ds-unified .rl-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ds-text);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
body.ds-unified .rl-btn:hover {
    border-color: rgba(201,162,74,0.4);
    background: var(--ds-surface-raised);
}
body.ds-unified .rl-pill {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--ds-text-muted);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 10px;
}
body.ds-unified .rl-pill.active {
    color: var(--ds-gold-2);
    border-color: var(--ds-gold-3);
    background: rgba(201,162,74,0.1);
}
body.ds-unified .rl-head {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .rl-progress {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    overflow: hidden;
}
body.ds-unified .rl-controls {
    background: var(--ds-surface-3);
    border-top: 1px solid rgba(0,0,0,0.4);
}
body.ds-unified .rl-search {
    font-family: var(--ds-font-body) !important;
    font-size: 12px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .rl-search::placeholder {
    color: var(--ds-text-faint);
}
body.ds-unified .rl-search:focus {
    border-color: var(--ds-gold-3);
}


/* ─── § 76  DATA TOOLTIPS (pseudo-elements on tabs/rl-bar) ── */

body.ds-unified .sidebar-top-tab::after,
body.ds-unified .sidebar-tab::after,
body.ds-unified .rl-bar-btn::after {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    color: var(--ds-gold-2) !important;
    background: var(--ds-surface-1) !important;
    border: var(--ds-border-accent) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    border-radius: 3px;
}


/* ─── § 77  CHAR SELECT SUB-FORMS (create, cloud, login) ──── */

body.ds-unified .charslot-create-form {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    padding: 10px;
}
body.ds-unified .charslot-create-title {
    font-family: var(--ds-font-display) !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-gold-2);
    letter-spacing: 0.5px;
}
body.ds-unified .charslot-create-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-dim);
}
body.ds-unified .charslot-name-input {
    font-family: var(--ds-font-body) !important;
    font-size: 13px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .charslot-delete-warn {
    font-size: 11px;
    color: var(--ds-red);
}

body.ds-unified .cloud-section {
    background: rgba(0,0,0,0.1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    padding: 10px;
}
body.ds-unified .cloud-user-email {
    font-size: 11px;
    color: var(--ds-text-dim);
}
body.ds-unified .cloud-hint {
    font-size: 11px;
    color: var(--ds-text-muted);
    font-style: italic;
}
body.ds-unified .cloud-google-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 12px;
    font-weight: 600;
    border-radius: 3px;
}
body.ds-unified .cloud-signout-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    color: var(--ds-text-muted);
}

body.ds-unified .login-welcome {
    font-family: var(--ds-font-display) !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
}
body.ds-unified .login-screen-body {
    background: var(--ds-surface-2);
}
body.ds-unified .login-separator {
    background: linear-gradient(90deg, transparent, rgba(201,162,74,0.2), transparent);
    height: 1px;
}
body.ds-unified .login-separator-text {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}
body.ds-unified .login-hint {
    font-size: 11px;
    color: var(--ds-text-dim);
}
body.ds-unified .login-guest-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text-muted);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s, color 0.12s;
}
body.ds-unified .login-guest-btn:hover {
    border-color: rgba(201,162,74,0.4);
    color: var(--ds-text);
}


/* ─── § 78  METHOD DETAIL EXTRAS ──────────────────────────── */

body.ds-unified .method-detail-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1b1308;
    background: linear-gradient(180deg,
        var(--ds-gold-2), #d8b65a 45%, #a07828);
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 2px 0 #4a3412;
    text-shadow: 0 1px 0 rgba(255,240,180,0.5);
    cursor: pointer;
}
body.ds-unified .method-detail-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
body.ds-unified .method-shortcut-btn {
    background: rgba(201,162,74,0.08);
    border: var(--ds-border-accent);
    border-radius: 3px;
    color: var(--ds-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
body.ds-unified .method-shortcut-btn:hover {
    background: rgba(201,162,74,0.15);
    border-color: rgba(201,162,74,0.35);
}
body.ds-unified .method-detail-reqs {
    background: rgba(255,128,128,0.06);
    border: 1px solid rgba(255,128,128,0.15);
    border-radius: 2px;
}

/* Monster info panel */
body.ds-unified .mi-section {
    background: rgba(0,0,0,0.2);
    border: var(--ds-border-accent);
    border-radius: 2px;
    padding: 5px 8px;
}
body.ds-unified .mi-section-title {
    font-family: var(--ds-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .mi-cell-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .mi-cell-label {
    font-size: 9px;
    color: var(--ds-text-muted);
}
body.ds-unified .mi-loot-row {
    border-bottom: 1px solid rgba(201,162,74,0.06);
}
body.ds-unified .mi-loot-name {
    font-size: 11px;
    color: var(--ds-text);
}
body.ds-unified .mi-loot-rate {
    font-size: 10px;
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
}
body.ds-unified .monster-info-panel-left {
    background: var(--ds-surface-2);
}


/* ─── § 79  RAID UI SUB-ELEMENTS ──────────────────────────── */

body.ds-unified .raid-tab.active {
    color: var(--ds-gold-2);
    border-color: var(--ds-gold-3);
    background: var(--ds-shell-tab-active);
}
body.ds-unified .raid-enter-btn {
    font-family: var(--ds-font-display) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    background: linear-gradient(180deg, rgba(201,162,74,0.12), rgba(0,0,0,0.25));
    border: 2px solid var(--ds-gold-3);
    border-radius: 4px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    box-shadow: 0 0 8px rgba(201,162,74,0.1);
    transition: background 0.15s, box-shadow 0.15s;
}
body.ds-unified .raid-enter-btn:hover {
    background: linear-gradient(180deg, rgba(201,162,74,0.2), rgba(0,0,0,0.2));
    box-shadow: 0 0 14px rgba(201,162,74,0.2);
}
body.ds-unified .raid-auto-label {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .raid-action-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
}
body.ds-unified .raid-action-btn:hover {
    border-color: rgba(201,162,74,0.4);
    background: var(--ds-surface-raised);
}
body.ds-unified .raid-text {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text);
}
body.ds-unified .raid-weapon-slot {
    background: var(--ds-surface-3);
    border: 1px solid rgba(201,162,74,0.15);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .raid-weapon-slot:hover {
    border-color: rgba(201,162,74,0.3);
}
body.ds-unified .raid-loadout-panel {
    background: var(--ds-surface-2);
    background-image: var(--ds-weave), var(--ds-texture);
    background-blend-mode: overlay, normal;
    background-size: auto auto, cover;
    border: 1px solid var(--ds-gold-3);
    border-radius: 0 0 4px 4px;
}


/* ─── § 80  SHOP HUB ──────────────────────────────────────── */

body.ds-unified .shop-hub-item {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s, background 0.12s;
    cursor: pointer;
}
body.ds-unified .shop-hub-item:hover {
    border-color: rgba(201,162,74,0.35);
    background: var(--ds-surface-raised);
}
body.ds-unified .shop-hub-item-name {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-gold-2);
    letter-spacing: 0.3px;
}
body.ds-unified .shop-hub-item-desc {
    font-size: 10px;
    color: var(--ds-text-dim);
}
body.ds-unified .shop-hub-item-arrow {
    color: var(--ds-text-muted);
}
body.ds-unified .shop-hub-section-label {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}
body.ds-unified .shop-hub-gold {
    color: var(--ds-gold);
    font-weight: 700;
}
body.ds-unified .shop-section-header {
    font-family: var(--ds-font-display) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}


/* ─── § 81  BACKGROUND PICKER ─────────────────────────────── */

body.ds-unified .bg-picker-btn,
body.ds-unified .bg-browser-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.12s;
}
body.ds-unified .bg-picker-btn:hover,
body.ds-unified .bg-browser-btn:hover {
    border-color: rgba(201,162,74,0.4);
}


/* ─── § 82  EVENT BADGE/STATUS DETAIL ─────────────────────── */

body.ds-unified .badge-active {
    background: rgba(201,162,74,0.15);
    border: 1px solid rgba(201,162,74,0.3);
    color: var(--ds-gold-2);
}
body.ds-unified .badge-complete {
    background: rgba(159,224,122,0.12);
    border: 1px solid rgba(159,224,122,0.25);
    color: var(--ds-green);
}
body.ds-unified .status-claimed {
    color: var(--ds-text-muted);
}
body.ds-unified .status-available {
    color: var(--ds-green);
}
body.ds-unified .event-egg-icon-wrap {
    border: var(--ds-border-accent);
    border-radius: 3px;
    background: var(--ds-surface-2);
}


/* ─── § 83  EP HERO BAR ───────────────────────────────────── */

body.ds-unified .ep-hero-bar {
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    overflow: hidden;
}
body.ds-unified .ep-hero-xp {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-dim);
    font-variant-numeric: tabular-nums;
}


/* ─── § 84  HISCORES SUB-ELEMENTS ─────────────────────────── */

body.ds-unified .hiscores-rank {
    color: var(--ds-gold-2);
}
body.ds-unified .hiscores-me .hiscores-name {
    color: var(--ds-gold-2);
}
body.ds-unified .hiscores-name-link:hover {
    color: var(--ds-gold-2);
}
body.ds-unified .hiscores-sticky-header {
    color: var(--ds-gold-2);
    background: var(--ds-surface-1);
}
body.ds-unified .hiscores-filter-cb {
    accent-color: var(--ds-gold-3);
}

body.ds-unified .friends-tab {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-shell-tab);
    border: 1px solid rgba(0,0,0,0.4);
    transition: background 0.12s, color 0.12s;
}
body.ds-unified .friends-tab:hover {
    background: var(--ds-shell-tab-hover);
    color: var(--ds-text);
}
body.ds-unified .friends-tab.active {
    background: var(--ds-shell-tab-active);
    color: var(--ds-gold-2);
    border-bottom-color: var(--ds-gold-3);
}
body.ds-unified .friends-add-btn {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}
body.ds-unified .friends-add-btn:hover {
    border-color: rgba(201,162,74,0.5);
}
body.ds-unified .friends-panel-header {
    color: var(--ds-gold-2);
    font-family: var(--ds-font-display) !important;
}

body.ds-unified .profile-back-btn {
    color: var(--ds-text-muted);
    transition: color 0.12s;
}
body.ds-unified .profile-back-btn:hover {
    color: var(--ds-gold-2);
}
body.ds-unified .profile-player-name {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .profile-rank {
    color: var(--ds-gold-2);
}


/* ─── § 85  POH CELL GRID / MODULE SLOTS ──────────────────── */

body.ds-unified .poh-cell {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s, background 0.12s;
}
body.ds-unified .poh-cell:hover {
    border-color: var(--ds-gold-3);
    background: var(--ds-surface-raised);
}
body.ds-unified .poh-cell-name {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .poh-back {
    color: var(--ds-text-muted);
    transition: color 0.12s;
}
body.ds-unified .poh-back:hover {
    color: var(--ds-gold-2);
}
body.ds-unified .poh-section-title {
    font-family: var(--ds-font-display) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
body.ds-unified .poh-module-slot {
    background: var(--ds-surface-3);
    border: 1px solid rgba(201,162,74,0.12);
    border-radius: 2px;
    transition: border-color 0.12s;
}
body.ds-unified .poh-module-slot:hover {
    border-color: var(--ds-gold-3);
}
body.ds-unified .poh-module-name {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .poh-module-pick-name {
    color: var(--ds-gold-2);
}


/* ─── § 86  PRESTIGE HUB FULL INTERIOR ────────────────────── */

body.ds-unified .p-fs-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .p-fs-close {
    color: var(--ds-text-muted);
    border-color: var(--ds-gold-4);
    transition: color 0.12s, border-color 0.12s;
}
body.ds-unified .p-fs-close:hover {
    color: var(--ds-text);
    border-color: var(--ds-gold-3);
}
body.ds-unified .p-hs-currency {
    color: var(--ds-gold-2);
}
body.ds-unified .p-tab {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text-muted);
    transition: color 0.12s;
}
body.ds-unified .p-tab.active {
    color: var(--ds-gold-2);
    border-bottom-color: var(--ds-gold-3);
}
body.ds-unified .p-bv-btn {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s;
}
body.ds-unified .p-bv-btn:hover {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}
body.ds-unified .p-pick-btn {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text);
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
}
body.ds-unified .p-pick-btn:hover {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}
body.ds-unified .p-reroll-btn {
    font-family: var(--ds-font-body) !important;
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
}
body.ds-unified .p-reroll-btn:hover {
    border-color: var(--ds-gold-3);
}
body.ds-unified .p-prest-content {
    color: var(--ds-text);
}
body.ds-unified .p-monster-group-label {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .p-boss-check {
    color: var(--ds-gold-2);
}
body.ds-unified .p-prest-num {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .p-prest-section-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .p-prest-section-title.earn {
    color: var(--ds-gold-2);
}
body.ds-unified .p-tier-node {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
}
body.ds-unified .p-tier-node.current {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}
body.ds-unified .p-tier-node.current .p-tier-num,
body.ds-unified .p-tier-node.current .p-tier-label {
    color: var(--ds-gold-2);
}
body.ds-unified .p-dash-pill {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-text-muted);
}
body.ds-unified .p-dash-pill.active {
    color: var(--ds-gold-2);
    border-bottom-color: var(--ds-gold-3);
}

body.ds-unified .hub-swap:hover {
    color: var(--ds-gold-2);
    background: rgba(201,162,74,0.1);
    border-color: var(--ds-gold-3);
}


/* ─── § 87  SKILL HUB INTERIOR ────────────────────────────── */

body.ds-unified .hub-skill-name {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .tier-node {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s;
}
body.ds-unified .tier-node.active {
    border-color: var(--ds-gold-3);
}
body.ds-unified .tier-node.active .tier-name {
    color: var(--ds-gold-2);
}
body.ds-unified .supply-output-name {
    color: var(--ds-gold-2);
}
body.ds-unified .forge-item-name {
    color: var(--ds-gold-2);
}
body.ds-unified .forge-output-chip {
    color: var(--ds-gold-2);
}
body.ds-unified .mc-play {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-gold-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s;
}
body.ds-unified .mc-play:hover {
    border-color: var(--ds-gold-3);
}
body.ds-unified .method-card.active {
    border-color: var(--ds-gold-3);
}
body.ds-unified .hub-mini-indicator:hover {
    border-color: var(--ds-gold-3);
}


/* ─── § 88  MARKETPLACE CREATE FORM INTERNALS ─────────────── */

body.ds-unified .marketplace-search-input:focus {
    border-color: var(--ds-gold-3);
    box-shadow: var(--ds-shadow-recessed), 0 0 6px rgba(201,162,74,0.15);
}
body.ds-unified .marketplace-selected-name {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .marketplace-btn-change {
    color: var(--ds-text-muted);
    border: var(--ds-border-accent);
    transition: color 0.12s, border-color 0.12s;
}
body.ds-unified .marketplace-btn-change:hover {
    color: var(--ds-gold-2);
    border-color: var(--ds-gold-3);
}
body.ds-unified .marketplace-price-guide-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .marketplace-input:focus {
    border-color: var(--ds-gold-3);
    box-shadow: var(--ds-shadow-recessed), 0 0 6px rgba(201,162,74,0.15);
}
body.ds-unified .marketplace-qty-preset {
    color: var(--ds-text-muted);
    transition: color 0.12s;
}
body.ds-unified .marketplace-qty-preset:hover {
    color: var(--ds-gold-2);
}
body.ds-unified .marketplace-item-name-header {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}


/* ─── § 89  RL PANEL SHARED HEADERS ───────────────────────── */

body.ds-unified .rl-shop-header {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .rl-xpt-name {
    color: var(--ds-gold-2);
}


/* ─── § 90  AUTOCAST / SPELLBOOK / WEAPON PICKER ──────────── */

body.ds-unified .autocast-picker-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .autocast-spell-btn.active {
    border-color: var(--ds-gold-3);
}
body.ds-unified .weapon-picker-btn {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    transition: border-color 0.12s;
}
body.ds-unified .weapon-picker-btn:hover {
    border-color: var(--ds-gold-3);
}
body.ds-unified .weapon-picker-name {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .spellbook-section-label {
    font-family: var(--ds-font-body) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ds-gold-2);
}
body.ds-unified .spell-tooltip .st-name {
    color: var(--ds-gold-2);
}
body.ds-unified .method-list-subhead {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-gold-2);
}


/* ─── § 91  CHAT CLAN TAG / CUSTOM TAB / PLAYER CTX ──────── */

body.ds-unified .chat-line .log-clan-tag {
    color: var(--ds-gold-2);
}
body.ds-unified .custom-tab-config-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .custom-tab-config-row input[type="checkbox"] {
    accent-color: var(--ds-gold-3);
}
body.ds-unified .player-ctx-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}


/* ─── § 92  METHOD DETAIL LOOT / PRODUCT CHIP ─────────────── */

body.ds-unified .mi-loot-unique .mi-loot-name {
    color: var(--ds-gold-2);
}
body.ds-unified .prod-chip.prod-output {
    color: var(--ds-gold-2);
}


/* ─── § 93  CHARSLOT CUSTOMIZE ────────────────────────────── */

body.ds-unified .charslot-customize {
    color: var(--ds-gold-2) !important;
}


/* ─── § 94  BG PICKER / BROWSER ACTIVE STATE ──────────────── */

body.ds-unified .bg-picker-btn.active,
body.ds-unified .bg-browser-btn.active {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}


/* ─── § 95  SETTINGS CHEVRON HOVER (border-based arrows) ──── */

body.ds-unified .settings-submenu-row:hover .settings-chevron-right,
body.ds-unified .settings-submenu-row:hover .settings-chevron-left {
    border-color: var(--ds-gold-3);
}


/* ─── § 96  BOSS PHASE / MI PHASE TAB ─────────────────────── */

body.ds-unified .boss-phase-check.active {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}
body.ds-unified .mi-phase-tab.active {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}


/* ─── § 97  MOBILE TAB STRIP TOP ──────────────────────────── */

body.ds-unified .mobile-tab-strip-top .mts-btn.active,
body.ds-unified #mobile-tab-strip-top .mts-btn.active {
    border-bottom-color: var(--ds-gold-3);
}


/* ─── § 98  SELL JUNK / GS CHAIN NODE ─────────────────────── */

body.ds-unified .sell-junk-input:focus {
    border-color: var(--ds-gold-3);
    box-shadow: var(--ds-shadow-recessed), 0 0 6px rgba(201,162,74,0.15);
}
body.ds-unified .gs-chain-node.gs-chain-current {
    border-color: var(--ds-gold-3);
}


/* ─── § 99  EP DETAIL OVERLAY ─────────────────────────────── */

body.ds-unified .ep-det-type {
    color: var(--ds-gold-2);
}
body.ds-unified .ep-det-stat-val {
    color: var(--ds-gold-2);
    font-variant-numeric: tabular-nums;
}


/* ─── § 100  FOCUS STATES (remaining) ─────────────────────── */

body.ds-unified .settings-broadcast-name:focus {
    border-color: var(--ds-gold-3);
    box-shadow: var(--ds-shadow-recessed), 0 0 6px rgba(201,162,74,0.15);
}
body.ds-unified .charslot-name-input:focus {
    border-color: var(--ds-gold-3);
    box-shadow: var(--ds-shadow-recessed), 0 0 6px rgba(201,162,74,0.15);
}
body.ds-unified .hiscores-select:focus,
body.ds-unified .hiscores-search:focus {
    outline: 1px solid var(--ds-gold-3);
}
body.ds-unified .friends-add-input:focus {
    outline: 1px solid var(--ds-gold-3);
}


/* ─── § 101  CORE UI ORANGE REPLACEMENTS ──────────────────── */

body.ds-unified .bt-name {
    color: var(--ds-gold-2);
}
body.ds-unified .ctx-head {
    color: var(--ds-gold-2);
}
body.ds-unified .clog-source-partial .clog-source-name {
    color: var(--ds-gold-2);
}
body.ds-unified .claimer-name {
    color: var(--ds-gold-2);
}
body.ds-unified .topbar-rolling-link:hover .topbar-rolling-text {
    color: var(--ds-gold-2);
}
body.ds-unified .bank-item.clue-scroll {
    border-color: var(--ds-gold-3);
}
body.ds-unified .spec-counter-text {
    color: var(--ds-gold-2);
}


/* ─── § 102  AUTOCAST / COMBAT EXTRAS ─────────────────────── */

body.ds-unified .ac-multi {
    background: var(--ds-gold-3);
}
body.ds-unified .combat-tab-btn.autocast-btn.active {
    border-color: var(--ds-gold-3);
}


/* ─── § 103  PRESTIGE HUB EXTRAS ──────────────────────────── */

body.ds-unified .prestige-badge:hover {
    background: rgba(201,162,74,0.12);
    border-color: var(--ds-gold-3);
}
body.ds-unified .p-bv-btn.primary {
    color: #1b1308;
    background: linear-gradient(180deg,
        var(--ds-gold-2), #d8b65a 45%, #a07828);
    border: 1px solid #000;
    text-shadow: 0 1px 0 rgba(255,240,180,0.5);
}
body.ds-unified .p-bv-btn.primary:hover {
    filter: brightness(1.08);
}
body.ds-unified .ph-currency-val {
    color: var(--ds-gold-2) !important;
}
body.ds-unified .ph-task-name {
    color: var(--ds-gold-2);
}
body.ds-unified .ph-close {
    color: var(--ds-text-muted);
    border-color: var(--ds-gold-4);
}
body.ds-unified .ph-close:hover {
    color: var(--ds-text);
    border-color: var(--ds-gold-3);
}
body.ds-unified .ph-edge {
    background: linear-gradient(90deg,
        transparent 5%, var(--ds-gold-3) 30%,
        var(--ds-gold-2) 50%,
        var(--ds-gold-3) 70%, transparent 95%);
}
body.ds-unified .ph-avatar-lg:hover {
    border-color: var(--ds-gold-3);
}
body.ds-unified .ph-sw-ember {
    background: linear-gradient(135deg, var(--ds-gold-3), var(--ds-gold-2));
}


/* ─── § 104  SLAYER EXTRAS ────────────────────────────────── */

body.ds-unified .slayer-btn {
    font-family: var(--ds-font-body) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: var(--ds-surface-1);
    border: var(--ds-border-accent);
    border-radius: 3px;
    color: var(--ds-text);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
body.ds-unified .slayer-btn:hover {
    border-color: var(--ds-gold-3);
    background: var(--ds-surface-raised);
}
body.ds-unified .slayer-btn-primary {
    color: #1b1308;
    background: linear-gradient(180deg,
        var(--ds-gold-2), #d8b65a 45%, #a07828);
    border: 1px solid #000;
    text-shadow: 0 1px 0 rgba(255,240,180,0.5);
}
body.ds-unified .slayer-btn-primary:hover {
    filter: brightness(1.08);
}
body.ds-unified .slayer-tab {
    font-family: var(--ds-font-body) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background: var(--ds-shell-tab);
    border: 1px solid rgba(0,0,0,0.4);
    transition: background 0.12s, color 0.12s;
}
body.ds-unified .slayer-tab:hover {
    background: var(--ds-shell-tab-hover);
    color: var(--ds-text);
}
body.ds-unified .slayer-tab.active {
    background: var(--ds-shell-tab-active);
    color: var(--ds-gold-2);
    border-bottom-color: var(--ds-gold-3);
}
body.ds-unified .slayer-master-card {
    background: var(--ds-surface-2);
    border: var(--ds-border-accent);
    border-radius: 3px;
    transition: border-color 0.12s;
}
body.ds-unified .slayer-master-card:hover .smc-portrait {
    border-color: var(--ds-gold-3);
}
body.ds-unified .smc-name {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .method-row.slayer-task-target {
    border-left: 3px solid var(--ds-gold-3);
}


/* ─── § 105  RAID INTERIOR EXTRAS ─────────────────────────── */

body.ds-unified .raid-hub-title {
    font-family: var(--ds-font-display) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .raid-hub-label {
    color: var(--ds-text-muted);
    font-size: 11px;
}
body.ds-unified .raid-hub-req {
    color: var(--ds-text-faint);
    font-size: 10px;
}
body.ds-unified .raid-weapon-name {
    color: var(--ds-text-muted);
    font-size: 9px;
}
body.ds-unified .raid-weapon-count {
    color: var(--ds-text-faint);
    font-size: 8px;
}
body.ds-unified .raid-lineup-icon {
    border-color: rgba(201,162,74,0.15);
    background: rgba(0,0,0,0.3);
}
body.ds-unified .raid-lineup-label {
    color: var(--ds-text-faint);
    font-size: 7px;
}
body.ds-unified .raid-eq-slot {
    background: var(--ds-surface-3);
    border: 2px solid rgba(201,162,74,0.15);
    border-radius: 3px;
    box-shadow: var(--ds-shadow-recessed);
}
body.ds-unified .raid-eq-slot:hover {
    border-color: rgba(201,162,74,0.35);
}
body.ds-unified .raid-eq-slot.filled {
    border-color: rgba(201,162,74,0.25);
    background: var(--ds-surface-2);
}
body.ds-unified .raid-eq-slot.weapon-slot {
    border-color: var(--ds-gold-3);
    box-shadow: 0 0 4px rgba(201,162,74,0.2);
}
body.ds-unified .raid-action-btn:hover {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}
body.ds-unified .raid-action-clear {
    color: var(--ds-red);
}
body.ds-unified .raid-action-clear:hover {
    border-color: rgba(255,128,128,0.4);
    color: var(--ds-red);
}
body.ds-unified .raid-cancel-repeat {
    background: rgba(180,40,30,0.1);
    border: 1px solid rgba(180,40,30,0.25);
    color: var(--ds-red);
}
body.ds-unified .raid-weapon-style {
    color: var(--ds-gold-2);
}
body.ds-unified .raid-adv-lo-btn.active,
body.ds-unified .raid-adv-style-btn.active {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}
body.ds-unified .raid-prayer-opt:hover {
    border-color: var(--ds-gold-3);
}
body.ds-unified .raid-prayer-opt.active {
    border-color: var(--ds-gold-3);
    color: var(--ds-gold-2);
}
body.ds-unified .raid-weapon-option:hover,
body.ds-unified .raid-weapon-option.selected {
    border-color: var(--ds-gold-3);
}
body.ds-unified .raid-picker-section-head {
    font-family: var(--ds-font-body) !important;
    color: var(--ds-gold-2);
}
body.ds-unified .raid-ad.targeted {
    border-color: var(--ds-gold-3);
}


/* ─── § 106  PROGRESS FILLS / HUB PATCHES ─────────────────── */

body.ds-unified .hub-patch-fill {
    background: linear-gradient(90deg, var(--ds-gold-3), var(--ds-gold-2));
    box-shadow: 0 0 4px rgba(255,200,80,0.3);
}
body.ds-unified .sto-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3));
    box-shadow: 0 0 4px rgba(255,200,80,0.2);
}
body.ds-unified .sto-header {
    background: var(--ds-surface-0) !important;
    border-bottom-color: var(--ds-border-subtle) !important;
}
body.ds-unified .sto-action-btn {
    font-family: var(--ds-font-body) !important;
    border-color: var(--ds-border-subtle) !important;
    background: var(--ds-surface-1) !important;
    color: var(--ds-text) !important;
}
body.ds-unified .sto-action-btn:hover {
    border-color: var(--ds-gold-3) !important;
}


/* ─── § 107  EP LOOT SELECTION / BG POS SAVE ──────────────── */

body.ds-unified .ep-cz-loot-item[role="button"]:focus-visible {
    border-color: var(--ds-gold-3);
    box-shadow: 0 0 0 2px rgba(201,162,74,0.25);
}
body.ds-unified .ep-cz-loot-item--selected {
    border-color: var(--ds-gold-3);
}
body.ds-unified .ep-bg-pos-save {
    background: linear-gradient(180deg, var(--ds-gold), var(--ds-gold-3));
}


/* ─── § 108  GLOBAL SELECT STYLING ────────────────────────── */

body.ds-unified select {
    font-family: var(--ds-font-body);
    font-size: 12px;
    color: var(--ds-text);
    background: var(--ds-surface-3);
    border: var(--ds-border-frame);
    border-radius: 2px;
    box-shadow: var(--ds-shadow-recessed);
    padding: 4px 8px;
}
body.ds-unified select:focus {
    border-color: var(--ds-gold-3);
    outline: none;
    box-shadow: var(--ds-shadow-recessed), 0 0 6px rgba(201,162,74,0.15);
}


/* ─── § 109  GLOBAL CHECKBOX / RANGE ACCENT ───────────────── */

body.ds-unified input[type="checkbox"] {
    accent-color: var(--ds-gold-3);
}
body.ds-unified input[type="range"] {
    accent-color: var(--ds-gold-3);
}


/* ─── § 110  SKILL HUB PSEUDO + REMAINING GRADIENTS ──────── */

body.ds-unified .skill-hub::before {
    background: linear-gradient(90deg, transparent, var(--ds-gold-3), transparent);
}

/* Session stats fill in skill hub */
body.ds-unified .session-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3));
}

/* Prestige completion bar */
body.ds-unified .p-bar-fill {
    background: linear-gradient(90deg, var(--ds-gold-4), var(--ds-gold-3), var(--ds-gold-2));
    box-shadow: 0 0 6px rgba(255,200,80,0.3);
}

/* Season reward claimed state gradients */
body.ds-unified .ep-node.claimed .ep-node-ico {
    border-color: var(--ds-gold-3);
}


/* ─── END ─────────────────────────────────────────────────── */