:root {
    --bg:#eef4fb;
    --sidebar:#07111f;
    --panel:#ffffff;
    --text:#111827;
    --muted:#66758c;
    --line:#d7e1ee;
    --primary:#5b4cff;
    --primary-dark:#4134d6;
    --danger:#dc2626;
    --danger-bg:#fee2e2;
    --green:#079669;
}

* { box-sizing:border-box; }

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:220px;
    background:var(--sidebar);
    color:#fff;
    padding:18px;
    overflow-y:auto;
}

.brand {
    display:flex;
    gap:11px;
    align-items:center;
    color:#fff;
    text-decoration:none;
    margin-bottom:24px;
}

.brand-mark {
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(135deg,#6567ff,#22c55e);
    display:grid;
    place-items:center;
    font-weight:900;
}

.brand span {
    display:block;
    color:#9ba9bb;
    font-size:13px;
}

.sidebar nav {
    display:grid;
    gap:7px;
    padding-bottom:18px;
}

.sidebar nav a {
    color:#d8e0eb;
    text-decoration:none;
    font-weight:750;
    padding:7px 0;
}

.sidebar nav a:hover { color:#fff; }

.sidebar-footer {
    display:grid;
    gap:5px;
    color:#94a3b8;
    font-size:12px;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:14px;
    margin-top:10px;
}

.sidebar-footer a {
    color:#ffffff;
    text-decoration:none;
    font-weight:800;
}

.main {
    margin-left:220px;
    padding:30px;
}

.page-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:22px;
}

.eyebrow {
    margin:0 0 4px;
    color:var(--primary);
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:13px;
    font-weight:900;
}

h1,h2,h3,p { margin-top:0; }

h1 {
    font-size:30px;
    line-height:1.05;
    margin-bottom:8px;
}

h2 { font-size:21px; }

.subtle,.hint { color:var(--muted); }

.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.panel {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
    margin-bottom:22px;
    box-shadow:0 14px 50px rgba(15,23,42,.04);
}

.panel-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:12px;
}

.grid {
    display:grid;
    gap:18px;
}

.stats {
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    margin-bottom:20px;
}

.two { grid-template-columns:1fr 1fr; }
.three { grid-template-columns:repeat(3,1fr); }
.playlist-layout { grid-template-columns:minmax(0,1fr) 360px; align-items:start; }
.device-detail-grid { grid-template-columns:minmax(0,1fr) 380px; align-items:stretch; }

.stat-card {
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
    color:var(--text);
    text-decoration:none;
}

.stat-card span {
    display:block;
    font-size:28px;
    font-weight:950;
}

.stat-card strong { color:var(--muted); }

.form-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    align-items:end;
}

