/* ---------------------------------------------------------------
   BrewTunes — light-first café-music UI.
   Light mode is the default per Blake's preference; dark is opt-in.
--------------------------------------------------------------- */

/* Playback layout values must live on the document root, rather than on a
   themed body. app.js measures the fixed controls and updates :root; a
   body-level theme value would otherwise mask that live measurement for the
   player, radio strip and page clearance. */
:root {
  --player-h:      126px;
  --radio-h:       36px;
  --player-gap:    20px;
}

:root,
[data-theme="light"] {
  --bg:            #faf6f1;
  --bg-elev:       #ffffff;
  --bg-soft:       #f3ece2;
  --text:          #1f1a14;
  --text-soft:     #5b5246;
  --text-mute:     #756b5f;
  --line:          #ece3d4;
  --line-strong:   #d8cdb8;
  --brand:         #7a4f1d;          /* coffee brown */
  --brand-bg:      #fff8ee;
  --brand-soft:    #f3e6d2;
  --accent:        #c87f3a;          /* warm caramel */
  --accent-soft:   #fbe7cc;
  --pro:           #8a5a1a;
  --pro-bg:        #fbe9cf;
  --danger:        #a72f2a;
  --danger-soft:   #fbe9e7;
  --success:       #2f7650;
  --focus:         #2767c5;
  --shadow:        0 6px 24px rgba(60, 40, 18, 0.08);
  --shadow-lg:     0 12px 40px rgba(60, 40, 18, 0.14);
  --radius:        16px;
  --radius-lg:     24px;
  --header-h:      64px;
  --font-display:  'Fraunces', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;
}

[data-theme="dark"] {
  --bg:            #15110d;
  --bg-elev:       #1d1813;
  --bg-soft:       #221c15;
  --text:          #f6efe2;
  --text-soft:     #c8bca8;
  --text-mute:     #8a8175;
  --line:          #2c241b;
  --line-strong:   #3a3023;
  --brand:         #ffb469;
  --brand-bg:      #1d1813;
  --brand-soft:    #2c2418;
  --accent:        #f0a86b;
  --accent-soft:   #2c2418;
  --pro:           #ffd28b;
  --pro-bg:        #2a2014;
  --danger:        #ff8a82;
  --danger-soft:   #3a1c18;
  --success:       #72d5a2;
  --focus:         #8bb8ff;
  --shadow:        0 6px 24px rgba(0,0,0,0.45);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: 0;
  overflow-x: clip;
}

/* Bottom padding must clear the fixed player (and the radio ribbon when it is
   showing) or the legal footer links below become unreachable. --player-h and
   --radio-h are re-measured from the real elements in app.js; the values here
   are only the no-JS fallback. The .has-radio-bar rule repeats the :has()
   condition because :has(#player) scores an id and would otherwise win. */
body:has(#player:not([hidden])) {
  padding-bottom: calc(var(--player-h) + var(--player-gap));
}
body.has-radio-bar:has(#player:not([hidden])) {
  padding-bottom: calc(var(--player-h) + var(--radio-h) + var(--player-gap));
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Covers reserve their final square and reveal softly once decoded. This keeps
   a browser-restored tab from flashing empty white boxes while responsive
   WebP variants arrive from cache or the network. */
.card__cover,
.playlist-head__cover,
.player__cover,
.dash-resume__cover,
.dash-tile__cover,
.hero__collage-item {
  background-color: var(--bg-soft);
  background-image: linear-gradient(135deg, var(--brand-soft), var(--bg-soft) 58%, var(--accent-soft));
}
.cover-image { opacity: 0; transition: opacity .18s ease-out; }
.cover-image.is-loaded { opacity: 1; }

button { font: inherit; cursor: pointer; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand); color: #fff; padding: 8px 12px;
}
.skip-link:focus { left: 8px; top: 8px; z-index: 999; }

/* ----------------- Top bar ----------------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 241, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .topbar { background: rgba(21, 17, 13, 0.86); }

.topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--brand);
  font-weight: 700; letter-spacing: 0.2px;
  font-size: 18px;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 10px;
}

.nav { display: flex; gap: clamp(12px, 1.5vw, 22px); margin-left: 8px; }
.nav a {
  color: var(--text-soft); font-weight: 500; font-size: 15px; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.nav a.nav__beta,
.nav a.nav__admin { color: var(--text-mute); }
.nav a.nav__beta:hover,
.nav a.nav__admin:hover { color: var(--text-soft); }
.nav a.nav__beta.is-active,
.nav a.nav__admin.is-active { color: var(--text-soft); border-bottom-color: var(--line-strong); }

@media (max-width: 1180px) {
  body.is-admin .topbar__inner {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px 18px;
  }
  body.is-admin .nav {
    order: 99;
    flex: 0 0 100%;
    overflow-x: auto;
    padding-top: 2px;
    scrollbar-width: thin;
  }
}

.topbar__tools {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}

.icon-btn {
  display: inline-grid; place-items: center;
  background: transparent; border: none; padding: 8px;
  border-radius: 10px; color: var(--text-soft);
  transition: background .15s ease, color .15s ease;
  min-width: 40px; min-height: 40px;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--text); }
.icon-btn[aria-pressed="true"] { color: var(--accent); }
.icon-btn--play {
  background: var(--text); color: var(--bg);
  width: 44px; height: 44px;
}
.icon-btn--play:hover { background: var(--brand); color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  min-height: 42px;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* The HTML `hidden` attribute must beat any author `display:` rule
   (e.g. `.btn { display: inline-flex }`), so make it explicit and !important. */
