:root{
    --bg:#0a0c0b;
    --bg-elevated:#0e1211;
    --surface:#141817;
    --surface-2:#1a201e;
    --border:rgba(255,255,255,0.08);
    --border-strong:rgba(255,255,255,0.16);
    --text:#f2f4f2;
    --text-muted:#8f978f;
    --text-faint:#5a615c;
    --accent:#2c6d61;
    --accent-bright:#4bb59a;
    --accent-dim:rgba(44,109,97,0.18);
    --gold:#c9a227;
    --gold-dim:rgba(201,162,39,0.14);
    --stage-print:#3987e5;
    --wait:#6b7a86;
    --wait-dim:rgba(107,122,134,0.16);
    --danger:#c97a6d;
    --violet:#a978e0;
    --violet-dim:rgba(169,120,224,0.20);
    --orange:#e08a2e;
    --orange-dim:rgba(224,138,46,0.22);
    --pink:#e35c94;
    --pink-dim:rgba(227,92,148,0.22);
    --cyan:#29c7c9;
    --cyan-dim:rgba(41,199,201,0.20);
    --lime:#b7d43f;
    --lime-dim:rgba(183,212,63,0.20);
    --stage-print-dim:rgba(57,135,229,0.20);

    /* Cores das categorias/etiquetas do calendário de redes sociais —
       usadas no preenchimento e na borda dos chips, na etiqueta do card e
       na legenda. Cada categoria tem uma cor "cheia" (texto/borda/legenda)
       e uma versão "dim" (preenchimento de fundo do chip). */
    --cat-promocional:var(--orange);
    --cat-promocional-dim:var(--orange-dim);
    --cat-institucional:var(--stage-print);
    --cat-institucional-dim:var(--stage-print-dim);
    --cat-campanha:var(--violet);
    --cat-campanha-dim:var(--violet-dim);
    --cat-depoimento:var(--gold);
    --cat-depoimento-dim:var(--gold-dim);
    --cat-data-comemorativa:var(--pink);
    --cat-data-comemorativa-dim:var(--pink-dim);
    --cat-educativo:var(--cyan);
    --cat-educativo-dim:var(--cyan-dim);
    --cat-gravacao-evento:var(--lime);
    --cat-gravacao-evento-dim:var(--lime-dim);
    --cat-outro:var(--wait);
    --cat-outro-dim:var(--wait-dim);

    --font-display:'Oswald','Arial Narrow',sans-serif;
    --font-body:'IBM Plex Sans',Arial,sans-serif;
    --font-mono:'IBM Plex Mono','Courier New',monospace;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  button, input{font-family:inherit;}
  :focus-visible{outline:2px solid var(--accent-bright); outline-offset:2px;}

  .page{
    max-width:1180px;
    margin:0 auto;
    padding:40px 32px 120px;
  }
  [hidden]{display:none !important;}

  /* ---------- Utility row ---------- */
  .util-row{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:18px;}
  .role-badge{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-faint); margin-right:auto; white-space:nowrap;
  }
  .role-badge b{color:var(--accent-bright);}
  .util-btn{
    background:var(--surface); border:1px solid var(--border); color:var(--text-muted);
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em;
    padding:7px 14px; border-radius:20px; cursor:pointer; transition:color .15s, border-color .15s;
  }
  .util-btn:hover{color:var(--text); border-color:var(--border-strong);}
  /* Botão "☰" que só aparece no celular (ver media query lá embaixo) —
     no computador os botões continuam todos visíveis lado a lado, igual
     sempre foi. ".util-actions{display:contents}" faz essa div "sumir"
     pro layout no computador, como se os botões estivessem soltos direto
     dentro de ".util-row" (mesmo comportamento de antes de existir essa
     div) — só no celular ela vira um painel de verdade que abre/fecha. */
  .util-menu-toggle{display:none;}
  .util-actions{display:contents;}

  /* ---------- Hero ---------- */
  /* ---------- Aviso "cadastre seu e-mail" ---------- */
  .email-nudge{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding:14px 18px; margin-bottom:24px; background:var(--gold-dim);
    border:1px solid rgba(201,162,39,.3); border-radius:4px;
    color:var(--text); font-size:13px;
  }
  .email-nudge-actions{display:flex; gap:8px; flex:none;}

  .hero{
    position:relative; display:flex; align-items:center; gap:28px;
    padding:44px 40px; margin-bottom:40px;
    border:1px solid var(--border); border-radius:4px;
    background:linear-gradient(180deg, var(--bg-elevated), var(--bg));
    overflow:hidden;
  }
  .hero-glow{
    position:absolute; inset:-40% -10% auto -10%; height:260px;
    background:radial-gradient(closest-side, rgba(44,109,97,0.35), rgba(44,109,97,0) 70%);
    pointer-events:none;
  }
  .logo{position:relative; width:80px; height:80px; flex:none; border-radius:3px;}
  .hero-text{position:relative; flex:1; min-width:0;}
  .eyebrow{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent-bright); margin:0 0 10px;
  }
  .hero h1{
    font-family:var(--font-display); font-weight:600; font-size:clamp(24px, 3.2vw, 34px);
    letter-spacing:.01em; text-transform:uppercase; margin:0 0 10px; text-wrap:balance;
  }
  .hero-sub{margin:0; color:var(--text-muted); font-size:14px; max-width:56ch;}

  /* ---------- Company tabs ---------- */
  .company-tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:32px;}
  .tab{
    font-family:var(--font-display); font-size:14px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-muted); background:none; border:none; border-bottom:2px solid transparent;
    padding:12px 18px 14px; cursor:pointer; display:flex; align-items:center; gap:9px;
    transition:color .15s ease, border-color .15s ease;
  }
  .tab:hover{color:var(--text);}
  .tab.active{color:var(--text); border-bottom-color:var(--accent-bright);}
  .tab-count{
    font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
    background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:1px 8px;
  }
  .tab.active .tab-count{color:var(--accent-bright); border-color:var(--accent-dim); background:var(--accent-dim);}

  /* ---------- Overview strip ---------- */
  .overview{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:4px;
    overflow:hidden; margin-bottom:36px;
  }
  .stat-tile{background:var(--surface); padding:20px 22px;}
  .stat-label{
    display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--text-faint); margin-bottom:10px;
  }
  .stat-value{
    display:block; font-family:var(--font-mono); font-weight:500; font-size:28px;
    font-variant-numeric:tabular-nums; color:var(--accent-bright);
  }
  .stat-tile[data-stage="capturadas"] .stat-value{color:var(--text);}

  /* ---------- Region grid ---------- */
  .regions-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px;}

  .region-card{
    background:var(--surface); border:1px solid var(--border); border-radius:4px;
    padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px;
  }
  .region-card-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    border-bottom:1px solid var(--border); padding-bottom:12px;
  }
  .region-card-head h3{
    font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:.02em;
    text-transform:uppercase; margin:0; color:var(--text);
  }
  .region-note{font-size:11.5px; color:var(--text-faint); font-style:italic; margin-top:3px;}
  .status-chip{
    flex:none; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
    padding:4px 9px; border-radius:20px; white-space:nowrap; border:1px solid transparent;
  }
  .status-good{color:var(--accent-bright); background:var(--accent-dim); border-color:rgba(75,181,154,.3);}
  .status-active{color:var(--gold); background:var(--gold-dim); border-color:rgba(201,162,39,.3);}
  .status-wait{color:var(--wait); background:var(--wait-dim); border-color:rgba(107,122,134,.3);}
  .status-none{color:var(--text-faint); background:rgba(255,255,255,0.04); border-color:var(--border);}
  .status-adjust{color:var(--danger); background:rgba(201,122,109,.16); border-color:rgba(201,122,109,.35);}
  /* Versão maior do status-chip, usada no status de pagamento do Financeiro
     — pra ficar bem visível se está pago ou não, sem precisar ler o texto
     ao redor. */
  .status-chip-lg{font-size:13px; padding:6px 14px; font-weight:600; letter-spacing:.06em;}

  .region-anchor{display:flex; align-items:baseline; gap:9px;}
  .anchor-value{font-family:var(--font-mono); font-weight:500; font-size:24px; font-variant-numeric:tabular-nums; color:var(--text);}
  .anchor-label{font-size:12px; color:var(--text-faint);}

  .stage{display:flex; flex-direction:column; gap:6px;}
  .stage-row{display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px;}
  .stage-row .stage-name{color:var(--text-muted);}
  .stage-row .stage-frac{font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
  .bar-track{height:6px; border-radius:3px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden;}
  .bar-fill{height:100%; border-radius:3px; background:var(--accent-bright); width:0%; transition:width .5s ease;}
  .bar-fill.gold{background:var(--gold);}

  /* ---------- Select — estilo padrão de todo <select> do painel daqui pra
     frente (em vez do combo cru do navegador) ---------- */
  .page select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-color:var(--surface-2);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238f978f'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:10px 6px;
    border:1px solid var(--border); color:var(--text);
    padding:8px 30px 8px 11px; border-radius:6px; font-size:13px; width:100%;
    cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .page select:hover{border-color:var(--border-strong);}
  .page select:focus{outline:none; border-color:var(--accent-bright); box-shadow:0 0 0 3px var(--accent-dim);}
  .page select option{background:var(--surface-2); color:var(--text);}

  /* ---------- Admin edit fields ---------- */
  .field-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
  .field-row{display:flex; flex-direction:column; gap:4px; min-width:0;}
  .field-row label{font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em;}
  .field-row input[type="number"], .field-row input[type="text"], .field-row input[type="date"], .field-row input[type="email"], .field-row input[type="password"], .name-input{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    padding:7px 9px; border-radius:3px; font-family:var(--font-mono); font-size:13px; width:100%;
  }
  .field-row input[type="date"]{color-scheme:dark; min-width:0;}

  /* As 3 datas da remessa (recebimento/edição/impressão) precisam de mais
     espaço que capturadas/editadas/impressas — num card estreito (a lista de
     regiões usa colunas de no mínimo 290px), 3 datas lado a lado não cabem.
     Em vez de estourar a largura do card, essas quebram para a linha de
     baixo automaticamente quando faltar espaço. 150px (e não só 118px) é o
     mínimo pra caber "mm/dd/yyyy" + o ícone do calendário sem sobrepor no
     celular — com menos que isso os dois primeiros campos ainda tentavam
     ficar lado a lado, meio espremidos. Seletor combinado (".field-grid
     .field-grid-dates" viraria .field-grid.field-grid-dates) pra sempre
     ganhar da regra ".field-grid{grid-template-columns:1fr 1fr}" do celular
     logo abaixo — mesma "força" (uma classe só) perderia por ordem no
     arquivo. */
  .field-grid.field-grid-dates{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));}
  .name-input{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-size:15px;}
  .concluido-row{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted); user-select:none;}
  .concluido-row input{accent-color:var(--accent-bright);}
  .card-actions{display:flex; justify-content:flex-end;}
  .remove-btn{background:none; border:none; color:var(--text-faint); font-size:11px; cursor:pointer; text-decoration:underline; padding:0;}
  .remove-btn:hover{color:var(--danger);}

  .add-card{
    border:1px dashed var(--border-strong); border-radius:4px; display:flex; align-items:center; justify-content:center;
    color:var(--text-faint); cursor:pointer; min-height:150px; font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:.05em; font-size:13px; background:none; transition:color .15s, border-color .15s;
  }
  .add-card:hover{color:var(--accent-bright); border-color:var(--accent-dim);}

  /* ---------- Empty state ---------- */
  .empty-state{
    grid-column:1/-1; border:1px dashed var(--border-strong); border-radius:4px;
    padding:48px 32px; text-align:center; color:var(--text-muted);
  }
  .empty-state .empty-title{
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
    color:var(--text); font-size:16px; margin-bottom:10px;
  }
  .empty-state .empty-hint{max-width:46ch; font-size:13.5px; color:var(--text-faint); margin:8px auto 0;}

  /* ---------- Gate ---------- */
  .gate{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; z-index:80;}
  .gate-inner{max-width:520px; width:100%; text-align:center;}
  .gate-logo{width:72px; height:72px; border-radius:3px; margin-bottom:20px;}
  .gate-inner h1{
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
    font-size:22px; margin:0 0 8px;
  }
  .gate-sub{color:var(--text-muted); font-size:13.5px; margin:0 0 32px;}
  .gate-options{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
  .gate-box{
    background:var(--surface); border:1px solid var(--border); border-radius:4px;
    padding:24px 22px; width:220px; display:flex; flex-direction:column; gap:10px; text-align:left;
  }
  .gate-box h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:14px; margin:0; color:var(--text);}
  .gate-box p{font-size:11.5px; color:var(--text-faint); margin:0 0 4px;}
  .gate-box input{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    padding:9px 10px; border-radius:3px; font-family:var(--font-mono); font-size:13px; width:100%; box-sizing:border-box;
  }
  .gate-box button{
    background:var(--accent); color:#fff; border:none; padding:9px; border-radius:3px; width:100%;
    font-family:var(--font-display); letter-spacing:.05em; text-transform:uppercase; font-size:12px; cursor:pointer;
  }
  .gate-box button:hover{background:var(--accent-bright);}
  .gate-error{color:var(--danger); font-size:11.5px; min-height:14px;}

  /* ---------- Modal ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center;
    padding:24px; z-index:70;
  }
  .modal{
    background:var(--surface); border:1px solid var(--border-strong); border-radius:4px;
    max-width:560px; width:100%; max-height:80vh; overflow-y:auto; padding:30px 30px 26px;
  }
  .modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px;}
  .modal h2{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:19px; margin:0;}
  .modal-close{background:none; border:none; color:var(--text-faint); font-size:20px; cursor:pointer; line-height:1;}
  .modal-close:hover{color:var(--text);}
  .modal ol{padding-left:20px; margin:0; display:flex; flex-direction:column; gap:14px;}
  .modal li{font-size:14px; line-height:1.55; color:var(--text-muted);}
  .modal li b{color:var(--text); font-weight:600;}
  .modal .modal-note{
    margin-top:20px; padding:12px 14px; border-left:2px solid var(--accent); background:var(--accent-dim);
    font-size:12.5px; color:var(--text-muted); border-radius:0 3px 3px 0;
  }

  /* ---------- Save bar ---------- */
  .save-bar{
    position:fixed; left:0; right:0; bottom:0; background:var(--bg-elevated); border-top:1px solid var(--border-strong);
    padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px;
    transform:translateY(100%); transition:transform .25s ease; z-index:40;
  }
  .save-bar.show{transform:translateY(0);}
  .save-bar .msg{font-size:13px; color:var(--text-muted); font-family:var(--font-mono);}
  .save-bar .actions{display:flex; gap:10px;}
  .btn-ghost{
    background:none; border:1px solid var(--border-strong); color:var(--text-muted);
    padding:9px 18px; border-radius:3px; cursor:pointer; font-size:13px;
  }
  .btn-ghost:hover{color:var(--text);}
  .btn-primary{
    background:var(--accent); border:none; color:#fff; padding:9px 20px; border-radius:3px;
    cursor:pointer; font-weight:500; font-size:13px;
  }
  .btn-primary:hover{background:var(--accent-bright);}
  button:disabled{opacity:.5; cursor:not-allowed;}

  /* ---------- Toast ---------- */
  .toast{
    position:fixed; bottom:86px; left:50%; transform:translateX(-50%); background:var(--surface-2);
    border:1px solid var(--border-strong); color:var(--text); padding:10px 18px; border-radius:4px;
    font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:90;
  }
  .toast.show{opacity:1;}

  @media (max-width:640px){
    .page{padding:28px 18px 130px;}
    .hero{flex-wrap:wrap; padding:26px 22px;}
    .overview{grid-template-columns:repeat(2,1fr);}
    .field-grid{grid-template-columns:1fr 1fr;}
    .save-bar{flex-direction:column; align-items:stretch;}
    /* Em telas de celular o nome+cargo ("Fulano · Administrador") não cabe
       na mesma linha dos botões (Sair, Minha conta etc.) — em vez de ficar
       espremido/cortado do lado esquerdo, ele ocupa a linha toda sozinho e
       os botões vêm por baixo. */
    .role-badge{flex-basis:100%; margin-right:0; white-space:normal;}
    /* O painel de notificações (o balão que abre ao clicar no sino) é
       desenhado pra abrir "puxando pra esquerda" a partir do sino
       (right:0 no CSS de baixo), o que funciona bem quando o sino fica
       lá no canto direito (como no computador). Só que, no celular, com
       o nome/cargo acima ocupando a linha toda (regra logo acima), o
       sino passa a ser o primeiro botão da fileira — ou seja, fica lá no
       canto ESQUERDO da tela. Um balão de ~340px "puxando pra esquerda"
       a partir do canto esquerdo da tela estoura pra fora da tela (foi o
       que cortava o texto "...s como lidas" reportado). Solução: no
       celular, o balão abre "puxando pra direita" a partir do sino em
       vez de pra esquerda, e a largura respeita o que sobra de tela. */
    .notif-bell-panel{left:0; right:auto; width:min(340px, calc(100vw - 40px));}
    /* Menu "☰" — no celular, os botões (Início, Atividade, Empresas,
       Demandas, Relatórios, Tutorial, Sair etc.) somem por trás desse
       botão em vez de ficarem todos abertos disputando espaço com o
       resto da tela (era a "bagunça" no topo que atrapalhava a visão).
       No computador nada disso entra em ação — os botões continuam
       todos visíveis, como sempre foram. */
    .util-menu-toggle{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;}
    .util-actions{
      display:none; flex-direction:column; gap:8px; width:100%; margin-top:2px;
      padding:12px; background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
    }
    .util-actions.open{display:flex;}
    .util-actions .util-btn{width:100%; text-align:center; justify-content:center;}
  }

  @media (prefers-reduced-motion:reduce){
    .bar-fill, .save-bar, .toast{transition:none;}
  }

  /* ---------- Login (single form) ---------- */
  .gate-box-single{width:280px; margin:0 auto; text-align:left; gap:14px;}
  .gate-box-single label{
    font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint);
    text-transform:uppercase; letter-spacing:.05em;
  }

  /* ---------- "Esqueci minha senha" / redefinir senha ---------- */
  .gate-link-row{text-align:center; margin-top:2px;}
  .gate-link{
    background:none; border:none; padding:0; color:var(--text-faint); font-size:12px;
    text-decoration:underline; cursor:pointer; font-family:inherit;
  }
  .gate-link:hover{color:var(--text-muted);}
  .gate-msg{color:var(--accent-bright); font-size:12.5px; line-height:1.5; min-height:14px;}
  .gate-msg.is-error{color:var(--danger);}

  /* ---------- Modal: wide variant + form helpers ---------- */
  .modal-wide{max-width:720px;}
  .modal-subheading{
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
    font-size:14px; color:var(--text); margin:22px 0 12px; padding-top:16px; border-top:1px solid var(--border);
  }
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px;}
  .form-grid-4{grid-template-columns:1fr 1fr 1fr 0.8fr;}
  .form-grid .field-row label, .form-grid select{font-family:var(--font-mono);}
  .modal-actions{display:flex; justify-content:flex-end; margin-top:14px;}
  .form-msg{font-size:12.5px; margin-top:10px; min-height:16px;}
  .acc-notify-row{
    display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted);
    margin-top:12px; user-select:none;
  }
  .acc-notify-row input{accent-color:var(--accent-bright);}

  /* ---------- Users list ---------- */
  .user-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
    padding:12px 4px; border-bottom:1px solid var(--border);
  }
  .user-row:first-child{padding-top:0;}
  .user-row-main{display:flex; align-items:center; gap:8px; font-size:13.5px; flex:1; min-width:180px;}
  .user-row-main strong{color:var(--text);}
  .user-row-username{font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint);}
  .user-row-meta{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); flex:none;}
  .user-row-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .user-row-actions select{
    width:auto; padding:5px 24px 5px 8px; background-position:right 8px center;
    border-radius:14px; font-size:12px; font-family:var(--font-mono);
  }
  .user-row-actions button{
    background:none; border:1px solid var(--border-strong); color:var(--text-muted);
    padding:5px 10px; border-radius:20px; font-size:11.5px; cursor:pointer;
  }
  .user-row-actions button:hover{color:var(--text);}
  .user-row-actions button.danger{border-color:rgba(201,122,109,.4); color:var(--danger);}
  .user-row-actions button.danger:hover{background:rgba(201,122,109,.12);}

  /* ---------- Activity list ---------- */
  .activity-row{padding:12px 4px; border-bottom:1px solid var(--border); font-size:13px;}
  .activity-row:first-child{padding-top:0;}
  .activity-row-head{color:var(--text-muted);}
  .activity-row-head strong{color:var(--text);}
  .activity-role{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
  .activity-details{
    font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint);
    margin-top:4px; word-break:break-word;
  }
  .activity-time{font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); margin-top:4px;}

  .activity-tabs{
    display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:12px;
    /* Com 4 abas (Implementação/Calendário/Relatórios/Financeiro em Redes
       Sociais, por exemplo) e sem lugar pra quebrar linha, a fileira toda
       "empurrava" a largura da página inteira no celular, forçando um
       zoom-out geral (foi parte da "bagunça" relatada em Redes Sociais no
       mobile). Em vez de quebrar linha (ficaria estranho, um título de
       aba na próxima linha sozinho), essa fileira agora rola de lado —
       um gesto comum no celular — sem nunca empurrar o resto da página. */
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .activity-tabs::-webkit-scrollbar{display:none;}
  .activity-tab{
    font-family:var(--font-display); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-faint); background:none; border:none; border-bottom:2px solid transparent;
    padding:9px 4px 10px; margin-right:18px; cursor:pointer; transition:color .15s ease, border-color .15s ease;
    white-space:nowrap; flex:none;
  }
  .activity-tab:hover{color:var(--text-muted);}
  .activity-tab.active{color:var(--text); border-bottom-color:var(--accent-bright);}

  /* ---------- Movimentação por editor ---------- */
  .editor-row{padding:14px 4px; border-bottom:1px solid var(--border); font-size:13px;}
  .editor-row:first-child{padding-top:0;}
  .editor-row-head{color:var(--text-muted); margin-bottom:6px;}
  .editor-row-head strong{color:var(--text); font-size:14px;}
  .editor-stats{display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:4px;}
  .editor-saves{
    font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted);
    background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:2px 10px;
  }
  .editor-delta{font-family:var(--font-mono); font-size:11.5px; color:var(--accent-bright);}

  @media (max-width:640px){
    .form-grid, .form-grid-4{grid-template-columns:1fr;}
    /* Vários campos dos formulários (Link do Drive, Observação, Legenda etc.)
       usam "style=grid-column:span 2" ou "1 / -1" direto no HTML pra ocupar
       2+ colunas no desktop. Só 1 coluna existe no celular (regra acima),
       mas esse span nunca "solta" sozinho — o navegador cria uma coluna
       extra só pra caber esse campo largo, e os campos normais (Editor,
       Cliente etc., 1 coluna cada) acabam se espalhando por essa coluna
       extra também, voltando a ficar 2 lado a lado e espremidos (foi o que
       cortava "Selecione..." pra "Selec" no formulário de nova demanda). O
       "!important" é necessário aqui porque style="" no HTML sempre vence
       uma regra normal do arquivo CSS. */
    .form-grid .field-row{grid-column:1 / -1 !important;}
    .user-row{flex-direction:column; align-items:flex-start;}
  }

  /* ---------- Escopo de empresas por usuário ---------- */
  .user-row{flex-direction:column; align-items:stretch;}
  .user-row-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;}
  .user-row-companies{
    display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
    margin-top:2px; padding-top:10px; border-top:1px dashed var(--border);
  }
  .urc-label{
    font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
    text-transform:uppercase; letter-spacing:.05em; flex:none;
  }
  .urc-check{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); cursor:pointer;}
  .urc-check input{accent-color:var(--accent-bright);}
  .urc-save{
    background:none; border:1px solid var(--border-strong); color:var(--text-muted);
    padding:4px 12px; border-radius:20px; font-size:11px; cursor:pointer; margin-left:auto;
  }
  .urc-save:hover{color:var(--text);}
  /* ---------- Cidades por região ---------- */
  .details-toggle{
    background:none; border:1px solid var(--border-strong); color:var(--text-muted);
    padding:6px 12px; border-radius:20px; font-size:11.5px; cursor:pointer; align-self:flex-start;
    font-family:var(--font-mono); letter-spacing:.02em;
  }
  .details-toggle:hover{color:var(--text); border-color:var(--accent-dim);}
  .city-details{
    display:flex; flex-direction:column; gap:14px; margin-top:2px;
    padding-top:14px; border-top:1px dashed var(--border);
  }
  .city-detail-row{display:flex; flex-direction:column; gap:6px;}
  .city-detail-name{
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em;
    font-size:12.5px; color:var(--text-muted);
  }
  .city-detail-anchor{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}

  .cities-editor{
    display:flex; flex-direction:column; gap:12px; padding:14px; margin-top:-2px;
    background:var(--bg-elevated); border:1px solid var(--border); border-radius:4px;
  }
  .cities-editor-label{
    font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
    text-transform:uppercase; letter-spacing:.06em;
  }
  .city-row{
    display:flex; flex-direction:column; gap:8px; padding-bottom:12px;
    border-bottom:1px dashed var(--border);
  }
  .city-row:last-of-type{border-bottom:none; padding-bottom:0;}
  .city-name-input{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    padding:7px 9px; border-radius:3px; font-family:var(--font-display); text-transform:uppercase;
    letter-spacing:.02em; font-size:13.5px; width:100%;
  }
  .remove-city-btn{
    background:none; border:none; color:var(--text-faint); font-size:10.5px; cursor:pointer;
    text-decoration:underline; padding:0; align-self:flex-end;
  }
  .remove-city-btn:hover{color:var(--danger);}
  .add-city-btn{
    border:1px dashed var(--border-strong); border-radius:3px; background:none;
    color:var(--text-faint); cursor:pointer; padding:9px; font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; transition:color .15s, border-color .15s;
  }
  .add-city-btn:hover{color:var(--accent-bright); border-color:var(--accent-dim);}

  .companies-field{grid-column:1/-1; padding-top:2px;}
  .companies-field label{margin-bottom:6px !important; display:block;}
  .companies-checks{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;}
  .companies-checks label{
    display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-muted);
    text-transform:none; font-family:var(--font-body); letter-spacing:normal; cursor:pointer;
  }
  .companies-checks input{accent-color:var(--accent-bright); width:auto;}

  /* ---------- Barra de ferramentas (exportar / imprimir) ---------- */
  .toolbar-row{display:flex; gap:10px; justify-content:flex-end; margin-bottom:20px;}

  /* ---------- Freshness (última remessa) ---------- */
  .region-freshness{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-top:4px;}
  .region-freshness.muted{font-style:italic;}

  /* ---------- Remessas (dentro de uma cidade) ---------- */
  .city-row-head{display:flex; align-items:center; gap:10px;}
  .city-row-head .city-name-input{flex:1;}
  .city-row-head .remove-city-btn{flex:none; align-self:auto;}
  .city-aggregate{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}

  .remessas-editor{
    display:flex; flex-direction:column; gap:10px; margin-top:4px;
    padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:3px;
  }
  .remessa-row{display:flex; flex-direction:column; gap:6px; padding-bottom:10px; border-bottom:1px dashed var(--border);}
  .remessa-row:last-of-type{border-bottom:none; padding-bottom:0;}
  .remessa-row-head{display:flex; align-items:center; gap:10px;}
  .remove-remessa-btn{
    background:none; border:none; color:var(--text-faint); font-size:10.5px; cursor:pointer;
    text-decoration:underline; padding:0; margin-left:auto;
  }
  .remove-remessa-btn:hover{color:var(--danger);}
  .remessa-note-input{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    padding:6px 8px; border-radius:3px; font-family:var(--font-body); font-size:12px; width:100%;
  }
  .add-remessa-btn{
    border:1px dashed var(--border-strong); border-radius:3px; background:none;
    color:var(--text-faint); cursor:pointer; padding:7px; font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:.05em; font-size:10.5px; transition:color .15s, border-color .15s;
  }
  .add-remessa-btn:hover{color:var(--accent-bright); border-color:var(--accent-dim);}
  .field-row-lab{gap:4px;}
  .lab-input-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .lab-input-row input[type="text"]{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    padding:6px 8px; border-radius:3px; font-family:var(--font-body); font-size:12px; flex:1; min-width:140px;
  }
  .lab-transfernow-btn{
    border:1px solid var(--accent-dim); border-radius:3px; background:none;
    color:var(--accent-bright); cursor:pointer; padding:6px 10px; font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:.05em; font-size:10px; white-space:nowrap; transition:background-color .15s;
  }
  .lab-transfernow-btn:hover{background-color:var(--accent-dim);}

  /* ---------- Lista de remessas (modo leitura, dentro de "Ver detalhes") ---------- */
  .remessa-list{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
  .remessa-detail-row{
    display:flex; flex-direction:column; gap:8px; padding:12px;
    background:var(--bg-elevated); border:1px solid var(--border); border-radius:3px;
  }
  .remessa-detail-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
  .remessa-detail-date{font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted);}
  .remessa-detail-note{font-size:11px; color:var(--text-faint); font-style:italic;}

  /* ---------- Aba "Visão geral" ---------- */
  .tab-geral{border-right:1px solid var(--border); margin-right:6px; padding-right:18px; color:var(--accent-bright);}

  /* ---------- Gráficos (ranking + linha do tempo) ---------- */
  .charts-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:36px;}
  .chart-card{
    background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:20px 22px;
    display:flex; flex-direction:column;
  }
  .chart-title{
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
    font-size:12.5px; color:var(--text-muted); margin:0 0 16px;
  }
  /* Os dois cards da linha sempre ficam com a mesma altura (a do maior) —
     quando um gráfico tem bem menos conteúdo que o outro (ex: poucas datas
     ainda cadastradas), centralizar verticalmente evita que ele fique
     "flutuando" encostado no topo com um vão vazio embaixo. */
  .rank-chart, .tl-body, .chart-empty{flex:1; display:flex; flex-direction:column; justify-content:center;}
  .chart-empty{color:var(--text-faint); font-size:12.5px; padding:24px 4px; text-align:center; line-height:1.5; align-items:center;}
  .tl-coverage-inline{display:block; margin-top:8px; font-size:11.5px;}

  .rank-chart{gap:11px;}
  .rank-row{display:grid; grid-template-columns:104px 1fr 56px; align-items:center; gap:10px;}
  .rank-label{
    font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap;
  }
  .rank-track{height:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:5px; overflow:hidden;}
  .rank-fill{height:100%; min-width:4px; background:var(--accent-bright); border-radius:0 5px 5px 0;}
  .rank-value{
    font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-align:right;
    font-variant-numeric:tabular-nums;
  }

  .tl-legend{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px;}
  .tl-legend-item{
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted);
    font-family:var(--font-body);
  }
  .tl-swatch{width:9px; height:9px; border-radius:2px; flex:none;}
  .tl-swatch.s-recebidas{background:var(--accent-bright);}
  .tl-swatch.s-editadas{background:var(--gold);}
  .tl-swatch.s-impressas{background:var(--stage-print);}

  .tl-chart{display:flex; align-items:flex-end; gap:8px; overflow-x:auto; padding-bottom:2px; border-bottom:1px solid var(--border);}
  .tl-col{display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; width:36px;}
  .tl-group{display:flex; align-items:flex-end; gap:2px;}
  .tl-bar-track{
    height:150px; width:9px; display:flex; align-items:flex-end; justify-content:center;
    background:var(--surface-2); border:1px solid var(--border); border-radius:3px 3px 0 0; overflow:hidden;
  }
  .tl-bar{width:100%; min-height:3px; background:var(--accent-bright); border-radius:3px 3px 0 0; transition:height .4s ease;}
  .tl-bar-track.s-editadas .tl-bar{background:var(--gold);}
  .tl-bar-track.s-impressas .tl-bar{background:var(--stage-print);}
  .tl-label{font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); white-space:nowrap;}
  .tl-coverage{font-size:11px; color:var(--text-faint); margin-top:14px; line-height:1.5;}

  @media (max-width:640px){
    .charts-row{grid-template-columns:1fr;}
    .rank-row{grid-template-columns:74px 1fr 46px;}
    .toolbar-row{justify-content:stretch;}
    .toolbar-row .util-btn{flex:1; text-align:center;}
  }

  /* ---------- Busca (região/cidade/empresa, demandas, empresas cadastradas...) ---------- */
  .search-row{margin-bottom:20px;}
  .search-input, #region-search{
    width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
    padding:11px 14px; border-radius:4px; font-size:13.5px; box-sizing:border-box;
  }
  .search-input::placeholder, #region-search::placeholder{color:var(--text-faint);}
  .search-input:focus, #region-search:focus{border-color:var(--accent-dim); outline:none;}

  /* ---------- Última alteração (quem editou por último) ---------- */
  .region-last-edit{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-top:2px;}

  /* ---------- Textarea (formulário de demanda / observações) ---------- */
  .field-row textarea{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    padding:8px 9px; border-radius:3px; font-family:var(--font-body); font-size:13px;
    width:100%; resize:vertical; min-height:56px;
  }

  /* ---------- Empresas (tela do Administrador) ---------- */
  .company-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
    padding:12px 4px; border-bottom:1px solid var(--border); font-size:13.5px;
  }
  .company-row:first-child{padding-top:0;}
  .company-row-main{display:flex; align-items:center; gap:10px; flex:1; min-width:200px;}
  .company-row-main strong{color:var(--text);}
  .company-row-meta{font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
  .company-row-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .company-row-actions a, .company-row-actions button{
    background:none; border:1px solid var(--border-strong); color:var(--text-muted);
    padding:5px 10px; border-radius:20px; font-size:11.5px; cursor:pointer; text-decoration:none;
  }
  .company-row-actions a:hover, .company-row-actions button:hover{color:var(--text);}
  .company-row-actions button.danger{border-color:rgba(201,122,109,.4); color:var(--danger);}
  .company-row-actions button.danger:hover{background:rgba(201,122,109,.12);}
  .company-row-billing{
    flex-basis:100%; width:100%; margin-top:10px; padding:12px; border-radius:8px;
    background:var(--surface-2); border:1px solid var(--border);
  }
  .status-pending-delete{color:var(--danger); background:rgba(201,122,109,.12); border-color:rgba(201,122,109,.35);}

  /* ---------- Demandas ---------- */
  .demand-row{padding:12px 4px; border-bottom:1px solid var(--border); font-size:13px;}
  .demand-row:first-child{padding-top:0;}
  .demand-row-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:4px;}
  .demand-row-head strong{color:var(--text); font-size:14px;}
  .demand-row-details{color:var(--text-muted); margin-bottom:6px; line-height:1.5;}
  .demand-row-actions{display:flex; align-items:center; gap:8px;}
  .demand-row-actions button{
    background:none; border:1px solid var(--border-strong); color:var(--text-muted);
    padding:5px 10px; border-radius:20px; font-size:11.5px; cursor:pointer;
  }
  .demand-row-actions button:hover{color:var(--accent-bright); border-color:var(--accent-dim);}
  .demand-row-actions button.danger{border-color:rgba(201,122,109,.4); color:var(--danger);}
  .demand-row-actions button.danger:hover{color:var(--danger); border-color:var(--danger);}
  .demand-row-actions button.primary{border-color:rgba(75,181,154,.4); color:var(--accent-bright);}
  .demand-row-actions button.primary:hover{color:var(--accent-bright); border-color:var(--accent-bright);}
  .status-pendente{color:var(--gold); background:var(--gold-dim); border-color:rgba(201,162,39,.3);}

  /* ---------- Linhas de lista recolhíveis (listas que só crescem) ---------- */
  .row-toggle{
    margin-left:auto; background:none; border:1px solid var(--border-strong); color:var(--text-faint);
    padding:3px 10px; border-radius:20px; font-size:11px; cursor:pointer; white-space:nowrap;
  }
  .row-toggle:hover{color:var(--text-muted); border-color:var(--text-faint);}
  .row-bulk-toggle{text-align:right; margin-bottom:10px;}
  /* Descrição da demanda (o que está sendo enviado ao editor — ex: quais
     escolas) — separada dos outros detalhes de propósito, pra ficar fácil
     de bater o olho e conferir o que foi mandado. */
  .demand-row-desc{
    color:var(--text); background:var(--surface-2); border:1px solid var(--border);
    border-radius:6px; padding:7px 10px; margin:4px 0 8px; line-height:1.5;
  }
  .demand-row-desc b{
    display:block; color:var(--text-faint); font-family:var(--font-mono); font-size:10px;
    text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px;
  }
  /* Pedido de novo prazo (editor pediu, aguardando o Administrador aprovar
     ou recusar) — cor de alerta suave, pra não passar batido nas listas. */
  .demand-row-deadline-req{
    color:var(--text); background:var(--gold-dim); border:1px solid rgba(201,162,39,.3);
    border-radius:6px; padding:8px 10px; margin:6px 0; line-height:1.5; font-size:12.5px;
  }
  .status-concluido{color:var(--accent-bright); background:var(--accent-dim); border-color:rgba(75,181,154,.3);}

  .demand-drive-choice{display:flex; flex-direction:column; gap:8px; margin:10px 0; font-size:13px; color:var(--text-muted);}
  .demand-drive-choice label{display:flex; align-items:center; gap:8px; cursor:pointer;}
  .demand-drive-choice input{accent-color:var(--accent-bright);}
  .demand-drive-note{font-size:12px; color:var(--text-faint); font-style:italic; margin:4px 0 12px;}

  /* ---------------- Relatórios ---------------- */
  #reports-current{grid-template-columns:repeat(3, 1fr); margin-bottom:20px;}
  #reports-period-tabs{margin-bottom:18px;}
  @media (max-width:640px){
    #reports-current{grid-template-columns:1fr;}
  }

  /* ---------------- Redes Sociais ---------------- */
  .sm-toolbar{margin-bottom:20px;}
  .sm-admin-nav{
    display:flex; gap:8px; justify-content:flex-end; margin-bottom:16px;
    padding-bottom:16px; border-bottom:1px solid var(--border);
  }
  #sm-tabs{margin-bottom:24px;}
  .sm-month-row{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-bottom:20px;
  }
  .sm-month-label{
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
    font-size:15px; color:var(--text); min-width:180px; text-align:center;
  }
  /* Setas de trocar de mês — antes eram botões de texto ("Mês anterior" /
     "Próximo mês") do mesmo estilo dos botões do topo, o que destoava do
     resto (pareciam ter "sobrado" ali). Agora são um par de ícones
     redondos e compactos ladeando o nome do mês, igual um seletor de
     mês de verdade. */
  .sm-month-nav{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; padding:0; flex:none;
  }
  .sm-month-nav svg{display:block;}
  @media (max-width:640px){
    .sm-month-row{flex-wrap:wrap;}
  }

  /* ---------------- Calendário editorial (grade) ---------------- */
  .sm-cal-legend-row{display:flex; gap:18px; align-items:flex-start;}
  .sm-cal-legend-row #sm-cal-grid-wrap{flex:1; min-width:0;}
  #sm-cal-legend{
    display:flex; flex-direction:column; gap:7px; min-width:168px; max-width:190px;
    background:var(--surface); border:1px solid var(--border); border-radius:4px;
    padding:12px 14px; margin-bottom:24px;
  }
  .sm-legend-title{
    font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-faint); margin-bottom:2px;
  }
  .sm-legend-item{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted);}
  .sm-legend-dot{
    width:9px; height:9px; min-width:9px; border-radius:50%; display:inline-block;
  }
  @media (max-width:780px){
    .sm-cal-legend-row{flex-direction:column;}
    #sm-cal-legend{max-width:none; flex-direction:row; flex-wrap:wrap; gap:10px 16px;}
  }

  .sm-cal-weekdays{
    display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; margin-bottom:6px;
    font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-faint); text-align:center;
  }
  .sm-cal-weekdays span{padding:4px 0 8px; border-bottom:1px solid var(--border);}
  /* "minmax(0,1fr)" (não só "1fr") em vez de "1fr" — sem isso, cada
     coluna do grid nunca fica menor que o conteúdo mais largo de dentro
     dela (é o comportamento padrão do CSS Grid), e um card de evento com
     um título comprido tipo "Bastidores da cozinha" força as 7 colunas a
     ficarem largas demais pro celular — a PÁGINA INTEIRA acaba
     "afastando o zoom" pra caber a grade, deixando tudo minúsculo (foi a
     "bagunça" relatada no celular, na aba Calendário de Redes Sociais).
     Com minmax(0,1fr), a coluna pode encolher à vontade, e o
     "text-overflow:ellipsis" do card (linha abaixo) finalmente consegue
     cortar o texto em vez de forçar a tela toda a esticar. */
  .sm-cal-grid{
    display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:6px;
    overflow:hidden; margin-bottom:24px;
  }
  /* Antes as células eram bem mais largas que altas (achatadas, tipo uma
     tirinha) — min-height mais generoso deixa cada dia com espaço de
     sobra pra respirar, mais perto de um calendário de verdade. */
  .sm-cal-day{
    background:var(--surface); min-height:118px; padding:8px; display:flex;
    flex-direction:column; gap:5px; min-width:0;
  }
  .sm-cal-day.empty{background:var(--bg);}
  .sm-cal-day-num{
    font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--text-muted);
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%; margin-bottom:1px;
  }
  /* Dia de hoje ganha destaque (bolinha na cor de destaque) — antes não
     tinha jeito nenhum de saber "onde estamos" só olhando a grade. */
  .sm-cal-day.is-today{box-shadow:inset 0 0 0 1px var(--accent-bright);}
  .sm-cal-day.is-today .sm-cal-day-num{background:var(--accent-bright); color:var(--bg); font-weight:700;}
  .sm-cal-chip{
    font-size:10.5px; font-weight:600; padding:4px 7px 4px 8px; border-radius:5px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; border:1px solid transparent;
    border-left:4px solid var(--cat-outro); background:var(--cat-outro-dim); color:var(--cat-outro);
    cursor:pointer; transition:filter .15s ease, border-color .15s ease, transform .15s ease;
  }
  .sm-cal-chip[data-id]:hover{filter:brightness(1.35); border-color:var(--accent-bright); border-left-color:inherit; transform:translateX(1px);}
  .sm-cal-chip-more{background:transparent; border-left-color:transparent; color:var(--text-faint); cursor:default;}
  /* No celular a coluna do dia mede uns 45-50px — não cabe nem o título
     abreviado ("Bastid...") de um jeito legível, só sobra uma abreviação
     ilegível tipo "Pr...". Em vez disso, a grade vira uma bolinha colorida
     por categoria por baixo do número do dia — igual todo calendário de
     celular de verdade (Google Agenda, Calendário do iPhone) — e quem
     quiser o título completo só precisa olhar a "Lista do mês" logo
     abaixo (ela já mostra tudo por extenso) ou tocar na bolinha, que abre
     o card da postagem do mesmo jeito de sempre. */
  @media (max-width:640px){
    .sm-cal-day{
      min-height:56px; padding:6px 4px; flex-direction:row; flex-wrap:wrap;
      align-content:flex-start; gap:4px;
    }
    .sm-cal-day-num{width:19px; height:19px; font-size:11px; flex-basis:100%;}
    .sm-cal-chip[data-id]{
      /* "currentColor" pega a cor sólida da categoria que o JS já define
         inline em "color:" pra esse mesmo elemento — assim a bolinha sai
         na cor certa de cada categoria sem precisar de uma regra por cor. */
      width:7px; height:7px; min-height:0; padding:0; border-radius:50%; flex:none;
      background-color:currentColor !important; border-left:none !important;
    }
    .sm-cal-chip-label, .sm-cal-chip .sm-status-icon{display:none;}
    .sm-cal-chip-more{
      width:auto; height:auto; min-height:0; padding:0; font-size:9px; flex:none;
      background:transparent !important; border-left:none !important;
    }
  }

  /* ---------------- Ícones de status (publicado / aprovado pelo cliente) ----------------
     Aparecem no chip do calendário, na lista e no card — "publicado" é um
     check verde (visível a todos), "aprovado pelo cliente" é uma estrela
     dourada (só pra quem cuida da conta), sempre com cor própria (nunca
     herdando a cor da categoria). */
  .sm-status-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:14px; height:14px; border-radius:50%; font-size:9px; font-weight:700;
    line-height:1; margin-right:4px; flex:none; vertical-align:middle;
  }
  .sm-icon-published{background:var(--accent-bright); color:#06110d;}
  .sm-icon-approved{background:var(--gold); color:#241d05;}

  /* ---------------- Visão do mês (calendário) ---------------- */
  .sm-brief-card{
    background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent-bright);
    border-radius:4px; padding:14px 16px; margin-bottom:24px;
  }
  .sm-brief-card p{font-size:13.5px; color:var(--text); margin:0; line-height:1.5; white-space:pre-wrap;}
  .sm-brief-textarea{
    display:block; width:100%; min-height:64px; resize:none; overflow:hidden;
    background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent-bright);
    border-radius:4px; padding:14px 16px; margin-bottom:14px;
    font-family:var(--font-body); font-size:13.5px; color:var(--text); line-height:1.5;
  }
  .sm-brief-textarea:focus{outline:none; border-color:var(--accent-bright);}

  /* ---------------- Etiqueta de categoria (card + lista) ---------------- */
  .sm-cat-badge{
    display:inline-block; padding:2px 9px; border-radius:10px; font-size:10.5px;
    font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em;
    color:#0a0c0b; font-weight:600;
  }

  /* ---------------- Tela "Categorias" (admin) ---------------- */
  .sm-cat-color-input{
    width:34px; height:34px; padding:0; border:1px solid var(--border); border-radius:4px;
    background:none; cursor:pointer; flex:none;
  }
  .sm-cat-label-input{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    border-radius:3px; padding:7px 10px; font-size:13px; min-width:160px;
  }

  /* ---------------- Lista de postagens clicável ---------------- */
  .sm-post-row{cursor:pointer; transition:background .15s ease;}
  .sm-post-row:hover{background:var(--surface);}

  /* ---------------- Card da postagem (modal estilo Notion) ---------------- */
  .sm-post-card-meta{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:18px;
    font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
  }
  .sm-pc-view-material{display:inline-block; margin-top:8px; text-decoration:none;}

  /* ---------------- Preview de material (link do Drive/YouTube/imagem/vídeo) ---------------- */
  .sm-media-item{position:relative; margin-bottom:12px;}
  .sm-media-item:last-of-type{margin-bottom:0;}
  .sm-media-embed{
    position:relative; width:100%; padding-top:56.25%; border-radius:6px; overflow:hidden;
    background:var(--surface); border:1px solid var(--border);
  }
  .sm-media-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .sm-media-image{
    display:block; width:100%; max-height:360px; object-fit:contain;
    border-radius:6px; border:1px solid var(--border); background:var(--surface);
  }
  .sm-media-remove{
    position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
    background:rgba(10,12,11,.72); border:1px solid var(--border-strong); color:var(--text);
    font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .sm-media-remove:hover{background:var(--danger); border-color:var(--danger); color:#1a0908;}
  .sm-media-add-row{display:flex; gap:8px; margin-top:10px;}
  .sm-media-add-row input{
    flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    border-radius:6px; padding:8px 10px; font-size:13px; min-width:0;
  }

  .sm-comments-list{
    max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
    margin-bottom:14px; padding-right:4px;
  }
  .sm-comment{background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:10px 12px;}
  .sm-comment-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:4px;}
  .sm-comment-head strong{font-size:13px; color:var(--text);}
  .sm-comment-role{
    font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
    padding:1px 7px; border-radius:10px; border:1px solid transparent;
  }
  .sm-role-admin{color:var(--accent-bright); background:var(--accent-dim); border-color:rgba(75,181,154,.3);}
  .sm-role-co_admin{color:var(--gold); background:var(--gold-dim); border-color:rgba(201,162,39,.3);}
  .sm-role-social_manager{color:var(--violet); background:var(--violet-dim); border-color:rgba(155,127,212,.3);}
  .sm-role-cliente{color:var(--stage-print); background:rgba(57,135,229,.14); border-color:rgba(57,135,229,.3);}
  .sm-comment-time{font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); margin-left:auto;}
  .sm-comment-body{font-size:13.5px; color:var(--text-muted); line-height:1.5; white-space:pre-wrap;}

  .sm-comment-form{display:flex; gap:8px; align-items:flex-start;}
  .sm-comment-form textarea{
    flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    border-radius:3px; padding:8px 10px; font-size:13px; font-family:inherit; resize:vertical;
  }

  /* ---------------- Assistente de IA (Calendário) ---------------- */
  .sm-ai-messages{
    max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
    margin-bottom:12px; padding-right:4px;
  }
  .sm-ai-msg{
    max-width:85%; border-radius:6px; padding:8px 12px; font-size:13.5px; line-height:1.5;
    white-space:pre-wrap; border:1px solid var(--border);
  }
  .sm-ai-msg-user{align-self:flex-end; background:var(--surface-2); color:var(--text);}
  .sm-ai-msg-assistant{align-self:flex-start; background:var(--violet-dim); border-color:rgba(155,127,212,.3); color:var(--text);}
  .sm-ai-msg-action{
    align-self:flex-start; font-size:12px; color:var(--accent-bright); border:1px dashed rgba(75,181,154,.4);
    background:var(--accent-dim); border-radius:6px; padding:6px 10px;
  }
  .sm-ai-msg-error{align-self:flex-start; color:var(--danger); font-size:13px;}

  /* ---------------- Painel inicial (Administrador) ---------------- */
  .hub-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:36px;}
  .hub-card{
    display:flex; flex-direction:column; gap:8px; padding:26px 24px;
    background:var(--surface); border:1px solid var(--border); border-radius:4px;
    text-decoration:none; transition:border-color .15s ease, transform .15s ease;
  }
  .hub-card:hover{border-color:var(--accent-bright); transform:translateY(-2px);}
  .hub-card-title{
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
    font-size:19px; color:var(--text);
  }
  .hub-card-sub{font-size:13px; color:var(--text-muted);}
  .hub-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .hub-box{background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:20px 22px;}
  .hub-box-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
  .hub-box-head h3{
    font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
    font-size:14px; color:var(--text); margin:0;
  }
  .hub-sub-label{
    font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-faint); margin:0 0 8px;
  }
  @media (max-width:640px){
    .hub-cards{grid-template-columns:1fr;}
    .hub-grid{grid-template-columns:1fr;}
  }

  /* ---------------- Card de identidade do cliente (Redes Sociais) ---------------- */
  .sm-client-card{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--border); border-radius:4px;
    padding:18px 22px; margin-bottom:24px;
  }
  .sm-client-logo{
    width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none;
    border:1px solid var(--border-strong); background:var(--surface-2);
  }
  .sm-client-logo-fallback{
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:22px; color:var(--accent-bright);
    background:var(--accent-dim);
  }
  .sm-client-card-main{display:flex; flex-direction:column; gap:6px; flex:1; min-width:200px;}
  .sm-client-card-name{
    font-family:var(--font-display); font-weight:600; font-size:19px;
    letter-spacing:.02em; color:var(--text); text-transform:uppercase;
  }
  .sm-client-card-links{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .sm-client-links-label{
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-faint);
  }
  .sm-client-link-pill{
    background:none; border:1px solid var(--border-strong); color:var(--text-muted);
    padding:4px 11px; border-radius:20px; font-size:11.5px; text-decoration:none;
    transition:color .15s ease, border-color .15s ease;
  }
  .sm-client-link-pill:hover{color:var(--accent-bright); border-color:var(--accent-dim);}

  /* ---------------- Extrato do mês (Financeiro) ---------------- */
  .sm-fin-extra-remove{
    background:none; border:1px solid rgba(201,122,109,.4); color:var(--danger);
    padding:8px 10px; border-radius:3px; font-size:12px; cursor:pointer; width:100%;
  }
  .sm-fin-extra-remove:hover{background:rgba(201,122,109,.12);}

  /* ---------------- Notificações (sino) ---------------- */
  .notif-bell-wrap{position:relative;}
  .notif-bell-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;}
  .notif-bell-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;}
  .notif-bell-badge{
    position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
    background:var(--danger); color:var(--bg); font-family:var(--font-mono); font-size:9.5px; font-weight:600;
    border-radius:9px; display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .notif-bell-panel{
    position:absolute; top:calc(100% + 8px); right:0; width:340px; max-width:90vw; max-height:420px;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,0.4); z-index:50; overflow:hidden; display:flex; flex-direction:column;
  }
  .notif-bell-head{
    display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
    border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px;
    text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  }
  .notif-bell-mark-all{background:none; border:none; color:var(--accent-bright); font-family:var(--font-mono); font-size:10.5px; cursor:pointer; padding:0;}
  .notif-bell-mark-all:hover{text-decoration:underline;}
  .notif-bell-list{overflow-y:auto; flex:1;}
  .notif-empty{padding:16px 14px; color:var(--text-faint); font-size:13px; margin:0;}
  .notif-item{padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s;}
  .notif-item:hover{background:var(--surface-2);}
  .notif-item:last-child{border-bottom:none;}
  .notif-item.notif-unread{background:var(--accent-dim);}
  .notif-item.notif-unread:hover{background:var(--accent-dim);}
  .notif-item-title{font-size:13px; color:var(--text); font-weight:600;}
  .notif-item-body{font-size:12px; color:var(--text-muted); margin-top:2px;}
  .notif-item-time{font-family:var(--font-mono); font-size:10px; color:var(--text-faint); margin-top:4px;}

  /* ---------- Ferramenta de chaveiro ---------- */
  .kc-dropzone{
    border:2px dashed var(--border); border-radius:6px; padding:26px 16px; text-align:center;
    color:var(--text-muted); font-size:13px; cursor:pointer; transition:border-color .15s ease, color .15s ease;
  }
  .kc-dropzone:hover, .kc-dropzone.kc-dragover{border-color:var(--accent-bright); color:var(--text);}
  .kc-dropzone b{color:var(--text);}
  .kc-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  .kc-thumb{
    position:relative; width:110px; background:var(--surface-2); border:1px solid var(--border); border-radius:4px;
    padding:6px; cursor:grab; user-select:none;
  }
  .kc-thumb.kc-dragging{opacity:.4;}
  .kc-thumb img{width:100%; height:80px; object-fit:cover; border-radius:3px; display:block; pointer-events:none;}
  .kc-thumb-order{
    position:absolute; top:2px; left:2px; background:rgba(0,0,0,.65); color:#fff; font-size:10px;
    font-family:var(--font-mono); padding:1px 5px; border-radius:3px; pointer-events:none;
  }
  .kc-thumb-remove{
    position:absolute; top:2px; right:2px; background:rgba(0,0,0,.65); color:#fff; border:none; width:18px; height:18px;
    border-radius:3px; line-height:1; cursor:pointer; font-size:13px;
  }
  .kc-thumb-remove:hover{background:var(--danger);}
  .kc-thumb-label{font-size:10.5px; color:var(--text-muted); margin-top:4px; word-break:break-all; line-height:1.3;}
  .kc-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:center;}
  .kc-btn-secondary{
    background:transparent; border:1px solid var(--border); color:var(--text-muted); padding:9px 16px;
    border-radius:3px; cursor:pointer; font-size:13px;
  }
  .kc-btn-secondary:hover{color:var(--text); border-color:var(--accent-dim);}
  .kc-progress-wrap{margin-top:14px; max-width:320px;}
  .kc-progress-text{font-size:12px; color:var(--text-muted); margin-bottom:6px; font-family:var(--font-mono);}
  .kc-result{
    margin-top:16px; padding:14px 16px; border-left:2px solid var(--accent); background:var(--accent-dim);
    border-radius:0 4px 4px 0; font-size:13px;
  }
  .kc-result a{color:var(--accent-bright); font-weight:600;}

  /* Aviso de cookies (assets/cookie-notice.js) — barra discreta, fixa no
     rodapé, some com um clique e não é bloqueante (sem overlay). */
  #cookie-notice{
    position:fixed; left:0; right:0; bottom:0; z-index:500;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
    padding:12px 20px; background:var(--surface); border-top:1px solid var(--border);
    box-shadow:0 -2px 12px rgba(0,0,0,0.25);
  }
  .cookie-notice-text{font-size:12.5px; line-height:1.5; color:var(--text-muted); max-width:640px; text-align:center;}
  .cookie-notice-text a{color:var(--accent-bright); text-decoration:underline;}
  .cookie-notice-ok{
    flex:0 0 auto; background:var(--accent); color:#fff; border:none; padding:7px 18px;
    border-radius:4px; font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .cookie-notice-ok:hover{background:var(--accent-bright);}