/* ============================================================
   HUBFY · Painel — Identidade visual
   ============================================================ */
:root{
  --brand-blue:    #2B6BF6;
  --brand-blue-dp: #1450E0;
  --brand-purple:  #7B3FE4;
  --brand-magenta: #E01FBD;
  --brand-pink:    #FF2EC4;
  --grad: linear-gradient(120deg, #2B6BF6 0%, #7B3FE4 52%, #E01FBD 100%);
  --grad-soft: linear-gradient(120deg, rgba(43,107,246,.16), rgba(123,63,228,.14));

  --bg:        #0A0E1A;
  --bg-2:      #0D1322;
  --surface:   #141B30;
  --surface-2: #1B2440;
  --border:    #25304F;
  --border-2:  #324063;

  --text:      #EAEEF7;
  --text-dim:  #94A1C0;
  --text-mut:  #5E6B8C;

  --ok:   #28C76F;
  --warn: #FF9F2E;
  --err:  #FF5C7A;

  --r:    14px;
  --r-sm: 10px;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
body{
  font-family:var(--font);
  background:var(--bg);
  min-height:100vh;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
/* brilho de fundo numa camada FIXA (melhor performance mobile, sem emenda ao rolar) */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(123,63,228,.10), transparent 62%),
    radial-gradient(1000px 700px at -8% 0%, rgba(43,107,246,.13), transparent 58%);
}

/* acessibilidade + bateria: desliga animações pesadas se o usuário pedir */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer }
img{ display:block; max-width:100% }
::selection{ background:rgba(123,63,228,.4) }

/* ---------- Helpers ---------- */
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hidden{ display:none !important }
.muted{ color:var(--text-dim) }
.center{ text-align:center }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--r-sm); border:1px solid transparent;
  font-weight:600; font-size:14px; color:var(--text); background:var(--surface-2);
  transition:.15s transform,.15s opacity,.15s border-color; white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none }
.btn-primary{ background:var(--grad); color:#fff; border:none; box-shadow:0 6px 20px rgba(123,63,228,.35) }
.btn-ghost{ background:transparent; border:1px solid var(--border-2); color:var(--text-dim) }
.btn-ghost:hover{ color:var(--text); border-color:var(--brand-blue) }
.btn-sm{ padding:7px 12px; font-size:13px }
.btn-block{ width:100% }

/* botão da IA — borda com gradiente girando */
@property --ia-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes iaspin{ to{ --ia-ang:360deg } }
.btn-ia{
  position:relative; border:2px solid transparent; color:var(--text); font-weight:600;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--ia-ang), #2B6BF6, #7B3FE4, #E01FBD, #1FB6E0, #2B6BF6) border-box;
  animation:iaspin 3.5s linear infinite;
}
.btn-ia:hover{ filter:brightness(1.12); transform:translateY(-1px) }
.btn-ia .ico-svg{ color:var(--brand-magenta) }

