/* =========================================================
   Canais — estilos
   =========================================================
   Identidade visual "como a Apple faria": vidro translúcido
   (Liquid Glass), escala de texto do iOS/macOS e as Cores do Ano
   da Pantone como cores do sistema. Tema claro e escuro seguem o
   aparelho; o Modo Cinema é sempre escuro.
   ========================================================= */

/* Fonte: Inter (a mais parecida com a San Francisco da Apple; licença livre em fonts/OFL.txt).
   Nos navegadores da Apple, a própria San Francisco (veja o @supports abaixo do body). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   Cores (Pantone) e medidas
   ========================================================= */
:root {
  /* Cores do Ano da Pantone */
  --peri: #6667AB;        /* PANTONE 17-3938 Very Peri — destaque */
  --blue: #0F4C81;        /* PANTONE 19-4052 Classic Blue */
  --peach: #FFBE98;       /* PANTONE 13-1023 Peach Fuzz */
  --mocha: #A47864;       /* PANTONE 17-1230 Mocha Mousse */
  --magenta: #BB2649;     /* PANTONE 18-1750 Viva Magenta — Ao Vivo */
  --coral: #FF6F61;       /* PANTONE 16-1546 Living Coral */
  --green: #88B04B;       /* PANTONE 15-0343 Greenery */
  --yellow: #F5DF4D;      /* PANTONE 13-0647 Illuminating */
  --violet: #5F4B8B;      /* PANTONE 18-3838 Ultra Violet */
  --gray: #939597;        /* PANTONE 17-5104 Ultimate Gray */
  --crimson: #AE0F36;     /* PANTONE 19-1762 Crimson — barras de progresso e assistidos */
  --ink-on-video: #F4F9FF; /* PANTONE 11-0601 Bright White — ícones do player */
  --on-tint: #F4F9FF;     /* texto sobre a cor de destaque */
  --video-bg: #101820;    /* fundo atrás do vídeo (PANTONE Black 6 C) */

  /* Tema claro (padrão) */
  --tint: var(--peri);
  --tint-hover: #5F4B8B;
  --tint-soft: rgba(102, 103, 171, .13);
  --live: var(--magenta);
  --bg: #F0EEE9;
  --bg-elev: #F4F9FF;
  --grouped: #F0EEE9;
  --fill: rgba(147, 149, 151, .12);
  --fill-2: rgba(147, 149, 151, .08);
  --fill-3: rgba(147, 149, 151, .2);
  --text: #101820;
  --text-2: #63666A;
  --text-3: #888B8D;
  --sep: #C8C9C7;
  --glass: rgba(244, 249, 255, .62);
  --glass-strong: rgba(244, 249, 255, .84);
  --glass-edge: rgba(244, 249, 255, .9);
  --glass-hi: rgba(244, 249, 255, .6);
  --glass-shadow: 0 10px 34px rgba(16, 24, 32, .12), 0 1px 3px rgba(16, 24, 32, .06);
  --card-shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 6px 18px rgba(16, 24, 32, .07);
  --lift-shadow: 0 18px 40px -14px rgba(16, 24, 32, .35);
  --ok: #88B04B;
  --error: #BB2649;
  /* Menu lateral (estilo YouTube) */
  --side-hover: rgba(16, 24, 32, .05);
  --side-active: rgba(16, 24, 32, .07);
  --side-press: rgba(16, 24, 32, .11);
  --side-dot: #0F4C81;      /* PANTONE 19-4052 Classic Blue */
  --side-link: #0F4C81;
  --side-link-soft: rgba(15, 76, 129, .1);

  /* Nomes antigos (usados em alguns trechos) */
  --surface: var(--bg-elev);
  --surface-2: var(--fill);
  --surface-3: var(--fill-3);
  --border: var(--sep);
  --muted: var(--text-2);
  --accent: var(--tint);
  --accent-soft: var(--tint-soft);

  --radius: 14px;
  --radius-sm: 10px;
  --gutter: clamp(16px, 3vw, 40px);
  --side-w: 240px;
  --side-mini-w: 72px;
  --side-gap: 0px;
  --tabbar-space: 0px;
  color-scheme: light;
}
/* Tema Escuro (também a base dos temas Pantone) */
:root[data-scheme="dark"] {
  --tint: #6667AB;
  --tint-hover: #6667AB;
  --tint-soft: rgba(102, 103, 171, .17);
  --live: #BB2649;
  --bg: #101820;
  --bg-elev: #1D252D;
  --grouped: #101820;
  --fill: rgba(147, 149, 151, .24);
  --fill-2: rgba(147, 149, 151, .16);
  --fill-3: rgba(147, 149, 151, .34);
  --text: #F4F9FF;
  --text-2: #C8C9C7;
  --text-3: #97999B;
  --sep: #53565A;
  --glass: rgba(29, 37, 45, .58);
  --glass-strong: rgba(29, 37, 45, .86);
  --glass-edge: rgba(244, 249, 255, .13);
  --glass-hi: rgba(244, 249, 255, .07);
  --glass-shadow: 0 10px 34px rgba(16, 24, 32, .5), 0 1px 3px rgba(16, 24, 32, .3);
  --card-shadow: 0 1px 2px rgba(16, 24, 32, .3), 0 8px 22px rgba(16, 24, 32, .35);
  --lift-shadow: 0 18px 40px -14px rgba(16, 24, 32, .8);
  --ok: #88B04B;
  --error: #FF6F61;
  --side-hover: rgba(244, 249, 255, .08);
  --side-active: rgba(244, 249, 255, .1);
  --side-press: rgba(244, 249, 255, .16);
  --side-dot: #418FDE;      /* PANTONE 279 C */
  --side-link: #418FDE;
  --side-link-soft: rgba(65, 143, 222, .14);
  color-scheme: dark;
}
/* Modo Cinema: sempre escuro */
:root:not([data-pantone]) body.cinema {
  --tint: #6667AB;
  --tint-soft: rgba(102, 103, 171, .17);
  --live: #BB2649;
  --bg: #101820;
  --bg-elev: #1D252D;
  --fill: rgba(147, 149, 151, .24);
  --fill-2: rgba(147, 149, 151, .16);
  --fill-3: rgba(147, 149, 151, .34);
  --text: #F4F9FF;
  --text-2: #C8C9C7;
  --text-3: #97999B;
  --sep: #53565A;
  --glass: rgba(29, 37, 45, .58);
  --glass-strong: rgba(29, 37, 45, .86);
  --glass-edge: rgba(244, 249, 255, .13);
  --glass-hi: rgba(244, 249, 255, .07);
  --glass-shadow: 0 10px 34px rgba(16, 24, 32, .5);
  --card-shadow: 0 8px 22px rgba(16, 24, 32, .35);
  --side-hover: rgba(244, 249, 255, .08);
  --side-active: rgba(244, 249, 255, .1);
  --side-press: rgba(244, 249, 255, .16);
  --side-dot: #418FDE;      /* PANTONE 279 C */
  --side-link: #418FDE;
  --side-link-soft: rgba(65, 143, 222, .14);
  color-scheme: dark;
}

/* =========================================================
   Temas Pantone (Verde, Azul e Vermelho)
   Cada um mistura tons escuros e claros da mesma cor Pantone,
   com leves degradês e linhas artísticas bem suaves no fundo.
   Os valores em hex são conversões de referência (a Pantone
   não publica um hex oficial para cada cor).
   ========================================================= */
:root[data-theme="green"] {
  --th-deep: #22372B;  --th-deep-rgb: 34, 55, 43;     /* PANTONE 5605 C */
  --th-bg: #154734;    --th-bg-rgb: 21, 71, 52;       /* PANTONE 3435 C */
  --th-elev: #115740;  --th-elev-rgb: 17, 87, 64;     /* PANTONE 343 C */
  --th-mid: #006747;   --th-mid-rgb: 0, 103, 71;      /* PANTONE 342 C */
  --th-vivid: #6BA539; --th-vivid-rgb: 107, 165, 57;  /* PANTONE 7737 C */
  --th-light: #C2E189; --th-light-rgb: 194, 225, 137; /* PANTONE 365 C */
  --th-pale: #D0DEBB;  --th-pale-rgb: 208, 222, 187;  /* PANTONE 7485 C */
}
:root[data-theme="blue"] {
  --th-deep: #0C2340;  --th-deep-rgb: 12, 35, 64;     /* PANTONE 289 C */
  --th-bg: #13294B;    --th-bg-rgb: 19, 41, 75;       /* PANTONE 2767 C */
  --th-elev: #003C71;  --th-elev-rgb: 0, 60, 113;     /* PANTONE 541 C */
  --th-mid: #0F4C81;   --th-mid-rgb: 15, 76, 129;     /* PANTONE 19-4052 Classic Blue */
  --th-vivid: #418FDE; --th-vivid-rgb: 65, 143, 222;  /* PANTONE 279 C */
  --th-light: #ABCAE9; --th-light-rgb: 171, 202, 233; /* PANTONE 277 C */
  --th-pale: #B9D9EB;  --th-pale-rgb: 185, 217, 235;  /* PANTONE 290 C */
}
:root[data-theme="red"] {
  --th-deep: #3F2021;  --th-deep-rgb: 63, 32, 33;     /* PANTONE 4975 C */
  --th-bg: #3F2021;    --th-bg-rgb: 63, 32, 33;       /* PANTONE 4975 C */
  --th-elev: #651D32;  --th-elev-rgb: 101, 29, 50;    /* PANTONE 7421 C */
  --th-mid: #8A1538;   --th-mid-rgb: 138, 21, 56;     /* PANTONE 1955 C */
  --th-vivid: #F4364C; --th-vivid-rgb: 244, 54, 76;   /* PANTONE 1787 C */
  --th-light: #FABBCB; --th-light-rgb: 250, 187, 203; /* PANTONE 182 C */
  --th-pale: #ECC7CD;  --th-pale-rgb: 236, 199, 205;  /* PANTONE 196 C */
  --live: #F4364C;
}
:root[data-pantone] {
  --tint: var(--th-light);
  --tint-hover: var(--th-pale);
  --tint-soft: rgba(var(--th-light-rgb), .16);
  --on-tint: var(--th-deep);
  --bg: var(--th-bg);
  --bg-elev: var(--th-elev);
  --grouped: var(--th-bg);
  --fill: rgba(var(--th-pale-rgb), .14);
  --fill-2: rgba(var(--th-pale-rgb), .09);
  --fill-3: rgba(var(--th-pale-rgb), .24);
  --text: #F4F9FF;
  --text-2: var(--th-pale);
  --text-3: rgba(var(--th-pale-rgb), .68);
  --sep: rgba(var(--th-pale-rgb), .2);
  --glass: rgba(var(--th-elev-rgb), .55);
  --glass-strong: rgba(var(--th-elev-rgb), .88);
  --glass-edge: rgba(var(--th-pale-rgb), .16);
  --glass-hi: rgba(244, 249, 255, .08);
  --glass-shadow: 0 10px 34px rgba(var(--th-deep-rgb), .55), 0 1px 3px rgba(16, 24, 32, .3);
  --card-shadow: 0 1px 2px rgba(16, 24, 32, .25), 0 8px 22px rgba(var(--th-deep-rgb), .45);
  --lift-shadow: 0 18px 40px -14px rgba(16, 24, 32, .8);
  --video-bg: var(--th-deep);
  --sheen: linear-gradient(150deg, rgba(var(--th-vivid-rgb), .17), rgba(var(--th-vivid-rgb), 0) 58%);
  --side-hover: rgba(var(--th-pale-rgb), .1);
  --side-active: rgba(var(--th-pale-rgb), .14);
  --side-press: rgba(var(--th-pale-rgb), .2);
  --side-dot: var(--th-light);
  --side-link: var(--th-light);
  --side-link-soft: rgba(var(--th-light-rgb), .14);
  --error: #FF6F61;
}
/* Modo Cinema nos temas Pantone: o tom mais escuro da cor, sem desenhos */
:root[data-pantone] body.cinema { --bg: var(--th-deep); --bg-elev: var(--th-bg); --glass: rgba(var(--th-deep-rgb), .62); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
html.is-fullscreen { scrollbar-gutter: auto; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .5s ease;
}
/* Só os navegadores da Apple entendem "-apple-system-body": neles, a fonte original da Apple. */
@supports (font: -apple-system-body) {
  body { font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; }
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--fill);
  padding: 1px 6px;
  border-radius: 6px;
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
.muted { color: var(--text-2); }
.error { color: var(--error); }

/* Ícones */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sprite .f { fill: currentColor; stroke: none; }
.sprite .t { font-family: "Inter", sans-serif; }
.sprite .w { stroke: #F4F9FF; stroke-width: 2.2; }
.ic { width: 22px; height: 22px; flex-shrink: 0; display: block; }

/* Tipografia (escala do iOS e do macOS) */
.t-large { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.026em; }
.t-title1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.024em; }
.t-title2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.t-title3 { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.018em; }
.eyebrow { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); }

/* Barra de rolagem discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--fill-3); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   Vidro, botões, campos, interruptores, segmentados
   ========================================================= */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-edge), inset 0 1px 0 var(--glass-hi);
}
/* Vidro escuro, sobre vídeos e capas */
.glass-dark {
  background: rgba(16, 24, 32, .42);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .18), inset 0 1px 0 rgba(244, 249, 255, .14), 0 8px 24px rgba(16, 24, 32, .25);
  color: #F4F9FF;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn .ic { width: 18px; height: 18px; }
.btn:disabled { opacity: .5; cursor: progress; }
.btn-primary, .btn-tint { background: var(--tint); color: var(--on-tint); }
.btn-primary:hover, .btn-tint:hover { background: var(--tint-hover); }
.btn-ghost, .btn-fill { background: var(--fill); color: var(--text); }
.btn-ghost:hover, .btn-fill:hover { background: var(--fill-3); }
.btn-tinted { background: var(--tint-soft); color: var(--tint); }
.btn-white { background: #F4F9FF; color: #101820; }
.btn-google { background: #F4F9FF; color: #101820; box-shadow: inset 0 0 0 1px #C8C9C7; }
.btn-google:hover { background: #F0EEE9; }
.btn-google svg, .btn-google .ic { width: 18px; height: 18px; }
.btn-sm { height: 30px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.btn-icon:hover { background: var(--fill); color: var(--text); }
.btn-icon svg { width: 20px; height: 20px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--tint); font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

.round-glass {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.round-glass .ic { width: 19px; height: 19px; }
.tint-ic { color: var(--tint); }
.pill-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px 0 12px;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
}
.pill-glass .ic { width: 18px; height: 18px; }
.pill-glass[aria-pressed="true"] { color: var(--tint); }

/* Campos */
.field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  background: var(--fill);
  color: var(--text-3);
}
.field .ic { width: 17px; height: 17px; }
.field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.field input::placeholder { color: var(--text-3); }
.field:focus-within { box-shadow: 0 0 0 3px var(--tint-soft); }
.big-field { height: 40px; margin: 0 0 22px; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

input[type="text"]:not(.field input):not(.channel-dur input), input[type="password"] {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 0;
  background: var(--fill);
  color: var(--text);
  outline: none;
  transition: box-shadow .2s;
}
input[type="text"]:not(.field input):focus, input[type="password"]:focus { box-shadow: 0 0 0 3px var(--tint-soft); }

:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 8px; }

/* Interruptor (o checkbox vira o interruptor do iPhone) */
input.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: var(--fill-3);
  cursor: pointer;
  transition: background .3s var(--ease);
}
input.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #F4F9FF;
  box-shadow: 0 3px 8px rgba(16, 24, 32, .15), 0 3px 1px rgba(16, 24, 32, .06);
  transition: transform .45s var(--ease-spring);
}
input.switch:checked { background: var(--tint); }
input.switch:checked::after { transform: translateX(20px); }
input.switch.sm { width: 42px; height: 26px; }
input.switch.sm::after { width: 22px; height: 22px; }
input.switch.sm:checked::after { transform: translateX(16px); }

/* Segmentado (com a "pílula" que desliza) */
.seg {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
}
.seg > a, .seg > button {
  position: relative;
  padding: 5px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.seg > [aria-current="true"], .seg > [aria-pressed="true"] { font-weight: 600; }
.seg-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  z-index: -1;
  border-radius: 7px;
  background: var(--bg-elev);
  box-shadow: 0 3px 8px rgba(16, 24, 32, .12), 0 0 0 .5px rgba(16, 24, 32, .04);
  transition: left .5s var(--ease-spring), width .5s var(--ease-spring);
}
:root[data-scheme="dark"] .seg-thumb { background: #53565A; }
body.cinema .seg-thumb { background: #53565A; }
.seg:not(:has(.seg-thumb)) > [aria-current="true"], .seg:not(:has(.seg-thumb)) > [aria-pressed="true"] {
  background: var(--bg-elev);
  box-shadow: 0 3px 8px rgba(16, 24, 32, .12);
}
.seg-cap { border-radius: 999px; }
.seg-cap > a, .seg-cap > button, .seg-cap .seg-thumb { border-radius: 999px; }
.seg-cap > a, .seg-cap > button { padding: 6px 16px; }

.pill {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tint-soft);
  color: var(--tint);
}
.pill:empty { display: none; }

/* =========================================================
   Estrutura: menu lateral (computador) e abas (celular)
   ========================================================= */
@property --side-now { syntax: '<length>'; inherits: true; initial-value: 0px; }
body { --side-now: calc(var(--side-w) + var(--side-gap)); }
body.sidebar-mini { --side-now: calc(var(--side-mini-w) + var(--side-gap)); }
body.sidebar-hidden { --side-now: 0px; }
main { min-height: 100vh; margin-left: var(--side-now); padding-bottom: var(--tabbar-space); }
.view { padding: 26px var(--gutter) 64px; }

/* Menu lateral no estilo do YouTube: colado à esquerda, de cima a baixo, liso, na cor
   do fundo da página, sem bordas nem sombra; itens de 40 px com ícone, separados em
   grupos por linhas finas; tudo abaixo da busca rola junto. */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: var(--side-w);
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  view-transition-name: sidebar;
}
.sidebar.glass { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

/* Topo: botão do menu (três linhas) e a marca */
.sidebar .side-head { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; text-decoration: none; }
.brand-icon { display: grid; flex-shrink: 0; }
.brand-icon svg { width: 28px; height: 28px; transition: transform .5s var(--ease-spring); }
.brand:hover .brand-icon svg { transform: scale(1.06); }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap; }
.side-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.side-toggle:hover { background: var(--side-hover); }
.side-toggle:active { background: var(--side-press); }
.side-toggle .ic { width: 24px; height: 24px; }

/* Busca: caixa arredondada com borda e o botão da lupa à direita */
.side-search {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  height: 40px;
  margin: 2px 12px 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sep);
  border-radius: 40px;
  background: var(--bg);
  color: var(--text);
  flex-shrink: 0;
  cursor: text;
  transition: border-color .2s var(--ease);
}
.side-search .ic {
  flex: 0 0 52px;
  width: 52px;
  height: auto;
  padding: 0 16px 0 14px;
  border-left: 1px solid var(--sep);
  background: var(--side-hover);
}
.side-search input { flex: 1; min-width: 0; padding: 0 4px 0 16px; border: 0; background: transparent; outline: none; font-size: 15px; color: var(--text); }
.side-search input::placeholder { color: var(--text-3); }
.side-search:focus-within { border-color: var(--tint); box-shadow: inset 0 0 0 .5px var(--tint); }

