/* ============================================
   ARVEN STUDIO v2 — GLASSMORPHISM MONOCHROME
   Rigor: dark mono + UM accent rosa-roxo (focal)
   Glass real: backdrop blur + edge highlight
   ============================================ */

/* ===== MODO LIGHT (overrides) ===== */
html[data-theme="light"]{
  --bg:#f5f5f7;
  --bg-2:#ffffff;
  --surface:rgba(255,255,255,.85);
  --surface-2:rgba(255,255,255,.95);
  --surface-3:rgba(255,255,255,1);
  --surface-soft:rgba(0,0,0,.03);
  --surface-inset:rgba(0,0,0,.05);
  --edge:rgba(0,0,0,.08);
  --edge-2:rgba(0,0,0,.14);
  --line:rgba(0,0,0,.06);
  --line-2:rgba(0,0,0,.10);
  --text:#0c0e16;
  --text-dim:#3a3d4a;
  --text-muted:#6e7280;
  --text-faint:#9097a0;
}
html[data-theme="light"] body{background:linear-gradient(180deg,#f5f5f7 0%,#ebebef 100%)}
html[data-theme="light"] .sidebar{background:#ffffff;border-right:1px solid rgba(0,0,0,.06)}
html[data-theme="light"] .arven-logo-display{color:#0c0e16!important;text-shadow:none!important}
html[data-theme="light"] .card,
html[data-theme="light"] .receita-card{background:#ffffff;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 12px rgba(0,0,0,.04)}
html[data-theme="light"] .brand-mark{background:#0c0e16}
html[data-theme="light"] .brand-mark img{filter:invert(1)}
html[data-theme="light"] .nav-item{color:#6e7280}
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item.active{color:#0c0e16;background:rgba(0,0,0,.05)}
:root{
  /* Surfaces — very dark, glassy */
  --bg:#0c0e16;
  --bg-2:#10131c;
  --surface:rgba(255,255,255,.025);
  --surface-2:rgba(255,255,255,.04);
  --surface-3:rgba(255,255,255,.06);
  --surface-soft:rgba(255,255,255,.03);
  --surface-inset:rgba(0,0,0,.25);

  --edge:rgba(255,255,255,.06);
  --edge-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.04);
  --line-2:rgba(255,255,255,.08);

  /* Text */
  --text:#f4f5f8;
  --text-dim:#b3b8c5;
  --text-muted:#787e8d;
  --text-faint:#52596a;

  /* Accent — silver-pearl premium (era pink-purple) */
  --c-primary:#e8ebf2;
  --c-primary-2:#a8aebf;
  --c-primary-ink:#0c0e16;   /* texto escuro pra usar EM CIMA do accent claro */
  --grad-primary:linear-gradient(135deg, #ffffff 0%, #c5c9d6 50%, #8d92a3 100%);
  --grad-primary-soft:linear-gradient(135deg, rgba(255,255,255,.12), rgba(200,210,230,.08));
  --glow-primary:0 8px 26px -6px rgba(200,210,230,.35), 0 0 0 1px rgba(255,255,255,.08);

  /* Semantic */
  --c-success:#3edcc0;
  --c-warn:#ffb547;
  --c-danger:#ff5e7a;

  /* Glass shadows */
  --glass-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  --glass-shadow-lg:0 16px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --neu-out-sm:0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  --neu-in:inset 4px 4px 10px rgba(0,0,0,.35), inset -3px -3px 8px rgba(255,255,255,.018);
  --neu-in-soft:inset 2px 2px 5px rgba(0,0,0,.25), inset -2px -2px 4px rgba(255,255,255,.018);

  --r-xl:28px;
  --r-lg:22px;
  --r:18px;
  --r-sm:13px;
  --r-pill:999px;

  --pad-main: clamp(16px, 2vw, 32px);
  --gap: clamp(14px, 1.3vw, 22px);

  --tx-fast:.16s cubic-bezier(.4,0,.2,1);
  --tx:.24s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
*:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:8px}

html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Poppins',-apple-system,system-ui,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;letter-spacing:-.005em;
  font-weight:400; /* Poppins Regular default pra textos menores */
}

/* === HIERARQUIA POPPINS === */
/* Títulos: SemiBold (600) */
h1, h2, h3, .card-title, .page-h h1, .hero-title, .login-card h2,
.title, .receita-card .rc-amount, .donut-center .val, .ins-kpi-big {
  font-weight:600;
}
/* Subtítulos / labels fortes: Medium (500) */
h4, h5, .sub, .l, .label, .btn-primary, .btn-ghost, .nav-item, .tab,
.cf-chip, .pmini, .badge, .cat-name, .li-name, .li-amt,
strong, b { font-weight:500; }
/* Botões primary mais marcados */
.btn-primary, .btn-login { font-weight:600; }
/* Numbers usam Poppins SemiBold pra destacar */
.num { font-weight:600; font-variant-numeric:tabular-nums; }
/* Texto menor — Regular */
.li-sub, .li-last, small, .meta, .tagline, .ci-last { font-weight:400; }
body{
  background:
    /* Topo direito — aura roxa pearl PRONUNCIADA */
    radial-gradient(1600px 1000px at 100% -10%, rgba(168,128,255,.32), transparent 55%),
    /* Esquerda meio — rosé pearl forte */
    radial-gradient(1200px 800px at -10% 30%, rgba(255,128,180,.20), transparent 55%),
    /* Centro inferior — blue depth */
    radial-gradient(1100px 700px at 50% 115%, rgba(80,130,255,.20), transparent 55%),
    /* Direita centro — accent magenta */
    radial-gradient(800px 600px at 115% 60%, rgba(220,140,255,.16), transparent 60%),
    /* Linear base — profundidade vertical mais marcada */
    linear-gradient(180deg, #1a1d2e 0%, #11131e 50%, #0a0c14 100%),
    var(--bg);
  min-height:100vh;
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;transition:var(--tx-fast)}
button:active{transform:scale(.97)}
input,textarea,select{font-family:inherit}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.app > *{animation:fadeUp .4s ease both}

/* ============ APP SHELL ============ */
.app{display:block;min-height:100vh;position:relative}

/* ============ SIDEBAR (fixa — não scrola com a página) ============ */
.sidebar{
  padding:24px 0 28px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  position:fixed;top:0;left:0;width:96px;height:100vh;z-index:50;
  background:var(--bg);
  overflow-y:auto;
  overflow-x:hidden;
}
/* scrollbar fininha invisível na sidebar */
.sidebar::-webkit-scrollbar{width:0;display:none}
/* Brand-mark — logo Arven real (JPG) circular no topo do sidebar */
.brand-mark{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#fff;
  margin-bottom:18px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  flex-shrink:0;
}
.brand-mark img{width:78%;height:78%;object-fit:contain}
.brand-mark:hover{transform:scale(1.06) rotate(-3deg)}

/* Arven wordmark — logo oficial em Cinzel (serif Trajan-inspired) */
.brand-name{display:none}  /* removido do sidebar — agora aparece no topbar */

/* Topbar wordmark — texto "Arven" em Cinzel (logo SVG fica no sidebar) */
.arven-logo-display{
  font-family:'Cinzel','Cormorant Garamond','Times New Roman',serif;
  font-weight:400;
  font-size:clamp(26px, 2.4vw, 34px);
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.30em;
  text-indent:.30em;
  line-height:1;
  display:inline-block;
  padding:6px 0;
  text-shadow:0 0 30px rgba(255,255,255,.10);
  font-feature-settings:"liga" 1, "kern" 1;
  -webkit-font-smoothing:antialiased;
  transition:var(--tx-fast);
}
.arven-logo-display:hover{text-shadow:0 0 40px rgba(255,255,255,.18)}
.arven-logo-display.sm{font-size:16px;letter-spacing:.26em;text-indent:.26em}
/* Linha divisória vertical depois do logo */
.brand-divider{
  display:inline-block;width:1px;height:32px;
  background:linear-gradient(180deg, transparent, var(--edge-2), transparent);
  margin:0 12px 0 16px;
  vertical-align:middle;
}

/* Variante compacta — pra páginas internas */
.arven-logo-display.sm{
  font-size:18px;letter-spacing:.30em;
  padding:0;margin:0;text-shadow:none;
}

/* Container brand pra páginas internas (acima do .page-h) */
.page-brand{
  margin-bottom:18px;padding-bottom:18px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;
}
.page-brand::before{
  content:"";width:32px;height:32px;border-radius:50%;
  background:#fff url(/assets/arven-logo.jpg) center/72% no-repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  flex-shrink:0;
}

/* ===== Transições de entrada (cards aparecem em cascata) ===== */
@keyframes arven-fadein-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes arven-scale-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.main > * { animation: arven-fadein-up .5s cubic-bezier(.16,1,.3,1) both; }
.main > *:nth-child(1) { animation-delay: .00s }
.main > *:nth-child(2) { animation-delay: .05s }
.main > *:nth-child(3) { animation-delay: .10s }
.main > *:nth-child(4) { animation-delay: .15s }
.main > *:nth-child(5) { animation-delay: .20s }
.main > *:nth-child(6) { animation-delay: .25s }
.main > *:nth-child(7) { animation-delay: .30s }
.main > *:nth-child(8) { animation-delay: .35s }
.dash .card,
.dash > div > .card,
.lists > .card { animation: arven-scale-in .55s cubic-bezier(.16,1,.3,1) both; }
.dash .card:nth-child(1){ animation-delay:.10s } .dash .card:nth-child(2){ animation-delay:.15s }
.dash .card:nth-child(3){ animation-delay:.20s } .dash .card:nth-child(4){ animation-delay:.25s }

/* Hover suave em todos os cards */
.card { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-2px); }

/* Nav itens sidebar — entrada com delay */
.sidebar .nav-item { animation: arven-fadein-up .4s cubic-bezier(.16,1,.3,1) both; }
.sidebar .nav-item:nth-child(2){animation-delay:.04s}
.sidebar .nav-item:nth-child(3){animation-delay:.08s}
.sidebar .nav-item:nth-child(4){animation-delay:.12s}
.sidebar .nav-item:nth-child(5){animation-delay:.16s}
.sidebar .nav-item:nth-child(6){animation-delay:.20s}
.sidebar .nav-item:nth-child(7){animation-delay:.24s}
.sidebar .nav-item:nth-child(8){animation-delay:.28s}
.sidebar .nav-item:nth-child(9){animation-delay:.32s}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .main > *, .dash .card, .sidebar .nav-item { animation: none !important; }
}

/* ===== Filtros globais — visual mais bonito ===== */
details.ms-detail summary{
  transition:background .15s, border-color .15s, transform .15s;
}
details.ms-detail summary:hover{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.18)!important;
}
details.ms-detail[open] summary{
  background:rgba(62,220,192,.10)!important;
  border-color:rgba(62,220,192,.30)!important;
  color:#3edcc0!important;
}
details.ms-detail[open] summary span:first-child span:first-child{color:#3edcc0!important}
.cf-select{transition:border-color .15s, background .15s}
.cf-select:hover{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.18)!important}

/* Dashboard polish */
.receita-card{padding:28px!important}
.receita-card .rc-amount{font-size:clamp(40px,5vw,52px)!important;margin-top:4px}
.receita-card .rc-meta{margin-top:24px;padding-top:24px;gap:18px}
.receita-card .rc-meta .item{flex:1}
.receita-card .rc-meta .item .l{font-size:10px;color:rgba(255,255,255,.50)}
.receita-card .rc-meta .item .v{font-size:16px;margin-top:6px}

.cats-grid{gap:16px}
.cat-card{padding:22px 18px!important;min-height:130px;justify-content:space-between}
.cat-card .cat-val{font-size:30px!important;font-weight:800;letter-spacing:-.025em}
.cat-card .cat-name{font-size:11px}

#ops-kpis .card{padding:22px 20px}
#ops-kpis .card .num{font-size:28px}

.dash .card{border-radius:18px!important}
.dash h3{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.dash .lists{gap:18px!important}
.dash .li{padding:12px;border-radius:14px}
.dash .li:hover{background:rgba(255,255,255,.04)}

.donut-card{padding:28px!important}
.donut-card .val{font-size:38px!important}

/* ===== MOBILE APP REDESIGN (≤900px) — fluido, intuitivo, igual app nativo ===== */
@media (max-width: 900px){
  html, body{ overscroll-behavior-y: contain; }
  body{
    background: var(--bg)!important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* App container */
  .app{ display: block!important; min-height: 100vh; min-height: 100dvh }

  /* ===== TOP APP BAR (igual celular) ===== */
  .main{
    margin-left: 0!important;
    padding: 0!important;
    padding-top: 64px!important;  /* espaço pro topbar fixo */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0))!important;
    min-height: 100vh; min-height: 100dvh;
    overflow-x: hidden;
  }

  /* Topbar do dashboard: vira app bar fixa */
  .topbar{
    position: fixed!important;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 16px!important;
    background: rgba(12,14,22,.92)!important;
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.06);
    z-index: 90;
    display: flex!important;
    align-items: center!important;
    gap: 10px!important;
    flex-direction: row!important;
  }
  .arven-logo-display{
    font-size: 18px!important;
    letter-spacing: .22em!important;
    flex-shrink: 0;
  }
  .brand-divider{ display: none!important }
  .welcome{ display: none!important }
  .topbar-right{
    margin-left: auto!important;
    width: auto!important;
    gap: 6px!important;
    flex-wrap: nowrap!important;
  }
  .topbar .search{ display: none!important }
  .topbar .icon-btn, .topbar .me-avatar{
    width: 36px!important; height: 36px!important;
    flex-shrink: 0;
  }

  /* Page brand (logo header em páginas internas) */
  .page-brand{
    position: fixed!important;
    top: 0; left: 0; right: 0;
    height: 56px!important;
    margin: 0!important;
    padding: 0 16px!important;
    background: rgba(12,14,22,.92)!important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    z-index: 90;
    display: flex; align-items: center;
  }
  .page-brand::before{ display: none!important }
  .page-brand a{ font-size: 18px!important; letter-spacing: .22em!important }

  /* Page header content */
  .page-h{
    padding: 16px;
    flex-direction: column!important;
    align-items: stretch!important;
    gap: 12px!important;
  }
  .page-h h1{ font-size: 24px!important; margin: 0!important; letter-spacing: -.02em }
  .page-h .sub{ font-size: 12.5px!important }
  .page-h .actions{
    flex-wrap: nowrap!important;
    overflow-x: auto;
    gap: 6px!important;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .actions button, .actions .btn-ghost, .actions .btn-primary{
    flex-shrink: 0;
    padding: 9px 14px!important;
    font-size: 12.5px!important;
    white-space: nowrap;
  }

  /* ===== BOTTOM NAV BAR (estilo iOS/Android) ===== */
  .sidebar{
    position: fixed!important;
    top: auto!important; bottom: 0!important;
    left: 0!important; right: 0!important;
    width: 100%!important;
    height: 76px!important;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0))!important;
    flex-direction: row!important;
    align-items: center!important;
    justify-content: space-around!important;
    gap: 0!important;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(12,14,22,.96)!important;
    backdrop-filter: blur(24px) saturate(160%);
    z-index: 95;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .sidebar::-webkit-scrollbar{ display: none }
  .sidebar .brand-mark,
  .sidebar .brand-name,
  .sidebar .nav-spacer,
  .sidebar .nav-item.logout{ display: none!important }
  .sidebar .nav-item{
    width: auto!important;
    height: auto!important;
    min-width: 56px;
    padding: 8px 6px!important;
    border-radius: 12px!important;
    background: transparent!important;
    box-shadow: none!important;
    flex-shrink: 0;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    color: rgba(255,255,255,.50)!important;
    transition: color .2s, transform .2s;
  }
  .sidebar .nav-item svg{ width: 22px!important; height: 22px!important; stroke-width: 1.8 }
  .sidebar .nav-item:hover{ color: rgba(255,255,255,.85)!important; transform: scale(1.08) }
  .sidebar .nav-item.active{
    color: #fff!important;
    background: transparent!important;
  }
  .sidebar .nav-item.active::before{
    content: ""; position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px;
    background: linear-gradient(90deg, #3edcc0, #c5c9d6);
    border-radius: 0 0 6px 6px;
  }
  .sidebar .nav-item .badge{
    top: 4px!important; right: 4px!important;
    width: 7px!important; height: 7px!important;
    padding: 0!important; font-size: 0!important;
    background: #ff5e7a!important;
    box-shadow: 0 0 6px #ff5e7a;
  }

  /* ===== DASHBOARD: cards full-width, sem grid complexo ===== */
  .dash{ grid-template-columns: 1fr!important; padding: 0 16px }
  .col-right{ position: static!important; margin-top: 16px }
  .col-main, .col-right{ display: flex; flex-direction: column; gap: 14px }
  .lists{ grid-template-columns: 1fr!important; gap: 14px!important }
  .stats-cards, .stats-row, .op-hero, #ops-kpis, .ins-grid.c4, .ins-grid.c3, .ins-grid.c2{
    grid-template-columns: 1fr 1fr!important;
    gap: 10px!important;
  }
  #global-filters{
    margin: 0 16px var(--gap)!important;
    flex-direction: row!important;
    flex-wrap: wrap!important;
    align-items: center!important;
    padding: 10px!important;
    gap: 8px!important;
  }
  #global-filters > div:first-of-type{ display: none!important } /* esconde label "Filtros" no mobile */
  #global-filters details.ms-detail, #global-filters details.ms-detail summary{ width: auto!important; min-width: 0!important }
  #gf-period{ overflow-x: auto; flex-wrap: nowrap!important }
  #gf-agent-status{ flex-shrink: 0; margin-left: 0!important; font-size: 11px!important }
  #global-filters button, #global-filters details summary{ font-size: 12px!important; padding: 6px 10px!important }

  /* Cards padding mobile */
  .card{ border-radius: 16px!important }
  .receita-card{ padding: 22px 20px!important }
  .receita-card .rc-amount{ font-size: 38px!important }
  .receita-card .rc-meta{ margin-top: 18px; padding-top: 18px; gap: 12px!important }
  .receita-card .rc-meta .item .l{ font-size: 9.5px!important }
  .receita-card .rc-meta .item .v{ font-size: 14px!important }
  .cat-card{ padding: 18px 14px!important; min-height: 100px!important }
  .cat-card .cat-val{ font-size: 22px!important }
  .donut-card{ padding: 22px!important }

  /* ===== CONVERSAS: SPA full-screen com transição ===== */
  .conv-layout{
    grid-template-columns: 1fr!important;
    height: calc(100vh - 132px)!important;  /* 56 topbar + 76 bottom nav */
    height: calc(100dvh - 132px)!important;
    position: relative;
  }
  .conv-list-card{
    max-height: none!important;
    height: 100%;
    border-radius: 0!important;
  }
  .conv-list-head{ padding: 14px 16px!important }
  .conv-list-head h2{ font-size: 22px!important; margin-bottom: 12px!important }
  .conv-search{ margin-bottom: 12px }
  .conv-search input{ font-size: 14px!important }
  /* Chat full-screen quando ativo */
  .chat-card{
    position: fixed!important;
    top: 56px; left: 0; right: 0; bottom: 76px;
    z-index: 88;
    border-radius: 0!important;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
    display: none;
  }
  .chat-card.chat-open{ display: flex!important; transform: translateX(0); }
  .chat-head{ padding: 12px 16px!important }
  .chat-head .acts button{ width: 36px!important; height: 36px!important }
  .chat-head::before{
    content: "‹"; font-size: 28px; color: #fff;
    margin-right: 8px; line-height: 1;
    cursor: pointer; padding: 0 8px;
  }
  .client-card{ display: none!important }

  /* ===== KANBAN serviços ===== */
  .kanban{
    grid-template-columns: 1fr!important;
    min-height: auto!important;
  }
  .col{ min-height: auto }
  .col-body{ min-height: 120px }
  .svc-toolbar{
    flex-direction: row!important;
    flex-wrap: nowrap!important;
    overflow-x: auto!important;
    gap: 8px!important;
    margin: 0 -16px 12px!important;
    padding: 0 16px!important;
  }
  .svc-toolbar > *{ flex-shrink: 0 }
  .svc-filter{ overflow-x: auto; white-space: nowrap; flex-wrap: nowrap!important }
  .svc-filter button{ flex-shrink: 0 }

  /* ===== CLIENTES grid ===== */
  .cli-grid{ grid-template-columns: 1fr!important }
  .cli-toolbar{ flex-direction: column!important; gap: 8px!important; align-items: stretch!important }
  .cli-search{ max-width: none!important }

  /* ===== CONFIG ===== */
  .cfg-layout{ grid-template-columns: 1fr!important }
  .cfg-side{
    position: sticky!important; top: 56px;
    height: auto!important; max-height: none!important;
    border-radius: 0!important;
    margin: -16px -16px 16px!important;
    padding: 8px 12px!important;
    overflow-x: auto;
    display: flex!important;
    flex-direction: row!important;
    gap: 6px!important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(12,14,22,.92)!important;
    z-index: 50;
  }
  .cfg-side h4{ display: none }
  .cfg-side a{
    margin-bottom: 0!important;
    padding: 6px 12px!important;
    border-radius: 99px!important;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px!important;
  }
  .cfg-card{ padding: 20px 16px!important; border-radius: 14px!important }
  .field{ grid-template-columns: 1fr!important; gap: 6px!important }
  .field .l{ padding-top: 0!important }

  /* ===== INSIGHTS abas ===== */
  .nt-layout{ grid-template-columns: 1fr!important }
  .av-hero{ grid-template-columns: 1fr!important }
  .tabs{
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap!important;
    margin: 0 -16px 16px!important;
    padding: 0 16px!important;
  }
  .tab{
    flex-shrink: 0;
    padding: 10px 16px!important;
    font-size: 12.5px!important;
  }
  .av-big{ padding: 24px 18px!important }
  .av-big .score{ font-size: 60px!important }

  /* Operação */
  .op-feed{ gap: 10px!important }
  .op-alert{ grid-template-columns: 38px 1fr!important; padding: 14px!important }
  .op-alert .op-actions{ grid-column: 1 / -1; margin-top: 8px; justify-content: flex-end }

  /* Modal mobile = bottom sheet */
  .arven-modal-bg .arven-modal,
  .modal{
    width: 100vw!important;
    max-width: none!important;
    border-radius: 24px 24px 0 0!important;
    padding: 24px 20px 32px!important;
    margin-bottom: 0!important;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
  }
  .arven-modal-bg, .modal-bg{
    align-items: flex-end!important;
    padding: 0!important;
  }

  /* Bell panel mobile = quase fullscreen */
  #bell-panel{ width: 100vw!important; max-width: none!important }

  /* Heatmaps mobile */
  #ins-hours, #dayhour-heatmap{ overflow-x: auto }

  /* Footer help texto */
  #page-help-footer{ margin: 16px!important; padding: 18px!important; font-size: 12.5px!important }
}

/* Mobile pequeno ≤640px */
@media (max-width: 640px){
  .stats-cards, .stats-row, .op-hero, #ops-kpis, .ins-grid.c4{ grid-template-columns: 1fr!important }
  .roles-grid{ grid-template-columns: 1fr!important }
  .cats-grid{ grid-template-columns: 1fr 1fr!important }
  .receita-card .rc-meta{ flex-direction: column; gap: 10px!important }
  .receita-card .rc-meta .item{ width: 100% }
}

/* Print: limpa visual pra PDF */
@media print {
  .sidebar, .topbar, #bell-panel, #bell-bg, #pwa-banner, #push-banner, #global-filters, #page-help-footer, .icon-btn, .me-avatar, .search { display: none !important; }
  body, html { background: #fff !important; color: #000 !important; }
  .main { margin-left: 0 !important; padding: 20px !important; }
  .card { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; color: #000 !important; }
  .num, h1, h2, h3, .ti, .v { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .sub, .l, .li-sub { color: #555 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Wordmark Arven para uso no topbar/headers (versão horizontal grande) */
.arven-logo{
  font-family:'Cinzel','Cormorant Garamond',serif;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--text);
  text-transform:uppercase;
  line-height:1;
  display:inline-block;
}
.arven-logo.lg{font-size:28px;letter-spacing:.28em}
.arven-logo.md{font-size:18px;letter-spacing:.24em}
.arven-logo.sm{font-size:13px;letter-spacing:.20em}

.nav-item{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  color:var(--text-muted);transition:var(--tx);position:relative;
  background:transparent;
}
.nav-item:hover{color:var(--text);background:var(--surface-2)}
.nav-item.active{
  color:var(--c-primary-ink);
  background:var(--grad-primary);
  box-shadow:var(--glow-primary);
}
.nav-item svg{width:20px;height:20px;stroke-width:1.7}
.nav-item .badge{
  position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 5px;border-radius:9px;
  background:var(--c-primary);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;
}
.nav-spacer{flex:1}
.nav-item.logout:hover{color:var(--c-danger);background:var(--surface-2)}

/* ============ MAIN — compensa sidebar fixa ============ */
.main{
  padding:var(--pad-main);
  min-width:0;width:auto;max-width:none;
  margin-left:96px;  /* match sidebar width */
}

/* ============ GLASS CARDS ============ */
.card{
  background:
    /* Highlight forte topo-esquerda */
    radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.13) 0%, transparent 50%),
    /* Wash roxo pearl no topo-direita */
    radial-gradient(100% 80% at 100% 0%, rgba(168,128,255,.12) 0%, transparent 55%),
    /* Hint rosé no canto inferior-direito */
    radial-gradient(80% 80% at 100% 100%, rgba(255,128,180,.06) 0%, transparent 55%),
    /* Linear vertical — bem visível */
    linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.015) 100%),
    rgba(35, 38, 52, .55);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--edge-2);
  border-radius:var(--r-lg);
  padding:22px;
  box-shadow:var(--glass-shadow);
  position:relative;
  transition:var(--tx);
  overflow:hidden;
}
.card.lg{border-radius:var(--r-xl);padding:26px}
/* Brilho horizontal no topo (linha de luz forte) */
.card::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  pointer-events:none;z-index:1;
}
/* Vinheta marcada no canto inferior */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 100% at 100% 100%, rgba(0,0,0,.28), transparent 55%);
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;position:relative;z-index:1}
.card-title{font-weight:700;font-size:15px;color:var(--text);letter-spacing:-.015em}
.card-title .sub{font-weight:400;color:var(--text-muted);font-size:12.5px;margin-top:3px}
.card-action{
  font-size:12.5px;color:var(--text-muted);transition:var(--tx-fast);
  padding:5px 12px;border-radius:var(--r-pill);
}
.card-action:hover{color:var(--text);background:var(--surface-2)}
.card-action.icon{width:32px;height:32px;padding:0;display:grid;place-items:center}
.card-action.icon svg{width:16px;height:16px;stroke-width:2}

