html, body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
* { -webkit-tap-highlight-color: transparent; }

.spinner, .spinner-lg {
    border: 2px solid rgba(16, 185, 129, .15);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
    width: 18px; height: 18px;
}
.spinner-lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fade .2s ease both; }
@keyframes fade { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; }

.kpi { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; }
.kpi .label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#64748b; font-weight:700; }
.kpi .value { font-size:28px; font-weight:800; color:#0f172a; margin-top:6px; }
.kpi .delta { font-size:12px; font-weight:600; margin-top:4px; }
.kpi .delta.up { color:#059669; }
.kpi .delta.down { color:#dc2626; }
.kpi .delta.flat { color:#94a3b8; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; transition: all .15s; border:1px solid transparent; }
.btn-primary { background:#059669; color:#fff; }
.btn-primary:hover { background:#047857; }
.btn-secondary { background:#fff; color:#0f172a; border-color:#e2e8f0; }
.btn-secondary:hover { background:#f8fafc; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-ghost { background:transparent; color:#475569; }
.btn-ghost:hover { background:#f1f5f9; }
.btn-sm { padding:6px 10px; font-size:12px; }

.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; line-height:1; }
.badge-emerald { background:#d1fae5; color:#065f46; }
.badge-amber { background:#fef3c7; color:#92400e; }
.badge-red { background:#fee2e2; color:#991b1b; }
.badge-blue { background:#dbeafe; color:#1e40af; }
.badge-slate { background:#e2e8f0; color:#334155; }
.badge-purple { background:#ede9fe; color:#5b21b6; }

.input, .select, .textarea {
    width:100%; padding:9px 12px; border:1px solid #cbd5e1; border-radius:10px; font-size:14px; background:#fff;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline:none; border-color:#10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}

.table { width:100%; border-collapse: separate; border-spacing:0; font-size:13px; }
.table thead th { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#64748b; font-weight:700; padding:10px 14px; border-bottom:1px solid #e2e8f0; text-align:left; background:#f8fafc; }
.table tbody td { padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.table tbody tr:hover { background:#f8fafc; cursor:pointer; }

.sidebar-link { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:#475569; font-weight:500; font-size:14px; transition: all .12s; }
.sidebar-link:hover { background:#f1f5f9; color:#0f172a; }
.sidebar-link.active { background:#ecfdf5; color:#047857; font-weight:700; }
.sidebar-link i { width:20px; text-align:center; }

.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 18px; border-radius: 12px; color:#fff; font-weight:600; font-size:14px; box-shadow: 0 12px 30px rgba(0,0,0,.2); z-index: 9999; animation: fade .15s; }
.toast.success { background:#059669; } .toast.error { background:#dc2626; } .toast.info { background:#0284c7; }

.modal-backdrop { position: fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; z-index: 100; padding:16px; }
.modal-card { background:#fff; border-radius:16px; max-width:600px; width:100%; max-height:90vh; overflow-y:auto; }

.funnel-step { position: relative; }
.funnel-bar { height: 56px; background: linear-gradient(90deg, #10b981, #34d399); border-radius:10px; display:flex; align-items:center; padding: 0 16px; color:#fff; font-weight:700; transition: width .4s; }
.funnel-drop { color:#dc2626; font-size:11px; font-weight:700; margin-top:4px; }

.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.dot.live { background:#10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: pulse 1.6s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
    70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.scrollbar::-webkit-scrollbar { width:6px; height:6px; }
.scrollbar::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius: 3px; }