:root {
  /* Tokens mirrored from the main dashboard (dashboard.css) */
  --bg:#0A0B0F; --bg-2:#0D0F14;
  --surface:#12141A; --surface2:#171A21; --surface-3:#1C202A;
  --line:rgba(255,255,255,.065); --line-strong:rgba(255,255,255,.11);
  --border:rgba(255,255,255,.065); --divider:rgba(255,255,255,.065);
  --ink:#F2F3F7; --text:#F2F3F7; --muted:#8B91A3; --faint:#5B6173;
  --gold:#E3A92B; --gold-hi:#F4CB5C; --gold-lo:#B9831A; --gold-soft:rgba(227,169,43,.12); --gold-line:rgba(227,169,43,.30);
  --primary:#E3A92B;
  --pos:#3ADBA7; --err:#FF5C7A; --err-bg:rgba(255,92,122,.12);
  --r-sm:12px; --r-md:14px; --r-lg:16px; --r:18px;
  --sh-sm:0 1px 2px rgba(0,0,0,.18);
  --sh-card:0 1px 0 rgba(255,255,255,.04) inset, 0 16px 40px rgba(0,0,0,.35);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --xs:.8rem; --sm:.9rem; --lg:1.5rem;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100%; }
body {
  font-family:var(--font); color:var(--text);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(227,169,43,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(91,141,239,.08), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.muted { color:var(--muted); }

/* ---------- login ---------- */
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-wrap { width:100%; max-width:380px; padding:1rem; }
.login-card {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--line); border-radius:var(--r); padding:36px 32px; box-shadow:var(--sh-card);
}
.login-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:1.75rem; }
.login-logo-mark { width:36px; height:36px; object-fit:contain; }
.login-logo-name { font-size:.95rem; font-weight:800; letter-spacing:.04em; color:var(--primary); }
.login-logo-sub { font-size:.75rem; color:var(--muted); }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:.75rem; font-weight:500; color:var(--muted); margin-bottom:.35rem; }
.field input {
  width:100%; padding:12px 14px; background:var(--surface2); border:1px solid var(--line);
  border-radius:var(--r-md); color:var(--ink); font-family:var(--font); font-size:13.5px;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.field input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(227,169,43,.18); }
.btn-gold {
  width:100%; padding:12px 16px;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  color:#2B1F04; border:none; border-radius:var(--r-md); font-family:var(--font);
  font-size:13.5px; font-weight:700; cursor:pointer;
  transition:transform .08s, box-shadow .15s; box-shadow:0 4px 14px rgba(227,169,43,.3);
}
.btn-gold:hover { box-shadow:0 6px 18px rgba(227,169,43,.45); }
.btn-gold:active { transform:translateY(1px); }
.err {
  background:var(--err-bg); border:1px solid var(--err); border-radius:var(--r-md);
  padding:.5rem .75rem; font-size:.78rem; color:var(--err); margin-bottom:1rem;
}

/* ---------- topbar ---------- */
.topbar {
  position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--border);
  padding:.75rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.topbar-left { display:flex; align-items:center; gap:.6rem; min-width:0; }
.topbar-left img { width:28px; height:28px; object-fit:contain; }
.brand-name { font-size:.9rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.brand-sub { font-size:.72rem; color:var(--muted); }
.ghost-btn {
  padding:8px 14px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); font-size:.78rem; font-weight:600; color:var(--muted);
  cursor:pointer; font-family:var(--font); transition:all .14s;
}
.ghost-btn:hover { color:var(--ink); border-color:var(--line-strong); }