/* Corpo: rola junto; a barra de rolagem só aparece com o mouse em cima */
.side-body {
  flex: 1;
  min-height: 0;
  padding: 0 12px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.side-body:hover { scrollbar-color: var(--fill-3) transparent; }
.side-body::-webkit-scrollbar { width: 8px; }
.side-body::-webkit-scrollbar-thumb { background: transparent; border: 0; border-radius: 8px; }
.side-body:hover::-webkit-scrollbar-thumb { background: var(--fill-3); }

/* Grupos separados por uma linha fina */
.side-nav, .side-section, .side-footer { padding: 12px 0; border-bottom: 1px solid var(--sep); }
.side-nav { padding-top: 0; }
.side-section-lives:not(:has(.side-item, .side-empty)) { display: none; }
.side-footer { border-bottom: 0; }
.side-nav, .side-footer, .side-scroll { display: grid; align-content: start; gap: 0; }

.side-item {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.side-item:hover { background: var(--side-hover); }
.side-item:active { background: var(--side-press); }
.side-item.active { background: var(--side-active); font-weight: 600; }
.side-item.active:hover { background: var(--side-press); }
.side-icon { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; color: inherit; }
.side-icon .ic { width: 24px; height: 24px; }
.side-avatar {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fill);
}
.side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-count {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--live);
  color: #F4F9FF;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.side-count:empty { display: none; }
/* Vídeo novo no canal: pontinho, como o das inscrições do YouTube */
.side-new { margin-left: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--side-dot); flex-shrink: 0; }
.side-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 6px 4px 4px 12px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.side-add { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text); }
.side-add:hover { background: var(--side-hover); }
.side-add .ic { width: 20px; height: 20px; }
.side-section { display: block; }
.side-empty { margin: 0; padding: 6px 12px; font-size: 13px; color: var(--text-2); }

/* Lives no menu */
.side-live { height: auto; min-height: 48px; padding-block: 4px; }
.side-live .side-label { display: grid; line-height: 1.3; }
.side-live-title { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.side-live-name { overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-2); font-weight: 400; }
.side-live-viewers { display: none; }
.live-avatar { position: relative; flex-shrink: 0; display: grid; }
.live-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin-left: auto;
  border-radius: 50%;
  position: relative;
  background: var(--live);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--live);
  opacity: .5;
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(2.4); opacity: 0; }
}

/* Conta */
.account { display: block; }
.account:not(:empty) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sep); }
.acct {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 4px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
}
.acct:hover { background: var(--side-hover); }
.acct img, .acct .acct-ph { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(145deg, var(--peach), var(--mocha)); }
.acct-text { min-width: 0; flex: 1; display: grid; }
.acct-text b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-text span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .ic { width: 16px; height: 16px; color: var(--text-2); }
.side-signin { margin: 0; padding: 0 12px 10px; color: var(--text); font-size: 14px; line-height: 20px; white-space: normal; }
/* Entrar: botão contornado e arredondado, como o "Fazer login" do YouTube */
.account .btn-google {
  width: auto;
  height: 36px;
  margin: 0 0 4px 12px;
  padding: 0 15px 0 11px;
  border-radius: 18px;
  background: transparent;
  color: var(--side-link);
  box-shadow: inset 0 0 0 1px var(--sep);
  font-size: 14px;
  font-weight: 600;
}
.account .btn-google:hover { background: var(--side-link-soft); box-shadow: inset 0 0 0 1px transparent; }

/* Recolhido (72 px): ícone em cima e o nome pequeno embaixo, como o mini-guia do YouTube */
body.sidebar-mini .sidebar { width: var(--side-mini-w); }
body.sidebar-mini :is(.brand, .side-title, .side-count, .side-new, .acct-text, .acct .ic, .side-section-lives, .side-empty, .side-signin) { display: none; }
/* o botão do menu não sai do lugar (16 px) enquanto o menu encolhe ou cresce */
body.sidebar-mini .sidebar .side-head { justify-content: flex-start; padding: 0 16px; }
body.sidebar-mini .side-search { width: 40px; height: 40px; margin: 2px 16px 10px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
body.sidebar-mini .side-search:hover { background: var(--side-hover); }
body.sidebar-mini .side-search .ic { flex-basis: 40px; width: 40px; padding: 0 9px; border: 0; background: transparent; }
body.sidebar-mini .side-search input { display: none; }
body.sidebar-mini .side-body { padding: 0 4px 16px; scrollbar-width: none; }
body.sidebar-mini .side-body::-webkit-scrollbar { width: 0; }
body.sidebar-mini :is(.side-nav, .side-footer) .side-item { flex-direction: column; justify-content: center; gap: 6px; height: 74px; padding: 16px 0 14px; }
body.sidebar-mini :is(.side-nav, .side-footer) .side-label { max-width: 100%; padding: 0 2px; font-size: 10px; line-height: 14px; font-weight: 400; }
body.sidebar-mini :is(.side-nav, .side-footer) .side-item.active { font-weight: 400; }
body.sidebar-mini .side-section-channels .side-label { display: none; }
body.sidebar-mini .side-section-channels .side-item { justify-content: center; height: 48px; padding: 0; }
body.sidebar-mini :is(.side-nav, .side-section, .side-footer) { padding-block: 4px; border: 0; }
body.sidebar-mini .account:not(:empty) { margin-top: 4px; padding-top: 8px; border: 0; }
body.sidebar-mini .acct { justify-content: center; padding: 8px 0; }
body.sidebar-mini .account .btn-google span { display: none; }
body.sidebar-mini .account .btn-google { display: flex; width: 40px; height: 40px; padding: 0; margin: 0 auto 4px; border-radius: 50%; justify-content: center; }

/* Modo Cinema (página do vídeo): o menu fica escondido; o botão de menu o abre ao lado,
   empurrando o player e a página para a direita (como no YouTube), sem cobrir nada. */
body.sidebar-hidden .sidebar { transform: translateX(-100%); }
body.sidebar-hidden.cinema-side { --side-now: var(--side-w); }
body.sidebar-hidden.cinema-side .sidebar { transform: none; }
body.sidebar-hidden .sidebar.glass { background: var(--bg); }
.sidebar-backdrop { display: none; }

::view-transition-group(sidebar),
::view-transition-old(sidebar),
::view-transition-new(sidebar) { animation: none; }

/* Abas (celular e janelas estreitas) */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-around;
  width: min(calc(100vw - 28px), 560px);
  height: 64px;
  padding: 0 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  isolation: isolate;
  transition: transform .5s var(--ease-smooth), opacity .3s var(--ease);
}
.tab {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 96px;
  padding: 7px 0 6px;
  border-radius: 999px;
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: .005em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s var(--ease), transform .45s var(--ease-spring);
}
.tab .ic { width: 24px; height: 24px; }
.tab .ic-on { display: none; }
.tab.on { color: var(--tint); }
.tab.on .ic-on { display: block; }
.tab.on .ic-off { display: none; }
.tab:active { transform: scale(.92); transition-duration: .3s, .08s; }
.tab-dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px var(--bg-elev); }
.tab-pill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  z-index: -1;
  border-radius: 999px;
  background: var(--tint-soft);
  opacity: 0;
  transition: left .55s var(--ease-spring), width .55s var(--ease-spring), opacity .3s;
}
.tabbar.ready .tab-pill { opacity: 1; }

@media (max-width: 1099px) {
  body, body.sidebar-mini, body.sidebar-hidden { --side-now: 0px; }
  :root { --tabbar-space: 104px; }
  .sidebar { display: none; }
  .tabbar { display: flex; }
  body.watching:not(.mini-player) .tabbar { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
}

/* Cabeçalho das páginas (título grande) */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  max-width: 2200px;
  margin: 0 auto 22px;
}
.page-title { min-width: 0; }
.head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.account-mini { display: none; }
.back-link {
  display: none;
  align-items: center;
  gap: 2px;
  margin: 0 0 4px -6px;
  color: var(--tint);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.back-link .ic { width: 22px; height: 22px; }

/* =========================================================
   Início: cabeçalho, destaque e cartões
   ========================================================= */
.home-wrap { container-type: inline-size; }
.chips-row { display: none; }
.feed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 22px;
  max-width: 2200px;
  margin: 0 auto;
}
@container (min-width: 500px)  { .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 800px)  { .feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1080px) { .feed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 1560px) { .feed-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.skeleton-grid { margin-top: 28px; }
.feed-grid:empty + .skeleton-grid { margin-top: 0; }

.tile {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  border-radius: 16px;
  -webkit-tap-highlight-color: transparent;
}
.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--fill);
  box-shadow: var(--card-shadow);
  isolation: isolate;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.tile:hover .thumb, .tile:focus-visible .thumb { transform: translateY(-4px); box-shadow: var(--lift-shadow); }
.tile:hover .thumb img { transform: scale(1.045); }

/* Selos sobre a capa (cápsulas de vidro escuro) */
.badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(16, 24, 32, .5);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .2);
  color: #F4F9FF;
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.badge-live, .badge-upcoming {
  right: auto;
  left: 8px;
  top: 8px;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 7px;
  background: var(--live);
  font-weight: 700;
  letter-spacing: .04em;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F4F9FF; }
.badge-upcoming { background: var(--blue); }
/* Progresso do vídeo e assistidos: barra na borda de baixo da capa, em Crimson (como era antes) */
.watch-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 4px;
  background: rgba(244, 249, 255, .35);
}
.watch-progress span { display: block; height: 100%; background: var(--crimson); }
.thumb:has(.watch-progress) .badge:not(.badge-live):not(.badge-upcoming) { bottom: 12px; }

.tile-info { display: flex; gap: 10px; padding-top: 11px; }
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--fill);
  object-fit: cover;
}
.avatar.sm { width: 32px; height: 32px; }
.avatar.lg { width: 52px; height: 52px; }
.tile-title, .mini-title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.014em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.tile-channel, .tile-meta, .mini-meta {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-2);
}
.tile-meta { margin-top: 0; }
.tile-meta .sep::before { content: " · "; }
.new-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tint-soft);
  color: var(--tint);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 1px;
}
.tile-more { display: none; }
.hero-txt { display: none; }

/* Destaque: o vídeo mais novo ocupa a linha inteira, com o título por cima da capa */
.feed-grid.with-hero::before, .feed-grid.with-hero::after {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: end;
  margin-bottom: -14px;
}
.feed-grid.with-hero::before { content: "Mais recentes"; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.feed-grid.with-hero::after { content: attr(data-sub); justify-self: end; font-size: 15px; color: var(--text-2); padding-bottom: 2px; }
.tile.tile-hero { grid-row: 1; grid-column: 1 / -1; margin-bottom: 6px; }
.tile-hero .thumb { aspect-ratio: auto; height: clamp(260px, 25cqw, 380px); border-radius: 26px; }
.tile-hero .thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(16, 24, 32, .78) 0%, rgba(16, 24, 32, .35) 45%, transparent 72%);
  pointer-events: none;
}
.tile-hero:hover .thumb { transform: translateY(-3px); }
.tile-hero:hover .thumb img { transform: scale(1.025); }
.tile-hero .tile-info { display: none; }
.tile-hero .badge:not(.badge-live):not(.badge-upcoming) { display: none; }
.tile-hero .hero-txt {
  position: absolute;
  left: clamp(24px, 3cqw, 44px);
  bottom: clamp(22px, 3cqw, 38px);
  z-index: 2;
  display: block;
  max-width: min(560px, 55%);
  color: #F4F9FF;
}
.hero-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; opacity: .92; }
.hero-eyebrow img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(244, 249, 255, .3); }
.hero-title { margin: 0 0 10px; font-size: clamp(24px, 2.4cqw, 34px); line-height: 1.18; font-weight: 700; letter-spacing: -0.028em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-meta { margin: 0 0 20px; font-size: 15px; font-weight: 500; opacity: .82; }
.hero-actions { display: flex; gap: 10px; }
.hero-actions .btn { height: 44px; padding: 0 22px 0 18px; font-size: 16px; }
.hero-actions .round { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }

/* Página de um canal: faixa com a foto desfocada */
.channel-banner { max-width: 2200px; margin: -6px auto 0; }
.cb-box {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--card-shadow);
  isolation: isolate;
  background: linear-gradient(120deg, var(--violet), var(--blue));
}
.cb-bg { position: absolute; inset: -30%; width: 160%; height: 160%; object-fit: cover; filter: blur(42px) saturate(160%); transform: scale(1.1); opacity: .95; }
.cb-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 24, 32, .38), rgba(16, 24, 32, .08) 60%, rgba(16, 24, 32, .18)); }
.cb-main { position: absolute; left: 32px; bottom: 26px; right: 260px; z-index: 1; display: flex; align-items: center; gap: 18px; color: #F4F9FF; min-width: 0; }
.cb-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(244, 249, 255, .35), 0 10px 26px rgba(16, 24, 32, .25); background: rgba(244, 249, 255, .2); }
.cb-main h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-meta { font-size: 15px; font-weight: 500; opacity: .86; }
.cb-actions { position: absolute; right: 26px; bottom: 28px; z-index: 1; display: flex; gap: 10px; }
.cb-actions .pill-glass, .cb-actions .round-glass { background: rgba(16, 24, 32, .42); color: #F4F9FF; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .18), inset 0 1px 0 rgba(244, 249, 255, .14); }
.cb-back { display: none; }
.cb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 16px; }
body.channel-page #feed .tile-info .avatar, body.channel-page #feed .tile-channel { display: none; }

.search-note { max-width: 2200px; margin: 0 auto 18px; font-size: 15px; color: var(--text-2); }
.search-note b { color: var(--text); }
.tile.search-miss, .side-item.search-miss { display: none !important; }

.feed-status { text-align: center; padding: 32px 0 0; color: var(--text-2); }
.feed-status:empty { display: none; }
.sentinel { height: 1px; }

.empty-state { max-width: 440px; margin: 8vh auto 0; text-align: center; }
.empty-state .empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #6667AB, var(--blue));
  color: #F4F9FF;
  box-shadow: 0 12px 28px rgba(15, 76, 129, .3);
}
.empty-state .empty-icon svg { width: 34px; height: 34px; fill: currentColor; }
.empty-state h2 { font-size: 22px; line-height: 28px; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--text); }
.empty-state p { margin: 0 0 20px; color: var(--text-2); }

.to-top {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--tabbar-space));
  z-index: 40;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
}
.to-top .ic { transform: rotate(180deg); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }

