/* ===========================================================================
   لقطة / Laqta — هوية Extreme Vision
   =========================================================================== */
:root{
  --ink:#0A0F1C;            /* الأساس الداكن */
  --ink-2:#0d1424;
  --panel:#0c1220;
  --card:#111a2c;
  --card-2:rgba(10,159,212,.05);
  --hover:rgba(10,159,212,.12);
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);
  --track:#1d2739;
  --fg:#eef3f8;
  --muted:#8d9bb0;
  --muted-2:#5d6b80;

  /* تيل مائل للأزرق — داخل لقطة فقط. ألوان الهوية العامة ما تتغيّر. */
  --teal:#0A9FD4;
  --teal-soft:rgba(10,159,212,.16);
  --teal-ring:rgba(10,159,212,.32);
  --ember:#FF5C2A;
  --ember-soft:rgba(255,92,42,.14);
  --amber:#FFA22A;
  --amber-soft:rgba(255,162,42,.16);

  --grad:linear-gradient(103deg,#0A9FD4 0%,#2fb8e6 52%,#8ad9f2 100%);
  --grad-ember:linear-gradient(103deg,#FF5C2A,#ff9152);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ar:"Noto Kufi Arabic","Inter",system-ui,sans-serif;

  --r:14px;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 8px 26px rgba(0,0,0,.5);
  --shadow-lg:0 26px 64px rgba(0,0,0,.66);
  --glow:0 8px 30px rgba(10,159,212,.32);
  --ease:cubic-bezier(.22,.68,.2,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --fast:.14s; --med:.26s;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--ink);
  color:var(--fg);
  font:400 13px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.125px;
}
html[lang="ar"] body{font-family:var(--ar)}
html[lang="ar"] .kbd-hint b{font-family:var(--sans)}
button,input,select,textarea{font-family:inherit;letter-spacing:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#1b2537;border-radius:8px;border:3px solid var(--panel)}
::-webkit-scrollbar-thumb:hover{background:#26334a}
::-webkit-scrollbar-track{background:transparent}

/* --- الشريط العلوي ------------------------------------------------------ */
.topbar{
  position:relative; height:56px; display:flex; align-items:center; gap:14px;
  padding:0 20px; flex:none;
  background:linear-gradient(180deg,rgba(17,26,44,.85),rgba(10,15,28,.95));
  border-bottom:1px solid var(--line);
}
.topbar:after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:1.5px;
  background:linear-gradient(90deg,transparent 0%,var(--teal) 22%,#8ad9f2 42%,var(--ember) 68%,transparent 92%);
  background-size:220% 100%; opacity:.85; animation:stripe 8s linear infinite;
}
@keyframes stripe{from{background-position:0 50%}to{background-position:220% 50%}}
.logo{display:flex;align-items:center;gap:9px}
.logo .mark{color:var(--teal);filter:drop-shadow(0 0 9px rgba(10,159,212,.55))}
.wordmark{font-family:var(--ar);font-weight:700;font-size:22px;line-height:1;color:#fff}
.latin{font-family:"Instrument Serif",Georgia,serif;font-size:20px;letter-spacing:0;color:var(--teal);opacity:.95;line-height:1}
.tagline{font-size:12px;color:var(--muted);padding-inline-start:15px;position:relative}
.tagline:before{content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:1px;height:16px;background:var(--line-2)}
.spacer{flex:1}
/* شريط الاختصارات — مفتاح في شريحة، وصفه بجانبه */
.kbd-hint{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-2);white-space:nowrap}
.kbd-hint b{
  display:inline-block;color:#d6e0ec;background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);border-radius:7px;padding:2px 7px;
  font:600 11.5px/1.35 var(--sans);letter-spacing:-0.125px;
}
.kbd-hint i{font-style:normal;color:var(--muted);font-size:12px;margin-inline-start:2px}
.kbd-hint em{font-style:normal;color:var(--muted-2);opacity:.6;margin:0 3px}
.icon-btn{
  height:32px;min-width:32px;padding:0 9px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--muted);
  font-size:12px;font-weight:600;transition:all var(--fast) var(--ease);
}
/* التركيز ما يعلّق بعد النقر — يظهر فقط للتنقل بالكيبورد */
.icon-btn:focus{outline:none}
.icon-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (hover:hover){
  .icon-btn:hover{color:#fff;border-color:var(--teal);background:var(--teal-soft)}
}
.icon-btn.on{color:#fff;background:var(--teal-soft);border-color:var(--teal)}
.icon-btn.wide{min-width:42px}
/* ١٢ — أحجام وأوزان الأزرار مطابقة للموقع المرجعي */
.icon-btn{font-size:13px;font-weight:700;border-radius:10px}
.viewmode button{font-size:11.5px;font-weight:600;border-radius:8px;padding:6px 13px}
.presets button{font-size:12px;font-weight:600;border-radius:10px;padding:10px 8px}

/* --- التخطيط ------------------------------------------------------------ */
.main{display:flex;height:calc(100% - 56px)}
.viewport{
  flex:1;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;
  padding:22px;
  background:radial-gradient(120% 110% at 50% -10%,#16203a 0%,#0b1120 58%,#070a12 100%);
}
.viewport:before{
  content:"";position:absolute;top:-8%;inset-inline-end:0;width:52%;height:66%;
  background:radial-gradient(circle at 70% 30%,rgba(10,159,212,.13),transparent 62%);
  pointer-events:none;filter:blur(12px)
}

/* المقاس يُضبط من app.js (fitCanvas) — النسبة هنا مجرد قيمة أولية قبل أول رسم */
.stage{
  position:relative;
  container-type:inline-size;
  aspect-ratio:var(--ar,1.7778);
  width:100%;
  border-radius:14px;overflow:hidden;flex:none;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.08);
  animation:stageIn .6s var(--ease) both;
}
@keyframes stageIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.stage canvas:active{cursor:grabbing}
#overlays{position:absolute;inset:0;pointer-events:none}

/* --- الأدلة ------------------------------------------------------------- */
/* الشبكة تنحصر داخل إطار اللقطة تمامًا زي الموقع المرجعي — لا تلتصق بالحواف */
.guides{position:absolute;inset:14px;z-index:5}
.guides:before,.guides:after{content:"";position:absolute;inset:0}
.g-none:before,.g-none:after{display:none}
.g-thirds:before{background-image:
  linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.2) 33.333%,transparent calc(33.333% + .5px)),
  linear-gradient(to right,transparent calc(66.666% - .5px),rgba(255,255,255,.2) 66.666%,transparent calc(66.666% + .5px))}
.g-thirds:after{background-image:
  linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.2) 33.333%,transparent calc(33.333% + .5px)),
  linear-gradient(to bottom,transparent calc(66.666% - .5px),rgba(255,255,255,.2) 66.666%,transparent calc(66.666% + .5px))}
