:root{
  --navy:#071f43;
  --navy2:#0d2d5f;
  --gold:#c99a3d;
  --gold2:#e2bb6a;
  --bg:#f6f7f9;
  --surface:#fff;
  --text:#14233b;
  --muted:#6d7686;
  --line:#e7e9ee;
  --shadow:0 14px 34px rgba(11,31,67,.10);
  --radius:18px;
}
*{box-sizing:border-box}
html{direction:rtl}
body{
  margin:0;
  font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  background:
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,247,249,.98)),
    radial-gradient(circle at 15% 8%,rgba(201,154,61,.12),transparent 24%);
  color:var(--text)
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.topbar{
  height:88px;background:linear-gradient(90deg,var(--navy2),var(--navy));
  color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:0 36px;box-shadow:0 5px 20px rgba(7,31,67,.18)
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{
  width:62px;height:62px;border-radius:16px;background:#fff;
  display:grid;place-items:center;overflow:hidden;border:2px solid rgba(201,154,61,.65)
}
.brand-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.brand-logo .fallback{font-weight:900;color:var(--navy);font-size:20px}
.brand h1{margin:0;color:var(--gold2);font-size:28px}
.brand p{margin:3px 0 0;color:#d6deea;font-size:13px}
.top-actions{display:flex;align-items:center;gap:12px}
.user-chip,.icon-btn{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
  color:#fff;border-radius:13px;padding:10px 14px
}
.icon-btn{width:44px;height:44px;padding:0;display:grid;place-items:center}
.hero{
  min-height:245px;padding:52px 5vw 34px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.85)),
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(7,31,67,.035) 40px);
  border-bottom:1px solid var(--line)
}
.hero-copy{max-width:690px}
.hero h2{font-size:42px;margin:0 0 14px;color:var(--navy)}
.hero h2 span{color:var(--gold)}
.hero h3{margin:0 0 10px;font-size:22px}
.hero p{margin:0;color:var(--muted);font-size:17px;line-height:1.9}
.skyline{
  width:36%;min-width:300px;height:160px;opacity:.16;
  background:
    linear-gradient(to top, var(--navy) 0 35%, transparent 35%) 4% 100%/34px 92px no-repeat,
    linear-gradient(to top, var(--navy) 0 50%, transparent 50%) 15% 100%/45px 132px no-repeat,
    linear-gradient(to top, var(--navy) 0 65%, transparent 65%) 29% 100%/54px 155px no-repeat,
    linear-gradient(to top, var(--navy) 0 45%, transparent 45%) 47% 100%/42px 114px no-repeat,
    linear-gradient(to top, var(--navy) 0 58%, transparent 58%) 62% 100%/48px 145px no-repeat,
    linear-gradient(to top, var(--navy) 0 38%, transparent 38%) 79% 100%/38px 98px no-repeat,
    linear-gradient(to top, var(--navy) 0 53%, transparent 53%) 93% 100%/44px 128px no-repeat;
  border-bottom:4px solid var(--navy)
}
.home-wrap{padding:26px 2vw 44px}
.modules-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px;max-width:1500px;margin:0 auto
}
.module-card{
  background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;
  min-height:445px;transition:.22s ease
}
.module-card:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(11,31,67,.14)}
.module-icon{
  width:74px;height:74px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(145deg,var(--navy2),var(--navy));
  color:var(--gold2);font-size:33px;border:2px solid rgba(201,154,61,.45)
}
.module-card h3{text-align:center;margin:0;color:var(--navy);font-size:22px}
.module-card .desc{text-align:center;color:var(--muted);line-height:1.65;min-height:68px;margin:10px 0 16px}
.mini-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px}
.mini-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px
}
.mini-row:last-child{border-bottom:0}
.mini-row b{color:var(--gold)}
.enter-btn{
  margin-top:auto;background:linear-gradient(90deg,var(--navy),var(--navy2));
  color:#fff;border:1px solid var(--gold);border-radius:10px;
  min-height:44px;display:flex;align-items:center;justify-content:center;
  font-weight:800
}
.system-strip{
  max-width:1500px;margin:30px auto 0;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);display:grid;
  grid-template-columns:1.3fr repeat(4,1fr);overflow:hidden
}
.strip-item{padding:18px;border-left:1px solid var(--line);text-align:center}
.strip-item:first-child{text-align:right}
.strip-item strong{display:block;color:var(--navy);font-size:22px;margin-top:5px}
.strip-item small{color:var(--muted)}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2f9a66;margin-left:7px}
.footer{text-align:center;color:#7d8593;padding:18px 10px 30px}
.inside-shell{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr)}
.sidebar{
  background:linear-gradient(180deg,var(--navy),#061832);
  color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh
}
.sidebar .brand{padding:0 6px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.side-title{font-size:12px;color:#aeb9ca;margin:20px 12px 8px}
.side-nav{display:flex;flex-direction:column;gap:7px}
.side-nav a{
  padding:12px 13px;border-radius:11px;color:#e5ebf3;
  display:flex;align-items:center;justify-content:space-between
}
.side-nav a:hover,.side-nav a.active{
  background:#fff;color:var(--navy);font-weight:800;border-right:4px solid var(--gold)
}
.inside-main{min-width:0;background:var(--bg)}
.inside-header{
  min-height:82px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:16px 28px;
  position:sticky;top:0;z-index:10
}
.inside-header h2{margin:0;color:var(--navy)}
.inside-header p{margin:4px 0 0;color:var(--muted)}
.inside-content{padding:26px}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.kpi{
  background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;
  box-shadow:var(--shadow)
}
.kpi span{color:var(--muted);font-size:13px}
.kpi strong{display:block;color:var(--navy);font-size:29px;margin-top:8px}
.panel-grid{display:grid;grid-template-columns:1.15fr 1.7fr 1.2fr;gap:18px;margin-top:18px}
.panel{
  min-height:300px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:20px
}
.panel h3{margin-top:0;color:var(--navy)}
.placeholder{
  height:220px;border:1px dashed #d8dce3;border-radius:12px;
  display:grid;place-items:center;color:var(--muted);background:#fbfcfd
}
@media(max-width:1200px){
  .modules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-strip{grid-template-columns:repeat(2,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .panel-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .topbar{height:auto;padding:14px 16px}.brand h1{font-size:20px}.top-actions{gap:6px}
  .hero{padding:34px 20px}.hero h2{font-size:31px}.skyline{display:none}
  .home-wrap{padding:18px 14px 34px}
  .modules-grid{grid-template-columns:1fr}
  .module-card{min-height:auto}
  .system-strip{grid-template-columns:1fr}.strip-item{border-left:0;border-bottom:1px solid var(--line)}
  .inside-shell{display:block}.sidebar{position:relative;width:100%;height:auto}
  .kpi-grid{grid-template-columns:1fr}
}