:root{
  --ink:#1B1D22;
  --ink-soft:#5B5F68;
  --paper:#FAF8F4;
  --surface:#FFFFFF;
  --surface-2:#F1EEE7;
  --border:#E4DFD3;
  --brass:#C69A45;
  --brass-strong:#8C6423;
  --brass-fill:#F3E6CC;
  --teal:#2F7A72;
  --teal-strong:#1F5A54;
  --teal-fill:#DCEFEC;
  --success:#2E8B57;
  --warning:#B8860B;
  --danger:#C1443B;
  --danger-fill:#F7E1DE;
  --shadow: 0 1px 2px rgba(27,29,34,0.06), 0 8px 24px -12px rgba(27,29,34,0.18);
  --radius: 10px;
  --stage-bg:#0B0D10;
  --stage-vignette: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.05), rgba(0,0,0,0) 55%);
  --stage-surface: rgba(255,255,255,0.06);
  --stage-border: rgba(255,255,255,0.12);
  --stage-text:#F5F2EA;
  --stage-text-soft: rgba(245,242,234,0.6);
  --stage-brass:#D8AE5E;
  --stage-teal:#6FC9BF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDEAE2; --ink-soft:#A8A79E; --paper:#14161A; --surface:#1C1F24; --surface-2:#23262C; --border:#2E3238;
    --brass:#D8AE5E; --brass-strong:#E8C27A; --brass-fill:#3A311E;
    --teal:#6FC9BF; --teal-strong:#8FDAD1; --teal-fill:#1B3634;
    --success:#4CBB79; --warning:#E0A845; --danger:#E2685C; --danger-fill:#3A2320;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --ink:#EDEAE2; --ink-soft:#A8A79E; --paper:#14161A; --surface:#1C1F24; --surface-2:#23262C; --border:#2E3238;
  --brass:#D8AE5E; --brass-strong:#E8C27A; --brass-fill:#3A311E;
  --teal:#6FC9BF; --teal-strong:#8FDAD1; --teal-fill:#1B3634;
  --success:#4CBB79; --warning:#E0A845; --danger:#E2685C; --danger-fill:#3A2320;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:'Manrope','Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Fraunces','Iowan Old Style','Palatino Linotype',serif; text-wrap:balance; margin:0; }
code, .mono{ font-family:'IBM Plex Mono','SFMono-Regular',Consolas,monospace; }
input, select, button, textarea{ font-family:inherit; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--brass-strong); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
[hidden]{ display:none !important; }

