/* =========================================================
   PARSYU — TOOL PAGE CHROME
   Shared layout for every tool page. Each tool inlines its
   OWN widget CSS on top of this file.
========================================================= */


/* Cursor safety net — auth pages don't load the shared cursor script. */
html:not(.cursor-on),
html:not(.cursor-on) body,
html:not(.cursor-on) body *{
  cursor: auto !important;
}

html:not(.cursor-on) a,
html:not(.cursor-on) button,
html:not(.cursor-on) [role="button"],
html:not(.cursor-on) label,
html:not(.cursor-on) summary,
html:not(.cursor-on) select,
html:not(.cursor-on) input[type="checkbox"],
html:not(.cursor-on) input[type="radio"],
html:not(.cursor-on) input[type="file"],
html:not(.cursor-on) input[type="range"],
html:not(.cursor-on) .auth-social,
html:not(.cursor-on) .auth-submit,
html:not(.cursor-on) .field-toggle,
html:not(.cursor-on) .auth-check,
html:not(.cursor-on) .auth-header-link,
html:not(.cursor-on) .auth-success-btn{
  cursor: pointer !important;
}

html:not(.cursor-on) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html:not(.cursor-on) textarea{
  cursor: text !important;
}


/* ─────────────────────────────────────────────────────────
   PAGE SHELL
───────────────────────────────────────────────────────── */
.tool-page{
  position:relative;
  z-index:1;
  padding:60px 0 90px;
}

.tool-shell{
  max-width:920px;
  margin-inline:auto;
}

/* ─────────────────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────────────────── */
.tool-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
  color:var(--text-3);
  font-size:12px;
  flex-wrap:wrap;
}

.tool-breadcrumb a{
  color:var(--text-3);
  transition:color .2s ease;
}
.tool-breadcrumb a:hover{ color:#A5B4FC }

.tool-breadcrumb .sep{
  color:var(--text-3);
  opacity:.55;
}

.tool-breadcrumb .current{
  color:var(--text-2);
  font-weight:600;
}

/* ─────────────────────────────────────────────────────────
   TOOL HEADER
───────────────────────────────────────────────────────── */
.tool-head{
  display:flex;
  align-items:center;
  gap:18px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
  flex-wrap:wrap;
}

.tool-head-icon{
  flex-shrink:0;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font:800 22px var(--mono);
  border:1px solid rgba(255,255,255,.09);
}

.tool-head-icon.ic-indigo{ background:rgba(99,102,241,.14); color:#A5B4FC; border-color:rgba(99,102,241,.24) }
.tool-head-icon.ic-violet{ background:rgba(168,85,247,.13); color:#D8B4FE; border-color:rgba(168,85,247,.22) }
.tool-head-icon.ic-cyan  { background:rgba(34,211,238,.12); color:#A5F3FC; border-color:rgba(34,211,238,.22) }
.tool-head-icon.ic-gold  { background:rgba(252,211,77,.11); color:#FDE68A; border-color:rgba(252,211,77,.22) }
.tool-head-icon.ic-green { background:rgba(52,211,153,.11); color:#6EE7B7; border-color:rgba(52,211,153,.22) }
.tool-head-icon.ic-rose  { background:rgba(251,113,133,.11); color:#FDA4AF; border-color:rgba(251,113,133,.22) }

.tool-head-copy{
  min-width:0;
  flex:1;
}

.tool-head-copy h1{
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.03em;
}

.tool-head-copy p{
  margin-top:6px;
  color:var(--text-2);
  font-size:13.5px;
  max-width:560px;
}

.tool-head-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.tool-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600;
}
.tool-chip.is-free{
  border-color:rgba(52,211,153,.32);
  background:rgba(52,211,153,.06);
  color:#6EE7B7;
}
.tool-chip.is-premium{
  border-color:rgba(252,211,77,.32);
  background:rgba(252,211,77,.06);
  color:var(--gold);
}

/* ─────────────────────────────────────────────────────────
   TOOL BODY — the widget container
───────────────────────────────────────────────────────── */
.tool-body{
  margin-bottom:56px;
}

/* ─────────────────────────────────────────────────────────
   INFO SECTION
───────────────────────────────────────────────────────── */
.tool-info{
  padding-top:34px;
  border-top:1px solid var(--line);
}

.tool-info h2{
  font-size:18px;
  font-weight:850;
  letter-spacing:-.02em;
  margin-bottom:12px;
}

.tool-info p{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.95;
  max-width:720px;
}
.tool-info p + p{ margin-top:12px }
.tool-info strong{ color:var(--text); font-weight:700 }
.tool-info a{
  color:#A5B4FC;
  border-bottom:1px dashed rgba(165,180,252,.4);
  padding-bottom:1px;
}
.tool-info a:hover{ color:#DCE4FF }

.tool-info-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:16px;
  max-width:720px;
}
.tool-info-list li{
  position:relative;
  padding-inline-start:22px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.85;
}
.tool-info-list li::before{
  content:"";
  position:absolute;
  top:8px;
  right:2px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(129,140,248,.55);
  box-shadow:0 0 0 3px rgba(129,140,248,.12);
}
[dir="ltr"] .tool-info-list li::before{ right:auto; left:2px }

/* ─────────────────────────────────────────────────────────
   COMMON BUTTONS (reused by tools)
───────────────────────────────────────────────────────── */
.tbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:var(--text-2);
  font:600 13px var(--font);
  transition:all .25s var(--ease);
}
.tbtn:hover{
  color:var(--text);
  border-color:var(--line-2);
  background:rgba(255,255,255,.06);
}

.tbtn.primary{
  border-color:transparent;
  background:var(--grad-brand);
  color:#05060B;
  font-weight:800;
  box-shadow:0 14px 34px -16px rgba(99,102,241,.9);
}
.tbtn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 50px -20px rgba(99,102,241,1);
}

.tbtn.ghost{
  background:transparent;
  color:var(--text-3);
}
.tbtn.ghost:hover{ background:rgba(255,255,255,.04) }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* body already has padding-top: var(--header-h-m) on mobile
     from effects.css to clear the fixed header. Only add a
     little breathing room here. */
  .tool-page{
    padding:24px 0 70px;
  }

  .tool-head{
    gap:14px;
    padding-bottom:20px;
    margin-bottom:24px;
  }

  .tool-head-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    font-size:18px;
  }

  .tool-head-copy h1{ font-size:22px }
  .tool-head-copy p{ font-size:13px }

  .tool-body{ margin-bottom:42px }
}

@media (max-width:470px){
  .tool-page{ padding:18px 0 60px }

  .tool-head-icon{
    width:46px;
    height:46px;
    border-radius:12px;
    font-size:16px;
  }

  .tool-head-copy h1{ font-size:20px }
}


/* ─────────────────────────────────────────────────────────
   RTL-SAFE RANGE SLIDERS
   RTL pages reverse the direction of <input type="range"> —
   min lands on the right, max on the left. That contradicts
   the visual gradient (which always paints left→right), so
   the value and the color appear inverted.

   Forcing LTR on the range itself restores the intuitive
   behavior on every tool: drag right = increase, drag left =
   decrease, and gradient colors line up with the values.
───────────────────────────────────────────────────────── */
input[type="range"],
.qr-slider,
.bc-slider,
.ir-slider,
.cp-slider,
.pwd-slider,
.dice-slider,
.ts-slider,
.ln-slider{
  direction: ltr;
}