/* 📘 راهنمای هیکاری */
.hp-main{max-width:1120px;margin:0 auto;padding:84px 16px 40px}
.hp-hero{position:relative;overflow:hidden;border-radius:26px;padding:34px 26px 26px;text-align:center;color:#fff;
  background:radial-gradient(120% 140% at 85% -10%,#8B6CFF 0,transparent 55%),radial-gradient(120% 140% at 0% 110%,#3DB4F2 0,transparent 50%),linear-gradient(135deg,#141a3a,#0b1022);
  box-shadow:0 24px 60px rgba(20,20,60,.35)}
.hp-hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 26px);pointer-events:none}
.hp-k{margin:0 0 6px;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#bcd7ff}
.hp-hero h1{margin:0;font:400 clamp(26px,5vw,40px)/1.35 Lalezar,var(--font,inherit)}
.hp-hero > p{margin:8px auto 18px;max-width:560px;color:rgba(255,255,255,.78);font-size:14px;line-height:1.9}
.hp-q{position:relative;z-index:1;display:flex;align-items:center;gap:10px;max-width:580px;margin:0 auto;padding:0 16px;height:54px;border-radius:16px;background:rgba(255,255,255,.96);color:#4a5578;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hp-q input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;color:#141a3a}
.hp-pop{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}
.hp-pop a{font-size:12px;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hp-pop a:hover{background:rgba(255,255,255,.22)}
.hp-body{display:grid;grid-template-columns:240px 1fr;gap:22px;margin-top:22px;align-items:start}
.hp-nav{position:sticky;top:76px;display:grid;gap:4px;padding:10px;border-radius:18px;background:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.hp-nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:var(--text);text-decoration:none;font-size:13.5px;font-weight:700}
.hp-nav a i{width:9px;height:9px;border-radius:3px;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.hp-nav a small{margin-inline-start:auto;font-size:11px;color:var(--muted)}
.hp-nav a:hover,.hp-nav a.on{background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--strong)}
.hp-cat{margin-bottom:22px;scroll-margin-top:80px}
.hp-cat h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:18px;color:var(--strong)}
.hp-cat h2::before{content:"";width:6px;height:22px;border-radius:4px;background:var(--c)}
.hp-a{margin-bottom:8px;border-radius:16px;background:var(--fg);box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:84px;transition:box-shadow .3s}
.hp-a summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;font-weight:800;font-size:14.5px;color:var(--strong)}
.hp-a summary::-webkit-details-marker{display:none}
.hp-a summary i{margin-inline-start:auto;flex:0 0 26px;height:26px;border-radius:9px;background:color-mix(in srgb,var(--c) 14%,transparent);position:relative;transition:transform .25s}
.hp-a summary i::before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border:solid var(--c);border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg)}
.hp-a[open] summary i{transform:rotate(180deg)}
.hp-a[open]{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,var(--line))}
.hp-b{padding:0 16px 14px;color:var(--text);font-size:14px;line-height:2}
.hp-b p{margin:0 0 8px}.hp-b ul{margin:0 0 8px;padding-inline-start:20px}.hp-b li{margin:2px 0}
.hp-b a{color:var(--blue,#3DB4F2)}
.hp-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding-top:10px;border-top:1px dashed var(--line)}
.hp-go{display:inline-flex;align-items:center;padding:7px 14px;border-radius:11px;background:var(--c);color:#fff!important;text-decoration:none;font-weight:800;font-size:13px}
.hp-cp{margin-inline-start:auto;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
.hp-a.flash{animation:hpFlash 1.8s ease}
@keyframes hpFlash{0%,40%{box-shadow:inset 0 0 0 2px var(--c),0 0 0 6px color-mix(in srgb,var(--c) 25%,transparent)}}
.hp-a mark{background:color-mix(in srgb,#FFD34D 45%,transparent);color:inherit;border-radius:4px;padding:0 2px}
.hp-none{padding:22px;text-align:center;color:var(--muted);border-radius:16px;background:var(--fg)}
.hp-more{margin-top:10px;padding:24px;border-radius:20px;text-align:center;background:linear-gradient(135deg,color-mix(in srgb,#3DB4F2 14%,var(--fg)),color-mix(in srgb,#8B6CFF 14%,var(--fg)));box-shadow:inset 0 0 0 1px var(--line)}
.hp-more h2{margin:0 0 4px;font-size:18px;color:var(--strong)}.hp-more p{margin:0 0 12px;color:var(--muted)}
@media (max-width:820px){.hp-main{padding-top:72px}.hp-body{grid-template-columns:1fr}
  .hp-nav{top:64px;z-index:5;display:flex;overflow-x:auto;gap:6px;padding:8px;scrollbar-width:none;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
  .hp-nav::-webkit-scrollbar{display:none}.hp-nav a{flex:0 0 auto;padding:7px 11px;font-size:12.5px}.hp-nav a small{display:none}
  .hp-hero{padding:26px 16px 20px;border-radius:20px}.hp-a summary{padding:13px 14px;font-size:14px}}
html.lite .hp-a.flash{animation:none}