/* A Mesterséges Intelligencia Központ adminjának stílusa. A tokenek a demo/site/site.css :root értékei (server/test.mjs őrzi az
   egyezést); a méretek a docs/specs/ui/admin-shell-mockup.html pixelértékei — az a spec. */
@font-face { font-family: 'Brand Manrope'; src: url('/site/fonts/Manrope-Variable.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
:root {
  --gold: #D8B56D; --pink: #D95181; --violet-light: #C6ADEC; --logo: #FFFFFF;
  --paper: #F0ECE3; --text-soft: #C7C2B8; --muted: #948E83; --error: #EDBAA7;
  --surface: #14110E;
  --line: color-mix(in srgb, var(--paper) 14%, transparent); --line-faint: color-mix(in srgb, var(--paper) 5%, transparent);
  --shadow: #000000;
  --ok: #9FC9A3; --warn: #D8B56D; --lift: #1B1713;
  --font-text: 'Avenir Next', 'Segoe UI', sans-serif;
  --font-brand: 'Brand Manrope', 'Avenir Next', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--surface); color: var(--paper); font: 14px/20px var(--font-text); }

/* ---------- Héj ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; width: 1280px; height: 760px; background: var(--surface); border: 1px solid #2A2521; border-radius: 12px; overflow: hidden; }
.shell { min-height: 100vh; width: auto; height: 100vh; border: 0; border-radius: 0; }
.sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--line); }
/* A VALÓDI logójel (demo/site/brand/mark.svg), állóban: az animált változat az admin oldalsávjában
   csak zajt csinálna. A cégnevet nem rövidítjük — a honlap márkatipográfiája (site.css .brand-name)
   szerint három sorban áll, alatta arany „Admin" szemöldök. */
.brand-mark-still { display: block; flex: 0 0 40px; width: 40px; height: 40px; }
.wordmark { font: 600 11px/14px var(--font-brand); letter-spacing: 1.5px; text-transform: uppercase; color: var(--logo); }
.wordmark span { display: block; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; padding: 12px; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 8px; color: var(--text-soft); font: 500 14px/20px var(--font-text); text-decoration: none; transition: color .18s, background .18s; }
.nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 16px; }
.nav-item:hover { color: var(--paper); background: var(--line-faint); }
.nav-item[aria-current="page"] { color: var(--gold); background: var(--line-faint); box-shadow: inset 3px 0 0 var(--gold); }
.nav-item:focus-visible { outline: 2px solid var(--gold); outline-offset:-2px; }
.user-block { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 20px; border-top: 1px solid var(--line); }
.user-role { font: 500 10px/14px var(--font-brand); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.user-side { display: flex; align-items: center; gap: 10px; }
.user-name { font: 500 13px/18px var(--font-text); color: var(--text-soft); }
.btn-link { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 500 12px/16px var(--font-text); cursor: pointer; }
.btn-link:hover { color: var(--pink); }

.main { display: flex; flex-direction: column; min-width: 0; }
.dev-bar { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; height: 36px; padding: 0 40px; background: color-mix(in srgb, var(--gold) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold); font: 500 12px/16px var(--font-text); }
.dev-bar::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--gold); }
.page { padding: 32px 40px 24px; }
/* Rögzített fejléc (body.fixed-head — az Assetkatalógus lapja): a lapfejléc és a fülsor áll, alattuk a .page-scroll görget, így a
   görgetősáv csak a tartalom mellett fut, a lap jobb szélén. A Gyártás fülön (.is-production) a magasság a látható lépésig öröklődik
   (viewer-production.css), hogy a lépéssor is álljon. Keskeny kijelzőn, a mobil menüsávval, a dokumentum görget, mint eddig. */
@media (min-width: 900px) {
  body.fixed-head .shell { height: 100vh; }
  body.fixed-head .main { overflow: hidden; }
  body.fixed-head .main > :not(.page) { flex: none; }
  body.fixed-head .page { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding-bottom: 0; }
  body.fixed-head .page > :not(.page-scroll) { flex: none; }
  body.fixed-head .page-scroll { flex: 1 1 0; min-height: 0; overflow: auto; margin-right: -40px; padding: 0 40px 24px 0; }
  /* A rövid és hosszú aloldalak azonos szélességűek; a Gyártás saját belső görgetője már fenntartja ezt a helyet. */
  body.fixed-head .page-scroll:not(.is-production) { scrollbar-gutter: stable; }
  body.fixed-head .page-scroll.is-production { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  body.fixed-head .page-scroll.is-production > #katalogus-host { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
}
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 28px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 500 10px/14px var(--font-brand); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.title { margin: 0; font: 500 26px/32px var(--font-brand); letter-spacing: -0.5px; color: var(--paper); }
.meta { font: 400 12px/16px var(--font-text); color: var(--muted); white-space: nowrap; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tile { height: 92px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--line-faint); animation: rise .5s ease-out both; }
.tile:nth-child(2) { animation-delay: 60ms; } .tile:nth-child(3) { animation-delay: 120ms; } .tile:nth-child(4) { animation-delay: 180ms; }
.tile-label { margin: 0 0 6px; font: 500 10px/14px var(--font-brand); letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.tile-value { font: 500 26px/32px var(--font-brand); font-variant-numeric: tabular-nums; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value small { margin-left: 8px; font: 500 12px/16px var(--font-text); color: var(--gold); }
/* A csempe alsó sora hivatkozás is lehet (a Becslő lap az aloldalra mutat): a szín a csempéé marad. */
.tile-value small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tile-value small a:hover { color: var(--pink); }

.columns { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; margin: 20px 0 0; }
.card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; }
.card-title { margin: 0 0 12px; font: 500 11px/16px var(--font-brand); letter-spacing: 0.9px; text-transform: uppercase; color: var(--text-soft); }
.subhead { margin: 22px 0 6px; font: 500 11px/16px var(--font-brand); letter-spacing: 0.9px; text-transform: uppercase; color: var(--gold); }
.subhead + .hint { margin: 0 0 8px; max-width: 640px; }
.subhead + .form-row, .subhead + .hint + .form-row { border-top: 0; }
.health-row { display: flex; align-items: center; gap: 10px; height: 40px; border-top: 1px solid var(--line); color: var(--text-soft); font: 400 13px/18px var(--font-text); }
.health-row:first-of-type { border-top: 0; }
.dot { width: 8px; height: 8px; border-radius: 4px; background: var(--ok); box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 60%, transparent); animation: pulse 2.4s ease-in-out infinite; }
.dot.warn { background: var(--warn); box-shadow: 0 0 8px color-mix(in srgb, var(--warn) 60%, transparent); }
.dot.bad { background: var(--error); box-shadow: none; animation: none; }
.health-value { margin-left: auto; font: 400 12px/16px var(--font-text); font-variant-numeric: tabular-nums; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; }
.bars i { flex: 1 1 0; background: color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 2px 2px 0 0; }
.bars i.today { background: var(--gold); }
.legend { display: flex; justify-content: space-between; margin: 6px 0 0; font: 400 11px/16px var(--font-text); color: var(--muted); }
.events { width: 100%; border-collapse: collapse; }
.events td { height: 36px; padding: 0; border-top: 1px solid var(--line); font: 400 12px/16px var(--font-text); color: var(--text-soft); vertical-align: middle; }
.events tr:first-child td { border-top: 0; }
.events td:first-child { width: 48px; color: var(--muted); font-variant-numeric: tabular-nums; }
.events td:last-child { width: 72px; text-align: right; color: var(--muted); }
.tag { display: inline-block; height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; font: 500 11px/18px var(--font-text); color: var(--text-soft); }
.tag.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.tag.pink { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 50%, transparent); }

