/* ==========================================================================
   PeCast skin — a sibling of pecam.com.br
   --------------------------------------------------------------------------
   Pecam's palette (sea ink, cream, coral, sun, aqua, cobalt), its Georgia-
   style serif headlines with tight tracking, monospace kickers in numbered
   circles, the asymmetric card corner (4px 34px 4px 4px), the four-colour
   band stripe and the "sun" ring. Apolo's diagonal stripes (drawn at the
   angle of its "A") become concentric ripples radiating from the PeCast sun.

   Light: cream content, sea-ink chrome (sidebar + player), like Pecam's
   cream directory band framed by its ink bands. Dark: Pecam's vault band.

   Display face: Gelasio (SIL OFL 1.1, fonts/OFL-Gelasio.txt), a Georgia-
   metric serif, self-hosted because Georgia is missing on Android.
   ========================================================================== */

@font-face {
  font-family: "Gelasio PeCast";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("fonts/gelasio-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gelasio PeCast";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("fonts/gelasio-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens: light ---------- */
:root {
  /* Pecam family (fixed, both schemes) */
  --pc-sea-ink: #123949;
  --pc-ink-deep: #0d2b38;
  --pc-cream: #fff4db;
  --pc-coral: #ff715c;
  --pc-sun: #ffd45c;
  --pc-aqua: #55d6ce;
  --pc-cobalt: #2459aa;
  --pc-amber: #eca742;
  --pc-peach: #f2a77f;
  --pc-stripe: linear-gradient(90deg, var(--pc-coral) 0 22%, var(--pc-sun) 22% 46%, var(--pc-aqua) 46% 74%, var(--pc-cobalt) 74% 100%);
  --pc-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --pc-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Roboto Mono", "Droid Sans Mono", monospace;
  --pc-kicker: #2c6076;
  --pc-r-card: 4px 28px 4px 4px;
  --pc-r-hero: 4px 34px 4px 4px;

  /* Coral ramp (80 = logo coral, Pecam's --coral) */
  --brand-10: #2b0d07;
  --brand-20: #47160c;
  --brand-30: #641f11;
  --brand-40: #812816;
  --brand-50: #9d311b;
  --brand-60: #b4381f; /* accent text on cream (5.2:1) */
  --brand-70: #d2462c;
  --brand-80: #ff715c; /* logo coral */
  --brand-90: #ff8470;
  --brand-100: #ff9784;
  --brand-110: #ffaa99;
  --brand-120: #ffbdad;
  --brand-130: #ffd0c2;
  --brand-140: #ffe1d6;
  --brand-150: #ffefe8;
  --brand-160: #fff7f2;

  --brand-rgb: 255, 113, 92;
  --ink-rgb: 13, 43, 56;
  --ink-2-rgb: 16, 52, 69; /* Pecam's photo overlay ink */
  --live-dot: #ffd45c; /* Pecam sun */
  --live-dot-rgb: 255, 212, 92;
  --ai-accent: #eca742; /* amber: AI gradients read as a small sunset */

  --font: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Gelasio PeCast", Georgia, "Times New Roman", serif;

  color-scheme: light;
  --bg: #fcefd9;
  --bg-blob-1: rgba(242, 167, 127, 0.5);
  --bg-blob-2: rgba(255, 212, 92, 0.2);
  --surface: #fffaf0;
  --surface-2: #fdf3e3;
  --surface-3: #f5e5cb;
  --surface-hover: rgba(18, 57, 73, 0.06);
  --surface-pressed: rgba(18, 57, 73, 0.1);
  --acrylic: rgba(255, 248, 236, 0.74);
  --acrylic-strong: rgba(255, 246, 230, 0.9);
  --stroke: #ecdcc0;
  --stroke-strong: #d4bf9c;
  --text: #123949;
  --text-2: #2f5566;
  --text-3: #4a6876;
  --text-on-accent: #0d2b38;
  --accent-text: var(--brand-60);
  --accent-fill: #ff715c;
  --accent-fill-hover: #ff8a76;
  --accent-fill-pressed: #f2654f;
  --accent-icon: #e0533c;
  --accent-icon-hover: #c94530;
  --accent-soft: #ffe3d6;
  --accent-soft-text: #8f2c1a;
  --danger: #a3153f;
  --danger-hover: #860f33;
  --danger-soft: #fbe6e6;
  --success: #1d7a4f;
  --focus: #123949;
  --focus-inner: #fffaf0;
  --scrim: rgba(13, 43, 56, 0.42);

  --shadow-2: 0 0 2px rgba(22, 54, 65, 0.12), 0 1px 2px rgba(22, 54, 65, 0.12);
  --shadow-4: 0 0 2px rgba(22, 54, 65, 0.12), 0 2px 4px rgba(22, 54, 65, 0.13);
  --shadow-8: 0 0 2px rgba(22, 54, 65, 0.12), 0 4px 10px rgba(22, 54, 65, 0.14);
  --shadow-16: 0 0 2px rgba(22, 54, 65, 0.12), 0 10px 24px rgba(22, 54, 65, 0.16);
  --shadow-28: 0 0 8px rgba(22, 54, 65, 0.12), 0 18px 40px rgba(22, 54, 65, 0.2);
  --shadow-64: 0 0 8px rgba(22, 54, 65, 0.12), 0 28px 70px rgba(22, 54, 65, 0.27);
  --shadow-brand: 0 6px 18px rgba(255, 113, 92, 0.34);

  --chart-bar: #e0533c;
  --chart-bar-hover: #b4381f;
  --chart-peak: #b4381f;
  --chart-track: #ffe3d6;
  --chart-axis: var(--stroke);
}

/* ---------- Tokens: dark (Pecam's "vault" band) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --pc-kicker: #8fd8d2;
    --bg: #0d2b38;
    --bg-blob-1: rgba(255, 113, 92, 0.13);
    --bg-blob-2: rgba(85, 214, 206, 0.08);
    --surface: #113444;
    --surface-2: #153b4c;
    --surface-3: #1b4657;
    --surface-hover: rgba(255, 244, 219, 0.06);
    --surface-pressed: rgba(255, 244, 219, 0.1);
    --acrylic: rgba(13, 43, 56, 0.74);
    --acrylic-strong: rgba(11, 38, 50, 0.9);
    --stroke: #1f4a5b;
    --stroke-strong: #33606f;
    --text: #fff4db;
    --text-2: #d3ccb8;
    --text-3: #a9b6ae;
    --text-on-accent: #0d2b38;
    --accent-text: #ff8f7b;
    --accent-fill: #ff715c;
    --accent-fill-hover: #ff8a76;
    --accent-fill-pressed: #f2654f;
    --accent-icon: #ff7f69;
    --accent-icon-hover: #ff9a88;
    --accent-soft: rgba(255, 113, 92, 0.16);
    --accent-soft-text: #ffb4a6;
    --danger: #ff93a8;
    --danger-hover: #ffadbd;
    --danger-soft: rgba(255, 147, 168, 0.12);
    --success: #5fd3a0;
    --focus: #ffd45c;
    --focus-inner: #0d2b38;
    --scrim: rgba(4, 16, 22, 0.62);

    --shadow-2: 0 0 2px rgba(0, 10, 15, 0.3), 0 1px 2px rgba(0, 10, 15, 0.32);
    --shadow-4: 0 0 2px rgba(0, 10, 15, 0.3), 0 2px 4px rgba(0, 10, 15, 0.32);
    --shadow-8: 0 0 2px rgba(0, 10, 15, 0.3), 0 4px 10px rgba(0, 10, 15, 0.34);
    --shadow-16: 0 0 2px rgba(0, 10, 15, 0.3), 0 10px 24px rgba(0, 10, 15, 0.36);
    --shadow-28: 0 0 8px rgba(0, 10, 15, 0.3), 0 18px 40px rgba(0, 10, 15, 0.4);
    --shadow-64: 0 0 8px rgba(0, 10, 15, 0.3), 0 28px 70px rgba(0, 10, 15, 0.45);
    --shadow-brand: 0 6px 20px rgba(255, 113, 92, 0.26);

    --chart-bar: #ff7f69;
    --chart-bar-hover: #ffb4a6;
    --chart-peak: #ffb4a6;
    --chart-track: rgba(255, 127, 105, 0.2);
    --chart-axis: var(--stroke);
  }
}

::selection { background: var(--brand-130); color: var(--pc-ink-deep); }

/* ---------- Ink chrome: sidebar + player (both schemes) ---------- */
.sidebar,
.player {
  color-scheme: dark;
  --text: #fff4db;
  --text-2: #d3ccb8;
  --text-3: #a9b6ae;
  --surface: #113444;
  --surface-2: #153b4c;
  --surface-3: #1b4657;
  --surface-hover: rgba(255, 244, 219, 0.07);
  --surface-pressed: rgba(255, 244, 219, 0.12);
  --stroke: #1f4a5b;
  --stroke-strong: #3a6878;
  --accent-text: #ff8f7b;
  --accent-icon: #ff7f69;
  --accent-icon-hover: #ff9a88;
  --accent-soft: rgba(255, 113, 92, 0.18);
  --accent-soft-text: #ffb4a6;
  --focus: #ffd45c;
  --focus-inner: #0d2b38;
  --pc-kicker: #8fd8d2;
  color: var(--text);
}
.sidebar {
  background:
    radial-gradient(420px 300px at 0% 100%, rgba(255, 113, 92, 0.12), transparent 70%),
    linear-gradient(180deg, #123949 0%, #0f3242 100%);
  border-right: 0;
}
.player {
  background: rgba(13, 43, 56, 0.96);
  border-top: 1px solid rgba(255, 244, 219, 0.1);
  box-shadow: 0 -10px 30px rgba(var(--ink-2-rgb), 0.18);
}
.player::before {
  /* Pecam's four-colour band, as a hairline on top of the player */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--pc-stripe);
  opacity: 0.85;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .sidebar { background: linear-gradient(180deg, #0f3242 0%, #0b2531 100%); border-right: 1px solid var(--stroke); }
  .player { background: rgba(10, 35, 46, 0.96); }
}

/* ---------- Wordmark (sidebar) ---------- */
.brand { padding: 4px 10px 26px; gap: 13px; }
.brand-mark { width: 38px; height: 38px; color: var(--pc-cream); --mark-waves: var(--pc-coral); --mark-sun: var(--pc-sun); }
.brand-name {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.19em;
  color: var(--pc-cream);
}
.brand-sub {
  margin-top: 7px;
  font-family: var(--pc-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--pc-coral);
}
/* Two-tone mark where a skin wants it: shapes default to currentColor. */
.mark-sun { fill: var(--mark-sun, currentColor); }
.mark-waves { fill: var(--mark-waves, currentColor); }

.nav-item.is-active { background: rgba(255, 244, 219, 0.09); }
.nav-item.is-active::before { background: var(--pc-coral); width: 3px; }
.nav-item.is-active .ic { color: var(--pc-coral); }
.nav-sep { background: rgba(255, 244, 219, 0.12); }

.sidebar-foot { padding: 12px; }
.sidebar-foot::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 2px;
  background: var(--pc-stripe);
}
.tagline {
  font-size: 9.5px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- Backdrop: peach sun glow + ripples instead of Apolo's stripes ---------- */
.backdrop {
  background:
    radial-gradient(1000px 620px at 96% -14%, var(--bg-blob-1), transparent 68%),
    radial-gradient(760px 620px at -6% 108%, var(--bg-blob-2), transparent 70%),
    var(--bg);
}
.backdrop::after {
  background: repeating-radial-gradient(circle at 100% 0%, transparent 0 46px, rgba(var(--brand-rgb), 0.07) 46px 47px);
  mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 62%);
}

/* ---------- Typography ---------- */
.eyebrow,
.hero-eyebrow,
.facts dt,
.q-heading,
.picker-label,
.dlg-section-title,
.ver-group,
.stat-row--head,
.now-context .eyebrow {
  font-family: var(--pc-mono);
  font-weight: 700;
  letter-spacing: 0.13em;
}
.eyebrow { font-size: 10.5px; color: var(--pc-kicker); }
.eyebrow a { color: inherit; }

.page-title {
  font-weight: 400;
  font-size: 44px;
  line-height: 46px;
  letter-spacing: -0.05em;
  margin-top: 6px;
}
.page-title::after {
  content: ".";
  content: "." / "";
  color: var(--pc-coral);
}
.section-title {
  font-weight: 400;
  font-size: 27px;
  line-height: 32px;
  letter-spacing: -0.04em;
}

/* Numbered kicker circles, as on pecam.com.br (01, 02, 03 …) */
.view { counter-reset: pc-section; }
.section-head .section-title::before {
  counter-increment: pc-section;
  content: counter(pc-section, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  border: 1px solid color-mix(in srgb, var(--pc-kicker) 55%, transparent);
  border-radius: 50%;
  font-family: var(--pc-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--pc-kicker);
  transform: translateY(-1px);
}
.prose-section > .section-title { display: flex; align-items: center; gap: 10px; }
.prose-section > .section-title::before {
  counter-increment: pc-section;
  content: counter(pc-section, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  border: 1px solid color-mix(in srgb, var(--pc-kicker) 55%, transparent);
  border-radius: 50%;
  font-family: var(--pc-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--pc-kicker);
  transform: translateY(-1px);
}
.section-link { font-family: var(--pc-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.detail-title { font-weight: 400; letter-spacing: -0.05em; line-height: 1; }
.detail-title--ep { font-weight: 400; line-height: 1.04; letter-spacing: -0.045em; font-size: clamp(32px, 3.6vw, 52px); }
.empty-title { font-weight: 400; font-size: 30px; line-height: 34px; letter-spacing: -0.04em; }
.empty--compact .empty-title { font-size: 21px; line-height: 26px; letter-spacing: -0.03em; }
.auth-title { font-weight: 400; font-size: 36px; line-height: 40px; letter-spacing: -0.045em; }
.panel-title, .dialog-title, .drawer-title { font-weight: 500; letter-spacing: -0.025em; }
.panel-title { font-size: 21px; line-height: 26px; }
.dialog-title, .drawer-title { font-size: 23px; }
.now-title { font-weight: 400; font-size: 28px; line-height: 32px; letter-spacing: -0.04em; }
.browse-name { font-weight: 400; font-size: 23px; line-height: 26px; letter-spacing: -0.035em; }
.stat-hero { font-weight: 400; letter-spacing: -0.05em; }
.stat-value { font-weight: 400; letter-spacing: -0.035em; }
.count-pill, .nav-count { font-family: var(--font); }
.hot-rank { font-weight: 400; font-size: 24px; color: var(--accent-text); }
.summary-text, .prose { font-size: 15.5px; }

/* ---------- Shape: Pecam's asymmetric corner ---------- */
.cover { border-radius: 3px 18px 3px 3px; }
.cover--xs { border-radius: 2px 8px 2px 2px; }
.cover--sm { border-radius: 2px 11px 2px 2px; }
.cover--lg, .cover--xl, .now-cover .cover { border-radius: var(--pc-r-hero); }
.hero { border-radius: var(--pc-r-hero); }
.auth-card, .panel, .summary-card, .card-surface, .feed-row, .facts, .dialog, .doc-row, .note-card, .version-picker {
  border-radius: var(--pc-r-card);
}
.tile { border-radius: 4px 20px 4px 4px; }
.browse-tile { border-radius: 4px 26px 4px 4px; }
.cover-pick-preview { border-radius: 3px 18px 3px 3px; }

/* ---------- Buttons ---------- */
.btn-primary { box-shadow: 0 1px 0 rgba(13, 43, 56, 0.12); }
.btn-lg.btn-primary,
.hero .btn {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.play-btn { color: var(--pc-ink-deep); }

/* ---------- Hero: the sunset card ---------- */
.hero {
  color: var(--pc-cream);
  background-image:
    var(--pc-grain),
    radial-gradient(70% 120% at 92% 125%, rgba(255, 212, 92, 0.5), rgba(255, 212, 92, 0) 62%),
    linear-gradient(100deg, rgba(var(--ink-2-rgb), 0.7) 0%, rgba(var(--ink-2-rgb), 0.46) 50%, rgba(var(--ink-2-rgb), 0.16) 100%),
    var(--hero-grad);
  background-blend-mode: soft-light, normal, normal, normal;
  box-shadow: 0 28px 70px rgba(22, 54, 65, 0.27);
}
.hero::before {
  background: repeating-radial-gradient(circle at calc(100% - 150px) calc(100% - 120px), transparent 0 33px, rgba(255, 244, 219, 0.07) 33px 34px);
  mask-image: radial-gradient(circle at calc(100% - 150px) calc(100% - 120px), #000 0, transparent 560px);
  -webkit-mask-image: radial-gradient(circle at calc(100% - 150px) calc(100% - 120px), #000 0, transparent 560px);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--pc-stripe);
  pointer-events: none;
}
.hero-mark { width: 380px; height: 380px; color: var(--pc-cream); opacity: 0.13; }
.hero-eyebrow { font-size: 10.5px; color: var(--pc-cream); }
.hero-title { font-weight: 400; font-size: clamp(30px, 3.7vw, 52px); line-height: 1.02; letter-spacing: -0.05em; margin-top: 12px; text-shadow: 0 2px 22px rgba(13, 49, 65, 0.3); }
.hero-meta { color: rgba(255, 244, 219, 0.95); }
.hero-meta a { color: var(--pc-cream); }
.hero-desc { color: rgba(255, 244, 219, 0.95); padding-left: 14px; border-left: 3px solid var(--pc-sun); }
.hero .btn-primary { background: var(--pc-coral); color: var(--pc-ink-deep); box-shadow: 0 10px 24px rgba(13, 43, 56, 0.25); }
.hero .btn-primary:hover:not(:disabled) { background: #ff8a76; box-shadow: 0 12px 28px rgba(13, 43, 56, 0.3); }
.hero .btn-glass { background: rgba(255, 244, 219, 0.06); border-color: rgba(255, 244, 219, 0.7); color: var(--pc-cream); border-radius: 999px; }
.hero .btn-glass:hover:not(:disabled) { background: rgba(255, 244, 219, 0.16); border-color: var(--pc-sun); }
.hero-remaining { color: rgba(255, 244, 219, 0.95); }
.hero :focus-visible { outline-color: var(--pc-sun); box-shadow: 0 0 0 2px rgba(13, 43, 56, 0.7); }

/* ---------- Generated covers ---------- */
.cover-gen-lines {
  background: repeating-radial-gradient(circle at 88cqi 12cqi, transparent 0 6cqi, rgba(255, 244, 219, 0.09) 6cqi calc(6cqi + 1px));
  mask-image: radial-gradient(circle at 88cqi 12cqi, #000 0, transparent 95cqi);
  -webkit-mask-image: radial-gradient(circle at 88cqi 12cqi, #000 0, transparent 95cqi);
}
.cover-gen-mark { width: 96cqi; height: 96cqi; right: -36cqi; top: -36cqi; bottom: auto; opacity: 0.2; }
.cover-gen--v1 .cover-gen-lines {
  background: repeating-radial-gradient(circle at 85cqi 103cqi, transparent 0 6cqi, rgba(255, 244, 219, 0.09) 6cqi calc(6cqi + 1px));
  mask-image: radial-gradient(circle at 85cqi 103cqi, #000 0, transparent 100cqi);
  -webkit-mask-image: radial-gradient(circle at 85cqi 103cqi, #000 0, transparent 100cqi);
}
.cover-gen--v1 .cover-gen-mark { width: 130cqi; height: 130cqi; right: -50cqi; top: auto; bottom: -62cqi; opacity: 0.17; }
.cover-gen--v2 .cover-gen-lines {
  background: repeating-radial-gradient(circle at 65cqi 36cqi, transparent 0 6cqi, rgba(255, 244, 219, 0.08) 6cqi calc(6cqi + 1px));
  mask-image: radial-gradient(circle at 65cqi 36cqi, #000 0, transparent 80cqi);
  -webkit-mask-image: radial-gradient(circle at 65cqi 36cqi, #000 0, transparent 80cqi);
}
.cover-gen--v2 .cover-gen-mark { width: 54cqi; height: 54cqi; right: 8cqi; top: 9cqi; bottom: auto; opacity: 0.24; }
.cover-gen-label { font-family: var(--pc-mono); font-weight: 700; letter-spacing: 0.22em; }
.cover-gen-label::after { background: var(--pc-sun); opacity: 1; height: max(1px, 1cqi); }
.cover-gen-initials { font-weight: 400; font-size: 34cqi; letter-spacing: -0.06em; line-height: 0.86; }
.cover--xs .cover-gen-initials, .cover--sm .cover-gen-initials { font-size: 40cqi; }

/* ---------- Browse tiles ---------- */
.browse-mark { width: 100px; height: 100px; right: -22px; bottom: -26px; opacity: 0.26; transform: none; }

/* ---------- Empty states: the sun broadcasting ---------- */
.empty-art {
  background: radial-gradient(circle at 34% 28%, #ffe08a 0%, #ffb067 30%, var(--pc-coral) 62%, #c9422c 100%);
  box-shadow: 0 28px 70px rgba(22, 54, 65, 0.22), inset 0 -12px 30px rgba(120, 30, 15, 0.22);
}
.empty-mark { width: 92px; height: 92px; color: var(--pc-cream); transform: none; --mark-sun: #fffaf0; }
.empty-wave { border-color: var(--pc-coral); opacity: 0.6; }
.empty-icon { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- Auth ---------- */
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--pc-stripe);
}
.auth-brand {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 120%, rgba(255, 113, 92, 0.45), transparent 60%), var(--pc-sea-ink);
  box-shadow: 0 10px 24px rgba(22, 54, 65, 0.25);
}
.auth-mark { width: 40px; height: 40px; color: var(--pc-cream); transform: none; --mark-waves: var(--pc-coral); --mark-sun: var(--pc-sun); }

@media (prefers-color-scheme: dark) {
  .auth-brand { box-shadow: 0 0 0 1px rgba(255, 244, 219, 0.14), 0 10px 24px rgba(0, 10, 15, 0.4); }
}

/* ---------- Details ---------- */
.summary-card::before { width: 4px; background: linear-gradient(180deg, var(--pc-coral), var(--pc-amber)); }
.summary-text li::before { border-radius: 50%; transform: none; background: var(--pc-coral); }
.progress-fill { background: linear-gradient(90deg, var(--brand-70), var(--pc-amber)); }
.note-card { border-left-width: 3px; }
.how-num, .step-num { font-family: var(--pc-mono); font-size: 11px; background: transparent; border: 1px solid color-mix(in srgb, var(--accent-soft-text) 55%, transparent); }
.facts dt { font-size: 10px; }

/* ---------- Now playing ---------- */
.now-bg {
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--now-tint, var(--brand-80)) 46%, var(--bg)) 0%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--now-tint, var(--brand-80)) 30%, var(--bg)) 0%, var(--bg) 72%);
}
.now-context .eyebrow { font-size: 9.5px; color: var(--text); }
.play-btn-xl { background: var(--pc-coral); color: var(--pc-ink-deep); box-shadow: 0 14px 34px rgba(var(--brand-rgb), 0.38); }
.play-btn-xl:hover:not(:disabled) { background: #ff8a76; }
.play-btn-xl.is-buffering::after { border-color: var(--pc-coral); border-right-color: transparent; }

/* ---------- Player (desktop) ---------- */
.player-controls .play-btn { background: var(--pc-coral); color: var(--pc-ink-deep); }
.player-controls .play-btn:hover:not(:disabled) { background: #ff8a76; }
.player-controls .play-btn.is-buffering::after { border-color: var(--pc-coral); border-right-color: transparent; }
.player-controls .play-btn:disabled { opacity: 1; background: rgba(255, 244, 219, 0.12); color: rgba(255, 244, 219, 0.55); }

/* ---------- Segmented control (dark): selected reads lighter, not sunken ---------- */
@media (prefers-color-scheme: dark) {
  .segmented { background: rgba(255, 244, 219, 0.06); }
  .segmented-btn.is-selected { background: #265a6e; box-shadow: 0 1px 2px rgba(0, 10, 15, 0.35); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023.98px) {
  .brand { padding: 4px 0 20px; }
}

@media (max-width: 767.98px) {
  .page-title { font-size: 38px; line-height: 40px; }
  .section-title { font-size: 24px; line-height: 28px; }
  .section-head .section-title::before { width: 27px; height: 27px; font-size: 9.5px; }
  .hero {
    border-radius: 3px 25px 3px 3px;
    /* Stacked layout: a vertical ink wash (as on pecam.com.br's mobile hero) keeps text legible top to bottom */
    background-image:
      var(--pc-grain),
      radial-gradient(90% 50% at 100% 105%, rgba(255, 212, 92, 0.28), rgba(255, 212, 92, 0) 70%),
      linear-gradient(180deg, rgba(var(--ink-2-rgb), 0.34) 0%, rgba(var(--ink-2-rgb), 0.26) 30%, rgba(var(--ink-2-rgb), 0.62) 100%),
      var(--hero-grad);
  }
  .hero-mark { width: 260px; height: 260px; }
  .hero::before {
    background: repeating-radial-gradient(circle at calc(100% - 90px) calc(100% - 60px), transparent 0 28px, rgba(255, 244, 219, 0.07) 28px 29px);
    mask-image: radial-gradient(circle at calc(100% - 90px) calc(100% - 60px), #000 0, transparent 360px);
    -webkit-mask-image: radial-gradient(circle at calc(100% - 90px) calc(100% - 60px), #000 0, transparent 360px);
  }
  .hero-title { font-size: 32px; line-height: 1.04; }
  .browse-mark { width: 76px; height: 76px; }
  .browse-name { font-size: 18px; line-height: 21px; letter-spacing: -0.03em; }
  .detail-title--ep { font-size: 32px; }
  .now-title { font-size: 27px; line-height: 31px; }
  .player { border: 0; border-radius: 4px 18px 4px 4px; box-shadow: 0 10px 28px rgba(22, 54, 65, 0.3); }
  .player::before { display: none; }
  .tab.is-active { color: var(--accent-text); }
  .prose-section > .section-title::before { width: 27px; height: 27px; font-size: 9.5px; }
}
@media (max-width: 767.98px) and (prefers-color-scheme: dark) {
  .player { background: #174152; border: 1px solid rgba(255, 244, 219, 0.1); }
}

@media (forced-colors: active) {
  .sidebar-foot::before, .hero::after, .auth-card::before, .player::before { display: none; }
}