/* NiNav's homepage. The page is NiNav's own dark canvas, and every value
   below is a copy of a role in app/lib/shared/design/tokens (named the
   same, in kebab case). Colour only for the emotional states and the
   category identities, as in the app. No fonts or scripts from anywhere
   else: Inter is served from /fonts. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var-v1.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Solids (colors.dart, dark) */
  --canvas: #050505;
  --ink: #ffffff;
  --text-strong: rgba(255, 255, 255, 0.8);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.6);
  --text-quiet: rgba(255, 255, 255, 0.5);
  --text-faint: rgba(255, 255, 255, 0.4);
  --text-meta: #b3b3b3;
  --text-muted: #999999;
  --wash: rgba(255, 255, 255, 0.1);
  --wash-active: rgba(255, 255, 255, 0.18);
  --wash-subtle: rgba(255, 255, 255, 0.06);
  --wash-faint: rgba(255, 255, 255, 0.04);
  --wash-track: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.08);
  --stroke-soft: rgba(153, 153, 153, 0.6);
  --stroke-dim: #5a5a5a;
  --sheet-fill: #202326;
  --sheet-grabber: #666666;
  --card: #121212;
  --cta-fill: #ffffff;
  --on-cta-fill: #050505;

  /* Status (colors.dart 4.4) */
  --upcoming: #8b90a7;
  --due-soon: #f4a83a;
  --expired: #e05c5c;
  --success: #4caf82;

  /* Atmosphere: the top of Home's emotion wash */
  --atmosphere-good: #263d38;
  --atmosphere-upcoming: #46412b;
  --atmosphere-overdue: #452828;
  --atmosphere-neutral: #5b5f70;

  /* Platinum (platinum.dart): Premium surfaces only */
  --platinum: linear-gradient(135deg, #b4bac2 0%, #cbd0d6 22%, #a3aab3 45%, #8e96a0 62%, #aeb4bc 80%, #959dA7 100%);
  --platinum-ink: #0e1013;
  --platinum-ink-meta: rgba(14, 16, 19, 0.72);

  /* Space (spacing.dart) and corners (radius.dart) */
  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 32px;
  --xxl: 48px;
  --xxxl: 72px;
  --r-cell: 12px;
  --r-sm: 14px;
  --r-tile: 16px;
  --r-md: 20px;
  --r-lg: 22px;
  --r-xl: 36px;

  /* Motion (motion.dart) */
  --quick: 150ms;
  --standard: 250ms;
  --emphasized: 350ms;
  --standard-curve: cubic-bezier(0.2, 0, 0, 1);
  --spring-curve: cubic-bezier(0.34, 1.4, 0.64, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  overflow-wrap: break-word;
  overflow-x: hidden;
}

a { color: inherit; text-underline-offset: 3px; }

img, svg { display: block; }

.icon { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 8px 16px;
  background: var(--cta-fill);
  color: var(--on-cta-fill);
  border-radius: 999px;
  z-index: 50;
}

.skip:focus { left: 16px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--md);
}

/* The page's one soft light, as Home opens: the good state, low. */
.glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 0%, rgba(38, 61, 56, 0.85), transparent 70%),
    radial-gradient(40% 40% at 15% 10%, rgba(91, 95, 112, 0.35), transparent 70%);
  z-index: -1;
}

/* Top bar */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 5, 5, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--standard) var(--standard-curve);
}

.top.scrolled { border-bottom-color: var(--divider); }

.top .wrap {
  display: flex;
  align-items: center;
  gap: var(--md);
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.2px;
}

.brand svg { width: 32px; height: 32px; }

.top nav {
  display: flex;
  gap: var(--lg);
  margin-left: auto;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.top nav a { text-decoration: none; }

.top nav a:hover { color: var(--ink); }

/* Buttons: the white CTA language, and a flat secondary. */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--cta-fill);
  color: var(--on-cta-fill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: transform var(--quick) var(--spring-curve);
}

.cta:active { transform: scale(0.97); }

.cta .play { width: 18px; height: 18px; }

.cta.small { min-height: 40px; padding: 8px 18px; font-size: 0.9375rem; }

.secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--wash);
  border: 0.6px solid var(--stroke-soft);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
}

.secondary:hover { background: var(--wash-active); }

/* Hero */

.hero {
  display: grid;
  gap: var(--xl);
  align-items: center;
  padding: var(--xl) 0 var(--xxl);
}

.hero .kicker {
  color: var(--text-meta);
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0 0 var(--md);
}

h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 var(--lg);
  text-wrap: balance;
}

.lead {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text-strong);
  margin: 0 0 var(--xl);
  max-width: 34em;
  text-wrap: pretty;
}

.hero .actions { display: flex; flex-wrap: wrap; gap: var(--md); align-items: center; }

.assure {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: var(--lg) 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-meta);
  font-size: 0.9375rem;
}

.assure li { display: flex; align-items: center; gap: 8px; margin: 0; }

.assure li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

/* The demo: a phone, and the screen picker under it. */

.demo { display: flex; flex-direction: column; align-items: center; gap: var(--md); }

.demo-hint { color: var(--text-meta); font-size: 0.9375rem; margin: 0; text-align: center; }

.screens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--wash-subtle);
  border: 0.6px solid var(--stroke-soft);
  max-width: 100%;
}

.screens button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
}

.screens button[aria-pressed="true"] { background: var(--wash-active); color: var(--ink); }

/* Sections */

section.band { padding: var(--xxxl) 0 0; }

h2 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--md);
  text-wrap: balance;
}

.band > .wrap > p.sub {
  color: var(--text-meta);
  font-size: 1.125rem;
  max-width: 36em;
  margin: 0 0 var(--xl);
}

h3 { font-size: 1.1875rem; line-height: 1.3; margin: 0 0 var(--sm); letter-spacing: -0.1px; }

.grid { display: grid; gap: var(--md); }

/* A preview is not tappable, so it has no stroke (fill only). */
.panel {
  background: var(--card);
  border-radius: var(--r-md);
  padding: var(--lg);
}

.panel p { color: var(--text-meta); margin: 0; }

.panel .try { margin-top: var(--md); }

.step-no {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wash);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: var(--md);
}

.quote {
  display: inline-block;
  color: var(--ink);
  font-weight: 500;
}

/* What you can keep: the category tiles, as in Add Item's grid. */

