/* ==========================================================================
   Online Convert — Unified Tool Theme  (tool-theme.css)
   --------------------------------------------------------------------------
   ONE design system for every tool page. All component styles are scoped under
   `.tool-page`, so until a page opts in by wrapping its content in
   `.tool-page` nothing changes — safe to load globally during rollout.

   How to use on a tool page:
     {% block context %}
     <div class="nk-content nk-content-fluid">
       <div class="container-xl wide-xl">
         <div class="nk-content-body">
           <div class="tool-page">
             <header class="tool-hero"> ... </header>
             <section class="tool-card"> ...the tool... </section>
             <section class="tool-desc"> ...SEO copy... </section>
           </div>
         </div>
       </div>
     </div>
     {% endblock %}

   Do NOT add per-page <style> blocks for colours/buttons/inputs. Use the
   tokens and components below. If something is missing, add it HERE once.
   ========================================================================== */

/* ----- 1. Design tokens -------------------------------------------------- */
.tool-page {
  /* brand */
  --tc-primary: #6576ff;
  --tc-primary-600: #4f5fe6;
  --tc-primary-700: #3f4fd0;
  --tc-primary-100: #e0e4ff;
  --tc-primary-50: #eef0ff;

  /* ink + surfaces */
  --tc-ink: #101426;     /* headings */
  --tc-body: #44495b;    /* paragraph text */
  --tc-muted: #8091a7;   /* secondary / hints */
  --tc-line: #e5e8ef;    /* borders */
  --tc-surface: #ffffff; /* cards */
  --tc-bg: #f4f5fb;      /* page background */
  --tc-field: #f7f8fc;   /* input fill */

  /* status */
  --tc-success: #1ee0ac;
  --tc-danger: #e85347;
  --tc-warning: #f4bd0e;

  /* radius */
  --tc-radius-sm: 6px;
  --tc-radius: 10px;
  --tc-radius-lg: 16px;
  --tc-pill: 999px;

  /* spacing scale (4px base) */
  --tc-s1: .25rem; --tc-s2: .5rem; --tc-s3: .75rem; --tc-s4: 1rem;
  --tc-s5: 1.5rem; --tc-s6: 2rem; --tc-s7: 3rem;

  /* elevation */
  --tc-shadow-sm: 0 1px 2px rgba(16,20,38,.06), 0 1px 3px rgba(16,20,38,.05);
  --tc-shadow: 0 6px 18px rgba(16,20,38,.08);
  --tc-shadow-lg: 0 16px 40px rgba(16,20,38,.12);
  --tc-ring: 0 0 0 3px rgba(101,118,255,.22);

  /* type */
  --tc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tc-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Consolas, monospace;

  font-family: var(--tc-font);
  color: var(--tc-body);
  /* Use the FULL width of the content area — no more narrow centred columns
     leaving big empty margins on BOTH sides. The parent `.container-xl.wide-xl`
     is normally capped at 1240px; we uncap it (below) only when it holds a
     tool page, so this max-width is just a sane ceiling for ultra-wide
     monitors (text stays readable), not a tight column. */
  width: 100%;
  max-width: 1660px;
  margin: 0 auto;
  padding: var(--tc-s5) var(--tc-s4) var(--tc-s7);
}

/* Uncap the Bootstrap container ONLY for tool pages (via :has) so the tool
   content spans the real available width instead of a 1240px centred box with
   wide empty gutters. Legal/marketing pages that share the container keep
   their comfortable reading width. */
.nk-content-fluid > .container-xl.wide-xl:has(.tool-page) { max-width: 100% !important; }

.tool-page *,
.tool-page *::before,
.tool-page *::after { box-sizing: border-box; }

/* ----- 2. Typography ----------------------------------------------------- */
.tool-page h1, .tool-page h2, .tool-page h3,
.tool-page h4, .tool-page h5 {
  font-family: var(--tc-font);
  color: var(--tc-ink);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.tool-page h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); letter-spacing: -.02em; }
