/* Grantis pénzügyi asszisztens – megjelenés (Grantis arculati kézikönyv alapján) */

:root {
  --navy: #232D3D;
  --navy-2: #2A3547;
  --navy-3: #1C2533;
  --vonal: #364256;
  --vonal-2: #44516A;
  --vonal-3: #4A5770;
  --arany: #FFBD00;
  --arany-vilagos: #FFD24D;
  --arany-hatter: #FFF6D6;
  --arany-sotet: #B38400;
  --kek: #2376E1;
  --link: #1F5FBF;
  --hatter: #F5F6F8;
  --feher: #FFFFFF;
  --szoveg: #232D3D;
  --szurke: #4D4E55;
  --halvany: #6B6C73;
  --keret: #E1E4E9;
  --keret-2: #D3D7DE;
  --sotet-halvany: #A9B3C3;
  --sotet-szoveg: #C3CAD6;
  --zold: #3CCB7F;
  --zold-sotet: #2D7A4F;
  --cim-betu: 'Montserrat', 'Open Sans', sans-serif;
  --betu: 'Open Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: var(--betu); color: var(--szoveg); background: var(--navy); -webkit-font-smoothing: antialiased; }
body.chat-mod { background: var(--hatter); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font-family: inherit; }
a { color: var(--link); }
.rejtett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.felirat { font-family: var(--cim-betu); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; color: var(--sotet-halvany); margin: 0; }
.felirat.arany { color: var(--arany); }
.racs { background-image: radial-gradient(rgba(229, 229, 229, 0.07) 1px, transparent 1px); background-size: 28px 28px; }
:focus-visible { outline: 2px solid var(--arany); outline-offset: 2px; }

/* ---------- gombok */
.gomb-vonal { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--vonal); border-radius: 8px; background: transparent; color: #E5E5E5; font-size: 13px; text-decoration: none; cursor: pointer; }
.gomb-vonal:hover { border-color: var(--vonal-3); color: var(--feher); }
.gomb-vonal[aria-pressed="true"] { background: var(--arany); border-color: var(--arany); color: var(--navy); font-weight: 600; }
.gomb-arany { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: none; border-radius: 10px; background: var(--arany); color: var(--navy); font-family: var(--cim-betu); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; }
.gomb-arany:hover { background: var(--arany-vilagos); }
.gomb-feher { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 8px; background: var(--feher); color: var(--navy); font-family: var(--cim-betu); font-size: 14px; font-weight: 600; text-decoration: none; }

/* ---------- belépés */
.belepes { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; background-color: var(--navy); }
.belepes-kartya { position: relative; width: 100%; max-width: 380px; background: var(--navy-2); border: 1px solid var(--vonal-2); border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; color: var(--feher); }
.belepes-logo { height: 30px; align-self: flex-start; }
.belepes-kartya label { font-size: 14px; color: var(--sotet-szoveg); margin-top: 8px; }
.belepes-kartya input { min-height: 48px; border-radius: 10px; border: 1px solid var(--vonal-2); background: var(--navy); color: var(--feher); padding: 0 14px; font-size: 16px; font-family: inherit; }
.belepes-hiba { margin: 0; color: #FFD9D9; background: rgba(191, 35, 36, 0.25); border: 1px solid rgba(191, 35, 36, 0.6); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.5; }

/* ---------- fejléc */
.fejlec { background: var(--navy); border-bottom: 1px solid var(--vonal); position: sticky; top: 0; z-index: 20; }
.fejlec-belso { max-width: 1440px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.logo-gomb { background: none; border: none; padding: 4px 0; cursor: pointer; display: flex; }
.logo-gomb img { height: 26px; display: block; }
.fejlec-cimke { flex: 1; }
.fejlec-gombok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.elerheto { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sotet-halvany); margin-right: 6px; }
.pont-zold { width: 8px; height: 8px; border-radius: 50%; background: var(--zold); box-shadow: 0 0 0 4px rgba(60, 203, 127, 0.15); }
body.nyito-mod .csak-chat { display: none; }

/* ---------- nyitóképernyő */
.nyito { position: relative; overflow: hidden; color: var(--feher); background-color: var(--navy); min-height: calc(100vh - 65px); display: flex; flex-direction: column; }
.vizjel { position: absolute; right: -140px; top: 100px; width: 620px; height: 620px; opacity: 0.03; pointer-events: none; }
.nyito-belso { position: relative; flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 64px 24px 44px; display: flex; flex-direction: column; gap: 40px; }
.hos { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.szemoldok { margin: 0; font-family: var(--cim-betu); font-size: 12px; font-weight: 600; letter-spacing: 3px; color: var(--arany); display: flex; align-items: center; gap: 12px; }
.szemoldok span { width: 28px; height: 1px; background: var(--arany); }
.hos h1 { margin: 0; font-family: var(--cim-betu); font-size: clamp(34px, 5vw, 52px); line-height: 1.12; font-weight: 300; letter-spacing: -0.5px; }
.hos h1 strong { font-weight: 600; }
.hos-szoveg { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.65; color: var(--sotet-szoveg); }

.kerdes-urlap { display: flex; align-items: flex-end; gap: 10px; border-radius: 14px; padding: 8px 8px 8px 18px; }
.kerdes-urlap textarea { flex: 1; min-width: 0; border: none; outline: none; resize: none; background: transparent; font-family: inherit; font-size: 17px; line-height: 1.5; padding: 13px 0; max-height: 160px; }
.kerdes-urlap .kuldes, .kerdes-urlap .leallit { flex: none; width: 52px; height: 52px; border: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kerdes-urlap .kuldes { background: var(--arany); color: var(--navy); }
.kerdes-urlap .kuldes svg { stroke-width: 2.4; width: 20px; height: 20px; }
.kerdes-urlap .kuldes:disabled { opacity: 0.45; cursor: default; }
.kerdes-urlap .leallit { background: var(--navy); color: var(--feher); }
.kerdes-urlap .leallit svg { fill: currentColor; stroke: none; width: 14px; height: 14px; }
.kerdes-urlap.sotet { background: var(--navy-2); border: 1px solid var(--vonal-2); box-shadow: 0 0 0 4px rgba(255, 189, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.25); }
.kerdes-urlap.sotet:focus-within { border-color: rgba(255, 189, 0, 0.6); }
.kerdes-urlap.sotet textarea { color: var(--feher); }
.kerdes-urlap.sotet textarea::placeholder { color: #8C97AA; }
.ikon-buborek { color: var(--sotet-halvany); width: 20px; height: 20px; align-self: center; }
.kerdes-urlap.vilagos { background: var(--feher); border: 1px solid var(--keret-2); padding: 6px 6px 6px 18px; }
.kerdes-urlap.vilagos:focus-within { border-color: var(--arany-sotet); box-shadow: 0 0 0 3px rgba(255, 189, 0, 0.18); }
.kerdes-urlap.vilagos textarea { color: var(--szoveg); font-size: 16px; padding: 11px 0; }
.kerdes-urlap.vilagos .kuldes, .kerdes-urlap.vilagos .leallit { width: 46px; height: 46px; border-radius: 9px; }

.bizalom-sor { list-style: none; margin: -24px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 13px; color: var(--sotet-halvany); }
.bizalom-sor li { display: flex; align-items: center; gap: 8px; }
.bizalom-sor svg { color: var(--arany); width: 15px; height: 15px; }

.temak, .gyakori { display: flex; flex-direction: column; gap: 16px; }
.tema-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tema { text-align: left; background: var(--navy-2); border: 1px solid var(--vonal); border-radius: 12px; padding: 16px 18px; display: flex; gap: 14px; align-items: center; cursor: pointer; min-height: 84px; color: var(--feher); transition: border-color .15s, background .15s; }
.tema:hover { border-color: rgba(255, 189, 0, 0.55); background: #2E3A4E; }
.tema-ikon { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--vonal-3); display: flex; align-items: center; justify-content: center; color: var(--arany); flex: none; }
.tema-ikon svg { width: 20px; height: 20px; }
.tema-szoveg { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tema-cim { font-size: 16px; font-weight: 600; line-height: 1.35; }
.tema-al { font-size: 13px; line-height: 1.45; color: var(--sotet-halvany); }
.tema > svg { color: #6B7891; width: 16px; height: 16px; }

.chipek { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 14px; line-height: 1.35; text-align: left; border-radius: 20px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.nyito .chip { color: var(--feher); background: transparent; border: 1px solid var(--vonal-2); }
.nyito .chip:hover { border-color: rgba(255, 189, 0, 0.55); }

.bizalmi-szamok { border-top: 1px solid var(--vonal); padding-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
.bizalmi-szamok div { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--sotet-halvany); }
.bizalmi-szamok .szam { font-family: var(--cim-betu); font-size: 34px; font-weight: 300; color: var(--feher); line-height: 1.2; }
.bizalmi-szamok em { font-style: normal; color: var(--arany); }

.nyito-lab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: 960px; width: 100%; margin: 0 auto; padding: 20px 24px 28px; border-top: 1px solid var(--vonal); font-size: 13px; line-height: 1.5; color: var(--sotet-halvany); }
.nyito-lab > span { max-width: 560px; }

/* ---------- beszélgetés */
.chat-elrendezes { display: flex; align-items: stretch; min-height: calc(100vh - 65px); }
.chat-fo { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.uzenetek { flex: 1; width: 100%; max-width: 800px; margin: 0 auto; padding: 36px 24px 24px; display: flex; flex-direction: column; gap: 26px; }
.chat-also { position: sticky; bottom: 0; background: var(--hatter); border-top: 1px solid var(--keret); }
.chat-also > * { max-width: 800px; margin-left: auto; margin-right: auto; }
.chat-also form { margin-top: 14px; margin-left: max(24px, calc((100% - 752px) / 2)); margin-right: max(24px, calc((100% - 752px) / 2)); }
.adat-megjegyzes { margin: 8px auto 16px; padding: 0 24px; font-size: 12px; line-height: 1.5; color: var(--halvany); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.adat-megjegyzes svg { width: 13px; height: 13px; }

.u-latogato { display: flex; justify-content: flex-end; }
.u-latogato p { margin: 0; max-width: 560px; background: var(--navy); color: var(--feher); font-size: 16px; line-height: 1.55; padding: 12px 18px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }

.u-asszisztens { display: flex; gap: 14px; align-items: flex-start; }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.avatar img { width: 20px; height: 20px; }
.u-test { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.u-szoveg { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.u-szoveg p { margin: 0 0 12px; }
.u-szoveg p:last-child { margin-bottom: 0; }
.u-szoveg ul, .u-szoveg ol { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.u-szoveg sup.hiv { font-size: 11px; font-weight: 700; color: var(--link); cursor: pointer; margin-left: 1px; }
.u-szoveg sup.hiv:hover { text-decoration: underline; }
.kurzor { display: inline-block; width: 8px; height: 17px; background: var(--arany); margin-left: 3px; vertical-align: -3px; border-radius: 1px; animation: villog 1s steps(2, start) infinite; }
@keyframes villog { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .kurzor { animation: none; } }

.allapot { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--szurke); background: var(--feher); border: 1px solid var(--keret); border-radius: 20px; padding: 8px 14px; }
.pottyok { display: inline-flex; gap: 4px; }
.pottyok i { width: 6px; height: 6px; border-radius: 50%; background: var(--arany-sotet); animation: potty 1.2s infinite ease-in-out; }
.pottyok i:nth-child(2) { animation-delay: .15s; }
.pottyok i:nth-child(3) { animation-delay: .3s; }
@keyframes potty { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.szakerto { align-self: flex-start; display: flex; align-items: center; gap: 10px; background: var(--feher); border: 1px solid var(--keret); border-radius: 12px; padding: 10px 14px; }
.monogram { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--arany); font-family: var(--cim-betu); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.monogram img { width: 17px; height: 17px; }
.monogram.kicsi { width: 28px; height: 28px; font-size: 10px; }
.monogram.kicsi img { width: 14px; height: 14px; }
.szakerto-szoveg { display: flex; flex-direction: column; gap: 1px; }
.szakerto-elo { font-size: 13px; color: var(--szurke); }
.szakerto-nev { font-size: 14px; font-weight: 700; color: var(--szoveg); }
.szakerto-szerep { font-size: 12px; color: var(--halvany); }

.valaszto { display: flex; flex-wrap: wrap; gap: 8px; }
.valaszto button { font-size: 14px; color: var(--szurke); background: var(--feher); border: 1px solid #DADDE3; border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; text-align: left; line-height: 1.35; }
.valaszto button:hover { border-color: var(--arany-sotet); color: var(--szoveg); }
.valaszto button[aria-pressed="true"] { font-weight: 600; color: var(--szoveg); background: var(--arany-hatter); border: 1.5px solid var(--arany); }
.valaszto button:disabled:not([aria-pressed="true"]) { opacity: .5; cursor: default; }

.fogalom-jel { font: inherit; color: var(--szoveg); background: var(--arany-hatter); border: none; border-bottom: 1.5px dotted var(--arany-sotet); padding: 0 2px; cursor: help; border-radius: 2px; }
.fogalom-buborek { position: fixed; z-index: 50; max-width: 380px; width: calc(100vw - 32px); background: var(--navy); color: var(--feher); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 32px rgba(35, 45, 61, 0.3); }
.fogalom-buborek[hidden] { display: none; }
.fogalom-cim { margin: 0; font-size: 16px; font-weight: 700; padding-right: 28px; }
.fogalom-szoveg { margin: 0; font-size: 14px; line-height: 1.6; color: #D5DAE2; }
.fogalom-buborek a { font-size: 13px; font-weight: 600; color: var(--arany); text-decoration: none; }
.fogalom-bezar { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: none; background: transparent; color: var(--sotet-halvany); font-size: 22px; cursor: pointer; border-radius: 8px; }

.forras-blokk { display: flex; flex-direction: column; gap: 10px; }
.forras-cim { margin: 0; font-family: var(--cim-betu); font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--halvany); display: flex; align-items: center; gap: 8px; }
.forras-cim svg { width: 14px; height: 14px; stroke-width: 2.2; }
.forras-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.forras { text-decoration: none; color: var(--szoveg); background: var(--feher); border: 1px solid var(--keret); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, box-shadow .15s; }
.forras:hover, .forras.kiemelt { border-color: var(--arany); box-shadow: 0 4px 14px rgba(35, 45, 61, 0.08); }
.forras-fej { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.forras-szam { font-weight: 700; color: var(--navy); background: var(--arany); border-radius: 4px; padding: 1px 7px; }
.forras-datum { color: var(--halvany); display: inline-flex; align-items: center; gap: 5px; }
.forras-datum.friss { color: var(--zold-sotet); }
.forras-datum.friss::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2D9C5F; }
.forras-nev { font-size: 14px; font-weight: 600; line-height: 1.45; }
.forras-tipus { font-size: 12px; color: var(--arany-sotet); font-weight: 600; margin-top: -4px; }
.forras-szerzo { display: flex; align-items: center; gap: 8px; border-top: 1px solid #EEF0F3; padding-top: 10px; margin-top: auto; }
.forras-szerzo span { display: flex; flex-direction: column; gap: 1px; }
.forras-szerzo b { font-size: 12px; }
.forras-szerzo small { font-size: 11px; line-height: 1.35; color: var(--halvany); }

.u-lab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--keret); padding-top: 12px; }
.u-lab > span { font-size: 13px; line-height: 1.5; color: var(--halvany); max-width: 460px; }
.ertekeles { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--halvany); }
.ertekeles button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--keret); background: var(--feher); color: var(--szurke); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ertekeles button[aria-pressed="true"] { background: var(--arany-hatter); border-color: var(--arany); color: var(--navy); }
.ertekeles button svg { width: 16px; height: 16px; }

.tovabb { display: flex; flex-direction: column; gap: 10px; }
.tovabb .chip { color: var(--szoveg); background: var(--feher); border: 1px solid #DADDE3; }
.tovabb .chip:hover { border-color: var(--arany-sotet); }

.tanacsado-kartya { background-color: var(--navy); color: var(--feher); border-radius: 14px; padding: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.tanacsado-kartya > div { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 320px; }
.tk-ikon { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--arany); color: var(--arany); display: flex; align-items: center; justify-content: center; }
.tanacsado-kartya p { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.55; color: var(--sotet-szoveg); }
.tanacsado-kartya b { font-size: 16px; color: var(--feher); }
.tanacsado-kis { font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none; align-self: flex-start; }

.hiba-uzenet { align-self: flex-start; display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.5; color: #7A1A1B; background: #FCECEC; border: 1px solid #F2C4C4; border-radius: 10px; padding: 10px 14px; }
.hiba-uzenet button { font: inherit; font-weight: 600; color: var(--navy); background: var(--feher); border: 1px solid #F2C4C4; border-radius: 8px; padding: 6px 12px; cursor: pointer; }

/* ---------- bemutató panel */
.bemutato-panel { flex: 1 1 360px; max-width: 460px; background-color: var(--navy-3); color: var(--feher); border-left: 1px solid var(--vonal); padding: 30px 26px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; }
.bemutato-panel[hidden] { display: none; }
.bemutato-panel h2 { margin: 0; font-family: var(--cim-betu); font-size: 22px; font-weight: 400; line-height: 1.3; }
.panel-leiras, .panel-ures { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--sotet-halvany); }
.lepesek { list-style: none; margin: 0; padding: 0; }
.lepes { display: flex; gap: 14px; }
.lepes-jel { display: flex; flex-direction: column; align-items: center; }
.lepes-jel b { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--arany); color: var(--arany); font-family: var(--cim-betu); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.lepes:last-child .lepes-jel b { background: var(--arany); color: var(--navy); }
.lepes-jel i { flex: 1; width: 1px; background: var(--vonal); margin: 6px 0; }
.lepes-tartalom { flex: 1; min-width: 0; padding-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.lepes-tartalom > b { font-size: 15px; }
.lepes-tartalom > p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sotet-halvany); }
.cimkek { display: flex; flex-wrap: wrap; gap: 6px; }
.cimkek span { font-size: 12px; color: #E5E5E5; border: 1px solid var(--vonal-2); border-radius: 6px; padding: 3px 8px; }
.talalat { background: var(--navy); border: 1px solid var(--vonal); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 5px; }
.talalat-fej { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--sotet-halvany); }
.talalat-fej .hasznalt { color: var(--zold); }
.talalat-fej .nem-hasznalt { color: #8C97AA; }
.talalat b { font-size: 13px; line-height: 1.4; }
.talalat small { font-size: 12px; line-height: 1.5; color: var(--sotet-halvany); }
.pont-sav { height: 3px; border-radius: 2px; background: var(--vonal); overflow: hidden; }
.pont-sav i { display: block; height: 100%; background: var(--arany); }
.ellenorzo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--sotet-szoveg); }
.ellenorzo li { display: flex; gap: 8px; align-items: flex-start; }
.ellenorzo svg { color: var(--zold); stroke-width: 2.4; width: 15px; height: 15px; margin-top: 2px; }
.idok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.idok div { background: var(--navy); border: 1px solid var(--vonal); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.idok b { font-family: var(--cim-betu); font-size: 16px; font-weight: 500; }
.idok small { font-size: 11px; color: var(--sotet-halvany); }

/* ---------- kisebb képernyők */
@media (max-width: 900px) {
  .bemutato-panel { position: static; height: auto; max-width: none; border-left: none; border-top: 1px solid var(--vonal); }
  .chat-elrendezes { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .fejlec-belso { padding: 10px 16px; }
  .fejlec-cimke, .elerheto, .gomb-vonal span { display: none; }
  .gomb-vonal { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 10px; }
  .logo-gomb img { height: 22px; }
  .fejlec-cimke { display: none; }
  .fejlec-belso { justify-content: space-between; }
  .nyito-belso { padding: 40px 16px 32px; gap: 32px; }
  .hos-szoveg { font-size: 16px; }
  .bizalom-sor { justify-content: flex-start; margin-top: -18px; }
  .uzenetek { padding: 22px 16px 18px; gap: 20px; }
  .u-asszisztens { gap: 10px; }
  .avatar { width: 30px; height: 30px; border-radius: 8px; }
  .avatar img { width: 17px; height: 17px; }
  .u-szoveg { font-size: 15px; }
  .forras-racs { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .forras { scroll-snap-align: start; }
  .chat-also form { margin-left: 16px; margin-right: 16px; margin-top: 10px; }
  .adat-megjegyzes { margin: 8px auto 14px; padding: 0 16px; font-size: 11px; }
  .szemoldok { font-size: 11px; letter-spacing: 2px; }
  .szemoldok span { display: none; }
  .kerdes-urlap.sotet textarea { font-size: 16px; }
  .vizjel { width: 420px; height: 420px; right: -160px; }
  .fogalom-buborek { left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; max-width: none; }
}

/* ---------- 1–10 értékelés (tesztverzió) */
.pontozo { border: 1px dashed var(--keret-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--feher); }
.pontozo-cim { margin: 0; font-size: 14px; font-weight: 600; }
.pontozo-cim span { font-weight: 400; color: var(--halvany); font-size: 12px; }
.pontok { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 520px; }
.pontok button { min-height: 40px; border: 1px solid var(--keret-2); border-radius: 8px; background: var(--feher); color: var(--szurke); font-size: 14px; font-weight: 600; cursor: pointer; }
.pontok button:hover { border-color: var(--arany-sotet); }
.pontok button.kitoltve { background: var(--arany-hatter); border-color: var(--arany); color: var(--navy); }
.pontok button[aria-checked="true"] { background: var(--arany); border-color: var(--arany); color: var(--navy); }
.pontozo-skala { margin: 0; max-width: 520px; display: flex; justify-content: space-between; font-size: 11px; color: var(--halvany); }
.pontozo-megjegyzes { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pontozo-megjegyzes label { font-size: 13px; color: var(--szurke); }
.pontozo-megjegyzes textarea { font: inherit; font-size: 15px; border: 1px solid var(--keret-2); border-radius: 10px; padding: 10px 12px; resize: vertical; min-height: 64px; }
.pontozo-megjegyzes textarea:focus { outline: none; border-color: var(--arany-sotet); box-shadow: 0 0 0 3px rgba(255, 189, 0, 0.18); }
.pontozo-gombok { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pontozo-gombok .gomb-arany { min-height: 42px; font-size: 14px; padding: 0 16px; }
.pontozo-allapot { font-size: 13px; color: var(--zold-sotet); }
@media (max-width: 640px) {
  .pontok { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pontok button { min-height: 44px; }
}