:root{
  --blue:#123fe8; --blue2:#0b2fc2; --navy:#061a4f; --text:#0c1a46; --muted:#66749b;
  --line:#e8edf7; --bg:#f7f9fd; --card:#fff; --green:#16a34a; --red:#ef4444;
  --orange:#f59e0b; --purple:#7c3aed; --shadow:0 8px 30px rgba(18,63,232,.06);
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:"Cairo",sans-serif;color:var(--text);background:var(--bg)}
button,input,select{font:inherit} button{cursor:pointer}
a{text-decoration:none;color:inherit}
.app-shell{min-height:100vh;display:flex;direction:ltr}
.sidebar{width:260px;background:linear-gradient(180deg,#071d56,#03143d);color:#fff;padding:22px 14px;display:flex;flex-direction:column;position:fixed;right:0;top:0;bottom:0;z-index:20;direction:rtl}
.brand{display:flex;align-items:center;gap:12px;padding:4px 10px 26px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px}
.brand-mark{width:44px;height:44px;border-radius:12px;background:var(--blue);display:grid;place-items:center;font-size:23px;font-weight:800;box-shadow:0 8px 20px rgba(18,63,232,.35)}
.brand strong{font-size:22px;letter-spacing:.5px}.brand span{display:block;font-size:11px;color:#cbd5ef}
.nav{display:grid;gap:7px}.nav-item{border:0;background:transparent;color:#dce5ff;padding:13px 15px;border-radius:10px;display:flex;align-items:center;gap:12px;font-weight:600;text-align:right}
.nav-item:hover,.nav-item.active{background:linear-gradient(90deg,#0d39e9,#1555ff);color:#fff;box-shadow:0 8px 22px rgba(18,63,232,.25)}
.nav-icon{width:23px;text-align:center;font-size:18px}.sidebar-bottom{margin-top:auto}.logout{width:100%;border:1px solid rgba(255,255,255,.17);background:transparent;color:#fff;border-radius:10px;padding:13px;font-weight:700}
.main{margin-right:260px;direction:rtl;width:calc(100% - 260px);min-width:0}
.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}
.page-title{font-size:22px;font-weight:800}.crumb{font-size:12px;color:var(--muted);margin-top:1px}
.userbox{display:flex;align-items:center;gap:14px}.avatar{width:42px;height:42px;border-radius:50%;background:#edf2ff;color:var(--blue);display:grid;place-items:center;font-weight:800}.bell{position:relative;font-size:22px}.badge{position:absolute;top:-5px;left:-7px;background:#ef233c;color:#fff;border-radius:10px;font-size:9px;padding:1px 5px}
.content{padding:24px 26px 38px;max-width:1600px;margin:auto}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter,.datebox,.search{height:44px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 13px;color:var(--text);outline:none}.search{min-width:260px}.primary{border:0;background:var(--blue);color:#fff;border-radius:9px;padding:11px 17px;font-weight:700;box-shadow:0 7px 16px rgba(18,63,232,.2)}.secondary{border:1px solid #cfd9f5;background:#fff;color:var(--blue);border-radius:9px;padding:10px 15px;font-weight:700}
.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:20px}.stat{min-height:130px}.stat-head{display:flex;justify-content:space-between;align-items:center;color:#25345e;font-size:14px;font-weight:700}.stat-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eef3ff;color:var(--blue);font-size:20px}.stat-number{font-size:27px;font-weight:800;margin-top:10px}.stat-sub{font-size:12px;color:var(--muted);margin-top:3px}.up{color:var(--green)}.down{color:var(--red)}
.section-title{font-size:17px;font-weight:800;margin:25px 0 12px}.two{grid-template-columns:1.55fr 1fr}.three{grid-template-columns:repeat(3,1fr)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:13px 11px;border-bottom:1px solid #edf0f6;text-align:right;font-size:12px;white-space:nowrap}.table th{color:#52618a;font-weight:800;background:#fbfcff}.table tr:hover td{background:#fbfdff}
.status{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;font-size:11px;font-weight:700}.success{background:#eaf8ef;color:#138a3e}.warning{background:#fff5e4;color:#d97706}.danger{background:#ffebed;color:#dc2626}.info{background:#edf2ff;color:#2451db}.purple{background:#f2eaff;color:#7c3aed}
.action{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--blue)}.actions{display:flex;gap:5px}
.chart{height:300px;position:relative;padding:20px 20px 5px}.bars{height:220px;display:flex;align-items:flex-end;gap:13px;border-bottom:1px solid #dfe5f2;border-left:1px solid #dfe5f2;padding:0 8px}.bar{flex:1;min-width:14px;background:linear-gradient(180deg,#2557f4,#b8c8ff);border-radius:6px 6px 0 0;position:relative}.bar b{position:absolute;top:-24px;width:100%;font-size:10px;text-align:center}.months{display:flex;gap:13px;padding:8px}.months span{flex:1;text-align:center;color:var(--muted);font-size:10px}
.progress{height:8px;background:#edf0f5;border-radius:10px;overflow:hidden}.progress i{display:block;height:100%;background:var(--blue);border-radius:10px}.mini-row{display:flex;justify-content:space-between;font-size:12px;margin:11px 0}.country-grid{grid-template-columns:repeat(6,1fr)}.country{padding:14px}.country-name{font-weight:800;font-size:13px}.country-value{font-size:22px;font-weight:800;margin-top:8px}.muted{color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(4,18,57,.45);display:grid;place-items:center;z-index:100}.modal{width:min(620px,92vw);background:#fff;border-radius:16px;padding:24px;box-shadow:0 25px 80px rgba(0,0,0,.2)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.close{border:0;background:#f4f6fb;border-radius:8px;width:35px;height:35px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:700}.field input,.field select{height:45px;border:1px solid var(--line);border-radius:8px;padding:0 12px;outline:none}.field input:focus,.field select:focus{border-color:#98adf7;box-shadow:0 0 0 3px #edf2ff}
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#fff}.auth-side{background:linear-gradient(150deg,#061a4f,#0b35b7);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center}.auth-side h1{font-size:42px;margin:0 0 10px}.auth-side p{color:#d9e3ff;line-height:2}.auth-features{display:grid;gap:12px;margin-top:25px}.auth-feature{padding:13px 15px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.06)}.auth-form{display:flex;align-items:center;justify-content:center;padding:30px}.auth-box{width:min(450px,100%)}.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:30px}.auth-logo .brand-mark{width:48px;height:48px}.auth-box h2{font-size:28px;margin:0}.auth-box .lead{color:var(--muted);font-size:13px;margin:7px 0 24px}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#f4f6fb;border-radius:10px;padding:4px;margin-bottom:20px}.tab{border:0;background:transparent;padding:10px;border-radius:8px;font-weight:700;color:#657395}.tab.active{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(0,0,0,.06)}.fullbtn{width:100%;height:47px;margin-top:17px}.auth-links{display:flex;justify-content:space-between;margin-top:12px;font-size:12px}.demo{margin-top:18px;padding:12px;border-radius:9px;background:#f3f6ff;color:#3e4e77;font-size:11px}
.user-grid{grid-template-columns:repeat(3,1fr)}.order-card{display:flex;justify-content:space-between;gap:15px;align-items:center}.order-title{font-weight:800}.order-meta{font-size:11px;color:var(--muted);margin-top:5px}
.detail-list{display:grid;gap:10px}.detail-line{display:flex;justify-content:space-between;border-bottom:1px dashed #e8ecf4;padding-bottom:9px;font-size:12px}.detail-line:last-child{border:0}
.settings-grid{grid-template-columns:repeat(3,1fr)}.setting-item{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid var(--line);border-radius:10px;background:#fff}.setting-icon{width:42px;height:42px;border-radius:11px;background:#eef3ff;color:var(--blue);display:grid;place-items:center;font-size:20px}
.empty{padding:45px;text-align:center;color:var(--muted)}.mobile-menu{display:none;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.country-grid{grid-template-columns:repeat(3,1fr)}.two,.three,.settings-grid{grid-template-columns:1fr}.sidebar{width:220px}.main{margin-right:220px;width:calc(100% - 220px)}}
@media(max-width:760px){.sidebar{transform:translateX(100%);transition:.2s;width:260px}.sidebar.open{transform:none}.main{margin-right:0;width:100%}.mobile-menu{display:block}.topbar{padding:0 15px}.content{padding:16px}.stats{grid-template-columns:1fr}.country-grid{grid-template-columns:repeat(2,1fr)}.toolbar{align-items:stretch;flex-direction:column}.search{min-width:0;width:100%}.auth{grid-template-columns:1fr}.auth-side{display:none}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.page-title{font-size:18px}}