/* ═══════════════════════════════════════════════════════════════════
   ثيم الحكاية — استمارة التطوّع
   ═══════════════════════════════════════════════════════════════════

   ورق كريمي، حبر أسود، وخطّان بالفرشاة: تركوازي وكورال. الفكرة إن
   الصفحة تُقرأ كحكاية بفصول، مش كنموذج إداري.

     #fffaf2  كريمي فاتح   الورق
     #f8f0e5  كريمي غامق   الأسطح المرفوعة
     #101010  حبر          النص
     #079aaa  تركوازي      الثانوي والخلفيات العميقة
     #f04b3d  كورال        الفعل والتوكيد
     #f4bd55  أصفر         كروت الملاحظات اللاصقة

   الملف ده للصفحات العامة وحدها. لوحة التحكم على theme.css الأصلي
   — الاتنين مستقلّين تمامًا.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --cream:#fffaf2;  --cream-2:#f8f0e5;  --cream-3:#f1e5d4;
  --ink:#101010;    --ink-2:#3d3a37;    --ink-3:#736c64;
  --teal:#079aaa;   --teal-d:#046874;   --teal-l:#d5eef1;
  --coral:#f04b3d;  --coral-d:#c9382c;  --coral-l:#fde3e0;
  --yellow:#f4bd55; --yellow-l:#fdf0d6;

  --paper:var(--cream);
  --line:#e3d6c3;
  --r:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --pop:cubic-bezier(.34,1.56,.64,1);

  --sh-s:0 2px 0 rgba(16,16,16,.08);
  --sh-m:0 10px 26px rgba(16,16,16,.09);
  --sh-l:0 22px 50px rgba(16,16,16,.13);

  --display:'Baloo Bhaijaan 2','Tajawal',system-ui,sans-serif;
  --body:'Tajawal',system-ui,'Segoe UI',sans-serif;
}

/* الوضع الليلي: نفس الحكاية بحبر مقلوب — الورق بيبقى لوح داكن */
:root[data-theme="dark"] {
  --cream:#16211f;  --cream-2:#1d2b29;  --cream-3:#26332f;
  --ink:#f6efe4;    --ink-2:#d8cfc2;    --ink-3:#9aa8a2;
  --teal-l:#123c42;  --coral-l:#3a1d18;  --yellow-l:#3a2f16;
  --line:#2f403c;
  --sh-s:0 2px 0 rgba(0,0,0,.3);
  --sh-m:0 10px 26px rgba(0,0,0,.4);
  --sh-l:0 22px 50px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box}

html{ scroll-behavior:smooth }

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.8;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* حبيبات الورق — SVG مدمج، مافيش أي طلب شبكة زيادة */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::before{ mix-blend-mode:screen; opacity:.16 }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.25;
  margin:0;
  letter-spacing:-.2px;
}

a{color:var(--teal-d)}
:root[data-theme="dark"] a{color:var(--teal)}

::selection{background:var(--yellow);color:var(--ink)}

/* ══════════════════ الفرشاة والتوكيد ══════════════════
   الكلمة المهمة عليها ضربة فرشاة خشنة ورا النص — الحواف غير
   منتظمة عن قصد عشان تبان مرسومة باليد مش مستطيل. */
.brush{position:relative;white-space:nowrap;z-index:0}
.brush::before{
  content:'';position:absolute;z-index:-1;
  inset:.12em -.42em .06em -.42em;
  background:var(--coral);
  border-radius:44% 56% 48% 52% / 62% 38% 60% 40%;
  transform:rotate(-1.1deg) skewX(-3deg);
  opacity:.92;
}
.brush.teal::before{background:var(--teal)}
.brush.yellow::before{background:var(--yellow)}
.brush.on-dark, .brush.teal, .brush:not(.yellow){color:var(--cream)}
.brush.yellow{color:var(--ink)}
:root[data-theme="dark"] .brush:not(.yellow){color:#fff}

/* توكيد بخط تحت الكلمة — أهدأ من الفرشاة */
.mark{position:relative;white-space:nowrap}
.mark::after{
  content:'';position:absolute;left:-.1em;right:-.1em;bottom:-.14em;height:.34em;
  background:var(--yellow);opacity:.6;z-index:-1;
  border-radius:60% 40% 55% 45% / 100% 100% 90% 90%;
}

/* ══════════════════ الأزرار ══════════════════ */
.btn{
  font-family:var(--display);
  font-size:1rem;font-weight:800;
  border:2px solid var(--ink);
  border-radius:100px;
  padding:.72rem 1.7rem;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--cream);color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .16s var(--pop), box-shadow .16s var(--ease), background .18s;
  text-decoration:none;
}
.btn:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--ink)}

