:root{
  --bg1:#0b1026;
  --bg2:#152a6e;
  --card: rgba(255,255,255,.92);
  --card2: rgba(255,255,255,.06);
  --ink:#0b1220;
  --muted:#6b7280;
  --muted2: rgba(255,255,255,.75);
  --line: rgba(17,24,39,.12);
  --line2: rgba(255,255,255,.14);
  --shadow: 0 10px 28px rgba(0,0,0,.22);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans Arabic","Noto Sans",sans-serif;
  color:#111827;
  background: #f6f7fb;
}

a{color:inherit;text-decoration:none}
small{color:var(--muted)}
.container{
  max-width:1080px;
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:360px 1fr;
  gap:18px;
}
@media (max-width: 980px){
  .container{grid-template-columns:1fr;}
}
.panel{
  background:#fff;
  border:1px solid rgba(17,24,39,.10);
  border-radius: var(--radius);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  overflow:hidden;
}
.panel.hero{
  background: radial-gradient(1200px 600px at 70% 0%, rgba(63, 101, 255, .25), transparent 55%),
              radial-gradient(900px 500px at 20% 40%, rgba(255,255,255,.14), transparent 55%),
              linear-gradient(140deg, var(--bg1), var(--bg2));
  color:#fff;
  border-color: rgba(255,255,255,.10);
}
.panel-header{
  padding:14px 16px;
  border-bottom:1px solid rgba(17,24,39,.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.panel.hero .panel-header{
  border-bottom:1px solid var(--line2);
}
.panel-body{padding:14px 16px;}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); font-size:12px; color:#fff;}
.panel.hero .badge{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
}
.logoRow{display:flex; align-items:center; gap:10px;}
.logoRow img{height:28px; width:auto;}
.kicker{font-size:12px; color: rgba(255,255,255,.78); line-height:1.5}
.note{font-size:12px; color: var(--muted); line-height:1.6}
.note.light{color: rgba(255,255,255,.78)}
.row{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.14);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.btn.primary{
  border-color:#111827;
  background:#111827;
  color:#fff;
}
.panel.hero .btn{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}
.panel.hero .btn.primary{
  background:#fff;
  color:#0b1220;
  border-color:#fff;
}
.list{
  display:flex; flex-direction:column; gap:10px;
  padding:10px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.item{
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.item:hover{background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.92); color: rgba(15,23,42,.95)}
.item .meta{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.item .name{font-weight:900; color: rgba(255,255,255,.95)}
.item .path{font-size:12px; color: rgba(255,255,255,.68)}
.item:hover{background:#fafafa}
.item .meta{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.item .name{font-weight:900}
.item .path{font-size:12px; color: var(--muted)}
.hr{height:1px; background: rgba(17,24,39,.10); margin:14px 0}

/* Phone frame */
.phone-wrap{display:flex; justify-content:center; padding: 12px;}
.phone{
  width: 390px; height: 844px;
  border: 10px solid #0b1220;
  border-radius: 34px;
  background:#fff;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.iframe{width:100%; height:100%; border:0}

.item:visited{color: rgba(255,255,255,.92);}

/* hover text fix */
.item:hover .name{ color: rgba(15,23,42,.95) !important; }
.item:hover .path{ color: rgba(15,23,42,.70) !important; }
.item:hover .badge{ background: rgba(15,23,42,.08) !important; border-color: rgba(15,23,42,.12) !important; color: rgba(15,23,42,.92) !important; }

.item:focus{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.item:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }