/* ============================================================
   The Nusuk Guide — "Midnight Navy" design system
   Implemented from the Claude Design guide (DESIGN_GUIDE.md):
   light page, one navy hue, Manrope only, calm tone.
   ============================================================ */
:root{
  --page:#F8FAFD;
  --ink:#1B2735;
  --ink-85:rgba(27,39,53,.85);
  --ink-60:rgba(27,39,53,.60);
  --ink-45:rgba(27,39,53,.45);
  --accent:#2C4E7E;
  --accent-hover:#24406A;
  --tint:#E7EEF8;
  --dark:#16233A;
  --on-dark-70:rgba(255,255,255,.70);
  --on-dark-accent:#8FB0DC;
  --surface:#FFFFFF;
  --hairline:rgba(27,39,53,.08);
  --card-border:rgba(44,78,126,.14);
  --maxw:1160px;
  --shadow-card:0 2px 12px rgba(27,39,53,.06);
  --shadow-card-hover:0 8px 24px rgba(27,39,53,.12);
  --shadow-btn:0 10px 24px rgba(44,78,126,.28);
  --shadow-panel:0 24px 48px rgba(22,35,58,.18);
}
/* KFGQPC Uthman Taha Naskh — the mushaf typeface, for all Arabic-script text.
   No Latin glyphs in the face + unicode-range = Latin always falls through to
   Manrope, and Latin-only pages never download it. size-adjust compensates
   for the face's small rendering size. */
@font-face{
  font-family:'Uthman Taha Naskh';
  src:url('/guide-assets/fonts/arabic.woff2') format('woff2'),
      url('/guide-assets/fonts/arabic.ttf') format('truetype');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  size-adjust:118%;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0670-06D3,U+200C-200E;
}
/* Manrope — the Latin UI typeface, self-hosted (no external Google Fonts).
   Variable font (weights 400–800) in two subsets: latin covers en/id/tr, and
   latin-ext adds the accents used by fr/es/de (é ü ñ ç ş ğ …). */
