/* ============================================================
   Color Shades - stylesheet (2026-10-05)
   /color-shades/ (generator) and every /shades-of-<color>/ page.
   Everything is scoped under .csh / .csh-*; header, footer, FAQ, info cards
   and related-tools pills come from styles/custom_styles.css, which loads
   first. Blue accent, single colours for titles and icons, no thick side
   borders. Dark mode via [data-theme="dark"], light is the default.
   ============================================================ */

.csh {
    --csh-accent: #3399cc;
    --csh-accent-strong: #237a9f;
    --csh-accent-soft: rgba(51, 153, 204, 0.10);
    --csh-accent-line: rgba(51, 153, 204, 0.45);
    --csh-go: #237a9f;
    --csh-go-hover: #1b6183;
    --csh-card: var(--bg-elevated, #fff);
    --csh-sunk: var(--card-tertiary, #f1f5f9);
    --csh-open: var(--card-secondary, #f8fafc);
    --csh-line: var(--border-color, #e2e8f0);
    --csh-text-1: var(--text-primary, #1e293b);
    --csh-text-2: var(--text-secondary, #555);
    --csh-muted: var(--text-muted, #64748b);
    --csh-red: #c23b3b;
    --csh-ok: #2f855a;
    --csh-input: var(--input-bg, #fff);
    --csh-ring: rgba(15, 23, 42, 0.12);
}
[data-theme="dark"] .csh {
    --csh-accent: #5bb8e0;
    --csh-accent-strong: #7cc8ea;
    --csh-accent-soft: rgba(91, 184, 224, 0.13);
    --csh-accent-line: rgba(91, 184, 224, 0.5);
    --csh-go: #3399cc;
    --csh-go-hover: #5bb8e0;
    --csh-sunk: #172033;
    --csh-open: #1a2438;
    --csh-red: #f87171;
    --csh-ok: #6ee7b7;
    --csh-ring: rgba(255, 255, 255, 0.14);
}

.csh.tool-container { max-width: 1160px; margin: 0 auto; padding: 2rem; }
.csh [hidden] { display: none !important; }
.csh button { font: inherit; width: auto; }
.csh svg { flex-shrink: 0; }

/* ---------- title ---------- */
.csh .tool-header { text-align: center; margin-bottom: 1.75rem; }
.csh .tool-title-row { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.csh .csh-title-icon {
    width: 56px; height: 56px; border-radius: 16px; background: var(--csh-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
[data-theme="dark"] .csh .csh-title-icon:not(.csh-title-sig) { color: #0f172a; }
.csh .csh-title-sig { box-shadow: inset 0 0 0 1px var(--csh-ring); }
.csh .csh-title-icon svg { width: 30px; height: 30px; display: block; }
.csh .tool-title { margin: 0; font-size: 2rem; font-weight: 700; color: var(--csh-accent); line-height: 1.2; }
.csh .tool-description { max-width: 800px; margin: 0 auto; font-size: 1.05rem; line-height: 1.65; color: var(--csh-text-2); }
.csh .tool-description p { margin: 0 0 0.6rem; }
.csh .tool-description p:last-child { margin-bottom: 0; }
.csh .tool-description a { color: var(--csh-accent-strong); font-weight: 500; }

/* breadcrumbs (landing pages) */
.csh .csh-crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: center; margin: 0 0 1rem; font-size: 0.82rem; color: var(--csh-muted); }
.csh .csh-crumbs a { color: var(--csh-muted); text-decoration: none; }
.csh .csh-crumbs a:hover { color: var(--csh-accent-strong); text-decoration: underline; }
.csh .csh-crumbs [aria-current] { color: var(--csh-text-1); font-weight: 600; }

/* ---------- error / toast ---------- */
.csh .csh-error {
    display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 1rem; padding: 0.9rem 1rem; border-radius: 12px;
    border: 1px solid rgba(230, 78, 78, 0.35); background: rgba(230, 78, 78, 0.08); color: var(--csh-text-1);
}
.csh .csh-error > svg { width: 20px; height: 20px; color: #e64e4e; margin-top: 2px; }
.csh .csh-error > div { flex: 1; min-width: 0; }
.csh .csh-error p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--csh-text-1); }
.csh .csh-error p + p { margin-top: 0.3rem; color: var(--csh-muted); }
.csh .csh-error a { color: var(--csh-red); font-weight: 600; }
.csh .csh-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 9500; transform: translate(-50%, 16px);
    padding: 0.7rem 1.1rem; border-radius: 12px; background: #0f172a; color: #f8fafc;
    font-size: 0.88rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100vw - 32px);
}
.csh .csh-toast.show { opacity: 1; transform: translate(-50%, 0); }
[data-theme="dark"] .csh .csh-toast { background: #f8fafc; color: #0f172a; }

/* ---------- shared bits ---------- */
.csh .csh-card { background: var(--csh-card); border: 1px solid var(--csh-line); border-radius: 14px; padding: 1rem 1.1rem; min-width: 0; }
.csh .csh-h { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--csh-text-1); }
.csh .csh-h svg { width: 17px; height: 17px; color: var(--csh-accent); }
.csh .csh-h small { font-weight: 500; color: var(--csh-muted); font-size: 0.78rem; }
.csh .csh-chip,
.csh .csh-adv-value {
    display: inline-flex; align-items: center; padding: 0.12rem 0.5rem; border-radius: 999px;
    background: var(--csh-accent-soft); color: var(--csh-accent-strong);
    font-size: 0.75rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.csh .csh-hint { margin: 0.55rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--csh-muted); }
.csh .csh-caption { display: block; margin: 0.85rem 0 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csh-muted); }
.csh .csh-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--csh-ring); flex-shrink: 0; }
.csh .csh-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 9px;
    border: 1px solid var(--csh-line); background: var(--csh-card); color: var(--csh-text-2); cursor: pointer;
}
.csh .csh-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.csh .csh-icon-btn:hover { border-color: var(--csh-accent-line); color: var(--csh-accent-strong); }
.csh .csh-error-close { width: 28px; height: 28px; border: none; background: none; }
.csh .csh-text-btn { padding: 0.35rem 0.6rem; border: none; border-radius: 8px; background: none; color: var(--csh-accent-strong); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.csh .csh-text-btn:hover { background: var(--csh-accent-soft); }

.csh .csh-input {
    width: 100%; min-width: 0; height: 44px; padding: 0 0.8rem; border-radius: 11px; box-sizing: border-box; margin: 0;
    border: 1px solid var(--csh-line); background: var(--csh-input); color: var(--csh-text-1);
    font: 600 0.95rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.csh .csh-input:focus { outline: none; border-color: var(--csh-accent); box-shadow: 0 0 0 3px var(--csh-accent-soft); }
.csh .csh-input.is-bad { border-color: #e64e4e; box-shadow: 0 0 0 3px rgba(230, 78, 78, 0.15); }
.csh .csh-input::placeholder { font-family: inherit; font-weight: 500; color: var(--csh-muted); }
.csh .csh-input-sm { height: 36px; font-size: 0.85rem; margin-top: 0.2rem; }
.csh .csh-range { width: 100%; accent-color: var(--csh-accent); margin: 0.35rem 0 0.6rem; }

.csh .csh-seg {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    padding: 4px; border-radius: 12px; background: var(--csh-sunk); border: 1px solid var(--csh-line);
}
.csh .csh-seg button {
    min-height: 34px; padding: 0.3rem 0.5rem; border: 1px solid transparent; border-radius: 9px; background: none;
    color: var(--csh-text-2); font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.csh .csh-seg button:hover:not(.active) { color: var(--csh-text-1); }
.csh .csh-seg button.active { background: var(--csh-card); color: var(--csh-accent-strong); border-color: var(--csh-line); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.csh .csh-grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.csh .csh-grid6 button {
    min-height: 34px; padding: 0.25rem 0.15rem; border-radius: 8px; min-width: 0; border: 1px solid var(--csh-line);
    background: var(--csh-card); color: var(--csh-text-2); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
}
.csh .csh-grid6 button:hover { border-color: var(--csh-accent-line); color: var(--csh-accent-strong); }
.csh .csh-grid6 button.active { border-color: var(--csh-accent); background: var(--csh-accent-soft); color: var(--csh-accent-strong); }

/* buttons */
.csh .csh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 42px; padding: 0.55rem 1rem;
    border-radius: 11px; border: 1px solid transparent; font-size: 0.92rem; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.csh .csh-btn svg { width: 17px; height: 17px; }
.csh .csh-btn-sm { min-height: 34px; padding: 0.35rem 0.75rem; font-size: 0.84rem; border-radius: 9px; }
.csh .csh-btn-sm svg { width: 15px; height: 15px; }
.csh .csh-btn-primary,
.csh .csh-go { background: var(--csh-go); color: #fff; }
.csh .csh-btn-primary:hover,
.csh .csh-go:hover:not(:disabled) { background: var(--csh-go-hover); color: #fff; }
[data-theme="dark"] .csh .csh-btn-primary,
[data-theme="dark"] .csh .csh-go,
[data-theme="dark"] .csh .csh-btn-primary:hover,
[data-theme="dark"] .csh .csh-go:hover:not(:disabled) { color: #0b1220; }
.csh .csh-go:disabled { opacity: 0.55; cursor: progress; }
.csh .csh-go { min-width: 170px; }
.csh .csh-btn-ghost { background: var(--csh-card); color: var(--csh-text-2); border-color: var(--csh-line); }
.csh .csh-btn-ghost:hover { color: var(--csh-accent-strong); border-color: var(--csh-accent-line); background: var(--csh-accent-soft); }
.csh .csh-pill {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--csh-line); background: var(--csh-card); color: var(--csh-text-1);
    font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.3;
}
.csh .csh-pill svg { width: 14px; height: 14px; color: var(--csh-accent); }
.csh .csh-pill:hover:not(:disabled) { border-color: var(--csh-accent-line); color: var(--csh-accent-strong); background: var(--csh-accent-soft); }
.csh .csh-pill:disabled { opacity: 0.45; cursor: default; }

/* copy button (inline svg, many per page) */
.csh .csh-copy {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin: 0;
    border: 1px solid transparent; border-radius: 7px; background: none; color: var(--csh-muted); cursor: pointer; flex-shrink: 0;
}
.csh .csh-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.csh .csh-copy:hover { color: var(--csh-accent-strong); background: var(--csh-accent-soft); }
.csh .csh-copy.is-done { color: var(--csh-ok); }

/* ---------- generator ---------- */
.csh .csh-gen {
    background: var(--csh-card); border: 1px solid var(--csh-line); border-radius: 22px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08)); padding: 1.25rem; scroll-margin-top: 1rem;
}
.csh .csh-inputbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.csh .csh-pick { position: relative; display: block; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--csh-ring); }
.csh .csh-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
.csh .csh-input-hint { margin: 0.45rem 0 0; font-size: 0.8rem; color: var(--csh-red); }
.csh .csh-basebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.75rem 0 0; font-size: 0.88rem; color: var(--csh-text-1); }
.csh .csh-basehint { flex-basis: 100%; font-size: 0.78rem; color: var(--csh-muted); line-height: 1.45; }

.csh .csh-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; margin-top: 1rem; }
.csh .csh-step {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
    min-width: 0; height: 112px; padding: 0.5rem 0.45rem; border: none; border-radius: 12px; cursor: pointer; text-align: left;
    box-shadow: inset 0 0 0 1px var(--csh-ring); transition: transform .12s, box-shadow .12s;
}
.csh .csh-step:hover { transform: translateY(-2px); }
.csh .csh-step:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--csh-accent-line); }
.csh .csh-step.is-sel { box-shadow: 0 0 0 2px var(--csh-card), 0 0 0 4px var(--csh-accent); }
.csh .csh-step-n { font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.csh .csh-step-n em { font-style: normal; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 999px; border: 1px solid currentColor; margin-left: 2px; vertical-align: 1px; }
.csh .csh-step-v { font: 600 0.68rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.csh .csh-step-c { font-size: 0.66rem; font-weight: 700; opacity: 0.85; font-variant-numeric: tabular-nums; }

.csh .csh-compare { margin-top: 0.9rem; }
.csh .csh-compare .csh-caption { margin-top: 0; }
.csh .csh-pins { display: grid; gap: 6px; }
.csh .csh-pin { display: grid; grid-template-columns: 170px minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.csh .csh-pin-use {
    display: flex; align-items: center; gap: 0.45rem; min-width: 0; padding: 0.3rem 0.5rem; border-radius: 9px;
    border: 1px solid var(--csh-line); background: var(--csh-card); color: var(--csh-text-1); cursor: pointer; text-align: left; font-size: 0.8rem;
}
.csh .csh-pin-use:hover { border-color: var(--csh-accent-line); }
.csh .csh-pin-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.csh .csh-pin-use small { color: var(--csh-muted); font-family: ui-monospace, Menlo, Consolas, monospace; margin-left: auto; }
.csh .csh-pin-row { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.csh .csh-pin-sw { height: 30px; min-width: 0; border: none; padding: 0; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--csh-ring); }
.csh .csh-pin-sw.is-base { box-shadow: inset 0 0 0 2px var(--csh-card), 0 0 0 1px var(--csh-text-2); }
.csh .csh-pin-sw.is-sel { box-shadow: 0 0 0 2px var(--csh-accent); }

.csh .csh-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.csh .csh-col-a,
.csh .csh-col-b { min-width: 0; display: grid; gap: 0.875rem; }

/* detail */
.csh .csh-detail-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: center; }
.csh .csh-detail-sw {
    width: 96px; height: 96px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; box-shadow: inset 0 0 0 1px var(--csh-ring);
}
.csh .csh-detail-meta { min-width: 0; }
.csh .csh-detail-name { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--csh-text-1); overflow-wrap: anywhere; }
.csh .csh-detail-sub { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--csh-muted); }
.csh .csh-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.55rem; }
.csh .csh-badge {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 999px;
    border: 1px solid var(--csh-line); font-size: 0.74rem; color: var(--csh-text-2); font-variant-numeric: tabular-nums;
}
.csh .csh-badge b { color: var(--csh-red); }
.csh .csh-badge.ok b { color: var(--csh-ok); }
.csh .csh-badge-sw { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.6); }
.csh .csh-values { margin-top: 0.9rem; display: grid; gap: 4px; }
.csh .csh-val {
    display: grid; grid-template-columns: 54px minmax(0, 1fr) 28px; gap: 6px; align-items: center;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem; border-radius: 9px; background: var(--csh-open); border: 1px solid var(--csh-line);
}
.csh .csh-val-k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; color: var(--csh-muted); }
.csh .csh-val code { font: 600 0.82rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--csh-text-1); background: none; padding: 0; overflow-wrap: anywhere; }
.csh .csh-sendto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 0.85rem; }
.csh .csh-sendto-k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csh-muted); margin-right: 2px; }

