/* Dapur Senja — F&B "all delivery apps in one core" demo (placeholder brand) */
:root{
  --ink:#2a2622; --ink-soft:#4a443c; --muted:#8d8478; --line:#ece3d6;
  --bg:#f6f1ea; --card:#ffffff;
  --brand:#c9622e; --brand-dark:#a44e22; --sand:#caa46a; --herb:#3f7d5a;
  --ok:#2f8f5b; --warn:#e0911f; --danger:#c0392b;
  --gofood:#00aa13; --grab:#00b14f; --shopee:#ee4d2d; --dinein:#4a443c;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;padding-bottom:84px;line-height:1.55;}
.demo-banner{background:var(--ink);color:#f5efe6;text-align:center;padding:8px;font-size:.8rem;letter-spacing:.04em;}
.demo-banner b{color:var(--sand);}

/* header */
.topbar{background:rgba(246,241,234,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;}
.topbar .in{max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem;letter-spacing:-.01em;}
.brand .mk{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--sand));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.topbar .meta{color:var(--muted);font-size:.86rem;display:flex;align-items:center;gap:14px;}
.live{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ok);}
.live .d{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(47,143,91,.5);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,143,91,.5);}70%{box-shadow:0 0 0 7px rgba(47,143,91,0);}100%{box-shadow:0 0 0 0 rgba(47,143,91,0);}}

.wrap{max-width:1180px;margin:0 auto;padding:26px 28px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
.page-head h1{font-family:'Fraunces',serif;font-weight:600;font-size:1.7rem;}
.page-head .sub{color:var(--muted);font-size:.9rem;margin-top:2px;}
.chip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:.84rem;font-weight:600;}

/* channel badges */
.ch{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.84rem;}
.ch .ic{width:22px;height:22px;border-radius:6px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;flex:none;}
.ch.gofood .ic{background:var(--gofood);} .ch.grab .ic{background:var(--grab);}
.ch.shopee .ic{background:var(--shopee);} .ch.dinein .ic{background:var(--dinein);}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;}
.kpi .lbl{color:var(--muted);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.kpi .val{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;margin-top:5px;}
.kpi .chg{font-size:.77rem;font-weight:600;margin-top:2px;color:var(--muted);}
.kpi .chg.up{color:var(--ok);} .kpi .chg.dn{color:var(--danger);}

/* panels */
.grid{display:grid;gap:18px;}
.g-2{grid-template-columns:1fr 1fr;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px;}
.panel h2{font-size:1.02rem;font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:8px;}
.panel .note{color:var(--muted);font-size:.82rem;margin-bottom:14px;}

/* tables */
table{width:100%;border-collapse:collapse;}
th,td{text-align:right;padding:10px 9px;border-bottom:1px solid var(--line);font-size:.86rem;white-space:nowrap;font-variant-numeric:tabular-nums;}
th{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
th:first-child,td:first-child{text-align:left;}
tbody tr:last-child td{border-bottom:none;}
tfoot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:none;padding-top:12px;}
.tag{padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:700;}
.tag.new{background:#eaf1ff;color:#2f6fed;} .tag.cooking{background:#fff3df;color:var(--warn);}
.tag.ready{background:#e7f3ff;color:#0d72c4;} .tag.done{background:#e4f7ee;color:var(--ok);}
.tag.settled{background:#e4f7ee;color:var(--ok);} .tag.pending{background:#fff3df;color:var(--warn);}

/* order feed */
.orders{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.order{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 15px;border-top:4px solid var(--line);}
.order.gofood{border-top-color:var(--gofood);} .order.grab{border-top-color:var(--grab);}
.order.shopee{border-top-color:var(--shopee);} .order.dinein{border-top-color:var(--dinein);}
.order .o-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.order .o-id{font-weight:700;font-size:.9rem;}
.order .o-items{font-size:.85rem;color:var(--ink-soft);margin:6px 0;}
.order .o-items b{font-weight:600;}
.order .o-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.order .o-total{font-weight:700;}
.order .o-time{color:var(--muted);font-size:.76rem;}

/* kitchen display */
.kds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.kds .col{background:#f0e9df;border-radius:14px;padding:12px;}
.kds .col h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:10px;padding:0 4px;display:flex;justify-content:space-between;}
.ticket{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:11px;border-left:4px solid var(--line);}
.ticket.gofood{border-left-color:var(--gofood);} .ticket.grab{border-left-color:var(--grab);}
.ticket.shopee{border-left-color:var(--shopee);} .ticket.dinein{border-left-color:var(--dinein);}
.ticket .t-top{display:flex;justify-content:space-between;font-weight:700;font-size:.85rem;margin-bottom:6px;}
.ticket ul{list-style:none;font-size:.84rem;color:var(--ink-soft);}
.ticket li{padding:2px 0;} .ticket li b{font-weight:700;color:var(--ink);}
.ticket .t-time{font-size:.74rem;color:var(--muted);margin-top:6px;}
.ticket .t-time.late{color:var(--danger);font-weight:700;}

.pos{font-weight:700;} .pos.up{color:var(--ok);}
.money{font-variant-numeric:tabular-nums;}
.flow{display:flex;align-items:stretch;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:22px;overflow-x:auto;}
.flow .node{flex:1;min-width:140px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fcfaf6;}
.flow .node .t{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;}
.flow .node .v{font-weight:600;margin-top:3px;font-size:.9rem;}
.flow .node small{color:var(--muted);font-size:.75rem;}
.flow .node.core{border-left:3px solid var(--brand);background:#fbf0e9;}
.flow .arw{display:flex;align-items:center;color:var(--muted);font-size:1.2rem;}

@media(max-width:900px){.kpis{grid-template-columns:1fr 1fr;}.g-2{grid-template-columns:1fr;}.kds{grid-template-columns:1fr;}}