:root{
  --bg:#0b1020; --card:#111a33; --txt:#eaf0ff; --muted:#aab6d6;
  --b:#223058; --primary:#4c7dff; --warn:#ffb020; --danger:#ff4d6d; --ok:#2dd4bf;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--txt); }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1200px; margin:0 auto; padding:18px; }
.topbar{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--b); position:sticky; top:0; background:rgba(11,16,32,.9); backdrop-filter: blur(6px); }
.brand{ font-weight:800; letter-spacing:.3px; }
.nav a{ margin-left:10px; padding:8px 10px; border:1px solid var(--b); border-radius:10px; }
.row{ display:flex; gap:10px; align-items:center; }
.row.wrap{ flex-wrap:wrap; }
.row.space-between{ justify-content:space-between; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.grid5{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:10px; }
@media (max-width:900px){
  .grid4{ grid-template-columns:repeat(2,1fr); }
  .grid5{ grid-template-columns:repeat(2,1fr); }
  .grid2{ grid-template-columns:1fr; }
}
.card{ background:var(--card); border:1px solid var(--b); border-radius:14px; padding:14px; }
.card.mini{ padding:12px; }
.table{ width:100%; border-collapse:collapse; margin-top:10px; }
.table th,.table td{ padding:10px; border-bottom:1px solid var(--b); text-align:left; font-size:14px; }
.tableWrap{ overflow:auto; }
.actions{ display:flex; flex-wrap:wrap; gap:6px; }
.inline{ display:inline; }

label{ display:block; font-size:13px; color:var(--muted); }
input,select,textarea{
  width:100%; margin-top:6px; padding:10px; border-radius:10px;
  border:1px solid var(--b); background:#0f1730; color:var(--txt);
}
textarea{ resize:vertical; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px; border-radius:10px; border:1px solid var(--b);
  background:#0f1730; color:var(--txt); cursor:pointer;
}
.btn.primary{ background:var(--primary); border-color:transparent; color:#04102a; font-weight:700; }
.btn.warn{ background:var(--warn); border-color:transparent; color:#221300; font-weight:700; }
.btn.danger{ background:var(--danger); border-color:transparent; color:#2a0010; font-weight:700; }

.muted{ color:var(--muted); }
.pill{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--b); font-size:12px; }
.pill.ok{ background:rgba(45,212,191,.15); }
.pill.muted{ background:rgba(170,182,214,.08); }

.legend .leg{ display:inline-flex; align-items:center; gap:6px; margin-right:12px; font-size:13px; color:var(--muted); }
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot.free{ background:#2dd4bf; }
.dot.in_process{ background:#94a3b8; }
.dot.reserved{ background:#ffb020; }
.dot.confirmed{ background:#4c7dff; }
.dot.cancelled{ background:#ff4d6d; }
.dot.blocked{ background:#6b7280; }

.tablesGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
@media (max-width:1100px){ .tablesGrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .tablesGrid{ grid-template-columns:1fr; } }

.seatsRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.seat{
  width:42px; height:42px; border-radius:10px; border:1px solid var(--b);
  background:#0f1730; color:var(--txt); cursor:pointer;
  font-weight:700;
}
.seat.free{ background:rgba(45,212,191,.18); }
.seat.in_process{ background:rgba(148,163,184,.18); }
.seat.reserved{ background:rgba(255,176,32,.18); }
.seat.confirmed{ background:rgba(76,125,255,.22); }
.seat.cancelled{ background:rgba(255,77,109,.18); }
.seat.blocked{ background:rgba(107,114,128,.18); }

.modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; padding:18px; }
.modal.open{ display:block; }
.modalCard{
  max-width:1100px; margin:0 auto; background:var(--card); border:1px solid var(--b);
  border-radius:16px; padding:16px; max-height:90vh; overflow:auto;
}
.alert{ padding:10px 12px; border-radius:12px; border:1px solid var(--b); margin:10px 0; }
.alert.ok{ background:rgba(45,212,191,.12); }
.alert.warn{ background:rgba(255,176,32,.12); }
.alert.danger{ background:rgba(255,77,109,.12); }

.kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px; }
.kpi .big{ font-size:22px; font-weight:900; }
@media (max-width:700px){ .kpi{ grid-template-columns:1fr; } }