/* =====================================================================
   شاشة دخول العواضي — التصميم 1 «صالة المصنع»
   التطبيق 100 · الصفحة 9999 (LOGIN_DESKTOP) · APEX 19.1
   يُحمَّل من: #APP_IMAGES#alw-login.css — يغيّر الشكل فقط.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@300;500;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap");

/* ---------- الأساس ---------- */
html body.alwx{
  --card-w:440px; --card-gap:40px; --zone:calc(var(--card-w) + var(--card-gap) * 2);
  margin:0; background:#061a30!important; color:#eef5fb; overflow:hidden!important;
  font-family:"IBM Plex Sans Arabic",Tajawal,"Segoe UI",Tahoma,sans-serif!important;
}
html body.alwx .t-Body, html body.alwx .t-Body-wrap, html body.alwx .t-Body-col, html body.alwx .t-Body-main{background:transparent!important}
html body.alwx .apx-login-head{display:none!important}
html body.alwx *, html body.alwx *::before, html body.alwx *::after{box-sizing:border-box}

/* ---------- طبقة المشهد ---------- */
.alwx .alwx-bg{position:fixed;inset:0;z-index:1;overflow:hidden;direction:ltr}
.alwx .alwx-heroWrap{position:absolute;top:0;bottom:0;left:0;right:var(--zone);display:flex;z-index:3}
html[dir=ltr] body.alwx .alwx-heroWrap{left:var(--zone);right:0}
.alwx .alwx-heroWrap .hero{min-height:0!important;height:100%;width:100%;flex:1 1 auto!important}
.alwx .alwx-heroWrap .peds{transform-origin:bottom center}
.alwx .alwx-lite{display:none}
.alwx-introLayer{position:fixed;inset:0;z-index:100;pointer-events:none}
.alwx-introLayer .intro{position:absolute;inset:0}

