/* ═══════════════════════════════════════════
       SISTEMA DE DESIGN — VARIÁVEIS GLOBAIS
    ═══════════════════════════════════════════ */
    :root {
      /* Marca */
      --gold:           #D4AF37;
      --gold-light:     #F5E17A;
      --gold-dark:      #C8961E;
      --gold-subtle:    rgba(212, 175, 55, 0.1);
      --gold-border:    rgba(212, 175, 55, 0.25);
      --bronze:         #A89020;

      /* Cores didáticas por função harmônica (verde/âmbar/vermelho, paleta "Sóbrio")
         — convenção do material do Daniel: Tônica=verde · Subdom=âmbar · Dominante=vermelho.
         Nunca usar Ouro Tônica como cor didática. Usadas no Mapa do Tom. */
      --fn-tonica:      #6E9A5E; /* verde — repouso */
      --fn-subdom:      #C28A38; /* âmbar — movimento */
      --fn-domin:       #AC4A44; /* vermelho — tensão */

      /* Estrutura — inspirado na referência */
      --bg:             #0D0D0D;
      --surface:        #1A1A1A;
      --surface-2:      #222222;
      --surface-3:      #2A2A2A;
      --border:         rgba(255, 255, 255, 0.06);
      --border-strong:  rgba(255, 255, 255, 0.12);

      /* Texto */
      --text-primary:   #FFFFFF;
      --text-secondary: #999999;
      --text-disabled:  #888888;

      /* Feedback */
      --success:        #4ade80;
      --error:          #f87171;
      --error-subtle:   rgba(248, 113, 113, 0.12);
      --info:           #7ab8ff;

      /* Temas */
      --tc-1:  #FFD54F;
      --tc-2:  #60a5fa;
      --tc-3:  #34d399;
      --tc-4:  #a78bfa;
      --tc-5:  #fb923c;
      --tc-6:  #22d3ee;
      --tc-7:  #f87171;
      --tc-8:  #f472b6;
      --tc-9:  #facc15;
      --tc-10: #94a3b8;

      /* Tipografia */
      --font-body:    'Figtree', sans-serif;
      --font-display: 'Outfit', sans-serif;
      --font-serif:   'DM Serif Display', serif;
      --font-mono:    'Space Mono', monospace;

      /* Raios — generosos como na referência */
      --radius-sm:  10px;
      --radius-md:  16px;
      --radius-lg:  24px;
      --radius-xl:  32px;
      --radius-pill: 999px;

      /* Nav */
      --topbar-height: 56px;
      --nav-height:  64px;
      --content-max: 480px;
      --side-pad: 16px;
    }

    /* ── Linha-Tônica — elemento-DNA dourado do sistema visual v2 ────── */
    .linha-tonica {
      display: block;
      height: 2px;
      width: 48px;
      background: var(--gold);
      border-radius: 1px;
      margin: 10px 0 14px;
      box-shadow: 0 0 10px rgba(212,175,55,0.45);
    }
    .linha-tonica-md     { width: 80px; }
    .linha-tonica-lg     { width: 120px; }
    .linha-tonica-center { margin-left: auto; margin-right: auto; }

    /* ── Focus visible — indicador para navegacao via teclado ────── */
    :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    :focus:not(:focus-visible) {
      outline: none;
    }

    @media (min-width: 600px) {
      :root {
        --content-max: 680px;
        --side-pad: 24px;
      }
    }

    @media (min-width: 900px) {
      :root {
        --content-max: 760px;
        --side-pad: 32px;
      }
    }

    /* ═══════════════════════════════════════════
       RESET & BASE
    ═══════════════════════════════════════════ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    ::selection {
      background: rgba(212,175,55,0.25);
      color: #fff;
    }

    html {
      /* Cobre safe area inferior mesmo se env() falhar —
         mesmo tom que o background da nav (#0B0B0B) */
      background: #0B0B0B;
      height: 100%;
    }

    html, body {
      height: 100%;
      overflow: hidden;
      background: #0B0B0B;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    button {
      border: none;
      background: none;
      cursor: pointer;
      font-family: inherit;
      color: inherit;
    }

    a { color: inherit; text-decoration: none; }

    /* ═══════════════════════════════════════════
       TELAS — SISTEMA DE NAVEGAÇÃO
    ═══════════════════════════════════════════ */
    @keyframes screenFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .screen {
      display: none;
      flex-direction: column;
      position: fixed;
      inset: 0;
      top: env(safe-area-inset-top, 0px);
      bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
      overflow-y: scroll;
      overflow-x: hidden;
      background: var(--bg);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .screen::-webkit-scrollbar { display: none; }

    .screen.active {
      display: flex;
      animation: screenFadeIn 0.22s cubic-bezier(.4,0,.2,1) both;
    }

    body.has-topbar .screen.active {
      top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    }

    /* ═══════════════════════════════════════════
       NAV BAR
    ═══════════════════════════════════════════ */
    .nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
      background: #0B0B0B;
      border-top: 1px solid rgba(212,175,55,0.15);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 9px;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      z-index: 110;
      box-sizing: border-box;
    }

    /* ═══════════════════════════════════════════
       TOAST / SNACKBAR
    ═══════════════════════════════════════════ */
    #toast-container {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 12px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      pointer-events: none;
      width: calc(100% - 32px);
      max-width: 420px;
    }

    .toast {
      width: 100%;
      padding: 12px 16px;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      display: flex;
      align-items: center;
      gap: 10px;
      pointer-events: auto;
      animation: toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .toast.hide {
      animation: toast-out 0.2s ease forwards;
    }

    .toast-erro {
      background: rgba(30, 10, 10, 0.97);
      border: 1px solid rgba(248, 113, 113, 0.4);
      color: #fca5a5;
    }

    .toast-ok {
      background: rgba(10, 25, 15, 0.97);
      border: 1px solid rgba(74, 222, 128, 0.4);
      color: #86efac;
    }

    .toast-info {
      background: rgba(10, 15, 28, 0.97);
      border: 1px solid rgba(96, 165, 250, 0.35);
      color: #93c5fd;
    }

    .toast-icon { font-size: 16px; flex-shrink: 0; }

    @keyframes toast-in {
      from { opacity: 0; transform: translateY(-10px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)     scale(1);    }
    }

    @keyframes toast-out {
      from { opacity: 1; transform: translateY(0)    scale(1);    }
      to   { opacity: 0; transform: translateY(-6px) scale(0.97); }
    }

    .nav-item {
      flex: 1;
      max-width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 8px;
      cursor: pointer;
      opacity: 0.75;
      transition: opacity 0.2s ease, transform 0.15s ease;
      border: none;
      background: none;
      position: relative;
    }

    /* Indicador dourado animado no topo */
    .nav-item::before {
      content: '';
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 20px;
      height: 2px;
      border-radius: 1px;
      background: var(--gold);
      box-shadow: 0 0 6px rgba(212,175,55,0.6);
      transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    }

    .nav-item.active::before {
      transform: translateX(-50%) scaleX(1);
    }

    .nav-item.active {
      opacity: 1;
    }

    .nav-item:active {
      opacity: 0.7;
      transform: scale(0.88);
    }

    .nav-icon {
      width: 28px;
      height: 28px;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
    }

    /* Badge de notificação na nav */
    .nav-badge {
      position: absolute;
      top: -4px;
      right: -8px;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      background: #f87171;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      box-sizing: border-box;
      line-height: 1;
      box-shadow: 0 1px 4px rgba(248,113,113,0.5);
    }

    /* Todos os ícones: outline, stroke */
    .nav-icon svg {
      fill: none;
      stroke: rgba(255,255,255,0.55);
      transition: stroke 0.2s ease;
    }

    /* Ativo: gold */
    .nav-item.active .nav-icon svg {
      fill: none;
      stroke: var(--gold);
    }

    .nav-label {
      display: none;
    }
    .nav-item.active .nav-label {
      display: none;
    }

    /* ═══════════════════════════════════════════
       MODAL — PADRÃO GLOBAL
    ═══════════════════════════════════════════ */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal {
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-xl);
      padding: 32px 24px 24px;
      width: 100%;
      max-width: 320px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      animation: modal-in 0.25s ease;
    }

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

    .modal-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }

    .modal-title {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      text-align: center;
    }

    .modal-desc {
      font-size: 14px;
      color: var(--text-secondary);
      text-align: center;
      line-height: 1.5;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      width: 100%;
      margin-top: 8px;
    }

    .btn {
      flex: 1;
      padding: 14px 16px;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
      text-align: center;
    }

    .btn:active {
      opacity: 0.85;
      transform: scale(0.97);
    }

    .btn-ghost {
      background: var(--surface-2);
      color: var(--text-primary);
    }

    .btn-danger {
      background: #ef4444;
      color: #fff;
    }
    .btn-danger:hover { background: #dc2626; }

    .btn-primary {
      background: var(--gold);
      color: #000;
      font-weight: 800;
      box-shadow: 0 2px 12px rgba(212,175,55,0.15);
      position: relative;
      overflow: hidden;
    }

    .btn-whatsapp {
      background: #25d366;
      color: #000;
    }

    /* ═══════════════════════════════════════════
       SPLASH SCREEN
    ═══════════════════════════════════════════ */
    @keyframes splashFadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes splashSweep {
      0%   { transform: translateX(-340%); }
      100% { transform: translateX(340%); }
    }

    #splash {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      z-index: 999;
      transition: opacity 0.45s ease;
    }

    #splash.hide {
      opacity: 0;
      pointer-events: none;
    }

    .splash-logo {
      font-family: var(--font-serif);
      font-size: 34px;
      font-weight: 400;
      letter-spacing: 0;
      color: #fff;
      animation: splashFadeIn 0.5s ease both;
    }

    .splash-logo span {
      color: var(--gold);
    }

    .splash-bar-track {
      width: 120px;
      height: 1.5px;
      background: rgba(212,175,55,0.18);
      border-radius: 1px;
      /* iOS Safari: clip-path recorta sem criar camada de compositing separada */
      clip-path: inset(0);
      animation: splashFadeIn 0.5s 0.15s ease both;
    }

    .splash-bar-fill {
      width: 35%;
      height: 100%;
      background: var(--gold);
      border-radius: 1px;
      /* iOS Safari: will-change garante que a animação roda numa camada dedicada */
      will-change: transform;
      animation: splashSweep 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    /* ═══════════════════════════════════════════
       TELA: LOGIN
    ═══════════════════════════════════════════ */

    @keyframes loginFadeIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes loginGoldPulse {
      0%, 100% { opacity: 0.4; }
      50%       { opacity: 1; }
    }
    @keyframes loginShimmer {
      from { transform: translateX(-100%) skewX(-15deg); }
      to   { transform: translateX(200%) skewX(-15deg); }
    }

    #screen-login {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: calc(env(safe-area-inset-top, 0px) + 48px) 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
      gap: 28px;
      z-index: 120;
      transition: opacity 0.35s ease;
      overflow-y: auto;
    }

    #screen-login.hide {
      opacity: 0;
      pointer-events: none;
    }

    /* Topo: eyebrow + marca */
    .login-logo-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      animation: loginFadeIn 0.5s ease both;
    }

    .login-eyebrow {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3.2px;
      text-transform: uppercase;
      color: rgba(212,175,55,0.55);
      text-align: center;
    }

    .login-logo {
      font-family: var(--font-serif);
      font-size: clamp(30px, 8vw, 38px);
      font-weight: 400;
      letter-spacing: -0.5px;
      color: var(--text-primary);
      line-height: 1;
      text-align: center;
      text-transform: none;
      white-space: nowrap;
    }

    .login-logo span {
      color: var(--gold);
      margin-left: 2px;
    }

    /* Formulário sem card — campos com underline */
    .login-form {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      animation: loginFadeIn 0.5s 0.1s ease both;
      padding: 0 6px;
      box-sizing: border-box;
    }

    .login-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .login-field-label {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: var(--text-disabled);
    }

    .login-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .login-input {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      padding: 6px 0 8px;
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
      border-radius: 0;
    }

    .login-input-wrap .login-input {
      padding-right: 32px;
    }

    .login-input:focus {
      border-bottom-color: var(--gold);
    }

    .login-input::placeholder {
      color: var(--text-disabled);
    }

    /* Botão olho (mostrar/ocultar senha) */
    .login-eye {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: var(--text-disabled);
      cursor: pointer;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s;
    }
    .login-eye:hover { color: var(--gold); }
    .login-eye svg { width: 18px; height: 18px; }
    .login-eye .login-eye-off { display: none; }
    .login-eye.login-eye-active .login-eye-on { display: none; }
    .login-eye.login-eye-active .login-eye-off { display: block; color: var(--gold); }

    /* Status erro / ok / loading */
    .login-status {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.55;
      padding: 11px 14px;
      border-radius: 11px;
      display: none;
    }

    .login-status.erro    {
      background: rgba(248,113,113,0.08);
      border: 1px solid rgba(248,113,113,0.2);
      color: var(--error);
      display: block;
    }
    .login-status.ok      {
      background: rgba(74,222,128,0.08);
      border: 1px solid rgba(74,222,128,0.2);
      color: var(--success);
      display: block;
    }
    .login-status.loading {
      background: rgba(212,175,55,0.07);
      border: 1px solid rgba(212,175,55,0.15);
      color: var(--gold);
      display: block;
    }

    /* Botão entrar — pill ouro */
    .login-btn {
      width: 100%;
      padding: 16px;
      border-radius: var(--radius-pill);
      border: none;
      background: var(--gold);
      color: #0B0B0B;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 0.2s;
      box-shadow: 0 2px 12px rgba(212,175,55,0.18);
      margin-top: 6px;
    }

    .login-btn:hover:not(:disabled) { opacity: 0.88; }
    .login-btn:active:not(:disabled) { opacity: 0.75; }
    .login-btn:disabled { opacity: 0.45; cursor: default; }

    /* Esqueci senha — link discreto */
    .login-forgot {
      background: none;
      border: none;
      color: var(--text-disabled);
      font-family: var(--font-body);
      font-size: 12px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      transition: color 0.2s;
      padding: 4px 0;
      margin-top: 4px;
    }
    .login-forgot:hover { color: var(--gold); }

    /* Footer — botão de suporte sutil */
    .login-footer {
      display: flex;
      justify-content: center;
      animation: loginFadeIn 0.5s 0.18s ease both;
    }

    .login-support {
      display: inline-block;
      padding: 9px 18px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.02);
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s;
    }
    .login-support:hover {
      border-color: rgba(212,175,55,0.25);
      color: var(--gold);
      background: rgba(212,175,55,0.04);
    }

    /* ═══════════════════════════════════════════
       TELA: INÍCIO
    ═══════════════════════════════════════════ */

    /* ── Skeleton loading ── */
    @keyframes skeleton-pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.4; }
    }

    .sk {
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      animation: skeleton-pulse 1.6s ease-in-out infinite;
    }

    .sk-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px 18px;
      width: 100%;
      max-width: var(--content-max);
      box-sizing: border-box;
    }

    .sk-line { height: 14px; border-radius: 6px; }
    .sk-line.sm { height: 11px; }
    .sk-line.lg { height: 18px; }
    .sk-block { border-radius: var(--radius-md); }

    #screen-inicio {
      padding: 24px var(--side-pad) 96px;
      gap: 12px;
      align-items: center;
    }

    #screen-inicio > * {
      width: 100%;
      max-width: var(--content-max);
      flex-shrink: 0;
    }


    .inicio-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 4px;
    }

    .inicio-header-info {
      display: flex;
      flex-direction: column;
      gap: 0;
      flex: 1;
    }

    .inicio-data {
      font-size: 13px;
      color: #888;
      font-weight: 400;
      letter-spacing: 0.02em;
      margin-bottom: 6px;
    }

    .inicio-greeting {
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.1;
      letter-spacing: 0.04em;
    }

    .greeting-name { color: var(--text-primary); }

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

    /* Progress strip (substitui nivel badges no header) */
    .inicio-progress-strip {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #555;
      font-family: var(--font-body);
      letter-spacing: 0.3px;
      flex-wrap: wrap;
      gap: 6px;
    }
    .inicio-progress-strip span { color: #777; }
    .ps-sep { display: none !important; }
    .inicio-progress-strip #nivel-badge {
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.25);
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 700;
      color: #D4AF37;
      font-family: var(--font-body);
      letter-spacing: 0.3px;
      border-radius: 6px;
    }
    #semana-strip {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      padding: 3px 9px;
      border-radius: 6px;
      color: #888;
      font-weight: 600;
    }
    #streak-strip-num { color: #bbb; font-weight: 700; }
    .ps-sep { color: #333; margin: 0 8px; }

    #ciclo-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
    }
    /* Pill verde sutil para status "Mentoria ativa" */
    #ciclo-badge.ativo {
      padding: 3px 9px 3px 8px;
      border-radius: 6px;
      background: rgba(62,209,121,0.08);
      border: 1px solid rgba(62,209,121,0.25);
      color: #7be3a5;
      letter-spacing: 0.01em;
    }
    /* S141: pill neutro pra "Mentoria concluída" — mesmo tratamento visual do "ativo" mas em pergaminho */
    #ciclo-badge.concluido {
      padding: 3px 9px;
      border-radius: 6px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(245,241,232,0.72);
      letter-spacing: 0.01em;
    }
    #ciclo-badge.inativo { color: #555; }
    .ciclo-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #3ed179;
      box-shadow: 0 0 6px rgba(62,209,121,0.7);
      flex-shrink: 0;
    }

    /* Chip "Ciclo N Liberado" no header alumni — clicável, scrolla até o CTA */
    .inicio-progress-strip #streak-badge {
      padding: 3px 9px;
      border-radius: 6px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(245,241,232,0.72);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.01em;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .inicio-progress-strip #streak-badge:hover,
    .inicio-progress-strip #streak-badge:focus-visible {
      background: rgba(212,175,55,0.08);
      border-color: rgba(212,175,55,0.30);
      color: #D4AF37;
      outline: none;
    }
    .inicio-progress-strip #streak-badge:active { opacity: 0.85; }
    .inicio-progress-strip #streak-badge svg { color: rgba(212,175,55,0.85); flex-shrink: 0; }


    /* Botão favoritos no header da home */
    /* Card Favoritos na home */
    .card-fav-home {
      background: #111;
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.15s;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    .card-fav-home:active { opacity: 0.85; transform: scale(0.99); }

    .card-fav-home-empty {
      gap: 8px;
    }
    .card-fav-empty-texto {
      font-size: 13px;
      color: var(--text-disabled);
      line-height: 1.5;
    }
    .card-fav-empty-cta {
      font-size: 12px;
      font-weight: 700;
      color: rgba(212,175,55,0.7);
      align-self: flex-start;
    }

    .card-fav-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-fav-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(212,175,55,0.55);
    }
    .card-fav-cta {
      font-size: 12px;
      font-weight: 700;
      color: rgba(212,175,55,0.75);
      background: transparent;
      border: 1px solid rgba(212,175,55,0.28);
      border-radius: var(--radius-pill);
      padding: 5px 12px;
      white-space: nowrap;
    }

    .card-fav-lista {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .card-fav-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .card-fav-item-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(212,175,55,0.07);
      border: 1px solid rgba(212,175,55,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: rgba(212,175,55,0.65);
    }
    .card-fav-item-info {
      flex: 1;
      min-width: 0;
    }
    .card-fav-item-tipo {
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #444;
      line-height: 1;
      margin-bottom: 2px;
    }
    .card-fav-item-nome {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-fav-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-fav-stats {
      font-size: 12px;
      color: var(--text-disabled);
    }

    /* Card Tema da Semana (home) — C1 / S108
       Substitui o antigo .card-fav-home no slot da home.
       Tipografia/tokens espelham os outros cards da home (Missão, Revisão). */
    .card-tema-semana {
      background: #111;
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.15s;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    .card-tema-semana:active { opacity: 0.85; transform: scale(0.99); }
    .card-tema-semana:focus-visible {
      outline: 2px solid rgba(212,175,55,0.55);
      outline-offset: 2px;
    }
    .card-tema-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(212,175,55,0.55);
    }
    .card-tema-titulo {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.25;
    }
    .card-tema-prog {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .card-tema-prog-track {
      height: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 999px;
      overflow: hidden;
    }
    .card-tema-prog-fill {
      height: 100%;
      background: rgba(212,175,55,0.7);
      border-radius: 999px;
      transition: width 0.3s ease;
    }
    .card-tema-prog-txt {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-disabled);
      letter-spacing: 0.02em;
    }
    .card-tema-pendente {
      padding: 10px 12px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .card-tema-pendente-tipo {
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #555;
      line-height: 1;
    }
    .card-tema-pendente-nome {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-tema-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .card-tema-cta {
      font-size: 12px;
      font-weight: 700;
      color: rgba(212,175,55,0.75);
      background: transparent;
      border: 1px solid rgba(212,175,55,0.28);
      border-radius: var(--radius-pill);
      padding: 5px 12px;
      white-space: nowrap;
    }

    /* Atalho Favoritos em Explorar (C1 / S108) */
    .exp-fav-entry {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 16px 16px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .exp-fav-entry:active { opacity: 0.85; transform: scale(0.995); }
    .exp-fav-entry:focus-visible {
      outline: 2px solid rgba(212,175,55,0.55);
      outline-offset: 2px;
    }
    .exp-fav-entry-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.18);
      color: rgba(212,175,55,0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .exp-fav-entry-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .exp-fav-entry-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(212,175,55,0.55);
      line-height: 1;
    }
    .exp-fav-entry-sub {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .exp-fav-entry-arrow {
      font-size: 14px;
      font-weight: 700;
      color: rgba(212,175,55,0.6);
      flex-shrink: 0;
    }

    /* Busca */
    .busca-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .busca-icon {
      position: absolute;
      left: 16px;
      pointer-events: none;
    }

    .busca-input {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      padding: 14px 20px 14px 46px;
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--text-primary);
      outline: none;
      transition: border-color 0.2s;
      cursor: pointer;
    }

    .busca-input::placeholder { color: var(--text-disabled); }
    .busca-input:focus { border-color: var(--gold-border); }

    /* Card continuar — minimalista V3 */
    .card-continuar {
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.15s;
      box-sizing: border-box;
    }

    .card-continuar:active { opacity: 0.85; transform: scale(0.99); }


    .card-continuar-info {
      flex: 1;
      min-width: 0;
    }

    .card-boasvindas-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 2px;
    }

    .card-continuar-rotulo {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      color: #888;
      margin-bottom: 2px;
    }

    .card-continuar-titulo {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.3;
    }

    .card-continuar-btn {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      color: #0a0a0a;
      background: var(--gold);
      border: 0;
      padding: 7px 13px;
      border-radius: 999px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* Card boas vindas — compacto */
    .card-boasvindas {
      background: var(--surface);
      border: none;
      border-radius: var(--radius-lg);
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-sizing: border-box;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .card-boasvindas-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .card-boasvindas-titulo {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
    }

    .card-boasvindas-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .card-boasvindas-btn {
      background: var(--gold);
      color: #000;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 9px 16px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .card-boasvindas-btn:active { opacity: 0.85; transform: scale(0.96); }

    /* Cards treino/ferramenta do dia */
    .card-dia {
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.15s;
      box-sizing: border-box;
    }

    .card-dia:active { opacity: 0.85; transform: scale(0.99); }

    /* Hero: treino card (novo layout premium) */
    .card-dia-treino {
      background: #141414;
      border: 1px solid rgba(212,175,55,0.14);
      padding: 24px 22px 20px;
      position: relative;
      overflow: hidden;
    }
    .card-dia-treino::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1.5px;
      background: var(--gold);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .card-dia-ferramenta {
      background: rgba(167, 139, 250, 0.1);
      border: none;
    }

    /* Tag row no topo do hero */
    .card-dia-tag-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-dia-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    .card-dia-treino .card-dia-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      color: rgba(212,175,55,0.55) !important;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .card-dia-treino .card-dia-label::before {
      content: '';
      display: inline-block;
      width: 16px; height: 1.5px;
      background: rgba(212,175,55,0.55);
      border-radius: 1px;
      flex-shrink: 0;
    }
    .card-dia-ferramenta .card-dia-label { color: rgba(167, 139, 250, 0.6); }

    .card-dia-corpo {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .card-dia-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }

    .card-dia-treino .card-dia-icon    { background: rgba(167, 139, 250, 0.15); }
    .card-dia-ferramenta .card-dia-icon { background: rgba(167, 139, 250, 0.15); }

    .card-dia-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .card-dia-titulo {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.3;
      color: #fff;
      margin-bottom: 6px;
    }
    .card-dia-treino .card-dia-titulo {
      font-family: var(--font-display);
      font-size: 21px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: #f0f0f0;
    }

    .card-dia-sub {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
      margin-bottom: 0;
    }
    .card-dia-treino .card-dia-sub { margin-bottom: 12px; }

    .card-dia-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-dia-tema {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-disabled);
    }

    .card-dia-btn {
      font-size: 12px;
      font-weight: 700;
      padding: 7px 14px;
      border-radius: var(--radius-pill);
    }

    .card-dia-treino .card-dia-btn {
      background: var(--gold);
      color: #000;
      font-size: 14px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 10px;
    }
    .card-dia-ferramenta .card-dia-btn { background: var(--tc-4); color: #000; }

    .card-dia-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-dia-footer-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card-dia-trocar {
      font-size: 11px;
      font-weight: 600;
      color: #888;
      background: rgba(255,255,255,0.06);
      border: none;
      padding: 8px 12px;
      min-height: 32px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
    }
    .card-dia-trocar:hover { color: #aaa; background: rgba(255,255,255,0.1); }

    .card-dia-streak {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.5px;
    }
    .card-dia-streak-hot { color: rgba(255,255,255,0.55); }

    /* Missao concluida */
    .card-dia-concluida .card-dia-label { color: rgba(74, 222, 128, 0.8); }
    .card-dia-concluida .card-dia-btn   { background: rgba(74, 222, 128, 0.15); color: #4ade80; border-radius: 99px; }
    .card-dia-concluida .card-dia-trocar { display: none; }

    /* Card YouTube */
    .card-youtube {
      -webkit-tap-highlight-color: transparent;
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.15s;
      box-sizing: border-box;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .card-youtube:active { opacity: 0.85; transform: scale(0.99); }

    .card-youtube-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--error);
    }

    .card-youtube-corpo {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .card-youtube-thumb {
      width: 120px;
      height: 76px;
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-youtube-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .card-youtube-play {
      position: absolute;
      width: 32px;
      height: 32px;
      background: rgba(0,0,0,0.72);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #fff;
    }

    .card-youtube-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .card-youtube-titulo {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card-youtube-canal {
      font-size: 12px;
      color: var(--text-disabled);
      font-weight: 500;
    }

    /* Card Revisão — Ícone + Barra de progresso */
    .card-revisao {
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: #141414;
      border: 1px solid rgba(212,175,55,0.1);
      box-sizing: border-box;
      transition: opacity 0.15s, transform 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .card-revisao:active { opacity: 0.85; transform: scale(0.99); }
    .card-revisao-top {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .card-revisao-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(212,175,55,0.06);
      color: var(--gold);
      border: 1px solid rgba(212,175,55,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
    }
    .card-revisao-icon svg {
      width: 24px;
      height: 24px;
    }
    .card-revisao-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      background: #f87171;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      box-shadow: 0 0 0 2px rgba(212,175,55,0.07);
    }
    /* C2/S108 — quando há atrasados, badge muda para Bronze Seco (urgência forte) */
    .card-revisao-badge.atrasado {
      background: #A89020;
      box-shadow: 0 0 0 2px rgba(168, 144, 32, 0.12);
    }
    .card-revisao-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .card-revisao-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(212,175,55,0.55);
    }
    .card-revisao-titulo { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
    .card-revisao-sub {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .card-revisao-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-revisao-stats {
      font-size: 12px;
      color: var(--text-disabled);
    }
    .card-revisao-btn {
      font-size: 12px;
      font-weight: 700;
      padding: 7px 14px;
      border-radius: var(--radius-pill);
      background: transparent;
      color: rgba(212,175,55,0.75);
      border: 1px solid rgba(212,175,55,0.28);
    }

    /* Week bar — barra de progresso semanal (informativa, não clicável) */
    .week-bar {
      background: #111111;
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
    .week-bar-left { flex: 1; }
    .week-bar-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: #888;
      font-family: var(--font-mono);
      margin-bottom: 10px;
    }
    .week-dots { display: flex; gap: 6px; align-items: center; min-width: 0; flex: 1; }
    .wd { flex: 1; max-width: 28px; min-width: 18px; height: 4px; border-radius: 2px; }
    .wd-done  { background: var(--gold); }
    .wd-empty { background: #232323; }
    .wd-hoje.wd-empty { background: #2e2e2e; }
    .week-bar-right { text-align: right; }
    .week-bar-num {
      font-size: 26px;
      font-weight: 700;
      color: var(--text);
      line-height: 1;
      letter-spacing: -0.5px;
      font-family: var(--font-display);
    }
    .week-bar-num-suffix {
      font-size: 12px;
      font-weight: 400;
      color: #888;
      letter-spacing: 0;
      font-family: var(--font-body);
      margin-left: 5px;
      vertical-align: 2px;
    }
    .week-bar-cap {
      font-size: 12px;
      color: #666;
      font-family: var(--font-body);
      margin-top: 3px;
    }

    /* ══════════════════════════════════════════
       HOME REDESIGN — S117
       Bloco 1: Atividades da semana · Bloco 2: Progresso · Bloco 3: Continuar
    ══════════════════════════════════════════ */

    /* Label editorial de seção (substitui .home-rot) */
    .home-seclabel {
      font-family: var(--font-body);
      font-size: 13px; font-weight: 500;
      color: rgba(255,255,255,0.6);
      margin: 6px 0 4px;
    }

    /* ══════════════════════════════════════════
       CARD AULA HERO (S128)
       Hero da home: card dominante com 6 estados
       (ao-vivo, hoje, em-breve, disponível, concluída)
    ══════════════════════════════════════════ */
    .card-aula-hero {
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      padding: 20px;
      margin: 12px 0 10px;
      position: relative;
      overflow: hidden;
    }
    .card-aula-hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 100%;
      background: var(--gold);
    }
    .cah-live::before    { background: var(--error); }
    .cah-soon::before    { background: rgba(168,144,32,0.45); }
    .cah-done::before    { background: #A89020; }

    .cah-eyebrow {
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 8px;
    }
    .cah-live .cah-eyebrow { color: var(--error); }
    .cah-soon .cah-eyebrow { color: rgba(168,144,32,0.65); }
    .cah-done .cah-eyebrow { color: #A89020; }

    .cah-title {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 700;
      line-height: 1.15;
      color: var(--text-primary);
      margin-bottom: 8px;
    }
    .cah-soon .cah-title { color: rgba(255,255,255,0.7); }

    .cah-desc {
      font-size: 13px;
      color: rgba(255,255,255,0.65);
      line-height: 1.45;
      margin-bottom: 16px;
    }

    .cah-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .cah-cta {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid transparent;
      cursor: pointer;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s, border-color 0.15s;
    }
    .cah-cta-primary {
      background: var(--gold);
      color: var(--bg);
    }
    .cah-cta-primary:active { background: var(--gold-dark); }
    .cah-cta-secondary {
      background: transparent;
      border-color: var(--border-strong);
      color: var(--text-primary);
    }
    .cah-cta-secondary:active { background: rgba(255,255,255,0.03); }
    .cah-cta-disabled {
      background: rgba(255,255,255,0.025);
      border: 1px dashed var(--border-strong);
      color: rgba(255,255,255,0.45);
      cursor: default;
    }
    .cah-cta-live {
      background: var(--error);
      color: #fff;
      position: relative;
    }
    .cah-cta-live::after {
      content: '';
      position: absolute;
      right: 14px; top: 50%;
      transform: translateY(-50%);
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #fff;
      animation: cah-pulse 1.4s infinite;
    }
    @keyframes cah-pulse {
      0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
      50%      { opacity: 0.35; transform: translateY(-50%) scale(0.7); }
    }

    .cah-cta-icon {
      width: 32px; height: 32px;
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cah-cta-primary   .cah-cta-icon { background: rgba(13,13,13,0.12); }
    .cah-cta-secondary .cah-cta-icon { background: rgba(255,255,255,0.05); }
    .cah-cta-disabled  .cah-cta-icon { background: rgba(255,255,255,0.04); }
    .cah-cta-live      .cah-cta-icon { background: rgba(255,255,255,0.18); }

    .cah-cta-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .cah-cta-title {
      font-family: var(--font-display);
      font-size: 14px; font-weight: 600;
      line-height: 1.2;
    }
    .cah-cta-meta {
      font-family: var(--font-mono);
      font-size: 11px; line-height: 1.3;
    }
    .cah-cta-primary   .cah-cta-meta { color: rgba(13,13,13,0.65); }
    .cah-cta-secondary .cah-cta-meta { color: rgba(255,255,255,0.45); }
    .cah-cta-disabled  .cah-cta-meta { color: rgba(255,255,255,0.3); }
    .cah-cta-live      .cah-cta-meta { color: rgba(255,255,255,0.8); }

    .cah-cta-arrow {
      opacity: 0.5;
      display: flex; align-items: center;
      flex-shrink: 0;
    }

    /* Faixa fina no rodapé do hero (S178) — info paralela, não-clicável.
       Usada quando o card mostra a aula anterior pra sinalizar "próxima aula". */
    .cah-bottom-meta {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.5);
    }
    .cah-bottom-meta svg {
      width: 14px; height: 14px;
      opacity: 0.6;
      flex-shrink: 0;
    }

    /* Skeleton */
    .cah-skeleton {
      height: 168px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      margin-bottom: 16px;
    }

    /* ── Painel de progresso (S130 — Variante B "Hábito") ─────────── */
    .hp-painel-eyebrow {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245,241,232,0.5);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .hp-painel-eyebrow::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(245,241,232,0.08);
    }
    .hp-painel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .hp-w {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 14px 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 96px;
      position: relative;
    }
    .hp-w-label {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(245,241,232,0.32);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .hp-w-label svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
    }
    .hp-w-value {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 28px;
      letter-spacing: -0.02em;
      line-height: 1;
      color: var(--text-primary);
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .hp-w-value .unit {
      font-size: 13px;
      font-weight: 500;
      color: rgba(245,241,232,0.5);
      letter-spacing: 0;
    }
    .hp-w-value.gold { color: var(--gold); }
    .hp-w-sub {
      font-size: 12px;
      color: rgba(245,241,232,0.72);
      line-height: 1.35;
    }
    .hp-w-sub strong {
      font-weight: 600;
      color: var(--text-primary);
    }
    .hp-w-bar {
      height: 4px;
      background: rgba(245,241,232,0.14);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 4px;
    }
    .hp-w-bar > i {
      display: block;
      height: 100%;
      background: var(--gold);
      border-radius: 2px;
    }

    /* Faixa fina de 12 semanas (substitui o grid de quadradinhos) */
    .hp-faixa {
      display: flex;
      gap: 4px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(245,241,232,0.08);
    }
    .hp-faixa .s {
      flex: 1;
      height: 6px;
      border-radius: 2px;
      background: rgba(245,241,232,0.14);
      position: relative;
    }
    .hp-faixa .s.done { background: var(--gold); }
    .hp-faixa .s.current {
      background: var(--gold);
      box-shadow: 0 0 0 1px rgba(212,175,55,0.5);
    }
    .hp-faixa .s.current::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--gold);
    }
    /* Semana prática (futura): mesmo cinza das outras futuras + outline em Bronze Seco */
    .hp-faixa .s.pratica {
      background: rgba(245,241,232,0.14);
      box-shadow: inset 0 0 0 1px rgba(168,144,32,0.6);
    }
    .hp-faixa .s.pratica.done {
      background: #A89020;
      box-shadow: none;
    }
    .hp-faixa .s.pratica.current {
      background: var(--gold);
      box-shadow: 0 0 0 1px rgba(212,175,55,0.5), inset 0 0 0 1px #A89020;
    }
    .hp-faixa-meta {
      font-family: var(--font-mono);
      font-size: 10px;
      color: rgba(245,241,232,0.32);
      text-align: center;
      margin-top: 10px;
      letter-spacing: 0.08em;
    }

    /* Hero block: eyebrow + título + descrição + barra de atividades */
    .hp-hero {
      margin-top: 0;
      padding: 14px;
      background: rgba(212,175,55,0.04);
      border: 1px solid rgba(212,175,55,0.18);
      border-radius: 11px;
    }
    .hp-hero .hp-tema { font-size: 22px; line-height: 1.15; }
    .hp-hero .hp-desc { margin-top: 6px; }

    /* Barra de progresso das atividades da semana */
    .hp-atv { margin-top: 14px; }
    .hp-atv-head {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 6px; font-size: 11px;
    }
    .hp-atv-lbl { color: var(--text-primary); font-weight: 500; }
    .hp-atv-pct {
      font-family: var(--font-mono);
      color: #A89020; font-weight: 700; font-size: 11px;
    }
    .hp-atv-bar {
      height: 5px;
      background: rgba(255,255,255,0.05);
      border-radius: 3px; overflow: hidden;
    }
    .hp-atv-fill {
      height: 100%;
      background: rgba(212,175,55,0.65);
      border-radius: 3px;
    }

    /* Próxima semana — card com preview + descrição (S128 redesign) */
    .hp-next {
      margin-top: 14px;
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      background: transparent;
      border: 1px dashed rgba(255,255,255,0.10);
      border-radius: 14px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .hp-next[data-empty] { display: none; }
    .hp-next:active { background: rgba(255,255,255,0.02); }
    .hp-next-ico {
      width: 36px; height: 36px;
      border-radius: 10px; flex-shrink: 0;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.10);
      display: flex; align-items: center; justify-content: center;
      color: #A89020;
    }
    .hp-next-meta {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column;
    }
    .hp-next-tag {
      font-family: var(--font-mono);
      font-size: 9px; letter-spacing: 0.16em;
      color: #A89020;
      text-transform: uppercase;
      margin-bottom: 3px;
    }
    .hp-next-title {
      font-family: var(--font-display);
      font-size: 14px; font-weight: 600;
      color: var(--text-primary);
      line-height: 1.25;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .hp-next-desc {
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      font-family: var(--font-mono);
      line-height: 1.35;
      margin-top: 3px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .hp-next-arrow {
      color: rgba(255,255,255,0.3);
      flex-shrink: 0;
      display: flex; align-items: center;
    }

    /* Slim card (Revisão pendente na home ativa) */
    .hp-slim-card {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      margin-top: 0;
    }
    #home-agenda:has(.hp-slim-card) + #card-continuar { margin-top: 10px; }
    .hp-slim-card:active { background: rgba(255,255,255,0.02); }
    .hp-slim-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: rgba(245,241,232,0.04);
      display: flex; align-items: center; justify-content: center;
      color: rgba(245,241,232,0.7);
      flex-shrink: 0;
    }
    .hp-slim-text {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
    }
    .hp-slim-title {
      font-family: var(--font-display);
      font-size: 14px; font-weight: 600;
      color: var(--text-primary);
    }
    .hp-slim-meta {
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      font-family: var(--font-mono);
    }
    .hp-slim-badge {
      background: #d33;
      color: #fff;
      font-size: 11px; font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      font-family: var(--font-mono);
      flex-shrink: 0;
    }
    .hp-slim-icon--gold {
      background: rgba(212,175,55,0.10);
      color: var(--gold);
    }
    .hp-slim-arrow {
      color: rgba(255,255,255,0.35);
      display: flex; align-items: center;
      flex-shrink: 0;
    }

    /* ── Catálogo alumni ── */
    .home-cat {
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 14px 16px 12px;
    }
    .hc-topo {
      display: flex; align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .hc-label {
      font-family: var(--font-mono);
      font-size: 8px; letter-spacing: 0.14em;
      text-transform: uppercase; color: rgba(255,255,255,0.15);
    }
    .hc-count { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
    .hc-count strong { color: var(--text-primary); }
    .hc-grid {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 5px; margin-bottom: 10px;
    }
    .hp-pill {
      height: 28px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 8px; font-family: var(--font-mono); letter-spacing: 0.02em;
    }
    .hp-pill.done    { background: rgba(212,175,55,0.13); color: rgba(212,175,55,0.65); }
    .hp-pill.partial { background: rgba(212,175,55,0.04); color: rgba(255,255,255,0.15); border: 1px solid rgba(212,175,55,0.08); }
    .hp-pill.none    { background: #111; color: rgba(255,255,255,0.08); }
    .hc-footer { display: flex; justify-content: flex-end; }
    .hc-cta { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.2); cursor: pointer; }

    /* ══════════════════════════════════════════
       HOME ALUMNI · Seção 1 (revisão + sugestão)
    ══════════════════════════════════════════ */
    #home-agenda:has(.al-rev-card) + #card-continuar,
    #home-agenda:has(.al-sug-card) + #card-continuar { margin-top: 8px; }

    .al-rev-card,
    .al-sug-card {
      display: flex; align-items: center; gap: 12px;
      border-radius: 14px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .al-rev-card + .al-sug-card { margin-top: 8px; }
    .al-rev-card:active,
    .al-sug-card:active { transform: scale(0.99); }

    /* Revisão hero — Bronze Seco */
    .al-rev-card {
      background: rgba(168,144,32,0.08);
      border: 1px solid rgba(168,144,32,0.30);
      padding: 14px 16px;
    }
    .al-rev-icon {
      width: 38px; height: 38px; border-radius: 10px;
      background: rgba(168,144,32,0.14);
      color: #A89020;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .al-rev-body { flex: 1; min-width: 0; }
    .al-rev-rot {
      font-family: var(--font-mono);
      font-size: 9px; letter-spacing: 0.14em;
      color: rgba(168,144,32,0.85);
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .al-rev-tit {
      font-family: var(--font-display);
      font-size: 14.5px; font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
    }
    .al-rev-btn {
      font-size: 11px; font-weight: 700;
      color: #A89020;
      background: rgba(168,144,32,0.10);
      border: 1px solid rgba(168,144,32,0.35);
      border-radius: 999px;
      padding: 6px 12px;
      white-space: nowrap; flex-shrink: 0;
    }

    /* Sugestão card */
    .al-sug-card {
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 12px 14px;
    }
    .al-sug-icon {
      width: 38px; height: 38px; border-radius: 10px;
      background: rgba(212,175,55,0.08);
      color: var(--gold);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .al-sug-body { flex: 1; min-width: 0; }
    .al-sug-rot {
      font-family: var(--font-mono);
      font-size: 9px; letter-spacing: 0.12em;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .al-sug-tit {
      font-family: var(--font-display);
      font-size: 14.5px; font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .al-sug-arr {
      color: rgba(255,255,255,0.25);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════
       HOME ALUMNI · Seção 2 (tiles por tipo)
    ══════════════════════════════════════════ */
    .al-tiles {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    .al-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 12px 11px;
      display: flex; flex-direction: column;
      min-height: 102px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .al-tile:active { background: rgba(255,255,255,0.02); }
    .al-tile-head {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 6px;
    }
    .al-tile-icon {
      width: 24px; height: 24px; border-radius: 7px;
      background: rgba(255,255,255,0.04);
      color: var(--gold);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .al-tile.al-tile-bronze .al-tile-icon {
      background: rgba(168,144,32,0.14);
      color: #A89020;
    }
    .al-tile-nome {
      font-size: 11px; font-weight: 700;
      color: rgba(255,255,255,0.82);
      letter-spacing: 0.01em;
    }
    .al-tile-num {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 700;
      color: var(--text-primary);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .al-tile-suf {
      font-family: var(--font-display);
      font-size: 12px;
      color: rgba(255,255,255,0.32);
      font-weight: 400;
      margin-left: 4px;
    }
    .al-tile-meta {
      font-family: var(--font-mono);
      font-size: 8.5px;
      color: rgba(255,255,255,0.32);
      letter-spacing: 0.04em;
      margin-top: 4px;
      margin-bottom: 8px;
    }
    .al-tile-noprog {
      margin-top: auto;
      font-family: var(--font-mono);
      font-size: 8.5px;
      color: rgba(255,255,255,0.28);
      letter-spacing: 0.06em;
    }
    .al-tile.al-tile-bronze .al-tile-noprog {
      color: rgba(168,144,32,0.65);
    }
    .al-tile-bar {
      margin-top: auto;
      height: 3px;
      background: rgba(255,255,255,0.05);
      border-radius: 2px;
      overflow: hidden;
    }
    .al-tile-bar-fill {
      height: 100%;
      background: rgba(212,175,55,0.5);
      border-radius: 2px;
      transition: width 0.3s ease;
    }
    .al-tile-bar-fill.full {
      background: var(--gold);
    }

    /* ── S141: Home alumni — novas seções ───────────────────────── */
    .al-sec { margin-top: 22px; }
    .al-sec:first-child { margin-top: 0; }
    /* lbl1 fica fora de .al-sec — gap do #screen-inicio (12px) já basta acima.
       Abaixo, zera margin-bottom porque o flex-gap também adiciona 12px. */
    #home-seclabel-1.al-sec-eyebrow { margin-top: 0; margin-bottom: 0; }
    /* Slots vazios da home não consomem flex-gap (evita "buraco" quando alumni
       não tem aviso de acesso, ou quando agenda/continuar não têm conteúdo) */
    #screen-inicio > #card-aula-hero:empty,
    #screen-inicio > #home-agenda:empty,
    #screen-inicio > #card-continuar:empty { display: none; }
    .al-sec-eyebrow {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245,241,232,0.5);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .al-sec-eyebrow::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(245,241,232,0.08);
    }

    /* Tile destaque (Progresso geral) — mesmo fundo dos outros, número em ouro */
    .al-tile.al-tile-gold .al-tile-num { color: var(--gold); }
    .al-tile.al-tile-gold .al-tile-suf { color: var(--gold); opacity: 0.7; }

    /* Progresso na mentoria — 3 mini stats centralizados */
    .al-pm-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }
    .al-pm-stat {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 12px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .al-pm-stat-ico {
      color: rgba(245,241,232,0.5);
      display: flex;
      justify-content: center;
      height: 14px;
    }
    .al-pm-stat-ico svg { width: 14px; height: 14px; }
    .al-pm-stat-ico.gold { color: var(--gold); }
    .al-pm-stat-val {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 22px;
      line-height: 1;
      color: var(--text);
    }
    .al-pm-stat-val.gold { color: var(--gold); }
    .al-pm-unit {
      font-size: 11px;
      font-weight: 500;
      color: rgba(245,241,232,0.5);
      margin-left: 2px;
    }
    .al-pm-stat-lbl {
      font-size: 10px;
      color: rgba(245,241,232,0.5);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* CTA "Apto para Ciclo N" — vertical, convite ao próximo ciclo (S142) */
    .al-pm-cta {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 14px;
      padding: 20px 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-decoration: none;
      color: inherit;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 0.15s;
    }
    .al-pm-cta:active { opacity: 0.75; }
    .al-pm-cta-top {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .al-pm-cta-seal {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.35);
      color: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .al-pm-cta-seal svg { width: 16px; height: 16px; }
    .al-pm-cta-eyebrow {
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--gold);
    }
    .al-pm-cta-tit {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 24px;
      color: var(--pergaminho);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .al-pm-cta-meta {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.14em;
      color: rgba(212,175,55,0.85);
      margin-top: 2px;
    }
    .al-pm-cta-sub {
      font-size: 12.5px;
      color: rgba(245,241,232,0.55);
      line-height: 1.45;
    }
    .al-pm-cta-divider {
      height: 1px;
      background: rgba(245,241,232,0.06);
      margin: 4px 0 2px;
    }
    .al-pm-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--gold);
      color: var(--bg);
      padding: 11px 16px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-body);
      letter-spacing: 0.01em;
    }
    .al-pm-cta-btn svg { width: 15px; height: 15px; }

    /* Card "Seu acesso" — 3 estados: normal / warn (≤28d) / urgent (≤14d) */
    .al-acc {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .al-acc-ico {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      color: rgba(245,241,232,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .al-acc-ico svg { width: 16px; height: 16px; }
    .al-acc-body { flex: 1; min-width: 0; }
    .al-acc-rot {
      font-family: var(--font-mono);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: rgba(245,241,232,0.5);
      margin-bottom: 2px;
    }
    .al-acc-tit {
      font-size: 13px;
      color: var(--text);
      line-height: 1.3;
    }
    .al-acc-tit strong { color: var(--text); }
    .al-acc-val {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 14px;
      color: var(--text);
    }
    .al-acc.al-acc-warn {
      background: rgba(168,144,32,0.06);
      border-color: rgba(168,144,32,0.4);
    }
    .al-acc.al-acc-warn .al-acc-ico {
      background: rgba(168,144,32,0.18);
      color: var(--bronze);
    }
    .al-acc.al-acc-warn .al-acc-rot { color: var(--bronze); }
    .al-acc.al-acc-warn .al-acc-val { color: var(--bronze); }
    .al-acc.al-acc-urgent {
      background: rgba(239,68,68,0.06);
      border-color: rgba(239,68,68,0.4);
    }
    .al-acc.al-acc-urgent .al-acc-ico {
      background: rgba(239,68,68,0.15);
      color: #EF4444;
    }
    .al-acc.al-acc-urgent .al-acc-rot { color: #EF4444; }
    .al-acc.al-acc-urgent .al-acc-val { color: #EF4444; }
    /* Card de acesso topo: margem antes do bloco de agenda */
    #card-aula-hero .al-acc { margin-bottom: 14px; }

    /* Tela completa: Meus Estudos */
    #screen-meus-estudos {
      padding: 0;
      flex-direction: column;
      overflow: hidden;
    }
    /* V2-A · Scroll container do painel Revisão */
    .rev-scroll {
      flex: 1;
      overflow-y: auto;
      scrollbar-width: none;
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 14px var(--side-pad) 0;
      box-sizing: border-box;
    }
    .rev-scroll::-webkit-scrollbar { display: none; }

    /* V2-A · Hero stats motivacional (topo) */
    .rev-hero-stats {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      margin-bottom: 18px;
      background: rgba(212,175,55,0.07);
      border: 1px solid rgba(212,175,55,0.18);
      border-radius: 14px;
    }
    .rev-hero-stats-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: rgba(212,175,55,0.16);
      color: var(--gold);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .rev-hero-stats-text { flex: 1; min-width: 0; }
    .rev-hero-stats-main {
      font-family: var(--font-display);
      font-size: 15.5px; font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
    }
    .rev-hero-stats-sub {
      font-size: 11.5px;
      color: var(--text-secondary);
      margin-top: 3px;
      line-height: 1.3;
    }
    .rev-hero-vagas {
      font-family: var(--font-display);
      font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #A89020;
      padding: 4px 8px;
      border-radius: 100px;
      background: rgba(168,144,32,0.12);
      flex-shrink: 0;
    }

    /* V2-A · Hero card (item mais urgente) */
    .rev-hero-card-label {
      font-family: var(--font-display);
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-disabled);
      padding: 0 4px 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .rev-hero-card-label.is-atrasado { color: #A89020; }
    .rev-hero-card-label svg { flex-shrink: 0; }

    .rev-hero-card {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 16px;
      margin-bottom: 18px;
      border-radius: 16px;
      background: rgba(212,175,55,0.06);
      border: 1px solid rgba(212,175,55,0.30);
    }
    .rev-hero-card.is-atrasado {
      background: rgba(168,144,32,0.08);
      border-color: rgba(168,144,32,0.40);
    }

    .rev-hero-card-top {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .rev-hero-card-icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: rgba(212,175,55,0.16);
      color: var(--gold);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .rev-hero-card-icon svg { width: 22px; height: 22px; }
    .rev-hero-card.is-atrasado .rev-hero-card-icon {
      background: rgba(168,144,32,0.18);
      color: #A89020;
    }
    .rev-hero-card-info { flex: 1; min-width: 0; }
    .rev-hero-card-nome {
      font-family: var(--font-display);
      font-size: 17px; font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rev-hero-card-meta {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rev-hero-card-btns {
      display: flex;
      gap: 8px;
    }
    .rev-hero-card-open,
    .rev-hero-card-register {
      flex: 1;
      padding: 11px 8px;
      border-radius: 10px;
      font-family: var(--font-display);
      font-size: 13px; font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      -webkit-tap-highlight-color: transparent;
      transition: opacity .15s;
      white-space: nowrap;
    }
    .rev-hero-card-open {
      background: var(--gold);
      color: #000;
      border: none;
    }
    .rev-hero-card.is-atrasado .rev-hero-card-open { background: #A89020; }
    .rev-hero-card-register {
      background: transparent;
      border: 1px solid rgba(255,255,255,.18);
      color: var(--text-secondary);
    }
    .rev-hero-card-open:active,
    .rev-hero-card-register:active { opacity: 0.7; }

    /* V2-A · Tela vazia */
    .rev-vazio {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px 60px;
      text-align: center;
    }
    .rev-vazio-icon {
      color: var(--text-disabled);
      margin-bottom: 14px;
    }
    .rev-vazio-icon svg { width: 48px; height: 48px; }
    .rev-vazio-title {
      font-family: var(--font-display);
      font-size: 16px; font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 6px;
    }
    .rev-vazio-sub {
      font-size: 13px;
      color: #666;
      line-height: 1.5;
      max-width: 280px;
    }

    /* V2-A · Linha colapsável (em fila / pausados) */
    .rev-collapse { margin-top: 12px; }
    .rev-collapse-row {
      width: 100%;
      padding: 12px 16px;
      background: transparent;
      border: 1px dashed var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-family: var(--font-body);
      color: var(--text-secondary);
      -webkit-tap-highlight-color: transparent;
      transition: border-color .15s, background .15s;
    }
    .rev-collapse-row:hover { border-color: var(--border-strong, rgba(255,255,255,0.15)); }
    .rev-collapse-row-lbl {
      flex: 1;
      font-family: var(--font-display);
      font-size: 12.5px; font-weight: 600;
      text-align: left;
      color: var(--text-secondary);
    }
    .rev-collapse-row-count {
      font-family: var(--font-display);
      font-size: 11px; font-weight: 700;
      color: var(--text-disabled);
      padding: 3px 9px;
      background: var(--surface);
      border-radius: 100px;
    }
    .rev-collapse-row-chevron {
      color: var(--text-disabled);
      display: flex;
      transition: transform .2s;
    }
    .rev-collapse.is-open .rev-collapse-row-chevron { transform: rotate(180deg); }
    .rev-collapse-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease, padding-top .3s ease;
    }
    .rev-collapse.is-open .rev-collapse-body {
      max-height: 4000px;
      padding-top: 10px;
    }
    /* ══ Card redesign — clicável + 1 botão ══ */
    .rev-card {
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      margin-bottom: 8px;
      position: relative;
      cursor: pointer;
      transition: background .15s, border-color .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .rev-card:active { background: #171717; }
    .rev-card.breve, .rev-card.pausado { cursor: default; }
    .rev-card.breve:active, .rev-card.pausado:active { background: var(--surface); }

    .rev-card.pronto   { border-color: rgba(212,175,55,0.28); }
    .rev-card.atrasado { border-color: rgba(168,144,32,0.4); }
    .rev-card.breve, .rev-card.pausado { opacity: .72; }

    .rev-card-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 8px 6px 16px;
    }
    .rev-card-icon {
      width: 36px; height: 36px;
      border-radius: 9px;
      background: var(--surface-2, #1A1A1A);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-disabled);
    }
    .rev-card.pronto .rev-card-icon   { color: var(--gold);   background: rgba(212,175,55,0.12); }
    .rev-card.atrasado .rev-card-icon { color: #A89020; background: rgba(168,144,32,0.12); }

    .rev-card-info { flex: 1; min-width: 0; }
    .rev-card-nome {
      font-family: var(--font-display);
      font-size: 15.5px; font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.2;
      margin-bottom: 3px;
    }
    .rev-card-meta {
      font-size: 12px;
      color: var(--text-disabled);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rev-card-meta-dot {
      display: inline-block;
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--text-disabled);
      margin: 0 6px;
      vertical-align: middle;
      opacity: .6;
    }

    .rev-card-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px 10px 16px;
      gap: 8px;
    }
    .rev-card-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-disabled);
    }
    .rev-card-chip-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--text-disabled);
    }
    .rev-card.pronto .rev-card-chip-dot   { background: var(--gold); }
    .rev-card.atrasado .rev-card-chip-dot {
      background: #A89020;
      animation: rev-dot-pulse 1.8s ease-in-out infinite;
    }
    .rev-card.atrasado .rev-card-chip { color: #A89020; font-weight: 700; }
    .rev-card.breve .rev-card-chip-dot {
      background: rgba(212,175,55,.4);
      animation: rev-dot-pulse 1.8s ease-in-out infinite;
    }
    .rev-card-btns {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .rev-card-btn-open {
      background: transparent;
      border: 1px solid rgba(255,255,255,.12);
      color: var(--text-secondary);
      padding: 7px 10px;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 12px; font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      transition: opacity .15s;
    }
    .rev-card-btn-open:active { opacity: .65; }
    .rev-card-btn-open svg { width: 13px; height: 13px; }
    .rev-card-btn-register {
      background: transparent;
      border: 1px solid var(--border-strong, rgba(255,255,255,.15));
      color: var(--text-primary);
      padding: 7px 10px;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 12px; font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      transition: opacity .15s, border-color .15s, color .15s, background .15s;
    }
    .rev-card-btn-register:active { opacity: .65; }
    .rev-card-btn-register svg { width: 13px; height: 13px; }
    .rev-card.pronto .rev-card-btn-register {
      border-color: var(--gold);
      color: var(--gold);
      background: rgba(212,175,55,.08);
    }
    .rev-card.atrasado .rev-card-btn-register {
      border-color: #A89020;
      color: #A89020;
      background: rgba(168,144,32,.10);
    }

    @keyframes rev-dot-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.25; transform: scale(0.6); }
    }

    /* Botão ⋯ */
    .rev-menu-btn {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: var(--text-disabled);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      transition: background .15s, color .15s;
    }
    .rev-menu-btn:hover, .rev-menu-btn:active {
      background: rgba(255,255,255,.05);
      color: var(--text-primary);
    }

    /* V2-A · Título de seção ("Também prontos") */
    .rev-sec-title {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 6px 4px 10px;
    }

    /* Menu contextual ⋯ */
    .rev-ctx-menu {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      min-width: 170px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    }
    .rev-ctx-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      -webkit-tap-highlight-color: transparent;
    }
    .rev-ctx-item:last-child { border-bottom: none; }
    .rev-ctx-item:active { opacity: 0.7; }
    .rev-ctx-danger { color: #f87171; }

    /* Rating sheet */
    .rev-rating-card {
      text-align: left !important;
    }
    .rev-rating-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .rev-rating-hint {
      font-size: 12px;
      color: var(--text-disabled);
      margin-bottom: 14px;
      line-height: 1.5;
    }
    .rev-rating-ref {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 14px;
    }
    .rev-rating-ref-icon {
      width: 34px; height: 34px;
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .rev-rating-ref-nome { font-size: 13px; font-weight: 700; color: var(--text-primary); }
    .rev-rating-ref-meta { font-size: 11px; color: var(--text-disabled); margin-top: 1px; }
    .rev-rating-btns { display: flex; flex-direction: column; gap: 8px; }
    .rev-rating-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      cursor: pointer;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }
    .rev-rating-btn:active { opacity: 0.75; }
    .rev-rating-btn-icon {
      width: 28px; height: 28px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700;
      flex-shrink: 0;
    }
    .rev-rating-btn-text { flex: 1; }
    .rev-rating-btn-label { font-size: 13px; font-weight: 700; }
    .rev-rating-btn-when  { font-size: 11px; opacity: 0.65; margin-top: 1px; }
    .rev-rating-btn-arrow { font-size: 14px; opacity: 0.35; }
    .rev-rating-dificil { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.18); color: #f87171; }
    .rev-rating-dificil .rev-rating-btn-icon { background: rgba(239,68,68,0.12); }
    .rev-rating-ok      { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.18); color: #fbbf24; }
    .rev-rating-ok      .rev-rating-btn-icon { background: rgba(251,191,36,0.12); }
    .rev-rating-dominei { background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.18); color: #4ade80; }
    .rev-rating-dominei .rev-rating-btn-icon { background: rgba(74,222,128,0.10); }

    /* Botão Revisão — dentro de conteúdos (alinhado ao .treino-btn-sec) */
    .treino-btn-sec-revisao {
      width: 100% !important;
      padding: 11px 10px !important;
      border-radius: var(--radius-md) !important;
      border: 1px solid var(--border-strong) !important;
      background: transparent !important;
      color: var(--text-secondary) !important;
      font-family: var(--font-body) !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 7px !important;
      cursor: pointer;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .treino-btn-sec-revisao svg { stroke: var(--text-disabled); }
    .treino-btn-sec-revisao:active { opacity: 0.75; }
    /* Estado: já está na revisão (ou registrar Nx) — acende em ouro */
    .treino-btn-sec-revisao.na-revisao {
      border-color: rgba(212,175,55,0.35) !important;
      background: rgba(212,175,55,0.10) !important;
      color: var(--gold) !important;
    }
    .treino-btn-sec-revisao.na-revisao svg { stroke: var(--gold); }
    .treino-btn-sec-revisao.fila-cheia {
      opacity: 0.45;
      cursor: not-allowed;
    }

    /* Botão revisão no bottom sheet de conclusão */
    .conclusao-btns {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .conclusao-btn-revisao {
      width: 100%;
      padding: 14px;
      background: rgba(212,175,55,0.12);
      color: var(--gold);
      border: 1px solid rgba(212,175,55,0.28);
      border-radius: var(--radius-md);
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .conclusao-btn-revisao:active { opacity: 0.75; }
    .conclusao-icon-wrap svg { width: 32px; height: 32px; }
    .rev-sheet-cancel {
      width: 100%;
      padding: 14px;
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .rev-sheet-cancel:active { opacity: 0.7; }
    .conclusao-btn-revisao.ja-revisao {
      opacity: 0.5;
      cursor: default;
      background: rgba(74,222,128,0.08);
      color: #4ade80;
      border-color: rgba(74,222,128,0.2);
    }

    /* Recado do Professor — iMessage */
    .dica-wrap {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding-bottom: 8px;
    }

    .dica-autor {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }


    .dica-autor-nome {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #fff;
    }

    .dica-autor-role {
      font-size: 11px;
      color: var(--text-disabled);
    }

    .dica-balao {
      background: rgba(212,175,55,0.07);
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      width: 100%;
      border: 1px solid rgba(212,175,55,0.2);
      border-left: 3px solid var(--gold);
      box-sizing: border-box;
    }

    .dica-balao-texto {
      font-size: 15px;
      color: #f0e8d0;
      line-height: 1.6;
      font-weight: 500;
    }

    .dica-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 10px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(212,175,55,0.85);
      background: rgba(212,175,55,0.1);
      border-radius: 20px;
      padding: 5px 12px;
      text-decoration: none;
      transition: background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .dica-link:active {
      background: rgba(212,175,55,0.18);
    }

    .recados-carrossel {
      width: 100%;
    }

    .recados-nav-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .recados-nav-row .recado-nav-btn {
      width: 20px;
      height: 20px;
      font-size: 18px;
      background: none;
      border: none;
      color: rgba(255,255,255,0.3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      line-height: 1;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.15s;
    }
    .recados-nav-row .recado-nav-btn:active { color: rgba(255,255,255,0.8); }
    .recados-nav-row .recados-dots-inner {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .recados-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(212,175,55,0.3);
      transition: background 0.2s, width 0.2s;
    }

    .recados-dot.ativo {
      background: var(--gold);
      width: 14px;
      border-radius: 3px;
    }

    .card-stats-titulo {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      width: 100%;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
      text-align: center;
    }

    .stat-item + .stat-item {
      border-left: 1px solid var(--border);
    }

    .stat-numero {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 800;
      color: var(--gold);
      line-height: 1;
    }

    .stat-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: var(--text-disabled);
      line-height: 1.3;
      text-align: center;
    }

    .stat-emoji {
      font-size: 16px;
      line-height: 1;
    }

    .card-stats-sub {
      font-size: 12px;
      color: var(--text-disabled);
    }

    /* Progresso */
    .progresso-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .progresso-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .progresso-row-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .progresso-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .progresso-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 99px;
      background: var(--gold-subtle);
      color: var(--gold);
      border: 1px solid var(--gold-border);
    }

    .progresso-badge.fire {
      background: rgba(251, 146, 60, 0.1);
      color: var(--tc-5);
      border-color: rgba(251, 146, 60, 0.2);
    }

    .blocos-wrap {
      display: flex;
      gap: 4px;
    }

    .bloco {
      flex: 1;
      height: 8px;
      border-radius: 4px;
      background: var(--surface-2);
      transition: background 0.3s ease;
    }

    .bloco.ativo {
      background: var(--gold);
    }

    .bloco.streak-ativo {
      background: var(--tc-5);
    }

    .progresso-sub-label {
      font-size: 11px;
      color: var(--text-disabled);
      margin-top: 2px;
    }

    .progresso-divider {
      height: 1px;
      background: var(--border);
      margin: 0 -18px;
    }

    /* Stats 3 colunas */
    .progresso-stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .progresso-stat {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center;
    }

    .progresso-stat-valor {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 800;
      color: var(--gold);
      line-height: 1;
    }

    .progresso-stat-label {
      font-size: 10px;
      color: var(--text-disabled);
      line-height: 1.3;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .progresso-stat-sep {
      width: 1px;
      height: 36px;
      background: var(--border);
      flex-shrink: 0;
    }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .section-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .section-sub { font-size: 12px; color: var(--text-disabled); }

    /* Temas rápidos */
    .temas-rapidos {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding-bottom: 8px;
      width: 100%;
    }

    .tema-rapido-card {
      background: var(--surface);
      border: none;
      border-radius: var(--radius-md);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s;
    }

    .tema-rapido-card:active {
      opacity: 0.8;
    }

    .tema-rapido-num {
      position: absolute;
      bottom: -4px;
      right: 8px;
      font-family: var(--font-display);
      font-size: 52px;
      font-weight: 800;
      line-height: 1;
      opacity: 0.07;
      color: #fff;
      pointer-events: none;
    }

    .tema-rapido-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .tema-rapido-nome {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
    }

    .tema-rapido-cat {
      font-size: 10px;
      color: var(--text-disabled);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 600;
    }

    /* ═══════════════════════════════════════════
       TELA: EXPLORAR
    ═══════════════════════════════════════════ */
    #screen-explorar {
      padding: 0;
      gap: 0;
      align-items: center;
    }

    .explorar-header {
      width: 100%;
      max-width: var(--content-max);
      padding: 14px var(--side-pad) 12px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }

    .explorar-pretitle { display: none; }

    .explorar-header-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-disabled);
      margin-bottom: 4px;
    }

    .explorar-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 0;
    }

    /* Stats — linha sutil abaixo da linha-tônica */
    .explorar-stats {
      margin-top: 0;
    }

    .explorar-stat { display: none; }
    .estat-sep     { display: none; }
    .estat-num     { display: none; }
    .estat-label   { display: none; }

    .explorar-stats-line {
      font-size: 12px;
      color: var(--text-secondary);
      font-weight: 400;
    }

    .explorar-search-wrap {
      position: sticky;
      top: 0;
      z-index: 10;
      width: 100%;
      background: var(--bg);
      padding: 10px var(--side-pad) 12px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: center;
      box-sizing: border-box;
    }

    .explorar-search {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      transition: border-color 0.2s;
      width: 100%;
      max-width: calc(var(--content-max) - var(--side-pad) * 2);
      box-sizing: border-box;
    }

    .explorar-search:focus-within {
      border-color: rgba(212, 175, 55, 0.35);
    }

    .explorar-search svg {
      flex-shrink: 0;
      stroke: var(--text-disabled);
    }

    .explorar-search input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 16px;
    }

    .explorar-search input::placeholder { color: var(--text-disabled); }

    .explorar-search-clear {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1;
      padding: 3px 5px;
      background: var(--surface-3);
      border-radius: 50%;
      border: none;
      cursor: pointer;
    }
    .explorar-search-clear.visible { opacity: 1; pointer-events: auto; }

    /* ── Wrapper do conteúdo explorar ──────── */
    .explorar-wrap {
      width: 100%;
      max-width: var(--content-max);
      padding: 14px var(--side-pad) 32px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      box-sizing: border-box;
    }

    /* ── Separador de seção ─────────────────── */
    .eg-secao { display: flex; flex-direction: column; gap: 10px; }

    .eg-secao-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .eg-secao-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--text-disabled);
    }

    .eg-secao-line {
      flex: 1;
      height: 1px;
      background: var(--border);
      flex-shrink: 0;
    }

    /* ── Grid de temas ───────────────────────── */
    .eg-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }


    /* ── Lista de temas ─────────────────────── */
    .eg-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Card lista ─────────────────────────── */
    /* ── Card "Tema da Semana" no topo do Explorar ──────────────────── */
    .eg-semana-card {
      background: #141414;
      border: 1px solid rgba(212,175,55,0.22);
      border-radius: var(--radius-md);
      padding: 14px 16px 14px;
      cursor: pointer;
      margin-bottom: 4px;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
      animation: cardIn 0.3s ease both;
    }

    .eg-semana-card:active { opacity: 0.85; transform: scale(0.98); transition: transform 0.1s, opacity 0.1s; }

    .eg-semana-topo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .eg-semana-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(212,175,55,0.6);
    }

    .eg-semana-badge {
      font-size: 11px;
      font-weight: 700;
      color: var(--gold);
      background: rgba(212,175,55,0.10);
      border: 1px solid rgba(212,175,55,0.25);
      border-radius: 99px;
      padding: 3px 10px;
    }

    .eg-semana-prog-track {
      height: 2px;
      background: rgba(255,255,255,0.07);
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .eg-semana-prog-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 99px;
    }

    .eg-semana-nome {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 5px;
    }

    .eg-semana-desc {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .eg-semana-rodape {
      display: flex;
      justify-content: flex-end;
    }

    .eg-semana-btn {
      font-size: 13px;
      font-weight: 700;
      color: var(--gold);
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.22);
      border-radius: 99px;
      padding: 6px 16px;
    }

    .eg-card {
      background: #141414;
      border: 1px solid rgba(255,255,255,0.06);
      border-left: 3px solid var(--tc);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 0.15s, transform 0.15s;
      min-height: 64px;
      position: relative;
      overflow: hidden;
      animation: cardIn 0.3s ease both;
    }

    .eg-card:active { opacity: 0.85; transform: scale(0.98); }

    @media (hover: hover) {
      .eg-card:hover { background: #181818; }
    }

    /* Entrada em cascata */
    .eg-list > .eg-card:nth-child(1)  { animation-delay:  0ms; }
    .eg-list > .eg-card:nth-child(2)  { animation-delay: 40ms; }
    .eg-list > .eg-card:nth-child(3)  { animation-delay: 70ms; }
    .eg-list > .eg-card:nth-child(4)  { animation-delay: 95ms; }
    .eg-list > .eg-card:nth-child(5)  { animation-delay:115ms; }
    .eg-list > .eg-card:nth-child(6)  { animation-delay:130ms; }
    .eg-list > .eg-card:nth-child(7)  { animation-delay:142ms; }
    .eg-list > .eg-card:nth-child(8)  { animation-delay:152ms; }
    .eg-list > .eg-card:nth-child(9)  { animation-delay:160ms; }
    .eg-list > .eg-card:nth-child(10) { animation-delay:165ms; }

    /* Caixa do número */
    .eg-num-box {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: var(--surface-3);
      border: 1px solid rgba(255,255,255,0.07);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 800;
      color: rgba(255,255,255,0.7);
      flex-shrink: 0;
      letter-spacing: -0.5px;
    }

    /* Info central */
    .eg-bottom {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    /* Label TEMA N */
    .eg-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(212,175,55,0.5);
    }

    /* Nome */
    .eg-nome {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }


    /* Locked */
    .eg-card.eg-locked {
      opacity: 0.5;
      cursor: default;
    }
    .eg-card.eg-locked:active { opacity: 0.6; }

    /* ── Barra de progresso do tema ─────────── */
    .eg-prog-track {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .eg-prog-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 0 2px 2px 0;
      transition: width 0.7s cubic-bezier(.4, 0, .2, 1);
      min-width: 0;
    }

    /* ══ Lista de temas — Praticar v3 ════════════════════════════════════ */
    .prat-list {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .prat-fase-div {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 20px 0 10px;
    }
    .prat-fase-div:first-child { padding-top: 4px; }

    .prat-fase-lbl {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-disabled);
      white-space: nowrap;
    }
    .prat-fase-line {
      flex: 1;
      height: 1px;
      background: var(--border-strong);
    }
    .prat-fase-prog {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      color: var(--text-disabled);
      white-space: nowrap;
    }
    .prat-fase-prog.done { color: var(--gold); }

    .prat-card {
      display: flex;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      margin-bottom: 6px;
      overflow: hidden;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .prat-card:active { opacity: 0.85; }

    .prat-stripe {
      width: 4px;
      background: var(--surface-3);
      flex-shrink: 0;
      transition: background 0.3s;
    }
    .prat-stripe.active { background: var(--tc, var(--gold)); }
    .prat-stripe.done   { background: var(--tc, var(--gold)); opacity: 0.5; }

    .prat-body {
      flex: 1;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .prat-num {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-disabled);
      line-height: 1;
      width: 26px;
      text-align: center;
      flex-shrink: 0;
    }
    .prat-num.active { color: var(--tc, var(--gold)); }
    .prat-num.done   { color: var(--tc, var(--gold)); opacity: 0.55; }

    .prat-info { flex: 1; min-width: 0; }

    .prat-nome {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .prat-meta {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--text-disabled);
      margin-top: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .prat-meta.active { color: rgba(212,175,55,0.65); }

    .prat-arrow { color: var(--text-disabled); font-size: 18px; line-height: 1; flex-shrink: 0; }
    .prat-check { color: var(--gold); display: flex; align-items: center; flex-shrink: 0; }

    /* ── Modal de conclusão de treino ────────── */
    .conclusao-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0);
      z-index: 500;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
      transition: background 0.3s;
    }

    .conclusao-overlay.visible {
      background: rgba(0, 0, 0, 0.65);
      pointer-events: all;
    }

    .conclusao-card {
      width: 100%;
      max-width: var(--content-max, 480px);
      background: var(--surface-2);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      padding: 12px 24px calc(28px + env(safe-area-inset-bottom, 0px));
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(.2, 0, 0, 1);
      border-top: 1px solid var(--border-strong);
    }

    .conclusao-overlay.visible .conclusao-card {
      transform: translateY(0);
    }

    .conclusao-handle {
      width: 36px;
      height: 4px;
      background: var(--border-strong);
      border-radius: 2px;
      margin: 0 auto 24px;
    }

    .conclusao-icon-wrap {
      width: 64px;
      height: 64px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin: 0 auto 16px;
    }

    .conclusao-titulo {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 800;
      color: var(--text-primary);
      text-align: center;
      margin-bottom: 4px;
    }

    .conclusao-treino-nome {
      font-size: 13px;
      color: var(--text-secondary);
      text-align: center;
      margin-bottom: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 8px;
    }

    .conclusao-streak {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: var(--gold-subtle);
      border: 1px solid var(--gold-border);
      border-radius: var(--radius-md);
      padding: 12px 20px;
      margin-bottom: 12px;
    }

    .conclusao-streak-num {
      font-family: var(--font-display);
      font-size: 36px;
      font-weight: 800;
      color: var(--gold);
      line-height: 1;
    }

    .conclusao-streak-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .conclusao-streak-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .conclusao-streak-sub {
      font-size: 11px;
      color: var(--text-disabled);
    }

    .conclusao-msg {
      font-size: 13px;
      color: var(--text-disabled);
      text-align: center;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .conclusao-btn {
      width: 100%;
      padding: 16px;
      background: var(--gold);
      color: #000;
      border-radius: var(--radius-md);
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.3px;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .conclusao-btn:active { opacity: 0.75; }

    /* ── Resultados de busca ─────────────────── */
    .explorar-results-wrap {
      width: 100%;
      max-width: var(--content-max);
      padding: 12px var(--side-pad) 32px;
      display: flex;
      flex-direction: column;
      gap: 8px;
          box-sizing: border-box;
    }

    .explorar-result-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: color-mix(in srgb, var(--tc, #888) 10%, #1C1C1C);
      border: 1px solid color-mix(in srgb, var(--tc, #888) 22%, transparent);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      cursor: pointer;
      transition: opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .explorar-result-item:active { opacity: 0.8; }

    .explorar-result-icon {
      width: 36px; height: 36px;
      border-radius: 9px;
      background: color-mix(in srgb, var(--tc, #888) 28%, #111);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; flex-shrink: 0;
    }
    .explorar-result-info { flex: 1; min-width: 0; }
    .explorar-result-nome { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .explorar-result-tipo { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
    .explorar-result-arrow { color: var(--text-disabled); font-size: 18px; flex-shrink: 0; }

    /* ── Empty state ─────────────────────────── */
    .explorar-empty {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 56px 24px;
      color: var(--text-disabled);
      text-align: center;
    }
    .explorar-empty.visible { display: flex; }
    .explorar-empty-icon { font-size: 36px; opacity: 0.5; }
    .explorar-empty p { font-size: 14px; line-height: 1.6; }

    /* ═══════════════════════════════════════════
       TELA DE TEMA — TOPBAR + LAYOUT
    ═══════════════════════════════════════════ */

    /* ── Topbar global ─────────────────────── */
    #global-topbar {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0;
      height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
      z-index: 50;
      background: rgba(13,13,13,0.98);
      border-bottom: 1px solid var(--border);
      justify-content: center;
      padding-top: env(safe-area-inset-top, 0px);
    }

    .topbar-inner {
      width: 100%;
      max-width: var(--content-max);
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
    }

    body.has-topbar #global-topbar { display: flex; }

    .topbar-nav-group {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .topbar-btn {
      width: 34px;
      height: 34px;
      border-radius: var(--radius-sm);
      background: var(--surface);
      border: 1px solid var(--border-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s, opacity 0.2s;
      -webkit-tap-highlight-color: transparent;
    }

    .topbar-btn:active { background: var(--surface-3); }
    .topbar-btn:disabled { opacity: 0.28; cursor: default; }

    .topbar-btn svg { stroke: var(--text-primary); }

    .topbar-search {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      padding: 7px 12px;
      transition: border-color 0.2s;
    }

    .topbar-search:focus-within {
      border-color: rgba(212,175,55,0.35);
    }

    .topbar-search svg { stroke: var(--text-disabled); flex-shrink: 0; }

    .topbar-search input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 16px;
    }

    .topbar-search input::placeholder { color: var(--text-disabled); }

    /* Telas de tema não usam padding topo — topbar cuida disso */
    .screen-tema {
      padding: 0;
      gap: 0;
      align-items: center;
    }

    /* Topbar sticky */
    .tema-topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      width: 100%;
      background: rgba(13,13,13,0.98);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
    }

    .topbar-btn {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: var(--surface);
      border: 1px solid var(--border-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .topbar-btn:active { background: var(--surface-3); }

    .topbar-btn svg {
      stroke: var(--text-primary);
    }

    .topbar-spacer { flex: 1; }

    /* Conteúdo da tela de tema — largura controlada */
    .tema-body {
      width: 100%;
      max-width: var(--content-max);
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 20px 16px 100px;
      box-sizing: border-box;
    }

    /* Header do tema */
    .tema-label-top {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--tc, var(--gold));
      margin-bottom: 4px;
    }

    .tema-descricao {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-top: 6px;
      margin-bottom: 20px;
    }

    /* Tipos de dica — cores por categoria */
    .dica-tag { border-radius: var(--radius-pill); padding: 3px 10px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
    .dica-teoria      { background: rgba(122,184,255,0.12); color: var(--info); border: 1px solid rgba(122,184,255,0.2); }
    .dica-pratica     { background: rgba(212,175,55,0.12);  color: var(--gold); border: 1px solid rgba(212,175,55,0.2); }
    .dica-aplicacao   { background: rgba(74,222,128,0.12);  color: var(--success); border: 1px solid rgba(74,222,128,0.2); }
    .dica-curiosidade { background: rgba(167,139,250,0.12); color: var(--tc-4); border: 1px solid rgba(167,139,250,0.2); }
    .dica-tecnica     { background: rgba(251,146,60,0.12);  color: var(--tc-5); border: 1px solid rgba(251,146,60,0.2); }
    .dica-harmonia    { background: rgba(34,211,238,0.12);  color: var(--tc-6); border: 1px solid rgba(34,211,238,0.2); }
    .dica-composicao  { background: rgba(244,114,182,0.12); color: var(--tc-8); border: 1px solid rgba(244,114,182,0.2); }
    .dica-performance { background: rgba(248,113,113,0.12); color: var(--error); border: 1px solid rgba(248,113,113,0.2); }

    .tema-prog-geral { margin-bottom: 32px; }

    .tema-titulo-grande {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      letter-spacing: 0;
      margin-bottom: 0;
    }

    /* Card Fundamento */
    .fundamento-card {
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-lg);
      padding: 16px;
      margin-bottom: 24px;
      position: relative;
    }

    .fund-timer-wrap { display: none; }

    .fund-timer-fill { display: none; }

    .fundamento-topo {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 10px;
    }

    .fundamento-icone {
      font-size: 15px;
    }

    .fundamento-tag {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--tc, var(--gold));
    }

    .fundamento-texto {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      min-height: 44px;
    }

    .fundamento-texto strong {
      color: var(--tc, var(--gold));
      font-weight: 700;
    }

    .fundamento-rodape {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14px;
    }

    .fundamento-dots {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .fdot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--border-strong);
      transition: background 0.2s, width 0.2s;
    }

    .fdot.ativo {
      background: var(--tc, var(--gold));
      width: 14px;
      border-radius: 3px;
    }

    .fundamento-paginacao {
      font-size: 12px;
      color: var(--text-disabled);
      font-family: var(--font-mono);
    }

    .fundamento-navs {
      display: flex;
      gap: 6px;
    }

    .fnav-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--surface-3);
      border: 1px solid var(--border-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-secondary);
      transition: background 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .fnav-btn:active { background: var(--surface-3); color: var(--text-primary); }
    .fnav-btn:disabled { opacity: 0.3; cursor: default; }

    /* Seções de conteúdo */
    .tema-secao {
      margin-bottom: 10px;
    }

    /* ══ Grid 2×2 — conteúdos do tema ══ */
    .tc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }
    .tc-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px 14px 14px;
      cursor: pointer;
      overflow: hidden;
      transition: border-color .15s;
    }
    .tc-tile:active { opacity: .85; }
    .tc-tile-top {
      display: flex; align-items: flex-start;
      justify-content: space-between; margin-bottom: 14px;
    }
    .tc-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: color-mix(in srgb, var(--tc, var(--gold)) 12%, transparent);
      color: var(--tc, var(--gold));
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .tc-badge-empty {
      width: 20px; height: 20px; border-radius: 50%;
      border: 1.5px solid var(--border-strong); flex-shrink: 0;
    }
    .tc-badge-done {
      width: 20px; height: 20px; border-radius: 50%;
      background: transparent; border: 1.5px solid var(--border-strong);
      color: var(--text-disabled); display: flex; align-items: center;
      justify-content: center; flex-shrink: 0;
    }
    .tc-nome { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; line-height: 1.2; }
    .tc-count { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
    .tc-prog { height: 2px; background: var(--surface-3); border-radius: 1px; margin-top: 14px; }
    .tc-prog-fill { height: 100%; border-radius: 1px; background: var(--tc, var(--gold)); transition: width .4s ease; }

    .secao-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .secao-titulo {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .secao-contagem {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-disabled);
    }

    /* Barra de progresso de ferramentas */
    .secao-progresso {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .secao-prog-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .secao-prog-track {
      flex: 1;
      height: 4px;
      background: var(--surface-3);
      border-radius: 2px;
      overflow: hidden;
    }

    .secao-prog-fill {
      height: 100%;
      background: rgba(255,255,255,0.45);
      border-radius: 2px;
      transition: width 0.4s ease;
    }

    .secao-prog-num {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-secondary);
      font-family: var(--font-mono);
      white-space: nowrap;
    }

    /* Card de conteúdo (treino / ferramenta / quiz) */
    .conteudo-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: border-color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .conteudo-card:last-child { margin-bottom: 0; }

    .conteudo-card:active { opacity: 0.8; }

    .conteudo-card:hover {
      border-color: color-mix(in srgb, var(--tc, var(--gold)) 35%, transparent);
    }

    /* ── Estado concluído ───────────────────────── */
    .cc-icon-wrap { position: relative; flex-shrink: 0; }

    .cc-check {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #4ade80;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cc-check svg { width: 7px; height: 7px; }

    .cc-btn-done {
      background: color-mix(in srgb, var(--tc, var(--gold)) 10%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--tc, var(--gold)) 28%, transparent) !important;
      color: var(--tc, var(--gold)) !important;
      font-size: 11px !important;
    }

    .cc-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--tc, var(--gold)) 18%, #111);
      color: var(--tc, var(--gold));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .cc-info {
      flex: 1;
      min-width: 0;
    }

    .cc-titulo {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.2;
    }

    .cc-check svg { width: 7px; height: 7px; }

    .cc-tags {
      font-size: 11px;
      color: var(--text-disabled);
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cc-btn {
      background: color-mix(in srgb, var(--tc, var(--gold)) 15%, var(--surface-3));
      border: 1px solid color-mix(in srgb, var(--tc, var(--gold)) 30%, transparent);
      border-radius: var(--radius-pill);
      padding: 7px 14px;
      font-size: 13px;
      font-weight: 700;
      color: var(--tc, var(--gold));
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .cc-btn:active {
      background: color-mix(in srgb, var(--tc, var(--gold)) 18%, var(--surface-3));
      border-color: color-mix(in srgb, var(--tc, var(--gold)) 45%, transparent);
    }

    .cc-done-check {
      font-size: 11px;
      color: var(--success);
      font-weight: 700;
    }

    /* ═══════════════════════════════════════════
       TELA: TREINO
    ═══════════════════════════════════════════ */
    #screen-treino {
      padding: 0;
      gap: 0;
      align-items: center;
    }

    .treino-body {
      width: 100%;
      max-width: var(--content-max);
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 20px 16px 100px;
      box-sizing: border-box;
    }

    /* Chips de meta — apenas metadados (dificuldade + BPM metrônomo) */
    .treino-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 18px;
    }

    .treino-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 11px;
      border-radius: 10px;
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* Dificuldade neutra (não rouba destaque do Ouro Tônica) */
    .treino-chip-dif {
      background: rgba(245,241,232,0.06);
      color: var(--text-secondary);
      border: 1px solid var(--border-strong);
    }
    .treino-chip-dif-nivel {
      display: inline-flex;
      gap: 2px;
      margin-right: 2px;
    }
    .treino-chip-dif-nivel i {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--text-disabled);
    }
    .treino-chip-dif-nivel i.on { background: var(--text-primary); }

    /* BPM — botão de metrônomo (neutro com ícone ouro) */
    .treino-chip-bpm {
      background: rgba(245,241,232,0.04);
      color: var(--text-primary);
      border: 1px solid var(--border-strong);
      cursor: pointer;
      transition: background 0.15s;
    }
    .treino-chip-bpm svg { color: var(--gold); }
    .treino-chip-bpm:active { background: rgba(245,241,232,0.08); }
    .treino-chip-bpm.tocando {
      background: rgba(212,175,55,0.12);
      border-color: rgba(212,175,55,0.35);
      animation: bpm-pulse 0.15s ease;
    }
    @keyframes bpm-pulse {
      0%   { transform: scale(1); }
      50%  { transform: scale(1.06); }
      100% { transform: scale(1); }
    }

    /* Tempo estimado — mesmo padrão neutro (borda cinza, ícone dourado) */
    .treino-chip-tempo {
      background: rgba(245,241,232,0.04);
      color: var(--text-primary);
      border: 1px solid var(--border-strong);
    }
    .treino-chip-tempo svg { color: var(--gold); }

    /* Botões secundários (Salvar + Adicionar à revisão) */
    .treino-acoes-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    /* Chip PDF — mesmo padrão do BPM (borda cinza, ícone dourado) */
    .treino-chip-pdf {
      background: rgba(245,241,232,0.04);
      color: var(--text-primary);
      border: 1px solid var(--border-strong);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s;
    }
    .treino-chip-pdf svg { color: var(--gold); }
    .treino-chip-pdf:active { background: rgba(245,241,232,0.08); }
    .treino-revisao-slot {
      display: flex;
    }
    .treino-revisao-slot > * {
      flex: 1;
    }
    .treino-btn-sec {
      width: 100%;
      padding: 11px 10px;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: nowrap;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border-strong);
    }
    .treino-btn-sec svg { stroke: var(--text-disabled); }
    .treino-btn-sec:active { opacity: 0.75; }
    /* Salvar — ativa em vermelho (coração) quando favoritado, igual à tela de aulas */
    .treino-btn-sec-fav.favoritado,
    .treino-btn-fav.favoritado {
      background: rgba(239,68,68,0.12);
      border-color: rgba(239,68,68,0.20);
      color: #f87171;
    }
    .treino-btn-sec-fav.favoritado svg,
    .treino-btn-fav.favoritado svg {
      fill: #f87171;
      stroke: none;
    }

    /* Dica do professor — sem emoji, label com SVG inline */
    .treino-dica {
      padding: 14px 16px;
      background: rgba(212,175,55,0.10);
      border-left: 3px solid var(--gold);
      border-radius: var(--radius-md);
      margin-bottom: 24px;
    }
    .treino-dica-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 8px;
    }
    .treino-dica-label svg { color: var(--gold); }

    /* Modal metrônomo */
    .metro-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      z-index: 300;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    }
    .metro-overlay.open { display: flex; animation: modalIn 0.25s ease; }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .metro-modal {
      width: 100%;
      max-width: var(--content-max);
      background: var(--surface);
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      border: 1px solid var(--border-strong);
      border-bottom: none;
      padding: 24px 24px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    .metro-handle {
      width: 36px;
      height: 4px;
      border-radius: 2px;
      background: var(--border-strong);
      margin-bottom: -12px;
    }
    .metro-bpm-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .metro-bpm-numero {
      font-family: var(--font-display);
      font-size: 72px;
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1;
      transition: color 0.1s, transform 0.1s;
    }
    /* Beat: pulsa em ouro tônica */
    .metro-bpm-numero.beat {
      color: var(--gold);
      transform: scale(1.04);
    }
    .metro-bpm-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-disabled);
    }
    .metro-controles {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .metro-btn-bpm {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(245,241,232,0.04);
      border: 1px solid var(--border-strong);
      color: var(--text-primary);
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font-mono);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .metro-btn-bpm:active {
      background: rgba(212,175,55,0.08);
      border-color: rgba(212,175,55,0.30);
    }
    /* Play: ouro pleno como CTA principal (mesma linguagem do video-hero-play) */
    .metro-btn-play {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--gold);
      border: none;
      color: #0D0D0D;
      font-size: 28px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.1s, background 0.15s;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 6px 18px rgba(212,175,55,0.30);
    }
    .metro-btn-play:active { transform: scale(0.94); }
    /* Tocando: vira "stop" em vermelho discreto (mesma família do fav ativo) */
    .metro-btn-play.tocando {
      background: #f87171;
      color: #0D0D0D;
      box-shadow: 0 6px 18px rgba(248,113,113,0.30);
    }
    .metro-tempos {
      display: flex;
      gap: 8px;
    }
    .metro-tempo-btn {
      padding: 6px 14px;
      border-radius: 99px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      border: 1px solid var(--border-strong);
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .metro-tempo-btn:active { opacity: 0.75; }
    /* Preset ativo: ouro discreto */
    .metro-tempo-btn.ativo {
      background: rgba(212,175,55,0.10);
      border-color: rgba(212,175,55,0.35);
      color: var(--gold);
    }
    .metro-fechar {
      background: none;
      border: none;
      color: var(--text-disabled);
      font-family: var(--font-body);
      font-size: 13px;
      cursor: pointer;
      padding: 4px 12px;
      transition: color 0.15s;
    }
    .metro-fechar:active { color: var(--text-secondary); }

    /* Divider entre seções do treino (legado — pouco usado agora) */
    .treino-divider {
      height: 1px;
      background: var(--border);
      margin: 16px 0;
    }

    /* Vídeo — mantém compatibilidade mas não é mais usado inline */
    .treino-meta-video { display: none; }

    /* Objetivo com eyebrow label "OBJETIVO" + texto regular */
    .treino-objetivo {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 16px;
    }
    .treino-objetivo-icon {
      flex-shrink: 0;
      color: var(--gold);
      margin-top: 2px;
    }
    .treino-objetivo-texto {
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.5;
      color: var(--text-secondary);
      margin: 0;
    }

    /* Linha de info discreta: dificuldade (dots) · tempo / acordes */
    .treino-info-line {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 18px;
    }
    .treino-info-dots {
      display: inline-flex;
      gap: 3px;
    }
    .treino-info-dots i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--text-disabled);
    }
    .treino-info-dots i.on { background: var(--text-primary); }

    /* Ferramentas de prática — metrônomo + PDF, centralizadas, abaixo do vídeo */
    .treino-tools {
      display: flex;
      justify-content: center;
      gap: 9px;
      margin: 14px 0 22px;
    }
    .treino-tool {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px 6px 7px;
      border-radius: 11px;
      background: rgba(245,241,232,0.045);
      border: 1px solid var(--border-strong);
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    .treino-tool:active { background: rgba(245,241,232,0.09); }
    .treino-tool-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      background: rgba(212,175,55,0.14);
      color: var(--gold);
      flex-shrink: 0;
    }
    .treino-tool b {
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--text-primary);
    }
    .treino-tool-bpm.tocando {
      background: rgba(212,175,55,0.12);
      border-color: rgba(212,175,55,0.35);
      animation: bpm-pulse 0.15s ease;
    }

    /* Vídeo-hero — thumbnail real clicável → player inline */
    .treino-video-hero {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 22px;
      background-color: #0d0d0d;
      background-size: cover;
      background-position: center;
      border: 1px solid var(--border-strong);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    /* Overlay escuro pra dar contraste com o play */
    .treino-video-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.50) 100%);
      transition: opacity 0.2s;
    }
    .treino-video-hero-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      transition: transform 0.15s;
      z-index: 1;
    }
    .treino-video-hero-play svg {
      color: #0D0D0D;
      margin-left: 3px;
    }
    .treino-video-hero:active .treino-video-hero-play { transform: translate(-50%, -50%) scale(0.94); }
    .treino-video-hero-label {
      position: absolute;
      bottom: 12px;
      left: 14px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: rgba(245,241,232,0.85);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background: rgba(0,0,0,0.6);
      padding: 4px 8px;
      border-radius: 4px;
      z-index: 1;
    }
    /* Estado tocando: iframe ocupa todo o hero, overlay/play/label somem */
    .treino-video-hero.tocando { cursor: default; background-image: none !important; }
    .treino-video-hero.tocando .treino-video-hero-overlay,
    .treino-video-hero.tocando .treino-video-hero-play,
    .treino-video-hero.tocando .treino-video-hero-label { display: none; }
    .treino-video-hero iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .treino-passos-titulo {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-disabled);
      margin-bottom: 12px;
    }

    .treino-passos {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 22px;
    }

    .treino-passo {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      background: rgba(245,241,232,0.03);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
    }

    .treino-passo-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(212,175,55,0.10);
      color: var(--gold);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 1px solid rgba(212,175,55,0.18);
    }

    .treino-passo-texto {
      font-size: 14.5px;
      color: var(--text-primary);
      line-height: 1.45;
      padding-top: 3px;
      flex: 1;
    }

    .treino-dica-texto {
      font-size: 14px;
      color: var(--text-primary);
      line-height: 1.5;
      font-style: italic;
    }

    /* Ações do treino — Concluir (primário) + linha com Salvar + Revisão */
    .treino-acoes {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 4px;
    }

    /* Botão Concluir — primário em ouro */
    .treino-btn-concluido {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-md);
      border: none;
      background: var(--gold);
      color: #0D0D0D;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.01em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: opacity 0.15s, background 0.2s, color 0.2s, border-color 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .treino-btn-concluido:active { opacity: 0.85; }
    /* Concluído: vira pílula verde discreta */
    .treino-btn-concluido.concluido {
      background: rgba(107,177,127,0.12);
      color: #6BB17F;
      border: 1px solid rgba(107,177,127,0.30);
    }

    /* Modal de vídeo */
    .video-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.88);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .video-modal-overlay.open {
      display: flex;
      animation: videoModalIn 0.2s ease;
    }
    @keyframes videoModalIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .video-modal {
      width: 100%;
      max-width: 640px;
      background: #111;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
    }
    .video-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .video-modal-titulo {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }
    .video-modal-close {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: rgba(255,255,255,0.08);
      border: none; cursor: pointer; color: #fff;
      font-size: 18px; display: flex; align-items: center; justify-content: center;
    }
    .video-modal-iframe-wrap {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
    }
    .video-modal-iframe-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      border: none;
    }

    /* ═══════════════════════════════════════════
       TELA: QUIZ
    ═══════════════════════════════════════════ */
    #screen-quiz {
      padding: 0;
      gap: 0;
      align-items: center;
    }

    /* ═══════════════════════════════════════════
       TELAS: PROGRESSÕES — coleção + estudo
    ═══════════════════════════════════════════ */

    /* ── Tela 2: cards da coleção ── */
    .colecao-prog-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: border-color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .colecao-prog-card:active { opacity: 0.8; }
    .colecao-prog-card:hover { border-color: rgba(212,175,55,0.35); }

    .cpc-num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      color: var(--tc, #D4AF37);
      background: color-mix(in srgb, var(--tc, #D4AF37) 12%, transparent);
      border-radius: 8px;
    }
    .cpc-info { flex: 1; min-width: 0; }
    .cpc-nome {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cpc-meta {
      font-size: 11px;
      color: var(--text-disabled);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cpc-arr {
      font-size: 18px;
      color: var(--text-disabled);
      flex-shrink: 0;
    }
    .cpc-check {
      width: 12px; height: 12px; border-radius: 50%;
      background: #4ade80; display: flex;
      align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cpc-check svg { width: 7px; height: 7px; }

    /* ── Tela 3: estudo ── */
    .ep-screen-wrap {
      width: 100%;
      max-width: var(--content-max);
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .ep-screen-wrap .tema-body {
      flex: 1;
    }

    .ep-secao-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .07em;
      color: var(--text-disabled);
      margin-bottom: 8px;
    }

    .ep-nota-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      margin-bottom: 20px;
    }
    .ep-nota-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm, 8px);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 700;
      padding: 7px 4px;
      text-align: center;
      cursor: pointer;
      transition: all 0.12s;
      -webkit-tap-highlight-color: transparent;
      font-family: var(--font-main);
    }
    .ep-nota-btn:active { opacity: 0.75; }
    .ep-nota-btn.ativa {
      background: rgba(212,175,55,0.18);
      border-color: #D4AF37;
      color: #D4AF37;
    }

    .ep-acordes-lista {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 16px;
    }
    .ep-seta {
      text-align: center;
      font-size: 16px;
      color: var(--border-strong, #333);
      padding: 4px 0;
      line-height: 1;
    }

    .ep-acorde-bloco {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px 16px;
    }
    .ep-acorde-top {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 10px;
    }
    .ep-numeral {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      color: var(--text-disabled);
    }
    .ep-cifra {
      font-size: 22px;
      font-weight: 800;
      color: var(--text-primary);
      font-family: var(--font-display, var(--font-main));
    }
    .ep-funcao-badge {
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .06em;
      border-radius: 5px;
      padding: 3px 7px;
      margin-left: auto;
    }

    .ep-teclado-wrap {
      overflow-x: auto;
      scrollbar-width: none;
      margin-bottom: 8px;
    }
    .ep-teclado-wrap::-webkit-scrollbar { display: none; }
    .ep-teclado {
      position: relative;
      height: 52px;
      display: inline-block;
      flex-shrink: 0;
    }

    .ep-notas-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ep-notas {
      font-size: 11px;
      color: #4dd6c8;
      letter-spacing: .03em;
      flex: 1;
    }
    .ep-btn-entender {
      font-size: 10px;
      font-weight: 700;
      color: var(--gold);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.2);
      border-radius: 6px;
      padding: 4px 10px;
      cursor: pointer;
      flex-shrink: 0;
      letter-spacing: .03em;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s, border-color 0.15s;
    }
    .ep-btn-entender:active { background: rgba(212,175,55,0.15); border-color: rgba(212,175,55,0.4); }
    .ep-explicacao {
      display: none;
      margin-top: 10px;
      padding: 10px 12px;
      background: rgba(212,175,55,0.04);
      border-left: 3px solid rgba(212,175,55,0.3);
      border-radius: 0 8px 8px 0;
      font-size: 12px;
      color: #ccc;
      line-height: 1.5;
      white-space: pre-line;
    }
    .ep-explicacao.active { display: block; }

    /* ── Playback bar ── */
    .ep-playback-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 10px 16px;
      margin-bottom: 16px;
    }
    .ep-play-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      background: transparent;
      color: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .ep-play-btn:active { opacity: 0.75; }
    .ep-play-btn.tocando {
      background: var(--gold);
      color: #0D0D0D;
    }
    .ep-bpm-ctrl {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ep-bpm-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-secondary);
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }
    .ep-bpm-btn:active { opacity: 0.7; }
    .ep-bpm-val {
      font-size: 18px;
      font-weight: 800;
      color: var(--text-primary);
      min-width: 32px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .ep-bpm-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-disabled);
      letter-spacing: .05em;
    }
    .ep-loop-btn {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-disabled);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0.4;
      transition: opacity 0.15s, color 0.15s, border-color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .ep-loop-btn:active { opacity: 0.6; }
    .ep-loop-btn.ativo {
      opacity: 1;
      color: var(--gold);
      border-color: rgba(212,175,55,0.4);
    }

    /* ── Acorde tocando (highlight) ── */
    .ep-acorde-bloco {
      cursor: pointer;
      transition: box-shadow 0.2s, border-color 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .ep-acorde-bloco:active { opacity: 0.85; }
    .ep-acorde-tocando {
      border-color: var(--gold) !important;
      box-shadow: 0 0 12px rgba(212,175,55,0.35), inset 0 0 0 1px rgba(212,175,55,0.15);
    }

    /* ── v3: chip "SELETOR DE TOM: B ▾" (abre bottom-sheet) ── */
    .ep-tom-chip {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(212,175,55,0.06);
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 10px;
      color: var(--gold);
      font-family: var(--font-mono, var(--font-main));
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.06em;
      cursor: pointer;
      text-transform: uppercase;
      -webkit-tap-highlight-color: transparent;
    }
    .ep-tom-chip:active { opacity: 0.75; }
    .ep-tom-chip-label { font-size: 11px; letter-spacing: 0.16em; opacity: 0.85; }
    .ep-tom-chip-val   { font-size: 14px; }

    /* BPM + seletor de tom lado a lado — BPM compacto, tom flexível */
    .ep-treino-row {
      display: flex;
      align-items: stretch;
      gap: 9px;
      margin: 14px 0 22px;
    }
    .ep-treino-row .treino-tool-bpm { flex-shrink: 0; }
    .ep-treino-row .ep-tom-chip { flex: 1; }

    /* ── v3: bottom-sheet do seletor de tom ── */
    .ep-tom-sheet-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 120;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s;
    }
    .ep-tom-sheet-overlay.active { opacity: 1; pointer-events: auto; }
    .ep-tom-sheet {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-radius: 18px 18px 0 0;
      padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
      z-index: 121;
      transform: translateY(110%);
      transition: transform 0.22s cubic-bezier(.4,0,.2,1);
      max-width: var(--content-max);
      margin: 0 auto;
    }
    .ep-tom-sheet.active { transform: translateY(0); }
    .ep-tom-sheet-handle {
      width: 40px; height: 4px;
      background: rgba(255,255,255,0.18);
      border-radius: 2px;
      margin: 0 auto 14px;
    }
    .ep-tom-sheet-title {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      color: var(--text-disabled);
      text-transform: uppercase;
      margin-bottom: 12px;
      text-align: center;
    }

    /* ── v3: vídeo hero (estilo Treinos) ── */
    .ep-video-hero {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 18px;
      background: #1a1a1a;
      border: 1px solid var(--border);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .ep-video-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: rgba(212,175,55,0.06);
    }
    .ep-video-hero:active { opacity: 0.9; }
    .ep-video-hero-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 60px; height: 60px;
      border-radius: 50%;
      background: var(--gold);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      color: #0D0D0D;
    }
    .ep-video-hero-label {
      position: absolute;
      bottom: 12px; left: 14px;
      font-family: var(--font-mono, var(--font-main));
      font-size: 10.5px;
      color: var(--text-secondary);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: rgba(0,0,0,0.6);
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: 700;
    }
    /* Estado tocando: iframe ocupa todo o hero, play/label/overlay decorativo somem */
    .ep-video-hero.tocando { cursor: default; background-image: none !important; }
    .ep-video-hero.tocando::before,
    .ep-video-hero.tocando .ep-video-hero-play,
    .ep-video-hero.tocando .ep-video-hero-label { display: none; }
    .ep-video-hero iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .ep-footer {
      width: 100%;
      max-width: var(--content-max);
      padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ═══════════════════════════════════════════
       QUIZ · Focus Mode (S152)
       Modo imersivo: topbar e nav escondidos via body.quiz-fullscreen
    ═══════════════════════════════════════════ */
    body.quiz-fullscreen #global-topbar,
    body.quiz-fullscreen #main-nav { display: none !important; }
    body.quiz-fullscreen .screen.active { padding-top: 0 !important; padding-bottom: 0 !important; }

    .quiz-body {
      width: 100%;
      max-width: var(--content-max);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      min-height: 100vh;
      padding: 0;
    }

    .quiz-body-inner {
      display: flex;
      flex-direction: column;
      padding: max(14px, env(safe-area-inset-top, 14px)) 0 80px;
      min-height: 100vh;
      position: relative;
      transition: padding-bottom 0.3s;
    }
    /* Quando o sheet de explicação está aberto, deixa espaço de scroll
       suficiente pra opção correta subir acima do sheet */
    .quiz-body-inner:has(.quiz-sheet.visivel) {
      padding-bottom: 60vh;
    }

    /* Header: voltar + sair */
    .quiz-header-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      margin-bottom: 6px;
    }

    .quiz-iconbtn {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-primary);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s;
    }
    .quiz-iconbtn:hover,
    .quiz-iconbtn:active { background: rgba(255,255,255,0.08); }

    /* Tema + segmentos */
    .quiz-tema-block { padding: 10px 22px 18px; }

    .quiz-tema-label {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 2px;
      font-weight: 700;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .quiz-segs {
      display: flex;
      gap: 4px;
      height: 5px;
    }
    .quiz-seg {
      flex: 1;
      border-radius: 99px;
      background: rgba(245,241,232,0.10);
      transition: background 0.3s ease;
    }
    .quiz-seg.cheio { background: var(--gold); }
    .quiz-seg.atual { background: rgba(212,175,55,0.55); }

    /* Pergunta — protagonista visual */
    .quiz-pergunta {
      padding: 30px 22px 22px;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 25px;
      line-height: 1.25;
      color: var(--text-primary);
    }

    /* Opções */
    .quiz-opcoes {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0 18px;
    }

    .quiz-opcao {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--radius-md);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 15px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, opacity 0.2s;
      -webkit-tap-highlight-color: transparent;
      text-align: left;
      width: 100%;
    }
    .quiz-opcao:hover { background: rgba(255,255,255,0.05); }
    .quiz-opcao:active { opacity: 0.85; }

    .quiz-opcao-letra {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 18px;
      color: var(--text-secondary);
      width: 22px;
      text-align: center;
      flex-shrink: 0;
      transition: color 0.2s;
    }

    .quiz-opcao-texto {
      flex: 1;
      font-weight: 500;
      line-height: 1.4;
      transition: color 0.2s;
    }

    .quiz-opcao-mark {
      display: flex;
      align-items: center;
      color: var(--success);
      flex-shrink: 0;
    }

    .quiz-opcao.correta {
      background: rgba(74,222,128,0.08);
      border-color: rgba(74,222,128,0.35);
    }
    .quiz-opcao.correta .quiz-opcao-letra { color: var(--success); }

    .quiz-opcao.errada {
      background: rgba(239,68,68,0.08);
      border-color: rgba(239,68,68,0.30);
    }
    .quiz-opcao.errada .quiz-opcao-letra { color: var(--error); }

    .quiz-opcao.dim { opacity: 0.35; }

    .quiz-opcao.disabled,
    .quiz-opcao.respondido { cursor: default; pointer-events: none; }

    /* Bottom sheet: explicação + próxima */
    .quiz-sheet {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      background: #141414;
      border-top: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px 24px 0 0;
      padding: 14px 22px calc(24px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
      transform: translateY(100%);
      transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 50;
      max-width: var(--content-max);
      margin: 0 auto;
      visibility: hidden;
      pointer-events: none;
    }
    .quiz-sheet.visivel {
      transform: translateY(0);
      visibility: visible;
      pointer-events: auto;
    }

    .quiz-sheet-handle {
      width: 42px;
      height: 4px;
      border-radius: 99px;
      background: rgba(255,255,255,0.18);
      margin: 0 auto 14px;
    }

    .quiz-sheet-title {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 2px;
      font-weight: 700;
      color: var(--bronze, #A89020);
      margin-bottom: 8px;
      transition: color 0.2s;
    }
    .quiz-sheet.correto   .quiz-sheet-title { color: var(--success); }
    .quiz-sheet.incorreto .quiz-sheet-title { color: var(--error); }

    .quiz-sheet-body {
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-primary);
      margin-bottom: 18px;
    }

    /* Botão primário (próxima / tentar novamente) */
    .quiz-btn-prox,
    .quiz-btn-prim {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-md);
      border: none;
      background: var(--gold);
      color: #000;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 0.15s;
    }
    .quiz-btn-prox:active,
    .quiz-btn-prim:active { opacity: 0.85; }

    /* Placar final */
    .quiz-placar {
      display: none;
      flex-direction: column;
      align-items: center;
      padding: 22px 22px 28px;
      text-align: center;
      flex: 1;
    }
    .quiz-placar.visivel { display: flex; }

    .quiz-placar-ic {
      width: 74px; height: 74px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
    }

    .quiz-placar-msg {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 22px;
      color: var(--text-primary);
      margin-bottom: 18px;
    }

    .quiz-placar-score {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 60px;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 6px;
    }
    .quiz-placar-total {
      font-size: 24px;
      color: var(--text-disabled);
      font-weight: 500;
    }

    .quiz-placar-sub {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 28px;
    }

    .quiz-placar-acts {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: auto;
    }

    /* Botão secundário (registrar revisão) — herda do treino-btn-sec via JS */
    .quiz-placar .treino-btn-sec,
    .quiz-placar .treino-btn-sec-revisao {
      width: 100% !important;
      padding: 13px !important;
      border-radius: var(--radius-md) !important;
      font-family: var(--font-body) !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      gap: 8px !important;
    }
    .quiz-placar .treino-btn-sec svg,
    .quiz-placar .treino-btn-sec-revisao svg {
      width: 14px; height: 14px;
    }

    /* Terciários: Salvar + Voltar lado a lado, ghost */
    .quiz-placar-ter {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .quiz-btn-ter {
      flex: 1;
      padding: 12px;
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      border-radius: 10px;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s, color 0.15s;
    }
    .quiz-btn-ter:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
    .quiz-btn-ter.ativo { color: var(--gold); }

    /* Remove foco padrão e adiciona ring sutil */
    .quiz-placar button:focus,
    .quiz-placar button:focus-visible,
    .quiz-opcao:focus,
    .quiz-opcao:focus-visible { outline: none; }
    .quiz-btn-prim:focus-visible,
    .quiz-btn-prox:focus-visible,
    .quiz-placar .treino-btn-sec:focus-visible,
    .quiz-placar .treino-btn-sec-revisao:focus-visible {
      box-shadow: 0 0 0 2px rgba(212,175,55,0.35);
    }

    #quiz-revisao-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ═══════════════════════════════════════════
       TELA: FAVORITOS (placeholder)
    ═══════════════════════════════════════════ */
    /* ═══════════════════════════════════════════
       TELA: FAVORITOS
    ═══════════════════════════════════════════ */
    #screen-favoritos {
      padding: 0;
      gap: 0;
      align-items: center;
    }

    /* ═══════════════════════════════════════════
       TELA: MEUS ESTUDOS — sub-tabs
    ═══════════════════════════════════════════ */
    .me-header {
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 14px var(--side-pad) 12px;
      box-sizing: border-box;
    }
    .me-eyebrow {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-disabled);
      margin-bottom: 4px;
    }
    .me-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      font-family: var(--font-display);
    }
    .me-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 0 var(--side-pad) 12px;
      box-sizing: border-box;
    }
    .me-tab {
      padding: 8px 20px;
      border-radius: 100px;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid var(--border);
      background: none;
      color: var(--text-disabled);
      transition: background 0.18s, color 0.18s, border-color 0.18s;
      -webkit-tap-highlight-color: transparent;
    }
    .me-tab.active {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
    }
    .me-panel {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* Badge na nav com estado atrasado */
    .nav-badge.atrasado {
      background: var(--bronze, #A89020);
    }

    /* V2-A · Controles fixos do topo (search + chips + sort) */
    .fav-search {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 0 var(--side-pad) 10px;
      box-sizing: border-box;
    }
    .fav-search > svg {
      flex-shrink: 0;
      color: var(--text-disabled);
    }
    .fav-search input {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 14px;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 14px;
      outline: none;
      transition: border-color .15s;
    }
    .fav-search input::placeholder { color: var(--text-disabled); }
    .fav-search input:focus { border-color: var(--gold); }
    /* Reposiciona ícone dentro do input com layout overlay */
    .fav-search {
      position: relative;
    }
    .fav-search > svg {
      position: absolute;
      left: calc(var(--side-pad) + 14px);
      top: 50%;
      transform: translateY(-50%);
      transform-origin: center;
      pointer-events: none;
      z-index: 1;
    }
    .fav-search input { padding-left: 38px; padding-right: 36px; }
    .fav-search-clear {
      position: absolute;
      right: calc(var(--side-pad) + 8px);
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: var(--text-disabled);
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .fav-search-clear:active { background: var(--surface-2, #1A1A1A); }

    .fav-chips {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 0 var(--side-pad) 12px;
      box-sizing: border-box;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .fav-chips::-webkit-scrollbar { display: none; }
    .fav-chip {
      padding: 6px 12px;
      border-radius: 100px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-secondary);
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      transition: background .15s, color .15s, border-color .15s;
    }
    .fav-chip:active { opacity: 0.7; }
    .fav-chip.active {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
    }

    .fav-toggle {
      display: flex;
      gap: 4px;
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 0 var(--side-pad) 10px;
      box-sizing: border-box;
    }
    .fav-toggle-btn {
      padding: 6px 14px;
      font-family: var(--font-display);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-disabled);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: color .15s, border-color .15s;
    }
    .fav-toggle-btn:active { opacity: 0.7; }
    .fav-toggle-btn.active {
      color: var(--gold);
      border-bottom-color: var(--gold);
    }

    /* V2-A · Container da lista (scroll) */
    .fav-scroll {
      flex: 1;
      overflow-y: auto;
      scrollbar-width: none;
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 0 var(--side-pad) 32px;
      box-sizing: border-box;
    }
    .fav-scroll::-webkit-scrollbar { display: none; }
    .fav-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .fav-list-sec-title {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 14px 4px 6px;
    }
    .fav-list-sec-title:first-child { padding-top: 4px; }

    /* Estado vazio */
    .fav-empty {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      padding-top: 8px;
    }
    .fav-empty-hint {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: rgba(212,175,55,0.07);
      border: 1px solid var(--gold-border);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      width: 100%;
      box-sizing: border-box;
    }
    .fav-empty-hint-icon {
      flex-shrink: 0;
      color: var(--gold);
      margin-top: 1px;
      display: flex;
    }
    .fav-empty-hint-text {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.65;
      font-weight: 500;
    }
    .fav-empty-hint-text strong {
      color: var(--gold);
      font-weight: 700;
    }
    .fav-empty-msg-title {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      text-align: center;
      padding: 32px 16px 6px;
    }
    .fav-empty-msg-sub {
      font-size: 13px;
      color: var(--text-disabled);
      text-align: center;
      padding: 0 16px 32px;
      line-height: 1.5;
    }

    /* Card com swipe (V2-A · linha compacta) */
    .fav-card-wrap {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .fav-card-delete-bg {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 90px;
      background: var(--error);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border-radius: 12px;
      cursor: pointer;
    }
    .fav-card-delete-bg svg { stroke: #fff; }
    .fav-card-delete-bg span {
      font-size: 10px;
      font-weight: 700;
      color: #fff;
    }
    .fav-card {
      -webkit-tap-highlight-color: transparent;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      cursor: pointer;
      position: relative;
      transition: transform 0.18s cubic-bezier(.4,0,.2,1), background .15s;
      will-change: transform;
    }
    .fav-card.swiping { transition: none; }
    .fav-card:active { background: #171717; }
    .fav-card-icon {
      width: 36px; height: 36px;
      border-radius: 9px;
      background: color-mix(in srgb, var(--tc, #888) 12%, transparent);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: var(--tc, var(--gold));
    }
    .fav-card-info { flex: 1; min-width: 0; }
    .fav-card-nome {
      font-family: var(--font-display);
      font-size: 14px; font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.2;
    }
    .fav-card-meta {
      font-size: 11px;
      color: var(--text-disabled);
      margin-top: 3px;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .fav-card-pill {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 2px 7px;
      border-radius: 4px;
      background: var(--surface-2, #1A1A1A);
      color: var(--text-secondary);
      flex-shrink: 0;
    }
    .fav-card-meta-txt {
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .fav-card-arrow {
      color: var(--text-disabled);
      display: flex; align-items: center;
      flex-shrink: 0;
    }

    /* Botão favoritar na topbar */
    .topbar-fav-btn {
      width: 34px;
      height: 34px;
      border-radius: var(--radius-sm);
      background: var(--surface);
      border: 1px solid var(--border-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s;
      -webkit-tap-highlight-color: transparent;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .topbar-fav-btn.visible { opacity: 1; pointer-events: all; }
    .topbar-fav-btn:active { background: var(--surface-3); }

    .topbar-fav-btn svg { transition: fill 0.2s, stroke 0.2s; stroke: var(--text-primary); }
    .topbar-fav-btn.ativo svg { fill: var(--error); stroke: var(--error); }

    /* ═══════════════════════════════════════════
       TELA: PERFIL (placeholder)
    ═══════════════════════════════════════════ */
    /* ══════════════ TELA AULAS ══════════════ */
    #screen-aulas {
      padding: 0;
      align-items: center;
      overflow-y: auto;
    }
    .aulas-scroll {
      width: 100%;
      max-width: var(--content-max);
      display: flex;
      flex-direction: column;
      padding: 0 0 40px;
      box-sizing: border-box;
    }
    .aulas-header {
      padding: 28px var(--side-pad) 16px;
    }
    .aulas-title {
      font-family: var(--font-display);
      font-size: 36px;
      font-weight: 800;
      color: var(--text-primary);
      letter-spacing: 0.5px;
      line-height: 1.05;
    }
    .aulas-section-label {
      font-size: 11px;
      letter-spacing: 2px;
      color: var(--text-disabled);
      font-weight: 700;
      text-transform: uppercase;
      padding: 16px var(--side-pad) 8px;
    }
    /* ── Aula Card Cinematográfico (Sessão 27) ── */
    .aula-card {
      margin: 0 var(--side-pad) 12px;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--border);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: opacity .15s;
    }
    .aula-card:active { opacity: 0.85; }
    @keyframes aulaCardPulse {
      0%   { box-shadow: 0 0 0 0px rgba(212,175,55,0); }
      30%  { box-shadow: 0 0 0 3px rgba(212,175,55,0.55); }
      70%  { box-shadow: 0 0 0 3px rgba(212,175,55,0.2); }
      100% { box-shadow: 0 0 0 0px rgba(212,175,55,0); }
    }
    .aula-card-retomar-highlight { animation: aulaCardPulse 1.5s ease-out forwards; }

    /* Media / Thumb */
    .aula-cine-media {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--surface-3);
      overflow: hidden;
      transition: opacity .2s;
    }
    .aula-cine-thumb {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .aula-cine-gradient {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(13,13,13,0.96) 0%, rgba(13,13,13,0.45) 38%, transparent 65%);
    }
    /* Overlay: data + título sobre o gradiente */
    .aula-cine-overlay {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 10px 14px 12px;
    }
    .aula-cine-meta {
      display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    }
    .aula-cine-date { font-size: 11px; color: rgba(255,255,255,0.45); }
    .aula-cine-titulo {
      font-family: var(--font-display);
      font-size: 15px; font-weight: 700;
      color: #fff; line-height: 1.3;
      text-shadow: 0 1px 8px rgba(0,0,0,0.5);
    }
    /* Botão play no canto superior direito */
    .aula-cine-play {
      position: absolute; top: 12px; right: 12px;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(0,0,0,0.5);
      border: 1.5px solid rgba(255,255,255,0.25);
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background .15s;
    }
    .aula-cine-play:active { background: rgba(0,0,0,0.75); }

    /* Corpo: descrição + botões */
    .aula-cine-body { padding: 10px 14px 12px; }
    .aula-cine-desc {
      font-size: 13px; color: var(--text-secondary); line-height: 1.45;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      margin-bottom: 10px;
    }
    /* Wrapper full-width: três botões dividem o espaço igualmente */
    .aula-actions-wrap { width: 100%; }
    .aula-cine-actions {
      display: flex; align-items: stretch; gap: 6px;
    }
    .aula-cine-actions > * { flex: 1 1 0; min-width: 0; justify-content: center; }
    /* Botões texto + ícone */
    .aula-ic-btn {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 12px; border-radius: 8px;
      background: var(--surface-2); border: 1px solid rgba(255,255,255,0.07);
      font-size: 12px; font-weight: 600; color: var(--text-secondary);
      cursor: pointer; transition: opacity .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .aula-ic-btn:active { opacity: 0.7; }
    .aula-ic-btn.fav-on   { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.2);  color: #f87171; }
    .aula-ic-btn.check-on { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.2); color: #4ade80; }
    .aula-ic-btn.rev-on   { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.2); color: var(--gold); }
    /* Linha de revisão (abaixo dos actions, visível só quando assistida) */
    .aula-rev-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
    .aula-ic-btn--wide { flex: 1; justify-content: center; }
    .aula-rev-count {
      flex-shrink: 0;
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      color: var(--gold); background: rgba(212,175,55,0.12);
      border: 1px solid rgba(212,175,55,0.25);
      border-radius: 20px; padding: 2px 7px; letter-spacing: 0.04em;
      white-space: nowrap;
    }
    /* Botão PDF — mesmo estilo dos ic-btn com toque dourado */
    .aula-pdf-btn {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 12px; border-radius: 8px;
      background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.2);
      font-size: 12px; font-weight: 600; color: var(--gold);
      text-decoration: none; cursor: pointer;
      -webkit-tap-highlight-color: transparent; transition: opacity .15s;
    }
    .aula-pdf-btn:active { opacity: 0.7; }

    /* Tag NOVO */
    .aula-novo-tag {
      font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
      color: #000; background: var(--gold); padding: 1px 5px; border-radius: 3px;
    }

    /* Selo "Participou ao vivo" — mostrado em aulas de mentoria com presença confirmada */
    .aula-aovivo-selo {
      display: inline-flex; align-items: center; gap: 5px;
      margin-bottom: 10px;
      padding: 4px 9px 4px 7px;
      background: rgba(212, 175, 55, 0.12);
      border-radius: 99px;
    }
    .aula-aovivo-selo svg { color: var(--gold); display: block; }
    .aula-aovivo-selo-txt {
      font-size: 10px; font-weight: 700;
      color: var(--gold); letter-spacing: 0.3px;
    }

    .ah-legenda { display: none; }
    .ah-legenda-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: #666;
    }

    /* Inline frame descontinuado — player migrado para vplayer-overlay */
    .aula-inline-frame { display: none !important; }

    .aula-video-wrap {
      display: none;
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
    }
    .aula-video-wrap iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
    .material-card {
      margin: 0 var(--side-pad) 8px;
      background: var(--surface-2);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      text-decoration: none;
      transition: border-color .15s;
    }
    .material-card:active { border-color: rgba(255,255,255,0.15); }
    .material-icon { font-size: 22px; flex-shrink: 0; }
    .material-nome { font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; }
    .material-arrow { font-size: 18px; color: var(--text-disabled); }
    .aulas-empty-card {
      margin: 40px var(--side-pad);
      background: var(--surface-2);
      border-radius: 16px;
      padding: 32px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* ── Aulas Hub ── */
    .ah-scroll { width:100%;max-width:var(--content-max);display:flex;flex-direction:column;box-sizing:border-box;padding-bottom:48px; }
    .ah-header { padding:14px var(--side-pad) 0;display:flex;flex-direction:column; }
    .ah-header-label { font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-disabled);margin-bottom:4px; }
    .ah-title { font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-primary); }
    .ah-sticky { position:sticky;top:0;z-index:100;background:var(--bg);padding:12px var(--side-pad) 0;display:flex;flex-direction:column;gap:10px; }
    .ah-search-wrap { position:relative; }
    .ah-search-icon { position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-disabled);pointer-events:none; }
    .ah-search-input { width:100%;box-sizing:border-box;background:var(--surface-2);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:11px 14px 11px 40px;font-size:14px;color:var(--text-primary);font-family:var(--font-body);outline:none;transition:border-color .15s; }
    .ah-search-input:focus { border-color:rgba(212,175,55,0.4); }
    .ah-search-input::placeholder { color:var(--text-disabled); }
    .ah-tabs { display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 0 10px;scrollbar-width:none; }
    .ah-tabs::-webkit-scrollbar { display:none; }
    .ah-tab { flex-shrink:0;padding:6px 16px;border-radius:40px;border:1.5px solid rgba(255,255,255,0.1);background:transparent;color:var(--text-secondary);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px; }
    .ah-tab:active { opacity:.7; }
    .ah-tab.ativo { background:var(--gold);border-color:var(--gold);color:#000; }
    .ah-tab-icon { font-size:16px;line-height:1;display:inline-flex;align-items:center; }
    .ah-tab-icon svg { width:18px;height:18px; }
    .ah-tab-icon-img { width:16px;height:16px;border-radius:3px;object-fit:cover; }
    .ah-conteudo { padding:8px 0 0; }
    .ah-loading { padding:50px var(--side-pad);text-align:center;color:var(--text-disabled);font-size:14px; }
    .ah-resultados { padding:0 var(--side-pad); }
    .ah-res-label { font-size:11px;letter-spacing:2px;color:var(--text-disabled);font-weight:700;text-transform:uppercase;padding:14px 0 8px; }

    /* ── Cabeçalho de progresso da categoria ──
       Aparece dentro de ah-conteudo ao selecionar uma tab.
       Mostra título, barra e contador "X de Y".           */
    .ah-cat-header {
      padding: 10px var(--side-pad) 12px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      margin-bottom: 6px;
    }
    .ah-cat-bar-track {
      flex: 1;
      height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 99px;
      overflow: hidden;
    }
    .ah-cat-bar-fill {
      height: 100%;
      border-radius: 99px;
      background: var(--gold);
      transition: width 0.45s cubic-bezier(.4,0,.2,1);
      min-width: 0;
    }
    /* Barra + % na mesma linha, contagem abaixo */
    .ah-cat-progress { display: flex; flex-direction: column; gap: 5px; }
    .ah-cat-bar-row { display: flex; align-items: center; gap: 10px; }
    .ah-cat-pct {
      font-size: 13px; font-weight: 700; color: var(--text-primary);
      line-height: 1; flex-shrink: 0;
    }
    .ah-cat-count {
      font-size: 11px; color: var(--text-primary); font-weight: 600;
    }
    .ah-cat-count-num { color: var(--text-primary); }
    .ah-tab-check { display: none !important; }
    .vplayer-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s; }
    .vplayer-overlay.active { opacity:1;pointer-events:all; }
    .vplayer-inner { width:100%;max-width:700px;padding:0 16px;box-sizing:border-box; }
    .vplayer-topbar { display:flex;align-items:center;justify-content:space-between;padding:0 0 12px; }
    .vplayer-titulo { font-family:var(--font-display);font-size:16px;font-weight:700;color:#fff;flex:1;padding-right:12px;line-height:1.3; }
    .vplayer-close { width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.12);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .vplayer-frame { width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000; }
    .vplayer-frame iframe { width:100%;height:100%;border:none;display:block; }


    #screen-perfil {
      padding: 0;
      gap: 0;
      align-items: center;
      overflow-y: auto;
    }

    /* ── Wrapper scroll ─────────────────────── */
    .perfil-scroll {
      width: 100%;
      max-width: var(--content-max);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      padding: 14px var(--side-pad) 40px;
      box-sizing: border-box;
    }

    /* ── Hero D (Apple-style) ───────────────── */
    .perfil-d-hero {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 4px 0;
    }

    .perfil-d-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: rgba(212,175,55,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 800;
      color: var(--gold);
      flex-shrink: 0;
    }

    .perfil-d-hero-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

    .perfil-d-hero-name {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .perfil-d-hero-mail {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .perfil-d-hero-status {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
      margin-top: 1px;
    }
    .perfil-d-hero-status.ativo    { color: #4ade80; }
    .perfil-d-hero-status.expirado { color: #fbbf24; }

    /* Linha de badges no hero do perfil: Nível + Mentoria ativa */
    .perfil-d-hero-badges {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }
    .perfil-hero-nivel {
      display: inline-flex;
      align-items: center;
      background: rgba(212,175,55,0.08);
      border: 1px solid rgba(212,175,55,0.25);
      padding: 3px 9px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #D4AF37;
      letter-spacing: 0.3px;
      line-height: 1.2;
    }
    .perfil-hero-mentoria {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 9px 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.01em;
    }
    .perfil-hero-mentoria.ativo {
      background: rgba(62,209,121,0.08);
      border: 1px solid rgba(62,209,121,0.25);
      color: #7be3a5;
    }
    .perfil-hero-mentoria.concluido {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.4);
    }
    .perfil-hero-mentoria.inativo {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #888;
    }

    .perfil-d-section-lbl {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #666;
      padding: 22px 4px 10px;
    }

    .perfil-d-list {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }

    .perfil-d-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 14px 16px;
    }

    .perfil-d-row + .perfil-d-row { border-top: 1px solid var(--border); }

    .perfil-d-row.hero {
      background: rgba(212,175,55,0.03);
    }

    .perfil-d-row-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .perfil-d-row-l {
      font-size: 13.5px;
      color: #aaa;
      font-weight: 500;
    }

    .perfil-d-row-v {
      font-size: 14px;
      font-weight: 700;
      color: var(--gold);
      font-variant-numeric: tabular-nums;
    }

    .perfil-d-row-v.white { color: var(--text-primary); }

    /* Pill de status no bloco Mentoria */
    .perfil-d-state-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      font-family: var(--font-body);
    }
    .perfil-d-state-pill.ativo {
      background: rgba(62,209,121,0.08);
      border: 1px solid rgba(62,209,121,0.25);
      color: #7be3a5;
    }
    .perfil-d-state-pill.concluido {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(245,241,232,0.72);
    }
    .perfil-d-state-pill.pausado {
      background: rgba(212,175,55,0.06);
      border: 1px solid rgba(212,175,55,0.22);
      color: #D4AF37;
    }
    .perfil-d-state-pill .dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: currentColor;
    }
    .perfil-d-state-pill.ativo .dot {
      background: #3ed179;
      box-shadow: 0 0 6px rgba(62,209,121,0.7);
    }

    /* Linha "Próximo ciclo" — clicável, gold-accent */
    .perfil-d-row.perfil-d-row-proxciclo {
      cursor: pointer;
      transition: background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .perfil-d-row.perfil-d-row-proxciclo:hover,
    .perfil-d-row.perfil-d-row-proxciclo:focus-visible {
      background: rgba(212,175,55,0.05);
      outline: none;
    }
    .perfil-d-row.perfil-d-row-proxciclo:active { opacity: 0.85; }
    .perfil-d-row.perfil-d-row-proxciclo #perfil-ciclo-prox {
      color: var(--gold);
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    /* ── Hero E ─────────────────────────────── */
    .perfil-hero-e {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 6px 0 16px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      margin-bottom: 2px;
    }

    .perfil-avatar-wrap {
      position: relative;
      width: 62px;
      height: 62px;
      flex-shrink: 0;
    }

    .perfil-avatar {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: rgba(212,175,55,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .perfil-hero-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .perfil-hero-name {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .perfil-hero-mail {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .perfil-hero-status {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
      margin-top: 1px;
    }

    .perfil-hero-status.ativo    { color: #4ade80; }
    .perfil-hero-status.expirado { color: #fbbf24; }

    .perfil-nivel-barra-track {
      width: 100%;
      height: 3px;
      background: rgba(212,175,55,0.18);
      border-radius: 999px;
      overflow: hidden;
    }

    .perfil-nivel-barra-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 999px;
      transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
    }

    /* ── Logout ─────────────────────────────── */
    .perfil-logout-link {
      background: none;
      border: none;
      border-top: 1px solid var(--border);
      color: rgba(239, 68, 68, 0.65);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      padding: 20px 12px 12px;
      width: 100%;
      text-align: center;
      transition: color 0.15s;
      margin-top: 8px;
    }
    .perfil-logout-link:active { color: var(--error); }

    .perfil-logout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin: 24px 0 8px;
      padding: 13px 16px;
      background: rgba(239,68,68,0.06);
      border: 1px solid rgba(239,68,68,0.25);
      border-radius: var(--radius-lg);
      color: rgba(239,68,68,0.85);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.2px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    .perfil-logout-btn:hover {
      background: rgba(239,68,68,0.10);
      border-color: rgba(239,68,68,0.40);
      color: #ef4444;
    }
    .perfil-logout-btn:active {
      transform: scale(0.99);
      background: rgba(239,68,68,0.14);
    }
    .perfil-logout-btn svg { flex-shrink: 0; }

    /* ── Settings item somente leitura ── */
    .perfil-settings-item--readonly {
      cursor: default;
    }
    .perfil-settings-item--readonly:active {
      background: transparent;
    }
    .perfil-settings-item--readonly .perfil-settings-title {
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* ── Aviso de validade próxima do vencimento ── */
    .perfil-settings-item--warn .perfil-settings-title {
      color: var(--text-primary);
      font-weight: 600;
    }
    .perfil-validade-chip {
      display: inline-block;
      margin-left: 6px;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(212,175,55,0.10);
      border: 1px solid rgba(212,175,55,0.30);
      color: #D4AF37;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      vertical-align: 1px;
    }
    .perfil-validade-chip--err {
      background: rgba(239,68,68,0.10);
      border-color: rgba(239,68,68,0.35);
      color: rgba(239,68,68,0.95);
    }

    /* ── Botão de ação discreto (Trocar senha) ── */
    .perfil-action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin: 14px 0 4px;
      padding: 12px 16px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: var(--radius-lg);
      color: rgba(245,241,232,0.78);
      font-family: var(--font-body);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.2px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    .perfil-action-btn:hover,
    .perfil-action-btn:focus-visible {
      background: rgba(212,175,55,0.06);
      border-color: rgba(212,175,55,0.28);
      color: #D4AF37;
      outline: none;
    }
    .perfil-action-btn:active {
      transform: scale(0.99);
      background: rgba(212,175,55,0.10);
    }
    .perfil-action-btn svg { flex-shrink: 0; }

    /* ── Header v2 do Perfil ── */
    .perfil-header {
      display: flex;
      flex-direction: column;
      padding-bottom: 4px;
    }
    .perfil-header-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-disabled);
      margin-bottom: 4px;
    }
    .perfil-header-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
    }

    /* ── Info rows (loose, sem caixa) ──────── */
    .perfil-info-rows {
      display: flex;
      flex-direction: column;
    }

    .perfil-info-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px 0;
    }

    .perfil-info-row + .perfil-info-row {
      border-top: 1px solid rgba(255,255,255,0.04);
    }

    .perfil-info-row-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .perfil-info-lbl {
      font-size: 13.5px;
      color: var(--text-secondary);
    }

    .perfil-info-lbl--nivel {
      color: var(--gold);
      font-weight: 600;
    }

    .perfil-info-val {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }

    .perfil-info-divider {
      height: 1px;
      background: rgba(255,255,255,0.05);
      margin: 4px 0;
    }
    /* ── Edição inline do nome ── */
    .perfil-nome-edit {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
    }
    .perfil-nome-input {
      flex: 1;
      min-width: 0;
      background: var(--surface-2);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      padding: 8px 36px 8px 12px;
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      outline: none;
      text-align: left;
      transition: border-color 0.2s;
    }

    .perfil-nome-input:focus {
      border-color: var(--gold-border);
    }
    .perfil-nome-contador {
      position: absolute;
      right: 42px;
      font-size: 11px;
      color: var(--text-disabled);
      font-family: var(--font-mono);
      pointer-events: none;
    }
    .perfil-nome-edit { position: relative; }
    .perfil-nome-salvar {
      background: var(--gold);
      color: #000;
      border: none;
      border-radius: var(--radius-md);
      min-width: 44px;
      height: 36px;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: opacity 0.15s;
    }
    .perfil-nome-salvar:active { opacity: 0.8; }

    /* ── Section label simples (continuação) ── */
    .perfil-stat-row-label {
      font-size: 14px;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .perfil-stat-row-value {
      font-size: 14px;
      font-weight: 700;
      color: var(--gold);
    }

    /* ── Section label simples ───────────────── */
    .perfil-section-lbl {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #666;
      padding: 22px 4px 10px;
    }

    /* ── Settings list ───────────────────────── */
    .perfil-settings-list {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }

    .perfil-inline-edit-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px 14px;
      border-top: 1px solid var(--border);
      background: var(--surface);
    }

    .perfil-settings-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      cursor: pointer;
      transition: background 0.12s;
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
      color: inherit;
    }

    .perfil-settings-item + .perfil-settings-item {
      border-top: 1px solid var(--border);
    }

    .perfil-settings-item:active {
      background: var(--surface-2);
    }

    .perfil-settings-icon {
      font-size: 18px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--surface-2);
      border-radius: var(--radius-md);
      flex-shrink: 0;
    }

    .perfil-settings-text {
      flex: 1;
      min-width: 0;
    }

    .perfil-settings-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .perfil-settings-sub {
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    .perfil-settings-arrow {
      font-size: 20px;
      color: var(--text-disabled);
      flex-shrink: 0;
      font-weight: 400;
      line-height: 1;
    }

    /* ── Social row ───────────────────────────── */
    .perfil-social-row {
      display: flex;
      gap: 10px;
    }

    .perfil-social-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
      -webkit-tap-highlight-color: transparent;
    }

    .perfil-social-btn:active {
      background: var(--surface-2);
      border-color: var(--border-strong);
    }

    /* ═══════════════════════════════════════════
       UTILITÁRIOS
    ═══════════════════════════════════════════ */
    .placeholder-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--text-disabled);
      text-align: center;
      padding: 40px;
    }

    .placeholder-screen p {
      font-size: 14px;
      line-height: 1.6;
    }
    /* ── Modal Apelido ──────────────────────────── */
    .modal-apelido-inner {
      align-items: stretch;
    }

    .modal-apelido-inner .modal-title,
    .modal-apelido-inner .modal-desc {
      text-align: left;
    }

    .apelido-input-wrap {
      position: relative;
      width: 100%;
    }

    .apelido-input-wrap input {
      width: 100%;
      background: var(--surface-2);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      padding: 13px 44px 13px 14px;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }

    .apelido-input-wrap input:focus {
      border-color: var(--gold-border);
    }

    .apelido-input-wrap input::placeholder {
      color: var(--text-disabled);
      font-weight: 400;
    }

    .apelido-contador {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-disabled);
      pointer-events: none;
      transition: color 0.2s;
    }

    .apelido-contador.aviso { color: var(--error); }

    /* ═══════════════════════════════════════════
       FERRAMENTAS — estilos compartilhados
    ═══════════════════════════════════════════ */

    /* ── Scroll area ── */
    .scroll-area-plain {
      flex: 1; overflow-y: auto;
      padding: 0 0 calc(80px + env(safe-area-inset-bottom, 0px));
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .scroll-area-plain > * {
      width: 100%;
      max-width: var(--content-max);
      box-sizing: border-box;
    }
    .section-pad { padding: 0 16px 16px; }

    /* ── Inner header (título da ferramenta) ── */
    .inner-header { padding: 20px 16px 16px; }
    .inner-tag { font-size: 13px; letter-spacing: 2px; color: var(--tc, var(--gold)); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
    .inner-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px,6vw,34px); color: #fff; line-height: 1; margin-bottom: 4px; letter-spacing: -0.3px; }
    .inner-section-label { font-size: 11px; letter-spacing: 2px; color: #777; font-weight: 700; text-transform: uppercase; padding: 0 16px 10px; }

    /* ── Carrossel de dicas ── */
    .tips-carousel { padding: 0 16px 16px; position: relative; }
    .ct-tips-carousel { padding: 0 16px 16px; position: relative; }
    .tips-track-wrap { overflow: hidden; border-radius: 16px; }
    .tips-track { display: flex; transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
    .tip-card { min-width: 100%; background: #111111; border: 1px solid color-mix(in srgb, var(--tc, var(--gold)) 10%, transparent); border-radius: 16px; padding: 16px 18px 14px; box-sizing: border-box; position: relative; overflow: hidden; }
    .tip-card::before { content:''; position:absolute; inset:0; background: color-mix(in srgb, var(--tc, var(--gold)) 3%, transparent); pointer-events:none; }
    .tip-label { font-size: 11px; letter-spacing: 1.5px; color: color-mix(in srgb, var(--tc, var(--gold)) 60%, transparent); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
    .tip-text { font-size: 14px; color: var(--text-secondary); line-height: 1.65; padding-right: 72px; }
    .tip-text strong { color: #bbb; font-weight: 700; }
    .tip-progress { height: 2px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 12px; overflow: hidden; }
    .tip-progress-fill { height: 100%; background: color-mix(in srgb, var(--tc, var(--gold)) 40%, transparent); border-radius: 2px; width: 0%; }
    .tip-prev-btn, .tip-next-btn { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; background: rgba(255,255,255,0.06); border: none; border-radius: 7px; color: #888; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .tip-prev-btn { right: 46px; }
    .tips-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0 2px; }
    .tips-dots { display: flex; gap: 5px; align-items: center; }
    .tip-dot { width: 6px; height: 6px; border-radius: 50%; background: #333; cursor: pointer; transition: background 0.2s, transform 0.2s; }
    .tip-dot.active { background: color-mix(in srgb, var(--tc, var(--gold)) 60%, transparent); transform: scale(1.3); }
    .tips-count { font-size: 11px; color: var(--text-disabled); font-weight: 600; }

    /* ── Notas raiz ── */
    .note-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
    .note-btn { min-width: 48px; height: 48px; padding: 0 12px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid rgba(255,255,255,0.08); color: #ccc; font-family: var(--font-display); font-size: 17px; font-weight: 800; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
    .note-btn:hover { border-color: color-mix(in srgb, var(--tc, var(--gold)) 40%, transparent); color: var(--tc, var(--tc, var(--gold))); }
    .note-btn.active { background: color-mix(in srgb, var(--tc, var(--gold)) 15%, transparent); border-color: var(--tc, var(--tc, var(--gold))); color: var(--tc, var(--tc, var(--gold))); }

    /* ── Cards de tríade ── */
    .triad-grid { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
    .ct-card-wrap { display: flex; flex-direction: column; }
    .triad-card { background: #111; border: 1.5px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.25s; }
    .triad-card:hover { background: #1a1a18; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
    .triad-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .triad-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: #ccc; transition: color 0.2s; }
    .triad-type { font-size: 13px; letter-spacing: 1px; font-weight: 700; color: #666; }
    .note-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
    .n-pill { font-size: 13px; font-weight: 700; font-family: var(--font-display); border-radius: 6px; padding: 3px 8px; }
    .triad-actions { display: flex; gap: 6px; }
    .triad-btn { flex: 1; border: none; border-radius: 8px; padding: 8px 0; font-family: var(--font-display); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 5px; }
    .triad-btn-view { background: rgba(74,144,217,0.12); color: #4A90D9; border: 1px solid rgba(74,144,217,0.3); }
    .triad-btn-view.active { background: color-mix(in srgb, var(--tc, var(--gold)) 12%, transparent); color: var(--tc, var(--tc, var(--gold))); border-color: color-mix(in srgb, var(--tc, var(--gold)) 30%, transparent); }
    .triad-btn-play { background: color-mix(in srgb, var(--tc, var(--gold)) 8%, transparent); color: color-mix(in srgb, var(--tc, var(--gold)) 60%, transparent); border: 1px solid color-mix(in srgb, var(--tc, var(--gold)) 15%, transparent); }
    .triad-btn-play:hover { background: color-mix(in srgb, var(--tc, var(--gold)) 18%, transparent); color: var(--tc, var(--tc, var(--gold))); border-color: color-mix(in srgb, var(--tc, var(--gold)) 40%, transparent); }

    /* ── Detalhe inline ── */
    .triad-inline-detail { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s; margin-top: 0; }
    .triad-inline-detail.open { max-height: 600px; opacity: 1; margin-top: 12px; }

    /* ── Detail panel ── */
    .detail-panel { margin: 0; background: var(--surface-2); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
    .detail-header { padding: 16px 18px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; gap: 10px; }
    .detail-chord { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1; }
    .detail-sub { font-size: 14px; color: #888; }
    .detail-body { padding: 16px 18px; }
    .sublabel { font-size: 11px; letter-spacing: 1.5px; color: #666; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
    .formula-row { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
    .fchip { border-radius: 8px; padding: 7px 12px; text-align: center; min-width: 50px; }
    .fchip-int { font-size: 15px; font-weight: 700; }
    .fchip-note { font-size: 13px; margin-top: 2px; opacity: 0.75; font-family: var(--font-display); }
    .farrow { color: #666; font-size: 16px; }

    /* ── Piano ── */
    .piano-outer { background: #0a0a14; border-radius: 12px; padding: 10px 8px 8px; border: 1px solid rgba(255,255,255,0.04); }
    .piano { position: relative; height: 120px; display: flex; }
    .wk { flex: 1; height: 100%; border: 1.5px solid #1e1e2e; border-radius: 0 0 8px 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 7px; position: relative; z-index: 1; transition: background 0.25s; }
    .wk-lbl { font-size: 11px; font-weight: 700; font-family: var(--font-display); }
    .bk { position: absolute; height: 58%; z-index: 2; border-radius: 0 0 6px 6px; border: 1px solid #0a0a1a; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; transition: background 0.25s; }
    .bk-lbl { font-size: 9px; font-weight: 700; font-family: var(--font-display); }
    .ct-play-btn { display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--tc, var(--gold)) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tc, var(--gold)) 25%, transparent); border-radius: 20px; padding: 7px 14px; color: var(--tc, var(--tc, var(--gold))); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
    .ct-play-btn:hover { background: color-mix(in srgb, var(--tc, var(--gold)) 20%, transparent); }

    /* ── Contexto de grau (inline dentro do detail panel) ── */
    .ct-grau-context-inline { margin-top: 12px; background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.12); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; display: none; }
    .ct-grau-context-inline strong { color: var(--tc, var(--gold)); }

    /* ── Card de descrição da ferramenta ── */
    .ct-fav-pill {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--surface); border: 1px solid var(--border-strong);
      border-radius: 20px; padding: 5px 12px;
      color: var(--text-secondary); font-size: 12px; font-weight: 600;
      cursor: pointer; transition: all 0.2s;
      align-self: flex-start;
      margin-top: 6px; margin-bottom: 0;
    }
    .ct-fav-pill:active { background: var(--surface-3); }
    .ct-fav-pill.ativo { border-color: rgba(248,113,113,0.6); color: var(--error); background: rgba(248,113,113,0.15); }
    .ct-fav-pill.ativo svg { fill: currentColor; }
    .ct-desc-card { padding: 16px; margin: 0 16px 16px; background: #111; border: 1px solid color-mix(in srgb, var(--tc, var(--gold)) 10%, transparent); border-radius: 14px; position: relative; overflow: hidden; }
    .ct-desc-card::before { content:''; position:absolute; inset:0; background: color-mix(in srgb, var(--tc, var(--gold)) 3%, transparent); pointer-events:none; }
    .ct-desc-title { font-size: 11px; letter-spacing: 1.5px; color: color-mix(in srgb, var(--tc, var(--gold)) 70%, transparent); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
    .ct-desc-text { font-size: 14px; color: var(--text-secondary); line-height: 1.65; }
    .ct-desc-text strong { color: #bbb; font-weight: 700; }

    /* ══════════════════════════════════════════════════════════════════════ */
    /* CONSTRUTOR DE TRÍADES — redesign S156 (reusa classes ci-* + extras ct-*) */
    /* ══════════════════════════════════════════════════════════════════════ */

    /* Card de resultado — herda ci-result-card; só adiciona o bloco do acorde */
    /* Seletor combinado pra ganhar de .ci-result-card que vem depois no arquivo */
    .ci-result-card.ct-result-card { margin: 22px 16px 0; }
    .ct-chord-block { text-align: center; }
    .ct-chord-symbol {
      font-family: var(--font-display); font-weight: 800; font-size: 38px;
      color: var(--gold); letter-spacing: -1px; line-height: 1;
    }
    .ct-chord-sub {
      font-family: var(--font-display); font-weight: 600; font-size: 11px;
      letter-spacing: 1.8px; color: var(--text-secondary); text-transform: uppercase;
      margin-top: 4px;
    }
    .ct-bubbles-row {
      display: flex; justify-content: center; gap: 8px;
      margin: 4px 0 2px;
    }
    .ct-note-bubble {
      min-width: 46px; padding: 8px 6px; border-radius: 10px;
      background: rgba(212,175,55,0.08); border: 1px solid var(--gold-border, rgba(212,175,55,0.30));
      text-align: center;
    }
    .ct-bubble-formula {
      font-family: var(--font-display); font-weight: 700; font-size: 10px;
      color: var(--bronze); letter-spacing: 1px;
    }
    .ct-bubble-note {
      font-family: var(--font-display); font-weight: 700; font-size: 18px;
      color: var(--gold); margin-top: 1px;
    }
    .ct-arrow-sep {
      color: var(--text-disabled); font-size: 14px; align-self: center;
      padding-top: 14px;
    }

    /* Grade de 6 tipos lado a lado */
    .ct-types-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    }
    .ct-type-card {
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 12px; padding: 11px 8px 9px;
      cursor: pointer; text-align: center;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      color: var(--text-primary);
    }
    .ct-type-card:hover { background: var(--surface-2); }
    .ct-type-card:active { transform: scale(0.97); }
    .ct-type-card.active {
      border-color: var(--gold);
      background: rgba(212,175,55,0.12);
      box-shadow: 0 0 0 1px var(--gold-border, rgba(212,175,55,0.30));
    }
    .ct-type-sym {
      font-family: var(--font-display); font-weight: 800; font-size: 20px;
      color: var(--gold); line-height: 1; letter-spacing: -0.5px;
    }
    .ct-type-name {
      font-family: var(--font-display); font-size: 10px; font-weight: 700;
      color: var(--text-secondary); letter-spacing: 1px;
      text-transform: uppercase;
    }
    .ct-type-card.active .ct-type-name { color: var(--text-primary); }
    .ct-type-pills {
      display: flex; gap: 3px; justify-content: center; margin-top: 3px; flex-wrap: wrap;
    }
    .ct-type-pill {
      font-family: var(--font-display); font-weight: 700; font-size: 9px;
      padding: 2px 5px; border-radius: 4px;
      background: rgba(212,175,55,0.08); color: var(--bronze);
    }

    /* Caixa "Na prática" — sempre visível, não clicável (estilo 2: card neutro com label ouro) */
    .ct-info-card {
      margin: 16px 16px 0;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px;
    }
    .ct-info-label {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--font-display); font-weight: 700; font-size: 10px;
      letter-spacing: 2px; color: var(--gold);
      text-transform: uppercase; margin-bottom: 6px;
    }
    .ct-info-label svg { width: 12px; height: 12px; }
    .ct-info-text {
      font-family: var(--font-body); font-size: 13px; color: var(--text-primary);
      line-height: 1.55;
    }
    .ct-info-text strong { color: var(--gold); font-weight: 700; }
    .ct-info-ex {
      font-family: var(--font-body); font-size: 12px; color: var(--text-secondary);
      font-style: italic; margin-top: 6px; padding-top: 6px;
      border-top: 1px dashed rgba(168,144,32,0.2);
    }

    .ferramenta-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 16px var(--side-pad) calc(80px + env(safe-area-inset-bottom, 0px));
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* — Carrossel de dicas — */
    .f-carousel-wrap {
      background: var(--surface-2);
      border-radius: 16px;
      padding: 16px;
      position: relative;
      overflow: hidden;
    }
    .f-carousel-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .f-carousel-track-outer { overflow: hidden; }
    .f-carousel-track {
      display: flex;
      transition: transform .35s cubic-bezier(.4,0,.2,1);
    }
    .f-carousel-slide {
      min-width: 100%;
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .f-carousel-slide strong { color: var(--text-primary); }
    .f-carousel-progress {
      height: 2px;
      background: var(--surface-3);
      border-radius: 2px;
      margin-top: 12px;
      overflow: hidden;
    }
    .f-carousel-progress-bar {
      height: 100%;
      background: var(--gold);
      border-radius: 2px;
      transition: width .35s linear;
    }
    .f-carousel-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }
    .f-carousel-count { font-size: 12px; color: var(--text-disabled); }
    .f-carousel-btns { display: flex; gap: 6px; }
    .f-carousel-btn {
      width: 28px; height: 28px;
      background: var(--surface-3);
      border: none; border-radius: 8px;
      color: var(--text-secondary);
      font-size: 15px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .f-carousel-btn:active { background: var(--surface-4, #2a2a36); }

    /* — Seletor de nota raiz / tonalidade — */
    .f-root-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }
    .f-root-btn {
      background: var(--surface-2);
      border: 1.5px solid transparent;
      border-radius: 10px;
      color: var(--text-secondary);
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      padding: 8px 2px;
      cursor: pointer;
      text-align: center;
      transition: background .15s, border-color .15s, color .15s;
    }
    .f-root-btn.ativo {
      background: var(--gold);
      border-color: var(--gold);
      color: #0e0e12;
      font-weight: 700;
    }

    /* — Seção com título — */
    .f-section-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--text-disabled);
      margin-bottom: 10px;
    }

    /* — Piano 1 oitava (Construtor) — */
    .f-piano-1oct {
      position: relative;
      height: 88px;
      display: flex;
      gap: 3px;
      background: #1a1a2e;
      border-radius: 10px;
      padding: 8px 8px 0;
      overflow: visible;
      user-select: none;
    }
    .f-piano-1oct .pw {
      flex: 1;
      background: #f0ebe0;
      border-radius: 0 0 6px 6px;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 5px;
      font-size: 9px;
      font-weight: 700;
      color: var(--text-disabled);
      transition: background .15s;
    }
    .f-piano-1oct .pw.ativa { color: #0e0e12; }
    .f-piano-1oct .pw .root-dot {
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #0e0e12;
    }
    .f-piano-1oct .pb {
      position: absolute;
      width: 10%;
      height: 52px;
      background: #1a1a2e;
      border-radius: 0 0 4px 4px;
      top: 8px;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 4px;
      font-size: 8px;
      font-weight: 700;
      color: #888;
      transition: background .15s;
    }
    .f-piano-1oct .pb.ativa { color: #0e0e12; }

    /* — Piano 3 oitavas (Abertas / Sobreposição) — */
    .f-piano-3oct {
      position: relative;
      height: 80px;
      background: #1a1a2e;
      border-radius: 10px;
      padding: 6px 6px 0;
      overflow: hidden;
      user-select: none;
    }
    .f-piano-3oct .whites-row {
      display: flex;
      height: 100%;
      gap: 2px;
    }
    .f-piano-3oct .pw3 {
      flex: 1;
      background: #f0ebe0;
      border-radius: 0 0 5px 5px;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 3px;
      font-size: 8px;
      font-weight: 700;
      color: transparent;
      transition: background .15s;
    }
    .f-piano-3oct .pw3.ativa { color: #0e0e12; }
    .f-piano-3oct .pb3 {
      position: absolute;
      height: 50%;
      background: #1a1a2e;
      border-radius: 0 0 3px 3px;
      top: 6px;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 2px;
      font-size: 7px;
      font-weight: 700;
      color: transparent;
      transition: background .15s;
    }
    .f-piano-3oct .pb3.ativa { color: #0e0e12; }

    /* — Chips de nota/intervalo — */
    .f-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .f-chip {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      background: var(--surface-3);
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-primary);
    }
    .f-chip span {
      font-size: 10px;
      font-weight: 500;
      font-family: var(--font-display);
      color: var(--text-disabled);
    }


    /* — Botão Ouvir — */
    .f-ouvir-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--surface-3);
      border: none;
      border-radius: 10px;
      padding: 10px 16px;
      color: var(--text-primary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
      align-self: flex-start;
    }
    .f-ouvir-btn:active { background: rgba(212,175,55,.18); }
    .f-ouvir-btn.tocando { color: var(--gold); }

    /* ═══════════════════════════════════════════════════════════════════
       CONEXÕES ESSENCIAIS (Ferramenta 2) — lista compacta V2
    ═══════════════════════════════════════════════════════════════════ */

    /* Vars de cores didáticas (caso ainda não definidas globalmente) */
    .ce-scope, #gc-body {
      --ce-impulso: #7FBF7F;
      --ce-inversao: #7A9CA8;
      --ce-preparado: #9876B5;
    }

    /* Padding lateral no body (scroll-area-plain não tem; header já tem via .ci-head-row) */
    #gc-body {
      padding-left: 16px;
      padding-right: 16px;
    }

    /* Seletor de tom 6x2 */
    .gc-tom-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      margin-bottom: 18px;
    }
    .gc-tom-btn {
      background: var(--surface-2);
      border: 1px solid transparent;
      border-radius: 10px;
      padding: 10px 0;
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 13px;
      color: var(--text-primary);
      cursor: pointer;
      text-align: center;
      transition: border-color .15s, background .15s, color .15s;
    }
    .gc-tom-btn.ativo {
      background: rgba(212,175,55,.12);
      border-color: var(--gold);
      color: var(--gold);
    }

    /* Section label (eyebrow) */
    .gc-section-label {
      font-family: var(--font-display);
      font-size: 10px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--bronze, #A89020);
      font-weight: 700;
      margin: 18px 0 8px;
    }

    /* Lista compacta de pares */
    .gc-par-list {
      background: var(--surface-2);
      border: 1px solid var(--surface-3);
      border-radius: 14px;
      overflow: hidden;
    }
    .gc-par-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      cursor: pointer;
      border-bottom: 1px solid var(--surface-3);
      transition: background .12s;
    }
    .gc-par-row:last-child { border-bottom: none; }
    .gc-par-row:active { background: var(--surface-3); }
    .gc-par-row.expanded { background: var(--surface-3); }
    .gc-par-row.expanded .gc-par-cifra { color: var(--gold); }
    .gc-par-row.expanded .gc-par-caret { transform: rotate(90deg); color: var(--gold); }

    .gc-par-cifra {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 14.5px;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .gc-par-cifra .gc-par-arrow {
      color: var(--text-disabled);
      font-size: 12.5px;
      font-weight: 400;
    }
    .gc-par-meta {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .gc-par-count {
      font-size: 11.5px;
      color: var(--text-secondary);
    }
    .gc-par-caret {
      color: var(--text-disabled);
      font-size: 12px;
      transition: transform .15s, color .15s;
    }

    /* Expansão inline (depois da linha clicada) */
    .gc-expansao {
      background: var(--bg);
      border-bottom: 1px solid var(--surface-3);
      padding: 14px 16px;
    }

    /* Categoria */
    .gc-cat { margin-top: 14px; }
    .gc-cat:first-child { margin-top: 0; }
    .gc-cat-h {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .gc-cat-marker {
      width: 3px;
      height: 14px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .gc-cat-marker.impulso   { background: var(--ce-impulso); }
    .gc-cat-marker.inversao  { background: var(--ce-inversao); }
    .gc-cat-marker.preparado { background: var(--ce-preparado); }
    .gc-cat-titulo {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .8px;
      text-transform: uppercase;
    }
    .gc-cat-titulo.impulso   { color: var(--ce-impulso); }
    .gc-cat-titulo.inversao  { color: var(--ce-inversao); }
    .gc-cat-titulo.preparado { color: var(--ce-preparado); }
    .gc-cat-count {
      font-size: 10.5px;
      color: var(--text-disabled);
    }
    .gc-cat-info {
      margin-left: auto;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--surface-3);
      display: grid;
      place-items: center;
      cursor: pointer;
      border: 1px solid var(--surface-3);
      color: var(--text-secondary);
      flex-shrink: 0;
    }
    .gc-cat-info:active { transform: scale(.92); }

    /* Card de conexão (cifras + linha do baixo) */
    .gc-conn-card {
      background: var(--surface-2);
      border: 1px solid var(--surface-3);
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 6px;
    }
    .gc-conn-card:last-child { margin-bottom: 0; }
    .gc-conn-label {
      font-size: 10.5px;
      color: var(--text-secondary);
      font-weight: 600;
      margin-bottom: 6px;
    }
    .gc-conn-trail {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 4px 0 6px;
    }
    .gc-conn-step {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 13.5px;
      color: var(--text-primary);
    }
    .gc-conn-step.borda { color: var(--gold); }
    .gc-conn-arrow {
      color: var(--text-disabled);
      font-size: 11px;
    }
    .gc-conn-bass {
      font-size: 10.5px;
      color: var(--text-disabled);
      text-align: center;
      border-top: 1px dashed var(--surface-3);
      padding-top: 6px;
      font-family: var(--font-mono);
      letter-spacing: .3px;
    }
    .gc-conn-bass strong {
      color: var(--text-secondary);
      font-weight: 600;
    }

    /* — Tríades Abertas — cards do campo — */
    .ta-campo-list { display: flex; flex-direction: column; gap: 10px; }
    .ta-card {
      background: var(--surface-2);
      border-radius: 14px;
      padding: 14px;
      transition: box-shadow .2s;
    }
    .ta-card.tocando { box-shadow: 0 0 0 2px var(--gold); }
    .ta-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .ta-grau-badge {
      background: var(--surface-3);
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-disabled);
      min-width: 36px;
      text-align: center;
    }
    .ta-acorde-nome {
      font-size: 17px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-primary);
      flex: 1;
    }
    .ta-voicing-label {
      font-size: 11px;
      color: var(--text-disabled);
      font-style: italic;
    }
    .ta-ouvir-campo-btn {
      width: 100%;
      background: rgba(212,175,55,.1);
      border: 1.5px solid var(--gold);
      border-radius: 12px;
      padding: 13px;
      color: var(--gold);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background .15s;
    }
    .ta-ouvir-campo-btn:active { background: rgba(212,175,55,.2); }
    .ta-ouvir-campo-btn:disabled { opacity: .5; cursor: default; }
    .ta-progresso {
      height: 3px;
      background: var(--surface-3);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 6px;
    }
    .ta-progresso-bar {
      height: 100%;
      background: var(--gold);
      border-radius: 2px;
      transition: width .15s linear;
    }

    /* — Sobreposição — cards — */
    .so-card {
      background: var(--surface-2);
      border-radius: 14px;
      padding: 14px;
    }
    .so-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .so-grau-badge {
      background: var(--surface-3);
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-disabled);
      min-width: 36px;
      text-align: center;
    }
    .so-resultado-nome {
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-primary);
      flex: 1;
    }
    .so-especial-badge {
      background: rgba(232,121,249,.15);
      color: #e879f9;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 700;
    }
    .so-maos-row {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .so-mao-card {
      flex: 1;
      min-width: 120px;
      background: var(--surface-3);
      border-radius: 10px;
      padding: 10px;
    }
    .so-mao-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 4px;
    }
    .so-mao-label.esq { color: var(--success); }
    .so-mao-label.dir { color: var(--gold); }
    .so-mao-nome {
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-primary);
    }
    .so-mao-tipo { font-size: 11px; color: var(--text-disabled); margin-top: 2px; }
    .so-extensoes {
      font-size: 12px;
      color: var(--text-disabled);
      margin-bottom: 10px;
    }
    .so-extensoes strong { color: var(--gold); }

    /* ── Tétrades — tipos grid ── */
    .ctet-tipos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    /* ══════════════════════════════════════════════════════════
       CALCULADORA DE INTERVALOS — redesenho S153
       Layout: resultado dominante no topo + mini-teclado + áudio
       Modos: Calcular (raiz + intervalo → nota) | Identificar (2 notas → intervalo)
       ══════════════════════════════════════════════════════════ */

    /* Header da ferramenta com botão (i) */
    .ci-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:0 16px; }
    .ci-info-btn {
      width:30px; height:30px; border-radius:50%;
      background:var(--surface-2); border:1px solid var(--border);
      color:var(--text-secondary);
      font-family:var(--font-display); font-size:14px; font-weight:700;
      cursor:pointer; flex-shrink:0; line-height:1;
      display:flex; align-items:center; justify-content:center;
      margin-top:6px;
    }
    .ci-info-btn:active { transform:scale(0.92); }

    /* Botão favoritar padrão das ferramentas (Opção A — ícone no header, ao lado do "i") */
    .ci-head-actions { display:flex; align-items:flex-start; gap:8px; flex-shrink:0; }
    .tool-fav-btn {
      width:30px; height:30px; border-radius:50%;
      background:var(--surface-2); border:1px solid var(--border);
      color:var(--text-secondary);
      cursor:pointer; flex-shrink:0; line-height:1;
      display:flex; align-items:center; justify-content:center;
      margin-top:6px;
      -webkit-tap-highlight-color:transparent;
      transition: color .15s, border-color .15s, background .15s, transform .1s;
    }
    .tool-fav-btn:active { transform:scale(0.92); }
    .tool-fav-btn.ativo {
      color:var(--error);
      border-color:rgba(248,113,113,0.5);
      background:rgba(248,113,113,0.12);
    }
    .tool-fav-btn svg { display:block; }

    /* Mode toggle — Calcular / Identificar */
    .ci-mode-toggle {
      margin:0 16px 12px; padding:4px; gap:4px;
      display:flex; background:var(--surface-2);
      border-radius:12px; border:1px solid var(--border);
    }
    .ci-mode-btn {
      flex:1; height:34px; border:0; background:transparent;
      color:var(--text-secondary);
      font-family:var(--font-body); font-size:12.5px; font-weight:600;
      letter-spacing:0.2px; cursor:pointer; border-radius:8px;
      transition:background 0.15s, color 0.15s;
    }
    .ci-mode-btn.ativo { background:var(--surface-3); color:var(--text-primary); }

    /* Card de resultado */
    .ci-result-card {
      margin:0 16px 14px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:14px; padding:14px;
      display:flex; flex-direction:column; gap:12px;
    }
    .ci-result-eq { display:flex; align-items:center; justify-content:center; gap:10px; }
    .ci-result-note {
      width:50px; height:50px; border-radius:12px;
      background:var(--surface-2); border:1px solid var(--border-strong);
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-display); font-weight:700; font-size:22px;
      color:var(--text-primary);
    }
    .ci-result-note.root { background:rgba(212,175,55,0.12); border-color:rgba(212,175,55,0.5); color:var(--gold); }
    .ci-result-note.target { background:rgba(168,144,32,0.10); border-color:rgba(168,144,32,0.45); color:var(--bronze); }
    .ci-result-note.empty { background:transparent; border-style:dashed; color:var(--text-disabled); font-size:18px; }
    .ci-result-arrow {
      flex:1; max-width:90px; height:2px; background:var(--border-strong);
      display:flex; align-items:center; justify-content:center;
    }
    .ci-result-arrow span {
      background:var(--surface); padding:0 8px;
      font-family:var(--font-display); font-size:12px; font-weight:700;
      color:var(--bronze); letter-spacing:0.4px;
    }
    .ci-result-arrow.empty span { color:var(--text-disabled); }

    /* Mini-teclado (estilo Progressões) — dimensões e cores aplicadas inline pelo JS */
    .ci-piano { user-select:none; overflow-x:auto; margin:4px -4px 0; padding:0 4px; }

    /* Result meta (nome do intervalo) */
    .ci-result-meta {
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding-top:10px; border-top:1px solid var(--border);
    }
    .ci-result-meta-name {
      font-family:var(--font-display); font-size:14px; font-weight:600;
      color:var(--text-primary);
    }
    .ci-result-meta-sub {
      font-family:var(--font-mono); font-size:10px;
      color:var(--text-secondary); letter-spacing:0.3px; margin-top:2px;
      text-transform:uppercase;
    }
    .ci-audio-btn {
      width:36px; height:36px; border-radius:50%;
      background:var(--surface-2); border:1px solid var(--border-strong);
      color:var(--gold); cursor:pointer; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      transition:background 0.15s, transform 0.1s;
    }
    .ci-audio-btn:hover { background:var(--surface-3); }
    .ci-audio-btn:active { transform:scale(0.92); }
    .ci-audio-btn[disabled] { opacity:0.35; cursor:not-allowed; pointer-events:none; }

    /* Oct badge */
    .ci-oct-badge {
      display:inline-block;
      font-family:var(--font-display); font-size:10px; font-weight:700;
      background:rgba(168,144,32,0.18); color:var(--bronze);
      border:1px solid rgba(168,144,32,0.4);
      border-radius:6px; padding:2px 6px; letter-spacing:0.3px;
      margin-left:8px;
    }

    /* Section labels */
    .ci-section { padding:0 16px; margin-top:12px; }
    .ci-section-h {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:8px;
    }
    .ci-section-label {
      font-family:var(--font-display); font-size:11px;
      letter-spacing:1.5px; text-transform:uppercase;
      color:var(--text-secondary); font-weight:600;
    }
    .ci-check { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-secondary); cursor:pointer; user-select:none; }
    .ci-check .box {
      width:15px; height:15px; border-radius:4px;
      border:1.5px solid var(--border-strong);
      display:flex; align-items:center; justify-content:center;
      transition:background 0.15s, border-color 0.15s;
    }
    .ci-check.on { color:var(--text-primary); }
    .ci-check.on .box { background:var(--gold); border-color:var(--gold); }

    /* Grade de notas (6×2) — usada nos dois modos */
    .ci-notes-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
    .ci-note-pill {
      height:40px; border-radius:10px;
      background:var(--surface); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-display); font-weight:700; font-size:15px;
      color:var(--text-primary);
      cursor:pointer; transition:background 0.15s, border-color 0.15s;
    }
    .ci-note-pill:hover { background:var(--surface-2); }
    .ci-note-pill:active { transform:scale(0.96); }
    .ci-note-pill.active-root { background:rgba(212,175,55,0.12); border-color:var(--gold); color:var(--gold); }
    .ci-note-pill.active-target { background:rgba(168,144,32,0.10); border-color:var(--bronze); color:var(--bronze); }

    /* Grade de intervalos (4×3) */
    .ci-intervals-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
    .ci-int-pill {
      position:relative;
      height:50px; border-radius:10px;
      background:var(--surface); border:1px solid var(--border);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
      cursor:pointer; transition:background 0.15s, border-color 0.15s;
    }
    .ci-int-pill:hover { background:var(--surface-2); }
    .ci-int-pill:active { transform:scale(0.96); }
    .ci-int-pill .name { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-primary); }
    .ci-int-pill .sub { font-family:var(--font-mono); font-size:9px; color:var(--text-disabled); letter-spacing:0.4px; }
    .ci-int-pill.ativo { background:rgba(212,175,55,0.14); border-color:var(--gold); }
    .ci-int-pill.ativo .name { color:var(--gold); }
    .ci-int-pill.ativo .sub { color:var(--bronze); }
    .ci-int-pill .pill-oct {
      position:absolute; top:-6px; right:-4px;
      background:var(--bronze); color:#1a1a1a;
      font-family:var(--font-display); font-size:8px; font-weight:700;
      padding:2px 5px; border-radius:6px;
    }

    /* Modo Identificar — slots */
    .ci-inverse-slots { display:flex; align-items:center; justify-content:center; gap:10px; padding:4px 0 4px; }
    .ci-inverse-slot {
      flex:1; height:64px; border-radius:12px;
      border:1.5px dashed var(--border-strong); background:var(--surface);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
      color:var(--text-disabled);
      font-family:var(--font-display); font-size:9px; letter-spacing:1.2px;
      cursor:pointer;
    }
    .ci-inverse-slot.active { border-style:solid; border-color:var(--gold-border); }
    .ci-inverse-slot.filled-a { border-style:solid; border-color:var(--gold); background:rgba(212,175,55,0.08); color:var(--text-secondary); }
    .ci-inverse-slot.filled-a .big { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--gold); letter-spacing:0; }
    .ci-inverse-slot.filled-b { border-style:solid; border-color:var(--bronze); background:rgba(168,144,32,0.06); color:var(--text-secondary); }
    .ci-inverse-slot.filled-b .big { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--bronze); letter-spacing:0; }
    .ci-inverse-arrow { color:var(--text-disabled); }

    /* Resultado do modo Identificar */
    .ci-id-result {
      display:flex; align-items:baseline; justify-content:center; gap:10px;
      padding-top:10px; border-top:1px solid var(--border);
    }
    .ci-id-result-label { font-family:var(--font-display); font-size:14px; color:var(--text-secondary); }
    .ci-id-result-big { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--gold); letter-spacing:0.5px; }

    /* Botão "limpar" no modo identificar */
    .ci-clear-btn {
      margin-left:auto;
      background:transparent; border:1px solid var(--border-strong);
      color:var(--text-secondary);
      font-family:var(--font-body); font-size:11px; font-weight:600;
      padding:6px 10px; border-radius:8px; cursor:pointer;
    }
    .ci-clear-btn:hover { background:var(--surface-2); color:var(--text-primary); }

    /* Recentes (modo Identificar) */
    .ci-recent-row { display:flex; gap:6px; flex-wrap:wrap; }
    .ci-recent-chip {
      padding:6px 10px; background:var(--surface); border:1px solid var(--border);
      border-radius:8px; font-family:var(--font-mono); font-size:11px;
      color:var(--text-secondary); cursor:pointer;
    }
    .ci-recent-chip:hover { background:var(--surface-2); color:var(--text-primary); }
    .ci-recent-empty { font-size:11px; color:var(--text-disabled); font-style:italic; }

    /* Modal de info */
    .ci-info-modal {
      position:absolute; inset:0; background:rgba(0,0,0,0.7);
      display:flex; align-items:center; justify-content:center;
      z-index:50; padding:24px;
    }
    .ci-info-modal[hidden] { display:none; }
    .ci-info-modal-card {
      background:var(--surface); border:1px solid var(--border-strong);
      border-radius:14px; padding:18px;
      max-width:340px; width:100%;
      display:flex; flex-direction:column; gap:12px;
    }
    .ci-info-modal-title {
      font-family:var(--font-display); font-size:16px; font-weight:700;
      color:var(--text-primary);
    }
    .ci-info-modal-text {
      font-size:13.5px; color:var(--text-primary); line-height:1.55;
    }
    .ci-info-modal-close {
      align-self:flex-end;
      background:var(--gold); color:#1a1a1a; border:0;
      padding:8px 16px; border-radius:8px;
      font-family:var(--font-body); font-weight:700; font-size:12px;
      cursor:pointer;
    }

    /* ════════════════════════════════════════════
       FERRAMENTA — MAPA DO TOM (roda do campo harmônico)
    ════════════════════════════════════════════ */
    /* toggles (Maior/Menor · Tríade/Tétrade) */
    .mt-toggles { display:flex; gap:8px; padding:0 16px; margin-top:14px; }
    .mt-seg {
      flex:1; display:flex; gap:4px; padding:4px;
      background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
    }
    .mt-seg button {
      flex:1; height:34px; border:0; background:transparent;
      color:var(--text-secondary);
      font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:0.3px;
      cursor:pointer; border-radius:8px; transition:background 0.15s, color 0.15s;
    }
    .mt-seg button.on { background:var(--surface-3); color:var(--text-primary); }

    .mt-subtitle { font-size:13px; color:var(--text-secondary); text-align:center; margin:14px 16px 0; }
    .mt-subtitle b { color:var(--text-primary); font-weight:600; }

    .mt-wheel-wrap { padding:0 16px; margin-top:10px; }
    .mt-wheel-wrap svg { width:100%; height:auto; display:block; max-width:420px; margin:0 auto; }
    .mt-slice { cursor:pointer; transition:filter 0.12s; }
    .mt-slice:hover { filter:brightness(1.18); }
    .mt-slice.mt-gray { cursor:default; }
    .mt-slice.mt-gray:hover { filter:none; }
    .mt-chordtxt { font-family:var(--font-display); font-weight:700; fill:#F5F1E8; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
    .mt-grautxt { font-family:var(--font-body); font-weight:600; fill:#E8E1D0; text-anchor:middle; dominant-baseline:central; pointer-events:none; opacity:0.92; }
    .mt-graytxt { fill:#5a5a5a !important; }

    .mt-piano { width:100%; max-width:420px; margin:14px auto 0; display:block; }
    .mt-piano svg, svg.mt-piano { width:100%; height:auto; display:block; }

    .mt-legend { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:18px 16px 4px; font-size:12.5px; color:var(--text-secondary); }
    .mt-legend span { display:inline-flex; align-items:center; gap:6px; }
    .mt-dot { width:11px; height:11px; border-radius:3px; display:inline-block; }
    .mt-dot-ring { background:transparent; border:2px solid var(--gold); }

    /* card de info do acorde */
    .mt-info {
      margin:14px 16px 0; background:var(--surface); border:1px solid var(--border);
      border-radius:14px; padding:16px 18px; min-height:74px;
    }
    .mt-chord-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .mt-chord { font-family:var(--font-display); font-weight:700; font-size:26px; }
    .mt-play {
      display:inline-flex; align-items:center; gap:6px; cursor:pointer;
      font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:0.3px;
      color:#1a1a1a; background:var(--gold); border:none; border-radius:999px; padding:8px 16px; transition:filter 0.12s;
    }
    .mt-play:hover { filter:brightness(1.08); }
    .mt-play:active { transform:scale(0.96); }
    .mt-play svg { display:block; }
    .mt-role { font-size:13px; color:var(--text-secondary); margin-top:6px; }
    .mt-role b { font-weight:600; }
    .mt-notes { margin-top:8px; font-family:var(--font-display); font-size:15px; color:#d8d0bd; letter-spacing:0.5px; }

    /* acordes emprestados (modo menor) */
    .mt-swaps {
      margin:12px 16px 0; border:1px dashed var(--border-strong); border-radius:14px;
      padding:14px 16px; font-size:13px; color:var(--text-secondary); background:#121212; display:none;
    }
    .mt-swaps.show { display:block; }
    .mt-swaps h3 { font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--bronze); margin-bottom:10px; }
    .mt-swaps code { font-family:var(--font-display); font-weight:600; color:#F5F1E8; background:#1f1f1f; padding:1px 7px; border-radius:6px; }
    .mt-swaps code.dim { color:#888; background:#181818; }
    .mt-swaps-intro { font-size:12px; color:#8a8a8a; line-height:1.5; margin:-2px 0 12px; }
    .mt-swap-row { padding:11px 0; border-top:1px solid #232323; }
    .mt-swap-row:first-of-type { border-top:none; }
    .mt-swap-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
    .mt-swap-chord { display:inline-flex; align-items:center; gap:7px; font-size:15px; }
    .mt-swap-chord .arr { color:#666; font-weight:600; }
    .mt-swap-why { font-size:12.5px; color:#9a9a9a; line-height:1.45; }
    .mt-swap-src { font-family:var(--font-display); font-weight:600; font-size:9.5px; letter-spacing:0.6px; text-transform:uppercase; color:var(--bronze); border:1px solid #33301f; background:#171510; border-radius:999px; padding:3px 9px; }

    /* ── Gerador de Progressões ── */
    .gprog-card {
      background: var(--surface-2);
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .gprog-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .gprog-estilo-badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text-disabled);
      background: var(--surface-3);
      border-radius: 6px;
      padding: 3px 8px;
    }
    .gprog-nome {
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-primary);
      flex: 1;
    }
    .gprog-graus-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .gprog-grau-chip {
      background: var(--surface-3);
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-primary);
    }
    .gprog-acordes-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .gprog-acorde-chip {
      background: rgba(212,175,55,.12);
      border: 1px solid rgba(212,175,55,.3);
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--gold);
    }

    /* ── Drop Voicings ── */
    .drop-card {
      background: var(--surface-2);
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .drop-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .drop-inv-badge {
      background: var(--surface-3);
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-disabled);
    }
    .drop-nome {
      font-size: 15px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-primary);
      flex: 1;
    }
    .drop-voices-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .drop-voice-chip {
      background: var(--surface-3);
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-primary);
    }
    .drop-voice-chip.dropped {
      background: rgba(212,175,55,.15);
      color: var(--gold);
    }

    /* ── Onboarding ─────────────────────────────────────────────────── */
    #onboarding-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.72);
      z-index: 9000;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: obEntrar 0.3s ease both;
    }

    #onboarding-overlay.ob-saindo { animation: obSair 0.35s ease both; }

    @keyframes obEntrar { from { opacity: 0; } to { opacity: 1; } }
    @keyframes obSair   { from { opacity: 1; } to { opacity: 0; } }

    .ob-sheet {
      background: #18181f;
      border: 1px solid rgba(255,255,255,0.08);
      border-bottom: none;
      border-radius: 28px 28px 0 0;
      width: 100%;
      max-width: 480px;
      padding: 20px 28px 44px;
      position: relative;
      animation: obSheetEntrar 0.35s cubic-bezier(0.16,1,0.3,1) both;
    }

    #onboarding-overlay.ob-saindo .ob-sheet { animation: obSheetSair 0.3s ease both; }

    @keyframes obSheetEntrar { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes obSheetSair   { from { transform: translateY(0); } to { transform: translateY(100%); } }

    .ob-handle {
      width: 36px;
      height: 4px;
      background: rgba(255,255,255,0.15);
      border-radius: 2px;
      margin: 0 auto 24px;
    }

    .ob-skip {
      position: absolute;
      top: 22px;
      right: 20px;
      background: none;
      border: none;
      color: var(--text-disabled);
      font-size: 13px;
      cursor: pointer;
      padding: 4px 8px;
      font-family: var(--font-body);
    }

    .ob-slides {
      min-height: 220px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
    }

    .ob-slide-saindo .ob-slide {
      opacity: 0;
      transform: translateX(-16px);
      transition: opacity 0.15s, transform 0.15s;
    }

    .ob-slide {
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* ícone com halo */
    .ob-icon-wrap {
      position: relative;
      width: 96px;
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 28px;
    }

    .ob-icon-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--gold-subtle);
    }

    .ob-icon-ring {
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      border: 1px solid var(--gold-border);
    }

    .ob-icon-wrap svg {
      width: 52px;
      height: 52px;
      color: var(--gold);
      position: relative;
      z-index: 1;
    }

    /* ícone do app — sem halo/ring */
    .ob-icon-wrap.appicon::before { display: none; }
    .ob-icon-icon-ring { display: none; }

    .ob-icon-app {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      position: relative;
      z-index: 1;
    }

    .ob-titulo {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 12px;
      line-height: 1.2;
      letter-spacing: -0.3px;
    }

    .ob-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.65;
      max-width: 290px;
      margin: 0 auto;
    }

    .ob-desc strong { color: var(--text-primary); font-weight: 600; }

    .ob-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32px;
    }

    .ob-dots { display: flex; gap: 6px; align-items: center; }

    .ob-dot {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: var(--border-strong);
      transition: all 0.25s;
    }

    .ob-dot.ativo {
      width: 22px;
      background: var(--gold);
    }

    .ob-next {
      background: var(--gold);
      color: #000;
      border: none;
      border-radius: var(--radius-pill);
      padding: 12px 24px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.1s, opacity 0.1s;
      -webkit-tap-highlight-color: transparent;
    }

    .ob-next:active { transform: scale(0.96); opacity: 0.85; }

    .ob-next-final {
      background: var(--gold);
      padding: 13px 26px;
      font-size: 15px;
    }

    /* ── Estado vazio do tema (sem conteúdo cadastrado) ─── */
    .tema-em-breve {
      text-align: center;
      padding: 32px 16px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .teb-icon {
      width: 56px; height: 56px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 16px;
      background: rgba(255,255,255,0.05);
      color: var(--text-disabled);
      margin-bottom: 4px;
    }

    .teb-titulo {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-secondary);
    }

    .teb-desc {
      font-size: 13px;
      color: var(--text-disabled);
      line-height: 1.55;
      max-width: 260px;
    }

    .teb-btn {
      margin-top: 8px;
      background: none;
      border: 1px solid var(--border-strong);
      color: var(--text-secondary);
      border-radius: var(--radius-pill);
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .teb-btn:active { opacity: 0.7; }

    /* ── Nota discreta na Missão do Dia (fallback) ────── */

    /* ═══════════════════════════════════════════
       ESTADOS VAZIOS E DE ERRO — hp-empty / hp-error
    ═══════════════════════════════════════════ */
    .hp-empty, .hp-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      text-align: center;
      gap: 10px;
    }
    .hp-state-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(255,255,255,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-disabled);
      margin-bottom: 4px;
    }
    .hp-state-icon--error { color: #f87171; background: rgba(248,113,113,0.1); }
    .hp-state-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
    }
    .hp-state-sub {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      max-width: 260px;
    }
    .hp-state-retry {
      margin-top: 6px;
      padding: 8px 20px;
      border-radius: 8px;
      border: 1px solid rgba(212,175,55,0.3);
      background: transparent;
      color: var(--gold);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    /* ═══════════════════════════════════════════
       TELA DE ACESSO EXPIRADO
    ═══════════════════════════════════════════ */
    #screen-expirado {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
    }
    .expirado-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 28px 60px;
      max-width: 420px;
      width: 100%;
      text-align: center;
      gap: 16px;
    }
    .expirado-logo {
      font-family: var(--font-serif);
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0;
      color: #fff;
      text-transform: none;
      margin-bottom: 4px;
    }
    .expirado-logo span { color: var(--gold); }
    .expirado-icon {
      color: var(--gold);
      line-height: 0;
    }
    .expirado-titulo {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1.2;
    }
    .expirado-desc {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 320px;
    }
    .expirado-beneficios {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      text-align: left;
    }
    .expirado-item {
      font-size: 14px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .expirado-btn-whatsapp {
      width: 100%;
      padding: 16px;
      border-radius: var(--radius-md);
      border: none;
      background: #25d366;
      color: #fff;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: opacity 0.15s;
      -webkit-tap-highlight-color: transparent;
      margin-top: 8px;
    }
    .expirado-btn-whatsapp:active { opacity: 0.85; }
    .expirado-btn-sair {
      background: none;
      border: none;
      color: var(--text-disabled);
      font-family: var(--font-body);
      font-size: 13px;
      cursor: pointer;
      padding: 8px;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── Nav: ajuste somente quando instalado como web app ──────── */
    @media (display-mode: standalone) {
      :root { --nav-height: 68px; }
      .nav {
        padding-top: 6px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
      }
    }

    /* ══ Modal Feedback ══ */
    .modal--feedback {
      align-items: stretch;
      max-width: 360px;
      text-align: left;
    }
    .modal--feedback .modal-icon,
    .modal--feedback .modal-title,
    .modal--feedback .modal-desc {
      align-self: center;
      text-align: center;
    }
    .fb-chips {
      display: flex;
      gap: 8px;
    }
    .fb-chip {
      flex: 1;
      padding: 8px 4px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-strong);
      background: var(--surface-2);
      color: var(--text-secondary);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .fb-chip--active {
      border-color: var(--gold);
      color: var(--gold);
      background: var(--gold-subtle);
    }
    .fb-textarea {
      width: 100%;
      min-height: 100px;
      padding: 12px 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-strong);
      background: var(--surface-2);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.5;
      resize: vertical;
      box-sizing: border-box;
    }
    .fb-textarea:focus {
      outline: none;
      border-color: var(--gold-border);
    }
    .fb-textarea::placeholder { color: var(--text-disabled); }
    .fb-check-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
    }
    .fb-check-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--gold);
      cursor: pointer;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════════════════════════════════
       SINO DE NOTIFICAÇÕES (Home) + TELA DE AVISOS
       ══════════════════════════════════════════════════════════════════════ */

    .inicio-sino {
      position: relative;
      flex-shrink: 0;
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: rgba(245, 241, 232, 0.55);
      cursor: pointer;
      transition: color 0.15s ease;
      align-self: flex-start;
      margin: -6px -10px 0 0;
      padding: 10px;
    }

    .inicio-sino:hover,
    .inicio-sino:focus-visible { color: var(--gold); }

    .inicio-sino.tem-novo { color: var(--gold); }

    .inicio-sino-icone { display: block; }

    /* Ponto vermelho pulsante quando há recado não lido (Opção A).
       O badge é controlado por _atualizarSinoBadge() (display none/'' ); o número
       fica oculto (font-size:0) — o que importa é o ponto. */
    .inicio-sino-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 9px;
      height: 9px;
      padding: 0;
      box-sizing: border-box;
      border-radius: 50%;
      background: var(--error, #ef4444);
      box-shadow: 0 0 0 2px var(--bg, #0D0D0D);
      font-size: 0;
      color: transparent;
      pointer-events: none;
    }
    .inicio-sino-badge::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--error, #ef4444);
      animation: sino-pulse 1.8s ease-out infinite;
    }
    @keyframes sino-pulse {
      0%   { transform: scale(1);   opacity: 0.55; }
      100% { transform: scale(2.6); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .inicio-sino-badge::after { animation: none; }
    }

    /* ── Tela de Notificações ───────────────────────────────────────────── */

    .notif-header {
      width: 100%;
      max-width: var(--content-max);
      padding: 14px var(--side-pad) 12px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .notif-eyebrow {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-disabled);
      margin-bottom: 4px;
    }

    .notif-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
    }

    .notif-scroll {
      width: 100%;
      max-width: var(--content-max);
      display: flex;
      flex-direction: column;
      padding: 6px var(--side-pad) 32px;
      gap: 10px;
      box-sizing: border-box;
    }

    .notif-item {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 14px 16px 14px 26px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--border);
      border-radius: 14px;
    }

    .notif-item.lido {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.05);
    }

    .notif-item-dot {
      position: absolute;
      left: 12px;
      top: 20px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 0 3px var(--gold-subtle);
    }

    .notif-item.lido .notif-item-dot { display: none; }

    .notif-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      margin: 4px 0;
    }

    .notif-pin-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 2px;
    }

    .notif-item-texto {
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-primary);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .notif-item.lido .notif-item-texto { color: rgba(245, 241, 232, 0.72); }

    .notif-item-link-btn {
      align-self: flex-start;
      margin-top: 4px;
      padding: 7px 14px;
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--gold);
      background: var(--gold-subtle);
      border: 1px solid rgba(212, 175, 55, 0.35);
      border-radius: 999px;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .notif-item-link-btn:hover { background: rgba(212, 175, 55, 0.16); }

    .notif-item-data {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--text-disabled);
      text-transform: uppercase;
      margin-top: 2px;
    }

    .notif-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 60px 20px;
      color: var(--text-disabled);
      text-align: center;
    }

    .notif-empty-icone {
      width: 36px;
      height: 36px;
      color: rgba(245, 241, 232, 0.25);
    }

    .notif-empty-texto {
      font-family: var(--font-body);
      font-size: 14px;
      color: rgba(245, 241, 232, 0.5);
      max-width: 240px;
      line-height: 1.4;
    }

    /* ══ Acessibilidade: respeitar usuários com sensibilidade a movimento ══ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }