:root{--brand:#f28a21;--accent:#ffb45c;--nav:#0b1f2a;--nav2:#123746;--ink:#122a36;--muted:#6c808b;--line:#dce7ec;--soft:#f3f7f9;--card:#fff;--good:#128064;--warn:#b66d00;--bad:#ac3d4d;--blue:#2f6f91;--shadow:0 20px 55px rgba(22,56,72,.10)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Cairo","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;background:#eef4f7;color:var(--ink)}button,input,select,textarea{font:inherit}.hidden{display:none!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 90% -10%,rgba(242,138,33,.12),transparent 28%),radial-gradient(circle at 18% 100%,rgba(38,112,145,.10),transparent 30%)}
.portal-shell{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr);position:relative;z-index:1}.side{background:linear-gradient(180deg,#081c26 0%,#0c2a38 50%,#103847 100%);color:#fff;padding:22px 17px;position:sticky;top:0;height:100vh;overflow:auto;border-inline-end:1px solid rgba(255,255,255,.06)}.brand{display:flex;gap:12px;align-items:center;padding:4px 7px 20px;border-bottom:1px solid rgba(255,255,255,.09)}.mark{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,var(--brand),var(--accent));display:grid;place-items:center;font-weight:900;box-shadow:0 10px 26px rgba(242,138,33,.24);overflow:hidden}.mark img{width:100%;height:100%;object-fit:contain;background:#fff}.brand b{display:block;font-size:14px}.brand small{color:#91afbb;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.client-card{margin:18px 0 16px;padding:15px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.10);border-radius:17px}.client-card small{display:block;color:#91afbb;font-size:10px}.client-card strong{display:block;margin-top:6px;font-size:13px}.client-card .client-pulse{display:flex;align-items:center;gap:6px;margin-top:10px;color:#a6d7c9;font-size:10px}.client-pulse i{width:7px;height:7px;border-radius:50%;background:#4bd39f;box-shadow:0 0 0 5px rgba(75,211,159,.09)}.nav{display:grid;gap:5px}.nav button{width:100%;border:0;background:transparent;color:#b8cad2;text-align:start;padding:12px;border-radius:12px;font:inherit;font-size:12px;font-weight:750;cursor:pointer;display:flex;align-items:center;gap:11px;transition:.18s ease}.nav button .ni{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#d8e4e9}.nav button.active,.nav button:hover{background:linear-gradient(90deg,rgba(242,138,33,.19),rgba(255,255,255,.07));color:#fff}.nav button.active .ni{background:linear-gradient(145deg,var(--brand),var(--accent));color:white;box-shadow:0 7px 18px rgba(242,138,33,.25)}.side-foot{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:8px}.side-foot button{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#dbe7eb;border-radius:11px;padding:10px;cursor:pointer;text-align:start}.main{min-width:0}.topbar{min-height:78px;background:rgba(255,255,255,.91);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:12px 28px;position:sticky;top:0;z-index:20}.topbar h1{font-size:19px;margin:0}.topbar small{color:var(--muted);display:block;margin-top:4px}.top-actions{display:flex;align-items:center;gap:8px}.top-actions select,.top-actions button{height:39px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 12px;color:var(--ink)}.workspace{padding:24px 28px 54px;max-width:1600px;margin:auto}.hero-premium{position:relative;overflow:hidden;background:linear-gradient(118deg,#0a2230 0%,#103b4c 60%,#18536a 100%);color:#fff;border-radius:26px;padding:28px 30px;box-shadow:0 26px 70px rgba(13,54,70,.18);min-height:210px}.hero-premium:before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-110px;top:-220px;background:radial-gradient(circle,rgba(255,170,77,.34),rgba(255,170,77,0) 65%)}[dir=ltr] .hero-premium:before{right:auto;left:-110px}.hero-premium:after{content:"";position:absolute;inset:auto -40px -140px auto;width:360px;height:260px;border-radius:50%;border:55px solid rgba(255,255,255,.035);transform:rotate(18deg)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:25px;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:.16em;color:#ffbd78;font-weight:900;text-transform:uppercase}.hero-premium h2{font-size:30px;line-height:1.15;margin:9px 0 8px}.hero-premium p{color:#c8d8df;max-width:720px;margin:0;line-height:1.8;font-size:13px}.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.hero-btn{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.08);color:#fff;border-radius:11px;padding:10px 13px;font-weight:800;cursor:pointer}.hero-btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 8px 24px rgba(242,138,33,.28)}.account-health{align-self:stretch;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:18px}.health-top{display:flex;justify-content:space-between;align-items:center}.health-top span{font-size:11px;color:#afc6d0}.health-ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#4ed7a5 var(--health,82%),rgba(255,255,255,.11) 0);position:relative;margin:14px auto}.health-ring:after{content:"";position:absolute;inset:8px;background:#123746;border-radius:50%}.health-ring b{position:relative;z-index:1;font-size:20px}.health-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.health-list div{padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.06)}.health-list small{display:block;color:#99b4bf;font-size:9px}.health-list b{font-size:12px}.metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin:14px 0 16px}.metric{position:relative;background:var(--card);border:1px solid var(--line);border-radius:17px;padding:15px 15px 14px;box-shadow:0 7px 22px rgba(30,65,80,.04);overflow:hidden}.metric:after{content:"";position:absolute;width:52px;height:52px;border-radius:50%;background:var(--metric-glow,#f3f7f9);right:-13px;bottom:-18px}.metric-top{display:flex;align-items:center;justify-content:space-between}.metric-icon{width:32px;height:32px;border-radius:10px;background:#f1f6f8;display:grid;place-items:center;color:#426879}.metric small{font-size:9px;color:var(--muted);display:block}.metric b{font-size:21px;display:block;margin-top:8px;letter-spacing:-.03em}.metric em{font-style:normal;font-size:9px;color:#79909b}.content-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:14px}.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 7px 24px rgba(29,61,75,.04)}.panel-head{padding:15px 17px;border-bottom:1px solid #edf2f4;display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-head h2{font-size:13px;margin:0}.panel-head small{display:block;color:var(--muted);margin-top:3px}.panel-body{padding:15px 17px}.table-wrap{overflow:auto}.tbl{width:100%;border-collapse:collapse;font-size:11px}.tbl th{background:#f8fafb;color:#607680;font-size:9px;text-align:start;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}.tbl td{padding:11px 10px;border-bottom:1px solid #edf2f4;white-space:nowrap}.tbl tr:hover td{background:#fbfdfe}.tbl tr:last-child td{border-bottom:0}.state{display:inline-flex;padding:4px 8px;border-radius:999px;background:#edf3f5;font-size:9px;font-weight:800}.state.completed,.state.delivered,.state.posted,.state.approved,.state.paid,.state.available{background:#e2f6ef;color:#156b55}.state.failed,.state.rejected,.state.cancelled,.state.void{background:#fbe7ea;color:#9d3445}.state.draft,.state.submitted,.state.assigned,.state.ready,.state.in_transit{background:#fff0d8;color:#995800}.empty{padding:34px;text-align:center;color:var(--muted)}.activity{display:grid}.activity-item{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #edf2f4}.activity-item:last-child{border:0}.activity-dot{width:32px;height:32px;border-radius:10px;background:#eef5f7;display:grid;place-items:center;color:#477080}.activity-item b,.activity-item small{display:block}.activity-item b{font-size:11px}.activity-item small{color:var(--muted);margin-top:3px;font-size:9px}.actionbar{display:flex;gap:7px;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;box-shadow:0 6px 18px rgba(242,138,33,.22)}.btn.secondary{background:#edf4f6;color:#275467}.btn.ghost{background:#fff;border:1px solid var(--line);color:#345867}.btn.compact{padding:6px 9px;font-size:10px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:14px}.section-title h2{margin:0;font-size:18px}.section-title p{margin:4px 0 0;color:var(--muted);font-size:11px}.top-products{display:grid;gap:10px}.product-bar{display:grid;grid-template-columns:minmax(110px,1fr) 2.2fr auto;gap:10px;align-items:center}.product-name b{display:block;font-size:11px}.product-name small{color:var(--muted);font-size:9px}.bar-track{height:8px;border-radius:999px;background:#eef3f5;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f718f,#58a6bc)}.product-bar strong{font-size:10px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quick-card{border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px;cursor:pointer;text-align:start;transition:.15s}.quick-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#ccdce3}.quick-card i{font-style:normal;width:31px;height:31px;border-radius:10px;background:#edf5f7;display:grid;place-items:center;margin-bottom:9px}.quick-card b{display:block;font-size:11px}.quick-card small{display:block;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.5}.form-page{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-page label{font-size:10px;color:#506b79;font-weight:750}.form-page input,.form-page select,.form-page textarea{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;font:inherit;color:var(--ink)}.form-page input:focus,.form-page select:focus,.form-page textarea:focus{outline:2px solid rgba(242,138,33,.15);border-color:#e9a65d}.form-page .wide{grid-column:1/-1}.request-lines{display:grid;grid-template-columns:1fr 130px;gap:7px;max-height:330px;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fafcfd}.login-wrap{min-height:100vh;background:linear-gradient(135deg,#071b25,#0d3443 62%,#164e62);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);padding:28px;position:relative;overflow:hidden}.login-wrap:before{content:"";position:absolute;inset:auto auto -25% -8%;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(242,138,33,.23),transparent 66%)}.login-story{color:#fff;align-self:center;padding:6vw;position:relative;z-index:2}.login-story .kicker{color:#ffb96f;font-size:10px;letter-spacing:.18em;font-weight:900}.login-story h1{font-size:clamp(38px,4.8vw,70px);line-height:1.02;margin:18px 0 14px;letter-spacing:-.045em}.login-story p{max-width:650px;color:#bed1d9;font-size:15px;line-height:1.9}.login-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.login-proof div{padding:14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}.login-proof b{display:block}.login-proof small{display:block;color:#9db9c4;margin-top:5px;font-size:9px}.login-panel{display:grid;place-items:center;position:relative;z-index:2}.login-box{width:min(470px,100%);background:rgba(255,255,255,.98);border-radius:26px;padding:29px;box-shadow:0 35px 100px rgba(0,0,0,.30)}.login-box .mark{margin-bottom:20px}.login-box h2{margin:0 0 7px;font-size:25px}.login-box p{color:var(--muted);margin:0 0 20px;line-height:1.7;font-size:11px}.login-box label{font-size:10px;color:#536b77;font-weight:800}.login-box input{width:100%;height:44px;border:1px solid var(--line);border-radius:11px;padding:0 12px;margin:5px 0 11px}.login-box button{width:100%;height:46px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-weight:900;box-shadow:0 9px 24px rgba(242,138,33,.25)}.error{color:var(--bad);font-size:11px;margin-top:8px}.security-note{display:flex;align-items:center;gap:7px;color:#78909a;font-size:9px;margin-top:14px}.security-note i{width:7px;height:7px;border-radius:50%;background:#24b486}
@media(max-width:1250px){.portal-shell{grid-template-columns:88px 1fr}.side .brand div:last-child,.client-card strong,.client-card small,.client-card .client-pulse span,.nav button span,.side-foot span{display:none}.side{padding:18px 11px}.brand{justify-content:center}.nav button{justify-content:center}.metrics{grid-template-columns:repeat(3,1fr)}.content-grid{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr .65fr}}
@media(max-width:820px){.login-wrap{grid-template-columns:1fr;padding:18px}.login-story{display:none}.portal-shell{display:block}.side{height:auto;position:sticky;top:0;z-index:30;padding:8px 10px;display:flex;align-items:center;gap:8px;overflow:auto}.brand{border:0;padding:0}.brand .mark{width:38px;height:38px}.client-card{display:none}.nav{display:flex}.nav button{width:auto;min-width:43px;padding:6px}.side-foot{display:none}.topbar{top:54px;padding:10px 13px;min-height:68px}.topbar small{display:none}.workspace{padding:14px}.metrics{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr}.account-health{display:none}.split-grid{grid-template-columns:1fr}.form-page{grid-template-columns:1fr}.form-page .wide{grid-column:auto}.top-actions select{max-width:150px}.hero-premium{padding:22px}.hero-premium h2{font-size:25px}.section-title{align-items:flex-start;flex-direction:column}.quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.metrics{grid-template-columns:1fr 1fr}.metric{padding:12px}.metric b{font-size:18px}.top-actions select{display:none}.quick-grid{grid-template-columns:1fr}.product-bar{grid-template-columns:1fr auto}.bar-track{grid-row:2;grid-column:1/-1}}