/* ---------- عمود البطاقة ---------- */
html body.alwx .t-Login-container{
  position:fixed!important; top:0!important; bottom:0!important; right:var(--card-gap)!important; left:auto!important;
  width:var(--card-w)!important; max-width:calc(100vw - 32px)!important; margin:0!important;
  background:transparent!important; border:0!important; box-shadow:none!important; padding:24px 0!important; border-radius:0!important;
  display:flex!important; flex-direction:column!important; justify-content:center!important; overflow-y:auto!important; z-index:20!important;
  scrollbar-width:thin;
}
html[dir=ltr] body.alwx .t-Login-container{right:auto!important;left:var(--card-gap)!important}
html body.alwx .alwx-langbar{display:flex;align-items:center;gap:8px;color:#cfe2f2;font-size:14px;margin:0 0 14px;flex:0 0 auto}
html body.alwx .alwx-langsel{background:transparent;color:#eef5fb;border:0;font:500 14px/1 inherit;cursor:pointer;color-scheme:dark;min-height:32px}
html body.alwx .alwx-langsel option{background:#0A3256}

html body.alwx .t-Login-container > .container{
  position:relative; flex:0 0 auto; width:100%!important; max-width:none!important; margin:0!important;
  border-radius:26px; padding:28px 30px 22px!important;
  background:linear-gradient(160deg,rgba(77,182,233,.20),rgba(10,50,86,.72) 50%,rgba(6,26,48,.85));
  border:1px solid rgba(77,182,233,.38);
  box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14),0 0 40px rgba(42,159,216,.12);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); overflow:hidden;
}
html body.alwx .t-Login-container .row{margin:0!important}
html body.alwx .t-Login-container .col{padding:0!important;width:100%!important}
html body.alwx .alwx-cardtop{display:flex;justify-content:center;margin:6px 0 20px}
html body.alwx .alwx-topline{position:absolute;top:0;left:0;right:0;height:4px;background:#4DB6E9}
html body.alwx .alwx-logo{width:230px;max-width:70%;height:auto;display:block}

/* الحقول: عنوان + حقل في سطر واحد كما في التصميم */
html body.alwx .t-Login-region{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;width:auto!important;margin:0!important}
html body.alwx .t-Login-header{display:none!important}
html body.alwx .t-Login-body{display:grid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:11px!important;padding:0!important}
html body.alwx .t-Login-region .t-Form-fieldContainer{display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;column-gap:12px!important;align-items:center!important;padding:0!important;margin:0!important}
html body.alwx .t-Login-region .t-Form-labelContainer{width:auto!important;flex:none!important;padding:0!important;text-align:start!important;min-height:0!important}
html body.alwx .t-Login-region .t-Form-label{color:#c3d6e8!important;font:500 13.5px/1.4 "IBM Plex Sans Arabic",sans-serif!important;padding:0!important;margin:0!important}
html body.alwx .t-Login-region .t-Form-label .u-VisuallyHidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
html body.alwx .t-Login-region .t-Form-label::after{content:""}
html body.alwx #P9999_USERNAME_LABEL::after, html body.alwx #P9999_PASSWORD_LABEL::after{content:" *";color:#ff7b7b}
html body.alwx .t-Login-region .t-Form-inputContainer{width:auto!important;padding:0!important}
html body.alwx .t-Login-region .t-Form-itemWrapper{position:relative!important;display:block!important}
/* Theme 42 يعيد ترتيب العنوان والحقل (order) — نثبّت كل واحد في عموده */
html body.alwx .t-Login-region .t-Form-fieldContainer > .t-Form-labelContainer{grid-column:1!important;grid-row:1!important;order:0!important;width:auto!important;max-width:none!important;flex:none!important;float:none!important;align-self:center!important}
html body.alwx .t-Login-region .t-Form-fieldContainer > .t-Form-inputContainer{grid-column:2!important;grid-row:1!important;order:0!important;width:auto!important;max-width:none!important;flex:none!important;float:none!important;min-width:0!important}
html body.alwx .t-Login-region .t-Form-fieldContainer > .t-Form-inputContainer .t-Form-itemWrapper{width:100%!important}
html body.alwx .t-Login-region .apex-item-select, html body.alwx .t-Login-region .apex-item-text, html body.alwx .t-Login-region .password{display:block!important;max-width:none!important}
html body.alwx .t-Login-region .apex-item-text,
html body.alwx .t-Login-region .apex-item-select,
html body.alwx .t-Login-region .password{
  height:44px!important;min-height:44px!important;max-height:none!important;width:100%!important;
  border-radius:10px!important;border:1px solid rgba(77,182,233,.28)!important;background-color:rgba(4,18,36,.62)!important;
  color:#eef5fb!important;font:500 14.5px/1 "IBM Plex Sans Arabic",sans-serif!important;
  text-align:center!important;text-align-last:center!important;box-shadow:none!important;
  padding-block:0!important;padding-inline:40px 14px!important;
  -webkit-appearance:none!important;appearance:none!important;transition:border-color .2s,box-shadow .2s!important;
  background-repeat:no-repeat!important;background-size:18px 18px!important;
}
html body.alwx .t-Login-region .apex-item-select{
  padding-inline:14px 40px!important;cursor:pointer;color-scheme:dark;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa9c4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-position:left 12px center!important;
}
html[dir=ltr] body.alwx .t-Login-region .apex-item-select{background-position:right 12px center!important}
html body.alwx .t-Login-region .apex-item-select option{background:#0A3256;color:#eef5fb}
html body.alwx #P9999_USERNAME, html body.alwx #P9999_PASSWORD{background-color:rgba(4,18,36,.62)!important;background-repeat:no-repeat!important;background-size:18px 18px!important;background-position:right 12px center!important}
html[dir=ltr] body.alwx #P9999_USERNAME, html[dir=ltr] body.alwx #P9999_PASSWORD{background-position:left 12px center!important}
html body.alwx #P9999_PASSWORD{padding-inline:40px 46px!important}
html body.alwx #P9999_USERNAME{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa9c4' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E")!important}
html body.alwx #P9999_PASSWORD{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa9c4' stroke-width='1.8'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")!important}
html body.alwx .t-Login-region .apex-item-text::placeholder{color:#7f98b3}
html body.alwx .t-Login-region .apex-item-text:focus,
html body.alwx .t-Login-region .apex-item-select:focus,
html body.alwx .t-Login-region .password:focus{border-color:#4DB6E9!important;box-shadow:0 0 0 3px rgba(77,182,233,.28)!important;outline:none!important}
html body.alwx .t-Login-region .a-Form-error{grid-column:2;color:#ff9b9b!important;font-size:12px!important}
html body.alwx .t-Login-region .apex-item-icon, html body.alwx .t-Login-region .t-Form-itemIcon{display:none!important}
html body.alwx .alwx-eye{position:absolute;top:2px;left:2px;width:44px;height:40px;border:0;background:transparent;color:#a9c2da;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px}
html[dir=ltr] body.alwx .alwx-eye{left:auto;right:2px}
html body.alwx .alwx-eye:focus-visible, html body.alwx .alwx-replay:focus-visible, html body.alwx .alwx-langsel:focus-visible,
html body.alwx .t-Login-buttons .t-Button:focus-visible, html body.alwx .arrow:focus-visible{outline:2px solid #4DB6E9;outline-offset:3px}

/* الأزرار */
html body.alwx .t-Login-region .t-Login-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;margin:18px 0 0!important;padding:0!important}
html body.alwx .t-Login-region .t-Login-buttons .t-Button{
  height:50px!important;min-height:50px!important;line-height:normal!important;margin:0!important;width:auto!important;
  border-radius:13px!important;font:700 16px/1 Alexandria,sans-serif!important;padding:0 10px!important;transform:none!important;
  position:relative;overflow:hidden;
}
html body.alwx .t-Login-region .t-Login-buttons .t-Button .t-Button-label{font:inherit!important}
html body.alwx .t-Login-region .t-Login-buttons .t-Button--hot{background:linear-gradient(180deg,#7fcdf3,#2A9FD8)!important;color:#062440!important;border:0!important;box-shadow:0 0 26px rgba(77,182,233,.5),inset 0 1px 0 rgba(255,255,255,.5)!important}
html body.alwx .t-Login-region .t-Login-buttons .t-Button--hot::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(220%) skewX(-18deg);transition:transform .7s}
html body.alwx .t-Login-region .t-Login-buttons .t-Button--hot:hover::after{transform:translateX(-280%) skewX(-18deg)}
html body.alwx .t-Login-region .t-Login-buttons .t-Button--hot:hover{filter:brightness(1.06)}
html body.alwx .t-Login-region .t-Login-buttons .t-Button:not(.t-Button--hot){background:rgba(6,26,48,.5)!important;border:1px solid rgba(77,182,233,.45)!important;color:#e2eef8!important;box-shadow:none!important;font-weight:500!important}
html body.alwx .t-Login-region .t-Login-buttons .t-Button:not(.t-Button--hot):hover{background:rgba(77,182,233,.12)!important}

html body.alwx .alwx-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:#8aa3bd}
html body.alwx .alwx-replay{border:0;background:transparent;color:#a3bcd4;font:inherit;font-size:12px;cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px}

/* رسائل APEX */
html body.alwx #APEX_ERROR_MESSAGE, html body.alwx #APEX_SUCCESS_MESSAGE, html body.alwx .t-Body-alert{position:fixed!important;top:16px;right:var(--card-gap);width:var(--card-w);max-width:calc(100vw - 32px);z-index:60!important}
html[dir=ltr] body.alwx #APEX_ERROR_MESSAGE, html[dir=ltr] body.alwx #APEX_SUCCESS_MESSAGE, html[dir=ltr] body.alwx .t-Body-alert{right:auto;left:var(--card-gap)}


/* ---------- أنماط التصميم 1 (منقولة كما هي، محصورة تحت .alwx) ---------- */
.alwx a{color:#4DB6E9}
@keyframes x1ignite{0%{transform:scaleX(0);opacity:0}30%{opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes x1shard{0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes x1rise{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes x1introOut{0%,80%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes x1sceneIn{0%{opacity:0;transform:scale(1.04);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes x1paneIn{0%{opacity:0;transform:translateX(-50px) perspective(900px) rotateY(-16deg)}100%{opacity:1;transform:none}}
.alwx .intro{position:absolute;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 50%,#0A3256 0%,#04142a 70%);display:flex;align-items:center;justify-content:center;animation:x1introOut 3.2s ease forwards;pointer-events:none}
.alwx .intro-line{position:absolute;top:50%;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,#2A9FD8,#d6f1ff,#2A9FD8,transparent);box-shadow:0 0 24px 4px rgba(77,182,233,.6);animation:x1ignite .9s cubic-bezier(.7,0,.2,1) forwards}
.alwx .piece{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:x1shard .95s cubic-bezier(.2,.8,.2,1) forwards}
.alwx .wm{opacity:0;animation:x1rise .8s ease 1.7s forwards}
.alwx .scene{animation:x1sceneIn 1.1s ease 2.5s both}
.alwx .login{animation:x1paneIn .9s cubic-bezier(.2,.8,.2,1) 2.8s both}
.alwx.alwx-nointro .scene{animation-delay:0s}
.alwx.alwx-nointro .login{animation-delay:.15s}
@keyframes x1pulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes x1flicker{0%,100%{filter:brightness(1)}20%{filter:brightness(1.18)}40%{filter:brightness(.92)}60%{filter:brightness(1.12)}80%{filter:brightness(.97)}}
@keyframes x1haze{0%{transform:translateY(0) scaleX(1);opacity:0}30%{opacity:.5}100%{transform:translateY(-120px) scaleX(1.4);opacity:0}}
@keyframes x1ember{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}100%{transform:translateY(-200px) translateX(var(--sx)) scale(.2);opacity:0}}
@keyframes x1j1{0%,100%{transform:rotate(-24deg)}45%,55%{transform:rotate(18deg)}}
@keyframes x1j2{0%,100%{transform:rotate(118deg)}45%,55%{transform:rotate(78deg)}}
@keyframes x1j3{0%,100%{transform:rotate(-94deg)}45%,55%{transform:rotate(-60deg)}}
@keyframes x1j1b{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-20deg)}}
@keyframes x1j2b{0%,100%{transform:rotate(-112deg)}50%{transform:rotate(-80deg)}}
@keyframes x1trolley{0%,8%{left:6%}46%,58%{left:64%}96%,100%{left:6%}}
@keyframes x1hoist{0%,8%,46%,58%,96%,100%{height:62px}24%,78%{height:34px}}
@keyframes x1travel{
0%{left:-14%;opacity:0;background:rgba(190,230,250,.30);box-shadow:0 0 0 1px rgba(220,240,255,.55)}
4%{opacity:1}
44%{left:47%;opacity:1;background:rgba(190,230,250,.30);box-shadow:0 0 0 1px rgba(220,240,255,.55)}
49%{left:53%;opacity:0}
63%{left:66%;opacity:0;background:rgba(255,150,50,.9);box-shadow:0 0 18px 4px rgba(255,120,30,.8)}
67%{left:70%;opacity:1;background:rgba(255,160,60,.85);box-shadow:0 0 18px 4px rgba(255,120,30,.8)}
88%{background:rgba(255,190,140,.45);box-shadow:0 0 8px 2px rgba(255,140,60,.35)}
100%{left:104%;opacity:1;background:rgba(190,230,250,.30);box-shadow:0 0 0 1px rgba(220,240,255,.55)}}
@keyframes x1roll{to{transform:rotate(360deg)}}
@keyframes x1rush{0%{background-position:0 0}100%{background-position:0 120px}}
@keyframes x1streak{0%{transform:translateX(-30%) scaleX(.4);opacity:0}20%{opacity:1}100%{transform:translateX(130%) scaleX(1);opacity:0}}
@keyframes x1shine{0%,62%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes x1bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes x1edge{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes x1sweep{0%,72%{transform:translateX(180%) skewX(-18deg)}100%{transform:translateX(-280%) skewX(-18deg)}}
@keyframes x1beacon{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes x1bigFall{0%,58%{transform:translate(0,0) rotate(0);opacity:1}90%{transform:translate(var(--fx,-16px),110px) rotate(var(--fr,-30deg));opacity:0}100%{transform:none;opacity:0}}
@keyframes x1tCrack{0%,42%{border-color:rgba(255,255,255,0);background:rgba(190,232,255,0)}44%,100%{border-color:rgba(255,255,255,.7);background:rgba(190,232,255,.26)}}
@keyframes x1tFall{0%,52%{transform:none;opacity:1}78%{transform:translate(var(--tx),150px) rotate(var(--tr));opacity:0}100%{transform:none;opacity:0}}
@keyframes x1tWhole{0%,43%{opacity:1}44%,90%{opacity:0}100%{opacity:1}}
.alwx .whole{animation:x1tWhole 7s linear infinite}
@keyframes x1tImpact{0%,40%{opacity:0;transform:scale(.2)}44%{opacity:1;transform:scale(1)}52%,100%{opacity:0;transform:scale(1.6)}}
.alwx .bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(160,220,255,.9),rgba(77,182,233,.25) 45%,transparent 70%);animation:x1pulse ease-in-out infinite}
.alwx .bokeh.warm{background:radial-gradient(circle,rgba(255,205,130,.9),rgba(255,170,60,.22) 45%,transparent 70%)}
.alwx .lamp{position:absolute;top:0;height:6px;border-radius:3px;background:#f3fbff;box-shadow:0 0 18px 6px rgba(200,235,255,.5),0 0 60px 18px rgba(77,182,233,.18);animation:x1pulse 5s ease-in-out infinite}
.alwx .mouth{animation:x1flicker 2.6s steps(10) infinite}
.alwx .haze{position:absolute;bottom:0;width:30%;height:60%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,200,120,.35),transparent 70%);animation:x1haze 3.4s ease-out infinite}
.alwx .ember{position:absolute;border-radius:50%;background:#ffc06a;box-shadow:0 0 8px 2px rgba(255,140,40,.8);animation:x1ember ease-out infinite}
.alwx .arm1 .l1{animation:x1j1 6s ease-in-out infinite}
.alwx .arm1 .l2{animation:x1j2 6s ease-in-out infinite}
.alwx .arm1 .l3{animation:x1j3 6s ease-in-out infinite}
.alwx .arm2 .l1{animation:x1j1b 7.5s ease-in-out infinite}
.alwx .arm2 .l2{animation:x1j2b 7.5s ease-in-out infinite}
.alwx .trolley{animation:x1trolley 14s ease-in-out infinite}
.alwx .cable{animation:x1hoist 14s ease-in-out infinite}
.alwx .sheet{position:absolute;bottom:14px;width:9%;height:10px;transform:skewX(-48deg);border-radius:1px;animation:x1travel 12s linear infinite}
.alwx .roller{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#6c7c93 30%,#2c3d58 32%);position:relative;animation:x1roll 1.6s linear infinite}
.alwx .roller::after{content:"";position:absolute;top:1px;left:5px;width:2px;height:4px;background:#C9CDD2}
.alwx .floor{animation:x1rush 2.2s linear infinite}
.alwx .streak{position:absolute;height:2px;width:22%;border-radius:2px;background:linear-gradient(90deg,transparent,#2A9FD8,#e6f6ff,transparent);box-shadow:0 0 10px 1px rgba(77,182,233,.6);animation:x1streak ease-in infinite}
.alwx .ped{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.alwx .pane3d{animation:x1bob 5s ease-in-out infinite}
.alwx .pshine{position:absolute;top:-10%;bottom:-10%;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:x1shine 5.5s ease-in-out infinite}
.alwx .pedge{animation:x1edge 3s ease-in-out infinite}
.alwx .sweep{position:absolute;top:-20%;bottom:-20%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);animation:x1sweep 7s ease-in-out 3.8s infinite;pointer-events:none}
.alwx .beacon{animation:x1beacon 1.4s ease-in-out infinite}
.alwx .bigshard{transform-box:fill-box;transform-origin:center;animation:x1bigFall 5.5s cubic-bezier(.5,0,.8,.6) infinite}
.alwx .tile{border:1px solid rgba(255,255,255,0);animation:x1tCrack 7s linear infinite,x1tFall 7s cubic-bezier(.5,0,.85,.55) infinite}
.alwx .impact{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(160,220,255,.6) 40%,transparent 70%);animation:x1tImpact 7s ease-out infinite;pointer-events:none}
.alwx .arrow:hover{background:rgba(77,182,233,.25)}

/* =====================================================================
   التجاوب — كل المقاسات
   ===================================================================== */
/* شاشات عريضة جداً: نكبّر المنصات قليلاً */

/* لابتوب متوسط */
@media (max-width: 1280px){
  html body.alwx{--card-w:410px;--card-gap:28px}
  .alwx .alwx-heroWrap .peds{transform:scale(.84)}
  .alwx .alwx-heroWrap .hero{padding:32px 28px 0 32px!important}
}
@media (max-width: 1100px){
  html body.alwx{--card-w:390px;--card-gap:22px}
  .alwx .alwx-heroWrap .peds{transform:scale(.66)!important}
  .alwx .alwx-heroWrap .feats{display:none!important}
}

/* لابتوب بشاشة قصيرة (768 / 720 وأقل) */
@media (max-height: 820px) and (min-width: 821px){
  .alwx .alwx-heroWrap .herohead img{width:170px!important;margin-bottom:16px!important}
  .alwx .alwx-heroWrap .herohead h2{font-size:clamp(26px,2.8vw,40px)!important}
  .alwx .alwx-heroWrap .peds{transform:scale(.74)}
  html body.alwx .t-Login-container > .container{padding:20px 26px 16px!important}
  html body.alwx .alwx-cardtop{margin:4px 0 14px}
  html body.alwx .alwx-logo{width:190px}
  html body.alwx .t-Login-body{row-gap:8px!important}
  html body.alwx .t-Login-region .apex-item-text, html body.alwx .t-Login-region .apex-item-select, html body.alwx .t-Login-region .password{height:40px!important;min-height:40px!important}
  html body.alwx .t-Login-region .t-Login-buttons .t-Button{height:44px!important;min-height:44px!important}
}
@media (max-height: 680px) and (min-width: 821px){
  .alwx .alwx-heroWrap .peds{transform:scale(.58)!important}
  .alwx .alwx-heroWrap .feats{display:none!important}
  html body.alwx .alwx-langbar{margin-bottom:8px}
}
@media (max-height: 560px) and (min-width: 821px){
  .alwx .alwx-heroWrap .peds{display:none!important}
}

/* تابلت ولابتوب صغير: البطاقة في الوسط والمشهد خلفها */
@media (max-width: 820px){
  html body.alwx{--card-w:440px;overflow-y:auto!important}
  .alwx .alwx-heroWrap{display:none}
  .alwx .mach{opacity:.5}
  .alwx .mach > div:last-child{display:none}
  html body.alwx .t-Login-container, html[dir=ltr] body.alwx .t-Login-container{
    position:relative!important; top:auto!important; bottom:auto!important; left:auto!important; right:auto!important;
    width:min(var(--card-w), calc(100vw - 32px))!important; min-height:100vh; min-height:100dvh; margin:0 auto!important; padding:28px 0!important;
  }
  html body.alwx .alwx-langbar{justify-content:center}
  html body.alwx #APEX_ERROR_MESSAGE, html body.alwx #APEX_SUCCESS_MESSAGE, html body.alwx .t-Body-alert,
  html[dir=ltr] body.alwx #APEX_ERROR_MESSAGE, html[dir=ltr] body.alwx #APEX_SUCCESS_MESSAGE, html[dir=ltr] body.alwx .t-Body-alert{left:16px;right:16px;width:auto}
}

/* الهاتف: مشهد خفيف (توهّج الفرن والشعار) بدل الصالة الكاملة */
@media (max-width: 600px){
  .alwx .mach{display:none}
  .alwx .alwx-lite{display:block;position:absolute;inset:0;background:radial-gradient(ellipse 90% 40% at 50% 105%,rgba(255,130,40,.30),transparent 70%),radial-gradient(ellipse 80% 50% at 50% 0%,rgba(42,159,216,.35),transparent 70%),linear-gradient(180deg,#0A3256,#061a30)}
  .alwx .alwx-lite-glow{position:absolute;left:10%;right:10%;bottom:0;height:3px;background:linear-gradient(90deg,transparent,#ff8a2a,#ffd28a,#ff8a2a,transparent);box-shadow:0 0 30px 8px rgba(255,120,30,.45)}
  .alwx .alwx-lite img{position:absolute;left:50%;bottom:8%;width:70%;max-width:320px;transform:translateX(-50%);opacity:.06}
  html body.alwx .t-Login-container > .container{padding:22px 18px 16px!important;border-radius:20px}
  html body.alwx .alwx-logo{width:190px}
}
/* هاتف ضيق: العنوان فوق الحقل */
@media (max-width: 420px){
  html body.alwx .t-Login-region .t-Form-fieldContainer{grid-template-columns:minmax(0,1fr)!important;row-gap:4px!important}
  html body.alwx .t-Login-region .t-Form-fieldContainer > .t-Form-labelContainer{grid-column:1!important;grid-row:1!important}
  html body.alwx .t-Login-region .t-Form-fieldContainer > .t-Form-inputContainer{grid-column:1!important;grid-row:2!important}
  html body.alwx .t-Login-region .a-Form-error{grid-column:1}
  html body.alwx .t-Login-region .t-Login-buttons{gap:10px!important}
  .alwx-introLayer .intro > div{transform:scale(.62)}
}
@media (max-width: 600px) and (min-width: 421px){ .alwx-introLayer .intro > div{transform:scale(.8)} }

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .alwx-introLayer{display:none!important}
  .alwx .alwx-bg *, .alwx .alwx-bg, html body.alwx .t-Login-container .container{animation:none!important;transition:none!important}
  .alwx .sheet{display:none}
}