/* ==========================================================================
   صفحة الدخول (تذكرني / إظهار كلمة المرور) + زرار «تحميل التطبيق» (PWA)
   ========================================================================== */
.login-form{background:radial-gradient(900px 500px at 0% 100%,rgba(224,138,60,.07),transparent),var(--bg)}
.login-form form{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:34px 30px 26px;box-shadow:0 24px 60px -28px rgba(31,26,22,.28)}
.login-sub{margin:0 0 24px}
.lf{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.lf label{font-size:13px;font-weight:600;color:var(--text-2)}
.lf-box{position:relative}
.lf-box > svg.i{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:var(--text-3);pointer-events:none;transition:color .15s}
.lf-box .inp{height:50px;border-radius:12px;padding-right:44px;font-size:15px;background:var(--surface-2)}
.lf-box .inp:focus{background:#fff}
.lf-box:focus-within > svg.i{color:var(--primary)}
.lf-box .inp[type=password],.lf-box .inp#lg-pass{padding-left:46px}
.lf-eye{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;border-radius:10px;color:var(--text-3);cursor:pointer;display:grid;place-items:center}
.lf-eye:hover{background:var(--surface-3);color:var(--text)}

.remember{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;margin:4px 0 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.remember:hover{border-color:var(--border-strong)}
.remember input{position:absolute;opacity:0;width:1px;height:1px}
.rm-box{width:22px;height:22px;flex:none;border-radius:7px;border:2px solid var(--border-strong);background:#fff;margin-top:1px;display:grid;place-items:center;transition:.15s}
.rm-box::after{content:'';width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0;transition:opacity .12s}
.remember input:checked ~ .rm-box{background:var(--primary);border-color:var(--primary)}
.remember input:checked ~ .rm-box::after{opacity:1}
.remember input:focus-visible ~ .rm-box{box-shadow:0 0 0 3px var(--primary-100)}
.remember:has(input:checked){border-color:rgba(180,88,14,.45);background:var(--primary-50)}
.rm-tx{display:flex;flex-direction:column;line-height:1.45}
.rm-tx b{font-size:14px;font-weight:700;color:var(--text)}
.rm-tx small{font-size:12px;color:var(--text-3)}

.login-err{background:var(--danger-50);color:var(--danger);border:1px solid rgba(200,50,58,.25);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;margin:-4px 0 14px}
.login-err[hidden]{display:none}
.login-btn{width:100%;height:50px;justify-content:center;font-size:15.5px;border-radius:12px}
.login-fix{display:block;text-align:center;margin-top:16px;font-size:12px;color:var(--text-3);text-decoration:underline}
.login-fix:hover{color:var(--text-2)}
@media (max-width:860px){
  .login-form{padding:20px 16px;align-items:start;padding-top:max(28px,env(safe-area-inset-top))}
  .login-form form{padding:26px 20px 22px;border-radius:20px}
}

/* ---- لا يوجد اتصال أثناء فتح السيستم (المستخدم لسه مسجّل) ---- */
.boot-off{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1000px 500px at 80% 0%,#3b2a1c,transparent),linear-gradient(160deg,#1f1a16,#2d211a);color:#fff}
.boot-off-box{width:100%;max-width:400px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(224,138,60,.3);border-radius:24px;padding:32px 24px}
.boot-off-box img{border-radius:22px;margin-bottom:14px}
.boot-off-box h1{font-size:21px;margin:0 0 8px}
.boot-off-box p{color:#cbc2b8;margin:0 0 22px;line-height:1.8}
.boot-off-box .btn{width:100%;height:50px;justify-content:center;font-size:15px}
.boot-off-box a{display:block;margin-top:14px;color:#a89d92;font-size:12.5px;text-decoration:underline}

/* ---- زرار «تحميل التطبيق» ---- */
.pwa-x[hidden]{display:none!important}
.pwa-x-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--text-3);font-size:12.5px;font-weight:700}
.pwa-x-or::before,.pwa-x-or::after{content:'';flex:1;height:1px;background:var(--border)}
.pwa-x-btn{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 16px;border-radius:14px;border:1.5px solid rgba(180,88,14,.45);background:#fffaf4;color:#7a3c08;cursor:pointer;font-family:inherit;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s}
.pwa-x-btn:hover{background:var(--primary-50);border-color:var(--primary);box-shadow:0 10px 22px -14px rgba(180,88,14,.9);transform:translateY(-1px)}
.pwa-x-btn:disabled{opacity:.7;cursor:progress}
.pwa-x-ic{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#e08a3c,#b4580e);color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 6px 14px -8px rgba(180,88,14,.9)}
.pwa-x-ic svg.i{width:20px;height:20px;stroke-width:2.1}
.pwa-x-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3;text-align:start}
.pwa-x-tx b{font-size:15px;font-weight:700;color:#5c2d05}
.pwa-x-tx small{font-size:11.5px;color:#9a5a1c;font-weight:600}

.pwa-x-sheet{position:fixed;inset:0;z-index:100000;display:none}
.pwa-x-sheet.on{display:block}
.pwa-x-back{position:absolute;inset:0;background:rgba(20,12,9,.6);opacity:0;transition:opacity .25s}
.pwa-x-sheet.show .pwa-x-back{opacity:1}
.pwa-x-box{position:absolute;bottom:0;left:0;right:0;margin:0 auto;max-width:480px;max-height:92vh;overflow:auto;background:#fff;border-radius:24px 24px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.25);transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);color:var(--text)}
.pwa-x-sheet.show .pwa-x-box{transform:translateY(0)}
@media (min-width:768px){.pwa-x-box{bottom:50%;border-radius:24px;transform:translateY(60%) scale(.96);opacity:0;transition:transform .25s,opacity .2s}.pwa-x-sheet.show .pwa-x-box{transform:translateY(50%);opacity:1}.pwa-x-grab{display:none}}
.pwa-x-grab{width:44px;height:5px;border-radius:5px;background:var(--border);margin:0 auto 10px}
.pwa-x-head{display:flex;align-items:center;gap:12px;margin:0 -20px 14px;padding:14px 20px;background:linear-gradient(135deg,#1f1a16,#2d211a);color:#fff;border-bottom:3px solid #e08a3c}
.pwa-x-head img{border-radius:14px;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.pwa-x-head b{display:block;font-size:16.5px;font-weight:700;color:#fff}
.pwa-x-head small{display:block;font-size:12.5px;color:rgba(255,255,255,.7)}
.pwa-x-close{margin-inline-start:auto;background:rgba(255,255,255,.14);border:0;width:34px;height:34px;border-radius:10px;color:#fff;font-size:15px;cursor:pointer}
.pwa-x-steps{display:none}
.pwa-x-steps.on{display:block}
.pwa-x-primary{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,#2d211a,#1f1a16);color:#fff!important;text-decoration:none!important;box-shadow:0 14px 28px -14px rgba(31,26,22,.9);margin-bottom:12px}
.pwa-x-primary img{border-radius:11px;box-shadow:0 0 0 2px rgba(224,138,60,.6)}
.pwa-x-primary b{display:block;font-size:15.5px;font-weight:700}
.pwa-x-primary small{display:block;font-size:12px;color:#f0a35e;font-weight:600}
.pwa-x-flow{display:grid;gap:6px;margin-bottom:10px}
.pwa-x-fl{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text-2);line-height:1.6}
.pwa-x-fl .pwa-x-n{width:26px;height:26px;border-radius:8px;font-size:12px}
.pwa-x-manual{border-top:1px dashed var(--border);padding-top:10px;margin-top:4px}
.pwa-x-manual summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--text-3);margin-bottom:8px;list-style:none}
.pwa-x-manual summary::-webkit-details-marker{display:none}
.pwa-x-manual summary::before{content:'▸ ';color:var(--primary)}
.pwa-x-manual[open] summary::before{content:'▾ '}
.pwa-x-step{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:8px;font-size:14px;font-weight:600;line-height:1.7}
.pwa-x-n{width:30px;height:30px;border-radius:10px;background:#1f1a16;color:#f0a35e;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.pwa-x-chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:#e8f1ff;color:#007aff;vertical-align:middle;margin-inline-start:4px}
.pwa-x-note{background:#fffaf4;border:1px solid rgba(180,88,14,.3);color:#7a3c08;border-radius:14px;padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.8;margin-bottom:8px}
.pwa-x-copy{width:100%;height:46px;border-radius:13px;border:1.5px solid #1f1a16;background:#fff;color:#1f1a16;font-weight:700;font-family:inherit;cursor:pointer;margin-bottom:6px}
.pwa-x-ok-badge{background:var(--success-50);color:var(--success);border:1px solid rgba(15,138,95,.3);border-radius:12px;padding:10px 12px;font-weight:700;font-size:14px;text-align:center;margin-bottom:10px}
.pwa-x-ok{width:100%;height:50px;border:0;border-radius:14px;background:var(--primary);color:#fff;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;margin-top:8px}
.pwa-x-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,160%);background:#1f1a16;color:#fff;border:1px solid rgba(224,138,60,.5);padding:12px 22px;border-radius:14px;font-weight:700;font-size:14.5px;z-index:100001;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:transform .3s;white-space:nowrap}
.pwa-x-toast.on{transform:translate(-50%,0)}