:root { color-scheme: light; --bg: #f7f7f6; --surface: #ffffff; --text: #161616; --muted: #6b6b6b; --border: #e5e5e5; --accent: #111111; --accent-soft: #f0f0f0; --radius-sm: 6px; --radius-md: 10px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; } body { font-family: "Space Grotesk", "Segoe UI", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } .navbar { background: var(--surface) !important; } .hero { background: var(--surface); } .section-head { margin-bottom: var(--space-4); } .card, .table { border-color: var(--border) !important; } .card { border-radius: var(--radius-md); } .btn { border-radius: var(--radius-sm); font-weight: 600; } .btn-dark { background: var(--accent); border-color: var(--accent); } .btn-outline-secondary { border-color: var(--border); color: var(--text); } .btn-outline-secondary:hover { background: var(--accent-soft); border-color: var(--border); color: var(--text); } .dropzone { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: var(--space-5); background: var(--surface); position: relative; display: flex; align-items: center; justify-content: center; min-height: 140px; transition: border-color 0.2s ease, background 0.2s ease; } .dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dropzone.is-dragover { border-color: var(--text); background: #fafafa; } .dropzone-placeholder { display: flex; flex-direction: column; gap: var(--space-2); text-align: center; } .table th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .badge { border-radius: 999px; font-weight: 500; } .alert { border-radius: var(--radius-md); } footer { background: var(--surface); }