/* «مزايا ورّاق»: جولة في أبواب البرنامج. الشريط الجانبي كشريط البرنامج، وكل باب صفحته، وفي كل صفحة أمثلة حيّة. */ .fxpage{background:var(--paper)} .fx{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - var(--bar-h))} /* ===== الشريط الجانبي: كأبواب البرنامج ===== */ .fx-side{position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h));display:flex;flex-direction:column;gap:2px;padding:20px 12px 18px;background:var(--band);color:var(--band-ink);border-inline-end:3px solid var(--gold);overflow-y:auto;z-index:10} .fx-side-h{display:grid;gap:2px;padding:0 10px 16px;margin-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--band-ink) 18%,transparent)} .fx-side-h b{font:700 24px/1.4 var(--display);color:#fff} .wq.night .fx-side-h b{color:var(--band-ink)} .fx-side-h small{font-size:12.5px;line-height:1.6;color:var(--band-soft)} .fx-door{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--band-ink);text-decoration:none;font-weight:700;font-size:15px;transition:background-color .2s,color .2s} .fx-door svg{width:22px;height:22px} .fx-door kbd{font:600 10.5px/1 var(--ui);direction:ltr;opacity:.55;border:1px solid currentColor;border-radius:4px;padding:3px 5px} .fx-door:hover{background:color-mix(in srgb,var(--band-ink) 10%,transparent)} .fx-door[aria-current="page"]{background:var(--paper);color:var(--rubric)} .fx-door[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-12px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:var(--gold);transform:rotate(45deg)} .fx-door[aria-current="page"] kbd{opacity:.7} .fx-sp{flex:1 1 auto} .fx-side-dl{display:block;text-align:center;margin-top:14px;padding:10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--gold) 70%,transparent);color:var(--band-ink);text-decoration:none;font-weight:700;font-size:14px;transition:background-color .2s} .fx-side-dl:hover{background:color-mix(in srgb,var(--gold) 22%,transparent)} /* ===== الصفحة ===== */ .fx-main{min-width:0;padding:40px clamp(16px,3.6vw,56px) 56px} .fx-page{max-width:1180px;margin-inline:auto;animation:fx-in .45s var(--pen) both} @keyframes fx-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .fx-head{display:grid;gap:12px;padding-bottom:30px;margin-bottom:36px;border-bottom:1px solid var(--line)} .fx-kick{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--gold-d)} .fx-kick > i{width:9px;height:9px;background:var(--gold);transform:rotate(45deg)} .fx-kick kbd,.fx-mini kbd,.fx-note kbd,.fx-gem kbd{font:600 11.5px/1 var(--ui);direction:ltr;display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:3px 6px;color:var(--muted);background:var(--sheet)} .fx-head h1{font:700 clamp(36px,4.6vw,62px)/1.3 var(--display);color:var(--rubric)} .fx-lead{font-family:var(--display);font-size:clamp(18px,1.5vw,21px);line-height:1.95;max-width:46em;text-wrap:pretty} .fx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .fx-tabs button{font:700 16px/1 var(--ui);padding:12px 26px;border-radius:999px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);cursor:pointer;transition:all .2s} .fx-tabs button:hover{border-color:var(--gold-d)} .fx-tabs button[aria-selected="true"]{background:var(--btn);border-color:var(--btn);color:var(--on-rubric);box-shadow:0 10px 20px -12px color-mix(in srgb,var(--btn) 90%,transparent)} .fx-feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 44px;align-items:center;margin-bottom:64px} .fx-feat.rev .fx-txt{order:2} .fx-feat.wide{grid-template-columns:minmax(0,1fr);gap:18px} .fx-txt{display:grid;gap:12px;align-content:start} .fx-txt h2{font:700 clamp(24px,2.3vw,31px)/1.5 var(--display);color:var(--rubric)} .fx-txt > p{font-size:16.5px;line-height:1.9;max-width:52em} .fx-feat.wide .fx-txt{max-width:56em} .fx-note{background:color-mix(in srgb,var(--gold) 14%,transparent);border-inline-start:3px solid var(--gold);padding:10px 14px;border-radius:0 8px 8px 0;font-size:15.5px !important} .fx-note b{color:var(--rubric)} .fx-note em{font-style:normal;font-weight:700;text-decoration:underline 1.5px var(--gold);text-underline-offset:5px} .ticks{display:grid;gap:7px;font-size:15.5px;line-height:1.7} .ticks.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 24px} .ticks li,.fx-gem li{position:relative;padding-inline-start:22px} .ticks li::before,.fx-gem li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)} .fx-ol{counter-reset:o;display:grid;gap:10px;font-size:15.5px;line-height:1.8} .fx-ol li{counter-increment:o;position:relative;padding-inline-start:40px} .fx-ol li::before{content:counter(o,arabic-indic);position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--btn);color:var(--on-rubric);font-weight:700;font-size:14px} .fx-demo{position:relative;background:var(--vellum);border-radius:var(--r-l);padding:22px;min-width:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)} .wq.night .fx-demo.onpaper{background:var(--p-vellum)} .fx-demo .seg{background:var(--p-white,#fff)} .fx-demo .seg > button{padding:6px 13px;font-size:13.5px;background:var(--p-white,#fff);color:var(--p-ink)} .fx-demo .seg > .on{background:var(--p-btn);color:var(--p-on)} .fx-demo .tbtn{background:var(--p-white,#fff);color:var(--p-ink);border-color:var(--p-line)} .fx-demo .switch{color:var(--p-ink);font-size:14px} .fx-demo .switch u::after{background:var(--p-white,#fff)} .fx-demo .muted{color:var(--p-muted)} /* السِّراج: ما حول الأمثلة (الأزرار واللوحات والخلفيات) يتبع الليل كما في البرنامج، والورقُ (الصفحات والأغلفة) يبقى ورقاً */ .wq.night .fx-demo{--p-paper:#0F1A2B;--p-vellum:#16243B;--p-sheet:#1A2A44;--p-ink:#EDE3CB;--p-rubric:#E2C27A;--p-rubric-d:#F0D79C;--p-gold:#D6B36A;--p-gold-d:#D6B36A;--p-line:#2C3E5C;--p-muted:#A9B4C6;--p-btn:#E2C27A;--p-btn-d:#F0D79C;--p-on:#0F1A2B;--p-white:#1A2A44;--sh-1:0 12px 26px -16px #000;--sh-2:0 24px 50px -24px #000;color-scheme:dark} .wq.night .fx-demo.onpaper{background:#13203A;box-shadow:inset 0 0 0 1px #24375A} .wq.night :is(.fx-paper,.mz,.tn-sheet,.ow-page,.ed-sheet,.vs-page,.pt-pg,.ai-sheet,.rs-page,.ls-page,.ru-list li,.mu-pg,.cv-canvas,.sw2-book){--p-paper:#FBF8F1;--p-vellum:#F3EFE6;--p-sheet:#FFFDF8;--p-ink:#2A1D14;--p-rubric:#6B1D2F;--p-gold:#C5A059;--p-gold-d:#8A6727;--p-line:#E4DCCB;--p-muted:#6C5949;--p-btn:#6B1D2F;--p-on:#fff;--p-white:#fff;color-scheme:light} /* الورق تحت السِّراج: أدفأ قليلاً وأخفّ وهجاً */ .wq.night :is(.mz,.tn-sheet,.ow-page,.ed-sheet,.vs-page,.pt-pg,.ai-sheet,.rs-page,.ls-page,.mu-pg){filter:brightness(.94) sepia(.08)} .fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:44px} .fx-mini{display:grid;gap:8px;align-content:start;padding:20px 20px 22px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-l);transition:border-color .25s,transform .25s var(--pen),box-shadow .25s} .fx-mini:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh-1)} .fx-mini h3{display:flex;align-items:center;gap:10px;font:700 19px/1.5 var(--display);color:var(--ink)} .fx-mini h3::before{content:"";width:8px;height:8px;flex:none;background:var(--gold);transform:rotate(45deg)} .fx-mini p{font-size:14.5px;line-height:1.8;color:var(--muted)} .fx-mini p b{color:var(--ink)} .fx-gem{position:relative;margin-bottom:40px;padding:26px 28px 24px;border-radius:var(--r-l);background:var(--band);color:var(--band-ink);overflow:hidden} .fx-gem::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:150px;height:150px;border:1.5px solid color-mix(in srgb,var(--gold) 50%,transparent);transform:rotate(45deg);pointer-events:none} .fx-gem-h{display:block;font:700 22px/1.5 var(--display);color:var(--gold);margin-bottom:12px} .fx-gem ul{display:grid;gap:10px;font-size:15px;line-height:1.85} .fx-gem b{color:#fff} .wq.night .fx-gem b{color:var(--gold)} .fx-cta{text-align:center;margin-bottom:30px} .fx-soon{display:grid;justify-items:center;gap:14px;padding:70px 20px;background:var(--vellum);border-radius:var(--r-l);border:1px dashed var(--gold);font-size:17px;color:var(--muted)} .fx-soon .spin i{width:10px;height:10px} .fx-pn{display:flex;justify-content:space-between;gap:16px;max-width:1180px;margin:20px auto 0;padding-top:26px;border-top:1px solid var(--line)} .fx-pn a{display:grid;gap:2px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;min-width:180px;background:var(--sheet);transition:border-color .2s} .fx-pn a:hover{border-color:var(--gold-d)} .fx-pn a small{font-size:12.5px;color:var(--muted)} .fx-pn a b{font:700 20px/1.4 var(--display);color:var(--rubric)} .fx-pn a.nx{text-align:end;margin-inline-start:auto} /* ===== الخزانة: منقولة من البرنامج (khizana.css) — خزانة خشبية، وكعوب جلدية بأعصاب مذهّبة ورقعة عنوان، أو كعب الغلاف نفسه ===== */ .kx{--wood:#7A4A2A;--wood-d:#4A2B16;--wood-l:#A0703F;--wood-back:#3A2313;--brass-1:#F4DFA0;--brass-2:#C9A24E;--brass-3:#9C7630; --grain-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.012' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 0 0 0 0.7 -0.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"); --grain-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 0 0 0 0.7 -0.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"); --grain-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6 0.02' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.02 0 0 0 0 0.0 0 0 0 0.6 -0.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"); --leather:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"); display:grid;gap:22px;padding:22px;overflow:hidden;font-size:14px;line-height:1.6} .wq.night .kx{--wood:#5A3720;--wood-d:#2E1B0D;--wood-l:#7A5230;--wood-back:#22150B} .kx-sec{display:grid;min-width:0} .kx-lbl{margin:0 0 10px;font:800 12.5px var(--ui);color:var(--gold-d);letter-spacing:.03em;display:flex;align-items:center;gap:9px} .kx-lbl::before{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg)} .kx-shead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .kx-shead .kx-lbl{margin:0} .kx-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .kx-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--sheet)} .kx-seg button{display:inline-flex;align-items:center;gap:6px;font:700 12.5px/1.5 var(--ui);padding:4px 12px;border:0;border-inline-start:1px solid var(--line);background:none;color:var(--ink);cursor:pointer} .kx-seg button:first-child{border-inline-start:0} .kx-seg button[aria-pressed="true"]{background:var(--btn);color:var(--on-rubric)} .kx-seg[hidden]{display:none} .kx-seg-label i{display:inline-block;width:18px;border-radius:1.5px;background:linear-gradient(var(--brass-1),var(--brass-3));box-shadow:0 0 0 1px rgba(0,0,0,.15)} .kx-seg-label .li-plate{height:5px} .kx-seg-label .li-card{height:11px;background:linear-gradient(#FFFBF0,#F1E6CC);box-shadow:0 0 0 2px var(--brass-2)} .kx-seg-look i{display:inline-block;width:6px;height:14px;border-radius:1.5px} .kx-seg-look .lk-real{background:linear-gradient(#7a1f2b 0 22%,#e3c77e 22% 26%,#1d1d1f 26% 74%,#e3c77e 74% 78%,#7a1f2b 78%)} .kx-seg-look .lk-leather{background:linear-gradient(#e3c77e 0 1px,transparent 1px 3px,#e3c77e 3px 4px,#17110d 4px 10px,#e3c77e 10px 11px,transparent 11px),#6A1F2B} .kx-tl{font:700 13px var(--ui);color:var(--rubric);background:none;border:0;padding:2px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--rubric) 40%,transparent)} .kx-tl[hidden]{display:none} /* على المنضدة: بطاقة الكتاب، وبطاقات النسّاخ، وخانة الإفلات */ .kx-desk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .kx-card{position:relative;display:grid;gap:6px;align-content:start;min-width:0;padding:12px 14px;border:1px solid var(--line);background:var(--sheet);border-radius:9px;text-align:start;font:inherit;color:inherit} button.kx-card{cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s var(--pen)} button.kx-card:hover{border-color:var(--gold);box-shadow:0 10px 22px -16px rgba(42,29,20,.5);transform:translateY(-1px)} .kx-card > b{font:700 19px/1.4 var(--display);color:var(--rubric);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kx-card .row{display:flex;align-items:center;gap:10px;min-width:0} .kx-card .meta{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kx-card .cf{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)} .kx-card .tl{font:700 12.5px var(--ui);color:var(--muted);background:none;border:0;padding:0;cursor:pointer} .kx-card .tl:hover{color:var(--err)} .kx-card.waiting{opacity:.85} .steps5{display:flex;gap:5px;flex:none} .steps5 i{width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--gold)} .steps5 i.f{background:var(--gold)} .kx-prog{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:2px} .kx-prog i{display:block;height:100%;background:var(--gold);transition:width .6s var(--pen)} .kx-card.drop{border:1.5px dashed var(--gold);background:transparent;place-content:center;justify-items:center;text-align:center;min-height:104px} .kx-card.drop > b{font:700 14px var(--ui);color:var(--ink);white-space:normal} /* الخزانة الخشبية */ .kx .cab-tabs{display:flex;align-items:flex-end;gap:6px;padding-inline:18px;margin:14px 0 -2px;position:relative;z-index:3;flex-wrap:wrap} .cab-tab{display:inline-flex;align-items:baseline;gap:8px;padding:6px 16px 5px;border:0;border-radius:8px 8px 0 0;cursor:pointer;font:700 13px/1.4 var(--ui);color:#EADBB5; background:var(--grain-h) 0 0/480px 64px,linear-gradient(color-mix(in srgb,var(--wood-l) 70%,#000),color-mix(in srgb,var(--wood) 80%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);opacity:.82;transition:opacity .2s,transform .2s} .cab-tab small{font:700 11px var(--ui);color:var(--brass-1);opacity:.85} .cab-tab:hover{opacity:1;transform:translateY(-1px)} .cab-tab[aria-selected="true"]{opacity:1;padding-bottom:8px;color:#3A2509;background:var(--grain-h) 0 0/480px 64px,linear-gradient(var(--wood-l),var(--wood))} .cab-tab[aria-selected="true"] span{padding:0 10px;border-radius:2px;background:linear-gradient(var(--brass-1),var(--brass-2) 55%,var(--brass-3));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.5);text-shadow:0 1px 0 rgba(255,255,255,.45)} .cab-tab[aria-selected="true"] small{color:#F4E7C4} .cab-tab.add{background:none;box-shadow:none;border:1.5px dashed var(--gold);color:var(--gold-d);opacity:1;padding:4px 12px;border-bottom:0} .cab-tab.drop-on{outline:2px solid var(--brass-1);outline-offset:2px;opacity:1} .kx .cabinet{position:relative;filter:drop-shadow(0 24px 22px rgba(42,29,20,.32))} .wq.night .kx .cabinet{filter:drop-shadow(0 24px 26px rgba(0,0,0,.6))} .kx .crown{position:relative;z-index:2;height:32px;margin-inline:-9px;border-radius:5px 5px 1px 1px;display:grid;place-items:center; background:var(--grain-h) 0 0/480px 64px,linear-gradient(var(--wood-l) 0,var(--wood) 26%,var(--wood-d) 28%,var(--wood) 34%,var(--wood-l) 58%,var(--wood) 82%,var(--wood-d) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.4),0 4px 5px -1px rgba(0,0,0,.45)} .kx .crown::before,.kx .crown::after{content:"";position:absolute;inset-inline:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(227,199,126,.75) 8%,rgba(227,199,126,.75) 92%,transparent)} .kx .crown::before{top:9px;opacity:.55} .kx .crown::after{bottom:5px} .kx .plaque,.grp-plate{position:relative;z-index:1;font:700 11px/1.7 var(--ui);letter-spacing:.02em;color:#3A2509;padding:0 16px;border:0;border-radius:2px;white-space:nowrap; background:linear-gradient(var(--brass-1),var(--brass-2) 55%,var(--brass-3));text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.55)} .kx .plaque::before,.kx .plaque::after,.grp-plate::before,.grp-plate::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6d4,#8a6a2c 70%)} .kx .plaque::before,.grp-plate::before{inset-inline-start:5px} .kx .plaque::after,.grp-plate::after{inset-inline-end:5px} .grp-plate{max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;cursor:default} .kx .carcass{position:relative;padding:0 16px; background:var(--grain-v) left top/16px 480px repeat-y,var(--grain-v) right top/16px 480px repeat-y, linear-gradient(90deg,var(--wood-d),var(--wood-l) 35%,var(--wood) 70%,var(--wood-d)) left top/16px 100% no-repeat, linear-gradient(270deg,var(--wood-d),var(--wood-l) 35%,var(--wood) 70%,var(--wood-d)) right top/16px 100% no-repeat,var(--wood-back)} .kx .cell{position:relative;display:flex;align-items:flex-end;gap:3px;min-height:206px;padding:24px 18px 0; background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.2) 24px,transparent 64px), linear-gradient(90deg,rgba(0,0,0,.42),transparent 28px,transparent calc(100% - 28px),rgba(0,0,0,.42)), radial-gradient(ellipse 70% 80% at 50% 100%,rgba(255,214,160,.07),transparent 70%), repeating-linear-gradient(90deg,rgba(0,0,0,.32) 0 1px,rgba(255,255,255,.045) 1px 2px,transparent 2px 96px), var(--grain-b) 0 0/240px 480px,var(--wood-back)} .wq.night .kx .cell::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 120% at 50% -20%,rgba(255,190,110,.2),transparent 70%)} .kx .plank{position:relative;z-index:2;height:17px; background:var(--grain-h) 0 0/480px 64px,linear-gradient(color-mix(in srgb,var(--wood-l) 80%,#fff) 0,var(--wood-l) 4px,rgba(255,255,255,.3) 5px,var(--wood-l) 6px,var(--wood) 11px,var(--wood-d) 17px); box-shadow:0 5px 7px -3px rgba(0,0,0,.6)} .kx .plinth{position:relative;z-index:2;height:24px;margin-inline:-5px;border-radius:0 0 4px 4px; background:var(--grain-h) 0 0/480px 64px,linear-gradient(var(--wood-d),var(--wood) 22%,var(--wood-l) 48%,var(--wood) 70%,var(--wood-d));box-shadow:inset 0 2px 2px rgba(0,0,0,.3)} .kx .plinth::after{content:"";position:absolute;inset-inline:14px;top:9px;height:1px;background:rgba(0,0,0,.3);box-shadow:0 1px 0 rgba(255,255,255,.1)} .kx .band{display:flex;align-items:stretch;min-width:0} .kx .bay{display:flex;flex-direction:column;min-width:0} .kx .bay:nth-of-type(2n+1){--wood-back:color-mix(in srgb,#3A2313 86%,#7a5236)} .wq.night .kx .bay:nth-of-type(2n+1){--wood-back:color-mix(in srgb,#22150B 84%,#4b3220)} .kx .bay > .cell{flex:1 0 auto} .kx .post{flex:0 0 14px;position:relative;z-index:2;background:var(--grain-v) 0 0/14px 480px repeat-y,linear-gradient(90deg,var(--wood-d),var(--wood-l) 38%,var(--wood) 70%,var(--wood-d));box-shadow:3px 0 6px -2px rgba(0,0,0,.55),-3px 0 6px -2px rgba(0,0,0,.55)} .kx .bay-cap{display:flex;justify-content:center;padding:10px 12px 0;position:relative;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.22)),var(--grain-b) 0 0/240px 480px,var(--wood-back)} .kx .bay-cap + .cell{padding-top:14px} .card-holder{position:relative;display:grid;place-items:center;min-width:120px;max-width:100%;padding:4px;border:0;border-radius:3px;cursor:default;font:inherit; background:linear-gradient(160deg,var(--brass-1),var(--brass-2) 45%,var(--brass-3) 75%,#E0C27A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 3px 6px -1px rgba(0,0,0,.6)} .card-holder::before,.card-holder::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6d4,#7a5c22 70%)} .card-holder::before{inset-inline-start:-2px} .card-holder::after{inset-inline-end:-2px} .card-holder .cardtext{display:grid;justify-items:center;padding:2px 16px 3px;min-width:100%;border-radius:1px;background:linear-gradient(#FFFBF0,#F1E6CC);box-shadow:inset 0 1px 3px rgba(0,0,0,.25)} .card-holder b{font:700 15px/1.35 var(--display);color:#4A1622;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px} .card-holder small{font:700 10.5px/1.3 var(--ui);color:#8A6727} .kx .bay-rail{position:relative;z-index:2;height:24px;display:grid;place-items:center; background:var(--grain-h) 0 0/480px 64px,linear-gradient(var(--wood-d) 0,var(--wood) 18%,var(--wood-l) 50%,var(--wood) 80%,var(--wood-d) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.45),0 4px 6px -2px rgba(0,0,0,.55)} .kx .bay-rail::after{content:"";position:absolute;inset-inline:10px;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,rgba(227,199,126,.55) 10%,rgba(227,199,126,.55) 90%,transparent)} .kx .bay-rail + .cell{padding-top:18px} .kx .band.plated .cell{min-height:196px} .kx .bay-empty{align-self:center;margin:0 auto 30px;color:#EADBB5;font-size:12.5px;padding:10px 14px;border:1.5px dashed rgba(244,231,196,.4);border-radius:8px} .kx .bay.drop-on > .cell{box-shadow:inset 0 0 0 2px var(--brass-1),inset 0 0 30px rgba(243,217,160,.18)} .kx .bookend{position:relative;z-index:0;flex:none;width:9px;height:86px;margin-inline-start:4px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#6f531c,var(--brass-1) 38%,var(--brass-2) 62%,#7d5f24);box-shadow:-3px 0 5px -1px rgba(0,0,0,.55)} .kx .bookend::after{content:"";position:absolute;bottom:0;right:-10px;width:19px;height:3px;background:linear-gradient(var(--brass-1),var(--brass-3));border-radius:1px} .kx .brass{display:grid;justify-items:center;gap:4px;margin:auto;padding:16px 30px 18px;text-align:center;color:#3A2509;border-radius:4px;background:linear-gradient(160deg,var(--brass-1),#D6B263 40%,var(--brass-3) 72%,#DDBD72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 0 4px rgba(110,78,24,.3),inset 0 0 0 5px rgba(255,255,255,.25),0 8px 14px -6px rgba(0,0,0,.7)} .kx .brass b{font:700 21px/1.4 var(--display);color:#33200A} .kx .brass span{font-size:12.5px} .kx .cell.center{justify-content:center;align-items:center;padding-bottom:16px} /* المجلّد: جلدٌ مدوَّر الكعب، وأعصابٌ بارزة بين خطوط مذهّبة، ورقعةُ عنوان، ورقمُ المجلد في دائرة */ .ksp{--c:#6A1F2B;--lab:#17110D;--g:#E3C77E;position:relative;z-index:1;flex:none;padding:0;border:0;cursor:pointer;border-radius:3px 3px 2px 2px;color:var(--g); background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.2) 7%,rgba(255,255,255,.2) 21%,rgba(255,255,255,.07) 36%,transparent 56%,rgba(0,0,0,.14) 80%,rgba(0,0,0,.52) 100%),var(--leather) 0 0/120px 120px,var(--c); box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.35),3px 0 5px -2px rgba(0,0,0,.6);transition:transform .25s var(--pen),box-shadow .25s,filter .2s,margin .14s} .ksp::before,.ksp::after{content:"";position:absolute;inset-inline:0;height:18px;pointer-events:none;opacity:.92; background:linear-gradient(var(--g),var(--g)) 0 0/100% 1px no-repeat,linear-gradient(rgba(0,0,0,.4),rgba(255,255,255,.26) 45%,rgba(0,0,0,.4)) 0 3px/100% 5px no-repeat,linear-gradient(var(--g),var(--g)) 0 10px/100% 1px no-repeat,linear-gradient(rgba(0,0,0,.4),rgba(255,255,255,.26) 45%,rgba(0,0,0,.4)) 0 13px/100% 5px no-repeat} .ksp::before{top:7px} .ksp::after{bottom:7px;transform:scaleY(-1)} .ksp .lab{position:absolute;top:31px;bottom:31px;inset-inline:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1px; background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.08) 30%,transparent 60%,rgba(0,0,0,.35)),var(--lab); box-shadow:inset 0 0 0 1px rgba(227,199,126,.8),inset 0 0 0 3px var(--lab),inset 0 0 0 3.6px rgba(227,199,126,.5),0 1px 2px rgba(0,0,0,.45)} .ksp:has(.no) .lab{bottom:55px} .ksp .lab span{writing-mode:vertical-rl;max-height:calc(100% - 10px);overflow:hidden;white-space:nowrap;font:700 13px/1.2 "Amiri",var(--display);color:#E8CD86;text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 5px rgba(232,205,134,.28)} .ksp .lab span.one{text-overflow:ellipsis} .ksp.thin .lab{inset-inline:3px} .ksp.thin .lab span{font-size:12px} .ksp .no{position:absolute;bottom:31px;left:50%;width:19px;height:19px;margin-left:-9.5px;border-radius:50%;display:grid;place-items:center;font:700 10.5px/1 var(--ui);font-style:normal;color:var(--g);background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px var(--g),0 1px 0 rgba(255,255,255,.12)} .ksp:hover,.ksp:focus-visible,.ksp.on{transform:translateY(-11px);filter:brightness(1.08);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.35),3px 0 5px -2px rgba(0,0,0,.6),0 14px 14px -8px rgba(0,0,0,.7)} .ksp:focus-visible{outline:2px solid var(--brass-1);outline-offset:2px} .ksp.on{transform:translateY(-15px)} .ksp.real{background:#15191A;overflow:hidden} .ksp.real::before,.ksp.real::after{display:none} .ksp.real .rsp{position:absolute;inset:0} .ksp.real::selection{background:none} .ksp.nb{border-radius:9px} .ksp.nb::before,.ksp.nb::after{height:2px;inset-inline:5px;opacity:.6;background:repeating-linear-gradient(90deg,var(--g) 0 3px,transparent 3px 6px)} .ksp.nb::before{top:12px} .ksp.nb::after{bottom:12px} .ksp.nb .lab{top:22px;bottom:22px;inset-inline:5px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(227,199,126,.55),0 1px 2px rgba(0,0,0,.4)} .ksp.ins-before{margin-inline-start:16px;box-shadow:9px 0 0 -2px var(--brass-1)} .ksp.ins-after{margin-inline-end:16px;box-shadow:-9px 0 0 -2px var(--brass-1)} .ksp.dragging{opacity:.35} @keyframes kz-moved{0%{transform:translateY(-16px);filter:brightness(1.35)}100%{transform:none;filter:none}} .ksp.moved:not(.on){animation:kz-moved .7s ease-out} /* الكعب المصمَّم («شرح رياض الصالحين»): قطعٌ من صورته تكبر وتصغر بنسبتها فلا تُمطّ كتابته، وبينها جلدٌ أسود بخطّيه المذهّبين */ .rsp{--w:40px;display:flex;flex-direction:column;align-items:center;height:100%;background:linear-gradient(90deg,transparent 7.6%,#B5A077 7.6% 8.8%,transparent 8.8% 11.2%,#977F5F 11.2% 12%,transparent 12% 88%,#9a8452 88% 88.8%,transparent 88.8% 91.6%,#B49A6F 91.6% 92.4%,transparent 92.4%),#15191A} .rsp > i{display:block;flex:none;background-image:url(/img/features/spine-riyad.webp);background-repeat:no-repeat} .rsp > u{display:block;flex:1 1 0;min-height:0;text-decoration:none} /* لوحة الكتاب: تنزلق من جانب الخزانة كما في البرنامج */ .kx-panel{position:absolute;top:0;bottom:0;inset-inline-end:0;z-index:20;width:min(340px,94%);overflow-y:auto;display:grid;gap:10px;align-content:start;padding:22px 20px 18px;background:var(--sheet);border-inline-start:1px solid var(--line);box-shadow:0 0 40px -10px rgba(0,0,0,.35);animation:kx-in .25s var(--pen)} @keyframes kx-in{from{transform:translateX(-24px);opacity:0}} .kx-panel .x{position:absolute;top:10px;inset-inline-start:10px;width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;border-radius:6px} .kx-panel .x:hover{background:var(--vellum);color:var(--ink)} .kx-panel .cover{width:120px;aspect-ratio:17/24;justify-self:center;border-radius:2px 5px 5px 2px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.06) 12%,transparent 30%),var(--leather) 0 0/120px 120px,var(--c,#6A1F2B);box-shadow:0 12px 24px -10px rgba(0,0,0,.55),inset 7px 0 0 rgba(0,0,0,.2)} .kx-panel .cover img{width:100%;height:100%;object-fit:cover;display:block} .kx-panel .ct{font:700 16px/1.5 var(--display);padding:12px;text-align:center;color:#E8CD86} .kx-panel h4{margin:4px 0 0;font:700 21px/1.4 var(--display);color:var(--rubric);text-align:center} .kx-panel .pa{margin:0;text-align:center;color:var(--ink);font-size:13.5px} .kx-panel .pm{margin:0;text-align:center;color:var(--muted);font-size:12.5px} .kx-panel .vols{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--line)} .kx-panel .vols li{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px} .kx-panel .vols small{color:var(--muted);font-size:12px} .kx-panel .acts{grid-row:span 2;display:flex;gap:4px} .kx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 12.5px var(--ui);border-radius:7px;padding:4px 11px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);cursor:pointer;white-space:nowrap} .kx-btn:hover{border-color:var(--gold)} .kx-btn.pri{background:var(--btn);border-color:var(--btn);color:var(--on-rubric)} .kx-panel .place{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper)} .kx-panel .place label,.kx-panel .ord{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)} .kx-panel .place select,.kx-panel .place input{font:13.5px var(--ui);padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--sheet);color:var(--ink);min-width:0} .kx-panel .ord-row{display:flex;align-items:center;gap:2px} .kx-panel .ord-row button{min-width:28px;padding:3px 6px;font-size:15px;line-height:1;border:1px solid var(--line);border-radius:7px;background:var(--sheet);color:var(--ink);cursor:pointer} .kx-panel .ord-row button:disabled{opacity:.35;cursor:default} .kx-panel .ord-pos{flex:1;text-align:center;font:600 12.5px var(--ui);color:var(--ink)} .kx-panel .pacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .kx-panel .say{min-height:1.5em;margin:0;font-size:12.5px;font-weight:700;color:var(--gold-d)} .kx-ask{position:absolute;inset:0;z-index:25;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--ink) 30%,transparent);backdrop-filter:blur(2px)} .kx-ask > div{width:min(340px,100%);display:grid;gap:10px;padding:18px 20px;border-radius:12px;background:var(--sheet);border:1px solid var(--line);box-shadow:0 30px 70px -20px rgba(0,0,0,.5)} .kx-ask b{font:700 20px/1.3 var(--display);color:var(--rubric)} .kx-ask input{font:15px var(--ui);padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)} .kx-ask .row{display:flex;justify-content:flex-end;gap:8px} /* ===== المنضدة: البحث في المصادر ===== */ .sr{display:grid;gap:10px;align-content:start;min-height:380px} .sr-box{display:flex;gap:8px;background:var(--p-white,#fff);border:1.5px solid var(--p-gold);border-radius:12px;padding:6px 6px 6px 6px;box-shadow:0 0 0 4px color-mix(in srgb,var(--p-gold) 18%,transparent)} .sr-box input{flex:1;min-width:0;border:0;background:none;font:400 18px/1.6 var(--display);padding:4px 10px;color:var(--p-ink);outline:none} .sr-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--p-muted)} .sr-try button{font:700 13px/1 var(--ui);padding:6px 12px;border-radius:999px;border:1px dashed var(--p-gold-d);background:none;color:var(--p-rubric);cursor:pointer} .sr-src{display:flex;flex-wrap:wrap;gap:6px} .sr-src button{display:inline-flex;align-items:center;gap:6px;font:700 12.5px/1 var(--ui);padding:6px 10px;border-radius:999px;border:1px solid var(--p-line);background:var(--p-white,#fff);color:var(--p-muted);cursor:pointer} .sr-src button i{width:8px;height:8px;transform:rotate(45deg);background:var(--c)} .sr-src button.on{color:var(--p-ink);border-color:var(--c)} .sr-src button:not(.on) i{background:none;box-shadow:inset 0 0 0 1.5px var(--c)} .sr-st{font-size:13.5px;color:var(--p-muted);min-height:1.5em} .sr-res{display:grid;gap:6px} .sr-res li{animation:fx-in .3s var(--pen) both} .sr-res button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center;width:100%;text-align:start;padding:9px 12px;background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:10px;cursor:pointer;color:var(--p-ink);transition:border-color .2s} .sr-res button:hover{border-color:var(--p-gold-d)} .sr-res .ic{grid-row:span 2;width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,var(--c) 14%,var(--p-white,#fff));color:var(--c)} .sr-res .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7} .sr-res b{font:700 17px/1.4 var(--display);color:var(--p-rubric)} .sr-res small{grid-column:2;font-size:12.5px;color:var(--p-muted)} .sr-res em{grid-row:1 / span 2;grid-column:3;font-style:normal;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;color:var(--c);border:1px solid var(--c)} .sr-vols{display:flex;flex-wrap:wrap;gap:5px;padding:10px;background:var(--p-white,#fff);border:1px solid var(--p-gold);border-radius:10px;animation:fx-in .3s both} .sr-vols b{width:100%;font:700 15px var(--display);color:var(--p-rubric)} .sr-vols span{font-size:12px;padding:4px 9px;border-radius:6px;background:var(--p-vellum);border:1px solid var(--p-line)} /* التقسيم */ .sp{display:grid;gap:14px;justify-items:center;text-align:center} .sp-cap{font-size:14px;color:var(--p-muted)} .sp-cap b{font-family:var(--display);font-size:18px;color:var(--p-rubric)} .sp-seg{justify-content:center} .sp-n{display:grid;gap:4px;font-size:14px;width:min(100%,300px)} .sp-n input{accent-color:var(--p-btn)} /* مجلدات الكتاب على المنضدة (كما في البرنامج: #volList): خزانة خشبية، وكعبٌ لكل مجلد بسماكة صفحاته، ورقمه، وعدد صفحاته على رقعة */ .sp-say{font-size:14px;line-height:1.7;color:var(--p-ink);max-width:30em;min-height:3.4em} .sp-count{font-size:13.5px;color:var(--p-muted);min-height:1.5em} .sp-shelves{--wood:#9A6534;--wood-l:#BF8A50;--wood-d:#6B4220;--wood-back:#44291A;display:grid;width:fit-content;max-width:100%;padding:0 14px;border-top:13px solid var(--wood);border-image:linear-gradient(var(--wood-l),var(--wood) 55%,var(--wood-d)) 1;border-image-width:13px 0 0 0;border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--wood-d),var(--wood-l) 45%,var(--wood)) left top/14px 100% no-repeat,linear-gradient(270deg,var(--wood-d),var(--wood-l) 45%,var(--wood)) right top/14px 100% no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 1px,rgba(255,255,255,.02) 1px 7px,rgba(0,0,0,.05) 7px 8px,transparent 8px 19px),var(--wood-back); box-shadow:0 22px 26px -20px rgba(42,29,20,.75)} .wq.night .sp-shelves{box-shadow:0 22px 26px -20px #000} .sp-shelves .vshelf{position:relative;display:flex;align-items:flex-end;gap:5px;padding:26px 12px 15px;box-shadow:inset 0 14px 14px -10px rgba(0,0,0,.55)} .sp-shelves .vshelf::after{content:"";position:absolute;inset-inline:0;bottom:0;height:15px;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0) 22%,rgba(0,0,0,0) 60%,rgba(0,0,0,.3)),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 23px,rgba(255,255,255,.06) 23px 25px,transparent 25px 61px),linear-gradient(var(--wood-l),var(--wood) 50%,var(--wood-d));box-shadow:0 -3px 6px -2px rgba(0,0,0,.5)} .vspine{position:relative;z-index:1;flex:none;height:198px;padding:13px 0;border:0;border-radius:2px 2px 1px 1px;cursor:pointer;color:#E9D7A8;user-select:none; background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.1) 28%,rgba(0,0,0,0) 55%,rgba(0,0,0,.3)),var(--sp,#6B1D2F);box-shadow:2px 0 3px -1px rgba(0,0,0,.45); display:grid;align-content:space-between;justify-items:center;transition:transform .3s var(--stamp),filter .3s;animation:sp-in .4s var(--stamp) both} .vspine::before,.vspine::after{content:"";width:100%;border-block:1px solid currentColor;height:6px;opacity:.75} .vspine b{font:700 25px/1 var(--display)} .vspine small{display:grid;justify-items:center;gap:1px;font:700 14px/1.05 var(--ui);color:#2A1D14;background:linear-gradient(#F3E6C4,#E2CE9C);border-radius:2px;padding:3px 3px 2px;min-width:calc(100% - 8px);box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(107,66,32,.35)} .vspine small i{font-style:normal;font-size:9.5px;font-weight:600;opacity:.8} .vspine em{font:700 10.5px/1.3 var(--ui);font-style:normal;writing-mode:vertical-rl;max-height:70px;overflow:hidden;opacity:.9} .vspine.slim b{font-size:20px} .vspine.slim small{font-size:12.5px;padding-inline:1px} .vspine.slim small i{font-size:8px} .vspine.sel{transform:translateY(-14px)} .vspine:hover{transform:translateY(-7px)} .vspine.sel:hover{transform:translateY(-17px)} .vspine.off{filter:grayscale(.9) brightness(1.25) opacity(.45)} .sp-shelves.narrow .vspine{height:150px;padding-block:10px} .sp-shelves.narrow .vspine b{font-size:20px} .sp-shelves.narrow .vspine small{font-size:12px} @keyframes sp-in{from{opacity:0;transform:translateY(16px)}to{opacity:1}} /* ===== صفحة بأسلوب «المذهّب»: زخارف بطاقته نفسها (public/img/features/mudh) ومقاساتها بالمليمتر (صفحة ١٧×٢٤ سم) ===== .mzw حاوية تُقاس بعرضها، و ‎--mm‎ مليمترٌ من الصفحة. الصفحة يسرى (pg-l) أو يمنى (pg-r): الهامش الخارجي في طرف الكتاب، لا عند الكعب */ .mzw{container-type:inline-size;width:100%} .mz{--mm:calc(100cqw / 170);--tl:21;--tr:21;--mt:27;--mb:26;--lap:#1B3768;--lapd:#11254A;--gld:#B8913F;--cream:#FBF4E2;--pp:#FFFDF8;--ink:#1C1915;--matn:#9A2A1E;--qur:#1E5A44;--h1:#1B3768;--h2:#9A2A1E; --fb:"Adwa Assalaf","Amiri",serif;--fh:"Amiri","Adwa Assalaf",serif; position:relative;width:100%;aspect-ratio:170/240;background:var(--pp);color:var(--ink);overflow:hidden;font-family:var(--fb);transition:background-color .5s; box-shadow:0 26px 44px -24px rgba(42,29,20,.6),0 2px 6px rgba(42,29,20,.1)} .mz.pg-l{box-shadow:inset -14px 0 18px -14px rgba(60,40,20,.28),0 26px 44px -24px rgba(42,29,20,.6),0 2px 6px rgba(42,29,20,.1)} .mz.pg-r{--tl:21;--tr:21;box-shadow:inset 14px 0 18px -14px rgba(60,40,20,.28),0 26px 44px -24px rgba(42,29,20,.6),0 2px 6px rgba(42,29,20,.1)} .mz.pg-l.om{--tl:40} .mz.pg-r.om{--tr:40} .mz .jd{position:absolute;top:calc((var(--mt) - 8) * var(--mm));bottom:calc((var(--mb) - 9) * var(--mm));left:calc((var(--tl) - 8) * var(--mm));right:calc((var(--tr) - 8) * var(--mm));border:calc(.16 * var(--mm)) solid var(--lap);pointer-events:none;transition:left .5s var(--pen),right .5s var(--pen); background-image:url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/bandh.svg),url(/img/features/mudh/bandh.svg),url(/img/features/mudh/bandv.svg),url(/img/features/mudh/bandv.svg); background-position:left calc(1.2 * var(--mm)) top calc(1.2 * var(--mm)),right calc(1.2 * var(--mm)) top calc(1.2 * var(--mm)),left calc(1.2 * var(--mm)) bottom calc(1.2 * var(--mm)),right calc(1.2 * var(--mm)) bottom calc(1.2 * var(--mm)),center top calc(1.2 * var(--mm)),center bottom calc(1.2 * var(--mm)),left calc(1.2 * var(--mm)) center,right calc(1.2 * var(--mm)) center; background-size:calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(100% - 6 * var(--mm)) calc(1.8 * var(--mm)),calc(100% - 6 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(100% - 6 * var(--mm)),calc(1.8 * var(--mm)) calc(100% - 6 * var(--mm));background-repeat:no-repeat} .mz .jd::after{content:"";position:absolute;inset:calc(3.75 * var(--mm));border:calc(.14 * var(--mm)) solid var(--gld)} /* مسطرة الهامش: خطٌّ رفيع في الطرف الخارجي، يُخلي موضعه حين يُكتب في الهامش */ .mz .hmx{position:absolute;top:calc((var(--mt) - 8) * var(--mm));bottom:calc((var(--mb) - 9) * var(--mm));width:0;border-left:calc(.14 * var(--mm)) solid var(--lap);transition:opacity .3s} .mz.pg-l .hmx{left:calc((var(--tl) - 11.5) * var(--mm))} .mz.pg-r .hmx{right:calc((var(--tr) - 11.5) * var(--mm))} .mz.om .hmx{opacity:0} /* الترويسة: خرطوشة على الشريط العلوي للجدول */ .mz .rh{position:absolute;top:calc((var(--mt) - 9.1) * var(--mm));left:calc(var(--tl) * var(--mm));right:calc(var(--tr) * var(--mm));height:calc(6.4 * var(--mm));text-align:center;line-height:1;transition:left .5s var(--pen),right .5s var(--pen)} .mz .rhc{display:inline-flex;align-items:center;justify-content:center;position:relative;height:calc(6.4 * var(--mm));max-width:calc(96 * var(--mm));padding:0 calc(6 * var(--mm));background:var(--cream);border:calc(.18 * var(--mm)) solid var(--gld);border-radius:calc(3.2 * var(--mm)); box-shadow:0 0 0 calc(.55 * var(--mm)) var(--pp),0 0 0 calc(.8 * var(--mm)) var(--lap),0 0 0 calc(1.5 * var(--mm)) var(--pp)} .mz .rhc span{white-space:nowrap;font:700 calc(3.35 * var(--mm))/1.6 var(--fh);color:var(--h2)} .mz .rhc::before,.mz .rhc::after{content:"";position:absolute;top:50%;width:calc(1.5 * var(--mm));height:calc(1.5 * var(--mm));margin-top:calc(-.75 * var(--mm));background:var(--gld);transform:rotate(45deg)} .mz .rhc::before{right:calc(2.2 * var(--mm))}.mz .rhc::after{left:calc(2.2 * var(--mm))} /* رقم الصفحة: نجمة ثمانية في وسط الشريط السفلي، تحت النص دائماً (لا تتبع الهامش الواسع) */ .mz .folio{position:absolute;bottom:calc((var(--mb) - 12.5) * var(--mm));left:calc(var(--tl) * var(--mm));right:calc(var(--tr) * var(--mm));height:calc(11.2 * var(--mm));display:flex;justify-content:center;transition:left .5s var(--pen),right .5s var(--pen)} .mz .fo{display:inline-flex;align-items:center;justify-content:center;width:calc(11.2 * var(--mm));height:calc(11.2 * var(--mm));padding-top:calc(.5 * var(--mm));background:url(/img/features/mudh/fstar.svg) center/100% 100% no-repeat;color:var(--h1);font:700 calc(3.35 * var(--mm))/1 var(--fh)} /* منطقة النص */ .mz .tx{position:absolute;top:calc(var(--mt) * var(--mm));bottom:calc(var(--mb) * var(--mm));left:calc(var(--tl) * var(--mm));right:calc(var(--tr) * var(--mm));display:flex;flex-direction:column;font-size:calc(5.64 * var(--mm));line-height:1.9;transition:left .5s var(--pen),right .5s var(--pen)} .mz .tx p{margin:0;text-align:justify;text-indent:calc(5 * var(--mm))} .mz .tx p.ni{text-indent:0} .mz .m{color:var(--matn);font-weight:700;transition:color .4s} .mz .q{color:var(--qur)} .mz .qr{font-size:.82em} .mz .nb{transition:font-weight .3s} .mz.nbb .nb{font-weight:700} .mz sup{font-size:.6em;line-height:0;color:var(--h2);font-weight:700} /* السرلوح: رأس الباب — عُرفٌ من قباب، لوحٌ لازوردي منقوش، خرطوشةٌ فيها اسم الباب، وذؤابةٌ إلى ترنجةٍ في الهامش برقم الباب */ .mz .srl{position:relative;margin:calc(1.5 * var(--mm)) 0 calc(6.5 * var(--mm));line-height:1.5} .mz .srl-cr{display:block;height:calc(4.2 * var(--mm));margin:0 calc(1.6 * var(--mm)) calc(-.15 * var(--mm));background:url(/img/features/mudh/crestrow.svg) center bottom/100% calc(4.2 * var(--mm)) no-repeat} .mz .srl-p{position:relative;padding:calc(3.2 * var(--mm)) calc(11 * var(--mm));border:calc(.18 * var(--mm)) solid #2A1F14;background:url(/img/features/mudh/panel.svg) center/100% 100% no-repeat var(--lap); box-shadow:inset 0 0 0 calc(.9 * var(--mm)) var(--gld),inset 0 0 0 calc(1.1 * var(--mm)) #2A1F14,inset 0 0 0 calc(1.6 * var(--mm)) var(--lapd);transition:padding .5s var(--pen)} .mz .srl-c{position:relative;display:flex;align-items:center;justify-content:center;min-height:calc(11.5 * var(--mm));padding:calc(.4 * var(--mm)) calc(7 * var(--mm));background:var(--cream);border:calc(.2 * var(--mm)) solid var(--gld);border-radius:calc(7 * var(--mm));box-shadow:0 0 0 calc(.55 * var(--mm)) var(--lapd),0 0 0 calc(.85 * var(--mm)) var(--gld)} .mz .srl-t{font:700 calc(7.4 * var(--mm))/1.35 var(--fh);color:var(--h1);text-align:center} .mz .tp{position:absolute;top:50%;width:calc(4.2 * var(--mm));height:calc(8 * var(--mm));margin-top:calc(-4 * var(--mm));background:url(/img/features/mudh/tip.svg) center/100% 100% no-repeat} .mz .tpa{right:calc(100% + .5 * var(--mm))} .mz .tpb{left:calc(100% + .5 * var(--mm));transform:scaleX(-1)} .mz .srl-fin{position:absolute;top:50%;width:calc(11.5 * var(--mm));height:calc(5 * var(--mm));margin-top:calc(-2.5 * var(--mm));background:url(/img/features/mudh/fin.svg) center/100% 100% no-repeat;transition:opacity .3s} .mz .srl-md{position:absolute;top:50%;width:calc(12.6 * var(--mm));height:calc(12.6 * var(--mm));margin-top:calc(-6.3 * var(--mm));display:flex;align-items:center;justify-content:center;background:url(/img/features/mudh/medal.svg) center/100% 100% no-repeat;font-style:normal;transition:all .5s var(--pen)} .mz .srl-md b{font:700 calc(3 * var(--mm))/1 var(--fh);color:var(--h2);padding-top:calc(.4 * var(--mm))} .mz.pg-l .srl-fin{right:100%;transform:scaleX(-1)} .mz.pg-r .srl-fin{left:100%} .mz.pg-l .srl-md{right:calc(100% + 5.2 * var(--mm))} .mz.pg-r .srl-md{left:calc(100% + 5.2 * var(--mm))} /* الهامش الواسع: الترنجة برقم الباب داخل اللوح في طرفه الخارجي، فالهامش للكتابة */ .mz.om .srl-fin{opacity:0} .mz.om .srl-p{padding-left:calc(17 * var(--mm));padding-right:calc(17 * var(--mm))} .mz.om .srl-md{width:calc(10 * var(--mm));height:calc(10 * var(--mm));margin-top:calc(-5 * var(--mm))} .mz.pg-l.om .srl-md{right:calc(100% - 12.6 * var(--mm))} .mz.pg-r.om .srl-md{left:calc(100% - 12.6 * var(--mm))} /* الفصل بين ذراعين مذهّبتين، والعنوان الفرعي بوردة */ .mz .fs{display:flex;align-items:center;gap:calc(2.4 * var(--mm));margin:calc(3 * var(--mm)) 0 calc(2 * var(--mm));font:700 calc(6.4 * var(--mm))/1.5 var(--fh);color:var(--h2)} .mz .fs i{flex:1 1 0;min-width:calc(8 * var(--mm));height:calc(4.4 * var(--mm));background:url(/img/features/mudh/arm.svg) left center/auto 100% no-repeat} .mz .fs i:last-child{transform:scaleX(-1)} .mz .rose{display:inline-block;width:calc(3.6 * var(--mm));height:calc(3.6 * var(--mm));background:url(/img/features/mudh/rose.svg) center/contain no-repeat;vertical-align:-.1em} .mz .orn{height:calc(7 * var(--mm));margin:calc(1.5 * var(--mm)) 0;background:url(/img/features/mudh/tail.svg) center/contain no-repeat} /* الحواشي */ .mz .fns{margin-top:auto;font-size:calc(4.76 * var(--mm));line-height:1.65} .mz .fnsep{width:calc(42 * var(--mm));height:calc(2.4 * var(--mm));margin:0 0 calc(1.3 * var(--mm));background:url(/img/features/mudh/fnsep.svg) right center/calc(42 * var(--mm)) calc(2.4 * var(--mm)) no-repeat} .mz .fns p{margin:0;text-indent:0;display:flex;gap:calc(3 * var(--mm))} .mz .fns p > b:first-child{color:var(--h2);flex:none} /* خانة الهامش: على هيئة الجدول، ووردةٌ على حافتها التي تلي النص */ .mz .msn{position:absolute;width:calc((var(--tl) - 15.5) * var(--mm));left:calc(6.5 * var(--mm));padding:calc(3.4 * var(--mm)) calc(3.2 * var(--mm)) calc(3.1 * var(--mm));border:calc(.16 * var(--mm)) solid var(--lap);background-color:var(--cream); background-image:url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/bandh.svg),url(/img/features/mudh/bandh.svg),url(/img/features/mudh/bandv.svg),url(/img/features/mudh/bandv.svg); background-position:left calc(.9 * var(--mm)) top calc(.9 * var(--mm)),right calc(.9 * var(--mm)) top calc(.9 * var(--mm)),left calc(.9 * var(--mm)) bottom calc(.9 * var(--mm)),right calc(.9 * var(--mm)) bottom calc(.9 * var(--mm)),center top calc(.9 * var(--mm)),center bottom calc(.9 * var(--mm)),left calc(.9 * var(--mm)) center,right calc(.9 * var(--mm)) center; background-size:calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(100% - 5.4 * var(--mm)) calc(1.8 * var(--mm)),calc(100% - 5.4 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(100% - 5.4 * var(--mm)),calc(1.8 * var(--mm)) calc(100% - 5.4 * var(--mm));background-repeat:no-repeat; font:400 calc(3.7 * var(--mm))/1.6 var(--fb);color:#3A2A1C;text-align:center;opacity:0;transform:translateX(-6%);transition:opacity .45s .15s,transform .45s .15s var(--pen);pointer-events:none} .mz .msn::before{content:"";position:absolute;inset:calc(3 * var(--mm));border:calc(.14 * var(--mm)) solid var(--gld);pointer-events:none} .mz .msn::after{content:"";position:absolute;top:calc(50% - 1.9 * var(--mm));right:calc(-1.9 * var(--mm));width:calc(3.8 * var(--mm));height:calc(3.8 * var(--mm));background:url(/img/features/mudh/rose.svg) center/contain no-repeat} .mz .msn b{display:block;color:var(--h2);font-family:var(--fh)} .mz.om .msn{opacity:1;transform:none;pointer-events:auto} .mz .tq{position:absolute;bottom:calc((var(--mb) - 16.5) * var(--mm));left:calc((var(--tl) - 7) * var(--mm));font:400 calc(3.5 * var(--mm))/1.4 var(--fb);color:#6A5845;transform:rotate(-5deg);transform-origin:left center} /* التنضيد */ .tn{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:26px;align-items:center} .tn-ctl{display:grid;gap:12px} .tn-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center;font-size:14px;font-weight:700;color:var(--p-ink)} .tn-row .sw-row{gap:0} .tn-row .sw i{box-shadow:0 0 0 2px var(--p-vellum)} .tn-row .sw.on i{box-shadow:0 0 0 2px var(--p-vellum),0 0 0 4px var(--p-gold-d)} .tn-stage{display:grid;justify-items:center;gap:12px} .tn-stage .mzw{width:min(100%,480px)} .tn-hint{font-size:13.5px;line-height:1.8;color:var(--p-muted);background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:10px;padding:8px 12px} .tn-flash{animation:tn-flash 1.1s ease-out} @keyframes tn-flash{0%{background:color-mix(in srgb,#C5A059 50%,transparent)}100%{background:transparent}} /* الأبحاث */ .rs{display:grid;gap:16px;justify-items:center} .rs-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:center;width:100%} .rs-page{width:min(100%,230px);aspect-ratio:210/297;background:var(--p-white,#fff);box-shadow:0 18px 30px -16px rgba(42,29,20,.6);display:grid;align-content:space-between;justify-items:center;text-align:center;padding:9% 8%;font-family:Amiri,serif;color:#000;font-size:10.5px;line-height:1.7;transition:padding .4s} .rs-page b{font-size:17px;line-height:1.5} .rs-page span{font-size:12px;margin-top:-14px} .rs-page em{font-style:normal;border-block:1px solid #999;padding:3px 8px} .rs-page i{font-style:normal} .rs-spec{display:grid;grid-template-columns:auto auto;gap:6px 18px;font-size:13.5px;color:var(--p-ink);background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:12px;padding:14px 18px;min-width:230px} .rs-spec dt{color:var(--p-muted)} .rs-spec dd{font-weight:700;text-align:end} .rs-spec dd.chg{animation:tn-flash 1s} .ru-list{display:grid;gap:5px;counter-reset:r} .ru-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:8px;font-family:Amiri,serif;font-size:15px;color:#222;animation:fx-in .4s var(--pen) both} .ru-list li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ru-list li em{font:700 11.5px/1 var(--ui);font-style:normal;color:var(--p-rubric);background:color-mix(in srgb,var(--p-gold) 20%,transparent);padding:4px 9px;border-radius:999px;white-space:nowrap} .ru-list [data-r="cover"]{justify-items:center;font-weight:700} .ru-list [data-r="abs"]{font-size:14px;background:#FCFAF4} .ru-list [data-r="kw"] span::first-line{font-weight:700} .ru-list [data-r="h1"]{font-weight:700;font-size:16.5px} .ru-list [data-r="h2"]{font-weight:700;padding-inline-start:26px} .ru-list [data-r="p"]{padding-inline-start:40px} .ru-list [data-r="ref"] span{padding-inline-start:22px;text-indent:-22px} .ru-list [data-r="en"]{font-family:"Times New Roman",serif} .ru-list li:nth-child(2){animation-delay:.05s}.ru-list li:nth-child(3){animation-delay:.1s}.ru-list li:nth-child(4){animation-delay:.15s}.ru-list li:nth-child(5){animation-delay:.2s}.ru-list li:nth-child(6){animation-delay:.25s}.ru-list li:nth-child(7){animation-delay:.3s}.ru-list li:nth-child(8){animation-delay:.35s} /* المتون: صانع الملزمة */ .mu{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;padding:18px} .mu-ctl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 20px;background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:12px;padding:6px 16px} .mu-ctl fieldset{border:0;margin:0;padding:10px 0;border-bottom:1px solid var(--p-line);display:grid;gap:8px;justify-items:start} .mu-ctl fieldset:last-child{border-bottom:0} .mu-ctl legend{font:700 13px var(--ui);color:var(--p-gold-d);padding:0;margin-bottom:6px;float:left;width:100%} .mu-ctl .seg > button{padding:6px 10px;font-size:13px} .mu-ctl .fld{width:100%} .mu-ctl .fld input{font-size:16px;color:var(--p-ink)} .mu-ctl .sw-row .sw{width:30px;height:30px} .mu-ctl .sw i{width:14px;height:14px;box-shadow:0 0 0 2px var(--p-white,#fff)} .mu-ctl .sw.on i{box-shadow:0 0 0 2px var(--p-white,#fff),0 0 0 4px var(--p-gold-d)} .mu-view{display:grid;gap:12px;justify-items:center;min-width:0} .mu-spread{--lc:#CDB98A;display:flex;justify-content:center;width:100%;max-width:820px;filter:drop-shadow(0 22px 22px rgba(42,29,20,.28))} .mu-spread > .mzw{flex:1 1 0;min-width:0;animation:fx-in .35s var(--pen) both} .mu-spread .mz{box-shadow:none} .mu-spread .mz.pg-r{box-shadow:inset -16px 0 20px -16px rgba(60,40,20,.3)} .mu-spread .mz.pg-l{box-shadow:inset 16px 0 20px -16px rgba(60,40,20,.3)} /* المتون بأسلوب «المذهّب» (بطاقته: ١٥ المتون) */ .mz .mmt{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:calc(6 * var(--mm))} .mz .mintro{margin:calc(1.5 * var(--mm)) calc(1 * var(--mm)) calc(2.6 * var(--mm));line-height:1} .mz .mintro > span{position:relative;display:inline-block;padding:calc(1 * var(--mm)) calc(7.2 * var(--mm)) calc(1.2 * var(--mm));background:var(--cream);border:calc(.18 * var(--mm)) solid var(--gld);border-radius:calc(4 * var(--mm));box-shadow:0 0 0 calc(.55 * var(--mm)) var(--pp),0 0 0 calc(.8 * var(--mm)) var(--lap);font:700 calc(4.9 * var(--mm))/1.5 var(--fh);color:var(--h2)} .mz .mintro > span::before,.mz .mintro > span::after{content:"";position:absolute;top:50%;width:calc(1.5 * var(--mm));height:calc(1.5 * var(--mm));margin-top:calc(-.75 * var(--mm));background:var(--gld);transform:rotate(45deg)} .mz .mintro > span::before{right:calc(2.4 * var(--mm))}.mz .mintro > span::after{left:calc(2.4 * var(--mm))} .mz .mv{display:grid;grid-template-columns:auto minmax(0,1fr) calc(5 * var(--mm)) minmax(0,1fr);align-items:center;font-size:calc(6.1 * var(--mm));line-height:2.05} .mz .mv.nonum{grid-template-columns:minmax(0,1fr) calc(5 * var(--mm)) minmax(0,1fr)} .mz .mv .vno{font:700 calc(3.8 * var(--mm))/1 var(--fh);color:var(--h2);padding-inline-end:calc(2 * var(--mm));margin-inline-end:calc(2 * var(--mm));border-inline-end:calc(.3 * var(--mm)) solid color-mix(in srgb,var(--gld) 70%,transparent);min-width:calc(5.5 * var(--mm));text-align:center} .mz .mv .h{white-space:nowrap;text-align:center;overflow:hidden} .mz .mv .vsep{height:calc(3.3 * var(--mm));background:url(/img/features/mudh/rose.svg) center/calc(3.3 * var(--mm)) no-repeat} .mz .mpr{text-indent:0 !important;font-size:calc(6.4 * var(--mm));line-height:2.05} .mz .mc-label{text-align:center;margin:calc(1 * var(--mm)) 0 calc(3 * var(--mm));line-height:1} .mz .mc-label > span{display:inline-flex;align-items:center;padding:calc(.8 * var(--mm)) calc(4 * var(--mm));background:var(--cream);border:calc(.2 * var(--mm)) solid var(--gld);border-radius:calc(5 * var(--mm));box-shadow:0 0 0 calc(.5 * var(--mm)) var(--lapd),0 0 0 calc(.8 * var(--mm)) var(--gld);font:700 calc(5.2 * var(--mm))/1.5 var(--fh);color:var(--h2)} .mz .mc-label > span::before,.mz .mc-label > span::after{content:"";width:.62em;height:.62em;margin:0 calc(2.2 * var(--mm));background:url(/img/features/mudh/rose.svg) center/contain no-repeat} .mz .mc{position:relative;flex:1;display:flex;flex-direction:column;padding:calc(5.2 * var(--mm)) calc(5 * var(--mm)) calc(4.6 * var(--mm));border:calc(.16 * var(--mm)) solid var(--lap); background-image:url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/bandh.svg),url(/img/features/mudh/bandh.svg),url(/img/features/mudh/bandv.svg),url(/img/features/mudh/bandv.svg); background-position:left var(--mm) top var(--mm),right var(--mm) top var(--mm),left var(--mm) bottom var(--mm),right var(--mm) bottom var(--mm),center top var(--mm),center bottom var(--mm),left var(--mm) center,right var(--mm) center; background-size:calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(100% - 5.6 * var(--mm)) calc(1.8 * var(--mm)),calc(100% - 5.6 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(100% - 5.6 * var(--mm)),calc(1.8 * var(--mm)) calc(100% - 5.6 * var(--mm));background-repeat:no-repeat} .mz .mc::before{content:"";position:absolute;inset:calc(3.5 * var(--mm));border:calc(.14 * var(--mm)) solid var(--gld);pointer-events:none} .mz.mcom .jd{display:none} .mz .mlines{flex:1;min-height:calc(20 * var(--mm));--lh:calc(9.5 * var(--mm))} .mz .mlines.lines{background:repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px),var(--lc) calc(var(--lh) - 1px) var(--lh))} .mz .mlines.dots{background:radial-gradient(circle,var(--lc) .7px,transparent 1.3px) 0 calc(var(--lh) - 1.5px)/calc(2.4 * var(--mm)) var(--lh) repeat} .mz .mlines.grid{background:linear-gradient(var(--lc) .5px,transparent .5px) 0 0/calc(5 * var(--mm)) calc(5 * var(--mm)),linear-gradient(90deg,var(--lc) .5px,transparent .5px) 0 0/calc(5 * var(--mm)) calc(5 * var(--mm));opacity:.8} .mz .mlines.blank{background:none} .mz .msep{height:calc(6 * var(--mm));margin:calc(1 * var(--mm)) 0 calc(2 * var(--mm));background:url(/img/features/mudh/tail.svg) center/auto 100% no-repeat} .mz .mside{flex:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(7 * var(--mm));min-height:0} .mz .mside-m{min-width:0} .mz .mside .mv{grid-template-columns:auto minmax(0,1fr);font-size:calc(4.7 * var(--mm));line-height:1.75;margin-bottom:calc(1.5 * var(--mm))} .mz .mside .mv.nonum{grid-template-columns:minmax(0,1fr)} .mz .mside .mv .vsep{display:none} .mz .mside .mv .h{white-space:normal;text-align:start;text-align-last:auto} .mz .mside .mv .h + .vsep + .h,.mz .mside .mv .h:last-child{grid-column:-2;padding-inline-start:1.2em} .mz .mside .mv .vno{grid-row:span 2} .mz .mside .mpr{font-size:calc(4.8 * var(--mm));line-height:1.8} .mz .mside .mintro > span{font-size:calc(4.2 * var(--mm));padding-inline:calc(5.6 * var(--mm))} .mz .mc-side{position:relative;display:flex;flex-direction:column;min-width:0} .mz .mc-side::after{content:"";position:absolute;top:0;bottom:0;right:calc(-4.4 * var(--mm));width:calc(1.8 * var(--mm));background:url(/img/features/mudh/bandv.svg) center/100% 100% no-repeat} .mz .mc-side .mc-label > span{font-size:calc(4.4 * var(--mm));padding-inline:calc(2.4 * var(--mm))} .mz .mc-side .mc-label > span::before,.mz .mc-side .mc-label > span::after{margin:0 calc(1.2 * var(--mm))} .mu-logo{position:absolute;width:15%;opacity:.95;mix-blend-mode:multiply;transition:all .35s var(--pen);pointer-events:none} /* الشعار في الهامش فوق الجدول، بينه وبين الإطار فسحة */ .mu-logo.tr{top:1.8%;right:4%}.mu-logo.tl{top:1.8%;left:4%}.mu-logo.bl{bottom:.9%;left:4%;width:13%}.mu-pager{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--p-muted)} .mu-pager span{min-width:7em;text-align:center;font-weight:700;color:var(--p-ink)} /* صاحب النسخة */ .ow{display:grid;gap:14px;justify-items:center} .ow-w{width:min(100%,340px)} .owp .cvx{position:absolute;top:calc(22 * var(--mm));bottom:calc(20 * var(--mm));left:calc(20 * var(--mm));right:calc(20 * var(--mm));display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center} .owp .ow-logo{width:62%;height:auto;mix-blend-mode:multiply} .owp .tranj{position:relative;z-index:0;width:calc(96 * var(--mm));max-width:100%;padding:calc(8 * var(--mm)) calc(9 * var(--mm));border-radius:50%;background:url(/img/features/mudh/ground.svg) center/100% 100% no-repeat var(--cream);border:calc(.25 * var(--mm)) solid var(--gld); box-shadow:0 0 0 calc(.9 * var(--mm)) var(--pp),0 0 0 calc(1.25 * var(--mm)) var(--lap),0 0 0 calc(1.55 * var(--mm)) var(--pp),0 0 0 calc(1.95 * var(--mm)) var(--gld)} .owp .tranj-r{position:absolute;z-index:-1;inset:calc(-8 * var(--mm)) calc(-9 * var(--mm));background:url(/img/features/mudh/rays.svg) center/100% 100% no-repeat} .owp .pend{position:absolute;left:50%;width:calc(12 * var(--mm));height:calc(9.8 * var(--mm));margin-left:calc(-6 * var(--mm));background:url(/img/features/mudh/pend.svg) center/100% 100% no-repeat} .owp .pend.pu{bottom:calc(100% + 1.6 * var(--mm))} .owp .pend.pd{top:calc(100% + 1.6 * var(--mm));transform:scaleY(-1)} .owp .cvx-title{font:700 calc(8.4 * var(--mm))/1.4 var(--fh);color:var(--h1)} .owp .cvx-sub{font:700 calc(4.4 * var(--mm))/1.5 var(--fh);color:var(--h2);margin-top:calc(1 * var(--mm))} .owp .cvx-lbl{display:flex;align-items:center;gap:calc(2.5 * var(--mm));font:700 calc(3.7 * var(--mm))/1.8 var(--fh);color:var(--gld)} .owp .cvx-lbl::before,.owp .cvx-lbl::after{content:"";width:calc(9 * var(--mm));border-top:calc(.18 * var(--mm)) solid var(--gld)} .owp .cvx-author{font:700 calc(6 * var(--mm))/1.4 "Aref Ruqaa",var(--fh);color:var(--h2);margin-top:calc(-3 * var(--mm))} /* خانات صاحب النسخة: إطارٌ على هيئة الجدول (بطاقة المذهّب: ١٤) */ .owp .cv-owner{position:relative;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(3.4 * var(--mm)) calc(2.5 * var(--mm));align-items:end;padding:calc(5 * var(--mm)) calc(6 * var(--mm)) calc(4.4 * var(--mm));font:700 calc(4.2 * var(--mm))/1.4 var(--fh);color:var(--h2);text-align:start; border:calc(.16 * var(--mm)) solid var(--lap);background-color:var(--cream); background-image:url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/corner.svg),url(/img/features/mudh/bandh.svg),url(/img/features/mudh/bandh.svg),url(/img/features/mudh/bandv.svg),url(/img/features/mudh/bandv.svg); background-position:left calc(.9 * var(--mm)) top calc(.9 * var(--mm)),right calc(.9 * var(--mm)) top calc(.9 * var(--mm)),left calc(.9 * var(--mm)) bottom calc(.9 * var(--mm)),right calc(.9 * var(--mm)) bottom calc(.9 * var(--mm)),center top calc(.9 * var(--mm)),center bottom calc(.9 * var(--mm)),left calc(.9 * var(--mm)) center,right calc(.9 * var(--mm)) center; background-size:calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(1.8 * var(--mm)),calc(100% - 5.4 * var(--mm)) calc(1.8 * var(--mm)),calc(100% - 5.4 * var(--mm)) calc(1.8 * var(--mm)),calc(1.8 * var(--mm)) calc(100% - 5.4 * var(--mm)),calc(1.8 * var(--mm)) calc(100% - 5.4 * var(--mm));background-repeat:no-repeat} .owp .ow-fields span{white-space:nowrap;display:flex;align-items:center;gap:3px} .owp .ow-fields span button{border:0;background:none;color:#b9a98f;cursor:pointer;font-size:.7em;padding:0 2px;line-height:1} .owp .ow-fields i{height:1.2em} .owp .ow-fields.line i{border-bottom:calc(.2 * var(--mm)) solid #A88B4E} .owp .ow-fields.dots i{border-bottom:calc(.5 * var(--mm)) dotted #A88B4E} .owp .ow-fields input{font:inherit;color:inherit;border:0;background:none;padding:0;outline:none;border-bottom:1px dashed transparent;min-width:0} .owp .ow-fields input:focus{border-bottom-color:var(--gld)}.ow-ctl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} /* ===== المحرِّر ===== */ .ed{display:grid;gap:12px} .ed-bar,.pt-bar,.rl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:12px;padding:7px 10px;font-size:13.5px;color:var(--p-ink)} .ed-bar > button{font:700 13px/1 var(--ui);padding:8px 12px;border-radius:8px;border:1px solid var(--p-line);background:var(--p-sheet);color:var(--p-ink);cursor:pointer;transition:all .2s} .ed-bar > button:hover:not(:disabled){border-color:var(--p-gold-d)} .ed-bar > button:disabled{opacity:.4;cursor:default} .ed-bar .ed-undo{font-size:16px;padding:6px 10px} .ed-lbl{font-weight:700;color:var(--p-muted)} .ed-fill{flex:1 1 auto} .ed-path{font-weight:700;color:var(--p-gold-d)} .ed-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start} .ed-sheet{background:var(--p-white,#fff);box-shadow:0 18px 30px -18px rgba(42,29,20,.55);padding:28px 34px 22px;font-family:Amiri,serif;font-size:18px;line-height:2.1;color:#1d1712;min-height:300px;display:flex;flex-direction:column;gap:6px} .ed-sheet p{text-align:justify} .ed-s{border-radius:3px;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .3s;padding:0 1px} .ed-s:hover{background:color-mix(in srgb,#C5A059 22%,transparent)} .ed-s.sel{background:color-mix(in srgb,#C5A059 34%,transparent);box-shadow:0 0 0 2px #C5A059} .ed-s.k-m{color:#8B1A1A;font-weight:700} .ed-s.k-q{color:#1F5E3B} .ed-s.k-h{font-weight:700;color:#3B2A1E} .ed-s.k-hd{display:block;text-align:center;font-weight:700;font-size:1.3em;color:#6B1D2F} .ed-s.k-fn{display:none} .ed-sheet sup{font-size:.62em;color:#6B1D2F;font-weight:700} .ed-fns{margin-top:auto;font-size:14px;line-height:1.8} .ed-fns:not(:empty)::before{content:"";display:block;width:34%;border-top:1px solid #C5A059;margin-bottom:4px} .ed-fns p{animation:fx-in .4s both} .ed-log{background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--p-ink);max-height:360px;overflow:auto} .ed-log b{display:block;font-family:var(--display);font-size:16px;color:var(--p-rubric);margin-bottom:6px} .ed-log ol{display:grid;gap:6px} .ed-log li{padding:6px 8px;background:var(--p-vellum);border-radius:6px;line-height:1.6;animation:fx-in .3s both} .ed-log li.muted{background:none} .ed-log li i{font-style:normal;color:var(--p-gold-d);font-weight:700} .ed-log del{color:#9b2a2a} .ed-log ins{color:#3f6b3a;text-decoration:none;font-weight:700} /* أنماط الشعر */ .vs{display:grid;gap:16px} .vs-ctl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center} .vs-gap{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--p-ink)} .vs-gap input{accent-color:var(--p-btn);width:110px} .vs-page{--gap:8%;background:var(--p-white,#fff);box-shadow:0 18px 30px -18px rgba(42,29,20,.55);padding:26px 26px;font-family:Amiri,serif;font-size:clamp(14px,1.6vw,19px);color:#1d1712;display:grid;gap:10px;container-type:inline-size} .vs-v{display:grid;grid-template-columns:minmax(0,1fr) var(--gap) minmax(0,1fr);align-items:center;line-height:2;transition:all .4s var(--pen)} .vs-v .h{white-space:nowrap;text-align:center;transition:all .4s var(--pen)} .vs-v .h:first-child{grid-column:1}.vs-v .h:last-child{grid-column:3} /* الكشيدة: الشطر يُمدّ بالتطويل بين حروفه (kashida في features.js)، لا بتوسيع ما بين كلماته */ .vs-page.stair .vs-v{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .vs-page.stair .vs-v .h:first-child{grid-column:1;grid-row:1} .vs-page.stair .vs-v .h:last-child{grid-column:2;grid-row:2} .vs-page.mid .vs-v{grid-template-columns:minmax(0,.2fr) minmax(0,.6fr) minmax(0,.2fr)} .vs-page.mid .vs-v .h{grid-column:2 !important} .vs-page.mid .vs-v .h:last-child{grid-row:2} /* تقسيم المتن */ .pt{display:grid;gap:12px} .pt-bar .tbtn{font-size:12.5px;padding:6px 11px} /* الأجزاء طابقان: كل جزءٍ صفحتا «المذهّب» متقابلتان، والأبيات بشطرين أحدهما تحت الآخر فتُقرأ وتُنقر */ .pt-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px;padding:16px 4px 6px} .pt-part{position:relative;min-width:0;animation:fx-in .35s var(--pen) both} .pt-pages{display:flex;filter:drop-shadow(0 14px 14px rgba(42,29,20,.25))} .pt-pages > .mzw{flex:1 1 0;min-width:0} .pt-pages .mz{box-shadow:none} .pt-pages .mz.pg-r{box-shadow:inset -10px 0 14px -10px rgba(60,40,20,.3)} .pt-pages .mz.pg-l{box-shadow:inset 10px 0 14px -10px rgba(60,40,20,.3)} .mz.ptp{--tl:16;--tr:16;--mt:24;--mb:23} .mz.ptp .tx{justify-content:center} .mz .pt-mt{display:grid;gap:calc(3 * var(--mm))} .mz .pt-v{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 calc(2.5 * var(--mm));align-items:center;padding:calc(1.5 * var(--mm)) calc(2 * var(--mm));border-radius:calc(1.5 * var(--mm));cursor:pointer;font-size:calc(10 * var(--mm));line-height:1.7;transition:background-color .2s,box-shadow .2s} .mz .pt-v .vno{grid-row:span 2;font:700 calc(5.6 * var(--mm))/1 var(--fh);color:var(--h2);padding-inline-end:calc(2 * var(--mm));border-inline-end:calc(.4 * var(--mm)) solid color-mix(in srgb,var(--gld) 70%,transparent)} .mz .pt-v span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mz .pt-v span:last-child{text-align:left;padding-inline-start:calc(5 * var(--mm))} .mz .pt-v:hover{background:color-mix(in srgb,var(--gld) 16%,transparent)} .mz .pt-v.sel{background:color-mix(in srgb,var(--gld) 30%,transparent);box-shadow:0 0 0 calc(.6 * var(--mm)) var(--gld)} .mz.ptp .mc-label > span{font-size:calc(6.4 * var(--mm))} .mz.ptp .mlines{--lh:calc(12 * var(--mm));--lc:#CDB98A} .pt-n{position:absolute;top:-12px;inset-inline-start:10px;z-index:2;font:700 11px/1 var(--ui);background:var(--p-btn);color:var(--p-on);padding:5px 10px;border-radius:999px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)} /* مساعد المحرِّر */ .ai{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start} .ai-sheet{position:relative;background:var(--p-white,#fff);box-shadow:0 18px 30px -18px rgba(42,29,20,.55);padding:28px 34px 20px;font-family:Amiri,serif;font-size:18px;line-height:2.1;color:#1d1712;min-height:330px;display:flex;flex-direction:column;gap:6px} .ai-sheet .hd{text-align:center;font-weight:700;font-size:1.25em;color:#6B1D2F;animation:fx-in .4s both} .ai-sheet p{text-align:justify} .ai-sheet .nb{font-weight:700} .ai-sheet .side{position:absolute;inset-inline-end:-2px;top:70px;width:96px;transform:translateX(-100%);font-size:12.5px;line-height:1.7;color:#6B1D2F;border-inline-start:1px solid #C5A059;padding-inline-start:8px;animation:fx-in .4s both} .ai-sheet.has-side{padding-inline-end:140px} .ai-sheet .side{inset-inline-end:14px;transform:none} .ai-sheet .fns{margin-top:auto;font-size:14px;line-height:1.8} .ai-sheet .fns:not(:empty)::before{content:"";display:block;width:34%;border-top:1px solid #C5A059;margin-bottom:4px} .ai-sheet sup{font-size:.62em;font-weight:700;color:#6B1D2F} .ai-sheet .flash{animation:tn-flash 1.2s} .ai-panel{background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:14px;padding:12px;display:grid;gap:10px;box-shadow:var(--sh-1);color:var(--p-ink)} .ai-h{display:flex;align-items:center;gap:8px} .ai-h b{font:700 17px var(--display);color:var(--p-rubric)} .ai-seal{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(#F2D99C,#C5A059);color:#6B4A1C;font-size:14px;box-shadow:0 0 0 2px var(--p-white,#fff),0 0 0 3px #C5A059} .ai-scope{margin-inline-start:auto} .ai-scope > button{padding:4px 8px !important;font-size:11.5px !important} .ai-chips{display:flex;flex-wrap:wrap;gap:6px} .ai-chips button{font:700 12.5px/1.2 var(--ui);padding:7px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--p-gold) 60%,transparent);background:color-mix(in srgb,var(--p-gold) 10%,var(--p-white,#fff));color:var(--p-ink);cursor:pointer;transition:all .2s} .ai-chips button:hover{background:color-mix(in srgb,var(--p-gold) 26%,var(--p-white,#fff))} .ai-chips button.on{background:var(--p-btn);color:var(--p-on);border-color:var(--p-btn)} .ai-out{min-height:150px;font-size:14px;line-height:1.85;background:var(--p-vellum);border-radius:10px;padding:10px 12px;display:grid;gap:8px;align-content:start} .ai-out .say{white-space:pre-wrap} .ai-out .caret{display:inline-block;width:2px;height:1em;background:var(--p-rubric);vertical-align:-2px;animation:blink .9s steps(1) infinite} @keyframes blink{50%{opacity:0}} .ai-out del{color:#9b2a2a;background:#f6dcdc;text-decoration-thickness:1.5px} .ai-out ins{color:#2f5a2a;background:#dcefd8;text-decoration:none} .ai-out .acts{display:flex;gap:6px;flex-wrap:wrap} .ai-out .acts button{font:700 12.5px/1 var(--ui);padding:7px 14px;border-radius:999px;border:1px solid var(--p-btn);background:var(--p-btn);color:var(--p-on);cursor:pointer} .ai-out .acts button.q{background:var(--p-white,#fff);color:var(--p-ink);border-color:var(--p-line)} .ai-out .done{color:var(--ok);font-weight:700} /* ===== الرَّحل ===== */ .rl{display:grid;gap:10px;padding:0;overflow:hidden;background:#1a1210} .rl-frame{position:relative;height:min(78vh,640px);min-height:440px;display:grid;place-items:center;background:radial-gradient(ellipse 70% 62% at 50% 46%,#3a2a1c,#1a1210 72%)} .rl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .rl-start{display:grid;justify-items:center;gap:8px;border:0;background:none;color:#EDE3CB;cursor:pointer;font:inherit;padding:20px} .rl-start i{width:120px;aspect-ratio:17/24;border-radius:2px 6px 6px 2px;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.08) 12%,transparent 30%),#1B3768;box-shadow:0 24px 40px -14px #000,inset 0 0 0 6px #1B3768,inset 0 0 0 7px #C9A24E;transition:transform .4s var(--stamp)} .rl-start:hover i{transform:translateY(-6px) rotate(-2deg)} .rl-start b{font:700 22px var(--display);color:#E6CC8A} .rl-start span{font-size:13.5px;opacity:.75} .rl-cap{text-align:center;font-size:13px;color:#cbbfa8;padding:0 12px 12px} /* مجلس الدرس */ .ls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:0;overflow:hidden} .ls-room{order:1;display:grid;gap:10px;align-content:start;padding:14px;background:#3B1420;color:#F1E3C6;--p-line:#5A2A35} .wq.night .ls-room{background:#16243B} .ls-src{display:flex;gap:4px} .ls-src button{font:700 12px/1 var(--ui);padding:7px 11px;border-radius:999px;border:1px solid rgba(241,227,198,.25);background:none;color:inherit;cursor:pointer;opacity:.75} .ls-src button.on{background:rgba(241,227,198,.15);opacity:1} .ls-video{position:relative;aspect-ratio:16/8;border-radius:10px;background:radial-gradient(ellipse at 50% 30%,#3a3a3a,#111);display:grid;align-content:end;padding:12px;overflow:hidden} .ls-video b{position:relative;font:700 14px var(--ui);color:#fff;text-shadow:0 1px 4px #000} .ls-wave{position:absolute;inset:18% 10% 30%;display:flex;align-items:center;justify-content:center;gap:3px} .ls-wave i{width:4px;border-radius:2px;background:#C5A059;height:8%;transition:height .12s} .ls-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ls-play{width:38px;height:38px;border-radius:50%;border:0;background:#C5A059;color:#2A1D14;font-size:16px;cursor:pointer;flex:none} .ls-time{font:700 13px var(--ui);direction:ltr;min-width:3.4em} .ls-track{flex:1 1 80px;height:4px;border-radius:2px;background:rgba(241,227,198,.2);text-decoration:none;overflow:hidden;display:block} .ls-track s{display:block;height:100%;width:0;background:#C5A059;margin-inline-start:0} .ls-ctl .tbtn{background:none;color:inherit;border-color:rgba(241,227,198,.35);font-size:12px} .ls-tr{background:rgba(0,0,0,.18);border-radius:10px;padding:10px 12px} .ls-tr-h{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:6px} .ls-tr-h b{font-family:var(--display);font-size:15px;color:#E7C98A} .ls-follow{font-weight:700;color:#8FD3E8;font-size:12px} .ls-exp{font:600 10.5px var(--ui);border:1px solid rgba(241,227,198,.3);border-radius:4px;padding:2px 5px;opacity:.75} .ls-lines{display:grid;gap:4px;max-height:168px;overflow:auto;font-family:Amiri,serif;font-size:15px;line-height:1.75} .ls-lines li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:baseline;padding:2px 6px;border-radius:5px;animation:fx-in .3s both} .ls-lines li i{font:700 10.5px var(--ui);font-style:normal;color:#C5A059;direction:ltr} .ls-lines li.part span{color:rgba(241,227,198,.55)} .ls-lines li.now{background:rgba(197,160,89,.18)} .ls-lines .q{color:#A6E3B0} .ls-ai .ai-chips button{background:rgba(241,227,198,.08);color:#F1E3C6;border-color:rgba(197,160,89,.5)} .ls-ai .ai-chips button:hover{background:rgba(197,160,89,.25)} .ls-ai .ai-out{background:rgba(0,0,0,.2);min-height:0;margin-top:8px;color:#F1E3C6} .ls-ai .ai-out:empty{display:none} .ls-ai .ai-out .acts button{background:#C5A059;border-color:#C5A059;color:#2A1D14} .ls-book{order:2;position:relative;display:grid;place-items:center;padding:22px 18px;background:radial-gradient(ellipse at 50% 40%,rgba(243,217,160,.5),transparent 75%)} .wq.night .ls-book{background:radial-gradient(ellipse at 50% 40%,rgba(243,217,160,.12),transparent 75%)} .ls-w{width:min(100%,400px)} .mz.lsz .tx{font-size:calc(5.9 * var(--mm))} .mz w{transition:background-color .25s} .mz w.rd{background:rgba(120,205,230,.28)} .mz w.cur{background:rgba(70,175,215,.5);text-decoration:underline 2px #2A8DB3;text-underline-offset:3px} .ls-badge{position:absolute;z-index:5;top:calc(3 * var(--mm));left:50%;translate:-50% 0;font:700 12px/1 var(--ui);background:#2A8DB3;color:#fff;padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 12px -6px rgba(0,0,0,.4);animation:fx-in .3s both} .ls-badge.ex{background:#6C5949} /* الملاحظة اللاصقة كما في البرنامج (book.css): ورقة صفراء صغيرة مطويّة الركن، وتُفتح ورقةً صفراء */ .an-layer{position:absolute;inset:0;pointer-events:none;z-index:4} .an-pin{position:absolute;width:5.2%;aspect-ratio:1;min-width:18px;padding:0;border:0;translate:-50% 0;background:var(--c,#F2C94C);color:rgba(70,48,8,.75);display:grid;place-items:center; clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));cursor:pointer;pointer-events:auto;transition:transform .15s} .an-pin svg{width:72%;height:72%} .an-pin:hover{transform:scale(1.12)} .an-pin.an-new{animation:an-new 1.4s cubic-bezier(.3,1.6,.5,1)} @keyframes an-new{0%{transform:scale(.2) rotate(-25deg);opacity:0}40%{transform:scale(1.35);opacity:1}100%{transform:none}} .nt-card{position:absolute;z-index:46;display:grid;gap:10px;padding:12px 14px 14px;direction:rtl;background:#FFF4C2;color:#2A1D14;border-radius:4px 4px 14px 4px;box-shadow:0 24px 48px -18px rgba(0,0,0,.85);animation:fx-in .15s ease-out both;font-family:var(--ui)} .nt-card-h{display:flex;align-items:center;justify-content:space-between} .nt-card-h b{display:flex;align-items:center;gap:6px;font-size:14px} .nt-card-h svg{width:18px;height:18px} .nt-card-h button{width:28px;height:28px;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:inherit;padding:0} .nt-card textarea{font:inherit;font-size:14.5px;line-height:1.7;width:100%;resize:vertical;border:0;border-radius:4px;padding:8px 10px;background:rgba(255,255,255,.65);color:inherit;outline-color:#8A5A12} .nt-src{margin:0;font-size:12px;color:#7a6650;display:flex;flex-wrap:wrap;gap:4px;align-items:center} .nt-src button{border:0;background:none;padding:0 2px;font:700 12px/1.5 var(--ui);color:#8A6727;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .nt-card-f{display:flex;gap:8px;justify-content:space-between} .nt-go,.nt-quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 13.5px var(--ui);border-radius:8px;padding:7px 14px;cursor:pointer} .nt-go{background:#6B1D2F;color:#fff;border:1px solid #6B1D2F} .nt-quiet{background:none;color:inherit;border:1px solid currentColor;opacity:.85} /* الدفاتر */ .nb-row{display:flex;gap:8px;margin-top:6px} .nb-row i{width:38px;aspect-ratio:3/4;background-color:#FFFDF6;border:1px solid var(--line);border-radius:2px 4px 4px 2px;box-shadow:0 4px 8px -4px rgba(42,29,20,.4)} .nb-l{background:repeating-linear-gradient(transparent 0 5px,#d6c7a8 5px 6px)} .nb-g{background:linear-gradient(#e2d6bd 1px,transparent 1px) 0 0/6px 6px,linear-gradient(90deg,#e2d6bd 1px,transparent 1px) 0 0/6px 6px} .nb-d{background:radial-gradient(circle,#b9a98f .8px,transparent 1.2px) 0 0/6px 6px} .nb-c{background:linear-gradient(90deg,transparent 30%,#C5A059 30% 32%,transparent 32%),repeating-linear-gradient(transparent 0 5px,#e2d6bd 5px 6px)} .nb-v{background:linear-gradient(90deg,transparent 47%,#C5A059 47% 53%,transparent 53%),repeating-linear-gradient(transparent 0 7px,#d6c7a8 7px 8px)} /* ===== الأساليب ===== */ .st{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 26px;align-items:center} .st-list{display:grid;gap:4px;grid-row:span 2} .st-list button{display:flex;align-items:center;gap:10px;font:700 16px/1.4 var(--display);padding:9px 14px;border-radius:10px;border:1px solid transparent;background:none;color:var(--p-ink);cursor:pointer;text-align:start} .st-list button i{width:11px;height:11px;transform:rotate(45deg);flex:none} .st-list button:hover{background:var(--p-white,#fff)} .st-list button.on{background:var(--p-white,#fff);border-color:var(--p-gold);box-shadow:var(--sh-1)} .st-show{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;min-height:320px} .st-card{width:min(44%,230px);height:auto;border-radius:22%;box-shadow:0 20px 34px -18px rgba(42,29,20,.6);animation:card-in .5s var(--stamp) both} .st-page{width:min(40%,220px);height:auto;box-shadow:0 20px 34px -18px rgba(42,29,20,.6);animation:fx-in .5s .1s var(--pen) both} @keyframes card-in{from{opacity:0;transform:rotateY(70deg) scale(.9)}to{opacity:1;transform:none}} .st-desc{font-size:15px;line-height:1.8;color:var(--p-ink);text-align:center;min-height:3.6em} .as{display:grid;gap:16px} .as-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .as-steps button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:center;width:100%;text-align:start;padding:10px 12px;border-radius:12px;border:1px solid var(--p-line);background:var(--p-white,#fff);cursor:pointer;color:var(--p-ink);transition:all .25s} .as-steps i{grid-row:span 2;font-style:normal;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--p-gold);font:700 15px var(--display);color:var(--p-gold-d)} .as-steps b{font:700 15px/1.4 var(--display)} .as-steps span{font-size:12px;color:var(--p-muted)} .as-steps li.on button{border-color:var(--p-btn);box-shadow:0 0 0 1px var(--p-btn)} .as-steps li.on i,.as-steps li.done i{background:var(--p-btn);border-color:var(--p-btn);color:var(--p-on)} .as-stage{min-height:330px;background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:14px;padding:18px;display:grid;align-content:start;gap:12px;color:var(--p-ink);overflow:hidden} .as-go{display:flex;justify-content:center} .as-file{display:flex;align-items:center;gap:14px;justify-self:center;margin-top:30px;animation:fx-in .4s both} .as-file i{width:62px;height:78px;background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:3px;position:relative;box-shadow:0 10px 18px -10px rgba(0,0,0,.4);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)} .as-file i::before{content:"";position:absolute;inset:18px 10px auto;height:3px;background:var(--p-gold);box-shadow:0 8px 0 #ddd,0 16px 0 #ddd,0 24px 0 #ddd} .as-file b{font:700 17px var(--display);display:block} .as-file small{color:var(--p-muted);font-size:13px} .as-copied{font:700 13px var(--ui);color:var(--ok);animation:fx-in .3s both} .as-msg{max-width:88%;padding:12px 16px;border-radius:16px;font-size:14.5px;line-height:1.8;animation:fx-in .35s both} .as-msg.u{justify-self:start;background:var(--p-vellum);border-end-start-radius:4px} .as-msg.a{justify-self:end;background:var(--p-white,#fff);border:1px solid var(--p-line);border-end-end-radius:4px;width:88%} .as-msg .att{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--ui);background:var(--p-white,#fff);border:1px solid var(--p-line);border-radius:8px;padding:4px 8px;margin-bottom:6px} .as-code{position:relative;direction:ltr;text-align:left;background:var(--code-bg);color:var(--code-ink);border:1px solid var(--code-line);border-radius:10px;padding:30px 14px 12px;font:12.5px/1.65 ui-monospace,Consolas,monospace;white-space:pre;overflow:auto;max-height:200px} .as-code .c-k{color:var(--code-k)}.as-code .c-s{color:var(--code-s)}.as-code .c-n{color:var(--code-n)} .as-code button{position:absolute;top:6px;right:8px;font:700 11px var(--ui);background:var(--code-btn);color:var(--code-ink);border:0;border-radius:6px;padding:4px 10px;cursor:pointer} .as-code button.ok{background:#3f6b3a;color:#fff} .as-paste{display:grid;gap:10px;animation:fx-in .35s both} .as-paste-h{display:flex;align-items:center;gap:10px;font:700 16px var(--display);color:var(--p-rubric)} .as-paste textarea{direction:ltr;width:100%;height:120px;font:12px/1.6 ui-monospace,Consolas,monospace;border:1px solid var(--p-line);border-radius:10px;padding:10px;background:var(--p-vellum);color:var(--p-ink);resize:none} .as-result{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;animation:fx-in .4s both} .as-result img.c{width:180px;height:auto;border-radius:22%;box-shadow:0 18px 30px -16px rgba(42,29,20,.6);animation:card-in .6s var(--stamp) both} .as-result img.p{width:170px;height:auto;box-shadow:0 18px 30px -16px rgba(42,29,20,.6);animation:fx-in .5s .25s both} .as-result p{flex-basis:100%;text-align:center;font-weight:700;color:var(--ok)} /* ===== الأغلفة ===== */ /* استوديو الأغلفة (كمحرّر البرنامج): الطبقات، واللوحة، والخصائص */ .cvs{display:grid;gap:0;padding:0;overflow:hidden;color:var(--p-ink)} .cvs-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;background:var(--p-white,#fff);border-bottom:1px solid var(--p-line)} .cvs-kinds{display:inline-flex;border:1px solid var(--p-line);border-radius:9px;overflow:hidden} .cvs-kinds button{font:700 13px var(--ui);padding:6px 14px;border:0;border-inline-start:1px solid var(--p-line);background:none;color:var(--p-ink);cursor:pointer} .cvs-kinds button:first-child{border-inline-start:0} .cvs-kinds button[aria-selected="true"]{background:var(--p-btn);color:var(--p-on)} .cvs-fill{flex:1} .cvs-chk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--p-muted);cursor:pointer} .cvs-chk[hidden]{display:none} .cvs-chk input{accent-color:var(--p-btn)} .cvs-ib{min-width:30px;height:30px;display:inline-grid;place-items:center;padding:0 6px;border:1px solid var(--p-line);border-radius:7px;background:var(--p-sheet);color:var(--p-ink);cursor:pointer;font-size:15px;line-height:1} .cvs-ib:hover:not(:disabled){border-color:var(--p-gold-d)} .cvs-ib:disabled{opacity:.35;cursor:default} .cvs-ib.danger{color:#b33a3a} .cvs-btn{font:700 12.5px var(--ui);padding:6px 11px;border-radius:7px;border:1px solid var(--p-line);background:var(--p-sheet);color:var(--p-ink);cursor:pointer;white-space:nowrap} .cvs-btn:hover:not(:disabled){border-color:var(--p-gold-d)} .cvs-btn:disabled{opacity:.4;cursor:default} .cvs-body{display:grid;grid-template-columns:220px minmax(0,1fr) 270px;min-height:600px} .cvs-layers,.cvs-props{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--p-white,#fff);min-width:0} .cvs-layers{border-inline-end:1px solid var(--p-line)} .cvs-props{border-inline-start:1px solid var(--p-line);overflow-y:auto;max-height:640px} .cvs-ph{display:flex;align-items:center;justify-content:space-between} .cvs-ph b{font:700 16px var(--display);color:var(--p-rubric)} .cvs-add{position:relative} .cvs-menu{position:absolute;top:calc(100% + 4px);inset-inline-end:0;z-index:30;display:grid;min-width:150px;padding:4px;background:var(--p-sheet);border:1px solid var(--p-line);border-radius:9px;box-shadow:var(--sh-2)} .cvs-menu[hidden]{display:none} .cvs-menu button,.cvs-menu label{font:13px var(--ui);text-align:start;padding:7px 10px;border:0;border-radius:6px;background:none;color:var(--p-ink);cursor:pointer} .cvs-menu button:hover,.cvs-menu label:hover{background:var(--p-vellum)} .cvs-filters{display:flex;gap:4px} .cvs-filters button{display:inline-flex;align-items:center;gap:5px;font:700 11.5px var(--ui);padding:4px 8px;border-radius:999px;border:1px solid var(--p-line);background:none;color:var(--p-muted);cursor:pointer} .cvs-filters button.on{background:var(--p-vellum);color:var(--p-ink);border-color:var(--p-gold)} .dot{width:8px;height:8px;border-radius:50%;display:inline-block} .dot.cover,.lt.cover{--lc:#6B8FC9} .dot.slot,.lt.slot{--lc:#C9A24E} .dot{background:var(--lc)} .cvs-list{display:grid;gap:3px;flex:1;align-content:start;overflow-y:auto;max-height:440px} .cvs-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:6px 7px;border-radius:8px;border:1px solid var(--p-line);background:var(--p-sheet);font-size:13px;font-weight:700;cursor:pointer;transition:border-color .2s} .cvs-list li:hover{border-color:var(--p-gold)} .cvs-list li.sel{border-color:var(--p-btn);box-shadow:0 0 0 1px var(--p-btn)} .cvs-list li.off span{opacity:.45} .cvs-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cvs-list button{width:26px;height:24px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;color:var(--p-muted);font-size:12px;border-radius:5px} .cvs-list button:hover{background:var(--p-vellum);color:var(--p-ink)} .cvs-list button svg{width:17px;height:17px} .lt{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;font:700 12px/1 var(--ui);font-style:normal;color:#fff;background:var(--lc)} .cvs-pf{display:flex;gap:4px;padding-top:6px;border-top:1px solid var(--p-line)} /* اللوحة: الغلاف بمقاس التصميم، مصغّراً في وسط مساحةٍ داكنة كبرامج التصميم */ .cvs-stage-wrap{display:grid;grid-template-rows:minmax(0,1fr) auto auto;min-width:0;background:#2B2622;background-image:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25% 75%,rgba(255,255,255,.025) 75%),linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25% 75%,rgba(255,255,255,.025) 75%);background-size:22px 22px;background-position:0 0,11px 11px} .cvs-stage{position:relative;min-height:520px;overflow:hidden;outline:none;touch-action:none;cursor:default} .cvs-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--p-gold)} .cvs-canvas{position:absolute;left:50%;top:50%;height:2400px;transform-origin:center;box-shadow:0 30px 60px -20px #000;overflow:hidden;background:#3a2a20} .cvs-art{position:absolute;inset:0 auto 0 0;height:2400px} .cvl{position:absolute} .cvt{display:flex;align-items:center;justify-content:center;line-height:1.35;font-weight:700} .cvt .cvt-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:pre-wrap;overflow-wrap:anywhere} .cvt.vert .cvt-in{writing-mode:vertical-rl} .cvt .cvt-in:not(:last-child){color:transparent !important} .cvs-sel{position:absolute;z-index:999;border:calc(2px / var(--k,1)) solid #3B82F6;pointer-events:none} .cvs-sel.locked{border-style:dashed;border-color:#aaa} .cvs-sel i{position:absolute;width:calc(12px / var(--k,1));height:calc(12px / var(--k,1));margin:calc(-6px / var(--k,1));background:#fff;border:calc(2px / var(--k,1)) solid #3B82F6;pointer-events:auto} .cvs-sel.locked i{display:none} .cvs-sel i[data-h="nw"]{left:0;top:0;cursor:nwse-resize}.cvs-sel i[data-h="n"]{left:50%;top:0;cursor:ns-resize}.cvs-sel i[data-h="ne"]{left:100%;top:0;cursor:nesw-resize} .cvs-sel i[data-h="e"]{left:100%;top:50%;cursor:ew-resize}.cvs-sel i[data-h="se"]{left:100%;top:100%;cursor:nwse-resize}.cvs-sel i[data-h="s"]{left:50%;top:100%;cursor:ns-resize} .cvs-sel i[data-h="sw"]{left:0;top:100%;cursor:nesw-resize}.cvs-sel i[data-h="w"]{left:0;top:50%;cursor:ew-resize} .cvs-guide{position:absolute;top:0;bottom:0;width:0;border-left:calc(2px / var(--k,1)) dashed #EC4899;z-index:998;pointer-events:none} .cvs-safe{position:absolute;inset:118px;border:calc(2px / var(--k,1)) dashed rgba(255,255,255,.75);z-index:997;pointer-events:none;box-shadow:0 0 0 9999px rgba(236,72,153,.08)} .cvs-canvas[data-kind="spine"] .cvs-safe{inset:118px 30px} .cvs-spv{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px;color:#EDE3CB;font-size:13px;font-weight:700} .cvs-spv input{accent-color:#E6CC8A;width:160px} .cvs-spv output{min-width:7em} .cvs-spv select{font:13px var(--ui);padding:4px 6px;border-radius:6px;border:0;background:#EDE3CB;color:#2A1D14} .cvs-hint{margin:0;padding:6px 12px 10px;text-align:center;font-size:12.5px;color:#cbbfa8} /* الخصائص */ .cvp-empty{display:grid;gap:4px;text-align:center;padding:30px 10px;color:var(--p-muted);font-size:13px} .cvp-empty b{font:700 16px var(--display);color:var(--p-ink)} .cvp-h{display:flex;align-items:center;gap:8px} .cvp-h input{flex:1;min-width:0;font:700 15px var(--display);padding:5px 8px;border:1px solid var(--p-line);border-radius:7px;background:var(--p-sheet);color:var(--p-ink)} .cvbox{border:1px solid var(--p-line);border-radius:9px;background:var(--p-sheet)} .cvbox summary{font:700 13px var(--ui);padding:7px 10px;cursor:pointer;color:var(--p-ink)} .cvbox summary small{font-weight:400;color:var(--p-muted);font-size:11px} .cvbox > div{display:grid;gap:8px;padding:0 10px 10px} .cvf{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--p-muted)} .cvf.col{display:grid;gap:3px} .cvf input[type="number"],.cvf select{font:13px var(--ui);padding:4px 6px;border:1px solid var(--p-line);border-radius:6px;background:var(--p-white,#fff);color:var(--p-ink);min-width:0;width:100%} .cvf input[type="range"]{accent-color:var(--p-btn);width:100%} .cvg4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .cvg4 .cvf{display:grid;gap:2px} .cvrow{display:flex;gap:6px;flex-wrap:wrap} .cvseg{display:flex;border:1px solid var(--p-line);border-radius:7px;overflow:hidden} .cvseg button{flex:1;font:700 12px var(--ui);padding:5px 4px;border:0;border-inline-start:1px solid var(--p-line);background:none;color:var(--p-ink);cursor:pointer} .cvseg button:first-child{border-inline-start:0} .cvseg button.on{background:var(--p-btn);color:var(--p-on)} .cvsw{position:relative;width:40px;height:22px;border:0;background:none;cursor:pointer;padding:0;flex:none} .cvsw::before{content:"";position:absolute;inset:6px 2px;border-radius:6px;background:var(--p-line)} .cvsw i{position:absolute;top:4px;inset-inline-start:3px;width:14px;height:14px;transform:rotate(45deg);background:var(--p-sheet);border:1.5px solid var(--p-muted);transition:inset-inline-start .25s var(--stamp)} .cvsw.on::before{background:color-mix(in srgb,var(--p-gold) 60%,var(--p-line))} .cvsw.on i{inset-inline-start:22px;background:var(--p-rubric);border-color:var(--p-rubric)} .cv-sw{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .cv-sw button{width:22px;height:22px;border-radius:50%;border:2px solid var(--p-white,#fff);background:var(--c);box-shadow:0 0 0 1px var(--p-line);cursor:pointer;padding:0} .cv-sw button.on{box-shadow:0 0 0 2px var(--p-btn)} .cv-sw input{width:28px;height:24px;border:1px solid var(--p-line);border-radius:6px;padding:0;background:none;cursor:pointer} .cvp-note{margin:0;font-size:11.5px;line-height:1.6;color:var(--p-muted)} .cvvs{display:flex;flex-wrap:wrap;gap:6px} .cvv{display:grid;gap:2px;justify-items:center;width:56px;padding:3px;border:1px solid var(--p-line);border-radius:7px;background:none;cursor:pointer;color:var(--p-ink)} .cvv i{width:44px;aspect-ratio:17/24;border-radius:2px;background:var(--img) center/cover no-repeat #3a2a20;font-style:normal;display:grid;place-items:center;color:var(--p-gold-d);font-size:18px} .cvv.up i{background:none;border:1px dashed var(--p-gold-d)} .cvv small{font-size:10.5px} .cvv.on{border-color:var(--p-btn);box-shadow:0 0 0 1px var(--p-btn)} .cvs-props textarea{width:100%;font:15px/1.6 var(--display);padding:6px 8px;border:1px solid var(--p-line);border-radius:7px;background:var(--p-white,#fff);color:var(--p-ink);resize:vertical} .cvfp{font-size:24px;line-height:1.5;text-align:center;padding:4px;border-radius:6px;background:var(--p-vellum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cvsts{display:grid;gap:5px} .cvst{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--p-muted)} .cvst b{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--p-vellum);color:var(--p-ink);font-size:11px} .cvst input[type="color"]{width:30px;height:24px;border:1px solid var(--p-line);border-radius:5px;padding:0;background:none} .cvst input[type="number"]{width:52px;font:12.5px var(--ui);padding:3px 5px;border:1px solid var(--p-line);border-radius:5px;background:var(--p-white,#fff);color:var(--p-ink)} .cvst .cvs-ib{min-width:24px;height:24px;font-size:11px;margin-inline-start:auto} .sw2{display:grid;gap:18px;justify-items:center} .sw2-book{display:flex;align-items:stretch;height:300px;filter:drop-shadow(0 20px 22px rgba(42,29,20,.45))} .sw2-spine{position:relative;display:block;width:30px;height:300px;overflow:hidden;border-radius:3px 0 0 3px;transition:width .3s var(--pen)} .sw2-spine .rsp{position:absolute;inset:0 auto 0 0} .sw2-front{width:212px;background:url(/img/examples/cover-riyad.webp) center/cover;border-radius:0 4px 4px 0;box-shadow:inset 6px 0 8px -4px rgba(0,0,0,.45)} .sw2-ctl{display:grid;gap:10px;justify-items:center;font-size:14px;color:var(--p-ink)} .sw2-ctl label{display:grid;gap:4px;justify-items:center} .sw2-ctl input{accent-color:var(--p-btn);width:240px} .sw2-out b{font:700 22px var(--display);color:var(--p-rubric)} /* ===== الطِّراز ===== */ /* بطاقة المود كما في باب «الطِّراز» (tiraz.css) */ .tzd{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:28px;align-items:center;padding:26px} .tzc{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;border:1px solid var(--p-line);border-radius:12px;background:var(--p-sheet);color:var(--p-ink);transition:border-color .25s,box-shadow .25s} .tzc.on{border-color:color-mix(in srgb,var(--p-gold) 70%,var(--p-line));box-shadow:0 16px 32px -26px rgba(42,29,20,.55)} .tzc-band{height:120px;border-radius:11px 11px 0 0;overflow:hidden;transition:filter .3s,opacity .3s} .tzc-band svg{display:block;width:100%;height:100%} .tzc:not(.on) .tzc-band{filter:grayscale(.75) brightness(1.05);opacity:.7} .tzc-flame{transform-origin:200px 60px;animation:flick 1.1s ease-in-out infinite alternate} .tzc-halo{animation:halo 2.4s ease-in-out infinite alternate} @keyframes halo{from{opacity:.75}to{opacity:1}} .tzc-cb{display:grid;gap:9px;padding:12px 14px} .tzc-ch{display:flex;align-items:start;justify-content:space-between;gap:10px} .tzc-cn{display:grid;min-width:0} .tzc-cn b{font:700 20px/1.35 var(--display);color:var(--p-rubric)} .tzc-cn small{color:var(--p-muted);font-size:12px} .tzc-desc{margin:0;font-size:13.5px;line-height:1.85} .tzc-chips{display:flex;flex-wrap:wrap;gap:5px} .tzc-chips span{font:700 11.5px/1.8 var(--ui);padding:0 9px;border-radius:999px;background:var(--p-vellum);color:var(--p-muted);border:1px solid var(--p-line)} .tzc-cf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px} .tzc-acts{display:inline-flex;gap:5px;align-items:center} .tzc-btn{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--ui);padding:4px 11px;border-radius:6px;border:1px solid var(--p-line);background:var(--p-sheet);color:var(--p-ink);cursor:pointer} .tzc-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tzc-btn.ib{padding:4px} .tzc-btn:disabled{opacity:.35;cursor:default} .tzc-btn.on{border-color:var(--p-gold);background:color-mix(in srgb,var(--p-gold) 12%,var(--p-sheet))} .tzc-sets{display:grid;gap:2px;padding:8px 10px;border-radius:9px;background:var(--p-vellum);border:1px solid var(--p-line)} .tzc-sets[hidden]{display:none} .tzc-set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px;font-size:13.5px} .tzc-set > span:first-child{display:grid} .tzc-set small{color:var(--p-muted);font-size:11.5px} .tzc-rg{display:inline-flex;align-items:center;gap:8px} .tzc-rg input{width:120px;accent-color:var(--p-btn)} .tzc-rg output{font:700 12px var(--ui);color:var(--p-muted);min-width:3em;text-align:center} .tz-switch{position:relative;flex:none;width:46px;height:24px;padding:0;border:0;background:none;cursor:pointer} .tz-switch::before{content:"";position:absolute;inset:7px 2px;border-radius:6px;background:var(--p-line);transition:background-color .25s} .tz-switch i{position:absolute;top:4px;inset-inline-start:4px;width:16px;height:16px;transform:rotate(45deg);background:var(--p-sheet);border:1.5px solid var(--p-muted);transition:inset-inline-start .3s var(--stamp),background-color .25s,border-color .25s} .tz-switch[aria-checked="true"]::before{background:color-mix(in srgb,var(--p-gold) 60%,var(--p-line))} .tz-switch[aria-checked="true"] i{inset-inline-start:26px;background:var(--p-rubric);border-color:var(--p-rubric)} .tzd-how{display:grid;gap:16px;justify-items:start;color:var(--p-ink)} .tzd-how .btn:disabled{opacity:.45;pointer-events:none} .tzd-st{margin:0;font-size:14px;font-weight:700;color:var(--p-gold-d);min-height:1.6em} @keyframes flick{0%{transform:scale(1) skewX(0)}25%{transform:scale(1.05,1.12) skewX(-4deg)}50%{transform:scale(.95,1.02) skewX(3deg)}75%{transform:scale(1.04,1.15) skewX(-2deg)}100%{transform:scale(1,1.06) skewX(2deg)}} /* المود في شريط الصفحة: زرّ السِّراج سراج زيت، يتّقد لهبه في السِّراج وينطفئ في النهار */ .lamp-mod [data-lamp] > svg:not(.lm-ic svg){display:none} .lm-ic{position:relative;display:inline-block;width:24px;height:20px;color:var(--gold);vertical-align:middle} .lm-ic svg{position:absolute;inset:auto 0 0;width:24px;height:20px;overflow:visible} .lm-fl{position:absolute;left:9px;top:-7px;width:7px;height:12px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 80%,#FFF7D6 0 18%,#FFD36B 35%,#F28A2E 65%,rgba(220,80,30,0) 75%);transform-origin:50% 90%;transform:scale(0);opacity:0;filter:blur(.2px);transition:transform .45s var(--stamp),opacity .3s} .wq.night.lamp-mod .lm-fl{opacity:1;transform:scale(1);animation:flick 1.1s ease-in-out .45s infinite alternate} .lm-striking .lm-fl{transition-delay:.23s} .lm-sp,.lm-sm{position:absolute;left:5px;top:-10px;width:14px;height:14px;pointer-events:none} .lm-sp i{position:absolute;left:6px;top:6px;width:2.5px;height:2.5px;border-radius:50%;background:#FFD36B;box-shadow:0 0 4px #FFB04A;animation:spark .7s ease-out forwards} @keyframes spark{from{opacity:1;transform:translate(0,0)}to{opacity:0;transform:translate(var(--dx),var(--dy))}} .lm-sm i{position:absolute;left:2px;top:0;width:10px;height:10px;border-radius:50%;background:rgba(200,200,200,.6);filter:blur(2px);animation:smoke 1.6s ease-out forwards} @keyframes smoke{from{opacity:.8;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--dx),-34px) scale(2.2)}} .wq.night.lamp-mod [data-lamp]{color:#F0D79C;text-shadow:0 0 10px rgba(255,190,90,.55)} .ws-bar .lm-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(160px 90px at var(--lm-x,70%) 50%,rgba(255,190,90,var(--lm-g,0)),transparent 70%);transition:background 1s} [data-lamp].lm-pulse{animation:lm-pulse 1.4s ease-out 2} @keyframes lm-pulse{0%{box-shadow:0 0 0 0 rgba(214,179,106,.7)}100%{box-shadow:0 0 0 16px rgba(214,179,106,0)}} /* الكود يتبع الموقع: ورقٌ فاتح نهاراً، ولازوردٌ داكن في السِّراج */ .wq{--code-bg:#F7F2E7;--code-ink:#2A1D14;--code-line:#E4DCCB;--code-k:#8A4B12;--code-s:#1F6B45;--code-n:#1C4E80;--code-c:#8A7A66;--code-btn:rgba(42,29,20,.08)} .wq.night{--code-bg:#0A1220;--code-ink:#EDE3CB;--code-line:#24375A;--code-k:#E7C98A;--code-s:#A6E3B0;--code-n:#8FD3E8;--code-c:#7D8BA3;--code-btn:rgba(255,255,255,.1)} .fx-demo.code{padding:0;overflow:hidden;background:var(--code-bg);box-shadow:inset 0 0 0 1px var(--code-line)} .fx-code{margin:0;padding:18px 20px;font:12.5px/1.7 ui-monospace,Consolas,monospace;color:var(--code-ink);text-align:left;overflow:auto;max-height:440px} .fx-code .c-k{color:var(--code-k);font-weight:700} .fx-code .c-s{color:var(--code-s)} /* ===== الذكاء الاصطناعي ===== */ /* خطوات المفتاح: صور AI Studio وعليها حلقةٌ تنبض حيث تنقر */ .ak{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start} .ak-steps{display:grid;gap:8px} .ak-steps button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:center;width:100%;text-align:start;padding:10px 12px;border-radius:12px;border:1px solid var(--p-line);background:var(--p-white,#fff);cursor:pointer;color:var(--p-ink);transition:all .25s} .ak-steps i{grid-row:span 2;font-style:normal;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--p-gold);font:700 15px var(--display);color:var(--p-gold-d)} .ak-steps b{font:700 14.5px/1.4 var(--ui)} .ak-steps span{font-size:12px;color:var(--p-muted)} .ak-steps li.on button{border-color:var(--p-btn);box-shadow:0 0 0 1px var(--p-btn)} .ak-steps li.on i,.ak-steps li.done i{background:var(--p-btn);border-color:var(--p-btn);color:var(--p-on)} .ak-stage{display:grid;gap:12px;min-width:0} .ak-shot{margin:0;display:grid;gap:10px;animation:fx-in .35s var(--pen) both} .ak-img{position:relative;direction:ltr;border-radius:12px;overflow:hidden;box-shadow:0 18px 36px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);background:#1b1b1d} .ak-img.narrow{width:min(100%,420px);justify-self:center} .ak-img img{display:block;width:100%;height:auto} .ak-hl{position:absolute;border:2.5px solid #F2C94C;border-radius:9px;box-shadow:0 0 0 4px rgba(242,201,76,.25);animation:ak-pulse 1.6s ease-out infinite} .ak-hl.soft{border-style:dashed;animation:none;box-shadow:none} @keyframes ak-pulse{0%{box-shadow:0 0 0 0 rgba(242,201,76,.65)}100%{box-shadow:0 0 0 14px rgba(242,201,76,0)}} .ak-shot figcaption{font-size:15px;line-height:1.9;color:var(--p-ink)} .ak-shot figcaption a{color:var(--p-rubric);font-weight:700} .ak-shot code,.aik code{font:12.5px ui-monospace,Consolas,monospace;background:var(--p-vellum);border-radius:4px;padding:1px 5px} .ak-nav{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:700;color:var(--p-muted)} /* لوحة الإعدادات كما في البرنامج */ .aik{display:grid;gap:14px} .aik-scopes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .aik-scopes button{display:flex;align-items:center;gap:10px;text-align:start;padding:10px 12px;border-radius:12px;border:1px solid var(--p-line);background:var(--p-white,#fff);color:var(--p-ink);cursor:pointer;font:inherit} .aik-scopes i{font-style:normal;width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--p-vellum);color:var(--p-gold-d)} .aik-scopes span{display:grid;min-width:0} .aik-scopes b{font:700 15px var(--display)} .aik-scopes small{font-size:11.5px;color:var(--p-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aik-scopes [aria-selected="true"]{border-color:var(--p-btn);box-shadow:0 0 0 1px var(--p-btn)} .aik-scopes [aria-selected="true"] i{background:var(--p-btn);color:var(--p-on)} .aik-panel{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-white,#fff);color:var(--p-ink)} .aik-panel h4{margin:0;font:700 15px var(--ui);color:var(--p-rubric)} .aik-panel h4 small{font-weight:400;font-size:12px;color:var(--p-muted)} .aik-key{position:relative} .aik-key input{width:100%;font:14px ui-monospace,Consolas,monospace;padding:9px 12px;padding-inline-end:70px;border:1px solid var(--p-line);border-radius:8px;background:var(--p-vellum);color:var(--p-ink)} .aik-demo{position:absolute;top:50%;inset-inline-end:8px;translate:0 -50%;font:700 11px var(--ui);padding:2px 8px;border-radius:999px;background:var(--p-gold);color:#2A1D14} .aik-detect{font-size:13.5px;color:var(--ok)} .aik-models{display:grid;gap:4px;font-size:13.5px} .aik-models > b{font-size:13px;color:var(--p-muted)} .aik-models label{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--p-line);border-radius:8px;cursor:pointer} .aik-models label:has(input:checked){border-color:var(--p-btn);box-shadow:0 0 0 1px var(--p-btn)} .aik-models input{accent-color:var(--p-btn)} .aik-models em{margin-inline-start:auto;font:700 11.5px var(--ui);font-style:normal;padding:2px 8px;border-radius:999px;background:var(--p-vellum);color:var(--p-muted)} .aik-models .old code{text-decoration:line-through;text-decoration-color:#b33a3a;opacity:.8} .aik-models .old em{background:color-mix(in srgb,#b33a3a 14%,transparent);color:#b33a3a} .aik-models .best em{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)} .aik .nm{font-weight:700} .aik-models small{font-size:12px;color:var(--p-muted);line-height:1.7} .aik-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .aik-fill{flex:1} .aik-btn{font:700 13px var(--ui);padding:7px 13px;border-radius:8px;border:1px solid var(--p-line);background:var(--p-sheet);color:var(--p-ink);cursor:pointer;white-space:nowrap} .aik-btn:hover:not(:disabled){border-color:var(--p-gold-d)} .aik-btn:disabled{opacity:.4;cursor:default} .aik-btn.pri{background:var(--p-btn);border-color:var(--p-btn);color:var(--p-on)} .aik-msg{margin:0;min-height:1.6em;font-size:13.5px;font-weight:700;color:var(--p-muted)} .aik-msg.ok{color:var(--ok)} .aik-msg.warn{color:#b0701a} .wq.night .aik-msg.warn{color:#F0C27A} .aik-msg.err{color:var(--err)} .aik-reuse{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:12px;border:1.5px dashed var(--p-gold);font-size:13.5px;color:var(--p-ink);animation:fx-in .3s both} .aik-chain{display:grid;gap:6px} .aik-chain li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--p-line);border-radius:9px;background:var(--p-sheet);animation:fx-in .3s both} .aik-chain li.empty{display:block;color:var(--p-muted);font-size:13.5px;background:none;border-style:dashed} .aik-chain i{font-style:normal;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--p-btn);color:var(--p-on);font-weight:700;font-size:12px} .aik-chain span{display:grid;gap:2px;min-width:0} .aik-chain b{font-size:14px} .aik-chain small{font-weight:400;color:var(--p-muted)} .aik-chain em{font:700 11.5px var(--ui);font-style:normal;color:var(--ok)} .aik-chain button{border:0;background:none;color:var(--p-muted);cursor:pointer;font-size:13px} .ai-warn{border:1.5px solid color-mix(in srgb,var(--gold) 55%,transparent)} /* ===== الشاشات ===== */ @media (max-width:1180px){ .tn,.ai,.tzd{grid-template-columns:minmax(0,1fr)} .ed-body{grid-template-columns:minmax(0,1fr)} .mu-ctl{max-height:none;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:20px} .mu-ctl fieldset{border-bottom:1px solid var(--p-line)} } @media (max-width:1180px){ .cvs-body{grid-template-columns:200px minmax(0,1fr)} .cvs-props{grid-column:1 / -1;max-height:none;border-inline-start:0;border-top:1px solid var(--p-line);display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));align-items:start} .cvs-props .cvp-h{grid-column:1 / -1} } @media (max-width:1023.98px){ .fx{grid-template-columns:minmax(0,1fr)} .fx-side{position:sticky;top:var(--bar-h);height:auto;flex-direction:row;align-items:center;gap:4px;padding:8px 10px;overflow-x:auto;overflow-y:hidden;border-inline-end:0;border-bottom:3px solid var(--gold);scrollbar-width:none;z-index:30} .fx-side::-webkit-scrollbar{display:none} .fx-side-h,.fx-sp,.fx-side-dl,.fx-door kbd{display:none} .fx-door{grid-template-columns:auto auto;gap:7px;padding:9px 13px;font-size:14px;white-space:nowrap;flex:none} .fx-door svg{width:18px;height:18px} .fx-door[aria-current="page"]::before{display:none} .fx-main{padding-top:26px} [data-v3] .fxpage .ws-bar{position:relative} .fxpage .fx-side{top:0} .fx-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fx-feat{grid-template-columns:minmax(0,1fr)} .fx-feat.rev .fx-txt{order:0} .ls,.ak{grid-template-columns:minmax(0,1fr)} .ak-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .st{grid-template-columns:minmax(0,1fr)} .st-list{grid-row:auto;display:flex;flex-wrap:wrap;justify-content:center} } @media (max-width:760px){ .as-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .ticks.two,.aik-scopes{grid-template-columns:minmax(0,1fr)} .mu-spread{flex-direction:column;align-items:center;gap:10px} .mu-spread > .mzw{flex:none;width:min(100%,380px)} .pt-strip{grid-template-columns:minmax(0,1fr)} .ai-sheet.has-side{padding-inline-end:24px} .ai-sheet .side{position:static;width:auto;margin-top:4px} .rl-frame{height:72vh;min-height:420px} .cvs-body{grid-template-columns:minmax(0,1fr)} .cvs-layers{order:2;border-inline-end:0;border-top:1px solid var(--p-line)} .cvs-stage{min-height:440px} .kx-desk{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .fx-grid{grid-template-columns:minmax(0,1fr)} .fx-demo{padding:14px} .fx-tabs button{padding:10px 18px;font-size:15px} .tn-row{grid-template-columns:minmax(0,1fr)} .ed-sheet,.ai-sheet{padding:18px 18px 14px;font-size:16px} .fx-pn a{min-width:0;flex:1} .kx{padding:14px} .kx-desk{grid-template-columns:minmax(0,1fr)} .kx .cell{min-height:180px;padding-inline:10px} .rs-spec{min-width:0;width:100%} } @media (prefers-reduced-motion:reduce){.tzc-flame,.lm-fl{animation:none !important}}