/* --- CORE VISUAL VARIABLES --- */
:root { 
    --pip-color: #28ff28; 
    --pip-bg: #080c0b;
    --pip-bg-2: #0c1210;
    --pip-bg-3: #060908;
    --pip-border: #1a3a1a; 
    --danger-red: #ff4444; 
    --font-main: 'Courier New', Courier, monospace;
    --glow-sm: 0 0 6px rgba(40,255,40,0.25);
    --glow-md: 0 0 14px rgba(40,255,40,0.2);
    --glow-lg: 0 0 28px rgba(40,255,40,0.15);
    --card-bg: rgba(255,255,255,0.018);
    --card-border: rgba(255,255,255,0.07);
    --accent-gold: #ffd060;
    --accent-blue: #60d0ff;
    --accent-purple: #c0a0ff;
    /* Layout tokens */
    --left-w: 230px;
    --right-w: 260px;
    --hdr-h: 46px;
    --panel-gap: 0px;
    --pip-rgb: 40,255,40;
    /* Transition speed tokens */
    --t-fast: 0.12s;
    --t-base: 0.15s;
    --t-slow: 0.2s;
    --t-modal: 0.3s;
    /* Border-radius tokens */
    --r-sm: 2px;
    --r-md: 3px;
    --r-lg: 4px;
}

/* --- THEME OVERRIDES --- */
body.theme-cw:not(.mode-hc) { --pip-color: #28ff28; --pip-border: #1a3a1a; --pip-bg: #04090a; --pip-bg-2: #071010; --pip-bg-3: #060908; --pip-rgb: 40, 255, 40; --tc-r: 40; --tc-g: 255; --tc-b: 40; --glow-sm: 0 0 6px rgba(40,255,40,0.25); }
body.theme-mw:not(.mode-hc) { --pip-color: #ffb642; --pip-border: #3a2a1a; --pip-bg: #090701; --pip-bg-2: #100e05; --pip-bg-3: #0a0803; --pip-rgb: 255, 182, 66; --tc-r: 255; --tc-g: 182; --tc-b: 66; --glow-sm: 0 0 6px rgba(255,182,66,0.25); }

/* ═══════════════════════════════════════════════
   HARDERCORE — SYSTEM MELTDOWN MODE
═══════════════════════════════════════════════ */
body.mode-hc { 
    --pip-color: var(--danger-red); 
    --pip-border: #800; --pip-bg: #000; background-color: #000;
    animation: hcBodyPulse 5s infinite ease-in-out;
    overflow: hidden;
}

/* Slow blood-red vignette pulse */
@keyframes hcBodyPulse {
    0%, 100% { box-shadow: inset 0 0 60px rgba(255,0,0,0); }
    45%, 55% { box-shadow: inset 0 0 100px rgba(200,0,0,0.22); }
}

/* Horizontal scanline flash that rips across the screen */
body.mode-hc::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255,0,0,0.018) 3px,
        rgba(255,0,0,0.018) 4px
    );
}

/* HC banner — alarming and animated */
.hc-alert-bar { 
    display: none;
    justify-content: center; align-items: center; gap: 14px;
    border: 1px solid var(--danger-red); 
    background: rgba(140, 0, 0, 0.3);
    padding: 6px 14px; margin-bottom: 8px;
    font-weight: bold; letter-spacing: 4px; font-size: 0.88rem;
    text-shadow: 0 0 8px rgba(255,0,0,0.8);
    animation: hcBannerFlicker 2.5s infinite, hcBannerGlow 3s infinite alternate;
    position: relative; overflow: hidden;
}
.hc-alert-bar::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,0,0,0.08) 50%, transparent 100%);
    animation: hcBannerSweep 2s linear infinite;
}
@keyframes hcBannerSweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
@keyframes hcBannerFlicker {
    0%, 95%, 100% { opacity: 1; }
    96%           { opacity: 0.3; }
    97%           { opacity: 0.9; }
    98%           { opacity: 0.2; }
    99%           { opacity: 1; }
}
@keyframes hcBannerGlow {
    from { box-shadow: 0 0 6px rgba(255,0,0,0.4), inset 0 0 10px rgba(255,0,0,0.1); }
    to   { box-shadow: 0 0 18px rgba(255,0,0,0.7), inset 0 0 20px rgba(255,0,0,0.2); }
}

/* Glitch effect on hc banner text itself */
body.mode-hc .hc-alert-bar {
    animation: hcBannerFlicker 2.5s infinite, hcBannerGlow 3s infinite alternate;
}


/* HC mode — sections get a red-tinted border pulse */
body.mode-hc section {
    animation: hcSectionFlicker 9s infinite;
}
@keyframes hcSectionFlicker {
    0%, 85%, 100%  { border-color: #800; }
    86%  { border-color: rgba(255,0,0,0.8); box-shadow: 0 0 6px rgba(255,0,0,0.2); }
    87%  { border-color: #800; }
    88%  { border-color: rgba(255,80,0,0.5); }
    89%  { border-color: #800; }
}

/* HC toggle button gets angry */
body.mode-hc #m-hc {
    animation: hcBtnPulse 1.8s infinite;
}
@keyframes hcBtnPulse {
    0%, 100% { box-shadow: 0 0 8px var(--danger-red); }
    50%      { box-shadow: 0 0 20px var(--danger-red), 0 0 40px rgba(255,0,0,0.3); }
}

/* Sticky note gets corrupted look in HC */
body.mode-hc .sticky-note:not(.sticky-falling) {
    background: #111 !important;
    color: #ff4444 !important;
    border: 1px solid rgba(255,0,0,0.5) !important;
    box-shadow: 0 0 12px rgba(255,0,0,0.2), 2px 2px 0 rgba(255,0,0,0.15) !important;
    animation: hcNoteFlicker 4s infinite;
}
@keyframes hcNoteFlicker {
    0%, 90%, 100% { opacity: 1; }
    91% { opacity: 0.6; }
    92% { opacity: 1; }
    93% { opacity: 0.4; }
    94% { opacity: 1; }
}

/* --- GLOBAL STYLING --- */
* { text-transform: uppercase !important; box-sizing: border-box; }

body { 
    background-color: var(--pip-bg);
    background-image:
        radial-gradient(circle at 20% 50%, rgba(var(--pip-rgb),0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--pip-rgb),0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.6) 0%, transparent 70%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.06) 3px,
            rgba(0,0,0,0.06) 4px
        );
    color: var(--pip-color); 
    font-family: var(--font-main); margin: 0; 
    overflow: hidden; height: 100vh; font-size: 17px; 
}

/* --- INPUTS & BUTTONS --- */
input, button, select, textarea { 
    font-family: var(--font-main) !important; 
    background: transparent; color: var(--pip-color);
    border: none; border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: all var(--t-base) ease;
}
input:focus, textarea:focus, select:focus { 
    outline: none; border-bottom-color: var(--pip-color); 
    background: rgba(255,255,255,0.03);
}
select option { background: #000; color: var(--pip-color); }

/* --- LAYOUT WRAPPER --- */
.wrapper { 
    display: grid; 
    grid-template-columns: var(--left-w) 1fr var(--right-w); 
    grid-template-rows: var(--hdr-h) 1fr; 
    height: 100vh; 
    gap: 0; 
    padding: 0; 
}

/* --- TABLET (≤1000px) --- */
@media (max-width: 1000px) {
    body { overflow-y: auto; height: auto; }
    body.mode-hc { overflow-y: auto; overflow-x: hidden; }
    .wrapper { display: flex; flex-direction: column; height: auto; padding: 10px; gap: 10px; }
    section { height: auto; max-height: none; overflow: visible; }
    .scroll-v { height: auto; max-height: 600px; overflow-y: auto; }
    .ov-grid, .gear-split-grid { grid-template-columns: 1fr; }
    header { grid-column: auto; }
}

/* --- MOBILE (≤768px) --- */
@media (max-width: 768px) {
    body { font-size: 17px; }

    /* Header */
    header { padding: 10px; }
    .header-controls { flex-direction: column; align-items: stretch; gap: 10px; }
    .os-title { font-size: 1rem; letter-spacing: 1px; text-align: center; }
    .settings-block { flex-direction: column; gap: 8px; justify-content: flex-start; }
    .toggle-group { flex-wrap: wrap; width: 100%; }
    .toggle-group button { flex: 1; min-width: 70px; padding: 8px 4px; font-size: 0.75rem; }
    .nuke-btn { align-self: flex-end; }

    /* Tab nav — scrollable row */
    .tab-nav { 
        display: flex; flex-wrap: nowrap; overflow-x: auto; 
        gap: 4px; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
    }
    .tab-nav button { 
        flex-shrink: 0; min-width: 70px; padding: 8px 6px; 
        font-size: 0.75rem; white-space: nowrap;
    }

    /* Prevent iOS zoom on focus — all inputs must be ≥16px */
    input, select, textarea { font-size: 16px !important; }
    .prog-name-input { font-size: 16px !important; }
    .prog-notes-input { font-size: 15px !important; }
    .pip-search { font-size: 16px !important; }
    .ac-item-name { font-size: 16px !important; }
    .ac-item-req { font-size: 12px !important; }

    /* Sections */
    section { padding: 10px; }
    .scroll-v { max-height: none; }

    /* SPECIAL — mobile override only for non-compact rows */
    .special-row:not(.special-compact-grid .special-row) { grid-template-columns: 1fr 90px; }
    .special-btn { width: 32px; height: 32px; font-size: 1.25rem; }

    /* Grid → single column */
    .grid-tidy { grid-template-columns: 1fr; }
    .ov-grid, .gear-split-grid { grid-template-columns: 1fr; }

    /* Progression cards */
    .prog-card-header { flex-wrap: wrap; gap: 6px; }
    .prog-name-input { font-size: 16px !important; }
    .perk-desc { font-size: 0.95rem; }
    .perk-card h3 { font-size: 1.05rem; }

    /* IT modal */
    .special-picker-grid { grid-template-columns: repeat(4, 1fr); }
    .modal-box { padding: 16px; }

    /* Sort buttons */
    .perks-controls { gap: 4px; }
    .sort-btn { font-size: 0.75rem; padding: 6px 8px; }

    /* Autocomplete — full width, larger tap targets */
    .prog-ac-item { padding: 12px; }

    /* Warning text */
    .prog-req-warning { font-size: 0.85rem; }
    .req-warn-item { font-size: 0.85rem; }

    /* Prog rank badge */
    .prog-rank-badge { font-size: 0.72rem; }
    .lvl-tag { font-size: 0.78rem; }
}

header { 
    grid-column: 1 / span 3;
    height: var(--hdr-h);
    display: flex;
    align-items: center;
    padding: 0;
    background: var(--pip-bg-3);
    border-bottom: 1px solid var(--pip-border);
    position: relative;
    z-index: 10;
    overflow: hidden;
}
header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 120px,
        rgba(var(--pip-rgb),0.015) 120px,
        rgba(var(--pip-rgb),0.015) 121px
    );
    pointer-events: none;
}

.hc-alert-bar { 
    display: none; justify-content: center; border: 1px solid var(--danger-red); 
    background: rgba(128, 0, 0, 0.25); padding: 5px; margin-bottom: 8px; 
    animation: blink 1s infinite; font-weight: bold; letter-spacing: 3px; font-size: 0.85rem;
}