.tool-page h2 { font-size: 1.5rem; letter-spacing: -.01em; }
.tool-page h3 { font-size: 1.2rem; }
.tool-page p  { color: var(--tc-body); line-height: 1.65; margin: 0 0 var(--tc-s4); }
.tool-page a  { color: var(--tc-primary); text-decoration: none; }
.tool-page a:hover { color: var(--tc-primary-700); }

/* ----- 3. Hero (consistent page header) ---------------------------------- */
.tool-page .tool-hero {
  display: flex;
  align-items: center;
  gap: var(--tc-s4);
  margin-bottom: var(--tc-s5);
}
.tool-page .tool-hero__text { min-width: 0; }
.tool-page .tool-hero__sub {
  margin: var(--tc-s1) 0 0;
  color: var(--tc-muted);
  font-size: .95rem;
}

/* Icon "chip" — the trick that makes mismatched glyphs read as ONE family:
   any icon (FontAwesome, Nio, or an <img> SVG) wrapped in this looks uniform. */
.tool-page .tool-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--tc-radius);
  background: var(--tc-primary-50);
  color: var(--tc-primary);
  font-size: 22px;
  box-shadow: inset 0 0 0 1px var(--tc-primary-100);
}
.tool-page .tool-ico img,
.tool-page .tool-ico svg { width: 26px; height: 26px; object-fit: contain; }
.tool-page .tool-ico--sm { width: 40px; height: 40px; font-size: 18px; }

/* ----- 4. Cards / surfaces ---------------------------------------------- */
.tool-page .tool-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-sm);
  padding: var(--tc-s6);
}
.tool-page .tool-card + .tool-card,
.tool-page .tool-card + .tool-desc,
.tool-page .tool-hero + .tool-card { margin-top: var(--tc-s5); }

/* Two-pane (input ↔ output) layout that fills the width instead of a single
   centred column. Collapses to one column on small screens. */
.tool-page .tool-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--tc-s4);
}
.tool-page .tool-split__arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--tc-primary); font-size: 22px;
}
/* equal-width multi-column variant (e.g. an options row) */
.tool-page .tool-split--3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .tool-page .tool-split { grid-template-columns: 1fr; }
  .tool-page .tool-split--3up { grid-template-columns: 1fr; }
  .tool-page .tool-split__arrow { transform: rotate(90deg); }
}

/* ----- 5. Form controls -------------------------------------------------- */
.tool-page .tool-field {
  width: 100%;
  font-family: var(--tc-font);
  font-size: .95rem;
  color: var(--tc-ink);
  background: var(--tc-field);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: .7rem .9rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.tool-page .tool-field::placeholder { color: var(--tc-muted); }
.tool-page .tool-field:focus,
.tool-page .tool-field:focus-visible {
  outline: none;
  background: #fff;
  border-color: var(--tc-primary);
  box-shadow: var(--tc-ring);
}
.tool-page textarea.tool-field { min-height: 220px; resize: vertical; line-height: 1.6; }
.tool-page textarea.tool-field--mono { font-family: var(--tc-mono); font-size: .9rem; }
.tool-page .tool-label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  color: var(--tc-ink);
  margin-bottom: var(--tc-s2);
}

/* ----- 6. Buttons (ONE button system) ----------------------------------- */
.tool-page .tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--tc-font);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  padding: .72rem 1.15rem;
  border-radius: var(--tc-radius);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.tool-page .tool-btn:active { transform: translateY(1px); }
.tool-page .tool-btn:focus-visible { outline: none; box-shadow: var(--tc-ring); }
.tool-page .tool-btn:disabled { opacity: .55; cursor: not-allowed; }
.tool-page .tool-btn i, .tool-page .tool-btn em, .tool-page .tool-btn svg { font-size: 1em; width: 1em; height: 1em; }

