:root {
  --bg: #f4f6f9;
  --side: #1e2430;
  --side2: #2a3142;
  --accent: #5b6cff;
  --accent2: #7c3aed;
  --ok: #16a34a;
  --err: #dc2626;
  --card: #fff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(15, 23, 42, .06);
  font-family: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; background: linear-gradient(180deg, var(--side), #151922);
  color: #e5e7eb; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; gap: 10px; align-items: center; padding: 22px 18px; font-weight: 700; font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand i { color: #a5b4fc; }
.sidebar nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: auto; }
.sidebar nav a {
  display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 10px;
  color: #cbd5e1; font-size: .92rem;
}
.sidebar nav a:hover, .sidebar nav a.active { background: var(--side2); color: #fff; }
.sidebar nav a.active { box-shadow: inset 3px 0 0 var(--accent); }
.side-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.06); color: #94a3b8; }
.main { flex: 1; min-width: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; background: rgba(255,255,255,.8); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.topbar h1 { margin: 0; font-size: 1.25rem; }
.content { padding: 24px 28px 40px; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
}
.stat h3 { margin: 0; font-size: 1.6rem; }
.stat p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.stat.purple { background: linear-gradient(135deg, #7c3aed, #5b6cff); color: #fff; border: 0; }
.stat.purple p { color: rgba(255,255,255,.85); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.btn, button.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 600;
}
.btn.secondary { background: #eef2ff; color: #3730a3; }
.btn.danger { background: var(--err); }
.btn.ok { background: var(--ok); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font: inherit;
}
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.form-row { margin-bottom: 14px; }
.flash { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; }
.flash.ok { background: #ecfdf5; color: #065f46; }
.flash.err { background: #fef2f2; color: #991b1b; }
.badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge.ok { background: #dcfce7; color: #166534; }
.badge.danger { background: #fee2e2; color: #991b1b; }
.badge.warn { background: #fef3c7; color: #92400e; }
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(circle at top left, #c7d2fe, transparent 40%),
              radial-gradient(circle at bottom right, #ddd6fe, transparent 35%), var(--bg);
}
.login-card { width: min(420px, 92vw); }
.muted { color: var(--muted); }
.qr-box { text-align: center; padding: 24px; }
.qr-box img { max-width: 280px; width: 100%; background: #fff; padding: 12px; border-radius: 12px; }
@media (max-width: 980px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr 1fr; }
  .sidebar { width: 72px; }
  .sidebar .brand span, .sidebar nav a span, .side-foot, .sidebar nav a { font-size: 0; }
  .sidebar nav a { justify-content: center; }
  .sidebar nav a i { font-size: 1rem; }
  .sidebar nav a::after { content: none; }
  .sidebar nav a { font-size: 0; gap: 0; }
  .sidebar nav a i { font-size: 1.05rem; }
}
.pill { display:inline-flex; padding:4px 12px; border-radius:999px; font-size:.82rem; font-weight:700; color:#fff; }
.pill.pink { background:#ec4899; }
.pill.blue { background:#2563eb; }
.pill.sky { background:#0ea5e9; }
.pill.green { background:#22c55e; }
.pill.amber { background:#f59e0b; }
.pill.red { background:#ef4444; }
.pill.gray { background:#94a3b8; }
.body-box { border-top:1px solid var(--line); padding-top:12px; margin-top:8px; }
.body-box h3 { margin:0 0 12px; }
.body-row { display:flex; gap:10px; align-items:center; margin:8px 0; flex-wrap:wrap; }
.body-row label { margin:0; min-width:180px; color:var(--muted); }
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chart-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.chart-card canvas { max-height:220px; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal .d { background:#f8fafc; border:1px solid var(--line); border-radius:8px; min-height:64px; padding:6px; font-size:.75rem; }
.cal .d.done { background:#dcfce7; border-color:#86efac; }
.cal .d.pending { background:#eff6ff; }
.cal .d.skip { background:#fee2e2; }
.cal .head { text-align:center; font-weight:700; color:var(--muted); min-height:auto; background:transparent; border:0; }
.member-photo { width:96px; height:96px; object-fit:cover; border-radius:14px; border:1px solid var(--line); }
.card-print { width:86mm; min-height:54mm; border:1px solid #222; border-radius:10px; padding:12px; background:#fff; }
/* Hotel rack attendance */
.rack-wrap { overflow:auto; max-height:70vh; border:1px solid var(--line); border-radius:12px; background:#fff; }
.rack { border-collapse:separate; border-spacing:0; min-width:100%; }
.rack th, .rack td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:4px; font-size:.72rem; text-align:center; }
.rack th { position:sticky; top:0; background:#f8fafc; z-index:2; }
.rack .sticky-col { position:sticky; left:0; background:#fff; z-index:3; text-align:left; min-width:140px; max-width:180px; padding:6px 8px; font-weight:600; }
.rack thead .sticky-col { z-index:4; background:#f1f5f9; }
.rack-cell { width:28px; height:22px; border-radius:4px; margin:0 auto; display:block; }
.rack-cell.expect { background:#fde68a; }
.rack-cell.came { background:#86efac; }
.rack-cell.miss { background:#fca5a5; }
.rack-cell.inside { background:#60a5fa; }
.rack-cell.empty { background:#f1f5f9; }
.rack-legend { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px; font-size:.85rem; }
.rack-legend i { display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:4px; vertical-align:middle; }
/* Week planner drag-drop */
.week-planner { display:grid; grid-template-columns:200px 1fr; gap:14px; }
.wp-palette { background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:10px; max-height:520px; overflow:auto; }
.wp-item { background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; cursor:grab; font-size:.82rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.wp-item:active { cursor:grabbing; }
.wp-grid { display:grid; grid-template-columns:repeat(7, minmax(90px,1fr)); gap:8px; }
.wp-day { background:#fff; border:1px dashed #cbd5e1; border-radius:10px; min-height:160px; padding:8px; }
.wp-day.dragover { border-color:#5b6cff; background:#eef2ff; }
.wp-day h5 { margin:0 0 8px; font-size:.8rem; color:var(--muted); text-align:center; }
.wp-slot { background:#e0e7ff; border-radius:8px; padding:6px 8px; margin-bottom:6px; font-size:.75rem; position:relative; }
.wp-slot button { position:absolute; top:2px; right:4px; border:0; background:transparent; cursor:pointer; color:#64748b; font-size:.85rem; }
@media print {
  .sidebar, .topbar, .toolbar, .no-print { display:none !important; }
  .main, .content { padding:0 !important; }
}
@media (max-width: 900px) {
  .chart-grid { grid-template-columns:1fr; }
  .cal { grid-template-columns:repeat(4,1fr); }
  .week-planner { grid-template-columns:1fr; }
}