/* ==========================================================================
   aiterminal.hu — design system
   Sötét teal alap, cián akcentus, mobil-first reszponzív.
   Nincs inline stílus sehol: a CSP tiltja (l. docs/03 3.3).
   ========================================================================== */

/* ---------- 1. Alapváltozók ---------- */

:root {
    /* Felszínek — a legmélyebbtől a legvilágosabbig */
    --bg-deep:      #04151a;
    --bg:           #071e25;
    --surface:      #0c2a33;
    --surface-hi:   #103944;
    --surface-max:  #16495a;

    /* Vonalak */
    --line:         rgba(125, 205, 215, 0.10);
    --line-strong:  rgba(125, 205, 215, 0.20);

    /* Akcentus */
    --accent:       #2ee6d6;
    --accent-soft:  rgba(46, 230, 214, 0.12);
    --accent-line:  rgba(46, 230, 214, 0.35);
    --accent-deep:  #0f9c92;
    --accent-2:     #4fc9ea;

    /* Szöveg */
    --text:         #e9f7f8;
    --text-mid:     #a9c8ce;
    --text-dim:     #7b9ba2;

    /* Állapotok */
    --ok:           #3ddc97;
    --warn:         #ffc861;
    --danger:       #ff6f6f;
    --ok-soft:      rgba(61, 220, 151, 0.14);
    --warn-soft:    rgba(255, 200, 97, 0.14);
    --danger-soft:  rgba(255, 111, 111, 0.14);

    /* Forma */
    --r-lg:  20px;
    --r-md:  14px;
    --r-sm:  10px;
    --r-pill: 999px;

    /* Térköz */
    --gap:      16px;
    --gap-sm:   10px;
    --gap-lg:   24px;
    --pad-card: 20px;

    /* Egyéb */
    --rail-w:   68px;
    --header-h: 64px;
    --shadow:   0 10px 30px rgba(0, 0, 0, 0.35);
    --focus:    0 0 0 3px rgba(46, 230, 214, 0.35);

    /* Témafüggő felületek — korábban beégetett sötét színek voltak a
     * szabályokban, ezért a világos téma nem tudta volna felülírni őket. */
    --bg-card:        var(--surface);
    --card-fade:      rgba(12, 42, 51, 0.72);
    --topbar-bg:      rgba(7, 30, 37, 0.82);
    --rail-mobile-bg: rgba(9, 34, 42, 0.97);
    --backdrop:       rgba(3, 14, 18, 0.72);
    --hover:          rgba(255, 255, 255, 0.05);
    --spinner-track:  rgba(255, 255, 255, 0.25);
    --on-accent:      #03231f;
    --ok-text:        #d6ffe9;
    --warn-text:      #ffeec9;
    --danger-text:    #ffd9d9;

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
}

/* ---------- 1b. Világos téma ----------
 * Belépés után a fejléc nap/hold gombjával kapcsolható. A választást a
 * szerveroldali munkamenet őrzi (POST /api/ui/theme), a <html data-theme>
 * attribútumot a _head.php már a szerveren kiírja — így nincs villanás
 * oldalbetöltéskor, kilépéskor pedig visszaáll a sötétre.
 * A terminál (xterm) színeit nem a CSS, hanem a terminal.js palettája adja;
 * a theme.js `aiterm:theme` eseményére vált.
 */
:root[data-theme="light"] {
    --bg-deep:      #e9f1f3;
    --bg:           #f3f8f9;
    --surface:      #ffffff;
    --surface-hi:   #eaf3f5;
    --surface-max:  #d6e7eb;

    --line:         rgba(10, 60, 70, 0.12);
    --line-strong:  rgba(10, 60, 70, 0.24);

    --accent:       #08827a;
    --accent-soft:  rgba(8, 130, 122, 0.10);
    --accent-line:  rgba(8, 130, 122, 0.38);
    --accent-deep:  #05645e;
    --accent-2:     #1a7fa6;

    --text:         #0e2a31;
    --text-mid:     #3b5a61;
    --text-dim:     #5d7a81;

    --ok:           #12814f;
    --warn:         #9a6200;
    --danger:       #c42f2f;
    --ok-soft:      rgba(18, 129, 79, 0.10);
    --warn-soft:    rgba(214, 145, 20, 0.14);
    --danger-soft:  rgba(196, 47, 47, 0.09);

    --shadow:       0 8px 24px rgba(10, 40, 50, 0.10);
    --focus:        0 0 0 3px rgba(8, 130, 122, 0.30);

    --card-fade:      rgba(255, 255, 255, 0.88);
    --topbar-bg:      rgba(243, 248, 249, 0.86);
    --rail-mobile-bg: rgba(255, 255, 255, 0.97);
    --backdrop:       rgba(20, 40, 45, 0.40);
    --hover:          rgba(10, 60, 70, 0.06);
    --spinner-track:  rgba(10, 60, 70, 0.18);
    --on-accent:      #ffffff;
    --ok-text:        #0b5536;
    --warn-text:      #5f3d00;
    --danger-text:    #861f1f;
}
:root[data-theme="light"],
:root[data-theme="light"] body { color-scheme: light; }

/* A témaváltó gomb: sötétben a nap (→ világos), világosban a hold látszik. */
.theme-toggle .icon--moon,
:root[data-theme="light"] .theme-toggle .icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon--moon { display: block; }

/* ---------- 2. Alapok ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--bg-deep);
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;

    /* Vízszintes túlcsordulás elleni biztosíték.
     *
     * MIÉRT: ha bármi szélesebb a képernyőnél (egy hosszú parancs, domain
     * vagy hibaszöveg), a mobil böngésző az ELRENDEZÉSI területet is
     * kiszélesíti. A `position: fixed` alsó menüsáv ehhez igazodik, ezért
     * szélesebb lesz a képernyőnél, és jobbra görgethetővé válik a lap —
     * pontosan ez volt a „szétesik a műszerfalon" hiba.
     *
     * A `clip` (nem `hidden`) azért jó, mert nem hoz létre görgetési
     * környezetet, tehát a `position: sticky` fejléc továbbra is működik.
     * Ez csak biztosíték: a tördelést lentebb amúgy is megengedjük.
     */
    overflow-x: clip;
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background:
        radial-gradient(1100px 620px at 82% -12%, rgba(46, 230, 214, 0.07), transparent 60%),
        radial-gradient(760px 480px at 6% 104%, rgba(79, 201, 234, 0.05), transparent 60%),
        var(--bg-deep);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 0.75em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, pre, .mono {
    font-family: var(--mono);
    font-size: 0.9em;
    /* Parancsok, e-mail címek, elérési utak: ezekben nincs szóköz, ahol
     * a böngésző tördelhetne, ezért kitolnák a lapot. Az `anywhere`
     * engedélyt ad bárhol tördelni — inkább csúnyán törik, mint hogy
     * az egész elrendezés elcsúszjon. */
    overflow-wrap: anywhere;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-radius: var(--r-sm);
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Váz: rail + fejléc + tartalom ---------- */

.app {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    min-height: 100dvh;
}

/* --- Bal oldali ikon-sáv --- */
.rail {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding: 14px 0;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    border-right: 1px solid var(--line);
}

.rail__logo {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    margin-bottom: 8px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    flex: 0 0 auto;
}

.rail__nav {
    display: flex; flex-direction: column; gap: 6px;
    width: 100%; align-items: center;
}

.rail__item {
    position: relative;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.rail__item:hover { background: var(--hover); color: var(--text); }

.rail__item--active {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
    box-shadow: 0 0 22px rgba(46, 230, 214, 0.18);
}
.rail__item--active::before {
    content: "";
    position: absolute; left: -14px; top: 50%; translate: 0 -50%;
    width: 3px; height: 24px; border-radius: 3px;
    background: var(--accent);
}

.rail__spacer { flex: 1 1 auto; }

/* --- „Több" gomb és a felugró menü (csak mobilon) ---
 *
 * Asztali gépen minden menüpont látszik a sávban, tehát ez a gomb ott
 * felesleges. Mobilon viszont ez az EGYETLEN út a kimaradó pontokhoz
 * (Műszerfal, Terminálok, Napló, AI-költés), ezért nem lehet „majd valahogy":
 * `<details>`-szel készül, JS nélkül, hogy egy szkript-hiba se vehesse el.
 */
.rail__more { display: none; }
.rail__more > summary { list-style: none; }
.rail__more > summary::-webkit-details-marker { display: none; }
.rail__more > summary::marker { content: ""; }

.navsheet {
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px;
    background: var(--surface-max, var(--surface));
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

.navsheet__title {
    padding: 4px 10px 8px;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-dim);
}

.navsheet__item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 10px;
    border-radius: var(--r-md);
    color: var(--text); text-decoration: none;
    font-size: 0.95rem;
}
.navsheet__item:hover { background: var(--hover); }
.navsheet__item--active {
    background: var(--accent-soft);
    color: var(--accent);
}
.navsheet__item--off { color: var(--text-dim); cursor: not-allowed; }

/* Tooltip a rail ikonokhoz (csak desktopon) */
.rail__item[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%;
    padding: 5px 10px;
    background: var(--surface-max);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 12px; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .14s ease;
    z-index: 40;
}
.rail__item[data-tip]:hover::after { opacity: 1; }

/* --- Fő oszlop --- */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--header-h);
    display: flex; align-items: center; gap: var(--gap);
    padding: 0 var(--gap-lg);
    background: var(--topbar-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

/* A cím egyben a főoldalra vezető hivatkozás. Mobilon ez pótolja a sávból
 * kivett Műszerfal ikont, ezért látszódnia kell, hogy kattintható. */
.topbar__title {
    font-size: 1.05rem; font-weight: 600; white-space: nowrap;
    color: inherit; text-decoration: none;
    padding: 4px 6px; margin-left: -6px;
    border-radius: var(--r-sm);
    transition: background .16s ease, color .16s ease;
}
.topbar__title:hover { background: var(--accent-soft); color: var(--text); }
.topbar__title:focus-visible { outline: none; box-shadow: var(--focus); }
.topbar__title span { color: var(--accent); }
.topbar__spacer { flex: 1 1 auto; }

.search {
    display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px;
    min-width: 220px; max-width: 380px; flex: 1 1 240px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-dim);
}
.search input {
    flex: 1 1 auto; min-width: 0;
    background: none; border: 0; outline: none;
    color: var(--text); font: inherit;
}
.search input::placeholder { color: var(--text-dim); }
.search:focus-within { border-color: var(--accent-line); }

.content { padding: var(--gap-lg); }
.content > * + * { margin-top: var(--gap); }

/* ---------- 4. Kártyák és rács ---------- */

.card {
    background: linear-gradient(180deg, var(--surface) 0%, var(--card-fade) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--pad-card);
    box-shadow: var(--shadow);
}

.card__head {
    display: flex; align-items: center; gap: var(--gap-sm);
    margin-bottom: var(--gap);
    /* Szűk helyen (mobil) a cím + badge-ek + gomb egy sorban nem fér el —
     * wrap nélkül szétcsúszott/kilógott. A cím jobb-margója (auto) miatt
     * tördelésnél a cím önmagában marad az első sorban, a badge-ek és a
     * gomb a másodikra kerülnek együtt. */
    flex-wrap: wrap;
}
.card__head h2, .card__head h3 { margin-right: auto; }
/* A címbe tett darabszám a cím utolsó sora mögé kerül (hosszú, törő címnél
   különben külön sorba csúszna). */
.card__head h2 .badge { vertical-align: middle; margin-left: 4px; }

@media (max-width: 480px) {
    /* Nagyon szűk kijelzőn a "Mérés most — <szervernév>" gomb is hosszú
     * lehet — teljes szélességű, hogy biztosan érinthető maradjon. */
    .card__head .btn { flex: 1 1 100%; }
}

.grid { display: grid; gap: var(--gap); }
.grid--kpi   {
    /* A kártyák töltsék ki a teljes szélességet, mint minden más tartalom
     * (1fr felső határ) — egy fix max-width kipróbálva üres sávot hagyott
     * széles nézeten, ami rosszabb volt, mint amit javítani akart. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    /* auto-fit tördelésénél minden sor magassága a saját tartalmához igazodna
     * — eltérő szöveghosszal (pl. "Ma" vs. "Ebben a hónapban") ez egyenlőtlen
     * kártyamagasságot ad. 1fr minden sorra: egységes magasság. */
    grid-auto-rows: 1fr;
}
.grid--halves{ grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--thirds{ grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* --- KPI tile (a minta nagy számai) --- */
.kpi { display: flex; flex-direction: column; gap: 2px; }

/* A KPI-kártya lehet hivatkozás is (pl. időszak-váltás az AI-költés lapon).
 * Ilyenkor ne legyen aláhúzás és kék szöveg — a kártya maga a kattintható
 * felület, a kiválasztott állapot pedig kerettel látszik. */
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--accent-line); }
a.kpi:focus-visible { outline: none; box-shadow: var(--focus); }
.kpi--selected {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}
.kpi__value {
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.kpi__value--accent { color: var(--accent); }
.kpi__value--ok     { color: var(--ok); }
.kpi__value--warn   { color: var(--warn); }
.kpi__value--danger { color: var(--danger); }
.kpi__label { color: var(--text-dim); font-size: 0.86rem; }
.kpi__hint  { color: var(--text-mid); font-size: 0.8rem; margin-top: 6px; }

/* ---------- 5. Gombok ---------- */

/* A `hidden` attribútum a gombokon is rejtsen: a lenti `display` különben
 * felülírja (2026-10-07: a terminál fejlécében az üres „Vissza az
 * előfizetésre” és a kapcsolódva is látszó „Újracsatlakozás” emiatt jelent meg). */
.btn[hidden] { display: none; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-hi);
    color: var(--text);
    font: inherit; font-weight: 550;
    cursor: pointer;
    text-align: center;
    transition: background .16s ease, border-color .16s ease, transform .06s ease;
}
.btn:hover { background: var(--surface-max); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; }

.btn--primary {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
    border-color: transparent;
    color: var(--on-accent);
    font-weight: 650;
}
.btn--primary:hover { filter: brightness(1.07); }

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--hover); }

.btn--danger { border-color: rgba(255,111,111,.4); color: var(--danger); background: var(--danger-soft); }

.btn--block { width: 100%; }
.btn--lg { min-height: 54px; font-size: 1.02rem; }
.btn--compact { min-height: 36px; padding: 0 12px; font-size: 0.86rem; }

/* Szűk kijelzőn a kilépés gomb felirata elmarad, az ikon marad */
@media (max-width: 560px) {
    .logout-label { display: none; }
    .btn--compact { padding: 0 10px; }
}

/* ---------- 6. Jelvények, állapotpontok ---------- */

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 0.78rem; font-weight: 550;
    border: 1px solid var(--line-strong);
    color: var(--text-mid);
    white-space: nowrap;
}
.badge--ok     { background: var(--ok-soft);     border-color: rgba(61,220,151,.35);  color: var(--ok); }
.badge--warn   { background: var(--warn-soft);   border-color: rgba(255,200,97,.35);  color: var(--warn); }
.badge--danger { background: var(--danger-soft); border-color: rgba(255,111,111,.35); color: var(--danger); }
.badge--accent { background: var(--accent-soft); border-color: var(--accent-line);    color: var(--accent); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dot--ok     { background: var(--ok);     box-shadow: 0 0 10px rgba(61,220,151,.6); }
.dot--warn   { background: var(--warn);   box-shadow: 0 0 10px rgba(255,200,97,.6); }
.dot--danger { background: var(--danger); box-shadow: 0 0 10px rgba(255,111,111,.6); }
.dot--idle   { background: var(--text-dim); }

/* ---------- 7. Listák (szerverek, teendők) ---------- */

.list { display: flex; flex-direction: column; gap: 8px; }

.row {
    display: flex; align-items: center; gap: var(--gap-sm);
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    min-width: 0;
}
.row--button { cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
/* Több soros tartalomnál a jelzőpont a felső sorhoz igazodjon, ne középre */
.row--top { align-items: flex-start; }
.row--top .dot { margin-top: 6px; }
.row--button:hover { border-color: var(--accent-line); background: var(--surface); }

.row__main { min-width: 0; flex: 1 1 auto; }

/* A sor jobb szélén álló műveletek. Szűk kijelzőn a szöveg alá csúsznak,
 * de nem nyomják össze a megállapítás szövegét. */
.row__actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }

/* ---------- Sáv (meter): egyetlen mérték nagyságrendje ----------
 *
 * Egy metrika, egy szín — nem több sorozat, tehát nincs jelmagyarázat sem: a
 * pontos értéket minden sor MELLÉ kiírjuk, szöveg-színnel. Így az információ
 * nem csak színben van jelen (és így nyomtatásban, illetve
 * színlátás-zavarral is olvasható).
 *
 * A sáv szándékosan vékony és lekerekített végű, a vályú pedig visszafogott:
 * az adat a hangsúlyos, nem a díszítés.
 */
.bar {
    margin-top: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--bg);
    border: 1px solid var(--line);
    overflow: hidden;
}
.bar__fill {
    display: block; height: 100%;
    border-radius: 3px;
    background: var(--accent);
}
.row__title {
    font-weight: 550;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__sub { color: var(--text-dim); font-size: 0.83rem; overflow-wrap: anywhere; }
/* A terminál-sor fölötti munkamenet-név (pl. a Claude Code címe): két
 * egyforma „root@claude” sort ez különböztet meg. Egy sor, levágva. */
.row__label,
.term-bar__label {
    color: var(--accent); font-size: 0.8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term-bar__label { max-width: 40ch; }

/* ---------- Megállapítás magyarázata ----------
 *
 * A megállapítás szövege összefoglal („1 BIZTONSÁGI frissítés vár
 * telepítésre"), és épp azt hagyja ki, amit az ember tudni akar: MELYIK
 * csomagról, MELYIK unitról van szó. Ez a blokk azt írja ki.
 *
 * Halkabb, mint a fölötte lévő cím, de nem annyira halk, mint a `row__sub`:
 * ez nem metaadat, hanem maga a tény. A bal oldali akcentusvonal köti a
 * megállapításhoz — enélkül egy szűk kijelzőn nem látszana, melyik sorhoz
 * tartozik.
 *
 * Rács, nem táblázat: így a címke-oszlop a leghosszabb címkéhez igazodik,
 * az érték pedig szabadon tördelhet. A `nowrap` itt hibás volna — egy
 * tanúsítvány-útvonal vagy egy hosszú csomaglista kilógna a kártyából. */
.explain {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 0 8px 12px;
    border-left: 2px solid var(--accent-line);
    font-size: 0.83rem;
}
/* Egy címke+érték pár rugalmasan tördel: ha elfér egy sorban (a legtöbb
 * eset — pl. "Sikertelen belépés: 989"), együtt marad; ha nem (hosszú
 * tanúsítvány-útvonal, csomaglista), az ÉRTÉK egésze lejjebb kerül, és csak
 * SAJÁT MAGÁN belül tördel az `overflow-wrap: anywhere` — nem a címkétől
 * elszakítva, karakterenként, ahogy egy fix rács tenné szűk helyen. Ezt az
 * elrendezés-mérő (tools/layout-check.php) 360 px-en korábban elkapta. */
.explain__row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    align-items: baseline;
}
.explain__k { color: var(--text-dim); white-space: nowrap; flex: 0 0 auto; }
.explain__v {
    color: var(--text-mid); font-weight: 550;
    overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto;
}

/* ---------- 8. Középre igazított belépő kártya ---------- */

.auth {
    min-height: 100dvh;
    display: grid; place-items: center;
    padding: 24px;
}

.auth__card {
    width: 100%; max-width: 420px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--card-fade) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow);
    text-align: center;
}

.auth__logo {
    width: 62px; height: 62px; margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent);
}

.auth__brand { font-size: 1.4rem; font-weight: 650; letter-spacing: -0.02em; }
.auth__brand span { color: var(--accent); }
/* Belépő oldal: nincs alatta bevezető szöveg, a gombok ugyanannyira kerülnek */
.auth__brand--gap { margin-bottom: 26px; }
.auth__lead { color: var(--text-mid); margin: 8px 0 26px; font-size: 0.93rem; }

.auth__actions { display: flex; flex-direction: column; gap: 10px; }
.auth__note {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--text-dim); font-size: 0.82rem;
}

/* ---------- 8b. Diagnosztika a belépő oldalon ---------- */

.diag {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: left;
}
.diag > summary {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.84rem;
    list-style: none;
    text-align: center;
}
.diag > summary::-webkit-details-marker { display: none; }
.diag > summary:hover { color: var(--text-mid); }
.diag > summary::before { content: "▸ "; }
.diag[open] > summary::before { content: "▾ "; }

.diag__list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.diag__list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.84rem;
}
.diag__k { color: var(--text-mid); flex: 1 1 auto; }
.diag__v { font-weight: 550; white-space: nowrap; }
.diag__v--ok { color: var(--ok); }
.diag__v--no { color: var(--text-dim); }

.diag__hint {
    margin-top: 12px;
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ---------- 8c. Telefonos jóváhagyás ---------- */

.oob {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: left;
}
.oob[hidden] { display: none; }
.oob__lead { color: var(--text-mid); font-size: 0.9rem; text-align: center; }

.oob__code {
    margin: 16px auto;
    width: fit-content;
    padding: 14px 30px;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
}

.oob__timer {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--text-dim); font-size: 0.85rem; margin-bottom: 14px;
}

/* --- A jóváhagyó párbeszéd (telefonon, minden oldalon: _approve.php) ---
   A step-up párbeszéd (z-index 100) fölé kerül. */
.approve-modal { z-index: 110; }
.approve-modal[hidden] { display: none; }
.approve__lead { color: var(--text-mid); font-size: 0.94rem; }

.approve__meta {
    list-style: none; padding: 0;
    margin: 14px 0;
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    font-size: 0.85rem;
}

.approve__codes {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 4px;
}
.approve__code {
    flex: 1 1 90px;
    min-height: 76px;
    font-size: 2rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.approve__code:hover {
    border-color: var(--accent-line);
    background: var(--surface);
    color: var(--accent);
}
.approve__code:active { transform: translateY(1px); }
.approve__code[disabled] { opacity: .5; cursor: not-allowed; }

.approve__warn {
    margin-top: 16px;
    color: var(--warn);
    font-size: 0.82rem;
}

/* --- Kapcsoló --- */
.switch {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; flex: 0 0 auto;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
    width: 46px; height: 26px;
    background: var(--surface-max);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    padding: 2px;
    display: flex; align-items: center;
    transition: background .18s ease, border-color .18s ease;
}
.switch__knob {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--text-dim);
    transition: transform .18s ease, background .18s ease;
}
.switch input:checked + .switch__track {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}
.switch input:checked + .switch__track .switch__knob {
    transform: translateX(20px);
    background: var(--accent);
}
.switch input:focus-visible + .switch__track { box-shadow: var(--focus); }
.switch__label { font-size: 0.84rem; color: var(--text-dim); min-width: 84px; }

/* ---------- 8d. Aloldalak: űrlapok, kulcsdoboz, jelölők ---------- */

.subform {
    margin-top: var(--gap);
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.subform[hidden] { display: none; }

.check {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 0.85rem;
    cursor: pointer;
}
.check input { accent-color: var(--accent); }
.check:has(input:checked) {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
}

.keybox {
    padding: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
}
.keybox__key {
    margin: 10px 0;
    padding: 12px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}

.danger { color: var(--danger); }

select.input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                      linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* ---------- 8e. Terminál oldal ---------- */

.term-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--bg-deep);
}

/* Telefonon a terminálban lefelé húzva (= visszagörgetés) a böngésző a lap
 * tetején „húzd le a frissítéshez” mozdulatnak vette, és újratöltötte az
 * oldalt. A terminál lapon a lap nem görgethető, így a túlgörgetést és a
 * böngésző saját húzás-kezelését a terminál felületén kikapcsoljuk — a
 * görgetést ott a terminal.js küldi a tmux-nak (görgő-kódként). */
html:has(.term-page),
html:has(.term-page) body { overscroll-behavior: none; }
.term-host { touch-action: none; }

