:root{
  --bg:#0a1120;--panel:#111b2d;--panel2:#0d1626;--line:#26354c;--text:#f4f7fb;--muted:#93a4ba;
  --blue:#67aefc;--blue2:#2f7fd8;--green:#2bd88f;--red:#ff6b77;--amber:#f3b94f;--violet:#a96df4;
}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}.demo-banner{position:sticky;top:0;z-index:50;background:#09111e;border-bottom:1px solid #223149;padding:7px 16px;text-align:center;color:#a8b8ca;font-size:12px;letter-spacing:.08em}.app-shell{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 30px)}.sidebar{background:#0b1321;border-right:1px solid #1e2b40;padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:30px;height:calc(100vh - 30px)}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px}.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#f1b84f,#c88423)}.brand strong{display:block;font-size:20px}.brand span{font-size:12px;color:var(--muted)}nav{display:flex;flex-direction:column;gap:5px}.nav-item{border:0;background:transparent;color:#b7c3d3;text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer}.nav-item:hover,.nav-item.active{background:#1b2c49;color:#fff}.sidebar-footer{margin-top:auto;color:#8fa0b5;font-size:13px;padding:8px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px}.online{background:var(--green);box-shadow:0 0 12px var(--green)}.main{padding:24px 30px 48px;min-width:0}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:22px}.eyebrow{font-size:11px;letter-spacing:.16em;color:#7793ba;text-transform:uppercase}.topbar h1{margin:5px 0 0;font-size:32px}.top-actions{display:flex;gap:9px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:#131f32;color:white;padding:10px 14px;border-radius:10px;font-weight:650;cursor:pointer}.btn:hover{filter:brightness(1.08)}.btn.primary{border-color:#6fb8ff;background:linear-gradient(180deg,#6db6ff,#4a94e9);color:#08111e}.btn.ghost{background:#0e1828}.btn.full{width:100%;margin-top:14px}.view{display:none}.view.active{display:block}.hero-card,.panel,.toolbar-card,.stat,.price-card{border:1px solid var(--line);background:linear-gradient(180deg,#121d30,#10192a);border-radius:16px}.hero-card{padding:24px;display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:14px}.hero-card h2{font-size:30px;margin:10px 0 8px}.hero-card p{max-width:750px;color:var(--muted);line-height:1.55}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:12px;border:1px solid transparent}.pill.info{background:#16355b;color:#87c4ff;border-color:#22558d}.pill.success{background:#103f32;color:#55e5aa;border-color:#176749}.pill.muted{background:#1a2332;color:#9bacbf;border-color:#2b394e}.pill.warn{background:#473317;color:#ffc865;border-color:#6f5222}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.stat{padding:18px}.stat span,.stat small{display:block;color:var(--muted)}.stat strong{display:block;font-size:28px;margin:10px 0 6px}.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.panel{padding:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-head h3{margin:4px 0 0}.timeline{display:flex;flex-direction:column;gap:10px}.timeline-row{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid #22324a;border-radius:11px;background:#0d1727}.timeline-row.done{border-color:#1c6148;background:#0d221d}.timeline-index{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#1d2b40;color:#9db0c6}.timeline-row.done .timeline-index{background:#15513c;color:#6df0b5}.timeline-row strong{display:block}.timeline-row small{color:var(--muted)}.customer-card{display:flex;gap:14px;align-items:center}.avatar{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#337bd2,#795fc8);display:grid;place-items:center;font-weight:800}.customer-meta{display:flex;flex-direction:column;gap:5px;color:var(--muted)}.customer-meta strong{color:white}.narration{margin-top:16px;padding:12px;border-radius:10px;background:#0b1525;border:1px solid #22344e;color:#bdd0e5;line-height:1.45}.toolbar-card{display:flex;gap:12px;align-items:flex-end;padding:14px;margin-bottom:12px;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;color:var(--muted)}.field input,.field select{background:#0d1727;border:1px solid #2a3b54;color:white;border-radius:9px;padding:10px 12px}.legend{display:flex;gap:14px;margin-left:auto;align-items:center;color:var(--muted);font-size:13px}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}.legend-dot.free{background:var(--green)}.legend-dot.reserved{background:var(--blue)}.legend-dot.occupied{background:var(--red)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #223148;font-size:14px}th{color:#89a0be;font-size:12px;text-transform:uppercase;letter-spacing:.05em}td small{display:block;color:var(--muted);margin-top:4px}.floor-panel{padding:18px}.floor-grid{min-height:500px;border-radius:14px;background-image:linear-gradient(#152238 1px,transparent 1px),linear-gradient(90deg,#152238 1px,transparent 1px);background-size:32px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:56px 90px;padding:34px 70px;align-items:center}.table-node{justify-self:center;min-width:58px;height:58px;border-radius:14px;display:grid;place-items:center;border:2px solid var(--green);background:#102235;box-shadow:0 0 0 4px rgba(43,216,143,.04);font-weight:800}.table-node.round{border-radius:50%}.table-node.reserved{border-color:var(--blue);box-shadow:0 0 18px rgba(103,174,252,.25)}.table-node.occupied{border-color:var(--red);box-shadow:0 0 18px rgba(255,107,119,.2)}.table-node small{display:block;font-size:10px;color:#a7b5c7;font-weight:500}.order-items,.qr-items{display:flex;flex-direction:column;gap:9px}.order-line,.qr-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #213048}.order-line span,.qr-line span{color:#c6d2df}.total-line,.qr-summary{display:flex;justify-content:space-between;font-size:18px;padding-top:16px}.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.menu-item{padding:12px;border:1px solid #25364e;border-radius:11px;background:#0d1726}.menu-item strong{display:block}.menu-item span{color:var(--muted);font-size:13px}.kitchen-ticket{border:1px solid #2c3d56;background:#0c1626;border-radius:14px;padding:18px}.kitchen-ticket.empty{color:var(--muted);min-height:180px;display:grid;place-items:center}.ticket-head{display:flex;justify-content:space-between;margin-bottom:14px}.phone-stage{display:grid;place-items:center;padding:10px}.phone{width:min(390px,100%);border:10px solid #111827;border-radius:38px;background:#f5f7fb;color:#111827;box-shadow:0 22px 60px rgba(0,0,0,.4);overflow:hidden}.phone-notch{width:120px;height:23px;border-radius:0 0 15px 15px;background:#111827;margin:auto}.phone-content{padding:22px}.phone-content .eyebrow{color:#6f7b8c}.muted-text{color:#718096}.phone .btn.ghost{background:white;color:#172033;border-color:#d9e1ec}.phone .btn.primary{color:#06101f}.qr-line{border-color:#dfe5ec}.qr-line span{color:#263241}.split-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:16px}.receipt-box{margin-top:12px;background:#e5fff4;border:1px solid #8fe2be;color:#12633f;padding:12px;border-radius:10px}.hidden{display:none}.history-list{display:flex;flex-direction:column;gap:9px}.history-item{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:11px;border:1px solid #223148;border-radius:10px}.history-item time{color:#82a0c7}.pricing-intro{text-align:center;padding:10px 0 22px}.pricing-intro h2{font-size:34px;margin:12px 0 6px}.pricing-intro p{color:var(--muted)}.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.price-card{padding:20px;position:relative}.price-card>span{color:#9cb0ca}.price-card strong{display:block;font-size:34px;margin:16px 0}.price-card strong small{font-size:13px;color:var(--muted)}.price-card p{color:var(--muted);line-height:1.5}.price-card.featured{border-color:#5fa9f3;box-shadow:0 0 28px rgba(103,174,252,.12)}.price-card.featured b{display:inline-block;margin-top:8px;color:#82c2ff}.toast{position:fixed;right:20px;bottom:20px;background:#17263b;border:1px solid #365177;color:#fff;padding:12px 16px;border-radius:10px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.app-shell{grid-template-columns:78px 1fr}.sidebar{padding:18px 8px}.brand div:last-child,.nav-item{font-size:0}.brand{justify-content:center}.nav-item::first-letter{font-size:16px}.sidebar-footer{display:none}.two-col{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid{grid-template-columns:repeat(2,1fr)}.floor-grid{gap:35px;padding:30px}.main{padding:20px}}
@media(max-width:650px){.demo-banner{font-size:10px}.app-shell{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;z-index:80;border-right:0;border-top:1px solid #20304a;padding:6px}.brand,.sidebar-footer{display:none}nav{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}.nav-item{padding:10px 4px;border-radius:7px;text-align:center;font-size:0}.nav-item:after{font-size:11px}.nav-item[data-view="dashboard"]:after{content:"Home"}.nav-item[data-view="reservations"]:after{content:"Boeken"}.nav-item[data-view="floor"]:after{content:"Tafels"}.nav-item[data-view="orders"]:after{content:"Order"}.nav-item[data-view="kitchen"]:after{content:"Keuken"}.nav-item[data-view="qr"]:after{content:"QR"}.nav-item[data-view="history"]:after{content:"Log"}.nav-item[data-view="pricing"]:after{content:"Prijs"}.main{padding:16px 14px 86px}.topbar{flex-direction:column}.top-actions{width:100%}.top-actions .btn{flex:1}.hero-card{align-items:flex-start;flex-direction:column}.hero-card h2{font-size:25px}.stats-grid{grid-template-columns:1fr 1fr}.floor-grid{grid-template-columns:repeat(3,1fr);gap:26px 18px;padding:24px 14px}.menu-grid,.pricing-grid{grid-template-columns:1fr}.toolbar-card{align-items:stretch}.field{flex:1;min-width:130px}.legend{width:100%;margin-left:0;flex-wrap:wrap}.split-grid{grid-template-columns:1fr}.phone{border-width:6px;border-radius:28px}}