/* SAVE AS: styles.css · LOCATION: C:/MarvelApps/dayhub/styles.css
 * Day Hub v0.3 look: a hero that follows the time of day, glass cards, one
 * floating + button. Dark on purpose - it is the first screen of the morning. */
:root {
  --bg: #0a0e1c; --card: rgba(255,255,255,.055); --card-solid: #141a30; --line: rgba(255,255,255,.08);
  --text: #f2f4fb; --dim: #97a0bd; --accent: #5eead4; --accent2: #818cf8;
  --gold: #fcd34d; --red: #fb7185; --green: #4ade80; --orange: #fb923c;
  --hero: linear-gradient(160deg, #1e3c72, #2a1b5e 60%, #0a0e1c);
  --radius: 20px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* v0.63: anything marked hidden stays hidden (label.field / boxes set display, which beat the browser's [hidden] - Profession showed in Cruise Hub) */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
body { max-width: 560px; margin: 0 auto; padding-bottom: 110px; min-height: 100vh;
  background: radial-gradient(120% 60% at 50% 0%, rgba(129,140,248,.10), transparent 70%), var(--bg); }
button { font-family: inherit; }

/* ------------------------------------------------------------------ hero */
/* v0.49: --scene = the faint scene behind the clock (scenes.js), over the time-of-day colour. */
.hero { position: relative; background: var(--scene, none) center bottom / cover no-repeat, var(--hero); padding: max(18px, env(safe-area-inset-top)) 20px 22px;
  border-radius: 0 0 30px 30px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: background .8s ease; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 85% 10%, rgba(255,255,255,.22), transparent 60%); }
.hero.gloomy::before { content: ""; position: absolute; inset: 0; background: rgba(20,24,40,.35); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero-top { display: flex; justify-content: space-between; align-items: center; }
.greet { font-size: 17px; font-weight: 600; opacity: .95; }
.hero-main { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; gap: 10px; }
.hero-clock { font-size: 64px; font-weight: 800; letter-spacing: -3px; line-height: .95; }
.hero-clock small { font-size: 20px; font-weight: 700; letter-spacing: 0; margin-left: 6px; opacity: .85; }
.hero-date { font-size: 15px; opacity: .85; margin-top: 6px; font-weight: 500; }
.hero-wx { text-align: right; }
.hero-wx .ic { font-size: 44px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.hero-wx .t { font-size: 34px; font-weight: 800; line-height: 1.05; }
.hero-wx .hl { font-size: 13px; opacity: .85; font-weight: 500; }
.verdict { margin-top: 16px; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18);
  color: #fff; border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 500; }
.chip.warn { background: rgba(251,113,133,.30); border-color: rgba(251,113,133,.5); }
.chip.good { background: rgba(74,222,128,.22); border-color: rgba(74,222,128,.45); }
.icon-btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; width: 40px; height: 40px; font-size: 18px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sheet .icon-btn { background: var(--card); border-color: var(--line); }

/* ----------------------------------------------------------------- cards */
.cards { display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 700;
  cursor: pointer; user-select: none; }
.card h3 .ci { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 16px;
  background: rgba(255,255,255,.07); }
.card h3 .meta { margin-left: auto; color: var(--dim); font-size: 13px; font-weight: 500; }
.card h3 .chev { color: var(--dim); transition: transform .2s; font-size: 18px; }
.card.collapsed h3 .chev { transform: rotate(-90deg); }
.card .body { margin-top: 12px; }
/* v0.39: an empty card is one line on home ("＋ Add a bill"); ⓘ opens the full card. */
.card.mini { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px; }
.card.mini + .card.mini { margin-top: -6px; }
.mini-add { flex: 1; display: flex; align-items: center; gap: 9px; min-height: 40px; background: none; border: none;
  color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; padding: 0; }
.mini-add .ci { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px;
  background: rgba(255,255,255,.07); }
.mini-info { background: none; border: none; color: var(--dim); font-size: 16px; width: 40px; height: 40px; cursor: pointer; }
.chip.more { font-weight: 700; }
.card.collapsed .body { display: none; }
.add-link { background: none; border: none; color: var(--accent); font-size: 14px; font-weight: 600;
  padding: 10px 0 0; cursor: pointer; }

.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: none; padding-top: 2px; }
.row .time { color: var(--gold); min-width: 66px; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.row .grow { flex: 1; min-width: 0; font-size: 15px; }
.row .sub { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.row.done .grow { text-decoration: line-through; color: var(--dim); }
.empty { color: var(--dim); font-size: 14px; padding: 2px 0; }
.day-label { color: var(--accent2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  margin: 12px 0 2px; }
.day-label:first-child { margin-top: 0; }

button.x { background: none; border: none; color: var(--dim); font-size: 15px; cursor: pointer; opacity: .55; padding: 6px; }
button.x:hover { opacity: 1; }
.pill { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  background: rgba(255,255,255,.08); color: var(--dim); }
.pill.soon { background: rgba(251,146,60,.18); color: var(--orange); }
.pill.late { background: rgba(251,113,133,.2); color: var(--red); }
.btn { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #0a0e1c; border: none;
  border-radius: 12px; padding: 10px 16px; font-size: 15px; font-weight: 700; cursor: pointer; }
.btn.ghost { background: rgba(255,255,255,.07); color: var(--text); border: 1px solid var(--line); }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }

/* round checkbox */
input[type=checkbox].tick { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.28); display: grid; place-items: center; cursor: pointer;
  transition: all .18s ease; margin: 0; }
input[type=checkbox].tick::after { content: "✓"; color: #0a0e1c; font-size: 14px; font-weight: 900; transform: scale(0);
  transition: transform .18s cubic-bezier(.3,1.6,.6,1); }
input[type=checkbox].tick:checked { background: var(--green); border-color: var(--green); }
input[type=checkbox].tick:checked::after { transform: scale(1); }

/* progress ring (to-dos) */
.ring { --p: 0; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); display: grid; place-items: center; }
.ring::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--card-solid); }

/* --------------------------------------------------------------- weather */

.hours { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: none; }
.hours::-webkit-scrollbar { display: none; }
.hour { flex: none; width: 56px; text-align: center; background: rgba(255,255,255,.05); border-radius: 14px; padding: 9px 0; }
.hour .h { font-size: 12px; color: var(--dim); }
.hour .i { font-size: 20px; margin: 5px 0; }
.hour .tp { font-weight: 700; font-size: 15px; }
.hour .r { font-size: 11px; color: #7dd3fc; height: 14px; }
.hour.now { background: rgba(94,234,212,.14); outline: 1px solid rgba(94,234,212,.35); }
.days { margin-top: 8px; }
.dayrow { display: grid; grid-template-columns: 50px 26px 36px 1fr 66px; align-items: center; gap: 8px; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 14px; }
.dayrow:first-child { border-top: none; }
.dayrow .rn { color: #7dd3fc; font-size: 11px; }
.dayrow .lo { color: var(--dim); text-align: right; }
.dayrow .hi { font-weight: 700; white-space: nowrap; }
.bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); }
.bar span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #7dd3fc, #fcd34d, #fb923c); }
.wx-facts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fact { flex: 1; min-width: 90px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 8px 10px; font-size: 12px; color: var(--dim); }
.fact b { display: block; color: var(--text); font-size: 15px; margin-top: 2px; }
.skel { height: 90px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ------------------------------------------------------------ countdowns */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.tile { position: relative; border-radius: 16px; padding: 12px; background: linear-gradient(145deg, rgba(129,140,248,.22), rgba(94,234,212,.10));
  border: 1px solid var(--line); }
.tile .n { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.tile .u { font-size: 12px; color: var(--dim); }
.tile .tt { margin-top: 8px; font-weight: 600; font-size: 14px; }
.tile .dd { font-size: 12px; color: var(--dim); }
.tile .x { position: absolute; top: 4px; right: 4px; }

/* ----------------------------------------------------------------- lists */
.tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tab.on { background: var(--text); color: #0a0e1c; }
.tab small { opacity: .6; margin-left: 4px; }
.inline-add { display: flex; gap: 8px; margin-top: 8px; }
.inline-add input { flex: 1; min-width: 0; }
.foot-actions { display: flex; gap: 14px; }
.total { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 14px; }
.total b { color: var(--text); }

/* -------------------------------------------------------------- welcome */
.welcome { background: linear-gradient(145deg, rgba(129,140,248,.25), rgba(94,234,212,.12)); }
.welcome h2 { margin: 0 0 4px; font-size: 22px; }
.welcome p { margin: 0 0 6px; color: var(--dim); }

/* ---------------------------------------------------------------- inputs */
input, select { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 12px; font-size: 16px; font-family: inherit; width: 100%; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94,234,212,.15); }
select option { color: #000; }
input[type=date], input[type=time] { color-scheme: dark; }

/* ------------------------------------------------------------ fab + toast */
.fab { position: fixed; right: max(18px, calc(50% - 262px)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 20;
  width: 60px; height: 60px; border-radius: 20px; border: none; cursor: pointer; font-size: 32px; font-weight: 400; color: #0a0e1c;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 12px 30px rgba(94,234,212,.35);
  transition: transform .15s; }
.fab:active { transform: scale(.92); }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 30px); opacity: 0; z-index: 40;
  background: #f2f4fb; color: #0a0e1c; border-radius: 14px; padding: 11px 14px; font-size: 14px; font-weight: 600;
  display: flex; gap: 14px; align-items: center; transition: all .25s ease; pointer-events: none; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast button { background: none; border: none; color: #4f46e5; font-weight: 800; font-size: 14px; cursor: pointer; }

/* ---------------------------------------------------------------- sheets */
.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; z-index: 30;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet.hidden { display: none; }
.sheet-body { background: #141a30; width: 100%; max-width: 560px; margin: 0 auto; border: 1px solid var(--line);
  border-radius: 26px 26px 0 0; padding: 10px 18px max(22px, env(safe-area-inset-bottom)); max-height: 90vh; overflow-y: auto;
  animation: up .25s ease; }
@keyframes up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); margin: 0 auto 10px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet h2 { margin: 0; font-size: 22px; }
.sheet h3 { font-size: 13px; color: var(--dim); margin: 20px 0 6px; font-weight: 600; }
.seg { display: flex; gap: 7px; overflow-x: auto; margin: 14px 0 6px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line);
  border-radius: 14px; padding: 9px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg button.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #0a0e1c; border-color: transparent; }
.qa-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.qa-form .two { display: flex; gap: 10px; }
.qa-form .two > * { flex: 1; min-width: 0; }
.qa-form .hint { color: var(--dim); font-size: 12px; margin-top: -4px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; color: var(--dim); font-size: 13px; font-weight: 500; }
.card-list { list-style: none; padding: 0; margin: 0; }
.card-list li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.card-list li span { flex: 1; }
.card-list input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.fine { color: var(--dim); font-size: 12px; margin-top: 18px; }
.tag { font-size: 10px; color: #0a0e1c; background: var(--accent); border-radius: 6px; padding: 2px 6px; font-weight: 700; }
.leg { display: flex; justify-content: space-between; padding: 7px 0; gap: 10px; }
.leg b { color: var(--gold); }

/* ------------------------------------------------- schedule timeline (v0.3) */
.daynav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.daynav .nav { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: var(--text); font-size: 22px; cursor: pointer; }
.daynav .dn { flex: 1; background: none; border: none; color: var(--text); cursor: pointer; text-align: center; }
.daynav .dn b { display: block; font-size: 17px; }
.daynav .dn span { color: var(--dim); font-size: 12px; }
.sync { width: 100%; background: rgba(129,140,248,.15); color: var(--text); border: 1px dashed rgba(129,140,248,.5);
  border-radius: 12px; padding: 9px; font-size: 13px; cursor: pointer; margin-bottom: 8px; }
.tl { position: relative; }
.tl::before { content: ""; position: absolute; left: 75px; top: 6px; bottom: 6px; width: 2px; background: rgba(255,255,255,.08); }
.ti { position: relative; display: grid; grid-template-columns: 64px 22px 1fr auto; align-items: start; gap: 0 4px; padding: 8px 0; }
.ti .tt { color: var(--gold); font-weight: 700; font-size: 13px; text-align: right; padding-right: 6px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.ti .tt small { display: block; color: var(--dim); font-weight: 500; font-size: 11px; }
.ti .dot { width: 12px; height: 12px; border-radius: 50%; margin: 4px 0 0 6px; background: var(--accent); box-shadow: 0 0 0 4px rgba(94,234,212,.15); z-index: 1; }
.ti .tn { font-size: 15px; font-weight: 600; }
.ti .ts { color: var(--dim); font-size: 12px; margin-top: 2px; }
/* A pasted link (Zoom, maps) in a title or "Where" must wrap: unwrapped it
   pushed the 📲 / ✕ buttons off a 390px phone and the page scrolled sideways. */
.ti .tc { min-width: 0; overflow-wrap: anywhere; }
.ti.k-g .dot { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.18); }
.ti.k-work .dot { background: var(--accent2); box-shadow: 0 0 0 4px rgba(129,140,248,.2); }
.ti.k-bill .dot, .ti.k-rain .dot { background: var(--orange); box-shadow: 0 0 0 4px rgba(251,146,60,.18); }
.ti.k-sun .dot { background: var(--gold); width: 8px; height: 8px; margin: 6px 0 0 8px; box-shadow: none; }
.ti.k-sun .tn { font-weight: 500; color: var(--dim); font-size: 14px; }
.ti.k-cd .dot { background: var(--green); }
.ti.past { opacity: .45; }
.ti.done .tn { text-decoration: line-through; }
.gbadge { font-size: 10px; font-weight: 700; color: #93c5fd; background: rgba(96,165,250,.15); border-radius: 6px; padding: 1px 5px; vertical-align: 2px; }
.now-line { position: relative; height: 18px; display: flex; align-items: center; margin: 2px 0; }
.now-line::before { content: ""; position: absolute; left: 70px; right: 0; height: 2px; background: var(--red); border-radius: 1px; }
.now-line::after { content: ""; position: absolute; left: 70px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.now-line span { width: 64px; text-align: right; padding-right: 6px; color: var(--red); font-size: 11px; font-weight: 800; }
.tl-empty { text-align: center; color: var(--dim); padding: 18px 0 6px; line-height: 1.6; }

/* ------------------------------------------------------ work hours (v0.3) */
.clockbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.clockbox b { display: block; font-size: 16px; }
.clockbox span { color: var(--dim); font-size: 13px; }
.clockbox.on { background: linear-gradient(135deg, rgba(74,222,128,.18), rgba(94,234,212,.08)); border-color: rgba(74,222,128,.4); }
.clockbox.on b { color: var(--green); }
.paygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.paygrid .fact { min-width: 0; }
.paygrid .fact small { display: block; color: var(--orange); font-size: 11px; margin-top: 2px; }
.paygrid .take { background: linear-gradient(135deg, rgba(74,222,128,.18), rgba(94,234,212,.08)); }
.paygrid .take b { color: var(--green); font-size: 17px; }

/* v0.5 - item controls (📲 add to phone calendar + ✕ / tick) */
.ctl { display: flex; align-items: center; gap: 2px; }

/* v0.7 - budget verdict */
.bstat { padding: 11px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; margin-bottom: 4px; }
.bstat.ok { background: rgba(74,222,128,.13); border: 1px solid rgba(74,222,128,.35); }
.bstat.tight { background: rgba(251,146,60,.14); border: 1px solid rgba(251,146,60,.4); }
.bstat.over { background: rgba(251,113,133,.16); border: 1px solid rgba(251,113,133,.45); }

/* v0.7.1 - tablets & desktops (Scott 10/1: "will these apps also work on tablets?")
   Phone stays one column; from 820px wide the cards flow into two columns. */
@media (min-width: 820px) {
  body { max-width: 1120px; }
  .hero { border-radius: 0 0 34px 34px; padding-left: 32px; padding-right: 32px; }
  .cards { display: block; column-count: 2; column-gap: 16px; padding: 20px 16px 0; }
  .card { break-inside: avoid; margin-bottom: 16px; }
  .fab { right: max(22px, calc(50% - 540px)); }
}
.today-line .sub { display: block; color: var(--dim); font-size: 12px; margin-top: 1px; }

/* v0.9 - a link styled as a button (package Track) */
a.btn { text-decoration: none; display: inline-block; }

/* v0.11 - what's new after an update */
.card.whatsnew { background: linear-gradient(145deg, rgba(94,234,212,.18), rgba(129,140,248,.18)); border-color: rgba(94,234,212,.4); }

/* v0.12 - trips */
.trip-hero { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(56,189,248,.20), rgba(251,146,60,.18)); border: 1px solid var(--line); }
.trip-n { font-size: 40px; font-weight: 800; letter-spacing: -1px; min-width: 64px; text-align: center; line-height: 1; }
.trip-hero .sub { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.catrow { display: grid; grid-template-columns: 90px 1fr 80px; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.catrow b { text-align: right; }

/* v0.13 - cruise mode readiness */
.ready { display: flex; gap: 14px; align-items: center; padding: 10px 0 8px; }
.ring.big { width: 74px; height: 74px; flex: none; position: relative; }
.ring.big::before { width: 58px; height: 58px; }
.ring.big b { position: absolute; font-size: 17px; }
.ready .sub { display: block; color: var(--dim); font-size: 12px; }
.ready .next { margin-top: 6px; font-size: 14px; }

/* v0.14 - what am I forgetting */
.fg-h { font-weight: 800; margin: 12px 0 4px; color: var(--accent); letter-spacing: .02em; }
.fg-h:first-child { margin-top: 2px; }
.big-aboard { font-size: 19px; padding: 8px 0; }

/* v0.17 - notes */
textarea { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 16px; width: 100%; resize: vertical; }
.note-text { cursor: pointer; white-space: normal; }
/* Setup steps in settings (Scott 10/2: "setup steps made easy as possible") */
ol.steps, .steps ol { margin: 8px 0 10px; padding-left: 22px; line-height: 1.55; font-size: 14px; }
.steps li { margin: 3px 0; }
details.steps { margin-top: 10px; font-size: 14px; }
details.steps summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 4px 0; }
details.steps .fine { margin-top: 8px; }
.arrange-link { display: block; margin: 6px auto 90px; }
.card-list li.reset-order { justify-content: center; }
.card-list li.reset-order span { display: none; }
/* Nightly reset (v0.20) */
.rs-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 12px 0 4px; }
.rs-h:first-child { margin-top: 0; }
.rs-mem { display: flex; gap: 8px; margin-top: 12px; }
.rs-mem input { flex: 1; min-width: 0; }
/* Smart morning brief (v0.21) - full screen, dawn colours */
.brief { position: fixed; inset: 0; z-index: 40; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(160deg, #f6a35c, #e0607e 40%, #4b2c7f 75%, #1a1440); color: #fff; }
.brief.hidden { display: none; }
.brief-body { max-width: 560px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 18px 48px; }
.brief-date { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.brief h1 { font-size: 30px; line-height: 1.15; margin: 6px 0 12px; }
.brief-say { font-size: 18px; line-height: 1.55; margin: 0 0 12px; }
.brief .btn.ghost { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.brief-sec { background: rgba(10,8,30,.28); border-radius: 14px; padding: 12px 14px; margin-top: 14px; backdrop-filter: blur(4px); }
.brief-sec h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; color: #fff; }
.brief-sec .row { border-color: rgba(255,255,255,.12); }
.brief-sec .time, .brief-sec .sub { color: rgba(255,255,255,.8); }
.brief-wx { display: flex; align-items: center; gap: 16px; }
.brief-wx .big { font-size: 34px; font-weight: 700; }
.brief-go { display: block; width: 100%; margin-top: 20px; font-size: 17px; padding: 14px; }
.brief-auto { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; font-size: 13px; opacity: .85; }
.brief-auto input { width: auto; flex: none; margin: 0; }
.brief-auto { text-align: left; }
/* Brain dump (v0.22) */
.hero-btns { display: flex; gap: 8px; }
#qaForm textarea[name=dump] { width: 100%; min-height: 110px; font-size: 16px; }
.dump-acts { margin: 8px 0 4px; }
.btn.on { background: #e11d48; color: #fff; border-color: #e11d48; }
.dump-h { font-size: 12px; font-weight: 700; color: var(--dim); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.dump-row { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.dump-line { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.dump-line select { flex: 1; min-width: 0; }
.dump-row > input { width: 100%; }
.dump-row .two { margin-top: 6px; }
/* Weather intelligence (v0.24) */
.wx-alerts { display: grid; gap: 6px; margin: 2px 0 10px; }
.wx-alert { background: rgba(251,146,60,.14); border: 1px solid rgba(251,146,60,.35); border-radius: 10px; padding: 7px 10px; font-size: 14px; line-height: 1.35; }
.brief-sec .wx-alert, .brief .wx-alert { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.25); }
/* Home & car upkeep (v0.26) */
.up-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.up-chips .chip { background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); }
.row.late b { color: #fb923c; }
/* Routines (v0.27) */
.routine { border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px; margin-bottom: 8px; }
.routine.open { border-color: var(--accent); }
.routine .r-head { background: none; border: none; color: inherit; text-align: left; padding: 0; font: inherit; }
.routine .r-head .sub { display: block; }
.dow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dow label { display: flex; align-items: center; gap: 4px; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; }
.dow input { width: auto; margin: 0; }
/* Payday (v0.28) */
.pay-head { display: flex; flex-direction: column; gap: 2px; font-size: 16px; margin-bottom: 4px; }
.pay-left { font-size: 15px; } .pay-left.neg b { color: #fb7185; } .pay-left b { color: var(--accent); }
.pay-setup select, .pay-setup input { display: block; width: 100%; margin-top: 4px; }
.goal { border-top: 1px solid var(--line); padding-top: 4px; }
.gbar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px 0 6px; }
.gbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
/* Life pulse (v0.29) */
.verdict-row { display: flex; align-items: center; gap: 10px; }
.verdict-row .verdict { margin: 0; }
.pulse { display: flex; flex-direction: column; align-items: center; background: none; border: none; color: #fff; padding: 0; cursor: pointer; flex: none; }
.pulse .pw { font-size: 10px; font-weight: 700; opacity: .9; margin-top: -2px; white-space: nowrap; }
.pulse-row .sub { margin-right: 6px; }
/* Brief countdowns (v0.30) */
.brief-sec .cd-n { font-size: 22px; font-weight: 800; min-width: 48px; text-align: center; }
/* Ask Day Hub + Top 3 (v0.32) */
.ask-form { display: flex; gap: 6px; margin: 8px 0; }
.ask-form input { flex: 1; min-width: 0; }
.ask-q { font-weight: 700; margin-top: 12px; }
.ask-a { background: rgba(94,234,212,.08); border: 1px solid rgba(94,234,212,.25); border-radius: 12px; padding: 10px 12px; margin-top: 6px; line-height: 1.45; white-space: pre-wrap; }
.top3 .t3n { font-weight: 800; color: var(--accent); min-width: 16px; }
.top3 .sub { display: block; }
/* Dates found in Google Calendar (v0.33) */
.found-box { border: 1px dashed var(--accent); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
/* Future me (v0.37) */
.future-banner { border: 1px solid #a855f7; background: linear-gradient(160deg, rgba(168,85,247,.18), rgba(30,20,60,.4)); }
.future-banner .today-line { font-size: 16px; line-height: 1.45; }
.future-banner .sub { display: block; margin-top: 2px; }
/* v0.40: Day Hub Pro box + legal links in the settings fine print */
.pro-list { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }
#legalLinks a { color: var(--accent); }

/* v0.50 Cruise Hub countdown (hero) + 100% celebration */
.cd { display: flex; align-items: flex-end; gap: 14px; width: 100%; margin-top: 14px; padding: 0; background: none; border: 0;
  color: #fff; text-align: left; cursor: pointer; font: inherit; }
.cd-n { font-size: 68px; font-weight: 800; letter-spacing: -3px; line-height: .86; text-shadow: 0 4px 18px rgba(0,0,0,.28);
  font-variant-numeric: tabular-nums; flex: none; }
.cd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-l { font-size: 12px; font-weight: 800; letter-spacing: 2.4px; opacity: .9; }
.cd-ship { font-size: 19px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); margin-top: 8px; overflow: hidden; }
.cd-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #5eead4, #fcd34d); transition: width .8s ease; }
.cd-bar.big { height: 10px; border-radius: 5px; background: var(--line); }
.cd-pct { font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-top: 5px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-pct.done { color: #fcd34d; }
.ready-row .sub { margin-left: 8px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 99; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: confetti 2.4s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes confetti { to { top: 105%; transform: translateX(40px) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .cd-bar i { transition: none; } .confetti { display: none; } }

/* v0.51 Cruise Hub: two weathers (where the cruise is + where you are) */
.cruise-wx { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wx-where { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--dim); margin: 2px 0 6px; }
.cwx-day { padding: 8px 0; border-top: 1px solid var(--line); }
.cwx-day:first-of-type { border-top: 0; }
.cwx-day .sub { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }
.cwx-day .wx-alerts { margin-top: 6px; }

/* v0.52 Return Guard (hero on port days + the BACK TO SHIP bar) */
.rg { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: 14px; padding: 12px 14px; border: 0; border-radius: 18px;
  color: #fff; text-align: left; cursor: pointer; font: inherit; background: rgba(0,0,0,.22); border-left: 6px solid var(--rg, #4ade80); }
.rg-good { --rg: #4ade80; } .rg-plan { --rg: #fcd34d; } .rg-leave { --rg: #fb923c; } .rg-critical, .rg-missed { --rg: #fb7185; }
.rg-top { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; opacity: .9; }
.rg-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rg-l { font-size: 12px; font-weight: 800; letter-spacing: 2px; opacity: .85; }
.rg-t { font-size: 46px; font-weight: 800; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.rg-ship { font-size: 12px; opacity: .85; }
.rg-line { font-size: 15px; }
.rg-pill { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .6px;
  background: var(--rg, #4ade80); color: #10131f; }
.rg-pill.big { font-size: 14px; padding: 8px 14px; margin: 4px 0 8px; }
.rg-critical .rg-t, .rg-missed .rg-t { color: #fecdd3; }
.rg-bar { position: fixed; left: 16px; right: 92px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 20; padding: 14px 16px; border: 0;
  border-radius: 16px; font: inherit; font-weight: 800; font-size: 15px; text-align: left; cursor: pointer; color: #10131f;
  background: var(--rg, #4ade80); box-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: 452px; }
@media (min-width: 600px) { .rg-bar { left: calc(50% - 264px); } }

/* v0.54 name bar (every hub) + wallet */
.brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 3px; }
.brand img { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.hero .greet { margin-top: 10px; }
.cost-add { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cost-add select, .cost-add input[name=what] { flex: 1 1 45%; min-width: 0; }
.cost-add input[name=amt] { flex: 0 1 90px; }
.paidbox { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--dim); }
.linkish { background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 6px 0; width: 100%; }

/* v0.55 packing by bag + suggestions */
.bagchip { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 4px 8px;
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sugbox { margin: 6px 0 10px; padding: 8px 12px; border-radius: 14px; background: rgba(94,234,212,.08); border: 1px solid rgba(94,234,212,.25); }
.sugbox .row:first-of-type { border-top: 0; }
.bagtabs { margin: 4px 0 2px; }

/* v0.56 final night / time to go home (hero) */
.gohome .gh-list { display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 13px; margin-top: 4px; opacity: .95; }
.car-form { flex-wrap: wrap; gap: 6px; }
.car-form input[name=where] { flex: 1 1 100%; }
.car-form input[name=level], .car-form input[name=spot] { flex: 1 1 30%; min-width: 0; }

/* v0.57 crisis mode - big, plain, no clutter */
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.help-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 104px; padding: 12px;
  border-radius: 18px; border: 1px solid var(--line); background: var(--card-solid); color: var(--text); font: inherit; font-size: 30px; cursor: pointer; }
.help-btn b { font-size: 14px; letter-spacing: .6px; }
.help-btn .sub { font-size: 11px; color: var(--orange); }
.help-btn.red { border-color: rgba(251,113,133,.6); background: rgba(251,113,133,.14); }
.help-btn.ghost { background: none; }
.help .row a, .help .today-line a { color: var(--accent); font-weight: 700; }
.help-form .field { margin-top: 8px; }

/* v0.58 the hub shell: 5 permanent tabs + the big button */
#tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: center; gap: 2px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(10,14,28,.94); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
#tabbar button { flex: 1; max-width: 108px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border: 0;
  background: none; color: var(--dim); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 12px; }
#tabbar button span { font-size: 20px; line-height: 1; }
#tabbar button.on { color: var(--text); background: rgba(255,255,255,.08); }
body.shell { padding-bottom: 150px; }
body.shell .fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
body.shell .rg-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
body.shell .toast { bottom: 150px; }
body.shell:not([data-tab="home"]) .hero .hero-main { display: none; }
body.shell .arrange-link { display: none; }
.big-btn { display: block; width: 100%; margin: 14px 0 6px; padding: 18px 16px; border: 0; border-radius: 20px; font: inherit; font-size: 17px;
  font-weight: 800; letter-spacing: .6px; color: #06102a; cursor: pointer; background: linear-gradient(135deg, #5eead4, #818cf8);
  box-shadow: 0 12px 30px rgba(94,234,212,.25); }
.rn-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.rn-row:first-child { border-top: 0; }
.rn-row .chev { color: var(--dim); font-size: 20px; }
.port-card { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.port-card .sub { color: var(--dim); font-size: 13px; }
body.shell[data-tab="home"] .fab, body.shell[data-tab="ai"] .fab { display: none; }

/* v0.59 PLAN: views + the day-by-day timeline */
.planview { margin: 0 0 10px; }
.tl-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tl-row:first-child { border-top: 0; }
.tl-row .tl-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card); font-size: 17px; }
.tl-row .sub { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }
.tl-row .chev { color: var(--dim); font-size: 20px; }
.tl-row.past { opacity: .5; }
.tl-row.now .tl-ic { background: var(--accent); }
.tl-row.before .tl-ic { background: rgba(252,211,77,.2); }

/* v0.60 onboarding: add my cruise, the magic moment, make it yours */
.add-cruise .sub, .rn-row .sub { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.magic { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto;
  background: radial-gradient(120% 80% at 50% 0%, #1e6fa8, #0b2a4e 55%, #06102a); color: #fff; text-align: center; }
.magic.hidden { display: none; }
.magic-in { max-width: 420px; width: 100%; }
.magic-k { font-size: 14px; font-weight: 800; letter-spacing: 4px; opacity: .85; animation: mgIn .6s ease both; }
.magic-ship { font-size: 30px; font-weight: 800; margin-top: 10px; animation: mgIn .6s .1s ease both; }
.magic-sub { font-size: 14px; opacity: .85; margin-top: 4px; letter-spacing: .5px; animation: mgIn .6s .2s ease both; }
.magic-n { font-size: 96px; font-weight: 800; letter-spacing: -4px; line-height: 1; margin-top: 18px; animation: mgIn .7s .25s ease both; }
.magic-build { margin: 22px auto 0; padding: 14px 16px; max-width: 300px; border-radius: 18px; background: rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 14px; }
.magic-build span { opacity: 0; animation: mgIn .4s ease forwards; color: #5eead4; font-weight: 700; }
.magic-done { margin-top: 18px; opacity: 0; animation: mgIn .5s ease forwards; display: flex; flex-direction: column; gap: 6px; }
.magic-done b { font-size: 20px; letter-spacing: 1px; }
@keyframes mgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .magic * { animation: none !important; opacity: 1 !important; } }
.love-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.love { position: relative; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.love.on { border-color: var(--accent); background: rgba(94,234,212,.14); }
.love i { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; color: var(--accent); }
.prefs-card .meta { font-size: 11px; color: var(--dim); font-weight: 600; margin-left: 6px; }
#pasteSheet textarea { width: 100%; min-height: 140px; }

/* v0.61 travel day / sail day / on board cards + offline pill */
.phase { border-color: rgba(252,211,77,.35); }
.phase .meta { font-size: 12px; color: var(--dim); margin-left: 6px; }
.offline-pill { margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(251,146,60,.25); font-size: 10px; letter-spacing: 1px; }

/* v0.62 simple mode: large text, few huge buttons */
body.simple { font-size: 18px; }
body.simple .hero .chips, body.simple .hero .cd-pct, body.simple .hero .hero-btns .icon-btn[data-ask] { display: none; }
.simple-home .simple-big { font-size: 26px; font-weight: 800; }
.simple-home .simple-now { font-size: 22px; font-weight: 700; margin-top: 8px; }
.simple-home .simple-next { font-size: 19px; margin-top: 12px; }
.simple-home .simple-next span { display: block; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--dim); }
.big-btn.simple { font-size: 20px; padding: 24px 16px; }
.simple-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.simple-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--card-solid); color: var(--text); font: inherit; font-size: 36px; cursor: pointer; }
.simple-btn b { font-size: 17px; letter-spacing: 1px; }
.simple-btn.red { border-color: rgba(251,113,133,.6); background: rgba(251,113,133,.14); }

/* v0.62 itemized running cost */
.itemized { margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.it-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.it-row:first-child { border-top: 0; }
.it-row .sub { display: block; color: var(--dim); font-size: 11px; margin-top: 1px; }
.it-amt { min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.it-run { min-width: 86px; text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }
.it-total { background: rgba(255,255,255,.04); }
.it-total .it-run { color: var(--text); }

/* v0.63 THE HUB NAVIGATION: big icon tiles (like the 🛟 Need help sheet) */
.tilenav { display: grid; gap: 8px; margin: 10px 0; }
.tilenav.cols2 { grid-template-columns: repeat(2, 1fr); }
.tilenav.cols3 { grid-template-columns: repeat(3, 1fr); }
.tilenav.cols4 { grid-template-columns: repeat(4, 1fr); }
.tilenav.cols5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tilenav.cols5 .tile b { font-size: 10.5px; }
.tilenav.cols6 { grid-template-columns: repeat(6, 1fr); gap: 5px; }   /* v1.01 Plan views + Diary */
.tilenav.cols6 .tile { padding: 8px 2px; border-radius: 14px; }
.tilenav.cols6 .tile b { font-size: 10px; letter-spacing: 0; }
/* v1.02 port reality */
.port-reality { text-align: center; margin: 4px 0 6px; padding: 10px; border-radius: 16px; background: rgba(94,234,212,.10); border: 1px solid var(--line); }
.port-reality .pr-big { font-size: 34px; font-weight: 800; line-height: 1.1; }
.port-reality .pr-sub { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
/* v1.08 wrap-up */
.wrap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.wrap-stat { text-align: center; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-solid); }
.wrap-stat b { display: block; font-size: 22px; line-height: 1.1; }
.wrap-stat span { font-size: 11px; color: var(--dim); }
.wrap-day { padding: 8px 0; border-bottom: 1px solid var(--line); }
@media print {
  body.print-wrap > *:not(#wrapSheet) { display: none !important; }
  body.print-wrap { background: #fff !important; color: #000 !important; }
  body.print-wrap #wrapSheet, body.print-wrap #wrapSheet .sheet-body { position: static !important; inset: auto !important; max-height: none !important; overflow: visible !important;
    transform: none !important; background: #fff !important; color: #000 !important; box-shadow: none !important; border: none !important; }
  body.print-wrap #wrapSheet .no-print { display: none !important; }
  body.print-wrap #wrapSheet .sub, body.print-wrap #wrapSheet .fine, body.print-wrap #wrapSheet .wrap-stat span { color: #444 !important; }
  body.print-wrap #wrapSheet .wrap-stat { background: #fff !important; border-color: #bbb !important; }
  body.print-wrap #wrapSheet .diary-text { color: #000 !important; }
}
/* v1.06 secret engine */
.secret-card .secret-h { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); }
.secret-card .secret-t { font-size: 14.5px; line-height: 1.4; margin: 4px 0 6px; }
/* v1.05 package buy or skip */
.pkg-inc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 6px 0; font-size: 13.5px; }
.pkg-inc label { display: flex; align-items: center; gap: 6px; }
.pkg-inc input { width: auto; }
/* v1.04 Fun Finder */
.fun-row { gap: 4px; }
.funpick { min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-solid); color: var(--text); font-size: 16px; cursor: pointer; padding: 0; }
.funpick.on { border-color: var(--accent); background: rgba(94,234,212,.18); }
.fun-add { margin-top: 8px; }
/* v1.01 trip diary */
.diary-moods { display: flex; gap: 8px; margin: 6px 0 8px; }
.diary-moods .mood { flex: 1; font-size: 24px; line-height: 1; padding: 8px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--card-solid); cursor: pointer; }
.diary-moods .mood.on { border-color: var(--accent); background: rgba(94,234,212,.18); box-shadow: 0 0 0 1px rgba(94,234,212,.35) inset; }
.diary-text { display: block; margin-top: 3px; font-size: 13px; color: var(--text); white-space: pre-wrap; line-height: 1.35; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 8px 4px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--card-solid); color: var(--text); font: inherit; cursor: pointer;
  transition: transform .12s ease, border-color .2s ease; }
.tile:active { transform: scale(.96); }
.tile .tile-ic { font-size: 24px; line-height: 1; }
.tile b { font-size: 11.5px; font-weight: 700; letter-spacing: .2px; text-align: center; line-height: 1.15; }
.tile small { font-size: 10px; color: var(--dim); }
.tile.on { border-color: var(--accent); background: rgba(94,234,212,.14); box-shadow: 0 0 0 1px rgba(94,234,212,.35) inset; }
.tilenav.compact .tile { min-height: 62px; }
.tilenav.compact .tile .tile-ic { font-size: 20px; }
#setJump { margin-bottom: 4px; }

/* v0.64 ship guide */
.my-ship .pill.deck { background: rgba(129,140,248,.18); color: var(--text); margin-right: 4px; white-space: nowrap; }
.my-ship .row .pill { flex: none; }
.my-ship .fine a { color: var(--accent); }
.home-port summary { cursor: pointer; padding: 6px 0; list-style-position: inside; }
.home-port .today-line { margin: 4px 0; }
.home-port .fine a { color: var(--accent); }


/* v0.65 links inside sheets read on dark */
.sheet .fine a, .sheet .today-line a { color: var(--accent); }

/* v0.85 THE HOME LAYOUT (every hub): top = hero, middle = what's going on, bottom = mini action bubbles */
.going-on .next-up { display: flex; gap: 10px; align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.going-on .next-up span { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: var(--accent); }
.bubbles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; margin: 14px 0 16px; }
.bubble { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--text); font: inherit; cursor: pointer; }
.bubble .b-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 23px; line-height: 1;
  background: var(--card-solid); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.28); transition: transform .12s ease; }
.bubble:active .b-ic { transform: scale(.92); }
.bubble b { max-width: 100%; font-size: 10.5px; font-weight: 700; line-height: 1.15; text-align: center; color: var(--dim); overflow-wrap: anywhere; }
.bubble.hot { grid-column: span 2; flex-direction: row; justify-content: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: 26px;
  background: linear-gradient(135deg, #5eead4, #818cf8); box-shadow: 0 10px 24px rgba(94,234,212,.25); }
.bubble.hot .b-ic { width: auto; height: auto; background: none; border: 0; box-shadow: none; font-size: 20px; }
.bubble.hot b { color: #06102a; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-align: left; }
.bubble.hot:active { transform: scale(.97); }
.going-on h3 { margin-bottom: 2px; }
.going-on .rn-row { padding: 8px 2px; font-size: 14.5px; }
.going-on .next-up { margin-top: 4px; padding-top: 8px; font-size: 13.5px; }
body.shell .bubbles { margin: 10px 0 12px; gap: 8px 6px; }

/* v0.99 trip map (trip.js) */
.trip-map { height: 340px; border-radius: 14px; overflow: hidden; margin: 4px 0 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.trip-map .map-msg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dim); font-size: 13px; padding: 16px; text-align: center; }
.map-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 12px; background: var(--accent); color: #06102a; font-weight: 800; font-size: 12px; }
.map-pin span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 13px; background: #5eead4; color: #06102a;
  font: 800 12px Inter, sans-serif; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.leaflet-popup-content { color: #0b1530; font: 13px Inter, sans-serif; }

/* v1.10 pick your background */
.scene-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.scene-picks .chip { background: var(--card-solid); border: 1px solid var(--line); color: var(--text); cursor: pointer; min-height: 36px; }
.scene-picks .chip.on { border-color: var(--accent); background: rgba(94,234,212,.18); font-weight: 700; }
/* v1.12 leave-time engine */
.leave-line { border-left: 3px solid var(--accent, #ffd166); padding-left: 8px; }
.leave-line .sub { display: block; }
.leave-box { margin: 6px 0; } .leave-box summary { cursor: pointer; padding: 6px 0; color: var(--muted, #aab); }
/* v1.16 road trip brain */
.drive-box summary { cursor: pointer; padding: 8px 0; color: var(--muted, #aab); }
/* v1.17 free time finder */
.free-gap { margin: 4px 0 8px; }
.wish-box summary { cursor: pointer; padding: 8px 0; color: var(--muted, #aab); }
/* v1.18 group vote */
.vote-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.vote-who .chip.on { outline: 2px solid var(--accent, #ffd166); }
.vote-sc { min-width: 2.2em; text-align: right; margin-right: 6px; }

/* v1.25 Home Hub (home.js): stats, space grid, setup picks, room page */
.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.home-stat { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 8px; text-align: center; }
.home-stat b { display: block; font-size: 1.5rem; line-height: 1.1; }
.home-stat span { display: block; font-size: .78rem; opacity: .8; }
.home-stat small { display: block; font-size: .72rem; color: var(--accent, #ffd166); margin-top: 2px; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.home-space { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: inherit; font: inherit; cursor: pointer; text-align: center; min-height: 92px; }
.home-space .hs-ic { font-size: 1.7rem; line-height: 1.2; }
.home-space b { font-size: .86rem; }
.home-space small { font-size: .72rem; opacity: .75; }
.home-space.add { border-style: dashed; opacity: .85; }
.home-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.home-pick { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: .85rem; cursor: pointer; }
.home-pick input { margin: 0 2px 0 0; }
.home-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 10px; }
.home-tabs button { flex: 1 1 auto; }
.home-tabs button.on { outline: 2px solid var(--accent, #ffd166); }
.home-notes { width: 100%; box-sizing: border-box; border-radius: 12px; padding: 10px; font: inherit; background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.15); }
.home-up { width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

/* v1.33 Hub Predicted Value (homevalue.js) */
.hpv-big { font-size: 2.3rem; font-weight: 800; line-height: 1.1; margin: 4px 0 0; letter-spacing: -.01em; }
.hpv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hpv-row input { min-width: 0; }
.hpv-ai { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: .92rem; line-height: 1.45; }

/* v1.38 Auto Hub: one scrolling row of tabs, interval editor */
/* v1.41 the car's tabs = a bar along the bottom of its page, like the Cruise / Trip Hub tab bar */
.auto-tabs { position: sticky; bottom: calc(-1 * max(22px, env(safe-area-inset-bottom))); z-index: 2; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px;
  margin: 12px -18px calc(-1 * max(22px, env(safe-area-inset-bottom))); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(10,14,28,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.auto-tabs::-webkit-scrollbar { display: none; }
.auto-tabs button { flex: 1 0 54px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0;
  background: none; color: var(--dim); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 12px; }
.auto-tabs button span { font-size: 20px; line-height: 1; }
.auto-tabs button.on { color: var(--text); background: rgba(255,255,255,.08); }
.auto-every { margin-top: 8px; }
.auto-every summary { cursor: pointer; list-style: none; }
/* v1.40 Auto Hub photos, Smart Scan */
.auto-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; }
.auto-ph { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: rgba(255,255,255,.06); cursor: pointer; }
.auto-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auto-ph span { position: absolute; left: 4px; bottom: 4px; font-size: .8rem; background: rgba(0,0,0,.55); border-radius: 6px; padding: 1px 4px; }
.auto-view img, .auto-scanimg { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 12px; background: rgba(0,0,0,.25); display: block; }
.auto-scanimg { max-height: 30vh; margin-bottom: 8px; }
/* v1.42 Money Hub */
.mh-bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0; border-radius: 10px; background: rgba(255,255,255,.05); overflow: hidden; font-size: .9rem; }
.mh-bar > * { position: relative; z-index: 1; }
.mh-bar span { flex: 1; }
.mh-bar i { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; background: rgba(94,234,212,.18); border-radius: 10px; }
.mh-bar.near i { background: rgba(251,146,60,.25); } .mh-bar.over i { background: rgba(251,113,133,.3); }
.mh-bal { display: flex; gap: 4px; align-items: center; } .mh-bal input { width: 96px; padding: 6px 8px; }
.mh-cat { background: none; border: 0; cursor: pointer; font-size: inherit; padding: 0; }
.mh-table { overflow-x: auto; } .mh-table table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.mh-table td, .mh-table th { padding: 6px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } .mh-table td:first-child, .mh-table th:first-child { text-align: left; }
/* v1.44 HUB OS KIT (Scott 10/15: visual-first apps) - shared by every hub: a hero orbit with bubbles, glow rings, a
   "next smart action" card, category chips. Theme per hub = --hos-a (accent) / --hos-b (second accent) on .hos */
.hos { --hos-a: #27d7ff; --hos-b: #70e9b6; --hos-ink: #f4f9ff; --hos-dim: #a6bfd6; position: relative; overflow: hidden; color: var(--hos-ink);
  background: radial-gradient(ellipse at 50% -10%, #174a70 0%, #0b223b 45%, #071323 100%) !important; border: 1px solid #2d5671 !important; border-radius: 26px !important; padding: 16px !important; }
.hos-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; letter-spacing: 2px; font-size: .8rem; color: var(--hos-a); }
.hos-head small { letter-spacing: 0; font-weight: 600; color: var(--hos-dim); }
.hos-orbit { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 10px auto 18px; }
.hos-orbit::before, .hos-orbit::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed rgba(68,207,255,.28); animation: hos-spin 60s linear infinite; }
.hos-orbit::after { inset: 27%; border: 1px solid rgba(68,207,255,.18); animation-direction: reverse; animation-duration: 45s; }
.hos-core { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 1;
  border-radius: 28%; background: radial-gradient(circle, rgba(39,215,255,.35), transparent 70%); }
.hos-core img { width: 100%; height: 100%; border-radius: 26%; filter: drop-shadow(0 0 22px rgba(23,191,255,.6)); animation: hos-bob 5s ease-in-out infinite; }
.hos-core span { font-size: 4rem; }
.hos-bub { position: absolute; transform: translate(-50%, -50%); width: 25%; min-width: 72px; aspect-ratio: 1; border-radius: 50%; z-index: 2; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; font: inherit; color: var(--hos-ink);
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--tone) 55%, #ffffff 10%), color-mix(in srgb, var(--tone) 30%, #071323) 70%);
  border: 1px solid color-mix(in srgb, var(--tone) 70%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tone) 45%, transparent), inset 0 2px 6px rgba(255,255,255,.18);
  animation: hos-float 6s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform .15s; }
.hos-bub:hover, .hos-bub:focus-visible { transform: translate(-50%, -50%) scale(1.08); outline: none; box-shadow: 0 0 26px var(--tone); }
.hos-bub .hos-ic { font-size: 1.45rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.hos-bub b { font-size: .68rem; line-height: 1.1; } .hos-bub small { font-size: .62rem; opacity: .9; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hos-badge { position: absolute; top: 2px; right: 2px; background: #ff5f6d; color: #fff; font-style: normal; font-size: .58rem; font-weight: 800; padding: 1px 5px; border-radius: 8px; box-shadow: 0 0 8px #ff5f6d; }
@keyframes hos-spin { to { transform: rotate(360deg); } }
@keyframes hos-bob { 50% { transform: translateY(-5px); } }
@keyframes hos-float { 50% { margin-top: -4px; } }
@media (prefers-reduced-motion: reduce) { .hos-orbit::before, .hos-orbit::after, .hos-core img, .hos-bub { animation: none; } }
.hos-core-btn { border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.hos-photo { object-fit: cover; border-radius: 50% !important; border: 3px solid rgba(39,215,255,.6); }
.hos-name { font-size: 1.9rem !important; letter-spacing: -.5px !important; }
.hos-chips { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; }
.hos-chips button { flex: none; background: #172e46; color: #bdd7ef; border: 1px solid #2a4660; border-radius: 20px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: .8rem; }
.hos-chips button.on { color: #071323; background: #79d6ff; }
.hos .btn.ghost { color: #e7f6ff; border-color: #41677c; background: #173d50; }
.hos .fine { color: #9ec3d8; }
.hos-cash { text-align: center; margin: 2px 0 12px; } .hos-cash small { display: block; color: var(--hos-dim); font-size: .78rem; letter-spacing: .5px; }
.hos-cash b { display: block; font-size: 2.4rem; font-weight: 850; letter-spacing: -1px; line-height: 1.1; text-shadow: 0 0 22px rgba(39,215,255,.35); }
.hos-cash span { font-size: .8rem; color: var(--hos-dim); }
.hos-next { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; font: inherit; color: var(--hos-ink); padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(39,215,255,.18), rgba(112,233,182,.10)); border: 1px solid rgba(39,215,255,.45); box-shadow: 0 0 16px rgba(39,215,255,.15); }
.hos-next-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; background: #244b68; display: grid; place-items: center; font-size: 1.4rem; }
.hos-next small { display: block; font-size: .7rem; color: var(--hos-a); letter-spacing: .5px; text-transform: uppercase; } .hos-next b { display: block; font-size: .95rem; }
.hos-next em { display: block; font-style: normal; font-size: .76rem; color: var(--hos-dim); margin-top: 2px; } .hos-go { font-size: 1.6rem; color: var(--hos-a); }
.hos-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; }
.hos-ring { text-align: center; } .hos-ring-c { position: relative; max-width: 96px; margin: 0 auto; } .hos-ring svg { width: 100%; transform: rotate(-90deg); display: block; }
.hos-ring-bg { fill: none; stroke: #23405a; stroke-width: 8; } .hos-ring-fg { fill: none; stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 4px currentColor); transition: stroke-dasharray .4s; }
.hos-ring-c b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .82rem; font-weight: 800; }
.hos-ring span { display: block; font-size: .7rem; color: var(--hos-dim); margin-top: 4px; }
.hos-cats { display: grid; gap: 6px; margin-top: 10px; }
.hos-cat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); }
.hos-cat .hos-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; background: color-mix(in srgb, var(--tone) 28%, #0b223b); }
.hos-cat b { display: block; font-size: .82rem; } .hos-cat i { display: block; height: 6px; border-radius: 4px; margin-top: 4px; background: var(--tone); box-shadow: 0 0 6px var(--tone); }
.hos-cat .grow { flex: 1; min-width: 0; } .hos-cat strong { font-size: .9rem; }
.hos-hint { color: var(--hos-dim); font-size: .82rem; text-align: center; margin: 10px 0; }
.hos-quick { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr auto; gap: 6px; margin-top: 12px; }
.hos-quick input, .hos-quick select { min-width: 0; background: #081c2e; border: 1px solid #41617a; border-radius: 12px; color: #fff; padding: 10px; font: inherit; font-size: 16px; }
.hos-btn { width: 46px; border: 0; border-radius: 14px; font-size: 1.5rem; font-weight: 800; color: #071323; cursor: pointer; background: linear-gradient(135deg, var(--hos-a), var(--hos-b)); box-shadow: 0 0 14px rgba(39,215,255,.4); }
@media (max-width: 380px) { .hos-quick { grid-template-columns: 1fr 1fr; } .hos-btn { width: auto; } }
/* v1.43 Money Hub Upcoming Payments - Hub OS Living Pages look (Scott's design package 10/15) */
.mhp-sheet { --mhp-bg: #071323; --mhp-cyan: #27d7ff; --mhp-mint: #70e9b6; --mhp-line: #2a4a63; --mhp-dim: #a6bfd6;
  background: radial-gradient(ellipse at 50% -20%, #174a70 0%, #071323 60%); }
@media (min-width: 900px) { #mhSheet .mhp-sheet { max-width: 1100px; } .mhp-cols { grid-template-columns: 1.15fr .85fr !important; } .mhp-hero { grid-template-columns: 1.2fr .8fr !important; } }
.mhp { color: #f4f9ff; }
.mhp h3 { margin: 0 0 12px; font-size: 1.1rem; }
.mhp-hero { display: grid; grid-template-columns: 1fr; gap: 14px; background: linear-gradient(130deg, #183e5c, #0b223b); border: 1px solid #315d82; border-radius: 24px; padding: 20px; box-shadow: 0 17px 40px rgba(0,0,0,.25); }
.mhp-label { font-size: .78rem; color: #abcadd; letter-spacing: .4px; }
.mhp-big { font-weight: 850; font-size: 2.6rem; letter-spacing: -1px; margin: 4px 0 14px; line-height: 1.05; }
.mhp-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.mhp-pill { border-radius: 13px; background: #24435d; padding: 10px 14px; font-size: .78rem; }
.mhp-pill b { display: block; font-size: 1.35rem; margin-top: 2px; } .mhp-pill b.sm { font-size: 1.05rem; }
.mhp-prog p { font-size: .82rem; color: #acc6df; margin: 14px 0 6px; display: flex; justify-content: space-between; }
.mhp-bar { height: 11px; background: #325168; border-radius: 10px; overflow: hidden; } .mhp-bar div { height: 100%; background: linear-gradient(90deg, #48baf5, #66e3bc); transition: width .25s; }
.mhp-orb { min-height: 130px; display: grid; place-items: center; position: relative; }
.mhp-orb::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(25,118,168,.35), transparent 70%); border: 2px dashed rgba(68,207,255,.35); animation: mhp-spin 30s linear infinite; }
.mhp-orb img { width: 104px; height: 104px; border-radius: 26px; position: relative; z-index: 1; filter: drop-shadow(0 0 18px rgba(23,191,255,.55)); }
@keyframes mhp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mhp-orb::before { animation: none; } .mhp-bar div { transition: none; } }
.mhp-sec { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 10px; gap: 10px; } .mhp-sec small { color: var(--mhp-dim); }
.mhp-sec h3 { margin: 0; font-size: 1.25rem; }
.mhp-action { cursor: pointer; background: linear-gradient(135deg, #158ff6, #11caeb); border: 0; color: #fff; border-radius: 12px; font: inherit; font-weight: 700; padding: 11px 16px; }
.mhp-filters { display: flex; gap: 8px; margin: 8px 0 14px; }
.mhp-filters button { background: #172e46; color: #bdd7ef; border: 1px solid #2a4660; border-radius: 20px; padding: 8px 16px; cursor: pointer; font: inherit; }
.mhp-filters button.on { color: #071323; background: #79d6ff; border-color: #79d6ff; }
.mhp-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
.mhp-list { display: grid; gap: 10px; align-content: start; }
.mhp-bill { background: linear-gradient(100deg, #142e46, #0f263d); border: 1px solid #29465c; border-radius: 18px; padding: 14px; display: flex; gap: 12px; align-items: center; }
.mhp-bill.paid { opacity: .7; }
.mhp-sym { width: 48px; height: 48px; flex: none; border-radius: 15px; background: #244b68; display: grid; place-items: center; font-size: 24px; }
.mhp-det { flex: 1; min-width: 0; } .mhp-det strong { display: block; font-size: .98rem; } .mhp-det small { display: block; margin-top: 3px; color: var(--mhp-dim); font-size: .82rem; }
.mhp-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mhp-acts button, .mhp-acts a { cursor: pointer; border: 1px solid #41677c; background: #173d50; color: #e7f6ff; padding: 6px 10px; border-radius: 9px; font: inherit; font-size: .8rem; text-decoration: none; }
.mhp-amt { text-align: right; flex: none; } .mhp-amt b { display: block; font-size: 1.05rem; }
.mhp-st { display: inline-block; margin-top: 6px; color: #91d3ff; background: #1d4563; padding: 4px 9px; border-radius: 12px; font-size: .7rem; }
.mhp-st.paid { color: var(--mhp-mint); background: #154b41; } .mhp-st.late { color: #ffb4ae; background: #4b1d24; }
.mhp-edit { align-items: flex-start; } .mhp-fields { flex: 1; display: grid; gap: 6px; min-width: 0; }
.mhp-panel { background: linear-gradient(140deg, #153550, #0d243a); border: 1px solid #2d5671; border-radius: 22px; padding: 18px; margin-bottom: 14px; }
.mhp-row { display: flex; justify-content: space-between; gap: 14px; margin: 10px 0; font-size: .88rem; } .mhp-row span { color: var(--mhp-dim); }
.mhp-panel hr { border: 0; border-top: 1px solid #36546b; margin: 12px 0; }
.mhp-remain { font-size: 2rem; font-weight: 850; color: var(--mhp-mint); } .mhp-remain.neg { color: #ff978f; }
.mhp-in { display: flex; gap: 10px; margin-top: 10px; } .mhp-in label { flex: 1; font-size: .74rem; color: #b4cde0; min-width: 0; }
.mhp-in input { width: 100%; box-sizing: border-box; background: #081c2e; border: 1px solid #41617a; border-radius: 9px; color: #fff; padding: 9px; margin-top: 4px; }
.mhp-insight { background: #23465e; border-radius: 15px; padding: 14px; line-height: 1.55; color: #d6eeff; font-size: .88rem; }
.mhp-mini { font-size: .74rem; color: #9ec3d8; margin-top: 10px; }
.goal-card .hos-ring { width: 74px; flex: none; } .goal-card .hos-ring span { display: none; }
.mhp-icons { display: flex; flex-wrap: wrap; gap: 6px; } .mhp-icons input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mhp-icons span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #172e46; border: 1px solid #2a4660; font-size: 1.3rem; cursor: pointer; }
.mhp-icons input:checked + span { border-color: #27d7ff; box-shadow: 0 0 10px rgba(39,215,255,.6); background: #1d4563; }
.mhp-icons input:focus-visible + span { outline: 2px solid #27d7ff; }
.mhp-sheet .auto-tabs { background: rgba(7,19,35,.96); }
.auto-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; }
/* v1.45 MONEY HUB CONTROL ROOM (moneyviz.js; Scott 10/16 Hub OS artwork: "Money Hub - visual-first financial control room").
   Deep navy, electric blue/cyan glow, rounded glass cards, bright category tiles. Every class starts .mv- */
body.mv { background: #050b1f; }
body.mv .fab { display: none; }
body.mv #cards { padding-bottom: 96px; }
body.mv .toast { bottom: 100px; }
.mv-home { --ink: #f4f8ff; --dim: #9fb3d9; --hos-a: #38b6ff; --hos-b: #22d3ee; --hos-ink: #f4f8ff; --hos-dim: #9fb3d9; color: var(--ink); background: radial-gradient(ellipse at 50% -10%, #142e74 0%, #0a1638 45%, #060d24 100%) !important;
  border: 1px solid #23387a !important; border-radius: 26px !important; padding: 14px !important; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.mv-bal { position: relative; overflow: hidden; border-radius: 22px; min-height: 212px; border: 1px solid rgba(110,170,255,.35); box-shadow: 0 0 0 1px rgba(39,140,255,.15) inset, 0 12px 34px rgba(18,60,180,.35); }
.mv-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mv-bal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,12,40,.88) 0%, rgba(6,12,40,.55) 46%, rgba(6,12,40,0) 72%); pointer-events: none; }
.mv-bal-in { position: relative; z-index: 1; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.mv-bal-in > *:not(.mv-bal-top) { max-width: 64%; }
.mv-bal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mv-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -.2px; } .mv-brand b { color: #38b6ff; }
.mv-eye { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(160,200,255,.35); background: rgba(10,22,60,.6); color: #fff; cursor: pointer; font-size: 1rem; }
.mv-bal-in > small { color: #c4d4f5; font-size: .82rem; }
.mv-big { font-size: 2.55rem; font-weight: 850; letter-spacing: -1.2px; line-height: 1.05; text-shadow: 0 0 24px rgba(56,182,255,.45); white-space: nowrap; }
.mv-delta { font-size: .8rem; font-weight: 700; } .mv-delta.up { color: #4ade80; } .mv-delta.down { color: #ff8a80; }
.mv-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mv-mini span { font-size: .72rem; color: #c4d4f5; background: rgba(12,26,70,.7); border: 1px solid rgba(120,160,255,.25); border-radius: 10px; padding: 4px 8px; }
.mv-mini b { color: #fff; }
.mv-pay { font-size: .76rem; color: #c4d4f5; margin-top: 6px; }
.mv-star { animation: mv-tw 3s ease-in-out infinite; animation-delay: var(--d); }
.mv-win { animation: mv-glow 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.mv-fall { animation: mv-fall 1.6s linear infinite; }
.mv-isle { animation: mv-float 6s ease-in-out infinite; }
.mv-coin { animation: mv-float 4s ease-in-out infinite reverse; }
@keyframes mv-tw { 50% { opacity: .25; } }
@keyframes mv-glow { 50% { opacity: .72; } }
@keyframes mv-fall { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
@keyframes mv-float { 50% { transform: translateY(-4px); } }
.mv-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 12px; }
.mv-acts button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--ink); font: inherit; font-size: .76rem; cursor: pointer; }
.mv-acts button span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tone) 75%, #fff), var(--tone) 60%, color-mix(in srgb, var(--tone) 60%, #000));
  box-shadow: 0 0 18px color-mix(in srgb, var(--tone) 55%, transparent), inset 0 -3px 6px rgba(0,0,0,.25); transition: transform .15s; }
.mv-acts button:active span { transform: scale(.92); }
.mv-dot { position: absolute; top: -2px; right: calc(50% - 32px); background: #ff5f6d; color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; box-shadow: 0 0 8px #ff5f6d; }
.mv-home .hos-next { background: linear-gradient(110deg, rgba(36,72,170,.45), rgba(14,30,80,.6)); border: 1px solid #2f4ea3; }
.mv-sec { display: flex; justify-content: space-between; align-items: center; margin: 18px 2px 8px; }
.mv-sec h3 { margin: 0; font-size: 1rem; color: #f4f8ff; font-weight: 750; }
.mv-sec button, .mv-sec select { background: none; border: 0; color: #38b6ff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.mv-sec select { background: #10224f; border: 1px solid #2b4690; border-radius: 10px; color: #fff; padding: 6px 8px; }
.mv-accts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mv-acct { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px; border-radius: 16px; cursor: pointer; font: inherit; color: #f4f8ff;
  background: linear-gradient(140deg, rgba(20,38,96,.85), rgba(10,20,56,.85)); border: 1px solid color-mix(in srgb, var(--tone) 40%, #1e3070); min-width: 0; }
.mv-acct span:last-child { min-width: 0; } .mv-acct small { display: block; color: #9fb3d9; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-acct b { display: block; font-size: 1.08rem; letter-spacing: -.3px; white-space: nowrap; }
.mv-acct-add { border-style: dashed; opacity: .85; }
.mv-ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; border: 0; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 90%, #fff), color-mix(in srgb, var(--tone) 70%, #000)); box-shadow: 0 0 12px color-mix(in srgb, var(--tone) 40%, transparent); }
.mv-ic.sm { width: 30px; height: 30px; border-radius: 10px; font-size: .9rem; }
button.mv-ic { cursor: pointer; font: inherit; font-size: 1.15rem; padding: 0; }
.mv-due { display: grid; gap: 6px; }
.mv-due-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 16px; cursor: pointer; font: inherit; color: #f4f8ff;
  background: rgba(16,32,84,.75); border: 1px solid #22387a; }
.mv-due-row .grow { flex: 1; min-width: 0; } .mv-due-row b { display: block; font-size: .92rem; } .mv-due-row small { color: #9fb3d9; font-size: .76rem; }
.mv-due-row em { font-style: normal; font-size: .74rem; font-weight: 700; color: #7fd1ff; } .mv-due-row em.warn { color: #ffb648; } .mv-due-row em.late { color: #ff7a7a; }
.mv-home .hos-ring-bg { stroke: #1b2c66; }
.mv-home .hos-cat { background: rgba(16,32,84,.55); }
.mv-home .hos-quick input, .mv-home .hos-quick select { background: #0a1740; border-color: #2b4690; }
.mv-feats { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.mv-feats::-webkit-scrollbar { display: none; }
.mv-feat { position: relative; scroll-snap-align: start; text-align: left; padding: 12px; border-radius: 18px; cursor: pointer; font: inherit; color: #fff; min-height: 128px;
  background: linear-gradient(160deg, #18307a, #0b1640); border: 1px solid #2a4796; display: flex; flex-direction: column; gap: 4px; }
.mv-feat-ic { font-size: 2rem; filter: drop-shadow(0 0 10px rgba(80,160,255,.7)); margin-bottom: 4px; }
.mv-feat b { font-size: .9rem; line-height: 1.15; } .mv-feat small { color: #9fb3d9; font-size: .72rem; line-height: 1.25; }
.mv-soon { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: .6rem; font-weight: 800; background: #2563eb; color: #fff; padding: 2px 6px; border-radius: 8px; letter-spacing: .5px; }
.mv-switch { display: block; margin: 14px auto 2px; background: rgba(16,32,84,.7); color: #c4d4f5; border: 1px solid #2b4690; border-radius: 20px; padding: 7px 14px; font: inherit; font-size: .8rem; cursor: pointer; }
.mv-switch.top { margin: 6px 0 0 auto; }
/* the bottom bar: Home · Payments · ＋ · Goals · More */
.mv-nav, .mv-tabs { display: flex; align-items: flex-end; justify-content: space-around; }
.mv-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-width: 560px; margin: 0 auto; padding: 6px 8px max(8px, env(safe-area-inset-bottom));
  background: rgba(6,13,36,.94); backdrop-filter: blur(12px); border-top: 1px solid #1f3474; border-radius: 22px 22px 0 0; }
.mv-nav button, .mv-tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: #8ea3cc; font: inherit; font-size: .68rem; cursor: pointer; padding: 4px 0; }
.mv-nav button span, .mv-tabs button span { font-size: 1.3rem; line-height: 1; filter: grayscale(.5); }
.mv-nav button.on, .mv-tabs button.on { color: #fff; background: none; } .mv-nav button.on span, .mv-tabs button.on span { filter: none; }
.mv-nav .mv-plus span, .mv-tabs .mv-plus span { width: 56px; height: 56px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; font-weight: 700; color: #fff; filter: none;
  background: radial-gradient(circle at 35% 30%, #6fc8ff, #1d7cff 60%, #1150c4); box-shadow: 0 0 22px rgba(40,140,255,.7), 0 6px 14px rgba(0,0,0,.4); border: 3px solid #060d24; }
.mv-sheet { background: radial-gradient(ellipse at 50% -20%, #142e74 0%, #070f2a 55%) !important; color: #f4f8ff; }
.mv-sheet .auto-tabs.mv-tabs { background: rgba(6,13,36,.97); border-top: 1px solid #1f3474; padding-top: 8px; overflow: visible; }
.mv-sheet .sheet-head h2 { color: #fff; }
.mv-sheet .home-stat { background: rgba(16,32,84,.7); border-color: #22387a; }
.mv-sheet .row { border-color: #1f3474; }
.mv-sheet input, .mv-sheet select { background: #0a1740; border-color: #2b4690; color: #fff; }
.mv-sheet .fine { color: #9fb3d9; }
.mv-tiles .tile { background: linear-gradient(160deg, #18307a, #0b1640); border: 1px solid #2a4796; color: #fff; }
.mv-tiles .tile-ic { filter: drop-shadow(0 0 8px rgba(80,160,255,.7)); }
/* Add: Photo / Manual / Voice */
.mv-seg { display: flex; gap: 4px; background: #0b1844; border: 1px solid #23387a; border-radius: 14px; padding: 4px; margin: 4px 0 12px; }
.mv-seg button, .mv-seg label span { flex: 1; display: block; text-align: center; background: none; border: 0; color: #9fb3d9; font: inherit; font-size: .9rem; font-weight: 600; padding: 9px 6px; border-radius: 10px; cursor: pointer; }
.mv-seg label { flex: 1; position: relative; } .mv-seg label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mv-seg button.on, .mv-seg label input:checked + span { background: linear-gradient(135deg, #2f8bff, #22c7ff); color: #fff; box-shadow: 0 0 12px rgba(40,150,255,.5); }
.mv-seg label input:focus-visible + span { outline: 2px solid #27d7ff; }
.mv-seg.sm { margin: 4px 0 8px; } .mv-seg.sm button, .mv-seg.sm label span { padding: 7px 6px; font-size: .84rem; }
.mv-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.mv-kinds button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border-radius: 14px; background: #0f1f55; border: 1px solid #23387a; color: #c4d4f5; font: inherit; font-size: .74rem; cursor: pointer; }
.mv-kinds button span { font-size: 1.4rem; } .mv-kinds button.on { border-color: #38b6ff; color: #fff; box-shadow: 0 0 12px rgba(56,182,255,.5); background: #152c78; }
.mv-finder { position: relative; border-radius: 20px; padding: 26px 18px 16px; text-align: center; background: radial-gradient(ellipse at 50% 30%, #1a2f6f, #081233); border: 1px solid #1f3474; }
.mv-finder > i, .mv-shot > i { position: absolute; width: 34px; height: 34px; border: 4px solid #38b6ff; filter: drop-shadow(0 0 6px #38b6ff); }
.mv-finder > i:nth-of-type(1), .mv-shot > i:nth-of-type(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.mv-finder > i:nth-of-type(2), .mv-shot > i:nth-of-type(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.mv-finder > i:nth-of-type(3), .mv-shot > i:nth-of-type(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.mv-finder > i:nth-of-type(4), .mv-shot > i:nth-of-type(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.mv-paper { width: 120px; margin: 0 auto 12px; background: #f4f1e8; border-radius: 6px 6px 2px 2px; padding: 12px 12px 16px; color: #333; font-size: 1.6rem; display: grid; gap: 6px; transform: rotate(-3deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.mv-paper span { height: 5px; background: #c9c3b3; border-radius: 3px; } .mv-paper span:nth-child(3) { width: 70%; } .mv-paper b { height: 8px; background: #555; border-radius: 3px; width: 55%; justify-self: end; }
.mv-finder p { color: #c4d4f5; font-size: .85rem; margin: 0 20px; }
.mv-shoot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mv-shoot .btn { text-align: center; justify-content: center; }
.mv-shot { position: relative; border-radius: 20px; overflow: hidden; background: #000; max-height: 300px; display: grid; place-items: center; }
.mv-shot img { width: 100%; max-height: 300px; object-fit: contain; display: block; }
.mv-xcard { margin-top: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, #142a6b, #0a1640); border: 1px solid #2a4796; display: grid; gap: 8px; }
.mv-xrow { display: grid; grid-template-columns: auto 82px 1fr; gap: 10px; align-items: center; font-size: .82rem; color: #9fb3d9; }
.mv-xrow input, .mv-xrow select { min-width: 0; width: 100%; box-sizing: border-box; font-size: 16px; }
.mv-check { display: flex; gap: 8px; align-items: center; margin: 2px 0; } .mv-check input { width: auto; flex: none; margin: 0; }
.mv-go { background: linear-gradient(135deg, #2f8bff, #22c7ff) !important; color: #fff !important; box-shadow: 0 0 18px rgba(40,150,255,.5); border: 0 !important; }
.mv-amt { font-size: 2rem !important; font-weight: 800; text-align: center; letter-spacing: -1px; }
.mv-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mv-voice { text-align: center; padding: 8px 0 4px; } .mv-voice p { color: #c4d4f5; font-size: .88rem; }
.mv-mic { width: 84px; height: 84px; border-radius: 50%; border: 0; font-size: 2.2rem; cursor: pointer; background: radial-gradient(circle at 35% 30%, #c084fc, #7c3aed 65%); box-shadow: 0 0 26px rgba(168,85,247,.7); }
/* Transactions */
.mv-tstats, .mv-tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mv-tstats div, .mv-tiles3 div { background: rgba(16,32,84,.7); border: 1px solid #22387a; border-radius: 14px; padding: 9px 10px; min-width: 0; }
.mv-tstats small, .mv-tiles3 small { display: block; font-size: .7rem; color: #9fb3d9; } .mv-tstats b, .mv-tiles3 b { font-size: 1.05rem; white-space: nowrap; }
.mv-tiles3 em { display: block; font-style: normal; font-size: .7rem; color: #9fb3d9; }
.mv-tiles3 .neg b { color: #ff8a80; }
.mv-sheet .in, .mv-home .in { color: #4ade80; } .mv-sheet .neg { color: #ff8a80; }
.mv-search { display: flex; align-items: center; gap: 8px; background: #0a1740; border: 1px solid #2b4690; border-radius: 14px; padding: 0 12px; }
.mv-search input { flex: 1; border: 0 !important; background: none !important; padding: 11px 0; font-size: 16px; outline: none; min-width: 0; color: #fff; }
.mv-chips { margin: 8px 0 4px; padding-bottom: 2px; } .mv-sheet .hos-chips button { background: #0f1f55; border-color: #23387a; color: #c4d4f5; }
.mv-sheet .hos-chips button.on { background: #2f8bff; color: #fff; border-color: #2f8bff; }
.mv-count { flex: none; font-size: .76rem; background: #0f1f55; border: 1px solid #23387a; border-radius: 14px; padding: 5px 10px; color: #c4d4f5; }
.mv-grp { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; }
.mv-grp h4 { margin: 0; font-size: .92rem; color: #fff; } .mv-grp b, .mv-grp span { font-size: .82rem; color: #9fb3d9; }
.mv-tx { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(40,64,140,.45); }
.mv-tx .grow { flex: 1; min-width: 0; } .mv-tx .grow b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-tx small { color: #9fb3d9; font-size: .74rem; } .mv-tx strong { font-size: .95rem; white-space: nowrap; }
.mv-x { background: none; border: 0; color: #5d74a8; cursor: pointer; font-size: .85rem; padding: 6px; }
.mv-more { display: block; margin: 10px auto; }
.mv-h { color: #fff !important; font-size: .95rem !important; margin: 20px 0 8px !important; }
/* Payments extras */
.mv-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 14px 0 8px; }
.mv-days button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0 6px; border-radius: 14px; background: #0f1f55; border: 1px solid #23387a; color: #c4d4f5; font: inherit; cursor: pointer; min-width: 0; }
.mv-days small { font-size: .66rem; } .mv-days b { font-size: 1.05rem; color: #fff; } .mv-days i { font-style: normal; font-size: .58rem; color: #ffb648; min-height: .8em; white-space: nowrap; }
.mv-days button.today { border-color: #38b6ff; } .mv-days button.on { background: linear-gradient(160deg, #22c7ff, #2f8bff); color: #fff; box-shadow: 0 0 14px rgba(40,170,255,.6); } .mv-days button.on i { color: #fff; }
.mv-dayline { display: flex; align-items: center; gap: 8px; }
.mv-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mv-cal-h { text-align: center; font-size: .7rem; color: #9fb3d9; }
.mv-cal button { aspect-ratio: .82; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding: 4px 0; border-radius: 10px; background: #0b1844; border: 1px solid #1c2f6c; color: #c4d4f5; font: inherit; cursor: pointer; min-width: 0; overflow: hidden; }
.mv-cal b { font-size: .8rem; } .mv-cal i { font-style: normal; font-size: .7rem; line-height: 1; } .mv-cal small { font-size: .55rem; color: #fff; }
.mv-cal .due { background: #12307a; border-color: #2f6bff; } .mv-cal .late { background: #4b1d34; border-color: #ff6b6b; } .mv-cal .paid { background: #10393a; border-color: #2fae7a; }
.mv-cal .today { box-shadow: 0 0 0 2px #38b6ff inset; } .mv-cal .on { box-shadow: 0 0 12px #38b6ff; }
.mv-sheet .mhp-bill { background: linear-gradient(100deg, #14286a, #0d1b4c); border-color: #23387a; }
.mv-sheet .mhp-hero, .mv-sheet .mhp-panel { background: linear-gradient(140deg, #18307a, #0b1640); border-color: #2a4796; }
.mv-sheet .mhp-pill { background: #1c3584; } .mv-sheet .mhp-insight { background: #1c3584; }
.mv-sheet .mhp-filters button { background: #0f1f55; border-color: #23387a; }
.mv-sheet .mhp-filters button.on { background: #2f8bff; border-color: #2f8bff; color: #fff; }
.mv-sheet .mhp-sym { background: linear-gradient(145deg, #2a4fb8, #13235f); box-shadow: 0 0 12px rgba(56,130,255,.35); }
/* Goals */
.mv-goalscene { position: relative; border-radius: 18px; overflow: hidden; min-height: 140px; display: flex; flex-direction: column; justify-content: flex-start; padding: 12px; }
.mv-goalscene b { position: relative; z-index: 1; font-size: 1.8rem; font-weight: 850; text-shadow: 0 0 14px rgba(56,182,255,.8); } .mv-goalscene small { position: relative; z-index: 1; color: #c4d4f5; }
.mv-gbar { height: 6px; background: #1b2c66; border-radius: 4px; overflow: hidden; margin-top: 6px; } .mv-gbar i { display: block; height: 100%; background: linear-gradient(90deg, #2f8bff, #22d3ee); box-shadow: 0 0 8px #22d3ee; }
.mv-sheet .goal-card .mhp-sym { width: 56px; height: 56px; border-radius: 16px; font-size: 1.8rem; }
.mv-sheet .goal-card .mhp-acts { flex-wrap: nowrap; } .mv-sheet .goal-card .mhp-acts input { width: 72px !important; min-width: 0; }
/* Forecast */
.mv-chart { position: relative; margin: 6px 0; background: linear-gradient(180deg, #0f1f55, #0a1640); border: 1px solid #23387a; border-radius: 18px; padding: 8px 6px 2px; touch-action: pan-y; }
.mv-chart svg { width: 100%; display: block; }
.mv-grid { stroke: #1f3474; stroke-width: 1; } .mv-zero { stroke: #ff6b6b; stroke-width: 1.2; stroke-dasharray: 4 3; }
.mv-ax { fill: #8ea3cc; font-size: 9px; } .mv-lbl { fill: #e6eeff; font-size: 10px; font-weight: 700; }
.mv-line { fill: none; stroke: #27d7ff; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(39,215,255,.7)); }
.mv-pin { stroke: #0a1640; stroke-width: 2; } .mv-pin.in { fill: #4ade80; } .mv-pin.low { fill: #ffb648; } .mv-pin.neg { fill: #ff6b6b; }
.mv-cross { stroke: #c4d4f5; stroke-width: 1; stroke-dasharray: 2 2; }
.mv-tip { position: absolute; top: 8px; background: rgba(4,10,30,.95); border: 1px solid #2b4690; border-radius: 10px; padding: 6px 9px; font-size: .74rem; line-height: 1.4; pointer-events: none; max-width: 58%; }
.mv-alert { background: #4b1d34; border: 1px solid #ff6b6b; border-radius: 14px; padding: 10px 12px; font-size: .85rem; margin: 6px 0; }
.mv-evs { display: grid; gap: 4px; } .mv-ev { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(40,64,140,.45); }
.mv-ev .grow { flex: 1; min-width: 0; } .mv-ev b { display: block; font-size: .88rem; } .mv-ev small { color: #9fb3d9; font-size: .72rem; }
.mv-ev strong { font-size: .88rem; white-space: nowrap; } .mv-ev em { font-style: normal; font-size: .72rem; color: #9fb3d9; width: 62px; text-align: right; }
/* Insights + Vault */
.mv-banner { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: linear-gradient(140deg, #18307a, #0b1640); border: 1px solid #2a4796; margin-bottom: 10px; }
.mv-banner b { display: block; } .mv-banner small { color: #9fb3d9; font-size: .78rem; }
.mv-ins { display: flex; gap: 12px; padding: 12px; border-radius: 18px; margin-bottom: 8px; background: rgba(16,32,84,.75); border: 1px solid color-mix(in srgb, var(--tone) 45%, #22387a); }
.mv-ins .grow { flex: 1; min-width: 0; } .mv-ins b { display: block; font-size: .95rem; } .mv-ins small { display: block; color: #b6c6e6; font-size: .8rem; margin-top: 2px; line-height: 1.4; }
.mv-ins-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mv-ins-acts button { border: 1px solid #2b4690; background: #10224f; color: #e6eeff; padding: 5px 10px; border-radius: 9px; font: inherit; font-size: .76rem; cursor: pointer; }
.mv-vadd { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; } .mv-vadd select { flex: 1; min-width: 0; }
.mv-vault { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mv-doc { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #0f1f55; border: 1px solid #23387a; }
.mv-doc > button:first-child { position: relative; display: block; width: 100%; aspect-ratio: 4/3; border: 0; padding: 0; background: #081233; cursor: pointer; }
.mv-doc img { width: 100%; height: 100%; object-fit: cover; display: block; } .mv-doc img:not([src]) { display: none; }
.mv-doc > button span { position: absolute; left: 6px; bottom: 6px; font-size: 1.2rem; filter: drop-shadow(0 0 4px #000); }
.mv-doc figcaption { padding: 6px 8px 8px; } .mv-doc figcaption b { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-doc figcaption small { color: #9fb3d9; font-size: .7rem; }
.mv-doc .mv-x { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); color: #fff; border-radius: 8px; }
.mv-big-img { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 16px; gap: 10px; align-content: center; }
.mv-big-img img { max-width: 100%; max-height: 80vh; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .mv-star, .mv-win, .mv-fall, .mv-isle, .mv-coin { animation: none; } }
@media (max-width: 360px) { .mv-big { font-size: 2.1rem; } .mv-acts button span { width: 48px; height: 48px; } .mv-xrow { grid-template-columns: auto 70px 1fr; } }
/* v1.45 the classic Money Hub pages, made visual */
.mv-split { display: flex; height: 12px; border-radius: 8px; overflow: hidden; gap: 2px; background: #0a1640; margin: 4px 0; }
.mv-split i { display: block; background: #4ade80; border-radius: 4px; } .mv-split i.owe { background: #ff7a7a; }
.mv-split-k { display: flex; justify-content: space-between; font-size: .74rem; color: #c4d4f5; margin-bottom: 8px; }
.mv-acard-list { display: grid; gap: 8px; }
.mv-acard { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 18px; background: linear-gradient(140deg, rgba(20,38,96,.9), rgba(10,20,56,.9)); border: 1px solid color-mix(in srgb, var(--tone) 45%, #1e3070); }
.mv-acard .grow { flex: 1; min-width: 0; } .mv-acard .grow > b { display: block; font-size: .98rem; } .mv-acard small { display: block; color: #9fb3d9; font-size: .74rem; margin-top: 2px; }
.mv-acard strong { font-size: 1.15rem; white-space: nowrap; }
.mv-balf { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .mv-balf span { color: #9fb3d9; }
.mv-balf input { width: 110px; min-width: 0; padding: 6px 8px !important; font-size: 16px; border-radius: 9px; }
.mv-budget-top { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: linear-gradient(140deg, #18307a, #0b1640); border: 1px solid #2a4796; margin-bottom: 10px; }
.mv-budget-top .hos-ring { width: 96px; flex: none; } .mv-budget-top .hos-ring span { display: none; }
.mv-budget-top > div:last-child > b { display: block; font-size: 1.4rem; } .mv-budget-top > div:last-child > b small { font-size: .85rem; color: #9fb3d9; font-weight: 500; } .mv-budget-top > div:last-child > span { font-size: .78rem; color: #9fb3d9; }
.mv-rings { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mv-bring { position: relative; text-align: center; padding: 12px 8px 10px; border-radius: 18px; background: rgba(16,32,84,.75); border: 1px solid #22387a; }
.mv-bring.near { border-color: #ffb648; } .mv-bring.over { border-color: #ff7a7a; background: rgba(75,29,52,.6); }
.mv-bring .hos-ring-c { max-width: 76px; } .mv-bring .hos-ring-c b { font-size: 1.4rem; } .mv-bring .hos-ring span { color: #e6eeff; font-size: .8rem; font-weight: 700; }
.mv-bring > b { display: block; font-size: .95rem; margin-top: 4px; } .mv-bring > b small { color: #9fb3d9; font-weight: 500; }
.mv-bring > em { display: block; font-style: normal; font-size: .72rem; color: #9fb3d9; } .mv-bring.over > em { color: #ff9a9a; } .mv-bring.near > em { color: #ffc876; }
.mv-bring .mv-x { position: absolute; top: 4px; right: 4px; }
.mv-sub { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 18px; margin-bottom: 8px; background: rgba(16,32,84,.75); border: 1px solid #22387a; }
.mv-sub.off { opacity: .5; } .mv-sub .grow { flex: 1; min-width: 0; } .mv-sub .grow > b { display: block; } .mv-sub small { display: block; color: #9fb3d9; font-size: .76rem; }
.mv-mono { font-weight: 850; font-size: 1.3rem !important; }
.mv-subbar { display: block; height: 4px; border-radius: 3px; margin-top: 6px; background: var(--tone); box-shadow: 0 0 6px var(--tone); min-width: 6px; }
.mv-when { font-style: normal; font-size: .78rem; font-weight: 800; color: #7fd1ff; background: #10224f; border: 1px solid #2b4690; border-radius: 10px; padding: 4px 8px; }
.mv-when.soon { color: #ffb648; border-color: #ffb648; }
.mv-legend { display: flex; gap: 14px; font-size: .78rem; color: #c4d4f5; margin: 4px 0 6px; } .mv-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.mv-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 8px 8px; border-radius: 18px; background: linear-gradient(180deg, #0f1f55, #0a1640); border: 1px solid #23387a; }
.mv-bcol { text-align: center; min-width: 0; } .mv-bcol > b { display: block; font-size: .8rem; margin-top: 6px; } .mv-bcol > small { font-size: .66rem; white-space: nowrap; }
.mv-bpair { height: 150px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid #2b4690; }
.mv-bpair i { position: relative; width: 38%; max-width: 26px; border-radius: 4px 4px 0 0; } .mv-bpair i.in { background: #4ade80; } .mv-bpair i.out { background: #38b6ff; }
.mv-bpair i span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) rotate(-60deg); transform-origin: bottom left; font-size: .56rem; color: #c4d4f5; white-space: nowrap; margin-bottom: 2px; font-style: normal; }
.mv-sub-h { font-weight: 500; color: #9fb3d9; font-size: .72rem; }
.mv-crow { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 8px; align-items: center; font-size: .82rem; padding: 5px 0; }
.mv-crow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-crow b { font-size: .84rem; white-space: nowrap; }
.mv-ctrack { position: relative; height: 10px; border-radius: 5px; background: #0f1f55; }
.mv-ctrack i { display: block; height: 100%; border-radius: 5px; background: var(--tone); box-shadow: 0 0 6px color-mix(in srgb, var(--tone) 60%, transparent); }
.mv-ctrack em { position: absolute; top: -3px; width: 2px; height: 16px; background: #fff; border-radius: 1px; box-shadow: 0 0 0 2px #0a1640; }
.mv-table { margin-top: 12px; } .mv-table summary { cursor: pointer; color: #38b6ff; font-size: .85rem; padding: 6px 0; }
.mv-road { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: linear-gradient(140deg, #18307a, #0b1640); border: 1px solid #2a4796; }
.mv-rrow { display: flex; align-items: center; gap: 10px; } .mv-rrow .grow { flex: 1; min-width: 0; } .mv-rrow b { font-size: .9rem; } .mv-rrow small { color: #9fb3d9; font-size: .72rem; margin-left: 6px; }
.mv-rn { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; background: #2f8bff; }
.mv-rtrack { height: 8px; border-radius: 5px; background: #0a1640; margin-top: 4px; } .mv-rtrack i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #ff7a7a, #ffb648, #4ade80); }
.mv-rrow em { font-style: normal; font-size: .76rem; white-space: nowrap; color: #c4d4f5; }
.mv-rend { text-align: center; font-weight: 800; font-size: .9rem; color: #4ade80; padding-top: 4px; }
.mv-fall-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 12px 8px 8px; border-radius: 18px; background: linear-gradient(180deg, #0f1f55, #0a1640); border: 1px solid #23387a; margin-bottom: 10px; }
.mv-wcol { text-align: center; min-width: 0; } .mv-wbox { position: relative; height: 130px; border-bottom: 1px solid #2b4690; }
.mv-wbox i { position: absolute; left: 18%; right: 18%; border-radius: 4px; }
.mv-wcol b { display: block; font-size: .68rem; margin-top: 5px; white-space: nowrap; } .mv-wcol small { font-size: .64rem; color: #9fb3d9; }
.mv-gpic { position: relative; overflow: hidden; cursor: pointer; } .mv-gpic img { width: 100%; height: 100%; object-fit: cover; }
.mv-gpic i { position: absolute; right: 2px; bottom: 2px; font-style: normal; font-size: .7rem; background: rgba(0,0,0,.6); border-radius: 6px; padding: 1px 3px; }
.mv-hello { margin: 0 0 12px; } .mv-hello .mv-bal { min-height: 230px; }
.mv-hello-in { position: relative; z-index: 1; padding: 18px; }
.mv-hello-in img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 0 22px rgba(56,182,255,.6); }
.mv-hello-in h1 { margin: 10px 0 0; font-size: 2.2rem; letter-spacing: -1px; color: #fff; } .mv-hello-in h1 b { color: #38b6ff; }
.mv-hello-in p { margin: 0 0 12px; color: #c4d4f5; }
.mv-promise { display: flex; flex-wrap: wrap; gap: 6px; max-width: 62%; } .mv-promise span { font-size: .7rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: rgba(47,139,255,.35); border: 1px solid #38b6ff; border-radius: 10px; padding: 3px 8px; }
.mv-hello-feats { margin-top: 10px; } .mv-hello-feats .mv-feat { min-height: 96px; cursor: default; }
.mv-welcome { background: linear-gradient(160deg, #142a6b, #0a1640) !important; border-color: #2a4796 !important; color: #f4f8ff; }
body.mvapp .fab { display: none; }
.mv-hello-in p { max-width: 58%; }
.mv-fam { margin-top: 14px; padding: 4px 12px 8px; border-radius: 18px; border: 1px dashed #2f6bff; background: rgba(16,32,84,.45); }
/* v1.46 debt payoff chart + the payday planner as a two-column grid */
.mv-line2 { stroke: #a78bfa; stroke-dasharray: 5 4; filter: none; opacity: .9; }
.mv-pin.purple { fill: #a78bfa; stroke: #0a1640; stroke-width: 2; }
#mhSheet .home-stats .home-stat b { white-space: nowrap; }
.mv-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.mv-plan .field { margin: 0; font-size: .8rem; }
.mv-plan .field input { margin-top: 4px; }
.mv-plan .foot-actions { grid-column: 1 / -1; }
/* v1.46 CONNECT (bank, cards, Cash App, Venmo, PayPal - files read on the phone) + CASH FLOW */
.mv-conn-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; margin-bottom: 10px; background: radial-gradient(120% 140% at 0% 0%, #1f3d9a, #0b1640 70%); border: 1px solid #2a4796; }
.mv-conn-hero h3 { margin: 0 0 4px; font-size: 1.1rem; } .mv-conn-hero p { margin: 0; font-size: .8rem; color: #c4d4f5; line-height: 1.4; }
.mv-conn-orbit { position: relative; width: 92px; height: 92px; flex: none; border-radius: 50%; border: 1px dashed #3b5bb5; }
.mv-conn-orbit > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.9rem; filter: drop-shadow(0 0 10px #38b6ff); }
.mv-conn-orbit span { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; display: grid; place-items: center; font-size: .85rem; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 30%, #0a1640); border: 1px solid var(--tone); transform: rotate(calc(var(--k) * 60deg)) translate(46px) rotate(calc(var(--k) * -60deg)); }
.mv-conn-k { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mv-conn-k span { font-size: .72rem; color: #c4d4f5; background: rgba(10,22,64,.7); border: 1px solid #2b4690; border-radius: 10px; padding: 3px 8px; }
.mv-file { cursor: pointer; } .mv-file-big { display: flex; justify-content: center; width: 100%; padding: 14px; font-size: 1rem; border-radius: 16px; }
.mv-center { text-align: center; }
.mv-conn-list { display: grid; gap: 8px; }
.mv-conn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(16,32,84,.75); border: 1px solid color-mix(in srgb, var(--tone) 45%, #1e3070); }
.mv-conn .grow { flex: 1; min-width: 0; } .mv-conn .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-conn small { color: #9fb3d9; font-size: .74rem; }
.mv-srcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mv-src { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; color: #e6eeff; cursor: pointer; min-height: 84px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 22%, #10225a), #0b1640); border: 1px solid color-mix(in srgb, var(--tone) 50%, #1e3070); }
.mv-src span { font-size: 1.5rem; } .mv-src b { font-size: .78rem; line-height: 1.2; text-align: center; }
.mv-src.on { box-shadow: 0 0 0 2px var(--tone), 0 0 16px color-mix(in srgb, var(--tone) 50%, transparent); }
.mv-src-how { margin-top: 8px; padding: 12px; border-radius: 16px; background: rgba(10,22,64,.85); border: 1px solid var(--tone); }
.mv-src-how p { margin: 6px 0 10px; font-size: .84rem; color: #c4d4f5; line-height: 1.45; }
.mv-conn-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.mv-conn-why div { text-align: center; padding: 10px 6px; border-radius: 14px; background: rgba(16,32,84,.6); border: 1px solid #22387a; }
.mv-conn-why span { font-size: 1.3rem; } .mv-conn-why b { display: block; font-size: .78rem; margin: 2px 0; } .mv-conn-why small { font-size: .68rem; color: #9fb3d9; line-height: 1.3; display: block; }
.mv-imp { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; margin-bottom: 8px; background: linear-gradient(140deg, color-mix(in srgb, var(--tone) 25%, #10225a), #0b1640); border: 1px solid var(--tone); }
.mv-imp .grow { min-width: 0; } .mv-imp b { display: block; } .mv-imp small { color: #9fb3d9; font-size: .74rem; word-break: break-all; }
.mv-tx.move { opacity: .7; } .mv-tx.move strong { color: #9fb3d9; }
.mv-safe { display: block; text-align: center; padding: 14px; border-radius: 20px; margin-bottom: 6px; background: radial-gradient(120% 130% at 50% 0%, #17406f, #0b1640 75%); border: 1px solid #2fa35a; }
.mv-safe.neg { border-color: #ff7a7a; background: radial-gradient(120% 130% at 50% 0%, #4b1d34, #0b1640 75%); }
.mv-safe small { display: block; font-size: .74rem; color: #9fb3d9; text-transform: uppercase; letter-spacing: .04em; }
.mv-safe > b { display: block; font-size: 2.1rem; font-weight: 850; margin: 2px 0; }
.mv-safe span { display: block; font-size: .86rem; color: #e6eeff; } .mv-safe em { display: block; font-style: normal; font-size: .7rem; color: #9fb3d9; margin-top: 6px; }
.mv-split3 { height: 16px; } .mv-split3 i { border-radius: 4px; }
.mv-parts { display: grid; gap: 6px; margin-top: 8px; }
.mv-part { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: rgba(16,32,84,.65); border: 1px solid #22387a; }
.mv-part > i { width: 12px; height: 12px; border-radius: 4px; flex: none; } .mv-part .grow { flex: 1; min-width: 0; } .mv-part .grow b { display: block; font-size: .9rem; }
.mv-part .grow small { color: #9fb3d9; font-size: .7rem; } .mv-part strong { text-align: right; white-space: nowrap; } .mv-part strong small { display: block; font-weight: 500; font-size: .68rem; color: #9fb3d9; }
.mv-net { font-weight: 800; fill: #8ff0b0; } .mv-net.neg { fill: #ff9a9a; } .mv-ax.now { fill: #fff; font-weight: 800; }
.mv-ctrack[style*="--tone"] i { background: var(--tone); }
@media (max-width: 380px) { .mv-conn-hero { flex-direction: column; text-align: center; } .mv-conn-k { justify-content: center; } }