/* primary */
.tool-page .tool-btn--primary { background: var(--tc-primary); color: #fff; }
.tool-page .tool-btn--primary:hover { background: var(--tc-primary-600); color: #fff; box-shadow: var(--tc-shadow); }

/* secondary outline */
.tool-page .tool-btn--ghost {
  background: #fff; color: var(--tc-primary);
  border-color: var(--tc-primary-100);
}
.tool-page .tool-btn--ghost:hover { background: var(--tc-primary-50); color: var(--tc-primary-700); }

/* neutral */
.tool-page .tool-btn--muted { background: #eef0f5; color: var(--tc-body); }
.tool-page .tool-btn--muted:hover { background: #e4e7ee; }

/* status */
.tool-page .tool-btn--success { background: var(--tc-success); color: #fff; }
.tool-page .tool-btn--success:hover { filter: brightness(.96); }
.tool-page .tool-btn--danger  { background: var(--tc-danger); color: #fff; }
.tool-page .tool-btn--danger:hover { filter: brightness(.96); }

.tool-page .tool-btn--block { width: 100%; }
.tool-page .tool-btn--lg { padding: .9rem 1.5rem; font-size: 1rem; }
.tool-page .tool-btn--sm { padding: .5rem .8rem; font-size: .82rem; }

/* A row of choice buttons (e.g. case-converter actions) */
.tool-page .tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-s3);
}
.tool-page .tool-actions--center { justify-content: center; }

/* Segmented switch (encrypt / decrypt etc.) */
.tool-page .tool-seg {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  background: #eef0f5;
  border-radius: var(--tc-pill);
}
.tool-page .tool-seg__btn {
  border: 0; background: transparent; cursor: pointer;
  font-weight: 600; font-size: .88rem; color: var(--tc-body);
  padding: .5rem 1.2rem; border-radius: var(--tc-pill);
  transition: background .2s, color .2s;
}
.tool-page .tool-seg__btn.is-active { background: #fff; color: var(--tc-primary); box-shadow: var(--tc-shadow-sm); }
/* radio-driven segmented switch: keep the input clickable but visually hidden */
.tool-page .tool-seg label.tool-seg__btn { display: inline-flex; align-items: center; }
.tool-page .tool-seg__btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* ----- 7. Upload / drop zone -------------------------------------------- */
.tool-page .tool-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--tc-s2);
  text-align: center;
  padding: var(--tc-s7) var(--tc-s5);
  background: var(--tc-field);
  border: 2px dashed var(--tc-primary-100);
  border-radius: var(--tc-radius-lg);
  color: var(--tc-muted);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tool-page .tool-drop:hover, .tool-page .tool-drop.is-drag {
  border-color: var(--tc-primary);
  background: var(--tc-primary-50);
}
.tool-page .tool-drop__icon { font-size: 34px; color: var(--tc-primary); }

/* ----- 8. Category index grid (replaces divergent .tools-container) ------ */
.tool-page .tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--tc-s4);
}
.tool-page .tool-tile {
  display: flex; flex-direction: column;
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-sm);
  padding: var(--tc-s5);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tool-page .tool-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--tc-shadow-lg);
  border-color: var(--tc-primary-100);
}
.tool-page .tool-tile__title { font-size: 1.05rem; margin: var(--tc-s3) 0 var(--tc-s2); }
.tool-page .tool-tile__desc { font-size: .88rem; color: var(--tc-muted); line-height: 1.55; margin: 0 0 var(--tc-s4); flex: 1; }
.tool-page .tool-tile__cta { font-weight: 600; color: var(--tc-primary); }

/* ----- 9. Description / SEO copy ---------------------------------------- */
.tool-page .tool-desc {
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
  padding: var(--tc-s6);
}
.tool-page .tool-desc h2, .tool-page .tool-desc h3 { margin: var(--tc-s5) 0 var(--tc-s3); }
.tool-page .tool-desc h2:first-child, .tool-page .tool-desc h3:first-child { margin-top: 0; }
.tool-page .tool-desc ul { padding-left: 1.2rem; margin: 0 0 var(--tc-s4); }
.tool-page .tool-desc li { margin-bottom: var(--tc-s2); line-height: 1.65; }

