/* ============================================================
   Coun5el · Member Portal — mobile design system (light / brick)
   390 × 844 PWA frame
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap");

:root {
  --paper:   #f6f4ef;
  --paper-2: #ece7d9;
  --card:    #ffffff;
  --card-2:  #fbf9f3;

  --ink:      #15130f;
  --ink-text: #2c281f;
  --stone:    #6b6558;
  --stone-2:  #8a8478;

  --line:   rgba(21,19,15,.09);
  --line-2: rgba(21,19,15,.15);

  --brick:      #c44a26;
  --brick-dk:   #a83e1f;
  --brick-bg:   rgba(196,74,38,.10);

  /* semantic — preserved meaning */
  --good:    #2d7d5a;  --good-bg:  #e8f4ee;
  --warn:    #b8791f;  --warn-bg:  #fbf2dd;
  --bad:     #c0392b;  --bad-bg:   #fbeae7;
  --evict:   #7f1d1d;  --evict-bg: #f6e3e3;
  --info:    #2a6f9e;  --info-bg:  #e6f0f8;

  --r:   18px;
  --r-sm: 12px;
  --r-xs: 9px;

  --nav-h: 64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: #2a2722;
  font-family: "Geist", "SF Pro Text", -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* ---------------- device frame ---------------- */
.device-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.device {
  width: 390px; height: 844px;
  background: #0d0c0a;
  border-radius: 54px;
  padding: 11px;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.7), 0 0 0 2px #2a2722, inset 0 0 0 2px #1c1a16;
  position: relative;
}
.screen {
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
/* notch / dynamic island */
.island {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 33px; background: #0d0c0a; border-radius: 20px; z-index: 50;
}
/* status bar */
.statusbar {
  height: 50px; flex-shrink: 0; padding: 16px 30px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600; color: var(--ink); z-index: 40;
}
.statusbar.on-brick { color: #fff; }
.statusbar .sb-r { display: flex; align-items: center; gap: 7px; }
.statusbar svg { display: block; }

/* viewport (scroll area) */
.viewport { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;
  scrollbar-width: none; }
.viewport::-webkit-scrollbar { display: none; }
.has-nav .viewport { padding-bottom: calc(var(--nav-h) + 20px); }

/* page content padding */
.pad { padding: 18px 18px 24px; }

/* ---------------- bottom nav ---------------- */
.botnav {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--nav-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  display: flex; align-items: stretch; z-index: 45;
  padding-bottom: 6px;
}
.botnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--stone-2); font-size: 10px; font-weight: 500; letter-spacing: 0.01em;
}
.botnav button svg { width: 23px; height: 23px; }
.botnav button.active { color: var(--brick); }
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: rgba(21,19,15,.28); z-index: 48;
}

