/* المِنضدة (النسخة ٣): مساحة عمل — لوحة الخطوات، والكتاب بجانبها، وعلى الجوال شاشةٌ واحدة بشريطٍ سفلي.
   يعمل حين يضع bench3.js العلامة data-ws. الألوان كلها من wq.css (فتتبع مظهر المالك والسِّراج)،
   والشكل من الهوية: النقطة المعيَّنة، والحُمرة والذهب، وخط «أضواء السلف» للعناوين. */

[data-ws] {
  --bar-h: 60px;
  --dock-h: 0px;
  --r-s: 8px;
  --r: 12px;
  --r-l: 16px;
  --sh-1: 0 1px 2px rgba(42, 29, 20, .06), 0 6px 18px -10px rgba(42, 29, 20, .22);
  --sh-2: 0 2px 6px rgba(42, 29, 20, .07), 0 18px 40px -22px rgba(42, 29, 20, .38);
  --ring: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent);
  --field: var(--sheet);
  --hover: color-mix(in srgb, var(--vellum) 75%, transparent);
  --tap: 36px;
  scroll-padding-top: 0;
}
@media (pointer: coarse) { [data-ws] { --tap: 44px; } }
[data-ws].night { --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -10px rgba(0, 0, 0, .6); --sh-2: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 44px -22px rgba(0, 0, 0, .8); --hover: color-mix(in srgb, var(--vellum) 80%, transparent); }

/* ================= الهيكل ================= */
[data-ws], [data-ws] body { height: 100%; }
[data-ws] body { min-height: 0; overflow: hidden; display: grid; grid-template-rows: var(--bar-h) minmax(0, 1fr); background: var(--paper); font-size: 15px; line-height: 1.65; -webkit-tap-highlight-color: transparent; }
@supports (height: 100dvh) { [data-ws] body { height: 100dvh; } }
[data-ws] .body { display: grid; grid-template-columns: minmax(400px, 36%) minmax(0, 1fr); min-height: 0; height: 100%; }
@media (min-width: 1600px) { [data-ws] .body { grid-template-columns: 540px minmax(0, 1fr); } }
[data-ws] :focus-visible { outline: 2px solid var(--gold-d); outline-offset: 2px; border-radius: 6px; }
[data-ws] .kbd { font: 700 11px/1.7 var(--ui); border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; display: inline-block; opacity: .7; }
@media (pointer: coarse) { [data-ws] .kbd { display: none; } }
[data-ws] ::selection { background: color-mix(in srgb, var(--gold) 40%, transparent); }

/* (الشريط العلوي: css/v3.css المشترك بين الصفحات) */
[data-ws] .ws-bar { position: relative; }

/* ================= لوحة الخطوات ================= */
[data-ws] .bn-panel { grid-column: 1; grid-row: 1; position: relative; padding: 16px 18px 0; background: var(--paper); border-inline-end: 1px solid var(--line); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
[data-ws] .bn-panel .stn, [data-ws] .bn-panel .stn.wrap { padding: 0; margin: 0; max-width: none; border: 0; display: block; scroll-margin: 12px; }
[data-ws] #settingsCard[hidden] { display: contents !important; }
[data-ws] #settingsCard { display: contents; }
[data-ws] #bookCard[hidden] { display: block !important; }
[data-ws] .main > .foot { margin: 18px 0 8px; padding: 18px 4px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); display: grid; gap: 8px; }

/* نوع العمل أعلى اللوحة (يكتبه app.js): الكتب أو الأبحاث أو المتون، و«منضدة جديدة» */
[data-ws] .bn-kind { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 4px; }
[data-ws] .bn-kind .kb-pill:empty { display: none; }
[data-ws] .bn-kind .kg-pill { height: 38px; padding: 0 14px 0 8px; box-shadow: var(--sh-1); }
[data-ws] .bn-kind .kb-clear { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--ui); height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--sheet); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
[data-ws] .bn-kind .kb-clear:hover { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
[data-ws] .bn-kind .kb-clear[hidden] { display: none; }
[data-ws] #kindNote { margin: 4px 0 0; }

/* الطريق: النقط الخمس، وكل نقطةٍ خطوة */
[data-ws] .ws-road { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 0 12px; margin-bottom: 2px; }
[data-ws] .ws-road::before { content: ""; position: absolute; top: 24px; inset-inline: 10%; height: 2px; background: linear-gradient(90deg, var(--line), var(--line)); border-radius: 2px; }
[data-ws] .ws-road button { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font: 700 12px/1.3 var(--ui); min-width: 0; }
[data-ws] .ws-road i { position: relative; width: 36px; height: 36px; display: grid; place-items: center; }
[data-ws] .ws-road i::before { content: ""; position: absolute; inset: 6px; transform: rotate(45deg); border: 1.5px solid var(--gold); background: var(--paper); border-radius: 3px; transition: background-color .3s, border-color .3s, transform .35s var(--stamp); }
[data-ws] .ws-road b { position: relative; font: 700 14px/1 var(--display); padding-top: .2em; color: var(--gold-d); transition: color .3s; }
[data-ws] .ws-road span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: color .2s; }
[data-ws] .ws-road .done i::before { background: var(--gold); }
[data-ws] .ws-road .done b { color: var(--p-ink); }
[data-ws] .ws-road .on i::before { background: var(--rubric); border-color: var(--rubric); transform: rotate(45deg) scale(1.12); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--rubric) 80%, transparent); }
[data-ws] .ws-road .on b { color: var(--on-rubric); }
[data-ws] .ws-road .on span { color: var(--rubric); }
[data-ws] .ws-road .off { cursor: default; opacity: .45; }
[data-ws] .ws-road button:not(.off):hover span { color: var(--rubric); }

