/* Addose app surfaces. Colours from Color+Addose.swift (and the category
   colours in SupplementCategory.color). Every class is ax-*.

   Sizes are in app points: a surface sets --u to one point at its own width
   (--u: 0.2545cqw = 1/393 of the root, an iPhone's width), so a surface
   scales with its root. Only descendants may use --u (the root is the
   container that cqw resolves against). */
:root {
  --a-surface: #141418;
  --a-elevated: #1C1C22;
  --a-track: #1E1E24;
  --a-dimmed: #2A2A32;
  --a-taken: #3A3A42;
  --a-secondary: #8E8E9A;
  --a-tertiary: #80808C;
  --a-muted: #B9B7C0;
  --a-border: rgba(255, 255, 255, 0.06);
  --a-teal: #7DD3C0;
  --a-peach: #E8A87C;
  --a-rose: #E57373;
  --a-freeze: #6BA3D6;
  --c-vitamin: #E3CC73;
  --c-mineral: #5EBADE;
  --c-amino: #8FA1F2;
  --c-adaptogen: #A8C97A;
  --c-performance: #E387C7;
  --c-other: #A1A3B0;
}

.ax {
  --ax-bg: #0A0A0C; --ax-ink: #F0EEF6; --ax-accent: #C8A2FF; --ax-hole: #141418;
  --u: 0.2545cqw;
  position: relative; width: 100%; container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.28; color: var(--ax-ink); text-align: left;
  -webkit-font-smoothing: antialiased; text-size-adjust: none; -webkit-text-size-adjust: none;
}
.ax *, .ax *::before, .ax *::after { box-sizing: border-box; }
.ax i, .ax s { display: block; text-decoration: none; font-style: normal; }
.ax b { font-weight: 600; }
.ax button { font-family: inherit; }
.ax svg { display: block; }
.ax img { display: block; }