/* Esqueletos (carregando) */
.skeleton { position: relative; overflow: hidden; background: var(--fill); border-radius: 8px; }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(244, 249, 255, .5), transparent);
  animation: shimmer 1.4s infinite;
}
:root[data-scheme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(244, 249, 255, .06), transparent); }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-thumb { aspect-ratio: 16 / 9; border-radius: 14px; }
.sk-row { display: flex; gap: 10px; padding-top: 11px; }
.sk-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; display: grid; gap: 8px; align-content: start; }
.sk-line { height: 12px; }
.sk-line.w80 { width: 80%; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.sk-line.lg { height: 22px; }

/* Ocultar assistidos */
body.hide-watched .tile.is-watched,
body.hide-watched .mini.is-watched { display: none; }

/* =========================================================
   Ao Vivo e Canais (listas)
   ========================================================= */
#view-live, #view-channels { max-width: 2200px; }
#view-live { container-type: inline-size; }
.live-grid .tile-meta .viewers { color: var(--live); font-weight: 600; }
.live-empty { grid-column: 1 / -1; }

.grp-title { padding: 0 16px 7px; font-size: 13px; line-height: 18px; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; font-weight: 400; display: flex; align-items: center; gap: 6px; }
.grp-title.live-title { color: var(--live); font-weight: 600; }
.grp-title.live-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.grp-count { color: var(--text-3); }
.grp-foot { padding: 7px 16px 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.group { background: var(--bg-elev); border-radius: 14px; overflow: hidden; box-shadow: var(--card-shadow); }
.group + .grp-title, .group + .group { margin-top: 26px; }
.group-pad { padding: 18px 18px; }
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: -0.014em;
}
.row + .row::before, .row + .channel-list::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 57px); height: .5px; background: var(--sep); }
.row .grow { flex: 1; min-width: 0; }
.row .sub { display: block; font-size: 13px; line-height: 18px; color: var(--text-2); }
.row .sub b { color: var(--tint); font-weight: 600; }
.row-link { cursor: pointer; }
.row-link:hover { background: var(--fill-2); }
.row-value { color: var(--text-2); font-size: 15px; }
.row .chev { width: 15px; height: 15px; color: var(--text-3); }
.sq-ic { width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; color: #F4F9FF; background: var(--c, var(--peri)); }
.sq-ic .ic { width: 17px; height: 17px; }
.ch-row { min-height: 62px; --inset: 66px; }
.ch-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--fill); }
.ch-row .grow > b { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-row { min-height: 74px; --inset: 114px; }
.live-row .thumb { width: 86px; flex-shrink: 0; border-radius: 10px; box-shadow: none; }
.live-row .thumb::before { content: "AO VIVO"; position: absolute; left: 5px; top: 5px; z-index: 1; padding: 2px 5px; border-radius: 999px; background: var(--live); color: #F4F9FF; font-size: 8px; font-weight: 700; letter-spacing: .05em; }
.live-row .grow > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 20px; }
#channels-page { max-width: 820px; }
#channels-page .grp-title { margin-top: 2px; }

/* =========================================================
   Página do vídeo
   ========================================================= */
#view-watch {
  --watch-top: 22px;
  --side-col: clamp(300px, 24vw, 400px);
  --below-player: 190px;
  --player-max-w: max(560px, calc((100vh - var(--watch-top) - var(--below-player)) * 16 / 9));
  padding: var(--watch-top) clamp(20px, 2.4vw, 40px) 64px clamp(20px, 2vw, 36px);
}
.cinema-bar { display: none; }
.watch-layout {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, var(--player-max-w)) minmax(var(--side-col), 1fr);
  grid-template-areas:
    "player   side"
    "info     side"
    "comments side";
  grid-template-rows: auto auto 1fr;
  justify-content: start;
  column-gap: 28px;
  align-items: start;
}
.watch-player { grid-area: player; position: relative; }
.watch-info { grid-area: info; margin-top: 20px; }
.watch-side { grid-area: side; min-width: 0; }
.watch-comments { grid-area: comments; min-width: 0; margin-top: 28px; }

.player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--video-bg);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(16, 24, 32, .25);
  user-select: none;
  -webkit-user-select: none;
  container-type: inline-size;
  isolation: isolate;
}
.player-wrap iframe, .player-wrap #player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  color: #F4F9FF;
  background: radial-gradient(circle at center, #1D252D, #101820);
  z-index: 6;
}
.player-error p { margin: 0; max-width: 520px; }

/* Título, canal e ações */
.watch-title { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.024em; word-break: break-word; }
.watch-meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.watch-channel { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; border-radius: 12px; }
.watch-avatar { width: 42px; height: 42px; }
.watch-channel strong { display: block; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.016em; }
.watch-channel span { display: block; font-size: 13px; line-height: 18px; color: var(--text-2); }
a.watch-channel:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.watch-actions { display: flex; gap: 8px; margin-left: auto; }
.watch-actions .btn { height: 36px; }
.watch-actions .btn-icon-only { width: 36px; padding: 0; }

.description {
  --desc-bg: var(--bg-elev);
  position: relative;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--desc-bg);
  box-shadow: var(--card-shadow);
  font-size: 14px;
  line-height: 1.55;
}
.description.collapsed { cursor: pointer; }
.description-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-weight: 600; margin-bottom: 2px; }
.description-text { white-space: normal; word-break: break-word; }
.description.collapsed .description-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.desc-toggle { margin-top: 8px; color: var(--tint); font-weight: 700; }
.description.collapsed .desc-toggle {
  position: absolute;
  right: 16px;
  bottom: 14px;
  margin: 0;
  padding-left: 48px;
  background: linear-gradient(to right, transparent, var(--desc-bg) 40%);
}
.description.collapsed .desc-toggle:hover { text-decoration: none; }
.ts { border: 0; padding: 0; background: none; color: var(--tint); font: inherit; cursor: pointer; }
.ts:hover { text-decoration: underline; }

/* A seguir */
.watch-side .side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 36px; }
.watch-side .side-head h2 { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.018em; }
.watch-side .seg { font-size: 12px; }
.watch-side .seg > button { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.upnext { display: grid; gap: 14px; margin-bottom: 14px; }
.mini {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}
.mini .thumb { border-radius: 12px; }
.mini:hover .thumb img { transform: scale(1.05); }
.mini-title { font-size: 14px; line-height: 19px; }
.mini-meta { font-size: 12px; line-height: 16px; margin: 0; }
.mini-meta:first-of-type { margin-top: 4px; }
.mini-meta + .mini-meta { color: var(--text-3); }
.mini .badge { font-size: 10.5px; right: 6px; bottom: 6px; }
.sk-mini { display: grid; grid-template-columns: 168px 1fr; gap: 12px; }
.sk-mini .sk-thumb { border-radius: 12px; }

/* Comentários */
.watch-comments h2 { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.018em; margin: 6px 0 18px; }
.comments-list { display: grid; gap: 22px; margin-bottom: 18px; }
.comment-row { display: flex; gap: 12px; }
.comment-content { min-width: 0; flex: 1; }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; }
.comment-head strong { font-weight: 600; }
.comment-text { margin-top: 3px; font-size: 14.5px; word-break: break-word; }
.comment-likes { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--text-2); }
.comment-likes svg { width: 16px; height: 16px; }
.comment-replies { margin: 8px 0 0 44px; }
.comment-replies > .link-btn { font-size: 14px; }
.replies { display: grid; gap: 16px; margin-top: 14px; }

/* Responsivo */
@media (max-width: 1099px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "player" "info" "side" "comments"; grid-template-rows: auto; }
  .watch-side { margin-top: 26px; }
  .mini { grid-template-columns: minmax(140px, 38%) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #view-watch { --watch-top: 0px; padding: 0 16px 40px; }
  .watch-player { margin: 0 -16px; padding-top: env(safe-area-inset-top); background: #101820; }
  .player-wrap { border-radius: 0; box-shadow: none; }
  .watch-info { margin-top: 16px; }
  .watch-title { font-size: 20px; line-height: 25px; letter-spacing: -0.02em; }
  .watch-actions { margin-left: 0; width: 100%; }
  .watch-meta .watch-channel { flex: 1; }
  .watch-meta { flex-wrap: nowrap; }
  .watch-meta .watch-actions { width: auto; }
  ::view-transition-old(hero), ::view-transition-new(hero) { border-radius: 0; }
}

/* =========================================================
   Controles do player (cápsulas de vidro escuro)
   =========================================================
   Computador (e celular deitado em tela cheia): título no alto à
   esquerda, mini player e "mais" à direita; no centro, voltar 10 s,
   play/pausa e avançar 10 s; embaixo, anterior/próximo, a barra de
   tempo e os botões. Celular em pé (player estreito, classe
   .pc-compact aplicada pelo app.js): minimizar no alto, anterior,
   play e próximo no centro, tempo e barra embaixo.
   Sem desfoque por trás das cápsulas (backdrop-filter): desfocar o
   vídeo a cada quadro derrubava o framerate em telas 4K.
   ========================================================= */
.player-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.player-wrap.pc-hidden .player-overlay { cursor: none; }
.pc-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(16, 24, 32, .38), transparent 24%, transparent 60%, rgba(16, 24, 32, .55));
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.pc-glass {
  background: rgba(16, 24, 32, .5);
  box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .2), inset 0 1px 0 rgba(244, 249, 255, .12), 0 8px 24px rgba(16, 24, 32, .22);
  color: #F4F9FF;
}
.pc-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #F4F9FF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pc-btn.pc-glass { background: rgba(16, 24, 32, .5); }
.pc-btn svg { width: 22px; height: 22px; pointer-events: none; }
.pc-btn > * { pointer-events: none; }
.pc-btn:focus-visible { outline: 2px solid #F4F9FF; outline-offset: -3px; }
.pc-btn:hover { background: rgba(244, 249, 255, .12); }
.pc-btn.pc-glass:hover { background: rgba(16, 24, 32, .62); }
.pc-btn:disabled { opacity: .38; cursor: default; }
.pc-btn:disabled:hover { background: transparent; }
.pc-circle { width: 40px; height: 40px; }
.pc-circle svg { width: 20px; height: 20px; }

.pc-topbar {
  position: absolute;
  inset: 14px 14px auto;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .45s var(--ease-smooth);
}
.pc-topbar > * { pointer-events: auto; }
#pc-down { display: none; }
.pc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(70%, 640px);
  min-width: 0;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(16, 24, 32, .5);
  box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .2), inset 0 1px 0 rgba(244, 249, 255, .12);
  color: #F4F9FF;
  pointer-events: none !important;
}
.pc-top:empty { display: none; }
.pc-top-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: rgba(244, 249, 255, .15); }
.pc-top-text { min-width: 0; }
.pc-top-title { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.pc-top-channel { font-size: 12px; line-height: 15px; color: rgba(244, 249, 255, .75); font-weight: 500; }
.pc-topright { display: flex; gap: 8px; margin-left: auto; }

.pc-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 30px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .45s var(--ease-smooth);
}
.pc-center > * { pointer-events: auto; }
.pc-big { width: 76px; height: 76px; }
.pc-big svg { width: 34px; height: 34px; }
.pc-mid { width: 52px; height: 52px; }
.pc-mid svg { width: 26px; height: 26px; }

.player-ui {
  position: absolute;
  inset: auto 14px 14px;
  z-index: 3;
  color: #F4F9FF;
  transition: opacity .3s var(--ease), transform .45s var(--ease-smooth);
}
.player-wrap.pc-hidden :is(.player-ui, .pc-topbar, .pc-center, .pc-shade) { opacity: 0; pointer-events: none; }
.player-wrap.pc-hidden :is(.player-ui, .pc-topbar, .pc-center) * { pointer-events: none; }
.player-wrap.pc-hidden .player-ui { transform: translateY(10px); }
.player-wrap.pc-hidden .pc-topbar { transform: translateY(-10px); }
.player-wrap.pc-hidden .pc-center { transform: translate(-50%, -50%) scale(.9); }
.player-wrap.pc-hidden .pc-menu { display: none; }
/* Enquanto o próprio YouTube mostra o título dele (pausado, logo ao voltar a tocar), a faixa do app some */
.player-wrap.yt-title .pc-top { opacity: 0; }

.pc-bar { display: flex; align-items: center; gap: 10px; }
.pc-pill { display: flex; align-items: center; height: 50px; padding: 0 8px; border-radius: 999px; }
.pc-skip { gap: 2px; }
.pc-track { flex: 1; min-width: 0; gap: 14px; padding: 0 18px; }
.pc-right { gap: 2px; padding: 0 8px; }
.pc-time { font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pc-time span { display: none; margin-left: 3px; color: rgba(244, 249, 255, .65); font-weight: 500; }
.pc-remain { opacity: .75; }
.pc-live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--live); vertical-align: 1px; }

/* Volume: o controle aparece ao lado do alto-falante */
.pc-volume { display: flex; align-items: center; }
.pc-slider {
  --fill: 100%;
  width: 0;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  transition: width .45s var(--ease-smooth), opacity .3s, margin .45s var(--ease-smooth);
}
.pc-volume:hover .pc-slider, .pc-volume:focus-within .pc-slider { width: 70px; opacity: 1; margin: 0 8px 0 2px; }
.pc-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #F4F9FF var(--fill), rgba(244, 249, 255, .35) var(--fill)); }
.pc-slider::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #F4F9FF var(--fill), rgba(244, 249, 255, .35) var(--fill)); }
.pc-slider::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: #F4F9FF; -webkit-appearance: none; }
.pc-slider::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #F4F9FF; }
.pc-slider:focus-visible { outline: none; }

/* Reprodução automática (interruptor verde) */
.pc-switch { width: 50px; border-radius: 999px; }
.pc-switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgba(244, 249, 255, .3); transition: background .3s var(--ease); }
.pc-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #F4F9FF; box-shadow: 0 1px 3px rgba(16, 24, 32, .3); transition: left .45s var(--ease-spring); }
.pc-switch[aria-checked="true"] .pc-switch-track { background: var(--green); }
.pc-switch[aria-checked="true"] .pc-switch-knob { left: 16px; }

/* Legendas ativas: traço embaixo do ícone */
#pc-cc.on::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: 13%; height: 2.5px; border-radius: 2px; background: #F4F9FF; }
/* Qualidade: selo branco (4K, HD...) no lugar do ícone */
.pc-gear { width: 46px; border-radius: 999px; }
.pc-gear.has-quality svg { display: none; }
.pc-quality { padding: 3px 5px; border-radius: 5px; background: rgba(244, 249, 255, .92); color: #101820; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .02em; pointer-events: none; }

/* Barra de tempo */
.pc-progress {
  position: relative;
  flex: 1;
  min-width: 40px;
  height: 22px;
  cursor: pointer;
  touch-action: none;
  --played: 0%;
  --loaded: 0%;
}
.pc-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 9px;
  background: rgba(244, 249, 255, .28);
  overflow: hidden;
  transition: height .25s var(--ease), margin .25s var(--ease);
}
.pc-progress-loaded, .pc-progress-played { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.pc-progress-loaded { width: var(--loaded); background: rgba(244, 249, 255, .35); }
.pc-progress-played { width: var(--played); background: var(--crimson); }
.pc-progress-thumb {
  position: absolute;
  top: 50%;
  left: var(--played);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 1px 4px rgba(16, 24, 32, .4);
  transform: scale(0);
  transition: transform .35s var(--ease-spring);
  pointer-events: none;
}
.pc-progress:hover .pc-progress-track, .pc-progress.dragging .pc-progress-track { height: 9px; margin-top: -4.5px; }
.pc-progress:hover .pc-progress-thumb, .pc-progress.dragging .pc-progress-thumb { transform: scale(1); }
.pc-tip {
  position: absolute;
  bottom: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(16, 24, 32, .86);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Menu (velocidade, legendas, qualidade, modo cinema...) */
.pc-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 290px;
  max-height: min(380px, calc(56.25cqw - 110px));
  overflow-y: auto;
  padding: 6px;
  border-radius: 18px;
  background: rgba(16, 24, 32, .86);
  box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .16), 0 16px 40px rgba(16, 24, 32, .45);
  transform-origin: 90% 100%;
}
.pc-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #F4F9FF;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.pc-menu-row:hover { background: rgba(244, 249, 255, .1); }
.pc-menu-row svg, .pc-menu-gap { width: 20px; height: 20px; flex-shrink: 0; }
.pc-menu-value { margin-left: auto; color: rgba(244, 249, 255, .65); white-space: nowrap; }
.pc-menu-head { margin-bottom: 4px; font-weight: 600; border-radius: 12px 12px 6px 6px; }
.pc-menu-sep { height: .5px; margin: 4px 10px; background: rgba(244, 249, 255, .15); }
.pc-menu-static { cursor: default; }
.pc-menu-static:hover { background: transparent; }
.pc-menu-note { margin: 0; padding: 4px 12px 6px 44px; color: rgba(244, 249, 255, .55); font-size: 12px; }

/* Ícone que aparece e some no centro (play/pausa, ±10 s, avisos) */
.player-flash {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(16, 24, 32, .55);
  color: #F4F9FF;
  pointer-events: none;
}
.player-flash svg { width: 30px; height: 30px; }
.player-flash-text { width: auto; height: auto; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; }