.kinds { display: grid; gap: var(--sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

.kind {
  display: flex;
  gap: var(--md);
  align-items: flex-start;
  background: var(--card);
  border-radius: var(--r-tile);
  padding: var(--md);
}

.kind strong { display: block; font-weight: 600; line-height: 1.35; }

.kind div > span { color: var(--text-meta); font-size: 0.9375rem; line-height: 1.45; display: block; margin-top: 2px; }

.tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--tile-bg);
  box-shadow: inset 0 0 0 1px var(--tile-rim);
  color: var(--tile-ink, #fff);
}

.tile .icon { width: 24px; height: 24px; }

.c-insurance { --tile-bg: #3a364e; --tile-rim: #57527a; --tile-ink: #ffffff; }
.c-utility { --tile-bg: #493b20; --tile-rim: #75602f; --tile-ink: #f0c485; }
.c-subscription { --tile-bg: #3a2c4d; --tile-rim: #5d4880; --tile-ink: #d8c4ff; }
.c-appliance { --tile-bg: #29423b; --tile-rim: #3f6357; --tile-ink: #ffffff; }
.c-membership { --tile-bg: #24423a; --tile-rim: #3a6b5c; --tile-ink: #8bc8b0; }
.c-vehicle { --tile-bg: #2c5450; --tile-rim: #3f7570; --tile-ink: #ffffff; }
.c-document { --tile-bg: #4a2a2e; --tile-rim: #7d3d42; --tile-ink: #f2b8bc; }
.c-loan { --tile-bg: #2f4252; --tile-rim: #5c7a92; --tile-ink: #cfe3f2; }
.c-warranty { --tile-bg: #3d3628; --tile-rim: #6b5e45; --tile-ink: #e6d6b5; }
.c-device { --tile-bg: #22403f; --tile-rim: #3e8481; --tile-ink: #8ccccc; }
.c-other { --tile-bg: #4a3133; --tile-rim: #8a4f52; --tile-ink: #e49699; }
.c-neutral { --tile-bg: #2d2f36; --tile-rim: #5b5f70; --tile-ink: #ffffff; }

/* Private by design */

.points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

.points li { background: var(--card); border-radius: var(--r-md); padding: var(--lg); margin: 0; }

.points strong { display: block; font-size: 1.0625rem; margin-bottom: 4px; }

.points span { color: var(--text-meta); }

/* Free and Premium */

.plans { display: grid; gap: var(--md); align-items: stretch; }

.plan { border-radius: var(--r-lg); padding: var(--xl) var(--lg); display: flex; flex-direction: column; }

.plan.free { background: var(--card); }

.plan h3 { font-size: 1.5rem; margin: 0 0 4px; }

.price { font-size: 1.0625rem; margin: 0 0 var(--lg); color: var(--text-meta); }

.plan ul { list-style: none; padding: 0; margin: 0 0 var(--lg); display: grid; gap: 12px; }

.plan li { display: flex; gap: 12px; margin: 0; line-height: 1.4; }

.plan li small { display: block; font-size: 0.875rem; color: var(--text-meta); margin-top: 2px; }

.tick {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wash);
  margin-top: 1px;
}

.tick svg { width: 12px; height: 12px; }

.plan .foot { margin-top: auto; font-size: 0.9375rem; color: var(--text-meta); }

/* Premium is platinum, as on the app's Premium screen. */
.plan.premium {
  position: relative;
  background: var(--platinum);
  color: var(--platinum-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 20px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.plan.premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 184, 220, 0.18) 35%, rgba(255, 226, 176, 0.18) 45%, rgba(184, 255, 216, 0.18) 55%, rgba(176, 220, 255, 0.18) 65%, transparent 80%);
  pointer-events: none;
}

.plan.premium > * { position: relative; }

.plan.premium .price, .plan.premium li small, .plan.premium .foot { color: var(--platinum-ink-meta); }

.plan.premium .tick { background: rgba(14, 16, 19, 0.12); }

.fineprint { color: var(--text-muted); font-size: 0.9375rem; margin: var(--md) 0 0; }

/* Questions: a stroke, because each one opens. */

.faq { display: grid; gap: var(--sm); max-width: 760px; }

.faq details {
  border: 0.6px solid var(--stroke-soft);
  background: var(--wash-faint);
  border-radius: var(--r-tile);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--md) var(--lg);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: var(--md);
  align-items: center;
  line-height: 1.4;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid var(--text-quiet);
  border-bottom: 2px solid var(--text-quiet);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--standard) var(--standard-curve);
}

.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }

.faq details > div { padding: 0 var(--lg) var(--md); color: var(--text-meta); }

.faq details > div p { margin: 0 0 var(--sm); }

/* Closing */

.closing { text-align: center; padding: var(--xxxl) 0; }

.closing svg.mark { width: 56px; height: 56px; margin: 0 auto var(--lg); }

.closing h2 { margin-bottom: var(--lg); }

footer.site {
  border-top: 1px solid var(--divider);
  padding: var(--xl) 0 var(--xxl);
  color: var(--text-meta);
  font-size: 0.9375rem;
}

footer.site .wrap { display: flex; flex-wrap: wrap; gap: var(--md) var(--xl); justify-content: space-between; }

footer.site nav { display: flex; flex-wrap: wrap; gap: var(--sm) var(--lg); }

footer.site p { margin: 0; }

/* Wider screens */

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 940px) {
  .hero { grid-template-columns: 1.05fr 1fr; padding-top: var(--xxl); }
}

@media (max-width: 560px) {
  .top nav { display: none; }
  .top .cta.small { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ===================================================================
   The phone. Drawn at the app's own size (360 dp wide) and scaled to
   fit by home.js. Values are the app's: Home, Add Item, Calendar, Item
   Detail and the widgets, read off the store screenshots.
   =================================================================== */

.phone-fit { position: relative; width: 384px; height: 804px; }

.phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 384px;
  height: 804px;
  padding: 12px;
  border-radius: 54px;
  background: #0c0c0c;
  box-shadow: inset 0 0 0 1.5px #2b2b2b, inset 0 0 0 4px #050505, 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px #1c1c1c;
  transform-origin: top left;
}

.screen {
  position: relative;
  width: 360px;
  height: 780px;
  border-radius: 42px;
  overflow: hidden;
  background: var(--canvas);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

:where(.screen) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }

.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  padding: 10px 26px 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  z-index: 30;
  pointer-events: none;
}

.status-bar .sys { display: flex; gap: 6px; align-items: center; }

.status-bar .bat { width: 22px; height: 11px; border-radius: 4px; background: #fff; }

.home-bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 96px;
  height: 4px;
  margin-left: -48px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 40;
  pointer-events: none;
}

.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity var(--standard) var(--standard-curve), transform var(--emphasized) var(--standard-curve), visibility 0s linear var(--emphasized);
}

.view::-webkit-scrollbar { display: none; }

.view.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.atmos {
  position: absolute;
  inset: 0 0 auto 0;
  height: 520px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, var(--atmos, var(--atmosphere-neutral)) 0%, color-mix(in srgb, var(--atmos, var(--atmosphere-neutral)) 45%, var(--canvas)) 38%, var(--canvas) 100%);
  opacity: 0.75;
  transition: background var(--emphasized) var(--standard-curve);
}

.st-overdue { --atmos: var(--atmosphere-overdue); --state: var(--expired); }
.st-soon { --atmos: var(--atmosphere-upcoming); --state: var(--due-soon); }
.st-good { --atmos: var(--atmosphere-good); --state: var(--success); }
.st-calm { --atmos: var(--atmosphere-neutral); --state: var(--upcoming); }

/* Glass controls (GlassMaterialCircle / Capsule / Pill) */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 0.6px rgba(255, 255, 255, 0.16), 0 6px 16px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform var(--quick) var(--spring-curve);
}

.glass:active { transform: scale(1.06); }

.circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }

.circle .icon { width: 20px; height: 20px; }

.app-top { display: flex; align-items: center; justify-content: space-between; padding: 44px 16px 0; min-height: 88px; }

.greeting { font-size: 16px; line-height: 24px; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.2px; }

.top-actions { display: flex; gap: 6px; }

.sign-in { height: 40px; padding: 0 16px 0 14px; border-radius: 999px; display: flex; align-items: center; gap: 8px; font-size: 14px; }

.sign-in i { position: relative; width: 16px; height: 16px; }

.sign-in i svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }

.sign-in i::after { content: ""; position: absolute; top: -3px; right: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* Home hero */
.hero-card { position: relative; text-align: center; padding: 18px 24px 26px; }

.hero-card .state { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--state); font-weight: 500; }

.hero-card .state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--state); }