[hidden] { display: none !important; }
.btn--sm { padding: 8px 14px; font-size: 14px; }
.btn--primary {
  background: linear-gradient(180deg, #8a5c26, var(--brand));
  color: #fff;
  box-shadow: 0 2px 10px rgba(122, 79, 29, 0.25);
}
.btn--primary:hover { background: linear-gradient(180deg, #7a4f1d, #5e3c14); }
[data-theme="dark"] .btn--primary {
  background: linear-gradient(180deg, #ffc287, var(--brand));
  color: #2a1c0c;
  box-shadow: 0 2px 12px rgba(255, 180, 105, 0.18);
}
[data-theme="dark"] .btn--primary:hover { background: linear-gradient(180deg, #ffb469, #f0a45a); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { background: var(--bg-soft); }
.btn--secondary {
  background: var(--bg-soft);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: none;
}
.btn--secondary:hover { background: var(--brand-soft); border-color: var(--brand); }
.btn--block { width: 100%; }

/* ----------------- Layout ----------------- */

.main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  min-width: 0;
}

.view { display: block; animation: viewIn .32s ease; }
.view[hidden] { display: none; animation: none; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------- Hero (home) ----------------- */

.hero {
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 32px; align-items: center;
  background: linear-gradient(135deg, var(--brand-bg) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  margin-bottom: 36px;
  overflow: hidden;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 12px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05; margin: 0 0 16px;
  color: var(--text); letter-spacing: -0.5px;
}
.hero__sub {
  color: var(--text-soft); font-size: 18px; max-width: 540px;
  margin: 0 0 24px;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__price {
  margin-top: 20px; font-size: 13px; color: var(--text-mute);
}
.hero__price b { color: var(--text); }

.hero__art {
  position: relative; aspect-ratio: 1 / 1; max-width: 360px; justify-self: end;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff8ee, #f3d7a7);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero__art svg { width: 100%; height: 100%; }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding: 28px; }
  .hero__art { display: none; }
}

/* ----------------- Section header ----------------- */

.section__head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 18px;
}
.section__title {
  font-family: var(--font-display);
  font-size: 26px; margin: 0; color: var(--text); letter-spacing: -.3px;
}
.section__sub { color: var(--text-soft); font-size: 14px; margin: 4px 0 0; }

/* ----------------- Playlist grid ----------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.beta-manager {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 24px;
  border-top: 1px solid var(--line);
}
.beta-manager__title { margin: 0; font-size: 16px; }
.beta-manager__sub { margin: 4px 0 0; color: var(--text-soft); font-size: 14px; }
.beta-manager__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(520px, 100%);
}
.beta-manager__select { min-width: 260px; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;
  text-align: left; color: inherit;
  display: flex; flex-direction: column;
  width: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}
.card.is-playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.card:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
.card--favorite { border-color: #e7bd43; }
.card__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px; overflow: hidden;
  margin-bottom: 12px;
  background: var(--bg-soft);
}
.card__cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.card:hover .card__cover img { transform: scale(1.05); }
.card__tag {
  font-size: 12.5px; color: var(--text-soft); line-height: 1.4;
  margin: 1px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.4 * 12.5px);
}
.card__favorite {
  position: absolute; left: 10px; top: 10px;
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.9);
  color: #6c5840;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(39,30,18,.18);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.card__favorite svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.card__favorite:hover { transform: scale(1.04); background: #fff; }
[data-theme="dark"] .card__favorite {
  background: rgba(29, 24, 19, 0.78);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e8dcc4;
}
[data-theme="dark"] .card__favorite:hover { background: var(--bg-elev); }
.card__favorite.is-active {
  background: #f3c94d;
  border-color: #f3c94d;
  color: #3e2b0b;
}
.card__favorite.is-active svg { fill: currentColor; }
.card__play {
  position: absolute; right: 10px; bottom: 10px;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity .15s, transform .15s, background .15s;
  box-shadow: var(--shadow);
}
.card:hover .card__play,
.card:focus-within .card__play {
  opacity: 1; transform: translateY(0);
}
.card__play:hover { background: #5e3c14; }
[data-theme="dark"] .card__play { color: #1f1a14; }
[data-theme="dark"] .card__play:hover { background: #f0a45a; }

.card__title {
  font-size: 16px; font-weight: 600; color: var(--text);
  margin: 0 0 2px;
}
.card__meta {
  font-size: 13px; color: var(--text-mute);
  display: flex; align-items: center; gap: 8px;
}

.card__dot { color: var(--text-mute); }
.card__dur { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.card__actions { display: flex; margin-top: 12px; }
.card__move { width: 100%; }
.playlist-head__dur { font-variant-numeric: tabular-nums; }

/* ----------------- Playlist detail ----------------- */

.playlist-head {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  margin-bottom: 28px;
  align-items: end;
}
.playlist-head__cover {
  aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-soft);
}
.playlist-head__cover img { width: 100%; height: 100%; object-fit: cover; }
.playlist-head__meta {
  display: flex; flex-direction: column; gap: 6px;
}
.playlist-head__eyebrow {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-mute);
}
.playlist-head__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  margin: 4px 0 8px; line-height: 1.05;
  letter-spacing: -.5px; color: var(--text);
}
.playlist-head__tag { color: var(--text-soft); font-size: 18px; max-width: 600px; margin-bottom: 16px; }
.playlist-head__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.playlist-head__count { color: var(--text-mute); font-size: 14px; }

@media (max-width: 720px) {
  .playlist-head { grid-template-columns: 1fr; }
  .playlist-head__cover { max-width: 220px; }
}

/* ----------------- Track list ----------------- */

.tracks {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.track {
  display: grid;
  grid-template-columns: 40px 1fr 80px 40px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; color: inherit;
}
.track:last-child { border-bottom: none; }
.track:hover { background: var(--bg-soft); }
.track.is-playing { background: var(--accent-soft); }
.track__num {
  color: var(--text-mute); font-variant-numeric: tabular-nums; font-size: 14px;
  text-align: center;
}
.track.is-playing .track__num { color: var(--accent); }
.track__title { font-weight: 500; color: var(--text); font-size: 15px; }
.track__dur { color: var(--text-mute); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.track__btn {
  background: transparent; border: none; padding: 6px;
  border-radius: 999px; color: var(--text-soft);
  display: grid; place-items: center;
}
.track__btn:hover { background: var(--bg-elev); color: var(--brand); }

/* ----------------- Pricing ----------------- */

.pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 880px; margin: 0 auto;
}
.pricing--single {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}
.plan {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  position: relative;
}
.plan--pro {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.plan__badge {
  position: absolute; top: -10px; right: 22px;
  background: var(--accent); color: #fff;
  padding: 4px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 999px;
}
.plan__name {
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-mute); margin: 0;
}
.plan__price {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-size: 56px; line-height: 1; color: var(--text);
  letter-spacing: -1px;
}
.plan__price small { font-size: 16px; color: var(--text-mute); font-weight: 400; font-family: inherit; letter-spacing: 0; }
.plan__sub { color: var(--text-soft); margin: 0 0 18px; }
.plan__features {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.plan__features li {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--text); font-size: 15px;
}
.plan__features li::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px;
  background: var(--brand); border-radius: 999px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l4 4L19 6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l4 4L19 6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
}

@media (max-width: 720px) { .pricing { grid-template-columns: 1fr; } }
/* ----------------- Pricing controls (cadence toggle + code field) ----------------- */
.pricing__cadence { display: flex; gap: 8px; margin: 0 0 12px 0; justify-content: center; }
.pricing__cadence .btn { min-width: 120px; }
.pricing__cadence .btn.is-active {
  background: var(--brand-bg);
  border-color: var(--brand);
  color: var(--brand);
}
.pricing__code {
  max-width: 390px; margin: 10px auto 0; padding: 0;
  background: transparent; border: 0; border-radius: 0;
}
.discount-code__title {
  display: block;
  margin: 0 0 5px 0;
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
}
.discount-code__hint {
  margin: -1px 0 7px;
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.35;
}
.discount-code .form-row { margin-top: 0; gap: 6px; }
.discount-code .input { padding: 7px 9px; font-size: 13px; border-color: var(--line); }
.input--coupon-code { text-transform: uppercase; }
.discount-code .btn { padding: 7px 10px; font-size: 13px; }
.discount-code .form-msg { font-size: 12px; min-height: 16px; margin-top: 5px; }
.discount-code--modal {
  margin-top: 12px;
  padding: 8px 0 2px;
}
.plan__subprice { margin-top: -2px; margin-bottom: 6px; }
.site-foot__sep { color: var(--text-mute); }
.site-foot__link { color: inherit; text-decoration: underline; }


.payment-plan { text-align: left; }
.payment-price-line { margin: 10px 0; font-weight: 650; }
.payment-vat { margin-top: 14px; }
.payment-plan > label { display: block; margin-top: 14px; font-weight: 600; }
.payment-plan > label .input { display: block; width: 100%; margin-top: 6px; }
.payment-vat label { display: block; font-weight: 600; }
.payment-vat .input { margin-top: 6px; width: 100%; }
.payment-plan .form-msg { min-height: 1.4em; margin-top: 12px; }

/* ---- Redesigned payment / checkout page ---- */
.btn--lg { padding: 14px 22px; font-size: 16px; border-radius: 12px; }
.pay-wrap { max-width: 480px; margin: 0 auto; }
.pay-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.pay-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--brand)); }
.pay-hero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pay-hero__old { font-size: 20px; color: var(--text-mute); text-decoration: line-through; }
.pay-hero__now { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; color: var(--text); }
.pay-hero__suffix { font-size: 16px; color: var(--text-soft); font-weight: 600; }
.pay-hero__note { margin: 8px 0 0; color: var(--text-mute); font-size: 13.5px; }
.pay-card__divider { height: 1px; background: var(--line); margin: 20px 0; }
.pay-card__btitle { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); margin: 0 0 12px; }
.pay-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pay-benefit { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.pay-benefit__ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); margin-top: 1px; }
.pay-card__country { display: block; margin-top: 22px; font-weight: 600; font-size: 14px; }
.pay-card__country .input { display: block; width: 100%; margin-top: 6px; }
.pay-link { display: inline-block; background: none; border: none; padding: 0; margin-top: 14px; color: var(--brand); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.pay-link:hover { text-decoration: underline; }
[data-theme="dark"] .pay-link { color: var(--accent); }
.payment-vat { margin-top: 10px; }
.payment-vat label { display: block; font-weight: 600; font-size: 14px; }
.payment-vat .input { margin-top: 6px; width: 100%; }
.pay-coupon { margin-top: 16px; }
.pay-coupon__form { display: flex; gap: 8px; margin-top: 10px; }
.pay-coupon__form .input { flex: 1 1 auto; text-transform: uppercase; }
.pay-coupon.is-applied { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; }
.pay-coupon__check { display: inline-flex; color: var(--accent); }
.pay-coupon__label { font-weight: 600; font-size: 14px; color: var(--text); flex: 1 1 auto; }
.pay-coupon__remove { background: none; border: none; color: var(--text-soft); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.pay-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pay-actions .btn { width: 100%; }
.pay-card .form-msg { min-height: 1.3em; margin-top: 12px; }
.pay-trust { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.pay-trust__item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-mute); }
.pay-trust__ico { color: var(--accent); display: inline-flex; }
.pay-secure { text-align: center; font-size: 12px; color: var(--text-mute); margin: 12px 0 0; line-height: 1.5; }

/* pricing page — active-subscriber variant */
.pay-upsell__title { margin: 4px 0 0; font-size: 21px; letter-spacing: -0.01em; }
.pay-upsell__done { margin: 4px 0 2px; font-weight: 600; }
.pay-current { font-size: 13.5px; color: var(--text-mute); margin: 2px 0 0; }
.pay-current__title { margin: 0 0 4px; font-weight: 600; }
.pay-current__line { margin: 0 0 2px; }
.pay-included { font-size: 13.5px; margin: 10px 0 14px; }
.pay-included summary { cursor: pointer; font-weight: 600; color: var(--text-mute); }
.pay-included .pay-benefits { margin-top: 10px; font-size: 13.5px; }

/* switch-to-annual confirmation modal */
.switch-confirm__facts { margin: 4px 0 12px; }
.switch-confirm__fact { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.switch-confirm__fact:last-child { margin-bottom: 0; }
.switch-confirm__small { font-size: 13px; margin: 0 0 4px; }
.switch-confirm__ack { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.switch-confirm__ack input { margin-top: 2px; flex: 0 0 auto; width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
@media (max-width: 520px) { .pay-card { padding: 24px 18px; } .pay-hero__now { font-size: 38px; } }

@media (min-width: 920px) {
  .pricing__code {
    margin-left: calc((100% - 880px) / 2);
    margin-right: auto;
  }
}

/* ----------------- "Subscribed" confirmation ----------------- */

.confirm {
  max-width: 560px; margin: 60px auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--shadow);
}
.confirm__icon {
  width: 72px; height: 72px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.confirm h1 {
  font-family: var(--font-display);
  font-size: 32px; margin: 0 0 8px; letter-spacing: -.3px;
}
.confirm p { color: var(--text-soft); margin: 0 0 22px; }

/* ----------------- About / for cafés ----------------- */

.aboutgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin-top: 24px;
}
.feature {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.feature h3 { margin: 12px 0 6px; font-size: 17px; }
.feature p { color: var(--text-soft); margin: 0; font-size: 14.5px; }
.feature__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--brand-soft); color: var(--brand);
}
.aboutvalue {
  margin-top: 28px;
  padding: 24px;
  background: var(--brand-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.aboutvalue__head { max-width: 720px; }
.aboutvalue__head h3 { margin: 0; font-size: 20px; }
.aboutvalue__head p { color: var(--text-soft); margin: 8px 0 0; }
.aboutvalue__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 20px 0 0;
  padding: 0;
}
.aboutvalue__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}
.aboutvalue__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.aboutfaq {
  margin-top: 24px;
  max-width: 860px;
}
.aboutfaq h3 {
  margin: 0 0 12px;
  font-size: 18px;
}
.aboutfaq details {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.aboutfaq details:last-child { border-bottom: 1px solid var(--line); }
.aboutfaq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}
.aboutfaq p {
  color: var(--text-soft);
  margin: 10px 0 0;
  max-width: 780px;
}
@media (max-width: 900px) { .aboutvalue__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .aboutgrid, .aboutvalue__list { grid-template-columns: 1fr; }
  .aboutvalue { padding: 20px; }
}

/* ----------------- Player (footer) ----------------- */

.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgba(60, 40, 18, 0.10);
  animation: playerUp .45s cubic-bezier(.2, .8, .3, 1.05);
}
.player[hidden] { animation: none; }
@keyframes playerUp {
  from { transform: translateY(100%); opacity: .3; }
  to   { transform: none; opacity: 1; }
}
[data-theme="dark"] .player { background: rgba(29, 24, 19, 0.94); }
/* Two rows: the wide seek bar is worth its own line, while the desktop volume
   control remains a deliberately compact item on the right. */
.player__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  /* The flexible middle column keeps transport controls near the visual
     centre while the compact volume control remains right-aligned. */
  grid-template-columns: minmax(0, 1.74fr) auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "track controls . volume close"
    "progress progress progress progress progress";
  align-items: center;
  row-gap: 10px; column-gap: 18px;
}
.player__track { grid-area: track; }
.player__controls { grid-area: controls; }
.player__progress { grid-area: progress; }
.player__volume { grid-area: volume; }
.player__close { grid-area: close; }

.player__track {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.player__cover {
  width: 60px; height: 60px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg-soft); object-fit: cover;
  box-shadow: var(--shadow);
}
.player__meta { min-width: 0; }
.player__title {
  font-weight: 600; color: var(--text); font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__title--swap { animation: titleSwap .35s ease; }
@keyframes titleSwap {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.player__sub {
  color: var(--text-mute); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__subrow {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.player__subrow .player__sub { min-width: 0; }
.player__mode {
  max-width: 100%; min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-soft);
  padding: 2px 22px 2px 8px;
  font: 600 10.5px/1.35 var(--font-body);
  cursor: pointer;
}
.player__mode:hover { border-color: var(--brand); color: var(--brand); }
.player__mode:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
.player__next {
  color: var(--text-mute); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px; opacity: .85;
}

.player__controls {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

.player__progress {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.player__time { color: var(--text-mute); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 36px; }
.player__time:last-of-type { text-align: right; }

.player__volume {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  margin-left: 10px;
  color: var(--text-mute);
}
.player__volume input[type="range"] { flex: 0 0 100px; width: 100px; }

/* Stops playback and puts the bar away, so a visitor who is done previewing
   gets the whole page back. */
.player__close {
  background: transparent; border: 0; cursor: pointer;
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--text-mute);
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.player__close:hover { background: var(--bg-soft); color: var(--text); }
.player__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.player__collapse { display: none; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  background: transparent; flex: 1; height: 18px;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent) 0%, var(--accent) var(--fill, 0%),
    var(--line-strong) var(--fill, 0%), var(--line-strong) 100%);
}
input[type="range"]::-moz-range-track {
  height: 4px; background: var(--line-strong); border-radius: 999px;
}
input[type="range"]::-moz-range-progress {
  height: 4px; background: var(--accent); border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--brand);
  margin-top: -5px;
  border: 2px solid var(--bg-elev);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--brand); border: 2px solid var(--bg-elev);
}
#progress { flex: 1; }

/* On smaller screens, restack the player into 2 rows */
@media (max-width: 880px) {
  .player__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "track controls close"
      "progress progress progress";
    gap: 8px 12px;
  }
  .player__track { grid-area: track; }
  .player__controls { grid-area: controls; }
  .player__progress { grid-area: progress; }
  .player__close { grid-area: close; }
  .player__volume { display: none; }
  :root { --player-h: 120px; }
}

/* ----------------- Misc ----------------- */

