:root{
  --bg:#0b0f14; --card:#111826; --text:#e7eefc; --muted:#9fb0cc;
  --brand:#b11226; --line:#1e2a3d; --btn:#1b2a44;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto; background:linear-gradient(180deg,#070a0f, #0b0f14); color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,15,20,.9);backdrop-filter:blur(10px)}
.brand small{display:block;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav a{padding:8px 10px;border-radius:10px;color:var(--muted)}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.lang{display:flex;gap:8px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.btn:hover{background:rgba(255,255,255,.09)}
.btn.primary{background:var(--brand);border-color:transparent}
.danger{color:#ff6b6b}
.card{background:rgba(17,24,38,.75);border:1px solid var(--line);border-radius:18px;padding:16px;margin:14px 0}
.card.narrow{max-width:480px;margin:14px auto}
.hero{padding:18px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(800px 300px at 20% 0%, rgba(177,18,38,.25), transparent), rgba(17,24,38,.75)}
.actions{display:flex;gap:10px;margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
label{display:grid;gap:6px;color:var(--muted);font-size:14px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--text)}
textarea{min-height:100px}
.check{display:flex;align-items:center;gap:10px}
.list{display:grid;gap:10px}
.item{padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.item:hover{background:rgba(0,0,0,.25)}
.flash-wrap{display:grid;gap:8px}
.flash{padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.flash.success{border-color:rgba(0,255,120,.2)}
.flash.danger{border-color:rgba(255,0,0,.25)}
.footer{padding:24px 16px;color:var(--muted);border-top:1px solid var(--line);text-align:center;margin-top:30px}
@media(max-width:800px){
  .grid{grid-template-columns:1fr}
  .nav{justify-content:center}
}
/* ===== Mobile Topbar/Nav Fix ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
}

.topbar .topbar-inner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.nav-toggle{
  display: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.lang .sep{ opacity: .6; padding: 0 6px; }

.lang-in-nav{ display:none; margin-top: 10px; }
.lang-desktop{ display:flex; align-items:center; gap:6px; margin-inline-start: auto; }

/* Overlay */
.nav-overlay{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 999;
}
.nav-overlay.show{ display:block; }

/* Install button contrast */
.install-btn{
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Responsive Drawer Nav */
@media (max-width: 900px){
  .nav-toggle{ display: inline-flex; }

  .lang-desktop{ display:none; }
  .lang-in-nav{ display:flex; align-items:center; gap:6px; }

  .nav{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(86vw, 360px);
    z-index: 1001;
    padding: 16px;
    overflow: auto;
    transform: translateX(110%);
    transition: transform .2s ease;
    background: rgba(10,12,16,.96);
    backdrop-filter: blur(10px);
    border-left: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  html[dir="ltr"] .nav{
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1px solid rgba(255,255,255,.08);
    transform: translateX(-110%);
  }

  .nav.open{
    transform: translateX(0);
  }

  main.container{
    padding-top: 14px; /* محتوى واضح تحت الهيدر */
  }
}