/* ============================================================
   CARDIER · Live hero phone screen (Home) — vanilla recreation
   of the app's home screen, authored at 390px and scaled to fit
   the device by JS (--app-scale). Dark theme only.
   ============================================================ */
.app-viewport { position: absolute; inset: 0; overflow: hidden; background: #070B14; }
.app-screen {
  position: absolute; top: 0; left: 0; width: 390px; height: 844px;
  transform-origin: top left; transform: scale(var(--app-scale, 0.74));
  background: #070B14; color: var(--ink);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}

/* status bar */
.ha-status { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; flex: none; }
.ha-time { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.ha-ind { display: flex; align-items: center; gap: 7px; }
.ha-ind svg { display: block; }

/* scroll body */
.ha-body { flex: 1; padding: 4px 22px 0; overflow: hidden; }

/* header */
.ha-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ha-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.ha-greet { font-family: var(--font-display); font-size: 30px; line-height: 1.04; margin-top: 7px; }
.ha-avatar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); flex: none;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-2);
  background: radial-gradient(120% 120% at 30% 20%, rgba(212,175,122,0.18), transparent 60%); }

/* portfolio panel */
.ha-port { margin-top: 18px; border-radius: 20px; padding: 20px; position: relative; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); }
.ha-port::before { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,122,0.10), transparent 70%); }
.ha-port-top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.ha-port-week { font-family: var(--font-mono); font-size: 11px; color: var(--sage); }
.ha-big { font-family: var(--font-display); font-size: 56px; line-height: 1; letter-spacing: -0.01em; margin-top: 8px; position: relative; }
.ha-avail { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-top: 8px; position: relative; }
.ha-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 16px; position: relative; }
.ha-track i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease); }
.ha-pct { position: absolute; right: 0; top: -2px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.ha-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 20px; position: relative; }
.ha-stat { padding-right: 14px; }
.ha-stat + .ha-stat { padding-left: 14px; border-left: 1px solid var(--line); }
.ha-stat .v { font-family: var(--font-mono); font-size: 17px; font-weight: 600; }
.ha-stat .v.gold { color: var(--gold); } .ha-stat .v.sage { color: var(--sage); }
.ha-stat .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }

/* needs attention */
.ha-sec { display: flex; align-items: baseline; justify-content: space-between; margin-top: 26px; }
.ha-sec .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.ha-sec .r { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.ha-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ha-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line); position: relative; overflow: hidden; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ha-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.ha-row.urgent::before { background: var(--urgent); }
.ha-row.amber::before { background: var(--amber); }
.ha-row.gold::before { background: var(--gold); }
.ha-row .n { font-size: 15px; font-weight: 600; }
.ha-row .s { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.ha-row .grow { flex: 1; }
.ha-row .amt { font-family: var(--font-mono); font-size: 15px; color: var(--ink-2); margin-right: 4px; white-space: nowrap; }
.ha-row .day { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 999px; margin-left: 12px; flex: none; white-space: nowrap; }
.ha-row.urgent .day { color: var(--urgent); background: rgba(230,107,92,0.16); }
.ha-row.amber .day { color: var(--amber); background: rgba(228,167,82,0.16); }
.ha-row.gold .day { color: var(--gold); background: var(--gold-soft); }

/* wallet peek */
.ha-wallet { display: flex; align-items: baseline; justify-content: space-between; margin-top: 26px; }
.ha-wallet .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.ha-wallet .r { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.ha-peek { position: relative; height: 96px; margin-top: 14px; }
.ha-peek .cc-slot { position: absolute; top: 0; }
.ha-peek .pk-1 { left: 0; }
.ha-peek .pk-2 { right: 0; }

/* tab bar */
.ha-tabs { flex: none; display: flex; align-items: center; justify-content: space-around; height: 70px; padding-bottom: 14px;
  background: rgba(7,11,20,0.92); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
.ha-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--ink-3); }
.ha-tab.on { color: var(--accent); }
.ha-tab svg { display: block; width: 22px; height: 22px; }
.ha-tab span { font-size: 9.5px; letter-spacing: 0.02em; }

/* ============================================================
   Additional live screens — Tracker, Analytics, Compare, Browse
   ============================================================ */
/* screen header: back / title / action */
.ha-nav { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.ha-navbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); flex: none; background: rgba(255,255,255,0.03); }
.ha-navbtn svg { width: 15px; height: 15px; }
.ha-nav .tt { flex: 1; min-width: 0; }
.ha-nav .tt .ttl { font-family: var(--font-display); font-size: 22px; line-height: 1.05; margin-top: 3px; }
.ha-x { margin-left: auto; }

.ha-handle { width: 38px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.18); margin: 2px auto 14px; }
.ha-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ha-sheet-head .ttl { font-family: var(--font-display); font-size: 30px; line-height: 1.04; margin-top: 4px; }

