/* F-gáz Tréner — hűtéstechnikai felkészítő
   Szín-logika a tárgyból: hideg (szívóág) = petróleum-türkiz, meleg (nyomóág) = borostyán. */

:root{
  --bg:#EDF2F3; --surface:#FFFFFF; --surface-2:#E3ECED; --surface-3:#D6E3E5;
  --ink:#0B171B; --ink-2:#405559; --ink-3:#637A80;
  --line:#CDDADC; --line-2:#B6C8CB;
  --cold:#0A6975; --cold-ink:#FFFFFF; --cold-soft:#D8EBEE;
  --warm:#99540F; --warm-soft:#F6E8D6;
  --ok:#276E50; --ok-soft:#D9EDE4;
  --bad:#A4342A; --bad-soft:#F7E0DC;
  --shadow-1:0 1px 2px rgba(11,23,27,.07);
  --shadow-2:0 2px 4px rgba(11,23,27,.06), 0 12px 28px -18px rgba(11,23,27,.3);
  --shadow-3:0 4px 10px rgba(11,23,27,.08), 0 24px 48px -24px rgba(11,23,27,.35);
  --r:14px; --r-sm:9px;
  --tap:44px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#071116; --surface:#0E1B20; --surface-2:#142630; --surface-3:#1B3139;
    --ink:#E7EFF1; --ink-2:#9DB3B9; --ink-3:#7A9198;
    --line:#1E333A; --line-2:#2A454E;
    --cold:#5BC6D2; --cold-ink:#04181C; --cold-soft:#0E2A30;
    --warm:#E0A862; --warm-soft:#2A2013;
    --ok:#5BC79B; --ok-soft:#0D2A21;
    --bad:#EB8071; --bad-soft:#2C1614;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.8);
    --shadow-3:0 4px 10px rgba(0,0,0,.45), 0 24px 48px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#071116; --surface:#0E1B20; --surface-2:#142630; --surface-3:#1B3139;
  --ink:#E7EFF1; --ink-2:#9DB3B9; --ink-3:#7A9198;
  --line:#1E333A; --line-2:#2A454E;
  --cold:#5BC6D2; --cold-ink:#04181C; --cold-soft:#0E2A30;
  --warm:#E0A862; --warm-soft:#2A2013;
  --ok:#5BC79B; --ok-soft:#0D2A21;
  --bad:#EB8071; --bad-soft:#2C1614;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.8);
  --shadow-3:0 4px 10px rgba(0,0,0,.45), 0 24px 48px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; text-wrap:balance; font-weight:650}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:var(--cold); text-underline-offset:2px}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--cold); outline-offset:2px; border-radius:4px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
.skip{position:absolute; left:-999px; top:0; z-index:99; background:var(--surface); padding:.6rem 1rem}
.skip:focus{left:.5rem; top:.5rem}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}

/* ---------------- váz ---------------- */
.shell{min-height:100dvh; display:flex; flex-direction:column}
.main{flex:1; min-width:0; padding:1rem 1rem calc(5.5rem + env(safe-area-inset-bottom))}
.view{max-width:52rem; margin:0 auto}

