/* Layout: két oszlop – bal oldalon a kérdőív szekciói, jobbra ragadós összegző panel; mobilon egymás alatt. */
/* Sybell arculat – sötét (alap) és világos téma, data-theme a <html>-en (assets/theme.js). */
:root{
  --f-display:"Inter Tight","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --r:14px; --r-sm:10px;
  --cta:#fcd535; --cta-fg:#17112b; --cta-hover:#ffe066;
  /* sötét */
  --bg:#0e0920; --bg-glow1:rgba(124,58,237,.38); --bg-glow2:rgba(192,38,211,.18);
  --surface:#1a1336; --surface-2:#130d2a; --glass:rgba(38,27,78,.72);
  --fg:#f3f0ff; --muted:#a69cc8; --line:#2f2558; --line-strong:#43357a;
  --accent:#a78bfa; --accent-strong:#7c3aed; --accent-soft:#2a1d58;
  --tab-on:#ffffff; --tab-on-fg:#17112b;
  --w3:#ff8a95; --w3s:#3b1630; --w2:#fbbf24; --w2s:#3a2a10; --w1:#93b4ff; --w1s:#1d2452;
  --ok:#4ade80; --oks:#12301f;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f6f3ff; --bg-glow1:rgba(167,139,250,.30); --bg-glow2:rgba(244,114,182,.12);
  --surface:#ffffff; --surface-2:#f8f6fe; --glass:rgba(255,255,255,.8);
  --fg:#17112b; --muted:#6b6489; --line:#e7e2f6; --line-strong:#d4cbef;
  --accent:#6d28d9; --accent-strong:#6d28d9; --accent-soft:#efe9ff;
  --tab-on:#111018; --tab-on-fg:#ffffff;
  --w3:#c0263a; --w3s:#fde8ec; --w2:#a15c00; --w2s:#fff3d6; --w1:#2f5bd3; --w1s:#e8eeff;
  --ok:#15803d; --oks:#e3f6ea;
  --shadow:0 8px 24px rgba(76,29,149,.08);
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:14.5px/1.5 var(--f-body);margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-inline:18px;padding-block:28px 64px}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
h1{font-size:clamp(24px,3.6vw,32px)}
h2{font-size:18px}
h3{font-size:15px}
.eyebrow{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
button,input,textarea,select{font:inherit;color:inherit}
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;justify-content:space-between;margin-bottom:18px}
.top-l{display:grid;gap:4px}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:3px}
.tabs button{border:0;background:none;padding:7px 14px;border-radius:6px;cursor:pointer;font-weight:500}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--surface)}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:18px}
.bar label{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
select,input[type=text],textarea{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px;min-width:0}
textarea{width:100%;resize:vertical;min-height:38px}
input[type=text]{flex:1 1 180px}
select:focus,input:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 12px;cursor:pointer;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.btn:disabled{opacity:.5;cursor:default}
.btn.danger{color:var(--w3)}
.btn.danger:hover{border-color:var(--w3)}
.btn.danger.armed{background:var(--w3);border-color:var(--w3);color:var(--surface)}
.status{font-size:12.5px;color:var(--muted)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.sec{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:16px;overflow:hidden}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.sec-h .cnt{font:500 12px var(--f-mono);color:var(--muted)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .q{font-weight:600}
.item .q small{font:500 11px var(--f-mono);color:var(--muted);margin-right:6px}
.item textarea{grid-column:1/-1}
.item.trait{grid-template-columns:minmax(0,1fr) auto;padding:8px 16px}
.item.trait .q{font-weight:500}
.wt{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;align-self:start}
.wt button{border:0;background:var(--surface);padding:4px 9px;cursor:pointer;font:600 12.5px var(--f-mono);min-width:36px;color:var(--muted)}
.wt button+button{border-left:1px solid var(--line)}
.wt button[aria-pressed="true"][data-w="0"]{background:var(--bg);color:var(--fg)}
.wt button[aria-pressed="true"][data-w="1"]{background:var(--w1s);color:var(--w1)}
.wt button[aria-pressed="true"][data-w="2"]{background:var(--w2s);color:var(--w2)}
.wt button[aria-pressed="true"][data-w="3"]{background:var(--w3s);color:var(--w3)}
.note{font-size:12.5px;color:var(--muted);padding:10px 16px;background:var(--bg)}
.side{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));display:grid;gap:14px;max-height:calc(100vh - 24px);overflow:auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;gap:10px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kpi{border-radius:8px;padding:8px;text-align:center;background:var(--bg)}
.kpi b{display:block;font:600 20px var(--f-display);font-variant-numeric:tabular-nums}
.kpi span{font:500 11px var(--f-mono);color:var(--muted)}
.kpi.k3 b{color:var(--w3)} .kpi.k2 b{color:var(--w2)} .kpi.k1 b{color:var(--w1)}
.sum h3{font-size:13px;display:flex;gap:6px;align-items:center}
.sum ul{margin:4px 0 0;padding-left:18px;display:grid;gap:3px;font-size:13.5px}
.sum li span{color:var(--muted)}
.pill{font:600 11px var(--f-mono);padding:1px 6px;border-radius:4px}
.p3{background:var(--w3s);color:var(--w3)} .p2{background:var(--w2s);color:var(--w2)} .p1{background:var(--w1s);color:var(--w1)}
.empty{font-size:13px;color:var(--muted)}
.out{white-space:pre-wrap;font-size:13.5px;background:var(--bg);border-radius:8px;padding:10px 12px;max-height:360px;overflow:auto}
.row{display:flex;flex-wrap:wrap;gap:8px}
/* candidate */
.cand-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:center}
.cand-item:last-child{border-bottom:0}
.cand-item .req{font-size:12.5px;color:var(--muted);grid-column:1/2}
.rt{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.rt button{border:0;background:var(--surface);padding:5px 10px;cursor:pointer;font:500 12.5px var(--f-body);color:var(--muted)}
.rt button+button{border-left:1px solid var(--line)}
.rt button[aria-pressed="true"][data-r="0"]{background:var(--w3s);color:var(--w3)}
.rt button[aria-pressed="true"][data-r="1"]{background:var(--w2s);color:var(--w2)}
.rt button[aria-pressed="true"][data-r="2"]{background:var(--oks);color:var(--ok)}
.score{display:grid;gap:6px}
.score .big{font:700 40px var(--f-display);font-variant-numeric:tabular-nums;line-height:1}
.meter{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:4px}
.verdict{font-weight:600;padding:6px 10px;border-radius:6px;font-size:13.5px}
.v-ok{background:var(--oks);color:var(--ok)} .v-no{background:var(--w3s);color:var(--w3)} .v-mid{background:var(--w2s);color:var(--w2)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
th{font:500 11px var(--f-mono);text-transform:uppercase;color:var(--muted)}
td.n{font-variant-numeric:tabular-nums;text-align:right}
tr.click{cursor:pointer} tr.click:hover td{background:var(--bg)}
[hidden]{display:none!important}
@media (max-width:900px){.grid{grid-template-columns:1fr}.side{position:static;max-height:none}}
@media (max-width:520px){.kpis{grid-template-columns:repeat(2,1fr)}.item,.cand-item{grid-template-columns:1fr}}

/* ---------- self-hosted kiegészítések ---------- */
.userbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.userbar b{color:var(--fg);font-weight:600}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:end}
.form-grid label{display:grid;gap:4px;font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.form-grid input,.form-grid select{width:100%}
input[type=email],input[type=password],input[type=url]{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px;min-width:0}
.badge-role{font:600 11px var(--f-mono);padding:2px 7px;border-radius:4px;background:var(--accent-soft);color:var(--accent)}
.badge-off{font:600 11px var(--f-mono);padding:2px 7px;border-radius:4px;background:var(--w3s);color:var(--w3)}
.msg{font-size:13px;padding:8px 10px;border-radius:6px}
.msg.ok{background:var(--oks);color:var(--ok)} .msg.err{background:var(--w3s);color:var(--w3)}
.auth{max-width:400px;margin:10vh auto;padding-inline:18px}
.auth .card{gap:14px}
.auth label{display:grid;gap:4px;font-size:13px;font-weight:500}
.auth input{width:100%}
.single{max-width:900px}
td .row{gap:6px}
.form-grid input[type=checkbox]{width:auto}
.form-grid label.check{display:flex;gap:8px;align-items:center;text-transform:none;font:500 13px var(--f-body);color:var(--fg);align-self:center}

/* ---------- Performia tesztek ---------- */
details.tests>summary{cursor:pointer;list-style:none}
details.tests>summary::-webkit-details-marker{display:none}
details.tests>summary h2::before{content:"▸ ";color:var(--muted)}
details.tests[open]>summary h2::before{content:"▾ "}
.tests-body{padding:14px 16px;display:grid;gap:12px}
.tests-body h3{margin-top:6px}
.tests-body label.full{display:grid;gap:4px;font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tests-body textarea{font:inherit;text-transform:none;letter-spacing:0;color:var(--fg)}
.execu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.execu-grid label{display:grid;gap:3px;font:500 12px var(--f-body);color:var(--muted)}
.execu-grid input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.execu-chart{display:grid;gap:4px;margin-top:4px}
.ec-row{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;gap:8px;align-items:center;font-size:12.5px}
.ec-track{position:relative;height:14px;background:var(--bg);border-radius:3px}
.ec-track i{position:absolute;top:0;bottom:0;border-radius:3px}
.ec-track .z{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--line)}
.ec-track .z0{background:var(--muted)}
.ec-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.b-good{background:var(--ok)} .b-mid{background:var(--w2)} .b-bad{background:var(--w3)}
.proposal{background:var(--bg)}
.proposal table{font-size:13px}
.bg-grid textarea{min-height:34px}
@media (max-width:520px){.ec-row{grid-template-columns:100px minmax(0,1fr) 40px}}


/* ---------- Sybell arculat ---------- */
html{background:var(--bg)}
body{min-height:100vh;background:
  radial-gradient(900px 520px at 88% -8%,var(--bg-glow1),transparent 70%),
  radial-gradient(700px 480px at -10% 30%,var(--bg-glow2),transparent 70%),var(--bg);background-attachment:fixed;
  font-size:14.5px;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(26px,3.8vw,36px);letter-spacing:-.03em}
.eyebrow{font:500 13px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted);display:flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;gap:7px;font:700 19px var(--f-display);letter-spacing:-.03em;color:var(--fg)}
.brand-dot{width:22px;height:22px;border-radius:50%;background:var(--fg);display:grid;place-items:center}
.brand-dot::after{content:"";width:12px;height:3px;border-radius:2px;background:var(--bg);transform:rotate(-40deg)}
.top{align-items:center;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;box-shadow:var(--shadow)}
.tabs{border-radius:999px;padding:4px;background:var(--surface-2);box-shadow:none}
.tabs button{border-radius:999px;padding:8px 18px;color:var(--muted);transition:background .15s,color .15s}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected="true"]{background:var(--tab-on);color:var(--tab-on-fg)}
.bar,.sec,.card{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow)}
.bar label,.form-grid label,.tests-body label.full,th,.sec-h .cnt,.kpi span,.pill,.badge-role,.badge-off,.item .q small{font-family:var(--f-body);text-transform:none;letter-spacing:0}
.bar label,.form-grid label,.tests-body label.full{font-size:12.5px;font-weight:500;color:var(--muted)}
th{font-size:12px;font-weight:600}
select,input[type=text],input[type=number],input[type=email],input[type=password],input[type=url],textarea,.execu-grid input{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:9px 11px;color:var(--fg)}
select:focus,input:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.btn{border-radius:var(--r-sm);padding:9px 16px;background:transparent;border-color:var(--line-strong);font-weight:600}
.btn:hover{border-color:var(--accent);color:var(--fg)}
.btn.primary{background:var(--cta);border-color:var(--cta);color:var(--cta-fg);box-shadow:0 6px 18px rgba(252,213,53,.22)}
.btn.primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.sec-h{padding:14px 18px}
.item,.cand-item{padding:12px 18px}
.note,.out,.kpi,.proposal,.meter,.ec-track{background:var(--surface-2)}
.wt,.rt{border-radius:var(--r-sm);border-color:var(--line-strong)}
.wt button,.rt button{background:var(--surface-2)}
.wt button+button,.rt button+button{border-left-color:var(--line-strong)}
.meter{height:10px;border-radius:999px}
.meter i{border-radius:999px;background:linear-gradient(90deg,var(--accent-strong),var(--accent))}
.score .big{font-size:48px;letter-spacing:-.04em}
.verdict{border-radius:var(--r-sm)}
.pill{border-radius:999px;padding:2px 8px}
.badge-role,.badge-off{border-radius:999px;padding:2px 9px}
.linkbtn{color:var(--accent);text-decoration:none;font-weight:500}
.linkbtn:hover{text-decoration:underline}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--fg);border-radius:999px;padding:4px 11px;cursor:pointer;font:500 12.5px var(--f-body)}
.theme-toggle:hover{border-color:var(--accent)}
.auth .card{padding:28px;background:var(--glass);backdrop-filter:blur(14px)}
.auth .btn.primary,.auth button[type=submit]{width:100%}
tr.click:hover td{background:var(--accent-soft)}
.auth{margin:0 auto;padding-block:12vh 40px}
.auth-form{display:grid;gap:16px}
.auth label{gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.auth input{padding:12px 14px;font-size:15px}
.auth .btn.primary{padding:12px 16px;font-size:15px;margin-top:4px}
.bg-grid textarea{min-height:58px}