:root {
  --bg-primary:#0a0c10;--bg-secondary:#11141b;--bg-card:#161a24;--bg-card-hover:#1c2230;
  --border:#252b3a;--border-accent:#2a3348;--text-primary:#e8eaf0;--text-secondary:#8b92a8;--text-muted:#5a6178;
  --accent-orange:#f07623;--accent-orange-dim:#a8521a;--accent-blue:#3b8beb;--accent-cyan:#22d3ee;
  --accent-red:#ef4444;--accent-green:#34d399;--accent-purple:#a78bfa;--accent-yellow:#fbbf24;--accent-pink:#f472b6;
  --r-legendary:#f59e0b;--r-epic:#a855f7;--r-rare:#3b82f6;--r-uncommon:#22c55e;--r-common:#94a3b8;
  --map-dam:#22c55e;--map-buried:#84cc16;--map-space:#eab308;--map-blue:#f97316;--map-stella:#ef4444;
  --glow-orange:0 0 20px rgba(240,118,35,0.3);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:'Exo 2',sans-serif;min-height:100vh}
.sticky-nav{position:sticky;top:0;z-index:100;background:#0a0c10;border-bottom:none}
.header{border-bottom:none;padding:0}
.header-inner{max-width:1600px;margin:0 auto;height:62px;padding:6px 32px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:none;background-image:linear-gradient(to right,transparent,var(--border) 20px,var(--border) calc(100% - 20px),transparent);background-size:100% 1px;background-position:bottom;background-repeat:no-repeat}
.logo{display:flex;align-items:center;gap:16px}
.logo-icon{width:40px;height:40px;border-radius:8px;object-fit:contain}
.logo-text{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:28px;letter-spacing:3px;white-space:nowrap;
  background:linear-gradient(110deg,rgba(255,255,255,0) 42%,rgba(255,255,255,0.95) 50%,rgba(255,255,255,0) 58%) no-repeat,linear-gradient(90deg,#00e5ff,#22c55e,#f07623,#ef4444);
  background-size:220% 100%,100% 100%;background-position:220% 0,0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:logoGlisten 12s linear infinite}
@keyframes logoGlisten{0%{background-position:220% 0,0 0}30%{background-position:-220% 0,0 0}100%{background-position:-220% 0,0 0}}
.logo-name{text-transform:none}
.logo-sub{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-muted);letter-spacing:4px;text-transform:uppercase;text-align:center}
.build-tag{font-size:8px;color:var(--text-muted);letter-spacing:1px;opacity:0.5;margin-top:6px}
.header-stats{display:flex;gap:24px;flex:1;justify-content:center}
.header-stat{text-align:center}
.header-stat-val{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:24px;color:var(--accent-orange)}
.header-stat-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}

.controls{max-width:1600px;margin:0 auto;padding:4px 32px 5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:none;background-image:linear-gradient(to right,transparent,var(--border) 20px,var(--border) calc(100% - 20px),transparent);background-size:100% 1px;background-position:bottom;background-repeat:no-repeat}
.search-box{flex:1;min-width:220px;position:relative}
.search-box input{width:100%;display:block;padding:0 36px 0 40px;height:34px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;
  color:var(--text-primary);font-family:'Exo 2',sans-serif;font-size:13px;outline:none;transition:border-color 0.2s}
.search-box input:focus{border-color:var(--accent-orange)}
.search-box input:-webkit-autofill,
.search-box input:-webkit-autofill:hover,
.search-box input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--bg-secondary) inset;-webkit-text-fill-color:var(--text-primary);caret-color:var(--text-primary)}
.search-box::before{content:'⌕';position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px}
.search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);
  font-size:16px;cursor:pointer;padding:2px 6px;display:none;transition:color 0.15s}
.search-clear:hover{color:var(--text-primary)}
.search-box.has-query .search-clear{display:block}
select.fs{padding:4px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;
  color:var(--text-secondary);font-family:'Exo 2',sans-serif;font-size:11px;outline:none;cursor:pointer;transition:all 0.15s}
select.fs:hover{border-color:var(--accent-orange-dim);color:var(--text-primary)}
select.fs:focus{border-color:var(--accent-orange)}
.view-toggle{display:flex;gap:4px;background:rgba(240,118,35,0.1);border:1px solid rgba(240,118,35,0.3);border-radius:8px;padding:2px;height:34px;align-self:center}
.view-btn{padding:0 12px;font-size:11px;font-family:'Exo 2',sans-serif;color:var(--text-secondary);background:transparent;
  border:none;border-radius:4px;cursor:pointer;transition:all 0.15s}
.view-btn:hover{color:var(--text-primary)}.view-btn.active{color:var(--accent-orange);background:rgba(240,118,35,0.1)}

.row-label{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-right:2px;white-space:nowrap}
.sort-bar{max-width:1600px;margin:0 auto;padding:2px 32px 5px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);background-color:var(--bg-primary);border-bottom:none;background-image:linear-gradient(to right,transparent,var(--border) 20px,var(--border) calc(100% - 20px),transparent);background-size:100% 1px;background-position:bottom;background-repeat:no-repeat}
.col-toggles{max-width:1600px;margin:0 auto;padding:2px 32px;display:none;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);flex-wrap:wrap;background:var(--bg-primary)}
.col-toggles.show{display:flex}
.col-toggles label{display:flex;align-items:center;gap:3px;cursor:pointer;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,0.03);border:1px solid var(--border)}
.col-toggles label:hover{border-color:var(--accent-orange)}
.col-toggles input{accent-color:var(--accent-orange)}
.col-toggle-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:'Exo 2',sans-serif;transition:all 0.15s}
.col-toggle-btn:hover,.col-toggle-btn.active{color:var(--accent-orange);border-color:var(--accent-orange)}
.filter-chips{max-width:1600px;margin:0 auto;padding:2px 32px;margin-top:-1px;border:none;background-image:linear-gradient(to right,transparent,var(--border) 20px,var(--border) calc(100% - 20px),transparent),linear-gradient(to right,transparent,var(--border) 20px,var(--border) calc(100% - 20px),transparent);background-size:100% 1px,100% 1px;background-position:top,bottom;background-repeat:no-repeat,no-repeat;display:flex;gap:6px;flex-wrap:wrap;align-items:center;background-color:var(--bg-primary)}
.filter-chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-family:'Exo 2',sans-serif;font-size:11px;font-weight:600;
  border-radius:4px;cursor:default;animation:chipIn 0.15s ease-out}