/* ============ TOPBAR ============ */
.topbar{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.welcome{display:flex;flex-direction:column;gap:4px;min-width:0}
.welcome h1{font-size:clamp(22px,2.2vw,30px);font-weight:700;margin:0;letter-spacing:-.03em;line-height:1.1}
.welcome .greet{color:var(--text-muted);font-size:13px}
.welcome em{font-style:normal;color:var(--text);font-weight:800}

.topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}
.search{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:var(--surface);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--edge);
  border-radius:var(--r-pill);color:var(--text-muted);
  min-width:240px;flex:1;max-width:380px;transition:var(--tx-fast);
}
.search:focus-within{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(229,74,163,.12)}
.search input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);outline:none;font-size:13.5px}
.search input::placeholder{color:var(--text-faint)}
.search svg{width:17px;height:17px;flex-shrink:0;stroke-width:2.2;color:var(--text-muted)}

.icon-btn{
  width:44px;height:44px;border-radius:50%;
  background:var(--surface);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--edge);
  color:var(--text-dim);
  display:grid;place-items:center;transition:var(--tx-fast);position:relative;flex-shrink:0;
}
.icon-btn:hover{color:var(--text);background:var(--surface-2)}
.icon-btn svg{width:18px;height:18px;stroke-width:1.8}
.icon-btn .badge{
  position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--c-primary);
  box-shadow:0 0 0 2px var(--bg), 0 0 8px var(--c-primary);
  animation:pulse 2.4s ease-in-out infinite;
}