.header-controls { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    padding: 0 14px; 
    gap: 0;
}
.os-title { 
    font-weight: bold; 
    font-size: 0.85rem; 
    letter-spacing: 3px; 
    flex-shrink: 0;
    text-shadow: var(--glow-sm);
    padding: 0 18px 0 6px;
    border-right: 1px solid var(--pip-border);
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.os-title-sub {
    font-size: 0.72rem;
    opacity: 0.45;
    letter-spacing: 2px;
    margin-left: 8px;
}
.settings-block { 
    display: flex; 
    gap: 0; 
    align-items: stretch; 
    flex-grow: 1; 
    justify-content: flex-end;
    height: 100%;
}
.toggle-group { 
    display: flex; 
    border-left: 1px solid var(--pip-border);
    overflow: hidden; 
}
.toggle-group button { 
    border: none; 
    border-right: 1px solid var(--pip-border);
    padding: 0 16px; 
    cursor: pointer; 
    font-size: 0.78rem; 
    color: rgba(255,255,255,0.35); 
    letter-spacing: 1.5px;
    background: transparent;
    height: 100%;
    transition: all var(--t-base);
}
.toggle-group button:last-child { border-right: none; }
.toggle-group button.active { 
    background: var(--pip-color) !important; 
    color: #000 !important; 
    font-weight: bold;
}
.toggle-group button:not(.active):hover { 
    color: var(--pip-color); 
    background: rgba(var(--pip-rgb),0.06) !important; 
}

.nuke-btn { 
    border: none !important;
    border-left: 1px solid rgba(255,80,80,0.3) !important; 
    color: rgba(255,80,80,0.5); 
    padding: 0 16px; 
    cursor: pointer; 
    font-size: 0.9rem; 
    transition: all var(--t-slow); 
    background: transparent;
    height: 100%;
}
.nuke-btn:hover { 
    background: rgba(255,0,0,0.08) !important; 
    color: #ff4444; 
    border-left-color: rgba(255,80,80,0.6) !important;
}

section { 
    border: none;
    border-right: 1px solid var(--pip-border);
    background: var(--pip-bg);
    padding: 0;
    overflow: hidden; 
    display: flex; 
    flex-direction: column;
}
.scroll-v { overflow-y: auto; flex-grow: 1; padding-right: 4px; }
.scroll-v::-webkit-scrollbar { width: 2px; }
.scroll-v::-webkit-scrollbar-track { background: transparent; }
.scroll-v::-webkit-scrollbar-thumb { background: var(--pip-border); }
.scroll-v::-webkit-scrollbar-thumb:hover { background: var(--pip-color); }

/* ═══ PANEL IDENTITIES ═══════════════════════════════════════════════ */

.main-panel {
    background: var(--pip-bg);
    border-right: 1px solid var(--pip-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.main-panel .tab-content.scroll-v {
    padding: 14px 16px;
}

.right-panel {
    background: var(--pip-bg-3);
    border-left: 1px solid var(--pip-border);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.right-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(var(--pip-rgb),0.018) 28px,
            rgba(var(--pip-rgb),0.018) 29px
        );
    pointer-events: none;
}
.right-panel .scroll-v {
    padding: 12px 14px;
    position: relative;
    z-index: 1;
}
.right-panel h2 {
    padding: 12px 14px 4px;
    margin: 0 0 0;
    border-bottom: 1px solid var(--pip-border);
    background: rgba(var(--pip-rgb),0.02);
    position: relative;
    z-index: 1;
}
.right-panel .grid-tidy {
    margin-bottom: 10px;
}
.right-panel textarea#user-notes {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--pip-border);
    border-bottom: 1px solid var(--pip-border);
    padding: 10px;
    font-size: 0.82rem;
    line-height: 1.7;
    letter-spacing: 0.5px;
    resize: none;
    flex: 1;
    min-height: 100px;
    width: 100%;
    color: rgba(var(--pip-rgb),0.7);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.right-panel textarea#user-notes:focus {
    border-color: rgba(var(--pip-rgb),0.4);
    background: rgba(0,0,0,0.3);
    color: var(--pip-color);
}
.right-panel .action-btn {
    font-size: 0.72rem;
    padding: 5px 4px;
    letter-spacing: 1px;
}

/* --- COMPONENTS --- */
.header-row { 
    display: flex; justify-content: space-between; align-items: center; 
    background: rgba(255,255,255,0.04); margin: 12px 0 8px; padding: 6px 12px; 
    font-weight: bold; border: 1px solid var(--pip-border); 
    cursor: pointer; transition: 0.15s; user-select: none;
}
.header-row:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.header-row.completed { background: var(--pip-color); color: black; box-shadow: 0 0 12px var(--pip-color); }
.header-row h2 { background: none; color: inherit; margin: 0; padding: 0; border: none; font-size: 0.9rem; pointer-events: none; }

h2 { 
    color: var(--pip-color); 
    font-size: 0.80rem;
    text-align: left; 
    margin: 14px 0 8px; 
    padding: 4px 0;
    font-weight: bold; 
    letter-spacing: 3px;
    border-bottom: 1px solid var(--pip-border);
    opacity: 0.8;
}
h2::before {
    content: '// ';
    opacity: 0.45;
}

.grid-tidy { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.grid-item { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid rgba(255,255,255,0.05); font-size: 0.88rem; }
.bobble-name { font-weight: 700; flex-shrink: 0; }
.bobble-loc { font-size: 0.78rem; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-item span a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--pip-color); }
.grid-item span a:hover { background: var(--pip-color); color: black; }
.locked { opacity: 0.3; pointer-events: none; }

/* Unique weapon add-to-loadout button */
.uni-add-btn {
    flex-shrink: 0; width: 20px; height: 20px; padding: 0;
    border: 1px solid var(--pip-border) !important;
    border-bottom: 1px solid var(--pip-border) !important;
    color: var(--pip-color); background: transparent;
    font-size: 1rem; font-weight: bold; line-height: 1;
    cursor: pointer; opacity: 0.45; transition: opacity 0.15s, background 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.uni-add-btn:hover { opacity: 1; background: var(--pip-color) !important; color: black; }

.tab-nav { 
    display: flex; 
    gap: 0; 
    flex-wrap: nowrap; 
    overflow-x: auto;
    border-bottom: 1px solid var(--pip-border);
    background: var(--pip-bg-3);
    flex-shrink: 0;
    padding: 0 8px;
}
.tab-nav::-webkit-scrollbar { height: 0; }
.tab-nav button { 
    flex-shrink: 0;
    padding: 0 12px; 
    height: 38px;
    background: transparent; 
    color: rgba(255,255,255,0.3); 
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer; 
    font-size: 0.75rem; 
    font-weight: bold; 
    letter-spacing: 1.5px;
    transition: all var(--t-base);
    position: relative;
    white-space: nowrap;
}
.tab-nav button:hover:not(.active) { 
    color: rgba(255,255,255,0.7); 
    background: rgba(255,255,255,0.03);
}
.tab-nav button.active { 
    color: var(--pip-color);
    background: transparent;
    border-bottom: 2px solid var(--pip-color);
    text-shadow: var(--glow-sm);
}

/* --- OVERVIEW & GRID UTILITIES --- */
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gear-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

@media (max-width: 1000px) { .ov-grid, .gear-split-grid { grid-template-columns: 1fr; } }

.ov-card { 
    border: 1px solid var(--pip-border); padding: 10px 12px; 
    background: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.03); margin-bottom: 8px;
    border-left: 3px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.25);
}
.ov-sub { 
    font-weight: bold; border-bottom: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.15); 
    margin-bottom: 6px; font-size: 0.85rem; display: block; 
    letter-spacing: 2px; color: var(--pip-color); opacity: 0.7;
    padding-bottom: 5px; text-align: center;
}
.ov-entry { font-size: 0.9rem; padding: 3px 2px; display: flex; justify-content: space-between; align-items: center; color: var(--text-mid); line-height: 1.4; overflow-wrap: break-word; word-break: break-word; }
.ov-entry-clickable {
    cursor: pointer;
    border-radius: var(--r-sm);
    padding: 2px 4px;
    margin: 0 -4px;
    transition: background var(--t-fast);
}
.ov-entry-clickable:hover {
    background: rgba(255,255,255,0.07);
}
.ov-entry-clickable:hover > span:first-child {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- ACTIVE EFFECTS --- */
.ae-group { margin-bottom: 8px; }
.ae-group-header { font-size: 0.68rem; font-weight: bold; color: var(--text-mid); letter-spacing: 0.5px; margin-bottom: 3px; opacity: 0.6; }
.ae-entry { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; padding: 2px 4px; border-radius: var(--r-sm); }
.ae-entry.ae-pos { color: #80d8ff; }
.ae-entry.ae-neg { color: #ff8070; }
.ae-source { opacity: 0.6; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-target { font-weight: bold; min-width: 32px; text-align: right; }
.ae-val { font-weight: bold; font-family: monospace; min-width: 24px; text-align: right; }

/* --- PROGRESSION TAB --- */
.prog-grid { display: flex; flex-direction: column; gap: 6px; }

.prog-row {
    position: relative;
    background: rgba(40,255,40,0.018);
    border: 1px solid rgba(40,255,40,0.1);
    border-left: 3px solid rgba(40,255,40,0.15);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prog-row.has-perk {
    border-left-color: var(--pip-color);
    background: rgba(255,255,255,0.035);
}
.prog-row:focus-within {
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 0 10px rgba(40,255,40,0.06);
}

/* Top bar: level tag + rank badge + clear btn */
.prog-card-header {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px 0;
}
.lvl-tag {
    font-size: 0.85rem; font-weight: bold; letter-spacing: 1px;
    background: rgba(40,255,40,0.12); padding: 3px 8px;
    color: var(--pip-color); text-align: center;
}
.lvl-tag.is-trait { background: rgba(255,200,0,0.15); color: #ffd700; }
.prog-rank-badge {
    font-size: 0.75rem; font-weight: bold; padding: 2px 6px;
    background: var(--pip-color); color: black;
    display: none;
}
.prog-rank-badge.multi { animation: rankGlow 2s infinite ease-in-out; }
.prog-clear-btn {
    margin-left: auto; font-size: 0.80rem; border: 1px solid rgba(255,0,0,0.4);
    color: rgba(255,80,80,0.8); padding: 2px 8px; cursor: pointer;
    background: rgba(255,0,0,0.05); display: none;
    border-bottom: 1px solid rgba(255,0,0,0.4) !important;
}
.prog-clear-btn:hover { background: rgba(255,0,0,0.2) !important; color: #ff4444 !important; }

/* Name input row */
.prog-input-wrap {
    position: relative;
    padding: 6px 10px 2px;
}
.prog-name-input {
    width: 100%; font-size: 1.05rem !important; font-weight: bold !important;
    color: var(--pip-color) !important; border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding: 2px 0 4px !important; background: transparent !important;
    letter-spacing: 0.5px;
}
.prog-name-input:focus {
    border-bottom-color: var(--pip-color) !important;
    background: transparent !important;
}
.prog-name-input::placeholder { color: rgba(255,255,255,0.2) !important; font-weight: normal !important; font-size: 0.9rem !important; }

/* Autocomplete dropdown */
.prog-ac-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 500;
    background: #0a120a; border: 1px solid var(--pip-color);
    border-top: none; max-height: 220px; overflow-y: auto;
    display: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
}
.prog-ac-item {
    padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-direction: column; gap: 2px;
}
.prog-ac-item:hover, .prog-ac-item.ac-focused {
    background: var(--pip-color); color: black;
}
.prog-ac-item:hover .ac-item-req,
.prog-ac-item.ac-focused .ac-item-req { color: rgba(0,0,0,0.6); }
.ac-item-name { font-size: 0.95rem; font-weight: bold; }
.ac-item-req { font-size: 0.78rem; opacity: 0.65; }
.ac-no-results { padding: 8px 12px; font-size: 0.9rem; opacity: 0.4; }

/* Perk info block (shown when perk selected) */
.prog-perk-info {
    margin: 4px 10px 0;
    padding: 8px 36px 8px 10px;
    background: rgba(0,0,0,0.2);
    border-left: 2px solid rgba(255,255,255,0.07);
    display: none;
    position: relative;
}

/* Requirement warning */
.prog-req-warning {
    display: none;
    background: rgba(255, 60, 60, 0.07);
    border: 1px solid rgba(255, 80, 80, 0.3);
    border-left: 3px solid #ff4444;
    padding: 5px 8px;
    margin-bottom: 6px;
    line-height: 1.6;
}
.req-warn-label {
    font-size: 0.75rem; font-weight: bold;
    color: #ff6060; letter-spacing: 0.5px; margin-bottom: 2px;
}
.req-warn-item {
    font-size: 0.72rem; color: #ff9090;
    padding-left: 6px; line-height: 1.5;
}
.req-warn-item::before { content: "— "; }

.prog-row.req-fail { border-left-color: #ff4444 !important; }
.prog-row.req-fail .prog-name-input { color: #ff9090 !important; }

.prog-perk-req {
    font-size: 0.83rem; font-weight: bold;
    color: var(--accent-gold); margin-bottom: 5px; letter-spacing: 0.3px; opacity: 0.8;
}
.prog-perk-desc {
    font-size: 1.0rem; line-height: 1.55;
    color: var(--pip-color); opacity: 0.72;
}

/* Zoom button inside prog perk info */
.perk-zoom-btn {
    position: absolute; top: 6px; right: 8px;
    font-size: 0.75rem; padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.3);
    cursor: pointer; background: transparent;
    letter-spacing: 1px; transition: all var(--t-base);
}
.perk-zoom-btn:hover { color: var(--pip-color) !important; border-color: var(--pip-color) !important; border-bottom-color: var(--pip-color) !important; }

/* Notes input */
.prog-notes-input {
    display: block; width: 100%;
    font-size: 0.88rem !important; color: rgba(255,255,255,0.3) !important;
    border: none !important; border-top: 1px solid rgba(255,255,255,0.04) !important;
    padding: 5px 10px !important; background: transparent !important;
    font-style: italic;
}
.prog-notes-input:focus { color: rgba(255,255,255,0.6) !important; }
.prog-notes-input::placeholder { color: rgba(255,255,255,0.15) !important; }

/* --- ALL PERKS TAB --- */
.perks-controls { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.perks-sort-group { display: flex; gap: 3px; }
.sort-btn { 
    padding: 5px 10px; border: 1px solid rgba(255,255,255,0.1); 
    color: rgba(255,255,255,0.45); cursor: pointer; font-size: 0.82rem; font-weight: bold;
    background: rgba(255,255,255,0.02); letter-spacing: 1px; transition: all var(--t-base);
}
.sort-btn.active { background: var(--pip-color); color: black; border-color: var(--pip-color); }
.sort-btn:hover:not(.active) { background: rgba(255,255,255,0.05); color: var(--pip-color); }

#all-perks-list { display: flex; flex-direction: column; gap: 8px; }
.perk-card { 
    border: 1px solid rgba(255,255,255,0.07); padding: 12px 14px; 
    background: rgba(255,255,255,0.02); display: flex; flex-direction: column;
    border-left: 3px solid rgba(255,255,255,0.1); transition: border-left-color 0.15s;
}
.perk-card:hover { border-left-color: var(--pip-color); }
.perk-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.perk-card h3 { margin: 0; font-size: 0.95rem; flex: 1; border: none; padding: 0; }
.perk-rank-badge {
    background: var(--pip-color); color: black; 
    padding: 2px 6px; font-size: 0.78rem; font-weight: bold;
    white-space: nowrap; flex-shrink: 0;
}
.perk-rank-badge.multi { animation: rankGlow 2.5s infinite ease-in-out; }
@keyframes rankGlow {
    0%, 100% { box-shadow: 0 0 3px var(--pip-color); }
    50% { box-shadow: 0 0 10px var(--pip-color), 0 0 18px var(--pip-color); }
}
.perk-req { font-size: 0.9rem; margin-bottom: 7px; font-weight: bold; color: var(--accent-gold); opacity: 0.75; overflow-wrap: break-word; word-break: break-word; }
.perk-desc { font-size: 1.0rem; line-height: 1.55; margin-bottom: 10px; flex-grow: 1; opacity: 0.78; overflow-wrap: break-word; word-break: break-word; }
.perk-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.perk-card .action-btn { margin-bottom: 0; font-size: 0.8rem; width: auto; align-self: flex-start; padding: 5px 12px; height: auto; flex: 0 0 auto; }
.perk-card .perk-wishlist-action { min-width: 110px; }
.perk-zoom-action, .perk-graph-action { 
    font-size: 0.82rem !important;
}

/* --- SKILLS PANEL --- */
.skills-header-row {
    display: flex; align-items: center; gap: 8px; margin: 15px 0 4px;
}
.skills-header-row h2 { margin: 0; }

.skill-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.skill-row {
    display: grid; grid-template-columns: 1fr 140px 35px;
    align-items: center; gap: 6px;
    padding: 4px 4px; border-radius: var(--r-sm);
    font-size: 0.85rem; letter-spacing: 0.3px;
    transition: background 0.15s;
}
.skill-row-tagged {
    background: rgba(255,215,0,0.07);
    border-left: 2px solid rgba(255,215,0,0.6);
    padding-left: 5px;
}
.skill-row-name {
    color: var(--pip-color); 
    font-size: 0.82rem;
}
.skill-row-tagged .skill-row-name { color: #ffd700; font-weight: bold; }
.skill-row-bar {
    display: flex;
    height: 5px; background: rgba(255,255,255,0.08);
    overflow: visible;
    width: 100%; /* Take full grid column width */
    min-width: 0;
}
.skill-row-fill {
    flex-shrink: 0; height: 100%;
    background: var(--pip-color); transition: width 0.25s ease;
}
.skill-row-tagged .skill-row-fill { background: #ffd700; }
.skill-row-fill.skill-mod-pos { background: #40c8e0 !important; }
.skill-row-fill.skill-mod-neg { background: #ff3c28 !important; }

/* ── 5-tier brightness system — mirrors SPECIAL bars ── */
/* val = 100 — pulsing glow (same as SPECIAL at 10)      */
@keyframes spec-bar-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(var(--pip-rgb),0.6), 0 0 12px rgba(var(--pip-rgb),0.35); opacity: 1; }
    50%       { box-shadow: 0 0 16px rgba(var(--pip-rgb),0.9), 0 0 32px rgba(var(--pip-rgb),0.5); opacity: 0.9; }
}
.skill-row-fill.bar-tier-max {
    background: var(--pip-color) !important;
    animation: spec-bar-pulse 1.4s ease-in-out infinite;
}
/* val ≥ 70 — bright warm glow */
.skill-row-fill.bar-tier-high {
    background: rgba(var(--pip-rgb),1) !important;
    box-shadow: 0 0 8px rgba(var(--pip-rgb),0.5);
    opacity: 0.95;
}
/* val ≥ 50 — solid mid-brightness */
.skill-row-fill.bar-tier-mid {
    background: rgba(var(--pip-rgb),0.65) !important;
    opacity: 0.80;
}
/* val ≥ 30 — dimmed */
.skill-row-fill.bar-tier-low {
    background: rgba(var(--pip-rgb),0.45) !important;
    opacity: 0.65;
}
/* val < 30 — very dim (but still has color!) */
.skill-row-fill.bar-tier-dim {
    background: rgba(var(--pip-rgb),0.35) !important;
    opacity: 0.55;
}
.skill-row-val {
    text-align: right; font-weight: bold; font-size: 0.88rem;
    color: var(--pip-color);
}
.skill-row-tagged .skill-row-val { color: #ffd700; }

/* 4th Tag skill (from Tag! perk) — distinct amber/orange style */
.skill-row-tag4 {
    background: rgba(255,160,40,0.09) !important;
    border-left: 2px solid rgba(255,160,40,0.7) !important;
}
.skill-row-tag4 .skill-row-name { color: #ffaa33 !important; font-weight: bold; }
.skill-row-tag4 .skill-row-fill { background: #ffaa33 !important; }
.skill-row-tag4 .skill-row-val { color: #ffaa33 !important; }

/* Tag +15 badge */
.sdelta-tag {
    background: rgba(255,215,0,0.18);
    border: 1px solid rgba(255,215,0,0.5);
    color: #ffd700;
}
/* 4th tag (Tag! perk) +15 badge */
.sdelta-tag4 {
    background: rgba(255,160,40,0.18);
    border: 1px solid rgba(255,160,40,0.6);
    color: #ffaa33;
}

/* Level-up button */
.lvlup-open-btn {
    display: flex; flex-direction: column; align-items: center;
    border: 1px solid var(--pip-color); padding: 4px 10px;
    cursor: pointer; font-size: 0.85rem; font-weight: bold;
    letter-spacing: 0.5px; gap: 1px; white-space: nowrap;
    transition: all var(--t-slow);
}
.lvlup-btn-ready {
    background: rgba(40,255,40,0.08);
    box-shadow: 0 0 8px rgba(40,255,40,0.2);
    animation: lvlReadyPulse 2.5s infinite ease-in-out;
}
.lvlup-btn-locked {
    opacity: 0.4; border-color: rgba(255,255,255,0.2);
    cursor: not-allowed;
}
.lvlup-btn-ready:hover { background: var(--pip-color); color: black; }
.lvlup-pts-preview { font-size: 0.76rem; opacity: 0.7; }

@keyframes lvlReadyPulse {
    0%,100% { box-shadow: 0 0 5px var(--pip-color); }
    50% { box-shadow: 0 0 18px var(--pip-color), 0 0 35px rgba(40,255,40,0.3); }
}

/* --- LEVEL UP MODAL --- */
.lvlup-box {
    max-width: 640px; width: 95%;
    max-height: 90vh; display: flex; flex-direction: column;
}
.lvlup-header {
    border-bottom: 1px solid var(--pip-color);
    padding-bottom: 10px; margin-bottom: 10px;
}
.lvlup-title {
    font-size: 1.25rem; font-weight: bold; letter-spacing: 1.5px;
    margin-bottom: 6px;
}
.lvlup-pts-bar {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.9rem; background: rgba(255,255,255,0.05);
    padding: 5px 10px;
}
.lvlup-pts-num {
    font-weight: bold; font-size: 1rem; color: var(--pip-color);
}
.lvlup-skill-grid {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 12px;
}
.lvlup-row {
    display: grid;
    grid-template-columns: 16px 1fr 30px 110px 40px 24px;
    align-items: center; gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.1s;
}
.lvlup-row:hover { background: rgba(255,255,255,0.04); }
.lvlup-tagged {
    border-color: rgba(255,215,0,0.3);
    background: rgba(255,215,0,0.05);
}
.lvlup-tag-star {
    color: #ffd700; font-size: 0.9rem; text-align: center;
}
.lvlup-skill-name { font-size: 0.9rem; font-weight: bold; }
.lvlup-tagged .lvlup-skill-name { color: #ffd700; }
.lvlup-cur { font-size: 0.85rem; text-align: right; opacity: 0.55; }
.lvlup-ctrl {
    display: flex; align-items: center; gap: 4px; justify-content: center;
}
.lvlup-adj {
    width: 26px; height: 26px; border: 1px solid var(--pip-color) !important;
    border-bottom: 1px solid var(--pip-color) !important;
    color: var(--pip-color); font-weight: bold; font-size: 1rem;
    cursor: pointer; background: rgba(255,255,255,0.03);
    display: flex; align-items: center; justify-content: center;
    padding: 0; transition: all var(--t-base);
}
.lvlup-adj:hover:not(:disabled) { background: var(--pip-color); color: black; }
.lvlup-adj:disabled { opacity: 0.2; cursor: not-allowed; }
.lvlup-delta {
    min-width: 32px; text-align: center; font-size: 0.85rem;
    font-weight: bold; color: rgba(255,255,255,0.25);
}
.lvlup-delta.lvlup-active { color: var(--pip-color); }
.lvlup-tagged .lvlup-delta.lvlup-active { color: #ffd700; }
.lvlup-new { font-size: 0.95rem; font-weight: bold; text-align: center; }
.lvlup-new.lvlup-changed { color: var(--pip-color); }
.lvlup-tagged .lvlup-new.lvlup-changed { color: #ffd700; }
.lvlup-cost { font-size: 0.72rem; opacity: 0.6; text-align: center; color: #ffd700; }
.lvlup-actions {
    display: flex; gap: 8px; align-items: stretch; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* --- LEVEL UP ATTRIBUTE CHOICE --- */
.lvlup-attribute-choice {
    margin-top: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.2);
}

.lvlup-attribute-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--pip-color);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    text-align: center;
}

.lvlup-attribute-subtitle {
    font-size: 0.76rem;
    opacity: 0.6;
    text-align: center;
    margin-bottom: 12px;
}

.lvlup-attribute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.lvlup-attr-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.05);
    border: 2px solid rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.25);
    color: var(--pip-color);
    cursor: pointer;
    font-family: var(--font-main);
    transition: all var(--t-slow);
}

.lvlup-attr-btn:hover {
    background: rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.12);
    border-color: rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.5);
    transform: translateY(-2px);
}

.lvlup-attr-btn.selected {
    background: rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.2);
    border-color: var(--pip-color);
    box-shadow: 0 0 12px rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.4);
}

.lvlup-attr-icon {
    font-size: 1.5rem;
}

.lvlup-attr-label {
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* --- PERK ELIGIBILITY --- */
.perk-ineligible {
    opacity: 0.45;
    border-color: rgba(255,255,255,0.07) !important;
    filter: grayscale(40%);
}
.perk-ineligible:hover { opacity: 0.7; }
.perk-eligible-badge {
    font-size: 0.75rem; font-weight: bold; padding: 2px 6px;
    background: rgba(40,255,40,0.15); color: var(--pip-color);
    border: 1px solid rgba(40,255,40,0.35);
    white-space: nowrap;
}
.perk-missing {
    font-size: 0.78rem; color: #ff9090;
    background: rgba(255,60,60,0.07);
    border-left: 2px solid rgba(255,80,80,0.4);
    padding: 4px 8px; margin-bottom: 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.perk-missing span::before { content: "✗ "; }

/* Mobile overrides for lvlup */
@media (max-width: 768px) {
    .lvlup-row {
        grid-template-columns: 14px 1fr 28px 90px 36px 20px;
        gap: 4px; padding: 4px 6px;
    }
    .lvlup-adj { width: 30px; height: 30px; font-size: 1.25rem; }
    .lvlup-pts-num { font-size: 1.05rem; }
    .skills-header-row { flex-wrap: wrap; }
    .lvlup-open-btn { font-size: 0.75rem; padding: 5px 8px; }
}

/* --- INTENSE TRAINING MODAL --- */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; 
    width: 100vw; height: 100vh; z-index: 9999;
    background: rgba(0,0,0,0.88); 
    backdrop-filter: blur(2px);
    justify-content: center; align-items: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
    border: 1px solid var(--pip-color); background: var(--pip-bg-2);
    padding: 22px; max-width: 480px; width: 90%;
    box-shadow: var(--glow-lg, 0 0 28px rgba(40,255,40,0.15)), 0 0 80px rgba(0,0,0,0.8);
}
.modal-box h2 { margin-top: 0; font-size: 1.05rem; letter-spacing: 2px; }
.modal-box p { font-size: 0.95rem; opacity: 0.65; margin-bottom: 18px; }

/* Perk zoom box override */
.perk-zoom-box {
    max-width: 600px !important;
    background: var(--pip-bg-2);
}

.special-picker-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
    margin-bottom: 18px;
}
.special-pick-btn {
    border: 1px solid rgba(255,255,255,0.15) !important; 
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--pip-color);
    padding: 10px 4px; cursor: pointer; font-weight: bold;
    font-size: 0.8rem; text-align: center; background: rgba(255,255,255,0.02);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: all var(--t-base);
}
.special-pick-btn:hover { 
    background: var(--pip-color) !important; color: black; 
    border-color: var(--pip-color) !important;
    border-bottom-color: var(--pip-color) !important;
    box-shadow: 0 0 10px rgba(40,255,40,0.3);
}
.special-pick-btn.maxed { opacity: 0.25; pointer-events: none; cursor: not-allowed; }
.special-pick-btn .spk-val { font-size: 1.25rem; font-weight: bold; }
.modal-cancel-btn {
    width: 100%; height: 34px; border: 1px solid rgba(255,80,80,0.4) !important; 
    border-bottom: 1px solid rgba(255,80,80,0.4) !important;
    color: rgba(255,80,80,0.7); cursor: pointer; font-weight: bold;
    background: rgba(255,0,0,0.04); transition: all var(--t-base); letter-spacing: 1px;
}
.modal-cancel-btn:hover { background: var(--danger-red) !important; color: black; border-color: var(--danger-red) !important; border-bottom-color: var(--danger-red) !important; }

/* --- OTHER GEAR / MISC --- */
.gear-card { border: 1px solid rgba(255,255,255,0.07); padding: 10px 12px; margin-bottom: 8px; background: rgba(255,255,255,0.015); position: relative; }
.action-btn { 
    width: 100%; height: 34px; border: 1px solid var(--pip-color) !important; 
    color: var(--pip-color); cursor: pointer; font-weight: bold; 
    margin-bottom: 10px; background: rgba(255,255,255,0.02); 
    letter-spacing: 1px; font-size: 0.88rem; transition: all var(--t-base);
    border-bottom: 1px solid var(--pip-color) !important;
}
.action-btn:hover { background: rgba(255,255,255,0.10); color: var(--pip-color); border-color: rgba(255,255,255,0.30); }

.pip-search { 
    width: 100%; background: rgba(0,0,0,0.35); 
    border: 1px solid rgba(255,255,255,0.1) !important; 
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 0.82rem;
    color: var(--pip-color); padding: 9px 12px; margin-bottom: 10px; 
    font-size: 1.0rem; font-weight: bold; letter-spacing: 0.5px; transition: border-color 0.15s;
}
.pip-search:focus { 
    border-color: var(--pip-color) !important; 
    border-bottom-color: var(--pip-color) !important;
    background: rgba(0,0,0,0.5); outline: none;
}

.sticky-note { display: none; background: #ffef88; color: #000; padding: 10px; transform: rotate(-1deg); border: 1px solid #ccc; font-size: 0.78rem; margin-bottom: 10px; box-shadow: 3px 3px 8px rgba(0,0,0,0.4); font-weight: bold; text-transform: none !important; line-height: 1.5; overflow-wrap: break-word; word-break: break-word; }

/* Doomsday note — hidden under the first note */
.doomsday-note {
    display: none;
    background: #1a0000 !important;
    color: #ff4444 !important;
    border: 1px solid rgba(255,0,0,0.4) !important;
    transform: rotate(0.8deg);
    box-shadow: 0 0 16px rgba(255,0,0,0.25), 3px 3px 8px rgba(0,0,0,0.6) !important;
    position: relative; z-index: 1;
    text-shadow: 0 0 6px rgba(255,0,0,0.4);
    letter-spacing: 0.03em;
}

/* Per-click micro-jolt */
@keyframes stickyJolt {
    0%   { transform: rotate(-1deg) translateX(0); }
    25%  { transform: rotate(-3deg) translateX(-4px); }
    75%  { transform: rotate(1deg)  translateX(4px); }
    100% { transform: rotate(-1deg) translateX(0); }
}

/* 5-click shake before falling */
@keyframes stickyShake {
    0%   { transform: rotate(-1deg) translate(0, 0); }
    10%  { transform: rotate(-5deg) translate(-6px, -2px); }
    20%  { transform: rotate(4deg)  translate(6px,  2px); }
    30%  { transform: rotate(-6deg) translate(-8px, -3px); }
    40%  { transform: rotate(5deg)  translate(8px,  3px); }
    50%  { transform: rotate(-7deg) translate(-6px, -2px); }
    60%  { transform: rotate(6deg)  translate(6px,  2px); }
    70%  { transform: rotate(-5deg) translate(-4px, -1px); }
    80%  { transform: rotate(4deg)  translate(4px,  1px); }
    90%  { transform: rotate(-3deg) translate(-2px, 0); }
    100% { transform: rotate(-1deg) translate(0, 0); }
}

/* Fall off bottom */
@keyframes stickyFall {
    0%   { transform: rotate(-1deg) translate(0, 0);    opacity: 1; }
    40%  { transform: rotate(8deg)  translate(20px, 10px); opacity: 0.8; }
    100% { transform: rotate(25deg) translate(60px, 120px); opacity: 0; }
}

/* Doomsday note slides in */
@keyframes doomReveal {
    0%   { opacity: 0; transform: rotate(0.8deg) translateY(-8px); }
    100% { opacity: 1; transform: rotate(0.8deg) translateY(0); }
}
.credits-box { font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 10px; margin-top: 10px; opacity: 0.6; line-height: 1.6; }
.credits-box a { color: inherit; opacity: 0.8; }
#user-notes { 
    flex: 1; background: rgba(0,0,0,0.3); 
    border: 1px solid rgba(255,255,255,0.07) !important; 
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 10px; font-size: 0.97rem; resize: none; line-height: 1.5;
    white-space: pre-wrap; overflow-wrap: break-word;
}

.special-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 4px; border-bottom: 1px dotted rgba(255,255,255,0.1); }
.special-controls { display: flex; align-items: center; gap: 0; }
.special-btn { background: none; border: 1px solid var(--pip-color); color: var(--pip-color); width: 30px; height: 30px; cursor: pointer; font-weight: bold; font-size: 1.25rem; }
.special-val { font-size: 1.55rem; font-weight: bold; min-width: 38px; text-align: center; }
.special-btn:hover:not(:disabled) { background: var(--pip-color); color: black; }

/* --- IT ACTIVE INDICATOR ON SPECIAL --- */
.special-row.it-boosted b { 
    color: #ffff00 !important; 
    text-shadow: 0 0 8px #ffff00;
}

/* ===== COMPACT SPECIAL GRID (LEFT PANEL) — VERTICAL LIST ===== */
.special-compact-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.special-compact-grid .special-row {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--pip-border);
    border-bottom: 1px solid var(--pip-border) !important;
    padding: 6px 8px 5px 8px;
    margin-bottom: 0;
    background: rgba(255,255,255,0.02);
    transition: border-color 0.15s, background 0.15s;
}
.special-compact-grid .special-row:hover { border-color: var(--pip-color); background: rgba(255,255,255,0.04); }
.special-compact-grid .special-row.it-boosted .spec-abbr-lg { color: #ffff00 !important; text-shadow: 0 0 8px #ffff00; }

/* Top row: abbr + delta badge */
.spec-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

/* Middle row: — VAL + = TOTAL */
.spec-card-mid {
    display: flex;
    align-items: center;
    gap: 4px;
}
.spec-card-mid .spec-val {
    font-size: 1.9rem;
    font-weight: bold;
    min-width: 2ch;
    text-align: center;
    color: var(--pip-color);
    line-height: 1;
    flex: 1;
}
.spec-card-mid .special-btn {
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.spec-eq-badge {
    font-size: 0.82rem;
    font-weight: bold;
    color: var(--pip-color);
    opacity: 0.75;
    letter-spacing: 0.5px;
    margin-left: 2px;
    white-space: nowrap;
}

/* Bottom row: rank title */
.spec-card-bot {
    margin-top: 3px;
}
.spec-card-bot .spec-rank-title {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: rgba(var(--pip-rgb),0.55);
    font-weight: bold;
    text-shadow: 0 0 6px rgba(var(--pip-rgb),0.25);
    position: static;
    display: block;
}

/* SPECIAL stat bar container - inserted between mid and bot */
.spec-bar-container {
    margin: 4px 0 2px;
    width: 100%;
}

.spec-bar-bg {
    display: flex;
    height: 6px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    border-radius: var(--r-sm);
}

.spec-bar-fill {
    flex-shrink: 0;
    height: 100%;
    background: var(--pip-color);
    transition: width 0.25s ease;
}
.spec-bar-fill.spec-bar-mod-pos { background: #40c8e0 !important; }
.spec-bar-fill.spec-bar-mod-neg { background: #ff3c28 !important; }

.spec-abbr { font-size: 0.7rem; font-weight: bold; letter-spacing: 1px; opacity: 0.6; }

/* ── SPECIAL bar tier system (1-10 → dim → pulse) ── */
/* Replaces old glow-based borders with skill-style bars */
.special-compact-grid .special-row.spec-glow-dim,
.special-compact-grid .special-row.spec-glow-low,
.special-compact-grid .special-row.spec-glow-mid,
.special-compact-grid .special-row.spec-glow-high,
.special-compact-grid .special-row.spec-glow-max {
    border-color: rgba(var(--pip-rgb),0.20);
    box-shadow: none;
}

/* Bar tier styles - similar to skill bars */
.spec-bar-fill.spec-bar-dim {
    background: rgba(var(--pip-rgb),0.35) !important;
    opacity: 0.55;
}

.spec-bar-fill.spec-bar-low {
    background: rgba(var(--pip-rgb),0.45) !important;
    opacity: 0.65;
}

.spec-bar-fill.spec-bar-mid {
    background: rgba(var(--pip-rgb),0.65) !important;
    opacity: 0.80;
}

.spec-bar-fill.spec-bar-high {
    background: rgba(var(--pip-rgb),1) !important;
    box-shadow: 0 0 8px rgba(var(--pip-rgb),0.5);
    opacity: 0.95;
}

.spec-bar-fill.spec-bar-max {
    background: var(--pip-color) !important;
    animation: spec-bar-pulse 1.4s ease-in-out infinite;
}

@keyframes spec-bar-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(var(--pip-rgb),0.6), 0 0 12px rgba(var(--pip-rgb),0.35); opacity: 1; }
    50%       { box-shadow: 0 0 16px rgba(var(--pip-rgb),0.9), 0 0 32px rgba(var(--pip-rgb),0.5); opacity: 0.9; }
}

/* Hover still brightens the card border slightly */
.special-compact-grid .special-row:hover {
    border-color: rgba(var(--pip-rgb),0.40) !important;
    background: rgba(255,255,255,0.04);
}

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATION SYSTEM
═══════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: var(--pip-bg-2);
    border: 1px solid var(--pip-color);
    border-radius: var(--r-lg);
    padding: 12px 16px;
    min-width: 250px;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(var(--pip-rgb),0.2);
    font-family: var(--font-main);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--pip-color);
    animation: toastSlideIn 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all var(--t-base) ease;
    position: relative;
}

.toast:hover {
    transform: translateX(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 30px rgba(var(--pip-rgb),0.3);
}

.toast.toast-success {
    border-color: #4caf50;
    color: #4caf50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(76,175,80,0.2);
}

.toast.toast-error {
    border-color: #f44336;
    color: #f44336;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(244,67,54,0.2);
}

.toast.toast-warning {
    border-color: #ff9800;
    color: #ff9800;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(255,152,0,0.2);
}

.toast.toast-info {
    border-color: #2196f3;
    color: #2196f3;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(33,150,243,0.2);
}

.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.toast-close:hover {
    opacity: 1;
}

.toast-exit {
    animation: toastSlideOut 0.3s ease-in forwards !important;
    pointer-events: none;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    to {
        transform: translateX(400px) scale(0.8);
        opacity: 0;
    }
}

/* Mobile toast positioning */
@media (max-width: 600px) {
    .toast-container {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* ═══════════════════════════════════════════════
   SMOOTH TRANSITIONS & ANIMATIONS
═══════════════════════════════════════════════ */
/* Tab content fade-in */
.tab-content {
    animation: tabFadeIn 0.15s ease-out;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal fade-in improvements */
.modal-overlay {
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-box {
    animation: modalSlideUp 0.2s ease-out;
}

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

/* Button press feedback */
button:not(:disabled):active,
.action-btn:active,
.special-btn:active {
    transform: scale(0.95);
    transition: transform 0.05s;
}

/* Smooth hover transitions for interactive elements */
button,
.action-btn,
.special-btn,
.gear-card,
.prog-row,
.trait-grid-item,
.perk-card {
    transition: all var(--t-base) ease;
}

/* Loading spinner for async operations */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--pip-rgb), 0.3);
    border-top-color: var(--pip-color);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton loading state */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: var(--r-sm);
}

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

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--pip-color);
    outline-offset: 2px;
}

/* Remove default focus outline but keep for keyboard users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Skip to main content link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--pip-color);
    color: #000;
    padding: 8px;
    text-decoration: none;
    z-index: 100000;
}

.skip-link:focus {
    top: 0;
}

/* ═══════════════════════════════════════════════
   EMPTY STATES
═══════════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(var(--pip-rgb), 0.4);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.3;
}

.empty-state-title {
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: rgba(var(--pip-rgb), 0.6);
}

.empty-state-text {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
    overflow-wrap: break-word;
}

.empty-state-action {
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════
   CONFIRMATION DIALOG
═══════════════════════════════════════════════ */
.confirm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--pip-bg);
    border: 2px solid var(--pip-color);
    border-radius: var(--r-lg);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    z-index: 10001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 40px rgba(var(--pip-rgb),0.3);
    animation: modalSlideUp 0.2s ease-out;
}

.confirm-dialog-title {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: var(--pip-color);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.confirm-dialog-message {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.8);
}

.confirm-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.confirm-btn {
    padding: 8px 16px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    transition: all var(--t-base);
}

.confirm-btn-primary {
    border-color: var(--pip-color);
    color: var(--pip-color);
}

.confirm-btn-primary:hover {
    background: var(--pip-color);
    color: #000;
}

.confirm-btn-danger {
    border-color: #f44336;
    color: #f44336;
}

.confirm-btn-danger:hover {
    background: #f44336;
    color: #fff;
}

.confirm-btn-cancel {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.6);
}

.confirm-btn-cancel:hover {
    border-color: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.9);
}

.confirm-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    animation: modalFadeIn 0.2s ease-out;
}

/* ═══════════════════════════════════════════════
   QUICK PERK PREVIEW TOOLTIP
═══════════════════════════════════════════════ */
.perk-preview-tooltip {
    position: absolute;
    background: var(--pip-bg);
    border: 1px solid var(--pip-color);
    border-radius: var(--r-md);
    padding: 12px;
    max-width: 500px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 20px rgba(var(--pip-rgb),0.2);
    font-size: 0.75rem;
    line-height: 1.5;
    animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.perk-preview-name {
    font-weight: bold;
    color: var(--pip-color);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.perk-preview-req {
    color: #ffd060;
    font-size: 0.7rem;
    margin-bottom: 6px;
}

.perk-preview-req.req-met {
    color: #4caf50;
}

.perk-preview-req.req-fail {
    color: #f44336;
}

.perk-preview-desc {
    color: rgba(255,255,255,0.8);
    font-size: 0.72rem;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Larger touch targets */
    button,
    .action-btn,
    .special-btn,
    input[type="checkbox"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    .special-btn {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }
    
    /* Bottom sheet modals for mobile */
    .modal-box {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
        animation: modalSlideUpMobile 0.3s ease-out;
    }
    
    @keyframes modalSlideUpMobile {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    /* Collapsible sections on mobile */
    .left-panel,
    .right-panel {
        overflow-y: auto;
    }
    
    /* Better spacing for mobile */
    .special-compact-grid .special-row {
        padding: 10px;
    }
    
    .skill-row {
        padding: 8px 4px;
    }
    
    /* Stack buttons vertically on very small screens */
    @media (max-width: 480px) {
        .special-header-row > div {
            flex-direction: column;
            width: 100%;
        }
        
        .spec-base-toggle-btn {
            width: 100%;
        }
    }
}

/* Touch-friendly swipe hint */
.swipe-hint {
    text-align: center;
    padding: 8px;
    font-size: 0.7rem;
    opacity: 0.5;
    letter-spacing: 0.5px;
}

@media (min-width: 769px) {
    .swipe-hint {
        display: none;
    }
}

/* ═══════════════════════════════════════════════
   COLLAPSIBLE SECTIONS
═══════════════════════════════════════════════ */
.section-collapse-btn {
    background: none;
    border: none;
    color: var(--pip-color);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.section-collapse-btn:hover {
    color: #fff;
}

.section-collapse-btn.collapsed {
    transform: rotate(-90deg);
}

.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 5000px;
    opacity: 1;
}

.collapsible-content.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}








/* ===== LEFT PANEL — DOSSIER SIDEBAR ===== */
.left-panel { 
    background: var(--pip-bg-3);
    border-right: 1px solid var(--pip-border);
    position: relative;
}
.left-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 18px,
        rgba(var(--pip-rgb),0.015) 18px,
        rgba(var(--pip-rgb),0.015) 19px
    );
    pointer-events: none;
}
.left-panel .scroll-v {
    padding: 0;
    position: relative;
    z-index: 1;
}

/* Dossier top stamp */
.left-panel::after {
    content: 'CLASSIFIED';
    position: absolute;
    top: 12px;
    right: -22px;
    font-size: 0.45rem;
    letter-spacing: 6px;
    color: rgba(var(--pip-rgb),0.08);
    transform: rotate(90deg);
    transform-origin: right center;
    pointer-events: none;
    z-index: 0;
    font-weight: bold;
}

.left-identity-block {
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--pip-border);
    margin-bottom: 0;
    background: rgba(var(--pip-rgb),0.025);
}
.left-label {
    font-size: 0.68rem;
    letter-spacing: 4px;
    opacity: 0.4;
    margin-bottom: 4px;
}
.char-name-input {
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
    background: transparent;
    border: none;
    border-bottom: none;
    color: var(--pip-color);
    outline: none;
    letter-spacing: 2px;
    padding: 0;
}
.char-name-input::placeholder { opacity: 0.2; }

.special-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 6px;
}
.section-label {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 3px;
    opacity: 0.55;
}
.pts-badge {
    font-size: 0.75rem;
    font-weight: bold;
    background: transparent;
    color: var(--pip-color);
    border: 1px solid var(--pip-color);
    padding: 1px 7px;
    letter-spacing: 1px;
}

/* Redesigned special row — horizontal: ABBR | TRACK | CONTROLS */
.spec-abbr-lg {
    font-size: 0.88rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--pip-color);
    opacity: 0.9;
    white-space: nowrap;
    cursor: pointer;
}
.special-compact-grid .special-val {
    font-size: 1rem;
    font-weight: bold;
    min-width: 1.6ch;
    text-align: center;
    color: var(--pip-color);
}

/* ===== CHAR BANNER (overview) ===== */
.char-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0 12px;
    border-bottom: 2px solid var(--pip-color);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.char-banner-name {
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 1px;
    flex-shrink: 0;
    flex: 1;
    min-width: 0;
}
.char-banner-spec {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.char-banner-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border: 1px solid var(--pip-border);
    padding: 4px 6px;
    min-width: 34px;
    background: rgba(255,255,255,0.02);
}
.char-banner-stat-key {
    font-size: 0.72rem;
    opacity: 0.5;
    letter-spacing: 1px;
}
.char-banner-stat-val {
    font-size: 1.35rem;
    font-weight: bold;
    color: var(--pip-color);
    line-height: 1;
}

/* ===== LEVEL-UP BONUSES DISTRIBUTION ===== */
.levelup-bonuses-display {
    width: 100%;
    padding: 10px 12px;
    background: rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.04);
    border: 1px solid rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.15);
    margin-top: 12px;
}

.levelup-dist-title {
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    opacity: 0.7;
    text-align: center;
}

.levelup-dist-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.levelup-dist-bar {
    display: grid;
    grid-template-columns: 24px 80px 1fr 45px 32px;
    gap: 8px;
    align-items: center;
}

.levelup-dist-icon {
    font-size: 1rem;
    text-align: center;
}

.levelup-dist-label {
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.3px;
}

.levelup-dist-track {
    height: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--tc-r, 100), var(--tc-g, 255), var(--tc-b, 100), 0.2);
    position: relative;
    overflow: hidden;
}

.levelup-dist-fill {
    height: 100%;
    transition: width 0.3s ease;
    position: relative;
}

.levelup-dist-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.hp-fill {
    background: linear-gradient(90deg, #ff3030, #ff6060);
}

.ap-fill {
    background: linear-gradient(90deg, #ffd000, #ffec60);
}

.cw-fill {
    background: linear-gradient(90deg, #60a8f0, #90c0ff);
}

.levelup-dist-pct {
    font-size: 0.75rem;
    font-weight: bold;
    text-align: right;
    color: var(--pip-color);
    min-width: 38px;
}
.levelup-dist-count {
    font-size: 0.78rem;
    font-weight: bold;
    text-align: right;
    color: rgba(255,255,255,0.45);
    min-width: 28px;
}

/* ===== CHARACTER SHEET 3-COL GRID ===== */
.char-sheet-cols {
    display: grid;
    grid-template-columns: 170px 195px 1fr;
    gap: 18px 22px;
    align-items: start;
}

.char-sheet-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-cols {
    display: grid;
    grid-template-columns: 220px 220px 1fr;
    gap: 14px;
    align-items: start;
    padding: 0 4px;
}

.dash-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.dash-col-skills {
    min-width: 0;
}

.dash-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 6px 0 4px;
}

.dash-spacer {
    height: 4px;
}

.cs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--pip-color);
    margin-bottom: 6px;
}
.cs-label {
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 2px;
}
.cs-sublabel {
    font-size: 0.78rem;
    opacity: 0.45;
    letter-spacing: 1px;
}
.cs-add-btn {
    font-size: 0.7rem;
    background: none;
    border: 1px solid var(--pip-color);
    color: var(--pip-color);
    padding: 2px 6px;
    cursor: pointer;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.cs-add-btn:hover { background: var(--pip-color); color: black; }

/* Tags grid in overview — thematic [X] toggle style */
.tag-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tag-grid .grid-item {
    border: 1px solid rgba(255,255,255,0.07);
    padding: 5px 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background var(--t-fast), border-color var(--t-fast);
    cursor: pointer;
}
.tag-grid .grid-item:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); }
.tag-grid .grid-item:has(input:checked) {
    background: rgba(var(--pip-rgb,100,200,100),0.08);
    border-color: var(--pip-color);
}
/* Hide native checkbox, replace with thematic [X]/[ ] marker */
.tag-grid input[type="checkbox"] {
    display: none;
}
.tag-grid .tag-marker {
    font-size: 0.85rem;
    font-weight: bold;
    font-family: monospace;
    color: rgba(255,255,255,0.3);
    min-width: 2.2ch;
    letter-spacing: 0;
    transition: color var(--t-fast);
    white-space: nowrap;
}
.tag-grid .grid-item:has(input:checked) .tag-marker {
    color: var(--pip-color);
}
.tag-grid .grid-item.locked {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Trait list in overview */
#trait-list > div {
    padding: 4px 0;
    border-bottom: 1px dotted rgba(255,255,255,0.08);
}

/* 2-col skill list */
.skill-list-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 16px;
    margin-bottom: 10px;
}
.skill-list-2col .skill-row {
    grid-template-columns: 1fr 54px 32px;
    font-size: 0.85rem;
    padding: 5px 4px;
}
.skill-list-2col .skill-row-bar { height: 6px; }
.skill-list-2col .skill-row-val { font-size: 0.82rem; }

/* Level-up button in cs-header */
#lvlup-open-btn {
    font-size: 0.75rem;
    padding: 4px 12px;
    height: auto;
    white-space: nowrap;
}
/* cs-add-btn for trait header */
#add-trait-btn.cs-add-btn {
    width: auto;
    height: auto;
    margin-bottom: 0;
    font-size: 0.75rem;
    padding: 3px 10px;
}

@media (max-width: 1200px) {
    .char-sheet-cols { grid-template-columns: 1fr 1fr; }
    .char-sheet-skills-col { grid-column: 1 / -1; }
    .dashboard-cols { grid-template-columns: 1fr 1fr; }
    .dash-col-skills { grid-column: 1 / -1; }
    .skill-list-2col { grid-template-columns: 1fr 1fr 1fr; }
    .wrapper { grid-template-columns: 240px 1fr 260px; }
}
@media (max-width: 1000px) {
    .char-sheet-cols { grid-template-columns: 1fr; }
    .char-sheet-skills-col { grid-column: auto; }
    .dashboard-cols { grid-template-columns: 1fr; }
    .dash-col-skills { grid-column: auto; }
    .skill-list-2col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .skill-list-2col { grid-template-columns: 1fr; }
    /* special-compact-grid stays flex column on mobile */
}

/* ===== PERK LEVEL UP BANNER ===== */
#perk-lvlup-banner {
    gap: 0;
    background: rgba(100,255,130,0.1) !important;
    border-bottom: 1px solid var(--pip-color) !important;
    padding: 8px 16px;
    animation: flash-pulse 0.4s ease;
}
@keyframes flash-pulse {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ===== TRAIT / IMPLANT CARDS ===== */
.trait-card { background: rgba(0,255,100,0.04); border:1px solid rgba(0,255,100,0.15); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:6px; cursor:pointer; transition:background 0.15s; }
.trait-card:hover { background: rgba(0,255,100,0.1); border-color:rgba(0,255,100,0.4); }
.trait-card.ineligible { opacity:0.5; }
.trait-card.taken { background: rgba(0,255,100,0.08); border-color:rgba(0,255,100,0.5); }
.trait-card-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.trait-card-name { font-size: 0.97rem; font-weight:bold; color:#c8ffd4; letter-spacing:0.06em; flex:1; }
.trait-badge { font-size: 0.76rem; padding:2px 6px; border-radius:var(--r-sm); letter-spacing:0.08em; }
.elig-badge { background:rgba(0,255,100,0.15); color:#00ff64; border:1px solid rgba(0,255,100,0.3); }
.inelig-badge { background:rgba(255,80,80,0.1); color:#ff8080; border:1px solid rgba(255,80,80,0.2); }
.taken-badge { background:rgba(0,200,255,0.1); color:#80e0ff; border:1px solid rgba(0,200,255,0.3); }
.trait-req { font-size: 0.82rem; color:#aaa; margin-bottom:4px; letter-spacing:0.04em; }
.trait-card-desc { font-size: 0.85rem; color:#bbb; line-height:1.55; }
.trait-slot-name { font-size: 0.97rem; color:#c8ffd4; padding:6px 10px; letter-spacing:0.04em; }
.trait-slot-row .prog-card-header { border-bottom:1px solid rgba(0,255,100,0.1); }
/* ══════════════════════════════════════════════
   REDESIGNED LOADOUT TAB
══════════════════════════════════════════════ */

/* Tab-level header with stat counts */
.gear-tab-header {
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 16px;
}
.gear-stat-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gear-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gear-stat-label {
    font-size: 0.72rem;
    opacity: 0.5;
    letter-spacing: 2px;
}
.gear-stat-val {
    font-size: 1.55rem;
    font-weight: bold;
    color: var(--pip-color);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.gear-stat-sep {
    opacity: 0.2;
    font-size: 1.35rem;
    margin: 0 4px;
}

/* Section wrapper */
.gear-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.gear-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 10px;
    border-bottom: 2px solid var(--pip-color);
    margin-bottom: 10px;
}
.gear-section-icon {
    font-size: 1.25rem;
    line-height: 1;
}
.gear-section-title {
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 3px;
    color: var(--pip-color);
    flex: 1;
}
.gear-add-btn {
    font-size: 0.82rem;
    background: none;
    border: 1px solid var(--pip-color);
    color: var(--pip-color);
    padding: 4px 12px;
    cursor: pointer;
    letter-spacing: 1.5px;
    transition: background 0.15s, color 0.15s;
}
.gear-add-btn:hover {
    background: var(--pip-color);
    color: #000;
}

/* Gear card redesign */
.gear-list { display: flex; flex-direction: column; gap: 8px; }

.gear-card {
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.gear-card:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.03);
}

.gear-card-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gear-card-type-badge {
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--pip-color);
    opacity: 0.85;
}
.gear-card-type-badge.armor-badge {
    color: #80d8ff;
}
.gear-card-remove {
    font-size: 0.76rem;
    background: none;
    border: 1px solid rgba(255,60,60,0.3);
    color: rgba(255,80,80,0.7);
    padding: 2px 8px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all var(--t-base);
}
.gear-card-remove:hover {
    background: rgba(255,0,0,0.12);
    border-color: rgba(255,60,60,0.7);
    color: #ff6060;
}

.gear-card-fields {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gear-field-primary .gear-field-input {
    font-size: 1.0rem;
    font-weight: bold;
    color: var(--pip-color) !important;
    border-bottom-color: var(--pip-color) !important;
    opacity: 1 !important;
}
.gear-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.gear-field-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gear-field-label {
    font-size: 0.78rem;
    letter-spacing: 2px;
    opacity: 0.4;
    font-weight: bold;
}
.gear-field-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    padding: 3px 0;
    width: 100%;
    letter-spacing: 0.5px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.gear-field-input:focus {
    outline: none;
    border-bottom-color: var(--pip-color);
}
.gear-field-input::placeholder { opacity: 0.25; }
.gear-field-select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    font-size: 0.8rem;
    padding: 3px 6px;
    width: 100%;
    font-family: inherit;
    letter-spacing: 1px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.gear-field-select:focus { outline: none; border-color: var(--pip-color); }

/* Empty state */
.gear-empty-state {
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 2px;
    opacity: 0.25;
    padding: 24px 0;
    border: 1px dashed rgba(255,255,255,0.08);
}

/* Overview traits inline styling */
.ov-trait-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px;
    font-size: 0.85rem;
    border-bottom: 1px dotted rgba(200,255,200,0.1);
    color: #c8ffd4;
}
.ov-trait-dot {
    color: var(--pip-color);
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ══════════════════════════════════════════════
   REDESIGNED PROGRESSION TAB
══════════════════════════════════════════════ */

/* Legend bar */
.prog-legend-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    padding: 7px 2px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 14px;
}
.prog-legend-item {
    font-size: 0.76rem;
    letter-spacing: 1.5px;
    opacity: 0.6;
    font-weight: bold;
}
.pleg-perk    { color: var(--pip-color); }
.pleg-trait   { color: #c8ffd4; }
.pleg-start-trait { color: rgba(200,255,212,0.6); }
.pleg-bonus   { color: #a0cfff; }
.pleg-reward  { color: #ffd080; }
.pleg-int     { color: #c8a0ff; }
.pleg-implant { color: #80d8ff; }

/* Section label bars — colour-coded per type */
.prog-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 18px 0 7px;
    font-size: 0.83rem;
    font-weight: bold;
    letter-spacing: 2px;
    border-left: 3px solid;
    position: relative;
}
.prog-section-icon {
    font-size: 1.0rem;
    line-height: 1;
    margin-right: 1px;
}
.prog-section-sub {
    font-size: 0.72rem;
    opacity: 0.4;
    font-weight: normal;
    letter-spacing: 1px;
    margin-left: 4px;
    flex: 1;
    text-align: center;
}
.prog-section-btn {
    font-size: 0.82rem;
    background: none;
    border: 1px solid currentColor !important;
    border-bottom: 1px solid currentColor !important;
    color: inherit;
    padding: 3px 10px;
    cursor: pointer;
    letter-spacing: 1px;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    margin-left: auto;
}
.prog-section-btn:hover { opacity: 1; background: rgba(255,255,255,0.06); }

/* Section label colours */
.plab-perk    { color: var(--pip-color); border-color: var(--pip-color); background: rgba(100,200,100,0.03); }
.plab-bonus   { color: #a0cfff; border-color: #a0cfff; background: rgba(100,160,255,0.03); }
.plab-reward  { color: #ffd080; border-color: #ffd080; background: rgba(255,200,80,0.03); }
.plab-int     { color: #c8a0ff; border-color: #c8a0ff; background: rgba(180,100,255,0.03); }
.plab-implant { color: #80d8ff; border-color: #80d8ff; background: rgba(80,180,255,0.03); }
.plab-gear    { color: #80ffd8; border-color: rgba(100,255,200,0.6); background: rgba(100,255,200,0.03); }

/* Trait slot row redesign — more distinct from perk rows */
.trait-slot-row {
    background: rgba(100,255,130,0.02) !important;
    border: 1px solid rgba(100,255,130,0.15) !important;
    border-left: 3px solid rgba(100,255,130,0.4) !important;
    margin-bottom: 5px;
}
.trait-slot-row .lvl-tag.is-trait {
    background: rgba(100,255,130,0.08);
    color: #c8ffd4;
    border-color: rgba(100,255,130,0.25);
    letter-spacing: 1px;
}
.trait-slot-name {
    font-size: 0.97rem !important;
    color: #c8ffd4 !important;
    letter-spacing: 0.04em;
}

/* Perk row — cleaner, more readable */
.prog-row {
    border-left: 4px solid rgba(100,200,100,0.25) !important;
    margin-bottom: 6px;
}
.prog-row.has-perk {
    border-left-color: var(--pip-color) !important;
}

/* Extra perk rows — blue tint */
#extra-perk-list .prog-row {
    border-left-color: rgba(100,160,255,0.5) !important;
    background: rgba(100,160,255,0.02);
}

/* Reward perk rows */
#reward-perks-list .prog-row {
    border-left-color: rgba(255,200,80,0.5) !important;
    background: rgba(255,200,80,0.02);
}

/* Internalized trait rows */
#internalized-traits-list .prog-row {
    border-left-color: rgba(180,100,255,0.5) !important;
    background: rgba(180,100,255,0.02);
}

/* Implant items */
.implant-group { margin-bottom: 22px; }
.implant-group-title {
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 5px 0 8px;
    border-bottom: 1px solid rgba(128,216,255,0.2);
    margin-bottom: 10px;
    color: #80d8ff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.implant-slot-counter {
    font-size: 0.78rem;
    background: rgba(128,216,255,0.1);
    color: #80d8ff;
    padding: 1px 8px;
    border: 1px solid rgba(128,216,255,0.25);
}
.implant-group { margin-bottom: 26px; }
.implant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.implant-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    cursor: pointer;
    border: 1px solid rgba(128,216,255,0.1);
    border-left: 3px solid rgba(128,216,255,0.2);
    background: rgba(80,180,255,0.02);
    transition: background var(--t-fast), border-left-color var(--t-fast);
}
.implant-item:hover { background: rgba(80,180,255,0.07); border-left-color: rgba(128,216,255,0.5); }
.implant-item-top { display: flex; align-items: center; gap: 8px; }
.implant-taken {
    background: rgba(80,180,255,0.1) !important;
    border-left-color: #80d8ff !important;
    border-color: rgba(128,216,255,0.3) !important;
}
.implant-locked { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.implant-check { font-size: 1rem; color: #80d8ff; flex-shrink: 0; line-height: 1; transition: text-shadow 0.15s; }
.implant-taken .implant-check { text-shadow: 0 0 8px #80d8ff; }
.implant-name { font-size: 0.88rem; font-weight: bold; color: #b0e8ff; flex: 1; }
.implant-stat-badge {
    font-size: 0.78rem; font-weight: bold;
    background: rgba(128,216,255,0.15);
    color: #80d8ff; padding: 1px 7px;
    border: 1px solid rgba(128,216,255,0.3);
    flex-shrink: 0; white-space: nowrap;
}
.implant-desc { font-size: 0.82rem; opacity: 0.6; line-height: 1.6; }

/* ══ TAG! PICK MODAL ══ */
.tag-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    font-size: 0.85rem;
}
.tag-pick-item:hover { background: rgba(255,255,255,0.05); border-color: var(--pip-color); color: var(--pip-color); }
.tag-pick-taken { opacity: 0.4; cursor: default; }
.tag-pick-taken:hover { background: transparent; border-color: rgba(255,255,255,0.08); color: inherit; }
.tag-pick-icon { font-family: monospace; font-size: 0.8rem; min-width: 8ch; color: var(--pip-color); }
.tag-pick-name { letter-spacing: 1px; }

/* ══════════════════════════════════════════════
   PROGRESSION TAB READABILITY POLISH
══════════════════════════════════════════════ */

/* Clear visual breathing room between sections */
.prog-section-label + .prog-grid,
.prog-section-label + #extra-perk-list,
.prog-section-label + #reward-perks-list,
.prog-section-label + #internalized-traits-list,
.prog-section-label + #implants-list {
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.06);
    margin-left: 12px;
    margin-bottom: 16px;
}

/* Perk row: compact, scannable */
.prog-row .prog-perk-desc {
    font-size: 0.85rem !important;
    line-height: 1.65 !important;
    opacity: 0.65;
}
.prog-row .prog-perk-req {
    font-size: 0.82rem !important;
    opacity: 0.5;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.prog-row .prog-name-input {
    font-size: 1.0rem !important;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Level badge: bigger, more readable */
.lvl-tag {
    font-size: 0.72rem !important;
    letter-spacing: 1.5px;
    padding: 2px 8px !important;
    min-width: 72px;
    text-align: center;
}
.lvl-tag.is-trait {
    min-width: 100px;
}

/* Reward perk list items — gold theme */
#reward-perks-list .prog-card-header .lvl-tag {
    background: rgba(255,200,80,0.1) !important;
    color: #ffd080 !important;
    border-color: rgba(255,200,80,0.25) !important;
}

/* ── Reward Perk Picker Cards ── */
.reward-perk-card {
    background: rgba(255,200,80,0.03);
    border: 1px solid rgba(255,200,80,0.18);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    margin-bottom: 8px;
}
.reward-perk-card:hover {
    background: rgba(255,200,80,0.08);
    border-color: rgba(255,200,80,0.45);
}
.reward-perk-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.reward-perk-name {
    font-size: 1.0rem;
    font-weight: bold;
    color: #ffd080;
    letter-spacing: 0.06em;
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}
.reward-perk-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.reward-source-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    padding: 1px 7px;
    border-radius: var(--r-sm);
}
.reward-source-autumn {
    background: rgba(255,180,80,0.12);
    border: 1px solid rgba(255,180,80,0.35);
    color: #ffb050;
}
.reward-source-quest {
    background: rgba(200,255,212,0.08);
    border: 1px solid rgba(200,255,212,0.25);
    color: #a0ffb8;
}
.reward-cond-badge {
    font-size: 0.68rem;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: rgba(255,220,0,0.12);
    border: 1px solid rgba(255,220,0,0.3);
    color: #ffd060;
    white-space: nowrap;
    flex-shrink: 0;
}
.reward-perk-add-btn {
    margin-top: 4px;
    padding: 4px 10px;
    font-size: 0.76rem;
    background: transparent;
    border: 1px solid rgba(255,200,80,0.3) !important;
    border-bottom: 1px solid rgba(255,200,80,0.3) !important;
    color: #ffd080;
    cursor: pointer;
    letter-spacing: 0.06em;
    align-self: flex-start;
    font-family: inherit;
    transition: background var(--t-fast);
}
.reward-perk-card:hover .reward-perk-add-btn {
    background: rgba(255,200,80,0.12);
}

/* Internalized traits — purple theme */
#internalized-traits-list .prog-card-header .lvl-tag {
    background: rgba(180,100,255,0.1) !important;
    color: #c8a0ff !important;
    border-color: rgba(180,100,255,0.25) !important;
}

/* Empty sections hint */
.prog-grid:empty::after,
#extra-perk-list:empty::after,
#reward-perks-list:empty::after,
#internalized-traits-list:empty::after,
#implants-list:empty::after {
    content: 'NOTHING ADDED YET';
    display: block;
    font-size: 0.68rem;
    letter-spacing: 2px;
    opacity: 0.2;
    padding: 10px 0;
    text-align: left;
}

/* ══════════════════════════════════════════════
   STARTING TRAITS SECTION
══════════════════════════════════════════════ */
.plab-trait   { color: #c8ffd4; border-color: rgba(100,255,130,0.6); background: rgba(100,255,130,0.03); }
.psbtn-trait  { color: #c8ffd4; }
.pleg-start-trait { color: #a0ffb8; }

.starting-traits-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.06);
    margin-left: 12px;
    min-height: 36px;
}

.st-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 14px;
    background: rgba(100,255,130,0.06);
    border: 1px solid rgba(100,255,130,0.25);
    border-left: 3px solid rgba(100,255,130,0.5);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: #c8ffd4;
    max-width: 100%;
}

.st-tag-name {
    flex: 1;
    max-width: 300px;
}

.st-tag-remove {
    background: none;
    border: none;
    color: rgba(255,80,80,0.7);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.st-tag-remove:hover { color: #ff5555; }

/* ══════════════════════════════════════════════
   RANDOMIZE BUTTON — OBVIOUS STYLE
══════════════════════════════════════════════ */
.randomize-btn {
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all var(--t-base);
    font-family: inherit;
    text-transform: uppercase;
}
.randomize-btn:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255,215,0,0.2);
}
.randomize-btn:active {
    background: rgba(255, 215, 0, 0.25);
}

/* ══════════════════════════════════════════════
   UNIQUES TAB — [X] CHECKBOX STYLE
══════════════════════════════════════════════ */
.grid-item {
    cursor: pointer;
    user-select: none;
}
.grid-item .tag-marker {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--pip-color);
    min-width: 3ch;
    flex-shrink: 0;
    letter-spacing: 0;
}
.grid-item:hover {
    background: rgba(255,255,255,0.04);
}

/* ══════════════════════════════════════════════
   OVERVIEW — DUAL TRAIT BUTTONS
══════════════════════════════════════════════ */
.cs-trait-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    justify-content: flex-end;
}

.cs-start-trait-btn {
    font-size: 0.72rem !important;
    padding: 2px 6px !important;
    color: #a0ffb8 !important;
    border-color: rgba(100,255,130,0.4) !important;
    background: rgba(100,255,130,0.05) !important;
    letter-spacing: 0.04em !important;
}
.cs-start-trait-btn:hover {
    background: rgba(100,255,130,0.15) !important;
    border-color: rgba(100,255,130,0.7) !important;
}

/* Trait counter badge shown in HC mode */
.hc-trait-counter {
    display: none;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 1px 6px;
    border: 1px solid rgba(255,80,80,0.5);
    color: rgba(255,80,80,0.9);
    background: rgba(255,0,0,0.06);
}
body.mode-hc .hc-trait-counter { display: inline-block; }

/* ══════════════════════════════════════════════
   TRAIT / PERK STAT DELTA BADGES
══════════════════════════════════════════════ */
.sdelta-pos {
    color: #60d8ff;
    background: rgba(60,190,255,0.12);
    border: 1px solid rgba(60,190,255,0.35);
}
.sdelta-neg {
    color: #ff7070;
    background: rgba(255,80,80,0.12);
    border: 1px solid rgba(255,80,80,0.35);
}

/* SPECIAL panel delta badge */
.spec-delta-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: var(--r-md);
    margin-left: 5px;
    min-width: 24px;
    justify-content: center;
}

/* Skill list delta badge */
.skill-delta-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    padding: 1px 4px;
    border-radius: var(--r-sm);
    margin-left: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Duplicate .skill-row definition removed - was conflicting with grid layout above */

/* ══════════════════════════════════════════════
   PERK PICKER MODAL (LEVEL UP)
══════════════════════════════════════════════ */
.perk-picker-box {
    background: var(--pip-bg-2, var(--panel-bg, #0a140a));
    border: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.35);
}

.perk-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 8px;
    align-content: start;
}

.pperk-card {
    background: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.03);
    border: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.18);
    border-radius: var(--r-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    position: relative;
}

.pperk-card:hover {
    background: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.10);
    border-color: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.55);
}

.pperk-card:hover .pperk-take-btn {
    background: var(--pip-color);
    color: #000;
}

.pperk-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pperk-name {
    color: var(--pip-color);
    font-size: 1.0rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    flex: 1;
    min-width: 0;
}

.pperk-rank-badge {
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.10);
    border: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.30);
    color: var(--pip-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.pperk-rank-badge.pperk-rank-multi {
    background: rgba(255,200,80,0.12);
    border-color: rgba(255,200,80,0.4);
    color: #ffd080;
}

.pperk-req {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.pperk-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.45;
    flex: 1;
    overflow-wrap: break-word;
}

.pperk-take-btn {
    margin-top: 6px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--pip-color);
    color: var(--pip-color);
    font-size: 0.83rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    border-radius: var(--r-sm);
    transition: background var(--t-fast), color var(--t-fast);
    align-self: flex-start;
    pointer-events: none; /* handled by parent card click */
}

@media (max-width: 768px) {
    .perk-picker-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== IMPLANT BUTTON ===== */
.psbtn-implant { color: #80d8ff; border-color: rgba(128,216,255,0.5); }
.psbtn-implant:hover { background: rgba(128,216,255,0.1); }
.psbtn-gear { color: #80ffd8; border-color: rgba(100,255,200,0.5); }
.psbtn-gear:hover { background: rgba(100,255,200,0.1); }
.gear-effects-add-btn:hover { opacity: 1 !important; background: rgba(100,255,200,0.08); }

/* ===== SKILL LOG ===== */
.skilllog-header {
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(var(--tc-r,100),var(--tc-g,255),var(--tc-b,100),0.12);
    margin-bottom: 14px;
}
.skilllog-title {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: var(--pip-color);
}
.skilllog-sub {
    font-size: 0.75rem;
    opacity: 0.4;
    margin-top: 4px;
    letter-spacing: 0.06em;
}
.skilllog-empty {
    font-size: 0.78rem;
    opacity: 0.35;
    text-align: center;
    padding: 40px 20px;
    letter-spacing: 0.05em;
    border: 1px dashed rgba(100,255,100,0.15);
    border-radius: var(--r-lg);
}
.skilllog-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    opacity: 0.65;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.skilllog-summary b { color: var(--pip-color); opacity: 1; }
.skilllog-legend { margin-left: auto; font-size: 0.72rem; opacity: 0.5; }
.skilllog-legend-tagged { color: #ffd080; }
.skilllog-legend-val { color: rgba(255,255,255,0.7); font-weight: bold; }
.skilllog-scroll {
    overflow-x: auto;
    border: 1px solid rgba(100,255,100,0.12);
    border-radius: var(--r-lg);
}
.skilllog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    min-width: 400px;
}
.skilllog-table thead {
    background: rgba(100,255,100,0.05);
    border-bottom: 1px solid rgba(100,255,100,0.14);
}
.skilllog-th-skill {
    text-align: left;
    padding: 6px 10px;
    color: rgba(200,255,210,0.6);
    font-size: 0.75rem;
    white-space: nowrap;
    min-width: 118px;
    position: sticky;
    left: 0;
    background: var(--pip-bg, #0a100a);
    z-index: 2;
    letter-spacing: 0.06em;
}
.skilllog-th-lvl {
    padding: 6px 5px;
    color: var(--pip-color);
    text-align: center;
    white-space: nowrap;
    font-size: 0.75rem;
    min-width: 36px;
    cursor: help;
    opacity: 0.8;
}
.skilllog-th-total {
    padding: 6px 8px;
    color: #ffd080;
    text-align: center;
    font-size: 0.75rem;
    white-space: nowrap;
    min-width: 52px;
}
.skilllog-th-final {
    padding: 6px 8px;
    color: rgba(255,255,255,0.55);
    text-align: center;
    font-size: 0.76rem;
    white-space: nowrap;
    min-width: 44px;
}
.skilllog-section-row { background: transparent !important; }
.skilllog-section-label {
    padding: 8px 10px 3px;
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: rgba(200,255,210,0.3);
    text-transform: uppercase;
    border-top: 1px solid rgba(100,255,100,0.07);
}
.skilllog-row:nth-child(even) { background: rgba(100,255,100,0.02); }
.skilllog-row:hover { background: rgba(100,255,100,0.05); }
.skilllog-row-tagged:nth-child(even) { background: rgba(255,208,128,0.025); }
.skilllog-row-tagged:hover { background: rgba(255,208,128,0.05); }
.skilllog-skill-name {
    padding: 4px 10px;
    color: rgba(200,255,210,0.78);
    font-size: 0.80rem;
    white-space: nowrap;
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
}
.skilllog-row-tagged .skilllog-skill-name { color: #ffd080; }
.skilllog-row:nth-child(even) .skilllog-skill-name { background: rgba(8,14,8,1); }
.skilllog-row:hover .skilllog-skill-name { background: rgba(12,20,12,1); }
.skilllog-row-tagged:nth-child(even) .skilllog-skill-name { background: rgba(14,12,4,1); }
.skilllog-row-tagged:hover .skilllog-skill-name { background: rgba(18,15,5,1); }
.skilllog-name-star { color: #ffd080; margin-right: 3px; font-size: 0.76rem; }
.skilllog-cell {
    padding: 4px 5px;
    text-align: center;
    border-left: 1px solid rgba(100,255,100,0.06);
    font-size: 0.80rem;
}
.skilllog-zero { color: rgba(255,255,255,0.14); font-size: 0.62rem; }
.skilllog-gain { color: #80ffb0; font-weight: bold; }
.skilllog-tagged { color: #ffd080; }
.skilllog-star { font-size: 0.55rem; margin-left: 1px; vertical-align: super; opacity: 0.8; }
.skilllog-total-cell {
    padding: 4px 8px;
    text-align: center;
    border-left: 1px solid rgba(255,208,128,0.18);
    color: #ffd080;
    font-weight: bold;
    font-size: 0.80rem;
    white-space: nowrap;
}
.skilllog-final-cell {
    padding: 4px 8px;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.65);
    font-weight: bold;
    font-size: 0.82rem;
}
.skilllog-pts-row td { border-top: 1px solid rgba(100,255,100,0.1); }
.skilllog-budget-label { font-size: 0.55rem !important; letter-spacing: 1px; opacity: 0.38; padding: 4px 10px !important; }
.skilllog-budget-cell { font-size: 0.6rem !important; color: rgba(200,255,210,0.3) !important; padding: 3px 5px !important; }
.skilllog-budget-total { text-align: center; font-size: 0.6rem; color: rgba(200,255,210,0.3); padding: 3px 8px; border-left: 1px solid rgba(100,255,100,0.08); }
.skilllog-footnote { font-size: 0.55rem; opacity: 0.28; text-align: center; margin-top: 12px; letter-spacing: 0.04em; line-height: 1.8; }

/* ══════════════════════════════════════════════
   SPECIAL INFO MODAL
══════════════════════════════════════════════ */
.spec-info-btn {
    cursor: pointer;
    transition: color var(--t-fast);
}
.spec-info-btn:hover {
    color: #fff;
    text-shadow: 0 0 8px var(--pip-color);
}

.sinfo-effect-row {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.04em;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    line-height: 1.4;
    overflow-wrap: break-word;
}
.sinfo-effect-row:last-child { border-bottom: none; }

/* Companion box inside CHA modal */
.sinfo-companion-box {
    margin-top: 14px;
    border: 1px solid rgba(255,136,204,0.3);
    border-radius: var(--r-md);
    padding: 10px 12px;
    background: rgba(255,136,204,0.05);
}
.sinfo-companion-header {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    color: #ff88cc;
    font-weight: bold;
    margin-bottom: 8px;
}
.sinfo-companion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.sinfo-slot-val {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ff88cc;
    line-height: 1;
    min-width: 20px;
}
.sinfo-slot-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
}
.sinfo-companion-thresholds {
    margin-top: 8px;
    border-top: 1px solid rgba(255,136,204,0.15);
    padding-top: 8px;
}
.sinfo-thresh {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    padding: 2px 0;
    letter-spacing: 0.04em;
}
.sinfo-thresh-met {
    font-size: 0.72rem;
    color: #ff88cc;
    padding: 2px 0;
    letter-spacing: 0.04em;
    font-weight: bold;
}

/* ══════════════════════════════════════════════
   TRAIT DETAIL MODAL & CHIP UPDATES
══════════════════════════════════════════════ */
.st-tag-detail-btn {
    background: rgba(100,255,100,0.1);
    border: 1px solid rgba(100,255,100,0.25);
    color: rgba(100,255,100,0.7);
    font-size: 0.78rem;
    font-weight: bold;
    padding: 0 5px;
    cursor: pointer;
    border-radius: var(--r-sm);
    font-family: inherit;
    line-height: 1.4;
    transition: background 0.1s;
}
.st-tag-detail-btn:hover {
    background: rgba(100,255,100,0.22);
    color: var(--pip-color);
}

/* ══════════════════════════════════════════════
   ARMOR CARD STATS ROW
══════════════════════════════════════════════ */
.gear-armor-stats-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    align-items: flex-end;
}
.gear-armor-stats-row .gear-field-group {
    flex: 0 0 auto;
}
.gear-armor-stats-row .gear-field-effect {
    flex: 1 1 auto;
}
.gear-stat-input {
    width: 60px !important;
    text-align: center;
}

/* ══════════════════════════════════════════════
   TRAIT PERK PICKER — ineligible cards
══════════════════════════════════════════════ */
.pperk-ineligible {
    opacity: 0.45;
    border-color: rgba(100,100,100,0.3) !important;
}
.pperk-ineligible:hover {
    opacity: 0.7;
    border-color: rgba(255,160,50,0.5) !important;
    background: rgba(255,160,50,0.05) !important;
}
.pperk-ineligible .pperk-name {
    color: rgba(200,200,200,0.8) !important;
}
.pperk-ineligible .pperk-take-btn {
    border-color: rgba(255,160,50,0.5) !important;
    color: rgba(255,160,50,0.7) !important;
}
.pperk-inelig-tag {
    font-size: 0.78rem;
    background: rgba(255,100,50,0.15);
    border: 1px solid rgba(255,100,50,0.35);
    color: rgba(255,120,60,0.9);
    padding: 1px 5px;
    border-radius: var(--r-sm);
    letter-spacing: 0.06em;
    margin-left: 4px;
}
.pperk-trait-card {
    border-top: 2px solid rgba(200,255,212,0.3) !important;
}

/* ══════════════════════════════════════════════
   SPECIAL RANK TITLES
══════════════════════════════════════════════ */
.special-row {
    position: relative;
}
.spec-rank-title {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(150,255,150,0.6);
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    text-shadow: 0 0 6px rgba(40,255,40,0.3);
}
/* Give special rows a bit more breathing room for rank title */
#special-list .special-row {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════
   DELTA SOURCE TAGS (T = TRAIT, P = PERK)
══════════════════════════════════════════════ */
.delta-src-tag {
    font-size: 0.64rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    margin-left: 2px;
    vertical-align: super;
    opacity: 0.75;
}
.sdelta-perk {
    color: #ffcc44 !important;
    background: rgba(255,200,50,0.12) !important;
    border-color: rgba(255,200,50,0.35) !important;
}
.sdelta-perk.sdelta-neg {
    color: #ff9944 !important;
    background: rgba(255,140,50,0.12) !important;
    border-color: rgba(255,140,50,0.35) !important;
}

/* ══════════════════════════════════════════════
   HEADER SUBTITLE
══════════════════════════════════════════════ */
.os-title-sub {
    font-size: 0.7em;
    opacity: 0.45;
    letter-spacing: 0.08em;
    font-weight: normal;
    margin-left: 4px;
}

/* ov-card trait tint when data-type=trait on zoom modal */
#perk-zoom-modal .perk-zoom-box[data-type="trait"] {
    border-color: rgba(200,255,212,0.4) !important;
}
#perk-zoom-modal .perk-zoom-box[data-type="trait"] #perk-zoom-name {
    color: #c8ffd4 !important;
}
#perk-zoom-modal .perk-zoom-box[data-type="trait"] #perk-zoom-req {
    color: rgba(200,255,212,0.6) !important;
}

/* Perk dependency graph */
#perk-graph-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
#perk-graph-container > div > div:hover {
    background: rgba(255,255,255,0.03);
    border-radius: var(--r-md);
}

/* tab-nav alignment */
.tab-nav button { text-align: center; }

/* banner char name centering */
.char-banner-name { text-align: center; }

/* prog section labels center */
.prog-section-label { text-align: center; justify-content: center; }

/* overview summary card labels centered */
.ov-card .ov-sub { text-align: center; }

/* skill list row name */
.skill-row-name {
    /* Text wrapping allowed */
}

/* identity block — center labels */
.identity-field label { text-align: center; display: block; }

/* special-header text center */
.special-header-row { text-align: center; }

/* perk zoom modal desc — improved contrast */
#perk-zoom-desc { 
    color: rgba(220,255,220,0.92) !important; 
    line-height: 1.75 !important;
    font-size: 0.9rem !important;
}
#perk-zoom-req { color: #ffd060 !important; }

/* gear card labels center */
.gear-field-label { 
    display: block; 
    text-align: center;
    color: rgba(180,255,180,0.55);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

/* Perk card desc text - more readable */
.pperk-desc {
    color: rgba(210,255,210,0.75) !important;
    line-height: 1.55 !important;
}
.pperk-req {
    color: rgba(255,200,60,0.75) !important;
}
.pperk-name { color: var(--pip-color) !important; }

/* Progression perk info text */
.perk-info-desc { 
    color: rgba(210,255,210,0.8) !important;
    line-height: 1.6 !important;
}
.perk-info-req { color: rgba(255,210,60,0.8) !important; }

/* Trait slot name in progression */
.trait-slot-name { 
    color: #c8ffd4 !important;
    letter-spacing: 0.05em;
}

/* prog section label backgrounds */
.plab-perk   { background: rgba(40,255,40,0.07) !important; }
.plab-trait  { background: rgba(200,255,212,0.06) !important; }
.plab-bonus  { background: rgba(100,180,255,0.06) !important; }
.plab-reward { background: rgba(255,200,80,0.06) !important; }
.plab-int    { background: rgba(192,160,255,0.06) !important; }
.plab-implant{ background: rgba(100,220,255,0.06) !important; }
.plab-gear   { background: rgba(100,255,200,0.06) !important; }

/* prog notes textarea placeholder */
.prog-notes-input::placeholder { color: rgba(150,220,150,0.25) !important; }

/* starting trait chips */
.st-tag-chip {
    background: rgba(200,255,212,0.06) !important;
    border-color: rgba(200,255,212,0.25) !important;
}
.st-tag-name { color: #c8ffd4 !important; }

/* Gear card inputs */
.gear-field-input {
    color: rgba(200,255,200,0.9) !important;
}
.gear-field-input::placeholder { 
    color: rgba(100,180,100,0.35) !important;
}

/* modal box — use CSS vars so all themes apply correctly */
.modal-box {
    background: var(--pip-bg-2, #071010) !important;
    border: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),0.30) !important;
}

/* bonus perk row border */
.prog-row.bonus-perk-row {
    border-left-color: rgba(100,180,255,0.5) !important;
}

/* ══════════════════════════════════════════════
   UNDO BUTTON
══════════════════════════════════════════════ */
#undo-btn {
    border: 1px solid rgba(100,200,255,0.3) !important;
    border-bottom: 1px solid rgba(100,200,255,0.3) !important;
    color: rgba(100,200,255,0.55);
    padding: 5px 12px;
    cursor: pointer;
    font-size: 0.78rem;
    background: transparent;
    letter-spacing: 1px;
    transition: all var(--t-slow);
}
#undo-btn:not([disabled]):hover {
    border-color: rgba(100,200,255,0.7) !important;
    color: rgba(100,220,255,0.9);
    background: rgba(100,200,255,0.06) !important;
    box-shadow: 0 0 8px rgba(100,200,255,0.15);
}
#undo-btn[disabled] { cursor: default; }
#undo-btn.undo-flash {
    background: rgba(100,200,255,0.15) !important;
    border-color: rgba(100,200,255,0.8) !important;
    color: rgba(150,230,255,1);
}

/* ══════════════════════════════════════════════
   ACTION STAR CHOICE MODAL
══════════════════════════════════════════════ */
.action-star-choice-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,200,50,0.04);
    border: 1px solid rgba(255,200,50,0.2) !important;
    border-bottom: 1px solid rgba(255,200,50,0.2) !important;
    color: var(--pip-color);
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    transition: all var(--t-base);
    width: 100%;
}
.action-star-choice-btn:hover {
    background: rgba(255,200,50,0.1) !important;
    border-color: rgba(255,200,50,0.6) !important;
    box-shadow: 0 0 12px rgba(255,200,50,0.1);
}
.asc-icon {
    font-size: 1.5rem;
    color: #ffd060;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.asc-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffd060;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}
.asc-desc {
    font-size: 0.76rem;
    color: rgba(255,200,80,0.55);
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════
   WEAPON REQ ROW
══════════════════════════════════════════════ */
.gear-weapon-req-row {
    align-items: flex-end;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.gear-str-req-group { flex: 0 0 60px; }
.gear-skill-type-group { flex: 1; }
.gear-skill-req-group { flex: 0 0 72px; }
.gear-skill-type-select {
    width: 100%;
    font-size: 0.7rem !important;
    padding: 2px 4px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--pip-color);
}
.gear-str-req-input, .gear-skill-req-input {
    text-align: center;
}

/* ══════════════════════════════════════════════
   TRAIT PICKER GRID (perk-picker style)
══════════════════════════════════════════════ */
.ptrait-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 8px;
    align-content: start;
}

.ptrait-card {
    background: rgba(200,255,212,0.03);
    border: 1px solid rgba(200,255,212,0.2);
    border-radius: var(--r-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    position: relative;
}
.ptrait-card:hover {
    background: rgba(200,255,212,0.09);
    border-color: rgba(200,255,212,0.55);
}
.ptrait-card:hover .ptrait-take-btn {
    background: #c8ffd4;
    color: #000;
}

.ptrait-ineligible {
    opacity: 0.55;
    border-color: rgba(200,255,212,0.1);
}
.ptrait-ineligible:hover {
    opacity: 0.85;
    border-color: rgba(255,180,60,0.5);
    background: rgba(255,180,60,0.05);
}

.ptrait-taken {
    opacity: 0.4;
    border-color: rgba(200,255,212,0.12);
    cursor: default;
}
.ptrait-taken:hover {
    background: rgba(200,255,212,0.03);
    border-color: rgba(200,255,212,0.12);
}

.ptrait-name {
    color: #c8ffd4;
    font-size: 1.0rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    flex: 1;
    min-width: 0;
}

.ptrait-badge {
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    flex-shrink: 0;
}
.ptrait-elig-badge {
    background: rgba(200,255,212,0.1);
    border: 1px solid rgba(200,255,212,0.35);
    color: #c8ffd4;
}
.ptrait-inelig-badge {
    background: rgba(255,150,50,0.1);
    border: 1px solid rgba(255,150,50,0.35);
    color: rgba(255,180,80,0.85);
}
.ptrait-taken-badge {
    background: rgba(200,255,212,0.07);
    border: 1px solid rgba(200,255,212,0.2);
    color: rgba(200,255,212,0.5);
}

.ptrait-take-btn {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.76rem;
    background: transparent;
    border: 1px solid rgba(200,255,212,0.3) !important;
    border-bottom: 1px solid rgba(200,255,212,0.3) !important;
    color: #c8ffd4;
    cursor: pointer;
    letter-spacing: 0.06em;
    align-self: flex-start;
    transition: background var(--t-fast);
}
.ptrait-taken .ptrait-take-btn {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 768px) {
    .ptrait-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Reward Perk Card (gold variant) ─────────────────────────── */
.ptrait-card-gold {
    background: rgba(255,200,80,0.03) !important;
    border-color: rgba(255,200,80,0.2) !important;
}
.ptrait-card-gold:hover {
    background: rgba(255,200,80,0.09) !important;
    border-color: rgba(255,200,80,0.55) !important;
}
.rp-name {
    color: #ffd080;
    font-size: 1.0rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    flex: 1;
    min-width: 0;
}
.rp-source-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: rgba(255,200,80,0.12);
    border: 1px solid rgba(255,200,80,0.3);
    color: #ffd080;
    display: inline-block;
}
.rp-cond-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: rgba(255,180,50,0.1);
    border: 1px solid rgba(255,180,50,0.3);
    color: #ffcc60;
    white-space: nowrap;
    flex-shrink: 0;
}
.rp-add-btn {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.76rem;
    background: transparent;
    border: 1px solid rgba(255,200,80,0.3) !important;
    border-bottom: 1px solid rgba(255,200,80,0.3) !important;
    color: #ffd080;
    cursor: pointer;
    letter-spacing: 0.06em;
    align-self: flex-start;
    transition: background var(--t-fast);
}
.rp-add-btn:hover { background: rgba(255,200,80,0.15); }

/* ── Internalized Trait Card (purple variant) ────────────────── */
.ptrait-card-purple {
    background: rgba(200,160,255,0.03) !important;
    border-color: rgba(200,160,255,0.2) !important;
}
.ptrait-card-purple:hover {
    background: rgba(200,160,255,0.09) !important;
    border-color: rgba(200,160,255,0.55) !important;
}
.it-name {
    color: #c8a0ff;
    font-size: 1.0rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    flex: 1;
    min-width: 0;
}
.it-add-btn {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.76rem;
    background: transparent;
    border: 1px solid rgba(200,160,255,0.3) !important;
    border-bottom: 1px solid rgba(200,160,255,0.3) !important;
    color: #c8a0ff;
    cursor: pointer;
    letter-spacing: 0.06em;
    align-self: flex-start;
    transition: background var(--t-fast);
}
.it-add-btn:hover { background: rgba(200,160,255,0.15); }

/* ═══════════════════════════════════════════════════════════════════════
   NUCLEAR SUNSET — CUSTOM FACTION HUD THEMES
   All selectors use :not(.mode-hc) — HARDERCORE always wins.
   Variables set per-theme are picked up everywhere that uses var().
   Hard-coded rgba tints are overridden with matching faction colours.
═══════════════════════════════════════════════════════════════════════ */

/* ── Theme selector widget ──────────────────────────────────────── */
.theme-selector-wrap {
    display: flex; align-items: center; gap: 3px; flex-shrink: 0;
}
.theme-sel-label {
    font-size: 0.78rem; letter-spacing: 1.5px; opacity: 0.4;
    margin-right: 3px; white-space: nowrap;
}
.theme-btn {
    font-size: 0.75rem !important; font-weight: bold;
    padding: 3px 8px !important;
    letter-spacing: 0.5px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    background: transparent !important;
    color: rgba(255,255,255,0.35) !important;
    transition: all var(--t-base); white-space: nowrap;
}
.theme-btn:hover:not(.active-theme) {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.75) !important;
    border-color: rgba(255,255,255,0.4) !important;
    border-bottom-color: rgba(255,255,255,0.4) !important;
}
/* Active: take on the faction colour */
.theme-btn.active-theme {
    color: #000 !important;
    box-shadow: 0 0 8px currentColor;
}
/* NS default */
.theme-btn[data-theme=""].active-theme      { background: #28ff28 !important; border-color: #28ff28 !important; }
.tbtn-bos.active-theme                      { background: #60a8f0 !important; border-color: #60a8f0 !important; }
.tbtn-enc.active-theme                      { background: #c8d8ec !important; border-color: #c8d8ec !important; }
.tbtn-v21.active-theme                      { background: #ff2880 !important; border-color: #ff2880 !important; color: #fff !important; }
.tbtn-leg.active-theme                      { background: #cc2800 !important; border-color: #cc2800 !important; color: #fff !important; }
.tbtn-ncr.active-theme                      { background: #c8a840 !important; border-color: #c8a840 !important; }
/* Hover accent hints */
.tbtn-bos:hover  { color: #60a8f0 !important; border-color: #60a8f0 !important; border-bottom-color: #60a8f0 !important; }
.tbtn-enc:hover  { color: #c8d8ec !important; border-color: #c8d8ec !important; border-bottom-color: #c8d8ec !important; }
.tbtn-v21:hover  { color: #ff2880 !important; border-color: #ff2880 !important; border-bottom-color: #ff2880 !important; }
.tbtn-leg:hover  { color: #cc2800 !important; border-color: #cc2800 !important; border-bottom-color: #cc2800 !important; }
.tbtn-ncr:hover  { color: #c8a840 !important; border-color: #c8a840 !important; border-bottom-color: #c8a840 !important; }
.tbtn-hou.active-theme                      { background: #c060ff !important; border-color: #c060ff !important; color: #fff !important; }
.tbtn-shi.active-theme                      { background: #38c8a8 !important; border-color: #38c8a8 !important; }
.tbtn-vtc.active-theme                      { background: #ffd000 !important; border-color: #ffd000 !important; }
.tbtn-hou:hover  { color: #c060ff !important; border-color: #c060ff !important; border-bottom-color: #c060ff !important; }
.tbtn-shi:hover  { color: #38c8a8 !important; border-color: #38c8a8 !important; border-bottom-color: #38c8a8 !important; }
.tbtn-vtc:hover  { color: #ffd000 !important; border-color: #ffd000 !important; border-bottom-color: #ffd000 !important; }


/* ═════════════════════════════════════════════════════════════════
   SHARED THEME MIXIN APPROACH
   Step 1: each theme sets CSS variables.
   Step 2: a shared rule block targeting [class*="theme-"] remaps
   every hard-coded rgba(40,255,40,...) tint → var(--tc-r,40),
   var(--tc-g,255), var(--tc-b,40).  Keeps overrides DRY.
   We also set --tc-r/g/b per theme for the tint rebuilding.
═════════════════════════════════════════════════════════════════ */







/* ═══════════════════════════════════════════════════════
   KARMA SELECTOR
═══════════════════════════════════════════════════════ */
.karma-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}
.karma-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 5px;
    font-size: 0.75rem;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid rgba(var(--tc-r,100),var(--tc-g,200),var(--tc-b,100),0.25);
    background: rgba(var(--tc-r,100),var(--tc-g,200),var(--tc-b,100),0.04);
    color: rgba(var(--tc-r,100),var(--tc-g,200),var(--tc-b,100),0.5);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: all var(--t-base);
    white-space: nowrap;
}
.karma-btn:hover {
    border-color: var(--kc, var(--pip-color));
    color: var(--kc, var(--pip-color));
    background: rgba(var(--tc-r,100),var(--tc-g,200),var(--tc-b,100),0.08);
}
.karma-btn.karma-active {
    border-color: var(--kc, var(--pip-color));
    color: var(--kc, var(--pip-color));
    background: rgba(var(--tc-r,100),var(--tc-g,200),var(--tc-b,100),0.12);
    font-weight: bold;
}

/* ═══════════════════════════════════════════════════════
   TRANSIT / HUMBLED BUTTON
═══════════════════════════════════════════════════════ */
.transit-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    font-family: inherit;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: 1px solid rgba(255, 80, 40, 0.45);
    background: rgba(255, 60, 20, 0.07);
    color: #ff7040;
    border-radius: var(--r-sm);
    margin-left: 6px;
    transition: all var(--t-base);
}
.transit-btn:hover {
    border-color: #ff6030;
    background: rgba(255,60,20,0.14);
    color: #ff8050;
}

/* ═══════════════════════════════════════════════════════
   HUMBLED STATUS BANNER
═══════════════════════════════════════════════════════ */
#humbled-status-banner {
    display: flex;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255, 60, 20, 0.08);
    border-bottom: 1px solid rgba(255, 80, 40, 0.4);
    color: #ff9060;
    font-size: 0.78rem;
    line-height: 1.5;
    flex-wrap: wrap;
    align-items: center;
}
.hb-icon { font-size: 1.2em; }
.hb-main { font-weight: bold; color: #ffb080; overflow-wrap: break-word; }
.hb-sep  { color: rgba(255,150,80,0.4); }
.hb-stats { color: #ff8050; overflow-wrap: break-word; }
.hb-rule  { color: #ffc090; font-style: italic; overflow-wrap: break-word; }

/* ═══════════════════════════════════════════════════════
   HUMBLED MODAL SPECIAL PICKER
═══════════════════════════════════════════════════════ */
.humbled-special-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.humbled-stat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    font-family: inherit;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(255,80,40,0.35);
    background: rgba(255,50,20,0.05);
    color: #ff8060;
    border-radius: var(--r-md);
    transition: all var(--t-base);
    font-size: 0.72em;
    gap: 3px;
}
.humbled-stat-btn:hover {
    border-color: #ff6030;
    background: rgba(255,60,20,0.12);
}
.humbled-stat-btn.humbled-stat-picked {
    border-color: #ff6030;
    background: rgba(255,60,20,0.2);
    color: #ffb080;
}
.humbled-stat-btn.humbled-stat-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.hs-name { font-weight: bold; font-size: 1em; }
.hs-val  { font-size: 1.3em; font-weight: bold; color: var(--pip-color); }
.hs-arrow { font-size: 0.85em; color: #ff6030; }

/* ═══ TRANSIT BTN ═══ */
#transit-btn.transit-btn { padding:6px 11px; font-size: 0.78rem; letter-spacing:0.07em; white-space:nowrap; flex-shrink:0; }

/* ═══ KARMA FACE ═══ */
.karma-face { text-align:center; padding:5px 0 4px; line-height:1.35; min-height:32px; }
.kface-halo { font-size: 0.76rem; letter-spacing:0.35em; opacity:0.75; margin-bottom:1px; }
.kface-glyph { font-size:1.0rem; letter-spacing:0.08em; transition:color 0.3s,text-shadow 0.3s; }
.kface-sub { font-size: 0.72rem; letter-spacing:0.22em; opacity:0.6; margin-top:2px; text-transform:uppercase; }

/* ═══ COMMENDATIONS ═══ */
.commend-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--pip-rgb,100,200,100), 0.20);
}
.commend-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.22em;
    color: var(--pip-color);
    opacity: 0.7;
    padding: 0 2px 8px;
    text-transform: uppercase;
}
.commend-header::before {
    content: '';
    display: block;
    width: 12px;
    height: 1px;
    background: var(--pip-color);
    opacity: 0.6;
}
.commend-header::after {
    content: '';
    display: block;
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--pip-color), transparent);
    opacity: 0.3;
}
#badge-panel { padding: 0 1px; display: flex; flex-direction: column; gap: 6px; }
.badge-empty {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.15);
    letter-spacing: 0.12em;
    text-align: center;
    padding: 10px 4px;
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: var(--r-sm);
}
.badge-group-block { display: flex; flex-direction: column; gap: 3px; }
.badge-group-label {
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    font-weight: bold;
    color: var(--pip-color);
    opacity: 0.45;
    padding: 2px 4px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--pip-rgb,100,200,100), 0.12);
    margin-bottom: 2px;
}
/* Per-group accent colours */
.badge-group-block[data-group="ARSENAL"]      { --badge-accent: #ffd060; --badge-rgb: 255,208,96; }
.badge-group-block[data-group="COLLECTIBLES"] { --badge-accent: #60d8ff; --badge-rgb: 96,216,255; }
.badge-group-block[data-group="BODY MODS"]    { --badge-accent: #80b8ff; --badge-rgb: 128,184,255; }
.badge-group-block[data-group="CHRONICLE"]    { --badge-accent: #ff9840; --badge-rgb: 255,152,64; }
.badge-group-block[data-group="LIBRARIAN"]    { --badge-accent: #a8d880; --badge-rgb: 168,216,128; }
/* Fallback if group unknown */
.badge-group-block { --badge-accent: var(--pip-color); --badge-rgb: var(--tc-r,100),var(--tc-g,200),var(--tc-b,100); }
.badge-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(var(--badge-rgb), 0.25);
    border-left: 2px solid var(--badge-accent);
    border-radius: var(--r-sm);
    background: rgba(var(--badge-rgb), 0.05);
    position: relative;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.badge-card::before {
    /* subtle top-edge highlight */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--badge-accent), transparent 80%);
    opacity: 0.25;
}
.badge-card:hover {
    background: rgba(var(--badge-rgb), 0.10);
    border-color: rgba(var(--badge-rgb), 0.5);
    border-left-color: var(--badge-accent);
    box-shadow: 0 0 6px rgba(var(--badge-rgb), 0.12);
}
.badge-icon-wrap {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--badge-rgb), 0.10);
    border: 1px solid rgba(var(--badge-rgb), 0.25);
    border-radius: var(--r-sm);
    font-size: 0.72rem;
    flex-shrink: 0;
    color: var(--badge-accent);
}
.badge-label {
    font-size: 0.78rem;
    letter-spacing: 0.07em;
    color: var(--badge-accent);
    font-weight: bold;
    flex: 1;
    line-height: 1.3;
}
.badge-check {
    font-size: 0.64rem;
    color: var(--badge-accent);
    opacity: 0.6;
    flex-shrink: 0;
}

/* ═══ UNIQUES COLLAPSE BUTTON ═══ */
.uni-section-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.uni-section-header h2 { margin:0; }
.uni-toggle-all-btn { font-family:inherit; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; padding:4px 10px; background:transparent; border:1px solid rgba(var(--pip-rgb,100,200,100),0.35); color:var(--pip-color); border-radius:var(--r-sm); opacity:0.7; transition:opacity 0.15s,background 0.15s; white-space:nowrap; flex-shrink:0; }
.uni-toggle-all-btn:hover { opacity:1; background:rgba(var(--pip-rgb,100,200,100),0.08); }


/* ═══ BOOKS TAB ═══ */
.books-header { padding:10px 0 14px; border-bottom:1px solid rgba(var(--pip-rgb,100,200,100),0.18); margin-bottom:14px; }
.books-title { font-size:0.92rem; font-weight:bold; letter-spacing:0.18em; color:var(--pip-color); margin-bottom:4px; }
.books-sub { font-size: 0.78rem; opacity:0.7; letter-spacing:0.07em; margin-bottom:6px; line-height:1.6; }
.books-ideologue-active { color:#ffd060; margin-left:8px; letter-spacing:0.1em; }
.books-count { font-size:0.74rem; letter-spacing:0.14em; color:var(--pip-color); opacity:0.8; }
.books-empty { padding:40px 20px; text-align:center; opacity:0.4; font-size:0.85rem; letter-spacing:0.1em; }
.books-checklist { display:flex; flex-direction:column; gap:12px; }
.book-section { border:1px solid rgba(var(--pip-rgb,100,200,100),0.18); border-radius:var(--r-md); background:rgba(0,0,0,0.2); overflow:hidden; }
.book-section .header-row { padding:10px 12px; cursor:pointer; user-select:none; }
.book-section .header-row h2 { font-size:0.85rem; }
.book-section-skill-inline { font-size:0.7rem; opacity:0.5; letter-spacing:0.15em; text-transform:uppercase; font-weight:normal; }
.book-copy-item { display:flex; align-items:flex-start; gap:8px; padding:7px 12px; cursor:pointer; transition:background var(--t-fast); border-bottom:1px solid rgba(var(--pip-rgb,100,200,100),0.06); line-height:1.4; user-select:none; }
.book-copy-item:last-child { border-bottom:none; }
.book-copy-item:hover { background:rgba(var(--pip-rgb,100,200,100),0.06); }
.book-copy-item .tag-marker { flex-shrink:0; font-size:0.78rem; color:var(--pip-color); opacity:0.5; margin-top:1px; font-family:monospace; }
.book-copy-found .tag-marker { opacity:1; }
.book-copy-location { font-size:0.8rem; font-weight:bold; color:var(--pip-color); flex-shrink:0; min-width:140px; max-width:180px; }
/* Override grid-tidy to flex column for book category sections */
.grid-tidy[data-category^="book-"] { display:flex; flex-direction:column; }

/* ═══ BOOK SKILL BADGE ═══ */
.sdelta-book { background:rgba(100,180,255,0.15) !important; border-color:rgba(100,180,255,0.4) !important; color:#7eccff !important; }


/* (ASCII VAULT BOY NOT USED IN THIS VERSION) */

/* ══════════════════════════════════════════════════════════════════
   NEW FACTION THEMES — NUCLEAR SUNSET v2
   All 8 canonical factions with distinctive visual identities
══════════════════════════════════════════════════════════════════ */

/* ── Enclave — Icy Institutional Terminal ───────────────────────
   "The Enclave is the last, best hope for humanity."
   Cold steel-white on true near-black. Clinical authority.
   Fine ruled government-form lines — federal data terminal.
──────────────────────────────────────────────────────────────── */
body.theme-enclave:not(.mode-hc) {
    --pip-color:  #d8e8f8;
    --pip-bg:     #000102;
    --pip-bg-2:   #010306;
    --pip-bg-3:   #020508;
    --pip-border: #0e1c2c;
    --glow-sm:    0 0 4px  rgba(216,232,248,.18);
    --glow-md:    0 0 10px rgba(216,232,248,.12);
    --glow-lg:    0 0 22px rgba(216,232,248,.07);
    --tc-r: 216; --tc-g: 232; --tc-b: 248;
    --pip-rgb: 216, 232, 248;
}
body.theme-enclave:not(.mode-hc) {
    background-image:
        /* government form — tight ruled lines, very bureaucratic */
        repeating-linear-gradient(0deg, transparent, transparent 20px,
            rgba(216,232,248,.010) 20px, rgba(216,232,248,.010) 21px),
        /* heavy vertical column separators — classified doc structure */
        repeating-linear-gradient(90deg, transparent, transparent 80px,
            rgba(216,232,248,.016) 80px, rgba(216,232,248,.016) 82px,
            transparent 82px, transparent 320px,
            rgba(216,232,248,.008) 320px, rgba(216,232,248,.008) 321px),
        /* cold institutional vignette */
        radial-gradient(ellipse at 50% 0%, rgba(5,18,36,.92) 0%, transparent 60%);
}
body.theme-enclave:not(.mode-hc) header {
    background: linear-gradient(180deg, #060e18 0%, #000102 100%);
    border-bottom: 1px solid rgba(216,232,248,.55);
    border-top: 3px solid rgba(216,232,248,.35);
    box-shadow: 0 0 16px rgba(216,232,248,.08), inset 0 -1px 0 rgba(216,232,248,.18);
}
body.theme-enclave:not(.mode-hc) .os-title {
    color: #d8e8f8;
    text-shadow: 0 0 6px rgba(216,232,248,.28);
    letter-spacing: 0.32em;
    font-variant: small-caps;
}
body.theme-enclave:not(.mode-hc) h2 {
    border-left: 1px solid rgba(216,232,248,.50);
    border-right: 1px solid rgba(216,232,248,.12);
    padding-left: 8px;
}
body.theme-enclave:not(.mode-hc) .tab-nav button.active {
    background: rgba(216,232,248,.08);
    border-color: rgba(216,232,248,.55);
    color: #d8e8f8;
}

/* ── Brotherhood of Steel — Cold Power-Armour Blue ─────────────
   "Ad Victoriam. Knowledge is power."
   Icy steel blue HUD. Dark navy chassis. Military hardtech.
   Circuit-board grid with structural corner rivets.
──────────────────────────────────────────────────────────────── */
body.theme-bos:not(.mode-hc) {
    --pip-color:  #4090e0;
    --pip-bg:     #010306;
    --pip-bg-2:   #010610;
    --pip-bg-3:   #020a1a;
    --pip-border: #0a1e40;
    --glow-sm:    0 0 8px  rgba(64,144,224,.35);
    --glow-md:    0 0 20px rgba(64,144,224,.26);
    --glow-lg:    0 0 40px rgba(64,144,224,.18);
    --tc-r: 64; --tc-g: 144; --tc-b: 224;
    --pip-rgb: 64, 144, 224;
}
body.theme-bos:not(.mode-hc) {
    background-image:
        /* power armour plating — heavy hexagonal armour tiles */
        repeating-linear-gradient(30deg, transparent, transparent 22px,
            rgba(64,144,224,.020) 22px, rgba(64,144,224,.020) 24px),
        repeating-linear-gradient(-30deg, transparent, transparent 22px,
            rgba(64,144,224,.020) 22px, rgba(64,144,224,.020) 24px),
        repeating-linear-gradient(90deg, transparent, transparent 22px,
            rgba(64,144,224,.010) 22px, rgba(64,144,224,.010) 23px),
        /* heavy top vignette — bunker depth */
        radial-gradient(ellipse at 50% 0%, rgba(2,12,40,.82) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(1,6,20,.50) 0%, transparent 55%);
}
body.theme-bos:not(.mode-hc) header {
    background: linear-gradient(180deg, #04122a 0%, #010306 100%);
    border-bottom: 3px solid rgba(64,144,224,.70);
    border-top: 1px solid rgba(64,144,224,.18);
    box-shadow: 0 0 32px rgba(64,144,224,.22), inset 0 -2px 0 rgba(64,144,224,.28);
}
body.theme-bos:not(.mode-hc) .os-title {
    color: #4090e0;
    text-shadow: 0 0 12px rgba(64,144,224,.60), 0 0 28px rgba(64,144,224,.25);
    letter-spacing: 0.18em;
}
body.theme-bos:not(.mode-hc) .tab-nav button.active {
    background: rgba(64,144,224,.14);
    border-color: rgba(64,144,224,.70);
    color: #80b8f8;
}
body.theme-bos:not(.mode-hc) h2 {
    border-left: 3px solid rgba(64,144,224,.60);
    padding-left: 8px;
}

/* ── Mr. House / New Vegas — Neon Strip Luxury ─────────────────
   "The House always wins."
   Deep midnight with electric violet neon. Vegas Strip at night.
   Art deco geometry, casino shimmer, pure decadence.
──────────────────────────────────────────────────────────────── */
body.theme-house:not(.mode-hc) {
    --pip-color:  #b030ff;
    --pip-bg:     #020008;
    --pip-bg-2:   #050014;
    --pip-bg-3:   #08001e;
    --pip-border: #280048;
    --glow-sm:    0 0 8px  rgba(176,48,255,.38);
    --glow-md:    0 0 24px rgba(176,48,255,.28);
    --glow-lg:    0 0 50px rgba(176,48,255,.18);
    --tc-r: 176; --tc-g: 48; --tc-b: 255;
    --pip-rgb: 176, 48, 255;
    --accent-gold: #e8c040;
}
body.theme-house:not(.mode-hc) {
    background-image:
        /* skyscraper window grid — New Vegas towers */
        repeating-linear-gradient(90deg, transparent, transparent 28px,
            rgba(176,48,255,.022) 28px, rgba(176,48,255,.022) 30px),
        repeating-linear-gradient(0deg, transparent, transparent 20px,
            rgba(176,48,255,.016) 20px, rgba(176,48,255,.016) 21px),
        /* gold pin-stripe accent */
        repeating-linear-gradient(90deg, transparent, transparent 140px,
            rgba(232,192,64,.012) 140px, rgba(232,192,64,.012) 141px),
        /* deep upper vignette */
        radial-gradient(ellipse at 50% 0%, rgba(60,0,120,.75) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(30,0,80,.35) 0%, transparent 60%);
}
body.theme-house:not(.mode-hc) header {
    background: linear-gradient(180deg, #12002e 0%, #020008 100%);
    border-bottom: 2px solid rgba(176,48,255,.75);
    box-shadow: 0 0 40px rgba(176,48,255,.32), 0 0 10px rgba(232,192,64,.10), inset 0 -1px 0 rgba(176,48,255,.30);
}
body.theme-house:not(.mode-hc) .os-title {
    color: #b030ff;
    text-shadow: 0 0 16px rgba(176,48,255,.65), 0 0 36px rgba(176,48,255,.32);
    letter-spacing: 0.2em;
}
body.theme-house:not(.mode-hc) .tab-nav button.active {
    background: linear-gradient(135deg, #7010b0 0%, #b030ff 100%);
    color: #fff;
    font-weight: bold;
}


/* ── The Shi — Eastern Steel & Jade ─────────────────────────
   "The Emperor's calculations are absolute."
   Cold steel-gray with jade-teal accent. Eastern precision.
   Clean vertical grid, tightly controlled, ancient-modern fusion.
──────────────────────────────────────────────────────────────── */
body.theme-shi:not(.mode-hc) {
    --pip-color:  #38c8a8;
    --pip-bg:     #020508;
    --pip-bg-2:   #04090e;
    --pip-bg-3:   #060e14;
    --pip-border: #0a2a28;
    --glow-sm:    0 0 6px  rgba(56,200,168,.28);
    --glow-md:    0 0 16px rgba(56,200,168,.22);
    --glow-lg:    0 0 32px rgba(56,200,168,.15);
    --tc-r: 56; --tc-g: 200; --tc-b: 168;
    --pip-rgb: 56, 200, 168;
    --accent-crimson: #cc2020;
}
body.theme-shi:not(.mode-hc) {
    background-image:
        /* eastern vertical column grid */
        repeating-linear-gradient(90deg, transparent, transparent 56px,
            rgba(56,200,168,.014) 56px, rgba(56,200,168,.014) 58px),
        /* subtle horizontal dividers */
        repeating-linear-gradient(0deg, transparent, transparent 56px,
            rgba(56,200,168,.008) 56px, rgba(56,200,168,.008) 57px),
        radial-gradient(ellipse at 50% 0%, rgba(4,40,50,.65) 0%, transparent 65%);
}
body.theme-shi:not(.mode-hc) header {
    background: linear-gradient(180deg, #040e14 0%, #020508 100%);
    border-bottom: 3px solid rgba(56,200,168,.7);
    border-top: 1px solid rgba(204,32,32,.35);
    box-shadow: 0 0 22px rgba(56,200,168,.20), inset 0 -1px 0 rgba(56,200,168,.28);
}
body.theme-shi:not(.mode-hc) .os-title {
    color: #38c8a8;
    letter-spacing: 0.28em;
    text-shadow: 0 0 10px rgba(56,200,168,.5);
}
body.theme-shi:not(.mode-hc) h2 {
    border-left: 3px solid #38c8a8;
    padding-left: 8px;
}


/* ── Vault-Tec — Retro-Futurist Gleam ────────────────────────
   "Revolutionizing safety for an uncertain future!"
   Vault-Boy Blue + Yellow. Glossy 1950s plastic. Optimistic!
──────────────────────────────────────────────────────────────── */
body.theme-vaulttec:not(.mode-hc) {
    --pip-color:  #ffd000;
    --pip-bg:     #001a30;
    --pip-bg-2:   #002040;
    --pip-bg-3:   #002850;
    --pip-border: #004070;
    --glow-sm:    0 0 8px  rgba(255,208,0,.30);
    --glow-md:    0 0 20px rgba(255,208,0,.24);
    --glow-lg:    0 0 40px rgba(255,208,0,.16);
    --tc-r: 255; --tc-g: 208; --tc-b: 0;
    --pip-rgb: 255, 208, 0;
    --vault-blue: #1066b8;
}
body.theme-vaulttec:not(.mode-hc) {
    background-image:
        /* retro-futurist hexagon/circle tech pattern */
        radial-gradient(circle at 50% 50%, transparent 30%, rgba(16,102,184,.04) 30%,
            rgba(16,102,184,.04) 31%, transparent 31%) center / 40px 40px,
        repeating-linear-gradient(0deg, transparent, transparent 40px,
            rgba(255,208,0,.018) 40px, rgba(255,208,0,.018) 41px),
        radial-gradient(ellipse at 50% 0%, rgba(16,60,120,.70) 0%, #001a30 100%);
}
body.theme-vaulttec:not(.mode-hc) header {
    background: linear-gradient(180deg, #1066b8 0%, #0a4080 30%, #001a30 100%);
    border-bottom: 3px solid #ffd000;
    box-shadow: 0 0 30px rgba(16,102,184,.4), 0 3px 0 #ffd000;
}
body.theme-vaulttec:not(.mode-hc) .os-title {
    color: #ffd000;
    text-shadow: 0 0 10px rgba(255,208,0,.5), 0 2px 0 rgba(0,0,0,.6);
    letter-spacing: 0.2em;
}
body.theme-vaulttec:not(.mode-hc) .tab-nav button.active {
    background: linear-gradient(135deg, #ffd000 0%, #ffec60 100%);
    color: #001a30;
    font-weight: bold;
}
body.theme-vaulttec:not(.mode-hc) section {
    background: linear-gradient(160deg, #002850 0%, #001a30 60%);
    border-color: rgba(16,102,184,.45) !important;
}
body.theme-vaulttec:not(.mode-hc) .perk-card { border-left-color: rgba(16,102,184,.6); }
body.theme-vaulttec:not(.mode-hc) .perk-card:hover { border-left-color: #ffd000; }


/* ── Nuka-Cola — Atomic Refreshment ───────────────────────────────
   "Enjoy the refreshing taste of the Atomic Age!"
   Vibrant red & blue. Retro cola branding. Bottle cap stars.
   Classic Americana fizz — the taste of victory!
──────────────────────────────────────────────────────────────── */
body.theme-nukacola:not(.mode-hc) {
    --pip-color:  #ff3030;
    --pip-bg:     #000508;
    --pip-bg-2:   #0a0d14;
    --pip-bg-3:   #101420;
    --pip-border: #4a0808;
    --glow-sm:    0 0 8px  rgba(255,48,48,.35);
    --glow-md:    0 0 20px rgba(255,48,48,.28);
    --glow-lg:    0 0 42px rgba(255,48,48,.20);
    --tc-r: 255; --tc-g: 48; --tc-b: 48;
    --pip-rgb: 255, 48, 48;
    --accent-gold: #ffd000;
    --nuka-blue: #1080ff;
}
body.theme-nukacola:not(.mode-hc) {
    background-image:
        /* bottle cap star pattern */
        radial-gradient(circle at 20% 30%, rgba(255,208,0,.03) 0%, transparent 8%),
        radial-gradient(circle at 80% 70%, rgba(255,208,0,.03) 0%, transparent 8%),
        /* racing stripes - retro soda can */
        repeating-linear-gradient(90deg, transparent, transparent 80px,
            rgba(16,128,255,.04) 80px, rgba(16,128,255,.04) 82px,
            transparent 82px, transparent 100px,
            rgba(255,48,48,.04) 100px, rgba(255,48,48,.04) 102px),
        /* deep vignette */
        radial-gradient(ellipse at 50% 0%, rgba(80,0,0,.75) 0%, #000508 100%);
}
body.theme-nukacola:not(.mode-hc) header {
    background: linear-gradient(180deg, #ff3030 0%, #c02020 20%, #000508 100%);
    border-bottom: 3px solid #ff3030;
    border-top: 2px solid #1080ff;
    box-shadow: 0 0 30px rgba(255,48,48,.35), 0 2px 0 #1080ff, inset 0 -2px 0 rgba(16,128,255,.30);
}
body.theme-nukacola:not(.mode-hc) .os-title {
    color: #ff3030;
    text-shadow: 0 0 12px rgba(255,48,48,.6), 0 0 28px rgba(255,48,48,.3),
                 0 2px 0 rgba(16,128,255,.4);
    letter-spacing: 0.25em;
}
body.theme-nukacola:not(.mode-hc) .tab-nav button.active {
    background: linear-gradient(135deg, #ff3030 0%, #ff6060 100%);
    border-color: #1080ff;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(255,48,48,.5), inset 0 1px 0 rgba(16,128,255,.3);
}
body.theme-nukacola:not(.mode-hc) section {
    background: linear-gradient(160deg, #101420 0%, #000508 60%);
    border-color: rgba(255,48,48,.35) !important;
}
body.theme-nukacola:not(.mode-hc) h2 {
    background: rgba(255,48,48,.08);
    border-left: 3px solid #ff3030;
}
body.theme-nukacola:not(.mode-hc) .perk-card { 
    border-left-color: rgba(255,48,48,.4);
    background: rgba(16,128,255,.02);
}
body.theme-nukacola:not(.mode-hc) .perk-card:hover { 
    border-left-color: #ff3030;
    background: rgba(255,48,48,.06);
}

/* ── Sierra Madre — Begin Again ───────────────────────────────────
   "Begin again. Let go."
   Ghostly red mist. Tarnished gold. Casino of the damned.
   Holographic shimmer — the Cloud never leaves you.
──────────────────────────────────────────────────────────────── */
body.theme-sierramadre:not(.mode-hc) {
    --pip-color:  #d4a050;
    --pip-bg:     #060400;
    --pip-bg-2:   #0e0900;
    --pip-bg-3:   #160e00;
    --pip-border: #3e2a00;
    --glow-sm:    0 0 10px rgba(212,160,80,.28);
    --glow-md:    0 0 24px rgba(212,160,80,.20);
    --glow-lg:    0 0 48px rgba(212,160,80,.12);
    --tc-r: 212; --tc-g: 160; --tc-b: 80;
    --pip-rgb: 212, 160, 80;
    --accent-cloud: #a06840;
    --cloud-dust: rgba(255,220,160,.04);
}
body.theme-sierramadre:not(.mode-hc) {
    background-image:
        /* art-deco etching — faded Casino Grande grandeur */
        repeating-linear-gradient(45deg, transparent, transparent 60px,
            rgba(212,160,80,.010) 60px, rgba(212,160,80,.010) 62px),
        repeating-linear-gradient(-45deg, transparent, transparent 60px,
            rgba(212,160,80,.010) 60px, rgba(212,160,80,.010) 62px),
        /* the Cloud — drifting dust wisps */
        radial-gradient(ellipse at 20% 15%, rgba(180,120,40,.10) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 70%, rgba(160,104,64,.08) 0%, transparent 45%),
        radial-gradient(ellipse at 55% 45%, rgba(200,140,60,.05) 0%, transparent 35%),
        /* deep amber vignette */
        radial-gradient(ellipse at 50% 0%, rgba(80,50,0,.85) 0%, #060400 80%);
}
body.theme-sierramadre:not(.mode-hc) header {
    background: linear-gradient(180deg, #3a2200 0%, #1a0e00 50%, #060400 100%);
    border-bottom: 2px solid rgba(212,160,80,.58);
    border-top: 1px solid rgba(212,160,80,.22);
    box-shadow: 0 0 28px rgba(212,160,80,.18), inset 0 -1px 0 rgba(212,160,80,.14);
}
body.theme-sierramadre:not(.mode-hc) .os-title {
    color: #d4a050;
    text-shadow: 0 0 12px rgba(212,160,80,.50), 0 0 28px rgba(212,160,80,.22);
    letter-spacing: 0.30em;
}
body.theme-sierramadre:not(.mode-hc) .tab-nav button.active {
    background: rgba(212,160,80,.10);
    border-color: rgba(212,160,80,.65);
    color: #e0b870;
    box-shadow: 0 0 10px rgba(212,160,80,.28);
}
body.theme-sierramadre:not(.mode-hc) h2 {
    border-left: 2px solid rgba(212,160,80,.50);
    padding-left: 8px;
}
body.theme-sierramadre:not(.mode-hc) section {
    background: linear-gradient(160deg, #1e0c06 0%, #0a0402 60%);
    border-color: rgba(255,96,64,.30) !important;
}
body.theme-sierramadre:not(.mode-hc) h2 {
    background: rgba(255,96,64,.06);
    border-left: 3px solid rgba(255,96,64,.50);
    color: #ff8060;
}
body.theme-sierramadre:not(.mode-hc) .perk-card { 
    border-left-color: rgba(255,96,64,.35);
    background: rgba(200,152,72,.015);
}
body.theme-sierramadre:not(.mode-hc) .perk-card:hover { 
    border-left-color: #ff6040;
    background: rgba(255,96,64,.08);
}

/* Include all new themes in the structural override block */
body.theme-house:not(.mode-hc),
body.theme-shi:not(.mode-hc),
body.theme-vaulttec:not(.mode-hc),
body.theme-vault21:not(.mode-hc),
body.theme-dos:not(.mode-hc),
body.theme-nukacola:not(.mode-hc),
body.theme-sierramadre:not(.mode-hc) {
    & header { box-shadow: var(--glow-md), inset 0 -1px 0 rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10); }
    & section {
        background: linear-gradient(160deg, var(--pip-bg-3) 0%, var(--pip-bg) 60%);
        box-shadow: inset 0 0 60px rgba(0,0,0,.22), 0 1px 0 rgba(var(--tc-r),var(--tc-g),var(--tc-b),.05);
    }
    & h2 { background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.07); }
    & .ov-card {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.04);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.15) !important;
    }
    & .ov-sub { border-bottom-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.15); }
    & .tab-nav button.active {
        box-shadow: 0 0 9px rgba(var(--tc-r),var(--tc-g),var(--tc-b),.40);
    }
    & .scroll-v::-webkit-scrollbar-thumb { background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.30); }
    /* all modal dialogs */
    & .modal-box, & .lvlup-box, & .perk-picker-box, & .perk-zoom-box {
        background: var(--pip-bg-2) !important;
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.38) !important;
        box-shadow: var(--glow-lg), 0 0 80px rgba(0,0,0,.85) !important;
    }
    /* perk picker cards */
    & .pperk-card {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.030);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.20);
    }
    & .pperk-card:hover {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.55);
    }
    & .pperk-name { color: var(--pip-color); }
    & .pperk-rank-badge {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.35);
        color: var(--pip-color);
    }
    /* trait picker cards */
    & .ptrait-card {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.025);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.20);
    }
    & .ptrait-card:hover {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.09);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.55);
    }
    & .ptrait-name, & .trait-card-name, & .trait-slot-name { color: var(--pip-color); }
    & .ptrait-take-btn {
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.38) !important;
        color: var(--pip-color);
    }
    & .ptrait-elig-badge {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.38);
        color: var(--pip-color);
    }
    /* trait chips in traits tab */
    & .trait-chip {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.08);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.28);
    }
    & .action-btn {
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.35);
        color: var(--pip-color);
    }
    & .action-btn:hover { background: rgba(255,255,255,0.10) !important; color: var(--pip-color) !important; border-color: rgba(255,255,255,0.30) !important; }
    /* progression rows */
    & .prog-row {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.018);
        border-color:      rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-left-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.15);
    }
    & .prog-row.has-perk {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.036) !important;
        border-left-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.55) !important;
    }
    & .lvl-tag {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.12);
        color: var(--pip-color);
    }
    & .plab-perk { color: var(--pip-color); border-color: var(--pip-color); background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.04); }
    & .plab-trait { border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.55); background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.03); }
    & #perk-lvlup-banner {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-bottom-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.50);
        color: var(--pip-color);
    }
    & #trait-lvlup-banner {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.07);
        border-bottom-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.40);
        color: var(--pip-color);
    }
    & .lvlup-btn-ready {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.08);
        box-shadow: 0 0 8px rgba(var(--tc-r),var(--tc-g),var(--tc-b),.22);
    }
    & .gear-card {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.020);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.14);
    }
    & #perk-zoom-name { color: var(--pip-color); }
    & .spec-rank-title {
        color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.70);
        text-shadow: 0 0 8px rgba(var(--tc-r),var(--tc-g),var(--tc-b),.38);
    }
    & .scroll-v::-webkit-scrollbar-thumb:hover { background: var(--pip-color); }
    & .ov-card { border-left-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.30) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FACTION QUOTE BAR
