/* ==========================================================
   الفوسفوري — minademyan.tech
   ورق مذكرة فاتح + قلم تحديد أصفر + أزرق كهربائي.
   التحديد مش زينة: بيعلّم على اللي مهم فعلاً في التجربة.
   تصميم أحادي عن قصد — كل لون متكتوب صريح.
   ========================================================== */
:root{
  --paper:#FCFBF5;
  --paper-2:#F4F1E4;
  --line:#E2DDC9;
  --line-2:#CFC8AC;
  --ink:#15140E;
  --ink-2:#565243;
  --ink-3:#8B8571;
  --hi:#FFE24A;          /* قلم التحديد */
  --hi-soft:#FFF4B0;
  --pop:#2438E8;         /* أزرق كهربائي — الأفعال */
  --pop-ink:#FFFFFF;
  --fail:#E23A2E;
  --win:#0E9B57;
  --maxw:700px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--paper);
  /* سطور مذكرة خفيفة */
  background-image:repeating-linear-gradient(to bottom,transparent 0 37px,var(--line) 37px 38px);
  font-family:"Readex Pro",system-ui,-apple-system,sans-serif;
  font-weight:300; font-size:16px; line-height:2.375rem;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Baloo Bhaijaan 2",system-ui,sans-serif; font-weight:800;
  line-height:1.3; text-wrap:balance; margin:0}
a{color:var(--pop)}
.wrap{max-width:var(--maxw); margin-inline:auto; padding:0 20px}

/* ============ التحديد ============ */
.hl{
  background-image:linear-gradient(100deg,var(--hi) 0%,var(--hi) 100%);
  background-repeat:no-repeat; background-size:100% 45%;
  background-position:0 78%; padding:0 3px; border-radius:2px;
}

