:root{
  --bg:#0B0B0D; --bg-grid:#111114; --panel:#141417; --card:#161619;
  --card-hover:#1B1B1F; --stroke:#26262B; --stroke-soft:#1E1E22; --stroke-strong:#34343A;
  --txt:#ECECEE; --txt-2:#9A9AA1; --txt-3:#62626A; --txt-4:#46464C;
  --ok:#74D69C; --ok-bg:#15281D; --ok-border:#27543A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--txt); min-height:100vh;
  background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
  background-size:46px 46px; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:20px 40px;
  position:sticky; top:0; z-index:40; background:rgba(11,11,13,.82); backdrop-filter:blur(14px);
  border-bottom:.5px solid var(--stroke-soft);}
.topbar-left{display:flex; align-items:center; gap:48px;}
.brand{display:flex; align-items:center; gap:12px; font-weight:600; font-size:19px; letter-spacing:-.01em; text-decoration:none;}
.brand .brand-name{font-weight:600; color:var(--txt);}
.brand .brand-name span{color:var(--txt-3); font-weight:400;}
.brand .logo{width:34px; height:34px; border-radius:11px; background:linear-gradient(150deg,#26262B,#141417);
  border:.5px solid var(--stroke-strong); display:flex; align-items:center; justify-content:center;}
.nav{display:flex; align-items:center; gap:30px;}
.nav a{color:var(--txt-2); text-decoration:none; font-size:14.5px; transition:color .15s;}
.nav a:hover{color:var(--txt);}
.nav .lbl-short{display:none;}
.top-actions{display:flex; align-items:center; gap:12px;}
.icon-btn{width:40px; height:40px; border-radius:50%; background:var(--panel); border:.5px solid var(--stroke);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--txt-2); transition:all .15s;}
.icon-btn:hover{border-color:var(--stroke-strong); color:var(--txt);}
.btn-ghost{padding:9px 18px; border-radius:999px; cursor:pointer; background:var(--panel); border:.5px solid var(--stroke);
  color:var(--txt); font-size:13.5px; font-weight:500; transition:all .15s; text-decoration:none; display:inline-flex; align-items:center; gap:7px;}
.btn-ghost:hover{border-color:var(--stroke-strong); background:var(--card-hover);}
.btn-light{padding:10px 22px; border-radius:999px; cursor:pointer; background:#F2F2F3; border:none;
  color:#101012; font-size:14px; font-weight:600; transition:all .12s; text-decoration:none; display:inline-flex; align-items:center; gap:7px;}
.btn-light:hover{opacity:.92;} .btn-light:active{transform:scale(.97);}

/* shell */
.shell{display:grid; grid-template-columns:248px 1fr; gap:36px; padding:34px 40px 80px; max-width:1560px; margin:0 auto;}
.shell > main{min-width:0;}
.sidebar{position:sticky; top:104px;
  /* Scroll próprio: a barra de filtros nunca ultrapassa a altura visível.
     Se a lista for maior, rola dentro dela mesma (sem precisar rolar a
     página toda até o footer). A barra de rolagem fica invisível. */
  max-height:calc(100vh - 124px); overflow-y:auto;
  scrollbar-width:none;            /* Firefox: sem barra */
  -ms-overflow-style:none;         /* IE/Edge antigo */
}
.sidebar::-webkit-scrollbar{width:0; height:0; display:none;} /* Chrome/Safari */
.filters-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.filters-head .ttl{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600;}
.clear{background:none; border:none; color:var(--txt-3); font-size:13px; cursor:pointer; transition:color .15s;}
.clear:hover{color:var(--txt);}
.fgroup{padding:20px 0; border-top:.5px solid var(--stroke-soft);}
.fgroup:first-of-type{border-top:none; padding-top:0;}
.fgroup summary{display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; margin-bottom:15px;}
.fgroup summary::-webkit-details-marker{display:none;}
.fgroup summary h4{margin:0;}
.fgroup .fg-chev{color:var(--txt-3); transition:transform .2s; display:none;}
.fgroup[open] .fg-chev{transform:rotate(180deg);}
.fgroup h4{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--txt-3); margin-bottom:15px;}
.check{display:flex; align-items:center; gap:11px; padding:6px 0; cursor:pointer; font-size:14px; color:var(--txt-2); transition:color .15s; user-select:none;}
.check-count{margin-left:auto; font-size:11.5px; color:var(--txt-3); background:var(--panel); border:.5px solid var(--stroke);
  min-width:22px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;}
.check input:checked ~ .check-count{color:var(--txt); border-color:var(--stroke-strong);}
.check:hover{color:var(--txt);}
.check input{display:none;}
.box{width:17px; height:17px; border-radius:5px; border:1.5px solid var(--stroke-strong); background:transparent;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s;}
.box svg{opacity:0; transform:scale(.6); transition:all .15s;}
.check input:checked + .box{background:#E8E8EA; border-color:#E8E8EA;}
.check input:checked + .box svg{opacity:1; transform:scale(1);}
.check input:checked ~ span{color:var(--txt);}

/* toolbar */
.toolbar{display:flex; align-items:center; gap:14px; margin-bottom:30px;}
/* botão "Filtros" e cabeçalho do sheet: só aparecem no mobile (via media query) */
.filters-toggle{display:none; align-items:center; gap:8px; padding:13px 18px; border-radius:14px;
  background:var(--panel); border:.5px solid var(--stroke); color:var(--txt); font-size:14.5px;
  font-weight:500; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all .15s;}
.filters-toggle:hover{border-color:var(--stroke-strong); background:var(--card-hover);}
.filters-toggle .ft-count{display:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:#F2F2F3; color:#101012; font-size:11px; font-weight:700; align-items:center; justify-content:center;}
.filters-toggle.has-active .ft-count{display:inline-flex;}
.sidebar-sheet-head{display:none;}
.sidebar-backdrop{display:none;}
.search{flex:1; position:relative;}
.search svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--txt-3);}
.search input{width:100%; padding:15px 18px 15px 48px; background:var(--panel); border:.5px solid var(--stroke);
  border-radius:14px; color:var(--txt); font-size:15px; font-family:inherit; transition:border-color .15s,background .15s;}
.search input::placeholder{color:var(--txt-3);}
.search input:focus{outline:none; border-color:var(--stroke-strong); background:var(--card);}
.count-pill{font-size:13px; color:var(--txt-3); white-space:nowrap; padding:0 4px;}

/* grid + cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:22px;}
.grid[hidden]{display:none;}
.card{position:relative; display:flex; flex-direction:column; height:100%; border-radius:18px; background:var(--card); border:.5px solid var(--stroke);
  overflow:hidden; transition:border-color .2s;}
.card:hover{border-color:var(--stroke-strong);}
.card-glow{position:absolute; inset:0; opacity:.5; pointer-events:none; transition:opacity .3s;}
.card:hover .card-glow{opacity:.85;}
.card-inner{position:relative; z-index:2; padding:20px;}

/* capa 1:1 no topo, full-bleed, com fade-out na base */
.card-cover{position:relative; aspect-ratio:1/1; width:100%; overflow:hidden; background:var(--panel);}
.card-cover img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease; transform:scale(1.02);}
.card:hover .card-cover img{transform:scale(1.07);}
.card-cover::after{content:""; position:absolute; left:0; right:0; bottom:0; height:44%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(22,22,25,0) 0%, var(--card) 92%, var(--card) 100%);}
.card-cover .badges{position:absolute; top:14px; right:14px; z-index:3;}
/* placeholder quando não há imagem */
.card-cover.is-empty{display:flex; align-items:center; justify-content:center;}
.card-cover.is-empty .ph-ico{width:54px; height:54px; border-radius:14px; border:.5px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2; backdrop-filter:blur(4px);}
.card-cover .cover-glow{position:absolute; inset:0; opacity:.6; pointer-events:none;}

