:root { --bg:#0d1117; --fg:#e6edf3; --accent:#3fb950; --muted:#8b949e; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
a { color:var(--accent); text-decoration:none; }
.topbar { display:flex; gap:1rem; align-items:center; padding:12px 16px; border-bottom:1px solid #30363d; }
.topbar h1 { margin:0; font-size:18px; }
main { padding:16px; }
button { background:var(--accent); color:#041; border:0; padding:8px 12px; border-radius:6px; cursor:pointer; }
input,select,textarea { width:100%; max-width:420px; padding:8px; border:1px solid #30363d; border-radius:6px; background:#161b22; color:var(--fg); }
.panel { border:1px solid #30363d; border-radius:8px; padding:12px; margin-bottom:16px; }
pre { background:#161b22; border:1px solid #30363d; padding:10px; border-radius:6px; overflow:auto; }
.btn { padding: .8rem 1rem; font-size: 1rem; }
.btn:hover { filter: brightness(1.06); }

.pill { font-size: .95rem; }

.confirmation-popup { position:fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000; }
.confirmation-popup.visible { display:flex; }

.confirmation-popup-content { background:#0f141b; border:1px solid #30363d; border-radius:12px; padding:1rem; }

.confirmation-popup-content.present { border-color:#2ea043; }
.confirmation-popup-content.absent { border-color:#a71d2a; }
.confirmation-popup-content.late { border-color:#d29922; }
.confirmation-popup-content.earlylate { border-color:#8957e5; }

/* --- Light theme overrides --- */
[data-theme="light"] {
  --background: #f7f7f7;
  --text: #111;
  --primary: #2b6cb0;
  --secondary: #2f855a;
  --accent: #c05621;
  --success: #2f855a;
  --error: #c53030;
  --warning: #b7791f;
}

[data-theme="light"] body {
  background: var(--background);
  color: var(--text);
}

[data-theme="light"] .card,
[data-theme="light"] .scanner-panel,
[data-theme="light"] .student-panel {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .mode-display,
[data-theme="light"] select,
[data-theme="light"] input {
  background: #fff;
  color: #111;
  border-color: #cbd5e0;
}