/* ==========================================================================
   CONTENTPRO. Sistema visual (estatico, sem dependencias de build)
   1. Tokens / 2. Base / 3. Layout / 4. Componentes / 5. Views / 6. Responsivo
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root{
  --bg:#070b0a;
  --bg-soft:#0b100f;
  --surface:#0f1514;
  --surface-2:#141b19;
  --surface-3:#1a2220;
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.14);

  --text:#f2f5f2;
  --text-2:#a5afab;
  --text-3:#6f7a76;

  --accent:#8dff45;
  --accent-ink:#06120a;
  --accent-soft:rgba(141,255,69,.12);

  --feed:#4cc9ff;
  --stories:#b07bff;
  --ads:#ffb038;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:44px; --sp-8:64px;

  --shadow:0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.95);
  --ease:cubic-bezier(.22,.68,.32,1);

  --side-w:258px;
  --topbar-h:74px;
}

/* 2. BASE =============================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 78% -8%,rgba(141,255,69,.05),transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input{font:inherit}
.sprite{display:none}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent);color:var(--accent-ink)}

.app{min-height:100vh}
.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--accent);text-transform:uppercase}

/* 3. LAYOUT ============================================================= */
.side{
  position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:40;
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:22px 14px;background:var(--bg-soft);border-right:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 26px}
.brand-mark{
  display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;
  background:linear-gradient(150deg,var(--accent),#4ed01f);color:var(--accent-ink);
  box-shadow:0 8px 22px -10px rgba(141,255,69,.8);
}
.brand-mark .ico{stroke-width:2;fill:currentColor}
.brand-text b{display:block;font-size:16px;letter-spacing:-.02em}
.brand-text i{color:var(--accent);font-style:normal}
.brand-text small{display:block;color:var(--text-3);font-size:8.5px;letter-spacing:.16em;margin-top:2px}
.side-close{display:none;margin-left:auto;padding:6px;color:var(--text-2)}

.side-nav,.side-foot{display:grid;gap:3px}
.side-foot{margin-top:auto}
.side-nav button,.side-foot>button{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 12px;border-radius:12px;
  color:var(--text-3);font-size:14px;font-weight:600;text-align:left;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.side-nav button:hover,.side-foot>button:hover{background:var(--surface-2);color:var(--text)}
.side-nav button.active{background:var(--surface-2);color:var(--text)}
.side-nav button.active .ico{color:var(--accent)}
.side-nav button.active{position:relative}
.side-nav button.active::before{
  content:"";position:absolute;left:-14px;top:50%;translate:0 -50%;
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent);
}
.pill{
  margin-left:auto;font-style:normal;font-size:11px;font-weight:800;
  background:var(--accent-soft);color:var(--accent);border-radius:20px;padding:2px 8px;
}
.side-user{
  display:flex;align-items:center;gap:10px;margin-top:12px;padding:16px 8px 0;
  border-top:1px solid var(--line);
}
.avatar{
  display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg,var(--accent),#3ea51e);color:var(--accent-ink);
  font-size:12px;font-weight:900;
}
.side-user-text b{display:block;font-size:13px}
.side-user-text small{display:block;color:var(--text-3);font-size:11px}

.overlay{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.62);backdrop-filter:blur(2px)}
.overlay[hidden]{display:none}

.workspace{margin-left:var(--side-w);min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:20;height:var(--topbar-h);
  display:flex;align-items:center;gap:var(--sp-4);padding:0 clamp(16px,4vw,44px);
  border-bottom:1px solid var(--line);
  background:rgba(7,11,10,.82);backdrop-filter:blur(18px);
}
.topbar-search{
  display:flex;align-items:center;gap:10px;margin-left:auto;
  height:40px;padding:0 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text-3);font-size:13px;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.topbar-search:hover{border-color:var(--line-strong);color:var(--text-2)}
