:root{
  --accent:#d4a94a;--accent-2:#f4c96b;--accent-3:#b8862a;--accent-4:#8a6a20;
  --accent-rgb:212,169,74;
  --bg:#08090d;--bg-2:#0d1018;--bg-3:#0a0b10;
  --hero:linear-gradient(135deg,rgba(var(--accent-rgb),.18),transparent 60%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#f5f7fb;font-family:Assistant,Arial,sans-serif;direction:rtl;min-height:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,var(--bg-2),var(--bg-3));border-left:1px solid rgba(255,255,255,.07);padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.side:before{content:"";position:absolute;top:0;right:0;width:3px;height:120px;background:linear-gradient(180deg,var(--accent),transparent);border-radius:0 0 0 3px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin-bottom:26px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-3));display:grid;place-items:center;box-shadow:0 8px 22px rgba(var(--accent-rgb),.4)}
.brand-mark:before{content:"";width:14px;height:14px;border:2px solid #fff;border-radius:4px;transform:rotate(45deg)}
.brand em{font-style:normal;color:var(--accent-2)}
.nav{display:grid;gap:4px}
.nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;font-size:14px;font-weight:600;color:#b6bdca;cursor:pointer;transition:.15s;user-select:none}
.nav a:hover{background:rgba(255,255,255,.04);color:#fff}
.nav a.active{background:rgba(var(--accent-rgb),.14);color:var(--accent-2);box-shadow:inset 3px 0 0 var(--accent)}
.nav .grp{margin:16px 6px 6px;color:#6d7688;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:800}
.main{padding:22px 26px 40px;min-width:0}
.hero-band{position:relative;background:var(--hero),radial-gradient(circle at 100% 0%,rgba(var(--accent-rgb),.12),transparent 55%);border:1px solid rgba(var(--accent-rgb),.22);border-radius:20px;padding:18px 22px;margin-bottom:20px;overflow:hidden}
.hero-band:after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.35),transparent 70%);filter:blur(30px)}
.hero-band .top{margin:0;position:relative;z-index:1}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top h1{font-size:26px;margin:0;letter-spacing:-.7px}
.top .sub{color:#8f98aa;font-size:13px;margin-top:3px}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(66,211,146,.12);color:#7bf0b9;border:1px solid rgba(66,211,146,.28);padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}
.chip i{width:6px;height:6px;background:#42d392;border-radius:50%;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.btn{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:9px 15px;font-weight:700;font-size:13px;transition:.15s}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-3));color:#fff;box-shadow:0 8px 22px rgba(var(--accent-rgb),.32)}
.btn.ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#e7eaf0}
.btn:hover{transform:translateY(-1px)}
.tabbar{display:flex;gap:6px;margin:18px 0;padding:5px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;color:#8f98aa;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.15s}
.tab:hover{color:#fff}
.tab.active{background:linear-gradient(135deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.08));color:var(--accent-2);box-shadow:0 4px 14px rgba(var(--accent-rgb),.18)}
.pane{animation:fade .25s ease}
.pane[hidden]{display:none}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));padding:16px 18px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;top:0;right:0;width:60px;height:60px;background:radial-gradient(circle,rgba(var(--accent-rgb),.14),transparent 70%);pointer-events:none}
.kpi small{color:#8f98aa;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.kpi b{display:block;font-size:26px;margin-top:6px;letter-spacing:-.7px}
.kpi .delta{margin-top:4px;font-size:12px;font-weight:700}
.kpi .up{color:#69e9ac}.kpi .down{color:#ff8090}
.grid{display:grid;gap:16px}
.card{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012));padding:18px;min-width:0}
.card h3{margin:0 0 14px;font-size:16px;letter-spacing:-.3px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card h3 .tag{background:rgba(var(--accent-rgb),.14);color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.32);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:right;color:#8f98aa;font-weight:700;padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}
.table td{padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.table tr:hover td{background:rgba(255,255,255,.02)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700}
.pill.hot{background:rgba(255,107,125,.13);color:#ff8f9e;border:1px solid rgba(255,107,125,.3)}
.pill.warm{background:rgba(255,184,77,.13);color:#ffc86f;border:1px solid rgba(255,184,77,.3)}
.pill.cold{background:rgba(120,150,220,.13);color:#9db4e6;border:1px solid rgba(120,150,220,.3)}
.pill.ok{background:rgba(66,211,146,.13);color:#69e9ac;border:1px solid rgba(66,211,146,.3)}
.pill.new{background:rgba(var(--accent-rgb),.14);color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.3)}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent-4),var(--accent-2));display:inline-grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.mini-chart{display:flex;align-items:end;gap:5px;height:110px}
.mini-chart span{flex:1;background:linear-gradient(180deg,var(--accent-2),var(--accent-4));border-radius:6px 6px 2px 2px;transition:.3s}
.mini-chart span:hover{filter:brightness(1.2)}
@media(max-width:900px){.app{grid-template-columns:1fr}.side{position:relative;height:auto;display:none}.kpis{grid-template-columns:repeat(2,1fr)}.main{padding:16px}}
.demo-badge{position:fixed;bottom:14px;left:14px;z-index:99;background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent-2);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:800;backdrop-filter:blur(10px)}
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:inline-block;vertical-align:-3px}
.ic-lg{width:20px;height:20px}
.ic-sm{width:13px;height:13px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search{position:relative;flex:1;min-width:200px;max-width:340px}
.search input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 34px 9px 12px;font-size:13px;outline:none;transition:.15s;color:#f5f7fb}
.search input::placeholder{color:#6d7688}
.search input:focus{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.04)}
.search .ic{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#6d7688}
.chip.gray{background:rgba(255,255,255,.05);color:#c5cbd8;border:1px solid rgba(255,255,255,.1)}
.chip.gray i{background:#c5cbd8}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-inline-end:6px}
.kbd{display:inline-block;padding:2px 6px;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:5px;color:#c5cbd8}
.grid.g2{grid-template-columns:1fr 1fr}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g23{grid-template-columns:1.4fr 1fr}
@media(max-width:900px){.grid.g2,.grid.g3,.grid.g23{grid-template-columns:1fr}}
.stat-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06);font-size:13px}
.stat-row:last-child{border-bottom:0}
.stat-row b{font-size:14px}
.list-clean{display:grid;gap:8px}
.list-clean .row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:12px;font-size:13px}
.list-clean .row:hover{background:rgba(255,255,255,.045)}
.list-clean .row .ic{color:var(--accent-2)}
.ico-btn{width:32px;height:32px;display:inline-grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:9px;cursor:pointer;color:#c5cbd8;transition:.15s}
.ico-btn:hover{background:rgba(var(--accent-rgb),.12);color:var(--accent-2);border-color:rgba(var(--accent-rgb),.3)}
.donut{--v:70;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--accent-2) calc(var(--v)*1%),rgba(255,255,255,.06) 0);display:grid;place-items:center;position:relative}
.donut:before{content:"";position:absolute;inset:14px;background:var(--bg-2);border-radius:50%}
.donut b{position:relative;font-size:22px;color:var(--accent-2)}
.timeline{position:relative;padding-inline-start:22px}
.timeline:before{content:"";position:absolute;right:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--accent-2),transparent)}
.timeline .step{position:relative;padding:8px 0 14px;font-size:13px}
.timeline .step:before{content:"";position:absolute;right:-19px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
.timeline .step small{display:block;color:#8f98aa;font-size:11.5px;margin-top:3px}