/* الصفحة الرئيسية: خلية النحل المعتمدة من design/launcher.html */
body.dark{background:var(--navy);color:var(--d-ink);overflow-x:hidden}
body.dark::before{content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 600px at 78% -10%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(800px 600px at 10% 30%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(700px 500px at 60% 110%, rgba(236,72,153,.16), transparent 60%),
    var(--navy)}
body.dark::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%)}
body.dark .top{background:rgba(5,10,24,.55)}

.lp{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:28px;max-width:1560px;margin-inline:auto}
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hello h1{margin:0;font-size:30px;font-weight:800;line-height:1.3}
.hello h1 em{font-style:normal;background:linear-gradient(90deg,#60A5FA,#C084FC,#F472B6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hello p{margin:4px 0 0;color:var(--d-muted)}
.hello p b{color:#fff}
.strip{display:flex;border:1px solid var(--d-line);background:rgba(255,255,255,.035);border-radius:12px;overflow:hidden;backdrop-filter:blur(10px)}
.strip div{padding:10px 20px;border-inline-start:1px solid var(--d-line);text-align:center}
.strip div:first-child{border-inline-start:0}
.strip b{display:block;font-size:22px;font-weight:800;line-height:1.25}
.strip small{color:var(--d-muted);font-size:11px}

.stage{position:relative;display:grid;place-items:center;padding:30px 0 10px;--mx:50%;--my:50%}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(380px circle at var(--mx) var(--my), rgba(96,165,250,.10), transparent 70%)}
.hive{position:relative;width:870px;height:545px}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wires line{stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 9;animation:flow 1.4s linear infinite;opacity:.75}
.wires line.off{stroke:#334155;animation:none;stroke-dasharray:2 6;opacity:.6}
@keyframes flow{to{stroke-dashoffset:-24}}

/* استثناء مقصود: موضع الخلية إحداثي هندسي داخل مساحة ثابتة 870x545 تطابق خطوط الربط في SVG، فهو left وليس اتجاه نص */
.tile{position:absolute;left:var(--x);top:var(--y);width:190px;height:165px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;color:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s;
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
.tile svg.hex{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tile svg.hex polygon{fill:rgba(13,20,40,.82);stroke:var(--d-line-2);stroke-width:1.2;transition:stroke .3s,fill .3s}
.tile>*:not(svg){position:relative}
.tile:hover{transform:translateY(-8px) scale(1.04);filter:drop-shadow(0 14px 30px color-mix(in srgb,var(--c) 45%,transparent))}
.tile:hover svg.hex polygon{stroke:var(--c);fill:color-mix(in srgb,var(--c) 14%,rgba(13,20,40,.92))}
.tile .ico{width:56px;height:56px;font-size:27px;margin-bottom:8px;transition:transform .35s}
.tile:hover .ico{transform:rotate(-8deg) scale(1.08)}
.tile b{font-weight:800;font-size:14.5px;line-height:1.25;color:#fff}
.tile small{color:var(--d-muted);font-size:11.5px;margin-top:3px;max-width:140px;line-height:1.35}
.tile .phase{margin-top:5px;font-size:10px;font-weight:700;color:#93C5FD;border:1px solid rgba(147,197,253,.3);border-radius:6px;padding:0 6px}
.badge{position:absolute!important;top:20px;inset-inline-start:44px;min-width:24px;height:24px;border-radius:12px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;padding-inline:7px;box-shadow:0 0 0 3px #0B1226,0 0 16px rgba(244,63,94,.85);
  animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--d,0s) + .45s)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.tile.locked{cursor:not-allowed}
.tile.locked .ico{background:#1E293B;color:#475569}
.tile.locked b,.tile.locked small{color:#475569}
.tile.locked:hover{transform:none;filter:none}
.tile.locked:hover svg.hex polygon{stroke:var(--d-line-2);fill:rgba(13,20,40,.82)}
.lock{position:absolute!important;top:24px;inset-inline-start:50px;color:#64748B;font-size:16px}
.core{cursor:default}
.core:hover{transform:none;filter:none}
.core .ring{position:absolute;inset:-14px;pointer-events:none}
.core .ring polygon{fill:none;stroke:#60A5FA;stroke-width:1.5}
.core .ring.r1{animation:pulse 2.8s ease-out infinite}
.core .ring.r2{animation:pulse 2.8s ease-out infinite 1.4s}
@keyframes pulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.28);opacity:0}}
.core .brand{position:relative;width:136px;height:auto;margin-bottom:6px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.core .logo{font-size:26px;font-weight:800;letter-spacing:1px;line-height:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.core .logo span{opacity:.7}
.core small{color:#DBEAFE;margin-top:8px;font-weight:600}
.legend{display:flex;gap:22px;justify-content:center;color:var(--d-muted);font-size:12px;margin-top:6px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:7px}
.legend .ln{width:26px;height:0;border-top:2px dashed #60A5FA}

.lside{display:flex;flex-direction:column;gap:18px}
.gpanel{background:rgba(255,255,255,.035);border:1px solid var(--d-line);border-radius:12px;backdrop-filter:blur(12px);overflow:hidden}
.gpanel h3{margin:0;padding:14px 18px;font-size:14px;font-weight:800;border-bottom:1px solid var(--d-line);display:flex;align-items:center;justify-content:space-between;color:#fff}
.gpanel h3 a{font-size:12px;font-weight:600;color:#60A5FA}
.item{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--d-line);color:inherit;transition:background .2s}
.item:last-child{border-bottom:0}
a.item:hover{background:rgba(255,255,255,.04)}
.item .mi{width:34px;height:34px;font-size:17px;flex:none}
.item .tx{flex:1;min-width:0}
.item .tx b{display:block;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.item .tx small{color:var(--d-muted);font-size:11.5px}
.dpill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;align-self:center;white-space:nowrap;border:1px solid}
.dpill.red{background:rgba(244,63,94,.14);color:#FDA4AF;border-color:rgba(244,63,94,.35)}
.dpill.orange{background:rgba(245,158,11,.14);color:#FCD34D;border-color:rgba(245,158,11,.35)}
.dpill.blue{background:rgba(59,130,246,.14);color:#93C5FD;border-color:rgba(59,130,246,.35)}
.when{color:#64748B;font-size:11px;white-space:nowrap;align-self:center}
.gempty{padding:26px 18px;text-align:center;color:var(--d-muted);font-size:13px}
.gempty i{display:block;font-size:30px;margin-bottom:6px;color:#475569}
.foot{text-align:center;color:#475569;font-size:11px;padding:6px 0 22px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:1320px){.lp{grid-template-columns:1fr}}
@media (max-width:920px){
  .hello{flex-direction:column;align-items:stretch}
  .hive{width:100%;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wires,.core{display:none}
  .tile{position:relative;left:auto;top:auto;width:auto;height:auto;padding:20px 8px;background:rgba(255,255,255,.035);border:1px solid var(--d-line);border-radius:12px}
  .tile svg.hex{display:none}
  .badge,.lock{top:12px;inset-inline-start:12px}
}

/* صفحة الدخول */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr)}
.auth-art{position:relative;display:flex;flex-direction:column;justify-content:center;padding:60px;overflow:hidden}
.auth-art h1{font-size:40px;font-weight:800;line-height:1.35;margin:0 0 12px;color:#fff}
.auth-art h1 em{font-style:normal;background:linear-gradient(90deg,#60A5FA,#C084FC,#F472B6);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-art p{color:var(--d-muted);font-size:15px;max-width:520px;margin:0 0 30px}
.mini-hive{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.mini-hive span{width:46px;height:46px;font-size:22px;animation:rise .6s both;animation-delay:var(--d)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(5,10,24,.5);border-inline-start:1px solid var(--d-line);backdrop-filter:blur(10px)}
.auth-card{width:100%;max-width:380px}
.auth-card h2{margin:18px 0 4px;font-size:24px;font-weight:800;color:#fff}
.auth-card p{margin:0 0 24px;color:var(--d-muted)}
.dfield{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.dfield label{font-size:12.5px;font-weight:700;color:#CBD5E1}
.dinput{height:46px;border-radius:10px;border:1px solid var(--d-line-2);background:rgba(255,255,255,.05);color:#fff;padding-inline:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.dinput:focus{border-color:#60A5FA;box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.dbtn{height:46px;width:100%;border:0;border-radius:10px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-weight:800;font-size:15px;cursor:pointer;
  box-shadow:0 10px 30px rgba(79,70,229,.45);transition:transform .15s,box-shadow .15s}
.dbtn:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(79,70,229,.55)}
.derr{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.35);color:#FDA4AF;margin-bottom:16px;font-weight:600}
.drow{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#CBD5E1}
.drow .check{font-weight:600}
.lang-sw{background:none;border:1px solid var(--d-line-2);color:#CBD5E1;border-radius:8px;padding:4px 10px;cursor:pointer}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth-art{display:none}}

/* الصفحة الرئيسية ثابتة على قد الشاشة: لا تمرير لفوق أو لتحت، وخلية النحل تكبر وتصغر لتملأ المساحة (qc.js يحسب المقياس).
   على الجوال تبقى قائمة تمر، لأن الخلايا لا تسع شاشة صغيرة */
@media (min-width:921px){
  body.home{height:100vh;overflow:hidden;display:flex;flex-direction:column}
  body.home .lp{flex:1;min-height:0;display:flex;flex-direction:column;padding:20px 28px 0;inline-size:100%;box-sizing:border-box}
  body.home .lp>section{flex:1;min-height:0;display:flex;flex-direction:column}
  body.home .stage{flex:1;min-height:0;padding:0;overflow:visible}
  body.home .hive{transform:scale(var(--hs,1));transform-origin:center center;flex:none}
  body.home .foot{padding:2px 0 8px}
}
/* نسيت كلمة المرور: رابط نصي هادئ، ورسالة نجاح بنفس شكل رسالة الخطأ */
.dlink-text{color:#93C5FD;font-weight:700;font-size:13px}
.dlink-text:hover{color:#BFDBFE;text-decoration:underline}
.dok{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:10px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#BBF7D0;margin-bottom:18px;font-weight:600;line-height:1.7}
.dok i{margin-block-start:3px}
a.dbtn.dlink{display:grid;place-items:center;text-decoration:none}