/* Tema premium: verde da marca sobre base clara e "verde-grafite" no lugar do preto.
   Tipografia Work Sans (fonte da identidade), superfícies em camadas, sombras suaves e detalhes de KV
   (brilho verde e linhas em onda). Vem depois de ui.css e só redefine tokens e acabamento. */
:root, :root[data-theme="light"] {
  --brand: #00B862; --brand-2: #00D66F; --brand-ink: #03170D; --brand-soft: #E3F8EC; --brand-text: #00894A;
  --kv: #00D666; --kv-deep: #0E2A21; --kv-mid: #154536;
  --bg: #F3F6F4; --surface: #FFFFFF; --surface-2: #F7FAF8; --field: #FFFFFF; --hover: #EFF4F1;
  --line: #E2E8E4; --line-2: #D2DBD5; --track: #E7EDE9;
  --ink: #12211B; --ink-2: #44544D; --muted: #74837C;
  --side-bg: #FBFCFB; --side-line: #E4EAE6; --side-ink: #44544D; --side-hover: #EEF3F0;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(18, 33, 27, .04), 0 2px 8px rgba(18, 33, 27, .04);
  --shadow-lg: 0 18px 48px rgba(14, 42, 33, .14), 0 2px 6px rgba(14, 42, 33, .06);
  --display: 'Work Sans', 'Inter', system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --brand: #00D26A; --brand-2: #22E584; --brand-ink: #03170D; --brand-soft: rgba(0, 214, 102, .13); --brand-text: #3EE698;
  --bg: #121A17; --surface: #18221E; --surface-2: #1C2823; --field: #141D1A; --hover: #213029;
  --line: #26342E; --line-2: #31423A; --track: #24322C;
  --ink: #E8F0EC; --ink-2: #AEBDB6; --muted: #81928A;
  --side-bg: #141D1A; --side-line: #22302A; --side-ink: #AEBDB6; --side-hover: #1D2925;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .4);
}

body { font-family: 'Work Sans', 'Inter', system-ui, sans-serif; font-size: 14.5px; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; background: var(--bg); }
h1, h2, h3, .page-head h1, .kpi-v { font-family: var(--display); }
a { color: var(--brand-text); }
::selection { background: color-mix(in srgb, var(--kv) 35%, transparent); }

