/* SabronPro Phase 28 — Visual Identity & UI/UX Professional System */
:root{
  --sbp-navy-950:#071426;--sbp-navy-900:#0B1B33;--sbp-navy-800:#102845;--sbp-navy-700:#17365C;
  --sbp-blue-600:#2563EB;--sbp-cyan-500:#06B6D4;--sbp-teal-500:#14B8A6;
  --sbp-gold-500:#D6A33A;--sbp-amber-400:#FBBF24;
  --sbp-surface:#FFFFFF;--sbp-bg:#F6F8FC;--sbp-muted:#64748B;--sbp-text:#0F172A;
  --sbp-line:#E2E8F0;--sbp-success:#16A34A;--sbp-warning:#D97706;--sbp-danger:#DC2626;--sbp-info:#0284C7;
  --sbp-radius-sm:10px;--sbp-radius:16px;--sbp-radius-lg:24px;--sbp-radius-xl:32px;
  --sbp-shadow:0 18px 50px rgba(15,23,42,.08);--sbp-shadow-soft:0 8px 28px rgba(15,23,42,.06);
  --sbp-font:'Cairo','IBM Plex Sans Arabic','Tajawal','Noto Sans Arabic',system-ui,-apple-system,Segoe UI,sans-serif;
  --sbp-space-1:4px;--sbp-space-2:8px;--sbp-space-3:12px;--sbp-space-4:16px;--sbp-space-5:20px;--sbp-space-6:24px;--sbp-space-8:32px;
}
html{scroll-behavior:smooth}body{font-family:var(--sbp-font);background:var(--sbp-bg);color:var(--sbp-text)}
.sbp-ui-shell{min-height:100vh;background:radial-gradient(circle at 85% -10%,rgba(6,182,212,.18),transparent 32%),linear-gradient(180deg,#f8fbff 0%,#f2f5fa 100%)}
.sbp-ui-container{width:min(1180px,calc(100% - 32px));margin-inline:auto}.sbp-ui-stack{display:grid;gap:var(--sbp-space-6)}
.sbp-ui-hero{position:relative;overflow:hidden;border-radius:var(--sbp-radius-xl);padding:42px;background:linear-gradient(135deg,var(--sbp-navy-950),var(--sbp-navy-800));color:white;box-shadow:var(--sbp-shadow)}
.sbp-ui-hero:after{content:"";position:absolute;inset:auto -80px -120px auto;width:320px;height:320px;border-radius:50%;background:rgba(214,163,58,.18)}
.sbp-ui-kicker{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);border-radius:999px;color:#e0f2fe;font-weight:800;font-size:13px}
.sbp-ui-title{font-size:clamp(28px,4vw,54px);line-height:1.15;margin:18px 0 12px;font-weight:900;letter-spacing:-.03em}.sbp-ui-subtitle{max-width:820px;color:#dbeafe;font-size:18px;line-height:1.9}
.sbp-ui-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.sbp-ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 18px;font-weight:900;text-decoration:none;cursor:pointer;transition:.18s transform,.18s box-shadow,.18s background}.sbp-ui-btn:hover{transform:translateY(-1px)}
.sbp-ui-btn.primary{background:linear-gradient(135deg,var(--sbp-gold-500),var(--sbp-amber-400));color:#111827;box-shadow:0 10px 24px rgba(214,163,58,.28)}.sbp-ui-btn.secondary{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.18)}.sbp-ui-btn.ghost{background:#fff;color:var(--sbp-navy-900);border:1px solid var(--sbp-line)}
.sbp-ui-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.sbp-ui-card{grid-column:span 4;background:var(--sbp-surface);border:1px solid var(--sbp-line);border-radius:var(--sbp-radius-lg);box-shadow:var(--sbp-shadow-soft);padding:22px;position:relative;overflow:hidden}.sbp-ui-card.wide{grid-column:span 8}.sbp-ui-card.full{grid-column:1/-1}.sbp-ui-card h2,.sbp-ui-card h3{margin:0 0 10px;font-weight:900;color:var(--sbp-navy-900)}.sbp-ui-card p{color:var(--sbp-muted);line-height:1.8;margin:0}.sbp-ui-card .metric{font-size:34px;font-weight:900;color:var(--sbp-navy-900);letter-spacing:-.02em}.sbp-ui-card .label{font-size:13px;color:var(--sbp-muted);font-weight:800}
.sbp-ui-stat{display:flex;align-items:center;justify-content:space-between;gap:12px}.sbp-ui-icon{width:44px;height:44px;border-radius:14px;display:inline-grid;place-items:center;background:#e0f2fe;color:var(--sbp-info);font-weight:900}.sbp-ui-icon.gold{background:#fef3c7;color:#92400e}.sbp-ui-icon.green{background:#dcfce7;color:#166534}.sbp-ui-icon.red{background:#fee2e2;color:#991b1b}
.sbp-ui-topnav{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.sbp-ui-topnav a{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--sbp-line);color:var(--sbp-navy-800);font-weight:900;text-decoration:none}.sbp-ui-topnav a:hover{border-color:var(--sbp-cyan-500);color:var(--sbp-blue-600)}
.sbp-ui-table{width:100%;border-collapse:separate;border-spacing:0 10px}.sbp-ui-table th{font-size:12px;color:var(--sbp-muted);text-align:right;padding:0 14px}.sbp-ui-table td{background:#fff;padding:14px;border-block:1px solid var(--sbp-line)}.sbp-ui-table td:first-child{border-inline-start:1px solid var(--sbp-line);border-radius:0 14px 14px 0}.sbp-ui-table td:last-child{border-inline-end:1px solid var(--sbp-line);border-radius:14px 0 0 14px}
.sbp-ui-badge{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:900;background:#eef2ff;color:#3730a3}.sbp-ui-badge.ok{background:#dcfce7;color:#166534}.sbp-ui-badge.warn{background:#fef3c7;color:#92400e}.sbp-ui-badge.danger{background:#fee2e2;color:#991b1b}.sbp-ui-muted{color:var(--sbp-muted)!important}.sbp-ui-section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:28px 0 14px}.sbp-ui-section-title h2{margin:0;font-size:24px;font-weight:900;color:var(--sbp-navy-900)}
.sbp-ui-field{display:grid;gap:7px}.sbp-ui-field label{font-weight:900;color:var(--sbp-navy-900);font-size:14px}.sbp-ui-input,.sbp-ui-select,.sbp-ui-textarea{width:100%;border:1px solid var(--sbp-line);border-radius:14px;background:#fff;padding:12px 14px;font:inherit;outline:none}.sbp-ui-input:focus,.sbp-ui-select:focus,.sbp-ui-textarea:focus{border-color:var(--sbp-cyan-500);box-shadow:0 0 0 4px rgba(6,182,212,.14)}
.sbp-ui-alert{border-radius:var(--sbp-radius);border:1px solid #fde68a;background:#fffbeb;color:#92400e;padding:14px 16px;line-height:1.8}.sbp-ui-checklist{display:grid;gap:12px}.sbp-ui-check{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--sbp-line);border-radius:14px;padding:12px 14px}.sbp-ui-check:before{content:"✓";display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#dcfce7;color:#166534;font-weight:900}.sbp-ui-wireframe{border:1px dashed #94a3b8;border-radius:24px;background:linear-gradient(135deg,#fff,#f8fafc);padding:18px}.sbp-ui-wireframe .bar{height:14px;border-radius:999px;background:#dbeafe;margin:10px 0}.sbp-ui-wireframe .bar.short{width:55%}.sbp-ui-wireframe .box{height:80px;border-radius:16px;background:#e0f2fe;margin-top:12px}
@media(max-width:960px){.sbp-ui-card,.sbp-ui-card.wide{grid-column:1/-1}.sbp-ui-hero{padding:28px}.sbp-ui-title{font-size:32px}.sbp-ui-subtitle{font-size:16px}.sbp-ui-section-title{align-items:start;flex-direction:column}.sbp-ui-table{display:block;overflow-x:auto}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}