/* ----- 9b. Stat boxes (counters: letters / words / sentences …) --------- */
.tool-page .tool-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--tc-s4);
}
.tool-page .tool-stat {
  text-align: center;
  background: var(--tc-field);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: var(--tc-s5) var(--tc-s4);
}
.tool-page .tool-stat__num {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--tc-primary);
  line-height: 1.1;
}
.tool-page .tool-stat__label { display: block; margin-top: var(--tc-s2); font-size: .85rem; color: var(--tc-muted); }

/* ----- 9c. Tables -------------------------------------------------------- */
.tool-page .tool-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tool-page .tool-table th,
.tool-page .tool-table td {
  padding: .6rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--tc-line);
}
.tool-page .tool-table th {
  font-weight: 600; color: var(--tc-ink);
  background: var(--tc-field);
  white-space: nowrap;
}
.tool-page .tool-table tbody tr:hover { background: var(--tc-primary-50); }
.tool-page .tool-table .is-pass { color: #15b88a; font-weight: 600; }
.tool-page .tool-table .is-fail { color: var(--tc-danger); font-weight: 600; }
.tool-page .tool-table .is-empty { color: var(--tc-muted); }
.tool-page .tool-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); }
.tool-page .tool-table-scroll .tool-table { font-size: .9rem; }
.tool-page .tool-table td input {
  width: 100%;
  font-family: var(--tc-font);
  font-size: inherit;
  color: var(--tc-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tc-radius);
  padding: .35rem .4rem;
}
.tool-page .tool-table td input:focus { outline: none; border-color: var(--tc-primary); background: var(--tc-surface); }
.tool-page .tool-field--narrow { max-width: 160px; }

/* ----- 9d. Toggle switch ------------------------------------------------- */
.tool-page .tool-switch { display: inline-flex; align-items: center; gap: var(--tc-s3); cursor: pointer; font-size: .9rem; color: var(--tc-body); }
.tool-page .tool-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tool-page .tool-switch__track {
  position: relative; flex: 0 0 auto;
  width: 42px; height: 24px;
  background: #cfd6e4; border-radius: var(--tc-pill);
  transition: background .2s;
}
.tool-page .tool-switch__track::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  box-shadow: var(--tc-shadow-sm); transition: transform .2s;
}
.tool-page .tool-switch input:checked + .tool-switch__track { background: var(--tc-primary); }
.tool-page .tool-switch input:checked + .tool-switch__track::before { transform: translateX(18px); }
.tool-page .tool-switch input:focus-visible + .tool-switch__track { box-shadow: var(--tc-ring); }

/* ----- 9e. Output / result block (read-only with copy) ------------------- */
.tool-page .tool-output {
  width: 100%;
  background: var(--tc-field);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: .9rem;
  min-height: 120px;
  color: var(--tc-ink);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}
.tool-page .tool-output--mono { font-family: var(--tc-mono); font-size: .9rem; }

/* ----- 10. Small helpers ------------------------------------------------- */
.tool-page .mt-0 { margin-top: 0 !important; }
.tool-page .tool-mt-3 { margin-top: var(--tc-s3); }
.tool-page .tool-mt-4 { margin-top: var(--tc-s4); }
.tool-page .tool-mt-5 { margin-top: var(--tc-s5); }
.tool-page .tool-hint { font-size: .82rem; color: var(--tc-muted); }
.tool-page .tool-count {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .82rem; color: var(--tc-muted);
}

/* ==========================================================================
   11. Compact (mini) sidebar — self-contained  (GLOBAL — not under .tool-page)
   The theme ships an `.is-compact` style but its rule loses to the base
   `.nk-sidebar{width:296px}` in this build, so we define the behaviour here
   explicitly (with !important to win the cascade). Desktop only — under
   1200px the sidebar is the theme's off-canvas drawer, untouched.
   Toggle button lives in the header; JS in tools/js/ui.js persists the state.
   ========================================================================== */
