:root{
  --sug:14px;
  --f-cim:"Fraunces",Georgia,"Times New Roman",serif;
  --f-szoveg:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
#app{
  color-scheme: light;
  --ej:#e9eff6; --ej2:#ffffff;
  --tinta:#16202e; --halk:#53627a; --halkabb:#75849b;
  --arany:#9a6a12; --arany-halk:#c4a05e;
  --r1:#bb5340; --r2:#c0842a; --r3:#3a8f82; --r4:#13a173;
  --uveg:rgba(255,255,255,.92); --uvegker:rgba(32,64,104,.16);
  --mezo:rgba(20,48,84,.05);
  
  --v-csillag:nincs;
  --v-fenykor:rgba(110,160,215,.26);
  --v-ocean1:#d8e9f7; --v-ocean2:#a8c8e6;
  --v-halo:rgba(50,95,150,.15);
  --v-fold:#f2ecdf; --v-foldker:rgba(70,105,150,.34);
  --v-perem:rgba(60,100,150,.45);
  --v-pontker:rgba(255,255,255,.92);
  --v-cimke:#16202e; --v-cimkeker:rgba(255,255,255,.94); --v-cimkekiem:#7c5410;
  --szoveg:#2b3646; --kep-felirat:rgba(20,30,45,.38);
  --kep-vil1:88%; --kep-vil2:79%; --kep-tel:26%;
}
#app[data-tema="sotet"]{
  color-scheme: dark;
  --ej:#0a1120; --ej2:#0d1627;
  --tinta:#e8eef8; --halk:#8fa0bd; --halkabb:#6b7c99;
  --arany:#e3b04b; --arany-halk:#8a6d31;
  --r1:#b0554a; --r2:#cf8c3e; --r3:#519c8f; --r4:#3ed9a4;
  --uveg:rgba(16,27,48,.82); --uvegker:rgba(140,165,205,.18);
  --mezo:rgba(8,14,26,.55);
  --v-csillag:rgba(180,205,240,1);
  --v-fenykor:rgba(80,130,200,.20);
  --v-ocean1:#16294a; --v-ocean2:#0c1729;
  --v-halo:rgba(124,158,208,.11);
  --v-fold:#1c2c44; --v-foldker:rgba(122,152,198,.22);
  --v-perem:rgba(150,185,235,.35);
  --v-pontker:rgba(8,14,26,.85);
  --v-cimke:rgba(226,236,250,.88); --v-cimkeker:rgba(8,14,26,.92); --v-cimkekiem:#f3e2bd;
  --szoveg:#cfd9ea; --kep-felirat:rgba(233,240,252,.42);
  --kep-vil1:22%; --kep-vil2:13%; --kep-tel:20%;
}
#app, #app *{box-sizing:border-box}
#app{
  position:relative; width:100%; overflow:hidden;
  height:clamp(500px, 76vh, 900px);
  background:var(--ej); color:var(--tinta);
  font-family:var(--f-szoveg); font-size:15px; line-height:1.5;
  border-radius:14px; -webkit-text-size-adjust:100%;
  contain:layout paint;
}
#app canvas{display:block; position:absolute; inset:0; touch-action:none; cursor:grab}
#app canvas.fog{cursor:grabbing}
#app .fejlec{
  position:absolute; left:0; right:0; top:0; z-index:35;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:var(--ej2); border-bottom:1px solid var(--uvegker);
  pointer-events:none;
}
#app .fejlec > *{pointer-events:auto}
#app .marka{display:flex; flex-direction:column; gap:1px; margin-right:auto; min-width:0}
#app .marka b{
  font-family:var(--f-cim); font-weight:600; font-size:20px; letter-spacing:-.01em;
  line-height:1.15; color:var(--tinta);
}
#app .marka span{font-size:11.5px; color:var(--halkabb); letter-spacing:.07em; text-transform:uppercase}
#app .kereso{position:relative; width:min(280px,46vw)}
#app .kereso input{
  width:100%; padding:9px 12px 9px 34px; border-radius:10px;
  background:var(--mezo); border:1px solid var(--uvegker); color:var(--tinta);
  font:inherit; font-size:14px; backdrop-filter:blur(10px);
}
#app .kereso input::placeholder{color:var(--halkabb)}
#app .kereso input:focus{outline:2px solid var(--arany); outline-offset:1px; border-color:transparent}
#app .kereso svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.55}
#app .talalatok{
  position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:52vh; overflow-y:auto;
  background:var(--uveg); backdrop-filter:blur(14px);
  border:1px solid var(--uvegker); border-radius:12px; padding:5px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
#app .talalatok button{
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  width:100%; text-align:left; background:none; border:0; color:var(--tinta);
  font:inherit; font-size:14px; padding:7px 9px; border-radius:8px; cursor:pointer;
}
#app .talalatok button:hover, #app .talalatok button:focus-visible{background:rgba(227,176,75,.14); outline:none}
#app .talalatok .nincs{margin:0; padding:9px 10px; font-size:13px; color:var(--halkabb)}
#app .talalatok em{font-style:normal; color:var(--halkabb); font-size:12px; white-space:nowrap}
#app .kocka{
  background:var(--uveg); border:1px solid var(--uvegker); color:var(--tinta);
  backdrop-filter:blur(10px); border-radius:10px; padding:9px 13px;
  font:inherit; font-size:13.5px; cursor:pointer; white-space:nowrap;
}
#app .kocka:hover{border-color:var(--arany-halk); color:var(--arany)}
#app .kocka:focus-visible{outline:2px solid var(--arany); outline-offset:1px}
#app .temagomb{width:40px; padding:0; display:grid; place-items:center}
#app .temagomb svg{grid-area:1/1}
#app .temagomb .nap{display:none}
#app[data-tema="sotet"] .temagomb .hold{display:none}
#app[data-tema="sotet"] .temagomb .nap{display:block}
#app .honapsav{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--ej2); border-top:1px solid var(--uvegker);
  pointer-events:none;
}
#app .honapsav-belso{pointer-events:auto; max-width:820px; margin:0 auto}
#app .honapsav-cimke{
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--halkabb); margin:0 0 7px; display:flex; justify-content:space-between; gap:12px;
}
#app .honapsav-cimke b{color:var(--arany); font-weight:500; letter-spacing:0; text-transform:none; font-size:12.5px}
#app .chipek{display:flex; gap:5px; overflow-x:auto; padding-bottom:3px; scrollbar-width:thin}
#app .chipek::-webkit-scrollbar{height:4px}
#app .chipek::-webkit-scrollbar-thumb{background:var(--foldker); border-radius:4px}
#app .chip{
  flex:0 0 auto; background:var(--mezo); border:1px solid var(--uvegker);
  color:var(--halk); font:inherit; font-size:13px; padding:7px 11px;
  border-radius:9px; cursor:pointer; backdrop-filter:blur(10px);
  font-variant-numeric:tabular-nums;
}
#app .chip:hover{color:var(--tinta)}
#app .chip:focus-visible{outline:2px solid var(--arany); outline-offset:1px}
#app .chip[aria-pressed="true"]{background:var(--arany); border-color:var(--arany); color:#20160a; font-weight:600}
#app .szurogomb{position:relative}
#app .szurogomb b{
  position:absolute; top:-6px; right:-6px; min-width:17px; height:17px;
  border-radius:9px; background:var(--arany); color:#20160a;
  font-size:11px; font-weight:700; line-height:17px; text-align:center; padding:0 4px;
}
#app .szuro{
  position:absolute; z-index:40; top:100%; right:16px; margin-top:8px;
  width:min(320px, calc(100vw - 32px));
  background:var(--ej2); border:1px solid var(--uvegker); border-radius:13px;
  padding:14px; box-shadow:0 18px 44px rgba(4,10,22,.32);
  max-height:min(62vh, 440px); overflow:auto;
}
#app .szuro[hidden]{display:none}
#app .szuro h3{
  margin:0 0 7px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--halkabb); font-weight:600;
}
#app .szuro h3:not(:first-child){margin-top:14px}
#app .szuro .sor{display:flex; flex-wrap:wrap; gap:5px}
#app .szuro .chip{font-size:12.5px; padding:6px 10px}
#app .szuro-lab{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:15px; padding-top:12px; border-top:1px solid var(--uvegker);
}
#app .szuro-lab span{font-size:12.5px; color:var(--halk)}
#app .szuro-lab button{
  background:none; border:0; color:var(--arany); font:inherit; font-size:13px;
  cursor:pointer; padding:4px 2px; text-decoration:underline;
}
#app .utinfo{
  margin:15px 0 0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px;
  font-size:13.5px; align-items:baseline;
}
#app .utinfo i{
  font-style:normal; color:var(--halkabb); font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
