/* KOIN · camada premium (vale para Painel, Central, Desempenho e Copiloto).
   Carregada por último: identidade visual, tipografia maior e acabamento futurista. */
:root {
  --display: "Sora", "Inter", system-ui, sans-serif;
  /* Paleta da marca: aço escovado + azul elétrico (do logo). Verde fica só para o que é positivo. */
  --g1: #22d3ee; --g2: #3b82f6; --g3: #cbd5e1; --steel: #c9d3df;
  --grad: linear-gradient(135deg, var(--g1), var(--g2));
  --grad-line: linear-gradient(135deg, rgba(125,211,252,.6), rgba(59,130,246,.28) 45%, rgba(203,213,225,.35));
  --glass: linear-gradient(180deg, #121c31, #0a1120);
}
/* acento do tema escuro (o claro tem o seu bloco no fim do arquivo) */
:root:not([data-theme="light"]) {
  --accent: #38bdf8 !important; --accent-2: #3b82f6 !important; --accent-ink: #031322 !important;
  --glow: 0 0 0 1px rgba(56,189,248,.35), 0 8px 32px -8px rgba(56,189,248,.5) !important;
}

/* ---------- nitidez (telas 4K) ---------- */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto; text-rendering: geometricPrecision;
  font-feature-settings: "cv11", "ss01", "ss03"; font-size: 15px !important; line-height: 1.55; font-weight: 450; }