══════════════════════════════════════════════════════════════════ */
.faction-quote-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 16px;
    background: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.06);
    border-bottom: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.18);
    animation: quoteSlideIn 0.4s ease;
}
@keyframes quoteSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.faction-quote-text {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--pip-color);
    opacity: 0.85;
    letter-spacing: 0.05em;
    flex: 1;
}
.faction-quote-label {
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    opacity: 0.45;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════
   CONDITIONAL TOGGLE SYSTEM
══════════════════════════════════════════════════════════════════ */
.cond-icon {
    font-size: 0.75em;
    color: #ffdd00;
    opacity: 0.8;
}
.cond-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px;
    vertical-align: middle;
}
.cond-toggle-lbl {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.cond-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.cond-toggle-track {
    width: 28px; height: 14px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 7px;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}
.cond-toggle-thumb {
    position: absolute;
    top: 1px; left: 1px;
    width: 10px; height: 10px;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.cond-toggle-hint { font-size: 0.78rem; opacity: 0.5; }
/* Context label shown beside the toggle (e.g. "INDOORS", "IN COMBAT") */
.cond-toggle-ctx-label {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: var(--pip-color);
    opacity: 0.75;
    white-space: nowrap;
}
/* Trait-row toggle wrapper — sits inline in the trait row */
.trait-row-toggle {
    flex-shrink: 0;
    margin: 0;
    padding: 2px 6px;
    border: 1px solid rgba(var(--pip-rgb,100,200,100), 0.2);
    border-radius: var(--r-md);
    background: rgba(var(--pip-rgb,100,200,100), 0.04);
}
/* Active conditional — highlight the whole trait-slot-row */
.trait-slot-row.cond-active {
    background: rgba(var(--pip-rgb,40,255,40), 0.04) !important;
    border-left-color: rgba(var(--pip-rgb,40,255,40), 0.6) !important;
}
/* Toggle track uses theme pip-color when checked */
.cond-toggle-input:checked + .cond-toggle-track {
    background: rgba(var(--pip-rgb,57,255,14), 0.25);
    border-color: rgba(var(--pip-rgb,57,255,14), 0.55);
}
.cond-toggle-input:checked + .cond-toggle-track .cond-toggle-thumb {
    transform: translateX(14px);
    background: var(--pip-color);
    box-shadow: 0 0 6px rgba(var(--pip-rgb,57,255,20), 0.6);
}
/* Perk row conditional toggle */
.cond-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    margin: 4px 0;
    background: rgba(255,220,0,.05);
    border: 1px dashed rgba(255,220,0,.2);
    border-radius: var(--r-sm);
    font-size: 0.76rem;
}
.cond-toggle-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,220,80,.75);
    flex: 1;
    letter-spacing: 0.06em;
}
.cond-toggle-hint-text { font-size: 0.78rem; opacity: 0.6; }
/* Chip with active conditional */
.st-tag-chip.cond-active {
    border-color: rgba(57,255,14,.4);
    background: rgba(57,255,14,.06);
}
/* Modified SPECIAL badge */
.spec-mod-badge {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: var(--r-sm);
    margin-left: 3px;
    vertical-align: middle;
    letter-spacing: 0.05em;
}
.spec-mod-pos {
    color: #39ff14;
    border: 1px solid rgba(57,255,20,.4);
    background: rgba(57,255,20,.1);
    text-shadow: 0 0 6px rgba(57,255,20,.5);
}
.spec-mod-neg {
    color: #ff4444;
    border: 1px solid rgba(255,68,68,.4);
    background: rgba(255,68,68,.1);
}
/* Conditional toggle delta in SPECIAL list */
.sdelta-cond-pos {
    color: #39ff14 !important;
    border-color: rgba(57,255,20,.3) !important;
    box-shadow: 0 0 6px rgba(57,255,20,.2);
}
.sdelta-cond-neg {
    color: #ff6666 !important;
    border-color: rgba(255,102,102,.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT — FULL SYSTEM
══════════════════════════════════════════════════════════════════ */

/* ── Build Summary Drawer (Laptop/Tablet) ── */
.build-summary-drawer {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 280px;
    height: 100vh;
    background: var(--pip-bg-2);
    border-left: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.2);
    z-index: 500;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,.5);
}
.build-summary-drawer.drawer-open {
    transform: translateX(0);
}
.drawer-inner { padding: 16px; }
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.2);
    padding-bottom: 10px;
    margin-bottom: 14px;
}
.drawer-title {
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    color: var(--pip-color);
}
.drawer-close-btn {
    background: none;
    border: 1px solid rgba(255,80,80,.4);
    color: rgba(255,80,80,.8);
    padding: 2px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.7rem;
}
.drawer-section-label {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    opacity: 0.5;
    margin: 10px 0 4px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-bottom: 3px;
}
.drawer-spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}
.drawer-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.06);
    border: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.15);
    padding: 3px;
}
.drawer-stat-key { font-size: 0.76rem; opacity: 0.6; letter-spacing: 0.1em; }
.drawer-stat-val { font-size: 0.95rem; font-weight: bold; color: var(--pip-color); }
.drawer-value {
    font-size: 0.76rem;
    color: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.8);
    line-height: 1.5;
    overflow-wrap: break-word;
}

