/* راهکارا — shared styles for every page */
@font-face{font-family:Vazirmatn;src:url(/assets/fonts/vazirmatn.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#f4f6fb; --card:#fff; --text:#16213a; --muted:#5d6883; --line:#e1e6f0;
  --pri:#1f5fd1; --pri-soft:#e8f0ff; --ok:#13804a; --ok-soft:#e5f6ec; --warn:#a16207; --warn-soft:#fdf4e1;
  --chip:#eef1f7; --shadow:0 8px 24px -16px rgba(20,40,90,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1320; --card:#151e30; --text:#e7ecf7; --muted:#9aa6c0; --line:#26324a;
    --pri:#6c9cff; --pri-soft:#1a2a4a; --ok:#4cc985; --ok-soft:#12301f; --warn:#e3b34a; --warn-soft:#33270f; --chip:#1d2840;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1320; --card:#151e30; --text:#e7ecf7; --muted:#9aa6c0; --line:#26324a;
  --pri:#6c9cff; --pri-soft:#1a2a4a; --ok:#4cc985; --ok-soft:#12301f; --warn:#e3b34a; --warn-soft:#33270f; --chip:#1d2840;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Vazirmatn,Tahoma,"Segoe UI",sans-serif;line-height:1.85;font-size:15px}
a{color:var(--pri)}
img{max-width:100%;height:auto}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.skip{position:absolute;right:-999px}
.skip:focus{right:16px;top:8px;background:var(--card);padding:6px 12px;border-radius:8px;z-index:9}
.ic{flex:none}

/* header / footer */
.site-h{background:var(--card);border-bottom:1px solid var(--line)}
.site-h-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;color:var(--text);text-decoration:none}
.site-nav{display:flex;gap:18px}
.site-nav a{color:var(--muted);text-decoration:none;font-weight:600}
.site-nav a:hover{color:var(--pri)}
.site-f{margin-top:56px;border-top:1px solid var(--line);background:var(--card);font-size:14px}
.site-f-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding-top:28px;padding-bottom:32px}
.site-f b{display:block;margin-bottom:6px}
.site-f p{margin:0 0 8px;color:var(--muted)}
.site-f ul{list-style:none;margin:0;padding:0}
.site-f li a,.f-contact a{color:var(--muted);text-decoration:none;margin-left:12px}
.site-f a:hover{color:var(--pri)}

/* page structure */
.crumbs{font-size:13px;color:var(--muted);margin:18px 0 6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs .sep{margin:0 6px;opacity:.6}
.page-h h1{margin:6px 0 4px;font-size:26px;line-height:1.5}
.page-h p{margin:0;color:var(--muted)}
.hero{padding:40px 0 8px}
.hero h1{font-size:30px;margin:0 0 8px;line-height:1.5}
.hero p{font-size:17px;color:var(--muted);margin:0;max-width:640px}
h2{font-size:20px;margin:36px 0 10px;line-height:1.6}
h3{font-size:16px;margin:22px 0 6px}

/* tool cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);position:relative}
a.card:hover{border-color:var(--pri)}
.card-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--pri-soft);color:var(--pri);flex:none}
.card-b{display:flex;flex-direction:column}
.card-b span{color:var(--muted);font-size:13px;line-height:1.7}
.card.soon{opacity:.7;box-shadow:none}
.badge{position:absolute;left:10px;top:10px;font-size:11px;background:var(--chip);color:var(--muted);border-radius:999px;padding:0 8px}
.cat-h{font-size:15px;color:var(--muted);margin:26px 0 10px}

/* readable article text under tools */
.prose{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 22px 18px;margin-top:28px}
.prose p,.prose li{max-width:72ch}
.prose ol,.prose ul{padding-right:22px}
.prose table{border-collapse:collapse;width:100%;font-size:14px;margin:8px 0}
.prose th,.prose td{border:1px solid var(--line);padding:6px 10px;text-align:right;vertical-align:top}
.prose th{background:var(--chip)}
.note{background:var(--warn-soft);border-radius:10px;padding:10px 14px;font-size:14px}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin:6px 0 0;color:var(--muted)}
.meta-line{font-size:13px;color:var(--muted);margin-top:6px}
.others{margin-top:36px}

/* banners */
.bn-slot{display:grid;gap:12px;margin:22px 0}
.bn-slot.bn-tool-below,.bn-slot.bn-home{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bn{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,var(--pri-soft),var(--card));text-decoration:none;color:var(--text);min-height:84px}
.bn:hover{border-color:var(--pri)}
.bn-pic img{display:block;width:96px;max-height:72px;object-fit:contain;border-radius:8px}
.bn-body{display:flex;flex-direction:column;flex:1;min-width:0}
.bn-t{font-weight:800}
.bn-x{font-size:13px;color:var(--muted)}
.bn-btn{flex:none;background:var(--pri);color:#fff;border-radius:10px;padding:6px 14px;font-weight:700;font-size:13px}
.bn-ad{position:absolute;left:8px;top:4px;font-size:10px;color:var(--muted)}
.bn-img{padding:0;overflow:hidden;background:none;min-height:0}
.bn-img img{display:block;width:100%}

/* ---- tool UI (shared by tools that use panels/results) */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:16px;box-shadow:var(--shadow)}
label{font-weight:700;display:block;margin-bottom:6px}
select,textarea,button,input{font:inherit;color:inherit}
select,input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
textarea{width:100%;min-height:140px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);resize:vertical}
.row{display:grid;grid-template-columns:260px 1fr;gap:16px}
.hint{color:var(--muted);font-size:13px;margin-top:4px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{border:0;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;background:var(--pri);color:#fff}
.btn.ghost{background:var(--chip);color:var(--text)}
.btn:disabled{opacity:.6;cursor:wait}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,120px);background:#0f1a33;color:#fff;padding:10px 18px;border-radius:10px;transition:transform .25s,opacity .25s;opacity:0;pointer-events:none;z-index:9}
.toast.show{transform:translate(-50%,0);opacity:1}

/* شناسه‌یاب results */
.res{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-top:14px;overflow:hidden;box-shadow:var(--shadow)}
.res-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line)}
.res-h b{font-size:16px}
.res-h span{color:var(--muted);font-size:12px}
.grp{padding:10px 16px}
.grp h4{margin:0 0 6px;font-size:13px;color:var(--muted);font-weight:700}
.opt{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid transparent}
.opt + .opt{margin-top:4px}
.opt.best{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.opt .t{font-size:14px}
.opt .m{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted)}
.chip{background:var(--chip);border-radius:999px;padding:1px 9px}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.id{font-family:ui-monospace,Consolas,monospace;font-size:15px;letter-spacing:.5px;direction:ltr;unicode-bidi:isolate}
.copy{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:13px;white-space:nowrap}
.copy:hover{border-color:var(--pri);color:var(--pri)}
details.grp summary{cursor:pointer;color:var(--muted);font-size:13px}
.empty{padding:14px 16px;color:var(--muted)}

@media (max-width:640px){
  .row{grid-template-columns:1fr}
  .opt{grid-template-columns:1fr}
  .site-f-in{grid-template-columns:1fr 1fr}
  .f-about{grid-column:1/-1}
  .hero h1{font-size:24px}
  .page-h h1{font-size:22px}
  .prose{padding:4px 14px 14px}
  .bn{flex-wrap:wrap}
}