/* =========================================================
   1. COLOUR PALETTE (variables)
   Define colours once here, then reuse them everywhere with var(--name).
   The look: Spotify's deep black and rounded cards,
   with Apple Music's red-pink as the main colour.
   ========================================================= */
:root {
  --bg: #121212;            /* page background (Spotify black) */
  --card: #1c1c1e;          /* cards (Apple's dark grey) */
  --card-hover: #252528;    /* cards when you hover them */
  --inset: #141416;         /* things inside cards: inputs, list rows */
  --border: #2c2c30;        /* thin lines */
  --text: #f5f5f7;          /* main text (Apple off-white) */
  --muted: #a1a1a6;         /* secondary text (Apple grey) */

  --accent: #e63946;        /* main colour (TrackSave red) */
  --accent-hover: #ef4f5b;
  --accent-soft: #e6394622; /* the same red, see-through, for backgrounds */
  --gradient: linear-gradient(135deg, #e63946, #a4161a);   /* red to deep red */

  /* The logo: a red square with a white "S", so it stands out on the dark glass header.
     Want to try blue? Change these two lines to:  --logo: #0a84ff;  --logo-text: white; */
  --logo: var(--gradient);
  --logo-text: #ffffff;

  --save: #1ed760;          /* money saved (Spotify green) */
  --save-soft: #1ed76022;
  --warn: #ffb547;          /* due soon (orange) */
  --info: #4cc2ff;          /* trial / yearly (blue) */

  --radius: 16px;           /* how round card corners are */
  --pill: 999px;            /* fully round ends, for buttons and tags */
}

/* =========================================================
   2. BASE STYLES: the whole page
   ========================================================= */
* {
  box-sizing: border-box;   /* makes widths include padding (easier sizing) */
}

/* Anything with the "hidden" attribute stays hidden,
   even if another rule gives it a display value */
[hidden] {
  display: none !important;
}

/* Hidden on screen, but still read out by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body {
  margin: 0;
  /* Very dark, with a hint of purple. The coloured glow on top is the #ambient layer (below). */
  background: linear-gradient(180deg, #0f0d14, #09080c) fixed;
  background-color: var(--bg);
  color: var(--text);
  /* Figtree comes from Google Fonts (see index.html); the rest are backups */
  font-family: "Figtree", "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Jumping to a part of the page (e.g. "See how") scrolls there smoothly */
html {
  scroll-behavior: smooth;
}

/* ---------- The glow behind every page ----------
   Big soft blobs of colour that slowly drift. Their colour is --ambient:
   TrackSave red, or the app you're looking at on Deals (setAmbient in helpers.js).
   "@property" tells the browser --ambient is a colour, so it can fade smoothly
   from one colour to the next instead of jumping. */
@property --ambient {
  syntax: "<color>";
  inherits: true;
  initial-value: #e63946;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;                     /* behind everything */
  pointer-events: none;            /* clicks go straight through it */
  overflow: hidden;
  transition: --ambient 1.2s ease;
  background:
    radial-gradient(60% 45% at 12% -5%, color-mix(in srgb, var(--ambient) 24%, transparent), transparent 70%),
    radial-gradient(45% 40% at 95% 8%, color-mix(in srgb, var(--ambient) 14%, transparent), transparent 70%),
    radial-gradient(70% 50% at 50% 115%, #3a0ca322, transparent 70%);
}

.ambient::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(28% 28% at 30% 40%, color-mix(in srgb, var(--ambient) 11%, transparent), transparent 70%),
    radial-gradient(24% 24% at 75% 65%, #4361ee14, transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6%, 4%) scale(1.1); }
}

/* Switching tabs: a soft cross-fade (where the browser supports View Transitions) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

h1, h2, h3 {
  margin-top: 0;
}

h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* =========================================================
   3. THE FRAME: the sidebar (the page menu) and the slim top bar
   Big screens: the sidebar runs down the left side, 220px wide, or 68px
   when shrunk to icons (html.side-collapsed, set by nav.js). Tablets: always icons.
   Phones: the sidebar turns into a bar along the bottom (see "Phones" further down).
   The sizes live in variables, so the page beside the sidebar can make room for it.
   ========================================================= */
:root {
  --side-w: 220px;           /* the sidebar's width */
  --side-label: 1;           /* the words next to the icons: 1 = shown, 0 = faded out */
  --side-tip: none;          /* the little name that pops out when you hover an icon (only when shrunk) */
  --side-flip: 1;            /* the arrow on the shrink button: 1 = points left, -1 = points right */
  --topbar-h: 64px;          /* the top bar's height */
  --bottombar-h: 64px;       /* the phone menu bar's height (not counting the iPhone home bar) */
}

html.side-collapsed {
  --side-w: 68px;
  --side-label: 0;
  --side-tip: block;
  --side-flip: -1;
}

/* Tablets and small laptop windows: just the icons, always */
@media (max-width: 1099px) and (min-width: 701px) {
  :root,
  html.side-collapsed {
    --side-w: 68px;
    --side-label: 0;
    --side-tip: block;
  }

  .sidebar .sidebar-toggle {
    display: none;           /* nothing to open: there isn't room */
  }
}

/* The page moves over to make room for the sidebar
   (only index.html has one: privacy.html and the others don't) */
@media (min-width: 701px) {
  body.has-sidebar {
    padding-left: var(--side-w);
    transition: padding-left 0.25s var(--ease);
  }
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--side-w);
  padding: calc(12px + env(safe-area-inset-top)) 12px 14px;
  background: rgba(13, 12, 17, 0.88);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);   /* Safari */
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: width 0.25s var(--ease);
}

/* The logo at the top. When the bar is shrunk, the "S" sits in the middle of it. */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  margin-bottom: 18px;
  padding: 0 4px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-brand .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 1.15rem;
}

.sidebar-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  opacity: var(--side-label);
  transition: opacity 0.15s;
}

.sidebar-nav {
  flex: 1;                   /* fills the height, so Settings can sit at the bottom */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tab-settings {
  margin-top: auto;
}

/* One menu item: icon + name. The icon always sits in the same place,
   so shrinking the bar to 68px leaves just the icons, centred. */
.tab,
.sidebar-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 11px;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;   /* no grey flash when tapped on phones */
}

.tab:hover,
.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.tab:focus-visible,
.sidebar-toggle:focus-visible,
.sidebar-brand:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* The page you're on: dark red, a red bar on the left edge, and a red icon */
.tab.active {
  background: linear-gradient(90deg, rgba(230, 57, 70, 0.2), rgba(230, 57, 70, 0.07));
  color: var(--text);
}

.tab.active::before {
  content: "";
  position: absolute;
  left: -12px;               /* right at the sidebar's edge */
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.tab.active svg.tab-icon {
  color: var(--accent-hover);
}

.tab-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* TrackBot's red bot logo (instead of a line icon) */
.tab-logo {
  object-fit: contain;
}

/* The names: they fade out and get cut off when the bar shrinks
   (screen readers still read them, so every icon keeps its name) */
.tab-label {
  min-width: 0;
  overflow: hidden;
  opacity: var(--side-label);
  transition: opacity 0.15s;
}

/* Shrunk to icons: hover over an icon (or Tab to it) and its name pops out beside it */
.tab::after,
.sidebar-toggle::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: #26252b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  pointer-events: none;
}

.tab:hover::after,
.tab:focus-visible::after,
.sidebar-toggle:hover::after,
.sidebar-toggle:focus-visible::after {
  display: var(--side-tip);
}

/* The shrink button's arrow flips round when the bar is shrunk */
.sidebar-toggle .flip {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(var(--side-flip));
  transition: transform 0.25s var(--ease);
}

/* Icons drawn with SVG: lines with rounded ends, in the text colour */
svg.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* TrackBot's logo on the Ask TrackBot card on Home */
.cta-logo {
  width: 30px;
  height: 30px;
}

/* ---- The top bar: search on the left, your buttons on the right ----
   "sticky" keeps it at the top while you scroll. */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 28px 0;   /* room for the iPhone notch when opened from the home screen */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Dark see-through "glass": the page blurs behind it as you scroll */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 12, 18, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);   /* Safari */
}

/* The logo and name in the top bar: only on phones (bigger screens have them in the sidebar).
   Hidden the .sr-only way, so screen readers still find the page's heading. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (min-width: 701px) {
  .brand {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* The logo: a square with "S" in it (colours set at the top of this file) */
/* The TrackSave logo (icons/logo-128.png). The "S" in the HTML stays for screen readers
   and in case the picture can't load, but it's see-through. */
.logo-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: url("icons/logo-128.png") center / cover, var(--logo);
  color: transparent;
  font-weight: 800;
  font-size: 1.3rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

header select {
  width: auto;               /* the currency dropdown only needs to fit "AUD" */
  height: 38px;
  padding: 0 12px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  font-size: 0.88rem;
  font-weight: 600;
}

header select option {
  background: var(--card);  /* the drop-down list itself stays dark */
}

/* ---- Search (nav.js): your subscriptions, every app, the pages, or ask TrackBot ---- */
.top-search {
  position: relative;
  flex: 1;
  max-width: 360px;
  margin-left: auto;         /* the search and your buttons sit on the right */
}

.top-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.top-search input {
  height: 40px;
  padding: 0 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  font-size: 0.9rem;
}

.top-search input::placeholder {
  color: #8b8b92;
}

.top-search input:focus {
  outline: none;
  border-color: rgba(230, 57, 70, 0.65);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);   /* the focus ring */
}

/* The "/" hint: press / to jump to search. It hides while you type. */
.top-search-key {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--muted);
  font: 600 0.75rem "Figtree", system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
}

.top-search input:focus ~ .top-search-key,
.top-search input:not(:placeholder-shown) ~ .top-search-key {
  display: none;
}

/* The results: a dark card that drops down under the box */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(520px, calc(100vh - var(--topbar-h) - 40px));
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* "Your subscriptions", "Apps", "Pages": small grey headings */
.search-group {
  padding: 10px 10px 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.search-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

/* The one the arrow keys (or your mouse) are on */
.search-option[aria-selected="true"] {
  background: rgba(230, 57, 70, 0.14);
}

.search-option .app-icon,
.search-glyph {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 0.9rem;
}

/* The icon for pages and "Ask TrackBot" */
.search-glyph {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.search-glyph svg {
  width: 18px;
  height: 18px;
}

.search-glyph img {
  width: 22px;
  height: 22px;
}

.search-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.search-text strong,
.search-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-text strong {
  font-size: 0.9rem;
}

.search-text span {
  color: var(--muted);
  font-size: 0.78rem;
}

/* "Edit", "See plans", "Open", "Ask" on the right of each result */
.search-go {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---- The 🔔 bell and its alerts panel ---- */
#bell-wrap {
  position: relative;        /* the panel is positioned relative to this box */
}

#bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
}

#bell svg {
  width: 19px;
  height: 19px;
}

#bell:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
}

/* The number in the bell's corner: TrackSave red, with a dark ring so it stands off the bell */
#bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--pill);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px #121016;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* The panel drops down under the bell, on top of everything else */
#bell-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(400px, 92vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  z-index: 30;               /* higher number = drawn on top */
}

#bell-panel h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

#bell-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#bell-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

#bell-list li:last-child {
  border-bottom: none;
}

#bell-list li span {
  flex: 1;
}

#bell-list button {
  font-size: 0.8rem;
  padding: 6px 12px;
  white-space: nowrap;
}

#bell-list .empty {
  color: var(--muted);
}

/* =========================================================
   4. LAYOUT: one centred column of cards
   ========================================================= */
main {
  container: page / inline-size;   /* parts of a page can fit themselves to the room it has (@container page) */
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1380px;
  margin: 28px auto;          /* "auto" centres it on the page */
  padding: 0 32px;
}

/* Every section looks like a card made of see-through "glass",
   so the coloured glow behind the page shows through a little */
section {
  scroll-margin-top: 84px;    /* when we jump to a section, leave room for the sticky header */
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  padding: 24px;
}

/* A section's heading row: title on the left, a button on the right */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0;
}


.section-note {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Each page fades and slides in a little when you open it */
.page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: page-in 0.25s ease-out;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   5. HOME DASHBOARD
   ========================================================= */

/* Home is one column of rows, top to bottom, like a streaming app's home screen.
   Bigger gaps between the rows give it room to breathe. */
#page-home {
  gap: 34px;
}

/* ---- Four quick-fact tiles ---- */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Each tile: see-through "glass", so the glow behind the page shows through */
.quick-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  transition: transform 0.5s var(--ease), background 0.3s, border-color 0.3s;
}

.quick-stat:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

/* The round icon at the top of each tile: red and white, taking turns */
.quick-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: #ff8a93;
}

.quick-icon svg {
  width: 18px;
  height: 18px;
}

.quick-stat:nth-child(even) .quick-icon {
  background: #ffffff14;      /* every 2nd tile: soft white */
  color: var(--text);
}

.quick-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quick-value {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    /* "…" if it's too long to fit */
}

.quick-note {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- The welcome message: small and quiet, with a red edge ---- */
.intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(90deg, #e6394614, transparent 70%), var(--card);
  border-left: 3px solid var(--accent);
}

.intro-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-hover);
}

.intro p {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 640px;
}

.intro-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.intro-points span {
  padding: 3px 10px;
  border-radius: var(--pill);
  background: #ffffff0f;
  font-size: 0.8rem;
  font-weight: 600;
}

/* The ✕ in the corner */
.intro-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
}

.intro-close:hover {
  background: #ffffff14;
  color: var(--text);
}

/* A smaller button, e.g. in Settings */
button.small {
  margin-top: 12px;
  padding: 7px 14px;
  font-size: 0.85rem;
}

.hero-label {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
}

/* "ⓘ How is this worked out?": a small link-like button, and the explanation it opens */
.info-toggle {
  margin-left: 8px;
  padding: 0;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.info-toggle:hover {
  background: none;
  color: #fff;
}

.total-info {
  max-width: 460px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ---- The 14-day strip: one small tile per day ---- */
.day-strip {
  display: grid;
  grid-template-columns: repeat(14, minmax(44px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;           /* scroll sideways on small screens */
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border-radius: 12px;
  background: var(--inset);
  border: 1px solid var(--border);
}

.day .weekday {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.day .date {
  font-size: 1.1rem;
  font-weight: 800;
}

.day .dots {
  display: flex;
  gap: 3px;
  height: 7px;                /* keeps every tile the same height, dots or not */
}

.day .dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* A day with something on: red-tinted */
.day.busy {
  background: var(--accent-soft);
  border-color: #e6394666;
  cursor: help;               /* the tooltip says what's on */
}

/* Today: solid red */
.day.today {
  background: var(--accent);
  border-color: var(--accent);
}

.day.today .weekday {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- "Coming up": a row of cards you can swipe, each glowing in its app's colour ----
   (the row itself is a .shelf-track, like on Deals; two classes = this rule wins) */
.shelf-track.upcoming-list {
  grid-auto-columns: 210px;
}

.upcoming-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--brand) 50%, transparent), transparent 70%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.upcoming-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--brand) 85%, transparent);
}

.upcoming-card .app-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 0.95rem;
  margin-bottom: 10px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
}

.upcoming-card .when {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.upcoming-card.soon .when {
  color: var(--warn);         /* orange when it's 3 days away or less */
}

.upcoming-card .name {
  font-weight: 700;
  line-height: 1.25;
}

.upcoming-card .what {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Next 6 months: a simple bar chart ----
   One colour (it's one series: your spending), thin bars with rounded tops,
   and the amount shows on the biggest month, or when you hover/tap a month */
.forecast-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.forecast-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border-radius: 10px;
  outline: none;
  cursor: default;
}

.forecast-col:hover,
.forecast-col:focus-visible {
  background: #ffffff08;    /* a faint highlight behind the month you're on */
}

/* The amount above the bar: hidden, except on the biggest month or the one you hover/tap */
.forecast-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  visibility: hidden;
}

.forecast-col.peak .forecast-value,
.forecast-col:hover .forecast-value,
.forecast-col:focus .forecast-value {
  visibility: visible;
}

/* The tall box the bar grows up from, with a thin line at the bottom (the baseline) */
.forecast-track {
  display: flex;
  align-items: flex-end;    /* bars grow from the bottom */
  justify-content: center;
  width: 100%;
  height: 140px;
  border-bottom: 1px solid var(--border);
}

.forecast-bar {
  width: min(44px, 70%);
  background: linear-gradient(180deg, #ff6b6b, #e63946b3);   /* our red, lighter at the top */
  border-radius: 8px 8px 2px 2px;
  transform-origin: bottom;
  transition: height 0.4s ease, background 0.15s, transform 1s var(--ease);
  transition-delay: 0s, 0s, calc(var(--i, 0) * 80ms + 150ms);
}

/* Before you scroll to the chart, the bars are flat; then they grow up one after another */
#forecast.reveal:not(.shown) .forecast-bar {
  transform: scaleY(0);
}

.forecast-col.peak .forecast-bar,
.forecast-col:hover .forecast-bar,
.forecast-col:focus .forecast-bar {
  background: var(--accent);   /* full red on the biggest month and the one you hover */
}

.forecast-month {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* ---- "Ways to save": a row of cards, each tinted in its app's colour ---- */
.shelf-track.savings-list {
  grid-auto-columns: 300px;
}

.saving-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%),
    linear-gradient(160deg, #1ed76014, rgba(255, 255, 255, 0.03));
  border: 1px solid #1ed76033;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.saving-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -18px #1ed76055;
}

.saving-card .app-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin-bottom: 6px;
}

.saving-amount {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--save-soft);
  color: var(--save);
  font-weight: 800;
  font-size: 0.85rem;
}

/* Before → after: old price crossed out, new price big and green */
.saving-compare {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.saving-compare .old {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 600;
}

.saving-compare .arrow {
  color: var(--muted);
}

.saving-compare .new {
  color: var(--save);
  font-size: 1.35rem;
  font-weight: 800;
}

.saving-text {
  margin: 0;
  flex: 1;
  font-size: 0.88rem;
  color: var(--muted);
}

.saving-card button {
  align-self: flex-start;
  padding: 7px 14px;
  font-size: 0.85rem;
}

/* ---- The two cards at the end of Home (links to Deals and TrackBot) ----
   Compact: icon on the left, words in the middle, an arrow on the right */
.cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.cta-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cta-card:hover {
  transform: translateY(-2px);   /* lifts up a little */
}

.cta-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.2rem;
}

.cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cta-card strong {
  font-size: 1.02rem;
  font-weight: 800;
}

.cta-text span {
  font-size: 0.85rem;
}

.cta-go {
  font-size: 1.3rem;
  font-weight: 700;
  transition: transform 0.15s;
}

.cta-card:hover .cta-go {
  transform: translateX(4px);    /* the arrow nudges right on hover */
}

/* Red card: white text */
.cta-red {
  background: linear-gradient(135deg, #e63946, #8a0f14);
  color: white;
}

.cta-red:hover {
  box-shadow: 0 12px 30px #e6394640;
}

.cta-red .cta-icon {
  background: rgba(255, 255, 255, 0.18);
}

.cta-red .cta-text span {
  color: rgba(255, 255, 255, 0.85);
}

/* White card: black text, red arrow */
.cta-white {
  background: var(--text);
  color: #121212;
}

.cta-white:hover {
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.1);
}

.cta-white .cta-icon {
  background: var(--accent-soft);
}

.cta-white .cta-text span {
  color: #3a3a3c;
}

.cta-white .cta-go {
  color: var(--accent);
}

.see-all {
  display: inline-block;
  white-space: nowrap;
  color: var(--accent-hover);
  font-weight: 700;
  text-decoration: none;
}

.see-all:hover {
  text-decoration: underline;
}

.optional {
  color: var(--muted);
  font-weight: 400;
  opacity: 0.7;
}

/* =========================================================
   6. FORMS: inputs, dropdowns and buttons
   ========================================================= */
form {
  display: flex;
  flex-direction: column;     /* stack items top to bottom */
  gap: 8px;
}

label {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}

select,
textarea,
input {
  background: var(--inset);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  font: inherit;              /* use the same font as the page */
  color-scheme: dark;         /* makes the date picker dark too */
  width: 100%;                /* fill the form's width, never wider */
  transition: border-color 0.15s;
}

select:hover,
textarea:hover,
input:hover {
  border-color: #3a3a40;
}

select:focus,
textarea:focus,
input:focus {
  outline: 2px solid var(--accent);   /* red ring when you click in */
  outline-offset: 1px;
  border-color: transparent;
}

/* Buttons: red pills, like Apple Music and Spotify */
button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--pill);
  padding: 10px 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;            /* hand cursor = "you can click this" */
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}

button:hover {
  background: var(--accent-hover);
}

button:active {
  transform: scale(0.97);     /* tiny "press" effect when clicked */
}

button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* A quieter button, e.g. "Cancel" */
button.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

button.secondary:hover {
  background: var(--card-hover);
  border-color: #3a3a40;
}

/* A group of label + input that stacks like the rest of the form */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- "More options" (a <details> box) ---- */
.more-options {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.more-options summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.more-options[open] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.more-options[open] summary {
  margin-bottom: 2px;
}

/* A checkbox with its text next to it */
label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
}

label.check input {
  width: auto;                /* checkboxes shouldn't stretch like text boxes */
  accent-color: var(--accent);
  transform: scale(1.15);
}

/* =========================================================
   7. SUBSCRIPTION LIST
   ========================================================= */
/* ---- "My subscriptions" looks like a music playlist ----
   A red glow at the top, a big title, a round + button (like a Play button),
   and numbered rows like songs. */
.playlist {
  padding: 30px 28px 22px;
  background:
    linear-gradient(180deg, #e6394629, transparent 260px),
    rgba(255, 255, 255, 0.03);
}

.playlist-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.playlist-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.playlist-head h2 {
  margin: 2px 0 6px;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.playlist-head .section-note {
  margin: 0;
}

/* The big round + button */
.add-round {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  padding: 0 0 3px;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 14px 30px -10px #e63946cc;
  transition: transform 0.35s var(--ease), background 0.2s;
}

.add-round:hover {
  transform: scale(1.08);
}

#sub-list {
  list-style: none;           /* remove the bullet points */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: row;         /* a counter for the row numbers (1, 2, 3...) */
}

/* ---- Quick add picks in the "+ Add" pop-up ---- */
.quick-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.chip.pick {
  padding: 5px 12px 5px 5px;
  font-size: 0.82rem;
}

.chip.pick .app-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 0.7rem;
  box-shadow: none;
}

.chip.pick:hover {
  border-color: var(--accent);
}

/* "Tracking it here doesn't sign you up…" */
.sheet-redeem,
.add-redeem {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  line-height: 1.45;
}

.sheet-redeem:empty,
.add-redeem[hidden] {
  display: none;
}

/* "+ Not in the list? Add your own" */
.add-own {
  align-self: flex-start;
  margin: 2px 0 6px;
  padding: 7px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--text);
  font-size: 0.86rem;
}

.add-own:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.add-own[hidden],
#pick-fields[hidden],
.own-fields[hidden],
#edit-plan-row[hidden] {
  display: none;
}