/* ---------- Inputs ---------- */
.field{ margin-bottom:16px }
.field label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:7px; font-weight:500 }
.input, .textarea, select{
  width:100%; padding:12px 14px; background:var(--bg-2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-sm); font-size:14px; font-family:inherit;
  transition:.15s border-color,.15s box-shadow;
}
.input:focus, .textarea:focus, select:focus{
  outline:none; border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(43,107,246,.18);
}
.textarea{ resize:vertical; min-height:84px }
.hint{ font-size:12px; color:var(--text-mut); margin-top:6px; line-height:1.45 }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px }
.login-card{
  width:100%; max-width:400px; background:rgba(20,27,48,.78);
  backdrop-filter:blur(14px); border:1px solid var(--border);
  border-radius:20px; padding:38px 34px; box-shadow:var(--shadow);
}
.login-logo{ width:64px; margin:0 auto 18px; border-radius:16px }
.login-card h1{ font-size:22px; text-align:center; margin-bottom:4px }
.login-card .sub{ text-align:center; color:var(--text-dim); font-size:14px; margin-bottom:28px }
.login-err{
  background:rgba(255,92,122,.12); border:1px solid rgba(255,92,122,.35);
  color:#FFB3C0; font-size:13px; padding:10px 12px; border-radius:var(--r-sm); margin-bottom:14px;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:50; height:62px;
  display:flex; align-items:center; gap:16px; padding:0 22px;
  background:rgba(10,14,26,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar .logo{ height:46px }
.topbar .spacer{ flex:1 }
.topbar .user{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-dim) }
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; font-weight:700; color:#fff; font-size:14px;
  overflow:hidden; flex:none;
}
.role-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.3px; white-space:nowrap }
.role-chip.gestor{ background:rgba(43,107,246,.18); color:#7FA8FF }
.role-chip.social{ background:rgba(40,199,111,.16); color:#5BE29A }
.container{ max-width:1340px; margin:0 auto; padding:28px 22px 60px }
.page-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap }
.page-head h2{ font-size:24px; font-weight:700 }

/* ---------- Seleção de cliente ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px }
.client-card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:22px; cursor:pointer; overflow:hidden;
  transition:.18s transform,.18s border-color;
}
.client-card:hover{ transform:translateY(-3px); border-color:var(--border-2) }
.client-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent,var(--grad));
}
.client-card .ico{
  width:50px; height:50px; border-radius:13px; background:var(--grad-soft);
  border:1px solid var(--border-2); display:grid; place-items:center;
  font-weight:800; font-size:20px; margin-bottom:14px; color:#fff;
}
.client-card .ico{ overflow:hidden }
.client-card .ico img{ width:100%; height:100%; object-fit:cover; display:block }
.ico.avatar img{ width:100%; height:100%; object-fit:cover; display:block }
/* quando há logo, fundo/borda neutros (sem a cor do cliente vazando) */
.ico.com-logo{ background:#0d1322 !important; border-color:var(--border) !important }
.ico.editavel{ cursor:pointer; position:relative }
.ico.editavel .logo-edit{ position:absolute; inset:0; display:none; place-items:center; background:rgba(8,12,22,.6); border-radius:inherit; color:#fff }
.ico.editavel:hover .logo-edit{ display:grid }
.client-card h3{ font-size:17px; margin-bottom:4px }
.client-card .meta{ font-size:12px; color:var(--text-mut); font-family:monospace }
.client-card .cstatus{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim) }
.dot{ width:8px; height:8px; border-radius:50%; flex:none }
.dot.on{ background:var(--ok); animation:dotpulse 1.6s infinite }
@keyframes dotpulse{
  0%{ box-shadow:0 0 0 0 rgba(40,199,111,.55) }
  70%{ box-shadow:0 0 0 9px rgba(40,199,111,0) }
  100%{ box-shadow:0 0 0 0 rgba(40,199,111,0) }
}
.dot.off{ background:var(--text-mut) }
.dot.checking{ background:var(--brand-blue); animation:pulse 1s infinite }
@keyframes pulse{ 50%{ opacity:.35 } }
.client-card .arrow{ position:absolute; right:20px; bottom:20px; color:var(--text-mut); transition:.15s }
.client-card:hover .arrow{ color:var(--brand-blue); transform:translateX(3px) }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:26px; overflow-x:auto }
.tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:13px 18px; background:none; border:none; color:var(--text-dim);
  font-weight:600; font-size:14px; border-bottom:2px solid transparent; white-space:nowrap;
}
.tab:hover{ color:var(--text) }
.tab.active{ color:var(--text); border-bottom-color:var(--brand-blue) }