/* ---------- Komponensek ---------- */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Többválasztós sor (Kalkulátor: engedett modellek és fokozatok). A bejelölt arany. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; }
.chip { height: 30px; padding: 0 13px; border: 1px solid var(--line); border-radius: 15px; background: none; color: var(--text-soft); font: 500 12px/16px var(--font-text); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.chip:hover { color: var(--paper); border-color: var(--paper); }
.chip.on { color: var(--surface); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.chip:focus-visible { outline: 2px solid var(--gold); outline-offset:-2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--paper); font: 500 13px/18px var(--font-text); cursor: pointer; transition: color .18s, border-color .18s, background .18s; }
a.btn { text-decoration: none; }
.ikon-gomb { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; transition: color .15s; }
.ikon-gomb:hover { color: var(--gold); }
.ikon-gomb:focus-visible { outline: 2px solid var(--gold); outline-offset:-2px; }
.ikon-gomb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover, .btn.is-hover { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); background: var(--line-faint); }   /* D22: rózsaszín keret nélkül */
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--gold); outline-offset:-2px; }
.btn.primary { color: var(--surface); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.btn.primary:hover, .btn.primary.is-hover { color: var(--surface); background: color-mix(in srgb, var(--gold) 88%, var(--paper)); border-color: var(--gold); }
.btn.danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 50%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--error) 12%, transparent); border-color: var(--error); color: var(--error); }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }

.form-row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--line); }
.form-row:first-child { border-top: 0; }
.form-label { display: flex; align-items: center; gap: 8px; min-height: 36px; font: 500 13px/18px var(--font-text); color: var(--text-soft); }
.form-help { margin: 4px 0 0; font: 400 12px/16px var(--font-text); color: var(--muted); }
.form-row.is-dirty .form-label::after { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--gold); }
.input { width: 320px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 33%, transparent); color: var(--paper); font: 400 14px/20px var(--font-text); }
.input:focus-visible, .input.is-focus { outline: 2px solid var(--gold); outline-offset:-2px; border-color: var(--gold); }
/* Az automatikus kitöltés (mentett felhasználó, jelszó) a böngésző világos hátterét festené a sötét mezőbe: a mező színét
   belső árnyékkal adjuk vissza, a betűt papírszínnel. */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset; -webkit-text-fill-color: var(--paper); caret-color: var(--paper);
}
/* A jelszómező, a jelölt belépőjével egyezően (demo/agent-pilot-test/s/base.css .apt-pass, D87): a szem a mező jobb szélén, a
   mező magasságában; megmutatja, és újra elrejti a beírt jelszót. Szkript nélkül rejtve marad; megmutatott jelszónál arany, és
   áthúzott szemre vált. Az Edge saját felfedő gombja nem ül mellé. */
.pass { position: relative; display: block; }
.pass .input { padding-right: 40px; }
.pass .input::-ms-reveal { display: none; }
.pass-eye { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color .15s; }
.pass-eye[hidden] { display: none; }
.pass-eye:hover, .pass-eye[aria-pressed="true"] { color: var(--gold); }
.pass-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pass-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pass-eye[aria-pressed="true"] .pass-eye-show, .pass-eye:not([aria-pressed="true"]) .pass-eye-hide { display: none; }
.form-row.is-error .input { border-color: var(--error); }
.form-error { margin: 4px 0 0; font: 400 12px/16px var(--font-text); color: var(--error); }
.switch { width: 34px; height: 20px; border: 1px solid var(--muted); border-radius: 12px; background: color-mix(in srgb, var(--paper) 12%, var(--surface)); position: relative; }
.switch::before { content: ''; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: 6px; background: var(--text-soft); transition: transform .12s; }
.switch.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 30%, var(--surface)); }
.switch.on::before { transform: translateX(14px); background: var(--gold); }

.toast { display: flex; align-items: center; gap: 10px; width: 320px; min-height: 44px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-left: 3px solid var(--gold); border-radius: 10px; background: var(--lift); color: var(--paper); font: 400 13px/18px var(--font-text); box-shadow: 0 12px 40px color-mix(in srgb, var(--shadow) 50%, transparent); }
.toast.error { border-left-color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.toast-fixed { position: fixed; right: 24px; bottom: 24px; }

.dialog { width: 440px; padding: 24px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 12px; background: var(--surface); color: var(--paper); box-shadow: 0 24px 80px color-mix(in srgb, var(--shadow) 60%, transparent); }
.dialog-title { margin: 0 0 8px; font: 500 19px/24px var(--font-brand); letter-spacing: -0.4px; }
.dialog-body { margin: 0 0 20px; font: 400 14px/20px var(--font-text); color: var(--text-soft); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

.skeleton .sk { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line-faint) 0px, var(--line) 80px, var(--line-faint) 160px); background-size: 400px 12px; animation: shimmer 1.4s linear infinite; }
.skeleton .sk.w60 { width: 60px; margin: 0 0 12px; } .skeleton .sk.w120 { width: 120px; height: 24px; border-radius: 8px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 32px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font: 400 13px/18px var(--font-text); }
.empty::before { content: ''; width: 22px; height: 1px; background: var(--gold); }
.error-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--error) 40%, transparent); border-left: 3px solid var(--error); border-radius: 12px; color: var(--text-soft); font: 400 13px/18px var(--font-text); }
.error-card .btn { margin-left: auto; }

/* ---------- Mobil sáv (a héj 900 px alatt) ---------- */
.mobile-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); }
/* Az 56 px-es sávba három sor nem fér: itt a cégnév EGY sorban fut (szükség esetén kettőbe törik). */
.mobile-bar .wordmark { font-size: 10px; letter-spacing: 1.2px; }
.mobile-bar .brand-mark-still { flex-basis: 32px; width: 32px; height: 32px; }
.menu-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--paper); cursor: pointer; }
.menu-button[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
.menu-button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.mobile-nav { position: absolute; top: 56px; left: 0; right: 0; padding: 8px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow) 55%, transparent); }
.mobile-nav .nav-item { height: 44px; }

