:root{
  --bg:#0f172a; /* slate-900 */
  --panel:#111827; /* gray-900 */
  --text:#e5e7eb; /* gray-200 */
  --muted:#9ca3af; /* gray-400 */
  --accent:#22c55e; /* green-500 */
  --accent-2:#3b82f6; /* blue-500 */
}
*{ box-sizing:border-box }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
.container{ max-width:960px; margin:0 auto; padding:24px; }
h1{ margin:0 0 16px; font-size:28px; }
h2{ margin:16px 0 8px; font-size:20px; }
section{ background:var(--panel); padding:16px; border-radius:8px; margin-bottom:16px; border:1px solid #1f2937; }
.user-form{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
input[type="text"], input[type="number"]{ background:#0b1220; border:1px solid #1f2937; color:var(--text); padding:8px 10px; border-radius:6px; }
.user-form input[type="text"]{ flex:1 1 260px; min-width:220px; }
.user-form input[type="number"]{ flex:0 0 160px; min-width:150px; }
.user-form button{ flex:0 0 auto; }
.auth-tabs{ display:flex; gap:12px; margin-bottom:16px; }
.auth-pane{ display:flex; flex-direction:column; gap:12px; }
.form-message{ min-height:20px; font-size:14px; font-weight:500; color:var(--accent); }
.form-message.error{ color:#f87171; }
button{ background:var(--accent); color:#052e16; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; font-weight:600; }
button:hover{ filter:brightness(1.05); }
button.auth-tab{ background:transparent; color:var(--muted); border:1px solid #334155; padding:8px 16px; border-radius:999px; font-weight:600; cursor:pointer; transition:all 0.2s ease; }
button.auth-tab:hover{ filter:none; border-color:var(--accent-2); color:var(--accent-2); }
button.auth-tab.active{ background:var(--accent-2); border-color:var(--accent-2); color:#0b1220; }
.log-controls{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.log-controls .quick-row,
.log-controls .custom-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.log-controls #quickBtns{ display:flex; flex-wrap:wrap; gap:8px; }
.log-controls .custom-row input{ flex:0 1 160px; min-width:120px; }
button.quick-btn{ min-width:64px; }
.totals{ display:flex; gap:24px; margin-top:8px; color:var(--muted); }
table{ width:100%; border-collapse:collapse; }
th, td{ text-align:left; padding:8px; border-bottom:1px solid #1f2937; }
th{ color:var(--muted); font-weight:600; }
tbody tr:hover{ background:#0b1220; }
.current-user{ color:var(--accent-2); font-weight:600; margin-left:8px; }
footer{ text-align:center; color:var(--muted); margin-top:16px; }

/* Views */
.hidden{ display:none; }
.topbar{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.topbar .grow{ flex:1 1 auto; }
.user-info{ display:flex; gap:8px; align-items:center; }
button.outline{ background:transparent; color:var(--text); border:1px solid #334155; }
.muted{ color:var(--muted); margin-top:8px; }

/* Chart header */
.chart-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.chart-controls select{ background:#0b1220; color:var(--text); border:1px solid #334155; padding:6px 8px; border-radius:6px; }