/* بطاقة الخطوة: عنوانها، ثم خياراتها حين تُفتح */
[data-ws] .bn-panel .stn { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); transition: box-shadow .3s, border-color .3s; }
[data-ws] .bn-panel .stn.bn-open { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow: var(--sh-2); }
[data-ws] .bn-panel .stn.bn-off { box-shadow: none; background: color-mix(in srgb, var(--sheet) 55%, transparent); }
[data-ws] .bn-h { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; border-radius: var(--r-l); cursor: pointer; color: var(--ink); user-select: none; -webkit-user-select: none; transition: background-color .2s; }
[data-ws] .bn-h > .h2, [data-ws] .bn-h > div { display: none; }
[data-ws] .bn-h:hover { background: var(--hover); }
[data-ws] .bn-open > .bn-h { border-end-start-radius: 0; border-end-end-radius: 0; }
[data-ws] .bn-h > .st-n { width: 40px; height: 40px; }
[data-ws] .bn-h > .st-n i { inset: 7px; border-radius: 3px; transition: background-color .3s, border-color .3s, transform .35s var(--stamp); }
[data-ws] .bn-h > .st-n b { font-size: 16px; transition: color .3s; }
[data-ws] .bn-done > .bn-h > .st-n i { background: var(--gold); }
[data-ws] .bn-done > .bn-h > .st-n b { color: var(--p-ink); }
[data-ws] .bn-open > .bn-h > .st-n i { background: var(--rubric); border-color: var(--rubric); transform: rotate(45deg) scale(1.08); }
[data-ws] .bn-open > .bn-h > .st-n b { color: var(--on-rubric); }
[data-ws] .bn-tt { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
[data-ws] .bn-t { font: 700 17px/1.4 var(--display); color: var(--ink); }
[data-ws] .bn-open .bn-t { color: var(--rubric); }
[data-ws] .bn-sum, [data-ws] .bn-lead { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ws] .bn-sum:empty { display: none; }
[data-ws] .bn-lead { display: none; }
[data-ws] .bn-open .bn-lead { display: block; }
[data-ws] .bn-ok { display: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, transparent); place-items: center; flex: none; }
[data-ws] .bn-ok svg { width: 15px; height: 15px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-ws] .bn-done:not(.bn-open) .bn-ok { display: grid; }
[data-ws] .bn-chev { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); margin-inline: 6px 4px; flex: none; transition: transform .3s var(--pen); opacity: .6; }
[data-ws] .bn-open .bn-chev { transform: translateY(2px) rotate(-135deg); }
[data-ws] .bn-done:not(.bn-open) .bn-chev { display: none; }
[data-ws] .bn-off > .bn-h { cursor: default; opacity: .55; }
[data-ws] .bn-off > .bn-h:hover { background: none; }
[data-ws] .bn-off .bn-chev { display: none; }

[data-ws] .stn:not(.bn-open) > .bn-body { display: none; }
[data-ws] .bn-body { display: grid; gap: 18px; align-content: start; padding: 6px 16px 18px; border-top: 1px solid var(--line); min-width: 0; animation: wsOpen .38s var(--pen) both; }
[data-ws] .bn-body > * { min-width: 0; }
@keyframes wsOpen { from { opacity: 0; transform: translateY(-6px); } }
[data-ws] .ws-desc { margin-top: 10px; }

/* «التالي: …» */
[data-ws] a.catch.bn-next { justify-self: stretch; transform: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 2px; padding: 10px 14px; border-radius: var(--r); background: var(--vellum); font: 700 14px var(--ui); color: var(--ink); text-decoration: none; transition: background-color .2s, color .2s; }
[data-ws] a.catch.bn-next span { color: var(--muted); font-weight: 400; }
[data-ws] a.catch.bn-next b { color: var(--rubric); }
[data-ws] a.catch.bn-next::after { content: ""; width: 8px; height: 8px; border-left: 2px solid var(--rubric); border-bottom: 2px solid var(--rubric); transform: rotate(45deg); margin-inline-start: 4px; }
[data-ws] a.catch.bn-next:hover { background: color-mix(in srgb, var(--gold) 18%, var(--vellum)); }

/* أسفل اللوحة: «أخرِج الكتاب» */
[data-ws] .bn-foot { position: sticky; bottom: 0; margin: auto -18px 0; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 18px); z-index: 3; }
[data-ws] .bn-foot .go { display: grid; gap: 8px; justify-items: stretch; }
[data-ws] .bn-foot .acts { display: flex; flex-wrap: wrap; gap: 8px; }
[data-ws] .bn-foot #startBtn { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 12px; height: 54px; font-size: 18px; border-radius: var(--r); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--btn) 85%, transparent); transition: transform .15s, box-shadow .2s, background-color .2s; }
[data-ws] .bn-foot #startBtn:hover { transform: translateY(-1px); }
[data-ws] .bn-foot #startBtn:active { transform: translateY(1px) scale(.99); }
[data-ws] .bn-foot .btn.quiet { flex: 1 1 0; font-size: 13.5px; padding: 8px 10px; border-radius: var(--r-s); white-space: normal; line-height: 1.4; background: var(--sheet); }
[data-ws] .bn-foot #goCap { font-size: 12.5px; text-align: center; }
[data-ws] .bn-foot #goCap:empty { display: none; }
[data-ws]:not(.bn-has) .bn-foot { display: none; }

/* ================= عناصر الخيارات ================= */
[data-ws] .bn-panel .hint { font-size: 13.5px; line-height: 1.75; }
[data-ws] .bn-panel .note { font-size: 14px; padding: 10px 14px; border-radius: var(--r-s); border-inline-start-width: 3px; }
[data-ws] .bn-panel .status { font-size: 13.5px; }
[data-ws] .bn-opts, [data-ws] .bn-look { display: grid; gap: 20px; }
[data-ws] .bn-opt { display: grid; gap: 10px; }
[data-ws] .bn-ol, [data-ws] .bn-panel .row > span:first-child, [data-ws] .bn-panel .sub, [data-ws] .bsm-choose .lbl, [data-ws] .paper-l { font: 700 13px/1.5 var(--ui); color: var(--ink); margin: 0; }
[data-ws] .bn-ol small, [data-ws] .bn-panel .sub small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
[data-ws] .bn-panel h3.sub { display: grid; gap: 1px; }

