/* ============================================================================
   gsv-redesign.css — GSV DESIGN SYSTEM · "Control Room v2" · COMPONENT LAYER
   ----------------------------------------------------------------------------
   Presentation half of the new design language. Consumes gsv-tokens.css and
   re-styles every shell + component + view class. Load order (all panels):
       gsv-ui.css → styles.css → gsv-theme.css → gsv-tokens.css → gsv-redesign.css
   Changes ONLY presentation. No JS/DOM/handler touched → 100% functions kept.

   NOTE ON SPECIFICITY: the 10 view files inject their own <style> at runtime
   (AFTER this <link>). To override view-injected layout (e.g. .ov-cols density)
   this file uses a :root prefix (higher specificity beats source order) — same
   trick the prior adoption layer used. Shared atoms (.btn/.card/.badge/...) come
   from gsv-ui.css/styles.css, which load BEFORE us, so plain selectors win there.

   v2 CHANGES: (1) login fully recomposed (centered, boldly branded) ·
   (2) more color (multi-hue accents, colored status borders) · (3) richer
   "edel" depth/glow at KEY elements only · (4) denser spacing everywhere.
   ============================================================================ */

/* ============================================================================
   0 · DENSITY — global compaction (v2 · change #4). Tighten the whole app.
   ============================================================================ */
.content{padding:var(--pad-page-y) var(--pad-page-x) 48px}
.page-head{margin:2px 2px 14px}
.page-head h1{font-size:23px;letter-spacing:-.03em;font-weight:800}
.page-head p{color:var(--text-dim);margin-top:2px}
.section-title{margin:16px 2px 10px}
.section-title h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-dim);font-weight:800}
.section-title .st-sub{color:var(--text-faint)}
.card{padding:var(--pad-card)}
.card.tight{padding:var(--pad-card-tight)}
.grid{gap:var(--gap-md)}
.bento{gap:var(--gap-md)}
.statrail{gap:var(--gap-md)}
.deck-layout{gap:16px;margin-top:12px}
.tabpane{padding-top:16px}
.qa-grid{gap:var(--gap-sm)}

/* ============================================================================
   1 · SHELL — left rail, topbar, content
   ============================================================================ */
.rail{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 60%,var(--bg-elev)),var(--bg-elev));
  border-right:1px solid var(--border);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.rail-brand{border-bottom:1px solid var(--line);padding-bottom:14px}
