/* ===================================================================== Portado fielmente de TCB_App_Mockup_Telas_v55.html (fonte definitiva de layout, cores e espaçamento — TCB_Instrucoes_Claude_Code.md). Não alterar valores aqui sem checar contra o mockup original. `.phone` (moldura de celular do mockup, só pra visualizar lado a lado) virou `.app`, que aqui é a própria viewport real. ===================================================================== */ :root{ --bg:#0A0A0C; --brand-panel:#141417; --surface:#1C1C21; --surface-2:#26262D; --line:#3A3A44; --text:#F5F3EE; --text-muted:#9C9CA6; --live:#2F80FF; --live-dim:#132840; --finalizado:#55555E; --futuro:#2A2A33; --futuro-bg:#1F1F26; --accent:#4FA8A0; --star:#F5B301; } *{box-sizing:border-box;} html, body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; height:100%; overflow-x:hidden; } body{ display:flex; flex-direction:column; } /* min-width:0 + overflow-x:hidden: .app é item flex de body (usado pra centralizar em telas largas de desktop) — sem isso, min-width:auto do flexbox faz .app nunca encolher além do min-content do conteúdo mais largo lá dentro (texto sem quebra,