/* ---------------- headers ---------------- */
.hdr { flex-shrink: 0; }
.hdr-brick {
  background: var(--brick); color: #fff; padding: 8px 18px 22px;
}
.hdr-brick .hdr-top { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.hdr-brick .back { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.hdr-brick .back svg { width: 18px; height: 18px; }
.hdr-brick h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 0; color: #fff; }
.hdr-brick .sub { font-size: 13.5px; color: rgba(255,255,255,.72); margin-top: 4px; }
.hdr-brick .spacer { flex: 1; }

.hdr-white {
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 6px 16px 14px; display: flex; align-items: center; gap: 12px;
}
.hdr-white .back { width: 34px; height: 34px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.hdr-white .back svg { width: 18px; height: 18px; }
.hdr-white .ht { flex: 1; }
.hdr-white h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.hdr-white .sub { font-size: 12px; color: var(--stone); margin-top: 1px; }
.hdr-white .act { font-size: 13px; color: var(--brick); font-weight: 550; }

/* ---------------- type helpers ---------------- */
.eyebrow { font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stone); }
.wm { font-family: "Geist", sans-serif; font-weight: 700; letter-spacing: -0.045em;
  display: inline-flex; align-items: baseline; color: var(--ink); }
.wm .five { color: var(--brick); font-weight: 800; }
.wm.on-brick { color: #fff; } .wm.on-brick .five { color: #fff; }
.sec-label { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stone); margin: 0 0 12px; font-weight: 500; }
.money { font-weight: 800; letter-spacing: -0.03em; }
.serif { font-family: "Newsreader", serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }

/* ---------------- cards ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; box-shadow: 0 1px 2px rgba(21,19,15,.03); }
.card-2 { background: var(--card-2); }
.card + .card { margin-top: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------------- badges ---------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: "Geist Mono", monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px;
  text-transform: uppercase; }
.b-good  { background: var(--good-bg);  color: var(--good); }
.b-warn  { background: var(--warn-bg);  color: var(--warn); }
.b-bad   { background: var(--bad-bg);   color: var(--bad); }
.b-evict { background: var(--evict-bg); color: var(--evict); }
.b-info  { background: var(--info-bg);  color: var(--info); }
.b-mute  { background: var(--paper-2);  color: var(--stone); }
.b-brick { background: var(--brick-bg); color: var(--brick-dk); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------- buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em; padding: 14px 18px;
  border-radius: 14px; transition: transform .12s ease, background .15s ease, opacity .15s ease; }
.btn:active { transform: scale(.985); }
.btn-brick { background: var(--brick); color: #fff; }
.btn-brick:active { background: var(--brick-dk); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-outline { background: var(--card); border: 1px solid var(--line-2); color: var(--ink); }
.btn-soft { background: var(--brick-bg); color: var(--brick-dk); }
.btn-ghost { background: transparent; color: var(--stone); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 20px; font-size: 16px; }
.btn[disabled] { opacity: .42; pointer-events: none; }
.btn .ic { width: 18px; height: 18px; }
.btn > svg { width: 19px; height: 19px; flex-shrink: 0; }
.qa-card > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--stone); }

/* ---------------- quick action grid ---------------- */
.qa-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px; display: flex; flex-direction: column; gap: 26px; text-align: left;
  align-items: flex-start; min-height: 92px; justify-content: space-between; }
.qa-card .qa-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brick-bg);
  display: grid; place-items: center; color: var(--brick); }