.topbar-search kbd{
  font:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:6px;padding:3px 6px;color:var(--text-3);
}
.topbar-user{display:flex;align-items:center;gap:10px}
.topbar-user-text b{display:block;font-size:13px}
.topbar-user-text small{display:block;color:var(--text-3);font-size:10px}
.icon-btn{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text-2);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.icon-btn:hover{border-color:var(--line-strong);color:var(--text)}
.menu-btn,.mobile-brand{display:none}

.content{width:min(1240px,100%);margin-inline:auto;padding:clamp(26px,4vw,46px) clamp(16px,4vw,44px) 110px}
.content:focus{outline:none}

.bottom-nav{display:none}

/* 4. COMPONENTES ======================================================== */

/* --- botões --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 20px;border-radius:13px;
  font-size:13.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap;
  transition:transform .15s var(--ease),filter .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 30px -18px rgba(141,255,69,.9)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--line-strong);background:var(--surface-3)}
.btn-ghost.is-saved{color:var(--accent);border-color:rgba(141,255,69,.35)}
.btn-ghost.is-saved .ico{fill:currentColor}
.btn-link{color:var(--text-2);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.btn-link:hover{color:var(--text)}
.btn-link .ico{width:16px;height:16px}
.btn.is-done{background:#fff;color:#08130c}

/* --- busca --- */
.search{
  display:flex;align-items:center;gap:12px;height:54px;padding:0 16px;
  border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--text-3);
  transition:border-color .18s var(--ease);
}
.search:focus-within{border-color:rgba(141,255,69,.45)}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text)}
.search input::placeholder{color:var(--text-3)}
.search-clear{padding:4px;color:var(--text-3)}
.search-clear:hover{color:var(--text)}

/* --- filtros de formato (Feed · Stories · Anúncios) --- */
.format-bar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:var(--sp-5) 0 var(--sp-4);
}
.format-card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;padding:14px 15px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  text-align:left;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.format-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.format-card .fc-icon{
  display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  background:var(--surface-3);color:var(--tone,var(--text-2));
}
.format-card b{display:block;font-size:14px}
.format-card small{display:block;color:var(--text-3);font-size:11px;margin-top:2px}
.format-card .fc-count{margin-left:auto;font-size:12px;font-weight:800;color:var(--text-3)}
.format-card[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--tone,var(--accent)) 55%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--tone,var(--accent)) 14%,transparent),var(--surface) 62%);
}
.format-card[aria-pressed="true"] .fc-icon{background:color-mix(in srgb,var(--tone,var(--accent)) 18%,transparent);color:var(--tone,var(--accent))}
.format-card[aria-pressed="true"] .fc-count{color:var(--tone,var(--accent))}
.format-card[data-surface="Todos"]{--tone:var(--accent)}
.format-card[data-surface="Feed"]{--tone:var(--feed)}
.format-card[data-surface="Stories"]{--tone:var(--stories)}
.format-card[data-surface="Anúncios"]{--tone:var(--ads)}

/* --- chips de tema --- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{
  white-space:nowrap;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  font-size:13px;font-weight:600;transition:.18s var(--ease);
}
.chips button:hover{border-color:var(--line-strong);color:var(--text)}
.chips button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* --- arte / imagem proporcional ---
   `container-type` fica no .art SEM padding proprio: assim 1cqw = 1% da largura
   real da arte e toda a tipografia escala junto com a proporção do formato. */
.art{
  position:relative;overflow:hidden;
  container-type:inline-size;
  aspect-ratio:var(--rw)/var(--rh);
  width:100%;border-radius:var(--r-md);color:#fff;
}
.art::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(115% 80% at 50% 118%,rgba(0,0,0,.62),transparent 62%),
    linear-gradient(152deg,rgba(255,255,255,.12),transparent 46%);
}
.art-orb{
  position:absolute;z-index:2;width:46cqw;height:46cqw;right:-10cqw;top:11%;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
}
.art-orb::after{content:"";position:absolute;inset:15%;border:1px solid rgba(255,255,255,.14);border-radius:50%}
.art-inner{
  position:absolute;z-index:3;inset:6.5cqw;
  display:flex;flex-direction:column;justify-content:space-between;gap:4cqw;
}
.art-tag{font-size:2.7cqw;letter-spacing:.16em;font-weight:700;opacity:.8}
.art-copy{display:flex;flex-direction:column;line-height:.85;letter-spacing:-.05em;font-weight:800;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.art-copy b:first-child{font-size:11cqw}
.art-copy b:nth-child(2){font-size:13.5cqw}
.art-copy em{font-size:2.7cqw;letter-spacing:.15em;font-style:normal;opacity:.72;margin-top:4.5cqw;font-weight:600}
.art-foot{display:flex;justify-content:space-between;align-items:center;font-size:2.4cqw;letter-spacing:.12em;opacity:.65;font-weight:600}
.art-foot span:first-child{border:1px solid rgba(255,255,255,.42);border-radius:1.2cqw;padding:1cqw 1.8cqw}

.t-acid{background:radial-gradient(circle at 71% 25%,#ceff62 0,rgba(140,220,50,.35) 16%,transparent 38%),linear-gradient(150deg,#25401a,#080f08 72%)}
.t-violet{background:radial-gradient(circle at 31% 29%,#a97cff 0,rgba(141,89,255,.32) 17%,transparent 40%),linear-gradient(155deg,#241a3b,#08070f 74%)}
.t-ember{background:radial-gradient(circle at 72% 27%,#ff8b3a 0,rgba(255,107,26,.32) 16%,transparent 38%),linear-gradient(148deg,#3f1710,#0c0806 72%)}
.t-blue{background:radial-gradient(circle at 67% 33%,#4b95ff 0,rgba(23,116,255,.32) 17%,transparent 40%),linear-gradient(148deg,#07172e,#05080d 74%)}
.t-silver{background:radial-gradient(circle at 68% 27%,#d5dede 0,rgba(182,194,194,.3) 16%,transparent 38%),linear-gradient(148deg,#272e2d,#080b0b 74%)}
.t-gold{background:radial-gradient(circle at 72% 29%,#f6d472 0,rgba(234,191,69,.3) 16%,transparent 38%),linear-gradient(148deg,#352a0d,#0d0b06 74%)}
.t-cyan{background:radial-gradient(circle at 67% 32%,#5ce8dc 0,rgba(34,211,197,.3) 17%,transparent 40%),linear-gradient(148deg,#073633,#060d0c 74%)}
.t-rose{background:radial-gradient(circle at 70% 26%,#ff6d9b 0,rgba(255,62,121,.3) 16%,transparent 38%),linear-gradient(148deg,#3a0a1b,#0c0608 74%)}

/* --- card --- */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:8px;text-align:left;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.card-visual{position:relative}
.fav-btn{
  position:absolute;right:9px;top:9px;z-index:3;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(6,10,9,.55);backdrop-filter:blur(6px);color:#fff;
  transition:.18s var(--ease);
}
.fav-btn:hover{background:rgba(6,10,9,.8);transform:scale(1.06)}
.fav-btn[aria-pressed="true"]{color:var(--accent);border-color:rgba(141,255,69,.5)}
.fav-btn[aria-pressed="true"] .ico{fill:currentColor}
.ratio-badge{
  position:absolute;left:9px;bottom:9px;z-index:3;
  display:flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:8px;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  background:rgba(5,9,8,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;
}
.ratio-badge i{width:6px;height:6px;border-radius:50%;background:var(--tone,var(--accent));font-style:normal}
.card-body{padding:14px 10px 10px;display:flex;flex-direction:column;flex:1}
.card-surface{font-size:10px;letter-spacing:.15em;font-weight:800;text-transform:uppercase;color:var(--tone,var(--accent))}
.card-body h3{font-size:15.5px;letter-spacing:-.015em;margin:7px 0 5px}
.card-body p{
  color:var(--text-3);font-size:12.8px;line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-cta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;
  padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);
  font-size:12.5px;font-weight:700;transition:.18s var(--ease);
}
.card:hover .card-cta{background:var(--surface-3);border-color:var(--line-strong)}
.card-cta .ico{width:16px;height:16px;color:var(--tone,var(--accent))}
.card[data-tone="Feed"]{--tone:var(--feed)}
.card[data-tone="Stories"]{--tone:var(--stories)}
.card[data-tone="Anúncios"]{--tone:var(--ads)}

/* --- grid proporcional por formato --- */
.grid{display:grid;gap:18px;align-items:start;grid-template-columns:repeat(auto-fill,minmax(var(--min,248px),1fr))}
.grid[data-surface="Stories"]{--min:206px}
.grid[data-surface="Anúncios"]{--min:236px}
.grid[data-surface="Feed"]{--min:262px}

/* --- seções --- */
.section{margin-top:var(--sp-7)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--sp-4)}
.section-head h2{font-size:21px;letter-spacing:-.03em;margin-top:6px}
.page-head{margin-bottom:var(--sp-5)}
.page-head h1{font-size:clamp(27px,3.4vw,35px);letter-spacing:-.045em;line-height:1.06;margin:9px 0 6px}
.page-head p{color:var(--text-2);max-width:62ch}

/* --- toast --- */
.toast{
  position:fixed;right:24px;bottom:24px;z-index:100;
  display:flex;align-items:center;gap:9px;padding:13px 18px;border-radius:13px;
  background:#fff;color:#08130c;font-size:13px;font-weight:800;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s var(--ease);
}
.toast.show{opacity:1;transform:none}
.toast .ico{width:18px;height:18px;color:#1f9c22;stroke-width:2.4}

/* 5. VIEWS ============================================================== */

/* --- home --- */
.hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  margin-bottom:var(--sp-5);
}
.hero h1{font-size:clamp(28px,3.6vw,36px);letter-spacing:-.045em;line-height:1.05;margin:9px 0 6px}
.hero p{color:var(--text-2)}
.hero-card{
  display:flex;align-items:center;gap:13px;flex:none;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--accent-soft),var(--surface) 60%);
}
.hero-card .ico{color:var(--accent)}
.hero-card small{display:block;font-size:9px;letter-spacing:.14em;color:var(--text-3);font-weight:700}
.hero-card b{display:block;font-size:13.5px;margin-top:3px}

.results-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:var(--sp-4) 0}
.results-bar span{color:var(--text-3);font-size:12.5px}
.results-bar b{color:var(--text)}

.empty{
  margin-top:var(--sp-4);padding:64px 24px;text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--r-xl);color:var(--text-3);
}
.empty .ico{width:30px;height:30px;color:var(--text-3);margin-bottom:12px}
.empty h3{color:var(--text);font-size:17px;margin-bottom:6px}
.empty p{font-size:13.5px;margin-bottom:18px}

/* --- detalhe --- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.85fr);gap:clamp(24px,4vw,48px);align-items:start}
.detail-art{display:grid;justify-items:center;gap:10px}
.art.is-large{
  --maxh:min(66vh,620px);
  width:min(100%,calc(var(--maxh) * var(--rw) / var(--rh)));
  border-radius:var(--r-lg);
}
.detail-art figcaption{
  display:flex;align-items:center;gap:7px;color:var(--text-3);font-size:11px;font-weight:700;letter-spacing:.1em;
}
.detail-art figcaption .ico{width:15px;height:15px}
.detail-copy h1{font-size:clamp(26px,3.2vw,34px);letter-spacing:-.04em;line-height:1.08;margin:10px 0 10px}
.detail-copy>p{color:var(--text-2);line-height:1.65}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:var(--sp-5) 0}
.meta-grid div{background:var(--surface);padding:14px 16px}
.meta-grid small{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--text-3);font-weight:700}
.meta-grid b{display:block;font-size:13px;margin-top:5px}
.prompt-box{
  border:1px solid rgba(141,255,69,.2);border-radius:var(--r-md);background:#0d1412;
  overflow:hidden;transition:border-color .18s var(--ease);
}
.prompt-box:hover{border-color:rgba(141,255,69,.34)}
.prompt-box summary{
  display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;list-style:none;
}
.prompt-box summary::-webkit-details-marker{display:none}
.prompt-box summary > span{font-size:11.5px;letter-spacing:.06em;font-weight:800}
.prompt-box summary b{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  color:var(--accent);font-size:9.5px;letter-spacing:.1em;
}
.prompt-box summary b .ico{width:13px;height:13px}
.prompt-box .chevron{
  width:18px;height:18px;flex:none;color:var(--text-3);
  transition:rotate .22s var(--ease),color .18s var(--ease);
}
.prompt-box[open] .chevron{rotate:180deg;color:var(--accent)}
.prompt-box summary:hover .chevron{color:var(--text)}
.prompt-box p{
  margin:0;padding:0 18px 18px;border-top:1px solid var(--line);padding-top:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.8px;line-height:1.75;color:#cfd6d2;white-space:pre-wrap;
}
.detail-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:var(--sp-4)}
.detail-note{display:flex;align-items:center;gap:7px;margin-top:12px;color:var(--text-3);font-size:11.5px}
.detail-note .ico{width:14px;height:14px;color:var(--accent)}
.sticky-cta{display:none}

/* --- minha loja --- */
.store-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.form-head{display:flex;gap:15px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}
.form-head>span{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:15px;background:var(--surface-3);color:var(--accent)}
.form-head h2{font-size:17.5px;letter-spacing:-.02em}
.form-head p{color:var(--text-3);font-size:13px;margin-top:3px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.fields label{display:grid;gap:7px}
.fields span{font-size:12px;font-weight:700;color:var(--text-2)}
.fields input{
  height:46px;padding:0 13px;border:1px solid var(--line);border-radius:11px;
  background:#0c110f;color:var(--text);transition:border-color .18s var(--ease);
}
.fields input:focus{outline:none;border-color:rgba(141,255,69,.45)}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}
.info-card{background:linear-gradient(155deg,var(--accent-soft),var(--surface) 58%)}
.info-card .ico{color:var(--accent)}
.info-card h3{font-size:16px;margin:12px 0 8px;letter-spacing:-.02em}
.info-card p{color:var(--text-2);font-size:13px;line-height:1.6}
.info-list{margin-top:16px;border-top:1px solid var(--line)}
.info-list div{padding:12px 0;border-bottom:1px solid var(--line)}
.info-list small{display:block;font-size:9.5px;letter-spacing:.13em;color:var(--text-3);font-weight:700}
.info-list b{display:block;font-size:13px;margin-top:4px;word-break:break-word}

/* --- tutorial --- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.steps article{display:flex;gap:16px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.steps span{color:var(--accent);font-size:12px;font-weight:900;flex:none}
.steps h3{font-size:15.5px;margin-bottom:6px}
.steps p{color:var(--text-3);font-size:13px}

/* --- suporte --- */
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.support-grid a,.support-grid button{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  color:var(--text);text-align:left;text-decoration:none;transition:.2s var(--ease);
}
.support-grid a:hover,.support-grid button:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.support-grid strong{display:block;font-size:14.5px}
.support-grid small{display:block;color:var(--text-3);font-size:12.5px;margin-top:4px}
.support-grid>*>.ico:first-child{color:var(--accent);width:22px;height:22px}

/* --- admin --- */
.admin-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-bottom:var(--sp-5)}
.metrics article{display:flex;gap:12px;align-items:center;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.metrics .ico{color:var(--accent)}
.metrics span{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--accent-soft)}
.metrics b{display:block;font-size:21px;letter-spacing:-.03em}
.metrics small{display:block;font-size:10.5px;color:var(--text-3)}
.table-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) 66px 124px 62px 34px;gap:12px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line);
}
.status-toggle{
  display:inline-flex;align-items:center;gap:7px;justify-self:start;
  padding:6px 11px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface-2);color:var(--text-3);font-size:11px;font-weight:700;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.status-toggle:hover{border-color:var(--line-strong);color:var(--text)}
.status-toggle i{width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.status-toggle.is-live{color:var(--text-2)}
.status-toggle.is-live i{background:var(--accent)}
.row-danger{
  display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  border:1px solid transparent;color:var(--text-3);transition:.18s var(--ease);
}
.row-danger:hover{border-color:rgba(255,107,107,.4);color:#ff6b6b;background:rgba(255,107,107,.08)}
.row-danger .ico{width:15px;height:15px}

/* --- imagem real da arte, quando cadastrada --- */
.art-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* --- seletor de formato no prompt --- */
.format-picker{margin:var(--sp-5) 0 0}
.picker-label{
  display:block;margin-bottom:10px;
  font-size:10px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;color:var(--text-3);
}
.picker-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px}
.picker-options button{
  display:grid;gap:3px;padding:12px 14px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.picker-options button:hover{border-color:var(--line-strong)}
.picker-options b{font-size:15px;letter-spacing:-.02em}
.picker-options small{color:var(--text-3);font-size:11.5px;line-height:1.35}
.picker-options button[aria-pressed="true"]{
  border-color:rgba(141,255,69,.5);
  background:linear-gradient(150deg,var(--accent-soft),var(--surface) 62%);
}
.picker-options button[aria-pressed="true"] b{color:var(--accent)}

/* --- formatos liberados, no admin --- */
.formatos-check{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.check-item{
  display:flex!important;flex-direction:row!important;align-items:center;gap:10px;
  padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#0c110f;cursor:pointer;
}
.check-item input{width:17px;height:17px;flex:none;accent-color:var(--accent);padding:0}
.check-item b{display:block;font-size:14px}
.check-item small{display:block;color:var(--text-3);font-size:11px;margin-top:2px;font-weight:400}

/* --- ampliar imagem --- */
.zoom-btn{
  position:absolute;right:9px;top:51px;z-index:3;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(6,10,9,.55);backdrop-filter:blur(6px);color:#fff;
  opacity:0;transition:.18s var(--ease);
}
.card:hover .zoom-btn,.zoom-btn:focus-visible{opacity:1}
.zoom-btn:hover{background:rgba(6,10,9,.8);transform:scale(1.06)}
.zoom-btn .ico{width:17px;height:17px}
/* em tela de toque nao existe hover: o botao fica sempre visivel */
@media (hover:none){ .zoom-btn{opacity:1} }

.art-zoom{position:relative;display:block;width:100%;padding:0;cursor:zoom-in}
.art-zoom-hint{
  position:absolute;right:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:999px;
  background:rgba(5,9,8,.72);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
  color:#fff;font-size:11.5px;font-weight:700;
  opacity:0;transition:opacity .18s var(--ease);
}
.art-zoom:hover .art-zoom-hint,.art-zoom:focus-visible .art-zoom-hint{opacity:1}
.art-zoom-hint .ico{width:15px;height:15px}
@media (hover:none){ .art-zoom-hint{opacity:1} }

.lightbox{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:clamp(16px,4vw,44px);
  background:rgba(4,7,6,.94);backdrop-filter:blur(10px);
  animation:zoomIn .18s var(--ease);
}
.lightbox[hidden]{display:none}
@keyframes zoomIn{from{opacity:0}to{opacity:1}}
.lightbox-frame{display:grid;gap:14px;justify-items:center;max-width:100%;max-height:100%}
.lightbox-frame img{
  max-width:100%;max-height:calc(100vh - 140px);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);object-fit:contain;
}
.lightbox-frame figcaption{color:var(--text-2);font-size:13.5px;text-align:center}
.lightbox-close{
  position:absolute;top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px);
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text-2);
  transition:.18s var(--ease);
}
.lightbox-close:hover{color:var(--text);border-color:#fff}
body.zoom-aberto{overflow:hidden}

/* --- marca de categoria escondida do cliente --- */
.tag-hidden{
  display:inline-block;margin-left:6px;padding:2px 7px;border-radius:6px;
  background:rgba(255,176,56,.14);color:var(--ads);
  font-size:9.5px;font-weight:800;font-style:normal;letter-spacing:.08em;text-transform:uppercase;
}

/* --- separador de secao dentro do formulario --- */
.form-divider{
  grid-column:1 / -1;margin-top:10px;padding-top:22px;border-top:1px solid var(--line);
}
.form-divider h3{font-size:16.5px;letter-spacing:-.02em;margin:8px 0 7px}
.form-divider p{color:var(--text-3);font-size:13px;line-height:1.6;max-width:62ch}
.form-divider b{color:var(--text-2)}

/* --- escolha do canal da chamada --- */
.canal-opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.canal{
  display:block!important;position:relative;cursor:pointer;
  padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:#0c110f;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.canal:hover{border-color:var(--line-strong)}
.canal input{position:absolute;opacity:0;pointer-events:none}
.canal > span{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.canal .ico{grid-row:span 2;width:22px;height:22px;color:var(--text-3)}
.canal b{font-size:14.5px}
.canal small{color:var(--text-3);font-size:12px;line-height:1.45;font-weight:400}
.canal:has(input:checked){
  border-color:rgba(141,255,69,.5);
  background:linear-gradient(150deg,var(--accent-soft),#0c110f 62%);
}
.canal:has(input:checked) .ico{color:var(--accent)}
.canal:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* navegadores sem :has continuam funcionando pela classe vinda do render */
.canal.is-on{border-color:rgba(141,255,69,.5);background:linear-gradient(150deg,var(--accent-soft),#0c110f 62%)}
.canal.is-on .ico{color:var(--accent)}

/* --- campo com sufixo fixo --- */
.input-suffix{position:relative;display:flex;align-items:center}
.input-suffix input{width:100%;padding-right:38px}
.input-suffix b{
  position:absolute;right:14px;color:var(--text-3);font-size:14px;font-weight:700;pointer-events:none;
}

/* --- dica embaixo de campo --- */
.field-hint{
  display:block;margin-top:2px;color:var(--text-3);font-size:12px;line-height:1.65;font-weight:400;
}
.field-hint code{
  display:inline-block;margin:2px 3px 2px 0;padding:2px 6px;border-radius:6px;
  background:var(--surface-3);color:var(--accent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
}

/* --- upload no admin --- */
.upload{display:flex;gap:16px;align-items:flex-start}
.upload-preview{
  flex:none;width:96px;aspect-ratio:4/5;border-radius:11px;overflow:hidden;
  border:1px dashed var(--line-strong);background:#0c110f;
  display:grid;place-items:center;color:var(--text-3);
}
.upload-preview img{width:100%;height:100%;object-fit:cover;display:block}
.upload-info{display:grid;gap:9px;flex:1;min-width:0}
.upload-info input[type="file"]{
  width:100%;padding:11px;border:1px solid var(--line);border-radius:11px;
  background:#0c110f;color:var(--text-2);font-size:13px;
}
.upload-info input[type="file"]::file-selector-button{
  margin-right:12px;padding:7px 13px;border:0;border-radius:8px;
  background:var(--surface-3);color:var(--text);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
}
.upload-info small{color:var(--text-3);font-size:12px;line-height:1.5}
.upload-remove{
  display:flex;flex-direction:row;align-items:center;gap:9px;
  color:var(--text-3);font-size:12.5px;cursor:pointer;
}
.upload-remove input{width:16px;height:16px;accent-color:#ff6b6b}

/* --- formulario do admin --- */
.fields label.full{grid-column:1 / -1}
.fields label.inline{
  grid-column:1 / -1;display:flex;flex-direction:row;align-items:center;gap:10px;
  padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#0c110f;
}
.fields label.inline input{width:18px;height:18px;accent-color:var(--accent);padding:0}
.fields label.inline span{font-weight:600;color:var(--text-2)}
.fields select{
  height:46px;padding:0 12px;border:1px solid var(--line);border-radius:11px;
  background:#0c110f;color:var(--text);font:inherit;
}
.fields select:focus{outline:none;border-color:rgba(141,255,69,.45)}
.fields textarea{
  padding:13px;border:1px solid var(--line);border-radius:11px;background:#0c110f;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.65;resize:vertical;
}
.fields textarea:focus{outline:none;border-color:rgba(141,255,69,.45)}
.table-row .thumb{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;font-size:9px;font-weight:900;color:#fff}
.table-row b{display:block;font-size:13.5px}
.table-row small{display:block;color:var(--text-3);font-size:11.5px}
.table-row em{font-style:normal;font-size:11.5px;color:var(--text-3)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2)}
.status i{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* 6. RESPONSIVO ========================================================= */
@media (max-width:1180px){
  .metrics{grid-template-columns:repeat(3,1fr)}
  .table-row{grid-template-columns:44px minmax(0,1fr) 112px 62px 34px}
  .table-row>em{display:none}
}
@media (max-width:980px){
  .detail{grid-template-columns:1fr}
  .art.is-large{--maxh:min(52vh,480px)}
  .store-layout{grid-template-columns:1fr}
  .info-card{order:-1}
  .support-grid{grid-template-columns:1fr}
  .format-bar{grid-template-columns:repeat(2,1fr)}
  .topbar-search span{display:none}
}
@media (max-width:780px){
  .side{transform:translateX(-104%);transition:transform .26s var(--ease);box-shadow:var(--shadow-lg)}
  .side.open{transform:none}
  .side-close{display:block}
  .workspace{margin-left:0}
  .topbar{height:62px;gap:10px}
  .menu-btn{display:grid}
  .mobile-brand{display:block;font-size:14.5px;letter-spacing:-.02em}
  .mobile-brand i{color:var(--accent);font-style:normal}
  .topbar-search{margin-left:auto;width:40px;padding:0;justify-content:center}
  .topbar-search kbd{display:none}
  .topbar-user-text,.topbar-user .icon-btn{display:none}
  .content{padding-bottom:96px}
  .hero{flex-direction:column;align-items:stretch;gap:16px}
  .hero-card{align-self:flex-start}
  .grid{gap:12px;--min:158px}
  .grid[data-surface="Stories"]{--min:150px}
  .grid[data-surface="Feed"]{--min:165px}
  .card-body{padding:12px 8px 6px}
  .card-body h3{font-size:14px}
  .fields{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .table-row{grid-template-columns:40px minmax(0,1fr) auto 30px}
  .table-row>em,.table-row>.btn-link{display:none}
  .table-row .status-toggle{font-size:0;gap:0;padding:8px}
  .table-row .status-toggle i{width:8px;height:8px}
  .admin-top{flex-direction:column}
  .admin-top .btn{width:100%}
  .detail-actions{grid-template-columns:1fr;margin-bottom:64px}
  .detail-actions .btn-primary{display:none}
  .sticky-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,11,10,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  }
  .sticky-cta .btn{width:100%}
  .bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:25;
    display:grid;grid-template-columns:repeat(4,1fr);
    height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:rgba(9,13,12,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  }
  .bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-3)}
  .bottom-nav small{font-size:9.5px;font-weight:700}
  .bottom-nav button.active{color:var(--accent)}
  .bottom-nav button.active .ico{fill:none}
  .toast{left:16px;right:16px;bottom:84px;justify-content:center}
  .format-bar{gap:8px}
  .format-card{padding:12px}
  .format-card small,.format-card .fc-count{display:none}
}
@media (max-width:420px){
  .format-bar{grid-template-columns:repeat(2,1fr)}
  .grid,.grid[data-surface]{--min:145px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}