.card-body{position:relative; z-index:2; display:flex; flex-direction:column; flex:1; justify-content:space-between; gap:14px; padding:4px 20px 20px; margin-top:-14px;}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:64px;}
.style-ico{width:54px; height:54px; border-radius:14px; border:.5px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);}
.badges{display:flex; gap:7px; align-items:center;}
.badge{display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
  background:rgba(20,20,23,.7); border:.5px solid var(--stroke); font-size:12px; color:var(--txt-2); backdrop-filter:blur(6px);}
.card-title{display:flex; align-items:center; gap:7px; font-size:18px; font-weight:600; letter-spacing:-.01em;}
.card-title svg{color:var(--txt-3); transition:transform .2s;}
.card:hover .card-title svg{transform:translate(2px,-2px); color:var(--txt-2);}
.tags{display:flex; flex-wrap:wrap; gap:7px;}
.tag{font-size:11.5px; padding:4px 10px; border-radius:7px; background:rgba(255,255,255,.04);
  border:.5px solid var(--stroke-soft); color:var(--txt-2);}

/* prompt + fade */
.prompt-wrap{display:contents;}
.prompt-box{position:relative; max-height:88px; overflow:hidden; background:rgba(0,0,0,.28);
  border:.5px solid var(--stroke-soft); border-radius:12px; padding:14px;}
.prompt-box p{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:12.5px; line-height:1.65; color:var(--txt-2); margin:0;}
.prompt-fade{position:absolute; left:0; right:0; bottom:0; height:48px;
  background:linear-gradient(to bottom,rgba(0,0,0,0),var(--card) 94%); pointer-events:none; border-radius:0 0 12px 12px;}
/* ações do card: Copiar (secundário) + Configurar (primário) */
.card-actions{display:flex; gap:8px;}
.btn-copy, .btn-config{display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 14px; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:500;
  font-family:inherit; transition:all .15s;}
.btn-copy{flex:0 0 auto; background:var(--panel); border:.5px solid var(--stroke-strong); color:var(--txt-2);}
.btn-copy:hover{background:var(--card-hover); color:var(--txt); border-color:#48484F;}
.btn-copy.done{background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok);}
.btn-config{flex:1; background:#F2F2F3; border:none; color:#101012; font-weight:600;}
.btn-config:hover{opacity:.92;}
.btn-config:active{transform:scale(.99);}

.empty{grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--txt-3);}
.empty svg{margin-bottom:14px; color:var(--txt-4);}
.empty p{font-size:15px;}

@media(max-width:1080px){
  .shell{grid-template-columns:1fr; gap:24px;}
  .sidebar{position:static; display:block;}
  /* filtros viram acordeões: chevron aparece, grupos lado a lado em telas médias */
  .sidebar .fgroup{border-top:.5px solid var(--stroke-soft);}
  .sidebar .fgroup:first-of-type{border-top:none;}
  .fgroup .fg-chev{display:block;}
  .fgroup-body{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px 18px;}
}
@media(max-width:560px){
  /* HEADER MOBILE — duas linhas limpas:
     (1) logo + nome do site à esquerda · ações compactas à direita
     (2) abas (Estilos / Datas) com texto completo                      */
  .topbar{padding:10px 14px 8px; gap:0 12px; flex-wrap:wrap; align-items:center;}
  .topbar-left{display:flex; align-items:center; gap:0 12px; flex:1 1 auto; min-width:0; flex-wrap:wrap;}
  /* mostra o nome do site ao lado do ícone */
  .brand{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--txt); flex-shrink:0; white-space:nowrap;}
  .brand .logo{width:32px; height:32px; flex-shrink:0;}
  /* ações à direita, compactas (ícones), na MESMA linha do logo */
  .top-actions{order:2; flex-shrink:0; gap:8px; margin-left:auto;}
  .top-actions .count-pill, .top-actions form{display:none;}
  .top-actions .btn-ghost{padding:0; width:38px; height:38px; justify-content:center; border-radius:50%; font-size:0;}
  .top-actions .btn-ghost svg{margin:0;}
  /* abas na segunda linha, coladas ao nome (espaço mínimo), texto inteiro */
  .nav{order:3; flex-basis:100%; width:100%; display:flex; gap:8px; justify-content:flex-start;
    flex-wrap:wrap; min-width:0; margin:8px 0 0; padding:0;}
  .nav a{font-size:13px; padding:7px 14px; border-radius:999px; background:var(--panel);
    border:.5px solid var(--stroke); white-space:nowrap;}
  .nav a.on{background:var(--card-hover); border-color:var(--stroke-strong); color:var(--txt);}
  .nav a.on::after{display:none;}
  .nav .lbl-full{display:inline;}
  .nav .lbl-short{display:none;}
  /* Favoritos e Perfil já estão no bottom nav — não repetir */
  .nav .nav-desktop-only{display:none;}

  .shell{padding:10px 14px 96px; display:block;}
  .grid{grid-template-columns:1fr; gap:16px;}

  /* botão "Filtros" aparece no mobile, na toolbar */
  .filters-toggle{display:inline-flex;}

  /* sidebar vira bottom sheet, escondida até abrir (regra reforçada p/ vencer cascata) */
  .shell .sidebar, aside.sidebar{
    position:fixed !important; left:0; right:0; bottom:0; top:auto !important; z-index:150;
    max-height:82vh; overflow-y:auto; display:block !important;
    background:var(--bg); border-top:.5px solid var(--stroke-strong);
    border-radius:20px 20px 0 0; padding:0 18px 24px;
    transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 -12px 40px rgba(0,0,0,.5); width:auto;
  }
  .shell .sidebar.open, aside.sidebar.open{transform:translateY(0);}
  .sidebar-sheet-head{display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; background:var(--bg); padding:18px 0 12px; z-index:2;
    font-size:16px; font-weight:600; border-bottom:.5px solid var(--stroke-soft); margin-bottom:6px;}
  .sheet-close{width:34px; height:34px; border-radius:50%; background:var(--panel); border:.5px solid var(--stroke);
    display:flex; align-items:center; justify-content:center; color:var(--txt-2); cursor:pointer;}
  .sidebar .filters-head{display:none;} /* o título já está no cabeçalho do sheet */
  .sidebar-backdrop{display:none; position:fixed; inset:0; z-index:149; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);}
  .sidebar-backdrop.open{display:block;}
  /* filtros dentro do sheet: acordeões limpos, sem caixão */
  .sidebar .fgroup{border:none; border-top:.5px solid var(--stroke-soft); border-radius:0; margin:0;}
  .sidebar .fgroup summary{padding:15px 2px;}
  .sidebar .fgroup .fgroup-body{padding:0 2px 14px;}
  .fgroup-body{grid-template-columns:1fr 1fr;}
}

/* ====================================================================
   Configurador de prompt (modal)
   ==================================================================== */