/* ---------- Belépőoldal ---------- */
.login-stage { display: grid; place-items: center; width: 720px; height: 520px; background: var(--surface); border: 1px solid #2A2521; border-radius: 12px; background-image: radial-gradient(600px 300px at 50% -60px, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%); }
body.login-stage { width: auto; height: auto; min-height: 100vh; border: 0; border-radius: 0; }
.login-card { width: 360px; padding: 32px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 12px; background: var(--surface); box-shadow: 0 24px 80px color-mix(in srgb, var(--shadow) 60%, transparent); }
/* A márkajel a honlapé és a jelölt belépőjéé (docs/agent-pilot-test/spec.md D50; demo/agent-pilot-test/s/base.css .apt-logo):
   a logójel — csökkentett mozgásnál az álló —, elválasztó vonal, a cégnév három sorban. */
.login-logo { display: flex; align-items: center; margin: 0 0 20px; }
.login-logo img { display: block; width: 50px; height: 50px; }
.login-logo .login-logo-still { display: none; }
@media (prefers-reduced-motion: reduce) { .login-logo .login-logo-moving { display: none; } .login-logo .login-logo-still { display: block; } }
.login-logo-name { margin-left: 20px; padding-left: 20px; border-left: 1px solid var(--line); font: 550 10px/1.35 var(--font-brand); letter-spacing: .04em; text-transform: uppercase; color: var(--logo); }
.login-logo-name > span { display: block; white-space: nowrap; }
.login-sub { margin: 0 0 24px; font: 400 13px/18px var(--font-text); color: var(--muted); }
.login-card .field { margin: 0 0 14px; }
.login-card label { display: block; margin: 0 0 6px; font: 500 12px/16px var(--font-text); color: var(--text-soft); }
.login-card .input { width: 296px; }
.login-card .btn { width: 296px; margin: 6px 0 0; }
.login-error { margin: 12px 0 0; font: 400 12px/16px var(--font-text); color: var(--error); }
.login-lock { margin: 12px 0 0; font: 400 12px/16px var(--font-text); color: var(--gold); }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes shimmer { from { background-position: -160px 0; } to { background-position: 240px 0; } }

/* ---------- A héj kiegészítései (a vázlat rögzített dobozai helyett teljes nézet) ---------- */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 8px 12px; background: var(--gold); color: var(--surface); border-radius: 8px; }
.skip-link:focus { left: 8px; }
.menu-button { display: none; }
.mobile-bar { display: none; }
@media (max-width: 899px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 56px; left: 0; right: 0; z-index: 9; border-right: 0; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow) 55%, transparent); }
  .sidebar[hidden] { display: none; }
  .sidebar .brand, .sidebar .user-block { display: none; }
  .nav-item { height: 44px; }
  .mobile-bar { display: flex; }
  .menu-button { display: grid; }
  .page { padding: 20px 16px 16px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { height: 84px; padding: 14px 16px; }
  .tile-value, .title { font-size: 22px; line-height: 28px; }
  .columns { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .dev-bar { padding: 0 16px; }
}
/* A vízszintes fülmenü ÁLL: a lap fejléce és a fülsor a helyén marad, és a görgetősáv a fülsor
   ALATT kezdődik — nem az egész lap görög, hanem a fül panelje. Fülek nélküli lapon a `.page`
   maga a görgető. A héj `height: 100vh`, ezért a lánc minden tagjának `min-height: 0` kell. */
.main { overflow: hidden; }
/* A görgetősáv helye rövid tartalomnál is megmarad. A nem görgető keretek és a külső
   fülpanellel együtt görgetett közvetlen belső fülpanel nem foglalnak második sávot. */
.page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.page:has(.tabpanel) { overflow: hidden; scrollbar-gutter: auto; }
.page .stack:has(> .tabpanel) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tabs { flex: 0 0 auto; }
.tabpanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.tabpanel > .tabpanel { scrollbar-gutter: auto; }

.toast-host { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 20; }
dialog.dialog { margin: auto; max-width: calc(100vw - 32px); }   /* telefonon 16 px margó jut mindkét oldalra */
dialog.dialog::backdrop { background: color-mix(in srgb, var(--shadow) 60%, transparent); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 0 8px 8px 0; font: 500 11px/16px var(--font-brand); letter-spacing: 0.9px; text-transform: uppercase; color: var(--muted); }
.table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); font: 400 13px/18px var(--font-text); color: var(--text-soft); vertical-align: top; }
.table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
/* Ha a fülek nem férnek ki, új sorba lépnek; a fül felirata sosem törik (a 40 px-es fülből kilógna). */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.tab { height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-soft); font: 500 14px/20px var(--font-text); white-space: nowrap; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Lépéssor (ui.mjs stepper): folyamat-oldal fejléce. A kész lépés lila körben pipát kap, az aktuális arany, a zárolt halvány. */
.stepper { display: flex; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.stepper li { flex: 1 1 0; min-width: 0; }
.step { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text-soft); font: 500 13px/18px var(--font-text); text-align: left; cursor: pointer; }
.step:hover:not(:disabled) { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); background: var(--line-faint); }
.step:focus-visible { outline: 2px solid var(--gold); outline-offset:-2px; }
.step[aria-current="step"] { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.step:disabled { opacity: .45; cursor: not-allowed; }
.step-number { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 12px; font: 600 12px/1 var(--font-text); }
.step.is-done .step-number { position: relative; color: var(--surface); background: var(--violet-light); border-color: var(--violet-light); font-size: 0; }
/* A pipa a Tabler Icons „check” ikonja (MIT), maszkként, a színe a kör szövegszíne. Abszolút pozícióval ül a kör közepén: a rejtett
   sorszám rácssorként is helyet foglal, és a rácsban a pipát 2 px-szel lejjebb tolta (mérve, 4× nagyítás). */
.step.is-done .step-number::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat; }
.step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .step { justify-content: center; padding: 0; } .step-label { display: none; } }
.stack { display: flex; flex-direction: column; gap: 16px; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.hint { font: 400 12px/16px var(--font-text); color: var(--muted); }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; font: 400 12px/16px ui-monospace, monospace; color: var(--text-soft); }
.diff pre { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--line-faint); white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) { .tile, .dot, .skeleton .sk { animation: none; } }

/* A [hidden] attribútum nyerjen a display:flex/grid felett is (dev-bar, corrupt-bar, oldalsáv). */
[hidden] { display: none !important; }

/* ---------- Kommentátor-konzol ----------
   A régi /cache/ lap Forgalom és Működés nézete, admin-tokenekkel: az akcentus a --gold,
   a keret a --line, a kártya háttere a --lift, a szöveg a --text-soft / --muted. A sűrűség
   marad a konzolé (12–13 px): egy futam több száz sora csak így fér el egy képernyőn.
   Minden szabály a .konzol (illetve .konzol-sav) alá van kötve, hogy az admin saját
   .card / .row / .tag / .empty komponenseit ne írja felül. */
.konzol-sav { gap: 10px; margin: 0 0 14px; }
.konzol-sav .sav-label { display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--font-text); color: var(--muted); }
.konzol-sav select, .konzol-sav .input { width: auto; max-width: 260px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 33%, transparent); color: var(--paper); font: 400 13px/18px var(--font-text); }
.konzol-sav select:focus-visible, .konzol-sav .input:focus-visible { outline: 2px solid var(--gold); outline-offset:-2px; }
.konzol-sav .btn { height: 32px; padding: 0 12px; font-size: 12px; }
.konzol-sav .hint { margin: 0 auto 0 0; }

.konzol { display: grid; gap: 10px; font: 400 13px/1.5 var(--font-text); color: var(--paper); }
.konzol pre { margin: 0; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-soft); background: var(--line-faint); }
.konzol code { font-family: ui-monospace, Menlo, monospace; }
.konzol .box { border: 1px solid var(--line); border-radius: 12px; background: var(--lift); overflow: hidden; }
.konzol .empty { min-height: 0; padding: 48px 24px; }
.konzol .empty::before { content: none; }
.konzol .sub { color: var(--muted); font-size: 12px; }

/* Futam-csoport: a lista szerkezete, nem szűrő. */
.konzol details.run > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 2px 8px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; list-style: none; }
.konzol details.run > summary::-webkit-details-marker { display: none; }
.konzol details.run > summary::before { content: "▾"; width: 10px; color: var(--muted); }
.konzol details.run:not([open]) > summary::before { content: "▸"; }
.konzol details.run > summary b { color: var(--gold); font-weight: 600; }
.konzol .run-meta { color: var(--muted); font-size: 12px; }
.konzol details.run > summary .handle { margin-left: auto; }
.konzol .run-rows { display: grid; gap: 6px; padding: 8px 0 6px; }

/* Kártya: csukott sor, lenyitva fülek. */
.konzol .card { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--lift); overflow: hidden; }
.konzol .card > summary, .konzol .card > .row { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 8px 14px; font-size: 13px; }
.konzol .card > summary { cursor: pointer; list-style: none; }
.konzol .card > summary::-webkit-details-marker { display: none; }
.konzol .card > summary::before { content: "▸"; width: 10px; flex: none; color: var(--muted); font-size: 11px; }
.konzol .card[open] > summary::before { content: "▾"; }
.konzol .card > .row::before { content: ""; width: 10px; flex: none; }
.konzol .card > summary:hover { background: var(--line-faint); }
.konzol .preview { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-soft); }
.konzol .card[open] > summary .preview { white-space: normal; }
.konzol .preview .q { color: var(--pink); }
.konzol .meta { flex: none; display: flex; gap: 4px; }
.konzol .card-body { border-top: 1px solid var(--line); }
.konzol .ido { flex: none; font: 12px ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--muted); }
.konzol .handle { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); }
.konzol .baj { color: var(--error); }