/* aspect ratios: width / height of each root */
.ax-phone { aspect-ratio: 100 / 209.3; }
.ax-lockScreen { aspect-ratio: 393 / 575; }
.ax-notification { aspect-ratio: 393 / 640; }
.ax-siri { aspect-ratio: 393 / 560; }
.ax-liveActivity { aspect-ratio: 393 / 262; }
.ax-watch { aspect-ratio: 100 / 128.2; }
.ax-stock { aspect-ratio: 393 / 540; }
.ax-lockScreen, .ax-notification, .ax-siri, .ax-liveActivity { overflow: hidden; background: #0B0A10; }
/* radii in % of the root (a cqw on the root itself would resolve against the page) */
.ax-lockScreen { border-radius: 14% / 9.6%; }
.ax-notification { border-radius: 14% / 8.6%; }
.ax-siri { border-radius: 14% / 9.8%; }
.ax-liveActivity { border-radius: 8% / 12%; }
.ax-stock { border-radius: 4.1% / 3%; background: var(--ax-bg); border: 1px solid var(--a-border); }

/* text colours */
.ax-c-peach { color: var(--a-peach); }
.ax-c-rose { color: var(--a-rose); }
.ax-c-teal { color: var(--a-teal); }
.ax-c-accent { color: var(--ax-accent); }
.ax-c-secondary { color: var(--a-secondary); }
.ax-c-tertiary { color: var(--a-tertiary); }
.ax-c-muted { color: var(--a-muted); }
.ax-word__pro { background: linear-gradient(90deg, #C8A2FF, #7DD3C0); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* category icon */
.ax-cat-vitamin { color: var(--c-vitamin); }
.ax-cat-mineral { color: var(--c-mineral); }
.ax-cat-other { color: var(--c-other); }
.ax-cat-performance { color: var(--c-performance); }
.ax-cat-adaptogen { color: var(--c-adaptogen); }
.ax-cat-amino { color: var(--c-amino); }
.ax-ico { width: calc(var(--s) * var(--u)); aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--a-elevated); display: grid; place-items: center; position: relative; z-index: 1; }
.ax-ico svg { width: 56%; height: 56%; }
.ax-ico--soft svg { opacity: .8; }
.ax-ico--dim { opacity: .55; }
.ax-ico--dim svg { opacity: .4; }
.ax-sym { width: calc(28 * var(--u)); height: calc(28 * var(--u)); flex: none; display: grid; place-items: center; }
.ax-sym svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.ax-sym--teal, .ax-sym--teal svg { color: var(--a-teal); }
.ax-sym--tertiary { color: var(--a-tertiary); }
.ax-sym--secondary { color: var(--a-secondary); }
.ax-sym--peach { color: var(--a-peach); }
.ax-sym--rose { color: var(--a-rose); }
.ax-seg { display: block; width: 100%; }

/* ============================================================ phone === */
.ax-phone__frame {
  position: absolute; inset: 0; padding: 3.2cqw; border-radius: 15.2cqw;
  background: linear-gradient(145deg, #2A2833, #121117 40%, #1D1C24);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 2px 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ax-phone { --u: 0.23817cqw; }
.ax-phone__screen { position: relative; height: 100%; border-radius: 12.4cqw; background: var(--ax-bg); overflow: hidden; }
.ax-sb { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: calc(54 * var(--u)); pointer-events: none; }
.ax-sb__time { position: absolute; left: calc(24 * var(--u)); width: calc(64 * var(--u)); top: calc(18 * var(--u)); text-align: center; font-size: calc(17 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-sb__island { position: absolute; top: calc(11 * var(--u)); left: 50%; translate: -50% 0; width: calc(126 * var(--u)); height: calc(37 * var(--u)); border-radius: calc(20 * var(--u)); background: #000; }
.ax-sb__icons { position: absolute; right: calc(26 * var(--u)); top: calc(21 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); height: calc(13 * var(--u)); }
.ax-sb__icons svg { height: calc(12 * var(--u)); width: auto; }
.ax-homebar { position: absolute; z-index: 3; bottom: calc(8 * var(--u)); left: 50%; translate: -50% 0; width: calc(134 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(240, 238, 246, .55); }
.ax-scroll { position: absolute; inset: 0; padding: calc(67 * var(--u)) calc(16 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(24 * var(--u)); }

.ax-hd { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.ax-hd__row { display: flex; align-items: center; justify-content: space-between; }
.ax-word { font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); font-weight: 600; letter-spacing: calc(-0.5 * var(--u)); white-space: nowrap; }
.ax-btns { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ax-chip { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .12); font-size: calc(15 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-chip .ax-petals { width: calc(18 * var(--u)); height: calc(18 * var(--u)); opacity: .6; }
.ax-chip--lit .ax-petals { opacity: 1; }
.ax-chip b { color: var(--a-secondary); }
.ax-rbtn { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .12); color: var(--a-secondary); }
.ax-rbtn svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.ax-hd__sub { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); color: var(--a-tertiary); }
.ax-day { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-weight: 600; color: var(--ax-accent); }
.ax-day i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: currentColor; }

.ax-prog { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ax-prog__row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: var(--a-secondary); font-variant-numeric: tabular-nums; }
.ax-prog__count b { font-size: calc(17 * var(--u)); font-weight: 600; color: var(--ax-ink); }
.ax-prog__kept, .ax-prog__done { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); color: var(--a-teal); font-weight: 600; }
.ax-prog__done { font-size: calc(15 * var(--u)); }
.ax-prog__kept i svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.ax-prog__done i svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ax-prog__bar { height: calc(6 * var(--u)); }
.ax-prog--pro .ax-prog__bar { height: calc(8 * var(--u)); }

/* focus card (FocusCard) */
.ax-focus { position: relative; display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(20 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--a-surface); }
.ax-focus--now { background: linear-gradient(rgba(232, 168, 124, .06), rgba(232, 168, 124, .06)), var(--a-surface); box-shadow: inset 0 0 0 calc(.75 * var(--u)) rgba(232, 168, 124, .2); }
.ax-focus--snoozed { box-shadow: inset 0 0 0 calc(.75 * var(--u)) rgba(232, 168, 124, .2); }
.ax-focus--glow { animation: ax-breathe 4.8s ease-in-out infinite alternate; }
/* Up next more than 15 minutes ahead: a still lavender border (FocusCard, accent at .35). */
.ax-focus--still { box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(200, 162, 255, .35); }
@keyframes ax-breathe {
  from { box-shadow: 0 0 calc(12 * var(--u)) rgba(200, 162, 255, .17), inset 0 0 0 calc(1 * var(--u)) rgba(200, 162, 255, .32); }
  to { box-shadow: 0 0 calc(24 * var(--u)) rgba(200, 162, 255, .5), inset 0 0 0 calc(1 * var(--u)) rgba(200, 162, 255, .9); }
}
.ax-eyebrow { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); }
.ax-eyebrow__t { display: inline-flex; align-items: baseline; gap: calc(6 * var(--u)); font-weight: 600; }
.ax-eyebrow__sym { display: block; }
.ax-eyebrow__sym svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); translate: 0 calc(2 * var(--u)); }
.ax-eyebrow__r { color: var(--a-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.ax-fdoses { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.ax-fdose { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.ax-fdose__t { min-width: 0; }
.ax-fdose__name { font-size: calc(20 * var(--u)); font-weight: 600; line-height: 1.2; }
.ax-fdose__sub { font-size: calc(13 * var(--u)); line-height: 1.3; color: var(--a-secondary); }
/* 4 doses and more: compact 44 pt rows, a 32 pt icon, name and detail on one line while they fit. */
.ax-fdoses--compact { gap: 0; }
.ax-fdoses--compact .ax-fdose { min-height: calc(44 * var(--u)); }
.ax-fdoses--compact .ax-fdose__t { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: calc(8 * var(--u)); }
.ax-fdoses--compact .ax-fdose__name { font-size: calc(17 * var(--u)); font-weight: 500; }
.ax-take, .ax-early { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); width: 100%; border: 0; border-radius: calc(16 * var(--u)); font-family: inherit; }
.ax-take { height: calc(52 * var(--u)); background: var(--a-peach); color: #0A0A0C; font-size: calc(17 * var(--u)); font-weight: 600; }
.ax-take i svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ax-early { height: calc(44 * var(--u)); background: var(--a-elevated); color: var(--ax-ink); font-size: calc(15 * var(--u)); font-weight: 500; }
.ax-early i svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--a-secondary); }
.ax-secondary { display: flex; gap: calc(8 * var(--u)); }
.ax-secondary span { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--a-elevated); color: var(--a-muted); font-size: calc(15 * var(--u)); font-weight: 500; }
.ax-secondary i svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--a-secondary); }
.ax-holdhint { margin-top: calc(-6 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.3; color: var(--a-tertiary); }
.ax-fdone { font-size: calc(20 * var(--u)); font-weight: 600; line-height: 1.25; }
.ax-fdetail { margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); color: var(--a-secondary); font-variant-numeric: tabular-nums; }
.ax-fopen { font-size: calc(15 * var(--u)); line-height: 1.3; color: var(--a-secondary); }
.ax-hair { height: calc(.5 * var(--u)); background: var(--a-elevated); }
.ax-ftomorrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(2 * var(--u)) calc(12 * var(--u)); font-size: calc(13 * var(--u)); font-variant-numeric: tabular-nums; }
.ax-ftomorrow span:first-child { color: var(--a-tertiary); }
.ax-ftomorrow span:last-child { color: var(--a-muted); }

/* lists (TimelineGroupList, TimelineRow) */
.ax-group { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ax-group__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 calc(4 * var(--u)); }
.ax-group__head b { font-size: calc(15 * var(--u)); font-weight: 600; }
.ax-group__head span { font-size: calc(13 * var(--u)); color: var(--a-tertiary); font-variant-numeric: tabular-nums; }
.ax-group__box { overflow: hidden; border-radius: calc(16 * var(--u)); background: var(--a-surface); }
.ax-row { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(60 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); }
.ax-row + .ax-row::before { content: ""; position: absolute; top: 0; left: calc(64 * var(--u)); right: 0; height: calc(.5 * var(--u)); background: var(--a-elevated); }
.ax-row--nodiv::before { display: none; }
.ax-join { position: absolute; z-index: 0; left: calc(33 * var(--u)); width: calc(2 * var(--u)); top: 0; bottom: 0; background: rgba(200, 162, 255, .5); }
.ax-join--up:not(.ax-join--down) { bottom: 50%; }
.ax-join--down:not(.ax-join--up) { top: 50%; }
.ax-row__main { flex: 1; min-width: 0; }
.ax-row__name { font-size: calc(17 * var(--u)); font-weight: 500; line-height: 1.25; }
.ax-row__name--skipped { text-decoration: line-through; }
.ax-row--done .ax-row__name { color: var(--a-tertiary); }
.ax-row__line { font-size: calc(13 * var(--u)); line-height: 1.3; }
.ax-row__time { flex: none; font-size: calc(13 * var(--u)); color: var(--a-tertiary); font-variant-numeric: tabular-nums; }
.ax-row--tap { animation: ax-tap 700ms ease-out; }
@keyframes ax-tap { 0% { background: rgba(125, 211, 192, 0); } 30% { background: rgba(125, 211, 192, 0.14); } 100% { background: rgba(125, 211, 192, 0); } }

.ax-donewrap { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.ax-fold { display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--a-surface); font-size: calc(15 * var(--u)); color: var(--a-secondary); }
.ax-fold__ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }
.ax-fold__ic svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.ax-fold__chev { margin-left: auto; width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--a-tertiary); }
.ax-fold__chev--up { rotate: 180deg; }