.callout {
  background: var(--brand-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px; color: var(--text-soft);
  display: flex; gap: 12px; align-items: center;
}

.site-legal-footer {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.9;
  padding: 18px 16px 26px;
}
.site-legal-footer a { color: var(--text-soft); }
.site-legal-footer a:hover { color: var(--brand); }

footer.site-foot {
  margin-top: 40px;
  text-align: center;
  color: var(--text-mute); font-size: 13px;
}

/* =========================================================
   Production additions: auth, locks, modal, admin, mobile
   ========================================================= */

/* ----- topbar auth slot ----- */
.auth-slot { display: flex; align-items: center; gap: 8px; }
.auth-slot .pill { font-size: 12px; }

/* ----- pills / badges ----- */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--brand-soft);
  color: var(--brand);
  line-height: 1.6;
}
.pill--ok { background: #e6f4d8; color: #4a6a1a; }
.pill--warn { background: #fde8c5; color: #8a4a0a; }
.pill--sm { font-size: 10px; padding: 1px 6px; }

/* When a pill is used as an anchor it should still look like a badge. */
a.pill { text-decoration: none; transition: filter .15s ease, transform .08s ease; }
a.pill:hover { text-decoration: none; filter: brightness(0.96); transform: translateY(-1px); }
a.pill--ok { color: #4a6a1a; }
a.pill--warn { color: #8a4a0a; }

[data-theme="dark"] .pill--ok { background: #2a3818; color: #c8e08a; }
[data-theme="dark"] .pill--warn { background: #3a2a14; color: #f0c989; }
[data-theme="dark"] a.pill--ok { color: #c8e08a; }
[data-theme="dark"] a.pill--warn { color: #f0c989; }

/* ----- locked tracks ----- */
.track--locked { opacity: 0.62; }
.track--locked:hover { opacity: 0.85; background: var(--bg-soft); }
.track--locked .track__title { color: var(--text-mute); }
.track--locked .lock-icon { display: inline-flex; align-items: center; color: var(--text-mute); }
.track--locked .lock-icon svg { display: block; }
.track--free .track__title { font-weight: 600; }

/* ----- modal ----- */
.no-scroll { overflow: hidden; }
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 12, 4, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: fadeIn .15s ease-out;
}
.modal {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: popIn .15s ease-out;
}
.modal__inner { padding: 28px; position: relative; }
.modal__inner h2 { margin: 0 0 8px 0; font-size: 22px; }
.modal__inner h3.modal__sub { margin: 16px 0 6px 0; font-size: 15px; }
.modal__close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  font-size: 24px; line-height: 1;
  color: var(--text-soft);
  cursor: pointer; border-radius: 8px;
}
.modal__close:hover { background: var(--bg-soft); color: var(--text); }
.modal__cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.modal__hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0 8px; }

@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes popIn { from {opacity:0; transform: translateY(8px) scale(.98)} to {opacity:1; transform: none} }

/* ----- form ----- */
.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color .15s ease;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input:disabled { opacity: .65; cursor: not-allowed; }
.input--num { max-width: 110px; }

.form-row { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.form-row .input { flex: 1 1 auto; min-width: 0; }
.form-msg { font-size: 13px; min-height: 18px; margin-top: 6px; color: var(--text-soft); }
.form-msg--err { color: #b3322c; }
.form-msg--ok { color: #4a6a1a; }
.form-msg--warn { color: #8a4a0a; }

[data-theme="dark"] .form-msg--err { color: #ff8a82; }
[data-theme="dark"] .form-msg--ok { color: #c8e08a; }
[data-theme="dark"] .form-msg--warn { color: #f0c989; }

/* Auth view */
.auth-form {
  max-width: 420px;
  margin: 40px auto;
  background: var(--bg-elev);
  padding: 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px;
}
.auth-form h1 { margin: 0; font-size: 24px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-soft); font-weight: 600; }
.auth-form__alt { text-align: center; font-size: 14px; margin-top: 4px; }
.auth-form__alt .muted { color: var(--text-mute); }
.auth-form__help { margin: -6px 0 0; text-align: right; font-size: 13px; }
.auth-form__help a { text-decoration: underline; text-underline-offset: 3px; }

/* Account view */
.card-pad {
  max-width: 720px;
  margin: 32px auto;
  background: var(--bg-elev);
  padding: 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
/* Screens built around wide tables (admin) need the full page width, so every
   column — including the row actions — is visible without scrolling. */
.card-pad--wide { max-width: 1180px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 14px 0 22px; }
.kv > div:nth-child(odd) { color: var(--text-soft); font-size: 13px; }

/* ----- admin ----- */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 18px 0;
}
.tab {
  background: transparent; border: 0; padding: 10px 14px;
  color: var(--text-soft); font-weight: 600;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  border-radius: 0;
}
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.admin-panel { display: flex; flex-direction: column; gap: 18px; }
.admin-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.admin-card h3 { margin: 0 0 14px 0; font-size: 16px; }
.admin-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 14px;
  margin-bottom: 12px;
}
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); font-weight: 600; }
.admin-form__notes { grid-column: 1 / -1; }

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.tbl code { background: var(--brand-soft); color: var(--brand); padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.tbl__actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
/* Row actions keep their own column: the cell never shrinks below the buttons,
   and a narrow window scrolls the table instead of hiding them. */
.tbl__actions-cell { width: 1%; white-space: nowrap; }
.tbl__actions-cell .tbl__actions { flex-wrap: nowrap; }

/* ----- private admin data dashboard ----- */
.admin-data,
.admin-todo { max-width: 1120px; margin: 0 auto; }
.data-head,
.todo-head { align-items: flex-end; }
.data-eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.data-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.data-stat {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(130% 150% at 100% 0%, var(--brand-soft), transparent 58%),
    var(--bg-elev);
  box-shadow: var(--shadow);
}
.data-stat--ok { border-top: 3px solid #47966c; }
.data-stat--trial { border-top: 3px solid var(--accent); }
.data-stat--coupon { border-top: 3px solid #a776b7; }
.data-stat__label,
.data-stat__note { display: block; color: var(--text-mute); font-size: 12px; }
.data-stat__label { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.data-stat__value {
  display: block;
  margin: 5px 0 2px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}
.data-breakdowns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 24px;
}
.data-breakdown {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-elev);
}
.data-breakdown__title { margin: 0 0 13px; font-size: 15px; }
.data-bars { display: flex; flex-direction: column; gap: 10px; }
.data-bar__head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-soft); }
.data-bar__head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-bar__track { height: 7px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: var(--bg-soft); }
.data-bar__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--brand)); }
.data-clients {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
}
.data-clients__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.data-clients__head h2 { margin: 0 0 2px; font-size: 21px; }
.data-search { width: min(380px, 100%); }
.client-cards { display: flex; flex-direction: column; gap: 8px; }
.client-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }
.client-card[open] { border-color: var(--line-strong); background: var(--bg-elev); }
.client-card__summary {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}
.client-card__summary::-webkit-details-marker { display: none; }
.client-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--brand);
  background: var(--brand-soft);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}
.client-card__identity { display: flex; min-width: 0; flex-direction: column; }
.client-card__identity strong,
.client-card__identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-card__identity span { color: var(--text-mute); font-size: 12px; }
.client-card__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.data-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--bg-soft);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.data-pill--ok { color: #247148; border-color: rgba(47,158,94,.34); background: rgba(47,158,94,.1); }
.data-pill--warn { color: #a85b20; border-color: rgba(200,127,58,.35); background: rgba(200,127,58,.1); }
.data-pill--coupon { color: #825194; border-color: rgba(130,81,148,.3); background: rgba(130,81,148,.1); }
[data-theme="dark"] .data-pill--ok { color: #70d29d; }
[data-theme="dark"] .data-pill--warn { color: #f0b27d; }
[data-theme="dark"] .data-pill--coupon { color: #d6a2e5; }
.client-card__body { padding: 0 16px 17px; border-top: 1px solid var(--line); }
.client-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px 18px; padding: 17px 0; }
.client-field { min-width: 0; }
.client-field__label,
.client-field__value { display: block; overflow-wrap: anywhere; }
.client-field__label { margin-bottom: 2px; color: var(--text-mute); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.client-field__value { color: var(--text); font-size: 13px; }
.client-card__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.client-card__groups > div { min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); }
.client-card__groups h3 { margin: 0 0 7px; font-size: 13px; }
.client-list { margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 12px; }
.client-list li + li { margin-top: 5px; }

/* ----- private admin ToDo ----- */
.todo-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.todo-head__actions { display: flex; flex: none; align-items: flex-end; flex-direction: column; gap: 10px; }
.todo-sections { display: flex; flex-direction: column; gap: 24px; margin-top: 18px; }
.todo-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.todo-section__head h2 { margin: 0; font-family: var(--font-display); font-size: 21px; }
.todo-section__add { padding: 5px 7px; border: 0; background: transparent; color: var(--text-mute); font: inherit; font-size: 12px; cursor: pointer; }
.todo-section__add:hover { color: var(--accent); }
.todo-task-list { display: flex; flex-direction: column; gap: 9px; }
.todo-task {
  position: relative;
  padding: 14px 14px 14px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: 0 2px 10px rgba(47, 31, 12, .045);
  transition: border-color .15s, box-shadow .15s, opacity .15s, transform .15s;
}
.todo-task:not(.is-readonly):hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); }
.todo-task.is-complete { border-left: 3px solid #47966c; box-shadow: none; }
.todo-task.is-saving { opacity: .58; pointer-events: none; }
.todo-task.is-dragging { opacity: .38; transform: scale(.99); }
.todo-task.is-drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.todo-task__top { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: flex-start; gap: 10px; }
.todo-task.is-readonly .todo-task__main { grid-column: 1 / -1; }
.todo-task__main { min-width: 0; }
.todo-task__complete {
  width: 21px; height: 21px; margin-top: 1px; padding: 0;
  border: 1.5px solid var(--text-mute); border-radius: 50%;
  background: transparent; color: transparent; cursor: pointer;
  font-size: 12px; font-weight: 800; line-height: 18px;
}
.todo-task__complete:hover { border-color: #47966c; background: color-mix(in srgb, #47966c 12%, transparent); color: #47966c; }
.todo-task__title { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.45; text-align: left; cursor: pointer; }
.todo-task__title:hover { color: var(--accent); }
.todo-task__title--static { cursor: default; }
.todo-task__title--static:hover { color: var(--text); }
.todo-task__actions { display: flex; align-items: center; gap: 2px; opacity: .46; transition: opacity .15s; }
.todo-task:hover .todo-task__actions, .todo-task__actions:focus-within { opacity: 1; }
.todo-task__drag,
.todo-task__move,
.todo-task__edit {
  display: inline-grid; place-items: center; width: 27px; height: 27px; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: var(--text-mute);
  font: inherit; font-size: 15px; cursor: pointer;
}
.todo-task__drag { cursor: grab; font-size: 18px; }
.todo-task__drag:active { cursor: grabbing; }
.todo-task__drag:hover, .todo-task__move:hover, .todo-task__edit:hover { background: var(--bg-soft); color: var(--text); }
.todo-task__move:disabled { opacity: .22; cursor: default; }
.todo-items { display: flex; flex-direction: column; gap: 5px; margin: 11px 0 0; padding: 0; list-style: none; color: var(--text-soft); font-size: 13px; }
.todo-items li { display: flex; align-items: flex-start; gap: 7px; }
.todo-item__body { flex: 1; min-width: 0; }
.todo-item__text { min-width: 0; overflow-wrap: anywhere; }
.todo-item__notes { margin: 3px 0 0; padding-left: 10px; border-left: 2px solid var(--line); color: var(--text-mute); }
.todo-item__notes p { margin: 0 0 5px; overflow-wrap: anywhere; }
.todo-item__notes p:last-child { margin-bottom: 0; }
.todo-items li.is-done .todo-item__notes { text-decoration: none; }
.todo-items li::before { content: "•"; flex: none; color: var(--text-mute); }
.todo-items li:has(.todo-check, .todo-item__toggle)::before { content: none; }
.todo-items li.is-done { color: var(--text-mute); text-decoration: line-through; text-decoration-color: rgba(71,150,108,.7); }
.todo-items li.is-saving { opacity: .65; }
.todo-item__label { display: flex; min-width: 0; align-items: flex-start; gap: 8px; cursor: pointer; }
.todo-item__toggle { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #47966c; cursor: pointer; }
.todo-item__toggle:disabled { cursor: wait; }
.todo-item__edit { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1.45; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.todo-item__edit:hover { color: var(--text); }
.todo-check { flex: none; width: 15px; color: #47966c; font-weight: 800; text-decoration: none; }
.todo-depth-1 { margin-left: 20px; }
.todo-depth-2 { margin-left: 40px; }
.todo-depth-3 { margin-left: 60px; }
.todo-archive { margin-top: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-soft); }
.todo-archive > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; cursor: pointer; font-weight: 700; list-style: none; }
.todo-archive > summary::-webkit-details-marker { display: none; }
.todo-archive > summary::after { content: "▾"; margin-left: auto; color: var(--text-mute); transition: transform .2s; }
.todo-archive[open] > summary::after { transform: rotate(180deg); }
.todo-task-list--archive { padding: 0 12px 12px; }
.todo-empty { text-align: center; }
.todo-empty p { margin-bottom: 0; }
.modal:has(.todo-task-editor) { max-width: 760px; }
.todo-task-editor { padding: 27px 28px 24px; }
.todo-task-editor > h2 { margin: 4px 0 20px; }
.todo-task-editor__label { display: grid; gap: 7px; color: var(--text); font-size: 12px; font-weight: 700; }
.todo-task-editor__title { min-height: 78px; resize: vertical; font-size: 16px; font-weight: 600; line-height: 1.45; }
.todo-task-editor__section-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.todo-task-editor__section { height: 43px; }
.todo-task-editor__subhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 23px 0 10px; }
.todo-task-editor__subhead h3 { margin: 0 0 2px; font-size: 15px; }
.todo-task-editor__subhead p { margin: 0; }
.todo-task-editor__items { display: flex; flex-direction: column; gap: 8px; }
.todo-task-editor__empty { margin: 0; padding: 15px; border: 1px dashed var(--line); border-radius: 11px; text-align: center; }
.todo-subtask-editor {
  display: grid; grid-template-columns: 25px 18px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  margin-left: calc(var(--todo-depth, 0) * 18px); padding: 8px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-soft);
  transition: border-color .15s, opacity .15s, transform .15s;
}
.todo-subtask-editor.is-dragging { opacity: .45; }
.todo-subtask-editor.is-drop-target { border-color: var(--accent); }
.todo-subtask-editor.is-invalid .todo-subtask-editor__text { border-color: var(--danger); }
.todo-subtask-editor__note { grid-column: 1 / -1; margin: 0; }
.todo-subtask-editor__drag,
.todo-subtask-editor__action { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-mute); font: inherit; cursor: pointer; }
.todo-subtask-editor__drag { font-size: 18px; cursor: grab; }
.todo-subtask-editor__drag:active { cursor: grabbing; }
.todo-subtask-editor__drag:hover, .todo-subtask-editor__action:hover { background: var(--bg-elev); color: var(--text); }
.todo-subtask-editor__action:disabled { opacity: .25; cursor: default; }
.todo-subtask-editor__check { width: 17px; height: 17px; accent-color: #47966c; }
.todo-subtask-editor__text { min-height: 54px; padding: 9px 10px; resize: vertical; line-height: 1.4; }
.todo-subtask-editor__actions { display: flex; gap: 1px; }
.todo-subtask-editor__remove { color: var(--danger); font-size: 18px; }
.todo-task-editor__status { min-height: 20px; margin: 10px 0 0; }
.todo-task-editor__status.is-dirty { color: #9a5b08; font-weight: 700; }
.todo-task-editor__status.is-error { color: var(--danger); font-weight: 700; }
.todo-task-editor__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.todo-task-editor__footer-main { display: flex; justify-content: flex-end; gap: 8px; margin-left: auto; }

@media (max-width: 900px) {
  .data-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-breakdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .data-head,
  .todo-head,
  .data-clients__head { align-items: flex-start; flex-direction: column; }
  .todo-head__actions { width: 100%; align-items: stretch; }
  .todo-head__actions .btn { width: 100%; }
  .data-stats,
  .data-breakdowns { grid-template-columns: 1fr; }
  .data-clients { padding: 14px; }
  .data-search { width: 100%; }
  .client-card__summary { grid-template-columns: auto minmax(0, 1fr); }
  .client-card__badges { grid-column: 1 / -1; justify-content: flex-start; }
  .client-fields,
  .client-card__groups { grid-template-columns: 1fr; }
  .todo-task { padding: 13px 11px; }
  .todo-task__top { grid-template-columns: 22px minmax(0, 1fr); }
  .todo-task__actions { grid-column: 2; justify-content: flex-end; opacity: 1; }
  .todo-task.is-readonly .todo-task__main { grid-column: 1 / -1; }
  .todo-section__head { align-items: flex-start; }
  .todo-task-editor { padding: 23px 16px 18px; }
  .todo-task-editor__subhead { align-items: flex-start; flex-direction: column; }
  .todo-task-editor__add { width: 100%; }
  .todo-subtask-editor { grid-template-columns: 23px 18px minmax(0, 1fr); margin-left: calc(var(--todo-depth, 0) * 8px); }
  .todo-subtask-editor__actions { grid-column: 3; justify-content: flex-end; }
  .todo-task-editor__footer { align-items: stretch; flex-direction: column-reverse; }
  .todo-task-editor__footer-main { width: 100%; margin-left: 0; }
  .todo-task-editor__footer-main .btn { flex: 1; }
  .todo-task-editor__delete { width: 100%; }
  .todo-depth-2 { margin-left: 20px; }
  .todo-depth-3 { margin-left: 30px; }
}

.btn--xs { font-size: 12px; padding: 4px 10px; }
.btn--danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
}
.btn--danger:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 76%, var(--danger) 24%);
  border-color: var(--danger);
}

.callout--err {
  border-left: 3px solid #c84a40;
  background: #fdebe8;
  color: #82231e;
}
[data-theme="dark"] .callout--err { background: #3a1c18; color: #ff8a82; }

.muted { color: var(--text-mute); }
.small { font-size: 13px; }

/* ----- toast ----- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--player-h) + 16px);
  transform: translateX(-50%) translateY(40px);
  background: var(--text);
  color: var(--bg-elev);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 1100;
  max-width: calc(100vw - 32px);
}
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--err { background: #b3322c; color: #fff; }

/* =========================================================
   Mobile / narrow-viewport adjustments
   ========================================================= */

@media (max-width: 720px) {
  /* Topbar shrinks; nav can wrap below the brand */
  .topbar__inner {
    flex-wrap: wrap;
    padding: 8px 14px;
    gap: 8px;
    height: auto;
    min-height: var(--header-h);
  }
  .nav { order: 99; flex: 0 0 100%; gap: 14px; padding-top: 4px; overflow-x: auto; }
  .nav a { font-size: 14px; }
  .topbar__tools { gap: 6px; }
  body.is-admin .topbar__tools {
    order: 50;
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: thin;
  }
  .auth-slot .btn { padding: 6px 10px; }

  /* Hero: stack the art under the text and shrink */
  .hero { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; }
  .hero__title { font-size: clamp(28px, 6vw, 36px); }
  .hero__art { max-width: 240px; margin: 0 auto; }

  /* Section heads / playlists */
  .section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section__title { font-size: 22px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .card__cover img { aspect-ratio: 1 / 1; height: auto; }
  .card__title { font-size: 15px; }

  /* Playlist detail */
  .playlist-head { grid-template-columns: 1fr; gap: 14px; }
  .playlist-head__cover { max-width: 160px; }
  .playlist-head__title { font-size: 26px; }
  .playlist-head__row { flex-wrap: wrap; gap: 8px; }

  /* Tracks: shrink number col, allow wrap */
  .tracks { padding: 0 6px; }
  .track { grid-template-columns: 30px 1fr auto auto; gap: 10px; padding: 10px 8px; }
  .track__title { font-size: 14px; min-width: 0; }
  .track__title { overflow: hidden; text-overflow: ellipsis; }

  .beta-manager { flex-direction: column; align-items: stretch; }
  .beta-manager__controls { min-width: 0; flex-direction: column; align-items: stretch; }
  .beta-manager__select { min-width: 0; }

  /* Pricing */
  .pricing { grid-template-columns: 1fr; gap: 16px; }
  .plan { padding: 22px; }

  /* Mobile mini player: a slim progress line, cover, two metadata lines and
     the two most useful transport actions. The complete player opens in place
     on tap, keeping playback continuous rather than navigating to another UI. */
  .player__inner {
    position: relative;
    height: 100px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "progress progress"
      "track    controls";
    grid-template-rows: 5px minmax(0, 1fr);
    gap: 0 8px;
    padding: 0 12px;
  }
  .player__track {
    grid-area: track;
    min-width: 0;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .player__track:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
  .player__cover { width: 58px; height: 58px; border-radius: 9px; }
  .player__meta { min-width: 0; }
  .player__title {
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
  }
  .player__subrow { display: block; }
  .player__sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .player__mode, .player__next { display: none; }
  .player__progress { grid-area: progress; min-height: 0; height: 5px; }
  .player__progress .player__time { display: none; }
  #progress { pointer-events: none; height: 10px; margin: -3px 0; }
  #progress::-webkit-slider-runnable-track { height: 3px; }
  #progress::-moz-range-track, #progress::-moz-range-progress { height: 3px; }
  #progress::-webkit-slider-thumb, #progress::-moz-range-thumb { width: 0; height: 0; border: 0; margin-top: 0; }
  .player__controls { grid-area: controls; gap: 2px; }
  .player__controls .icon-btn { display: none; min-width: 44px; min-height: 44px; padding: 6px; }
  .player__controls #btn-play, .player__controls #btn-next { display: inline-grid; }
  .player__controls #btn-play { width: 52px; height: 52px; border-radius: 50%; }
  .player__close, .player__volume { display: none; }
  .player__collapse { display: none; }
  :root { --player-h: 100px; }

  /* Expanded mobile sheet: a compact, three-part listening surface. The
     shared player markup keeps playback state intact; these rules only reshape
     it on phones. Volume and the duplicate song-type filter stay out of this
     view, where the page already provides that filter. */
  .player.player--expanded .player__inner {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "track    collapse close"
      "progress progress progress"
      "controls controls controls";
    grid-template-rows: auto 32px 56px;
    gap: 14px 10px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .player.player--expanded .player__track { align-items: center; gap: 12px; cursor: default; }
  .player.player--expanded .player__cover { width: 84px; height: 84px; border-radius: 12px; }
  .player.player--expanded .player__title {
    font-size: 16px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
  }
  .player.player--expanded .player__subrow { display: block; }
  .player.player--expanded .player__sub { margin-top: 3px; }
  .player.player--expanded .player__mode { display: none; }
  .player.player--expanded .player__progress { min-height: 32px; height: 32px; gap: 10px; }
  .player.player--expanded .player__progress .player__time { display: block; }
  .player.player--expanded #progress { pointer-events: auto; height: 32px; margin: 0; }
  .player.player--expanded #progress::-webkit-slider-runnable-track { height: 4px; }
  .player.player--expanded #progress::-moz-range-track, .player.player--expanded #progress::-moz-range-progress { height: 4px; }
  .player.player--expanded #progress::-webkit-slider-thumb { width: 14px; height: 14px; border: 2px solid var(--bg-elev); margin-top: -5px; }
  .player.player--expanded #progress::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--bg-elev); }
  .player.player--expanded .player__controls { justify-content: center; gap: 18px; }
  .player.player--expanded .player__controls .icon-btn { display: inline-grid; }
  .player.player--expanded .player__controls #btn-shuffle,
  .player.player--expanded .player__controls #btn-repeat { display: none; }
  .player.player--expanded .player__controls #btn-prev,
  .player.player--expanded .player__controls #btn-next { width: 48px; height: 48px; }
  .player.player--expanded .player__controls #btn-play { width: 56px; height: 56px; }
  .player.player--expanded .player__close { display: grid; grid-area: close; width: 40px; height: 40px; align-self: start; }
  .player.player--expanded .player__collapse {
    display: grid; grid-area: collapse; place-items: center; align-self: start;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-mute);
  }
  .player.player--expanded .player__collapse:hover { background: var(--bg-soft); color: var(--text); }
  .player.player--expanded .player__collapse:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .player.player--expanded { box-shadow: 0 -12px 36px rgba(60, 40, 18, 0.16); }
  :root { --player-h: 100px; }

  /* Player: the track gets a full-width row of its own so the song title is
     readable instead of being cut at half the viewport. Controls and the seek
     bar move to their own rows below it. */

  /* Modal */
  .modal { max-width: 100%; }
  .modal__inner { padding: 22px 18px; }

  /* Admin */
  .admin-form { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
  .kv > div:nth-child(odd) { font-weight: 600; }

  /* About grid */
  .aboutgrid { grid-template-columns: 1fr; gap: 14px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
  .auth-slot .btn { font-size: 12px; padding: 5px 8px; }
  .brand__name { font-size: 16px; }
  .player__cover { width: 40px; height: 40px; }
}

/* =========================================================
   Language switcher (CA / ES / EN)
   ========================================================= */

.lang-switcher {
  display: inline-flex; position: relative; flex-shrink: 0;
  min-width: 64px; min-height: 44px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
}
.language-flag { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; width: 100%; }
.language-flag svg { border-radius: 2px; }
.language-flag [hidden] { display: none; }
.lang-switcher select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  font: inherit; cursor: pointer;
}
.lang-switcher:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; }

/* =========================================================
   Radio mode — hero button + ribbon above the player
   ========================================================= */

/* The big "Radio mode" CTA in the hero. Sits between primary plans CTA
   and the ghost "how it works" link. Visually distinct — a warm caramel
   gradient with a subtle pulse — but not louder than .btn--primary. */
.btn--radio {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--line-strong);
  padding: 8px 14px 8px 12px;
  position: relative;
  overflow: hidden;
}
.btn--radio:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--text);
  text-decoration: none;
}
.btn-radio__icon {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.btn-radio__txt {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15;
  text-align: left;
}
.btn-radio__label { font-weight: 700; font-size: 15px; letter-spacing: .1px; }
.btn-radio__sub   { font-weight: 400; font-size: 11.5px; opacity: 0.85; }

[data-theme="dark"] .btn--radio {
  background: var(--bg-elev);
  color: var(--text);
}
[data-theme="dark"] .btn--radio:hover {
  background: var(--brand-soft);
  color: var(--text);
}
[data-theme="dark"] .btn-radio__icon { background: var(--accent-soft); }

/* Discreet radio ribbon — sits above the player when radio mode is active.
   Small font, low contrast, no shouting. */
.radio-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--player-h);
  z-index: 59;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-soft);
  animation: radioBarIn .25s ease-out;
}
.radio-bar[hidden] { display: none; }
.radio-bar__icon {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.radio-bar__label {
  font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
  font-size: 11px;
  color: var(--accent);
}
.radio-bar__sep { color: var(--text-mute); }
.radio-bar__name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.radio-bar__btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  flex-shrink: 0;
}
.radio-bar__btn:hover { background: var(--bg-elev); color: var(--text); }
.radio-bar__close {
  background: transparent; border: 0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--text-mute);
  font-size: 18px; line-height: 1;
  flex-shrink: 0;
}
.radio-bar__close:hover { background: var(--bg-elev); color: var(--text); }