/* Player médio */
@container (max-width: 860px) {
  .pc-center { gap: 22px; }
  .pc-big { width: 64px; height: 64px; }
  .pc-mid { width: 46px; height: 46px; }
  .pc-pill { height: 44px; }
  .pc-track { gap: 10px; padding: 0 14px; }
  .pc-btn { width: 34px; height: 34px; }
  .pc-btn svg { width: 20px; height: 20px; }
  .pc-switch { width: 44px; }
  .pc-gear { width: 42px; }
  .pc-menu { width: 260px; }
}
/* Celular em pé (classe aplicada pelo app.js quando o player é estreito) */
.pc-compact .pc-topbar { inset: 10px 10px auto; }
.pc-compact #pc-down { display: grid; }
.pc-compact .pc-top { display: none; }
.pc-compact #pc-pip, .pc-compact #pc-more, .pc-compact #pc-back10, .pc-compact #pc-fwd10, .pc-compact .pc-volume, .pc-compact #pc-theater { display: none; }
.pc-compact .pc-circle { width: 36px; height: 36px; }
.pc-compact .pc-circle svg { width: 18px; height: 18px; }
.pc-compact .pc-center { gap: 34px; }
.pc-compact .pc-big { width: 64px; height: 64px; }
.pc-compact .pc-big svg { width: 30px; height: 30px; }
.pc-compact .pc-center .pc-btn:not(.pc-big) { width: 46px; height: 46px; background: rgba(16, 24, 32, .5); box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .2), inset 0 1px 0 rgba(244, 249, 255, .12); }
.pc-compact .player-ui { inset: auto 14px 6px; }
.pc-compact .pc-bar { flex-wrap: wrap; gap: 0; }
.pc-compact .pc-pill { background: none; box-shadow: none; height: auto; padding: 0; }
.pc-compact .pc-skip { display: none; }
.pc-compact .pc-track { order: 1; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0; }
.pc-compact .pc-track .pc-time { order: 0; flex: 1; margin-bottom: 2px; }
.pc-compact .pc-time span { display: inline; }
.pc-compact .pc-remain { display: none; }
.pc-compact .pc-progress { order: 2; flex-basis: 100%; height: 20px; }
.pc-compact .pc-progress-track { height: 4px; margin-top: -2px; }
.pc-compact .pc-progress-thumb { transform: scale(.85); }
.pc-compact .pc-right { order: 0; position: absolute; right: 0; bottom: 24px; gap: 8px; }
.pc-compact .pc-topright .pc-btn { background: rgba(16, 24, 32, .5); box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .2); width: 36px; height: 36px; }
.pc-compact .pc-gear { width: 36px; }
.pc-compact .pc-gear.has-quality svg { display: block; }
.pc-compact .pc-quality { display: none !important; }
.pc-compact .pc-menu { right: 0; bottom: auto; top: 50px; width: min(260px, 90cqw); max-height: calc(56.25cqw - 66px); transform-origin: 90% 0; }
/* Celular: sem "passar o mouse" */
@media (hover: none) {
  .pc-slider { display: none; }
  .pc-btn:hover { background: transparent; }
  .pc-btn.pc-glass:hover { background: rgba(16, 24, 32, .5); }
}
/* Tela cheia: controles mais afastados das bordas */
.player-wrap:fullscreen { border-radius: 0; box-shadow: none; }
.player-wrap:fullscreen::backdrop { background: #101820; }
.player-wrap:fullscreen .pc-topbar { inset: 20px 44px auto; }
.player-wrap:fullscreen .player-ui { inset: auto 44px 20px; }
.player-wrap:fullscreen #pc-pip { display: none; }
@media (pointer: coarse) { .player-wrap:fullscreen #pc-down { display: grid; } }

/* Tela cheia suave */
.player-wrap iframe:fullscreen { animation: fsEnter .5s var(--ease) both; }
.player-wrap iframe:fullscreen::backdrop { background: #101820; }
.player-wrap.fs-exit { animation: fsExit .5s var(--ease) both; }

/* =========================================================
   Modo Cinema (computador)
   =========================================================
   A página fica escura, o menu lateral some (o botão do menu o
   traz por cima) e o player ocupa a largura toda em 21:9, com um
   brilho Very Peri. Embaixo: título e canal à esquerda e os
   próximos vídeos em cartões à direita.
   ========================================================= */
#pc-theater { display: none; }
@media (min-width: 1100px) {
  #pc-theater { display: grid; }
  #view-watch.theater { padding: 18px 28px 64px; }
  #view-watch.theater .cinema-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--text); }
  #view-watch.theater .cinema-bar strong { margin-left: 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.016em; }
  #view-watch.theater .watch-layout {
    grid-template-columns: minmax(0, 1fr) min(520px, 34%);
    grid-template-areas:
      "player   player"
      "info     side"
      "comments side";
    column-gap: 34px;
  }
  #view-watch.theater .player-wrap {
    aspect-ratio: 21 / 9;
    width: min(100%, calc((100vh - 120px) * 21 / 9));
    margin: 0 auto;
    border-radius: 26px;
    box-shadow: 0 30px 90px rgba(102, 103, 171, .28);
  }
  #view-watch.theater .watch-info { margin-top: 22px; }
  #view-watch.theater .watch-side { margin-top: 22px; }
  #view-watch.theater .watch-side .side-head { display: none; }
  #view-watch.theater .upnext { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  #view-watch.theater .upnext .mini, #view-watch.theater .upnext .sk-mini { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #view-watch.theater .upnext .mini-title { font-size: 13px; line-height: 18px; -webkit-line-clamp: 1; }
  #view-watch.theater .upnext .mini-meta + .mini-meta { display: none; }
}

/* =========================================================
   Mini player
   =========================================================
   Saindo da página do vídeo, o vídeo continua no mesmo player — que
   só muda de tamanho e lugar (mover o player recarregaria o vídeo).
   No computador: cartão de vidro no canto. No celular: cápsula de
   vidro acima das abas.
   ========================================================= */
.mini-ui, .mini-info, .drag-hint { display: none; }
body.mini-player #view-watch {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--tabbar-space));
  z-index: 70;
  width: 400px;
  padding: 10px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-edge), inset 0 1px 0 var(--glass-hi);
  view-transition-name: mini-player;
}
body.mini-player #view-watch .cinema-bar { display: none; }
body.mini-player #view-watch .watch-layout { display: block; container-type: normal; }
body.mini-player #view-watch :is(.watch-info, .watch-side, .watch-comments) { display: none; }
body.mini-player #view-watch .watch-player { margin: 0; padding: 0; background: none; }
body.mini-player #view-watch .player-wrap { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; border-radius: 16px; box-shadow: none; }
body.mini-player :is(#player-ui, .pc-topbar, .pc-center, .pc-shade, #player-overlay, #player-error) { display: none; }
body.mini-player .mini-ui { position: absolute; inset: 0; z-index: 5; display: block; cursor: pointer; }
body.mini-player .mini-info { display: flex; align-items: center; gap: 4px; padding: 12px 4px 4px 6px; cursor: pointer; }
.mini-info-text { flex: 1; min-width: 0; }
.mini-info-title { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -0.012em; white-space: nowrap; text-overflow: ellipsis; }
.mini-info-channel { margin-top: 1px; overflow: hidden; color: var(--text-2); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mini-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.mini-btn svg { width: 20px; height: 20px; pointer-events: none; }
.mini-info .mini-btn:hover { background: var(--fill); }
.mini-info .mini-play { width: 40px; height: 40px; background: var(--fill); }
.mini-info .mini-close { display: none; }
.mini-ui .mini-btn {
  position: absolute;
  width: 32px;
  height: 32px;
  background: rgba(16, 24, 32, .5);
  box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .2);
  color: #F4F9FF;
  opacity: 0;
  transition: opacity .25s var(--ease), background .2s, transform .45s var(--ease-spring);
}
.mini-ui .mini-btn svg { width: 15px; height: 15px; }
.mini-ui .mini-expand { top: 10px; left: 10px; }
.mini-ui .mini-close { top: 10px; right: 10px; }
.mini-ui .mini-play { top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); }
.mini-ui .mini-play svg { width: 26px; height: 26px; }
.mini-ui:hover .mini-btn, .mini-ui:focus-within .mini-btn, .mini-ui.paused .mini-btn { opacity: 1; }
.mini-ui .mini-btn:hover { background: rgba(16, 24, 32, .7); }
.mini-progress { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 4px; border-radius: 9px; overflow: hidden; background: rgba(244, 249, 255, .35); }
.mini-progress span { display: block; width: 0; height: 100%; border-radius: 9px; background: var(--crimson); }
body.mini-player .to-top { bottom: calc(24px + var(--tabbar-space) + 330px); }
::view-transition-group(mini-player) { animation-duration: .6s; animation-timing-function: var(--ease-spring); }

/* Celular: cápsula de vidro acima das abas */
@media (max-width: 760px) {
  body.mini-player #view-watch {
    right: 14px;
    left: 14px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    width: auto;
    height: 60px;
    padding: 7px 8px 7px 7px;
    border-radius: 999px;
  }
  body.mini-player #view-watch .watch-player { display: flex; align-items: center; height: 100%; }
  body.mini-player #view-watch .player-wrap { flex: 0 0 auto; width: 76px; height: 46px; aspect-ratio: auto; border-radius: 999px; }
  body.mini-player .mini-ui .mini-btn, body.mini-player .mini-progress { display: none; }
  body.mini-player .mini-info { flex: 1; min-width: 0; padding: 0 0 0 10px; gap: 2px; }
  body.mini-player .mini-info-title { font-size: 14px; line-height: 18px; }
  body.mini-player .mini-info-channel { font-size: 12px; }
  body.mini-player .mini-info .mini-prev { display: none; }
  body.mini-player .mini-info .mini-play { background: transparent; }
  body.mini-player .mini-info .mini-btn svg { width: 22px; height: 22px; }
  body.mini-player main { padding-bottom: calc(var(--tabbar-space) + 70px); }
  body.mini-player .to-top { bottom: calc(var(--tabbar-space) + 80px); }
  /* Arrastando o vídeo para baixo: ele vira um cartão de vidro que segue o dedo e diminui */
  #view-watch.drag-mini .watch-player { position: relative; z-index: 6; transform-origin: 50% 0; will-change: transform; border-radius: calc(var(--drag-p, 0) * 26px); overflow: hidden; }
  #view-watch.drag-mini .player-wrap { border-radius: calc(var(--drag-p, 0) * 22px); }
  #view-watch.drag-mini .mini-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 14px;
    background: var(--glass-strong);
    opacity: var(--drag-p, 0);
    pointer-events: none;
  }
  #view-watch.drag-mini .mini-info .mini-btn:not(.mini-play) { display: none; }
  #view-watch.drag-mini :is(.watch-info, .watch-side, .watch-comments) { opacity: calc(1 - var(--drag-p, 0)); }
  #view-watch.drag-mini.drag-ready .drag-hint { display: flex; }
  .drag-hint {
    position: absolute;
    left: 50%;
    top: -44px;
    z-index: 7;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: popIn .4s var(--ease-spring) both;
  }
  .drag-hint .ic { width: 14px; height: 14px; }
}

/* Prévia ao passar o mouse: o vídeo toca sem som dentro do cartão */
.tile-preview { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #101820; opacity: 0; transition: opacity .35s var(--ease); }
.tile-preview.playing { opacity: 1; }
.tile-preview iframe, .tile-preview > div:first-child { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.tp-shield { position: absolute; inset: 0; }
.tp-mute {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 24, 32, .55);
  box-shadow: inset 0 0 0 .5px rgba(244, 249, 255, .2);
  color: #F4F9FF;
  cursor: pointer;
}
.tp-mute svg { width: 17px; height: 17px; pointer-events: none; }
.tp-mute:hover { background: rgba(16, 24, 32, .75); }
.tp-progress { position: absolute; right: 10px; bottom: 8px; left: 10px; height: 4px; border-radius: 9px; overflow: hidden; background: rgba(244, 249, 255, .3); }
.tp-progress span { display: block; width: 0; height: 100%; background: var(--crimson); transition: width .25s linear; }
/* "A seguir": quadros do vídeo alternando por cima da capa */
.thumb .mini-frames {
  --frame-fade: .6s; /* igual a FRAME_FADE no app.js */
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--frame-fade) ease-in-out, transform .8s var(--ease-smooth);
}
.thumb .mini-frames.on { opacity: 1; }

/* Menu de vidro (botão "…") */
.menu-pop {
  position: fixed;
  z-index: 90;
  min-width: 230px;
  padding: 6px;
  border-radius: 16px;
  background: var(--glass-strong);
  transform-origin: var(--origin, 100% 0);
  animation: menuIn .4s var(--ease-spring);
}
.mp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mp-row:hover { background: var(--fill); }
.mp-row .ic { width: 19px; height: 19px; color: var(--text-2); }
@keyframes menuIn { from { opacity: 0; transform: scale(.9); filter: blur(6px); } }

/* =========================================================
   Estatísticas
   ========================================================= */
#view-stats { padding-top: 26px; }
.stats { max-width: 2200px; margin: 0 auto; container-type: inline-size; }
.st-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.st-head { margin-bottom: 22px; }
.st-head .seg > button { padding: 6px 16px; }
.st-since { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.st-info { position: relative; display: inline-block; margin-left: 6px; vertical-align: 2px; }
.st-info summary {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-2);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.st-info summary::-webkit-details-marker { display: none; }
.st-info p {
  position: absolute;
  top: calc(100% + 8px);
  left: -10px;
  z-index: 5;
  width: min(440px, 80vw);
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-edge);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.6;
}
.st-info strong { color: var(--text); }
.st-counting { margin: -10px 0 14px; color: var(--text-2); font-size: 13px; }
.st-counting::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--tint); animation: stPulse 1.2s ease-in-out infinite; }
@keyframes stPulse { 50% { opacity: .3; } }

.st-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.st-tile, .st-card {
  position: relative;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--bg-elev);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.st-lab { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; line-height: 18px; }
.st-lab .ic { width: 15px; height: 15px; }
.st-lab .st-lab-sub { font-weight: 500; color: var(--text-3); }
.st-lab.split { justify-content: space-between; }
.st-big { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.st-big small { font-size: 17px; font-weight: 600; color: var(--text-2); letter-spacing: -0.01em; }
.st-note { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--text-2); }
.st-delta { font-weight: 700; }
.st-delta.up { color: var(--ok); }
.st-delta.down { color: var(--error); }
.st-spark { position: absolute; right: 16px; top: 16px; }
.st-tile-ring { display: flex; align-items: center; gap: 16px; }
.st-tile-ring .st-big { font-size: 24px; }
.st-ringbox { position: relative; flex-shrink: 0; }
.st-ringbox b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-tile-top { display: flex; align-items: center; gap: 14px; }
.st-tile-top img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--fill); }
.st-top-name { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.016em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-charts { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.st-chart { position: relative; height: 230px; margin-top: 4px; touch-action: pan-y; }
.st-chart.short { height: 160px; }
.st-chart svg { position: absolute; inset: 0; display: block; overflow: visible; }
.st-grid-line { stroke: var(--sep); stroke-width: 1; }
.st-axis { fill: var(--text-3); font-size: 11px; font-family: inherit; }
.st-axis.now { fill: var(--text); font-weight: 700; }
.st-bar { fill: var(--peri); opacity: .82; transition: opacity .2s; }
.st-bar.now { opacity: 1; }
.st-bar.active { opacity: 1; fill: var(--blue); }
.st-avg { stroke: var(--green); stroke-width: 1.6; stroke-dasharray: 4 4; }
.st-avg-label { fill: var(--green); font-size: 11px; font-weight: 700; }
.st-line { fill: none; stroke: var(--coral); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.st-area { fill: url(#st-area); }
.st-dot { fill: var(--bg-elev); stroke: var(--coral); stroke-width: 2; transition: r .15s; }
.st-dot.now, .st-dot.active { fill: var(--coral); }
.st-dot.active { r: 6; }
.st-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: 96px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-edge);
  transform: translate(-50%, calc(-100% - 12px));
  pointer-events: none;
  white-space: nowrap;
}
.st-tip strong { font-size: 15px; }
.st-tip span { color: var(--text-2); font-size: 11px; }

.st-hbars { display: grid; gap: 11px; margin-top: 2px; }
.st-hbar { display: flex; align-items: center; gap: 10px; }
.st-hbar img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--fill); }
.st-hbar > div { flex: 1; min-width: 0; }
.st-hbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.st-hbar-top span:first-child { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-hbar-top span:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.st-track { height: 7px; margin-top: 5px; border-radius: 9px; background: var(--fill-2); overflow: hidden; }
.st-track span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--c1, var(--peri)), var(--c2, var(--blue))); }
.st-empty { color: var(--text-2); font-size: 13px; }

