/* style.css — دعوة خطوبة مصطفى وروان · الإصدار ٢: ظرف عاجي مختوم بالشمع ← لوحة القوس والبجعتين ← أقسام ورقية بحواف ممزّقة
   RTL بالخصائص المنطقية · الحركة كلها في app.js (Web Animations API) · ألوان وخطوط من setup/spec-v2.md */
:root{color-scheme:only light;
--paper:#F6EDDA;--paper-hi:#FAF4E8;--band:#E9DCC8;--band-lo:#DDCDBA;
--env:#E3D7CB;--env-top:#E7DDD2;--env-side:#E0D3C6;--env-bot:#DACCBD;
--gold:#9C7B42;--gold-hero:#9A7A45;--gold-num:#9C7B42;--gold-soft:#BFA273;--gold-line:#B7A58A;
--ink:#6E6153;--ink-soft:#71655A;--ink-mute:#766A5E;
--wax:#5E1219;--wax-hi:#7A1A1E;--error:#9B1C1C;--focus:#7A1A1E;
--f-script:"Aref Ruqaa","Amiri","Geeza Pro",serif;--f-quran:"Amiri Quran","Amiri","Geeza Pro",serif;--f-serif:"Markazi Text","Amiri","Geeza Pro",serif;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--col:min(100vw,480px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img.missing{visibility:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;background:#EFE4D0}
body{margin:0;min-height:100svh;background:linear-gradient(rgb(236 225 205/.6),rgb(236 225 205/.6)),#EFE4D0 url(assets/paper.jpg) repeat;background-size:auto,512px;color:var(--ink);font:400 21px/1.65 var(--f-serif);overflow-x:clip;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block}
button,input,textarea,output{font:inherit;color:inherit}
button{-webkit-appearance:none;appearance:none;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#names:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ph{text-decoration:underline dashed var(--gold);text-underline-offset:.2em}
.ic{width:22px;height:22px;flex:none}
.chev{width:22px;height:11px;color:currentColor;overflow:visible}

/* ── الحالات العامة ── */
#fallback{max-width:480px;margin:0 auto;padding:48px 24px;text-align:center;font-size:22px;background:var(--paper)}
#fallback h1{font:400 56px/1.3 var(--f-script);color:var(--gold-hero)}
#fallback .fb-basmala{font:400 24px/2 var(--f-quran);color:var(--gold-hero)}
.js #fallback{display:none}
.failed #fallback{display:block}
html:not(.js) main,html.failed main{display:none}
html:not(.rendered) main,html:not(.rendered) #env{visibility:hidden}
html.env-lock.rendered:not(.failed){overflow:hidden;overscroll-behavior:none}
html.anim .rv:not(.in){opacity:0}

/* ══════════ الافتتاحية: الظرف ══════════ */
#env{position:fixed;inset:0;z-index:30;display:none;background:#D8CABB;overflow:hidden}
html.env-on.rendered:not(.failed) #env{display:block}
html.env-out #env{pointer-events:none}
@media (min-width:520px){#env{background:var(--grain),radial-gradient(120% 90% at 50% 47%,transparent 55%,rgb(120 92 66/.16)),var(--env)}.env-stage{box-shadow:0 0 0 1px rgb(150 120 90/.12),0 0 50px rgb(70 45 20/.16)}}
.env-stage{position:absolute;top:0;bottom:0;left:50%;width:var(--col);margin-left:calc(var(--col)/-2);overflow:hidden;background:#F2CF98;--sw:var(--col);box-shadow:0 0 70px rgb(70 45 20/.22)}
.env-btn{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;outline-offset:-6px}
.env-btn>*{position:absolute;pointer-events:none}
/* الضوء خلف الألسنة — يظهر من الشقوق */
.env-light{inset:0;opacity:0;background:radial-gradient(75% 62% at 50% 46%,#FFFBF0 0,#FFF0CF 22%,#FCDDA6 48%,#F2C68C 75%,#E6B47C 100%)}
/* اللسان: طبقة كاملة بحجم الشاشة مقصوصة بمضلّع يلتقي عند (٥٠٪، ٤٧٪) */
.flap{inset:0;will-change:transform;backface-visibility:hidden}
.face{position:absolute;inset:0;background:var(--grain),radial-gradient(130% 95% at 50% 46%,transparent 52%,rgb(120 92 66/.13) 100%),var(--env)}
.ft{transform-origin:50% 0}.fb{transform-origin:50% 100%}.fl{transform-origin:0 47%}.fr{transform-origin:100% 47%}
.ft .face{clip-path:polygon(0 0,100% 0,50% 47%);background-color:var(--env-top)}
.fb .face{clip-path:polygon(0 100%,100% 100%,50% 47%);background-color:var(--env-bot)}
.fl .face{clip-path:polygon(0 0,50% 47%,0 100%);background-color:var(--env-side)}
.fr .face{clip-path:polygon(100% 0,50% 47%,100% 100%);background-color:var(--env-side)}
.emb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 47%;z-index:1}
.shade{position:absolute;inset:0;opacity:0}
.ft .shade{background:linear-gradient(180deg,rgb(255 244 222/0) 10%,rgb(255 236 200/.55) 100%)}
.fb .shade{mix-blend-mode:multiply;background:radial-gradient(90% 70% at 50% 47%,rgb(140 110 85/.8),rgb(160 130 100/.6) 55%,rgb(178 152 126/.42) 100%)}
.fl .shade{background:linear-gradient(90deg,rgb(190 165 140/.08),rgb(170 138 108/.3) 70%,rgb(150 116 86/.45))}
.fr .shade{background:linear-gradient(270deg,rgb(190 165 140/.08),rgb(170 138 108/.3) 70%,rgb(150 116 86/.45))}
/* ضوء الحافة: خط عريض مموّه داخل كل لسان (القصّ يُظهر نصفه الداخلي فقط) */
.edge{position:absolute;inset:0;width:100%;height:100%;opacity:0;overflow:visible;filter:blur(5px);z-index:2}
.edge path{fill:none;stroke:#FFC983;stroke-width:16px;vector-effect:non-scaling-stroke}
.edge .e2{stroke:#FFF0CF;stroke-width:4px}
.fb .edge path{stroke:#F6CB8E;stroke-width:5px}
/* خطوط الطيّ */
.seams{inset:0;width:100%;height:100%}
.seams path{fill:none;stroke-width:1px;vector-effect:non-scaling-stroke}
.seams .sd{stroke:#A39079;stroke-opacity:.6}
.seams .sl{stroke:#FFFBF4;stroke-opacity:.75}
/* تسرّب الضوء على الشقوق الأربعة */
.leaks{inset:0;width:100%;height:100%;opacity:0;transform-origin:50% 47%;transform:scale(0);overflow:visible}
.leaks path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.leaks.core path{stroke:url(#lk-core);stroke-width:1.8px}
.leaks .lo{opacity:.3}
.leaks.bloom{filter:blur(6px)}
.leaks.bloom path{stroke:url(#lk-bloom);stroke-width:13px}
/* الختم الشمعي */
.seal-wrap{left:50%;top:47%;width:calc(var(--sw)*.33);aspect-ratio:1;margin:calc(var(--sw)*-.165) 0 0 calc(var(--sw)*-.165);transform-origin:50% 50%}
.seal-wrap>*{position:absolute}
.seal-glow{inset:-34%;border-radius:50%;opacity:0;background:radial-gradient(circle closest-side,rgb(255 246 222/1) 0,rgb(255 236 200/1) 40%,rgb(255 212 150/.95) 54%,rgb(250 180 100/.85) 60%,rgb(242 160 85/.38) 76%,rgb(242 166 90/0) 100%)}
.seal-ring{inset:0;width:100%;height:100%;opacity:0;overflow:visible}
.seal{inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 7px rgb(70 25 15/.36)) drop-shadow(0 1.5px 1.5px rgb(60 20 10/.45))}
.seal-warm{opacity:0}
.seal-iring{opacity:0}.seal-iring circle{fill:none}
.seal-glint{opacity:0}
.seal-line{fill:none;stroke:url(#wx-gold);stroke-width:.5;opacity:.5}
.mono text{font-family:"Amiri","Aref Ruqaa",serif;font-weight:700;font-size:47px;text-anchor:middle}
.mono .sh{fill:#1E0304;fill-opacity:.6}.mono .hl{fill:#FFE6C8;fill-opacity:.2}.mono .fc{fill:url(#wx-gold)}
.mono{opacity:0;transition:opacity .3s}
html.f-ruqaa .mono{opacity:1}
.hint{left:0;right:0;top:calc(47% + var(--sw)*.165 + 14px);display:flex;flex-direction:column;align-items:center;gap:4px;color:#5E544A;font:400 17px/1.4 var(--f-serif);opacity:0}
.hint .chev{width:18px;height:9px;opacity:.8}
.skip{position:absolute;top:max(6px,env(safe-area-inset-top));left:6px;min-width:44px;min-height:44px;padding:0 12px;color:#62584F;font:400 16px/1 var(--f-serif);z-index:2}
.skip:hover{color:var(--ink)}

/* ══════════ الصفحة ══════════ */
main{position:relative;max-width:480px;margin:0 auto;background:linear-gradient(rgb(246 237 218/.3),rgb(246 237 218/.3)),var(--paper) url(assets/paper.jpg) repeat;background-size:auto,512px;overflow:clip;text-align:center}
@media (min-width:520px){main{box-shadow:0 0 0 1px rgb(150 120 80/.07),0 0 70px rgb(90 60 30/.14)}}
.sec{position:relative;padding:56px 24px}
.script{font:400 34px/1.45 var(--f-script);color:var(--gold);word-spacing:.1em}

/* ── لوحة الرأس ── */
#hero{display:flow-root}
.hero-stage{position:relative;aspect-ratio:390/1040;margin-top:clamp(-36px,(100svh - 750px)*.5,0px);container-type:inline-size;background:linear-gradient(180deg,#EADFCB 0,#F7EEDC 14%,#F6EBD6 52%,#DCE0CB 66%,#C9D2BF 74%,#E8D7C8 86%,#E9DCC8 100%)}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-stage::after{content:"";position:absolute;inset:0 0 4.6% 0;background:var(--grain);pointer-events:none}
.hero-text{position:absolute;left:12%;right:12%;top:15.4%;color:var(--gold-hero);display:flex;flex-direction:column;align-items:center}
.h-kicker{font:400 min(9vw,43px)/1.3 var(--f-script);font-size:9cqw;word-spacing:.12em;color:#968050}
.h-date{font:500 max(24px,min(6.4vw,31px))/1.3 var(--f-serif);font-size:max(24px,6.4cqw);margin-top:1cqw;word-spacing:.18em;color:var(--gold-hero)}
#names{display:flex;flex-direction:column;align-items:center;margin-top:min(10vw,48px);margin-top:10cqw;font:400 min(20vw,96px)/1.12 var(--f-script);font-size:20cqw}
.nm{display:block;padding:0 .1em}
.nm-and{display:block;font-size:.62em;line-height:.8;margin:-.12em 0 -.06em;opacity:.9}
.h-scroll{position:absolute;left:30%;right:30%;top:52.4%;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--gold-hero);text-decoration:none;font:400 min(5vw,24px)/1.3 var(--f-script);font-size:5cqw;min-height:44px;word-spacing:.18em;color:#806437}
.h-scroll .chev{width:6.5cqw;height:3.25cqw;min-width:22px;min-height:11px}
.torn{display:block;width:100%;height:auto;aspect-ratio:390/48}
.hero-torn{position:absolute;left:0;right:0;bottom:-1px}

/* ── البسملة والمقدمة ── */
#opening,#program{--gold:#94743E;--gold-hero:#94743E;--ink:#665A4E;--ink-soft:#6A5D50;background:linear-gradient(rgb(233 220 200/.86),rgb(233 220 200/.86)),var(--band) url(assets/paper.jpg) repeat;background-size:auto,512px}
#opening{padding-top:30px;padding-bottom:52px}
.basmala{font:400 clamp(27px,8.2vw,33px)/2 var(--f-quran);color:var(--gold-hero)}
.tagline{margin-top:18px}
.tagline p{font:400 32px/1.5 var(--f-script);color:var(--gold);word-spacing:.1em}
.greet{margin-top:22px;color:var(--ink);max-width:21em;margin-inline:auto}
.greet .g1{font-size:22px;font-weight:500}
.greet .g2{font-size:21px;line-height:1.62;text-wrap:pretty}

/* ── شريط الورق الممزّق بين الأقسام ── */
.band{position:relative;display:flex;flex-direction:column;margin:-14px 0;pointer-events:none;z-index:1}
.band-body{display:block;height:26px;background:var(--band);margin:-1px 0}
.edge-x{position:relative;display:block;margin:-24px 0;pointer-events:none;z-index:1}
.flip,.band-rsvp .torn:first-child{transform:scaleX(-1)}
#notes:not([hidden])+.band{display:none}

/* ── العدّ التنازلي ── */
#countdown{padding-top:52px;padding-bottom:44px}
.cd-date{margin-top:4px;color:var(--ink-soft);font-size:clamp(16px,4.9vw,19px);text-wrap:balance}
.badge{margin-top:6px;color:var(--wax-hi);font-weight:600}
.sessions{margin-top:8px;color:var(--ink-soft);font-size:18px}
.cd{margin-top:22px}
html.cd-wait .cd-row{opacity:0}
.cd-row{display:flex;justify-content:center;align-items:flex-start}
.cd-cell{display:flex;flex-direction:column;align-items:center;min-width:62px}
.cd-cell .n{display:flex;direction:ltr;font:400 clamp(46px,15.4vw,60px)/1.15 var(--f-serif);color:var(--gold-num)}
.cd-cell .d{position:relative;display:block;width:.5em;text-align:center;overflow:hidden;padding:.06em 0}
.cd-cell .d span{display:block}
.cd-cell .d .old{position:absolute;left:0;right:0;top:.06em}
.cd-cell .u{display:block;margin-top:2px;font-size:18px;color:#7C694B}
.cd-sep{font:400 clamp(38px,12vw,48px)/1.25 var(--f-serif);color:var(--gold-num);padding:0 7px;opacity:.8}
.cd-msg{font-size:clamp(22px,6.6vw,30px);text-wrap:balance}
html.is-live .cal{display:none}
/* أثناء الحفل وبعده: الرسالة تأخذ مكان العنوان فوق سطر التاريخ */
html.is-live #countdown,html.is-past #countdown{display:flex;flex-direction:column;align-items:center}
html.is-live #countdown .cd,html.is-past #countdown .cd{order:-1;margin-top:0}
html.is-live .cd-date,html.is-past .cd-date{margin-top:8px}
.cal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 4px;margin-top:22px;font-size:17px;color:var(--ink-mute)}
.cal-btns{display:inline-flex;align-items:center;gap:2px}
.dot{color:var(--gold-soft);padding:0 2px}
.cal-hint{flex-basis:100%;font-size:15px;color:var(--ink-mute);max-width:24em;line-height:1.5}
.tlink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#82673B;font:400 17px/1.3 var(--f-serif);text-decoration:underline;text-decoration-color:rgb(176 141 79/.45);text-underline-offset:.32em;text-decoration-thickness:1px}
.tlink:hover{color:var(--ink)}

/* ── البرنامج ── */
#program{padding-top:50px;padding-bottom:52px}
.h-flank{display:flex;align-items:center;justify-content:center;gap:8px}
.h-flank .script{white-space:nowrap;font-size:34px}
.fls{width:74px;height:auto;aspect-ratio:90/24;flex:none}
.fls-r{transform:scaleX(-1)}
.tl{position:relative;width:min(100%,360px);margin:26px auto 0}
.tl-list li{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;min-height:88px;opacity:.75;transition:opacity .5s}
.tl-list li.on{opacity:1}
.tl-time{font:400 25px/1.2 var(--f-serif);color:#584D43}
.tl-title{font:400 22px/1.2 var(--f-serif);color:#584D43}
.tl-dot{justify-self:center;width:7px;height:7px;background:#8E7E6C;transform:rotate(45deg)}
.tl-line{position:absolute;left:50%;top:44px;bottom:0;width:1px;margin-left:-.5px;background:var(--gold-line)}
.tl-line::after{content:"";position:absolute;left:-3px;bottom:-3px;width:7px;height:7px;background:#8E7E6C;transform:rotate(45deg)}
.tl-rose{position:absolute;left:50%;top:0;width:50px;height:50px;margin-left:-25px;will-change:transform}

/* ── المكان ── */
#venue{padding-top:46px;padding-bottom:30px}
.petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.petal{position:absolute;top:0;width:18px;height:auto;aspect-ratio:24/32;opacity:0;will-change:transform,opacity}
#venue>*:not(.petals){position:relative;z-index:1}
.orn{width:126px;height:auto;aspect-ratio:140/20;margin:6px auto 14px}
.venue-name{font:500 26px/1.4 var(--f-serif);color:var(--ink)}
.venue-addr{color:var(--ink-soft);font-size:19px}
.venue-addr:empty{display:none}
.hall{width:calc(100% + 24px);max-width:430px;height:auto;aspect-ratio:360/210;margin:22px -12px 0}
.venue-links{display:flex;justify-content:center;gap:8px;margin-top:10px}

/* ── شريط الملاحظات (اختياري) ── */
.notes-band{position:relative;display:flex;flex-direction:column;margin:-6px 0;--gold:#94743E;--ink:#665A4E}
.notes-body{position:relative;background:linear-gradient(rgb(233 220 200/.86),rgb(233 220 200/.86)),var(--band) url(assets/paper.jpg) repeat;background-size:auto,512px;padding:70px 28px 80px;margin:-1px 0}
/* الغصن يتلاشى عند حافته العليا (السفلى للمقلوب) فلا ينقطع بخط مستقيم داخل الحافة الممزّقة */
.branch{position:absolute;width:62%;max-width:290px;height:auto;aspect-ratio:300/170;pointer-events:none;-webkit-mask-image:linear-gradient(#0000,#000 18px);mask-image:linear-gradient(#0000,#000 18px)}
.br-tr{top:-12px;right:-8px}
.br-bl{bottom:-12px;left:-8px;transform:rotate(180deg)}
.notes-list{position:relative;display:flex;flex-direction:column;gap:30px}
.note-t{font:400 32px/1.4 var(--f-script);color:var(--gold)}
.note-x{margin-top:6px;font-size:20px;color:var(--ink);max-width:20em;margin-inline:auto}

/* ── تأكيد الحضور ── */
#rsvp{padding-top:50px;padding-bottom:30px}
.rsvp-intro{margin-top:8px;font-size:20px;color:var(--ink);max-width:20em;margin-inline:auto}
.rsvp-seal{position:relative;display:block;width:136px;height:136px;margin:26px auto 0;border-radius:50%}
.rsvp-seal:focus-visible{outline-offset:6px}
.rs-glow{position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(circle,rgb(176 50 50/.26) 0,rgb(176 50 50/.12) 40%,rgb(176 50 50/0) 68%);opacity:.6;pointer-events:none}
.rs-wax{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 7px rgb(70 25 15/.32)) drop-shadow(0 1.5px 1.5px rgb(60 20 10/.4))}
.rs-lbl text{font:600 23px/1 var(--f-serif);text-anchor:middle}
.rs-lbl .sh{fill:#1E0304;fill-opacity:.55}.rs-lbl .fc{fill:url(#wx-gold)}
.rs-fl{fill:none;stroke:url(#wx-gold);stroke-width:.9;stroke-linecap:round}
.rsvp-tap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:14px;color:var(--gold);font:400 24px/1.4 var(--f-script);word-spacing:.15em}
.rsvp-tap .chev{width:20px;height:10px;color:var(--gold-soft)}
.rsvp-tap span{font-feature-settings:"calt" 0,"dlig" 0}
html.is-past #rsvp,html.is-past .cal{display:none}

/* ── الختام ── */
#closing{position:relative;padding:48px 0 0}
#closing .script{font-size:38px;padding:0 20px}
.signature{margin-top:2px;font:400 28px/1.4 var(--f-serif);color:#8E7A5C}
.bouquet{display:block;width:100%;height:auto;aspect-ratio:390/260;margin:2px 0 -1px}
.end-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 2px;margin-top:10px;padding:0 16px}
.credit{margin-top:6px;font-size:15px;color:var(--ink-mute)}

/* ── زر الموسيقى ── */
#music{position:fixed;z-index:20;right:max(16px,calc(50% - 224px));right:max(calc(16px + env(safe-area-inset-right)),calc(50% - 224px));bottom:calc(16px + env(safe-area-inset-bottom));width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#7A1C24,var(--wax) 60%,#4A0D13);color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgb(60 15 15/.35),0 1px 2px rgb(60 15 15/.4)}
#music svg{width:22px;height:22px;grid-area:1/1}
#music .ic-play{display:none}
#music[aria-pressed=false] .ic-play{display:block}
#music[aria-pressed=false] .ic-pause{display:none}
#music:active{transform:scale(.96)}

/* ── النوافذ السفلية ── */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:100vw;max-height:100svh}
dialog::backdrop{background:rgb(46 30 20/.42)}
.sheet-dlg{margin:auto auto 0;width:100%;max-width:480px}
.sheet-dlg[open]{display:block}
.dlg-body{position:relative;background:var(--paper-hi) url(assets/paper.jpg);background-size:512px;border-radius:22px 22px 0 0;padding:22px 22px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 -10px 34px rgb(60 35 15/.22);max-height:92svh;overflow:auto}
.dlg-body::before{content:"";width:44px;height:4px;border-radius:2px;background:rgb(156 140 124/.45);margin:-8px auto 0}
.dlg-title{font-size:32px}
.dlg-close{position:absolute;top:8px;left:8px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink-soft)}
#rsvp-form{width:100%;display:flex;flex-direction:column;gap:16px;text-align:start}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:500;color:var(--ink)}
.field label.req::after{content:' *';color:var(--wax-hi)}
input[type=text],input[type=url],textarea{width:100%;min-height:50px;padding:10px 14px;border:1px solid rgb(176 141 79/.55);border-radius:12px;background:rgb(255 252 245/.85);color:var(--ink);font-size:20px}
textarea{resize:vertical;min-height:72px}
input::placeholder,textarea::placeholder{color:var(--ink-mute);opacity:1}
input:focus,textarea:focus{outline:none;border-color:var(--wax-hi);box-shadow:0 0 0 2px rgb(122 26 30/.35)}
[aria-invalid=true]{border-color:var(--error)!important;box-shadow:0 0 0 1px var(--error) inset}
.err{display:flex;align-items:center;gap:6px;color:var(--error);font-size:17px}
.stepper{display:grid;grid-template-columns:50px 1fr 50px;gap:8px;width:min(100%,240px)}
.stepper button{height:50px;border:1px solid rgb(176 141 79/.55);border-radius:12px;background:rgb(255 252 245/.85);color:var(--gold);font-size:26px;line-height:1}
.stepper input{height:50px;min-height:0;padding-block:0;text-align:center;font-weight:600}
output{color:var(--ink-soft);font-size:17px}
.btn-wax{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:10px 20px;border-radius:14px;background:radial-gradient(120% 160% at 30% 20%,#8A2329,var(--wax) 60%,#480C12);color:#F6E3B4;font-weight:600;font-size:21px;box-shadow:0 4px 12px rgb(70 20 15/.28)}
.btn-wax[disabled]{opacity:.7;cursor:progress}
.btn-wax:active{transform:scale(.98)}
.help{color:var(--ink-mute);font-size:16px;text-align:center;line-height:1.5}
.status{color:var(--ink);font-weight:600;text-align:center;min-height:1.4em;font-size:18px}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:8px 20px;border:1px solid rgb(176 141 79/.6);border-radius:14px;background:rgb(255 252 245/.8);color:#8A6B3A;font-weight:500;text-decoration:none}
.sh-url{text-align:start;direction:ltr}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));translate:-50% 0;background:var(--paper-hi);border:1px solid rgb(176 141 79/.6);border-radius:999px;padding:8px 18px;color:#8A6B3A;font-weight:500;box-shadow:0 4px 16px rgb(46 34 22/.2);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.toast.show{opacity:1}

@media (max-width:340px){.tl-list li{grid-template-columns:1fr 40px 1fr}.tl-title{font-size:18px}.tl-time{font-size:22px}.cd-date{font-size:17px}}
/* متصفحات بلا showModal: النافذة تُثبَّت أسفل الشاشة */
.sheet-dlg.dlg-fb{position:fixed;left:0;right:0;bottom:0;margin:0 auto;z-index:40}
@media (prefers-reduced-motion:reduce){.tl-list li,.toast,.mono{transition:none}}
@media (forced-colors:active){.mono .fc,.rs-lbl .fc{fill:CanvasText}}