/* Watt és Valóság – Akkumulátor szimulátor stílus */

:root{
  --bg:#0B1620;
  --bg2:#0F1E2B;
  --panel:#13283A;
  --panel2:#102234;
  --navy:#0D2137;
  --amber:#EA9B0C;
  --amber-soft:#F5B53D;
  --blue:#4A90D9;
  --green:#19A35A;
  --red:#D9534F;
  --ink:#E8EEF3;
  --muted:#8AA0B2;
  --line:rgba(138,160,178,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(234,155,12,.10), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(74,144,217,.10), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:'Hanken Grotesk',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'DM Mono',monospace;letter-spacing:.02em}
.dim{color:var(--muted)}
.hidden{display:none!important}
.nomargin{margin:0!important}

/* topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;border-bottom:1px solid var(--line);
  background:rgba(11,22,32,.6);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;align-items:center;gap:14px}
.brand .bolt{font-size:1.6rem;filter:drop-shadow(0 0 10px rgba(234,155,12,.5))}
.brandname{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.15rem}
.brandsub{font-size:.72rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}
.brandtag{font-size:.74rem;color:var(--muted);letter-spacing:.12em}

/* layout */
.layout{
  display:grid;grid-template-columns:320px 1fr;gap:22px;
  max-width:1320px;margin:0 auto;padding:24px 28px 60px;
}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:16px;padding:22px;
}

/* controls */
.eyebrow{
  font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);
  margin:18px 0 12px;display:flex;align-items:center;gap:10px;
}
.eyebrow:first-child{margin-top:0}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line)}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fld>span{font-size:.82rem;color:var(--muted)}
.fld select,.fld input{
  background:var(--navy);border:1px solid var(--line);border-radius:9px;
  color:var(--ink);font-family:'DM Mono',monospace;font-size:.92rem;
  padding:10px 12px;outline:none;transition:border-color .2s,box-shadow .2s;
}
.fld select:focus,.fld input:focus{
  border-color:var(--amber);box-shadow:0 0 0 3px rgba(234,155,12,.15);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.manual{border-left:2px solid rgba(234,155,12,.4);padding-left:12px;margin:4px 0 8px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.kpi{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:14px;padding:16px 16px;position:relative;overflow:hidden;
}
.kpi::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--c)}
.kpi-label{font-size:.7rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.kpi-val{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.7rem;margin-top:6px;line-height:1}
.kpi-unit{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--muted);margin-left:4px;font-weight:400}

/* chart */
.chartwrap{padding:18px 18px 10px}
.charthead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
#chart{width:100%;height:440px}
.legendnote{font-size:.72rem;letter-spacing:.1em}

.disclaimer{margin-top:14px;font-size:.74rem;color:var(--muted);line-height:1.5}

/* responsive */
@media(max-width:920px){
  .layout{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .topbar .brandtag{display:none}
}
@media(max-width:520px){
  .kpis{grid-template-columns:1fr 1fr}
  #chart{height:360px}
}