/* Estilo Netflix-like moderno */
:root{
  --bg: #000000;
  --accent: #00e5ff; /* azul neon */
  --accent-weak: #00b3ff;
  --text: #fff;
  --muted: #9fb3c9;
  --radius: 10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family: 'Inter', sans-serif;background:radial-gradient(120% 120% at 0% 0%, #0a0f14 0%, #07080a 40%, #000 100%), var(--bg);color:var(--text);overflow-x:hidden}

/* Navbar */
.navbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 40px;background:#000;position:sticky;top:0;width:100%;z-index:100;color:#fff;
}
.navbar.scrolled{box-shadow:0 6px 16px rgba(0,0,0,0.35)}
.navbar nav a{color:#fff}
.navbar nav a:hover{opacity:.85}
.navbar-right{display:flex;align-items:center;gap:12px}
.logo{font-size:26px;font-weight:800;font-family:'Orbitron', sans-serif;letter-spacing:1px}
.logo span{color:var(--accent);text-shadow:0 0 8px rgba(0,229,255,.6)}
nav a{color:var(--muted);margin:0 10px;text-decoration:none;transition:.3s}
nav a:hover{color:var(--text)}
nav a.active{color:var(--text)}
.nav a#navAdmin{color:var(--accent)}
#navPlans.nav-plan{color:var(--accent);font-weight:600}
.search-box input{
  background:#222;border:none;border-radius:20px;padding:6px 14px;color:var(--text);
}
/* Search dentro do nav (desktop e mobile) */
.navbar nav{display:flex;align-items:center}
.navbar nav .search-box{margin-left:auto;display:flex;align-items:center}
.navbar nav .search-box input{width:240px}

/* Hero */
.hero{
  height:60vh;display:flex;align-items:center;justify-content:flex-start;
  position:relative;overflow:hidden;padding-left:60px;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  /* Vignette escura nas bordas + degrader no rodapé e leve na esquerda */
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.82) 100%),
    linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0) 35%),
    linear-gradient(to right, rgba(8,12,16,0.97) 0%, rgba(8,12,16,0.65) 45%, rgba(8,12,16,0.18) 100%);
}
/* brilho leve azul à esquerda para lembrar o exemplo */
.hero::before{
  content:"";position:absolute;left:-20%;top:-30%;width:60%;height:100%;z-index:0;
  background:radial-gradient(ellipse at 35% 50%, rgba(0,229,255,0.20) 0%, rgba(0,229,255,0.08) 40%, rgba(0,229,255,0) 70%);
  pointer-events:none;filter:saturate(120%);
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slides .slide{
  position:absolute;inset:0;
  /* Fundo borrado cobre toda área; banner real sem zoom fica por cima */
  display:flex;align-items:center;justify-content:center;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#000;
  opacity:0;transition:opacity 1s ease-in-out
}
.hero-slides .slide.active{opacity:1}
/* Fallback e responsivo para banners do Hero via CSS variables */
.hero-slides .slide{ background-image: var(--hero-img); }
@supports (background-image: image-set(url("x") 1x)){
  .hero-slides .slide{ background-image: var(--hero-img-set); }
}
.hero-content{max-width:560px;position:relative;z-index:2}
.hero-content h2{font-size:56px;margin-bottom:16px;font-weight:900;letter-spacing:.5px;line-height:1.08;text-shadow:0 6px 28px rgba(0,0,0,.65)}
.hero-chips{display:flex;gap:10px;align-items:center;margin:-6px 0 14px}
.chip{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12);color:#ddd;padding:6px 10px;border-radius:999px;font-size:13px}
.chip .icon{opacity:.85}
.chip.red{background:rgba(0,229,255,.10);color:var(--accent);border-color:rgba(0,229,255,.25)}
.chip.green{background:#123b2a;color:#b6f3d8;border-color:#1e5e44}
.hero-content p{font-size:18px;margin-bottom:22px;color:#cfe6ff;max-width:540px}
.hero-actions{display:flex;gap:12px;align-items:center}
.hero .btn.watch{background:var(--accent);color:var(--text);box-shadow:0 0 14px rgba(0,229,255,.35)}
.hero .btn.watch:hover{background:var(--accent-weak)}
.hero .btn.watch:hover{background:#f6121d}
.hero .btn.secondary.info{background:#2a2a2a;color:#eee}
.hero .btn.secondary.info:hover{background:#3a3a3a}
.btn{padding:10px 20px;border:none;border-radius:var(--radius);cursor:pointer;font-weight:600}
.btn.primary{background:var(--accent);color:var(--text);box-shadow:0 0 10px rgba(0,229,255,.35)}
.btn.primary:hover{background:var(--accent-weak);box-shadow:0 0 14px rgba(0,229,255,.5)}
.btn.secondary{background:#2a2a2a;color:#eee}
.btn.secondary:hover{background:#3a3a3a}

/* Filmes */
.content{padding:100px 40px 60px;}
.section-title{font-size:26px;margin-bottom:14px}
.panel{background:#101013;border:1px solid #1f1f1f;border-radius:var(--radius);padding:18px;margin-bottom:24px}
.panel-inner{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.field-group{display:flex;flex-direction:column;gap:8px}
.field-group label{color:var(--muted);font-size:13px}
.field-group input{background:#1a1a1c;border:1px solid #2a2a2c;border-radius:8px;padding:10px;color:var(--text);min-width:240px}
.radio-group{display:flex;gap:16px}
.panel-tip{color:var(--muted);font-size:12px;margin-top:8px}

/* Admin */
.admin{padding:100px 40px 60px}
.admin-layout{display:grid;grid-template-columns:260px 1fr;gap:24px}
.admin-sidebar{background:#0f1115;border:1px solid #1e2633;border-radius:16px;padding:16px;position:sticky;top:80px;height:fit-content}
.admin-menu{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.admin-menu .menu-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;color:#cbd5e1;background:transparent;border:1px solid transparent}
.admin-menu .menu-item:hover{background:#0b0e13;border-color:#1e2633}
.admin-menu .menu-item.active{background:#111827;border-color:#243140;box-shadow:0 0 20px rgba(0,229,255,0.12)}
.admin-user{display:flex;gap:10px;align-items:center;margin-top:8px;padding:10px;border:1px dashed #1e2633;border-radius:12px}
.avatar-circle{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#1e293b,#0ea5e9)}
.user-meta .user-name{font-size:14px;color:#e2e8f0}
.admin-main{display:flex;flex-direction:column;gap:16px}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#0f1115;border:1px solid #1e2633;border-radius:16px;padding:12px 14px}
.segment{display:flex;gap:6px;background:#0b0e13;border:1px solid #1e2633;border-radius:12px;padding:6px}
.segment .tab{background:transparent;color:#cbd5e1;border:none;padding:8px 10px;border-radius:8px;cursor:pointer}
.segment .tab.active{background:#111827;color:#e2e8f0;box-shadow:inset 0 0 0 1px #243140}
.segment .count{background:#0ea5e9;color:#031a2b;padding:2px 8px;border-radius:999px;margin-left:6px;font-size:12px}
.admin-actions{display:flex;gap:8px}
.admin-actions .btn.primary{background:#0ea5e9;color:#031a2b}
.admin-actions .btn.secondary{background:#111827;color:#cbd5e1;border:1px solid #243140}
.admin-header h2{font-size:24px;margin-bottom:10px}
.admin-results{margin-bottom:20px}
.admin-results .preview{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.admin-results .preview img{width:220px;border-radius:var(--radius)}
.admin-results .preview .meta{flex:1}
/* Cards para importação em massa */
.admin-results{display:flex;gap:12px;flex-wrap:wrap}
.admin-results .bulk-card{display:flex;gap:12px;align-items:flex-start;background:#161618;border:1px solid #2a2a2c;border-radius:var(--radius);padding:10px;max-width:540px}
.admin-results .bulk-card img{width:90px;height:135px;object-fit:cover;border-radius:8px}
.admin-results .bulk-card .meta{flex:1}
.admin-results .bulk-card .meta h4{font-size:16px;margin-bottom:6px}
.admin-results .bulk-card .meta p{font-size:13px;color:#999;margin-bottom:8px}
.admin-results .bulk-card .actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-list .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.admin-card{display:flex;gap:12px;background:#0f1115;border:1px solid #1e2633;border-radius:16px;padding:12px}
.admin-card img.thumb{width:110px;height:160px;object-fit:cover;border-radius:12px}
.admin-card .body{flex:1;display:flex;flex-direction:column}
.admin-card h4{font-size:16px;margin:0 0 6px}
.admin-card .meta{color:#94a3b8;font-size:12px;margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-block;background:#0b0e13;border:1px solid #243140;border-radius:999px;padding:2px 8px;color:#cbd5e1;font-size:12px}
.card-actions{margin-top:auto;display:flex;gap:8px}
.btn.remove{background:#3a1f1f;color:#ffb3b3;border:1px solid #5a2a2a}
.btn.remove:hover{background:#4a2727}
.btn.remove:hover{background:#3a1f1f}
.admin-purchases .table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border:1px solid #2a2a2c;padding:10px;text-align:left}
.table th{background:#171719;color:#ddd}
.table td{background:#121214;color:#bbb}
.table .actions{display:flex;gap:8px;flex-wrap:wrap}
.badge-status{display:inline-block;padding:4px 8px;border-radius:12px;font-size:12px}
.badge-status.pending{background:#2a2a2a;color:#ddd}
.badge-status.approved{background:#123b46;color:#b6f3f3}
.badge-status.cancelled{background:#38223b;color:#e8b6f3}
.row{display:flex;overflow-x:auto;gap:16px;padding-bottom:10px;scroll-behavior:smooth}
.row::-webkit-scrollbar{display:none}
.row-wrap{position:relative;margin:18px 0;padding:0 24px}
.row-title{font-size:20px;font-weight:700;margin:0 0 10px 6px}
.row-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,0.6);border:1px solid #1f2a38;color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;box-shadow:0 0 10px rgba(0,229,255,0.35)}
.row-arrow:hover{background:rgba(255,255,255,0.15)}
.row-arrow.prev{left:-4px}
.row-arrow.next{right:-4px}
.row-wrap::before,.row-wrap::after{content:"";position:absolute;top:32px;bottom:0;width:24px;z-index:5;pointer-events:none}
.row-wrap::before{left:0;background:linear-gradient(to right, rgba(13,13,15,1) 0%, rgba(13,13,15,0) 100%)}
.row-wrap::after{right:0;background:linear-gradient(to left, rgba(13,13,15,1) 0%, rgba(13,13,15,0) 100%)}

/* Responsivo */
@media (max-width: 980px){
  .hero{height:52vh;padding-left:28px}
  .hero-content h2{font-size:42px}
  .hero-content p{font-size:16px}
}
@media (max-width: 640px){
  .hero{height:48vh;padding-left:20px}
  .hero-content h2{font-size:34px}
}

/* Mobile refinements (sem alterar desktop) */
@media (max-width: 480px){
  .navbar{position:sticky;top:0;padding:14px 16px;background:rgba(0,0,0,0.9);
    display:grid;grid-template-columns:1fr auto;grid-template-areas:
    'logo right'
    'nav nav';gap:8px;align-items:center}
  .logo{grid-area:logo;font-size:clamp(18px,4.5vw,24px)}
  .navbar-right{grid-area:right;display:flex;gap:8px;justify-content:flex-end}
  .search-box input{width:clamp(140px,48vw,240px);height:clamp(30px,7vw,36px)}
  .navbar nav{grid-area:nav;display:flex;gap:10px;overflow-x:auto;white-space:nowrap;padding:4px 0;-webkit-overflow-scrolling:touch}
  .navbar nav a{margin:0 8px;font-size:clamp(12px,3.5vw,14px);padding:6px 0}
  .navbar nav .search-box{flex:0 0 auto;margin-left:auto}
  .navbar nav .search-box input{width:clamp(140px,48vw,240px);height:clamp(30px,7vw,36px)}

  .hero{height:64vh;padding-left:16px;justify-content:center;margin-top:clamp(48px,9vw,72px)}
  .hero-content{max-width:92%;margin:0 auto}
  .hero-content h2{font-size:32px;line-height:1.1}
  .hero-content p{font-size:15px;max-width:92%}
  .hero-actions{flex-direction:column;gap:10px;width:100%}
  .hero .btn{width:100%}
  .hero-content{max-width:92%;margin:0 auto}
  .hero-content h2{font-size:32px;line-height:1.1}
  .hero-content p{font-size:15px;max-width:92%}
  .hero-actions{flex-direction:column;gap:10px;width:100%}
  .hero .btn{width:100%}

  .content{padding:84px 16px 40px}
  .row{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .row-wrap{padding:0 12px}
  .row-title{margin-left:0}

  /* Ajuste dos banners (cards) em iPhone e mobile:
     - reduz largura mínima para evitar aspecto “quadrado”/grande
     - mantém proporção do pôster (2:3) com height automático
     - melhora snap no carrossel */
  .card{ min-width: clamp(120px, 36vw, 180px); scroll-snap-align: start; }
  .card img{ height: auto; aspect-ratio: 2 / 3; }
  .row{ gap: 12px; }

  .player iframe{height:clamp(220px,45vh,360px)}
  .modal-inner{width:94%}
  .modal-body img{width:40vw;max-width:220px}
}

/* Safe-area para iOS notch */
@supports (padding: max(0px)){
  @media (max-width: 480px){
    .navbar{padding-top:calc(14px + env(safe-area-inset-top));padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
  }
}

/* Pequeno ajuste específico para Safari/iOS em telas pequenas */
@supports (-webkit-touch-callout: none){
  @media (max-width: 480px){
    .card img{ image-rendering: -webkit-optimize-contrast; }
  }
}

/* Layout de grade para abas individuais */
.row.grid{flex-wrap:wrap;overflow-x:hidden}
.row-wrap.grid{padding:0}
.row-wrap.grid .row-arrow{display:none}
.row-wrap.grid::before,.row-wrap.grid::after{display:none;content:none}
.card{
  min-width:200px;flex-shrink:0;position:relative;border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:transform .3s ease;
}
.card:hover{transform:scale(1.07)}
.card img{width:100%;height:300px;object-fit:cover;display:block;border-radius:var(--radius)}
/* Minha Conta */
.account{padding:100px 40px 60px}
.account-header h2{font-size:26px;margin-bottom:6px}
.account-header p{color:var(--muted);margin-bottom:16px}
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px}
.account-left .account-user{display:flex;gap:12px;align-items:center}
.account-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;border:1px solid #2a2a2c;background:#111}
.account-user-meta h3{font-size:18px;margin-bottom:4px}
.muted{color:#9aa7b8}
.account-actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.plan-status{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#222;color:#ddd;font-size:12px;border:1px solid #2a2a2c}

@media(max-width:840px){
  .account-grid{grid-template-columns:1fr}
}
.card .info{
  position:absolute;bottom:0;left:0;right:0;
  padding:10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.9));
}
.card .fav-btn{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,0.55);border:1px solid #2a2a2c;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.card .fav-btn:hover{background:rgba(0,0,0,0.7)}
.card .fav-btn.active{background:rgba(0,229,255,.10);border-color:rgba(0,229,255,.25);color:var(--accent);box-shadow:0 0 10px rgba(0,229,255,.35)}
.card .fav-btn.disabled{opacity:.6;cursor:not-allowed}
.card h3{font-size:16px;font-weight:600}
.card p{font-size:13px;color:var(--muted)}

/* Modal */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);
display:flex;align-items:flex-start;justify-content:center;z-index:200;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 0}
.hidden{display:none}
.modal-inner{background:#141414;padding:20px;border-radius:var(--radius);max-width:900px;width:90%;position:relative;max-height:90vh;overflow-y:auto}
.close{position:absolute;top:15px;right:20px;font-size:26px;color:var(--muted);background:none;border:none;cursor:pointer}
.modal-body{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.modal-body img{width:300px;border-radius:var(--radius)}
.modal-info{flex:1}
.modal-info h2{margin-bottom:10px}
.modal-info p{color:var(--muted);line-height:1.5;margin-bottom:10px}
.modal-info .genres{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.genre-pill{background:#222;padding:5px 10px;border-radius:20px;font-size:13px;color:var(--muted)}

/* Player SuperFlix */
.player iframe{width:100%;height:480px;border:none;border-radius:var(--radius);background:#000}
.missing-id{background:#1f1f1f;border:1px dashed #444;color:#bbb;padding:14px;border-radius:var(--radius)}

/* Footer */
.footer{text-align:center;padding:30px 10px;background:#000;color:var(--muted)}
.legal-disclaimer{margin-top:10px;color:#9aa7b8;font-size:12px;line-height:1.5}
@media (max-width:480px){.legal-disclaimer{font-size:11px;padding:0 12px}}

/* Ajustes extras para modal e player em telas pequenas */
@media (max-width: 480px){
  .modal-body{flex-direction:column;align-items:stretch;gap:14px}
  .modal-info{width:100%}
  .player{width:100%}
  .modal-body img{width:100%;max-width:240px;margin:0 auto}
}

/* Plans Page */
.plans{padding:100px 40px 60px}
.plans-header h2{font-size:26px;margin-bottom:6px}
.plans-header p{color:var(--muted);margin-bottom:16px}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.plan-card{background:#161618;border:1px solid #2a2a2c;border-radius:var(--radius);padding:16px;position:relative}
.plan-card.popular{border-color:#b00710}
.plan-card .badge{position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;font-size:12px;padding:4px 8px;border-radius:12px}
.plan-card h3{font-size:20px;margin-bottom:8px}
.plan-card .price{font-size:22px;font-weight:700;margin-bottom:10px}
.plan-card .benefits{list-style:none;color:#bbb;margin:10px 0;display:grid;gap:6px}
.plans-tip{color:#888;margin-top:10px;font-size:13px}



/* Login Modal */
.login-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index: 10000; }
.login-modal-content { background:#1a1a1a; border-radius:12px; padding:0; max-width:420px; width:90%; border:1px solid #333; overflow:hidden }
.login-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #333 }
.login-header h3 { margin:0; color:#fff; font-size:1.1rem }
.close-login { background:none; border:none; color:#fff; font-size:24px; cursor:pointer }
.close-login:hover { color:#e50914 }
.login-body { padding:20px; text-align:center }
.login-intro { color:#ccc; margin-bottom:16px }
.user-area { display:flex; align-items:center; gap:10px }
.user-toggle{display:flex;align-items:center;gap:6px;background:#1a1a1c;border:1px solid #2a2a2c;color:#ddd;padding:6px 10px;border-radius:999px;cursor:pointer}
.user-toggle .caret{margin-left:4px;color:#888}
.user-menu{position:relative}
.user-menu{position:absolute;right:0;top:44px;background:#121214;border:1px solid #2a2a2c;border-radius:12px;min-width:240px;box-shadow:0 8px 24px rgba(0,0,0,0.45);z-index:300;padding:10px}
.user-menu.hidden{display:none}
.user-menu-header{display:flex;gap:10px;align-items:center;padding:6px 8px;border-bottom:1px solid #1f1f21;margin-bottom:8px}
.user-menu .user-avatar.small{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid #333}
.user-menu .user-title{font-weight:600;color:#eee}
.user-menu .user-email{font-size:12px;color:#9aa7b8}
.user-menu-items{display:flex;flex-direction:column}
.user-menu .menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#161618;border:1px solid #222;margin-bottom:6px;border-radius:8px;color:#ddd;cursor:pointer}
.user-menu .menu-item:hover{background:#1c1c1f}
.user-menu .menu-item.highlight{color:#ffd166;border-color:#34322a;background:#181614}
.user-menu .menu-item.danger{color:var(--accent);border-color:#1f2a38;background:rgba(0,229,255,.06)}
.user-avatar { width:28px; height:28px; border-radius:50%; overflow:hidden; border:1px solid #333 }
.user-name { font-size:13px; color:#ddd }
/* Emblema de assinatura ativa no topo */
.user-badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; background:var(--accent); color:#fff; }

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-top: 2px solid #e50914;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Imagem do banner sem zoom, preservando retângulo dentro da área */
.hero-slides .slide img.banner-img{
  width:100%;
  height:100%;
  object-fit:cover; /* cobre toda área, sem partes vazias */
  object-position:center 35%; /* foco levemente mais alto para títulos */
  filter:drop-shadow(0 8px 32px rgba(0,0,0,.35));
}
/* Dots de navegação do Hero */
.hero-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.hero-dots .dot{width:8px;height:8px;border-radius:50%;background:#6b7a86;border:1px solid #8fa1b2;opacity:.9;cursor:pointer}
.hero-dots .dot.active{background:var(--accent);border-color:var(--accent);opacity:1;box-shadow:0 0 10px rgba(0,229,255,.45)}

/* Garantir que o conteúdo abaixo não fique sob a navbar */
.content{padding-top:90px}

/* Sugestões page futurista */
.suggestions{padding:100px 40px 60px}
.suggestions-hero{background:linear-gradient(135deg, rgba(0,229,255,0.12), rgba(0,229,255,0)); border:1px solid #1f2a38; border-radius:16px; padding:20px; margin-bottom:16px; box-shadow:0 0 30px rgba(0,229,255,.08)}
.suggestions-hero h2{font-size:26px; margin-bottom:6px}
.suggestions-hero p{color:#9fb3c9}
.suggestion-form .panel-inner{align-items:flex-end}
.suggestion-form input, .suggestion-form select{background:#0f1115;border:1px solid #243140}
.suggestion-form .btn.primary{background:var(--accent);color:#02171d;box-shadow:0 0 14px rgba(0,229,255,.35)}

/* Overrides móveis finais para garantir precedência sobre regras base */
@media (max-width: 480px){
  /* Cards menores e proporcionais (estilo Netflix) */
  .row{ scroll-snap-type: x mandatory; gap: 12px; }
  .card{ flex: 0 0 clamp(120px, 34vw, 170px); min-width: clamp(120px, 34vw, 170px); }
  .card img{ height: auto; aspect-ratio: 2 / 3; }
  .row-arrow{ width:32px; height:32px; }
}