#app .utinfo b{color:var(--szoveg); font-weight:500}
#app .hasonlo{margin:16px 0 0}
#app .hasonlo p{
  margin:0 0 7px; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--halkabb); font-weight:600;
}
#app .hasonlo .sor{display:flex; flex-wrap:wrap; gap:6px}
#app .hasonlo button{
  background:var(--mezo); border:1px solid var(--uvegker); color:var(--halk);
  font:inherit; font-size:12.5px; padding:6px 10px; border-radius:9px; cursor:pointer;
}
#app .hasonlo button:hover{color:var(--arany); border-color:var(--arany-halk)}
#app .hasonlo button em{font-style:normal; color:var(--halkabb); font-size:11.5px}
#app .megoszt{
  margin-top:10px; width:100%; display:flex; align-items:center; justify-content:center;
  gap:7px; padding:9px 12px; border-radius:10px; cursor:pointer;
  background:var(--mezo); border:1px solid var(--uvegker); color:var(--halk);
  font:inherit; font-size:13px;
}
#app .megoszt:hover{color:var(--arany); border-color:var(--arany-halk)}
#app .jelmagy{
  position:absolute; left:16px; bottom:88px; z-index:15;
  display:flex; flex-direction:column; gap:5px;
  background:var(--uveg); backdrop-filter:blur(10px);
  border:1px solid var(--uvegker); border-radius:11px; padding:10px 12px;
  font-size:12px; color:var(--halk);
}
#app .jelmagy div{display:flex; align-items:center; gap:7px}
#app .jelmagy i{width:9px; height:9px; border-radius:50%; display:block}
#app .eszkozok{
  position:absolute; z-index:18; left:16px; top:74px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
#app .kerek{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--uveg); backdrop-filter:blur(10px);
  border:1px solid var(--uvegker); border-radius:9px; color:var(--halk);
  cursor:pointer; padding:0;
}
#app .kerek:hover{color:var(--tinta); border-color:var(--foldker)}
#app .kerek:focus-visible{outline:2px solid var(--arany); outline-offset:1px}
#app .vissza{
  position:relative; z-index:18;
  background:var(--uveg); backdrop-filter:blur(10px);
  border:1px solid var(--uvegker); border-radius:10px; color:var(--halk);
  font:inherit; font-size:13px; padding:8px 12px; cursor:pointer;
}
#app .vissza{
  background:var(--uveg); backdrop-filter:blur(10px);
  border:1px solid var(--uvegker); border-radius:10px; color:var(--halk);
  font:inherit; font-size:13px; padding:8px 12px; cursor:pointer;
}
#app .vissza:hover{color:var(--tinta); border-color:var(--foldker)}
#app .vissza:focus-visible{outline:2px solid var(--arany); outline-offset:1px}
#app .vissza[hidden]{display:none!important}
#app .panel{
  position:absolute; z-index:30; right:16px; top:74px; width:352px;
  max-height:calc(100% - 168px); overflow-y:auto;
  background:var(--uveg); backdrop-filter:blur(18px);
  border:1px solid var(--uvegker); border-radius:var(--sug);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  padding:18px;
}
#app .panel[hidden]{display:none!important}
#app .panel-kep{
  position:relative; width:100%; aspect-ratio:16/10; max-width:100%; max-height:152px;
  border-radius:11px; overflow:hidden; margin:0 0 14px;
  display:grid; place-items:center;
}
#app .panel-kep img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
#app .panel-kep .helyett{
  font-family:var(--f-cim); font-weight:600; font-size:16px;
  color:var(--kep-felirat); letter-spacing:.01em;
  text-align:center; padding:0 16px; text-wrap:balance;
}
#app .panel-fej{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
#app .panel h2:focus{outline:none}
#app .panel h2{
  font-family:var(--f-cim); font-weight:600; font-size:25px; line-height:1.12;
  margin:0 0 3px; letter-spacing:-.015em; text-wrap:balance;
}
#app .panel .hol{font-size:12.5px; color:var(--halkabb); letter-spacing:.02em}
#app .bezar{
  background:none; border:1px solid var(--uvegker); border-radius:8px;
  color:var(--halk); width:28px; height:28px; flex:0 0 auto; cursor:pointer;
  font-size:16px; line-height:1; display:grid; place-items:center;
}
#app .bezar:hover{color:var(--tinta); border-color:var(--foldker)}
#app .bezar:focus-visible{outline:2px solid var(--arany); outline-offset:1px}
#app .verdikt{
  margin:14px 0 0; padding:10px 12px; border-radius:10px;
  border-left:3px solid var(--arany); background:rgba(227,176,75,.09);
  font-size:14px;
}
#app .verdikt b{display:block; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--arany); margin-bottom:2px; font-weight:600}
#app .evsav{margin:16px 0 0}
#app .evsav-cim{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--halkabb); margin-bottom:7px}
#app .evrac{display:grid; grid-template-columns:repeat(12,1fr); gap:3px}
#app .evrac button{
  border:0; padding:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
