:root{
  --kt-primary: #4f46e5;
}


/* ======================
   IRANSansWeb (FaNum)
====================== */

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb(FaNum)_UltraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb(FaNum)_Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb(FaNum).woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb(FaNum)_Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb(FaNum)_Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/IRANSansWeb(FaNum)_Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}


* {
  font-family: "IRANSansWeb", Vazirmatn, Tahoma, sans-serif;
}


.hide-scroll::-webkit-scrollbar { display:none; }
.hide-scroll { -ms-overflow-style:none; scrollbar-width:none; }
* { -webkit-tap-highlight-color: transparent; }

.app-bg{
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(79,70,229,.18), transparent 60%),
    radial-gradient(700px 380px at 90% 0%, rgba(236,72,153,.12), transparent 55%),
    radial-gradient(900px 520px at 40% 110%, rgba(34,197,94,.10), transparent 55%),
    linear-gradient(#f6f7fb, #f6f7fb);
}

@keyframes pop { from{ transform:translateY(10px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
.pop { animation: pop .35s ease-out both; }

.press { transition: transform .12s ease, filter .12s ease; }
.press:active { transform: scale(.98); filter: brightness(.98); }

.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(226,232,240,.75);
}

.safe-bottom { padding-bottom: max(92px, env(safe-area-inset-bottom)); }

/* Bottom Sheet */
.sheet-backdrop { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet-panel { transform: translateY(110%); transition: transform .22s cubic-bezier(.2,.8,.2,1); will-change: transform; touch-action: none; }
.sheet-panel.open { transform: translateY(0); }

/* Small utility (optional) */
.kt-muted{ color: rgba(100,116,139,1); }


/* ======================================================================
   KitTool Design System — shared component classes (.kit-*)
   Raw CSS (app.css is NOT processed by Tailwind, so no @apply here).
   Accent color per category comes from --kit-accent on a parent panel.
   See docs/design-system.md
====================================================================== */

:root{ --kit-accent: #4f46e5; } /* default = primary (indigo) */

/* Panel: equivalent of `glass shadow-soft rounded-[28px] p-4 md:p-5` */
.kit-panel{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(226,232,240,.75);
  box-shadow: 0 14px 40px rgba(2, 6, 23, .08);
  border-radius: 28px;
  padding: 1rem;
}
@media (min-width: 768px){ .kit-panel{ padding: 1.25rem; } }

/* Field label */
.kit-label{
  display: block;
  font-size: .75rem;
  font-weight: 900;
  color: rgb(71 85 105);   /* slate-600 */
  margin-bottom: .5rem;
}

/* Text input + select share the same box */
.kit-input,
.kit-select{
  width: 100%;
  border-radius: 1rem;                 /* rounded-2xl */
  background: rgba(255,255,255,.60);   /* bg-white/60 */
  border: 1px solid rgb(226 232 240);  /* border-slate-200 */
  padding: 1rem;                       /* py-4 px-4 */
  color: rgb(30 41 59);                /* slate-800 */
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kit-input::placeholder{ color: rgb(148 163 184); } /* slate-400 */
.kit-input:focus,
.kit-select:focus{
  border-color: var(--kit-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kit-accent) 15%, transparent);
}
/* Fallback for browsers without color-mix() */
@supports not (color: color-mix(in srgb, red 15%, transparent)){
  .kit-input:focus,
  .kit-select:focus{ box-shadow: 0 0 0 4px rgba(79,70,229,.15); }
}
/* Suffix variant: leave room on the left for a «تومان/٪» chip */
.kit-input--suffix{ padding-left: 5rem; } /* pl-20 */

/* Multiline variant: same box as .kit-input (use `class="kit-input kit-textarea"`).
   Per-tool min-height set by each text tool's own <style> still wins. */
.kit-textarea{ resize: vertical; min-height: 160px; line-height: 1.9; }

/* Buttons — base structure only; primary color comes from TONE.btn */
.kit-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .75rem 1rem;                /* py-3 px-4 */
  border-radius: 1rem;                 /* rounded-2xl */
  font-size: .875rem;
  font-weight: 900;
}
.kit-btn--ghost{
  background: rgba(255,255,255,.70);
  border: 1px solid rgb(226 232 240);
  color: rgb(51 65 85);                /* slate-700 */
}
/* Accent-filled primary button: background follows --kit-accent (purge-safe). */
.kit-btn--accent{
  background: var(--kit-accent);
  color: #fff;
}

/* Result card container: `rounded-[22px] border border-slate-200/70 bg-white/45 p-3` */
.kit-card{
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,.70);
  background: rgba(255,255,255,.45);
  padding: .75rem;
}

/* Radio/checkbox option chips (mkTest) — accent-aware.
   Owns border + background fully (no Tailwind border/bg on the element)
   so the checked state wins without a specificity battle. */
.kit-radio{ accent-color: var(--kit-accent); }
.kit-option{
  border: 1px solid rgb(226 232 240);   /* slate-200 */
  background: rgba(255,255,255,.60);
  transition: border-color .15s ease, background-color .15s ease;
}
.kit-option:hover{ background: rgba(255,255,255,.80); }
.kit-option:has(:checked){
  border-color: var(--kit-accent);
  background: color-mix(in srgb, var(--kit-accent) 8%, white);
}
@supports not (color: color-mix(in srgb, red 8%, white)){
  .kit-option:has(:checked){ background: rgba(124,58,237,.08); }
}

/* Segmented tabs (calcShell tabs / loan modes / mode-pickers everywhere).
   Resting state MUST look like a real chip (bg+border), not bare text —
   otherwise an inactive tab in a 2-up pair reads as a layout bug. */
.kit-tab{
  color: rgb(71 85 105);                 /* slate-600 */
  background: rgba(255,255,255,.6);
  border: 1px solid rgb(226 232 240);    /* border-slate-200 */
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.kit-tab:hover{ background: rgba(255,255,255,.9); border-color: rgb(203 213 225); }
.kit-tab--active{
  background: var(--kit-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 40px rgba(2, 6, 23, .08);
}
.kit-tab--active:hover{ background: var(--kit-accent); }
@supports not (color: color-mix(in srgb, red 15%, transparent)){
  .kit-tab--active{ background: #4f46e5; }
}

/* ============================================================
   Reviews widget (star rating + comments) — mounted below every tool by
   assets/js/reviews-widget.js. Stars are always amber regardless of the
   category accent (a recognizable "rating" convention), matching the star
   rendering in pages/admin/reviews.php.
   ============================================================ */
.kit-star-icon{ width: 1.15rem; height: 1.15rem; display: block; color: rgb(203 213 225); } /* slate-300 = empty */
.kit-star-icon.is-on{ color: rgb(245 158 11); } /* amber-500 = filled */
.kit-star-static{ display: inline-flex; align-items: center; gap: 1px; }
.kit-star-row{ display: flex; align-items: center; gap: .2rem; }
.kit-star-btn{ padding: .15rem; line-height: 0; transition: transform .1s ease; }
.kit-star-btn:hover{ transform: scale(1.12); }

/* ============================================================
   SEO content layer (.seo-*) — rich, ATTRACTIVE content blocks
   for tool pages ($seo) and landings. Accent flows from
   --kit-accent, set per category on the wrapping section:
     <section class="glass ..." style="--kit-accent:#2563eb"> … </section>
   Raw CSS (app.css is NOT Tailwind-processed) → purge-safe.
   ============================================================ */

.seo-eyebrow{
  display:inline-flex; align-items:center; gap:.375rem;
  font-size:11px; font-weight:800; letter-spacing:.01em;
  color: var(--kit-accent);
  background: color-mix(in srgb, var(--kit-accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--kit-accent) 22%, white);
  padding:.2rem .65rem; border-radius:9999px;
}

.seo-card{
  border-radius:22px;
  border:1px solid rgba(226,232,240,.75);
  background: rgba(255,255,255,.55);
  padding:1rem; margin-top:1rem;
}

.seo-h{
  display:flex; align-items:center; gap:.5rem;
  font-weight:800; color:#1e293b; font-size:.9rem; margin:0 0 .75rem;
}
.seo-h::before{
  content:""; flex:0 0 auto; width:4px; height:1.05rem;
  border-radius:9999px; background: var(--kit-accent);
}

.seo-table{ font-size:12px; color:#475569; }
.seo-row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.4rem 0; border-bottom:1px dashed rgba(226,232,240,.95);
}
.seo-row:last-child{ border-bottom:0; }
.seo-row b, .seo-num{ color: var(--kit-accent); font-weight:800; }

.seo-list{ list-style:none; margin:.25rem 0 0; padding:0; }
.seo-list li{
  position:relative; padding-right:1.6rem; margin-bottom:.45rem;
  font-size:12px; color:#475569; line-height:1.85;
}
.seo-list li::before{
  content:"✓"; position:absolute; right:0; top:.05rem;
  width:1.15rem; height:1.15rem; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; background: var(--kit-accent);
}

.seo-callout{
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--kit-accent) 20%, white);
  border-right:4px solid var(--kit-accent);
  background: color-mix(in srgb, var(--kit-accent) 6%, white);
  padding:.85rem 1rem; margin-top:1rem;
}
.seo-callout .seo-h{ margin-bottom:.4rem; }

.seo-faq{ display:flex; flex-direction:column; gap:.5rem; }
.seo-faq-item{
  border-radius:16px; border:1px solid rgba(226,232,240,.85);
  background: rgba(255,255,255,.6); padding:.7rem .85rem;
}
.seo-faq-q{
  display:flex; align-items:flex-start; gap:.5rem;
  font-weight:800; color:#334155; font-size:12.5px; line-height:1.7; margin:0;
}
.seo-faq-q::before{
  content:"؟"; flex:0 0 auto; width:1.25rem; height:1.25rem;
  border-radius:9999px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color: var(--kit-accent);
  background: color-mix(in srgb, var(--kit-accent) 12%, white);
}
.seo-faq-a{ margin-top:.35rem; font-size:12px; color:#64748b; line-height:1.9; padding-right:1.75rem; }

.seo-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.seo-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:12px; font-weight:700; color: var(--kit-accent);
  border:1px solid color-mix(in srgb, var(--kit-accent) 30%, white);
  background: color-mix(in srgb, var(--kit-accent) 5%, white);
  padding:.4rem .8rem; border-radius:9999px;
  transition: background-color .15s ease, transform .1s ease;
}
.seo-chip::before{ content:"←"; opacity:.55; }
.seo-chip:hover{ background: color-mix(in srgb, var(--kit-accent) 14%, white); transform: translateY(-1px); }

/* Fallback for browsers without color-mix() */
@supports not (color: color-mix(in srgb, red 6%, white)){
  .seo-eyebrow{ background: rgba(79,70,229,.10); border-color: rgba(79,70,229,.22); }
  .seo-callout{ background: rgba(79,70,229,.06); border-color: rgba(79,70,229,.20); }
  .seo-faq-q::before{ background: rgba(79,70,229,.12); }
  .seo-chip{ border-color: rgba(79,70,229,.30); background: rgba(79,70,229,.05); }
  .seo-chip:hover{ background: rgba(79,70,229,.14); }
}

/* ============================================================
   Skeleton loader — glass shimmer placeholder shown server-side
   inside #app while app-shell.js imports + mounts the tool/page
   module, so there's no blank flash/jump before JS paints.
   ============================================================ */
.kit-skel-card{
  border-radius:28px;
  border:1px solid rgba(226,232,240,.7);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding:1.25rem;
}
.kit-skel-row, .kit-skel-input, .kit-skel-btn{
  border-radius:14px;
  background: linear-gradient(90deg, rgba(226,232,240,.55) 25%, rgba(226,232,240,.9) 37%, rgba(226,232,240,.55) 63%);
  background-size: 400% 100%;
  animation: kit-skel-shimmer 1.4s ease infinite;
}
.kit-skel-row{ height:14px; }
.kit-skel-input{ height:48px; margin-top:12px; }
.kit-skel-btn{ height:46px; width:40%; border-radius:16px; margin-top:14px; }
@keyframes kit-skel-shimmer{
  0%{ background-position: 100% 50%; }
  100%{ background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce){
  .kit-skel-row, .kit-skel-input, .kit-skel-btn{ animation: none; }
}

/* The tool mounts underneath the skeleton while its module is still importing:
   invisible and inert, but in normal flow so widths/heights measure correctly.
   app-shell.js drops the skeleton and flips .kit-tool-loading -> .kit-tool-ready
   only after render() resolved, so the skeleton never gives way to a blank gap. */
#toolMain.kit-tool-loading{ opacity:0; pointer-events:none; }
#toolMain.kit-tool-ready{ animation: kit-tool-in .18s ease-out; }
/* Deliberately transform-only — opacity must never be animated here. A background tab
   freezes the document timeline (verified: playState "running", currentTime stuck at 0),
   so an opacity keyframe would leave the tool invisible until the tab is focused.
   Visibility comes from dropping .kit-tool-loading; the slide is decoration that
   degrades to a harmless 4px offset if the timeline is frozen. */
@keyframes kit-tool-in{
  from{ transform: translateY(4px); }
  to  { transform: none; }
}
@media (prefers-reduced-motion: reduce){
  #toolMain.kit-tool-ready{ animation: none; }
}

/* ============================================================
   Code editor chrome (.kit-editor) — dark "IDE window" look for
   textbox-heavy dev tools (minify, json-formatter, regex-tester).
   Accent flows from --kit-accent set on the tool root.
   ============================================================ */
.kit-editor{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(51,65,85,.55);
  background: #0b1120;
  box-shadow: 0 20px 45px rgba(2,6,23,.35), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.kit-editor__bar{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .85rem;
  background: linear-gradient(180deg, rgba(30,41,59,.95), rgba(15,23,42,.95));
  border-bottom:1px solid rgba(51,65,85,.6);
}
.kit-editor__dots{ display:flex; gap:.4rem; flex:0 0 auto; }
.kit-editor__dot{ width:9px; height:9px; border-radius:50%; }
.kit-editor__dot--r{ background:#f87171; }
.kit-editor__dot--y{ background:#fbbf24; }
.kit-editor__dot--g{ background:#34d399; }
.kit-editor__file{
  font-size:11px; color:#94a3b8; font-family: ui-monospace, "Cascadia Code", monospace;
  font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kit-editor__lang{
  flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.02em;
  color: var(--kit-accent);
  background: color-mix(in srgb, var(--kit-accent) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--kit-accent) 40%, transparent);
  padding:.2rem .55rem; border-radius:9999px; white-space:nowrap;
}
@supports not (color: color-mix(in srgb, red 22%, transparent)){
  .kit-editor__lang{ background: rgba(124,58,237,.22); border-color: rgba(124,58,237,.4); }
}
.kit-editor textarea, .kit-editor pre, .kit-editor .kit-editor__body{
  display:block; width:100%; margin:0; border:0; outline:none; resize:vertical;
  background:transparent; color:#e2e8f0;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size:12.5px; line-height:1.9; padding:.9rem 1rem;
  box-sizing:border-box;
}
.kit-editor pre{ margin:0; white-space:pre-wrap; word-break:break-all; overflow:auto; max-height:360px; resize:none; }
.kit-editor textarea::placeholder{ color:#475569; }
.kit-editor textarea:focus{ box-shadow:none; }

/* Colorful stat pills (byte counts, match counts, node counts…) */
.kit-stat-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.kit-stat-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:12px; font-weight:800; color:#334155;
  background: rgba(255,255,255,.65); border:1px solid rgba(226,232,240,.9);
  padding:.4rem .75rem; border-radius:9999px;
  animation: kit-stat-pop .32s ease-out both;
}
.kit-stat-chip b{ color: var(--kit-accent); font-weight:900; }
.kit-stat-chip--accent{
  color:#fff; background: var(--kit-accent); border-color: transparent;
}
.kit-stat-chip--accent b{ color:#fff; }
.kit-stat-chip--ok{ color:#065f46; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
.kit-stat-chip--ok b{ color:#059669; }
@keyframes kit-stat-pop{ from{ transform:translateY(4px) scale(.94); opacity:0 } to{ transform:translateY(0) scale(1); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .kit-stat-chip{ animation:none; } }

/* Capture-group / token highlight palette (regex tester, JSON syntax colors) */
.kit-mark{ border-radius:5px; padding:0 3px; font-weight:700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kit-mark-0{ background: rgba(129,140,248,.28); color:#c7d2fe; }
.kit-mark-1{ background: rgba(52,211,153,.25); color:#a7f3d0; }
.kit-mark-2{ background: rgba(251,191,36,.25); color:#fde68a; }
.kit-mark-3{ background: rgba(244,114,182,.25); color:#fbcfe8; }
.kit-mark-4{ background: rgba(56,189,248,.25); color:#bae6fd; }
.kit-mark-5{ background: rgba(248,113,113,.25); color:#fecaca; }

/* Same palette, tuned for LIGHT backgrounds (e.g. group badges inside .kit-card) */
.kit-tag{ display:inline-flex; align-items:center; font-size:11px; font-weight:800; padding:.15rem .55rem; border-radius:9999px; }
.kit-tag-0{ color:#4338ca; background:rgba(99,102,241,.13); }
.kit-tag-1{ color:#047857; background:rgba(16,185,129,.13); }
.kit-tag-2{ color:#b45309; background:rgba(245,158,11,.16); }
.kit-tag-3{ color:#be185d; background:rgba(236,72,153,.13); }
.kit-tag-4{ color:#0369a1; background:rgba(14,165,233,.13); }
.kit-tag-5{ color:#b91c1c; background:rgba(239,68,68,.13); }

/* ============================================================
   Mobile bottom nav (.kit-bottomnav) — floating "app-like" tab
   bar with an active pill state and a glowing center FAB.
   ============================================================ */
/* The bar is fixed and mobile-only, so reserve room for it or it covers the last
   lines of the page. Added by app-shell when the nav actually mounts, so pages
   without it keep their normal spacing. */
.has-bottomnav{ padding-bottom: 96px; }
@media (min-width: 768px){ .has-bottomnav{ padding-bottom: 0; } }

.kit-bottomnav{
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(226,232,240,.8);
  border-radius: 30px;
  box-shadow: 0 18px 44px rgba(2,6,23,.16), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.kit-bottomnav__item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; padding:.4rem .7rem; border-radius:16px; min-width:56px;
  color:rgb(100 116 139);
  transition: color .18s ease, background-color .18s ease;
}
.kit-bottomnav__item [data-icon]{ display:block; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.kit-bottomnav__item--active{
  color:#4f46e5;
  background: rgba(79,70,229,.11);
}
.kit-bottomnav__item--active [data-icon]{ transform: translateY(-1px) scale(1.08); }

.kit-bottomnav__fab{
  position: relative;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  box-shadow: 0 14px 28px rgba(79,70,229,.45);
}
.kit-bottomnav__fab::after{
  content:""; position:absolute; inset:-7px; border-radius:9999px;
  border:2px solid rgba(124,58,237,.35);
  animation: kit-fab-ring 2.6s ease-out infinite;
}
@keyframes kit-fab-ring{
  0%{ transform:scale(.88); opacity:.65; }
  70%{ transform:scale(1.28); opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .kit-bottomnav__fab::after{ animation:none; } }

.kit-json-key{ color:#7dd3fc; }
.kit-json-str{ color:#86efac; }
.kit-json-num{ color:#fbbf24; }
.kit-json-bool{ color:#f0abfc; }
.kit-json-null{ color:#94a3b8; font-style:italic; }
.kit-json-punc{ color:#64748b; }

/* ============================================================================
   /prices — market prices page
   Raw CSS (app.css is not Tailwind-processed, so no @apply here). Everything is
   .kit-pr-* so it never collides, and colors read --kit-accent like the rest of
   the design system.
   ========================================================================== */

.kit-pr-live{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid rgba(79,70,229,.14);
  padding:6px 13px 6px 10px; border-radius:9999px;
  font-size:12px; color:#64748b; box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.kit-pr-dot{
  width:7px; height:7px; border-radius:9999px; background:#059669;
  animation: kit-pr-pulse 1.8s ease-in-out infinite;
}
.kit-pr-dot--stale{ background:#d97706; animation:none; }
@keyframes kit-pr-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.35; transform:scale(.8); }
}
@media (prefers-reduced-motion: reduce){ .kit-pr-dot{ animation:none; } }

/* ── search + chips ──────────────────────────────────────────────────────── */
.kit-pr-searchwrap{
  display:flex; align-items:center; gap:10px;
  background:#f8fafc; border-radius:14px; padding:0 14px;
  border:1px solid rgba(79,70,229,.10);
}
.kit-pr-searchwrap:focus-within{
  border-color: var(--kit-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kit-accent) 12%, transparent);
}
.kit-pr-search{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  padding:14px 0; font-size:14px; color:#0f172a; font-family:inherit;
}
.kit-pr-chip{
  border:1px solid rgba(79,70,229,.16); background:#fff; color:#475569;
  font-size:13px; font-weight:600; padding:9px 15px; border-radius:9999px;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s;
  font-family:inherit;
}
.kit-pr-chip:hover{ border-color: var(--kit-accent); }
.kit-pr-chip[aria-pressed="true"]{
  background: var(--kit-accent); border-color: var(--kit-accent);
  color:#fff; font-weight:700;
}

/* ── unit switch (rial / toman) ──────────────────────────────────────────── */
.kit-pr-unit{
  display:inline-flex; background:#f1f5f9; border-radius:9999px; padding:3px;
  border:1px solid rgba(79,70,229,.10);
}
.kit-pr-unit button{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:700; color:#64748b;
  padding:6px 14px; border-radius:9999px; transition:background .18s, color .18s;
}
.kit-pr-unit button[aria-pressed="true"]{
  background:#fff; color: var(--kit-accent);
  box-shadow:0 1px 3px rgba(15,23,42,.10);
}

/* ── featured cards ──────────────────────────────────────────────────────── */
.kit-pr-cards{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
}
.kit-pr-card{
  background:#fff; border:1px solid rgba(79,70,229,.10); border-radius:18px;
  padding:16px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 6px 20px rgba(15,23,42,.04);
  transition:border-color .18s, transform .18s;
}
.kit-pr-card:hover{ border-color:rgba(79,70,229,.32); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .kit-pr-card:hover{ transform:none; } }

.kit-pr-glyph{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.kit-pr-glyph--lg{ width:34px; height:34px; border-radius:11px; }

/* category tints */
.kit-pr-t-currency { background:#eff6ff; color:#2563eb; }
.kit-pr-t-gold     { background:#fffbeb; color:#b45309; }
.kit-pr-t-coin     { background:#fef3c7; color:#c2410c; }
.kit-pr-t-crypto   { background:#f5f3ff; color:#7c3aed; }
.kit-pr-t-commodity{ background:#ecfdf5; color:#047857; }

/* ── table ───────────────────────────────────────────────────────────────── */
.kit-pr-table{
  background:#fff; border:1px solid rgba(79,70,229,.10); border-radius:20px;
  overflow:hidden; box-shadow:0 6px 22px rgba(15,23,42,.04);
}
.kit-pr-thead{
  display:flex; gap:12px; padding:12px 18px;
  background:#f8fafc; border-bottom:1px solid rgba(79,70,229,.08);
  font-size:11px; color:#64748b; font-weight:700;
}
.kit-pr-row{
  width:100%; text-align:inherit; font:inherit; color:inherit;
  display:block; background:transparent; border:0;
  border-bottom:1px solid rgba(79,70,229,.06);
  padding:14px 18px; cursor:pointer; transition:background .15s;
}
.kit-pr-row:hover{ background:#fafaff; }
.kit-pr-row:focus-visible{
  outline:2px solid var(--kit-accent); outline-offset:-2px; background:#fafaff;
}
.kit-pr-row:last-child{ border-bottom:0; }
.kit-pr-row[hidden]{ display:none; }

.kit-pr-main{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.kit-pr-name{ flex:1 1 150px; display:flex; align-items:center; gap:10px; min-width:0; }
.kit-pr-spark{ flex:0 0 82px; }
.kit-pr-val{ flex:1 1 130px; display:flex; flex-direction:column; gap:2px; text-align:left; }
.kit-pr-chg{ flex:0 0 96px; display:flex; flex-direction:column; gap:3px; align-items:flex-start; }

.kit-pr-badge{
  font-size:12px; font-weight:700; padding:3px 8px; border-radius:8px;
  display:inline-block; direction:ltr;
}
.kit-pr-up  { color:#059669; background:rgba(5,150,105,.09); }
.kit-pr-down{ color:#dc2626; background:rgba(220,38,38,.09); }
.kit-pr-flat{ color:#64748b; background:rgba(100,116,139,.09); }

.kit-pr-detail{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px;
  border-top:1px dashed rgba(79,70,229,.16);
}
.kit-pr-detail > div{
  flex:1 1 120px; background:#f8fafc; border-radius:12px; padding:10px 12px;
  display:flex; flex-direction:column; gap:3px;
}
.kit-pr-row[aria-expanded="false"] .kit-pr-detail{ display:none; }

/* Numbers stay LTR inside an RTL page so «۱٬۲۳۴٬۵۶۷» never reorders. */
.kit-pr-num{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ── converter ───────────────────────────────────────────────────────────── */
.kit-pr-cv-out{
  flex:1 1 200px; min-width:0;
  background:linear-gradient(140deg, #eef2ff, #f8fafc);
  border:1px solid rgba(79,70,229,.16); border-radius:12px;
  padding:11px 14px; display:flex; flex-direction:column; gap:2px;
}

/* ── mobile ──────────────────────────────────────────────────────────────── */
/* One line per row instead of two: on a phone a price table is scanned, not
   read, so density beats completeness. The symbol and the absolute change move
   out of the way (the symbol is redundant next to the name, and the exact change
   is one tap away in the expanded detail). */
@media (max-width: 640px){
  .kit-pr-thead{ display:none; }
  .kit-pr-spark{ display:none; }
  .kit-pr-sym{ display:none; }
  .kit-pr-row{ padding:12px 14px; }
  .kit-pr-main{ gap:10px; flex-wrap:nowrap; align-items:center; }
  .kit-pr-name{ flex:1 1 auto; min-width:0; }
  .kit-pr-val{ flex:0 0 auto; align-items:flex-end; text-align:left; }
  .kit-pr-chg{ flex:0 0 auto; align-items:flex-end; }
  .kit-pr-chg [data-changeabs]{ display:none; }
  .kit-pr-detail{ flex-wrap:wrap; }
}

/* ── gauge (BMI scale) ───────────────────────────────────────────────────────
   A segmented band with a marker showing where a value falls. Flows RTL like
   the rest of the page, so the LOW end sits on the right; each segment carries
   its own label, so the direction can't be misread either way.
   Segment colours are semantic (not the category accent) — they encode
   "healthy vs not", which is the whole point of the band. */
.kit-gauge{ margin-top:2px; }
.kit-gauge-track{
  position:relative; display:flex; direction:rtl;
  height:14px; border-radius:999px; overflow:hidden;
  border:1px solid rgba(148,163,184,.35);
}
.kit-gauge-seg{ height:100%; }
.kit-gauge-seg--low { background:#bae6fd; }
.kit-gauge-seg--ok  { background:#6ee7b7; }
.kit-gauge-seg--warn{ background:#fcd34d; }
.kit-gauge-seg--bad { background:#fca5a5; }
.kit-gauge-seg--worse{ background:#f87171; }

/* The pin is placed with `right:` because the track is RTL. translateX(50%)
   (not -50%) is what centres it on that edge in a right-anchored box. */
.kit-gauge-pin{
  position:absolute; top:-4px; width:4px; height:22px;
  border-radius:999px; background:#0f172a;
  box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(15,23,42,.35);
  transform:translateX(50%);
}
/* Boundary numbers sit under the track at their own position, so the band reads
   like a real BMI chart. Absolute + right:% keeps them locked to the RTL track. */
.kit-gauge-ticks{ position:relative; height:14px; margin-top:5px; direction:rtl; }
.kit-gauge-tick{
  position:absolute; top:0; transform:translateX(50%);
  font-size:10px; font-weight:900; color:#64748b; white-space:nowrap;
  direction:ltr; unicode-bidi:isolate;
}
/* Block, not flex: the caption is one sentence with an inline <b> in it, and a
   flex container would turn each text node into its own item and break the line. */
.kit-gauge-cap{
  margin-top:8px; font-size:11px; color:#475569; font-weight:900; line-height:1.7;
}
.kit-gauge-cap b{ color:#0f172a; }
.kit-gauge-num{ direction:ltr; unicode-bidi:isolate; display:inline-block; }