.rail-brand .logo,.brand .logo,.auth-brand .logo{
  background:var(--aurora-vivid);color:var(--accent-text);
  border-radius:11px;box-shadow:var(--glow-accent),var(--card-top);
}
.rail-btxt small{letter-spacing:.4px;text-transform:uppercase;font-size:9.5px}
.rail-btxt b span{background:var(--aurora-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.nav{gap:3px}
.navlabel{color:var(--text-faint);letter-spacing:1.4px;font-size:9.5px}
.nav-i{
  position:relative;border-radius:10px;border:1px solid transparent;color:var(--text-dim);
  transition:background var(--tr),color var(--tr);
}
.nav-i:hover{background:var(--surface-2);color:var(--text)}
.nav-i.on{
  color:var(--text);background:var(--accent-soft);border-color:var(--accent-edge);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent);
}
.nav-i.on::before{
  content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:3px;height:56%;border-radius:0 3px 3px 0;background:var(--aurora-vivid);
  box-shadow:0 0 12px var(--accent);
}
.nav-i.on .ni{color:var(--accent-hover)}
.nav-i .next{background:var(--accent-soft);color:var(--accent-hover);font-weight:800}
.rail-foot{border-top:1px solid var(--line)}
.rail-foot:hover{background:var(--surface-2)}
.rail-foot .fava,.avatar{background:var(--aurora-vivid);color:var(--accent-text);box-shadow:var(--shadow-sm)}

.topbar{
  background:color-mix(in srgb,var(--bg-elev) 72%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--border);padding:10px 22px;
}
.cmdk{border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color var(--tr),color var(--tr)}
.cmdk:hover{border-color:var(--border-2);color:var(--text);background:var(--surface-2)}
.kbd b{background:var(--surface-2);border:1px solid var(--border);border-radius:6px}
.icon-btn{border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-dim);transition:background var(--tr),color var(--tr),border-color var(--tr)}
.icon-btn:hover{color:var(--text);background:var(--accent-soft);border-color:var(--accent-edge)}
.icon-btn .badge-dot{box-shadow:0 0 0 2px var(--bg-elev)}
.user-chip{border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface)}
.user-chip:hover{border-color:var(--border-2);background:var(--surface-2)}
.brand .name{background:var(--aurora-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ============================================================================
   2 · BUTTONS — richer primary (multi-hue + glow), AA text
   ============================================================================ */
.btn{
  border-radius:var(--radius-btn);font-weight:650;letter-spacing:-.01em;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  transition:background var(--tr),border-color var(--tr),box-shadow var(--tr),transform var(--tr);
}
.btn:hover{background:var(--surface-3);border-color:var(--border-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  color:var(--accent-text);border:1px solid transparent;
  background:linear-gradient(135deg,var(--accent-3) 0%,var(--accent) 55%,var(--accent-fill) 100%);
  box-shadow:var(--card-top),var(--glow-accent);font-weight:750;
}
.btn.primary:hover{
  filter:brightness(1.07) saturate(1.05);
  background:linear-gradient(135deg,var(--accent-2) 0%,var(--accent-hover) 55%,var(--accent) 100%);
  box-shadow:var(--card-top),var(--glow-multi);
}
.btn.ghost{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.btn.ghost:hover{border-color:var(--border-2);background:var(--surface-2)}
.btn.subtle{background:transparent;border:1px solid var(--border);color:var(--text-dim)}
.btn.subtle:hover{color:var(--text);border-color:var(--border-2);background:var(--surface)}
.btn.danger{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger-line)}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 26%,transparent)}
.btn:disabled{opacity:.42}

/* ============================================================================
   3 · CARDS — crisp instrument panels; a hair richer top sheen
   ============================================================================ */
.card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,#fff 4%),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--card-top),var(--shadow-sm);
}
.card .card-h{font-size:14px;font-weight:750;letter-spacing:-.01em}
.card .card-sub{color:var(--text-dim)}
.metric-card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,#fff 4%),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-top),var(--shadow-sm)}

/* ============================================================================
   4 · STAT RAIL + QUICK ACTIONS — colorful accent edge + depth
   ============================================================================ */
.stat{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,#fff 4%),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);padding:14px;
  box-shadow:var(--card-top),var(--shadow-sm);overflow:hidden;position:relative;
  transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr);
}
.stat::after{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;
  background:var(--aurora-grad);opacity:.85}
