@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* ---- Themes: swap the whole palette via [data-theme] on ---- */ :root, [data-theme="terminal-green"] { --bg: #0e1512; --bg-panel: rgba(19, 28, 24, 0.82); --bg-panel-raised: rgba(24, 34, 25, 0.9); --line: #26362c; --text: #d8e5dc; --text-dim: #7d9488; --accent: #5ee6a0; --accent-dim: #2f6b4b; --warn: #e6b85e; --danger: #e66b5e; --vanta-color: 0x5ee6a0; --vanta-bg: 0x0e1512; } [data-theme="amber-console"] { --bg: #0c0906; --bg-panel: rgba(30, 22, 12, 0.85); --bg-panel-raised: rgba(38, 28, 15, 0.92); --line: #3a2c17; --text: #f0dcc0; --text-dim: #a3855e; --accent: #ffb64a; --accent-dim: #7a5420; --warn: #ffd166; --danger: #ff6b5e; --vanta-color: 0xffb64a; --vanta-bg: 0x16110a; } [data-theme="midnight-violet"] { --bg: #141b5c; --bg-panel: rgba(22, 20, 38, 0.82); --bg-panel-raised: rgba(30, 27, 51, 0.92); --line: #2c2850; --text: #ded9f5; --text-dim: #8b84b8; --accent: #a78bfa; --accent-dim: #5b4b9e; --warn: #f2c94c; --danger: #ff6e91; --vanta-color: 0xa78bfa; --vanta-bg: 0x0f0e1a; } [data-theme="solar-light"] { --bg: #f6f3ea; --bg-panel: rgba(255, 255, 255, 0.82); --bg-panel-raised: rgba(240, 236, 224, 0.9); --line: #ddd5bd; --text: #2c2a20; --text-dim: #7a715a; --accent: #b8720a; --accent-dim: #e4c48a; --warn: #b8860a; --danger: #c4432f; --vanta-color: 0xb8720a; --vanta-bg: 0xf6f3ea; } [data-theme="black"] { --bg: #020202; --bg-panel: rgba(18, 18, 18, 0.82); --bg-panel-raised: rgba(28, 28, 28, 0.9); --line: #2d2d2d; --text: #f3f5f7; --text-dim: #9aa3ad; --accent: #e5e7eb; --accent-dim: #4b5563; --warn: #f6c76b; --danger: #ff6b6b; --vanta-color: 0xe5e7eb; --vanta-bg: 0x020202; } :root { --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html, body { height: 100%; } #vanta-bg { position: fixed; inset: 0; z-index: -1; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.5; min-height: 100vh; transition: background 0.3s, color 0.3s; } .frame { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; } .masthead { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; } .masthead-title { display: flex; align-items: center; gap: 10px; } .glyph { color: var(--accent); font-size: 20px; } .masthead h1 { font-family: var(--font-mono); font-weight: 600; font-size: 22px; margin: 0; letter-spacing: 0.02em; } .masthead-sub { color: var(--text-dim); font-family: var(--font-mono); font-size: 13px; } .panel { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .panel-head { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .search-panel { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; gap: 16px; flex-wrap: wrap; } #search { flex: 1; min-width: 220px; background: var(--bg-panel-raised); border: 1px solid var(--line); border-radius: 4px; color: var(--text); padding: 9px 12px; font-family: var(--font-mono); font-size: 14px; } #search:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .counts { color: var(--text-dim); font-size: 13px; font-family: var(--font-mono); white-space: nowrap; } .counts span { color: var(--accent); } .layout { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 16px; } @media (max-width: 860px) { .layout { grid-template-columns: 1fr; } } .server-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-family: var(--font-mono); font-size: 13px; } .server-row:hover { background: var(--bg-panel-raised); } .server-row.active { background: var(--bg-panel-raised); border-left: 2px solid var(--accent); } .server-row:last-child { border-bottom: none; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); } .dot.online { background: var(--accent); box-shadow: 0 0 6px var(--accent); } .server-name { color: var(--text); font-weight: 500; } .server-count-inline { color: var(--accent); font-size: 11px; margin-left: 7px; font-weight: 500; } .total-players-stat { color: var(--accent); font-weight: 600; } .server-host { color: var(--text-dim); font-size: 12px; display: block; } .server-players { color: var(--text-dim); } .detail { min-height: 320px; } .empty-state { padding: 40px 20px; color: var(--text-dim); text-align: center; font-size: 14px; } .detail-body-inner { padding: 14px; } .detail-title { font-family: var(--font-mono); font-size: 16px; margin: 0 0 4px; } .detail-meta { color: var(--text-dim); font-size: 13px; margin-bottom: 14px; font-family: var(--font-mono); } .detail-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .detail-player-count { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--accent); text-align: right; white-space: nowrap; line-height: 1.1; } .detail-player-count-max { color: var(--text-dim); font-size: 16px; font-weight: 500; } .detail-player-count-label { display: block; font-size: 11px; color: var(--text-dim); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; } .detail-player-count-offline { color: var(--text-dim); font-size: 16px; } .chart-wrap { height: 200px; margin-bottom: 18px; } .player-list { display: flex; flex-wrap: wrap; gap: 6px; } .player-chip { background: var(--bg-panel-raised); border: 1px solid var(--line); color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; border-radius: 999px; } .leaderboard-row { display: grid; grid-template-columns: 30px 1fr 90px 140px; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; } .leaderboard-row:last-child { border-bottom: none; } .rank { color: var(--text-dim); } .retention-bar-track { background: var(--bg-panel-raised); border-radius: 3px; height: 8px; overflow: hidden; } .retention-bar-fill { height: 100%; background: var(--accent); } .retention-pct { text-align: right; color: var(--accent); } select { background: var(--bg-panel-raised); color: var(--text); border: 1px solid var(--line); border-radius: 4px; font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; } .masthead-actions { display: flex; align-items: center; gap: 14px; } .btn-ghost, .btn-primary { font-family: var(--font-mono); font-size: 12px; border-radius: 4px; padding: 6px 12px; cursor: pointer; border: 1px solid var(--line); } .btn-ghost { background: transparent; color: var(--text-dim); } .btn-ghost:hover { color: var(--accent); border-color: var(--accent-dim); } .btn-primary { background: var(--accent-dim); color: var(--text); border-color: var(--accent-dim); } .btn-primary:hover { background: var(--accent); color: #06120c; } .settings-panel { padding-bottom: 6px; } .settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 16px; } @media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } } .settings-col h3 { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); margin: 0 0 10px; font-weight: 500; } .settings-col label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; } .settings-col label.checkbox-row { display: flex; align-items: center; gap: 8px; } .settings-col input[type="number"], .settings-col input[type="text"], .settings-col select { display: block; width: 100%; margin-top: 4px; background: var(--bg-panel-raised); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 7px 9px; font-family: var(--font-mono); font-size: 13px; } .settings-col input[type="checkbox"] { width: auto; accent-color: var(--accent); } .inline-form { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .inline-form input { background: var(--bg-panel-raised); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px 8px; font-family: var(--font-mono); font-size: 12px; flex: 1; min-width: 70px; } .settings-list { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--line); padding-right: 2px; } .settings-list::-webkit-scrollbar { width: 6px; } .settings-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .settings-list::-webkit-scrollbar-track { background: transparent; } .settings-search { display: block; width: 100%; margin-bottom: 8px; background: var(--bg-panel-raised); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px 8px; font-family: var(--font-mono); font-size: 12px; } .settings-search:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .settings-list-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); } .settings-list-row:last-child { border-bottom: none; } .settings-list-row .remove-btn { background: transparent; border: 1px solid var(--line); color: var(--danger); border-radius: 4px; cursor: pointer; font-size: 11px; padding: 2px 7px; } .settings-list-row .remove-btn:hover { border-color: var(--danger); } .saved-flash { display: inline-block; margin-left: 10px; color: var(--accent); font-family: var(--font-mono); font-size: 12px; opacity: 0; transition: opacity 0.2s; } .saved-flash.show { opacity: 1; } .ad-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ad-chip { background: rgba(230, 107, 94, 0.08); border: 1px solid var(--danger); color: var(--danger); font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; border-radius: 999px; } /* ---- Tab bar ---- */ .tab-bar { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-family: var(--font-mono); font-size: 13px; padding: 9px 14px; cursor: pointer; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } /* ---- Issues & Logs ---- */ .issues-filters { display: flex; gap: 8px; } .issues-list { max-height: 560px; overflow-y: auto; } .issue-row { display: grid; grid-template-columns: 90px 110px 1fr 130px; gap: 10px; align-items: start; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; } .issue-row:last-child { border-bottom: none; } .issue-level { text-transform: uppercase; font-weight: 600; font-size: 11px; padding: 2px 6px; border-radius: 3px; height: fit-content; text-align: center; } .issue-level.info { color: var(--text-dim); border: 1px solid var(--line); } .issue-level.warning { color: var(--warn); border: 1px solid var(--warn); } .issue-level.error { color: var(--danger); border: 1px solid var(--danger); } .issue-category { color: var(--text-dim); } .issue-message { color: var(--text); } .issue-server { color: var(--text-dim); text-align: right; } .issues-empty { padding: 30px 14px; color: var(--text-dim); text-align: center; } /* ---- Accounts ---- */ .accounts-intro { padding: 14px; color: var(--text-dim); font-size: 13px; border-bottom: 1px solid var(--line); } #add-account-form { padding: 14px 14px 0; } .account-login-status { margin: 0 14px 14px; padding: 12px; background: var(--bg-panel-raised); border: 1px solid var(--accent-dim); border-radius: 6px; font-family: var(--font-mono); font-size: 13px; } .account-login-status .code { color: var(--accent); font-size: 20px; font-weight: 600; letter-spacing: 0.05em; margin: 6px 0; display: block; } .account-login-status a { color: var(--accent); } .account-login-status.status-error { border-color: var(--danger); color: var(--danger); } .account-login-status.status-complete { border-color: var(--accent); } .accounts-full-list { padding: 0 14px 14px; max-height: none; } .account-status-badge { font-size: 10px; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; margin-left: 6px; } .account-status-badge.active { color: var(--accent); border: 1px solid var(--accent); } .account-status-badge.pending { color: var(--warn); border: 1px solid var(--warn); } .account-status-badge.error { color: var(--danger); border: 1px solid var(--danger); } /* ---- Server list issue badge + discrepancy flags in detail view ---- */ .issue-badge { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 6px; box-shadow: 0 0 5px var(--warn); } .flag-chip { background: rgba(230, 184, 94, 0.1); border: 1px solid var(--warn); color: var(--warn); font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; border-radius: 999px; } .flag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }