@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ========================================================================== Tokens — tema escuro. A cor de destaque é trocada via ========================================================================== */ :root { --bg: #0A0C11; --bg-2: #0D1017; --surface: #12151D; --surface-2: #181C26; --surface-3: #1F2430; --surface-4: #272D3B; --line: rgba(255, 255, 255, .06); --line-2: rgba(255, 255, 255, .1); --line-3: rgba(255, 255, 255, .16); --text: #EAEDF3; --text-2: #A2A9B8; --text-3: #6A7284; --accent-rgb: 124, 108, 246; --accent: rgb(var(--accent-rgb)); --accent-2: #A855F7; --accent-ink: #fff; --accent-soft: rgba(var(--accent-rgb), .12); --accent-soft-2: rgba(var(--accent-rgb), .22); --accent-line: rgba(var(--accent-rgb), .38); --accent-text: color-mix(in srgb, var(--accent) 55%, #fff); --green: #34D399; --green-soft: rgba(52, 211, 153, .12); --red: #F4516C; --red-soft: rgba(244, 81, 108, .12); --amber: #FBBF24; --amber-soft: rgba(251, 191, 36, .12); --blue: #60A5FA; --blue-soft: rgba(96, 165, 250, .12); --teal: #2DD4BF; --teal-soft: rgba(45, 212, 191, .12); --pink: #F472B6; --pink-soft: rgba(244, 114, 182, .12); --radius: 16px; --radius-md: 12px; --radius-sm: 9px; --font: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, .6); --shadow-3: 0 30px 80px -20px rgba(0, 0, 0, .75); --shadow-accent: 0 8px 24px -8px rgba(var(--accent-rgb), .55); --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* aliases usados pela página pública do player */ --border: var(--line-2); --text-dim: var(--text-2); --text-faint: var(--text-3); --shadow-pop: var(--shadow-3); --shadow-glow: var(--shadow-accent); --font-display: var(--font); } html[data-accent="orange"] { --accent-rgb: 255, 122, 26; --accent-2: #F43F5E; } html[data-accent="blue"] { --accent-rgb: 59, 130, 246; --accent-2: #06B6D4; } html[data-accent="green"] { --accent-rgb: 16, 185, 129; --accent-2: #84CC16; } html[data-accent="pink"] { --accent-rgb: 236, 72, 153; --accent-2: #8B5CF6; } html[data-accent="red"] { --accent-rgb: 239, 68, 68; --accent-2: #F97316; } /* ========================================================================== base */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent-text); text-decoration: none; transition: color .15s var(--ease); } a:hover { color: #fff; } h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; } h1 { font-size: 26px; font-weight: 800; } h2 { font-size: 20px; } h3 { font-size: 15px; } h4 { font-size: 13.5px; } p { margin: 0 0 8px; color: var(--text-2); } code { font-family: var(--font-mono); background: var(--surface-3); padding: 1px 6px; border-radius: 5px; font-size: 12px; color: var(--accent-text); } hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; } ::selection { background: var(--accent-soft-2); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: #343b4c; background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-track { background: transparent; } .icon { display: inline-flex; width: 17px; height: 17px; flex: 0 0 auto; } .icon svg { width: 100%; height: 100%; } .icon-sm { width: 14px; height: 14px; } .icon-lg { width: 21px; height: 21px; } /* ========================================================================== card */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); position: relative; min-width: 0; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .card-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); min-height: 58px; } .card-head h3 { margin: 0; font-size: 14.5px; display: flex; align-items: center; gap: 9px; } .card-head h3 .icon { color: var(--accent); } .card-head .spacer { flex: 1; } .card-head .sub { color: var(--text-3); font-size: 12px; font-weight: 500; } .card-body { padding: 18px 20px; } .card-body.flush { padding: 0; } .card-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; } /* ========================================================================== buttons */ .btn { --b-bg: var(--surface-2); --b-line: var(--line-2); --b-ink: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--b-bg); color: var(--b-ink); border: 1px solid var(--b-line); height: 38px; padding: 0 15px; border-radius: var(--radius-sm); cursor: pointer; font: 600 13px/1 var(--font); white-space: nowrap; user-select: none; text-decoration: none; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease), opacity .15s; } .btn:hover { background: var(--surface-3); border-color: var(--line-3); color: var(--b-ink); } .btn:active { transform: scale(.97); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft-2); } .btn:disabled, .btn.is-loading { opacity: .5; pointer-events: none; } .btn .icon { width: 16px; height: 16px; } .btn-primary { --b-bg: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent-2))); --b-line: transparent; --b-ink: var(--accent-ink); background: var(--b-bg); box-shadow: var(--shadow-accent); } .btn-primary:hover { background: var(--b-bg); filter: brightness(1.08); border-color: transparent; } .btn-soft { --b-bg: var(--accent-soft); --b-line: var(--accent-line); --b-ink: var(--accent-text); } .btn-soft:hover { background: var(--accent-soft-2); border-color: var(--accent); } .btn-success { --b-bg: var(--green-soft); --b-line: rgba(52, 211, 153, .3); --b-ink: var(--green); } .btn-success:hover { background: rgba(52, 211, 153, .2); border-color: var(--green); } .btn-danger { --b-bg: var(--red-soft); --b-line: rgba(244, 81, 108, .3); --b-ink: #FF7C92; } .btn-danger:hover { background: rgba(244, 81, 108, .2); border-color: var(--red); } .btn-live { --b-bg: linear-gradient(135deg, #F4516C, #E11D48); --b-line: transparent; --b-ink: #fff; background: var(--b-bg); box-shadow: 0 8px 22px -8px rgba(244, 81, 108, .65); } .btn-live:hover { background: var(--b-bg); filter: brightness(1.08); } .btn-ghost { --b-bg: transparent; --b-line: transparent; --b-ink: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); } .btn-light { --b-bg: #fff; --b-line: transparent; --b-ink: #111318; } .btn-light:hover { background: #E9ECF2; border-color: transparent; color: #111318; } .btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; } .btn-xs { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 7px; gap: 5px; } .btn-xs .icon { width: 13px; height: 13px; } .btn-lg { height: 46px; padding: 0 20px; font-size: 14px; border-radius: 11px; } .btn-icon { width: 38px; padding: 0; } .btn-sm.btn-icon { width: 32px; } .btn-xs.btn-icon { width: 26px; } .btn-pill { border-radius: 999px; } .btn-block { width: 100%; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ========================================================================== forms */ input, select, textarea { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); height: 40px; padding: 0 13px; border-radius: var(--radius-sm); width: 100%; font: 500 13.5px var(--font); transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); } textarea { height: auto; padding: 10px 13px; min-height: 80px; resize: vertical; } select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A2A9B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } input:hover, select:hover, textarea:hover { border-color: var(--line-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg); } input::placeholder, textarea::placeholder { color: var(--text-3); } input[type="file"] { height: auto; padding: 8px; font-size: 12.5px; cursor: pointer; } input[type="file"]::file-selector-button { background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text); border-radius: 7px; padding: 6px 12px; margin-right: 10px; font: 600 12px var(--font); cursor: pointer; } input[readonly] { color: var(--text-2); } input[type="range"] { height: auto; padding: 0; border: none; background: none; accent-color: var(--accent); box-shadow: none; } input[type="checkbox"], input[type="radio"] { width: auto; height: auto; accent-color: var(--accent); } label, .label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 7px; font-weight: 600; } .field { margin-bottom: 16px; } .field:last-child { margin-bottom: 0; } .field .hint, .hint { color: var(--text-3); font-size: 12px; margin-top: 7px; line-height: 1.45; } .row { display: flex; gap: 12px; } .row > * { flex: 1; min-width: 0; } .input-icon { position: relative; } .input-icon > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 16px; height: 16px; pointer-events: none; } .input-icon > input { padding-left: 38px; } .copy-field { display: flex; gap: 6px; } .copy-field input { flex: 1; font-family: var(--font-mono); font-size: 12px; } .copy-field .btn { flex: 0 0 auto; } /* Toggle switch: */ .switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; margin: 0; color: var(--text); font-size: 13px; font-weight: 500; user-select: none; } .switch input { position: absolute; opacity: 0; pointer-events: none; } .switch > span { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-4); position: relative; flex: 0 0 auto; transition: background .2s var(--ease); } .switch > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .22s var(--ease-out); } .switch input:checked + span { background: var(--accent); } .switch input:checked + span::after { transform: translateX(16px); } .switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft-2); } /* Segmented control */ .seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { background: none; border: none; color: var(--text-2); height: 30px; padding: 0 13px; border-radius: 7px; font: 600 12.5px var(--font); cursor: pointer; transition: all .15s var(--ease); display: inline-flex; align-items: center; gap: 6px; } .seg button:hover { color: var(--text); } .seg button.active { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-1); } /* Choice tiles (planos, modos) */ .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .choice { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 11px 12px; cursor: pointer; background: var(--bg-2); transition: all .15s var(--ease); } .choice:hover { border-color: var(--line-3); } .choice.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } .choice .c-title { font-weight: 700; font-size: 13px; } .choice .c-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; } /* ========================================================================== badges */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line); } .badge .icon { width: 12px; height: 12px; } .badge-green { background: var(--green-soft); color: var(--green); border-color: rgba(52, 211, 153, .22); } .badge-red { background: var(--red-soft); color: #FF7C92; border-color: rgba(244, 81, 108, .22); } .badge-amber { background: var(--amber-soft); color: var(--amber); border-color: rgba(251, 191, 36, .22); } .badge-blue { background: var(--blue-soft); color: var(--blue); border-color: rgba(96, 165, 250, .22); } .badge-accent { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-line); } .badge-live { background: linear-gradient(135deg, #F4516C, #E11D48); color: #fff; border: none; letter-spacing: .06em; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-3); flex: 0 0 auto; } .dot-green { background: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); } .dot-red { background: var(--red); box-shadow: 0 0 0 3px rgba(244, 81, 108, .18); } .dot-white { background: #fff; } .dot-live { animation: livePulse 1.6s var(--ease) infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; height: 32px; padding: 0 5px 0 13px; font-size: 12.5px; font-weight: 600; color: var(--text); transition: border-color .15s var(--ease), background .15s var(--ease); } .chip:hover { border-color: var(--accent-line); } .chip button { background: none; border: none; color: var(--text-3); cursor: pointer; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: all .12s var(--ease); } .chip button:hover { color: var(--text); background: var(--surface-4); } .chip .icon { width: 13px; height: 13px; } .chip.is-active { border-color: var(--green); background: var(--green-soft); } .cc { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--surface-4); color: var(--text); font: 700 10.5px var(--font-mono); letter-spacing: .04em; } /* ========================================================================== progress */ .progress { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s var(--ease-out); } .progress.warn > i { background: linear-gradient(90deg, #F59E0B, var(--amber)); } .progress.danger > i { background: linear-gradient(90deg, #E11D48, var(--red)); } /* ========================================================================== tables */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 12px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; } th { color: var(--text-3); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-2); } tr:last-child td { border-bottom: none; } tbody tr { transition: background .12s var(--ease); } tbody tr:hover { background: rgba(255, 255, 255, .018); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ========================================================================== toasts */ .toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 11px; background: var(--surface-3); border: 1px solid var(--line-2); padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-3); min-width: 260px; max-width: 380px; animation: toastIn .35s var(--ease-out); } .toast.out { animation: toastOut .25s var(--ease) forwards; } .toast .t-ic { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-text); } .toast .t-ic .icon { width: 14px; height: 14px; } .toast.success .t-ic { background: var(--green-soft); color: var(--green); } .toast.error .t-ic { background: var(--red-soft); color: #FF7C92; } .toast .t-msg { padding-top: 2px; } @keyframes toastIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(16px); } } /* ========================================================================== modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(5, 6, 10, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 900; padding: 20px; animation: fadeIn .18s var(--ease); } .modal-overlay.out { animation: fadeOut .18s var(--ease) forwards; } .modal { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: var(--shadow-3); animation: modalIn .3s var(--ease-out); } .modal.lg { max-width: 640px; } .modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 0; } .modal-head .m-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .modal-head .m-ic.danger { background: var(--red-soft); color: #FF7C92; } .modal-head h3 { margin: 0; font-size: 16px; } .modal-head .m-sub { color: var(--text-3); font-size: 12.5px; margin-top: 1px; } .modal-head .m-close { margin-left: auto; } .modal-body { padding: 18px 22px; overflow-y: auto; } .modal-body > p:first-child { margin-top: 0; } .modal-foot { padding: 0 22px 20px; display: flex; gap: 8px; justify-content: flex-end; } @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { to { opacity: 0; } } .secret-box { background: var(--bg-2); border: 1px dashed var(--line-3); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; user-select: all; color: var(--accent-text); } /* ========================================================================== misc */ .muted { color: var(--text-3); font-size: 12.5px; } .mono { font-family: var(--font-mono); } .tnum { font-variant-numeric: tabular-nums; } .empty { padding: 34px 20px; text-align: center; color: var(--text-3); font-size: 13px; } .empty .icon { width: 30px; height: 30px; margin: 0 auto 10px; display: block; color: var(--surface-4); } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 6px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: currentColor; animation: spin .7s linear infinite; } [data-tip] { position: relative; } [data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #05060A; color: #fff; font: 600 11.5px var(--font); padding: 6px 9px; border-radius: 7px; white-space: nowrap; z-index: 50; pointer-events: none; box-shadow: var(--shadow-2); animation: fadeIn .12s var(--ease); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }