/* ============================================================================
   LUMEX — لوحة قياس، لا صفحة تسويق.
   المرجع البصري: أجهزة التلمترية — قراءات أحادية المسافة، خطوط شعرية،
   ولون ذهبي واحد يمثّل «الإشارة» ولا يُستعمل لغير ذلك.
   ==========================================================================*/

:root{
  --void:#08111F;
  --panel:#0E1B2E;
  --panel2:#13253C;
  --line:#1D3552;
  --line-soft:#16283F;
  --gold:#F0B429;
  --gold-soft:rgba(240,180,41,.14);
  --phos:#3DDC97;
  --alert:#FF6B5A;
  --ink:#E9F0FA;
  --mute:#7E93AE;
  --r:14px;
  --pad:16px;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  --body:"Cairo","Segoe UI",system-ui,sans-serif;
  --disp:"Tajawal","Cairo",system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, #12243C 0%, transparent 60%),
    var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.65;
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior-y:none;
}

.hidden{display:none !important}
/* لا بد من هذا: قواعد الأصناف أدناه تحدد display وتتغلب على [hidden] */
[hidden]{display:none !important}

/* ───────── شريط الحالة ───────── */
.rail{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:calc(env(safe-area-inset-top) + 10px) var(--pad) 10px;
  border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:20;
  background:rgba(8,17,31,.86);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:baseline;gap:8px;min-width:0}
.brand-mark{
  width:9px;height:9px;border-radius:2px;background:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
  align-self:center;animation:beat 2.4s ease-in-out infinite;
}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
.brand-name{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.2px}
.brand-sub{font-size:11px;color:var(--mute);letter-spacing:.6px}
.rail-tags{display:flex;align-items:center;gap:6px}
.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3px;
  padding:3px 8px;border:1px solid var(--line);border-radius:99px;
  color:var(--mute);white-space:nowrap;
}
.tag.ok{color:var(--phos);border-color:rgba(61,220,151,.35)}
.tag.warn{color:var(--gold);border-color:rgba(240,180,41,.35)}
.tag.bad{color:var(--alert);border-color:rgba(255,107,90,.35)}

.icon-btn{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--mute);cursor:pointer;
  transition:color .15s,border-color .15s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--gold)}

/* ───────── مبدّل الوضع ───────── */
.modes{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  margin:14px var(--pad) 0;padding:4px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;
}
.mode{
  position:relative;z-index:2;padding:9px 0;border:0;background:transparent;
  color:var(--mute);font-family:var(--disp);font-weight:500;font-size:15px;cursor:pointer;
  transition:color .2s;
}
.mode.is-on{color:var(--void);font-weight:800}
.modes-thumb{
  /* خصائص منطقية لا فيزيائية — وإلا انقلب المؤشر في التخطيط من اليمين لليسار */
  position:absolute;z-index:1;top:4px;bottom:4px;inset-inline-start:4px;
  width:calc(50% - 4px);
  background:var(--gold);border-radius:9px;
  transition:transform .26s cubic-bezier(.4,1.2,.4,1);
}
body.rx .modes-thumb{transform:translateX(-100%)}

main{padding:14px var(--pad) 32px;max-width:620px;margin-inline:auto}
.pane{display:none}
.pane.is-on{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.stack{display:flex;flex-direction:column;gap:14px}

/* ───────── منطقة الإفلات ───────── */
.drop{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:30px 18px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--mute);
  transition:border-color .18s,background .18s,color .18s;
}
.drop:hover,.drop:focus-visible,.drop.over{
  border-color:var(--gold);color:var(--gold);background:var(--panel2);outline:none;
}
.drop-title{margin:2px 0 0;font-family:var(--disp);font-weight:500;font-size:16px;color:var(--ink)}
.drop-hint{margin:0;font-size:12.5px}

.link-btn{
  align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  color:var(--gold);font-family:var(--body);font-size:13.5px;
  border-bottom:1px dashed rgba(240,180,41,.5);
}

.picked{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
}
.picked-main{display:flex;flex-direction:column;min-width:0;flex:1}
.picked-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picked-meta{font-family:var(--mono);font-size:11.5px;color:var(--mute)}

/* ───────── الخيارات ───────── */
.opts{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.opts>summary{
  padding:13px 16px;cursor:pointer;font-family:var(--disp);font-weight:500;
  list-style:none;color:var(--ink);
}
.opts>summary::-webkit-details-marker{display:none}
.opts>summary::after{content:"▾";float:left;color:var(--mute);transition:transform .2s}
.opts[open]>summary::after{transform:rotate(180deg)}
.opts-body{display:flex;flex-direction:column;gap:14px;padding:4px 16px 18px;border-top:1px solid var(--line-soft)}

.row{display:flex;flex-direction:column;gap:6px}
.row>label,.field>label{font-size:12.5px;color:var(--mute)}
.row b,.field b{font-family:var(--mono);color:var(--gold);font-weight:600}

select,input[type=password],input[type=text],textarea{
  width:100%;padding:10px 12px;border-radius:10px;
  background:var(--void);border:1px solid var(--line);color:var(--ink);
  font-family:var(--body);font-size:14px;
}
textarea{resize:vertical;font-family:var(--mono);font-size:13px;line-height:1.7}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--gold)}
.field{display:flex;flex-direction:column;gap:6px}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;
  background:var(--line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:3px solid var(--void);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--gold);
  border:3px solid var(--void);cursor:pointer;
}

.check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink);cursor:pointer}
.check input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:18px;height:18px;margin-top:3px;border-radius:5px;
  border:1.5px solid var(--line);background:var(--void);cursor:pointer;position:relative;
}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{
  content:"";position:absolute;inset:3px 4px;
  border:2px solid var(--void);border-top:0;border-right:0;
  transform:rotate(-45deg);
}

/* ───────── الأزرار ───────── */
.cta,.btn{
  padding:13px 20px;border-radius:12px;cursor:pointer;
  font-family:var(--disp);font-weight:500;font-size:15px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  transition:transform .12s,border-color .15s,background .15s,opacity .15s;
}
.cta{background:var(--gold);border-color:var(--gold);color:#12203A;font-weight:800}
.cta:active,.btn:active{transform:scale(.985)}
.cta:disabled{opacity:.32;cursor:not-allowed}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.danger{color:var(--alert);border-color:rgba(255,107,90,.4)}
.btn.danger:hover{background:rgba(255,107,90,.1)}

.note{font-size:12px;color:var(--mute);margin:0;line-height:1.7}
.hint{font-size:12.5px;color:var(--mute);text-align:center;margin:0}

/* ───────── منصة رمز QR ───────── */
.stage{display:flex;flex-direction:column;gap:14px}
.qr-frame{
  padding:10px;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(240,180,41,.18), 0 18px 50px -20px rgba(0,0,0,.9);
}
#qrCanvas{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
}

/* ───────── القراءات ───────── */
.readout{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  background:var(--panel);
}
.cell{
  display:flex;flex-direction:column;gap:1px;padding:11px 12px;
  border-inline-start:1px solid var(--line-soft);border-top:1px solid var(--line-soft);
}
.cell:nth-child(3n+1){border-inline-start:0}
.cell:nth-child(-n+3){border-top:0}
.cell .k{font-size:10.5px;color:var(--mute);letter-spacing:.2px}
.cell .v{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--gold);direction:ltr;text-align:start}

.stage-bar,.cam-bar,.result-bar{display:flex;gap:10px}
.stage-bar>*,.cam-bar>*,.result-bar>*{flex:1}

/* ───────── الكاميرا ───────── */
.viewport{
  position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  background:#000;border:1px solid var(--line);
}
#video{width:100%;height:100%;object-fit:cover;display:block}
.viewport.idle #video{opacity:0}
.viewport-idle{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  color:var(--mute);padding:24px;background:var(--panel);
}
.viewport-idle p{margin:0;font-size:13.5px;max-width:22ch}
.viewport:not(.idle) .viewport-idle{display:none}

.reticle{position:absolute;inset:7%;pointer-events:none;opacity:0}
.viewport:not(.idle) .reticle{opacity:1}
.reticle i{position:absolute;width:26px;height:26px;border:2px solid var(--gold)}
.reticle i:nth-child(1){top:0;inset-inline-start:0;border-width:2px 0 0 2px;border-radius:6px 0 0 0}
.reticle i:nth-child(2){top:0;inset-inline-end:0;border-width:2px 2px 0 0;border-radius:0 6px 0 0}
.reticle i:nth-child(3){bottom:0;inset-inline-start:0;border-width:0 0 2px 2px;border-radius:0 0 0 6px}
.reticle i:nth-child(4){bottom:0;inset-inline-end:0;border-width:0 2px 2px 0;border-radius:0 0 6px 0}
.viewport.lock .reticle i{border-color:var(--phos)}