/* ---------- content ---------- */
main { max-width:960px; margin:0 auto; padding:1.5rem 2rem 3rem; }
.ratecard {
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(227,169,43,.10) 0%, rgba(227,169,43,.02) 100%);
  border:1px solid var(--gold-line); border-radius:var(--r); padding:16px 22px; margin-bottom:1.75rem;
}
.ratecard-lbl { font-size:var(--xs); color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; }
.ratecard-val { font-size:2.1rem; font-weight:800; color:var(--gold); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.ratecard-hint { font-size:.82rem; color:var(--muted); margin-left:auto; max-width:340px; line-height:1.4; }
@media (max-width:640px){ .ratecard-hint { margin-left:0; } }
.section-label { font-size:var(--xs); color:var(--muted); font-weight:500; margin-bottom:.5rem; }
.linkrow { display:flex; gap:.6rem; margin-bottom:1.5rem; }
.linkrow input {
  flex:1; padding:12px 14px; background:var(--surface2); border:1px solid var(--line);
  border-radius:var(--r-md); color:var(--ink); font-family:var(--font); font-size:13.5px;
}
.linkrow .btn-gold { width:auto; padding:12px 18px; white-space:nowrap; }
.card {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-card); padding:18px 20px;
}
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.kpi-lbl { font-size:var(--xs); color:var(--muted); font-weight:500; margin-bottom:.55rem; }
.kpi-val {
  font-size:var(--lg); font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.025em; line-height:1;
}
.kpi-val.gold { color:var(--gold); }
.tbl-card { padding:0; overflow:hidden; }
.tbl-scroll { overflow-x:auto; }
table.months { width:100%; border-collapse:collapse; }
.months th {
  text-align:right; font-size:var(--xs); font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; padding:.8rem 1.1rem; border-bottom:1px solid var(--divider);
  white-space:nowrap;
}
.months td {
  text-align:right; padding:.8rem 1.1rem; font-size:.85rem; color:var(--ink);
  border-bottom:1px solid var(--divider); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.months th:first-child, .months td:first-child { text-align:left; }
.months tbody tr:last-child td { border-bottom:none; }
.months tbody tr:hover td { background:var(--gold-soft); }
.empty { padding:1.75rem 1rem; color:var(--faint); font-size:.85rem; text-align:center; }
@media (max-width:640px) {
  .kpis { grid-template-columns:1fr; }
  .topbar { padding:.75rem 1rem; }
  main { padding:1.25rem 1rem 2rem; }
}

/* Months table → stacked "label → value" cards on phones (5 money columns
   don't fit; horizontal scroll clips them). Each month becomes a block. */
@media (max-width:600px) {
  .tbl-scroll { overflow-x:visible; }
  .months, .months tbody, .months tbody tr, .months td { display:block; width:auto; }
  .months thead { display:none; }
  .months tbody tr { padding:.65rem 1.1rem 1rem; border-bottom:1px solid var(--divider); }
  .months tbody tr:last-child { border-bottom:none; }
  .months tbody tr:hover td { background:transparent; }
  .months td {
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    text-align:right; white-space:normal; border-bottom:none; padding:.28rem 0; font-size:.9rem;
  }
  .months td::before {
    content:attr(data-label); text-align:left; white-space:nowrap;
    color:var(--muted); font-size:var(--xs); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  }
  /* Month value becomes the card heading (no label). */
  .months td:first-child { font-weight:700; color:var(--gold); font-size:1rem; padding-bottom:.5rem; }
  .months td:first-child::before { content:none; }
  .months td.empty { text-align:center; }
  .months td.empty::before { content:none; }
}

/* --- Segmented OTP input (one digit per cell) --- */
.otp-group { display:flex; gap:.5rem; }
.otp-cell {
  flex:1 1 0; min-width:0; aspect-ratio:1/1; max-height:56px; text-align:center;
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--ink); font-family:var(--font); font-size:1.4rem; font-weight:700;
  font-variant-numeric:tabular-nums; outline:none; transition:border-color .15s, box-shadow .15s;
}
.otp-cell:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(227,169,43,.18); }
.otp-group.invalid .otp-cell { border-color:var(--err); }

/* --- Two-step OTP login controls --- */
.hint { color:var(--muted); font-size:.82rem; line-height:1.5; margin:0 0 1rem; }
.login-actions { display:flex; justify-content:space-between; margin-top:.85rem; }
.btn-link { background:none; border:0; color:var(--gold); cursor:pointer; font:inherit; font-size:.8rem; padding:.25rem; }
.btn-link:hover { color:var(--gold-hi); }
.btn-link:disabled { color:var(--muted); cursor:default; }