.term-bar {
    display: flex; align-items: center; gap: var(--gap-sm);
    padding: 10px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.term-bar__title {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; flex-wrap: wrap;
}
.term-bar__spacer { flex: 1 1 auto; }

.term-host {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 10px;
}
#term { width: 100%; height: 100%; }
.xterm { padding: 4px; }

/* Mobil billentyűzeten (szójavaslat nélkül is) a bevitel szavanként
 * „komponálódik”, és az xterm a félkész szót egy saját dobozban is mutatja
 * (`.composition-view`: beégetett fekete háttér, elcsúszott helyen). A
 * terminál a betűt közben rendesen kiírja, így minden betű kétszer látszott
 * — a világos témában feltűnően (2026-10-03). Érintőképernyőn elrejtjük;
 * asztalon marad (holt billentyűs ékezetnél ott hasznos). */
@media (pointer: coarse) {
    .term-host .xterm .composition-view.active { display: none; }
}

.term-notice {
    flex: 0 0 auto;
    padding: 10px 16px;
    background: var(--warn-soft);
    border-top: 1px solid rgba(255, 200, 97, 0.35);
    color: var(--warn-text);
    font-size: 0.86rem;
}
.term-notice[hidden] { display: none; }

/* Elfogyott az előfizetés kerete: kérdés-sáv a terminál felett (terv 4.) */
.term-auth {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--warn-soft);
    border-bottom: 1px solid rgba(255, 200, 97, 0.35);
    color: var(--warn-text);
    font-size: 0.88rem;
}
.term-auth[hidden] { display: none; }
.term-auth__text { flex: 1 1 260px; }
.term-auth__key { width: auto; max-width: 260px; }
.term-auth__key[hidden] { display: none; }

/* Speciális billentyűk (Esc, Ctrl+C, nyilak) — mobil-billentyűzeten nincs
   fizikai Esc/Ctrl, a TUI-programok (pl. Claude Code /cost nézete) viszont
   Esc-cel léptethetők ki. Asztali gépen is hasznos, ezért nem csak mobilon
   jelenik meg. */
.term-keys {
    display: flex; gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    overflow-x: auto;
    flex: 0 0 auto;
    -webkit-overflow-scrolling: touch;
}
.term-keys .btn {
    min-width: 44px;
    flex: 0 0 auto;
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
/* Diktálás közben a mikrofon gomb pirosan jelez */
.term-keys .term-mic { display: inline-flex; align-items: center; justify-content: center; }
.term-keys .term-mic[hidden] { display: none; }
.term-keys .term-mic--on {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger);
}

/* Másolás: telefonon és asztalon is kell (asztalon a tmux egérkezelése
   miatt sima húzással nem lehet kijelölni). A panel a terminál helyén nyílik
   meg, a képernyő szövegével, soronként. */
.term-keys .term-copy-btn { display: inline-flex; align-items: center; justify-content: center; }
.term-copy {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    min-height: 0;
    background: var(--surface);
}
.term-copy[hidden] { display: none; }
.term-copy__bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
}
.term-copy__text {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 0;
    background: var(--bg-deep);
    color: var(--text);
    font-size: 13px; line-height: 1.35;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-user-select: text; user-select: text;
}
/* A sorok tördelve (nincs vízszintes görgetés), koppintással jelölhetők */
.term-copy__line {
    padding: 1px 10px;
    white-space: pre-wrap; overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.term-copy__line--on {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}
/* Amíg a panel nyitva van, a terminál nem látszik (a helyét a panel veszi át) */
.term-page--copy .term-host { display: none; }

.term-foot {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

@media (max-width: 700px) {
    .term-bar { padding: 8px 10px; }
    .term-bar__title strong { font-size: 0.9rem; }
    /* A hitelesítés-jelvény a jobb felső sarokba, a cím a következő sorba */
    #term-auth-badge { margin-left: auto; }
    .term-bar__title { flex-basis: 100%; }
    .term-host { padding: 4px; }
    .term-foot { display: none; }
}

/* ---------- 9. Visszajelzések ---------- */

.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: var(--bg);
    font-size: 0.9rem; text-align: left;
    /* A figyelmeztetésekben gyakran van parancs vagy e-mail cím — hadd
     * törjön, ne tolja ki a lapot. */
    overflow-wrap: anywhere;
}
/* Flex-elem alapból nem zsugorodik a tartalma alá: enélkül egy hosszú
 * szöveg kiszélesíti a sávot, azon túl pedig az egész oldalt. */
.alert > * { min-width: 0; }
.alert .icon { flex: 0 0 auto; }
.alert--error { background: var(--danger-soft); border-color: rgba(255,111,111,.35); color: var(--danger-text); }
.alert--ok    { background: var(--ok-soft);     border-color: rgba(61,220,151,.35);  color: var(--ok-text); }
.alert--warn  { background: var(--warn-soft);   border-color: rgba(255,200,97,.35);  color: var(--warn-text); }
.alert[hidden] { display: none; }

.spinner {
    width: 16px; height: 16px; flex: 0 0 auto;
    border: 2px solid var(--spinner-track);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2s; }
    * { transition-duration: .01ms !important; }
}

/* ---------- 10. Űrlapelemek ---------- */

.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field__label { font-size: 0.85rem; color: var(--text-mid); }

.input {
    min-height: 44px;
    padding: 0 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
    font: inherit;
    width: 100%;
}
.input:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--focus); }
.input::placeholder { color: var(--text-dim); }

/* ---------- 11. Segédosztályok ---------- */