.drawer-toggle-btn {
    display: none;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    background: var(--pip-bg-2);
    border: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.3);
    color: var(--pip-color);
    padding: 5px 12px;
    font-size: 0.72rem;
    font-family: inherit;
    letter-spacing: 0.12em;
    cursor: pointer;
    z-index: 501;
    white-space: nowrap;
}

/* ── Mobile Bottom Navigation ── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: var(--pip-bg-2);
    border-top: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.25);
    z-index: 600;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.5);
}
.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    height: 100%;
    min-height: 44px;
    background: transparent;
    border: none;
    color: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.45);
    font-family: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}
.mobile-nav-btn span {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mobile-nav-btn.mobile-nav-active {
    color: var(--pip-color);
    background: rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.08);
    border-top: 2px solid var(--pip-color);
}

/* ── Desktop > 1200px — 3-column optimized ── */
@media (min-width: 1201px) {
    .wrapper {
        display: grid;
        grid-template-columns: 260px 1fr 320px;
        height: 100vh;
        overflow: hidden;
    }
    .wrapper > section:last-of-type {
        overflow-y: auto;
        border-left: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.1);
    }
    .char-sheet-cols {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    .dashboard-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .dash-col-skills {
        grid-column: 1 / -1;
    }
    .build-summary-drawer { display: none !important; }
    .drawer-toggle-btn { display: none !important; }
}

/* ── Laptop / Tablet 768px–1200px ── */
@media (min-width: 768px) and (max-width: 1200px) {
    .wrapper {
        display: grid;
        grid-template-columns: 240px 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        min-height: 100vh;
        padding: 8px;
        gap: 8px;
        box-sizing: border-box;
    }
    .wrapper > section:first-of-type {
        /* left panel stays */
        grid-row: 1 / 3;
    }
    .wrapper > section:last-of-type {
        /* notes/summary panel */
        grid-column: 2;
        max-width: 100%;
    }
    .char-sheet-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .dashboard-cols {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .char-sheet-skills-col {
        grid-column: 1 / -1;
    }
    /* Show drawer toggle */
    .drawer-toggle-btn {
        display: block;
        right: -32px;
        top: 40%;
    }
    .build-summary-drawer {
        display: block;
    }
    /* Stack right panel below center */
    .wrapper > section:last-of-type {
        border-top: 1px solid rgba(var(--tc-r,40),var(--tc-g,255),var(--tc-b,40),.1);
        padding-top: 10px;
    }
}

/* ── Mobile < 768px ── */
@media (max-width: 767px) {
    * { box-sizing: border-box; }
    body { padding-bottom: 60px; } /* room for bottom nav */
    .wrapper {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 6px;
        gap: 6px;
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Hide desktop tab nav - use mobile bottom nav instead */
    .tab-nav {
        display: none !important;
    }
    .mobile-bottom-nav { display: flex !important; }
    
    /* S.P.E.C.I.A.L. compact for mobile */
    .special-compact-grid .special-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
        min-height: 44px;
    }
    .special-controls button.special-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.1rem;
    }
    /* Char sheet - single column */
    .char-sheet-cols {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }
    /* Perk category accordions */
    .header-row {
        min-height: 44px;
        padding: 10px 12px;
    }
    /* Touch targets */
    .action-btn, .sort-btn, .gear-add-btn, .cs-add-btn {
        min-height: 44px;
        padding: 10px 14px;
    }
    .karma-btn { min-height: 36px; }
    /* Theme selector - wrap on mobile */
    .theme-selector-wrap {
        flex-wrap: wrap;
        gap: 3px;
    }
    .theme-btn { min-height: 36px; min-width: 36px; }
    /* Header controls stack */
    .header-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .settings-block {
        flex-wrap: wrap;
        gap: 4px;
    }
    /* Prevent overflow */
    .tab-content { overflow-x: hidden; }
    .skill-list-2col { 
        grid-template-columns: 1fr;
    }
    /* Build summary drawer hidden on mobile (use overview instead) */
    .build-summary-drawer { display: none !important; }
    .drawer-toggle-btn { display: none !important; }
    /* Modal fullscreen on mobile */
    .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    .modal-box, .lvlup-box, .perk-picker-box {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0;
        max-height: 90vh;
    }
    /* Gear tab */
    .gear-split-grid { grid-template-columns: 1fr; }
    /* Unique items */
    .uni-section-header { flex-direction: column; align-items: flex-start; gap: 4px; }
    /* Landscape orientation */
    @media (orientation: landscape) {
        .mobile-bottom-nav { height: 48px; }
        body { padding-bottom: 52px; }
        .mobile-nav-btn { font-size: 0.9rem; }
        .mobile-nav-btn span { display: none; }
    }
}

/* ── New theme button styles ── */
/* ── New faction theme button colours ───────────────────────── */
.tbtn-house.active-theme  { background:#c8a030 !important; border-color:#c8a030 !important; color:#000 !important; }
.tbtn-unity.active-theme  { background:#8aff6a !important; border-color:#8aff6a !important; color:#000 !important; }
.tbtn-shi.active-theme    { background:#e83030 !important; border-color:#e83030 !important; }
.tbtn-khans.active-theme  { background:#cc2020 !important; border-color:#cc2020 !important; }
.tbtn-vtec.active-theme   { background:#ffd000 !important; border-color:#ffd000 !important; color:#001a30 !important; }

.tbtn-house:hover  { color:#c8a030 !important; border-color:#c8a030 !important; border-bottom-color:#c8a030 !important; }
.tbtn-unity:hover  { color:#8aff6a !important; border-color:#8aff6a !important; border-bottom-color:#8aff6a !important; }
.tbtn-shi:hover    { color:#e83030 !important; border-color:#e83030 !important; border-bottom-color:#e83030 !important; }
.tbtn-khans:hover  { color:#cc2020 !important; border-color:#cc2020 !important; border-bottom-color:#cc2020 !important; }
.tbtn-vtec:hover   { color:#ffd000 !important; border-color:#ffd000 !important; border-bottom-color:#ffd000 !important; }

/* ══════════════════════════════════════════════════════════════════
   HUD THEME PANEL (notes section dropdown)
══════════════════════════════════════════════════════════════════ */
.hud-theme-panel {
    margin: 5px 0 10px;
    border: 1px solid rgba(var(--pip-rgb,40,255,40), 0.25);
    border-radius: var(--r-md);
    background: rgba(0,0,0,0.45);
    padding: 8px;
    animation: themePanelSlide 0.18s ease;
}
@keyframes themePanelSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hud-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}
.hud-theme-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 7px 5px 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.hud-theme-tile:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.35);
}
.hud-theme-tile:hover .hud-theme-name {
    color: rgba(255,255,255,0.85);
}
.hud-theme-tile.active-tile {
    border-color: var(--pip-color) !important;
    box-shadow: 0 0 6px rgba(var(--pip-rgb,40,255,40),0.35);
    background: rgba(var(--pip-rgb,40,255,40),0.06) !important;
}
.hud-theme-swatch {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}
.hud-theme-name {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    width: 100%;
}
.hud-theme-tile.active-tile .hud-theme-name {
    color: var(--pip-color);
    opacity: 1;
}
/* HUD THEME button shows active theme color */
#hud-theme-btn.theme-active {
    border-color: var(--pip-color) !important;
    color: var(--pip-color) !important;
    box-shadow: 0 0 6px rgba(var(--pip-rgb,40,255,40),0.22);
}

/* ══════════════════════════════════════════════════════════════════
   PER-THEME DECORATIVE ADDITIONS
   Each faction gets a unique structural flourish beyond the quote.
══════════════════════════════════════════════════════════════════ */

/* ── BoS: classified stamp watermark on left panel ── */
body.theme-bos:not(.mode-hc) .left-panel::after {
    content: 'AD VICTORIAM';
    position: absolute; bottom: 60px; right: 8px;
    font-size: 0.55rem; font-weight: bold;
    letter-spacing: 0.35em; color: rgba(96,168,240,.08);
    transform: rotate(-25deg);
    pointer-events: none; z-index: 0;
    white-space: nowrap;
}
body.theme-bos:not(.mode-hc) .left-panel { position: relative; }
/* BoS: steel corner brackets on section h2 */
body.theme-bos:not(.mode-hc) h2::before {
    content: '[ '; color: rgba(96,168,240,.45); letter-spacing: 0;
}
body.theme-bos:not(.mode-hc) h2::after {
    content: ' ]'; color: rgba(96,168,240,.45); letter-spacing: 0;
}

/* ── Enclave: ruled government-form underlines on labels ── */
body.theme-enclave:not(.mode-hc) .section-label,
body.theme-enclave:not(.mode-hc) .cs-label {
    border-bottom: 1px solid rgba(200,216,236,.20);
    padding-bottom: 2px;
}
body.theme-enclave:not(.mode-hc) .left-panel::after {
    content: 'CLASSIFIED';
    position: absolute; top: 50%; right: 6px;
    font-size: 1.1rem; font-weight: bold;
    letter-spacing: 0.4em; color: rgba(200,216,236,.04);
    transform: rotate(-90deg) translateX(-50%);
    pointer-events: none; z-index: 0;
    white-space: nowrap;
}
body.theme-enclave:not(.mode-hc) .left-panel { position: relative; overflow: hidden; }

/* ── Vault 21: neon hot-pink pulse on active tab ── */
body.theme-vault21:not(.mode-hc) .tab-nav button.active {
    animation: v21TabPulse 2.4s infinite;
}
@keyframes v21TabPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255,40,128,.35); }
    50%       { box-shadow: 0 0 18px rgba(255,40,128,.65), 0 0 4px rgba(255,208,64,.2); }
}
/* Vault 21: gold rule above section headers */
body.theme-vault21:not(.mode-hc) h2 {
    border-top: 1px solid rgba(255,208,64,.18);
    padding-top: 4px;
}

/* ── Legion: Roman numerals section counter via CSS ── */
body.theme-legion:not(.mode-hc) .tab-content h2::before {
    content: 'SPQR · ';
    color: rgba(168,120,24,.55);
    font-size: 0.8em;
    letter-spacing: 0.12em;
}
/* Legion: heavy left margin accent on skill rows */
body.theme-legion:not(.mode-hc) .skill-row {
    border-left: 2px solid rgba(204,40,0,.18);
}
body.theme-legion:not(.mode-hc) .skill-row:hover {
    border-left-color: rgba(204,40,0,.55);
}

/* ── NCR: ranger badge star on section headers ── */
body.theme-ncr:not(.mode-hc) h2::before {
    content: '✦ ';
    color: rgba(200,168,64,.55);
    font-size: 0.85em;
}
/* NCR: dusty parchment tint on ov-cards */
body.theme-ncr:not(.mode-hc) .ov-card {
    background: rgba(200,168,64,.04) !important;
}

/* ── Mr. House: glowing neon tile borders on perk cards ── */
body.theme-house:not(.mode-hc) .perk-card {
    border-left-color: rgba(192,96,255,.35);
    transition: border-left-color 0.2s, box-shadow 0.2s;
}
body.theme-house:not(.mode-hc) .perk-card:hover {
    border-left-color: #c060ff;
    box-shadow: -2px 0 8px rgba(192,96,255,.30);
}
/* Mr. House: neon title glow on char banner */
body.theme-house:not(.mode-hc) .char-banner-name {
    text-shadow: 0 0 12px rgba(192,96,255,.55);
}

/* ── Shi: eastern thin divider lines on prog-section labels ── */
body.theme-shi:not(.mode-hc) .prog-section-label {
    border-bottom: 1px solid rgba(56,200,168,.25);
    border-top: 1px solid rgba(56,200,168,.10);
}
/* Shi: kanji-style corner mark on left panel header */
body.theme-shi:not(.mode-hc) .left-identity-block::before {
    content: '極';
    position: absolute; top: 4px; right: 6px;
    font-size: 1.6rem; color: rgba(56,200,168,.06);
    pointer-events: none; z-index: 0;
    font-family: serif;
}
body.theme-shi:not(.mode-hc) .left-identity-block { position: relative; overflow: hidden; }

/* ── Vault-Tec: cheerful rounded corners on action buttons ── */
body.theme-vaulttec:not(.mode-hc) .action-btn {
    border-radius: 4px !important;
}
body.theme-vaulttec:not(.mode-hc) .tab-nav button {
    border-radius: 4px 4px 0 0;
}
/* Vault-Tec: Vault-Boy blue band on left panel top */
body.theme-vaulttec:not(.mode-hc) .left-panel::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #1066b8, #ffd000, #1066b8);
    margin: -1px -1px 8px;
    opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════
   PICKER MODAL SORT CONTROLS (perk picker + trait picker)
══════════════════════════════════════════════════════════════════ */
.picker-sort-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.picker-sort-label {
    font-size: 0.76rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    opacity: 0.5;
    margin-right: 2px;
    white-space: nowrap;
}
.picker-sort-btn {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--t-base);
    border-radius: var(--r-sm);
}
.picker-sort-btn:hover:not(.active) {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.3) !important;
}
.picker-sort-btn.active {
    background: var(--pip-color);
    color: #000;
    border-color: var(--pip-color) !important;
    font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════════
   PERK LEVEL BADGE (shown in perk picker cards)
══════════════════════════════════════════════════════════════════ */
.pperk-lvl-badge {
    font-size: 0.76rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   USER FEEDBACK FIXES - NEW FEATURES
═══════════════════════════════════════════════ */

/* Fix 3: Overview Requirement Indicators */
.ov-req-indicator {
    display: inline-block;
    font-size: 0.7rem;
    margin-right: 6px;
    vertical-align: middle;
}

.ov-req-met {
    color: #60ff60;
    text-shadow: 0 0 4px rgba(96, 255, 96, 0.5);
}

.ov-req-unmet {
    color: #ff8844;
    text-shadow: 0 0 4px rgba(255, 136, 68, 0.5);
}

/* Fix 5: Level Rollback Button */
.rollback-btn {
    padding: 4px 10px;
    font-size: 0.76rem;
    background: rgba(255, 208, 96, 0.08);
    border: 1px solid rgba(255, 208, 96, 0.3);
    color: #ffd060;
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: all var(--t-slow);
}

.rollback-btn:hover {
    background: rgba(255, 208, 96, 0.15);
    border-color: rgba(255, 208, 96, 0.5);
    box-shadow: 0 0 8px rgba(255, 208, 96, 0.2);
}

/* Fix 2: Perk Picker Filter Controls */
#ppick-filter-options {
    display: none;
    margin-left: auto;
    gap: 6px;
    align-items: center;
}

#ppick-filter-options label {
    font-size: 0.76rem;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#ppick-filter-options label:hover {
    opacity: 1;
}

#ppick-filter-options input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--pip-color);
}

/* Fix 2: Enhanced ineligible perk tags with block type indicators */
.pperk-inelig-tag {
    background: rgba(255, 136, 68, 0.15);
    border: 1px solid rgba(255, 136, 68, 0.4);
    color: #ff8844;
    padding: 2px 6px;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    border-radius: var(--r-sm);
    font-weight: bold;
}

/* ═══════════════════════════════════════════════
   BUILD MANAGEMENT & WISHLIST FEATURES
═══════════════════════════════════════════════ */

/* Build Features Bar */
.build-features-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(100, 255, 100, 0.15);
}

.feature-btn {
    flex: 1;
    min-width: 140px;
    padding: 8px 12px;
    font-size: 0.80rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    background: rgba(100, 200, 255, 0.08);
    border: 1px solid rgba(100, 200, 255, 0.3);
    color: #64c8ff;
    cursor: pointer;
    font-family: var(--font-main);
    transition: all var(--t-slow);
    position: relative;
}

.feature-btn:hover {
    background: rgba(100, 200, 255, 0.15);
    border-color: rgba(100, 200, 255, 0.5);
    box-shadow: 0 0 10px rgba(100, 200, 255, 0.2);
}

.wishlist-count-badge {
    display: inline-block;
    background: #ffd860;
    color: #000;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: bold;
    margin-left: 4px;
}

/* Build Manager Styles */
.build-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--pip-rgb), 0.2);
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--t-slow);
}

.build-item:hover {
    border-color: rgba(var(--pip-rgb), 0.4);
    background: rgba(0, 0, 0, 0.4);
}

.build-item.build-current {
    border-color: var(--pip-color);
    background: rgba(var(--pip-rgb), 0.08);
}

.build-info {
    flex: 1;
}

.build-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--pip-color);
    margin-bottom: 4px;
}

.build-current-badge {
    display: inline-block;
    background: var(--pip-color);
    color: #000;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-weight: bold;
    margin-left: 8px;
    letter-spacing: 0.5px;
}

.build-meta {
    font-size: 0.78rem;
    opacity: 0.6;
}

.build-actions {
    display: flex;
    gap: 6px;
}

.build-action-btn {
    padding: 5px 10px;
    font-size: 0.76rem;
    background: rgba(var(--pip-rgb), 0.08);
    border: 1px solid rgba(var(--pip-rgb), 0.3);
    color: var(--pip-color);
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: bold;
    transition: all var(--t-slow);
}

.build-action-btn:hover {
    background: rgba(var(--pip-rgb), 0.15);
    border-color: rgba(var(--pip-rgb), 0.5);
}

.build-action-delete {
    border-color: rgba(255, 80, 80, 0.4);
    color: #ff6060;
}

.build-action-delete:hover {
    background: rgba(255, 80, 80, 0.15);
    border-color: rgba(255, 80, 80, 0.6);
}

/* Wishlist Styles */
.wishlist-item {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid rgba(255, 216, 96, 0.4);
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--t-slow);
}

.wishlist-item:hover {
    background: rgba(0, 0, 0, 0.4);
    border-left-color: rgba(255, 216, 96, 0.6);
}

.wishlist-ready {
    border-left-color: rgba(96, 255, 96, 0.6);
}

.wishlist-not-ready {
    border-left-color: rgba(255, 136, 68, 0.6);
}

.wishlist-perk-info {
    flex: 1;
}

.wishlist-perk-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--pip-color);
    margin-bottom: 4px;
}

.wishlist-perk-req {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-bottom: 4px;
}

.wishlist-status {
    font-size: 0.76rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.wishlist-ready .wishlist-status {
    color: #60ff60;
}

.wishlist-not-ready .wishlist-status {
    color: #ff8844;
}

.wishlist-remove-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid rgba(255, 80, 80, 0.3);
    color: #ff6060;
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: bold;
    transition: all var(--t-slow);
}

.wishlist-remove-btn:hover {
    background: rgba(255, 80, 80, 0.15);
    border-color: rgba(255, 80, 80, 0.5);
}

.wishlist-graph-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
    background: rgba(var(--tc-r), var(--tc-g), var(--tc-b), 0.08);
    border: 1px solid rgba(var(--tc-r), var(--tc-g), var(--tc-b), 0.25);
    color: var(--pip-color);
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: bold;
    transition: all var(--t-slow);
}

.wishlist-graph-btn:hover {
    background: rgba(var(--tc-r), var(--tc-g), var(--tc-b), 0.15);
    border-color: rgba(var(--tc-r), var(--tc-g), var(--tc-b), 0.45);
}

/* Perk Wishlist Star Button - Small (Perk Picker) */
.pperk-wishlist-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.1rem;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 216, 96, 0.3);
    color: rgba(255, 216, 96, 0.5);
    cursor: pointer;
    transition: all var(--t-slow);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
}

.pperk-wishlist-btn:hover {
    background: rgba(255, 216, 96, 0.2);
    border-color: rgba(255, 216, 96, 0.7);
    color: #ffd860;
    transform: scale(1.15);
}

.pperk-wishlist-btn.wishlisted {
    background: rgba(255, 216, 96, 0.25);
    border-color: #ffd860;
    color: #ffd860;
    text-shadow: 0 0 12px rgba(255, 216, 96, 0.9);
    box-shadow: 0 0 8px rgba(255, 216, 96, 0.4);
}

/* Perk Wishlist Action Button (All Perks Tab - in action row) */
.perk-wishlist-action {
    border-color: rgba(255, 216, 96, 0.3) !important;
    color: rgba(255, 216, 96, 0.6) !important;
}

.perk-wishlist-action:hover {
    background: rgba(255, 216, 96, 0.15) !important;
    border-color: rgba(255, 216, 96, 0.6) !important;
    color: #ffd860 !important;
}

.perk-wishlist-action.wishlisted {
    background: rgba(255, 216, 96, 0.2) !important;
    border-color: #ffd860 !important;
    color: #ffd860 !important;
    text-shadow: 0 0 8px rgba(255, 216, 96, 0.8);
}

/* Make perk cards in picker position relative for absolute wishlist buttons */
.pperk-card {
    position: relative;
}

/* Perk Zoom Modal Action Buttons */
#perk-zoom-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(100,255,100,0.15);
}

#perk-zoom-actions .action-btn {
    flex: 1;
    width: auto;
    margin-bottom: 0;
}

#perk-zoom-wishlist-btn {
    flex: 0 0 auto;
    min-width: 120px;
}


/* ═══ LAYOUT REFINEMENTS (redesign pass) ═══════════════════════════════ */

/* Left panel internal padding for SPECIAL */
.special-compact-grid { padding: 2px 14px 14px; }
.commend-wrap { padding: 10px 14px; border-top: 1px solid var(--pip-border); margin-top: auto; }

/* Undo button inline in header */
#undo-btn {
    border: none !important;
    border-left: 1px solid rgba(100,200,255,0.2) !important;
    border-right: 1px solid rgba(100,200,255,0.2) !important;
    border-bottom: none !important;
    color: rgba(100,200,255,0.4);
    padding: 0 14px;
    cursor: pointer;
    font-size: 0.78rem;
    background: transparent;
    letter-spacing: 1px;
    transition: all var(--t-slow);
    height: 100%;
}
#undo-btn:not([disabled]):hover {
    color: rgba(100,200,255,0.9);
    background: rgba(100,200,255,0.05) !important;
}
#undo-btn[disabled] { opacity: 0.25; cursor: default; }

/* Faction quote bar gets proper containment */
.faction-quote-bar {
    border-bottom: 1px solid var(--pip-border);
    flex-shrink: 0;
}

/* HC banner inside main panel */
.hc-alert-bar { flex-shrink: 0; }
#humbled-status-banner, #perk-lvlup-banner, #trait-lvlup-banner { flex-shrink: 0; }

/* Char banner in overview gets proper padding */
.char-banner { padding: 12px 16px 10px; }

/* Build features bar */
.build-features-bar { padding: 0 16px 10px; }

/* char sheet cols */
.char-sheet-cols { padding: 0 16px; }

/* ov-grid */
.ov-grid { padding: 0 16px 16px; }

/* Tab content padding restoration for non scroll-v tabs */
#tab-ov, #tab-prog, #tab-perks, #tab-gear, #tab-quests,
#tab-coll, #tab-uni, #tab-skilllog, #tab-books {
    padding: 0;
}
#tab-ov.tab-content.scroll-v,
#tab-prog.tab-content.scroll-v,
#tab-perks.tab-content.scroll-v,
#tab-gear.tab-content.scroll-v,
#tab-quests.tab-content.scroll-v,
#tab-coll.tab-content.scroll-v,
#tab-uni.tab-content.scroll-v,
#tab-skilllog.tab-content.scroll-v,
#tab-books.tab-content.scroll-v {
    padding: 14px 16px;
}

