:root {
  --bg:#0b0f1c; --ink:#e9edf8; --muted:#9aa5c0; --accent:#7fb3ff; --accent2:#9d7bff;
  --card:#141b2e; --line:#242d45; --ok:#37d39b; --bad:#ff8fa0; --sev:#ffb454;
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
  background:radial-gradient(1100px 640px at 50% -12%,#182241,var(--bg)); color:var(--ink);
  min-height:100vh; line-height:1.6; }
.dwrap { max-width:660px; margin:0 auto; padding:22px 18px 60px; }
.dhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.dbrand { font-weight:800; letter-spacing:.02em; font-size:18px; } .dbrand .eyes { color:var(--accent); }
.dtag { color:var(--muted); font-size:14px; font-weight:700; }
.dview.hidden { display:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px;
  box-shadow:0 18px 50px rgba(0,0,0,.35); text-align:center; }
.card.card > * { text-align:left; }
h1 { font-size:23px; margin:6px 0 12px; text-align:center; }
p { color:var(--muted); font-size:15px; } p b, li b { color:var(--ink); }
.muted { color:var(--muted); } .small { font-size:12px; } .lead { font-size:16px; color:var(--ink); }
.big-ico { font-size:52px; text-align:center; }
.msg { min-height:20px; font-size:14px; color:var(--bad); margin:8px 0 0; } .msg.ok { color:var(--ok); }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px; }

.btn { display:inline-block; border:0; border-radius:12px; padding:13px 22px; font-weight:800; font-size:15px;
  cursor:pointer; text-decoration:none; background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#08111f; }
.btn.big { font-size:17px; padding:16px 28px; }
.btn.ghost { background:none; border:1px solid var(--line); color:var(--ink); }
.btn.bad { background:none; border:1px solid #5a2b34; color:var(--bad); }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* enrol warnings */
.warn { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px;
  padding:14px 16px; margin:14px 0; background:rgba(127,179,255,.05); }
.warn p { margin:0 0 10px; } .warn p:last-child { margin-bottom:0; }
.sev { color:var(--sev) !important; border-top:1px dashed var(--line); padding-top:10px; }
.sev b { color:var(--sev); }
.drop { display:block; border:1.5px dashed var(--line); border-radius:14px; padding:24px; text-align:center;
  cursor:pointer; margin:14px 0 8px; }
.drop:hover { border-color:var(--accent); background:rgba(127,179,255,.06); }
.drop-in { display:flex; flex-direction:column; gap:4px; align-items:center; font-size:16px; }
.count { text-align:center; font-weight:700; color:var(--ink); }
.ilist { color:var(--muted); font-size:15px; margin:12px 0; padding-left:20px; } .ilist li { margin-bottom:8px; }
.ack { display:flex; align-items:center; gap:10px; margin:16px 0 4px; color:var(--ink); font-weight:700;
  cursor:pointer; }
.ack input { width:20px; height:20px; }

/* the ATM screen */
.atm { max-width:520px; margin:0 auto; background:#11151b; border:2px solid #2a3340; border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 6px #0a0d12; overflow:hidden; }
.atm-top { display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
  background:linear-gradient(#1c2530,#141a22); border-bottom:1px solid #2a3340; }
.atm-brand { font-weight:900; letter-spacing:.18em; color:#7fe3b0; font-size:14px;
  text-shadow:0 0 8px rgba(127,227,176,.4); }
.atm-round { color:#9aa5c0; font-size:13px; font-variant-numeric:tabular-nums; }
.atm-prompt { text-align:center; color:#ffd45e; font-weight:800; font-size:17px; letter-spacing:.02em;
  padding:16px 12px 4px; text-shadow:0 0 10px rgba(255,212,94,.3); }
.atm-feedback { text-align:center; min-height:22px; font-weight:800; font-size:14px; color:#9aa5c0; }
.atm-feedback.ok { color:var(--ok); } .atm-feedback.bad { color:var(--bad); }
.atm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 16px 6px; }
@media (max-width:440px){ .atm-grid { grid-template-columns:repeat(2,1fr); } }
.atm-cell { aspect-ratio:1; border:2px solid #2a3340; border-radius:10px; overflow:hidden; padding:0;
  cursor:pointer; background:#0a0d12; transition:border-color .1s, box-shadow .1s, transform .1s; }
.atm-cell:hover { border-color:#ffd45e; transform:translateY(-1px); }
.atm-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.atm-cell.pick { border-color:#ffd45e; }
.atm-cell.right { border-color:var(--ok); box-shadow:0 0 0 3px rgba(55,211,155,.3); }
.atm-cell.wrong { border-color:var(--bad); box-shadow:0 0 0 3px rgba(255,143,160,.3); }
.atm-cell:disabled { cursor:default; }
.atm-bottom { text-align:center; color:#6b7699; font-size:12px; padding:8px 12px 16px; }