@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap'); /* ════════════════════════════════════════════════════════════════════════ WAZIN — PRANCHA design system (opt-in via ). A linguagem do /cockpit espalhada pro sistema: prancha de engenharia — IBM Plex Mono, fundo blueprint, hairlines, 1 acento ciano + verde/âmbar/vermelho. SEGURO POR DESIGN: • nada acontece sem a classe .prancha no ; • re-skina redefinindo os TOKENS que as páginas WAZIN já usam (--bg/--border/ --text/…) → re-colore SEM tocar no layout; • o blueprint é o BACKGROUND do próprio body (fica atrás do conteúdo natural, sem elemento novo, sem z-index, sem quebrar header sticky); • NÃO força font em '*' (quebraria ícones bootstrap) — só no body; .bi tem font própria !important; • carimbo (topo) + rodapé de telemetria são OPT-IN: só com .pr-chrome (pra não colidir com headers próprios). Base = re-skin + fundo + crosshairs. ════════════════════════════════════════════════════════════════════════ */ body.prancha{ /* ── re-skin dos tokens comuns do WAZIN → paleta prancha ── */ --bg:#06080d; --bg-el:#0b0e15; --bg-el2:#10141d; --bg-card:#0b0e15; --border:rgba(148,170,205,.22); --line:rgba(148,170,205,.13); --line-hi:rgba(148,170,205,.28); --text:#f0f4fa; --text2:#c0cbdc; --text3:#8494ac; --accent:#00e5ff; --cyan:#00e5ff; --gold:#d4af37; --gold2:#b8942a; --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --purple:#a855f7; --pr-cyan:#00e5ff; --pr-brk:rgba(150,168,198,.6); --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); /* blueprint como BACKGROUND do body (fixo) — atrás do conteúdo, zero risco */ background-color:#06080d; background-image: radial-gradient(120% 80% at 50% -8%, rgba(0,229,255,.05), transparent 60%), radial-gradient(4.5px 1.2px at center, rgba(0,229,255,.13) 60%, transparent 75%), radial-gradient(1.2px 4.5px at center, rgba(0,229,255,.13) 60%, transparent 75%), repeating-linear-gradient(0deg, rgba(0,229,255,.014) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(0,229,255,.014) 0 1px, transparent 1px 24px); background-size:auto,120px 120px,120px 120px,auto,auto; background-position:0 0,-60px -60px,-60px -60px,0 0,0 0; background-attachment:fixed; } /* fonte nos controles (não herdam) — sem tocar em ícones */ body.prancha input, body.prancha textarea, body.prancha select, body.prancha button{ font-family:var(--mono); } body.prancha ::selection{ background:rgba(0,229,255,.22); } body.prancha ::-webkit-scrollbar{ width:10px;height:10px; } body.prancha ::-webkit-scrollbar-track{ background:transparent; } body.prancha ::-webkit-scrollbar-thumb{ background:#1a2230;border:2px solid #06080d; } body.prancha ::-webkit-scrollbar-thumb:hover{ background:#22304a; } /* ── crosshairs de registro nos 4 cantos (decorativo, não-interativo) ── */ .wz-reg{position:fixed;width:22px;height:22px;pointer-events:none;z-index:2;opacity:.45; background: linear-gradient(rgba(0,229,255,.45),rgba(0,229,255,.45)) 50% 0/1px 100% no-repeat, linear-gradient(rgba(0,229,255,.45),rgba(0,229,255,.45)) 0 50%/100% 1px no-repeat;} .wz-reg::before{content:'';position:absolute;inset:6px;border:1px solid rgba(0,229,255,.45);border-radius:50%;} .wz-reg.tl{top:8px;left:8px}.wz-reg.tr{top:8px;right:8px} .wz-reg.bl{bottom:8px;left:8px}.wz-reg.br{bottom:8px;right:8px} body.pr-chrome .wz-reg.bl{bottom:34px} body.pr-chrome .wz-reg.br{bottom:34px} /* ══ OPT-IN (.pr-chrome): carimbo no topo + rodapé de telemetria ══ */ #wz-carimbo{position:fixed;top:0;left:0;right:0;z-index:60;height:26px;display:flex;align-items:center; background:rgba(5,7,11,.94);border-bottom:1px solid var(--line-hi);backdrop-filter:blur(3px); font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--text3); text-transform:uppercase;white-space:nowrap;overflow:hidden;} #wz-carimbo .seg{display:flex;align-items:center;gap:7px;padding:0 12px;height:100%;border-right:1px solid var(--line);} #wz-carimbo .seg b{color:var(--text2);font-weight:700;} #wz-carimbo .mark{color:var(--cyan);font-weight:800;letter-spacing:.2em;} #wz-carimbo .grow{flex:1;border-right:0;} #wz-carimbo .code{color:var(--cyan);border-right:0;} #wz-carimbo a{color:var(--text3);text-decoration:none;} #wz-carimbo a:hover{color:var(--cyan);} body.pr-chrome{ padding-top:26px !important; } /* .pr-bus = só o RODAPÉ de telemetria (páginas com header próprio: my/jarvis/saul/bin/todos) */ #wz-bus{position:fixed;left:0;right:0;bottom:0;z-index:60;height:28px;display:flex;align-items:center; padding:0 10px;background:rgba(5,7,11,.94);border-top:1px solid var(--line-hi);backdrop-filter:blur(3px); font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--text3); text-transform:uppercase;white-space:nowrap;overflow:hidden;} #wz-bus .seg{display:flex;align-items:center;gap:6px;padding:0 13px;position:relative;} #wz-bus .seg:not(:first-child)::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line);} #wz-bus .v{color:var(--cyan);letter-spacing:.05em;font-weight:600;} #wz-bus .led{width:6px;height:6px;background:var(--green);flex:0 0 auto;animation:wz-led 2.2s infinite;} #wz-bus .grow{flex:1;} #wz-bus .dim{color:var(--text3);letter-spacing:.22em;} @keyframes wz-led{0%,100%{box-shadow:0 0 7px rgba(34,197,94,.8)}50%{box-shadow:0 0 2px rgba(34,197,94,.3)}} body.pr-chrome, body.pr-bus{ padding-bottom:28px !important; } body.pr-bus .wz-reg.bl{bottom:34px} body.pr-bus .wz-reg.br{bottom:34px} @media (prefers-reduced-motion:reduce){ #wz-bus .led{animation:none} } @media (max-width:720px){ #wz-carimbo .seg.opt, #wz-bus .dim{display:none} .wz-reg{display:none} } /* ══ CAMADA PROFUNDA — o traço do cockpit aplicado ao GROSSO da UI ══ border-radius:0 com !important vence até estilo INLINE (o Dashboard tem milhares) → todo card/botão/pill vira canto reto de prancha num golpe. Whitelist mínima devolve o círculo a quem PRECISA ser redondo. */ body.prancha *, body.prancha *::before, body.prancha *::after{ border-radius:0 !important; } body.prancha [class*="avatar"], body.prancha [class*="Avatar"], body.prancha [class*="spinner"], body.prancha [class*="spin"], body.prancha [class*="orb"], body.prancha [class*="ring"], body.prancha .wz-reg::before{ border-radius:50% !important; } /* sombra fofa de card → fora (prancha é linha, não sombra) */ body.prancha [style*="box-shadow"]{ box-shadow:none !important; } /* foco = anel ciano fino (linguagem do cockpit) */ body.prancha :focus-visible{ outline:1px solid var(--cyan) !important; outline-offset:1px; } /* hr → régua de calibração */ body.prancha hr{ border:0 !important; height:7px !important; background: linear-gradient(var(--line-hi),var(--line-hi)) 0 100%/100% 1px no-repeat, repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) 0 100%/100% 4px no-repeat, repeating-linear-gradient(90deg,var(--line-hi) 0 1px,transparent 1px 40px) 0 100%/100% 7px no-repeat !important; } /* ── componentes opt-in (aprofundar quando quiser): chanfro, divisor indexado ── */ .pr-panel{position:relative;background:var(--bg-el);border:1px solid var(--line);} .pr-panel::before{content:'';position:absolute;inset:-1px;pointer-events:none; background: linear-gradient(var(--pr-brk),var(--pr-brk)) 0 0/11px 1px no-repeat, linear-gradient(var(--pr-brk),var(--pr-brk)) 0 0/1px 11px no-repeat, linear-gradient(var(--pr-brk),var(--pr-brk)) 100% 0/11px 1px no-repeat, linear-gradient(var(--pr-brk),var(--pr-brk)) 100% 0/1px 11px no-repeat, linear-gradient(var(--pr-brk),var(--pr-brk)) 0 100%/11px 1px no-repeat, linear-gradient(var(--pr-brk),var(--pr-brk)) 0 100%/1px 11px no-repeat, linear-gradient(var(--pr-brk),var(--pr-brk)) 100% 100%/11px 1px no-repeat, linear-gradient(var(--pr-brk),var(--pr-brk)) 100% 100%/1px 11px no-repeat;} .pr-divider{display:flex;align-items:center;gap:10px;margin:22px 0 12px; font-size:10.5px;font-weight:700;letter-spacing:.3em;color:var(--text2);text-transform:uppercase;} .pr-divider::before{content:attr(data-ix);flex:none;font-size:9.5px;letter-spacing:.12em;color:var(--cyan); padding:2px 6px;border:1px solid rgba(0,229,255,.35);background:rgba(0,229,255,.06);} .pr-divider::after{content:'';flex:1;height:7px; background: linear-gradient(var(--line-hi),var(--line-hi)) 0 100%/100% 1px no-repeat, repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) 0 100%/100% 4px no-repeat, repeating-linear-gradient(90deg,var(--line-hi) 0 1px,transparent 1px 40px) 0 100%/100% 7px no-repeat;}