.rail{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.brand,.rail-foot{display:none}
.nav{display:grid; grid-template-columns:repeat(7,1fr)}
.nav a{
  display:flex; flex-direction:column; align-items:center; gap:.18rem;
  padding:.5rem .05rem .45rem; font-size:.58rem; letter-spacing:0;
  color:var(--ink-3); text-decoration:none; min-height:var(--tap);
  border-top:2px solid transparent;
}
.nav a[aria-current]{color:var(--cold); border-top-color:var(--cold); background:var(--cold-soft)}
.ico{width:20px; height:20px; display:block; background:currentColor;
     -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
     -webkit-mask-position:center; mask-position:center;
     -webkit-mask-size:contain; mask-size:contain}
.ico-home{-webkit-mask-image:var(--m-home); mask-image:var(--m-home)}
.ico-card{-webkit-mask-image:var(--m-card); mask-image:var(--m-card)}
.ico-quiz{-webkit-mask-image:var(--m-quiz); mask-image:var(--m-quiz)}
.ico-pair{-webkit-mask-image:var(--m-pair); mask-image:var(--m-pair)}
.ico-book{-webkit-mask-image:var(--m-book); mask-image:var(--m-book)}
.ico-chart{-webkit-mask-image:var(--m-chart); mask-image:var(--m-chart)}
.ico-theme{-webkit-mask-image:var(--m-theme); mask-image:var(--m-theme)}
.ico-info{-webkit-mask-image:var(--m-info); mask-image:var(--m-info)}
:root{
  --m-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3C/svg%3E");
  --m-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='15' height='12' rx='2'/%3E%3Cpath d='M7 3.5h12a2 2 0 0 1 2 2v10'/%3E%3C/svg%3E");
  --m-quiz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 9a2.9 2.9 0 1 1 3.8 2.8c-.8.3-1.2 1-1.2 1.8v.6'/%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
  --m-pair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='7.5' height='7' rx='1.6'/%3E%3Crect x='14' y='13' width='7.5' height='7' rx='1.6'/%3E%3Cpath d='M10 7.5h4.6a3 3 0 0 1 3 3v2M14 16.5H9.4a3 3 0 0 1-3-3v-2'/%3E%3C/svg%3E");
  --m-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h6a2.5 2.5 0 0 1 2.5 2.5v13'/%3E%3Cpath d='M20 4.5h-6A2.5 2.5 0 0 0 11.5 7'/%3E%3Cpath d='M4 4.5V19h6M20 4.5V19h-6'/%3E%3C/svg%3E");
  --m-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4'/%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M8 20v-6M12.5 20V8M17 20v-9'/%3E%3C/svg%3E");
  --m-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 16.5v-5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --m-theme:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4'/%3E%3C/svg%3E");
}

@media (min-width:900px){
  .shell{flex-direction:row}
  .rail{
    position:sticky; top:0; left:auto; right:auto; bottom:auto;
    width:15.5rem; height:100dvh; flex:0 0 15.5rem;
    border-top:0; border-right:1px solid var(--line);
    display:flex; flex-direction:column; padding:1.25rem .75rem 1rem;
  }
  .brand{display:flex; align-items:center; gap:.6rem; padding:0 .5rem 1.25rem}
  .brand-mark{
    width:30px; height:30px; flex:none;
    background:url("/a/20261021-2035/icon.svg") center/contain no-repeat;
  }
  .brand-text b{display:block; font-size:.95rem; letter-spacing:-.02em}
  .brand-text small{display:block; font-size:.7rem; color:var(--ink-3); line-height:1.3}
  .nav{display:flex; flex-direction:column; gap:.1rem}
  .nav a{
    flex-direction:row; justify-content:flex-start; gap:.7rem; font-size:.9rem;
    padding:.55rem .65rem; border-top:0; border-radius:var(--r-sm); min-height:0;
  }
  .nav a[aria-current]{background:var(--cold-soft)}
  .rail-foot{display:block; margin-top:auto; padding-top:.75rem; border-top:1px solid var(--line)}
  .jelen{display:flex!important}
  .theme-btn{
    display:flex; align-items:center; gap:.7rem; width:100%; padding:.55rem .65rem;
    border-radius:var(--r-sm); font-size:.85rem; color:var(--ink-3);
  }
  .theme-btn:hover{background:var(--surface-2); color:var(--ink)}
  .main{padding:2rem 2rem 4rem}
}

/* ---------------- általános elemek ---------------- */
.page-head{margin:0 0 1.25rem}
.page-head h1{font-size:1.6rem; line-height:1.2}
.page-head .sub{color:var(--ink-2); font-size:.93rem; margin-top:.3rem}
.eyebrow{
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:.35rem;
}
.back{
  display:inline-flex; align-items:center; gap:.35rem; color:var(--ink-3);
  font-size:.82rem; text-decoration:none; margin-bottom:.6rem; min-height:32px;
}
.back:hover{color:var(--cold)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:var(--tap); padding:.6rem 1.05rem; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  font-size:.92rem; font-weight:550; text-decoration:none; text-align:center;
  transition:background .14s, border-color .14s, transform .08s;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cold); border-color:var(--cold); color:var(--cold-ink); font-weight:600}
.btn-primary:hover{background:var(--cold); filter:brightness(1.07)}
.btn-ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn-sm{min-height:36px; padding:.35rem .7rem; font-size:.82rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn-row{display:flex; flex-wrap:wrap; gap:.5rem}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-1)}
.pad{padding:1rem 1.1rem}
.stack{display:flex; flex-direction:column; gap:.75rem}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.75rem}