/* Previsão: cartão escuro (Very Peri → Classic Blue) */
.st-fc { background: linear-gradient(150deg, #5F4B8B, #0F4C81); color: #F4F9FF; }
.st-fc .st-lab { color: #F4F9FF; }
.st-fc .st-lab .st-lab-sub { color: #F4F9FF; opacity: .8; }
.st-fc-big { display: block; font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -0.035em; }
.st-fc-line { display: block; margin: 2px 0 6px; color: #F4F9FF; font-size: 14px; line-height: 19px; font-weight: 500; }
.st-fc-support { display: block; margin-bottom: 10px; color: #F4F9FF; opacity: .8; font-size: 12px; }
.st-fc-list { display: grid; max-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.st-fc-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border: 0; border-top: .5px solid rgba(244, 249, 255, .14); background: transparent; color: #F4F9FF; text-align: left; cursor: pointer; border-radius: 0; }
.st-fc-row img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(244, 249, 255, .15); }
.st-fc-row span { flex: 1; min-width: 0; text-align: left; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-fc-row b { font-size: 13px; font-weight: 600; color: var(--peach); flex-shrink: 0; }
.st-fc-row[aria-pressed="true"] span { font-weight: 700; }
.st-fc-row[aria-pressed="true"] { background: rgba(244, 249, 255, .06); border-radius: 8px; }
.st-fc-swap { animation: viewIn .45s var(--ease-smooth); }

/* Por canal: assistidos x total */
.st-perch { grid-column: 1 / -1; }
.st-perch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 28px; }
.st-perch-grid .st-hbar-top span:last-child b { color: var(--text); font-weight: 600; }

@container (max-width: 900px) {
  .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 760px) {
  .st-charts { grid-template-columns: minmax(0, 1fr); }
  .st-tiles { gap: 12px; }
  .st-big { font-size: 26px; }
}
@container (max-width: 480px) {
  .st-tile-ring { flex-direction: column; text-align: center; gap: 6px; }
  .st-tile-top { flex-direction: column; text-align: center; gap: 6px; }
  .st-spark { display: none; }
}

/* =========================================================
   Ajustes
   ========================================================= */
#view-settings { background: var(--grouped); min-height: 100vh; }
.settings { max-width: 1400px; margin: 0 auto; }
.settings-head { align-items: flex-end; }
.app-version { font-size: 13px; color: var(--text-2); padding-bottom: 6px; }
.settings-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.set-sec + .set-sec { margin-top: 26px; }
.set-compact-only { display: none !important; }
.set-detail { display: none; }
#account-card .row { min-height: 78px; }
.acct-card img, .acct-card .acct-ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(145deg, var(--peach), var(--mocha)); display: grid; place-items: center; color: #F4F9FF; }
.acct-card .grow > b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.016em; }
.acct-card .chev { display: none; }
.add-row { gap: 10px; min-height: 60px; }
.add-row .field { flex: 1; }
.channel-list { position: relative; list-style: none; margin: 0; padding: 0; }
.channel-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 16px;
  transition: opacity .25s, transform .25s var(--ease);
}
.channel-item + .channel-item::before { content: ""; position: absolute; top: 0; right: 0; left: 62px; height: .5px; background: var(--sep); }
.channel-item.removing { opacity: 0; transform: translateX(16px); }
.channel-item > img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--fill); }
.ci-text { flex: 1; min-width: 0; }
.ci-text strong, .ci-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-text strong { font-size: 16px; font-weight: 500; letter-spacing: -0.014em; }
.ci-text span { font-size: 13px; color: var(--text-2); }
.channel-dur {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-2);
  font-size: 13px;
  cursor: text;
}
.channel-dur .ic { width: 14px; height: 14px; }
.channel-dur input {
  width: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}
.channel-dur input::placeholder { color: var(--text-2); font-weight: 500; }
.channel-switch { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 13px; color: var(--text-2); cursor: pointer; }
.ci-remove { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--coral); cursor: pointer; border-radius: 50%; }
.ci-remove .ic { width: 22px; height: 22px; }
.channel-empty { padding: 14px 16px; color: var(--text-2); }

/* Conta: notas e situação */
.account-panel { display: grid; gap: 14px; }
.tier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(136, 176, 75, .16);
  color: var(--ok);
  width: fit-content;
}
.tier::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--fill-2); font-size: 13.5px; color: var(--text-2); }
.note strong { color: var(--text); }
.note.note-warn { background: rgba(245, 223, 77, .18); color: var(--text); box-shadow: inset 3px 0 0 var(--yellow); }
.sync-summary { margin: 0; font-size: 13px; }
.sync-summary strong { color: var(--text); }
#sync-status { display: grid; gap: 10px; justify-items: start; }
#sync-status:empty { display: none; }
.settings-footer { display: grid; gap: 4px; margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
.settings-footer strong { color: var(--text); }
.about-brand { display: flex; align-items: center; gap: 14px; }
.about-brand svg { width: 64px; height: 64px; filter: drop-shadow(0 8px 16px rgba(15, 76, 129, .3)); }
.about-brand strong { display: block; font-size: 22px; letter-spacing: -0.02em; }
.about-brand span { color: var(--text-2); font-size: 14px; }
.config-form { display: grid; gap: 16px; }
.config-form label { display: grid; gap: 6px; }
.config-form label > span { font-weight: 600; font-size: 14px; }
.config-form small { font-size: 12.5px; }
.form-actions { display: flex; justify-content: flex-end; }
.help { margin-top: 18px; font-size: 14px; color: var(--text-2); }
.help summary { cursor: pointer; color: var(--text); font-weight: 600; }
.help ol { padding-left: 20px; margin: 10px 0 0; display: grid; gap: 6px; }
.card { background: var(--bg-elev); border-radius: 20px; padding: clamp(18px, 3vw, 26px); box-shadow: var(--card-shadow); }

/* Subpáginas (Canais no celular, Conta, App, Sobre) */
#view-settings[data-sub] .back-link { display: inline-flex; }
#view-settings[data-sub] .settings-cols { grid-template-columns: minmax(0, 820px); }
#view-settings[data-sub] .set-sec { display: none !important; }
#view-settings[data-sub="conta"] .set-sec[data-sec="conta"],
#view-settings[data-sub="canais"] .set-sec[data-sec="canais"],
#view-settings[data-sub="musicas"] .set-sec[data-sec="musicas"],
#view-settings[data-sub="app"] .set-detail[data-detail="app"],
#view-settings[data-sub="sobre"] .set-detail[data-detail="sobre"] { display: block !important; margin-top: 0; }
#view-settings[data-sub="conta"] .set-detail[data-detail="conta"] { display: block; margin-top: 16px; }
#view-settings[data-sub] .settings-col:empty { display: none; }
#view-settings[data-sub] .app-version { display: none; }

@media (max-width: 1099px) {
  .settings-cols { grid-template-columns: minmax(0, 1fr); }
}
/* Celular: lista agrupada no estilo dos Ajustes do iPhone */
@media (max-width: 760px) {
  .set-compact-only { display: block !important; }
  .set-regular-only { display: none !important; }
  #view-settings:not([data-sub]) .set-sec:is([data-sec="canais"], [data-sec="musicas"]) { display: none; }
  #view-settings:not([data-sub]) .acct-card .chev { display: block; }
  #view-settings:not([data-sub]) .acct-card .btn { display: none; }
  .settings-cols { gap: 28px; }
  .channel-item { flex-wrap: wrap; row-gap: 8px; }
  .channel-item .ci-text { flex-basis: calc(100% - 90px); }
  .channel-item .channel-dur { order: 3; margin-left: 46px; }
  .channel-item .channel-switch { order: 4; margin-left: auto; }
}

/* =========================================================
   Avisos (cápsulas de vidro)
   ========================================================= */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--tabbar-space));
  z-index: 100;
  display: grid;
  gap: 8px;
  width: min(92vw, 460px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-edge);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tint); flex-shrink: 0; }
.toast.show { opacity: 1; }
.toast-error::before { background: var(--error); }
.toast-success::before { background: var(--green); }

/* =========================================================
   Página de credenciais (credenciais.html)
   ========================================================= */
.cred-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 190, 152, .8) 0, transparent 36%),
    radial-gradient(circle at 82% 30%, rgba(102, 103, 171, .8) 0, transparent 40%),
    radial-gradient(circle at 60% 90%, rgba(15, 76, 129, .67) 0, transparent 45%),
    #F0EEE9;
  background-attachment: fixed;
}
:root[data-scheme="dark"] .cred-body { background: radial-gradient(circle at 18% 22%, rgba(164, 120, 100, .5) 0, transparent 36%), radial-gradient(circle at 82% 30%, rgba(102, 103, 171, .55) 0, transparent 40%), radial-gradient(circle at 60% 90%, rgba(15, 76, 129, .6) 0, transparent 45%), #101820; background-attachment: fixed; }
:root[data-pantone] .cred-body { background: radial-gradient(circle at 18% 22%, rgba(var(--th-vivid-rgb), .35) 0, transparent 36%), radial-gradient(circle at 82% 30%, rgba(var(--th-mid-rgb), .8) 0, transparent 42%), radial-gradient(circle at 60% 90%, rgba(var(--th-light-rgb), .18) 0, transparent 45%), var(--th-deep); background-attachment: fixed; }
:root[data-pantone] .cred-lock { background: linear-gradient(145deg, var(--th-vivid), var(--th-mid)); }
.cred-page { display: grid; align-content: center; justify-items: center; gap: 16px; min-height: 100vh; max-width: 720px; margin: 0 auto; padding: 40px 20px 56px; }
.cred-back { justify-self: center; display: inline-flex; align-items: center; gap: 2px; color: var(--tint); font-size: 15px; font-weight: 500; text-decoration: none; }
.cred-card { width: 100%; border-radius: 30px; padding: 38px 40px 30px; background: var(--glass); }
.cred-login { max-width: 440px; text-align: center; }
.cred-lock { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, #6667AB, var(--blue)); color: #F4F9FF; box-shadow: 0 10px 24px rgba(15, 76, 129, .35); }
.cred-lock svg { width: 30px; height: 30px; }
.cred-page h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.024em; }
.cred-sub { margin: 8px 0 24px; color: var(--text-2); font-size: 15px; }
.cred-fields { text-align: left; border-radius: 14px; background: var(--bg-elev); box-shadow: inset 0 0 0 .5px var(--sep); overflow: hidden; }
.cred-fields label { display: block; padding: 10px 16px 9px; }
.cred-fields label + label { border-top: .5px solid var(--sep); }
.cred-fields label span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); }
.cred-body .cred-fields input[type="text"] { width: 100%; margin-top: 2px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font-size: 17px; outline: none; }
.cred-login .btn-lg { width: 100%; margin-top: 18px; }
#login-error { margin-top: 12px; }
.cred-panel { max-width: 640px; }
.cred-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cred-head h1 { margin: 0; }
.cred-panel .config-form input { background: var(--bg-elev); }
/* Campo com o texto escondido (bolinhas) sem ser "senha": o navegador não oferece salvar. */
.masked { -webkit-text-security: disc; text-security: disc; }
#save-msg:empty { display: none; }
@media (max-width: 520px) { .cred-card { padding: 30px 22px 24px; } }

/* =========================================================
   Celular (≤ 760 px): Início em lista, faixa do canal centralizada
   ========================================================= */
