@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #E5EDE2;
    --ink: #17231C;
    --ink-soft: #66766A;
    --border: #D2DECC;
    --accent: #1E4030;
    --accent-strong: #163024;
    --accent-ink: #FFFFFF;
    --action: #2D6FA6;
    --action-strong: #22557F;
    --action-ink: #FFFFFF;
    --gold: #B8862E;
    --gold-ink: #FFFFFF;
    --danger: #8C3B2E;
    --hero-bg: #FFFFFF;
    --hero-fg: #17231C;
    --hero-gold: #1E4030;
    --canvas: #F2F1F8;
    --shadow: 0 1px 2px rgba(20,36,28,0.07), 0 10px 28px rgba(20,36,28,0.08);
  }
  /* Este sistema mantém sempre o visual claro (fundo branco), mesmo que o
     celular/computador esteja no modo escuro — por isso não há mais um
     bloco @media (prefers-color-scheme: dark) alterando as cores sozinho.
     O tema escuro abaixo só entra se alguém marcar isso manualmente
     (data-theme="dark"), o que hoje não acontece em lugar nenhum da página. */
  :root[data-theme="dark"]{
    --bg: #10160E; --surface: #161F18; --surface-2: #1D281F;
    --ink: #E6EEE3; --ink-soft: #9BAB96; --border: #2C3A2C;
    --accent: #6FA98B; --accent-strong: #8FC1A6; --accent-ink: #0D1A12;
    --action: #6FB4E0; --action-strong: #8FC6EA; --action-ink: #0B1D2A;
    --gold: #D9AB56; --gold-ink: #241708;
    --danger: #E0937A;
    --hero-bg: #0B140E; --hero-fg: #E6EEE3; --hero-gold: #D9AB56;
    --canvas: #0D130F;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.4);
  }

  *{ box-sizing:border-box; }
  body{ background: var(--canvas); color: var(--ink); font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif; line-height:1.55; }
  .wrap{ max-width: 1040px; margin:0 auto; padding-inline: 20px; padding-block: 32px 90px; }
  /* Depois do login, o menu lateral deve ficar grudado no canto esquerdo de
     verdade (não centralizado com sobra de espaço nas laterais em telas
     largas) — então a área logada usa a largura inteira da janela, e é o
     app-shell (não mais o wrap) quem cuida do respiro nas bordas. */
  .wrap.logged-in{ padding-top:0; max-width:none; padding-inline:0; }
  .wrap.logged-in .app-shell{ margin:0; }

  h1, h2, h3, .display{ font-family:'Manrope', ui-sans-serif, system-ui, sans-serif; }

  /* ---- landing: decorative tech background (scoped to logged-out state only) ---- */
  #landing-fx{
    position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  }
  #landing-fx::after{
    content:''; position:absolute; inset:0;
    background-image: url('/marca/fundo-login.jpg');
    background-size: cover; background-position: center 30%; background-repeat: no-repeat;
    opacity: 0.1;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 35%, transparent 78%);
            mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 35%, transparent 78%);
  }
  :root[data-theme="dark"] #landing-fx::after{ opacity: 0.16; }
  #landing-fx::before{
    content:''; position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 1.5px 1.5px, rgba(30,64,48,0.16) 1.2px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 35%, transparent 78%);
            mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 35%, transparent 78%);
  }
  .landing-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.4; }
  .landing-glow.g1{ width:520px; height:520px; top:-220px; right:-140px; background:#1E4030; animation: driftA 22s ease-in-out infinite; }
  .landing-glow.g2{ width:420px; height:420px; top:120px; left:-160px; background:#2D6FA6; opacity:0.22; animation: driftB 26s ease-in-out infinite; }
  .landing-glow.g3{ width:360px; height:360px; top:520px; right:10%; background:#B8862E; opacity:0.14; animation: driftA 30s ease-in-out infinite reverse; }
  @keyframes driftA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-24px,26px) scale(1.06); } }
  @keyframes driftB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(26px,-18px) scale(1.05); } }

  /* ---- landing nav (shown only before login) ---- */
  .landing-nav{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding: 14px 18px; margin-bottom:34px;
    background: rgba(255,255,255,0.72); border:1px solid var(--border); border-radius:999px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
  }
  .landing-nav-links{ display:flex; align-items:center; gap:22px; }
  .landing-nav-links a{ color: var(--ink-soft); text-decoration:none; font-weight:600; font-size:14px; }
  .landing-nav-links a:hover{ color: var(--ink); }
  .landing-nav-right{ display:flex; align-items:center; gap:14px; }
  .landing-cta{
    background: var(--accent); color: var(--accent-ink); border:none; border-radius:999px;
    padding:10px 20px; font-weight:700; font-size:13.5px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
    box-shadow: 0 4px 14px rgba(30,64,48,0.28);
  }
  .landing-cta:hover{ filter:brightness(1.1); transform:translateY(-1px); box-shadow: 0 6px 18px rgba(30,64,48,0.34); }

  /* ---- landing nav: menu de 3 pontinhos (só aparece no celular) ---- */
  .landing-nav-mobile-wrap{ display:none; position:relative; }
  .landing-nav-mobile-btn{
    background:transparent; border:1px solid var(--border); border-radius:999px; width:36px; height:36px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink-soft);
  }
  .landing-nav-mobile-btn:hover{ color: var(--ink); border-color: var(--accent); }
  .landing-nav-mobile-btn svg{ width:18px; height:18px; }
  .landing-nav-mobile-menu{
    position:absolute; top:calc(100% + 10px); right:0; min-width:200px;
    background: var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow);
    padding:8px; display:flex; flex-direction:column; gap:3px;
    opacity:0; visibility:hidden; transform:translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
    z-index:50;
  }
  .landing-nav-mobile-wrap.aberto .landing-nav-mobile-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .landing-nav-mobile-menu a, .landing-nav-mobile-menu .landing-nav-mobile-theme{
    display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:9px;
    color: var(--ink); text-decoration:none; font-weight:600; font-size:13.5px;
    background:transparent; border:none; cursor:pointer; width:100%; text-align:left;
  }
  .landing-nav-mobile-menu a:hover, .landing-nav-mobile-menu .landing-nav-mobile-theme:hover{ background: var(--surface-2); }
  .landing-nav-mobile-menu .landing-nav-mobile-theme svg{ width:15px; height:15px; flex:none; color: var(--ink-soft); }
  .landing-nav-mobile-menu .landing-cta{ justify-content:center; margin-top:2px; }
  @media (max-width:680px){
    .landing-nav{ flex-wrap:nowrap; padding:11px 12px 11px 16px; }
    .landing-nav-links, .landing-nav-right{ display:none; }
    .landing-nav-mobile-wrap{ display:flex; }
  }

  /* ---- hero (two columns: pitch copy + login card) ---- */
  .hero-grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap:48px; align-items:center; margin-bottom:48px; }
  @media (max-width:820px){ .hero-grid{ grid-template-columns:1fr; } }
  header.hero{ color: var(--ink); }
  .eyebrow{
    display:inline-flex; align-items:center; gap:7px;
    font-family:'Manrope', sans-serif; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; font-size:12px; color: var(--accent-strong);
    background: var(--surface-2); border:1px solid var(--border); border-radius:999px;
    padding:6px 13px 6px 10px;
  }
  .eyebrow .pulse-dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); position:relative; flex:none; }
  .eyebrow .pulse-dot::after{
    content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--accent);
    animation: pulseRing 2.2s ease-out infinite;
  }
  @keyframes pulseRing{ 0%{ transform:scale(0.5); opacity:0.9; } 100%{ transform:scale(1.9); opacity:0; } }
  h1{
    font-weight:800; font-size:clamp(34px,5.4vw,50px); line-height:1.04; margin:16px 0 14px; text-wrap:balance;
    color: #163024; /* verde escuro fixo — sempre a mesma cor, no claro e no escuro */
    letter-spacing:-0.01em;
  }
  .rule{ display:none; }
  .subtitle{ font-size:16.5px; color: var(--ink-soft); max-width:50ch; margin:0; }
  .feature-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
  .feature-item{
    display:flex; align-items:center; gap:8px; font-size:13px; color: var(--ink); font-weight:600;
    background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 14px;
    box-shadow: var(--shadow);
  }
  .feature-item svg{ width:15px; height:15px; color: var(--accent); flex:none; }

  /* ---- "como funciona" strip ---- */
  .how-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px; scroll-margin-top:16px; }
  @media (max-width:700px){ .how-strip{ grid-template-columns:1fr; } }
  .how-step{
    position:relative; background: var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:20px 20px 18px; box-shadow: var(--shadow); overflow:hidden;
  }
  .how-step::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, var(--accent), var(--action));
  }
  .how-step .num{
    display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
    font-family:'Manrope', sans-serif; font-weight:800; font-size:14px; color: var(--accent-ink);
    background: var(--accent); border-radius:9px; margin-bottom:10px;
  }
  .how-step h3{ font-size:15px; margin:0 0 4px; }
  .how-step p{ font-size:13px; color: var(--ink-soft); margin:0; }

  .notice{
    display:flex; gap:10px; align-items:center;
    color: var(--ink-soft); font-size:12.5px; margin: 0 0 22px; padding: 0 2px;
  }
  .notice svg{ width:14px; height:14px; color: var(--ink-soft); flex:none; }
  .notice b{ color: var(--ink); }

  .login-gate{
    position:relative; z-index:1;
    background: var(--surface);
    border: 1px solid var(--border); border-radius:18px;
    padding:36px 36px 32px; box-shadow: 0 1px 2px rgba(20,36,28,0.07), 0 20px 48px rgba(20,36,28,0.14); max-width:440px; margin:0 0 30px;
    color: var(--ink); scroll-margin-top:20px;
  }
  .login-gate::before{
    content:''; position:absolute; top:0; left:16px; right:16px; height:3px; border-radius:0 0 3px 3px;
    background: linear-gradient(90deg, var(--accent), var(--action), var(--gold));
  }
  .login-gate h2{ font-weight:700; font-size:22px; margin:0 0 4px; color: var(--ink); font-family:'Manrope', sans-serif; }
  .login-gate p.lede{ color: var(--ink-soft); font-size:13.5px; margin:0 0 18px; }
  .login-gate form{ display:grid; gap:18px; }
  .login-gate label span{ color: var(--ink-soft); font-size:13px; font-weight:600; }
  .login-gate .field-icon input, .login-gate .field-icon select{
    background: var(--bg); color: var(--ink); border:1px solid var(--border);
    transition: border-color .15s, box-shadow .15s;
  }
  .login-gate .field-icon input:focus, .login-gate .field-icon select:focus{
    outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,64,48,0.14);
  }
  .login-gate .field-icon input::placeholder{ color: var(--ink-soft); }
  .field-icon{ position:relative; }
  .field-icon svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--ink-soft); pointer-events:none; }
  .field-icon input, .field-icon select{ padding-left:36px; }
  .login-msg{ font-size:13px; color: var(--danger); min-height:16px; }
  .login-gate .btn-primary{ width:100%; justify-content:center; padding:12px; font-size:14.5px; }

  /* ---- top navbar (shown once logged in) ---- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background: var(--surface); border-bottom:1px solid var(--border);
    padding:15px 26px; margin: 0 -26px 30px;
  }
  .topbar-brand{ display:flex; align-items:center; gap:9px; }
  .topbar-logo{
    width:32px; height:32px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
    background: var(--accent); color: var(--accent-ink);
  }
  .topbar-logo svg{ width:17px; height:17px; }
  .topbar-logo img{ width:100%; height:100%; object-fit:contain; border-radius:inherit; }
  .topbar-brand span{ font-family:'Manrope', sans-serif; font-weight:700; font-size:17px; color: var(--ink); }
  .topbar-area{
    display:inline-flex; align-items:center; gap:7px;
    font-family:'Public Sans', sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
    padding:7px 14px; border-radius:999px; background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow);
  }
  .topbar-area svg{ width:13px; height:13px; }
  .topbar-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .theme-toggle{
    background:transparent; border:1px solid var(--border); border-radius:999px; width:32px; height:32px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink-soft);
  }
  .theme-toggle:hover{ color: var(--ink); border-color: var(--accent); }
  .theme-toggle svg{ width:15px; height:15px; }

  /* ---- sino de notificações ---- */
  .notif-wrap{ position:relative; }
  .notif-btn{
    background:transparent; border:1px solid var(--border); border-radius:999px; width:32px; height:32px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink-soft); position:relative;
  }
  .notif-btn:hover{ color: var(--ink); border-color: var(--accent); }
  .notif-btn svg{ width:15px; height:15px; }
  .notif-badge{
    position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:999px;
    background: var(--danger); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center;
    box-shadow: 0 0 0 2px var(--surface);
  }
  .notif-panel{
    position:absolute; top:calc(100% + 10px); right:0; width:320px; max-width:calc(100vw - 32px);
    background: var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,.18));
    opacity:0; visibility:hidden; transform:translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
    z-index:40; overflow:hidden;
  }
  .notif-wrap.aberto .notif-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .notif-panel-head{
    font-family:'Manrope', sans-serif; font-weight:700; font-size:13.5px; padding:13px 16px; border-bottom:1px solid var(--border);
  }
  .notif-panel-body{ max-height:340px; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
  .notif-empty{ padding:22px 14px; text-align:center; color: var(--ink-soft); font-size:13px; }
  .notif-item{
    display:flex; align-items:flex-start; gap:10px; text-align:left; background:transparent; border:none; border-radius:9px;
    padding:10px 10px; cursor:pointer; width:100%;
  }
  .notif-item:hover{ background: var(--surface-2); }
  .notif-dot{ width:9px; height:9px; border-radius:50%; margin-top:4px; flex:none; }
  .notif-dot.tone-gold{ background: var(--gold); }
  .notif-dot.tone-action{ background: var(--action); }
  .notif-dot.tone-danger{ background: var(--danger); }
  .notif-item-text{ min-width:0; }
  .notif-item-title{ display:block; font-weight:700; font-size:13px; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notif-item-sub{ display:block; font-size:12px; color: var(--ink-soft); margin-top:1px; }

  /* ---- "Meu perfil" (avatar no topo: trocar e-mail e senha) ---- */
  .perfil-wrap{ position:relative; }
  .perfil-wrap .topbar-avatar{ cursor:pointer; border:none; padding:0; }
  .perfil-panel{
    position:absolute; top:calc(100% + 10px); right:0; width:280px; max-width:calc(100vw - 32px);
    background: var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,.18));
    opacity:0; visibility:hidden; transform:translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
    z-index:40;
  }
  .perfil-wrap.aberto .perfil-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .perfil-panel-head{ font-family:'Manrope', sans-serif; font-weight:700; font-size:13.5px; padding:13px 16px; border-bottom:1px solid var(--border); }
  .perfil-panel-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; max-height:min(70vh, 520px); overflow-y:auto; }
  .perfil-info-nome{ font-family:'Manrope', sans-serif; font-weight:700; font-size:14px; color: var(--ink); }
  .perfil-info-login{ font-size:12px; color: var(--ink-soft); margin-top:1px; }
  .perfil-divider{ border-top:1px solid var(--border); margin:2px 0; }
  .perfil-subhead{ font-family:'Manrope', sans-serif; font-weight:700; font-size:12.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin:0; }
  .perfil-actions{ display:flex; }
  .perfil-actions .btn{ width:100%; justify-content:center; }
  .topbar-who{ font-size:13px; text-align:right; line-height:1.3; }
  .topbar-who b{ font-family:'Manrope', sans-serif; font-weight:700; }
  .topbar-who .tag-role{
    font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color: var(--accent-strong);
    border:1px solid var(--border); border-radius:999px; padding:1px 9px; margin-left:6px;
  }
  .tag-role.role-solicitante{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .tag-role.role-diretoria{ color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
  .tag-role.role-financeiro{ color: var(--action); border-color: color-mix(in srgb, var(--action) 45%, transparent); }
  .tag-role.role-ti{ color: var(--ink-soft); border-color: var(--border); }
  .tag-role.role-superadmin{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
  .topbar-avatar{
    width:32px; height:32px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:13px;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  }
  .topbar-logout{ background:transparent; border:none; color: var(--danger); font-weight:600; font-size:13px; cursor:pointer; padding:0; }
  .topbar-logout:hover{ text-decoration:underline; }

  /* ---- app shell: left sidebar (desktop) + main column ---- */
  .app-shell{ display:flex; align-items:flex-start; gap:8px; margin: 0 -20px; }
  .sidebar{
    width:228px; flex:none; box-sizing:border-box;
    background: var(--surface); border-right:1px solid var(--border);
    position:sticky; top:0; align-self:flex-start; min-height:calc(100vh - 20px);
    /* padding-bottom extra pra combinar com o padding-bottom:88px do
       .main-col — sem isso, o rodapé do menu (Sair) fica exatamente atrás
       da barra de abas fixa (.tabs), grudado nela. */
    padding:20px 14px 88px; display:flex; flex-direction:column; gap:4px;
  }
  .sidebar.collapsed{ width:60px; padding-left:8px; padding-right:8px; }
  /* Com o menu recolhido, o espaço extra entre a faixa de ícones e o
     conteúdo (o gap do app-shell + o padding direito do sidebar) fica
     sobrando e parece um erro de layout — tira os dois nesse estado. */
  .app-shell.sidebar-collapsed{ gap:0; }
  .app-shell.sidebar-collapsed .sidebar.collapsed{ padding-right:0; }
  .sidebar-brand{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 6px 16px; }
  .sidebar-brand .topbar-brand span:not(.topbar-logo){ font-size:14.5px; }
  .sidebar-collapse{
    background:transparent; border:1px solid var(--border); border-radius:7px; width:24px; height:24px; flex:none;
    display:flex; align-items:center; justify-content:center; color: var(--ink-soft); cursor:pointer;
  }
  .sidebar-collapse svg{ width:12px; height:12px; transition: transform .15s; }
  .sidebar.collapsed .sidebar-collapse svg{ transform:rotate(180deg); }
  .sidebar-group-label{ font-size:10.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color: var(--ink-soft); padding:14px 10px 6px; }
  .sidebar-group-label:first-of-type{ padding-top:2px; }
  .sidebar-link{
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
    font-family:'Public Sans', sans-serif; font-size:13.5px; font-weight:600; letter-spacing:normal; text-transform:none;
    color: var(--ink-soft); text-decoration:none; cursor:pointer; border:none; background:transparent; width:100%; text-align:left;
    transition: background .12s, color .12s;
  }
  .sidebar-link svg{ width:16px; height:16px; flex:none; }
  .sidebar-link:hover{ background: var(--surface-2); color: var(--ink); }
  .sidebar-link.active{ background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-strong); font-weight:700; }
  .sidebar-link .link-icon{
    width:27px; height:27px; border-radius:8px; flex:none;
    display:flex; align-items:center; justify-content:center; transition: background .12s, color .12s;
  }
  .sidebar-link .link-icon svg{ width:14px; height:14px; }
  .sidebar-link .link-icon.tone-accent{ background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-strong); }
  .sidebar-link .link-icon.tone-action{ background: color-mix(in srgb, var(--action) 16%, transparent); color: var(--action-strong); }
  .sidebar-link .link-icon.tone-gold{ background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
  .sidebar-link.active .link-icon{ background: var(--accent); color: var(--accent-ink); }
  .sidebar-link .link-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-link .link-badge{
    margin-left:auto; flex:none; background: var(--danger); color:#fff;
    font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:700;
    border-radius:999px; padding:1.5px 7px; line-height:1.5;
  }
  .sidebar-footer{ margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
  .sidebar-footer .sidebar-link{ color: var(--danger); }
  .sidebar-footer .sidebar-link:hover{ background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
  .sidebar.collapsed .sidebar-brand span:not(.topbar-logo),
  .sidebar.collapsed .sidebar-group-label,
  .sidebar.collapsed .sidebar-link span:not(.link-icon){ display:none; }
  .sidebar.collapsed .sidebar-link{ justify-content:center; padding:9px; }
  .sidebar.collapsed #db-status-sidebar{ display:none; }
  .main-col{ flex:1 1 auto; min-width:0; padding-inline:26px; padding-bottom:88px; }
  @media (max-width:900px){
    .sidebar{ display:none; }
    .main-col{ padding-inline:0; }
  }

  /* ---- breadcrumb (replaces the old area pill inside the topbar) ---- */
  .crumb{ display:flex; align-items:center; gap:7px; font-size:13px; color: var(--ink-soft); font-weight:600; min-width:0; }
  .crumb svg{ width:15px; height:15px; flex:none; color: var(--accent); }
  .crumb span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .crumb .crumb-sep{ color: var(--border); }
  .crumb .crumb-current{ color: var(--ink); }

  .area-tag{
    display:inline-flex; align-items:center; gap:7px;
    font-family:'Public Sans', sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
    padding:5px 12px; border-radius:999px; margin-bottom:12px;
  }
  .area-tag svg{ width:13px; height:13px; }
  .area-comprador{ background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
  .area-diretoria{ background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
  .area-financeiro{ background: color-mix(in srgb, var(--action) 16%, transparent); color: var(--action); }

  /* ---- page greeting + title (replaces the old boxed area header) ---- */
  .greet-line{ font-size:14px; color: var(--ink-soft); margin:0 0 4px; }
  .page-title{ font-weight:700; font-size:28px; margin:0 0 6px; }
  section.panel > p.lede.page-lede{ margin-bottom:22px; }

  /* ---- "tudo em dia" style status banner ---- */
  .status-banner{
    display:flex; align-items:center; gap:12px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius:14px; padding:16px 18px; margin-bottom:24px; color: var(--accent-strong); font-weight:600; font-size:14.5px;
  }
  .status-banner .status-check{
    width:26px; height:26px; border-radius:7px; flex:none; background: var(--accent); color: var(--accent-ink);
    display:flex; align-items:center; justify-content:center;
  }
  .status-banner .status-check svg{ width:15px; height:15px; }

  /* Link discreto pro acesso administrativo (superadmin) na tela de login —
     de propósito pouco chamativo, não é pra aparecer como uma opção normal
     de login pra quem só usa o sistema como comprador/diretoria/etc. */
  .link-sutil{
    background:none; border:none; padding:0; text-align:left;
    font-family:'Public Sans', sans-serif; font-size:11.5px; color: var(--ink-soft);
    text-decoration:underline; cursor:pointer; justify-self:start;
  }
  .link-sutil:hover{ color: var(--ink); }

  .help-float{
    position:fixed; right:20px; bottom:20px; z-index:50;
    display:inline-flex; align-items:center; gap:8px;
    background: var(--accent); color: var(--accent-ink); text-decoration:none;
    font-weight:700; font-size:13.5px; padding:12px 18px; border-radius:999px;
    box-shadow: var(--shadow); transition: filter .15s;
  }
  /* Logado, a barra de abas agora fica fixa no rodapé — sobe o botão de
     ajuda pra ele não ficar em cima dela. */
  .wrap.logged-in .help-float{ bottom:82px; }
  .help-float:hover{ filter: brightness(1.08); }
  .help-float svg{ width:17px; height:17px; flex:none; }

  select.status-select{ width:auto; padding:6px 9px; font-size:13px; }
  .btn-danger{ background: transparent; color: var(--danger); border:1px solid var(--danger); }
  td.actions-cell{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

  h3.subhead{ font-weight:600; font-size:19px; margin: 40px 0 14px; letter-spacing:0.005em; }

  /* ---- logotipo da empresa (aba TI › Usuários) ---- */
  .logo-empresa-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .logo-empresa-preview{
    width:88px; height:88px; border-radius:14px; border:1px dashed var(--border); background: var(--surface-2);
    display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden;
  }
  .logo-empresa-preview img{ width:100%; height:100%; object-fit:contain; }
  .logo-empresa-preview span{ font-size:11px; color: var(--ink-soft); text-align:center; padding:0 6px; }
  .logo-empresa-campo{ flex:1 1 220px; min-width:200px; }
  .inline-pass{ display:flex; gap:6px; align-items:center; }
  .inline-pass input{ width:140px; }
  .inline-pass .btn{ padding:6px 12px; font-size:12px; }

  section.panel{ margin-bottom: 54px; }
  section.panel > h2{ font-weight:600; font-size:25px; margin:0 0 4px; }
  section.panel > p.lede{ color: var(--ink-soft); font-size:14px; margin:0 0 18px; max-width:60ch; }

  /* ---- ícone de ajuda "?" — as descrições explicativas ficam escondidas
     atrás dele, clique para ver, em vez de ocupar espaço permanentemente ---- */
  .help-wrap{ position:relative; display:inline-flex; vertical-align:middle; margin-left:7px; }
  .help-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:999px; border:1px solid var(--border);
    background: var(--surface-2); color: var(--ink-soft);
    font-size:11px; font-weight:700; line-height:1; cursor:pointer; padding:0;
  }
  .help-icon:hover, .help-icon:focus-visible{
    background: color-mix(in srgb, var(--action) 18%, var(--surface-2));
    color: var(--action); border-color: var(--action); outline:none;
  }
  .help-pop{
    position:absolute; z-index:30; top:calc(100% + 8px); left:0;
    width:max-content; max-width:min(320px, 78vw); background: var(--surface); color: var(--ink-soft);
    border:1px solid var(--border); border-radius:12px; padding:10px 12px;
    font-size:12.5px; font-weight:400; letter-spacing:normal; line-height:1.5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    opacity:0; visibility:hidden; transform: translateY(-4px); pointer-events:none;
    transition: opacity .14s ease, transform .14s ease;
  }
  .help-pop b{ color: var(--ink); }
  .help-wrap.aberto .help-pop{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }

  /* ---- stat tiles ---- */
  .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:28px; }
  .stat-tile{
    position:relative; overflow:hidden;
    background: var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .stat-tile:hover{ transform: translateY(-3px); box-shadow: 0 4px 10px rgba(20,36,28,0.08), 0 18px 30px rgba(20,36,28,0.16); }
  .stat-tile .stat-icon{
    width:42px; height:42px; border-radius:11px; background: var(--surface-2); color: var(--accent-strong);
    display:flex; align-items:center; justify-content:center; flex:none; transition: transform .18s ease;
  }
  .stat-tile:hover .stat-icon{ transform: scale(1.08) rotate(-4deg); }
  .stat-tile .stat-icon svg{ width:19px; height:19px; }
  /* tons vívidos (cor sólida com leve gradiente) — o tom vai no card inteiro,
     não só no ícone, pra parecer mais um "painel" e menos um cartão neutro */
  .stat-tile.tone-accent, .stat-tile.tone-action, .stat-tile.tone-gold, .stat-tile.tone-danger{ border-color:transparent; }
  .stat-tile.tone-accent{ background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, black)); color: var(--accent-ink); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
  .stat-tile.tone-action{ background: linear-gradient(135deg, var(--action), color-mix(in srgb, var(--action) 72%, black)); color: var(--action-ink); box-shadow: 0 10px 22px color-mix(in srgb, var(--action) 35%, transparent); }
  .stat-tile.tone-gold{ background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 72%, black)); color: var(--gold-ink); box-shadow: 0 10px 22px color-mix(in srgb, var(--gold) 35%, transparent); }
  .stat-tile.tone-danger{ background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 72%, black)); color:#fff; box-shadow: 0 10px 22px color-mix(in srgb, var(--danger) 35%, transparent); }
  .stat-tile[class*="tone-"]::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(140px 90px at 88% -20%, rgba(255,255,255,0.4), transparent 70%);
  }
  .stat-tile[class*="tone-"]:hover{ box-shadow: 0 14px 30px color-mix(in srgb, currentColor 30%, transparent); }
  .stat-tile[class*="tone-"] .stat-icon{ background: rgba(255,255,255,0.24); color:inherit; }
  .stat-value{ font-family:'Manrope', sans-serif; font-weight:800; font-size:23px; line-height:1.1; font-variant-numeric: tabular-nums; }
  .stat-label{ font-size:11px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; }
  .stat-tile[class*="tone-"] .stat-label{ color: inherit; opacity:0.88; }
  button.stat-tile{ cursor:pointer; text-align:left; font:inherit; width:100%; -webkit-appearance:none; appearance:none; }
  button.stat-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ---------- cronograma do contas a pagar (financeiro) ---------- */
  .cronograma-grupo{ margin-bottom:22px; }
  .cronograma-data{ font-family:'Manrope', sans-serif; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); padding:6px 2px; border-bottom:1px solid var(--border); margin-bottom:10px; }
  .cronograma-data.atrasado{ color: var(--danger); }
  .cronograma-data.hoje{ color: var(--accent-strong); }
  .cronograma-lista{ display:flex; flex-direction:column; gap:8px; }
  .cronograma-item{
    display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
    background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 16px;
    cursor:pointer; text-align:left; font:inherit; box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease;
    -webkit-appearance:none; appearance:none;
  }
  .cronograma-item:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20,36,28,0.08), 0 18px 30px rgba(20,36,28,0.12); }
  .cronograma-item-info{ min-width:0; }
  .cronograma-item-titulo{ font-weight:700; display:block; }
  .cronograma-item-meta{ display:block; font-size:12px; color: var(--ink-soft); margin-top:2px; }
  .cronograma-item-valor{ font-family:'Manrope', sans-serif; font-weight:800; font-variant-numeric: tabular-nums; flex:none; }
  .cronograma-item-status{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:5px 10px; border-radius:999px; flex:none; white-space:nowrap; }
  .cronograma-item-status.tone-gold{ background: color-mix(in srgb, var(--gold) 18%, transparent); color: color-mix(in srgb, var(--gold) 65%, black); }
  .cronograma-item-status.tone-accent{ background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); }
  .cronograma-item-status.tone-danger{ background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }

  /* ---------- calendário do cronograma (financeiro) ---------- */
  .cal-card{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: var(--shadow); margin-bottom:18px; }
  .cal-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .cal-titulo{ font-family:'Manrope', sans-serif; font-weight:800; font-size:16px; flex:1; text-align:center; text-transform:capitalize; }
  .cal-nav-btn{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background: var(--surface-2);
    color: var(--ink); font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    -webkit-appearance:none; appearance:none; flex:none; transition: background .15s ease, color .15s ease;
  }
  .cal-nav-btn:hover{ background: var(--accent); color: var(--accent-ink); }
  .cal-hoje-btn{
    border:1px solid var(--border); background:transparent; color: var(--ink-soft); border-radius:999px; padding:6px 12px;
    font-size:12px; font-weight:700; cursor:pointer; flex:none; -webkit-appearance:none; appearance:none;
  }
  .cal-hoje-btn:hover{ color: var(--ink); border-color: var(--accent); }
  .cal-semana{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
  .cal-semana-dia{ text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color: var(--ink-soft); padding:4px 0; }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .cal-dia{
    aspect-ratio:1; min-height:44px; border-radius:10px; border:1px solid transparent; background: var(--surface-2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer;
    font:inherit; -webkit-appearance:none; appearance:none; padding:4px 2px; transition: transform .12s ease, box-shadow .12s ease;
  }
  .cal-dia:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20,36,28,0.12); }
  .cal-dia.outro-mes{ opacity:0.35; }
  .cal-dia-num{ font-family:'Manrope', sans-serif; font-weight:700; font-size:13px; font-variant-numeric: tabular-nums; }
  .cal-dia.hoje{ border-color: var(--accent-strong); }
  .cal-dia.selecionado{ background: var(--accent); }
  .cal-dia.selecionado .cal-dia-num{ color: var(--accent-ink); }
  .cal-dia-bolinha{ width:6px; height:6px; border-radius:50%; flex:none; }
  .cal-dia-bolinha.tone-atrasado{ background: var(--danger); }
  .cal-dia-bolinha.tone-pendente{ background: var(--gold); }
  .cal-dia-bolinha.tone-pago{ background: var(--accent-strong); }
  .cal-dia-valor{ font-size:10px; font-weight:700; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
  .cal-dia.selecionado .cal-dia-valor{ color: var(--accent-ink); opacity:0.85; }
  .cal-legenda{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
  .cal-legenda-item{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--ink-soft); }
  .cal-dia-detalhe-titulo{ font-family:'Manrope', sans-serif; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); padding:6px 2px; border-bottom:1px solid var(--border); margin-bottom:10px; }
  .cal-dia-detalhe-titulo.atrasado{ color: var(--danger); }
  .cal-dia-detalhe-titulo.hoje{ color: var(--accent-strong); }

  /* ---- tabs (barra fixa no rodapé da tela, tipo app de celular) ---- */
  .tabs{
    display:flex; align-items:center; justify-content:center; gap:5px;
    flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
    margin:0; background: var(--surface); border:none; border-top:1px solid var(--border); border-radius:0;
    padding:9px 20px;
    position:fixed; left:228px; right:0; bottom:0; z-index:40;
    box-shadow: 0 -8px 20px rgba(15,23,42,.07);
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .app-shell.sidebar-collapsed .tabs{ left:60px; }
  @media (max-width:900px){ .tabs{ left:0; justify-content:flex-start; } }
  .tab-btn{
    font-family:'Public Sans', sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.02em;
    background:transparent; border:none; border-radius:999px; color: var(--ink-soft);
    padding:10px 18px; cursor:pointer; display:flex; align-items:center; gap:6px;
    flex:none; white-space:nowrap;
    transition: background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease;
  }
  .tab-btn svg{ width:14px; height:14px; transition: transform .16s ease; }
  .tab-btn.active{ color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, black)); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
  .tab-btn:hover:not(.active){ color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
  .tab-btn:hover svg{ transform: scale(1.12); }
  .tab-btn:active{ transform: scale(0.96); }

  .search-input{ margin-bottom:14px; max-width:360px; position:relative; }
  .search-wrap{ position:relative; max-width:360px; margin-bottom:16px; }
  .search-wrap svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-soft); }
  .search-wrap input{ padding-left:34px; }

  /* ---- mapeamento de fornecedores (Área do Comprador) ---- */
  .map-section{ margin-top:36px; padding-top:28px; border-top:1px solid var(--border); }
  .map-tag{
    display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
    padding:5px 12px; border-radius:999px; margin-bottom:10px;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  }
  .map-tag svg{ width:13px; height:13px; }
  .map-layout{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:20px; align-items:start; margin-bottom:26px; }
  @media (max-width:760px){ .map-layout{ grid-template-columns:1fr; } }
  .map-list{ display:flex; flex-direction:column; gap:10px; max-height:460px; overflow-y:auto; padding-right:2px; }
  .supplier-card{
    background: var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:13px 15px; cursor:pointer; transition: border-color .15s, background .15s;
  }
  .supplier-card:hover{ border-color: var(--accent); }
  .supplier-card.selected{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
  .supplier-card .top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
  .supplier-card .name{ font-family:'Manrope', sans-serif; font-weight:600; font-size:16px; }
  .supplier-card .meta{ font-size:12px; color: var(--ink-soft); margin-top:3px; }
  .supplier-card .go{ font-size:11px; font-weight:700; color: var(--action); white-space:nowrap; text-transform:uppercase; letter-spacing:0.03em; }
  .map-canvas{
    position:relative; background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border:1px solid var(--border); border-radius:14px; overflow:hidden; aspect-ratio:4/3.2;
  }
  .leaflet-pin-icon{ background:none; border:none; }
  .map-legend{ font-size:11px; color: var(--ink-soft); margin-top:8px; display:flex; gap:14px; flex-wrap:wrap; }
  .map-legend span{ display:inline-flex; align-items:center; gap:5px; }
  .map-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }

  /* ---- documentação (aba do TI) ---- */
  .doc-layout{ display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start; }
  @media (max-width:760px){ .doc-layout{ grid-template-columns:1fr; } }
  .doc-lista{ display:flex; flex-direction:column; gap:8px; }
  .doc-item{
    display:flex; align-items:center; gap:9px; text-align:left; font-family:'Public Sans', sans-serif;
    font-size:13.5px; font-weight:600; color: var(--ink); background: var(--surface); border:1px solid var(--border);
    border-radius:9px; padding:11px 13px; cursor:pointer;
  }
  .doc-item svg{ width:15px; height:15px; flex:none; color: var(--ink-soft); }
  .doc-item:hover{ border-color: var(--accent); }
  .doc-item.selected{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent-strong); }
  .doc-item[disabled]{ opacity:0.5; cursor:not-allowed; }
  .doc-item .meta{ margin-left:auto; }
  .doc-conteudo{
    background: var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:26px 30px; min-height:200px; font-size:14.5px; line-height:1.65; max-width:100%; overflow-x:auto;
  }
  .doc-conteudo h1{ font-family:'Manrope', sans-serif; font-size:22px; margin:0 0 14px; }
  .doc-conteudo h2{ font-family:'Manrope', sans-serif; font-size:18px; margin:26px 0 10px; padding-top:14px; border-top:1px solid var(--border); }
  .doc-conteudo h2:first-child{ border-top:none; padding-top:0; margin-top:0; }
  .doc-conteudo h3{ font-family:'Manrope', sans-serif; font-size:15.5px; margin:18px 0 8px; }
  .doc-conteudo h4{ font-size:14px; margin:14px 0 6px; }
  .doc-conteudo p{ margin:0 0 12px; }
  .doc-conteudo ul, .doc-conteudo ol{ margin:0 0 12px; padding-left:22px; }
  .doc-conteudo li{ margin-bottom:4px; }
  .doc-conteudo ul.checklist{ list-style:none; padding-left:0; }
  .doc-conteudo ul.checklist input{ width:auto; margin-right:6px; }
  .doc-conteudo code{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; background: var(--surface-2); padding:2px 5px; border-radius:4px; }
  .doc-conteudo pre{ background: var(--surface-2); border-radius:8px; padding:14px 16px; overflow-x:auto; margin:0 0 14px; }
  .doc-conteudo pre code{ background:none; padding:0; }
  .doc-conteudo blockquote{ border-left:3px solid var(--accent); margin:0 0 14px; padding:2px 14px; color: var(--ink-soft); }
  .doc-conteudo hr{ border:none; border-top:1px solid var(--border); margin:20px 0; }
  .doc-conteudo table{ width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13.5px; }
  .doc-conteudo th, .doc-conteudo td{ border:1px solid var(--border); padding:7px 10px; text-align:left; }
  .doc-conteudo th{ background: var(--surface-2); font-family:'Manrope', sans-serif; }
  .doc-conteudo a{ color: var(--action); }

  form.novo{
    background: var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:26px 28px; box-shadow: var(--shadow); display:grid; gap:18px;
  }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:600px){ .grid2{ grid-template-columns:1fr; } }
  label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color: var(--ink-soft); letter-spacing:0.01em; }
  label span.req::after{ content:" *"; color: var(--danger); }
  label.checkbox-row{ flex-direction:row; align-items:center; gap:8px; justify-content:flex-start; align-self:flex-end; }
  input, select, textarea{
    font-family:'Public Sans', sans-serif; font-size:14.5px; color: var(--ink);
    background: var(--bg); border:1px solid var(--border); border-radius:6px;
    padding:11px 13px; width:100%;
  }
  input[type="checkbox"]{ width:16px; height:16px; flex:none; accent-color: var(--accent); }
  input:focus, select:focus, textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  textarea{ resize:vertical; min-height:64px; font-family:'Public Sans', sans-serif; }
  .btn{
    font-family:'Public Sans', sans-serif; font-weight:600; font-size:12.5px;
    text-transform:uppercase; letter-spacing:0.05em;
    border:none; border-radius:7px; padding:12px 20px; cursor:pointer;
    transition: filter .15s, transform .15s ease, box-shadow .15s ease; display:inline-flex; align-items:center; gap:7px;
    text-decoration:none;
  }
  .btn svg{ width:14px; height:14px; flex:none; transition: transform .15s ease; }
  .btn:hover{ filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20,36,28,0.14); }
  .btn:hover svg{ transform: translateX(1px); }
  .btn:active{ filter: brightness(0.94); transform: translateY(0); box-shadow:none; }
  .btn-primary{ background: linear-gradient(135deg, var(--action), color-mix(in srgb, var(--action) 78%, black)); color: var(--action-ink); }
  .btn-approve{ background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, black)); color: var(--accent-ink); }
  .btn-reject{ background: transparent; color: var(--danger); border:1px solid var(--danger); }
  .btn-pay{ background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 78%, black)); color: var(--gold-ink); }
  .btn-ghost{ background: transparent; color: var(--ink-soft); border:1px solid var(--border); text-transform:none; letter-spacing:normal; }
  .btn-ghost:hover{ box-shadow: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--ink); }
  .btn[disabled]{ opacity:0.5; cursor:not-allowed; }
  .btn[disabled]:hover{ transform:none; box-shadow:none; filter:none; }
  .form-msg{ font-size:13px; color: var(--accent); min-height:16px; text-transform:none; letter-spacing:normal; }
  .form-msg.error{ color: var(--danger); }
  .form-msg:not(.error):not(:empty){
    display:block; background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius:8px;
    padding:9px 13px; margin-top:2px; font-weight:500;
  }
  .form-msg:not(.error):not(:empty)::before{ content:"✓  "; font-weight:700; }

  .cards{ display:flex; flex-direction:column; gap:16px; }
  .card{
    position:relative; overflow:hidden;
    background: var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:22px 24px; box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left;
    background: linear-gradient(90deg, var(--accent), var(--action), var(--gold));
    transition: transform .25s ease;
  }
  .card:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(20,36,28,0.06), 0 18px 34px rgba(20,36,28,0.12); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
  .card:hover::before{ transform:scaleX(1); }
  .card .top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
  .card .top-left{ display:flex; gap:12px; align-items:flex-start; min-width:0; }
  .card .top-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
  .card .item{ font-family:'Manrope', sans-serif; font-weight:600; font-size:20px; }
  .card .meta{ font-size:12.5px; color: var(--ink-soft); margin-top:2px; }
  .card .meta b{ color: var(--ink); font-weight:600; }
  .card .just{ font-size:13.5px; color: var(--ink); margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
  .card .actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
  .card .inline-form{
    margin-top:16px; padding-top:16px; border-top:1px dashed var(--border);
    display:grid; gap:12px;
  }
  .empty{
    font-size:14px; color: var(--ink-soft); background: var(--surface); border:1px dashed var(--border);
    border-radius:10px; padding:22px; text-align:center;
  }

  /* ---- quadro kanban (aba "Pedidos" do comprador) ---- */
  .kanban-board{ display:flex; gap:14px; align-items:flex-start; overflow-x:auto; padding-bottom:8px; }
  .kanban-col{
    flex:0 0 252px; width:252px; background: var(--surface-2); border:1px solid var(--border); border-radius:14px;
    display:flex; flex-direction:column; max-height:min(74vh, 640px);
  }
  .kanban-col-head{
    display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border);
    font-family:'Manrope', sans-serif; font-weight:700; font-size:12.5px;
  }
  .kanban-col-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
  .kanban-col-dot.tone-gold{ background: var(--gold); }
  .kanban-col-dot.tone-action{ background: var(--action); }
  .kanban-col-dot.tone-accent{ background: var(--accent); }
  .kanban-col-dot.tone-danger{ background: var(--danger); }
  .kanban-col-count{
    margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--ink-soft);
    background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:1px 8px;
  }
  .kanban-col-body{ padding:10px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
  .kanban-card{
    background: var(--surface); border:1px solid var(--border); border-radius:11px; padding:12px 13px;
    display:flex; flex-direction:column; gap:9px; box-shadow: 0 1px 3px rgba(20,36,28,.05);
  }
  .kanban-card .top{ display:flex; gap:9px; align-items:flex-start; }
  .kanban-card .item{ font-family:'Manrope', sans-serif; font-weight:700; font-size:13.5px; line-height:1.3; }
  .kanban-card .meta{ font-size:11.5px; color: var(--ink-soft); margin-top:2px; }
  .kanban-card .avatar{ width:30px; height:30px; border-radius:9px; font-size:12px; box-shadow:none; }
  .kanban-card .price-tag{ align-self:flex-start; font-size:12px; padding:4px 9px; }
  .kanban-card .actions{ display:flex; }
  .kanban-card .actions .btn{ width:100%; justify-content:center; padding:7px 10px; font-size:12px; }
  .kanban-empty{ font-size:12px; color: var(--ink-soft); text-align:center; padding:20px 8px; }
  @media (max-width:900px){ .kanban-col{ flex-basis:220px; width:220px; } }
  .kanban-card{ cursor:pointer; }
  .kanban-card .actions{ cursor:default; }

  /* ---- modal de detalhes do pedido (abre ao clicar num card do kanban) ---- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:200;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal-box{
    background: var(--surface); border-radius:16px; max-width:560px; width:100%; max-height:86vh; overflow-y:auto;
    padding:26px; position:relative; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  }
  .modal-close{
    position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:999px; border:1px solid var(--border);
    background: var(--surface-2); color: var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .modal-close svg{ width:15px; height:15px; }
  #importacao-modal-overlay .modal-box{ max-width:820px; }
  #busca-preco-modal-overlay .modal-box{ max-width:640px; }
  .busca-preco-lista{ display:flex; flex-direction:column; gap:10px; max-height:50vh; overflow-y:auto; }
  .busca-preco-item{
    display:flex; align-items:center; gap:12px; background: var(--bg); border:1px solid var(--border);
    border-radius:10px; padding:10px 12px;
  }
  .busca-preco-item img, .busca-preco-sem-imagem{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex:none; background: var(--surface-2); }
  .busca-preco-info{ flex:1; min-width:0; }
  .busca-preco-titulo{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .busca-preco-valor{ flex:none; text-align:right; font-family:'IBM Plex Mono', monospace; font-weight:700; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
  .modal-close:hover{ color: var(--ink); border-color: var(--accent); }
  #pedido-modal-body .just{ margin-top:14px; padding-top:14px; }

  .avatar{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:40px; height:40px; border-radius:11px;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:16px;
    box-shadow: 0 2px 6px rgba(20,36,28,0.1); transition: transform .18s ease;
  }
  .card:hover .avatar{ transform: scale(1.06); }

  .price-tag{
    font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-weight:700; font-size:15.5px;
    color: var(--ink); background: var(--surface-2); border-radius:8px; padding:6px 12px; white-space:nowrap;
    border:1px solid var(--border);
  }

  .pill{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
    padding:4px 10px; border-radius:999px; white-space:nowrap;
  }
  .pill-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .pill-removable{
    display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color: var(--ink);
    background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 8px 6px 14px;
  }
  .pill-removable button{
    background: var(--surface-2); border:none; border-radius:50%; width:20px; height:20px; flex:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink-soft);
  }
  .pill-removable button:hover{ background: var(--danger); color:#fff; }
  .pill-removable button svg{ width:11px; height:11px; }
  .pill-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
  .pill-dot.pulsa{ animation: pill-pulse 1.6s ease-in-out infinite; }
  @keyframes pill-pulse{
    0%, 100%{ box-shadow: 0 0 0 0 currentColor; opacity:1; }
    50%{ box-shadow: 0 0 0 4px transparent; opacity:0.55; }
  }
  .pill-aprovacao{ background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
  .pill-pagamento{ background: color-mix(in srgb, var(--action) 18%, transparent); color: var(--action); }
  .pill-paga{ background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black)); color: var(--accent-ink); }
  .pill-recusada{ background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
  .pill-nota{ background: color-mix(in srgb, var(--gold) 30%, transparent); color: color-mix(in srgb, var(--gold) 75%, black); }
  .pill-rascunho{ background: var(--surface-2); color: var(--ink-soft); }

  /* ---- order-tracking stepper ---- */
  .steps{ display:flex; align-items:flex-start; gap:0; margin-top:14px; padding-top:13px; border-top:1px solid var(--border); overflow-x:auto; }
  .step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:none; width:72px; text-align:center; }
  .step-dot{
    width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700;
    background: var(--surface-2); color: var(--ink-soft); border:1px solid var(--border);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .step-dot svg{ width:12px; height:12px; }
  .step.done .step-dot{ background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black)); color: var(--accent-ink); border-color: transparent; }
  .step.active .step-dot{
    background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 75%, black)); color: var(--gold-ink); border-color: transparent;
    transform: scale(1.12);
    animation: step-glow 1.8s ease-in-out infinite;
  }
  @keyframes step-glow{
    0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
    50%{ box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 0%, transparent); }
  }
  .step.danger .step-dot{ background: var(--danger); color: #fff; border-color: var(--danger); }
  .step-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; color: var(--ink-soft); transition: color .2s ease; }
  .step.done .step-label, .step.active .step-label, .step.danger .step-label{ color: var(--ink); font-weight:700; }
  .step-line{ flex:1 1 14px; height:3px; border-radius:2px; background: var(--border); margin:11px -2px 0; min-width:10px; transition: background .3s ease; }
  .step-line.done{ background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--gold))); }
  .step-line.danger{ background: var(--danger); }

  /* ---- relatórios: filtros, cards de gráfico, mini gráfico de barras, donut e ranking ---- */
  .rel-filtros{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
  .rel-filtros label{ flex-direction:row; }
  .rel-filtros input[type="date"]{ width:auto; }
  .rel-charts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:22px 0 30px; }
  .rel-card{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; box-shadow: var(--shadow); }
  .rel-card h4{ font-family:'Manrope', sans-serif; font-size:13.5px; font-weight:700; margin:0 0 14px; }
  .rel-bars{ display:flex; align-items:flex-end; gap:8px; height:120px; }
  .rel-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; min-width:0; }
  .rel-bar-fill{ width:100%; max-width:28px; border-radius:5px 5px 0 0; background: var(--accent); min-height:3px; transition: height .3s ease; }
  .rel-bar-label{ font-size:10px; color: var(--ink-soft); text-align:center; }
  .rel-bar-value{ font-family:'IBM Plex Mono', monospace; font-size:9px; color: var(--ink-soft); white-space:nowrap; }
  .rel-donut-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .rel-donut{ width:96px; height:96px; border-radius:50%; flex:none; position:relative; }
  .rel-donut::after{ content:""; position:absolute; inset:15px; border-radius:50%; background: var(--surface); }
  .rel-legend{ display:flex; flex-direction:column; gap:7px; font-size:12px; color: var(--ink); flex:1; min-width:140px; }
  .rel-legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; flex:none; }
  .rel-ranking{ display:flex; flex-direction:column; gap:11px; }
  .rel-rank-row .label{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; margin-bottom:4px; }
  .rel-rank-row .label span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rel-rank-row .label span:last-child{ font-family:'IBM Plex Mono', monospace; color: var(--ink-soft); flex:none; }
  .rel-rank-row .track{ height:7px; border-radius:999px; background: var(--surface-2); overflow:hidden; }
  .rel-rank-row .fill{ height:100%; background: var(--action); border-radius:999px; }

  /* ---- cotação de fornecedores (Nova requisição) ---- */
  .cotacao-box{ margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
  .cotacao-existente-label{ font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px; }
  .cotacao-add-row{ display:grid; grid-template-columns:1.4fr 0.8fr auto; gap:10px; align-items:end; margin-bottom:14px; }
  .cotacao-add-row-2col{ grid-template-columns:1fr auto; }
  @media (max-width:640px){ .cotacao-add-row{ grid-template-columns:1fr; } }
  .fornecedor-novo-box{ margin:6px 0 16px; padding:14px 16px 4px; border:1px dashed var(--border); border-radius:12px; background: var(--surface-2); }
  .fornecedor-novo-box-head{ font-size:12.5px; font-weight:700; color:var(--ink-soft); display:flex; align-items:center; gap:7px; }
  .fornecedor-novo-box-head svg{ width:15px; height:15px; flex:none; color: var(--gold); }
  .fornecedor-novo-box .cotacao-add-row{ margin-bottom:0; }
  .fornecedor-novo-box #fornecedor-inline-form:not(:empty){ padding-bottom:14px; }
  .cotacao-lista{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
  .cotacao-linha{
    display:flex; align-items:center; gap:10px; background: var(--surface); border:1px solid var(--border);
    border-radius:9px; padding:9px 12px; font-size:13.5px;
  }
  .cotacao-linha.venc{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
  .cotacao-linha .nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
  .cotacao-linha .preco{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; white-space:nowrap; }
  .cotacao-linha .remover{ background:transparent; border:none; color: var(--danger); cursor:pointer; padding:2px; display:flex; }
  .cotacao-linha .remover svg{ width:14px; height:14px; }
  .cotacao-status{ font-size:13px; color: var(--ink-soft); margin-top:6px; }
  .permissao-pessoa{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; background: var(--bg); border:1px solid var(--border);
    border-radius:9px; padding:8px 12px; font-size:13.5px;
  }
  .permissao-pessoa .nome{ flex:1; min-width:120px; font-weight:600; }
  .permissao-pessoa select{ width:auto; padding:7px 10px; }
  .cotacao-status.ok{ color: var(--accent-strong); font-weight:600; }
  .link-btn{ background:none; border:none; padding:0; color: var(--action); font-weight:600; text-decoration:underline; cursor:pointer; font-size:inherit; font-family:inherit; }

  /* ---- itens da Nova requisição (lista repetível) ---- */
  .item-nova-linha{ margin-bottom:14px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background: var(--surface); }
  .item-nova-campos{ display:grid; grid-template-columns:1fr 110px 110px auto; gap:10px; align-items:end; }
  @media (max-width:640px){ .item-nova-campos{ grid-template-columns:1fr; } }
  .item-nova-remover{ background:transparent; border:none; color: var(--danger); cursor:pointer; padding:8px; display:flex; align-items:center; }
  .item-nova-remover svg{ width:16px; height:16px; }
  .item-nova-produto:not(:empty){ margin-top:10px; }
  .item-nova-resultados{ display:flex; flex-direction:column; gap:2px; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:9px; padding:4px; background: var(--surface); }

  /* ---- grade comparativa de cotação (Nova requisição) ---- */
  .grade-cotacao-scroll{ overflow-x:auto; margin-bottom:10px; }
  table.grade-cotacao{ width:100%; border-collapse:collapse; font-size:13px; }
  table.grade-cotacao th, table.grade-cotacao td{ border:1px solid var(--border); padding:8px 10px; vertical-align:middle; }
  table.grade-cotacao thead th{ background: var(--surface-2); text-align:center; font-size:12.5px; }
  table.grade-cotacao th.venc, table.grade-cotacao td.venc{ background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  .grade-cotacao-forn-nome{ font-weight:700; margin-bottom:4px; }
  table.grade-cotacao th .remover{ background:transparent; border:none; color: var(--danger); cursor:pointer; padding:2px; display:inline-flex; }
  table.grade-cotacao th .remover svg{ width:13px; height:13px; }
  .grade-cotacao-item{ min-width:170px; }
  .grade-cotacao-item b{ display:block; font-size:13.5px; }
  .grade-cotacao-item .meta{ font-size:11.5px; }
  .grade-cotacao-preco{ display:flex; align-items:center; gap:6px; }
  .grade-cotacao-preco input{ width:90px; padding:6px 8px; }
  .grade-cotacao-buscar{ background:transparent; border:1px solid var(--border); border-radius:7px; color: var(--ink-soft); cursor:pointer; padding:6px; display:flex; flex:none; }
  .grade-cotacao-buscar:hover{ color: var(--accent-strong); border-color: var(--accent); }
  .grade-cotacao-buscar svg{ width:13px; height:13px; }
  .grade-cotacao-total td{ font-weight:700; text-align:center; background: var(--surface-2); }
  .grade-cotacao-total td:first-child{ text-align:left; }
  .grade-cotacao-radio{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; justify-content:center; }
  .grade-cotacao-radio input{ width:auto; }

  /* ---- abrir/fechar detalhes do pedido (Aprovação / Pagamento) ---- */
  .card-head{ cursor:pointer; border-radius:10px; margin:-6px -6px 0; padding:6px; transition: background .15s ease; }
  .card-head:hover{ background: var(--surface-2); }
  .detalhes-toggle{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:8px 0 2px;
    color: var(--action); font-weight:600; font-size:12.5px; cursor:pointer; font-family:inherit;
  }
  .detalhes-toggle:hover{ text-decoration:underline; }
  .detalhes-toggle .chevron{ display:inline-flex; transition: transform .18s ease; }
  .detalhes-toggle .chevron svg{ width:14px; height:14px; }
  .detalhes-toggle .chevron.aberto{ transform: rotate(180deg); }
  .card-detalhes{ animation: fadeIn .18s ease; }

  /* ---- aprovação em massa (diretoria) ---- */
  .card-select{ display:inline-flex; align-items:center; margin-right:4px; cursor:pointer; }
  .card-select input{ width:17px; height:17px; accent-color: var(--action); cursor:pointer; }
  .bulk-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    background: var(--surface-2); border:1px solid var(--border); border-radius:12px;
    padding:12px 16px; margin-bottom:14px; font-size:13px;
  }
  .bulk-toolbar label{ display:flex; align-items:center; gap:8px; font-weight:600; color: var(--ink-soft); }

  /* ---- "Gerar pedido" (Nova requisição): revisão antes de enviar ---- */
  .pedido-preview{
    margin-top:18px; border:1px solid var(--accent); border-radius:14px; overflow:hidden;
    background: var(--surface); box-shadow: var(--shadow); animation: fadeInUp .22s ease;
  }
  .pedido-preview-head{
    display:flex; align-items:center; gap:8px; padding:12px 18px; background: var(--accent); color:#fff;
    font-weight:700; font-size:14px;
  }
  .pedido-preview-head svg{ width:17px; height:17px; flex:none; }
  .pedido-preview-body{ padding:16px 18px; }
  .pedido-preview-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:17px; }
  .pedido-preview-row span{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; color: var(--accent-strong); font-weight:700; white-space:nowrap; }

  /* ---- atalhos (Visão geral do Comprador) ---- */
  .atalhos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
  .atalho-card{
    display:flex; align-items:center; gap:14px; text-align:left; background: var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:18px 20px; cursor:pointer; font-family:inherit; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease;
  }
  .atalho-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
  .atalho-card .link-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
  .atalho-card .link-icon svg{ width:17px; height:17px; }
  .atalho-card .link-icon.tone-accent{ background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-strong); }
  .atalho-card .link-icon.tone-action{ background: color-mix(in srgb, var(--action) 16%, transparent); color: var(--action-strong); }
  .atalho-card .link-icon.tone-gold{ background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
  .atalho-card .item{ font-weight:700; font-size:14px; }
  .atalho-card .meta{ font-size:12.5px; color: var(--ink-soft); margin-top:2px; }

  /* ---- comparativo de cotações (modelo "Comparativo de Cotações", cores do sistema) ---- */
  .comparativo-cotacoes{
    margin-top:16px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background: var(--surface);
  }
  .comp-head{
    display:flex; align-items:center; gap:8px; padding:10px 14px; background: var(--accent); color:#fff;
    font-weight:700; font-size:13px; letter-spacing:.02em;
  }
  .comp-head svg{ width:16px; height:16px; flex:none; }
  .comp-head span:first-of-type{ text-transform:uppercase; }
  .comp-count{ margin-left:auto; font-weight:600; font-size:12px; opacity:.85; text-transform:none; letter-spacing:0; }
  .comp-item-row{
    display:flex; justify-content:space-between; gap:10px; padding:10px 14px; background: var(--surface-2);
    border-bottom:1px solid var(--border); font-size:13px;
  }
  .comp-item-label{ font-weight:600; }
  .comp-item-qtd{ color: var(--ink-soft); flex:none; }
  .comp-cols{ display:flex; flex-wrap:wrap; gap:10px; padding:14px; }
  .comp-col{
    flex:1 1 140px; min-width:130px; border:1px solid var(--border); border-radius:10px; padding:10px 12px;
    display:flex; flex-direction:column; gap:4px; position:relative;
  }
  .comp-col.venc{ border-color: var(--accent); border-width:2px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  .comp-fornecedor{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .comp-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); flex:none; }
  .comp-preco{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size:16px; font-weight:700; }
  .comp-tag{
    align-self:flex-start; font-size:11px; font-weight:700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border-radius:999px; padding:2px 9px; text-transform:uppercase; letter-spacing:.03em;
  }
  .comp-foot{
    display:flex; justify-content:space-between; gap:10px; padding:10px 14px; border-top:1px solid var(--border);
    font-size:13px; color: var(--ink-soft);
  }
  .comp-foot b{ color: var(--ink); font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

  /* ---- catálogo de produtos (aba Produtos, e busca dentro de Nova requisição) ---- */
  .produto-picker{ position:relative; }
  .produto-resultados{
    display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto;
    border:1px solid var(--border); border-radius:10px; background: var(--surface); padding:6px; margin-top:6px; box-shadow: var(--shadow);
  }
  .produto-linha{
    display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; text-align:left; background:transparent; border:none; width:100%;
  }
  .produto-linha:hover{ background: var(--surface-2); }
  .produto-thumb{
    width:34px; height:34px; border-radius:7px; flex:none; object-fit:cover; background: var(--surface-2); border:1px solid var(--border);
  }
  .produto-thumb-fallback{
    width:34px; height:34px; border-radius:7px; flex:none; background: var(--surface-2); color: var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .produto-thumb-fallback svg{ width:16px; height:16px; }
  .produto-linha .info{ min-width:0; }
  .produto-linha .nome{ font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .produto-linha .meta{ font-size:11.5px; color: var(--ink-soft); }
  .produto-selecionado{
    display:flex; align-items:center; gap:10px; background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:10px; padding:8px 10px; margin-top:8px;
  }
  .produto-selecionado .limpar{ margin-left:auto; background:transparent; border:none; color: var(--danger); cursor:pointer; display:flex; padding:4px; }
  .produto-selecionado .limpar svg{ width:14px; height:14px; }
  .produto-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
  .produto-card{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow: var(--shadow); }
  .produto-card .produto-thumb, .produto-card .produto-thumb-fallback{ width:100%; height:110px; border-radius:9px; margin-bottom:10px; }
  .produto-card .produto-thumb-fallback svg{ width:26px; height:26px; }
  .produto-card .nome{ font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px; }
  .produto-card .meta{ font-size:12px; color: var(--ink-soft); margin-top:3px; }
  .produto-prazo-info{ margin-top:8px; }
  .produto-prazo-info .pill{ font-size:11px; }
  .produto-card .codigo{ font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--ink-soft); }

  table.hist{ width:100%; border-collapse:collapse; background: var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow: var(--shadow); font-size:13.5px; }
  table.hist th, table.hist td{ text-align:left; padding:11px 13px; border-bottom:1px solid var(--border); vertical-align:top; }
  table.hist thead th{ font-weight:600; letter-spacing:0.05em; text-transform:uppercase; font-size:10.5px; color: var(--ink-soft); background: var(--surface-2); }
  table.hist tbody tr:last-child td{ border-bottom:none; }
  table.hist td.num{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
  .hist-wrap{ overflow-x:auto; }

  .db-status{ font-size:12.5px; color: var(--ink-soft); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
  .db-status .dot{ width:7px; height:7px; border-radius:50%; background: var(--ink-soft); }
  .db-status.ok .dot{ background: var(--accent); }
  .db-status.err .dot{ background: var(--danger); }

  footer.foot{ margin-top:12px; padding-top:18px; border-top:1px solid var(--border); font-size:12px; color: var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; }

  /* ---- motion: subtle entrance + feedback animations ---- */
  html{ scroll-behavior:smooth; }
  @keyframes fadeInUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes popCheck{ 0%{ transform:scale(0.6); opacity:0; } 60%{ transform:scale(1.14); opacity:1; } 100%{ transform:scale(1); } }
  @keyframes spinIn{ from{ transform:rotate(-8deg) scale(0.9); opacity:0; } to{ transform:rotate(0) scale(1); opacity:1; } }

  .card, .stat-tile, .supplier-card, .how-step{ animation: fadeInUp .38s ease both; }
  .tab-pane, .ti-tab-panel{ animation: fadeIn .3s ease both; }
  header.hero{ animation: fadeInUp .5s ease both; }
  .login-gate{ animation: fadeInUp .5s .08s ease both; }
  .status-banner{ animation: fadeInUp .35s ease both; }
  .status-banner .status-check svg{ animation: popCheck .5s .12s ease both; }
  .topbar-avatar{ animation: spinIn .4s ease both; }
  .help-float{ animation: fadeIn .6s .3s ease both; }

  .card, .stat-tile, .how-step{ transition: transform .16s ease, box-shadow .16s ease; }
  .card:hover, .stat-tile:hover, .how-step:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,36,28,0.12), var(--shadow); }
  .supplier-card{ transition: transform .14s ease, border-color .15s ease, background .15s ease; }
  .supplier-card:hover{ transform: translateY(-1px); }

  .btn, .tab-btn, .sidebar-link, .theme-toggle, .landing-cta, .sidebar-collapse{ transition: filter .15s, background .15s, color .15s, transform .1s, box-shadow .15s; }
  .btn:active{ transform: scale(0.96); }
  .tab-btn:active, .sidebar-link:active{ transform: scale(0.98); }
  .form-msg:not(.error):not(:empty){ animation: fadeInUp .3s ease both; }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important;
    }
  }

  [hidden]{ display:none !important; }