.tag{
  display:inline-flex; align-items:center; gap:.3rem; padding:.12rem .45rem;
  border-radius:5px; font-size:.7rem; font-weight:600; letter-spacing:.01em;
  background:var(--surface-2); color:var(--ink-2); white-space:nowrap;
}
.tag-cold{background:var(--cold-soft); color:var(--cold)}
.tag-warm{background:var(--warm-soft); color:var(--warm)}
.tag-ok{background:var(--ok-soft); color:var(--ok)}
.tag-bad{background:var(--bad-soft); color:var(--bad)}

.bar{height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden}
.bar>i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--cold),var(--warm))}

.empty{text-align:center; color:var(--ink-3); padding:2.5rem 1rem; font-size:.92rem}
.spinner{
  width:26px; height:26px; margin:3rem auto; border-radius:50%;
  border:2.5px solid var(--line-2); border-top-color:var(--cold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{
  position:fixed; left:50%; bottom:calc(5rem + env(safe-area-inset-bottom)); z-index:60;
  transform:translateX(-50%); background:var(--ink); color:var(--bg);
  padding:.6rem 1rem; border-radius:999px; font-size:.86rem; box-shadow:var(--shadow-3);
  max-width:90vw; text-align:center;
}
@media (min-width:900px){.toast{bottom:1.5rem}}

/* ---------------- kezdőlap ---------------- */
.hero{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.15rem 1.2rem; box-shadow:var(--shadow-2); position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--cold),var(--warm));
}
.hero h2{font-size:1.15rem; margin-bottom:.2rem}
.hero p{color:var(--ink-2); font-size:.9rem; margin-bottom:.9rem}
.hero .due{font-size:2.3rem; font-weight:700; letter-spacing:-.03em; line-height:1}
.hero-split{display:flex; align-items:flex-end; gap:1rem; justify-content:space-between; flex-wrap:wrap}

.ch-list{display:grid; gap:.6rem}
.ch{
  display:grid; grid-template-columns:2.1rem 1fr auto; gap:.1rem .8rem; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:.8rem .95rem; text-decoration:none; color:inherit; box-shadow:var(--shadow-1);
  transition:border-color .14s, transform .08s;
}
.ch:hover{border-color:var(--line-2)}
.ch:active{transform:translateY(1px)}
.ch-n{
  grid-row:1/3; width:2.1rem; height:2.1rem; border-radius:8px; flex:none;
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
  background:var(--cold-soft); color:var(--cold);
}
.ch-t{font-weight:600; font-size:.95rem; line-height:1.3}
.ch-m{grid-column:2/4; display:flex; align-items:center; gap:.5rem; margin-top:.35rem}
.ch-m .bar{flex:1}
.ch-pct{font-size:.74rem; color:var(--ink-3); min-width:2.6rem; text-align:right}
.ch-count{font-size:.74rem; color:var(--ink-3); align-self:start; padding-top:.15rem}

/* ---------------- tanulókártya ---------------- */
.deck-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.8rem}
.deck-prog{flex:1}
.deck-prog .bar{margin-top:.3rem}
.deck-meta{font-size:.78rem; color:var(--ink-3); white-space:nowrap}

.flip{perspective:1400px; margin-bottom:.9rem}
.flip-in{
  position:relative; transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.4,.16,.2,1);
  min-height:16rem;
}
.flip.is-back .flip-in{transform:rotateY(180deg)}
.face{
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-2); padding:1.3rem 1.2rem; min-height:16rem;
  display:flex; flex-direction:column; gap:.75rem; width:100%;
}
.face-back{position:absolute; inset:0; transform:rotateY(180deg); overflow-y:auto}
.face .q{font-size:1.12rem; font-weight:600; line-height:1.4; letter-spacing:-.01em}
.face-front-plain .q{margin:auto 0}   /* ábra nélküli kártyán függőlegesen középen */
.face .a{font-size:1rem; line-height:1.6}
.face .a strong{color:var(--cold)}
.face-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap}
.src{font-size:.74rem; color:var(--ink-3); text-decoration:none; display:inline-flex;
     gap:.3rem; align-items:center; padding:.2rem 0; text-align:left; line-height:1.4}