.hero-card .tile { width: 36px; height: 36px; border-radius: 10px; margin: 10px auto 6px; box-shadow: none; }

.hero-card .tile .icon { width: 20px; height: 20px; }

.hero-name { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.256px; margin: 6px 0 4px; }

.hero-kind { font-size: 15px; color: var(--upcoming); line-height: 22px; }

.hero-date { font-size: 16px; line-height: 24px; font-weight: 700; }

.hero-need { font-size: 13px; color: var(--text-tertiary); margin-top: 4px; }

.hero-open { position: absolute; right: 16px; top: 108px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-secondary); }

.hero-open .icon { width: 18px; height: 18px; }

.hero-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

.pill-btn { height: 44px; padding: 0 30px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: 0.3px; display: inline-flex; align-items: center; }

.hero-swap { transition: opacity var(--standard) var(--standard-curve), transform var(--emphasized) var(--standard-curve); }

.hero-swap.leaving { opacity: 0; transform: translateY(-14px) scale(0.98); }

.hero-swap.arriving { opacity: 0; transform: translateY(14px); }

/* Cards on Home */
.home-card { margin: 0 14px 16px; background: var(--card); border-radius: 26px; box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.08); overflow: hidden; }

.card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 4px; }

.card-head .badge { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }

.card-head .badge .icon { width: 16px; height: 16px; }

.card-head .title { font-size: 16px; font-weight: 600; flex: 1; }

.card-head .aside { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 2px; }

.card-head .aside .icon { width: 14px; height: 14px; }

.progress-line { display: flex; justify-content: space-between; padding: 6px 14px 0; font-size: 12px; color: var(--text-tertiary); }

.progress-line b { color: var(--ink); font-weight: 600; font-size: 13px; }

.track { margin: 6px 14px 4px; height: 4px; border-radius: 4px; background: var(--wash-track); overflow: hidden; }

.track i { display: block; height: 100%; width: 0; background: var(--success); border-radius: 4px; transition: width var(--emphasized) var(--standard-curve); }

.row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; width: 100%; border-top: 0.6px solid rgba(255, 255, 255, 0.06); transition: background var(--quick); }