/* Honnan jött a válasz, és ki kérdezett. */
.konzol .forras { flex: none; padding: 1px 6px; border-radius: 5px; font: 700 10px/16px var(--font-text); letter-spacing: .06em; white-space: nowrap; }
.konzol .f-eles { color: var(--error); background: color-mix(in srgb, var(--error) 16%, transparent); }
.konzol .f-cache { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.konzol .f-kapu, .konzol .f-hiba, .konzol .f-keszlet { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.konzol .f-session { color: var(--violet-light); background: color-mix(in srgb, var(--violet-light) 14%, transparent); }
.konzol .f-kliens, .konzol .f-auto { color: var(--text-soft); background: var(--line-faint); }
.konzol .f-jatekos { color: var(--pink); background: color-mix(in srgb, var(--pink) 14%, transparent); }
.konzol .tag { flex: none; height: auto; padding: 0 7px; font: 500 11px/18px var(--font-text); font-variant-numeric: tabular-nums; color: var(--muted); }
.konzol .t-szunet { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

/* Kártya-fülek. */
.konzol .card-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 12px; background: var(--line-faint); }
.konzol .card-tabs button { padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 400 12px/16px var(--font-text); cursor: pointer; }
.konzol .card-tabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.konzol .card-tabs button:hover { color: var(--paper); }
.konzol .card-panel { border-top: 1px solid var(--line); }

/* Üzenet fül: balra a jelentés, jobbra a válasz. */
.konzol .msg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.konzol .msg > div { min-width: 0; }
.konzol .msg-prompt { border-right: 1px solid var(--line); }
.konzol .msg h4, .konzol .raw h4, .konzol .spoken-output h4 { margin: 0; padding: 10px 16px 0; font: 600 12px/16px var(--font-text); color: var(--gold); }
.konzol .msg pre.json { max-height: 30rem; overflow: auto; margin-top: 6px; }
.konzol .raw pre { max-height: 24rem; overflow: auto; margin-top: 6px; }
.konzol .j-key { color: var(--gold); }
.konzol .j-str { color: var(--paper); }
.konzol .j-num { color: var(--warn); }
.konzol .j-lit { color: var(--violet-light); }
.konzol .j-zero { color: var(--muted); }
.konzol .text-block { margin-top: 6px; padding: 14px 16px; background: var(--line-faint); }
.konzol .text-block p { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.konzol .text-block small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.konzol .raw-text { font-size: 13px; line-height: 1.55; color: var(--text-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.konzol .inspector-note { margin: 0; padding: 8px 16px; color: var(--muted); font-size: 12px; }
.konzol .message-prose { padding: 0 16px 12px; }

/* Tömör mezőnézet. */
.konzol .report-grid { columns: 19rem; column-gap: 22px; padding: 12px 16px 4px; }
.konzol .rg { break-inside: avoid; margin: 0 0 14px; }
.konzol .rg h4 { margin: 0 0 4px; font: 600 11px/16px var(--font-brand); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.konzol .rg h4 code { font: 400 10px/16px ui-monospace, Menlo, monospace; letter-spacing: 0; text-transform: none; color: var(--muted); }
.konzol .rf { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.konzol .rf tr + tr { border-top: 1px solid var(--line-faint); }
.konzol .rf th { width: 1%; padding: 2px 10px 2px 0; text-align: left; font-weight: 400; color: var(--muted); white-space: nowrap; vertical-align: top; }
.konzol .rf td { padding: 2px 0; color: var(--text-soft); overflow-wrap: anywhere; vertical-align: top; }
.konzol .rf .rf-path { width: 1%; padding-left: 8px; font: 10px/1.9 ui-monospace, monospace; color: var(--muted); text-align: right; white-space: nowrap; }
.konzol .rf-empty { margin: 0; font-size: 12.5px; }
.konzol .field-empty { color: var(--muted); font-style: italic; }
.konzol .counts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--text-soft); }
.konzol .cnt b { color: var(--warn); font-weight: 600; }
.konzol .cnt-zero, .konzol .cnt-zero b { color: var(--muted); font-weight: 400; }
.konzol .hl { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-soft); }
.konzol .hl li + li { border-top: 1px solid var(--line-faint); }
.konzol .hl b { font-weight: 500; }
.konzol .turn-q { color: var(--pink); }
.konzol .turns { margin: 6px 0 0; padding: 0; list-style: none; background: var(--line-faint); font-size: 14px; line-height: 1.55; }
.konzol .turns li { padding: 10px 16px; overflow-wrap: anywhere; }
.konzol .turns li + li { border-top: 1px solid var(--line-faint); }
.konzol .turn-about { margin-bottom: 2px; color: var(--muted); font-size: 11.5px; }

/* Prompt fül (a konzol Működés nézete). */
.konzol .system-copy { padding: 18px 20px; white-space: pre-wrap; line-height: 1.75; font-size: 14px; color: var(--text-soft); overflow-wrap: anywhere; }
.konzol .system-heading { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.konzol .system-heading h2 { margin: 0 0 4px; font: 500 17px/24px var(--font-brand); color: var(--paper); }
.konzol .system-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.konzol .steps { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.konzol .steps th { padding: 6px 16px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; color: var(--muted); }
.konzol .steps td { padding: 5px 16px; border-bottom: 1px solid var(--line-faint); color: var(--text-soft); vertical-align: top; }
.konzol .steps td:first-child, .konzol .steps td:nth-child(2) { color: var(--paper); }
.konzol .steps td:first-child { white-space: nowrap; }
.konzol .sample-title { margin: 0; padding: 12px 16px 0; font: 600 13px/18px var(--font-text); color: var(--gold); }

@media (max-width: 760px) {
  .konzol .msg { grid-template-columns: 1fr; }
  .konzol .msg-prompt { border-right: 0; border-bottom: 1px solid var(--line); }
  .konzol .card > summary, .konzol .card > .row { flex-wrap: wrap; }
  .konzol .preview { order: 5; flex-basis: 100%; }
  .konzol .meta { order: 6; }
}

/* --- Választómenü (selectControl): gomb + listbox, az input-tal azonos méret --- */
.select { position: relative; display: inline-block; width: 320px; max-width: 100%; }
.select-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 33%, transparent); color: var(--paper); font: 400 14px/20px var(--font-text); text-align: left; cursor: pointer; transition: border-color .18s, color .18s; }
.select-button:hover { border-color: var(--gold); }
.select-button:focus-visible { outline: 2px solid var(--gold); outline-offset:-2px; border-color: var(--gold); }
.select-button[aria-expanded="true"] { border-color: var(--gold); }
.select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-value.is-placeholder { color: var(--muted); }
.select-chevron { width: 16px; height: 16px; flex: 0 0 16px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.select-button[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }
.select-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 240px; margin: 0; padding: 6px; overflow: auto; list-style: none; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 8px; background: var(--lift); box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow) 55%, transparent); }
.select-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 32px 8px 12px; border-radius: 6px; color: var(--text-soft); font: 400 13px/18px var(--font-text); cursor: pointer; position: relative; white-space: nowrap; }
.select-list li.is-active { background: var(--line-faint); color: var(--paper); }
.select-list li[aria-selected="true"] { color: var(--gold); }
.select-list li[aria-selected="true"]::after { content: ''; position: absolute; right: 12px; top: 50%; width: 8px; height: 5px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-70%) rotate(-45deg); }
.select-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* hosszú opció „…”-tal rövidül, a súgója mindig látszik */
.select-value.has-color,.select-label.has-color { display:flex; align-items:center; gap:9px; }
.select-color-swatch { display:block; flex:0 0 19px; width:19px; height:19px; border:1px solid #ffffff40; border-radius:5px; box-shadow:inset 0 0 0 1px #00000018; }
.has-color .select-color-text { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.select-hint { color: var(--muted); font-size: 12px; }
.form-row .select { width: 320px; }
@media (max-width: 899px) { .select, .form-row .select { width: 100%; } }
/* A választó keresője (D88): a lenyíló egy burkoló, felül a mező, alatta a lista; a sticky sorok elválasztóval a végén.
   A burkoló a nézethez rögzített (D99): a helyét és a gomb szélességét (`--select-w`) nyitáskor a ui.mjs adja. */
.select-pop { position: fixed; z-index: 30; width: max(var(--select-w), 360px); max-width: calc(100vw - 16px); padding: 6px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 8px; background: var(--lift); box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow) 55%, transparent); }
.select-pop[hidden] { display: none; }
.select-pop .select-list { position: static; max-height: 280px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.select-search { position: relative; margin: 0 0 6px; }
.select-search .input { width: 100%; height: 32px; padding: 0 12px 0 30px; font: 400 13px/18px var(--font-text); }
.select-search svg { position: absolute; left: 9px; top: 8px; width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.6; pointer-events: none; }
.select-list li.select-sep { height: 1px; margin: 6px 4px; padding: 0; background: var(--line); cursor: default; }
.select-list li.select-empty { padding: 8px 12px; color: var(--muted); font: 400 12px/16px var(--font-text); cursor: default; }
/* Kisebb fülsor egy fül tartalmán belül (a riport aloldalai, D88). */
.tabs.is-sub { margin: 0 0 16px; }
.tabs.is-sub .tab { height: 34px; padding: 0 12px; font: 500 13px/18px var(--font-text); }

/* --- Görgetősávok és a méretező fogantyú az admin témájában (Chromium/Edge + a szabványos scrollbar-color) --- */
* { scrollbar-width: thin; scrollbar-color: var(--muted) var(--surface); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--muted); border: 2px solid var(--surface); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }
::-webkit-scrollbar-corner, ::-webkit-resizer { background: var(--surface); }
textarea.input { height: auto; min-height: 96px; padding: 8px 12px; line-height: 20px; resize: vertical; }

/* --- Számmező léptetője: a natív spinner helyett aranynyilas oszlop a mező jobb szélén.
   Az oldalak saját gomb-/mezőstílusai (pl. a katalógusé) ne bonthassák szét: a gombok minden örökölt
   stílust eldobnak (all: unset), a mező és az oszlop egy magasságúak, a szélesség a cellához igazodik. --- */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.number { display: inline-flex !important; align-items: stretch; width: 160px; max-width: 100%; vertical-align: middle; }
.number > input { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; border-radius: 8px 0 0 8px !important; border-right: 0 !important; }
.number > input:focus-visible { outline-offset:-2px; }
.number-steps { display: flex; flex-direction: column; width: 28px; flex: 0 0 28px; align-self: stretch; border: 1px solid var(--line); border-radius: 0 8px 8px 0; overflow: hidden; background: color-mix(in srgb, var(--surface) 33%, transparent); }
.number-step { all: unset !important; box-sizing: border-box !important; flex: 1 1 50% !important; display: grid !important; place-items: center !important; width: 100% !important; min-height: 0 !important; color: var(--gold) !important; cursor: pointer !important; transition: background .12s, color .12s !important; }
.number-step + .number-step { border-top: 1px solid var(--line) !important; }
.number-step svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.number-step:hover { background: var(--line-faint) !important; color: var(--paper) !important; }
.number-step:active { background: color-mix(in srgb, var(--gold) 18%, transparent) !important; }
.number-step:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.number.is-disabled .number-step { color: var(--muted) !important; cursor: not-allowed !important; }
.form-row .number { width: 320px; }
@media (max-width: 899px) { .number, .form-row .number { width: 100%; } }

/* A figyelmeztető kódok szerkesztője (Projekt-kalkulátor · Figyelmeztető kódok fül): kódonként egy
   blokk — kapcsoló, kód, elsülés, alatta a cím és a szöveg. A mezők teljes szélességűek: a tíz
   szöveg egymás alatt csak így olvasható össze. */
.kod-blokk { padding: 14px 0; border-top: 1px solid var(--line-faint); }
.kod-blokk:first-of-type { border-top: 0; }
.kod-fej { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kod-fej code { font: 600 12px/16px ui-monospace, monospace; color: var(--gold); }
.kod-fej .hint { margin-left: auto; }
.kod-cim, .kod-szoveg { width: 100%; }
.kod-szoveg { height: auto; min-height: 64px; padding: 8px 12px; line-height: 20px; resize: vertical; }
@media (max-width: 899px) { .kod-fej { flex-wrap: wrap; } .kod-fej .hint { margin-left: 0; flex-basis: 100%; } }

/* A csomag és előzménylista a lap síkjában; a képes választó saját görgetősávval. */
.catalog-table-page { padding: 8px 0; }
.pack-preview-dialog { box-sizing: border-box; width: 1000px; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.pack-preview-dialog[open] { display: flex; flex-direction: column; }
.pack-preview-dialog > header { padding: 22px 24px 0; flex: none; }
.pack-preview-dialog .dialog-body { margin-bottom: 16px; }
.pack-preview-scroll { min-height: 0; overflow: auto; padding: 0 24px 20px; }
.pack-preview-settings { display: flex; flex-wrap: wrap; gap: 16px 32px; border-block: 1px solid var(--line); padding-block: 16px; }
.pack-preview-settings .form-row { margin: 0; }
.pack-preview-settings input[type=color] { height: 42px; width: 90px; padding: 4px; }
.pack-preview-list-title { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; margin:20px 0 12px; }
.pack-preview-list-title span { color:var(--text-soft); font-size:13px; }
.pack-preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.pack-preview-asset { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--surface); }
label.pack-preview-asset { cursor:pointer; }
.pack-preview-asset:has(input:checked) { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,var(--surface)); }
.pack-preview-asset img { width:100%; height:130px; object-fit:contain; }
.pack-preview-asset strong { font:500 14px/1.35 var(--font-text); }
.pack-preview-plane { color:var(--text-soft); font-size:12px; }
.pack-obstacle { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px; font-size:13px; }
.pack-obstacle input { width:16px; height:16px; accent-color:var(--gold); }
.pack-preview-dialog > footer { flex:none; padding:16px 24px; border-top:1px solid var(--line); }
.pack-preview-dialog .form-error:empty { display:none; }
.catalog-undo { position:fixed; z-index:100; bottom:20px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); box-sizing:border-box; display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface); color:var(--paper); border:1px solid var(--gold); border-radius:10px; box-shadow:0 8px 30px #0006; }
@media(max-width:600px) { .pack-preview-dialog > header,.pack-preview-dialog > footer {padding:16px;} .pack-preview-scroll {padding:0 16px 16px;} .pack-preview-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .pack-preview-asset {padding:8px;} .pack-preview-asset img {height:100px;} }