/* ---------- Menu lateral claro ---------- */
.side { background: var(--side-bg); border-right: 1px solid var(--side-line); }
.side-text { display: flex; align-items: center; gap: 12px; padding: 22px 20px 20px; border-bottom: 1px solid var(--side-line); }
.side-text .hm { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 184, 98, .35)); }
.side-text div { display: grid; gap: 1px; }
.side-text strong { color: var(--ink); font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.side-text span { color: var(--muted); font-size: 12px; }
#nav { padding: 10px 12px; }
#nav .group { color: var(--muted); font-size: 10.5px; letter-spacing: .1em; margin: 22px 12px 6px; opacity: .85; }
#nav a { color: var(--side-ink); font-weight: 500; padding: 9px 12px; border-radius: 10px; position: relative; transition: background .15s, color .15s; }
#nav a:hover { background: var(--side-hover); color: var(--ink); }
#nav a.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(18, 33, 27, .06), 0 0 0 1px var(--line); }
#nav a.active::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kv); }
#nav a.active .ni { stroke: var(--brand); }
.ni { stroke: var(--muted); }
#nav a:hover .ni { stroke: var(--ink-2); }
#nav a[data-badge]:not([data-badge=""])::after { background: var(--kv); color: var(--brand-ink); font-weight: 700; }
.nav-adv { border-top-color: var(--side-line); }
.nav-adv summary { color: var(--muted); }
.side-foot { border-top: 1px solid var(--side-line); color: var(--ink-2); }
.side-foot #who { color: var(--ink-2); font-weight: 550; }
.theme-btn, .side-foot .btn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
.theme-btn:hover, .side-foot .btn.ghost:hover { background: var(--side-hover); color: var(--ink); }

/* ---------- Área principal ---------- */
#main { padding: 36px 44px 104px; }
#main::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 260px; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 120% at 85% -40%, color-mix(in srgb, var(--kv) 14%, transparent), transparent 70%); }
.page-head { margin-bottom: 30px; }
.page-head h1 { font-size: 30px; font-weight: 650; letter-spacing: -.03em; }
.page-head p { font-size: 14.5px; color: var(--muted); margin-top: 6px; }
.eyebrow, .h-eyebrow { color: var(--brand-text); font-weight: 650; letter-spacing: .12em; font-size: 11.5px; text-transform: uppercase; }

/* Cartões em camadas */
.card, .kpi, .cx { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.card { padding: 24px 26px; }
.card h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; }
.kcard, .mk-gitem, .start a, .mk-type { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.kcard:hover, .mk-gitem:hover, .start a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* KPIs: o primeiro em verde-grafite com brilho da marca (KV) */
.kpi { position: relative; overflow: hidden; padding: 22px 24px; }
.kpi:first-child { background: radial-gradient(120% 140% at 100% 0%, rgba(0, 214, 102, .45), transparent 55%), linear-gradient(140deg, var(--kv-deep), var(--kv-mid)); border-color: transparent; box-shadow: var(--shadow-lg); color: #fff; }
.kpi:first-child .kpi-top, .kpi:first-child .kpi-hint, .kpi:first-child .kpi-v small { color: rgba(255, 255, 255, .72); }
.kpi:first-child .kpi-v { color: #fff; }
.kpi:first-child .kpi-pct { color: var(--kv); }
.kpi:first-child .kpi-bar { background: rgba(255, 255, 255, .14); }
.kpi:first-child .kpi-bar i { background: var(--kv); }
.kpi-v { font-size: 40px; font-weight: 650; letter-spacing: -.035em; }
.kpi-bar i, .cx-progress i, .bar span { background: linear-gradient(90deg, var(--brand), var(--kv)); }

/* Botões */
.btn { height: 38px; border-radius: 11px; font-weight: 600; letter-spacing: -.005em; transition: background .15s, box-shadow .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn.small { height: 31px; border-radius: 9px; }
.btn.primary { background: linear-gradient(180deg, #19DD78, var(--brand)); color: var(--brand-ink); border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px -6px rgba(0, 184, 98, .6); }
.btn.primary:hover { background: linear-gradient(180deg, #2BE686, #00C46A); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 22px -8px rgba(0, 184, 98, .7); }
input, select, textarea { border-radius: 11px; border-color: var(--line-2); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

/* Tabelas e listas */
table { border-collapse: separate; border-spacing: 0; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
tr.click:hover td { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
.tag { border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.tag.brand, .tag.ok { background: var(--brand-soft); color: var(--brand-text); }

/* Kanban do pipeline */
.kanban .col { background: color-mix(in srgb, var(--surface-2) 70%, var(--bg)); border-color: var(--line); border-radius: 18px; }
.kcard { border-radius: 13px; }

/* Abas */
.ltabs button[aria-selected="true"], .mk-tab.on { border-bottom-color: var(--kv); }
.tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--kv); }

/* Chat do agente e dock */
.ag-msg.user .ag-b { background: linear-gradient(140deg, var(--kv-deep), var(--kv-mid)); color: #fff; border: 0; }
.ag-msg.user .ag-b a { color: var(--kv); }
.ag-msg.assistant .ag-b { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ag-fab { border-radius: 999px; }
.ag-orb { background: radial-gradient(circle at 30% 30%, #7DF7B9, var(--brand)); box-shadow: 0 0 18px rgba(0, 214, 102, .55); }

/* Toasts e modais */
.modal { border-radius: 20px; box-shadow: var(--shadow-lg); }
.toast { border-radius: 12px; box-shadow: var(--shadow-lg); }

/* Peças: o preview fica num "palco" verde-grafite */
.mk-preview { background: radial-gradient(80% 80% at 80% 0%, rgba(0, 214, 102, .18), transparent 60%), linear-gradient(140deg, var(--kv-deep), var(--kv-mid)); border: 0; }
.mk-type.on, .mk-thumb.on { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

/* ---------- Tela de acesso: vídeo ao fundo + vidro ---------- */
.login { position: relative; overflow: hidden; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 460px); align-items: center; gap: 48px; padding: 48px clamp(24px, 6vw, 96px); background: var(--kv-deep); }
.login::after, .login-kv { display: none !important; }
.lg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: saturate(.85) contrast(1.05); }
.lg-veil { position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 80% at 100% 100%, rgba(0, 214, 102, .28), transparent 60%),
    linear-gradient(100deg, rgba(9, 32, 24, .9) 0%, rgba(9, 32, 24, .62) 42%, rgba(9, 32, 24, .2) 100%); }
.lg-veil::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -30px; height: 220px; opacity: .55;
  background:
    radial-gradient(120% 60px at 50% 100%, transparent 58%, rgba(0, 214, 102, .55) 59%, transparent 61%),
    radial-gradient(110% 90px at 40% 100%, transparent 63%, rgba(80, 230, 200, .35) 64%, transparent 66%),
    radial-gradient(130% 120px at 60% 100%, transparent 66%, rgba(0, 214, 102, .25) 67%, transparent 69%); }
.lg-copy, .login-card { position: relative; z-index: 2; }
.lg-copy { color: #fff; max-width: 620px; animation: lgIn .8s ease both; }
.lg-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: #fff; }
.lg-brand .hm { width: 38px; height: 38px; filter: drop-shadow(0 6px 18px rgba(0, 214, 102, .5)); }
.lg-copy h2 { font-family: var(--display); font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; margin: 34px 0 30px; color: #fff; }
.lg-copy h2 em { font-style: normal; background: linear-gradient(90deg, #3CF29A, #9BF7CC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lg-points li { display: grid; gap: 2px; padding-left: 22px; position: relative; }
.lg-points li::before { content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--kv); box-shadow: 0 0 12px var(--kv); }
.lg-points b { font-weight: 600; font-size: 15.5px; }
.lg-points span { color: rgba(255, 255, 255, .7); font-size: 14px; }
.login-card { margin: 0; width: 100%; padding: 36px 34px; border-radius: 24px; display: grid; gap: 14px;
  background: rgba(255, 255, 255, .94); color: var(--ink); border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 40px 90px rgba(3, 20, 13, .45); backdrop-filter: blur(18px) saturate(1.2); animation: lgIn .8s .1s ease both; }
.login-card .lg-brand { color: var(--ink); font-size: 15px; display: none; }
.login-card .lg-brand .hm { width: 30px; height: 30px; }
.login-card h1 { font-family: var(--display); color: var(--ink); font-size: 26px; font-weight: 650; letter-spacing: -.03em; margin: 0; }
.login-card .muted { color: var(--muted); margin: -6px 0 6px; }
.login-card label { color: var(--ink-2); font-weight: 550; display: grid; gap: 6px; }
.login-card input { background: #fff; color: var(--ink); border: 1px solid var(--line-2); height: 46px; padding: 0 14px; font-size: 15px; }
.login-card .btn.primary { height: 48px; font-size: 15px; margin-top: 6px; }
.login-card .h-eyebrow { color: var(--brand-text); }
@keyframes lgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lg-video { display: none; } .lg-copy, .login-card { animation: none; } .login { background: linear-gradient(120deg, var(--kv-deep), var(--kv-mid)) url(/media/acesso.jpg) center/cover; } }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; padding: 24px 16px; gap: 0; }
  .lg-copy { display: none; }
  .login-card .lg-brand { display: inline-flex; }
}
@media (max-width: 760px) { #main { padding: 20px 16px 96px; } .page-head h1 { font-size: 24px; } }

/* Rodapé do menu: usuário em cima, ações numa linha */
.side-foot { display: grid !important; gap: 10px; padding: 14px 16px 18px !important; }
.side-foot #who { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.25; }
.side-foot #who::before { content: attr(data-ini); width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--brand-ink); background: linear-gradient(140deg, #3CF29A, var(--brand)); }
.side-foot .actions-row { display: flex; flex-wrap: nowrap; gap: 6px; }
.side-foot .actions-row .btn { flex: 1; padding: 0 6px; }