.row:first-child { border-top: 0; }

.row:active { background: var(--wash-subtle); }

.row .tile { width: 32px; height: 32px; border-radius: 10px; }

.row .tile .icon { width: 18px; height: 18px; }

.row .what { flex: 1; min-width: 0; }

.row .name, .row .line, .row .when b, .row .when > span { display: block; }

.row .name { font-size: 14px; line-height: 19px; font-weight: 600; }

.row .line { font-size: 12px; line-height: 16px; color: var(--text-tertiary); }

.row .when { text-align: right; font-size: 12px; line-height: 16px; }

.row .when b { display: block; font-size: 13px; font-weight: 500; color: var(--text-strong); }

.row .when span { color: var(--text-tertiary); }

.row.overdue .when b { color: var(--expired); }

.row.soon .when b { color: var(--due-soon); }

.row.fresh { animation: fresh 1.6s var(--standard-curve); }

@keyframes fresh { 0% { background: rgba(76, 175, 130, 0.28); } 100% { background: transparent; } }

.empty-row { padding: 14px; color: var(--text-tertiary); font-size: 13px; text-align: center; }

/* Spend card */
.spend { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 14px 0; }

.spend .label { font-size: 12px; color: var(--text-tertiary); }

.spend .amount { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.12px; }

.spend .amount small { font-size: 24px; font-weight: 400; margin-right: 4px; }

.spend .range { font-size: 12px; color: var(--upcoming); }

.bars { display: flex; gap: 8px; align-items: flex-end; height: 64px; }

.bars div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--upcoming); }

.bars i { width: 9px; border-radius: 3px; background: #4a4c57; transition: height var(--emphasized) var(--standard-curve); }

.bars .now { color: var(--ink); }

.bars .now i { background: var(--success); box-shadow: 0 0 10px rgba(76, 175, 130, 0.55); }

.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 14px 10px 16px; font-size: 11px; text-align: center; }

.mini-cal .dow { color: var(--text-quiet); font-size: 10px; }

.mini-cal .d { height: 34px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; color: var(--text-tertiary); line-height: 13px; }

.mini-cal .d.past { color: var(--text-faint); }

.mini-cal .d.today { box-shadow: inset 0 0 0 1px #fff; color: #fff; font-weight: 700; }

.mini-cal .d.money { background: #18392b; color: #fff; font-weight: 700; }

.mini-cal .d.money small { color: var(--success); font-size: 9px; font-weight: 700; }

/* Bottom navigation */
.nav { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 236px; height: 62px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; z-index: 20; background: rgba(52, 52, 52, 0.82); }

.nav.glass:active { transform: translateX(-50%); }

.nav .tab { width: 74px; height: 50px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: #cccccc; }

.nav .tab .icon { width: 18px; height: 18px; }

.nav .tab.on { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.16); }

.nav .plus { position: absolute; left: 50%; top: -14px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; display: grid; place-items: center; background: #2d4241; box-shadow: 0 0 0 5px var(--canvas), inset 0 0 0 1.2px #5d8a86, 0 0 24px rgba(65, 140, 130, 0.45); }

.nav .plus svg { width: 22px; height: 22px; }

/* Item Detail */
.detail-top { display: flex; justify-content: space-between; padding: 46px 14px 0; }

.identity { display: flex; gap: 12px; align-items: center; padding: 20px 16px 8px; }

.identity .tile { width: 32px; height: 32px; border-radius: 9px; }

.identity .tile .icon { width: 18px; height: 18px; }

.identity .name { font-size: 20px; line-height: 26px; font-weight: 600; display: flex; align-items: center; gap: 4px; }

.identity .name .icon { width: 14px; height: 14px; color: var(--text-secondary); }

.identity .cat { font-size: 12px; color: var(--text-tertiary); }

.sec-label { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 8px; color: var(--text-secondary); font-size: 13px; }

.add-chip { height: 34px; padding: 0 16px; border-radius: 999px; border: 0.6px solid var(--stroke-soft); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

.d-card { margin: 0 14px; border-radius: 20px; padding: 14px 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.1); }

.track-head { display: flex; align-items: center; justify-content: space-between; }

.track-head b { font-size: 16px; font-weight: 600; }

.s-pill { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; color: var(--state); background: color-mix(in srgb, var(--state) 18%, transparent); box-shadow: inset 0 0 0 0.6px color-mix(in srgb, var(--state) 55%, transparent); }

.track-body { display: flex; justify-content: space-between; margin-top: 10px; }

.track-body .big { font-size: 15px; line-height: 22px; }

.track-body .meta { font-size: 12px; color: var(--text-tertiary); }

.track-body .r { text-align: right; }

.kv { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6px 10px; font-size: 13px; }

.kv dt { color: var(--text-tertiary); }

.kv dd { margin: 0; }

.kv dd small { display: block; color: var(--text-tertiary); font-size: 12px; }

.family { display: flex; align-items: center; gap: 12px; margin: 16px 14px 0; }

.family .what { flex: 1; }

.family .what b { display: block; font-size: 14px; font-weight: 600; }

.family .what span { font-size: 12px; color: var(--text-tertiary); }

.prem-chip { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--wash-active); }

.yours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }

.yours div { height: 60px; border-radius: 14px; background: var(--wash-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }

.yours svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Calendar */
.cal-top { display: flex; align-items: center; gap: 14px; padding: 46px 14px 0; }

.cal-top h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.2px; margin: 0; }

.seg { display: flex; margin: 14px 14px 12px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.14); }

