/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ── */
:root {
  --bg:#F5F4F1; --surface:#ECEAE4; --card:#FFFFFF; --border:#D4D0C8;
  --border-strong:#B8B5AE; --accent:#1A3A5C; --accent-hover:#2E5F96;
  --accent-light:#E8EEF5; --text:#1A1A1A; --text-2:#5A5855; --text-3:#8A8580;
  --success:#1E5A32; --success-bg:#ECFDF5; --toolbar:#D4D0C8; --danger:#7A1A1A;
  --font:"Segoe UI",system-ui,-apple-system,Tahoma,sans-serif;
}

/* ── Base ── */
body { font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh; }

/* ── Login overlay ── */
#login-overlay {
  position:fixed;inset:0;background:rgba(245,244,241,0.92);
  z-index:200;display:none;align-items:center;justify-content:center;
}
#login-overlay.show { display:flex; }
.login-box {
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:36px 32px;width:320px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 4px 24px rgba(0,0,0,0.10);
}
.stacked-lockup { display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:8px; }
.brand-wordmark { font-family:var(--font);font-weight:800;font-size:1.5rem;letter-spacing:-0.3px;line-height:1;color:var(--accent); }
.brand-tagline  { font-family:var(--font);font-weight:400;font-size:0.75rem;color:var(--text-3); }
.login-box input {
  width:100%;padding:9px 12px;background:var(--surface);border:1px solid var(--border);
  border-radius:4px;color:var(--text);font-family:var(--font);font-size:0.875rem;outline:none;
  transition:border-color 0.15s;
}
.login-box input::placeholder { color:var(--text-3); }
.login-box input:focus { border-color:var(--border-strong); }
.login-btn {
  width:100%;padding:10px;background:var(--accent);color:white;
  border:none;border-radius:4px;font-family:var(--font);
  font-size:0.875rem;font-weight:600;cursor:pointer;transition:background 0.15s;
}
.login-btn:hover { background:var(--accent-hover); }
.login-btn:disabled { opacity:0.5;cursor:default; }
.login-error { font-size:0.78rem;color:var(--danger);display:none; }

/* ── Desktop toolbar ── */
.toolbar { background:var(--toolbar);border-bottom:1px solid var(--border-strong);display:flex;align-items:center;padding:0 24px;height:48px;gap:2px;position:sticky;top:0;z-index:20; }
.toolbar-brand { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--accent);letter-spacing:0.5px;margin-right:18px;padding-right:18px;border-right:1px solid var(--border-strong);text-decoration:none; }
.toolbar-brand:focus,.toolbar-brand:active,.toolbar-brand:visited { text-decoration:none;outline:none; }
.toolbar-brand svg { width:21px;height:19px; }
.toolbar-btn { display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:4px;font-size:13px;font-weight:600;color:var(--text-2);font-family:var(--font);background:none;border:none;cursor:pointer;text-decoration:none;transition:background 0.1s,color 0.1s; }
.toolbar-btn svg { width:15px;height:15px; }
.toolbar-btn:hover { background:rgba(26,58,92,0.08);color:var(--accent); }
.toolbar-btn.active { background:rgba(26,58,92,0.12);color:var(--accent); }
.t-badge,.badge { display:inline-flex;align-items:center;padding:2px 9px;border-radius:10px;font-size:12px;font-weight:700;background:var(--accent);color:white; }

/* ── Mobile bottom nav ── */
.bottom-nav { display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--toolbar);border-top:1px solid var(--border-strong);z-index:10; }
.bottom-nav-inner { display:flex;height:100%; }
.bnav-btn { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:var(--text-3);font-family:var(--font);border:none;background:none;cursor:pointer;padding:0; }
.bnav-btn.active { color:var(--accent); }
.bnav-label { font-size:10px;font-weight:600;line-height:1; }
.bnav-icon-wrap { position:relative;display:inline-flex; }
.bnav-badge { position:absolute;top:-5px;right:-7px;background:var(--accent);color:white;font-size:9px;font-weight:700;padding:1px 4px;border-radius:8px;line-height:1.4;pointer-events:none; }

/* ── Mobile page header ── */
.page-header { background:var(--surface);border-bottom:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:10; }
.ph-brand { display:none;flex:1;min-width:0;align-items:center;gap:8px;font-size:20px;font-weight:800;color:var(--accent);letter-spacing:-0.3px;line-height:1;text-decoration:none; }

/* ── Utility ── */
.hidden { display:none !important; }

/* ── Responsive ── */
@media (max-width:640px) {
  .toolbar { display:none; }
  .bottom-nav { display:block; }
  .ph-brand { display:flex; }
}
@media (min-width:641px) {
  .page-header { display:none; }
  .bottom-nav { display:none !important; }
}

/* ── Shared tile button ── */
.btn-track-tile { padding:7px 0;border-radius:4px;font-size:12px;font-weight:700;font-family:"Segoe UI",system-ui,-apple-system,Tahoma,sans-serif;cursor:pointer;min-height:36px;width:80px;white-space:nowrap;background:#1A3A5C;color:white;border:1px solid transparent; }
.btn-track-tile:hover { background:#2E5F96; }
.btn-track-tile.tracked { background:#E8EEF5;color:#1A3A5C;border-color:#1A3A5C; }
.btn-track-tile.tracked:hover { background:#dce6f0; }
@media (max-width:640px) { .btn-track-tile { min-height:40px; } }