/* ============ رأس الموقع ============ */
.top{
  border-bottom:2px solid var(--ink); background:var(--paper);
  position:sticky; top:0; z-index:30;
}
.top .wrap{display:flex; align-items:center; justify-content:space-between;
  height:58px; gap:12px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.brand .mark{
  width:28px; height:28px; flex:none; background:var(--hi); color:var(--ink);
  font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800; font-size:17px;
  display:grid; place-items:center; border:2px solid var(--ink);
  border-radius:7px; transform:rotate(-5deg);
}
.brand .nm{font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800; font-size:19px}
.top .eyebrow{font-size:12px; color:var(--ink-3); font-weight:600}

/* ============ الورقة ============ */
.sheet{background:transparent; max-width:var(--maxw); margin-inline:auto; position:relative}
.sheet-in{padding:30px 20px 44px}
@media (min-width:720px){ .sheet-in{padding:40px 0 52px} }

/* ============ بوليصة التجربة ============ */
.docket{
  border:2.5px solid var(--ink); border-radius:12px; margin-bottom:26px;
  background:var(--paper); overflow:hidden;
  box-shadow:5px 5px 0 var(--hi);
}
.docket .row{display:grid; grid-template-columns:repeat(3,1fr)}
.docket .cell{padding:11px 12px; border-inline-start:2px solid var(--ink)}
.docket .cell:first-child{border-inline-start:0}
.docket .k{font-size:10.5px; letter-spacing:.09em; font-weight:600;
  color:var(--ink-3); display:block; margin-bottom:2px; line-height:1.6}
.docket .v{font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800;
  font-size:20px; color:var(--ink); line-height:1.25}
.docket .bar{
  background:var(--ink); color:var(--hi); padding:7px 13px; font-weight:600;
  font-size:11.5px; letter-spacing:.1em; display:flex;
  justify-content:space-between; align-items:center; line-height:1.7;
}

/* ============ المقال ============ */
.title{font-size:clamp(32px,8vw,54px); margin:0 0 18px; letter-spacing:-.01em}
article{font-size:17.5px; color:var(--ink-2); line-height:2.375rem}
article > *{max-width:60ch}
article p{margin:0 0 24px}
article p.lead{font-size:19.5px; color:var(--ink); font-weight:400; margin-bottom:30px}
article strong{color:var(--ink); font-weight:600}
article h2{
  font-size:clamp(24px,5.2vw,32px); color:var(--ink); margin:52px 0 16px;
  display:flex; align-items:baseline; gap:11px;
}
article h2::before{
  content:""; flex:none; width:14px; height:14px; background:var(--hi);
  border:2px solid var(--ink); border-radius:4px; transform:rotate(-8deg);
}
article h3{font-size:21px; color:var(--ink); margin:38px 0 12px;
  display:flex; align-items:center; gap:11px}
article h3 .n{
  flex:none; width:30px; height:30px; display:grid; place-items:center;
  background:var(--hi); color:var(--ink); font-size:15px; font-weight:800;
  border:2px solid var(--ink); border-radius:8px; transform:rotate(-6deg);
  line-height:1;
}
article ul,article ol{margin:0 0 26px; padding-inline-start:0; list-style:none}
article li{margin-bottom:12px; padding-inline-start:26px; position:relative}
article li::before{
  content:""; position:absolute; inset-inline-start:0; top:15px;
  width:9px; height:9px; background:var(--pop); border-radius:50%;
}

/* اقتباس بارز — محدّد بالقلم */
.pull{
  font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800;
  font-size:clamp(21px,4.8vw,28px); line-height:1.55; color:var(--ink);
  margin:38px 0; max-width:none; padding:0;
  background-image:linear-gradient(100deg,var(--hi) 0%,var(--hi) 100%);
  background-repeat:no-repeat; background-size:100% 92%;
  background-position:0 50%;
  padding:14px 16px; border-radius:4px; transform:rotate(-.6deg);
}

/* ============ الأختام ============ */
.verdict{display:flex; align-items:center; gap:12px; margin:22px 0 28px;
  font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800; font-size:18px;
  color:var(--ink); flex-wrap:wrap}
.stamp{
  display:inline-block; font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800;
  font-size:15px; padding:3px 15px; border:2.5px solid var(--ink);
  border-radius:999px; line-height:1.6;
}
.stamp.win{background:var(--hi); color:var(--ink)}
.stamp.fail{background:var(--fail); color:#fff; border-color:var(--fail)}
.verdict:has(.stamp.fail) > span:last-child{
  text-decoration:line-through; text-decoration-color:var(--fail);
  text-decoration-thickness:2.5px; color:var(--ink-3);
}

/* ============ بنود الإيصال ============ */
.items{margin:32px 0; max-width:none; border:2.5px solid var(--ink);
  border-radius:12px; overflow:hidden; background:var(--paper)}
.items .hd{
  font-size:11.5px; letter-spacing:.09em; font-weight:600; line-height:1.7;
  background:var(--ink); color:var(--hi); padding:8px 15px;
  display:flex; justify-content:space-between;
}
.item{
  display:flex; align-items:baseline; gap:9px; padding:12px 15px;
  border-top:1.5px solid var(--line);
}
.item:nth-child(2){border-top:0}
.item .lbl{color:var(--ink-2); font-size:15.5px; line-height:1.7}
.item .dots{flex:1; border-bottom:2px dotted var(--line-2); min-width:16px;
  transform:translateY(-5px)}
.item .val{font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800;
  font-size:19px; color:var(--ink); white-space:nowrap; line-height:1.4}
.item .val.hi{color:var(--fail)}
.item .val.lo{color:var(--win)}
.item .tag{font-size:11.5px; color:var(--ink-3)}
.cap{font-size:12.5px; color:var(--ink-3); margin:12px 0 32px;
  max-width:60ch; line-height:1.85}

/* ============ دعوة الاشتراك ============ */
.invite,.desk-invite{
  max-width:none; margin:40px 0; border:2.5px solid var(--ink);
  border-radius:14px; background:var(--hi-soft); overflow:hidden;
  box-shadow:6px 6px 0 var(--ink);
}
.invite .bar{background:var(--ink); color:var(--hi); padding:7px 15px;
  font-size:11.5px; letter-spacing:.1em; font-weight:600; line-height:1.7}
.invite .in,.desk-invite{padding:22px 20px}
.invite .in{display:flex; gap:18px; align-items:center;
  justify-content:space-between; flex-wrap:wrap}
.desk-invite{display:flex; gap:18px; align-items:center;
  justify-content:space-between; flex-wrap:wrap; background:var(--hi-soft)}
.invite .tx,.desk-invite .tx{flex:1; min-width:210px}
.invite h3,.desk-invite h3{font-size:23px; color:var(--ink); margin:0 0 5px}
.invite p,.desk-invite p{font-size:14.5px; color:var(--ink-2); margin:0; line-height:1.8}

/* ============ الأزرار ============ */
.btn{
  font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800; font-size:17px;
  cursor:pointer; background:var(--pop); color:var(--pop-ink);
  border:2.5px solid var(--ink); padding:11px 28px; border-radius:10px;
  box-shadow:4px 4px 0 var(--ink); transition:transform .1s, box-shadow .1s;
  white-space:nowrap; line-height:1.6;
}
.btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.5; cursor:default; transform:none; box-shadow:4px 4px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.btn.wide{width:100%}
.btn.blue{background:var(--ink); color:var(--hi)}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

/* ============ الرئيسية ============ */
.hero{padding:54px 0 30px}
.hero h1{font-size:clamp(34px,8.8vw,60px); margin-bottom:20px; letter-spacing:-.015em}
.hero h1 em{font-style:normal;
  background-image:linear-gradient(100deg,var(--hi) 0%,var(--hi) 100%);
  background-repeat:no-repeat; background-size:100% 42%;
  background-position:0 76%; padding:0 4px;
}
.hero .lede{color:var(--ink-2); font-size:17.5px; max-width:50ch; margin:0}

.slug{font-size:11.5px; letter-spacing:.1em; font-weight:600; color:var(--ink-3);
  border-bottom:2.5px solid var(--ink); padding-bottom:9px; margin:40px 0 0;
  display:flex; justify-content:space-between; line-height:1.7}

.post{
  display:grid; grid-template-columns:auto 1fr; gap:0 16px; align-items:start;
  text-decoration:none; color:inherit; padding:24px 0;
  border-bottom:1.5px solid var(--line);
}
.post .no{
  font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800; font-size:19px;
  color:var(--ink); background:var(--paper-2); border:2px solid var(--ink);
  border-radius:9px; width:40px; height:40px; display:grid; place-items:center;
  line-height:1; transition:background .16s, transform .16s;
}
.post:hover .no{background:var(--hi); transform:rotate(-7deg)}
.post h3{font-size:24px; color:var(--ink); margin:0 0 7px; line-height:1.4}
.post p{font-size:14.5px; color:var(--ink-2); margin:0 0 9px; line-height:1.85}
.post .meta{font-size:12px; font-weight:600; color:var(--ink-3);
  display:flex; gap:9px; flex-wrap:wrap; line-height:1.8}
.post .meta .s{opacity:.4}

/* ============ النافذة ============ */
.veil{
  position:fixed; inset:0; background:rgba(21,20,14,.55);
  display:none; align-items:flex-end; justify-content:center; z-index:60;
}
.veil[data-open="1"]{display:flex}
@media (min-width:560px){ .veil{align-items:center; padding:20px} }

.modal{
  background:var(--paper); color:var(--ink); width:100%; max-width:415px;
  border:2.5px solid var(--ink); border-radius:16px 16px 0 0; overflow:hidden;
  position:relative; animation:rise .2s cubic-bezier(.2,.8,.3,1);
}
@media (min-width:560px){ .modal{border-radius:16px; box-shadow:8px 8px 0 var(--hi)} }
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .modal{animation:none} }

.modal .bar{
  background:var(--ink); color:var(--hi); padding:9px 15px; font-weight:600;
  font-size:11.5px; letter-spacing:.1em; display:flex;
  justify-content:space-between; align-items:center; line-height:1.7;
}
.modal .bar button{background:none; border:0; color:var(--hi); cursor:pointer;
  font-size:19px; line-height:1; padding:0 2px; font-family:inherit}
.modal .in{padding:22px 20px 20px}
.modal h2{font-size:26px; margin:0 0 7px; color:var(--ink)}
.modal .sub{color:var(--ink-2); font-size:14.5px; margin:0 0 20px; line-height:1.8}
.modal .sub b{color:var(--ink); font-weight:600}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:15px}
.field label{font-size:11.5px; letter-spacing:.09em; font-weight:600;
  color:var(--ink-3); line-height:1.7}