.seg button { flex: 1; height: 34px; border-radius: 999px; font-size: 13px; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; gap: 6px; }

.seg button.on { color: #fff; font-weight: 600; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }

.month-card { margin: 0 14px 12px; border-radius: 22px; background: rgba(28, 29, 29, 0.92); padding: 10px 10px 12px; }

.month-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; font-size: 15px; }

.month-head .nav-btn { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-secondary); }

.month-head .nav-btn .icon { width: 26px; height: 26px; }

.month-head .today-btn { font-size: 12px; color: var(--text-secondary); margin-left: auto; margin-right: 6px; }

.month-head .label { margin-left: 8px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; text-align: center; }

.cal-grid .dow { font-size: 11px; color: var(--text-quiet); padding-bottom: 2px; }

.cal-grid button { height: 36px; border-radius: 12px; font-size: 13px; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 14px; }

.cal-grid button.has { background: #3a3b41; color: #fff; font-weight: 700; }

.cal-grid button.today { color: #fff; font-weight: 700; }

.cal-grid button.picked { box-shadow: inset 0 0 0 2px #fff; }

.cal-grid button i { display: flex; gap: 2px; height: 5px; margin-top: 2px; }

.cal-grid button i b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.8; }

.cal-grid button i b.o { background: var(--expired); opacity: 1; }

.cal-grid button i b.s { background: var(--due-soon); opacity: 1; }

.day-card { margin: 0 14px 110px; border-radius: 22px; background: rgba(28, 29, 29, 0.92); padding: 12px; }

.day-card h5 { font-size: 15px; font-weight: 500; margin: 0 2px; }

.day-card .count { font-size: 13px; color: var(--upcoming); margin: 0 2px 10px; }

.entry { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; margin-top: 6px; background: color-mix(in srgb, var(--tile-rim) 22%, #232323); box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.1); width: 100%; }

.entry .date-badge { width: 38px; height: 38px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--tile-bg); box-shadow: inset 0 0 0 0.6px var(--tile-rim); color: var(--tile-ink); }

.entry .date-badge small { font-size: 10px; line-height: 12px; font-weight: 600; }

.entry .date-badge b { font-size: 15px; line-height: 17px; color: #fff; }

.entry .what { flex: 1; min-width: 0; }

.entry .name { font-size: 13px; font-weight: 600; }

.entry .line { font-size: 11px; color: var(--text-tertiary); }

.entry .st { font-size: 12px; font-weight: 600; color: var(--state); }

.show-month { display: block; width: 100%; text-align: center; padding: 12px 0 4px; font-size: 13px; color: var(--text-secondary); }

/* Add Item sheet */
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity var(--standard) var(--standard-curve); z-index: 24; }

.sheet-scrim.on { opacity: 1; pointer-events: auto; }

.sheet { position: absolute; left: 6px; right: 6px; bottom: 6px; border-radius: var(--r-xl); background: var(--sheet-fill); z-index: 25; transform: translateY(105%); transition: transform var(--emphasized) var(--spring-curve); overflow: hidden; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); }

.sheet.on { transform: none; }

.sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; background: radial-gradient(120% 100% at 50% 0%, var(--sheet-glow, transparent), transparent 70%); opacity: 0.55; pointer-events: none; transition: background var(--emphasized); }

.sheet > * { position: relative; }

.grabber { width: 32px; height: 4px; border-radius: 4px; background: var(--sheet-grabber); margin: 10px auto 0; }

.sheet-head { display: flex; align-items: center; padding: 22px 80px 0; }

.steps-bar { flex: 1; display: flex; gap: 5px; }

.steps-bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }

.steps-bar i.on { background: #fff; }

.sheet-body { padding: 20px 22px 18px; }

.sheet-body h4 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 16px; }

.say { display: block; width: 100%; min-height: 52px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.16); border: 0; color: #fff; font: inherit; font-size: 15px; line-height: 22px; padding: 14px 16px; resize: none; outline: none; }

.say:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }

.say::placeholder { color: var(--text-faint); }

.adding-label { font-size: 13px; color: var(--text-muted); margin: 18px 0 8px; }

.item-card { border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--tile-rim) 32%, #2a2e31), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 0.8px color-mix(in srgb, var(--tile-rim) 70%, transparent); overflow: hidden; transition: background var(--emphasized), box-shadow var(--emphasized); }

.item-card .top-part { display: flex; gap: 14px; align-items: center; padding: 14px; }

.item-card .tile { width: 44px; height: 44px; border-radius: 14px; }

.item-card .nm { font-size: 18px; line-height: 24px; font-weight: 600; }

.item-card .sub { font-size: 12px; color: var(--text-tertiary); }

.item-card .found { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 0.6px solid rgba(255, 255, 255, 0.1); font-size: 14px; }

.item-card .found .icon { width: 16px; height: 16px; color: var(--text-secondary); }

.item-card .found span { flex: 1; }

.item-card .found em { font-style: normal; color: var(--text-secondary); font-size: 13px; }

.item-card .found.missing em { color: var(--due-soon); }

.add-hint { font-size: 12px; line-height: 17px; color: var(--text-tertiary); margin: 10px 0 0; min-height: 34px; }

.sheet-foot { display: flex; gap: 8px; align-items: center; padding: 0 22px 22px; }

.sheet-foot .circle { width: 44px; height: 44px; }

.sheet-foot .circle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.continue { flex: 1; height: 46px; border-radius: 999px; background: var(--cta-fill) !important; color: var(--on-cta-fill) !important; font-size: 15px !important; font-weight: 600 !important; text-align: center !important; transition: opacity var(--quick), transform var(--quick) var(--spring-curve); }

.continue:disabled { opacity: 0.4; cursor: default; }

.continue:not(:disabled):active { transform: scale(0.97); }

.close-x { position: absolute; top: 18px; right: 16px; z-index: 2; }

.saved h4 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 6px; }

.saved { text-align: center; padding: 30px 22px 10px; }

.saved .page { position: relative; width: 120px; height: 140px; margin: 0 auto 18px; border-radius: 14px; background: #f3f3f3; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: 18px 14px; animation: drop 0.9s var(--spring-curve) both; }

.saved .page::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 14px 0 0 14px; background: var(--tile-rim); }