/* tracker */
.ha-bigcard { margin: 14px 0 2px; display: flex; justify-content: center; }
.ha-pill-pro { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px 16px; border-radius: 12px; border: 1px dashed var(--line-2); }
.ha-pill-pro .pro { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--gold); border: 1px solid var(--gold-soft); padding: 3px 7px; border-radius: 6px; }
.ha-pill-pro .lbl { font-size: 13px; color: var(--ink-2); flex: 1; }
.ha-pill-pro .chev { color: var(--ink-3); }
.ha-ben { margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.ha-ben-top { display: flex; align-items: center; gap: 10px; }
.ha-ben-top .n { font-size: 15px; font-weight: 600; }
.ha-ben-top .cnt { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; margin-left: auto; }
.ha-ben .desc { font-size: 12.5px; color: var(--ink-2); margin-top: 9px; }
.ha-ben .val { margin-top: 11px; font-family: var(--font-mono); font-size: 18px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.ha-ben .val .strike { color: var(--ink-3); text-decoration: line-through; font-size: 13px; font-weight: 400; }
.ha-ben .val .mo { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.ha-months { display: grid; grid-template-columns: repeat(12,1fr); gap: 5px; margin-top: 14px; }
.ha-mo { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; font-weight: 600; }
.ha-mo.on { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #241a08; }
.ha-mo.off { border: 1px solid var(--line); color: var(--ink-4); }

/* analytics */
.ha-net { font-family: var(--font-display); font-size: 48px; line-height: 1; letter-spacing: -0.01em; color: var(--sage); margin-top: 6px; }
.ha-net.gold { color: var(--gold); }
.ha-after { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.ha-chart { display: grid; grid-template-columns: repeat(12,1fr); gap: 5px; align-items: end; height: 64px; margin-top: 16px; }
.ha-chart .b { background: linear-gradient(180deg, var(--gold), rgba(212,175,122,0.2)); border-radius: 3px 3px 1px 1px; height: 100%; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); align-self: end; }
.ha-chart .b.peak { background: linear-gradient(180deg, var(--sage), rgba(111,191,138,0.2)); }
.ha-cap-note { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: 12px; }
.ha-cap-note b { color: var(--ink); font-family: var(--font-mono); }
.ha-cats { margin-top: 14px; display: flex; flex-direction: column; gap: 15px; }
.cat-row .cat-top { display: flex; justify-content: space-between; align-items: baseline; }
.cat-row .cat-n { font-size: 13.5px; }
.cat-row .cat-v { font-family: var(--font-mono); font-size: 12px; }
.cat-row .cat-v .t { color: var(--ink-3); }
.cat-row .cat-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 8px; overflow: hidden; }
.cat-row .cat-fill { height: 100%; border-radius: 999px; width: 100%; transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease); }

/* compare */
.cmp-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 16px; }
.cmp-col { border: 1px solid var(--line); border-radius: 12px; padding: 10px; position: relative; }
.cmp-col.best { border-color: var(--gold-soft); }
.cmp-best { position: absolute; top: -9px; left: 10px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: #241a08; background: var(--gold); padding: 3px 7px; border-radius: 5px; }
.cmp-col .cc-slot { margin-bottom: 9px; }
.cmp-col .cn { font-size: 12px; font-weight: 600; line-height: 1.15; }
.cmp-col .ci { font-size: 9.5px; color: var(--ink-3); margin-top: 2px; }
.cmp-table { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row .rl { font-size: 12px; color: var(--ink-2); }
.cmp-row .rv { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.cmp-row .rv.neg { color: var(--urgent); }
.cmp-row .rv.dim { color: var(--ink-4); }

/* browse */
.brz-intel { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-2); margin-top: 8px; }
.brz-intel .gold { color: var(--gold); }
.brz-intel .sep { color: var(--ink-4); }
.brz-hero { position: relative; display: flex; justify-content: center; margin-top: 14px; padding: 14px 0; }
.brz-hero::before { content: ""; position: absolute; inset: -10% 10%; background: radial-gradient(circle at 50% 50%, rgba(212,175,122,0.22), transparent 62%); }
.brz-hero .cc-slot { position: relative; }
.brz-issuer { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.brz-reason { margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.brz-actions { display: flex; gap: 10px; margin-top: 18px; padding: 0 22px 22px; }
.brz-actions .add { flex: 1; background: var(--paper); color: var(--paper-ink); border-radius: 12px; padding: 15px; text-align: center; font-weight: 600; font-size: 14px; }
.brz-actions .cmp { border: 1px solid var(--line-2); border-radius: 12px; padding: 15px 22px; font-size: 14px; color: var(--ink); }

/* profile */
.ha-twostat { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ha-twostat .col .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ha-twostat .col .v { font-family: var(--font-display); font-size: 30px; margin-top: 8px; }
.ha-twostat .col .v.gold { color: var(--gold); }
.ha-twostat .col .s { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.ha-twostat .col .s.sage { color: var(--sage); }
.ha-list { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ha-li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ha-li:last-child { border-bottom: 0; }
.ha-li .n { font-size: 14px; font-weight: 600; }
.ha-li .s { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.ha-li .chev { margin-left: auto; color: var(--ink-3); }
.ha-rowhead { display: flex; align-items: baseline; justify-content: space-between; margin-top: 24px; }
.ha-rowhead .edit { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.ha-cardrow { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; }
.ha-cardrow .n { font-size: 14px; font-weight: 600; }
.ha-cardrow .p { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }