/* Perfil Dark — chrome copper (marca) + mockup Instagram dark */
:root{
  --bg:#f6ece1; --card:#fffaf4; --ink:#3a2417; --ink-soft:#8a6c56; --line:#ecdcc9;
  --copper:#c85e2c; --copper-deep:#9b3c17; --copper-light:#e08a52; --gold-soft:#f0d9b4;
  --grad:linear-gradient(135deg,#b8481f 0%,#d97636 55%,#e3954f 100%);
  --grad-cta:linear-gradient(135deg,#c2521f 0%,#df7a38 100%);
  --shadow:0 14px 38px rgba(122,46,18,.16); --shadow-sm:0 6px 18px rgba(122,46,18,.10);
  --radius:24px; --radius-sm:15px;
  --font:"Poppins","Segoe UI",system-ui,sans-serif; --serif:"Playfair Display",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);
  background-image:radial-gradient(circle at 12% -8%,rgba(224,138,82,.45),transparent 42%),radial-gradient(circle at 92% 4%,rgba(200,94,44,.32),transparent 40%);
  background-attachment:fixed;color:var(--ink);line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.18}
.wrap{width:100%;max-width:560px;margin:0 auto;padding:18px}
.hidden{display:none!important}
.mt{margin-top:14px}.mt-lg{margin-top:24px}.center{text-align:center}
.muted{color:var(--ink-soft);font-size:14px}

/* Marca / login */
.brand-title{font-family:var(--serif);font-weight:700;color:var(--copper-deep);font-size:30px;line-height:1.05}
.brand-title span{display:block;font-style:italic}
.accel-pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--grad-cta);padding:7px 18px;border-radius:999px;margin:14px 0 10px;box-shadow:var(--shadow-sm)}
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--grad);
  background-image:radial-gradient(130% 90% at 25% 0%,rgba(255,210,170,.55),transparent 45%),radial-gradient(120% 120% at 85% 100%,rgba(109,39,16,.65),transparent 55%),var(--grad)}
.login-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 28px;width:100%;max-width:420px;text-align:center;border:1px solid rgba(255,255,255,.6)}
.brand-badge{width:74px;height:74px;border-radius:22px;margin:0 auto 6px;background:var(--grad-cta);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:var(--shadow-sm);border:2px solid rgba(255,255,255,.5)}
.login-card .sub{color:var(--ink-soft);font-size:15px;margin:8px 0 22px}
label{display:block;text-align:left;font-size:13px;font-weight:600;color:var(--ink-soft);margin:14px 0 6px}
input{width:100%;font-family:var(--font);font-size:16px;color:var(--ink);background:#fdf7f0;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;transition:border-color .2s,box-shadow .2s}
input:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 4px rgba(200,94,44,.15)}
.pw-wrap{position:relative}.pw-wrap input{padding-right:50px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:19px;padding:6px;opacity:.7}
.pw-hint{text-align:left;font-size:13px;color:var(--ink-soft);margin-top:8px;background:var(--gold-soft);border-radius:12px;padding:9px 13px}
.pw-hint strong{color:var(--copper-deep)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;font-size:16px;border:none;border-radius:999px;cursor:pointer;padding:15px 26px;width:100%;background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-sm);transition:transform .12s,filter .2s,opacity .2s}
.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{background:var(--card);color:var(--copper-deep);border:1.5px solid var(--copper-light);box-shadow:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}.btn-row .btn{flex:1;min-width:150px}