/* ---------- Criativos ---------- */
.toolbar{ display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap }
.toolbar .spacer{ flex:1 }
.creatives-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px }
.creative{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:.15s border-color;
}
.creative:hover{ border-color:var(--border-2) }
.creative .thumb{
  aspect-ratio:1/1; background:var(--bg-2); position:relative; overflow:hidden;
  display:grid; place-items:center;
}
.creative .thumb img, .creative .thumb video{ width:100%; height:100%; object-fit:cover }
.creative .thumb .ph{ color:var(--text-mut); font-size:34px }
.creative .body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1 }
.creative .body h4{ font-size:15px }
.creative .legenda{ font-size:13px; color:var(--text-dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.creative .foot{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px }
.creative-periodo{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--brand-blue) }
.creative-periodo .ico-svg{ color:var(--brand-blue) }

/* pastas por mês */
.mes-folder{ margin-bottom:26px }
.mes-head{ display:flex; align-items:center; gap:9px; font-size:15px; margin-bottom:14px; color:var(--text) }
.mes-head .ico-svg{ color:var(--brand-blue) }
.mes-head .muted{ font-size:13px; font-weight:400 }
.mes-vazio{ padding:22px; text-align:center; color:var(--text-mut); font-size:13.5px; border:1px dashed var(--border-2); border-radius:var(--r) }

/* grid de pastas (primeira tela de Criativos) */
.pastas-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px }
.pasta-card{ position:relative; display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; cursor:pointer; transition:.16s transform,.16s border-color }
.pasta-card:hover{ transform:translateY(-2px); border-color:var(--border-2) }
.pasta-ico{ width:46px; height:46px; border-radius:12px; background:var(--grad-soft); border:1px solid var(--border-2); display:grid; place-items:center; color:var(--brand-blue); flex:none }
.pasta-info h4{ font-size:15px; margin-bottom:2px }
.pasta-card .arrow{ margin-left:auto; color:var(--text-mut); transition:.15s }
.pasta-card:hover .arrow{ color:var(--brand-blue); transform:translateX(3px) }
.pasta-bar{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
.pasta-bar-title{ display:flex; align-items:center; gap:8px; font-size:15px }
.pasta-bar-title .ico-svg{ color:var(--brand-blue) }

/* toggle switch */
.toggle-row{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--text) }
.switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none }
.switch input{ opacity:0; width:0; height:0 }
.switch .track{ position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--border-2); border-radius:20px; transition:.2s }
.switch .track::before{ content:''; position:absolute; width:16px; height:16px; left:3px; top:2px; background:var(--text-dim); border-radius:50%; transition:.2s }
.switch input:checked + .track{ background:var(--grad); border-color:transparent }
.switch input:checked + .track::before{ transform:translateX(18px); background:#fff }
.periodo-box{ margin-top:12px; padding:14px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-sm) }
.periodo-box label.fp-check{ display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer }
.periodo-box input[type=date]{ color-scheme:dark }

