/* Egyszerű nézet: a kapcsoló az oldalsávban és a nyitólap egy-töltős kártyája.
   Csak tokenek (var(--…)) és osztály-szelektorok - a theme.css utólagos
   tokenrétege az oldalsávot is átszínezi (világos módban fehér), ezért a
   kapcsoló sem hordhat beírt hexet: első kiadásban sötét pirula ült a fehér
   oldalsávon, halvány címkével, és a felhasználó nem vette észre. */

.nezet-valto{margin-top:auto;padding:14px 12px 6px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--hairline)}
.nezet-valto+.sidebar-bottom{margin-top:0}
.nezet-cimke{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:750}
.nezet-kapcsolo{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-3);align-self:stretch}
.nezet-kapcsolo button{flex:1;border:0;border-radius:999px;background:transparent;color:var(--ink-2);padding:8px 12px;font:750 13px/1.15 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.nezet-kapcsolo button:hover{color:var(--ink)}
.nezet-kapcsolo button.active{background:var(--accent-tint);color:var(--accent-ink);box-shadow:0 1px 4px rgba(24,43,70,.12)}

#egyszeru-nyitolap{display:flex;flex-direction:column;gap:20px}
.tolto-kartya{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:22px 24px;box-shadow:var(--card-shadow);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px}
.tolto-fo{display:flex;flex-direction:column;gap:18px;min-width:0}
.tolto-allapot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tolto-allapot strong{font-size:18px}
.tolto-pont{width:12px;height:12px;border-radius:999px;display:inline-block;background:var(--ink-3)}
.tolto-pont.tolt{background:var(--accent)}
.tolto-pont.szabad{background:var(--ok)}
.tolto-pont.hiba{background:var(--bad)}
.tolto-pont.var{background:var(--warn)}
.tolto-halvany{color:var(--ink-3);font-size:12.5px}
.tolto-hiba{margin:0;padding:10px 12px;border-radius:10px;background:var(--bad-tint);color:var(--bad-ink);font-weight:650;font-size:12.5px}
.tolto-csempek{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tolto-csempe{background:var(--surface-3);border-radius:12px;padding:14px;display:grid;gap:6px;align-content:start}
.tolto-csempe strong{font-size:36px;line-height:1;letter-spacing:-.06em;font-weight:650}
.tolto-csempe strong.nap{color:var(--ok-ink)}
.tolto-csempe small{color:var(--ink-2);font-weight:650}
.tolto-vezerlok{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tolto-vezerlok .tolto-stop{margin-left:auto}
.tolto-vezerlok .tolto-stop:disabled{opacity:.5;cursor:default}
.tolto-ma{display:flex;flex-direction:column;gap:10px}
.tolto-ma h3{font-size:15px;margin:0 0 4px;font-family:Inter,system-ui,sans-serif}
.tolto-ma .system-status.ok{background:var(--ok-tint);color:var(--ok-ink)}
.tolto-ma .system-status.warn{background:var(--warn-tint);color:var(--warn-ink)}
.tolto-listak{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px}
.tolto-panel{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;box-shadow:var(--card-shadow);overflow:hidden;padding:0 0 6px}
.tolto-panel>header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 12px}
.tolto-panel h3{font-size:15px;margin:0;font-family:Inter,system-ui,sans-serif}
.tolto-panel>header a{font-size:12px;font-weight:700;text-decoration:none;color:var(--live-ink)}
.tolto-tabla{border-collapse:collapse;width:100%}
.tolto-tabla th{text-align:left;font-size:12px;color:var(--ink-3);font-weight:700;padding:10px 20px;background:var(--surface-3)}
.tolto-tabla td{padding:12px 20px;border-bottom:1px solid var(--hairline-2);color:var(--ink);vertical-align:middle}
.tolto-tabla tr:last-child td{border-bottom:0}
.tolto-tabla .jobbra{text-align:right}
.tolto-kartya-sor{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-top:1px solid var(--hairline-2)}
.tolto-kartya-sor small{display:block;color:var(--ink-3)}
.tolto-jelzo{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.tolto-jelzo.ok{background:var(--ok-tint);color:var(--ok)}
.tolto-ures{padding:22px 24px}
.tolto-ures p{color:var(--ink-2);margin:8px 0 0}
.tolto-panel .tolto-halvany{padding:0 20px 14px;margin:0}
@media (max-width:1100px){.tolto-kartya,.tolto-listak{grid-template-columns:minmax(0,1fr)}}

/* A töltő és a kártya felvétele a nyitólapon (Otthon-csomag, 2026-09-13). Az
   RFID-lap és a töltőpont-varázsló egyszerű nézetben rejtett, ezért itt kell
   tudni felvenni mindkettőt. Csak tokenek - lásd a fájl tetejét. */
.tolto-felvetel>header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 4px}
.otthon-urlap{padding:8px 20px 18px;display:flex;flex-direction:column;gap:12px}
.otthon-urlap .tolto-halvany{padding:0;margin:0}
.otthon-mezok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.otthon-mezok-kartya{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.otthon-mezok label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--ink-2)}
.otthon-mezok input,.otthon-mezok select{font:400 14px/1.3 Inter,system-ui,sans-serif;padding:9px 11px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface);color:var(--ink)}
.otthon-mezok input:focus,.otthon-mezok select:focus{outline:2px solid var(--accent-tint);border-color:var(--accent)}
.otthon-szeles{grid-column:1/-1}
.otthon-pipa{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-weight:400!important}
.otthon-pipa input{width:16px;height:16px;margin-top:2px}
.otthon-pipa b{display:block;color:var(--ink);font-size:13px}
.otthon-pipa small{color:var(--ink-3);font-weight:400;font-size:12px}
.otthon-hiba{margin:0;padding:10px 12px;border-radius:10px;background:var(--bad-tint);color:var(--bad-ink);font-weight:650;font-size:12.5px}
.otthon-gombok{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.otthon-kartya-urlap{border-top:1px solid var(--hairline-2);margin-top:6px;padding-top:14px}
.tolto-uj{display:flex;justify-content:flex-end}
@media (max-width:700px){.otthon-mezok,.otthon-mezok-kartya{grid-template-columns:minmax(0,1fr)}}

/* A töltő beállítása a kártyán: az a három adat, amit a készülékbe kell írni. */
.tolto-beallitas{border-top:1px solid var(--hairline-2);padding-top:12px;margin-top:2px}
.tolto-beallitas>summary{cursor:pointer;font-size:12.5px;font-weight:750;color:var(--ink-2);list-style-position:inside}
.tolto-beallitas[open]>summary{margin-bottom:10px;color:var(--ink)}
.tolto-beallitas .tolto-halvany{margin:0 0 10px}
.beallitas-lista{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 12px;font-size:12.5px}
.beallitas-lista dt{color:var(--ink-3);font-weight:700}
.beallitas-lista dd{margin:0;min-width:0}
.beallitas-lista code{font:700 12.5px/1.4 ui-monospace,Consolas,monospace;color:var(--accent-ink);background:var(--accent-tint);padding:3px 7px;border-radius:6px;word-break:break-all}
.beallitas-masol{font-size:12px;padding:8px 13px}