.stat:hover{border-color:var(--accent-edge);transform:translateY(-2px);box-shadow:var(--card-top),var(--glow-accent)}
.stat .s-label{color:var(--text-dim);letter-spacing:.06em;font-size:10.5px}
.stat .s-label svg{color:var(--accent-hover);opacity:.95}
.stat .s-val{font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .s-val.grad{background:var(--aurora-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .s-sub{color:var(--text-faint)}
.qa{background:var(--surface);border:1px solid var(--border);border-radius:10px;transition:border-color var(--tr),background var(--tr),transform var(--tr)}
.qa svg{color:var(--accent-hover)}
.qa:hover{border-color:var(--accent-edge);background:var(--accent-soft);transform:translateY(-1px)}

/* ============================================================================
   5 · BADGES / CHIPS / STATUS — noticeably more colorful (colored borders)
   ============================================================================ */
.badge{border-radius:var(--radius-pill);font-weight:750;letter-spacing:.01em;border:1px solid transparent}
.badge.brand{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--accent-line)} .badge.brand .bdot{background:var(--accent-hover)}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.badge.danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.badge.info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.badge.idle{border-color:color-mix(in srgb,var(--text-dim) 22%,transparent)}
.chip{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill)}
.catchip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);transition:color var(--tr),border-color var(--tr),background var(--tr)}
.catchip:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2)}
.catchip.on{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
.dot.run{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent),0 0 10px color-mix(in srgb,var(--ok) 50%,transparent)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.bar{background:var(--surface-2);border-radius:6px}
.bar>i{background:var(--aurora-grad)}
.bar.ok>i{background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 80%,#000),var(--ok))}
.bar.warn>i{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 80%,#000),var(--warn))}
.bar.danger>i{background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 80%,#000),var(--danger))}
.status-ring{border-color:var(--ok);background:radial-gradient(circle,color-mix(in srgb,var(--ok) 18%,transparent),transparent 70%);box-shadow:0 0 18px -4px color-mix(in srgb,var(--ok) 45%,transparent)}
.status-ring i{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.status-ring.stop{box-shadow:none}

/* ============================================================================
   6 · FORMS
   ============================================================================ */
.field label{color:var(--text-dim);font-weight:650;letter-spacing:.01em}
.inp{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;color:var(--text);transition:border-color var(--tr),box-shadow var(--tr),background var(--tr)}
.inp:hover{border-color:var(--border-2)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)}
.inp::placeholder{color:var(--text-faint)}
select.inp option{background:var(--surface)}
.tog{background:var(--surface-2);border:1px solid var(--border)}
.tog::after{background:var(--text-faint)}
.tog.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 12px -4px var(--accent)}
.tog.on::after{background:var(--accent-hover)}
.seg{background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.seg button{border-radius:8px;font-weight:650}
.seg button.on{background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-edge)}

/* ============================================================================
   7 · TABLE — denser rows
   ============================================================================ */
.tbl th{color:var(--text-faint);letter-spacing:.06em;border-bottom:1px solid var(--border);padding:8px 12px}
.tbl td{border-bottom:1px solid var(--line);padding:9px 12px}
.tbl tr:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* ============================================================================
   8 · TOAST / MODAL / COMMAND PALETTE
   ============================================================================ */
.toastbox{background:var(--surface);border:1px solid var(--border-2);border-left:3px solid var(--accent);border-radius:12px;box-shadow:var(--shadow)}
.toastbox.ok{border-left-color:var(--ok)} .toastbox.err{border-left-color:var(--danger)}
.modal-ov{background:rgba(4,6,13,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,#fff 4%),var(--surface));border:1px solid var(--border-2);border-radius:16px;box-shadow:var(--shadow),var(--card-top)}
.modal h3{font-weight:800;letter-spacing:-.02em}
.cmdk-box{background:var(--glass-strong);border:1px solid var(--border-2);border-radius:16px;box-shadow:var(--shadow),var(--glow-accent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.cmdk-item:hover,.cmdk-item.sel{background:var(--accent-soft)}
.cmdk-item .ci{background:var(--surface-2)}

/* ============================================================================
   9 · SERVER DECK — grouped sidebar, switcher, power, tabbar
   ============================================================================ */
.srv-switch{background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color var(--tr)}
.srv-switch:hover{border-color:var(--accent-edge)}
.srv-switch .ssname{font-weight:800;letter-spacing:-.02em}
.srv-switch-menu{background:var(--glass-strong);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.ssm-item:hover{background:var(--accent-soft)} .ssm-item.on{background:var(--accent-soft)}

.deck-nav{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,#fff 3%),var(--surface));border:1px solid var(--border);border-radius:14px;box-shadow:var(--card-top),var(--shadow-sm)}
.deck-nav-grp{color:var(--text-faint);letter-spacing:.08em}
.deck-nav-i{border-radius:9px;color:var(--text-dim);font-weight:650;transition:background var(--tr),color var(--tr)}
.deck-nav-i:hover{background:var(--surface-2);color:var(--text)}
.deck-nav-i.on{background:var(--accent-soft);color:var(--text)}
.deck-nav-i.on::before{background:var(--aurora-vivid);box-shadow:0 0 12px var(--accent);width:3px;height:18px;border-radius:0 3px 3px 0}
.deck-nav-i.on .dni{color:var(--accent-hover)}
.deck-nav-i .tcount{background:var(--surface-2);color:var(--text-dim)}
.deck-nav-i.on .tcount{background:var(--accent-soft);color:var(--accent-hover)}
.deck-nav-sub.on::before{background:var(--accent-hover);box-shadow:0 0 8px var(--accent-hover)}

.power{background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.power button{border-radius:8px;font-weight:650}
.power button:hover:not(:disabled){color:var(--text);background:var(--surface-3)}
.power button.start.live{color:var(--ok)}
.power button.stop:hover{color:var(--danger);background:var(--danger-soft)}

.tab.on{color:var(--text);border-bottom-color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent)}
.tab .tcount{background:var(--surface-2)} .tab.on .tcount{background:var(--accent-soft);color:var(--accent-hover)}
.runtime-chips .chip,.deck-topbar .chip{background:var(--surface);border-color:var(--border)}

/* ============================================================================
   10 · OVERVIEW DASHBOARD — DENSITY + depth (v2 · :root beats injected CSS)
   ============================================================================ */
:root .ov-wrap{gap:12px}
:root .ov-cols{gap:12px;align-items:stretch}
:root .ov-cols>.card{display:flex;flex-direction:column}
/* hero: bigger, richer — a real "status header" band */
:root .ov-hero{gap:16px;padding:16px 18px;
  background:linear-gradient(135deg,var(--accent-softer),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 88%,#fff 5%),var(--surface));
  box-shadow:var(--card-top),var(--shadow-sm),inset 0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent)}
:root .ov-hero::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;
  background:var(--aurora-vivid);opacity:.9;border-radius:var(--radius) var(--radius) 0 0}
.card.ov-hero{position:relative;overflow:hidden}
:root .ov-hero .status-ring{width:52px;height:52px}
:root .ov-hero-name{font-size:22px}
:root .connect-chip{background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--accent-edge)}
:root .connect-chip .cc-addr{color:var(--text)}
:root .connect-chip:hover{border-color:var(--accent);box-shadow:var(--glow-accent)}
/* two columns fill more vertical space so the page reads as a dashboard.
   qcon output grows to fill its column (inline max-height:132px overridden) so
   both columns are equal-height and there is no dead gap under the console. */
:root .ov-qcon{display:flex;flex-direction:column}
:root .ov-qcon [data-qcon-out]{flex:1 1 auto;min-height:150px;max-height:none!important}
:root .ov-actions{gap:2px}
:root .qa-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
:root .ov-power .btn{min-width:96px}
:root .ov-hubplay .ov-hub-btn{background:var(--aurora-vivid);color:var(--accent-text);box-shadow:var(--card-top),var(--glow-accent)}
:root .ov-hero-rings .gc-ring,:root .ov-hero-rings [data-ring]{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 40%,transparent))}

/* ============================================================================
   11 · CONSOLE
   ============================================================================ */
.console{background:var(--glass-opaque);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-top),var(--shadow-sm)}
.console-bar{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 40%,transparent)}
.live-badge{color:var(--ok)} .live-badge .ld{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.console-search{border:1px solid var(--border);border-radius:9px;background:var(--bg-elev)}
.cf-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:8px}
.cf-chip.on{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--accent)}
.logline.cmd .lm{color:var(--info)}
.logline.chat .lm .pname{color:var(--accent-hover)}
.logline.join .lm{color:var(--ok)}
.logline.error{background:color-mix(in srgb,var(--danger) 7%,transparent)}
.qcmd{background:var(--surface-2);border:1px solid var(--border);border-radius:8px}
.qcmd:hover{color:var(--text);border-color:var(--accent-edge);background:var(--accent-soft)}
.cmd-input{border:1px solid var(--border);border-radius:10px;background:var(--bg-elev)}
.cmd-input .prompt{color:var(--accent-hover)}
.cside-players{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-top)}
.csp-head{border-bottom:1px solid var(--line)}
.csp-row{border-bottom:1px solid var(--line)}
.csp-row:hover{background:var(--surface-2)}
.scroll-pill{background:var(--aurora-vivid);color:var(--accent-text);box-shadow:var(--shadow-sm),var(--glow-accent)}

/* ============================================================================
   12 · MODS / MODPACKS
   ============================================================================ */
.source-pills{background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.source-pills button.on{background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-edge)}
.packhero{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-top),var(--shadow-sm);transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.packhero:hover{border-color:var(--accent-edge);transform:translateY(-3px);box-shadow:var(--glow-accent)}
.modcard{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;box-shadow:var(--card-top);transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.modcard:hover{border-color:var(--accent-edge);transform:translateY(-2px);box-shadow:var(--glow-accent)}
.modbanner{background:var(--aurora-soft)}
.compat.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-line)}
.compat.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.compat.no{background:var(--surface-2);color:var(--text-dim)}
.update-bar{background:linear-gradient(135deg,var(--accent-soft),var(--accent-2-soft));border:1px solid var(--accent-edge);border-radius:12px}
.update-bar .ub-ico{color:var(--accent-hover)}
.progress{background:var(--surface-2)} .progress>i{background:var(--aurora-vivid)}

