:root{
  --bg:#0b1220; --panel:#121a2b; --border:#22304f; --text:#e6edf7; --muted:#a9b7d1;
  --accent:#2b5cff; --good:#7CFFB2; --warn:#ffcc66; --danger:#ff4d4d;
  --shadow: 0 20px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans Arabic","Noto Sans",sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, #17264a, var(--bg) 55%);
}
header{
  position:sticky; top:0; z-index:10;
  padding:14px 16px;
  border-bottom:1px solid rgba(34,48,79,.7);
  background: rgba(11,18,32,.6);
  backdrop-filter: blur(10px);
}
.headerRow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:14px;
  background: rgba(18,26,43,.75);box-shadow: var(--shadow);font-size:20px
}
h1{margin:0;font-size:18px}
.sub{margin:2px 0 0;color:var(--muted);font-size:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{
  border:1px solid rgba(34,48,79,.9);
  background: rgba(12,20,38,.9);
  color: var(--text);
  padding:11px 14px;
  border-radius:14px;
  cursor:pointer;
  font-size:14px;
}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btnPrimary{
  background: linear-gradient(135deg, rgba(43,92,255,.95), rgba(43,92,255,.55));
  border-color: rgba(43,92,255,.85);
}
.select,.input{
  border-radius:14px;padding:11px 12px;border:1px solid rgba(34,48,79,.9);
  background: rgba(12,20,38,.9);color: var(--text);outline:none;
}
.container{max-width:1200px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.card{
  background: rgba(18,26,43,.78);
  border:1px solid rgba(34,48,79,.92);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
}
.title{font-weight:900;margin-bottom:12px}
.compassWrap{display:grid;place-items:center}
.compass{width:min(380px,100%);aspect-ratio:1/1;position:relative}
.ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(34,48,79,.95);
  background:
    radial-gradient(circle at 30% 25%, rgba(26,39,70,.98), rgba(11,18,32,.98) 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 60%);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: rotate(0deg);
  transition: transform 55ms linear;
}
.ticks{
  position:absolute; inset:0; border-radius:50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(230,237,247,.25) 0deg 1deg, transparent 1deg 9deg);
  mask: radial-gradient(circle at 50% 50%, transparent 0 58%, #000 59%);
  opacity:.75;
}
.cardinal{position:absolute;color:rgba(230,237,247,.85);font-weight:900;text-shadow:0 8px 20px rgba(0,0,0,.55)}
.N{top:10px;left:50%;transform:translateX(-50%)}
.S{bottom:10px;left:50%;transform:translateX(-50%)}
.E{right:12px;top:50%;transform:translateY(-50%)}
.W{left:12px;top:50%;transform:translateY(-50%)}
.centerDot{
  position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;
  background: rgba(230,237,247,.95);transform:translate(-50%,-50%);
  box-shadow:0 0 0 7px rgba(230,237,247,.08);
}
.needle{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(0deg);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.5));
  transition: transform 55ms linear;
}
.needle.qibla{border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:160px solid rgba(255,77,77,.96)}
.needle.north{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:125px solid rgba(124,255,178,.92);opacity:.92}
.badgeRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.badge{padding:8px 10px;border-radius:999px;border:1px solid rgba(34,48,79,.85);background: rgba(12,20,38,.65);font-size:12px;color: rgba(230,237,247,.88)}
.badge.good{border-color: rgba(124,255,178,.55); color: var(--good)}
.badge.warn{border-color: rgba(255,204,102,.55); color: var(--warn)}
.hint{margin-top:12px;padding:12px;border-radius:16px;border:1px solid rgba(34,48,79,.85);background: rgba(12,20,38,.65);color: rgba(230,237,247,.86);line-height:1.7;font-size:13px}
.form{display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.label{color:var(--muted);font-size:12px;margin-top:6px}
#map{width:100%;height:360px;border-radius:16px;border:1px solid rgba(34,48,79,.85);overflow:hidden;background: rgba(12,20,38,.65)}
.status{margin-top:12px;padding:12px;border-radius:16px;border:1px solid rgba(34,48,79,.85);background: rgba(12,20,38,.65);color: rgba(230,237,247,.86)}
.footer{max-width:1200px;margin:0 auto;padding:14px 16px 22px;color: rgba(230,237,247,.55);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mono{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
a{color:#9cc2ff}