.msg{border-radius:var(--radius-sm);padding:12px 16px;font-size:14.5px;margin-top:16px;text-align:left}
.msg-error{background:#fdece6;color:#a23a1f;border:1px solid #f6d2c4}
.msg-ok{background:#eaf6ea;color:#2f7a44;border:1px solid #cfe9d4}

/* Topbar */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,250,244,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:560px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;color:var(--copper-deep);font-size:18px}
.logo .dot{width:34px;height:34px;border-radius:11px;background:var(--grad-cta);display:flex;align-items:center;justify-content:center;font-size:16px}
.link-btn{background:none;border:none;color:var(--ink-soft);font:600 14px var(--font);cursor:pointer}

/* Cartões do app */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;margin-bottom:16px}
.niche-tag{display:inline-block;background:var(--gold-soft);color:#8a5e22;font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px}
.section-title{font-family:var(--serif);font-size:18px;color:var(--copper-deep);margin:4px 0 10px}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--copper);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== MOCKUP INSTAGRAM DARK ===== */
.ig{background:#000;color:#fff;border-radius:22px;overflow:hidden;border:1px solid #1f1f1f;font-size:14px;box-shadow:0 16px 40px rgba(0,0,0,.4);
  /* --niche é a cor pastel forte do nicho; sobrescrita por data-niche abaixo */
  --niche:#9A98A0}
.ig[data-niche="maternidade"]{--niche:#F58FA8}
.ig[data-niche="educacao"]{--niche:#EFBE3E}
.ig[data-niche="cristao"]{--niche:#9F84D8}
.ig[data-niche="financas"]{--niche:#5DC18D}
.ig[data-niche="fit"]{--niche:#4FC4BC}
.ig[data-niche="negocios"]{--niche:#F47B5A}
.ig[data-niche="festas"]{--niche:#E55BA1}
.ig[data-niche="relacionamento"]{--niche:#E25E5E}
.ig[data-niche="idoso"]{--niche:#A892C8}
.ig-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #161616}
.ig-top .u{display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px}
.ig-top .u .lock{font-size:12px;opacity:.7}
.ig-top .ic{opacity:.85;font-size:18px;letter-spacing:2px}
.ig-head{display:flex;align-items:center;gap:22px;padding:18px 16px 6px}
.ig-avatar{width:86px;height:86px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#feda75,#d62976 45%,#962fbf 75%,#4f5bd5);padding:3px}
.ig-avatar .inner{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:var(--niche)}
.ig-avatar .initial{font-family:var(--serif);font-weight:700;font-size:34px;color:#fff;letter-spacing:1px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.ig-avatar .niche-dot{position:absolute;bottom:3px;right:3px;background:#000;border:1.5px solid rgba(255,255,255,.25);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px}
.ig-stats{display:flex;flex:1;justify-content:space-around;text-align:center}
.ig-stats .n{font-weight:700;font-size:17px;display:block}
.ig-stats .l{font-size:12.5px;color:#bdbdbd}
.ig-name{padding:2px 16px 0;font-weight:700}
.ig-cat{padding:1px 16px 0;color:#bdbdbd;font-size:13px}
.ig-bio{padding:4px 16px 12px;white-space:pre-line;line-height:1.45}
.ig-btns{display:flex;gap:7px;padding:0 16px 14px}
.ig-btns .b{flex:1;text-align:center;background:#262626;border-radius:9px;padding:8px 0;font-weight:600;font-size:13.5px}
.ig-btns .b.share{flex:0 0 auto;padding:8px 12px}
.ig-highlights{display:flex;gap:16px;padding:4px 16px 16px;overflow-x:auto}
.ig-hl{text-align:center;flex:0 0 auto;width:62px}
.ig-hl .ring{width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);background:var(--niche);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.ig-hl .t{font-size:11.5px;color:#dbdbdb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-tabs{display:flex;border-top:1px solid #262626}
.ig-tabs .tab{flex:1;text-align:center;padding:10px 0;font-size:18px;opacity:.4}
.ig-tabs .tab.on{opacity:1;border-top:1px solid #fff;margin-top:-1px}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-cell{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:9px;text-align:center;
  background:#141414;font-size:10.5px;color:#eee;line-height:1.22;overflow:hidden}
.ig-cell .post{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:8px 7px;text-align:left}
.ig-cell .post .head{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.ig-cell .post .title{font-family:var(--serif);font-weight:700;font-size:11.5px;line-height:1.2;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.ig-cell .post .foot{font-size:8.5px;opacity:.78;display:flex;justify-content:space-between;align-items:center;gap:4px}
.ig-cell .post .foot .brand{font-weight:700;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-cell .post .icon{font-size:18px;align-self:flex-start}
.ig-cell .post .num{font-family:var(--serif);font-weight:700;font-size:36px;line-height:1;opacity:.85}
.ig-cell .post .quote{font-family:var(--serif);font-style:italic;font-size:12px;line-height:1.2}
.ig-cell .post .arrow{font-size:22px;align-self:flex-end}
.ig-cell .badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:2px 5px;font-size:8.5px;font-weight:700;letter-spacing:.06em}
.ig-cell .reels-badge{position:absolute;top:5px;right:5px;display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.55);border-radius:6px;padding:2px 5px;font-size:8.5px;font-weight:700;color:#fff;backdrop-filter:blur(4px);z-index:2}
.ig-cell .reels-badge .play{font-size:7.5px}
.ig-cell .reels-badge .dur{letter-spacing:.04em}

/* === LAYOUTS DE POST ATÔMICO === */
.ig-cell.capa{background:linear-gradient(135deg,#1d1410 0%,#3a1e10 50%,#0a0606 100%)}
.ig-cell.capa::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(224,138,82,.18),transparent 60%);pointer-events:none}
.ig-cell.capa .post .title{font-size:12.5px;color:#fff}

.ig-cell.dica{background:linear-gradient(160deg,#0f1f2a 0%,#1d3a52 100%)}
.ig-cell.dica .post .head{color:#9bd5ff}
.ig-cell.dica .post .title{color:#fff}

.ig-cell.lista{background:linear-gradient(135deg,#2c1748 0%,#0d0518 100%)}
.ig-cell.lista .post .num{color:#e3a3ff;text-shadow:0 4px 12px rgba(227,163,255,.4)}
.ig-cell.lista .post .title{color:#fff}

.ig-cell.alerta{background:linear-gradient(135deg,#4a0f0f 0%,#1a0303 100%)}
.ig-cell.alerta .post .head{color:#ffb3b3}
.ig-cell.alerta .post .title{color:#fff}
.ig-cell.alerta::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#ff4848}

.ig-cell.prova{background:linear-gradient(135deg,#13301f 0%,#06160d 100%)}
.ig-cell.prova .post .head{color:#9bf2b3}
.ig-cell.prova .post .quote{color:#fff}
.ig-cell.prova::before{content:"\201C";position:absolute;top:-8px;left:4px;font-family:var(--serif);font-size:54px;color:rgba(155,242,179,.3);line-height:1}

.ig-cell.cta{background:linear-gradient(135deg,#b8481f 0%,#d97636 55%,#e3954f 100%);color:#fff}
.ig-cell.cta .post .head{color:#fff;opacity:1}
.ig-cell.cta .post .title{color:#fff;font-size:13px}
.ig-cell.cta .post .arrow{color:#fff}
.ig-cell.cta::after{content:"";position:absolute;right:-20px;bottom:-20px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.08)}

/* Alternativas / sugestões */
.opt{background:#fdf7f0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:14px}
.opt b{color:var(--copper-deep)}

/* Cards de reels (seção sugestões) */
.reel-opt{padding:12px 13px}
.reel-opt .reel-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.reel-opt .layout-tag{display:inline-block;background:var(--gold-soft);color:#8a5e22;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.reel-opt .layout-capa{background:#3a1e10;color:#fff}
.reel-opt .layout-dica{background:#0f1f2a;color:#9bd5ff}
.reel-opt .layout-lista{background:#2c1748;color:#e3a3ff}
.reel-opt .layout-alerta{background:#4a0f0f;color:#ffb3b3}
.reel-opt .layout-prova{background:#13301f;color:#9bf2b3}
.reel-opt .layout-cta{background:var(--grad-cta);color:#fff}
.reel-opt .dur-tag{font-size:11.5px;color:var(--ink-soft);font-weight:600}
.reel-opt .reel-title{font-family:var(--serif);font-weight:700;color:var(--copper-deep);margin-bottom:4px;line-height:1.25}
.reel-opt .reel-script{font-size:13px;color:var(--ink-soft);line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--gold-soft);color:#8a5e22;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.lock-banner{display:flex;gap:10px;align-items:center;background:#fff6ee;border:1px solid var(--copper-light);border-radius:12px;padding:11px 14px;font-size:13.5px;color:#8a4a23;margin-top:8px}

@media(max-width:600px){.brand-title{font-size:26px}.ig-avatar{width:74px;height:74px;font-size:28px}.ig-head{gap:14px}}