/* Deutschlernen – sötét, lapos design.
   A szín jelentést hordoz: névelő nem (der kék, die pink, das borostyán), helyes / hibás, jutalom.
   1,5 px keret, 12–20 px lekerekítés, nincs árnyék és színátmenet. */
:root {
  color-scheme: dark;
  /* Alapszínek */
  --bg: #14161A;
  --surface: #1E2127;
  --surface-2: #2A2E35;
  --line: #2E323A;
  --line-2: #454A53;
  --text: #F2F0EA;
  --muted: #A3A7B0;
  --faint: #8E929B;
  --accent: #FF5A36;

  /* Névelők / nemek */
  --der: #6E9BFF;  --der-bg: #1B2A4A;
  --die: #F27BC0;  --die-bg: #3E1D32;
  --das: #F2B53A;  --das-bg: #3A2C10;
  --pl: #A3A7B0;   --pl-bg: #2A2E35;

  /* Visszajelzés és jutalom */
  --ok: #13854E;   --ok-bg: #173224;  --ok-text: #7DDBA6;  --ok-soft: #CFEBDA;
  --bad: #C62F2F;  --bad-bg: #3A1C1C; --bad-text: #FF9C94; --bad-soft: #F3D2CF; --bad-count: #FF8A80;
  --streak: #FF8A3D; --streak-bg: #3A2415;
  --xp: #F5C542;   --xp-bg: #3A3112;

  /* Témakörök (feladat-csempék) */
  --vocab: #5FD3A6; --vocab-bg: #16332A;
  --conj: #AE9CFF;  --conj-bg: #2A2550;
  --gram: #FFA877;  --gram-bg: #3A2519;

  --font-ui: 'Figtree', system-ui, sans-serif;
  --font-de: 'Bricolage Grotesque', 'Figtree', sans-serif;
  --border: 1.5px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --tabbar-h: 76px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
small { font-size: 13px; }
:focus-visible { outline: 2px solid var(--der); outline-offset: 2px; }

.ic { width: 20px; height: 20px; flex: none; }
.c-streak { color: var(--streak); }
.c-xp { color: var(--xp); }
.c-ok { color: var(--ok); }
.muted { color: var(--muted); }

/* Névelők színezése mindenhol */
.art-der, .g-m { color: var(--der); }
.art-die, .g-f { color: var(--die); }
.art-das, .g-n { color: var(--das); }
.g-pl { color: var(--pl); }
.gdot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: currentColor; margin-right: 6px; vertical-align: middle; }

/* ---------- Felső sáv ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  max-width: 1040px; margin: 0 auto;
  padding: 16px 20px;
  background: var(--bg);
}
.logo { font-family: var(--font-de); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.logo .dot { color: var(--accent); }
.tabbar { display: flex; gap: 4px; }
.tabbar a {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  font-weight: 600; font-size: 15px; color: var(--muted);
}
.tabbar a:hover { color: var(--text); }
.tabbar a.on { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 var(--border) var(--line); font-weight: 700; }
.chips { margin-left: auto; display: flex; gap: 8px; }
.chip {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: var(--border) solid var(--line); border-radius: 999px; background: var(--surface);
  font-weight: 700; font-size: 14px; white-space: nowrap;
}
.chip .ic { width: 16px; height: 16px; }
.chip.sync { padding: 0 9px; color: var(--muted); }
.chip.sync.ok .ic { color: var(--ok-text); }
.chip.sync.error { border-color: var(--bad); color: var(--bad-text); }
.chip.sync.local { color: var(--das); }
body.playing .topbar { display: none; }

#app { max-width: 1040px; margin: 0 auto; padding: 8px 20px 64px; }
body.playing #app { max-width: 640px; padding-bottom: 24px; }
.loading { text-align: center; color: var(--muted); font-weight: 600; margin-top: 80px; }

/* ---------- Tipográfia ---------- */
.display { font-family: var(--font-de); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 32px 0 10px; }
.page-head { padding-top: 12px; }
.page-head p { margin: 6px 0 0; font-size: 15px; }
.help { color: var(--muted); font-size: 14px; margin: 12px 0; }
.warn { color: var(--bad-text); font-weight: 600; font-size: 14px; }
.empty { color: var(--muted); padding: 12px 0; }

