@property --ex { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ey { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root{
  --k-primary: #d4a537;
  --k-primary-soft: rgba(212,165,55,0.35);
  --k-bg: #050505;
  --k-bg-soft: rgba(5,5,5,0.72);
  --k-text: #f3f1fa;
  --k-text-dim: #b9b3cc;
  --k-font: 'Rajdhani', sans-serif;
  --k-scale: 1;
  --vitals-scale: 1;
  --vehicle-scale: 1;
  --minimap-scale: 1;
  --k-danger: #ff3b5c;
  --k-warn: #ffb03b;

  --c-health:#ff3b5c;  --c-health-soft: rgba(255,59,92,.4);
  --c-armor:#3bb8ff;   --c-armor-soft: rgba(59,184,255,.4);
  --c-hunger:#ffb03b;  --c-hunger-soft: rgba(255,176,59,.4);
  --c-thirst:#3bf0ff;  --c-thirst-soft: rgba(59,240,255,.4);
  --c-stamina: var(--k-primary); --c-stamina-soft: var(--k-primary-soft);
  --c-oxygen:#2bd9a0;  --c-oxygen-soft: rgba(43,217,160,.4);
  --c-stress:#ff5bb8;  --c-stress-soft: rgba(255,91,184,.4);
  --c-voice:#a3ff5b;   --c-voice-soft: rgba(163,255,91,.4);

  --sz-x: 0px; --sz-y: 0px; --uw-inset: 0px;
  --k-accent: #f5d27a; --k-accent-soft: rgba(245,210,122,.3);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  width:100%; height:100%;
  background:transparent;
  overflow:hidden;
  font-family: var(--k-font);
  color: var(--k-text);
  user-select:none;
}

.hidden{ display:none !important; }

#ui{
  position:fixed; left:0; top:0;
  width: var(--ui-w, 1920px); height:1080px;
  transform: scale(var(--ui-z, 1)); transform-origin: 0 0;
}
#hud-root{ position:absolute; inset:0; }

.hud-panel, .hud-chip{
  position:absolute;
  transition: opacity .25s ease, transform .25s ease;
}

.bottom-left{
  bottom: calc(34px + var(--sz-y));
  left: calc(14px + var(--sz-x) + 210px * var(--minimap-scale) * var(--k-scale) + 26px);
  display:flex; gap:9px; flex-wrap:wrap; max-width: 430px;
  transform: scale(calc(var(--vitals-scale) * var(--k-scale))); transform-origin: bottom left;
  transition: left .45s cubic-bezier(.3,.8,.3,1);
}
body.mm-off .bottom-left{ left: calc(26px + var(--sz-x)); }
.bottom-left.placed, .bottom-left.dragging{ transition:none; }

.bottom-right{
  bottom: calc(34px + var(--sz-y)); right: calc(36px + var(--sz-x) + var(--uw-inset));
  display:flex; align-items:flex-end; gap:16px;
  transform: translate(var(--ex), var(--ey)) scale(calc(var(--vehicle-scale) * var(--k-scale))); transform-origin: bottom right;
}

.hidden-el{ display:none !important; }
body.pct-off .stat-val{ display:none; }

.stat{
  position:relative; --lvl:1;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  max-width:170px;
  transition: opacity .3s ease, max-width .4s cubic-bezier(.3,.8,.3,1), margin .4s cubic-bezier(.3,.8,.3,1);
}
body.hide-full .stat.at-full, .stat.smart-off{
  opacity:0; max-width:0; min-width:0; margin-right:-9px; overflow:hidden; pointer-events:none;
}
body.vitals-bar.hide-full .stat.at-full, body.vitals-bar .stat.smart-off{ margin-right:-16px; }
.stat[data-stat="health"]{ --stat-color: var(--c-health); --stat-soft: var(--c-health-soft); }
.stat[data-stat="armor"]{ --stat-color: var(--c-armor); --stat-soft: var(--c-armor-soft); }
.stat[data-stat="hunger"]{ --stat-color: var(--c-hunger); --stat-soft: var(--c-hunger-soft); }
.stat[data-stat="thirst"]{ --stat-color: var(--c-thirst); --stat-soft: var(--c-thirst-soft); }
.stat[data-stat="stamina"]{ --stat-color: var(--c-stamina); --stat-soft: var(--c-stamina-soft); }
.stat[data-stat="voice"]{ --stat-color: var(--c-voice); --stat-soft: var(--c-voice-soft); }
.stat[data-stat="oxygen"]{ --stat-color: var(--c-oxygen); --stat-soft: var(--c-oxygen-soft); }
.stat[data-stat="stress"]{ --stat-color: var(--c-stress); --stat-soft: var(--c-stress-soft); }
.stat-voice{ --lvl:0; }
.stat-voice .stat-hex svg{ opacity:.55; transition: opacity .15s ease; }
.stat-voice.talking{ --lvl:1; }
.stat-voice.talking .stat-hex svg{ opacity:1; }
.stat-voice.talking .stat-hex{ animation: voicePulse .9s ease-in-out infinite; }
@keyframes voicePulse{ 50%{ filter: drop-shadow(0 0 8px var(--stat-color)); } }
.voice-mode{ font-size:10px !important; text-transform:uppercase; letter-spacing:.8px; }
body.pct-off .voice-mode{ display:block !important; }
.stat.low{ --stat-color:#ff3b5c; --stat-soft: rgba(255,59,92,0.45); }
.stat.low .stat-hex svg{ animation: statBlink 1s ease-in-out infinite; }
@keyframes statBlink{ 50%{ opacity:.35; } }

.stat-hex{
  position:relative; isolation:isolate;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition: box-shadow .3s ease, background .3s ease;
}
.stat-hex svg{ position:relative; z-index:2; width:16px; height:16px; color:#fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.stat-hex::before, .stat-hex::after{ content:""; position:absolute; pointer-events:none; }
.stat-hex::before{
  left:0; right:0; bottom:0; z-index:0;
  height: calc(var(--lvl) * 100%);
  transition: height .45s cubic-bezier(.3,.8,.3,1), background .3s ease;
}

.stat-val{ font-weight:700; font-size:12px; letter-spacing:.3px; color: var(--stat-color); font-variant-numeric: tabular-nums; }
.stat-val small{ font-size:9px; font-weight:600; opacity:.75; margin-left:1px; }
.stat-bar{ display:none; }

body.vitals-hex .stat-hex{
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: linear-gradient(160deg, rgba(30,26,42,.92), rgba(10,10,15,.92));
  box-shadow: 0 0 0 1.5px var(--stat-soft) inset;
}
body.vitals-hex .stat-hex::before{
  background: linear-gradient(0deg, var(--stat-color), var(--stat-soft));
  opacity:.6;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
}

body.vitals-ring .stat-hex{
  border-radius:50%;
  background: radial-gradient(circle, rgba(24,20,34,.95) 55%, rgba(10,10,15,.9));
}
body.vitals-ring .stat-hex::before{
  inset:0; height:auto; border-radius:50%;
  background: conic-gradient(var(--stat-color) calc(var(--lvl) * 360deg), rgba(255,255,255,.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}
body.vitals-ring .stat-hex::after{
  inset:7px; border-radius:50%; z-index:1;
  background: radial-gradient(circle, var(--stat-soft), transparent 70%);
  opacity:.55;
}

body.vitals-tile .stat-hex{
  width:40px; height:40px; border-radius:11px;
  background: linear-gradient(180deg, rgba(34,30,46,.95), rgba(14,13,20,.95));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 4px 12px rgba(0,0,0,.4);
}
body.vitals-tile .stat-hex::before{
  background: var(--stat-color);
  box-shadow: 0 -4px 12px var(--stat-soft), inset 0 2px 0 rgba(255,255,255,.4);
}
body.vitals-tile .stat-hex::after{
  inset:0; z-index:1; border-radius:11px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%);
}

body.vitals-bar #vitals-panel{
  gap:9px 16px; max-width:520px;
  padding:9px 14px; border-radius:14px;
  background: linear-gradient(180deg, rgba(16,14,22,.82), rgba(10,10,15,.7));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
body.vitals-bar .stat{ flex-direction:row; gap:7px; }
body.vitals-bar .stat-hex{ width:18px; height:18px; overflow:visible; }
body.vitals-bar .stat-hex svg{ color: var(--stat-color); width:15px; height:15px; filter: drop-shadow(0 0 4px var(--stat-soft)); }
body.vitals-bar .stat-hex::before{ display:none; }
body.vitals-bar .stat-bar{
  display:block; width:46px; height:5px; border-radius:3px;
  background: rgba(255,255,255,.08); overflow:hidden;
}
body.vitals-bar .stat-bar i{
  display:block; height:100%; border-radius:3px;
  width: calc(var(--lvl) * 100%);
  background: var(--stat-color); box-shadow: 0 0 8px var(--stat-soft);
  transition: width .45s cubic-bezier(.3,.8,.3,1);
}
body.vitals-bar .stat-val{ width:30px; font-size:11px; }

body.paused #hud-root, body.hud-off #hud-root{ opacity:0; }
#hud-root{ transition: opacity .2s ease; }
body.no-radar #minimap-frame{ display:none; }
.cine-bar{
  position:fixed; left:0; right:0; height:0; background:#000; z-index:5;
  transition: height .5s cubic-bezier(.4,0,.2,1); pointer-events:none;
}
.cine-bar.top{ top:0; }
.cine-bar.bottom{ bottom:0; }
body.cinematic .cine-bar{ height:118px; }
body.cinematic #hud-root{ opacity:0; }
#minimap-frame{
  position:absolute;
  left: calc(14px + var(--sz-x)); bottom: calc(14px + var(--sz-y));
  width: 210px; height: 210px;
  pointer-events: none;
  transform: scale(calc(var(--minimap-scale) * var(--k-scale)));
  transform-origin: bottom left;
}
#minimap-frame.draggable{ pointer-events: auto; }

.minimap-ring{
  position:absolute; inset:0;
  border: 2px solid var(--k-primary);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 18px var(--k-primary-soft), inset 0 0 14px rgba(0,0,0,0.5);
}
#minimap-frame.minimap-circle .minimap-ring{ border-radius:50%; }
#minimap-frame.minimap-square .minimap-ring{ border-radius:10px; }

.minimap-labels{
  position:absolute; left:50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  text-align:center; white-space:nowrap;
}
.minimap-zone{ font-size:13px; font-weight:700; color: var(--k-text); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.minimap-street{ font-size:11px; color: var(--k-text-dim); margin-top:1px; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

#compass-bar{
  position:fixed; top: calc(16px + var(--sz-y)); left:50%; transform:translateX(-50%) translate(var(--ex), var(--ey)) scale(var(--k-scale)); transform-origin: top center;
  z-index: 20;
}
#compass-bar.draggable{ pointer-events:auto; }

.compass-viewport{
  position:relative;
  width: 280px; height: 34px; overflow:hidden;
  background: linear-gradient(180deg, rgba(10,8,16,.78), rgba(10,8,16,.55));
  border:1px solid var(--k-primary-soft);
  border-radius:8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 4px 18px rgba(0,0,0,.45), inset 0 0 10px rgba(0,0,0,.4);
}
.compass-strip{
  position:absolute; top:0; left:0; height:100%;
  will-change: transform;
}
.compass-tick{
  position:absolute; top:0; bottom:0; display:flex; align-items:flex-end; justify-content:center;
  width:1px; border-left:1px solid rgba(255,255,255,0.15);
  font-size:13px; font-weight:700; color: var(--k-text-dim); padding-bottom:5px; letter-spacing:.5px;
}
.compass-tick.major{ border-left-color: rgba(255,255,255,0.4); color: var(--k-primary); font-weight:800; font-size:16px; }
.compass-pointer{
  position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background: linear-gradient(180deg, var(--k-accent), var(--k-primary) 55%, transparent);
  box-shadow: 0 0 8px var(--k-primary), 0 0 2px var(--k-accent);
}
.compass-pointer::before{
  content:"";
  position:absolute; top:-1px; left:50%; transform:translate(-50%,-100%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--k-primary);
  filter: drop-shadow(0 0 4px var(--k-primary-soft));
}
.compass-fade{
  position:absolute; top:0; bottom:0; width:38px; pointer-events:none;
}
.compass-fade.left{ left:0; background: linear-gradient(90deg, rgba(10,8,16,.95), transparent); }
.compass-fade.right{ right:0; background: linear-gradient(-90deg, rgba(10,8,16,.95), transparent); }

#vehicle-panel{ flex-direction:column; align-items:center; gap:10px; }

.gauge{ position:relative; }
.gauge-arc-wrap, .gauge-ring-wrap, .gauge-digital-wrap{ display:none !important; }
#vehicle-panel.speedo-arc .gauge-arc-wrap{ display:block !important; }
#vehicle-panel.speedo-ring .gauge-ring-wrap{ display:flex !important; }
#vehicle-panel.speedo-digital .gauge-digital-wrap{ display:flex !important; }

.gauge-svg{ width:100%; height:100%; overflow:visible; display:block; }

.trk{ fill:none; stroke: rgba(255,255,255,0.07); }
.trk-fg{ fill:none; transition: stroke-dashoffset .18s ease-out, stroke .3s ease; }
.trk-fg.spd-fg, .trk-fg.heat-fg{ transition: stroke .3s ease; }
.spd-fg{ stroke: url(#spd-grad); filter: drop-shadow(0 0 6px var(--k-primary-soft)) drop-shadow(0 0 2px var(--k-primary)); }
.fuel-fg{ stroke: var(--k-warn); filter: drop-shadow(0 0 4px rgba(255,176,59,.45)); }
.engine-fg{ stroke: #2bd97a; filter: drop-shadow(0 0 4px rgba(43,217,122,.45)); }
.engine-fg.mid{ stroke: var(--k-warn); }
.engine-fg.bad{ stroke: var(--k-danger); filter: drop-shadow(0 0 5px rgba(255,59,92,.6)); }
.fuel-fg.bad{ stroke: var(--k-danger); }
.redzone{ fill:none; stroke: var(--k-danger); stroke-opacity:.55; }
.stop-a{ stop-color: var(--k-primary); stop-opacity:.75; }
.stop-b{ stop-color: var(--k-accent); stop-opacity:1; }

.tick{ stroke: rgba(255,255,255,0.16); stroke-width:1.4; stroke-linecap:round; transition: stroke .2s ease; }
.tick.major{ stroke: rgba(255,255,255,0.38); stroke-width:2; }
.tick.lit{ stroke: var(--k-primary); }
.tick.major.lit{ stroke: #fff; }
.tick-label{ fill: var(--k-text-dim); font-size:9.5px; font-weight:600; font-family: var(--k-font); text-anchor:middle; dominant-baseline:middle; }
.needle-dot{ fill: #fff; filter: drop-shadow(0 0 4px var(--k-primary)) drop-shadow(0 0 8px var(--k-primary)); }

.spd{ font-weight:800; font-size:46px; line-height:.9; letter-spacing:-.5px; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px var(--k-primary-soft); }
.spd-unit{ font-size:10px; font-weight:700; letter-spacing:2.5px; color:var(--k-text-dim); }
.gear-text{ font-size:10px; font-weight:700; letter-spacing:2px; color: var(--k-text-dim); }
.gear-text b{ color: var(--k-primary); font-size:13px; margin-left:3px; }

.gauge-ico{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:3px;
  font-size:10px; font-weight:700; color: var(--k-text-dim);
}
.gauge-ico svg, .dg-row svg, .ind svg{
  width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ico-fuel{ color: var(--k-warn); }
.ico-engine{ color: #2bd97a; }
.ico-fuel.low, .ico-engine.low{ color: var(--k-danger); animation: indBlink 1s steps(2) infinite; }

.rpm-bar{ display:flex; gap:3px; justify-content:center; }
.rpm-seg{
  width:9px; height:6px; border-radius:2px;
  background: rgba(255,255,255,0.08);
  transition: background .1s ease, box-shadow .1s ease;
}
.rpm-seg.lit{ background: #2bd97a; box-shadow: 0 0 6px #2bd97a; }
.rpm-seg.lit.warn{ background: #ffb03b; box-shadow: 0 0 6px #ffb03b; }
.rpm-seg.lit.danger{ background: #ff3b5c; box-shadow: 0 0 6px #ff3b5c; }

.gauge-arc-wrap{ width:240px; height:200px; }
.arc-center{
  position:absolute; left:0; right:0; top:62px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.arc-center .rpm-bar{ margin-top:5px; }
.arc-center .rpm-seg{ width:8px; }

.gauge-ring-wrap{ flex-direction:column; align-items:center; gap:8px; }
.ring-box{ position:relative; width:180px; height:180px; }
.ring-center{
  position:absolute; left:0; right:0; top:58px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ring-center .spd{ font-size:42px; }
.ring-gear{
  position:absolute; left:50%; top:157px; transform:translate(-50%,-50%);
  font-size:15px; font-weight:800; color: var(--k-primary);
  text-shadow: 0 0 10px var(--k-primary-soft);
}
.gauge-ring-wrap .rpm-seg{ width:8px; height:5px; }

.gauge-digital-wrap{ width:232px; }
.digital-card{
  position:relative; width:100%; padding:12px 16px 14px;
  border-radius:14px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--k-primary-soft), transparent 60%),
    linear-gradient(170deg, rgba(22,18,32,.92), rgba(8,8,12,.88));
  border:1px solid var(--k-primary-soft);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:8px;
  overflow:hidden;
}
.digital-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
.dg-top{ display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700; letter-spacing:2px; color: var(--k-text-dim); }
.dg-gear b{ color: var(--k-primary); font-size:13px; margin-left:3px; }
.dg-speed{ position:relative; align-self:center; font-family:'Orbitron', var(--k-font), sans-serif; font-weight:800; font-size:50px; line-height:1; letter-spacing:2px; }
.dg-ghost{ color: rgba(255,255,255,0.05); }
.dg-val{ position:absolute; right:0; top:0; color:#fff; text-shadow: 0 0 16px var(--k-primary-soft), 0 0 2px rgba(255,255,255,.6); }
.dg-val i{ font-style:normal; color: rgba(255,255,255,0.16); text-shadow:none; }
.rpm-wide{ gap:2px; }
.rpm-wide .rpm-seg{ flex:1; width:auto; height:5px; border-radius:1px; }
.dg-row{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; }
.dg-bar{ flex:1; height:5px; border-radius:3px; background: rgba(255,255,255,0.08); overflow:hidden; }
.dg-bar i{ display:block; height:100%; width:0; border-radius:3px; background: currentColor; box-shadow: 0 0 8px currentColor; transition: width .3s ease; }
.dg-pct{ width:34px; text-align:right; color: var(--k-text); font-variant-numeric: tabular-nums; }

.veh-ind{
  display:flex; align-items:center; gap:4px;
  padding:5px 8px; border-radius:20px;
  background: linear-gradient(180deg, rgba(14,12,20,.78), rgba(10,10,15,.6));
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.ind{
  width:24px; height:22px; display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,0.22); border-radius:6px;
  transition: color .2s ease, filter .2s ease;
}
.ind svg{ width:15px; height:15px; }
.ind svg .solid{ fill: currentColor; stroke:none; }
.ind.on{ color: var(--k-primary); filter: drop-shadow(0 0 5px var(--k-primary-soft)); }
.ind.ok{ color: #2bd97a; filter: drop-shadow(0 0 4px rgba(43,217,122,.5)); }
.ind.high{ color: #3bb8ff; filter: drop-shadow(0 0 6px rgba(59,184,255,.8)); }
.ind.warn{ color: var(--k-warn); animation: indBlink 1s steps(2) infinite; }
.ind.alert{ color: var(--k-danger); filter: drop-shadow(0 0 5px rgba(255,59,92,.7)); }
.ind.alert.blink{ animation: indBlink .9s steps(2) infinite; }
.ind-signal.on{ color:#2bd97a; filter: drop-shadow(0 0 6px rgba(43,217,122,.9)); animation: indBlink .7s steps(2) infinite; }
.ind-signal.on.ticked{ animation:none; }
.ind-signal.on.ticked.dim{ opacity:.25; filter:none; }
.ind.na{ display:none; }
@keyframes indBlink{ 50%{ opacity:.25; } }

body.anim-off *{ transition: none !important; animation: none !important; }

#config-overlay{
  position:fixed; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.45), rgba(0,0,0,0.7));
  display:flex; align-items:center; justify-content:center;
  z-index: 999;
}
#config-panel{
  position:relative; isolation:isolate;
  width: min(960px, 94%); height: min(640px, 92%);
  display:grid; grid-template-columns: 228px 1fr;
  background: var(--k-bg);
  border: 1px solid var(--k-primary-soft);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.6), 0 0 70px -10px var(--k-primary-soft);
  overflow:hidden;
  animation: panelIn .35s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes panelIn{ from{ opacity:0; transform: translateY(14px) scale(.97); } }

.cfg-fx{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.fx-orb{ position:absolute; border-radius:50%; filter: blur(70px); opacity:.55; }
.fx-orb-a{ width:420px; height:420px; right:-80px; top:-160px; background: var(--k-primary); opacity:.22; animation: orbA 16s ease-in-out infinite; }
.fx-orb-b{ width:360px; height:360px; left:120px; bottom:-200px; background: var(--k-accent); opacity:.12; animation: orbB 19s ease-in-out infinite; }
@keyframes orbA{ 50%{ transform: translate(-140px, 120px) scale(1.15); } }
@keyframes orbB{ 50%{ transform: translate(220px, -60px) scale(.9); } }
.fx-grid{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 70% 55%, #000 20%, transparent 75%);
          mask: radial-gradient(ellipse 70% 80% at 70% 55%, #000 20%, transparent 75%);
}
.fx-logo, .fx-logo-glow, .fx-shine{
  position:absolute; width:560px; height:560px; right:-90px; bottom:-120px;
  animation: logoDrift 18s ease-in-out infinite;
}
.fx-logo{ opacity:.075; }
.fx-logo-glow{ opacity:.35; filter: blur(46px) saturate(1.4); }
.fx-shine{
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%) 0 0 / 300% 100%;
  opacity:.22;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: logoDrift 18s ease-in-out infinite, shineSweep 7s ease-in-out infinite;
}
@keyframes logoDrift{
  0%,100%{ transform: rotate(-4deg) translateY(0); }
  50%{ transform: rotate(3deg) translateY(-18px); }
}
@keyframes shineSweep{
  0%, 55%{ background-position: 100% 0; }
  100%{ background-position: -50% 0; }
}

.cfg-side{
  display:flex; flex-direction:column; gap:22px;
  padding:26px 18px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.25));
  border-right: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.config-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.brand-ring{
  position:relative; width:78px; height:78px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.brand-ring::before{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--k-primary) 80%, #fff 86%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: ringSpin 4s linear infinite;
}
.brand-ring::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background: radial-gradient(circle at 50% 35%, #1b1726, #09080d 75%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 22px -4px var(--k-primary-soft);
}
@keyframes ringSpin{ to{ transform: rotate(360deg); } }
@keyframes ringBreathe{ 50%{ opacity:.4; transform: scale(.92); } }
.brand-logo{
  position:relative; z-index:1; width:52px; height:52px;
  filter: drop-shadow(0 0 8px var(--k-primary-soft));
}
.config-title{ font-size:19px; letter-spacing:1.5px; color: var(--k-text); display:flex; flex-direction:column; align-items:center; line-height:1.1; font-weight:700; }
.config-title small{ font-size:10px; font-weight:600; letter-spacing:2px; color: var(--k-text-dim); text-transform:uppercase; margin-top:4px; }
.config-title strong{ color: var(--k-primary); }

.config-tabs{ display:flex; flex-direction:column; gap:5px; }
.cfg-tab{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:11px; text-align:left;
  font-size:14px; font-weight:700; letter-spacing:.4px;
  color: var(--k-text-dim); background:none; border:1px solid transparent;
  cursor:pointer; font-family: var(--k-font);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cfg-tab svg{ width:17px; height:17px; flex-shrink:0; }
.cfg-tab:hover{ color: var(--k-text); background: rgba(255,255,255,.04); }
.cfg-tab.active{
  color:#fff;
  background: linear-gradient(90deg, var(--k-primary-soft), rgba(255,255,255,.02));
  border-color: var(--k-primary-soft);
}
.cfg-tab.active::before{
  content:""; position:absolute; left:-18px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0;
  background: var(--k-primary); box-shadow: 0 0 12px var(--k-primary);
}
.cfg-tab.active svg{ color: var(--k-primary); filter: drop-shadow(0 0 6px var(--k-primary-soft)); }

.config-footer{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.config-footer .btn{ width:100%; padding:11px 0; }
.cfg-keyhint{ text-align:center; font-size:11px; font-weight:600; color: var(--k-text-dim); letter-spacing:.5px; margin-top:2px; }
kbd{
  font-family: var(--k-font); font-size:10px; font-weight:700;
  padding:2px 6px; border-radius:5px; margin-right:3px;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-bottom-width:2px;
  color: var(--k-text);
}

.cfg-main{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; }
.config-close{
  position:absolute; top:18px; right:18px; z-index:2;
  width:34px; height:34px; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color: var(--k-text-dim); transition: color .15s, background .15s, transform .2s;
}
.config-close svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.config-close:hover{ color:#fff; background: rgba(255,59,92,.2); border-color: rgba(255,59,92,.4); transform: rotate(90deg); }
.cfg-main-head{ padding:24px 30px 0; }
.cfg-main-head h2{ margin:0; font-size:24px; font-weight:800; letter-spacing:.5px; color: var(--k-text); }
.cfg-main-head p{ margin:3px 0 0; font-size:12.5px; font-weight:600; color: var(--k-text-dim); }

.config-body{ flex:1; min-height:0; padding:18px 30px 26px; overflow-y:auto; }
.config-body::-webkit-scrollbar{ width:6px; }
.config-body::-webkit-scrollbar-track{ background:transparent; }
.config-body::-webkit-scrollbar-thumb{ background: var(--k-primary-soft); border-radius:6px; }
.config-body::-webkit-scrollbar-button{ display:none; height:0; }
.cfg-pane{ display:none; flex-direction:column; gap:18px; }
.cfg-pane.active{ display:flex; animation: paneIn .25s ease; }
@keyframes paneIn{ from{ opacity:0; transform: translateX(10px); } }
.cfg-cols{ display:grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap:26px; align-items:start; }
.cfg-col-l, .cfg-col-r{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.cfg-group label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color: var(--k-text-dim); display:block; margin-bottom:9px; }
.cfg-hint{ font-size:12px; color: var(--k-text-dim); line-height:1.55; margin:0 0 10px; text-transform:none; letter-spacing:0; }
.cfg-row{ display:flex; gap:16px; }
.cfg-col{ flex:1; }
.cfg-toggle{ display:flex; flex-direction:column; justify-content:flex-start; }

.style-list.style-list-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.style-list.style-list-2 .style-option{ position:relative; min-width:0; padding:9px 10px; gap:10px; }
.style-list.style-list-2 .style-preview{ width:34px; height:34px; }
.style-list.style-list-2 .style-row-sub{ font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.style-list.style-list-2 .style-row-check{ position:absolute; top:6px; right:6px; width:16px; height:16px; }
.style-list.style-list-2 .style-row-check svg{ width:9px; height:9px; }
.series-list.series-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.series-list.series-grid .series-opt{ flex-direction:column; align-items:stretch; gap:8px; padding:8px 8px 10px; }
.series-list.series-grid .series-thumb{ width:100%; height:50px; }
.series-list.series-grid .series-text{ align-items:center; text-align:center; }
.series-list.series-grid .series-text b{ font-size:12px; }
.series-list.series-grid .series-opt .style-row-check{ left:auto; right:7px; top:7px; }
.bg-row .swatch{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

#layout-bar{ display:none; }
body.layout-edit #config-overlay{ background: transparent; pointer-events:none; align-items:flex-start; }
body.layout-edit #config-panel{ display:none; }
body.layout-edit #layout-bar{
  display:flex; align-items:center; gap:14px; pointer-events:auto;
  margin-top: 90px; padding:10px 10px 10px 18px; border-radius:14px;
  background: rgba(12,10,18,.88); border:1px solid var(--k-primary-soft);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 30px -8px var(--k-primary-soft);
  font-size:14px; font-weight:700; color: var(--k-text);
  animation: panelIn .3s ease;
}
.lb-dot{ width:8px; height:8px; border-radius:50%; background: var(--k-primary); box-shadow: 0 0 10px var(--k-primary); animation: ringBreathe 1.4s ease-in-out infinite; }

.el-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:8px; }

.el-grid .el-tile{
  position:relative; margin:0; text-transform:none; letter-spacing:0;
  display:flex; flex-direction:row; align-items:center; gap:7px;
  padding:8px 7px;
  border-radius:12px; min-width:0;
  background: rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.el-tile:hover{ background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.12); }
.el-tile:active{ transform: scale(.96); }
.el-tile input{
  position:absolute; appearance:none; -webkit-appearance:none;
  width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; pointer-events:none;
}

.el-tile-icon{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--tile-color, var(--k-primary));
  box-shadow: 0 5px 14px -5px var(--tile-color, var(--k-primary)), 0 0 0 1px rgba(255,255,255,0.12) inset;
  transition: opacity .2s ease, filter .2s ease, box-shadow .2s ease, transform .15s ease;
}
.el-tile-icon svg{ width:15px; height:15px; stroke:#fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

.el-tile-label{
  font-size:10px; font-weight:700; letter-spacing:.2px; text-transform:uppercase;
  color: var(--k-text-dim); transition: color .18s ease;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.el-tile input:checked ~ .el-tile-icon{ transform: translateY(-1px); }
.el-tile input:checked ~ .el-tile-label{ color: var(--k-text); }
.el-tile input:not(:checked) ~ .el-tile-icon{
  opacity:.3; filter:grayscale(1) brightness(.85); box-shadow:none; transform:none;
}
.el-tile input:not(:checked) ~ .el-tile-label{ color: rgba(185,179,204,0.45); }

.el-tile[data-stat-tile="health"]{ --tile-color: var(--c-health); }
.el-tile[data-stat-tile="armor"]{ --tile-color: var(--c-armor); }
.el-tile[data-stat-tile="hunger"]{ --tile-color: var(--c-hunger); }
.el-tile[data-stat-tile="thirst"]{ --tile-color: var(--c-thirst); }
.el-tile[data-stat-tile="stamina"]{ --tile-color: var(--c-stamina); }
.el-tile[data-stat-tile="oxygen"]{ --tile-color: var(--c-oxygen); }
.el-tile[data-stat-tile="stress"]{ --tile-color: var(--c-stress); }
.el-tile[data-stat-tile="voice"]{ --tile-color: var(--c-voice); }
.el-tile[data-stat-tile="vehicle"]{ --tile-color:#7c6cff; }
.el-tile[data-stat-tile="fuel"]{ --tile-color:#ffa63b; }
.el-tile[data-stat-tile="engine"]{ --tile-color:#2bd97a; }
.el-tile[data-stat-tile="minimap"]{ --tile-color:#b084ff; }
.el-tile[data-stat-tile="compass"]{ --tile-color:#5b8cff; }
.el-tile[data-stat-tile="indicators"]{ --tile-color:#2bd97a; }

.series-list{ display:flex; flex-direction:column; gap:8px; }
.series-opt{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:8px 14px 8px 8px; border-radius:12px; cursor:pointer;
  background: linear-gradient(90deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.07);
  overflow:hidden;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
.series-opt::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--k-primary); transform: scaleY(0); transition: transform .2s ease;
}
.series-opt:hover{ border-color: var(--k-primary-soft); }
.series-opt:active{ transform: scale(.985); }
.series-opt.active{
  border-color: var(--k-primary);
  background: linear-gradient(90deg, var(--k-primary-soft), rgba(255,255,255,0.02) 70%);
  box-shadow: 0 0 18px -6px var(--k-primary-soft);
}
.series-opt.active::before{ transform: scaleY(1); }
.series-thumb{
  flex-shrink:0; width:92px; height:52px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.05), rgba(0,0,0,0.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.series-thumb svg{ width:84px; height:48px; overflow:visible; }
.th-pri{ stroke: var(--k-primary); filter: drop-shadow(0 0 3px var(--k-primary-soft)); }
.th-pri-stroke{ stroke: var(--k-primary-soft); }
.th-num{ fill:#fff; font-family: var(--k-font); font-weight:800; font-size:14px; }
.th-mono{ font-family:'Orbitron', var(--k-font), sans-serif; font-size:13px; letter-spacing:1px; }
.series-text{ flex:1; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; min-width:0; }
.series-text b{ font-size:13px; font-weight:800; letter-spacing:1px; color: var(--k-text); }
.series-text small{ font-size:10.5px; font-weight:600; letter-spacing:.3px; color: var(--k-text-dim); }
.series-opt .style-row-check{ order:-1; position:absolute; top:6px; left:80px; width:18px; height:18px; }
.series-opt.active .style-row-check{ opacity:1; transform:scale(1); background: var(--k-primary); box-shadow: 0 0 10px var(--k-primary-soft); }
.series-opt .style-row-check svg{ width:10px; height:10px; }

.seg{
  display:flex; padding:4px; gap:4px; border-radius:11px;
  background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
}
.seg button{
  flex:1; padding:9px 0; border:none; border-radius:8px; cursor:pointer;
  background:none; color: var(--k-text-dim);
  font-family: var(--k-font); font-weight:800; font-size:13px; letter-spacing:1.5px;
  transition: background .18s ease, color .18s ease;
}
.seg button:hover{ color: var(--k-text); }
.seg button.active{ background: var(--k-primary); color:#fff; box-shadow: 0 3px 12px -3px var(--k-primary-soft); }

.style-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.shape-grid .style-option{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px 12px;
}
.shape-grid .style-option svg{
  width:26px; height:26px; color: var(--k-text-dim);
  transition: color .18s ease;
}
.shape-grid .style-option.active svg{ color:#fff; }
.style-option{
  padding:12px; text-align:center; border-radius:10px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer; font-weight:600; font-size:13px;
  transition: border-color .2s ease, background .2s ease;
}
.style-option:hover{ border-color: var(--k-primary-soft); }
.style-option.active{ border-color: var(--k-primary); background: var(--k-primary-soft); color:#fff; }

.style-list{ display:flex; flex-direction:column; gap:8px; }
.style-list .style-option{
  display:flex; align-items:center; gap:13px;
  text-align:left; padding:9px 12px 9px 9px;
}
.style-preview{
  position:relative; flex-shrink:0;
  width:42px; height:42px; border-radius:11px; overflow:hidden;
}
.style-row-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.style-row-title{ font-size:13px; font-weight:700; color: var(--k-text); letter-spacing:.2px; }
.style-row-sub{ font-size:11px; font-weight:500; color: var(--k-text-dim); }
.style-row-check{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  opacity:0; transform: scale(.6);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.style-row-check svg{ width:12px; height:12px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.style-list .style-option.active .style-row-check{ opacity:1; transform:scale(1); background: var(--k-primary); box-shadow: 0 0 10px var(--k-primary-soft); }

.sp-aurora{
  background: radial-gradient(circle at 34% 30%, #ffe6a3, #b8862a 55%, #1f1606 100%);
  box-shadow: 0 0 14px rgba(212,165,55,.55), inset 0 0 10px rgba(0,0,0,.35);
}
.sp-glass{
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.03));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset;
}
.sp-glass::after{
  content:""; position:absolute; top:4px; left:5px; width:58%; height:34%;
  background: rgba(255,255,255,0.4); border-radius:7px; filter: blur(2.5px);
}
.sp-cyber{
  background: linear-gradient(135deg, #1a1305, #8a6418 120%);
  clip-path: polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%);
  box-shadow: inset 0 0 0 1px rgba(245,210,122,.7);
}
.sp-cyber::after{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(245,210,122,.3) 0 1.5px, transparent 1.5px 5px);
}
.sp-minimal{
  background: rgba(255,255,255,0.025);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.45) inset;
}
.sp-minimal::after{
  content:""; position:absolute; top:50%; left:50%; width:16px; height:16px;
  transform: translate(-50%,-50%); border-radius:50%;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.45) inset;
}

input[type=color]{
  width:100%; height:34px; border:none; border-radius:8px; background:none; cursor:pointer;
}

.swatch-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.swatch{
  width:24px; height:24px; border-radius:7px; padding:0; cursor:pointer;
  border:1.5px solid rgba(255,255,255,0.15);
  background: var(--sw);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.swatch:hover{ transform: scale(1.12); }
.swatch.active{
  border-color:#fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3.5px var(--sw), 0 0 10px var(--sw);
}
.swatch-custom{
  width:24px; height:24px; border-radius:7px; overflow:hidden; flex-shrink:0;
  border:1.5px dashed rgba(255,255,255,0.35);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .15s ease;
}
.swatch-custom:hover{ border-color: rgba(255,255,255,0.6); }
.swatch-custom input[type=color]{
  width:32px; height:32px; padding:0; border:none; background:none; cursor:pointer;
  appearance:none; -webkit-appearance:none;
}
.swatch-custom input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.swatch-custom input[type=color]::-webkit-color-swatch{ border:none; }
select{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05); color: var(--k-text); font-family: var(--k-font);
}
input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  width:100%; height:6px; margin:10px 0;
  border-radius:4px; outline:none; cursor:pointer;
  background: linear-gradient(to right,
    var(--k-primary) 0%, var(--k-primary) var(--range-fill, 50%),
    rgba(255,255,255,0.1) var(--range-fill, 50%), rgba(255,255,255,0.1) 100%);
  transition: box-shadow .15s ease;
}
input[type=range]:hover{ box-shadow: 0 0 10px var(--k-primary-soft); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--k-primary);
  box-shadow: 0 0 8px var(--k-primary-soft), 0 1px 3px rgba(0,0,0,.5);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
input[type=range]::-webkit-slider-thumb:hover{ transform: scale(1.15); box-shadow: 0 0 14px var(--k-primary); }
input[type=range]::-webkit-slider-thumb:active{ transform: scale(.95); }
input[type=range]::-moz-range-track{ height:6px; border-radius:4px; background: rgba(255,255,255,0.1); }
input[type=range]::-moz-range-progress{ height:6px; border-radius:4px; background: var(--k-primary); }
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#fff;
  border:3px solid var(--k-primary); box-shadow: 0 0 8px var(--k-primary-soft); cursor:pointer;
}

.switch{ position:relative; display:inline-block; width:44px; height:24px; margin-top:4px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0; background:rgba(255,255,255,0.12);
  border-radius:24px; transition:.2s;
}
.slider:before{
  position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px;
  background:white; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background: var(--k-primary); }
.switch input:checked + .slider:before{ transform: translateX(20px); }

.setting-list{
  background: rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:0 12px;
}
.setting-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.setting-row:last-child{ border-bottom:none; }
.setting-icon{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.05);
  color: var(--k-text-dim);
}
.setting-icon svg{ width:16px; height:16px; }
.setting-text{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.setting-title{ font-size:12.5px; font-weight:700; color: var(--k-text); text-transform:uppercase; letter-spacing:.4px; }
.setting-sub{ font-size:11px; color: var(--k-text-dim); font-weight:500; }
.setting-row .switch{ margin-top:0; flex-shrink:0; }

.btn{ padding:9px 18px; border-radius:8px; font-weight:600; font-size:13px; cursor:pointer; border:none; font-family: var(--k-font); }
.btn-ghost{ background:rgba(255,255,255,0.06); color: var(--k-text-dim); }
.btn-ghost:hover{ background:rgba(255,255,255,0.1); }
.btn-primary{ background: linear-gradient(135deg, var(--k-primary), var(--k-accent)); color:#0a0a0f; }
.btn-primary:hover{ filter: brightness(1.1); }
.btn.active{ border-color: var(--k-primary); color: var(--k-primary); }

body.layout-edit .draggable{
  cursor: grab;
  outline: 1px dashed var(--k-primary-soft);
  outline-offset: 6px;
  border-radius: 10px;
}
body.layout-edit .draggable:active{ cursor: grabbing; }
body.layout-edit .draggable.dragging{ opacity:.85; z-index: 500; }

.stat-colors{ display:grid; grid-template-columns: repeat(8, 1fr); gap:7px; }
.sc-chip{ position:relative; display:block; margin:0 !important; cursor:pointer; }
.sc-chip input{ position:absolute; width:1px; height:1px; opacity:0; clip:rect(0,0,0,0); }
.sc-dot{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; border-radius:10px;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(0,0,0,.42)), var(--sc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -4px var(--sc);
  color:#fff; transition: transform .15s ease, box-shadow .15s ease;
}
.sc-dot svg{ width:15px; height:15px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.sc-chip:hover .sc-dot{ transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -4px var(--sc); }
.sc-chip[data-sc="health"]{ --sc: var(--c-health); }
.sc-chip[data-sc="armor"]{ --sc: var(--c-armor); }
.sc-chip[data-sc="hunger"]{ --sc: var(--c-hunger); }
.sc-chip[data-sc="thirst"]{ --sc: var(--c-thirst); }
.sc-chip[data-sc="stamina"]{ --sc: var(--c-stamina); }
.sc-chip[data-sc="oxygen"]{ --sc: var(--c-oxygen); }
.sc-chip[data-sc="stress"]{ --sc: var(--c-stress); }
.sc-chip[data-sc="voice"]{ --sc: var(--c-voice); }
.link-btn{
  float:right; background:none; border:none; cursor:pointer; padding:0;
  font-family: var(--k-font); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color: var(--k-primary);
}
.link-btn:hover{ text-decoration:underline; }

.switch-sm{ width:36px; height:20px; }
.switch-sm .slider:before{ width:14px; height:14px; }
.switch-sm input:checked + .slider:before{ transform: translateX(16px); }
body.no-watermark .fx-logo, body.no-watermark .fx-logo-glow, body.no-watermark .fx-shine{ display:none; }

.placed{ transform-origin: top left !important; }
#compass-bar.placed{ transform: translate(var(--ex), var(--ey)) scale(var(--k-scale)) !important; }

.minimap-labels{ transition: opacity .3s ease; }
body.street-top .minimap-labels{ opacity:0; }

.compass-street{
  display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:7px;
  text-align:center; white-space:nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5);
}
.cs-main{ font-size:14px; font-weight:700; letter-spacing:.4px; color: var(--k-text); }
.cs-sub{ font-size:10.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color: var(--k-text-dim); }
.cs-sub b{ color: var(--k-primary); font-weight:800; }
.cs-main:empty, .cs-sub:empty{ display:none; }

#vignette{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(ellipse 75% 70% at center, transparent 55%, rgba(255,20,60,.32) 82%, rgba(160,0,30,.62) 100%);
  transition: opacity .6s ease;
}
body.hurt #vignette{ animation: heartbeat var(--beat, 1.2s) ease-in-out infinite; }
@keyframes heartbeat{
  0%,100%{ opacity:.3; }
  12%{ opacity:.95; }
  26%{ opacity:.45; }
  40%{ opacity:.8; }
}

#ammo-panel{
  position:absolute;
  right: calc(36px + var(--sz-x) + var(--uw-inset));
  bottom: calc(34px + var(--sz-y) + var(--veh-stack, 0px));
  transform: translate(var(--ex), var(--ey)) scale(var(--k-scale)); transform-origin: bottom right;
  transition: bottom .35s cubic-bezier(.3,.8,.3,1), opacity .25s ease;
}
#ammo-panel.hidden{ display:none; }
#ammo-panel.placed{ transition:none; }
.ammo-card{
  min-width:178px; padding:11px 15px 12px; border-radius:14px;
  background: linear-gradient(170deg, rgba(22,18,32,.9), rgba(8,8,12,.85));
  border:1px solid var(--k-primary-soft);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 18px -6px var(--k-primary-soft);
  display:flex; flex-direction:column; gap:6px;
}
.ammo-head{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color: var(--k-text-dim); }
.ammo-head svg{ width:15px; height:15px; color: var(--k-primary); }
.ammo-count{ font-size:32px; font-weight:800; line-height:1; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px var(--k-primary-soft); }
.ammo-count small{ font-size:15px; font-weight:700; color: var(--k-text-dim); margin-left:4px; text-shadow:none; }
.ammo-bar{ height:4px; border-radius:3px; background: rgba(255,255,255,.08); overflow:hidden; }
.ammo-bar i{ display:block; height:100%; width:0; border-radius:3px; background: var(--k-primary); box-shadow: 0 0 8px var(--k-primary); transition: width .2s ease; }
#ammo-panel.low .ammo-count{ color: var(--k-danger); text-shadow: 0 0 14px rgba(255,59,92,.5); }
#ammo-panel.low .ammo-bar i{ background: var(--k-danger); box-shadow: 0 0 8px var(--k-danger); }
#ammo-panel.no-clip .ammo-bar{ display:none; }
body.style-cyber .ammo-card{ border-radius:0; clip-path: polygon(10% 0,100% 0,100% 80%,90% 100%,0 100%,0 20%); }
body.style-glass .ammo-card{ background: rgba(24,20,34,.32); backdrop-filter: blur(16px) saturate(140%); border-color: rgba(255,255,255,.14); }
body.style-minimal .ammo-card{ background: rgba(10,10,15,.45); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; border-color:transparent; }
body.style-minimal .ammo-count, body.style-minimal .ammo-bar i{ text-shadow:none; box-shadow:none; }

.ico-ev, .alt-row{ display:none; }
#vehicle-panel.is-ev .ico-gas{ display:none; }
#vehicle-panel.is-ev .ico-ev{ display:block; }
#vehicle-panel.is-ev .ico-fuel{ color:#3bf0ff; }
#vehicle-panel.is-ev .fuel-fg{ stroke:#3bf0ff; filter: drop-shadow(0 0 4px rgba(59,240,255,.5)); }
#vehicle-panel.is-ev .fuel-fg.bad{ stroke: var(--k-danger); }
.alt-row{ font-size:10px; font-weight:700; letter-spacing:2px; color: var(--k-text-dim); }
.alt-row b{ font-size:14px; color: var(--k-text); letter-spacing:.5px; margin:0 2px; font-variant-numeric: tabular-nums; }
#vehicle-panel.mode-air .alt-row{ display:block; }
#vehicle-panel.mode-air .rpm-bar,
#vehicle-panel.mode-air .gear-text, #vehicle-panel.mode-air .ring-gear, #vehicle-panel.mode-air .dg-gear,
#vehicle-panel.mode-sea .gear-text, #vehicle-panel.mode-sea .ring-gear, #vehicle-panel.mode-sea .dg-gear,
#vehicle-panel.mode-bike .gear-text, #vehicle-panel.mode-bike .ring-gear, #vehicle-panel.mode-bike .dg-gear,
#vehicle-panel.mode-bike .rpm-bar,
#vehicle-panel.mode-bike [data-el="fuel"], #vehicle-panel.mode-bike [data-el="engine"]{ display:none !important; }
.gauge-ring-wrap .alt-row{ margin-top:4px; }

.text-input{
  width:100%; min-width:0; padding:9px 11px; border-radius:9px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color: var(--k-text); font-family: var(--k-font); font-size:13px; font-weight:600; letter-spacing:.3px;
  outline:none; user-select:text;
}
.text-input:focus{ border-color: var(--k-primary); box-shadow: 0 0 0 3px var(--k-primary-soft); }
.code-box{ display:flex; gap:8px; }
.code-box .btn{ flex-shrink:0; padding:9px 16px; }
.form-msg{ display:block; min-height:15px; margin-top:7px; font-size:11.5px; font-weight:600; color: var(--k-text-dim); }
.form-msg.ok{ color:#2bd97a; }
.form-msg.err{ color: var(--k-danger); }

.preset-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:9px; }
.preset-card{
  position:relative; display:flex; flex-direction:column; gap:9px; padding:9px; border-radius:13px; cursor:pointer;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07); text-align:left; font-family: var(--k-font); color: var(--k-text);
  transition: border-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.preset-card:hover{ border-color: var(--pc); box-shadow: 0 0 20px -8px var(--pc); }
.preset-card:active{ transform: scale(.98); }
.preset-card.applied{ border-color: var(--pc); box-shadow: 0 0 22px -6px var(--pc); }
.preset-swatch{
  position:relative; height:54px; border-radius:9px; overflow:hidden;
  background: radial-gradient(70% 120% at 95% 0%, var(--pa, var(--pc)), transparent 65%), radial-gradient(80% 120% at 45% 0%, var(--pc), transparent 70%), var(--pb, #0a0a0f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.preset-swatch::before{
  content:""; position:absolute; left:12px; bottom:10px; width:30px; height:30px; border-radius:50%;
  border:3px solid var(--pc); border-right-color: rgba(255,255,255,.15); transform: rotate(-30deg);
  filter: drop-shadow(0 0 6px var(--pc));
}
.preset-swatch::after{
  content:""; position:absolute; left:54px; right:14px; bottom:16px; height:5px; border-radius:3px;
  background: linear-gradient(90deg, var(--pc), var(--pa, var(--pc)) 65%, rgba(255,255,255,.12) 65%);
}
.preset-name{ font-size:13.5px; font-weight:800; letter-spacing:.4px; padding:0 3px; }
.preset-meta{ font-size:10.5px; font-weight:600; color: var(--k-text-dim); padding:0 3px; text-transform:capitalize; }

#vehicle-panel, #compass-bar, #ammo-panel{ --ex: 0px; --ey: 0px; }
#vehicle-panel.entering{ animation: enterUp .6s cubic-bezier(.2,.9,.3,1.12) both; }
#vehicle-panel.leaving{ animation: leaveDown .3s ease forwards; pointer-events:none; }
#compass-bar.entering{ animation: enterDown .55s cubic-bezier(.2,.9,.3,1.12) both; }
#compass-bar.leaving{ animation: leaveUp .3s ease forwards; }
#ammo-panel.entering{ animation: enterRight .45s cubic-bezier(.2,.9,.3,1.12) both; }
#ammo-panel.leaving{ animation: leaveRight .28s ease forwards; }
.toast.entering{ animation: enterRight .4s cubic-bezier(.2,.9,.3,1.12) both; }
.toast.leaving{ animation: leaveRight .35s ease forwards; }
@keyframes enterUp{ from{ opacity:0; --ey:28px; } to{ opacity:1; --ey:0px; } }
@keyframes leaveDown{ to{ opacity:0; --ey:20px; } }
@keyframes enterDown{ from{ opacity:0; --ey:-26px; } to{ opacity:1; --ey:0px; } }
@keyframes leaveUp{ to{ opacity:0; --ey:-18px; } }
@keyframes enterRight{ from{ opacity:0; --ex:34px; } to{ opacity:1; --ex:0px; } }
@keyframes leaveRight{ to{ opacity:0; --ex:26px; } }

[data-gear]{ display:inline-block; }
[data-gear].pop{ animation: gearPop .42s cubic-bezier(.2,.9,.3,1.3); }
@keyframes gearPop{
  0%{ transform: scale(1.7); color: var(--k-accent); text-shadow: 0 0 14px var(--k-accent); }
  100%{ transform: scale(1); }
}
#vehicle-panel.limiter .rpm-seg.lit{ animation: limiter .11s steps(2) infinite; }
#vehicle-panel.limiter .spd{ text-shadow: 0 0 18px rgba(255,59,92,.55); }
@keyframes limiter{ 50%{ opacity:.25; } }

.heat-fg{ stroke: url(#heat-grad); opacity: var(--heat, 0); transition: opacity .25s ease; filter: drop-shadow(0 0 8px rgba(255,90,60,.7)); }
.heat-fg.ring-heat{ stroke: url(#heat-grad-ring); }
.stop-h1{ stop-color:#ffb03b; }
.stop-h2{ stop-color:#ff3b5c; }
.gauge-arc-wrap::after, .ring-box::after{
  content:""; position:absolute; inset:-20px; pointer-events:none; border-radius:50%;
  background: radial-gradient(circle at 50% 55%, rgba(255,70,60,.28), transparent 62%);
  opacity: var(--heat, 0); transition: opacity .3s ease;
}
.needle-dot{ fill:#fff; filter: drop-shadow(0 0 4px var(--k-accent)) drop-shadow(0 0 8px var(--k-primary)); }
.spd, .dg-val{ text-shadow: 0 0 18px var(--k-primary-soft), 0 0 30px var(--k-accent-soft); }
.ammo-bar i{ background: linear-gradient(90deg, var(--k-primary), var(--k-accent)); }

.mm-sweep, .mm-rose{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
#minimap-frame.minimap-circle .mm-sweep, #minimap-frame.minimap-circle .mm-rose{ border-radius:50%; }
#minimap-frame.minimap-square .mm-sweep{ border-radius:10px; }
.mm-sweep{
  inset:-1px; padding:3px;
  background: conic-gradient(from var(--sa), transparent 0 70%, var(--k-accent) 88%, #fff 92%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.75; animation: sweepSpin 7s linear infinite;
}
@keyframes sweepSpin{ to{ --sa: 360deg; }
}
.mm-ticks{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mm-ticks line{ stroke: rgba(255,255,255,.35); stroke-width:1.2; stroke-linecap:round; }
.mm-ticks line.major{ stroke: var(--k-primary); stroke-width:2.2; }
.mm-rose{ transition: none; will-change: transform; }
.mm-north{
  position:absolute; left:50%; top:-11px; transform: translateX(-50%);
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--k-primary), var(--k-accent));
  box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 10px var(--k-primary-soft);
}
#minimap-frame.minimap-square .mm-ticks{ display:none; }
body.style-minimal .mm-sweep{ display:none; }
body.style-minimal .mm-north{ box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
body.anim-off .mm-sweep{ animation:none; opacity:0; }

body.panels-soft #vitals-panel, body.panels-solid #vitals-panel,
body.panels-soft #vehicle-panel, body.panels-solid #vehicle-panel{
  padding:12px 14px; border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
body.panels-soft #vitals-panel, body.panels-soft #vehicle-panel{
  background: linear-gradient(180deg, rgba(14,12,22,.5), rgba(10,10,15,.38));
  backdrop-filter: blur(10px) saturate(130%);
}
body.panels-solid #vitals-panel, body.panels-solid #vehicle-panel{
  background: linear-gradient(180deg, rgba(16,14,24,.94), rgba(10,10,15,.9));
}
body.style-cyber.panels-soft #vitals-panel, body.style-cyber.panels-solid #vitals-panel,
body.style-cyber.panels-soft #vehicle-panel, body.style-cyber.panels-solid #vehicle-panel{
  border-radius:0; clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}

#toasts{
  position:absolute; top: calc(26px + var(--sz-y)); right: calc(26px + var(--sz-x) + var(--uw-inset));
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none;
  transform: scale(var(--k-scale)); transform-origin: top right;
}
.toast{
  --ex: 0px; --ey: 0px; transform: translate(var(--ex), var(--ey));
  display:flex; align-items:center; gap:11px; min-width:230px; max-width:320px;
  padding:10px 14px 10px 10px; border-radius:13px;
  background: linear-gradient(170deg, rgba(22,18,32,.92), rgba(8,8,12,.88));
  border:1px solid rgba(255,255,255,.07); border-left:3px solid var(--tc);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 20px -8px var(--tc);
  font-size:13px; font-weight:700; color: var(--k-text);
}
.toast-ico{
  width:30px; height:30px; flex-shrink:0; border-radius:9px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background: var(--tc); box-shadow: 0 4px 12px -4px var(--tc);
}
.toast-ico svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
body.style-cyber .toast{ border-radius:0; clip-path: polygon(10px 0,100% 0,100% 100%,0 100%,0 10px); }
body.style-glass .toast{ background: rgba(24,20,34,.35); backdrop-filter: blur(16px) saturate(140%); }
body.style-minimal .toast{ background: rgba(10,10,15,.6); box-shadow:none; }

.mm-clip{ position:absolute; inset:2px; overflow:hidden; border-radius:50%; background:rgba(0,0,0,.35); }
.mm-clip canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#minimap-frame.minimap-square .mm-clip{ border-radius:8px; }
body.map-gta .mm-clip{ display:none; }
#kh-pay{ position:fixed; right:2.2vw; top:34vh; display:flex; align-items:center; gap:12px; padding:10px 18px 10px 10px; border-radius:14px; background:var(--k-bg-soft); border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px var(--k-primary-soft); font-family:var(--k-font); color:var(--k-text); opacity:0; transform:translateX(24px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.9,.25,1); pointer-events:none; z-index:60; backdrop-filter:blur(6px); }
#kh-pay.show{ opacity:1; transform:none; }
#kh-pay .kp-icon{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--k-primary-soft); }
#kh-pay .kp-icon svg{ width:20px; height:20px; fill:none; stroke:var(--k-primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#kh-pay .kp-amount{ font-size:22px; font-weight:700; line-height:1; color:#47d98a; letter-spacing:.3px; }
#kh-pay .kp-sub{ display:flex; align-items:center; gap:7px; margin-top:4px; font-size:13px; font-weight:600; color:var(--k-text-dim); letter-spacing:.4px; }
#kh-pay .kp-dot{ width:3px; height:3px; border-radius:50%; background:var(--k-text-dim); opacity:.6; }
#kh-pay .kp-title{ text-transform:uppercase; }
body.hud-off #kh-pay{ display:none; }

body.paused #hud-root{ visibility:hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
body.paused #hud-root *, body.hud-off #hud-root *{ animation-play-state: paused !important; }
.spd-fg{ filter: drop-shadow(0 0 5px var(--k-primary-soft)); }
.needle-dot{ filter: drop-shadow(0 0 5px var(--k-primary)); }