.me-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--grad-primary);
  display:grid;place-items:center;color:var(--c-primary-ink);font-weight:700;font-size:14px;
  box-shadow:var(--glow-primary), inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;flex-shrink:0;
}

/* ============ AVATAR — agora MONOCROMO ============ */
.av{
  border-radius:50%;display:grid;place-items:center;
  font-weight:700;color:var(--text);flex-shrink:0;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;font-size:13px;letter-spacing:-.01em;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
/* todas as v0..v7 antigas → mesma aparência glass mono */
.av.v0,.av.v1,.av.v2,.av.v3,.av.v4,.av.v5,.av.v6,.av.v7,
.av.pink,.av.cyan,.av.lime,.av.orange,.av.gold,.av.purple,.av.blue,.av.coral{
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02))!important;
  color:var(--text)!important;
}

/* ============ PILLS ============ */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;line-height:1.4;letter-spacing:-.005em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pill .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.neutral{background:var(--surface-2);color:var(--text-dim);border:1px solid var(--edge)}
.pill.primary{background:var(--grad-primary-soft);color:#fff;border:1px solid rgba(229,74,163,.25)}
.pill.success{background:rgba(62,220,192,.10);color:var(--c-success);border:1px solid rgba(62,220,192,.18)}
.pill.warn{background:rgba(255,181,71,.10);color:var(--c-warn);border:1px solid rgba(255,181,71,.18)}
.pill.danger{background:rgba(255,94,122,.10);color:var(--c-danger);border:1px solid rgba(255,94,122,.18)}
.pill.pink,.pill.purple,.pill.blue{background:var(--surface-2);color:var(--text-dim);border:1px solid var(--edge)}
.pill.cyan,.pill.lime{background:rgba(62,220,192,.10);color:var(--c-success);border:1px solid rgba(62,220,192,.18)}
.pill.orange,.pill.gold{background:rgba(255,181,71,.10);color:var(--c-warn);border:1px solid rgba(255,181,71,.18)}
.pill.coral{background:rgba(255,94,122,.10);color:var(--c-danger);border:1px solid rgba(255,94,122,.18)}

/* ============ BUTTONS ============ */
.btn-primary{
  padding:11px 20px;border-radius:var(--r-pill);font-size:13px;font-weight:700;
  background:var(--grad-primary);color:var(--c-primary-ink);
  display:inline-flex;align-items:center;gap:8px;transition:var(--tx);
  box-shadow:var(--glow-primary), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn-primary svg{width:14px;height:14px;stroke-width:2.4}

.btn-ghost{
  padding:11px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:500;
  background:var(--surface);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--edge);
  color:var(--text-dim);
  display:inline-flex;align-items:center;gap:8px;transition:var(--tx-fast);
}
.btn-ghost:hover{color:var(--text);background:var(--surface-2)}
.btn-ghost svg{width:14px;height:14px;stroke-width:1.8}

/* ============ PAGE HEADER ============ */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.page-h h1{font-size:clamp(24px,2.4vw,32px);font-weight:700;margin:0;letter-spacing:-.03em;line-height:1.1}
.page-h .sub{color:var(--text-muted);font-size:13px;margin-top:6px;max-width:600px}
.page-h .actions{display:flex;gap:10px;flex-wrap:wrap}

/* ============ TOAST ============ */
.toast-host{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:10px;z-index:1000;pointer-events:none}
.toast{
  background:var(--surface-2);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--edge);
  border-radius:var(--r);padding:14px 20px 14px 16px;color:var(--text);font-size:13px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--glass-shadow-lg);
  animation:fadeUp .3s ease;
  min-width:260px;max-width:400px;pointer-events:auto;
}
.toast .ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff}
.toast.ok .ico{background:var(--c-success);color:#0c0e16}
.toast.warn .ico{background:var(--c-warn);color:#0c0e16}
.toast.err .ico{background:var(--c-danger)}
.toast .ico svg{width:14px;height:14px;stroke-width:2.6}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.05);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.10);border:3px solid transparent;background-clip:padding-box}