/* ============================================================================
   13 · FILES / EDITOR
   ============================================================================ */
.breadcrumb a{color:var(--accent-hover)}
.file-row{border-bottom:1px solid var(--line)}
.file-row:hover{background:var(--surface-2)}
.file-row .fic{color:var(--accent-hover);opacity:.9}
.editor{background:var(--glass-opaque);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-top)}
.editor-bar{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 40%,transparent)}
.gutter{border-right:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--text-faint)}
.code .k{color:var(--accent-hover)} .code .s{color:var(--ok)} .code .n{color:var(--warn)} .code .b{color:var(--info)}
.restart-banner{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);border-radius:11px}

/* ============================================================================
   14 · BACKUPS / METRICS / PERMISSIONS
   ============================================================================ */
.bkp-row{background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color var(--tr)}
.bkp-row:hover{border-color:var(--border-2)}
.bkp-row .bk-ico{background:var(--aurora-soft);color:var(--accent-hover)}
.matrix-row{border-bottom:1px solid var(--line)}
.gpick{border:2px solid var(--border);border-radius:9px;transition:background var(--tr),border-color var(--tr)}
.gpick:hover{background:var(--surface-2);border-color:var(--border-2)}
.gpick.on{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
.pavatar{box-shadow:var(--card-top)}

/* ============================================================================
   15 · GALLERY (Level 0)
   ============================================================================ */
.cover-hero{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--card-top),var(--shadow)}
.ch-eyebrow{color:var(--text-dim);letter-spacing:.14em}
.ch-title{font-weight:800;letter-spacing:-.03em}
.connect-chip{background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--border-2);border-radius:12px}
.connect-chip:hover{border-color:var(--accent);box-shadow:var(--glow-accent)}
.connect-chip .cc-addr{color:var(--text)}
.connect-chip.copied{border-color:var(--ok)} .connect-chip.copied .cc-ico{color:var(--ok)}
.gamecard{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-top);transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.gamecard:hover{border-color:var(--accent-edge);transform:translateY(-3px);box-shadow:var(--glow-accent)}
.gamecard.build{border-style:dashed;border-color:var(--border);background:transparent}
.gamecard.build:hover{border-color:var(--accent);background:var(--accent-soft)}
.gc-build .plus{background:var(--aurora-soft);color:var(--accent-hover)}
.gamever{background:rgba(0,0,0,.55);color:#fff}

/* ============================================================================
   16 · LOGIN — FULLY RECOMPOSED (v2 · change #1): centered, boldly branded
   The old DOM stays (.auth > .auth-hero + .auth-pane); CSS turns the left/right
   split into a single centered vertical composition on a vivid branded backdrop.
   ============================================================================ */
:root .auth{grid-template-columns:1fr;place-items:center;min-height:100vh;padding:clamp(24px,5vh,64px) 20px;gap:0;position:relative}
/* vivid full-bleed multi-hue aurora + a big soft brand orb behind everything */
:root .auth-aurora{
  background:
    radial-gradient(1200px 780px at 50% -8%,var(--accent-3-soft),transparent 60%),
    radial-gradient(980px 720px at 12% 108%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%),
    radial-gradient(1000px 760px at 92% 100%,var(--accent-2-soft),transparent 62%),
    radial-gradient(560px 560px at 50% 40%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 66%);
  animation:auroraDrift 18s ease-in-out infinite alternate;
}
:root .auth-grid{-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);opacity:.6}
/* hero becomes a centered header block above the card; drop the marketing list */
:root .auth-hero{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:flex-end;
  gap:12px;max-width:640px;padding:0 20px 6px;grid-row:1}