.g-golden:before{background-image:
  linear-gradient(to right,transparent calc(38.2% - .5px),rgba(10,159,212,.34) 38.2%,transparent calc(38.2% + .5px)),
  linear-gradient(to right,transparent calc(61.8% - .5px),rgba(10,159,212,.34) 61.8%,transparent calc(61.8% + .5px))}
.g-golden:after{background-image:
  linear-gradient(to bottom,transparent calc(38.2% - .5px),rgba(10,159,212,.34) 38.2%,transparent calc(38.2% + .5px)),
  linear-gradient(to bottom,transparent calc(61.8% - .5px),rgba(10,159,212,.34) 61.8%,transparent calc(61.8% + .5px))}
.g-center:before{background-image:
  linear-gradient(to right,transparent calc(50% - .5px),rgba(255,92,42,.45) 50%,transparent calc(50% + .5px)),
  linear-gradient(to bottom,transparent calc(50% - .5px),rgba(255,92,42,.45) 50%,transparent calc(50% + .5px))}
.g-sym:before{background-image:linear-gradient(to right,transparent calc(50% - .5px),rgba(255,255,255,.32) 50%,transparent calc(50% + .5px))}
.g-sym:after{backdrop-filter:none;background:linear-gradient(90deg,transparent 0 50%,rgba(10,159,212,.06) 50% 100%)}
.g-head:before{background-image:linear-gradient(to bottom,transparent calc(12% - .5px),rgba(255,92,42,.4) 12%,transparent calc(12% + .5px))}
.g-head:after{background-image:linear-gradient(to bottom,transparent calc(28% - .5px),rgba(10,159,212,.34) 28%,transparent calc(28% + .5px))}
.guides.safe{box-shadow:inset 0 0 0 max(4px,3.5%) rgba(255,255,255,.06)}
.guides.safe:after{outline:1px dashed rgba(255,255,255,.22);outline-offset:0;inset:5% 5%}

