/* AI Headz ügyfélportál – az admin tervezési alapja (lilás szürkeskála, egy hangsúlyszín, 8/12/16 lekerekítés) */
:root {
  --g-0:#fff; --g-25:#FBFBFD; --g-50:#F6F6FA; --g-100:#EEEDF4; --g-200:#E2E0EC; --g-300:#C9C6D9; --g-400:#A9A5BF; --g-500:#8A86A3; --g-600:#66627F; --g-800:#2E2A4A; --g-900:#17123A;
  --accent:#4ECDC4; --accent-ink:#13756E; --accent-soft:#E9F8F7; --brand:#1B0B5C; --violet:#5B3FD1; --violet-soft:#EFEBFD;
  --ok:#1E9E6A; --ok-soft:#E6F6EE; --warn:#B86E00; --warn-soft:#FFF5E2; --bad:#C8343A; --bad-soft:#FDECEC;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(23,18,58,.05); --sh-2:0 1px 2px rgba(23,18,58,.04),0 4px 16px rgba(23,18,58,.05); --sh-3:0 12px 32px rgba(23,18,58,.14);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --display:'Space Grotesk',var(--font);
  --tc:#5B3FD1; --side:248px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--g-50); color:var(--g-900); font:15px/1.55 var(--font); -webkit-font-smoothing:antialiased; }
button, input, textarea, select { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--violet); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
svg.i { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
h1, h2, h3 { font-family:var(--display); letter-spacing:-.01em; margin:0; }
.muted { color:var(--g-500); }
.hide { display:none !important; }

/* gombok, mezők */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 16px; border-radius:var(--r-sm); border:1px solid var(--g-200); background:var(--g-0); color:var(--g-900); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }
.btn:hover { border-color:var(--g-300); background:var(--g-25); }
.btn.pri { background:var(--g-900); border-color:var(--g-900); color:#fff; }
.btn.pri:hover { background:var(--g-800); }
.btn.acc { background:var(--accent); border-color:var(--accent); color:var(--brand); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--g-600); }
.btn.ghost:hover { background:var(--g-100); }
.btn.sm { min-height:32px; padding:0 12px; font-size:13px; }
.btn.danger { color:var(--bad); }
.btn[disabled] { opacity:.55; cursor:default; }
.fld { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.fld > span { font-size:13px; font-weight:600; color:var(--g-800); }
.fld small { color:var(--g-500); font-size:12.5px; }
.in { width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--g-200); border-radius:var(--r-sm); background:var(--g-0); font-size:15px; }
textarea.in { min-height:96px; resize:vertical; line-height:1.5; }
.in:focus { outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
.chip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--g-100); color:var(--g-600); white-space:nowrap; }
.chip.ok { background:var(--ok-soft); color:var(--ok); } .chip.warn { background:var(--warn-soft); color:var(--warn); } .chip.vio { background:var(--violet-soft); color:var(--violet); } .chip.bad { background:var(--bad-soft); color:var(--bad); }
.err { padding:12px 14px; border-radius:var(--r-md); background:var(--bad-soft); color:var(--bad); font-size:14px; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.empty { text-align:center; padding:36px 16px; color:var(--g-500); }
.empty b { display:block; color:var(--g-800); font-size:15px; margin-bottom:4px; }

/* elrendezés: oldalsáv + tartalom */
.app { min-height:100vh; display:grid; grid-template-columns:var(--side) 1fr; }
.side { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:4px; padding:20px 14px; background:var(--g-0); border-right:1px solid var(--g-200); }
.logo { display:inline-flex; align-items:center; gap:3px; font:700 14px/1 var(--display); letter-spacing:.1em; color:var(--brand); text-decoration:none; padding:4px 8px 18px; }
.logo i { width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block; }
.co { display:flex; align-items:center; gap:10px; padding:10px; margin:0 0 12px; border-radius:var(--r-md); background:var(--g-50); }
.av { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--tc); color:#fff; font:700 13px/1 var(--display); flex:none; }
.co b { display:block; font-size:14px; line-height:1.25; }
.co span { font-size:12px; color:var(--g-500); }
.nav-i { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-sm); color:var(--g-600); text-decoration:none; font-weight:500; font-size:14.5px; border:0; background:none; text-align:left; width:100%; }
.nav-i:hover { background:var(--g-50); color:var(--g-900); }
.nav-i[aria-current=page] { background:var(--violet-soft); color:var(--violet); font-weight:600; }
.nav-i .bdg { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--violet); color:#fff; font-size:11.5px; font-weight:700; display:grid; place-items:center; }
.side .grow { flex:1; }
.me { display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-md); border:1px solid var(--g-200); text-decoration:none; color:inherit; }
.me .av { background:var(--g-100); color:var(--g-800); width:30px; height:30px; border-radius:50%; font-size:12px; }
.me b { font-size:13.5px; display:block; line-height:1.2; } .me span { font-size:12px; color:var(--g-500); }
.main { min-width:0; padding:28px clamp(16px,3.5vw,44px) 60px; }
.page { max-width:1040px; margin:0 auto; }
.ph { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 22px; flex-wrap:wrap; }
.ph h1 { font-size:clamp(24px,3vw,30px); line-height:1.15; }
.ph p { margin:6px 0 0; color:var(--g-600); max-width:640px; }
.back { display:inline-flex; align-items:center; gap:6px; margin:0 0 10px; color:var(--g-600); font-size:14px; font-weight:500; border:0; background:none; padding:4px 0; }
.back:hover { color:var(--g-900); }

/* kártyák */
.card { background:var(--g-0); border:1px solid var(--g-200); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.card + .card { margin-top:16px; }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--g-100); flex-wrap:wrap; }
.card-h h2 { font-size:16.5px; }
.card-b { padding:18px 20px; }
.grid2 { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; align-items:start; }
.grid2 > .card + .card { margin-top:0; }

/* teendők */
.todo { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:0 0 18px; }
.td { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-lg); border:1px solid var(--g-200); background:var(--g-0); text-decoration:none; color:inherit; box-shadow:var(--sh-1); }
.td:hover { border-color:var(--g-300); box-shadow:var(--sh-2); }
.td .ti { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet); flex:none; }
.td.hot .ti { background:var(--warn-soft); color:var(--warn); }
.td b { display:block; font-size:14.5px; } .td span { font-size:13px; color:var(--g-600); }
.td.calm { background:var(--g-25); box-shadow:none; }
.td.calm .ti { background:var(--ok-soft); color:var(--ok); }

/* időszak-váltó */
.seg { display:inline-flex; padding:3px; border-radius:999px; background:var(--g-100); gap:2px; }
.seg button { border:0; background:none; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; color:var(--g-600); }
.seg button[aria-pressed=true] { background:var(--g-0); color:var(--g-900); box-shadow:var(--sh-1); }