.chip .chip-x{cursor:pointer;opacity:0.6;font-size:13px;line-height:1;margin-left:2px;transition:opacity 0.15s}
.chip .chip-x:hover{opacity:1}
.chip-search{color:var(--accent-orange);background:rgba(240,118,35,0.1);border:1px solid rgba(240,118,35,0.25)}
.chip-cat{color:#22d3ee;background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.25)}
.chip-rarity{color:#a78bfa;background:rgba(167,139,250,0.1);border:1px solid rgba(167,139,250,0.25)}
.chip-map{border:1px solid rgba(255,255,255,0.15)}
.chip-event{border:1px solid rgba(255,255,255,0.15)}
.chip-clear{color:var(--text-muted);background:transparent;border:1px solid var(--border);cursor:pointer;font-weight:400;transition:all 0.15s}
.chip-clear:hover{color:var(--accent-red);border-color:var(--accent-red)}
@keyframes chipIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
.sort-btn{padding:4px 10px;font-family:'Exo 2',sans-serif;font-size:11px;color:var(--text-secondary);background:var(--bg-card);
  border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all 0.15s}
.sort-btn:hover{color:var(--text-primary);border-color:var(--accent-orange-dim)}
.sort-btn.active{color:var(--accent-orange);background:rgba(240,118,35,0.1);border-color:rgba(240,118,35,0.3)}

.content{max-width:1600px;margin:0 auto;padding:5px 32px 64px}

.tier-section{margin-bottom:24px}
.tier-header{display:flex;align-items:center;gap:16px;margin-bottom:12px;padding:12px 16px;
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;cursor:pointer;user-select:none;transition:all 0.2s}
.tier-header:hover{border-color:var(--border-accent)}
.tier-letter{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:14px;line-height:1;
  padding:8px 14px;display:flex;align-items:center;justify-content:center;border-radius:8px;letter-spacing:0.5px;text-transform:uppercase;white-space:nowrap}
.tier-letter.Legendary{color:#000;background:linear-gradient(135deg,var(--r-legendary),#fbbf24)}
.tier-letter.Epic{color:#fff;background:linear-gradient(135deg,var(--r-epic),#c084fc)}
.tier-letter.Rare{color:#fff;background:linear-gradient(135deg,var(--r-rare),#60a5fa)}
.tier-letter.Uncommon{color:#000;background:linear-gradient(135deg,var(--r-uncommon),#4ade80)}
.tier-letter.Common{color:#000;background:linear-gradient(135deg,var(--r-common),#cbd5e1)}
.tier-info{flex:1}
.tier-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;letter-spacing:1px}
.tier-desc{font-size:11px;color:var(--text-muted)}
.tier-count{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--text-muted);padding:4px 10px;border:1px solid var(--border);border-radius:4px}
.tier-toggle{font-size:14px;color:var(--text-muted);transition:transform 0.2s}.tier-toggle.open{transform:rotate(180deg)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
.item-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px;
  transition:all 0.25s;cursor:default;position:relative;overflow:hidden;animation:fadeUp 0.3s ease both}
.item-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--card-accent,var(--accent-orange));opacity:0;transition:opacity 0.25s}
.item-card:hover{border-color:var(--border-accent);background:var(--bg-card-hover);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.item-card:hover::before{opacity:1}

.card-head{position:relative;min-height:110px;overflow:hidden}
.card-hero{display:flex;gap:10px;align-items:stretch}
.card-img-wrap{flex-shrink:0;display:flex}
.card-info{flex:1;min-width:0}
.card-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;line-height:1.2;padding-right:80px}
.card-cat{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:6px}
.card-desc{font-size:10px;color:var(--text-muted);font-style:italic;margin-top:6px;line-height:1.4;height:5.6em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card-thumb{width:120px;height:100px;border-radius:6px;background:rgba(255,255,255,0.05);border:1px solid var(--border);flex-shrink:0;object-fit:contain}
.item-card .card-thumb{height:120px;align-self:stretch}
.card-weapon .card-thumb{width:180px}
.card-enemy .card-thumb{width:120px;height:90px;object-fit:cover;align-self:flex-start;min-height:unset}
.card-quest .card-thumb{width:120px;height:90px;object-fit:cover;align-self:flex-start;min-height:unset}
.card-quest .card-name{padding-right:55px}
.card-quest .card-head{min-height:unset}
.card-quest .card-desc{-webkit-line-clamp:2;height:auto}
.card-enemy .card-desc{-webkit-line-clamp:unset;display:block;height:auto}
.card-enemy .card-sources{margin-top:6px}
.combat-tips{margin-top:8px}
.combat-tips .attr-label{display:block;margin-bottom:4px;color:var(--accent-red)}
.combat-tips-list{margin:0;padding-left:16px;list-style:disc}
.combat-tips-list li{font-size:11px;line-height:1.5;color:var(--text-secondary);margin:0 0 5px}
.card-quest .card-body{margin-top:6px;padding-top:6px}
.card-price-row{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.card-head .badge-rarity{position:absolute;top:0;right:0}
.card-head .badge-track{position:absolute;top:0;right:0;margin-top:22px}
.badge-track-group .badge-track{position:static;margin-left:0;flex-direction:row-reverse}
.card-body{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.tbl-thumb{width:32px;height:32px;border-radius:4px;background:rgba(255,255,255,0.05);border:1px solid var(--border);object-fit:contain;vertical-align:middle}
.tbl-check{accent-color:var(--accent-green);cursor:pointer;vertical-align:middle;margin-right:4px}
.card-craft-grid{display:grid;grid-template-columns:46px minmax(0,1fr) 46px minmax(0,1fr);gap:3px 10px;font-size:11px;color:var(--text-secondary);margin-top:6px;grid-auto-flow:dense;line-height:1.4}
.card-craft-grid .attr-row{display:contents}
.card-craft-grid .cg-left .attr-label{grid-column:1}
.card-craft-grid .cg-left .attr-val{grid-column:2}
.card-craft-grid .cg-right .attr-label{grid-column:3}
.card-craft-grid .cg-right .attr-val{grid-column:4}
.card-craft-grid .attr-label{color:var(--text-muted);font-weight:600;text-transform:uppercase;font-size:8px;letter-spacing:0.5px;padding-top:1px}
.card-craft-grid .attr-val{color:var(--text-secondary);overflow-wrap:anywhere}
.card-attrs{font-size:11px;color:var(--text-secondary);margin-top:6px;display:flex;flex-direction:column;gap:3px}
.card-attrs .attr-row{display:flex;gap:6px;line-height:1.4}
.card-attrs .attr-label{color:var(--text-muted);font-weight:600;min-width:52px;text-transform:uppercase;font-size:9px;letter-spacing:0.5px;padding-top:1px}
.card-attrs .attr-val{color:var(--text-secondary)}
.card-stats-grid{display:grid;grid-template-columns:46px minmax(0,1fr) 46px minmax(0,1fr);gap:2px 10px;font-size:11px;align-items:baseline}
.card-stats-grid .sg-cell{display:contents}
.card-stats-grid .sg-lbl{color:var(--text-muted);font-weight:600;text-transform:uppercase;font-size:8px;letter-spacing:0.5px;white-space:nowrap}
.card-stats-grid .sg-val{color:var(--text-secondary);overflow-wrap:anywhere}
.price-tag .stack-mult{font-size:9px;color:var(--text-muted);margin-left:2px}
.price-tag.stack{opacity:.7}
.price-tag .coin.wt{font-size:14px}
.badge{padding:3px 8px;font-family:'Share Tech Mono',monospace;font-size:10px;border-radius:4px;letter-spacing:0.5px;white-space:nowrap}
.badge-rarity{font-weight:700}
.badge-rarity.Legendary{color:var(--r-legendary);background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3)}
.badge-rarity.Epic{color:var(--r-epic);background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.3)}
.badge-rarity.Rare{color:var(--r-rare);background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.3)}
.badge-rarity.Uncommon{color:var(--r-uncommon);background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3)}
.badge-rarity.Common{color:var(--r-common);background:rgba(148,163,184,0.12);border:1px solid rgba(148,163,184,0.3)}
.badge-rarity.Quest{color:var(--accent-cyan);background:rgba(34,211,238,0.12);border:1px solid rgba(34,211,238,0.3)}
.badge-track{color:var(--text-muted);background:rgba(255,255,255,0.05);border:1px solid var(--border);font-size:9px;padding:2px 8px;border-radius:4px;margin-left:4px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s}
.badge-track:hover{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);color:var(--text-secondary)}
.badge-track input{accent-color:var(--accent-orange);cursor:pointer;width:12px;height:12px}
.badge-track-group{position:absolute;bottom:14px;right:14px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.badge-track-group .badge-track{color:var(--accent-cyan);background:rgba(34,211,238,0.08);border-color:rgba(34,211,238,0.25)}
.badge-track-group .badge-track:hover{background:rgba(34,211,238,0.15);border-color:rgba(34,211,238,0.4)}
.badge-track-group .badge-track input{accent-color:var(--accent-cyan)}
.badge-active{color:var(--accent-orange)!important;background:rgba(240,118,35,0.12)!important;border-color:rgba(240,118,35,0.3)!important;font-weight:700}
.badge-active input{accent-color:var(--accent-orange)!important}
.badge-completed{color:#22c55e!important;background:rgba(34,197,94,0.12)!important;border-color:rgba(34,197,94,0.3)!important;font-weight:700}
.badge-completed input{accent-color:#22c55e!important}
.dash-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.dash-quest-checks{margin-left:auto;display:flex;gap:4px;flex-shrink:0;white-space:nowrap}
.dash-check-active,.dash-check-done{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--text-muted);cursor:pointer}
.dash-check-active input,.dash-check-done input{accent-color:var(--accent-orange);cursor:pointer;width:12px;height:12px}
.dash-check-active.on{color:var(--accent-orange)}
.dash-check-done.on{color:var(--accent-green)}
.dash-item.active{border-left:2px solid var(--accent-orange)}
.tbl-check-active{accent-color:var(--accent-orange)!important}

.price-tag{display:flex;align-items:center;gap:4px;margin-top:6px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px}
.price-tag .coin{color:var(--text-muted);font-size:14px}.price-tag .val{color:var(--text-secondary)}

.score-bar{margin-top:8px;display:flex;align-items:center;gap:8px;width:100%;}
.score-label{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;flex-shrink:0}
.score-track{flex:1;height:5px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden}
.score-fill{height:100%;border-radius:3px;transition:width 0.6s cubic-bezier(0.22,1,0.36,1)}
.score-num{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;flex-shrink:0;text-align:right}

.card-maps{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.map-pill{padding:2px 7px;font-size:9px;font-family:'Share Tech Mono',monospace;border-radius:3px;letter-spacing:0.3px;font-weight:600}
.map-pill.dam{color:var(--map-dam);background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25)}
.map-pill.buried{color:var(--map-buried);background:rgba(132,204,22,0.1);border:1px solid rgba(132,204,22,0.25)}
.map-pill.spaceport{color:var(--map-space);background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.25)}
.map-pill.bluegate{color:var(--map-blue);background:rgba(249,115,22,0.1);border:1px solid rgba(249,115,22,0.25)}
.map-pill.stella{color:var(--map-stella);background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25)}
.map-pill.event{color:var(--accent-pink);background:rgba(244,114,182,0.1);border:1px solid rgba(244,114,182,0.25)}

.card-locs{font-size:10px;color:var(--text-secondary);margin-top:5px;line-height:1.5;display:flex;flex-direction:column;gap:3px}
.loc-row{display:flex;gap:6px;align-items:baseline}
.loc-map{font-family:'Share Tech Mono',monospace;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0}
.loc-map.evt{font-size:8px;padding:1px 4px}
.loc-text{color:var(--text-secondary);font-size:10px}
.card-locs strong{color:var(--text-primary);font-weight:600}
.card-note{font-size:11px;color:var(--text-secondary);margin-top:5px;line-height:1.3;font-style:italic}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg-card)}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
table.dt th{padding:10px 12px;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--text-muted);background:var(--bg-secondary);border-bottom:1px solid var(--border);
  text-align:left;white-space:nowrap;cursor:pointer;user-select:none;transition:color 0.15s}
