/*! ============================================================================ Leads Per Hour — lph.css · v2026.1 A FOLHA CANÔNICA da identidade. Importe ESTE arquivo no produto em vez de copiar tokens/estilos à mão — é assim que fontes, espaçamentos, botões e gráficos saem 100% no padrão. COMO USAR 1) No produto: (ou hospedada: https://central-de-id-leads-per-hour.pages.dev/lph.css) 2) As fontes carregam sozinhas: este arquivo declara @font-face apontando para ./fonts/ (Switzer-Variable.woff2 e Inter-Variable.ttf ao lado). 3) Use as CLASSES daqui (btn-primary, stats, fbar, temp, chan, oracle-note, heat, scr/login…) — não redeclare cores, fontes ou raios. 4) Tema claro: . Escuro é o padrão do produto. 5) Valide o resultado com assets/verificar-id.py (zero ERROS para entregar). Obs.: os nomes de classe são curtos (padrão do ecossistema LPH). Ao integrar num app legado com CSS próprio, monte as telas a partir do screen-template.html para evitar colisões de nomes. ============================================================================ */ /* ===== 0 · FONTES (arquivos em ./fonts/) ================================= */ @font-face{ font-family:'Switzer'; src:url('fonts/Switzer-Variable.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; } @font-face{ font-family:'Inter'; src:url('fonts/Inter-Variable.ttf') format('truetype'); font-weight:100 900;font-style:normal;font-display:swap; } /* ===== 1 · TOKENS ========================================================= */ :root{ /* cores de marca (oficiais) */ --chama:#f2552c; --rubi:#d8321a; --noite:#1d262d; --lago:#203e49; --agua:#115e66; --obsidiana:#131313; --branco:#ffffff; /* superfícies (derivadas do Azul Noite) — o padrão é TUDO flat sobre --bg */ --bg:#141b1f; --s1:#1a2229; --s2:#1d262d; --s3:#26313a; --well:#0f1417; /* hairlines */ --ln:rgba(255,255,255,.07); --ln2:rgba(255,255,255,.14); /* texto */ --tx:#f4f7f8; --t2:#9aa7ad; --t3:#6d7a81; /* acento primário (Chama) — um por vista */ --ac:#f2552c; --ac2:#f57756; --ac-press:#da4d28; --acsoft:rgba(242,85,44,.12); --on-ac:#ffffff; /* acento frio (Oráculo/info) */ --cool:#115e66; --cool2:#2a8a91; --coolsoft:rgba(17,94,102,.16); --on-cool:#ffffff; /* semânticos */ --ok:#2fbf71; --warn:#f5a623; --danger:#d8321a; /* canais (cor no GLIFO; botão neutro) */ --wa:#25d366; --li:#3b82c4; --call:#2a8a91; /* temperatura */ --hot:#f2552c; --warm:#f5a623; --cold:#4a9ba6; /* geometria */ --r:12px; --r-sm:8px; --r-lg:16px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; /* gradientes de marca (só nas assinaturas) */ --grad-chama:linear-gradient(135deg,#f2552c 0%,#d8321a 100%); --grad-spectrum:linear-gradient(90deg,#f2552c 0%,#d8321a 26%,#203e49 70%,#115e66 100%); /* gráficos (ordem fixa de séries) */ --chart-1:#f2552c; --chart-2:#2a8a91; --chart-3:#6d7a81; --chart-grid:rgba(255,255,255,.07); /* tipografia */ --font-display:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* diversos */ --scroll:#2a353d; --pop-shadow:0 24px 60px rgba(0,0,0,.45); color-scheme:dark; } [data-theme="light"]{ --bg:#fcfcfd; --s1:#f2f4f5; --s2:#ffffff; --s3:#e9edee; --well:#edf0f1; --ln:rgba(29,38,45,.10); --ln2:rgba(29,38,45,.20); --tx:#1d262d; --t2:#5c6b73; --t3:#7c878d; --ac2:#da4d28; --ac-press:#c24423; --acsoft:rgba(242,85,44,.10); --cool2:#0f555c; --coolsoft:rgba(17,94,102,.10); --ok:#14834a; --warn:#a8690a; --danger:#c22d15; --wa:#1da851; --li:#0a66c2; --call:#0f6a72; --hot:#da4d28; --warm:#a8690a; --cold:#29717d; --scroll:#c9d1d4; --pop-shadow:0 18px 44px rgba(29,38,45,.16); --chart-2:#0f6a72; --chart-3:#8e999f; --chart-grid:rgba(29,38,45,.10); color-scheme:light; } /* ===== 2 · BASE =========================================================== */ *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.15} .display{font-weight:700;letter-spacing:-.02em} ::selection{background:var(--ac);color:#fff} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px} .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:var(--well);border:1px solid var(--ln);border-radius:5px;padding:1px 6px;color:var(--t2)} /* ===== 3 · ASSINATURAS DA MARCA ========================================== */ .rule-brand{height:2px;border:0;background:var(--grad-spectrum)} .slash-label{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)} .slash-label::before{content:"/ ";color:var(--ac);font-weight:700} .num{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .live-bolt{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ok)} .live-bolt .ic{width:11px;height:11px;animation:lph-blink 1.6s infinite} @keyframes lph-blink{0%,100%{opacity:1}50%{opacity:.35}} /* ===== 4 · APP-SHELL ====================================================== */ .app{display:grid;grid-template-rows:54px 1fr;height:100vh} .top{display:flex;align-items:center;gap:14px;padding:0 20px;position:relative} .top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-spectrum)} .top .brand{display:flex;align-items:center;gap:9px} .top .brand .mark{width:28px;height:28px;flex:none;display:block} .top .brand .wm{display:flex;flex-direction:column;line-height:1} .top .brand .wm b{font-family:var(--font-display);font-weight:700;font-size:14.5px} .top .brand .wm small{font-size:8px;color:var(--t3);font-weight:600;letter-spacing:.6px;margin-top:2px} .page-title{font-size:13.5px;color:var(--t2);display:flex;align-items:center;gap:10px} .page-title::before{content:"/";color:var(--ac);font-weight:700} .spacer{flex:1} .credit{font-size:12px;color:var(--t3)} .credit b{color:var(--t2);font-weight:600;font-variant-numeric:tabular-nums} .av,.avz{width:28px;height:28px;border-radius:50%;background:var(--s2);border:1px solid var(--ln2);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:var(--t2)} .avz{width:30px;height:30px;background:var(--s3)} .avstack{display:flex} .avstack .avz{margin-left:-8px;box-shadow:0 0 0 2px var(--bg)} .avstack .avz:first-child{margin-left:0} .theme-btn{background:none;border:0;color:var(--t3);cursor:pointer;display:flex;padding:4px} .theme-btn:hover{color:var(--tx)} .body{display:grid;grid-template-columns:224px 1fr;overflow:hidden} .side{border-right:1px solid var(--ln);display:flex;flex-direction:column;overflow-y:auto;padding-top:10px} .nav{padding:6px 12px;flex:1} .nav .grp{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);padding:16px 10px 6px} .nav .grp::before{content:"/ ";color:var(--ac);font-weight:700} .nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-left:2px solid transparent;color:var(--t2);text-decoration:none;font-size:13px;border-radius:0 var(--r-sm) var(--r-sm) 0} .nav a .ic{width:17px;height:17px;color:var(--t3)} .nav a:hover{color:var(--tx);background:var(--s1)} .nav a:hover .ic{color:var(--t2)} .nav a.on{border-left-color:var(--ac);color:var(--tx);background:linear-gradient(90deg,var(--acsoft),transparent 65%)} .nav a.on .ic{color:var(--ac)} .side .user{border-top:1px solid var(--ln);padding:12px 16px;display:flex;align-items:center;gap:10px} .side .user .who{flex:1;min-width:0} .side .user .who b{display:block;font-size:12.5px;font-weight:600} .side .user .who span{font-size:11px;color:var(--t3)} .side .user button{background:none;border:0;color:var(--t3);cursor:pointer;display:flex} .side .user button:hover{color:var(--danger)} /* rail estreito (direção Oráculo) */ .rail{width:60px;border-right:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0} .rail a{width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--t3)} .rail a:hover{background:var(--s1);color:var(--tx)} .rail a.on{background:var(--acsoft);color:var(--ac)} .rail .sep{width:22px;height:1px;background:var(--ln);margin:6px 0} .rail .end{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px} .main{overflow-y:auto;padding:30px 36px 64px} .wrap{max-width:1040px;margin:0 auto} .eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)} .eyebrow::before{content:"/ ";color:var(--ac);font-weight:700} .h1{font-family:var(--font-display);font-size:25px;font-weight:600;letter-spacing:-.02em;margin-top:8px} .sub{color:var(--t2);font-size:13px;margin-top:4px} .muted{color:var(--t2)} .section{margin-top:34px} .section>header{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--ln)} .section>header h2{font-size:14px;font-weight:600} .section>header .cap{font-size:11.5px;color:var(--t3)} .section>header .end{margin-left:auto;font-size:12px;color:var(--t3)} .hair-t{border-top:1px solid var(--ln)} .hair-b{border-bottom:1px solid var(--ln)} /* ===== 5 · BOTÕES (um primário por vista) ================================ */ .btn-primary{background:var(--ac);color:#fff;border:0;border-radius:var(--r-sm);padding:8px 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none} .btn-primary:hover{background:var(--ac2)} .btn-primary:active{background:var(--ac-press)} .btn-line{background:transparent;color:var(--tx);border:1px solid var(--ln2);border-radius:var(--r-sm);padding:7px 13px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none} .btn-line:hover{border-color:var(--t3)} .btn-text{background:none;border:0;color:var(--t2);padding:7px 4px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer} .btn-text:hover{color:var(--tx)} .btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(216,50,26,.4);border-radius:var(--r-sm);padding:7px 13px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer} .btn-danger:hover{background:rgba(216,50,26,.08)} .lnk{background:none;border:0;color:var(--cool2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:0;text-decoration:none} .lnk:hover{text-decoration:underline;text-underline-offset:3px} .lnk.mut{color:var(--t3);font-weight:500} /* ===== 6 · FORMULÁRIOS ==================================================== */ .fld{margin-top:16px} .fld label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:7px} .inp{display:flex;align-items:center;gap:9px;background:var(--s1);border:1px solid var(--ln2);border-radius:var(--r-sm);padding:0 12px} .inp:focus-within{border-color:var(--ac)} .inp .ic{color:var(--t3);width:16px;height:16px} .inp input{flex:1;background:none;border:0;outline:0;color:var(--tx);font:inherit;font-size:14px;padding:11px 0;min-width:0} .inp input::placeholder{color:var(--t3)} .inp .eye{background:none;border:0;color:var(--t3);cursor:pointer;display:flex;padding:4px} .inp .eye:hover{color:var(--t2)} .selectish{display:flex;align-items:center;gap:9px;background:var(--s1);border:1px solid var(--ln2);border-radius:var(--r-sm);padding:10px 13px;font-size:13px;cursor:pointer} .selectish:hover{border-color:var(--t3)} .selectish small{margin-left:auto;color:var(--t3)} .chk{display:inline-flex;align-items:center;gap:8px;color:var(--t2);cursor:pointer;font-size:12.5px} .chk input{appearance:none;width:16px;height:16px;border:1px solid var(--ln2);border-radius:5px;background:var(--s1);cursor:pointer;position:relative} .chk input:checked{background:var(--ac);border-color:var(--ac)} .chk input:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .tog{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t2);cursor:pointer} .tog i{width:34px;height:19px;border-radius:999px;background:var(--s3);position:relative;transition:.15s;flex:none} .tog i::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.15s} .tog.on i{background:var(--ac)} .tog.on i::after{left:17px} .seg{display:inline-flex;background:var(--s2);border:1px solid var(--ln);border-radius:var(--r-sm);padding:2px} .seg button{background:none;border:0;color:var(--t2);font:inherit;font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer} .seg button.on{background:var(--ac);color:#fff} .tabs,.filters{display:flex;gap:20px;border-bottom:1px solid var(--ln)} .tabs button,.filters button{background:none;border:0;color:var(--t3);font:inherit;font-size:12.5px;font-weight:500;padding:7px 2px 10px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap} .tabs button:hover,.filters button:hover{color:var(--t2)} .tabs button.on,.filters button.on{color:var(--tx);border-bottom-color:var(--ac)} .filters button span{color:var(--t3);font-variant-numeric:tabular-nums;margin-left:5px} .chip{display:inline-flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--ln);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--t2);cursor:pointer} .chip.on{border-color:var(--ac);color:var(--ac);background:var(--acsoft)} .chip .x{color:var(--t3);font-weight:600} .var{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--coolsoft);color:var(--cool2);border-radius:4px;padding:1px 6px;border:0} /* ===== 7 · DADOS & GRÁFICOS ============================================== */ .stats{display:grid;grid-template-columns:repeat(var(--stats-cols,4),1fr)} .stats>div{padding:2px 22px 4px;border-left:1px solid var(--ln)} .stats>div:first-child{padding-left:0;border-left:0} .stats .k{font-size:11px;color:var(--t3)} .stats .v{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:2px} .stats .v small{font-size:15px;font-weight:600;color:var(--t3);margin-left:2px} .stats .d{font-size:11.5px;color:var(--t3);margin-top:1px} .stats .d.up{color:var(--ok)} .stats .d.hot{color:var(--hot)} .fbar{display:flex;align-items:center;gap:14px;margin:11px 0} .fbar .fl{width:88px;font-size:12.5px;color:var(--t2)} .fbar .ft{flex:1;height:8px;background:var(--well);border-radius:4px;overflow:hidden} .fbar .ft span{display:block;height:100%;background:var(--ac);border-radius:4px} .fbar .fv{width:130px;text-align:right;font-size:12.5px;color:var(--t3)} .fbar .fv b{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:600;color:var(--tx);font-size:13.5px;margin-right:6px} .hbar{display:flex;align-items:center;gap:14px;margin:13px 0} .hbar .hl{width:110px;font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:8px} .hbar .hl .ic{width:15px;height:15px} .hbar.wa .hl .ic{color:var(--wa)} .hbar.mail .hl .ic{color:var(--t3)} .hbar.call .hl .ic{color:var(--call)} .hbar .ht{flex:1;height:8px;background:var(--well);border-radius:4px;overflow:hidden} .hbar .ht span{display:block;height:100%;background:var(--chart-1);border-radius:4px} .hbar .hv{width:120px;text-align:right;font-size:12.5px;color:var(--t3)} .hbar .hv b{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:600;color:var(--tx);font-size:13.5px;margin-right:6px} .stack{display:flex;height:10px;border-radius:5px;overflow:hidden} .stack span{display:block;height:100%} .stack-leg{display:flex;gap:22px;margin-top:12px;font-size:12px} .stack-leg .it{display:flex;align-items:center;gap:7px;color:var(--t2)} .stack-leg .it i{width:8px;height:8px;border-radius:2px;display:inline-block} .stack-leg .it b{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:600;color:var(--tx)} .heat{display:grid;grid-template-columns:44px repeat(11,1fr);gap:4px} .heat .hh{font-size:10px;color:var(--t3);text-align:center;font-variant-numeric:tabular-nums} .heat .hd{font-size:10.5px;color:var(--t3);display:flex;align-items:center} .heat .c{aspect-ratio:1.6;border-radius:4px;background:var(--well)} .heat .best{outline:1.5px solid var(--ac);outline-offset:1px} .heat-leg{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:11px;color:var(--t3)} .heat-leg .bar{width:120px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--well),rgba(242,85,44,.35),rgba(242,85,44,.95))} .chart svg{width:100%;height:auto;display:block} .legend{display:flex;gap:20px;margin-top:10px;font-size:11.5px;color:var(--t2)} .legend i{display:inline-block;width:14px;height:2.5px;border-radius:2px;vertical-align:middle;margin-right:7px} .spark{width:88px;height:24px;display:block} table.t{width:100%;border-collapse:collapse;font-size:13px} table.t th{text-align:left;color:var(--t3);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:9px 12px;border-bottom:1px solid var(--ln)} table.t td{padding:13px 12px;border-bottom:1px solid var(--ln)} table.t tr:hover td{background:var(--s1)} table.t td.n{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:600} table.t .who b{font-weight:600;display:block} table.t .who span{font-size:11.5px;color:var(--t3)} .prog .pl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--t3);margin-bottom:6px} .prog .pl b{color:var(--t2);font-weight:600;font-family:var(--font-display);font-variant-numeric:tabular-nums} .prog .pt{height:6px;background:var(--well);border-radius:3px;overflow:hidden} .prog .pt span{display:block;height:100%;background:var(--ac);border-radius:3px} /* ===== 8 · STATUS ========================================================= */ .temp{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500} .temp .ic{width:13px;height:13px} .temp.hot{color:var(--hot)} .temp.warm{color:var(--warm)} .temp.cold{color:var(--cold)} .tdot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block} .tdot.hot{background:var(--hot)} .tdot.warm{background:var(--warm)} .tdot.cold{background:var(--cold)} .chan{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--ln2);border-radius:var(--r-sm);padding:6px 11px;font:inherit;font-size:12px;font-weight:500;color:var(--tx);cursor:pointer;text-decoration:none} .chan:hover{border-color:var(--t3)} .chan .ic{width:15px;height:15px} .chan.wa .ic{color:var(--wa)} .chan.li .ic{color:var(--li)} .chan.call .ic{color:var(--call)} .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border-radius:999px;padding:3px 9px;border:1px solid var(--ln2);color:var(--t2)} .pill.ok{color:var(--ok);border-color:rgba(47,191,113,.4);background:rgba(47,191,113,.1)} .pill.warn{color:var(--warn);border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.1)} /* ===== 9 · ORÁCULO ======================================================== */ .oracle-line{display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--ln2);padding:11px 2px} .oracle-line:focus-within{border-bottom-color:var(--cool2)} .oracle-line .pfx{font-family:var(--font-display);font-weight:700;color:var(--cool2)} .oracle-line input{flex:1;background:none;border:0;outline:0;color:var(--tx);font:inherit;font-size:14px;min-width:0} .oracle-line input::placeholder{color:var(--t3)} .oracle-sug{display:flex;flex-direction:column;gap:2px;margin-top:10px} .oracle-sug button{display:flex;gap:8px;background:none;border:0;color:var(--t2);font:inherit;font-size:12.5px;padding:5px 2px;cursor:pointer;text-align:left} .oracle-sug button::before{content:"/";color:var(--cool2);font-weight:700} .oracle-sug button:hover{color:var(--tx)} .oracle-note{border-left:2px solid var(--cool2);padding:2px 0 2px 14px} .oracle-note .src{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cool2);display:block;margin-bottom:3px} .oracle-note p{color:var(--t2);font-size:13px} .oracle-note p b{color:var(--tx);font-weight:600} .oracle-note .act{background:none;border:0;color:var(--cool2);font:inherit;font-size:12.5px;font-weight:600;padding:6px 0 0;cursor:pointer} .oracle-note .act:hover{color:var(--tx)} .pal{max-width:520px;background:var(--s2);border:1px solid var(--ln2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--pop-shadow)} .pal .in{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--ln)} .pal .in .pfx{font-family:var(--font-display);font-weight:700;color:var(--ac)} .pal .in input{flex:1;background:none;border:0;outline:0;color:var(--tx);font:inherit;font-size:13.5px;min-width:0} .pal .it{display:flex;align-items:center;gap:11px;padding:9px 16px;font-size:13px} .pal .it .ic{color:var(--t3)} .pal .it:hover,.pal .it.on,.pal .it.k{background:var(--s3)} .pal .it .nm{flex:1} .pal .it .gp{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.07em} .pal .ft{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--ln);font-size:11px;color:var(--t3)} /* ===== 10 · FEEDBACK ====================================================== */ .toast{display:inline-flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--ln2);border-radius:10px;padding:10px 14px;font-size:12.5px;box-shadow:var(--pop-shadow)} .toast .okic{color:var(--ok);display:flex} .toast .undo{background:none;border:0;color:var(--t2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .toast .undo:hover{color:var(--tx)} .tipbox{display:inline-flex;align-items:center;gap:7px;background:var(--s3);border:1px solid var(--ln2);border-radius:8px;padding:7px 11px;font-size:12px;color:var(--tx);box-shadow:var(--pop-shadow)} .tipbox .k{color:var(--t3)} .empty{border:1px dashed var(--ln2);border-radius:var(--r);padding:28px;text-align:center;max-width:420px} .empty .eb{width:34px;height:34px;border-radius:9px;background:var(--acsoft);display:inline-flex;align-items:center;justify-content:center;color:var(--ac);margin-bottom:10px} .empty .eb .ic{width:18px;height:18px} .empty b{display:block;font-weight:600;margin-bottom:3px} .empty p{color:var(--t3);font-size:12.5px;margin:0 auto 12px;max-width:34ch} .err{display:flex;align-items:center;gap:8px;background:rgba(216,50,26,.1);border:1px solid rgba(216,50,26,.35);color:var(--danger);border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px} /* ===== 11 · CONVERSAS (bolhas, lista, feed) ============================== */ .day{display:flex;align-items:center;gap:12px;color:var(--t3);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .day::before,.day::after{content:"";flex:1;height:1px;background:var(--ln)} .msg{max-width:64%;padding:10px 13px;border-radius:12px;font-size:13px} .msg .meta{display:block;font-size:10.5px;color:var(--t3);margin-top:5px} .msg.in{background:var(--s1);border:1px solid var(--ln);border-top-left-radius:4px;align-self:flex-start} .msg.out{background:var(--acsoft);border:1px solid rgba(242,85,44,.22);border-top-right-radius:4px;align-self:flex-end} .msg.auto{align-self:flex-end;background:transparent;border:1px dashed var(--ln2)} .msg.auto .tag{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);display:block;margin-bottom:3px} .feed{display:flex;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px solid var(--ln);font-size:13px} .feed time{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--t3);width:38px;flex:none} .feed b{font-weight:600} .feed .what{color:var(--t2)} .feed .hotword{color:var(--hot);font-weight:500} /* item de briefing (home Oráculo) */ .bi{display:flex;gap:16px;padding:16px 2px;border-bottom:1px solid var(--ln)} .bi time{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--t3);width:44px;flex:none;padding-top:3px} .bi .bd{flex:1} .bi .bd .tt{font-size:14px;font-weight:500} .bi .bd .tt b{font-weight:600} .bi .bd .tt .hotw{color:var(--hot)} .bi .bd .sb{font-size:12.5px;color:var(--t2);margin-top:3px} .bi .bd .acts{display:flex;gap:16px;margin-top:9px;align-items:center} /* ===== 12 · STEPPER DE CADÊNCIA ========================================== */ .steps{border-left:1px solid var(--ln2);margin:18px 0 0 7px} .step{position:relative;padding:10px 12px 12px 22px;border-radius:0 var(--r-sm) var(--r-sm) 0;cursor:pointer;border-left:2px solid transparent;margin-left:-2px} .step:hover{background:var(--s1)} .step.on{background:linear-gradient(90deg,var(--acsoft),transparent 70%);border-left-color:var(--ac)} .step::before{content:"";position:absolute;left:-7px;top:16px;width:11px;height:11px;border-radius:50%;background:var(--t3);border:2.5px solid var(--bg)} .step.on::before{background:var(--ac)} .step .d{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.05em} .step .tt{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;margin-top:1px} .step .tt .ic{width:15px;height:15px} .step .mt{font-size:11.5px;color:var(--t3);margin-top:2px} .step .mt b{color:var(--t2);font-weight:600;font-variant-numeric:tabular-nums} .addstep{margin:14px 0 0 20px;background:none;border:1px dashed var(--ln2);border-radius:var(--r-sm);color:var(--t2);font:inherit;font-size:12.5px;padding:9px 14px;cursor:pointer;width:calc(100% - 20px);text-align:center} .addstep:hover{color:var(--tx);border-color:var(--t3)} /* ===== 13 · TELAS-PADRÃO (auth + sistema) ================================ */ .scr{min-height:100vh;display:grid;grid-template-columns:1.02fr .98fr} .scr.solo{display:flex;align-items:center;justify-content:center;text-align:center;padding:32px} .brand-side{position:relative;overflow:hidden;background:#12181c;color:#f4f7f8;padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between} .brand-side::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 30% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 30% 40%,#000 20%,transparent 75%)} .brand-side .glow{position:absolute;top:34%;left:20%;width:60%;height:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(242,85,44,.16),rgba(216,50,26,.05) 45%,transparent 70%)} .brand-side .bwm{display:flex;align-items:center;gap:10px;position:relative} .brand-side .bwm b{font-family:var(--font-display);font-weight:700;font-size:17px} .brand-side .bwm small{font-size:8px;color:#6d7a81;font-weight:600;letter-spacing:.6px;line-height:1;display:block} .brand-side .mani{position:relative;max-width:16em} .brand-side .mani .eg{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6d7a81} .brand-side .mani .eg::before{content:"/ ";color:var(--ac);font-weight:700} .brand-side .mani h2{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1.05;margin-top:14px} .brand-side .mani h2 .fx{color:var(--ac)} .brand-side .foot{position:relative} .brand-side .rule{height:2px;border-radius:2px;background:var(--grad-spectrum);margin-bottom:12px} .brand-side .foot span{font-size:12px;color:#9aa7ad} .brand-side .bigbolt{position:absolute;right:-40px;bottom:8%;width:280px;opacity:.06;transform:rotate(-6deg)} .form-side{display:flex;align-items:center;justify-content:center;padding:40px 32px;position:relative} .form-side .theme-btn{position:absolute;top:20px;right:20px;padding:6px} .scr .card{width:min(384px,100%)} .scr .card .toplogo{display:none;align-items:center;gap:9px;margin-bottom:26px} .scr .card .toplogo b{font-family:var(--font-display);font-weight:700;font-size:16px} .scr .card .eg{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)} .scr .card .eg::before{content:"/ ";color:var(--ac);font-weight:700} .scr .card h1{font-size:26px;margin-top:8px} .scr .card .sub{color:var(--t2);font-size:13.5px;margin-top:6px} .scr .btn-primary{width:100%;padding:12px;font-size:14px;margin-top:20px} .scr .btn-primary .ic{width:16px;height:16px} .back{display:inline-flex;align-items:center;gap:7px;color:var(--t2);text-decoration:none;font-size:12.5px;margin-bottom:18px} .back:hover{color:var(--tx)} .back .ic{width:15px;height:15px} .rowbetween{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12.5px} .divider{display:flex;align-items:center;gap:12px;color:var(--t3);font-size:11.5px;margin:20px 0} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--ln)} .sso{display:flex;flex-direction:column;gap:10px} .sso button{display:flex;align-items:center;justify-content:center;gap:10px;background:transparent;border:1px solid var(--ln2);border-radius:var(--r-sm);padding:11px;font:inherit;font-size:13.5px;font-weight:500;color:var(--tx);cursor:pointer} .sso button:hover{border-color:var(--t3)} .sso .g{width:16px;height:16px;flex:none} .altfoot{text-align:center;font-size:13px;color:var(--t2);margin-top:24px} .otp{display:flex;gap:10px;margin-top:18px} .otp input{width:100%;aspect-ratio:1;text-align:center;background:var(--s1);border:1px solid var(--ln2);border-radius:var(--r-sm);color:var(--tx);font-family:var(--font-display);font-weight:700;font-size:22px;outline:0} .otp input:focus{border-color:var(--ac)} .solo .box{max-width:400px} .solo .code{font-family:var(--font-display);font-weight:800;font-size:64px;letter-spacing:-.03em;background:var(--grad-chama);-webkit-background-clip:text;background-clip:text;color:transparent} .solo h1{font-size:24px;margin-top:6px} .solo p{color:var(--t2);font-size:14px;margin-top:8px} .solo .btn-primary{width:auto;padding:11px 22px;margin-top:22px} .spin{width:80px;height:110px;margin:0 auto;animation:lph-pulse 1.4s ease-in-out infinite} @keyframes lph-pulse{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:1;transform:scale(1)}} .load-t{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-top:22px} /* ===== 14 · RESPONSIVO ==================================================== */ .twocol{display:grid;grid-template-columns:1.4fr 1fr;gap:48px} @media (max-width:1120px){ .twocol{grid-template-columns:1fr;gap:0} .stats{grid-template-columns:repeat(2,1fr);row-gap:20px} .stats>div:nth-child(odd){border-left:0;padding-left:0} } @media (max-width:920px){ .scr{grid-template-columns:1fr} .brand-side{display:none} .scr .card .toplogo{display:flex} } @media (max-width:860px){ .body{grid-template-columns:1fr} .side{display:none} .main{padding:24px 20px 56px} } @media (prefers-reduced-motion:reduce){ .live-bolt .ic,.spin{animation:none} }