.saved .page i { display: block; height: 7px; border-radius: 4px; background: #c9c9c9; margin: 0 0 9px 6px; transform-origin: left; animation: write 0.4s var(--standard-curve) both; }

.saved .page i:nth-child(1) { width: 70%; background: #8d8d8d; animation-delay: 0.35s; }
.saved .page i:nth-child(2) { width: 85%; animation-delay: 0.5s; }
.saved .page i:nth-child(3) { width: 55%; animation-delay: 0.65s; }

.saved .page b { position: absolute; right: -10px; bottom: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--success); display: grid; place-items: center; animation: pop 0.45s var(--spring-curve) 0.85s both; }

.saved .page b svg { width: 16px; height: 16px; }

@keyframes drop { from { transform: translateY(-30px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes write { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

.saved p { color: var(--text-secondary); font-size: 14px; line-height: 20px; margin: 0 0 4px; }

.saved .when-line { color: var(--success); font-weight: 600; }

.dots { display: inline-flex; gap: 5px; }

.dots i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: rise 0.9s var(--standard-curve) infinite; }

.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes rise { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* A message inside the phone (SheetNotice / snackbar) */
.toast { position: absolute; left: 16px; right: 16px; bottom: 100px; padding: 12px 16px; border-radius: 16px; background: #2a2d30; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 0.6px rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 18px; display: flex; gap: 10px; align-items: center; z-index: 35; opacity: 0; transform: translateY(16px); transition: opacity var(--standard), transform var(--emphasized) var(--spring-curve); pointer-events: none; }

.toast.on { opacity: 1; transform: none; }

.toast .ok { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: var(--success); display: grid; place-items: center; }

.toast .ok svg { width: 11px; height: 11px; }

/* Settings sheet in the demo: Hide amounts */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--wash); box-shadow: inset 0 0 0 0.6px var(--stroke-soft); width: 100%; margin-top: 8px; }

.switch-row b { display: block; font-size: 14px; font-weight: 600; }

.switch-row span { font-size: 12px; color: var(--text-tertiary); }

.switch { width: 44px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); position: relative; flex: 0 0 auto; transition: background var(--standard); }

.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--standard) var(--spring-curve); }

.switch.on { background: #fff; }

.switch.on::after { background: var(--canvas); transform: translateX(18px); }

/* Widgets on a home screen */
.wallpaper { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 60% at 10% 20%, #2a3550 0%, transparent 60%), radial-gradient(80% 50% at 100% 90%, #1d2a44 0%, transparent 60%), linear-gradient(170deg, #4b5a78 0%, #151b2b 35%, #0a0d18 100%); }

.widgets { padding: 44px 14px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.widget { border-radius: 26px; background: rgba(18, 18, 20, 0.92); box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.12); padding: 14px; text-align: left; }

.widget.wide { grid-column: span 2; }

.widget .w-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; margin-bottom: 4px; }

.widget .w-head span { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }

.w-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 0.6px solid rgba(255, 255, 255, 0.06); }

.w-row:first-of-type { border-top: 0; }

.w-row .tile { width: 28px; height: 28px; border-radius: 9px; }

.w-row .tile .icon { width: 15px; height: 15px; }

.w-row .what { flex: 1; font-size: 13px; line-height: 17px; font-weight: 600; }

.w-row .what small { display: block; font-size: 11px; color: var(--text-tertiary); font-weight: 500; }

.w-row .when { text-align: right; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--state); }

.w-row .when small { display: block; color: var(--text-tertiary); font-weight: 500; font-size: 11px; }

.widget.single { min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, color-mix(in srgb, var(--atmos) 80%, #121214), rgba(18, 18, 20, 0.95)); }

.widget.single .tile { width: 32px; height: 32px; border-radius: 10px; }

.widget.single .tile .icon { width: 17px; height: 17px; }

.widget.single .nm { font-size: 15px; font-weight: 700; line-height: 20px; }

.widget.single .ln { font-size: 11px; color: var(--text-tertiary); }

.widget.single .st { font-size: 14px; font-weight: 700; color: var(--state); display: flex; align-items: center; gap: 6px; margin-top: 4px; }

.widget.single .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--state); }

.w-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 6px; }

.w-cal i { font-style: normal; font-size: 9px; height: 17px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); color: var(--text-tertiary); line-height: 10px; position: relative; }

.w-cal i.blank { background: none; }

.w-cal i.today { box-shadow: inset 0 0 0 1px #fff; color: #fff; font-weight: 700; }

.w-cal i.o { box-shadow: inset 0 0 0 1px var(--expired); color: #fff; }

.w-cal i.s::after, .w-cal i.c::after { content: ""; position: absolute; bottom: 1px; width: 3px; height: 3px; border-radius: 50%; background: var(--due-soon); }

.w-cal i.c::after { background: #fff; }

.widget.add { width: 76px; height: 76px; padding: 0; display: grid; place-items: center; }

.widget.add span { width: 44px; height: 44px; border-radius: 50%; background: #3d8a83; display: grid; place-items: center; }

.widget.add svg { width: 20px; height: 20px; }

.dock { position: absolute; left: 22px; right: 22px; bottom: 80px; display: flex; justify-content: space-between; }

.dock i { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }

.search-bar { position: absolute; left: 22px; right: 22px; bottom: 26px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }

.amt { transition: filter var(--standard); }

.hide-amounts .amt { filter: blur(5px); }