.ax-toast { position: absolute; z-index: 4; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(42 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--a-surface); box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .3), inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .08); font-size: calc(15 * var(--u)); animation: ax-toast-in 220ms ease-out; }
.ax-toast button { min-height: calc(44 * var(--u)); padding: 0 0 0 calc(8 * var(--u)); background: none; border: 0; color: var(--ax-accent); font-size: calc(15 * var(--u)); font-weight: 600; cursor: pointer; }
@keyframes ax-toast-in { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } }
.ax [data-ax-took] { cursor: pointer; transition: transform 120ms ease-out, filter 120ms ease-out; }
.ax [data-ax-took]:hover { filter: brightness(1.06); }
.ax [data-ax-took]:active { transform: scale(0.97); }

/* ===================================================== lock screen === */
.ax-wall { position: absolute; inset: 0; }
.ax-wall--lock { background: radial-gradient(120% 55% at 70% 108%, rgba(232, 168, 124, .30), transparent 60%), radial-gradient(90% 45% at 10% 0%, rgba(200, 162, 255, .20), transparent 60%), #14121B; }
.ax-wall--siri { background: radial-gradient(110% 55% at 50% 118%, rgba(200, 162, 255, .28), transparent 62%), radial-gradient(70% 40% at 15% 0%, rgba(125, 211, 192, .08), transparent 60%), #0E0D13; }
.ax-wall--la { background: radial-gradient(120% 60% at 75% 115%, rgba(232, 168, 124, .22), transparent 60%), radial-gradient(90% 55% at 5% 0%, rgba(200, 162, 255, .16), transparent 60%), #13111A; }
.ax-lk__lock { position: absolute; top: calc(20 * var(--u)); left: 50%; translate: -50% 0; color: rgba(255, 255, 255, .85); }
.ax-lk__lock svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ax-lk__date { position: absolute; top: calc(62 * var(--u)); left: 0; right: 0; text-align: center; font-size: calc(20 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, .85); }
.ax-lk__time { position: absolute; top: calc(78 * var(--u)); left: 0; right: 0; text-align: center; font-size: calc(104 * var(--u)); line-height: 1.1; font-weight: 600; letter-spacing: calc(-3 * var(--u)); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92); }
.ax-lk__widgets { position: absolute; top: calc(214 * var(--u)); left: 0; right: 0; display: flex; justify-content: center; }
.ax-lkw { width: calc(200 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); border-radius: calc(20 * var(--u)); background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .1); color: #fff; }
.ax-lkw__t { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; line-height: 1.3; }
.ax-lkw__t i { flex: none; width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ax-lkw__t i svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ax-lkw__t span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-lkw__d { margin-top: calc(1 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.3; color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-lk__btn { position: absolute; bottom: calc(38 * var(--u)); width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgba(30, 30, 36, .6); color: #fff; }
.ax-lk__btn svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ax-lk__btn--l { left: calc(46 * var(--u)); }
.ax-lk__btn--r { right: calc(46 * var(--u)); }

/* ===================================================== notification === */
.ax-nt { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: calc(214 * var(--u)); font-size: calc(15 * var(--u)); }
.ax-nt__card { position: relative; z-index: 2; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(58, 56, 68, .82); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .08); }
.ax-nt__head { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: rgba(240, 238, 246, .66); }
.ax-nt__app { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(5 * var(--u)); }
.ax-nt__when { margin-left: auto; }
.ax-nt__title { margin-top: calc(8 * var(--u)); font-weight: 600; line-height: 1.25; }
.ax-nt__body { color: rgba(240, 238, 246, .9); line-height: 1.3; }
.ax-nt__acts { position: relative; z-index: 2; display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.ax-nt__acts span { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(50 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(58, 56, 68, .82); font-size: calc(17 * var(--u)); font-weight: 500; }
.ax-nt__acts i svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); color: rgba(240, 238, 246, .72); }

/* ==================================================== siri === */
.ax-sr__said { position: absolute; left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(74 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.25; font-weight: 500; color: rgba(255, 255, 255, .92); }
.ax-sr__card { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(160 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(48, 46, 58, .86); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .08); }
.ax-sr__head { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; color: rgba(240, 238, 246, .72); }
.ax-sr__app { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(5.5 * var(--u)); }
.ax-sr__answer { margin: calc(10 * var(--u)) 0 0; font-size: calc(17 * var(--u)); line-height: 1.32; }
.ax-sr__glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 calc(-3 * var(--u)) calc(22 * var(--u)) calc(2 * var(--u)) rgba(143, 124, 242, .6), inset 0 calc(-1 * var(--u)) calc(6 * var(--u)) rgba(242, 198, 255, .55), inset 0 0 calc(70 * var(--u)) rgba(47, 184, 200, .14); }

/* ======================================================= live activity === */
.ax-la__island { position: absolute; z-index: 2; top: calc(11 * var(--u)); left: 50%; translate: -50% 0; width: calc(216 * var(--u)); height: calc(37 * var(--u)); border-radius: calc(20 * var(--u)); background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(16 * var(--u)) 0 calc(14 * var(--u)); }
.ax-la__il { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); }
.ax-la__il svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.ax-la__il b { font-size: calc(11 * var(--u)); font-weight: 700; color: var(--ax-ink); font-variant-numeric: tabular-nums; }
.ax-la__ir { font-size: calc(15 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-la__card { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(72 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--ax-bg); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .1); }
.ax-la__hd { display: flex; justify-content: space-between; align-items: center; font-size: calc(12 * var(--u)); font-weight: 600; }
.ax-la__brand { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
.ax-la__brand .ax-petals { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ax-la__slot { color: var(--a-secondary); }
.ax-la__row { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.ax-la__t { flex: 1; min-width: 0; }
.ax-la__name { font-size: calc(20 * var(--u)); font-weight: 600; line-height: 1.2; }
.ax-la__dose { font-size: calc(13 * var(--u)); color: var(--a-secondary); }
.ax-la__cd { margin-left: auto; font-size: calc(28 * var(--u)); line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-la__set { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ax-la__si { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(2 * var(--u)) 0; }
.ax-la__si > i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: currentColor; flex: none; }
.ax-la__si .ax-la__dot { background: var(--a-tertiary); }
.ax-la__si b { font-size: calc(15 * var(--u)); line-height: 1.3; white-space: nowrap; }
.ax-la__si span { font-size: calc(12 * var(--u)); color: var(--a-secondary); white-space: nowrap; }
.ax-la__si--ja::before, .ax-la__si--jb::after { content: ""; position: absolute; left: calc(2.75 * var(--u)); width: calc(1.5 * var(--u)); background: rgba(200, 162, 255, .5); }
.ax-la__si--ja::before { top: 0; height: 50%; }
.ax-la__si--jb::after { bottom: 0; height: 50%; }
.ax-la__btns { display: flex; gap: calc(8 * var(--u)); }
.ax-la__btns span { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(19 * var(--u)); font-size: calc(15 * var(--u)); }
.ax-la__took { flex: 1; background: var(--a-peach); color: #0A0A0C; font-weight: 600; }
.ax-la__snz { width: calc(104 * var(--u)); background: var(--a-elevated); color: var(--a-muted); font-weight: 500; }
.ax-la__took i svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ax-la__snz i svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--a-secondary); }
.ax-la__prog { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.ax-la__bar { height: calc(5 * var(--u)); }
.ax-la__pr { display: flex; justify-content: space-between; font-size: calc(12 * var(--u)); color: var(--a-secondary); font-variant-numeric: tabular-nums; }

/* ========================================================= watch === */
.ax-watch { --u: 0.3462cqw; }
.ax-wb { position: absolute; left: 20cqw; right: 20cqw; height: 14cqw; background: linear-gradient(var(--dir, to bottom), #23212a, rgba(35, 33, 42, 0)); }
.ax-wb--t { top: 0; --dir: to top; border-radius: 6cqw 6cqw 0 0; }
.ax-wb--b { bottom: 0; border-radius: 0 0 6cqw 6cqw; }
.ax-wcase { position: absolute; left: 4cqw; top: 13.95cqw; width: 86.4cqw; height: 100.3cqw; padding: 7.2cqw; border-radius: 26cqw; background: linear-gradient(145deg, #34323c, #121117 48%, #26242d); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ax-wcrown { position: absolute; right: -2.6cqw; top: 22cqw; width: 3cqw; height: 11cqw; border-radius: 1.6cqw; background: linear-gradient(90deg, #2a2831, #4a4753); }
.ax-wside { position: absolute; right: -1.6cqw; top: 40cqw; width: 2cqw; height: 6cqw; border-radius: 1cqw; background: #2a2831; }
.ax-wscreen { position: relative; height: 100%; border-radius: 19.4cqw; background: #000; overflow: hidden; font-size: calc(15 * var(--u)); line-height: 1.25; }
.ax-w__bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(34 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)) 0 calc(18 * var(--u)); display: flex; justify-content: space-between; align-items: baseline; background: linear-gradient(#000 70%, rgba(0, 0, 0, 0)); }
.ax-w__title { font-size: calc(15 * var(--u)); font-weight: 600; color: var(--ax-accent); }
.ax-w__time { font-size: calc(15 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-w__scroll { position: absolute; inset: 0; padding: calc(34 * var(--u)) calc(10 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.ax-wp { padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.ax-wp__t { font-size: calc(13 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-wp__bar { height: calc(5 * var(--u)); }
.ax-ws { padding: calc(6 * var(--u)) calc(4 * var(--u)) 0; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--a-secondary); }
.ax-w__scroll > * { flex: none; }
.ax-wtake { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(44 * var(--u)); border: 0; border-radius: calc(22 * var(--u)); background: var(--a-peach); color: #0A0A0C; font-size: calc(17 * var(--u)); font-weight: 600; font-family: inherit; }
.ax-wtake i svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ax-wr { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--a-surface); }
.ax-wr__t { flex: 1; min-width: 0; }
.ax-wr__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14.5 * var(--u)); font-weight: 600; line-height: 1.2; }
.ax-wr__dose { font-size: calc(13 * var(--u)); color: var(--a-secondary); }
.ax-wr__r { flex: none; font-size: calc(12 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-wskip { display: flex; align-items: center; justify-content: center; height: calc(40 * var(--u)); border-radius: calc(20 * var(--u)); background: rgba(120, 120, 128, .28); font-size: calc(17 * var(--u)); }
.ax-wdone { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)); }
.ax-wdone > i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ax-wdone > i svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ax-wdone b { font-size: calc(17 * var(--u)); }
.ax-wdone span { font-size: calc(13 * var(--u)); color: var(--a-secondary); }

/* ======================================================== stock === */
.ax-sk { position: absolute; inset: 0; padding: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ax-sk__title { padding: 0 calc(4 * var(--u)); font-size: calc(15 * var(--u)); }
.ax-sk__box { border-radius: calc(16 * var(--u)); background: var(--a-surface); overflow: hidden; }
.ax-sk__hair { height: calc(.5 * var(--u)); margin-left: calc(64 * var(--u)); background: var(--a-elevated); }
.ax-sk__row { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(52 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); }
.ax-sk__lbl { flex: 1; font-size: calc(17 * var(--u)); font-weight: 500; }
.ax-sk__val { font-size: calc(15 * var(--u)); color: var(--a-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-tile { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(10 * var(--u)); display: grid; place-items: center; background: var(--a-elevated); }
.ax-tile svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.ax-tog { flex: none; width: calc(51 * var(--u)); height: calc(31 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--ax-accent); padding: calc(2 * var(--u)); }
.ax-tog i { width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: 50%; background: #fff; margin-left: auto; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .3); }
.ax-sk__level { padding: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.ax-sk__big { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.ax-sk__big b { font-size: calc(34 * var(--u)); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ax-sk__big span { font-size: calc(17 * var(--u)); color: var(--a-muted); }
.ax-sk__big em { margin-left: auto; font-style: normal; font-size: calc(15 * var(--u)); color: var(--a-tertiary); }
.ax-sk__lv { display: flex; gap: calc(4 * var(--u)); }
.ax-sk__lv i { flex: 1; height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--a-track); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .16); }
.ax-sk__lv i.ax-lv--on { background: var(--a-teal); box-shadow: none; }
.ax-sk__lv i.ax-lv--low { background: var(--a-peach); box-shadow: none; }
.ax-sk__line { font-size: calc(15 * var(--u)); line-height: 1.3; color: var(--a-secondary); }
.ax-step { display: flex; align-items: center; border-radius: calc(9 * var(--u)); background: var(--a-elevated); }
.ax-step i { width: calc(44 * var(--u)); height: calc(32 * var(--u)); display: grid; place-items: center; color: var(--ax-ink); }
.ax-step i svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.ax-step s { width: calc(.5 * var(--u)); height: calc(18 * var(--u)); background: var(--a-dimmed); }
.ax-sk__chev svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--a-tertiary); }
.ax-sk__add { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(52 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; color: var(--ax-accent); }
.ax-sk__add i svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ax-sk__foot { padding: 0 calc(4 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.3; color: var(--a-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .ax-focus--glow { animation: none; box-shadow: 0 0 calc(17 * var(--u)) rgba(200, 162, 255, .31), inset 0 0 0 calc(1 * var(--u)) rgba(200, 162, 255, .6); }
  .ax-row--tap, .ax-toast { animation: none; }
  .ax [data-ax-took] { transition: none; }
}