/* ───────── ★ شبكة الكتل ───────── */
.lattice-card{
  padding:12px 14px 14px;border:1px solid var(--line-soft);
  border-radius:var(--r);background:var(--panel);
}
.lattice-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--mute);margin-bottom:9px;
}
.lattice-head b{font-family:var(--mono);color:var(--gold);font-size:13px;direction:ltr}
#lattice{display:block;width:100%;height:auto;image-rendering:pixelated}
.lattice-legend{display:flex;gap:14px;margin-top:9px;font-size:11px;color:var(--mute)}
.lattice-legend span{display:flex;align-items:center;gap:5px}
.sw{width:9px;height:9px;border-radius:2px;display:inline-block}
.sw.got{background:var(--gold)}
.sw.pend{background:#4C6B94}
.sw.miss{background:#182B44}

/* ───────── التقدّم ───────── */
.progress{display:flex;flex-direction:column;gap:6px}
.progress-bar{height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.progress-bar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),#FFD469);
  transition:width .25s ease;
}
.progress-meta{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11.5px;color:var(--mute);direction:ltr;
}

/* ───────── النتيجة ───────── */
.result{
  display:flex;flex-direction:column;gap:12px;padding:16px;
  border:1px solid rgba(61,220,151,.3);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(61,220,151,.07),transparent 60%),var(--panel);
}
.result-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.result-head b{font-size:15px;word-break:break-all}
.badge{
  font-family:var(--mono);font-size:10.5px;padding:3px 9px;border-radius:99px;
  background:rgba(61,220,151,.14);color:var(--phos);border:1px solid rgba(61,220,151,.35);
}
.badge.bad{background:rgba(255,107,90,.12);color:var(--alert);border-color:rgba(255,107,90,.35)}
.result-meta{font-family:var(--mono);font-size:11.5px;color:var(--mute);line-height:1.9;word-break:break-all;direction:ltr;text-align:start}
.preview:empty{display:none}
.preview img{max-width:100%;border-radius:10px;display:block;border:1px solid var(--line)}
.preview pre{
  margin:0;max-height:220px;overflow:auto;padding:12px;
  background:var(--void);border:1px solid var(--line);border-radius:10px;
  font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;direction:ltr;text-align:start;
}

/* ───────── لوحة الإعدادات ───────── */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(4,9,17,.72);backdrop-filter:blur(3px);display:flex;align-items:flex-end}
.sheet-panel{
  width:100%;max-height:88dvh;overflow:auto;
  background:var(--panel);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:6px 0 calc(env(safe-area-inset-bottom) + 20px);
  animation:sheetUp .28s cubic-bezier(.3,1.1,.4,1);
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);border-bottom:1px solid var(--line-soft)}
.sheet-head b{font-family:var(--disp);font-size:16px}
.sheet-body{display:flex;flex-direction:column;gap:18px;padding:18px var(--pad) 4px}

/* ───────── التنبيه ───────── */
.toast{
  position:fixed;inset-inline:var(--pad);bottom:calc(env(safe-area-inset-bottom) + 18px);
  z-index:80;padding:12px 16px;border-radius:12px;text-align:center;font-size:13.5px;
  background:var(--panel2);border:1px solid var(--gold);color:var(--ink);
  box-shadow:0 14px 40px -14px #000;animation:rise .2s ease;
}
.toast.bad{border-color:var(--alert)}

/* ───────── ملء الشاشة أثناء البث ───────── */
body.beaming .rail,body.beaming .modes,body.beaming .readout,
body.beaming .stage-bar,body.beaming .hint{display:none}
body.beaming main{padding:0;max-width:none}
body.beaming .qr-frame{border-radius:0;border:0;padding:6px;min-height:100dvh;display:grid;place-items:center}
body.beaming #qrCanvas{max-height:100dvh;width:auto;max-width:100%}

@media (min-width:560px){
  .readout{grid-template-columns:repeat(6,1fr)}
  .cell:nth-child(3n+1){border-inline-start:1px solid var(--line-soft)}
  .cell:nth-child(6n+1){border-inline-start:0}
  .cell:nth-child(-n+6){border-top:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}