.empty{padding:48px 24px;text-align:center;color:var(--text-muted);font-size:13px}
.empty svg{width:42px;height:42px;margin-bottom:14px;opacity:.4;stroke-width:1.4}
.empty b{display:block;color:var(--text-dim);font-weight:600;font-size:15px;margin-bottom:6px}

@media (max-width: 980px){
  .sidebar{width:80px}
  .main{margin-left:80px}
  .nav-item{width:46px;height:46px}
  .brand-mark{width:46px;height:46px}
}
@media (max-width: 720px){
  .sidebar{width:68px;padding:16px 0;gap:6px}
  .main{margin-left:68px}
  .brand-mark{width:40px;height:40px;font-size:18px}
  .brand-name{display:none}
  .nav-item{width:42px;height:42px;border-radius:12px}
  .nav-item svg{width:19px;height:19px}
}
@media (max-width: 480px){
  :root{--pad-main:14px}
  .sidebar{width:58px}
  .main{margin-left:58px}
}

/* ============================================
   LEGACY COMPAT — todos mapeados a tons monocromos
   ============================================ */
:root{
  --c-pink:var(--c-primary);
  --c-magenta:var(--c-primary-2);
  --c-purple:var(--c-primary-2);
  --c-blue:#5e7bff;
  --c-cyan:var(--c-success);
  --c-teal:var(--c-success);
  --c-lime:var(--c-success);
  --c-yellow:var(--c-warn);
  --c-gold:var(--c-warn);
  --c-orange:var(--c-warn);
  --c-coral:var(--c-danger);
  --grad-pink:var(--grad-primary);
  --grad-purple:var(--grad-primary);
  --grad-blue:var(--grad-primary);
  --grad-rainbow:var(--grad-primary);
  --grad-logo:var(--grad-primary);
  --grad-cyan:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --grad-lime:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --grad-orange:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --grad-gold:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --grad-coral:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}