@font-face{
  font-family:'Manrope';
  src:url('/guide-assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';
  src:url('/guide-assets/fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Noto Sans Devanagari — self-hosted, Devanagari subset only (Latin falls
   through to Manrope). Only the Hindi (hi/) pages carry Devanagari text, so the
   unicode-range keeps every other language from ever downloading it. */
@font-face{
  font-family:'Noto Sans Devanagari';
  src:url('/guide-assets/fonts/devanagari.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:'Uthman Taha Naskh','Manrope',-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:inherit; line-height:1.2; color:var(--ink); margin:0}
p{margin:.7em 0}
a{color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; transition:color .15s ease}
a:hover{color:var(--accent-hover)}
img{max-width:100%; display:block; height:auto}
b,strong{color:var(--ink)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
@media(max-width:640px){.wrap{padding:0 16px}}
.ar{font-style:normal; font-family:'Uthman Taha Naskh','Manrope',-apple-system,"Segoe UI",sans-serif}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 18px; z-index:200; border-radius:0 0 10px 0; font-weight:700; font-size:14px; text-decoration:none}
.skip:focus{left:0}

/* ---- nav (sticky, light glass) ---- */
.site{position:sticky; top:0; z-index:60; background:rgba(248,250,253,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline)}
.site .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.logomark{width:32px; height:32px; border-radius:10px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; flex:0 0 auto}
.logo b{font-size:16px; font-weight:800; letter-spacing:-.01em; white-space:nowrap}
.site nav{display:flex; gap:4px; align-items:center}
.site nav a{font-size:13.5px; font-weight:600; color:var(--ink-60); text-decoration:none; padding:9px 14px; border-radius:100px; transition:background .15s ease, color .15s ease}
.site nav a:hover{background:var(--tint); color:var(--accent)}
.site nav a[aria-current="page"]{color:var(--accent)}
.pill{background:var(--accent); color:#fff !important; padding:10px 22px !important; border-radius:100px; font-weight:700 !important; margin-left:14px; white-space:nowrap}
@media(max-width:420px){.pill{display:none}}
.pill:hover{background:var(--accent-hover) !important; color:#fff !important}
@media(max-width:840px){.site nav a:not(.pill){display:none} .pill{margin-left:0}}

/* ---- header language dropdown ---- */
.langpick{position:relative; margin-left:6px}
.langpick>summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink-60); padding:8px 12px; border-radius:100px; border:1px solid var(--card-border); background:var(--surface); transition:border-color .15s ease, color .15s ease}
.langpick>summary::-webkit-details-marker{display:none}
.langpick>summary::marker{content:""}
.langpick>summary:hover{border-color:var(--accent); color:var(--accent)}
.langpick[open]>summary{border-color:var(--accent); color:var(--accent)}
.langpick .globe{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; flex:0 0 auto}
.langpick .chev{width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:2.2; opacity:.6; transition:transform .15s ease}
.langpick[open] .chev{transform:rotate(180deg)}
.langpick-menu{position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:80; background:var(--surface); border:1px solid var(--hairline); border-radius:14px; box-shadow:var(--shadow-card-hover); padding:6px; min-width:210px; display:grid; gap:1px; max-height:70vh; overflow:auto}
.langpick-menu a{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 12px; border-radius:9px; text-decoration:none; font-size:14px; font-weight:600; color:var(--ink-85)}
.langpick-menu a:hover{background:var(--tint); color:var(--accent)}
.langpick-menu a[aria-current="page"]{color:var(--accent); background:var(--tint)}
.langpick-menu a[aria-current="page"]::after{content:"✓"; font-weight:700}
@media(max-width:840px){.langpick-menu{position:fixed; top:60px; inset-inline-end:12px; inset-inline-start:auto; min-width:220px}}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px; padding:17px 34px; border-radius:100px; text-decoration:none; transition:background .15s ease, border-color .15s ease, transform .15s ease}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--accent-hover); color:#fff}
.btn-ghost{background:var(--surface); border:1px solid rgba(44,78,126,.25); color:var(--accent)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

/* ---- hero (hub): light gradient, centered ---- */
.hero{background:linear-gradient(180deg,#F8FAFD 0%,#E7EEF8 100%)}
.hero .crumbs-row{max-width:var(--maxw); margin:0 auto; padding:24px 32px 0}
.crumbs{font-size:12px; font-weight:600; color:var(--ink-45); letter-spacing:0; text-transform:none}
.crumbs a{color:var(--ink-45); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 6px; color:rgba(27,39,53,.3)}
.crumbs .here{color:var(--accent)}
.hero-inner{max-width:820px; margin:0 auto; padding:56px 32px 0; text-align:center}
.badge{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid rgba(44,78,126,.18); padding:8px 18px; border-radius:100px; font-size:12px; font-weight:700; color:var(--accent); margin-bottom:30px; box-shadow:0 1px 4px rgba(27,39,53,.05)}
.hero h1{font-size:54px; line-height:1.12; font-weight:800; letter-spacing:-.028em}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .deck{font-size:17px; line-height:1.7; color:var(--ink-60); max-width:560px; margin:24px auto 0}
.hero .meta{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:center; margin-top:26px; font-size:13px; color:var(--ink-60)}
.hero .meta b{color:var(--ink); font-weight:700}
.hero .cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px}
.quick{max-width:820px; margin:0 auto; padding:44px 32px 72px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
.quick a{background:rgba(255,255,255,.75); border:1px solid var(--card-border); border-radius:16px; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-decoration:none; color:var(--ink); transition:background .15s ease, border-color .15s ease}
.quick a:hover{background:var(--surface); border-color:rgba(44,78,126,.35)}
.quick b{display:block; font-size:14.5px; font-weight:700}
.quick small{display:block; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--ink-45); margin-top:4px; text-transform:uppercase}
.quick .go-arrow{color:var(--accent); font-size:16px}
@media(max-width:800px){
  .hero h1{font-size:34px}
  .hero .deck{font-size:15.5px}
  .quick{grid-template-columns:1fr; padding-bottom:56px}
}

/* ---- section shell ---- */
.section{max-width:var(--maxw); margin:0 auto; padding:88px 32px 0}
.kicker{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}
.split{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:36px}
.split h2{font-size:34px; line-height:1.2; font-weight:800; letter-spacing:-.025em; max-width:480px}
.split p{font-size:14.5px; line-height:1.7; color:var(--ink-60); max-width:420px; margin:0}
@media(max-width:800px){
  .section{padding-top:56px}
  .split{flex-direction:column; align-items:flex-start; gap:14px}
  .split h2{font-size:26px}
}

/* ---- chapter cards (hub) ---- */
.jmap{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0; padding:0}
.jmap li:last-child{grid-column:1 / -1}
.jmap a{background:var(--surface); border-radius:18px; padding:28px 30px; box-shadow:var(--shadow-card); display:flex; gap:22px; text-decoration:none; color:var(--ink); height:100%; transition:box-shadow .15s ease, transform .15s ease}
.jmap a:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-2px)}
.jmap .jn{width:44px; height:44px; flex:none; border-radius:12px; background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800}
.jmap .jbody{flex:1; min-width:0}
.jmap .jtitle{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.jmap b{font-size:16px; font-weight:700}
.jmap .go-arrow{color:var(--accent)}
.jmap span.desc{display:block; font-size:13px; line-height:1.65; color:rgba(27,39,53,.58); margin-top:7px}
@media(max-width:800px){.jmap{grid-template-columns:1fr}}

/* ---- TL;DR ticket ---- */
.ticket{background:var(--dark); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-panel)}
.ticket-head{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:26px 36px; border-bottom:1px dashed rgba(255,255,255,.18)}
.ticket-head .t1{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-accent)}
.ticket-head .t2{font-size:19px; font-weight:700; color:#fff; margin-top:6px}
.ticket-head .qr{width:40px; height:40px; flex:0 0 auto; border:1px solid rgba(255,255,255,.25); border-radius:10px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:11px; font-weight:700}
.ticket-body{background:var(--surface); padding:10px 36px 18px}
.gtable{width:100%; border-collapse:collapse}
.gtable th,.gtable td{text-align:left; padding:20px 0; border-bottom:1px dashed rgba(27,39,53,.15); vertical-align:baseline}
.gtable tr:last-child th,.gtable tr:last-child td{border-bottom:none}
.gtable th{width:190px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); padding-right:24px}
.gtable td{font-size:14.5px; line-height:1.65; color:var(--ink-85)}
.gtable td a{font-weight:600}
@media(max-width:640px){
  .gtable th,.gtable td{display:block; width:auto; padding:0}
  .gtable th{padding-top:18px}
  .gtable td{padding:6px 0 18px; border-bottom:1px dashed rgba(27,39,53,.15)}
  .gtable tr:last-child td{border-bottom:none}
  .ticket-body{padding:6px 20px 12px}
  .ticket-head{padding:22px 20px}
}

/* ---- companion app panel ---- */
.appad-wrap{background:linear-gradient(120deg,#16233A 0%,#24406A 100%); border-radius:22px; display:grid; grid-template-columns:1.2fr 1fr; gap:48px; padding:56px 60px; align-items:center; box-shadow:var(--shadow-panel); color:var(--on-dark-70)}
.appad-pill{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-accent); margin:0 0 16px}
.appad h2{font-size:32px; line-height:1.2; font-weight:800; letter-spacing:-.02em; color:#fff}
.appad-lead{font-size:15px; line-height:1.7; color:var(--on-dark-70); max-width:440px; margin:18px 0 30px}
.appad-stores{display:flex; flex-wrap:wrap; gap:14px}
.store{display:block; padding:14px 26px; border-radius:14px; text-decoration:none; transition:transform .15s ease, border-color .15s ease}
.store small{display:block; font-size:10px; font-weight:600; opacity:.6; letter-spacing:.06em; text-transform:uppercase}
.store b{display:block; font-size:15px; font-weight:800; margin-top:2px}
.store-solid{background:#fff; color:var(--dark)}
.store-solid:hover{color:var(--dark); transform:translateY(-2px)}
.store-solid b{color:var(--dark)}
.store-line{border:1px solid rgba(255,255,255,.35); color:#fff}
.store-line:hover{color:#fff; border-color:rgba(255,255,255,.7); transform:translateY(-2px)}
.store-line b{color:#fff}
.appad-phone{display:flex; justify-content:center}
.appad-frame{width:220px; max-width:100%}
.appad-frame img{border-radius:16px; width:100%}
.appad-fallback{display:none}
@media(max-width:880px){.appad-wrap{grid-template-columns:1fr; gap:36px; padding:40px 28px} .appad-phone{order:-1}}

/* ---- chapter page header ---- */
.hero-lite{background:linear-gradient(180deg,#F8FAFD 0%,#E7EEF8 100%); border-bottom:1px solid var(--hairline)}
.hero-lite .wrap{padding:36px 32px 44px}
.hero-lite .crumbs{margin-bottom:26px}
.hero-lite .over{display:flex; align-items:center; gap:12px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 16px}
.hero-lite .over .num{width:38px; height:38px; border-radius:12px; background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; letter-spacing:0}
.hero-lite h1{font-size:40px; line-height:1.15; font-weight:800; letter-spacing:-.025em; max-width:24ch}
.hero-lite .deck{font-size:16px; line-height:1.7; color:var(--ink-60); max-width:62ch; margin:16px 0 0}
.hero-lite .meta{display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:18px; font-size:13px; color:var(--ink-60)}
.hero-lite .meta b{color:var(--ink); font-weight:700}
@media(max-width:800px){.hero-lite h1{font-size:28px}}

/* ---- doc layout ---- */
.layout{display:grid; grid-template-columns:248px minmax(0,1fr); gap:54px; max-width:var(--maxw); margin:0 auto; padding:0 32px}
.toc{position:sticky; top:84px; align-self:start; height:max-content; padding:40px 0; border-right:1px solid var(--hairline)}
.toc .toc-k{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 16px}
.toc ol{list-style:none; margin:0; padding:0}
.toc li{margin:0}
.toc a{display:flex; gap:12px; align-items:baseline; padding:7px 0; color:var(--ink-60); text-decoration:none; font-size:13.5px; font-weight:600; transition:color .15s ease}
.toc a .n{font-size:11px; font-weight:700; color:var(--ink-45); min-width:22px}
.toc a:hover{color:var(--accent)}
.toc a.active,.toc a.here{color:var(--accent); font-weight:700}
.toc a.active .n,.toc a.here .n{color:var(--accent)}
.toc .sub{margin:2px 0 6px; padding-left:34px}
.toc .sub a{font-size:12.5px; font-weight:500; color:var(--ink-45); padding:4px 0}
.toc .sub a:hover,.toc .sub a.active{color:var(--accent)}
.content{padding:40px 0 20px; min-width:0}
@media(max-width:900px){
  .layout{grid-template-columns:1fr; gap:0; padding:0 16px}
  .toc{position:static; border-right:none; border-bottom:1px solid var(--hairline); padding:24px 0}
  .toc ol{columns:2; column-gap:24px}
  .toc .sub{display:none}
  .content{padding-top:30px}
}

/* ---- chapters / sections ---- */
.chapter{padding:34px 0 58px; border-top:1px solid var(--hairline)}
.chapter:first-child{border-top:none}
.chapter-head{margin-bottom:30px}
.chapter-eyebrow{display:flex; align-items:center; gap:12px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-45); margin-bottom:16px}
.chapter-eyebrow .num{padding:6px 12px; border-radius:12px; background:var(--tint); color:var(--accent); font-size:13px; font-weight:800; letter-spacing:.02em}
.chapter-eyebrow::after{content:""; flex:1; height:1px; background:var(--hairline)}
.chapter h2{font-size:30px; line-height:1.2; font-weight:800; letter-spacing:-.025em}
.chapter .lead{font-size:16px; line-height:1.7; color:var(--ink-60); max-width:65ch; margin:14px 0 0}
.h3,.chapter h3{font-size:18px; font-weight:700}

/* ---- steps ---- */
.steps{list-style:none; margin:8px 0 0; padding:0; position:relative}
.steps::before{content:""; position:absolute; left:21px; top:10px; bottom:18px; width:2px; background:var(--tint)}
.step{position:relative; padding:0 0 36px 64px}
.step:last-child{padding-bottom:4px}
.step-marker{position:absolute; left:0; top:-2px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; z-index:1; border-radius:12px; background:var(--tint); color:var(--accent); font-size:14px; font-weight:800}
.step-sub .step-marker{background:var(--surface); border:1px dashed rgba(44,78,126,.45)}
.step-main{display:grid; grid-template-columns:minmax(0,1fr) 244px; gap:28px; align-items:start}
.step-main.solo{grid-template-columns:minmax(0,1fr)}
.step h3{font-size:17px; font-weight:700; margin:10px 0 0}
.step .txt p{margin:.55em 0; font-size:15px; color:var(--ink-85)}
.step .txt ul,.step .txt ol{margin:.5em 0; padding-left:1.15em; font-size:15px; color:var(--ink-85)}
.step .txt li{margin:.32em 0}
@media(max-width:760px){.step-main{grid-template-columns:1fr; gap:18px} .step{padding-left:58px}}

/* ---- screenshot frame ---- */
.shot{margin:0}
.frame{background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:10px; box-shadow:var(--shadow-card); max-width:240px}
.frame img{border-radius:10px; width:100%}
.shot figcaption{margin-top:9px; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-45); max-width:240px}
.ui{font-size:.82em; font-weight:600; background:var(--tint); padding:2px 8px; border-radius:6px; color:var(--accent); white-space:nowrap}

/* ---- notes: emphasis by darkness, one hue ---- */
.note{border:1px solid var(--hairline); border-left:3px solid var(--accent); background:var(--surface); border-radius:0 12px 12px 0; padding:15px 18px; margin:20px 0}
.note p{margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-85)}
.note .k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:5px; color:var(--accent)}
.note.tip{background:var(--tint); border-color:var(--tint); border-left-color:var(--accent)}
.note.info{background:var(--surface)}
.note.warn{border-left-color:var(--dark)} .note.warn .k{color:var(--dark)}
.note.important{background:var(--dark); border-color:var(--dark); border-left-color:var(--on-dark-accent)}
.note.important p{color:var(--on-dark-70)}
.note.important .k{color:var(--on-dark-accent)}
.note.important strong,.note.important b{color:#fff}
.note.important a{color:var(--on-dark-accent)}

/* ---- prohibited grid ---- */
.prohibited{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0; padding:0}
.prohibited li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:18px 12px; font-size:13px; font-weight:600; box-shadow:var(--shadow-card)}
.prohibited svg{width:52px; height:52px}
@media(max-width:560px){.prohibited{grid-template-columns:repeat(2,1fr)}}

/* ---- method list ---- */
.method{counter-reset:m; list-style:none; margin:16px 0; padding:0}
.method li{position:relative; padding:12px 16px 12px 54px; margin:9px 0; background:var(--surface); border:1px solid var(--hairline); border-radius:12px; font-size:14.5px; color:var(--ink-85); box-shadow:var(--shadow-card)}
.method li::before{counter-increment:m; content:counter(m); position:absolute; left:12px; top:50%; transform:translateY(-50%); width:28px; height:28px; background:var(--tint); color:var(--accent); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800}

/* ---- the 20-minute clock marks ---- */
.marks{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:18px 0 4px}
.marks span{font-size:15px; font-weight:800; color:#fff; background:var(--dark); border-radius:12px; padding:9px 16px; letter-spacing:.02em}
.marks small{color:var(--ink-45); font-size:12.5px; font-weight:600}

/* ---- mistakes ---- */
.mistakes{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px}
.m{background:var(--surface); border:1px solid var(--hairline); border-top:3px solid var(--dark); border-radius:0 0 14px 14px; padding:18px 20px; box-shadow:var(--shadow-card)}
.m h3{font-size:14.5px; font-weight:700; margin:0 0 6px; color:var(--ink)}
.m p{margin:0; color:var(--ink-60); font-size:13px; line-height:1.6}
.m .fix{margin-top:8px; color:var(--ink-85); font-size:13px}
.m .fix b{color:var(--accent)}
@media(max-width:680px){.mistakes{grid-template-columns:1fr}}

/* ---- faq ---- */
.faq{margin-top:8px; border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative; font-size:15.5px; font-weight:700; color:var(--ink); transition:color .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"+"; position:absolute; right:6px; top:14px; font-size:22px; font-weight:400; color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 20px; color:var(--ink-85); font-size:14.5px; max-width:70ch}
.faq .a p{margin:.3em 0}

/* ---- resources ---- */
.res{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px}
.res a{display:block; background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:16px 18px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-card); transition:border-color .15s ease, box-shadow .15s ease}
.res a:hover{border-color:rgba(44,78,126,.35); box-shadow:var(--shadow-card-hover)}
.res a b{display:block; color:var(--accent); font-size:14.5px; font-weight:700}
.res a span{color:var(--ink-45); font-size:12px; font-weight:600; word-break:break-all}
@media(max-width:560px){.res{grid-template-columns:1fr}}

/* ---- pager ---- */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:44px 0 10px}
.pager a{display:block; background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:20px 24px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-card); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
.pager a:hover{border-color:rgba(44,78,126,.35); box-shadow:var(--shadow-card-hover); transform:translateY(-2px)}
.pager .lab{display:block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.pager b{font-size:15.5px; font-weight:700}
.pager .next{text-align:right}
@media(max-width:600px){.pager{grid-template-columns:1fr} .pager .next{text-align:left}}

/* ---- footer ---- */
footer{margin-top:88px; background:var(--dark); color:var(--on-dark-70)}
footer .wrap{padding:64px 32px 0; display:grid; grid-template-columns:1.3fr 1fr 1.3fr; gap:56px}
footer .logo b{color:#fff; font-size:15px; font-weight:800}
footer .logomark{background:#fff; color:var(--dark); width:28px; height:28px; border-radius:8px; font-size:13px}
footer h4{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-accent); margin:0 0 16px}
footer p{font-size:13px; line-height:1.7; color:var(--on-dark-70); margin:.4em 0}
footer a{color:var(--on-dark-70); text-decoration:none; font-weight:500}
footer a:hover{color:#fff}
footer .links a{color:var(--on-dark-accent); font-weight:600}
footer .links a:hover{color:#fff}
.foot-links{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:0; padding:0; font-size:13px; font-weight:500}
.foot-links a{color:var(--on-dark-70)}
.foot-links a:hover{color:#fff}
.foot-base .wrap{display:block; padding:40px 32px 48px}
.foot-base .inner{border-top:1px solid rgba(255,255,255,.12); padding-top:28px; font-size:11.5px; line-height:1.7; color:rgba(255,255,255,.45)}
.foot-base strong{color:rgba(255,255,255,.6)}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr; gap:32px} footer{margin-top:56px}}

/* ---- language switcher ---- */
.langs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px}
.langs a{font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:100px; border:1px solid var(--card-border); background:var(--surface); text-decoration:none; color:var(--accent); transition:border-color .15s ease}
.langs a:hover{border-color:var(--accent); color:var(--accent)}
.langs a[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---- narrow single-column shell for language editions ---- */
.narrow{max-width:880px; margin:0 auto; padding:0 32px}
@media(max-width:640px){.narrow{padding:0 16px}}

/* ---- RTL (Arabic & Urdu editions) ---- */
[dir="rtl"] .steps::before{left:auto; right:21px}
[dir="rtl"] .step{padding-left:0; padding-right:64px}
[dir="rtl"] .step-marker{left:auto; right:0}
[dir="rtl"] .note{border-left:1px solid var(--hairline); border-right:3px solid var(--accent); border-radius:12px 0 0 12px}
[dir="rtl"] .note.tip{border-right-color:var(--accent); border-left-color:var(--tint)}
[dir="rtl"] .note.warn{border-right-color:var(--dark)}
[dir="rtl"] .note.important{border-right-color:var(--on-dark-accent); border-left-color:var(--dark)}
[dir="rtl"] .method li{padding:12px 54px 12px 16px}
[dir="rtl"] .method li::before{left:auto; right:12px}
[dir="rtl"] .faq summary{padding:18px 0 18px 40px}
[dir="rtl"] .faq summary::after{right:auto; left:6px}
[dir="rtl"] .gtable th{padding-right:0; padding-left:24px}
[dir="rtl"] .gtable th,[dir="rtl"] .gtable td{text-align:right}
@media(max-width:760px){[dir="rtl"] .step{padding-left:0; padding-right:58px}}

/* ============================================================
   Motion graphics (CSS/SVG) — purposeful, on teaching moments only.
   Everything here is disabled by the reduced-motion block above;
   base states are the resting/complete look so it degrades cleanly.
   ============================================================ */

/* --- The :00 / :20 / :40 slot-release clock (find-slots) --- */
.slotclock{display:flex; justify-content:center; margin:8px 0 2px}
.slotclock svg{width:132px; height:132px}
.slotclock .sc-face{fill:var(--surface); stroke:var(--hairline); stroke-width:2}
.slotclock .sc-ring{fill:none; stroke:var(--tint); stroke-width:2}
.slotclock .sc-hub{fill:var(--accent)}
.slotclock .sc-hand{stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; transform-box:view-box; transform-origin:60px 60px; animation:sc-sweep 6s linear infinite}
.slotclock .sc-drop{fill:var(--go); transform-box:fill-box; transform-origin:center}
.slotclock .sc-d0{animation:sc-pop 6s ease-in-out 0s infinite}
.slotclock .sc-d20{animation:sc-pop 6s ease-in-out 2s infinite}
.slotclock .sc-d40{animation:sc-pop 6s ease-in-out 4s infinite}
@keyframes sc-sweep{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
@keyframes sc-pop{0%{transform:scale(.35)} 6%{transform:scale(1.55)} 16%{transform:scale(1)} 100%{transform:scale(1)}}

/* --- Step-marker pop when steps scroll in (content is NEVER hidden; the
   pop is pure enhancement, so an instant jump/anchor can't hide anything) --- */
.step-marker.in{animation:sc-markerpop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes sc-markerpop{0%{transform:scale(.5)} 65%{transform:scale(1.12)} 100%{transform:scale(1)}}

/* --- Assembling QR on the TL;DR ticket (modules always present; assemble
   only plays when scrolled into view) --- */
.ticket .qr svg{width:26px; height:26px; color:rgba(255,255,255,.82)}
.ticket .qr .qm{transform-box:fill-box; transform-origin:center}
.ticket .qr.in .qm{animation:sc-qm .55s cubic-bezier(.34,1.56,.64,1) both}
.ticket .qr.in .qm:nth-of-type(3n+2){animation-delay:.08s}
.ticket .qr.in .qm:nth-of-type(3n+3){animation-delay:.16s}
@keyframes sc-qm{0%{transform:scale(.2); opacity:.15} 100%{transform:scale(1); opacity:1}}

::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ============================================================
   Nusuk Hajj guide — components (landscape shots, cards,
   contact table, homepage promo). One hue; RTL-aware.
   ============================================================ */

/* wide (landscape) screenshot — stacked under the step text */
.step-main.wide{grid-template-columns:minmax(0,1fr)}
.shot-wide{margin:16px 0 0}
.shot-wide .frame-wide{background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:8px; box-shadow:var(--shadow-card); max-width:660px}
.shot-wide .frame-wide img{border-radius:8px; width:100%}
.shot-wide figcaption{margin-top:9px; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-45); max-width:660px}
.frame-wide.noimg{display:none}

/* card grid — support channels, categories, package details, wallet features */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:20px 0}
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow-card)}
.card h4{font-size:14.5px; font-weight:700; color:var(--accent); margin:0 0 5px}
.card p{margin:0; font-size:13px; line-height:1.6; color:var(--ink-60)}

/* ---- FAQ product bands: dominant divider between the two Nusuk products ---- */
.faq-band{position:relative; margin:46px 0 24px; padding:24px 28px; border-radius:18px; background:linear-gradient(120deg,#16233A 0%,#24406A 100%); box-shadow:var(--shadow-panel); scroll-margin-top:90px; overflow:hidden}
.faq-band .fb-no{position:absolute; top:-20px; inset-inline-end:18px; font-size:104px; font-weight:800; line-height:1; letter-spacing:-.04em; color:rgba(255,255,255,.06); pointer-events:none}
.faq-band .fb-k{display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-accent); margin:0 0 9px}
.faq-band .fb-tag{padding:3px 11px; border-radius:100px; font-size:10px; font-weight:800; letter-spacing:.08em; background:rgba(143,176,220,.18); color:#fff}
.faq-band h3{position:relative; font-size:23px; line-height:1.2; font-weight:800; letter-spacing:-.02em; color:#fff; margin:0}
.faq-band .fb-sub{position:relative; margin:9px 0 0; font-size:14px; line-height:1.6; color:var(--on-dark-70); max-width:66ch}
.faq-band .fb-sub strong{color:#fff}
.faq-band .fb-sub a{color:#fff; text-decoration:underline; text-underline-offset:3px}
@media(max-width:640px){.faq-band{padding:20px 20px} .faq-band h3{font-size:20px} .faq-band .fb-no{font-size:80px}}

/* communication channels table */
.contact{width:100%; border-collapse:collapse; margin:18px 0; background:var(--surface); border:1px solid var(--hairline); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card)}
.contact th,.contact td{text-align:left; padding:14px 18px; font-size:14px; border-bottom:1px solid var(--hairline); vertical-align:top}
.contact tr:last-child th,.contact tr:last-child td{border-bottom:none}
.contact th{width:34%; font-weight:700; color:var(--accent); background:var(--page)}
@media(max-width:560px){.contact th,.contact td{display:block; width:auto; padding:10px 16px} .contact th{border-bottom:none; padding-bottom:2px}}

/* homepage promo band for the Hajj guide */
.pillar{background:linear-gradient(120deg,#16233A 0%,#24406A 100%); border-radius:22px; padding:48px 52px; box-shadow:var(--shadow-panel); color:var(--on-dark-70)}
.pillar .kicker{color:var(--on-dark-accent); margin:0 0 14px}
.pillar h2{font-size:30px; line-height:1.2; font-weight:800; letter-spacing:-.02em; color:#fff; margin:0}
.pillar p{font-size:15px; line-height:1.7; color:var(--on-dark-70); max-width:60ch; margin:14px 0 0}
.pillar-links{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:2px 28px; max-width:620px}
.pillar-links a{display:flex; align-items:center; gap:9px; color:var(--on-dark-70); text-decoration:none; font-size:14px; font-weight:600; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.10)}
.pillar-links a:hover{color:#fff}
.pillar-links a .go-arrow{color:var(--on-dark-accent); margin-inline-start:auto}
.pillar .cta{display:flex; gap:14px; margin-top:26px}
.btn-light{background:#fff; color:var(--dark)}
.btn-light:hover{background:#fff; color:var(--dark); transform:translateY(-2px)}
@media(max-width:640px){.pillar{padding:34px 24px} .pillar h2{font-size:24px} .pillar-links{grid-template-columns:1fr}}

/* RTL */
[dir="rtl"] .contact th,[dir="rtl"] .contact td{text-align:right}

/* ---- hero: prominent cross-guide Hajj callout + nav "new" marker ---- */
.hero-hajj{max-width:560px; margin:0 auto 30px; display:flex; align-items:center; gap:16px; text-align:left;
  background:linear-gradient(120deg,#16233A 0%,#24406A 100%); color:#fff; border-radius:16px;
  padding:15px 20px; box-shadow:var(--shadow-panel); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease}
.hero-hajj:hover{transform:translateY(-2px); color:#fff; text-decoration:none}
.hero-hajj .hh-tag{flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.18); color:#fff; padding:5px 9px; border-radius:100px}
.hero-hajj .hh-body{flex:1; min-width:0}
.hero-hajj .hh-body b{display:block; font-size:15px; font-weight:800; color:#fff}
.hero-hajj .hh-body span{display:block; font-size:12.5px; color:var(--on-dark-70); margin-top:2px; line-height:1.45}
.hero-hajj .hh-arrow{flex:0 0 auto; font-size:20px; color:var(--on-dark-accent)}
.hero-hajj:hover .hh-arrow{color:#fff}
@media(max-width:520px){.hero-hajj{gap:12px; padding:14px 16px} .hero-hajj .hh-body b{font-size:14px}}
[dir="rtl"] .hero-hajj{text-align:right}

/* nav: mark the Hajj link as new so it stands out among the links */
.site nav a.nav-new{color:var(--accent)}
.site nav a.nav-new::after{content:"New"; font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:2px 6px; border-radius:100px; margin-inline-start:6px; vertical-align:middle}
.site nav a.nav-new:hover{background:var(--tint); color:var(--accent)}

/* ============================================================
   Homepage split hero — diagonal two-panel (App / Hajj).
   Bold gold-on-navy over Makkah & Madinah photos; the calm
   Midnight Navy content scrolls below. Motion respects RM.
   ============================================================ */
:root{ --hero-navy:#16233A; --hero-accent:#8FB0DC; }
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.hero-split{position:relative; width:100%; height:min(840px, calc(100vh - 64px)); height:min(840px, calc(100svh - 64px)); min-height:600px; overflow:hidden; background:var(--hero-navy); isolation:isolate}
.hs-panel{position:absolute; inset:0; display:block; overflow:hidden; text-decoration:none; color:#fff}
.hs-panel:hover,.hs-panel:focus-visible{color:#fff; text-decoration:none}
.hs-app{clip-path:polygon(0 0, 100% 0, 0 100%); z-index:10; transition:clip-path .9s cubic-bezier(.22,1,.36,1)}
.hs-hajj{clip-path:polygon(100% 0, 100% 100%, 0 100%); z-index:5; transition:clip-path .9s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (min-width:769px){
  .hs-app:hover,.hs-app:focus-visible{clip-path:polygon(0 0, 112% 0, 0 112%); z-index:20}
  .hs-hajj:hover,.hs-hajj:focus-visible{clip-path:polygon(88% -12%, 100% -12%, 100% 100%, -12% 100%); z-index:20}
}
.hs-bg{position:absolute; inset:-6%; background-size:cover; background-position:center; filter:saturate(.72) contrast(1.03); transform:scale(1.08); will-change:transform}
.hs-app .hs-bg{background-image:url('/guide-assets/img/hero-medina.jpg')}
.hs-hajj .hs-bg{background-image:url('/guide-assets/img/hero-makkah.jpg')}
.hs-scrim{position:absolute; inset:0; background:linear-gradient(135deg, rgba(13,21,35,.90) 0%, rgba(22,35,58,.56) 40%, rgba(22,35,58,.14) 100%)}
.hs-hajj .hs-scrim{background:linear-gradient(315deg, rgba(11,18,31,.92) 0%, rgba(22,35,58,.58) 42%, rgba(22,35,58,.14) 100%)}
.hs-content{position:absolute; z-index:2; display:flex; flex-direction:column; gap:16px; max-width:min(48%,520px)}
.hs-app .hs-content{top:15%; left:8%}
.hs-hajj .hs-content{bottom:14%; right:8%; align-items:flex-end; text-align:right}
.hs-badge{align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.55); background:rgba(22,35,58,.68); backdrop-filter:blur(4px); padding:9px 18px; box-shadow:0 4px 14px rgba(0,0,0,.22)}
.hs-hajj .hs-badge{align-self:flex-end}
.hs-title{font-size:clamp(30px,4.6vw,58px); line-height:1.05; font-weight:800; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 26px rgba(0,10,30,.55)}
.hs-sub{font-size:15px; line-height:1.6; color:rgba(255,255,255,.85); max-width:40ch; text-shadow:0 1px 14px rgba(0,10,30,.55)}
.hs-btn{margin-top:8px; display:inline-flex; align-items:center; gap:12px; font-size:13.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.42); padding:15px 28px; background:var(--hero-navy); box-shadow:0 8px 20px rgba(0,0,0,.28); transition:background .2s ease, border-color .2s ease}
.hs-panel:hover .hs-btn,.hs-panel:focus-visible .hs-btn{background:var(--accent); border-color:var(--accent); color:#fff}
.hs-arrow{transition:transform .2s ease}
.hs-panel:hover .hs-arrow{transform:translateX(5px)}
@media(max-width:768px){
  .hero-split{height:auto; min-height:0; display:flex; flex-direction:column}
  .hs-panel{position:relative; inset:auto; clip-path:none!important; height:54vh; height:54svh; min-height:330px; z-index:auto}
  .hs-content{max-width:84%}
  .hs-app .hs-content{top:auto; bottom:8%; left:7%}
  .hs-hajj .hs-content{bottom:8%; right:7%}
}
[dir="rtl"] .hs-app .hs-content{left:auto; right:8%; align-items:flex-end; text-align:right}
[dir="rtl"] .hs-app .hs-badge{align-self:flex-end}
[dir="rtl"] .hs-hajj .hs-content{right:auto; left:8%; align-items:flex-start; text-align:left}
[dir="rtl"] .hs-hajj .hs-badge{align-self:flex-start}
@media(prefers-reduced-motion:reduce){
  .hs-app,.hs-hajj{transition:none}
  .hs-bg{transform:scale(1.05)!important}
}

/* ---- nusukphotos.com promo card (author's own service — deliberately ad-like) ---- */
.photo-ad{display:flex; align-items:center; gap:18px; text-decoration:none; color:#fff;
  background:linear-gradient(120deg,#16233A 0%,#2C4E7E 100%); border-radius:16px;
  padding:18px 22px; margin:22px 0; box-shadow:var(--shadow-panel);
  transition:transform .15s ease, box-shadow .15s ease}
.photo-ad:hover{transform:translateY(-2px); color:#fff; text-decoration:none; box-shadow:0 16px 34px rgba(22,35,58,.30)}
.photo-ad .pa-icon{flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center}
.photo-ad .pa-icon svg{width:25px; height:25px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.photo-ad .pa-body{flex:1; min-width:0}
.photo-ad .pa-tag{display:block; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-accent)}
.photo-ad .pa-head{display:block; font-size:16px; font-weight:800; color:#fff; margin:2px 0 3px; letter-spacing:-.01em}
.photo-ad .pa-text{display:block; font-size:13px; line-height:1.5; color:var(--on-dark-70)}
.photo-ad .pa-text b{color:#fff}
.photo-ad .pa-cta{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--dark); font-size:13px; font-weight:800; padding:12px 20px; border-radius:100px; white-space:nowrap; transition:background .15s ease}
.photo-ad:hover .pa-cta{background:var(--on-dark-accent)}
.photo-ad .pa-cta .pa-arrow{transition:transform .15s ease}
.photo-ad:hover .pa-cta .pa-arrow{transform:translateX(4px)}
@media(max-width:640px){.photo-ad{flex-wrap:wrap; gap:14px} .photo-ad .pa-body{flex:1 1 70%} .photo-ad .pa-cta{width:100%; justify-content:center}}
[dir="rtl"] .photo-ad .pa-cta .pa-arrow{display:inline-block; transform:scaleX(-1)}
[dir="rtl"] .photo-ad:hover .pa-cta .pa-arrow{transform:scaleX(-1) translateX(4px)}

/* ---- header site search ---- */
.search-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-left:6px; border:1px solid var(--card-border); background:var(--surface); border-radius:100px; cursor:pointer; color:var(--ink-60); transition:border-color .15s ease, color .15s ease; flex:0 0 auto}
.search-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.search-btn:hover{border-color:var(--accent); color:var(--accent)}
[dir="rtl"] .search-btn{margin-left:0; margin-right:6px}

.search-panel{position:fixed; inset:0; z-index:120}
.search-backdrop{position:absolute; inset:0; background:rgba(22,35,58,.38); backdrop-filter:blur(2px)}
.search-modal{position:absolute; top:74px; left:50%; transform:translateX(-50%); width:min(680px,92vw); background:var(--surface); border:1px solid var(--hairline); border-radius:18px; box-shadow:var(--shadow-panel); overflow:hidden}
.search-inputwrap{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--hairline)}
.search-inputwrap svg{width:18px; height:18px; fill:none; stroke:var(--ink-45); stroke-width:2; stroke-linecap:round; flex:0 0 auto}
.search-input{flex:1; min-width:0; border:none; outline:none; font-family:inherit; font-size:16px; color:var(--ink); background:transparent}
.search-close{flex:0 0 auto; font-size:11px; font-weight:700; color:var(--ink-45); border:1px solid var(--card-border); border-radius:6px; padding:4px 8px; background:var(--page); cursor:pointer}
.search-results{max-height:min(60vh,460px); overflow-y:auto; padding:6px}
.search-results a{display:block; padding:11px 14px; border-radius:12px; text-decoration:none; color:var(--ink)}
.search-results a:hover,.search-results a.sel{background:var(--tint)}
.search-results .sr-tag{display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); background:var(--tint); padding:2px 8px; border-radius:100px; margin-bottom:5px}
.search-results a:hover .sr-tag,.search-results a.sel .sr-tag{background:var(--surface)}
.search-results .sr-q{font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.35}
.search-results .sr-a{font-size:12.5px; color:var(--ink-60); margin-top:3px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.search-results mark{background:#fde68a; color:inherit; padding:0 1px; border-radius:2px}
.search-hint{padding:9px 16px; font-size:11px; color:var(--ink-45); border-top:1px solid var(--hairline); display:flex; justify-content:space-between; gap:10px}
.search-empty{padding:28px 16px; text-align:center; color:var(--ink-45); font-size:13.5px}
@media(max-width:640px){.search-modal{top:62px; width:94vw; border-radius:14px} .search-hint{display:none}}