/* Lift the toast when the ribbon is showing so nothing overlaps. The body
   padding for this case lives next to the base rule above. */
body.has-radio-bar .toast { bottom: calc(var(--player-h) + var(--radio-h) + 16px); }

@keyframes radioBarIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .radio-bar { min-height: 44px; padding: 0 12px; font-size: 12px; gap: 6px; }
  .radio-bar__label { font-size: 10px; letter-spacing: .4px; }
  .radio-bar__btn { min-height: 44px; padding: 2px 8px; font-size: 11px; }
  .radio-bar__close { width: 44px; height: 44px; }
  .btn--radio { padding: 8px 12px; }
  .btn-radio__sub { display: none; }
  .btn-radio__icon { width: 26px; height: 26px; }
}

/* ── Player button tooltips ───────────────────────────────────────────── */
.icon-btn[title] { position: relative; }

.icon-btn[title]::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 200;
}

/* small arrow */
.icon-btn[title]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 200;
}

.icon-btn[title]:hover::after,
.icon-btn[title]:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }
.icon-btn[title]:hover::before { transform: translateX(-50%); }


/* ---- Playlist energy rating (1-5 dots) ---- */
.card__energy {
  margin: 2px 0 4px;
}
.energy {
  display: inline-flex; align-items: center; gap: 7px;
}
.energy__label {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1;
}
.energy__dots { display: inline-flex; align-items: center; gap: 5px; }
.energy__dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(120, 96, 64, .26);
  transition: background .15s ease, transform .15s ease;
}
.energy__dot.is-on {
  background: #e0a92a;
  box-shadow: 0 0 4px rgba(224,169,42,.55);
}

