:root{color-scheme:dark;--bg:#080F1D;--panel:#121C2D;--panel-2:#0D1626;--line:#2A3549;--text:#F5F7FC;--muted:#A5B1C4;--gold:#FFBC18;--good:#3ddc97;--warn:#FFBC18;--bad:#ff7a90;--radius:18px;--gap:20px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.55 'Segoe UI',system-ui,-apple-system,sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{border:1px solid var(--line);border-radius:11px;background:#1B2739;padding:10px 16px;cursor:pointer}
button:hover:not(:disabled){border-color:var(--gold)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--gold);border-color:var(--gold);color:#15110A;font-weight:750}
button.ghost{background:transparent}
button.small{padding:6px 11px;font-size:13px;border-radius:9px}
button:focus-visible,input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:2px}
input,select,textarea{width:100%;background:#0B1322;border:1px solid #35415A;border-radius:9px;padding:9px 11px}
textarea{min-height:78px;resize:vertical}
label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
h1{font-size:26px;margin:0;line-height:1.2}
h2{font-size:20px;margin:0}
h3{font-size:15px;margin:0}
p{margin:0}
[hidden]{display:none!important}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.hint{font-size:12.5px;color:var(--muted)}
.weather-status{display:grid;gap:4px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);font-size:12.5px}
.good{color:var(--good)}.bad{color:var(--bad)}.warn{color:var(--warn)}
#notice{background:#1d2a41;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:11px 15px;margin-bottom:16px;font-size:14px}
/* Peringatan dari notice(msg,'warn') harus terlihat berbeda dari info biasa. Warna teks
   ditulis eksplisit agar tidak ikut aturan .warn global (yang dipakai pill status). */
