/* HellasCY Studio: εμφάνιση του panel.
   Ταυτότητα HellasCY: ήρεμος γραφίτης + πορτοκαλί «φωτιά» του λογότυπου, μόνο για τις κύριες ενέργειες και το ενεργό μενού.
   Τα overlays έχουν δικά τους θέματα (overlay.css).

   Γενικές κλάσεις για τις ενότητες (chat bot, tips). Τις φτιάχνουν τα S.ui.*, μπαίνουν όμως και με S.h:
   - Σελίδα:    .page (.narrow) > .page-head (.page-titles > h1 + .page-sub, .page-actions) · nav.tabs > a.tab(.on) · .section-title
   - Κάρτες:    .card (.flush: χωρίς εσωτερικό κενό, για πίνακες/λίστες) > .card-head (.card-titles > .card-title + .card-sub, .card-actions) + .card-body
   - Πλέγματα:  .grid.g-1 … .g-6 (στενεύουν μόνα τους) · .grid.g-auto (στήλες ≥ 260px) · .stack (κάθετα, κενό 16px) · .row (οριζόντια) · .sp (γεμίζει)
   - Φόρμες:    .field (.field-label, .field-hint) · .input (input/select/textarea) · button.toggle[role=switch] · .toggle-row · .copy-field
   - Κουμπιά:   .btn (.primary .ghost .danger .sm .block) · .icon-btn
   - Ενδείξεις: .badge (.ok .warn .err .info .live .off) · .status (.on .warn) · .alert (.ok .warn .err .info) · .kbd · .mono
   - Δεδομένα:  .stat (.stat-label .stat-value .stat-sub) · .table-wrap > table.tbl · .list > .list-row · .chips > button.chip(.on)
   - Κενά:      .empty-state (.empty-ic, h3, p) · .checklist
   - Κύλιση:    .hscroll (λωρίδα που κυλά οριζόντια: σβήνει στις άκρες, η ενεργή επιλογή στο κέντρο) · .table-wrap (το ίδιο για πίνακες)
   - Παράθυρο:  S.ui.dialog → dialog.dlg > .dlg-box > .dlg-head + .dlg-body + .dlg-foot
   - Κείμενο:   .muted .dim .small .hidden
   Χρώματα/αποστάσεις μόνο από τα tokens του :root (πλέγμα 8px). */
:root {
  --bg: #0b0c0f; --s1: #111318; --s2: #171a20; --s3: #1e222a; --field: #0d0f13;
  --line: #22262e; --line2: #2e333d; --line3: #3b414d;
  --text: #e8eaee; --muted: #9ba2ae; --dim: #838b99; /* --dim: 4.6:1 στο --s3, 5.4:1 στις κάρτες (WCAG AA) */
  --acc: #ff8a1f; --acc2: #ff5a1f; --ink: #1c0e00; --acc-soft: rgba(255,138,31,.11); --acc-line: rgba(255,138,31,.45);
  --ok: #34d399; --warn: #fbbf24; --err: #f87171; --info: #60a5fa; --live: #f0475a;
  --grad: linear-gradient(135deg, #ffa31a 0%, #ff5a1f 100%);
  --r-sm: 6px; --r: 8px; --r2: 12px; --r3: 16px;
  --side-w: 248px; --rail-w: 64px; --top-h: 56px;
  --shadow: 0 16px 48px rgba(0,0,0,.45);
  --head: 'Geologica', Inter, system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.55 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.015em; font-family: var(--head); font-weight: 600; }
h1 { font-size: 24px; line-height: 1.25; } h2 { font-size: 16px; } h3 { font-size: 14px; }
p { margin: 0 0 12px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
::selection { background: rgba(255,138,31,.35); }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; align-content: start; }
.sp { flex: 1; }
.num { font-variant-numeric: tabular-nums; }

/* ----- Κουμπιά ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; height: 36px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--s2); cursor: pointer; font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, filter .15s; text-decoration: none !important; color: var(--text); line-height: 1; }
.btn:hover { background: var(--s3); border-color: var(--line3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: default; transform: none; }
.btn.primary { background: var(--grad); border-color: transparent; color: var(--ink); }
.btn.primary:hover { filter: brightness(1.07); }
/* Ανενεργό κύριο κουμπί: γκρι (όχι θολό πορτοκαλί που μοιάζει πατήσιμο). */
.btn.primary:disabled, .btn.primary[aria-disabled=true] { background: var(--s3); color: var(--dim); border-color: var(--line2); opacity: 1; filter: none; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--s2); color: var(--text); }
.btn.danger { color: var(--err); }
.btn.danger:hover { border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.08); }
.btn.sm { padding: 0 10px; height: 30px; font-size: 12.5px; border-radius: var(--r-sm); gap: 6px; }
.btn.sm svg.i { width: 14px; height: 14px; }
.btn.lg { padding: 0 20px; height: 48px; font-size: 15px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn.icon { padding: 0; width: 34px; height: 34px; }
.btn.sm.icon { width: 30px; height: 30px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r); border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--s2); color: var(--text); }
.icon-btn svg.i { width: 18px; height: 18px; }

/* ----- Φόρμες ----- */
.field { display: grid; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field > span:first-child, .field-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field > .field-hint { font-size: 12px; font-weight: 400; color: var(--dim); }
.input, select.input, textarea.input { width: 100%; background: var(--field); border: 1px solid var(--line3); border-radius: var(--r); padding: 0 12px; height: 38px; outline: none; transition: border-color .15s, box-shadow .15s; min-width: 0; }
select.input { padding-right: 32px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba2ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.input:hover { border-color: var(--dim); }
.input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255,138,31,.16); }
.input::placeholder { color: var(--dim); }
.input:disabled { opacity: .6; cursor: not-allowed; }
textarea.input { resize: vertical; min-height: 88px; height: auto; padding: 9px 12px; line-height: 1.5; }
textarea.code { font: 12px/1.45 var(--mono); min-height: 220px; white-space: pre; }
.check { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; cursor: pointer; font-size: 13px; }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; background: var(--line3); border-radius: 99px; transition: background .2s; pointer-events: none; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + i { background: var(--acc); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--acc); outline-offset: 2px; }
/* Διακόπτης (S.ui.toggle) */
.toggle { position: relative; width: 38px; height: 22px; flex: none; border-radius: 99px; border: 0; padding: 0; background: var(--line3); cursor: pointer; transition: background .2s; }
.toggle i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.toggle[aria-checked=true] { background: var(--acc); }
.toggle[aria-checked=true] i { transform: translateX(16px); }
.toggle:disabled { opacity: .5; cursor: default; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; cursor: pointer; font-size: 13.5px; }
.toggle-row .toggle-label { flex: 1; min-width: 0; }
.range { display: flex; align-items: center; gap: 10px; }
.range input[type=range] { flex: 1; accent-color: var(--acc); }
.range output { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.colorrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch.on { border-color: #fff; }
input[type=color].swatch { padding: 0; background: none; border: 2px solid var(--line2); }
input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.grid4 .input { padding: 0 6px; font-size: 12px; text-align: center; height: 32px; }
.grid4 label { font-size: 11px; color: var(--dim); display: grid; gap: 2px; text-align: center; }
.copy-field { display: grid; gap: 6px; min-width: 0; }
.copy-row { display: flex; gap: 8px; min-width: 0; }
.copy-row .input { flex: 1; font: 12.5px var(--mono); color: var(--muted); }

/* ----- Ενδείξεις ----- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; background: var(--s3); color: var(--muted); white-space: nowrap; line-height: 1; border: 1px solid transparent; vertical-align: middle; }
.badge.ok { background: rgba(52,211,153,.1); color: var(--ok); border-color: rgba(52,211,153,.22); }
.badge.warn { background: rgba(251,191,36,.1); color: var(--warn); border-color: rgba(251,191,36,.22); }
.badge.err { background: rgba(248,113,113,.1); color: var(--err); border-color: rgba(248,113,113,.25); }
.badge.info { background: rgba(96,165,250,.1); color: var(--info); border-color: rgba(96,165,250,.22); }
.badge.acc { background: var(--acc-soft); color: var(--acc); border-color: rgba(255,138,31,.25); }
.badge.live { background: var(--live); color: #fff; letter-spacing: .04em; }
.badge.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
.badge.off::before, .badge.ok.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
@keyframes blink { 50% { opacity: .35; } }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.status.on { color: var(--ok); } .status.on::before { background: var(--ok); }
.status.warn { color: var(--warn); } .status.warn::before { background: var(--warn); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; height: 24px; padding: 0 10px; border-radius: 99px; background: var(--s3); color: var(--muted); white-space: nowrap; text-decoration: none !important; }
a.pill:hover { color: var(--text); }
.pill.live { background: rgba(52,211,153,.12); color: var(--ok); }
.pill.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: ping 1.6s infinite; }
.pill.off::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.pill.onair { background: var(--live); color: #fff; }
.pill.onair::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 6px transparent; } }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid; line-height: 1.5; }
.alert > svg.i { margin-top: 2px; }
.alert > .alert-body { flex: 1; min-width: 0; }
.alert.err { background: rgba(248,113,113,.08); color: #fecaca; border-color: rgba(248,113,113,.28); }
.alert.ok { background: rgba(52,211,153,.07); color: #bbf7d0; border-color: rgba(52,211,153,.26); }
.alert.info { background: rgba(96,165,250,.07); color: #cfe0fd; border-color: rgba(96,165,250,.24); }
.alert.warn { background: rgba(251,191,36,.07); color: #fde68a; border-color: rgba(251,191,36,.26); }
.alert b { color: #fff; }
.kbd { font: 12px var(--mono); background: var(--s3); border: 1px solid var(--line2); border-bottom-width: 2px; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.role { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--acc-soft); color: var(--acc); }
.role.streamer { background: var(--s3); color: var(--muted); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--s3); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--text); font-weight: 700; font-size: 13px; text-decoration: none !important; flex: none; font-family: var(--head); }
.avatar.lg { width: 42px; height: 42px; font-size: 16px; background: var(--grad); color: var(--ink); border: 0; }
.avatar { position: relative; overflow: hidden; }
.avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar.has-img { color: transparent; }
.avatar-link { display: inline-flex; border-radius: 50%; flex: none; text-decoration: none !important; }

/* ----- Σελίδες σύνδεσης/πρόσκλησης ----- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(900px 520px at 12% -10%, rgba(255,138,31,.09), transparent 60%), radial-gradient(700px 600px at 110% 110%, rgba(255,90,31,.06), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r3); padding: 32px 28px; box-shadow: var(--shadow); }
.auth-card h1 { margin: 24px 0 6px; font-size: 22px; }
.auth-card p.lead { color: var(--muted); margin: 0 0 24px; }
.auth-card .btn.primary { width: 100%; height: 42px; margin-top: 4px; }
.auth-card .field { margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; font-family: var(--head); color: var(--text); }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 30px; height: 30px; }
.brand .txt b { font-weight: 700; }
.brand .txt span { color: var(--muted); font-weight: 500; margin-left: 4px; }

/* ----- Κέλυφος: πλαϊνό μενού + πάνω μπάρα ----- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: #0e1014; border-right: 1px solid var(--line); z-index: 70; }
.side-head { height: var(--top-h); display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.side-head a { color: inherit; text-decoration: none; display: flex; min-width: 0; }
.side-nav { flex: 1; overflow-y: auto; padding: 8px 10px 16px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.nav-group { margin-top: 12px; }
.nav-group:first-child { margin-top: 4px; }
.nav-list { display: grid; gap: 2px; margin-top: 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--r); color: var(--muted); font-weight: 500; font-size: 13.5px; text-decoration: none !important; white-space: nowrap; transition: background .12s, color .12s; }
.nav-item svg.i { color: var(--dim); transition: color .12s; }
.nav-item:hover { background: var(--s2); color: var(--text); }
.nav-item:hover svg.i { color: var(--muted); }
.nav-item.on { background: var(--acc-soft); color: #fff; font-weight: 600; }
.nav-item.on svg.i { color: var(--acc); }
.nav-item.on::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; }
.side-foot { flex: none; border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 8px; }
.me-box { display: flex; align-items: center; gap: 10px; min-width: 0; }
.me-box .me-txt { flex: 1; min-width: 0; line-height: 1.3; }
.me-box .me-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-box .me-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); min-width: 0; }
.me-box .me-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-box .badge { height: 18px; padding: 0 6px; font-size: 10px; }
.side-links { display: flex; align-items: center; gap: 4px; }
.side-links a, .side-links button { font-size: 12px; color: var(--dim); background: none; border: 0; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; }
.side-links a:hover, .side-links button:hover { color: var(--text); background: var(--s2); }
.scrim { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(11,12,15,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; }
.top .sp { flex: 1; }
.top-brand { display: none; color: inherit; text-decoration: none !important; }
.menu-btn { display: none; margin-left: -8px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs svg.i { width: 14px; height: 14px; color: var(--line3); }
.top-status { display: flex; align-items: center; }
.top-status a { text-decoration: none !important; }
.top-lang { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 3px 0 9px; border: 1px solid var(--line2); border-radius: var(--r); color: var(--dim); white-space: nowrap; }
.top-lang svg.i { width: 15px; height: 15px; margin-right: 4px; }
.top-lang-o { height: 26px; min-width: 32px; padding: 0 7px; border: 0; border-radius: calc(var(--r) - 2px); background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em; cursor: pointer; transition: background .15s, color .15s; }
.top-lang-o:hover:not(.on), .top-lang-o:focus-visible { color: var(--text); background: var(--s2); }
.top-lang-o.on { background: var(--acc-soft); color: var(--acc); cursor: default; }
@media (max-width: 960px) { .top-lang { padding: 0 3px; } .top-lang svg.i { display: none; } }
/* Στενό κινητό με τον διακόπτη μέλους του admin: η γλώσσα μένει στο μενού λογαριασμού (αλλιώς η μπάρα ξεχειλίζει). */
@media (max-width: 480px) { .top:has(.as:not([hidden])) .top-lang { display: none; } }
.acct { position: relative; }
.acct-btn { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 99px; padding: 2px; cursor: pointer; color: var(--muted); }
.acct-btn:hover .avatar, .acct-btn[aria-expanded=true] .avatar { border-color: var(--acc-line); }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--s2); border: 1px solid var(--line2); border-radius: var(--r2); box-shadow: var(--shadow); padding: 6px; z-index: 90; }
.menu-pop .menu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: grid; gap: 2px; }
.menu-pop .menu-head b { font-family: var(--head); font-size: 14px; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r); color: var(--text); background: none; border: 0; cursor: pointer; font-size: 13.5px; text-decoration: none !important; text-align: left; }
.menu-pop a:hover, .menu-pop button:hover, .menu-pop a:focus-visible { background: var(--s3); }
.menu-pop svg.i { color: var(--muted); }
#app { outline: none; flex: 1; }
#app:focus-visible { outline: none; }

/* Σύμπτυξη σε στενή στήλη με εικονίδια (π.χ. στον editor, που θέλει χώρο) */
body.rail .shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
body.rail .side-head { padding: 0; justify-content: center; }
body.rail .side-head .brand .txt { display: none; }
body.rail .side-nav { padding: 8px; }
body.rail .nav-item { justify-content: center; padding: 0; height: 38px; }
body.rail .nav-item .nav-label { display: none; }
body.rail .nav-item.on::before { left: -8px; }
body.rail .side-foot { padding: 10px 8px; justify-items: center; }
body.rail .me-box .me-txt, body.rail .me-box > .icon-btn, body.rail .side-links .lbl { display: none; }
body.rail .side-links { flex-direction: column; }
/* «Έξοδος» είναι φόρμα (POST): η φόρμα δεν αλλάζει τη διάταξη, το κουμπί μένει όπως ήταν. */
.logout-form { display: contents; }
body.rail .me-box > .logout-form > .icon-btn { display: none; }
@media (max-width: 960px) { body.rail .me-box > .logout-form > .icon-btn { display: inline-grid; } }

/* ----- Σελίδα ----- */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 32px 72px; width: 100%; }
.page.narrow { max-width: 920px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-titles { min-width: 0; flex: 1 1 320px; }
.page-head p, .page-sub { margin: 6px 0 0; color: var(--muted); max-width: 720px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -8px 0 24px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 10px 12px 12px; color: var(--muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none !important; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); }
.tab.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); }
.section-title { display: flex; align-items: center; gap: 12px; margin: 32px 0 16px; font-family: var(--head); font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-title .btn { order: 2; }
.section-title .dim { font-family: Inter, sans-serif; font-weight: 500; font-size: 13px; }

/* ----- Κάρτες & πλέγματα ----- */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r2); padding: 20px; min-width: 0; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.card-titles { min-width: 0; flex: 1 1 200px; }
.card-title { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card-title svg.i { color: var(--muted); }
.card-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-body { min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--line); }
.grid { display: grid; gap: 16px; min-width: 0; align-items: start; }
.grid > .card + .card, .stack > .card + .card { margin-top: 0; }
.mod-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid.stretch { align-items: stretch; }
.g-1 { grid-template-columns: minmax(0, 1fr); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--s3); border: 1px solid var(--line2); padding: 10px 16px; border-radius: 10px; font-weight: 600; opacity: 0; transition: .25s; z-index: 200; box-shadow: var(--shadow); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.err { border-color: rgba(248,113,113,.5); color: #fecaca; }
/* Μήνυμα με κουμπί (π.χ. «Αναίρεση»): πατιέται, και με αφή (το απλό .toast δεν πιάνει κλικ). */
.toast.has-act { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding-right: 8px; }
.toast-msg { min-width: 0; }
.toast-act { flex: none; background: none; border: 1px solid var(--acc-line); color: var(--acc); font-weight: 700; font-size: 13px; height: 30px; padding: 0 12px; border-radius: var(--r); cursor: pointer; }
.toast-act:hover { background: var(--acc-soft); }
.toast:not(.show) .toast-act { visibility: hidden; }

/* Μενού δεξιού κλικ (ctxMenu του panel.js): ίδια εμφάνιση με τα .menu-pop, σε σταθερή θέση στην οθόνη. */
.menu-pop.ctx-menu { position: fixed; right: auto; top: 0; left: 0; min-width: 230px; max-width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; z-index: 250; outline: none; }
.ctx-menu .ctx-item { padding: 7px 10px; }
.ctx-menu .ctx-item:focus { background: var(--s3); outline: none; }
.ctx-menu .ctx-item:focus-visible { box-shadow: inset 0 0 0 2px var(--acc); }
.ctx-menu .ctx-item:disabled { opacity: .45; cursor: default; background: none; }
.ctx-menu .ctx-ic { width: 16px; flex: none; }
.ctx-menu .ctx-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-menu .kbd { margin-left: auto; font-size: 11px; color: var(--dim); }
.ctx-menu .ctx-chev { margin-left: auto; width: 14px; height: 14px; }
.ctx-menu .danger, .ctx-menu .danger svg.i { color: var(--err); }
.ctx-menu .cur { font-weight: 700; }
.ctx-menu .cur svg.i { color: var(--acc); }
.ctx-menu .ctx-h { padding: 6px 10px; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ctx-menu .ctx-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty-state { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--muted); }
.empty-state .empty-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--s2); border: 1px solid var(--line); color: var(--muted); margin-bottom: 4px; }
.empty-state .empty-ic svg.i { width: 20px; height: 20px; }
.empty-state h3 { color: var(--text); font-size: 15px; }
.empty-state p { margin: 0; max-width: 440px; font-size: 13.5px; }
.empty-state .btn { margin-top: 8px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; margin: 0; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* KPI */
.stat { background: var(--s2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
/* Ετικέτα σε μία γραμμή, με «…» (όλο το κείμενο στο title): οι τιμές μένουν στοιχισμένες όταν οι στήλες είναι στενές. */
.stat-label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label svg.i { width: 14px; height: 14px; color: var(--dim); vertical-align: -2px; margin-right: 6px; }
.stat-value { font-family: var(--head); font-size: 26px; font-weight: 600; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-sub { font-size: 12px; color: var(--dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }

/* Πίνακες & λίστες */
.table-wrap { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { color: var(--dim); font-weight: 600; font-size: 12px; white-space: nowrap; background: rgba(255,255,255,.012); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(255,255,255,.015); }
.tbl td.empty-cell { text-align: center; color: var(--muted); padding: 28px 12px; }
.card.flush .tbl th:first-child, .card.flush .tbl td:first-child { padding-left: 20px; }
.card.flush .tbl th:last-child, .card.flush .tbl td:last-child { padding-right: 20px; }
.list { display: grid; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.list-row:last-child { border-bottom: 0; }
.card.flush .list-row { padding: 12px 20px; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .t1 { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .t2 { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.list-row { color: inherit; text-decoration: none !important; transition: background .12s; }
a.list-row:hover { background: rgba(255,255,255,.02); }
a.list-row:hover .chev { color: var(--text); transform: translateX(2px); }
.chev { color: var(--dim); transition: transform .15s, color .15s; }
.ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--s2); border: 1px solid var(--line); color: var(--muted); }
.ic.acc { background: var(--acc-soft); border-color: rgba(255,138,31,.22); color: var(--acc); }
.ic.ok { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.2); color: var(--ok); }
.ic.info { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.2); color: var(--info); }
.ic.live { background: rgba(240,71,90,.12); border-color: rgba(240,71,90,.25); color: var(--live); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chip:hover { color: var(--text); border-color: var(--line3); }
.chip.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--text); }
.chip .n { font-variant-numeric: tabular-nums; color: var(--dim); font-weight: 500; }
.chip.on .n { color: var(--acc); }

/* Λίστα ελέγχου (πρώτα βήματα) */
.checklist { display: grid; gap: 14px; }
.checklist-top { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.checklist-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.checklist-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .3s; }
.checklist ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.checklist li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--s2); font-size: 13px; font-weight: 500; }
.checklist li > a { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--text); text-decoration: none !important; margin: -10px -12px; padding: 10px 12px; border-radius: 10px; }
.checklist li > a:hover { background: var(--s3); }
.checklist li > a .chev { margin-left: auto; }
.checklist .ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid var(--line3); color: var(--dim); font-size: 11px; font-weight: 700; }
.checklist .ck svg.i { width: 13px; height: 13px; stroke-width: 2.6; }
.checklist li.done { color: var(--muted); background: transparent; }
.checklist li.done .ck { background: var(--ok); border-color: var(--ok); color: #05261a; }
.checklist .ck-label { flex: 1; min-width: 0; }

/* ----- Αρχική ----- */
.dash-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; margin-bottom: 16px; }
.dash-row.rev { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-row > .card + .card { margin-top: 0; }
.dash-mods { margin-bottom: 16px; }
.card-tools { padding: 12px 20px; border-bottom: 1px solid var(--line); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--acc); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.icon.armed { width: auto; padding: 0 10px; }
.btn.armed { border-color: rgba(248,113,113,.5); color: var(--err); background: rgba(248,113,113,.08); }
.live-card .live-big { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 14px; flex-wrap: wrap; }
.live-card .live-big b { font-family: var(--head); font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.live-card .live-big span { color: var(--muted); }
.live-card .kv { margin-bottom: 16px; }
.ev-row .ev-main { flex: 1; min-width: 0; }
.ev-row .ev-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-row .ev-line b { font-weight: 600; }
.ev-row .ev-when { font-size: 12px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-row.test .ev-line { color: var(--muted); }
.ev-type { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; }

/* ----- Overlays ----- */
.ovs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.ov { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s; min-width: 0; }
.ov:hover { border-color: var(--line2); }
.thumb { position: relative; aspect-ratio: 16 / 9; background: #07080a; overflow: hidden; border-bottom: 1px solid var(--line); }
.thumb iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; }
.scene-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.scene-chips button { background: transparent; border: 1px solid var(--line2); color: var(--muted); font-size: 12px; font-weight: 600; height: 28px; padding: 0 10px; border-radius: 99px; cursor: pointer; }
.scene-chips button:hover { color: var(--text); border-color: var(--line3); }
.scene-chips button.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--text); }
.ov-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ov-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
.ov-title > b, .ov-title .ov-name b { font-size: 16px; font-family: var(--head); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov-title .input { height: 34px; }
.ov-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.ov-actions .sp { flex: 1; }

/* ----- Μέλη (διαχείριση) ----- */
.members { display: grid; gap: 12px; }
.member { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
a.member:hover { border-color: var(--line2); }
.member-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
.member-head .who-box { flex: 1; min-width: 220px; }
.member-head .who-box b { font-family: var(--head); font-size: 15px; font-weight: 600; }
.member-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.member-body { border-top: 1px solid var(--line); padding: 16px 20px 20px; display: grid; gap: 16px; background: rgba(0,0,0,.12); }
.mini-ovs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.mini-ov { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--s2); display: flex; flex-direction: column; }
.mini-ov .thumb { border-bottom: 1px solid var(--line); }
.mini-ov .body { padding: 12px; display: grid; gap: 10px; }
.integ { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.integ-box { border: 1px solid var(--line); background: var(--s2); border-radius: var(--r2); padding: 16px; display: grid; gap: 10px; align-content: start; }
.integ-box h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.integ-box h3 .ic { width: 30px; height: 30px; }
.integ-box .field { margin-bottom: 0; }
.integ-box .grid2 { gap: 12px; }
.integ-box .check { margin-bottom: 0; }

/* ----- Editor ----- */
.editor { display: grid; grid-template-columns: 270px minmax(0, 1fr) 340px; height: calc(100vh - var(--top-h)); }
/* 1101–1599px: στενότερες στήλες, για να μεγαλώσει ο καμβάς. «Μεγάλος καμβάς» (.wide): μόνο ο καμβάς. */
@media (min-width: 1101px) and (max-width: 1599px) { .editor { grid-template-columns: 220px minmax(0, 1fr) 300px; } }
@media (min-width: 1101px) { .editor.wide { grid-template-columns: minmax(0, 1fr); } .editor.wide .ed-left, .editor.wide .ed-right { display: none; } }
.ed-left, .ed-right { background: var(--s1); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.ed-left { border-right: 1px solid var(--line); }
.ed-right { border-left: 1px solid var(--line); }
.ed-sec { padding: 16px; border-bottom: 1px solid var(--line); }
.ed-sec h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; font-family: Inter, sans-serif; font-weight: 600; }
.ed-sec .field { margin-bottom: 12px; }
.scenes { display: grid; gap: 2px; }
.scene-btn { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 34px; border-radius: var(--r); cursor: pointer; border: 1px solid transparent; background: transparent; text-align: left; width: 100%; color: var(--muted); font-weight: 600; font-size: 13px; }
.scene-btn:hover { background: var(--s2); color: var(--text); }
.scene-btn.on { background: var(--s2); border-color: var(--line2); color: var(--text); }
.scene-btn .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--line3); flex: none; }
.scene-btn.on .dot { background: var(--acc); }
/* Γραμμή σκηνής: κουμπί + «⋯» (φαίνεται στο hover, στο focus και στην ενεργή σκηνή). */
.scene-row { position: relative; display: flex; align-items: center; min-width: 0; }
.scene-row .scene-btn { flex: 1; min-width: 0; padding-right: 34px; }
.scene-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; background: none; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; opacity: 0; padding: 0; }
.scene-row:hover .scene-more, .scene-row:focus-within .scene-more, .scene-row.on .scene-more { opacity: .8; }
.scene-more:hover, .scene-more:focus-visible { opacity: 1; background: var(--s3); color: var(--text); }
.scene-rename { height: 34px; flex: 1; min-width: 0; }
.layers { display: grid; gap: 2px; }
.layer { display: flex; align-items: center; gap: 8px; padding: 0 8px; height: 32px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--muted); user-select: none; border: 1px solid transparent; background: none; width: 100%; text-align: left; }
.layer:hover { background: var(--s2); color: var(--text); }
.layer.on { background: var(--acc-soft); border-color: rgba(255,138,31,.35); color: var(--text); }
.layer .ic { width: 20px; height: auto; text-align: center; background: none; border: 0; border-radius: 0; display: inline-block; }
.layer .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer .eye { opacity: .55; background: none; border: 0; cursor: pointer; padding: 4px; color: inherit; display: grid; place-items: center; border-radius: 5px; }
.layer .eye:hover { opacity: 1; background: var(--s3); }
.layer .eye svg.i { width: 14px; height: 14px; }
.layer.off .nm { text-decoration: line-through; opacity: .5; }
.layers { grid-template-columns: minmax(0, 1fr); } /* μεγάλα ονόματα (π.χ. κείμενα των kits) δεν σπρώχνουν τα κουμπιά έξω */
.layer .nm { min-width: 0; }
.layer .lk { opacity: 0; background: none; border: 0; cursor: pointer; padding: 4px; color: inherit; display: grid; place-items: center; border-radius: 5px; }
.layer:hover .lk, .layer:focus-within .lk, .layer.on .lk { opacity: .5; }
.layer .lk.on { opacity: .85; }
.layer .lk:hover, .layer .lk:focus-visible { opacity: 1; background: var(--s3); }
.layer .lk svg.i { width: 14px; height: 14px; }
.hit.locked.on { border-style: dashed; background: transparent; }
/* Λίστα «Στοιχεία»: λαβή για σύρσιμο, hover από τον καμβά, γραμμή πτώσης, μετονομασία επί τόπου. */
.layers { position: relative; }
.layer.hover { background: var(--s2); color: var(--text); }
/* Χώρος για το όνομα: η λαβή κάθεται στο αριστερό περιθώριο, το λουκέτο φαίνεται μόνο όταν είναι κλειδωμένο ή στο hover/επιλογή. */
.layer { position: relative; gap: 6px; padding-left: 14px; }
.layer .lk:not(.on) { display: none; }
.layer:hover .lk:not(.on), .layer:focus-within .lk:not(.on), .layer.on .lk:not(.on) { display: grid; }
.layer .grip { position: absolute; left: 1px; top: 0; bottom: 0; width: 12px; display: grid; place-items: center; color: var(--dim); opacity: 0; cursor: grab; touch-action: none; }
.layer:hover .grip, .layer.on .grip, .layer:focus-visible .grip { opacity: .7; }
.layer .grip svg.i { width: 12px; height: 12px; }
.layer.dragging { opacity: .55; cursor: grabbing; }
.layer-drop { position: absolute; left: 4px; right: 4px; height: 2px; border-radius: 2px; background: var(--acc); pointer-events: none; z-index: 2; }
.layer-rename { height: 26px; padding: 0 6px; font-size: 13px; flex: 1; min-width: 0; }
.layer-hint { width: 100%; margin-top: 8px; justify-content: flex-start; }
.ed-center { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
/* Η μπάρα του editor σε μία γραμμή όσο χωράει· όταν δεν χωρά (στενή οθόνη, «Όχι στο OBS», μεγάλο μήνυμα αποθήκευσης), η δεξιά ομάδα
   (.ed-bar-r) κατεβαίνει ολόκληρη σε δεύτερη σειρά αντί να κόβεται ή να «τρώει» το όνομα του overlay (που κρατά πάντα ~9 γράμματα). */
.ed-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--s1); flex-wrap: wrap; row-gap: 6px; min-height: 52px; }
.ed-bar > * { min-width: 0; flex: none; }
.ed-bar > b { font-family: var(--head); font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.ed-bar .sp { flex: 1 1 0; }
.ed-bar select.input { height: 30px; font-size: 12.5px; flex: 0 1 150px; max-width: 150px; }
/* Η κατάσταση αποθήκευσης δεν μικραίνει ποτέ (μικραίνουν όνομα, «Μέλος» και δοκιμή)· μόνο ένα μεγάλο μήνυμα σφάλματος κόβεται, με όλο το κείμενο στο title. */
.ed-bar .save-state { flex: none; }
.ed-bar .save-state > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.ed-bar .btn.ed-tg[aria-pressed="false"] { color: var(--muted); }
.ed-bar > [hidden], .ed-ref[hidden] { display: none !important; }
.ed-owner { font-size: 12px; color: var(--warn); background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.3); padding: 3px 9px; border-radius: 7px; flex: none !important; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1599px) { .ed-bar .ed-hide-sm { display: none; } .ed-bar > b { max-width: 160px; } .ed-bar .save-state > span { max-width: 160px; } }
.ed-bar > b.ed-title { min-width: min(9ch, 100%); }
/* Κάτω από 1440px το «Μέλος: …» δεν χωρά δίπλα στα υπόλοιπα· το λέει ήδη η μπάρα «Διαχειρίζεσαι τον λογαριασμό» από πάνω. */
@media (max-width: 1439px) { .ed-bar .ed-owner { display: none; } }
.ed-bar-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ed-bar-r > * { flex: none; }
.ed-bar-r > .ed-obs:empty { display: none; }
/* Κινητό: και η δεξιά ομάδα σπάει σε σειρές (pill «Όχι στο OBS», κατάσταση, Προεπισκόπηση, Link OBS), ώστε η σελίδα να μην κυλά στο πλάι. */
@media (max-width: 760px) { .ed-bar-r { flex-wrap: wrap; row-gap: 6px; min-width: 0; max-width: 100%; justify-content: flex-end; } }
.save-state { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.save-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.save-state.busy i { background: var(--warn); }
.save-state.err i { background: var(--err); }
.canvas-wrap { flex: 1; position: relative; overflow: hidden; display: grid; place-items: center; padding: 18px; background-color: #08090b; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 24px 24px; }
.canvas { position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.6); border-radius: 4px; overflow: hidden; outline: 1px solid var(--line2); }
.canvas iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; }
/* Τα κουτιά (.hit) δεν πιάνουν κλικ: το .hits τα παίρνει όλα και το panel.js βρίσκει ποιο στοιχείο είναι από κάτω (stackAt).
   Πιάνουν μόνο οι λαβές μεγέθους και η μπάρα του επιλεγμένου. Χωρίς επιλογή, στο κινητό το δάχτυλο κυλά τη σελίδα (pan-y). */