/* Energy badge on the playlist detail header */
.playlist-head__energy { margin: 4px 0 10px; }

/* =========================================================
   2026 redesign — subscriber dashboard, mood chips,
   now-playing equalizer, hero cover collage
   ========================================================= */

/* ---- Mood / moment filter chips ---- */
.playback-mode {
  min-width: 0;
  max-width: 100%;
  margin: 18px 0 24px;
}
.playback-mode__label {
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
}
.playback-mode__options {
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  gap: 3px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  scrollbar-width: none;
}
.playback-mode__options::-webkit-scrollbar { display: none; }
.playback-mode__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: transparent;
  color: var(--text-soft);
  font: 600 13px/1.2 var(--font-body);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.playback-mode__option:hover { color: var(--brand); transform: translateY(-1px); }
.playback-mode__option.is-active {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow);
}
[data-theme="dark"] .playback-mode__option.is-active { color: #1f1a14; }
.playback-mode__option:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
.playback-mode__icon { display: grid; place-items: center; }
.playback-mode__icon svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero .playback-mode { margin-bottom: 0; }
.hero > div { min-width: 0; }
.playlist-head + .playback-mode { margin-top: -8px; }

.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 22px;
}
.chip {
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="dark"] .chip.is-active { color: #1f1a14; }
.chips-empty { padding: 8px 0 36px; }
.card--mode-empty .card__cover img { filter: grayscale(.72); opacity: .48; }
.card--mode-empty .card__play { opacity: .55; }
.tracks__empty {
  margin: 0;
  padding: 24px;
  color: var(--text-mute);
  text-align: center;
}

/* ---- Subscriber dashboard ---- */
.dash { margin: 4px 0 40px; }
.dash__head { margin: 6px 0 22px; }
.dash__greet {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 52px);
  margin: 0 0 6px;
  letter-spacing: -.5px; line-height: 1.05;
  color: var(--text);
}
.dash__sub { color: var(--text-soft); margin: 0; font-size: 16px; }

.dash__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.dash__actions--single { grid-template-columns: minmax(0, 520px); }

