/* ============================================================
   DevTooling — Global Stylesheet
   Font: Plus Jakarta Sans (UI text + headings, Google Fonts) with
   IBM Plex Sans as the fallback stack + IBM Plex Mono (badges, code
   accents) + Geomini (small uppercase micro-labels — eyebrow,
   pane labels, section labels). The code editor / viewer / diff
   surfaces stay on Consolas — see the !important block just below.
   Header: dark  |  Page content: light + dark themes via [data-theme]
   ============================================================ */

/* Plus Jakarta Sans and IBM Plex Mono — self-hosted (both SIL OFL) instead of
   fetched from Google Fonts, which put a render-blocking request to another
   origin in front of first paint on every page. Latin subset only; other
   scripts fall through to the system fonts in each font-family stack.
   Plus Jakarta Sans is one variable file covering every weight. If a file is
   ever replaced, rename it: fonts are cached for a year. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geomini — self-hosted variable font (SIL OFL, see fonts/Geomini-OFL.txt).
   Used only by the small uppercase micro-labels. */
@font-face {
    font-family: 'Geomini';
    src: url('../fonts/Geomini.woff2') format('woff2');
    font-weight: 100 800;
    font-display: swap;
}

/* One stack for every small uppercase label so they change together */
:root {
    --label-font: 'Geomini', 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    --label-color: #2563EB;
}
[data-theme="dark"] {
    --label-color: #58A6FF;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Visually hidden but still announced by screen readers — for table
   <caption>s and similar labels that a sighted layout already conveys. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* One fixed editor font everywhere — including the diff view, which had no
   font-size/family of its own and silently inherited different values the
   moment Compare swapped it in for the plain textarea. !important so it
   can't drift depending on which state (plain editor vs. diff view) is
   currently showing. Ligatures are off since Consolas has none to worry
   about, but a monospace fallback chain could still pick one up. */
.editor-box, .output-box, .ide-plain, .tv-view, .diff-inline-view,
.ide-code-layer, .line-numbers, .diff-pane, .diff-line, .diff-ln, .diff-text {
    font-family: Consolas, 'Courier New', monospace !important;
    font-size: 14px !important;
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "calt" 0;
    font-feature-settings: "liga" 0, "calt" 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    background-color: #ffffff;
    color: #1a1a1a;
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: #1a6fd4;
    text-decoration: none;
}

a:hover {
    color: #1558a8;
    text-decoration: underline;
}

/* Every h1/h2/h3 site-wide uses Plus Jakarta Sans (Google Fonts) — Outfit kept
   only as a fallback for pages that haven't reloaded the stylesheet yet. */
h1, h2, h3 {
    font-family: 'Plus Jakarta Sans', 'Outfit', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Navigation Header (stays dark, always pinned to top) ---------- */
.site-header {
    background-color: #0D1117;
    border-bottom: 1px solid #1f2733;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

/* Header is out of normal flow now, so the page needs room reserved for it —
   matches .site-nav's fixed 58px height + 1px border. */
body { padding-top: 59px; }

/* Edge to edge: logo hard left, links hard right */
.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0 28px;
    height: 58px;
}

.nav-logo {
    font-size: 1.22rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.nav-logo:hover { color: #ffffff; text-decoration: none; }

.logo-icon { display: block; flex-shrink: 0; }

.nav-links {
    display: flex;
    list-style: none;
    gap: 6px;
    align-items: center;
    height: 100%;
}

.nav-links li { height: 100%; }

/* Underline indicator instead of a pill */
.nav-links .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    color: #b9c2cf;
    padding: 0 14px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.18s;
    text-decoration: none;
}

.nav-links .nav-item:hover { color: #ffffff; text-decoration: none; }

.nav-links .nav-item.active {
    color: #ffffff;
    font-weight: 700;
}

.nav-links .nav-item.active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    background-color: #2f81f7;
    border-radius: 2px 2px 0 0;
}

/* ---------- Nav dropdowns (Formatter / Converter / Viewer) ---------- */
.nav-dropdown {
    position: relative;
    height: 100%;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    gap: 5px;
}

.nav-caret {
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.18s;
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

/* Opens on hover and closes on mouse-out. The padding-top/margin-top pair
   below extends the hoverable area up into what would otherwise be a dead
   gap between the button and the menu — without it, moving the mouse down
   to the menu leaves .nav-dropdown for a frame, :hover drops, and the menu
   vanishes before the click on an option ever lands. Click is also wired
   (see site.js) as a fallback for touch devices, which have no hover state. */
.nav-dropdown-menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 8px;
    padding-top: 16px;
    margin-top: -8px;
    min-width: 190px;
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    z-index: 1100;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: flex; }

.nav-dropdown-item {
    display: block;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #111111;
    white-space: nowrap;
    text-decoration: none;
}

.nav-dropdown-item:hover { background-color: #F3F4F6; color: #111111; text-decoration: none; }
.nav-dropdown-item.active { background-color: #EFF6FF; color: #1a6fd4; }

/* Hamburger button */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #f0f0f0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- Mobile nav ---------- */
/* Shrink link spacing/font on medium screens so all items still fit in one row */
@media (max-width: 1024px) {
    .site-nav { padding: 0 16px; }
    .nav-links { gap: 0; }
    .nav-links .nav-item { padding: 0 8px; font-size: 0.72rem; letter-spacing: 0.2px; }
}

/* Collapse to a hamburger before the full nav (8 items + 4 dropdowns + theme
   toggle) actually runs out of room — measured to start overflowing and
   pushing the theme toggle off-screen somewhere between 800-900px, so the
   switch happens at 900px, not the much narrower 640px this used to be. */
@media (max-width: 1000px) {
    .hamburger { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: 58px;
        left: 0;
        right: 0;
        background-color: #111111;
        border-bottom: 1px solid #2a2a2a;
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px 20px;
        gap: 4px;
        /* The desktop rule sets height: 100% (of the 58px header), which would
           clip this panel to one row and let the links spill over the page.
           Size to content instead, and scroll if the list outgrows the screen
           (e.g. a phone in landscape with several dropdowns open). */
        height: auto;
        max-height: calc(100vh - 59px);
        max-height: calc(100dvh - 59px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-links.open { display: flex; }

    .nav-links li { height: auto; }

    .nav-links .nav-item {
        display: block;
        height: auto;
        padding: 12px 16px;
        font-size: 1rem;
        border-radius: 6px;
    }

    /* The bottom-edge underline marks the current page in the desktop bar; in
       the stacked list it would sit under a tall row, so use a tint instead. */
    .nav-links .nav-item.active::after { display: none; }
    .nav-links .nav-item.active { background-color: rgba(255, 255, 255, 0.08); }

    /* Dropdowns become inline expanding sections instead of hover popovers */
    .nav-dropdown { height: auto; }
    .nav-links .nav-dropdown-toggle { display: flex; align-items: center; width: 100%; justify-content: space-between; text-align: left; }

    .nav-dropdown-menu {
        display: none;
        position: static;
        margin: 2px 0 6px;
        padding: 0;
        min-width: 0;
        background: none;
        border: none;
        box-shadow: none;
    }

    .nav-dropdown.open .nav-dropdown-menu { display: flex; }

    .nav-dropdown-item {
        padding: 10px 16px 10px 28px;
        color: #b9c2cf;
    }

    .nav-dropdown-item:hover,
    .nav-dropdown-item.active { background-color: rgba(255, 255, 255, 0.08); color: #ffffff; }
}

/* ---------- Leaderboard ad (below the nav, 728×90) ----------
   Quiet by design: a hairline-bordered rail, a small "Advertisement"
   caption above it (AdSense policy requires the label), and a fixed
   min-height so the page doesn't jump when the unit fills. */
.ad-leaderboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 24px 16px;
    background-color: #FBFCFD;
    border-bottom: 1px solid #D1D5DB;
}

.ad-leaderboard-label {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6B7280;
}

.ad-leaderboard-slot {
    width: 728px;
    max-width: 100%;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    background-color: #ffffff;
    overflow: hidden;
}

/* House placeholder shown until ads are sold: an inviting dashed card with an
   icon, the headline and a small call to action, all linking to /contact. */
.ad-leaderboard-slot--house {
    border: 1.5px dashed #93C5FD;
    background: linear-gradient(120deg, #EFF6FF 0%, #F5F3FF 100%);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ad-leaderboard-slot--house:hover { border-color: #2563EB; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.14); }

.ad-leaderboard-house {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: 90px;
    padding: 0 22px;
    text-decoration: none;
}
.ad-leaderboard-house:hover { text-decoration: none; }

.ad-house-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.ad-house-icon svg { width: 22px; height: 22px; }

.ad-house-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }

.ad-leaderboard-house-main {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E3A8A;
}
.ad-leaderboard-house-sub {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.72rem;
    color: #4B5563;
}

.ad-house-cta {
    flex: none;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    background: #2563EB;
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.15s;
}
.ad-leaderboard-house:hover .ad-house-cta,
.ad-rect-house:hover .ad-house-cta { background: #1D4ED8; }

@media (max-width: 768px) {
    .ad-leaderboard      { padding: 12px 14px 14px; }
    .ad-leaderboard-slot { min-height: 64px; }
    .ad-leaderboard-house { height: 64px; padding: 0 14px; gap: 12px; }
    .ad-leaderboard-house-main { font-size: 0.9rem; }
    .ad-leaderboard-house-sub, .ad-leaderboard-house .ad-house-cta { display: none; }
    .ad-leaderboard-house .ad-house-icon { width: 36px; height: 36px; border-radius: 10px; }
}

/* Sponsored creative — fills the slot with a solid brand color instead of the
   quiet gray house-ad fallback. The slot's own border/background is hidden
   here since the creative paints edge-to-edge (clipped by the slot's own
   overflow:hidden + border-radius, so no radius is needed on the link itself). */
.ad-leaderboard-slot--sponsored,
.ad-rect-slot--sponsored { border-color: transparent; background-color: transparent; }

.ad-sponsor {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 0 22px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ad-sponsor:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }

/* Soft light sweep every few seconds so the ad doesn't read as a static image */
.ad-sponsor::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 35%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-20deg);
    animation: ad-sponsor-shimmer 4s ease-in-out infinite;
}

@keyframes ad-sponsor-shimmer {
    0%   { left: -60%; }
    45%  { left: 130%; }
    100% { left: 130%; }
}

@keyframes ad-sponsor-icon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .ad-sponsor::after { animation: none; }
    .ad-sponsor-icon { animation: none; }
}

.ad-sponsor-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: ad-sponsor-icon-pulse 2.4s ease-in-out infinite;
}
.ad-sponsor-icon svg { width: 22px; height: 22px; stroke: #fff; }

.ad-sponsor-text { flex: 1; min-width: 0; text-align: left; }
.ad-sponsor-main {
    display: block;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px;
}
.ad-sponsor-sub {
    display: block;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}
.ad-sponsor-cta {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: inherit;
    background-color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Rectangle (336x280) sponsor — stacked/centered instead of the leaderboard's row layout */
.ad-rect .ad-sponsor {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 20px;
    gap: 12px;
}
.ad-rect .ad-sponsor-icon { width: 56px; height: 56px; }
.ad-rect .ad-sponsor-icon svg { width: 28px; height: 28px; }
.ad-rect .ad-sponsor-text { text-align: center; }
.ad-rect .ad-sponsor-main { font-size: 1.05rem; margin-bottom: 4px; }
.ad-rect .ad-sponsor-sub { font-size: 0.82rem; line-height: 1.5; }

@media (max-width: 768px) {
    .ad-sponsor { padding: 0 14px; gap: 10px; }
    .ad-sponsor-icon { width: 32px; height: 32px; }
    .ad-sponsor-main { font-size: 0.82rem; }
    .ad-sponsor-sub { display: none; }
    .ad-sponsor-cta { padding: 6px 12px; font-size: 0.75rem; }
}

/* ---------- In-content ad (336×280 medium rectangle, tool pages) ----------
   Same quiet treatment as .ad-leaderboard: a small "Advertisement" caption
   over a neutral bordered box, fixed size so nothing shifts when a unit fills.
   Rendered from the _AdRect.cshtml partial. */
.ad-rect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* Let the box shrink on very narrow screens (320px) instead of forcing the
       page wider than the viewport with its fixed 336px slot. */
    min-width: 0;
    max-width: 100%;
}

.ad-rect-label {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6B7280;
}

.ad-rect-slot {
    width: 336px;
    max-width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    background-color: #ffffff;
    overflow: hidden;
}

/* House placeholder shown until ads are sold (see the leaderboard note above) */
.ad-rect-slot--house {
    border: 1.5px dashed #93C5FD;
    background: linear-gradient(160deg, #EFF6FF 0%, #F5F3FF 100%);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ad-rect-slot--house:hover { border-color: #2563EB; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.14); }

.ad-rect-house {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: center;
    text-decoration: none;
}
.ad-rect-house:hover { text-decoration: none; }
.ad-rect-house .ad-house-icon { width: 64px; height: 64px; border-radius: 18px; }
.ad-rect-house .ad-house-icon svg { width: 32px; height: 32px; }

.ad-rect-house-main {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: #1E3A8A;
}
.ad-rect-house-sub {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #4B5563;
    max-width: 26ch;
}
.ad-rect-house .ad-house-cta { margin-top: 6px; }

/* ---------- Main content (white bg / black text) ---------- */
/* Edge-to-edge variant used by IDE-style tool pages */
.site-main.full-bleed {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.site-main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ---------- Breadcrumb ---------- */
/* Sits outside <main> so its horizontal padding stays constant whether the
   page below is full-bleed (tool pages) or the padded default (Contact,
   Help, etc.) — lines up with .ide-head's own 24px gutter either way. */
.breadcrumb-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #D1D5DB;
}
.breadcrumb-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 9px 24px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.breadcrumb-inner a { color: #6B7280; text-decoration: none; }
.breadcrumb-inner a:hover { color: #2563EB; text-decoration: underline; }
.breadcrumb-sep { color: #D1D5DB; }
.breadcrumb-item { color: #6B7280; }
.breadcrumb-current { color: #111827; font-weight: 600; }

/* ---------- Related tools chip row ---------- */
.related-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 24px;
    border-bottom: 1px solid #D1D5DB;
    background-color: #FAFBFC;
}
.related-tools-label { font-family: var(--label-font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label-color); margin-right: 2px; }
.related-tools-chip {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: #2563EB;
    border: 1px solid #2563EB;
    border-radius: 20px;
    padding: 4px 12px;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.related-tools-chip:hover { background-color: #1D4ED8; border-color: #1D4ED8; }
.related-tools--bordered .related-tools { border-top: 1px solid #D1D5DB; }

/* ============================================================
   HOME PAGE  (scoped under .hp — site font, light theme)
   Accent #2563EB · ink #111827 · muted #5B6472 · border #D1D5DB
   Runs full-bleed: each band sets its own background/padding.
   ============================================================ */
.hp {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    color: #1B2230;
}
.hp * { box-sizing: border-box; }

.hp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.hp-eyebrow {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #2563EB;
    border-radius: 20px;
    padding: 5px 14px;
}

.hp h1, .hp h2, .hp h3 { line-height: 1.18; letter-spacing: -0.02em; margin: 0; color: #111827; }
.hp h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }

/* Homepage FAQ heading pinned to match the tool-page FAQ heading
   (.faq-head h2, 1.6rem) instead of the shared responsive .hp h2 clamp —
   the two "Frequently Asked Questions"-style headings should read the
   same size everywhere on the site. */
.hp-section-head--faq h2 { font-size: 1.6rem; }

/* ---------- Buttons ---------- */
.hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 11px 18px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.hp-btn:active { transform: translateY(1px); }
.hp-btn-primary { background: #2563EB; color: #ffffff; }
.hp-btn-primary:hover { background: #1D4ED8; color: #ffffff; text-decoration: none; }
.hp-btn-ghost { background: transparent; color: #1B2230; border-color: #C6CEDA; }
.hp-btn-ghost:hover { border-color: #2563EB; color: #2563EB; text-decoration: none; }

/* ---------- Hero ---------- */
.hp-hero { padding: 60px 0 52px; background: #ffffff; }
.hp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 52px;
    align-items: center;
}
.hp-hero h1 {
    font-size: clamp(2rem, 4.6vw, 3rem);
    font-weight: 700;
    margin: 14px 0 16px;
}
.hp-hero h1 em { font-style: normal; color: #2563EB; }
.hp-hero-sub {
    font-size: 1.05rem;
    color: #5B6472;
    max-width: 46ch;
    line-height: 1.6;
    margin-bottom: 26px;
}
.hp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-assurance {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: calc(0.76rem + 2px);
    color: #1A7F52;
}
.hp-assurance .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #1A7F52; box-shadow: 0 0 0 4px #E3F5EC;
    flex-shrink: 0;
}

/* Static hero preview — a decorative snapshot, not a working editor. No
   textarea, no scrollbars, no buttons. A fixed, deliberate size (not
   stretched to whatever height the hero text happens to wrap to) so its
   proportions stay clean at every viewport width. */
.hp-demo {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    height: 320px;
    margin-left: auto;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20,30,50,.04), 0 12px 30px rgba(20,30,50,.07);
    overflow: hidden;
}
.hp-demo-chrome {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #F5F7FA;
    border-bottom: 1px solid #D1D5DB;
    flex-shrink: 0;
}
.hp-demo-chrome i {
    width: 11px; height: 11px; border-radius: 50%;
    background: #C6CEDA; display: inline-block;
}
.hp-demo-chrome span {
    margin-left: 4px;
    font-family: var(--label-font);
    font-size: 0.72rem; color: #6B7280;
}
/* flex: 1 fills the space between the fixed chrome and status bars above
   and below. Each pane centers its own (short, fixed) content vertically
   rather than stretching it, so it reads as a deliberate snippet, not
   code that's been oddly pulled apart to fill the box. */
.hp-demo-panes { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
/* flex-start so both panes' labels sit at the same height and read in order,
   regardless of how many lines of code sit under each one */
.hp-demo-pane { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 16px; min-width: 0; min-height: 0; }
.hp-demo-pane + .hp-demo-pane { border-left: 1px solid #D1D5DB; }
.hp-demo-pane .hp-demo-label {
    font-family: var(--label-font);
    font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--label-color); padding: 0 12px 8px;
    flex-shrink: 0;
}
.hp-demo-pane pre {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.78rem; line-height: 1.6;
    margin: 0; padding: 0 12px;
    white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
    color: #1B2230;
}
.hp-demo-bar {
    display: flex; align-items: center;
    padding: 10px 12px;
    background: #F5F7FA;
    border-top: 1px solid #D1D5DB;
    flex-shrink: 0;
}
.hp-demo-status {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.72rem; color: #6B7280;
}
.hp-demo-status.ok { color: #1A7F52; }

/* ---------- Trust strip ---------- */
.hp-trust { background: #FBFCFD; border-block: 1px solid #D1D5DB; }
.hp-trust .hp-wrap {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
    padding-top: 24px; padding-bottom: 24px;
}
.hp-trust-item { display: flex; flex-direction: column; gap: 2px; }
.hp-trust-item svg { width: 20px; height: 20px; color: #2563EB; margin-bottom: 6px; }
.hp-trust-item b { font-size: 15.2px; color: #111827; }
.hp-trust-item span { font-size: 14px; color: #5B6472; }

/* ---------- Section shell ---------- */
.hp-section { padding: 64px 0; background: #ffffff; }
.hp-section.alt { background: #FBFCFD; border-block: 1px solid #D1D5DB; }
.hp-section-head { max-width: 56ch; margin-bottom: 32px; }
.hp-section-head h2 { margin-top: 8px; }
.hp-section-head p { color: #5B6472; margin-top: 10px; }

/* ---------- Tool directory ---------- */
.hp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hp-filters button {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 14px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid #C6CEDA; background: transparent; color: #5B6472;
    cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hp-filters button:hover { color: #111827; border-color: #2563EB; }
.hp-filters button[aria-pressed="true"] { background: #2563EB; color: #fff; border-color: #2563EB; }

.hp-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hp-tool {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px;
    background: #ffffff; border: 1px solid #D1D5DB; border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.hp-tool:hover {
    border-color: #2563EB; transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(20,30,50,.08); text-decoration: none;
}
.hp-tool-top { display: flex; align-items: center; gap: 10px; }
.hp-tool-ico {
    width: 34px; height: 34px; border-radius: 8px; flex: none;
    display: grid; place-items: center;
    background: #EFF6FF; border: 1px solid #BFDBFE;
}
.hp-tool-ico svg { width: 20px; height: 20px; }
.hp-tool h3 { font-size: 0.98rem; font-weight: 600; color: #111827; }
.hp-tool p { font-size: 0.92rem; color: #5B6472; line-height: 1.5; flex: 1; margin: 0; }
.hp-tool-go {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.74rem; font-weight: 600; color: #2563EB;
    opacity: 0; transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
}
.hp-tool:hover .hp-tool-go { opacity: 1; transform: translateX(0); }
.hp-tool[hidden] { display: none; }

/* ---------- How it works ---------- */
.hp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: hp-s; }
.hp-step {
    background: #ffffff; border: 1px solid #D1D5DB; border-radius: 12px; padding: 22px;
}
.hp-step .hp-step-num {
    counter-increment: hp-s;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-weight: 600; font-size: 0.8rem; color: #2563EB;
}
.hp-step .hp-step-num::before { content: "0" counter(hp-s) " / "; color: #6B7280; }
.hp-step h3 { font-size: 1rem; margin: 10px 0 6px; }
.hp-step p { font-size: 0.92rem; color: #5B6472; margin: 0; }

/* ---------- Feature deep-dive ---------- */
.hp-dive { display: flex; flex-direction: column; gap: 40px; }
.hp-dive-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.hp-dive-row:nth-child(even) .hp-dive-text { order: 2; }
.hp-dive-text h3 { font-size: 1.2rem; margin-bottom: 10px; }
.hp-dive-text p { color: #5B6472; font-size: 0.92rem; margin-bottom: 14px; }
.hp-dive-text a {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.78rem; font-weight: 600; color: #2563EB;
}
.hp-dive-art {
    margin: 0;
    background: #F2F5FA;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 16px;
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.76rem;
    line-height: 1.6;
    color: #57606A;
    overflow-x: auto;
    white-space: pre;
}
@media (max-width: 820px) {
    .hp-dive-row { grid-template-columns: 1fr; gap: 18px; }
    .hp-dive-row:nth-child(even) .hp-dive-text { order: 0; }
}

/* ---------- FAQ ---------- */
.hp-faq { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.hp-faq details {
    background: #ffffff; border: 1px solid #D1D5DB; border-radius: 10px; padding: 2px 18px;
}
.hp-faq summary {
    cursor: pointer; list-style: none;
    font-family: 'Plus Jakarta Sans', 'Outfit', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    padding: 14px 0; font-weight: 600; font-size: 16px; color: #111827;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq-q-inner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hp-faq-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #EFF6FF;
    color: #2563EB;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Matches .faq-item.open .faq-num on tool pages — the badge inverts to
   solid blue while its question is expanded. Homepage FAQ uses native
   <details open> instead of a JS-toggled .open class, so target that. */
.hp-faq details[open] .hp-faq-num { background-color: #2563EB; color: #ffffff; }
.hp-faq-text { min-width: 0; }
.hp-faq summary::after {
    content: "+"; font-family: 'IBM Plex Mono', 'Consolas', monospace; color: #2563EB; font-size: 1.1rem;
}
.hp-faq details[open] summary::after { content: "\2013"; }
.hp-faq details p { padding: 0 0 16px; color: #5B6472; font-size: 14.8px; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hp-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .hp-hero { padding: 44px 0; }
    .hp-tool-grid { grid-template-columns: 1fr 1fr; }
    .hp-trust .hp-wrap { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 620px) {
    .hp-section { padding: 48px 0; }
    .hp-tool-grid { grid-template-columns: 1fr; }
    .hp-steps { grid-template-columns: 1fr; }
    .hp-demo-panes { grid-template-columns: 1fr; }
    .hp-demo-pane + .hp-demo-pane { border-left: 0; border-top: 1px solid #D1D5DB; }
}

/* ---------- Compiler page ---------- */
.compiler-header {
    margin-bottom: 24px;
}

.compiler-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111111;
}

.compiler-header p {
    color: #555555;
    font-size: 0.95rem;
    margin-top: 6px;
}

.panel-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

/* Editor grid */
.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.editor-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;           /* allow grid track to shrink; panes scroll internally */
}

/* ---------- Line-number editor wrapper ---------- */
.editor-wrapper {
    display: flex;
    height: 320px;          /* fixed — text scrolls inside, box stays still */
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-color: #fafafa;
    transition: border-color 0.2s;
    overflow: hidden;       /* clips border-radius cleanly */
}

.editor-wrapper:focus-within { border-color: #1a6fd4; }
.editor-wrapper.error        { border-color: #d32f2f; }

/* Gutter that shows line numbers */
.line-numbers {
    width: 44px;
    min-width: 44px;
    background-color: #f0f0f0;
    border-right: 1px solid #d8d8d8;
    padding: 14px 8px 14px 0;
    text-align: right;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #aaaaaa;
    user-select: none;
    overflow: hidden;       /* gutter scrolls via JS, never shows its own bar */
    flex-shrink: 0;
    white-space: pre;       /* numbers are one text node, not one span per line */
}

/* Only present in the server-rendered markup before JS replaces it */
.line-numbers span { display: block; }

/* The actual textarea — fills wrapper height, scrolls internally */
.editor-box {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    font-size: 0.82rem;
    background-color: #fafafa;
    color: #1a1a1a;
    border: none;
    padding: 14px 14px 14px 10px;
    width: 100%;
    height: 100%;           /* fills the fixed-height wrapper */
    resize: none;           /* no resize handle */
    outline: none;
    line-height: 1.6;
    tab-size: 2;
    overflow: auto;         /* scrollbars appear inside when text overflows */
    white-space: pre;       /* preserve indentation; long lines scroll horizontally */
}

/* ---------- Output area ---------- */
.output-panel {
    margin-bottom: 20px;
}

.output-wrapper {
    display: flex;
    height: 220px;          /* fixed height */
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-color: #fafafa;
    transition: border-color 0.2s;
    overflow: hidden;
}

.output-wrapper.has-error   { border-color: #d32f2f; }
.output-wrapper.has-success { border-color: #2e7d32; }

.output-box {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    font-size: 0.82rem;
    background-color: #fafafa;
    color: #1a1a1a;
    border: none;
    padding: 14px 14px 14px 10px;
    width: 100%;
    height: 100%;
    resize: none;
    outline: none;
    line-height: 1.6;
    overflow: auto;
    white-space: pre;
}

.output-box.has-error  { color: #d32f2f; }
.output-box.has-success { color: #1a1a1a; }

/* ---------- Visible scrollbars for editors, output, and tree ----------
   The default overlay scrollbar is nearly invisible, and on a very large
   document the thumb shrinks to a couple of pixels. This gives every
   scrollable surface a classic bar: bordered track, arrow buttons at each
   end, and a thumb with a minimum size so it can always be grabbed. */
.editor-box,
.output-box,
.ide-plain,
.tv-view,
.diff-inline-view {
    scrollbar-width: auto;                       /* Firefox: full-size bar */
    scrollbar-color: #9aa4b2 #f4f6f9;
}

.editor-box::-webkit-scrollbar,
.output-box::-webkit-scrollbar,
.ide-plain::-webkit-scrollbar,
.tv-view::-webkit-scrollbar,
.diff-inline-view::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

.editor-box::-webkit-scrollbar-track,
.output-box::-webkit-scrollbar-track,
.ide-plain::-webkit-scrollbar-track,
.tv-view::-webkit-scrollbar-track,
.diff-inline-view::-webkit-scrollbar-track {
    background-color: #f4f6f9;
    border-left: 1px solid #DFE3E8;
}

.editor-box::-webkit-scrollbar-track:horizontal,
.output-box::-webkit-scrollbar-track:horizontal,
.ide-plain::-webkit-scrollbar-track:horizontal,
.tv-view::-webkit-scrollbar-track:horizontal,
.diff-inline-view::-webkit-scrollbar-track:horizontal {
    border-left: none;
    border-top: 1px solid #DFE3E8;
}

.editor-box::-webkit-scrollbar-thumb,
.output-box::-webkit-scrollbar-thumb,
.ide-plain::-webkit-scrollbar-thumb,
.tv-view::-webkit-scrollbar-thumb,
.diff-inline-view::-webkit-scrollbar-thumb {
    background-color: #A8B2C0;
    border: 3px solid #f4f6f9;
    border-radius: 8px;
    min-height: 40px;               /* never shrinks away on huge documents */
    min-width: 40px;
}

.editor-box::-webkit-scrollbar-thumb:hover,
.output-box::-webkit-scrollbar-thumb:hover,
.ide-plain::-webkit-scrollbar-thumb:hover,
.tv-view::-webkit-scrollbar-thumb:hover,
.diff-inline-view::-webkit-scrollbar-thumb:hover {
    background-color: #7C8899;
}

/* Arrow buttons at each end (one per end, not doubled) */
.editor-box::-webkit-scrollbar-button:single-button,
.output-box::-webkit-scrollbar-button:single-button,
.ide-plain::-webkit-scrollbar-button:single-button,
.tv-view::-webkit-scrollbar-button:single-button,
.diff-inline-view::-webkit-scrollbar-button:single-button {
    display: block;
    height: 16px;
    width: 16px;
    background-color: #f4f6f9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
    border-left: 1px solid #DFE3E8;
}

.editor-box::-webkit-scrollbar-button:single-button:hover,
.output-box::-webkit-scrollbar-button:single-button:hover,
.ide-plain::-webkit-scrollbar-button:single-button:hover,
.tv-view::-webkit-scrollbar-button:single-button:hover,
.diff-inline-view::-webkit-scrollbar-button:single-button:hover {
    background-color: #E4E8EE;
}

/* Up */
.editor-box::-webkit-scrollbar-button:single-button:vertical:decrement,
.output-box::-webkit-scrollbar-button:single-button:vertical:decrement,
.ide-plain::-webkit-scrollbar-button:single-button:vertical:decrement,
.tv-view::-webkit-scrollbar-button:single-button:vertical:decrement,
.diff-inline-view::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='5,2 9,8 1,8' fill='%23707D8F'/></svg>");
}
/* Down */
.editor-box::-webkit-scrollbar-button:single-button:vertical:increment,
.output-box::-webkit-scrollbar-button:single-button:vertical:increment,
.ide-plain::-webkit-scrollbar-button:single-button:vertical:increment,
.tv-view::-webkit-scrollbar-button:single-button:vertical:increment,
.diff-inline-view::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='5,8 1,2 9,2' fill='%23707D8F'/></svg>");
}
/* Left */
.editor-box::-webkit-scrollbar-button:single-button:horizontal:decrement,
.output-box::-webkit-scrollbar-button:single-button:horizontal:decrement,
.ide-plain::-webkit-scrollbar-button:single-button:horizontal:decrement,
.tv-view::-webkit-scrollbar-button:single-button:horizontal:decrement,
.diff-inline-view::-webkit-scrollbar-button:single-button:horizontal:decrement {
    border-left: none;
    border-top: 1px solid #DFE3E8;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='2,5 8,1 8,9' fill='%23707D8F'/></svg>");
}
/* Right */
.editor-box::-webkit-scrollbar-button:single-button:horizontal:increment,
.output-box::-webkit-scrollbar-button:single-button:horizontal:increment,
.ide-plain::-webkit-scrollbar-button:single-button:horizontal:increment,
.tv-view::-webkit-scrollbar-button:single-button:horizontal:increment,
.diff-inline-view::-webkit-scrollbar-button:single-button:horizontal:increment {
    border-left: none;
    border-top: 1px solid #DFE3E8;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='8,5 2,1 2,9' fill='%23707D8F'/></svg>");
}

/* Where a vertical and horizontal bar meet */
.editor-box::-webkit-scrollbar-corner,
.output-box::-webkit-scrollbar-corner,
.ide-plain::-webkit-scrollbar-corner,
.tv-view::-webkit-scrollbar-corner,
.diff-inline-view::-webkit-scrollbar-corner {
    background-color: #f4f6f9;
}

/* ---------- Action buttons ---------- */
.action-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.btn {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.3px;
}

.btn:active { transform: scale(0.97); }

.btn-run {
    background-color: #1a6fd4;
    color: #ffffff;
}

.btn-run:hover { background-color: #1558a8; }

.btn-run:disabled {
    background-color: #a0c0e8;
    color: #ffffff;
    cursor: not-allowed;
}

.btn-clear {
    background-color: #ffffff;
    color: #444444;
    border: 1px solid #cccccc;
}

.btn-clear:hover {
    background-color: #f0f0f0;
    color: #111111;
}

/* ---------- Error display box ---------- */
/* Sits above the editor; hidden until an error occurs */
.error-box {
    display: none;
    background-color: #fff5f5;
    border: 1px solid #e57373;
    border-radius: 7px;
    color: #c62828;
    padding: 12px 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.error-box.visible { display: block; }

/* ---------- Output header (label + copy/download buttons) ---------- */
.output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.output-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Small tool buttons (Copy, Download) */
.btn-tool {
    background-color: #f0f4f8;
    color: #333333;
    border: 1px solid #d0d8e4;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-tool:hover {
    background-color: #e0e8f4;
    border-color: #b0c4d8;
}

.btn-tool:active { transform: scale(0.97); }

/* Inline success message after copy/download */
.copy-msg {
    font-size: 0.82rem;
    color: #2e7d32;
    font-weight: 600;
    margin-top: 6px;
    min-height: 18px;
    transition: opacity 0.3s;
}

/* ---------- XSLT version badge ---------- */
.version-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.version-badge.v10  { background-color: #e6f4ea; color: #2e7d32; }
.version-badge.v20  { background-color: #e3f0fb; color: #1a6fd4; }
.version-badge.v30  { background-color: #f3e8fd; color: #6a1b9a; }
.version-badge.vall { background-color: #eef2f7; color: #475569; }

/* ---------- Simple pages (Privacy, Terms, Guides, Contact, Report a Bug) ---------- */
/* Framed as a card instead of bare text floating on the page background —
   at a comfortable reading width (max-width caps line length; the empty
   space either side of it on wide screens is normal, deliberate reading
   measure, not a bug), but the card border/shadow gives the eye a clear
   edge instead of text just trailing off into empty white space. */
.simple-page {
    max-width: 880px;
    margin: 40px auto 64px;
    background-color: #ffffff;
    /* Noticeably darker than the site's usual #D1D5DB hairline — that's too
       pale to read as a card edge sitting directly on the plain white page
       background (no surrounding contrast the way a bordered grid item has). */
    border: 1px solid #D1D5DB;
    border-radius: 16px;
    padding: 48px 56px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07);
}

.simple-page-meta {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2563EB;
    background-color: #EFF6FF;
    border-radius: 999px;
    padding: 5px 13px;
    margin-bottom: 22px;
}

.simple-page h1 {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 6px;
    color: #0F172A;
}

.simple-page-lead {
    font-size: 1.05rem;
    color: #4B5563;
    line-height: 1.7;
    margin-bottom: 8px;
}

.simple-page h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
    margin: 36px 0 12px;
    padding-top: 28px;
    border-top: 1px solid #D1D5DB;
}
.simple-page h2:first-of-type { margin-top: 30px; padding-top: 0; border-top: none; }

.simple-page p, .simple-page li {
    font-size: 1rem;
    line-height: 1.75;
    color: #374151;
    margin-bottom: 12px;
}

/* Legal pages (Privacy, Terms) read like a formal document, so their body
   text is justified — not applied to every .simple-page consumer, since it
   would look wrong on Guides' short intro or Contact/Report a Bug's forms. */
.simple-page--legal p,
.simple-page--legal .simple-page-lead { text-align: justify; }

.simple-page ul, .simple-page ol { padding-left: 22px; margin-bottom: 12px; }

.simple-page code {
    background-color: #f4f4f4;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-size: 0.85em;
    color: #1a1a1a;
}

.simple-page pre {
    background-color: #f8f8f8;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 16px 0;
}

.simple-page pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    color: #1a1a1a;
}

@media (max-width: 700px) {
    .simple-page { margin: 20px auto 40px; padding: 32px 22px; border-radius: 12px; }
    .simple-page h1 { font-size: 1.75rem; }
}

/* ---------- Contact / Report a Bug forms ---------- */
/* Previously hardcoded permanently-dark inline styles (background:#141414
   etc.) directly on each input — looked fine only while the whole site was
   dark, and never reacted to the light/dark theme toggle once that shipped,
   leaving a dark form embedded in a light .simple-page card. Theme-aware
   like every other input on the site now. */
.simple-form { margin-top: 32px; max-width: 480px; }
/* Spam honeypot: kept off-screen (not display:none, which some bots detect). */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.simple-form-row { margin-bottom: 18px; }
.simple-form-row label {
    display: block;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5B6472;
    margin-bottom: 6px;
}
.simple-form-required { color: #DC2626; margin-left: 2px; }
.simple-form-row input[type="text"],
.simple-form-row input[type="email"],
.simple-form-row input[type="file"],
.simple-form-row select,
.simple-form-row textarea {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    color: #111827;
    padding: 10px 14px;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s;
}
.simple-form-row textarea { resize: vertical; }
.simple-form-row input:focus,
.simple-form-row select:focus,
.simple-form-row textarea:focus { border-color: #2563EB; }
.simple-form-hint { color: #6B7280; font-size: 0.8rem; margin: 6px 0 0; }

.simple-form-submit {
    background-color: #2563EB;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 11px 28px;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}
.simple-form-submit:hover { background-color: #1D4ED8; }

.simple-form-msg {
    margin-top: 20px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.simple-form-msg--success { background-color: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.simple-form-msg--error { background-color: #FEF2F2; border-color: #FCA5A5; color: #B91C1C; }

/* ---------- Guides page: version-tagged, two-column code cards ---------- */
.guide-card {
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 22px 24px;
    margin: 28px 0;
    background-color: #fafbfc;
    overflow: hidden; /* clip in case any child ever miscalculates its height again */
}

.guide-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
.guide-card-head h2 { margin: 0; }

.guide-versions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.guide-versions .version-badge { margin-left: 0; }

.guide-desc { margin: 0 0 14px; }

.guide-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
/* Each column is a flex column so the <pre> fills the remaining height below
   its label instead of a raw height:100% — which, with the <pre>'s own
   padding (content-box), overflowed past the grid cell and into whatever
   sat below it. min-width: 0 on the grid/flex item is required too — without
   it a long unwrapped code line (its intrinsic content width) pushes the
   column wider than its 1fr track instead of scrolling inside the <pre>'s
   own overflow-x, and .guide-card's overflow:hidden then hard-clips the
   overflow with no scrollbar, cutting text off mid-line. */
.guide-columns > div { display: flex; flex-direction: column; min-width: 0; }
.guide-columns pre { margin: 0; flex: 1; box-sizing: border-box; min-width: 0; }

.guide-col-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 6px;
}

@media (max-width: 700px) {
    .guide-columns { grid-template-columns: 1fr; }
}

/* ---------- Inline diff view (inside editor-wrapper) ---------- */
.diff-inline-view {
    display: none;
    flex: 1;
    min-width: 0;           /* allow shrink so it scrolls internally, not overflow */
    overflow: auto;
    overscroll-behavior: contain;   /* don't chain scroll to the page at the boundary */
    height: 100%;
    background-color: #fafafa;
}

/* ---------- Text Compare diff view ---------- */
.diff-stats {
    display: none;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    margin: 16px 0 12px;
    font-size: 0.88rem;
    font-weight: 600;
}

.stat-equal   { color: #666666; }
.stat-added   { color: #2e7d32; }
.stat-removed { color: #c62828; }

.diff-view {
    display: none;
    flex-direction: column;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.diff-pane-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #f5f5f5;
    border-bottom: 1px solid #D1D5DB;
}

.diff-pane-header {
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.diff-pane-header:first-child {
    border-right: 1px solid #D1D5DB;
}

.diff-panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 520px;
    overflow: hidden;
}

.diff-pane {
    overflow: auto;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
}

.diff-pane-left {
    border-right: 1px solid #D1D5DB;
}

/* Rows are wrapped in .diff-rows, a shrink-to-fit box sized to the widest
   line; each row then stretches to fill it so every row's background spans
   the same width, and the pane's overflow:auto scrolls the whole block
   horizontally instead of clipping (or ragged-scrolling) individual lines. */
/* A column flex box rather than a plain block so the trailing .diff-filler can
   stretch into whatever height the rows leave over. Without it the rows stop
   at the last line and the pane below them loses the gutter column entirely,
   which reads as the editor being cut short. inline-flex keeps the
   shrink-to-fit width the horizontal scrolling depends on. */
.diff-rows {
    display: inline-flex;
    flex-direction: column;
    min-width: 100%;
    min-height: 100%;
}

/* Blank continuation of the editor surface below the last row. A zero basis
   with min-height:0 (overriding .diff-line's 22px floor) means it takes only
   the space actually left over, and collapses away entirely when the rows
   already overflow the pane rather than adding a stray blank line. */
.diff-line.diff-filler {
    flex: 1 1 0;
    min-height: 0;
    background-color: #ffffff;
}
.diff-filler .diff-ln { background-color: #f5f5f5; }

.diff-line {
    display: flex;
    min-height: 22px;
    white-space: nowrap;
}

.diff-ln {
    min-width: 44px;
    text-align: right;
    padding: 0 8px;
    color: #aaaaaa;
    background-color: #f5f5f5;
    border-right: 1px solid #D1D5DB;
    user-select: none;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    font-size: 0.78rem;
}

.diff-text {
    padding: 0 10px;
    white-space: pre;
    flex: none;      /* size to content — the row (not this span) overflows */
}

/* Line type backgrounds */
.diff-equal       { background-color: #ffffff; }
.diff-equal .diff-ln { background-color: #f5f5f5; }

.diff-removed     { background-color: #fff0f0; }
.diff-removed .diff-ln { background-color: #ffdada; color: #c62828; }

.diff-added       { background-color: #f0fff4; }
.diff-added .diff-ln { background-color: #c6efd0; color: #2e7d32; }

.diff-changed-a   { background-color: #fff0f0; }
.diff-changed-a .diff-ln { background-color: #ffdada; color: #c62828; }

.diff-changed-b   { background-color: #f0fff4; }
.diff-changed-b .diff-ln { background-color: #c6efd0; color: #2e7d32; }

.diff-placeholder { background-color: #f8f8f8; }
.diff-placeholder .diff-ln { background-color: #f0f0f0; }

/* Inline character-level highlights */
mark.diff-char-del {
    background-color: #ffaaaa;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

mark.diff-char-ins {
    background-color: #88dd99;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* ============================================================
   IDE-style tool page (XML Formatter)
   Page head · editor workspace · status bar · SEO block
   Tokens: border #D1D5DB · text #111827 · muted #6B7280 · primary #2563EB
   ============================================================ */

/* ---------- Page head ---------- */
.ide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* Pages with a lot of action buttons (e.g. EDI Viewer's 8) can need more
       room than a busy title leaves on one row at in-between widths; wrapping
       drops the actions to their own row instead of overflowing past the
       viewport edge. */
    flex-wrap: wrap;
    padding: 16px 24px;
    background-color: #ffffff;
    border-bottom: 1px solid #D1D5DB;
}

.ide-head-left {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Tinted rounded icon badge */
.ide-head-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 11px;
    background-color: #EFF6FF;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ide-head-icon svg { display: block; }

.ide-head-text { min-width: 0; }

.ide-head-text h1 {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ide-head-text p {
    font-size: 0.78rem;
    color: #6B7280;
    line-height: 1.4;
    margin-top: 1px;
}

.ide-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    max-width: 100%;
}

/* Inline copy/download confirmation */
.ide-status {
    font-size: 0.78rem;
    font-weight: 600;
    color: #059669;
    white-space: nowrap;
}

/* ---------- Buttons ---------- */
.ide-btn {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    height: 38px;
    padding: 0 15px;
    border-radius: 9px;
    border: 1px solid #D1D5DB;
    background-color: #ffffff;
    color: #374151;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ide-btn svg { display: block; flex-shrink: 0; opacity: 0.75; }

.ide-btn:hover {
    background-color: #F9FAFB;
    border-color: #D1D5DB;
    color: #111827;
}

.ide-btn:active   { transform: scale(0.98); }
.ide-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ide-btn-primary {
    background-color: #2563EB;
    border-color: #2563EB;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
}

.ide-btn-primary svg    { opacity: 1; }
.ide-btn-primary:hover  { background-color: #1D4ED8; border-color: #1D4ED8; color: #ffffff; }

/* Icon-only variant — same footprint/behavior as .ide-btn, just square and
   label-less (an aria-label/title carries the accessible name). Used where
   several actions need to sit on one line without wrapping. */
.ide-btn-icon {
    width: 38px;
    padding: 0;
    justify-content: center;
    gap: 0;
}
.ide-btn-icon svg { opacity: 0.75; }
.ide-btn-icon:hover svg,
.ide-btn-icon.ide-btn-primary svg { opacity: 1; }

/* ---------- Download "Save as" popover ----------
   Anchored under a Download button via JS (position: fixed + measured coords).
   Hidden until opened, so it adds no layout of its own. */
.dl-pop {
    position: fixed;
    z-index: 1200;
    display: none;
    flex-direction: column;
    gap: 9px;
    width: 244px;
    max-width: calc(100vw - 16px);
    padding: 13px;
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
}
.dl-pop.open { display: flex; }

.dl-pop-label {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #6B7280;
}

.dl-pop-row {
    display: flex;
    align-items: stretch;
    border: 1px solid #D1D5DB;
    border-radius: 7px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.dl-pop-row:focus-within { border-color: #2563EB; }

.dl-pop-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 8px 10px;
    background: transparent;
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    color: #111827;
}
.dl-pop-ext {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #F3F4F6;
    border-left: 1px solid #D1D5DB;
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    color: #6B7280;
}

.dl-pop-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dl-pop-btn {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 6px;
    border: 1px solid #D1D5DB;
    background-color: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.dl-pop-btn:hover { background-color: #F9FAFB; border-color: #9CA3AF; }
.dl-pop-btn-primary {
    background-color: #2563EB;
    border-color: #2563EB;
    color: #ffffff;
}
.dl-pop-btn-primary:hover { background-color: #1D4ED8; border-color: #1D4ED8; }

/* ---------- Run progress pill ----------
   Sits between the title and the action buttons in .ide-head (a 3-way flex
   row with justify-content: space-between), so it reads as centered there
   without needing absolute positioning. */
.ide-head-progress {
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 12px;
    background-color: #F5F7FA;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    animation: ide-progress-fade-in 0.15s ease-out;
}

@keyframes ide-progress-fade-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ide-progress-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #4B5563;
    white-space: nowrap;
}

.ide-progress-track {
    width: 110px;
    height: 5px;
    border-radius: 3px;
    background-color: #E2E6EC;
    overflow: hidden;
}

.ide-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3B82F6, #2563EB);
    transition: width 0.15s ease-out;
}

.ide-progress-text {
    font-size: 0.74rem;
    font-weight: 700;
    color: #2563EB;
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Error strip ----------
   Icon comes from ::before so showError()'s textContent write can't erase it. */
.error-box.ide-error {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 24px;
    background-color: #FEF2F2;
    border: none;
    border-bottom: 1px solid #FECACA;
    border-radius: 0;
    color: #B91C1C;
    font-size: 0.86rem;
    line-height: 1.5;
}

.error-box.ide-error.visible { display: flex; }

.error-box.ide-warn {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 24px;
    background-color: #FFFBEB;
    border: none;
    border-bottom: 1px solid #FDE68A;
    border-radius: 0;
    color: #B45309;
    font-size: 0.86rem;
    line-height: 1.5;
}
.error-box.ide-warn.visible { display: flex; }
.error-box.ide-warn ul { margin: 0; padding-left: 18px; }
.error-box.ide-warn::before {
    content: '';
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.9 18a1.5 1.5 0 0 0 1.3 2.3h17.6a1.5 1.5 0 0 0 1.3-2.3L13.7 3.9a1.5 1.5 0 0 0-2.6 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 16.5v.01'/%3E%3C/svg%3E");
}

.error-box.ide-error::before {
    content: '';
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5v.01'/%3E%3C/svg%3E");
}

/* ---------- Editor workspace ---------- */
.ide-workspace {
    display: flex;
    height: clamp(340px, 46vh, 520px);
    background-color: #ffffff;
    border-bottom: 1px solid #D1D5DB;
}

.ide-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0;          /* let content scroll instead of stretching past the workspace height */
    background-color: #ffffff;
}

/* Pane header: label left, live metadata right */
.ide-pane-header {
    min-height: 38px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    padding: 0 14px;
    background-color: #FAFBFC;
    border-bottom: 1px solid #D1D5DB;
    user-select: none;
}

.ide-pane-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-pane-title svg { flex-shrink: 0; opacity: 0.7; }

.ide-pane-meta {
    font-size: 0.72rem;
    color: #4B5563;   /* darker than the original #9CA3AF — that failed WCAG AA contrast on white (2.5:1) */
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Right-hand cluster in a pane header: per-pane action icons + meta/badge */
.ide-pane-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ide-pane-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ide-pane-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #ffffff;
    color: #6B7280;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ide-pane-btn svg { display: block; flex-shrink: 0; }

.ide-pane-btn:hover   { background-color: #F9FAFB; border-color: #D1D5DB; color: #111827; }
.ide-pane-btn:active  { transform: scale(0.94); }
.ide-pane-btn.ide-btn-active { background-color: #DBEAFE; border-color: #93C5FD; color: #1D4ED8; }

/* Gutter + code area */
.ide-editor {
    flex: 1;
    display: flex;
    min-height: 0;
    background-color: #ffffff;
}

.ide-editor .line-numbers {
    background-color: #F6F8FA;
    border-right: 1px solid #D1D5DB;
    color: #6B7280;
}

/* ---------- Syntax-highlight overlay ----------
   A <pre> paints the coloured code; the real <textarea> sits on top with
   transparent text, so every script that reads .value keeps working. */
.ide-code {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ide-code-layer {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;          /* scrolled in sync via JS */
    pointer-events: none;
    white-space: pre;
    color: #24292F;
    background-color: #ffffff;
}

.ide-code .editor-box,
.ide-code .output-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: transparent;        /* the <pre> underneath supplies the colour */
    caret-color: #2563EB;
}

.ide-code .editor-box::placeholder,
.ide-code .output-box::placeholder { color: #B6BDC6; }

/* The textarea's own glyphs are transparent so the highlighted <pre> behind it
   supplies the colour. Selection highlighting is painted by the browser as an
   opaque layer, which hides the <pre>'s glyphs underneath and leaves selected
   text looking blank — so selected text needs to draw its own glyphs on top
   of the highlight instead of relying on the <pre> to show through. Scoped to
   the overlay editors only — .ide-plain (Text Compare) has no layer behind it
   and must keep normal selection colours. */
.ide-code .editor-box::selection,
.ide-code .output-box::selection {
    background-color: rgba(37, 99, 235, 0.25);
    color: #24292F;
}
.ide-code .editor-box::-moz-selection,
.ide-code .output-box::-moz-selection {
    background-color: rgba(37, 99, 235, 0.25);
    color: #24292F;
}

/* Minified input is one gigantic line — browsers stop painting text at that
   horizontal extent, so wrap it instead of scrolling millions of pixels. */
.ide-code.wrap .editor-box,
.ide-code.wrap .output-box,
.ide-code.wrap .ide-code-layer {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Manual "Wrap text" toggle — forces wrapping regardless of the automatic
   long-line detection above, on every editor surface in the workspace. */
.ide-workspace.wrap-forced .ide-code .editor-box,
.ide-workspace.wrap-forced .ide-code .output-box,
.ide-workspace.wrap-forced .ide-code-layer,
.ide-workspace.wrap-forced .ide-plain {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

/* .diff-rows/.diff-line/.diff-text are sized rigid (shrink-to-fit, flex:none)
   so long lines can scroll horizontally instead of clipping — but that same
   rigidity stops them ever wrapping. Forcing wrap switches all three back to
   filling the pane's own width so the text has room to actually break. */
.ide-workspace.wrap-forced .diff-inline-view .diff-rows {
    min-width: 0 !important;
    width: 100% !important;
}
.ide-workspace.wrap-forced .diff-inline-view .diff-line {
    width: 100% !important;
    white-space: normal !important;
}
.ide-workspace.wrap-forced .diff-inline-view .diff-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

/* Same manual wrap toggle, scoped to a single pane rather than the whole
   workspace — used where each pane has its own Wrap button. */
.ide-pane.wrap-forced .ide-code .editor-box,
.ide-pane.wrap-forced .ide-code .output-box,
.ide-pane.wrap-forced .ide-code-layer,
.ide-pane.wrap-forced .ide-plain {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

.ide-btn.ide-btn-active {
    background-color: #EFF6FF;
    border-color: #93C5FD;
    color: #1D4ED8;
}

/* Fallback when highlighting is off (very large documents) */
.ide-code.plain .ide-code-layer { display: none; }
.ide-code.plain .editor-box,
.ide-code.plain .output-box {
    color: #111827;
    background-color: #ffffff;
}

/* XML token colours */
.tok-punct   { color: #57606A; }
.tok-tag     { color: #0550AE; }
.tok-attr    { color: #CF222E; }
.tok-val     { color: #0A6640; }
.tok-meta    { color: #8250DF; }
.tok-comment { color: #6E7781; font-style: italic; }
.tok-cdata   { color: #0A3069; }

/* JSON token colours */
.tok-key { color: #0550AE; }
.tok-str { color: #0A6640; }
.tok-num { color: #8250DF; }
.tok-lit { color: #CF222E; }

/* Error line inside a static code sample (e.g. the homepage "under the hood"
   dive-art blocks) — not tied to any editor widget. */
.hp-demo-err { color: #B91C1C; }

/* ---------- Draggable divider ---------- */
/* The divider IS the hairline — 1px wide, so the panes sit flush against
   it and no blank strip appears on either side. */
/* A 1px line so the panes sit flush — no visible gap between editors */
.ide-divider {
    flex: 0 0 1px;
    position: relative;
    background-color: #D1D5DB;
    cursor: col-resize;
    user-select: none;
    transition: background-color 0.15s;
}

.ide-divider:hover,
.ide-divider.dragging { background-color: #2563EB; }

/* Invisible grab zone. It extends only to the RIGHT, over the next pane's
   line-number gutter, so it never covers the left pane's scrollbar. */
.ide-divider::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -7px;
    z-index: 4;
}

/* Grip badge — absolutely centred so it never widens the track */
.ide-divider-grip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 19px;
    height: 28px;
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, 3px);
    gap: 3px 4px;
    align-content: center;
    justify-content: center;
    pointer-events: none;
    transition: border-color 0.15s;
}

.ide-divider-grip i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #C2C8D0;
    transition: background-color 0.15s;
}

.ide-divider:hover .ide-divider-grip,
.ide-divider.dragging .ide-divider-grip { border-color: #2563EB; }

.ide-divider:hover .ide-divider-grip i,
.ide-divider.dragging .ide-divider-grip i { background-color: #2563EB; }

body.ide-resizing { user-select: none; cursor: col-resize; }

/* ---------- Status bar (VS Code style) ---------- */
.ide-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 24px;
    background-color: #FAFBFC;
    border-bottom: 1px solid #D1D5DB;
    font-size: 0.75rem;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

.ide-statusbar-left,
.ide-statusbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Validity pill */
.ide-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 11px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ide-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.ide-pill.idle  { background-color: #F3F4F6; color: #4B5563; border-color: #D1D5DB; }
.ide-pill.ok    { background-color: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.ide-pill.error { background-color: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.ide-pill.warn  { background-color: #FFFBEB; color: #B45309; border-color: #FDE68A; }

/* ---------- XSLT: stacked input + output workspaces ---------- */
/* The output workspace is a second .ide-workspace below the inputs */
.ide-workspace-output {
    height: clamp(340px, 46vh, 520px);
    border-top: none;
}

/* A single-pane workspace (the output) fills its whole width */
.ide-workspace-output .ide-pane { flex: 1 1 100%; }

/* Small version badge shown in the toolbar / pane header */
.ide-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ide-badge.v10 { background-color: #E3F0FB; color: #0550AE; }
.ide-badge.v20 { background-color: #FEF3C7; color: #92400E; }
.ide-badge.v30 { background-color: #F3E8FD; color: #6A1B9A; }

/* ---------- Text Compare: plain (unhighlighted) editors ---------- */
.ide-editor > .ide-plain {
    flex: 1;
    min-width: 0;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
    background-color: #ffffff;
    color: #111827;
    border: none;
    border-radius: 0;
    padding: 14px 14px 14px 10px;
    resize: none;
    outline: none;
    white-space: pre;
    overflow: auto;
    caret-color: #2563EB;
}

.ide-editor > .ide-plain::placeholder { color: #B6BDC6; }

/* A minified single line can be millions of pixels wide, which browsers
   fail to paint — wrap the editor and diff surface when one is present. */
.ide-editor > .ide-plain.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

.diff-inline-view.wrap .diff-line { white-space: normal; }
.diff-inline-view.wrap .diff-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The inline diff surface that replaces the textarea after Compare */
.ide-editor > .diff-inline-view {
    flex: 1;
    min-width: 0;
    height: auto;
}

/* ---------- File open + drag-and-drop ---------- */
/* Right-side group in a pane header holding the Open button and meta */
.ide-pane-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* Upload File — a proper compact button matching the toolbar buttons */
.ide-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-color: #ffffff;
    color: #374151;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ide-open-btn:hover  { background-color: #F9FAFB; border-color: #D1D5DB; color: #111827; }
.ide-open-btn:active { transform: scale(0.98); }
.ide-open-btn svg    { display: block; opacity: 0.7; }

/* Persistent "Max 10 MB" note beside the Upload File button */
.ide-size-limit {
    font-size: 0.7rem;
    font-weight: 600;
    color: #4B5563;   /* darker than the original #9CA3AF — that failed WCAG AA contrast on white (2.5:1) */
    white-space: nowrap;
}

/* Drop target: the editor area is highlighted while a file is dragged over it */
.ide-editor { position: relative; }

.ide-editor.drop-target { background-color: #EFF6FF; }

.ide-editor.drop-target::after {
    content: 'Drop file to open';
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2563EB;
    background-color: rgba(239, 246, 255, 0.9);
    border: 2px dashed #2563EB;
    pointer-events: none;
}

/* ---------- Floating scroll up / down buttons on each editor pane ---------- */
.ide-scrollnav {
    position: absolute;
    right: 22px;                 /* clear of the scrollbar */
    bottom: 28px;                 /* clear of the horizontal scrollbar */
    z-index: 5;
    display: none;               /* shown only when the pane can scroll */
    flex-direction: column;
    gap: 6px;
}

.ide-scrollnav.visible { display: flex; }

.ide-scrollnav button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;            /* no background colour */
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    color: #6B7280;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.ide-scrollnav button:hover {
    opacity: 1;
    color: #2563EB;
    border-color: #2563EB;
}

.ide-scrollnav button:active { transform: scale(0.94); }
.ide-scrollnav button:disabled { opacity: 0.25; cursor: default; }
.ide-scrollnav button:disabled:hover { color: #6B7280; border-color: #D1D5DB; }
.ide-scrollnav svg { display: block; }

/* Diff stat chips in the status bar */
.ide-stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ide-stat b { font-weight: 700; }
.ide-stat-add  { color: #2563EB; }
.ide-stat-del  { color: #B91C1C; }
.ide-stat-same { color: #6B7280; }

/* ---------- Tree viewer (XML / JSON Viewer) ---------- */
.tv-view {
    flex: 1;
    min-width: 0;
    overflow: auto;
    background-color: #ffffff;
    padding: 10px 6px 14px;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    font-size: 0.82rem;
    line-height: 22px;
    color: #24292F;
}

/* Line-number gutter for the tree — 28px rhythm matches each row slot */
.tv-gutter {
    line-height: 28px;
    padding: 10px 8px 0 0;
    font-size: 0.78rem;
}

/* Matches the input pane's textarea placeholder styling (color, weight,
   no italic) so both sides of a viewer/compare page read consistently
   before anything has been pasted in. */
.tv-empty {
    color: #6B7280;
    padding: 12px 14px;
}

/* A node row: [caret] key: value / summary */
/* Every element sits in its own square box, sized to its text (not full width).
   Fixed height + margin gives a 28px rhythm the line-number gutter aligns to. */
.tv-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    box-sizing: border-box;
    padding: 0 9px;
    margin: 3px 0;
    border: 1px solid #D1D5DB;
    border-radius: 0;                 /* square boxes */
    background-color: #ffffff;
    cursor: default;
    white-space: pre;
    max-width: 100%;
}

/* Container (object / array / element) headers */
.tv-row.tv-head { background-color: #ffffff; font-weight: 600; }

/* Leaf "records" are tinted so they read differently from headers */
.tv-row.tv-leaf { background-color: #F5F8FC; border-color: #E3E9F2; }

.tv-row:hover { background-color: #E8F0FE; border-color: #2563EB; }
.tv-row:hover .tv-key { color: #1D4ED8; }

/* Small [+] / [-] expand-collapse button (classic tree style) */
.tv-toggle {
    width: 15px;
    min-width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #BCC4CF;
    border-radius: 0;
    background-color: #F3F4F6;
    color: #4B5563;
    font-size: 12px;
    line-height: 1;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, Geneva, sans-serif;
    cursor: pointer;
    user-select: none;
}
.tv-toggle:hover { background-color: #E5E9F0; border-color: #9CA3AF; }

.tv-toggle::before { content: '+'; }
.tv-node.open > .tv-row > .tv-toggle::before { content: '\2212'; }   /* minus */
.tv-toggle.leaf { border: none; background: none; visibility: hidden; cursor: default; }

/* A container node groups its children (no box itself — each row is boxed) */
.tv-branch { margin: 0; }

/* Nested indentation + hierarchy guide line down each level */
.tv-children {
    display: none;
    margin-left: 15px;
    padding-left: 11px;
    border-left: 1px solid #D8DEE6;
}
.tv-node.open > .tv-children { display: block; }
.tv-branch:hover > .tv-children { border-left-color: #B8C2CE; }

/* Clickable key (copies path) */
.tv-key {
    color: #0550AE;
    cursor: pointer;
}
.tv-key:hover { text-decoration: underline; }

.tv-xtag  { color: #0550AE; }
.tv-attr  { color: #CF222E; }
.tv-punct { color: #57606A; }
.tv-str   { color: #0A6640; }
.tv-num   { color: #8250DF; }
.tv-lit   { color: #CF222E; }
.tv-text  { color: #24292F; }

/* Grey count badge on collapsed containers */
.tv-count {
    color: #6B7280;
    background-color: #F3F4F6;
    border-radius: 20px;
    padding: 0 7px;
    font-size: 0.72rem;
    margin-left: 6px;
}

.tv-view mark {
    background-color: #FEF08A;
    color: inherit;
    border-radius: 2px;
}

/* Hidden by the search filter; highlighted when a row matches */
.tv-node.filtered { display: none; }
.tv-row.tv-hit { background-color: #FEF08A; }
.tv-row.tv-hit:hover { background-color: #FDE047; }

/* Search box in the page head */
.ide-search {
    height: 38px;
    width: 190px;
    max-width: 40vw;
    padding: 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 9px;
    background-color: #ffffff;
    color: #111827;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.86rem;
    outline: none;
    transition: border-color 0.15s;
}
.ide-search:focus { border-color: #2563EB; }
.ide-search::placeholder { color: #9CA3AF; }

/* Dropdown select styled like the search box (used for e.g. transform-type pickers) */
.ide-select {
    height: 38px;
    padding: 0 30px 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 9px;
    background-color: #ffffff;
    color: #111827;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.86rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='1,3 9,3 5,8' fill='%236B7280'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 10px;
    transition: border-color 0.15s;
}
.ide-select:focus  { border-color: #2563EB; }
.ide-select:hover  { border-color: #D1D5DB; }

/* Small labelled on/off switch (e.g. "Wrap in content") */
.ide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 4px;
    cursor: pointer;
    user-select: none;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.82rem;
    color: #374151;
    white-space: nowrap;
}

.ide-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.ide-toggle-track {
    position: relative;
    width: 34px;
    height: 19px;
    flex-shrink: 0;
    border-radius: 20px;
    background-color: #D1D5DB;
    transition: background-color 0.15s;
}

.ide-toggle-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.15s;
}

.ide-toggle input:checked + .ide-toggle-track { background-color: #2563EB; }
.ide-toggle input:checked + .ide-toggle-track::before { transform: translateX(15px); }
.ide-toggle input:focus-visible + .ide-toggle-track { outline: 2px solid #93C5FD; outline-offset: 2px; }

/* ---------- FAQ accordion (viewer SEO sections) ---------- */
/* Border-top makes this read as its own section, distinct from whatever
   (e.g. the SEO block) sits directly above it. */
.ide-faq { padding: 44px 24px 52px; background-color: #ffffff; border-top: 1px solid #D1D5DB; }

.faq-head { max-width: 1080px; margin: 0 auto 24px; text-align: center; }
.faq-head h2 {
    /* font-family: Outfit — inherited from the global h1,h2,h3 rule */
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}
.faq-head p { margin-top: 8px; color: #6B7280; font-size: 0.95rem; }

/* CSS columns, not grid — a 2D grid row-locks every pair of FAQ items to
   the row's tallest neighbour, so a question that wraps to 2 lines leaves a
   dead gap under its 1-line row partner before the next row starts (same
   issue the Cron field reference had). Columns pack each item by its own
   height instead. */
.faq-list {
    max-width: 1080px;
    margin: 0 auto;
    columns: 2 400px;
    column-gap: 20px;
}

.faq-item {
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    background-color: #ffffff;
    overflow: hidden;
    break-inside: avoid;
    margin-bottom: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-item.open { border-color: #C7D7F5; box-shadow: 0 2px 10px rgba(37,99,235,0.06); }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
}

/* Circle number badge */
.faq-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #EFF6FF;
    color: #2563EB;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.faq-item.open .faq-num { background-color: #2563EB; color: #ffffff; }

.faq-text {
    flex: 1;
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
}

.faq-caret {
    flex-shrink: 0;
    color: #9CA3AF;
    transition: transform 0.2s;
}
.faq-item.open .faq-caret { transform: rotate(180deg); color: #2563EB; }

/* Answer: animated open/close via max-height */
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.faq-a-inner {
    padding: 0 18px 18px 62px;
    color: #4B5563;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
    font-size: 14.8px;
    line-height: 1.7;
    text-align: justify;
}
.faq-a-inner code {
    background: #F0F4F8; border-radius: 4px; padding: 1px 5px;
    font-family: 'IBM Plex Mono', 'Consolas', monospace; font-size: 0.82rem; color: #1a6fd4;
}

@media (max-width: 860px) {
    .faq-list { columns: 1; }
}

@media (max-width: 600px) {
    .ide-faq { padding: 36px 16px 44px; }
    .faq-q { padding: 14px; gap: 10px; }
    .faq-a-inner { padding: 0 14px 16px 40px; }
    .faq-text { font-size: 15px; }
}

/* ---------- SEO section ---------- */
.ide-seo {
    padding: 44px 32px 52px;
    background-color: #ffffff;
}

/* PDF Toolbox has no status bar between the tool panel and this section (every
   other IDE page does), so it needs its own divider to read as a new section. */
.pdf-panel + .ide-seo { border-top: 1px solid #D1D5DB; }

/* Same gap when a reference table (PathTester, JWT Decoder) sits directly
   before the SEO section — the table itself is centered/max-width, so its own
   border wouldn't span full width; put the divider on the section after it. */
.reftable-wrap + .ide-seo { border-top: 1px solid #D1D5DB; }

/* The three columns sit in one panel styled like the "Common uses" box
   (.about-uses). No gap: the spacing comes from symmetric column padding, so
   every vertical separator sits exactly midway between two blocks of text. */
.ide-seo-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1680px;
    margin: 0 auto;
    padding: 26px 30px;
    background-color: #F9FAFB;
    border: 1px solid #C4CAD4;
    border-radius: 12px;
}

.ide-seo-col {
    min-width: 0;
    padding: 0 34px;
    border-left: 1px solid #C4CAD4;
}

.ide-seo-col:first-child { border-left: none; padding-left: 0; }
.ide-seo-col:last-child  { padding-right: 0; }

.ide-seo-col-ad {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tinted icon badge per column — inline-flex so it sits beside the title on
   the same line instead of stacked above it; the title is vertical-align:middle
   so the two line up on a shared center regardless of icon/text height. */
.ide-seo-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 12px 14px 0;
}

.ide-seo-icon svg { display: block; }

.ide-seo-col h2 {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
    line-height: 1.4;
}

.ide-seo-col ul { list-style: none; padding: 0; margin: 0; }

/* Blue diamond bullets */
.ide-seo-col li {
    position: relative;
    padding: 5px 0 5px 25px;
    font-size: 0.88rem;
    color: #4B5563;
    line-height: 1.55;
}

.ide-seo-col li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.9em;
    width: 7px;
    height: 7px;
    background-color: #2563EB;
    transform: rotate(45deg);
}

.ide-seo-col p {
    font-size: 0.88rem;
    color: #4B5563;
    line-height: 1.75;
}

/* Long unbroken strings (URLs, e-mail addresses, inline code) must wrap rather
   than push the page wider than a phone screen. */
/* Site-wide links rely on color alone (no underline until hover, see "a {}"
   above); inside a paragraph of body text that's not enough to tell a link
   apart from plain text, so prose links get their underline back. */
.simple-page p a, .simple-page li a, .faq-a-inner p a { text-decoration: underline; text-underline-offset: 2px; }

.simple-page a, .simple-page code,
.faq-a-inner code, .about-text code, .about-uses code,
.ide-seo-col li, .ide-seo-col p { overflow-wrap: anywhere; }

/* ---------- Responsive ---------- */
/* Three across before dropping to two — avoids cramped columns on laptops */
@media (max-width: 1280px) {
    .ide-seo-col { padding: 0 26px; }
}

@media (max-width: 1100px) {
    .ide-seo-cols { grid-template-columns: repeat(2, 1fr); }

    /* Column 1 and 3 now start a row: no left rule */
    .ide-seo-col:nth-child(odd)  { border-left: none; padding-left: 0; }
    .ide-seo-col:nth-child(even) { padding-right: 0; }

    /* Second row gets a horizontal rule instead */
    .ide-seo-col:nth-child(n+3) {
        border-top: 1px solid #C4CAD4;
        margin-top: 30px;
        padding-top: 30px;
    }
}

@media (max-width: 820px) {
    /* Stack the panes; the divider becomes a horizontal rule */
    .ide-workspace { flex-direction: column; height: auto; }
    .ide-pane      { flex: 1 1 auto !important; height: 300px; }

    .ide-divider   { flex: 0 0 1px; cursor: default; }
    .ide-divider::before {          /* grab zone turns horizontal when stacked */
        top: 0; bottom: -7px; left: 0; right: 0;
    }
    .ide-divider-grip {
        width: 28px;
        height: 19px;
        grid-template-columns: repeat(3, 3px);
    }

    .ide-head { padding: 14px 16px; gap: 14px; }
    .ide-statusbar { padding: 8px 16px; }
    .error-box.ide-error { padding: 12px 16px; }
}

@media (max-width: 640px) {
    .ide-head       { flex-direction: column; align-items: stretch; }
    .ide-actions    { justify-content: stretch; }
    .ide-actions .ide-btn { flex: 1 1 auto; justify-content: center; }
    .ide-status     { width: 100%; text-align: center; order: -1; }

    .ide-pane       { height: 260px; }
    .ide-seo        { padding: 36px 16px 44px; }
    .ide-seo-cols   { grid-template-columns: 1fr; }

    .ide-seo-cols   { padding: 20px 18px; }

    /* Single column: every section is separated by a horizontal rule */
    .ide-seo-col    { border-left: none; padding: 0; margin-top: 0; }
    .ide-seo-col + .ide-seo-col {
        border-top: 1px solid #C4CAD4;
        margin-top: 24px;
        padding-top: 24px;
    }
    .ide-statusbar  { font-size: 0.72rem; gap: 8px; }
    .ide-statusbar-left, .ide-statusbar-right { gap: 10px; }
}

/* ---------- Footer (always dark, both themes) ----------
   Three bands: value strip · grouped tool sitemap · legal bar. */
.site-footer {
    background-color: #0D1117;
    border-top: 1px solid #1f2733;
    color: #8b95a5;
    font-size: 0.88rem;
    color-scheme: dark;
}
.site-footer a { color: #8b95a5; transition: color 0.15s; }
.site-footer a:hover { color: #ffffff; text-decoration: none; }

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}
.site-footer .footer-logo:hover { color: #ffffff; }
.footer-logo svg { display: block; flex-shrink: 0; }

/* Band 1 — value strip */
.footer-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 28px;
    border-bottom: 1px solid #1f2733;
}
.footer-strip-brand { display: flex; flex-direction: column; gap: 7px; max-width: 46ch; }
.footer-strip-brand p { color: #7d8794; font-size: 14px; line-height: 1.55; margin: 0; }

.footer-strip-assure { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Same pill look as .related-tools-chip (solid accent, uppercase, pill
   radius) instead of the old outlined mono-font tag, so the two read as
   the same design language across the site. */
.footer-chip {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #2563EB;
    border: 1px solid #2563EB;
    border-radius: 999px;
    padding: 6px 13px;
    white-space: nowrap;
}
/* Band 2 — grouped tool sitemap */
.footer-cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 26px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 28px 30px;
}
/* Hairline divider between each column (see .ide-seo-col for the same pattern) */
.footer-col {
    padding: 0 22px;
    border-left: 1px solid #1f2733;
    text-align: center;
}
.footer-col:first-child { border-left: none; padding-left: 0; }
.footer-col:last-child  { padding-right: 0; }
.footer-col h2 {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 14.7px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #E6E9EE;
    margin: 0 0 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 5px 0; }
.footer-col a { font-size: 0.8rem; }

/* Band 3 — legal bar */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 28px;
    border-top: 1px solid #1f2733;
    color: #8B949E;
    font-size: 0.8rem;
    text-align: center;
}
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.site-footer .footer-bottom-links a { color: #8B949E; }
.site-footer .footer-bottom-links a:hover { color: #ffffff; }
.footer-suggest {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.site-footer .footer-suggest { color: #4f97ff; }
.site-footer .footer-suggest:hover { color: #7fb4ff; }

@media (max-width: 860px) {
    .footer-cols  { grid-template-columns: 1fr 1fr; row-gap: 30px; }
    .footer-col   { padding: 0 0 0 28px; border-left: 1px solid #1f2733; }
    .footer-col:nth-child(odd) { padding-left: 0; border-left: none; }
    .footer-strip { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .footer-cols   { grid-template-columns: 1fr; row-gap: 22px; padding: 24px 18px; }
    .footer-col    { padding: 0; border-left: none; }
    .footer-strip  { padding: 20px 18px; }
    .footer-bottom { padding: 16px 18px; flex-direction: column; align-items: center; }
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 900px) {
    .editor-grid    { grid-template-columns: 1fr; }
    .editor-wrapper { height: 240px; }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 480px) {
    .site-main      { padding: 20px 14px; }
    .home-hero h1   { font-size: 1.9rem; }
    .compiler-header h1 { font-size: 1.4rem; }
    .editor-wrapper { height: 200px; }
    .output-wrapper { height: 160px; }
    .line-numbers   { width: 36px; min-width: 36px; }
}

/* ---------- PDF Toolbox ---------- */
.pdf-tabs {
    display: flex;
    gap: 6px;
    padding: 0 24px;
    border-bottom: 1px solid #D1D5DB;
    background-color: #FAFBFC;
}

.pdf-tab {
    padding: 14px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.pdf-tab:hover  { color: #111827; }
.pdf-tab.active { color: #2563EB; border-bottom-color: #2563EB; }

.pdf-panel { display: none; padding: 28px 24px; max-width: 720px; margin: 0 auto; }
.pdf-panel.active { display: block; }

.pdf-panel-intro { color: #4B5563; font-size: 0.92rem; margin-bottom: 20px; line-height: 1.6; }

.pdf-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    border: 2px dashed #D1D5DB;
    border-radius: 12px;
    background-color: #FAFBFC;
    color: #6B7280;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.pdf-dropzone:hover,
.pdf-dropzone.drop-target { border-color: #2563EB; background-color: #EFF6FF; color: #2563EB; }
.pdf-dropzone svg { display: block; opacity: 0.8; }
.pdf-dropzone-title { font-weight: 700; font-size: 0.95rem; }
.pdf-dropzone-sub   { font-size: 0.8rem; }

.pdf-info {
    display: none;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #F3F4F6;
    color: #374151;
    font-size: 0.85rem;
    font-weight: 600;
}

.pdf-file-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }

.pdf-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: grab;
    user-select: none;
}
.pdf-file-row:active { cursor: grabbing; }
.pdf-file-handle { color: #6B7280; font-size: 0.8rem; letter-spacing: -2px; }
.pdf-file-name  { flex: 1; min-width: 0; font-size: 0.86rem; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-file-size  { font-size: 0.78rem; color: #6B7280; white-space: nowrap; }
.pdf-file-remove {
    background: none; border: none; cursor: pointer;
    color: #6B7280; font-size: 1.1rem; line-height: 1; padding: 2px 4px;
}
.pdf-file-remove:hover { color: #B91C1C; }

.pdf-field-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pdf-field-row label { font-size: 0.85rem; font-weight: 600; color: #374151; }
.pdf-field-row .ide-search,
.pdf-field-row input[type="number"] { width: 100%; max-width: 320px; }
.pdf-field-row input[type="number"] { height: 38px; border: 1px solid #D1D5DB; border-radius: 9px; padding: 0 12px; font-size: 0.86rem; width: 90px; }

.pdf-actions-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; }

@media (max-width: 640px) {
    .pdf-tabs { padding: 0 12px; overflow-x: auto; }
    .pdf-panel { padding: 20px 14px; }
}

/* ---------- Cron Expression Generator ---------- */
.cron-inline-label { font-size: 0.82rem; font-weight: 600; color: #6B7280; }

.cron-select {
    height: 34px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-color: #ffffff;
    color: #111827;
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0 10px;
    cursor: pointer;
}
.cron-select:focus { outline: 2px solid #2563EB; outline-offset: 1px; }

/* Syntax picker gets the Related-Tools chip treatment: solid blue, white text */
#cronDialect {
    background-color: #2563EB;
    border-color: #2563EB;
    color: #ffffff;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
#cronDialect:hover { background-color: #1D4ED8; border-color: #1D4ED8; }
#cronDialect:focus { outline-color: #93C5FD; }
#cronDialect option { color: #111827; background-color: #ffffff; }

.cron-page { padding: 26px 24px 34px; max-width: 860px; margin: 0 auto; }
/* full-width hairline under the tool area, matching the status-bar line on
   the editor tools */
.cron-page + .ide-seo { border-top: 1px solid #D1D5DB; }

.cron-expr-label,
.cron-subhead {
    display: block;
    font-family: var(--label-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--label-color);
    margin: 0 0 8px;
}
.cron-subhead { margin-top: 30px; }

.cron-expr-controls { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.cron-expr-input {
    flex: 1;
    min-width: 220px;
    height: 46px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    background-color: #ffffff;
    color: #111827;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    padding: 0 14px;
}
.cron-expr-input:focus { outline: 2px solid #2563EB; outline-offset: 1px; border-color: #2563EB; }
.cron-expr-controls .ide-btn { flex: 0 0 auto; }

.cron-error {
    display: none;
    margin: 12px 0 0;
    padding: 9px 13px;
    border-radius: 8px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    font-size: 0.85rem;
}

.cron-desc {
    margin: 16px 0 0;
    padding: 16px 18px;
    border-radius: 12px;
    background-color: #EFF6FF;
    border: 1px solid #DBEAFE;
    color: #1E3A8A;
    font-size: 1.05rem;
    line-height: 1.55;
    font-weight: 500;
}
.cron-desc-empty { background-color: #F9FAFB; border-color: #D1D5DB; color: #6B7280; }

.cron-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.cron-field { display: flex; flex-direction: column; gap: 5px; }
.cron-field label { font-size: 0.8rem; font-weight: 600; color: #374151; }
.cron-field-input {
    height: 38px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-color: #ffffff;
    color: #111827;
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-size: 0.92rem;
    padding: 0 10px;
}
.cron-field-input:focus { outline: 2px solid #2563EB; outline-offset: 1px; border-color: #2563EB; }
.cron-field-hint { font-size: 0.72rem; color: #6B7280; line-height: 1.35; }

.cron-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.cron-preset {
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    background-color: #F9FAFB;
    color: #374151;
    font-family: inherit;
    font-size: 0.82rem;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}
.cron-preset:hover { border-color: #2563EB; background-color: #EFF6FF; color: #2563EB; }

.cron-runs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cron-runs-head .cron-subhead { margin-bottom: 0; }
.cron-tz-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cron-tz-row label { font-size: 0.8rem; font-weight: 600; color: #6B7280; }
.cron-tz-row .cron-select { max-width: 240px; min-width: 0; }

.cron-runs { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid #D1D5DB; border-radius: 10px; overflow: hidden; }
.cron-runs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 15px;
    font-size: 0.9rem;
}
.cron-runs li:nth-child(even) { background-color: #F9FAFB; }
.cron-run-time { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; color: #111827; }
.cron-run-rel  { font-size: 0.8rem; color: #6B7280; white-space: nowrap; }
.cron-runs-note { margin: 8px 0 0; font-size: 0.78rem; color: #6B7280; }

/* Field reference — grouped tables, reusing the generic .reftable component.
   Side by side where there's room, instead of one long stacked column. A
   plain 2-column CSS grid row-locks every pair to the tallest item in that
   row — a short "Field structure" group next to the 4-row "Wildcards" group
   left a tall dead gap underneath it. A multi-column flow packs each group
   into whichever column has room next, by actual height, avoiding that. */
.reftable-group-grid {
    columns: 2 320px;
    column-gap: 20px;
    margin-top: 14px;
}
.reftable-group { margin: 0 0 20px; break-inside: avoid; }
.reftable-group:last-child { margin-bottom: 0; }
.reftable-group-title { font-family: var(--label-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4B5563; margin: 0 0 8px 2px; }
/* Prose-heavy 2-column tables (Cron's field reference) should wrap normally
   rather than force the horizontal-scroll behaviour built for the narrow,
   code-snippet-only comparison table. */
.reftable.reftable--pair { min-width: 0; table-layout: fixed; }
.reftable.reftable--pair td:first-child { width: 34%; }
.reftable.reftable--pair td:not(:first-child) { width: 66%; }

@media (max-width: 640px) {
    .cron-page { padding: 20px 14px 4px; }
    .cron-runs li { flex-direction: column; gap: 3px; align-items: flex-start; }
}

/* ---------- JSONPath / XPath Tester ---------- */
.pxt-mode-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid #D1D5DB;
    background-color: #FAFBFC;
}
.pxt-mode-toggle { display: flex; gap: 6px; flex-shrink: 0; }
.pxt-mode-btn {
    font-family: var(--label-font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    background-color: #ffffff;
    color: #4B5563;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.pxt-mode-btn[aria-pressed="true"] { background-color: #2563EB; border-color: #2563EB; color: #ffffff; }
.pxt-mode-btn:not([aria-pressed="true"]):hover { border-color: #2563EB; color: #111827; }

.pxt-query-group { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 10px; }
.pxt-query-group label { font-size: 0.78rem; font-weight: 600; color: #4B5563; white-space: nowrap; }
.pxt-query-input {
    flex: 1;
    height: 38px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 0 12px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.88rem;
    color: #111827;
    background-color: #ffffff;
}
.pxt-query-input:focus { outline: 2px solid #2563EB; outline-offset: 1px; }

.pxt-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; }
.pxt-body > .ide-pane + .ide-pane { border-left: 1px solid #D1D5DB; }

.pxt-results {
    position: absolute; inset: 0;
    overflow-y: auto;
    background-color: #ffffff;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.84rem;
}
.pxt-result-row { padding: 8px 14px; border-bottom: 1px solid #F1F3F5; }
.pxt-result-row:last-child { border-bottom: none; }
.pxt-result-path { color: #2563EB; font-weight: 600; word-break: break-all; }
.pxt-result-value { color: #24292F; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.pxt-empty { padding: 20px 14px; color: #6B7280; font-size: 0.86rem; }

.reftable-wrap { padding: 30px 24px 10px; max-width: 900px; margin: 0 auto; }
.reftable-title { font-size: 1.05rem; font-weight: 700; color: #111827; margin: 0 0 14px; }
/* Horizontal-scroll safety net on narrow screens — the table itself never
   forces the page to scroll sideways (see .pxt-body overflow rule too). */
.reftable-scroll { overflow-x: auto; border: 1px solid #D1D5DB; border-radius: 10px; }
.reftable {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}
.reftable th,
.reftable td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #D1D5DB; }
.reftable tr:last-child td { border-bottom: none; }
.reftable th {
    font-family: var(--label-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
    background-color: #FAFBFC;
}
.reftable td:first-child { width: 30%; color: #6B7280; }
.reftable td { font-size: 0.95rem; line-height: 1.6; color: #4B5563; }
.reftable td:not(:first-child) { width: 35%; }
.reftable tr:nth-child(even) td { background-color: #FAFBFC; }
.reftable code { background-color: #F3F4F6; border: 1px solid #D1D5DB; border-radius: 4px; padding: 1px 5px; font-size: 0.95em; color: #111827; }
.reftable .reftable-na { color: #6B7280; font-style: italic; }
.reftable-note { color: #6B7280; font-size: 0.88rem; }
.reftable-foot { margin: 12px 2px 0; font-size: 0.88rem; color: #4B5563; line-height: 1.6; }
.reftable-foot code { background-color: #F3F4F6; border: 1px solid #D1D5DB; border-radius: 4px; padding: 1px 5px; font-size: 0.95em; color: #374151; }

@media (max-width: 760px) {
    .pxt-body { grid-template-columns: 1fr; }
    .pxt-body > .ide-pane + .ide-pane { border-left: none; border-top: 1px solid #D1D5DB; }
    .pxt-query-group { flex: 1 1 100%; min-width: 0; align-items: stretch; flex-direction: column; gap: 6px; }
    .pxt-mode-toggle { order: -1; width: 100%; }
    .pxt-mode-btn { flex: 1; }
}

/* ---------- JWT Decoder ---------- */
/* Taller than the default .ide-workspace clamp — the decoded pane stacks
   Header + Payload + Claims, which needs more room than a single editor
   to show a typical token without an inner scroll. */
.jwt-body { display: grid; grid-template-columns: 1fr 1fr; height: clamp(460px, 62vh, 680px); }
.jwt-body > .ide-pane + .ide-pane { border-left: 1px solid #D1D5DB; }

.jwt-secret-row {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 14px;
    border-top: 1px solid #D1D5DB;
    background-color: #FAFBFC;
}
.jwt-secret-row label { font-size: 0.72rem; font-weight: 600; color: #4B5563; }
.jwt-secret-input {
    height: 34px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 0 12px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.85rem;
    color: #111827;
    background-color: #ffffff;
}
.jwt-secret-input:focus { outline: 2px solid #2563EB; outline-offset: 1px; }

.jwt-sig-badge {
    font-family: var(--label-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #F3F4F6;
    color: #4B5563;
    white-space: nowrap;
}
.jwt-sig-badge.jwt-sig-valid       { background-color: #DCFCE7; color: #15803D; }
.jwt-sig-badge.jwt-sig-invalid     { background-color: #FEE2E2; color: #B91C1C; }
.jwt-sig-badge.jwt-sig-unsupported { background-color: #FEF3C7; color: #92400E; }
.jwt-sig-badge.jwt-sig-neutral     { background-color: #F3F4F6; color: #4B5563; }

.jwt-decoded { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.jwt-block + .jwt-block { margin-top: 18px; }
.jwt-block-title {
    font-family: var(--label-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4B5563;
    margin: 0 0 8px;
}
.jwt-json {
    margin: 0;
    padding: 10px 12px;
    background-color: #F6F8FA;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #24292F;
    white-space: pre-wrap;
    word-break: break-word;
}
.jwt-claims { display: flex; flex-direction: column; gap: 6px; }
.jwt-claim-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 0.82rem;
}
.jwt-claim-label { color: #6B7280; white-space: nowrap; }
.jwt-claim-value { color: #24292F; text-align: right; word-break: break-word; font-family: Consolas, 'Courier New', monospace; }
.jwt-claim-row.jwt-claim-expired { border-color: #FCA5A5; background-color: #FEF2F2; }
.jwt-claim-row.jwt-claim-expired .jwt-claim-value { color: #B91C1C; }
.jwt-claim-row.jwt-claim-valid { border-color: #BBF7D0; background-color: #F0FDF4; }

@media (max-width: 760px) {
    .jwt-body { grid-template-columns: 1fr; }
    .jwt-body > .ide-pane + .ide-pane { border-left: none; border-top: 1px solid #D1D5DB; }
    .jwt-claim-row { flex-direction: column; gap: 2px; }
    .jwt-claim-value { text-align: left; }
}

/* ---------- Base64 / URL / HTML Encoder ---------- */
/* Every other two-pane tool either has a draggable .ide-divider (converters)
   or its own body modifier adding this border (.pxt-body, .jwt-body) — plain
   .ide-workspace alone renders the two panes with no seam between them. */
.enc-body > .ide-pane + .ide-pane { border-left: 1px solid #D1D5DB; }

.enc-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid #D1D5DB;
    background-color: #FAFBFC;
}
.enc-format-toggle,
.enc-direction-toggle { display: flex; gap: 6px; flex-shrink: 0; }
.enc-toggle-btn {
    font-family: var(--label-font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    background-color: #ffffff;
    color: #4B5563;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.enc-toggle-btn[aria-pressed="true"] { background-color: #2563EB; border-color: #2563EB; color: #ffffff; }
.enc-toggle-btn:not([aria-pressed="true"]):hover { border-color: #2563EB; color: #111827; }

@media (max-width: 640px) {
    .enc-mode-row { justify-content: flex-start; }
    .enc-format-toggle, .enc-direction-toggle { flex: 1 1 100%; }
    .enc-toggle-btn { flex: 1; }
}

@media (max-width: 820px) {
    /* Matches the breakpoint .ide-workspace itself stacks panes at. */
    .enc-body > .ide-pane + .ide-pane { border-left: none; border-top: 1px solid #D1D5DB; }
}

/* ============================================================
   THEME TOGGLE BUTTON  (lives in the always-dark header)
   ============================================================ */
.nav-actions { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    /* Was #2b3440 — nearly the same tone as the always-dark header behind
       it, so the border essentially disappeared. */
    border: 1px solid #3d4650;
    background: transparent;
    color: #9aa4b2;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.theme-toggle:hover { color: #ffffff; border-color: #5b6472; background-color: rgba(255,255,255,0.05); }
/* Without this, a keyboard-focused button falls back to the browser's own
   default focus ring — often a faint dashed outline that's nearly
   invisible against the dark header, which is what the pale dashed box
   around this button actually was. */
.theme-toggle:focus-visible { outline: 2px solid #58A6FF; outline-offset: 2px; }
.theme-toggle svg { display: block; transition: transform 0.25s ease; }
/* Flip the filled half so the icon reads as "switched" between themes */
[data-theme="dark"] .theme-toggle svg { transform: scaleX(-1); }


/* ============================================================
   DARK THEME
   Activated by data-theme="dark" on <html> (set by the inline
   head script + the toggle). Light theme above is the default
   and is left completely untouched.
   bg #0D1117 · surface #161B22 · raised #1C232D
   border #2B333D / strong #3D4650 · text #E6E9EE
   muted #9AA4B2 · faint #6B7280 · link #58A6FF · accent #2563EB
   ============================================================ */
/* Tell the browser which system palette to use — themes native scrollbars,
   form controls, and any surface not explicitly coloured below. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

[data-theme="dark"] body { background-color: #0D1117; color: #E6E9EE; }
[data-theme="dark"] a { color: #58A6FF; }
[data-theme="dark"] a:hover { color: #79B8FF; }

/* Nav dropdown popover (header bar itself is already dark) */
[data-theme="dark"] .nav-dropdown-menu {
    background-color: #161B22;
    border-color: #2B333D;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
[data-theme="dark"] .nav-dropdown-item { color: #E6E9EE; }
[data-theme="dark"] .nav-dropdown-item:hover { background-color: #21262D; color: #ffffff; }
[data-theme="dark"] .nav-dropdown-item.active { background-color: #1B2A44; color: #58A6FF; }

/* Leaderboard + in-content ad slots */
[data-theme="dark"] .ad-leaderboard { background-color: #0D1117; border-color: #2B333D; }
[data-theme="dark"] .ad-leaderboard-slot { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .ad-leaderboard-house-main { color: #E6E9EE; }
[data-theme="dark"] .ad-leaderboard-slot--house,
[data-theme="dark"] .ad-rect-slot--house { border-color: #2F4A7A; background: linear-gradient(135deg, #14203A 0%, #1B1636 100%); }
[data-theme="dark"] .ad-leaderboard-slot--house:hover,
[data-theme="dark"] .ad-rect-slot--house:hover { border-color: #6B9BFF; box-shadow: 0 4px 16px rgba(107, 155, 255, 0.16); }
[data-theme="dark"] .ad-leaderboard-house-sub,
[data-theme="dark"] .ad-rect-house-sub { color: #9AA5B1; }
[data-theme="dark"] .ad-rect-slot { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .ad-rect-house-main { color: #E6E9EE; }

/* Download "Save as" popover */
[data-theme="dark"] .dl-pop { background-color: #161B22; border-color: #2B333D; box-shadow: 0 12px 32px rgba(0,0,0,0.55); }
[data-theme="dark"] .dl-pop-row { border-color: #2B333D; }
[data-theme="dark"] .dl-pop-input { color: #E6E9EE; }
[data-theme="dark"] .dl-pop-ext { background-color: #21262D; border-color: #2B333D; color: #9AA4B2; }
[data-theme="dark"] .dl-pop-btn { background-color: #21262D; border-color: #3D4650; color: #C9D1D9; }
[data-theme="dark"] .dl-pop-btn:hover { background-color: #2D333B; border-color: #565D6D; }
[data-theme="dark"] .dl-pop-btn-primary { background-color: #2563EB; border-color: #2563EB; color: #ffffff; }
[data-theme="dark"] .dl-pop-btn-primary:hover { background-color: #1D4ED8; border-color: #1D4ED8; }

/* ---------- Home page ---------- */
[data-theme="dark"] .hp { color: #E6E9EE; }
[data-theme="dark"] .hp h1,
[data-theme="dark"] .hp h2,
[data-theme="dark"] .hp h3 { color: #F0F3F6; }
[data-theme="dark"] .hp-eyebrow { color: #ffffff; background-color: #2563EB; }
[data-theme="dark"] .hp-hero { background-color: #0D1117; }
[data-theme="dark"] .hp-hero h1 em { color: #58A6FF; }
[data-theme="dark"] .hp-hero-sub,
[data-theme="dark"] .hp-section-head p,
[data-theme="dark"] .hp-tool p,
[data-theme="dark"] .hp-step p,
[data-theme="dark"] .hp-dive-text p { color: #9AA4B2; }
[data-theme="dark"] .hp-btn-ghost { color: #E6E9EE; border-color: #3D4650; }
[data-theme="dark"] .hp-btn-ghost:hover { color: #58A6FF; border-color: #58A6FF; }
[data-theme="dark"] .hp-assurance { color: #3FB950; }
[data-theme="dark"] .hp-assurance .dot { background: #3FB950; box-shadow: 0 0 0 4px rgba(63,185,80,0.15); }
[data-theme="dark"] .hp-demo { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .hp-demo-chrome,
[data-theme="dark"] .hp-demo-bar { background-color: #0D1117; border-color: #2B333D; }
[data-theme="dark"] .hp-demo-chrome i { background: #3D4650; }
[data-theme="dark"] .hp-demo-pane pre { color: #C9D1D9; }
[data-theme="dark"] .hp-demo-pane + .hp-demo-pane { border-color: #2B333D; }
[data-theme="dark"] .hp-demo-status,
[data-theme="dark"] .hp-demo-chrome span { color: #9AA4B2; }
[data-theme="dark"] .hp-demo-label { color: var(--label-color); }
[data-theme="dark"] .hp-trust { background-color: #0F141A; border-color: #2B333D; }
[data-theme="dark"] .hp-trust-item b { color: #F0F3F6; }
[data-theme="dark"] .hp-trust-item span { color: #9AA4B2; }
[data-theme="dark"] .hp-section { background-color: #0D1117; }
[data-theme="dark"] .hp-section.alt { background-color: #0F141A; border-color: #2B333D; }
[data-theme="dark"] .hp-filters button { border-color: #3D4650; color: #9AA4B2; }
[data-theme="dark"] .hp-filters button:hover { color: #E6E9EE; border-color: #58A6FF; }
[data-theme="dark"] .hp-tool { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .hp-tool:hover { border-color: #58A6FF; box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
[data-theme="dark"] .hp-tool h3 { color: #F0F3F6; }
[data-theme="dark"] .hp-tool-ico { background: #1B2A44; border-color: #1F3A63; }
[data-theme="dark"] .hp-step { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .hp-step h3 { color: #F0F3F6; }
[data-theme="dark"] .hp-step .hp-step-num::before { color: #6B7280; }
[data-theme="dark"] .hp-dive-art { background-color: #0D1117; border-color: #2B333D; color: #9AA4B2; }
[data-theme="dark"] .hp-faq details { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .hp-faq summary { color: #F0F3F6; }
[data-theme="dark"] .hp-faq details p { color: #9AA4B2; }
[data-theme="dark"] .hp-faq-num { background-color: #1B2A44; color: #79C0FF; }

/* ---------- Syntax token colours (shared by IDE editors and dive-art blocks) ---------- */
[data-theme="dark"] .tok-punct { color: #8B949E; }
[data-theme="dark"] .tok-tag { color: #7EE787; }
[data-theme="dark"] .tok-attr { color: #79C0FF; }
[data-theme="dark"] .tok-val { color: #A5D6FF; }
[data-theme="dark"] .tok-meta { color: #D2A8FF; }
[data-theme="dark"] .tok-comment { color: #8B949E; }
[data-theme="dark"] .tok-cdata { color: #A5D6FF; }
[data-theme="dark"] .tok-key { color: #79C0FF; }
[data-theme="dark"] .tok-str { color: #A5D6FF; }
[data-theme="dark"] .tok-num { color: #D2A8FF; }
[data-theme="dark"] .tok-lit { color: #FF7B72; }
[data-theme="dark"] .hp-demo-err { color: #FF7B72; }

/* ---------- Generic page content ---------- */
[data-theme="dark"] .compiler-header h1 { color: #F0F3F6; }
[data-theme="dark"] .compiler-header p,
[data-theme="dark"] .panel-label { color: #9AA4B2; }
[data-theme="dark"] .simple-page { background-color: #161B22; border-color: #333D4A; box-shadow: none; }
[data-theme="dark"] .simple-page-meta { background-color: #1B2A44; color: #79C0FF; }
[data-theme="dark"] .simple-page h1 { color: #F0F3F6; }
[data-theme="dark"] .simple-page-lead { color: #9AA4B2; }
[data-theme="dark"] .simple-page h2 { color: #F0F3F6; border-top-color: #2B333D; }
[data-theme="dark"] .simple-page p,
[data-theme="dark"] .simple-page li { color: #C9D1D9; }
[data-theme="dark"] .simple-page code { background-color: #0D1117; border-color: #2B333D; color: #C9D1D9; }

/* ---------- Contact / Report a Bug forms ---------- */
[data-theme="dark"] .simple-form-row label { color: #9AA4B2; }
[data-theme="dark"] .simple-form-row input[type="text"],
[data-theme="dark"] .simple-form-row input[type="email"],
[data-theme="dark"] .simple-form-row input[type="file"],
[data-theme="dark"] .simple-form-row select,
[data-theme="dark"] .simple-form-row textarea {
    background-color: #0D1117; border-color: #333D4A; color: #E6E9EE;
}
[data-theme="dark"] .simple-form-row input:focus,
[data-theme="dark"] .simple-form-row select:focus,
[data-theme="dark"] .simple-form-row textarea:focus { border-color: #58A6FF; }
[data-theme="dark"] .simple-form-hint { color: #6B7280; }
[data-theme="dark"] .simple-form-msg--success { background-color: #0F2A1A; border-color: #1F5A34; color: #4ADE80; }
[data-theme="dark"] .simple-form-msg--error { background-color: #2D1517; border-color: #7A2E2E; color: #FF7B72; }
[data-theme="dark"] .simple-page pre { background-color: #0D1117; border-color: #2B333D; }
[data-theme="dark"] .simple-page pre code { color: #C9D1D9; }
[data-theme="dark"] .guide-card { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .guide-card-head h2 { color: #58A6FF; }
[data-theme="dark"] .guide-desc { color: #C9D1D9; }
[data-theme="dark"] .guide-col-label { color: #9AA4B2; }
[data-theme="dark"] .version-badge.vall { background-color: #1F2937; color: #9AA4B2; }

/* ---------- Editors / output (classic + IDE) ---------- */
[data-theme="dark"] .editor-wrapper,
[data-theme="dark"] .output-wrapper { background-color: #0D1117; border-color: #2B333D; }
[data-theme="dark"] .editor-wrapper:focus-within { border-color: #58A6FF; }
[data-theme="dark"] .editor-wrapper.error,
[data-theme="dark"] .output-wrapper.has-error { border-color: #F85149; }
[data-theme="dark"] .output-wrapper.has-success { border-color: #3FB950; }
[data-theme="dark"] .editor-box,
[data-theme="dark"] .output-box,
[data-theme="dark"] .ide-plain { background-color: #0D1117; color: #C9D1D9; }
[data-theme="dark"] .output-box.has-error { color: #FF7B72; }
[data-theme="dark"] .line-numbers { background-color: #161B22; border-color: #2B333D; color: #6B7280; }

[data-theme="dark"] .ide-head { background-color: #0D1117; border-color: #2B333D; }
[data-theme="dark"] .ide-head-icon { background-color: #1B2A44; color: #58A6FF; }
[data-theme="dark"] .ide-head-text h1 { color: #F0F3F6; }
[data-theme="dark"] .ide-head-text p { color: #9AA4B2; }
[data-theme="dark"] .ide-status { color: #3FB950; }
[data-theme="dark"] .ide-btn,
[data-theme="dark"] .ide-open-btn { background-color: #161B22; border-color: #2B333D; color: #C9D1D9; }
[data-theme="dark"] .ide-btn:hover,
[data-theme="dark"] .ide-open-btn:hover { background-color: #21262D; border-color: #3D4650; color: #ffffff; }
[data-theme="dark"] .ide-btn.ide-btn-active { background-color: #1B2A44; border-color: #1F6FEB; color: #79C0FF; }
[data-theme="dark"] .ide-size-limit { color: #9AA4B2; }
[data-theme="dark"] .ide-head-progress { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .ide-progress-label { color: #9AA4B2; }
[data-theme="dark"] .ide-progress-track { background-color: #2B333D; }

[data-theme="dark"] .error-box,
[data-theme="dark"] .error-box.ide-error { background-color: #2D1517; border-color: #5C1E1E; color: #FF7B72; }
[data-theme="dark"] .error-box.ide-warn { background-color: #2A2113; border-color: #5A431A; color: #E3B341; }
[data-theme="dark"] .copy-msg { color: #3FB950; }

[data-theme="dark"] .ide-workspace,
[data-theme="dark"] .ide-workspace-output { background-color: #0D1117; border-color: #2B333D; }
[data-theme="dark"] .ide-pane { background-color: #0D1117; }
[data-theme="dark"] .ide-pane-header { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .ide-pane-title { color: #8B949E; }
[data-theme="dark"] .ide-pane-meta { color: #9AA4B2; }
[data-theme="dark"] .ide-pane-btn { background-color: #161B22; border-color: #2B333D; color: #9AA4B2; }
[data-theme="dark"] .ide-pane-btn:hover { background-color: #21262D; border-color: #3D4650; color: #ffffff; }
[data-theme="dark"] .ide-pane-btn.ide-btn-active { background-color: #1B2A44; border-color: #1F6FEB; color: #79C0FF; }
[data-theme="dark"] .ide-editor,
[data-theme="dark"] .ide-editor .line-numbers,
[data-theme="dark"] .ide-code-layer { background-color: #0D1117; }
[data-theme="dark"] .ide-editor .line-numbers { border-color: #2B333D; color: #6B7280; }
[data-theme="dark"] .ide-code-layer { color: #C9D1D9; }
[data-theme="dark"] .ide-code.plain .editor-box,
[data-theme="dark"] .ide-code.plain .output-box { background-color: #0D1117; color: #C9D1D9; }
[data-theme="dark"] .ide-code .editor-box::placeholder,
[data-theme="dark"] .ide-code .output-box::placeholder,
[data-theme="dark"] .ide-editor > .ide-plain::placeholder { color: #6B7280; }
[data-theme="dark"] .ide-editor.drop-target { background-color: #14243D; }
[data-theme="dark"] .ide-editor.drop-target::after { color: #58A6FF; background-color: rgba(20,36,61,0.9); border-color: #58A6FF; }
[data-theme="dark"] .ide-divider { background-color: #2B333D; }
[data-theme="dark"] .ide-divider-grip { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .ide-divider-grip i { background-color: #6B7280; }
[data-theme="dark"] .ide-scrollnav button { border-color: #2B333D; color: #9AA4B2; }

[data-theme="dark"] .ide-statusbar { background-color: #161B22; border-color: #2B333D; color: #9AA4B2; }
[data-theme="dark"] .ide-pill.idle  { background-color: #21262D; color: #9AA4B2; border-color: #2B333D; }
[data-theme="dark"] .ide-pill.ok    { background-color: #12261C; color: #3FB950; border-color: #1E4620; }
[data-theme="dark"] .ide-pill.error { background-color: #2D1517; color: #FF7B72; border-color: #5C1E1E; }
[data-theme="dark"] .ide-pill.warn  { background-color: #2A2113; color: #E3B341; border-color: #5A431A; }
[data-theme="dark"] .ide-stat-del  { color: #FF7B72; }
[data-theme="dark"] .ide-stat-same { color: #9AA4B2; }

[data-theme="dark"] .version-badge.v10,
[data-theme="dark"] .ide-badge.v10 { background-color: #16273D; color: #79C0FF; }
[data-theme="dark"] .version-badge.v20,
[data-theme="dark"] .ide-badge.v20 { background-color: #2A2113; color: #E3B341; }
[data-theme="dark"] .version-badge.v30,
[data-theme="dark"] .ide-badge.v30 { background-color: #241533; color: #D2A8FF; }

/* Form controls */
[data-theme="dark"] .ide-search,
[data-theme="dark"] .ide-select,
[data-theme="dark"] .pdf-field-row input[type="number"] {
    background-color: #0D1117; border-color: #2B333D; color: #C9D1D9;
}
[data-theme="dark"] .ide-search::placeholder { color: #6B7280; }
[data-theme="dark"] .ide-toggle { color: #C9D1D9; }
[data-theme="dark"] .ide-toggle-track { background-color: #3D4650; }
[data-theme="dark"] .btn-clear { background-color: #161B22; color: #C9D1D9; border-color: #2B333D; }
[data-theme="dark"] .btn-clear:hover { background-color: #21262D; color: #ffffff; }
[data-theme="dark"] .btn-tool { background-color: #161B22; color: #C9D1D9; border-color: #2B333D; }
[data-theme="dark"] .btn-tool:hover { background-color: #21262D; border-color: #3D4650; }

/* Custom scrollbars on scrollable surfaces */
[data-theme="dark"] .editor-box,
[data-theme="dark"] .output-box,
[data-theme="dark"] .ide-plain,
[data-theme="dark"] .tv-view,
[data-theme="dark"] .diff-inline-view { scrollbar-color: #4D5666 #161B22; }
[data-theme="dark"] .editor-box::-webkit-scrollbar-track,
[data-theme="dark"] .output-box::-webkit-scrollbar-track,
[data-theme="dark"] .ide-plain::-webkit-scrollbar-track,
[data-theme="dark"] .tv-view::-webkit-scrollbar-track,
[data-theme="dark"] .diff-inline-view::-webkit-scrollbar-track,
[data-theme="dark"] .editor-box::-webkit-scrollbar-button:single-button,
[data-theme="dark"] .output-box::-webkit-scrollbar-button:single-button,
[data-theme="dark"] .ide-plain::-webkit-scrollbar-button:single-button,
[data-theme="dark"] .tv-view::-webkit-scrollbar-button:single-button,
[data-theme="dark"] .diff-inline-view::-webkit-scrollbar-button:single-button,
[data-theme="dark"] .editor-box::-webkit-scrollbar-corner,
[data-theme="dark"] .output-box::-webkit-scrollbar-corner,
[data-theme="dark"] .ide-plain::-webkit-scrollbar-corner,
[data-theme="dark"] .tv-view::-webkit-scrollbar-corner,
[data-theme="dark"] .diff-inline-view::-webkit-scrollbar-corner { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .editor-box::-webkit-scrollbar-thumb,
[data-theme="dark"] .output-box::-webkit-scrollbar-thumb,
[data-theme="dark"] .ide-plain::-webkit-scrollbar-thumb,
[data-theme="dark"] .tv-view::-webkit-scrollbar-thumb,
[data-theme="dark"] .diff-inline-view::-webkit-scrollbar-thumb { background-color: #4D5666; border-color: #161B22; }

/* ---------- Tree viewer ---------- */
[data-theme="dark"] .tv-view { background-color: #0D1117; color: #C9D1D9; }
[data-theme="dark"] .tv-empty { color: #6B7280; }
[data-theme="dark"] .tv-row { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .tv-row.tv-head { background-color: #161B22; }
[data-theme="dark"] .tv-row.tv-leaf { background-color: #1A2130; border-color: #2B333D; }
[data-theme="dark"] .tv-row:hover { background-color: #1B2A44; border-color: #58A6FF; }
[data-theme="dark"] .tv-row:hover .tv-key { color: #79C0FF; }
[data-theme="dark"] .tv-toggle { background-color: #21262D; color: #C9D1D9; border-color: #3D4650; }
[data-theme="dark"] .tv-toggle:hover { background-color: #2D333B; border-color: #6B7280; }
[data-theme="dark"] .tv-children { border-color: #2B333D; }
[data-theme="dark"] .tv-branch:hover > .tv-children { border-color: #3D4650; }
[data-theme="dark"] .tv-key,
[data-theme="dark"] .tv-attr { color: #79C0FF; }
[data-theme="dark"] .tv-xtag { color: #7EE787; }
[data-theme="dark"] .tv-punct { color: #8B949E; }
[data-theme="dark"] .tv-str { color: #A5D6FF; }
[data-theme="dark"] .tv-num { color: #D2A8FF; }
[data-theme="dark"] .tv-lit { color: #FF7B72; }
[data-theme="dark"] .tv-text { color: #C9D1D9; }
[data-theme="dark"] .tv-count { color: #8B949E; background-color: #21262D; }
[data-theme="dark"] .tv-view mark,
[data-theme="dark"] .tv-row.tv-hit { background-color: #BB8009; color: #0D1117; }
[data-theme="dark"] .tv-row.tv-hit:hover { background-color: #D4930C; }

/* ---------- Diff view ---------- */
[data-theme="dark"] .diff-view { border-color: #2B333D; }
[data-theme="dark"] .diff-pane-headers { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .diff-pane-header { color: #9AA4B2; }
[data-theme="dark"] .diff-pane-header:first-child,
[data-theme="dark"] .diff-pane-left { border-color: #2B333D; }
[data-theme="dark"] .diff-inline-view { background-color: #0D1117; }
[data-theme="dark"] .diff-ln { color: #6B7280; background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .diff-equal,
[data-theme="dark"] .diff-line.diff-filler { background-color: #0D1117; }
[data-theme="dark"] .diff-equal .diff-ln,
[data-theme="dark"] .diff-filler .diff-ln { background-color: #161B22; }
[data-theme="dark"] .diff-removed,
[data-theme="dark"] .diff-changed-a { background-color: #2D1517; }
[data-theme="dark"] .diff-removed .diff-ln,
[data-theme="dark"] .diff-changed-a .diff-ln { background-color: #3D1D1D; color: #FF7B72; }
[data-theme="dark"] .diff-added,
[data-theme="dark"] .diff-changed-b { background-color: #12261C; }
[data-theme="dark"] .diff-added .diff-ln,
[data-theme="dark"] .diff-changed-b .diff-ln { background-color: #1E3A28; color: #3FB950; }
[data-theme="dark"] .diff-placeholder { background-color: #12161C; }
[data-theme="dark"] .diff-placeholder .diff-ln { background-color: #161B22; }
[data-theme="dark"] mark.diff-char-del { background-color: #96343A; color: #ffffff; }
[data-theme="dark"] mark.diff-char-ins { background-color: #1F5A32; color: #ffffff; }
[data-theme="dark"] .stat-equal { color: #9AA4B2; }
[data-theme="dark"] .stat-added { color: #3FB950; }
[data-theme="dark"] .stat-removed { color: #FF7B72; }

/* ---------- FAQ accordion (tool-page SEO block) ---------- */
[data-theme="dark"] .ide-faq { background-color: #0D1117; border-color: #2B333D; }
[data-theme="dark"] .faq-head h2 { color: #F0F3F6; }
[data-theme="dark"] .faq-head p { color: #9AA4B2; }
[data-theme="dark"] .faq-item { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .faq-item.open { border-color: #1F3A63; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
[data-theme="dark"] .faq-num { background-color: #1B2A44; color: #79C0FF; }
[data-theme="dark"] .faq-text { color: #F0F3F6; }
[data-theme="dark"] .faq-caret { color: #8B949E; }
[data-theme="dark"] .faq-a-inner { color: #9AA4B2; }
[data-theme="dark"] .faq-a-inner code { background-color: #161B22; color: #79C0FF; }

/* ---------- SEO section ---------- */
[data-theme="dark"] .ide-seo { background-color: #0D1117; }
[data-theme="dark"] .pdf-panel + .ide-seo,
[data-theme="dark"] .reftable-wrap + .ide-seo { border-color: #2B333D; }
[data-theme="dark"] .ide-seo-cols { background-color: #161B22; border-color: #3A4450; }
[data-theme="dark"] .ide-seo-col { border-color: #3A4450; }
[data-theme="dark"] .ide-seo-icon { background-color: #1B2A44; color: #79C0FF; }
[data-theme="dark"] .ide-seo-col h2 { color: #F0F3F6; }
[data-theme="dark"] .ide-seo-col li::before { background-color: #58A6FF; }
[data-theme="dark"] .ide-seo-col,
[data-theme="dark"] .ide-seo-col li,
[data-theme="dark"] .ide-seo-col p { color: #9AA4B2; }

/* ---------- PDF Toolbox ---------- */
[data-theme="dark"] .pdf-tabs { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .pdf-tab { color: #9AA4B2; }
[data-theme="dark"] .pdf-tab:hover { color: #ffffff; }
[data-theme="dark"] .pdf-panel-intro { color: #9AA4B2; }
[data-theme="dark"] .pdf-dropzone { border-color: #3D4650; background-color: #161B22; color: #9AA4B2; }
[data-theme="dark"] .pdf-dropzone:hover,
[data-theme="dark"] .pdf-dropzone.drop-target { border-color: #58A6FF; background-color: #14243D; color: #58A6FF; }
[data-theme="dark"] .pdf-info { background-color: #21262D; color: #C9D1D9; }
[data-theme="dark"] .pdf-file-row { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .pdf-file-name { color: #E6E9EE; }
[data-theme="dark"] .pdf-file-size { color: #9AA4B2; }
[data-theme="dark"] .pdf-file-handle { color: #6B7280; }
[data-theme="dark"] .pdf-field-row label { color: #C9D1D9; }

/* ---------- Cron Expression Generator ---------- */
[data-theme="dark"] .cron-inline-label { color: #9AA4B2; }
[data-theme="dark"] .cron-select { background-color: #161B22; border-color: #2B333D; color: #E6E9EE; }
[data-theme="dark"] .cron-expr-label,
[data-theme="dark"] .cron-subhead { color: var(--label-color); }
[data-theme="dark"] .cron-page + .ide-seo { border-top-color: #2B333D; }
[data-theme="dark"] .cron-expr-input { background-color: #0D1117; border-color: #3D4650; color: #E6E9EE; }
[data-theme="dark"] .cron-expr-input:focus { outline-color: #58A6FF; border-color: #58A6FF; }
[data-theme="dark"] .cron-error { background-color: #2D1517; border-color: #5C2B2B; color: #FF9D9D; }
[data-theme="dark"] .cron-desc { background-color: #14243D; border-color: #1F3A63; color: #A9CBF5; }
[data-theme="dark"] .cron-desc-empty { background-color: #161B22; border-color: #2B333D; color: #6B7280; }
[data-theme="dark"] .cron-field label { color: #C9D1D9; }
[data-theme="dark"] .cron-field-input { background-color: #161B22; border-color: #2B333D; color: #E6E9EE; }
[data-theme="dark"] .cron-field-input:focus { outline-color: #58A6FF; border-color: #58A6FF; }
[data-theme="dark"] .cron-field-hint { color: #6B7280; }
[data-theme="dark"] .cron-preset { background-color: #161B22; border-color: #2B333D; color: #C9D1D9; }
[data-theme="dark"] .cron-preset:hover { border-color: #58A6FF; background-color: #14243D; color: #58A6FF; }
[data-theme="dark"] .cron-tz-row label { color: #9AA4B2; }
[data-theme="dark"] .cron-runs { border-color: #2B333D; }
[data-theme="dark"] .cron-runs li:nth-child(even) { background-color: #161B22; }
[data-theme="dark"] .cron-run-time { color: #E6E9EE; }
[data-theme="dark"] .cron-run-rel { color: #9AA4B2; }
[data-theme="dark"] .cron-runs-note { color: #6B7280; }
[data-theme="dark"] .reftable-group-title { color: #6B7280; }

/* ---------- JSONPath / XPath Tester ---------- */
[data-theme="dark"] .pxt-mode-row { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .pxt-mode-btn { background-color: #0D1117; border-color: #2B333D; color: #9AA4B2; }
[data-theme="dark"] .pxt-mode-btn[aria-pressed="true"] { background-color: #2563EB; border-color: #2563EB; color: #ffffff; }
[data-theme="dark"] .pxt-mode-btn:not([aria-pressed="true"]):hover { border-color: #58A6FF; color: #E6E9EE; }
[data-theme="dark"] .pxt-query-group label { color: #9AA4B2; }
[data-theme="dark"] .pxt-query-input { background-color: #0D1117; border-color: #2B333D; color: #E6E9EE; }
[data-theme="dark"] .pxt-query-input:focus { outline-color: #58A6FF; border-color: #58A6FF; }
[data-theme="dark"] .pxt-body > .ide-pane + .ide-pane { border-color: #2B333D; }
[data-theme="dark"] .pxt-results { background-color: #0D1117; }
[data-theme="dark"] .pxt-result-row { border-color: #21262D; }
[data-theme="dark"] .pxt-result-path { color: #58A6FF; }
[data-theme="dark"] .pxt-result-value { color: #C9D1D9; }
[data-theme="dark"] .pxt-empty { color: #6B7280; }
[data-theme="dark"] .reftable-title { color: #F0F3F6; }
[data-theme="dark"] .reftable-scroll { border-color: #2B333D; }
[data-theme="dark"] .reftable th,
[data-theme="dark"] .reftable td { border-color: #2B333D; }
[data-theme="dark"] .reftable th { background-color: #161B22; color: #9AA4B2; }
[data-theme="dark"] .reftable td { color: #9AA4B2; }
[data-theme="dark"] .reftable td:first-child { color: #7C8598; }
[data-theme="dark"] .reftable tr:nth-child(even) td { background-color: #161B22; }
[data-theme="dark"] .reftable code { background-color: #161B22; border-color: #2B333D; color: #79C0FF; }
[data-theme="dark"] .reftable .reftable-na,
[data-theme="dark"] .reftable-note { color: #6B7280; }
[data-theme="dark"] .reftable-foot { color: #9AA4B2; }
[data-theme="dark"] .reftable-foot code { background-color: #161B22; border-color: #2B333D; color: #79C0FF; }

/* ---------- JWT Decoder ---------- */
[data-theme="dark"] .jwt-body > .ide-pane + .ide-pane { border-color: #2B333D; }
[data-theme="dark"] .jwt-secret-row { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .jwt-secret-row label { color: #9AA4B2; }
[data-theme="dark"] .jwt-secret-input { background-color: #0D1117; border-color: #2B333D; color: #E6E9EE; }
[data-theme="dark"] .jwt-secret-input:focus { outline-color: #58A6FF; border-color: #58A6FF; }
[data-theme="dark"] .jwt-sig-badge { background-color: #161B22; color: #9AA4B2; }
[data-theme="dark"] .jwt-sig-badge.jwt-sig-neutral { color: #9AA4B2; }
[data-theme="dark"] .jwt-sig-badge.jwt-sig-valid       { background-color: #123822; color: #4ADE80; }
[data-theme="dark"] .jwt-sig-badge.jwt-sig-invalid     { background-color: #3A1414; color: #FF7B72; }
[data-theme="dark"] .jwt-sig-badge.jwt-sig-unsupported { background-color: #3A2F0F; color: #E3B341; }
[data-theme="dark"] .jwt-sig-badge.jwt-sig-neutral     { background-color: #161B22; color: #9AA4B2; }
[data-theme="dark"] .jwt-block-title { color: #6B7280; }
[data-theme="dark"] .jwt-json { background-color: #0D1117; border-color: #2B333D; color: #C9D1D9; }
[data-theme="dark"] .jwt-claim-row { border-color: #2B333D; }
[data-theme="dark"] .jwt-claim-label { color: #9AA4B2; }
[data-theme="dark"] .jwt-claim-value { color: #C9D1D9; }
[data-theme="dark"] .jwt-claim-row.jwt-claim-expired { border-color: #7A2E2E; background-color: #2D1517; }
[data-theme="dark"] .jwt-claim-row.jwt-claim-expired .jwt-claim-value { color: #FF7B72; }
[data-theme="dark"] .jwt-claim-row.jwt-claim-valid { border-color: #1F5A34; background-color: #102318; }

/* ---------- Base64 / URL / HTML Encoder ---------- */
[data-theme="dark"] .enc-body > .ide-pane + .ide-pane { border-color: #2B333D; }
[data-theme="dark"] .enc-mode-row { background-color: #161B22; border-color: #2B333D; }
[data-theme="dark"] .enc-toggle-btn { background-color: #0D1117; border-color: #2B333D; color: #9AA4B2; }
[data-theme="dark"] .enc-toggle-btn[aria-pressed="true"] { background-color: #2563EB; border-color: #2563EB; color: #ffffff; }
[data-theme="dark"] .enc-toggle-btn:not([aria-pressed="true"]):hover { border-color: #58A6FF; color: #E6E9EE; }


/* Breadcrumb */
[data-theme="dark"] .breadcrumb-bar { background-color: #0D1117; border-bottom-color: #2B333D; }
[data-theme="dark"] .breadcrumb-inner,
[data-theme="dark"] .breadcrumb-inner a,
[data-theme="dark"] .breadcrumb-item { color: #9AA4B2; }
[data-theme="dark"] .breadcrumb-inner a:hover { color: #58A6FF; }
[data-theme="dark"] .breadcrumb-sep { color: #3D4650; }
[data-theme="dark"] .breadcrumb-current { color: #E6E9EE; }

/* Related tools chip row */
[data-theme="dark"] .related-tools { background-color: #161B22; border-bottom-color: #2B333D; }
[data-theme="dark"] .related-tools--bordered .related-tools { border-top-color: #2B333D; }
[data-theme="dark"] .related-tools-label { color: var(--label-color); }
[data-theme="dark"] .related-tools-chip { background-color: #2563EB; border-color: #2563EB; color: #FFFFFF; }

/* ============================================================
   Cookie Consent — fixed bottom banner + expandable preferences
   panel + a small reopen pill once a choice has been made. GA4
   is only ever loaded from cookie-consent.js after real consent;
   this CSS is purely presentational.
   ============================================================ */
.cc-banner,
.cc-panel {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    max-width: 760px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.cc-banner {
    max-width: 540px;
    padding: 20px 22px;
}
.cc-banner[hidden],
.cc-panel[hidden] { display: none; }

.cc-title { font-size: 1.06rem; font-weight: 700; color: #111827; margin: 0 0 6px; letter-spacing: -0.01em; }
.cc-title:focus, .cc-panel h3:focus { outline: none; }
.cc-text p { font-size: 13.5px; line-height: 1.6; color: #4B5563; margin: 0 0 16px; }
.cc-text a { color: #2563EB; text-decoration: underline; }

.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.cc-btn {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cc-btn-primary { background-color: #2563EB; color: #fff; border-color: #2563EB; }
.cc-btn-primary:hover { background-color: #1D4ED8; border-color: #1D4ED8; }
.cc-btn-ghost { background-color: transparent; color: #1F2937; border-color: #D1D5DB; }
.cc-btn-ghost:hover { border-color: #9CA3AF; }
.cc-btn-text {
    background: transparent;
    color: #2563EB;
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 10px;
    cursor: pointer;
}
.cc-btn-text:hover { text-decoration: underline; }

.cc-panel { padding: 18px 20px; }
.cc-panel h3 { font-size: 14px; margin: 0 0 4px; padding-right: 32px; color: #1F2937; }
.cc-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6B7280;
    cursor: pointer;
}
.cc-close:hover { background-color: #F3F4F6; color: #111827; }
.cc-close:focus-visible { outline: 2px solid #2563EB; outline-offset: 1px; }
[data-theme="dark"] .cc-close { color: #9AA4B2; }
[data-theme="dark"] .cc-close:hover { background-color: #21262D; color: #E6E9EE; }
.cc-panel > p { font-size: 12.5px; color: #6B7280; margin: 0 0 14px; line-height: 1.5; }

.cc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #EEF0F2;
}
.cc-row:first-of-type { border-top: none; }
.cc-row-text strong { display: block; font-size: 12.5px; color: #1F2937; margin-bottom: 2px; }
.cc-row-text span { display: block; font-size: 11.5px; color: #6B7280; line-height: 1.4; }

.cc-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4B5563;
    border: 1px solid #D1D5DB;
    border-radius: 5px;
    padding: 2px 7px;
    flex-shrink: 0;
    align-self: center;
}

.cc-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 999px;
    background-color: #D1D5DB;
    border: none;
    cursor: pointer;
    padding: 0;
    align-self: center;
}
.cc-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.cc-switch[aria-checked="true"] { background-color: #2563EB; }
.cc-switch[aria-checked="true"]::after { transform: translateX(16px); }

.cc-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    /* Accept and Reject share the first row equally; Customize sits below */
    .cc-actions .cc-btn { flex: 1 1 40%; text-align: center; }
    .cc-actions .cc-btn-text { flex: 1 1 100%; text-align: center; }
}

[data-theme="dark"] .cc-banner,
[data-theme="dark"] .cc-panel { background-color: #161B22; border-color: #2B333D; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .cc-title { color: #F0F3F6; }
[data-theme="dark"] .cc-text p,
[data-theme="dark"] .cc-panel > p,
[data-theme="dark"] .cc-row-text span { color: #9AA4B2; }
[data-theme="dark"] .cc-btn-text { color: #58A6FF; }
[data-theme="dark"] .cc-text a { color: #58A6FF; }
[data-theme="dark"] .cc-panel h3,
[data-theme="dark"] .cc-row-text strong { color: #E6E9EE; }
[data-theme="dark"] .cc-row { border-top-color: #21262D; }
[data-theme="dark"] .cc-btn-ghost { color: #E6E9EE; border-color: #3D4650; }
[data-theme="dark"] .cc-btn-ghost:hover { border-color: #565D6D; }
[data-theme="dark"] .cc-btn-primary { background-color: #2563EB; border-color: #2563EB; }
[data-theme="dark"] .cc-btn-primary:hover { background-color: #1D4ED8; border-color: #1D4ED8; }
[data-theme="dark"] .cc-tag { color: #7D8590; border-color: #3D4650; }
[data-theme="dark"] .cc-switch { background-color: #3D4650; }
[data-theme="dark"] .cc-switch[aria-checked="true"] { background-color: #2563EB; }
[data-theme="dark"] .related-tools-chip:hover { background-color: #1D4ED8; border-color: #1D4ED8; }

/* ============================================================
   Tool page "about" section — explanatory copy above the FAQ.
   Same white band + top border as .ide-faq so the two read as a pair.
   ============================================================ */
.ide-about { padding: 44px 24px 12px; background-color: #ffffff; border-top: 1px solid #D1D5DB; }
.about-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.about-text h2 { font-size: 1.35rem; font-weight: 700; color: #111827; letter-spacing: -0.02em; margin-bottom: 14px; text-align: center; }
.about-text p { font-size: 0.96rem; line-height: 1.75; color: #374151; margin-bottom: 14px; text-align: justify; hyphens: auto; }
.about-text a { color: #2563EB; text-decoration: underline; text-underline-offset: 2px; }
.about-text code, .about-uses code {
    background-color: #F3F4F6; border: 1px solid #D1D5DB; border-radius: 4px;
    padding: 1px 5px; font-size: 0.9em; color: #111827;
}
.about-uses { background-color: #F9FAFB; border: 1px solid #C4CAD4; border-radius: 12px; padding: 20px 22px; }
.about-uses h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; margin-bottom: 12px; text-align: center; }
.about-uses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.about-uses li { position: relative; padding-left: 18px; font-size: 0.92rem; line-height: 1.55; color: #374151; }
.about-uses li::before { content: ''; position: absolute; left: 4px; top: 0.52em; width: 7px; height: 7px; background-color: #2563EB; transform: rotate(45deg); }
.about-uses a { color: #2563EB; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 820px) {
    .ide-about { padding: 36px 16px 8px; }
    .about-inner { grid-template-columns: 1fr; gap: 24px; }
}

[data-theme="dark"] .ide-about { background-color: #0D1117; border-color: #2B333D; }
[data-theme="dark"] .about-text h2 { color: #F0F3F6; }
[data-theme="dark"] .about-text p, [data-theme="dark"] .about-uses li { color: #C9D1D9; }
[data-theme="dark"] .about-text a, [data-theme="dark"] .about-uses a { color: #58A6FF; }
[data-theme="dark"] .about-text code, [data-theme="dark"] .about-uses code { background-color: #21262D; border-color: #3D4650; color: #E6E9EE; }
[data-theme="dark"] .about-uses { background-color: #161B22; border-color: #3A4450; }
[data-theme="dark"] .about-uses h3 { color: #8B949E; }
[data-theme="dark"] .about-uses li::before { background-color: #58A6FF; }

/* Accessibility follow-ups from the page-speed audit ---------------------- */
/* The "Advertisement" labels are darker on light backgrounds (contrast) — keep the lighter tone on dark ones. */
[data-theme="dark"] .ad-leaderboard-label,
[data-theme="dark"] .ad-rect-label { color: #9CA3AF; }

/* The PDF drop zones are keyboard-operable buttons, so they need a visible focus ring. */
.pdf-dropzone:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
[data-theme="dark"] .pdf-dropzone:focus-visible { outline-color: #58A6FF; }