.chip.pick.own {
  padding-left: 12px;
  border-style: dashed;
}

.own-back {
  margin-top: 6px;
  font-size: 0.84rem;
}

/* ---- Filter chips above the list ---- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
}

.chip:hover {
  background: var(--card-hover);
}

.chip .count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: #ffffff14;
  font-size: 0.78rem;
  text-align: center;
}

/* The chosen filter: white, like Spotify's selected chips */
.chip.active {
  background: var(--text);
  color: #121212;
  border-color: var(--text);
}

.chip.active .count {
  background: var(--accent);
  color: white;
}

/* One row, like a song in a playlist: no box until you hover it */
#sub-list li {
  position: relative;         /* so the renewal bar can sit along the bottom edge */
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  counter-increment: row;
  transition: background 0.25s;
}

#sub-list li:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* The row number in front, made by the counter (no extra HTML needed) */
#sub-list li::before {
  content: counter(row);
  flex-shrink: 0;
  width: 20px;
  text-align: right;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#sub-list li.empty::before {
  content: none;
}

#sub-list li .app-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

#sub-list li > div {
  flex: 1;                    /* name + details take the free space, pushing price and buttons right */
  min-width: 0;
}

/* The coloured circle with the app's first letter */
/* A glossy tile in the app's own colour (--brand, set by appIcon in helpers.js):
   lighter at the top left, deeper at the bottom, a soft shine, and a glow underneath */
.app-icon {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 25% 0%, color-mix(in srgb, var(--brand, var(--accent)), white 26%), transparent 58%),
    linear-gradient(160deg, var(--brand, var(--accent)), color-mix(in srgb, var(--brand, var(--accent)) 62%, #050507));
  color: white;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -8px 14px -6px rgba(0, 0, 0, 0.35),
    0 8px 18px -10px color-mix(in srgb, var(--brand, var(--accent)) 75%, transparent);
}

/* The shine: a soft white sweep across the top left */
.app-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%);
  pointer-events: none;
}

/* The white logo inside the coloured square */
.app-icon .app-logo {
  width: 56%;
  height: 56%;
}

/* Letters instead of a logo (e.g. "D+"). Every box a logo sits in is a "container",
   so "cqmin" can size the letters to the box: 46cqmin = 46% of the box's shorter side. */
.app-icon,
.poster-art,
.sheet-logo,
.cover {
  container-type: size;
}

.logo-letters {
  display: grid;
  place-items: center;
  width: auto !important;          /* letters take their own width, not the logo's */
  height: auto !important;
  color: #fff;
  font-size: 46cqmin;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.sub-name {
  font-weight: 700;
}

.sub-details {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}

.sub-price {
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Status tags: small coloured pills ---- */
.tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: #ffffff14;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tag-student { background: var(--save-soft); color: var(--save); }
.tag-info    { background: #4cc2ff22; color: var(--info); }
.tag-warn    { background: #ffb54722; color: var(--warn); }
.tag-ending  { background: var(--accent-soft); color: var(--accent-hover); }

/* The ✎ and ✕ buttons: subtle until you hover them */
#sub-list .edit,
#sub-list .delete {
  background: transparent;
  color: var(--muted);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
}

#sub-list .edit:hover {
  background: #ffffff14;
  color: var(--text);
}

#sub-list .delete:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

/* On computers (with a mouse), ✎ and ✕ only appear when you point at the row, like in Spotify.
   Phones have no hover, so there they always show. */
@media (hover: hover) {
  #sub-list .edit,
  #sub-list .delete {
    opacity: 0;
    transition: opacity 0.2s, background 0.15s;
  }

  #sub-list li:hover .edit,
  #sub-list li:hover .delete,
  #sub-list li:focus-within .edit,
  #sub-list li:focus-within .delete {
    opacity: 1;
  }
}

/* "No subscriptions yet": a friendly message in the middle */
#sub-list .empty {
  flex-direction: column;
  gap: 4px;
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.14);
}

#sub-list .empty:hover {
  background: transparent;
}

.empty-icon {
  font-size: 2rem;
}

#sub-list .empty strong {
  color: var(--text);
  font-size: 1.05rem;
}

/* Savings tip under a subscription, in green */
.sub-tip {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--save);
}

.sub-tip.info {
  color: var(--muted);        /* general info, not a saving */
}

.sub-tip:empty {
  display: none;              /* hide it when there's no tip */
}

/* The renewal bar under a row, like a song's progress bar: fills up as the next payment gets closer.
   It starts under the name (after the number and logo). */
.cycle {
  position: absolute;
  left: 112px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: var(--pill);
  overflow: hidden;
  background: #ffffff12;
}

.cycle span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e6394666, var(--accent));
  border-radius: 0 3px 3px 0;
}

#sub-list li.soon .cycle span {
  background: linear-gradient(90deg, #ffb54766, var(--warn));   /* orange when it's due very soon */
}

/* Due very soon: orange edge */
#sub-list li.soon {
  box-shadow: inset 3px 0 0 var(--warn);
}

/* On a trial: blue edge */
#sub-list li.trial {
  box-shadow: inset 3px 0 0 var(--info);
}

/* Being cancelled: faded, price crossed out */
#sub-list li.ending {
  opacity: 0.6;
}

#sub-list li.ending .sub-price {
  text-decoration: line-through;
}

/* =========================================================
   8. DEALS PAGE (the banner, tabs and deal cards are near the end of this file;
   the app pop-up is in section 9)
   ========================================================= */

/* The banner at the top of TrackBot / Settings: dark, with a red glow */
.page-banner {
  background:
    radial-gradient(circle at 100% 0%, #e6394640, transparent 55%),
    var(--card);
  border-color: #e6394633;
}

.page-banner .banner-title {
  margin: 4px 0 4px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-banner .banner-title::before {
  display: none;               /* no red bar on the big banner title */
}

/* Our "smooth" curve: starts fast, settles gently (used for most movement) */
:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* See-through "glass" button */
button.glass {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 12px 22px;
}

button.glass:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* ---------- Search ---------- */
.browse-search input {
  max-width: 520px;
  padding: 14px 20px 14px 48px;
  border-radius: var(--pill);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  /* a small magnifying glass drawn with SVG, on the left */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 18px;
}

/* ---------- Shelves: rows of posters ---------- */
.shelves {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.shelf {
  background: none;
  border: none;
  padding: 0;
}

.shelf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.shelf-head h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.shelf-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.shelf-note:empty {
  display: none;
}

.shelf-arrows {
  display: flex;
  gap: 8px;
}

.shelf-arrow {
  width: 38px;
  height: 38px;
  padding: 0 0 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.5rem;
  line-height: 1;
}

.shelf-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}

.shelf-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* The row itself: posters side by side, scroll (or swipe) sideways, snapping to each poster.
   The extra padding leaves room for the hover lift and glow, so they aren't cut off. */
.shelf-track {
  display: grid;
  grid-auto-flow: column;          /* new items go to the right, not underneath */
  grid-auto-columns: 176px;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 6px;           /* snap posters to the edge of the content, not the padding */
  padding: 14px 6px 22px;
  margin: 0 -6px;
  scrollbar-width: none;
  /* fade out the right edge, a hint that there's more to scroll */
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.shelf-track::-webkit-scrollbar {
  display: none;
}

.shelf-track > * {
  scroll-snap-align: start;
}

/* ---------- A poster (one app) ---------- */
.poster {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--text);
  text-align: left;
  font-weight: 400;
}

.poster:hover {
  background: none;
}

.poster:active {
  transform: none;
}

.poster:focus-visible {
  outline: none;
}

.poster:focus-visible .poster-art {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The square "cover" in the app's colour, with its logo in the middle */
.poster-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--brand), white 22%), transparent 60%),
    linear-gradient(160deg, var(--brand), color-mix(in srgb, var(--brand) 40%, #050507));
  box-shadow:
    0 12px 30px -14px color-mix(in srgb, var(--brand) 70%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.poster-art img {
  width: 42%;
  height: 42%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3));
  transition: transform 0.5s var(--ease);
}

/* Hover: the cover lifts, glows in the app's colour, and the logo grows a little */
.poster:hover .poster-art,
.poster:focus-visible .poster-art {
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 24px 44px -14px color-mix(in srgb, var(--brand) 90%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.poster:hover .poster-art img {
  transform: scale(1.1);
}

/* A shiny streak that sweeps across the cover on hover */
.poster-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.9s ease;
}

.poster:hover .poster-shine {
  transform: translateX(120%);
}

.poster-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.poster-check {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--save);
  color: #04210f;
  font-size: 0.8rem;
  font-weight: 900;
}

.poster-name {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;          /* a long name ends with "..." */
}

.poster-note {
  font-size: 0.84rem;
  color: var(--muted);
}

/* Search results: posters in a grid instead of a row */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px 18px;
  margin-top: 14px;
}

/* ---------- Scroll-in animation (reveal() in helpers.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease);
}

.reveal.shown {
  opacity: 1;
  transform: none;
}

/* Posters in a shelf glide in from the right, one after another (--i = their position) */
.reveal .poster {
  opacity: 0;
}

.reveal.shown .poster {
  animation: poster-in 0.7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}

@keyframes poster-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   9. POP-UPS (<dialog>): Add, Edit and Compare
   ========================================================= */
dialog {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0;
  width: min(480px, 92vw);    /* 480px, or 92% of the screen if that's smaller */
  max-height: 90vh;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);   /* darken the page behind the pop-up */
  backdrop-filter: blur(4px);
}

.dialog-body {
  padding: 26px;
}

/* ---------- The app pop-up ("sheet"): opened from a poster on Deals ---------- */
dialog.sheet {
  width: min(780px, 94vw);
  max-height: 88vh;
  overflow-y: auto;                /* the whole pop-up scrolls, banner included */
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  background: #121116;
  scrollbar-width: thin;
}

dialog.sheet::backdrop {
  background: rgba(5, 5, 8, 0.6);
  backdrop-filter: blur(12px);
}

/* Opening: rises and grows into place. Closing (class "closing", added by deals.js): the reverse. */
dialog.sheet[open] {
  animation: sheet-in 0.55s var(--ease);
}

dialog.sheet[open]::backdrop {
  animation: fade-in 0.4s ease;
}

dialog.sheet.closing {
  animation: sheet-out 0.28s ease-in forwards;
}

dialog.sheet.closing::backdrop {
  animation: fade-out 0.28s ease-in forwards;
}

/* Tapping "More like this" swaps the app: the new one fades up into place */
dialog.sheet.swap .sheet-hero > *,
dialog.sheet.swap .sheet-body {
  animation: rise 0.5s var(--ease) both;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(48px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

@keyframes sheet-out {
  to { opacity: 0; transform: translateY(36px) scale(0.97); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

/* The banner at the top, in the app's colour */
.sheet-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  min-height: 250px;
  padding: 40px 34px 28px;
  background:
    radial-gradient(80% 120% at 90% 0%, color-mix(in srgb, var(--brand) 90%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 55%, #121116), #121116);
}

.sheet-logo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 28px;
  background: var(--brand);
  box-shadow:
    0 20px 40px -12px color-mix(in srgb, var(--brand) 70%, black),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  font-size: 2.6rem;
  font-weight: 800;
}

.sheet-logo img {
  width: 54%;
  height: 54%;
}

.sheet-category {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.sheet-heading h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.sheet-summary {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  font-size: 1rem;
}

.sheet-close:hover {
  background: rgba(0, 0, 0, 0.65);
}

.sheet-body {
  padding: 4px 34px 30px;
}

.sheet-body h3 {
  margin: 26px 0 12px;
  font-size: 1.1rem;
  font-weight: 800;
}

.sheet-tip {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  font-size: 0.92rem;
}

.sheet-tip:empty {
  display: none;
}

/* The plan tiles: tap one to pick it */
.plan-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.plan-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  text-align: left;
  font-weight: 400;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.3s var(--ease);
}

.plan-tile:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
}

/* The picked tile: outlined and tinted in the app's colour (mixed with white, so dark brands still show) */
.plan-tile[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--brand) 65%, white);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}

.tile-name {
  font-weight: 700;
}

.tile-price {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tile-yearly {
  font-size: 0.82rem;
  color: var(--muted);
}

.tile-yearly:empty {
  display: none;
}

.tile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tile-badges:empty {
  display: none;
}

.tile-badge {
  padding: 2px 9px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.tile-badge.student,
.tile-badge.cheap {
  background: var(--save-soft);
  color: var(--save);
}

.tile-badge.yours {
  background: var(--accent-soft);
  color: #ff8a93;
}

/* The Add button sticks to the bottom while you scroll the pop-up */
.sheet-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: 18px 0 6px;
  background: linear-gradient(transparent, #121116 40%);
}

.sheet-actions button {
  background: #fff;
  color: #111;
  padding: 13px 26px;
  font-size: 1rem;
}

.sheet-actions button:hover {
  background: #e8e8ed;
}

/* "More like this": smaller posters */
.shelf-track.mini {
  grid-auto-columns: 130px;
  gap: 14px;
}

.shelf-track.mini .poster-name {
  font-size: 0.9rem;
}

.shelf-track.mini .poster-note {
  font-size: 0.78rem;
}

.dialog-body h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.dialog-buttons button {
  margin-top: 0;
}

/* =========================================================
   10. TRACKBOT: looks like a chat app
   ========================================================= */
.chat {
  padding: 0;                 /* the parts inside have their own padding */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The top of the chat: avatar, name, "Online" */
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, #e639461f, transparent 70%);
}

.chat-head strong {
  display: block;
  font-size: 1.05rem;
}

/* A little green dot before "Online" */
.online {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}

.online::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--save);
}

/* "✨ AI answers on · 20 questions left today" */
.ai-status {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--accent-hover);
  font-weight: 600;
}

.ai-status:empty {
  display: none;
}

/* TrackBot's round avatar */
/* TrackBot's logo next to its messages (icons/trackbot-64.png) */
.bot-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(230, 57, 70, 0.35));
}

.bot-avatar.big {
  width: 46px;
  height: 46px;
}

/* The messages: they scroll inside a fixed-height area, like a real chat */
#bot-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: min(460px, 55vh);
  overflow-y: auto;           /* scrollbar only when needed */
  padding: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* One message row: [avatar] [bubble] for TrackBot, [bubble] on the right for you */
.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.msg.you {
  justify-content: flex-end;
}

.bubble {
  max-width: 78%;
  padding: 10px 14px;
  white-space: pre-line;      /* respect line breaks (\n) in the text */
  animation: pop-in 0.2s ease-out;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* TrackBot's messages: dark grey, with a "tail" corner */
.bubble.bot {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 18px 18px 18px 4px;
}

/* A change TrackBot suggests: a card with Approve / No thanks */
.bubble.suggestion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-color: #e6394666;
  background: linear-gradient(160deg, #e639461f, var(--inset) 70%);
}

.suggestion-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff8a93;
}

.suggestion-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.suggestion-buttons button {
  padding: 8px 16px;
  font-size: 0.9rem;
}

.suggestion-done {
  font-weight: 700;
  color: var(--muted);
}

/* Links in TrackBot's answers: underlined, and long ones wrap instead of overflowing */
.bubble.bot a {
  color: #ff8a93;
  font-weight: 600;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Your messages: red, on the right */
.bubble.you {
  background: var(--gradient);
  color: white;
  border-radius: 18px 18px 4px 18px;
}

/* Suggestion buttons: one row you can scroll sideways */
#bot-options {
  display: flex;
  gap: 8px;
  padding: 0 18px 12px;
  overflow-x: auto;
  scrollbar-width: none;      /* hide the scrollbar; you can still swipe */
}

#bot-options:empty {
  display: none;
}

#bot-options button {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 14px;
  white-space: nowrap;
}

#bot-options button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* "Typing..." bubble: three dots that bounce one after another */
.bubble.typing span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  border-radius: 50%;
  background: var(--muted);
  animation: bounce 1s infinite;
}

.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }

/* @keyframes describes an animation: where things are at each moment */
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-5px); }
}

/* The message bar at the bottom */
#bot-form {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--inset);
}

#bot-form input {
  flex: 1;
  border-radius: var(--pill);
  background: var(--card);
  padding-left: 18px;
}

/* The round red send button */
#bot-form button {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
}

/* =========================================================
   11. SETTINGS: a grid of setting cards
   ========================================================= */
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.setting-card.wide {
  grid-column: 1 / -1;        /* stretch across both columns */
}

/* The "Email me reminders" box inside the Account card */
.email-reminders {
  border-top: 1px solid var(--border);
  margin: 14px 0;
  padding-top: 14px;
}

/* Icon on the left, title + description on the right */
.setting-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.setting-head h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.setting-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 1.2rem;
}

/* ---- Account ---- */
.login-form {
  max-width: 420px;
}

/* "Delete my account": quiet grey until you point at it, then red */
button.link-button.danger {
  margin: 16px 0 0;
  color: var(--muted);
}

button.link-button.danger:hover {
  color: var(--accent-hover);
}

/* ---- The welcome pop-up for new visitors (onboarding.js) ---- */
dialog.welcome {
  color-scheme: dark;         /* dark scrollbar */
  width: min(560px, 94vw);
  overflow-y: auto;
  border-radius: 26px;
  background:
    radial-gradient(90% 60% at 100% 0%, #e639462e, transparent 70%),
    #121116;
}

dialog.welcome[open] {
  animation: sheet-in 0.55s var(--ease);
}

dialog.welcome::backdrop {
  background: rgba(5, 5, 8, 0.7);
  backdrop-filter: blur(12px);
}

.welcome-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.welcome-top .link-button {
  margin: 0;
  color: var(--muted);
}

/* Progress dots: filled up to the step you're on */
.welcome-dots {
  display: flex;
  gap: 6px;
}

.welcome-dots span {
  width: 22px;
  height: 5px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.3s;
}

.welcome-dots span.on {
  background: var(--accent);
}

/* Each step is a plain area (not a glass card like other sections), and slides in when it appears */
.welcome-step {
  background: none;
  border: none;
  padding: 0;
}

.welcome-step:not([hidden]) {
  animation: rise 0.45s var(--ease);
}

.welcome-step h2 {
  margin: 0 0 6px;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.welcome-step h3 {
  margin: 22px 0 10px;
  font-size: 1rem;
}

.welcome-step select {
  margin-top: 16px;
}

.welcome-logo {
  margin-bottom: 14px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 1.6rem;
}

/* Step 1: two big choices */
.welcome-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.welcome-choices .choice {
  padding: 18px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.05rem;
  transition: background 0.2s, transform 0.3s var(--ease);
}

.welcome-choices .choice:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* "Skip, just let me look around": small and quiet, under the choices */
.welcome-guest {
  margin: 16px auto 0;
  color: var(--muted);
}

/* Step 2: the two choices stacked, with a small note under each */
.welcome-choices.stacked {
  grid-template-columns: 1fr;
  margin-top: 18px;
}

.welcome-choices .choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.welcome-choices .choice .hint {
  font-weight: 500;
  font-size: 0.8rem;
}

.welcome-choices .primary-choice {
  background: var(--gradient);
  border-color: transparent;
}

.welcome-choices .primary-choice .hint {
  color: rgba(255, 255, 255, 0.8);
}

/* ---- "Want your own numbers?" banner on Home, for guests ---- */
.setup-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background:
    radial-gradient(80% 140% at 0% 0%, #e639462e, transparent 70%),
    rgba(255, 255, 255, 0.04);
  border-color: #e6394655;
}

.setup-banner-icon {
  font-size: 1.4rem;
}

.setup-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setup-banner button:not(.intro-close) {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .setup-banner {
    flex-wrap: wrap;
  }

  .setup-banner-text {
    flex-basis: calc(100% - 80px);
  }

  .setup-banner button:not(.intro-close) {
    width: 100%;
    order: 3;
  }
}

/* Step 4: a grid of app tiles; tapped ones light up in their brand colour */
.welcome-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.welcome-app {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ease);
}

.welcome-app:hover {
  background: rgba(255, 255, 255, 0.08);
}

.welcome-app[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--brand) 65%, white);
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  transform: scale(1.03);
}

.welcome-app .app-icon {
  width: 46px;
  height: 46px;
}

.welcome-name {
  line-height: 1.2;
  text-align: center;
}

.welcome-check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--save);
  color: #04210f;
  font-size: 0.7rem;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.25s var(--ease);
}

.welcome-app[aria-pressed="true"] .welcome-check {
  opacity: 1;
  transform: none;
}

/* Step 4: one row per app, with plan + date */
.welcome-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.welcome-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.welcome-row .welcome-own-name {
  grid-column: 1 / -1;
}

.welcome-details + .add-own {
  margin-top: 10px;
}

.welcome-storage,
.add-storage {
  margin: 10px 0 0;
  font-size: 0.8rem;
}

.welcome-row-name {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-row-name .app-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.welcome-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.welcome-row select,
.welcome-row input {
  padding: 8px 10px;
  font-size: 0.88rem;
}

@media (max-width: 700px) {
  dialog.welcome {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 26px 26px 0 0;
  }

  dialog.welcome[open] {
    animation: sheet-up 0.5s var(--ease);
  }

  .welcome-apps {
    grid-template-columns: repeat(3, 1fr);
  }

  .welcome-row {
    grid-template-columns: 1fr;
  }
}

/* "Send feedback" in the footer: a button that looks like the links next to it */
button.footer-link {
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

button.footer-link:hover {
  background: none;
  color: var(--text);
}

/* The feedback pop-up: Idea / Bug / Other chips (radio buttons in disguise) */
.feedback-kinds {
  margin: 14px 0 6px;
}

.feedback-kinds .chip {
  position: relative;         /* keeps the hidden radio button inside the chip */
  cursor: pointer;
  padding: 6px 14px;
}

.feedback-kinds input {
  position: absolute;
  opacity: 0;                 /* the real radio is invisible, the chip shows the choice */
  pointer-events: none;
}

.feedback-kinds .chip:has(input:checked) {
  background: var(--text);
  color: #121212;
  border-color: var(--text);
}

.feedback-kinds .chip:has(input:focus-visible) {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

#feedback-message {
  resize: vertical;
}

/* Links in the footer and the privacy note */
footer a,
.privacy a {
  color: inherit;
  text-underline-offset: 3px;
}

/* ---- The privacy page (privacy.html) ---- */
.legal {
  display: block;             /* normal text flow, not the app's gap-separated column */
  max-width: 760px;
}

.legal h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -0.035em;
  margin: 8px 0 4px;
}

.legal h2 {
  margin: 30px 0 8px;
}

.legal p,
.legal li {
  color: #d6d6db;
  line-height: 1.65;
}

.legal a {
  color: #ff8a93;
  text-underline-offset: 3px;
}

/* "Remind me": 3 / 2 / 1 days before / on the day, as tickable chips */
.reminder-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0;
  border: none;
}

.reminder-days legend {
  width: 100%;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}

.reminder-days .chip {
  position: relative;
  cursor: pointer;
  padding: 6px 14px;
}

.reminder-days input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reminder-days .chip:has(input:checked) {
  background: var(--text);
  color: #121212;
  border-color: var(--text);
}