.field input{
  font-family:inherit; font-size:16px; padding:12px 13px; line-height:1.6;
  border:2.5px solid var(--ink); background:var(--paper); color:var(--ink);
  border-radius:9px;
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{outline:0; background:var(--hi-soft); box-shadow:3px 3px 0 var(--hi)}

.check{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  border:2.5px dashed var(--line-2); border-radius:10px;
  padding:13px; margin:6px 0 16px; transition:border-color .15s, background .15s;
}
.check:hover{border-color:var(--ink); background:var(--hi-soft)}
.check input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:21px; height:21px; margin:5px 0 0; border:2.5px solid var(--ink);
  background:var(--paper); border-radius:6px; cursor:pointer; display:grid;
  place-items:center;
}
.check input:checked{background:var(--hi)}
.check input:checked::after{content:"✓"; color:var(--ink); font-size:13px;
  font-weight:700; line-height:1}
.check input:focus-visible{outline:3px solid var(--pop); outline-offset:2px}
.check .t{font-size:14px; color:var(--ink); line-height:1.75}
.check .t span{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}

.err{color:var(--fail); font-size:13px; min-height:20px; margin:-8px 0 8px;
  font-weight:400; line-height:1.6}
.fine{font-size:11.5px; color:var(--ink-3); text-align:center; margin:13px 0 0;
  line-height:1.7}

