/* Base Theme Variables */ :root { --bg: #0b1020; --bg-soft: #0f152b; --text: #e6e9ef; --muted: #aab0bc; --card: rgba(255, 255, 255, 0.06); --card-border: rgba(255, 255, 255, 0.12); --brand: #4f8cff; --brand-2: #8a5cff; --accent: #22c55e; --danger: #ef4444; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* Light theme overrides */ html[data-theme="light"] { --bg: #f6f7fb; --bg-soft: #ffffff; --text: #1b2430; --muted: #5b6573; --card: rgba(0, 0, 0, 0.04); --card-border: rgba(0, 0, 0, 0.08); --brand: #0d6efd; --brand-2: #6f42c1; } /* Global */ html, body { height: 100%; } body { color: var(--text); background: radial-gradient(1200px 600px at 10% -10%, rgba(79, 140, 255, .25), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(138, 92, 255, .18), transparent 60%), var(--bg); background-attachment: fixed; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; letter-spacing: 0.2px; } .container { max-width: 1100px; } /* Navbar */ .navbar { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); border-bottom: 1px solid var(--card-border); backdrop-filter: blur(8px); } .navbar .navbar-brand { letter-spacing: 0.3px; font-weight: 700; } /* Card / Surfaces */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .card-header { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); border-bottom: 1px solid var(--card-border); color: var(--text); font-weight: 600; } /* Buttons */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: color-mix(in oklab, var(--brand), #000 15%); --bs-btn-hover-border-color: color-mix(in oklab, var(--brand), #000 20%); --bs-btn-focus-shadow-rgb: 79, 140, 255; } .btn-outline-secondary { --bs-btn-color: var(--text); --bs-btn-border-color: var(--card-border); --bs-btn-hover-bg: var(--card); --bs-btn-hover-border-color: var(--brand); } /* Forms */ .form-label { color: var(--muted); font-weight: 600; } .form-control, .form-select { color: var(--text); background: var(--bg-soft); border: 1px solid var(--card-border); } .form-control:focus, .form-select:focus { background: var(--bg-soft); border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(79,140,255,.15); } /* Tables */ .table { color: var(--text); } .table > :not(caption) > * > * { background-color: transparent; } .table-light { background: rgba(255,255,255, .06) !important; color: var(--text); } .table-hover > tbody > tr:hover > * { background: rgba(79, 140, 255, 0.08); } /* Alerts */ .alert { border: 1px solid var(--card-border); border-radius: 12px; } /* Chart container */ .chart-wrap { position: relative; height: 380px; } /* Subtle animations */ .fade-in { animation: fade-in .3s ease-out; } @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Theme toggle */ .theme-toggle { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); border: 1px solid var(--card-border); background: var(--card); }