.muted   { color: var(--text-dim); }
.small   { font-size: 0.84rem; }
.center  { text-align: center; }
.stack   { display: flex; flex-direction: column; gap: var(--gap-sm); }
.inline  { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
.nowrap  { white-space: nowrap; }
.mt      { margin-top: var(--gap); }
.mt-xs   { margin-top: 6px; }
summary  { cursor: pointer; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon { width: 22px; height: 22px; display: block; }
.icon--sm { width: 18px; height: 18px; }

/* ---------- 12. Reszponzív ---------- */

/* Tablet és kisebb: szűkebb térköz */
@media (max-width: 900px) {
    :root { --gap-lg: 16px; --pad-card: 16px; }
    .topbar { padding: 0 16px; }
    .content { padding: 16px; }
}

/* ---------- Mobil: a rail alsó tab-sávvá válik ----------
 *
 * A sáv FIXEN az alján marad, a telefon navigációs sávja fölött.
 *
 * Kulcs a `display: contents` a nav-konténereken: így a gombok KÖZVETLENÜL
 * a .rail flex-elemei lesznek, és egyetlen sorban osztoznak a helyen.
 * Nélküle két külön nav-konténer versengett ugyanazért a helyért, ezért
 * nyomódtak össze, illetve futottak ki a gombok.
 *
 * Csak a legfontosabb pontok látszanak (.rail__item--desktop rejtve), hogy a
 * kilépés is elférjen: Műszerfal · Szerverek · AI · Napló+értesítés · Kilépés
 */
@media (max-width: 700px) {
    /* minmax(0, 1fr) es nem 1fr: az `1fr` alsó korlata a tartalom
       min-content merete, ami egy hosszu szoveggel kiszelesitene a savot. */
    .app { grid-template-columns: minmax(0, 1fr); }

    .rail {
        position: fixed; inset: auto 0 0 0;
        z-index: 50;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        gap: 2px;
        padding: 6px max(6px, env(safe-area-inset-left))
                 max(6px, env(safe-area-inset-bottom))
                 max(6px, env(safe-area-inset-right));
        background: var(--rail-mobile-bg);
        backdrop-filter: blur(14px);
        border-right: 0;
        border-top: 1px solid var(--line);
    }

    /* A nav-konténerek eltűnnek a layoutból, a gyerekeik lesznek a flex-elemek */
    .rail__nav { display: contents; }
    .rail__logo, .rail__spacer { display: none; }

    /* Ami mobilon nem fér a sávba — a „Több" gomb alatt érhető el */
    .rail__item--desktop { display: none; }

    .rail__more {
        display: block;
        flex: 1 1 0; min-width: 0; max-width: 84px;
    }
    .rail__more > summary {
        width: 100%; height: 46px;
        display: grid; place-items: center;
        border-radius: 12px;
        cursor: pointer;
    }
    /* Ha épp egy „Több" alatti oldalon vagyunk, az látszódjon a gombon */
    .rail__more--active > summary {
        background: var(--accent-soft);
        border: 1px solid var(--accent-line);
        color: var(--accent);
    }
    /* Nyitott állapotban is legyen visszajelzés */
    .rail__more[open] > summary { background: var(--hover); color: var(--text); }

    .rail__item {
        width: auto; height: 46px;
        flex: 1 1 0;
        min-width: 0;          /* enélkül az ikon nem engedi zsugorodni */
        max-width: 84px;
        border-radius: 12px;
    }
    .rail__item--active::before {
        left: 50%; top: -6px; translate: -50% 0;
        width: 22px; height: 3px;
    }
    .rail__item--logout { color: var(--danger); }

    /* Mobilon a tooltip zavaró */
    .rail__item[data-tip]::after { display: none; }

    /* A tartalom ne kerüljön a fix sáv alá */
    .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

    .topbar { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
    .topbar__title { font-size: 1rem; }
    .search { order: 3; flex-basis: 100%; max-width: none; }
    /* A fejlécben lévő kilépés mobilon redundáns — a sávban ott van */
    .topbar__logout { display: none; }
    .topbar__name { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }

    .kpi__value { font-size: 1.75rem; }
    .auth__card { padding: 26px 20px; }
}

/* Nagyon szűk kijelző: az 5 gomb így is elfér, csak kisebb ikonnal */
@media (max-width: 380px) {
    .rail__item { height: 44px; max-width: none; }
    .rail__item .icon { width: 20px; height: 20px; }
}

/* Nagy kijelző: ne nyúljon el végtelenül */
@media (min-width: 1600px) {
    .content { max-width: 1560px; }
}

/* Nyomtatás: a napló exportálásához */
@media print {
    .rail, .topbar, .btn { display: none !important; }
    body { background: #fff; color: #000; }
    .card { border: 1px solid #ccc; box-shadow: none; background: #fff; }
}

/* ---------- 13. Step-up: jóváhagyás-párbeszéd ----------
 *
 * A terminál indítása előtt friss azonosítás kell. Ez a párbeszéd kéri:
 * vagy helyi passkey-aláírás, vagy jóváhagyás a telefonon.
 */
.modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: var(--backdrop);
    backdrop-filter: blur(6px);
    /* A telefon navigációs sávja ne vágja le a párbeszéd alját */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.modal__box {
    width: 100%; max-width: 480px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: var(--pad-card);
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}

/* Széles párbeszéd: a javítás-képernyőn tételenkénti lista van (boríték,
   hibaok, azonosító) — 480 px-en az minden sorban törne. */
.modal__box--wide { max-width: 760px; }

/* ---------- AI-válasz ----------
   A modell markdownt ad; a kliens minimál értelmezővel rendereli (ai.js).
   Itt csak az olvashatóság: sorköz, listák, címsorok mérete. */
.ai-answer { line-height: 1.6; }
.ai-answer p { margin: 0 0 10px; }
.ai-answer code { font-size: .92em; }
.ai-h { margin: 16px 0 6px; font-size: 1.02rem; font-weight: 700; }
.ai-list { margin: 0 0 10px; padding-left: 20px; }
.ai-list li { margin: 2px 0; }

/* ---------------------------------------------------------------------------
   Egy lefutott AI-munkamenet MENETE (AI lap, „Korábbi munkamenetek").

   A sor fejléce gomb, nem link: nem navigál, csak kibont. A kibontott rész
   pedig szándékosan nyers — a tool bemenete és kimenete `<pre>`-ben van,
   mert az gépi adat, és a tördelése információ.
   --------------------------------------------------------------------------- */
/* Nyíl + cím két oszlopban: a hosszú cím a nyíl mellett törik (mobilon
   a nem törő cím a nyíl alá ugrott és kilógott – 2026-10-07). */
.session__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 4px;
    align-items: baseline;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.session__head:hover .row__title { color: var(--accent); }
.session__head::before {
    content: "▸ ";
    color: var(--text-dim);
    grid-column: 1; grid-row: 1;
}
.session__head > * { grid-column: 2; min-width: 0; }
.session__head .row__title { white-space: normal; overflow-wrap: anywhere; }
.session__head[aria-expanded="true"]::before { content: "▾ "; }

.session__body { margin-top: 12px; }

.trace {
    border-left: 2px solid var(--line);
    padding-left: 14px;
}
.trace__meta {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 0.84rem;
}
.trace__label {
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.trace__label em { text-transform: none; letter-spacing: 0; }

.trace__q {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--surface-hi);
    border-radius: var(--r-sm);
}
.trace__text { margin: 0 0 16px; line-height: 1.6; }
.trace__text p { margin: 0 0 8px; }

.trace__tool {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.trace__toolhead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.trace__io { margin-top: 10px; }
.trace__io pre {
    margin: 0;
    padding: 8px 10px;
    background: var(--bg-deep);
    border-radius: var(--r-sm);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    /* A hosszú kimenet ne nyomja szét a lapot: gördíthető, nem végtelen. */
    max-height: 260px;
    overflow: auto;
}
/* A gépi kimenet MÁS, mint a kérés: onnan jön, ahol bárki írhat.
   A jelzés halvány, de nem hiányzik. */
.trace__out { border-left: 2px solid var(--warn); }

.trace__stop {
    margin: -4px 0 16px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.trace__audit {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.trace__audit ul { list-style: none; margin: 0; padding: 0; }
.trace__audit li { font-size: 0.8rem; margin: 3px 0; }

.modal__head { margin-bottom: 10px; }
.modal__title { margin: 0; font-size: 1.15rem; }

.modal__lead {
    margin: 0 0 14px;
    font-weight: 600;
    color: var(--accent);
    overflow-wrap: anywhere;
}

.modal__actions {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 14px;
}
.modal__actions .btn { flex: 1 1 auto; }

/* A telefonon kiválasztandó szám — nagy, félreolvashatatlan */
.su-code {
    margin: 12px 0;
    padding: 18px 12px;
    font-size: 3rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--accent);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
}

@media (max-width: 480px) {
    .modal__actions { flex-direction: column; }
    .su-code { font-size: 2.4rem; }
}

/* ---------- 14. Beállítások oldal ----------
 *
 * A csatorna-választás (e-mail / Telegram / mindkettő) nagy, kattintható
 * kártyákkal: mobilon a apró rádiógombokat nehéz eltalálni.
 */
.choices {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    margin-top: 6px;
}

.choice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
    min-width: 0;
}
.choice:hover { border-color: var(--line-strong); }

.choice input[type="radio"] {
    margin: 2px 0 0;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

/* A kiválasztott lehetőség egyértelműen látszódjon */
.choice:has(input:checked) {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

/* Párbeszédben egy hasáb: ott a lehetőségek egymás alatt olvashatóbbak,
 * és a szám-beviteli mező is elfér a saját sorában. */
.choices--rows { grid-template-columns: 1fr; }

.choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__title { font-weight: 550; }
.choice__sub { font-size: 0.8rem; color: var(--text-dim); }

.field__hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

/* ---------- 15. Célpont-váltó fülek ----------
 *
 * Több felügyelt gépnél a mért adat CSAK a géppel együtt értelmes. A fülek
 * vízszintesen görgethetők: öt-hat szervernél mobilon nem férnének ki, és a
 * tördelés itt rosszabb lenne, mint a görgetés (a sorrend információt hordoz:
 * a helyi gép az első).
 */

.tabs {
    display: flex; gap: 6px;
    margin-bottom: var(--gap);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-mid);
    text-decoration: none;
    font-size: 0.88rem; font-weight: 550;
    white-space: nowrap;
    flex: 0 0 auto;
}
.tab:hover { border-color: var(--accent-line); color: var(--text); }
.tab--active {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
}

/* ---------- 16. Playbook: profil-szerkesztő ----------
 *
 * A mezők a manifestből generálódnak, tehát a CSS-nek TÍPUSOKRA kell
 * működnie, nem konkrét mezőkre — új mező felvételekor nem nyúlunk ide.
 */

.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: var(--gap);
    color: var(--text-mid); text-decoration: none;
    font-size: 0.88rem;
}
.back-link:hover { color: var(--accent); }

/* Hibás mező: a keret ÉS a szöveg is jelzi — nem csak szín, mert a
 * színvakság és a nyomtatás is valós eset. */
.field--error .input,
.field--error .flagset { border-color: rgba(255,111,111,.55); }

.field__error {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--danger);
    overflow-wrap: anywhere;
}

.badge--soft {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text-dim);
    font-weight: 500;
}

.warn-text { color: var(--warn); }

/* Jelölő-készlet (AI_EXTRA_ARGS) és többszörös választás (PHP-verziók).
 * Mindkettő a meglévő `.check` pirulákat használja — a különbség csak az
 * elrendezés. */
.flagset, .chipset {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.flagset { flex-direction: column; align-items: flex-start; }
.flagset .check { width: 100%; border-radius: var(--r-md); }
.check--select { gap: 10px; justify-content: space-between; }
.check--select .input { width: auto; min-width: 120px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 0.82rem; cursor: pointer;
}
.chip input { accent-color: var(--accent); }
.chip:has(input:checked) {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
}

.input--compact { min-height: 36px; padding: 0 10px; font-size: 0.85rem; }

/* Haladó beállítások: alapból összecsukva. A `<details>` szándékosan JS
 * nélkül működik. */
.advanced { margin-top: var(--gap); }
.advanced > summary {
    cursor: pointer;
    padding: 8px 0;
    color: var(--text-mid);
    font-size: 0.88rem;
}
.advanced > summary:hover { color: var(--accent); }
.advanced[open] > summary { margin-bottom: var(--gap-sm); }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.status--ok    { color: var(--ok); }
.status--warn  { color: var(--warn); }
.status--error { color: var(--danger); }

/* A generált változófájl előnézete. Ez az a szöveg, amit a felhasználó
 * jóváhagy — tehát olvashatónak kell lennie, nem díszesnek. */
.preview__head {
    display: flex; align-items: center; gap: var(--gap-sm);
    flex-wrap: wrap;
    margin: var(--gap) 0 8px;
}
.preview__head .small { margin-right: auto; }

.code {
    margin: 0;
    padding: 14px 16px;
    max-height: 60vh;
    overflow: auto;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-family: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-mid);
    white-space: pre;
    tab-size: 4;
}

/* ---------- 17. Kártya-térköz beágyazott konténerben ----------
 *
 * A lapok térközét eddig a `.content > * + *` adta — ez viszont CSAK a
 * közvetlen gyermekekre hat. A playbook-profil lapon a szakaszok egy
 * `<form>`-on belül vannak (hogy egyben lehessen összegyűjteni a mezőket),
 * ezért ott a kártyák összeértek. Mobilon ez különösen csúnya: a kártyák
 * keretei egybefolynak, és nem látszik, hol ér véget egy mezőcsoport.
 *
 * A `.card + .card` bárhol működik, és nem duplázza a meglévő térközt:
 * ugyanazt az értéket állítja, amit a `.content > * + *` adna.
 */
.card + .card { margin-top: var(--gap); }

/* DE rácsban NEM: ott a térközt a `gap` adja. A `margin-top` a grid-cellán
 * belül azt okozta, hogy a sor ELSŐ kártyája a cella tetejétől indult, a
 * többi viszont lejjebb kezdődött ÉS alacsonyabb lett (stretch + margó) —
 * ez adta a „nem egy vonalban / nem egy magas kártyák" hibát a műszerfalon
 * (KPI-sor, szerverek|megállapítások hasáb) és az AI-költés lapon is. */
.grid > .card + .card { margin-top: 0; }

/* Űrlapba ágyazott szakaszok: a form maga is tartalom-konténer. */
form > .card + .card,
form > section + section { margin-top: var(--gap); }

/* Az utolsó kártya alá NEM kell külön margó: mobilon a `.main` már kap
 * `padding-bottom: 64px + safe-area`-t a fix navigációs sáv miatt (l. a
 * reszponzív szakaszt), desktopon pedig a `.content` paddingja zárja a lapot.
 */

/* ---------- 18. Szerverek lap mobilon: a nyitott terminálok felül ----------
 *
 * Telefonon a leggyakoribb mozdulat egy már futó terminálhoz visszatérni —
 * a lista eddig a lap alján, a szerverlista és az indító űrlap alatt volt.
 * A sorrend csak mobilon változik (desktopon marad a sablon sorrendje):
 * a tartalom flex-oszlop lesz, a térközt a `gap` adja a margók helyett,
 * a figyelmeztetések (pl. „a daemon nem elérhető") ilyenkor is legfelül.
 */
@media (max-width: 700px) {
    .content:has(> .term-open-card) {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
    .content:has(> .term-open-card) > * { margin-top: 0; }
    .content:has(> .term-open-card) > .alert { order: -2; }
    .content > .term-open-card { order: -1; }
}

/* A műszerfal „Nyitott terminál” csempéje és a menü ide ugrik
   (/szerverek#terminalok) — a ragadós fejléc ne takarja ki a kártya tetejét. */
.term-open-card { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- Felhasználók és hozzáférések (beállítások) ----------
   A mátrix széles lehet (sok célpont): vízszintesen görgethető dobozban. */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.table th,
.table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.table th {
    color: var(--text-mid);
    font-weight: 600;
}
.table tbody tr:last-child td { border-bottom: 0; }

/* Mobilon kártyává alakuló táblázat (.table--kartya, 2026-10-27, a tulaj kérése):
   700 px alatt nincs fejléc és vízszintes görgetés – minden sor egy kártya, az első
   cella a kártya címe, a többi „címke: érték” sor. A címkét (data-label) a shell.js
   tölti ki a fejlécből. Széles mátrixnál (pl. hozzáférések) is olvasható marad. */
@media (max-width: 700px) {
    .table-wrap:has(> .table--kartya) { border: 0; overflow: visible; }
    .table--kartya thead { display: none; }
    .table--kartya,
    .table--kartya tbody,
    .table--kartya tr { display: block; width: 100%; }
    .table--kartya tr {
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: var(--bg-card);
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .table--kartya td {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: baseline;
        border: 0;
        padding: 4px 0;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: right;
    }
    .table--kartya td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        color: var(--text-mid);
        font-weight: 600;
        font-size: 0.82rem;
        font-family: var(--font);
        text-align: left;
    }
    .table--kartya td[data-label=""]::before { content: none; }
    .table--kartya td:first-child {
        display: block;
        text-align: left;
        font-weight: 600;
        padding-bottom: 6px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--line);
    }
    .table--kartya td:first-child::before { content: none; }
    .table--kartya td:first-child .small { font-weight: 400; }
}

/* Ügynök lap: a lezárt feladatok lenyíló része (2026-10-27) */
.ugynok-lezart { margin-top: 16px; }
.ugynok-lezart > summary {
    color: var(--text-mid);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 0;
}
.ugynok-lezart[open] > summary { margin-bottom: 10px; }

/* Célpontonkénti kiosztás-panel a Szerverek lapon */
.grant-panel .row { padding-left: 0; }
.grant-panel select.input { min-width: 9rem; }

/* ===================================================== Dokumentum-néző ==
   Projektdokumentum (.md) olvasható nézetben, új lapon (DocsController). */
.doc-page { min-height: 100dvh; background: var(--bg-deep); }
.doc-bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
}
.doc-bar__name { overflow-wrap: anywhere; }
.doc-main {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}
.doc-meta { margin-bottom: 14px; }
.doc-matches { padding-left: 1.2em; }

/* Dokumentumok menüpont (templates/dokumentumok.php) */
.doc-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-targets .chip { color: inherit; text-decoration: none; }
.chip--on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.doc-targets .chip--on { color: var(--accent); }
.doc-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
    margin-bottom: var(--gap);
    overflow-wrap: anywhere;
}
.row > .icon { flex: 0 0 auto; color: var(--text-dim); }
.doc-matches li { margin: 6px 0; }

.md-doc { overflow-wrap: anywhere; }
.md-doc h1, .md-doc h2, .md-doc h3, .md-doc h4, .md-doc h5, .md-doc h6 {
    margin: 1.4em 0 0.5em;
    line-height: 1.3;
}
.md-doc h1 { font-size: 1.6rem; margin-top: 0.4em; }
.md-doc h2 { font-size: 1.3rem; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.md-doc h3 { font-size: 1.1rem; }
.md-doc h4, .md-doc h5, .md-doc h6 { font-size: 1rem; }
.md-doc p, .md-doc ul, .md-doc ol, .md-doc blockquote, .md-doc pre, .md-doc .md-table { margin: 0 0 0.9em; }
.md-doc ul, .md-doc ol { padding-left: 1.5em; }
.md-doc li { margin: 0.2em 0; }
.md-doc li > ul, .md-doc li > ol { margin: 0.2em 0; }
.md-doc li.md-task { list-style: none; margin-left: -1.2em; }
.md-doc li.md-task--done { color: var(--text-mid); }
.md-doc code {
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--surface-hi);
}
.md-doc pre.md-code {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    overflow-x: auto;
    overflow-wrap: normal;
    white-space: pre;
}
.md-doc pre.md-code code { padding: 0; background: none; overflow-wrap: normal; }
.md-doc blockquote {
    padding: 4px 14px;
    border-left: 3px solid var(--accent-line);
    color: var(--text-mid);
}
.md-doc hr { border: 0; border-top: 1px solid var(--line-strong); margin: 1.4em 0; }
.md-doc .md-table { overflow-x: auto; }
.md-doc table { border-collapse: collapse; font-size: 0.92em; }
.md-doc th, .md-doc td {
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    text-align: left;
    vertical-align: top;
}
.md-doc th { background: var(--surface); }
.md-doc .md-center { text-align: center; }
.md-doc .md-right { text-align: right; }
.md-doc .md-nolink { border-bottom: 1px dotted var(--text-dim); }

/* Terminál: a képernyőn talált hivatkozások (.md, kép, webcím) panelje
   (telefonon is biztosan kattintható linkek, új lapon). */
.term-keys .term-docs-btn { display: inline-flex; align-items: center; justify-content: center; }
.term-docs {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    min-height: 0;
    background: var(--surface);
}
.term-docs[hidden] { display: none; }
.term-docs__list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 6px 10px;
    list-style: none;
    overflow: auto;
    background: var(--bg-deep);
}
.term-docs__list li { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.term-docs__list a { font-family: var(--mono); font-size: 0.9rem; overflow-wrap: anywhere; }
.term-docs__kind { display: inline-block; min-width: 4.5em; margin-right: 6px; color: var(--text-dim); font-size: 0.8rem; }
.term-page--docs .term-host { display: none; }

/* Terminál: kép csatolása (gomb az alsó sávban, panel a terminál helyén) */
.term-keys .term-img-btn { display: inline-flex; align-items: center; justify-content: center; }
.term-img {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    min-height: 0;
    background: var(--surface);
}
.term-img[hidden] { display: none; }
.term-img__body {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 14px 12px;
    overflow: auto;
    background: var(--bg-deep);
}
.term-img__keep { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.term-img__keep input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.term-img__status--err { color: var(--danger); }
.term-page--img .term-host { display: none; }
.term-host--drop { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* ---------- Önkiszolgáló bekötés (Szerverek lap, enroll.js) ---------- */
.enroll-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.enroll-fps { margin: 8px 0 12px; padding-left: 18px; overflow-wrap: anywhere; }
.js-enroll-state[hidden], .js-enroll-fps[hidden], .js-enroll-cmd[hidden], .js-enroll-new[hidden] { display: none; }

/* ---------- Fájlok lap és szerkesztő (FilesController, fajlok.js) ---------- */
.files-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--gap); }
.files-new .input { flex: 1 1 14rem; min-width: 0; }
.fe-main { max-width: 1400px; }
.fe-main .alert { margin-bottom: 12px; }
.fe-text {
    display: block;
    width: 100%;
    min-height: calc(100dvh - 190px);
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow-wrap: normal;
    overflow: auto;
    resize: vertical;
}
.fe-text:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--focus); }
#files-error[hidden], #fe-error[hidden] { display: none; }

/* Közös kereső (templates/_kereso.php) — Fájlok és Dokumentumok lap */
.files-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 var(--gap); }
.files-search .input { flex: 1 1 16rem; min-width: 0; }
.files-results { margin: 0 0 var(--gap); padding-bottom: var(--gap); border-bottom: 1px solid var(--line); }
.files-results__head { margin: 14px 0 6px; font-size: 0.95rem; }
.files-results mark, .files-hit mark { background: rgba(255, 196, 0, 0.30); color: inherit; border-radius: 2px; }
.files-hit { margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.files-hit__file { display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: var(--surface-hi); overflow-wrap: anywhere; }
.files-hit__line { display: flex; gap: 10px; padding: 3px 10px; color: var(--text); border-top: 1px solid var(--line); }
.files-hit__line:hover { background: var(--accent-soft); text-decoration: none; }
.files-hit__no { flex: 0 0 3.5em; text-align: right; color: var(--text-dim); }
.files-hit__text { white-space: pre; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; tab-size: 4; }

/* Szerkesztő: kép előnézete (a fájl nem szöveg) */
.fe-image { display: block; text-align: center; background: var(--bg-deep); border-radius: var(--r-md); padding: 8px; }
.fe-image img { max-width: 100%; height: auto; }

/* Szerkesztő: fájlon belüli keresés és színezés (fajl.php, fajlok.js, kodszin.js).
   A rétegek betűre pontosan a textarea alatt vannak: ugyanaz a betű, sorköz,
   belső margó, keret; a görgetést a JS viszi át. */
.fe-find { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.fe-find .input { flex: 1 1 auto; min-width: 0; }
.fe-find__count { white-space: nowrap; }
.fe-editor { position: relative; background: var(--bg); border-radius: var(--r-md); }
.fe-editor .fe-text { position: relative; background: transparent; }
.fe-layer {
    position: absolute; inset: 0;
    margin: 0;
    padding: 12px 40px 40px 14px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.86rem;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow-wrap: normal;
    overflow: hidden;
    pointer-events: none;
    color: var(--text);
}
.fe-layer code { font: inherit; padding: 0; background: none; color: inherit; white-space: pre; overflow-wrap: normal; }
.fe-text, .fe-layer { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.fe-hl { visibility: hidden; }
.fe-editor--hl .fe-hl { visibility: visible; }
.fe-editor--hl .fe-text { color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--text); }
.fe-editor--hl .fe-text::selection { background: var(--accent-line); }
.fe-marks { color: transparent; }
.fe-marks .fe-m { color: transparent; background: rgba(255, 196, 0, 0.30); border-radius: 2px; }
.fe-marks .fe-m--cur { background: rgba(255, 140, 0, 0.75); box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.9); }
.fe-marks .fe-m--line { background: var(--accent-soft); box-shadow: -14px 0 0 var(--accent-soft); }

/* Kódszínek (highlight.js osztályai) — sötét téma */
.hljs-comment, .hljs-quote, .hljs-meta .hljs-comment { color: #7f9ca3; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-template-tag, .hljs-type { color: #ff7b9c; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-meta .hljs-string { color: #a5e07a; }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: #ffb86b; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #7ec8ff; }
.hljs-title.class_, .hljs-class .hljs-title, .hljs-built_in { color: #ffd479; }
.hljs-variable, .hljs-template-variable, .hljs-params { color: #e9f7f8; }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: #6fe3d6; }
.hljs-name, .hljs-tag { color: #ff9b85; }
.hljs-meta, .hljs-meta .hljs-keyword { color: #c3a6ff; }
.hljs-deletion { color: #ff8c8c; }
.hljs-subst, .hljs-operator, .hljs-punctuation { color: inherit; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-link { text-decoration: underline; }
/* világos téma */
:root[data-theme="light"] .hljs-comment, :root[data-theme="light"] .hljs-quote { color: #6a7f86; }
:root[data-theme="light"] .hljs-keyword, :root[data-theme="light"] .hljs-selector-tag,
:root[data-theme="light"] .hljs-doctag, :root[data-theme="light"] .hljs-template-tag,
:root[data-theme="light"] .hljs-type { color: #c2185b; }
:root[data-theme="light"] .hljs-string, :root[data-theme="light"] .hljs-regexp,
:root[data-theme="light"] .hljs-addition, :root[data-theme="light"] .hljs-meta .hljs-string { color: #2e7d32; }
:root[data-theme="light"] .hljs-number, :root[data-theme="light"] .hljs-literal,
:root[data-theme="light"] .hljs-symbol, :root[data-theme="light"] .hljs-bullet { color: #b45309; }
:root[data-theme="light"] .hljs-title, :root[data-theme="light"] .hljs-title.function_,
:root[data-theme="light"] .hljs-section { color: #1565c0; }
:root[data-theme="light"] .hljs-title.class_, :root[data-theme="light"] .hljs-class .hljs-title,
:root[data-theme="light"] .hljs-built_in { color: #8a5a00; }
:root[data-theme="light"] .hljs-variable, :root[data-theme="light"] .hljs-template-variable,
:root[data-theme="light"] .hljs-params { color: #1f3a40; }
:root[data-theme="light"] .hljs-attr, :root[data-theme="light"] .hljs-attribute,
:root[data-theme="light"] .hljs-property, :root[data-theme="light"] .hljs-selector-attr,
:root[data-theme="light"] .hljs-selector-class, :root[data-theme="light"] .hljs-selector-id { color: #00796b; }
:root[data-theme="light"] .hljs-name, :root[data-theme="light"] .hljs-tag { color: #c62828; }
:root[data-theme="light"] .hljs-meta, :root[data-theme="light"] .hljs-meta .hljs-keyword { color: #6a1b9a; }
:root[data-theme="light"] .hljs-deletion { color: #c62828; }
:root[data-theme="light"] .fe-marks .fe-m { background: rgba(255, 196, 0, 0.40); }

/* Változások panel (fajl-valtozasok.php) */
.fv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.fv-row { gap: 10px; align-items: center; }
.fv-check { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.fv-rel { overflow-wrap: anywhere; }
.fv-diffbox {
    margin: 0 0 8px;
    padding: 10px 12px;
    max-height: 60vh;
    overflow: auto;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    white-space: pre;
    tab-size: 4;
}
.fv-l-add { color: var(--ok); }
.fv-l-del { color: var(--danger); }
.fv-l-hunk { color: var(--accent); }
.fv-l-meta { color: var(--text-dim); }
.fv-commit { display: flex; flex-direction: column; gap: 6px; margin-top: var(--gap); }
.fv-message { width: 100%; resize: vertical; font-family: inherit; }
#fv-error[hidden], #fv-ok[hidden], .fv-diffbox[hidden], #fe-claudemd[hidden] { display: none; }

/* Előzmények oldal (fajl-elozmenyek.php, elozmenyek.js): commitlista,
 * bal oldalon az elágazási ábra (SVG). A sávok szélessége az elozmenyek.js
 * LANE_X0/LANE_W értékével együtt módosítandó. */
.gh-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 var(--gap); }
.gh-search .input { flex: 1 1 220px; min-width: 0; }
.gh-list { position: relative; display: flex; flex-direction: column; gap: 6px; }
.gh-graph { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.gh-list--lanes-1 .gh-row { margin-left: 26px; }
.gh-list--lanes-2 .gh-row { margin-left: 40px; }
.gh-list--lanes-3 .gh-row { margin-left: 54px; }
.gh-list--lanes-4 .gh-row { margin-left: 68px; }
.gh-list--lanes-5 .gh-row { margin-left: 82px; }
.gh-list--lanes-6 .gh-row { margin-left: 96px; }
.gh-list--lanes-7 .gh-row { margin-left: 110px; }
.gh-list--lanes-8 .gh-row { margin-left: 124px; }
.gh-list--lanes-9 .gh-row { margin-left: 138px; }
.gh-list--lanes-10 .gh-row { margin-left: 152px; }
.gh-row {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    min-width: 0;
}
.gh-row--open { border-color: var(--accent-line); }
.gh-head {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; padding: 10px 12px;
    background: none; border: 0; color: inherit; font: inherit; text-align: left;
    cursor: pointer; border-radius: var(--r-md);
}
.gh-head:hover .gh-subject { color: var(--accent); }
.gh-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.gh-subject { font-weight: 550; overflow-wrap: anywhere; }
.gh-refs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.gh-ref { padding: 1px 8px; font-size: 0.72rem; }
.gh-meta { color: var(--text-dim); overflow-wrap: anywhere; }
.gh-detail { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.gh-detail[hidden], #gh-error[hidden], #gh-more[hidden] { display: none; }
.gh-message {
    margin: 0; padding: 10px 12px;
    white-space: pre-wrap; overflow-wrap: anywhere;
    font: inherit; font-size: 0.9rem;
    background: var(--surface); border-radius: var(--r-md);
}
.gh-info { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.gh-files { gap: 6px; }
.gh-edge { fill: none; stroke-width: 2; stroke-linecap: round; }
.gh-dot { stroke: var(--bg); stroke-width: 2; }
.gh-dot--behind { fill: var(--bg) !important; stroke-width: 2; }
.gh-dot-head { fill: none; stroke-width: 2; }
.gh-edge.gg-0, .gh-dot-head.gg-0, .gh-dot--behind.gg-0 { stroke: var(--accent); }
.gh-edge.gg-1, .gh-dot-head.gg-1, .gh-dot--behind.gg-1 { stroke: var(--warn); }
.gh-edge.gg-2, .gh-dot-head.gg-2, .gh-dot--behind.gg-2 { stroke: var(--ok); }
.gh-edge.gg-3, .gh-dot-head.gg-3, .gh-dot--behind.gg-3 { stroke: var(--danger); }
.gh-edge.gg-4, .gh-dot-head.gg-4, .gh-dot--behind.gg-4 { stroke: var(--accent-2); }
.gh-edge.gg-5, .gh-dot-head.gg-5, .gh-dot--behind.gg-5 { stroke: var(--text-dim); }
.gh-dot.gg-0 { fill: var(--accent); }
.gh-dot.gg-1 { fill: var(--warn); }
.gh-dot.gg-2 { fill: var(--ok); }
.gh-dot.gg-3 { fill: var(--danger); }
.gh-dot.gg-4 { fill: var(--accent-2); }
.gh-dot.gg-5 { fill: var(--text-dim); }
#fe-claudemd { flex-wrap: wrap; gap: 10px; align-items: center; }

/* Élesítés lap (elesites.php) */
#dp-root [hidden] { display: none !important; }
.dp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.dp-actions--tight { margin: 0; flex-wrap: nowrap; }
.dp-log, .dp-files {
    margin: 8px 0 0;
    padding: 10px 12px;
    max-height: 50vh;
    overflow: auto;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.dp-files { max-height: 30vh; }
.dp-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.dp-bad { color: var(--danger-text); }
.dp-komp { white-space: normal; }
.dp-komp .badge { margin: 0 4px 4px 0; }
.dp-logwrap summary { cursor: pointer; margin-top: 8px; }

/* ===================================================== AI-munkamenetek ==
   /ai-koltes/munkamenetek (templates/ai-sessions.php): a sor címe (idő,
   projektek, összegek) mobilon tördelődjön, ne vágódjon le. */
.row__title--wrap {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    white-space: normal;
}
.row--selected { border-color: var(--accent-line); background: var(--accent-soft); }
.ai-sess-table td:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }

/* Őrszem lap: hosszú fájlutak és pipás műveletek — szűk kijelzőn a műveletek
 * a szöveg alá törnek, és az út bárhol törhet (különben a szöveg 1 karakter széles). */
.row--wrap { flex-wrap: wrap; }
.row--wrap > .row__main { flex: 1 1 240px; overflow-wrap: anywhere; }
.orszem-csoport .diag__k { overflow-wrap: anywhere; }

/* ===================================================== Ügynök ==========
   /ugynok, /ugynok/feladat (templates/ugynok*.php): ügyfélportál-ügynök.
   A prompt és az eredmény szövege előre formázott, görgethető. */
.ug-pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    max-height: 60vh;
    overflow: auto;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    white-space: pre-wrap;
    word-break: break-word;
}
.ug-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.ug-kv dt { color: var(--text-mid); }
.ug-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ug-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ug-actions .field { min-width: 220px; }
.ug-details summary { cursor: pointer; margin-top: 8px; }