/* Nest Egg v2 demo — styles for new features. Builds on styles.css (v1 look: gold on deep green). */
:root { --pos: #8fd45e; --neg: #ff7b7b; --sheet-bg: #0b1d13; --focus: #f0d060; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--gold); color: #04140c; padding: 8px 14px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
button:disabled { opacity: .45; cursor: default; }
input, select, textarea { font: inherit; color: var(--text); }
.scroll-body { padding-bottom: calc(96px + var(--safe-b)) !important; scroll-behavior: smooth; }
.screen.active { animation: fadeIn .22s ease; }
@keyframes fadeIn { from { transform: translateY(4px); } to { transform: none; } } /* no opacity: lets the first screen count as a contentful paint */
.micro { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.center { text-align: center; }
.muted-p { color: var(--muted); font-size: .86rem; line-height: 1.45; margin: 6px 0 10px; }
.pos { color: var(--pos) !important; } .neg { color: var(--neg) !important; } .gold { color: var(--gold-bright) !important; }
.spacer { flex: 1; }
.btnlike { width: 100%; text-align: left; display: flex; }
.notice.slim { padding: 8px 10px; font-size: .76rem; margin-bottom: 10px; }
.notice.btnlike { display: block; }
.disclaimer { font-size: .72rem; color: var(--muted); margin-top: 8px; }
.banner-badge { margin-left: auto; }
.demo-banner { gap: 8px; }
.home-footer.in-app { justify-content: center; margin: 18px 0 6px; }

/* buttons */
.btn-primary { display: block; width: 100%; text-align: center; padding: 13px 16px; border-radius: var(--radius-pill); background: linear-gradient(180deg, #e7c75a, #c79f2c); color: #1a1405; font-weight: 800; font-size: .95rem; border: 0; margin: 6px 0; text-decoration: none; }
.btn-primary.alt { background: linear-gradient(180deg, #9fdc6c, #6fbf4a); color: #08200f; }
.btn-primary.sm { display: inline-block; width: auto; padding: 9px 16px; font-size: .84rem; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--gold-text); font-weight: 700; font-size: .88rem; text-decoration: none; background: rgba(0,0,0,.15); }
.btn-ghost.sm { padding: 8px 12px; font-size: .8rem; margin: 4px 0; }
.btn-ghost.xs { padding: 5px 10px; font-size: .74rem; }
.btn-ghost.danger, .btn-danger { color: var(--neg); border-color: rgba(255,123,123,.45); }
.btn-danger { padding: 12px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(255,123,123,.5); font-weight: 700; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.btn-row.two > * { flex: 1 1 0; min-width: 0; }
.btn-row .btn-primary { margin: 0; }
.icon-btn.sm { width: 32px; height: 32px; font-size: .9rem; position: relative; }
.icon-btn.xs { width: 26px; height: 26px; font-size: .62rem; flex-shrink: 0; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dot-count { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.badge-live { color: #0b2210; background: var(--pos); border-color: transparent; }
.badge-cached { color: #2a1d02; background: var(--orange); border-color: transparent; }
.badge-demo { color: var(--gold-bright); border: 1px dashed var(--gold); background: transparent; }
.badge-pro { background: linear-gradient(180deg, #f0d060, #c79f2c); color: #1a1405; font-weight: 900; letter-spacing: .04em; border: 0; font-size: .58rem; padding: 2px 6px; border-radius: 6px; vertical-align: middle; }
.kind-tag { font-size: .58rem; font-weight: 800; letter-spacing: .05em; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border-soft); color: var(--muted); vertical-align: middle; }
.kind-tag.stake { color: var(--pos); border-color: rgba(143,212,94,.45); }

/* lock */
#screen-lock, #screen-onboard { background: radial-gradient(120% 70% at 50% 0%, #0f2c1b 0%, var(--bg) 60%); }
.lock-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 24px calc(20px + var(--safe-b)); gap: 6px; }
.lock-egg { filter: drop-shadow(0 6px 24px rgba(212,175,55,.35)); }
.lock-title { font-family: var(--serif); color: var(--gold-text); margin: 6px 0 0; font-size: 1.7rem; }
.lock-sub { color: var(--muted); margin: 2px 0 8px; }
.pin-dots { display: flex; gap: 16px; margin: 6px 0; }
.pin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold); transition: background .12s; }
.pin-dots span.on { background: var(--gold); }
.pin-dots.err { animation: shake .35s; } .pin-dots.err span { border-color: var(--danger); }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pin-hint { min-height: 1.3em; color: var(--gold-text); font-size: .85rem; margin: 4px 0 10px; text-align: center; }
.keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; }
.keypad button { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--border); background: rgba(13,36,24,.8); font-size: 1.6rem; color: var(--text); display: grid; place-items: center; }
.keypad button:active { background: rgba(212,175,55,.2); }
.kp-face svg { width: 30px; height: 30px; fill: none; stroke: var(--gold-text); stroke-width: 1.6; stroke-linecap: round; }
.kp-face.dim { opacity: .55; } .kp-face.scan { animation: pulse .5s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 0 8px rgba(212,175,55,.25); } }
.lock-foot { color: var(--muted); font-size: .8rem; margin-top: 18px; }

/* onboarding */
.ob-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px 26px calc(24px + var(--safe-b)); }
.ob-card { text-align: center; }
.ob-icon { font-size: 4rem; margin-bottom: 12px; }
.ob-title { font-family: var(--serif); color: var(--gold-text); font-size: 1.55rem; line-height: 1.2; margin: 0 0 12px; outline: none; }
.ob-text { color: var(--text); line-height: 1.55; font-size: 1rem; }
.pin-big { font-size: 1.3rem; color: var(--gold-bright); letter-spacing: .12em; }
.ob-dots { display: flex; justify-content: center; gap: 8px; margin: 26px 0; }
.ob-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.ob-dots span.on { background: var(--gold); width: 22px; border-radius: 4px; }
.ob-actions { display: flex; gap: 10px; } .ob-actions > * { flex: 1; margin: 0; }

/* overall bits */
.net-worth-hero.sm .nw-value { font-size: 2rem; }
.sum-strip { display: flex; gap: 8px; margin: 6px 0 12px; }
.sum-strip > div { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; }
.sum-strip b { font-size: .98rem; color: var(--gold-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.tool { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; min-height: 58px; }
.tool .ti { grid-row: span 2; font-size: 1.3rem; }
.tool .tl { font-size: .78rem; color: var(--muted); font-weight: 700; }
.tool .tv { font-size: .86rem; color: var(--gold-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(212,175,55,.1); font-size: .87rem; }
.kv:last-child { border-bottom: 0; } .kv span { color: var(--muted); } .kv b { color: var(--text); text-align: right; }
.kv.sm { font-size: .8rem; padding: 5px 0; }
.kv.btnlike { justify-content: space-between; }
.glance-row { display: flex; flex-direction: column; gap: 6px; }
.empty-state { text-align: center; padding: 22px 14px; border: 1px dashed var(--border-dashed); border-radius: 16px; margin: 10px 0; }
.es-icon { font-size: 2.2rem; } .empty-state h3 { margin: 6px 0; color: var(--gold-text); font-size: 1rem; } .empty-state p { color: var(--muted); font-size: .85rem; margin: 0 0 10px; }
.holding-row { width: 100%; text-align: left; position: relative; }
.holding-row.static { cursor: default; }
.h-pl { font-size: .74rem; text-align: right; }
.h-right { text-align: right; }
.chips { display: flex; gap: 6px; align-items: center; margin: 8px 0; overflow-x: auto; scrollbar-width: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; flex-shrink: 0; text-decoration: none; display: inline-block; }
.chip.active { background: var(--gold); color: #1a1405; border-color: var(--gold); }

/* charts */
.chart-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.nw-chg { font-size: .82rem; font-weight: 700; }
.lw-box { position: relative; border-radius: 10px; overflow: hidden; background: #0a1f14; }
.lw { width: 100%; min-height: 120px; }
#h-lw { height: 250px; }
.hud { position: absolute; top: 6px; left: 8px; z-index: 3; background: rgba(4,20,12,.88); border: 1px solid var(--border-soft); border-radius: 8px; padding: 4px 8px; font-size: .74rem; display: flex; gap: 8px; pointer-events: none; }
.hud-t { color: var(--muted); } .hud-p { color: var(--gold-bright); font-weight: 800; }
body.hide-amounts .chart-amt .lw { filter: blur(5px); }
body.hide-amounts .chart-amt .hud { display: none; }
.chart-fallback { color: var(--muted); text-align: center; padding: 40px 10px; font-size: .85rem; }
.tf-row { display: flex; gap: 4px; margin: 8px 0; overflow-x: auto; scrollbar-width: none; }
.tf-row::-webkit-scrollbar { display: none; }
.tf, .tg { flex: 1 0 auto; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--border-soft); font-size: .76rem; font-weight: 700; color: var(--gold-text); min-width: 38px; }
.tf.on, .tg.on { background: var(--gold); color: #1a1405; border-color: var(--gold); }
.tf-row.sm .tf { flex: 0 0 auto; padding: 5px 10px; }
.tg-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.tg { flex: 0 0 auto; }
.chart-status { margin-left: auto; font-size: .72rem; color: var(--muted); }
.lw-rsi { height: 70px; margin-top: 4px; border-radius: 8px; overflow: hidden; }
.h-head { display: flex; justify-content: space-between; align-items: flex-start; margin: 4px 0 8px; gap: 10px; }
.h-big { font-size: 1.6rem; font-weight: 800; color: var(--gold-text); }
.h-name { color: var(--muted); font-size: .86rem; }
.h-pricebox { text-align: right; } .h-price { font-size: 1.25rem; font-weight: 800; } .h-chg { font-size: .85rem; font-weight: 700; margin-bottom: 3px; }
.chart-toolbar { display: flex; gap: 6px; margin-bottom: 4px; }
.prov-chip { background: rgba(212,175,55,.08); }
.ext-open { margin: 8px 0 12px; }
.tv-wrap { height: 420px; border-radius: 12px; overflow: hidden; background: #0a1f14; border: 1px solid var(--border-soft); }
.tv-loading { padding: 40px 16px; text-align: center; color: var(--muted); font-size: .86rem; }
.open-in { margin: 4px 0 12px; } .open-in summary { cursor: pointer; color: var(--gold-text); font-size: .84rem; font-weight: 700; padding: 8px 0; }
.open-in-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.src-list { margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--border-soft); }
.fs-chart { position: absolute; inset: 0; z-index: 60; background: #04140c; display: flex; flex-direction: column; padding: calc(6px + var(--safe-t)) 10px calc(6px + var(--safe-b)); }
.fs-chart[hidden] { display: none; }
.fs-top { display: flex; align-items: center; gap: 10px; position: relative; }
.fs-title { flex: 1; font-size: .95rem; } .fs-hud { position: static; }
.fs-lw { flex: 1; min-height: 140px; border-radius: 8px; overflow: hidden; margin-top: 6px; }
.fs-rsi { height: 22%; min-height: 60px; margin-top: 4px; }
.fs-controls .tf-row, .fs-controls .tg-row { margin: 4px 0; }
body.fs-on #ai-fab { display: none; }

/* banks / exchanges */
.conn-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; margin: 10px 0; }
.conn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.conn-title { flex: 1; min-width: 0; } .conn-title h3 { margin: 0; font-size: 1rem; color: var(--gold-text); }
.inst-logo { display: inline-grid; place-items: center; border-radius: 10px; background: var(--c); color: #fff; font-weight: 900; font-size: .78rem; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.acc-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(212,175,55,.1); text-align: left; }
.acc-name { display: flex; flex-direction: column; font-size: .88rem; } .acc-bal { font-weight: 800; color: var(--gold-text); }
.acc-row.debt .acc-bal { color: var(--neg); }
.pm-card { width: 100%; text-align: left; display: block; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px; margin: 8px 0; }
.pm-top { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.pm-side { font-size: .66rem; font-weight: 900; padding: 3px 7px; border-radius: 6px; flex-shrink: 0; }
.pm-side.yes { background: rgba(143,212,94,.2); color: var(--pos); } .pm-side.no { background: rgba(255,123,123,.18); color: var(--neg); }
.pm-contract { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.pm-grid > div { display: flex; flex-direction: column; } .pm-grid b { font-size: .86rem; }
.manual-row { width: 100%; text-align: left; } .manual-row .micro { font-family: var(--font); }

/* sheet */
.sheet-backdrop { position: absolute; inset: 0; z-index: 45; background: rgba(0,0,0,0); display: flex; align-items: flex-end; transition: background .22s; }
.sheet-backdrop[hidden] { display: none; }
.sheet-backdrop.open { background: rgba(0,0,0,.55); }
.sheet { width: 100%; max-height: 90%; background: var(--sheet-bg); border: 1px solid var(--border); border-bottom: 0; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -20px 50px rgba(0,0,0,.5); }
.sheet-backdrop.open .sheet { transform: none; }
.sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: 8px auto 2px; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 14px 8px; border-bottom: 1px solid var(--border-soft); }
.sheet-head h2 { flex: 1; margin: 0; font-size: 1.05rem; color: var(--gold-text); font-family: var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-back { font-size: 1.6rem; color: var(--gold-text); width: 32px; height: 32px; line-height: 1; }
.sheet-body { overflow-y: auto; padding: 12px 14px calc(18px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
body.sheet-open #ai-fab { opacity: 0; pointer-events: none; }

/* forms */
.ne-form { display: flex; flex-direction: column; gap: 2px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.field > label, .flabel { font-size: .78rem; font-weight: 700; color: var(--gold-text); }
.field input, .field select, .field textarea, .search-row input, .field-inline input, .set-row select { width: 100%; background: #06170e; border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; font-size: 1rem; min-height: 44px; }
.field input:focus, .field select:focus, .search-row input:focus { border-color: var(--gold-bright); }
.field input::placeholder, .search-row input::placeholder { color: #8a977f; }
.f-help { font-size: .72rem; color: var(--muted); } .f-help code { color: var(--gold-text); }
.field-toggle { margin: 6px 0 10px; }
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 46px; height: 28px; margin: 0; cursor: pointer; }
.slider { width: 46px; height: 28px; border-radius: 14px; background: #263b2e; border: 1px solid var(--border-soft); position: relative; flex-shrink: 0; transition: background .15s; }
.slider::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #d8d3c0; top: 2px; left: 2px; transition: transform .15s; }
.switch input:checked + .slider { background: var(--sprout); } .switch input:checked + .slider::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .slider { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch-label { font-size: .88rem; display: flex; flex-direction: column; gap: 2px; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.emoji-input { width: 58px !important; text-align: center; font-size: 1.3rem !important; padding: 6px !important; }
.emoji-pick { width: 34px; height: 34px; border-radius: 8px; font-size: 1.1rem; background: rgba(255,255,255,.04); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 50%; background: var(--c); position: relative; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--sheet-bg), 0 0 0 5px var(--gold-bright); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; } .form-actions .btn-primary { flex: 1; margin: 0; }
.field-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.field-inline label { font-size: .84rem; color: var(--muted); flex: 1; } .field-inline input { width: 120px; flex: 0 0 120px; }
.search-row { display: flex; gap: 8px; margin: 8px 0; align-items: center; } .search-row input { flex: 1; }
.seg { display: flex; gap: 6px; margin: 8px 0 12px; }
.seg-b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-card); font-size: .8rem; cursor: pointer; text-align: center; }
.seg-b span { font-size: .66rem; color: var(--muted); }
.seg-b.on { border-color: var(--gold); background: rgba(212,175,55,.16); color: var(--gold-bright); }
.seg-b:has(input:focus-visible) { outline: 2px solid var(--focus); }
.seg.four .seg-b { font-size: .7rem; padding: 8px 3px; }

/* settings */
.set-panel { padding: 4px 12px; }
.set-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(212,175,55,.1); font-size: .9rem; text-align: left; min-height: 46px; cursor: pointer; }
.set-row:last-child { border-bottom: 0; }
.set-row .sv { color: var(--muted); font-size: .8rem; text-align: right; max-width: 55%; }
.set-row select { width: auto; min-height: 36px; padding: 6px 10px; font-size: .85rem; }
.set-row.tog { cursor: default; }
.sheet-body > .set-row { border-bottom: 1px solid rgba(212,175,55,.12); }
.prov-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.prov { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-card); }
.prov.on { border-color: var(--gold); background: rgba(212,175,55,.14); }
.prov.on .prov-name::before { content: "● "; color: var(--gold-bright); }
.prov-name { font-size: .88rem; font-weight: 700; } .prov-meta { font-size: .7rem; color: var(--muted); white-space: nowrap; }

/* passive / staking / debt */
.runway { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.runway-num { font-size: 2.2rem; font-weight: 900; color: var(--gold-bright); }
.runway-txt { font-size: .86rem; }
.bar-fill { background: var(--sprout-bright); transition: width .4s ease; }
.bar-fill.gold { background: linear-gradient(90deg, #c79f2c, #f0d060); } .bar-fill.over { background: var(--danger); }
.stake-row { width: 100%; display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 11px 12px; margin: 6px 0; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; }
.stake-row .right { text-align: right; }
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.cmp { display: flex; flex-direction: column; gap: 2px; padding: 9px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); font-size: .82rem; }
.cmp.on { border-color: var(--gold); }
.debt-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 8px 10px; }
.dr-n { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #1a1405; font-weight: 900; font-size: .78rem; display: grid; place-items: center; flex-shrink: 0; }
.dr-main { flex-direction: column; gap: 2px; min-width: 0; } .dr-mv { display: flex; flex-direction: column; gap: 4px; }
.note-row { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 12px; margin: 6px 0; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); }
.note-row.unread { border-color: var(--gold); } .note-row .ni { font-size: 1.2rem; } .note-row .nt { flex: 1; display: flex; flex-direction: column; font-size: .86rem; gap: 2px; }
.alert-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(212,175,55,.1); }
.snap { white-space: pre-wrap; font-size: .72rem; background: #06170e; border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px; color: var(--muted); max-height: 160px; overflow: auto; }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; } .modal-actions > * { flex: 1; }
.modal .got-it { width: 100%; }

/* budget */
.subnav { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 10px; padding-bottom: 2px; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.period-nav { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.pn-label { flex: 1; text-align: center; display: flex; flex-direction: column; } .pn-label b { color: var(--gold-text); }
.surplus-box { display: flex; flex-direction: column; gap: 6px; }
.surplus-box .sv.neg { color: var(--neg); }
.bgroup { background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 4px solid var(--gc); border-radius: 14px; padding: 10px; margin: 10px 0; }
.bg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bg-title { flex: 1; font-weight: 800; color: var(--gold-text); font-size: .95rem; gap: 6px; min-width: 0; }
.bg-sum { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.bcat { display: flex; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(212,175,55,.08); }
.bc-main { flex-direction: column; gap: 4px; min-width: 0; }
.bc-top { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; width: 100%; }
.bc-top > span:last-child { white-space: nowrap; font-weight: 700; }
.bc-mv { display: flex; flex-direction: column; gap: 3px; }
.panel.tight { padding: 2px 12px; }
.tx-row.btnlike { gap: 10px; text-align: left; }
.tx-l { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .tx-l b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-a { white-space: nowrap; font-weight: 700; }
.split-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.split-row select { flex: 1; min-width: 0; background: #06170e; border: 1px solid var(--border); border-radius: 10px; padding: 8px; font-size: .85rem; }
.split-row input { width: 92px; background: #06170e; border: 1px solid var(--border); border-radius: 10px; padding: 8px; font-size: .9rem; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-h { text-align: center; font-size: .66rem; color: var(--muted); font-weight: 800; padding: 2px 0; }
.cal-c { aspect-ratio: 1; border-radius: 8px; background: rgba(255,255,255,.03); font-size: .76rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; }
.cal-c.empty { background: none; } .cal-c i { font-style: normal; font-size: .62rem; line-height: 1; }
.cal-c.has { background: rgba(212,175,55,.14); border: 1px solid var(--border-soft); color: var(--gold-text); font-weight: 800; }
.cal-c.today { box-shadow: inset 0 0 0 2px var(--sprout-bright); }
.bill-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin: 6px 0; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); }
.bill-row.soon { border-color: var(--orange); }
.br-main { flex-direction: column; gap: 2px; min-width: 0; } .br-amt { font-weight: 800; white-space: nowrap; }
.goal-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px 12px; margin: 8px 0; }
.gc-main { flex-direction: column; gap: 6px; margin-bottom: 6px; }

/* linking */
.inst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.inst { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-soft); font-size: .74rem; font-weight: 700; text-align: center; min-height: 92px; }
.consent { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; }
.consent h3 { margin: 4px 0; font-size: 1.05rem; line-height: 1.35; }
.consent-logos { display: flex; align-items: center; gap: 12px; margin: 6px 0; } .consent-logos .dots { color: var(--gold); letter-spacing: 2px; }
.scopes { list-style: none; padding: 10px 14px; margin: 0; text-align: left; width: 100%; background: var(--bg-card); border-radius: 12px; font-size: .86rem; line-height: 1.8; }
.scopes.no li { color: var(--muted); }
.scopes.found { max-height: 220px; overflow: auto; }
.big-check { width: 64px; height: 64px; border-radius: 50%; background: var(--sprout); color: #08200f; display: grid; place-items: center; font-size: 2rem; font-weight: 900; animation: pop .35s ease; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.fake-login { align-items: stretch; } .fake-login .consent-logos { justify-content: center; }
.connecting { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 10px; text-align: center; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(212,175,55,.2); border-top-color: var(--gold-bright); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.receipt-prev { max-width: 160px; max-height: 200px; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; }
.receipt-note { display: flex; gap: 10px; align-items: flex-start; } .receipt-thumb { width: 56px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

/* voice / capture */
.voice { display: flex; flex-direction: column; gap: 6px; }
.mic-big { width: 84px; height: 84px; border-radius: 50%; margin: 6px auto; font-size: 2.2rem; background: radial-gradient(circle at 40% 35%, #f0d060, #a88b3a); box-shadow: 0 8px 26px rgba(212,175,55,.35); display: grid; place-items: center; }
.mic-big.on, .mic-sm.on { animation: pulse .7s infinite alternate; background: radial-gradient(circle at 40% 35%, #ff9b9b, #c94b4b); }
.parse-card { background: var(--bg-card); border: 1px solid var(--gold); border-radius: 14px; padding: 10px 12px; margin: 6px 0; }
.parse-card p { margin: 2px 0 8px; } .parse-card.warn { border-color: var(--orange); }

/* AI assistant */
.ai-fab { position: absolute; right: 14px; bottom: calc(16px + var(--safe-b)); z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff1b8 0%, #f0d060 30%, #c79f2c 75%, #8a6d1f 100%); border: 2px solid rgba(255,240,180,.7); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 18px rgba(240,208,96,.45); transition: transform .15s, opacity .2s; }
.ai-fab:hover { transform: scale(1.05); } .ai-fab:active { transform: scale(.95); }
.ai-fab img { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.ai-fab .ai-spark { position: absolute; top: 3px; right: 6px; font-size: .9rem; color: #fff; text-shadow: 0 0 6px #fff; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.8) rotate(20deg); } }
.ai-fab[hidden] { display: none; }
#screen-home.active ~ .ai-fab { bottom: calc(12px + var(--safe-b)); width: 50px; height: 50px; }
.ai { display: flex; flex-direction: column; gap: 8px; min-height: 52vh; }
.ai-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-log { flex: 1; overflow-y: auto; max-height: 44vh; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.msg { max-width: 92%; padding: 9px 12px; border-radius: 16px; font-size: .88rem; line-height: 1.45; }
.msg p { margin: 0 0 6px; } .msg p:last-child { margin-bottom: 0; } .msg ul { margin: 4px 0 6px; padding-left: 18px; } .msg li { margin: 2px 0; }
.msg.ai { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: rgba(212,175,55,.2); border: 1px solid var(--border); border-bottom-right-radius: 4px; }
.msg .chips { margin: 8px 0 0; }
.typing { color: var(--muted); animation: pulseTxt 1s infinite; } @keyframes pulseTxt { 50% { opacity: .3; } }
.ai-sugs { margin: 0; }
.ai-sugs .chip { white-space: normal; text-align: left; flex-shrink: 1; }
.ai-input { display: flex; gap: 6px; align-items: center; position: sticky; bottom: 0; background: var(--sheet-bg); padding-top: 4px; }
.ai-input input { flex: 1; min-width: 0; background: #06170e; border: 1px solid var(--border); border-radius: 22px; padding: 11px 14px; font-size: 1rem; min-height: 44px; }
.ai-input .btn-primary { margin: 0; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.mic-sm { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); font-size: 1.1rem; flex-shrink: 0; background: rgba(212,175,55,.1); }

/* home: keep v1 fit; small tweaks */
#screen-home .home-top-row { justify-content: flex-end; }

/* reduced motion */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.reduce-motion .wealth-dollar { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* landscape: chart fills screen */
@media (orientation: landscape) and (max-height: 500px) { .fs-chart { padding: 4px 10px; } .fs-controls { display: flex; gap: 10px; align-items: center; } .fs-controls .tf-row { flex: 1; } }
@media (min-width: 431px) { body { background: #010805; } }
/* on Home, float the assistant top-left so it never covers tiles / cross-links (home must fit one screen) */
#screen-home.active ~ .ai-fab { top: calc(42px + var(--safe-t)); bottom: auto; left: 18px; right: auto; width: 46px; height: 46px; }
#screen-home.active ~ .ai-fab img { width: 26px; height: 26px; }
/* never let focus/scrollIntoView scroll the fixed app frame itself */
html, body { overflow: hidden; overscroll-behavior: none; }
.phone-shell { overflow: clip; }
/* full-screen chart covers the whole viewport (landscape fills the screen) */
.fs-chart { position: fixed; inset: 0; }
@media (orientation: landscape) and (max-height: 500px) { .fs-controls .tf, .fs-controls .tg { padding: 5px 8px; min-width: 32px; font-size: .72rem; } .fs-rsi { height: 26%; } }
.fs-hud { display: flex; gap: 8px; font-size: .8rem; } .fs-hud[hidden] { display: none; }
.demo-banner-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#price-badge { flex-shrink: 0; max-width: 58%; } #price-badge .badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* real logos on white rounded tiles */
.inst-logo { position: relative; overflow: hidden; }
.inst-logo.has-img { background: #fff; box-shadow: 0 0 0 1px rgba(212,175,55,.35); border-radius: 10px; }
.inst-logo.has-img img { width: 74%; height: 74%; object-fit: contain; display: block; }
.inst-logo.has-img .mono { display: none; }
.inst-logo .mono { line-height: 1; }
.prov-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prov .inst-logo, .chip .inst-logo { border-radius: 7px; }
.chip-logo, .prov-chip { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Add your own institution ---------- */
.inst-add { border: 2px dashed rgba(212,175,55,.55); background: transparent; color: var(--gold-bright); justify-content: center; cursor: pointer; }
.inst-add .plus { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1.4rem; border: 1px dashed rgba(212,175,55,.55); }
.inst-add:hover, .inst-add:focus-visible { background: rgba(212,175,55,.08); }
.inst.is-custom { opacity: .95; }
.no-match { text-align: center; padding: 6px 4px 12px; } .no-match p { margin: 0 0 8px; color: var(--muted); font-size: .88rem; }
.wiz-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 12px; }
.wiz-steps li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); padding: 6px; border-radius: 10px; background: var(--bg-card); }
.wiz-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .7rem; border: 1px solid var(--border); flex-shrink: 0; }
.wiz-steps li.on { color: var(--gold-bright); box-shadow: inset 0 0 0 1px var(--gold); } .wiz-steps li.on span { background: var(--gold); color: #1a1400; border-color: var(--gold); }
.wiz-steps li.done span { background: var(--sprout); color: #08200f; border-color: var(--sprout); }
.cw-logo-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; } .cw-logo-row .micro { flex: 1; }
.cw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 1rem; }
.method-list { display: flex; flex-direction: column; gap: 8px; }
.method { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-soft); cursor: pointer; }
.method b { display: block; font-size: .92rem; margin-bottom: 2px; } .method .mi { font-size: 1.3rem; line-height: 1.2; }
.method.on { border-color: var(--gold); background: rgba(212,175,55,.12); }
.help-card { margin: 10px 0; background: rgba(111,195,212,.08); border: 1px solid rgba(111,195,212,.35); border-radius: 12px; padding: 8px 12px; font-size: .82rem; }
.help-card summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; list-style: none; min-height: 32px; } .help-card summary::-webkit-details-marker { display: none; }
.help-card .q { width: 22px; height: 22px; border-radius: 50%; background: #6fc3d4; color: #04222a; display: grid; place-items: center; font-weight: 900; }
.help-card ul { margin: 6px 0 2px; padding-left: 16px; line-height: 1.5; } .help-card li { margin-bottom: 4px; }
.cw-box { margin-top: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cw-box .btn-primary { margin: 4px 0 0; }
.howto { font-size: .84rem; line-height: 1.5; } .howto ol { margin: 6px 0 0; padding-left: 18px; } .howto li { margin-bottom: 3px; }
.csv-prev { background: #06170e; border-radius: 10px; padding: 4px 10px; }
.spinner.sm { width: 16px; height: 16px; border-width: 2px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.field-inline select { width: 52%; background: #06170e; border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-height: 40px; }
.field-inline label { font-size: .8rem; }

/* ---------- draggable assistant button ---------- */
.ai-fab { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ai-fab.dragging { transition: none; transform: scale(1.12); box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 26px rgba(240,208,96,.7); cursor: grabbing; }
.ai-fab.snapping { transition: left .25s cubic-bezier(.2,.9,.3,1.2), top .25s ease, transform .15s; }
.ai-fab img { pointer-events: none; -webkit-user-drag: none; }
body.reduce-motion .ai-fab.snapping { transition: none; }

/* ---------- extras ---------- */
.unit { font-size: .5em; color: var(--muted); margin-left: 2px; }
.sub-card, .loan-card, .goal-card { display: block; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px; margin-bottom: 8px; }
.sub-card.flag { border-color: rgba(232,160,69,.6); }
.sub-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sub-top > span, .sub-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flag-line { font-size: .82rem; margin-top: 6px; padding: 6px 8px; border-radius: 8px; }
.flag-line.hike { background: rgba(232,160,69,.12); color: #f3c27e; } .flag-line.idle { background: rgba(111,195,212,.1); color: #9fdbe6; }
.notice.warn { border-color: rgba(232,160,69,.6); background: rgba(232,160,69,.1); } .notice.ok { border-color: rgba(143,212,94,.45); background: rgba(143,212,94,.08); }
.miles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mile { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.mile .mi { font-size: 1.1rem; } .mile.done { border-color: rgba(143,212,94,.5); } .mile.next { border-color: var(--gold); background: rgba(212,175,55,.1); }
.goal-card .bar-track { margin: 8px 0 4px; } .goal-card { cursor: pointer; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 200; }
.ltv-pill { font-size: .7rem; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.ltv-pill.ok, .ltv-fill.ok { background: #2a6526; color: #f0fff0; } .ltv-pill.watch, .ltv-fill.watch { background: #b89a2a; color: #1a1400; } .ltv-pill.warn, .ltv-fill.warn { background: #c46d1e; color: #fff; } .ltv-pill.bad, .ltv-fill.bad { background: #b83a3a; color: #fff; }
.ltv-gauge { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,.08); margin: 10px 0 4px; overflow: visible; }
.ltv-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.ltv-mark { position: absolute; top: -3px; width: 2px; height: 18px; background: #f0d060; } .ltv-mark.liq { background: #ff6b6b; }
.ltv-legend { display: flex; justify-content: space-between; margin-bottom: 6px; }
.strat-steps { margin: 4px 0 8px; padding-left: 18px; font-size: .86rem; line-height: 1.55; }
input[type=range] { width: 100%; accent-color: var(--gold); min-height: 32px; }
.partner .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6fc3d4, #a98bff); color: #fff; font-weight: 900; display: grid; place-items: center; flex-shrink: 0; }
.partner .sub-top { align-items: center; }
.rep-nav { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 10px; }
.report-card { background: linear-gradient(160deg, rgba(212,175,55,.14), rgba(13,36,24,.9) 40%); border: 1px solid var(--border); border-radius: 18px; padding: 14px; margin-bottom: 10px; }
.rep-grade { font-weight: 800; color: var(--gold-bright); margin-bottom: 6px; }
.rep-big { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .rep-big b { font-size: 1.7rem; }
.rep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.rep-grid > div { background: rgba(0,0,0,.25); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .rep-grid b { font-size: .92rem; }
.rep-hl { padding-left: 4px; list-style: none; margin: 4px 0 8px; font-size: .86rem; line-height: 1.7; }
.report-card .bar-track { margin: 2px 0 6px; height: 6px; }
.finder-link { width: 100%; margin: 4px 0 10px; }
/* trading sessions */
.ses-box { margin: 6px 0 10px; padding: 8px 10px; border: 1px solid rgba(212,175,55,.18); border-radius: 12px; background: rgba(255,255,255,.03); }
.ses-line { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; align-items: baseline; padding: 3px 0; font-size: 14px; }
.ses-line .ses-name { color: #c9c2a8; }
.ses-line .micro { grid-column: 1 / -1; margin-top: -2px; }
.ses-line.ext .ses-name { color: #f0d060; font-weight: 600; }
.ses-now { margin-top: 4px; }
.ses-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: rgba(240,208,96,.16); color: #f0d060; letter-spacing: .02em; }
.kv.ses-cur { background: rgba(240,208,96,.08); border-radius: 8px; }
/* pull to refresh */
.ptr { position: absolute; top: calc(var(--safe-t, 0px) + 0px); left: 50%; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -60px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .2s ease; }
.ptr.show { transition: none; }
.ptr.spin, .ptr:not(.show) { transition: transform .25s ease, opacity .2s ease; }
.ptr-ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3c4, #d4af37 55%, #8a6d1f); box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 0 0 2px rgba(240,208,96,.35); }
.ptr-ring img { width: 30px; height: 30px; }
.ptr.ready .ptr-ring { box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 0 0 3px #f0d060, 0 0 18px rgba(240,208,96,.6); }
.ptr.spin .ptr-ring { animation: ptr-spin .9s linear infinite; }
.ptr-txt { font-size: 11px; font-weight: 600; color: #f0d060; background: rgba(10,31,20,.85); padding: 2px 8px; border-radius: 10px; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@keyframes ptr-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .ptr, .ptr.spin, .ptr:not(.show) { transition: none; }
  .ptr.spin .ptr-ring { animation: ptr-pulse 1.6s ease-in-out infinite; }
}
#tab-content, .home-body { overscroll-behavior-y: contain; }
/* assistant: typing indicator + source label */
.msg .typing { display: inline-flex; gap: 4px; align-items: center; min-height: 18px; }
.msg .typing span { width: 7px; height: 7px; border-radius: 50%; background: #f0d060; opacity: .4; animation: ai-dot 1.1s infinite ease-in-out; }
.msg .typing span:nth-child(2) { animation-delay: .15s; } .msg .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .msg .typing span { animation: none; opacity: .8; } }
.ai-via { margin-top: 6px; font-size: 10.5px; color: #bfb48c; letter-spacing: .02em; }
.msg ul { margin: 4px 0 4px 18px; padding: 0; } .msg li { margin: 2px 0; }
/* ===== PWA / standalone ===== */
.phone-shell { padding-top: var(--safe-t); padding-left: var(--safe-l, 0px); padding-right: var(--safe-r, 0px); }
:root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
html.standalone, html.standalone body { overscroll-behavior: none; }
html.standalone .phone-shell { box-shadow: none; }
.ptr { top: calc(var(--safe-t) + 4px); }
.upd-bar { position: absolute; left: 12px; right: 12px; bottom: calc(14px + var(--safe-b)); z-index: 80; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #0f2b1c; border: 1px solid rgba(240,208,96,.5); box-shadow: 0 8px 28px rgba(0,0,0,.5); color: #f3ead0; font-size: 14px; }
.upd-bar span { flex: 1; }
.upd-x { background: none; border: 0; color: #c9c2a8; font-size: 16px; min-width: 32px; min-height: 32px; cursor: pointer; }
.install-card { position: absolute; left: 12px; right: 12px; bottom: calc(84px + var(--safe-b)); z-index: 70; padding: 14px 14px 12px; border-radius: 18px; background: linear-gradient(180deg, #123522, #0b2216); border: 1px solid rgba(240,208,96,.45); box-shadow: 0 10px 30px rgba(0,0,0,.55); color: #f3ead0; }
.install-card .upd-x { position: absolute; top: 6px; right: 6px; }
.inst-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.inst-head img { border-radius: 10px; }
.inst-steps { margin: 6px 0 4px 20px; padding: 0; font-size: 14px; line-height: 1.45; }
.inst-steps li { margin: 3px 0; }
.install-card .btn-primary { width: 100%; margin-top: 8px; }

/* ---------- v2.6 Spot crypto ETF tracker ---------- */
.etf-group { background: var(--card, #15120c); border: 1px solid rgba(212,175,55,.18); border-radius: 14px; margin: 8px 0; overflow: hidden; }
.etf-group > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; min-height: 44px; font-weight: 700; }
.etf-group > summary::-webkit-details-marker { display: none; }
.etf-group > summary::after { content: "▾"; color: var(--gold, #d4af37); transition: transform .2s; }
.etf-group:not([open]) > summary::after { transform: rotate(-90deg); }
.etf-gc { margin-left: auto; font-weight: 500; font-size: 13px; color: var(--muted, #b9ad92); }
.etf-row { display: flex; align-items: stretch; border-top: 1px solid rgba(255,255,255,.06); }
.etf-row.off { padding: 10px 14px; justify-content: space-between; align-items: center; opacity: .8; }
.etf-main { flex: 1; display: flex; justify-content: space-between; gap: 8px; background: none; border: 0; color: inherit; text-align: left; padding: 10px 6px 10px 14px; min-height: 52px; font: inherit; cursor: pointer; }
.etf-main:focus-visible, .etf-add:focus-visible { outline: 2px solid var(--gold-bright, #f5d76e); outline-offset: -2px; }
.etf-l { min-width: 0; } .etf-r { text-align: right; white-space: nowrap; }
.etf-t { font-weight: 700; } .etf-n { font-size: 12px; color: var(--muted, #b9ad92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.etf-p { font-weight: 700; font-variant-numeric: tabular-nums; } .etf-c { font-size: 13px; font-variant-numeric: tabular-nums; } .etf-h { font-size: 11px; color: var(--muted, #b9ad92); }
.etf-add { width: 44px; flex: none; background: none; border: 0; border-left: 1px solid rgba(255,255,255,.06); color: var(--gold-bright, #f5d76e); font-size: 20px; cursor: pointer; }
.etf-none { padding: 4px 14px 12px; }
.linkish { background: none; border: 0; padding: 0; color: var(--gold-bright, #f5d76e); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- v2.6 ATH view ---------- */
.ath-row { display: flex; justify-content: flex-end; margin: 8px 0 4px; }
.ath-chip.on { background: var(--gold, #d4af37); color: #1a1406; border-color: var(--gold, #d4af37); }
.ath-card { background: linear-gradient(160deg, rgba(212,175,55,.14), rgba(212,175,55,.04)); border: 1px solid rgba(212,175,55,.35); border-radius: 14px; padding: 12px 14px; margin: 8px 0 10px; }
.ath-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ath-l { font-size: 12px; color: var(--muted, #b9ad92); text-transform: uppercase; letter-spacing: .04em; }
.ath-p { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .gold { color: var(--gold-bright, #f5d76e); }
.ath-off { font-weight: 700; text-align: right; max-width: 55%; }
.ath-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); margin: 10px 0; overflow: hidden; }
.ath-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8a6d1d, var(--gold-bright, #f5d76e)); border-radius: 6px; }
.ath-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ath-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ath-tag { display: block; font-size: 11px; color: var(--gold-bright, #f5d76e); margin: 1px 0; }
@media (prefers-reduced-motion: reduce) { .etf-group > summary::after { transition: none; } }

/* ===== DYOR news (Home, between eye row and egg): label + 3 stacked, vertical scroll ===== */
.dyor-strip { margin: 26px 0 4px; }
.dyor-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #f5d77a; margin: 0 2px 4px; display: flex; align-items: center; gap: 5px; }
.dyor-hint { font-weight: 400; opacity: .6; }
.dyor-tag { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #1a1408; background: #e8c45a; padding: 2px 5px; border-radius: 4px; }
.dyor-box { position: relative; }
.dyor-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none; border-radius: 0 0 12px 12px;
  background: linear-gradient(to bottom, rgba(10,20,12,0), rgba(10,20,12,.9)); transition: opacity .2s; }
.dyor-box.at-end::after { opacity: 0; }
.dyor-list { height: 156px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; scrollbar-width: none; border-radius: 12px; }
.dyor-list::-webkit-scrollbar { display: none; }
.dyor-list:focus-visible { outline: 2px solid #f5d77a; outline-offset: 2px; }
.dyor-card { flex: 0 0 auto; box-sizing: border-box; height: 43px; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center;
  padding: 4px 10px; text-decoration: none; color: inherit; background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.35); border-radius: 10px; }
.dyor-card:focus-visible { outline: 2px solid #f5d77a; outline-offset: -2px; }
.dyor-tk { font-size: 10.5px; font-weight: 700; color: #f5d77a; }
.dyor-src { justify-self: end; font-size: 10px; opacity: .7; white-space: nowrap; }
.dyor-title { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== OneAuth sign-in (lock screen on *.1appsuite.com) ===== */
.oa-panel { display: none; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; width: 100%; max-width: 300px; }
.lock-wrap.oa .oa-panel { display: flex; }
.lock-wrap.oa .pin-dots, .lock-wrap.oa .pin-hint, .lock-wrap.oa .keypad { display: none; }
.oa-btn { width: 100%; min-height: 52px; border-radius: 14px; border: 0; font-weight: 700; font-size: 1.05rem; color: #1a1408; background: linear-gradient(180deg, #f5d77a, #d4af37); cursor: pointer; }
.oa-btn:disabled { opacity: .6; }
.oa-note { color: var(--muted); font-size: .78rem; text-align: center; margin: 0; }
.oa-link { background: none; border: 0; color: var(--muted); font-size: .78rem; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* Watched wallets (read-only crypto totals) */
.wl-card{margin-bottom:14px}
.wl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.wl-total{font-size:28px;font-weight:700;margin:2px 0}
.wl-list{list-style:none;margin:10px 0;padding:0}
.wl-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid rgba(127,127,127,.2)}
.wl-val{text-align:right}.wl-err{color:#d9534f}
.wl-addr{font-family:ui-monospace,monospace}
.wl-in{display:block;width:100%;margin:4px 0 10px;padding:8px;border-radius:8px;border:1px solid rgba(127,127,127,.4);font:inherit;background:transparent;color:inherit}

/* safety notes */
.demo-warn{border-left:3px solid #e0a800}
.ai-privacy{margin:4px 2px 6px;opacity:.85}
.feedback-link{text-decoration:none;color:inherit;display:flex;justify-content:space-between;align-items:center}

/* 1App nav rule: Back + Home + 1App link on every non-home screen; 44px targets; safe areas */
.nav-btn{min-height:44px;min-width:44px;padding:0 14px;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center}
.home-back-row .btn-home.nav-btn{height:44px}
.sheet-nav{border:1px solid var(--border);border-radius:var(--radius-pill);background:rgba(0,0,0,.2);color:var(--gold-text);font-weight:600}
.sheet-head{flex-wrap:nowrap}
.sheet-head h2{min-width:0}
.one-app-link{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-size:.75rem;font-weight:700;color:var(--gold-text);opacity:.8;text-decoration:none;border-radius:8px}
.one-app-link:hover,.one-app-link:focus-visible{opacity:1;text-decoration:underline}
.home-back-row{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.sheet-head{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.sheet{padding-bottom:env(safe-area-inset-bottom)}
#screen-lock .lock-wrap{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
#screen-lock .lock-foot .one-app-link{min-height:44px;vertical-align:middle}

/* 1App suite branding: the 1App link is GOLD everywhere */
.one-app-link,#screen-lock .lock-foot .one-app-link,#sheet .one-app-link{color:#E9C46A;border:1px solid #E9C46A;background:rgba(233,196,106,0.12);opacity:1;border-radius:999px;min-height:44px;min-width:44px;padding:0 12px;box-sizing:border-box}
.one-app-link:hover,.one-app-link:focus-visible{color:#E9C46A;background:rgba(233,196,106,0.22);text-decoration:none;outline:2px solid #E9C46A;outline-offset:2px}

/* Guest demo */
.oa-guest{width:100%;min-height:48px;border-radius:14px;border:1px solid #E9C46A;color:#E9C46A;background:rgba(233,196,106,0.12);font-weight:700;font-size:1rem;cursor:pointer}
.guest-badge{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;padding:2px 2px 2px 12px;border-radius:999px;background:#1a1408;border:1px solid #E9C46A;color:#E9C46A;font-size:.75rem;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.guest-badge button{min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:999px;background:rgba(233,196,106,0.15);color:#E9C46A;font-weight:700;cursor:pointer}

/* Sync to my AI (preview, hidden unless enabled) */
.aisync .aisync-cats.dim{opacity:.55}
.aisync .section-label.sm{font-size:.7rem;margin:10px 0 2px}
.aisync-pre{max-height:50vh;overflow:auto;font-size:.72rem;white-space:pre-wrap;word-break:break-word}
/* Home header: gold 1App just left of the eye toggle */
#screen-home .home-top-row{display:flex;align-items:center;gap:10px}
#screen-home .home-top-row .one-app-link.home-1app{flex:0 0 auto;font-size:.8rem;letter-spacing:.02em}
/* Onboarding: gold 1App before Skip/Back */
.ob-actions .one-app-link.ob-1app{flex:0 0 auto}
/* Guest demo: pill sits at the very bottom; toasts/tickers rise above it, and pages get room so nothing is hidden */
.guest-mode .toast{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 60px)}
.guest-mode .screen{padding-bottom:calc(max(10px,env(safe-area-inset-bottom)) + 64px)}
/* Teach the helper: first-open tip, gentle pulse, "?" links */
.helper-tip{position:fixed;z-index:70;max-width:240px;padding:12px 14px;border-radius:14px;background:#1a1408;border:1px solid #E9C46A;color:#f5e6b8;font-size:.85rem;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.helper-tip p{margin:0 0 8px}
.helper-tip::after{content:"";position:absolute;top:100%;left:var(--ax,50%);transform:translateX(-50%);border:8px solid transparent;border-top-color:#E9C46A}
.helper-tip-x{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #E9C46A;background:rgba(233,196,106,0.12);color:#E9C46A;font-weight:700;cursor:pointer}
@keyframes helperPulse{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 0 rgba(233,196,106,.55)}50%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 12px rgba(233,196,106,0)}}
.ai-fab.helper-pulse{animation:helperPulse 2.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.ai-fab.helper-pulse{animation:none}}
.help-q{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;padding:0;margin-left:4px;border-radius:50%;border:1px solid #E9C46A;background:rgba(233,196,106,0.12);color:#E9C46A;font-size:.72rem;font-weight:800;line-height:1;vertical-align:middle;cursor:pointer;position:relative}
.help-q::before{content:"";position:absolute;inset:-11px}
.home-top-row .help-q{width:28px;height:28px}
.guest-badge .help-q{margin-left:6px}
.helper-tip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#E9C46A}
.guest-badge .help-q{width:24px;height:24px;min-width:24px;min-height:24px;padding:0;border:1px solid #E9C46A;background:rgba(233,196,106,0.12);font-size:.72rem}
body.sheet-open .guest-badge{opacity:0;pointer-events:none}