/* المقسَّم (مصدر الكتاب، موقع الفهرس…) */
[data-ws] .bn-panel .seg { display: flex; width: 100%; flex-wrap: wrap; gap: 4px; padding: 4px; border: 0; border-radius: var(--r); overflow: visible; background: var(--vellum); font-size: 13px; }
[data-ws] .bn-panel .seg > button { flex: 1 1 auto; min-width: 0; min-height: var(--tap); padding: 6px 10px; border: 0; border-radius: var(--r-s); font: 700 13.5px/1.35 var(--ui); background: none; color: var(--ink); text-align: center; transition: background-color .2s, color .2s, box-shadow .2s; }
[data-ws] .bn-panel .seg > button:not([aria-pressed="true"]):not([aria-checked="true"]):not(.on):hover { background: color-mix(in srgb, var(--sheet) 70%, transparent); }
[data-ws] .bn-panel .seg > [aria-pressed="true"], [data-ws] .bn-panel .seg > [aria-checked="true"], [data-ws] .bn-panel .seg > .on { background: var(--sheet); color: var(--rubric); box-shadow: 0 1px 2px rgba(42, 29, 20, .12), 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); }
[data-ws].night .bn-panel .seg > [aria-pressed="true"], [data-ws].night .bn-panel .seg > [aria-checked="true"], [data-ws].night .bn-panel .seg > .on { background: var(--btn); color: var(--on-rubric); box-shadow: none; }
[data-ws] .bn-panel .seg.vpats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: none; padding: 0; gap: 6px; }
[data-ws] .bn-panel .seg.vpats button { min-height: 0; border: 1.5px solid var(--line); background: var(--sheet); }

/* القوالب */
[data-ws] #templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; }
[data-ws] #templates .tpl { grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; padding: 12px 14px; border-radius: var(--r); background: var(--paper); border: 1.5px solid var(--line); transition: border-color .2s, box-shadow .2s, transform .2s; }
[data-ws] #templates .tpl:hover { border-color: var(--gold); transform: translateY(-1px); }
[data-ws] #templates .tpl[aria-pressed="true"], [data-ws] #templates .tpl.on { border-color: var(--rubric); background: color-mix(in srgb, var(--rubric) 5%, var(--sheet)); box-shadow: 0 0 0 1px var(--rubric), var(--sh-1); }
[data-ws] #templates .tpl .mini { width: 44px; padding: 6px 5px; gap: 2.5px; }
[data-ws] #templates .tpl .mini u { height: 2px; }
[data-ws] #templates .tpl .mini u.h { height: 3px; }
[data-ws] #templates .tpl b { font-size: 17px; line-height: 1.5; }
[data-ws] #templates .tpl small { font-size: 12px; line-height: 1.55; }

/* أساليب دور النشر */
[data-ws] #presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 16px 12px; }
[data-ws] #presets .stcard { gap: 7px; padding-bottom: 4px; }
[data-ws] #presets .stcard b { font-size: 13.5px; }
[data-ws] #presets .stcard-art { border-radius: 18%; }
[data-ws] #presets .stmine { gap: 6px; font-size: 11.5px; flex-wrap: wrap; justify-content: center; }
[data-ws] #presets .stmine button { font-size: 11.5px; }
[data-ws] #presets .stmake .stcard-art > span { font-size: 30px; }
[data-ws] #presetDesc { font-size: 13px; line-height: 1.7; padding: 10px 14px; border-radius: var(--r-s); background: var(--vellum); }
[data-ws] #presetDesc:empty { display: none; }
[data-ws] .bpk { padding: 14px; border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, var(--sheet)), var(--sheet)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); }
[data-ws] .bpk-c { border-radius: var(--r); }

/* الورق والهامش والخلفيات */
[data-ws] .paper-row, [data-ws] .bgs-row { display: grid; gap: 10px; }
[data-ws] .paper-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
[data-ws] .paper-seg > button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 10px; text-align: start; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
[data-ws] .paper-seg > button > i { grid-row: span 2; }
[data-ws] .paper-seg > button b { font-size: 14px; }
[data-ws] .paper-seg > button small { font-size: 12px; color: var(--muted); line-height: 1.4; }
[data-ws] .paper-seg > button:hover { border-color: var(--gold); }
[data-ws] .paper-seg > button[aria-pressed="true"] { border-color: var(--rubric); box-shadow: 0 0 0 1px var(--rubric); background: color-mix(in srgb, var(--rubric) 5%, var(--sheet)); }
[data-ws] .om-odd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
[data-ws] .om-odd button { min-height: var(--tap); padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 13px var(--ui); cursor: pointer; }
[data-ws] .om-odd button[aria-pressed="true"] { border-color: var(--rubric); color: var(--rubric); }
[data-ws] .bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 46%), 1fr)); gap: 8px; }
[data-ws] .bg-slot { border-radius: var(--r) !important; }
[data-ws] .bg-acts { display: flex; flex-wrap: wrap; gap: 8px; }
[data-ws] .bg-acts .btn { border-radius: 999px; }

/* الصفوف: اسم الخيار فوقه */
[data-ws] .bn-panel .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: none; }
[data-ws] .bn-panel .row:last-child { border-bottom: 0; }
[data-ws] .bn-panel .row::before { display: none; }
[data-ws] .bn-panel .row:hover { background: none; }
[data-ws] .bn-panel .row-c { gap: 8px 16px; }
[data-ws] .bn-panel .row.gloss { grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* الشرح تحت خياره، صغيراً هادئاً (لا يختفي) */
[data-ws] .bn-panel .gloss-note { opacity: 1; transform: none; font-size: 12.5px; line-height: 1.7; color: var(--muted); padding: 0; }
[data-ws] .bn-panel .gloss-note b { display: inline; font: 700 12.5px var(--ui); color: var(--gold-d); margin-inline-end: 6px; }
[data-ws] .bn-panel .gloss-note::before, [data-ws] .bn-panel .gloss-note::after { display: none; }
[data-ws] .bn-panel .rowhint { padding: 0; }
[data-ws] .bn-ess { display: grid; padding: 2px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }

/* المفتاح: كل خيارٍ وحده مفتاح (والخيارات المتجاورة مربعات صغيرة) */
[data-ws] .bn-panel .chk { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: var(--tap); font-size: 14px; line-height: 1.55; color: var(--ink); cursor: pointer; }
[data-ws] .bn-panel .chk > span { flex: 1; min-width: 0; }
[data-ws] .bn-panel .chk small { font-size: 12.5px; }
[data-ws] .bn-panel .chk input { order: 2; appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 42px; height: 24px; margin: 0; border: 0; border-radius: 999px; transform: none; background: color-mix(in srgb, var(--ink) 16%, var(--paper)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14); cursor: pointer; transition: background-color .25s; }
[data-ws] .bn-panel .chk input::after { content: ""; position: absolute; top: 3px; inset-inline-end: 21px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-end .25s var(--pen); }
[data-ws] .bn-panel .chk input:checked { background: var(--rubric); box-shadow: none; }
[data-ws].night .bn-panel .chk input:checked { background: var(--gold); }
[data-ws] .bn-panel .chk input:checked::after { inset-inline-end: 3px; }
[data-ws] .bn-panel .row:not(.full) .row-c .chk { width: auto; justify-content: flex-start; min-height: 32px; }
[data-ws] .bn-panel .row.full > .row-c > .chk { flex: 1 1 100%; }
[data-ws] .bn-panel .row:not(.full) .row-c .chk input { order: 0; width: 15px; height: 15px; border-radius: 3px; transform: rotate(45deg); background: transparent; border: 1.5px solid var(--gold-d); box-shadow: none; }
[data-ws] .bn-panel .row:not(.full) .row-c .chk input::after { display: none; }
[data-ws] .bn-panel .row:not(.full) .row-c .chk input:checked { background: var(--rubric); border-color: var(--rubric); box-shadow: inset 0 0 0 2.5px var(--sheet); }
[data-ws] .asis { border-radius: var(--r) !important; }

/* الحقول والقوائم */
[data-ws] .bn-panel .fld { gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink); }
[data-ws] .bn-panel .fld input, [data-ws] .bn-panel .fld select, [data-ws] .bn-panel .pick select, [data-ws] .bn-panel select[data-seg], [data-ws] .bn-panel .rl select { font: 400 14.5px/1.5 var(--ui); min-height: var(--tap); padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--field); color: var(--ink); box-shadow: inset 0 1px 2px rgba(42, 29, 20, .05); width: 100%; transition: border-color .2s, box-shadow .2s; }
[data-ws] .bn-panel select { -webkit-appearance: none; appearance: none; padding-inline-end: 34px !important; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: left 16px center, left 11px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
[data-ws] .bn-panel .fld input:focus, [data-ws] .bn-panel .fld select:focus, [data-ws] .bn-panel .pick select:focus, [data-ws] .bn-panel select[data-seg]:focus, [data-ws] .bn-panel .rl select:focus { outline: none; border-color: var(--gold-d); box-shadow: var(--ring); }
[data-ws] .bn-panel .fld input::placeholder { color: var(--muted); opacity: .6; }
[data-ws] .bn-panel .pick { font-size: 13px; gap: 8px; }
[data-ws] .bn-panel .pick select { width: auto; min-width: 84px; }
[data-ws] .bn-panel .clr { font-size: 13.5px; gap: 8px; }
[data-ws] .bn-panel .slide { max-width: none; font-size: 13px; }
[data-ws] .bn-panel .inner-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
[data-ws] .bn-panel .two { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; max-width: none; }
[data-ws] .bn-panel .sw-row { gap: 4px; }
[data-ws] .bn-panel .inner { padding: 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
[data-ws] .rl { border-radius: var(--r-s); padding: 6px 10px; }

/* «خيارات أكثر» */
[data-ws] .bn-more { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
[data-ws] .bn-more > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center; cursor: pointer; padding: 12px 14px; min-height: 56px; border-radius: var(--r); user-select: none; -webkit-user-select: none; transition: background-color .2s; }
[data-ws] .bn-more > summary:hover { background: var(--hover); }
[data-ws] .bn-more > summary::-webkit-details-marker { display: none; }
[data-ws] .bn-more > summary::before { content: ""; grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--vellum) no-repeat center/9px 9px; background-image: linear-gradient(var(--rubric), var(--rubric)), linear-gradient(var(--rubric), var(--rubric)); background-size: 10px 2px, 2px 10px; transition: transform .3s var(--pen); }
[data-ws] .bn-more[open] > summary::before { background-size: 10px 2px, 0 0; transform: rotate(180deg); }
[data-ws] .bn-more > summary b { font-size: 14.5px; color: var(--ink); }
[data-ws] .bn-more > summary small { font-size: 12.5px; color: var(--muted); }
[data-ws] .bn-more[open] > summary { border-bottom: 1px solid var(--line); border-end-start-radius: 0; border-end-end-radius: 0; }
[data-ws] .bn-more > :not(summary) { margin: 14px; }
[data-ws] .bn-more .work { display: block; }
[data-ws] .bn-more .panels { gap: 22px; }
[data-ws] .bn-more .panel { display: grid; gap: 4px; }
[data-ws] .bn-more .panel > .sub { padding: 0 0 6px; border-bottom: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); font: 700 13px var(--ui); color: var(--gold-d); margin: 0; }
[data-ws] .bn-cover .inner { padding: 0; background: none; border: 0; }
[data-ws] .bsm-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ١. الكتاب: البحث */
[data-ws] #s1 .find { gap: 8px; align-items: stretch; flex-direction: row; }
[data-ws] #s1 .find-in { font: 400 16px/1.5 var(--ui); height: 50px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--field); box-shadow: inset 0 1px 2px rgba(42, 29, 20, .05); transition: border-color .2s, box-shadow .2s; }
[data-ws] #s1 .find-in::placeholder { font-size: 13.5px; opacity: .7; }
[data-ws] #s1 .find-in:focus { border-color: var(--gold-d); box-shadow: var(--ring); }
[data-ws] #s1 #searchBtn { font-size: 15px; height: 50px; padding: 0 20px; border-radius: var(--r); flex: none; }
[data-ws] #s1 #searchHint { font-size: 12.5px; }
/* (بطاقات الخطوات التالية موضوعةٌ بعد قسم البحث وفوقه: فيُرفع القسم كله لتعلوها قائمة البحث) */
[data-ws] .bn-panel #s1 { position: relative; z-index: 5; }
/* القائمة بعرض البحث كله (الخانة وزرّها)، وارتفاعها بقدر ما بقي من الشاشة (suggestFit في app.js) */
[data-ws] #s1 .find { position: relative; }
[data-ws] #s1 .qwrap { position: static; }
[data-ws] #s1 .suggest { border-radius: var(--r); border-color: var(--gold); box-shadow: 0 22px 44px -16px rgba(42, 29, 20, .5), var(--sh-2); padding: 0; max-height: min(62vh, 560px); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
[data-ws] #s1 .suggest li { padding: 9px 16px; border-radius: 0; border-bottom: 0; gap: 1px; }
[data-ws] #s1 .suggest li + li:not(.sug-all) { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
[data-ws] #s1 .suggest li b { font: 700 16.5px/1.5 var(--display); overflow-wrap: anywhere; }
[data-ws] #s1 .suggest li span { font-size: 12.5px; line-height: 1.6; }
[data-ws] #s1 .suggest .sug-n { position: sticky; top: 0; z-index: 1; padding: 7px 16px; background: var(--sheet); border-bottom: 1px solid var(--line); font: 700 12px/1.5 var(--ui); color: var(--muted); cursor: default; }
[data-ws] #s1 .suggest .sug-n + li { border-top: 0; }
[data-ws] #s1 .suggest .sug-n:hover { background: var(--sheet); }
[data-ws] #s1 .suggest .sug-all { position: sticky; bottom: 0; padding: 10px 16px; background: var(--sheet); border-top: 1px solid var(--line); text-align: center; }
[data-ws] #s1 .suggest .sug-all b { font: 700 13.5px/1.5 var(--ui); color: var(--rubric); }
[data-ws] #s1 .suggest .sug-all:hover, [data-ws] #s1 .suggest .sug-all.on { background: var(--vellum); }
[data-ws] .try { gap: 8px; font-size: 13px; }
[data-ws] .try button { font: 700 13.5px/1.5 var(--ui); padding: 6px 14px; min-height: 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); transition: border-color .2s, color .2s; }
[data-ws] .try button:hover { border-color: var(--gold); color: var(--rubric); }
[data-ws] .bn-panel .drop { padding: 22px 16px; border-radius: var(--r-l); border: 1.5px dashed color-mix(in srgb, var(--gold-d) 70%, transparent); background: var(--paper); gap: 4px; }
[data-ws] .bn-panel .drop i { display: none; }
[data-ws] .bn-panel .drop b { font-size: 19px; }
[data-ws] .bn-panel .drop span { font-size: 13px; }