:root .auth-lede,:root .auth-feats{display:none}
:root .auth-brand{justify-content:center;font-size:clamp(22px,3vw,30px)}
:root .auth-brand .logo{width:clamp(52px,6vw,64px);height:clamp(52px,6vw,64px);border-radius:16px;box-shadow:var(--glow-multi),var(--card-top)}
:root .auth-brand .logo svg{width:30px;height:30px}
:root .auth-wordmark{font-size:clamp(24px,3vw,30px)}
:root .auth-h1{font-size:clamp(30px,4.4vw,50px);line-height:1.04;letter-spacing:-.035em;margin-top:2px;
  background:linear-gradient(120deg,#fff 0%,color-mix(in srgb,#fff 70%,var(--accent-hover)) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root .auth-trust{justify-content:center;margin-top:2px}
:root .auth-trust .at-dot{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent)}
/* pane + card centered below */
:root .auth-pane{grid-row:2;min-height:auto;padding:12px 20px 8px;width:100%;display:flex;justify-content:center}
:root .auth-card{
  width:100%;max-width:412px;border-radius:20px;padding:34px 32px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 80%,transparent),color-mix(in srgb,var(--surface) 94%,transparent));
  border:1px solid var(--border-2);
  box-shadow:var(--shadow),var(--glow-accent),var(--card-top);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
  position:relative;overflow:hidden;
}
:root .auth-card::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--aurora-vivid);opacity:.95}
:root .auth-brand--card{display:none}
:root .auth-title{font-weight:800;letter-spacing:-.03em;font-size:23px}
:root .auth-sub{color:var(--text-dim)}
:root .auth-link{color:var(--accent-hover)}
:root .auth-remember input{accent-color:var(--accent)}
:root .auth-error{background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger);border-radius:10px}
:root .auth-foot{border-top:1px solid var(--line)}
/* on small screens keep it a clean single card (hero already hidden by base @920px) */
@media(max-width:920px){
  :root .auth-hero{display:none}
  :root .auth-brand--card{display:flex;justify-content:center}
}