/* status badges */
.badge{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; letter-spacing:.2px }
.badge.novo{       background:rgba(43,107,246,.18); color:#7FA8FF }
.badge.em_subida{  background:rgba(255,159,46,.16); color:#FFC074 }
.badge.aguardando{ background:rgba(123,63,228,.18); color:#C9A9FF }
.badge.ativo{      background:rgba(40,199,111,.16); color:#5BE29A }
.badge.pausado{    background:rgba(148,161,192,.16); color:#B9C4DD }

/* ---------- Métricas ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:26px }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px }
.kpi .label{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-dim); margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px }
.kpi .kpi-sub .ico-svg{ color:var(--brand-blue); vertical-align:-2px }
.kpi .value{ font-size:26px; font-weight:800 }
.kpi .delta{ font-size:12px; margin-top:4px }
.kpi .delta.up{ color:var(--ok) } .kpi .delta.down{ color:var(--err) }
.kpi .kpi-sub{ font-size:12.5px; color:var(--text-dim); margin-top:6px }
.kpi .kpi-sub strong{ color:var(--text) }
.kpi-sec-title{ font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-dim); margin:6px 0 12px; font-weight:600 }

.table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:auto; -webkit-overflow-scrolling:touch }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px }
table.data th, table.data td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap }
table.data th{ color:var(--text-dim); font-weight:600; user-select:none; background:var(--bg-2) }
table.data tr:last-child td{ border-bottom:none }
table.data td.num, table.data th.num{ text-align:right; font-variant-numeric:tabular-nums }

/* ranking: colunas ordenáveis e redimensionáveis */
.rank-table th{ position:relative; overflow:hidden; text-overflow:ellipsis; border-right:1px solid var(--border) }
.rank-table td{ overflow:hidden; text-overflow:ellipsis; border-right:1px solid rgba(37,48,79,.45) }
.rank-table th:last-child, .rank-table td:last-child{ border-right:none }
.rank-table th.sortable{ cursor:pointer }
.rank-table th.sortable:hover{ color:var(--text) }
.rank-table th.sort-desc::after{ content:'  ↓'; color:var(--brand-blue) }
.rank-table th.sort-asc::after{ content:'  ↑'; color:var(--brand-blue) }
/* alça de redimensionamento visível em cada borda de coluna */
.col-resizer{ position:absolute; top:0; right:-1px; width:12px; height:100%; cursor:col-resize; z-index:2 }
.col-resizer::after{ content:''; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:2px; height:16px; background:var(--border-2); border-radius:2px; transition:.12s }
.col-resizer:hover::after{ background:var(--brand-blue); width:3px; height:62% }

.rank-row{ cursor:pointer }
.rank-row:hover td{ background:rgba(43,107,246,.06) }
.rank-name{ overflow:hidden; text-overflow:ellipsis }
.rank-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:6px 0 16px }
.rank-head h3{ font-size:18px }
.rank-hint{ font-size:12px; color:var(--text-mut) }

/* popover de filtros */
.filtro-pop{ position:fixed; z-index:150; background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:12px; padding:14px; box-shadow:var(--shadow); min-width:230px }
.fp-sec{ margin-bottom:12px }
.fp-title{ font-size:11.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; letter-spacing:.5px }
.fp-check{ display:flex; align-items:center; gap:8px; font-size:14px; padding:5px 0; cursor:pointer }
.fp-check input{ accent-color:var(--brand-magenta) }
.fp-foot{ display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--border); padding-top:10px }
.rank-badge{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; background:rgba(43,107,246,.16); border:1px solid rgba(43,107,246,.3); font-size:12px; font-weight:700; flex:none }
.rank-thumb{ position:relative; width:46px; height:46px; border-radius:9px; overflow:hidden; background:var(--bg-2); border:1px solid var(--border) }
.rank-thumb img{ width:100%; height:100%; object-fit:cover }
.rank-thumb .ph{ display:grid; place-items:center; width:100%; height:100%; font-size:20px; color:var(--text-mut) }
.rank-thumb .thumb-zoom{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(8,12,22,.55); opacity:0; transition:.15s }
.rank-row:hover .thumb-zoom{ opacity:1 }
.rank-group{ margin-bottom:28px }
.rank-title{ display:flex; align-items:center; gap:10px; margin:0 0 12px }
.tipo-badge{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; padding:5px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border-2); color:var(--text) }

/* ícones */
.ico-svg{ flex:none; vertical-align:-3px }
.thumb-zoom .ico-svg{ color:#fff; vertical-align:0 }

/* tooltip de métrica */
.metric-tip{ position:fixed; z-index:300; display:none; max-width:260px; padding:10px 12px;
  background:var(--surface-2); border:1px solid var(--border-2); border-radius:10px;
  font-size:12.5px; line-height:1.5; color:var(--text); box-shadow:var(--shadow); pointer-events:none }

/* ---------- IA insights ---------- */
.ai-box{
  background:linear-gradient(160deg, rgba(123,63,228,.12), rgba(43,107,246,.06));
  border:1px solid var(--border-2); border-radius:var(--r); padding:22px; margin-bottom:26px;
}
.ai-box h3{ display:flex; align-items:center; gap:9px; font-size:16px; margin-bottom:14px }
.ai-box .content{ font-size:14.5px; line-height:1.7; color:#D6DEF0; white-space:pre-wrap }
.ai-box ul{ padding-left:20px }

/* IA com markdown renderizado */
.ai-box .content.md{ white-space:normal }
.ai-box .content.md > *:first-child{ margin-top:0 }
.ai-box .content.md h1{ font-size:18px; color:#fff; margin:20px 0 8px; line-height:1.3 }
.ai-box .content.md h2{ font-size:16px; color:#fff; margin:18px 0 8px; line-height:1.3;
  padding-bottom:5px; border-bottom:1px solid var(--border-2) }
.ai-box .content.md h3{ font-size:14.5px; color:#EAF0FF; margin:14px 0 6px }
.ai-box .content.md p{ margin:0 0 10px }
.ai-box .content.md ul, .ai-box .content.md ol{ padding-left:20px; margin:0 0 12px }
.ai-box .content.md li{ margin-bottom:5px }
.ai-box .content.md strong{ color:#fff }
.ai-box .content.md em{ color:#C9D3E8 }
.ai-box .content.md code{ background:rgba(43,107,246,.16); padding:1px 6px; border-radius:5px; font-size:13px }
.ai-box .content.md hr{ border:none; border-top:1px solid var(--border-2); margin:16px 0 }

/* ---------- Modal ---------- */
.overlay{
  position:fixed; inset:0; z-index:100; background:rgba(5,8,16,.72);
  backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px;
}
.modal{
  width:100%; max-width:560px; max-height:90vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:18px; padding:26px; box-shadow:var(--shadow);
}
.modal h3{ font-size:19px; margin-bottom:18px }
.modal .modal-foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px }

.dropzone{
  border:2px dashed var(--border-2); border-radius:var(--r); padding:30px; text-align:center;
  color:var(--text-dim); cursor:pointer; transition:.15s; margin-bottom:16px;
}
.dropzone:hover, .dropzone.drag{ border-color:var(--brand-blue); background:rgba(43,107,246,.06) }

/* destaque do link p/ vídeos grandes */
.link-callout{ margin:0 0 16px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(43,107,246,.09); border:1px dashed var(--border-2) }
.link-callout-title{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:4px }
.link-callout-title .ico-svg{ color:var(--brand-blue) }
.link-callout-sub{ font-size:12.5px; color:var(--text-dim); margin-bottom:10px; line-height:1.5 }
.link-callout strong{ color:var(--text) }

/* ---------- States ---------- */
.empty{ text-align:center; padding:70px 20px; color:var(--text-mut) }
.empty .big{ font-size:40px; margin-bottom:12px }
.spinner{
  width:34px; height:34px; border:3px solid var(--border-2); border-top-color:var(--brand-blue);
  border-radius:50%; animation:spin .8s linear infinite; margin:50px auto;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.skeleton{ background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface)); background-size:200% 100%; animation:sk 1.3s infinite; border-radius:8px }
@keyframes sk{ to{ background-position:-200% 0 } }

/* ---------- Toast ---------- */
.toast-wrap{ position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px }
.toast{
  background:var(--surface-2); border:1px solid var(--border-2); border-left:3px solid var(--brand-blue);
  padding:13px 16px; border-radius:var(--r-sm); font-size:14px; box-shadow:var(--shadow);
  animation:slidein .25s ease; max-width:330px;
}
.toast.ok{ border-left-color:var(--ok) } .toast.err{ border-left-color:var(--err) }
@keyframes slidein{ from{ transform:translateX(20px); opacity:0 } }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:760px){
  .topbar{ height:56px; padding:0 14px }
  .topbar .logo{ height:32px }
  .topbar .user{ gap:8px }
  #userEmail{ display:none }                 /* esconde o e-mail no mobile */
  .container{ padding:16px 14px max(56px, env(safe-area-inset-bottom)) }

  .page-head{ gap:10px; margin-bottom:18px }
  .page-head h2{ font-size:20px }

  .cards-grid{ grid-template-columns:1fr }
  .pastas-grid{ grid-template-columns:1fr }
  .creatives-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px }

  .kpi-grid{ grid-template-columns:repeat(2,1fr); gap:12px }
  .kpi{ padding:14px }
  .kpi .value{ font-size:22px }

  .tabs{ gap:0 }
  .tab{ padding:11px 12px; font-size:13px }
  .toolbar{ gap:8px }
  .toolbar .input{ font-size:13px }

  .modal{ padding:20px; border-radius:16px }
  .ai-box{ padding:16px }
  .rank-hint{ width:100% }
}

@media (max-width:420px){
  .kpi-grid{ grid-template-columns:1fr }
  .page-head h2{ font-size:18px }
  .login-card{ padding:30px 22px }
}