/* ═══ Brahmastra Pro — "Aurora Guardian" design system ═══════════════ Deep-space indigo surfaces, a violet→cyan brand gradient, chunky rounded geometry, and tabular mono numerals. Dark is home; light is a first-class guest (data-theme="light" on ). */ :root { /* surfaces */ --bg: #06070d; --surface: #0c101c; --surface-2: #121729; --surface-3: #1a2138; --border: rgba(148, 163, 199, 0.11); --border-strong: rgba(148, 163, 199, 0.24); /* text */ --text: #edeff8; --text-dim: #9aa3bd; --text-faint: #5d6684; /* brand — the violet→cyan aurora. (--gold kept as the legacy token name so every component picks up the new brand automatically.) */ --brand: #8b7cfa; --brand-bright: #a996ff; --brand-dim: rgba(139, 124, 250, 0.14); --gold: var(--brand); --gold-bright: var(--brand-bright); --gold-dim: var(--brand-dim); --cyan: #4cc2ff; --blue: #4cc2ff; --blue-dim: rgba(76, 194, 255, 0.12); --grad-brand: linear-gradient(135deg, #8b7cfa 0%, #4cc2ff 100%); /* semantics */ --green: #2fd884; --green-bright: #52f2a2; --green-dim: rgba(47, 216, 132, 0.12); --red: #ef4655; --red-bright: #ff6b76; --red-dim: rgba(239, 70, 85, 0.12); --amber: #f5a524; --amber-dim: rgba(245, 165, 36, 0.14); /* type */ --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --display: "Space Grotesk", var(--font); --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* shape */ --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --shadow: 0 14px 40px rgba(2, 4, 12, 0.55); --shadow-soft: 0 3px 14px rgba(2, 4, 12, 0.35); --ring-brand: 0 0 0 3px rgba(139, 124, 250, 0.22); } /* ─── Light theme ────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #eef0f7; --surface: #ffffff; --surface-2: #f3f5fb; --surface-3: #e7eaf4; --border: rgba(24, 32, 60, 0.09); --border-strong: rgba(24, 32, 60, 0.18); --text: #171c30; --text-dim: #525d7c; --text-faint: #8a93ab; --brand: #6a58e8; --brand-bright: #5947d6; --brand-dim: rgba(106, 88, 232, 0.13); --cyan: #0284c7; --blue: #0284c7; --blue-dim: rgba(2, 132, 199, 0.11); --grad-brand: linear-gradient(135deg, #6a58e8 0%, #0ea5e9 100%); --green: #0d9f5f; --green-bright: #0a8a52; --green-dim: rgba(13, 159, 95, 0.12); --red: #dc2f3f; --red-bright: #c11929; --red-dim: rgba(220, 47, 63, 0.10); --amber: #b45309; --amber-dim: rgba(180, 83, 9, 0.13); --shadow: 0 14px 40px rgba(24, 32, 60, 0.13); --shadow-soft: 0 3px 14px rgba(24, 32, 60, 0.07); --ring-brand: 0 0 0 3px rgba(106, 88, 232, 0.18); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } /* Aurora backdrop — two soft nebulae behind everything. */ body { background: radial-gradient(1100px 560px at 82% -12%, rgba(139, 124, 250, 0.10), transparent 60%), radial-gradient(900px 620px at -12% 108%, rgba(76, 194, 255, 0.07), transparent 55%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } [data-theme="light"] body { background: radial-gradient(1100px 560px at 82% -12%, rgba(106, 88, 232, 0.10), transparent 60%), radial-gradient(900px 620px at -12% 108%, rgba(14, 165, 233, 0.08), transparent 55%), var(--bg); background-attachment: fixed; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .hidden { display: none !important; } .pos { color: var(--green-bright); } .neg { color: var(--red-bright); } .gold { color: var(--brand-bright); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } ::selection { background: rgba(139, 124, 250, 0.35); } h1, h2, h3 { font-family: var(--display); letter-spacing: -0.015em; } /* ─── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font); font-size: 13px; font-weight: 650; padding: 10px 18px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; background: var(--surface-3); color: var(--text); transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.14s ease, border-color 0.14s ease, color 0.14s ease, background 0.14s ease; text-decoration: none; white-space: nowrap; letter-spacing: 0.01em; } .btn:hover { filter: brightness(1.12); transform: translateY(-1px); } .btn:active { transform: translateY(0.5px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .btn:focus-visible { outline: none; box-shadow: var(--ring-brand); } /* Primary — the aurora gradient. (Class name kept from v3 for compat.) */ .btn-gold { background: var(--grad-brand); color: #fff; border: none; box-shadow: 0 4px 18px rgba(139, 124, 250, 0.30); } .btn-gold:hover { box-shadow: 0 6px 26px rgba(139, 124, 250, 0.45); filter: brightness(1.07); } .btn-green { background: var(--green); color: #032015; box-shadow: 0 4px 16px rgba(47, 216, 132, 0.25); } .btn-danger { background: var(--red); color: #fff; box-shadow: 0 4px 16px rgba(239, 70, 85, 0.25); } .btn-danger:hover { box-shadow: 0 6px 24px rgba(239, 70, 85, 0.42); } .btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text-dim); box-shadow: none; } .btn-outline:hover { color: var(--text); border-color: var(--text-faint); filter: none; } .btn-ghost { background: transparent; color: var(--text-faint); box-shadow: none; } .btn-ghost:hover { color: var(--text); filter: none; } .theme-toggle { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; cursor: pointer; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); transition: all 0.15s ease; } .theme-toggle:hover { color: var(--brand-bright); border-color: var(--brand); transform: translateY(-1px); } .btn-xs { padding: 4px 11px; font-size: 11px; border-radius: 8px; } .btn-sm { padding: 7px 13px; font-size: 12px; border-radius: 9px; } .btn-lg { padding: 13px 26px; font-size: 14px; border-radius: 13px; } .btn-block { width: 100%; } /* ─── Forms ──────────────────────────────────────────────────────── */ input, select, textarea { font-family: var(--font); font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 13px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: var(--ring-brand); } input[type="checkbox"] { width: auto; } label { font-size: 12px; font-weight: 650; color: var(--text-dim); display: block; margin-bottom: 6px; } textarea { resize: vertical; font-family: var(--font); } /* toggle switch */ .switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: all 0.2s ease; } .switch .track::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-faint); transition: all 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); } .switch input:checked + .track { background: var(--grad-brand); border-color: transparent; box-shadow: 0 0 14px rgba(139, 124, 250, 0.35); } .switch input:checked + .track::after { left: 21px; background: #fff; } .switch input:disabled + .track { opacity: 0.5; cursor: not-allowed; } /* ─── Cards, badges, chips ───────────────────────────────────────── */ .card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 42%), var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-soft); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { border-color: var(--border-strong); } [data-theme="light"] .card { background: linear-gradient(180deg, rgba(24, 32, 60, 0.012), transparent 40%), var(--surface); } .card-title { font-size: 11px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--display); } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 750; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-active { background: var(--green-dim); color: var(--green-bright); border-color: rgba(47, 216, 132, 0.25); } .badge-active .dot { animation: pulse 2s infinite; } .badge-locked { background: var(--brand-dim); color: var(--brand-bright); border-color: rgba(139, 124, 250, 0.3); } .badge-killed { background: var(--red-dim); color: var(--red-bright); border-color: rgba(239, 70, 85, 0.3); } .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-dim); cursor: pointer; transition: all 0.13s ease; } .chip:hover { color: var(--text); border-color: var(--text-faint); transform: translateY(-1px); } .chip.on { background: var(--brand-dim); border-color: var(--brand); color: var(--brand-bright); } .chip.on-danger { background: var(--red-dim); border-color: var(--red); color: var(--red-bright); } /* progress meter — chunky, rounded, glowing */ .meter { height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; border: 1px solid var(--border); } .meter > div { height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; } .meter-green > div { background: linear-gradient(90deg, var(--green), var(--green-bright)); box-shadow: 0 0 10px rgba(47, 216, 132, 0.4); } .meter-amber > div { background: linear-gradient(90deg, var(--amber), #ffc94d); box-shadow: 0 0 10px rgba(245, 165, 36, 0.4); } .meter-red > div { background: linear-gradient(90deg, var(--red), var(--red-bright)); box-shadow: 0 0 10px rgba(239, 70, 85, 0.5); } /* tables */ table.ts { width: 100%; border-collapse: collapse; } table.ts th { text-align: left; font-size: 10.5px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); padding: 10px 12px; border-bottom: 1px solid var(--border-strong); font-family: var(--display); } table.ts td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13px; } table.ts tr:last-child td { border-bottom: none; } table.ts tr.clickable { cursor: pointer; } table.ts tr.clickable:hover td { background: rgba(139, 124, 250, 0.05); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } th.num { text-align: right; } /* skeletons */ .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-md); height: 14px; } @keyframes shimmer { to { background-position: -200% 0; } } @keyframes pulse { 50% { opacity: 0.5; } }