@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

  :root{
    color-scheme:light only;
    --bg-void:#eaf1fb;
    --bg-panel:#ffffff;
    --bg-panel-2:#f4f8fd;
    --bg-raised:#e9f1fb;
    --line:#cbdcf3;
    --line-soft:#dce8f8;
    --ink:#102a4c;
    --ink-dim:#48628a;
    --ink-faint:#7f97b8;
    --magenta:#1d6fe0;
    --magenta-glow:#1d6fe040;
    --cyan:#0ea5e9;
    --cyan-glow:#0ea5e940;
    --gold:#e08a1e;
    --red:#e0435c;
    --yellow:#ffd23f;
    --pink:#ff6ec9;
    --green:#1aa15c;
    --besar:#ff3b5c;
    --kecil:#ffd23f;
    --sedang:#ff6ec9;
    --meja:#2dd9b8;
    --ok:#1aa15c;

    /* skala spasi & radius yang konsisten dipakai di seluruh denah/form */
    --gap-xs:6px;
    --gap-sm:10px;
    --gap-md:16px;
    --gap-lg:24px;
    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:20px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, #dce9fb99, transparent 60%),
      radial-gradient(ellipse 800px 600px at 105% 10%, #e4f1fc99, transparent 60%),
      var(--bg-void);
    color:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{line-height:1.2;}
  input,select,textarea,button{font-family:inherit;}

  /* ikon garis pengganti emoji */
  .icon{flex-shrink:0; vertical-align:-3px;}
  .btn .icon{margin-right:1px;}
  .btn.icon-only{padding:9px; line-height:0;}
  .ink-faint-icon{color:var(--ink-faint); display:inline-flex;}

  /* teks pembantu yang berulang di banyak tempat, dulu ditulis inline */
  .subhead{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:12px;}
  .muted-note{font-size:13px; color:var(--ink-faint);}
  .field-hint{font-size:11px; color:var(--ink-faint); margin-top:5px; line-height:1.4;}
  .display{font-family:'Bebas Neue', sans-serif; letter-spacing:0.04em; line-height:1.05; font-weight:400;}
  .mono{font-family:'JetBrains Mono', monospace;}

  /* ---------- App shell ---------- */
  #app{max-width:1400px; margin:0 auto; padding:20px 20px 80px;}

  header.top{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px; margin-bottom:18px; flex-wrap:wrap; gap:14px;
    background:linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel));
    border:1px solid var(--line); border-radius:14px;
    position:relative; overflow:hidden;
  }
  header.top::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--gold), var(--magenta));
    height:3px; top:0;
  }
  .brand{display:flex; align-items:baseline; gap:12px;}
  .brand h1{font-size:34px; color:var(--ink); text-shadow:0 1px 0 #ffffff, 0 2px 8px var(--magenta-glow);}
  .brand span{color:var(--ink-faint); font-size:12px; letter-spacing:.14em; text-transform:uppercase;}
  .top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .gro-controls{display:flex; align-items:center; gap:8px; padding-left:10px; margin-left:2px; border-left:1px solid var(--line-soft);}

  .date-picker{
    display:flex; align-items:center; gap:8px;
    background:var(--bg-raised); border:1px solid var(--line); border-radius:10px;
    padding:8px 12px;
  }
  .date-picker label{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em;}
  .date-picker input{
    background:transparent; border:none; color:var(--ink); font-family:'JetBrains Mono',monospace;
    font-size:14px; outline:none;
  }
  .live-clock{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:8px;
    padding:8px 14px; font-size:13px; color:var(--ink-dim); font-weight:600;
    white-space:nowrap;
  }
  .gro-badge{
    display:flex; align-items:center; gap:6px;
    background:#1aa15c14; border:1px solid #1aa15c55; border-radius:10px;
    padding:8px 14px; font-size:13px; color:var(--green); white-space:nowrap;
  }
  .dot-online{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px #1aa15c22; flex-shrink:0;}
  .role-tag{
    background:var(--magenta); color:#fff; font-size:9px; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; padding:2px 6px; border-radius:5px; margin-left:2px;
  }

  /* ---------- Kelola Pengguna ---------- */
  .user-list{display:flex; flex-direction:column; gap:8px; margin-bottom:8px;}
  .user-row{
    background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  }
  .user-info{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; font-size:14px;}
  .role-badge{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:6px;}
  .role-badge.administrator{background:var(--magenta); color:#fff;}
  .role-badge.editor{background:var(--bg-raised); color:var(--ink-dim); border:1px solid var(--line);}
  .user-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .user-reset-form{display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-soft); flex-wrap:wrap;}
  .user-reset-form .f{flex:1; min-width:180px;}
  .add-user-form{
    background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:14px; margin-top:14px;
  }
  .guest-note{
    display:flex; align-items:flex-start; gap:9px;
    background:#e08a1e14; border:1px solid #e08a1e55; border-radius:var(--radius-sm);
    padding:10px 14px; font-size:12px; color:var(--gold); margin-bottom:14px; line-height:1.5;
  }
  .guest-note .icon{margin-top:1px;}
  .guest-note strong{color:inherit;}
  .status-locked{
    background:var(--bg-raised); border:1px solid var(--line); border-radius:8px;
    padding:9px 11px; font-size:13px; color:var(--ink-dim); display:flex; align-items:center; gap:8px;
  }

  nav.tabs{
    display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;
    border-bottom:1px solid var(--line-soft); padding-bottom:0;
  }
  nav.tabs button{
    background:transparent; border:none; color:var(--ink-faint);
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px;
    padding:11px 18px; cursor:pointer; border-radius:10px 10px 0 0;
    border-bottom:3px solid transparent;
    transition:all .15s ease;
  }
  nav.tabs button:hover{color:var(--ink);}
  nav.tabs button.active{color:var(--ink); border-bottom:3px solid var(--magenta); background:var(--bg-panel);}

  .panel{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:14px;
    padding:22px;
  }

  /* ---------- Dashboard ---------- */
  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px;}
  .stat-card{
    background:linear-gradient(160deg, var(--bg-raised), var(--bg-panel-2));
    border:1px solid var(--line); border-radius:12px; padding:16px 18px; position:relative; overflow:hidden;
  }
  .stat-card .num{font-family:'Bebas Neue'; font-size:38px; line-height:1;}
  .stat-card .lbl{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-top:6px;}
  .stat-card.accent-magenta .num{color:var(--magenta);}
  .stat-card.accent-cyan .num{color:var(--cyan);}
  .stat-card.accent-gold .num{color:var(--gold);}
  .stat-card.accent-green .num{color:var(--green);}
  .stat-card.accent-red .num{color:var(--red);}

  .cat-bars{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
  .cat-bar-row{display:flex; align-items:center; gap:10px;}
  .cat-bar-row .swatch{width:14px; height:14px; border-radius:4px; flex-shrink:0;}
  .swatch.besar{background:var(--besar);}
  .swatch.kecil{background:var(--kecil);}
  .swatch.sedang{background:var(--sedang);}
  .swatch.meja{background:var(--meja);}
  .cat-bar-row .name{width:150px; font-size:13px; color:var(--ink-dim); flex-shrink:0;}
  .cat-bar-track{flex:1; height:10px; background:var(--bg-raised); border-radius:6px; overflow:hidden;}
  .cat-bar-fill{height:100%; border-radius:6px;}
  .cat-bar-fill.besar{background:var(--besar);}
  .cat-bar-fill.kecil{background:var(--kecil);}
  .cat-bar-fill.sedang{background:var(--sedang);}
  .cat-bar-fill.meja{background:var(--meja);}
  .cat-bar-row .count{width:70px; text-align:right; font-family:'JetBrains Mono'; font-size:12px; color:var(--ink-faint);}

  .upcoming-list{display:flex; flex-direction:column; gap:8px;}
  .upcoming-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--bg-raised); border:1px solid var(--line-soft); border-radius:10px; padding:10px 14px;
  }
  .upcoming-item .who{font-weight:600;}
  .upcoming-item .meta{font-size:12px; color:var(--ink-faint);}
  .pill{padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;}
  .pill.confirmed{background:#1aa15c1a; color:var(--green); border:1px solid #1aa15c55;}
  .pill.pending{background:#e08a1e1a; color:var(--gold); border:1px solid #e08a1e55;}
  .pill.cancelled{background:#e0435c1a; color:var(--red); border:1px solid #e0435c55;}

  /* ---------- Floor plan (denah) ---------- */
  .plan-wrap{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;}
  .plan-stage-scroll{flex:1; min-width:0; border-radius:16px;}
  .plan-hint{
    display:flex; align-items:center; justify-content:center; gap:6px;
    text-align:center; font-size:11px; color:var(--ink-faint); padding:6px 0 10px;
  }

  .denah-shell{
    width:100%; max-width:780px; margin:0 auto;
    background:
      radial-gradient(ellipse 900px 500px at 50% 0%, rgba(120,40,140,.35), transparent 60%),
      radial-gradient(ellipse 700px 600px at 10% 100%, rgba(80,20,90,.4), transparent 60%),
      radial-gradient(ellipse 700px 600px at 90% 40%, rgba(60,15,80,.35), transparent 60%),
      linear-gradient(180deg, #0a0512, #2a0e2e 55%, #3d1029);
    border:1px solid rgba(120,90,160,.35); border-radius:18px;
    padding:16px;
    --bracket-line:#3aa0e0; --bracket-glow:rgba(58,160,224,.55);
  }
  .layout{
    position:relative; width:100%;
    aspect-ratio:904/1150;
    container-type:inline-size; container-name:chart;
    background:radial-gradient(circle at 15% 92%, rgba(180,60,140,.18), transparent 40%), rgba(20,8,28,.55);
    border-radius:12px; overflow:hidden;
  }
  .fire{
    position:absolute; left:0; bottom:0; width:22%; height:16%; opacity:.5;
    background:radial-gradient(circle at 40% 100%, rgba(236,72,153,.55), transparent 60%);
    filter:blur(2px);
  }
  .el.stage{
    position:absolute; left:26.60%; top:4.09%; width:46.80%; height:14.82%;
    background:linear-gradient(180deg,#5c4a52,#463642);
    border:1px solid rgba(255,255,255,.08); border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    clip-path:polygon(0 0,100% 0,100% 78%,58% 78%,58% 100%,42% 100%,42% 78%,0 78%);
  }
  .el.stage span{
    font-family:'Bebas Neue',sans-serif; font-size:clamp(16px,4.4cqw,40px);
    letter-spacing:.12em; color:#fff; text-shadow:0 0 18px rgba(255,255,255,.65), 0 0 40px rgba(160,200,255,.4);
  }
  .bar-banner, .balcon-banner{
    position:absolute;
    background:linear-gradient(180deg,#5c4a52,#463642);
    border:1px solid rgba(255,255,255,.08); border-radius:4px;
    display:flex; align-items:center; justify-content:center;
  }
  .bar-banner{left:25%; top:87%; width:50%; height:4%;}
  .balcon-banner{left:36%; top:98.2%; width:28%; height:1.6%;}
  .brackets{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .brackets g{filter:drop-shadow(0 0 5px var(--bracket-glow));}
  .bar-banner span, .balcon-banner span{
    font-family:'Bebas Neue',sans-serif; letter-spacing:.14em; color:#fff;
    text-shadow:0 0 14px rgba(255,255,255,.5); font-size:clamp(11px,3cqw,22px);
  }
  .balcon-banner span{font-size:clamp(8px,1.8cqw,13px);}

  /* seat chips */
  .chip{
    position:absolute; box-sizing:border-box; margin:0; padding:0;
    appearance:none; -webkit-appearance:none;
    border:1px solid rgba(255,255,255,.25); border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono',monospace; font-weight:700; line-height:1;
    cursor:pointer; user-select:none;
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
    font-size:clamp(8px,2.6cqw,15px);
  }
  .chip:hover{transform:translateY(-2px) scale(1.05); z-index:5;}
  .chip.circle{border-radius:50%; font-size:clamp(7px,2.1cqw,12px);}
  .chip.sel{outline:3px solid #fff; outline-offset:1px; filter:brightness(1.3); z-index:6;}
  .chip.reserved{filter:grayscale(1) brightness(.55); cursor:not-allowed;}
  .chip.reserved:hover{transform:none;}
  .chip.reserved::after{
    content:"✕"; position:absolute; color:#fff; font-size:.7em; top:1px; right:2px; text-shadow:0 0 3px #000;
  }
  .chip.besar{background:linear-gradient(180deg,#f2545b,var(--besar)); box-shadow:0 0 18px #e0435c66; color:#3a0007;}
  .chip.kecil{background:linear-gradient(180deg,#ffe27a,var(--kecil)); box-shadow:0 0 16px #ffd23f66; color:#3a2600;}
  .chip.sedang{background:linear-gradient(180deg,#ff9edd,var(--sedang)); box-shadow:0 0 16px #ff6ec966; color:#3a0026;}
  .chip.meja{background:radial-gradient(circle at 35% 30%,#7ff0e0,var(--meja)); box-shadow:0 0 14px #2dd9b866; color:#00332c;}

  .denah-shell .legend{
    display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .denah-shell .legend .item{display:flex; align-items:center; gap:8px; font-size:12px; color:#d8cbe8; white-space:nowrap;}
  .denah-shell .legend .sw{width:14px; height:14px; border-radius:4px; flex-shrink:0;}
  .denah-shell .legend .sw.circ{border-radius:50%;}
  .denah-shell .legend .sw.besar{background:var(--besar);}
  .denah-shell .legend .sw.kecil{background:var(--kecil);}
  .denah-shell .legend .sw.sedang{background:var(--sedang);}
  .denah-shell .legend .sw.meja{background:var(--meja);}
  .denah-shell .legend .sw.reserved-sw{background:#333; opacity:.5;}

  /* Posisi tiap kursi/meja (persentase) — ditulis sebagai class CSS,
     BUKAN inline style, supaya tidak diblokir Content-Security-Policy
     'style-src' di server (banyak hosting mengaktifkan ini secara default).
     Class .p-ID hanya berisi left/top/width/height; position:absolute
     sudah ada di masing-masing base class (.chip, .el.stage, dst). */
  .p-5{left:6.38%; top:9.94%; width:6.24%; height:6.63%;}
  .p-4{left:6.38%; top:23.43%; width:6.24%; height:6.63%;}
  .p-3{left:6.38%; top:36.94%; width:6.24%; height:6.63%;}
  .p-2{left:6.38%; top:50.44%; width:6.24%; height:6.63%;}
  .p-1{left:6.38%; top:63.94%; width:6.24%; height:6.63%;}
  .p-9{right:6.38%; top:23.93%; width:6.24%; height:6.63%;}
  .p-8{right:6.38%; top:37.44%; width:6.24%; height:6.63%;}
  .p-7{right:6.38%; top:50.94%; width:6.24%; height:6.63%;}
  .p-6{right:6.38%; top:64.44%; width:6.24%; height:6.63%;}
  .p-D10{right:2.01%; top:7.51%; width:3.59%; aspect-ratio:1;}
  .p-D9{right:2.01%; top:13.01%; width:3.59%; aspect-ratio:1;}
  .p-D8{right:2.01%; top:18.51%; width:3.59%; aspect-ratio:1;}
  .p-D7{right:9.01%; top:18.51%; width:3.59%; aspect-ratio:1;}
  .p-D1{left:20.51%; top:20.01%; width:3.59%; aspect-ratio:1;}
  .p-D2{left:27.01%; top:20.01%; width:3.59%; aspect-ratio:1;}
  .p-D3{left:29.51%; top:23.51%; width:3.59%; aspect-ratio:1;}
  .p-D4{left:63.51%; top:21.51%; width:3.59%; aspect-ratio:1;}
  .p-D5{left:69.51%; top:20.01%; width:3.59%; aspect-ratio:1;}
  .p-D6{left:76.01%; top:20.01%; width:3.59%; aspect-ratio:1;}
  .p-20{left:36.71%; top:26.47%; width:8.58%; height:3.35%;}
  .p-21{left:36.71%; top:34.47%; width:8.58%; height:3.35%;}
  .p-22{left:36.71%; top:45.47%; width:8.58%; height:3.35%;}
  .p-19{left:23.88%; top:28.44%; width:6.24%; height:6.63%;}
  .p-18{left:23.88%; top:35.93%; width:6.24%; height:6.63%;}
  .p-17{left:23.88%; top:43.43%; width:6.24%; height:6.63%;}
  .p-16{left:23.88%; top:50.93%; width:6.24%; height:6.63%;}
  .p-15{left:35.71%; top:55.33%; width:8.58%; height:3.35%;}
  .p-25{left:54.71%; top:26.47%; width:8.58%; height:3.35%;}
  .p-24{left:54.71%; top:34.47%; width:8.58%; height:3.35%;}
  .p-23{left:54.71%; top:45.47%; width:8.58%; height:3.35%;}
  .p-10{left:69.88%; top:28.44%; width:6.24%; height:6.63%;}
  .p-11{left:69.88%; top:35.93%; width:6.24%; height:6.63%;}
  .p-12{left:69.88%; top:43.43%; width:6.24%; height:6.63%;}
  .p-13{left:69.88%; top:50.93%; width:6.24%; height:6.63%;}
  .p-14{left:55.71%; top:55.33%; width:8.58%; height:3.35%;}
  .p-31{left:26.71%; top:64.72%; width:5.07%; aspect-ratio:1;}
  .p-30{left:33.72%; top:64.72%; width:5.07%; aspect-ratio:1;}
  .p-29{left:40.72%; top:64.72%; width:5.07%; aspect-ratio:1;}
  .p-32{left:26.71%; top:71.22%; width:5.07%; aspect-ratio:1;}
  .p-33{left:33.72%; top:71.22%; width:5.07%; aspect-ratio:1;}
  .p-34{left:40.72%; top:71.22%; width:5.07%; aspect-ratio:1;}
  .p-43{left:26.71%; top:77.72%; width:5.07%; aspect-ratio:1;}
  .p-42{left:33.72%; top:77.72%; width:5.07%; aspect-ratio:1;}
  .p-41{left:40.72%; top:77.72%; width:5.07%; aspect-ratio:1;}
  .p-28{left:55.22%; top:64.72%; width:5.07%; aspect-ratio:1;}
  .p-27{left:62.23%; top:64.72%; width:5.07%; aspect-ratio:1;}
  .p-26{left:69.23%; top:64.72%; width:5.07%; aspect-ratio:1;}
  .p-35{left:55.22%; top:71.22%; width:5.07%; aspect-ratio:1;}
  .p-36{left:62.22%; top:71.22%; width:5.07%; aspect-ratio:1;}
  .p-37{left:69.22%; top:71.22%; width:5.07%; aspect-ratio:1;}
  .p-40{left:55.22%; top:77.72%; width:5.07%; aspect-ratio:1;}
  .p-39{left:62.22%; top:77.72%; width:5.07%; aspect-ratio:1;}
  .p-38{left:69.22%; top:77.72%; width:5.07%; aspect-ratio:1;}
  .p-B7{left:15.53%; top:76.03%; width:3.74%; aspect-ratio:1;}
  .p-B11{left:9.03%; top:75.83%; width:3.74%; aspect-ratio:1;}
  .p-B8{left:15.53%; top:80.03%; width:3.74%; aspect-ratio:1;}
  .p-B10{left:9.03%; top:79.83%; width:3.74%; aspect-ratio:1;}
  .p-B9{left:12.53%; top:84.03%; width:3.74%; aspect-ratio:1;}
  .p-B6{left:84.53%; top:77.53%; width:3.74%; aspect-ratio:1;}
  .p-B1{left:91.53%; top:77.53%; width:3.74%; aspect-ratio:1;}
  .p-B5{left:84.53%; top:81.03%; width:3.74%; aspect-ratio:1;}
  .p-B2{left:91.53%; top:81.03%; width:3.74%; aspect-ratio:1;}
  .p-B4{left:84.53%; top:84.53%; width:3.74%; aspect-ratio:1;}
  .p-B3{left:91.53%; top:84.53%; width:3.74%; aspect-ratio:1;}
  .p-BAL3{left:38.21%; top:93.08%; width:8.58%; height:3.35%;}
  .p-BAL2{left:53.21%; top:93.08%; width:8.58%; height:3.35%;}
  .p-BAL1{left:68.21%; top:93.08%; width:8.58%; height:3.35%;}



  /* side panel */
  .side-panel{width:340px; display:flex; flex-direction:column; gap:14px;}
  .card{background:var(--bg-panel-2); border:1px solid var(--line); border-radius:14px; padding:18px;}
  .card h3{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin-bottom:12px;}

  .selection-list{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; min-height:26px;}
  .sel-tag{
    background:var(--bg-raised); border:1px solid var(--line); border-radius:20px; padding:4px 10px 4px 12px;
    font-size:12px; display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono';
  }
  .sel-tag button{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:13px; padding:0;}
  .sel-tag button:hover{color:var(--red);}
  .sel-dot{width:9px; height:9px; border-radius:3px; display:inline-block;}
  .sel-dot.besar{background:var(--besar);}
  .sel-dot.kecil{background:var(--kecil);}
  .sel-dot.sedang{background:var(--sedang);}
  .sel-dot.meja{background:var(--meja);}

  .cap-readout{font-family:'Bebas Neue'; font-size:30px; color:var(--gold);}
  .price-readout{font-family:'Bebas Neue'; font-size:22px; color:var(--green); margin-top:2px;}
  .price-readout small{font-family:'Space Grotesk'; font-size:11px; color:var(--ink-faint); margin-left:6px;}

  /* ---------- Kelola Harga ---------- */
  .price-base-list{display:flex; flex-direction:column; gap:8px;}
  .price-base-row{display:flex; align-items:center; gap:10px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px;}
  .price-base-row .name{flex:1; font-size:13px;}
  .price-base-row .price-input{width:130px; flex:none;}
  .schedule-list{display:flex; flex-direction:column; gap:8px;}
  .schedule-row{display:flex; align-items:center; gap:10px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px;}
  .schedule-info{flex:1; font-size:13px;}
  .cap-readout small{font-family:'Space Grotesk'; font-size:12px; color:var(--ink-faint); font-weight:400;}

  /* forms */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .form-grid .full{grid-column:1 / -1;}
  label.f{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:5px;}
  input.f, select.f, textarea.f{
    width:100%; background:var(--bg-raised); border:1px solid var(--line); border-radius:8px;
    padding:9px 11px; color:var(--ink); font-family:'Space Grotesk'; font-size:13px; outline:none;
  }
  input.f:focus, select.f:focus, textarea.f:focus{border-color:var(--magenta);}
  textarea.f{resize:vertical; min-height:50px;}

  .btn{
    border:none; border-radius:9px; padding:10px 16px; font-weight:600; font-size:13px; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px; transition:filter .12s ease, transform .12s ease;
  }
  .btn:hover{filter:brightness(1.12);}
  .btn:active{transform:scale(.97);}
  .btn.primary{background:linear-gradient(135deg,var(--magenta),#c81e8a); color:#fff;}
  .btn.secondary{background:var(--bg-raised); color:var(--ink); border:1px solid var(--line);}
  .btn.ghost{background:transparent; color:var(--ink-faint); border:1px solid var(--line);}
  .btn.danger{background:#fdecee; color:var(--red); border:1px solid #f3b4bd;}
  .btn.block{width:100%; justify-content:center;}
  .btn.sm{padding:6px 10px; font-size:12px; border-radius:7px;}
  .btn:disabled{opacity:.4; cursor:not-allowed;}
  .btn-row{display:flex; gap:8px; margin-top:6px;}

  /* Reservation detail popup content */
  .detail-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13px;}
  .detail-row span:first-child{color:var(--ink-faint);}

  /* ---------- List view ---------- */
  .list-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center;}
  .search-box{
    flex:1; min-width:200px; display:flex; align-items:center; gap:8px;
    background:var(--bg-raised); border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  }
  .search-box input{background:transparent; border:none; outline:none; color:var(--ink); width:100%; font-size:13px;}

  table.res-table{width:100%; border-collapse:collapse; font-size:13px;}
  table.res-table th{
    text-align:left; padding:10px 12px; color:var(--ink-faint); text-transform:uppercase; font-size:10px;
    letter-spacing:.06em; border-bottom:1px solid var(--line); cursor:pointer; white-space:nowrap;
  }
  table.res-table th:hover{color:var(--ink);}
  table.res-table th.active-sort{color:var(--magenta);}
  table.res-table td{padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
  table.res-table tr:hover td{background:var(--bg-raised);}
  .date-group-row td{
    padding:8px 12px; background:var(--bg-raised); border-bottom:1px solid var(--line);
    font-family:'JetBrains Mono'; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-dim);
  }
  .date-group-row.is-today td{color:var(--magenta); background:#1d6fe014;}
  .date-group-row:hover td{background:var(--bg-raised);}
  .date-group-row.is-today:hover td{background:#1d6fe014;}
  .table-tag{
    display:inline-block; padding:2px 7px; border-radius:5px; font-size:10px; font-weight:700;
    margin:1px 3px 1px 0; font-family:'JetBrains Mono'; color:#12233d;
  }
  .table-tag.besar{background:var(--besar);}
  .table-tag.kecil{background:var(--kecil);}
  .table-tag.sedang{background:var(--sedang);}
  .table-tag.meja{background:var(--meja);}
  .tags-row{margin-bottom:10px;}
  .wa-link{
    display:inline-flex; align-items:center; gap:5px; color:var(--green); text-decoration:none; font-weight:600;
  }
  .wa-link:hover{text-decoration:underline;}
  .wa-link .icon{color:var(--green);}
  .row-actions{display:flex; gap:6px;}
  .icon-btn{
    background:var(--bg-raised); border:1px solid var(--line); border-radius:7px; width:30px; height:30px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-dim); padding:0;
  }
  .icon-btn:hover{color:var(--magenta); border-color:var(--magenta);}
  .icon-btn .icon{margin:0;}
  .empty-state{text-align:center; padding:50px 20px; color:var(--ink-faint);}
  .empty-state .big{display:flex; justify-content:center; margin-bottom:10px; color:var(--ink-faint); opacity:.7;}

  /* modal */
  .modal-overlay{
    position:fixed; inset:0; background:#0f2544aa; backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
  }
  .modal{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:24px;
    max-width:520px; width:100%; max-height:88vh; overflow-y:auto;
  }
  .modal.narrow{max-width:380px;}
  .modal.medium{max-width:400px;}
  .modal h2{font-family:'Bebas Neue'; font-size:26px; margin-bottom:4px; letter-spacing:.03em;}
  .modal .sub{font-size:12px; color:var(--ink-faint); margin-bottom:18px;}
  .modal-close{float:right; background:none; border:none; color:var(--ink-faint); font-size:20px; cursor:pointer;}

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:var(--bg-panel); border:1px solid var(--magenta); border-radius:10px;
    padding:12px 20px; font-size:13px; z-index:200; box-shadow:0 8px 30px #10254433;
    display:flex; align-items:center; gap:10px;
  }


  /* utility classes (CSP: 'style-src' di hosting memblokir style="..." inline,
     jadi semua nilai dinamis/spasi yang dulu inline dipindah jadi class di sini) */
  .loading-msg{padding:80px; text-align:center; color:var(--ink-faint);}
  .mt-8{margin-top:8px;}
  .mt-10{margin-top:10px;}
  .mt-16{margin-top:16px;}
  .mt-20{margin-top:20px;}
  .mb-14{margin-bottom:14px;}
  select.f.auto{width:auto;}
  .table-scroll{overflow-x:auto;}
  .notes-cell{max-width:160px; color:var(--ink-faint); font-size:12px;}
  .dash-row{display:flex; gap:24px; flex-wrap:wrap;}
  .dash-col{flex:1; min-width:320px;}
  .export-row{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end;}
  .export-row.tight{gap:10px;}
  .v-divider{width:1px; align-self:stretch; background:var(--line-soft);}

  /* lebar progress bar okupansi (0-100%), dulu inline width:X% */
  .pct-0{width:0%;}
  .pct-1{width:1%;}
  .pct-2{width:2%;}
  .pct-3{width:3%;}
  .pct-4{width:4%;}
  .pct-5{width:5%;}
  .pct-6{width:6%;}
  .pct-7{width:7%;}
  .pct-8{width:8%;}
  .pct-9{width:9%;}
  .pct-10{width:10%;}
  .pct-11{width:11%;}
  .pct-12{width:12%;}
  .pct-13{width:13%;}
  .pct-14{width:14%;}
  .pct-15{width:15%;}
  .pct-16{width:16%;}
  .pct-17{width:17%;}
  .pct-18{width:18%;}
  .pct-19{width:19%;}
  .pct-20{width:20%;}
  .pct-21{width:21%;}
  .pct-22{width:22%;}
  .pct-23{width:23%;}
  .pct-24{width:24%;}
  .pct-25{width:25%;}
  .pct-26{width:26%;}
  .pct-27{width:27%;}
  .pct-28{width:28%;}
  .pct-29{width:29%;}
  .pct-30{width:30%;}
  .pct-31{width:31%;}
  .pct-32{width:32%;}
  .pct-33{width:33%;}
  .pct-34{width:34%;}
  .pct-35{width:35%;}
  .pct-36{width:36%;}
  .pct-37{width:37%;}
  .pct-38{width:38%;}
  .pct-39{width:39%;}
  .pct-40{width:40%;}
  .pct-41{width:41%;}
  .pct-42{width:42%;}
  .pct-43{width:43%;}
  .pct-44{width:44%;}
  .pct-45{width:45%;}
  .pct-46{width:46%;}
  .pct-47{width:47%;}
  .pct-48{width:48%;}
  .pct-49{width:49%;}
  .pct-50{width:50%;}
  .pct-51{width:51%;}
  .pct-52{width:52%;}
  .pct-53{width:53%;}
  .pct-54{width:54%;}
  .pct-55{width:55%;}
  .pct-56{width:56%;}
  .pct-57{width:57%;}
  .pct-58{width:58%;}
  .pct-59{width:59%;}
  .pct-60{width:60%;}
  .pct-61{width:61%;}
  .pct-62{width:62%;}
  .pct-63{width:63%;}
  .pct-64{width:64%;}
  .pct-65{width:65%;}
  .pct-66{width:66%;}
  .pct-67{width:67%;}
  .pct-68{width:68%;}
  .pct-69{width:69%;}
  .pct-70{width:70%;}
  .pct-71{width:71%;}
  .pct-72{width:72%;}
  .pct-73{width:73%;}
  .pct-74{width:74%;}
  .pct-75{width:75%;}
  .pct-76{width:76%;}
  .pct-77{width:77%;}
  .pct-78{width:78%;}
  .pct-79{width:79%;}
  .pct-80{width:80%;}
  .pct-81{width:81%;}
  .pct-82{width:82%;}
  .pct-83{width:83%;}
  .pct-84{width:84%;}
  .pct-85{width:85%;}
  .pct-86{width:86%;}
  .pct-87{width:87%;}
  .pct-88{width:88%;}
  .pct-89{width:89%;}
  .pct-90{width:90%;}
  .pct-91{width:91%;}
  .pct-92{width:92%;}
  .pct-93{width:93%;}
  .pct-94{width:94%;}
  .pct-95{width:95%;}
  .pct-96{width:96%;}
  .pct-97{width:97%;}
  .pct-98{width:98%;}
  .pct-99{width:99%;}
  .pct-100{width:100%;}

  @media(max-width:960px){
    .plan-wrap{flex-direction:column;}
    .side-panel{width:100%;}
    .plan-stage-scroll{min-width:0;}
  }

  /* ---------- Tablet ---------- */
  @media(max-width:768px){
    #app{padding:12px 12px 60px;}
    header.top{padding:14px 16px;}
    .brand h1{font-size:26px;}
    .stat-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
    .form-grid{grid-template-columns:1fr;}
    .panel{padding:16px;}
    nav.tabs{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;}
    nav.tabs button{padding:10px 14px; white-space:nowrap; font-size:13px;}
    table.res-table{font-size:12px;}
    .modal{padding:18px;}
  }

  /* ---------- Handphone ---------- */
  @media(max-width:480px){
    #app{padding:8px 8px 50px;}
    header.top{flex-direction:column; align-items:stretch; padding:14px;}
    .brand{justify-content:center;}
    .top-actions{justify-content:center; width:100%;}
    .live-clock{width:100%; text-align:center; font-size:12px;}
    .date-picker{flex:1; justify-content:center;}
    .btn.primary#new-res-btn{width:100%;}
    .gro-badge{flex:1; justify-content:center;}
    .gro-controls{width:100%; border-left:none; padding-left:0; margin-left:0; padding-top:10px; border-top:1px solid var(--line-soft); justify-content:center; flex-wrap:wrap;}
    .brand h1{font-size:22px;}
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .stat-card .num{font-size:28px;}
    .list-toolbar{flex-direction:column; align-items:stretch;}
    .list-toolbar .btn{width:100%; justify-content:center;}
    .plan-hint{display:flex;}
    .modal{max-width:100%; border-radius:12px; padding:16px;}
    .btn-row{flex-direction:column;}
    .btn-row .btn:not(.block){width:100%; justify-content:center;}
    .cat-bar-row .name{width:100px; font-size:12px;}
    table.res-table th, table.res-table td{padding:8px 8px;}

    /* Denah baru sudah otomatis menyesuaikan lebar (persentase + aspect-ratio),
       jadi cukup rapatkan sedikit padding shell & legend untuk layar kecil. */
    .denah-shell{padding:10px;}
    .denah-shell .legend{gap:6px 12px;}
    .denah-shell .legend .item{font-size:10.5px;}
  }