/* ============================================================================
   17 · MOBILE (bottom tabbar + "Mehr" sheet)
   ============================================================================ */
.mobile-tabbar{background:var(--glass-strong);border-top:1px solid var(--border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.mtab.on{color:var(--accent-hover)}
.deck-more-sheet{background:var(--glass-opaque);border-top:1px solid var(--border-2);border-radius:18px 18px 0 0}
.deck-more-i:hover,.deck-more-i.on{background:var(--accent-soft)}
.deck-more-i .dni{color:var(--accent-hover)}

/* ============================================================================
   18 · SKELETONS + MAINTENANCE SPLASH
   ============================================================================ */
.sk-row,.sk-card{background:linear-gradient(90deg,var(--surface-2) 25%,color-mix(in srgb,var(--accent) 10%,var(--surface-3)) 37%,var(--surface-2) 63%);background-size:400% 100%}
.sk-card{border-radius:12px}
.gsv-maint-card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,#fff 4%),var(--surface));border:1px solid var(--border-2);border-radius:18px;box-shadow:var(--shadow),var(--glow-accent)}
.gsv-maint-retry{background:var(--aurora-vivid);color:var(--accent-text);border-radius:12px;box-shadow:var(--glow-accent)}

/* ============================================================================
   19 · ITER-20260715 — Konsole-Dedup-Badge · Spieler volle UUID · Avatar-Fallback
   ============================================================================ */
/* Konsole: Zaehler-Badge fuer zusammengefasste (gespammte) Zeilen — "×N" waechst live. */
.logdup{display:inline-block;margin-left:8px;padding:0 7px;border-radius:999px;
  font:700 11px/18px ui-monospace,"SFMono-Regular",Menlo,monospace;
  color:var(--accent-hover);background:var(--accent-soft);border:1px solid var(--accent-line);
  vertical-align:baseline;white-space:nowrap;letter-spacing:.2px}
/* Spieler: volle UUID unter dem Namen — monospace, umbruchsicher, klick-zum-kopieren. */
.pl-uuid{display:inline-block;max-width:100%;
  font:500 10.5px/1.35 ui-monospace,"SFMono-Regular",Menlo,monospace;
  color:var(--text-dim,#9aa3c8);cursor:pointer;word-break:break-all;letter-spacing:.1px;
  transition:color .12s ease}
.pl-uuid:hover{color:var(--accent-hover)}
/* Spieler-Avatar-Fallback: Initial-Kopf in Akzentfarbe (KEIN Fake-Skin) —
   greift nur, wenn der Skin-Dienst wirklich kein Bild liefert. */
.pl-head-fb{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  border-radius:7px;background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent-hover);font-weight:800;text-transform:uppercase;line-height:1;
  overflow:hidden;flex-shrink:0;user-select:none}