:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --line: #e4e7ec;
  --line2: #eef1f5;
  --text: #1a1c22;
  --muted: #667085;
  --accent: #2563eb;
  --accent-d: #1d4ed8;
  --on-accent: #ffffff;
  --good: #059669;
  --warn: #b45309;
  --danger: #dc2626;
  --new: #2563eb; --contacted: #7c3aed; --qualified: #0891b2; --won: #059669; --lost: #6b7280;
  --r: 16px;
  --appbar-h: 64px;
  --nav-h: 72px;
  --elev: 0 1px 2px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.10);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text); font-size: 18px; line-height: 1.5;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── top app bar ──────────────────────────────────────── */
.appbar {
  position: sticky; top: 0; z-index: 20;
  height: calc(var(--appbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; gap: 4px;
  background: var(--accent); color: var(--on-accent);
  padding-left: 8px; padding-right: 8px;
  box-shadow: 0 2px 8px rgba(16,24,40,.20);
}
.appbar-title { font-size: 24px; font-weight: 600; flex: 1; margin: 0 8px; }
.appbar-back, .appbar-act {
  width: 50px; height: 50px; min-width: 50px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--on-accent); cursor: pointer; border-radius: 50%;
}
.appbar-back:active, .appbar-act:active { background: rgba(255,255,255,.18); }
.appbar-back { font-size: 38px; line-height: 1; }
.appbar-act svg { width: 28px; height: 28px; }

/* ── bottom navigation ────────────────────────────────── */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
}
.navitem {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer;
}
.navitem svg { width: 28px; height: 28px; }
.navitem:active { background: var(--line2); }
.navitem.on { color: var(--accent); }

/* ── content ──────────────────────────────────────────── */
.wrap { padding: 16px 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px); max-width: 760px; margin: 0 auto; }

.chips { display: flex; gap: 10px; overflow-x: auto; padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--muted); min-height: 46px; padding: 0 20px; border-radius: 999px; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; }
.chip.on { background: #e8f0ff; border-color: var(--accent); color: var(--accent-d); font-weight: 600; }

.search { display: block; width: 100%; min-height: 58px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 18px; margin: 16px 0; background: var(--surface); }
.search:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.card { background: var(--surface); border-radius: var(--r); padding: 20px; margin-bottom: 14px; cursor: pointer; display: block; box-shadow: var(--elev); }
.card:active { background: #fbfcfe; }
.card.alert { box-shadow: 0 0 0 2px var(--danger), var(--elev); }
.card-top { display: flex; align-items: center; gap: 10px; }
.card-name { font-weight: 600; font-size: 20px; flex: 1; }
.card-sub { color: var(--muted); font-size: 16px; margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-sub .dot::before { content: '·'; margin-right: 8px; }

.badge { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; color: #fff; white-space: nowrap; }
.badge.new { background: var(--new); } .badge.contacted { background: var(--contacted); }
.badge.qualified { background: var(--qualified); } .badge.won { background: var(--won); } .badge.lost { background: var(--lost); }
.badge.src { background: var(--line2); color: var(--muted); }
.badge.unack { background: var(--danger); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: 0 0 0 4px rgba(220,38,38,.28); } }

/* ── forms (large targets, 18px text) ─────────────────── */
.field { display: block; margin-bottom: 18px; }
.field[hidden] { display: none; }
.field > span { display: block; font-size: 16px; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 58px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px;
  font-size: 18px; background: var(--surface); color: var(--text); -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 48px; }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 15px; border: 0; border-radius: 14px; font-size: 19px; font-weight: 600; cursor: pointer; background: var(--line2); color: var(--text); }
.btn:active { filter: brightness(.96); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(37,99,235,.32); }
.btn-danger { background: #fdecec; color: var(--danger); }
.btn-row { display: flex; gap: 12px; }
.btn-row .btn { flex: 1; }

.section { background: var(--surface); border-radius: var(--r); padding: 22px; margin-bottom: 16px; box-shadow: var(--elev); }
.section h3 { margin: 0 0 16px; font-size: 18px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line2); font-size: 17px; }
.kv:last-child { border: 0; } .kv .k { color: var(--muted); } .kv .v { text-align: right; font-weight: 500; }
.kv .v a { color: var(--accent); font-weight: 600; }

.ack-banner { background: #fff4e5; border: 1px solid #fed7aa; color: var(--warn); border-radius: var(--r); padding: 16px; margin-bottom: 16px; font-size: 17px; }
.ack-banner .btn { margin-top: 14px; }

.act { padding: 14px 0; border-bottom: 1px solid var(--line2); }
.act:last-child { border: 0; } .act .note { font-size: 17px; }
.act .meta { font-size: 14px; color: var(--muted); margin-top: 5px; }

.empty { text-align: center; color: var(--muted); padding: 56px 20px; font-size: 17px; }
.tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.tab { flex: 1; min-height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font-size: 16px; font-weight: 500; }
.tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { background: var(--surface); border-radius: 22px; padding: 34px 26px; width: 100%; max-width: 420px; box-shadow: 0 8px 30px rgba(16,24,40,.12); }
.login-card .logo { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 18px; display: block; }
.login-card h1 { margin: 0 0 6px; font-size: 28px; }
.login-card p { margin: 0 0 24px; color: var(--muted); font-size: 17px; }
.err { color: var(--danger); font-size: 15px; min-height: 22px; margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #1a1c22; color: #fff; padding: 14px 22px; border-radius: 999px; font-size: 16px; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.toast.err { background: var(--danger); }
.muted { color: var(--muted); font-size: 16px; }