@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{
    --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;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Space Grotesk', 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;
  }
  .dot-row{display:flex; gap:3px; align-items:center;}
  .dot{width:8px; height:8px; border-radius:50%; background:#1d6fe0; box-shadow:0 0 0 1px #ffffffcc, inset 0 -1px 1px #0002; flex-shrink:0;}
  .dot.sm{width:6px;height:6px;}

  .wall-booth{
    border:5px solid #2f6fe0; border-radius:50px; padding:12px 8px;
    display:flex; flex-direction:column; gap:10px; align-items:center;
    background:linear-gradient(180deg,#eef5fd,#ffffff);
    box-shadow:inset 0 0 16px #1d6fe01a, 0 2px 10px #1d6fe01a;
  }
  .wall-row{display:flex; align-items:center; gap:7px;}

  .inner-booth{
    border:4px solid #2f6fe0; border-radius:34px; padding:9px 7px;
    display:flex; flex-direction:column; gap:8px; align-items:center;
    background:linear-gradient(180deg,#eef5fd,#ffffff);
  }
  .inner-row{display:flex; align-items:center; gap:6px;}

  .table-bracket{
    border:4px solid #2f6fe0; border-bottom:none; border-radius:18px 18px 0 0;
    padding:8px 10px 6px; display:flex; flex-direction:column; align-items:center; gap:7px;
    background:linear-gradient(180deg,#eef5fd,transparent);
  }

  .horseshoe-block{display:flex; flex-direction:column; align-items:center; gap:8px;}
  .sedang-row{display:flex; align-items:center; gap:7px;}
  .display{font-family:'Bebas Neue', sans-serif; letter-spacing:0.04em;}
  .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;
    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;}

  .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;
  }
  .day-badge{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:8px;
    padding:6px 12px; font-size:12px; color:var(--gold); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  }

  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;}
  .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-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 ---------- */
  .plan-wrap{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;}
  .plan-stage{
    flex:1; min-width:600px;
    background:
      radial-gradient(ellipse 500px 260px at 50% 0%, #dbe9fb, transparent 60%),
      linear-gradient(160deg, #fbfdff 0%, #f0f6fd 45%, #e6f0fb 100%);
    border:1px solid var(--line); border-radius:16px; padding:26px;
    position:relative;
  }
  .stage-bar{
    text-align:center; background:linear-gradient(180deg,#2f6fe0,#1d4ed8);
    border:1px solid var(--line); border-radius:10px; padding:18px 0; margin-bottom:6px;
    font-family:'Bebas Neue'; font-size:30px; letter-spacing:.3em; color:#fff;
    text-shadow:0 0 16px #ffffff88;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
  }
  .top-markers{display:flex; justify-content:space-between; margin:8px 0 14px; padding:0 20px;}
  .top-markers .grp{display:flex; gap:6px;}

  .main-floor{display:flex; gap:10px; align-items:stretch; margin-bottom:16px;}
  .wall-col{display:flex; flex-direction:column; justify-content:space-around; gap:8px;}
  .horseshoe-row{flex:1; display:flex; gap:14px; justify-content:center;}
  .horseshoe{
    display:flex; gap:8px; align-items:flex-end;
    border:5px solid #2f6fe0; border-bottom:none; border-radius:44px 44px 0 0;
    padding:14px 12px 10px;
    background:linear-gradient(180deg,#eef5fd,transparent);
    box-shadow:inset 0 0 16px #1d6fe014;
  }
  .horseshoe .sofa-col{display:flex; flex-direction:column; gap:8px;}
  .horseshoe .table-col{display:flex; flex-direction:column; gap:18px; justify-content:center; padding:0 4px;}

  .lower-tables{
    display:flex; justify-content:center; gap:40px; margin:18px 0; flex-wrap:wrap;
  }
  .table-block{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}

  .bar-strip{
    display:flex; align-items:center; gap:14px; margin:18px 0 10px;
  }
  .bar-strip .b-cluster{display:grid; grid-template-columns:repeat(2,1fr); gap:6px;}
  .bar-strip .bar-label{
    flex:1; text-align:center; background:linear-gradient(180deg,#eef5fd,#dce9fb);
    border:1px solid var(--line); border-radius:10px; padding:10px 0;
    font-family:'Bebas Neue'; font-size:22px; letter-spacing:.4em; color:var(--ink-dim);
  }
  .stools{display:flex; gap:10px; justify-content:center; margin-bottom:10px;}
  .stool{width:16px; height:16px; border-radius:50%; background:var(--green); opacity:.55;}

  .balcony-row{display:flex; justify-content:center; gap:14px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}

  /* seat chips */
  .seat{
    position:relative;
    border:none; cursor:pointer; font-family:'JetBrains Mono',monospace; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    color:#12233d; transition:transform .12s ease, box-shadow .12s ease;
    user-select:none;
  }
  .seat:hover{transform:translateY(-2px) scale(1.05); z-index:5;}
  .seat.sel{outline:3px solid #102a4c; outline-offset:2px; transform:translateY(-2px) scale(1.08); z-index:6; box-shadow:0 0 0 5px #1d6fe033;}
  .seat.reserved{opacity:.42; filter:grayscale(.5); cursor:not-allowed;}
  .seat.reserved:hover{transform:none;}
  .seat.reserved::after{
    content:"✕"; position:absolute; color:#fff; font-size:11px; top:1px; right:2px; text-shadow:0 0 3px #000;
  }
  .seat.besar{width:44px; height:26px; border-radius:6px; background:var(--besar); font-size:11px;}
  .seat.kecil{width:38px; height:24px; border-radius:6px; background:var(--kecil); font-size:10px;}
  .seat.sedang{width:38px; height:24px; border-radius:6px; background:var(--sedang); font-size:10px;}
  .seat.meja{width:34px; height:34px; border-radius:50%; background:var(--meja); font-size:10px;}
  .seat.meja.small{width:26px; height:26px; font-size:9px;}

  .legend{
    display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft);
  }
  .legend .item{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim);}
  .legend .sw{width:16px; height:16px; border-radius:4px;}
  .legend .sw.circ{border-radius:50%;}

  /* 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);}

  .cap-readout{font-family:'Bebas Neue'; font-size:30px; color:var(--gold);}
  .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: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 td{padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
  table.res-table tr:hover td{background:var(--bg-raised);}
  .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;
  }
  .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); font-size:14px;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--magenta);}
  .empty-state{text-align:center; padding:50px 20px; color:var(--ink-faint);}
  .empty-state .big{font-size:40px; margin-bottom:10px;}

  /* 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 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;
  }

  @media(max-width:960px){
    .plan-wrap{flex-direction:column;}
    .side-panel{width:100%;}
    .plan-stage{min-width:0;}
    .main-floor{flex-direction:column;}
    .wall-col{flex-direction:row; justify-content:center;}
    .horseshoe-row{flex-direction:column; align-items:center;}
  }