.qa-card .qa-ic svg { width: 22px; height: 22px; }
.qa-card .qa-l { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.qa-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.qa-mini { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.qa-mini .qa-ic { width: 50px; height: 50px; border-radius: 15px; background: var(--card);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--brick); }
.qa-mini .qa-ic svg { width: 22px; height: 22px; }
.qa-mini .qa-l { font-size: 10.5px; font-weight: 500; color: var(--ink-text); line-height: 1.15; }

/* ---------------- icon container ---------------- */
.ic-box { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.ic-box svg { width: 21px; height: 21px; }
.ic-brick { background: var(--brick-bg); color: var(--brick); }
.ic-good { background: var(--good-bg); color: var(--good); }
.ic-warn { background: var(--warn-bg); color: var(--warn); }
.ic-bad { background: var(--bad-bg); color: var(--bad); }
.ic-info { background: var(--info-bg); color: var(--info); }
.ic-mute { background: var(--paper-2); color: var(--stone); }

/* ---------------- avatars ---------------- */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; font-weight: 650; color: #fff; flex-shrink: 0; letter-spacing: -0.01em; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.av-0 { background: #7a4ec4; } .av-1 { background: #3f7bd6; } .av-2 { background: #c9743a; }
.av-3 { background: #4ba37a; } .av-4 { background: #c44a6e; } .av-5 { background: #4a8aa3; }
.av-6 { background: #a3824a; } .av-7 { background: #6457c9; }

/* ---------------- alert banners ---------------- */
.alert { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-sm); align-items: flex-start; }
.alert .ai-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  flex-shrink: 0; }
.alert .at { font-weight: 650; font-size: 13.5px; margin-bottom: 2px; }
.alert .ad { font-size: 12.5px; line-height: 1.4; }
.alert-urgent { background: var(--bad-bg); }
.alert-urgent .ai-ic { background: var(--bad); color: #fff; }
.alert-urgent .at { color: var(--bad); }
.alert-urgent .ad { color: #8a2c20; }
.alert-attention { background: var(--warn-bg); }
.alert-attention .ai-ic { background: var(--warn); color: #fff; }
.alert-attention .at { color: #8a5b12; }
.alert-attention .ad { color: #8a5b12; }
.alert-info { background: var(--info-bg); }
.alert-info .ai-ic { background: var(--info); color: #fff; }
.alert-info .at { color: var(--info); }
.alert-info .ad { color: #1f567a; }
.alert .ai-ic svg { width: 17px; height: 17px; }

/* ---------------- SOS ---------------- */
.sos { width: 100%; background: var(--bad); color: #fff; border-radius: var(--r);
  padding: 16px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 16px; position: relative; overflow: hidden; }
.sos svg { width: 20px; height: 20px; }
.sos::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(192,57,43,.5); animation: sospulse 2s infinite; }
@keyframes sospulse { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.45);} 70% { box-shadow: 0 0 0 14px rgba(192,57,43,0);} 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0);} }

/* ---------------- list rows ---------------- */
.lrow { display: flex; align-items: center; gap: 13px; padding: 13px 0; }
.lrow + .lrow { border-top: 1px solid var(--line); }
.lrow .lt { flex: 1; min-width: 0; }
.lrow .lt .l1 { font-size: 14.5px; font-weight: 550; }
.lrow .lt .l2 { font-size: 12.5px; color: var(--stone); margin-top: 2px; }
.lrow .rt { text-align: right; flex-shrink: 0; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brick); flex-shrink: 0; }

/* ---------------- tabs ---------------- */
.tabs { display: flex; gap: 4px; background: var(--paper-2); border-radius: 12px; padding: 4px; }
.tabs button { flex: 1; padding: 9px 8px; border-radius: 9px; font-size: 13px; font-weight: 550;
  color: var(--stone); }
.tabs button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(21,19,15,.08); }

/* ---------------- progress ring ---------------- */
.ring-wrap { display: flex; flex-direction: column; align-items: center; }
.ring { position: relative; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.ring .rv { font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ring .rl { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 6px; }

/* thresholds */
.thresholds { display: flex; justify-content: space-between; margin-top: 18px; padding: 0 4px; }
.thresholds .th { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--stone-2); }

/* ---------------- forms ---------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 7px; color: var(--ink-text); }
.input, .textarea, .selectbox { width: 100%; background: var(--card); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 13px 14px; font-size: 15px; color: var(--ink); }
.input:focus, .textarea:focus { outline: none; border-color: var(--brick); }
.input::placeholder, .textarea::placeholder { color: var(--stone-2); }
.textarea { resize: none; line-height: 1.45; }

/* chip select */
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.chip { display: flex; align-items: center; gap: 9px; padding: 13px; border-radius: 13px;
  border: 1px solid var(--line-2); background: var(--card); font-size: 13.5px; font-weight: 550;
  text-align: left; }
.chip .ce { font-size: 18px; }
.chip.sel { border-color: var(--brick); background: var(--brick-bg); color: var(--brick-dk); }

/* radio person */
.person { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px;
  border: 1px solid var(--line-2); background: var(--card); width: 100%; }
.person.sel { border-color: var(--brick); background: var(--brick-bg); }
.person .pradio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2);
  flex-shrink: 0; position: relative; }
.person.sel .pradio { border-color: var(--brick); }
.person.sel .pradio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brick); }

/* otp */
.otp-row { display: flex; gap: 9px; justify-content: center; }
.otp-cell { width: 46px; height: 56px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--card); display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.otp-cell.fill { border-color: var(--brick); }
.otp-cell.cursor { border-color: var(--brick); box-shadow: 0 0 0 3px var(--brick-bg); }

