:root{--navy: #0D3156;--navy-dark: #0A2647;--navy-deeper: #071B33;--navy-light: #164B80;--amber: #FF9E18;--amber-dark: #E58A0C;--amber-light: #FFB84D;--primary: #4F46E5;--primary-hover: #4338CA;--primary-deep: #3730A3;--primary-soft: #818CF8;--primary-tint: #EEF2FF;--primary-tint-border: #C7D2FE;--on-primary: #FFFFFF;--accent-gradient: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);--hero-gradient: linear-gradient(135deg, #071B33 0%, #0A2647 50%, #0D3156 100%);--hero-radial: radial-gradient(ellipse at 50% 30%, rgba(255, 158, 24, .1), transparent 60%);--ink: #1E293B;--ink-muted: #64748B;--ink-subtle: #94A3B8;--heading: #0D3156;--canvas: #FFFFFF;--surface-1: #F4F6F9;--surface-2: #E2E8F0;--surface-sunken: #F8FAFC;--hairline: #E2E8F0;--hairline-strong: #0D3156;--inverse-canvas: #0A2647;--inverse-surface-1: rgba(255, 255, 255, .08);--inverse-ink: #FFFFFF;--inverse-ink-muted: rgba(255, 255, 255, .65);--blue-60: #4338CA;--blue-80: #3730A3;--blue-hover: #4338CA;--ibm-blue: #4F46E5;--spotify-green: #4F46E5;--spotify-green-hover: #4338CA;--spotify-green-active: #3730A3;--spotify-green-border: #4F46E5;--bg-base: #F4F6F9;--bg-surface: #FFFFFF;--bg-mid: #F4F6F9;--bg-card: #FFFFFF;--bg-card-alt: #F8FAFC;--bg-card-hover: #F4F6F9;--text-base: #1E293B;--text-silver: #64748B;--text-near-white: #1E293B;--text-light: #1E293B;--border-gray: #E2E8F0;--border-light: #E2E8F0;--border-subtle: #E2E8F0;--separator: #E2E8F0;--semantic-success: #16A34A;--semantic-green: #16A34A;--semantic-warning: #D97706;--semantic-amber: #D97706;--semantic-error: #DC2626;--semantic-red: #DC2626;--danger: #DC2626;--semantic-info: #4F46E5;--text-negative: #DC2626;--text-warning: #B45309;--text-announcement: #4F46E5;--success-tint: #ECFDF5;--success-tint-border: #A7F3D0;--warning-tint: #FFFBEB;--warning-tint-border: #FDE68A;--error-tint: #FEF2F2;--error-tint-border: #FECACA;--shadow-sm: 0 1px 3px rgba(10, 38, 71, .06);--shadow: 0 2px 12px rgba(10, 38, 71, .08);--shadow-lg: 0 8px 30px rgba(10, 38, 71, .12);--shadow-glow: 0 4px 16px rgba(79, 70, 229, .35);--shadow-heavy: 0 8px 30px rgba(10, 38, 71, .12);--shadow-medium: 0 2px 12px rgba(10, 38, 71, .08);--shadow-inset-input: none;--shadow-inset-input-focus: 0 0 0 3px rgba(79, 70, 229, .15);--font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;--font-en: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-ui: var(--font-ar);--font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--radius-control: 10px;--radius-card: 16px;--radius-pill: 999px;--radius-none: 10px;--radius-xs: 6px;--radius-sm: 8px;--ease-out: cubic-bezier(.22, 1, .36, 1)}:root:lang(en){--font-family-ui: var(--font-en)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}body{background-color:var(--surface-1);color:var(--ink);font-family:var(--font-family-ui);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}a{color:var(--primary);text-decoration:none;transition:color .18s var(--ease-out)}a:hover{color:var(--primary-hover);text-decoration:underline}button,input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}h1,h2,h3,h4,h5,h6{color:var(--heading);font-family:var(--font-family-ui);font-weight:700;line-height:1.3}h1{font-size:32px}h2{font-size:24px}h3{font-size:18px;font-weight:600}.text-silver{color:var(--ink-muted)}.text-green{color:var(--primary)}.text-negative{color:var(--semantic-error)}.text-warning{color:var(--text-warning)}.text-info{color:var(--primary)}.font-mono{font-family:var(--font-family-mono);letter-spacing:0px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-control);padding:11px 20px;font-family:var(--font-family-ui);font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .18s var(--ease-out);border:1px solid transparent;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none}.btn:focus-visible{box-shadow:0 0 0 3px #4f46e540}.btn:active{transform:translateY(0)}.btn-primary{background:var(--accent-gradient);color:var(--on-primary);border-color:transparent;box-shadow:var(--shadow-glow)}.btn-primary:hover{color:var(--on-primary);transform:translateY(-2px);box-shadow:0 8px 22px #4f46e566}.btn-primary:disabled{background:var(--surface-2);color:var(--ink-subtle);box-shadow:none;transform:none;cursor:not-allowed}.btn-secondary{background-color:var(--navy);color:#fff;border-color:var(--navy)}.btn-secondary:hover{background-color:var(--navy-light);border-color:var(--navy-light);transform:translateY(-1px)}.btn-secondary:disabled{background-color:var(--surface-2);border-color:var(--surface-2);color:var(--ink-subtle);transform:none;cursor:not-allowed}.btn-outlined{background-color:var(--canvas);color:var(--navy);border:1px solid var(--hairline);box-shadow:var(--shadow-sm)}.btn-outlined:hover{color:var(--primary);border-color:#4f46e573;background-color:var(--primary-tint)}.btn-ghost{background-color:transparent;color:var(--primary);border:1px solid transparent;box-shadow:none}.btn-ghost:hover{background-color:var(--primary-tint);color:var(--primary-hover)}.btn-sm{padding:7px 14px;font-size:12.5px;font-weight:600}.btn-lg{padding:14px 28px;font-size:15px}.btn-circle{border-radius:999px;width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}.card{background-color:var(--canvas);border-radius:var(--radius-card);padding:24px;border:1px solid var(--hairline);box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}.card:hover{border-color:#4f46e540;box-shadow:var(--shadow)}.card-elevated{background-color:var(--canvas);border:1px solid var(--hairline);box-shadow:var(--shadow-lg);border-radius:var(--radius-card)}.input-field{width:100%;background-color:var(--canvas);color:var(--ink);border-radius:var(--radius-control);padding:11px 14px;min-height:44px;font-family:var(--font-family-ui);font-size:14px;border:1px solid var(--hairline);outline:none;transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .18s var(--ease-out)}.input-field:hover{border-color:#cbd5e1}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4f46e526}.input-field::placeholder{color:var(--ink-subtle)}.input-field:disabled{background-color:var(--surface-1);color:var(--ink-subtle);cursor:not-allowed}textarea.input-field{min-height:96px;line-height:1.5}select.input-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}[dir=rtl] select.input-field{background-position:left 14px center;padding-right:14px;padding-left:40px}.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;line-height:1.5}.badge-green{background-color:var(--success-tint);color:#15803d;border:1px solid var(--success-tint-border)}.badge-blue{background-color:var(--primary-tint);color:var(--primary-deep);border:1px solid var(--primary-tint-border)}.badge-yellow{background-color:var(--warning-tint);color:#b45309;border:1px solid var(--warning-tint-border)}.badge-red{background-color:var(--error-tint);color:#b91c1c;border:1px solid var(--error-tint-border)}.badge-gray{background-color:var(--surface-1);color:var(--ink-muted);border:1px solid var(--hairline)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#071b33b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:fadeIn .18s var(--ease-out)}.modal-container{background-color:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-card);width:100%;max-width:620px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:rise .26s var(--ease-out);position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes rise{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes orb-drift{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-28px,0)}}@keyframes live-pulse{0%,to{box-shadow:0 0 #34d3998c}70%{box-shadow:0 0 0 8px #34d39900}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.grid-container{display:grid;gap:24px}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:900px){.grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}}.hero-ground{position:relative;background:var(--hero-gradient);color:#fff;overflow:hidden;isolation:isolate}.hero-ground:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--hero-radial);pointer-events:none}.orb{position:absolute;border-radius:999px;filter:blur(90px);opacity:.5;pointer-events:none;animation:orb-drift 16s ease-in-out infinite}.orb-amber{background:#ff9e188c}.orb-indigo{background:#6366f199}.orb-blue{background:#164b80e6}.grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,0) 75%);mask-image:linear-gradient(to bottom,#000,#0000 75%)}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#ffffffd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.live-dot{width:8px;height:8px;border-radius:999px;background:#34d399;animation:live-pulse 2s infinite}.glass{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius-card);transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out)}.glass:hover{background:#ffffff17;border-color:#ff9e1866}.btn-on-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22)}.btn-on-dark:hover{background:#ffffff1a;border-color:#ffffff59;color:#fff}.section-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase}.section-kicker:before{content:"";width:22px;height:3px;border-radius:999px;background:var(--amber)}[dir=rtl] .section-kicker{text-transform:none}.page-head{background:var(--canvas);border-bottom:1px solid var(--hairline)}[dir=rtl]{font-family:var(--font-ar);letter-spacing:0px!important}[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] h5,[dir=rtl] h6{font-family:var(--font-ar);letter-spacing:0px!important;line-height:1.45}pre,code,kbd,samp,.font-mono,textarea.font-mono,.code-block,.code-snippet,.code-snippet-container,.json-viewer,.json-editor,.json-response-container,.api-endpoint,.api-endpoint-banner,.api-path,[dir=ltr],[dir=rtl] pre,[dir=rtl] code,[dir=rtl] kbd,[dir=rtl] samp,[dir=rtl] .font-mono,[dir=rtl] textarea.font-mono,[dir=rtl] .code-block,[dir=rtl] .code-snippet,[dir=rtl] .code-snippet-container,[dir=rtl] .json-viewer,[dir=rtl] .json-editor,[dir=rtl] .json-response-container,[dir=rtl] .api-endpoint,[dir=rtl] .api-endpoint-banner,[dir=rtl] .api-path{direction:ltr!important;text-align:left!important;unicode-bidi:isolate!important}.dropdown-menu{position:absolute;top:calc(100% + 8px);z-index:150;min-width:230px;background-color:var(--canvas);border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;animation:rise .2s var(--ease-out)}[dir=rtl] .dropdown-menu{left:0;right:auto}[dir=ltr] .dropdown-menu{right:0;left:auto}.dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;border:none;background:transparent;color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s var(--ease-out),color .15s var(--ease-out);text-align:inherit}.dropdown-item:hover{background-color:var(--primary-tint);color:var(--primary-deep)}.dropdown-item.text-danger:hover{background-color:var(--error-tint);color:var(--semantic-error)}.nav-tab{height:38px;border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:#ffffffc7;font-weight:700;font-size:13.5px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:background-color .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out);white-space:nowrap}.nav-tab:hover{background:#ffffff14;color:#fff}.nav-tab.is-active{background:#ffffff1f;border-color:#ffffff24;color:#fff}.nav-tab.is-active .nav-tab-dot{background:var(--amber)}.nav-tab-dot{width:6px;height:6px;border-radius:999px;background:transparent}.nav-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:var(--radius-control);background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:12.5px;font-weight:700;transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out)}.nav-chip:hover{background:#ffffff1a;border-color:#ff9e1880}.stat-tile{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:18px 20px;box-shadow:var(--shadow-sm)}.stat-value{font-size:26px;font-weight:700;color:var(--heading);line-height:1.2}.stat-label{font-size:12.5px;color:var(--ink-muted);margin-top:4px}.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;line-height:1.5}.tag-green{background:var(--success-tint);color:#15803d;border:1px solid var(--success-tint-border)}.tag-blue{background:var(--primary-tint);color:var(--primary-deep);border:1px solid var(--primary-tint-border)}.tag-yellow{background:var(--warning-tint);color:#b45309;border:1px solid var(--warning-tint-border)}.tag-red{background:var(--error-tint);color:#b91c1c;border:1px solid var(--error-tint-border)}.tag-gray{background:var(--surface-1);color:var(--ink-muted);border:1px solid var(--hairline)}.btn-outline{background:var(--canvas);color:var(--navy);border:1px solid var(--hairline);box-shadow:var(--shadow-sm)}.btn-outline:hover{color:var(--primary);border-color:#4f46e573;background:var(--primary-tint)}.tenant{background:var(--canvas);border:1px solid var(--hairline);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:24px}.tenant-top{position:relative;background:var(--hero-gradient);color:#fff;padding:26px 28px;overflow:hidden;isolation:isolate}.tenant-top:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--hero-radial);pointer-events:none}.tenant-top>*{position:relative;z-index:1}.tenant-body{padding:18px 28px 22px;display:flex;flex-direction:column;gap:16px}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.kpi{background:var(--surface-1);border:1px solid var(--hairline);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px}.kpi-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--primary-tint);color:var(--primary)}.kpi-value{font-size:22px;font-weight:700;color:var(--heading);line-height:1.1}.kpi-label{font-size:12px;color:var(--ink-muted);margin-top:3px}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.14);color:#ffffffd9;font-size:12px;font-weight:600}.chip code{font-family:var(--font-family-mono);color:#fff;font-size:12px}.steps-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.steps-strip>div{background:var(--canvas);border:1px solid var(--hairline);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--ink);line-height:1.55}.steps-strip b{color:var(--heading)}.step-dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--accent-gradient);color:#fff;font-weight:700;font-size:12px;flex-shrink:0}.egs-card{background:var(--canvas);border:1px solid var(--hairline);border-radius:18px;padding:22px 24px;position:relative;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}.egs-card:hover{border-color:#4f46e559;box-shadow:var(--shadow)}.egs-card.is-active{border-color:var(--primary);box-shadow:0 0 0 3px #4f46e524,var(--shadow)}.egs-pin{position:absolute;top:-1px;inset-inline-end:22px;background:var(--accent-gradient);color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:0 0 10px 10px;box-shadow:var(--shadow-glow)}.egs-id{display:inline-flex;align-items:center;gap:10px}.egs-id-plate{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--navy);color:#fff;flex-shrink:0}.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:var(--surface-1);border:1px solid var(--hairline)}.seg button{border:none;background:transparent;color:var(--ink-muted);border-radius:9px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .18s var(--ease-out),color .18s var(--ease-out)}.seg button:hover{color:var(--ink)}.seg button.on-sandbox{background:var(--navy);color:#fff}.seg button.on-simulation{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-glow)}.seg button.on-production{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff}.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:18px}.fact{background:var(--surface-1);border:1px solid var(--hairline);border-radius:12px;padding:10px 12px;font-size:12px}.fact-label{color:var(--ink-muted);display:block;margin-bottom:3px;font-size:11.5px}.tools-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-1);border:1px solid var(--hairline);border-radius:12px;padding:10px 14px;color:var(--heading);cursor:pointer;font-size:13px;font-weight:700;transition:border-color .18s var(--ease-out),background .18s var(--ease-out)}.tools-toggle:hover{border-color:#4f46e566;background:var(--primary-tint)}@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.steps-strip{grid-template-columns:1fr}.tenant-top,.tenant-body{padding-inline:18px}}
