/* ==========================================================================
   OrbiPlay (Orbizzy) — Styles
   Versão: PRO v3 (organizado + bonito, mantendo identidade)
   Observação: Mantém tokens originais de cor e componentes, só reorganiza.
   ========================================================================== */

/* 1) Tokens (cores, sombras, raios) */
:root{
  /* Identidade OrbiPlay */
  --brand: #fec639;
  --brand-2: #ffd871;
  --bg: #0a0a0a;
  --bg-2: #0f1115;
  --card: rgba(255,255,255,.06);
  --card-2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.12);

  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;

  --shadow: 0 12px 40px rgba(0,0,0,.52);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.42);
  --ring: 0 0 0 3px rgba(254,198,57,.24);

  --tap: 44px;
}

/* 2) Base / Reset */
*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  background: radial-gradient(1000px 600px at 12% -10%, rgba(254,198,57,.18), transparent 55%),
              radial-gradient(900px 600px at 100% 0%, rgba(120,180,255,.10), transparent 45%),
              var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A11y helpers */
.skip-link{
  position:absolute; left:-999px; top:10px;
  background:#fff; color:#111827;
  padding:10px 12px; border-radius: 12px;
  z-index: 999999;
}
.skip-link:focus{ left: 12px; outline: none; box-shadow: var(--ring); }
.sr-only{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* 3) Layout helpers */
.container{ width:min(1120px, 100%); margin:0 auto; padding: 16px; }
.row{ display:flex; gap: 12px; align-items:center; }
.grid{ display:grid; gap: 14px; }
.divider{ height:1px; background: var(--line); margin: 12px 0; }

/* 4) Typography */
h1,h2,h3{ margin: 0; letter-spacing: .2px; }
p{ margin: 0; color: var(--muted); line-height: 1.45; }

/* 5) Buttons / Inputs */
button, input, select, textarea{ font: inherit; color: inherit; }
.btn{
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: none; box-shadow: var(--ring); }

.btn-primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  border-color: rgba(0,0,0,.0);
  color: #111;
  font-weight: 800;
}
.btn-primary:hover{ filter: brightness(1.02); transform: translateY(-1px); }

.input{
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  outline: none;
}
.input:focus{ box-shadow: var(--ring); border-color: rgba(254,198,57,.35); }

/* 6) Cards */
.card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow-soft);
}
.card:hover{ border-color: rgba(255,255,255,.20); }
.pill{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

/* 7) Motion control */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .dots span{ animation: none !important; }
  .card, .btn, .icon-btn, .pill, .filter-chip{ transition: none !important; }
  .card:hover{ transform:none !important; }
}

/* ==========================================================================
   App CSS original (mantido)
   ========================================================================== */