/* contraste maior: texto principal quase branco e cinzas mais claros */
:root:not([data-theme="light"]) { --text: #f3f6fb !important; --muted: #b3bfd1 !important; --faint: #8d9bb1 !important; }
:root:not([data-theme="light"]) body { color: #f3f6fb; }
.muted, .hint, .sub, .d, small, .person span, .meta { font-weight: 500; }
:root:not([data-theme="light"]) .muted, :root:not([data-theme="light"]) .hint, :root:not([data-theme="light"]) .sub { color: #b3bfd1 !important; }
td, .tl-line, .ln, .bub, p, li { font-weight: 450; }
th, .lbl, .k2, .k { font-weight: 700 !important; }
:root:not([data-theme="light"]) ::selection { background: rgba(56,189,248,.4); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(56,189,248,.35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--g1), var(--g2)); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- fundo: aurora + grade + grão ---------- */
:root:not([data-theme="light"]) body {
  background-color: #040811 !important;
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(56,189,248,.18), transparent 62%),
    radial-gradient(760px 480px at -6% 4%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(700px 500px at 50% 115%, rgba(203,213,225,.07), transparent 60%),
    linear-gradient(rgba(148,163,184,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.04) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 34px 34px, 34px 34px !important;
  background-attachment: fixed !important;
}
.bg { display: none; }

/* ---------- identidade: logo KOIN em vetor ---------- */
.logo { background: url("/assets/koin-mark-160.webp") center / contain no-repeat !important; color: transparent !important; font-size: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 0 14px rgba(56,189,248,.55)); }
/* nome KOIN (imagem da marca) */
.wm { display: block; height: 22px; width: auto; filter: drop-shadow(0 0 10px rgba(56,189,248,.35)); }
.brand-line { display: flex; align-items: center; gap: 10px; }
.brand-line .prod { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .18em; text-transform: uppercase;
  background: linear-gradient(180deg, #f8fafc, #94a3b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side .brand .wm { height: 24px; margin-bottom: 3px; }
.login-logo { display: block; width: 190px; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 10px 40px rgba(56,189,248,.45)); }
.login { text-align: center; }
.logo > * { display: none !important; }
.brand { gap: 12px !important; }
.brand b, .brand > div:last-child { font-family: var(--display) !important; letter-spacing: .02em; }
.brand > div:last-child { font-size: 17px; font-weight: 800; display: flex; flex-direction: column; gap: 2px; }
.brand small { font-family: "Inter", sans-serif !important; letter-spacing: .01em !important; font-size: 12.5px !important; font-weight: 500 !important; }
.side .brand .logo, .top .logo { width: 38px !important; height: 38px !important; }
.login .logo { width: 64px !important; height: 64px !important; }
.av, .avatar { font-family: var(--display); }

/* ---------- tipografia: títulos e números em Sora, letras pequenas maiores ---------- */
h1, h2, h3, .page-head h1, .hero h1, .call-hd h1, .filters h1, .bar-top h1 { font-family: var(--display) !important; letter-spacing: -.02em; }
h1 { font-weight: 700; } .page-head h1, .filters h1, .bar-top h1 { font-size: 28px !important; }
.card h2, .w h3, .sec-hd h2 { font-size: 17px !important; }
.kpi .val, .kpi .v, .big, .g-num, .ring .val, .score, .crit .val, .say { font-family: var(--display) !important; font-variant-numeric: tabular-nums; }
.kpi .val, .kpi .v { font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.03em; }
.hint, .muted, .sub, .card .sub, .kpi .delta, .kpi .d, .d, .person span, .meta, .legend { font-size: 13.5px !important; }
small { font-size: 12.5px; }
.kpi .lbl, .lbl, .k2, .k, th, .pane-hd, .sec-hd .n, .tag, .pill, .res, .st, .who, .chip, .badge, .step, .step b, .seg button, .lg, .scale { font-size: 12px !important; }
.lbl, .k2, .k, th, .pane-hd { letter-spacing: .12em !important; }
td { font-size: 14px; }
.nav a { font-size: 14.5px !important; padding: 10px 12px !important; }
.btn, button { font-size: 14px; }
.btn.sm, button.sm { font-size: 13px !important; }
input, select, textarea { font-size: 14.5px !important; }
.tl-line, .ln, .bub, .trs { font-size: 14px !important; }
.moment, .err-card .why, .fix, .model, .tip .said, .old, .idle, .guide, .react, .hint { line-height: 1.55; }
.tip .say, .say { font-size: 17.5px !important; } .ask { font-size: 15.5px !important; }
.mainnav a { font-size: 14px !important; }

/* ---------- vidro com borda em degradê ---------- */
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .kpi, :root:not([data-theme="light"]) .pane,
:root:not([data-theme="light"]) .mbox, :root:not([data-theme="light"]) .modal, :root:not([data-theme="light"]) .col {
  border: 1px solid transparent !important;
  background: var(--glass) padding-box, var(--grad-line) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 50px -24px rgba(0,0,0,.85), 0 0 40px -28px rgba(56,189,248,.55) !important;
  backdrop-filter: none !important;
}
:root:not([data-theme="light"]) .kpi { transition: box-shadow .2s ease; }
:root:not([data-theme="light"]) .kpi:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -24px rgba(0,0,0,.9), 0 0 48px -20px rgba(56,189,248,.55) !important; }
.card, .kpi, .pane, .mbox { border-radius: 20px !important; }

/* ---------- botões ---------- */
.btn.primary, button.pri, .cta-call, .mainnav a.cta {
  background: linear-gradient(135deg, #67e8f9, #22d3ee 30%, #3b82f6) !important; color: #031322 !important; border: 0 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 12px 32px -12px rgba(56,189,248,.85) !important; font-weight: 700 !important;
  position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease;
}
.btn.primary:hover, button.pri:hover, .cta-call:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 16px 40px -12px rgba(56,189,248,.8) !important; }
.btn.primary::after, button.pri::after, .cta-call::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.btn.primary:hover::after, button.pri:hover::after, .cta-call:hover::after { transform: translateX(120%); }

/* ---------- navegação ---------- */
:root:not([data-theme="light"]) .side { background: linear-gradient(180deg, rgba(10,16,30,.92), rgba(4,8,17,.94)) !important; border-right: 1px solid rgba(56,189,248,.16) !important; }
:root:not([data-theme="light"]) .nav a.active { background: linear-gradient(90deg, rgba(56,189,248,.18), rgba(59,130,246,.05)) !important; box-shadow: inset 3px 0 0 var(--g1) !important; color: #fff !important; }
header.top { background: #050a14; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(56,189,248,.16) !important; }
.mainnav a.on { background: linear-gradient(135deg, rgba(56,189,248,.2), rgba(59,130,246,.1)) !important; border-color: rgba(56,189,248,.45) !important; box-shadow: 0 0 22px -8px rgba(56,189,248,.8); }
/* rótulos e numeração no azul da marca */
:root:not([data-theme="light"]) :is(.lbl, .k, .ia h4, .focus b) { color: #7dd3fc !important; }
.sec-hd .n, h2::before { background: linear-gradient(135deg, #67e8f9, #3b82f6) !important; }
.seg button.on { background: linear-gradient(135deg, rgba(56,189,248,.3), rgba(59,130,246,.22)) !important; }
.step.cur { border-color: #38bdf8 !important; }
input:focus, textarea:focus, select:focus { border-color: #38bdf8 !important; box-shadow: 0 0 0 3px rgba(56,189,248,.15) !important; }

/* ---------- detalhes ---------- */
:root:not([data-theme="light"]) th { color: #93a3ba !important; }
tr.click:hover td, tbody tr:hover td { background: rgba(56,189,248,.05); }
.chip, .pill, .res, .st, .tag { border-radius: 8px; }
.score { min-width: 40px !important; height: 30px !important; font-size: 15px !important; border-radius: 10px !important; }
.page-head p, .bar-top .muted { font-size: 15px !important; }
.sec-hd .n { padding: 5px 8px !important; }
.kpi::before { width: 4px !important; box-shadow: 0 0 18px var(--c, var(--g1)); }
.skel, .skeleton { border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* opções do Copiloto: negrito dentro da explicação continua na mesma linha */
.opt > div > b { display: block; font-size: 15px; }
.opt span b { display: inline !important; color: #e6edf7; }
.opt span { font-size: 13.5px !important; line-height: 1.5; }
.card h2 { font-size: 19px !important; }

/* nitidez em tudo: nenhum texto dentro de camada desfocada ou em movimento */
.card, .side, .pane, .mbox, .modal, .mwrap, .modal-wrap, .top, .kpi, .col, .tip, .guide { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.mwrap, .modal-wrap { background: rgba(2,5,11,.78) !important; }
:root:not([data-theme="light"]) .side { background: #070d19 !important; }
.cta-call:hover, .btn:hover, button:hover { transform: none !important; }
.mbox, .modal { animation: none !important; }

/* K do logo do tamanho do bloco de texto ao lado (nome KOIN + subtítulo), um pouco maior */
.side .brand .logo, .top .logo, .brand .logo { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; }
.ck-top .logo { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }

/* ---------- tema claro do painel (botão sol/lua grava data-theme="light" no <html>) ---------- */
:root[data-theme="light"] {
  --accent: #0284c7 !important; --accent-2: #2563eb !important; --accent-ink: #ffffff !important;
  --glow: 0 0 0 1px rgba(2,132,199,.28), 0 8px 24px -10px rgba(2,132,199,.4) !important;
  --text: #0f172a !important; --muted: #475569 !important; --faint: #64748b !important;
}
:root[data-theme="light"] body { color: #0f172a; }
:root[data-theme="light"] .nav a.active { background: rgba(2,132,199,.10) !important; box-shadow: inset 3px 0 0 #0284c7 !important; color: #0f172a !important; }
:root[data-theme="light"] :is(.lbl, .k, .ia h4, .focus b) { color: #0369a1 !important; }
:root[data-theme="light"] th { color: #475569 !important; }
:root[data-theme="light"] :is(tr.click:hover td, tbody tr:hover td) { background: rgba(2,132,199,.06); }
:root[data-theme="light"] ::selection { background: rgba(2,132,199,.22); color: #0f172a; }
:root[data-theme="light"] :is(input, textarea, select):focus { border-color: #0284c7 !important; box-shadow: 0 0 0 3px rgba(2,132,199,.15) !important; }
:root[data-theme="light"] .avatar { color: #0369a1; }
:root[data-theme="light"] :is(.wm, .logo) { filter: drop-shadow(0 1px 2px rgba(15,23,42,.35)); }
/* tema claro: toda letra com contraste de leitura (mínimo 4,5:1 no branco) — status, notas e textos secundários */
:root[data-theme="light"] { --accent: #0369a1 !important; --accent-2: #075985 !important; --danger: #be123c !important; --warn: #a1480a !important; --ok: #047857 !important; --muted: #475569 !important; --faint: #64748b !important; }