.reminder-days .chip:has(input:focus-visible) {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* "Your uni": the perks list under the dropdown */
.uni-note {
  margin-top: 10px;
}

.uni-perks {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.uni-perks li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.uni-perks a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.uni-perks a:hover {
  color: var(--accent-hover);
}

/* A button that looks like a plain link, e.g. "Forgot password?" */
button.link-button {
  display: block;
  margin: 6px 0 4px auto;     /* "auto" on the left pushes it to the right edge */
  padding: 2px 0;
  background: none;
  color: var(--accent-hover);
  font-weight: 600;
  font-size: 0.85rem;
}

button.link-button:hover {
  background: none;
  text-decoration: underline;
}

/* The "Choose a new password" box: outlined, so it stands out */
.new-password {
  margin: 4px 0 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #e6394666;
  background: var(--accent-soft);
}

.new-password h4 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.privacy {
  margin-top: 14px;
  font-size: 0.8rem;
}

/* The round account button in the top bar, next to the bell (it opens Settings) */
.account-chip {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
}

.account-chip svg {
  width: 19px;
  height: 19px;
}

.account-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
}

.account-chip:focus-visible,
#bell:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* You're on Settings: a red ring (on phones this button is the way into Settings) */
.account-chip.current {
  box-shadow: 0 0 0 2px var(--accent);
}

/* Logged in: a white circle with your first letter in red */
.account-chip.in {
  background: white;
  color: var(--accent);
  border-color: white;
}

/* AUD / USD: two buttons joined together, the chosen one is white */
.segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--pill);
}

.seg {
  background: transparent;
  color: var(--muted);
  padding: 8px 18px;
}

.seg:hover {
  background: var(--card-hover);
  color: var(--text);
}

.seg.active {
  background: var(--text);
  color: #121212;
}

/* Numbered steps (Install the app) */
.steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.steps strong {
  color: var(--text);
}

code {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.85em;
}

/* A row of buttons that wraps on small screens */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cloud-form button {
  align-self: flex-start;
  margin-top: 6px;
}

#cloud-status {
  margin-top: 10px;
}

#cloud-status:empty {
  display: none;
}

/* =========================================================
   12. FOOTER
   ========================================================= */
footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 8px 24px 32px;
  max-width: 700px;
  margin: 0 auto;
}

/* =========================================================
   13. SMALLER SCREENS
   "If the screen is narrower than ___, use these rules instead"
   ========================================================= */

@media (max-width: 800px) {
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-row {
    grid-template-columns: minmax(0, 1fr);   /* stacked instead of side by side */
  }

  .quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 x 2 tiles */
  }
}

/* Phones */
@media (max-width: 700px) {
  /* ---- The phone frame ----
     Top bar: the logo on the left, your buttons on the right (search lives on Deals).
     The sidebar becomes a bar along the bottom: Home, Hub, Deals, TrackBot.
     Settings is the round profile button in the top bar. */
  :root,
  html.side-collapsed {
    --side-label: 1;
    --side-tip: none;
    --topbar-h: 58px;
  }

  header {
    gap: 10px;
    padding: env(safe-area-inset-top) 16px 0;
  }

  .top-search,
  .page-title {
    display: none;
  }

  .header-actions {
    margin-left: auto;       /* no search here, so the buttons go to the right on their own */
  }

  .sidebar .plan-card {
    display: none;           /* the plan card is for the sidebar, not the bottom bar */
  }

  .logo-mark {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    border-radius: 10px;
  }

  .sidebar {
    top: auto;
    right: 0;
    width: auto;
    flex-direction: row;
    gap: 0;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));   /* room for the iPhone home bar */
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 11, 15, 0.92);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
  }

  .sidebar-brand,
  .sidebar .sidebar-toggle {
    display: none;
  }

  .tab-settings {
    margin-top: 0;           /* in the bottom bar it's just the 5th tab */
  }

  .sidebar-nav {
    flex-direction: row;
    gap: 6px;
  }

  /* Each page gets a quarter of the bar: icon above its name, easy to reach with a thumb */
  .tab {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: 52px;
    padding: 0 4px;
    border-radius: 14px;
    font-size: 0.72rem;
  }

  .tab.active::before {
    content: none;          /* no side bar here: the dark red pill and red icon are enough */
  }

  .tab-label {
    overflow: visible;
  }

  /* Leave space at the bottom so the menu bar never covers the page */
  body.has-sidebar {
    padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + 12px);
  }

  main {
    padding: 0 12px;
    margin-top: 16px;
  }

  .page {
    gap: 14px;
  }

  section {
    padding: 18px;
  }

  #page-home {
    gap: 26px;
  }

  .shelf-track.upcoming-list {
    grid-auto-columns: 170px;
  }

  .shelf-track.savings-list {
    grid-auto-columns: 82%;   /* most of the screen, with a peek of the next card */
  }

  .playlist {
    padding: 22px 14px 14px;
  }

  .playlist-head {
    padding: 0 6px;
  }

  /* No row numbers on phones: the space goes to the text */
  #sub-list li::before {
    content: none;
  }

  .cycle {
    left: 10px;
    right: 10px;
    bottom: 4px;
  }

  /* List rows become a small grid, so the text gets the full width:
       [icon] [name, tags, details, tip] [✎] [✕]
       [icon] [price                   ]          */
  #sub-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: 10px;
    row-gap: 4px;
    padding: 12px 10px;
  }

  #sub-list li .app-icon  { grid-row: 1 / span 2; align-self: start; width: 38px; height: 38px; }
  #sub-list li > div      { grid-column: 2; grid-row: 1; }
  #sub-list li .sub-price { grid-column: 2; grid-row: 2; }
  #sub-list li .edit      { grid-column: 3; grid-row: 1; align-self: start; }
  #sub-list li .delete    { grid-column: 4; grid-row: 1; align-self: start; }

  #sub-list .empty {
    display: flex;
  }

  /* Tags go on their own line under the name */
  .tags {
    display: flex;
    margin: 4px 0 0;
  }

  .bubble {
    max-width: 90%;
  }

  .shelves {
    gap: 28px;
  }

  .shelf-head h2 {
    font-size: 1.2rem;
  }

  /* No arrows on phones: you swipe instead */
  .shelf-arrows {
    display: none;
  }

  /* Rows run right to the edges of the screen, like a streaming app */
  .shelf-track {
    grid-auto-columns: 136px;
    gap: 14px;
    margin: 0 -12px;
    padding: 12px 12px 18px;
    scroll-padding: 0 12px;
    mask-image: none;
  }

  .poster-art {
    border-radius: 16px;
  }

  .poster-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  /* The app pop-up becomes a sheet that slides up from the bottom */
  dialog.sheet {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 26px 26px 0 0;
    border-bottom: none;
  }

  dialog.sheet[open] {
    animation: sheet-up 0.5s var(--ease);
  }

  dialog.sheet.closing {
    animation: sheet-down 0.3s ease-in forwards;
  }

  .sheet-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-height: 0;
    padding: 30px 20px 22px;
  }

  .sheet-logo {
    width: 80px;
    height: 80px;
    border-radius: 22px;
  }

  .sheet-body {
    padding: 0 20px 24px;
  }

  .plan-tiles {
    grid-template-columns: 1fr 1fr;
  }

  .plan-tile {
    padding: 14px 12px;
  }

  .tile-price {
    font-size: 1.15rem;
  }

  .sheet-actions button {
    width: 100%;
  }
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@keyframes sheet-down {
  to { transform: translateY(100%); }
}

/* =========================================================
   14. LESS MOTION
   If someone turned on "reduce motion" on their device (it can make some
   people feel sick), switch the animations off and show everything straight away.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal .poster {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   TRACKSAVE PLUS (the #plus page, the header pill, the Settings card)
   Plus has its own colour: warm gold, so it never looks like a red "warning".
   ========================================================= */
:root {
  --plus: #ffcf5c;
  --plus-deep: #e89b2a;
  --plus-soft: #ffcf5c1f;
  --plus-gradient: linear-gradient(135deg, #ffe08a, #f4a93b);
}

.tag-plus { background: var(--plus-soft); color: var(--plus); }

/* ---- Header pill ---- */
.plus-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--pill);
  border: 1px solid #ffcf5c55;
  color: var(--plus);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.plus-pill:hover { background: var(--plus-soft); }

.plus-pill.on {
  background: var(--plus-gradient);
  border-color: transparent;
  color: #241a05;
}

/* ---- Hero ---- */
.plus-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, #ffcf5c33, transparent 55%),
    radial-gradient(circle at 0% 100%, #e6394626, transparent 50%),
    var(--card);
  border-color: #ffcf5c33;
  padding: 32px;
}

.plus-hero .hero-label { color: var(--plus); }

.plus-hero .banner-title {
  margin: 6px 0 8px;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.plus-hero > .hint { max-width: 52ch; margin: 0; }

.plus-mark {
  position: absolute;
  right: 28px;
  top: 18px;
  font-size: 5rem;
  line-height: 1;
  background: var(--plus-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
}

.plus-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--plus-soft);
  border: 1px solid #ffcf5c44;
}

.plus-status strong { color: var(--plus); }
.plus-status p { flex-basis: 100%; margin: 0; }
.plus-status a { color: var(--plus); }

/* ---- Test banner ---- */
.plus-test-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 16px;
  background: #4cc2ff14;
  border: 1px solid #4cc2ff33;
}

.plus-test-banner p { margin: 0; }
.plus-test-banner .link-button { display: inline; margin: 0; padding: 0; font-size: inherit; }

/* ---- Price cards ---- */
.plus-pick h3,
.plus-what h3,
.plus-compare-card h3,
.plus-faq h3 { margin: 0 0 16px; }

.plus-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

button.plus-price {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--inset);
  border: 2px solid var(--border);
  color: var(--text);
  text-align: left;
  font-weight: 500;
}

button.plus-price:hover { background: var(--card-hover); }

button.plus-price.active {
  border-color: var(--plus);
  background: linear-gradient(180deg, #ffcf5c14, var(--inset));
}

.plus-price-name { font-weight: 700; }

.plus-price-amount {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.plus-best {
  position: absolute;
  top: -11px;
  right: 16px;
  padding: 2px 10px;
  border-radius: var(--pill);
  background: var(--plus-gradient);
  color: #241a05;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.plus-founder { margin: 14px 0 0; }

.plus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

button.plus-cta {
  background: var(--plus-gradient);
  color: #241a05;
  padding: 12px 26px;
}

button.plus-cta:hover { background: linear-gradient(135deg, #ffe9a8, #f7b552); }

.plus-msg { margin: -6px 4px 0; min-height: 1.2em; }

/* ---- Have a code? ---- */
.redeem { margin: 4px 4px 0; }
.redeem summary { cursor: pointer; color: var(--muted, #aaa); font-size: 0.95rem; }
.redeem-form { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 10px; max-width: 420px; }
.redeem-form input { flex: 1; min-width: 0; margin: 0; text-transform: uppercase; }
.redeem-form button { flex: none; width: auto; margin: 0; padding: 10px 18px; }

/* ---- Benefits ---- */
.plus-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.plus-benefit {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--inset);
  border: 1px solid var(--border);
}

.plus-benefit h4 {
  margin: 0 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.plus-benefit p { margin: 0; }

.plus-benefit-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--plus-soft);
  font-size: 1.2rem;
}

/* ---- Free vs Plus table ---- */
.plus-compare {
  width: 100%;
  border-collapse: collapse;
}

.plus-compare th,
.plus-compare td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.plus-compare th[scope="row"] { text-align: left; font-weight: 500; }
.plus-compare thead th { color: var(--muted); font-size: 0.85rem; }
.plus-compare thead th:last-child { color: var(--plus); }
.plus-compare tbody tr:last-child > * { border-bottom: none; }
.plus-compare .yes { color: var(--save); font-weight: 800; }
.plus-compare .no { color: var(--muted); }

/* ---- Questions ---- */
.plus-faq details {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}

.plus-faq summary { cursor: pointer; font-weight: 600; }
.plus-faq details p { margin: 8px 0 0; }

/* ---- Settings card ---- */
.setting-icon.plus-icon {
  background: var(--plus-soft);
  color: var(--plus);
  font-weight: 800;
}

.plus-setting { border-color: #ffcf5c33; }

a.button-link {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--pill);
  background: var(--plus-gradient);
  color: #241a05;
  font-weight: 700;
  text-decoration: none;
}

/* ---- Phones ---- */
@media (max-width: 700px) {
  .plus-hero { padding: 24px 20px; }
  .plus-mark { font-size: 3.2rem; right: 16px; top: 12px; }
  .plus-prices,
  .plus-benefits { grid-template-columns: 1fr; }
  .plus-pill span { display: none; }   /* just the ✦, to save space */
}

/* Small phones: no room in the header, so Plus lives in Settings only */
@media (max-width: 480px) {
  .plus-pill { display: none; }
}

/* Settings → Install the app (install.js) */
.install-done { color: var(--save); font-weight: 600; margin: 0 0 8px; }
#install-button { margin-bottom: 12px; }

/* "By creating an account you agree to the terms" sits right under the privacy line */
.privacy + .privacy { margin-top: 4px; }

/* Settings → Your uni → student ID reminders (plus.js) */
.student-id {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
}

.student-id label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.student-id input[type="date"] { margin-top: 8px; max-width: 220px; }
.student-id .hint { margin: 8px 0 0; }

a.student-id-locked {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--plus-soft);
  border: 1px solid #ffcf5c33;
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}

a.student-id-locked:hover { border-color: #ffcf5c77; }
a.student-id-locked > span:first-child { color: var(--plus); font-weight: 800; }

/* =========================================================
   HIGHLIGHTS (Plus, highlights.js): pinned subscriptions on Home
   ========================================================= */
.highlights { border-color: #ffcf5c2a; }
.highlights .shelf-head h2 { display: flex; align-items: center; gap: 8px; }

.highlights-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.hl-empty { margin: 0; color: var(--muted); }

button.hl-card {
  flex: 0 0 210px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* The app's own colour, fading into the dark card */
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%),
    var(--inset);
  color: var(--text);
  text-align: left;
  font-weight: 500;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}

button.hl-card:hover {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand) 70%, transparent), transparent 70%),
    var(--card-hover);
  transform: translateY(-3px);
}

button.hl-card.soon { border-color: #ffb54788; }

.hl-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.hl-logo { display: flex; }

.hl-ring { width: 38px; height: 38px; transform: rotate(-90deg); }
.hl-ring circle { fill: none; stroke-width: 4; }
.hl-ring-track { stroke: #ffffff1f; }
.hl-ring-fill { stroke: var(--plus); stroke-linecap: round; }

.hl-name { font-weight: 800; font-size: 1.05rem; }
.hl-plan { color: var(--muted); font-size: 0.85rem; }
.hl-price { font-size: 1.35rem; font-weight: 800; margin-top: 6px; }
.hl-status { color: var(--muted); font-size: 0.85rem; }
button.hl-card.soon .hl-status { color: var(--warn); }

/* ☆ / ★ on each subscription in the list */
#sub-list .pin {
  background: transparent;
  color: var(--muted);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.05rem;
}

#sub-list .pin:hover { background: var(--plus-soft); color: var(--plus); }
#sub-list .pin.on { color: var(--plus); }

@media (hover: hover) {
  #sub-list .pin:not(.on) { opacity: 0; transition: opacity 0.2s, background 0.15s; }
  #sub-list li:hover .pin,
  #sub-list li:focus-within .pin { opacity: 1; }
}

/* ---- The details pop-up ---- */
dialog.pin-dialog { overflow: hidden; }

.pin-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 26px 20px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand) 65%, transparent), transparent 75%),
    var(--card);
}

.pin-hero h2 { margin: 0; font-size: 1.5rem; }
.pin-hero .hint { margin: 2px 0 0; }

.pin-logo .app-icon { width: 60px; height: 60px; border-radius: 16px; }

button.pin-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: #00000055;
  color: var(--text);
}

.pin-dialog .dialog-body { padding-top: 18px; }

.pin-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

.pin-facts > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--inset);
  border: 1px solid var(--border);
}

.pin-facts dt { color: var(--muted); font-size: 0.78rem; }
.pin-facts dd { margin: 2px 0 0; font-weight: 700; }

.pin-cycle {
  height: 6px;
  margin-top: 16px;
  border-radius: var(--pill);
  background: #ffffff14;
  overflow: hidden;
}

.pin-cycle span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--plus-gradient);
}

.pin-cycle-text { margin: 6px 0 0; font-size: 0.8rem; }

.pin-tip {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--save-soft);
  color: var(--save);
  font-size: 0.9rem;
}

/* =========================================================
   SAVED WITH TRACKSAVE (saved.js)
   ========================================================= */
.saved {
  background:
    radial-gradient(circle at 100% 0%, #1ed76026, transparent 55%),
    rgba(255, 255, 255, 0.035);
  border-color: #1ed76033;
}

.saved-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.saved .hero-label { color: var(--save); }
.saved-head .hint { margin: 2px 0 0; }

.saved-big { display: flex; align-items: baseline; gap: 8px; }
.saved-big strong {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--save);
}
.saved-big span { color: var(--muted); font-weight: 600; }

.saved-wrapped {
  padding: 6px 12px;
  border-radius: var(--pill);
  background: var(--plus-soft);
  color: var(--plus);
  font-size: 0.8rem;
  font-weight: 600;
}

.saved-empty { margin: 14px 0 0; }

.saved-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.saved-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--inset);
  border: 1px solid var(--border);
}

.saved-list .app-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 0.95rem; }
.saved-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.saved-text .hint { font-size: 0.8rem; }
.saved-amount { color: var(--save); font-weight: 800; white-space: nowrap; }

button.saved-remove {
  background: transparent;
  color: var(--muted);
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
}
button.saved-remove:hover { background: var(--accent-soft); color: var(--accent-hover); }

/* ✕ → "Did you cancel it?" */
.remove-saving { color: var(--save); font-weight: 700; }
.remove-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.remove-buttons .link-button { align-self: center; }