/* ٢. المجلدات */
[data-ws] .bk { grid-template-columns: minmax(0, 1fr); gap: 14px; }
[data-ws] .bk-t { font-size: 24px; line-height: 1.45; color: var(--rubric); }
[data-ws] .bk-a { font-size: 13.5px; }
[data-ws] .bk-info { gap: 10px; }
[data-ws] .vol-tools { font-size: 13px; gap: 6px; }
[data-ws] .vol-tools .tbtn, [data-ws] .bn-panel .tbtn { font: 700 12.5px var(--ui); min-height: 32px; padding: 4px 12px; border-radius: 999px; background: var(--sheet); }
[data-ws] #bookLink { font-size: 13px; padding: 0; color: var(--gold-d); }
[data-ws] #volList { zoom: .86; justify-self: center; max-width: 100%; }
[data-ws] .parts-list li { grid-template-columns: auto minmax(0, 1fr) auto; font-size: 13px; }
[data-ws] .parts-list b { font-size: 15px; }
[data-ws] .wordbox { padding: 0; background: none; border: 0; }
[data-ws] .word-sum { font-size: 13.5px; }
[data-ws] .word-opts { grid-template-columns: minmax(0, 1fr); }
[data-ws] .split-list li { padding-inline-start: 12px; }

/* ٤. الغلاف */
[data-ws] .outer { gap: 14px; }
[data-ws] .outer > .row-c { display: grid; gap: 8px; }
[data-ws] .outer-status { font-size: 13px; }
[data-ws] .outer .outer-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r); background: var(--vellum); margin: 0; border: 0; }
[data-ws] .outer .outer-tabs button { display: grid; gap: 1px; justify-items: center; min-height: 46px; padding: 6px 4px; margin: 0; border: 0; border-radius: var(--r-s); background: none; box-shadow: none; font: 700 13px/1.35 var(--ui); color: var(--ink); cursor: pointer; }
[data-ws] .outer .outer-tabs button small { display: block; max-width: 100%; font: 500 11px/1.3 var(--ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ws] .outer .outer-tabs button.set small { color: var(--rubric); }
[data-ws] .outer .outer-tabs button[aria-pressed="true"] { background: var(--sheet); color: var(--rubric); box-shadow: 0 1px 2px rgba(42, 29, 20, .12), 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); }
[data-ws] .outer .outer-kind { font-size: 13px; line-height: 1.6; }
[data-ws] .outer .outer-kind button { font: 700 12.5px/1.4 var(--ui); padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); }
[data-ws] .outer .outer-paper, [data-ws] .outer .outer-book { padding: 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
[data-ws] .outer .outer-book { gap: 12px; }
[data-ws] .outer .outer-paper select { width: 100%; }
[data-ws] .outer .outer-paper .row-c > .fld:first-child { flex: 1 1 100%; }
[data-ws] .outer .ob-chip { width: 26px; height: 26px; }

/* ٥. الإخراج */
[data-ws] .out { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; background: none; }
[data-ws] .out-opts { gap: 4px; }
[data-ws] .out-opts > .chk { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
[data-ws] .out-sel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; margin-top: 8px; }
[data-ws] .bn-panel .spec { padding: 12px 14px; gap: 12px; border-radius: var(--r); background: var(--vellum); }
[data-ws] .bn-panel .spec-pg { display: none; }
[data-ws] .bn-panel .spec dl { font-size: 13px; gap: 2px 14px; }

/* ================= الكتاب: ما بجانب الخطوات ================= */
[data-ws] .bn-view { grid-column: 2; grid-row: 1; position: relative; min-width: 0; min-height: 0; background: var(--vellum); background-image: radial-gradient(color-mix(in srgb, var(--gold) 22%, transparent) 1px, transparent 1.2px); background-size: 22px 22px; }
[data-ws].night .bn-view { background-image: radial-gradient(color-mix(in srgb, var(--gold) 14%, transparent) 1px, transparent 1.2px); }
[data-ws] .bn-pane { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; animation: wsFade .35s var(--pen) both; }
@keyframes wsFade { from { opacity: 0; } }
[data-ws] .bn-pane[data-pane="preview"], [data-ws] .bn-pane[data-pane="start"] { grid-template-rows: minmax(0, 1fr); }
[data-ws] .bn-pc { min-height: 0; min-width: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
[data-ws] .bn-vbar, [data-ws] .pvw-bar { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 0; }
[data-ws] .bn-vt { font: 700 16px var(--display); color: var(--ink); }
[data-ws] .bn-vs { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[data-ws] .bn-vs b { color: var(--rubric); }
[data-ws] .bn-chips { display: flex; gap: 4px; margin-inline-start: auto; padding: 3px; border-radius: 999px; background: var(--vellum); }
[data-ws] .pvw-bar .bn-chips { margin-inline-start: 8px; }
[data-ws] .bn-chips:not(:has(> :not([hidden]) ~ :not([hidden]))) { display: none; }
[data-ws] .bn-chip, [data-ws] .pvw-mode button { font: 700 12.5px/1 var(--ui); height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
[data-ws] .bn-chip:hover, [data-ws] .pvw-mode button:hover { color: var(--rubric); }
[data-ws] .bn-chip[aria-pressed="true"], [data-ws] .pvw-mode button[aria-pressed="true"] { background: var(--sheet); color: var(--rubric); box-shadow: 0 1px 2px rgba(42, 29, 20, .15); }
[data-ws] .pvw-mode { display: flex; gap: 2px; flex: none; padding: 3px; border-radius: 999px; background: var(--vellum); }

/* المعاينة: صفحتان متقابلتان على المكتب */
[data-ws] .bn-pane .pv { position: static; display: block; height: 100%; max-width: none; width: auto; margin: 0; padding: 0; overflow: hidden; order: 0; }
[data-ws] .pvw.pvw-barred { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; --pv-accent: var(--rubric); --pv-line: var(--line); --pv-muted: var(--muted); }
[data-ws] .pv .pvw-bar .pvw-tabs { display: flex; flex-wrap: nowrap; gap: 2px; flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border: 0; border-radius: 0; padding-inline-start: 10px; margin-inline-start: 4px; border-inline-start: 1px solid var(--line); }
[data-ws] .pv .pvw-bar .pvw-tabs::-webkit-scrollbar { display: none; }
[data-ws] .pv .pvw-bar .pvw-tabs button { flex: none; display: block; height: 30px; padding: 0 11px; margin: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 700 12.5px/30px var(--ui); white-space: nowrap; }
[data-ws] .pv .pvw-bar .pvw-tabs button:hover { background: var(--vellum); color: var(--ink); }
[data-ws] .pv .pvw-bar .pvw-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--rubric) 10%, var(--sheet)); color: var(--rubric); }
[data-ws] .pv .pvw-bar .pvw-status { font-size: 12.5px; flex: none; }
[data-ws] .pv .pvw-bar .pvw-status:empty::after { content: none; }
[data-ws] .pv .pvw-bar .pvw-status:empty { display: none; }
[data-ws] .pv .pvw-bar .pvw-pager { margin-inline-start: auto; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); flex: none; display: flex; align-items: center; }
[data-ws] .pv .pvw-bar .pvw-pager[hidden] { display: none; }
[data-ws] .pv .pvw-bar .pvw-pager button { width: 32px; height: 32px; font-size: 17px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
[data-ws] .pv .pvw-bar .pvw-pager button:hover { border-color: var(--gold); color: var(--rubric); }
[data-ws] .pv .pvw-bar .pvw-pager[hidden] + .pvw-zoom { margin-inline-start: auto; }
[data-ws] .pv .pvw-bar .pvw-zoom { flex: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--sheet); border: 1px solid var(--line); font-size: 15px; color: var(--ink); cursor: pointer; }
[data-ws] .pv .pvw-bar .pvw-zoom:hover { border-color: var(--gold); color: var(--rubric); }
[data-ws] .pv .pvw-stage { background: none; border: 0; border-radius: 0; padding: 32px 36px; min-height: 0; }
[data-ws] .pv .pvw-paper { box-shadow: 0 2px 4px rgba(42, 29, 20, .08), 0 24px 48px -20px rgba(42, 29, 20, .45), 0 0 0 1px rgba(42, 29, 20, .05); border-radius: 2px; }
[data-ws] .pvw-paper.pvw-two::after { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 40px; margin-left: -20px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(42, 29, 20, .07) 42%, rgba(42, 29, 20, .18) 50%, rgba(42, 29, 20, .07) 58%, transparent); }
[data-ws] .pv .pvw-hint { padding: 0 20px 14px; font-size: 12.5px; text-align: center; }
[data-ws].night .pv .pvw-paper { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .75); }
[data-ws] .pv .pvw.pvw-full { padding: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
[data-ws] .pv .pvw.pvw-full .pvw-bar { background: #1c160f; border-color: rgba(255, 255, 255, .12); color: #d8ccb4; }

/* المنضدة فارغة */
[data-ws] .bn-empty { min-height: 100%; display: grid; align-content: center; justify-items: center; gap: 26px; padding: 48px clamp(20px, 5vw, 72px) 32px; text-align: center; color: var(--muted); }
[data-ws] .bn-empty > h2 { margin-top: -14px; font: 700 clamp(30px, 3vw, 42px)/1.35 var(--display); color: var(--rubric); }
[data-ws] .bn-empty > p { margin-top: -18px; font-size: 16px; max-width: 46ch; color: var(--ink); opacity: .8; }
[data-ws] .ws-logo { display: block; color: var(--mark); }
[data-ws] .ws-logo svg { display: block; width: 30px; height: 54px; animation: wsMark .9s var(--pen) both; }
[data-ws] .ws-logo .lgd path { animation: wsDot .34s var(--stamp) both; transform-box: fill-box; transform-origin: center; }
[data-ws] .ws-logo .lgd path:nth-child(1) { animation-delay: .5s; } [data-ws] .ws-logo .lgd path:nth-child(2) { animation-delay: .6s; } [data-ws] .ws-logo .lgd path:nth-child(3) { animation-delay: .7s; } [data-ws] .ws-logo .lgd path:nth-child(4) { animation-delay: .8s; } [data-ws] .ws-logo .lgd path:nth-child(5) { animation-delay: .9s; }
@keyframes wsMark { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes wsDot { from { opacity: 0; transform: scale(.2); } }
[data-ws] .ws-slot { display: grid; gap: 14px; width: min(600px, 100%); }
[data-ws] .bn-empty .mybook { width: 100%; gap: 10px; text-align: center; }
[data-ws] .bn-empty .drop { padding: 40px 24px; border-radius: 20px; border: 2px dashed color-mix(in srgb, var(--gold-d) 60%, transparent); background: color-mix(in srgb, var(--sheet) 85%, transparent); box-shadow: var(--sh-1); gap: 6px; transition: border-color .2s, background-color .2s, transform .2s; }
[data-ws] .bn-empty .drop::before { content: ""; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 16px; background: color-mix(in srgb, var(--rubric) 10%, var(--sheet)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B1D2F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M5 20h14'/%3E%3C/svg%3E") center/26px no-repeat; }
[data-ws] .bn-empty .drop:hover, [data-ws] .bn-empty .drop.over { border-color: var(--rubric); background: var(--sheet); transform: translateY(-2px); }
[data-ws] .bn-empty .drop i { display: none; }
[data-ws] .bn-empty .drop b { font-size: 24px; }
[data-ws] .bn-empty .drop span { font-size: 13.5px; max-width: 44ch; }
[data-ws] .bn-empty #myHint { font-size: 12.5px; text-align: start; }
[data-ws] .bn-empty .mydir { font-size: 13px; justify-content: center; }
[data-ws] .bn-empty .tbtn { border-radius: 999px; }
[data-ws] .bn-empty .try { justify-content: center; }
[data-ws] .ws-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(720px, 100%); margin-top: 6px; }
[data-ws] .ws-how li { display: grid; justify-items: center; gap: 2px; padding: 16px 12px; border-radius: var(--r-l); background: color-mix(in srgb, var(--sheet) 70%, transparent); border: 1px solid var(--line); }
[data-ws] .ws-how i { font: 700 15px/1 var(--display); font-style: normal; color: var(--on-rubric); width: 30px; height: 30px; display: grid; place-items: center; padding-top: .15em; margin-bottom: 6px; position: relative; }
[data-ws] .ws-how i::before { content: ""; position: absolute; inset: 4px; background: var(--rubric); transform: rotate(45deg); border-radius: 3px; z-index: -1; }
[data-ws] .ws-how li { position: relative; z-index: 0; }
[data-ws] .ws-how b { font-size: 14.5px; color: var(--ink); }
[data-ws] .ws-how span { font-size: 12.5px; }
[data-ws] .ws-foot { width: min(720px, 100%); }
[data-ws] .ws-foot .foot { padding: 18px 0 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); display: grid; gap: 6px; }
[data-ws] .ws-foot .foot .by { margin-top: 10px; }

/* نتائج البحث */
[data-ws] .bn-pane[data-pane="results"] .bn-pc { padding: 16px clamp(14px, 3vw, 32px) 28px; }
[data-ws] .bn-pane .res { display: grid; gap: 8px; max-width: 900px; margin-inline: auto; }
[data-ws] .bn-pane .res li button { padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sheet); gap: 2px 14px; box-shadow: var(--sh-1); transition: border-color .2s, transform .2s, box-shadow .2s; }
[data-ws] .bn-pane .res li button:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--sh-2); background: var(--sheet); }
[data-ws] .bn-pane .res .t { font-size: 19px; }
[data-ws] .bn-pane .res .a { font-size: 13px; }
[data-ws] .bn-pane .res .m { font-size: 12px; border-radius: 999px; padding: 2px 12px; }
[data-ws] .bn-pane .res.wait li { border-radius: var(--r); border: 1px solid var(--line); background: var(--sheet); }

/* الغلاف الخارجي */
[data-ws] .bn-pane[data-pane="cover"] .bn-pc { overflow: hidden; }
[data-ws] .bn-pane #outerFrame { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; margin: 0; }
[data-ws] .bn-pane .outer-file-note { margin: 40px auto; max-width: 420px; }

/* الإخراج */
[data-ws] .bn-pane[data-pane="progress"] .bn-pc { padding: 20px clamp(14px, 3vw, 32px) 28px; }
[data-ws] .bn-pane .prog { margin: 0 auto; padding: 0; border: 0; gap: 16px; max-width: 980px; }
[data-ws] .bn-pane .prog > .prog-h { display: flex; align-items: center; gap: 12px; }
[data-ws] .bn-pane .prog-h .h2 { font: 700 22px/1.4 var(--display); color: var(--rubric); }
[data-ws] .bn-pane .prog-h p { font-size: 13.5px; }
[data-ws] .bn-pane .prog-h .btn { font-size: 13.5px; padding: 7px 16px; border-radius: 999px; }
[data-ws] .bn-pane .live, [data-ws] .bn-pane .fin, [data-ws] .bn-pane .vrows { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
[data-ws] .bn-pane .live { padding: 26px clamp(18px, 3vw, 40px); }
[data-ws] .bn-pane .fin { padding: 30px 20px; }
[data-ws] .bn-pane .vrows { padding: 0 14px; }
[data-ws] .bn-pane .vrow:last-child { border-bottom: 0; }
[data-ws] .bn-pane .vrow { grid-template-columns: auto minmax(110px, 190px) minmax(0, 1fr); gap: 10px 20px; }
[data-ws] .bn-pane .vdl { grid-column: 1 / -1; justify-content: flex-start; padding-inline-start: 46px; }
[data-ws] .bn-pane .vdl a, [data-ws] .bn-pane .vdl button.view, [data-ws] .bn-pane .vdl button.waraq, [data-ws] .bn-pane .acts .btn { border-radius: 999px; }
[data-ws] #autoNote { font-size: 13px; line-height: 1.6; padding: 8px 12px; }

/* المتون */
[data-ws] .mutun-box > h3.sub { display: none; }
[data-ws] .mrange > h3.sub { margin-bottom: 8px; }

/* السِّراج: الحقول والخلفيات */
[data-ws].night .bn-panel .fld input, [data-ws].night .bn-panel .fld select, [data-ws].night .bn-panel select, [data-ws].night #s1 .find-in { background-color: #0F1A2B; }
[data-ws].night .bn-panel select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); }
[data-ws].night .ws-bar { background: color-mix(in srgb, var(--paper) 90%, transparent); }