#app .evrac button:focus-visible{outline:2px solid var(--arany); outline-offset:2px; border-radius:4px}
#app .evrac s{display:block; width:100%; height:26px; border-radius:3px; text-decoration:none}
#app .evrac u{
  font-size:9.5px; text-decoration:none; color:var(--halkabb);
  letter-spacing:.02em;
}
#app .evrac button[data-most="1"] s{box-shadow:0 0 0 2px var(--tinta)}
#app .evrac button[data-most="1"] u{color:var(--tinta); font-weight:600}
#app .miert{margin:16px 0 0; font-size:14.5px; color:var(--szoveg); line-height:1.55}
#app .latnivalok{margin:16px 0 0}
#app .latnivalok p{
  margin:0 0 7px; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--halkabb); font-weight:600;
}
#app .latnivalok ol{margin:0; padding:0; list-style:none; counter-reset:ln}
#app .latnivalok li{
  counter-increment:ln; position:relative; padding:5px 0 5px 25px;
  font-size:13.8px; color:var(--szoveg); line-height:1.4;
  border-top:1px solid var(--uvegker);
}
#app .latnivalok li:first-child{border-top:0}
#app .latnivalok li::before{
  content:counter(ln); position:absolute; left:0; top:5px;
  width:17px; height:17px; border-radius:50%; text-align:center;
  font-size:10.5px; line-height:17px; font-weight:600;
  color:var(--arany); background:rgba(227,176,75,.13);
}
#app .esemenyek{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
#app .esemenyek li{
  font-size:13px; color:var(--halk); padding-left:15px; position:relative; line-height:1.45;
}
#app .verdikt .jobbkor{display:block; margin-top:4px; color:var(--halk); font-size:13px}
#app .esemenyek li.most{color:var(--arany); font-weight:500}
#app .esemenyek li.most::before{background:var(--arany)}
#app .esemenyek li::before{
  content:""; position:absolute; left:0; top:8px; width:5px; height:5px;
  border-radius:50%; background:var(--arany-halk);
}
#app .gombok{display:grid; gap:7px; margin:18px 0 0}
#app .gombok a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 13px; border-radius:10px; text-decoration:none;
  background:rgba(227,176,75,.1); border:1px solid rgba(227,176,75,.3);
  color:var(--arany); font-size:14px; font-weight:500;
}
#app .gombok a:hover{background:rgba(227,176,75,.19)}
#app .gombok a:focus-visible{outline:2px solid var(--arany); outline-offset:1px}
#app .gombok a span:last-child{opacity:.6; font-size:13px}
#app .labjegyzet{margin:13px 0 0; font-size:11.5px; color:var(--halkabb); line-height:1.45}
#app .sug{
  position:absolute; left:50%; transform:translateX(-50%); top:86px; z-index:12;
  font-size:12.5px; color:var(--halkabb); background:var(--uveg);
  border:1px solid var(--uvegker); border-radius:20px; padding:6px 14px;
  backdrop-filter:blur(10px); transition:opacity .5s;
}
#app .sug[hidden]{display:none!important}
@media (max-width:860px){
#app{height:clamp(440px, 76vh, 680px)}
#app .jelmagy{display:none}
#app .sug{display:none!important}
#app .fejlec{
    padding:calc(9px + env(safe-area-inset-top,0px)) 12px 9px;
    gap:8px; flex-wrap:nowrap;
  }
#app .marka b{font-size:17px}
#app .marka span{display:none}
#app .marka{margin-right:0; flex:0 0 auto}
#app .kereso{flex:1 1 auto; width:auto; min-width:0}
#app .kereso input{padding:9px 10px 9px 31px}
#app .kocka{
    flex:0 0 auto; width:40px; height:38px; padding:0; font-size:0;
    display:grid; place-items:center;
  }
#app .kocka::before{content:"✦"; font-size:17px; line-height:1}
#app .honapsav{
    background:var(--ej2);
    border-top:1px solid var(--uvegker); z-index:40;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
  }
#app .honapsav-cimke{
    display:flex; margin-bottom:6px; font-size:11px;
  }
#app .honapsav-cimke span{display:none}
#app .honapsav-cimke b{font-size:11.5px; margin-left:auto}
#app .panel{
    right:0; left:0; top:auto; bottom:0; width:auto;
    border-radius:16px 16px 0 0; border-left:0; border-right:0; border-bottom:0;
    max-height:54%; overscroll-behavior:contain;
    padding:14px 16px calc(96px + env(safe-area-inset-bottom,0px));
  }
#app .panel h2{font-size:22px}
#app .panel-kep{aspect-ratio:auto; height:112px; margin-bottom:12px}
#app .panel{max-height:58%}
#app .eszkozok{left:12px; top:calc(58px + env(safe-area-inset-top,0px)); gap:5px}
#app .kerek{width:32px; height:32px}
#app .vissza{font-size:12px; padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){
#app *{transition:none!important}}
#app .marka{display:none}


/* A gömb alatti átvezető sor – a burkon belül, a tartalommal egy vonalban. */
.gomb-alatt{
  margin:16px 0 0; font-size:14.5px; line-height:1.6;
  padding:13px 16px; border-radius:11px;
  background:rgba(120,140,170,.07);
  border:1px solid rgba(120,140,170,.22);
}