/* SabronPro Phase 30-34 — Deep UI/UX Professionalization Layer */
:root{
  --sbp-depth-bg:#f4f7fb;
  --sbp-depth-ink:#071426;
  --sbp-depth-muted:#64748b;
  --sbp-depth-card:#ffffff;
  --sbp-depth-line:#e2e8f0;
  --sbp-depth-primary:#123a68;
  --sbp-depth-primary-2:#2563eb;
  --sbp-depth-cyan:#06b6d4;
  --sbp-depth-gold:#d6a33a;
  --sbp-depth-success:#16a34a;
  --sbp-depth-warning:#f59e0b;
  --sbp-depth-danger:#dc2626;
  --sbp-depth-radius:22px;
  --sbp-depth-shadow:0 22px 60px rgba(7,20,38,.10);
  --sbp-depth-shadow-soft:0 12px 35px rgba(15,23,42,.07);
  --sbp-depth-focus:0 0 0 4px rgba(37,99,235,.16);
}
*{box-sizing:border-box}
body.sbp-depth-app{margin:0;background:radial-gradient(circle at top left,rgba(6,182,212,.16),transparent 34%),linear-gradient(180deg,#f8fbff 0%,var(--sbp-depth-bg) 100%);color:var(--sbp-depth-ink);font-family:'Cairo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
a{color:inherit;text-decoration:none}.sbp-depth-shell{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}.sbp-depth-sidebar{position:sticky;top:0;height:100vh;padding:24px;background:linear-gradient(180deg,#071426 0%,#0b1b33 100%);color:white;overflow:auto}.sbp-depth-brand{display:flex;align-items:center;gap:12px;padding:8px 6px 22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:18px}.sbp-depth-logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--sbp-depth-gold),#f8d889);display:grid;place-items:center;color:#071426;font-weight:900;box-shadow:0 12px 35px rgba(214,163,58,.28)}.sbp-depth-brand h2{margin:0;font-size:20px}.sbp-depth-brand span{display:block;color:#cbd5e1;font-size:12px;margin-top:2px}.sbp-depth-nav{display:grid;gap:8px}.sbp-depth-nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;color:#cbd5e1;border:1px solid transparent;transition:.18s}.sbp-depth-nav a:hover,.sbp-depth-nav a.active{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.12);color:white}.sbp-depth-nav small{width:24px;height:24px;display:grid;place-items:center;border-radius:9px;background:rgba(214,163,58,.16);color:#f8d889}.sbp-depth-main{padding:28px;min-width:0}.sbp-depth-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.sbp-depth-title h1{margin:0;font-size:clamp(26px,4vw,42px);letter-spacing:-.03em}.sbp-depth-title p{margin:8px 0 0;color:var(--sbp-depth-muted);max-width:850px;line-height:1.8}.sbp-depth-actions{display:flex;gap:10px;flex-wrap:wrap}.sbp-depth-btn{border:0;border-radius:15px;padding:11px 16px;font-weight:800;display:inline-flex;align-items:center;gap:8px;cursor:pointer}.sbp-depth-btn.primary{background:linear-gradient(135deg,var(--sbp-depth-primary),var(--sbp-depth-primary-2));color:white;box-shadow:0 13px 28px rgba(37,99,235,.22)}.sbp-depth-btn.light{background:white;color:#0f172a;border:1px solid var(--sbp-depth-line)}.sbp-depth-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.sbp-depth-card{grid-column:span 4;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border:1px solid rgba(226,232,240,.9);border-radius:var(--sbp-depth-radius);padding:20px;box-shadow:var(--sbp-depth-shadow-soft);position:relative;overflow:hidden}.sbp-depth-card.wide{grid-column:span 8}.sbp-depth-card.full{grid-column:1/-1}.sbp-depth-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--sbp-depth-primary-2),var(--sbp-depth-cyan),var(--sbp-depth-gold));opacity:.9}.sbp-depth-card h3{margin:4px 0 8px;font-size:20px}.sbp-depth-card p{margin:0;color:var(--sbp-depth-muted);line-height:1.8}.sbp-depth-kpi{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.sbp-depth-kpi .metric{font-size:36px;font-weight:900;letter-spacing:-.04em;margin:6px 0;color:#0f172a}.sbp-depth-kpi .label{color:#64748b;font-weight:800;font-size:13px}.sbp-depth-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;background:#eff6ff;color:#1d4ed8}.sbp-depth-chip.gold{background:#fff7ed;color:#a16207}.sbp-depth-chip.green{background:#ecfdf5;color:#047857}.sbp-depth-chip.red{background:#fef2f2;color:#b91c1c}.sbp-depth-progress{height:9px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:14px}.sbp-depth-progress span{display:block;height:100%;width:var(--value,70%);background:linear-gradient(90deg,var(--sbp-depth-primary-2),var(--sbp-depth-cyan));border-radius:999px}.sbp-depth-table{width:100%;border-collapse:separate;border-spacing:0 10px}.sbp-depth-table th{text-align:right;color:#64748b;font-size:13px;padding:0 12px}.sbp-depth-table td{background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;padding:14px 12px;vertical-align:top}.sbp-depth-table td:first-child{border-right:1px solid #e2e8f0;border-radius:0 16px 16px 0;font-weight:800}.sbp-depth-table td:last-child{border-left:1px solid #e2e8f0;border-radius:16px 0 0 16px}.sbp-depth-timeline{display:grid;gap:12px}.sbp-depth-step{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}.sbp-depth-step .dot{width:34px;height:34px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:white;display:grid;place-items:center;font-weight:900}.sbp-depth-step strong{display:block;margin-bottom:3px}.sbp-depth-step span{display:block;color:#64748b;line-height:1.7}.sbp-depth-phone{max-width:390px;margin:auto;border:12px solid #0f172a;border-radius:42px;background:#f8fafc;box-shadow:var(--sbp-depth-shadow);overflow:hidden}.sbp-depth-phone-header{background:linear-gradient(135deg,#071426,#123a68);color:white;padding:18px;border-radius:28px 28px 0 0}.sbp-depth-phone-body{padding:16px;display:grid;gap:12px}.sbp-depth-mobile-card{background:white;border:1px solid #e2e8f0;border-radius:18px;padding:14px}.sbp-depth-empty{border:1px dashed #cbd5e1;border-radius:20px;padding:22px;text-align:center;background:#f8fafc}.sbp-depth-empty b{display:block;font-size:18px;margin-bottom:8px}.sbp-depth-form{display:grid;gap:12px}.sbp-depth-input{width:100%;border:1px solid #cbd5e1;border-radius:14px;padding:12px 14px;font-family:inherit;background:white}.sbp-depth-input:focus,.sbp-depth-btn:focus,.sbp-depth-nav a:focus{outline:none;box-shadow:var(--sbp-depth-focus)}.sbp-depth-banner{background:linear-gradient(135deg,#071426,#123a68 55%,#0e7490);color:white;border-radius:28px;padding:32px;box-shadow:var(--sbp-depth-shadow);position:relative;overflow:hidden}.sbp-depth-banner:after{content:"";position:absolute;inset:auto -60px -90px auto;width:260px;height:260px;background:radial-gradient(circle,rgba(214,163,58,.45),transparent 60%)}.sbp-depth-banner h2{margin:0 0 10px;font-size:clamp(26px,4vw,44px)}.sbp-depth-banner p{color:#dbeafe;max-width:760px}.sbp-depth-public{min-height:100vh;background:radial-gradient(circle at 18% 0,rgba(6,182,212,.16),transparent 30%),#f8fbff;color:#071426;font-family:'Cairo',system-ui,sans-serif}.sbp-depth-public .wrap{width:min(1180px,92vw);margin:auto;padding:38px 0}.sbp-depth-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:30px;align-items:center;padding:60px 0}.sbp-depth-hero h1{font-size:clamp(34px,5vw,64px);line-height:1.08;margin:0 0 16px;letter-spacing:-.04em}.sbp-depth-hero p{color:#64748b;line-height:1.9;font-size:18px}.sbp-depth-panel{background:white;border:1px solid #e2e8f0;border-radius:28px;padding:24px;box-shadow:var(--sbp-depth-shadow-soft)}
@media (max-width:980px){.sbp-depth-shell{grid-template-columns:1fr}.sbp-depth-sidebar{position:relative;height:auto}.sbp-depth-card,.sbp-depth-card.wide{grid-column:1/-1}.sbp-depth-topbar{display:block}.sbp-depth-actions{margin-top:14px}.sbp-depth-hero{grid-template-columns:1fr;padding:36px 0}.sbp-depth-main{padding:18px}.sbp-depth-table{display:block;overflow:auto;white-space:nowrap}.sbp-depth-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:no-preference){.sbp-depth-card,.sbp-depth-btn,.sbp-depth-nav a{transition:transform .18s ease,box-shadow .18s ease}.sbp-depth-card:hover{transform:translateY(-2px);box-shadow:var(--sbp-depth-shadow)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}