:root { --bg: #f6f7f9; --surface: #ffffff; --surface-muted: #f1f3f5; --border: #e5e7eb; --text: #111827; --muted: #6b7280; --primary: #c6a15b; --primary-strong: #a8853f; --success: #0f766e; --danger: #b91c1c; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; } * { box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } .navbar { background: var(--surface); border-bottom: 1px solid var(--border); } .navbar-brand { font-weight: 700; letter-spacing: -0.2px; } .nav-link { color: var(--text); } .nav-link:hover, .nav-link:focus { color: var(--primary-strong); } .lang-toggle .btn { border-color: var(--border); color: var(--text); } .lang-toggle .btn.active { background: var(--text); color: #fff; border-color: var(--text); } .hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; } .hero h1 { font-size: 32px; letter-spacing: -0.6px; } .hero p { color: var(--muted); font-size: 15px; } .badge-soft { background: var(--surface-muted); color: var(--muted); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-size: 12px; } .section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; height: 100%; } .section-title { font-size: 20px; letter-spacing: -0.3px; margin-bottom: 16px; } .feature-item { border-bottom: 1px dashed var(--border); padding: 12px 0; } .feature-item:last-child { border-bottom: none; } .cta-btn { background: var(--text); color: #fff; border-radius: var(--radius-sm); padding: 10px 18px; border: 1px solid var(--text); } .cta-btn:hover { background: #000; color: #fff; } .ghost-btn { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 18px; color: var(--text); } .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); font-size: 14px; } .form-control:focus, .form-select:focus { border-color: var(--text); box-shadow: 0 0 0 0.15rem rgba(17, 24, 39, 0.08); } .table { font-size: 13px; } .table thead th { color: var(--muted); font-weight: 600; } .status-pill { border-radius: 999px; padding: 4px 10px; font-size: 12px; border: 1px solid var(--border); } .status-pending { background: #fff7ed; color: #9a3412; } .status-approved { background: #ecfdf3; color: var(--success); } .status-rejected { background: #fef2f2; color: var(--danger); } .footer { color: var(--muted); font-size: 12px; padding: 24px 0 48px; }