/* ---------- Gombok ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 22px;
  border: var(--border) solid transparent; border-radius: var(--r); background: var(--surface);
  font-weight: 700; font-size: 16px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn .ic { width: 18px; height: 18px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { height: 34px; padding: 0 12px; gap: 5px; font-size: 14px; border-radius: 10px; }
.btn.sm .ic { width: 15px; height: 15px; }
.btn.primary { background: var(--text); color: var(--bg); }
.btn.primary:hover:not(:disabled) { background: #FFFFFF; }
.btn.secondary { background: var(--surface); border-color: var(--text); }
.btn.quiet { border-color: var(--line); }
.btn.secondary:hover:not(:disabled) { border-color: var(--text); }
.btn.success { background: var(--ok); color: #FFFFFF; }
.btn.success:hover { background: #179A5A; }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad-text); }
.btn.grow { flex: 1; }
.btn.wide { width: 100%; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; border-radius: 12px; background: none;
  color: var(--muted); cursor: pointer;
}
.icon-btn:hover { color: var(--text); background: var(--surface); }
.count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.count.bad { background: var(--bad-bg); color: var(--bad-count); }

/* ---------- Kártyák, csempék ---------- */
.card { background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.mtile {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--r);
  font-family: var(--font-de); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap;
}
.mtile.len-4 { font-size: 15px; }
.mtile.len-5 { font-size: 14px; }
.mtile.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.mtile.sm.len-4, .mtile.sm.len-5 { font-size: 10px; }
.g-vocab { background: var(--vocab-bg); color: var(--vocab); }
.g-conj { background: var(--conj-bg); color: var(--conj); }
.g-gram { background: var(--gram-bg); color: var(--gram); }
.mpill {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > div { height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s; }
.bar.g-vocab, .bar.g-conj, .bar.g-gram { background: var(--surface-2); }
.bar.g-vocab > div { background: var(--vocab); }
.bar.g-conj > div { background: var(--conj); }
.bar.g-gram > div { background: var(--gram); }

/* ---------- Kezdőlap ---------- */
.home-head { padding-top: 12px; }
.home-head .display { margin-top: 4px; }
.goal-card { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.goal-top { display: flex; align-items: baseline; justify-content: space-between; }
.goal-label { font-weight: 600; font-size: 15px; }
.goal-num { font-size: 14px; color: var(--muted); }
.goal-num b { color: var(--text); font-family: var(--font-de); font-size: 18px; }
.week { display: flex; gap: 6px; }
.wd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.wd > span {
  width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  border: var(--border) dashed var(--line-2);
}
.wd.met > span { background: var(--text); border: none; color: var(--bg); }
.wd.met .ic { width: 14px; height: 14px; stroke-width: 3; }
.wd.today > span { border: 2px solid var(--accent); background: var(--surface); }
.wd.partial > span { border-style: solid; border-color: var(--line-2); }
.wd.is-today { color: var(--text); font-weight: 700; }
.goal-actions { display: flex; gap: 10px; }
.goal-actions .btn.secondary { padding: 0 16px; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 32px; }
.group { min-width: 0; }
.mod-list { display: flex; flex-direction: column; }
.mod-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px 0; border: none; border-bottom: 1px solid var(--line); background: none;
  text-align: left; cursor: pointer;
}
.mod-row:last-child { border-bottom: none; }
.mod-row:hover .mod-text b { color: var(--der); }
.mod-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mod-text b { font-weight: 600; font-size: 16px; }
.mod-text small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-pct { font-size: 13px; color: var(--muted); font-weight: 600; min-width: 36px; text-align: right; }

/* ---------- Gyakorló kör ---------- */
.play { display: flex; flex-direction: column; min-height: calc(100vh - 32px); padding-top: 8px; }
.play-head { display: flex; align-items: center; gap: 14px; }
.segments { flex: 1; display: flex; gap: 4px; }
.segments i { flex: 1; height: 6px; border-radius: 999px; background: var(--line); }
.segments i.ok { background: var(--text); }
.segments i.bad { background: var(--bad); }
.segments i.current { background: var(--accent); }
.play-count { font-size: 14px; font-weight: 700; color: var(--muted); min-width: 40px; text-align: right; }
.qmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 32px 4px 0; }
.fix-count { margin-left: auto; padding: 2px 9px; border: var(--border) solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); }
.instruction { font-size: 15px; color: var(--muted); font-weight: 500; }
.qbody { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 4px 24px; text-align: center; }
.prompt { width: 100%; }
.big { font-family: var(--font-de); font-weight: 700; font-size: 48px; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.big.hu { font-family: var(--font-ui); font-weight: 700; font-size: 26px; letter-spacing: 0; }
.sub { font-size: 18px; color: var(--muted); margin-top: 8px; }
.sentence { font-family: var(--font-de); font-weight: 500; font-size: 26px; line-height: 1.5; margin-top: 12px; }
.sub .case-pill { margin: 0 8px 0 0; vertical-align: 2px; }
.reveal { cursor: pointer; -webkit-user-select: none; user-select: none; }
.reveal-lbl { text-decoration: underline dotted var(--faint); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.reveal-hu { display: none; color: var(--text); }
.reveal.open .reveal-hu { display: inline; }
.reveal:not(.below) .reveal-hu::before { content: ' – '; color: var(--muted); }
/* below: a jelentés a szó / mondat alatt, kisebb betűvel (inline-block, hogy az aláhúzás ne öröklődjön) */
.reveal.below.open .reveal-hu { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--muted); }
.case-pill { display: inline-block; margin-bottom: 12px; padding: 2px 9px; border: var(--border) solid transparent; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Állandó címkeszínek (pill() az exercises.js-ben); Passiv: szaggatott keret */
.case-pill[class*=" t-"] { color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, var(--surface)); border-color: color-mix(in srgb, var(--pc) 45%, transparent); }
.case-pill.passiv { border-style: dashed; }
.case-pill + .case-pill { margin-left: 6px; }
.t-praes { --pc: #E8E4D8; } .t-praet { --pc: #AE9CFF; } .t-perf { --pc: #FFA877; } .t-plusq { --pc: #F08CA8; }
.t-fut { --pc: #4FD1E0; } .t-k2 { --pc: #C8E06E; }
.t-nom { --pc: #A9BCD0; } .t-akk { --pc: #FF7A6B; } .t-dat { --pc: #5FD3A6; } .t-gen { --pc: #D4A5FF; }
.t-komp { --pc: #7FC8FF; } .t-sup { --pc: #FFD45C; }
.t-du { --pc: #FFB37A; } .t-ihr { --pc: #8FD3FF; } .t-sie { --pc: #E0A3FF; }
.fb-chips .case-pill { margin: 0; align-self: center; }
.tag { display: inline-block; margin-top: 10px; padding: 2px 10px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.blank {
  display: inline-block; min-width: 1.6em; padding: 0 .1em; line-height: 1;
  border-bottom: 3px solid var(--text); color: transparent; text-align: center;
}
.blank.filled { border-bottom-color: transparent; border-radius: 10px; padding: .06em .25em; animation: pop .25s ease-out; }
.blank.filled.ok { background: var(--ok-bg); box-shadow: inset 0 0 0 var(--border) var(--ok); color: var(--ok-text); }
.blank.filled.bad { background: var(--bad-bg); box-shadow: inset 0 0 0 var(--border) var(--bad); color: var(--bad-text); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

.answer { padding: 0 4px; }
.options { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.options.stack { grid-template-columns: 1fr; }
/* Könnyített Perfekt: 2 oszlopos rács (haben | sein) mobilon is */
.options.pair { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.options.pair .opt { min-height: 54px; padding: 10px 12px; font-family: var(--font-de); font-size: 17px; }
.opt-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.opt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 12px 20px; border-radius: 16px;
  border: var(--border) solid var(--line); background: var(--surface);
  font-weight: 600; font-size: 17px; cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, opacity .15s;
}
.opt:hover:not(:disabled) { border-color: var(--text); }
.opt kbd { position: absolute; left: 12px; top: 8px; font-family: inherit; font-size: 11px; color: var(--faint); }
.opt.right { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-text); }
.opt.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad-text); }
.opt.dim { opacity: .45; }
.opt:disabled { cursor: default; }
.art-opt { justify-content: space-between; font-family: var(--font-de); font-weight: 700; font-size: 24px; }
.art-opt small { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); }
.art-opt.art-der { border-color: var(--der); }
.art-opt.art-die { border-color: var(--die); }
.art-opt.art-das { border-color: var(--das); }
.art-opt.art-der:hover:not(:disabled) { background: var(--der-bg); border-color: var(--der); }
.art-opt.art-die:hover:not(:disabled) { background: var(--die-bg); border-color: var(--die); }
.art-opt.art-das:hover:not(:disabled) { background: var(--das-bg); border-color: var(--das); }
.art-opt.right { background: var(--ok-bg); border-color: var(--ok); }
.art-opt.wrong { background: var(--bad-bg); border-color: var(--bad); }

.auth-form input, input.txt, .conj-row input, input.inline, .add-form input:not([type=radio]):not([type=checkbox]), .add-form select, .add-form textarea,
.search, .settings input, .topic-select {
  height: 48px; padding: 0 14px; border-radius: 12px;
  border: var(--border) solid var(--line); background: var(--surface); outline: none;
  font-size: 17px; font-weight: 600; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--text) !important; }
input::placeholder, textarea::placeholder { color: var(--faint); font-weight: 400; }
input.txt { width: 100%; height: 56px; font-size: 22px; text-align: center; }
input.right { border-color: var(--ok) !important; background: var(--ok-bg); color: var(--ok-text); }
input.wrong { border-color: var(--bad) !important; background: var(--bad-bg); color: var(--bad-count); text-decoration: line-through; }
.fix { font-style: normal; font-weight: 700; color: var(--text); margin-left: 10px; }

.conj-table { background: var(--surface); border: var(--border) solid var(--line); border-radius: 18px; overflow: hidden; }
.conj-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 12px 4px 16px; border-bottom: 1px solid var(--line); }
.conj-row:last-child { border-bottom: none; }
.conj-p { width: 110px; flex: none; font-size: 15px; color: var(--muted); text-align: left; }
.conj-row input { flex: 1; min-width: 0; height: 42px; background: var(--bg); }
.conj-row:has(input.wrong) { background: var(--bad-bg); }
.conj-row .fix { white-space: nowrap; }
.mark { display: inline-flex; }
.mark.ok { color: var(--ok); }
.mark.bad { color: var(--bad); }
.mark .ic { width: 18px; height: 18px; stroke-width: 2.6; }

.cloze { font-family: var(--font-de); font-weight: 500; font-size: 24px; line-height: 2; text-align: center; }
input.inline { width: 150px; height: 44px; margin: 0 4px; text-align: center; font-family: var(--font-de); font-size: 20px; font-weight: 700; vertical-align: middle; }

input.inline.sm { width: 104px; }
input.inline.xs { width: 76px; }

/* Kifejezések */
.idiom { font-family: var(--font-de); font-weight: 700; font-size: 32px; line-height: 1.3; letter-spacing: -0.01em; }
.idiom.hu { font-family: var(--font-ui); font-size: 26px; }
@media (max-width: 720px) { .idiom { font-size: 26px; } .idiom.hu { font-size: 22px; } }

/* Kérdés–válasz párbeszéd (Kérdőszavak) */
.dialog { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-de); }
.dialog .dq { font-weight: 700; font-size: 30px; line-height: 1.3; letter-spacing: -0.01em; }
.dialog .da { font-weight: 500; font-size: 22px; color: var(--muted); }

/* Szoba-rajz (Wo? Wohin?) – a kérdezett tárgy narancs, a viszonyítási pont szaggatott fehér */
.room { display: block; width: 100%; max-width: 440px; margin: 0 auto 8px; border-radius: 16px; border: var(--border) solid var(--line); background: var(--surface); }
.room .wall { fill: var(--surface); }
.room .floor { fill: var(--surface-2); }
.room .base { stroke: var(--line-2); stroke-width: 1.5; }
.room .obj > * { fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.room .obj > polyline, .room .obj > line, .room .obj > path[d^="M118"], .room .obj > path[d^="M87"], .room .obj > path[d^="M61"], .room .obj > path[d^="M168"], .room .obj > path[d^="M366"] { fill: none; }
.room g.obj:first-of-type > .wall { stroke: none; }
.room .obj.hl > * { stroke: var(--accent); stroke-width: 2.5; }
.room .obj.hl > rect, .room .obj.hl > circle, .room .obj.hl > ellipse, .room .obj.hl > path[d$="Z"] { fill: #3A2519; }
.room .obj.ref > * { stroke: var(--text); stroke-dasharray: 5 4; stroke-width: 2; }
.room g.obj.hl > .wall { fill: #2A2320; stroke: var(--accent); }
.room g.obj.ref > .wall { fill: var(--surface); stroke: var(--text); }
.prompt .room + .sub { margin-top: 4px; }

.order-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 64px;
  padding: 10px 14px; border-radius: 16px; border: var(--border) dashed var(--line-2);
  font-family: var(--font-de); font-size: 20px; font-weight: 500;
}
.order-line .fixed { color: var(--muted); }
.placed { display: contents; }
.order-line:has(.placed.right) { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.order-line:has(.placed.wrong) { border-style: solid; border-color: var(--bad); background: var(--bad-bg); }
.bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; min-height: 48px; }
.tile {
  height: 44px; padding: 0 14px; border-radius: 12px;
  border: var(--border) solid var(--line); background: var(--surface);
  font-family: var(--font-de); font-weight: 600; font-size: 18px; cursor: pointer;
}
.tile:hover { border-color: var(--text); }

/* Kosaras feladat (kötőszavak szórend szerint) */
.sort-bank { margin-top: 0; margin-bottom: 16px; padding: 8px; border-radius: 16px; border: var(--border) dashed transparent; }
.sort-bank:empty { display: none; }
.sort.armed .sort-bank:not(:empty), .sort-bank.over { border-color: var(--line-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chip.sel { border-color: var(--gram); background: var(--gram-bg); color: var(--gram); }
.chip.right { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-text); cursor: default; }
.chip.wrong { border-color: var(--bad); background: var(--bad-bg); color: var(--bad-text); cursor: default; }
.chip-note { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--muted); }
.chip-fix {font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text); }
.bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bin {
  display: flex; flex-direction: column; gap: 10px; min-height: 150px; padding: 12px;
  border-radius: var(--r); border: var(--border) solid var(--line); background: var(--surface); cursor: pointer;
}
.sort.armed .bin { border-style: dashed; border-color: var(--gram); }
.bin.over { border-color: var(--gram); background: var(--gram-bg); }
.bin-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.bin-head b { font-family: var(--font-de); font-size: 17px; letter-spacing: .02em; }
.bin-head small { flex-basis: 100%; color: var(--muted); }
.bin-head kbd { font-size: 11px; color: var(--faint); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; }
.bin-body { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; flex: 1; }
.bin-body .chip { height: 38px; padding: 0 10px; font-size: 16px; }
@media (max-width: 560px) {
  .bins { grid-template-columns: 1fr; gap: 8px; }
  .bin { min-height: 0; flex-direction: row; align-items: center; padding: 10px 12px; }
  .bin-head { flex-direction: column; flex-wrap: nowrap; gap: 0; width: 96px; flex-shrink: 0; }
  .bin-head kbd { display: none; }
  .bin-body { min-height: 38px; }
}

.play-foot { margin-top: auto; padding-top: 24px; }
.actions { display: flex; flex-direction: column; gap: 8px; }
.feedback { display: none; }
.feedback.show { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 22px; animation: slideUp .2s ease-out; }
.feedback.ok { background: var(--ok-bg); }
.feedback.bad { background: var(--bad-bg); }
.fb-head { display: flex; align-items: center; gap: 12px; }
.fb-icon { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; flex: none; }
.fb-icon .ic { stroke-width: 3; }
.ok .fb-icon { background: var(--ok); }
.bad .fb-icon { background: var(--bad); }
.fb-title { flex: 1; font-family: var(--font-de); font-weight: 700; font-size: 22px; }
.ok .fb-title, .ok .fb-xp { color: var(--ok-text); }
.bad .fb-title { color: var(--bad-text); }
.fb-xp { font-weight: 700; font-size: 15px; }
.fb-body { font-size: 15px; line-height: 1.55; }
.ok .fb-body { color: var(--ok-soft); }
.bad .fb-body { color: var(--bad-soft); }
.fb-body b { color: var(--text); }
.fb-body small { font-size: 14px; }
.fb-body:empty { display: none; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fb-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; }
.adj-modes { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-de); font-size: 15px; font-weight: 600; color: var(--faint); }
.adj-modes i { font-style: normal; }
.adj-modes .on { padding: 1px 10px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 800; }
.adj-table { width: 100%; max-width: 420px; margin: 10px 0; border-collapse: separate; border-spacing: 3px; font-family: var(--font-de); text-align: center; }
.adj-table th { font-size: 13px; font-weight: 600; color: var(--muted); padding: 2px 4px; }
.adj-table th small { margin-left: 2px; font-size: 10px; color: var(--faint); }
.adj-table th.on { color: var(--text); font-weight: 800; }
.adj-table thead th { font-size: 15px; }
.adj-table td { padding: 4px 2px; border-radius: 8px; background: var(--surface); line-height: 1.2; }
.adj-table td small { display: block; font-size: 11px; color: var(--muted); }
.adj-table td b { font-size: 16px; }
.adj-table td.hl { background: var(--text); }
.adj-table td.hl b, .adj-table td.hl small { color: var(--bg); }
.fb-note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #E8B3AE; }
.fb-note .ic { width: 16px; height: 16px; }
.fb-note.ok { color: var(--ok-text); }
.feedback .btn { height: 54px; }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Kör vége ---------- */
.summary { max-width: 520px; margin: 0 auto; padding-top: 40px; display: flex; flex-direction: column; }
.sum-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sum-head .display { margin-top: 12px; font-size: 32px; }
.sum-head p { margin: 0; font-size: 16px; }
.ring { position: relative; width: 128px; height: 128px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: var(--surface-2); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; }
.ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-de); font-weight: 800; font-size: 36px; letter-spacing: -0.02em; }
.ring-num span { font-size: 20px; color: var(--muted); font-weight: 600; }
.sum-stats { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-tile { padding: 14px 12px; border: var(--border) solid var(--line); background: var(--surface); border-radius: 16px; display: flex; flex-direction: column; gap: 4px; }
.stat-tile b { font-family: var(--font-de); font-weight: 700; font-size: 22px; }
.stat-tile small { font-size: 12px; color: var(--muted); font-weight: 600; }
.review-list { display: flex; flex-direction: column; }
.review-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.review-row:last-child { border-bottom: none; }
.review-row > span:not(.count):not(.mtile) { flex: 1; min-width: 0; }
.dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.dot.bad { background: var(--bad); }
.sum-actions { margin-top: 32px; display: flex; gap: 10px; }
.sum-btn { min-width: 72px; }
.sum-actions .btn .ic { width: 26px; height: 26px; }

/* ---------- Saját anyag ---------- */
.segmented { margin-top: 18px; padding: 4px; border-radius: 12px; background: var(--surface-2); display: flex; gap: 2px; max-width: 560px; }
.segmented button {
  flex: 1; height: 38px; border: none; border-radius: 9px; background: transparent;
  font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.segmented button.on { background: var(--surface); color: var(--text); font-weight: 700; }
.seg-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.help { max-width: 560px; }
.add-form { max-width: 560px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; }
.add-form.editing { border-color: var(--der); }
.edit-note { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--der); }
.lf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lf > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.lf > span small { font-weight: 400; color: var(--faint); }
.lf input, .lf select { width: 100%; }
.lf-row { display: flex; gap: 12px; }
.lf-row > .lf { flex: 1; }
.art-pick { display: flex; gap: 8px; }
.art-pick label { flex: 1; position: relative; }
.art-pick input { position: absolute; opacity: 0; pointer-events: none; }
.art-pick span {
  display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px;
  border: var(--border) solid var(--line); background: var(--surface);
  font-weight: 700; font-size: 16px; cursor: pointer;
}
.art-pick .art-der span { color: var(--der); }
.art-pick .art-die span { color: var(--die); }
.art-pick .art-das span { color: var(--das); }
.art-pick .art-none span { color: var(--muted); font-weight: 600; font-size: 14px; }
.art-pick .art-der input:checked + span { border: 2px solid var(--der); background: var(--der-bg); }
.art-pick .art-die input:checked + span { border: 2px solid var(--die); background: var(--die-bg); }
.art-pick .art-das input:checked + span { border: 2px solid var(--das); background: var(--das-bg); }
.art-pick .art-none input:checked + span { border: 2px solid var(--muted); background: var(--surface-2); color: var(--text); }
.art-pick input:focus-visible + span { outline: 2px solid var(--der); outline-offset: 2px; }
.form-actions { display: flex; gap: 10px; }
.verb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.verb-grid .eyebrow { grid-column: 1 / -1; margin: 6px 0 0; }
.add-form .verb-grid input, .add-form .verb-grid select { height: 44px; font-size: 16px; }
/* AI-kitöltés (csak ha a szerveren van API-kulcs) */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }
.ai-btn { color: var(--conj); }
.ai-btn:disabled { opacity: .7; cursor: progress; }
.ic.spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#aiBox:empty { display: none; }
.ai-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: var(--border) solid var(--conj); border-radius: var(--r); background: var(--conj-bg); animation: slideUp .2s ease-out; }
.ai-head { display: flex; align-items: center; gap: 8px; color: var(--conj); }
.ai-head .tag { margin: 0; }
.ai-head .icon-btn { margin-left: auto; width: 34px; height: 34px; }
.ai-note { margin: 0; font-size: 14px; }
.ai-verb { font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.ai-verb p { margin: 0; }
.ai-box .eyebrow { margin: 4px 0 0; }
.ai-box .help { margin: 0; font-size: 13px; }
.ai-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.ai-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--conj); }
.ai-ex > span { display: flex; flex-direction: column; }
.ai-de { font-family: var(--font-de); font-size: 16px; color: var(--text); }
.ai-de .gap { color: var(--ok-text); border-bottom: 2px solid var(--ok); }
.preview { font-size: 14px; color: var(--muted); min-height: 1.4em; margin-top: -6px; }
.preview .blank { border-bottom-width: 2px; }
.mini-tile { display: inline-block; padding: 1px 8px; margin: 2px 0; border-radius: 8px; background: var(--surface-2); color: var(--text); font-family: var(--font-de); }
.bulk summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--der); text-align: center; list-style: none; }
.bulk summary::-webkit-details-marker, .builtin summary::-webkit-details-marker { display: none; }
.add-form .bulk textarea { width: 100%; height: auto; padding: 12px 14px; font-size: 15px; resize: vertical; }
.bulk-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.add-form .bulk-row input { flex: 1; min-width: 180px; font-size: 15px; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.list-head .eyebrow { margin-bottom: 4px; }
.topic-select { height: 36px; font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 10px; }
.search { width: 100%; margin: 8px 0; font-size: 15px; font-weight: 500; }
.lrows { display: flex; flex-direction: column; }
.lrows.compact { max-height: 480px; overflow-y: auto; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.lrow:last-child { border-bottom: none; }
.lrow.is-editing { background: var(--der-bg); margin: 0 -12px; padding: 13px 12px; border-radius: 12px; }
.lrow-main { flex: 1; min-width: 0; }
.lrow-title { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.lrow-sub { font-size: 14px; color: var(--muted); }
.lrow .prep { color: var(--gram); font-weight: 700; }
.lrow .gap { color: var(--ok-text); border-bottom: 2px solid var(--ok); }
.row-actions { display: flex; }
.row-actions .icon-btn { width: 40px; height: 40px; }
.row-actions .ic { width: 18px; height: 18px; }
.builtin { margin-top: 28px; padding: 14px 16px; border: var(--border) solid var(--line); border-radius: 16px; }
.builtin summary { cursor: pointer; list-style: none; color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.builtin[open] summary { margin-bottom: 6px; }

/* ---------- Statisztika ---------- */
.stat-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 16px; border-radius: 16px; display: flex; flex-direction: column; }
.stat > small { font-size: 12px; color: var(--muted); }
.stat > small:first-child { font-size: 13px; font-weight: 600; }
.stat b { font-family: var(--font-de); font-weight: 700; font-size: 28px; margin-top: 4px; }
.stat b span { font-size: 15px; color: var(--muted); font-weight: 500; font-family: var(--font-ui); }
.chart { padding: 18px 16px 12px; border-radius: 16px; }
.bars { height: 120px; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--line); }
.bars .b { flex: 1; background: var(--text); border-radius: 4px 4px 0 0; }
.bars .b.zero { background: #3A3E46; }
.bars .b.today { background: var(--accent); }
.chart-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding-top: 8px; }
.acc-list { display: flex; flex-direction: column; }
.acc-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.acc-name { width: 170px; flex: none; font-size: 14px; font-weight: 600; }
.acc-row .bar { flex: 1; }
.acc-pct { width: 40px; text-align: right; font-size: 13px; color: var(--muted); font-weight: 600; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 8px; }
.badge-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.badge-card b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.badge-card small { font-size: 11px; color: var(--faint); line-height: 1.3; }
.badge-card:not(.got) b { color: var(--faint); }
/* Jelvény: hatszögletű érem (badgeHtml), a tónus változókkal: --t vonal, --tb kitöltés, --tt szám szövege */
.bdg {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 64px; height: 64px; --t: var(--muted); --tb: var(--surface); --tt: var(--bg);
}
.bdg-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bdg-bg { fill: var(--tb); stroke: var(--t); stroke-width: 2; stroke-linejoin: round; }
.bdg-ring { fill: none; stroke: var(--t); stroke-width: 1.25; stroke-linejoin: round; opacity: .45; }
.bdg .bdg-ic { position: relative; width: 26px; height: 26px; color: var(--t); margin-top: -2px; }
.bdg-num {
  position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  padding: 1px 7px; border-radius: 999px; background: var(--t); color: var(--tt);
  font-family: var(--font-de); font-size: 11px; font-weight: 700; line-height: 16px; white-space: nowrap;
}
.bdg.tone-ok { --t: var(--ok); --tb: var(--ok-bg); }
.bdg.tone-streak { --t: var(--streak); --tb: var(--streak-bg); }
.bdg.tone-xp { --t: var(--xp); --tb: var(--xp-bg); }
.bdg.tone-der { --t: var(--der); --tb: var(--der-bg); }
.bdg.tone-vocab { --t: var(--vocab); --tb: var(--vocab-bg); }
.bdg.tone-conj { --t: var(--conj); --tb: var(--conj-bg); }
.bdg.tone-gram { --t: var(--gram); --tb: var(--gram-bg); }
.bdg.locked { --t: var(--line-2); --tb: transparent; --tt: var(--muted); }
.bdg.locked .bdg-bg { stroke-dasharray: 4 4; }
.bdg.locked .bdg-ring { opacity: 0; }
.bdg.locked .bdg-ic { color: var(--faint); }
.storage-info { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; margin-bottom: 12px; border: var(--border) solid var(--line); font-size: 15px; }
.storage-info > .ic { width: 26px; height: 26px; }
.storage-info small { color: var(--muted); }
.storage-info.server > .ic { color: var(--ok-text); }
.storage-info.local > .ic { color: var(--das); }
.settings { display: flex; flex-direction: column; gap: 16px; }
.settings .lf-row { max-width: 600px; flex-wrap: wrap; }
.settings .lf-row > .lf { min-width: 140px; }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-actions .btn { height: 46px; font-size: 15px; }
.file-btn { cursor: pointer; }

/* ---------- Értesítések, konfetti ---------- */
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r);
  background: var(--surface); border: var(--border) solid var(--line); font-weight: 600; font-size: 15px;
  animation: slideDown .25s ease-out;
}
.toast small { color: var(--muted); font-weight: 500; }
.toast.ok { border-color: var(--ok); }
.toast.bad { border-color: var(--bad); color: var(--bad-soft); }
.toast.reward { border-color: var(--xp); }
.toast .bdg { width: 46px; height: 46px; }
.toast .bdg .bdg-ic { width: 20px; height: 20px; }
.toast .bdg-num { font-size: 10px; line-height: 14px; padding: 0 5px; }
.toast.out { opacity: 0; transform: translateY(-8px); transition: all .4s; }
@keyframes slideDown { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* ---------- Mobil: alsó fülsor ---------- */
@media (max-width: 720px) {
  .topbar { padding: 14px 16px; gap: 12px; }
  .logo { font-size: 20px; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    min-height: var(--tabbar-h); padding: 8px 12px max(14px, env(safe-area-inset-bottom)); gap: 0;
    background: var(--surface); border-top: 1px solid var(--line);
    justify-content: space-around;
  }
  .tabbar a { flex-direction: column; gap: 4px; height: auto; min-width: 72px; padding: 4px 8px; border-radius: 0; font-size: 12px; font-weight: 500; }
  .tabbar a.on { background: none; box-shadow: none; }
  .tabbar .ic { width: 24px; height: 24px; stroke-width: 1.8; }
  body:not(.playing) #app { padding-bottom: calc(var(--tabbar-h) + 32px); }
  #app { padding-left: 16px; padding-right: 16px; }
  .chip { height: 32px; padding: 0 10px; }
  .chip .lbl { display: none; }
  .chips { gap: 6px; }
  .btn.quiet:hover:not(:disabled) { border-color: var(--text); }
  .groups { grid-template-columns: minmax(0, 1fr); }
  .big { font-size: 40px; }
  .sentence { font-size: 22px; }
  .cloze { font-size: 20px; }
  input.inline { width: 120px; }
  .options { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .verb-grid { grid-template-columns: 1fr 1fr; }
  .acc-name { width: 132px; }
  .conj-p { width: 84px; font-size: 14px; }
  .segmented button { font-size: 13px; }
  .qbody { padding-top: 28px; }
}
@media (max-width: 380px) {
  .conj-p { width: 70px; }
  .segmented button { font-size: 12px; }
}
/* ---------- Mobil billentyűzet ---------- */
/* A dinamikus magasság (dvh) a billentyűzettel együtt zsugorodik. */
@supports (height: 100dvh) {
  .play { min-height: calc(100dvh - 32px); }
}
/* Görgetéskor a mező ne kerüljön a ragadós felső sáv alá. */
input, textarea, select { scroll-margin-top: 88px; scroll-margin-bottom: 24px; }
/* 16 px alatti betűnél az iPhone ránagyít a mezőre. */
@media (pointer: coarse) {
  .search, .topic-select, .settings input, .add-form .bulk textarea, .add-form .bulk-row input { font-size: 16px; }
}
/* Nyitott billentyűzet (JS állítja): minden elférjen a mező fölött. */
body.kbd-open .tabbar { display: none; }
body.kbd-open:not(.playing) #app { padding-bottom: 32px; }
body.kbd-open.playing .play { min-height: 0; padding-top: 4px; }
body.kbd-open.playing .qmeta { padding-top: 10px; }
body.kbd-open.playing .instruction { font-size: 13px; }
body.kbd-open.playing .qbody { padding: 10px 4px 8px; gap: 6px; }
body.kbd-open.playing .big { font-size: 28px; }
body.kbd-open.playing .sentence { font-size: 19px; margin-top: 4px; }
body.kbd-open.playing .sub { font-size: 15px; margin-top: 4px; }
body.kbd-open.playing .case-pill:not(.sub .case-pill) { margin-bottom: 4px; }
body.kbd-open.playing .dialog .dq { font-size: 22px; }
body.kbd-open.playing .dialog .da { font-size: 17px; }
body.kbd-open.playing .idiom { font-size: 20px; }
body.kbd-open.playing .room { height: 28vh; width: auto; max-width: 100%; }
body.kbd-open.playing .cloze { font-size: 18px; line-height: 1.8; }
body.kbd-open.playing input.inline { height: 40px; }
body.kbd-open.playing input.txt { height: 48px; font-size: 20px; }
body.kbd-open.playing .conj-row { min-height: 44px; }
body.kbd-open.playing .play-foot { margin-top: 12px; padding-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .confetti { display: none; }
}

/* Belépés és meghívó (login.html, invite.html), tanári szalag (app.js) */
.auth-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 16px; }
.auth-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 { margin: 0; font-family: var(--font-de); font-size: 26px; }
.auth-card p { margin: 0; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form input { width: 100%; }
.auth-form .btn { width: 100%; }
.auth-msg:empty { display: none; }
.auth-form .auth-msg { color: var(--bad-text); font-weight: 600; }
.rolebar { padding: 6px 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--xp); background: var(--xp-bg);
  border-bottom: var(--border) solid color-mix(in srgb, var(--xp) 40%, transparent); }
.rolebar-back { margin-left: 8px; padding: 2px 10px; border: var(--border) solid currentColor; border-radius: 8px; background: none;
  color: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.students { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.g-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.g-wrap[hidden] { display: none; }
.auth-or { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--faint); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; border-top: var(--border) solid var(--line); }
/* A Google-gomb beágyazott (világos színsémájú) oldal: ha a mi sötét sémánk öröklődne rá, a böngésző fehér hátteret festene mögé. */
#g-btn iframe { color-scheme: light; }
/* Kijelentkezés a fejlécben (csak ikon) */
.chip.icon-only { padding: 0 9px; color: var(--muted); cursor: pointer; }
.chip.icon-only:hover { color: var(--text); border-color: var(--line-2); }