.dash-resume {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 20px 14px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-resume:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.dash-resume:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
.dash-resume.is-playing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dash-resume__cover {
  position: relative;
  width: 88px; height: 88px;
  border-radius: 14px; overflow: hidden; flex-shrink: 0;
  background: var(--bg-soft);
}
.dash-resume__cover img { width: 100%; height: 100%; object-fit: cover; }
.dash-resume__meta { min-width: 0; }
.dash-resume__label {
  font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
  margin-bottom: 4px;
}
.dash-resume__name {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.15; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-resume__play {
  margin-left: auto;
  width: 54px; height: 54px; flex-shrink: 0;
  background: var(--brand); color: #fff;
  border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.dash-resume:hover .dash-resume__play { transform: scale(1.06); }
[data-theme="dark"] .dash-resume__play { color: #2a1c0c; }

.dash-radio {
  display: flex; align-items: center; gap: 14px;
  border: none; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, var(--accent) 0%, #e09a52 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  font: inherit;
  box-shadow: 0 8px 24px rgba(200, 127, 58, 0.28);
  transition: transform .15s ease, filter .15s ease;
}
.dash-radio:hover { transform: translateY(-2px); filter: saturate(1.1) brightness(1.02); }
.dash-radio:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
.dash-radio__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  display: grid; place-items: center;
}
.dash-radio__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dash-radio__label { font-weight: 700; font-size: 17px; }
.dash-radio__sub { font-size: 13px; opacity: .92; }
[data-theme="dark"] .dash-radio { color: #1f1a14; }
[data-theme="dark"] .dash-radio__icon { background: rgba(31, 26, 20, 0.16); }

.dash__suggest-title {
  font-family: var(--font-display);
  font-size: 22px; margin: 0 0 14px;
  letter-spacing: -.2px; color: var(--text);
}
.dash__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.dash-tile { cursor: pointer; min-width: 0; }
.dash-tile:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; border-radius: 14px; }
.dash-tile__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow);
}
.dash-tile__cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.dash-tile:hover .dash-tile__cover img { transform: scale(1.05); }
.dash-tile.is-playing .dash-tile__cover { box-shadow: 0 0 0 3px var(--accent); }
.dash-tile__play {
  position: absolute; right: 10px; bottom: 10px;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity .15s, transform .15s;
  box-shadow: var(--shadow);
}
.dash-tile:hover .dash-tile__play,
.dash-tile:focus-within .dash-tile__play { opacity: 1; transform: translateY(0); }
[data-theme="dark"] .dash-tile__play { color: #2a1c0c; }
.dash-tile__name {
  margin-top: 9px;
  font-weight: 600; font-size: 14.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- "Now playing" equalizer badge (cards + tiles) ---- */
.eq {
  position: absolute; left: 10px; bottom: 10px;
  display: none;
  align-items: flex-end; gap: 3px;
  height: 16px;
  padding: 7px 8px;
  background: rgba(20, 12, 4, 0.55);
  border-radius: 9px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: content-box;
  pointer-events: none;
}
.is-playing .eq { display: inline-flex; }
.eq span {
  width: 3px; height: 30%;
  background: #ffd28b;
  border-radius: 2px;
  animation: eqBar 1s ease-in-out infinite;
}
.eq span:nth-child(2) { animation-delay: .22s; }
.eq span:nth-child(3) { animation-delay: .48s; }
@keyframes eqBar {
  0%, 100% { height: 30%; }
  50%      { height: 100%; }
}
body:not(.is-audio-playing) .eq span { animation-play-state: paused; }

/* ---- Hero cover collage (logged-out home) ---- */
.hero__collage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%; max-width: 380px;
  justify-self: end;
}
.hero__collage-item {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 5px solid var(--bg-elev);
  background: var(--bg-soft);
}
.hero__collage-item img { width: 100%; height: 100%; object-fit: cover; }
.hero__collage-item {
  transform: rotate(var(--tilt, 0deg));
  animation: collageFloat 7s ease-in-out infinite;
}
@keyframes collageFloat {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translateY(-8px) rotate(var(--tilt, 0deg)); }
}
.hero__collage-item--1 { --tilt: -5deg; width: 60%; left: 0; top: 5%; z-index: 2; }
.hero__collage-item--2 { --tilt: 6deg; width: 50%; right: 2%; top: 0; z-index: 1; animation-duration: 8.5s; animation-delay: .9s; }
.hero__collage-item--3 { --tilt: -2deg; width: 55%; right: 10%; bottom: 2%; z-index: 3; animation-duration: 9.5s; animation-delay: 1.7s; }

/* ---- Responsive adjustments for the new pieces ---- */
@media (max-width: 880px) {
  .hero__collage { display: none; }
  .dash__actions { grid-template-columns: 1fr; }
  .dash__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dash__greet { font-size: clamp(30px, 8vw, 38px); }
  .dash-resume { padding: 10px 14px 10px 10px; gap: 12px; }
  .dash-resume__cover { width: 68px; height: 68px; border-radius: 12px; }
  .dash-resume__name { font-size: 19px; }
  .dash-resume__play { width: 46px; height: 46px; }
  .dash-radio { padding: 12px 16px; }
  .dash-radio__icon { width: 40px; height: 40px; }
  .dash-radio__label { font-size: 15.5px; }
  .chips { gap: 6px; margin-bottom: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .chip { padding: 7px 13px; font-size: 13px; flex-shrink: 0; }
  .playback-mode { margin: 14px 0 20px; }
  .playback-mode__options { display: flex; width: 100%; border-radius: 16px; }
  .playback-mode__option { flex: 1 1 0; min-width: 0; padding: 7px 9px; }
  body.is-admin .playback-mode__option { flex: 0 0 auto; min-width: max-content; }
  .playback-mode__icon { display: none; }
  .card__tag { display: none; }
}
@media (max-width: 380px) {
  .dash__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---- account dashboard (subscription & license tabs) ---- */
.account-panel { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.account-panel .card-pad { margin: 0; }
.account-panel label { display: block; margin: 10px 0; font-weight: 600; font-size: 14px; }
.account-panel label .input { margin-top: 6px; font-weight: 400; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .form-grid-2 { grid-template-columns: 1fr; } }
.chip--ok { background: rgba(34,160,90,.14); color: #1c7a45; }
.chip--info { background: rgba(64,120,255,.14); color: #2a55c6; }
.chip--warn { background: rgba(210,140,0,.16); color: #9a6b00; }
[data-theme="dark"] .chip--ok { color: #62d39a; }
[data-theme="dark"] .chip--info { color: #9ab6ff; }
[data-theme="dark"] .chip--warn { color: #f0c46b; }
.cert-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin: 14px 0 2px; }
@media (max-width: 560px) { .cert-fields { grid-template-columns: 1fr; } }
.cert-field__label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.cert-field__value { font-size: 15px; font-weight: 600; margin-top: 2px; word-break: break-word; }

/* Full license page — mirrors the downloadable certificate PDF */
.license-doc { max-width: 760px; margin: 0 auto; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 32px 34px 30px; box-shadow: var(--shadow); }
.license-doc__title { font-family: var(--font-display); font-size: 28px; line-height: 1.15; margin: 0 0 4px; color: var(--text); }
.license-doc__subtitle { color: var(--text-mute); margin: 0 0 20px; font-size: 14px; }
.license-doc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 560px) { .license-doc__fields { grid-template-columns: 1fr; } }
.license-doc__field { display: flex; flex-direction: column; }
.license-doc__flabel { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.license-doc__fvalue { font-size: 15px; font-weight: 600; margin-top: 2px; word-break: break-word; color: var(--text); }
.license-doc__box { background: var(--bg-soft); border-left: 4px solid var(--brand); border-radius: 10px; padding: 14px 18px; margin: 20px 0; }
.license-doc__box p { margin: 0; line-height: 1.6; }
.license-doc__h2 { font-size: 16px; margin: 22px 0 6px; color: var(--text); }
.license-doc__p { margin: 0 0 10px; color: var(--text-soft); line-height: 1.6; font-size: 14.5px; }
.license-doc__sig { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-top: 30px; color: var(--text-mute); font-size: 13px; }
.license-doc__sig > div { border-top: 1px solid var(--line-strong); padding-top: 8px; flex: 1 1 40%; }
.license-doc__disclaimer { margin-top: 22px; font-size: 12px; color: var(--text-mute); line-height: 1.5; }
.claim-card { border-left: 4px solid var(--brand-bg, #8a5a2b); }
.claim-steps { margin: 10px 0 0; padding-left: 20px; }
.claim-steps li { margin: 8px 0; line-height: 1.55; }
.claim-emph { color: var(--brand); font-weight: 700; }
[data-theme="dark"] .claim-emph { color: #e0a96b; }
.btn--block.btn--sm { width: auto; }

/* ============================ Roadmap · gamified (admin-only) ============================ */
.rm {
  max-width: 960px;
  --rm-gold: #b9842b;
  --rm-success: #2f9e5e;
  --rm-danger: #c0573a;
}
[data-theme="dark"] .rm {
  --rm-gold: #e8b860;
  --rm-success: #5cc98e;
  --rm-danger: #e89070;
}
.rm-h3 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 6px;
  color: var(--text);
}
.rm-p { color: var(--text-soft); font-size: 14.5px; line-height: 1.7; margin: 8px 0; }
.rm-p--muted { color: var(--text-mute); font-size: 13.5px; }
ul.rm-p { padding-left: 20px; }
ul.rm-p li { margin: 4px 0; }
.rm-block { margin: 26px 0; }

/* ---- HUD ---- */
.rm-hud {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--brand-soft) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-elev), var(--bg-soft));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-lg);
}
.rm-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.rm-hud__title { font-family: var(--font-display); font-size: 26px; margin: 12px 0 4px; color: var(--text); }
.rm-hud__sub { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; max-width: 60ch; }
.rm-hud__control { margin: 6px 0 18px; }
.rm-hud__control > label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; }
.rm-hud__controlrow { display: flex; align-items: center; gap: 14px; }

/* range slider */
.rm-hud input[type="range"] {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 10px; border-radius: 999px;
  background: var(--line-strong);
  outline: none;
}
.rm-hud input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-elev);
  box-shadow: var(--shadow); cursor: pointer;
}
.rm-hud input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-elev);
  box-shadow: var(--shadow); cursor: pointer;
}
.rm-hud input[type="number"] {
  width: 92px; padding: 9px 10px; font-size: 15px; font-weight: 700;
  text-align: center; color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: 10px;
}

/* stats */
.rm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rm-stat {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; min-width: 0;
}
.rm-stat--wide { grid-column: span 1; }
.rm-stat__label { display: block; font-size: 11.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.rm-stat__value { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.2; }
.rm-stat--wide .rm-stat__value { font-size: 15px; }

/* xp bar */
.rm-xpbar {
  position: relative; margin-top: 14px; height: 24px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
}
.rm-xpbar__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.rm-xpbar__text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text);
}

/* ---- milestone ladder ---- */
.rm-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rm-tier {
  position: relative; text-align: center;
  background: var(--bg-elev); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px 10px; opacity: .58;
  transition: opacity .35s, border-color .35s, transform .35s, box-shadow .35s;
}
.rm-tier__check {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) scale(0);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rm-success); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.rm-tier__clients { display: block; font-size: 12.5px; color: var(--text-mute); }
.rm-tier__mrr { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); margin: 2px 0; }
.rm-tier__name { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.rm-tier.is-unlocked {
  opacity: 1; border-color: var(--rm-success);
  box-shadow: 0 6px 18px rgba(47,158,94,.16); transform: translateY(-2px);
}
.rm-tier.is-unlocked .rm-tier__check { transform: translateX(-50%) scale(1); }
.rm-tier.is-unlocked .rm-tier__name { color: var(--rm-success); }

/* ---- main mission ---- */
.rm-mission {
  display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid var(--accent); border-left-width: 4px;
  border-radius: 14px; padding: 16px 18px; margin: 22px 0;
}
.rm-mission__icon { font-size: 26px; line-height: 1; }
.rm-mission__title { font-family: var(--font-display); font-size: 17px; margin: 0 0 4px; color: var(--text); }
.rm-mission__goals { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.rm-mission__goals strong { color: var(--accent); }
.rm-mission__note { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }

/* ---- levels journey ---- */
.rm-levels { position: relative; display: flex; flex-direction: column; gap: 16px; }
.rm-levels::before {
  content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
  background: var(--line-strong); z-index: 0;
}
.rm-level { position: relative; display: flex; gap: 16px; z-index: 1; }
.rm-level__node {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  background: var(--bg-soft); color: var(--text-mute);
  border: 2px solid var(--line-strong); transition: all .35s;
}
.rm-level__body {
  flex: 1; min-width: 0;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
  transition: border-color .35s, box-shadow .35s, opacity .35s;
}
.rm-level__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rm-level__kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--text-mute); text-transform: uppercase; }
.rm-level__name { font-family: var(--font-display); font-size: 18px; margin: 3px 0 0; color: var(--text); }
.rm-level__state {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-mute); border: 1px solid var(--line); white-space: nowrap;
}
.rm-level__meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.rm-chip {
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-soft); border: 1px solid var(--line);
}
.rm-chip--loot { background: rgba(185,132,43,.13); color: var(--rm-gold); border-color: rgba(185,132,43,.35); }
.rm-level__bar { height: 9px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.rm-level__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--brand)); transition: width .6s cubic-bezier(.22,1,.36,1); }
.rm-level__progresstxt { font-size: 12px; color: var(--text-mute); margin-top: 6px; }
.rm-level__progresstxt span { font-weight: 700; color: var(--text-soft); }
.rm-level__toggle {
  margin-top: 12px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--brand); background: none; border: none; cursor: pointer; padding: 4px 0;
}
.rm-level__toggle:hover { text-decoration: underline; }
.rm-level__detail { display: none; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line-strong); animation: rmFade .35s ease; }
.rm-level.is-open .rm-level__detail { display: block; }
@keyframes rmFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* level states */
.rm-level.is-locked .rm-level__body { opacity: .62; }
.rm-level.is-active .rm-level__node { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.rm-level.is-active .rm-level__body { border-color: var(--accent); box-shadow: 0 8px 26px rgba(200,127,58,.18); }
.rm-level.is-active .rm-level__state { background: var(--accent); color: #fff; border-color: var(--accent); }
.rm-level.is-complete .rm-level__node { background: var(--rm-success); color: #fff; border-color: var(--rm-success); }
.rm-level.is-complete .rm-level__state { background: var(--rm-success); color: #fff; border-color: var(--rm-success); }

/* ---- quests ---- */
.rm-quests__lead { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text); margin: 14px 0 6px; }
.rm-quests__count { font-size: 11.5px; font-weight: 700; color: var(--text-mute); background: var(--bg-soft); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.rm-quests { list-style: none; padding: 0; margin: 0 0 6px; }
.rm-quests li { margin: 2px 0; }
.rm-quests label { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--text-soft); line-height: 1.5; cursor: pointer; padding: 5px 7px; border-radius: 9px; transition: background .2s; }
.rm-quests label:hover { background: var(--bg-soft); }
.rm-quests input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--rm-success); cursor: pointer; }
.rm-quests input[type="checkbox"]:checked + * , .rm-quests label:has(input:checked) { color: var(--text-mute); text-decoration: line-through; text-decoration-color: var(--rm-success); }
.rm-quests.is-alldone .rm-quests__count, .rm-quests__lead:has(+ .rm-quests.is-alldone) .rm-quests__count { color: var(--rm-success); border-color: var(--rm-success); }

/* ---- strategy cards ---- */
.rm-card { border: 1px solid var(--line); border-radius: 14px; margin: 10px 0; overflow: hidden; background: var(--bg-elev); }
.rm-card > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 14.5px; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.rm-card > summary::-webkit-details-marker { display: none; }
.rm-card > summary::after { content: "▾"; color: var(--text-mute); transition: transform .25s; }
.rm-card[open] > summary::after { transform: rotate(180deg); }
.rm-card__body { padding: 0 16px 14px; }
.rm-card--boss { border-color: rgba(192,87,58,.4); }
.rm-card--boss > summary { color: var(--rm-danger); }
.rm-card--powerup { border-color: rgba(185,132,43,.4); }
.rm-card--powerup > summary { color: var(--rm-gold); }

/* ---- data table ---- */
.rm-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.rm-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.rm-table th, .rm-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rm-table thead th { background: var(--bg-soft); color: var(--text); font-weight: 600; white-space: normal; }
.rm-table tbody tr:last-child td { border-bottom: none; }
.rm-table tbody td:first-child { font-weight: 700; color: var(--text); }
.rm-table tfoot th { background: var(--bg-soft); color: var(--text); font-weight: 800; border-top: 2px solid var(--line); border-bottom: none; }
.rm-toggle { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); cursor: pointer; font-size: 14px; }
.rm-toggle input { width: 18px; height: 18px; flex: none; cursor: pointer; }
.rm-sub-opt { transition: opacity .15s ease; }
.rm-toggle--top { margin-top: 14px; }

.rm-foot { text-align: center; font-size: 12px; color: var(--text-mute); margin: 24px 0 8px; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .rm-stats { grid-template-columns: repeat(2, 1fr); }
  .rm-ladder { grid-template-columns: repeat(2, 1fr); }
  .rm-hud__title { font-size: 22px; }
  .rm-levels::before { left: 17px; }
  .rm-level__node { width: 36px; height: 36px; font-size: 17px; }
}

/* ----------------- Pay card billing-cycle toggle (monthly / annual) ----------------- */
.pay-cadence { display: flex; gap: 8px; justify-content: center; margin: 4px 0 4px; }
.pay-cadence .btn { flex: 1; min-width: 120px; line-height: 1.15; }
.pay-cadence .btn.is-active {
  background: var(--brand-bg);
  border-color: var(--brand);
  color: var(--brand);
}
.pay-cadence__save { display: block; font-size: 11.5px; opacity: .85; margin-top: 2px; }


/* ----------------- Reduced motion ----------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Consent, privacy & cookie UI (GDPR / clickwrap) ------------------- */
.consent { display: flex; align-items: flex-start; gap: .55rem; margin: .35rem 0; font-size: .9rem; line-height: 1.4; cursor: pointer; }
.consent__box { margin-top: .2rem; flex: 0 0 auto; width: 1rem; height: 1rem; }
.consent__text { color: var(--text, #222); }
.consent__text a { text-decoration: underline; }
.row-inline { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }

/* ----------------- On/off switch (account preferences) ----------------- */
/* A real checkbox drives it, so keyboard, screen readers and form semantics
   keep working; the visible track/thumb is painted from its :checked state.
   Selectors are written as `label.switch` so the generic `.account-panel label`
   rule (display:block) cannot flatten the row and stack the track on its own
   line — it has the same specificity and this block comes later. */
label.switch {
  --switch-off: #b6aea0;
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 12px 0 0; padding: 0; font-size: .9rem; font-weight: 500;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
[data-theme="dark"] label.switch { --switch-off: #4d4539; }
.switch__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.switch__track {
  position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px;
  background: var(--switch-off); transition: background .18s ease;
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s ease;
}
.switch__input:checked + .switch__track { background: var(--success); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 3px; }
.switch__input:disabled + .switch__track { opacity: .55; }
label.switch:has(.switch__input:disabled) { cursor: wait; }
.switch__state { font-size: .9rem; font-weight: 600; color: var(--text-soft); }
.switch__input:checked ~ .switch__state { color: var(--success); }
@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__thumb { transition: none; }
}
.small { font-size: .8rem; }
.danger-zone { border: 1px solid var(--danger-border, #f0c2c2); border-radius: 12px; background: var(--danger-bg, rgba(200,40,40,.04)); }
.danger-zone h3 { color: var(--danger, #b02a2a); }
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: 1rem 1.15rem; border-radius: 14px; background: var(--surface, #fff); color: var(--text, #1c1c1c); box-shadow: 0 10px 40px rgba(0,0,0,.18); border: 1px solid var(--border, #e5e5e5); }
.cookie-banner__text { flex: 1 1 320px; font-size: .85rem; line-height: 1.45; }
.cookie-banner__link { text-decoration: underline; white-space: nowrap; }
.cookie-banner__actions { display: flex; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 520px) { .cookie-banner { flex-direction: column; align-items: stretch; } .cookie-banner__actions { justify-content: flex-end; } }
/* Consent preference rows. "Only necessary" and "Accept all" deliberately
   share the same size and weight; only the colour differs. */
.cookie-banner__details { flex: 1 1 100%; border-top: 1px solid var(--border, #e5e5e5); padding-top: .85rem; margin-top: .25rem; display: flex; flex-direction: column; gap: .6rem; }
.consent-row { display: flex; align-items: flex-start; gap: .65rem; font-size: .82rem; line-height: 1.4; cursor: pointer; }
.consent-row--fixed { cursor: default; opacity: .85; }
.consent-row__input { margin-top: .2rem; flex: 0 0 auto; width: 1rem; height: 1rem; }
.consent-row__lock { margin-top: .1rem; flex: 0 0 auto; width: 1rem; text-align: center; }
.consent-row__body { display: flex; flex-direction: column; gap: .1rem; }
.consent-row__title { font-weight: 600; }
.consent-row__desc { color: var(--muted, #6b6b6b); }
.consent-row__always { margin-left: auto; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b6b6b); white-space: nowrap; }
/* A button that has to read as a footer link. */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Analytics dashboard (admin only). Reuses the .data-* cards from the customer
   dashboard; only the range tabs and the acquisition table are new. */
.range-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border, #e5e5e5); }
.data-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute, #6b6b6b); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Advertising landing page. One promise per screen, the demo high up, and the
   same call to action repeated at the bottom for anyone who scrolled. */
.landing { max-width: 780px; margin: 0 auto; padding: 8px 4px 40px; }
.landing__hero { text-align: center; padding: 28px 0 8px; }
.landing__title { margin: 0 0 12px; font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1.15; }
.landing__lead { margin: 0 auto 18px; max-width: 56ch; color: var(--text-soft, #555); line-height: 1.55; }
.landing__price { margin: 0 0 20px; font-weight: 700; font-size: 1.1rem; }
.landing__cta { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.landing__demo { margin: 36px 0 8px; }
.landing__demo h2 { margin: 0 0 4px; font-size: 1.25rem; }

/* Horizontal playlist rail. It stays inside the page column: bleeding it to
   the screen edge pushed the document wider than the viewport on desktop and
   gave the whole page a horizontal scrollbar. A card cut off at the column
   edge already says "this scrolls" without that cost.
   `align-items: flex-start` matters — flex would otherwise stretch the cards
   to the tallest one and quietly break their square shape. */
.landing-rail {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 18px;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding: 4px 0 14px; scrollbar-width: thin;
}
.landing-rail:focus-visible { outline: 2px solid var(--accent, #b5793f); outline-offset: 4px; border-radius: 6px; }
.landing-card {
  position: relative; flex: 0 0 auto; width: clamp(148px, 42vw, 196px); aspect-ratio: 1 / 1;
  padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: var(--bg-soft, #eee); display: block;
  color: #fff; text-align: left; font: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.landing-card:hover, .landing-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.landing-card:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.landing-card__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Keeps the title legible over a bright photograph without dimming the whole
   image the way a flat overlay would. */
.landing-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 68%); }
.landing-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  transition: background .18s ease, transform .18s ease;
}
.landing-card__play svg { width: 22px; height: 22px; margin-left: 2px; }
.landing-card:hover .landing-card__play { background: rgba(0,0,0,.75); transform: translate(-50%, -50%) scale(1.06); }
.landing-card__name { position: absolute; left: 12px; right: 12px; bottom: 10px; font-weight: 700; font-size: .95rem; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) {
  .landing-card, .landing-card__play { transition: none; }
  .landing-card:hover, .landing-card:focus-visible { transform: none; }
  .landing-card:hover .landing-card__play { transform: translate(-50%, -50%); }
}
.landing__swipe { margin: 0; }
.landing__points { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
.landing__point { line-height: 1.5; }
.landing__foot { margin-top: 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
@media (min-width: 640px) { .landing__points { grid-template-columns: 1fr 1fr; gap: 18px 28px; } }

/* The written explanation on the "hilo musical" page. Prose, deliberately:
   it is there to answer a question someone typed into a search box, and a
   grid of short cards cannot do that. */
.landing__explain { margin-top: 44px; display: grid; gap: 26px; }
.landing__explain-block h2 { font-size: 20px; margin: 0 0 8px; line-height: 1.3; }
.landing__explain-block p { margin: 0; line-height: 1.65; color: var(--text-soft); max-width: 68ch; }
.landing__steps { margin: 0; padding-left: 1.2em; line-height: 1.65; color: var(--text-soft); max-width: 68ch; }
.landing__steps li { margin-bottom: 6px; }
@media (min-width: 720px) { .landing__explain { gap: 32px; } }

/* Site-wide link row above the legal footer. Small and quiet on screen; its
   real job is to be a plain-HTML path between the pages for a crawler. */
.site-links {
  text-align: center;
  font-size: 13px;
  line-height: 2;
  padding: 26px 16px 0;
  color: var(--text-mute);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px;
}
.site-links a { color: var(--text-soft); text-decoration: none; }
.site-links a:hover { color: var(--brand); text-decoration: underline; }

/* =========================================================
   UX refresh (2026-07): forms, user menu, account layout,
   cookie banner. Appended last so it wins the cascade.
   ========================================================= */

/* ----- Required / optional field signals ----- */
.req { color: #b3322c; font-weight: 700; }
[data-theme="dark"] .req { color: #ff8a82; }
.req-note { margin: -4px 0 0; font-size: 12.5px; color: var(--text-mute); }
.field-hint { font-size: 12px; font-weight: 400; color: var(--text-mute); }
.auth-form label .field-label { display: inline; }

/* ----- Consent checkboxes: box left, text right ----- */
.auth-form label.consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-soft);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-form label.consent:hover { border-color: var(--line-strong); }
.auth-form label.consent:focus-within { border-color: var(--brand); }
.consent__box {
  width: 18px; height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--brand);
  cursor: pointer;
}
.consent__text { min-width: 0; }
.consent--invalid {
  border-color: #b3322c !important;
  box-shadow: 0 0 0 3px rgba(179, 50, 44, .14);
}
.consent--optional { opacity: .92; }

/* ----- Password show/hide ----- */
.input-wrap { position: relative; display: block; }
.input-wrap .input { width: 100%; padding-right: 44px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--text-mute);
}
.pw-toggle:hover { color: var(--text); background: var(--bg-soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ----- Topbar user menu ----- */
.user-menu { position: relative; }
.user-menu__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600; font-size: 14px;
  transition: background .15s ease, border-color .15s ease;
}
.user-menu__btn:hover { background: var(--bg-soft); border-color: var(--line-strong); }
.user-menu__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.user-menu__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--brand); color: var(--brand-bg);
  font-size: 13px; font-weight: 700;
  flex: 0 0 auto;
}
.user-menu__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__caret { display: inline-flex; color: var(--text-mute); transition: transform .15s ease; }
.user-menu.is-open .user-menu__caret { transform: rotate(180deg); }
.user-menu__list {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 232px; max-width: calc(100vw - 24px);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 300;
}
.user-menu__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu__head-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__head-mail { color: var(--text-mute); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  background: transparent; border: 0; border-radius: 9px;
  color: var(--text); font-size: 14px; font-weight: 500;
  text-align: left; text-decoration: none;
  cursor: pointer;
}
.user-menu__item:hover { background: var(--bg-soft); text-decoration: none; }
.user-menu__item--danger { color: #b3322c; }
[data-theme="dark"] .user-menu__item--danger { color: #ff8a82; }
.user-menu__icon { display: inline-flex; color: var(--text-mute); flex: 0 0 auto; }
.user-menu__item--danger .user-menu__icon { color: inherit; }
.user-menu__sep { height: 1px; background: var(--line); margin: 6px 4px; }
@media (max-width: 720px) {
  .user-menu__name { max-width: 96px; }
  .user-menu__list { right: auto; left: 0; }
}

/* ----- Account page: one centered column, no dead space ----- */
.account-wrap { max-width: 780px; margin: 0 auto; }
.account-wrap .card-pad { max-width: none; margin: 0; }
.account-wrap .tabs { margin: 22px 0 16px; overflow-x: auto; scrollbar-width: none; }
.account-wrap .tabs::-webkit-scrollbar { display: none; }
.account-wrap .tab { white-space: nowrap; }
.account-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 18px; flex-wrap: wrap;
}
.account-head__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.account-head__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--brand); color: var(--brand-bg);
  font-size: 22px; font-weight: 700;
  flex: 0 0 auto;
}
.account-head__txt { min-width: 0; }
.account-head h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.account-head__mail { margin: 3px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.account-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ----- Cookie banner: compact + never covers the player ----- */
body:has(#player:not([hidden])) .cookie-banner { bottom: calc(var(--player-h) + 12px); }
@media (max-width: 520px) {
  .cookie-banner { left: .6rem; right: .6rem; bottom: .6rem; padding: .85rem .95rem; gap: .6rem; }
  /* in the stacked (column) layout the 320px flex-basis becomes HEIGHT — reset it */
  .cookie-banner__text { flex: 0 0 auto; font-size: .8rem; }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; flex: 0 0 auto; }
  .cookie-banner__actions .btn { width: 100%; }
}

/* Topbar buttons should never wrap to two lines */
.auth-slot .btn { white-space: nowrap; }

/* Mobile topbar: let the tools row wrap instead of overflowing the page */
@media (max-width: 720px) {
  .topbar__tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  #cta-trial { white-space: nowrap; }
}
@media (max-width: 520px) {
  /* status is repeated in the account header and user menu; save the space */
  .auth-slot .pill { display: none; }
}

/* =========================================================
   Product-wide UX system: responsive navigation, loading,
   touch targets, and resilient narrow layouts.
   ========================================================= */

.nav-toggle,
.nav__mobile-actions { display: none; }

.loading-state {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-soft);
  font-weight: 600;
}
.loading-state__spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--line-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: loadingSpin .75s linear infinite;
}
@keyframes loadingSpin { to { transform: rotate(360deg); } }

.account-actions { padding: 20px 28px; }
.account-wrap .tabs { scroll-snap-type: x proximity; }
.account-wrap .tab { min-height: 46px; scroll-snap-align: start; }
.aboutfaq summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.aboutfaq summary::-webkit-details-marker { display: none; }
.aboutfaq summary::after { content: "+"; color: var(--brand); font-size: 20px; line-height: 1; }
.aboutfaq details[open] summary::after { content: "−"; }

@media (hover: none), (pointer: coarse) {
  .card__play,
  .dash-tile__play { opacity: 1; transform: none; }
  .card:hover,
  .dash-tile:hover .dash-tile__cover img { transform: none; }
}

@media (max-width: 860px) {
  .topbar__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    min-height: 64px;
  }
  .brand { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; }
  .topbar__tools {
    grid-column: 3;
    grid-row: 1;
    margin-left: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }
  .topbar__tools .auth-slot,
  .topbar__tools #cta-trial { display: none !important; }
  .nav-toggle { display: inline-grid; width: 44px; height: 44px; padding: 8px; }
  #theme-toggle { width: 44px; height: 44px; padding: 8px; }

  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 10px 0 4px;
    border-top: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
  }
  .nav a:hover { background: var(--bg-soft); }
  .nav a.is-active { background: var(--brand-soft); border: 0; }
  .nav__mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .nav__mobile-actions:empty { display: none; }
  .nav__mobile-actions .btn { width: 100%; min-height: 46px; }
  .nav__mobile-actions .btn--ghost {
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
  }
  .nav__mobile-actions .btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #8a5c26, var(--brand));
    border: 1px solid transparent;
  }
  [data-theme="dark"] .nav__mobile-actions .btn--primary { color: #2a1c0c; }
  .nav__mobile-actions .btn--danger { border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent); }

  .main { width: 100%; padding: 24px 16px 48px; }
  .hero { padding: 24px 20px; border-radius: 20px; margin-bottom: 28px; }
  .hero__title { font-size: clamp(30px, 9.5vw, 38px); overflow-wrap: anywhere; }
  .hero__sub { font-size: 16px; }
  .hero__ctas { align-items: stretch; }
  .hero__ctas .btn { min-height: 46px; }
  .hero__price { line-height: 1.55; }
  .section__sub { font-size: 14px; line-height: 1.55; }
  .auth-form { width: 100%; max-width: 460px; margin: 16px auto; padding: 24px 20px; }
  .auth-form .btn { min-height: 48px; }
  .card-pad { padding: 22px 20px; }
  .account-head { align-items: flex-start; }
  .account-head__actions { width: 100%; }
  .account-wrap .tabs { margin-left: -4px; margin-right: -4px; padding: 0 4px; }
  .account-actions .modal__cta-row { margin: 0 !important; }
  .account-actions .btn { width: 100%; }
  .site-legal-footer { padding-left: 20px; padding-right: 20px; line-height: 2.1; }
  .cookie-banner {
    max-height: min(68vh, 500px);
    overflow-y: auto;
    border-radius: 16px;
  }
  .cookie-banner__actions .btn { min-height: 46px; white-space: normal; }
}

@media (max-width: 420px) {
  .brand__mark { display: none; }
  .brand__name { font-size: 17px; }
  .nav__mobile-actions { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { padding: 10px; }
  .card__play { width: 40px; height: 40px; }
}

@media (max-width: 560px) {
  .account-wrap .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 20px 0 16px;
    padding: 4px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-soft);
  }
  .account-wrap .tab {
    min-width: 0;
    min-height: 64px;
    padding: 8px 5px;
    border: 0;
    border-radius: 10px;
    white-space: normal;
    font-size: 12.5px;
    line-height: 1.25;
  }
  .account-wrap .tab.is-active {
    border: 0;
    background: var(--bg-elev);
    box-shadow: var(--shadow);
  }
}

/* ---- Savings comparison table (pricing page) ---- */
.savings { max-width: 880px; margin: 40px auto 0; }
.savings__title {
  font-family: var(--font-display); font-size: 26px; line-height: 1.2;
  margin: 0 0 6px; color: var(--text); text-align: center;
}
.savings__sub {
  margin: 0 auto 20px; max-width: 620px; text-align: center;
  font-size: 15px; color: var(--text-soft);
}
.savings__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elev); box-shadow: var(--shadow);
}
.savings__table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 15px; }
.savings__table th,
.savings__table td { padding: 13px 16px; text-align: left; vertical-align: middle; }
.savings__table thead th {
  font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 650;
  border-bottom: 1px solid var(--line-strong); background: var(--bg-soft);
}
.savings__table tbody th {
  font-weight: 550; color: var(--text-soft);
  border-bottom: 1px solid var(--line);
}
.savings__table tbody td { border-bottom: 1px solid var(--line); color: var(--text-soft); }
.savings__table tbody tr:last-child th,
.savings__table tbody tr:last-child td { border-bottom: 0; }
.savings__table td b, .savings__table th b { color: var(--text); font-weight: 700; }
/* The BrewTunes column is the one we want the eye to land on. */
.savings__table .savings__brand {
  background: var(--brand-bg);
  border-left: 1px solid var(--line);
  color: var(--text);
  white-space: nowrap;
}
.savings__table thead .savings__brand { color: var(--brand); background: var(--brand-soft); }
.savings__total th, .savings__total td { background: var(--bg-soft); }
.savings__total .savings__brand { background: var(--accent-soft); }
.savings__zero { display: flex; flex-direction: column; line-height: 1.25; }
.savings__zero b { color: var(--success); }
.savings__zero-note { font-size: 12px; color: var(--text-mute); }
.savings__badge {
  margin: 18px auto 0; width: fit-content; max-width: 100%;
  padding: 10px 20px; border-radius: 999px;
  background: var(--accent-soft); color: var(--pro);
  font-weight: 700; font-size: 16px; text-align: center;
}
.savings__note {
  margin: 14px auto 0; max-width: 760px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-mute);
}
/* "Other country" table: estimates, so the warning sits above the numbers. */
.savings__warning {
  margin: 0 auto 16px; max-width: 760px;
  padding: 10px 14px; border-radius: var(--radius);
  border-left: 3px solid #d08a1e; background: #fdf1dc; color: #7a4508;
  font-size: 13.5px; line-height: 1.5;
}
[data-theme="dark"] .savings__warning { background: #3a2a14; color: #f0c989; }
.savings__table--world { min-width: 620px; }
.savings__table--world td { white-space: nowrap; }
.savings__table--world td:nth-child(2) { white-space: normal; min-width: 150px; }
.savings__table--world tbody .savings__group th {
  background: var(--bg-soft); color: var(--text-mute);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 650;
  padding-top: 9px; padding-bottom: 9px;
}
@media (max-width: 560px) {
  .savings { margin-top: 32px; }
  .savings__title { font-size: 22px; }
  .savings__table { font-size: 14px; }
  .savings__table th, .savings__table td { padding: 11px 12px; }
}

/* ----------------------------------------------------------------------
   ToDo Offline (admin) — read-only companion to the ToDo tab.
   Markup comes pre-rendered from data/todo-offline.ca.html, so these rules
   have to style whatever the Markdown produced: headings, paragraphs, lists,
   tables and quotes. The colour on the left edge of a card is the whole
   point — it is the offline/online marker, readable at a glance.
   ---------------------------------------------------------------------- */
.tdo { --tdo-offline: var(--success); --tdo-online: var(--focus); --tdo-mixt: #b8862c; --tdo-date: var(--danger); }
.tdo__intro { margin-bottom: 18px; }
.tdo__readonly {
  margin: 10px 0 0; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-soft);
  color: var(--text-soft); font-size: 13px;
}
.tdo-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.tdo-legend__item {
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-elev); color: var(--text-mute); font-size: 12px;
}
.tdo-legend__item b { color: var(--text); font-weight: 700; }
.tdo-legend__item--offline { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.tdo-legend__item--online { border-color: color-mix(in srgb, var(--focus) 45%, var(--line)); }

/* The site topbar is itself sticky at top:0 with a taller z-index, so this
   toolbar has to start below it or the two overlap. The offset is measured at
   runtime (initTodoOffline) because the topbar wraps to two rows on narrow
   viewports; 0 is a safe fallback if the measurement never runs. */
.tdo-toolbar {
  position: sticky; top: var(--tdo-sticky-top, 0px); z-index: 3; margin: 0 0 18px;
  padding: 11px 0 12px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.tdo-doc__body section[id] { scroll-margin-top: calc(var(--tdo-sticky-top, 0px) + 96px); }
.tdo-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tdo-tab, .tdo-filter {
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev);
  color: var(--text-soft); font: inherit; font-size: 13px; padding: 6px 13px; cursor: pointer;
}
.tdo-tab:hover, .tdo-filter:hover { border-color: var(--line-strong); color: var(--text); }
.tdo-tab.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--brand); font-weight: 700; }
.tdo-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tdo-filter { background: transparent; font-size: 12px; padding: 5px 11px; color: var(--text-mute); }
.tdo-filter.is-active { border-color: var(--accent); color: var(--brand); font-weight: 700; }

.tdo-doc__head {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 4px 0 16px; padding-bottom: 13px; border-bottom: 2px solid var(--line);
}
.tdo-doc__icon { flex: none; font-size: 30px; line-height: 1.1; }
.tdo-doc__title { margin: 0 0 3px; font-family: var(--font-display); font-size: 25px; line-height: 1.25; }
.tdo-doc__file { margin: 0; color: var(--text-mute); font-size: 12px; }
.tdo-doc__body > .tdo-group:first-child { margin-top: 0; }

.tdo-group { margin: 30px 0 0; }
.tdo-group > .tdo-h {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 22px;
}
.tdo-task {
  margin: 13px 0; padding: 16px 18px 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
  border-radius: 14px; background: var(--bg-elev);
}
.tdo-task[data-tdo-mode="offline"] { border-left-color: var(--tdo-offline); }
.tdo-task[data-tdo-mode="online"]  { border-left-color: var(--tdo-online); }
.tdo-task[data-tdo-mode="mixt"]    { border-left-color: var(--tdo-mixt); }
.tdo-task[data-tdo-mode="date"]    { border-left-color: var(--tdo-date); }
.tdo-task[data-tdo-mode="later"]   { border-left-color: var(--text-mute); opacity: .84; }
.tdo-task[data-tdo-warn="1"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 18%, transparent); }
/* An agent-doable task keeps its offline/online colour on the left edge and
   gains a tinted background, so the two axes stay readable at the same time. */
.tdo-task[data-tdo-agent="1"], .tdo-sub[data-tdo-agent="1"] {
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-elev));
}
.tdo-legend__item--agent { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.tdo-sub { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--line); }
.tdo-subsub { margin-top: 11px; padding-left: 12px; border-left: 2px solid var(--line); }

.tdo-h { margin: 0 0 9px; color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.4; }
.tdo-task > .tdo-h { font-size: 17px; }
.tdo-sub > .tdo-h { font-size: 15px; }
.tdo-doc__body p { margin: 0 0 .8em; color: var(--text-soft); font-size: 14.5px; line-height: 1.62; }
/* The sources spell URLs and file paths out in full so they stay readable on
   paper, which leaves unbreakable words on a phone. Without this the page
   scrolls sideways. */
.tdo-doc__body p, .tdo-list li, .tdo-quote, .tdo-table td, .tdo-table th, .tdo-h { overflow-wrap: anywhere; }
.tdo-doc__body p strong { color: var(--text); }
.tdo-doc__body a { color: var(--brand); overflow-wrap: anywhere; }
.tdo-doc__body code {
  padding: .1em .35em; border-radius: 5px; background: var(--bg-soft);
  font-size: .88em; overflow-wrap: anywhere;
}
.tdo-hr { margin: 20px 0; border: 0; border-top: 1px solid var(--line); }

.tdo-list { margin: 0 0 .9em; padding-left: 1.35em; color: var(--text-soft); font-size: 14.5px; }
.tdo-list li { margin: .3em 0; line-height: 1.58; }
.tdo-list li strong { color: var(--text); }
.tdo-list .tdo-list { margin-top: .3em; margin-bottom: .2em; }
li.tdo-check { list-style: none; margin-left: -1.15em; }
li.tdo-check > label { display: flex; gap: 8px; align-items: flex-start; }
li.tdo-check input { flex: none; width: 15px; height: 15px; margin-top: .3em; accent-color: var(--success); }
li.tdo-check.is-done > label > span { color: var(--text-mute); text-decoration: line-through; }

.tdo-quote {
  margin: 11px 0; padding: 10px 14px;
  border: 0; border-left: 3px solid var(--line-strong); border-radius: 0 10px 10px 0;
  background: var(--bg-soft); color: var(--text-soft); font-size: 13.5px;
}
.tdo-quote p { margin: 0 0 .5em; font-size: 13.5px; }
.tdo-quote p:last-child { margin-bottom: 0; }
.tdo-quote--original { border-left-color: var(--accent); }
.tdo-quote__label {
  margin: 0 0 5px; color: var(--text-mute);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.tdo-tablewrap { overflow-x: auto; margin: 0 0 1em; }
.tdo-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13.5px; }
.tdo-table th, .tdo-table td {
  padding: 8px 11px; border: 1px solid var(--line);
  text-align: left; vertical-align: top; color: var(--text-soft);
}
.tdo-table th { background: var(--bg-soft); color: var(--text); font-weight: 700; }

.is-filtered { display: none; }

.tdo-downloads {
  margin-top: 30px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg-soft);
}
.tdo-downloads h2 { margin: 0 0 5px; font-family: var(--font-display); font-size: 20px; }
.tdo-downloads > p { margin: 0 0 14px; font-size: 13.5px; }
.tdo-downloads__list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tdo-downloads__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-elev);
}
.tdo-downloads__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; min-width: 0; text-decoration: none; }
.tdo-downloads__link:hover .tdo-downloads__label { color: var(--brand); }
.tdo-downloads__label { color: var(--text); font-size: 14px; font-weight: 700; }
.tdo-downloads__link code { color: var(--text-mute); font-size: 11.5px; }
.tdo-downloads__size { flex: none; color: var(--text-mute); font-size: 12px; }

