/* شاشة الدخول 4.33 — نص فورم أبيض + نص تعريفي كحلي */
:root { --navy:#0f1b2e; --pri1:#1b2a47; --pri2:#2c4372; --text:#16213a; --muted:#7c879b; --border:#e3e8f0; --blue:#2563eb; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:Cairo, Tahoma, sans-serif; background:#f3f5f9; color:var(--text); }
.lg-wrap { min-height:100vh; display:flex; gap:22px; padding:18px; }
.lg-form { flex:1 1 50%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 10px; }
.lg-hero { flex:1 1 50%; max-width:720px; }

/* ---- الكارت ---- */
.lg-card { width:min(440px,100%); background:#fff; border-radius:24px; padding:30px 32px 26px; box-shadow:0 24px 60px rgba(15,27,46,.10); border:1px solid #edf0f5; }
.lg-co { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.lg-co b { display:block; font-size:14.5px; font-weight:800; }
.lg-co small { display:block; font-size:11.5px; color:var(--muted); font-weight:600; }
.lg-logo { width:46px; height:46px; border-radius:13px; background:#f3f5f9; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.lg-logo img { max-width:36px; max-height:36px; object-fit:contain; }
.lg-logo.dark { background:#fff; border:none; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.lg-card h1 { margin:0; font-size:27px; font-weight:800; }
.lg-sub { margin:4px 0 18px; color:var(--muted); font-size:13px; font-weight:600; }
.lg-lbl { display:block; font-size:12.5px; font-weight:800; margin:14px 0 7px; }

.ops { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; max-height:190px; overflow-y:auto; padding:2px; }
.op { display:flex; align-items:center; gap:8px; border:1.5px solid var(--border); background:#fff; border-radius:12px; padding:8px 10px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; color:var(--text); text-align:right; transition:border-color .15s, box-shadow .15s, background .15s; }
.op:hover { border-color:#c3cee0; background:#fafbfd; }
.op.sel { border-color:var(--pri2); background:#eef3fe; box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.op-av { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.op.sel .op-av { background:linear-gradient(135deg,var(--pri1),var(--pri2)); }
.op-n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lg-field { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:13px; background:#f7f9fc; transition:border-color .15s, box-shadow .15s; }
.lg-field:focus-within { border-color:#7aa2f0; box-shadow:0 0 0 4px rgba(37,99,235,.14); background:#fff; }
.lg-fi { padding:0 12px; font-size:15px; opacity:.6; }
.lg-field input { flex:1; border:none; outline:none; background:transparent; font:inherit; font-size:20px; letter-spacing:6px; padding:11px 0; text-align:right; min-width:0; }
.lg-eye { border:none; background:none; cursor:pointer; padding:0 12px; font-size:15px; opacity:.55; }
.lg-eye:hover { opacity:1; }
.dots { display:flex; gap:8px; justify-content:center; margin:10px 0 2px; min-height:12px; }
.dot { width:11px; height:11px; border-radius:50%; border:2px solid #cbd3e0; transition:background .1s; }
.dot.f { background:var(--pri2); border-color:var(--pri2); }

.pad { display:none; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.pad-on .pad { display:grid; }
.k { padding:12px 0; font-size:19px; font-weight:800; border:1px solid #edf0f5; border-radius:12px; background:#f6f8fb; cursor:pointer; font-family:inherit; color:var(--text); }
.k:hover { background:#eef2f8; } .k:active { transform:scale(.97); }
.k.del { background:#fef2f2; } .k.clr { font-size:13px; }

.lg-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 16px; flex-wrap:wrap; }
.lg-chk { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#4b5568; cursor:pointer; }
.lg-chk input { width:16px; height:16px; accent-color:var(--pri2); }
.lg-link { border:none; background:none; color:var(--blue); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:0; }

.lg-go { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; border:none; border-radius:13px; padding:13px; font:inherit; font-size:15px; font-weight:800; color:#fff; cursor:pointer; background:linear-gradient(135deg,var(--pri1),var(--pri2)); box-shadow:0 10px 24px rgba(27,42,71,.28); transition:filter .15s, transform .15s; }
.lg-go:hover { filter:brightness(1.12); transform:translateY(-1px); }
.lg-go.busy { opacity:.7; pointer-events:none; }
.lg-go span { font-size:17px; }
.err { color:#dc2626; font-size:13px; font-weight:700; min-height:20px; margin-top:10px; text-align:center; }
.lg-more { margin-top:8px; border-top:1px solid #eef1f6; padding-top:10px; font-size:12px; color:var(--muted); }
.lg-more summary { cursor:pointer; font-weight:700; }
.lg-more a { display:inline-block; margin-top:8px; color:var(--blue); font-weight:700; text-decoration:none; }
.lg-foot { width:min(440px,100%); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; font-size:11.5px; color:var(--muted); font-weight:600; }
.shake { animation:lgShake .4s; }
@keyframes lgShake { 0%,100% { transform:none; } 20%,60% { transform:translateX(-7px); } 40%,80% { transform:translateX(7px); } }

/* ---- الجزء التعريفي ---- */
.lg-hero {
    border-radius:28px; padding:40px 44px; color:#fff; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
    background-color:var(--navy);
    background-image:
        radial-gradient(circle at 0 0, rgba(59,130,246,.32), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(201,162,75,.18), transparent 42%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:auto, auto, 34px 34px, 34px 34px;
    box-shadow:0 30px 70px rgba(15,27,46,.3);
}
.lg-brand { display:flex; align-items:center; gap:12px; margin-bottom:34px; }
.lg-brand b { display:block; font-size:16px; font-weight:800; }
.lg-brand small { display:block; font-size:11.5px; color:#93a3bd; direction:ltr; text-align:right; }
.lg-hero h2 { margin:0 0 14px; font-size:38px; line-height:1.35; font-weight:800; }
.lg-hero h2 em { font-style:normal; background:linear-gradient(90deg,#60a5fa,#93c5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lg-hero p { margin:0 0 26px; color:#b3c0d4; font-size:14.5px; line-height:1.9; max-width:520px; }
.lg-feats { display:grid; gap:12px; max-width:540px; }
.lg-feat { display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:background .15s, transform .15s; }
.lg-feat:hover { background:rgba(255,255,255,.08); transform:translateX(-3px); }
.lg-feat > span { width:42px; height:42px; border-radius:12px; background:rgba(96,165,250,.14); border:1px solid rgba(96,165,250,.25); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.lg-feat b { display:block; font-size:14px; }
.lg-feat small { display:block; font-size:12px; color:#97a6bf; margin-top:2px; }
.lg-trust { margin-top:30px; font-size:12px; color:#93a3bd; font-weight:600; }

@media (max-width:980px) {
    .lg-wrap { flex-direction:column; padding:12px; }
    .lg-hero { order:-1; padding:24px 22px; border-radius:22px; max-width:none; }
    .lg-hero h2 { font-size:24px; }
    .lg-hero p, .lg-feats, .lg-trust { display:none; }
    .lg-brand { margin-bottom:14px; }
    .lg-form { padding:4px 0 20px; }
    .lg-card { padding:24px 20px 20px; border-radius:20px; }
}

/* 4.62 — الشاشة كلها على قد الشاشة من غير سكرول (لابتوب/ديسكتوب) */
@media (min-width:981px) {
    html, body { height:100%; }
    .lg-wrap { height:100vh; min-height:0; padding:clamp(10px,1.8vh,18px); gap:clamp(14px,1.8vw,22px); overflow:hidden; }
    .lg-form { min-height:0; padding:0 10px; overflow-y:auto; scrollbar-width:thin; justify-content:safe center; }
    .lg-card { padding:clamp(14px,2.6vh,30px) 30px clamp(12px,2.2vh,26px); }
    .lg-co { margin-bottom:clamp(8px,2vh,22px); }
    .lg-logo { width:clamp(36px,5vh,46px); height:clamp(36px,5vh,46px); }
    .lg-card h1 { font-size:clamp(21px,3.2vh,27px); line-height:1.3; }
    .lg-sub { margin:2px 0 clamp(6px,1.6vh,18px); }
    .lg-lbl { margin:clamp(6px,1.3vh,14px) 0 clamp(4px,.7vh,7px); }
    .ops { max-height:clamp(46px,14vh,190px); }
    .op { padding:clamp(5px,.9vh,8px) 10px; }
    .lg-field input { padding:clamp(6px,1.1vh,11px) 0; font-size:clamp(17px,2.4vh,20px); }
    .dots { margin:clamp(5px,1vh,10px) 0 0; }
    .pad { gap:clamp(5px,.8vh,8px); margin-top:clamp(5px,1vh,10px); }
    .k { padding:clamp(4px,1vh,12px) 0; font-size:clamp(16px,2.2vh,19px); }
    .lg-row { margin:clamp(7px,1.4vh,14px) 0 clamp(8px,1.6vh,16px); }
    .lg-go { padding:clamp(9px,1.5vh,13px); }
    .err { min-height:0; margin-top:clamp(4px,1vh,10px); }
    .err:empty { display:none; }
    .lg-more { margin-top:clamp(4px,1vh,8px); padding-top:clamp(5px,1vh,10px); }
    .lg-foot { margin-top:clamp(6px,1.4vh,14px); }
    .lg-hero { max-height:100%; padding:clamp(18px,4vh,40px) clamp(28px,3vw,44px); }
    .lg-brand { margin-bottom:clamp(12px,3.4vh,34px); }
    .lg-hero h2 { font-size:clamp(26px,4.4vh,38px); margin-bottom:clamp(8px,1.4vh,14px); }
    .lg-hero p { margin-bottom:clamp(12px,2.6vh,26px); line-height:1.8; }
    .lg-feats { gap:clamp(6px,1.2vh,12px); }
    .lg-feat { padding:clamp(7px,1.3vh,13px) 16px; }
    .lg-feat > span { width:clamp(32px,4.6vh,42px); height:clamp(32px,4.6vh,42px); }
    .lg-trust { margin-top:clamp(10px,3vh,30px); }
}
@media (min-width:981px) and (max-height:720px) {
    .lg-feat small { display:none; }
    .lg-hero p { font-size:13.5px; }
    .lg-sub { font-size:12px; }
}
@media (min-width:981px) and (max-height:620px) {
    .lg-hero p, .lg-trust, .lg-sub { display:none; }
    .lg-foot { display:none; }
}
/* لوحة الأرقام مفتوحة على شاشة قصيرة: نشيل السطور الثانوية */
@media (min-width:981px) and (max-height:820px) {
    .pad-on .lg-sub, .pad-on .lg-foot { display:none; }
    .pad-on .lg-card h1 { margin-bottom:2px; }
    .pad-on .k { padding:clamp(3px,.8vh,10px) 0; }
    .pad-on .lg-co { margin-bottom:clamp(6px,1.4vh,16px); }
    .pad-on .lg-lbl { margin-top:clamp(4px,1vh,12px); }
    .pad-on .lg-row { margin:clamp(5px,1vh,12px) 0; }
    .pad-on .dots { margin-top:4px; min-height:11px; }
}
/* موبايل: الجزء التعريفي أصغر علشان الفورم يبان أكتر */
@media (max-width:980px) {
    .lg-hero { padding:16px 18px; }
    .lg-hero h2 { font-size:20px; margin:0; }
    .lg-brand { margin-bottom:8px; }
}