:root{--surface: #f6faff;--surface-dim: #d2dbe4;--surface-container-lowest: #ffffff;--surface-container-low: #ecf5fe;--surface-container: #e6eff8;--surface-container-high: #e0e9f2;--surface-container-highest: #dbe4ed;--on-surface: #141d23;--on-surface-variant: #5a4044;--outline: #8e6f74;--outline-variant: #e2bdc2;--primary: #bc004d;--primary-container: #df2b65;--on-primary: #ffffff;--secondary: #5f5e5e;--error: #ba1a1a;--error-container: #ffdad6;--on-error-container: #93000a;--success: #2e7d5f;--success-container: #d9efe4;--warning: #9a6b00;--warning-container: #f6ecd4;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-soft: 0 4px 20px rgba(0, 0, 0, .05);--shadow-hover: 0 8px 28px rgba(0, 0, 0, .08);--gutter: 24px;--font-latin: "Manrope", system-ui, sans-serif;--font-arabic: "Tajawal", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-latin);background:var(--surface);color:var(--on-surface);font-size:16px;line-height:1.6}[dir=rtl] body,body:has([dir=rtl]){font-family:var(--font-arabic)}[dir=rtl]{font-family:var(--font-arabic)}h1{font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:0}h2{font-size:24px;font-weight:600;line-height:1.3;margin:0}h3{font-size:18px;font-weight:600;margin:0}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font:600 14px/1.2 inherit;font-family:inherit;cursor:pointer;border:none;transition:background .15s,transform .1s,box-shadow .15s;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:active:not(:disabled){transform:translateY(2px)}.btn-primary{background:var(--primary-container);color:var(--on-primary)}.btn-primary:hover:not(:disabled){background:var(--primary)}.btn-secondary{background:transparent;color:var(--primary);border:2px solid var(--primary-container)}.btn-secondary:hover:not(:disabled){background:var(--surface-container-low)}.btn-ghost{background:transparent;color:var(--on-surface)}.btn-ghost:hover:not(:disabled){background:var(--surface-container)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover:not(:disabled){background:var(--on-error-container)}.field{display:flex;flex-direction:column;gap:6px}.field label{font:600 14px/1.2 inherit;color:var(--on-surface)}.field input,.field select,.field textarea{padding:10px 12px;border:1px solid var(--surface-container-highest);border-block-end:2px solid var(--surface-container-highest);border-radius:var(--radius-sm);font:400 15px/1.4 inherit;font-family:inherit;background:var(--surface-container-lowest);color:var(--on-surface);outline:none;transition:border-color .15s}.field input:focus,.field select:focus,.field textarea:focus{border-block-end-color:var(--primary-container)}.field .hint{font-size:12px;font-weight:500;color:var(--on-surface-variant)}.field .hint.ok{color:var(--success)}.field .hint.err{color:var(--error)}.card{background:var(--surface-container-lowest);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:24px}.badge{display:inline-block;padding:3px 10px;border-radius:9999px;font:600 12px/1.4 inherit;white-space:nowrap}.badge.active,.badge.paid{background:var(--success-container);color:var(--success)}.badge.provisioning,.badge.trial,.badge.pending{background:var(--surface-container-high);color:var(--secondary)}.badge.suspended,.badge.overdue{background:var(--warning-container);color:var(--warning)}.badge.expired,.badge.archived,.badge.failed,.badge.cancelled{background:var(--error-container);color:var(--on-error-container)}.badge.success{background:var(--success-container);color:var(--success)}.table{width:100%;border-collapse:collapse}.table th{text-align:start;font:600 12px/1.4 inherit;text-transform:uppercase;letter-spacing:.04em;color:var(--on-surface-variant);padding:12px 16px;border-block-end:1px solid var(--surface-container-high)}.table td{padding:16px;border-block-end:1px solid var(--surface-container)}.table tr.clickable{cursor:pointer}.table tr.clickable:hover td{background:var(--surface-container-low)}.app-shell{display:flex;min-height:100vh}.sidebar{width:240px;flex-shrink:0;background:var(--surface-container-lowest);border-inline-end:1px solid var(--surface-container-high);padding:24px 16px;display:flex;flex-direction:column;gap:4px}.sidebar .brand{font:800 22px/1.2 inherit;letter-spacing:-.02em;color:var(--primary);padding:0 12px 24px}.sidebar a{padding:10px 12px;border-radius:var(--radius-sm);color:var(--on-surface);text-decoration:none;font:600 14px/1.4 inherit}.sidebar a:hover{background:var(--surface-container-low)}.sidebar a.active{color:var(--primary);background:var(--surface-container-low);box-shadow:inset 3px 0 0 var(--primary-container)}[dir=rtl] .sidebar a.active{box-shadow:inset -3px 0 0 var(--primary-container)}.sidebar .spacer{flex:1}.main{flex:1;padding:32px var(--gutter);max-width:1280px}.page-head{display:flex;align-items:center;justify-content:space-between;margin-block-end:24px;gap:16px;flex-wrap:wrap}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.stat-card .label{font:600 13px/1.4 inherit;color:var(--on-surface-variant)}.stat-card .value{font:800 32px/1.2 inherit;letter-spacing:-.02em}.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-block-end:16px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.step-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}.step-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-block-end:1px solid var(--surface-container)}.step-list li:last-child{border-block-end:none}.step-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;background:var(--surface-container-highest)}.step-dot.success{background:var(--success)}.step-dot.failed{background:var(--error)}.step-error{font-size:13px;color:var(--error)}.empty-state{text-align:center;padding:64px 24px;color:var(--on-surface-variant)}.error-banner{background:var(--error-container);color:var(--on-error-container);border-radius:var(--radius-sm);padding:12px 16px;font-weight:600;font-size:14px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:20px}.pagination{display:flex;gap:8px;align-items:center;justify-content:end;margin-block-start:16px}@media(max-width:900px){.app-shell{flex-direction:column}.sidebar{width:100%;flex-direction:row;overflow-x:auto;align-items:center;padding:12px 16px}.sidebar .brand{padding:0 12px}.main{padding:24px 16px}}