/* «مجسّم» — ستايل صفحة ألبوم A10 ثلاثي الأبعاد (ملف منفصل حتى يمشي ويا CSP الموقع: style-src 'self') */
:root{--bg:#efe9e0;--bg-hi:#fbf8f3;--bg-lo:#d9d0c2;--ink:#221e19;--muted:#6c6256;--gold:#a87d3c;--card:#fbf8f3;--chip:#fffdf9;
 --line:rgba(34,30,25,.15);--on:#221e19;--on-ink:#fbf8f3;--wa:#1d7f46;--glass:rgba(255,253,249,.82);
 --ui:"Tajawal",system-ui,"Segoe UI",Tahoma,sans-serif;--display:"El Messiri","Times New Roman",serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1a1714;--bg-hi:#2c2722;--bg-lo:#0f0d0b;--ink:#f1ebe2;--muted:#ab9f91;--gold:#d2a65e;
 --card:#231f1b;--chip:#2c2722;--line:rgba(241,235,226,.16);--on:#f1ebe2;--on-ink:#1a1714;--wa:#25a35a;--glass:rgba(30,26,22,.84);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1a1714;--bg-hi:#2c2722;--bg-lo:#0f0d0b;--ink:#f1ebe2;--muted:#ab9f91;--gold:#d2a65e;
 --card:#231f1b;--chip:#2c2722;--line:rgba(241,235,226,.16);--on:#f1ebe2;--on-ink:#1a1714;--wa:#25a35a;--glass:rgba(30,26,22,.84);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--ui)}
button,input,a{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
bdi{unicode-bidi:isolate}
[hidden]{display:none!important}
/* المجسّم: يلزق فوق والتصميم يمشي تحته */
.stage{position:sticky;top:env(safe-area-inset-top,0px);z-index:2;height:54svh;min-height:330px;max-height:760px;overflow:hidden;
 background:radial-gradient(ellipse 70% 60% at 50% 40%,var(--bg-hi) 0,var(--bg) 55%,var(--bg-lo) 100%);border-bottom:1px solid var(--line)}
@media (min-width:900px){.stage{height:66vh}}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}
canvas:active{cursor:grabbing}
.head{position:absolute;top:10px;inset-inline:16px;text-align:center;pointer-events:none}
.head b{display:block;font:600 1.35rem/1.35 var(--display);text-wrap:balance}
.head span{display:block;font-size:.85rem;color:var(--muted)}
.nav{position:absolute;bottom:10px;inset-inline:16px;display:flex;justify-content:center;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 16px;border-radius:999px;
 border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;text-decoration:none;font-size:.95rem}
.btn:disabled{opacity:.35;cursor:default}
.count{min-width:7.5em;text-align:center;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;background:var(--glass);border-radius:999px;padding:4px 10px}
.count:empty{display:none}
.loading,.fallback{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding-inline:24px;color:var(--muted)}
.fallback img{width:min(70%,360px);aspect-ratio:3/4;object-fit:cover;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.fallback p{margin:0;max-width:30em;color:var(--ink)}
/* التصميم: خطوات مرقّمة */
.cfg{max-width:1120px;margin-inline:auto;padding:20px 16px 56px;display:grid;gap:14px}
@media (min-width:760px){.cfg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cfg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cfg>header{grid-column:1/-1;display:grid;gap:2px}
.cfg>header h1{margin:0;font:600 1.55rem/1.4 var(--display);text-wrap:balance}
.cfg>header p{margin:0;color:var(--muted)}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px;align-content:start;min-width:0}
.step h2{margin:0;font-size:1.02rem;font-weight:600;display:flex;gap:10px;align-items:center}
.step h2 i{font-style:normal;flex:none;width:28px;height:28px;border-radius:50%;background:var(--on);color:var(--on-ink);display:grid;place-items:center;font-size:.85rem}
.step h2 em{font-style:normal;font-weight:400;color:var(--muted);font-size:.9rem}
.note{margin:0;font-size:.88rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chip{min-height:44px;padding:6px 14px;border-radius:12px;border:1px solid var(--line);background:var(--chip);cursor:pointer;font-size:.95rem;
 display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.3}
.chip small{font-size:.75rem;color:var(--muted)}
.chip[aria-pressed=true]{background:var(--on);color:var(--on-ink);border-color:var(--on)}
.chip[aria-pressed=true] small{color:inherit;opacity:.8}
.chip.sw{flex-direction:row;gap:8px;padding-inline:10px 14px}
.chip.sw span{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 0 0 2px var(--chip)}
.mono{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.mono label{display:grid;gap:4px;font-size:.8rem;color:var(--muted)}
.mono .amp{font:400 1.6rem "Aref Ruqaa","Pinyon Script",serif;color:var(--muted);padding-bottom:6px}
.in{height:54px;text-align:center;background:var(--chip);border:1px solid var(--line);border-radius:12px}
.in.ch{width:60px;font:700 1.7rem "Aref Ruqaa","Pinyon Script",serif;text-transform:uppercase}
.in.dt{width:10.5em;font:500 1.05rem "Cormorant Garamond",Georgia,serif;letter-spacing:.1em}
.sum{grid-column:1/-1}
.sum dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 16px}
.sum dt{color:var(--muted);font-size:.9rem}
.sum dd{margin:0;font-weight:500;min-width:0}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn.wa{background:var(--on);border-color:var(--on);color:var(--on-ink);font-weight:600;height:52px;padding:0 22px;backdrop-filter:none}
.btn.ghost{background:var(--chip);backdrop-filter:none;height:52px}
.num{font-variant-numeric:tabular-nums;user-select:all}
#shareBox{width:100%;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--chip);padding-inline:10px;direction:ltr}
.fine{margin:0;padding-inline-start:1.2em;font-size:.85rem;color:var(--muted);display:grid;gap:2px}
.back{font-size:.9rem;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}