/* === Stats: tudo branco === */
.cat-val,.cat-val.pink,.cat-val.cyan,.cat-val.lime,
.stat.pink .v,.stat.cyan .v,.stat.lime .v,.stat.purple .v,.stat.orange .v,
.fst.cyan .v,.fst.pink .v,.fst.orange .v,.fst.lime .v,
.rc-amount,.rc-amount .currency,
.donut-center .val{
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;
  color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;
}

/* === Categoria icons → monocromo (sem pink/cyan/lime) === */
.cat-ico{background:var(--surface-2)!important;box-shadow:var(--neu-in-soft)!important;border:1px solid var(--edge)!important}
.cat-ico.pink svg,.cat-ico.cyan svg,.cat-ico.lime svg,.cat-ico svg{color:var(--text-dim)!important}

/* === Stat icon wrappers → monocromo === */
.stat .ico-wrap{background:var(--surface-2)!important;border:1px solid var(--edge)!important}
.stat.pink .ico-wrap svg,.stat.cyan .ico-wrap svg,.stat.lime .ico-wrap svg,.stat.orange .ico-wrap svg{color:var(--text-dim)!important}

/* === Receita card: PIX coin glass mono (era rainbow) === */
.rc-coin{
  background:var(--surface-2)!important;
  backdrop-filter:blur(12px)!important;
  border:1px solid var(--edge)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  color:var(--text)!important;
  font-weight:700!important;
}
.receita-card::before{background:var(--c-primary)!important;opacity:.04!important}

/* === Donut === */
.donut-fg{stroke:url(#donutGradPrimary)!important}
.donut-bg{stroke:rgba(255,255,255,.05)!important}
.donut-center{
  background:var(--bg)!important;
  border:1px solid var(--edge)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.4)!important;
}
.ds{background:var(--surface-2)!important;box-shadow:none!important;border:1px solid var(--edge)!important}
.ds .v{color:var(--text)!important}

/* === Catálogo covers todos no glass mono === */
.prod-cover.pink,.prod-cover.cyan,.prod-cover.coral,
.prod-cover.gold,.prod-cover.orange,.prod-cover.purple,.prod-cover.lime{
  background:linear-gradient(135deg, rgba(255,91,156,.18), rgba(162,128,255,.10))!important;
}
.prod-cover .ico{color:rgba(255,255,255,.35)!important}

/* === Kanban dots: estados em tons sutis === */
.col.pendente .dot{background:var(--c-warn)!important;box-shadow:0 0 8px rgba(255,181,71,.5)!important}
.col.em_producao .dot{background:var(--text-dim)!important;box-shadow:0 0 8px rgba(255,255,255,.15)!important}
.col.pronto .dot{background:var(--c-primary)!important;box-shadow:0 0 8px rgba(229,74,163,.5)!important}
.col.entregue .dot{background:var(--c-success)!important;box-shadow:0 0 8px rgba(62,220,192,.5)!important}

.prod-cover .fav.on{color:var(--c-warn)!important}

/* === Configurações === */
.toggle.on .sw{background:var(--grad-primary)!important}
.toggle.on .lbl{color:var(--c-primary)!important}
.cfg-side a.on{background:var(--grad-primary)!important}
.pt.on .dot{background:var(--c-primary)!important}

/* === Dashboard bars: TODAS neutras, selecionada accent === */
.bar.c-cyan,.bar.c-pink,.bar.c-lime,.bar.c-orange,.bar.c-gold,.bar.c-purple,.bar.c-blue{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06))!important;
  box-shadow:0 4px 12px rgba(0,0,0,.3)!important;
  color:rgba(255,255,255,.1)!important;
}
.bar-col.on .bar{
  background:var(--grad-primary)!important;
  box-shadow:var(--glow-primary)!important;
  filter:none!important;
}
.bar-tip{background:var(--grad-primary)!important;color:var(--c-primary-ink)!important;font-weight:700!important;box-shadow:var(--glow-primary)!important}
.bar-tip::after{border-top-color:#8d92a3!important}
.bar-col.on .lbl{color:var(--text)!important;font-weight:700!important}

/* === Finance chart === */
.cb .bar-rev{background:var(--grad-primary)!important;box-shadow:0 4px 12px -3px var(--c-primary)!important}
.cb .bar-cost{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04))!important;box-shadow:0 4px 12px rgba(0,0,0,.2)!important}
.legend-row .sw[style*="cyan"]{background:var(--c-primary)!important}
.legend-row .sw[style*="pink"]{background:rgba(255,255,255,.18)!important}

/* ============================================
   ❶ CONVERSAS RECENTES — valores em verde sólido
   ============================================ */
.li-amt,
.li-amt.up{
  background:none!important;
  -webkit-background-clip:initial!important;background-clip:initial!important;
  color:var(--c-success)!important;
  -webkit-text-fill-color:var(--c-success)!important;
  font-weight:700!important;
}
.li-amt small{color:rgba(62,220,192,.55)!important;-webkit-text-fill-color:rgba(62,220,192,.55)!important}

/* ============================================
   ❷ DONUT — fundo branco premium (Apple-style)
   ============================================ */