.src:hover{color:var(--cold)}
.quote{
  font-size:.82rem; color:var(--ink-2); border-left:2px solid var(--line-2);
  padding-left:.7rem; margin-top:.2rem;
}
.fig{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:#fff}
.fig img{width:100%}
.fig figcaption{font-size:.72rem; color:var(--ink-3); padding:.35rem .5rem; background:var(--surface-2)}
.hint{text-align:center; font-size:.76rem; color:var(--ink-3); margin-top:.1rem}

.rate{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem}
.rate .btn{flex-direction:column; gap:.1rem; min-height:3.4rem; font-size:.85rem}
.rate .btn small{font-size:.68rem; color:var(--ink-3); font-weight:400}
.rate .r-bad{border-color:var(--bad); color:var(--bad)}
.rate .r-ok{border-color:var(--ok); color:var(--ok)}
.star{
  width:var(--tap); height:var(--tap); border-radius:50%; display:grid; place-items:center;
  color:var(--ink-3); font-size:1.15rem; line-height:1; flex:none;
}
.star:hover{background:var(--surface-2)}
.star[aria-pressed="true"]{color:var(--warm)}

/* ---------------- kvíz ---------------- */
.q-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.9rem}
.timer{font-size:.9rem; font-weight:600; color:var(--ink-2)}
.timer.low{color:var(--bad)}
.q-stem{font-size:1.08rem; font-weight:600; line-height:1.45; margin-bottom:.9rem; letter-spacing:-.01em}
.opts{display:flex; flex-direction:column; gap:.5rem}
.opt{
  display:flex; align-items:flex-start; gap:.7rem; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.75rem .85rem; min-height:var(--tap); font-size:.93rem; line-height:1.45;
  transition:background .12s, border-color .12s;
}
.opt:hover{background:var(--surface-2)}
.opt .k{
  flex:none; width:1.5rem; height:1.5rem; border-radius:5px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-3); font-size:.76rem; font-weight:700;
}
.opt.is-right{border-color:var(--ok); background:var(--ok-soft)}
.opt.is-right .k{background:var(--ok); color:var(--surface)}
.opt.is-wrong{border-color:var(--bad); background:var(--bad-soft)}
.opt.is-wrong .k{background:var(--bad); color:var(--surface)}
.opt[disabled]{pointer-events:none; opacity:1}
.explain{
  margin-top:.85rem; padding:.8rem .9rem; border-radius:var(--r-sm);
  background:var(--surface-2); font-size:.88rem; line-height:1.55;
}
.explain b{color:var(--cold)}

.result{text-align:center; padding:1.5rem 1rem}
.result .big{font-size:3rem; font-weight:700; letter-spacing:-.03em; line-height:1}
.result .verdict{font-size:1.05rem; font-weight:600; margin-top:.35rem}
.result .pass{color:var(--ok)} .result .fail{color:var(--bad)}
.rev{display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; text-align:left}
.rev-item{border-left:3px solid var(--bad); padding:.5rem .75rem; background:var(--surface-2); border-radius:0 var(--r-sm) var(--r-sm) 0}
.rev-item .qq{font-weight:600; font-size:.9rem; margin-bottom:.25rem}
.rev-item .aa{font-size:.84rem; color:var(--ink-2)}

