:root {
  --bg:#0a0a0a; --surface:#111; --panel:#111827; --text:#f8fafc; --text-secondary:#cbd5e1;
  --muted:#94a3b8; --border:#334155; --border-strong:#475569; --hover:#222; --link:#70b9f4; --focus:#60a5fa;
  --primary-bg:#1a4a2a; --primary-border:#2a6a3a; --primary-text:#fff;
  --active-bg:#123426; --active-text:#86efac; --active-border:#286247;
  --error-bg:#2b0d0d; --error-text:#fca5a5; --error-border:#79343d;
  --warning-bg:#3c2b13; --warning-text:#fcd34d; --warning-border:#80602f;
  --info-bg:#142b43; --success-bg:#0d2b1a; --success-text:#4ade80;
}
:root[data-theme="light"] {
  --bg:#f4f7fa; --surface:#fff; --panel:#fff; --text:#17232f; --text-secondary:#334155;
  --muted:#526174; --border:#c4cdd8; --border-strong:#8797ab; --hover:#e9edf2; --link:#155c9d; --focus:#2563eb;
  --primary-bg:#17623d; --primary-border:#17623d; --primary-text:#fff;
  --active-bg:#e1f2e8; --active-text:#175b38; --active-border:#82b59c;
  --error-bg:#fff0f0; --error-text:#a61b2b; --error-border:#d78c98;
  --warning-bg:#fff6de; --warning-text:#835500; --warning-border:#c9a14f;
  --info-bg:#e8f1fc; --success-bg:#e0f2e6; --success-text:#155f34;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

h1 {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin: 1rem 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.page {
  width: 100%;
  max-width: 480px;
}

button, .btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
button:disabled { opacity: 0.3; cursor: default; }
button:active, .btn:active { background: var(--hover); }
.btn-primary { background:var(--primary-bg); border-color:var(--primary-border); color:var(--primary-text); }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

input[type=text], input[type=password], input[type=month], input[type=url] {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#banner {
  display: none;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}

nav.top {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* --- modal --- */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 380px;
}
.modal h2 {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal .sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
  font-family: monospace;
  word-break: break-all;
}

/* --- toast --- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
  z-index: 200;
}
#toast.show { display: block; }

/* Touch controls and keyboard-safe mobile forms. */
body { padding-bottom:max(16px,env(safe-area-inset-bottom)); }
input,select,textarea,button { font:inherit; }
button,.btn,input,select { min-height:44px; touch-action:manipulation; }
input,select,textarea { font-size:16px !important; max-width:100%; }
button:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.page,.station-content,.rep-page,.row > * { min-width:0; }
.app-tools { width:100%; max-width:1100px; display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-bottom:12px; }
.app-tools a { padding:10px 4px; }
.app-tools button { width:auto; padding:8px 14px; font-size:14px; }
.modal-bg { overflow-y:auto; overscroll-behavior:contain; }
.modal { max-height:calc(100dvh - 32px); overflow-y:auto; }
.controls button,.controls label.btn { margin-bottom:8px; }
.auth-overlay { position:fixed; inset:0; background:var(--bg); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto; }
.auth-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; }
.auth-card h2 { font-size:20px; margin-bottom:8px; }
.auth-card button { margin-top:12px; }
.auth-error { margin-top:12px; color:var(--error-text); }
#toast { max-width:calc(100vw - 32px); color:var(--primary-text); text-align:center; bottom:max(20px,env(safe-area-inset-bottom)); }
.admin-section { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px; margin:20px 0; }
.admin-section h2 { font-size:18px; margin-bottom:12px; }
.admin-section p { margin:12px 0; line-height:1.5; }
.admin-section input,.admin-section select { width:100%; padding:12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); }
.passkey-entry { padding:12px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
@media (max-width:600px) {
  body { padding:12px; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .row { flex-wrap:wrap; }
  .row > * { flex:1 1 120px; }
  h1 { line-height:1.5; }
  .modal-bg { align-items:flex-start; padding-top:max(16px,env(safe-area-inset-top)); }
  .modal { margin:auto 0; }
}
select { appearance:none; min-height:48px; padding-right:36px !important; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:right 18px center,right 12px center; background-size:6px 6px; background-repeat:no-repeat; }
.photo-dialog { margin:auto; padding:20px; width:calc(100% - 24px); max-width:680px; max-height:90dvh; overflow:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:12px; }
.photo-dialog::backdrop { background:#0009; }
.photo-dialog p,.photo-dialog .btn { margin:12px 0; }
.photo-dialog input[type=file][hidden] { display:none !important; }
.photo-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.photo-gallery img { width:100%; height:auto; max-height:400px; object-fit:contain; border-radius:8px; }
.photo-gallery figcaption { font-size:13px; overflow-wrap:anywhere; }
.photo-identity { overflow-wrap:anywhere; font-family:ui-monospace,monospace; }
.last-scan-record { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:12px; margin-top:16px; }
.last-scan-record button { margin-top:8px; }