@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#07101d;--surface:#0d1929;--surface2:#111f32;--line:#203149;--text:#eaf1fa;--muted:#91a3ba;--gold:#d4ad62;--green:#42c99a;--red:#ed747b;--blue:#7faee8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% -15%,#1a2c44 0,transparent 45%),var(--bg);color:var(--text);font-family:"IBM Plex Sans Arabic",Inter,sans-serif}.topbar{height:auto;min-height:76px;padding:15px max(22px,calc((100% - 1280px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);background:#081321eF;position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border:1px solid #8d7548;color:var(--gold);display:grid;place-items:center;font:700 23px Inter;border-radius:11px}.brand strong{display:block;font:700 14px Inter;letter-spacing:.08em}.brand small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.top-actions{display:flex;align-items:center;gap:12px}.status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.status i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}.status.live{color:var(--green)}.status.live i{background:var(--green)}button{font:inherit}.refresh{background:#18283c;color:var(--text);border:1px solid var(--line);padding:8px 13px;border-radius:9px;cursor:pointer}.shell{max-width:1280px;margin:auto;padding:30px 22px 60px}.hero{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;padding:18px 0 28px}.eyebrow{font:600 10px Inter,sans-serif;letter-spacing:.16em;color:var(--gold);margin:0 0 9px}.hero h1{font-size:clamp(28px,4vw,43px);margin:0;font-weight:700}.hero h1 span{color:var(--gold);font-family:Inter}.sub,.section-head p:not(.eyebrow){color:var(--muted);margin:8px 0 0;font-size:13px}.hero-meta{display:grid;grid-template-columns:auto auto;gap:8px 16px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:12px}.hero-meta span{color:var(--muted)}.hero-meta b{font-family:Inter;text-align:left}.tabs{display:flex;gap:7px;overflow:auto;padding:10px;margin:0 0 28px;background:#0c1726;border:1px solid var(--line);border-radius:12px;scrollbar-width:thin}.tabs a{white-space:nowrap;text-decoration:none;color:#b6c5d7;font-size:12px;padding:9px 12px;border-radius:8px}.tabs a:hover{background:#1a2a40;color:var(--gold)}.section{margin:0 0 36px;scroll-margin-top:100px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.section-head h2{margin:0;font-size:21px}.tag{border:1px solid #715e3e;color:var(--gold);border-radius:30px;padding:6px 12px;font:600 11px Inter}.tag.muted{border-color:var(--line);color:var(--muted)}.grid{display:grid;gap:12px}.four{grid-template-columns:repeat(4,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.metric,.panel{background:linear-gradient(145deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:13px;padding:17px;min-width:0}.metric label{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font:600 23px Inter,sans-serif;margin:12px 0 5px;overflow-wrap:anywhere}.metric small{color:#71849c;font-size:11px}.panel h3{margin:0 0 15px;font-size:15px}.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #1b2a3d;font-size:12px}.kv:last-child{border:0}.kv span{color:var(--muted)}.kv b{text-align:left;overflow-wrap:anywhere}.notice{margin-top:13px;padding:12px 15px;border:1px solid #665333;background:#241f17;color:#d7bd88;border-radius:10px;font-size:12px}.zone.supply{border-top:2px solid var(--red)}.zone.demand{border-top:2px solid var(--green)}.zone-title{display:flex;justify-content:space-between;align-items:center}.zone-title span{font-size:11px;color:var(--muted)}.empty{color:var(--muted);font-size:12px;padding:15px 0}.call{color:var(--green)}.put{color:var(--red)}.scenario-cards{margin-top:12px}.chart-placeholder{height:350px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0d1b2c,#091422);position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;overflow:hidden;color:var(--muted)}.chart-placeholder strong{font:600 18px Inter;color:var(--gold);z-index:1}.chart-placeholder span{font-size:12px;z-index:1}.chart-grid{position:absolute;inset:0;background-image:linear-gradient(#20314966 1px,transparent 1px),linear-gradient(90deg,#20314966 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}footer{border-top:1px solid var(--line);padding:24px 0 0;display:flex;flex-direction:column;gap:8px;text-align:center}footer strong{font:700 13px Inter;letter-spacing:.08em;color:var(--gold)}footer span{font-size:12px;color:#c1ccda}footer small{font-size:10px;color:#71849c;max-width:760px;margin:0 auto;line-height:1.8}
@media(max-width:850px){.four{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{align-items:flex-start;flex-direction:column}.hero-meta{width:100%;grid-template-columns:1fr 1fr}.topbar{position:static;flex-wrap:wrap}.top-actions{width:100%;justify-content:space-between}}
@media(max-width:560px){.shell{padding:20px 13px 40px}.two,.three{grid-template-columns:1fr}.brand strong{font-size:11px}.section-head h2{font-size:18px}.metric,.panel{padding:14px}.metric strong{font-size:19px}.tabs{margin-inline:-3px}}