/* Agência Lupus: carvão, laranja e violeta, com estados legíveis. */
@font-face { font-family: Montserrat; src: url('montserrat-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 800; font-display: swap; }
:root[data-theme="light"] {
  --bg: #f4f1f6; --surface: #ffffff; --surface-2: #f1edf5;
  --border: #e4dce9; --text: #25202c; --muted: #61596c;
  --accent: #bd4811; --accent-strong: #a83d0b; --accent-contrast: #ffffff;
  --ok: #6f38b6; --ok-soft: #eee5fa; --warn: #8b510d; --warn-soft: #fff0da;
  --connected: #087d52; --connected-soft: #e1f6eb;
  --danger: #b63855; --danger-soft: #ffebf1; --idle: #756d7e; --idle-soft: #eeeaf2;
  --shadow: 0 2px 4px rgba(32, 20, 43, .04), 0 16px 38px rgba(32, 20, 43, .08);
  --radius: 18px; --sim: #6234a6; --sim-contrast: #ffffff;
  --glow: rgba(168, 85, 247, .10); --warm-glow: rgba(255, 122, 24, .06); color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #08070b; --surface: #15121c; --surface-2: #231d2b;
  --border: #392f43; --text: #f8f6fb; --muted: #b7aec2;
  --accent: #ff7a18; --accent-strong: #ff5722; --accent-contrast: #1d0e07;
  --ok: #be96ff; --ok-soft: #322242; --warn: #ffbc67; --warn-soft: #3a291d;
  --connected: #4ce0a4; --connected-soft: #173b2c;
  --danger: #ff8298; --danger-soft: #40232e; --idle: #b8afc3; --idle-soft: #292331;
  --shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 18px 46px rgba(0, 0, 0, .32);
  --radius: 18px; --sim: #a96cf6; --sim-contrast: #160e1f;
  --glow: rgba(168, 85, 247, .15); --warm-glow: rgba(255, 122, 24, .08); color-scheme: dark;
}

body { background: radial-gradient(circle at 8% 0%, var(--warm-glow), transparent 32rem), radial-gradient(circle at 90% 4%, var(--glow), transparent 36rem), var(--bg); font: 14px/1.5 Montserrat, system-ui, sans-serif; letter-spacing: .005em; }
h2 { font-size: clamp(23px, 2vw, 30px); letter-spacing: -.035em; font-weight: 750; }
h3 { letter-spacing: -.02em; }
.muted { line-height: 1.55; }

.topbar { min-height: 72px; gap: 32px; padding: 12px clamp(20px, 3vw, 48px); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(20px); box-shadow: 0 2px 20px rgba(0, 0, 0, .025); }
.brand { white-space: nowrap; font-size: 18px; letter-spacing: -.035em; }
.brand img { width: 36px; height: 36px; border-radius: 11px; box-shadow: 0 5px 14px rgba(255, 122, 24, .25); }
.tabs { gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface-2); }
.tab { min-height: 38px; padding: 8px 14px; border-radius: 10px; transition: background .18s, color .18s, transform .18s; }
.tab:hover { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); color: var(--text); }
.tab.active { color: var(--accent); background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.me { gap: 8px; }
.me-name { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { max-width: 1390px; padding: 32px clamp(18px, 3vw, 48px) 70px; }
.view-head { align-items: center; margin-bottom: 24px; padding: 26px 28px; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 92% 12%, var(--glow), transparent 30%), radial-gradient(circle at 8% 0%, var(--warm-glow), transparent 24rem), var(--surface); box-shadow: var(--shadow); }
.view-head p { max-width: 900px; margin-top: 8px; }
.view-actions { align-items: center; }

.btn, .theme-switch { min-height: 39px; border-radius: 10px; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.btn:hover:not(:disabled), .theme-switch:hover { transform: translateY(-1px); }
.btn:active:not(:disabled), .theme-switch:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 7px 18px rgba(255, 104, 25, .20); }
.btn-primary:hover { background: linear-gradient(135deg, var(--accent-strong), var(--accent)); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); }
.btn:focus-visible, .tab:focus-visible, .theme-switch:focus-visible, .segmented button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.field input, .field select, .field textarea, .input-row input { min-height: 42px; border-radius: 10px; }