@media (min-width: 1200px) {
  /* collapsed rail — slim, just wide enough for a centred icon */
  .nk-sidebar.is-compact { width: 68px !important; }
  .nk-sidebar.is-compact + .nk-wrap { padding-left: 90px !important; }
  .nk-sidebar.is-compact + .nk-wrap > .nk-header-fixed { left: 90px !important; }

  /* expand on hover for quick access */
  .nk-sidebar.is-compact:hover { width: 296px !important; }

  /* hide labels / sub-menus / headings while collapsed and not hovered */
  .nk-sidebar.is-compact:not(:hover) .nk-menu-text,
  .nk-sidebar.is-compact:not(:hover) .nk-menu-sub,
  .nk-sidebar.is-compact:not(:hover) .nk-menu-heading,
  .nk-sidebar.is-compact:not(:hover) .nk-menu-toggle::after { display: none !important; }

  /* swap full logo for the small mark while collapsed (only flip opacity —
     NEVER set width on the logo imgs, it collapses the brand and hides it) */
  .nk-sidebar.is-compact:not(:hover) .logo-light,
  .nk-sidebar.is-compact:not(:hover) .logo-dark { opacity: 0; }
  .nk-sidebar.is-compact:not(:hover) .logo-img-small { opacity: 1 !important; }

  /* the 32px logo is absolutely positioned at the brand's left edge; the head
     ships a 36px side padding that shoves it off-centre. Trim it to ~18px so
     the mark sits centred in the 68px rail (no empty gap beside it). */
  .nk-sidebar.is-compact:not(:hover) .nk-sidebar-head { padding-left: 18px !important; padding-right: 0 !important; }

  /* zero the menu side padding so the tiles can centre in the slim rail */
  .nk-sidebar.is-compact:not(:hover) .nk-sidebar-menu,
  .nk-sidebar.is-compact:not(:hover) .nk-menu { padding-left: 0 !important; padding-right: 0 !important; }

  /* each top-level item becomes a centred 46×46 icon TILE */
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item > .nk-menu-link {
    width: 46px; height: 46px;
    margin: 4px auto;
    padding: 0 !important;
    border-radius: 12px;
    justify-content: center;
    transition: background .15s, box-shadow .15s;
  }
  .nk-sidebar.is-compact:not(:hover) .nk-menu-icon { margin-right: 0; }

  /* hover affordance on a tile (literal colours — the --tc-* vars are scoped
     to .tool-page and are NOT defined out here on .nk-sidebar) */
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item > .nk-menu-link:hover {
    background: #eef0ff;
  }

  /* CLEAR selected state — a filled primary-tint chip + primary icon so the
     active tool category is obvious in the rail (theme only recolours it) */
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item.active > .nk-menu-link,
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item.current-menu > .nk-menu-link,
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item.current-page > .nk-menu-link {
    background: #e0e4ff !important;
    box-shadow: inset 0 0 0 1px #c9cfff;
  }
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item.active > .nk-menu-link .nk-menu-icon,
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item.current-menu > .nk-menu-link .nk-menu-icon,
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item.active > .nk-menu-link .nk-menu-icon .icon,
  .nk-sidebar.is-compact:not(:hover) .nk-menu > .nk-menu-item.current-menu > .nk-menu-link .nk-menu-icon .icon {
    color: #6576ff !important;
  }
}

/* ==========================================================================
   12. Premium top header / navbar (GLOBAL — outside .tool-page, literal colours)
   Make the header span the FULL width (its content was capped at 1240px and
   centred, leaving the bell/avatar floating with a big empty gap on the right)
   and give it a clean, premium surface.
   ========================================================================== */
