Spaces:
Running
Running
| /* ===================================================== | |
| AdaptiveAuth UI — Professional Light Theme | |
| ===================================================== */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| /* Background */ | |
| --bg: #f0f4f8; | |
| --surface: #ffffff; | |
| --surface-2: #f8fafc; | |
| /* Borders */ | |
| --border: #e2e8f0; | |
| --border-2: #cbd5e1; | |
| /* Text */ | |
| --text: #0f172a; | |
| --text-2: #334155; | |
| --muted: #64748b; | |
| --placeholder: #94a3b8; | |
| /* Primary — Blue-600 */ | |
| --primary: #2563eb; | |
| --primary-h: #1d4ed8; | |
| --primary-50: #eff6ff; | |
| --primary-100: #dbeafe; | |
| --primary-text: #1e40af; | |
| /* Success — Green-600 */ | |
| --success: #16a34a; | |
| --success-h: #15803d; | |
| --success-50: #f0fdf4; | |
| --success-100: #dcfce7; | |
| --success-border: #86efac; | |
| /* Warning — Amber-600 */ | |
| --warn: #d97706; | |
| --warn-h: #b45309; | |
| --warn-50: #fffbeb; | |
| --warn-100: #fef3c7; | |
| --warn-border: #fcd34d; | |
| /* Danger — Red-600 */ | |
| --danger: #dc2626; | |
| --danger-h: #b91c1c; | |
| --danger-50: #fef2f2; | |
| --danger-100: #fee2e2; | |
| --danger-border: #fca5a5; | |
| /* Info — Sky-600 */ | |
| --info: #0284c7; | |
| --info-50: #f0f9ff; | |
| --info-100: #e0f2fe; | |
| --info-border: #7dd3fc; | |
| /* Layout */ | |
| --r: 8px; | |
| --r-sm: 5px; | |
| --r-lg: 12px; | |
| --shadow-sm: 0 1px 2px rgba(0,0,0,.05); | |
| --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); | |
| --shadow-md: 0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.05); | |
| } | |
| /* ── Base ─────────────────────────────────────────── */ | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| font-size: 14px; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ── Topbar ───────────────────────────────────────── */ | |
| .topbar { | |
| background: var(--surface); | |
| border-bottom: 1px solid var(--border); | |
| height: 56px; | |
| padding: 0 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .topbar-logo { | |
| font-size: 18px; | |
| font-weight: 800; | |
| color: var(--primary); | |
| letter-spacing: -.3px; | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .topbar-logo em { color: var(--text); font-style: normal; font-weight: 600; } | |
| .topbar-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .status-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--danger); | |
| flex-shrink: 0; | |
| transition: background .3s; | |
| } | |
| .status-dot.online { background: var(--success); } | |
| .status-dot.checking { background: var(--warn); animation: pulse 1s ease-in-out infinite; } | |
| /* ── Container ────────────────────────────────────── */ | |
| .container { max-width: 1280px; margin: 0 auto; padding: 28px 28px 60px; } | |
| /* ── Hero ─────────────────────────────────────────── */ | |
| .hero { | |
| padding-bottom: 20px; | |
| margin-bottom: 24px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .hero h1 { | |
| font-size: 24px; | |
| font-weight: 800; | |
| color: var(--text); | |
| letter-spacing: -.4px; | |
| margin-bottom: 4px; | |
| } | |
| .hero h1 span { color: var(--primary); } | |
| .hero p { color: var(--muted); font-size: 13px; } | |
| /* ── Token Bar ────────────────────────────────────── */ | |
| .token-bar { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r); | |
| padding: 10px 16px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .token-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .8px; | |
| color: var(--muted); | |
| white-space: nowrap; | |
| } | |
| .token-val { | |
| flex: 1; | |
| font-family: 'Consolas', 'Cascadia Code', monospace; | |
| font-size: 12px; | |
| color: var(--primary-text); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* ── Main Tabs ────────────────────────────────────── */ | |
| .main-tabs { | |
| display: flex; | |
| gap: 0; | |
| border-bottom: 2px solid var(--border); | |
| margin-bottom: 24px; | |
| overflow-x: auto; | |
| } | |
| .main-tabs button { | |
| background: none; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -2px; | |
| color: var(--muted); | |
| padding: 10px 20px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: color .15s, border-color .15s; | |
| font-family: inherit; | |
| } | |
| .main-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); } | |
| .main-tabs button:hover:not(.active) { color: var(--text-2); } | |
| /* ── Cards ────────────────────────────────────────── */ | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r); | |
| padding: 20px 22px; | |
| margin-bottom: 16px; | |
| box-shadow: var(--shadow); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .7px; | |
| color: var(--muted); | |
| padding-bottom: 12px; | |
| margin-bottom: 14px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .card-header-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding-bottom: 12px; | |
| margin-bottom: 14px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .card-header-row .card-title { | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .7px; | |
| color: var(--muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* ── Buttons ──────────────────────────────────────── */ | |
| button, .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 5px; | |
| padding: 8px 16px; | |
| border: 1px solid transparent; | |
| border-radius: var(--r-sm); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background .12s, filter .1s, transform .08s, box-shadow .12s; | |
| white-space: nowrap; | |
| font-family: inherit; | |
| text-align: center; | |
| } | |
| button:active:not(:disabled) { transform: scale(.97); } | |
| button:disabled { opacity: .45; cursor: not-allowed; } | |
| .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary-h); } | |
| .btn-primary:hover:not(:disabled) { background: var(--primary-h); } | |
| .btn-success { background: var(--success); color: #fff; border-color: var(--success-h); } | |
| .btn-success:hover:not(:disabled) { background: var(--success-h); } | |
| .btn-warn { background: var(--warn); color: #fff; border-color: var(--warn-h); } | |
| .btn-warn:hover:not(:disabled) { background: var(--warn-h); } | |
| .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger-h); } | |
| .btn-danger:hover:not(:disabled) { background: var(--danger-h); } | |
| .btn-ghost { | |
| background: var(--surface); | |
| color: var(--text-2); | |
| border-color: var(--border); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .btn-ghost:hover:not(:disabled) { background: var(--bg); border-color: var(--border-2); } | |
| .btn-sm { padding: 5px 11px; font-size: 12px; } | |
| .btn-full { width: 100%; } | |
| /* ── Forms ────────────────────────────────────────── */ | |
| .form-group { margin-bottom: 13px; } | |
| .form-group label { | |
| display: block; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| margin-bottom: 5px; | |
| text-transform: uppercase; | |
| letter-spacing: .5px; | |
| } | |
| input, select, .form-input { | |
| width: 100%; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-sm); | |
| color: var(--text); | |
| padding: 8px 11px; | |
| font-size: 13px; | |
| font-family: inherit; | |
| transition: border-color .15s, box-shadow .15s; | |
| } | |
| input:focus, select:focus, .form-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px var(--primary-100); | |
| } | |
| input::placeholder { color: var(--placeholder); } | |
| input[readonly] { background: var(--surface-2); color: var(--muted); cursor: default; } | |
| /* ── Response Box ─────────────────────────────────── */ | |
| .resp-box { | |
| margin-top: 10px; | |
| padding: 12px 14px; | |
| border-radius: var(--r-sm); | |
| font-size: 12px; | |
| font-family: 'Consolas', 'Cascadia Code', monospace; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| max-height: 280px; | |
| overflow-y: auto; | |
| line-height: 1.6; | |
| color: var(--text-2); | |
| } | |
| .resp-box.ok { border-color: var(--success-border); color: var(--success); background: var(--success-50); } | |
| .resp-box.err { border-color: var(--danger-border); color: var(--danger); background: var(--danger-50); } | |
| /* ── Callouts ─────────────────────────────────────── */ | |
| .callout { | |
| padding: 12px 15px; | |
| border-radius: var(--r-sm); | |
| font-size: 13px; | |
| line-height: 1.65; | |
| margin-bottom: 14px; | |
| border-left: 3px solid; | |
| } | |
| .callout-info { background: var(--info-50); border-color: var(--info); color: #0c4a6e; } | |
| .callout-success { background: var(--success-50); border-color: var(--success); color: #14532d; } | |
| .callout-warn { background: var(--warn-50); border-color: var(--warn); color: #78350f; } | |
| .callout-danger { background: var(--danger-50); border-color: var(--danger); color: #7f1d1d; } | |
| /* ── Badges & Tags ────────────────────────────────── */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 9px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: .4px; | |
| text-transform: uppercase; | |
| } | |
| .badge-success { background: var(--success-100); color: var(--success); border: 1px solid var(--success-border); } | |
| .badge-warn { background: var(--warn-100); color: var(--warn); border: 1px solid var(--warn-border); } | |
| .badge-danger { background: var(--danger-100); color: var(--danger); border: 1px solid var(--danger-border); } | |
| .badge-info { background: var(--info-100); color: var(--info); border: 1px solid var(--info-border); } | |
| .badge-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } | |
| .tag { | |
| display: inline-block; | |
| padding: 1px 7px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| background: var(--primary-50); | |
| color: var(--primary-text); | |
| margin: 2px; | |
| font-weight: 600; | |
| border: 1px solid var(--primary-100); | |
| } | |
| /* ── Pill ─────────────────────────────────────────── */ | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 3px 9px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .3px; | |
| } | |
| .pill-ok { background: var(--success-100); color: var(--success); border: 1px solid var(--success-border); } | |
| .pill-err { background: var(--danger-100); color: var(--danger); border: 1px solid var(--danger-border); } | |
| .pill-warn{ background: var(--warn-100); color: var(--warn); border: 1px solid var(--warn-border); } | |
| /* ── Step Bar ─────────────────────────────────────── */ | |
| .step-bar { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| overflow-x: auto; | |
| } | |
| .step-item { | |
| flex: 1; | |
| min-width: 120px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r); | |
| padding: 11px 14px; | |
| text-align: center; | |
| box-shadow: var(--shadow-sm); | |
| transition: border-color .2s; | |
| } | |
| .step-item.active { border-color: var(--primary); background: var(--primary-50); } | |
| .step-item.done { border-color: var(--success-border); background: var(--success-50); } | |
| .step-num { | |
| width: 26px; height: 26px; | |
| border-radius: 50%; | |
| background: var(--border); | |
| color: var(--muted); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .step-item.active .step-num { background: var(--primary); color: #fff; } | |
| .step-item.done .step-num { background: var(--success); color: #fff; font-size: 14px; } | |
| .step-label { font-size: 12px; font-weight: 700; color: var(--text-2); } | |
| .step-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } | |
| /* ── Compare Grid ─────────────────────────────────── */ | |
| .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } | |
| .compare-side { | |
| background: var(--surface); | |
| border-radius: var(--r); | |
| padding: 16px; | |
| border: 1px solid var(--border); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .compare-side.success { border-top: 3px solid var(--success); } | |
| .compare-side.danger { border-top: 3px solid var(--danger); } | |
| .compare-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } | |
| .compare-title.success { color: var(--success); } | |
| .compare-title.danger { color: var(--danger); } | |
| .context-list { display: flex; flex-direction: column; gap: 5px; font-size: 13px; margin-bottom: 10px; } | |
| .context-list > div { color: var(--text-2); } | |
| /* ── Risk Gauge ───────────────────────────────────── */ | |
| .gauge-wrap { text-align: center; padding: 10px 0 4px; } | |
| .gauge-val { | |
| font-size: 32px; | |
| font-weight: 800; | |
| letter-spacing: -1px; | |
| line-height: 1; | |
| margin-top: 2px; | |
| } | |
| .gauge-label { | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .8px; | |
| color: var(--muted); | |
| margin-top: 4px; | |
| } | |
| /* ── Level Bar ────────────────────────────────────── */ | |
| .level-bar { display: flex; gap: 4px; margin-top: 8px; } | |
| .level-seg { | |
| flex: 1; height: 7px; border-radius: 4px; | |
| background: var(--border); | |
| transition: background .4s; | |
| } | |
| .level-seg.seg-0 { background: var(--success); } | |
| .level-seg.seg-1 { background: #84cc16; } | |
| .level-seg.seg-2 { background: var(--warn); } | |
| .level-seg.seg-3 { background: #f97316; } | |
| .level-seg.seg-4 { background: var(--danger); } | |
| /* ── Factor Bars ──────────────────────────────────── */ | |
| .factor-row { margin-bottom: 8px; } | |
| .factor-label { | |
| font-size: 12px; | |
| color: var(--muted); | |
| margin-bottom: 4px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .factor-bar-wrap { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } | |
| .factor-bar { height: 100%; border-radius: 4px; transition: width .7s ease; } | |
| /* ── Decision Panel ───────────────────────────────── */ | |
| .decision-panel { | |
| border-radius: var(--r-sm); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| margin-top: 8px; | |
| } | |
| .decision-header { | |
| padding: 11px 14px; | |
| font-size: 14px; | |
| font-weight: 800; | |
| text-align: center; | |
| letter-spacing: .3px; | |
| } | |
| .decision-header.success { background: var(--success-50); color: var(--success); border-bottom: 1px solid var(--success-border); } | |
| .decision-header.challenge{ background: var(--warn-50); color: var(--warn); border-bottom: 1px solid var(--warn-border); } | |
| .decision-header.blocked { background: var(--danger-50); color: var(--danger); border-bottom: 1px solid var(--danger-border); } | |
| .decision-body { padding: 12px 14px; font-size: 13px; background: var(--surface); color: var(--text-2); } | |
| /* ── Attack Log ───────────────────────────────────── */ | |
| .attack-log { | |
| background: #1e1b4b; | |
| border-radius: var(--r-sm); | |
| padding: 10px 13px; | |
| font-family: 'Consolas', monospace; | |
| font-size: 12px; | |
| height: 190px; | |
| overflow-y: auto; | |
| margin-top: 12px; | |
| } | |
| .attack-line { margin: 2px 0; color: #c7d2fe; } | |
| .attack-detected { color: #fcd34d; font-weight: 700; } | |
| .attack-blocked { color: #f9a8d4; font-weight: 700; } | |
| /* ── Anomaly Feed ─────────────────────────────────── */ | |
| .anomaly-item { | |
| background: var(--danger-50); | |
| border: 1px solid var(--danger-border); | |
| border-radius: var(--r-sm); | |
| padding: 10px 13px; | |
| margin-bottom: 8px; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| animation: slideIn .25s ease; | |
| } | |
| .anomaly-type { font-weight: 700; font-size: 13px; color: var(--danger); } | |
| .anomaly-meta { font-size: 11px; color: var(--muted); margin-top: 3px; } | |
| /* ── Monitor Badge ────────────────────────────────── */ | |
| .monitor-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 3px 10px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .4px; | |
| transition: all .2s; | |
| } | |
| .monitor-badge.mon-on { background: var(--danger-100); color: var(--danger); border: 1px solid var(--danger-border); animation: pulse 1.4s ease-in-out infinite; } | |
| .monitor-badge.mon-off { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } | |
| /* ── Monitor Stats ────────────────────────────────── */ | |
| .monitor-stats { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding: 10px 14px; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-sm); | |
| font-size: 12px; | |
| margin-bottom: 10px; | |
| } | |
| .ms-item { display: flex; flex-direction: column; align-items: center; min-width: 56px; } | |
| .ms-val { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.3px; } | |
| .ms-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; } | |
| /* ── Monitor Log ──────────────────────────────────── */ | |
| .monitor-log { | |
| background: #0f172a; | |
| border-radius: var(--r-sm); | |
| padding: 10px 13px; | |
| font-family: 'Consolas', monospace; | |
| font-size: 11.5px; | |
| height: 140px; | |
| overflow-y: auto; | |
| line-height: 1.7; | |
| margin-top: 10px; | |
| } | |
| .ml-ok { color: #86efac; } | |
| .ml-threat { color: #fca5a5; font-weight: 700; } | |
| .ml-warn { color: #fcd34d; } | |
| .ml-info { color: #93c5fd; } | |
| /* ── Stat Boxes ───────────────────────────────────── */ | |
| .stat-box { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r); | |
| padding: 18px 12px; | |
| text-align: center; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .stat-num { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.5px; } | |
| .stat-label { font-size: 10px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .6px; } | |
| /* ── Trust Gauge ──────────────────────────────────── */ | |
| .trust-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; text-align: center; } | |
| /* ── Behavior Bars ────────────────────────────────── */ | |
| .behavior-bar-group { margin-bottom: 10px; } | |
| .behavior-bar-header { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 12px; | |
| margin-bottom: 4px; | |
| color: var(--text-2); | |
| } | |
| .behavior-bar-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } | |
| .behavior-bar-fill { height: 100%; border-radius: 4px; transition: width .5s, background .5s; } | |
| /* ── Code inline ──────────────────────────────────── */ | |
| code { | |
| background: var(--primary-50); | |
| border: 1px solid var(--primary-100); | |
| border-radius: 3px; | |
| padding: 1px 5px; | |
| font-size: 11.5px; | |
| color: var(--primary-text); | |
| font-family: 'Consolas', monospace; | |
| } | |
| /* ── QR Code ──────────────────────────────────────── */ | |
| .qr-img { | |
| max-width: 180px; | |
| border: 3px solid var(--border); | |
| border-radius: var(--r); | |
| display: block; | |
| margin: 10px auto; | |
| } | |
| /* ── Compare (side-by-side) ───────────────────────── */ | |
| .side-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } | |
| .side-item { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; background: var(--surface); } | |
| .side-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } | |
| /* ── Email Status ─────────────────────────────────── */ | |
| .env-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 5px 0; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 12px; | |
| } | |
| .env-key { font-family: 'Consolas', monospace; color: var(--text-2); } | |
| /* ── Grids ────────────────────────────────────────── */ | |
| .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } | |
| .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } | |
| /* ── Utilities ────────────────────────────────────── */ | |
| .flex { display: flex; } | |
| .flex-wrap { flex-wrap: wrap; } | |
| .flex-col { flex-direction: column; } | |
| .items-center { align-items: center; } | |
| .items-start { align-items: flex-start; } | |
| .justify-between{ justify-content: space-between; } | |
| .justify-center{ justify-content: center; } | |
| .gap-1 { gap: 4px; } | |
| .gap-2 { gap: 8px; } | |
| .gap-3 { gap: 12px; } | |
| .gap-4 { gap: 16px; } | |
| .flex-1 { flex: 1; } | |
| .min-w-0{ min-width: 0; } | |
| .mt-1 { margin-top: 4px; } | |
| .mt-2 { margin-top: 8px; } | |
| .mt-3 { margin-top: 12px; } | |
| .mt-4 { margin-top: 16px; } | |
| .mb-1 { margin-bottom: 4px; } | |
| .mb-2 { margin-bottom: 8px; } | |
| .mb-3 { margin-bottom: 12px; } | |
| .mb-4 { margin-bottom: 16px; } | |
| .ml-auto{ margin-left: auto; } | |
| .ml-4 { margin-left: 16px; } | |
| .p-3 { padding: 12px; } | |
| .p-4 { padding: 16px; } | |
| .text-sm { font-size: 12px; } | |
| .text-xs { font-size: 11px; } | |
| .text-muted{ color: var(--muted); } | |
| .text-2 { color: var(--text-2); } | |
| .text-primary { color: var(--primary); } | |
| .text-success { color: var(--success); } | |
| .text-warn { color: var(--warn); } | |
| .text-danger { color: var(--danger); } | |
| .text-center { text-align: center; } | |
| .font-bold { font-weight: 700; } | |
| .font-600 { font-weight: 600; } | |
| .font-800 { font-weight: 800; } | |
| .w-full { width: 100%; } | |
| .uppercase { text-transform: uppercase; } | |
| .letter-wide { letter-spacing: .5px; } | |
| .mono { font-family: 'Consolas', monospace; } | |
| .border-t { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; } | |
| /* ── Animations ───────────────────────────────────── */ | |
| @keyframes slideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } } | |
| @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } | |
| @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } | |
| /* ── Scrollbars ───────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--surface-2); } | |
| ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--muted); } | |
| /* ── Responsive ───────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; } | |
| .compare-grid { grid-template-columns: 1fr; } | |
| .side-compare { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 600px) { | |
| .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } | |
| .container { padding: 16px; } | |
| .topbar { padding: 0 16px; } | |
| } | |