.hits { position: absolute; inset: 0; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; }
.hit { position: absolute; border: 1px dashed transparent; border-radius: 2px; pointer-events: none; }
.hit.hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.03); }
.hit.on { border: 2px solid var(--acc); background: rgba(255,138,31,.05); }
.hit.ghost { border: 2px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.04); }
.hit .lbl { position: absolute; left: -2px; top: -22px; background: var(--acc); color: var(--ink); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px 5px 5px 0; white-space: nowrap; display: none; }
.hit.on .lbl { display: block; }
.hit.hover .lbl { display: block; opacity: .75; }
.hit.on.hover .lbl { opacity: 1; }
.hit .lbl.in { top: 2px; left: 2px; border-radius: 5px; }
.hit.ghost .lbl { background: var(--s3); color: var(--text); }
.hit .h { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--acc); border-radius: 2px; display: none; pointer-events: auto; }
.hit.on .h { display: block; }
.hits.dragging .ed-qbar { display: none; }
/* Μπάρα του επιλεγμένου στοιχείου (πάνω δεξιά): Κλείδωμα, Διπλότυπο, Διαγραφή, Περισσότερα. */
.ed-qbar { position: absolute; z-index: 6; display: flex; gap: 2px; padding: 3px; background: var(--s2); border: 1px solid var(--line2); border-radius: 9px; box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: auto; }
.ed-qbar .qb { width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; padding: 0; }
.ed-qbar .qb:hover, .ed-qbar .qb:focus-visible { background: var(--s3); color: var(--text); }
.ed-qbar .qb[aria-pressed="true"] { color: var(--acc); }
.ed-qbar .qb svg.i { width: 15px; height: 15px; }
/* Εικόνα αναφοράς της σκηνής (μόνο στον editor): ημιδιάφανη πάνω από το overlay, κάτω από τα κουτιά (το iframe του editor δεν είναι διάφανο). */
.ed-ref { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Ζουμ: ο καμβάς κυλά μέσα στο .canvas-wrap όταν είναι μεγαλύτερος (με margin auto μένει στη μέση όταν χωρά). */
.canvas-area { position: relative; flex: 1; display: flex; min-height: 0; min-width: 0; }
.canvas-wrap.zoomed { overflow: auto; place-items: start; }
.canvas-wrap.zoomed .canvas { margin: auto; flex: none; }
.zoom-bar { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 3px; background: rgba(17,19,24,.88); border: 1px solid #2e333d; border-radius: 10px; color: #e8eaee; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.zoom-bar .zb { height: 26px; min-width: 26px; display: grid; place-items: center; background: none; border: 0; border-radius: 6px; color: #9ba2ae; cursor: pointer; padding: 0 6px; font-size: 12px; font-weight: 600; }
.zoom-bar .zb:hover, .zoom-bar .zb:focus-visible { background: #1e222a; color: #e8eaee; }
.zoom-bar .zb svg.i { width: 15px; height: 15px; }
.zoom-pct { min-width: 42px; text-align: center; font: 600 12px var(--mono); color: #e8eaee; }
.h.nw { left: -7px; top: -7px; cursor: nwse-resize; } .h.ne { right: -7px; top: -7px; cursor: nesw-resize; }
.h.sw { left: -7px; bottom: -7px; cursor: nesw-resize; } .h.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.h.n { left: 50%; top: -7px; margin-left: -6px; cursor: ns-resize; } .h.s { left: 50%; bottom: -7px; margin-left: -6px; cursor: ns-resize; }
.h.w { top: 50%; left: -7px; margin-top: -6px; cursor: ew-resize; } .h.e { top: 50%; right: -7px; margin-top: -6px; cursor: ew-resize; }
.guide { position: absolute; background: #22d3ee; pointer-events: none; z-index: 5; }
.guide.v { width: 1px; top: 0; bottom: 0; } .guide.hz { height: 1px; left: 0; right: 0; }
.ai-bar { padding: 12px; border-top: 1px solid var(--line); background: var(--s1); }
.ai-box { display: flex; gap: 8px; align-items: flex-end; background: var(--field); border: 1px solid var(--line2); border-radius: 12px; padding: 6px 6px 6px 12px; transition: border-color .15s, box-shadow .15s; }
.ai-box:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255,138,31,.15); }
.ai-box textarea { flex: 1; background: none; border: 0; outline: none; resize: none; padding: 7px 0; min-height: 22px; max-height: 120px; line-height: 1.45; }
.ai-reply { font-size: 13px; color: var(--muted); margin: 0 4px 8px; display: flex; gap: 8px; align-items: flex-start; }
.ai-reply b { color: var(--acc); }
/* Τα παραδείγματα του AI φαίνονται μόνο όσο γράφεις (κρατά χώρο για τον καμβά). */
.ai-chips { display: none; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ai-bar:focus-within .ai-chips { display: flex; }
.ai-chips button { background: transparent; border: 1px solid var(--line2); color: var(--muted); font-size: 12px; height: 28px; padding: 0 10px; border-radius: 99px; cursor: pointer; }
.ai-chips button:hover { color: var(--text); border-color: var(--line3); }
.tabs-row { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--s1); z-index: 3; }
.tabs-row button { position: relative; background: none; border: 0; padding: 8px 10px 12px; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 13px; }
.tabs-row button:hover { color: var(--text); }
.tabs-row button.on { color: var(--text); }
.tabs-row button.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preset { border: 1px solid var(--line2); border-radius: 10px; padding: 10px; cursor: pointer; background: var(--s2); text-align: left; color: var(--text); }
.preset:hover { border-color: var(--acc); }
.preset .sw { display: flex; gap: 4px; margin-bottom: 6px; }
.preset .sw i { width: 16px; height: 16px; border-radius: 4px; }
.preset span { font-size: 12px; font-weight: 600; }
.gallery { position: absolute; z-index: 60; width: 320px; background: var(--s2); border: 1px solid var(--line2); border-radius: 12px; padding: 8px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gallery button { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px; border-radius: 7px; cursor: pointer; text-align: left; font-size: 13px; color: var(--text); }
.gallery button:hover { background: var(--s3); }
.history { display: grid; gap: 4px; max-height: 320px; overflow: auto; margin-top: 8px; }
.history button { display: flex; justify-content: space-between; gap: 8px; background: var(--s2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; cursor: pointer; font-size: 12px; text-align: left; color: var(--text); height: auto; }
.history button:hover { border-color: var(--acc); }
.editor-mobile { display: none; }
.editor.ai-busy .hits, .editor.ai-busy .ed-left, .editor.ai-busy .ed-right { pointer-events: none; opacity: .55; transition: opacity .2s; }
.ed-sec.ed-keys { padding: 10px 16px; }
.ed-keys .btn { color: var(--muted); }
/* Παράθυρο «Συντομεύσεις» (πλήκτρο ?). */
.keys-list { display: grid; gap: 8px; margin-bottom: 12px; }
.keys-row { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 12px; align-items: baseline; font-size: 13.5px; }
.keys-k { color: var(--dim); white-space: nowrap; }

/* ----- Live ----- */
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.live-grid > .card + .card { margin-top: 0; }
.live-grid .card > h2 { font-size: 15px; }
.counter { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.counter .n { font-size: 52px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--head); letter-spacing: -.03em; margin-top: 6px; }
.counter .lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.big-btns { display: flex; gap: 8px; }
.big-btns .btn { width: 60px; height: 60px; font-size: 26px; border-radius: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.seg button { height: 34px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line2); background: transparent; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); }
.seg button:hover { color: var(--text); border-color: var(--line3); }
.seg button.on { background: var(--grad); color: var(--ink); border-color: transparent; }
.urlrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.urlrow code, .code-chip { flex: 1; min-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--field); border: 1px solid var(--line); border-radius: var(--r); padding: 0 10px; height: 32px; line-height: 30px; font: 12px/30px var(--mono); color: var(--muted); }
.urlrow .lab { min-width: 150px; font-weight: 600; font-size: 13px; }
.steps { counter-reset: s; display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 8px; background: var(--acc-soft); border: 1px solid rgba(255,138,31,.3); color: var(--acc); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.steps li > div { padding-top: 3px; min-width: 0; }
.tbl .kbd { font-size: 12px; }
.feed { display: grid; gap: 6px; max-height: 380px; overflow-y: auto; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--s2); }
.feed-row.test .feed-txt { color: var(--muted); }
.feed-row.test .feed-ic { background: var(--s3); color: var(--muted); }
.feed-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc); flex: none; font-size: 15px; }
.feed-txt { flex: 1; min-width: 0; }
.feed-txt > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .btn { flex: none; }
@media (min-width: 1180px) { .feed-card { grid-column: span 2; } }

/* ----- Οθόνες ----- */
@media (max-width: 1280px) {
  :root { --side-w: 232px; }
  .page { padding: 24px 24px 64px; }
  .g-5, .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 > .span-2 { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .dash-row, .dash-row.rev { grid-template-columns: minmax(0, 1fr); }
  .editor { grid-template-columns: 1fr; height: auto; }
  .ed-left, .ed-right { border: 0; border-bottom: 1px solid var(--line); max-height: none; }
  /* Κινητό/tablet: μπάρα, καμβάς 16:9 (όχι σκοτεινό κουτί 60vh), αμέσως από κάτω οι ρυθμίσεις του στοιχείου, μετά ο AI βοηθός,
     σκηνές και στοιχεία. Το .ed-center «λύνεται» (display: contents), ώστε τα κομμάτια του να μπουν στη σειρά με order. */
  .ed-center { display: contents; }
  .ed-center > * { order: -3; }
  .ed-right { order: -2; }
  .ed-center > .ai-bar { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .canvas-area { display: block; flex: none; }
  .canvas-wrap { flex: none; width: 100%; aspect-ratio: 16 / 9; padding: 8px; }
  .zoom-bar { display: none; }
  .ed-bar { flex-wrap: wrap; }
  .ed-wide-btn { display: none; }
  .editor-mobile { display: flex; margin: 12px 12px 0; grid-column: 1 / -1; order: -4; }
}
@media (max-width: 760px) { .ed-keys { display: none; } }
@media (max-width: 960px) {
  .shell, body.rail .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; height: auto; transform: translateX(-102%); transition: transform .22s ease; box-shadow: none; }
  body.nav-open .side { transform: none; box-shadow: var(--shadow); }
  body.rail .side-head { padding: 0 16px; justify-content: flex-start; }
  body.rail .side-head .brand .txt, body.rail .nav-item .nav-label, body.rail .me-box .me-txt, body.rail .me-box > .icon-btn, body.rail .side-links .lbl { display: revert; }
  body.rail .nav-item { justify-content: flex-start; padding: 0 10px; height: 34px; }
  body.rail .side-foot { justify-items: stretch; padding: 12px; }
  body.rail .side-links { flex-direction: row; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .menu-btn { display: inline-grid; }
  .top { padding: 0 16px; gap: 8px; }
  .top-brand { display: flex; }
  .top-brand .brand .txt span { display: none; }
  .crumbs { display: none; }
  .rail-btn { display: none !important; }
  .g-2 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
}
@media (max-width: 760px) {
  .page { padding: 20px 16px 64px; }
  h1 { font-size: 21px; }
  .page-head { margin-bottom: 20px; }
  .page-actions { width: 100%; }
  .page-actions select.input { flex: 1 1 160px; width: auto !important; }
  .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 12px 14px; }
  .stat-value { font-size: 22px; }
  .ovs { grid-template-columns: minmax(0, 1fr); }
  .counter .n { font-size: 46px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .urlrow .lab { min-width: 100%; }
  .card { padding: 16px; }
  .card.flush > .card-head { padding: 14px 16px; }
  .card.flush .list-row { padding: 12px 16px; }
  .card-tools { padding: 12px 16px; }
  .card.flush .tbl th:first-child, .card.flush .tbl td:first-child { padding-left: 16px; }
  .card.flush .tbl th:last-child, .card.flush .tbl td:last-child { padding-right: 16px; }
  .member-head { padding: 14px 16px; }
  .member-body { padding: 14px 16px 16px; }
  .top-status .pill .long { display: none; }
}
@media (max-width: 420px) {
  .top-brand .brand .txt { display: none; }
  .btn { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----- Διακόπτης λογαριασμού (μόνο admin, πάνω δεξιά) και μπάρα «Διαχειρίζεσαι…» ----- */
:root { --ctx-h: 44px; }
.as { display: flex; align-items: center; }
.as[hidden], .as-pop[hidden], .as-scrim[hidden], .ctx-bar[hidden] { display: none; }
.as-btn { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; max-width: 220px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line2); background: var(--s2); color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.as-btn:hover { border-color: var(--line3); background: var(--s3); }
.as-btn[aria-expanded=true] { border-color: var(--acc-line); }
.as-btn.other { border-color: var(--acc-line); background: var(--acc-soft); }
.as-btn .avatar { width: 30px; height: 30px; font-size: 12.5px; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.as-txt { display: grid; min-width: 0; line-height: 1.2; }
.as-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-login { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-live { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; box-shadow: 0 0 0 3px rgba(240,71,90,.22); animation: blink 1.4s infinite; }
.as-btn .chev { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; }
.as-btn[aria-expanded=true] .chev { transform: rotate(180deg); }
.as-pop { position: fixed; z-index: 90; width: 380px; max-width: calc(100vw - 16px); max-height: min(72vh, 560px); display: flex; flex-direction: column; background: var(--s2); border: 1px solid var(--line2); border-radius: var(--r2); box-shadow: var(--shadow); overflow: hidden; }
.as-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.as-head b { font-family: var(--head); font-size: 14px; font-weight: 600; }
.as-filter { flex: none; margin: 10px 10px 2px; width: auto; height: 34px; }
.as-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; display: grid; gap: 2px; align-content: start; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.as-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); cursor: pointer; outline: none; }
.as-opt:hover { background: var(--s3); }
.as-opt:focus-visible { background: var(--s3); box-shadow: inset 0 0 0 2px var(--acc); }
.as-opt.on { background: var(--acc-soft); }
.as-opt.on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.as-opt .avatar { width: 34px; height: 34px; }
.as-opt-txt { min-width: 0; }
.as-opt-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.as-opt-l1 b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-opt-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: var(--dim); }
.as-opt-l2 .badge { height: 20px; font-size: 11px; }
.as-check { width: 16px; height: 16px; color: var(--acc); }
.as-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.as-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-decoration: none !important; }
.as-foot:hover, .as-foot:focus-visible { color: var(--text); background: var(--s3); }
.as-scrim { display: none; }
.ctx-bar { position: sticky; top: var(--top-h); z-index: 45; display: flex; align-items: center; gap: 10px; height: var(--ctx-h); padding: 0 24px 0 21px; background: linear-gradient(90deg, rgba(255,138,31,.17), rgba(255,138,31,.05) 70%), var(--bg); border-left: 3px solid var(--acc); border-bottom: 1px solid var(--acc-line); font-size: 13px; }
.ctx-bar .avatar { width: 26px; height: 26px; font-size: 11.5px; }
.ctx-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ctx-txt b { color: var(--text); font-weight: 600; }
.ctx-live { color: var(--live); font-weight: 700; }
.ctx-bar .short { display: none; }
.ctx-back { flex: none; }
body.as-other .top { border-bottom-color: var(--acc-line); }
body.as-other .editor { height: calc(100vh - var(--top-h) - var(--ctx-h)); }
@media (max-width: 1100px) { body.as-other .editor { height: auto; } }
@media (max-width: 960px) {
  /* Κινητό: το chip φαίνεται μόνο όταν διαχειρίζεσαι άλλο μέλος (στον δικό σου λογαριασμό: Διαχείριση Studio › Μέλη ή η αναζήτηση) */
  .as.self { display: none; }
  .as-btn { max-width: 132px; padding: 0 8px; gap: 4px; }
  .as-btn .as-ic { display: none; }
  .as-live { box-shadow: none; }
  .as-pop { left: 0; right: 0 !important; top: auto !important; bottom: 0; width: auto; max-width: none; max-height: 82vh; border-radius: 16px 16px 0 0; border-bottom: 0; z-index: 96; padding-bottom: env(safe-area-inset-bottom); }
  .as-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 95; }
  .as-opt { padding: 11px 10px; }
  .ctx-bar { padding: 0 12px 0 13px; gap: 8px; }
  .ctx-bar .long, .ctx-note, .ctx-login { display: none; }
  .ctx-bar .short { display: inline; }
}

/* ----- Αρχική, δραστηριότητα, streams (assets/panel-dash.js) — κλάσεις dh-*, πλέγμα 8px, μόνο tokens ----- */
.dh-head { margin-bottom: 16px; }
.dh-sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; color: var(--muted); font-size: 13.5px; }
.dh-sub-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-live { flex: none; }
.dh-main-cards { display: grid; gap: 16px; }
.dh-main-cards:not(:empty) { margin-bottom: 16px; }
.dh-main-cards > .card + .card, .dh-side > .card + .card { margin-top: 0; }
.dh-slot { display: none; }
/* Περίοδος */
.dh-pbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.dh-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--s1); border: 1px solid var(--line); border-radius: 10px; }
.dh-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.dh-seg button:hover { color: var(--text); }
.dh-seg button[aria-checked=true] { background: var(--s3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2), 0 1px 2px rgba(0,0,0,.3); }
.dh-pnav { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.dh-plabel { min-width: 176px; text-align: center; font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-compare { margin-left: auto; color: var(--dim); font-size: 12.5px; }
.dh-pnav .btn[hidden] { display: none; }
.dh.dh-loading .dh-tiles, .dh.dh-loading .dh-chart-root, .dh-hist[aria-busy=true] { opacity: .5; transition: opacity .2s; }
/* Δείκτες */
.dh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dh-tile { position: relative; display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px; text-align: left; border-radius: var(--r2); border: 1px solid var(--line); background: var(--s1); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.dh-tile:hover { border-color: var(--line2); }
.dh-tile.on { border-color: var(--acc-line); background: linear-gradient(180deg, var(--acc-soft), transparent 72%), var(--s1); }
.dh-tile.static { cursor: default; }
.dh-tile.static:hover { border-color: var(--line); }
.dh-tile-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dh-tile-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--s3); color: var(--muted); }
.dh-tile-ic svg.i { width: 14px; height: 14px; }
.dh-tile.on .dh-tile-ic { background: var(--acc-soft); color: var(--acc); }
.dh-tile-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-delta { flex: none; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.4; }
.dh-delta.up { color: var(--ok); background: rgba(52,211,153,.1); }
.dh-delta.down { color: var(--err); background: rgba(248,113,113,.1); }
.dh-delta.flat, .dh-delta.none { color: var(--dim); background: var(--s2); }
.dh-tile-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-width: 0; margin-top: 8px; }
.dh-tiles > .dh-tile { container-type: inline-size; }
@container (max-width: 200px) { .dh-tile-val { font-size: 22px; } }
@container (max-width: 150px) { .dh-tile-val { font-size: 20px; } }
.dh-tile-val { min-width: 0; font-family: var(--head); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-tile-sub { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-tile-sub.hint { color: var(--info); }
/* Πλέγμα: γράφημα και δραστηριότητα αριστερά, στήλη καρτών δεξιά */
.dh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "chart side" "feed side"; grid-template-rows: auto 1fr; gap: 16px; align-items: start; }
.dh-a-chart { grid-area: chart; min-width: 0; }
.dh-a-feed { grid-area: feed; min-width: 0; }
.dh-side { grid-area: side; display: grid; gap: 16px; align-content: start; min-width: 0; }
.dh-side .stat { padding: 10px; }
.dh-side .stat-label { font-size: 11.5px; }
.dh-side .stat-value { font-size: 16px; }
.dh-side .grid { gap: 8px; }
.dh-side .grid.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Γράφημα */
.dh-chart-card .card-head { margin-bottom: 8px; }
.dh-ctabs { display: flex; gap: 4px; margin: 0 -20px 16px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.dh-ctabs::-webkit-scrollbar { display: none; }
.dh-ctab { position: relative; flex: none; padding: 8px 8px 12px; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.dh-ctab:hover, .dh-ctab.on { color: var(--text); }
.dh-ctab.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); }
.dh-chart-root { position: relative; }
.dh-chart-scroll.scrolls { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; padding-bottom: 4px; }
.dh-chart { position: relative; }
.dh-svg { display: block; overflow: visible; }
.dh-gl line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.dh-gl line.base { stroke: var(--line3); }
.dh-gl text, .dh-xl text { fill: var(--dim); font: 500 11px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.dh-bar { fill: var(--acc); opacity: .88; transition: opacity .12s; }
.dh-svg.hovering .dh-bar { opacity: .35; }
.dh-svg.hovering .dh-bar.on { opacity: 1; }
.dh-hits rect { fill: transparent; outline: none; }
.dh-hits rect:hover { fill: rgba(255,255,255,.025); }
.dh-hits rect:focus-visible { fill: var(--acc-soft); stroke: var(--acc-line); stroke-width: 1; }
.dh-line { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dh-stop-a { stop-color: var(--acc); stop-opacity: .26; }
.dh-stop-b { stop-color: var(--acc); stop-opacity: 0; }
.dh-cross { stroke: var(--line3); stroke-dasharray: 3 3; }
.dh-dot { fill: var(--s1); stroke: var(--acc); stroke-width: 2.5; }
.dh-tip { position: absolute; z-index: 3; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--s3); box-shadow: var(--shadow); white-space: nowrap; pointer-events: none; }
.dh-tip.below { transform: translate(-50%, 0); }
.dh-tip-l { font-size: 11.5px; color: var(--muted); }
.dh-tip-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.dh-tip-v.dim { color: var(--muted); font-weight: 600; }
.dh-xl text.fut { opacity: .5; }
.dh-chart-empty { position: absolute; inset: 0 0 32px 48px; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; color: var(--muted); font-size: 13px; pointer-events: none; }
.dh-chart-empty[hidden] { display: none; }
.dh-chart-empty b { font-family: var(--head); font-size: 14px; font-weight: 600; color: var(--text); }
.dh-chart-empty .empty-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--s2); }
.dh-chart-root.is-empty .dh-gl text, .dh-chart-root.is-empty .dh-xl { opacity: .45; }
/* Δραστηριότητα (ροή και ιστορικό) */
.dh-alertbar { padding: 12px 20px; border-bottom: 1px solid var(--line); }
.dh-tools { min-width: 0; }
.dh-chips .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -2px; padding: 2px; }
.dh-chips .chips::-webkit-scrollbar { display: none; }
.dh-feed { display: grid; max-height: 616px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.dh-ev { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; grid-template-areas: "ic main when acts"; align-items: center; gap: 12px; min-width: 0; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.dh-ev:last-child { border-bottom: 0; }
.dh-ev > .ic { grid-area: ic; }
.dh-ev-main { grid-area: main; min-width: 0; }
.dh-ev-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dh-ev-l1 b { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-ev-kind { flex: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dh-ev-l2 { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-ev-l2.only-ago, .dh-ev-ago { display: none; }
.dh-ev-type { grid-area: type; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-ev-when { grid-area: when; font-size: 12px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
a.dh-ev-when:hover { color: var(--acc); }
.dh-ev-acts { grid-area: acts; display: flex; align-items: center; gap: 4px; }
.dh-ev-gap { width: 30px; }
.dh-ev.thanked .dh-ev-l1 b { color: var(--muted); }
.dh-thank { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.dh-thank svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.dh-thank:hover { border-color: rgba(52,211,153,.45); color: var(--ok); }
.dh-thank[aria-checked=true] { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.45); color: var(--ok); }
.dh-ev.wide { grid-template-columns: 32px 160px minmax(0, 1fr) 168px auto; grid-template-areas: "ic type main when acts"; }
.dh-ev.wide .dh-ev-kind { display: none; }
.dh-hist-head { display: grid; grid-template-columns: 32px 160px minmax(0, 1fr) 168px 64px; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); font-size: 12px; font-weight: 600; color: var(--dim); }
.dh-hist-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.dh-search { position: relative; flex: 1 1 240px; max-width: 360px; }
.dh-search > svg.i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.dh-search .input { padding-left: 36px; }
.dh-range { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-date { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dh-date .input { width: 160px; }
.dh-hist-tg { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.dh-hist-tg .toggle-row { gap: 8px; }
.dh-hist-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); }
.dh-hist-foot .btn[hidden], .dh-hist-tg .btn[hidden] { display: none; }
/* Δεξιά στήλη: τελευταίο stream */
.dh-last-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.dh-last-title:hover { color: var(--acc); text-decoration: none; }
.dh-last-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.dh-game { display: inline-flex; align-items: center; max-width: 100%; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--s3); color: var(--muted); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--line); overflow: hidden; }
.dh-ms { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 10px 12px; background: var(--s1); }
.dh-ms-l, .dh-ms-s { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-ms-s { font-size: 11px; }
.dh-ms-v { font-family: var(--head); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-last-acts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
/* Από κάτω */
.dh-below { margin-top: 16px; }
.dh-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dh-row2 > .card + .card { margin-top: 0; }
.dh-quick-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dh-quick-wide .list-row { border-bottom: 0; }
.dh-quick .list-row:hover { background: rgba(255,255,255,.02); text-decoration: none; }
.dh-quick .chev { color: var(--dim); }
.section-title .dh-sec-acts { order: 2; display: flex; gap: 4px; }
/* Streams */
.dh-sts { display: grid; }
.dh-st { display: grid; grid-template-columns: 48px minmax(0, 1fr) 128px auto 16px; grid-template-areas: "date main spark ms chev"; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none !important; transition: background .12s; }
.dh-st:last-child { border-bottom: 0; }
.dh-st:hover { background: rgba(255,255,255,.02); }
.dh-st > .chev { grid-area: chev; color: var(--dim); }
.dh-st-date { grid-area: date; display: grid; justify-items: center; align-content: center; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--s2); line-height: 1.15; }
.dh-st-date b { font-family: var(--head); font-size: 17px; font-weight: 600; }
.dh-st-date span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.dh-st-main { grid-area: main; min-width: 0; }
.dh-st-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.dh-st-title > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-st-meta { margin-top: 2px; font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-st-spark { grid-area: spark; min-width: 0; }
.dh-spark { display: block; width: 128px; height: 32px; }
.dh-spark-l { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linejoin: round; }
.dh-spark-a { fill: var(--acc-soft); }
.dh-spark-none { stroke: var(--line2); stroke-dasharray: 3 3; }
.dh-st-ms { grid-area: ms; display: grid; grid-template-columns: repeat(4, 52px) 80px 48px; gap: 8px; }
.dh-sm { display: grid; gap: 2px; min-width: 0; text-align: right; }
.dh-sm span { font-size: 11px; color: var(--dim); white-space: nowrap; }
.dh-sm b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-tiles.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Live έλεγχος: κάρτες ενοτήτων πάνω από τα κουμπιά */
.live-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.live-extras > .card + .card { margin-top: 0; }
/* Μενού λογαριασμού: όνομα, κανάλι, ρόλος, θέμα, γλώσσα */
#acctMenu { width: 288px; }
.menu-pop .menu-head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.menu-who { display: grid; min-width: 0; line-height: 1.35; }
.menu-who b, .menu-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-group { margin: 6px -6px 0; padding: 10px 16px 8px; border-top: 1px solid var(--line); }
.menu-label { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.menu-seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); }
.menu-pop .menu-seg button { flex: 1 1 0; justify-content: center; gap: 4px; width: auto; height: 28px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.menu-pop .menu-seg button.on { background: var(--s3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.menu-pop .menu-seg button:disabled { opacity: .45; cursor: default; background: none; }
.menu-pop .menu-seg button svg.i { width: 12px; height: 12px; color: var(--acc); }
.menu-note { margin-top: 6px; font-size: 11.5px; color: var(--dim); }
.menu-pop .menu-out { position: relative; margin-top: 6px; }
.menu-pop .menu-out::before { content: ''; position: absolute; left: -6px; right: -6px; top: -4px; height: 1px; background: var(--line); }
.menu-pop a.menu-small { padding: 4px 10px 6px; font-size: 12px; color: var(--dim); }
.menu-pop a.menu-small:hover { color: var(--text); background: none; text-decoration: underline; }
@media (max-width: 1280px) {
  .dh-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .dh-tiles.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dh-st { grid-template-columns: 48px minmax(0, 1fr) auto 16px; grid-template-areas: "date main ms chev"; }
  .dh-st-spark { display: none; }
}
@media (max-width: 1100px) {
  .dh-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "side" "feed"; grid-template-rows: auto; }
  .dh-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
  .dh-row2 { grid-template-columns: minmax(0, 1fr); }
  .dh-quick-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-ev.wide { grid-template-columns: 32px 128px minmax(0, 1fr) 136px auto; }
  .dh-hist-head { grid-template-columns: 32px 128px minmax(0, 1fr) 136px 64px; }
}
@media (max-width: 960px) {
  .dh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dh-compare { width: 100%; margin-left: 0; }
}
@media (max-width: 760px) {
  .dh-pbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dh-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dh-seg button { padding: 0 4px; }
  .dh-pnav { display: flex; }
  .dh-plabel { flex: 1; min-width: 0; }
  .dh-tile { padding: 12px; }
  .dh-tile-row { margin-top: 4px; }
  .dh-delta { padding: 1px 4px; font-size: 11px; }
  .dh-ctabs { margin: 0 -16px 12px; padding: 0 8px; }
  .dh-ev, .dh-ev.wide { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "ic main acts"; padding: 10px 16px; }
  .dh-ev.wide .dh-ev-kind { display: inline; }
  .dh-ev-type, .dh-hist-head, .dh-ev-when { display: none; }
  .dh-ev-l2.only-ago, .dh-ev-ago { display: inline; }
  .dh-ev-l2.only-ago { display: block; }
  .dh-feed { max-height: none; }
  .dh-feed > .dh-ev:nth-child(n+11) { display: none; }
  .dh-feed > .dh-ev:nth-child(10) { border-bottom: 0; }
  .dh-alertbar, .dh-hist-foot { padding: 12px 16px; }
  .dh-search { flex-basis: 100%; max-width: none; }
  .dh-range { width: 100%; flex-wrap: nowrap; }
  .dh-date { flex: 1 1 0; min-width: 0; }
  .dh-date .input { width: 100%; min-width: 0; padding: 0 8px; }
  .dh-hist-tg { width: 100%; margin-left: 0; justify-content: space-between; }
  .dh-quick-wide { grid-template-columns: minmax(0, 1fr); }
  .dh-quick-wide .list-row { border-bottom: 1px solid var(--line); }
  .dh-quick-wide .list-row:last-child { border-bottom: 0; }
  .dh-st { grid-template-columns: 48px minmax(0, 1fr) 16px; grid-template-areas: "date main chev" "ms ms ms"; gap: 12px 12px; padding: 14px 16px; }
  .dh-st-ms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 10px 12px; border-radius: 10px; background: var(--s2); }
  .dh-sm { text-align: left; }
  .dh-tiles.six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ----- Σελίδες χωρίς κέλυφος: S.view(name, fn, {bare: true}) (dock του OBS, τηλεχειριστήριο). Χωρίς μενού, πάνω μπάρα και μπάρα «Διαχειρίζεσαι…», όλο το πλάτος ----- */
body.bare .shell { grid-template-columns: minmax(0, 1fr); }
body.bare .side, body.bare .top, body.bare .ctx-bar, body.bare .scrim { display: none !important; }
/* Θέμα στο μενού λογαριασμού (Φωτεινό / Σύστημα / Σκοτεινό) */
.menu-pop .menu-seg .theme-opt svg.i { width: 13px; height: 13px; color: currentColor; }
.menu-pop .menu-seg .theme-opt.on svg.i { color: var(--acc); }
/* Οδηγός OBS: links «μόνο ένα στοιχείο» */
.wrow .lab { display: grid; gap: 1px; line-height: 1.3; flex: none; width: 210px; min-width: 0; }
.wlinks > .btn { margin-top: 4px; }
.wrow .wname { font-weight: 600; font-size: 13px; }
.wrow .wsize { font-size: 12px; font-weight: 500; color: var(--dim); }
.wrow:last-child { margin-bottom: 0; }
/* Λίστες με «Περισσότερα»: χωρίς κενή λωρίδα όταν δεν υπάρχουν άλλα */
.dh-hist-foot[hidden] { display: none; }
/* Αρχική/δραστηριότητα: «Ευχαρίστησε στο chat» (τρίτο κουμπί, ίδιο πλάτος σε όλες τις γραμμές) */
.dh-chat-btn.sent { color: var(--ok); opacity: 1; }
.dh-chat .dh-hist-head { grid-template-columns: 32px 160px minmax(0, 1fr) 168px 98px; }
/* Stream: clips και markers */
.dh-clip .ic { width: 30px; height: 30px; }
.dh-clip .t2 { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; white-space: normal; }
.dh-clip-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.dh-clips-empty { padding: 16px 20px; color: var(--muted); font-size: 13px; }
@media (max-width: 1100px) { .dh-chat .dh-hist-head { grid-template-columns: 32px 128px minmax(0, 1fr) 136px 98px; } }
@media (max-width: 760px) { .card.flush .dh-clips-empty { padding: 14px 16px; } .urlrow code { flex-basis: 100%; } .urlrow { margin-bottom: 14px; } .wrow .lab { width: 100%; grid-template-columns: auto auto; justify-content: start; gap: 8px; align-items: baseline; } }

/* =====================================================================================================================
   Κέλυφος (SHELL, 12/10): νέο μενού, πάνω/κάτω μπάρα, αναζήτηση, παράθυρα, κύλιση, κενά σελίδας, αφή, προσβασιμότητα.
   ===================================================================================================================== */
/* Παράλειψη μενού (πρώτο Tab) */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 300; padding: 8px 14px; border-radius: var(--r); background: var(--acc); color: var(--ink); font-weight: 700; text-decoration: none !important; }
.skip:focus { left: 12px; }
/* Κενά ανάμεσα στα κομμάτια της σελίδας: τίποτα δεν ακουμπά το επόμενο (κάρτες, πλέγματα, ειδοποιήσεις). Τα margins «συμπτύσσονται», άρα τα παλιά 16px δεν διπλασιάζονται. */
.page > * + * { margin-top: 16px; }
.page > .page-head + *, .page > .tabs + * { margin-top: 0; }
.page > .page-head + .tabs { margin-top: -8px; }
.page > .tabs + .tabs-sub { margin-top: -12px; }
.page > .section-title { margin-top: 32px; }
.page > .section-title + * { margin-top: 0; }
/* Μενού: στατικές επικεφαλίδες (όχι αναδίπλωση), σήματα, κλειδαριά, «Ρυθμίσεις/Διαχείριση» καρφιτσωμένα κάτω */
.side-nav { display: flex; flex-direction: column; }
.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 4px; }
.nav-head { padding: 2px 10px 6px; font: 600 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-group.nav-pin { margin-top: auto; }
.nav-pin .nav-list { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); }
.nav-badge { margin-left: auto; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: rgba(251,191,36,.14); color: var(--warn); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.nav-badge.acc { background: var(--acc-soft); color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc-line); }
.nav-item.locked { color: var(--dim); }
.nav-item.locked:hover { color: var(--muted); }
.nav-lock { width: 13px !important; height: 13px !important; margin-left: auto; color: var(--dim); }
.nav-badge + .nav-lock { margin-left: 6px; }
body.rail .nav-head { height: 1px; margin: 6px 14px 8px; padding: 0; font-size: 0; background: var(--line2); }
body.rail .nav-pin .nav-list { margin-top: 8px; }
body.rail .nav-badge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
body.rail .nav-lock { display: none; }
/* Πάνω μπάρα: διαδρομή με links, αναζήτηση, τίτλος/«πίσω» στο κινητό */
.top-search { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 210px; padding: 0 6px 0 10px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--field); color: var(--dim); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.top-search:hover { border-color: var(--line3); color: var(--muted); }
.top-search[hidden] { display: none; }
.top-search svg.i { width: 15px; height: 15px; }
.top-search kbd { margin-left: auto; padding: 1px 6px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; background: var(--s2); color: var(--muted); font: 11px var(--mono); }
.top-title, .top-back { display: none; }
/* Κατάσταση στην πάνω μπάρα */
.pill .short { display: none; }
.pill.warn { background: rgba(251,191,36,.1); color: var(--warn); }
.pill.off.warn::before { background: var(--warn); }
.pill.tipwait { background: rgba(251,191,36,.12); color: var(--warn); }
.pill.tipwait svg.i { width: 14px; height: 14px; }
.pill.onair.warn-live { box-shadow: 0 0 0 2px rgba(240,71,90,.35); }
.top-status .pill { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
/* Λωρίδα «Ξεκίνα εδώ» (S.onboard.banner) κάτω από την πάνω μπάρα */
.onb-slot { position: relative; z-index: 40; }
.onb-slot[hidden] { display: none; }
/* Διακόπτης λογαριασμού (admin): κείμενο-chip «Ντάνα ▾» */
.as-ic { width: 15px !important; height: 15px !important; color: var(--muted); }
.as-btn.other .as-ic { color: var(--acc); }
.as-btn .as-name { max-width: 150px; }
/* Καρτέλες: αριθμός (π.χ. Εισερχόμενα 1), κλειδαριά, δεύτερη σειρά (π.χ. Τροχός & πόντοι › Ανταμοιβές/Τροχός/Εξαργυρώσεις) */
.tab-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 99px; background: rgba(251,191,36,.16); color: var(--warn); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.tab-n[hidden] { display: none; }
.tab.locked { color: var(--dim); }
.tab-lock { width: 12px !important; height: 12px !important; margin-left: 4px; vertical-align: -1px; }
.tabs.tabs-sub { gap: 6px; margin-bottom: 20px; border-bottom: 0; }
.tabs-sub .tab { padding: 0 12px; height: 32px; display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: 99px; font-size: 13px; }
.tabs-sub .tab.on { background: var(--acc-soft); border-color: var(--acc-line); }
.tabs-sub .tab.on::after { display: none; }
/* Οριζόντιες λωρίδες και πίνακες που κυλούν: «σβήσιμο» στην άκρη όσο κάτι κρύβεται (κλάσεις από το panel.js) */
.hscroll:not(.chips) { overflow-x: auto; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.ovf:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.hscroll.ovf:not(.at-start):not(.at-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.hscroll.ovf.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
.table-wrap.scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.table-wrap.scrollable:not(.at-start):not(.at-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); }
/* Κάρτες overlay: ποιο μπαίνει στο OBS */
.ov-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
/* Διαχείριση Studio */
.member.stuck { border-color: rgba(251,191,36,.45); box-shadow: inset 3px 0 0 var(--warn); }
.key-row { flex-wrap: nowrap; }
.admin-mods > .mod-cards { margin-top: 0; }
/* Οδηγός OBS: το OBS βλέπει το overlay */
.card.obs-ok { border-color: rgba(52,211,153,.4); }
.card.obs-ok .card-title svg.i { color: var(--ok); }
/* Editor: «Όχι στο OBS ακόμα», υπενθύμιση, εικονίδια στοιχείων (όχι emoji) */
.ed-obs:empty { display: none; }
.ed-obs .pill .long { display: none; }
.ed-obs .pill .short { display: inline; }
.ed-nudge { margin: 10px 12px 0; align-items: center; }
.ed-nudge .icon-btn { margin: -6px -6px -6px auto; width: 30px; height: 30px; flex: none; }
.ed-wt { display: inline-flex; align-items: center; gap: 6px; }
.ed-wt svg.i { width: 14px; height: 14px; color: var(--muted); }
.layer .ic svg.i { width: 15px; height: 15px; color: var(--muted); vertical-align: -2px; }
.layer.on .ic svg.i { color: var(--acc); }
.gallery button svg.i { width: 16px; height: 16px; color: var(--muted); flex: none; }
.gallery button:hover svg.i { color: var(--acc); }
.hit .lbl svg.i { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; stroke-width: 2.4; }
.editor-mobile a { font-weight: 700; }
/* Παράθυρο (S.ui.dialog): native <dialog> */
dialog.dlg { padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--line2); border-radius: var(--r2); background: var(--s1); color: var(--text); box-shadow: var(--shadow); }
dialog.dlg::backdrop, dialog.pal::backdrop { background: rgba(5,7,10,.55); }
.dlg-box { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.dlg-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { flex: 1; min-width: 0; font-size: 16px; }
.dlg-body { padding: 20px; overflow-y: auto; min-height: 0; }
.dlg-body .field:last-child { margin-bottom: 0; }
.dlg-out:not(:empty) { margin-top: 16px; display: grid; gap: 12px; }
.dlg-out .alert { margin: 0; }
.dlg-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.dlg-foot:empty { display: none; }
.dlg-foot .btn[hidden] { display: none; }
/* Αναζήτηση (panel-palette.js) */
dialog.pal { padding: 0; width: min(640px, calc(100vw - 32px)); max-height: min(580px, 78vh); margin: 11vh auto auto; border: 1px solid var(--line2); border-radius: 14px; background: var(--s1); color: var(--text); box-shadow: var(--shadow); overflow: hidden; }
.pal-box { display: flex; flex-direction: column; max-height: min(578px, calc(78vh - 2px)); }
.pal-head { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); }
.pal-sic { width: 18px !important; height: 18px !important; color: var(--muted); }
.pal-input { flex: 1; min-width: 0; height: 54px; border: 0; outline: none; background: transparent; color: var(--text); font-size: 16px; }
.pal-input::placeholder { color: var(--dim); }
.pal-esc { flex: none; padding: 2px 7px; border: 1px solid var(--line2); border-radius: 6px; background: var(--s2); color: var(--muted); font: 11px var(--mono); cursor: pointer; }
.pal-list { flex: 1; min-height: 0; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.pal-sec { padding: 10px 10px 4px; font: 600 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pal-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 7px 10px; border-radius: var(--r); cursor: pointer; }
.pal-opt.on { background: var(--acc-soft); box-shadow: inset 0 0 0 1px var(--acc-line); }
.pal-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--s2); color: var(--muted); }
.pal-opt.on .pal-ic { color: var(--acc); }
.pal-txt { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.pal-l { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-h { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-opt.locked .pal-l { color: var(--muted); }
.pal-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 6px; border-radius: 6px; background: var(--s3); color: var(--muted); font-size: 11px; font-weight: 600; }
.pal-tag svg.i { width: 12px; height: 12px; }
.pal-go { color: var(--dim); opacity: 0; }
.pal-opt.on .pal-go { opacity: 1; }
.pal-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.pal-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
.pal-foot kbd { margin-right: 2px; padding: 0 5px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); font: 11px var(--mono); }
/* Κάτω μπάρα (κινητό) */
.bnav { display: none; }
@media (max-width: 1280px) {
  .top-search { min-width: 0; }
  .top-search .lbl { display: none; }
}
@media (max-width: 960px) {
  .top-search { display: none !important; }
  .crumbs { display: none; }
  body:not(.in-editor) .menu-btn { display: none; }
  .top-back:not([hidden]) { display: inline-grid; margin-left: -8px; }
  .top-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--head); font-size: 16px; font-weight: 600; }
  body.has-top-title .top-brand { display: none; }
  .bnav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--top-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .bnav-it { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 11px/1.2 Inter, system-ui, sans-serif; text-decoration: none !important; cursor: pointer; }
  .bnav-it svg.i { width: 22px; height: 22px; }
  .bnav-it.on { color: var(--acc); }
  .bnav-it:active { background: var(--s2); }
  body.in-editor .bnav, body.bare .bnav { display: none; }
  body:not(.in-editor):not(.bare) .main { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  body:not(.in-editor):not(.bare) .page { padding-bottom: 32px; }
  body:not(.in-editor):not(.bare) .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.rail .nav-head { height: auto; margin: 0; padding: 2px 10px 6px; font-size: 11px; background: none; }
  body.rail .nav-badge { position: static; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11.5px; }
  body.rail .nav-lock { display: block; }
  .side-nav { padding-bottom: 12px; }
  .nav-group { margin-top: 10px; }
  .nav-pin .nav-list { margin-top: 10px; padding-top: 6px; }
  .side-links { display: none; } /* «Απόρρητο» μένει στο μενού χρήστη· η «Σύμπτυξη» δεν έχει νόημα στο συρτάρι */
  .side-foot { padding: 10px 12px; }
}
@media (max-width: 760px) {
  .tabs.many { flex-wrap: wrap; gap: 6px; overflow: visible; border-bottom: 0; margin-bottom: 20px; -webkit-mask-image: none !important; mask-image: none !important; }
  .tabs.many .tab { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 99px; font-size: 13px; }
  .tabs.many .tab.on { background: var(--acc-soft); border-color: var(--acc-line); }
  .tabs.many .tab.on::after { display: none; }
  .ov-title { flex-wrap: wrap; }
  .ov-title .ov-name { flex: 1 1 180px; }
  .ov-title .pill .long { display: none; }
  .ov-title .pill .short { display: inline; }
  .key-row { flex-wrap: wrap; }
  dialog.dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog.pal { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); margin: 8px auto auto; }
  .pal-box { max-height: calc(100dvh - 18px); }
  .pal-foot { display: none; }
}
/* Πεδία 16px στο κινητό/αφή: το iOS δεν κάνει zoom όταν πατάς σε πεδίο (χωρίς maximum-scale, το pinch zoom μένει) */
@media (max-width: 760px), (pointer: coarse) {
  .input, select.input, textarea.input, .ai-box textarea, .qs-tag-input, .pal-input { font-size: 16px; }
}
/* Αφή: στόχοι τουλάχιστον 38–44px */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 38px; padding: 0 12px; }
  .btn.icon { width: 44px; }
  .btn.sm.icon { width: 38px; }
  .icon-btn { width: 44px; height: 44px; }
  .chip, .scene-chips button, .seg button, .dh-seg button, .ai-chips button { min-height: 38px; }
  .input, select.input { height: 44px; }
  .nav-item { min-height: 40px; }
  .menu-pop a, .menu-pop button { min-height: 44px; }
  .tab { padding-top: 12px; padding-bottom: 14px; }
  .tabs.many .tab, .tabs-sub .tab { height: 40px; padding-top: 0; padding-bottom: 0; }
  .dh-thank { width: 36px; height: 36px; }
  .toggle { position: relative; }
  .toggle::after { content: ''; position: absolute; inset: -11px -4px; }
  .layer .eye, .layer .lk { width: 32px; height: 32px; }
  .scene-btn { height: 40px; }
  .pal-foot, .top-search kbd { display: none; }
  /* Editor με αφή: μεγάλες λαβές και μπάρα του επιλεγμένου, «⋯» και λαβή σειράς πάντα ορατά, χωρίς τις συντομεύσεις του πληκτρολογίου. */
  .hit .h { width: 24px; height: 24px; margin: -12px; }
  .ed-qbar .qb { width: 32px; height: 32px; }
  .scene-more { opacity: .8; width: 32px; height: 32px; }
  .layer { padding-left: 26px; }
  .layer .grip { opacity: .7; width: 24px; }
  .ed-keys, .ctx-menu .kbd { display: none; }
  .zoom-bar .zb { height: 32px; min-width: 32px; }
}

/* UI-01: placeholder με αρκετή αντίθεση και σε πεδία χωρίς .input (AI βοηθός, tags των Γρήγορων ρυθμίσεων). */
.ai-box textarea::placeholder, .qs-tag-input::placeholder { color: var(--dim); opacity: 1; }
/* UI-11: στο κινητό το όνομα του overlay παίρνει όλη τη γραμμή και το pill πάει από κάτω (δεν κόβεται το όνομα). */
@media (max-width: 760px) { .ov-title .ov-name { flex-basis: 100%; } }
/* UI-09: μικρά μεμονωμένα links (μπάρα ειδοποιήσεων, κανάλι στις Γρήγορες ρυθμίσεις) με στόχο αφής τουλάχιστον 32px. */
@media (pointer: coarse) { .alert-bar .ab-link, .qs-foot .qs-chan { display: inline-flex; align-items: center; min-height: 32px; } }

/* Πεδίο εικόνας στον editor: link + «Ανέβασε / διάλεξε». */
.img-field { flex-wrap: nowrap; }
.img-field .input { flex: 1 1 auto; min-width: 0; }
.img-field .btn { flex: none; }

/* «+ Προσθήκη» στοιχείου: αναζήτηση, κατηγορίες, λίστα και προεπισκόπηση. */
.gal2 { position: absolute; z-index: 60; max-height: min(74vh, 640px); background: var(--s2); border: 1px solid var(--line2); border-radius: 12px; padding: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.gal2 .gal-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; min-height: 0; flex: 1; }
.gal2 .gal-list { overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-content: start; max-height: min(56vh, 480px); }
.gal2 .gal-h { grid-column: 1 / -1; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 8px 6px 2px; }
.gal2 .gal-none { grid-column: 1 / -1; padding: 12px 6px; }
.gal-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; background: none; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.gal-item:hover, .gal-item:focus-visible { background: var(--s3); outline: none; }
.gal-item:focus-visible { box-shadow: 0 0 0 2px var(--acc); }
.gal-item .ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--s3); }
.gal-item:hover .ic, .gal-item:focus-visible .ic { background: var(--s1); }
.gal-item svg.i { width: 16px; height: 16px; color: var(--muted); }
.gal-item:hover svg.i, .gal-item:focus-visible svg.i { color: var(--acc); }
.gal-t { display: grid; gap: 2px; min-width: 0; }
.gal-t b { font-weight: 600; font-size: 13px; }
.gal-t small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.gal2 .gal-info { border-left: 1px solid var(--line); padding-left: 10px; display: grid; gap: 6px; align-content: start; font-size: 13px; }
.gal2 .gal-info p { margin: 0; color: var(--muted); }
.gal-screen { position: relative; aspect-ratio: 16 / 9; background: var(--s3); border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; }
.gal-screen i { position: absolute; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 30%, transparent); border: 1px solid var(--acc); border-radius: 3px; min-width: 6px; min-height: 6px; }
.gal-screen i svg.i { width: 14px; height: 14px; color: var(--acc); }
.scene-rename { height: 34px; }
@media (max-width: 760px) { .gal2 .gal-body { grid-template-columns: 1fr; } .gal2 .gal-info { display: none; } .gal2 .gal-list { grid-template-columns: 1fr; } }

/* «Εμφάνιση» στοιχείου στον editor. */
.ed-look > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.ed-look[open] > summary { margin-bottom: 10px; }
.ed-look .stack { display: grid; gap: 10px; }

/* Πρόταση γλώσσας για νέο μέλος (panel.js langSuggest): λεπτή μπάρα πάνω από τη σελίδα. */
.lang-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 12px 24px 0; padding: 10px 12px 10px 14px; border: 1px solid var(--acc-line); background: var(--acc-soft); border-radius: var(--r); font-size: 13.5px; color: var(--text); }
.lang-bar-t { min-width: 0; line-height: 1.45; }
.lang-bar-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lang-bar-x { width: 30px; height: 30px; }
@media (max-width: 960px) { .lang-bar { margin: 10px 12px 0; } }