@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap";:root{color:#eaf2fc;background:#0b1020;font-family:Cairo,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}.app{min-height:100vh;display:flex}aside{background:#111b2e;border-left:1px solid #2a3850;flex-direction:column;flex:none;width:220px;height:100vh;padding:28px 16px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;margin-bottom:45px;display:flex}.brand b{color:#102034;background:linear-gradient(140deg,#55deb5,#4892dd);border-radius:11px;place-items:center;width:38px;height:38px;font-size:24px;display:grid}.brand strong,.brand small{display:block}.brand small{color:#91a5bd;font-size:10px}nav{gap:6px;display:grid}button{cursor:pointer}nav button{color:#a8b9ca;text-align:right;background:0 0;border:0;border-radius:9px;padding:10px}nav button.active,nav button:hover{color:#6ce3bc;background:#1b3450}aside a{color:#97aabe;margin-top:auto;padding:10px;font-size:12px;text-decoration:none}main{width:100%;max-width:1500px;margin:auto;padding:32px 40px 90px}header{justify-content:space-between;align-items:end;gap:18px;margin-bottom:27px;display:flex}header small{color:#56d6ae}h1{margin:2px 0;font-size:30px}header p,.note{color:#93a5bb;margin:0;font-size:12px}label{color:#a5b6c9;font-size:12px}select{color:#fff;background:#1a2a40;border:1px solid #34475d;border-radius:9px;min-width:120px;padding:8px 12px;display:block}.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;display:grid}.metric,section{background:#142036;border:1px solid #293a50;border-radius:14px;padding:18px}.metric span{color:#9aacc2;font-size:12px;display:block}.metric strong{margin-top:7px;font-size:24px;display:block}.panels{grid-template-columns:1fr 1fr;gap:18px;display:grid}section{margin-bottom:18px}h2{margin:0 0 17px;font-size:16px}.pair{grid-template-columns:1fr 1fr;gap:10px;display:grid}.pair .metric{background:#1a2a40}.scroll{overflow:auto}table{border-collapse:collapse;text-align:right;white-space:nowrap;width:100%;font-size:12px}td,th{border-bottom:1px solid #2a3b51;padding:12px}th{color:#9bacc1;background:#1a2b42;font-weight:600}.target{color:#8097af;text-overflow:ellipsis;text-align:right;direction:ltr;max-width:320px;font-size:10px;display:block;overflow:hidden}.empty,.state{text-align:center;color:#a2b2c7;padding:50px 15px}.state a{color:#5fd9b0}.note{margin:-8px 0 15px}.page{border-bottom:1px solid #293a50;grid-template-columns:125px 1fr 85px 85px;align-items:center;gap:15px;padding:11px 0;font-size:12px;display:grid}.page:last-child{border:0}.page small{color:#8ca1b9;display:block}.bar{background:#263950;border-radius:10px;height:8px;overflow:hidden}.bar i{background:linear-gradient(90deg,#5cddb4,#468ed9);height:100%;display:block}.mobile-nav{display:none}@media (width<=800px){aside{width:170px}main{padding:22px}.metrics{grid-template-columns:repeat(2,1fr)}.panels{grid-template-columns:1fr}}@media (width<=600px){aside{display:none}main{padding:20px 14px 90px}h1{font-size:24px}.metric{padding:13px}.metric strong{font-size:19px}section{padding:15px}.mobile-nav{padding:7px 4px max(7px,env(safe-area-inset-bottom));background:#142036;border-top:1px solid #31435a;grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.mobile-nav button{color:#9aacc2;background:0 0;border:0;padding:8px 2px;font-size:11px}.mobile-nav button.active{color:#59ddb6}.page{grid-template-columns:75px 1fr 65px;gap:8px}.page span:last-child{display:none}}