/* ==========================================================================
       OrbiPlay PRO (Single-file)
       - UI Netflix + Spotify (com identidade Orbizzy)
       - Auth (login / cadastro) com hash (SHA-256) via WebCrypto
       - Player interno (vídeo/áudio) com histórico e progresso
       - Navegação por abas + search + filtros
       - Planos (R$ 9,90 / R$ 12,90)
       ========================================================================== */

    :root{
      --brand: #fec639;
      --brand-2: #e8b22a;

      --bg: #0a0a0a;
      --bg-2: #0f0f0f;
      --card: #141414;

      --text: #ffffff;
      --muted: #a3a3a3;
      --muted-2: #7b7b7b;

      --green: #1db954; /* vibe Spotify */
      --red: #e50914;   /* vibe Netflix */
      --shadow: rgba(0,0,0,.55);

      --radius: 18px;
      --radius-sm: 12px;

      --ring: 0 0 0 2px rgba(254,198,57,.35);
      --glass: rgba(255,255,255,.08);

      --max: 1200px;
    }

    *{ box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: radial-gradient(1200px 600px at 20% -10%, rgba(254,198,57,.10), transparent 60%),
                  radial-gradient(900px 500px at 85% 0%, rgba(29,185,84,.10), transparent 60%),
                  var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }

    a{ color: inherit; text-decoration: none; }
    button{ font-family: inherit; }

    /* ==========================================================================
       Loader
       ========================================================================== */
    #loader{
      position: fixed; inset:0;
      display:flex; flex-direction: column; gap: 16px;
      align-items:center; justify-content:center;
      background: #ffffff;
      z-index: 99999;
      transition: opacity .55s ease;
    }
    .dots{ display:flex; gap:10px; }
    .dots span{
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--brand);
      animation: bounce 1.15s infinite ease-in-out;
      opacity: .8;
    }
    .dots span:nth-child(2){ animation-delay: .18s; }
    .dots span:nth-child(3){ animation-delay: .36s; }
    @keyframes bounce{
      0%, 80%, 100%{ transform: scale(1); opacity: .55; }
      40%{ transform: scale(1.55); opacity: 1; }
    }
    .loader-text{
      font-weight: 600;
      color: #1f2937;
      font-size: 14px;
      letter-spacing: .2px;
    }

    /* ==========================================================================
       Top Nav
       ========================================================================== */
    nav{
      position: fixed; top:0; left:0; right:0;
      z-index: 2000;
      padding: 12px 18px;
      background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.22), transparent);
      transition: background .25s ease, padding .25s ease, box-shadow .25s ease;
    }
    .nav-inner{
      max-width: var(--max);
      margin: 0 auto;
      display:flex; align-items:center; justify-content: space-between; gap: 16px;
    }

    .brand{
      display:flex; align-items:center; gap: 12px;
      cursor: pointer;
      user-select: none;
    }
    .brand img{
      width: 40px; height: 40px; border-radius: 50%;
      border: 2px solid var(--brand);
      box-shadow: 0 10px 30px rgba(254,198,57,.18);
    }
    .brand .title{
      display:flex; flex-direction: column; line-height: 1.05;
    }
    .brand .title strong{
      font-size: 18px;
      letter-spacing: .3px;
      color: var(--brand);
    }
    .brand .title span{
      font-size: 11px;
      color: rgba(255,255,255,.68);
      letter-spacing: .3px;
    }

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

    .search{
      display:flex; align-items:center; gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.10);
      transition: .2s;
      min-width: 240px;
    }
    .search:focus-within{ border-color: rgba(254,198,57,.55); box-shadow: var(--ring); }
    .search input{
      width: 100%;
      border: none; outline: none;
      background: transparent;
      color: var(--text);
      font-size: 13px;
    }
    .icon-btn{
      width: 42px; height: 42px;
      border-radius: 999px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.10);
      cursor: pointer;
      transition: .2s;
    }
    .icon-btn:hover{ transform: translateY(-1px); border-color: rgba(254,198,57,.45); }
    .icon-btn:active{ transform: translateY(0px); }

    .pill{
      display:flex; align-items:center; gap: 8px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.10);
      cursor: pointer;
      transition: .2s;
      font-size: 12px;
      white-space: nowrap;
    }
    .pill i{ color: var(--brand); }
    .pill:hover{ border-color: rgba(254,198,57,.45); }

    /* ==========================================================================
       Sub-nav Tabs (Categorias)
       ========================================================================== */
    .tabs-wrap{
      margin-top: 78px;
      padding: 12px 18px 8px;
      position: sticky;
      top: 64px;
      z-index: 1500;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: linear-gradient(to bottom, rgba(10,10,10,.65), rgba(10,10,10,.25));
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .tabs{
      max-width: var(--max);
      margin: 0 auto;
      display:flex; gap: 10px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 6px;
    }
    .tabs::-webkit-scrollbar{ display:none; }

    .tab{
      display:flex; align-items:center; gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      cursor:pointer;
      transition: .2s;
      font-size: 12px;
      white-space: nowrap;
      user-select: none;
    }
    .tab:hover{ border-color: rgba(254,198,57,.35); }
    .tab.active{
      background: rgba(254,198,57,.14);
      border-color: rgba(254,198,57,.55);
      color: var(--brand);
      box-shadow: 0 10px 30px rgba(254,198,57,.10);
    }
    .tab i{ font-size: 14px; }

    /* ==========================================================================
       Sub-categorias (chips de filtro)
       ========================================================================== */
    .subtabs{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .filter-chip{
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      cursor: pointer;
      user-select: none;
      transition: .18s;
      display:flex;
      align-items:center;
      gap: 8px;
    }
    .filter-chip i{ color: rgba(254,198,57,.95); }
    .filter-chip:hover{ border-color: rgba(254,198,57,.35); transform: translateY(-1px); }
    .filter-chip.active{
      border-color: rgba(254,198,57,.55);
      background: rgba(254,198,57,.14);
      color: var(--brand);
      box-shadow: 0 10px 30px rgba(254,198,57,.10);
    }
    .filter-chip:active{ transform: translateY(0px); }

    .subtabs-wrap{ margin-top: 10px; }
    .subtoggle{
      width: 100%;
      display:flex;
      align-items:center;
      gap: 10px;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.92);
      cursor: pointer;
      transition: .18s;
      user-select:none;
    }
    .subtoggle:hover{ border-color: rgba(254,198,57,.35); }
    .subtoggle-left{
      display:flex; align-items:center; gap: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .15px;
    }
    .subtoggle-left i{ color: rgba(254,198,57,.95); }
    .subtoggle-meta{
      margin-left: auto;
      font-size: 11px;
      color: rgba(255,255,255,.62);
      max-width: 44%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .subtoggle .chev{
      font-size: 12px;
      color: rgba(255,255,255,.65);
      transition: transform .18s ease;
    }
    .subtoggle.open .chev{ transform: rotate(180deg); }
    .subtabs-body{ margin-top: 10px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.filter-chip{ width: 100%; justify-content: center; }

    @media (max-width: 520px){
      .subtoggle-meta{ max-width: 38%; }
      .subtabs-body{ grid-template-columns: 1fr; gap: 8px; }
      .filter-chip{ padding: 7px 10px; font-size: 11px; }
    }

    /* ==========================================================================
       Hero
       ========================================================================== */
    .hero{
      position: relative;
      min-height: 64vh;
      display:flex;
      align-items:flex-end;
      padding: 0 18px 26px;
      overflow:hidden;
    }
    .hero-inner{
      max-width: var(--max);
      margin: 0 auto;
      width: 100%;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 18px;
      align-items:end;
    }
    .hero-media{
      position:absolute; inset:0;
      z-index: -2;
    }
    .hero-media img{
      width:100%; height:100%;
      object-fit: cover;
      filter: saturate(1.05) contrast(1.08);
      transform: scale(1.03);
      transition: opacity .6s ease;
    }
    .hero-overlay{
      position:absolute; inset:0;
      z-index: -1;
      background: linear-gradient(to top, var(--bg) 20%, rgba(10,10,10,.35) 55%, rgba(10,10,10,.12)),
                  linear-gradient(to right, rgba(10,10,10,.90) 12%, rgba(10,10,10,.15) 70%);
    }

    .hero-card{
      padding: 18px 18px 14px;
      border-radius: var(--radius);
      background: rgba(20,20,20,.55);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 25px 50px var(--shadow);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .hero-title{
      font-size: 44px;
      line-height: 1.02;
      margin: 0;
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .hero-sub{
      margin: 10px 0 14px;
      color: rgba(255,255,255,.76);
      font-size: 14px;
      max-width: 60ch;
    }
    .hero-meta{
      display:flex; flex-wrap: wrap; gap: 10px;
      margin: 0 0 14px;
    }
    .chip{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.07);
      color: rgba(255,255,255,.86);
      display:flex; align-items:center; gap: 7px;
    }
    .chip .dot{
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px rgba(29,185,84,.15);
    }

    .hero-cta{
      display:flex; flex-wrap: wrap; gap: 10px;
    }
    .btn{
      border: none;
      cursor:pointer;
      border-radius: 12px;
      padding: 12px 16px;
      font-weight: 700;
      font-size: 13px;
      display:flex; align-items:center; gap: 10px;
      transition: .2s;
      user-select: none;
    }
    .btn-primary{
      background: #ffffff;
      color: #111827;
    }
    .btn-primary:hover{ transform: translateY(-1px); }
    .btn-secondary{
      background: rgba(109,109,110,.38);
      color: #fff;
      border: 1px solid rgba(255,255,255,.14);
    }
    .btn-secondary:hover{ background: rgba(109,109,110,.25); }

    .hero-side{
      display:flex; flex-direction: column; gap: 12px;
      padding-bottom: 4px;
    }
    .mini-card{
      padding: 14px;
      border-radius: var(--radius);
      background: rgba(20,20,20,.50);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 25px 50px rgba(0,0,0,.35);
    }
    .mini-card h3{
      margin: 0;
      font-size: 14px;
      color: rgba(255,255,255,.92);
    }
    .mini-card p{
      margin: 8px 0 0;
      font-size: 12px;
      color: rgba(255,255,255,.68);
      line-height: 1.55;
    }
    .mini-card .price{
      margin-top: 10px;
      display:flex; align-items: baseline; gap: 8px;
      color: var(--brand);
      font-weight: 800;
    }
    .mini-card .price small{
      font-weight: 600;
      color: rgba(255,255,255,.65);
    }

    /* ==========================================================================
       Main content
       ========================================================================== */
    main{
      padding: 14px 18px 70px;
    }
    .main-inner{
      max-width: var(--max);
      margin: 0 auto;
    }

    .section{
      margin-top: 18px;
    }
    .section-head{
      display:flex; align-items:flex-end; justify-content: space-between; gap: 12px;
      margin: 18px 2px 10px;
    }
    .section-head h2{
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .2px;
    }
    .section-head .hint{
      font-size: 12px;
      color: rgba(255,255,255,.58);
    }

    .row{
      display:flex;
      gap: 14px;
      overflow-x: auto;
      padding: 6px 2px 18px;
      scroll-behavior: smooth;
      scrollbar-width: none;
    }
    .row::-webkit-scrollbar{ display:none; }

    .card{
      width: 170px;
      min-width: 170px;
      border-radius: 14px;
      overflow: hidden;
      background: var(--card);
      border: 1px solid rgba(255,255,255,.10);
      cursor:pointer;
      transition: .22s;
      position: relative;
    }
    .card:hover{
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 18px 40px rgba(0,0,0,.55);
      border-color: rgba(254,198,57,.35);
      z-index: 20;
    }
    .card img{
      width: 100%;
      height: 250px;
      object-fit: cover;
      display:block;
    }
    .card .overlay{
      position:absolute; left:0; right:0; bottom:0;
      padding: 34px 10px 10px;
      background: linear-gradient(transparent, rgba(0,0,0,.95));
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .1px;
    }
    .badge{
      position:absolute; top: 10px; left: 10px;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .3px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .badge.red{ border-color: rgba(229,9,20,.5); color: #fff; }
    .badge.green{ border-color: rgba(29,185,84,.55); color: #fff; }
    .badge.brand{ border-color: rgba(254,198,57,.60); color: var(--brand); }

    .pill-mini{
      position:absolute; top: 10px; right: 10px;
      display:flex; align-items:center; gap: 6px;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .25px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .pill-mini i{ color: var(--brand); }

    /* ==========================================================================
       Footer
       ========================================================================== */
    footer{
      border-top: 1px solid rgba(255,255,255,.06);
      padding: 44px 18px 26px;
      background: rgba(0,0,0,.35);
    }
    .footer-inner{
      max-width: var(--max);
      margin: 0 auto;
      text-align: center;
    }
    .socials{
      display:flex; justify-content:center; gap: 16px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .socials a{
      width: 44px; height: 44px;
      display:grid; place-items:center;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      transition: .2s;
    }
    .socials a:hover{ transform: translateY(-2px); border-color: rgba(254,198,57,.35); }
    .foot-links{
      display:flex; justify-content:center; flex-wrap: wrap; gap: 14px;
      margin: 12px 0 16px;
      font-size: 12px;
      color: rgba(255,255,255,.68);
    }
    .copy{
      font-size: 11px;
      color: rgba(255,255,255,.48);
      margin: 0;
    }

    /* ==========================================================================
       Modals (Auth + Player + Planos)
       ========================================================================== */
    .modal{
      position: fixed; inset: 0;
      display:none;
      align-items:center; justify-content:center;
      z-index: 5000;
      background: rgba(0,0,0,.68);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 18px;
    }
    .modal.show{ display:flex; }

    .modal-card{
      width: 100%;
      max-width: 420px;
      border-radius: 22px;
      background: rgba(20,20,20,.60);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 25px 60px rgba(0,0,0,.6);
      overflow:hidden;
      position: relative;
      /* evita estourar a tela (principalmente no celular) */
      max-height: 86vh;
      display: flex;
      flex-direction: column;
    }
    .modal-head{
      padding: 16px 18px 10px;
      display:flex; align-items:center; justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .modal-head strong{
      color: var(--brand);
      letter-spacing: .2px;
      font-size: 14px;
    }
    .close{
      width: 36px; height: 36px;
      border-radius: 999px;
      display:grid; place-items:center;
      background: rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.12);
      cursor:pointer;
      transition: .2s;
    }
    .close:hover{
      background: rgba(254,198,57,.14);
      border-color: rgba(254,198,57,.45);
    }

    .modal-body{
      padding: 16px 18px 18px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .modal-body h2{
      margin: 0 0 8px;
      font-size: 18px;
      color: rgba(255,255,255,.95);
    }
    .modal-body p{
      margin: 0 0 14px;
      font-size: 12px;
      color: rgba(255,255,255,.68);
      line-height: 1.55;
    }

    .input{
      width: 100%;
      display:flex; align-items:center; gap: 10px;
      padding: 12px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      margin: 10px 0;
      transition: .2s;
    }
    .input:focus-within{
      border-color: rgba(254,198,57,.55);
      box-shadow: var(--ring);
    }
    .input i{ color: var(--brand); width: 18px; text-align:center; }
    .input input{
      width: 100%;
      background: transparent;
      border: none;
      outline:none;
      color: var(--text);
      font-size: 13px;
    }
    .row-mini{
      display:flex; justify-content: space-between; align-items:center;
      gap: 12px;
      margin-top: 8px;
      font-size: 12px;
      color: rgba(255,255,255,.70);
    }
    .row-mini label{ display:flex; align-items:center; gap: 10px; cursor:pointer; user-select:none; }
    .row-mini input[type="checkbox"]{ accent-color: var(--brand); transform: translateY(1px); }

    .btn-wide{
      width: 100%;
      justify-content: center;
      background: var(--brand);
      color: #111827;
      padding: 12px 14px;
      border-radius: 14px;
      font-weight: 900;
      border: none;
      cursor:pointer;
      transition: .2s;
      margin-top: 12px;
    }
    .btn-wide:hover{ filter: brightness(1.03); transform: translateY(-1px); }
    .btn-wide:active{ transform: translateY(0); }

    .switch{
      margin-top: 12px;
      font-size: 12px;
      color: rgba(255,255,255,.70);
      text-align:center;
    }
    .switch a{
      color: var(--brand);
      font-weight: 700;
      cursor: pointer;
    }

    .hint-box{
      margin-top: 12px;
      border-radius: 14px;
      padding: 12px;
      background: rgba(29,185,84,.10);
      border: 1px solid rgba(29,185,84,.20);
      color: rgba(255,255,255,.82);
      font-size: 12px;
      line-height: 1.55;
    }
    .hint-box i{ color: var(--green); margin-right: 8px; }

    /* Player modal (mais largo) */
    .modal-card.player{
      max-width: 900px;
      background: rgba(10,10,10,.72);
    }
    .player-grid{
      display:grid;
      grid-template-columns: 1.4fr .6fr;
      gap: 14px;
    }
    .player-shell{
      border-radius: 18px;
      overflow: hidden;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.10);
      min-height: 360px;
      position: relative;
    }
    .player-shell video,
    .player-shell audio{
      width: 100%;
      height: 100%;
      display:block;
      background: #000;
    }
    .player-info{
      padding: 10px 2px 0;
      display:flex; flex-direction: column; gap: 10px;
    }
    .player-title{
      margin: 0;
      font-size: 16px;
      color: rgba(255,255,255,.95);
      line-height: 1.25;
    }
    .player-sub{
      margin: 0;
      font-size: 12px;
      color: rgba(255,255,255,.65);
      line-height: 1.55;
    }

    .queue{
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      height: 100%;
      min-height: 360px;
      display:flex; flex-direction: column;
    }
    .queue-head{
      padding: 12px 12px 10px;
      display:flex; align-items:center; justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .queue-head strong{
      font-size: 12px;
      color: rgba(255,255,255,.82);
      letter-spacing: .2px;
    }
    .queue-list{
      padding: 8px;
      overflow:auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(254,198,57,.55) transparent;
    }
    .q-item{
      display:flex; gap: 10px;
      padding: 10px;
      border-radius: 14px;
      cursor:pointer;
      border: 1px solid transparent;
      transition: .15s;
      align-items:center;
    }
    .q-item:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(254,198,57,.25);
    }
    .q-thumb{
      width: 46px; height: 46px;
      border-radius: 12px;
      overflow:hidden;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      flex: 0 0 auto;
    }
    .q-thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; }
    .q-meta{ min-width: 0; }
    .q-meta strong{
      display:block;
      font-size: 12px;
      color: rgba(255,255,255,.90);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }
    .q-meta span{
      display:block;
      font-size: 11px;
      color: rgba(255,255,255,.55);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ==========================================================================
       Toast
       ========================================================================== */
    #toast{
      position: fixed;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9000;
      max-width: calc(100% - 36px);
      display:none;
    }
    #toast.show{ display:block; }
    .toast{
      background: rgba(0,0,0,.70);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
      padding: 12px 14px;
      border-radius: 14px;
      box-shadow: 0 25px 60px rgba(0,0,0,.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-size: 12px;
      display:flex; align-items:center; gap: 10px;
    }
    .toast i{ color: var(--brand); }

    /* ==========================================================================
       Responsive
       ========================================================================== */
    @media (max-width: 980px){
      .hero-inner{ grid-template-columns: 1fr; }
      .hero-side{ display:none; }
      .hero-title{ font-size: 34px; }
      .search{ min-width: 180px; }
      .modal-card.player{ max-width: 520px; }
      .player-grid{ grid-template-columns: 1fr; }
      .queue{ min-height: 260px; }
      .player-shell{ min-height: 280px; }
    }
    @media (max-width: 520px){
      nav{ padding: 10px 12px; }
      .search{ min-width: 0; width: 150px; padding: 8px 12px; }
      .hero{ min-height: 56vh; }
      .hero-title{ font-size: 28px; }
      .card{ width: 150px; min-width: 150px; }
      .card img{ height: 220px; }
    }
    /* ==========================================================================
       Mobile PRO polish (extra)
       ========================================================================== */
    @media (max-width: 520px){
      .nav-inner{ gap: 10px; }
      .nav-actions{ gap: 8px; }
      .brand img{ width: 36px; height: 36px; }
      .brand .title strong{ font-size: 16px; }
      .brand .title span{ font-size: 10px; }
      .pill{ padding: 9px 10px; font-size: 11px; }
      .icon-btn{ width: 40px; height: 40px; }
      .search{ width: 100%; flex: 1; }
      .search input{ font-size: 12px; }
      .tabs-wrap{ top: 58px; }
      .tabs{ gap: 8px; }
      .tab{ padding: 9px 12px; }
      .hero{ padding: 0 12px 20px; }
      .hero-side{ display:none; }
      .hero-card{ padding: 16px; }
      .hero-sub{ font-size: 13px; }
      .hero-meta{ gap: 8px; }
      .chip{ font-size: 11px; }
      .btn{ padding: 11px 14px; }
      .row{ gap: 12px; }
      .card{ width: 140px; min-width: 140px; }
      .card img{ height: 210px; }
      .modal{ padding: 12px; }
      .modal-card{ border-radius: 18px; }
      .modal-body{ padding: 14px; }
    }

    /* ==========================================================================
       Auth: Toggle de senha + pequenos ajustes mobile
       ========================================================================== */
    .input-pass{ gap: 8px; }
    .toggle-pass{
      width: 38px; height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.15);
      color: rgba(255,255,255,.72);
      cursor: pointer;
      display:grid; place-items:center;
      transition: .15s;
      flex: 0 0 auto;
    }
    .toggle-pass:hover{
      color: var(--brand);
      border-color: rgba(254,198,57,.35);
      background: rgba(254,198,57,.10);
    }
    .toggle-pass:active{ transform: scale(.98); }

    .btn-demo{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: #fff;
      font-weight: 900;
    }
    .btn-demo:hover{ background: rgba(255,255,255,.08); }

    @media (max-width: 520px){
      /* no celular, remove ícone de coroa do botão Planos (fica mais limpo) */
      #plansBtn i{ display:none; }
      #plansBtn{ gap: 0; padding: 9px 12px; }
    }

  
    /* ===== Player Skins (Netflix / Spotify) ===== */
    #playerModal.mode-video .modal-card{ border: 1px solid rgba(255,255,255,.10); box-shadow: 0 40px 140px rgba(0,0,0,.65); }
    #playerModal.mode-video .modal-head{ border-bottom: 1px solid rgba(255,255,255,.10); }
    #playerModal.mode-video #playerTitle{ letter-spacing: .2px; }
    #playerModal.mode-video .badge{ background: rgba(229,9,20,.14); border-color: rgba(229,9,20,.35); }
    #playerModal.mode-video .badge .dot{ background: var(--red); }

    #playerModal.mode-audio .modal-card{
      border: 1px solid rgba(30,215,96,.22);
      box-shadow: 0 40px 140px rgba(0,0,0,.70);
      background: radial-gradient(1200px 700px at 20% 0%, rgba(30,215,96,.10), transparent 55%),
                  linear-gradient(180deg, rgba(18,18,18,.98), rgba(10,10,10,.98));
    }
    #playerModal.mode-audio .modal-head{ border-bottom: 1px solid rgba(30,215,96,.18); }
    #playerModal.mode-audio #playerTitle{ color: rgba(255,255,255,.96); }
    #playerModal.mode-audio #playerSubtitle{ color: rgba(255,255,255,.72); }
    #playerModal.mode-audio .queue{ border-left: 1px solid rgba(30,215,96,.14); }

    /* deixa o player de áudio com cara de "Spotify" (barra mais baixa) */
    #playerModal.mode-audio audio{ width: 100%; height: 64px !important; border-radius: 14px; background: rgba(0,0,0,.25); }

    /* Mobile refinements */
    @media (max-width: 520px){
      #playerModal .modal-card{ width: min(94vw, 520px); border-radius: 18px; }
      #playerModal .modal-body{ padding: 12px; gap: 12px; }
      #playerModal .queue{ display:none; } /* fila some no celular: mais limpo */
      #playerModal .player-area{ width: 100%; }
      #playerModal #playerTitle{ font-size: 18px; }
      #playerModal #playerSubtitle{ font-size: 12px; }
      #plansBtn i.fa-crown{ display:none; } /* remove coroinha do botão Planos no celular */
    }



    /* ==========================================================================
       Auth modes + Mobile polish
       ========================================================================== */
    .auth-modes{
      display:flex; gap:10px; margin: 8px 0 10px;
    }
    .mode-btn{
      flex:1;
      border-radius: 999px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      font-weight: 800;
      cursor: pointer;
      transition: .18s ease;
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .mode-btn.active{
      border-color: rgba(254,198,57,.38);
      box-shadow: var(--ring);
      background: rgba(254,198,57,.10);
      color: #fff;
    }
    .mode-hint{
      font-size: 12px;
      color: rgba(255,255,255,.70);
      margin-bottom: 10px;
      line-height: 1.35;
    }

    @media (max-width: 560px){
      nav{ padding: 10px 12px; }
      .search{ min-width: 0; width: 100%; }
      /* no celular, o botão de Planos não aparece no topo para não poluir o início */
      #plansBtn{ display:none; }

      /* modal fica com tamanho correto e rolagem no conteúdo */
      .modal{ padding: 12px; }
      .modal-card{ max-height: 92vh; border-radius: 18px; }
      .modal-body{ padding: 14px !important; }

      /* botão X mais fácil de tocar */
      .close{ width: 44px; height: 44px; }
      .tabs{
        gap: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
      }
      .tabs::-webkit-scrollbar{ display:none; }
      .plans-grid{
        grid-template-columns: 1fr !important;
      }
      .grid{
        grid-template-columns: 1fr 1fr !important;
      }
      .card{
        border-radius: 16px !important;
      }
      .btn-wide{
        height: 48px !important;
        font-size: 14px !important;
      }
      .row-mini{
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
      }
    }

    /* ==========================================================================
       v2: A11y + polish
       ========================================================================== */
    .skip-link{
      position:absolute; left:-999px; top:10px;
      background:#fff; color:#111827;
      padding:10px 12px; border-radius: 12px;
      z-index: 999999;
    }
    .skip-link:focus{ left: 12px; outline: none; box-shadow: var(--ring); }
    .sr-only{
      position:absolute!important; width:1px; height:1px;
      padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }
    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior: auto !important; }
      .dots span{ animation: none !important; }
      .card, .btn, .icon-btn, .pill, .filter-chip{ transition: none !important; }
      .card:hover{ transform:none !important; }
    }



/* ==========================================================================
   Subcategorias — PRO (sem ícones)
   ========================================================================== */
.subcats{
  display:flex;
  gap:10px;
  align-items:center;
  overflow:auto;
  padding: 10px 2px 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.subcats::-webkit-scrollbar{ height: 6px; }
.subcats::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }

.subcats--pro{ margin-top: 6px; }

.subcats button,
.subcats .pill,
.subcats .filter-chip{
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 700;
  letter-spacing: .1px;
  display:inline-flex;
  align-items:center;
  gap: 0; /* sem ícones */
}

.subcats button:hover,
.subcats .pill:hover,
.subcats .filter-chip:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

.subcats .active,
.subcats button.active,
.subcats .filter-chip.active{
  background: linear-gradient(180deg, rgba(254,198,57,.22), rgba(254,198,57,.08));
  border-color: rgba(254,198,57,.45);
  color: rgba(255,255,255,.95);
}

@media (max-width: 520px){
  .subcats{ gap: 8px; padding-top: 8px; }
  .subcats button, .subcats .pill, .subcats .filter-chip{ padding: 8px 10px; }
}




/* ==========================================================================
   Player/Modal — Mobile fix (jogos/vídeos no celular)
   ========================================================================== */
@media (max-width: 520px){
  .modal{ padding: 10px; align-items: flex-end; }
  .modal-card{ max-height: 92vh; }
  .modal-card.player{
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
  }
  .modal-head{
    padding: 12px 12px 8px;
  }
  .modal-head strong{
    font-size: 13px;
  }
  .close{ width: 34px; height: 34px; }

  .modal-body{ padding: 12px; }
  .player-grid{ gap: 12px; }

  /* Player “organizado”: usa aspect-ratio em vez de min-height fixo */
  .player-shell{
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }
  .player-shell video,
  .player-shell audio{
    height: 100%;
  }

  /* A fila não pode “estourar” a tela */
  .queue{
    min-height: 0 !important;
    max-height: 34vh;
  }
  .queue-list{
    max-height: 28vh;
  }

  /* Itens da fila mais compactos */
  .q-item{ padding: 9px; }
  .q-thumb{ width: 42px; height: 42px; border-radius: 12px; }
}



/* ============================ Checkout (Plano -> Compra) ============================ */
.checkout-summary{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:16px;
}
.cs-plan{ font-weight:900; color: var(--brand); font-size:14px; }
.cs-desc{ color: rgba(255,255,255,.72); font-size:12px; line-height:1.45; margin-top:4px; }
.cs-price{ margin-top:8px; font-weight:900; font-size:20px; color:#fff; }
.cs-price span{ font-size:12px; color: rgba(255,255,255,.60); font-weight:700; }
.cs-badge{
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background: rgba(29,185,84,.14);
  border:1px solid rgba(29,185,84,.25);
  color: rgba(255,255,255,.92);
}
.checkout-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.co-field span{
  display:block;
  font-size:12px;
  font-weight:800;
  color: rgba(255,255,255,.72);
  margin-bottom:6px;
}
.co-field input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:#fff;
  outline:none;
}
.co-field input:focus{ border-color: rgba(254,198,57,.55); box-shadow: 0 0 0 3px rgba(254,198,57,.12); }
.co-span2{ grid-column: 1 / -1; }
.co-pass{ display:flex; gap:8px; align-items:center; }
.icon-btn-mini{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
}
.co-pay-methods{
  display:flex; gap:10px; flex-wrap:wrap;
}
.pay-pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:900;
}
.pay-pill.active{ border-color: rgba(254,198,57,.45); background: rgba(254,198,57,.12); }
.pix-box{
  margin-top:10px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px dashed rgba(254,198,57,.35);
  background: rgba(254,198,57,.06);
}
.pix-label{ font-size:12px; color: rgba(255,255,255,.70); font-weight:800; }
.pix-key{ font-size:14px; font-weight:900; color:#fff; margin-top:4px; word-break:break-all; }
.pix-sub{ font-size:12px; color: rgba(255,255,255,.72); margin-top:4px; }
.btn-mini{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-weight:900;
}
.boleto-box{
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.boleto-title{ font-weight:900; color:#fff; }
.boleto-line{ margin-top:6px; font-weight:900; color: var(--brand); word-break:break-all; }
.boleto-sub{ margin-top:6px; font-size:12px; color: rgba(255,255,255,.70); }
.co-actions{ margin-top:12px; display:grid; gap:8px; }
.co-footnote{ font-size:12px; color: rgba(255,255,255,.65); line-height:1.5; }

@media (max-width: 820px){
  .checkout-grid{ grid-template-columns: 1fr; }
}