.btn-main{background:var(--coral);color:#fff;border-color:var(--ink)}
.btn-teal{background:var(--teal);color:#fff}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn-ghost:hover{background:var(--cream-3);box-shadow:none;transform:none}
.btn-lg{font-size:1.18rem;padding:.95rem 2.4rem;box-shadow:4px 5px 0 var(--ink)}
.btn-sm{font-size:.86rem;padding:.5rem 1.1rem;box-shadow:2px 2px 0 var(--ink)}

:root[data-theme="dark"] .btn{border-color:var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.6)}

/* ══════════════════ الكروت ══════════════════ */

/* كرت ورق عادي بحوافّ يدوية */
.card{
  background:var(--cream-2);
  border:2px solid var(--ink);
  border-radius:var(--r);
  padding:1.5rem 1.6rem;
  box-shadow:4px 5px 0 rgba(16,16,16,.13);
}

/* ملاحظة لاصقة — صفرا ومايلة شوية */
.note{
  background:var(--yellow);
  color:var(--ink);
  border:none;
  border-radius:3px;
  padding:1.4rem 1.5rem 1.6rem;
  box-shadow:var(--sh-m);
  transform:rotate(-1.3deg);
  transition:transform .2s var(--pop);
}
.note:nth-child(even){transform:rotate(1.1deg);background:#f7cd77}
.note:hover{transform:rotate(0) scale(1.02)}
/* شريط لاصق فوق */
.note::before{
  content:'';position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:76px;height:22px;background:rgba(255,255,255,.55);
  border:1px solid rgba(16,16,16,.08);
}
.note{position:relative}

/* كرت كشكول بسلك حلزوني */
.spiral{
  position:relative;
  background:var(--cream-2);
  border:2px solid var(--ink);
  border-radius:var(--r);
  padding:1.5rem 1.6rem 1.5rem 1.6rem;
  padding-inline-start:2.7rem;
  box-shadow:4px 5px 0 rgba(16,16,16,.13);
}
/* الثقوب على الحافة اللي جهة البداية (يمين في RTL) */
.spiral::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:2.1rem;
  border-inline-end:2px dashed var(--line);
  background:
    radial-gradient(circle at center, var(--paper) 0 4.5px, transparent 5px) center/100% 30px repeat-y;
}
/* السطور المسطّرة */
.spiral.lined{
  background-image:repeating-linear-gradient(transparent 0 33px, var(--teal-l) 33px 34px);
  background-position:0 1.5rem;
}

/* ══════════════════ الدوودلز ══════════════════ */
.doodle{display:inline-block;vertical-align:middle;color:currentColor}
.doodle svg{display:block;overflow:visible}

/* شخبطات صغيرة بتتحط حوالين العناصر */
.sparks{position:absolute;pointer-events:none;color:var(--coral);opacity:.9}

/* ══════════════════ الفصول ══════════════════ */
.chapter{position:relative;padding:clamp(2.6rem,7vw,4.4rem) 0}
.chapter + .chapter{border-top:2px dashed var(--line)}

.ch-num{
  font-family:var(--display);font-weight:800;
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.82rem;letter-spacing:.14em;
  color:var(--teal-d);
  text-transform:uppercase;
  margin-bottom:.55rem;
}
.ch-num i{
  font-style:normal;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--teal);color:#fff;font-size:.9rem;
  box-shadow:2px 2px 0 var(--ink);
}
:root[data-theme="dark"] .ch-num{color:var(--teal)}

.ch-t{font-size:clamp(1.55rem,4.6vw,2.4rem);margin-bottom:.5rem}
.ch-d{color:var(--ink-2);font-size:clamp(.98rem,2.4vw,1.08rem);max-width:60ch}

/* ══════════════════ حاويات ══════════════════ */
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 1.15rem}
.narrow{max-width:720px}

.grid{display:grid;gap:1.1rem}
@media(min-width:720px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
}

/* ══════════════════ الحقول ══════════════════ */
label{display:block;font-weight:800;margin-bottom:.5rem;color:var(--ink);font-size:.98rem}

input,select,textarea{
  width:100%;
  font-family:var(--body);font-size:1rem;font-weight:600;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:12px;
  padding:.78rem .95rem;
  transition:box-shadow .18s var(--ease), border-color .18s, background .18s;
  box-shadow:2px 2px 0 rgba(16,16,16,.1);
}
textarea{min-height:118px;resize:vertical;line-height:1.85}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal);
  box-shadow:3px 3px 0 var(--teal);
  background:var(--cream);
}
input::placeholder,textarea::placeholder{color:var(--ink-3);font-weight:500}

select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23101010' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 1rem center;
  padding-inline-start:2.4rem;
}
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f6efe4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hint{color:var(--ink-3);font-size:.85rem;font-weight:600;margin:.4rem 0 0}
.req{color:var(--coral);font-weight:800}

/* ══════════════════ مساعدات ══════════════════ */
.sp{margin-inline-start:auto}
.muted{color:var(--ink-3)}
.center{text-align:center}
.hidden{display:none !important}

.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--display);font-weight:800;font-size:.8rem;
  background:var(--teal);color:#fff;
  border-radius:100px;padding:.34rem 1rem;
  box-shadow:2px 2px 0 var(--ink);
}
.pill.coral{background:var(--coral)}
.pill.yellow{background:var(--yellow);color:var(--ink)}

/* ══════════════════ الحركة ══════════════════ */
.rise{opacity:0;transform:translateY(22px)}
.rise.in{opacity:1;transform:none;transition:opacity .6s var(--ease), transform .7s var(--ease)}
.rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.16s}
.rise.d3{transition-delay:.24s}.rise.d4{transition-delay:.32s}
.rise.d5{transition-delay:.4s}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes wig{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes dash{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rise{opacity:1;transform:none}
}