:root { --bg:#0f172a; --panel:#1e293b; --fg:#f1f5f9; --muted:#94a3b8; --accent:#22c55e; --exit:#f97316; --err:#ef4444; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select:none; }
header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 24px; }
h1 { font-size:1.2rem; margin:0; }
#clock { font-variant-numeric: tabular-nums; font-size:1.5rem; color:var(--muted); }
/* Mode actiu: tota la pantalla canvia de color perquè no es confongui entrada i sortida */
body { --mode:var(--accent); --mode-fg:#052e16; }
body.mode-sortida { --mode:var(--exit); --mode-fg:#431407; }
body.mode-entrada { box-shadow: inset 0 6px 0 var(--accent); }
body.mode-sortida { box-shadow: inset 0 6px 0 var(--exit); }
.cap-dreta { display:flex; gap:10px; align-items:center; }
.btn-idioma { font:inherit; font-size:1rem; font-weight:700; padding:14px 14px; border-radius:14px; cursor:pointer;
  background:var(--panel); color:var(--fg); border:2px solid var(--panel); }
.btn-mode { font:inherit; font-size:1.05rem; font-weight:700; padding:14px 18px; border-radius:14px; cursor:pointer;
  background:transparent; border:2px solid; max-width:55%; }
body.mode-entrada .btn-mode { color:var(--exit); border-color:var(--exit); }
body.mode-sortida .btn-mode { color:var(--accent); border-color:var(--accent); }
.mode-titol { text-align:center; margin:4px 0 14px; font-size:2.4rem; letter-spacing:.12em; color:var(--mode); }
main { padding:8px 24px 24px; max-width:640px; margin:0 auto; }
.hidden { display:none !important; }
.hint { text-align:center; color:var(--muted); font-size:1.15rem; }
.hint b { color:var(--fg); }
.dni { width:100%; font-size:2.4rem; text-align:center; letter-spacing:.3em; padding:16px;
  border-radius:14px; border:2px solid var(--panel); background:#020617; color:var(--fg); }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.keypad.letters { grid-template-columns:repeat(6,1fr); }
.key { font-size:1.8rem; padding:18px 0; border-radius:12px; border:none; background:var(--panel); color:var(--fg); }
.key:active { background:#334155; }
.key.small { font-size:1.1rem; }
.big { font-size:1.6rem; padding:24px 12px; border:none; border-radius:14px; font-weight:700; width:100%; }
.big:disabled { opacity:.5; }
.confirmar { background:var(--mode); color:var(--mode-fg); }
.dni { border-color:var(--mode) !important; }
.toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%); padding:20px 32px;
  border-radius:16px; font-size:1.4rem; font-weight:600; max-width:90vw; text-align:center; }
.toast.ok { background:var(--accent); color:#052e16; }
.toast.ok.out { background:var(--exit); color:#431407; }
.toast.err { background:var(--err); color:#fff; }

/* Classe en curs */
.ara { margin:0 0 14px; display:grid; gap:10px; }
.ara-titol { margin:0; color:var(--muted); font-size:1rem; text-align:center; }
.ara-titol.alerta { color:#fbbf24; font-weight:600; font-size:1.1rem; }
.classes { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.classe { text-align:left; border:2px solid var(--panel); background:var(--panel); color:var(--fg);
  border-radius:14px; padding:14px 16px; font:inherit; display:grid; gap:2px; }
.classe .codi { font-size:.85rem; color:var(--muted); letter-spacing:.05em; }
.classe .materia { font-size:1.25rem; font-weight:700; }
.classe .hora { font-size:.95rem; color:var(--muted); }
button.classe { cursor:pointer; }
.classe.sel { border-color:var(--accent); background:#14532d; }
.classe.sel .codi, .classe.sel .hora { color:#bbf7d0; }
.classes.cal-triar button.classe:not(.sel) { animation: pols 1.2s ease-in-out 2; }
@keyframes pols { 50% { border-color:#fbbf24; } }
.cap-classe { text-align:center; color:var(--muted); background:var(--panel); border-radius:14px; padding:12px; }