@media (max-width: 760px) {
  .view { padding: 14px 16px 40px; }
  .page-head { margin-bottom: 14px; }
  .head-actions { gap: 8px; }
  #watched-toggle { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  #watched-toggle .label { display: none; }
  #refresh-btn { display: none; }
  .account-mini { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: linear-gradient(145deg, var(--peach), var(--mocha)); color: #F4F9FF; text-decoration: none; font-size: 15px; font-weight: 600; }
  .account-mini img { width: 100%; height: 100%; object-fit: cover; }
  .account-mini .btn-google { display: none; }
  .chips-row { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .chips-row::-webkit-scrollbar { display: none; }
  .chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    background: var(--fill-2);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
  .chip.on { padding-left: 14px; background: var(--text); color: var(--bg); }
  .feed-grid { gap: 22px; }
  .tile-info .avatar { width: 34px; height: 34px; }
  .tile-title { font-size: 16px; line-height: 21px; letter-spacing: -0.016em; }
  .tile .thumb { border-radius: 16px; }
  .tile-more { display: grid; place-items: center; width: 28px; height: 28px; margin: -2px -6px 0 auto; color: var(--text-3); flex-shrink: 0; border-radius: 50%; }
  .tile-more .ic { width: 20px; height: 20px; }

  /* Página do canal: foto grande no centro */
  .channel-banner { margin: -14px -16px 0; }
  .cb-box { height: auto; padding: 104px 16px 0; border-radius: 0; box-shadow: none; background: none; text-align: center; overflow: visible; }
  .cb-box::before { content: ""; position: absolute; inset: 0 0 auto; height: 300px; z-index: -1; background: linear-gradient(140deg, var(--violet), var(--blue)); }
  .cb-bg { inset: 0 0 auto; width: 100%; height: 300px; transform: none; z-index: -1; filter: blur(36px) saturate(160%); -webkit-mask-image: linear-gradient(#101820 55%, transparent); mask-image: linear-gradient(#101820 55%, transparent); }
  .cb-box::after { inset: 0 0 auto; height: 300px; z-index: -1; background: linear-gradient(transparent 50%, var(--bg)); }
  .cb-main { position: static; flex-direction: column; gap: 0; color: var(--text); }
  .cb-avatar { width: 96px; height: 96px; box-shadow: 0 0 0 4px rgba(244, 249, 255, .6), 0 12px 30px rgba(16, 24, 32, .2); }
  .cb-main h1 { margin-top: 12px; font-size: 28px; line-height: 34px; white-space: normal; }
  .cb-meta { font-size: 13px; color: var(--text-2); opacity: 1; }
  .cb-actions { top: 52px; right: 16px; bottom: auto; }
  .cb-actions .pill-glass { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .cb-actions .pill-glass .label { display: none; }
  .cb-back { position: absolute; top: 52px; left: 16px; z-index: 1; display: grid; width: 40px; height: 40px; background: rgba(16, 24, 32, .42) !important; color: #F4F9FF !important; }
  .cb-bar { justify-content: center; margin: 16px 0 18px; }
  .cb-bar h2 { display: none; }
  .channel-banner:not([hidden]) ~ .feed-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .channel-banner:not([hidden]) ~ .feed-grid .tile { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 12px; align-items: start; }
  .channel-banner:not([hidden]) ~ .feed-grid .tile-info { padding-top: 0; }
  .channel-banner:not([hidden]) ~ .feed-grid .tile .thumb { border-radius: 12px; }
  .channel-banner:not([hidden]) ~ .feed-grid .tile-title { font-size: 15px; line-height: 20px; }
  .channel-banner:not([hidden]) ~ .feed-grid .tile-more { display: none; }
  body.channel-page #home-head, body.channel-page #home-chips { display: none; }

  #view-stats, #view-settings { padding-top: 14px; }
  .st-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .st-head .seg { display: flex; }
  .st-head .seg > button { flex: 1; }
}

/* Celular: o destaque vira um cartão normal (lista de cartões, como no mock do iPhone) */
@media (max-width: 760px) {
  .tile.tile-hero { grid-row: auto; grid-column: auto; margin-bottom: 0; }
  .tile-hero .thumb { height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }
  .tile-hero .thumb::before, .tile-hero .hero-txt { display: none; }
  .tile-hero .tile-info { display: flex; }
  .tile-hero .badge:not(.badge-live):not(.badge-upcoming) { display: block; }
  .feed-grid.with-hero::before, .feed-grid.with-hero::after { display: none; }
}
.mini-time:not(:empty)::before { content: " · "; }
@media (max-width: 760px) { .mini-time { display: none; } }
.acct-ph { display: grid; place-items: center; color: #F4F9FF; }
.acct-ph .ic { width: 26px; height: 26px; }
.acct-card { gap: 14px; }
.acct-card .btn-google { flex-shrink: 0; }

/* =========================================================
   Movimento ("apple experience")
   =========================================================
   Uma linguagem de movimento única para o app todo:
     • --ease-smooth: desacelera longo e assenta sem passar do ponto
       (mola amortecida), para deslocamentos, telas e tamanhos;
     • --ease-spring: mola com um leve "quique" (~4%), para coisas que
       "brotam": menus, botões, avisos, selos, a barra do mini player;
     • entradas combinam opacidade + leve deslocamento + desfoque que
       some (o efeito de "foco" das animações da Apple);
     • ao tocar/clicar, botões e capas afundam um pouco e voltam com mola.
   "Reduzir movimento" do sistema desliga tudo.
   ========================================================= */
:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-press: cubic-bezier(.2, 0, 0, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-smooth: linear(0, .0368, .123, .2321, .347, .4576, .5582, .6462, .721, .7832, .8338, .8743, .9062, .9311, .9501, .9645, .9752, .9831, .9888, .9928, .9957, .9976, .9989, .9997, 1.0002, 1.0005, 1.0006, 1.0006, 1.0006, 1.0005, 1.0005, 1.0004, 1);
    --ease-spring: linear(0, .0459, .1556, .2958, .4431, .5823, .7046, .806, .8857, .9451, .9868, 1.0139, 1.0296, 1.0369, 1.0383, 1.0359, 1.0314, 1.0259, 1.0203, 1.015, 1.0105, 1.0068, 1.0039, 1.0017, 1.0003, .9993, .9988, .9986, .9985, .9986, .9988, .999, 1);
  }
}

@keyframes viewIn { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
@keyframes viewOut { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes tileIn { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(6px); } }
@keyframes popIn { from { opacity: 0; transform: scale(.92); filter: blur(4px); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes fsEnter { from { opacity: 0; scale: .96; filter: blur(6px); } }
@keyframes fsExit { from { opacity: 0; scale: 1.02; filter: blur(6px); } }

.view.view-enter { animation: viewIn .55s var(--ease-smooth) backwards; }
::view-transition-old(root) { animation: viewOut .22s var(--ease) both; }
::view-transition-new(root) { animation: viewIn .5s var(--ease-smooth) backwards; }
::view-transition-group(hero) { animation-duration: .55s; animation-timing-function: var(--ease-smooth); z-index: 10; }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: cover; border-radius: 16px; overflow: hidden; }
::view-transition-group(tabbar), ::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation: none; }
.tabbar { view-transition-name: tabbar; }

.tile { animation: tileIn .7s var(--ease-smooth) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.mini { animation: tileIn .6s var(--ease-smooth) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.comment { animation: tileIn .55s var(--ease-smooth) backwards; }
.channel-item, .ch-row, .live-row { animation: tileIn .5s var(--ease-smooth) backwards; }
.channel-banner, .page-head, .chips-row { animation: viewIn .55s var(--ease-smooth) backwards; }
.side-live { animation: popIn .45s var(--ease-spring) backwards; }
.tile-hero .hero-txt > * { animation: viewIn .7s var(--ease-smooth) backwards; }
.tile-hero .hero-txt > :nth-child(2) { animation-delay: 60ms; }
.tile-hero .hero-txt > :nth-child(3) { animation-delay: 120ms; }
.tile-hero .hero-txt > :nth-child(4) { animation-delay: 180ms; }

/* Página do vídeo: título, canal e descrição sobem em cascata */
.watch-info > * { animation: tileIn .6s var(--ease-smooth) backwards; }
.watch-info > :nth-child(2) { animation-delay: 40ms; }
.watch-info > :nth-child(3) { animation-delay: 80ms; }
.watch-side .side-head { animation: tileIn .6s var(--ease-smooth) 60ms backwards; }

/* Ajustes, Estatísticas: cascata ao abrir */
.set-sec { animation: tileIn .6s var(--ease-smooth) backwards; }
.settings-col .set-sec:nth-child(2) { animation-delay: 50ms; }
.settings-col .set-sec:nth-child(3) { animation-delay: 100ms; }
.settings-col .set-sec:nth-child(n+4) { animation-delay: 150ms; }
.settings-col + .settings-col .set-sec { animation-delay: 80ms; }

/* Toque/clique: afunda e volta com mola */
.btn, .btn-icon, .round-glass, .pill-glass, .side-toggle, .chip, .seg > :not(.seg-thumb), .link-btn, .mp-row, .mini-btn, .ci-remove, .hero-actions .round {
  transition-property: background, background-color, color, opacity, box-shadow, transform;
  transition-duration: .2s, .2s, .2s, .2s, .3s, .45s;
  transition-timing-function: ease, ease, ease, ease, var(--ease), var(--ease-spring);
}
.pc-btn {
  transition-property: background, color, opacity, transform;
  transition-duration: .2s, .2s, .2s, .45s;
  transition-timing-function: ease, ease, ease, var(--ease-spring);
}
:is(.btn, .btn-icon, .round-glass, .pill-glass, .side-toggle, .chip, .seg > :not(.seg-thumb), .pc-btn, .mini-btn, .ci-remove, .hero-actions .round):active:not(:disabled) {
  transform: scale(.94);
  transition-duration: .2s, .2s, .2s, .2s, .3s, .08s;
  transition-timing-function: ease, ease, ease, ease, var(--ease), var(--ease-press);
}
.pc-center .pc-btn:active:not(:disabled) { transform: scale(.9); }
.pc-btn:active:not(:disabled) { transition-duration: .2s, .2s, .2s, .08s; }
.side-item { transition: background .2s, color .2s, transform .45s var(--ease-spring); }
.side-item:active { transform: scale(.97); transition-duration: .2s, .2s, .08s; }
.row-link { transition: background .2s; }
@keyframes pop { 40% { transform: scale(1.18); } }
.pop { animation: pop .45s var(--ease-spring); }

/* Capas */
.thumb { transition: transform .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth); }
.thumb img { transition: transform .8s var(--ease-smooth), opacity .4s; }
.tile:active .thumb, .mini:active .thumb { transform: scale(.97); transition-duration: .12s; }
@media (hover: none) {
  .tile:hover .thumb { transform: none; box-shadow: var(--card-shadow); }
  .tile:hover .thumb img { transform: none; }
  .tile:active .thumb { transform: scale(.97); }
}

/* Menu lateral */
.sidebar { transition: width .5s var(--ease-smooth), transform .5s var(--ease-smooth), padding .5s var(--ease-smooth); }
body { transition: --side-now .5s var(--ease-smooth), background-color .5s ease; }
.side-avatar { transition: width .5s var(--ease-smooth), height .5s var(--ease-smooth); }

/* Avisos e botões flutuantes */
.toast {
  transform: translateY(20px) scale(.92);
  filter: blur(4px);
  transition: opacity .3s var(--ease), transform .55s var(--ease-spring), filter .3s var(--ease);
}
.toast.show { transform: none; filter: none; }
.to-top { transition: opacity .3s var(--ease), transform .55s var(--ease-spring), bottom .45s var(--ease-smooth); }

/* Player */
@keyframes pcMenuIn { from { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(6px); } }
.pc-menu { animation: pcMenuIn .4s var(--ease-spring); }
@keyframes playerFlash {
  0% { opacity: 0; transform: scale(.7); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); filter: blur(2px); }
}
.player-flash { animation: playerFlash .7s var(--ease) forwards; }
@keyframes playerFlashText {
  0% { opacity: 0; transform: scale(.9); filter: blur(4px); }
  14% { opacity: 1; transform: none; filter: none; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}
.player-flash.player-flash-text { animation: playerFlashText 1.2s var(--ease) forwards; }
body.mini-player #view-watch { animation: riseIn .6s var(--ease-spring) backwards; }

/* Estatísticas (só quando a página abre ou o período muda: .st-anim) */
.stats.st-anim :is(.st-tile, .st-card) { animation: tileIn .65s var(--ease-smooth) backwards; }
.stats.st-anim .st-tile:nth-child(2) { animation-delay: 40ms; }
.stats.st-anim .st-tile:nth-child(3) { animation-delay: 80ms; }
.stats.st-anim .st-tile:nth-child(4) { animation-delay: 120ms; }
.stats.st-anim .st-card:nth-child(1) { animation-delay: 140ms; }
.stats.st-anim .st-card:nth-child(2) { animation-delay: 180ms; }
.stats.st-anim .st-card:nth-child(3) { animation-delay: 220ms; }
.stats.st-anim .st-card:nth-child(4) { animation-delay: 260ms; }
.stats.st-anim .st-card:nth-child(n+5) { animation-delay: 300ms; }
@keyframes stRing { from { stroke-dasharray: 0 var(--c); } }
.stats.st-anim .st-ring-arc { animation: stRing 1.1s var(--ease-smooth) .2s both; }
@keyframes stBar { from { transform: scaleY(0); } }
.stats.st-anim .st-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: stBar .8s var(--ease-spring) both; animation-delay: calc(.25s + var(--i, 0) * 35ms); }
@keyframes stLine { from { stroke-dashoffset: 1; } }
.stats.st-anim .st-line { stroke-dasharray: 1; animation: stLine 1.2s var(--ease-smooth) .25s both; }
@keyframes stFade { from { opacity: 0; } }
.stats.st-anim .st-area, .stats.st-anim .st-avg, .stats.st-anim .st-avg-label { animation: stFade .9s var(--ease) .5s both; }
@keyframes stDot { from { opacity: 0; transform: scale(0); } }
.stats.st-anim .st-dot { transform-box: fill-box; transform-origin: center; animation: stDot .5s var(--ease-spring) both; animation-delay: calc(.3s + var(--i, 0) * 45ms); }
@keyframes stGrow { from { width: 0; } }
.stats.st-anim .st-track span { animation: stGrow 1s var(--ease-smooth) both; animation-delay: calc(.3s + var(--i, 0) * 50ms); }
.stats.st-anim :is(.st-big, .st-fc-big) { animation: viewIn .6s var(--ease-smooth) .2s backwards; }
@keyframes stSpark { from { stroke-dashoffset: 1; } }
.stats.st-anim .st-spark path { stroke-dasharray: 1; animation: stSpark 1.2s var(--ease-smooth) .3s both; }

/* Olho no Início: os vídeos que continuam na tela deslizam até o novo lugar */
::view-transition-group(*.feed-tile) { animation-duration: .55s; animation-timing-function: var(--ease-smooth); }

/* Página de credenciais */
.cred-page > .cred-card { animation: riseIn .7s var(--ease-spring) backwards; view-transition-name: cred-card; }
::view-transition-group(cred-card) { animation-duration: .55s; animation-timing-function: var(--ease-smooth); }
@keyframes shake {
  15%, 55% { transform: translateX(-8px); }
  35%, 75% { transform: translateX(8px); }
  90% { transform: translateX(-3px); }
}
.shake { animation: shake .45s var(--ease) both; }

/* Movimento reduzido: tudo instantâneo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   Temas Pantone: fundo com degradê e linhas artísticas
   (camadas criadas pelo theme.js; ficam atrás de tudo e não
   recebem toques nem cliques)
   ========================================================= */
.theme-art {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--th-pale);
  background:
    radial-gradient(120% 85% at 100% 0%, rgba(var(--th-mid-rgb), .72), rgba(var(--th-mid-rgb), 0) 62%),
    radial-gradient(90% 70% at 0% 100%, rgba(var(--th-vivid-rgb), .15), rgba(var(--th-vivid-rgb), 0) 60%),
    linear-gradient(165deg, var(--th-bg), var(--th-deep));
  transition: background .6s ease;
}
.theme-art .art {
  position: absolute;
  width: min(46vw, 720px);
  height: auto;
  aspect-ratio: 1;
  opacity: 0;
  transition: opacity .8s var(--ease-smooth);
}
.art path, .art circle { vector-effect: non-scaling-stroke; }
/* Cada desenho se apaga em direção ao centro da tela, longe do conteúdo */
.theme-art .art-tr { top: 0; right: 0; -webkit-mask-image: radial-gradient(circle at 100% 0, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 100% 0, #000 35%, transparent 72%); }
.theme-art .art-bl { bottom: 0; left: var(--side-now, 0px); -webkit-mask-image: radial-gradient(circle at 0 100%, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 0 100%, #000 35%, transparent 72%); }
.theme-art .art-br { bottom: 0; right: 0; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 100% 100%, #000 35%, transparent 72%); }
.theme-art .art-tl { top: 0; left: var(--side-now, 0px); width: min(34vw, 520px); -webkit-mask-image: radial-gradient(circle at 0 0, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 0 0, #000 35%, transparent 72%); }
body:not(.watching) .theme-art .art-tr, body:not(.watching) .theme-art .art-bl { opacity: .16; }
body.watching .theme-art .art-br, body.watching .theme-art .art-tl { opacity: .14; }
body.cinema .theme-art { background: var(--th-deep); }
body.cinema .theme-art .art { opacity: 0 !important; }

.side-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--th-pale);
  opacity: .14;
  transition: opacity .4s var(--ease);
}
.side-art svg { display: block; width: 100%; height: auto; }
body.sidebar-mini .side-art { opacity: 0; }

/* Degradês leves nos elementos */
:root[data-pantone] .sidebar.glass { background: transparent; }
:root[data-pantone] body.sidebar-hidden .sidebar.glass { background: linear-gradient(180deg, var(--th-bg), var(--th-deep)); }
:root[data-pantone] .tabbar.glass {
  background: linear-gradient(100deg, rgba(var(--th-elev-rgb), .72), rgba(var(--th-mid-rgb), .6));
}
:root[data-pantone] .group,
:root[data-pantone] .card,
:root[data-pantone] .st-tile,
:root[data-pantone] .st-card,
:root[data-pantone] .description { background-image: var(--sheen); }
:root[data-pantone] .btn-primary,
:root[data-pantone] .btn-tint { background: linear-gradient(160deg, var(--th-light), var(--th-pale)); }
:root[data-pantone] input.switch:checked { background: linear-gradient(160deg, var(--th-vivid), var(--th-light)); }
:root[data-pantone] .seg-thumb { background: linear-gradient(160deg, var(--th-mid), var(--th-elev)); }
:root[data-pantone] .player-error { background: radial-gradient(circle at center, var(--th-elev), var(--th-deep)); }

@media (max-width: 760px) {
  .theme-art .art { width: 96vw; }
  .theme-art .art-bl, .theme-art .art-tl { left: 0; }
  body:not(.watching) .theme-art .art-tr, body:not(.watching) .theme-art .art-bl { opacity: .13; }
}

/* =========================================================
   Ajustes › Aparência: escolha do tema
   ========================================================= */
.theme-picker {
  --sw: clamp(46px, 12.4vw, 62px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 12px 16px;
}
.theme-opt {
  position: relative;
  display: grid;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--ease-spring);
}
.theme-opt:hover { transform: translateY(-2px) scale(1.05); }
.theme-opt:active { transform: scale(.93); transition-duration: .12s; }
.theme-opt:focus-visible { outline: none; }
.theme-sw {
  display: block;
  width: var(--sw);
  height: var(--sw);
  border-radius: calc(var(--sw) * .28);
  overflow: hidden;
  box-shadow: 0 0 0 .5px var(--sep), 0 4px 12px rgba(16, 24, 32, .18);
  transition: box-shadow .35s var(--ease);
}
.theme-sw svg { display: block; width: 100%; height: 100%; }
.theme-opt[aria-pressed="true"] .theme-sw,
.theme-opt:focus-visible .theme-sw { box-shadow: 0 0 0 2.5px var(--bg-elev), 0 0 0 4.5px var(--tint), 0 6px 16px rgba(16, 24, 32, .22); }
.theme-check {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--on-tint);
  box-shadow: 0 0 0 2px var(--bg-elev);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s var(--ease), transform .45s var(--ease-spring);
}
.theme-check svg { width: 13px; height: 13px; stroke-width: 3; }
.theme-opt[aria-pressed="true"] .theme-check { opacity: 1; transform: none; }
.theme-pantone {
  display: flex;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 6px 14px 14px;
  border: 1px solid var(--sep);
  border-radius: 22px;
}
.theme-pantone legend {
  margin: 0 auto;
  padding: 0 8px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Troca de tema: a página nova se abre num círculo a partir do botão tocado */
.theme-switching::view-transition-old(root),
.theme-switching::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-switching *, .theme-switching *::before { view-transition-name: none !important; }
.theme-switching::view-transition-old(root) { z-index: 1; }
.theme-switching::view-transition-new(root) { z-index: 2; }

/* =========================================================
   Início e página do canal no estilo do YouTube
   Grade uniforme de vídeos (sem destaque), barra de chips no topo,
   cartões com capa de cantos arredondados, foto do canal à esquerda
   do título e o menu "⋮" à direita. Página do canal: capa larga,
   foto grande, nome, @, inscritos e vídeos, aba "Vídeos" e chips
   de ordem.
   ========================================================= */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Barra de chips (fica presa no topo ao rolar) */
#view-home { padding-top: 0; }
.home-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: none;
  height: 56px;
  margin: 0 calc(-1 * var(--gutter)) 12px;
  padding: 0 var(--gutter);
  background: var(--bg);
  animation: none;
}
:root[data-pantone] .home-head { background: rgba(var(--th-bg-rgb), .86); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
body.channel-page .home-head { display: none; }
.chips-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.chips-row {
  display: flex;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.chips-row::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--side-hover);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { background: var(--side-press); }
.chip.on, .chip.on:hover { background: var(--text); color: var(--bg); }
:root[data-pantone] .chip.on { color: var(--th-bg); }
.chip img { display: none; }
.chips-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%);
}
.chips-arrow:hover { background: var(--side-hover); }
.chips-arrow .ic { width: 24px; height: 24px; }
.chips-arrow.prev { left: -4px; box-shadow: 30px 0 18px -4px var(--bg); }
.chips-arrow.next { right: -4px; box-shadow: -30px 0 18px -4px var(--bg); }
:root[data-pantone] .chips-arrow { background: var(--th-bg); }
:root[data-pantone] .chips-arrow.prev { box-shadow: 30px 0 18px -4px var(--th-bg); }
:root[data-pantone] .chips-arrow.next { box-shadow: -30px 0 18px -4px var(--th-bg); }
.chips-arrow[hidden] { display: none; }
.home-head .head-actions { gap: 8px; }
#watched-toggle {
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 8px;
  background: var(--side-hover);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  gap: 6px;
}
#watched-toggle:hover { background: var(--side-press); }
#watched-toggle[aria-pressed="true"] { background: var(--text); color: var(--bg); }
#watched-toggle .ic { width: 20px; height: 20px; }
#refresh-btn { width: 40px; height: 40px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--text); }
#refresh-btn:hover { background: var(--side-hover); }
#refresh-btn .ic { width: 22px; height: 22px; }

/* Grade: colunas como no YouTube (até 6 em telas muito largas) */
.home-wrap .feed-grid, .home-wrap .skeleton-grid { max-width: none; gap: 40px 16px; }
@container (min-width: 500px)  { .home-wrap .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 880px)  { .home-wrap .feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1240px) { .home-wrap .feed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 2100px) { .home-wrap .feed-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (min-width: 2700px) { .home-wrap .feed-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.skeleton-grid { margin-top: 40px; }
.search-note { max-width: none; }

/* Cartão */
.tile { border-radius: 12px; }
.tile .thumb { border-radius: 12px; box-shadow: none; background: var(--side-hover); }
.tile:hover .thumb, .tile:focus-visible .thumb { transform: none; box-shadow: none; }
.tile:hover .thumb img { transform: none; }
.tile:active .thumb { transform: none; }
.tile:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.badge {
  right: 8px;
  bottom: 8px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(16, 24, 32, .8);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
}
.badge-live, .badge-upcoming { left: auto; top: auto; right: 8px; bottom: 8px; gap: 4px; padding: 1px 5px 1px 4px; border-radius: 4px; letter-spacing: .02em; }
.badge-live { background: var(--live); }
.badge-upcoming { background: rgba(16, 24, 32, .8); }
.thumb:has(.watch-progress) .badge { bottom: 12px; }
.tile-info { position: relative; gap: 12px; padding: 12px 24px 0 0; }
.tile-info .avatar { width: 36px; height: 36px; }
.tile-title { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.012em; }
.tile-channel, .tile-meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-2); }
.tile-channel { margin-top: 2px; }
.tile-meta .sep::before { content: " • "; }
.new-tag {
  display: table;
  margin: 4px 0 0;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--side-hover);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.tile-more {
  position: absolute;
  top: 6px;
  right: -12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
}
.tile-more:hover { background: var(--side-hover); }
.tile-more:active { background: var(--side-press); }
.tile-more .ic { width: 24px; height: 24px; }
.skeleton-grid .sk-thumb { border-radius: 12px; }
.skeleton-grid .sk-row { gap: 12px; padding-top: 12px; }
.skeleton-grid .sk-avatar { width: 36px; height: 36px; }

/* Página do canal */
.channel-banner { max-width: none; margin: 16px 0 0; }
/* Capa: toda a largura útil da página; altura proporcional (6,2 : 1), no máximo 320 px em telas muito largas */
.cb-banner { width: 100%; height: min(calc(100cqw / 6.2), 320px); margin-bottom: 24px; overflow: hidden; border-radius: 16px; background: var(--side-hover); }
.cb-banner img { width: 100%; height: 100%; object-fit: cover; }
.cb-box { position: static; height: auto; overflow: visible; border-radius: 0; box-shadow: none; background: none; isolation: auto; }
.cb-box::before, .cb-box::after, .cb-bg { display: none; }
.cb-main { position: static; display: flex; align-items: center; gap: 24px; color: var(--text); min-width: 0; }
.cb-avatar { width: 160px; height: 160px; box-shadow: none; background: var(--side-hover); }
.cb-text { display: grid; gap: 8px; min-width: 0; }
.cb-name { margin: 0; overflow: hidden; font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; }
.cb-meta { font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-2); opacity: 1; }
.cb-actions { position: static; display: flex; gap: 8px; margin-top: 4px; }
.cb-actions #watched-toggle, .cb-actions .pill-glass { height: 36px; padding: 0 16px 0 12px; border-radius: 18px; background: var(--side-hover); color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.cb-actions #watched-toggle:hover { background: var(--side-press); }
.cb-actions #watched-toggle[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.cb-back { display: none; }
.cb-bar { display: none; }
.cb-tabs { display: flex; gap: 24px; margin-top: 24px; border-bottom: 1px solid var(--sep); }
.cb-tabs a { position: relative; padding: 0 0 12px; color: var(--text); font-size: 16px; font-weight: 600; line-height: 22px; text-decoration: none; }
.cb-tabs a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.cb-sort { display: flex; gap: 12px; margin: 16px 0 24px; }

/* Celular (≤ 760 px), como o app do YouTube: capas de ponta a ponta no Início */
@media (max-width: 760px) {
  .home-head { height: 48px; margin: 0 -16px 8px; padding: 0 16px; }
  .chips-row { gap: 8px; }
  #watched-toggle { width: 36px; height: 32px; padding: 0; justify-content: center; border-radius: 8px; }
  #watched-toggle .label { display: none; }
  .home-wrap .feed-grid { gap: 24px; }
  body:not(.channel-page) .home-wrap .feed-grid .tile .thumb { margin: 0 -16px; border-radius: 0; }
  body:not(.channel-page) .home-wrap .feed-grid .tile { border-radius: 0; }
  .tile-info { padding: 12px 28px 0 0; }
  .tile-title { font-size: 15px; line-height: 21px; }
  .tile-channel, .tile-meta { font-size: 12px; line-height: 18px; }
  .tile-more { top: 4px; right: -14px; }
  .tile-more .ic { width: 20px; height: 20px; }

  .channel-banner { margin: 8px 0 0; }
  .cb-banner { margin: 0 0 16px; border-radius: 12px; }
  .cb-box { padding: 0; text-align: left; }
  .cb-main { flex-direction: row; gap: 16px; align-items: center; }
  .cb-avatar { width: 72px; height: 72px; box-shadow: none; }
  .cb-text { gap: 4px; text-align: left; }
  .cb-main .cb-name { font-size: 22px; line-height: 28px; margin: 0; white-space: normal; }
  .cb-meta { font-size: 12px; line-height: 18px; color: var(--text-2); }
  .cb-actions { position: static; top: auto; right: auto; margin-top: 8px; }
  .cb-actions #watched-toggle, .cb-actions .pill-glass { width: auto; padding: 0 14px 0 10px; border-radius: 18px; }
  .cb-actions #watched-toggle .label { display: inline; }
  .cb-back { display: none !important; }
  .cb-tabs { margin-top: 16px; }
  .cb-sort { margin: 12px 0 16px; }
  .channel-banner:not([hidden]) ~ .feed-grid .tile-info { padding-top: 0; padding-right: 0; }
}

/* Página do vídeo (computador): o menu lateral fica escondido e só o botão de menu aparece no topo */
@media (min-width: 1100px) {
  #view-watch .cinema-bar { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: -10px 0 12px -12px; color: var(--text); }
  #view-watch:not(.theater) .cinema-bar [data-action="cinema-back"], #view-watch:not(.theater) .cinema-bar strong { display: none; }
  #view-watch .cinema-bar :is([data-action="cinema-sidebar"], [data-action="cinema-back"]) { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--text); }
  #view-watch .cinema-bar :is([data-action="cinema-sidebar"], [data-action="cinema-back"]):hover { background: var(--side-hover); }
  #view-watch .cinema-bar :is([data-action="cinema-sidebar"], [data-action="cinema-back"]) .ic { width: 24px; height: 24px; }
  /* Com o menu aberto, o botão dele (no topo do menu) faz o papel deste */
  #view-watch.theater .cinema-bar { margin-left: -12px; }
}
body.mini-player #view-watch .cinema-bar { display: none; }

/* Versão do app no rodapé do menu lateral: discreta, mas legível (texto secundário sobre o fundo) */
.side-version {
  display: block;
  flex-shrink: 0;
  margin: 0 12px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--sep);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.side-version:hover { color: var(--text); text-decoration: underline; }
body.sidebar-mini .side-version { margin: 0 4px; padding: 10px 0 12px; text-align: center; font-size: 10px; }
body.sidebar-mini .side-version .sv-name { display: none; }

/* Modo Cinema como o modo teatro do YouTube: o player ocupa toda a largura da tela, com faixas
   escuras dos lados quando sobra espaço, e a altura deixa o título e o canal à vista embaixo. */
@media (min-width: 1100px) {
  #view-watch.theater { padding: 18px 0 64px; }
  #view-watch.theater .cinema-bar { margin: -10px 28px 12px 16px; }
  #view-watch.theater .watch-layout { padding: 0 28px; }
  #view-watch.theater .watch-player { margin: 0 -28px; max-width: none; }
  #view-watch.theater .player-wrap {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 190px);
    min-height: 360px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--video-bg);
  }
  #view-watch.theater .watch-info { margin-top: 14px; }
  #view-watch.theater .watch-title { font-size: 22px; line-height: 28px; }
  #view-watch.theater .watch-meta { margin-top: 10px; }
}

/* =========================================================
   Botão de menu parado no mesmo lugar (canto de cima, à esquerda)
   Com o menu aberto ou fechado, recolhido ou expandido, o botão fica
   em 16 px da esquerda e 8 px do topo; só o menu se move. Na página
   do vídeo, o botão fica preso nesse ponto e o menu abre por baixo dele.
   ========================================================= */
@media (min-width: 1100px) {
  #view-watch .cinema-bar { padding-left: 44px; }
  #view-watch .cinema-bar [data-action="cinema-sidebar"] { position: fixed; top: 8px; left: 16px; z-index: 46; background: var(--bg); }
  #view-watch .cinema-bar [data-action="cinema-sidebar"]:hover { background: linear-gradient(var(--side-hover), var(--side-hover)), var(--bg); }
  body.sidebar-hidden #menu-btn { visibility: hidden; }
}

/* =========================================================
   A seguir: 3 vídeos. No modo normal, título + cartões + "Mostrar mais"
   têm juntos a mesma altura do player. No Modo Cinema, os mesmos 3
   numa coluna só, ao lado das informações do vídeo.
   ========================================================= */
@media (min-width: 1100px) {
  body:not(.mini-player) #view-watch:not(.theater) .watch-side:not(:has(#upnext > :nth-child(4))) { display: flex; flex-direction: column; min-height: var(--player-h, auto); }
  body:not(.mini-player) #view-watch:not(.theater) .watch-side:not(:has(#upnext > :nth-child(4))) .upnext { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; min-height: 0; margin-bottom: 12px; }
  body:not(.mini-player) #view-watch:not(.theater) .watch-side:not(:has(#upnext > :nth-child(4))) #upnext-more { margin-top: auto; }
  /* Coluna do "A seguir" mais larga (como no YouTube) e capas pela altura do player: 3 cartões colados,
     sem vão entre eles. 120 px = título (36 + 12) + margem (12) + "Mostrar mais" (36) + 2 espaços de 12. */
  #view-watch:not(.theater) { --side-col: clamp(380px, 30vw, 760px); }
  body:not(.mini-player) #view-watch:not(.theater) .upnext :is(.mini, .sk-mini) { grid-template-columns: min(64%, calc((var(--player-h, 600px) - 120px) / 3 * 16 / 9)) minmax(0, 1fr); gap: 12px; }
  #view-watch.theater .watch-side .side-head { display: flex; }
  #view-watch.theater .upnext { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #view-watch.theater .upnext .mini, #view-watch.theater .upnext .sk-mini { grid-template-columns: 200px minmax(0, 1fr); gap: 12px; }
  #view-watch.theater .upnext .mini-title { font-size: 14px; line-height: 19px; -webkit-line-clamp: 2; }
  #view-watch.theater .upnext .mini-meta + .mini-meta { display: block; }
}

/* =========================================================
   Ícones do player no estilo do YouTube: brancos e cheios quando
   ativos, cinza quando desativados; legendas ligadas com o traço
   vermelho (Crimson) embaixo; qualidade como selinho na engrenagem;
   reprodução automática com o botão do play/pausa.
   ========================================================= */
.pc-btn { color: #F4F9FF; }
.pc-btn svg { width: 24px; height: 24px; }
.pc-circle svg { width: 22px; height: 22px; }
.pc-mid svg { width: 28px; height: 28px; }
.pc-big svg { width: 36px; height: 36px; }
.pc-btn:disabled { opacity: 1; color: rgba(244, 249, 255, .38); }
#pc-cc { position: relative; }
#pc-cc.on::after { left: 24%; right: 24%; bottom: 10%; height: 3px; border-radius: 2px; background: var(--crimson); }
.pc-gear { position: relative; width: 40px; }
.pc-gear.has-quality svg { display: block; }
.pc-quality { position: absolute; top: 6px; right: 2px; padding: 1px 3px; border-radius: 3px; background: var(--crimson); color: #F4F9FF; font-size: 8.5px; font-weight: 800; line-height: 10px; letter-spacing: 0; }
.pc-switch-track { width: 36px; height: 14px; margin: 0 4px; background: rgba(244, 249, 255, .3); }
.pc-switch-knob { top: -3px; left: -4px; display: grid; place-items: center; width: 20px; height: 20px; background: #939597; box-shadow: 0 1px 3px rgba(16, 24, 32, .4); color: #101820; }
.pc-switch-knob svg { width: 11px; height: 11px; }
.pc-switch .sw-on, .pc-switch[aria-checked="true"] .sw-off { display: none; }
.pc-switch[aria-checked="true"] .sw-on { display: block; }
.pc-switch[aria-checked="true"] .pc-switch-track { background: rgba(244, 249, 255, .5); }
.pc-switch[aria-checked="true"] .pc-switch-knob { left: 20px; background: #F4F9FF; }

/* =========================================================
   Estatísticas (1.29.0)
   Linha 1: cinco cartões (horas, vídeos, médias e Canal nº 1).
   Linha 2: rankings de todos os canais em colunas, com setas.
   Linha 3: Previsão — área de informações em cima e, embaixo,
   "Total" (fixo) e os canais lado a lado, com setas.
   Todas as cores vêm do tema atual (cor de destaque e seus tons).
   ========================================================= */
.sx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.sx-ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.sx-card { position: relative; min-width: 0; padding: 18px 20px; border-radius: 20px; background: var(--bg-elev); box-shadow: var(--card-shadow); }
:root[data-pantone] .sx-card { background-image: var(--sheen); }
.sx-lab { display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.sx-lab .ic { width: 16px; height: 16px; flex-shrink: 0; }
.sx-big { margin-top: 10px; font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-big small { font-size: 17px; font-weight: 600; color: var(--text-2); letter-spacing: -0.01em; }
.sx-sub { margin-top: 4px; color: var(--text-2); font-size: 13px; line-height: 18px; }
.sx-top-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-width: 0; }
.sx-top-row img, .sx-top-row .sx-ph { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--fill); }
.sx-top-row > div { display: grid; min-width: 0; }
.sx-top-row b { overflow: hidden; font-size: 18px; line-height: 22px; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; }
.sx-top-row span { color: var(--text-2); font-size: 13px; line-height: 18px; }
.sx-score { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--tint-soft); color: var(--text); font-size: 12px; font-weight: 600; cursor: help; }
.sx-score .ic { width: 13px; height: 13px; }
.sx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sx-head h3 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.02em; }
.sx-head span { color: var(--text-2); font-size: 13px; text-align: right; }
.sx-empty { margin: 8px 0; color: var(--text-2); font-size: 13px; }

/* faixas que rolam para o lado, com setas */
.sx-scroller { position: relative; min-width: 0; }
.sx-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.sx-scroll::-webkit-scrollbar { display: none; }
.sx-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-elev); color: var(--text); box-shadow: var(--card-shadow), 0 0 0 .5px var(--sep); cursor: pointer; }
.sx-arrow .ic { width: 22px; height: 22px; }
.sx-arrow:hover { background: linear-gradient(var(--side-hover), var(--side-hover)), var(--bg-elev); }
.sx-arrow.prev { left: -6px; }
.sx-arrow.next { right: -6px; }
.sx-arrow[hidden] { display: none; }

/* rankings: colunas de 78 px, todos os canais */
.sx-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 78px; gap: 8px; width: max-content; min-width: 100%; height: 290px; }
.sx-col { display: grid; grid-template-rows: minmax(0, 1fr) 78px; min-width: 0; padding-top: 4px; border-radius: 10px; text-align: center; cursor: default; outline: none; }
.sx-col:focus-visible { box-shadow: 0 0 0 2px var(--tint); }
.sx-col-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--sep); }
.sx-col-bar em { margin-bottom: 6px; color: var(--text); font-size: 13px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-col-bar i { display: block; width: min(44px, 70%); height: calc((100% - 26px) * var(--h, 0)); border-radius: 6px 6px 2px 2px; background: var(--tint); opacity: .55; transform-origin: 50% 100%; transition: opacity .2s var(--ease); }
.sx-col.first .sx-col-bar i, .sx-col:hover .sx-col-bar i, .sx-col:focus-visible .sx-col-bar i { opacity: 1; }
.sx-col-name { display: grid; justify-items: center; align-content: start; gap: 5px; padding-top: 8px; }
.sx-col-name img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--fill); }
.sx-col-name span { display: -webkit-box; overflow: hidden; color: var(--text-2); font-size: 11.5px; line-height: 14px; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Previsão */
.sx-fc { padding: 0; overflow: hidden; }
.sx-fc-top { padding: 20px 22px 18px; }
.sx-fc-info { display: grid; grid-template-columns: minmax(240px, 1.05fr) minmax(0, 1.5fr) minmax(240px, 1fr); gap: 26px; align-items: stretch; }
.sx-fc-info.sx-swap > * { animation: viewIn .45s var(--ease-smooth) backwards; }
.sx-fc-info.sx-swap > :nth-child(2) { animation-delay: 40ms; }
.sx-fc-info.sx-swap > :nth-child(3) { animation-delay: 80ms; }
.sx-who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 17px; font-weight: 700; min-width: 0; }
.sx-who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sx-who > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sx-app { display: grid; flex-shrink: 0; }
.sx-app svg { width: 34px; height: 34px; }
.sx-days { display: block; font-size: 52px; line-height: 56px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sx-line { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 20px; }
.sx-line strong { color: var(--text); }
.sx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.sx-fact { padding: 10px 12px; border-radius: 12px; background: var(--fill-2); outline: none; }
.sx-fact[data-tip] { cursor: help; }
.sx-fact span { display: block; color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.sx-fact b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sx-box { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--fill-2); }
.sx-box h4 { margin: 0 0 8px; color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.sx-burn { display: block; width: 100%; height: 150px; cursor: crosshair; }
.stats.st-anim .sx-burn-line { stroke-dasharray: 1; animation: stLine 1.1s var(--ease-smooth) .25s both; }
.sx-burn-ends { display: flex; justify-content: space-between; margin-top: -2px; color: var(--text); font-size: 12px; font-weight: 700; }
.sx-axis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-3); font-size: 11px; }
.sx-done { margin-top: auto; padding-top: 12px; }
.sx-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--text-2); font-size: 13px; outline: none; }
.sx-row b { color: var(--text); text-align: right; }
.sx-row[data-tip] { cursor: help; }
.sx-prog { height: 10px; margin-top: 6px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.sx-prog i { display: block; height: 100%; border-radius: 6px; background: var(--tint); }
.sx-prog.soft i { opacity: .55; }
.stats.st-anim .sx-prog i { animation: stGrow 1s var(--ease-smooth) .3s both; }
.sx-stack { display: flex; gap: 2px; height: 14px; margin: 4px 0 10px; border-radius: 7px; overflow: hidden; }
.sx-stack i { display: block; min-width: 3px; height: 100%; background: var(--tint); outline: none; cursor: default; }
.sx-stack i:hover, .sx-stack i:focus-visible { filter: brightness(1.12); }
.sx-leg { display: grid; gap: 5px; color: var(--text-2); font-size: 12.5px; }
.sx-leg div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sx-leg span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sx-leg u { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: var(--tint); text-decoration: none; }
.sx-leg b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-note { margin: auto 0 0; padding-top: 10px; color: var(--text-2); font-size: 13px; line-height: 19px; }
.sx-note strong { color: var(--text); }
.sx-note a { color: var(--tint); font-weight: 700; text-decoration: none; }
.sx-note a:hover { text-decoration: underline; }
.sx-ok { color: var(--ok); font-weight: 700; }
.sx-warn { color: var(--live); font-weight: 700; }
/* faixa de filtros da Previsão */
.sx-fc-bar { display: flex; align-items: stretch; border-top: 1px solid var(--sep); }
.sx-fc-total { flex: none; border-right: 1px solid var(--sep); }
.sx-fc-bar .sx-scroller { flex: 1; }
.sx-fc-bar .sx-arrow.prev { left: 6px; }
.sx-fc-bar .sx-arrow.next { right: 6px; }
.sx-fc-tabs { display: flex; height: 100%; }
.sx-tab { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; width: 96px; flex: none; padding: 12px 6px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12px; line-height: 15px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sx-tab img, .sx-tab .sx-app svg { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sx-tab .sx-app svg { border-radius: 9px; }
.sx-tab > span:last-child { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sx-tab:hover { background: var(--side-hover); }
.sx-tab[aria-pressed="true"] { color: var(--text); font-weight: 700; background: var(--side-hover); }
.sx-tab[aria-pressed="true"]::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tint); }
.sx-tab:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }
/* dica */
.sx-tip { position: fixed; z-index: 80; display: grid; gap: 1px; max-width: 320px; padding: 9px 12px; border-radius: 12px; background: var(--bg-elev); box-shadow: var(--glass-shadow), 0 0 0 .5px var(--sep); color: var(--text-2); font-size: 12.5px; line-height: 17px; pointer-events: none; }
.sx-tip b { color: var(--text); font-size: 13px; }
.sx-tip[hidden] { display: none; }
/* animação ao abrir ou trocar o período */
.stats.st-anim .sx-card { animation: tileIn .65s var(--ease-smooth) backwards; }
.stats.st-anim .sx-kpis .sx-card:nth-child(2) { animation-delay: 40ms; }
.stats.st-anim .sx-kpis .sx-card:nth-child(3) { animation-delay: 80ms; }
.stats.st-anim .sx-kpis .sx-card:nth-child(4) { animation-delay: 120ms; }
.stats.st-anim .sx-kpis .sx-card:nth-child(5) { animation-delay: 160ms; }
.stats.st-anim .sx-ranks .sx-card { animation-delay: 180ms; }
.stats.st-anim .sx-fc { animation-delay: 240ms; }
.stats.st-anim .sx-col-bar i { animation: stBar .8s var(--ease-spring) both; animation-delay: calc(.25s + min(var(--i, 0), 12) * 35ms); }
@container (max-width: 1060px) {
  .sx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-fc-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-fc-info > .sx-hero { grid-column: 1 / -1; }
}
@container (min-width: 1061px) and (max-width: 1240px) {
  .sx-big { font-size: 28px; line-height: 34px; }
  .sx-big small { font-size: 15px; }
  .sx-card:not(.sx-fc) { padding: 16px; }
  .sx-days { font-size: 44px; line-height: 48px; }
}
@container (max-width: 720px) {
  .sx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-kpis .sx-top { grid-column: 1 / -1; }
  .sx-ranks { grid-template-columns: minmax(0, 1fr); }
  .sx-fc-info { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sx-big { font-size: 26px; line-height: 32px; }
  .sx-days { font-size: 42px; line-height: 46px; }
  .sx-head { flex-direction: column; gap: 2px; }
  .sx-head span { text-align: left; }
  .sx-cols { height: 250px; grid-auto-columns: 58px; gap: 6px; }
  .sx-col { grid-template-rows: minmax(0, 1fr) 44px; }
  .sx-col-name span { display: none; }
  .sx-tab { width: 80px; }
}
@media (hover: none) { .sx-arrow { display: none !important; } }

/* =========================================================
   Estatísticas › Pódio dos favoritos (1.30.0)
   2º | 1º | 3º, com foto, pontuação final e medalha (ouro,
   prata e bronze em cores Pantone); do 4º em diante, a lista ao lado.
   ========================================================= */
.pd-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 28px; margin-bottom: 16px; }
.pd-stage { display: flex; flex-direction: column; min-width: 0; }
.pd-head-l { display: flex; align-items: center; gap: 8px; }
.pd-i { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--text-2); font: italic 700 12px/1 Georgia, serif; cursor: help; }
.pd-i:hover, .pd-i:focus-visible { background: var(--fill-3); color: var(--text); outline: none; }
.pd-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; width: 100%; max-width: 620px; height: 360px; margin: 6px auto 0; }
.pd-spot { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; border-radius: 14px; outline: none; }
.pd-spot:focus-visible .pd-block { box-shadow: 0 0 0 2px var(--text); }
.pd-name { max-width: 100%; margin-bottom: 8px; overflow: hidden; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; text-overflow: ellipsis; }
.pd-spot.p1 .pd-name { font-size: 17px; }
.pd-av { width: 64px; height: 64px; margin-bottom: 12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg-elev), 0 0 0 5px var(--tint); }
.pd-spot.p1 .pd-av { width: 84px; height: 84px; }
.pd-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--fill); }
.pd-block { display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 16px; border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, var(--tint), transparent 260%); color: var(--on-tint); transform-origin: 50% 100%; }
.pd-spot.p1 .pd-block { height: 64%; }
.pd-spot.p2 .pd-block { height: 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 84%, var(--bg-elev)), transparent 260%); }
.pd-spot.p3 .pd-block { height: 42%; background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 70%, var(--bg-elev)), transparent 260%); }
.pd-spot.empty .pd-block { background: var(--fill-2); }
.pd-spot.empty .pd-med { opacity: .45; }
.pd-block b { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pd-spot.p1 .pd-block b { font-size: 32px; line-height: 36px; }
.pd-block > span { margin-top: 2px; padding: 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-align: center; text-transform: uppercase; opacity: .8; }
.pd-med { margin-top: auto; margin-bottom: 12px; filter: drop-shadow(0 4px 8px rgba(16, 24, 32, .28)); }
.pd-med svg { display: block; width: 44px; height: 58px; }
.pd-spot.p1 .pd-med svg { width: 56px; height: 73px; }
.pd-base { width: 100%; max-width: 620px; height: 1px; margin: 0 auto; background: var(--sep); }
.pd-rest { display: grid; align-content: start; gap: 2px; min-width: 0; }
.pd-row { display: grid; grid-template-columns: 26px 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; outline: none; }
.pd-row:hover, .pd-row:focus-visible { background: var(--side-hover); }
.pd-row em { color: var(--text-3); font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pd-row img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--fill); }
.pd-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pd-row small { display: block; color: var(--text-2); font-size: 11.5px; font-weight: 500; }
.pd-row b { font-variant-numeric: tabular-nums; }
.stats.st-anim .pd-block { animation: stBar .8s var(--ease-spring) both; }
.stats.st-anim .pd-spot.p1 .pd-block { animation-delay: .35s; }
.stats.st-anim .pd-spot.p2 .pd-block { animation-delay: .2s; }
.stats.st-anim .pd-spot.p3 .pd-block { animation-delay: .27s; }
.stats.st-anim .pd-av, .stats.st-anim .pd-name { animation: viewIn .6s var(--ease-smooth) .5s backwards; }
@container (max-width: 1060px) { .pd-card { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 720px) {
  .pd-podium { height: 310px; gap: 6px; }
  .pd-av { width: 48px; height: 48px; }
  .pd-spot.p1 .pd-av { width: 62px; height: 62px; }
  .pd-name { font-size: 13px; }
  .pd-spot.p1 .pd-name { font-size: 14px; }
  .pd-block { padding-top: 12px; }
  .pd-block b { font-size: 18px; line-height: 22px; }
  .pd-spot.p1 .pd-block b { font-size: 22px; }
  .pd-block > span { font-size: 9px; letter-spacing: 0; }
  .pd-med svg { width: 36px; height: 47px; }
  .pd-spot.p1 .pd-med svg { width: 42px; height: 55px; }
  .pd-med { margin-bottom: 8px; }
}

/* =========================================================
   Músicas (1.32.0): página do artista e do álbum
   Seções: álbuns de estúdio no topo, em ordem de lançamento,
   com capa, título e ano; depois EPs, singles, ao vivo,
   coletâneas e outros. Página do álbum: faixas na ordem oficial.
   ========================================================= */
.music-page { max-width: 2200px; margin: 0 auto; container-type: inline-size; }
.mu-head { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; }
.mu-avatar { width: 120px; height: 120px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--fill); }
.mu-head-text { display: grid; gap: 4px; min-width: 0; }
.mu-head-text h1 { margin: 0; }
.mu-sub { margin: 0; color: var(--text-2); font-size: 14px; }
.mu-sub a { color: inherit; font-weight: 600; text-decoration: none; }
.mu-sub a:hover { text-decoration: underline; }
.mu-section { margin-bottom: 34px; }
.mu-section-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; }
.mu-section-title span { color: var(--text-3); font-size: 14px; font-weight: 600; }
.mu-section-title .side-add { align-self: center; margin-left: 4px; }
.mu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 24px 18px; }
.mu-card { display: grid; gap: 4px; min-width: 0; color: var(--text); text-decoration: none; border-radius: 12px; outline: none; }
.mu-card:focus-visible .mu-cover { box-shadow: 0 0 0 3px var(--tint); }
.mu-cover { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; margin-bottom: 6px; border-radius: 10px; background: var(--side-hover); color: var(--text-3); box-shadow: var(--card-shadow); transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth); }
.mu-cover img { width: 100%; height: 100%; object-fit: cover; }
.mu-cover .ic { width: 40%; height: 40%; }
.mu-card:hover .mu-cover { transform: translateY(-3px); box-shadow: var(--lift-shadow); }
.mu-title { display: -webkit-box; overflow: hidden; font-size: 15px; line-height: 20px; font-weight: 600; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.mu-year { color: var(--text-2); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.mu-card .sk-line { height: 12px; margin-top: 4px; border-radius: 6px; }
.stats.st-anim .mu-card, .mu-grid .mu-card { animation: tileIn .55s var(--ease-smooth) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
/* álbum */
.mu-back { display: inline-flex; margin-bottom: 14px; }
.mu-album-head { display: flex; align-items: flex-end; gap: 26px; margin-bottom: 26px; }
.mu-cover-lg { width: min(260px, 38vw); flex-shrink: 0; margin: 0; border-radius: 14px; }
.mu-album-text { display: grid; gap: 6px; min-width: 0; }
.mu-album-text h1 { margin: 0; overflow-wrap: anywhere; }
.mu-play-all { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding-left: 14px; }
.mu-play-all .ic { width: 18px; height: 18px; }
.mu-tracks { display: grid; gap: 2px; max-width: 980px; }
.mu-track { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.mu-track:hover, .mu-track:focus-visible { background: var(--side-hover); outline: none; }
.mu-num, .mu-play { grid-column: 1; grid-row: 1; justify-self: center; color: var(--text-3); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mu-play { display: none; color: var(--text); }
.mu-play .ic { width: 20px; height: 20px; }
.mu-track:hover .mu-num, .mu-track:focus-visible .mu-num { display: none; }
.mu-track:hover .mu-play, .mu-track:focus-visible .mu-play { display: grid; }
.mu-track-title { grid-column: 2; overflow: hidden; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mu-views { grid-column: 3; color: var(--text-2); font-size: 13px; white-space: nowrap; text-align: right; }
.mu-dur { grid-column: 4; min-width: 40px; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.mu-track.is-watched .mu-track-title { color: var(--text-2); }
/* página Canais (celular) */
.channels-music:empty { display: none; }
/* 1.35.0: banner do artista, Atualizar, indisponíveis, aba Músicas */
.mu-banner { margin-bottom: 20px; }
.mu-head .mu-refresh { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; }
.mu-refresh .ic { width: 17px; height: 17px; }
.mu-refresh:disabled { opacity: .55; }
.mu-refresh:disabled .ic { animation: mu-spin 1s linear infinite; }
@keyframes mu-spin { to { transform: rotate(360deg); } }
.mu-card.is-off .mu-cover { filter: grayscale(1); opacity: .45; }
.mu-card.is-off .mu-title, .mu-card.is-off .mu-year { color: var(--text-3); }
.mu-track.is-off { cursor: default; }
.mu-track.is-off:hover { background: none; }
.mu-track.is-off .mu-track-title, .mu-track.is-off .mu-dur { color: var(--text-3); }
.mu-track.is-off .mu-views { color: var(--text-3); font-style: italic; }
.mu-track.is-off:hover .mu-num { display: grid; }
.mu-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.mu-list-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.mu-list-head .btn .ic { width: 17px; height: 17px; }
.ch-live-link .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); margin-right: 4px; }
.mu-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 12px; }
.mu-artist { display: grid; justify-items: center; gap: 8px; color: var(--text); text-align: center; text-decoration: none; font-size: 13px; font-weight: 600; }
.mu-artist img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: var(--fill); }
/* Ajustes › Músicas */
.music-item .ci-text .error { color: var(--error); }
.ci-refresh .ic { width: 18px; height: 18px; }
.ci-refresh:disabled { opacity: .4; }
@container (max-width: 640px) {
  .mu-head { gap: 14px; }
  .mu-avatar { width: 72px; height: 72px; }
  .mu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .mu-album-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mu-cover-lg { width: min(220px, 60vw); }
  .mu-head { flex-wrap: wrap; }
  .mu-head .mu-refresh { margin-left: 0; }
  /* faixas: visualizações embaixo do título */
  .mu-track { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 0; }
  .mu-track-title { grid-row: 1; align-self: end; }
  .mu-views { grid-column: 2; grid-row: 2; align-self: start; text-align: left; font-size: 12px; }
  .mu-views:empty { display: none; }
  .mu-dur { grid-column: 3; grid-row: 1 / span 2; }
  .mu-num, .mu-play { grid-row: 1 / span 2; }
}