.donut-center{
  background:linear-gradient(180deg, #ffffff 0%, #f0f2f8 100%)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.5),
    inset 0 -3px 8px rgba(0,0,0,.06),
    inset 0 2px 4px rgba(255,255,255,.9)!important;
}
.donut-center .lbl{color:rgba(15,18,30,.45)!important;font-weight:600!important}
.donut-center .val{
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;
  color:#0a0c14!important;-webkit-text-fill-color:#0a0c14!important;
}
.donut-center .sub{color:rgba(15,18,30,.55)!important;font-weight:600!important}

/* ============================================
   ❸ RESPONSIVIDADE COMPLETA — 5 breakpoints
   ============================================ */
/* ============================================
   DASHBOARD GRID — proporcional pra qualquer tela
   ============================================ */
.dash{
  display:grid!important;
  grid-template-columns: minmax(0,1fr) minmax(320px, 22%)!important;
  gap:var(--gap)!important;align-items:start;
}

/* Desktop XL — 1600px+ : padding generoso, right col cresce */
@media (min-width:1600px){
  .main{padding:36px 44px 60px}
  .dash{grid-template-columns: minmax(0,1fr) minmax(360px, 23%)!important;gap:24px!important}
}
/* Ultrawide — 1900px+ : right col mais generosa */
@media (min-width:1900px){
  .main{padding:44px 56px 70px}
  .dash{grid-template-columns: minmax(0,1fr) minmax(400px, 24%)!important;gap:26px!important}
}
/* Wider 2K — 2200px+ : limita largura excessiva */
@media (min-width:2200px){
  .main{max-width:2000px!important;margin:0 auto}
  .dash{grid-template-columns: minmax(0,1fr) minmax(440px, 460px)!important}
}
/* Desktop normal — 1280-1600px : ok */
/* Laptop — 1100-1280px : reduzir colunas */
@media (max-width:1280px){
  .dash{grid-template-columns:minmax(0,1fr) minmax(0,300px)!important}
  .col-right{position:static!important}
  .stats-row,.stats-cards,.fin-stats{grid-template-columns:repeat(2,1fr)!important}
}
/* Tablet — 900-1100px : main vira 1 coluna */
@media (max-width:1100px){
  .dash{grid-template-columns:1fr!important}
  .col-right{flex-direction:row!important;flex-wrap:wrap}
  .col-right > .card{flex:1 1 calc(50% - 11px);min-width:280px}
  .kanban{grid-template-columns:repeat(2,1fr)!important}
  .conv-layout{grid-template-columns:300px 1fr!important;height:auto}
  .conv-layout .client-card{display:none}
  .fin-grid{grid-template-columns:1fr!important}
  .cfg-layout{grid-template-columns:1fr!important}
  .cfg-side{position:relative!important;top:0!important}
}
/* Tablet small — 720-900px */
@media (max-width:900px){
  .lists{grid-template-columns:1fr!important}
  .cats-grid{grid-template-columns:repeat(3,1fr)!important}
  .conv-layout{grid-template-columns:1fr!important}
  .conv-list-card{height:60vh}
  .roles-grid{grid-template-columns:1fr 1fr!important}
  .team-row{grid-template-columns:46px 1fr auto!important}
  .tr-email{display:none}
}
/* Mobile — <720px */
@media (max-width:720px){
  .topbar{gap:10px}
  .arven-logo-display{font-size:22px!important}
  .welcome h1{font-size:20px!important}
  .topbar-right{order:3;width:100%}
  .search{max-width:none}
  .quickbar{padding:8px}
  .qb-tabs{gap:10px}
  .col-right{flex-direction:column!important}
  .col-right > .card{flex:1 1 100%}
  .kanban,.stats-row,.stats-cards,.fin-stats{grid-template-columns:1fr!important}
  .cats-grid{grid-template-columns:1fr 1fr!important}
  .roles-grid{grid-template-columns:1fr!important}
  .cli-grid{grid-template-columns:1fr!important}
  .cat-grid{grid-template-columns:1fr!important}
  .donut-wrap{width:180px!important;height:180px!important}
  .me-avatar{width:38px;height:38px;font-size:13px}
  .icon-btn{width:40px;height:40px}
  .page-h h1{font-size:22px!important}
  .ds{padding:8px 6px}
  .ds .v{font-size:13px!important}
}
/* Mobile XS — <480px */
@media (max-width:480px){
  .topbar{flex-direction:column;align-items:flex-start}
  .topbar-right{margin-left:0}
  .card{padding:16px;border-radius:var(--r)!important}
  .receita-card,.list-card,.donut-card,.bars-card{padding:18px!important}
  .rc-amount{font-size:30px!important}
  .ht-big .v,.rc-amount{font-size:28px!important}
  .stat .v,.fst .v{font-size:24px!important}
  .donut-wrap{width:160px!important;height:160px!important}
  .donut-center{width:110px!important;height:110px!important}
  .donut-center .val{font-size:28px!important}
  .li{grid-template-columns:38px 1fr auto;gap:10px}
  .li .av{width:38px;height:38px;font-size:12px}
  .li-amt{font-size:13px!important}
  .arven-logo-display{font-size:20px!important;letter-spacing:.22em!important}
  .brand-mark{width:44px!important;height:44px!important}
  .modal{padding:20px!important}
  .page-h .actions{width:100%;flex-direction:column}
  .page-h .actions button{width:100%;justify-content:center}
}

/* ============================================
   ❹ TRANSIÇÕES SUAVES — animações premium
   ============================================ */
/* Transição global de cores em TUDO (theme-aware) */
*{
  transition:background-color .25s ease, border-color .25s ease, color .2s ease, box-shadow .25s ease;
}
/* Desliga o transition durante load inicial pra evitar flash */
.no-transition,.no-transition *{transition:none!important}

/* Stagger animation pros cards entrarem em cascata */
@keyframes cardEnter{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.card,.stat,.fst,.receita-card,.cat-card,.list-card,.donut-card,.bars-card,.fin-card,.cli-card,.prod-card,.conv-list-card,.chat-card,.client-card,.cfg-card,.role-card{
  animation:cardEnter .55s cubic-bezier(.16,1,.3,1) backwards;
}
.card:nth-child(1){animation-delay:.02s}
.card:nth-child(2){animation-delay:.08s}
.card:nth-child(3){animation-delay:.14s}
.card:nth-child(4){animation-delay:.20s}
.card:nth-child(5){animation-delay:.26s}
.card:nth-child(6){animation-delay:.32s}
.dash > * > .card{animation-delay:.10s}
.lists .card{animation-delay:.18s}
.col-right .card{animation-delay:.22s}

/* Hover lift refinado em cards interativos */
.cat-card,.cli-card,.prod-card,.role-card,.svc-card,.team-row{
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease, background-color .25s ease;
}
.cat-card:hover,.cli-card:hover,.prod-card:hover,.role-card:hover{
  transform:translateY(-4px) scale(1.005);
}

/* Stagger nos items de lista */
@keyframes liEnter{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
.li,.team-row,.conv-item,.svc-card,.secret-row,.pay-li{
  animation:liEnter .4s cubic-bezier(.16,1,.3,1) backwards;
}
.li:nth-child(1),.team-row:nth-child(1),.conv-item:nth-child(1){animation-delay:.05s}
.li:nth-child(2),.team-row:nth-child(2),.conv-item:nth-child(2){animation-delay:.10s}
.li:nth-child(3),.team-row:nth-child(3),.conv-item:nth-child(3){animation-delay:.15s}
.li:nth-child(4),.team-row:nth-child(4),.conv-item:nth-child(4){animation-delay:.20s}
.li:nth-child(5),.team-row:nth-child(5),.conv-item:nth-child(5){animation-delay:.25s}
.li:nth-child(6),.team-row:nth-child(6),.conv-item:nth-child(6){animation-delay:.30s}
.li:nth-child(7),.team-row:nth-child(7),.conv-item:nth-child(7){animation-delay:.35s}

/* Sidebar slide-in inicial */
@keyframes sidebarEnter{
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:translateX(0)}
}
.sidebar{animation:sidebarEnter .5s cubic-bezier(.16,1,.3,1) backwards}
.nav-item{animation:liEnter .4s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.05s * var(--i, 0))}
.nav-item:nth-child(1){--i:1}
.nav-item:nth-child(2){--i:2}
.nav-item:nth-child(3){--i:3}
.nav-item:nth-child(4){--i:4}
.nav-item:nth-child(5){--i:5}
.nav-item:nth-child(6){--i:6}
.nav-item:nth-child(7){--i:7}
.nav-item:nth-child(8){--i:8}

/* Donut animação de carga (preenchimento ring) */
.donut-fg{
  animation:donutFill 1.6s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.4s;
}
@keyframes donutFill{
  from{stroke-dashoffset:490}
}

/* Bars chart — crescer de baixo pra cima */
.bar{
  animation:barGrow .9s cubic-bezier(.16,1,.3,1) backwards;
  transform-origin:bottom;
}
.bar-col:nth-child(1) .bar{animation-delay:.4s}
.bar-col:nth-child(2) .bar{animation-delay:.5s}
.bar-col:nth-child(3) .bar{animation-delay:.6s}
.bar-col:nth-child(4) .bar{animation-delay:.7s}
.bar-col:nth-child(5) .bar{animation-delay:.8s}
.bar-col:nth-child(6) .bar{animation-delay:.9s}
.bar-col:nth-child(7) .bar{animation-delay:1.0s}
@keyframes barGrow{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}

/* Pulse no ponto verde (notification) */
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(229,74,163,.5)}
  70%{box-shadow:0 0 0 10px rgba(229,74,163,0)}
  100%{box-shadow:0 0 0 0 rgba(229,74,163,0)}
}
.icon-btn .badge{animation:pulseRing 2s ease-in-out infinite, pulse 2.4s ease-in-out infinite}

