:root {
  color-scheme: dark;
  --ink: #f5f7fb;
  --muted: #9aa7bb;
  --subtle: #738097;
  --bg: #080d18;
  --surface: #111a2a;
  --surface-raised: #172236;
  --line: #26344c;
  --accent: #76e1c0;
  --accent-strong: #b1f4db;
  --warning: #ffb86b;
  --danger: #ff8f9a;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 87% 0%, #152b3b 0, transparent 28rem), var(--bg); line-height: 1.5; }
button, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible, select:focus-visible, pre:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.site-header, .site-footer, .ad-slot { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.site-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 30px 0 25px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #3b8a7b; border-radius: 10px; color: var(--accent); font-size: 22px; }
.brand strong, .brand small { display: block; line-height: 1.1; }
.brand strong { letter-spacing: -0.02em; }
.brand small { margin-top: 4px; color: var(--subtle); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.header-note { color: var(--subtle); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.site-nav { display: flex; justify-content: center; align-items: center; gap: 4px; }
.site-nav-link { padding: 8px 11px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 750; text-decoration: none; }
.site-nav-link:hover { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.04); }
.site-nav-link.is-active { border-color: rgba(118,225,192,.24); color: var(--accent-strong); background: rgba(118,225,192,.08); }
.site-nav-link, .brand small { white-space: nowrap; }
/* With ten tools the note no longer fits beside the menu; each tool shows its own privacy note. */
.header-note { display: none; }
/* Grouped navigation: each group is a <details> menu (see scripts/site-nav.js). */
.site-header { position: relative; z-index: 30; }
.site-nav { gap: 6px; }
.nav-group { position: relative; border-bottom: 0; }
.nav-group > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; user-select: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nav-caret { font-size: 9px; transition: transform .15s ease; }
.nav-group[open] .nav-caret { transform: rotate(180deg); }
.nav-group[open] > summary { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.05); }
.nav-menu { position: absolute; top: calc(100% + 8px); left: 0; display: grid; gap: 2px; width: 310px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #0e1829; box-shadow: 0 22px 55px rgba(0,0,0,.5); }
.nav-group:nth-last-child(-n+2) .nav-menu { right: 0; left: auto; }
.nav-item { display: grid; gap: 2px; padding: 9px 11px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.nav-item strong { font-size: 13px; }
.nav-item span { color: var(--subtle); font-size: 11px; }
.nav-item:hover, .nav-item:focus-visible { background: rgba(255,255,255,.06); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-item[aria-current="page"] { background: rgba(118,225,192,.08); }
.nav-item[aria-current="page"] strong { color: var(--accent-strong); }
@media (max-width: 760px) {
  .site-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; justify-content: flex-start; }
  .nav-group { position: static; }
  .nav-menu, .nav-group:nth-last-child(-n+2) .nav-menu { top: 100%; right: 0; left: 0; width: auto; margin-top: -8px; }
}

.ad-slot { display: grid; place-items: center; border: 1px dashed rgba(118,225,192,.24); border-radius: 12px; color: var(--subtle); background: rgba(17, 26, 42, .36); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
/* Right-side ad rail (160×600): shown only when there's room beside the content. */
.ad-slot-rail { display: none; }
@media (min-width: 1200px) {
  body { padding-right: 184px; }
  .ad-slot-rail { position: fixed; top: 112px; right: 24px; z-index: 5; display: grid; width: 160px; height: min(600px, calc(100vh - 136px)); margin: 0; }
}
@media (min-width: 1552px) {
  body { padding-right: 0; }
  .ad-slot-rail { right: calc((100vw - 1120px) / 2 - 184px); }
}
.ad-slot-inline { width: 100%; min-height: 180px; margin: 24px 0 28px; }

.page-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 78px; }
.hero { max-width: 760px; margin-bottom: 38px; }
.eyebrow, .section-kicker { margin: 0 0 11px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { margin: 0 5px; color: var(--subtle); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 17px; font-size: clamp(2.4rem, 7vw, 5.3rem); line-height: .98; letter-spacing: -.065em; }
h1 span { color: var(--accent); font-weight: 400; }
.lede { max-width: 570px; margin-bottom: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); }

.tool-card { padding: clamp(21px, 4vw, 37px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(25, 38, 61, .97), rgba(12, 20, 35, .97)); box-shadow: 0 30px 75px rgba(0, 0, 0, .18); }
.tool-card-header, .panel-header, .controls-row, .utility-actions, .related-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tool-card h2, .info-card h2, .faq-section h2, .related-section h2 { margin-bottom: 0; font-size: 1.35rem; letter-spacing: -.035em; }
.text-button { border: 0; padding: 8px 0; color: var(--accent); background: transparent; font-size: 13px; font-weight: 700; }
.text-button span { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
.text-button:hover span { transform: translate(2px, -2px); }
.privacy-note { display: flex; align-items: center; gap: 10px; margin: 27px 0 20px; padding: 11px 14px; border: 1px solid rgba(118, 225, 192, .18); border-radius: 10px; color: var(--muted); background: rgba(118, 225, 192, .06); font-size: 12px; }
.privacy-note strong { color: var(--accent-strong); }
.privacy-icon { color: var(--accent); font-size: 16px; }
.workspace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #0b1322; overflow: hidden; }
.panel-header { flex: 0 0 auto; min-height: 47px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.output-label { display: flex; align-items: center; gap: 9px; }
.output-header-actions { display: flex; align-items: center; gap: 11px; min-width: 0; }
.panel-copy-button { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 11px; font-weight: 750; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.panel-copy-button:hover:not(:disabled) { border-color: #4b6385; color: var(--accent); background: rgba(118,225,192,.08); }
.panel-copy-button:disabled { cursor: not-allowed; opacity: .35; }
.panel-meta { color: var(--subtle); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.status-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--subtle); }
.status-dot[data-type="valid"], .status-dot[data-type="success"] { background: var(--accent); box-shadow: 0 0 0 4px rgba(118, 225, 192, .12); }
.status-dot[data-type="invalid"] { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 143, 154, .12); }
textarea, .output-panel pre { display: block; width: 100%; min-height: 330px; margin: 0; padding: 19px 18px; border: 0; outline: 0; resize: vertical; background: transparent; color: #dbe7f7; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.7; tab-size: 2; }
textarea::placeholder { color: #526078; }
.panel textarea { flex: 1 1 auto; margin-bottom: 7px; overflow: auto; }
.output-panel pre { flex: 1 1 auto; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #b9f0dc; }
.field-help { position: relative; z-index: 1; flex: 0 0 auto; margin: 0; padding: 5px 18px 15px; color: var(--subtle); background: #0b1322; font-size: 11px; line-height: 1.45; }
.controls-row { margin-top: 18px; }
.indent-control { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
select { min-width: 105px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-raised); }
.primary-actions { display: flex; gap: 9px; }
.button { min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 750; }
.button-primary { color: #092119; background: var(--accent); }
.button-primary:hover { background: var(--accent-strong); }
.button-secondary { border-color: var(--line); color: var(--ink); background: transparent; }
.button-secondary:hover { border-color: #4b6385; background: rgba(255,255,255,.04); }
.utility-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 23px; padding-top: 16px; border-top: 1px solid var(--line); }
.utility-button { padding: 5px 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 650; }
.utility-button + .utility-button { margin-left: 20px; }
.utility-button:hover:not(:disabled) { color: var(--accent); }
.utility-button:disabled { cursor: not-allowed; opacity: .35; }
.utility-button-muted { margin-left: auto; color: var(--subtle); }
.status-message { min-height: 22px; margin-top: 14px; color: var(--subtle); font-size: 12px; }
.status-message[data-type="valid"], .status-message[data-type="success"] { color: var(--accent); }
.status-message[data-type="invalid"] { color: var(--danger); }
.copy-toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; padding: 8px 12px; border: 1px solid rgba(118,225,192,.35); border-radius: 8px; color: #092119; background: var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,.28); font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease; }
.copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.info-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(17, 26, 42, .62); }
.info-card h2 { margin-bottom: 23px; }
.steps-list { display: grid; gap: 21px; margin: 0; padding: 0; list-style: none; }
.steps-list li { display: flex; gap: 14px; }
.steps-list li > span { padding-top: 2px; color: var(--accent); font-family: monospace; font-size: 11px; }
.steps-list strong { font-size: 13px; }
.steps-list p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.example-card pre { margin: 0 0 16px; padding: 17px; border: 1px solid #314561; border-radius: 9px; background: #0c1525; color: var(--accent-strong); font: 12px/1.65 "SFMono-Regular", Consolas, monospace; }
.example-card > p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.video-card { grid-column: 1 / -1; }
.video-card video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 1px solid #314561; border-radius: 12px; background: #0c1525; }
.video-card > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 12px; }

.faq-section { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; margin-top: 84px; padding-top: 31px; border-top: 1px solid var(--line); }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { padding: 17px 2px; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 650; list-style-position: outside; }
details p { max-width: 620px; margin: -5px 0 17px; color: var(--muted); font-size: 12px; }
.related-section { margin-top: 72px; }
.related-header { align-items: flex-end; margin-bottom: 18px; }
.coming-soon { color: var(--subtle); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.related-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 11px; }
.related-tool { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17, 26, 42, .45); }
.tool-icon { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 8px; color: var(--accent); background: rgba(118,225,192,.1); }
.related-tool strong, .related-tool p { display: block; }
.related-tool strong { font-size: 12px; }
.related-tool p { margin: 3px 0 0; color: var(--subtle); font-size: 10px; line-height: 1.3; }
.arrow { margin-left: auto; color: var(--subtle); }
.site-footer { display: flex; justify-content: space-between; padding: 0 0 30px; color: var(--subtle); font-size: 11px; }

/* JSON Compare */
.compare-editors { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 12px; }
.compare-editor-panel { min-width: 0; }
.swap-control { display: grid; place-items: center; }
.swap-button { display: grid; place-items: center; gap: 2px; width: 40px; height: 54px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent); background: rgba(118,225,192,.06); font-size: 21px; line-height: 1; }
.swap-button span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.swap-button:hover { border-color: #4b6385; background: rgba(118,225,192,.12); }
.compare-controls { display: flex; justify-content: center; margin-top: 18px; }
.compare-controls .button { min-width: 180px; }
.comparison-result { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; background: #0b1322; overflow: hidden; }
.result-header { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.result-header h2 { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.result-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.toolbar-label { color: var(--subtle); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.filter-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.filter-button span { min-width: 16px; padding: 1px 4px; border-radius: 4px; color: var(--subtle); background: rgba(255,255,255,.06); font-size: 10px; text-align: center; }
.filter-button:hover { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.04); }
.filter-button.is-active { border-color: rgba(118,225,192,.24); color: var(--accent-strong); background: rgba(118,225,192,.08); }
.filter-button.is-active span { color: #092119; background: var(--accent); }
.result-content { min-height: 108px; padding: 20px; }
.result-placeholder { margin: 13px 0; color: var(--subtle); font-size: 13px; text-align: center; }
.result-summary h3 { margin: 0 0 13px; font-size: 16px; letter-spacing: -.02em; }
.result-identical h3 { color: var(--accent); }
.result-summary > p { margin: 0; color: var(--muted); font-size: 12px; }
.diff-stats { display: flex; gap: 8px; margin-bottom: 20px; }
.diff-stats > div { display: flex; align-items: baseline; gap: 6px; padding: 8px 11px; border-radius: 7px; background: rgba(255,255,255,.05); }
.diff-stats strong { font-size: 16px; }
.diff-stats span { color: var(--muted); font-size: 11px; }
.difference-list, .invalid-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.difference-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-left: 2px solid var(--subtle); border-radius: 0 7px 7px 0; background: rgba(255,255,255,.035); }
.difference-added { border-color: var(--accent); }
.difference-removed { border-color: var(--danger); }
.difference-changed { border-color: var(--warning); }
.difference-badge { min-width: 62px; padding-top: 2px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.difference-added .difference-badge { color: var(--accent); }
.difference-removed .difference-badge { color: var(--danger); }
.difference-changed .difference-badge { color: var(--warning); }
.difference-detail { min-width: 0; }
.difference-detail strong { font: 12px "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.difference-detail p { margin: 4px 0 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.difference-detail code { color: var(--ink); font-family: "SFMono-Regular", Consolas, monospace; }
.filtered-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 8px; color: var(--subtle); font-size: 12px; text-align: center; }
.invalid-list { gap: 10px; }
.invalid-item { padding: 13px 14px; border-left: 2px solid var(--danger); border-radius: 0 8px 8px 0; background: rgba(255,143,154,.06); }
.invalid-item strong { color: var(--danger); font-size: 12px; }
.invalid-item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.related-tool-link { color: inherit; text-decoration: none; }
.related-tool-link:hover { border-color: #4b6385; background: rgba(255,255,255,.04); }
.compare-page .example-card code, .compare-page .how-card code { color: var(--accent-strong); font-family: "SFMono-Regular", Consolas, monospace; }
.controls-caption { color: var(--subtle); font-size: 11px; }
.mode-control { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.mode-label { color: var(--muted); font-size: 12px; font-weight: 750; }
.mode-tabs { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: rgba(11,19,34,.7); }
.mode-button { padding: 7px 11px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.mode-button:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.mode-button.is-active { border-color: rgba(118,225,192,.24); color: var(--accent-strong); background: rgba(118,225,192,.1); }
.jwt-input-panel { margin-top: 2px; }
.jwt-result { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; background: #0b1322; overflow: hidden; }
.jwt-output-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; }
.jwt-output-panel { min-width: 0; }
.jwt-output-panel pre { min-height: 250px; }
.jwt-signature-panel pre { overflow-wrap: anywhere; word-break: break-all; color: var(--warning); }
.jwt-claims { margin: 0 14px 14px; padding-top: 17px; border-top: 1px solid var(--line); }
.jwt-claims-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.jwt-claims-header h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.025em; }
.claims-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.claim-card { display: flex; flex-direction: column; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); }
.claim-card > span { color: var(--ink); font-size: 11px; font-weight: 750; }
.claim-card small { margin-top: 2px; color: var(--subtle); font: 10px "SFMono-Regular", Consolas, monospace; }
.claim-card strong { margin-top: 8px; color: var(--accent-strong); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.minify-metrics { display: flex; gap: 9px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.minify-metrics > div { display: flex; flex-direction: column; gap: 2px; min-width: 100px; padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,.045); }
.minify-metrics span { color: var(--subtle); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.minify-metrics strong { font-size: 17px; letter-spacing: -.02em; }
.minify-metrics .metric-highlight { background: rgba(118,225,192,.1); }
.metric-highlight strong { color: var(--accent); }

/* JSON Editor */
.editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.view-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: rgba(11,19,34,.7); }
.view-tab { min-width: 65px; padding: 7px 11px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 750; }
.view-tab:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.view-tab.is-active { border-color: rgba(118,225,192,.24); color: var(--accent-strong); background: rgba(118,225,192,.1); }
.editor-search { display: flex; align-items: center; gap: 7px; min-width: 0; }
.editor-search label { color: var(--muted); font-size: 11px; font-weight: 750; }
.editor-search input { width: 210px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--ink); background: var(--surface-raised); font-size: 12px; }
.editor-search input:focus { border-color: var(--accent); }
.editor-search select { min-width: 110px; padding: 8px 10px; font-size: 11px; }
.search-count { color: var(--subtle); font-size: 10px; white-space: nowrap; }
.editor-view[hidden] { display: none; }
.editor-text-panel { margin-top: 17px; }
.editor-text-panel textarea { min-height: 430px; }
.view-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0 12px; }
.view-actions > div { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.view-actions strong { font-size: 13px; }
.tree-stage, .table-stage { min-height: 280px; max-height: 600px; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #0b1322; }
.tree-list { margin: 0; padding: 0 0 0 5px; list-style: none; }
.tree-list .tree-list { margin-left: 12px; padding-left: 18px; border-left: 1px solid rgba(115,128,151,.28); }
.tree-node { position: relative; margin: 2px 0; border-radius: 7px; }
.tree-row { display: grid; grid-template-columns: minmax(100px, .9fr) auto minmax(100px, 1.25fr); align-items: center; gap: 11px; min-width: 0; padding: 8px 9px; border: 1px solid transparent; border-radius: 7px; }
.tree-details > summary { padding: 0; list-style: none; }
.tree-details > summary::-webkit-details-marker { display: none; }
.tree-details > summary::before { display: inline-block; width: 15px; color: var(--accent); content: "▸"; font-size: 12px; }
.tree-details[open] > summary::before { content: "▾"; }
.tree-details > summary .tree-row { display: inline-grid; width: calc(100% - 19px); vertical-align: middle; }
.tree-row:hover { border-color: var(--line); background: rgba(255,255,255,.035); }
.tree-key, .json-table td:first-child { min-width: 0; color: var(--ink); font: 12px/1.45 "SFMono-Regular", Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; }
.tree-type { justify-self: start; padding: 2px 6px; border-radius: 4px; color: var(--subtle); background: rgba(255,255,255,.06); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tree-value { min-width: 0; color: var(--accent-strong); font: 12px/1.45 "SFMono-Regular", Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; }
.tree-node.is-search-match > .tree-row, .tree-node.is-search-match > details > summary .tree-row { border-color: rgba(118,225,192,.6); background: rgba(118,225,192,.1); box-shadow: inset 3px 0 var(--accent); }
.editor-error { margin: 36px auto; max-width: 520px; padding: 17px; border-left: 2px solid var(--danger); border-radius: 0 9px 9px 0; background: rgba(255,143,154,.06); text-align: center; }
.editor-error strong { color: var(--danger); font-size: 13px; }
.editor-error p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.json-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.json-table th, .json-table td { padding: 10px 12px; border-bottom: 1px solid rgba(38,52,76,.8); text-align: left; vertical-align: top; }
.json-table th { color: var(--subtle); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.json-table td:nth-child(2) { width: 110px; color: var(--subtle); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.json-table td:last-child { color: var(--accent-strong); font: 12px/1.45 "SFMono-Regular", Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.json-table tbody tr:hover td { background: rgba(255,255,255,.035); }
.json-table tbody tr.is-search-match td { background: rgba(118,225,192,.1); }
.json-table tbody tr[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  .site-header, .site-footer, .page-shell { width: min(100% - 30px, 1120px); }
  .ad-slot { width: min(100% - 30px, 1120px); }
  .site-header { grid-template-columns: 1fr auto; gap: 14px; padding-top: 20px; }
  .page-shell { padding-top: 38px; }
  .header-note { display: none; }
  .workspace-grid, .help-grid, .faq-section, .related-tools { grid-template-columns: 1fr; }
  .jwt-output-grid, .claims-grid { grid-template-columns: 1fr; }
  .compare-editors { grid-template-columns: 1fr; gap: 10px; }
  .swap-control { order: 2; }
  .compare-editors .compare-editor-panel:last-child { order: 3; }
  .swap-button { width: 100%; height: 34px; grid-template-columns: auto auto; gap: 8px; }
  .swap-button span { font-size: 10px; }
  .compare-controls .button { width: 100%; }
  .result-toolbar { align-items: flex-start; flex-direction: column; }
  .filter-tabs { width: 100%; }
  .filter-button { flex: 1; justify-content: center; }
  .editor-toolbar { align-items: stretch; flex-direction: column; }
  .view-tabs { width: 100%; }
  .view-tab { flex: 1; }
  .editor-search { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
  .editor-search input, .editor-search select { width: auto; }
  .editor-search select { grid-column: 2; }
  .search-count { grid-column: 2; }
  .view-actions { align-items: flex-start; flex-direction: column; }
  .view-actions .primary-actions { width: 100%; }
  .view-actions .button { flex: 1; }
  .tree-row { grid-template-columns: minmax(75px, .8fr) auto minmax(80px, 1fr); gap: 7px; padding: 7px 5px; }
  .mode-control { align-items: stretch; flex-direction: column; gap: 7px; }
  .mode-tabs { width: 100%; }
  .mode-button { flex: 1; }
  .controls-caption { order: 2; }
  .minify-metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
  .minify-metrics > div { min-width: 0; }
  .faq-section { gap: 25px; margin-top: 58px; }
  .controls-row { align-items: stretch; flex-direction: column; }
  .indent-control { justify-content: space-between; }
  .primary-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .button { width: 100%; }
  .related-header { align-items: flex-start; }
  .jwt-claims-header { align-items: flex-start; flex-direction: column; gap: 5px; }
  textarea, .output-panel pre { min-height: 260px; }
  .site-footer { flex-direction: column; gap: 5px; }
}

@media (max-width: 440px) {
  h1 { font-size: 2.7rem; }
  .tool-card { padding: 18px; }
  .tool-card-header { align-items: flex-start; flex-direction: column; gap: 9px; }
  .privacy-note { align-items: flex-start; }
  .utility-button + .utility-button { margin-left: 15px; }
  .utility-button-muted { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .copy-toast { transition: none; }
}

.file-import { display: grid; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.file-import label { font-weight: 700; }
.file-import input { width: 100%; min-width: 0; font: inherit; color: var(--muted); }
.file-import input::file-selector-button { margin-right: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: #152238; color: var(--accent); cursor: pointer; font: inherit; }
.file-import input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.file-import [role="status"] { overflow-wrap: anywhere; color: var(--accent); }
.file-import [role="status"]:empty { display: none; }
.panel.is-file-over { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

/* Timestamp Converter */
.timestamp-fields { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 18px; }
.timestamp-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.timestamp-field[hidden] { display: none; }
.timestamp-field label { font-size: 12px; color: var(--muted); font-weight: 700; }
.timestamp-field input { width: 100%; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #0b1322; color: var(--ink); font: 14px/1.5 monospace; }
.timestamp-field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.timestamp-field select { min-height: 49px; }
.timestamp-field .field-help { padding: 0; margin: 0; background: transparent; }
.timestamp-fields.is-date { grid-template-columns: minmax(0, 1fr); }
.timestamp-result { margin-top: 20px; }
.timestamp-result pre { margin: 0; padding: 20px; min-height: 150px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--accent-strong); font: 13px/1.9 monospace; }
.timestamp-page .example-card pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) { .timestamp-fields { grid-template-columns: minmax(0, 1fr); } }

/* Password generator */
.password-result { margin-bottom: 18px; }
.password-list { display: grid; gap: 6px; max-height: 440px; margin: 0; padding: 10px; overflow: auto; list-style: none; }
.password-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px 11px 15px; border: 1px solid var(--line); border-radius: 9px; background: #0c1525; }
.password-value { min-width: 0; color: var(--accent-strong); font: 600 17px/1.4 "SFMono-Regular", Consolas, monospace; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
.password-empty { padding: 14px; color: var(--subtle); font-size: 13px; }
.strength { display: flex; align-items: center; gap: 14px; padding: 4px 20px 16px; }
.strength[hidden] { display: none; }
.strength-bar { display: grid; grid-template-columns: repeat(4, 38px); gap: 4px; }
.strength-bar span { height: 6px; border-radius: 3px; background: var(--line); }
.strength[data-level="1"] .strength-bar span:nth-child(-n+1) { background: var(--danger); }
.strength[data-level="2"] .strength-bar span:nth-child(-n+2) { background: var(--warning); }
.strength[data-level="3"] .strength-bar span:nth-child(-n+3) { background: var(--accent); }
.strength[data-level="4"] .strength-bar span { background: var(--accent-strong); }
.strength-text { margin: 0; color: var(--muted); font-size: 12px; }
.strength-text strong { color: var(--ink); }
.password-options { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.option-group { display: flex; flex-direction: column; gap: 11px; min-width: 0; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: #0b1322; }
.option-group legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.option-group .field-help { padding: 0; background: transparent; }
.length-presets { flex-wrap: wrap; align-self: flex-start; }
.length-custom { display: flex; align-items: center; gap: 12px; }
.length-custom input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.length-custom input[type="number"], .count-field select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #0c1525; font: 13px/1.4 "SFMono-Regular", Consolas, monospace; }
.length-custom input[type="number"] { width: 76px; }
.check { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.check code { margin-left: 3px; color: var(--subtle); font: 12px "SFMono-Regular", Consolas, monospace; }
.count-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; color: var(--ink); font-size: 13px; }
.password-options input:focus-visible, .password-options select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .password-options { grid-template-columns: 1fr 1fr; } .option-length { grid-column: 1 / -1; } }
@media (max-width: 560px) { .password-options { grid-template-columns: 1fr; } .password-value { font-size: 15px; } .strength { flex-wrap: wrap; } }

/* SSL certificate checker */
.cert-input-panel textarea { min-height: 220px; font-size: 12px; }
.cert-controls { display: flex; align-items: flex-end; gap: 14px; margin-top: 16px; }
.cert-hostname { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.cert-hostname label { color: var(--muted); font-size: 12px; font-weight: 700; }
.cert-hostname label span { color: var(--subtle); font-weight: 500; }
.cert-hostname input { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #0b1322; font: 14px/1.5 "SFMono-Regular", Consolas, monospace; }
.cert-hostname input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cert-results { margin-top: 24px; }
.cert-results[hidden] { display: none; }
.cert-verdict { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #0b1322; }
.cert-verdict .status-dot { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 7px; }
.cert-verdict h2 { margin: 0; font-size: 1.2rem; }
.cert-verdict p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.cert-verdict[data-verdict="good"] { border-color: rgba(118,225,192,.35); background: rgba(118,225,192,.06); }
.cert-verdict[data-verdict="warnings"] { border-color: rgba(255,184,107,.4); background: rgba(255,184,107,.06); }
.cert-verdict[data-verdict="problems"] { border-color: rgba(255,143,154,.45); background: rgba(255,143,154,.07); }
.status-dot[data-type="warning"] { background: var(--warning); box-shadow: 0 0 0 4px rgba(255,184,107,.14); }
.cert-notes { margin: 12px 0 0; padding: 12px 16px 12px 34px; border: 1px solid rgba(255,184,107,.4); border-radius: 10px; color: var(--warning); background: rgba(255,184,107,.06); font-size: 12px; }
.cert-notes[hidden] { display: none; }
.cert-subtitle { margin: 26px 0 10px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.check-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: #0b1322; }
.check-item strong { font-size: 13px; }
.check-item p { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.check-icon { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; color: #092119; font-size: 12px; font-weight: 800; }
.check-item[data-status="pass"] .check-icon { background: var(--accent); }
.check-item[data-status="warn"] .check-icon { background: var(--warning); }
.check-item[data-status="fail"] .check-icon { background: var(--danger); }
.check-item[data-status="fail"] { border-color: rgba(255,143,154,.4); }
.check-item[data-status="info"] .check-icon { color: var(--ink); background: var(--line); font-family: Georgia, serif; font-style: italic; }
.cert-cards { display: grid; gap: 8px; }
.cert-card { border: 1px solid var(--line); border-radius: 12px; background: #0b1322; }
.cert-card summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; cursor: pointer; font-size: 13px; }
.cert-card summary strong { min-width: 0; overflow-wrap: anywhere; }
.cert-role { padding: 3px 8px; border: 1px solid rgba(118,225,192,.3); border-radius: 999px; color: var(--accent-strong); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.cert-expiry { margin-left: auto; color: var(--subtle); font-size: 12px; }
.cert-expiry.is-expired { color: var(--danger); }
.cert-fields { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 8px 18px; margin: 0; padding: 4px 16px 18px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; }
.cert-fields dt { color: var(--subtle); font-weight: 700; }
.cert-fields dd { margin: 0; min-width: 0; color: var(--ink); font-family: "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.certificate-page .utility-actions { margin-top: 26px; }
@media (max-width: 720px) {
  .cert-controls { flex-direction: column; align-items: stretch; }
  .cert-fields { grid-template-columns: 1fr; gap: 2px; }
  .cert-fields dd { margin-bottom: 8px; }
  .cert-expiry { margin-left: 0; }
}

/* LLM output sanitizer */
.sanitize-page .output-panel .panel-header { gap: 10px; }
.view-tabs { padding: 3px; text-transform: none; letter-spacing: 0; }
.view-tabs .mode-button { padding: 5px 9px; }
.changes-view { display: block; flex: 1 1 auto; min-height: 330px; margin: 0; padding: 19px 18px; overflow: auto; color: #dbe7f7; font: 13px/1.7 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.sanitize-output[hidden] { display: none; }
.change { display: inline-block; margin: 0 1px; padding: 0 4px; border: 1px solid; border-radius: 4px; font: 750 10px/1.6 system-ui, sans-serif; vertical-align: 1px; cursor: help; }
.change-removed { border-color: rgba(255,143,154,.5); color: var(--danger); background: rgba(255,143,154,.14); }
.change-replaced { border-color: rgba(255,184,107,.5); color: var(--warning); background: rgba(255,184,107,.12); }
.change-kept { border-color: rgba(118,225,192,.4); color: var(--accent); background: rgba(118,225,192,.1); }
.changes-note { margin: 12px 0 0; color: var(--subtle); font-size: 11px; }
.sanitize-summary { margin: 16px 0 0; color: var(--ink); font-size: 13px; }
.hidden-alert { margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(255,143,154,.45); border-radius: 10px; background: rgba(255,143,154,.07); }
.hidden-alert[hidden] { display: none; }
.hidden-alert strong { color: var(--danger); font-size: 13px; }
.hidden-alert p { margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
.hidden-alert ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hidden-kind { display: block; margin-bottom: 3px; color: var(--subtle); font-size: 11px; }
.hidden-alert code { display: block; padding: 8px 10px; border: 1px solid #314561; border-radius: 7px; color: var(--ink); background: #0c1525; font: 12px/1.5 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.sanitize-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.check-sub { padding-top: 6px; border-top: 1px dashed var(--line); }
.check small { color: var(--subtle); }
.select-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 27px; color: var(--muted); font-size: 12px; }
.select-field select { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #0c1525; font: 12px system-ui, sans-serif; }
.findings[hidden] { display: none; }
.findings-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.findings-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.findings-table th, .findings-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.findings-table tr:last-child td { border-bottom: 0; }
.findings-table th { color: var(--subtle); background: #0b1322; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.findings-table .code-cell { color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.findings-table td:last-child { white-space: normal; }
.finding-note { color: var(--subtle); }
.findings-table tr[data-action="removed"] .action-cell { color: var(--danger); }
.findings-table tr[data-action="replaced"] .action-cell { color: var(--warning); }
.findings-table tr[data-action="kept"] .action-cell { color: var(--accent); }
.check input { flex: 0 0 auto; }
@media (max-width: 720px) {
  .sanitize-options { grid-template-columns: 1fr; }
  .findings-table thead { display: none; }
  .findings-table, .findings-table tbody, .findings-table tr, .findings-table td { display: block; }
  .findings-table tr { padding: 11px 14px; border-bottom: 1px solid var(--line); }
  .findings-table tr:last-child { border-bottom: 0; }
  .findings-table td { padding: 2px 0; border: 0; white-space: normal; }
  .findings-table td[data-label]::before { content: attr(data-label) ": "; color: var(--subtle); font-family: system-ui, sans-serif; }
  .sanitize-page .output-panel .panel-header { flex-wrap: wrap; padding: 8px 16px; }
}