.nk-header.nk-header-fixed .container-xl.wide-xl { max-width: 100% !important; }
.nk-header.nk-header-fixed {
  background: #ffffff;
  border-bottom: 1px solid #e9ecf3;
  box-shadow: 0 1px 2px rgba(16,20,38,.04), 0 6px 20px rgba(16,20,38,.04);
}
.nk-header .nk-header-wrap { padding-left: 6px; padding-right: 10px; }
/* push the bell + avatar to the real right edge */
.nk-header .nk-header-tools { margin-left: auto; }
/* premium quick-nav icon buttons */
.nk-header .nk-quick-nav > li > a.nk-quick-nav-icon,
.nk-header .nk-quick-nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  color: #4b5572;
  transition: background .15s, color .15s;
}
.nk-header .nk-quick-nav-icon:hover { background: #eef0ff; color: #6576ff; }
.nk-header .nk-quick-nav .icon { font-size: 1.15rem; }
/* the compact-sidebar toggle reads as a real button too */
.nk-header .nk-compact-toggle .nk-quick-nav-icon { color: #101426; }

/* toggle-button affordance + smooth reflow */
.nk-compact-toggle .icon { transition: transform .25s ease; }
.nk-sidebar.is-compact ~ .nk-wrap .nk-compact-toggle .icon,
.nk-compact-toggle.is-on .icon { transform: rotate(180deg); }
.nk-sidebar, .nk-wrap, .nk-header-fixed { transition: width .25s ease, padding .25s ease, left .25s ease; }

/* Inline copy-button affordance for read-only output fields (binary generator) */
.tool-page .output-wrapper { position: relative; }
.tool-page .output-wrapper .tool-field { padding-right: 44px; }
.tool-page .copy-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tc-muted, #6b7280);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-page .copy-btn:hover { color: var(--tc-ink, #111); }

/* Generic visibility toggle used by JS (classList.add/remove("hidden")) */
.tool-page .hidden { display: none !important; }

/* A grid cell that stacks its own label + field (used inside tool-split) */
.tool-page .tool-field-wrap { display: flex; flex-direction: column; }

/* Centred image preview frame (e.g. placeholder image generator) */
.tool-page .tool-img-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tc-s4);
  background: var(--tc-field);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
}
.tool-page .tool-img-frame img { max-width: 100%; height: auto; border-radius: var(--tc-radius-sm); }

/* ==========================================================================
   13. Generators category — shared widgets (still scoped to .tool-page)
   Range slider, checkbox rows, password strength meter, color swatch + shades,
   and a reusable copy-row used by Color / Timestamp / JWT outputs.
   ========================================================================== */

/* Themed range slider (password length, sizes) */
.tool-page .tool-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 6px 0;
  background: var(--tc-line); border-radius: var(--tc-pill);
  outline: none; cursor: pointer;
}
.tool-page .tool-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tc-primary); border: 3px solid #fff;
  box-shadow: var(--tc-shadow-sm); cursor: pointer;
}
.tool-page .tool-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tc-primary); border: 3px solid #fff;
  box-shadow: var(--tc-shadow-sm); cursor: pointer;
}

/* Checkbox / radio option rows */
.tool-page .tool-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--tc-s3);
}
.tool-page .tool-check {
  display: inline-flex; align-items: center; gap: var(--tc-s2);
  font-size: .9rem; color: var(--tc-body); cursor: pointer;
}
.tool-page .tool-check input { width: 16px; height: 16px; accent-color: var(--tc-primary); cursor: pointer; }

/* Password strength meter */
.tool-page .tool-strength { display: flex; gap: 6px; }
.tool-page .tool-strength__seg {
  flex: 1; height: 6px; border-radius: var(--tc-pill);
  background: var(--tc-line); transition: background .2s;
}

/* Color swatch (the big preview / native color input) */
.tool-page input[type="color"].tool-swatch {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 64px; padding: 0;
  border: 1px solid var(--tc-line); border-radius: var(--tc-radius);
  background: none; cursor: pointer;
}
.tool-page input[type="color"].tool-swatch::-webkit-color-swatch-wrapper { padding: 4px; }
.tool-page input[type="color"].tool-swatch::-webkit-color-swatch { border: none; border-radius: var(--tc-radius-sm); }

/* Three-input row (e.g. R/G/B or H/S/L number fields) */
.tool-page .cc-triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tc-s3); }

/* Tints & shades strip */
.tool-page .tool-shades { display: flex; flex-wrap: wrap; gap: 0; border-radius: var(--tc-radius); overflow: hidden; border: 1px solid var(--tc-line); }
.tool-page .tool-shade { flex: 1 1 40px; height: 46px; border: 0; cursor: pointer; transition: transform .12s; }
.tool-page .tool-shade:hover { transform: scaleY(1.12); }

/* Reusable copy-row: label · mono value · copy button (Color/Timestamp/JWT) */
.tool-page .tool-copyrow {
  display: flex; align-items: center; gap: var(--tc-s3);
  background: var(--tc-field); border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius); padding: .55rem .7rem;
}
.tool-page .tool-copyrow__label {
  flex: 0 0 auto; min-width: 70px;
  font-weight: 600; font-size: .78rem; color: var(--tc-muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.tool-page .tool-copyrow__val {
  flex: 1; min-width: 0;
  font-family: var(--tc-mono); font-size: .9rem; color: var(--tc-ink);
  word-break: break-all;
}
.tool-page .tool-copyrow button {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--tc-muted); padding: 4px; border-radius: var(--tc-radius-sm);
}
.tool-page .tool-copyrow button:hover { color: var(--tc-primary); background: var(--tc-primary-50); }

/* QR / barcode preview frame — centred white card so any code reads cleanly */
.tool-page .tool-code-frame {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; padding: var(--tc-s4);
  background: #fff; border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
}
.tool-page .tool-code-frame svg,
.tool-page .tool-code-frame img { max-width: 100%; max-height: 200px; height: auto; }
/* keep the QR preview compact so the whole tool fits one screen — the
   download still renders at the chosen full resolution */
.tool-page .tool-code-frame canvas { width: auto; height: auto; max-width: 190px; max-height: 190px; }
.tool-page .tool-code-empty { color: var(--tc-muted); font-size: .9rem; text-align: center; }

/* Social share row — fallback when Web Share API is unavailable (desktop) */
.tool-page .tool-share {
  display: flex; flex-wrap: wrap; gap: var(--tc-s2); align-items: center;
}
.tool-page .tool-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--tc-field); border: 1px solid var(--tc-line);
  color: var(--tc-body); font-size: 1.05rem;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.tool-page .tool-share a:hover { background: var(--tc-primary-50); color: var(--tc-primary); border-color: var(--tc-primary-100); transform: translateY(-2px); }

/* Text diff output — added / removed highlight */
.tool-page .tool-diff {
  font-family: var(--tc-mono); font-size: .9rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  background: var(--tc-field); border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius); padding: var(--tc-s4); min-height: 160px;
  overflow: auto;
}
.tool-page .tool-diff ins { background: rgba(30,224,172,.18); color: #0c8f6b; text-decoration: none; border-radius: 3px; }
.tool-page .tool-diff del { background: rgba(232,83,71,.16); color: #c0392b; text-decoration: none; border-radius: 3px; }

/* Regex tester output — highlight matches with a brand-tinted mark */
.tool-page .tool-rx-out {
  font-family: var(--tc-mono); font-size: .9rem; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  background: var(--tc-field); border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius); padding: var(--tc-s4); min-height: 90px;
}
.tool-page .tool-rx-out mark {
  background: rgba(101,118,255,.20); color: var(--tc-primary-700);
  border-radius: 3px; padding: 0 1px;
}

/* JWT decoder — three coloured segments of the raw token */
.tool-page .tool-jwt-raw {
  font-family: var(--tc-mono); font-size: .9rem; word-break: break-all; line-height: 1.6;
  background: var(--tc-field); border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius); padding: var(--tc-s4);
}
.tool-page .tool-jwt-raw .jwt-h { color: #d6336c; }
.tool-page .tool-jwt-raw .jwt-p { color: #6576ff; }
.tool-page .tool-jwt-raw .jwt-s { color: #0c8f6b; }