.film-frame{position:absolute;inset:14px;z-index:4}
.film-frame span{position:absolute;width:15px;height:15px;border:1.5px solid rgba(255,255,255,.28)}
.film-frame span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.film-frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.film-frame span:nth-child(3){bottom:0;right:0;border-left:0;border-top:0}
.film-frame span:nth-child(4){bottom:0;left:0;border-right:0;border-top:0}

.hud,.caption,.viewmode,.vp-btn,.drag-hint,.line-warn{
  background:rgba(7,11,20,.62);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(13px) saturate(1.2);-webkit-backdrop-filter:blur(13px) saturate(1.2);
}
/* direction:ltr يقلب inset-inline-* لهذا العنصر — نستخدم مواضع فيزيائية */
.hud{
  position:absolute;left:14px;top:40px;z-index:6;direction:ltr;
  font:500 11px/1 var(--sans);color:#e6eef7;padding:7px 11px;border-radius:8px;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.hud em{width:1px;height:11px;background:var(--line-2)}
.caption{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;direction:ltr;
  color:#fff;padding:6px 15px;border-radius:8px;
  font:600 10.5px/1 var(--sans);letter-spacing:.13em;white-space:nowrap;
  max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;
}

/* الكادر الضيّق (٩:١٦ و٤:٥): ينزل شريط المعلومات تحت مبدّل العرض */
@container (max-width: 560px){
  .hud{top:54px;font-size:10px;padding:5px 9px;gap:6px}
  .line-warn{top:96px}
  .caption{font-size:9.5px;letter-spacing:.08em;padding:5px 11px}
  .viewmode button{padding:5px 10px;font-size:11px}
}
.line-warn{
  position:absolute;left:50%;top:52px;transform:translateX(-50%);z-index:7;
  padding:6px 13px;border-radius:8px;font-size:11px;font-weight:600;color:#fff;
  background:rgba(255,92,42,.85);border-color:rgba(255,255,255,.2);
  opacity:0;transition:opacity var(--fast);white-space:nowrap;
}
.line-warn.on{opacity:1}
.viewmode{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:6;
  display:flex;gap:3px;padding:3px;border-radius:10px;
}
.viewmode button{
  background:none;border:none;color:#c9d6e4;cursor:pointer;padding:6px 12px;border-radius:8px;
  font-size:11.5px;font-weight:600;transition:all .16s var(--ease)
}
.viewmode button:hover{color:#fff}
.viewmode button.on{background:var(--grad);color:#04121a;box-shadow:0 3px 12px rgba(10,159,212,.4)}
.vp-btn{
  position:absolute;inset-inline-end:14px;top:12px;z-index:6;
  width:32px;height:32px;border-radius:9px;cursor:pointer;color:#d5e2ef;font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:all var(--fast)
}
.vp-btn:hover{color:#fff;border-color:var(--teal)}
.drag-hint{
  position:absolute;inset-inline-start:14px;bottom:14px;z-index:6;
  padding:6px 12px;border-radius:8px;font-size:11px;color:var(--muted)
}

/* --- اللوحة ------------------------------------------------------------- */
.panel{
  width:372px;flex:none;background:var(--panel);
  border-inline-start:1px solid var(--line);
  overflow-y:auto;min-height:0;
  padding:14px 13px 40px;
}
.tabs{display:flex;gap:2px;padding:10px 10px 0;flex:none;border-bottom:1px solid var(--line)}
.tab{
  flex:1;background:none;border:none;color:var(--muted);cursor:pointer;
  padding:9px 4px 11px;font-size:11.5px;font-weight:600;border-radius:8px 8px 0 0;
  position:relative;transition:color var(--fast),background var(--fast);
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.tab:hover{color:#cbd8e6;background:rgba(255,255,255,.03)}
.tab.on{color:#fff}
.tab.on:after{content:"";position:absolute;inset-inline:6px;bottom:-1px;height:2px;background:var(--grad);border-radius:2px}
.tab .count{
  font-style:normal;font-size:9.5px;font-weight:700;background:var(--ember);color:#fff;
  border-radius:20px;padding:1px 5px;line-height:1.4;font-family:var(--sans);
}
.panel-body{flex:1;overflow-y:auto;padding:14px 13px 40px;min-height:0}

.card{
  position:relative;overflow:hidden;flex:none;
  background:linear-gradient(180deg,#111a2c,#0a1120);
  border:1px solid var(--amber-soft);border-radius:var(--r);
  padding:15px 15px 17px;margin-bottom:12px;box-shadow:var(--shadow);
  animation:cardIn .42s var(--ease) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card:after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--grad);opacity:.9}
.card:hover{border-color:rgba(255,162,42,.34)}
.card h3{
  margin:0 0 12px;font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;
  color:var(--amber);display:flex;align-items:center;gap:8px;
}
.card h3:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}

.presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.presets button{
  background:var(--card-2);border:1px solid rgba(255,255,255,.07);color:#c3d1e0;
  padding:10px 6px;border-radius:10px;cursor:pointer;font-size:12px;font-weight:500;
  transition:all var(--fast) var(--ease);
}
.presets button:hover{background:var(--hover);border-color:var(--teal);color:#fff;transform:translateY(-1px)}
.presets button:active{transform:scale(.97)}

.ctl{margin:12px 0}
.ctl-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.ctl-head .val{color:#e9f1f8;font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--sans)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:var(--track);cursor:pointer;outline:none;display:block;direction:ltr;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:#fff;border:4px solid var(--teal);box-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:transform var(--fast),box-shadow var(--fast);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.22);box-shadow:0 0 0 6px var(--teal-ring)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--teal);cursor:pointer}

.field{margin:11px 0}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.field input[type=text],.field select,.vault-input{
  width:100%;background:var(--card-2);border:1px solid var(--line);color:var(--fg);
  border-radius:9px;padding:9px 11px;font-size:12.5px;
  transition:border-color var(--fast),box-shadow var(--fast);
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d9bb0' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
}
html[dir="rtl"] .field select{background-position:left 10px center}
.field select option{background:#111a2c;color:var(--fg)}
.field input:focus,.field select:focus,.vault-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-ring)}
.field input::placeholder,.vault-input::placeholder{color:var(--muted-2)}
.file{width:100%;font-size:11px;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  background:var(--card-2);border:1px solid rgba(255,255,255,.08);color:#bccadb;
  padding:7px 11px;border-radius:9px;cursor:pointer;font-size:11.5px;font-weight:500;
  transition:all var(--fast) var(--ease);
}
.chip:hover{background:var(--hover);border-color:var(--teal);color:#fff}
.chip.on{background:var(--teal-soft);border-color:var(--teal);color:#fff;font-weight:600}

.check{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12px;color:var(--muted);cursor:pointer}
.check input{accent-color:var(--teal);width:15px;height:15px;cursor:pointer}
.check:hover{color:#c5d3e2}

.segmented{position:relative;display:flex;background:#080d18;border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:8px}
.segmented:before{
  content:"";position:absolute;top:3px;bottom:3px;inset-inline-start:3px;width:calc(50% - 3px);
  background:var(--grad);border-radius:8px;transition:transform var(--med) var(--spring);z-index:0;
}
.segmented[data-active=video]:before{transform:translateX(100%)}
html[dir="rtl"] .segmented[data-active=video]:before{transform:translateX(-100%)}
.segmented button{
  position:relative;z-index:1;flex:1;background:none;border:none;cursor:pointer;padding:8px;
  border-radius:8px;font-size:12px;font-weight:600;color:var(--muted);transition:color var(--fast);
}
.segmented button.on{color:#04121a}

.btn{
  position:relative;overflow:hidden;padding:11px 14px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--card-2);color:var(--fg);cursor:pointer;
  font-size:12.5px;font-weight:600;box-shadow:var(--shadow);
  transition:all var(--fast) var(--ease);
}
.btn:hover{background:var(--hover);border-color:var(--teal);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.985)}
.btn.full{width:100%;margin-top:7px;display:block}
.btn.dashed{background:none;border:1.5px dashed var(--line-2);color:var(--muted);font-weight:600}
.btn.dashed:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.btn.primary{
  background:var(--grad);border:none;color:#04121a;box-shadow:var(--glow);
  background-size:170% 100%;background-position:0 50%;
}
.btn.primary:hover{background-position:100% 50%;box-shadow:0 12px 32px rgba(10,159,212,.45)}
.btn.big{padding:14px;font-size:14px;margin-top:12px}

.hint{font-size:11.5px;color:var(--muted);margin:0 0 10px;line-height:1.6}
.readout{font-size:11.5px;line-height:1.65;color:#b9c8da;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-family:var(--sans);direction:ltr;text-align:left}
.teach{
  font-size:11px;line-height:1.65;color:#9fd8d8;
  background:rgba(10,159,212,.07);border-inline-start:2px solid var(--teal);
  border-radius:0 8px 8px 0;padding:8px 11px;margin:-4px 0 12px;
}
html[dir="rtl"] .teach{border-radius:8px 0 0 8px}

.subbox{background:var(--card-2);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px 12px 13px;margin-bottom:10px}
.subbox-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.sb-name{font-size:11.5px;font-weight:700;color:var(--fg)}
.sb-x{width:22px;height:22px;border-radius:7px;border:none;background:none;color:var(--muted-2);font-size:11px;cursor:pointer;transition:all var(--fast)}
.sb-x:hover{color:#fff;background:var(--ember)}

.vault-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:7px 10px;margin-bottom:6px;font-size:11.5px;color:#c3d1e0}
.vault-input{margin-top:4px}

.listmeta{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--teal);font-weight:600;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.shotrow{display:flex;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.shotrow:last-child{border-bottom:none}
.shotrow img{width:78px;border-radius:6px;border:1px solid var(--line);flex:none;display:block}
.shotinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;direction:ltr;text-align:left}
.shotinfo b{font-size:11px;font-family:var(--sans);letter-spacing:.06em}
.shotinfo span{font-size:9px;line-height:1.4;color:var(--muted);letter-spacing:.06em;font-family:var(--sans)}
.shotinfo .dim{color:var(--muted-2)}
.shotacts{display:grid;grid-template-columns:1fr 1fr;gap:3px;flex:none}
.mini{width:22px;height:20px;border-radius:6px;border:1px solid var(--line);background:none;color:var(--muted);font-size:10px;cursor:pointer;transition:all var(--fast)}
.mini:hover{color:#fff;border-color:var(--teal);background:var(--teal-soft)}

/* --- المودال ------------------------------------------------------------ */
.modal-overlay{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(4,7,14,.76);backdrop-filter:blur(8px);
}
.modal-overlay.open{display:flex;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;width:520px;max-width:100%;max-height:92vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:22px;
  box-shadow:var(--shadow-lg);animation:pop var(--med) var(--spring);
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.modal:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:18px 18px 0 0;background:var(--grad)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-head h3{margin:0;font-size:19px;font-weight:700}
.x{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:6px;border-radius:8px;line-height:1;transition:all var(--fast)}
.x:hover{color:#fff;background:var(--card-2)}
.preview{width:100%;border-radius:11px;border:1px solid var(--line);display:block}
.modal-label{display:block;font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:15px 0 7px}
.promptbox{
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:13px;
  font-size:11.5px;line-height:1.65;color:#c8d6e5;direction:ltr;text-align:left;font-family:var(--sans);
  max-height:200px;overflow-y:auto;
}
.promptbox.ar{direction:rtl;text-align:right;font-family:var(--ar);white-space:pre-line}
.modal-actions{display:flex;gap:8px;margin-top:14px}
.modal-actions .btn{flex:1}

/* --- الأنيماتيك --------------------------------------------------------- */
.animatic{
  position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:#04070e;
}
.animatic.open{display:flex}
.animatic img{max-width:94vw;max-height:82vh;border-radius:8px;box-shadow:var(--shadow-lg)}
.animatic .x{position:absolute;top:18px;inset-inline-end:20px;font-size:20px;color:#fff}
.anim-bar{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;gap:14px;align-items:center;
  background:rgba(10,15,28,.8);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 18px;font:600 11px/1 var(--sans);letter-spacing:.1em;color:#dbe6f2;
}
.anim-bar span:first-child{color:var(--teal)}

/* --- التوست ------------------------------------------------------------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:80;
  background:#16203a;border:1px solid var(--line-2);color:var(--fg);
  padding:11px 18px;border-radius:10px;font-size:12.5px;font-weight:600;
  box-shadow:var(--shadow-lg);animation:pop .28s var(--spring);
}

/* --- استجابة -------------------------------------------------------------
   الجوال: عمود واحد — الكادر فوق واللوحة تحته والصفحة تمرّر كوحدة.
   ارتفاع الكادر يحسبه fitCanvas ويسقّفه بـ62% من الشاشة، فلا نفرض هنا
   ارتفاعًا ثابتًا (كان height:52vh يخلّف فراغًا ميتًا تحت الكادر).
   ------------------------------------------------------------------------ */
@media (max-width:1040px){
  html,body{overflow:auto;height:auto;min-height:100%}
  .main{display:block;height:auto}
  .viewport{height:auto;padding:10px 10px 6px;display:block;flex:none}
  .stage{margin:0 auto}
  .panel{
    width:100%;border-inline-start:none;border-top:1px solid var(--line);
    height:auto;overflow:visible;padding:12px 12px 24px;
  }
  .panel-body{overflow:visible}
  .tagline{display:none}
  /* الفوتر يصير في نهاية الصفحة بدل ما يعوم فوق اللوحة */
  .credit{position:static;right:auto;height:auto;padding:16px 0 22px;background:none}

  /* عناصر الكادر تصغر معه */
  .viewmode{top:8px}
  .viewmode button{padding:5px 10px;font-size:11px}
  .vp-tools{top:8px;right:8px;gap:5px}
  .vp-tools .icon-btn{height:28px;min-width:28px;padding:0 7px;font-size:12px}
  /* top و bottom معًا يمطّطان الصندوق — نثبّت الأسفل وحده */
  .hud{top:auto;bottom:44px;left:8px;padding:5px 9px;font-size:10px}
  .caption{bottom:8px;font-size:9px;letter-spacing:.06em;padding:5px 10px}
  .film-frame,.guides{inset:9px}
  .line-warn{top:50px}

  /* مساحات لمس أكبر — الإصبع أعرض من مؤشر الفأرة */
  .presets button{padding:14px 8px;font-size:13px}
  select,input[type=text]{min-height:46px;font-size:16px}
  .btn{min-height:46px}
  .btn.big{min-height:52px}
  .chip{padding:10px 14px;font-size:13px}
  .icon-btn{height:38px;min-width:38px}
  input[type=range]{height:6px}
  input[type=range]::-webkit-slider-thumb{width:22px;height:22px;border-width:5px}
  .subgrid{grid-template-columns:1fr}

  .rig-bar{right:6px;width:88px;padding:7px;gap:6px}
  .rig-bar span{font-size:9px}
  .rig-bar .btn{min-height:38px;padding:8px 6px;font-size:11px}

  .modal{max-width:100%;max-height:92vh}
  .pose-grid{grid-template-columns:1fr 1fr;max-height:58vh}
}
@media (max-width:680px){
  .topbar{padding:0 12px;gap:8px;height:52px}
  .wordmark{font-size:19px}
  .latin{font-size:17px}
  .presets{grid-template-columns:1fr 1fr}
  /* شريط الإيماءات يبقى ظاهرًا على الجوال — بندين فقط فيسع */
  .kbd-hint{font-size:10.5px;gap:4px;min-width:0;overflow:hidden}
  .kbd-hint b{font-size:10px;padding:2px 5px}
  .kbd-hint i{font-size:10px;margin-inline-start:1px}
  .kbd-hint em{margin:0 2px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- Powered by ---------------------------------------------------------- */
.credit{
  position:fixed;left:0;right:var(--panel-w,372px);bottom:0;height:26px;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:5px;
  font:500 11px/1 var(--sans);letter-spacing:-0.125px;
  color:var(--muted-2);background:linear-gradient(0deg,rgba(7,11,20,.92),transparent);
  pointer-events:none;
}
.credit a{
  color:var(--teal);text-decoration:none;font-weight:600;pointer-events:auto;
  transition:color var(--fast) var(--ease);
}
.credit a:hover{color:#8ad9f2;text-decoration:underline}

/* --- أدوات فوق الصورة (الشبكة والملصق) --------------------------------- */
.vp-tools{
  position:absolute;right:14px;top:12px;z-index:6;display:flex;gap:6px;
}
.vp-tools .icon-btn{
  height:30px;min-width:30px;padding:0 8px;
  background:rgba(7,11,20,.62);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(13px) saturate(1.2);-webkit-backdrop-filter:blur(13px) saturate(1.2);
}

/* --- بطاقات الشخصيات جنب بعض ------------------------------------------- */
.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.subgrid:has(.subbox:only-child){grid-template-columns:1fr}
.subbox{
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:11px 11px 13px;min-width:0;
}
.subbox-head{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.sb-name{font-weight:700;font-size:12.5px;color:#eef3f8;flex:1;min-width:0}
.sb-cam{
  width:30px;height:26px;border-radius:8px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--muted);
  transition:all var(--fast) var(--ease);
}
.sb-cam:focus{outline:none}
.sb-cam:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (hover:hover){ .sb-cam:hover{color:#fff;border-color:var(--teal)} }
.sb-cam.on{
  background:var(--teal);border-color:var(--teal);color:#04121a;
  box-shadow:0 0 14px rgba(10,159,212,.5);
}
.sb-x{
  width:22px;height:22px;border-radius:6px;cursor:pointer;flex:none;
  background:none;border:none;color:var(--muted-2);font-size:12px;line-height:1;
}
.sb-x:hover{color:var(--ember)}
.subbox .ctl{margin:9px 0 0}
.subbox .ctl-head{font-size:11px}
.btn.pose-open{
  width:100%;margin-bottom:2px;font-weight:700;
  background:var(--teal-soft);border-color:var(--teal);color:#fff;
}
.btn.pose-open:hover{background:var(--teal);color:#04121a}

/* --- ستوديو البوز ------------------------------------------------------- */
.pose-modal{max-width:560px}
.pose-modal .modal-head h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:22px}
.pose-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.pose-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  max-height:52vh;overflow-y:auto;padding-right:4px;
}
.pose-cell{
  position:relative;cursor:pointer;padding:0;overflow:hidden;
  background:#0b1120;border:2px solid rgba(255,255,255,.07);border-radius:12px;
  transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.pose-cell img{display:block;width:100%;height:auto}
.pose-cell .pose-name{
  position:absolute;left:0;right:0;bottom:0;padding:7px 8px;
  font:700 12px/1 var(--sans);color:#cfdae7;
  background:linear-gradient(0deg,rgba(6,10,18,.92),transparent);
}
.pose-cell:focus{outline:none}
@media (hover:hover){ .pose-cell:hover{border-color:var(--line-2);transform:translateY(-1px)} }
.pose-cell.on{border-color:var(--teal)}
.pose-cell.on .pose-name{color:var(--teal)}

/* Instrument Serif ما يدعم العربية — نرجّع خط الواجهة للعنوان العربي */
html[lang="ar"] .pose-modal .modal-head h3{font-family:var(--ar);font-weight:700;font-size:16px}

/* الكادر الضيّق (٩:١٦ و٤:٥): الأدوات تنزل تحت مبدّل العرض بدل ما تتصادم معه */
@container (max-width: 560px){
  .vp-tools{top:52px;right:14px;gap:5px}
  .vp-tools .icon-btn{height:26px;min-width:26px;padding:0 6px;font-size:11px}
  .hud{top:92px;left:14px}
  .viewmode button{padding:5px 9px;font-size:10.5px;white-space:nowrap}
}

/* --- محرّر البوز الحر ----------------------------------------------------- */
/* عمود ضيّق على يمين الكادر — كان أفقيًا في الأسفل فيغطي المفاصل التي
   يُفترض أن تُسحب، فيستحيل تحريك الأرجل. */
.rig-bar{
  position:absolute;right:8px;top:50%;left:auto;bottom:auto;transform:translateY(-50%);
  z-index:8;display:none;flex-direction:column;align-items:stretch;gap:6px;
  width:96px;padding:8px;border-radius:12px;
  background:rgba(7,11,20,.82);border:1px solid var(--teal);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 34px rgba(0,0,0,.6);
}
.rig-bar.open{display:flex}
.rig-bar span{
  font-size:9.5px;line-height:1.35;color:var(--muted);
  text-align:center;white-space:normal;margin-bottom:2px;
}
.rig-bar .btn{
  width:100%;margin:0;padding:7px 6px;font-size:11px;min-height:32px;white-space:nowrap;
}
.stage:has(.rig-bar.open) canvas{cursor:crosshair}

.pose-custom{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:150px;border-style:dashed;border-color:var(--teal);
  background:var(--teal-soft);
}
.pose-custom .pc-icon{font-size:30px;color:var(--teal);line-height:1}
.pose-custom .pose-name{position:static;background:none;color:var(--teal);padding:0}

/* ===========================================================================
   العربية: تباعد الأحرف يفصل الحروف المتصلة فيطلع الخط مقطّعًا، و
   text-transform ما له معنى فيها. نلغيهما على كل عنصر قد يحمل نصًا عربيًا.
   =========================================================================== */
html[lang="ar"] .card h3,
html[lang="ar"] .modal-label,
html[lang="ar"] .tab,
html[lang="ar"] .shotinfo b,
html[lang="ar"] .shotinfo span,
html[lang="ar"] .segmented button{
  letter-spacing:0;
  text-transform:none;
}
html[lang="ar"] .card h3{font-size:11.5px;font-weight:700}

/* ===========================================================================
   تثبيت الارتفاع بين اللغتين
   line-height:normal يحسبه المتصفح من الخط، وصندوق سطر Noto Kufi أطول من
   Inter — فكانت الأزرار والقوائم تنفخ عند التحويل للعربية (اللوحة +217px).
   ارتفاع سطر صريح يجعل الحشوة وحدها تحدد الطول، فتتطابق اللغتان.
   =========================================================================== */
button,
select,
input[type=text],
.btn,
.chip,
.tab,
.presets button,
.viewmode button,
.icon-btn,
.segmented button,
.sb-name,
.pose-cell .pose-name{
  line-height:1.15;
}
/* الحقول تحتاج ارتفاعًا ثابتًا حتى لا يزيحها اختلاف الخط */
select,input[type=text]{min-height:38px}
.btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
.btn.big{min-height:46px}

/* قاعدة .credit الأساسية معرّفة بعد كتلة الاستجابة في هذا الملف، فكانت
   تغلب تجاوز الجوال ويبقى الفوتر عائمًا فوق اللوحة. نعيد التجاوز هنا. */
@media (max-width:1040px){
  .credit{position:static;left:auto;right:auto;bottom:auto;height:auto;
          padding:16px 0 22px;background:none}
}

/* أضيق من ٤٢٠px: الهيدر ما يسع الإيماءات مع الشعار وزر اللغة */
@media (max-width:420px){ .kbd-hint{display:none} }