table.dt th:hover{color:var(--accent-orange)}table.dt th.sorted{color:var(--accent-orange)}
table.dt td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.03);vertical-align:top}
table.dt tr:hover td{background:rgba(255,255,255,0.02)}

.load-more-btn{display:block;width:100%;padding:12px;margin-top:10px;background:rgba(240,118,35,0.1);border:1px solid rgba(240,118,35,0.3);border-radius:8px;color:var(--accent-orange);font-family:'Exo 2',sans-serif;font-size:13px;cursor:pointer;transition:all 0.15s}
.load-more-btn:hover{background:rgba(240,118,35,0.2);border-color:var(--accent-orange)}
/* Auth UI */
.auth-wrap{display:flex;gap:6px;align-items:center}
.auth-btn{padding:0 14px;height:34px;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--accent-orange);
  background:rgba(240,118,35,0.1);border:1px solid rgba(240,118,35,0.3);border-radius:8px;cursor:pointer;transition:all 0.2s;white-space:nowrap;display:flex;align-items:center}
.auth-btn:hover{background:rgba(240,118,35,0.2);border-color:var(--accent-orange)}
.auth-username{font-weight:600}
.dash-edit-btn{margin-left:8px;padding:0;background:none;border:none;color:var(--text-muted);font-size:15px;line-height:1;cursor:pointer;vertical-align:middle}
.dash-edit-btn:hover{color:var(--accent-orange)}
.auth-modal-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:12px;text-align:center;font-family:'Share Tech Mono',monospace}
.auth-user{position:relative}
.auth-dropdown{display:none;position:absolute;top:100%;right:0;margin-top:4px;background:#0a0c10;border:1px solid var(--border);border-radius:8px;overflow:hidden;z-index:200;min-width:120px}
.auth-dropdown.open{display:block}
.auth-dropdown a{display:block;padding:8px 16px;color:var(--text-secondary);text-decoration:none;font-size:11px;font-family:'Exo 2',sans-serif;transition:background 0.15s}
.auth-dropdown a:hover{background:rgba(240,118,35,0.1);color:var(--accent-orange)}
/* Auth Modal */
.auth-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;background:rgba(0,0,0,0.85);align-items:center;justify-content:center}
.auth-modal.open{display:flex}
.auth-modal-content{background:#0a0c10;border:1px solid var(--border);border-radius:12px;padding:24px;width:340px;max-width:90vw;position:relative}
.auth-modal-close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer}
.auth-modal-close:hover{color:var(--text-primary)}
.auth-tabs{display:flex;gap:4px;margin-bottom:16px}
.auth-tab{flex:1;padding:8px;font-family:'Exo 2',sans-serif;font-size:12px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all 0.15s}
.auth-tab.active{color:var(--accent-orange);background:rgba(240,118,35,0.1);border-color:rgba(240,118,35,0.3)}
.auth-input{width:100%;padding:10px 14px;margin-bottom:8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:'Exo 2',sans-serif;font-size:13px;outline:none;box-sizing:border-box}
.auth-input:focus{border-color:var(--accent-orange)}
.auth-submit{width:100%;padding:10px;margin-top:4px;font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--accent-orange);background:rgba(240,118,35,0.1);border:1px solid rgba(240,118,35,0.3);border-radius:6px;cursor:pointer;transition:all 0.2s}
.auth-submit:hover{background:rgba(240,118,35,0.2);border-color:var(--accent-orange)}
.auth-forgot{display:block;text-align:center;margin-top:8px;font-size:11px;color:var(--text-muted);text-decoration:none}
.auth-forgot:hover{color:var(--accent-orange)}
.auth-hint{font-size:11px;color:var(--text-muted);margin-bottom:8px;text-align:center}
.auth-divider{text-align:center;margin:12px 0;color:var(--text-muted);font-size:11px;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border)}
.auth-divider::before{left:0}
.auth-divider::after{right:0}
.auth-discord{width:100%;padding:10px;font-family:'Exo 2',sans-serif;font-size:12px;color:#fff;background:#5865F2;border:none;border-radius:6px;cursor:pointer;transition:background 0.2s}
.auth-discord:hover{background:#4752C4}
.auth-msg{font-size:11px;margin-bottom:8px;padding:6px 10px;border-radius:4px;display:none}
.auth-msg.error{display:block;color:#ef4444;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2)}
.auth-msg.success{display:block;color:#22c55e;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2)}
.auth-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#22c55e;color:#000;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:600;z-index:10000;animation:toastFade 5s ease-in-out}
@keyframes toastFade{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}10%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0}}
/* Dashboard */
.dashboard{max-width:1600px;margin:0 auto;padding:5px 32px 64px}
.dash-hero{display:flex;align-items:center;gap:24px;padding:20px 24px;margin-bottom:5px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px}
.dash-hero-ring{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--ring-color) calc(var(--pct) * 1%),rgba(255,255,255,0.05) 0);flex-shrink:0;position:relative}
.dash-hero-ring::before{content:'';position:absolute;width:70px;height:70px;border-radius:50%;background:var(--bg-card)}
.dash-hero-num{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:24px;color:var(--text-primary);z-index:1}
.dash-hero-info{flex:1}
.dash-title{font-family:'Rajdhani',sans-serif;font-size:22px;color:var(--accent-orange);margin-bottom:2px}
.dash-rank{font-family:'Share Tech Mono',monospace;font-size:14px;margin-bottom:8px;letter-spacing:1px}
.dash-hero-stats{display:flex;gap:16px;font-size:11px;color:var(--text-muted);font-family:'Share Tech Mono',monospace}
.dash-pct{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;margin-left:4px}
.dash-project-count{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-muted)}
.dash-section{margin-bottom:5px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dash-header{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background 0.15s}
.dash-header:hover{background:rgba(255,255,255,0.02)}
.dash-label{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;color:var(--text-primary)}
.dash-progress{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--accent-orange);margin-left:auto}
.dash-bar{width:120px;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden}
.dash-fill{height:100%;background:var(--accent-orange);border-radius:3px;transition:width 0.3s}
.dash-list{padding:8px 16px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 12px}
.dash-list.collapsed{display:none}
.dash-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text-secondary);transition:background 0.15s}
.dash-item:hover{background:rgba(255,255,255,0.03)}
.dash-item.checked span{color:var(--accent-green);text-decoration:line-through;opacity:0.6}
.dash-thumb{width:28px;height:28px;border-radius:4px;object-fit:contain;flex-shrink:0}
.dash-item.checked .dash-thumb{opacity:0.4}
.dash-item input{accent-color:var(--accent-orange)}
.dash-projects{display:grid;grid-template-columns:1fr;gap:16px}
.dash-project{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary)}
.dash-project-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.dash-project-img{width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.dash-project-info{flex:1}
.dash-project-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;color:var(--text-primary)}
.dash-project-meta{display:flex;align-items:center;gap:8px;margin-top:4px}
.dash-project-type{font-size:10px;color:var(--accent-cyan);background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.2);padding:1px 6px;border-radius:4px}
.dash-project-count{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--text-muted)}
.dash-stages{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dash-stage-block{padding:10px;border-radius:6px;background:rgba(255,255,255,0.02);border:1px solid var(--border)}
.dash-stage-block.completed{border-color:rgba(34,197,94,0.3);background:rgba(34,197,94,0.03)}
.dash-stage{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--text-primary);cursor:pointer;margin-bottom:6px}
.dash-stage.checked span{color:var(--accent-green)}
.dash-stage input{accent-color:var(--accent-orange)}
.dash-stage-lbl{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.dash-stage-reqs,.dash-stage-rwds{margin-top:6px}
.dash-stage-item{font-size:11px;color:var(--text-secondary);padding:1px 0}
.dash-stage-item.rwd{color:var(--accent-green)}
.empty-state{text-align:center;padding:80px 32px;color:var(--text-muted)}
.empty-state .icon{font-size:48px;margin-bottom:16px;opacity:0.3}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.donate-wrap{position:relative;display:flex;align-items:center;gap:8px}
.creator-msg{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);letter-spacing:1px;line-height:1.4;text-align:right}
.creator-msg strong{color:var(--accent-orange)}
.donate-btn{padding:0 14px;height:34px;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--accent-orange);background:rgba(240,118,35,0.1);display:flex;align-items:center;
  border:1px solid rgba(240,118,35,0.3);border-radius:8px;cursor:pointer;letter-spacing:0.5px;transition:all 0.2s;white-space:nowrap}
