/* ========================================================================== PoolSync — tema partilhado (broadcast/arena escuro). Tokens + estilos base reutilizáveis por toda a app (admin, overlays, auth). Baseado no design do simple scoreboard. Incluir com: Os tokens (--ps-*) podem ser usados diretamente; a camada base aplica-se a quem adicionar a classe `ps-theme` ao (opt-in, não intrusivo). ========================================================================== */ :root { --ps-bg: #06090f; --ps-panel: #0f1826; --ps-panel2: #16233a; --ps-line: #223350; --ps-line-soft: #1a2740; --ps-text: #eef3fb; --ps-muted: #7e91b0; --ps-accent: #2f7bff; --ps-a: #26d3ee; /* ciano — lado A / destaque frio */ --ps-b: #ff9d3c; /* âmbar — lado B / destaque quente */ --ps-win: #24d67e; --ps-ok: #24d67e; --ps-warn: #f5c542; --ps-crit: #ff4d64; --ps-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --ps-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ps-radius: 14px; --ps-radius-sm: 10px; --ps-shadow: 0 12px 28px rgba(0,0,0,.4); --ps-shadow-lg: 0 24px 60px rgba(0,0,0,.55); --ps-bg-grad: radial-gradient(1200px 560px at 50% -14%, rgba(47,123,255,.10), transparent 60%), linear-gradient(180deg, #080d16, #05070c); --ps-accent-line: linear-gradient(90deg, var(--ps-a), var(--ps-accent), var(--ps-b)); } /* ---- Camada base (opt-in via body.ps-theme) ---- */ .ps-theme { background: var(--ps-bg-grad); background-attachment: fixed; color: var(--ps-text); font-family: var(--ps-sans); -webkit-tap-highlight-color: transparent; } .ps-theme h1, .ps-theme h2, .ps-theme h3 { color: var(--ps-text); letter-spacing: .5px; } .ps-theme a { color: var(--ps-a); } .ps-theme ::selection { background: rgba(47,123,255,.4); } /* Barras de scroll finas e escuras */ .ps-theme ::-webkit-scrollbar { width: 10px; height: 10px; } .ps-theme ::-webkit-scrollbar-track { background: transparent; } .ps-theme ::-webkit-scrollbar-thumb { background: var(--ps-line); border-radius: 8px; } .ps-theme ::-webkit-scrollbar-thumb:hover { background: #2c3e60; } /* ---- Componentes utilitários (classes ps-*) ---- */ .ps-panel { background: var(--ps-panel); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); } .ps-panel--accent { border-top: 3px solid transparent; border-image: var(--ps-accent-line) 1; } .ps-btn { font-family: var(--ps-sans); font-weight: 800; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; padding: 11px 16px; border-radius: var(--ps-radius-sm); border: 1px solid var(--ps-line); background: var(--ps-panel2); color: var(--ps-text); cursor: pointer; transition: border-color .12s, background .12s, transform .1s; } .ps-btn:hover { border-color: var(--ps-accent); } .ps-btn:active { transform: translateY(1px); } .ps-btn:disabled { opacity: .45; cursor: not-allowed; } .ps-btn--primary { background: var(--ps-accent); border-color: var(--ps-accent); color: #fff; } .ps-btn--go { background: var(--ps-win); border-color: var(--ps-win); color: #052e16; } .ps-btn--danger { background: transparent; border-color: var(--ps-crit); color: var(--ps-crit); } .ps-input { font-family: var(--ps-sans); font-size: 15px; color: var(--ps-text); background: var(--ps-panel2); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm); padding: 10px 12px; } .ps-input:focus { outline: none; border-color: var(--ps-accent); } .ps-input::placeholder { color: var(--ps-muted); } .ps-badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ps-line); color: var(--ps-muted); background: rgba(0,0,0,.25); } .ps-title { font-family: var(--ps-mono); text-transform: uppercase; letter-spacing: 3px; } .ps-title-underline { position: relative; } .ps-title-underline::after { content: ""; display: block; width: 88px; height: 3px; margin: 8px auto 0; background: var(--ps-accent-line); border-radius: 3px; box-shadow: 0 0 14px rgba(47,123,255,.5); } .ps-mono { font-family: var(--ps-mono); font-variant-numeric: tabular-nums; }