/* الشريط السفلي (الجوال وحده) */
[data-ws] .ws-dock { display: none; }

/* ================= الأجهزة اللوحية والجوال ================= */
@media (max-width: 1023.98px) {
  [data-ws] { --bar-h: 56px; --dock-h: 66px; }
  [data-ws] .body { grid-template-columns: minmax(0, 1fr); }
  [data-ws] .bn-panel, [data-ws] .bn-view { grid-column: 1; grid-row: 1; }
  [data-ws] .bn-panel { border: 0; padding: 14px max(14px, env(safe-area-inset-right)) calc(var(--dock-h) + 20px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  /* الشاشتان في موضعٍ واحد، والخفيّة تبقى مرسومة (فتُنضَّد المعاينة وهي خلفها) */
  [data-ws][data-tab="view"] .bn-panel, [data-ws][data-tab="steps"] .bn-view { visibility: hidden; pointer-events: none; }
  [data-ws][data-tab="steps"] .bn-panel, [data-ws][data-tab="view"] .bn-view { z-index: 2; }
  [data-ws] .bn-view { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
  [data-ws] .bn-pane { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
  /* زرّ الإخراج في الشريط السفلي، فأسفل اللوحة لإعادة التنضيد وحدها */
  [data-ws] .bn-foot { position: static; margin: 4px 0 0; padding: 0; background: none; }
  [data-ws] .bn-foot #startBtn { display: none; }
  [data-ws] .bn-foot .acts:not(:has(> :not(#startBtn):not([hidden]))) { display: none; }
  [data-ws] .ws-dock { position: fixed; z-index: 45; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 6px; height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(42, 29, 20, .35); }
  [data-ws] .ws-tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; flex: 0 0 74px; height: 50px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--muted); font: 700 11.5px/1.2 var(--ui); cursor: pointer; transition: color .2s, background-color .2s; }
  [data-ws] .ws-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
  [data-ws] .ws-tab[aria-pressed="true"] { color: var(--rubric); background: color-mix(in srgb, var(--rubric) 8%, transparent); }
  [data-ws] .ws-tab[aria-pressed="true"] svg { stroke-width: 2; }
  [data-ws] .ws-tab:disabled { opacity: .38; cursor: default; }
  [data-ws] .ws-tab em { position: absolute; top: 3px; inset-inline-end: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rubric); color: var(--on-rubric); font: 700 10.5px/18px var(--ui); font-style: normal; }
  [data-ws] .ws-cta { flex: 1; height: 50px; margin-inline-start: 4px; border-radius: var(--r); font-size: 16px; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--btn) 85%, transparent); }
  [data-ws] .ws-cta.busy { background: var(--sheet); color: var(--rubric); border-color: var(--line); box-shadow: none; }
  [data-ws] .ws-cta[hidden] { display: none; }
  [data-ws] .ws-dock:not(:has(.ws-cta:not([hidden]))) .ws-tab { flex: 1; }
  /* المعاينة: صفحةٌ واحدة تملأ العرض */
  [data-ws] .pv .pvw-stage { padding: 18px 12px; }
  [data-ws] .pvw-bar { gap: 6px; padding: 6px 10px; min-height: 50px; overflow-x: auto; scrollbar-width: none; }
  [data-ws] .pvw-bar::-webkit-scrollbar { display: none; }
  [data-ws] .bn-vbar { padding: 6px 12px; }
  [data-ws] .bn-empty { padding: 28px 16px; }
  [data-ws] .main > .foot { margin-bottom: 0; }
}
@media (max-width: 640px) {
  [data-ws] .ws-home .wq-word { display: none; }
  [data-ws] .bn-panel .stn { border-radius: var(--r); }
  [data-ws] .bn-h { padding: 10px 12px; min-height: 60px; border-radius: var(--r); }
  [data-ws] .bn-body { padding: 4px 12px 16px; }
  [data-ws] .ws-road span { font-size: 11px; }
  [data-ws] #s1 .find { flex-direction: row; }
  [data-ws] #s1 #searchBtn { padding: 0 16px; }
  [data-ws] #presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  [data-ws] #templates { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: -12px; padding: 2px 12px 8px; scrollbar-width: none; }
  [data-ws] #templates::-webkit-scrollbar { display: none; }
  [data-ws] #templates .tpl { flex: 0 0 76%; scroll-snap-align: start; }
  [data-ws] .bn-pane .res li button { padding: 12px 14px; }
  [data-ws] .bn-pane .res .t { font-size: 17px; }
  [data-ws] .pvw-mode { display: none; }
  [data-ws] .rl { grid-template-columns: minmax(0, 1fr) auto; }
  [data-ws] .rl select { grid-column: 1 / -1; grid-row: 2; }
  [data-ws] .split-modes { grid-template-columns: minmax(0, 1fr); }
  [data-ws] .vrow { grid-template-columns: auto minmax(0, 1fr); }
  [data-ws] .vdl { justify-content: flex-start; }
}
/* حقول الكتابة على اللمس: ١٦ نقطة فلا يكبّر Safari الصفحة عند الكتابة */
@media (pointer: coarse) {
  [data-ws] input, [data-ws] select, [data-ws] textarea { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ws] .bn-body, [data-ws] .bn-pane, [data-ws] .ws-logo svg, [data-ws] .ws-logo .lgd path { animation: none !important; }
}
@media print { [data-ws] .ws-bar, [data-ws] .ws-dock { display: none !important; } }