/* ── Design tokens ─────────────────────────────────────────────────────────
   Light admin theme for the CL Signage UI - the "Edit Image Page" design language
   (2026-09-26): green-grey neutrals, navy ink, 14px cards, 9px controls. */
:root {
    --bg: #F4F6F5;
    --card: #ffffff;
    --fg: #142433;
    --fg-muted: #5A6B77;
    --fg-faint: #7A8A94;
    --border: #E3E8E4;
    --border-strong: #D5DDD8;
    --border-soft: #EDF0EE;
    --primary: #449A5C;
    --primary-hover: #37814C;
    --primary-fg: #ffffff;
    --primary-soft: #E9F3EB;
    --primary-ink: #2F6B43;
    --good: #2F6B43;
    --good-bg: #E9F3EB;
    --warn: #8A6D00;
    --warn-bg: #FDF6DC;
    --bad: #E74C3C;
    --bad-bg: #FDECEA;
    --pending: #5A6B77;
    --pending-bg: #F0F3F1;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(20,36,51,.04);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
/* The hidden attribute must win over component display rules (modals, toggled
   fields). Without this, `.modal-overlay{display:grid}` keeps modals on screen. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
body { background: var(--bg); color: var(--fg); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
* { -webkit-tap-highlight-color: rgba(68,154,92,.18); }
a { color: inherit; text-decoration: none; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em; background: var(--pending-bg); padding: 1px 5px; border-radius: 4px; }

/* ── App shell ──────────────────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px; flex-shrink: 0; background: var(--card);
    border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 16px 16px; border-bottom: 1px solid var(--border); }
.brand-logo { width: 160px; height: auto; max-width: 100%; display: block; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: #fff; display: grid; place-items: center; }
.brand-name { font-weight: 650; }
.topbar-logo { height: 24px; width: auto; display: block; }
.nav { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--fg-muted); font-weight: 500; transition: background .12s, color .12s; }
.nav-item:hover { background: var(--bg); color: var(--fg); }
.nav-item.active { background: var(--primary); color: var(--primary-fg); box-shadow: 0 6px 16px rgba(68,154,92,.22); font-weight: 600; }
.sidebar-foot { border-top: 1px solid var(--border); padding: 12px; }
.who-ws { font-size: 12px; font-weight: 600; color: var(--primary); background: #e9f3eb; border: 1px solid #d0e7d7; border-radius: 6px; padding: 5px 9px; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { margin-bottom: 8px; }
.who-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { color: var(--fg-faint); font-size: 12px; text-transform: capitalize; }

.content { flex: 1; min-width: 0; padding: 22px 32px 64px; }

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-title { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.page-sub { color: var(--fg-faint); font-size: 14px; margin: 6px 0 0; }

/* ── Cards & grids ──────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; }
.card-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
/* Section heading: small caps label over a hairline, as in the design. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.card-head h2 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.stat-label { color: var(--fg-faint); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.stat-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 6px; }
.stat-foot { color: var(--fg-faint); font-size: 12.5px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot-good { background: var(--good); } .dot-bad { background: var(--bad); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.table td { padding: 13px 12px; border-bottom: 1px solid var(--border-soft); }
.table tbody tr:hover td { background: #FAFBFA; }
.table tr:last-child td { border-bottom: none; }
.muted { color: var(--fg-muted); }
.link { color: var(--primary); font-weight: 600; }
.link:hover { color: var(--primary-hover); }
.link:hover { text-decoration: underline; }
.empty { color: var(--fg-muted); padding: 20px; text-align: center; }

/* ── Status pills ───────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.pill-online, .pill-executed, .pill-active { color: var(--good); background: var(--good-bg); }
.pill-offline, .pill-failed { color: var(--bad); background: var(--bad-bg); }
.pill-warning, .pill-sent { color: var(--warn); background: var(--warn-bg); }
.pill-pending, .pill-draft, .pill-inactive { color: var(--pending); background: var(--pending-bg); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--card); color: var(--fg); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; }
.btn:hover { background: var(--bg); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); box-shadow: 0 6px 16px rgba(68,154,92,.25); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { background: #cf3e2f; border-color: #cf3e2f; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--fg-muted); }
.btn-ghost:hover { background: var(--bg); color: var(--fg); }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-primary.btn-sm { box-shadow: none; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--fg); }
/* 10px padding + 20px line + 2px border = the design's 42px field; a component that sets
   its own height/padding (steppers, compact toolbars) simply overrides it. */
input, select, textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--fg); font: inherit; line-height: 20px; transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder, textarea::placeholder { color: #9AA7B0; }
input:disabled, select:disabled, textarea:disabled { background: #F7F9F8; color: var(--fg-faint); }
/* Color pickers render as a small swatch, not a full-width stretched bar. */
input[type="color"] { width: 46px; height: 34px; padding: 3px; cursor: pointer; flex: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primary); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(68,154,92,.15); }

.alert { padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 6px; }
.alert-error { color: #B03A2E; background: var(--bad-bg); border: 1px solid #F5C6C0; }

/* ── Auth pages ─────────────────────────────────────────────────────────── */
.auth-body { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(20,36,51,.08); padding: 32px 30px; }
.auth-alt { text-align: center; color: var(--fg-muted); font-size: 13px; margin: 16px 0 0; }
.auth-head { text-align: center; margin-bottom: 20px; }
.auth-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 4px; }
.auth-head p { color: var(--fg-muted); margin: 0; font-size: 14px; }
.auth-mark { width: 46px; height: 46px; border-radius: 12px; background: var(--primary); color: #fff; display: grid; place-items: center; margin: 0 auto; }
.auth-logo { height: 46px; width: auto; max-width: 220px; display: block; margin: 0 auto 14px; }

/* ── Toolbar / layout helpers ───────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; }
.row-wrap { flex-wrap: wrap; }
.muted-sm { color: var(--fg-faint); font-size: 12.5px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.section-gap { margin-top: 22px; }
.inline-form { display: inline; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }
.help { color: var(--fg-faint); font-size: 12.5px; line-height: 1.5; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 7px; background: var(--pending-bg); color: var(--fg-muted); font-size: 12px; font-weight: 600; margin: 2px 2px 0 0; }
.creator-line { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--fg-muted); }
.creator-line svg { opacity: .7; flex: none; }

/* ── Flash + toast ──────────────────────────────────────────────────────── */
.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flash { padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; border: 1px solid transparent; animation: flash-in .25s ease; }
.flash.flash-out { animation: flash-out .45s ease forwards; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes flash-out { to { opacity: 0; transform: translateY(-8px); height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; } }
.flash-success { color: var(--primary-ink); background: var(--primary-soft); border-color: #CFE5D5; }
.flash-error { color: #B03A2E; background: var(--bad-bg); border-color: #F5C6C0; }

.toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1300; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; color: #fff; background: #0E2233; box-shadow: 0 12px 32px rgba(14,34,51,.3); font-size: 14px; font-weight: 600; max-width: calc(100vw - 32px); opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: auto; }
.toast::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9AA7B0; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success::before { background: #2ECC71; } .toast-error::before { background: #E74C3C; } .toast-info::before { background: #9AA7B0; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(14,34,51,.45); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 1100; padding: 20px; }
.modal-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(20,36,51,.22); width: 100%; max-width: 560px; overflow: hidden; }
.modal-card.modal-sm { max-width: 420px; }
.modal-head { padding: 18px 24px; border-bottom: 1px solid var(--border-soft); font-size: 16px; font-weight: 700; }
.modal-body { padding: 22px 24px; max-height: 70vh; overflow-y: auto; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 10px; }

/* ── Misc list items ────────────────────────────────────────────────────── */
.list-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s ease, box-shadow .15s ease; }
.list-card:hover { border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(20,36,51,.07); }
.list-card h3 { margin: 0; font-size: 15px; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 8px; margin-top: auto; padding-top: 10px; }
.card-actions .btn { height: 32px; }
/* Delete sits on the left; every other action is pushed to the right. */
.card-actions .card-del { order: -1; margin-right: auto; }
.thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); background: #0E2233; }
/* Playlist card preview banner — full-bleed top, first image item. */
.list-card-thumb { display: block; margin: -16px -18px 6px; height: 132px;
    border-radius: var(--radius) var(--radius) 0 0; background-color: #0E2233;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    border-bottom: 1px solid var(--border); }
.list-card-thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--fg-faint); }
details.adv > summary { cursor: pointer; color: var(--fg-muted); font-size: 13px; margin: 6px 0; }

.pl-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Playlist editor ────────────────────────────────────────────────────── */
.pl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.pl-stats { display: flex; align-items: center; gap: 22px; }
.pl-stat { display: flex; flex-direction: column; }
.pl-stat-val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.pl-stat-lbl { font-size: 11.5px; font-weight: 700; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.pl-stat-sep { width: 1px; height: 34px; background: var(--border); }
.pl-toolbar-opts { display: flex; align-items: flex-end; gap: 20px; }
.pl-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; padding-bottom: 8px; position: relative; }
.pl-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pl-switch-track { width: 38px; height: 22px; border-radius: 11px; background: var(--border-strong); position: relative; transition: background .15s; flex: none; }
.pl-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.pl-switch input:checked + .pl-switch-track { background: var(--primary); }
.pl-switch input:checked + .pl-switch-track::after { transform: translateX(16px); }

.pl-list { display: flex; flex-direction: column; gap: 10px; }
.pl-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; transition: box-shadow .12s, border-color .12s; }
.pl-card:hover { box-shadow: 0 4px 14px rgba(20,36,51,.10); border-color: var(--border-strong); }
.pl-card.dragging { opacity: .55; border-color: var(--primary); box-shadow: 0 8px 22px rgba(20,36,51,.18); }
.pl-grip { color: var(--fg-faint); cursor: grab; display: flex; flex: none; }
.pl-grip:active { cursor: grabbing; }
.pl-card:hover .pl-grip { color: var(--fg-muted); }
.pl-idx { width: 22px; text-align: center; font-size: 13px; font-weight: 650; color: var(--fg-faint); font-variant-numeric: tabular-nums; flex: none; }
.pl-card-thumb { width: 112px; height: 63px; border-radius: 8px; overflow: hidden; background: #0E2233; color: #fff; display: grid; place-items: center; flex: none; font-size: 24px; }
.pl-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-card-body { flex: 1; min-width: 0; }
.pl-card-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.pl-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 20px; }
.pl-type-image { color: #2F5E8A; background: #E6EEF6; }
.pl-type-video { color: #8A3B62; background: #F6E8EF; }
.pl-card-dur { display: flex; flex-direction: column; gap: 4px; width: 116px; flex: none; }
.pl-card-dur input { padding: 7px 9px; text-align: center; font-variant-numeric: tabular-nums; }
.pl-card-del { width: 30px; height: 30px; border: none; border-radius: 7px; background: transparent; color: var(--fg-faint); font-size: 18px; line-height: 1; cursor: pointer; flex: none; transition: background .12s, color .12s; }
.pl-card-del:hover { background: var(--bad-bg); color: var(--bad); }
.pl-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 50px 20px; color: var(--fg-muted); text-align: center; background: var(--card); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); }
.pl-empty svg { color: var(--fg-faint); }

/* ── New widget picker ──────────────────────────────────────────────────── */
.modal-card.wp-card { max-width: 980px; height: min(760px, calc(100vh - 40px)); display: flex; flex-direction: column; }
.wp-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px 16px 24px; border-bottom: 1px solid var(--border-soft); }
.wp-head > div { flex: 1; min-width: 0; }
.wp-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.wp-sub { color: var(--fg-faint); font-size: 13px; margin-top: 2px; }
.wp-head input[type=search] { width: 260px; max-width: 40vw; }
.wp-x { width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; font-size: 22px; line-height: 1; color: var(--fg-faint); cursor: pointer; flex: none; }
.wp-x:hover { background: var(--bg); color: var(--fg); }
.wp-body { flex: 1; min-height: 0; display: flex; }
.wp-cats { width: 190px; flex: none; padding: 14px 10px; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.wp-cats button { text-align: left; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.wp-cats button:hover { background: var(--bg); color: var(--fg); }
.wp-cats button.on { background: var(--primary-soft); color: var(--primary-ink); }
.wp-scroll { flex: 1; min-width: 0; overflow: auto; padding: 8px 22px 22px; }
.wp-group h3 { margin: 16px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.wp-tile { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; min-height: 84px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); text-align: left; font: inherit; color: var(--fg); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.wp-tile:hover { border-color: var(--border-strong); box-shadow: 0 8px 20px rgba(20,36,51,.08); transform: translateY(-1px); }
.wp-tile.sel { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(68,154,92,.18); }
.wp-tile.locked { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }
.wp-tile[hidden], .wp-group[hidden] { display: none; }
.wp-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.wp-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 40px; }
.wp-txt b { font-size: 14.5px; font-weight: 700; }
.wp-txt span { font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; }
.wp-badge { position: absolute; top: 10px; right: 10px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--pending-bg); color: var(--fg-muted); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; }
.wp-badge.lock { background: #FDF6DC; color: #8A6D00; }
.wp-none { color: var(--fg-muted); padding: 30px 0; text-align: center; }
.wp-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px 14px 24px; border-top: 1px solid var(--border-soft); background: #FAFBFA; }
.wp-chosen { flex: none; font-weight: 700; font-size: 14px; color: var(--fg-muted); min-width: 150px; }
.wp-foot input[type=text] { flex: 1; min-width: 0; }
@media (max-width: 860px) {
    .modal-card.wp-card { height: calc(100vh - 24px); }
    .wp-head { flex-wrap: wrap; padding: 14px 16px; }
    .wp-head input[type=search] { order: 3; width: 100%; max-width: none; }
    .wp-body { flex-direction: column; }
    .wp-cats { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-soft); padding: 8px 12px; }
    .wp-cats button { flex: none; }
    .wp-scroll { padding: 4px 14px 16px; }
    .wp-foot { flex-wrap: wrap; padding: 12px 16px; }
    .wp-chosen { min-width: 0; width: 100%; }
}

/* ── Widget settings: help, keys, calendar events ─────────────────────────── */
.wc-help { padding: 10px 12px; border-radius: 10px; background: #EEF4FB; color: #2F4A63; font-size: 13px; line-height: 1.5; }
.wc-help b { font-weight: 700; }
.wc-secret { display: flex; gap: 6px; }
.wc-secret input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.wc-events { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wc-ev { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.wc-ev input, .wc-ev select { padding: 6px 10px; line-height: 20px; font-size: 13px; }
.wc-ev-top, .wc-ev-row { display: flex; align-items: center; gap: 6px; }
.wc-ev-row > span { color: var(--fg-faint); font-size: 12.5px; flex: none; }
.wc-ev input[type=color] { width: 38px; height: 34px; padding: 2px; flex: none; }
.wc-ev-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; flex: none; }
.wc-ev-chk input { width: auto; }
.wc-ev-x { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-faint); font-size: 18px; cursor: pointer; flex: none; }
.wc-ev-x:hover { background: var(--bad-bg); color: var(--bad); }

/* Widget settings: repeatable rows (menu items, sessions, clocks, markers …) + PDF pages */
.wc-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wc-row { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.wc-row-cells { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wc-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wc-cell > span { font-size: 11px; font-weight: 700; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .06em; }
.wc-cell input, .wc-cell select { padding: 6px 9px; line-height: 20px; font-size: 13px; min-width: 0; }
.wc-cell input[type=color] { height: 34px; padding: 2px; }
.wc-cell.chk { align-items: flex-start; }
.wc-cell.chk input { width: 18px; height: 18px; margin: 7px 0 0; }
.wc-row-acts { display: flex; flex-direction: column; gap: 3px; flex: none; }
.wc-row-acts button { width: 28px; height: 26px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--card); color: var(--fg-muted); cursor: pointer; font-size: 13px; padding: 0; }
.wc-row-acts button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.wc-row-acts button:disabled { opacity: .35; cursor: default; }
.wc-row-acts button[data-rm]:hover { border-color: var(--bad); color: var(--bad); }
.wc-inline { display: flex; gap: 6px; align-items: center; }
.wc-inline input { flex: 1; min-width: 0; }
.wc-pages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.wc-pages img { height: 64px; border-radius: 6px; border: 1px solid var(--border); background: #fff; }

/* E-Poster settings: one card per poster */
.wc-posters { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wc-poster { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.wc-poster-th { width: 72px; aspect-ratio: 3 / 4; flex: none; border-radius: 6px; border: 1px solid var(--border); background: #fff center / contain no-repeat; position: relative; }
.wc-poster-th span { position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 5px; background: rgba(14,34,51,.8); color: #fff; font-size: 10.5px; font-weight: 700; }
.wc-poster-f { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wc-poster-f input, .wc-poster-f textarea { padding: 6px 9px; line-height: 20px; font-size: 13px; }

/* ── Page tabs (e.g. Layouts: My layouts | Discover templates) ───────────── */
.page-tabs { display: inline-flex; padding: 4px; border-radius: 10px; background: #E8ECEA; gap: 2px; margin: -8px 0 20px; }
.page-tab { height: 32px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.page-tab:hover { color: var(--fg); }
.page-tab.on { background: #fff; color: var(--fg); box-shadow: 0 1px 3px rgba(20,36,51,.12); }

/* ── Layout template gallery ────────────────────────────────────────────── */
.lt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.lt-toolbar input[type=search] { width: 260px; max-width: 100%; }
.lt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lt-chips button, .lt-orient button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--card); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.lt-chips button:hover { border-color: var(--primary); color: var(--primary); }
.lt-chips button.on { background: #0E2233; border-color: #0E2233; color: #fff; }
.lt-orient { display: inline-flex; padding: 3px; border-radius: 9px; background: #E8ECEA; gap: 2px; margin-left: auto; }
.lt-orient button { border: 0; border-radius: 7px; background: transparent; height: 28px; }
.lt-orient button.on { background: #fff; color: var(--fg); box-shadow: 0 1px 3px rgba(20,36,51,.14); }
.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.lt-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, box-shadow .15s ease; }
.lt-card:hover { border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(20,36,51,.07); }
.lt-stage { display: flex; align-items: center; justify-content: center; height: 170px; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.lt-mini { position: relative; flex: none; border-radius: 4px; background: #0E2233; overflow: hidden; }
.lt-mini i { position: absolute; box-sizing: border-box; border: 1px solid rgba(255,255,255,.3); }
.lt-mini.lt-big.land { width: 208px; height: 117px; border-radius: 6px; box-shadow: 0 10px 24px rgba(20,36,51,.18); }
.lt-mini.lt-big.port { width: 78px; height: 139px; border-radius: 6px; box-shadow: 0 10px 24px rgba(20,36,51,.18); }
.lt-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lt-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lt-title h3 { margin: 0; font-size: 15px; }
.lt-body p { margin: 0; color: var(--fg-muted); font-size: 13px; line-height: 1.45; }
.lt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.lt-use-preview { display: flex; justify-content: center; padding: 16px; margin-bottom: 14px; background: var(--bg); border-radius: 10px; }
@media (max-width: 860px) { .lt-orient { margin-left: 0; } .lt-toolbar input[type=search] { width: 100%; } }

/* ── Media library ──────────────────────────────────────────────────────── */
.folder-bar { margin-bottom: 18px; }
.folder-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--border-strong); color: var(--fg-muted); font-size: 13px; font-weight: 500; }
.folder-chip:hover { background: var(--bg); color: var(--fg); }
.folder-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.folder-chip-wrap { display: inline-flex; align-items: center; gap: 2px; }
.folder-x { border: none; background: none; color: var(--fg-faint); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.folder-x:hover { color: var(--bad); }

.up-item { margin-top: 10px; }
.up-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.up-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-bar { height: 6px; background: var(--pending-bg); border-radius: 4px; overflow: hidden; }
.up-fill { height: 100%; background: var(--primary); width: 0; transition: width .2s; }
.dl-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); color: var(--primary); }

/* ── Layout editor ──────────────────────────────────────────────────────── */
.layout-editor { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .layout-editor { grid-template-columns: 1fr; } }
.canvas-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; min-width: 0; height: calc(100vh - 150px); display: flex; overflow: auto; }
.layout-editor { min-width: 0; }
/* margin:auto centres the canvas when it fits, and aligns to the start (fully
   scrollable) when zoomed beyond the viewport. */
.canvas { margin: auto; flex: 0 0 auto; position: relative; background: #0E2233 repeating-linear-gradient(45deg, #13283A 0 10px, #0E2233 10px 20px); border-radius: 4px; overflow: hidden; user-select: none; touch-action: none; }
.cv-zoom { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 2px 4px; }
.cv-zoom #ly-zoom-label { font-size: 12.5px; color: var(--fg-muted); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.zone-box { position: absolute; border: 2px solid var(--primary); background: rgba(68,154,92,.18); box-sizing: border-box; cursor: move; display: flex; align-items: flex-start; }
.zone-box.selected { border-color: var(--accent, #f59e0b); box-shadow: 0 0 0 2px rgba(245,158,11,.4); z-index: 999 !important; }
.zone-label { font-size: 11px; color: #fff; background: rgba(0,0,0,.45); padding: 2px 6px; border-radius: 0 0 4px 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.zone-handle { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; background: var(--primary); border: 2px solid #fff; border-radius: 4px; cursor: se-resize; }
.zone-panel { margin-top: 18px; }
.ly-side { display: flex; flex-direction: column; }
.accordion { gap: 10px; }
.acc-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.acc-header { width: 100%; text-align: left; background: none; border: none; padding: 14px 18px; font-weight: 700; font-size: 15px; color: var(--fg); cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.acc-header::after { content: '▾'; color: var(--fg-faint); transition: transform .2s; }
.acc-item.open .acc-header::after { transform: rotate(180deg); }
.acc-body { padding: 0 18px 18px; display: none; }
.acc-item.open .acc-body { display: block; }
.zone-content { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: transparent; }
img.zone-content { object-fit: cover; }
.snap-guide { position: absolute; pointer-events: none; z-index: 1000; }
.snap-guide-v { top: 0; bottom: 0; width: 1px; background: var(--warn); box-shadow: 0 0 0 0.5px var(--warn); }
.snap-guide-h { left: 0; right: 0; height: 1px; background: var(--warn); box-shadow: 0 0 0 0.5px var(--warn); }

/* ── Group / floor plan ─────────────────────────────────────────────────── */
.member-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.floorplan { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); touch-action: none; user-select: none; display: none; }
.fp-img { display: block; width: 100%; height: auto; pointer-events: none; }
.fp-marker { position: absolute; transform: translate(-50%, -50%); background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; cursor: move; box-shadow: 0 2px 6px rgba(0,0,0,.3); border: 2px solid #fff; }

/* ── Permissions matrix ─────────────────────────────────────────────────── */
.perm-table { width: 100%; border-collapse: collapse; }
.perm-table th, .perm-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.perm-table td.center, .perm-table th.center { text-align: center; }
.perm-section { font-weight: 650; margin: 18px 0 8px; }
.perm-search { position: relative; max-width: 360px; margin: 0 0 12px; }
.perm-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-faint); pointer-events: none; }
.perm-search input { width: 100%; padding-left: 34px; }

/* Email template editor */
.et-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.et-var { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-subtle, #FAFBFA); color: var(--fg-muted); cursor: pointer; }
.et-var:hover { border-color: var(--primary); color: var(--primary); }
.et-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.et-body { width: 100%; min-height: 340px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; resize: vertical; white-space: pre; }
.et-preview { width: 100%; min-height: 340px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
@media (max-width: 860px) { .et-grid { grid-template-columns: 1fr; } }

/* ── Widget previews ────────────────────────────────────────────────────── */
/* Transparency chequerboard (as in an image editor) behind every widget preview - light
   grey / dark grey squares: what is see-through on the widget shows them. Preview frames
   use color-scheme:dark like the players, or Chrome paints an opaque backdrop under a
   transparent widget. */
:root { --checker: #c4c8cc repeating-conic-gradient(#8a9097 0% 25%, #c4c8cc 0% 50%) 0 0 / 16px 16px; }
.widget-card-preview { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--checker); margin-bottom: 8px; }
.widget-card-preview iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: transparent; color-scheme: dark; }
.modal-card.modal-wide { max-width: 860px; }
.wc-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
@media (max-width: 760px) { .wc-grid { grid-template-columns: 1fr; } }
.wc-preview { position: sticky; top: 0; }
.wc-preview iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--checker); color-scheme: dark; display: block; }
.wc-preview .wc-full { width: 100%; justify-content: center; margin-top: 8px; gap: 6px; }
.wc-preview .wc-full svg { width: 14px; height: 14px; }

/* ── Widget editor page (widgets/edit.php) + New widget page (widgets/new.php) ── */
.we-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.we-back:hover { color: var(--fg); }
.we-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.we-top .we-back { margin: 0; }
.we-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.we-actions form { margin: 0; }
.we-del { color: #B03A2E; }
.we-del:hover { border-color: #E6B0AA; background: #FDECEA; color: #B03A2E; }
.we-titlerow { display: flex; align-items: center; gap: 14px; margin: 18px 0 22px; min-width: 0; }
.we-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.we-titles { min-width: 0; }
.we-titles .page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.we-titles .page-sub { margin-top: 3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.we-dirty { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #FFF6E5; color: #7A5A12; font-size: 12px; font-weight: 600; }
.we-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 22px; align-items: start; }
.we-form { padding: 24px; min-width: 0; }
.we-side { position: sticky; top: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.we-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.we-side-head h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.we-sizes .seg-btn { padding: 5px 10px; font-size: 12.5px; }
.we-stage { display: flex; justify-content: center; align-items: center; min-height: 200px; padding: 14px; border-radius: var(--radius-sm); overflow: hidden;
    background: #0E2233 radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0) 0 0 / 18px 18px; }
.we-box { position: relative; overflow: hidden; border-radius: 4px; background: var(--checker); box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); }
.we-box iframe { position: absolute; left: 0; top: 0; border: 0; display: block; transform-origin: 0 0; background: transparent; color-scheme: dark; }
.we-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.we-foot .btn { gap: 6px; }
.we-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-faint); }
.wp-page .wp-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 520px; }
.wp-page .wp-head { padding: 14px 18px; }
.wp-page .wp-head input[type=search] { width: 100%; max-width: 440px; }
@media (max-width: 1000px) { .we-grid { grid-template-columns: 1fr; } .we-side { position: static; order: -1; } }

/* Widget preview window: the widget at a real screen size (1920×1080 …), scaled to fit */
.modal-card.wv-card { max-width: 1200px; height: min(820px, calc(100vh - 40px)); display: flex; flex-direction: column; }
.wv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.wv-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; font-weight: 700; }
.wv-name #wv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-name .tag { margin: 0; flex: none; }
.wv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wv-tools .seg-btn { padding: 6px 11px; font-size: 13px; }
.wv-x { width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--fg-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.wv-x:hover { background: var(--bg); color: var(--fg); }
.wv-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 20px; overflow: hidden;
    background: #0E2233 radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0) 0 0 / 18px 18px; }
.wv-box { position: relative; overflow: hidden; border-radius: 4px; background: var(--checker); box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
.wv-box iframe { position: absolute; left: 0; top: 0; border: 0; display: block; transform-origin: 0 0; background: transparent; color-scheme: dark; }
.wv-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--fg-faint); }
@media (max-width: 760px) { .wv-stage { padding: 10px; } .wv-foot #wv-note { display: none; } }
.wc-control { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.wc-control .wc-row { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin: 2px 0; }
.wc-control .wc-row b { color: var(--fg-muted); min-width: 56px; flex: none; font-weight: 600; }
.wc-control .wc-row a, .wc-control .wc-row code { word-break: break-all; }
.wc-control code { font-size: 12px; }
.wc-control .wc-appbox { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.wc-control .wc-row .wc-copy { margin-left: auto; align-self: center; padding: 3px 10px; font-size: 12px; flex: none; }
.wc-screens .wc-screen { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.wc-screens .wc-screen:first-child { border-top: 0; }
.wc-screens .wc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fg-muted); }
.wc-screens .wc-dot-online { background: var(--good); }
.wc-screens .wc-dot-offline { background: var(--bad); }
.wc-screens .wc-dot-warning { background: var(--warn); }
.wc-screens .wc-screen-main { min-width: 0; flex: 1; }
.wc-screens .wc-screen-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-screens .wc-screen-sub { font-size: 11.5px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-screens .wc-ip { font-size: 12px; flex: none; }
.wc-screens .wc-screen .wc-copy { flex: none; padding: 3px 10px; font-size: 12px; }
.wc-upload-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.wc-img-thumb { width: 64px; height: 40px; flex: none; border-radius: 7px; border: 1px solid var(--border);
    background: #fff center / contain no-repeat; background-color: #F4F6F5; }
.wc-img-rm:hover { color: #C0392B; border-color: #E6B0AA; }
/* Upload / PDF conversion progress */
.wc-progress { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.wc-webcheck { margin-top: 8px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5; background: var(--bg); color: var(--fg-muted); border: 1px solid var(--border); }
.wc-webcheck.ok { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.wc-webcheck.warn { background: #FFF6E5; color: #7A5A12; border-color: #F1DFB8; }
.wc-progress-track { height: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.wc-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width .2s ease; }
.wc-progress-text { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* ── Schedule: per-zone content assignment ──────────────────────────────── */
.zone-assign { display: flex; flex-direction: column; gap: 8px; }
.zone-assign-row { display: grid; grid-template-columns: 1fr auto 1.5fr; gap: 8px; align-items: center; }
.za-name { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-assign-row select { padding: 6px 8px; min-height: 36px; }

/* ── Layout editor: zone list ───────────────────────────────────────────── */
.zone-list-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 8px; font-size: 12px; font-weight: 600; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .04em; }
.zone-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.zone-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--fg); cursor: pointer; font: inherit; transition: background .12s, border-color .12s; }
.zone-row:hover { background: var(--bg); }
.zone-row.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.zone-row-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--border-strong); flex: none; background-clip: padding-box; }
.zone-row-name { flex: 1; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-row-dim { color: var(--fg-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.zone-props { border-top: 1px solid var(--border); padding-top: 12px; }
.zone-props-hint { color: var(--fg-faint); font-size: 12.5px; padding: 6px 0; }

/* ── Schedules: view toggle (icon tabs) ─────────────────────────────────── */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: var(--card); color: var(--fg-muted); padding: 7px 13px; font: inherit; font-weight: 550; cursor: pointer; }
.seg-btn svg { width: 15px; height: 15px; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { background: var(--primary); color: var(--primary-fg); }

/* ── Schedules: calendar + timeline ─────────────────────────────────────── */
.cal-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .cal-wrap { grid-template-columns: 1fr; } }

.cal-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 8px; }
.cal-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.cal-side-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-faint); margin: 0 0 10px; }
.cal-player-list { display: flex; flex-direction: column; gap: 5px; }
.cal-player-item { text-align: left; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--fg); font: inherit; font-weight: 550; cursor: pointer; transition: background .12s, border-color .12s; }
.cal-player-item:hover { background: var(--bg); }
.cal-player-item.active { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.cal-pal-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-faint); margin: 10px 0 6px; }
.cal-pal-group:first-child { margin-top: 0; }
.cal-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: grab; font-size: 13px; font-weight: 550; }
.cal-chip:active { cursor: grabbing; }
.cal-chip-ic { display: inline-flex; flex: none; }
.cal-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-main { min-width: 0; padding: 0; overflow: hidden; }
.cal-weekbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.cal-weektitle { flex: 1; text-align: center; font-weight: 650; font-size: 15px; }
.cal-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--fg); font-size: 17px; line-height: 1; cursor: pointer; }
.cal-navbtn:hover { background: var(--bg); }
.cal-zoom { display: flex; align-items: center; gap: 4px; }
.cal-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); cursor: pointer; }
.cal-iconbtn:hover { background: var(--bg); color: var(--fg); }
.cal-zoom #cal-zoom-label { font-size: 12.5px; color: var(--fg-muted); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }

.cal-grid-wrap { overflow: auto; max-height: 72vh;   /* schedule-calendar.js fits it to the window */ }
.cal-grid { min-width: 620px; }
.cal-head { display: grid; grid-template-columns: 56px repeat(7, 1fr); position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--border-strong); }
.cal-corner { border-right: 1px solid var(--border); }
.cal-dayhead { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; padding: 8px 4px; border-left: 1px solid var(--border); }
.cal-dh-day { font-size: 12px; font-weight: 500; color: var(--fg-muted); }
.cal-dh-date { font-size: 18px; font-weight: 650; color: var(--fg); line-height: 1.1; }
.cal-dayhead.today { background: #e9f3eb; }
.cal-dayhead.today .cal-dh-day, .cal-dayhead.today .cal-dh-date { color: var(--primary); }
.cal-col.today { background-color: #f5f7ff; }
.cal-body { display: grid; grid-template-columns: 56px repeat(7, 1fr); }
.cal-gutter { position: relative; border-right: 1px solid var(--border); }
.cal-hour { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.cal-col { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent calc(var(--pph) * 1px)); }

.cal-block { position: absolute; left: 3px; right: 3px; border: 1px solid; border-radius: 6px; overflow: hidden; cursor: grab; user-select: none; touch-action: none; }
.cal-block.dragging { cursor: grabbing; z-index: 50; box-shadow: 0 6px 16px rgba(20,36,51,.18); opacity: .97; }
.cal-block.is-off { opacity: .5; }
.cal-block-top, .cal-block-bot { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; }
.cal-block-top { top: 0; } .cal-block-bot { bottom: 0; }
.cal-block-main { padding: 5px 8px; pointer-events: none; }
.cal-block-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-block-time { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.cal-block-acts { position: absolute; top: 3px; right: 3px; display: none; gap: 2px; }
.cal-block:hover .cal-block-acts { display: flex; }
.cb-act { width: 19px; height: 19px; border: none; border-radius: 4px; background: rgba(20,36,51,.08); color: inherit; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.cb-act:hover { background: rgba(20,36,51,.18); }
.cal-drop-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--primary); pointer-events: none; z-index: 40; }
.cal-drop-line span { position: absolute; left: 2px; top: 1px; font-size: 10px; background: var(--primary); color: #fff; padding: 0 4px; border-radius: 3px; }

/* timeline */
.cal-timeline-wrap { overflow: auto; max-height: 72vh;   /* schedule-calendar.js fits it to the window */ }
.cal-timeline { min-width: 620px; }
.tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.tl-row.tl-axis { position: sticky; top: 0; z-index: 4; background: var(--card); border-bottom: 1px solid var(--border-strong); }
.tl-daylabel { width: 88px; flex: none; padding: 9px 12px; font-size: 13px; color: var(--fg-muted); border-right: 1px solid var(--border);
    position: sticky; left: 0; z-index: 3; background: var(--card); }   /* stays put while a zoomed day scrolls */
.tl-daylabel b { color: var(--fg); }
.tl-daylabel.today { background: #e9f3eb; color: var(--primary); }
.tl-daylabel.today b { color: var(--primary); }
.tl-track { position: relative; flex: 1; min-height: 44px; background-image: repeating-linear-gradient(to right, var(--border) 0, var(--border) 1px, transparent 1px, transparent calc(100% / var(--tl-div, 12))); }
.tl-axis .tl-track { min-height: 26px; }
.tl-hour { position: absolute; top: 7px; transform: translateX(-50%); font-size: 11px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.tl-hour.half { opacity: .6; }
.tl-hour.first { transform: translateX(4px); } .tl-hour.last { transform: translateX(calc(-100% - 4px)); }
.tl-block { position: absolute; top: 6px; bottom: 6px; border: 1px solid; border-radius: 5px; padding: 0 7px; overflow: hidden; display: flex; align-items: center; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.tl-block-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Player group: full-page editor ─────────────────────────────────────── */
.group-edit { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .group-edit { grid-template-columns: 1fr; } }
.group-edit-side { display: flex; flex-direction: column; gap: 12px; }
.group-edit-plan { display: flex; flex-direction: column; gap: 10px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; }
.floorplan-lg { display: block; min-height: 60vh; }
.floorplan-lg.fp-has-img { min-height: 0; }
.fp-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--fg-faint); font-size: 13px; }
.fp-marker.dragging { box-shadow: 0 4px 12px rgba(0,0,0,.45); transform: translate(-50%, -50%) scale(1.06); z-index: 5; }

/* ── Media library: breadcrumb, folders, drag-drop, preview ──────────────── */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; font-size: 14px; }
.crumb { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius-sm); color: var(--fg-muted); font-weight: 550; border: 1px solid transparent; }
.crumb:hover { background: var(--bg); color: var(--fg); }
.crumb.current { color: var(--fg); }
.crumb.drop-hover { background: #e9f3eb; border-color: var(--primary); color: var(--primary); }
.crumb-sep { color: var(--fg-faint); }

.media-card, .folder-card { position: relative; }
.media-card { cursor: pointer; }
.folder-card { cursor: pointer; }
.folder-card.drop-hover, .media-card.drop-hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(68,154,92,.25); }
.folder-card[draggable="true"], .media-card[draggable="true"] { }
.folder-card.drop-hover { background: #e9f3eb; }
.folder-thumb { position: relative; width: 100%; aspect-ratio: 16/9; display: grid; place-items: center; border-radius: var(--radius-sm); background: #F0F3F1; color: #9AA7B0; overflow: hidden; }
.folder-card:hover .folder-thumb { background: #E7ECE9; color: #5A6B77; }
/* Folder content preview: 1 = single, 2 = split, 3+ = 2×2 quad. Absolutely
   filled so the grid divides the 16/9 box (no min-height:auto blowout). */
.folder-mosaic { position: absolute; inset: 0; display: grid; gap: 2px; background: var(--border); }
.folder-mosaic.n1 { grid-template-columns: 1fr; }
.folder-mosaic.n2 { grid-template-columns: 1fr 1fr; }
.folder-mosaic.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.folder-mosaic img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; background: #0E2233; }
.folder-mosaic .m-empty { background: #E3E8E4; }

.iconbtn-del { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: none; border-radius: 5px; background: rgba(20,36,51,.55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: none; padding: 0; }
.media-card:hover .iconbtn-del, .folder-card:hover .iconbtn-del { display: block; }
.iconbtn-del:hover { background: var(--bad); }
.media-del, .folder-del { position: absolute; top: 0; right: 0; }
/* Selecting several media items */
.mc-check { position: absolute; top: 9px; left: 9px; z-index: 2; width: 26px; height: 26px; padding: 0; border-radius: 8px;
    border: 2px solid #fff; background: rgba(14,34,51,.35); color: #fff; display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); opacity: 0; transition: opacity .15s ease, background .15s ease; }
.mc-check svg { opacity: 0; transition: opacity .12s ease; }
.media-card:hover .mc-check, #media-grid.selecting .mc-check, .mc-check:focus-visible { opacity: 1; }
.media-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.media-card.selected .mc-check { background: var(--primary); border-color: var(--primary); }
.media-card.selected .mc-check svg { opacity: 1; }
.media-card.dragging-sel { opacity: .5; }
@media (hover: none) { .mc-check { opacity: .9; } }
.ml-selbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 8px;
    max-width: calc(100vw - 32px); flex-wrap: wrap; padding: 8px 10px 8px 8px; border-radius: 14px; background: #0E2233; color: #fff;
    box-shadow: 0 16px 40px rgba(14,34,51,.35); font-size: 14px; }
.ml-sb-x { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.75); font-size: 20px; line-height: 1; cursor: pointer; }
.ml-sb-x:hover { background: rgba(255,255,255,.1); color: #fff; }
.ml-sb-n { font-weight: 700; margin-right: 4px; white-space: nowrap; }
.ml-sb-sep { width: 1px; height: 22px; background: rgba(255,255,255,.18); margin: 0 4px; }
.ml-sb-hint { color: rgba(255,255,255,.6); font-size: 12.5px; white-space: nowrap; }
.ml-sb-btn { height: 34px; padding: 0 13px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ml-sb-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.ml-sb-btn.danger { color: #FFB4AA; border-color: rgba(255,140,125,.35); }
.ml-sb-btn.danger:hover { background: rgba(231,76,60,.18); }
.ml-menu { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 260px; max-width: min(380px, calc(100vw - 32px)); max-height: 52vh; overflow: auto;
    padding: 6px; border-radius: 12px; background: var(--card); color: var(--fg); border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(14,34,51,.22); }
.ml-menu-h { padding: 8px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.ml-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
    font: inherit; font-size: 14px; color: var(--fg); text-align: left; cursor: pointer; }
.ml-menu button:hover:not([disabled]), .ml-menu button:focus-visible { background: var(--bg); }
.ml-menu button[disabled] { color: var(--fg-faint); cursor: default; }
.ml-menu button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-menu button em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--fg-faint); }
.ml-menu svg { flex: none; color: var(--fg-muted); }
@media (max-width: 900px) { .ml-sb-hint { display: none; } }
/* Selecting several folder items (Layouts, Widgets, Player Groups, Playlists) - folders.js */
.list-card.fi-card { position: relative; }
.fi-check { opacity: 0; border-color: var(--border-strong); background: var(--card); color: #fff; }
.list-card.fi-card:hover .fi-check, body.fi-selecting .fi-check, .fi-check:focus-visible { opacity: 1; }
.list-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.list-card.selected .fi-check { background: var(--primary); border-color: var(--primary); }
.list-card.selected .fi-check svg { opacity: 1; }
body.fi-selecting .list-card.fi-card { cursor: pointer; user-select: none; }
@media (hover: none) { .fi-check { opacity: .9; } }
.ml-drag-ghost { position: fixed; top: -100px; left: -100px; padding: 8px 14px; border-radius: 10px; background: #0E2233; color: #fff; font: 700 14px Inter, 'Segoe UI', sans-serif; }

/* preview modal */
.mp-body { display: grid; grid-template-columns: 1fr 240px; gap: 18px; align-items: start; }
@media (max-width: 720px) { .mp-body { grid-template-columns: 1fr; } }
.mp-stage { display: flex; align-items: center; justify-content: center; background: #0E2233; border-radius: var(--radius-sm); min-height: 260px; overflow: hidden; }
.mp-stage img, .mp-stage video { max-width: 100%; max-height: 62vh; display: block; }
.mp-props { display: flex; flex-direction: column; gap: 0; }
.mp-prop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.mp-prop span { color: var(--fg-muted); }
.mp-prop b { font-weight: 600; text-align: right; word-break: break-word; }

/* ── Upload drop zone ───────────────────────────────────────────────────── */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 34px 20px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg); color: var(--fg-muted); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.dropzone > * { pointer-events: none; }
.dropzone:hover { border-color: var(--primary); color: var(--fg); }
.dropzone.dragover { border-color: var(--primary); background: #e9f3eb; color: var(--primary); transform: scale(1.01); }
.dz-icon { color: var(--fg-faint); transition: color .15s; }
.dropzone:hover .dz-icon, .dropzone.dragover .dz-icon { color: var(--primary); }
.dz-title { font-weight: 600; font-size: 15px; color: var(--fg); }
.dz-sub { font-size: 13px; }
.dz-browse { color: var(--primary); font-weight: 600; text-decoration: underline; }

/* ── Image cropper ──────────────────────────────────────────────────────── */
.cropper { position: relative; display: inline-block; max-width: 100%; line-height: 0; user-select: none; touch-action: none; }
.cropper img { display: block; max-width: 100%; max-height: 60vh; }
.crop-box { position: absolute; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); cursor: move; box-sizing: border-box; }
.crop-handle { position: absolute; width: 14px; height: 14px; background: #fff; border: 1px solid var(--primary); border-radius: 2px; }
.crop-handle.nw { left: -8px; top: -8px; cursor: nwse-resize; }
.crop-handle.ne { right: -8px; top: -8px; cursor: nesw-resize; }
.crop-handle.sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.crop-handle.se { right: -8px; bottom: -8px; cursor: nwse-resize; }

/* ── Resource folder bar (groups/playlists/layouts/widgets/schedules) ──────── */
/* One compact row: breadcrumb · folder chips · New folder. The head is display:contents
   so its children line up with the chips in the same flex row. */
.folder-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 18px; padding: 8px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.folder-bar-head { display: contents; }
.folder-bar .crumbs { margin: 0; font-size: 13px; gap: 2px; }
.folder-bar .crumb { padding: 4px 8px; }
.folder-new { display: inline-flex; align-items: center; gap: 6px; order: 3; margin-left: auto; }
.folder-grid { display: flex; flex-wrap: wrap; gap: 6px; order: 2; min-width: 0; }
.folder-tile { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 5px; max-width: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.folder-tile:hover { border-color: var(--primary); }
.folder-tile-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #e9f3eb; color: var(--primary); flex-shrink: 0; }
.folder-tile-ic svg { width: 14px; height: 14px; }
.folder-tile-meta { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.folder-tile .fname { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-tile .fmeta { color: var(--fg-faint); font-size: 11.5px; white-space: nowrap; }
.folder-tile .iconbtn-del { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; font-size: 13px; border-radius: 50%; display: none; }
.folder-tile:hover .iconbtn-del { display: block; }
.folder-tile.drop-hover { border-color: var(--primary); background: #e9f3eb; box-shadow: 0 0 0 3px rgba(68,154,92,.14); }
.folder-tile.drag-dim, [data-folder-item].drag-dim { opacity: .45; }
.folder-hint { display: none; }
.folder-bar > .help { order: 2; margin: 0; font-size: 12.5px; }
[data-folder-item][draggable="true"] { cursor: grab; }
[data-folder-item][draggable="true"]:active { cursor: grabbing; }

/* ── Responsive / mobile ───────────────────────────────────────────────────
   Desktop default: the mobile top bar + nav backdrop are hidden. */
/* The bar at the top of every page. Desktop: who is signed in, at the top right. Mobile (below):
   it also carries the menu button and the logo, and sticks to the top. */
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 36px; margin: -8px 0 12px; }
.nav-toggle, .topbar-logo { display: none; }
.topbar-user { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }
.topbar-user .who-ws { margin: 0; max-width: 240px; }
.topbar-user .who { margin: 0; text-align: right; line-height: 1.25; min-width: 0; }
.topbar-user .who-name { max-width: 240px; }
.topbar-user form { margin: 0; flex-shrink: 0; }
.topbar-out { display: inline-flex; align-items: center; gap: 6px; }
/* The bottom of the menu: the site and the platform version. */
.sidebar-ver { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; font-size: 12px; color: var(--fg-faint); }
.sidebar-ver a { color: inherit; }
.sidebar-ver a:hover { color: var(--primary-ink); }
.sidebar-ver .ver { font-variant-numeric: tabular-nums; }
.nav-backdrop { display: none; }
.table-wrap { width: 100%; }

@media (max-width: 860px) {
    /* Sidebar becomes an off-canvas drawer toggled by the top-bar hamburger. */
    .sidebar {
        position: fixed; top: 0; left: 0; width: 248px; height: 100vh; z-index: 1200;
        transform: translateX(-100%); transition: transform .22s ease;
        box-shadow: 0 12px 40px rgba(20,36,51,.28);
    }
    .app.nav-open .sidebar { transform: translateX(0); }
    .nav-backdrop { position: fixed; inset: 0; background: rgba(20,36,51,.45); z-index: 1150; }
    .app.nav-open .nav-backdrop { display: block; }

    .content { padding: 14px; min-width: 0; }
    .topbar {
        display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 1000;
        margin: -14px -14px 14px; padding: 9px 14px;
        background: var(--card); border-bottom: 1px solid var(--border);
    }
    .topbar .brand-name { font-weight: 650; }
    .topbar { justify-content: flex-start; min-height: 0; }
    .topbar-logo { display: block; }
    .topbar-user { gap: 8px; }
    .topbar-user .who-ws, .topbar-user .who-role { display: none; }
    .topbar-user .who-name { max-width: 32vw; font-size: 12.5px; }
    .topbar-out { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .topbar-out span { display: none; }                 /* the icon alone */
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex-shrink: 0; padding: 0;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--card); color: var(--fg); cursor: pointer;
    }

    .page-header { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 16px; }
    .page-header .row { flex-wrap: wrap; }
    .page-title { font-size: 20px; }

    .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .grid-cards { grid-template-columns: 1fr; }
    .folder-grid { grid-template-columns: 1fr 1fr; }
    .grid-2 { grid-template-columns: 1fr; }

    /* Wide tables scroll horizontally inside their auto-inserted wrapper. */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 520px; }
    .perm-table { min-width: 460px; }

    .card { padding: 18px; }

    .modal-overlay { padding: 12px; }
    .modal-card, .modal-card.modal-sm, .modal-card.modal-wide { max-width: 100%; }
    .modal-body { max-height: 72vh; }

    /* 16px inputs stop iOS Safari from zooming the page on focus. */
    input, select, textarea, .btn { font-size: 16px; }

    /* Comfortable tap targets (≥44px) for touch. */
    .btn { padding: 0 16px; height: auto; min-height: 44px; }
    .btn-sm { min-height: 38px; padding: 0 12px; font-size: 14px; }
    .nav-item { padding: 11px 12px; }
    .iconbtn { min-width: 40px; min-height: 40px; }

    /* Safe-area insets for the Dynamic Island / home indicator (viewport-fit=cover). */
    .content { padding-left: max(14px, env(safe-area-inset-left));
               padding-right: max(14px, env(safe-area-inset-right)); }
    .topbar { padding-top: calc(9px + env(safe-area-inset-top));
              margin-top: calc(-14px - env(safe-area-inset-top)); }
    .sidebar { padding-top: env(safe-area-inset-top); }
    .sidebar-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .auth-body { padding: 20px max(16px, env(safe-area-inset-left))
                 calc(20px + env(safe-area-inset-bottom)); }
}

/* iPhone 15 Pro (393pt) and other small phones. */
@media (max-width: 430px) {
    .stat-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 19px; }
    .content { padding-top: 12px; padding-bottom: 12px; }
    .card { padding: 16px; border-radius: 12px; }
    .folder-grid { grid-template-columns: 1fr; }
    /* Stacked field rows go full-width instead of fixed max-widths. */
    .form .row > .field, .row.form-row > .field { max-width: none !important; flex: 1 1 100%; }
    .page-header .btn { width: 100%; }
    .modal-foot { flex-wrap: wrap; }
    .modal-foot .btn { flex: 1 1 auto; }
}

/* ── BrightSign player panel (players/_brightsign*.php + bs-player.js) ─────── */
.tag-bs { background: #eef2ff; color: #4338ca; margin-left: 6px; }
.tag-ok { background: var(--good-bg); color: var(--good); }
.bs-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius);
    border: 1px solid var(--border); margin-bottom: 14px; font-weight: 550; }
.bs-banner .bs-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--fg-faint); }
.bs-banner-wait { background: var(--warn-bg); border-color: #fcd34d; color: #92400e; }
.bs-banner-wait .bs-dot { background: var(--warn); animation: bs-pulse 1.4s ease-in-out infinite; }
.bs-banner-ok { background: var(--good-bg); border-color: #86efac; color: #166534; }
.bs-banner-ok .bs-dot { background: var(--good); }
.bs-banner-off { background: var(--pending-bg); color: var(--fg-muted); }
@keyframes bs-pulse { 50% { opacity: .35; } }
.bs-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: bs; }
.bs-steps li { counter-increment: bs; position: relative; padding: 8px 0 8px 36px; border-top: 1px solid var(--border); }
.bs-steps li:first-child { border-top: 0; }
.bs-steps li::before { content: counter(bs); position: absolute; left: 0; top: 7px; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--pending-bg); color: var(--fg-muted); }
.bs-steps li.done::before { content: "\2713"; background: var(--good); color: #fff; }
.bs-steps li .btn { margin-left: 8px; }
.bs-now { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
.bs-big { font-size: 18px; font-weight: 650; margin-top: 2px; word-break: break-word; }
.bs-kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.bs-kv th { text-align: left; font-weight: 550; color: var(--fg-muted); padding: 5px 10px 5px 0; width: 42%; vertical-align: top; }
.bs-kv td { padding: 5px 0; border-top: 1px solid var(--border); }
.bs-kv tr:first-child td { border-top: 0; }
.bs-bar { display: inline-block; width: 110px; height: 7px; background: var(--pending-bg); border-radius: 4px; vertical-align: middle; overflow: hidden; }
.bs-bar i { display: block; height: 100%; background: var(--primary); }
.bs-err { color: var(--bad); font-weight: 600; }
.bs-preview ul { margin: 4px 0 8px 18px; padding: 0; }
.bs-preview li { margin: 2px 0; font-size: 13px; }
.bs-problems { background: var(--bad-bg); color: #991b1b; padding: 8px 10px; border-radius: var(--radius); margin-bottom: 8px; }
.bs-warnings { background: var(--warn-bg); color: #92400e; padding: 8px 10px; border-radius: var(--radius); margin: 6px 0 8px; }
.bs-log { max-height: 360px; overflow-y: auto; font-size: 12.5px; }
.bs-log-row { display: grid; grid-template-columns: 150px auto 1fr; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--border); }
.bs-log-row:first-child { border-top: 0; }
.bs-log-row.bad span:last-child { color: var(--bad); }
.bs-shot img { max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); display: block; }
.bs-cmd-table td { font-size: 12.5px; padding: 4px 6px; }
@media (max-width: 860px) { .bs-now { grid-template-columns: 1fr; } .bs-log-row { grid-template-columns: 1fr; } }

/* ── Integrations (cloud storage) ────────────────────────────────────────── */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.int-card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.int-head { display: flex; align-items: center; gap: 14px; }
.int-logo { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.int-name h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.int-text { margin: 0; color: var(--fg-muted); font-size: 13.5px; line-height: 1.5; flex: 1; }
.int-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.int-app { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #FAFBFA; }
.int-app-head { display: flex; align-items: center; gap: 8px; }
.int-app-head .link { margin-left: auto; font-size: 12.5px; }
.int-app input[readonly] { background: var(--bg); color: var(--fg-muted); font-size: 12.5px; }
.int-copy { display: flex; gap: 6px; }
.int-copy input { flex: 1; min-width: 0; }
.int-app .btn-primary { align-self: flex-start; }

/* ── Import from cloud (media library) ─────────────────────────────────────── */
.ci-card { max-width: 820px; height: min(680px, calc(100vh - 40px)); display: flex; flex-direction: column; }
.ci-tabs { display: flex; gap: 6px; padding: 12px 20px 0; flex-wrap: wrap; }
.ci-tabs button { height: 32px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card); font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.ci-tabs button.on { background: #0E2233; border-color: #0E2233; color: #fff; }
.ci-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 12px 20px 8px; font-size: 13px; }
.ci-crumbs button { border: 0; background: none; padding: 3px 6px; border-radius: 6px; font: inherit; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.ci-crumbs button:hover { background: var(--bg); color: var(--fg); }
.ci-crumbs span { color: var(--fg-faint); }
.ci-list { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 12px; }
.ci-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.ci-row:hover { background: var(--bg); }
.ci-row input { width: 18px; height: 18px; flex: none; }
.ci-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 16px; background: var(--pending-bg); color: var(--fg-muted); }
.ci-ic.folder { background: #E9F3EB; color: var(--primary); }
.ci-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-meta { color: var(--fg-faint); font-size: 12px; white-space: nowrap; }
.ci-row.done .ci-meta { color: var(--primary-ink); font-weight: 600; }
.ci-row.fail .ci-meta { color: var(--bad); font-weight: 600; }
.ci-empty { padding: 40px 10px; text-align: center; color: var(--fg-muted); }
.ci-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-soft); background: #FAFBFA; }
.ci-foot .ci-count { flex: 1; font-size: 13.5px; color: var(--fg-muted); }

/* ── Alerts (emergency / announcement takeover) ────────────────────────────── */
.al-live { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-radius: var(--radius); margin-bottom: 16px; box-shadow: 0 10px 28px rgba(20,36,51,.18); }
.al-live-k { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.al-live-t { font-size: 22px; font-weight: 900; margin-top: 4px; }
.al-live-s { font-size: 13px; opacity: .85; margin-top: 2px; }
.al-live .al-end { background: #fff; color: #142433; border-color: #fff; font-weight: 700; }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.al-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.al-card.on { box-shadow: 0 0 0 3px var(--bad); }
.al-prev { aspect-ratio: 16 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 18px; gap: 6px; }
.al-prev-t { font-size: 18px; font-weight: 900; letter-spacing: .02em; line-height: 1.15; }
.al-prev-m { font-size: 12.5px; font-weight: 600; opacity: .9; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.al-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.al-name { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.al-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.al-urls { padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.al-url { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.al-url b { width: 52px; flex: none; font-size: 12.5px; color: var(--fg-muted); }
.al-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }

/* ── AI Studio ─────────────────────────────────────────────────────────────── */
.ai-quota { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 650; }
.ai-notset { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; padding: 18px 22px; border-color: #F2DFA6; background: #FFFBEF; }
.ai-notset-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--warn-bg); color: var(--warn); }
.ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.05fr); gap: 22px; align-items: start; }
.ai-main { padding: 22px 24px; min-width: 0; }
.ai-tabs { margin-bottom: 20px; }
.ai-tabs .seg-btn { padding: 8px 14px; font-size: 13.5px; }
.ai-tabs .seg-btn:disabled { color: #B3BEC5; cursor: not-allowed; }
.ai-pane { display: flex; flex-direction: column; gap: 16px; }
.ai-pane textarea { resize: vertical; }
.ai-examples { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -6px; }
.ai-ex { border: 1px solid var(--border-strong); background: var(--card); color: var(--fg-muted); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ai-ex:hover { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); }
.ai-sec { padding-top: 16px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 12px; }
.ai-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-sec-head h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.ai-drop { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--fg-muted); cursor: pointer; transition: border-color .15s, background .15s; }
.ai-drop:hover, .ai-drop.over, .ai-drop:focus-visible { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); outline: none; }
.ai-drop svg { flex: none; }
.ai-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ai-photos:empty { display: none; }
.ai-photo { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); }
.ai-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ai-photo.busy { aspect-ratio: 16 / 13; display: grid; place-items: center; }
.ai-photo.busy .ai-photo-meta { position: absolute; left: 0; right: 0; bottom: 0; }
.ai-photo-n { position: absolute; left: 7px; top: 7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(14,34,51,.78); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.ai-photo-x { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(14,34,51,.72); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.ai-photo-x:hover { background: var(--bad); }
.ai-photo-meta { padding: 7px 9px 8px; display: flex; flex-direction: column; min-width: 0; }
.ai-photo-meta b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-photo-meta small { font-size: 11.5px; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.ai-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ai-lay { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 8px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--fg-muted); font: inherit; cursor: pointer; text-align: center; }
.ai-lay b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.ai-lay:hover { border-color: var(--border-strong); background: #FAFBFA; }
.ai-lay.on { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(68,154,92,.25); color: var(--fg); }
.ai-lay-mini { display: block; }
.ai-lay-mini.landscape { width: 88px; height: 50px; }
.ai-lay-mini.portrait { width: 34px; height: 60px; }
.ai-lay-mini .lt-mini { width: 100%; height: 100%; }
.ai-lay-magic { border-radius: 4px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #449A5C, #2B6F8F); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip { border: 1px solid var(--border-strong); background: var(--card); color: var(--fg-muted); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ai-chip:hover { border-color: var(--primary); }
.ai-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ai-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-muted); cursor: pointer; }
.ai-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.ai-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ai-row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ai-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ai-brand-colors { display: inline-flex; gap: 6px; }
.ai-days { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-day { width: 48px; height: 34px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--fg-faint); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.ai-day.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.ai-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.ai-go-btn { height: 46px; padding: 0 22px; font-size: 15px; }
.ai-summary { padding: 14px 16px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-ink); }
.ai-summary b { font-size: 16px; color: var(--fg); }
.ai-summary p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.ai-summary small { display: block; margin-top: 6px; font-size: 12px; opacity: .8; }
.ai-look { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.ai-palette { display: flex; gap: 10px; flex-wrap: wrap; }
.ai-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--fg-faint); cursor: pointer; }
.ai-font { min-width: 160px; flex: 1; max-width: 220px; }
.ai-slides { display: flex; flex-direction: column; gap: 10px; }
.ai-sl { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ai-sl:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(68,154,92,.15); }
.ai-sl-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #FAFBFA; border-bottom: 1px solid var(--border-soft); }
.ai-sl-thumb { flex: none; display: grid; place-items: center; width: 132px; height: 74px; background: #0E2233; border-radius: 6px; overflow: hidden; }
.ai-sl-thumb canvas { display: block; max-width: 100%; max-height: 100%; }
.ai-sl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-sl-t small { color: var(--fg-faint); font-size: 12px; }
.ai-sl-btns { display: flex; gap: 2px; }
.ai-sl-btns .btn { width: 32px; padding: 0; }
.ai-del:hover { color: var(--bad); background: var(--bad-bg); }
.ai-sl-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ai-sl-body .field > span { font-size: 12px; }
.ai-sl-cols { display: flex; gap: 6px; }
.ai-wlist { display: flex; flex-direction: column; gap: 8px; }
.ai-w { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.ai-w-type { flex: none; padding: 3px 10px; border-radius: 7px; background: var(--pending-bg); color: var(--fg-muted); font-size: 12px; font-weight: 700; }
.ai-w-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-w-main input { padding: 6px 10px; }
.ai-w-main small { color: var(--fg-faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-revise { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-next { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.ai-picklabel { font-size: 12.5px; font-weight: 650; color: var(--fg-muted); }
.ai-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 240px; overflow: auto; padding: 2px; }
.ai-pickitem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; font-size: 13.5px; min-width: 0; }
.ai-pickitem span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ai-pickitem small { color: var(--fg-faint); font-size: 11.5px; text-transform: capitalize; }
.ai-pickitem small.on { color: var(--good); }
.ai-pickitem:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
#ai-sched { display: flex; flex-direction: column; gap: 10px; }
#ai-sched.off { opacity: .45; pointer-events: none; }
.ai-when { display: flex; flex-direction: column; gap: 2px; font-size: 13px; padding-bottom: 4px; }
.ai-when span { font-size: 12px; font-weight: 650; color: var(--fg-muted); }
.ai-when .link { border: none; background: none; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; align-self: flex-start; }
.ai-progress { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg-muted); }
.ai-progress-bar { height: 8px; border-radius: 999px; background: var(--pending-bg); overflow: hidden; }
.ai-progress-bar i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 999px; transition: width .25s ease; }
.ai-done { padding: 14px 16px; border-radius: 10px; background: var(--good-bg); color: var(--primary-ink); }
.ai-done b { color: var(--fg); font-size: 15px; }
.ai-done p { margin: 4px 0 10px; font-size: 13.5px; }
.ai-done-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-side { position: sticky; top: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ai-pv-tools { display: flex; gap: 6px; }
.ai-stage { display: flex; justify-content: center; align-items: center; min-height: 320px; padding: 14px; border-radius: var(--radius-sm); overflow: hidden;
    background: #0E2233 radial-gradient(circle at 30% 20%, #16324A, #0B1B29 70%); }
.ai-empty, .ai-busy { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #A9B8C6; font-size: 13.5px; max-width: 300px; padding: 30px 10px; }
.ai-empty b, .ai-busy b { color: #fff; font-size: 15px; }
.ai-empty-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(127,209,155,.14); color: #7FD19B; }
.ai-empty-ic svg { width: 24px; height: 24px; }
.ai-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(127,209,155,.25); border-top-color: #7FD19B; animation: ai-spin 0.9s linear infinite; }
.ai-spin.sm { width: 22px; height: 22px; border-width: 2px; border-color: rgba(68,154,92,.2); border-top-color: var(--primary); }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-screen { position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); background: #000; }
.ai-screen:fullscreen { box-shadow: none; margin: auto; }
.ai-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.ai-zone { position: absolute; overflow: hidden; }
.ai-zone iframe { position: absolute; left: 0; top: 0; border: 0; background: transparent; color-scheme: dark; }
.ai-slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
.ai-slide.on { opacity: 1; }
.ai-pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.ai-pal-mini { display: inline-flex; gap: 3px; }
.ai-pal-mini i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ai-lay-head { grid-column: 1 / -1; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.ai-lay-head span { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ai-lay small { font-size: 11px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.ai-lay-own .ai-lay-mini { width: auto; height: 50px; max-width: 88px; }
.ai-lay-own .ai-lay-mini.portrait { height: 60px; }
.ai-lay-mini .lt-mini { position: relative; display: block; }
.ai-bgctl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.ai-bgctl .ai-check { grid-column: auto; }
.ai-op { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; font-size: 13px; font-weight: 600; }
.ai-op output { font-weight: 700; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.ai-op input[type=range] { grid-column: 1 / -1; height: 6px; padding: 0; border: 0; border-radius: 999px; box-shadow: none; -webkit-appearance: none; appearance: none; cursor: pointer;
    background: linear-gradient(to right, var(--primary) 0 var(--p, 50%), var(--border) var(--p, 50%) 100%); }
.ai-op input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 1px 4px rgba(20,36,51,.25); }
.ai-op input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); }
.ai-target { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-radio { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ai-radio:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.ai-radio input { margin-top: 3px; }
.ai-radio span { display: flex; flex-direction: column; gap: 2px; }
.ai-radio b { font-size: 13.5px; } .ai-radio i { font-style: normal; }
.ai-radio small { font-size: 12px; color: var(--fg-faint); }
@media (max-width: 640px) { .ai-target, .ai-bgctl { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .ai-grid { grid-template-columns: 1fr; } .ai-side { position: static; order: -1; } }
@media (max-width: 640px) {
    .ai-main { padding: 16px; }
    .ai-row3, .ai-row4, .ai-row2 { grid-template-columns: 1fr 1fr; }
    .ai-tabs { display: flex; width: 100%; } .ai-tabs .seg-btn { flex: 1; padding: 8px 6px; font-size: 12.5px; justify-content: center; }
    .ai-sl-thumb { width: 96px; height: 54px; }
}

/* ── Pair a screen (Players) ─────────────────────────────────────────────── */
.pair-code { font: 800 28px/1 Consolas, "SFMono-Regular", Menlo, monospace; letter-spacing: .18em; text-align: center; text-transform: uppercase; padding: 14px; }
.pair-found { padding: 10px 13px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.pair-found.ok { background: var(--good-bg); color: var(--primary-ink); }
.pair-found.bad { background: var(--bad-bg); color: #B03A2E; }
.pair-found b { color: var(--fg); }
.pair-found span { display: block; font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
.pair-mode { width: 100%; flex: none; } .pair-mode .seg-btn { flex: 1; justify-content: center; white-space: nowrap; }
#pair-form [data-when] { display: flex; flex-direction: column; gap: 14px; }

/* ── AI credits (2026-09-30): AI Studio chips + new images ─────────────────── */
.ai-head-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ai-credits { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-cred { display: inline-flex; align-items: baseline; gap: 5px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--fg-muted); font-size: 13px; line-height: 30px; white-space: nowrap; }
.ai-cred b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.ai-cred.low { background: var(--warn-bg); border-color: #F1DE9A; color: var(--warn); }
.ai-cred.low b { color: var(--warn); }
.ai-cred-buy { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--primary); color: var(--primary-fg); font-size: 13px; font-weight: 650; text-decoration: none; }
.ai-cred-buy:hover { background: var(--primary-hover); }
.ai-gen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ai-gen select { width: auto; height: 34px; padding: 0 30px 0 10px; }
.ai-genone { display: flex; gap: 8px; margin-top: 10px; }
.ai-genone input { flex: 1; min-width: 0; }
.ai-genone .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.ai-photo-ai { position: absolute; left: 34px; top: 7px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; display: grid; place-items: center; }
.ai-photo-redo { position: absolute; right: 36px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(14,34,51,.72); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.ai-photo-redo:hover { background: var(--primary); }
@media (max-width: 640px) { .ai-genone { flex-direction: column; } .ai-head-r { justify-content: flex-start; } }

/* ── Plan & credits (/plan) ────────────────────────────────────────────────── */
.bl-note { font-size: 13px; line-height: 1.5; color: var(--fg); background: var(--primary-soft); border: 1px solid #CFE5D5; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; }
.bl-note.warn { background: var(--warn-bg); border-color: #F1DE9A; color: var(--warn); margin: 0 0 14px; }
.bl-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px; align-items: start; }
.bl-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 8px; }
.bl-planname { font-size: 24px; font-weight: 750; color: var(--fg); margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bl-planname span { font-size: 14px; font-weight: 600; color: var(--primary-ink); }
.bl-lim { margin-top: 12px; }
.bl-lim-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--fg-muted); margin-bottom: 6px; }
.bl-lim-t b { color: var(--fg); font-variant-numeric: tabular-nums; }
.bl-lim-t small { font-weight: 500; color: var(--fg-faint); }
.bl-bar { height: 8px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.bl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.bl-bar.hot i { background: #E0A100; }
.bl-bar.unl i { background: repeating-linear-gradient(90deg, var(--primary-soft) 0 8px, #D6EADB 8px 16px); }
.bl-big { font-size: 34px; font-weight: 750; color: var(--fg); line-height: 1.1; font-variant-numeric: tabular-nums; }
.bl-big small { font-size: 14px; font-weight: 600; color: var(--fg-muted); }
.bl-big.muted { color: var(--fg-faint); }
.bl-extra { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--fg-muted); }
.bl-extra b { color: var(--fg); font-size: 15px; font-variant-numeric: tabular-nums; }
.bl-extra small { color: var(--fg-faint); font-size: 12px; }
.bl-packhead { font-size: 13px; font-weight: 700; color: var(--fg); margin: 16px 0 8px; }
.bl-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.bl-pack { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.bl-pack b { font-size: 14px; color: var(--fg); }
.bl-pack-n { font-size: 24px; font-weight: 750; color: var(--fg); font-variant-numeric: tabular-nums; }
.bl-pack-n small { font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.bl-pack-p { font-size: 15px; font-weight: 650; color: var(--primary-ink); }
.bl-pack .btn { margin-top: 6px; align-self: flex-start; }
@media (max-width: 1100px) { .bl-grid { grid-template-columns: 1fr 1fr; } .bl-plan { grid-column: 1 / -1; } }
@media (max-width: 640px) { .bl-grid { grid-template-columns: 1fr; } }

/* ── Workspaces: AI credits + give ─────────────────────────────────────────── */
.ws-ai { font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; }
.ws-give summary { cursor: pointer; color: var(--primary-ink); font-weight: 600; margin-top: 4px; }
.ws-give form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 220px; white-space: normal; }

/* Media Library: bands and tall strips are shown whole in their card (2026-09-30) */
.media-card img.thumb.fit { object-fit: contain; }

/* The admin address (App\Host): a tag by the logo so it is never mistaken for the app. */
.brand { position: relative; }
.brand-admin { position: absolute; right: 12px; bottom: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--fg); border-radius: 999px; padding: 2px 8px; }

/* The sandbox copy (App\Env): an amber line across the top and a tag, on every page. */
.env-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1400; height: 0; border-top: 4px solid #E0A100; display: flex; justify-content: center; pointer-events: none; }
.env-bar b, .env-bar span { background: #E0A100; color: #2A1F00; font-size: 11px; line-height: 20px; height: 20px; }
.env-bar b { padding: 0 6px 0 12px; border-radius: 0 0 0 9px; font-weight: 800; letter-spacing: .1em; }
.env-bar span { padding: 0 12px 0 0; border-radius: 0 0 9px 0; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .env-bar span { display: none; } .env-bar b { padding: 0 10px; border-radius: 0 0 9px 9px; } }