/* بيرق — نظام التصميم */
:root{
 --sand:#F5ECD8;--shell:#FFFAF0;--white:#FFFFFF;
 --sea:#0E8A8C;--sea-soft:rgba(14,138,140,.1);
 --henna:#D2553A;--henna-soft:rgba(210,85,58,.1);
 --saffron:#E6A532;--saffron-soft:rgba(230,165,50,.14);
 --palm:#1E5A45;--ink:#2A211C;--muted:#7C6B5B;--line:#E6D7BC;
 --ok:#1E8A4F;--bad:#C2412B;
 --display:'Reem Kufi','Readex Pro',Tahoma,sans-serif;
 --body:'Readex Pro',Tahoma,'Segoe UI',sans-serif;
 --ease:cubic-bezier(.22,.9,.25,1);
 --sadu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18'%3E%3Crect width='24' height='18' fill='%232A211C'/%3E%3Cpath d='M0 18L6 9L12 18ZM12 18L18 9L24 18Z' fill='%23D2553A'/%3E%3Cpath d='M0 0L6 9L12 0ZM12 0L18 9L24 0Z' fill='%230E8A8C'/%3E%3Cpath d='M6 6.5L8 9L6 11.5L4 9ZM18 6.5L20 9L18 11.5L16 9Z' fill='%23FFFAF0'/%3E%3C/svg%3E");
 color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;direction:rtl;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:10px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;text-wrap:balance}
[hidden]{display:none!important}
.sadu{height:14px;background:var(--sadu) repeat-x 0 0/19px 14px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;color:var(--palm)}
.logo img{height:1.6em;width:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:16px;font-weight:600;font-size:17px;transition:transform .15s var(--ease),box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--palm);color:var(--shell);box-shadow:0 10px 24px -12px rgba(30,90,69,.8)}
.btn.sea{background:var(--sea);color:var(--shell)}
.btn.henna{background:var(--henna);color:var(--shell)}
.btn.ghost{background:var(--white);border:1.5px solid var(--line);color:var(--ink)}
a.btn{text-decoration:none}
.btn.block{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;padding:5px 14px;border-radius:99px;background:rgba(30,90,69,.1);color:var(--palm)}
.muted{color:var(--muted)}
.card{background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 40px -28px rgba(42,33,28,.5)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--sand);padding:4px;border-radius:14px}
.seg button{padding:10px 6px;border-radius:11px;color:var(--muted);font-weight:500;transition:all .2s}
.seg button.on{background:var(--white);color:var(--ink);font-weight:600;box-shadow:0 2px 8px rgba(42,33,28,.12)}
label.field{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
input.inp{width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);font-size:18px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
input.inp:focus{outline:0;border-color:var(--sea);box-shadow:0 0 0 4px var(--sea-soft)}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--shell);padding:12px 18px;border-radius:14px;font-weight:600;z-index:50;max-width:90vw;text-align:center;animation:pop .3s var(--ease)}
.fade{animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
@keyframes pop{from{opacity:0;transform:translate(-50%,8px) scale(.96)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.shake{animation:shake .4s}

/* السارية والبيرق */
.pole{position:relative;width:100%;height:100%}
.pole::before{content:'';position:absolute;inset-inline-end:10%;top:2%;bottom:0;width:7%;min-width:5px;border-radius:5px;background:linear-gradient(90deg,#5b3f22,#9a7446 45%,#8a6538 55%,#4d341b)}
.pole::after{content:'';position:absolute;inset-inline-end:calc(10% - 3px);top:0;width:calc(7% + 6px);min-width:11px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1bf,#d4a13a 55%,#7d5410)}
.flag{position:absolute;inset-inline-end:17%;width:78%;height:24%;bottom:4%;transition:bottom 1.4s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 6px 10px rgba(42,33,28,.18))}
.flag svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes wave{50%{transform:skewY(-4deg) scaleX(.97)}}

/* احتفال السدو */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.confetti i{position:absolute;top:-30px;width:14px;height:14px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:fall cubic-bezier(.3,.1,.6,1) forwards;opacity:.9}
.confetti i.pearl{width:11px;height:11px;clip-path:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#efe7d8 60%,#cbbd9f)}
@keyframes fall{to{transform:translateY(110vh) rotate(300deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* الصفحة الرئيسية */
.home{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:24px;padding:24px 18px calc(24px + env(safe-area-inset-bottom))}
.home .top{display:flex;justify-content:center}
.hero{display:grid;gap:26px;align-content:center;justify-items:center;text-align:center;max-width:520px;margin:0 auto;width:100%}
.hero img{width:120px;height:auto;filter:drop-shadow(0 16px 20px rgba(14,138,140,.25))}
.hero h1{font-size:64px;line-height:1;color:var(--palm)}
.hero p{margin:0;font-size:20px;font-family:var(--display)}
.hero p span{color:var(--henna)}
.choices{display:grid;gap:12px;width:100%}
.choice{display:grid;gap:4px;text-align:right;padding:18px 20px;border-radius:20px;background:var(--white);border:1.5px solid var(--line);transition:transform .2s var(--ease),border-color .2s}
.choice:hover{border-color:var(--sea);transform:translateY(-2px)}
.choice b{font-size:19px}.choice small{color:var(--muted);font-size:14px}
.choice.main{background:var(--palm);color:var(--shell);border-color:var(--palm)}.choice.main small{color:rgba(255,250,240,.8)}
a.choice{text-decoration:none;color:inherit}.foot-note{text-align:center;margin:0;font-size:13px}