/* Price & promo alerts (price-alerts.js) */
a.alert-link { color: var(--plus); font-weight: 600; white-space: nowrap; }
.heads-up-option { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.heads-up-option .hint { margin: 4px 0 0; }

/* =========================================================
   TRACKBOT CHECK-UP (Plus, checkup.js)
   ========================================================= */
.checkup {
  background:
    radial-gradient(circle at 0% 0%, #4cc2ff1f, transparent 55%),
    rgba(255, 255, 255, 0.035);
  border-color: #4cc2ff2e;
}

.checkup.all-good { border-color: #1ed76033; }

.checkup-head { display: flex; align-items: center; gap: 14px; }
.checkup-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.checkup-head .hint { margin: 2px 0 0; }
.checkup.all-good #checkup-summary { color: var(--save); font-weight: 600; }

.checkup-bot { width: 44px; height: 44px; border-radius: 12px; }

.checkup-list {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.checkup-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--inset);
  border: 1px solid var(--border);
}

.checkup-list:empty { display: none; }
.checkup.all-good #checkup-full { margin-top: 14px; }
.checkup-icon { flex-shrink: 0; }

/* =========================================================
   TRACK WRAPPED (wrapped.js)
   ========================================================= */
.wrapped-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(120deg, #e6394640, #7b1fa240), var(--card);
  border-color: #ffcf5c44;
}
.wrapped-banner > div { flex: 1; display: flex; flex-direction: column; }
.wrapped-banner-icon { font-size: 1.8rem; }

#wrapped-peek { display: block; margin-top: 10px; }

/* The story: full screen on phones, a tall card on computers */
dialog.wrapped {
  width: min(430px, 100vw);
  height: min(860px, 100dvh);
  max-height: 100dvh;
  max-width: 100vw;
  padding: 0;
  border: none;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}
dialog.wrapped::backdrop { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); }

.wrapped-progress {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 56px;
  z-index: 2;
  display: flex;
  gap: 4px;
}
.wrapped-progress span { flex: 1; height: 3px; border-radius: 3px; background: #ffffff40; transition: background 0.3s; }
.wrapped-progress span.done { background: #fff; }

button.wrapped-close {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
}

.wrapped-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 56px 28px 36px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  animation: wr-in 0.45s var(--ease);
}
@keyframes wr-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wrapped-slide { animation: none; } }

/* Each slide gets its own colours */
.theme-intro    { background: radial-gradient(circle at 20% 10%, #ff6b6b, transparent 60%), linear-gradient(160deg, #e63946, #3a0ca3); }
.theme-count    { background: linear-gradient(160deg, #3a0ca3, #7209b7); }
.theme-cost     { background: linear-gradient(160deg, #f72585, #7209b7); }
.theme-biggest  { background: linear-gradient(160deg, #111, #333); }
.theme-category { background: linear-gradient(160deg, #ffbe0b, #fb5607); color: #1a1100; }
.theme-saved    { background: linear-gradient(160deg, #06d6a0, #118ab2); }
.theme-months   { background: linear-gradient(160deg, #1d3557, #457b9d); }
.theme-student  { background: linear-gradient(160deg, #8338ec, #3a86ff); }
.theme-note     { background: linear-gradient(160deg, #222, #e63946); }
.theme-plus     { background: linear-gradient(160deg, #241a05, #f4a93b); }
.theme-share    { background: linear-gradient(160deg, #141018, #3a0ca3); }
.theme-category .wr-sub, .theme-category .wr-kicker { color: #1a1100cc; }

.wr-kicker { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; opacity: 0.85; }
.wr-huge { margin: 0; font-size: clamp(2.6rem, 13vw, 4.2rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.wr-fit { font-size: clamp(2.2rem, 11vw, 3.4rem); }
.wr-big { margin: 0; font-size: 1.7rem; font-weight: 800; line-height: 1.15; }
.wr-sub { margin: 6px 0 0; font-size: 1.05rem; line-height: 1.45; opacity: 0.9; }

.wr-logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.wr-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 8px 20px #0006; }
.wr-logo .app-logo { width: 60%; height: 60%; object-fit: contain; }
.wr-logo .logo-letters { font-weight: 800; font-size: 1.1rem; width: auto; height: auto; }
.wr-logo-big { width: 110px; height: 110px; border-radius: 28px; margin: 8px 0 10px; }

.wr-bars { display: flex; align-items: flex-end; gap: 6px; height: 260px; margin: 18px 0 6px; }
.wr-bar {
  flex: 1;
  height: var(--h);
  position: relative;
  border-radius: 8px 8px 3px 3px;
  background: #ffffff55;
}
.wr-bar.busiest { background: #ffcf5c; }
.wr-bar span { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 0.75rem; opacity: 0.8; }

.wr-bot { width: 84px; height: 84px; border-radius: 22px; margin: 6px 0; }
.wr-note { font-size: 1.15rem; line-height: 1.5; margin: 0; }

a.wr-plus-link, button.wr-share {
  align-self: flex-start;
  margin-top: 14px;
  padding: 12px 22px;
  border-radius: var(--pill);
  background: #fff;
  color: #111;
  font-weight: 800;
  text-decoration: none;
}
button.wr-share:hover { background: #f1f1f1; }

.wr-card-preview canvas {
  width: 100%;
  max-height: 46dvh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 16px 40px #0008;
}

@media (max-width: 480px) {
  dialog.wrapped { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* TrackBot: asking before the first AI answer (assistant.js) */
.ai-consent-bot { width: 48px; height: 48px; border-radius: 14px; }
.ai-consent-list { margin: 8px 0 12px; padding-left: 20px; color: var(--text); }
.ai-consent-list li { margin: 4px 0; }
#ai-consent .hint a { color: var(--accent-hover); }

/* =========================================================
   HUB: your numbers on their own page (hub.js)
   ========================================================= */

/* While searching on Deals, the saving ideas step aside too (deals.js) */
#page-deals.searching #savings {
  display: none;
}

.hub-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Two cards side by side on big screens, stacked on small ones */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.hub-card .section-head h2 {
  font-size: 1.15rem;
}

/* ---- Nothing in your list yet ---- */
.hub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 24px;
  text-align: center;
}

.hub-empty-icon {
  font-size: 2.4rem;
}

.hub-empty strong {
  font-size: 1.2rem;
}

.hub-empty .hint {
  max-width: 420px;
}

.hub-empty button {
  margin-top: 10px;
}

/* ---- Ranked bars: "By category" and "Biggest costs" ----
   One colour (one series: your spending), thin rounded bars on a faint track,
   and the numbers written beside each bar */
.rank-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rank {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank .app-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.rank-body {
  flex: 1;
  min-width: 0;
}

.rank-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rank-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rank-share {
  color: var(--muted);
  font-size: 0.85rem;
}

.rank-track {
  height: 8px;
  margin: 6px 0 4px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.rank-fill {
  display: block;
  height: 100%;
  border-radius: var(--pill);
  background: var(--accent);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}

/* Before you scroll to them, the bars are empty; then they grow one after another */
.reveal:not(.shown) .rank-fill {
  transform: scaleX(0);
}

.rank-note {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-empty {
  padding: 8px 0;
}

/* ---- Payment calendar ---- */
.cal-head {
  align-items: flex-start;
}

.cal-head .hint {
  margin-top: 4px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

#cal-title {
  min-width: 128px;
  text-align: center;
  white-space: nowrap;
}

button.cal-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.3rem;
  line-height: 1;
}

button.cal-arrow:hover {
  background: rgba(255, 255, 255, 0.16);
}

button.cal-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

/* The month on the left, the day you picked on the right */
.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal-weekdays {
  margin-bottom: 6px;
}

.cal-weekdays span {
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

button.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 64px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

button.cal-cell:hover {
  background: rgba(255, 255, 255, 0.08);
}

button.cal-cell.busy {
  background: rgba(255, 255, 255, 0.06);
}

button.cal-cell.past {
  opacity: 0.45;
}

button.cal-cell.picked {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.cal-num {
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0 6px;
  border-radius: var(--pill);
}

.cal-cell.today .cal-num {
  background: var(--accent);
  color: #fff;
}

.cal-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}

.cal-icons .app-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.cal-more {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

/* What's on the day you picked */
.cal-day {
  padding: 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cal-day-title {
  display: block;
  margin-bottom: 10px;
}

.cal-day-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-event {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-event .app-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.cal-event-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cal-event-amount {
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cal-paid .cal-event-amount {
  color: var(--muted);
}

/* ---- Key dates ---- */
.key-dates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.key-date {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
}

/* Within a week: a soft orange, like "Due soon" */
.key-date.soon {
  background: rgba(255, 181, 71, 0.08);
  border-color: rgba(255, 181, 71, 0.25);
}

.key-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  flex-shrink: 0;
}

.key-badge strong {
  font-size: 1.15rem;
  line-height: 1.1;
}

.key-badge span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.key-date .app-icon,
.key-emoji {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.key-emoji {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.2rem;
}

.key-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.key-empty {
  padding: 8px 0;
}

@media (max-width: 900px) {
  .hub-grid,
  .cal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: smaller calendar squares, so 7 still fit across */
@media (max-width: 480px) {
  .cal-weekdays,
  .cal-grid {
    gap: 3px;
  }

  button.cal-cell {
    min-height: 50px;
    padding: 4px 3px;
    border-radius: 9px;
  }

  .cal-num {
    padding: 0 4px;
    font-size: 0.75rem;
  }

  .cal-icons {
    gap: 2px;
  }

  .cal-icons .app-icon {
    width: 14px;
    height: 14px;
    border-radius: 4px;
  }

  .cal-head {
    flex-direction: column;
  }
}

/* =========================================================
   SETTINGS LAYOUT: 4 groups, with a jump menu
   (big screens: a menu down the left side; phones: a row of chips at the top)
   ========================================================= */
.settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 24px);   /* stays in view under the top bar while you scroll */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.settings-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: none;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
}

.settings-nav button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.settings-nav button.active {
  background: var(--accent-soft);
  color: var(--text);
}

/* The groups, one under the other. "container" lets the cards inside
   switch to one column when this area is narrow (see @container below). */
.settings-sections {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.settings-group {
  scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 24px);   /* when we jump here, leave room for the top bar */
}

.settings-group-head {
  margin-bottom: 14px;
}

.settings-group-head h3 {
  margin: 0 0 2px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@container (max-width: 640px) {
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tablets and phones: the menu becomes a row of chips at the top, stuck under the header */
@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .settings-nav {
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px);
    z-index: 5;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px;
    border-radius: var(--pill);
    background: rgba(14, 12, 18, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .settings-nav::-webkit-scrollbar {
    display: none;
  }

  .settings-nav button {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--pill);
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .settings-group {
    scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 76px);   /* the top bar + the chip row */
  }

  .settings-sections {
    gap: 32px;
  }
}

@media (max-width: 700px) {
  .settings-nav {
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 6px);
  }
}

/* =========================================================
   TRACKBOT DISCOVERY: "TrackBot found something" at the top of Home (discovery.js)
   ========================================================= */
.discovery {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 0% 0%, #e6394626, transparent 45%),
    #161618;
  border: 1px solid #e6394640;
  box-shadow: 0 18px 40px -24px #e63946aa;
}

/* It drops in from above when there's something new */
.discovery.pop {
  animation: discovery-in 0.6s var(--ease) both;
}

@keyframes discovery-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* TrackBot's face, with a soft red ring that pulses a couple of times */
.discovery-bot {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.discovery.pop .discovery-bot {
  animation: discovery-ring 1.6s ease-out 0.5s 2;
}

@keyframes discovery-ring {
  0%   { box-shadow: 0 0 0 0 #e6394680; }
  100% { box-shadow: 0 0 0 12px #e6394600; }
}

.discovery-body {
  flex: 1;
  min-width: 0;
}

.discovery-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 1.05rem;
}

.discovery-saving {
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--save-soft);
  color: var(--save);
  font-size: 0.8rem;
  font-weight: 800;
}

.discovery-text {
  margin: 8px 0 0;
  line-height: 1.5;
}

.discovery-ask {
  margin: 10px 0 0;
  font-weight: 600;
}

.discovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.discovery-actions button {
  padding: 9px 18px;
  white-space: nowrap;
}

.discovery-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .discovery {
    padding: 16px;
    gap: 12px;
  }

  .discovery-bot {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .discovery-actions button {
    flex: 1;   /* two equal buttons side by side, easy to tap */
  }
}

@media (prefers-reduced-motion: reduce) {
  .discovery.pop,
  .discovery.pop .discovery-bot {
    animation: none;
  }
}

/* =========================================================
   TRACKBOT PAGE: the chat fills the screen like a messaging app.
   Only the messages scroll, and the message box always stays in view
   (on phones, just above the menu bar).
   ========================================================= */
#page-ask .chat {
  height: calc(100vh - var(--topbar-h) - 56px);                                  /* older browsers */
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - 56px);      /* 56px = the space above and below */
  min-height: 440px;
}

#page-ask #bot-log {
  flex: 1;                   /* the messages take whatever height is left */
  height: auto;
  min-height: 0;
}

@media (max-width: 700px) {
  #page-ask .chat {
    height: calc(100vh - var(--topbar-h) - var(--bottombar-h) - 28px);
    height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - var(--bottombar-h) - env(safe-area-inset-bottom) - 28px);
    min-height: 340px;
  }
}

/* The 🔔 alerts panel never grows taller than the screen (long lists scroll inside it) */
#bell-panel {
  max-height: calc(100vh - var(--topbar-h) - 40px);
  overflow-y: auto;
}

/* Phones: the alerts panel spans the screen under the top bar, so it can't run off the edge */
@media (max-width: 700px) {
  #bell-panel {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - var(--topbar-h) - var(--bottombar-h) - 60px);
  }
}

/* =========================================================
   TOP BAR: the page's name, and the plan card in the sidebar
   ========================================================= */
.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The page's icon (copied from its menu item) in a dark red square */
.page-title-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(230, 57, 70, 0.14);
  color: var(--accent-hover);
  font-size: 1.1rem;
}

.page-title-icon svg,
.page-title-icon img {
  width: 20px;
  height: 20px;
}

.page-title > div {
  min-width: 0;
}

.page-title strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#page-subtitle {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Smaller windows: just the page's name, then not even that, so search keeps its room */
@media (max-width: 980px) and (min-width: 701px) {
  #page-subtitle {
    display: none;
  }
}

@media (max-width: 800px) and (min-width: 701px) {
  .page-title {
    display: none;
  }
}

/* The ✦ Plus pill: on bigger screens the sidebar's plan card shows your plan instead */
@media (min-width: 701px) {
  .plus-pill {
    display: none;
  }
}

/* The plan card: your plan and how many subscriptions you track. It opens the Plus page.
   When the sidebar is shrunk, only its icon shows, in the middle. */
.tab.plan-card {
  height: auto;
  min-height: 52px;
  margin-top: 8px;
  padding: 8px 6px;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.tab.plan-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.plan-card .plan-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(230, 57, 70, 0.16);
  color: var(--accent-hover);
  font-size: 0.95rem;
}

.plan-card-icon svg {
  width: 18px;
  height: 18px;
}

.plan-card.on-plus .plan-card-icon {
  background: var(--plus-gradient);
  color: #241a05;
}

.plan-card-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.plan-card-text strong {
  font-size: 0.85rem;
}

.plan-card-text span {
  color: var(--muted);
  font-size: 0.75rem;
}

/* =========================================================
   HOME: the greeting, three stat cards and smart recommendations
   ========================================================= */
.home-overview {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  background: none;
  border: none;
}

.overview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.overview-head h2 {
  margin: 0 0 4px;
  font-size: clamp(1.6rem, 3vw, 2rem);
  letter-spacing: -0.03em;
}

.overview-date {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.stat-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(230, 57, 70, 0.14);
  color: var(--accent-hover);
}

.stat-icon svg {
  width: 19px;
  height: 19px;
}

.stat-label {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* The big number. tabular-nums = every digit the same width, so counting up doesn't wobble */
.stat-value {
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-note {
  color: var(--muted);
  font-size: 0.85rem;
}

.stat-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;          /* always at the bottom of the card */
  padding-top: 14px;
}

/* "↓ A$8.00/mo saved": what the changes you've made already save */
.stat-chip {
  padding: 4px 10px;
  border-radius: var(--pill);
  background: var(--save-soft);
  color: var(--save);
  font-size: 0.78rem;
  font-weight: 800;
}

.stat-link {
  margin-left: auto;
  padding: 0;
  background: none;
  color: var(--accent-hover);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.stat-link:hover {
  background: none;
  color: var(--text);
}

/* Your apps' logos, overlapping like a stack of cards */
.stat-logos {
  display: flex;
  align-items: center;
}

.stat-logos .app-icon {
  width: 28px;
  height: 28px;
  margin-right: -6px;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #18161c;
  font-size: 0.8rem;
}

.stat-more {
  margin-left: 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

/* The ⓘ in the top corner of the first card */
.stat-top .info-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.stat-top .info-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.stat-card .total-info {
  max-width: none;
  margin: 8px 0 0;
  color: var(--text);
}

/* Potential savings: the one red card, because it's the one to act on */
.stat-save {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 107, 107, 0.32), transparent 60%),
    linear-gradient(160deg, #8a1420, #3a0a10);
  border-color: rgba(230, 57, 70, 0.45);
}

.stat-save .stat-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.stat-save .stat-label,
.stat-save .stat-note {
  color: rgba(255, 255, 255, 0.78);
}

.stat-button {
  padding: 8px 16px;
  font-size: 0.85rem;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
}

/* ---- Smart recommendations: three cards with a hint of each app's colour ---- */
.recommendation-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rec-card {
  --rec-bg:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
    rgba(255, 255, 255, 0.03);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--rec-bg);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  transition: border-color 0.15s, transform 0.25s var(--ease);
}

.rec-card:hover {
  background: var(--rec-bg);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.rec-card .app-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.rec-text {
  align-self: center;
  font-size: 0.9rem;
  line-height: 1.35;
}

.rec-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rec-tag {
  padding: 4px 10px;
  border-radius: var(--pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rec-tag.save {
  background: var(--save-soft);
  color: var(--save);
}

.rec-go {
  color: var(--muted);
}

/* A narrower page (tablets, or a laptop with the sidebar open): two cards on top and one
   wide one below; the recommendations scroll sideways */
@container page (max-width: 820px) {
  .stat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-cards .stat-card:first-child {
    grid-column: 1 / -1;
  }

  .recommendation-list {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(240px, 46%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .rec-card {
    scroll-snap-align: start;
  }
}

@media (max-width: 700px) {
  header .page-title {
    display: none;           /* phones: the logo is there instead, and the bottom bar shows the page */
  }

  .recommendations .section-head h2 {
    font-size: 1.15rem;
  }

  .stat-cards {
    gap: 10px;
  }

  .stat-card {
    padding: 16px;
    border-radius: 18px;
  }

  .stat-value {
    font-size: 1.6rem;
  }

  .stat-cards .stat-card:first-child .stat-value {
    font-size: 2.2rem;
  }

  .recommendation-list {
    grid-auto-columns: 80%;   /* most of the screen, with a peek of the next card */
  }

  .overview-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* =========================================================
   TRACKBOT PAGE: the chat on the left, "Suggestions for you" on the right
   ========================================================= */
.ask-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

/* ---- The chat: a quiet panel, so the messages stand out ---- */
#page-ask .chat {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

/* "● Online · answers instantly" and the AI line, in one slim row */
#page-ask .chat-head {
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 12px 20px;
  background: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#page-ask .ai-status {
  margin-top: 0;
}

/* The messages take only the room they need (so the question buttons sit right under them),
   up to all the room there is, then they scroll. The message bar stays at the bottom. */
#page-ask #bot-log {
  flex: 0 1 auto;
  gap: 12px;
  padding: 20px 20px 12px;
}

#page-ask .bot-avatar {
  width: 34px;
  height: 34px;
}

#page-ask .bubble {
  padding: 12px 16px;
  line-height: 1.55;
}

#page-ask .bubble.bot {
  background: #1a191e;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 18px 18px 18px 6px;
}

/* ---- The question buttons: pills with a little red sparkle, lined up under TrackBot's messages ---- */
#page-ask #bot-options {
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 20px 16px 62px;
  overflow: visible;
}

#page-ask #bot-options button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.88rem;
}

#page-ask #bot-options button::before {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background: var(--accent-hover);
  /* a 4-point sparkle, cut out of the red with a "mask" */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#page-ask #bot-options button:hover {
  background: var(--accent-soft);
  border-color: rgba(230, 57, 70, 0.7);
}

/* ---- The message box: one rounded bar with the send button inside ---- */
#page-ask #bot-form {
  margin: auto 16px 16px;      /* "auto" on top pushes it to the bottom of the chat */
  padding: 6px 6px 6px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Typing in it: the whole bar gets the red focus ring */
#page-ask #bot-form:focus-within {
  border-color: rgba(230, 57, 70, 0.65);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.16);
}

#page-ask #bot-form input {
  padding: 10px 0;
  background: none;
  border: none;
  font-size: 0.95rem;
}

#page-ask #bot-form input:focus {
  outline: none;               /* the bar around it shows the focus instead */
}

#page-ask #bot-form button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  box-shadow: 0 8px 20px -8px rgba(230, 57, 70, 0.8);
}

#page-ask #bot-form button svg {
  width: 20px;
  height: 20px;
}

/* ---- Suggestions for you ---- */
.ask-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - 56px);
  padding: 18px;
  overflow-y: auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.ask-side h2 {
  margin: 0 0 2px;
  font-size: 1.05rem;
}

.bot-suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bot-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.bot-tip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.bot-tip-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.bot-tip-icon svg {
  width: 20px;
  height: 20px;
}

/* Each kind gets its own colour, so they're easy to tell apart */
.bot-tip.save .bot-tip-icon  { background: rgba(230, 57, 70, 0.16); color: var(--accent-hover); }
.bot-tip.due .bot-tip-icon   { background: rgba(255, 181, 71, 0.14); color: var(--warn); }
.bot-tip.deals .bot-tip-icon { background: rgba(76, 194, 255, 0.14); color: var(--info); }
.bot-tip.spend .bot-tip-icon { background: rgba(30, 215, 96, 0.12); color: var(--save); }
.bot-tip.add .bot-tip-icon   { background: var(--accent); color: #fff; }

.bot-tip-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bot-tip-text strong {
  font-size: 0.92rem;
}

.bot-tip-text span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}

.bot-tip-go {
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
}

.ask-side-note {
  margin: 2px 0 0;
  font-size: 0.75rem;
}

/* A narrower page: the suggestions go under the chat */
@container page (max-width: 860px) {
  .ask-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ask-side {
    max-height: none;
  }
}

/* Phones: the question buttons stay on one row you can swipe, so the chat keeps its room */
@media (max-width: 700px) {
  #page-ask #bot-log {
    padding: 16px 14px 10px;
  }

  #page-ask #bot-options {
    flex-wrap: nowrap;
    padding: 2px 14px 12px;
    overflow-x: auto;
  }

  #page-ask #bot-form {
    margin: auto 10px 10px;
  }
}

/* =========================================================
   HUB (redesign): spending overview, charts, biggest costs, insights (hub.js)
   ========================================================= */
.hub-overview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.hub-overview-head h2 {
  margin: 0 0 2px;
  font-size: 1.4rem;
}

/* "Next 6 months" / "12 months": two joined buttons, the chosen one dark red */
.range-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.range-toggle button {
  padding: 7px 12px;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.range-toggle button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.range-toggle button[aria-pressed="true"] {
  background: rgba(230, 57, 70, 0.16);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(230, 57, 70, 0.55);
}

/* ---- Three numbers ---- */
.hub-stats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}

.hub-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.hub-stat > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hub-stat-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.hub-stat-main .hub-stat-icon {
  background: rgba(230, 57, 70, 0.16);
  color: var(--accent-hover);
}

.hub-stat-icon svg {
  width: 22px;
  height: 22px;
}

.hub-stat-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.hub-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hub-stat-main .hub-stat-value {
  font-size: 1.8rem;
}

.hub-stat-note {
  color: var(--muted);
  font-size: 0.78rem;
}

/* The two charts side by side: the bar chart a little wider */
.hub-grid.hub-grid-charts {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

/* ---- Monthly spending: an axis on the left, faint lines across, red bars ---- */
.forecast-chart {
  grid-template-columns: auto minmax(0, 1fr);
}

.forecast-bars {
  display: grid;
  grid-template-columns: repeat(var(--count, 6), minmax(0, 1fr));
}

/* The amounts on the axis, lined up with the faint lines (the bar area starts 31px down) */
.forecast-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 156px;
  margin-top: 23px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The faint lines: one every quarter of the height */
.forecast-bars .forecast-track {
  background: repeating-linear-gradient(to top, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 25%);
}

.forecast-bars .forecast-bar {
  width: min(34px, 58%);
}

/* ---- Spending by category: a donut, and its list beside it ---- */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
}

.donut {
  position: relative;
  flex-shrink: 0;
  width: 170px;
  height: 170px;
}

.donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* the first slice starts at 12 o'clock */
}

.donut circle {
  fill: none;
  stroke-width: 14;
}

.donut .donut-track {
  stroke: rgba(255, 255, 255, 0.06);
}

.donut-centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.donut-centre strong {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.donut-centre span {
  color: var(--muted);
  font-size: 0.75rem;
}

.donut-legend {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.donut-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.donut-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.donut-name {
  line-height: 1.25;          /* long names ("Study & work") wrap onto two lines */
}

.donut-share {
  color: var(--muted);
  font-size: 0.8rem;
}

.donut-legend strong {
  font-variant-numeric: tabular-nums;
}

/* ---- Your biggest costs: each row opens that app's plans ---- */
.rank-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

button.rank-inner {
  width: calc(100% + 16px);
  margin: -6px -8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font-weight: inherit;
  text-align: left;
}

button.rank-inner:hover {
  background: rgba(255, 255, 255, 0.05);
}

.rank-go,
.insight-go {
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
}

/* ---- Insights ---- */
.insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insight {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

button.insight:hover {
  background: rgba(255, 255, 255, 0.06);
}

.insight-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.insight-icon svg {
  width: 19px;
  height: 19px;
}

.insight.good .insight-icon  { background: rgba(30, 215, 96, 0.12); color: var(--save); }
.insight.save .insight-icon  { background: rgba(230, 57, 70, 0.16); color: var(--accent-hover); }
.insight.soon .insight-icon  { background: rgba(255, 181, 71, 0.14); color: var(--warn); }
.insight.year .insight-icon  { background: rgba(154, 123, 240, 0.16); color: #b9a3ff; }
.insight.chart .insight-icon { background: rgba(59, 142, 234, 0.16); color: #7fb5f5; }

.insight-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.insight-text strong {
  font-size: 0.9rem;
}

.insight-text span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}

/* A narrower page: the big number on its own row, the charts one under the other */
@container page (max-width: 760px) {
  .hub-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-stat-main {
    grid-column: 1 / -1;
  }

  .hub-grid.hub-grid-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .hub-stat {
    gap: 10px;
    padding: 14px;
  }

  .hub-stat-icon {
    width: 38px;
    height: 38px;
  }

  .hub-stat-value {
    font-size: 1.2rem;
  }

  .donut-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .donut {
    margin: 0 auto;
  }
}

/* =========================================================
   DEALS (deals.js): the carousel, TrackBot's deal panel, and sections of
   cards you swipe sideways. Sizes follow the design mockup: on a laptop,
   4 big cards, 6 compare cards, or 4 small cards (in half the width) fit.
   ========================================================= */

/* ---- CARD ART: one line drawing per kind of app (white, see-through).
   Made by scripts/make-card-art.mjs: change a drawing there, run it, paste here. ---- */
.art-ai { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='1.3'%3E %3Cpath d='M170 30 230 62 292 26M230 62l18 70 52 22M230 62l-44 56 62 14M186 118l-40 46M248 132l-28 56M292 26l10 64-54 42'/%3E %3Ccircle cx='230' cy='62' r='26' stroke-opacity='.12'/%3E%3Ccircle cx='248' cy='132' r='40' stroke-opacity='.08'/%3E%3C/g%3E %3Cg fill='%23fff'%3E%3Ccircle cx='170' cy='30' r='3' fill-opacity='.5'/%3E%3Ccircle cx='230' cy='62' r='5' fill-opacity='.7'/%3E %3Ccircle cx='292' cy='26' r='3' fill-opacity='.45'/%3E%3Ccircle cx='248' cy='132' r='5' fill-opacity='.6'/%3E %3Ccircle cx='186' cy='118' r='3.5' fill-opacity='.5'/%3E%3Ccircle cx='300' cy='154' r='3' fill-opacity='.4'/%3E %3Ccircle cx='146' cy='164' r='3' fill-opacity='.35'/%3E%3Ccircle cx='220' cy='188' r='3' fill-opacity='.35'/%3E%3C/g%3E %3Cpath d='M276 166l3 8 8 3-8 3-3 8-3-8-8-3 8-3z' fill='%23fff' fill-opacity='.5'/%3E%3C/svg%3E"); }
.art-music { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Ccircle cx='262' cy='100' r='82' stroke-opacity='.1'/%3E %3Ccircle cx='262' cy='100' r='62' stroke-opacity='.13'/%3E%3Ccircle cx='262' cy='100' r='42' stroke-opacity='.16'/%3E %3Ccircle cx='262' cy='100' r='14' stroke-opacity='.3'/%3E%3C/g%3E %3Cg fill='%23fff' fill-opacity='.18'%3E%3Crect x='150' y='120' width='7' height='50' rx='3.5'/%3E%3Crect x='163' y='96' width='7' height='74' rx='3.5'/%3E%3Crect x='176' y='132' width='7' height='38' rx='3.5'/%3E%3Crect x='189' y='84' width='7' height='86' rx='3.5'/%3E%3Crect x='202' y='110' width='7' height='60' rx='3.5'/%3E%3Crect x='215' y='140' width='7' height='30' rx='3.5'/%3E%3C/g%3E %3Cpath d='M140 56c20-24 40 24 60 0s40 24 60 0' fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='1.5'/%3E%3C/svg%3E"); }
.art-video { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg transform='rotate(-12 240 100)'%3E%3Crect x='140' y='62' width='220' height='76' rx='6' fill='%23fff' fill-opacity='.05' stroke='%23fff' stroke-opacity='.2'/%3E %3Cg fill='%23fff' fill-opacity='.22'%3E%3Crect x='150' y='67' width='8' height='6' rx='1'/%3E%3Crect x='150' y='127' width='8' height='6' rx='1'/%3E%3Crect x='168' y='67' width='8' height='6' rx='1'/%3E%3Crect x='168' y='127' width='8' height='6' rx='1'/%3E%3Crect x='186' y='67' width='8' height='6' rx='1'/%3E%3Crect x='186' y='127' width='8' height='6' rx='1'/%3E%3Crect x='204' y='67' width='8' height='6' rx='1'/%3E%3Crect x='204' y='127' width='8' height='6' rx='1'/%3E%3Crect x='222' y='67' width='8' height='6' rx='1'/%3E%3Crect x='222' y='127' width='8' height='6' rx='1'/%3E%3Crect x='240' y='67' width='8' height='6' rx='1'/%3E%3Crect x='240' y='127' width='8' height='6' rx='1'/%3E%3Crect x='258' y='67' width='8' height='6' rx='1'/%3E%3Crect x='258' y='127' width='8' height='6' rx='1'/%3E%3Crect x='276' y='67' width='8' height='6' rx='1'/%3E%3Crect x='276' y='127' width='8' height='6' rx='1'/%3E%3Crect x='294' y='67' width='8' height='6' rx='1'/%3E%3Crect x='294' y='127' width='8' height='6' rx='1'/%3E%3Crect x='312' y='67' width='8' height='6' rx='1'/%3E%3Crect x='312' y='127' width='8' height='6' rx='1'/%3E%3Crect x='330' y='67' width='8' height='6' rx='1'/%3E%3Crect x='330' y='127' width='8' height='6' rx='1'/%3E%3Crect x='348' y='67' width='8' height='6' rx='1'/%3E%3Crect x='348' y='127' width='8' height='6' rx='1'/%3E%3C/g%3E %3Cg fill='none' stroke='%23fff' stroke-opacity='.18'%3E%3Crect x='166' y='80' width='52' height='40' rx='3'/%3E%3Crect x='228' y='80' width='52' height='40' rx='3'/%3E%3Crect x='290' y='80' width='52' height='40' rx='3'/%3E%3C/g%3E %3Cpath d='M247 91l15 9-15 9z' fill='%23fff' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); }
.art-sport { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='1.4'%3E%3Crect x='150' y='30' width='190' height='140' rx='4'/%3E %3Cpath d='M245 30v140'/%3E%3Ccircle cx='245' cy='100' r='28'/%3E%3Crect x='150' y='70' width='30' height='60'/%3E%3C/g%3E %3Cg stroke='%23fff' stroke-opacity='.28' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M118 150h40M128 162h50M138 174h30'/%3E%3C/g%3E %3Ccircle cx='206' cy='138' r='9' fill='%23fff' fill-opacity='.3'/%3E%3C/svg%3E"); }
.art-freetv { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M250 156 262 92l12 64' stroke-opacity='.3'/%3E %3Ccircle cx='262' cy='86' r='5' stroke-opacity='.45'/%3E %3Cpath d='M238 66a34 34 0 0 1 48 0M226 52a52 52 0 0 1 72 0M214 38a70 70 0 0 1 96 0' stroke-opacity='.2'/%3E %3Crect x='152' y='118' width='70' height='48' rx='7' stroke-opacity='.2'/%3E%3Cpath d='M176 176h22' stroke-opacity='.2'/%3E%3C/g%3E%3C/svg%3E"); }
.art-study { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg stroke='%23fff' stroke-opacity='.1' stroke-width='1'%3E%3Cpath d='M150 36h170'/%3E%3Cpath d='M150 54h170'/%3E%3Cpath d='M150 72h170'/%3E%3Cpath d='M150 90h170'/%3E%3Cpath d='M150 108h170'/%3E%3Cpath d='M150 126h170'/%3E%3Cpath d='M150 144h170'/%3E%3Cpath d='M150 162h170'/%3E%3Cpath d='M150 180h170'/%3E%3C/g%3E %3Cpath d='M172 26v168' stroke='%23fff' stroke-opacity='.2'/%3E %3Cg fill='none' stroke='%23fff' stroke-opacity='.32' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M206 160l78-78 14 14-78 78-18 4z'/%3E%3Cpath d='M272 94l14 14'/%3E%3C/g%3E%3C/svg%3E"); }
.art-business { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg stroke='%23fff' stroke-opacity='.07'%3E%3Cpath d='M150 20v170'/%3E%3Cpath d='M174 20v170'/%3E%3Cpath d='M198 20v170'/%3E%3Cpath d='M222 20v170'/%3E%3Cpath d='M246 20v170'/%3E%3Cpath d='M270 20v170'/%3E%3Cpath d='M294 20v170'/%3E%3Cpath d='M318 20v170'/%3E%3Cpath d='M140 30h180'/%3E%3Cpath d='M140 54h180'/%3E%3Cpath d='M140 78h180'/%3E%3Cpath d='M140 102h180'/%3E%3Cpath d='M140 126h180'/%3E%3Cpath d='M140 150h180'/%3E%3Cpath d='M140 174h180'/%3E%3C/g%3E %3Cpath d='M150 160 190 128 222 140 262 92 300 62v128H150z' fill='%23fff' fill-opacity='.06'/%3E %3Cpath d='M150 160 190 128 222 140 262 92 300 62' fill='none' stroke='%23fff' stroke-opacity='.4' stroke-width='2.4' stroke-linejoin='round'/%3E %3Cg fill='%23fff' fill-opacity='.55'%3E%3Ccircle cx='190' cy='128' r='3'/%3E%3Ccircle cx='262' cy='92' r='3'/%3E%3Ccircle cx='300' cy='62' r='3.5'/%3E%3C/g%3E%3C/svg%3E"); }
.art-cloud { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='%23fff' fill-opacity='.06' stroke='%23fff' stroke-opacity='.25' stroke-width='1.4'%3E %3Cpath d='M206 126a26 26 0 0 1 4-51 34 34 0 0 1 64 8 22 22 0 0 1 4 43z'/%3E %3Cpath d='M262 168a14 14 0 0 1 2-28 18 18 0 0 1 34 4 12 12 0 0 1 2 24z' fill-opacity='.04'/%3E%3C/g%3E %3Cpath d='M170 156a70 70 0 0 1 40-90' fill='none' stroke='%23fff' stroke-opacity='.25' stroke-width='1.6' stroke-dasharray='3 6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.art-shopping { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M214 76h70l8 94h-86z' stroke-opacity='.3' fill='%23fff' fill-opacity='.05'/%3E %3Cpath d='M232 76v-10a17 17 0 0 1 34 0v10' stroke-opacity='.3'/%3E %3Cpath d='M160 60h40l26 26-30 30-36-36z' stroke-opacity='.2'/%3E%3Ccircle cx='176' cy='72' r='4' stroke-opacity='.3'/%3E%3C/g%3E %3Cg fill='%23fff' fill-opacity='.2'%3E%3Ccircle cx='150' cy='186' r='2'/%3E%3Ccircle cx='165' cy='186' r='2'/%3E%3Ccircle cx='180' cy='186' r='2'/%3E%3Ccircle cx='195' cy='186' r='2'/%3E%3Ccircle cx='210' cy='186' r='2'/%3E%3Ccircle cx='225' cy='186' r='2'/%3E%3Ccircle cx='240' cy='186' r='2'/%3E%3Ccircle cx='255' cy='186' r='2'/%3E%3Ccircle cx='270' cy='186' r='2'/%3E%3Ccircle cx='285' cy='186' r='2'/%3E%3Ccircle cx='300' cy='186' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
.art-gaming { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M196 84h92a34 34 0 0 1 32 46l-6 18a18 18 0 0 1-30 6l-14-16h-56l-14 16a18 18 0 0 1-30-6l-6-18a34 34 0 0 1 32-46z' stroke-opacity='.3' fill='%23fff' fill-opacity='.05'/%3E %3Cpath d='M206 104v24M194 116h24' stroke-opacity='.4' stroke-linecap='round'/%3E%3C/g%3E %3Cg fill='%23fff' fill-opacity='.4'%3E%3Ccircle cx='272' cy='108' r='4'/%3E%3Ccircle cx='284' cy='122' r='4'/%3E%3C/g%3E %3Cg fill='%23fff' fill-opacity='.14'%3E%3Crect x='150' y='36' width='10' height='10'/%3E%3Crect x='162' y='36' width='10' height='10'/%3E%3Crect x='162' y='48' width='10' height='10'/%3E%3Crect x='300' y='40' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E"); }
.art-social { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M190 48h80a14 14 0 0 1 14 14v28a14 14 0 0 1-14 14h-50l-16 14v-14h-14a14 14 0 0 1-14-14V62a14 14 0 0 1 14-14z' stroke-opacity='.3' fill='%23fff' fill-opacity='.05'/%3E %3Cpath d='M232 118h62a12 12 0 0 1 12 12v22a12 12 0 0 1-12 12h-6v12l-14-12h-42a12 12 0 0 1-12-12v-22a12 12 0 0 1 12-12z' stroke-opacity='.2'/%3E%3C/g%3E %3Cpath d='M170 160c-8-6-14-11-14-17a7 7 0 0 1 14-2 7 7 0 0 1 14 2c0 6-6 11-14 17z' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E"); }
.art-fitness { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Ccircle cx='278' cy='100' r='60' stroke-opacity='.08'/%3E%3Ccircle cx='278' cy='100' r='40' stroke-opacity='.12'/%3E%3C/g%3E %3Cpath d='M140 112h48l14-34 16 62 14-46 10 18h78' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.art-reading { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M245 66c-20-12-50-14-80-8v96c30-6 60-4 80 8 20-12 50-14 80-8V58c-30-6-60-4-80 8z' stroke-opacity='.3' fill='%23fff' fill-opacity='.04'/%3E %3Cpath d='M245 66v96' stroke-opacity='.3'/%3E%3C/g%3E %3Cg stroke='%23fff' stroke-opacity='.15'%3E%3Cpath d='M180 84h50M260 84h50'/%3E%3Cpath d='M180 96h50M260 96h50'/%3E%3Cpath d='M180 108h50M260 108h50'/%3E%3Cpath d='M180 120h50M260 120h50'/%3E%3Cpath d='M180 132h50M260 132h50'/%3E%3C/g%3E%3C/svg%3E"); }
.art-security { --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1.2'%3E%3Cpath d='M170 40l13 7.5v15L170 70l-13-7.5v-15z'/%3E%3Cpath d='M200 40l13 7.5v15L200 70l-13-7.5v-15z'/%3E%3Cpath d='M185 66l13 7.5v15L185 96l-13-7.5v-15z'/%3E%3Cpath d='M215 66l13 7.5v15L215 96l-13-7.5v-15z'/%3E%3Cpath d='M170 92l13 7.5v15L170 122l-13-7.5v-15z'/%3E%3Cpath d='M300 150l13 7.5v15L300 180l-13-7.5v-15z'/%3E%3Cpath d='M285 176l13 7.5v15L285 206l-13-7.5v-15z'/%3E%3C/g%3E %3Cpath d='M262 46l40 14v32c0 28-18 46-40 56-22-10-40-28-40-56V60z' fill='%23fff' fill-opacity='.05' stroke='%23fff' stroke-opacity='.32' stroke-width='1.6'/%3E %3Cg fill='%23fff' fill-opacity='.4'%3E%3Ccircle cx='262' cy='92' r='7'/%3E%3Crect x='259' y='96' width='6' height='16' rx='2'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---- The top: the carousel, and TrackBot's panel beside it ---- */
.deals-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  margin-bottom: 20px;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

/* "cqi" below = 1% of the carousel's width, so the slides scale with it */
.deal-hero {
  position: relative;
  min-height: 342px;
  padding: 0;                    /* not the padding every <section> gets */
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  border-radius: 24px;
  border: 1px solid rgba(255, 90, 100, 0.22);
  background: #16070b;
  box-shadow: 0 30px 70px -40px rgba(230, 57, 70, 0.7);
}

.hero-slides {
  display: grid;
  min-height: inherit;
}

/* Every slide sits in the same spot; only the "active" one shows (it fades in) */
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 342px;
  padding: 26px 40px 52px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}

/* Slide 1: deep red, brighter on the right, with streaks of light */
.hero-slide.intro {
  background:
    radial-gradient(55% 80% at 72% 38%, rgba(255, 50, 70, 0.55), transparent 70%),
    radial-gradient(40% 70% at 100% 100%, rgba(140, 10, 25, 0.9), transparent 70%),
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(255, 120, 130, 0.035) 46px 48px),
    linear-gradient(115deg, #1a070b 0%, #3d0b13 42%, #9c1323 78%, #5c0a15 100%);
}

/* A featured deal: the app's colour, its drawing on the right, dark on the left for the text */
.hero-slide.deal {
  background:
    linear-gradient(90deg, rgba(12, 8, 10, 0.92) 0%, rgba(12, 8, 10, 0.55) 48%, transparent 80%),
    var(--art, none) right 4% center / auto 92% no-repeat,
    radial-gradient(60% 90% at 78% 45%, color-mix(in srgb, var(--brand) 70%, transparent), transparent 72%),
    linear-gradient(115deg, #120a0c 0%, color-mix(in srgb, var(--brand) 45%, #120a0c) 100%);
}

/* Real artwork, when there is some (deals.js "heroPhoto" / "artPhotos") */
.hero-slide.has-photo {
  background:
    linear-gradient(90deg, rgba(12, 8, 10, 0.94) 0%, rgba(12, 8, 10, 0.6) 46%, rgba(12, 8, 10, 0.1) 80%),
    var(--photo) center / cover no-repeat;
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  perspective: 900px;
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(480px, 57%);
}

.hero-copy h2 {
  margin: 0;
  font-size: clamp(1.9rem, 5.8cqi, 3.1rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-copy h2 span {
  background: linear-gradient(90deg, #ff5a68, #ffb3ba);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-slide.deal .hero-copy {
  gap: 9px;
}

.hero-slide.deal h2 {
  font-size: clamp(1.5rem, 4.2cqi, 2.3rem);
}

.hero-text {
  margin: 0;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.9rem, 1.9cqi, 1.02rem);
  line-height: 1.45;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.hero-primary {
  min-width: 170px;
  padding: 13px 24px;
  background: linear-gradient(180deg, #ff4d5c, #e02536);
  box-shadow: 0 14px 30px -12px rgba(255, 40, 60, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hero-primary:hover,
.match-add:hover,
.da-view:hover {
  background: linear-gradient(180deg, #ff6370, #ea3445);
}

.hero-ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px 11px 14px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 90, 100, 0.55);
  background: rgba(20, 6, 10, 0.55);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.15s;
}

.hero-ask:hover {
  background: rgba(60, 10, 18, 0.7);
}

.hero-ask img {
  width: 26px;
  height: 26px;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  gap: 18px;
  width: min(490px, 64cqi);      /* a little wider than the words above, under the tiles */
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
}

.hero-points li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 160px;
  line-height: 1.3;
}

.hero-point-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 110, 120, 0.35), rgba(120, 10, 25, 0.55));
  border: 1px solid rgba(255, 110, 120, 0.3);
  color: #ff8a93;
}

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

/* ---- The art on slide 1: a glow, a swoosh of light, sparkles and floating app tiles ---- */
.hero-orb {
  position: absolute;
  top: 50%;
  right: 6%;
  width: 46cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: 0 -50%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 110, 120, 0.4), rgba(230, 57, 70, 0.14) 45%, transparent 70%);
  filter: blur(4px);
}

.hero-swoosh {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(255, 80, 95, 0.8));
}

.hero-spark {
  position: absolute;
  width: 12px;
  aspect-ratio: 1;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0.75;
  animation: hero-twinkle 3.5s ease-in-out infinite alternate;
}

.hero-spark.s1 { left: 52%; top: 18%; }
.hero-spark.s2 { left: 93%; top: 30%; width: 8px; animation-delay: -1s; }
.hero-spark.s3 { left: 58%; top: 78%; width: 9px; animation-delay: -2s; }
.hero-spark.s4 { left: 88%; top: 82%; width: 7px; animation-delay: -0.5s; }

@keyframes hero-twinkle {
  from { opacity: 0.2; scale: 0.7; }
  to   { opacity: 0.9; scale: 1; }
}

/* A glossy app tile (the same look as the small icons, but big) */
.hero-tile,
.hero-big-tile {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--size);
  aspect-ratio: 1;
  overflow: hidden;
  container-type: size;        /* letter logos (e.g. "D+") size themselves to the tile */
  border-radius: 24%;
  background:
    radial-gradient(120% 90% at 25% 0%, color-mix(in srgb, var(--brand, #e63946), white 30%), transparent 58%),
    linear-gradient(160deg, var(--brand, #e63946), color-mix(in srgb, var(--brand, #e63946) 55%, #050507));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -10px 20px -8px rgba(0, 0, 0, 0.4),
    0 26px 50px -18px rgba(0, 0, 0, 0.85),
    0 0 44px -12px color-mix(in srgb, var(--brand, #e63946) 85%, transparent);
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg)) rotate(var(--r, 0deg));
  animation: tile-float 6s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

.hero-tile::after,
.hero-big-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 42%);
  pointer-events: none;
}

.hero-tile .app-logo,
.hero-big-tile .app-logo {
  width: 54%;
  height: 54%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

/* Where each tile floats, how big, how tilted (the far ones are blurred, for depth) */
.hero-tile.t1 { --size: 15cqi; left: 60%; top: 17%; --r: -10deg; --delay: -1s; }
.hero-tile.t2 { --size: 8cqi;  left: 56%; top: 3%;  --r: 12deg;  --delay: -2s; filter: blur(1px) brightness(0.8); }
.hero-tile.t3 { --size: 15cqi; left: 80%; top: 7%;  --r: 10deg;  --delay: -3s; }
.hero-tile.t4 { --size: 13cqi; left: 73%; top: 42%; --r: -14deg; --delay: -4s; }
.hero-tile.t5 { --size: 10cqi; left: 89%; top: 42%; --r: 6deg;   --delay: -2.5s; }
.hero-tile.t6 { --size: 8cqi;  left: 72%; top: 76%; --r: 8deg;   --delay: -1.5s; filter: blur(1.2px) brightness(0.75); }
.hero-tile.t7 { --size: 10cqi; left: 85%; top: 70%; --r: -16deg; --delay: -3.5s; filter: blur(0.6px) brightness(0.85); }

@keyframes tile-float {
  from { translate: 0 6px; }
  to   { translate: 0 -10px; }
}

/* A featured deal: the app's tile, big and tilted, with the saving beside it */
.hero-big-tile {
  --size: 24cqi;
  top: 50%;
  right: 12%;
  margin-top: calc(var(--size) / -2);
  --r: -8deg;
}

.hero-save {
  position: absolute;
  top: 22%;
  right: 6%;
  padding: 8px 14px;
  border-radius: var(--pill);
  background: rgba(10, 30, 16, 0.75);
  border: 1px solid rgba(30, 215, 96, 0.5);
  color: var(--save);
  font-size: clamp(0.8rem, 2cqi, 1rem);
  font-weight: 800;
  backdrop-filter: blur(6px);
  rotate: 6deg;
}

.hero-kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: rgba(230, 57, 70, 0.2);
  border: 1px solid rgba(255, 90, 100, 0.4);
  color: #ff9aa2;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-kicker svg {
  width: 14px;
  height: 14px;
}

.hero-price b {
  font-size: 1.7rem;
}

.hero-check {
  margin: -4px 0 0;
  color: var(--save);
  font-size: 0.8rem;
  font-weight: 700;
}

.hero-check.unconfirmed {
  color: var(--warn);
}

/* ‹ • • • › at the bottom of the carousel */
.hero-controls {
  position: absolute;
  left: 40px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-arrow {
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  font-size: 1.2rem;
  line-height: 1;
  backdrop-filter: blur(6px);
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.16);
}

.hero-dots {
  display: flex;
  gap: 6px;
}

/* Each dot is a 24px button (easy to tap), drawn as a small pill */
.hero-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  display: grid;
  place-items: center;
}

.hero-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.3s var(--ease), background 0.3s;
}

.hero-dot:hover {
  background: none;
}

.hero-dot[aria-current="true"]::before {
  width: 22px;
  background: #fff;
}

/* ---- TrackBot's deal panel ---- */
.deal-assistant {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255, 70, 85, 0.45);
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(230, 57, 70, 0.28), transparent 70%),
    linear-gradient(180deg, #24090e, #12080b);
  box-shadow: 0 30px 70px -45px rgba(230, 57, 70, 0.9);
}

.da-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.da-head img {
  width: 32px;
  height: 32px;
}

.da-head strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  line-height: 1.2;
}

.da-head .hint {
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
}

.tag-beta {
  background: rgba(230, 57, 70, 0.2);
  color: #ff8a93;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.da-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 90, 100, 0.22);
  background: rgba(40, 8, 14, 0.6);
}

.da-save-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.da-bot {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  filter: drop-shadow(0 6px 14px rgba(230, 57, 70, 0.6));
}

.da-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
}

.da-save {
  display: block;
  color: #ff5a68;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.da-save small {
  font-size: 1.2rem;
}

.da-found {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  line-height: 1.25;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.da-found:hover {
  background: rgba(255, 255, 255, 0.06);
}

.da-found-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.da-found-icon svg {
  width: 17px;
  height: 17px;
}

.da-found-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.da-found-text strong,
.da-found-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.da-found-text strong {
  font-size: 0.84rem;
}

.da-found-text span {
  color: var(--muted);
  font-size: 0.7rem;
}

.da-view {
  width: 100%;
  padding: 7px 16px;
  background: linear-gradient(180deg, #ff4d5c, #e02536);
}

.da-questions {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.da-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 4px;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  line-height: 1.3;
  font-weight: 600;
  text-align: left;
}

.da-question:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.da-question > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.da-q-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.da-q-icon svg {
  width: 13px;
  height: 13px;
}

.da-go {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

/* ---- The bar under the top: chips that jump to a section, and the search box ----
   It sticks under the top bar as you scroll. */
.deals-toolbar {
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 -8px 8px;
  padding: 6px 8px;
  border-radius: 18px;
  background: rgba(14, 10, 14, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.deal-tabs {
  min-width: 0;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  overflow-x: auto;
  scrollbar-width: none;
}

.deal-tabs::-webkit-scrollbar {
  display: none;
}

.deal-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  font-weight: 600;
}

.deal-tab .chip-icon {
  width: 16px;
  height: 16px;
}

.deal-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.deal-tab[aria-pressed="true"] {
  border-color: rgba(255, 70, 85, 0.75);
  background: linear-gradient(180deg, rgba(230, 57, 70, 0.3), rgba(230, 57, 70, 0.12));
  color: var(--text);
  font-weight: 700;
}

.deal-tab[aria-pressed="true"] .chip-icon {
  color: #ff6b75;
}

.deals-search {
  flex: 0 1 290px;
  margin-left: auto;
}

.deals-search input {
  padding: 10px 16px 10px 42px;
  border-radius: var(--pill);
  background-position: 14px center;
  font-size: 0.88rem;
}

/* ---- The sections ---- */
.deal-shelves {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* "content-visibility: auto" = the browser doesn't draw sections that are far
   off screen, which keeps scrolling smooth with 90+ apps */
.deal-shelf {
  min-width: 0;
  padding: 0;                    /* no box around a section, just its cards */
  border: none;
  border-radius: 0;
  background: none;
  scroll-margin-top: calc(var(--topbar-h) + 72px);
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
  container-type: inline-size;   /* card widths below follow the section's width */
}

.deal-shelf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.deal-shelf-title {
  min-width: 0;
}

.deal-shelf-head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.deal-shelf-head .hint {
  margin: 2px 0 0;
  font-size: 0.84rem;
}

.deal-shelf-tools {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.see-all-button {
  padding: 6px 8px;
  background: none;
  color: #ff5a68;
  font-size: 0.86rem;
  font-weight: 700;
}

.see-all-button:hover {
  background: rgba(230, 57, 70, 0.12);
}

.deal-shelf .shelf-arrow {
  width: 34px;
  height: 34px;
  font-size: 1.3rem;
}

.personalise-button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 90, 100, 0.35);
  background: rgba(230, 57, 70, 0.1);
  color: #ffb3ba;
  font-size: 0.8rem;
}

.personalise-button:hover {
  background: rgba(230, 57, 70, 0.2);
}

/* The strip: cards side by side, scroll (or swipe) sideways, snapping to each card.
   The padding leaves room for the hover lift, so it isn't cut off. */
.deal-track {
  --gap: 14px;
  --per-row: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-row) - 1) * var(--gap)) / var(--per-row));
  gap: var(--gap);
  padding: 4px 0 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 18px;
}

.deal-track::-webkit-scrollbar {
  display: none;
}

.deal-track > * {
  scroll-snap-align: start;
}

.deal-track:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.deal-shelf.match .deal-track   { --per-row: 4; --gap: 14px; }
.deal-shelf.compare .deal-track { --per-row: 6; --gap: 12px; }
.deal-shelf.mini .deal-track    { --per-row: 4; --gap: 8px; }
.deal-shelf.poster .deal-track  { --per-row: 5; --gap: 14px; }

/* "View all": the strip opens up into a grid */
.deal-shelf.open .deal-track {
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--per-row), minmax(0, 1fr));
  overflow: visible;
}

/* Student-only offers + Free plans: side by side */
.deal-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}

/* ---- Every card with artwork: the app's colour, its themed drawing at the top right,
   the logo as a big faint watermark, and a dark overlay so the text stays readable ---- */
.match-card,
.compare-card,
.deal-card,
.library-card {
  --brand: #e63946;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, rgba(255, 255, 255, 0.09));
  --card-bg:
    linear-gradient(180deg, rgba(12, 10, 12, 0.05) 0%, rgba(12, 10, 12, 0.72) 78%),
    var(--art, none) right -18px top -10px / 78% auto no-repeat,
    radial-gradient(110% 95% at 92% 0%, color-mix(in srgb, var(--brand) 62%, transparent), transparent 68%),
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 26%, #141114), #0f0d10 80%);
  background: var(--card-bg);
  color: var(--text);
  transition: transform 0.25s var(--ease), border-color 0.2s, box-shadow 0.25s;
}

.match-card:hover,
.compare-card:hover,
.deal-card:hover,
.library-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 60%, rgba(255, 255, 255, 0.14));
  background: var(--card-bg);   /* not the red of a normal button */
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--brand) 80%, transparent);
}

/* Real artwork (deals.js "artPhotos"): the picture, with the same dark overlay */
.match-card.has-photo,
.compare-card.has-photo,
.deal-card.has-photo,
.library-card.has-photo {
  --card-bg:
    linear-gradient(180deg, rgba(10, 8, 10, 0.1) 0%, rgba(10, 8, 10, 0.35) 45%, rgba(10, 8, 10, 0.85) 85%),
    linear-gradient(90deg, rgba(10, 8, 10, 0.55) 0%, transparent 60%),
    radial-gradient(90% 90% at 85% 10%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%),
    var(--photo) right center / cover no-repeat;
}

.card-mark {
  position: absolute;
  right: -10%;
  bottom: -22%;
  z-index: -1;
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  container-type: size;
  opacity: 0.07;
  rotate: -14deg;
  pointer-events: none;
}

.card-mark .app-logo {
  width: 100%;
  height: 100%;
}

/* ⚠ = some of this app's prices aren't confirmed yet */
.price-flag {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: var(--warn);
  font-size: 0.75rem;
  cursor: help;
}

/* Prices on every card */
.deal-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 0;
}

.deal-price b {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.deal-price small {
  margin-left: -4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 600;
}

.deal-price s {
  color: var(--muted);
  font-size: 0.74rem;
}

.deal-price s:empty,
.deal-price small:empty {
  display: none;
}

.deal-card.plain .deal-price b,
.compare-card.plain .deal-price b {
  font-size: 0.95rem;
}

.deal-save {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: rgba(30, 215, 96, 0.14);
  color: var(--save);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.deal-glyph {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(160deg, #e63946, #8f1621);
  color: #fff;
}

.deal-glyph svg {
  width: 55%;
  height: 55%;
}

/* ---- Best matches: big cards ---- */
.match-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 182px;
  padding: 12px 14px;
}

.match-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.66rem;
  font-weight: 800;
  backdrop-filter: blur(6px);
}

.match-badge.best   { border: 1px solid rgba(255, 207, 92, 0.5);  color: #ffd87a; }
.match-badge.high,
.match-badge.value  { border: 1px solid rgba(30, 215, 96, 0.45);  color: #5dea92; }
.match-badge.picked { border: 1px solid rgba(190, 140, 255, 0.5); color: #d4b5ff; }

.match-head {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.match-head:hover {
  background: none;
}

.match-head:active {
  transform: none;
}

.match-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 18px;            /* under the badge */
}

.match-name strong {
  font-size: 0.98rem;
}

.match-name span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.match-card .deal-price {
  margin-top: 2px;
}

.match-card .deal-price b {
  font-size: 1.3rem;
  line-height: 1.15;
}

.match-add {
  width: 100%;
  margin-top: auto;
  padding: 6px 14px;
  background: linear-gradient(180deg, #ff4d5c, #e02536);
  font-size: 0.84rem;
}

.match-reason {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-reason span:first-child {
  color: #ff5a68;
}

.match-reason span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Compare alternatives ---- */
.compare-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 146px;
  padding: 12px;
}

.compare-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compare-top .app-icon,
.compare-top .deal-glyph {
  width: 40px;
  height: 40px;
}

.compare-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.compare-name strong {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-name span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-card .deal-price {
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}

.compare-card .deal-price b {
  font-size: 1.08rem;
}

.compare-card .deal-save {
  margin-left: auto;
  font-size: 0.64rem;
}

.compare-card .deal-price s {
  display: none;               /* not enough room: the "Save" tag says it */
}

.compare-button {
  width: 100%;
  margin-top: auto;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.84rem;
}

.compare-button:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* The first card: the group, with three of its apps fanned out */
.compare-card.lead {
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  border-color: rgba(255, 70, 85, 0.6);
  --card-bg:
    radial-gradient(100% 80% at 50% 0%, rgba(230, 57, 70, 0.35), transparent 70%),
    linear-gradient(180deg, #2a0b11, #160a0d);
  text-align: center;
}

.compare-card.lead strong {
  font-size: 0.92rem;
}

.compare-card.lead .hint {
  font-size: 0.72rem;
}

.lead-stack {
  display: flex;
  justify-content: center;
  margin: auto 0 6px;
}

.lead-stack .app-icon {
  width: 40px;
  height: 40px;
  margin: 0 -5px;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.lead-stack .app-icon:nth-child(1) { transform: rotate(-12deg) translateY(4px); }
.lead-stack .app-icon:nth-child(2) { z-index: 1; transform: translateY(-4px) scale(1.1); }
.lead-stack .app-icon:nth-child(3) { transform: rotate(12deg) translateY(4px); }

.compare-lead-button {
  width: 100%;
  margin-top: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 90, 100, 0.7);
  background: rgba(230, 57, 70, 0.3);
  font-size: 0.84rem;
}

.compare-lead-button:hover {
  background: rgba(230, 57, 70, 0.5);
}

/* ---- The other cards: the whole card is a button (or a link, for uni perks) ---- */
.deal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.deal-card:active {
  transform: scale(0.98);
}

.deal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.deal-icon {
  display: contents;
}

.deal-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.deal-name {
  font-size: 0.92rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.deal-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.deal-card .deal-price {
  margin-top: auto;
}

.deal-go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background 0.15s;
}

.deal-go svg {
  width: 16px;
  height: 16px;
}

.deal-card:hover .deal-go {
  background: var(--accent);
}

.deal-card .price-flag {
  right: 50px;
  bottom: 18px;
}

/* Small cards (Student-only offers, Free plans): no artwork, just the brand glow */
.deal-card.mini {
  min-height: 96px;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  --card-bg:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 65%),
    linear-gradient(160deg, #19151a, #121014);
}

.deal-card.mini .deal-head {
  gap: 8px;
}

.deal-card.mini .app-icon,
.deal-card.mini .deal-glyph {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.deal-card.mini .deal-name {
  font-size: 0.76rem;
}

.deal-card.mini .deal-sub {
  font-size: 0.66rem;
  -webkit-line-clamp: 1;
}

.deal-card.mini .deal-price {
  flex-wrap: nowrap;
  margin-top: auto;
  white-space: nowrap;
}

.deal-card.mini .deal-price b {
  font-size: 0.92rem;
}

/* "Save 50%" and the crossed-out price, side by side */
.mini-save {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mini-save s {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-save s:empty {
  display: none;
}

.deal-card.mini .deal-price small {
  font-size: 0.68rem;
}

.deal-card.mini .deal-price s {
  font-size: 0.64rem;
}

.deal-card.mini .deal-save {
  font-size: 0.64rem;
}

.deal-card.mini .deal-go {
  display: none;
}

.deal-card.mini .price-flag {
  right: 8px;
  bottom: 6px;
}

/* ---- Explore all subscriptions: the filters ---- */
.explore-filters {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.explore-filters::-webkit-scrollbar {
  display: none;
}

.explore-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 600;
}

.explore-pill small {
  padding: 0 6px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.68rem;
}

.explore-pill:hover {
  background: rgba(255, 255, 255, 0.08);
}

.explore-pill[aria-pressed="true"] {
  border-color: rgba(255, 70, 85, 0.75);
  background: rgba(230, 57, 70, 0.18);
  color: var(--text);
}

/* ---- The library: "Browse the library", then a row per kind of app ---- */
.library-head {
  margin-top: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.library-head h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

.library-head .hint {
  margin: 4px 0 12px;
}

/* A tall card, like a show on a streaming app */
.library-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  aspect-ratio: 3 / 4;
  padding: 14px;
  border-radius: 18px;
  container-type: inline-size;   /* "cqi" below = 1% of the card's width */
  font-weight: 600;
  text-align: left;
}

.library-card:active {
  transform: scale(0.98);
}

/* Portrait cards: the picture's subject (on its right) stays in view */
.library-card.has-photo {
  background-position: 0 0, 72% center;
}

.library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 18px;
}

.library-tag {
  padding: 3px 9px;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.7rem;
  font-weight: 800;
  backdrop-filter: blur(6px);
}

.library-tag.yours   { color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.library-tag.student { color: #5dea92; border: 1px solid rgba(30, 215, 96, 0.45); }
.library-tag.free    { color: #8fd3ff; border: 1px solid rgba(76, 194, 255, 0.45); }

/* The logo, big and white in the middle, with a glow in the app's colour behind it */
.library-logo {
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  width: 60cqi;
  height: 42cqi;
  margin: auto 0;
  container-type: size;          /* letter logos (e.g. "D+") size themselves to this box */
}

.library-logo::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 55%, transparent), transparent);
  filter: blur(6px);
}

.library-logo .app-logo {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.75));
  transition: transform 0.3s var(--ease);
}

.library-logo .logo-letters {
  font-size: 62cqmin;
}

.library-card:hover .library-logo .app-logo {
  transform: scale(1.06);
}

.library-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.library-text strong {
  font-size: 1rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-text span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-card .price-flag {
  top: 8px;
  right: 9px;
  bottom: auto;
}

/* ---- While searching: every matching app, in a grid ---- */
.deals-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* ---- "What are you into?" ---- */
.interests-dialog {
  width: min(560px, 94vw);
}

.interests-inner {
  padding: 24px;
}

.interests-inner h2 {
  margin: 0 0 4px;
}

.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 20px;
}

.interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-weight: 700;
}

.interest-chip:hover {
  background: rgba(255, 255, 255, 0.08);
}

.interest-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(230, 57, 70, 0.18);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* =========================================================
   Narrower pages, tablets and phones
   ========================================================= */

/* Fewer cards per strip as a section gets narrower */
@container (max-width: 1000px) {
  .deal-shelf.poster .deal-track  { --per-row: 4; }
  .deal-shelf.match .deal-track   { --per-row: 3; }
  .deal-shelf.compare .deal-track { --per-row: 4; }
  .deal-track                     { --per-row: 4; }
}

@container (max-width: 700px) {
  .deal-shelf.poster .deal-track  { --per-row: 3; }
  .deal-shelf.match .deal-track   { --per-row: 2; }
  .deal-shelf.compare .deal-track { --per-row: 3; }
  .deal-track                     { --per-row: 3; }
}

@container (max-width: 520px) {
  .deal-shelf.mini .deal-track    { --per-row: 3; }
}

/* Not wide enough for both side by side: TrackBot's panel goes under the carousel,
   its card on the left and the questions on the right */
@container page (max-width: 980px) {
  .deals-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .deal-assistant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 20px;
    align-items: start;
  }

  .da-head {
    grid-column: 1 / -1;
  }
}

@container page (max-width: 820px) {
  .deal-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The search goes under the chips */
  .deals-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .deals-search {
    flex: none;
    margin-left: 0;
  }
}

@container page (max-width: 560px) {
  .deal-assistant {
    display: flex;
    align-items: stretch;
  }
}

/* A narrower carousel (small laptops, tablets): fewer tiles, then no room for the three points */
@container (max-width: 780px) {
  .hero-tile.t6 {
    display: none;
  }
}

@container (max-width: 640px) {
  .hero-copy {
    max-width: 60%;
  }

  .hero-primary {
    min-width: 0;
  }

  .hero-points {
    display: none;
  }
}

/* Phones */
@media (max-width: 700px) {
  .deal-hero,
  .hero-slide {
    min-height: 440px;
  }

  /* The words on top, the art underneath */
  .hero-slide {
    align-items: flex-start;
    padding: 26px 20px 60px;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-copy h2 {
    font-size: 2.15rem;
  }

  .hero-slide.deal h2 {
    font-size: 1.6rem;
  }

  .hero-points {
    display: none;             /* no room: the tiles take this space */
  }

  /* The two buttons share one row */
  .hero-buttons {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .hero-buttons > * {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding: 11px 10px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .hero-ask img {
    width: 22px;
    height: 22px;
  }

  /* A featured deal has one button: it keeps its own width, clear of the tile */
  .hero-slide.deal .hero-buttons > * {
    flex: 0 1 auto;
    padding: 11px 22px;
  }

  .hero-orb {
    top: auto;
    bottom: -10%;
    right: 10%;
    width: 80cqi;
    translate: none;
  }

  .hero-swoosh {
    width: 100%;
    height: 45%;
  }

  .hero-tile.t1 { --size: 22cqi; left: 6%;  top: 64%; }
  .hero-tile.t2 { --size: 13cqi; left: 32%; top: 60%; }
  .hero-tile.t3 { --size: 24cqi; left: 46%; top: 66%; }
  .hero-tile.t4 { --size: 18cqi; left: 76%; top: 60%; }
  .hero-tile.t5,
  .hero-tile.t6,
  .hero-tile.t7 {
    display: none;
  }

  .hero-slide.deal {
    background:
      linear-gradient(180deg, rgba(12, 8, 10, 0.92) 0%, rgba(12, 8, 10, 0.5) 55%, transparent 85%),
      var(--art, none) right -20px bottom 0 / auto 50% no-repeat,
      radial-gradient(70% 60% at 70% 85%, color-mix(in srgb, var(--brand) 70%, transparent), transparent 72%),
      linear-gradient(180deg, #120a0c 0%, color-mix(in srgb, var(--brand) 45%, #120a0c) 100%);
  }

  .hero-big-tile {
    --size: 30cqi;
    top: auto;
    bottom: 56px;
    right: 12%;
    margin: 0;
  }

  .hero-save {
    top: auto;
    bottom: 90px;
    right: auto;
    left: 20px;
  }

  .hero-controls {
    left: 20px;
  }

  /* The chips and search scroll away with the page (no room to keep them on screen) */
  .deals-toolbar {
    position: static;
  }

  /* Section titles get the full width; their buttons go on a line underneath */
  .deal-shelf-head {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .deal-shelf-tools {
    justify-content: flex-start;
  }

  /* Library rows stay compact: "View all" beside the title, like a streaming app */
  .deal-shelf.poster .deal-shelf-head {
    flex-direction: row;
    align-items: flex-end;
  }

  .deal-shelf.poster .deal-shelf-head .hint {
    font-size: 0.78rem;
  }



  .deal-shelf-tools .shelf-arrows {
    display: none;             /* swipe instead */
  }

  /* One card and a peek of the next */
  .deal-track                     { grid-auto-columns: 70%; }
  .deal-shelf.match .deal-track   { grid-auto-columns: 84%; }
  .deal-shelf.compare .deal-track { grid-auto-columns: 46%; }
  .deal-shelf.mini .deal-track    { grid-auto-columns: 46%; }
  .deal-shelf.poster .deal-track  { grid-auto-columns: 46%; }

  .deal-shelf.open .deal-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deal-shelf.match.open .deal-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .deal-shelf.poster.open .deal-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Less motion: no floating, twinkling or fading */
@media (prefers-reduced-motion: reduce) {
  .hero-tile,
  .hero-big-tile,
  .hero-spark {
    animation: none;
  }

  .hero-slide,
  .hero-slide.active {
    transition: none;
  }

  .match-card,
  .compare-card,
  .deal-card,
  .library-card {
    transition: none;
  }
}


/* =========================================================
   HOME (home.js, discovery.js): the control centre.
   The hero (what you spend, your apps fanned out, TrackBot insights),
   four numbers, upcoming payments + deals side by side, then your list.
   ========================================================= */

#page-home {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#page-home[hidden] {
  display: none;
}

/* The welcome note is only for empty lists (home.js adds "has-subs") */
.intro.has-subs {
  display: none;
}

/* ---- The hero: black to crimson, with soft light ---- */
.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.75fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: 18px;
  min-height: 296px;
  padding: 18px 18px 18px 30px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  border: 1px solid rgba(255, 70, 85, 0.5);
  background:
    radial-gradient(60% 120% at 62% 50%, rgba(230, 40, 60, 0.42), transparent 70%),
    radial-gradient(50% 90% at 0% 100%, rgba(120, 10, 25, 0.5), transparent 70%),
    linear-gradient(110deg, #1a070b 0%, #3a0a12 45%, #6e0d19 75%, #2a070c 100%);
  box-shadow: 0 30px 80px -50px rgba(230, 57, 70, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hh-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.hh-greeting {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.hh-title {
  display: flex;
  flex-direction: column;
  margin: 0 0 4px;
  font-size: clamp(2rem, 3.3vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hh-amount strong {
  color: #ff4f5e;
  font-weight: 800;
}

.hh-amount small {
  color: #ff8a93;
  font-size: 1em;
  font-weight: 800;
}

.home-hero.empty .hh-amount strong,
.home-hero.empty .hh-amount small {
  display: none;
}


.hh-line {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  line-height: 1.45;
}

.hh-line strong {
  color: #fff;
}

.hh-line .hh-save {
  color: var(--save);
}

.hh-line .info-toggle {
  padding: 0 4px;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.home-hero .total-info {
  margin: 0;
  max-width: 46ch;
  font-size: 0.82rem;
}

.hh-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.hh-primary,
.hh-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--pill);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}

.hh-primary {
  background: linear-gradient(180deg, #ff4d5c, #e02536);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(255, 40, 60, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hh-primary:hover {
  background: linear-gradient(180deg, #ff6370, #ea3445);
}

.hh-secondary {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
}

.hh-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hh-primary .icon,
.hh-secondary .icon {
  width: 18px;
  height: 18px;
}

.hh-saved {
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--save-soft);
  color: var(--save);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Your apps, fanned out like cards: the front one big and straight, the rest tilted behind */
.hh-fan {
  position: relative;
  align-self: stretch;
  min-height: 200px;
}

.hh-fan .hh-tile {
  --size: 128px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 30px;
  transform:
    translate(calc(-50% - var(--n) * 26px), calc(-50% + var(--n) * 4px))
    rotate(calc(var(--n) * -9deg));
  filter: brightness(calc(1 - var(--n) * 0.12));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -12px 22px -10px rgba(0, 0, 0, 0.4),
    0 26px 50px -16px rgba(0, 0, 0, 0.85);
}

.hh-fan .hh-tile .app-logo {
  width: 52%;
  height: 52%;
}

/* ---- TrackBot insights ---- */
.insights {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 6, 8, 0.72);
  backdrop-filter: blur(10px);
}

.insights-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 4px;
}

.insights-head img {
  width: 34px;
  height: 34px;
}

.insights-head div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.insights-head strong {
  font-size: 1.05rem;
}

.insights-head .hint {
  font-size: 0.8rem;
}

.insights-all {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  font-size: 0.8rem;
}

.insights-all:hover {
  background: rgba(255, 255, 255, 0.08);
}

.insight-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insight {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.insight:hover {
  background: rgba(255, 255, 255, 0.08);
}

.insight-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #fff;
}

.insight-icon .icon {
  width: 20px;
  height: 20px;
}

.insight.save .insight-icon { background: linear-gradient(160deg, #22b35e, #11753a); }
.insight.pay .insight-icon  { background: linear-gradient(160deg, #ef3b4b, #a8121f); }
.insight.perk .insight-icon { background: linear-gradient(160deg, #3b8eea, #1d5bb0); }
.insight.time .insight-icon { background: linear-gradient(160deg, #e0a030, #9a6410); }

.insight-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.insight-text strong {
  font-size: 0.86rem;
}

.insight-text span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-go {
  color: var(--muted);
  font-size: 1.2rem;
}

.insight-empty {
  padding: 18px 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
}

/* ---- The four numbers ---- */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 90px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, #19151a, #121014);
  color: var(--text);
  font-weight: 500;
  text-align: left;
  transition: border-color 0.2s, transform 0.2s var(--ease), background 0.2s;
}

.home-stat:hover {
  border-color: rgba(255, 70, 85, 0.4);
  background: linear-gradient(160deg, #1f171c, #141015);
  transform: translateY(-2px);
}

.home-stat:active {
  transform: scale(0.99);
}

.home-stat-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(230, 57, 70, 0.16);
  border: 1px solid rgba(255, 70, 85, 0.25);
  color: #ff5a68;
}

.home-stat-icon .icon {
  width: 24px;
  height: 24px;
}

.home-stat-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-stat-label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
}

.home-stat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.home-stat-value {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.home-stat-note {
  color: var(--muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#active-note { color: var(--save); }
#see-savings .home-stat-value { color: #fff; }
#due-soon.urgent .home-stat-value { color: #ff5a68; }

.home-stat-go {
  color: var(--muted);
  font-size: 1.4rem;
}

/* ---- Cards: upcoming payments, deals, your list ---- */
.home-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: start;
}

.home-card {
  min-width: 0;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, #17131a, #110f12);
}

.home-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.home-card-head > div:first-of-type {
  flex: 1;
  min-width: 0;
}

.home-card-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.home-card-head .hint {
  margin: 2px 0 0;
  font-size: 0.82rem;
}

.home-card-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(230, 57, 70, 0.16);
  color: #ff5a68;
}

.home-card-icon .icon {
  width: 21px;
  height: 21px;
}

.home-see-all {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.home-see-all:hover {
  background: rgba(255, 255, 255, 0.08);
}

.home-empty {
  margin: 0;
  padding: 26px 10px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Upcoming payments: one row each */
.pay-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pay-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-weight: 500;
  text-align: left;
}

.pay-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

.pay-row .app-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.pay-name,
.pay-when {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pay-name strong {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-name span,
.pay-when span {
  color: var(--muted);
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-when strong {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
}

.pay-row.soon .pay-when strong { color: var(--warn); }
.pay-row.urgent .pay-when strong { color: #ff5a68; }

.pay-amount {
  font-weight: 800;
  white-space: nowrap;
}

.pay-go {
  color: var(--muted);
  font-size: 1.2rem;
}

/* Because you already pay for these: three cards */
.home-deal-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-deal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, rgba(255, 255, 255, 0.07));
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 65%),
    rgba(255, 255, 255, 0.03);
}

.home-deal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.home-deal-top .app-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.home-deal-save {
  padding: 3px 8px;
  border-radius: var(--pill);
  background: rgba(30, 215, 96, 0.14);
  color: var(--save);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.home-deal-kind {
  color: #ff5a68;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-deal-name {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-deal-sub {
  color: var(--muted);
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-deal .deal-price {
  margin: 8px 0 10px;
}

.home-deal .deal-price b {
  font-size: 1.3rem;
}

.home-deal-go {
  width: 100%;
  margin-top: auto;
  padding: 8px 12px;
  background: linear-gradient(180deg, #ff4d5c, #e02536);
  font-size: 0.84rem;
}

.home-deal-go:hover {
  background: linear-gradient(180deg, #ff6370, #ea3445);
}

.home-deal .price-flag {
  top: 60px;
  right: 12px;
  bottom: auto;
}

/* ---- Your subscriptions: a tidy table ---- */
.subs-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.subs-search input {
  width: 260px;
  padding: 9px 16px 9px 40px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") 14px center / 17px no-repeat;
  color: var(--text);
  font-size: 0.86rem;
}

.subs-add {
  padding: 8px 16px;
  font-size: 0.86rem;
}

.subs-card #sub-list {
  gap: 6px;
}

.subs-card #sub-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.03);
}

.subs-card #sub-list li:hover {
  background: rgba(255, 255, 255, 0.06);
}

.subs-card #sub-list li::before {
  content: none;              /* no row numbers here */
}

.subs-card #sub-list li[hidden] {
  display: none;
}

.subs-card #sub-list li .app-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.subs-card #sub-list li .sub-main {
  min-width: 0;
}

.subs-card .sub-name {
  font-size: 0.92rem;
}

/* The full details stay for screen readers; the columns show them for everyone else */
.subs-card .sub-details {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.subs-card .sub-tip {
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subs-card .tags {
  margin-left: 6px;
}

.sub-plan {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subs-card .sub-price {
  font-size: 0.92rem;
}

.sub-when {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sub-when strong {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
}

.sub-when span {
  color: var(--muted);
  font-size: 0.74rem;
}

#sub-list li.soon .sub-when strong { color: #ff5a68; }
#sub-list li.trial .sub-when strong { color: var(--info); }

.sub-cat {
  justify-self: start;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-actions {
  display: flex;
  gap: 2px;
}

/* The coloured edge for "due soon" / "trial" rows, and no renewal bar in the table */
.subs-card #sub-list li.soon { box-shadow: inset 3px 0 0 #ff5a68; }
.subs-card .cycle { display: none; }

.subs-card #sub-list li.empty {
  display: flex;
  padding: 30px 16px;
}

/* =========================================================
   Narrower screens
   ========================================================= */

/* No room for the fanned tiles: words on the left, insights on the right */
@container page (max-width: 1100px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  }

  .hh-fan {
    display: none;
  }
}

@container page (max-width: 980px) {
  .home-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .subs-card #sub-list li {
    grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
  }

  .sub-plan,
  .sub-cat {
    display: none;
  }
}

@container page (max-width: 900px) {
  .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container page (max-width: 760px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 16px 16px;
  }

  .subs-tools {
    width: 100%;
  }

  .subs-card .home-card-head {
    flex-wrap: wrap;
  }

  .subs-search {
    flex: 1;
  }

  .subs-search input {
    width: 100%;
  }
}

/* Phones */
@media (max-width: 700px) {
  #page-home {
    gap: 12px;
  }

  .hh-title {
    font-size: 2.1rem;
  }

  .hh-buttons {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .hh-buttons a {
    flex: 1 1 0;
    justify-content: center;
    padding: 11px 10px;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .hh-buttons .icon {
    display: none;
  }

  .home-stats {
    gap: 10px;
  }

  .home-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 12px;
  }

  .home-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .home-stat-icon .icon {
    width: 19px;
    height: 19px;
  }

  .home-stat-row {
    flex-direction: column;
    gap: 0;
  }

  .home-stat-value {
    font-size: 1.35rem;
  }

  .home-stat-go {
    display: none;
  }

  .home-card {
    padding: 12px;
  }

  .home-card-head {
    gap: 10px;
  }

  .home-card-icon {
    display: none;
  }

  .pay-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  .pay-when {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    gap: 6px;
  }

  .pay-name { grid-column: 2; grid-row: 1; }
  .pay-row .app-icon { grid-row: 1 / span 2; }
  .pay-amount { grid-column: 3; grid-row: 1 / span 2; }
  .pay-go { display: none; }

  /* Deals: swipe sideways, one and a bit at a time */
  .home-deal-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .home-deal {
    scroll-snap-align: start;
  }

  .subs-card #sub-list li {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px;
  }

  .subs-card #sub-list li .app-icon { grid-row: 1 / span 2; width: 38px; height: 38px; }
  .subs-card #sub-list li .sub-main { grid-column: 2; grid-row: 1; }
  .subs-card #sub-list li .sub-when { grid-column: 2; grid-row: 2; flex-direction: row; gap: 6px; }
  .subs-card #sub-list li .sub-price { grid-column: 3; grid-row: 1; justify-self: end; }
  .subs-card #sub-list li .sub-actions { grid-column: 3; grid-row: 2; justify-self: end; }
  .subs-card .sub-actions button { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-stat,
  .hh-primary,
  .hh-secondary {
    transition: none;
  }
}


/* =========================================================
   TRACKBOT PAGE (v2): "TrackBot" with the robot behind it, four things it can do,
   the chat, and beside it insights, quick actions and example questions.
   ========================================================= */
.ask-layout {
  grid-template-columns: minmax(0, 1fr) 400px;
}

/* The left column fits the screen exactly, so the chat's message box is always in view:
   the top takes what it needs and the chat gets the rest */
.ask-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  height: calc(100vh - var(--topbar-h) - 56px);                                  /* older browsers */
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - 56px);
  min-height: 560px;
}

/* ---- The top: the name, the robot glowing behind it, and four cards ---- */
.ask-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 16px;
  padding-top: 6px;
}

/* The robot (icons/art/trackbothero.webp), fading into the dark on its left and bottom */
.ask-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70px;
  right: -8px;
  width: min(560px, 62%);
  height: calc(100% + 40px);
  background: url("icons/art/trackbothero.webp") right 0 top -34px / 400px auto no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 38%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 38%);
  mask-composite: intersect;
  pointer-events: none;
}

.ask-hero-text h2 {
  margin: 0;
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.ask-hero-text p {
  margin: 2px 0 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
}

.ask-hero-text .ai-status {
  display: inline-block;
  font-size: 0.8rem;
}

.ask-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ask-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 12, 15, 0.82);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-weight: 500;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}

.ask-feature:hover {
  border-color: rgba(255, 70, 85, 0.45);
  background: rgba(30, 14, 19, 0.9);
  transform: translateY(-2px);
}

.ask-feature-icon,
.ask-panel-icon,
.quick-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #ff5a68;
}

.ask-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(230, 57, 70, 0.14);
}

.ask-feature-icon .icon {
  width: 22px;
  height: 22px;
}

.ask-feature-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ask-feature-text strong {
  font-size: 0.98rem;
}

.ask-feature-text span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* at most two lines, so the cards stay short */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- The chat ---- */
#page-ask .chat {
  position: relative;
  z-index: 1;               /* in front of the robot picture above it */
  flex: 1;
  height: auto;
  min-height: 340px;
  border-radius: 22px;
  border: 1px solid rgba(255, 70, 85, 0.22);
  background:
    radial-gradient(70% 55% at 100% 100%, rgba(230, 57, 70, 0.16), transparent 70%),
    linear-gradient(180deg, #151114, #0f0d10);
}

#page-ask #bot-log {
  padding: 26px 26px 12px;
}

#page-ask .bot-avatar {
  width: 44px;
  height: 44px;
}

/* TrackBot's hello: the first line in bold */
#bot-log .msg.bot:first-child .bubble::first-line {
  font-weight: 700;
}

#page-ask .bubble.bot {
  padding: 14px 18px;
  background: #1c191e;
  font-size: 0.98rem;
}

#page-ask #bot-options {
  padding: 4px 26px 16px 82px;
}

#page-ask #bot-options button {
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 600;
}

#page-ask #bot-options button::before {
  content: none;            /* plain pills, like the mockup */
}

#page-ask #bot-form {
  margin: auto 22px 22px;
  padding: 7px 7px 7px 22px;
  background: rgba(0, 0, 0, 0.35);
}

#page-ask #bot-form button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff4d5c, #e02536);
}

/* ---- Beside the chat ---- */
.ask-side {
  gap: 16px;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: none;
  background: none;
}

.ask-panel {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, #17131a, #110f12);
}

.ask-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ask-panel-head h2 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
}

.ask-panel-icon .icon {
  width: 22px;
  height: 22px;
}

.ask-view-all {
  padding: 4px 6px;
  background: none;
  color: #ff5a68;
  font-size: 0.85rem;
}

.ask-view-all:hover {
  background: rgba(230, 57, 70, 0.12);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
}

.quick-action:hover {
  background: rgba(255, 255, 255, 0.08);
}

.quick-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(230, 57, 70, 0.14);
}

.quick-icon .icon {
  width: 20px;
  height: 20px;
}

.quick-go {
  margin-left: auto;
  color: var(--muted);
  font-size: 1.1rem;
}

.example-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.example-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
}

.example-q:hover {
  background: rgba(255, 255, 255, 0.08);
}

.example-q span {
  color: var(--muted);
  font-size: 1.1rem;
}

/* ---- Narrower screens ---- */
@container page (max-width: 1080px) {
  .ask-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ask-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
  }
}

@container page (max-width: 760px) {
  .ask-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ask-hero {
    min-height: 0;
    gap: 16px;
    padding-top: 8px;
  }

  .ask-hero::before {
    top: -16px;
    width: 72%;
    height: 170px;
    opacity: 0.85;
  }

  .ask-hero-text h2 {
    font-size: 2rem;
  }

  .ask-hero-text p {
    font-size: 0.98rem;
  }

  .ask-hero-text .ai-status {
    max-width: 62%;           /* wraps before it reaches the robot */
  }

  /* The four cards: a row you swipe */
  .ask-features {
    display: flex;
    gap: 10px;
    margin: 0 -12px;
    padding: 0 12px 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ask-feature {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  /* Phones: the same, but above the menu bar at the bottom */
  .ask-main {
    height: calc(100vh - var(--topbar-h) - var(--bottombar-h) - 28px);
    height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - var(--bottombar-h) - env(safe-area-inset-bottom) - 28px);
    min-height: 480px;
  }

  #page-ask .chat {
    min-height: 300px;
  }

  #page-ask #bot-log {
    padding: 16px 14px 10px;
  }

  #page-ask .bot-avatar {
    width: 34px;
    height: 34px;
  }

  #page-ask #bot-options {
    padding: 4px 14px 12px;
  }

  #page-ask #bot-options button {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  #page-ask #bot-form {
    margin: auto 12px 12px;
  }

  #page-ask #bot-form button {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ask-feature {
    transition: none;
  }
}


/* =========================================================
   REVIEW FIXES (2026-10-25): TrackBot's log-in prompt, the Hub example,
   and narrow phones
   ========================================================= */

/* ---- TrackBot: "You're using quick answers. Log in for AI" ---- */
.bot-form-note {
  margin: -14px 26px 16px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.bot-form-note[hidden] {
  display: none;
}

.bot-form-note .link-button {
  color: #ff8a93;
  font-weight: 700;
}

@media (max-width: 700px) {
  .bot-form-note {
    margin: -6px 12px 10px;
    font-size: 0.74rem;
  }
}

.ai-login {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 18px 0;
  padding: 10px 10px 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 90, 100, 0.35);
  background: linear-gradient(90deg, rgba(230, 57, 70, 0.18), rgba(230, 57, 70, 0.06));
}

.ai-login[hidden] {
  display: none;
}

.ai-login-icon {
  font-size: 1.2rem;
}

.ai-login p {
  flex: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  line-height: 1.4;
}

.ai-login p strong {
  color: #fff;
}

.ai-login-go {
  flex-shrink: 0;
  padding: 9px 16px;
  background: linear-gradient(180deg, #ff4d5c, #e02536);
  font-size: 0.86rem;
  white-space: nowrap;
}

.ai-login-go:hover {
  background: linear-gradient(180deg, #ff6370, #ea3445);
}

/* ---- Hub: the example under "Your numbers show up here" ---- */
.hub-sample {
  position: relative;
  width: 100%;
  margin-top: 26px;
  padding: 34px 16px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}

.hub-sample-tag {
  position: absolute;
  top: 10px;
  left: 14px;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: rgba(255, 181, 71, 0.14);
  color: var(--warn);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hub-sample-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  opacity: 0.9;
}

.hub-sample-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.hub-sample-card > strong {
  font-size: 0.9rem;
}

.sample-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  height: 140px;
}

.sample-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
}

.sample-bar span {
  width: 100%;
  max-width: 34px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #ff5a68, #a8121f);
}

.sample-bar small,
.sample-bar em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
}

.sample-donut-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sample-donut {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(#e63946 0 40%, #3b8eea 40% 65%, #c4861f 65% 85%, #6b6b73 85% 100%);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
  mask: radial-gradient(circle, transparent 54%, #000 55%);
}

.sample-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}

.sample-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sample-legend span {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--c);
}

.sample-legend b {
  margin-left: auto;
  padding-left: 8px;
  color: var(--muted);
  font-weight: 600;
}

.sample-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.sample-cal span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.68rem;
}

.sample-cal span:not(:empty) {
  background: rgba(255, 255, 255, 0.03);
}

.sample-cal span.busy {
  background: rgba(230, 57, 70, 0.25);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 100, 0.5);
}

@container page (max-width: 820px) {
  .hub-sample-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Phones ---- */
@media (max-width: 700px) {
  /* Home: the welcome card waits; the hero comes first */
  #page-home .intro {
    display: none;
  }

  /* TrackBot: the question buttons in two neat columns, nothing running off the side */
  #page-ask #bot-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 2px 10px 10px;
    overflow: visible;
  }

  #page-ask #bot-options button {
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: normal;
    text-align: left;
  }

  /* TrackBot: the four cards wait for bigger screens (the question buttons do the same jobs),
     so the chat gets the room; so does the AI line (the prompt in the chat says it) */
  .ask-features,
  .ask-hero-text .ai-status {
    display: none;
  }

  .ai-login {
    margin: 10px 10px 0;
    padding: 6px 6px 6px 12px;
  }

  .ai-login-icon {
    display: none;
  }

  .ai-login-more {
    display: none;
  }

  /* One line: "Quick answers only." + the button */
  .ai-login p {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-login-go {
    padding: 7px 12px;
    font-size: 0.8rem;
  }
}

/* Narrow phones: Home's two hero buttons stack, full width, so neither gets cut off */
@media (max-width: 420px) {
  .hh-buttons {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .hh-buttons a {
    flex: none;
    width: 100%;
  }
}


/* =========================================================
   TRANSPORT (transport.js): the myki Pass calculator page, the pass form,
   Home's "Transport passes", and the link on Deals
   ========================================================= */

/* ---- The link on Deals ---- */
.transport-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 70, 85, 0.3);
  background: linear-gradient(90deg, rgba(230, 57, 70, 0.16), rgba(255, 255, 255, 0.02));
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.transport-promo:hover {
  border-color: rgba(255, 70, 85, 0.6);
  background: linear-gradient(90deg, rgba(230, 57, 70, 0.24), rgba(255, 255, 255, 0.03));
}

.transport-promo-icon,
.pass-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(230, 57, 70, 0.18);
  color: #ff5a68;
}

.transport-promo-icon .icon,
.pass-icon .icon {
  width: 22px;
  height: 22px;
}

.transport-promo-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.transport-promo-text span {
  color: var(--muted);
  font-size: 0.84rem;
}

.transport-promo-go {
  color: #ff5a68;
  font-size: 1.2rem;
}

/* ---- The calculator page ---- */
#page-transport {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#page-transport[hidden] {
  display: none;
}

.transport-head h2 {
  margin: 4px 0 4px;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  letter-spacing: -0.02em;
}

.transport-head .hint {
  max-width: 62ch;
  margin: 0;
  font-size: 0.95rem;
}

.transport-back {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.transport-back:hover {
  color: var(--text);
}

.myki-period {
  display: inline-block;
  margin: 12px 0 0;
  padding: 7px 14px;
  border-radius: 12px;
  background: rgba(30, 215, 96, 0.12);
  border: 1px solid rgba(30, 215, 96, 0.35);
  color: #7ff0a9;
  font-size: 0.86rem;
  font-weight: 600;
}

.myki-period.warn {
  background: rgba(255, 181, 71, 0.12);
  border-color: rgba(255, 181, 71, 0.4);
  color: var(--warn);
}

.transport-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.transport-card {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, #17131a, #110f12);
}

.transport-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.myki-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.myki-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.myki-group legend,
.myki-label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Two choices side by side; the radio buttons stay real (keyboard arrows work) */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.seg label {
  position: relative;
  margin: 0;
}

.seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}

.seg span {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.seg input:checked + span {
  background: linear-gradient(180deg, #ff4d5c, #e02536);
  color: #fff;
}

.seg input:focus-visible + span {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

#myki-zone {
  width: 100%;
}

.myki-days {
  display: flex;
  align-items: center;
  gap: 14px;
}

.myki-days input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #ff4d5c;
}

.myki-days input[type="number"],
#myki-compare-days {
  width: 96px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.myki-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.myki-chips button {
  min-width: 52px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.86rem;
}

.myki-chips button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.myki-chips button[aria-pressed="true"] {
  border-color: rgba(255, 70, 85, 0.75);
  background: rgba(230, 57, 70, 0.22);
}

.myki-error {
  margin: 8px 0 0;
  color: var(--warn);
  font-size: 0.84rem;
}

.myki-error:empty {
  display: none;
}

/* ---- The price ---- */
.myki-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-color: rgba(255, 70, 85, 0.35);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(230, 57, 70, 0.25), transparent 70%),
    linear-gradient(160deg, #1f0d12, #120b0e);
}

.myki-kicker {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.myki-total {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.myki-per-day {
  color: #ff8a93;
  font-weight: 600;
}

.myki-result-name {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
}

.myki-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 4px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.myki-notes:empty {
  display: none;
}

.myki-caution {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 181, 71, 0.4);
  background: rgba(255, 181, 71, 0.1);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.84rem;
  line-height: 1.45;
}

.myki-caution strong {
  color: var(--warn);
}

.home-transport {
  margin: 0;
}

.home-transport[hidden] {
  display: none;
}

.myki-track {
  margin-top: 10px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #ff4d5c, #e02536);
  font-size: 0.95rem;
}

.myki-track:hover:not(:disabled) {
  background: linear-gradient(180deg, #ff6370, #ea3445);
}

.myki-track:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.myki-own {
  margin-top: 4px;
  font-size: 0.88rem;
}

.myki-saved {
  margin: 6px 0 0;
  color: var(--save);
  font-size: 0.86rem;
}

/* ---- Compare ---- */
.myki-compare {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.myki-compare-head .hint {
  margin: 0;
}

.myki-compare-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.myki-compare-pick label {
  margin: 0;
  font-weight: 700;
}

.myki-compare-pick .myki-chips {
  margin: 0;
}

.myki-compare-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.myki-compare-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.myki-compare-tag {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 2px 9px;
  border-radius: var(--pill);
  background: rgba(230, 57, 70, 0.22);
  color: #ff8a93;
  font-size: 0.72rem;
  font-weight: 800;
}

.myki-compare-tag.b {
  background: rgba(59, 142, 234, 0.2);
  color: #8fc1ff;
}

.myki-compare-total {
  font-size: 1.5rem;
  font-weight: 800;
}

.myki-diff {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.92rem;
  font-weight: 600;
}

/* ---- Concessions, good to know, sources ---- */
.transport-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.transport-info p,
.myki-facts {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.5;
}

.myki-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.myki-link {
  color: #ff8a93;
  font-weight: 700;
  font-size: 0.88rem;
}

.myki-source p {
  margin: 0 0 6px;
}

.myki-sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 10px;
  padding-left: 18px;
  font-size: 0.82rem;
}

.myki-sources a {
  color: #ff8a93;
}

/* ---- The pass form ---- */
.pass-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pass-active {
  margin: 14px 0 4px;
  padding: 0;
  border: none;
}

.pass-active legend {
  margin-bottom: 6px;
  font-weight: 700;
}

.pass-storage {
  margin-top: 10px;
}

button.danger {
  margin-right: auto;
  color: #ff8a93;
}

/* ---- Home: Transport passes ---- */
.pass-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.pass-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.pass-card.soon {
  border-color: rgba(255, 90, 100, 0.5);
}

.pass-card.ended {
  opacity: 0.7;
}

.pass-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pass-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pass-name span {
  color: var(--muted);
  font-size: 0.82rem;
}

.pass-status {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--pill);
  background: rgba(30, 215, 96, 0.14);
  color: var(--save);
  font-size: 0.78rem;
  font-weight: 800;
}

.pass-card.soon .pass-status { background: rgba(230, 57, 70, 0.2); color: #ff8a93; }
.pass-card.waiting .pass-status { background: rgba(255, 181, 71, 0.14); color: var(--warn); }
.pass-card.ended .pass-status { background: rgba(255, 255, 255, 0.08); color: var(--muted); }

.pass-dates {
  margin: 0;
  font-size: 0.86rem;
}

.pass-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.pass-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.pass-actions button {
  padding: 7px 14px;
  font-size: 0.84rem;
}

.myki-mini {
  display: none;
}

/* ---- Narrower screens ---- */
@container page (max-width: 900px) {
  .myki-mini {
    display: block;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(230, 57, 70, 0.14);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
  }

  .transport-layout,
  .transport-info {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .transport-card {
    padding: 14px;
  }

  .myki-compare-cards {
    gap: 8px;
  }

  .myki-compare-total {
    font-size: 1.25rem;
  }

  .transport-promo-text span {
    font-size: 0.78rem;
  }

  .pass-list {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* =========================================================
   HIGHLIGHTS (v2): right under Home's numbers, big picture cards
   with the app's artwork (the same as Deals), a gold Plus touch
   ========================================================= */
.home-card.highlights {
  border-color: rgba(255, 207, 92, 0.28);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(255, 207, 92, 0.1), transparent 60%),
    linear-gradient(160deg, #17131a, #110f12);
}

.hl-head-icon {
  background: rgba(255, 207, 92, 0.16);
  color: var(--plus);
  font-size: 1.2rem;
}

.highlights .home-card-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hl-count {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: rgba(255, 207, 92, 0.12);
  color: var(--plus);
  font-size: 0.8rem;
  font-weight: 800;
}

.highlights .highlights-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 0;
  overflow: visible;
}

/* Each card: the app's picture (or line drawing), its colour, and a dark fade so the words read */
.highlights button.hl-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 218px;
  justify-content: flex-end;
  gap: 2px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, rgba(255, 255, 255, 0.08));
  --hl-bg:
    linear-gradient(180deg, rgba(10, 8, 10, 0.15) 0%, rgba(10, 8, 10, 0.88) 78%),
    var(--art, none) right -14px top -8px / 85% auto no-repeat,
    radial-gradient(110% 90% at 90% 0%, color-mix(in srgb, var(--brand) 60%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 28%, #141114), #0f0d10 80%);
  background: var(--hl-bg);
  transition: transform 0.25s var(--ease), border-color 0.2s, box-shadow 0.25s;
}

.highlights button.hl-card.has-photo {
  --hl-bg:
    linear-gradient(180deg, rgba(10, 8, 10, 0.05) 0%, rgba(10, 8, 10, 0.35) 40%, rgba(10, 8, 10, 0.92) 85%),
    radial-gradient(90% 90% at 85% 10%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%),
    var(--photo) right center / cover no-repeat;
}

.highlights button.hl-card:hover {
  background: var(--hl-bg);
  border-color: color-mix(in srgb, var(--brand) 65%, rgba(255, 255, 255, 0.15));
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--brand) 85%, transparent);
  transform: translateY(-3px);
}

.highlights button.hl-card.soon {
  border-color: rgba(255, 181, 71, 0.6);
}

/* The icon and the renewal ring at the top, the words at the bottom */
.highlights .hl-top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  width: auto;
  margin: 0;
}

/* The app's full logo, big and white, with a glow in its colour */
.highlights .hl-logo {
  display: grid;
  place-items: center start;
  width: 62%;
  height: 64px;
  container-type: size;          /* letter logos (e.g. "D+") size themselves to this box */
}

.highlights .hl-logo .app-logo {
  width: auto;
  max-width: 100%;
  height: 52px !important;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px color-mix(in srgb, var(--brand) 60%, transparent));
}

.highlights .hl-logo .logo-letters {
  font-size: 70cqh;
}

.highlights .hl-name {
  font-size: 1.05rem;
}

.highlights .hl-plan {
  color: rgba(255, 255, 255, 0.75);
}

.highlights .hl-price {
  margin-top: 4px;
  font-size: 1.4rem;
}

.highlights .hl-status {
  color: rgba(255, 255, 255, 0.78);
}

/* Phones: swipe through them, one and a bit at a time */
@media (max-width: 700px) {
  .highlights .highlights-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .highlights button.hl-card {
    min-height: 180px;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .highlights button.hl-card {
    transition: none;
  }
}


/* =========================================================
   CALMER LOOK (usability test, October 2026)
   Same dark style and personality, less intensity: red is kept for buttons,
   key numbers and things that need attention; decorative glows and red borders
   are softened; cards get quieter and sections get more room.
   ========================================================= */

/* The coloured glow behind every page: about half as strong */
.ambient {
  opacity: 0.5;
}

/* ---- Home ---- */
#page-home {
  gap: 22px;
}

/* The hero: a deep, quiet red instead of a bright one, no glowing border */
.home-hero {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(55% 110% at 62% 50%, rgba(200, 40, 55, 0.22), transparent 70%),
    linear-gradient(110deg, #151013 0%, #24101a 50%, #3a0f18 85%, #1e0c10 100%);
  box-shadow: none;
}

.hh-fan .hh-tile {
  filter: brightness(calc(0.9 - var(--n) * 0.12)) saturate(0.9);
}

.insights {
  background: rgba(10, 8, 10, 0.6);
}

/* Small icons on cards: neutral, so they don't compete with the numbers */
.home-stat-icon,
.home-card-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}

.home-stat:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.home-stat,
.home-card {
  background: #141215;
}

/* ---- Deals ---- */
.deal-hero {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.deal-assistant {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.transport-promo {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(90deg, rgba(230, 57, 70, 0.08), rgba(255, 255, 255, 0.02));
}

/* ---- TrackBot ---- */
#page-ask .chat {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #141215, #100e11);
}

.ask-feature-icon,
.ask-panel-icon,
.quick-icon {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.ask-feature:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

/* ---- Transport ---- */
.myki-result {
  border-color: rgba(255, 255, 255, 0.1);
}


/* =========================================================
   HOME LAYOUT (both themes): the hero with your apps in a tidy cluster and the
   insights after a thin line, the four numbers with the value under the label,
   and highlight cards with the picture on top and the details underneath.
   This is Vibrant's look (photos, glow, rich colour); theme-calm.css gives
   Classic its own colours (full logos on clean dark panels) on the same layout.
   ========================================================= */
#page-home {
  gap: 24px;
}

.home-hero {
  gap: 26px;
  padding: 28px 28px 28px 40px;
  border-radius: 18px;
}

@container page (min-width: 1101px) {
  .home-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(320px, 0.95fr);
  }
}

.hh-buttons {
  gap: 16px;
  margin-top: 16px;
}

.hh-primary .icon,
.hh-secondary .icon {
  display: none;
}

/* Your apps in a cluster: the dearest in front, bottom right */
.hh-fan {
  min-height: 250px;
}

.hh-fan .hh-tile {
  --size: 96px;
  border-radius: 22px;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
}

.hh-fan .hh-tile .app-logo {
  width: 50%;
  height: 50%;
}

.hh-fan .hh-tile[style*="--n: 0"] { --x: 58px;  --y: 58px;  z-index: 5; filter: none; }
.hh-fan .hh-tile[style*="--n: 1"] { --x: -58px; --y: -50px; z-index: 4; }
.hh-fan .hh-tile[style*="--n: 2"] { --x: 50px;  --y: -64px; z-index: 3; }
.hh-fan .hh-tile[style*="--n: 3"] { --x: -50px; --y: 62px;  z-index: 2; }
.hh-fan .hh-tile[style*="--n: 4"] { --x: 138px; --y: -2px;  --size: 64px; border-radius: 18px; z-index: 6; }

/* TrackBot insights: no box, a thin line on the left */
.insights {
  align-self: center;
  gap: 12px;
  padding: 4px 0 4px 26px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
}

.insights-head {
  padding: 0;
}

.insights-head img {
  display: none;
}

.insights-head strong {
  font-size: 1.3rem;
}

.insights-all {
  padding: 4px 0;
  border: 0;
  background: none;
  color: #ff6b70;
  font-size: 0.9rem;
  font-weight: 600;
}

.insights-all:hover {
  background: none;
  text-decoration: underline;
}

.insight-items {
  gap: 10px;
}

.insight-items .insight {
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
}

.insight-items .insight-text strong {
  font-size: 0.95rem;
}

.insight-items .insight-text span {
  font-size: 0.85rem;
}

@container page (max-width: 760px) {
  .home-hero {
    padding: 22px 16px 16px;
  }

  .insights {
    padding-left: 0;
    border-left: 0;
  }
}

/* The four numbers */
.home-stats {
  gap: 16px;
}

.home-stat {
  min-height: 118px;
  gap: 22px;
  padding: 18px 24px 18px 26px;
  border-radius: 14px;
}

.home-stat-label {
  font-size: 0.95rem;
}

.home-stat-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.home-stat-value {
  font-size: clamp(1.4rem, 2.4cqi, 2rem);   /* smaller when the page is narrower, so "A$174.00" fits */
}

.home-stat-note {
  font-size: 0.88rem;
}

.home-stat-go {
  font-size: 1.7rem;
}

/* Highlights: a heading (no box around it), then the cards */
.home-card.highlights {
  padding: 0;
  border: 0;
  background: none;
}

.highlights .home-card-head {
  margin-bottom: 16px;
}

.hl-head-icon,
.highlights .hl-count {
  display: none;
}

.highlights .home-card-head h2 {
  font-size: 1.5rem;
}

.highlights .home-card-head .hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
}

.highlights .highlights-track {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
}

/* The picture fills the top 108px; the details sit underneath.
   Vibrant: the app's photo with a glow in its colour, and a rich dark-colour panel below */
.highlights button.hl-card,
.highlights button.hl-card.has-photo {
  min-height: 214px;
  justify-content: flex-start;
  padding: 122px 40px 16px 18px;        /* the words start under the picture */
  border-radius: 12px;
  --hl-bg:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 24%, #141114), #0f0d10) bottom / 100% calc(100% - 108px) no-repeat,
    linear-gradient(180deg, transparent 45%, rgba(10, 8, 10, 0.55)) top / 100% 108px no-repeat,
    radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 70%) top / 100% 108px no-repeat,
    var(--photo, var(--art, none)) center / cover no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 55%, #141114), #0f0d10);
  background: var(--hl-bg);
}

/* The chevron on the right */
.highlights button.hl-card::after {
  content: "›";
  position: absolute;
  right: 18px;
  bottom: 40px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.6rem;
  line-height: 1;
}

/* The logo in the middle of the picture, the renewal ring in its corner */
.highlights .hl-top {
  top: 0;
  left: 0;
  right: 0;
  height: 108px;
  justify-content: center;
}

.highlights .hl-logo {
  place-items: center;
  width: 70%;
  height: 64px;
}

.highlights .hl-logo .app-logo {
  height: 54px !important;
  object-position: center;
}

.highlights .hl-ring {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
}

.highlights .hl-name {
  font-size: 1.08rem;
}

.highlights .hl-plan,
.highlights .hl-status {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
}

.highlights .hl-price {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 600;
}

/* Phones (this block comes after style.css's own phone rules, so it repeats them) */
@media (max-width: 700px) {
  .home-stat {
    min-height: 0;
    padding: 12px;
    gap: 8px;
  }

  .home-stat-value {
    font-size: 1.4rem;
  }

  .highlights .highlights-track {
    grid-template-columns: none;
    grid-auto-columns: 62%;
    gap: 12px;
  }
}


/* =========================================================
   REVIEW FIXES 2 (October 2026)
   ========================================================= */

/* The welcome note: one slim line, so the hero's "Add your subscriptions" stands out */
#intro {
  align-items: center;
  padding: 10px 10px 10px 16px;
}

#intro p {
  flex: 1;
  margin: 0;
  max-width: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

#intro p strong {
  color: var(--text);
}

/* "⚠ Price to confirm" instead of "Great value" when a price isn't confirmed yet */
.match-badge.check {
  border: 1px solid rgba(255, 181, 71, 0.5);
  color: var(--warn);
}

/* Home's deal cards: more room for the deals side, and the cards keep a readable
   width (at least 220px) and scroll sideways instead of squeezing three in */
@container page (min-width: 981px) {
  .home-two {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.home-deal-list {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.home-deal {
  scroll-snap-align: start;
}

@media (max-width: 700px) {
  .home-deal-list {
    grid-auto-columns: 62%;
  }
}


/* =========================================================
   GET OFFER ↗ (data.js studentOffers): claim a student deal on the company's own site,
   always next to (and quieter than) tracking it in TrackSave
   ========================================================= */
.sheet-actions {
  flex-wrap: wrap;
  gap: 10px;
}

.sheet-offer,
.match-offer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--pill);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.sheet-offer {
  padding: 12px 22px;
  font-size: 1rem;
}

.sheet-offer:hover,
.match-offer:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sheet-offer[hidden] {
  display: none;
}

/* On a Best match card: "Track this plan" and "Get offer ↗" side by side */
.match-buttons {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.match-buttons .match-add {
  flex: 1;
  width: auto;
  margin-top: 0;
}

.match-offer {
  flex-shrink: 0;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
}

/* In the Add form's student note */
.add-offer {
  color: var(--accent-hover);
  font-weight: 700;
  white-space: nowrap;
}

[data-theme="calm"] .sheet-offer,
[data-theme="calm"] .match-offer {
  border-radius: 10px;
}

@media (max-width: 700px) {
  .sheet-offer {
    flex: 1 1 100%;
  }
}


/* =========================================================
   COMPARE PLANS (Plus page, plus.js): Free, Plus and Business side by side.
   Plus is highlighted in gold; Business is greyed and "Not available yet".
   ========================================================= */
.plan-compare h3 {
  margin: 0 0 16px;
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.plan-card-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 22px 20px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.plan-card-col.plan-plus {
  border-color: rgba(255, 207, 92, 0.55);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 207, 92, 0.1), transparent 70%),
    rgba(255, 255, 255, 0.03);
}

.plan-card-col.plan-business {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.2);
}

.plan-card-col.plan-business .plan-name,
.plan-card-col.plan-business .plan-price,
.plan-card-col.plan-business .plan-list {
  opacity: 0.75;                 /* not available yet: a little quieter */
}

/* The little label on the top edge: "Recommended" / "Not available yet" */
.plan-flag {
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 2px 10px;
  border-radius: var(--pill);
  background: var(--plus-gradient);
  color: #241a05;
  font-size: 0.72rem;
  font-weight: 800;
}

.plan-flag-soon {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #24262c;
  color: var(--muted);
}

.plan-name {
  font-size: 1.15rem;
  font-weight: 800;
}

.plan-plus .plan-name {
  color: var(--plus);
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.plan-price strong {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.plan-price span {
  color: var(--muted);
  font-size: 0.88rem;
}

.plan-for {
  min-height: 2.6em;             /* the three cards' buttons line up */
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.plan-go,
.plan-go:disabled {
  width: 100%;
  margin: 8px 0 10px;
  padding: 11px 16px;
}

.plan-go:disabled {
  cursor: default;
  opacity: 1;
}

.plan-free .plan-go:disabled {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--muted);
}

.plan-plus .plan-go:disabled {
  background: rgba(255, 207, 92, 0.14);
  color: var(--plus);
}

.business-cta,
.business-cta:disabled,
.business-cta:hover {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: not-allowed;
}

/* Each list: a tick, then the feature */
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-list li {
  position: relative;
  padding-left: 24px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
  line-height: 1.4;
}

.plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--save);
  font-weight: 800;
}

/* "Everything in Free" reads as a heading, not a feature */
.plan-plus .plan-list li:first-child {
  font-weight: 700;
}

.business-note {
  margin: 12px 0 0;
  font-size: 0.8rem;
}

.business-note .link-button {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
}

[data-theme="calm"] .plan-card-col {
  border-radius: 14px;
  background: var(--calm-surface);
}

[data-theme="calm"] .plan-go {
  border-radius: 10px;
}

/* Narrower: Free and Plus side by side, Business underneath. Phones: one under another. */
@container page (max-width: 900px) {
  .plan-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-card-col.plan-business {
    grid-column: 1 / -1;
  }

  .plan-business .plan-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }
}

@media (max-width: 700px) {
  .plan-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .plan-for {
    min-height: 0;
  }
}


/* =========================================================
   THEME PICKER (Settings, theme.js): two cards with a little preview each
   ========================================================= */
.theme-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.theme-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-align: left;
}

.theme-choice:hover {
  background: rgba(255, 255, 255, 0.06);
}

.theme-choice[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.theme-choice .hint {
  margin: 0;
  font-size: 0.78rem;
}

/* A tiny drawing of each look: a hero bar and two cards */
.theme-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  height: 64px;
  margin-bottom: 8px;
  padding: 6px;
  border-radius: 10px;
}

.theme-preview i {
  border-radius: 5px;
}

.theme-preview i:first-child {
  grid-column: 1 / -1;
}

.theme-preview-calm {
  background: #111317;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-preview-calm i { background: #1d2026; }
.theme-preview-calm i:first-child { background: linear-gradient(110deg, #2a181c, #1d1416); box-shadow: inset 3px 0 0 #f2545b; }

.theme-preview-gaming {
  background: linear-gradient(160deg, #1a070b, #09080c);
  border: 1px solid rgba(255, 70, 85, 0.4);
}

.theme-preview-gaming i { background: rgba(230, 57, 70, 0.22); }
.theme-preview-gaming i:first-child { background: linear-gradient(110deg, #3a0a12, #e02536); box-shadow: 0 0 14px rgba(230, 57, 70, 0.6); }


/* =========================================================
   THEME BUTTON (top bar, theme.js): "◐ Theme", its Appearance menu,
   and the one-time "Make TrackSave yours" tip beside it
   ========================================================= */
.theme-wrap {
  position: relative;          /* the menu and the tip are placed relative to this */
}

.theme-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}

.theme-button:hover,
.theme-button[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}

.theme-button .icon {
  width: 18px;
  height: 18px;
}

.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 330px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #17191d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.theme-menu-title {
  margin: 4px 8px 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  font-weight: 600;
}

.theme-menu [role="radiogroup"] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-weight: 500;
  text-align: left;
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.07);
}

.theme-option[aria-checked="true"] {
  border-color: rgba(242, 84, 91, 0.35);
  background: rgba(242, 84, 91, 0.13);
}

.theme-option-icon .icon {
  width: 24px;
  height: 24px;
}

.theme-option-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.theme-option-text strong {
  font-size: 0.98rem;
}

.theme-option-text span {
  color: var(--muted);
  font-size: 0.8rem;
}

/* A little sample of each look */
.theme-swatch {
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.theme-swatch-calm {
  background: linear-gradient(90deg, #1d2026 0 55%, #f2545b 55% 100%);
}

.theme-swatch-gaming {
  background: linear-gradient(110deg, #2a070c, #e02536);
  box-shadow: 0 0 12px rgba(230, 57, 70, 0.55);
}

.theme-tick {
  width: 18px;
  color: #ff6b70;
  font-size: 1.1rem;
  font-weight: 800;
  visibility: hidden;
}

.theme-option[aria-checked="true"] .theme-tick {
  visibility: visible;
}

/* The tip: a small card just under the button, pointing up at it */
.theme-tip {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 29;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: max-content;
  max-width: 300px;
  padding: 12px 14px 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1b1d22;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  animation: fade-in 0.4s var(--ease) both;
}

.theme-tip::after {
  content: "";
  position: absolute;
  top: -7px;
  right: 22px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: #1b1d22;
  transform: rotate(-45deg);
}

.theme-tip[hidden] {
  display: none;
}

.theme-tip div {
  display: flex;
  flex-direction: column;
}

.theme-tip strong {
  font-size: 1rem;
}

.theme-tip span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
}

.theme-tip-close {
  padding: 0 4px;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
}

.theme-tip-close:hover {
  background: none;
  color: #fff;
}

/* Tablets and phones: just the icon; the menu and tip drop down under the top bar */
@media (max-width: 1099px) {
  .theme-button {
    width: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .theme-button-label {
    display: none;
  }

  .theme-tip::after {
    right: 13px;
  }
}

@media (max-width: 700px) {
  .theme-menu {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
  }

  .theme-tip {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px);
    left: 12px;
    right: 12px;
    max-width: none;
    width: auto;
    justify-content: space-between;
  }

  .theme-tip::after {
    display: none;
  }
}

/* "New" dot on the Theme button until you first open it (theme.js), instead of a tip over the page */
.theme-button {
  position: relative;
}

.theme-button.is-new::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent, #e5484d);
  box-shadow: 0 0 0 2px #15161a;
}

/* Small phones: keep the top bar on one line. Currency is in Settings → Your setup,
   and the Premium pill shrinks to its ✦ */
@media (max-width: 480px) {
  header #currency {
    display: none;
  }

  .plus-pill span {
    display: none;
  }
}