.donate-btn:hover{background:rgba(240,118,35,0.2);border-color:var(--accent-orange)}
.donate-popup{display:none;position:absolute;top:100%;right:0;margin-top:8px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:20px;z-index:200;box-shadow:0 12px 40px rgba(0,0,0,0.5);text-align:center;min-width:240px}
.donate-popup.open{display:block}
.donate-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;margin-bottom:10px;color:var(--text-primary)}
.donate-label{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px}
.donate-crypto{font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:700;color:var(--accent-orange)}
.donate-crypto-name{font-size:10px;color:var(--text-muted)}
.donate-qr{border-radius:6px;width:160px;height:160px;display:block;margin:0 auto 10px}
.donate-copy{display:flex;align-items:center;gap:6px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;padding:6px 8px;cursor:pointer}
.donate-addr{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.donate-copy-txt{font-size:10px;color:var(--accent-orange);font-weight:600;white-space:nowrap}
.site-footer{text-align:center;padding:24px 16px;margin-top:32px;border-top:1px solid var(--border);color:var(--text-muted);font-size:11px;line-height:1.6}
.visitor-counter{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.vc-label{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}
.vc-num{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;color:var(--accent-orange);letter-spacing:1px}
/* Filter toggle */
.filter-toggle{display:none}
.filter-toggle:hover{border-color:var(--accent-orange-dim);color:var(--text-primary)}
.filter-toggle.open{color:var(--accent-orange);border-color:var(--accent-orange-dim)}
.ft-arrow{font-size:9px;transition:transform 0.2s}
.filter-toggle.open .ft-arrow{transform:rotate(180deg)}
#mobilePanel{border-top:none}
#mobilePanel.collapsed{display:none}
@media(min-width:769px){
}
#filterPanel{transition:max-height 0.25s ease,opacity 0.2s ease;overflow:hidden}
#filterPanel.collapsed{max-height:0!important;opacity:0;pointer-events:none}
.filter-row{max-width:1600px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px;padding:2px 32px}
/* Category bar */
.cat-bar{max-width:1600px;margin:-1px auto 0;display:flex;flex-wrap:wrap;gap:4px;padding:5px 32px 2px;overflow-x:auto;align-items:center;border-top:none;background-image:linear-gradient(to right,transparent,var(--border) 20px,var(--border) calc(100% - 20px),transparent);background-size:100% 1px;background-position:top;background-repeat:no-repeat}
#catBar{display:contents}
.cat-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11px;
  color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:all 0.15s ease;font-family:'Exo 2',sans-serif}
.cat-btn:hover{border-color:var(--accent-orange-dim);color:var(--text-primary)}
.cat-btn.active{background:rgba(240,118,35,0.1);border-color:rgba(240,118,35,0.3);color:var(--accent-orange);font-weight:600}
.cat-count{font-size:9px;color:var(--text-muted);margin-left:2px}
.cat-btn.active .cat-count{color:rgba(255,255,255,0.7)}
/* Weapon tier sub-buttons */
.cat-btn-group{display:inline-flex;gap:2px;align-items:center}
.tier-sub-btns{display:inline-flex;gap:2px}
.global-tier-btn{padding:3px 6px;font-family:'Exo 2',sans-serif;font-size:9px;color:var(--text-muted);
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all 0.15s}
.global-tier-btn:hover{border-color:var(--accent-orange-dim);color:var(--text-primary)}
.global-tier-btn.active{color:var(--accent-orange);background:rgba(240,118,35,0.1);border-color:rgba(240,118,35,0.3)}
/* Tier tabs */
.tier-tabs{display:flex;gap:4px;margin-bottom:6px}
.tier-tab{padding:3px 10px;font-family:'Exo 2',sans-serif;font-size:10px;color:var(--text-secondary);
  background:var(--bg-card);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all 0.15s}
.tier-tab:hover{border-color:var(--accent-orange-dim);color:var(--text-primary)}
.tier-tab.active{color:var(--accent-orange);background:rgba(240,118,35,0.1);border-color:rgba(240,118,35,0.3)}
.tier-info{font-size:11px;color:var(--text-secondary);margin-bottom:6px;display:grid;grid-template-columns:46px minmax(0,1fr) 46px minmax(0,1fr);gap:3px 10px;grid-auto-flow:dense;line-height:1.4}
.tier-row{display:contents}
.tier-row.tr-left .tier-lbl{grid-column:1}
.tier-row.tr-left .tier-val{grid-column:2}
.tier-row.tr-right .tier-lbl{grid-column:3}
.tier-row.tr-right .tier-val{grid-column:4}
.tier-row.tr-wide .tier-lbl{grid-column:1}
.tier-row.tr-wide .tier-val{grid-column:2/-1}
.tier-lbl{color:var(--text-muted);font-weight:600;text-transform:uppercase;font-size:8px;letter-spacing:0.5px;white-space:nowrap;padding-top:1px}
.tier-val{overflow-wrap:anywhere}
.tier-perks{color:#22c55e}
/* Sources */
.card-sources{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;padding:6px 0;border-top:1px solid var(--border)}
.card-sources .attr-label{font-size:10px;color:var(--text-muted);margin-right:4px;white-space:nowrap}
.source-list{display:flex;flex-wrap:wrap;gap:3px}
.source-pill{font-size:9px;padding:1px 6px;border-radius:3px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--accent-blue);white-space:nowrap}
.zone-pill{font-size:9px;padding:1px 6px;border-radius:3px;background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.2);color:var(--accent-cyan);white-space:nowrap}
/* Quest card */
.quest-detail{padding:0}
.quest-meta{display:flex;gap:8px;align-items:baseline;padding:1px 0}
.quest-label{font-size:10px;color:var(--text-muted);min-width:60px;flex-shrink:0}
.quest-val{font-size:11px;color:var(--text-secondary)}
.quest-section{padding:4px 0;margin-top:4px;border-top:1px solid var(--border)}
.quest-list{margin:2px 0 2px 18px;font-size:10px;color:var(--text-secondary);line-height:1.4}
.quest-list li{padding:0}
.reward-list li{color:var(--accent-green)}
.quest-gallery{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.quest-img{width:120px;height:auto;border-radius:4px;border:1px solid var(--border);cursor:pointer}
.img-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;cursor:pointer}
.img-overlay img{max-width:90vw;max-height:90vh;border-radius:8px;border:1px solid var(--border)}
.card-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:20px;overflow-y:auto}
.card-overlay-wrap{max-width:420px;width:100%;cursor:default}
.card-overlay-wrap .item-card{margin:0}
.buildlog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:20px}
.buildlog-wrap{max-width:560px;width:100%;max-height:85vh;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-accent);border-radius:10px;cursor:default;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.buildlog-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-family:'Share Tech Mono',monospace;font-weight:700;font-size:17px;letter-spacing:1px;color:var(--accent-orange)}
.buildlog-head .buildlog-close{font-family:initial;color:var(--text-muted)}
.buildlog-close{background:none;border:none;color:var(--text-muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.buildlog-close:hover{color:var(--text-primary)}
.buildlog-body{padding:14px 18px;overflow-y:auto;font-size:12px;line-height:1.5;color:var(--text-secondary)}
.buildlog-body>:first-child{margin-top:0}
.buildlog-body h2{font-size:14px;color:var(--accent-orange);margin:16px 0 6px}
.buildlog-body h3{font-size:13px;color:var(--text-primary);margin:14px 0 4px;border-bottom:1px solid var(--border);padding-bottom:3px}
.buildlog-body ul{margin:2px 0 8px;padding-left:16px}
.buildlog-body li{margin:2px 0}
.buildlog-body p{margin:4px 0}
.buildlog-body code{background:rgba(255,255,255,0.08);padding:1px 4px;border-radius:3px;font-size:11px;color:var(--accent-cyan)}
.version-tag,.build-tag{cursor:pointer}
.version-tag:hover,.build-tag:hover{color:var(--accent-orange)}
/* Mobile FAB - shows when nav is hidden */
.mobile-fab{display:none;position:fixed;top:10px;right:10px;z-index:200;background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;color:var(--text-secondary);font-size:18px;padding:8px 12px;cursor:pointer;line-height:1;
  opacity:0;transition:opacity 0.2s ease;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.mobile-fab.visible{opacity:1;pointer-events:auto}
/* Mobile menu button - hidden on desktop */
.mobile-version{display:none}
.btn-short{display:none}
@media(max-width:768px){
  .header{padding:0}
  .header-inner{gap:6px;padding:4px 12px;height:auto}
  .header-stats{gap:8px}
  .logo{gap:4px}
  .logo-icon{width:24px;height:24px}
  .logo-text{font-size:13px;letter-spacing:0.5px}
  .logo-sub{font-size:7px;letter-spacing:1px}
  .creator-msg{display:none}
  .header-stat-val{font-size:11px}
  .header-stat-label{font-size:7px;letter-spacing:1px}
  .auth-btn{height:22px;font-size:8px;padding:0 6px}
  .dash-edit-btn{font-size:13px}
  .auth-wrap{gap:4px}
  .donate-wrap{gap:4px}
  .mobile-donate-stack{display:flex;flex-direction:row;align-items:center;gap:4px}
  .mobile-version{display:none}
  .donate-btn{font-size:8px;padding:0 6px;height:22px}
  .donate-btn .donate-btn-text{display:none}
    .btn-full{display:none}
  .btn-short{display:inline-block;font-size:7px;line-height:1.2;text-align:center}
  #mobilePanel{display:none}
  #mobilePanel.open{display:block}
  .controls,.filter-row,.cat-bar,.sort-bar,.col-toggles,.filter-chips,.content,.dashboard{padding-left:12px;padding-right:12px}
  .controls{flex-wrap:nowrap;padding-top:4px;padding-bottom:5px}
  .search-box{min-width:0}
  .view-toggle{height:22px}
  .view-btn{padding:0 6px;font-size:9px}
  .search-box input{height:22px;font-size:11px}
  .card-grid{grid-template-columns:1fr}
  .mobile-fab{display:none}
  .dash-hero{flex-direction:column;text-align:center;padding:14px 12px;gap:12px}
  .dash-hero-ring{width:72px;height:72px}
  .dash-hero-ring::before{width:56px;height:56px}
  .dash-hero-num{font-size:20px}
  .dash-title{font-size:18px}
  .dash-rank{font-size:12px}
  .dash-hero-stats{justify-content:center;flex-wrap:wrap;gap:8px;font-size:10px}
  .dash-header{padding:10px 12px;gap:8px}
  .dash-label{font-size:14px}
  .dash-progress{font-size:10px}
  .dash-bar{width:80px;height:5px}
  .dash-list{grid-template-columns:1fr;padding:6px 10px 12px}
  .dash-item{gap:8px;padding:6px 8px;font-size:12px}
  .dash-thumb{width:24px;height:24px}
  .dash-project{padding:12px}
  .dash-project-head{gap:12px;margin-bottom:10px}
  .dash-project-img{width:60px;height:60px}
  .dash-project-name{font-size:15px}
  .dash-stages{grid-template-columns:1fr;gap:8px}
  .dash-stage-block{padding:8px}
  .quest-img{width:100px}
  .card-head{min-height:90px}
  .card-thumb{width:100px;height:100px}
  .item-card .card-thumb{height:100px}
  .card-weapon .card-thumb{width:144px}
  .card-enemy .card-thumb{width:110px;height:90px}
  .card-quest .card-thumb{width:110px;height:90px}
  .card-name{font-size:15px;padding-right:70px}
  .auth-modal-content{padding:16px;width:calc(100vw - 24px)}
}

/* ============================================================
   COMMAND BAR -- one row for search, every filter, sort and view.
   Appended last: same-specificity rules win by source order, so
   nothing above is edited. Replaces the category wall, the select
   row, the sort row and the column wall.
   ============================================================ */

.cmdbar{
  max-width:1600px;margin:0 auto;
  padding:5px 32px 6px;
  display:flex;align-items:center;gap:6px;
  flex-wrap:nowrap;
  position:relative;                 /* popover anchor */
  background-image:linear-gradient(to right,transparent,var(--border) 20px,var(--border) calc(100% - 20px),transparent);
  background-size:100% 1px;background-position:bottom;background-repeat:no-repeat;
}
/* Only the control strip scrolls. The bar itself must NOT, or it would clip
   the popover (a scroll container cannot have visible overflow on one axis). */
.cmd-controls{
  display:flex;align-items:center;gap:6px;
  flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
}
.cmd-controls::-webkit-scrollbar{height:4px}
.cmd-controls::-webkit-scrollbar-thumb{background:var(--border-accent);border-radius:2px}

/* -- search field now carries its own chips ------------------ */
.cmdbar .search-box{
  display:flex;align-items:center;gap:4px;
  flex:0 1 320px;min-width:180px;height:34px;
  padding:0 30px 0 32px;
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;
  overflow-x:auto;scrollbar-width:none;
}
.cmdbar .search-box::-webkit-scrollbar{display:none}
.cmdbar .search-box:focus-within{border-color:var(--accent-orange)}
.cmdbar .search-box input{
  height:30px;padding:0;flex:1 1 80px;min-width:80px;
  background:transparent;border:none;border-radius:0;font-size:12px;
}
.cmdbar .search-box input:focus{border-color:transparent}
.search-chips{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.search-chips .chip{padding:2px 6px;font-size:10px;white-space:nowrap}

/* -- control buttons ----------------------------------------- */
.cbtn{
  display:inline-flex;align-items:center;gap:5px;
  height:34px;padding:0 10px;white-space:nowrap;
  background:var(--bg-card);border:1px solid var(--border);border-radius:8px;
  color:var(--text-secondary);font-family:'Exo 2',sans-serif;font-size:11px;
  cursor:pointer;transition:all .15s;
}
.cbtn:hover{border-color:var(--accent-orange-dim);color:var(--text-primary)}
.cbtn.on{color:var(--accent-orange);border-color:rgba(240,118,35,.35);background:rgba(240,118,35,.10)}
.cbtn.open{border-color:var(--accent-orange);color:var(--text-primary);background:var(--bg-card-hover)}
.cbtn-n{font-variant-numeric:tabular-nums;font-size:9px;padding:1px 5px;border-radius:3px;
  background:rgba(240,118,35,.18);color:var(--accent-orange)}
.cbtn-v{color:var(--text-primary);font-weight:600}
.cbtn-caret{font-size:9px;opacity:.55}
.cbtn-pair{display:inline-flex;gap:2px;flex:0 0 auto}
.cbtn-dir{padding:0 9px;font-size:13px;line-height:1}
.cbtn-clear{color:var(--text-muted)}
.cbtn-clear:hover{color:var(--accent-red);border-color:var(--accent-red)}

/* -- popover -------------------------------------------------- */
.cmd-pop{
  position:absolute;z-index:200;
  min-width:210px;max-width:330px;
  max-height:min(62vh,440px);overflow-y:auto;
  padding:6px;
  background:var(--bg-card);border:1px solid var(--border-accent);border-radius:10px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
}
.cmd-pop[hidden]{display:none}
.cpop-title{font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-muted);padding:2px 8px 6px}
.cpop-search{width:100%;height:28px;margin-bottom:6px;padding:0 8px;
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;
  color:var(--text-primary);font-family:'Exo 2',sans-serif;font-size:12px;outline:none}
.cpop-search:focus{border-color:var(--accent-orange)}
.copt{display:flex;align-items:center;gap:8px;width:100%;
  padding:5px 8px;background:none;border:none;border-radius:6px;
  color:var(--text-secondary);font-family:'Exo 2',sans-serif;font-size:12px;
  cursor:pointer;text-align:left}
.copt:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.copt.on{color:var(--accent-orange)}
.copt-box{flex:0 0 14px;height:14px;line-height:12px;text-align:center;font-size:10px;
  border:1px solid var(--border-accent);border-radius:4px}
.copt.on .copt-box{border-color:var(--accent-orange);background:rgba(240,118,35,.16)}
.copt-l{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* tabular figures so the counts line up down the list */
.copt-n{font-variant-numeric:tabular-nums;font-size:9px;color:var(--text-muted);
  padding:1px 5px;border-radius:3px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.06)}
.copt-empty{opacity:.42}
.copt-lock{opacity:.5;cursor:default}
.cpop-clear{display:block;width:100%;margin-top:4px;padding:5px 8px;
  background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--text-muted);font-family:'Exo 2',sans-serif;font-size:11px;cursor:pointer}
.cpop-clear:hover{color:var(--accent-red);border-color:var(--accent-red)}
.cpop-presets{display:flex;flex-wrap:wrap;gap:4px;padding:0 4px 6px;
  border-bottom:1px solid var(--border);margin-bottom:6px}
.cpop-preset{background:var(--bg-secondary);border:1px solid var(--border);border-radius:5px;
  color:var(--text-secondary);font-family:'Exo 2',sans-serif;font-size:10px;
  padding:3px 7px;cursor:pointer}
.cpop-preset:hover{border-color:var(--accent-orange);color:var(--text-primary)}
.cpop-none{padding:8px;color:var(--text-muted);font-size:11px}

/* -- keyboard focus (the stylesheet had none at all) ---------- */
.cbtn:focus-visible,.copt:focus-visible,.cpop-preset:focus-visible,
.cpop-clear:focus-visible,.view-btn:focus-visible,
.chip .chip-x:focus-visible{
  outline:2px solid var(--accent-cyan);outline-offset:2px;border-radius:6px;
}

@media(max-width:768px){
  .cmdbar{padding-left:12px;padding-right:12px;gap:4px}
  .cmdbar .search-box{flex:1 1 120px;min-width:110px}
  .cmd-pop{max-width:calc(100vw - 24px)}
}
@media(prefers-reduced-motion:reduce){
  .cbtn,.copt,.chip,.cmdbar .search-box input{transition:none!important;animation:none!important}
}

/* -- Drawer --------------------------------------------------
   The whole bar retracts, not just the filters: search and the
   view toggle go with it, because the point is to hand the
   screen back to the content. Down by default. */
.cmdbar{transition:max-height .22s ease,opacity .18s ease,padding .22s ease;max-height:140px}
.cmdbar.retracted{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;pointer-events:none}
.cmd-handle{
  display:block;margin:0 auto;width:54px;height:15px;padding:0;
  background:var(--bg-card);border:1px solid var(--border);border-top:none;
  border-radius:0 0 8px 8px;color:var(--text-muted);cursor:pointer;
  font-size:10px;line-height:13px;
  transition:color .15s,border-color .15s,background .15s;
}
.cmd-handle:hover{color:var(--accent-orange);border-color:var(--accent-orange-dim);background:var(--bg-card-hover)}
.cmd-handle:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}
.cmd-handle-glyph{display:block;line-height:13px;pointer-events:none}
@media(prefers-reduced-motion:reduce){.cmdbar{transition:none!important}}

/* -- Mobile: two rows ----------------------------------------
   Row 1 is search + the card/table switch; row 2 is every filter
   control. On a phone one scrolling row buried the filters behind
   a sideways swipe, so they get their own full-width row.
   Placed after the drawer rules so the taller max-height wins;
   .cmdbar.retracted still beats both on specificity. */
@media(max-width:768px){
  .cmdbar{flex-wrap:wrap;row-gap:5px;max-height:220px}
  .cmdbar .search-box{order:1;flex:1 1 auto;min-width:0}
  .cmdbar .view-toggle{order:2;flex:0 0 auto}
  .cmd-controls{order:3;flex:1 0 100%;width:100%}
}

/* -- Mobile: match the card/table toggle ---------------------
   .view-toggle drops to 22px on mobile but the search wrapper and
   the control buttons were left at their 34px desktop height, so
   the row sat at three different heights. Everything on the bar
   now matches the toggle: 22px tall, 8px radius. Inner height is
   20px because the 1px borders live inside the 22px box. */
@media(max-width:768px){
  .cmdbar .search-box{height:22px;border-radius:8px;padding:0 24px 0 26px}
  .cmdbar .search-box input{height:20px;font-size:11px}
  .cmdbar .search-box::before{font-size:11px;left:9px}
  .search-chips .chip{padding:1px 5px;font-size:9px}
  .cbtn{height:22px;border-radius:8px}
  .cbtn-dir{font-size:11px}
  .cbtn-n{font-size:8px;padding:0 4px}
  .cbtn-caret{font-size:8px}
  .search-clear{right:7px;font-size:11px}
}

/* -- Bar typography: match the login button ------------------
   The bar borrowed its box metrics from the card/table toggle;
   its TEXT now comes from .auth-btn -- Share Tech Mono, 11px and
   14px of side padding on desktop, 8px and 6px on mobile. The
   Cards/Table toggle is included so the whole row reads as one
   control set rather than two typefaces sitting side by side. */
.cbtn,.view-btn,.cmdbar .search-box input{
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
}
.cbtn,.view-btn{padding:0 14px}
.cbtn-dir{padding:0 10px}
@media(max-width:768px){
  .cbtn,.view-btn,.cmdbar .search-box input{font-size:8px}
  .cbtn,.view-btn{padding:0 6px}
  .cbtn-dir{padding:0 5px}
}

/* -- Bar colour: match donate / login ------------------------
   Resting state is now exactly .auth-btn / .donate-btn: orange
   text, 10% orange fill, 30% orange border, hover to 20% + solid.
   The view toggle already used this recipe, so the row is uniform.

   CONSEQUENCE HANDLED: that tint used to be how an ACTIVE filter
   announced itself. With every control wearing it at rest, active
   needs a louder signal -- a 28% fill, a solid border and an inset
   rail -- or you could no longer see which filters were applied. */
.cbtn,.cmd-handle{
  color:var(--accent-orange);
  background:rgba(240,118,35,0.1);
  border:1px solid rgba(240,118,35,0.3);
  transition:all 0.2s;
}
.cmd-handle{border-top:none}
.cbtn:hover,.cmd-handle:hover{
  background:rgba(240,118,35,0.2);
  border-color:var(--accent-orange);
  color:var(--accent-orange);
}
/* active: unmistakably louder than the resting tint */
.cbtn.on{
  background:rgba(240,118,35,0.28);
  border-color:var(--accent-orange);
  box-shadow:inset 2px 0 0 var(--accent-orange);
  color:var(--text-primary);
}
/* popover open: solid border, mid fill */
.cbtn.open{
  background:rgba(240,118,35,0.22);
  border-color:var(--accent-orange);
  color:var(--text-primary);
}
/* counts must stay legible on an orange fill, so they go dark */
.cbtn-n{background:rgba(0,0,0,0.42);color:var(--accent-orange);border:1px solid rgba(240,118,35,0.25)}
.cbtn.on .cbtn-n{color:#fff;border-color:rgba(255,255,255,0.35)}
.cbtn-v{color:var(--text-primary)}
.cbtn-clear{color:var(--accent-orange)}
.cbtn-clear:hover{color:var(--accent-red);border-color:var(--accent-red);background:rgba(239,68,68,0.15)}
/* the search field is a field, not a button: same palette, quieter fill */
.cmdbar .search-box{
  background:rgba(240,118,35,0.06);
  border:1px solid rgba(240,118,35,0.3);
}
.cmdbar .search-box:focus-within{border-color:var(--accent-orange);background:rgba(240,118,35,0.12)}
.cmdbar .search-box input{color:var(--text-primary)}
.cmdbar .search-box::before{color:var(--accent-orange)}


/* -- One colour, not two -------------------------------------
   The bar was mixing orange (resting) with white (active, popover
   open, the Sort value, the active count). Everything is orange
   now; ACTIVE is still unmistakable because it carries a 28% fill,
   a solid border and an inset rail -- weight, not a second hue. */
.cbtn.on,.cbtn.open,.cbtn-v{color:var(--accent-orange)}
.cbtn.on .cbtn-n{color:var(--accent-orange);border-color:rgba(240,118,35,0.45)}

/* -- Arrows: bigger and unmistakable -------------------------
   The handle used the SMALL triangles (U+25B4/25BE) at 10px, so
   up vs down was a guess. Solid U+25B2/25BC at 13px reads at a
   glance. The tab itself is shorter -- 38px instead of 54px --
   since a bigger glyph no longer needs a long bar to be findable. */
.cmd-handle{width:38px;height:17px;line-height:15px}
.cmd-handle-glyph{font-size:13px;line-height:15px}
/* sort direction: larger and heavier, it carries real meaning */
.cbtn-dir{font-size:15px;font-weight:700;line-height:1}
/* the menu carets are a hint, not a signal -- nudge, do not shout */
.cbtn-caret{font-size:10px;opacity:.7}
@media(max-width:768px){
  .cbtn-dir{font-size:13px}
  .cbtn-caret{font-size:9px}
  .cmd-handle{width:34px;height:15px;line-height:13px}
  .cmd-handle-glyph{font-size:11px;line-height:13px}
}

/* -- Handle floats over the content --------------------------
   It used to be a block element in flow, so it reserved a
   full-width strip and that strip painted the nav's opaque
   background either side of the tab. Taking it out of flow means
   only the 38px tab draws -- everything beside it is genuinely
   transparent and the content shows through -- and the nav no
   longer reserves a row for it. top:100% pins it to the nav's
   bottom edge, so it tracks the drawer in both states. */
.cmd-handle{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  z-index:101;
  box-shadow:0 4px 10px rgba(0,0,0,0.45);
}

/* -- Filter spacing matches the search row -------------------
   .cmdbar drops to a 4px gap on mobile but .cmd-controls kept its
   6px base gap, so the filter row sat looser than the search /
   view-toggle row above it. Same gap on both rows now. */
@media(max-width:768px){
  .cmd-controls{gap:4px}
}

/* -- Mobile: the popover interior ----------------------------
   The bar was tuned for mobile; the panels it opens never were,
   so a phone got 22px/8px controls opening a menu with 12px rows
   and a 28px search field. Scaled to match.

   Deliberate exception: option rows go to 10px, NOT the bar's 8px.
   The bar is 8px because it mirrors the login button, but these
   are a scrollable list you read and tap -- legibility and touch
   target win over strict symmetry, so the rows stay comfortable. */
@media(max-width:768px){
  .cmd-pop{padding:5px;max-height:min(58vh,380px)}
  .cpop-title{font-size:9px;padding:2px 6px 5px;letter-spacing:1.5px}
  .cpop-search{height:26px;font-size:11px;margin-bottom:5px}
  .copt{font-size:10px;padding:6px 7px;gap:7px}
  .copt-box{flex:0 0 13px;height:13px;line-height:11px;font-size:9px}
  .copt-n{font-size:8px;padding:1px 4px}
  .cpop-clear{font-size:10px;padding:5px 7px}
  .cpop-presets{gap:3px;padding:0 3px 5px}
  .cpop-preset{font-size:9px;padding:3px 6px}
  .cpop-none{font-size:10px;padding:6px}
  /* carry over the old .controls vertical padding, which was lost
     when that row was replaced by .cmdbar */
  .cmdbar{padding-top:4px;padding-bottom:5px}
}

/* -- Collapsed handle fades to blue-gray ---------------------
   Keyed off aria-expanded, which setBarOpen already maintains, so
   this needs no extra class and does not depend on the handle
   staying adjacent to the bar in the markup. The existing
   transition:all .2s does the fading. Hover returns it to orange
   so it still reads as the thing you click to bring the bar back. */
.cmd-handle[aria-expanded="false"]{
  color:var(--text-secondary);
  background:rgba(139,146,168,0.10);
  border-color:rgba(139,146,168,0.30);
}
.cmd-handle[aria-expanded="false"]:hover{
  color:var(--text-primary);
  background:rgba(139,146,168,0.20);
  border-color:rgba(139,146,168,0.55);
}

/* -- Desktop: tighter bar ------------------------------------
   Matching .auth-btn exactly (34px tall, 14px sides) made sense
   for one button in the header but reads bulky across nine
   controls in a row. The bar drops to 28px with 9px sides -- the
   28px desktop control height the rest of the site uses. Font
   stays Share Tech Mono 11px, so it still reads as the same
   family as login; only the box shrinks.
   Scoped to min-width so the mobile sizing you approved is
   untouchable from here. */
@media(min-width:769px){
  .cbtn{height:28px;padding:0 9px}
  .cbtn-dir{padding:0 8px}
  .view-toggle{height:28px}
  .view-btn{padding:0 10px}
  .cmdbar .search-box{height:28px}
  .cmdbar .search-box input{height:26px}
}

/* -- Pull-down tab: wider and shorter ------------------------
   Earlier "shorter" was read as length and the tab was narrowed;
   it meant height. Now wide and low at both sizes, scaled by the
   same ratio the bar uses (22/28 = 0.79). Radius drops with the
   height so a 13px tab does not render as a lozenge -- and the
   glyph is capped by the shorter box, so it is as large as fits. */
@media(min-width:769px){
  .cmd-handle{width:64px;height:13px;line-height:12px;border-radius:0 0 6px 6px}
  .cmd-handle-glyph{font-size:11px;line-height:12px}
}
@media(max-width:768px){
  .cmd-handle{width:50px;height:11px;line-height:10px;border-radius:0 0 5px 5px}
  .cmd-handle-glyph{font-size:9px;line-height:10px}
}

/* -- Desktop tab: taller target ------------------------------
   13px was a thin strip sitting on top of a card, so the click
   was fiddly and easy to miss into the card underneath. 18px is
   a comfortable target without turning the tab back into a slab.
   The glyph grows with it. Mobile is untouched -- it is fine and
   a finger is a bigger target than a cursor anyway. */
@media(min-width:769px){
  .cmd-handle{height:18px;line-height:17px}
  .cmd-handle-glyph{font-size:13px;line-height:17px}
}

/* -- Card: craft grid + uses ---------------------------------
   The craft grid is 4 columns (label,value,label,value). An item
   with no recipe -- every Boss Drop and raw material -- leaves the
   first two empty, so Recycle/Salvage rendered in the RIGHT half
   with ~45% of the card blank beside them. Measured on Matriarch
   Reactor: grid 322px wide, cg-left rows 0. When there is nothing
   to put on the left, drop to 2 columns so they start at the edge. */
.card-craft-grid.no-craft{grid-template-columns:46px minmax(0,1fr)}
/* .attr-row is display:contents, so the label/value are the real grid items and
   .cg-right pins them to columns 3/4. Shrinking the template alone just created
   implicit tracks -- they have to be re-pinned to 1/2 as well. */
.card-craft-grid.no-craft .cg-right .attr-label{grid-column:1}
.card-craft-grid.no-craft .cg-right .attr-val{grid-column:2}
/* Uses listed headings and entries as identical lines, so
   "Projects" read the same as "Trophy Display Stage 5". */
.use-head{display:block;margin-top:4px;font-size:9px;text-transform:uppercase;
  letter-spacing:1px;color:var(--text-muted)}
.use-head:first-child{margin-top:0}
.use-item{display:block;padding-left:8px}

/* -- ONE card label treatment --------------------------------
   Measured before this: 9 different rules produced labels at
   8/9/10px, weight 400 and 600, uppercase and sentence case, in
   two different families -- SCORE in Share Tech Mono while
   RECYCLE, USES, Zones and Giver each did something else, and the
   SAME .attr-label class rendered three ways depending on its
   container. Canonical = the SCORE treatment the rest should have
   been following: Share Tech Mono, 10px, uppercase, 1px tracking,
   muted. Applies to every element whose job is NAMING a field;
   values, pills and notes keep their own styling. */
.score-label,
.card-craft-grid .attr-label,
.card-attrs .attr-label,
.card-sources .attr-label,
.card-stats-grid .sg-lbl,
.tier-lbl,
.quest-label,
.use-head{
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-muted);
}
/* the combat-tips label keeps its red accent, only the type unifies */
.combat-tips .attr-label{color:var(--accent-red)}

/* -- Card type system: the last four outliers -----------------
   After unifying labels, a full inventory showed values (11px Exo 2),
   pills (9px) and the Rajdhani display sizes were already coherent.
   These four were not:
     card-cat   a lone Exo2/600/1.5px treatment -- it NAMES the item's
                category, so it belongs to the label canon
     card-desc  italic 10px vs card-note italic 11px -- same role,
                two sizes; both are descriptive prose
     li         combat tips at 10px while every other value is 11px
     badge      Share Tech Mono but sentence case + 0.5px tracking,
                out of step with every other Share Tech Mono element */
.card-cat{
  font-family:'Share Tech Mono',monospace;
  font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:1px;
}
.card-desc{font-size:11px}
.combat-tips-list li{font-size:11px}
.badge{text-transform:uppercase;letter-spacing:1px}
/* quest objectives/rewards are values like any other -- 11px, not 10px */
.quest-list{font-size:11px}

/* Label tracks were 46px, sized for the old 8px labels. At the unified 10px,
   "Stability" measures 58px and "Headshot" 52px, so both collided with their
   values. 60px clears the longest label with a little margin. The .card-attrs
   min-width matches so labels line up down the whole card. */
.card-stats-grid{grid-template-columns:60px minmax(0,1fr) 60px minmax(0,1fr)}
.card-craft-grid{grid-template-columns:60px minmax(0,1fr) 60px minmax(0,1fr)}
.card-craft-grid.no-craft{grid-template-columns:60px minmax(0,1fr)}
.card-attrs .attr-label{min-width:60px}

/* Desktop: the search field takes the slack up to the view toggle.
   It was flex:0 1 320px (shrink only) while .cmd-controls was flex:1 1 auto,
   so the controls strip absorbed the free space and left the search fixed.
   Swap which one grows; the controls stay content-sized and still scroll
   internally when the window is too narrow for them. */
@media(min-width:769px){
  .cmdbar .search-box{flex:1 1 auto;min-width:220px}
  .cmd-controls{flex:0 1 auto}
}

/* -- Spacing: the four audit findings ------------------------
   1. "SAFE POCKET" measured 71px against a 60px track -- the only
      label on the site that still did not fit. 72px clears it, and
      both grids move together so labels stay on one left edge.
   2. ability / XP / mod-effect notes were styled INLINE in the JS
      (margin-top 4px and 2px, font-size 10px), so they escaped the
      stylesheet and broke the 11px value canon. Now classes.
   3. enemy cards had a one-off .card-sources margin.
   4. section gaps measured 2/4/5/6/8/10px -- now one 6px rhythm. */
.card-stats-grid{grid-template-columns:72px minmax(0,1fr) 72px minmax(0,1fr)}
.card-craft-grid{grid-template-columns:72px minmax(0,1fr) 72px minmax(0,1fr)}
.card-craft-grid.no-craft{grid-template-columns:72px minmax(0,1fr)}
.card-attrs .attr-label{min-width:72px}

.note-ability{font-style:normal;color:var(--accent-green)}
.note-xp{color:var(--accent-yellow)}

.card-enemy .card-sources{margin-top:0}

.card-note,.card-locs,.card-attrs,.card-craft-grid,.combat-tips{margin-top:6px}
.card-sources{padding:6px 0}
.note-fits{color:var(--text-muted)}
/* The score row's BOX is 16px tall but its coloured track is only 5px -- the
   height comes from the SCORE label text, so ~5.5px of slack sits under the bar
   before any margin. A further 6px read as ~11.5px, nearly double every other
   gap on the card. 2px puts the optical gap in line with the 6px rhythm. */
.card-price-row{margin-top:2px}

/* On a phone the sort control shows its VALUE, not the word "Sort" -- the
   value ("Default", "Name", ...) plus the direction arrow says what it is,
   and the word costs ~22px on the one row everything has to fit into. */
@media(max-width:768px){
  .cbtn[data-dim="sort"] .cbtn-l{display:none}
}

/* -- Mobile: the controls must FIT one row -------------------
   .cmd-controls is overflow-x:auto, so when the buttons need more room than
   the strip has, the last one (the sort direction arrow) is sliced and an
   internal scrollbar appears. Measured at 390px with a filter active, arc
   needed 431px in a 366px strip. Tighten to fit rather than scroll. */
@media(max-width:768px){
  .cmd-controls{flex-wrap:nowrap;column-gap:3px}
  .cmd-controls .cbtn{padding:0 3px}
  .cbtn-caret{display:none}
  .cbtn-clear{font-size:0}
  .cbtn-clear::before{content:'\2715';font-size:9px;line-height:1}
}

/* Narrow phones (<=400px) need a little more: the widest case is a filter
   active, which adds the Clear control. */
@media(max-width:400px){
  .cmd-controls{column-gap:2px}
  .cmd-controls .cbtn{padding:0 2px}
}

/* Every thumbnail is clickable, so every thumbnail says so. arc previously
   attached the lightbox only when an item carried imgFull -- 114 of 721 items
   -- leaving 607 thumbnails inert while the sisters always attached it with
   an img fallback. Cursor matches apex's. */
.card-thumb{cursor:zoom-in}

/* Table body was LARGER than its own header (13px against the header's 11px),
   which reads as the rows shouting over the column names. The body drops to
   11px -- the same size every card value uses -- while the header keeps its
   uppercase display treatment. Each site keeps its own body face. */
.dt td{font-size:11px}

/* Lightbox panel. arc's overlay image had no background, so any transparent
   PNG showed the page through it -- apex and warzone both sit the image on a
   solid card panel. arc gets that panel plus valheim's backdrop treatment,
   recoloured to arc's own orange: a soft radial accent glow behind the
   subject over a vertical card-to-deep-background ramp. */
.img-overlay img{
  background:radial-gradient(circle at 50% 42%,rgba(240,118,35,0.10),rgba(0,0,0,0) 60%),linear-gradient(180deg,#161a24,#0a0c10);
  padding:16px;
}


/* Same backdrop on the CARD thumbnail as in the lightbox, so a thumbnail and
   its enlarged version read as the same object: a soft radial accent glow
   behind the subject over a card-to-background ramp. Uses the site's own
   accent and its own palette vars, so each site keeps its colour.
   Replaces the flat rgba(255,255,255,0.05) fill. */
.card-thumb{
  background:radial-gradient(circle at 50% 42%,rgba(240,118,35,0.10),rgba(0,0,0,0) 60%),linear-gradient(180deg,var(--bg-card),var(--bg-primary));
}
.tbl-thumb{
  background:radial-gradient(circle at 50% 42%,rgba(240,118,35,0.10),rgba(0,0,0,0) 60%),linear-gradient(180deg,var(--bg-card),var(--bg-primary));
}

/* Stat label track sized to the widest label that ACTUALLY EXISTS, measured
   across all 721 items rather than guessed: "Shield Regen" needs 77px and was
   clipped by 5px in the 72px track on four cards. Every other one of the 41
   distinct labels fits inside 72. 78px clears the real maximum with 1px to
   spare. Scoped to desktop -- the mobile grid collapses to two columns. */
@media(min-width:769px){
  .card-stats-grid{grid-template-columns:78px minmax(0,1fr) 78px minmax(0,1fr)}
}

/* The card's own top-level rhythm: card-head -> card-body was the last 8px
   transition where every other section transition is 6px. Measured over the
   card's DIRECT children -- the remaining 0/12/18px gaps the spacing audit
   reports are between bordered sections nested inside card-body, which carry
   their own padding, so those are structural rather than rule drift. */
.card-body{margin-top:6px;padding-top:6px}