/* ---------- Admin shell ---------- */
#adminView{ max-width:1180px; margin:0 auto; padding:28px 24px 64px; }
.topbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.brand{ display:flex; flex-direction:column; gap:4px; }
.brand .eyebrow{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass-strong); font-weight:700; }
.brand h1{ font-size:28px; font-weight:600; letter-spacing:-0.01em; }
.brand .sub{ font-size:13px; color:var(--ink-soft); max-width:50ch; }
.hotel-field{ display:flex; flex-direction:column; gap:6px; min-width:280px; }
.hotel-field label{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.hotel-field .row{ display:flex; align-items:center; gap:10px; }
.hotel-field input{ flex:1; padding:9px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; }
.save-flag{ font-size:12px; color:var(--success); opacity:0; transition:opacity .5s ease; white-space:nowrap; }
.save-flag.show{ opacity:1; }
.layout{ display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
@media (max-width:880px){ .layout{ grid-template-columns:1fr; } }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.panel + .panel{ margin-top:20px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; }
.panel-head h2{ font-size:16px; font-weight:600; }
.panel-head .count{ font-size:12px; color:var(--ink-soft); }
.queue{ display:flex; flex-direction:column; gap:10px; }
.empty-state{ padding:28px 12px; text-align:center; color:var(--ink-soft); font-size:13px; }
.item-card{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.item-card.disabled{ opacity:0.55; }
.order-controls{ display:flex; flex-direction:column; gap:3px; }
.order-controls button{ width:22px; height:18px; border-radius:4px; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.order-controls button:hover{ color:var(--ink); border-color:var(--brass); }
.order-controls button:disabled{ opacity:0.35; cursor:default; }
.item-body{ min-width:0; }
.item-top{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.badge{ font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:2px 7px; border-radius:100px; }
.badge.video{ background:var(--brass-fill); color:var(--brass-strong); }
.badge.dashboard{ background:var(--teal-fill); color:var(--teal-strong); }
.item-logo{ height:16px; width:auto; max-width:60px; object-fit:contain; flex-shrink:0; }
.scroll-flag{ font-size:12px; color:var(--teal-strong); flex-shrink:0; }
.item-title{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-src{ font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.item-duration{ font-size:11px; color:var(--ink-soft); margin-top:2px; }
.item-actions{ display:flex; align-items:center; gap:10px; }
.switch{ position:relative; width:36px; height:20px; flex-shrink:0; }
.switch input{ opacity:0; width:100%; height:100%; margin:0; position:absolute; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background:var(--border); border-radius:100px; transition:background .18s ease; }
.switch .thumb{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:transform .18s ease; }
.switch input:checked + .track{ background:var(--success); }
.switch input:checked + .track + .thumb{ transform:translateX(16px); }
.icon-btn{ width:26px; height:26px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; }
.icon-btn:hover{ background:var(--danger-fill); color:var(--danger); border-color:var(--danger); }
.icon-btn.confirm{ background:var(--danger); color:#fff; border-color:var(--danger); font-size:11px; width:auto; padding:0 8px; font-weight:700; }
.composer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.composer-grid .full{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:11px; font-weight:700; letter-spacing:0.04em; color:var(--ink-soft); text-transform:uppercase; }
.field input, .field select{ padding:9px 10px; border-radius:7px; border:1px solid var(--border); background:var(--paper); color:var(--ink); font-size:13.5px; }
.field .hint{ font-size:11px; color:var(--ink-soft); }
.checkline{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); }
.checkline input{ width:15px; height:15px; }
.upload-row{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.upload-row .file-btn{ font-size:11.5px; padding:6px 10px; border-radius:6px; border:1px dashed var(--border); background:var(--surface-2); cursor:pointer; color:var(--ink-soft); }
.upload-row .file-btn:hover{ border-color:var(--brass); color:var(--brass-strong); }
.upload-row .file-status{ font-size:11.5px; color:var(--ink-soft); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:700; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:var(--brass-strong); color:#fff; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:disabled{ opacity:0.6; cursor:default; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-strong); }
.btn-link{ background:none; border:none; color:var(--brass-strong); font-weight:700; font-size:12.5px; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; }
.stage-preview{ aspect-ratio:16/9; border-radius:10px; overflow:hidden; position:relative; background:var(--stage-bg); border:1px solid var(--stage-border); }
.stage-preview .mini-note{ position:absolute; top:8px; left:8px; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stage-text-soft); background:rgba(0,0,0,0.35); padding:3px 7px; border-radius:100px; z-index:2; }
.status-card{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.status-left{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-soft); flex-shrink:0; }
.dot.on{ background:var(--success); box-shadow:0 0 0 3px rgba(46,139,87,0.25); }
.dot.off{ background:var(--danger); }
.status-sub{ font-size:11px; color:var(--ink-soft); }
.helper-note{ font-size:12px; color:var(--ink-soft); background:var(--surface-2); border:1px dashed var(--border); border-radius:8px; padding:10px 12px; margin-top:16px; line-height:1.5; }
.error-note{ font-size:12px; color:var(--danger); margin-top:6px; min-height:14px; }
.edit-banner{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--brass-strong); background:var(--brass-fill); border:1px solid var(--brass); border-radius:8px; padding:8px 12px; margin-bottom:14px; }
.logo-row{ display:flex; align-items:center; gap:12px; }
.logo-thumb{
  width:96px; height:56px; flex-shrink:0; border-radius:8px; border:1px dashed var(--border); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px;
}
.logo-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.logo-thumb-empty{ font-size:10px; color:var(--ink-soft); text-align:center; }
.logo-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }

/* ---------- Mock dashboard (shared by preview + player) ---------- */
.mockdash{ height:100%; width:100%; display:flex; flex-direction:column; padding:5% 6%; color:var(--stage-text); }
.mockdash-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4%; }
.mockdash-head h3{ font-family:'Fraunces',serif; font-weight:600; font-size:clamp(14px,2.6vw,26px); color:var(--stage-text); }
.mockdash-head span{ font-size:clamp(8px,1vw,12px); text-transform:uppercase; letter-spacing:0.1em; color:var(--stage-text-soft); }
.mockdash-grid{ flex:1; display:grid; grid-template-columns:repeat(2,1fr); gap:4%; }
.mockdash-tile{ background:var(--stage-surface); border:1px solid var(--stage-border); border-radius:12px; padding:5%; display:flex; flex-direction:column; justify-content:center; gap:2%; }
.mockdash-tile .label{ font-size:clamp(7px,0.9vw,11px); text-transform:uppercase; letter-spacing:0.08em; color:var(--stage-text-soft); }
.mockdash-tile .value{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:clamp(16px,3.4vw,36px); font-weight:600; color:var(--stage-text); }
.mockdash-tile .trend{ font-size:clamp(7px,0.85vw,10.5px); color:var(--stage-teal); }
.mockdash-tile .trend.warn{ color:var(--stage-brass); }

/* ---------- Player (fullscreen kiosk stage) ---------- */
html.player-html, body.player-body{ height:100%; background:var(--stage-bg); }
#playerView{
  position:fixed; inset:0; background:var(--stage-bg);
  display:grid; grid-template-columns:repeat(3,1fr) minmax(300px,340px);
}
.stage-main{ grid-column:1 / span 3; display:flex; flex-direction:column; overflow:hidden; }
.stage-video-area{ position:relative; flex:3 1 0; min-height:0; background-image:var(--stage-vignette); overflow:hidden; }
.stage-topbar{ position:absolute; top:22px; right:26px; z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.stage-logo{ max-height:46px; max-width:200px; object-fit:contain; display:block; }
.stage-clocks{ display:flex; gap:18px; }
.stage-clock-item{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.stage-clock-label{ font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--stage-text-soft); }
.stage-clock-face{ width:46px; height:46px; overflow:visible; }
.clockface-ring{ fill:var(--stage-surface); stroke:var(--stage-border); stroke-width:3; }
.clockface-ticks line{ stroke:var(--stage-text-soft); stroke-width:3; stroke-linecap:round; }
.clockface-hand{ stroke-linecap:round; }
.clockface-hand.hour{ stroke:var(--stage-text); stroke-width:6; }
.clockface-hand.minute{ stroke:var(--stage-text); stroke-width:4; }
.clockface-hand.second{ stroke:var(--stage-brass); stroke-width:2; }
.clockface-pivot{ fill:var(--stage-brass); }
.stage-content{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.stage-content.visible{ opacity:1; }
.stage-content video{ width:100%; height:100%; object-fit:cover; display:block; }
.stage-content iframe{ width:100%; height:100%; border:0; display:block; background:#fff; }
.stage-scroll-viewport{ position:absolute; inset:0; overflow:hidden; background:#fff; }
.stage-scroll-viewport iframe{ position:absolute; top:0; left:0; width:100%; border:0; display:block; background:#fff; will-change:transform; }
.stage-content .video-caption{ position:absolute; bottom:118px; left:26px; z-index:4; font-size:12px; color:var(--stage-text-soft); background:rgba(0,0,0,0.4); padding:4px 10px; border-radius:100px; }
.stage-lowerthird{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:22px 28px 20px; background:linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%); display:flex; flex-direction:column; gap:10px; }
.stage-identity{ display:flex; align-items:center; gap:12px; }
.stage-identity-logo{ height:30px; width:auto; max-width:140px; object-fit:contain; display:block; }
.stage-hotel{ font-family:'Fraunces',serif; font-weight:600; font-size:20px; color:var(--stage-text); }
.stage-badge{ font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:3px 9px; border-radius:100px; border:1px solid var(--stage-border); }
.stage-badge.video{ color:var(--stage-brass); border-color:var(--stage-brass); }
.stage-badge.dashboard{ color:var(--stage-teal); border-color:var(--stage-teal); }
.stage-address-line{ display:flex; align-items:baseline; gap:6px; font-size:13px; color:var(--stage-text-soft); }
.stage-address-label{ font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stage-text-soft); opacity:0.8; }
.stage-address-value{ color:var(--stage-text-soft); }
.stage-dots{ display:flex; gap:6px; }
.stage-dots .sdot{ width:20px; height:3px; border-radius:100px; background:rgba(255,255,255,0.22); transition:background .3s ease, width .3s ease; }
.stage-dots .sdot.active{ background:var(--stage-brass); width:34px; }
.stage-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--stage-text-soft); text-align:center; padding:0 20px; }
.stage-empty h2{ color:var(--stage-text); font-size:22px; }

/* ---------- Player sidebar (kolom 4 — jadwal meeting) ---------- */
.stage-sidebar{
  grid-column:4; position:relative; overflow-y:auto; background:rgba(255,255,255,0.03);
  border-left:1px solid var(--stage-border); padding:26px 22px 22px; display:flex; flex-direction:column; gap:24px;
}
.sidebar-clock{ font-family:'Fraunces',serif; font-weight:600; font-size:clamp(16px,1.8vw,21px); color:var(--stage-text); text-transform:capitalize; padding-bottom:16px; border-bottom:1px solid var(--stage-border); }
.sidebar-section-title{ font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--stage-brass); margin-bottom:12px; }
.sidebar-meetings{ display:flex; flex-direction:column; gap:10px; }
.sidebar-empty{ font-size:14.5px; color:var(--stage-text-soft); padding:10px 2px; }
.meeting-card{ background:var(--stage-surface); border:1px solid var(--stage-border); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.meeting-time{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; color:var(--stage-teal); }
.meeting-title{ font-size:16px; font-weight:700; color:var(--stage-text); line-height:1.3; }
.meeting-agenda{ font-size:13.5px; color:var(--stage-text-soft); line-height:1.4; }
.meeting-meta{ display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:2px; }
.meeting-room, .meeting-user{ font-size:12.5px; color:var(--stage-text-soft); display:flex; align-items:center; gap:4px; }
.meeting-room::before{ content:"\1F4CD"; font-size:12px; }
.meeting-user::before{ content:"\1F464"; font-size:12px; }

/* ---------- News bar (baris 4 — corporate news, di bawah area video) ---------- */
.stage-news-bar{
  flex:1 1 0; min-height:0; border-top:1px solid var(--stage-border); background:rgba(255,255,255,0.04);
  display:flex; align-items:center; gap:18px; padding:0 28px; position:relative; overflow:hidden;
}
.news-bar-tag{
  flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--stage-bg); background:var(--stage-brass); padding:6px 12px; border-radius:100px;
}
.news-bar-track{ position:relative; flex:1; min-width:0; height:100%; }
.news-item{
  position:absolute; inset:0; display:flex; align-items:center; gap:14px; opacity:0; transition:opacity .6s ease;
}
.news-item.visible{ opacity:1; }
.news-item-title{ flex-shrink:0; font-family:'Fraunces',serif; font-weight:600; font-size:clamp(14px,1.6vw,19px); color:var(--stage-text); }
.news-item-desc{
  color:var(--stage-text-soft); font-size:clamp(12px,1.2vw,15px); line-height:1.4;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.news-item-desc p{ margin:0 0 4px; }
.news-item-desc :last-child{ margin-bottom:0; }

@media (max-width:1100px){
  #playerView{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .stage-main{ grid-column:1; }
  .stage-sidebar{ grid-column:1; border-left:none; border-top:1px solid var(--stage-border); flex-direction:row; overflow-x:auto; max-height:240px; }
}