/* ============================================================
   كشّاف المتابعة — بوابة الدخول والتفعيل وشريط المزامنة
   تعتمد على متغيّرات الألوان المعرّفة في style.css
   ============================================================ */

#gate{
  position:fixed; inset:0; z-index:100; overflow:auto;
  background:var(--bg);
  display:grid; place-items:center; padding:24px 16px;
}
#gate[hidden]{display:none}

.gate-wrap{
  width:min(100%, 1020px);
  display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 2px 6px rgba(15,36,56,.06), 0 26px 70px rgba(15,36,56,.18);
  overflow:hidden;
}
@media (max-width:860px){ .gate-wrap{grid-template-columns:1fr} }

/* ---------- لوحة التعريف ---------- */
.gate-brand{
  position:relative; color:#EAF2FB; padding:30px 28px 26px;
  display:flex; flex-direction:column; gap:20px;
  background:
    radial-gradient(700px 320px at 88% -6%, rgba(69,171,128,.55), transparent 62%),
    linear-gradient(150deg, #1B4FA8 0%, #133C86 46%, #0D2A62 100%);
}
.gate-brand::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.22) 1.4px, transparent 1.5px);
  background-size:17px 17px;
  -webkit-mask-image:linear-gradient(200deg, #000 0%, transparent 46%, transparent 62%, #000 100%);
          mask-image:linear-gradient(200deg, #000 0%, transparent 46%, transparent 62%, #000 100%);
}
.gate-brand > *{position:relative}
.gb-top{text-align:center}
.gb-logo{width:150px; margin:0 auto 14px; background:#fff; border-radius:14px; padding:12px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.22)}
.gb-logo img{width:100%; display:block}
.gate-brand h1{margin:0; font-size:27px; font-weight:900; letter-spacing:-.6px; color:#fff}
.gb-tag{margin:5px 0 0; font-size:13.5px; font-weight:700; color:#BDD3EE}

.gb-feats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.gb-feats li{position:relative; padding-inline-start:26px; font-size:13.5px; line-height:1.75; color:#DCE8F7}
.gb-feats li b{color:#fff}
.gb-feats li::before{
  content:"✓"; position:absolute; inset-inline-start:0; top:1px;
  width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:900; color:#0D2A62; background:#6FD2A6;
}

.gb-price{
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  padding:16px 14px; border-radius:14px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(2px);
}
.gb-amt{font-size:38px; font-weight:900; color:#fff; line-height:1; letter-spacing:-1px}
.gb-amt small{font-size:16px; font-weight:800; margin-inline-start:5px; color:#BFE9D5}
.gb-once{font-size:14px; font-weight:800; color:#8FE3BC}
.gb-once b{color:#fff}
.gb-sub{font-size:11.5px; color:#B7CCE8}

.gb-contact{margin-top:auto}
.gb-clabel{display:block; font-size:11px; font-weight:800; letter-spacing:2.5px;
  color:#9DB8DA; margin-bottom:9px; text-align:center}
.gb-links{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:420px){ .gb-links{grid-template-columns:1fr} }
.gc{
  display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  text-decoration:none; color:#fff; transition:background .13s, transform .08s, border-color .13s;
}
.gc:hover{background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.34); transform:translateY(-1px)}
.gc .ic{font-size:19px; line-height:1; flex:none}
.gc b{display:block; font-size:13px; font-weight:800}
.gc i{display:block; font-style:normal; font-size:10.5px; color:#B7CCE8}
.gc-store{background:rgba(111,210,166,.20); border-color:rgba(111,210,166,.42)}
.gc-store:hover{background:rgba(111,210,166,.32)}

/* ---------- لوحة الدخول ---------- */
.gate-card{padding:30px 30px 26px; display:flex; flex-direction:column; background:var(--panel)}
.gate-tabs{display:flex; gap:4px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:11px; padding:4px; margin-bottom:18px}
.gate-tabs button{flex:1; padding:9px 6px; border:0; border-radius:8px; background:transparent;
  font:inherit; font-weight:700; font-size:13.5px; color:var(--ink-2); cursor:pointer;
  transition:background .12s, color .12s}
.gate-tabs button:hover{background:var(--line-2)}
.gate-tabs button[aria-selected="true"]{background:var(--navy); color:#fff}

.gate-form{display:none; flex-direction:column; gap:13px}
.gate-form.on{display:flex}
.gate-form h2{margin:0; font-size:20px; font-weight:900; letter-spacing:-.3px}
.gf-sub{margin:-8px 0 4px; font-size:13px; color:var(--muted); font-weight:600; line-height:1.7}
.gate-form .f{display:flex; flex-direction:column; gap:5px}
.gate-form label{font-size:12.5px; font-weight:700; color:var(--ink-2)}
.gate-form input{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--field); color:var(--ink); font:inherit;
  transition:border-color .12s, box-shadow .12s}
.gate-form input::placeholder{color:var(--muted); opacity:.7}
.gate-form input:focus{border-color:var(--navy); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 16%, transparent)}
.gate-form input.code{direction:ltr; text-align:center; letter-spacing:3px; font-weight:800;
  text-transform:uppercase; font-family:ui-monospace,Consolas,monospace; font-size:15px}
.gate-form .two{display:grid; grid-template-columns:1fr 1fr; gap:13px}
@media (max-width:520px){ .gate-form .two{grid-template-columns:1fr} }

.pw{position:relative}
.pw .eye{position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; cursor:pointer; font-size:16px; padding:5px 7px;
  border-radius:7px; opacity:.6}
.pw .eye:hover{opacity:1; background:var(--line-2)}

.gate-btn{width:100%; padding:12px; border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(120deg,var(--navy),var(--blue) 55%,var(--green)); color:#fff;
  font:inherit; font-weight:800; font-size:15.5px; margin-top:4px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--navy) 30%, transparent);
  transition:transform .08s, box-shadow .12s}
.gate-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px color-mix(in srgb,var(--navy) 38%, transparent)}
.gate-btn:active{transform:translateY(0)}
.gate-btn:disabled{opacity:.55; cursor:progress; transform:none}

.gf-alt{margin:2px 0 0; text-align:center; font-size:13px; color:var(--muted); font-weight:600}
.lnk{border:0; background:transparent; color:var(--navy); font:inherit; font-weight:800;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0}
.gate-note{font-size:12px; color:var(--muted); line-height:1.85; margin:0}
.gate-msg{display:none; padding:10px 13px; border-radius:10px; font-size:13px; font-weight:700; margin-bottom:14px}
.gate-msg.on{display:block}
.gate-msg.err{background:color-mix(in srgb,var(--danger) 12%, var(--panel)); color:var(--danger);
  border:1px solid color-mix(in srgb,var(--danger) 30%, transparent)}
.gate-msg.ok{background:color-mix(in srgb,var(--ok) 13%, var(--panel)); color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 32%, transparent)}

/* ---------- شريط الحساب والمزامنة ---------- */
.syncbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:1240px; margin:14px auto -4px; padding:10px 16px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 1px 2px rgba(15,36,56,.05); font-size:13px;
}
.syncbar .who{font-weight:800; display:flex; align-items:center; gap:8px}
.syncbar .who img{width:48px}
.syncbar .sp{margin-inline-start:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.syncbar .badge{display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px;
  font-size:12px; font-weight:800; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2)}
.syncbar .badge.ok  {color:var(--ok);     border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.syncbar .badge.busy{color:var(--blue);   border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.syncbar .badge.err {color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.syncbar .badge.warn{color:var(--warn);   border-color:color-mix(in srgb,var(--warn) 35%,transparent)}


@media print{ #gate{display:none!important} .syncbar{display:none!important} }