:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --muted:#eef1f6;
  --text:#0c1222;
  --text-muted:#5c6477;
  --brand:#ff6a5f;
  --brand-2:#ffb4ad;
  --ok:#2FDBA7;
  --warn:#ffd166;
  --danger:#ff7a7a;
  --ring:#82aaff;
  --chip:#1b2742;
  --chip-text:#cad4ff;
  --shadow: 0 8px 28px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.05);
}
[data-theme="dark"]{
  --bg:#0e1525;
  --panel:#121a2b;
  --muted:#162236;
  --text:#edf2ff;
  --text-muted:#9fb0ce;
  --brand:#ff8a80;
  --brand-2:#ffd1cc;
  --ok:#2FDBA7;
  --warn:#ffd166;
  --danger:#ff7a7a;
  --ring:#82aaff;
  --chip:#263659;
  --chip-text:#d6e0ff;
  --shadow: 0 8px 28px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, 
Inter, Arial;
  color:var(--text); background:var(--bg);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 20px; background:var(--panel); 
box-shadow:var(--shadow);
}
.brand{font-weight:700}
.top-actions{display:flex; gap:8px}

.container{
  display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:20px;
  padding:20px; max-width:1200px; margin:0 auto;
}
@media (max-width:1024px){ .container{grid-template-columns:1fr} 
.right{order:-1} }

.panel{
  background:var(--panel); border-radius:16px; padding:16px; 
box-shadow:var(--shadow);
}
.panel h2{margin:0 0 10px 0; font-size:18px}

.offers{display:grid; gap:12px}
.offer{border:1px solid var(--muted); border-radius:12px; padding:12px; 
cursor:pointer}
.offer[aria-selected="true"]{outline:2px solid var(--ring)}
.offer h3{margin:0 0 6px 0}
.offer .muted{margin:0}
.offer .details{margin-top:12px}
.offer .details.collapsed{display:none}

.muted{color:var(--text-muted)}
.choices{display:flex; gap:8px; align-items:flex-start; 
flex-wrap:nowrap}
.choices.wrap{flex-wrap:wrap}
.choices.small .choice{padding:6px 10px; font-size:14px}
.choice{
  border:1px solid var(--muted); background:transparent; color:inherit; 
padding:8px 12px; border-radius:999px;
  cursor:pointer; transition:all .15s ease; user-select:none; 
display:inline-flex; align-items:center; gap:8px;
}
.choice[aria-pressed="true"]{background:var(--chip); 
color:var(--chip-text); border-color:transparent}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; 
background:var(--muted); font-size:12px}

.btn{border:1px solid var(--muted); background:transparent; 
color:inherit; padding:8px 12px; border-radius:10px; cursor:pointer}
.btn.ghost{background:transparent}
.btn:focus-visible, .choice:focus-visible{outline:2px solid var(--ring); 
outline-offset:2px}

.speed{margin-top:8px}
.speed label{font-size:14px; color:var(--text-muted)}
.speed-row{display:flex; align-items:center; gap:10px}
.speed-row .price{margin-left:auto}

#gauge{margin-top:8px}
.arc{fill:none; stroke:url(#grad); stroke-width:12; opacity:.8}
#grad stop:first-child{stop-color:var(--brand)}
#grad stop:last-child{stop-color:var(--brand-2)}
.needle{stroke:var(--text); stroke-width:3}
.hub{fill:var(--text)}
.caption{fill:var(--text-muted); font-size:12px}

.picons{margin-top:10px}
.picons-bar{display:flex; gap:10px; align-items:center}
.picon-grid{
  display:grid; grid-template-columns:repeat(auto-fill, 
minmax(72px,1fr)); gap:8px; margin-top:10px;
}
.picon{
  background:var(--muted); border-radius:12px; height:56px; 
display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.picon img{max-width:90%; max-height:80%}
.picon .hd{position:absolute; bottom:6px; right:6px; font-size:10px; 
padding:2px 6px; border-radius:999px; background:#0008; color:#fff}
.picon.fallback{font-weight:700; color:var(--text-muted)}

.addon{margin-top:8px}
.addon-title{font-weight:600; margin-bottom:6px}
.counter{display:inline-flex; align-items:center; gap:10px; border:1px 
solid var(--muted); border-radius:999px; padding:4px 8px}
.counter button{border:none; background:var(--muted); width:26px; 
height:26px; border-radius:999px; cursor:pointer}

.right .panel.sticky{position:sticky; top:84px}
.summary{list-style:none; margin:0; padding:0}
.summary li{display:flex; gap:8px; align-items:center; padding:6px 0; 
border-bottom:1px dashed var(--muted)}
.summary li span{width:160px; color:var(--text-muted)}
.total{margin-top:12px; font-size:20px}

.sky{width:100%; height:240px; display:block; border-radius:12px; 
background:radial-gradient(120% 90% at 50% 10%, #1a2540, #0e1525)}

.top-actions .btn{min-width:120px}

.port-pill{
  margin-left:auto; padding:6px 10px; border-radius:999px; 
background:var(--chip); color:var(--chip-text);
  cursor:pointer; user-select:none; white-space:nowrap; border:1px solid 
transparent;
}
.port-pill[data-port="port"]{background:#00897b; color:#eafff9}
.port-pill:hover{filter:brightness(1.05)}

#toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#000; color:#fff; padding:10px 14px; border-radius:10px; 
box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
#toast.show{opacity:0.95}