/* tints / shades / tones */
.csh .csh-mix + .csh-mix { margin-top: 0.9rem; }
.csh .csh-mix-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 4px; margin-top: 0.45rem; }
.csh .csh-sw {
    height: 40px; min-width: 0; padding: 0; border: none; border-radius: 8px; cursor: pointer;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px;
    box-shadow: inset 0 0 0 1px var(--csh-ring);
}
.csh .csh-sw span { font-size: 0.62rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.85; }
.csh .csh-sw:hover { transform: translateY(-1px); }
.csh .csh-sw.is-sel { box-shadow: 0 0 0 2px var(--csh-card), 0 0 0 4px var(--csh-accent); }
.csh .csh-sw:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--csh-accent-line); }

/* collapsed option rows */
.csh .csh-adv-options { padding: 0; overflow: hidden; }
.csh .csh-adv-row + .csh-adv-row { border-top: 1px solid var(--csh-line); }
.csh .csh-adv-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 52px;
    padding: 0.55rem 1rem; border: none; background: none; cursor: pointer; text-align: left; color: var(--csh-text-1); box-sizing: border-box;
}
.csh .csh-adv-head-static { cursor: default; }
.csh .csh-adv-head:hover:not(.csh-adv-head-static) { background: var(--csh-open); }
.csh .csh-adv-left { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.csh .csh-adv-left > svg { width: 18px; height: 18px; color: var(--csh-accent); }
.csh .csh-adv-text { display: flex; flex-direction: column; min-width: 0; }
.csh .csh-adv-title { font-size: 0.9rem; font-weight: 700; color: var(--csh-text-1); }
.csh .csh-adv-hint { font-size: 0.76rem; color: var(--csh-muted); line-height: 1.4; overflow-wrap: anywhere; }
.csh .csh-adv-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.csh .csh-chevron { width: 17px; height: 17px; color: var(--csh-muted); transition: transform .2s; }
.csh .csh-adv-row.open .csh-chevron { transform: rotate(180deg); }
.csh .csh-adv-row.open .csh-adv-head,
.csh .csh-adv-row.open .csh-adv-body { background: var(--csh-open); }
.csh .csh-adv-body { padding: 0.2rem 1rem 1rem; }
.csh .csh-shift { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.csh .csh-shift .csh-range { margin: 0; }

/* export chips */
.csh .csh-fmt-group .csh-caption { margin-top: 0.6rem; }
.csh .csh-fmt-group:first-child .csh-caption { margin-top: 0.2rem; }
.csh .csh-fmt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.csh .csh-fmt {
    padding: 0.32rem 0.65rem; border-radius: 999px; border: 1px solid var(--csh-line); background: var(--csh-card);
    color: var(--csh-text-2); font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.csh .csh-fmt:hover { border-color: var(--csh-accent-line); color: var(--csh-accent-strong); }
.csh .csh-fmt.active { border-color: var(--csh-accent); background: var(--csh-accent-soft); color: var(--csh-accent-strong); }

/* switch - must beat .tool-container input[type="checkbox"] in custom_styles.css */
.csh .csh-switch-wrap { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; cursor: pointer; }
.csh .csh-switch-wrap em { font-style: normal; font-size: 0.72rem; font-weight: 800; color: var(--csh-muted); min-width: 26px; letter-spacing: 0.04em; }
.csh .csh-switch-wrap input:checked + em { color: var(--csh-accent-strong); }
input[type="checkbox"].csh-switch,
.tool-container input[type="checkbox"].csh-switch {
    -webkit-appearance: none !important; appearance: none !important;
    position: relative !important; display: inline-block !important;
    width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 22px !important;
    margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 999px !important;
    background: #cbd5e1 !important; background-color: #cbd5e1 !important; box-shadow: none !important;
    cursor: pointer !important; transition: background-color .2s !important; flex-shrink: 0; vertical-align: middle;
}
[data-theme="dark"] input[type="checkbox"].csh-switch,
[data-theme="dark"] .tool-container input[type="checkbox"].csh-switch { background: #475569 !important; background-color: #475569 !important; }
input[type="checkbox"].csh-switch::after,
.tool-container input[type="checkbox"].csh-switch::after,
.tool-container input[type="checkbox"].csh-switch:checked::after {
    content: '' !important; font-size: 0 !important; position: absolute !important;
    top: 3px !important; left: 3px !important; right: auto !important; bottom: auto !important;
    width: 16px !important; height: 16px !important; border-radius: 50% !important;
    background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
    transform: none !important; transition: transform .2s !important; display: block !important;
}
input[type="checkbox"].csh-switch:checked,
.tool-container input[type="checkbox"].csh-switch:checked { background: var(--csh-go, #237a9f) !important; background-color: var(--csh-go, #237a9f) !important; }
input[type="checkbox"].csh-switch:checked::after,
.tool-container input[type="checkbox"].csh-switch:checked::after { transform: translateX(18px) !important; }
input[type="checkbox"].csh-switch:focus-visible,
.tool-container input[type="checkbox"].csh-switch:focus-visible { outline: 2px solid var(--csh-accent) !important; outline-offset: 2px !important; }

/* code */
.csh .csh-code-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.csh .csh-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--csh-sunk); border: 1px solid var(--csh-line); min-width: 0; overflow-x: auto; }
.csh .csh-tabs button { padding: 0.3rem 0.65rem; border: 1px solid transparent; border-radius: 7px; background: none; cursor: pointer; color: var(--csh-text-2); font-size: 0.8rem; font-weight: 700; }
.csh .csh-tabs button.active { background: var(--csh-card); color: var(--csh-accent-strong); border-color: var(--csh-line); }
.csh .csh-code {
    margin: 0; padding: 0.85rem 1rem; border-radius: 11px; max-height: 240px; overflow: auto;
    background: #0f172a; color: #e2e8f0; border: 1px solid #1e293b;
    font: 0.8rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
.csh .csh-code code { font: inherit; color: inherit; background: none; padding: 0; }
.csh .csh-next { margin: 0.6rem 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--csh-text-2); }
.csh .csh-next a,
.csh .csh-info a,
.csh .csh-sec a:not(.csh-pill):not(.csh-harm-card):not(.csh-pair):not(.csh-more-card) { color: var(--csh-accent-strong); font-weight: 600; }

/* action bar */
.csh .csh-actionbar,
.csh .csh-allexp-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--csh-line);
}
.csh .csh-summary { display: flex; flex-direction: column; min-width: 0; }
.csh .csh-summary strong { font-size: 0.95rem; color: var(--csh-text-1); font-variant-numeric: tabular-nums; }
.csh .csh-summary span { font-size: 0.8rem; color: var(--csh-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.csh .csh-actionbar-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- landing pages ---------- */
.csh .csh-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 56px; border-radius: 14px; overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--csh-ring);
}
.csh .csh-strip a { display: block; min-width: 0; transition: transform .12s; }
.csh .csh-strip a:hover { transform: scaleY(1.12); }
.csh .csh-strip-cap { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.4rem 0 1.25rem; font-size: 0.74rem; color: var(--csh-muted); }
.csh .csh-strip-cap span:nth-child(2) { text-align: center; }
.csh .csh-strip-cap span:last-child { text-align: right; }

.csh .csh-allexp { margin-bottom: 1.75rem; }
.csh .csh-allexp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.csh .csh-allexp-head .csh-hint { margin: 0; }
.csh .csh-allexp-chips { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.csh .csh-allexp-bar { margin-top: 0.9rem; padding-top: 0.8rem; }

.csh .csh-sec { margin-top: 2rem; }
.csh .csh-sec-title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem; font-size: 1.35rem; color: var(--csh-text-1); }
.csh .csh-sec-title svg { width: 22px; height: 22px; color: var(--csh-accent); }
.csh .csh-sec-lead { margin: -0.4rem 0 1rem; color: var(--csh-text-2); line-height: 1.6; max-width: 800px; }

.csh .csh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.csh .csh-shade {
    background: var(--csh-card); border: 1px solid var(--csh-line); border-radius: 14px; overflow: hidden; min-width: 0;
    display: flex; flex-direction: column; scroll-margin-top: 1rem;
}
.csh .csh-shade:target { box-shadow: 0 0 0 3px var(--csh-accent-line); }
.csh .csh-shade-sw { height: 92px; display: flex; align-items: flex-end; padding: 0.5rem 0.7rem; box-shadow: inset 0 -1px 0 var(--csh-ring); }
.csh .csh-shade-aa { font-size: 0.7rem; font-weight: 700; opacity: 0.9; font-variant-numeric: tabular-nums; }
.csh .csh-shade-body { padding: 0.65rem 0.7rem 0.7rem; display: flex; flex-direction: column; flex: 1; }
.csh .csh-shade-name { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 800; color: var(--csh-text-1); }
.csh .csh-shade-vals { margin: 0; display: grid; gap: 1px; }
.csh .csh-shade-vals > div { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: center; gap: 4px; }
.csh .csh-shade-vals dt { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; color: var(--csh-muted); }
.csh .csh-shade-vals dd { margin: 0; display: contents; }
.csh .csh-shade-vals code { font: 600 0.76rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--csh-text-1); background: none; padding: 0; overflow-wrap: anywhere; }
.csh .csh-shade-use { margin: auto 0 0; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--csh-muted); border-top: 1px dashed var(--csh-line); }
.csh .csh-shade-use a { color: var(--csh-accent-strong) !important; font-weight: 600; text-decoration: none; }
.csh .csh-shade-use a:hover { text-decoration: underline; }

