:root { --ink:#eaf1ff; --muted:#a8b4cd; --night:#07101f; --panel:#101d33; --line:rgba(255,255,255,.11); --accent:#ffb000; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--night); color:var(--ink); } button,input,textarea { font:inherit; } button { cursor:pointer; }
/* TV display: the content remains a 9:16 artboard and scales with either dimension. */
.display-page { min-height:100vh; display:grid; place-items:center; overflow:hidden; background:#030713; }
.kiosk-shell { --accent:#ffb000; width:min(100vw,56.25vh); height:min(177.778vw,100vh); max-height:100vh; aspect-ratio:9/16; position:relative; overflow:hidden; isolation:isolate; padding:5.2% 7%; display:flex; flex-direction:column; background:radial-gradient(circle at 78% 16%,#203a68 0,#0d1930 31%,#070e20 79%); }
.display-page.rotate-right .kiosk-shell,.display-page.rotate-left .kiosk-shell { width:100vh; height:100vw; max-height:none; }
.display-page.rotate-right .kiosk-shell { transform:rotate(90deg); }
.display-page.rotate-left .kiosk-shell { transform:rotate(-90deg); }
.ambient { position:absolute; border-radius:50%; filter:blur(3px); opacity:.55; z-index:-1; animation:float 10s ease-in-out infinite; }.ambient-one { width:53%; aspect-ratio:1; background:var(--accent); top:18%; right:-25%; }.ambient-two { width:42%; aspect-ratio:1; background:#375cbb; bottom:-15%; left:-21%; animation-delay:-4s; }
.display-header { display:flex; align-items:center; gap:.6em; font-size:clamp(8px,1.2vw,18px); letter-spacing:.13em; font-weight:700; color:#d8e4ff; }.display-header time { margin-left:auto; font-variant-numeric:tabular-nums; letter-spacing:.03em; }.live-dot { width:.6em; height:.6em; border-radius:99px; background:#53e8a5; box-shadow:0 0 0 .25em rgba(83,232,165,.18); }
.slide-stage { flex:1; margin:8% 0 5%; min-height:0; position:relative; border:1px solid rgba(255,255,255,.17); border-radius:clamp(16px,3vw,40px); overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02)); box-shadow:0 30px 80px rgba(0,0,0,.32); }.slide-image { position:absolute; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; }.slide-image.visible { opacity:1; }.image-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,8,20,.1),rgba(3,8,20,.12) 35%,rgba(3,8,20,.93)); }.empty-art { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 60% 25%,rgba(255,176,0,.25),transparent 45%),linear-gradient(140deg,#162b50,#0c142b); color:var(--accent); font-size:clamp(80px,13vw,230px); }.empty-art span { text-shadow:0 0 40px currentColor; animation:pulse 2.5s ease-in-out infinite; }.slide-copy { position:absolute; inset:auto 8% 8%; }.eyebrow { color:var(--accent); letter-spacing:.18em; font-size:clamp(8px,1.2vw,17px); font-weight:800; margin:0 0 1em; }.slide-copy h1 { max-width:94%; margin:0; font-size:clamp(27px,4.8vw,75px); line-height:1.03; letter-spacing:-.055em; }.caption { color:#d4dced; margin:.8em 0 0; font-size:clamp(12px,1.65vw,25px); line-height:1.38; }.display-footer { font-size:clamp(9px,1.3vw,19px); font-weight:600; letter-spacing:.01em; }.display-footer p { color:#cbd6e9; margin:1em 0 0; }.progress { height:3px; background:rgba(255,255,255,.25); overflow:hidden; border-radius:2px; }.progress i { display:block; background:var(--accent); height:100%; width:0; }.connection { position:absolute; bottom:2%; left:50%; translate:-50% 0; padding:.35em .75em; background:rgba(255,255,255,.11); border-radius:99px; font-size:clamp(7px,.9vw,13px); letter-spacing:.1em; white-space:nowrap; opacity:0; transition:.25s; }.connection.show { opacity:1; }
@keyframes float { 50% { transform:translate(-8%,10%) scale(1.12); } } @keyframes pulse { 50% { transform:scale(1.13) rotate(12deg); opacity:.75; } }
/* Admin */
.admin-page { min-height:100vh; background:#091220; color:#edf3ff; }.admin-top { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid var(--line); background:#0c1729; position:sticky; top:0; z-index:4; }.admin-top>div { display:flex; align-items:center; gap:18px; }.logo { color:#fff; text-decoration:none; font-weight:900; letter-spacing:.04em; font-size:19px; }.logo span { color:var(--accent); }.status { color:#91a3c4; font-size:13px; }.admin-layout { max-width:1640px; padding:34px clamp(20px,4vw,64px) 64px; margin:auto; display:grid; grid-template-columns:minmax(260px,.9fr) minmax(440px,1.6fr) minmax(230px,.75fr); gap:24px; align-items:start; }.panel,.content-panel { background:rgba(20,34,57,.76); border:1px solid var(--line); border-radius:18px; }.panel { padding:24px; }.section-title p,.content-heading p,.control-label { margin:0 0 6px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.15em; }.section-title h2,.control-panel h2 { margin:0 0 24px; letter-spacing:-.035em; }.setup-panel label:not(.switch),.slide-fields label { display:block; margin:0 0 16px; color:#bdcae1; font-size:12px; font-weight:700; }.setup-panel input:not([type=checkbox]),.slide-fields input,.slide-fields textarea { display:block; width:100%; border:1px solid #304563; background:#0a1425; border-radius:9px; color:#fff; outline:0; padding:10px 11px; margin-top:6px; }.setup-panel input:focus,.slide-fields input:focus,.slide-fields textarea:focus { border-color:var(--accent); }.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.setup-panel input[type=color] { height:42px; padding:4px; }.checks { display:grid; gap:11px; padding:4px 0 20px; }.switch { display:flex; gap:10px; align-items:center; font-size:13px; color:#d5dff1; cursor:pointer; }.switch input { display:none; }.switch span { width:32px; height:18px; background:#33445f; border-radius:20px; position:relative; }.switch span:after { content:""; position:absolute; width:12px; height:12px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }.switch input:checked+span { background:var(--accent); }.switch input:checked+span:after { left:17px; }.button { border:1px solid transparent; min-height:39px; border-radius:9px; padding:0 13px; font-weight:750; font-size:13px; }.primary { background:var(--accent); color:#101521; }.secondary { background:#162641; color:#e6eeff; border-color:#314764; }.full { width:100%; }.hint { font-size:12px; line-height:1.45; color:#8495b2; margin:16px 0 0; }.content-panel { padding:25px; min-height:570px; }.content-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:22px; }.content-heading h1 { margin:0; font-size:27px; letter-spacing:-.05em; }.slide-list { display:grid; gap:15px; }.slide-card { display:grid; grid-template-columns:185px 1fr; gap:18px; background:#0c182b; border:1px solid var(--line); padding:13px; border-radius:14px; }.image-picker { height:176px; border-radius:9px; overflow:hidden; background:#14243d; position:relative; display:grid; place-items:center; }.image-picker img { width:100%; height:100%; object-fit:cover; display:none; }.no-image { color:#8495b2; font-size:11px; font-weight:800; letter-spacing:.09em; }.upload-button { position:absolute; bottom:8px; left:8px; right:8px; border-radius:7px; text-align:center; padding:8px; color:#fff; background:rgba(7,15,31,.83); font-size:12px; font-weight:800; cursor:pointer; }.upload-button input { display:none; }.slide-fields { min-width:0; }.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; color:#acbad1; font-size:11px; letter-spacing:.12em; }.remove { border:0; background:none; color:#d8989e; font-size:23px; line-height:16px; }.control-panel { position:sticky; top:100px; }.control-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.control-grid button { min-height:56px; border:1px solid #314764; background:#11213a; color:#dfe8fa; border-radius:9px; text-align:left; padding:10px; font-size:12px; font-weight:700; }.control-grid button:hover,.secondary:hover { border-color:var(--accent); }.online { padding:21px 0 0; margin-top:21px; border-top:1px solid var(--line); display:grid; grid-template-columns:9px 1fr; gap:4px 9px; }.online span { width:9px; height:9px; border-radius:50%; margin-top:4px; background:#4ce4a1; box-shadow:0 0 13px #4ce4a1; }.online b { font-size:12px; }.online small { grid-column:2; color:#8495b2; font-size:11px; line-height:1.45; }
@media (max-width:1080px) { .admin-layout { grid-template-columns:300px 1fr; }.control-panel { grid-column:1/-1; position:static; }.control-grid { grid-template-columns:repeat(4,1fr); } } @media (max-width:700px) { .admin-top { height:auto; padding:15px 20px; }.admin-top>div { gap:8px; }.status { display:none; }.admin-layout { display:block; padding:20px; }.panel,.content-panel { margin-bottom:16px; }.slide-card { grid-template-columns:1fr; }.image-picker { height:210px; }.control-grid { grid-template-columns:1fr 1fr; } }
.setup-panel select { display:block; width:100%; margin-top:6px; padding:10px 11px; color:#fff; background:#0a1425; border:1px solid #304563; border-radius:9px; outline:0; }.setup-panel select:focus { border-color:var(--accent); }