.cfg-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(6,6,8,.72); backdrop-filter:blur(6px); animation:cfgFade .18s ease;}
@keyframes cfgFade{from{opacity:0} to{opacity:1}}
.cfg-modal{width:100%; max-width:620px; max-height:90vh; display:flex; flex-direction:column;
  background:var(--card); border:.5px solid var(--stroke-strong); border-radius:20px; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.55); animation:cfgUp .22s cubic-bezier(.2,.8,.2,1);}
@keyframes cfgUp{from{transform:translateY(14px); opacity:0} to{transform:translateY(0); opacity:1}}
.cfg-head{display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 18px; border-bottom:.5px solid var(--stroke-soft);}
.cfg-kicker{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--txt-3); margin-bottom:5px;}
.cfg-head h3{font-size:21px; font-weight:600; letter-spacing:-.01em;}
.cfg-close{width:34px; height:34px; border-radius:9px; background:var(--panel); border:.5px solid var(--stroke);
  color:var(--txt-2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0;}
.cfg-close:hover{color:var(--txt); border-color:var(--stroke-strong);}
.cfg-body{padding:22px 24px; overflow-y:auto; flex:1;}
.cfg-field{margin-bottom:24px;}
.cfg-field label{display:block; font-size:13.5px; font-weight:500; color:var(--txt); margin-bottom:9px;}
.cfg-field input,.cfg-field textarea{width:100%; box-sizing:border-box; padding:13px 15px; background:var(--panel); border:.5px solid var(--stroke);
  border-radius:11px; color:var(--txt); font-size:14.5px; font-family:inherit; transition:border-color .15s;}
.cfg-field textarea{resize:vertical; min-height:64px; line-height:1.5;}
.cfg-field input::placeholder,.cfg-field textarea::placeholder{color:var(--txt-3);}
.cfg-field input:focus,.cfg-field textarea:focus{outline:none; border-color:var(--stroke-strong);}

/* Mini tutorial do campo "O que você quer criar" */
.cfg-tip{margin-top:10px; border:.5px solid var(--stroke); border-radius:11px; overflow:hidden; background:var(--panel);}
.cfg-tip-head{display:flex; align-items:center; gap:8px; width:100%; padding:11px 13px; background:none; border:none;
  cursor:pointer; color:#F3D36B; font-size:13px; font-weight:600; font-family:inherit; text-align:left;}
.cfg-tip-head span{flex:1;}
.cfg-tip-chev{transition:transform .2s; flex:none;}
.cfg-tip.open .cfg-tip-chev{transform:rotate(180deg);}
.cfg-tip-body{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.cfg-tip.open .cfg-tip-body{max-height:900px;}
.cfg-tip-body p{margin:0; padding:0 14px 10px; font-size:12.5px; color:var(--txt-2,#c8c8cc); line-height:1.6;}
.cfg-tip-body ul{margin:0; padding:0 16px 14px 30px; display:flex; flex-direction:column; gap:8px;}
.cfg-tip-body li{font-size:12.5px; color:var(--txt-3); line-height:1.55;}
.cfg-tip-body li strong{color:var(--txt-2,#c8c8cc);}
.cfg-field small{display:block; margin-top:7px; font-size:12px; color:var(--txt-3);}
/* acordeões do configurador */
.cfg-acc{border:.5px solid var(--stroke); border-radius:12px; margin-bottom:10px; overflow:hidden; background:var(--panel);}
.cfg-acc-head{width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:none; border:none; cursor:pointer; color:var(--txt);
  font-size:14.5px; font-weight:500; font-family:inherit; text-align:left;}
.cfg-acc-head .chev{color:var(--txt-3); transition:transform .2s; flex-shrink:0;}
.cfg-acc.open .cfg-acc-head .chev{transform:rotate(180deg);}
.cfg-acc-body{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 16px;}
.cfg-acc.open .cfg-acc-body{max-height:1600px; padding:0 16px 16px;}
/* grid de fontes (preview Aa) */
.cfg-fonts{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px;}
.cfg-font{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px;
  border-radius:10px; background:var(--card); border:.5px solid var(--stroke); cursor:pointer; transition:all .15s;}
.cfg-font:hover{border-color:var(--stroke-strong);}
.cfg-font.on{border-color:#F2F2F3; background:#F2F2F3;}
.cfg-font-aa{font-size:26px; line-height:1.1; color:var(--txt);}
.cfg-font.on .cfg-font-aa{color:#101012;}
.cfg-font-label{font-size:11px; color:var(--txt-3); text-align:center; line-height:1.25; font-family:'Inter',sans-serif;}
.cfg-font.on .cfg-font-label{color:#3A3A40;}
.cfg-pills{display:flex; flex-wrap:wrap; gap:8px;}
.cfg-pill{padding:8px 14px; border-radius:999px; background:var(--panel); border:.5px solid var(--stroke);
  color:var(--txt-2); font-size:13px; font-family:inherit; cursor:pointer; transition:all .15s;}
.cfg-pill:hover{border-color:var(--stroke-strong); color:var(--txt);}
.cfg-pill.on{background:#F2F2F3; border-color:#F2F2F3; color:#101012; font-weight:500;}
.cfg-foot{border-top:.5px solid var(--stroke-soft); padding:18px 24px 20px; background:var(--panel);}
.cfg-preview-wrap{margin-bottom:14px;}
.cfg-preview-toggle{display:flex; align-items:center; gap:8px; width:100%; padding:11px 13px; border-radius:11px;
  background:var(--bg); border:.5px solid var(--stroke-soft); cursor:pointer; font-family:inherit; text-align:left;
  color:var(--txt-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;}
.cfg-preview-toggle > span:first-child{font-weight:600; color:var(--txt-2);}
.cfg-preview-hint-mini{flex:1; text-transform:none; letter-spacing:0; font-size:11.5px; color:var(--txt-3);}
.cfg-preview-chev{flex:none; transition:transform .2s; color:var(--txt-3);}
.cfg-preview-wrap.open .cfg-preview-chev{transform:rotate(180deg);}
.cfg-foot pre{max-height:0; overflow:hidden; margin:0; padding:0 14px; background:var(--bg);
  border:.5px solid transparent; border-radius:11px; white-space:pre-wrap; word-break:break-word;
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:12px; line-height:1.6; color:var(--txt-2);
  transition:max-height .25s ease, padding .25s ease;}
.cfg-preview-wrap.open pre{max-height:200px; overflow-y:auto; padding:14px;
  border-color:var(--stroke-soft); margin-top:8px;}
.cfg-copy{width:100%; padding:14px; border-radius:12px; background:#F2F2F3; color:#101012; border:none;
  font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .12s;}
.cfg-copy:hover{opacity:.92;} .cfg-copy:active{transform:scale(.99);}
.cfg-copy.done{background:var(--ok-bg); color:var(--ok);}
@media(max-width:560px){
  .cfg-overlay{padding:12px; align-items:flex-end;}
  .cfg-modal{max-width:100%; max-height:92vh; border-radius:18px;}
  .cfg-head{padding:18px 18px 14px;}
  .cfg-body{padding:18px;}
  .cfg-foot{padding:14px 18px 16px;}
}

/* ====================================================================
   Aba de datas comemorativas
   ==================================================================== */
.nav a.on{color:var(--txt); position:relative;}
.nav a.on::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--txt); border-radius:2px;}
.shell-wide{grid-template-columns:1fr;}
.seasonal-head{margin-bottom:26px;}
.seasonal-head h1{font-size:26px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px;}
.seasonal-head p{font-size:14.5px; color:var(--txt-2); line-height:1.6; max-width:620px;}
.seasonal-head strong{color:var(--txt); font-weight:600;}

/* botão de baixar referência no modal */
.cfg-download{width:100%; margin-top:10px; padding:13px; border-radius:12px; background:var(--card);
  border:.5px solid var(--stroke-strong); color:var(--txt-2); font-size:14px; font-weight:500;
  font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .15s;}
.cfg-download:hover{background:var(--card-hover); color:var(--txt); border-color:#48484F;}
.cfg-download.disabled, .cfg-download:disabled{opacity:.45; cursor:not-allowed;}
.cfg-download.disabled:hover, .cfg-download:disabled:hover{background:var(--card); color:var(--txt-2); border-color:var(--stroke-strong);}

/* ====================================================================
   Botão de favoritar (bookmark estilo Reels)
   ==================================================================== */
.fav-btn{display:inline-flex; align-self:flex-start; align-items:center; gap:7px; padding:6px 12px 6px 10px;
  border-radius:999px; background:var(--panel); border:.5px solid var(--stroke-strong); color:var(--txt-3);
  font-size:12.5px; font-weight:500; font-family:inherit; cursor:pointer;
  transition:transform .15s, background .15s, border-color .15s, color .15s;}
.fav-btn:hover{background:var(--card-hover); border-color:#48484F; color:var(--txt-2);}
.fav-btn svg{fill:transparent; transition:fill .18s;}
.fav-btn.on{background:rgba(243,211,107,.14); border-color:rgba(243,211,107,.5); color:#F3D36B;}
.fav-btn.on svg{fill:#F3D36B;}
.fav-btn.on span{color:#F3D36B;}
.fav-btn.pop{animation:favPop .3s ease;}
@keyframes favPop{0%{transform:scale(1)} 40%{transform:scale(1.1)} 70%{transform:scale(.96)} 100%{transform:scale(1)}}

/* ====================================================================
   Bottom nav mobile (glassmorphism) — Início · Favoritos · Perfil
   ==================================================================== */
.bottom-nav{display:none;}
@media(max-width:560px){
  .bottom-nav{
    display:flex; align-items:center; justify-content:space-around;
    position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:90;
    width:calc(100% - 32px); max-width:400px; padding:7px 8px; gap:4px;
    border-radius:20px;
    background:rgba(10,10,12,.9);
    border:.5px solid rgba(255,255,255,.09);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    box-shadow:0 8px 32px rgba(0,0,0,.55), inset 0 .5px 0 rgba(255,255,255,.08);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  /* aba de recolher: extensão sólida da barra, colada sem emenda (sem blur próprio) */
  .bn-handle{
    position:absolute; top:-15px; left:50%; transform:translateX(-50%); z-index:89;
    width:48px; height:20px; padding-bottom:5px; border-radius:11px 11px 0 0;
    display:flex; align-items:flex-start; justify-content:center;
    background:rgb(16,16,18); border:.5px solid rgba(255,255,255,.09); border-bottom:none;
    color:var(--txt-3); cursor:pointer; transition:color .15s;
  }
  .bn-handle:hover{color:var(--txt-2);}
  .bn-handle svg{width:16px; height:16px; margin-top:1px; transition:transform .3s;}
  .bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:4px; border:none; background:none; cursor:pointer;
    color:var(--txt-3); font-family:inherit; font-size:10.5px; font-weight:500;
    border-radius:12px; transition:color .15s; text-decoration:none;
  }
  .bn-item svg{width:19px; height:19px;}
  .bn-ico{display:flex; align-items:center; justify-content:center; width:40px; height:28px; border-radius:10px; transition:background .18s;}
  .bn-item.on{color:#fff;}
  .bn-item.on .bn-ico{background:rgba(255,255,255,.13);}
  .bn-item:active{transform:scale(.92);}

  /* estado recolhido: barra desce parcialmente, deixando uma faixa visível */
  .bottom-nav.collapsed{transform:translateX(-50%) translateY(calc(100% - 14px));}
  .bottom-nav.collapsed .bn-handle svg{transform:rotate(180deg);}
}

/* toast (avisos rápidos, ex.: placeholders da bottom nav) */
.cofre-toast{position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:92px; z-index:120;
  max-width:calc(100% - 40px); padding:12px 20px; border-radius:14px;
  background:rgba(28,28,33,.92); border:.5px solid rgba(255,255,255,.16); backdrop-filter:blur(14px);
  color:var(--txt); font-size:13.5px; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; box-shadow:0 8px 28px rgba(0,0,0,.4);}
.cofre-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ====================================================================
   Seção em destaque — Seleção do Criador
   ==================================================================== */
.featured{margin-bottom:34px;}
.featured-head{margin-bottom:16px;}
.featured-kicker{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700;
  letter-spacing:-.01em; color:var(--txt);}
.featured-kicker svg{color:#F3D36B;}
.featured-sub{font-size:13.5px; color:var(--txt-2); margin-top:6px; line-height:1.55; max-width:560px;}
/* slider horizontal (desktop e mobile), contido na largura da página */
.featured{position:relative; min-width:0; transition:opacity .2s ease;}
.featured.is-hidden{display:none;}
.featured-scroll{display:grid; grid-auto-flow:column; grid-auto-columns:300px; gap:18px;
  overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  max-width:100%; scrollbar-width:none; -ms-overflow-style:none;}
.featured-scroll .card{margin:0; scroll-snap-align:start;}
.featured-scroll::-webkit-scrollbar{display:none; width:0; height:0;}
.card-filter{border-color:rgba(243,211,107,.22);}
.badge-creator{background:rgba(243,211,107,.16); color:#F3D36B; border:.5px solid rgba(243,211,107,.4);}

/* setas de navegação (desktop) */
.featured-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:40px; height:40px;
  border-radius:50%; background:rgba(20,20,24,.92); border:.5px solid var(--stroke-strong); color:var(--txt);
  display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,.4); transition:opacity .2s, background .15s;}
.featured-nav:hover{background:rgba(34,34,40,.96);}
.featured-nav.prev{left:-8px;}
.featured-nav.next{right:-8px;}
.featured-nav.hidden{opacity:0; pointer-events:none;}

/* dica de swipe (mobile) */
.swipe-hint{display:none; align-items:center; gap:6px; font-size:12px; color:#F3D36B; margin-top:2px; font-weight:500;}
.swipe-hint svg{animation:swipeNudge 1.4s ease-in-out infinite;}
@keyframes swipeNudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)}}

@media(max-width:560px){
  .featured-scroll{grid-auto-columns:74%; gap:12px; scroll-snap-type:x mandatory;}
  .featured-kicker{font-size:14px;}
  .featured-nav{display:none;} /* no mobile usa swipe, não setas */
  .swipe-hint{display:inline-flex;}
  /* fade-to-black na borda direita, sugerindo mais conteúdo */
  .featured::after{content:""; position:absolute; top:46px; bottom:8px; right:0; width:56px; z-index:4;
    pointer-events:none; background:linear-gradient(to right, rgba(8,8,10,0), var(--bg) 92%);
    opacity:1; transition:opacity .25s;}
  .featured.at-end::after{opacity:0;} /* some ao chegar no fim */
}

/* ===================================================================== */
/* ===== Onboarding em etapas + Personalizar ===== */
/* ===================================================================== */
.ob-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,8,10,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.ob-modal{
  width:100%; max-width:440px; background:#16161A;
  border:1px solid #2A2A30; border-radius:20px; padding:30px 26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); position:relative;
  max-height:92vh; overflow-y:auto;
}
.ob-progress{height:4px; background:#26262C; border-radius:4px; margin-bottom:24px; overflow:hidden;}
.ob-bar{display:block; height:100%; width:25%; background:#F3D36B; border-radius:4px; transition:width .35s ease;}
.ob-step{display:none; text-align:center;}
.ob-step.is-active{display:block; animation:obFade .3s ease;}
@keyframes obFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.ob-emoji{font-size:40px; line-height:1; margin-bottom:10px;}
.ob-modal h2{font-size:21px; color:#F4F4F6; margin:0 0 8px; font-weight:700;}
.ob-lead{font-size:14.5px; color:#A8A8B2; line-height:1.6; margin:0 0 22px;}
.ob-howto{text-align:left; display:flex; flex-direction:column; gap:14px; margin-bottom:24px;}
.ob-how{display:flex; gap:13px; align-items:flex-start;}
.ob-how .ob-num{
  flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  background:#F3D36B; color:#1a1a1d; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.ob-how div{font-size:14px; color:#C8C8CC; line-height:1.55; padding-top:3px;}
.ob-how strong{color:#F4F4F6;}
.ob-choices{display:flex; flex-direction:column; gap:12px; margin-bottom:8px;}
.ob-choice{
  text-align:left; padding:16px 18px; border-radius:14px;
  background:#1E1E23; border:1.5px solid #2E2E36; cursor:pointer;
  transition:border-color .2s, background .2s; display:block; width:100%;
}
.ob-choice:hover{border-color:#F3D36B; background:#222228;}
.ob-choice strong{display:block; color:#F4F4F6; font-size:15.5px; margin-bottom:3px;}
.ob-choice span{display:block; color:#9A9AA4; font-size:13px;}
.ob-stores{display:flex; flex-direction:column; gap:12px; margin-bottom:14px;}
.ob-store{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  padding:15px 18px; border-radius:14px; background:#1E1E23;
  border:1.5px solid #2E2E36; color:#F3D36B; transition:border-color .2s, background .2s;
}
.ob-store:hover{border-color:#F3D36B; background:#222228;}
.ob-store div{display:flex; flex-direction:column;}
.ob-store strong{color:#F4F4F6; font-size:15px;}
.ob-store span{color:#9A9AA4; font-size:12.5px;}
.ob-hint{font-size:12.5px; color:#8A8A94; margin:4px 0 18px;}
.ob-hint strong{color:#C8C8CC;}
.ob-cats{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:24px;}
.ob-cat{
  padding:9px 15px; border-radius:999px; cursor:pointer; font-size:13.5px;
  background:#1E1E23; border:1.5px solid #2E2E36; color:#C8C8CC; transition:all .18s;
}
.ob-cat:hover{border-color:#4A4A54;}
.ob-cat.is-on{background:#F3D36B; border-color:#F3D36B; color:#1a1a1d; font-weight:600;}
.ob-actions{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:6px;}
.ob-next{
  flex:1; padding:13px; border-radius:12px; border:none; cursor:pointer;
  background:#F3D36B; color:#1a1a1d; font-weight:700; font-size:15px; transition:filter .2s;
}
.ob-next:hover{filter:brightness(1.05);}
.ob-skip,.ob-back{
  padding:13px 16px; border-radius:12px; cursor:pointer; font-size:14px;
  background:transparent; border:1px solid #34343C; color:#9A9AA4; transition:color .2s, border-color .2s;
}
.ob-skip:hover,.ob-back:hover{color:#C8C8CC; border-color:#4A4A54;}
.home-personalize{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 14px; border-radius:999px; font-size:13px;
  background:#1E1E23; border:1px solid #2E2E36; color:#C8C8CC; transition:border-color .2s;
}
.home-personalize:hover{border-color:#F3D36B; color:#F3D36B;}

/* Botão WhatsApp no onboarding */
.ob-wpp{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:12px 20px; border-radius:12px; margin-bottom:18px;
  background:#1FA855; color:#fff; font-weight:600; font-size:14.5px;
  transition:filter .2s;
}
.ob-wpp:hover{filter:brightness(1.08);}

/* ===== Correção: centralização das páginas Favoritos e Perfil ===== */
/* Estes containers não tinham estilo, então o conteúdo colava à esquerda. */
.fav-page, .account{
  padding:34px 40px 90px;
}
.fav-inner, .account-inner{
  max-width:1100px;
  margin:0 auto;
}
@media (max-width:768px){
  .fav-page, .account{ padding:18px 16px 96px; }
}

/* ===== Banner fixo do WhatsApp (abaixo do header) ===== */
.wpp-bar{
  display:flex; align-items:center; justify-content:center; gap:10px; position:relative;
  background:linear-gradient(90deg, rgba(37,211,102,.14), rgba(37,211,102,.08));
  border-bottom:1px solid rgba(37,211,102,.25); padding:10px 44px 10px 16px;
}
.wpp-bar-link{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  color:#3BE07A; font-size:13.5px; font-weight:600;
}
.wpp-bar-link span{color:var(--txt, #E8E8EC);}
.wpp-bar-link:hover span{color:#3BE07A;}
.wpp-bar-close{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#8A8A94; cursor:pointer; padding:6px;
  display:flex; border-radius:6px; transition:color .15s;
}
.wpp-bar-close:hover{color:#E8E8EC;}
@media (max-width:600px){
  .wpp-bar-link{font-size:12px;}
  .wpp-bar{padding:9px 40px 9px 12px;}
}

/* ===== Faixa de boas-vindas (primeira compra) ===== */
.welcome-bar{
  display:flex; align-items:flex-start; gap:13px; position:relative;
  background:linear-gradient(90deg, rgba(243,211,107,.13), rgba(243,211,107,.05));
  border-bottom:1px solid rgba(243,211,107,.24); padding:14px 48px 14px 18px;
}
.welcome-ico{
  flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(243,211,107,.12); border:.5px solid rgba(243,211,107,.32); color:#F3D36B; margin-top:1px;
}
.welcome-txt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.welcome-txt strong{color:var(--txt, #F2F2F3); font-size:14.5px; font-weight:700;}
.welcome-txt span{color:var(--txt-2, #C8C8CC); font-size:13px; line-height:1.5;}
.welcome-txt b{color:#F3D36B; font-weight:600;}
.welcome-close{
  position:absolute; right:14px; top:14px;
  background:none; border:none; color:#8A8A94; cursor:pointer; padding:6px;
  display:flex; border-radius:6px; transition:color .15s;
}
.welcome-close:hover{color:#E8E8EC;}
@media (max-width:600px){
  .welcome-bar{padding:12px 42px 12px 13px; gap:11px;}
  .welcome-ico{width:34px; height:34px;}
  .welcome-txt strong{font-size:13.5px;}
  .welcome-txt span{font-size:12.5px;}
}

/* ===== Balãozinho do tour do filtro ===== */
.filter-tip{
  position:absolute; z-index:900; width:262px; max-width:calc(100vw - 32px);
  opacity:0; pointer-events:none;
  transform:translateY(-6px); transition:opacity .25s, transform .25s;
}
.filter-tip.is-on{opacity:1; pointer-events:auto; transform:none;}
.filter-tip-arrow{
  width:0; height:0; margin-left:22px;
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-bottom:9px solid #F3D36B;
}
.filter-tip-body{
  background:#F3D36B; color:#1a1a1d; border-radius:12px; padding:14px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:6px;
}
.filter-tip-body strong{font-size:14.5px;}
.filter-tip-body span{font-size:12.8px; line-height:1.5; color:#3a3320;}
.filter-tip-ok{
  align-self:flex-end; margin-top:4px; padding:7px 16px; border-radius:8px;
  background:#1a1a1d; color:#F3D36B; border:none; cursor:pointer; font-size:13px; font-weight:600;
}
.filter-tip-ok:hover{filter:brightness(1.15);}
/* destaque pulsante no botão de filtros enquanto a dica está ativa */
.filter-tip-target{
  position:relative; box-shadow:0 0 0 0 rgba(243,211,107,.6);
  animation:tipPulse 1.6s infinite;
}
@keyframes tipPulse{
  0%{box-shadow:0 0 0 0 rgba(243,211,107,.55);}
  70%{box-shadow:0 0 0 10px rgba(243,211,107,0);}
  100%{box-shadow:0 0 0 0 rgba(243,211,107,0);}
}

/* ===================================================================== */
/* ===== Página de Favoritos (reconstrução do styling) ===== */
/* ===================================================================== */
.fav-head{margin-bottom:24px;}
.fav-head h1{display:flex; align-items:center; gap:10px; font-size:24px; color:var(--txt,#F4F4F6); font-weight:700; margin:0 0 4px;}
.fav-sub{font-size:14px; color:var(--txt-3,#8A8A94); margin:0;}
.fav-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:60px 24px; gap:6px;
}
.fav-empty-ico{color:#4A4A54; margin-bottom:8px;}
.fav-empty h2{font-size:18px; color:var(--txt,#E8E8EC); margin:0;}
.fav-empty p{font-size:14px; color:var(--txt-3,#8A8A94); margin:0 0 16px; max-width:320px; line-height:1.55;}
.fav-cta{
  display:inline-block; padding:11px 22px; border-radius:10px;
  background:#F3D36B; color:#1a1a1d; font-weight:600; font-size:14px; text-decoration:none;
}
.fav-cta:hover{filter:brightness(1.05);}

/* ===================================================================== */
/* ===== Página do Usuário / Perfil (reconstrução do styling) ===== */
/* ===================================================================== */
.acc-head{display:flex; align-items:center; gap:16px; margin-bottom:26px;}
.acc-avatar{
  flex:0 0 auto; width:60px; height:60px; border-radius:50%;
  background:linear-gradient(145deg,#F3D36B,#c9a94e); color:#1a1a1d;
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;
}
.acc-name{font-size:22px; color:var(--txt,#F4F4F6); margin:0 0 2px; font-weight:700;}
.acc-email{font-size:14px; color:var(--txt-3,#8A8A94); margin:0;}
.acc-card{
  background:var(--card,#16161A); border:1px solid var(--stroke,#26262C);
  border-radius:16px; padding:22px; margin-bottom:18px;
}
.acc-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.acc-card-top h2{font-size:16px; color:var(--txt,#E8E8EC); margin:0; font-weight:600;}
.acc-badge{font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px;}
.acc-badge.is-active{background:rgba(37,211,102,.14); color:#3BE07A;}
.acc-badge.is-inactive{background:rgba(180,80,80,.16); color:#E08A8A;}
.acc-rows{display:flex; flex-direction:column; gap:1px; background:var(--stroke,#26262C); border-radius:10px; overflow:hidden; margin-bottom:16px;}
.acc-row{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:var(--panel,#1A1A1F);}
.acc-row-label{font-size:13.5px; color:var(--txt-3,#8A8A94);}
.acc-row-value{font-size:13.5px; color:var(--txt,#E8E8EC); font-weight:500; text-align:right;}
.acc-note{font-size:13px; color:var(--txt-3,#9A9AA4); line-height:1.6; margin:0 0 16px;}
.acc-wa{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px; border-radius:12px; background:#25D366; color:#0B2A14;
  font-weight:600; font-size:14.5px; text-decoration:none; transition:filter .15s;
}
.acc-wa:hover{filter:brightness(1.07);}
.acc-links{display:flex; flex-direction:column; gap:1px; background:var(--stroke,#26262C); border-radius:14px; overflow:hidden; margin-bottom:18px;}
.acc-link{display:flex; align-items:center; gap:13px; padding:15px 16px; background:var(--card,#16161A); text-decoration:none; transition:background .15s;}
.acc-link:hover{background:var(--panel,#1A1A1F);}
.acc-link-ico{flex:0 0 auto; color:var(--txt-3,#8A8A94); display:flex;}
.acc-link span{flex:1; font-size:14px; color:var(--txt,#E8E8EC);}
.acc-link-arrow{color:#4A4A54;}
.acc-logout{text-align:center;}
.acc-logout-btn{
  background:none; border:1px solid var(--stroke,#34343C); color:var(--txt-3,#9A9AA4);
  padding:11px 24px; border-radius:10px; cursor:pointer; font-size:14px; transition:border-color .15s, color .15s;
}
.acc-logout-btn:hover{border-color:#5A2A2E; color:#E08A8A;}

/* Variante do balão do tour: à direita da sidebar (desktop) — seta apontando à esquerda */
.filter-tip.tip-right .filter-tip-arrow{
  position:absolute; left:-8px; top:18px; margin:0;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-right:9px solid #F3D36B; border-left:0;
}
.filter-tip.tip-right{padding-left:0;}

/* ===================================================================== */
/* ===== Paywall de reassinatura (assinatura expirada) ===== */
/* ===================================================================== */
/* catálogo borrado por trás do aviso */
.shell.is-locked{filter:blur(7px); pointer-events:none; user-select:none; opacity:.55;}
.paywall-overlay{
  position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(8,8,10,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.paywall-card{
  width:100%; max-width:460px; background:#16161A; border:1px solid #2A2A30; border-radius:20px;
  padding:34px 30px 28px; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.6); position:relative;
}
.paywall-ico{width:60px; height:60px; border-radius:50%; background:rgba(243,211,107,.12);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.paywall-card h2{font-size:23px; color:#F4F4F6; margin-bottom:10px; font-weight:700;}
.paywall-lead{font-size:14.5px; color:#A8A8B2; line-height:1.6; margin-bottom:26px;}
.paywall-plans{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px;}
.paywall-plan{background:#1E1E23; border:1px solid #2E2E36; border-radius:14px; padding:20px 16px; position:relative;}
.paywall-plan.featured{border-color:#F3D36B;}
.pp-tag{position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:#F3D36B; color:#1a1a1d;
  font-size:10.5px; font-weight:700; padding:4px 12px; border-radius:999px; white-space:nowrap;}
.pp-name{font-size:13px; color:#9A9AA4; font-weight:600; margin-bottom:6px;}
.pp-price{font-size:24px; color:#F4F4F6; font-weight:800; margin-bottom:16px; letter-spacing:-.02em;}
.pp-price small{font-size:13px; color:#62626A; font-weight:500;}
.pp-btn{display:block; padding:11px; border-radius:10px; background:#F3D36B; color:#1a1a1d;
  font-weight:700; font-size:13.5px; text-decoration:none; transition:filter .15s;}
.pp-btn:hover{filter:brightness(1.06);}
.pp-btn.ghost{background:transparent; border:1px solid #34343C; color:#C8C8CC;}
.pp-btn.ghost:hover{border-color:#F3D36B; color:#F3D36B; filter:none;}
.pp-btn.disabled{opacity:.5; cursor:not-allowed; pointer-events:none;}
.paywall-foot{font-size:13px; color:#8A8A94;}
.paywall-foot a{color:#F3D36B;}
@media(max-width:480px){
  .paywall-plans{grid-template-columns:1fr;}
  .paywall-card{padding:28px 22px 22px;}
}

/* Aviso do e-mail no paywall (usar o mesmo e-mail na Kiwify) */
.paywall-email-warn{
  display:flex; gap:12px; text-align:left; align-items:flex-start;
  background:rgba(243,211,107,.08); border:1px solid rgba(243,211,107,.32);
  border-radius:14px; padding:14px 16px; margin-bottom:22px;
}
.paywall-email-warn > svg{flex:0 0 auto; color:#F3D36B; margin-top:1px;}
.paywall-email-warn strong{display:block; color:#F4F4F6; font-size:13.5px; margin-bottom:4px;}
.paywall-email{
  display:block; font-family:'JetBrains Mono',monospace; font-size:14.5px; color:#F3D36B;
  font-weight:600; word-break:break-all; margin-bottom:6px;
}
.paywall-email-warn p{font-size:12.5px; color:#A8A8B2; line-height:1.5; margin:0;}

/* ===== Página dedicada de assinatura expirada (bloqueio total) ===== */
.expired-page{
  min-height:calc(100vh - 70px); display:flex; align-items:center; justify-content:center;
  padding:30px 18px;
}
.expired-page .paywall-card{margin:0;}

/* ===== Banner de aviso em perfil/favoritos (acesso liberado, mas expirado) ===== */
.expired-banner{
  display:flex; align-items:flex-start; gap:11px; margin-bottom:22px;
  background:rgba(243,211,107,.09); border:1px solid rgba(243,211,107,.32);
  border-radius:14px; padding:14px 16px; font-size:13.5px; color:#D8D8DC; line-height:1.55;
}
.expired-banner > svg{flex:0 0 auto; color:#F3D36B; margin-top:1px;}
.expired-banner a{color:#F3D36B; font-weight:600;}

/* ===================================================================== */
/* ===== Faixas por categoria na home (sliders horizontais) ===== */
/* ===================================================================== */
.cat-row{margin-bottom:38px;}
.cat-row-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px;}
.cat-row-title{font-size:20px; font-weight:700; color:var(--txt); letter-spacing:-.01em;}
.cat-row-all{display:inline-flex; align-items:center; gap:3px; font-size:13.5px; font-weight:600;
  color:#F3D36B; text-decoration:none; white-space:nowrap; transition:gap .15s;}
.cat-row-all:hover{gap:7px;}
.cat-row-scroll{display:grid; grid-auto-flow:column; grid-auto-columns:300px; gap:18px;
  overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  max-width:100%; scrollbar-width:none; -ms-overflow-style:none;}
.cat-row-scroll .card{margin:0; scroll-snap-align:start;}
.cat-row-scroll::-webkit-scrollbar{display:none; width:0; height:0;}

/* viewport: contém o scroller + fades + chevrons */
.cat-row-viewport{position:relative;}
/* fade nas bordas — sinaliza que há mais conteúdo para o lado */
.cat-row-viewport::before,
.cat-row-viewport::after{content:""; position:absolute; top:0; bottom:8px; width:60px; z-index:2;
  pointer-events:none; opacity:0; transition:opacity .2s;}
.cat-row-viewport::before{left:0; background:linear-gradient(90deg, var(--bg), transparent);}
.cat-row-viewport::after{right:0; background:linear-gradient(270deg, var(--bg), transparent);}
.cat-row-viewport.fade-start::before{opacity:1;}
.cat-row-viewport.fade-end::after{opacity:1;}
/* chevrons */
.cat-row-chevron{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(22,22,25,.92); color:var(--txt); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background .15s, transform .15s;}
.cat-row-chevron:hover{background:#F3D36B; color:#1a1a1d;}
.cat-row-chevron.prev{left:-6px;}
.cat-row-chevron.next{right:-6px;}
.cat-row-chevron[hidden]{display:none;}
@media(max-width:768px){
  .cat-row-chevron{display:none;} /* no mobile, só o fade + arraste */
}
/* card "ver todos" no fim da faixa */
.cat-row-more{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  min-width:160px; border-radius:18px; background:var(--card); border:.5px dashed var(--stroke-strong);
  color:var(--txt-2); text-decoration:none; font-size:14px; font-weight:600; scroll-snap-align:start;
  transition:border-color .15s, color .15s;}
.cat-row-more:hover{border-color:#F3D36B; color:#F3D36B;}
.cat-row-more-ico{width:48px; height:48px; border-radius:50%; background:var(--panel);
  display:flex; align-items:center; justify-content:center;}

/* ===== Página "Ver todos" de uma categoria ===== */
.cat-page{padding:28px 40px 90px; max-width:1560px; margin:0 auto;}
.cat-page-head{margin-bottom:26px;}
.cat-back{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; color:var(--txt-2);
  text-decoration:none; margin-bottom:14px; transition:color .15s;}
.cat-back:hover{color:var(--txt);}
.cat-page-head h1{font-size:30px; font-weight:800; color:var(--txt); letter-spacing:-.02em; margin-bottom:4px;}
.cat-page-sub{font-size:14.5px; color:var(--txt-3);}
.cat-page .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px;}

@media(max-width:768px){
  .cat-row-scroll{grid-auto-columns:74%; gap:12px; scroll-snap-type:x mandatory;}
  .cat-row-title{font-size:17px;}
  .cat-page{padding:18px 16px 96px;}
  .cat-page-head h1{font-size:24px;}
}

/* ===== Paginação numerada ===== */
.pager{grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:34px; flex-wrap:wrap;}
.pager-num, .pager-btn{display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; border-radius:10px; border:.5px solid var(--stroke);
  background:var(--card); color:var(--txt-2); text-decoration:none; font-size:14px; font-weight:500;
  cursor:pointer; transition:border-color .15s, color .15s, background .15s;}
.pager-num:hover, .pager-btn:hover{border-color:#F3D36B; color:#F3D36B;}
.pager-num.is-current{background:#F3D36B; color:#1a1a1d; border-color:#F3D36B; font-weight:700;}
.pager-btn.is-disabled{opacity:.35; pointer-events:none;}

/* ===== Seletor de cores predominantes (modal Configurar) ===== */
.cfg-colors{display:flex; flex-direction:column; gap:12px;}
.cfg-color-adder{display:flex; gap:10px; align-items:center;}
.cfg-color-input{-webkit-appearance:none; appearance:none; width:48px; height:48px;
  border:1px solid var(--stroke); border-radius:12px; background:none; cursor:pointer; padding:0; flex:none;}
.cfg-color-input::-webkit-color-swatch-wrapper{padding:4px;}
.cfg-color-input::-webkit-color-swatch{border:none; border-radius:8px;}
.cfg-color-input::-moz-color-swatch{border:none; border-radius:8px;}
.cfg-color-add{flex:1; padding:13px 14px; border-radius:12px; border:1px solid var(--stroke);
  background:var(--card,#161619); color:var(--txt,#fff); font-weight:600; font-size:14px; cursor:pointer;
  font-family:'Inter',sans-serif; min-height:48px;}
.cfg-color-add:hover{border-color:#F3D36B; color:#F3D36B;}
.cfg-colors-list{display:flex; flex-direction:column; gap:8px;}
.cfg-color-chip{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  border:1px solid var(--stroke); background:var(--bg,#0B0B0D);}
.cfg-color-rank{font-size:12px; font-weight:700; color:#F3D36B; min-width:24px; font-family:'JetBrains Mono',monospace;}
.cfg-color-swatch{width:26px; height:26px; border-radius:7px; flex:none; border:1px solid rgba(255,255,255,.15);}
.cfg-color-hex{flex:1; font-size:13.5px; font-family:'JetBrains Mono',monospace; color:var(--txt,#fff); letter-spacing:.5px;}
.cfg-color-up,.cfg-color-del{width:34px; height:34px; flex:none; border-radius:8px; border:1px solid var(--stroke);
  background:none; color:var(--txt-3,#9a9aa2); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center;}
.cfg-color-up:hover:not(:disabled),.cfg-color-del:hover{border-color:#F3D36B; color:#F3D36B;}
.cfg-color-up:disabled{opacity:.3; cursor:default;}
.cfg-color-del:hover{border-color:#e0706f; color:#e0706f;}
.cfg-color-hint{font-size:12px; color:var(--txt-3,#9a9aa2); line-height:1.5; margin:2px 0 0; font-family:'Inter',sans-serif;}

/* ===== Modal config v2: descrições, subtítulos, dica pós-copiar ===== */
.cfg-acc-desc{margin:0 0 12px; font-size:12.5px; color:var(--txt-3,#9a9aa2); line-height:1.55;}
.cfg-sub-label{font-size:12px; font-weight:600; color:var(--txt-2,#c8c8cc); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:9px;}
.cfg-paste-tip{max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .3s ease;
  font-size:12.5px; line-height:1.6; color:var(--txt-2,#c8c8cc);}
.cfg-paste-tip.show{max-height:320px; opacity:1; margin-top:10px; padding:12px 14px; border-radius:11px;
  background:rgba(243,211,107,.08); border:.5px solid rgba(243,211,107,.3);}
.cfg-paste-tip strong{color:#F3D36B;}

/* Dica abaixo do botão "Baixar imagem de referência" */
.cfg-download-hint{margin:8px 2px 0; font-size:12px; line-height:1.5; color:var(--txt-3,#9a9aa2); text-align:center;}

/* ===== Ocultar/mostrar a Seleção do Criador (preferência do usuário) ===== */
.featured-head{position:relative; padding-right:34px;}
.featured-close{position:absolute; top:0; right:0; width:30px; height:30px; display:flex;
  align-items:center; justify-content:center; border-radius:8px; border:.5px solid var(--stroke);
  background:none; color:var(--txt-3); cursor:pointer; transition:all .15s;}
.featured-close:hover{border-color:var(--stroke-strong); color:var(--txt); background:var(--panel);}
.featured-restore{display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; padding:10px 16px;
  border-radius:10px; border:.5px solid var(--stroke); background:var(--card); color:var(--txt-2);
  font-size:13px; font-weight:500; font-family:'Inter',sans-serif; cursor:pointer; transition:all .15s;}
.featured-restore:hover{border-color:#F3D36B; color:#F3D36B;}
.featured-restore svg{color:#F3D36B;}
.featured-restore.is-hidden{display:none;}

/* ===== Confirmação ao fechar o modal de config com algo configurado ===== */
.cfg-confirm{position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(8,8,10,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border-radius:inherit; animation:cfgConfFade .15s ease;}
@keyframes cfgConfFade{from{opacity:0}to{opacity:1}}
.cfg-confirm-box{width:100%; max-width:360px; background:var(--card); border:.5px solid var(--stroke-strong);
  border-radius:16px; padding:24px 22px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.5);}
.cfg-confirm-icon{width:46px; height:46px; margin:0 auto 14px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(243,211,107,.12); border:.5px solid rgba(243,211,107,.3); color:#F3D36B;}
.cfg-confirm-box h4{font-size:17px; font-weight:600; color:var(--txt); margin:0 0 7px; letter-spacing:-.01em;}
.cfg-confirm-box p{font-size:13.5px; line-height:1.55; color:var(--txt-2); margin:0 0 20px;}
.cfg-confirm-actions{display:flex; flex-direction:column; gap:9px;}
.cfg-confirm-stay{padding:12px; border-radius:11px; background:#F3D36B; color:#1A1505; border:none;
  font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:filter .15s;}
.cfg-confirm-stay:hover{filter:brightness(1.05);}
.cfg-confirm-leave{padding:12px; border-radius:11px; background:none; color:var(--txt-3); border:.5px solid var(--stroke);
  font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; transition:all .15s;}
.cfg-confirm-leave:hover{border-color:#5A2A2E; color:#E89098;}

/* ====================================================================
   v6 — Densidade mobile do catálogo
   Objetivo: o primeiro card aparecer MUITO mais cedo na tela.
   ==================================================================== */

/* "Como usar" da Seleção do Criador (expansível, fechado por padrão) */
.featured-how{margin-top:4px;}
.featured-how summary{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; list-style:none;
  font-size:12.5px; font-weight:600; color:#F3D36B; padding:2px 0; user-select:none;
}
.featured-how summary::-webkit-details-marker{display:none;}
.featured-how summary svg{transition:transform .2s ease;}
.featured-how[open] summary svg{transform:rotate(180deg);}
.featured-how p{
  font-size:12.5px; color:var(--txt-2); line-height:1.65; margin:8px 0 2px;
  max-width:520px; background:var(--card); border:.5px solid var(--stroke);
  border-radius:10px; padding:11px 13px;
}
.featured-how p b{color:#F3D36B;}

@media(max-width:560px){
  /* Banners: 1 linha cada, sem parágrafo */
  .wpp-bar{padding:7px 38px 7px 12px;}
  .wpp-bar-link span{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:calc(100vw - 104px); display:inline-block; vertical-align:bottom;
  }
  .welcome-bar{padding:10px 40px 10px 12px; gap:10px; align-items:center;}
  .welcome-ico{width:30px; height:30px; border-radius:9px;}
  .welcome-ico svg{width:17px; height:17px;}
  .welcome-txt{gap:1px;}
  .welcome-txt strong{font-size:13px;}
  .welcome-txt span{font-size:12px; line-height:1.4;}

  /* Toolbar: a contagem migra para o placeholder da busca (via JS) */
  .toolbar .count-pill{display:none;}

  /* Seleção do Criador mais enxuta */
  .featured{margin-bottom:24px;}
  .featured-head{margin-bottom:10px;}
  .featured-sub{font-size:12.5px; margin-top:4px; line-height:1.5;}
  .featured-how p{font-size:12px;}
}