*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ════════════════════════════════════════════════════════════════════════════ Front mobile — mesmos tokens do hub/style.css (cbnethub/DESIGN.md), com os nomes canônicos, para `check-design.mjs` verificar e para o claro sair de uma regra só. O que muda em relação ao hub é a FORMA, não a cor: cartão em vez de linha, barra inferior em vez de abas, sheet em vez de formulário inline. Nada de terceiro no caminho de render; Poppins vendorada (do hub, servida na raiz do mesmo processo). ════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Poppins'; src: url('/vendor/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/vendor/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* ── Cor ── escuro é o padrão do ecossistema; o claro entra pelo sistema (sem escolha guardada) ou pela escolha explícita em . */ :root { color-scheme: dark; --bg: #061423; --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.03); --border: rgba(255,255,255,.10); --text: #eaf2f8; --text-muted: #93a7ba; --accent: #2fd15a; --accent-text: #2fd15a; --on-accent: #061423; --danger: #ff6b7a; --warning: #ffb020; --on-danger: #061423; --on-warning: #061423; --warning-text: #ffb020; --info: #4b8ff5; --focus-ring: color-mix(in srgb, var(--accent) 55%, transparent); --sheet-bg: #0b1a2c; --elev-1: 0 1px 2px rgba(0,0,0,.30); --elev-2: 0 20px 46px rgba(0,0,0,.50); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #eaeff6; --surface: #ffffff; --surface-2: #dde5ef; --border: #ccd7e4; --text: #0f1c2b; --text-muted: #54637a; --accent: #22a847; --accent-text: #147233; --on-accent: #061423; --danger: #b3352f; --warning: #b7791f; --on-danger: #ffffff; --on-warning: #061423; --warning-text: #8a5a12; --info: #2563c9; --sheet-bg: #ffffff; --elev-1: 0 1px 2px rgba(15,28,43,.05), 0 1px 1px rgba(15,28,43,.04); --elev-2: 0 18px 42px rgba(15,28,43,.16); } } [data-theme="light"] { color-scheme: light; --bg: #eaeff6; --surface: #ffffff; --surface-2: #dde5ef; --border: #ccd7e4; --text: #0f1c2b; --text-muted: #54637a; --accent: #22a847; --accent-text: #147233; --on-accent: #061423; --danger: #b3352f; --warning: #b7791f; --on-danger: #ffffff; --on-warning: #061423; --warning-text: #8a5a12; --info: #2563c9; --sheet-bg: #ffffff; --elev-1: 0 1px 2px rgba(15,28,43,.05), 0 1px 1px rgba(15,28,43,.04); --elev-2: 0 18px 42px rgba(15,28,43,.16); } :root { --info-soft: color-mix(in srgb, var(--info) 16%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent); --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent); --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --r-campo: 10px; --r-card: 14px; --r-pill: 999px; --ease-out: cubic-bezier(.23, 1, .32, 1); --t-press: 120ms; --t-enter: 240ms; /* Áreas seguras do aparelho (notch, barra de gestos). */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --nav-h: calc(58px + var(--safe-bottom)); } /* ── Barras de rolagem (DESIGN.md §3.1) — as duas declarações, nenhuma cobre todo mundo. */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: var(--r-pill); } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; } strong, b { font-weight: 600; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; accent-color: var(--accent); } /* Widget nativo (DESIGN.md §3.2): sem isto a LISTA do