/* tölcsér */
.fun { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.fs { position:relative; padding:4px 16px 4px 0; }
.fs + .fs { padding-left:18px; border-left:1px solid var(--g-100); }
.fs .k { font-size:12.5px; color:var(--g-500); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.fs .v { font:700 30px/1.15 var(--display); margin:4px 0 2px; }
.fs .p { font-size:12.5px; color:var(--g-600); }
.fs .p b { color:var(--ok); }
.fs .bar { height:6px; border-radius:6px; background:var(--g-100); margin:10px 0 0; overflow:hidden; }
.fs .bar i { display:block; height:100%; background:var(--tc); border-radius:6px; }
.note { margin:16px 0 0; font-size:12.5px; color:var(--g-500); display:flex; gap:8px; align-items:flex-start; }
.note svg { width:15px; height:15px; margin-top:2px; }

/* heti trend */
.trend { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; align-items:end; height:150px; padding:6px 0 0; }
.tw { display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.tb { width:100%; max-width:34px; display:flex; flex-direction:column-reverse; border-radius:6px 6px 3px 3px; overflow:hidden; background:var(--g-100); min-height:3px; }
.tb i { display:block; } .tb i.a { background:var(--tc); } .tb i.b { background:var(--accent); }
.tw small { font-size:11px; color:var(--g-500); white-space:nowrap; }
.legend { display:flex; gap:14px; font-size:12.5px; color:var(--g-600); margin:12px 0 0; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

/* listák */
.rows { list-style:none; margin:0; padding:0; }
.rows li { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--g-100); }
.rows li:first-child { border-top:0; }
.rows .pi { width:34px; height:34px; border-radius:50%; background:var(--g-100); color:var(--g-800); display:grid; place-items:center; font:700 12.5px/1 var(--display); flex:none; }
.rows .tx { min-width:0; flex:1; }
.rows .tx b { display:block; font-size:14.5px; font-weight:600; }
.rows .tx span { display:block; font-size:13px; color:var(--g-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cats li { justify-content:space-between; }
.cbar { flex:1; height:6px; border-radius:6px; background:var(--g-100); overflow:hidden; margin:0 10px; }
.cbar i { display:block; height:100%; background:var(--violet); }

/* jóváhagyás */
.sets { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.set { padding:18px; display:flex; flex-direction:column; gap:10px; text-align:left; border:1px solid var(--g-200); background:var(--g-0); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.set:hover { border-color:var(--g-300); box-shadow:var(--sh-2); }
.set h3 { font-size:16px; line-height:1.3; }
.set .meta { font-size:13px; color:var(--g-600); display:flex; gap:10px; flex-wrap:wrap; }
.pbar { height:6px; background:var(--g-100); border-radius:6px; overflow:hidden; display:flex; }
.pbar i.ok { background:var(--ok); } .pbar i.ch { background:#F0A43A; }
.frame { width:100%; height:calc(100vh - 150px); min-height:520px; border:1px solid var(--g-200); border-radius:var(--r-lg); background:var(--g-0); display:block; }

/* tudásbázis */
.drop { border:2px dashed var(--g-300); border-radius:var(--r-lg); padding:28px 18px; text-align:center; background:var(--g-25); transition:.15s; }
.drop.over { border-color:var(--violet); background:var(--violet-soft); }
.drop .di { width:46px; height:46px; margin:0 auto 10px; border-radius:14px; display:grid; place-items:center; background:var(--g-0); box-shadow:var(--sh-2); color:var(--violet); }
.drop b { display:block; font-size:15px; margin:0 0 4px; }
.drop p { margin:0 0 14px; font-size:13px; color:var(--g-500); }
.ups { list-style:none; margin:12px 0 0; padding:0; text-align:left; }
.ups li { font-size:13px; padding:6px 0; display:flex; gap:8px; align-items:center; }
.ups .pb { flex:1; height:4px; background:var(--g-200); border-radius:4px; overflow:hidden; } .ups .pb i { display:block; height:100%; background:var(--violet); width:0; transition:width .2s; }
.fi { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--g-50); color:var(--g-600); flex:none; font:700 10px/1 var(--font); letter-spacing:.02em; }
.brief-c { display:flex; gap:16px; align-items:center; }
.ring { width:58px; height:58px; flex:none; position:relative; }
.ring svg { width:58px; height:58px; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:6; } .ring .bg { stroke:var(--g-100); } .ring .fg { stroke:var(--tc); stroke-linecap:round; }
.ring b { position:absolute; inset:0; display:grid; place-items:center; font:700 13px/1 var(--display); }

/* brief */
.steps { display:flex; gap:8px; margin:0 0 18px; }
.steps button { flex:1; border:0; background:none; padding:0; text-align:left; }
.steps i { display:block; height:4px; border-radius:4px; background:var(--g-200); margin:0 0 8px; }
.steps button[aria-current=step] i, .steps button.done i { background:var(--tc); }
.steps span { font-size:12.5px; font-weight:600; color:var(--g-500); }
.steps button[aria-current=step] span { color:var(--g-900); }
.saved { font-size:12.5px; color:var(--g-500); display:inline-flex; gap:6px; align-items:center; }
.foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:6px 0 0; flex-wrap:wrap; }

/* kérések */
.rq { border-top:1px solid var(--g-100); }
.rq:first-child { border-top:0; }
.rq-h { display:flex; align-items:center; gap:12px; padding:14px 20px; width:100%; border:0; background:none; text-align:left; }
.rq-h:hover { background:var(--g-25); }
.rq-h .tx { flex:1; min-width:0; }
.rq-h b { display:block; font-weight:600; font-size:14.5px; }
.rq-h span { font-size:12.5px; color:var(--g-500); }
.rq-h .dot { width:8px; height:8px; border-radius:50%; background:var(--violet); flex:none; }
.rq-b { padding:0 20px 18px 20px; }
.thread { display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
.msg { max-width:86%; padding:10px 13px; border-radius:12px; background:var(--g-50); font-size:14px; white-space:pre-wrap; }
.msg.team { align-self:flex-start; background:var(--violet-soft); }
.msg.client { align-self:flex-end; background:var(--g-100); }
.msg small { display:block; font-size:11.5px; color:var(--g-500); margin:0 0 3px; white-space:normal; }
.add { display:flex; gap:8px; align-items:flex-end; }
.add textarea { min-height:44px; }

/* összekötések */
.cx { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.cx .card { padding:18px; display:flex; flex-direction:column; gap:10px; margin:0; }
.cx .card + .card { margin:0; }
.cx-h { display:flex; align-items:center; gap:12px; }
.cx-h .ti { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--g-50); color:var(--g-800); flex:none; }
.cx-h b { display:block; font-size:15px; } .cx-h span { font-size:12.5px; color:var(--g-500); }
.cx p { margin:0; font-size:13.5px; color:var(--g-600); }
ol.how { margin:0; padding:0 0 0 20px; font-size:13.5px; color:var(--g-800); display:flex; flex-direction:column; gap:6px; }

/* landing oldalak */
.lp-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.lp-top .seg { flex-wrap:wrap; }
.kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 16px; }
.kpi > div { padding:14px 16px; border-radius:var(--r-lg); background:var(--g-0); border:1px solid var(--g-200); box-shadow:var(--sh-1); }
.kpi b { display:block; font:700 26px/1.15 var(--display); }
.kpi span { font-size:12.5px; color:var(--g-500); }
.lpc { display:flex; align-items:flex-end; gap:3px; height:150px; }
.lpc > div { flex:1; height:100%; display:flex; align-items:flex-end; min-width:3px; }
.lpc i { position:relative; display:block; width:100%; border-radius:4px 4px 2px 2px; background:var(--tc); opacity:.8; }
.lpc > div:hover i { opacity:1; }
.lpc em { position:absolute; left:50%; top:-9px; transform:translateX(-50%); min-width:8px; height:8px; border-radius:99px; background:var(--ok); color:#fff; font:700 9px/8px var(--font); font-style:normal; text-align:center; padding:0 2px; }
.lpc-ax { display:flex; justify-content:space-between; font-size:11.5px; color:var(--g-500); margin:6px 0 0; }
.lp-when { text-align:right; flex:none; } .lp-when span { display:block; font-size:13px; color:var(--g-800); } .lp-when small { font-size:12px; color:var(--g-500); }
.dns { padding:14px 0; border-top:1px solid var(--g-100); }
.dns:first-of-type { border-top:0; padding-top:0; }
.dns-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dns-h b { font-size:15px; }
.dns-t { width:100%; margin:10px 0 0; border-collapse:collapse; font-size:13.5px; }
.dns-t th { text-align:left; font-size:12px; color:var(--g-500); font-weight:600; padding:6px 8px; background:var(--g-50); }
.dns-t td { padding:6px 8px; border-bottom:1px solid var(--g-100); white-space:nowrap; }
.dns-t code, .guide code, .adv code { font-size:12.5px; padding:2px 6px; border-radius:6px; background:var(--g-100); }
.dns-t .btn { min-height:26px; padding:0 6px; vertical-align:middle; }
.dns-add { display:flex; gap:8px; margin:14px 0 0; flex-wrap:wrap; }
.dns-add .in { flex:1 1 220px; width:auto; }
/* CRM-varázsló */
.cw-h { font-size:18px; margin:0 0 6px; }
.cw-h3 { font-size:15px; margin:22px 0 4px; }
.pick { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.pk { min-height:54px; padding:10px 14px; border:1px solid var(--g-200); border-radius:var(--r-md); background:var(--g-0); font-weight:600; text-align:left; }
.pk:hover { border-color:var(--g-300); }
.pk.on { border-color:var(--violet); background:var(--violet-soft); color:var(--violet); box-shadow:0 0 0 1px var(--violet); }
.pk em { font-style:normal; font-size:11px; padding:1px 7px; margin-left:4px; border-radius:99px; background:var(--accent-soft); color:var(--accent-ink); }
.guide { margin:18px 0 16px; padding:14px 16px; border-radius:var(--r-md); background:var(--g-25); border:1px solid var(--g-100); }
.guide > b { display:flex; gap:8px; align-items:center; font-size:14px; }
.guide ol { margin:10px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:7px; font-size:14px; color:var(--g-800); }
.ck { display:flex; gap:10px; align-items:center; padding:8px 0; font-size:14.5px; }
.ck input { width:18px; height:18px; accent-color:var(--violet); }
.adv { margin:4px 0 14px; } .adv summary { cursor:pointer; font-size:13.5px; font-weight:600; color:var(--g-600); }
.mrow { display:grid; grid-template-columns:150px 1fr; gap:10px; align-items:center; margin:6px 0; font-size:13.5px; }
.mrow .in { min-height:36px; padding:6px 10px; font-size:14px; }
.cw-st { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; }
.res { display:flex; gap:12px; align-items:flex-start; margin:16px 0 0; padding:14px 16px; border-radius:var(--r-md); font-size:14px; }
.res.ok { background:var(--ok-soft); color:#0f5c3c; } .res.bad { background:var(--bad-soft); color:var(--bad); }
.res svg { flex:none; margin-top:2px; }
.res ul { margin:8px 0 0; padding-left:18px; }
.res dl { display:grid; grid-template-columns:max-content 1fr; gap:3px 14px; margin:10px 0 0; font-size:13px; color:var(--g-800); }
.res dt { font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--g-600); } .res dd { margin:0; word-break:break-word; }
.steps button[disabled] { cursor:default; opacity:.55; }
@media (max-width:900px) {
  .kpi { grid-template-columns:repeat(2,1fr); }
  .kpi b { font-size:22px; }
  .lpc { height:110px; gap:2px; }
  .mrow { grid-template-columns:1fr; gap:4px; }
  .lp-when { display:none; }
  .dns-t th:first-child, .dns-t td:first-child { display:none; }
}

/* ablak */
.ov { position:fixed; inset:0; background:rgba(23,18,58,.42); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.dlg { background:var(--g-0); border-radius:var(--r-lg); box-shadow:var(--sh-3); width:100%; max-width:520px; max-height:calc(100vh - 32px); overflow:auto; }
.dlg-h { display:flex; justify-content:space-between; align-items:center; padding:18px 20px 6px; }
.dlg-h h2 { font-size:18px; }
.dlg-b { padding:12px 20px 4px; }
.dlg-f { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px 18px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--g-900); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; z-index:60; box-shadow:var(--sh-3); max-width:calc(100vw - 32px); }

/* mobil */
.topbar, .bnav { display:none; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .side { display:none; }
  .topbar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:20; padding:10px 16px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--g-200); }
  .topbar .logo { padding:0; }
  .topbar .co-m { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--g-800); text-decoration:none; }
  .topbar .av { width:28px; height:28px; border-radius:8px; font-size:11px; }
  .main { padding:18px 16px calc(88px + env(safe-area-inset-bottom)); }
  .bnav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:20; background:rgba(255,255,255,.97); border-top:1px solid var(--g-200); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); backdrop-filter:blur(8px); }
  .bnav a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; font-size:11px; font-weight:600; color:var(--g-500); text-decoration:none; position:relative; }
  .bnav a[aria-current=page] { color:var(--violet); }
  .bnav .bdg { position:absolute; top:0; left:calc(50% + 6px); min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--violet); color:#fff; font-size:10px; display:grid; place-items:center; }
  .grid2 { grid-template-columns:1fr; }
  .fun { grid-template-columns:repeat(2,1fr); row-gap:16px; }
  .fs:nth-child(3) { padding-left:0; border-left:0; }
  .card-h, .card-b, .rq-h { padding-left:16px; padding-right:16px; }
  .rq-b { padding:0 16px 16px; }
  .frame { height:calc(100vh - 210px); }
  .ph { margin-bottom:16px; }
}

/* belépőoldal */
.auth { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-art { color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(900px 400px at 90% -10%, rgba(78,205,196,.35), transparent 60%), radial-gradient(700px 360px at -10% 110%, rgba(124,108,242,.4), transparent 60%), var(--brand); }
.auth-art .logo { color:#fff; padding:0; }
.auth-art h2 { font-size:clamp(26px,3vw,36px); line-height:1.15; max-width:420px; }
.auth-art ul { list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:10px; color:rgba(255,255,255,.82); font-size:14.5px; }
.auth-art li { display:flex; gap:10px; align-items:center; }
.auth-art li svg { color:var(--accent); }
.auth-art small { color:rgba(255,255,255,.55); font-size:12.5px; }
.auth-f { display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.auth-box { width:100%; max-width:380px; }
.auth-box h1 { font-size:26px; margin:0 0 6px; }
.auth-box > p { color:var(--g-600); margin:0 0 22px; }
.auth-box .btn.pri { width:100%; min-height:46px; margin:4px 0 0; }
.auth-links { display:flex; justify-content:space-between; margin:16px 0 0; font-size:13.5px; }
.auth-links a { color:var(--g-600); text-decoration:none; } .auth-links a:hover { color:var(--g-900); }
.msg-ok { padding:12px 14px; border-radius:var(--r-md); background:var(--ok-soft); color:var(--ok); font-size:14px; margin:0 0 14px; }
.pw { position:relative; } .pw .in { padding-right:44px; }
.pw button { position:absolute; right:4px; top:4px; width:34px; height:34px; border:0; background:none; color:var(--g-500); border-radius:6px; display:grid; place-items:center; }
@media (max-width:900px) {
  .auth { grid-template-columns:1fr; }
  .auth-art { padding:22px 20px 26px; gap:18px; }
  .auth-art ul, .auth-art small { display:none; }
  .auth-art h2 { font-size:22px; }
}