/* info cards */
.csh .info-card {
    background: var(--csh-card); border: 1px solid var(--csh-line); border-radius: 16px; padding: 1.6rem 1.75rem; box-shadow: none;
}
.csh .info-card h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.csh .info-card h2 svg { color: var(--csh-accent); width: 22px; height: 22px; }
.csh .info-card p { margin: 0.75rem 0 0; line-height: 1.7; color: var(--csh-text-2); }
.csh .info-card h2 + p { margin-top: 0; }
.csh .csh-h3 { display: flex; align-items: center; gap: 0.45rem; margin: 1.4rem 0 0.7rem; font-size: 1.05rem; color: var(--csh-text-1); }
.csh .csh-h3 svg { width: 19px; height: 19px; color: var(--csh-accent); }
.csh .csh-list { margin: 0.75rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; line-height: 1.65; color: var(--csh-text-2); }
.csh .csh-list strong { color: var(--csh-text-1); }
.csh .csh-info { display: grid; gap: 1.5rem; margin-top: 2rem; }
.csh .related-tools { margin-top: 2rem; }

.csh .csh-harm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 1rem; }
.csh .csh-harm-card {
    display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem; border: 1px solid var(--csh-line); border-radius: 14px;
    background: var(--csh-open); text-decoration: none; color: var(--csh-text-1); min-width: 0;
}
.csh .csh-harm-card:hover { border-color: var(--csh-accent-line); }
.csh .csh-harm-sw { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 44px; border-radius: 10px; overflow: hidden; margin-bottom: 0.35rem; box-shadow: inset 0 0 0 1px var(--csh-ring); }
.csh .csh-harm-card strong { font-size: 0.95rem; }
.csh .csh-harm-card small { font-size: 0.78rem; color: var(--csh-muted); }
.csh .csh-harm-codes { display: flex; flex-wrap: wrap; gap: 0.15rem 0.4rem; margin-top: 0.25rem; font-size: 0.78rem; color: var(--csh-text-2); align-items: baseline; }
.csh .csh-harm-codes code { font: 600 0.78rem ui-monospace, Menlo, Consolas, monospace; background: none; padding: 0; color: var(--csh-text-1); }
.csh .csh-harm-codes em { font-style: normal; margin-right: 0.4rem; }
.csh .csh-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 1rem; }
.csh .csh-pair { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem; border: 1px solid var(--csh-line); border-radius: 12px; text-decoration: none; color: var(--csh-text-1); min-width: 0; background: var(--csh-open); }
.csh .csh-pair:hover { border-color: var(--csh-accent-line); }
.csh .csh-pair-sw { display: grid; grid-template-columns: 1fr 1fr; width: 52px; height: 36px; border-radius: 8px; overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--csh-ring); }
.csh .csh-pair-t { display: flex; flex-direction: column; min-width: 0; }
.csh .csh-pair-t small { color: var(--csh-muted); font-size: 0.75rem; }
.csh .csh-palinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.9rem; }