/* Botões: scale ao clicar */
button:active{transform:scale(.96)}

/* Focus rings suaves */
input:focus,textarea:focus,select:focus,button:focus-visible{
  transition:box-shadow .2s ease, border-color .2s ease;
}

/* Modal entrada com escala + blur */
@keyframes modalEnter{
  from{opacity:0;transform:scale(.94);filter:blur(4px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}
.modal-bg.open .modal{animation:modalEnter .35s cubic-bezier(.16,1,.3,1) backwards}

/* Toast slide-in da direita */
@keyframes toastEnter{
  from{opacity:0;transform:translateX(40px)}
  to{opacity:1;transform:translateX(0)}
}
.toast{animation:toastEnter .35s cubic-bezier(.16,1,.3,1) backwards!important}

/* Smooth scroll global */
html{scroll-behavior:smooth}

/* Respeita usuários que desabilitam animações */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* === Conversations === */
.cf.on{background:var(--grad-primary)!important;color:var(--c-primary-ink)!important;box-shadow:var(--glow-primary)!important;font-weight:700!important}
.msg.out{background:var(--grad-primary)!important;color:var(--c-primary-ink)!important;box-shadow:var(--glow-primary)!important}
.msg.out .t{color:rgba(12,14,22,.55)!important}
.send-btn{background:var(--grad-primary)!important;color:var(--c-primary-ink)!important;box-shadow:var(--glow-primary)!important}
.pause-toggle{background:rgba(62,220,192,.10)!important;color:var(--c-success)!important;border:1px solid rgba(62,220,192,.18)!important}
.pause-toggle.paused{background:rgba(255,94,122,.10)!important;color:var(--c-danger)!important;border:1px solid rgba(255,94,122,.18)!important}
.ci-name .pmini{background:var(--surface-2)!important;color:var(--text-dim)!important;border:1px solid var(--edge)!important}
.ci-name .pmini.w{background:rgba(255,181,71,.10)!important;color:var(--c-warn)!important;border-color:rgba(255,181,71,.18)!important}
.ci-name .pmini.r{background:rgba(255,94,122,.10)!important;color:var(--c-danger)!important;border-color:rgba(255,94,122,.18)!important}
.conv-item .av .status.ok{background:var(--c-success)!important}
.conv-item .av .status.wait{background:var(--c-warn)!important}
.conv-item .av .status.paused{background:var(--c-danger)!important}
.ci-unread{background:var(--grad-primary)!important;color:var(--c-primary-ink)!important;box-shadow:0 3px 8px -2px rgba(200,210,230,.4)!important;font-weight:700!important}

.new-prod:hover{border-color:var(--c-primary)!important;color:var(--c-primary)!important}
.stat::before{background:var(--c-primary)!important;opacity:.05!important}
.stat.pink::before,.stat.cyan::before,.stat.lime::before,.stat.purple::before{background:var(--c-primary)!important}

.svc-thumb{background:var(--surface-2)!important;color:var(--text-muted)!important;border:1px solid var(--edge)!important}
.svc-thumb.done{background:var(--grad-primary)!important;color:#fff!important;border:0!important}

/* cfg-side precisa ficar STICKY (sobrescreve qualquer position:relative que vier antes) */
.cfg-side{
  position:sticky!important;
  top:24px!important;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  align-self:start;
}
.cfg-side::-webkit-scrollbar{width:0;display:none}

/* === Override de surfaces neumorphic legados pra glass + gradient === */
.receita-card,.cat-card,.list-card,.donut-card,.bars-card,.fin-card,.cfg-card,.cli-card,.prod-card,.conv-list-card,.chat-card,.client-card,.cfg-side{
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.13) 0%, transparent 50%),
    radial-gradient(100% 80% at 100% 0%, rgba(168,128,255,.12) 0%, transparent 55%),
    radial-gradient(80% 80% at 100% 100%, rgba(255,128,180,.06) 0%, transparent 55%),
    linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.015) 100%),
    rgba(35, 38, 52, .55)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  border:1px solid var(--edge-2)!important;
  box-shadow:var(--glass-shadow)!important;
  position:relative;
}
.cat-card{padding:18px 16px}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--glass-shadow-lg)!important;border-color:var(--edge-2)!important}
.cli-card:hover,.prod-card:hover{transform:translateY(-3px);box-shadow:var(--glass-shadow-lg)!important;border-color:var(--edge-2)!important}

/* Stat cards também glass + gradient */
.stat,.fst{
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.13) 0%, transparent 50%),
    radial-gradient(100% 80% at 100% 0%, rgba(168,128,255,.12) 0%, transparent 55%),
    radial-gradient(80% 80% at 100% 100%, rgba(255,128,180,.06) 0%, transparent 55%),
    linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.015) 100%),
    rgba(35, 38, 52, .55)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  border:1px solid var(--edge-2)!important;
  box-shadow:var(--glass-shadow)!important;
  position:relative;
}
.fst::after{display:none}
.fst.green::after,.fst.wine::after,.fst.olive::after,.fst.burnt::after{display:none}

/* svc-card glass */
.svc-card,.col,.secret-row,.cc-stage,.cc-metric,.pp{
  background:var(--surface)!important;
  border:1px solid var(--edge)!important;
  box-shadow:none!important;
}
.col{background:var(--surface)!important;backdrop-filter:blur(24px) saturate(140%)!important;-webkit-backdrop-filter:blur(24px) saturate(140%)!important;box-shadow:var(--glass-shadow)!important}

/* Inputs: glass inset */
.search,.conv-search,.pay-q,.cli-search input,.field input,.field textarea,.field select{
  background:var(--surface-inset)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3)!important;
  border:1px solid var(--edge)!important;
}
.search,.conv-search{background:var(--surface)!important;border:1px solid var(--edge)!important;box-shadow:none!important}

/* Period/seg switches: glass background */
.period-switch,.seg,.bars-head .seg,.svc-filter,.prod-tabs,.qb-tabs,.conv-filter{
  background:var(--surface)!important;
  border:1px solid var(--edge)!important;
  box-shadow:none!important;
}
.seg button.on,.bars-head .seg button.on,.svc-filter button.on,.period-switch button.on,.pt.on{
  background:var(--surface-3)!important;
  box-shadow:none!important;
  border:1px solid var(--edge-2)!important;
}