#notice.warn{background:#331d23;border-color:#7a3a44;border-left-color:var(--bad);color:#ffded3}
.wedding-lobby-preview{display:grid;gap:6px;margin-top:16px;padding:16px;border:1px solid #c99a5666;border-radius:12px;background:linear-gradient(135deg,#0a1c2c,#10283c);color:#f4ead9}
.wedding-lobby-preview strong{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#e9c37e}
.wedding-lobby-title{font-size:18px;font-weight:750;line-height:1.3}
.wedding-lobby-meta{font-size:12px;color:#cbd5dd}
.login-wrap{display:grid;place-items:center;min-height:100vh;padding:24px}
.login{width:min(430px,100%);display:grid;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.login h1{font-size:25px}
.login p{color:var(--muted)}
#app{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
.side{background:var(--panel-2);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh}
.brand{display:grid;gap:3px}
.brand strong{font-size:24px;letter-spacing:-.5px}
.brand em{font-style:normal;color:var(--gold)}
.brand span,.brand small{font-size:9.5px;letter-spacing:.19em;color:var(--muted)}
.brand small{color:#5d6b83;margin-top:6px}
#nav{display:grid;gap:5px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:11px;padding:10px 12px;font-size:14px;color:var(--muted)}
.nav-item:hover{color:var(--text);border-color:var(--line)}
.nav-item.active{background:var(--gold);border-color:var(--gold);color:#15110A;font-weight:700}
.nav-item .dot{margin-left:auto;font-size:11px}
.side-foot{margin-top:auto;display:grid;gap:10px}
.conn{font-size:12px;color:var(--muted)}
.conn.on{color:var(--good)}
/* Kolom konten utama. Aturan ini sempat hilang di 9e4eaa8 sehingga judul dan panel menempel
   ke sidebar serta tepi kanan layar; jangan dihapus saat merapikan header. */
.main{padding:22px 26px 40px;min-width:0;display:flex;flex-direction:column;gap:18px}
/* Header dashboard memakai grid area: baris pertama "title location" (judul halaman di kiri,
   pemilih Lokasi kompak di kanan), baris kedua "actions actions" (status draft + tombol aksi
   selebar header). Karena baris aksi selalu selebar header, dropdown Lokasi tidak mungkin lagi
   mendesak atau memotong tombol — inilah penyebab header kacau di 1688px pada versi sebelumnya.
   Lebar dropdown dibatasi 260-280px (target desain 280px, langit-langit 320px) dan hanya boleh
   full-width di blok mobile <=900px. */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title location" "actions actions";align-items:center;gap:12px 20px;position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--line)}
.head > div:first-child{grid-area:title;min-width:0}
.head-actions{grid-area:actions;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
/* Pemilih lokasi header hanya label + dropdown; badge/tulisan template di header sudah dihapus. */
#editor-location{grid-area:location;display:grid;grid-template-columns:auto minmax(260px,280px);align-items:center;justify-content:end;gap:10px;min-width:0}
#editor-location label{color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap}
#editor-location select{width:100%;min-width:0;padding:8px 12px}
input[type=checkbox]{width:18px;height:18px;padding:0;flex:none;margin:0;accent-color:var(--gold)}
label:has(>input[type=checkbox]){display:flex;align-items:center;gap:8px}
summary{cursor:pointer;font-size:13px}
summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.simulation{margin-bottom:12px}
.sim-panel,.preview-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sim-panel{padding-top:10px}
.device-details[open]>summary{margin-bottom:10px}
.device-details .hint{margin-bottom:10px}
#preview-warning{font-size:12px;padding:8px 0}
.work.zoomed{grid-template-columns:minmax(0,1fr)}
.stack>button{justify-self:start}
.savestate{font-size:12.5px;color:var(--muted)}
.savestate.dirty{color:var(--warn)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:11px 15px;font-size:14px}
.chip:hover{border-color:#425270}
.chip .tick{margin-left:2px;color:var(--gold);font-weight:800}
.chip.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:#1B2436}
.chip .badge{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:1px 7px}
.loc-head{display:flex;align-items:center;gap:14px}
.loc-head .sep{width:1px;height:34px;background:var(--line)}
.loc-head small{font-size:12.5px;color:var(--gold)}
.loc-head p{font-size:12.5px;color:var(--muted)}
.work{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.col-preview,.col-editor{display:grid;gap:var(--gap);min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.sim{display:flex;align-items:center;gap:8px;font-size:12px}
.sim input{width:190px}
.frame-wrap{position:relative;aspect-ratio:16/9;background:#04080F;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame-wait{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--muted);background:#04080F}
.devices{display:grid;gap:8px}
.device{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:13px;background:var(--panel-2);flex-wrap:wrap}
.device .meta{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;flex-wrap:wrap;overflow-wrap:anywhere}
.device select{width:170px}
.pill{font-size:11px;padding:2px 9px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.pill.good{border-color:#1c5d46;background:#0f2a22;color:var(--good)}
.pill.warn{border-color:#6b5320;background:#241c0c;color:var(--warn)}
.pill.bad{border-color:#6d2739;background:#25121a;color:var(--bad)}
/* Halaman Pengguna memakai baris .device. Aturan dasar memberi width:100% pada input/select,
   jadi lebarnya dipatok di sini agar baris akun tidak meregang dan tetap rapi saat wrap. */
#user-list .device select{width:132px}
#user-list .device input[type=password]{width:172px}
#user-new select{width:148px}
#user-new input[name=password]{width:236px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:14px}
.tab{background:transparent;border:1px solid transparent;border-radius:9px;padding:7px 12px;font-size:13px;color:var(--muted)}
.tab.active{background:var(--gold);color:#15110A;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px;align-items:start}
.grid.wide{grid-template-columns:minmax(0,1fr)}
.stack{display:grid;gap:12px}
.slot-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;flex-wrap:wrap}
.slot-head p{font-size:12px;color:var(--muted)}
.card{border:1px solid var(--line);border-radius:13px;background:var(--panel-2);padding:12px;margin-bottom:10px}
.card-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap}
.card-head .num{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;font-size:13px}
.card-head .title{display:grid;gap:1px;min-width:0;font-size:13.5px}
.card-head .title small{color:var(--muted);font-size:11.5px}
.photo-status{width:max-content;font-size:11px;font-weight:700;padding:2px 8px;border:1px solid var(--line);border-radius:20px;color:var(--muted)}
.photo-status.dirty,.photo-status.local{color:var(--warn);border-color:#6b5320;background:#241c0c}
.photo-status.saved{color:var(--good);border-color:#1c5d46;background:#0f2a22}
.card-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Panel "Foto hero default ruangan" di tab Ruangan: dibatasi garis pemisah agar jelas
   bahwa ia milik lokasi ini, bukan bagian field teks identitas di atasnya. */
.hero-default{display:grid;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.hero-default>.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-default select{max-width:420px}
.thumb{width:64px;height:40px;object-fit:cover;border-radius:7px;border:1px solid var(--line);background:#0B1322;flex-shrink:0}
.missing-thumb{display:grid;place-items:center;color:var(--muted);font-size:12px}
.slide-card{display:grid;gap:10px}
.slide-summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.slide-summary .num{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;font-size:13px}
.slide-summary .title{display:grid;gap:2px;min-width:0;flex:1}
.slide-summary .title strong{font-size:13.5px;overflow-wrap:anywhere}
.slide-summary>.card-actions{flex-basis:100%}
.library-picker{width:100%;margin:8px 0}
.photo-editor{display:grid;gap:10px}
.photo-editor .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.photo-editor .title{flex-basis:100%;display:grid;gap:6px}
.photo-editor img{width:100%;max-height:150px;object-fit:contain}
.col-editor .event{grid-template-columns:1fr;min-width:0}
.asset{min-width:0;overflow-wrap:anywhere}
.slide-summary .title small{font-size:11.5px;color:var(--muted)}
.slide-summary progress{width:100%;height:5px;accent-color:var(--gold)}
.drag-handle{cursor:grab;color:var(--muted);font-size:14px;padding:0 2px;user-select:none}
.drag-handle:active{cursor:grabbing}
.compact-check{flex-direction:row;align-items:center;gap:6px;margin:0 4px;font-size:12.5px;color:var(--text);cursor:pointer}
.compact-check input{width:auto;margin:0}
.optional-text{border-top:1px dashed var(--line);padding-top:10px;margin-top:4px;display:grid;gap:10px}
.optional-text h3{font-size:13px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em}
.state{font-size:11.5px;padding:3px 8px;border-radius:7px;background:#0B1322;border:1px solid var(--line)}
.state[data-state=error]{color:var(--bad);border-color:#6d2739}
.state[data-state=busy]{color:var(--warn);border-color:#6b5320}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.asset{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:10px;display:grid;gap:7px;font-size:12.5px}
.asset-preview{height:126px;border:1px solid var(--line);border-radius:9px;background:#0B1322;overflow:hidden;display:grid;place-items:center;color:var(--muted);text-align:center;padding:10px}
.asset-preview img{width:100%;height:100%;object-fit:cover;display:block}.asset-preview.video{gap:3px}.asset-preview.video span{font-size:18px;font-weight:800;letter-spacing:.12em;color:var(--gold)}.asset-preview.video small{font-size:11px;max-width:150px}.asset-actions{display:flex;justify-content:flex-end}.danger{color:var(--bad);border-color:#6d2739;background:#2b1320}.danger:hover:not(:disabled){border-color:var(--bad);background:#3a1726}
.asset .row{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:6px}
.stat strong{font-size:22px}
.stat span{font-size:12.5px;color:var(--muted)}
.events{display:grid;gap:9px}
.event{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:11px 13px}
.event .when{font-variant-numeric:tabular-nums;font-size:13px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px}
.when-cap{font-size:12px;color:var(--muted)}
/* Form tambah event: jarak antar bagian, dan checkbox Lobby sejajar dengan input Prioritas. */
.event-form{display:grid;gap:12px}
.event-form h3:not(:first-child){margin-top:6px}
.event-form>button.primary{justify-self:start}
.event-extra{align-items:end}
#event-list>.event+.event{margin-top:10px}
.event-extra>label:has(>input[type=checkbox]){min-height:42px;color:var(--text)}
.event .rooms{font-size:11.5px;color:var(--muted)}
.location-badges,.selected-location-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.location-badge,.location-chip,.selected-location-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:2px 7px;font-size:10.5px;line-height:1.35;white-space:nowrap}.location-badge.parent,.location-chip.parent,.selected-location-chip.parent{color:#2c2100;background:#ffbc1822;border-color:#b88510}.location-badge.child,.location-chip.child,.selected-location-chip.child{color:#b9d9ff;background:#397fd422;border-color:#397fd4}.location-badge.meeting,.location-chip.meeting,.selected-location-chip.meeting{color:#dfccff;background:#8456b522;border-color:#8456b5}.location-badge.public,.location-chip.public,.selected-location-chip.public{color:#a4f0d4;background:#2fbb8a22;border-color:#2fbb8a}.location-picker{display:grid;gap:8px}.selected-location-chips{min-height:24px}.location-menu{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:8px 10px}.location-menu summary{color:var(--text);font-weight:650}.location-group{border:0;border-top:1px solid var(--line);margin:9px 0 0;padding:8px 0 0;display:grid;gap:5px}.location-group legend{padding:0 5px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.location-choice{display:flex;grid-template-columns:none;align-items:center;gap:8px;color:var(--text);cursor:pointer}.location-choice.child{padding-left:18px}.location-choice .location-badge{margin-left:auto}.chip-remove{padding:0;border:0;background:transparent;color:inherit;font-size:16px;line-height:1;min-width:18px}.chip-remove:hover{border:0;color:var(--bad)}.readonly-locations,.preview-scope-context{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);padding:8px 0}.preview-scope-context{margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.space-radios{display:grid;gap:6px;margin-top:4px}.space-radios .check{display:flex;align-items:center;gap:8px;margin:0;color:var(--text);cursor:pointer}.space-radios .check input{width:auto;margin:0}.field{display:grid;gap:6px}
.event.live{border-color:#1c5d46}
.event.done{opacity:.62}
.pair{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--gold);border-radius:13px;background:#1a1a12;padding:14px 16px;margin-bottom:14px;flex-wrap:wrap}
.code{font-size:34px;letter-spacing:.18em;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.inline{display:flex;gap:8px;align-items:end}
.inline input{width:210px}
.filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.filters label{gap:4px}
.upload-button{display:inline-grid;place-items:center;border:1px dashed #46536d;border-radius:10px;padding:9px 14px;font-size:13px;color:var(--muted);cursor:pointer}
.upload-button input{display:none}
.upload-button:hover{border-color:var(--gold);color:var(--text)}
.location-form{display:grid;grid-template-columns:minmax(200px,1fr) minmax(170px,.65fr) auto;gap:12px;align-items:end;margin-top:16px}
.location-list{display:grid;gap:9px;margin-top:16px}
.location-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,.55fr) auto auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);padding:9px 11px}
.location-row .meta{font-size:12px;color:var(--muted)}
.scope-editor{display:grid;gap:6px;min-width:190px}.scope-editor .scope-choices{display:grid;gap:4px;padding:7px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}.scope-editor .check{font-size:12px}.scope-editor .check input{width:auto}
@media(max-width:1180px){.work{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){#app{grid-template-columns:1fr}.main{padding:16px 16px 32px}.side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}#nav{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.event,.location-form,.location-row{grid-template-columns:1fr}}
/* Target sentuh pada layar HP. Hanya aktif <=860px sehingga tata letak desktop tidak
   berubah sama sekali: sebelumnya checkbox hanya 13x18 px dan tombol 33,5 px tinggi,
   terlalu kecil untuk jari. Baris label ikut dilebarkan karena area sentuh checkbox
   adalah seluruh baris label, bukan kotaknya saja. */
@media(max-width:860px){
  button,select,.upload-button{min-height:44px}
  .check,.space-radios .check,.location-choice{min-height:40px}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px}
  summary{padding-block:10px}
}
/* Header TIDAK memakai blok fallback menengah lagi. Ambang 900px di bawah adalah satu-satunya
   ambang tata letak header, dan angkanya berasal dari hasil ukur nyata (Chrome headless, zoom 100%,
   DSF 1, instance demo 8790, 9/26/2026) memakai teks terpanjang yang masih diizinkan UI (nama lokasi
   maxLength=60, tombol "Publikasikan ke <nama>", status draft terpanjang) + subjudul halaman:
     media query bekerja pada viewport penuh, sedangkan header hanya punya
     viewport − sidebar 224px − scrollbar 15px.
     Baris pertama ("title location") butuh judul tanpa bungkus 258,8px (h1 194 + subjudul 258,8)
     + gap kolom .head 20px + #editor-location 328,1px (label 38,1 + gap 10 + dropdown 280)
     = 606,9px lebar header, yaitu viewport 845,9px — masih muat di atas 900px.
   Karena 845,9px < 900px, tablet/desktop 901-1920px selalu cukup untuk judul + pemilih Lokasi
   sebaris; pemilih lokasi tidak perlu turun ke barisnya sendiri di sana. Fallback lama
   (1400/1720/1800px) menurunkannya terlalu cepat sampai viewport 1688px ikut kena — keluhan operator. */
/* Header dashboard <=900px: satu kolom — judul di atas, lalu status draft + tombol aksi, lalu
   pemilih lokasi (label tetap terlihat, dropdown selebar kolom). Di bawah 846px baris pertama
   memang sudah tidak muat (lihat hitungan di atas), dan <=860px sidebar juga sudah pindah ke atas
   sehingga header memakai lebar viewport penuh. */
@media(max-width:900px){
  .head{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "actions" "location"}
  /* Status di baris sendiri, tombol aksi berbagi lebar agar tidak pecah tiga baris tak rata. */
  .head-actions .savestate{flex-basis:100%}
  .head-actions button{flex:1 1 auto}
  #editor-location{grid-template-columns:auto minmax(0,1fr);justify-content:stretch}
}
/* Layar sangat sempit: label dan dropdown bertumpuk supaya nama lokasi panjang tetap terbaca. */
@media(max-width:560px){
  #editor-location{grid-template-columns:minmax(0,1fr)}
}
/* Galeri prewedding pada form event Wedding: kisi thumbnail berurutan sesuai urutan tayang. */
.gallery-field{display:grid;gap:8px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.gallery-field .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Sesi acara Meeting Room: jam dan nama sesi sebaris. */
.session-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:8px;margin-top:6px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.gallery-item{display:grid;gap:6px;min-width:0;padding:6px;border:1px solid var(--line);border-radius:9px;background:#0B1322}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#0B1322}
.gallery-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}