/* ---------------- AI chat ---------------- */
.chat { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.bub { max-width: 82%; padding: 11px 14px; font-size: 14px; line-height: 1.42; }
.bub.ai { background: var(--card); border: 1px solid var(--line); align-self: flex-start;
  border-radius: 16px 16px 16px 5px; }
.bub.me { background: var(--brick); color: #fff; align-self: flex-end; border-radius: 16px 16px 5px 16px; }
.bub.me .bt { color: rgba(255,255,255,.7); }
.sys-msg { text-align: center; font-size: 12px; color: var(--stone); font-style: italic; padding: 4px 0; }
.bub .bt { font-family: "Geist Mono", monospace; font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone-2); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.bub .bt svg { width: 13px; height: 13px; flex-shrink: 0; }
.verdict .vt svg { width: 14px; height: 14px; flex-shrink: 0; }
.chat-input { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  display: flex; gap: 9px; align-items: flex-end; }
.chat-input .textarea { padding: 10px 13px; max-height: 90px; }
.chat-input .send { width: 44px; height: 44px; border-radius: 12px; background: var(--brick);
  color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.chat-input .send svg { width: 19px; height: 19px; }

/* case progress */
.caseprog { display: flex; align-items: flex-start; gap: 0; padding: 4px 0; }
.caseprog .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.caseprog .step .pd { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-2); color: var(--stone-2); z-index: 2; }
.caseprog .step.done .pd { background: var(--brick); color: #fff; }
.caseprog .step.active .pd { background: var(--brick); color: #fff; box-shadow: 0 0 0 4px var(--brick-bg); }
.caseprog .step .pd svg { width: 12px; height: 12px; }
.caseprog .step .pl { font-size: 9px; color: var(--stone); text-align: center; line-height: 1.2; max-width: 56px; }
.caseprog .step.done .pl, .caseprog .step.active .pl { color: var(--ink); font-weight: 550; }
.caseprog .step::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px;
  background: var(--paper-2); z-index: 1; }
.caseprog .step:first-child::before { display: none; }
.caseprog .step.done::before, .caseprog .step.active::before { background: var(--brick); }

/* verdict */
.verdict { border-radius: var(--r-sm); padding: 15px; margin: 4px 0; }
.verdict .vt { font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.verdict .vv { font-size: 15px; font-weight: 600; }
.verdict .vd { font-size: 13px; margin-top: 5px; }

/* calendar */
.cal { }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head .cm { font-size: 15px; font-weight: 650; }
.cal-head button { width: 32px; height: 32px; border-radius: 9px; background: var(--paper-2);
  display: grid; place-items: center; color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-grid .dow { text-align: center; font-size: 10px; font-weight: 600; color: var(--stone-2);
  padding: 4px 0; font-family: "Geist Mono", monospace; }
.cal-cell { aspect-ratio: 1; display: grid; place-items: center; font-size: 13px; border-radius: 9px;
  color: var(--ink-text); position: relative; }
.cal-cell.muted { color: var(--stone-2); opacity: .5; }
.cal-cell.today { background: var(--brick); color: #fff; font-weight: 650; }
.cal-cell.has-event::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--info); }
.cal-cell.today.has-event::after { background: #fff; }
.legend { display: flex; gap: 16px; margin-top: 14px; }
.legend .li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--stone); }
.legend .ld { width: 9px; height: 9px; border-radius: 50%; }

/* progress fill bar (inventory) */
.fill { height: 7px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-top: 8px; }
.fill > span { display: block; height: 100%; border-radius: 4px; background: var(--good); }
.fill.low > span { background: var(--bad); }
.fill.mid > span { background: var(--warn); }

/* checkbox select (inventory) */
.checkbox { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2);
  flex-shrink: 0; position: relative; }
.checkbox.on { background: var(--brick); border-color: var(--brick); }
.checkbox.on::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(42deg); }

/* empty state */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 10px; }
.empty .e-ic { width: 60px; height: 60px; border-radius: 18px; background: var(--paper-2);
  display: grid; place-items: center; color: var(--stone-2); margin-bottom: 4px; }
.empty .e-ic svg { width: 28px; height: 28px; }
.empty .et { font-size: 16px; font-weight: 650; }
.empty .ed { font-size: 13.5px; color: var(--stone); line-height: 1.45; max-width: 240px; }

