/* ===========================
   File: /css/app.css
   Global base + components (dark/light)
   =========================== */

/* ---------- Design tokens ---------- */
:root{
  --bg:#0b0f17;
  --panel:#111827;
  --line:#1f2937;
  --text:#e6e8ee;
  --muted:#9aa3b6;
  --accent:#4f46e5;
  --radius:16px;

  --brand-blue:#2563eb;
  --brand-blue-border:#1d4ed8;

  /* misc */
  --focus:#60a5fa;
  --surface-1:#0e1624;
}
:root.light{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --line:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --accent:#4f46e5;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.55 system-ui, Segoe UI, Inter, Roboto, Arial, sans-serif;
}

/* Containers / layout */
.container{ max-width:1100px; margin:auto; padding:16px; width:100% }
.row{ display:flex; gap:12px; align-items:center }
.row.wrap{ flex-wrap:wrap }
.gap-lg{ gap:16px }
.grow{ flex:1 }
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin-top:12px;
}

/* Topbar (app-header) */
.topbar{
  position:sticky;
  top:0;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px);
  z-index:50;
  transition:box-shadow .2s ease;
}
.topbar--shadow{ box-shadow:0 4px 16px rgba(0,0,0,.25); }

/* ---------- Utilities ---------- */
.small{ font-size:13px }
.muted{ color:var(--muted) }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace }
.wfull{ width:100% }
.gap-10{ gap:10px }
.m0{ margin:0 !important }
.mt-4{ margin-top:4px }
.is-hidden{ display:none !important }
a.inline-link{ color:#93c5fd; text-decoration:underline }
a.inline-link:hover{ filter:brightness(1.1) }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:10px 14px;
  border-radius:12px;
  background:#131a2a; border:1px solid var(--line); color:var(--text);
  cursor:pointer; user-select:none; text-decoration:none;
}
.btn:hover{ border-color:#334155 }
.btn.wfull, a.btn.wfull{ display:flex; width:100% }

/* Primary */
.btn.primary{
  background:var(--brand-blue) !important;
  border-color:var(--brand-blue-border) !important;
  color:#fff !important;
}
.btn.primary:hover{ filter:brightness(1.05) }
.btn.primary:disabled{ opacity:.6; cursor:not-allowed }

/* Secondary (optional) */
.btn.secondary{ background:#131a2a; border:1px solid var(--line); color:var(--text) }
:root.light .btn.secondary{ background:#f1f5f9; border-color:#e2e8f0; color:#0f172a }

/* Icon-only */
.btn.btn-icon{
  background:transparent !important; border:none !important; padding:0;
  line-height:1; font-size:20px; cursor:pointer; -webkit-tap-highlight-color: transparent; appearance:none;
}
.btn.btn-icon:hover,
.btn.btn-icon:focus,
.btn.btn-icon:active,
.btn.btn-icon:focus-visible{
  background:transparent !important; border:none !important; outline:none !important;
}

/* Light mode: non-primary readable */
:root.light .btn:not(.primary):not(.btn-ghost):not(.btn-icon):not(.btn.btn-icon){
  background:#111827; border-color:#0b1220; color:#ffffff;
}
:root.light .btn:not(.primary):not(.btn-ghost):not(.btn-icon):not(.btn.btn-icon):hover{
  background:#0b1220; border-color:#0b1220;
}

/* ---------- Form / inputs (global) ---------- */
.form label{ display:block; margin:10px 0 }
input, .input, select{
  width:100%; padding:10px 12px;
  background:#0f1626; color:var(--text);
  border:1px solid var(--line); border-radius:10px; outline:none;
}
:root.light input, :root.light .input, :root.light select{ background:#fff; color:var(--text) }

/* Password (base) */
.pw-wrap{ position:relative; display:flex; align-items:center }
.pw-wrap input{ width:100%; padding-right:42px }
.pw-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  cursor:pointer; user-select:none; font-size:16px; color:#9aa3b6; opacity:.85;
}
.pw-eye:hover{ color:var(--text); opacity:1 }

/* Input helpers */
.input-badge-wrap{ position:relative }
.input-badge{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  padding:2px 8px; border-radius:999px; font-size:12px; white-space:nowrap;
  background:var(--surface-1); border:1px solid var(--line); color:var(--muted);
}
.input-icon-wrap{ position:relative; flex:1 1 auto; display:block; min-width:260px }
.input-icon-wrap > .input{ width:100%; padding-left:36px }
.input-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--muted); pointer-events:none; opacity:.9;
}
.input-icon-wrap:focus-within .input-icon{ color:var(--text); opacity:1 }

/* ---------- Tiles / lists ---------- */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px }
.tile{
  display:block; position:relative;
  background:#0f1626; border:1px solid var(--line); border-radius:12px;
  padding:14px; text-decoration:none; color:inherit;
}
:root.light .tile{ background:#fff }
.tile:hover{ outline:2px solid #333b57 }
.tile-title{ font-weight:600 }

/* Stretched link */
.stretched-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; outline:none; }
.stretched-link:focus-visible{ box-shadow:0 0 0 2px var(--focus) inset }
.tile .btn{ position:relative; z-index:2 }

/* ---------- Question images ---------- */
img.qimg{
  max-width:100%; border-radius:10px; border:1px solid var(--line); margin:8px 0;
}

/* ---------- Compact stats ---------- */
.stats{ display:flex; flex-direction:column; gap:6px; margin-top:8px; font-size:13px; color:var(--muted) }
.stats .label{ opacity:.85; margin-right:4px }
.stats .value{ color:var(--text); font-variant-numeric:tabular-nums }
.stats .sep{ opacity:.6 }

/* ---------- Toasts ---------- */
#toastWrap{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:9999;
}
.toast{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:999px; white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  opacity:0; transform:translateY(4px) scale(.98);
  transition:opacity .15s ease, transform .15s ease;
  background:#16a34a; color:#fff; border:1px solid #16a34a;
}
.toast.on{ opacity:1; transform:translateY(0) scale(1) }
.toast.success{ background:#16a34a; border-color:#16a34a; color:#fff }
.toast.error{ background:#ef4444; border-color:#ef4444; color:#fff }
.toast.info{ background:#3b82f6; border-color:#3b82f6; color:#fff }
.toast.warn{ background:#f59e0b; border-color:#f59e0b; color:#111827 }

/* ---------- Header/Menu (app-header) ---------- */
.hdr-toggle{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted) }
.hdr-toggle input{ width:16px; height:16px }
.btn-ghost{ background:transparent; border:1px dashed transparent }
.btn-ghost:hover{ border-color:var(--line) }
.balance{ font-weight:700; margin:0 10px; font-variant-numeric:tabular-nums; white-space:nowrap }
.balance-wrap{ min-width:auto }
.avatar{ padding:0 8px }
.avatar .circle{
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; font-weight:700;
  background:var(--panel); border:1px solid var(--line);
}
:root.light .avatar .circle{ color:#111827 }
.menu{ position:relative }
.menu-popover{
  display:none; position:absolute; right:0; top:calc(100% + 8px);
  min-width:200px; padding:8px; border-radius:12px;
  background:var(--bg); border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.menu-popover.open{ display:block; opacity:1; transform:translateY(0); pointer-events:auto }
.menu-header{ padding:6px 10px; color:var(--muted); font-size:12px }
.menu-popover .menu-item{
  display:block; width:100%; margin:0; padding:10px 12px; border-radius:10px;
  background:transparent !important; border:none !important; color:var(--text);
  text-decoration:none; text-align:left; font:inherit; line-height:1.3; cursor:pointer; appearance:none;
}
.menu-popover a.menu-item:hover,
.menu-popover a.menu-item:focus-visible,
.menu-popover button.menu-item:hover,
.menu-popover button.menu-item:focus-visible{
  background:var(--panel) !important; outline:none;
}

/* ---------- Profile + SRS ---------- */
.title-row{ display:flex; align-items:center; gap:12px; margin:0 0 16px 0 }
.title-row h1{ margin:0; line-height:1.2 }
.back-btn{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line);
  background:transparent; color:#fff; cursor:pointer;
}
:root.light .back-btn{ color:#111827 }
.back-btn:hover{ background:color-mix(in oklab, var(--panel) 80%, transparent) }

.in-field{ position:relative }
.in-field input{ padding-right:52px }
.in-ctrl{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  cursor:pointer; border:1px solid var(--line);
  background:var(--panel); color:var(--text);
}
.in-ctrl .icon{ width:16px; height:16px }
.in-ctrl.ok{ background:#16a34a; border-color:#16a34a; color:#fff }

.srs-grid{ display:grid; gap:12px; grid-template-columns:repeat(4, minmax(180px,1fr)) }
.srs-grid label{ margin:0 }
.srs-grid label > .in-field{ margin-top:8px }

/* ---------- Responsive ---------- */
#homeRow > .card{ flex:1 1 100% }

@media (max-width: 900px){
  #exams{ grid-template-columns:1fr }
}
@media (min-width: 900px){
  #homeRow > .card-leader{ flex:1 1 360px }
  #homeRow > .card-exams{ flex:2 1 560px }
}
@media (max-width: 768px){
  .container{ max-width:720px; padding:12px }
  .row{ gap:10px }
  .card{ padding:14px; margin-top:10px }
  input, .input, select{ padding:14px; font-size:16px; border-radius:12px }
  .tiles{ grid-template-columns:1fr }
  .balance{ margin:0 4px }
  .avatar{ padding:0 6px }
  .pw-wrap input{ padding-right:50px }
}
@media (min-width: 1024px){
  .tiles{ grid-template-columns:repeat(3,1fr) }
}

/* Safe-area iOS */
@supports(padding: max(0px)){
  body{ padding-top: max(0px, env(safe-area-inset-top)) }
}

/* Inputs number: hide spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type=number]{ -moz-appearance:textfield; appearance:textfield }

/* Date picker: visible in dark */
:root{ --cal-indicator-invert:1 }
:root.light{ --cal-indicator-invert:0 }
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(var(--cal-indicator-invert)); opacity:.85;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1 }