/* ---------------- párosító ---------------- */
.pairs{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.pair-btn{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.7rem .6rem; min-height:3.4rem; font-size:.86rem; line-height:1.35;
  display:flex; align-items:center; justify-content:center; text-align:center;
  transition:background .12s, border-color .12s, opacity .25s, transform .12s;
}
.pair-btn:hover{background:var(--surface-2)}
.pair-btn.sel{border-color:var(--cold); background:var(--cold-soft); color:var(--cold); font-weight:600}
.pair-btn.hit{border-color:var(--ok); background:var(--ok-soft); color:var(--ok); opacity:.55; pointer-events:none}
.pair-btn.miss{border-color:var(--bad); background:var(--bad-soft); animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.pair-stats{display:flex; gap:1.25rem; justify-content:center; margin:.9rem 0 .3rem; font-size:.85rem; color:var(--ink-2)}
.pair-stats b{color:var(--ink); font-weight:650}

/* ---------------- tananyag / kereső ---------------- */
.search{
  display:flex; align-items:center; gap:.55rem; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.1rem .75rem;
  margin-bottom:.9rem;
}
.search input{
  flex:1; border:0; background:none; font:inherit; color:inherit;
  padding:.65rem 0; min-height:var(--tap); outline:none;
}
.sec{border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.sec-h{
  display:flex; align-items:center; gap:.65rem; width:100%; text-align:left;
  padding:.65rem .2rem; min-height:var(--tap);
}
.sec-id{font-size:.76rem; color:var(--ink-3); min-width:2.6rem; flex:none}
.sec-t{flex:1; font-size:.92rem; font-weight:550}
.sec-n{font-size:.72rem; color:var(--ink-3)}
.sec-lv2{padding-left:.7rem}
.sec-lv3{padding-left:1.6rem}
.sec-lv3 .sec-t{font-weight:400; color:var(--ink-2); font-size:.88rem}
.item{
  padding:.7rem .85rem; border-radius:var(--r-sm); background:var(--surface-2);
  margin:.4rem 0; font-size:.9rem; line-height:1.5;
}
.item .qq{font-weight:600; margin-bottom:.2rem}
.item .aa{color:var(--ink-2)}
.hl{background:var(--warm-soft); color:var(--warm); border-radius:3px; padding:0 .1em}

/* ---------------- haladás ---------------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); gap:.6rem; margin-bottom:1rem}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.8rem .9rem}
.stat .v{font-size:1.5rem; font-weight:700; letter-spacing:-.025em; line-height:1.1}
.stat .l{font-size:.73rem; color:var(--ink-3); margin-top:.2rem}
.boxes{display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; margin:.5rem 0 0}
.box{text-align:center; padding:.5rem .2rem; border-radius:var(--r-sm); background:var(--surface-2)}
.box .v{font-weight:700; font-size:1rem}
.box .l{font-size:.64rem; color:var(--ink-3)}
.week{display:flex; align-items:flex-end; gap:.3rem; height:4rem; margin-top:.6rem}
.week div{flex:1; background:var(--cold-soft); border-radius:3px 3px 0 0; position:relative; min-height:3px}
.week div i{display:block; background:var(--cold); height:100%; border-radius:3px 3px 0 0}
.week-l{display:flex; gap:.3rem; margin-top:.25rem}
.week-l span{flex:1; text-align:center; font-size:.64rem; color:var(--ink-3)}


/* ---------------- tananyag-néző ---------------- */
.sheet{
  position:fixed; inset:0; z-index:70; display:flex; flex-direction:column;
  background:var(--bg);
}
/* A display:flex felülírná a hidden attribútumot, ezért külön kell tiltani. */
.sheet[hidden]{display:none}
.sheet-bar{
  display:flex; align-items:center; gap:.4rem; padding:.4rem .6rem;
  padding-top:calc(.4rem + env(safe-area-inset-top));
  background:var(--surface); border-bottom:1px solid var(--line); flex:none;
}
.sheet-title{flex:1; text-align:center; font-size:.9rem; font-weight:600; letter-spacing:-.01em}
.sheet-btn{
  min-width:var(--tap); height:var(--tap); border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:1.1rem; color:var(--ink-2);
  text-decoration:none; flex:none;
}
.sheet-btn:hover{background:var(--surface-2); color:var(--ink)}
#lap-pdf{font-size:.78rem; font-weight:600; letter-spacing:.04em}
.sheet-body{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; background:var(--surface-2); padding:.5rem}
.sheet-body img{
  width:100%; max-width:46rem; margin:0 auto; display:block;
  background:#fff; border:1px solid var(--line); border-radius:4px;
}

/* ---------------- névjegy ---------------- */
.about{max-width:34rem}
.about dt{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:1.1rem}
.about dd{margin:.15rem 0 0; font-size:.98rem}
.about .rights{margin-top:1.75rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--ink-3)}

.kod{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.6rem .7rem; font-size:.82rem; word-break:break-all; user-select:all;
  color:var(--ink-2);
}

/* ---------------- jelenlét-jelző ---------------- */
.jelen{
  display:none; align-items:center; gap:.45rem; padding:.3rem .65rem .55rem;
  font-size:.76rem; color:var(--ink-3);
}
.jelen[hidden]{display:none!important}
.jelen i{
  width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 3px var(--ok-soft);
}
/* A kezdőlapon is megjelenik, ott nagyobb helyet kap. */
.jelen-hero{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem;
  font-size:.82rem; color:var(--ink-2);
}
.jelen-hero i{
  width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 3px var(--ok-soft);
}