.pack-preview-settings .form-row { display:flex; flex-direction:column; gap:6px; border:0; padding:0; min-height:0; }
.pack-preview-asset img { background:repeating-conic-gradient(#6b675d 0% 25%,#757167 0% 50%) 50% / 12px 12px; border-radius:6px; }

.pack-theme-name { display:block; position:relative; min-width:140px; }
.pack-theme-value { display:block; position:relative; min-width:0; }
.pack-theme-label { display:block; cursor:text; border-radius:3px; }
.pack-theme-name.with-edit-button { display:flex; align-items:flex-start; gap:8px; }
.pack-theme-name.with-edit-button .pack-theme-value { flex:1; }
.pack-theme-edit { flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:6px; }
.pack-theme-edit svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pack-theme-name .pack-theme-size { visibility:hidden; }
.pack-theme-name .pack-theme-input { position:absolute; inset:0; box-sizing:border-box; width:100%; height:100%; min-width:0; min-height:0; margin:0; padding:0; border:0; border-radius:3px; outline:none; box-shadow:none; font:inherit; letter-spacing:inherit; color:inherit; background:var(--lift); }
.pack-theme-name .pack-theme-input:focus { border:0; outline:none; box-shadow:none; }
.pack-theme-name .form-error { display:block; position:absolute; top:100%; left:0; z-index:2; background:var(--surface); }
.pack-theme-name .form-error:empty { display:none; }
.pack-theme-tint { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.pack-theme-tint > span:last-child { display:flex; align-items:center; gap:8px; height:42px; color:var(--text-soft); }
.pack-theme-tint i { width:24px; height:24px; border-radius:5px; border:1px solid var(--line); }

main[tabindex="-1"]:focus { outline:none; }

/* Theme library and the shared factory/game environment editor. */
.theme-journey-card { padding:26px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(125deg,#26221a,var(--lift) 64%); }
.theme-journey-heading,.theme-library-heading,.theme-route-footer,.theme-shared-card,.theme-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.theme-journey-heading { align-items:flex-start; }
.theme-journey-heading h2 { font:600 26px/1.25 var(--font-brand); margin:6px 0 10px; }
.theme-journey-heading p { max-width:670px; color:var(--text-soft); margin:0; }
.theme-journey-heading .eyebrow,.theme-shared-card .eyebrow,.theme-editor-heading .eyebrow { color:var(--gold); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; margin:0; }
.theme-route-list { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:24px 0; list-style:none; }
.theme-route-list > li { display:flex; align-items:center; gap:12px; flex:1 1 240px; border:1px solid var(--line); padding:12px; border-radius:10px; background:#14110e88; }
.theme-route-list > li > span:nth-child(2) { flex:1; font-size:13px; line-height:1.5; }
.theme-route-number { font:500 24px var(--font-brand); color:var(--gold); }
.theme-route-move { display:flex; gap:3px; }
.theme-route-move .btn { padding:3px 6px; min-height:28px; }
.theme-route-settings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; border-block:1px solid var(--line); padding:20px 0; }
.theme-rule { display:flex; flex-direction:column; gap:9px; color:var(--text-soft); font-size:12px; }
.theme-rule > div { display:flex; align-items:center; gap:10px; }
.theme-rule .number { max-width:115px; }
.theme-rule small { color:var(--muted); white-space:nowrap; }
.theme-route-footer { margin-top:16px; }
.theme-route-status { color:var(--gold); font-size:12px; margin:6px 0 0; }
.theme-route-status:empty { display:none; }
.theme-section-note { color:var(--text-soft); font-size:13px; line-height:1.6; margin:6px 0 16px; }
.theme-route-footer .theme-section-note { margin:0; }
.theme-library-heading { margin:28px 0 16px; }
.theme-library-heading h2 { font:600 20px var(--font-brand); margin:0; }
.theme-pack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.theme-pack-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--lift); }
.theme-pack-art { height:190px; position:relative; overflow:hidden; background:linear-gradient(#575d59,var(--theme-ground)); }
.theme-pack-art canvas { display:block; width:100%; height:100%; object-fit:cover; }
.theme-pack-art:after { content:''; position:absolute; bottom:0; inset-inline:0; height:22px; background:var(--theme-ground); }
.theme-pack-objects { position:absolute; inset:24% 8% 10px; display:flex; justify-content:center; align-items:end; gap:5px; }
.theme-pack-objects img { width:32%; height:100%; object-fit:contain; object-position:bottom; filter:brightness(.65); }
.theme-pack-objects img:nth-child(2) { height:80%; }
.theme-pack-body { padding:18px; flex:1; }
.theme-pack-kicker { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; }
.theme-pack-card h3 { font:600 18px/1.4 var(--font-brand); margin:14px 0 8px; }
.theme-route-switch { flex:none; width:42px; height:26px; padding:0; border-radius:16px; cursor:pointer; }
.theme-route-switch::before { width:18px; height:18px; border-radius:50%; }
.theme-route-switch.on::before { transform:translateX(16px); }
.theme-route-switch:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.theme-card-landscape { color:var(--gold); margin:0; font-size:13px; }
.theme-card-weather { display:flex; flex-wrap:wrap; gap:5px 10px; margin:14px 0; color:var(--text-soft); font-size:11px; }
.theme-card-counts { display:flex; flex-wrap:wrap; gap:7px 12px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; }
.theme-pack-card > footer { display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 18px; }
.theme-pack-card > footer .btn { font-size:12px; }
.theme-shared-card { margin-top:22px; padding:22px 24px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(100deg,#30243844,transparent); }
.theme-shared-card h3 { margin:6px 0; font:600 17px var(--font-brand); }
.theme-shared-card p { margin:0; color:var(--text-soft); font-size:13px; }
.theme-preview-banner { display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:10px; margin-bottom:16px; }
.theme-editor-dialog { width:1120px; max-width:calc(100vw - 32px); height:min(850px,calc(100dvh - 40px)); }
.theme-editor-heading { align-items:center; gap:12px; }
.theme-editor-heading h2 { margin:0; line-height:1.3; min-width:0; flex:1; }
.theme-editor-actions { display:flex; align-items:center; flex:none; gap:6px; }
.theme-editor-actions .pack-theme-edit { width:34px; height:34px; min-height:34px; padding:8px; }
.theme-editor-actions .pack-theme-edit[hidden] { display:none; }
.theme-editor-actions .pack-theme-edit svg { width:16px; height:16px; }
.theme-icon-button { display:inline-grid; place-items:center; flex:none; width:34px; height:34px; min-height:34px; padding:8px; }
.theme-icon-button[hidden] { display:none; }
.theme-icon-button svg { width:16px; height:16px; }
.theme-editor-tabs { display:flex; flex-wrap:wrap; flex:none; padding:0 24px; border-bottom:1px solid var(--line); gap:8px; }
.theme-editor-tabs > button { border:0; border-bottom:2px solid transparent; padding:13px 14px; color:var(--text-soft); background:none; white-space:nowrap; font:500 13px var(--font-text); cursor:pointer; }
.theme-editor-tabs > button[aria-selected=true] { color:var(--gold); border-color:var(--gold); }
.theme-editor-tabs > button:focus-visible { outline:2px solid var(--gold); outline-offset:-4px; border-radius:5px; }
.theme-editor-scroll { flex:1; padding-top:24px; }
.theme-editor-scroll > [hidden] { display:none !important; }
.theme-editor-status { color:var(--muted); font-size:12px; margin:0; }
.theme-editor-section { margin:0 0 26px; }
.theme-editor-section > h3 { margin:0 0 8px; font:600 17px var(--font-brand); }
.theme-editor-section > .btn { margin-top:14px; }
.theme-editor-section .theme-description { width:100%; resize:vertical; min-height:130px; line-height:1.65; }
.theme-editor-collage { height:185px; display:flex; justify-content:center; align-items:end; gap:18px; padding:18px 24px 12px; border-radius:12px; border-bottom:12px solid var(--theme-ground); overflow:hidden; background:radial-gradient(at 25% 0%,color-mix(in srgb,var(--theme-tint) 40%,#39372f),#282721); }
.theme-editor-collage img { max-width:18%; height:100%; object-fit:contain; object-position:bottom; }
.theme-editor-collage img:nth-child(even) { height:75%; }
.theme-stat-grid { display:grid; grid-template-columns:repeat(3,1fr) 2fr; margin:18px 0 24px; border:1px solid var(--line); border-radius:10px; }
.theme-stat { display:flex; flex-direction:column; gap:5px; padding:16px; border-right:1px solid var(--line); }
.theme-stat:last-child { border:0; }
.theme-stat strong { font:600 18px/1.4 var(--font-brand); }
.theme-stat span { font-size:12px; color:var(--muted); }
.theme-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
.theme-field { display:flex; flex-direction:column; align-items:stretch; gap:7px; min-width:0; font-size:12px; color:var(--text-soft); }
.theme-field > small { color:var(--muted); }
.theme-field .input,.theme-field textarea { width:100%; }
.theme-field input[type=color] { width:100%; height:38px; border:1px solid var(--line); border-radius:6px; background:var(--surface); padding:4px; }
.theme-color-input { display:flex; align-items:center; gap:12px; height:38px; }
.theme-color-input input[type=color] { width:52px; height:38px; flex:none; cursor:pointer; }
.theme-color-input code { color:var(--paper); font-size:13px; }
.theme-landscape-pictures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0; }
.theme-landscape-pictures figure { margin:0; overflow:hidden; border-radius:8px; background:var(--lift); border:1px solid var(--line); }
.theme-landscape-pictures canvas { width:100%; display:block; }
.theme-landscape-pictures figcaption { padding:8px 12px; color:var(--text-soft); font-size:12px; }
.theme-weather-preview { border-radius:10px; border:1px solid var(--line); overflow:hidden; background:var(--lift); }
.theme-weather-preview > canvas { width:100%; display:block; }
.theme-preview-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:end; padding:14px; }
.theme-preview-toolbar label { flex:1 1 160px; display:flex; flex-direction:column; gap:7px; font-size:12px; color:var(--text-soft); }
.theme-preview-toolbar output { color:var(--gold); font-size:12px; align-self:center; min-width:110px; }
.theme-weather-total { display:block; color:var(--ok); font-size:13px; margin:12px 0; }
.theme-weather-total.invalid { color:var(--error); }
.theme-weather-row { display:grid; grid-template-columns:1.05fr repeat(4,1fr); gap:16px; align-items:center; padding:13px 0; border-top:1px solid var(--line); }
.theme-weather-row > strong { font-size:13px; }
.theme-weather-row .theme-field { font-size:11px; }
.theme-weather-row + .theme-form-grid { margin:20px 0; }
.theme-shared-note { padding:14px 16px; background:var(--lift); color:var(--text-soft); border-radius:8px; }
#theme-panel-weather:not([hidden]) { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.5fr); gap:24px; align-items:start; }
#theme-panel-weather > section:first-child { position:sticky; top:0; }
#theme-panel-weather .theme-weather-row { gap:8px; padding:10px 0; }
#theme-panel-weather .theme-preview-toolbar { gap:12px; padding:12px; }
.theme-preview-toolbar input[type=range] { accent-color:var(--gold); }

/* The modal reuses the catalogue renderers, with layouts sized to its own viewport. */
#theme-editor { --text:var(--paper); --accent:var(--gold); padding:0; font-size:14px; }
#theme-editor > header { padding:16px 20px 8px; }
#theme-editor .pack-theme-name { min-width:0; }
#theme-editor > .theme-editor-savebar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 20px; }
#theme-editor > .theme-editor-savebar > div { min-width:0; }
#theme-editor > .theme-editor-savebar > .btn { flex:none; min-height:32px; padding:5px 16px; }
#theme-editor .theme-editor-savebar .form-error { margin:0; font-size:12px; line-height:1.4; }
#theme-editor .theme-editor-savebar .form-error:not(:empty) + .theme-editor-status { display:none; }
#theme-editor .theme-editor-scroll > section { min-width:0; }
#theme-editor .select { width:100%; min-width:0; }
#theme-editor .select-list { width:100%; min-width:0; box-sizing:border-box; }
#theme-editor .select-list li { white-space:normal; overflow-wrap:anywhere; }
#theme-editor .select-list .select-color-text { overflow:visible; }
#theme-editor.pack-theme .theme-palette { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:12px; }
#theme-editor.pack-theme .theme-color { grid-template-columns:52px minmax(0,1fr); gap:5px 14px; padding:16px; border-radius:10px; background:var(--lift); }
#theme-editor.pack-theme .theme-color i { width:52px; height:100%; min-height:76px; border-radius:7px; border-color:#ffffff30; }
#theme-editor.pack-theme .theme-color strong { font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
#theme-editor.pack-theme .theme-color code { font-size:12px; }
#theme-editor.pack-theme .theme-color small { font-size:12px; line-height:1.5; color:var(--text-soft); }
#theme-editor.pack-theme .density-controls { padding:14px 16px; margin:0 0 18px; background:var(--lift); }
#theme-editor.pack-theme .density-controls > header { margin-bottom:12px; }
#theme-editor.pack-theme .density-controls h3 { font:600 16px var(--font-brand); }
#theme-editor.pack-theme .density-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 24px; align-items:start; }
#theme-editor.pack-theme .density-field { gap:6px; }
#theme-editor.pack-theme .density-range .number { height:34px; }
#theme-editor.pack-theme .density-inherit { grid-column:1 / -1; min-height:24px; }
#theme-editor.pack-theme .density-inherit input { accent-color:var(--gold); }
#theme-editor.pack-theme .density-fields > .btn { justify-self:end; }
#theme-editor.pack-theme .density-strip { margin-top:10px; border:1px solid var(--line); }
#theme-editor.pack-theme .theme-groups .group-plane { margin:20px 0; }
#theme-editor.pack-theme .theme-groups .group-plane > h4 { font:600 15px var(--font-brand); color:var(--paper); margin:0 0 10px; }
#theme-editor.pack-theme .group-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); align-items:start; gap:14px; }
#theme-editor.pack-theme .theme-groups .group-card { background:var(--lift); }
#theme-editor.pack-theme .theme-groups .group-pictures { height:180px; padding:20px 16px 12px; background:radial-gradient(ellipse at top,#c8c0af,#9e9b8d); }
#theme-editor.pack-theme .theme-groups .group-card > header { height:auto; min-height:92px; padding:16px; gap:10px; }
#theme-editor.pack-theme .theme-groups .group-card > header strong { white-space:normal; line-height:1.4; }
#theme-editor.pack-theme .theme-groups .group-card > header .tag { font-size:10px; background:var(--line-faint); }
#theme-editor.pack-theme .theme-groups .group-card > footer { flex-wrap:wrap; gap:8px; padding:12px 16px; border-top:1px solid var(--line-faint); }
#theme-editor.pack-theme .group-card > button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#theme-editor.pack-theme .theme-groups .group-rhythm-body { padding:4px 16px 16px; gap:14px 12px; }
#theme-editor.pack-theme .group-rhythm-controls .number { height:34px; }
#theme-editor.pack-theme .group-rhythm-controls .select-button { font-size:12px; }
#theme-editor.pack-theme .group-detail-body { background:var(--lift); padding:16px; }
#theme-editor.pack-theme .theme-groups .group-inline .group-pictures { height:140px; padding:16px 12px 28px; }
#theme-editor.pack-theme .theme-groups .group-inline > header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; min-height:52px; padding:8px 12px; gap:8px; }
#theme-editor.pack-theme .theme-groups .group-inline > header strong { font-size:13px; line-height:1.35; }
#theme-editor.pack-theme .theme-groups .group-inline > header .tag { justify-self:end; white-space:nowrap; font-size:9px; padding:1px 6px; }
#theme-editor.pack-theme .theme-groups .group-inline .group-rhythm-body { padding:0 12px 12px; gap:8px 12px; }
#theme-editor.pack-theme .group-inline .group-rhythm-caption { min-height:18px; font-size:10px; gap:4px; }
#theme-editor.pack-theme .group-inline .group-rhythm-controls { gap:6px; }
#theme-editor.pack-theme .group-inline .group-rhythm-controls .number { width:100% !important; height:30px; min-width:0; flex:1; }
#theme-editor.pack-theme .group-inline .number-steps { flex-basis:22px; width:22px; }
#theme-editor.pack-theme .group-inline .group-rhythm-controls .select-button { height:30px; padding-inline:8px; font-size:12px; }
#theme-editor.pack-theme .theme-groups .group-inline button.group-rhythm-reset { padding:0; width:18px; height:18px; font-size:16px; line-height:1; }
#theme-editor.pack-theme .theme-groups .group-inline > .group-members-toggle { position:absolute; z-index:3; top:107px; left:10px; border:1px solid transparent; padding:2px 7px; background:#14110e90; color:var(--paper); font-size:10px; line-height:20px; }
#theme-editor.pack-theme .theme-groups .group-inline > .group-members-toggle:hover { background:var(--surface); }
#theme-editor.pack-theme .theme-groups .group-inline > .group-members-toggle[aria-pressed=true] { color:var(--gold); border-color:var(--gold); background:var(--surface); }
#theme-editor.pack-theme .theme-groups .group-members-open .group-pictures { background:var(--lift); }
#theme-editor.pack-theme .group-members-open > :is(.group-reroll,.catalog-delete) { visibility:hidden; }
#theme-editor.pack-theme .group-member-panel { position:absolute; inset:8px 8px 36px; padding:4px 8px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--muted) transparent; border-radius:5px; color:var(--paper); }
#theme-editor.pack-theme .group-member-panel[hidden] { display:none; }
#theme-editor.pack-theme .group-member-panel:focus-visible { outline:1px solid var(--gold); outline-offset:1px; }
#theme-editor.pack-theme .group-member-heading { display:block; color:var(--gold); font-size:10px; font-weight:500; letter-spacing:.4px; margin-bottom:8px; }
#theme-editor.pack-theme .group-member-panel ol { list-style:none; counter-reset:member; padding:0; margin:0 0 10px; }
#theme-editor.pack-theme .group-member-panel li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:2px 8px; counter-increment:member; padding:7px 0; border-bottom:1px solid var(--line-faint); }
#theme-editor.pack-theme .group-member-panel li::before { content:counter(member); display:grid; place-items:center; grid-row:1 / 3; align-self:start; height:22px; border-radius:5px; color:var(--gold); background:var(--line-faint); font-size:10px; }
#theme-editor.pack-theme .group-member-panel li > span { font-size:12px; font-weight:500; line-height:1.4; }
#theme-editor.pack-theme .group-member-panel li > small { grid-column:2; font-size:10px; color:var(--text-soft); }
#theme-editor.pack-theme .theme-groups .group-member-panel > p { margin:8px 0; color:var(--text-soft); font-size:11px; line-height:1.5; }
#theme-editor.pack-theme .theme-groups .group-member-panel dl { grid-template-columns:70px minmax(0,1fr); gap:5px 10px; padding-top:8px; border-top:1px solid var(--line); font-size:10px; }
#theme-editor.pack-theme .theme-groups .group-member-panel dt { margin:0; }
#theme-editor.pack-theme .theme-groups .group-inline > button.group-companion-toggle { position:absolute; z-index:3; top:107px; right:10px; display:grid; place-items:center; width:26px; height:26px; padding:5px; background:#14110e90; border-color:transparent; }
#theme-editor.pack-theme .theme-groups .group-inline > button.group-companion-toggle[hidden] { display:none; }
#theme-editor.pack-theme .theme-groups .group-inline > button.group-companion-toggle[aria-expanded=true] { color:var(--gold); background:var(--surface); border-color:var(--gold); }
.theme-prop-toolbar { padding:0 0 20px; gap:14px; }
.theme-prop-toolbar label { flex:1 1 220px; max-width:320px; }
.theme-prop-count { margin-left:auto; align-self:center; color:var(--muted); font-size:12px; white-space:nowrap; }
.theme-prop-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr)); gap:16px; }
.theme-prop-card { padding:0; gap:0; min-width:0; overflow:hidden; background:var(--lift); border-radius:12px; }
.theme-prop-picture { padding:18px 16px 10px; background:radial-gradient(ellipse at top,#c8c0af,#9e9b8d); }
.theme-prop-picture img { display:block; height:152px; background:none; border-radius:0; }
.theme-prop-body { display:flex; flex-direction:column; gap:9px; flex:1; padding:16px; }
.theme-prop-plane { color:var(--gold); font-size:10px; letter-spacing:.6px; text-transform:uppercase; }
.theme-prop-card strong { font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.theme-prop-measures { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:6px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.theme-prop-measures dt { color:var(--muted); font-size:11px; margin-bottom:4px; }
.theme-prop-measures dd { margin:0; font-size:14px; color:var(--paper); font-variant-numeric:tabular-nums; }
.theme-prop-motion { margin-top:auto; padding-top:4px; font-size:11px; color:var(--text-soft); }
@media(max-width:1000px) {
 #theme-panel-weather:not([hidden]) { grid-template-columns:1fr; }
 #theme-panel-weather > section:first-child { position:static; }
 .theme-weather-preview > canvas { height:180px; object-fit:cover; }
}
@media(max-width:1150px) { .theme-pack-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
 .theme-pack-grid { grid-template-columns:1fr; }
 .theme-journey-card { padding:18px; }
 .theme-journey-heading,.theme-route-footer,.theme-shared-card { flex-direction:column; align-items:stretch; }
 .theme-route-settings { grid-template-columns:1fr; gap:16px; }
 .theme-rule { flex-direction:row; align-items:center; justify-content:space-between; }
 .theme-rule > div { width:180px; }
 .theme-rule small { width:80px; }
 .theme-editor-dialog { max-width:calc(100vw - 12px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); }
 .theme-editor-tabs { padding-inline:8px; gap:0; }
 .theme-editor-tabs > button { padding:10px; }
 .theme-editor-scroll { padding:16px; }
 .theme-editor-collage { height:130px; gap:8px; }
 .theme-stat-grid { grid-template-columns:repeat(3,1fr); }
 .theme-stat:last-child { grid-column:1/-1; border-top:1px solid var(--line); }
 .theme-form-grid { grid-template-columns:1fr; gap:14px; }
 .theme-weather-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .theme-weather-row > strong { grid-column:1/-1; }
 .theme-landscape-pictures { grid-template-columns:1fr; }
 .theme-preview-banner { flex-direction:column; }
 .theme-editor-dialog > footer .dialog-actions { flex-wrap:wrap; }
 #theme-editor.pack-theme .density-controls { padding:16px; }
 #theme-editor.pack-theme .density-fields { grid-template-columns:1fr; gap:16px; }
 #theme-editor.pack-theme .density-inherit { grid-column:auto; }
 #theme-editor.pack-theme .density-fields > .btn { justify-self:start; }
 .theme-prop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .theme-prop-picture { padding:14px 8px 8px; }
 .theme-prop-picture img { height:120px; }
 .theme-prop-body { padding:12px; }
 .theme-prop-measures { grid-template-columns:1fr; }
 .theme-prop-measures > div { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px; }
 .theme-prop-measures dt { margin:0; }
 .theme-prop-card strong { font-size:13px; }
 .theme-prop-count { margin-left:0; }
}