.form-grid.compact { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.stacked { display:grid; gap:12px; }
.span-2 { grid-column:span 2; }

label {
    display:grid;
    gap:7px;
    color:#374151;
    font-weight:850;
}

input,select,textarea {
    width:100%;
    border:1px solid #c6d3e3;
    border-radius:10px;
    padding:10px 12px;
    font:inherit;
    background:#fff;
}

textarea { min-height:84px; }

.button,button {
    border:1px solid var(--line);
    background:#fff;
    color:#172033;
    border-radius:10px;
    padding:10px 14px;
    font-weight:850;
    text-decoration:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.button.primary, button.primary {
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}

.button.primary:hover, button.primary:hover { background:var(--primary-dark); }
.button.ghost { background:#f8fbff; }
.button.small { padding:7px 11px; font-size:14px; }
.button.danger, button.danger { background:var(--danger-bg); color:var(--danger); border-color:#fecaca; }

table {
    width:100%;
    border-collapse:collapse;
}

th,td {
    text-align:left;
    border-bottom:1px solid var(--line);
    padding:12px;
    vertical-align:top;
}

th {
    color:#4b5b70;
    background:#f7faff;
}

.status,.pill {
    display:inline-flex;
    border-radius:999px;
    background:#eef2ff;
    color:#4038a8;
    font-weight:900;
    padding:4px 9px;
}

.status {
    color:#475569;
    background:#eef2f7;
}

.list-card {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:12px;
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--text);
    text-decoration:none;
}

.list-card span {
    color:var(--muted);
    display:block;
}

.steps {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
}

.steps a {
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    color:var(--text);
    text-decoration:none;
}

.steps b {
    display:inline-grid;
    place-items:center;
    width:25px;
    height:25px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    margin-right:8px;
}

.media-grid,.device-grid,.content-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}

.media-card,.device-card,.content-card {
    position:relative;
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
    display:grid;
    gap:8px;
    color:var(--text);
    text-decoration:none;
}

.media-card img,.media-card video {
    width:100%;
    height:140px;
    border-radius:11px;
    object-fit:cover;
    background:#111827;
}

.media-badge {
    position:absolute;
    top:22px;
    left:22px;
    background:#eef2ff;
    color:#4f46e5;
    border-radius:999px;
    padding:4px 9px;
    font-weight:900;
}

.media-meta {
    display:flex;
    justify-content:space-between;
    color:var(--muted);
}

.large-preview {
    width:100%;
    max-height:420px;
    object-fit:contain;
    background:#020617;
    border-radius:16px;
}

.playlist-items { display:grid; gap:12px; }

.playlist-item {
    display:grid;
    grid-template-columns:58px 90px minmax(0,1fr) 110px;
    gap:14px;
    align-items:start;
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
}

.playlist-item.disabled { opacity:.55; }

.item-order {
    text-align:center;
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px;
    background:#fff;
}

.item-order strong {
    display:block;
    font-size:24px;
}

.item-order span {
    display:block;
    color:var(--muted);
    font-weight:900;
}

.item-thumb img,.thumb {
    width:90px;
    height:56px;
    border-radius:9px;
    object-fit:cover;
    display:grid;
    place-items:center;
    color:#fff;
    background:#11976d;
    font-weight:900;
}

.thumb.trivia { background:var(--primary); }

.item-main span {
    display:block;
    color:var(--muted);
    margin-top:4px;
}

.item-badges {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-top:8px;
}

.item-actions {
    display:grid;
    gap:6px;
}

.schedule-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    gap:8px;
    margin-top:10px;
    align-items:end;
}

.checkbox {
    display:flex;
    align-items:center;
    gap:6px;
}

.days {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    grid-column:1 / -1;
}

.days label {
    display:flex;
    gap:4px;
    font-weight:700;
    color:#66758c;
}

.playlist-side {
    position:sticky;
    top:22px;
}

.metric-box,
.info-list div {
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    margin-bottom:8px;
}

.metric-box span,
.info-list span {
    display:block;
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-weight:900;
}

.metric-box strong,
.info-list strong {
    display:block;
    margin-top:4px;
}

.sim-controls {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.player-wrap {
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:20px;
    align-items:center;
    min-height:68vh;
}

.single-preview { grid-template-columns:1fr; }

.device-frame {
    margin:auto;
    background:#111827;
    border:16px solid #020617;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 30px 90px rgba(15,23,42,.2);
}

.device-frame.size-5in { width:520px; height:330px; }
.device-frame.size-7in { width:720px; height:450px; }
.device-frame.size-10in { width:960px; height:600px; }
.device-frame.size-tv { width:min(1100px,95vw); height:620px; }
.device-frame.portrait.size-5in { width:330px; height:520px; }
.device-frame.portrait.size-7in { width:450px; height:720px; }
.device-frame.portrait.size-10in { width:600px; height:960px; }

.screen {
    position:relative;
    width:100%;
    height:100%;
    background:#020617;
    color:#fff;
    display:grid;
    place-items:center;
    overflow:hidden;
}

.display-media {
    width:100%;
    height:100%;
    object-fit:cover;
}

.display-card,
.mini-display-card {
    width:100%;
    height:100%;
    display:grid;
    align-content:center;
    justify-items:center;
    gap:18px;
    text-align:center;
    padding:50px;
    color:#fff;
    background:radial-gradient(circle at 10% 20%,rgba(91,76,255,.35),transparent 24%), radial-gradient(circle at 90% 75%,rgba(34,197,94,.28),transparent 28%), #020617;
}

.mini-display-card {
    min-height:260px;
    border-radius:18px;
}

.display-card h2 {
    font-size:clamp(28px,5vw,64px);
    line-height:1;
    margin:0;
}

.display-card p {
    color:#d1d5db;
    font-size:clamp(16px,2.2vw,28px);
    max-width:760px;
}

.touch-button,.trivia-option {
    border:2px solid rgba(255,255,255,.24);
    background:rgba(255,255,255,.12);
    color:#fff;
    border-radius:999px;
    padding:14px 22px;
    font-weight:900;
}

.trivia-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(130px,1fr));
    gap:12px;
    width:min(720px,90%);
}

.trivia-option {
    border-radius:15px;
}

.trivia-option.correct { background:rgba(34,197,94,.48); }

.brand-strip {
    position:absolute;
    left:18px;
    right:18px;
    bottom:14px;
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.65);
    font-weight:700;
}

.sim-side {
    align-self:stretch;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    overflow:auto;
}

.sim-side pre {
    white-space:pre-wrap;
    max-height:360px;
    overflow:auto;
    background:#0b1220;
    color:#d8e0eb;
    padding:12px;
    border-radius:10px;
}

.live-preview-card {
    display:block;
    color:inherit;
    text-decoration:none;
}

.live-preview-card .device-frame {
    width:100%;
    height:210px;
    border-width:12px;
    border-radius:20px;
}

.login-body {
    min-height:100vh;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 20% 20%, rgba(91,76,255,.18), transparent 28%), radial-gradient(circle at 80% 70%, rgba(34,197,94,.13), transparent 30%), #eef4fb;
}

.login-shell {
    width:min(520px,94vw);
}

.login-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:32px;
    box-shadow:0 24px 80px rgba(15,23,42,.14);
}

.login-brand {
    color:var(--text);
    margin-bottom:24px;
}

.login-brand span { color:var(--muted); }

.local-login-help {
    margin-top:18px;
    display:grid;
    gap:8px;
    padding:14px;
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:14px;
}

.alert {
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:14px;
    font-weight:800;
}

.alert.error {
    background:#fee2e2;
    color:#b91c1c;
    border:1px solid #fecaca;
}

code {
    display:inline-block;
    background:#f8fbff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:4px 8px;
}

.kiosk-body { background:#000; }
.kiosk-main { padding:0; }

.player-wrap.kiosk {
    display:grid;
    place-items:center;
    width:100vw;
    height:100vh;
    min-height:100vh;
    background:#000;
    margin:0;
}

.player-wrap.kiosk .device-frame {
    width:100vw!important;
    height:100vh!important;
    border:none;
    border-radius:0;
    box-shadow:none;
}

@media (max-width:1200px) {
    .playlist-layout,.player-wrap,.two,.three,.device-detail-grid { grid-template-columns:1fr; }
    .playlist-side { position:static; }
}

@media (max-width:760px) {
    .sidebar { position:static; width:auto; }
    .main { margin-left:0; padding:18px; }
    .span-2 { grid-column:span 1; }
    .playlist-item { grid-template-columns:1fr; }
    .device-frame.size-5in,.device-frame.size-7in,.device-frame.size-10in,.device-frame.size-tv { width:94vw; height:58vw; }
}