:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#475569;
  --border:#e5e7eb;
  --primary:#2563eb;

  --cols: 6;
  --gap: 18px;
  --cellH: 210px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,Arial;background:var(--bg);color:var(--text);}
.wrap{max-width:1200px;margin:0 auto;padding:18px;}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.brand{font-weight:900;font-size:20px;letter-spacing:1px;}
.brand span{color:var(--primary);}

.btn{border:0;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer;}
.btn.primary{background:var(--primary);color:#fff;}
.btn.dark{background:#111827;color:#fff;}
.btn.ghost{background:#fff;border:1px solid var(--border);color:#0b1220;}
.btn.small{padding:6px 8px;border-radius:10px;font-size:12px;line-height:1;}
.btn.warn{background:#f59e0b;color:#111827;}
.btn.danger{background:#ef4444;color:#fff;}
.btn.ok{background:#10b981;color:#062b1e;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;margin-top:12px;}
label{display:block;font-size:12px;color:#334155;font-weight:800;margin-top:10px;}
input, select, textarea{
  width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:12px;
  font-size:14px;background:#fff;
}
textarea{min-height:84px;resize:vertical;}
.row{display:flex;gap:10px;flex-wrap:wrap;}
.row>div{flex:1 1 260px;min-width:260px;}
.status{margin-top:10px;font-weight:900;}
.ok{color:#065f46;}
.bad{color:#991b1b;}
.muted{color:var(--muted);font-size:13px;}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.tab{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:#fff;cursor:pointer;font-weight:900;}
.tab.active{border-color:var(--primary);outline:2px solid rgba(37,99,235,.2);}

.gridWrap{margin-top:12px;}
.grid{
  display:grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: var(--cellH);
  gap: var(--gap);
  background:#eef2f7;
  border-radius:16px;
  padding:14px;
  border:1px solid var(--border);
}
.cell{min-width:0;}
.tableCard{
  height:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  overflow:hidden;
  position:relative;
  user-select:none;
  cursor:pointer;
}
.tableCard:hover{outline:2px solid rgba(37,99,235,.15);}

.tTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.tNo{font-weight:1000;font-size:16px;}
.tSeats{font-size:12px;color:var(--muted);font-weight:800;}

.badge{
  font-size:12px;font-weight:1000;
  padding:4px 10px;border-radius:999px;
  background:#eef2ff;color:#1e3a8a;border:1px solid #dbeafe;
  white-space:nowrap;
}
.badge.free{background:#ecfeff;color:#0369a1;border-color:#bae6fd;}
.badge.pending{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.badge.arrived{background:#dcfce7;color:#065f46;border-color:#bbf7d0;}
.badge.ended{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1;}
.badge.noshow{background:#fee2e2;color:#7f1d1d;border-color:#fecaca;}
.badge.cancelled{background:#f1f5f9;color:#334155;border-color:#cbd5e1;}

.rightBox{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap;}
.miniSelect{
  width:auto;
  padding:4px 6px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:12px;
  background:#fff;
}

.line{
  font-size:12px;font-weight:900;
  white-space:normal;
  overflow:hidden;
  background:rgba(37,99,235,.10);
  border-radius:10px;padding:6px 8px;
}
.line.arrived{background:rgba(16,185,129,.18);}
.line.pending{background:rgba(245,158,11,.22);}
.tiny{font-size:11px;color:var(--muted);}

pre{background:#0b1220;color:#e5e7eb;border-radius:16px;padding:12px;overflow:auto;font-size:12px;margin-top:12px;}
.actionsRow{display:flex;gap:8px;flex-wrap:wrap;}

.backdrop{
  position:fixed; inset:0;
  background:rgba(15,23,42,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
}
.backdrop.show{display:flex;}
.modal{
  width:min(980px, 100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  padding:14px;
  max-height: 88vh;
  overflow:auto;
}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.mtitle{font-weight:1000;font-size:16px;line-height:1.1;}
.msub{color:var(--muted);font-size:12px;margin-top:4px;}
.mclose{border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 10px;font-weight:1000;cursor:pointer;}
.mclose:hover{background:#f1f5f9;}
.hint{
  background:#f1f5f9;border:1px dashed #cbd5e1;color:#0b1220;
  border-radius:14px;padding:10px;font-size:12px;margin-top:10px;
}
.mfooter{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.mfooter .btn{flex:1 1 180px;}

.list{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.item{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.itemTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:11px;color:var(--muted);}

.twoCol{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 860px){
  .twoCol{grid-template-columns: 1fr;}
}

.crmPanel{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:#fff;
}
.crmPanel .t{font-weight:1000;margin-bottom:6px;}
.crmPanel .s{font-size:12px;color:var(--muted);line-height:1.4;}

.tablesPick{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:#fff;
  margin-top:10px;
}
.tablesPick .t{font-weight:1000;margin-bottom:6px;}
.chkGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:8px;
}
@media (max-width: 860px){
  .chkGrid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
.chk{
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  display:flex;
  gap:8px;
  align-items:flex-start;
  background:#fff;
}
.chk input{width:auto; margin-top:2px;}
.chk .k{font-weight:1000;font-size:13px;}
.chk .m{font-size:12px;color:var(--muted);}

.hide{display:none !important;}