/* Karma selector gets proper spacing in new left panel */
.karma-selector { margin: 4px 0 6px; }
.karma-face { text-align: center; padding: 6px 0; }

/* The prog section labels get left alignment now that section has no padding */
.prog-section-label { padding: 10px 16px; margin: 10px 0 0; border-top: 1px solid rgba(255,255,255,0.04); }
.prog-section-label:first-child { border-top: none; margin-top: 0; }
.starting-traits-wrap { padding: 8px 16px 12px; }
.prog-grid { padding: 8px 16px; }
#implants-list { padding: 8px 16px; }
#implant-limit-warning { margin: 0 16px 8px; }

/* Perks tab search bar */
.perks-controls { padding: 12px 16px 0; }

/* Gear tab */
.gear-tab-header { padding: 12px 16px 0; }
.gear-split-grid { padding: 0 16px 16px; }

/* Quest, coll, uni tabs */
#quest-search-bar, #uni-search-bar, #uni-armor-search-bar { margin: 12px 16px 0; width: calc(100% - 32px); }
#quest-list-container { padding: 0 16px; }
#coll-list { padding: 0 16px; }
.uni-section-header { padding: 12px 16px 0; }
#unique-weapon-checklist, #unique-armor-checklist { padding: 0 16px; }

/* Skill log */
.skilllog-header { padding: 12px 16px 8px; }
#skilllog-empty { padding: 0 16px; }
#skilllog-table-wrap { padding: 0 16px; }

/* Right panel grid-tidy for action buttons */
.right-panel .grid-tidy { 
    gap: 4px;
}
.right-panel .grid-tidy .action-btn {
    padding: 6px 4px;
    font-size: 0.72rem;
}
.right-panel .randomize-btn {
    width: 100%;
    margin-top: 6px;
}

/* Tablet override */
@media (max-width: 1000px) {
    .wrapper { 
        display: flex; 
        flex-direction: column; 
        height: auto; 
        padding: 0;
        gap: 0;
    }
    section { height: auto; max-height: none; overflow: visible; border-right: none; border-bottom: 1px solid var(--pip-border); }
    .right-panel { border-left: none; border-top: 1px solid var(--pip-border); }
    .left-panel { border-right: none; border-bottom: 1px solid var(--pip-border); }
    .scroll-v { height: auto; max-height: 600px; overflow-y: auto; }
    header { height: auto; min-height: var(--hdr-h); flex-wrap: wrap; padding: 8px 14px; }
    .os-title { height: auto; border-right: none; padding: 0; }
    .settings-block { height: auto; }
    .toggle-group button { height: 36px; padding: 0 12px; }
    #undo-btn { height: 36px; }
    .nuke-btn { height: 36px; }
}

/* ═══ CREDITS & STICKY NOTE — RIGHT PANEL POLISH ════════════════════ */
.credits-box {
    font-size: 0.55rem;
    opacity: 0.4;
    line-height: 1.8;
    border-top: 1px solid var(--pip-border);
    padding-top: 8px;
    margin-top: 8px;
    letter-spacing: 0.5px;
}
.credits-box b { opacity: 0.7; }
.credits-box a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }

#sync-status {
    font-size: 0.52rem;
    text-align: right;
    opacity: 0.3;
    letter-spacing: 1px;
    margin-top: 4px;
    padding: 2px 0;
}

/* Sticky note in right panel — smaller, tidier */
#sticky-note-stack {
    position: relative;
    margin-bottom: 8px;
}
.sticky-note {
    font-size: 0.6rem !important;
    line-height: 1.6 !important;
    padding: 8px 10px !important;
}

/* ═══ HEADER FINE TUNING ══════════════════════════════════════════════ */
/* Ensure the header flex row fills full height */
.header-controls {
    height: 100%;
    width: 100%;
}

/* ═══ SECTION LABEL REFINEMENT ════════════════════════════════════════ */
.prog-section-label {
    font-size: 0.72rem;
    letter-spacing: 2px;
    opacity: 0.7;
    background: rgba(var(--pip-rgb),0.03);
    border-bottom: 1px solid var(--pip-border);
}

/* char-sheet-col headers get // prefix via CSS on cs-label */
.cs-label::before { content: '// '; opacity: 0.4; }

/* Overview overview banner — name display */
.char-banner {
    background: rgba(var(--pip-rgb),0.025);
    border-bottom: 1px solid var(--pip-border);
}
.char-banner-name {
    font-size: 1.4rem;
    letter-spacing: 4px;
}

/* Skill rows get tighter alternating rows */
.skill-row:nth-child(even) {
    background: rgba(255,255,255,0.012);
}

/* Perk rows get sharper look */
.prog-row {
    border-radius: 0 !important;
}

/* Action buttons — sharper */
.action-btn {
    border-radius: 0 !important;
}
.modal-cancel-btn {
    border-radius: 0 !important;
}
.sort-btn {
    border-radius: 0 !important;
}
.lvlup-open-btn {
    border-radius: 0 !important;
}
.gear-add-btn {
    border-radius: 0 !important;
}
.randomize-btn {
    border-radius: 0 !important;
}

/* Modals — sharper */
.modal-box {
    border-radius: 0 !important;
}


/* ── Old World Blues — Big Mountain Science Lab ─────────────────
   "Why do I forget things? Oh, it's my brain. Never mind."
   Bright electric cyan on near-black. Retro-futurist mad science.
   Tesla coil rings, laboratory tile grid, humming neon tubes.
──────────────────────────────────────────────────────────────── */
body.theme-owb:not(.mode-hc) {
    --pip-color:  #00e8d8;
    --pip-bg:     #000a0c;
    --pip-bg-2:   #001418;
    --pip-bg-3:   #001e24;
    --pip-border: #003c44;
    --glow-sm:    0 0 8px  rgba(0,232,216,.38);
    --glow-md:    0 0 22px rgba(0,232,216,.28);
    --glow-lg:    0 0 48px rgba(0,232,216,.18);
    --tc-r: 0; --tc-g: 232; --tc-b: 216;
    --accent-white: #e0fffc;
}
body.theme-owb:not(.mode-hc) {
    background-image:
        /* laboratory tile grid — clean Big Mountain research floor */
        repeating-linear-gradient(90deg, transparent, transparent 36px,
            rgba(0,232,216,.022) 36px, rgba(0,232,216,.022) 38px),
        repeating-linear-gradient(0deg, transparent, transparent 36px,
            rgba(0,232,216,.022) 36px, rgba(0,232,216,.022) 37px),
        /* tesla coil ring pulse — concentric glow rings */
        radial-gradient(ellipse at 50% 50%, rgba(0,232,216,.04) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 50%, rgba(0,232,216,.025) 0%, transparent 55%),
        /* deep science-bay vignette */
        radial-gradient(ellipse at 50% 0%, rgba(0,60,80,.85) 0%, #000a0c 80%);
}
body.theme-owb:not(.mode-hc) header {
    background: linear-gradient(180deg, #003040 0%, #001420 50%, #000a0c 100%);
    border-bottom: 2px solid rgba(0,232,216,.75);
    border-top: 1px solid rgba(0,232,216,.22);
    box-shadow: 0 0 36px rgba(0,232,216,.28), inset 0 -1px 0 rgba(0,232,216,.30);
}
body.theme-owb:not(.mode-hc) .os-title {
    color: #00e8d8;
    text-shadow: 0 0 14px rgba(0,232,216,.70), 0 0 32px rgba(0,232,216,.35);
    letter-spacing: 0.22em;
}
body.theme-owb:not(.mode-hc) .tab-nav button.active {
    background: rgba(0,232,216,.14);
    border-color: rgba(0,232,216,.70);
    color: #80fff8;
}
body.theme-owb:not(.mode-hc) h2 {
    border-left: 3px solid rgba(0,232,216,.60);
    padding-left: 8px;
}
body.theme-owb:not(.mode-hc) .plab-trait { color: #80fff8; }


/* ── The Pitt — Steel Mill Inferno ─────────────────────────────
   "Welcome to the Pitt. Now get back to work."
   Molten slag orange on soot-black. Industrial horror. Furnace heat.
   Corrugated steel plate texture, heat-bleed vignette.
──────────────────────────────────────────────────────────────── */
body.theme-pitt:not(.mode-hc) {
    --pip-color:  #e06020;
    --pip-bg:     #060200;
    --pip-bg-2:   #0e0500;
    --pip-bg-3:   #180800;
    --pip-border: #4a1800;
    --glow-sm:    0 0 8px  rgba(224,96,32,.38);
    --glow-md:    0 0 22px rgba(224,96,32,.28);
    --glow-lg:    0 0 50px rgba(224,96,32,.18);
    --tc-r: 224; --tc-g: 96; --tc-b: 32;
    --accent-slag: #ff8030;
}
body.theme-pitt:not(.mode-hc) {
    background-image:
        /* corrugated steel plate — horizontal ridges */
        repeating-linear-gradient(0deg, transparent, transparent 4px,
            rgba(224,96,32,.012) 4px, rgba(224,96,32,.012) 5px),
        repeating-linear-gradient(0deg, transparent, transparent 12px,
            rgba(0,0,0,.08) 12px, rgba(0,0,0,.08) 14px),
        /* riveted vertical seams — steel plate joins */
        repeating-linear-gradient(90deg, transparent, transparent 64px,
            rgba(224,96,32,.018) 64px, rgba(224,96,32,.018) 66px),
        /* furnace heat bloom from below */
        radial-gradient(ellipse at 50% 110%, rgba(255,80,0,.35) 0%, rgba(180,40,0,.15) 30%, transparent 65%),
        /* soot vignette top */
        radial-gradient(ellipse at 50% 0%, rgba(30,10,0,.90) 0%, #060200 75%);
}
body.theme-pitt:not(.mode-hc) header {
    background: linear-gradient(180deg, #2a0e00 0%, #100400 50%, #060200 100%);
    border-bottom: 3px solid rgba(224,96,32,.72);
    border-top: 1px solid rgba(255,128,48,.18);
    box-shadow: 0 0 32px rgba(224,96,32,.28), inset 0 -2px 0 rgba(224,96,32,.22);
}
body.theme-pitt:not(.mode-hc) .os-title {
    color: #e06020;
    text-shadow: 0 0 14px rgba(224,96,32,.65), 0 0 32px rgba(224,96,32,.28);
    letter-spacing: 0.20em;
}
body.theme-pitt:not(.mode-hc) .tab-nav button.active {
    background: rgba(224,96,32,.12);
    border-color: rgba(224,96,32,.68);
    color: #ff8848;
}
body.theme-pitt:not(.mode-hc) h2 {
    border-left: 3px solid rgba(224,96,32,.58);
    padding-left: 8px;
}
body.theme-pitt:not(.mode-hc) section {
    background: linear-gradient(160deg, #180800 0%, #060200 60%) !important;
}
body.theme-pitt:not(.mode-hc) .plab-trait { color: #ff9050; }
body.theme-pitt:not(.mode-hc) .skill-delta-badge.sdelta-pos,
body.theme-pitt:not(.mode-hc) .spec-delta-badge.sdelta-pos { color: #e06020; border-color: rgba(224,96,32,.40); }


/* ── Point Lookout — Chesapeake Swamp ──────────────────────────
   "Something doesn't want you here. Something never will."
   Murky swamp green on near-black. Bioluminescent decay. Fog.
   Spanish moss drape, standing water shimmer, ghost light wisps.
──────────────────────────────────────────────────────────────── */
body.theme-lookout:not(.mode-hc) {
    --pip-color:  #58c040;
    --pip-bg:     #010501;
    --pip-bg-2:   #020b02;
    --pip-bg-3:   #031203;
    --pip-border: #0e3008;
    --glow-sm:    0 0 8px  rgba(88,192,64,.32);
    --glow-md:    0 0 20px rgba(88,192,64,.24);
    --glow-lg:    0 0 44px rgba(88,192,64,.14);
    --tc-r: 88; --tc-g: 192; --tc-b: 64;
    --accent-fog: rgba(160,220,100,.06);
}
body.theme-lookout:not(.mode-hc) {
    background-image:
        /* standing water ripple — horizontal shimmer bands */
        repeating-linear-gradient(0deg, transparent, transparent 28px,
            rgba(88,192,64,.012) 28px, rgba(88,192,64,.012) 29px),
        /* vertical spanish moss drape — irregular intervals */
        repeating-linear-gradient(90deg, transparent, transparent 18px,
            rgba(88,192,64,.008) 18px, rgba(88,192,64,.008) 19px,
            transparent 19px, transparent 52px,
            rgba(88,192,64,.006) 52px, rgba(88,192,64,.006) 53px),
        /* bioluminescent fog wisps */
        radial-gradient(ellipse at 25% 60%, rgba(80,180,40,.07) 0%, transparent 40%),
        radial-gradient(ellipse at 75% 30%, rgba(60,160,30,.06) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 80%, rgba(40,140,20,.05) 0%, transparent 30%),
        /* deep bayou dark */
        radial-gradient(ellipse at 50% 0%, rgba(8,30,4,.88) 0%, #010501 80%);
}
body.theme-lookout:not(.mode-hc) header {
    background: linear-gradient(180deg, #0e2808 0%, #061204 50%, #010501 100%);
    border-bottom: 2px solid rgba(88,192,64,.62);
    border-top: 1px solid rgba(88,192,64,.16);
    box-shadow: 0 0 26px rgba(88,192,64,.20), inset 0 -1px 0 rgba(88,192,64,.24);
}
body.theme-lookout:not(.mode-hc) .os-title {
    color: #58c040;
    text-shadow: 0 0 12px rgba(88,192,64,.55), 0 0 28px rgba(88,192,64,.24);
    letter-spacing: 0.22em;
}
body.theme-lookout:not(.mode-hc) .tab-nav button.active {
    background: rgba(88,192,64,.11);
    border-color: rgba(88,192,64,.62);
    color: #88e060;
}
body.theme-lookout:not(.mode-hc) h2 {
    border-left: 3px solid rgba(88,192,64,.55);
    padding-left: 8px;
}
body.theme-lookout:not(.mode-hc) section {
    background: linear-gradient(160deg, #031203 0%, #010501 60%) !important;
}
body.theme-lookout:not(.mode-hc) .plab-trait { color: #88e060; }


/* ── Tranquility Lane — 1950s American Nightmare ───────────────
   "It's wonderful here. Everything is wonderful."
   The only light theme. Pastel sky blue on warm cream-white.
   Polka-dot wallpaper, picket fence lattice, cheerful dread.
──────────────────────────────────────────────────────────────── */
body.theme-tlane:not(.mode-hc) {
    --pip-color:  #1870c8;
    --pip-bg:     #e8f4ff;
    --pip-bg-2:   #dceeff;
    --pip-bg-3:   #d0e8ff;
    --pip-border: #88bce0;
    --glow-sm:    0 0 6px  rgba(24,112,200,.20);
    --glow-md:    0 0 16px rgba(24,112,200,.14);
    --glow-lg:    0 0 32px rgba(24,112,200,.08);
    --tc-r: 24; --tc-g: 112; --tc-b: 200;
    --accent-red: #d03030;
    --accent-cream: #fff8e8;
}
body.theme-tlane:not(.mode-hc) {
    background-color: #e8f4ff;
    background-image:
        /* picket fence lattice — vertical white boards */
        repeating-linear-gradient(90deg, transparent, transparent 22px,
            rgba(255,255,255,.55) 22px, rgba(255,255,255,.55) 24px),
        /* polka-dot wallpaper */
        radial-gradient(circle at 12px 12px, rgba(24,112,200,.06) 3px, transparent 3px),
        radial-gradient(circle at 36px 36px, rgba(24,112,200,.04) 3px, transparent 3px),
        /* warm cream vignette — suburban sunlight */
        radial-gradient(ellipse at 50% 0%, rgba(255,240,200,.60) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(255,240,200,.30) 0%, transparent 55%);
    background-size: auto, 48px 48px, 48px 48px, auto, auto;
}
body.theme-tlane:not(.mode-hc) header {
    background: linear-gradient(180deg, #1870c8 0%, #2480d8 30%, #dceeff 100%);
    border-bottom: 3px solid #1870c8;
    border-top: 2px solid rgba(255,255,255,.80);
    box-shadow: 0 2px 16px rgba(24,112,200,.22), inset 0 -1px 0 rgba(24,112,200,.20);
}
body.theme-tlane:not(.mode-hc) .os-title {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(24,112,200,.60), 0 0 12px rgba(24,112,200,.40);
    letter-spacing: 0.20em;
}
body.theme-tlane:not(.mode-hc) .tab-nav button {
    color: #1870c8;
    border-color: rgba(24,112,200,.30);
    background: rgba(255,255,255,.50);
}
body.theme-tlane:not(.mode-hc) .tab-nav button.active {
    background: #1870c8;
    border-color: #1870c8;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(24,112,200,.30);
}
body.theme-tlane:not(.mode-hc) section {
    background: rgba(255,255,255,.55) !important;
    border-color: rgba(24,112,200,.25) !important;
}
body.theme-tlane:not(.mode-hc) h2 {
    background: rgba(24,112,200,.08);
    border-left: 3px solid #1870c8;
    color: #1060a8;
}
body.theme-tlane:not(.mode-hc) .modal-box,
body.theme-tlane:not(.mode-hc) .lvlup-box,
body.theme-tlane:not(.mode-hc) .perk-picker-box,
body.theme-tlane:not(.mode-hc) .perk-zoom-box {
    background: #e8f4ff !important;
    border-color: rgba(24,112,200,.40) !important;
    box-shadow: 0 0 40px rgba(24,112,200,.16), 0 0 80px rgba(0,0,0,.20) !important;
}
body.theme-tlane:not(.mode-hc) .action-btn {
    border-color: rgba(24,112,200,.45) !important;
    color: #1870c8;
    background: rgba(255,255,255,.60);
}
body.theme-tlane:not(.mode-hc) .action-btn:hover {
    background: #1870c8 !important;
    color: #ffffff !important;
}
body.theme-tlane:not(.mode-hc) .prog-row {
    background: rgba(255,255,255,.45);
    border-color: rgba(24,112,200,.14);
    border-left-color: rgba(24,112,200,.22);
    color: #0a3060;
}
body.theme-tlane:not(.mode-hc) .prog-row.has-perk {
    background: rgba(255,255,255,.70) !important;
    border-left-color: rgba(24,112,200,.65) !important;
}
body.theme-tlane:not(.mode-hc) .prog-name-input,
body.theme-tlane:not(.mode-hc) .prog-notes-input,
body.theme-tlane:not(.mode-hc) .gear-field-input,
body.theme-tlane:not(.mode-hc) input[type="text"],
body.theme-tlane:not(.mode-hc) input[type="number"],
body.theme-tlane:not(.mode-hc) textarea {
    background: rgba(255,255,255,.70);
    color: #0a3060;
    border-color: rgba(24,112,200,.25);
}
body.theme-tlane:not(.mode-hc) .ov-card {
    background: rgba(255,255,255,.55);
    border-left-color: rgba(24,112,200,.35);
}
body.theme-tlane:not(.mode-hc) .ov-sub {
    color: #1870c8;
    border-bottom-color: rgba(24,112,200,.20);
}
body.theme-tlane:not(.mode-hc) .ov-entry { color: #0a3060; }
body.theme-tlane:not(.mode-hc) .plab-trait { color: #1060a8; }
body.theme-tlane:not(.mode-hc) .plab-perk {
    color: #1870c8;
    border-color: #1870c8;
    background: rgba(24,112,200,.06);
}
body.theme-tlane:not(.mode-hc) .pperk-card {
    background: rgba(255,255,255,.45);
    border-color: rgba(24,112,200,.22);
}
body.theme-tlane:not(.mode-hc) .pperk-card:hover {
    background: rgba(255,255,255,.80);
    border-color: rgba(24,112,200,.60);
}
body.theme-tlane:not(.mode-hc) .pperk-name { color: #1870c8; }
body.theme-tlane:not(.mode-hc) .gear-card {
    background: rgba(255,255,255,.45);
    border-color: rgba(24,112,200,.18);
}
body.theme-tlane:not(.mode-hc) .scroll-v::-webkit-scrollbar-thumb { background: rgba(24,112,200,.35); }
body.theme-tlane:not(.mode-hc) .scroll-v::-webkit-scrollbar-thumb:hover { background: #1870c8; }

/* ═════════════════════════════════════════════════════════════════
   CUSTOM HUD THEMES
   Each theme sets --pip-color, --pip-bg/2/3, --pip-border,
   --glow-sm/md/lg, --tc-r/g/b, and a unique background texture.
═════════════════════════════════════════════════════════════════ */

/* ── Vault 21 — Neon Casino Glow ─────────────────────────────────
   Hot pink neon on deep purple-black. Glitzy Vegas after dark.
   Gold trim accents, casino floor pulse, come-down haze.
──────────────────────────────────────────────────────────────── */
body.theme-vault21:not(.mode-hc) {
    --pip-color:  #ff2880;
    --pip-bg:     #080008;
    --pip-bg-2:   #100018;
    --pip-bg-3:   #180022;
    --pip-border: #400030;
    --glow-sm:    0 0 8px  rgba(255,40,128,.35);
    --glow-md:    0 0 20px rgba(255,40,128,.25);
    --glow-lg:    0 0 40px rgba(255,40,128,.15);
    --tc-r: 255; --tc-g: 40; --tc-b: 128;
    --pip-rgb: 255, 40, 128;
}
body.theme-vault21:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 32px,
            rgba(255,40,128,.018) 32px, rgba(255,40,128,.018) 34px),
        repeating-linear-gradient(0deg, transparent, transparent 32px,
            rgba(255,40,128,.012) 32px, rgba(255,40,128,.012) 33px),
        radial-gradient(ellipse at 50% 0%, rgba(60,0,40,.80) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(40,0,20,.35) 0%, transparent 60%);
}
body.theme-vault21:not(.mode-hc) header {
    background: linear-gradient(180deg, #200018 0%, #080008 100%);
    border-bottom: 2px solid rgba(255,40,128,.72);
    border-top: 1px solid rgba(255,208,64,.20);
    box-shadow: 0 0 28px rgba(255,40,128,.24), inset 0 -1px 0 rgba(255,40,128,.22);
}
body.theme-vault21:not(.mode-hc) .os-title {
    color: #ff2880;
    text-shadow: 0 0 14px rgba(255,40,128,.68), 0 0 30px rgba(255,40,128,.32);
    letter-spacing: 0.22em;
}
body.theme-vault21:not(.mode-hc) .tab-nav button.active {
    background: rgba(255,40,128,.14);
    border-color: rgba(255,40,128,.68);
    color: #ff70a8;
}
body.theme-vault21:not(.mode-hc) h2 {
    border-left: 3px solid rgba(255,40,128,.58);
    padding-left: 8px;
}
body.theme-vault21:not(.mode-hc) .plab-trait { color: #ff70a8; }

/* ── DOS — Retro Terminal ───────────────────────────────────────
   Amber CRT phosphor on scan-lined black. Bare-bones machine.
   Command-line stark, no frills, just function.
──────────────────────────────────────────────────────────────── */
body.theme-dos:not(.mode-hc) {
    --pip-color:  #ffb000;
    --pip-bg:     #000200;
    --pip-bg-2:   #040500;
    --pip-bg-3:   #080a00;
    --pip-border: #3a2400;
    --glow-sm:    0 0 4px  rgba(255,176,0,.30);
    --glow-md:    0 0 12px rgba(255,176,0,.22);
    --glow-lg:    0 0 28px rgba(255,176,0,.14);
    --tc-r: 255; --tc-g: 176; --tc-b: 0;
    --pip-rgb: 255, 176, 0;
}
body.theme-dos:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 3px,
            rgba(0,0,0,.15) 3px, rgba(0,0,0,.15) 4px),
        radial-gradient(ellipse at 50% 0%, rgba(60,40,0,.70) 0%, transparent 60%);
}
body.theme-dos:not(.mode-hc) header {
    background: linear-gradient(180deg, #0a0800 0%, #000200 100%);
    border-bottom: 1px solid rgba(255,176,0,.55);
    border-top: 1px solid rgba(255,176,0,.20);
    box-shadow: 0 0 12px rgba(255,176,0,.14), inset 0 -1px 0 rgba(255,176,0,.12);
}
body.theme-dos:not(.mode-hc) .os-title {
    color: #ffb000;
    text-shadow: 0 0 8px rgba(255,176,0,.50);
    letter-spacing: 0.32em;
    font-family: 'Courier New', monospace;
}
body.theme-dos:not(.mode-hc) .tab-nav button.active {
    background: rgba(255,176,0,.10);
    border-color: rgba(255,176,0,.60);
    color: #ffcc40;
}
body.theme-dos:not(.mode-hc) h2 {
    border-bottom: 1px solid rgba(255,176,0,.35);
    padding-bottom: 4px;
}
body.theme-dos:not(.mode-hc) .plab-trait { color: #ffcc40; }

/* ────────────────────────────────────────────────────────────────
   SHARED STRUCTURAL OVERRIDES
   Applied to all custom HUD themes. Rewires every hard-coded green
   reference to use --pip-color and --tc-r/g/b channel rebuilds.
──────────────────────────────────────────────────────────────── */
body.theme-enclave:not(.mode-hc),
body.theme-vaulttec:not(.mode-hc),
body.theme-bos:not(.mode-hc),
body.theme-legion:not(.mode-hc),
body.theme-ncr:not(.mode-hc),
body.theme-shi:not(.mode-hc),
body.theme-house:not(.mode-hc),
body.theme-vault21:not(.mode-hc),
body.theme-dos:not(.mode-hc),
body.theme-zeta:not(.mode-hc),
body.theme-sierramadre:not(.mode-hc),
body.theme-pitt:not(.mode-hc),
body.theme-owb:not(.mode-hc),
body.theme-nukacola:not(.mode-hc) {
    & header {
        box-shadow: var(--glow-md), inset 0 -1px 0 rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
    }
    & section {
        background: linear-gradient(160deg, var(--pip-bg-3) 0%, var(--pip-bg) 60%);
        box-shadow: inset 0 0 60px rgba(0,0,0,.22), 0 1px 0 rgba(var(--tc-r),var(--tc-g),var(--tc-b),.05);
    }
    & h2 { background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.07); }
    & .ov-card {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.030);
        border-left-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.28);
    }
    & .ov-sub { border-bottom-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.15); }
    & .tab-nav button.active {
        box-shadow: 0 0 9px rgba(var(--tc-r),var(--tc-g),var(--tc-b),.40);
    }
    & .modal-box, & .lvlup-box, & .perk-picker-box, & .perk-zoom-box {
        background: var(--pip-bg-2) !important;
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.35) !important;
        box-shadow: var(--glow-lg), 0 0 80px rgba(0,0,0,.85) !important;
    }
    & .pperk-card {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.030);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.20);
    }
    & .pperk-card:hover {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.55);
    }
    & .pperk-name { color: var(--pip-color); }
    & .pperk-rank-badge {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.35);
        color: var(--pip-color);
    }
    & .ptrait-card {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.025);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.20);
    }
    & .ptrait-card:hover {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.09);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.55);
    }
    & .ptrait-name, & .trait-card-name, & .trait-slot-name { color: var(--pip-color); }
    & .ptrait-take-btn {
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.38) !important;
        color: var(--pip-color);
    }
    & .ptrait-elig-badge {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.38);
        color: var(--pip-color);
    }
    & .trait-chip {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.08);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.28);
        color: var(--pip-color);
    }
    & .lvl-tag.is-trait {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.38);
        color: var(--pip-color);
    }
    & .prog-row {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.018);
        border-color:      rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-left-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.15);
    }
    & .prog-row.has-perk {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.036) !important;
        border-left-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.55) !important;
    }
    & .plab-perk { color: var(--pip-color); border-color: var(--pip-color); background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.04); }
    & .plab-trait { border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.55); background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.03); }
    & #perk-lvlup-banner {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.10);
        border-bottom-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.50);
        color: var(--pip-color);
    }
    & #trait-lvlup-banner {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.07);
        border-bottom-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.40);
        color: var(--pip-color);
    }
    & .lvlup-btn-ready {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.08);
        box-shadow: 0 0 8px rgba(var(--tc-r),var(--tc-g),var(--tc-b),.22);
    }
    & .action-btn { border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.40) !important; color: var(--pip-color); }
    & .action-btn:hover { background: rgba(255,255,255,0.10) !important; color: var(--pip-color) !important; border-color: rgba(255,255,255,0.30) !important; }
    & .gear-card {
        background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.020);
        border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.14);
    }
    & #perk-zoom-name { color: var(--pip-color); }
    & .spec-rank-title {
        color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),.70);
        text-shadow: 0 0 8px rgba(var(--tc-r),var(--tc-g),var(--tc-b),.38);
    }
    & .scroll-v::-webkit-scrollbar-thumb { background: var(--pip-border); }
    & .scroll-v::-webkit-scrollbar-thumb:hover { background: var(--pip-color); }
}

