:root{
  --bg:#0d0f14; --bg2:#12151c; --card:#181c25; --card2:#1e232e; --line:#2a303d;
  --text:#e8ebf2; --muted:#8a93a6; --accent:#ff7a1a; --accent2:#ffb347;
  --ok:#2ecc71; --warn:#f5b041; --bad:#ef5350; --info:#4aa3ff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:13px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{background:radial-gradient(1200px 500px at 85% -10%,rgba(255,122,26,.10),transparent 60%),var(--bg);min-height:100vh}
a{color:var(--accent2);text-decoration:none}
.muted{color:var(--muted)} .small{font-size:11px}

/* top bar */
.topbar{display:flex;align-items:center;gap:18px;padding:8px 18px;background:rgba(18,21,28,.92);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)}
.brand{font-size:18px;font-weight:800;color:var(--text);letter-spacing:.3px}
.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent}
.topbar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.topbar nav a{color:var(--muted);padding:6px 12px;border-radius:8px;font-weight:600;transition:.15s}
.topbar nav a:hover{color:var(--text);background:var(--card)}
.topbar nav a.on{color:#fff;background:linear-gradient(135deg,rgba(255,122,26,.35),rgba(255,179,71,.15));box-shadow:inset 0 0 0 1px rgba(255,122,26,.5)}
.who{display:flex;align-items:center;gap:8px}
.page{padding:16px 18px;max-width:1280px;margin:0 auto}

/* section header */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px;
  padding-left:10px;border-left:4px solid var(--accent)}
.section-head h2{margin:0;font-size:17px;font-weight:800}

/* cards / tiles */
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;margin-bottom:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:14px;color:var(--text);
  background:linear-gradient(145deg,var(--card2),var(--card));border:1px solid var(--line);transition:.18s}
.tile:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 22px rgba(255,122,26,.18)}
.tile .ico{font-size:26px} .tile b{font-size:14px} .tile span{color:var(--muted);font-size:11px}
.tile.soon{opacity:.45;pointer-events:none}

/* tables */
table.grid{width:100%;border-collapse:collapse;font-size:12px}
table.grid th{text-align:left;padding:5px 10px;color:var(--muted);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap}
table.grid th.nosort{cursor:default}
table.grid th.asc::after{content:" ▲";color:var(--accent)} table.grid th.desc::after{content:" ▼";color:var(--accent)}
table.grid td{padding:3px 10px;border-bottom:1px solid rgba(42,48,61,.6);vertical-align:middle}
table.grid tbody tr:hover{background:rgba(255,122,26,.06)}
td.num,th.num{text-align:right}

/* forms */
label{display:block;margin:10px 0 4px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
label.check{display:flex;align-items:center;gap:8px;text-transform:none;font-size:13px;color:var(--text)}
input,select,textarea{width:100%;padding:9px 11px;background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:9px;font:inherit;outline:none;transition:.15s}
input[type=checkbox]{width:auto}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,26,.22),0 0 14px rgba(255,122,26,.25)}
.row{display:flex;gap:8px;align-items:center} .row>*{flex:1} .row>.fit{flex:0 0 auto}

/* buttons */
.btn{display:inline-block;padding:7px 14px;border-radius:9px;border:1px solid var(--line);background:var(--card2);
  color:var(--text);font:600 12px inherit;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--accent);color:#fff}
.btn-primary{background:linear-gradient(135deg,var(--accent),#ff5e00);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(255,122,26,.35)}
.btn-primary:hover{filter:brightness(1.1);color:#fff}
.btn-danger{color:#ff8a80;border-color:rgba(239,83,80,.4)} .btn-danger:hover{background:rgba(239,83,80,.15);border-color:var(--bad)}
.btn-sm{padding:3px 9px;font-size:11px} .btn-block{display:block;width:100%;margin-top:16px;padding:11px}

/* pills */
.pill{display:inline-block;padding:1px 9px;border-radius:20px;font-size:10px;font-weight:700;border:1px solid var(--line);background:var(--card2)}
.pill.ok,.pill.free{color:var(--ok);border-color:rgba(46,204,113,.4);background:rgba(46,204,113,.1)}
.pill.off{color:var(--muted)} .pill.occupied{color:var(--bad);border-color:rgba(239,83,80,.4);background:rgba(239,83,80,.1)}
.pill.billed{color:var(--warn);border-color:rgba(245,176,65,.4);background:rgba(245,176,65,.1)}
.pill.role-manager{color:var(--accent2)} .pill.role-cashier{color:var(--info)} .pill.role-waiter{color:var(--ok)} .pill.role-kitchen{color:#c792ea}

/* tabs */
.tabs{display:flex;gap:6px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.tab{padding:8px 16px;cursor:pointer;color:var(--muted);font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--accent2);border-color:var(--accent)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:flex-start;justify-content:center;
  padding:30px 12px;overflow:auto;z-index:50}
.modal.open{display:flex}
.modal-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;width:100%;max-width:560px;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-box h3{margin:0 0 4px;font-size:16px;border-left:4px solid var(--accent);padding-left:8px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.subrow{display:flex;gap:6px;margin-bottom:6px} .subrow input,.subrow select{flex:1}
.subrow .btn{flex:0 0 auto}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label.check{margin:0;padding:4px 10px;background:var(--bg);border:1px solid var(--line);border-radius:20px;font-size:12px}

/* table board */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tbl{padding:14px;border-radius:14px;text-align:center;border:2px solid var(--line);background:linear-gradient(145deg,var(--card2),var(--card));transition:.15s}
.tbl b{display:block;font-size:20px} .tbl small{color:var(--muted)}
.tbl.free{border-color:rgba(46,204,113,.5)} .tbl.occupied{border-color:rgba(239,83,80,.6);background:linear-gradient(145deg,rgba(239,83,80,.15),var(--card))}
.tbl.billed{border-color:rgba(245,176,65,.6);background:linear-gradient(145deg,rgba(245,176,65,.15),var(--card))}

/* toasts / alert */
#toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:99}
.toast{padding:9px 14px;border-radius:9px;background:var(--card2);border:1px solid var(--ok);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.toast.err{border-color:var(--bad)}
.alert{padding:8px 12px;border-radius:9px;background:rgba(239,83,80,.12);border:1px solid rgba(239,83,80,.5);color:#ff9c97;margin-bottom:10px}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{width:100%;max-width:360px;background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:18px;padding:26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.6);text-align:center}
.login-card label,.login-card input{text-align:left}
.login-card h1{margin:4px 0 0;font-size:28px;font-weight:800}
.login-card h1 span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent}
.login-logo{font-size:44px}

@media (max-width:700px){.topbar{flex-wrap:wrap;gap:8px}.page{padding:12px}}