.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 345px), 1fr)); gap: 18px; }
.card { gap: 17px; padding: 22px; border: 1px solid var(--border); border-top: 4px solid var(--idle); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0, 0, 0, .12); }
.card-name { font-size: 18px; letter-spacing: -.02em; }
.badge { padding: 5px 10px; }
.card[data-tone="ok"] { border-top-color: var(--connected); }
.badge[data-tone="ok"] { background: var(--connected-soft); color: var(--connected); }
.metric { padding: 12px; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 12px; }
.metric b { font-size: 22px; letter-spacing: -.04em; }
.metric span { line-height: 1.35; }
.card-actions .btn-primary { min-width: 150px; }
.table-wrap, .panel, .empty, .auth-card { border: 1px solid var(--border); box-shadow: var(--shadow); }
.table th { background: var(--surface-2); letter-spacing: .065em; }
.table th, .table td { padding: 15px 16px; }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.table .inactive td { color: var(--muted); }
.dialog { border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, .25); }
.dialog::backdrop { background: rgba(5, 4, 9, .72); backdrop-filter: blur(4px); }
.segmented { border-radius: 12px; padding: 4px; }
.segmented button { border-radius: 9px; min-height: 36px; }
.note-warn { border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent); }

.auth { background: radial-gradient(circle at 28% 22%, var(--glow), transparent 35%), var(--bg); }
.auth-card { max-width: 420px; border-radius: 24px; padding: 36px; }
.auth-card h1 { font-size: 28px; letter-spacing: -.04em; }
.auth-logo { box-shadow: 0 8px 20px rgba(255, 122, 24, .24); }
.theme-switch { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; white-space: nowrap; background: var(--surface); border: 1px solid var(--border); color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.theme-switch-icon { font-size: 17px; line-height: 1; }
[data-theme="light"] .theme-switch-icon::before { content: "☀"; color: #bd4811; }
[data-theme="dark"] .theme-switch-icon::before { content: "☾"; color: #c084fc; }
.theme-switch-auth { position: fixed; z-index: 10; top: 18px; right: 20px; }
body:has(#app:not([hidden])) .theme-switch-auth { display: none; }
body, .topbar, .card, .panel, .table-wrap, .metric, .auth-card, .dialog, .tab, .theme-switch { transition: background-color .24s ease, border-color .24s ease, color .24s ease, transform .18s ease; }

[data-theme="light"] .bi { --grid: #e4dce9; --series-recurring: #776d83; --series-not-customer: #a9a0b0; --band-hover: rgba(168, 85, 247, .06); --bi-ok-soft: #eee5fa; --src-meta_ads: #6652be; --src-google_ads: #d45b24; --src-site: #8b56a8; --src-link: #ab690c; --src-instagram: #c14483; --src-google_organic: #8760c7; --src-unknown: #8f8799; }
[data-theme="dark"] .bi { --grid: #392f43; --series-recurring: #aaa0b7; --series-not-customer: #6f687a; --band-hover: rgba(168, 85, 247, .09); --bi-ok-soft: #322242; --src-meta_ads: #9c84fa; --src-google_ads: #ff8a47; --src-site: #c084fc; --src-link: #f4bd64; --src-instagram: #ee72b0; --src-google_organic: #b99af4; --src-unknown: #817a8b; }
.bi .kind-new { color: var(--ok); }
.bi .bi-note { color: var(--warn); }
.spinner { border-top-color: var(--accent); }
.log { background: #0b0a10; color: #e7e1ec; }
.toast { background: #231d2b; }

@keyframes lubot-page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.view:not([hidden]), .auth:not([hidden]) { animation: lubot-page-enter .28s cubic-bezier(.2,.7,.2,1) both; }
.bi .bi-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.bi .bi-tile { min-height: 165px; border: 1px solid var(--border); border-radius: 16px; padding: 20px; position: relative; overflow: hidden; }
.bi .bi-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.bi .bi-tile-value { margin: 3px 0; font-size: 32px; letter-spacing: -.04em; }
.bi .panel { border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.bi .panel h3 { font-size: 18px; }
.bi .bi-filters input[type="date"], .bi .bi-filters select { min-height: 40px; border-radius: 10px; }
.bi .bi-tooltip { border-radius: 12px; box-shadow: var(--shadow); }
.bi .bi-bar-track, .bi .bi-bar-fill { border-radius: 999px; }
.bi .bi-bars li { padding: 9px; margin: -9px; }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 10px 16px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
  .me { margin-left: auto; }
  .me-name { display: none; }
}
@media (max-width: 720px) {
  .topbar { padding: 10px 14px; }
  .me { width: auto; }
  .content { padding: 18px 14px 42px; }
  .view-head { padding: 20px; align-items: stretch; }
  .view-head .btn { width: 100%; }
  .theme-switch-label { display: none; }
  .theme-switch { min-width: 40px; padding: 7px; }
  .theme-switch-auth .theme-switch-label { display: inline; }
  .cards { grid-template-columns: 1fr; }
  .bi .panel { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .btn, .theme-switch, .tab, body, .topbar, .panel, .table-wrap, .metric, .auth-card, .dialog { transition: none; }
  .card:hover, .btn:hover:not(:disabled), .theme-switch:hover { transform: none; }
  .view:not([hidden]), .auth:not([hidden]) { animation: none; }
}