/* ── 1. Vault-Tec ────────────────────────────────────────────────
   Retro-corporate optimism. Golden yellow on Vault blue.
   The only theme with a genuinely coloured background.
   Hex safety-seal circles, 50s brochure geometry.
──────────────────────────────────────────────────────────────── */
body.theme-vaulttec:not(.mode-hc) {
    --pip-color:  #ffd000;
    --pip-bg:     #00224a;
    --pip-bg-2:   #002a5a;
    --pip-bg-3:   #003268;
    --pip-border: #005090;
    --glow-sm:    0 0 7px  rgba(255,208,0,.35);
    --glow-md:    0 0 18px rgba(255,208,0,.25);
    --glow-lg:    0 0 38px rgba(255,208,0,.15);
    --tc-r: 255; --tc-g: 208; --tc-b: 0;
    --pip-rgb: 255, 208, 0;
}
body.theme-vaulttec:not(.mode-hc) {
    background-image:
        radial-gradient(circle at 50% 50%, transparent 28%, rgba(0,80,144,.08) 28%,
            rgba(0,80,144,.08) 30%, transparent 30%) center / 44px 44px,
        repeating-linear-gradient(0deg, transparent, transparent 44px,
            rgba(255,208,0,.012) 44px, rgba(255,208,0,.012) 45px),
        radial-gradient(ellipse at 50% 0%, rgba(0,60,120,.80) 0%, #00224a 100%);
}
body.theme-vaulttec:not(.mode-hc) header {
    background: linear-gradient(180deg, #0050a0 0%, #003878 40%, #00224a 100%);
    border-bottom: 3px solid #ffd000;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 0 28px rgba(255,208,0,.22), 0 3px 0 rgba(255,208,0,.40);
}
body.theme-vaulttec:not(.mode-hc) .os-title {
    color: #ffd000;
    text-shadow: 0 0 12px rgba(255,208,0,.55), 0 2px 0 rgba(0,0,0,.50);
    letter-spacing: 0.22em;
}
body.theme-vaulttec:not(.mode-hc) .tab-nav button.active {
    background: rgba(255,208,0,.18);
    border-color: rgba(255,208,0,.70);
    color: #ffe840;
}
body.theme-vaulttec:not(.mode-hc) h2 {
    border-left: 3px solid rgba(255,208,0,.65);
    padding-left: 8px;
}
body.theme-vaulttec:not(.mode-hc) section {
    background: linear-gradient(160deg, #003268 0%, #00224a 60%) !important;
    border-color: rgba(0,80,144,.55) !important;
}
body.theme-vaulttec:not(.mode-hc) .plab-trait { color: #ffe055; }
/* ── 2. Brotherhood of Steel ─────────────────────────────────────
   Cold military hardware. Steel blue on deep navy-black.
   Hexagonal power-armour plating, heavy borders, no warmth.
──────────────────────────────────────────────────────────────── */
body.theme-bos:not(.mode-hc) {
    --pip-color:  #4090e0;
    --pip-bg:     #010306;
    --pip-bg-2:   #010610;
    --pip-bg-3:   #020a1a;
    --pip-border: #0a1e40;
    --glow-sm:    0 0 7px  rgba(64,144,224,.35);
    --glow-md:    0 0 18px rgba(64,144,224,.26);
    --glow-lg:    0 0 38px rgba(64,144,224,.16);
    --tc-r: 64; --tc-g: 144; --tc-b: 224;
    --pip-rgb: 64, 144, 224;
}
body.theme-bos:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(30deg, transparent, transparent 22px,
            rgba(64,144,224,.018) 22px, rgba(64,144,224,.018) 24px),
        repeating-linear-gradient(-30deg, transparent, transparent 22px,
            rgba(64,144,224,.018) 22px, rgba(64,144,224,.018) 24px),
        repeating-linear-gradient(90deg, transparent, transparent 22px,
            rgba(64,144,224,.008) 22px, rgba(64,144,224,.008) 23px),
        radial-gradient(ellipse at 50% 0%, rgba(2,12,40,.85) 0%, #010306 80%);
}
body.theme-bos:not(.mode-hc) header {
    background: linear-gradient(180deg, #04122a 0%, #010306 100%);
    border-bottom: 3px solid rgba(64,144,224,.70);
    border-top: 1px solid rgba(64,144,224,.16);
    box-shadow: 0 0 30px rgba(64,144,224,.22), inset 0 -2px 0 rgba(64,144,224,.26);
}
body.theme-bos:not(.mode-hc) .os-title {
    color: #4090e0;
    text-shadow: 0 0 12px rgba(64,144,224,.60), 0 0 28px rgba(64,144,224,.25);
    letter-spacing: 0.18em;
}
body.theme-bos:not(.mode-hc) .tab-nav button.active {
    background: rgba(64,144,224,.14);
    border-color: rgba(64,144,224,.70);
    color: #80b8f8;
}
body.theme-bos:not(.mode-hc) h2 {
    border-left: 3px solid rgba(64,144,224,.60);
    padding-left: 8px;
}
body.theme-bos:not(.mode-hc) .plab-trait { color: #70a8f0; }

/* ── 3. Caesar's Legion ──────────────────────────────────────────
   Ancient and brutal. Dried blood crimson on near-black maroon.
   Stone chisel cross-hatch, Roman severity, no softness.
──────────────────────────────────────────────────────────────── */
body.theme-legion:not(.mode-hc) {
    --pip-color:  #b02000;
    --pip-bg:     #080000;
    --pip-bg-2:   #100200;
    --pip-bg-3:   #180300;
    --pip-border: #480800;
    --glow-sm:    0 0 6px  rgba(176,32,0,.32);
    --glow-md:    0 0 16px rgba(176,32,0,.24);
    --glow-lg:    0 0 32px rgba(176,32,0,.16);
    --tc-r: 176; --tc-g: 32; --tc-b: 0;
    --pip-rgb: 176, 32, 0;
    --accent-brass: #9a6e14;
}
body.theme-legion:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px,
            rgba(60,8,0,.06) 10px, rgba(60,8,0,.06) 11px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px,
            rgba(0,0,0,.07) 10px, rgba(0,0,0,.07) 11px),
        radial-gradient(ellipse at 50% 0%, rgba(80,8,0,.78) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(50,4,0,.40) 0%, transparent 60%);
}
body.theme-legion:not(.mode-hc) header {
    background: linear-gradient(180deg, #280400 0%, #080000 100%);
    border-bottom: 3px solid rgba(176,32,0,.72);
    border-top: 1px solid rgba(154,110,20,.22);
    box-shadow: 0 0 22px rgba(176,32,0,.22), inset 0 -2px 0 rgba(80,8,0,.50);
}
body.theme-legion:not(.mode-hc) .os-title {
    color: #c83000;
    text-shadow: 0 0 10px rgba(176,32,0,.55), 0 0 22px rgba(176,32,0,.22);
    letter-spacing: 0.24em;
}
body.theme-legion:not(.mode-hc) .tab-nav button.active {
    background: rgba(176,32,0,.14);
    border-color: rgba(176,32,0,.65);
    color: #e04020;
}
body.theme-legion:not(.mode-hc) h2 {
    border-left: 3px solid rgba(176,32,0,.58);
    padding-left: 8px;
}
body.theme-legion:not(.mode-hc) .plab-trait { color: #c07818; }
body.theme-legion:not(.mode-hc) .skill-delta-badge.sdelta-pos,
body.theme-legion:not(.mode-hc) .spec-delta-badge.sdelta-pos { color: #b88010; border-color: rgba(184,128,16,.40); }
/* ── 4. New California Republic ──────────────────────────────────
   Frontier law and desert heat. Ochre-gold on dark sand-brown.
   Topographic survey lines, ranger weathered, dry and warm.
──────────────────────────────────────────────────────────────── */
body.theme-ncr:not(.mode-hc) {
    --pip-color:  #c8a030;
    --pip-bg:     #080600;
    --pip-bg-2:   #100d00;
    --pip-bg-3:   #181300;
    --pip-border: #3c2e04;
    --glow-sm:    0 0 6px  rgba(200,160,48,.28);
    --glow-md:    0 0 16px rgba(200,160,48,.20);
    --glow-lg:    0 0 32px rgba(200,160,48,.13);
    --tc-r: 200; --tc-g: 160; --tc-b: 48;
    --pip-rgb: 200, 160, 48;
}
body.theme-ncr:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 24px,
            rgba(200,160,48,.016) 24px, rgba(200,160,48,.016) 25px),
        repeating-linear-gradient(90deg, transparent, transparent 24px,
            rgba(200,160,48,.016) 24px, rgba(200,160,48,.016) 25px),
        repeating-linear-gradient(45deg, transparent, transparent 48px,
            rgba(200,160,48,.007) 48px, rgba(200,160,48,.007) 49px),
        radial-gradient(ellipse at 50% 0%, rgba(80,55,0,.72) 0%, rgba(36,24,0,.30) 55%, transparent 80%);
}
body.theme-ncr:not(.mode-hc) header {
    background: linear-gradient(180deg, #362200 0%, #1a1000 40%, #080600 100%);
    border-bottom: 2px solid rgba(200,160,48,.65);
    border-top: 1px solid rgba(200,160,48,.18);
    box-shadow: 0 0 20px rgba(200,160,48,.18), inset 0 -1px 0 rgba(200,160,48,.22);
}
body.theme-ncr:not(.mode-hc) .os-title {
    color: #c8a030;
    text-shadow: 0 0 10px rgba(200,160,48,.50), 0 0 22px rgba(200,160,48,.22);
    letter-spacing: 0.22em;
}
body.theme-ncr:not(.mode-hc) .tab-nav button.active {
    background: rgba(200,160,48,.12);
    border-color: rgba(200,160,48,.65);
    color: #ddb848;
}
body.theme-ncr:not(.mode-hc) h2 {
    border-left: 3px solid rgba(200,160,48,.55);
    padding-left: 8px;
}
body.theme-ncr:not(.mode-hc) .plab-trait { color: #d8b840; }
body.theme-ncr:not(.mode-hc) .skill-delta-badge.sdelta-pos,
body.theme-ncr:not(.mode-hc) .spec-delta-badge.sdelta-pos { color: #c8a030; border-color: rgba(200,160,48,.40); }

/* ── 5. Mr. House / New Vegas Strip ──────────────────────────────
   Neon luxury and calculated power. Deep violet on near-black.
   Skyscraper window grid, Strip at night, cold ambition.
──────────────────────────────────────────────────────────────── */
body.theme-house:not(.mode-hc) {
    --pip-color:  #a020f0;
    --pip-bg:     #020008;
    --pip-bg-2:   #040014;
    --pip-bg-3:   #07001e;
    --pip-border: #240040;
    --glow-sm:    0 0 8px  rgba(160,32,240,.38);
    --glow-md:    0 0 22px rgba(160,32,240,.28);
    --glow-lg:    0 0 48px rgba(160,32,240,.16);
    --tc-r: 160; --tc-g: 32; --tc-b: 240;
    --pip-rgb: 160, 32, 240;
    --accent-gold: #e0c030;
}
body.theme-house:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 28px,
            rgba(160,32,240,.020) 28px, rgba(160,32,240,.020) 30px),
        repeating-linear-gradient(0deg, transparent, transparent 20px,
            rgba(160,32,240,.014) 20px, rgba(160,32,240,.014) 21px),
        repeating-linear-gradient(90deg, transparent, transparent 140px,
            rgba(224,192,48,.010) 140px, rgba(224,192,48,.010) 141px),
        radial-gradient(ellipse at 50% 0%, rgba(56,0,110,.78) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(28,0,60,.35) 0%, transparent 60%);
}
body.theme-house:not(.mode-hc) header {
    background: linear-gradient(180deg, #110028 0%, #020008 100%);
    border-bottom: 2px solid rgba(160,32,240,.76);
    box-shadow: 0 0 38px rgba(160,32,240,.30), 0 0 10px rgba(224,192,48,.08), inset 0 -1px 0 rgba(160,32,240,.28);
}
body.theme-house:not(.mode-hc) .os-title {
    color: #a020f0;
    text-shadow: 0 0 16px rgba(160,32,240,.65), 0 0 36px rgba(160,32,240,.30);
    letter-spacing: 0.20em;
}
body.theme-house:not(.mode-hc) .tab-nav button.active {
    background: linear-gradient(135deg, #6010a8 0%, #a020f0 100%);
    color: #fff;
    font-weight: bold;
}
body.theme-house:not(.mode-hc) h2 {
    border-left: 3px solid rgba(160,32,240,.60);
    padding-left: 8px;
}
body.theme-house:not(.mode-hc) .plab-trait { color: #c060ff; }

/* ── 6. Mothership Zeta ──────────────────────────────────────────
   Alien abduction. Cold clinical off-white on very dark blue-grey.
   Government-form ruled lines, institutional severity, sterile.
──────────────────────────────────────────────────────────────── */
body.theme-zeta:not(.mode-hc) {
    --pip-color:  #c0e8f0;
    --pip-bg:     #000508;
    --pip-bg-2:   #000a10;
    --pip-bg-3:   #000f18;
    --pip-border: #0c2030;
    --glow-sm:    0 0 5px  rgba(192,232,240,.20);
    --glow-md:    0 0 12px rgba(192,232,240,.14);
    --glow-lg:    0 0 26px rgba(192,232,240,.08);
    --tc-r: 192; --tc-g: 232; --tc-b: 240;
    --pip-rgb: 192, 232, 240;
    --accent-alien: rgba(120,255,200,.08);
}
body.theme-zeta:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 22px,
            rgba(192,232,240,.009) 22px, rgba(192,232,240,.009) 23px),
        repeating-linear-gradient(90deg, transparent, transparent 88px,
            rgba(192,232,240,.014) 88px, rgba(192,232,240,.014) 90px,
            transparent 90px, transparent 352px,
            rgba(192,232,240,.007) 352px, rgba(192,232,240,.007) 353px),
        radial-gradient(ellipse at 50% 0%, rgba(0,24,44,.95) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(0,80,100,.04) 0%, transparent 50%);
}
body.theme-zeta:not(.mode-hc) header {
    background: linear-gradient(180deg, #040e18 0%, #000508 100%);
    border-bottom: 1px solid rgba(192,232,240,.55);
    border-top: 3px solid rgba(192,232,240,.30);
    box-shadow: 0 0 16px rgba(192,232,240,.08), inset 0 -1px 0 rgba(192,232,240,.18);
}
body.theme-zeta:not(.mode-hc) .os-title {
    color: #c0e8f0;
    text-shadow: 0 0 8px rgba(192,232,240,.30);
    letter-spacing: 0.32em;
    font-variant: small-caps;
}
body.theme-zeta:not(.mode-hc) .tab-nav button.active {
    background: rgba(192,232,240,.09);
    border-color: rgba(192,232,240,.55);
    color: #d8f4ff;
}
body.theme-zeta:not(.mode-hc) h2 {
    border-left: 1px solid rgba(192,232,240,.50);
    border-right: 1px solid rgba(192,232,240,.10);
    padding-left: 8px;
}
body.theme-zeta:not(.mode-hc) .plab-trait { color: #a8d8e8; }

/* ── 7. Sierra Madre ─────────────────────────────────────────────
   Begin again. Let go. Tarnished gold on deep sepia-black.
   Drifting Cloud haze, faded art-deco casino grandeur, decay.
──────────────────────────────────────────────────────────────── */
body.theme-sierramadre:not(.mode-hc) {
    --pip-color:  #c89040;
    --pip-bg:     #060400;
    --pip-bg-2:   #0e0900;
    --pip-bg-3:   #160e00;
    --pip-border: #3c2a00;
    --glow-sm:    0 0 9px  rgba(200,144,64,.28);
    --glow-md:    0 0 22px rgba(200,144,64,.20);
    --glow-lg:    0 0 46px rgba(200,144,64,.12);
    --tc-r: 200; --tc-g: 144; --tc-b: 64;
    --pip-rgb: 200, 144, 64;
}
body.theme-sierramadre:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 60px,
            rgba(200,144,64,.009) 60px, rgba(200,144,64,.009) 62px),
        repeating-linear-gradient(-45deg, transparent, transparent 60px,
            rgba(200,144,64,.009) 60px, rgba(200,144,64,.009) 62px),
        radial-gradient(ellipse at 22% 18%, rgba(160,100,30,.10) 0%, transparent 45%),
        radial-gradient(ellipse at 78% 72%, rgba(140,88,24,.08) 0%, transparent 45%),
        radial-gradient(ellipse at 52% 42%, rgba(180,120,40,.05) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 0%, rgba(72,44,0,.88) 0%, #060400 80%);
}
body.theme-sierramadre:not(.mode-hc) header {
    background: linear-gradient(180deg, #382000 0%, #180e00 50%, #060400 100%);
    border-bottom: 2px solid rgba(200,144,64,.58);
    border-top: 1px solid rgba(200,144,64,.20);
    box-shadow: 0 0 26px rgba(200,144,64,.16), inset 0 -1px 0 rgba(200,144,64,.14);
}
body.theme-sierramadre:not(.mode-hc) .os-title {
    color: #c89040;
    text-shadow: 0 0 12px rgba(200,144,64,.48), 0 0 28px rgba(200,144,64,.20);
    letter-spacing: 0.30em;
}
body.theme-sierramadre:not(.mode-hc) .tab-nav button.active {
    background: rgba(200,144,64,.10);
    border-color: rgba(200,144,64,.62);
    color: #deb050;
}
body.theme-sierramadre:not(.mode-hc) h2 {
    border-left: 2px solid rgba(200,144,64,.50);
    padding-left: 8px;
}
body.theme-sierramadre:not(.mode-hc) .plab-trait { color: #deb050; }

/* ── 8. The Pitt ─────────────────────────────────────────────────
   Industrial horror. Molten slag orange on soot-black.
   Corrugated steel ridges, furnace heat bloom, oppressive dark.
──────────────────────────────────────────────────────────────── */
body.theme-pitt:not(.mode-hc) {
    --pip-color:  #e05010;
    --pip-bg:     #060200;
    --pip-bg-2:   #0c0400;
    --pip-bg-3:   #140600;
    --pip-border: #421400;
    --glow-sm:    0 0 8px  rgba(224,80,16,.38);
    --glow-md:    0 0 20px rgba(224,80,16,.28);
    --glow-lg:    0 0 44px rgba(224,80,16,.16);
    --tc-r: 224; --tc-g: 80; --tc-b: 16;
    --pip-rgb: 224, 80, 16;
}
body.theme-pitt:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px,
            rgba(224,80,16,.010) 4px, rgba(224,80,16,.010) 5px),
        repeating-linear-gradient(0deg, transparent, transparent 14px,
            rgba(0,0,0,.09) 14px, rgba(0,0,0,.09) 16px),
        repeating-linear-gradient(90deg, transparent, transparent 60px,
            rgba(224,80,16,.016) 60px, rgba(224,80,16,.016) 62px),
        radial-gradient(ellipse at 50% 110%, rgba(240,72,0,.32) 0%, rgba(160,32,0,.12) 30%, transparent 62%),
        radial-gradient(ellipse at 50% 0%, rgba(24,8,0,.92) 0%, #060200 75%);
}
body.theme-pitt:not(.mode-hc) header {
    background: linear-gradient(180deg, #280a00 0%, #0c0400 100%);
    border-bottom: 3px solid rgba(224,80,16,.72);
    border-top: 1px solid rgba(255,120,40,.14);
    box-shadow: 0 0 30px rgba(224,80,16,.26), inset 0 -2px 0 rgba(224,80,16,.20);
}
body.theme-pitt:not(.mode-hc) .os-title {
    color: #e05010;
    text-shadow: 0 0 14px rgba(224,80,16,.65), 0 0 30px rgba(224,80,16,.26);
    letter-spacing: 0.20em;
}
body.theme-pitt:not(.mode-hc) .tab-nav button.active {
    background: rgba(224,80,16,.12);
    border-color: rgba(224,80,16,.68);
    color: #f07030;
}
body.theme-pitt:not(.mode-hc) h2 {
    border-left: 3px solid rgba(224,80,16,.58);
    padding-left: 8px;
}
body.theme-pitt:not(.mode-hc) section {
    background: linear-gradient(160deg, #140600 0%, #060200 60%) !important;
}
body.theme-pitt:not(.mode-hc) .plab-trait { color: #f08040; }
body.theme-pitt:not(.mode-hc) .skill-delta-badge.sdelta-pos,
body.theme-pitt:not(.mode-hc) .spec-delta-badge.sdelta-pos { color: #e05010; border-color: rgba(224,80,16,.40); }
/* ── 9. Old World Blues ──────────────────────────────────────────
   Big Mountain mad science. Electric teal on very dark blue-black.
   Lab tile grid, tesla coil concentric rings, energetic and strange.
──────────────────────────────────────────────────────────────── */
body.theme-owb:not(.mode-hc) {
    --pip-color:  #00d8b0;
    --pip-bg:     #00060a;
    --pip-bg-2:   #000e14;
    --pip-bg-3:   #00161e;
    --pip-border: #003840;
    --glow-sm:    0 0 8px  rgba(0,216,176,.38);
    --glow-md:    0 0 22px rgba(0,216,176,.27);
    --glow-lg:    0 0 48px rgba(0,216,176,.16);
    --tc-r: 0; --tc-g: 216; --tc-b: 176;
    --pip-rgb: 0, 216, 176;
}
body.theme-owb:not(.mode-hc) {
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 34px,
            rgba(0,216,176,.018) 34px, rgba(0,216,176,.018) 36px),
        repeating-linear-gradient(0deg, transparent, transparent 34px,
            rgba(0,216,176,.018) 34px, rgba(0,216,176,.018) 35px),
        radial-gradient(ellipse at 50% 50%, rgba(0,216,176,.04) 0%, transparent 32%),
        radial-gradient(ellipse at 50% 50%, rgba(0,216,176,.025) 0%, transparent 54%),
        radial-gradient(ellipse at 50% 0%, rgba(0,50,70,.88) 0%, #00060a 80%);
}
body.theme-owb:not(.mode-hc) header {
    background: linear-gradient(180deg, #00262e 0%, #001018 50%, #00060a 100%);
    border-bottom: 2px solid rgba(0,216,176,.75);
    border-top: 1px solid rgba(0,216,176,.20);
    box-shadow: 0 0 34px rgba(0,216,176,.26), inset 0 -1px 0 rgba(0,216,176,.28);
}
body.theme-owb:not(.mode-hc) .os-title {
    color: #00d8b0;
    text-shadow: 0 0 14px rgba(0,216,176,.70), 0 0 32px rgba(0,216,176,.32);
    letter-spacing: 0.22em;
}
body.theme-owb:not(.mode-hc) .tab-nav button.active {
    background: rgba(0,216,176,.14);
    border-color: rgba(0,216,176,.70);
    color: #40f0d0;
}
body.theme-owb:not(.mode-hc) h2 {
    border-left: 3px solid rgba(0,216,176,.60);
    padding-left: 8px;
}
body.theme-owb:not(.mode-hc) .plab-trait { color: #40f0d0; }

/* ══════════════════════════════════════════════════════════════════
   SPECIAL PANEL — BASE TOGGLE & IMPROVED BONUS DISPLAY
══════════════════════════════════════════════════════════════════ */

/* Header row layout */
.special-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

.special-header-row .section-label {
    flex-shrink: 0;
    min-width: 0; /* Allow text to wrap if absolutely necessary */
}

/* BASE toggle button */
.spec-base-toggle-btn {
    font-family: var(--font-main);
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid rgba(var(--tc-r),var(--tc-g),var(--tc-b),0.35);
    background: transparent;
    color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),0.45);
    cursor: pointer;
    transition: all var(--t-base);
    border-radius: var(--r-sm);
}
.spec-base-toggle-btn:hover {
    border-color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),0.7);
    color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),0.85);
    background: rgba(var(--tc-r),var(--tc-g),var(--tc-b),0.08);
}
.spec-base-toggle-active {
    border-color: var(--pip-color) !important;
    color: #000 !important;
    background: var(--pip-color) !important;
}

/* Detailed sources container */
.spec-detailed-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 3px 0;
    min-height: 18px;
}

/* No modifiers placeholder */
.spec-no-mods {
    font-size: 0.65rem;
    font-style: italic;
    opacity: 0.4;
    letter-spacing: 0.5px;
}

/* Individual source badges in detailed mode */
.spec-source-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.spec-badge-it {
    background: rgba(255,255,0,0.15);
    border: 1px solid rgba(255,255,0,0.4);
    color: #ffff99;
}

.spec-badge-impl {
    background: rgba(80,200,255,0.15);
    border: 1px solid rgba(80,200,255,0.4);
    color: #99ddff;
}

.spec-badge-trait {
    background: rgba(255,150,50,0.15);
    border: 1px solid rgba(255,150,50,0.4);
    color: #ffbb77;
}

.spec-badge-perk {
    background: rgba(160,100,255,0.15);
    border: 1px solid rgba(160,100,255,0.4);
    color: #cc99ff;
}

.spec-badge-cond {
    background: rgba(100,255,100,0.15);
    border: 1px solid rgba(100,255,100,0.4);
    color: #99ff99;
}

.spec-badge-gear {
    background: rgba(100,255,200,0.15);
    border: 1px solid rgba(100,255,200,0.4);
    color: #99ffdd;
}
.spec-badge-ht {
    background: rgba(255,60,30,0.15);
    border: 1px solid rgba(255,60,30,0.4);
    color: #ff8060;
}

/* Base mode: dim the +/- controls to show they're locked to base view */
.special-row.spec-base-mode .special-btn {
    opacity: 0.4;
}
.special-row.spec-base-mode .spec-val {
    color: rgba(var(--tc-r),var(--tc-g),var(--tc-b),0.7);
}

/* Total effective badge (= N) */
.spec-total-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--pip-color);
    letter-spacing: 0.5px;
    margin-left: 4px;
    opacity: 0.85;
}

/* Clean collapsed total — shown instead of multiple source badges */
.spec-total-clean {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: bold;
    color: var(--pip-color);
    opacity: 0.65;
    margin-left: 5px;
    letter-spacing: 0.5px;
    cursor: help;
    white-space: nowrap;
    border: none !important;
    background: transparent !important;
}

/* Keep special-controls tidy — no wrapping needed now */
.special-compact-grid .special-controls {
    flex-wrap: nowrap;
    gap: 3px;
}


/* UX Enhancement Animations */
@keyframes numberPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.number-changing { animation: numberPulse 0.25s ease; }


@keyframes rowReveal {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
}
.progressive-reveal { animation: rowReveal 0.3s ease forwards; }

.modal-overlay { transition: opacity var(--t-base) ease; }
.modal-box { transition: all var(--t-slow) ease; }
button, input { transition: all var(--t-base) ease; }

#drop-overlay { font-family: 'Share Tech Mono', monospace; }
#drop-overlay .drop-msg {
    font-size: 1.4rem; color: var(--pip-color);
    border: 3px dashed var(--pip-color);
    padding: 2rem 3rem; background: rgba(0,0,0,0.5);
    pointer-events: none;
}

/* ═══ HOVER PREVIEW TOOLTIP ════════════════════════════════════════ */
#hover-preview {
    display: none; position: fixed; z-index: 99999; pointer-events: none;
    background: rgba(6,9,8,0.96); border: 1px solid var(--pip-border);
    border-left: 3px solid var(--pip-color);
    padding: 10px 14px; font-size: 0.75rem; max-width: 340px;
    line-height: 1.5; box-shadow: 0 4px 24px rgba(0,0,0,0.7);
    font-family: var(--font-main);
}