/* language switch */
.lang { display: inline-flex; background: rgba(255,255,255,.16); border-radius: 999px; padding: 3px; }
.lang button { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.7); font-family: "Geist Mono", monospace; letter-spacing: 0.04em; }
.lang button.active { background: #fff; color: var(--brick); }
.lang.dark button { color: var(--stone); }
.lang.dark { background: var(--paper-2); }
.lang.dark button.active { background: var(--ink); color: #fff; }

/* bell */
.bell { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: grid; place-items: center; color: #fff; }
.bell svg { width: 19px; height: 19px; }
.bell .bdg { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #fff; color: var(--brick); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--brick); }

/* lease card */
.lease { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
  box-shadow: 0 8px 24px -16px rgba(21,19,15,.3); }
.lease .lr { display: flex; justify-content: space-between; }
.lease .lk { font-size: 11.5px; color: var(--stone); font-family: "Geist Mono", monospace;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.lease .lv { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin-top: 4px; }
.lease .lv.sm { font-size: 16px; font-weight: 650; }

/* mini score chip */
.score-chip { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line); }

/* toast */
.toast { position: absolute; left: 16px; right: 16px; bottom: calc(var(--nav-h) + 14px); z-index: 70;
  background: var(--ink); color: var(--paper); padding: 13px 16px; border-radius: 13px; font-size: 13.5px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.9,.3,1); }
.toast.show { transform: none; }
.toast svg { width: 18px; height: 18px; color: var(--good); flex-shrink: 0; }

/* full-screen success */
.success-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px; gap: 8px; }
.success-screen .s-ic { width: 80px; height: 80px; border-radius: 50%; background: var(--good-bg);
  display: grid; place-items: center; color: var(--good); margin-bottom: 12px; }
.success-screen .s-ic svg { width: 40px; height: 40px; }
.success-screen h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.success-screen p { font-size: 14.5px; color: var(--stone); line-height: 1.5; max-width: 280px; }

/* caption helper */
.cap { font-size: 12px; color: var(--stone); }
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.gap8{gap:8px}.gap10{gap:10px}

/* device caption under phone */
.device-cap { color: rgba(246,244,239,.5); font-family: "Geist Mono", monospace; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; }

/* fade-in screen transition */
.viewport > .screen-content { animation: fadein .22s ease; }
@keyframes fadein { from { opacity: .4; } to { opacity: 1; } }

/* ---------------- list row icon constraint ---------------- */
.lrow > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--stone-2); }

/* ---------------- login shell ---------------- */
.login-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.login-body  { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 24px; text-align: center; }
.login-body h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; }
.login-body p  { font-size: 13.5px; color: var(--stone); margin: 0 0 24px; }
.login-body .field { width: 100%; text-align: left; }
.login-logo { width: 68px; height: 68px; border-radius: 22px; background: var(--brick);
  display: grid; place-items: center; margin: 0 auto 20px; box-shadow: 0 8px 24px -8px rgba(196,74,38,.45); }
.logo-c { font-size: 32px; font-weight: 900; color: #fff; letter-spacing: -0.05em;
  font-family: "Geist", sans-serif; }


/* ---------------- phone field with +1 prefix ---------------- */
.phone-wrap { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); overflow: hidden; }
.phone-prefix { padding: 0 6px 0 14px; font-size: 15px; font-weight: 600; color: var(--ink); flex-shrink: 0; line-height: 1; }
.phone-wrap .input { border: none; box-shadow: none; flex: 1; border-radius: 0 10px 10px 0; padding-left: 4px; background: transparent; }
.phone-wrap .input:focus { border: none; box-shadow: none; outline: none; }
.phone-wrap:focus-within { border-color: var(--brick); }

/* Mobile: hide phone frame, show full screen */
@media (max-width: 480px) {
  body {
    background: var(--paper);
    padding: 0;
    display: block;
  }
  .device-wrap {
    display: block;
  }
  .device {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: var(--paper);
  }
  .screen {
    border-radius: 0;
    height: 100dvh;
    overflow-y: auto;
  }
  .island,
  .statusbar,
  .home-indicator,
  .device-cap {
    display: none;
  }
}