@media (max-width: 640px) {
  .tdo-toolbar { padding-top: 9px; }
  .tdo-tab { font-size: 12px; padding: 5px 10px; }
  .tdo-task { padding: 14px 14px 12px; border-radius: 12px; }
  .tdo-doc__title { font-size: 21px; }
  .tdo-downloads { padding: 16px 15px; }
  .tdo-downloads__list li { flex-wrap: wrap; }
}

@media print {
  .tdo-toolbar, .tdo-downloads { display: none; }
  .tdo-task { break-inside: avoid; }
  .tdo-doc[hidden] { display: none; }
}

/* Four-language copy must remain readable without hiding a comparison column. */
@media (max-width: 560px) {
  .savings__table { min-width: 0; table-layout: fixed; font-size: 13px; }
  .savings__table th, .savings__table td { padding: 10px 7px; overflow-wrap: anywhere; }
  .savings__table thead th:first-child { width: 38%; }
  .savings__table .savings__brand { white-space: normal; }
}

/* The per-country table has five columns, too many to squeeze into a phone.
   It scrolls sideways inside its card instead, with the country kept in view. */
@media (max-width: 560px) {
  .savings__table.savings__table--world { min-width: 560px; table-layout: auto; }
  .savings__table--world th, .savings__table--world td { overflow-wrap: normal; }
  .savings__table--world thead th:first-child { width: auto; }
  .savings__table--world td:nth-child(2) { min-width: 120px; }
  .savings__table--world .savings__brand { white-space: nowrap; }
  .savings__table--world tbody tr:not(.savings__group) th {
    position: sticky; left: 0; z-index: 1; background: var(--bg-elev);
  }
}