.done{text-align:center; padding:16px 0 8px}
.done .tick{
  width:58px; height:58px; margin:0 auto 16px; background:var(--hi);
  border:2.5px solid var(--ink); color:var(--ink); display:grid;
  place-items:center; font-size:28px; border-radius:16px;
  transform:rotate(-6deg); font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800;
}

/* ============ التذييل ============ */
footer.site{border-top:2.5px solid var(--ink); margin-top:48px; padding:26px 0 50px}
footer.site .wrap{display:flex; justify-content:space-between; gap:14px;
  flex-wrap:wrap; font-size:12.5px; font-weight:600; color:var(--ink-3); line-height:1.8}
footer.site a{color:var(--ink-2); text-decoration:none}
footer.site a:hover{color:var(--pop)}

/* ================= صفحة اللينكات ================= */
.lk-page{max-width:520px; margin-inline:auto; padding:0 20px 60px}
.lk-head{text-align:center; padding:46px 0 30px}
.lk-avatar{
  width:82px; height:82px; margin:0 auto 18px; background:var(--hi);
  border:3px solid var(--ink); border-radius:24px; display:grid;
  place-items:center; font-family:"Baloo Bhaijaan 2",sans-serif;
  font-weight:800; font-size:38px; color:var(--ink);
  transform:rotate(-5deg); box-shadow:5px 5px 0 var(--ink);
}
.lk-head h1{font-size:33px; margin:0 0 8px}
.lk-head p{font-size:15px; color:var(--ink-2); margin:0; line-height:1.85; max-width:34ch;
  margin-inline:auto}

.lk-sec{margin-top:34px}
.lk-sec .lbl{
  font-size:11.5px; letter-spacing:.11em; font-weight:600; color:var(--ink-3);
  display:flex; align-items:center; gap:10px; margin-bottom:14px; line-height:1.7;
}
.lk-sec .lbl::after{content:""; flex:1; height:2px; background:var(--line)}

.lk{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
  background:var(--paper); border:2.5px solid var(--ink); border-radius:13px;
  padding:14px 16px; margin-bottom:11px; box-shadow:4px 4px 0 var(--ink);
  transition:transform .11s, box-shadow .11s, background .11s;
}
.lk:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); background:var(--hi-soft)}
.lk:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--ink)}
.lk:focus-visible{outline:3px solid var(--pop); outline-offset:3px}
.lk .ic{
  flex:none; width:42px; height:42px; border-radius:11px; background:var(--hi);
  border:2px solid var(--ink); display:grid; place-items:center; font-size:19px;
  font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800;
}
.lk .tx{flex:1; min-width:0}
.lk .t{font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800; font-size:16.5px;
  display:block; line-height:1.5}
.lk .s{font-size:12.5px; color:var(--ink-3); display:block; line-height:1.6;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lk .arw{flex:none; color:var(--ink-3); font-size:19px; font-weight:700}
.lk:hover .arw{color:var(--pop)}

/* الأصول ليها لون مختلف — دي اللي الفيديوهات بتوعد بيها */
.lk-sec[data-sec="assets"] .lk{background:var(--hi-soft)}
.lk-sec[data-sec="assets"] .lk .ic{background:var(--paper)}

.lk-news{
  border:2.5px solid var(--ink); border-radius:14px; background:var(--pop);
  color:#fff; padding:20px; margin-top:34px; box-shadow:5px 5px 0 var(--ink);
  text-align:center;
}
.lk-news h3{font-size:21px; margin:0 0 5px; color:#fff}
.lk-news p{font-size:13.5px; margin:0 0 15px; line-height:1.8; opacity:.92}
.lk-news .btn{background:var(--hi); color:var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.35)}

.lk-foot{text-align:center; margin-top:34px; font-size:12.5px; color:var(--ink-3)}
.lk-foot a{color:var(--ink-2); text-decoration:none; font-weight:600}
.lk-skel{height:70px; border:2.5px dashed var(--line); border-radius:13px;
  margin-bottom:11px; opacity:.5}