@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --bg:#080d17; --panel:#131d2f; --panel-soft:#1a2740; --line:rgba(150,185,245,.25); --text:#e8f2ff; --muted:#a7bcde; --acc:#1fb6ff; }
body { font-family: Manrope, system-ui, sans-serif; background: radial-gradient(circle at 10% 0%, #1f3558 0, transparent 40%), radial-gradient(circle at 90% 90%, #1f4566 0, transparent 45%), linear-gradient(145deg, #070b12, #10192b); color: var(--text); }
h1,h2,h3,h4,h5,h6,.navbar-brand,.brand-text { font-family: 'Space Grotesk', Manrope, sans-serif; letter-spacing: -.01em; }
.navbar { background: rgba(8,14,24,.8) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; background: linear-gradient(135deg, #0ea5e9, #38bdf8); color: #fff; }
.brand-text { color: #eff6ff; font-size: 1rem; font-weight: 700; }
.list-group-item,.card,.modal-content,.form-control,.custom-select,.table,.table thead th,.table td,.table th { border-color: var(--line) !important; background: rgba(16,24,39,.84) !important; color: var(--text) !important; }
.card,.modal-content { border-radius: 16px; box-shadow: 0 22px 44px rgba(0,0,0,.34); }
.card-header { background: rgba(20,32,52,.82) !important; font-weight: 700; border-bottom: 1px solid var(--line); }
label,th { color: #d8e7ff; font-weight: 600; }
.text-muted,small,.help-block,.form-text { color: var(--muted) !important; }
.form-control,.custom-select { border-radius: 12px; }
.form-control:focus,.custom-select:focus { border-color: rgba(31,182,255,.8) !important; box-shadow: 0 0 0 .2rem rgba(31,182,255,.14) !important; }
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary { background: linear-gradient(135deg, #1fb6ff, #0284c7); border-color: transparent; }
.btn-primary:hover,.btn-primary:focus { background: linear-gradient(135deg, #22d3ee, #0ea5e9); border-color: transparent; }
.btn-info { background: linear-gradient(135deg, #06b6d4, #0ea5e9); border-color: transparent; }
.btn-danger { background: linear-gradient(135deg, #f87171, #dc2626); border-color: transparent; }
.badge { border-radius: 999px; }
.table-hover tbody tr:hover { background-color: rgba(31,182,255,.08); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); }
.progress { background: rgba(255,255,255,.12); border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, #22d3ee, #0ea5e9); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: #7ed8ff; font-weight: 800; }
.eula-scroll { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: rgba(6,11,19,.76); padding: 1rem; line-height: 1.5; }
.marketing-auth-page { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at center, rgba(0,0,0,.84) 20%, rgba(0,0,0,.12) 75%); pointer-events: none; }
.auth-layout { width: min(1080px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; z-index: 1; }
.auth-layout.compact { grid-template-columns: 1fr; max-width: 700px; }
.auth-copy h1 { font-size: clamp(2rem, 3.6vw, 3.55rem); line-height: 1.07; margin-bottom: .8rem; }
.auth-copy p { max-width: 48ch; color: var(--muted); }
.auth-card { width: 100%; max-width: 440px; border-radius: 20px; border: 1px solid var(--line); background: rgba(12,20,33,.84); padding: 2rem; box-shadow: 0 30px 55px rgba(0,0,0,.38); backdrop-filter: blur(12px); }
.auth-card-wrap.wide .auth-card { max-width: none; }
.metric-card { border: 1px solid var(--line); background: rgba(10,17,29,.82); border-radius: 12px; padding: 1rem; }
.metric-card span { display: block; color: var(--muted); font-size: .79rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.metric-card strong { color: #f3f8ff; font-size: 1rem; }
@media (max-width: 992px) { .auth-layout { grid-template-columns: 1fr; gap: 1.3rem; } .auth-copy { text-align: center; } .auth-copy p { margin: 0 auto; } }
@media (max-width: 768px) { .auth-card { padding: 1.4rem; } .brand-text { display: none; } }