.csh .csh-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.csh .csh-more-card,
.csh .csh-fam {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; border: 1px solid var(--csh-line); border-radius: 14px;
    background: var(--csh-card); text-decoration: none; color: var(--csh-text-1); min-width: 0;
}
.csh .csh-more-card:hover,
.csh .csh-fam:hover { border-color: var(--csh-accent-line); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); }
.csh .csh-mini-strip,
.csh .csh-fam-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 34px; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--csh-ring); }
.csh .csh-more-t,
.csh .csh-fam-t { display: flex; flex-direction: column; font-weight: 700; font-size: 0.9rem; }
.csh .csh-more-t small,
.csh .csh-fam-t small { font-weight: 500; color: var(--csh-muted); font-size: 0.75rem; }
.csh .csh-more-all { justify-content: center; align-items: center; background: var(--csh-open); }
.csh .csh-more-all .csh-more-t { flex-direction: row; align-items: center; gap: 0.4rem; color: var(--csh-accent-strong); }
.csh .csh-more-all svg { width: 17px; height: 17px; }
.csh .csh-families { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 1rem; }
.csh .csh-fam strong { font-size: 0.88rem; }
.csh .csh-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.csh .csh-type-card { border: 1px solid var(--csh-line); border-radius: 14px; padding: 0.8rem; background: var(--csh-open); }
.csh .csh-type-sw { display: block; height: 64px; border-radius: 10px; }
.csh .csh-type-card h3 { margin: 0.7rem 0 0; font-size: 1rem; color: var(--csh-text-1); }
.csh .csh-type-card p { margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.55; }
.csh .faq-answer code,
.csh .info-card p code { font-size: 0.85em; padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--csh-sunk); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .csh .csh-step { height: 100px; padding: 0.45rem 0.35rem; }
    .csh .csh-step-v { font-size: 0.6rem; }
    .csh .csh-families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .csh .csh-layout { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
}
@media (max-width: 760px) {
    .csh .csh-scale { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .csh .csh-step {
        height: auto; min-height: 44px; flex-direction: row; align-items: center; padding: 0.45rem 0.75rem;
        display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 8px;
    }
    .csh .csh-step:hover { transform: none; }
    .csh .csh-step-v { font-size: 0.78rem; }
    .csh .csh-step-c { font-size: 0.72rem; }
    .csh .csh-pin { grid-template-columns: minmax(0, 1fr) 32px; }
    .csh .csh-pin-row { grid-column: 1 / -1; grid-row: 2; }
    .csh .csh-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .csh .csh-families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .csh .csh-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .csh .csh-harm { grid-template-columns: minmax(0, 1fr); }
    .csh .csh-types { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .csh.tool-container { padding: 1rem 0.75rem; }
    .csh .tool-title { font-size: 1.6rem; }
    .csh .csh-title-icon { width: 46px; height: 46px; border-radius: 13px; }
    .csh .csh-title-icon svg { width: 24px; height: 24px; }
    .csh .csh-gen { padding: 0.75rem; border-radius: 16px; }
    .csh .csh-card { padding: 0.85rem; }
    .csh .csh-inputbar { grid-template-columns: 44px minmax(0, 1fr) 44px 44px; }
    .csh .csh-inputbar .csh-btn { padding: 0; min-width: 0; }
    .csh .csh-inputbar .csh-btn span { display: none; }
    .csh .csh-detail-top { grid-template-columns: 72px minmax(0, 1fr); gap: 0.75rem; }
    .csh .csh-detail-sw { width: 72px; height: 72px; font-size: 1.2rem; }
    .csh .csh-actionbar,
    .csh .csh-allexp-bar { flex-direction: column; align-items: stretch; }
    .csh .csh-actionbar-btns { display: grid; grid-template-columns: minmax(0, 1fr); }
    .csh .csh-actionbar-btns .csh-btn { width: 100%; }
    .csh .csh-go { min-width: 0; }
    .csh .info-card { padding: 1.2rem; }
    .csh .csh-cards { grid-template-columns: minmax(0, 1fr); }
    .csh .csh-pairs { grid-template-columns: minmax(0, 1fr); }
    .csh .csh-strip { height: 44px; }
    .csh .csh-strip-cap span:nth-child(2) { display: none; }
    .csh .csh-sec-title { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .csh * { transition: none !important; }
}

/* Shared steps list + FAQ (main CSS) follow the tool accent (2026-10-11) */
.csh.tool-container { --tool-accent: var(--csh-accent, #3399cc); }