/* =====================================================================
   EXTENDED COMPONENTS — base HTML + full .ct-* vocabulary
   ---------------------------------------------------------------------
   Generated by base.extended_components_css(). Theming via palette dict.
   Wrapped under `.ct-main` so it doesn't fight the source CSS for chrome.
   ===================================================================== */

/* ---- Base HTML element styling (scoped to .ct-main) ---- */
.ct-main {
    color: #eeedec;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.65;
}
.ct-main h1, .ct-main h2, .ct-main h3,
.ct-main h4, .ct-main h5, .ct-main h6 {
    color: #ffffff;
    margin: 1.4em 0 0.5em;
    line-height: 1.25;
    font-weight: 700;
    text-wrap: balance;
}
.ct-main h1 { font-size: 1.65rem; }
.ct-main h2 {
    font-size: 1.35rem;
    padding-bottom: 8px;
    border-bottom: 1px solid #0d0d0d;
    position: relative;
}
.ct-main h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 60px;
    height: 2px;
    background: #3faefb;
}
.ct-main h3 { font-size: 1.1rem; color: #ffffff; }
.ct-main h4 { font-size: 1rem; }
.ct-main h5 { font-size: 0.92rem; }
.ct-main h6 { font-size: 0.84rem; color: #6a6a6a; }
.ct-main p { margin: 0 0 0.9em; color: #eeedec; text-wrap: pretty; }
.ct-main strong, .ct-main b { color: #ffffff; font-weight: 700; }
.ct-main em, .ct-main i { font-style: italic; }
.ct-main mark {
    background: #ebcc66;
    color: #ffffff;
    padding: 0 4px;
    border-radius: 3px;
}
.ct-main small { font-size: 0.85em; color: #6a6a6a; }
.ct-main sub, .ct-main sup { font-size: 0.75em; line-height: 0; }
.ct-main abbr[title] {
    text-decoration: underline dotted #6a6a6a;
    cursor: help;
}
.ct-main time {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: #6a6a6a;
}
.ct-main address {
    font-style: normal;
    color: #6a6a6a;
    margin: 0.5em 0;
}
.ct-main a {
    color: #50daff;
    text-decoration: none;
    text-underline-offset: 2px;
}
.ct-main a:hover {
    color: #3faefb;
    text-decoration: underline;
}
.ct-main hr {
    border: 0;
    border-top: 1px solid #0d0d0d;
    margin: 2em 0;
}

/* Lists */
.ct-main ul, .ct-main ol { margin: 0 0 1em 1.4em; padding: 0; }
.ct-main li { margin: 0.35em 0; }
.ct-main li::marker { color: #3faefb; font-weight: 700; }
.ct-main ul ul, .ct-main ul ol,
.ct-main ol ul, .ct-main ol ol { margin: 0.3em 0 0.3em 1.2em; }
.ct-main dl { margin: 1em 0; }
.ct-main dt {
    font-weight: 700;
    color: #ffffff;
    margin-top: 0.7em;
}
.ct-main dd {
    margin: 0.2em 0 0.6em 1.2em;
    color: #6a6a6a;
}

/* Quotes */
.ct-main blockquote {
    margin: 1.2em 0;
    padding: 12px 18px;
    border-left: 3px solid #3faefb;
    background: #353a44;
    color: #6a6a6a;
    border-radius: 0 4px 4px 0;
}
.ct-main blockquote p:last-child { margin-bottom: 0; }
.ct-main blockquote cite {
    display: block;
    font-style: italic;
    color: #6a6a6a;
    margin-top: 0.5em;
    font-size: 0.9em;
}
.ct-main blockquote cite::before { content: "— "; }
.ct-main q { font-style: italic; }
.ct-main q::before { content: "\201C"; }
.ct-main q::after { content: "\201D"; }

/* Code */
.ct-main code {
    background: #131513;
    color: #eeedec;
    border: 1px solid #0d0d0d;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.88em;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-word;
}
.ct-main pre {
    background: #131513;
    color: #eeedec;
    border: 1px solid #0d0d0d;
    padding: 14px 18px;
    border-radius: 5px;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.55;
    margin: 1.2em 0;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.ct-main pre code {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
    font-size: 1em;
}
.ct-main kbd {
    background: #ffffff;
    color: #23252e;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78em;
    font-weight: 700;
    box-shadow: 0 1px 0 #0d0d0d;
}
.ct-main samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: #353a44;
    padding: 1px 4px;
    border-radius: 2px;
}

/* Tables */
.ct-main table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    overflow: hidden;
    font-size: 0.95em;
}
.ct-main caption {
    caption-side: top;
    padding: 0.5em 0;
    color: #6a6a6a;
    font-style: italic;
    font-size: 0.9em;
}
.ct-main thead { background: #2b2f37; }
.ct-main tbody tr:nth-child(even) { background: #2b2f37; }
.ct-main th, .ct-main td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #0d0d0d;
    vertical-align: top;
    color: #eeedec;
}
.ct-main th {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #0d0d0d;
}
.ct-main tbody tr:last-child td { border-bottom: 0; }

/* Figures + media */
.ct-main figure { margin: 1.4em 0; text-align: center; }
.ct-main figure img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
}
.ct-main figcaption {
    font-size: 0.85em;
    color: #6a6a6a;
    margin-top: 0.5em;
    font-style: italic;
}
.ct-main img { max-width: 100%; height: auto; }
.ct-main video, .ct-main audio, .ct-main iframe {
    max-width: 100%;
    border-radius: 5px;
}

/* Forms */
.ct-main form { margin: 1em 0; }
.ct-main fieldset {
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 14px 16px;
    margin: 1em 0;
}
.ct-main legend {
    padding: 0 8px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9em;
}
.ct-main label, .ct-main .form-label {
    display: block;
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 600;
    margin: 10px 0 5px;
}
.ct-main input[type="text"],
.ct-main input[type="search"],
.ct-main input[type="email"],
.ct-main input[type="url"],
.ct-main input[type="tel"],
.ct-main input[type="password"],
.ct-main input[type="number"],
.ct-main input[type="date"],
.ct-main input[type="time"],
.ct-main input[type="datetime-local"],
.ct-main textarea,
.ct-main select {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    color: #eeedec;
    padding: 9px 12px;
    font-size: 0.9rem;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ct-main input:focus,
.ct-main textarea:focus,
.ct-main select:focus {
    outline: none;
    border-color: #3faefb;
    box-shadow: 0 0 0 2px color-mix(in oklab, #3faefb 25%, transparent);
}
.ct-main input::placeholder, .ct-main textarea::placeholder {
    color: #6a6a6a;
    opacity: 0.7;
}
.ct-main input[type="checkbox"],
.ct-main input[type="radio"] {
    accent-color: #3faefb;
    width: auto;
    margin-right: 6px;
}
.ct-main input[type="file"] {
    background: transparent;
    padding: 6px 0;
}
.ct-main button,
.ct-main input[type="submit"],
.ct-main input[type="button"] {
    background: #3faefb;
    color: #f2f2f2;
    border: 0;
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    transition: opacity 0.15s ease, transform 0.1s ease;
}
.ct-main button:hover,
.ct-main input[type="submit"]:hover {
    opacity: 0.9;
}
.ct-main button:active { transform: translateY(1px); }
.ct-main output {
    display: inline-block;
    padding: 4px 8px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 3px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.ct-main progress, .ct-main meter {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    /* Theme the bar explicitly — an un-themed <progress> renders as a
       browser-default solid slab (a full-width red block on Chromium). */
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #0d0d0d;
    background: #131513;
    overflow: hidden;
}
.ct-main progress::-webkit-progress-bar { background: #131513; }
.ct-main progress::-webkit-progress-value {
    background: #3faefb; border-radius: 5px;
}
.ct-main progress::-moz-progress-bar { background: #3faefb; }
.ct-main meter::-webkit-meter-bar {
    background: #131513; border: 0;
}
.ct-main meter::-webkit-meter-optimum-value { background: #2e7129; }
.ct-main meter::-moz-meter-bar { background: #2e7129; }

/* Details / summary (bare — get FAQ-accordion treatment) */
.ct-main details {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    margin: 8px 0;
    overflow: hidden;
}
.ct-main details[open] { background: #2b2f37; }
.ct-main details > summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    color: #ffffff;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
}
.ct-main details > summary::-webkit-details-marker { display: none; }
.ct-main details > summary::after {
    content: "+";
    color: #3faefb;
    font-size: 1.2em;
    font-weight: 700;
    transition: transform 0.15s ease;
}
.ct-main details[open] > summary::after { content: "\2212"; }
.ct-main details > *:not(summary) { padding: 0 16px 12px; }


/* =====================================================================
   .ct-* EXTENDED COMPONENT VOCABULARY (full coverage)
   ===================================================================== */

/* ---- Skip-link + back-to-top (chrome-side, but defined here too) ---- */
.ct-skip-link {
    position: absolute;
    left: -9999px;
}
.ct-skip-link:focus {
    position: fixed;
    top: 8px; left: 8px;
    background: #3faefb;
    color: #f2f2f2;
    padding: 8px 14px;
    border-radius: 4px;
    z-index: 9999;
    text-decoration: none;
}
.ct-to-top {
    position: fixed;
    right: 18px; bottom: 18px;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    text-decoration: none;
    z-index: 100;
    /* Self-contained themed circle: the affordance is drawn entirely by
       this rule + an inline SVG chevron (see back_to_top.html_anchor),
       so it is always visible even when no per-site PNG exists and
       renders identically under Tor "safest" (inline SVG, no JS/font). */
    background: #3faefb;
    color: #f2f2f2;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    transition: opacity 0.2s ease, transform 0.2s ease,
                background 0.2s ease;
}
.ct-to-top img,
.ct-to-top .ct-to-top-ico {
    display: block;
    border: 0;
    background: transparent;
}
.ct-to-top img { width: 100%; height: 100%; }
.ct-to-top:hover {
    transform: translateY(-2px);
    text-decoration: none;
    filter: brightness(1.08);
}
.ct-to-top:focus-visible {
    outline: 2px solid #3faefb;
    outline-offset: 3px;
}

/* ---- Surface + card primitives ---- */
.ct-surface, .ct-card {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 16px 18px;
    margin: 12px 0;
}
.ct-card--accent { border-left: 3px solid #3faefb; }
.ct-card-title {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
}
.ct-prose { color: #eeedec; line-height: 1.7; max-width: 72ch; }
.ct-prose p { margin: 0 0 1.05em; }
.ct-prose p:last-child { margin-bottom: 0; }

/* Modern section rhythm — slightly tighter top, more breathing room
   between blocks. Each H2 gets a subtle subhead style. Per-replica
   color identity preserved (only spacing + typography are uniform). */
.ct-section { margin: 2.2em 0 1.6em; scroll-margin-top: 80px; }
.ct-section:first-child { margin-top: 0.4em; }
.ct-section__title {
    color: #ffffff;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 0.6em;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.ct-section__title--accent {
    position: relative;
    padding-left: 14px;
}
.ct-section__title--accent::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 4px;
    background: #3faefb;
    border-radius: 2px;
}
.ct-section__lede {
    color: #6a6a6a;
    font-size: 1.02rem;
    margin: 0 0 1em;
    max-width: 70ch;
}
.ct-section__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #3faefb;
    color: #f2f2f2;
    font-weight: 700;
    font-size: 0.85rem;
    margin-right: 8px;
}

/* ---- Hero — modern card aesthetic. Subtle gradient overlay reads
   as "hero" via the tinted background + accent-tinted border alone.
   (Removed the full-height left-edge ::before rail — it bled past
   content on tall heros and looked like a stuck sidebar rather than
   an accent. The border + gradient give enough visual hierarchy.) */
.ct-hero {
    position: relative;
    background:
        linear-gradient(135deg,
            color-mix(in oklab, #3faefb 4%, #2b2f37),
            #2b2f37 60%);
    border: 1px solid color-mix(in oklab, #3faefb 12%, #0d0d0d);
    border-radius: 8px;
    /* Generous padding so the title/lede/CTAs never kiss the border.
       Earlier 36/32 produced visible text-edge collisions on every
       replica. Use 48/44 desktop, 32/24 mobile. */
    padding: 48px 44px;
    margin: 0 0 1.8em;
    overflow: hidden;
    isolation: isolate;
}
@media (max-width: 760px) {
    .ct-hero { padding: 32px 24px; }
}
@media (max-width: 480px) {
    .ct-hero { padding: 24px 18px; }
}
.ct-hero h1, .ct-hero__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0 0 0.4em;
    color: #ffffff;
    line-height: 1.2;
    text-wrap: balance;
}
.ct-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #3faefb;
    margin: 0 0 12px;
    padding: 4px 12px;
    background: #353a44;
    border: 1px solid #3faefb;
    border-radius: 4px;
}
.ct-hero__lede {
    font-size: 1.02rem;
    color: #6a6a6a;
    max-width: 60ch;
    margin: 0 0 16px;
    line-height: 1.6;
}
.ct-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 8px;
}
.ct-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3faefb;
    color: #f2f2f2;
    padding: 10px 18px;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
}
.ct-hero__cta:hover {
    opacity: 0.9;
    color: #f2f2f2;
    text-decoration: none;
}
.ct-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 900px) {
    .ct-hero--split .ct-hero__grid { grid-template-columns: 1.4fr 1fr; }
}
/* Direct-child layout fallback: the AI often emits a plain `.ct-hero`
   WITHOUT the `__grid`/`--split` scaffold, which left the title/lede/CTAs
   in a cramped narrow flow that read as "squished + pushed left". Give the
   hero's own content a comfortable measure and consistent vertical rhythm so
   even a bare hero fills its box and reads intentionally. Scoped to direct
   children so it never fights an explicit __grid when one IS present. */
.ct-hero > h1, .ct-hero > h2,
.ct-hero > p, .ct-hero > .ct-hero__lede {
    max-width: 68ch;
}
.ct-hero > * + * { margin-top: 0.85em; }
.ct-hero > .ct-hero__actions,
.ct-hero > .ct-cta-bar { margin-top: 1.2em; }
.ct-hero__aside {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 16px 18px;
    /* Hero aside content (rate tables, status pills) sometimes computes
       a min-content wider than the grid track and pushes the aside out
       beyond the page container's right edge on desktop. Hard-cap it. */
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.ct-hero__aside > * { max-width: 100%; min-width: 0; }

/* ---- Feature card — gentle elevation + hover lift. The shadow
   uses the page bg as its base so it works on light AND dark themes
   without manual tuning per replica. */
.ct-feature-card {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 18px 20px;
    margin: 10px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                0 1px 6px rgba(0, 0, 0, 0.025);
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                border-color 0.15s ease;
}
.ct-feature-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, #3faefb 35%, #0d0d0d);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06),
                0 4px 14px rgba(0, 0, 0, 0.05);
}
.ct-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    /* Subtle tinted chip rather than a solid primary block: when the glyph
       inside is a generic fallback (missing icon font / placeholder square),
       a solid coloured square reads as broken. A soft chip with an accent
       glyph looks intentional either way. */
    background: #2b2f37;
    border: 1px solid #0d0d0d;
    color: #3faefb;
    font-size: 18px;
    margin-bottom: 10px;
}
/* Hide the chip entirely when no glyph was emitted. */
.ct-feature-card__icon:empty { display: none; }
.ct-feature-card__title {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.ct-feature-card__text {
    color: #6a6a6a;
    margin: 0;
    font-size: 0.95em;
}

/* ---- Network statistics ({stats} component) ---- */
.ct-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.ct-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
}
.ct-stat-value {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #3faefb;
}
.ct-stat-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6a6a6a;
}

/* ---- Operational updates ({updates} component) ---- */
.ct-updates {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}
.ct-update {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #0d0d0d;
}
.ct-update:last-child { border-bottom: none; }
.ct-update-when {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    color: #6a6a6a;
    flex: 0 0 auto;
}
.ct-update-title { font-weight: 600; color: #eeedec; }
.ct-update-meta {
    font-size: 0.78rem;
    color: #6a6a6a;
    margin-left: auto;
}

/* ---- Callout ---- */
.ct-callout {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-left: 4px solid #3faefb;
    border-radius: 4px;
    padding: 14px 18px;
    margin: 16px 0;
    /* Grid (not flex) + explicit placement so the callout renders correctly
       whether the AI wraps title+text in a div OR emits mark/title/text as
       FLAT siblings: the mark holds column 1 across all rows, everything else
       stacks in column 2. Flat siblings otherwise strand the title / drop
       text under the icon. */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    align-items: start;
}
.ct-callout > .ct-callout__mark { grid-column: 1; grid-row: 1 / span 99; }
.ct-callout > :not(.ct-callout__mark) { grid-column: 2; }
.ct-callout__mark {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    width: 24px; height: 24px;
    color: #3faefb;
    flex-shrink: 0;
    margin-top: 2px;
}
.ct-callout__mark .ct-icon { width: 20px; height: 20px; }
.ct-callout__title {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ct-callout__text {
    color: #eeedec;
    margin: 0;
    font-size: 0.95em;
}
.ct-callout--warn   { border-left-color: #ebcc66; }
.ct-callout--warn .ct-callout__mark    { color: #ebcc66; }
.ct-callout--danger { border-left-color: #c71422; }
.ct-callout--danger .ct-callout__mark  { color: #c71422; }
.ct-callout--success { border-left-color: #2e7129; }
.ct-callout--success .ct-callout__mark { color: #2e7129; }
.ct-callout--info   { border-left-color: #3f90fb; }
.ct-callout--info .ct-callout__mark    { color: #3f90fb; }

/* ---- Alert (compact callout) ---- */
.ct-alert {
    padding: 10px 14px;
    border-radius: 4px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    color: #eeedec;
    margin: 10px 0;
    font-size: 0.92em;
}

/* ---- Pill + Tag + Status dot ---- */
.ct-pill, .ct-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #353a44;
    color: #ffffff;
    border: 1px solid #0d0d0d;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.4;
}
.ct-tag { background: #2b2f37; }
.ct-status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #6a6a6a;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.ct-status-dot.is-online  { background: #2e7129; }
.ct-status-dot.is-offline { background: #c71422; }
.ct-status-dot.is-degraded{ background: #ebcc66; }

/* ---- Stat ---- */
.ct-stat {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 14px 16px;
    text-align: left;
    margin: 8px 0;
}
.ct-stat__label {
    color: #6a6a6a;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0 0 6px;
}
.ct-stat__value {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.ct-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: #2e7129;
    margin-left: 6px;
}
.ct-stat__delta.is-down { color: #c71422; }
.ct-stat__hint {
    color: #6a6a6a;
    font-size: 0.82em;
    margin-top: 4px;
}
.ct-stat--hero .ct-stat__value { font-size: 2.2rem; }

/* ---- Meta strip ---- */
.ct-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 14px;
    border-radius: 4px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    color: #6a6a6a;
    font-size: 0.85em;
    margin: 12px 0;
    align-items: center;
}
.ct-meta-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---- Pull-quote ---- */
.ct-pull-quote {
    border-left: 4px solid #3faefb;
    background: #2b2f37;
    color: #ffffff;
    padding: 18px 22px;
    margin: 1.6em 0;
    border-radius: 0 5px 5px 0;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.5;
}
.ct-pull-quote::before {
    content: "\201C";
    color: #3faefb;
    font-size: 2em;
    line-height: 0.8;
    margin-right: 6px;
    vertical-align: -0.3em;
    font-style: normal;
}
.ct-pull-quote cite {
    display: block;
    color: #6a6a6a;
    font-style: normal;
    font-size: 0.85em;
    margin-top: 8px;
}
.ct-pull-quote cite::before { content: "\2014 "; }

/* ---- CTA bar ---- */
.ct-cta-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-left: 4px solid #3faefb;
    border-radius: 5px;
    padding: 16px 20px;
    margin: 1.4em 0;
}
.ct-cta-bar__title {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.ct-cta-bar__text {
    color: #6a6a6a;
    margin: 0;
    font-size: 0.92em;
}
.ct-cta-bar > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3faefb;
    color: #f2f2f2;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ct-cta-bar > a:hover { opacity: 0.9; color: #f2f2f2; text-decoration: none; }
@media (max-width: 640px) {
    .ct-cta-bar {
        /* `1fr` alone won't shrink below child min-content; use
           `minmax(0, 1fr)` so the grid track can collapse and let
           long onion URLs wrap inside the column. */
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Onion card (primary endpoint + per-onion entries) ---- */
.ct-onion-card {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 14px 16px;
    margin: 14px 0;
}
.ct-primary-endpoint, .ct-onion-card.is-primary {
    border-left: 4px solid #3faefb;
    background: color-mix(in oklab, #3faefb 6%, #353a44);
}
.ct-onion-card__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #3faefb;
    font-weight: 700;
    margin-bottom: 6px;
}
.ct-onion-card__url {
    display: block;
    background: #131513;
    color: #eeedec;
    padding: 10px 12px;
    border-radius: 4px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
}
.ct-onion-card__copy {
    display: inline-block;
    background: #2b2f37;
    color: #ffffff;
    border: 1px solid #0d0d0d;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
}
.ct-onion-card__verify {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2e7129;
    font-size: 0.85em;
    font-weight: 600;
}

/* ---- Onion table + mirror table ---- */
.ct-onion-table, .ct-mirror-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    overflow: hidden;
    font-size: 0.92em;
}
.ct-onion-table th, .ct-mirror-table th {
    background: #2b2f37;
    text-align: left;
    padding: 10px 14px;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #0d0d0d;
}
.ct-onion-table td, .ct-mirror-table td {
    padding: 10px 14px;
    border-top: 1px solid #0d0d0d;
    vertical-align: top;
    color: #eeedec;
}
.ct-onion-table tr:hover td, .ct-mirror-table tr:hover td {
    background: #2b2f37;
}

/* ---- Compare table ---- */
.ct-compare-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    overflow: hidden;
}
.ct-compare-table th {
    background: #2b2f37;
    padding: 10px 14px;
    text-align: left;
    color: #ffffff;
    font-weight: 700;
    border-bottom: 2px solid #0d0d0d;
}
.ct-compare-table td {
    padding: 10px 14px;
    border-top: 1px solid #0d0d0d;
    color: #eeedec;
}
.ct-compare-table th:first-child,
.ct-compare-table td:first-child {
    background: #2b2f37;
    font-weight: 600;
}

/* ---- Verified strip ---- */
.ct-verified-strip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid #2e7129;
    background: color-mix(in oklab, #2e7129 12%, #353a44);
    color: #eeedec;
    border-radius: 5px;
    font-size: 0.88em;
    margin: 12px 0 18px;
}
.ct-verified-strip::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2e7129;
}
.ct-verified-strip time {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    color: #ffffff;
}

/* ---- FAQ (uses <details>) ---- */
.ct-faq { margin: 1em 0; }
.ct-faq details {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    margin: 8px 0;
    overflow: hidden;
}
.ct-faq details[open] { background: #2b2f37; }
.ct-faq summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    color: #ffffff;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after {
    content: "+";
    color: #3faefb;
    font-size: 1.2em;
    font-weight: 700;
}
.ct-faq details[open] summary::after { content: "\2212"; }
.ct-faq details > *:not(summary) { padding: 0 16px 12px; }

/* ---- Tabs (CSS-only via :target) ---- */
.ct-tabs {
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    overflow: hidden;
    margin: 1em 0;
}
.ct-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    background: #2b2f37;
    border-bottom: 1px solid #0d0d0d;
    padding: 4px 8px 0;
    gap: 4px;
}
.ct-tabs__nav a {
    padding: 8px 14px;
    color: #6a6a6a;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
    font-size: 0.9em;
    border: 1px solid transparent;
    border-bottom: 0;
}
.ct-tabs__nav a.is-active,
.ct-tabs__nav a:hover {
    color: #ffffff;
    background: #353a44;
    border-color: #0d0d0d;
}
.ct-tabs__panel {
    padding: 16px 18px;
    background: #353a44;
}

/* ---- Steps (numbered process list) ---- */
.ct-steps {
    counter-reset: step-counter;
    list-style: none;
    padding: 0;
    margin: 1.2em 0;
}
.ct-steps > li {
    position: relative;
    padding-left: 44px;
    margin: 0 0 14px;
    min-height: 32px;
}
.ct-steps > li::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    left: 0; top: -2px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #3faefb;
    color: #f2f2f2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9em;
}

/* ---- Timeline ---- */
.ct-timeline {
    list-style: none;
    padding: 0;
    margin: 1.2em 0;
    position: relative;
}
.ct-timeline::before {
    content: "";
    position: absolute;
    left: 9px; top: 6px; bottom: 6px;
    width: 2px;
    background: #0d0d0d;
}
.ct-timeline > li {
    position: relative;
    padding-left: 36px;
    margin: 0 0 18px;
}
.ct-timeline > li::before {
    content: "";
    position: absolute;
    left: 4px; top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #3faefb;
    border: 2px solid #23252e;
    box-sizing: content-box;
}

/* ---- Trust row (logos / partner row) ---- */
.ct-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 14px;
    margin: 1em 0;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    background: #353a44;
    align-items: center;
}
.ct-trust-row > * {
    color: #6a6a6a;
    font-size: 0.85em;
    font-weight: 600;
}

/* ---- Breadcrumb ---- */
.ct-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    font-size: 0.85em;
    color: #6a6a6a;
}
.ct-breadcrumb a {
    color: #50daff;
    text-decoration: none;
}
.ct-breadcrumb a:hover { color: #3faefb; }
.ct-breadcrumb__sep {
    color: #6a6a6a;
    user-select: none;
    margin: 0 4px;
}

/* ---- Empty state ---- */
.ct-empty-state {
    text-align: center;
    padding: 36px 18px;
    background: #353a44;
    border: 1px dashed #0d0d0d;
    border-radius: 5px;
    color: #6a6a6a;
    margin: 1.2em 0;
}
.ct-empty-state__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #2b2f37;
    color: #6a6a6a;
    margin: 0 auto 12px;
}
.ct-empty-state__title {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
}

/* ---- Codeblock (semantic wrapper around <pre>/<code>) ---- */
.ct-codeblock {
    background: #131513;
    color: #eeedec;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 12px 16px;
    overflow-x: auto;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85em;
    margin: 1em 0;
}
.ct-codeblock--pgp {
    border-left: 3px solid #c71458;
    font-size: 0.82em;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---- Divider (named horizontal separator with optional icon) ---- */
.ct-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.6em 0;
    color: #6a6a6a;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.ct-divider::before, .ct-divider::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: #0d0d0d;
}
.ct-divider__icon {
    display: inline-flex;
    width: 18px; height: 18px;
    color: #3faefb;
}

/* ---- Key-Value list ---- */
.ct-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 1em 0;
    padding: 12px 14px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    font-size: 0.92em;
}
.ct-kv dt {
    color: #6a6a6a;
    font-weight: 600;
}
.ct-kv dd {
    margin: 0;
    color: #ffffff;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
}

/* ---- Meter ---- */
.ct-meter {
    width: 100%;
    height: 10px;
    background: #2b2f37;
    border-radius: 5px;
    overflow: hidden;
    margin: 6px 0;
}
.ct-meter__bar {
    height: 100%;
    background: #3faefb;
    border-radius: 5px;
    transition: width 0.3s ease;
}

/* ---- Layout (sidebar + main, generic) ---- */
.ct-layout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 1.2em 0;
}
.ct-layout__aside { flex: 0 0 220px; }
.ct-layout__main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) {
    .ct-layout { flex-direction: column; }
    .ct-layout__aside { flex: 1 1 auto; width: 100%; }
}

/* ---- Grid (generic 2/3/4-col responsive grid) ---- */
.ct-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    margin: 1em 0;
}
@media (min-width: 600px) {
    .ct-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
    .ct-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .ct-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Jump nav + TOC ---- */
.ct-jump-nav, .ct-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px 14px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    margin: 1em 0;
    font-size: 0.85em;
}
.ct-jump-nav a, .ct-toc a {
    color: #50daff;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
}
.ct-jump-nav a:hover, .ct-toc a:hover {
    background: #2b2f37;
    color: #3faefb;
}
.ct-toc { display: block; }
.ct-toc ul { list-style: none; padding-left: 16px; margin: 4px 0; }
.ct-toc > li { margin: 4px 0; }

/* ---- Icon (semantic wrapper for SVG/font-icons) ---- */
.ct-icon {
    display: inline-flex;
    width: 16px; height: 16px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    vertical-align: -0.18em;
    color: currentColor;
}
.ct-icon--lg { width: 22px; height: 22px; }
.ct-icon--xl { width: 32px; height: 32px; }
/* SVG-icon variants are injected via masks in the chrome CSS — placeholder
   class so the sanitiser keeps them alive even when no rules match. */
.ct-icon--svg-check, .ct-icon--svg-shield, .ct-icon--svg-info,
.ct-icon--svg-key, .ct-icon--svg-link, .ct-icon--svg-activity,
.ct-icon--svg-file-check, .ct-icon--svg-server, .ct-icon--svg-arrow {
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}


/* =====================================================================
   DEFENSIVE DEFAULTS — guarantee that any utility class the AI emits
   (Bootstrap/Tailwind-style) renders meaningfully, even if the source
   replica's CSS doesn't define it. Scoped to .ct-main so chrome
   utility usage is unaffected.

   This is the "safety net" that turns AI-emitted bare utility classes
   into presentable layouts. If a replica's source CSS already provides
   the rule, that wins via specificity.
   ===================================================================== */

/* ---- Semantic HTML5 element defaults (when inside main) ---- */
.ct-main section {
    padding: 14px 0;
    margin: 14px 0;
}
.ct-main section + section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #0d0d0d;
}
.ct-main section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ct-main aside {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 16px 18px;
    margin: 12px 0;
}
.ct-main aside + aside { margin-top: 14px; }
.ct-main aside h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6a6a6a;
}
.ct-main aside nav ul,
.ct-main aside > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ct-main aside nav li a {
    display: block;
    padding: 7px 10px;
    color: #eeedec;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}
.ct-main aside nav li a:hover {
    background: #2b2f37;
    color: #3faefb;
    border-left-color: #3faefb;
    text-decoration: none;
}
.ct-main aside > ul > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #0d0d0d;
    font-size: 0.92em;
}
.ct-main aside > ul > li:last-child { border-bottom: 0; }
.ct-main aside > ul > li > span:last-child {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #ffffff;
    font-weight: 600;
}

/* ---- Sidebar-row layout when <aside> + <main> are siblings ---- */
.ct-main > div:has(> aside + main),
.ct-main > div.mx-auto:has(aside) {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    margin: 12px 0;
}
@media (min-width: 900px) {
    .ct-main > div:has(> aside + main),
    .ct-main > div.mx-auto:has(aside),
    .ct-main > div.lg\:flex-row:has(aside) {
        flex-direction: row;
        align-items: flex-start;
    }
    .ct-main > div:has(> aside + main) > aside,
    .ct-main > div.mx-auto:has(aside) > aside,
    .ct-main > div.lg\:flex-row:has(aside) > aside {
        flex: 0 0 250px;
    }
    .ct-main > div:has(> aside + main) > main,
    .ct-main > div.mx-auto:has(aside) > main,
    .ct-main > div.lg\:flex-row:has(aside) > main {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ---- Adjacent <div class="border"> siblings → 2-col grid ---- */
.ct-main section > div:has(> div.border + div.border) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 14px 0;
}
@media (min-width: 640px) {
    .ct-main section > div:has(> div.border + div.border) {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- data-rc-slot panels (server-rendered slots) ----
   Dual selectors keep already-published pages (cached CSS targets the
   legacy data-mitm-slot) styled until they're rebuilt. */
.ct-main [data-rc-slot]:not(span):not(time),
.ct-main [data-mitm-slot]:not(span):not(time) {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-left: 3px solid #3faefb;
    border-radius: 5px;
    padding: 14px 16px;
    margin: 14px 0;
}
.ct-main [data-rc-slot] h3,
.ct-main [data-mitm-slot] h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1rem;
    color: #ffffff;
}
.ct-main [data-rc-slot] > ul,
.ct-main [data-mitm-slot] > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ct-main [data-rc-slot] > ul > li,
.ct-main [data-mitm-slot] > ul > li {
    padding: 8px 0;
    border-bottom: 1px solid #0d0d0d;
}
.ct-main [data-rc-slot] > ul > li:last-child,
.ct-main [data-mitm-slot] > ul > li:last-child { border-bottom: 0; }
.ct-main [data-rc-slot] > ul > li > span:first-child,
.ct-main [data-mitm-slot] > ul > li > span:first-child {
    font-weight: 700;
    color: #ffffff;
    margin-right: 6px;
}

/* ---- Anchor styled as button (a.py-3 / a.btn etc) ---- */
.ct-main a[class*="rounded"],
.ct-main a[class*="py-"][class*="border"],
.ct-main a.btn,
.ct-main a[class*="bg-"][class*="rounded"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.15s, background 0.15s;
}
.ct-main a[class*="text-white"][class*="rounded"] {
    background: #3faefb;
    color: #f2f2f2;
}
.ct-main a[class*="text-white"][class*="rounded"]:hover {
    opacity: 0.92;
    color: #f2f2f2;
    text-decoration: none;
}
.ct-main a[class*="border"][class*="rounded"]:not([class*="bg-"]):not([class*="text-white"]) {
    background: transparent;
    color: #3faefb;
    border: 1px solid #3faefb;
}
.ct-main a[class*="border"][class*="rounded"]:not([class*="bg-"]):not([class*="text-white"]):hover {
    background: #3faefb;
    color: #f2f2f2;
    text-decoration: none;
}

/* ---- Action button row (any flex-wrap container with multiple anchors) ---- */
.ct-main div[class*="flex-wrap"]:has(> a + a),
.ct-main div[class*="gap-"]:has(> a + a) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

/* ---- Bootstrap accordion fallback (used when DH ships .accordion-* HTML) ---- */
.ct-main .accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
}
.ct-main .accordion-item,
.ct-main .accordion > div {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 12px 16px;
}
.ct-main .accordion-item > h3,
.ct-main .accordion > div > h3,
.ct-main .accordion-header {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #ffffff;
    position: relative;
    padding-right: 20px;
}
.ct-main .accordion-item > h3::after,
.ct-main .accordion > div > h3::after,
.ct-main .accordion-header::after {
    content: "+";
    position: absolute;
    right: 0; top: 0;
    color: #3faefb;
    font-weight: 700;
}
.ct-main .accordion-body,
.ct-main .accordion-item > p,
.ct-main .accordion > div > p {
    margin: 0;
    color: #6a6a6a;
    font-size: 0.92em;
    line-height: 1.55;
}

/* ---- Inline-form (verify form pattern: label + input + button on one row) ---- */
.ct-main form:has(input[type="text"] + button),
.ct-main form:has(input[type="search"] + button) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    margin: 14px 0;
}
.ct-main form:has(input + button) > label {
    flex: 1 0 100%;
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}
.ct-main form:has(input + button) > input {
    flex: 1 1 240px;
    margin: 0;
}
.ct-main form:has(input + button) > button {
    flex: 0 0 auto;
}

/* ---- Table rows with data-status (active = highlight) ---- */
.ct-main tr[data-status="active"] td {
    background: color-mix(in oklab, #2e7129 8%, #353a44);
    font-weight: 600;
}
.ct-main tr[data-status="degraded"] td {
    background: color-mix(in oklab, #ebcc66 8%, #353a44);
}
.ct-main tr[data-status="offline"] td {
    background: color-mix(in oklab, #c71422 8%, #353a44);
}

/* ---- "copy" button styling (data-copy attribute or button text) ---- */
.ct-main button[data-copy],
.ct-main [data-copy]:not(a):not(div) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #2b2f37;
    color: #ffffff;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    font-size: 0.78em;
    font-weight: 600;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}
.ct-main button[data-copy]:hover {
    background: #131513;
    color: #ffffff;
}


/* =====================================================================
   UTILITY-CLASS FALLBACKS — covers Bootstrap + Tailwind atomic classes
   the AI may emit. Each fallback applies ONLY inside .ct-main so it
   doesn't fight chrome that uses the source CSS's own utilities.
   ===================================================================== */

/* ---- Display utilities ---- */
.ct-main .d-block, .ct-main .block { display: block; }
.ct-main .d-inline, .ct-main .inline { display: inline; }
.ct-main .d-inline-block, .ct-main .inline-block { display: inline-block; }
.ct-main .d-flex, .ct-main .flex { display: flex; }
.ct-main .d-inline-flex, .ct-main .inline-flex { display: inline-flex; }
.ct-main .d-grid, .ct-main .grid { display: grid; }
.ct-main .d-none, .ct-main .hidden { display: none; }

/* ---- Flex direction + wrap ---- */
.ct-main .flex-row, .ct-main .flex-direction-row { flex-direction: row; }
.ct-main .flex-column, .ct-main .flex-col { flex-direction: column; }
.ct-main .flex-row-reverse { flex-direction: row-reverse; }
.ct-main .flex-column-reverse, .ct-main .flex-col-reverse { flex-direction: column-reverse; }
.ct-main .flex-wrap { flex-wrap: wrap; }
.ct-main .flex-nowrap { flex-wrap: nowrap; }
.ct-main .flex-shrink-0 { flex-shrink: 0; }
.ct-main .flex-grow-1 { flex-grow: 1; }
.ct-main .flex-1 { flex: 1 1 0%; }

/* ---- Responsive flex direction (md+, lg+) ---- */
@media (min-width: 768px) {
    .ct-main .md\:flex-row { flex-direction: row; }
    .ct-main .md\:flex-col, .ct-main .md\:flex-column { flex-direction: column; }
}
@media (min-width: 1024px) {
    .ct-main .lg\:flex-row { flex-direction: row; }
    .ct-main .lg\:flex-col, .ct-main .lg\:flex-column { flex-direction: column; }
}

/* ---- Justify + align ---- */
.ct-main .justify-content-start, .ct-main .justify-start { justify-content: flex-start; }
.ct-main .justify-content-end, .ct-main .justify-end { justify-content: flex-end; }
.ct-main .justify-content-center, .ct-main .justify-center { justify-content: center; }
.ct-main .justify-content-between, .ct-main .justify-between { justify-content: space-between; }
.ct-main .justify-content-around, .ct-main .justify-around { justify-content: space-around; }
.ct-main .justify-content-evenly, .ct-main .justify-evenly { justify-content: space-evenly; }
.ct-main .align-items-start, .ct-main .items-start { align-items: flex-start; }
.ct-main .align-items-end, .ct-main .items-end { align-items: flex-end; }
.ct-main .align-items-center, .ct-main .items-center { align-items: center; }
.ct-main .align-items-baseline, .ct-main .items-baseline { align-items: baseline; }
.ct-main .align-items-stretch, .ct-main .items-stretch { align-items: stretch; }

/* ---- Gap utilities (0.25rem step, 0-5; matches Bootstrap+Tailwind) ---- */
.ct-main .gap-0 { gap: 0; }
.ct-main .gap-1 { gap: 0.25rem; }
.ct-main .gap-2 { gap: 0.5rem; }
.ct-main .gap-3 { gap: 1rem; }
.ct-main .gap-4 { gap: 1.5rem; }
.ct-main .gap-5 { gap: 2rem; }
.ct-main .gap-6 { gap: 2.5rem; }
.ct-main .gap-8 { gap: 3rem; }
/* When `.gap-N` is on a list/non-flex container, force flex so it renders */
.ct-main ul[class*="gap-"],
.ct-main ol[class*="gap-"],
.ct-main dl[class*="gap-"] {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 14px 0;
}

/* ---- Padding ---- */
.ct-main .p-0 { padding: 0; }
.ct-main .p-1 { padding: 0.25rem; }
.ct-main .p-2 { padding: 0.5rem; }
.ct-main .p-3 { padding: 1rem; }
.ct-main .p-4 { padding: 1.5rem; }
.ct-main .p-5 { padding: 2rem; }
.ct-main .p-6 { padding: 2.5rem; }
.ct-main .p-8 { padding: 3rem; }
.ct-main .px-0 { padding-left: 0; padding-right: 0; }
.ct-main .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.ct-main .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.ct-main .px-3 { padding-left: 1rem; padding-right: 1rem; }
.ct-main .px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.ct-main .px-5 { padding-left: 2rem; padding-right: 2rem; }
.ct-main .py-0 { padding-top: 0; padding-bottom: 0; }
.ct-main .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.ct-main .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.ct-main .py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.ct-main .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ct-main .py-5 { padding-top: 2rem; padding-bottom: 2rem; }
.ct-main .pt-1 { padding-top: 0.25rem; } .ct-main .pt-2 { padding-top: 0.5rem; }
.ct-main .pt-3 { padding-top: 1rem; } .ct-main .pt-4 { padding-top: 1.5rem; }
.ct-main .pb-1 { padding-bottom: 0.25rem; } .ct-main .pb-2 { padding-bottom: 0.5rem; }
.ct-main .pb-3 { padding-bottom: 1rem; } .ct-main .pb-4 { padding-bottom: 1.5rem; }
.ct-main .pl-1 { padding-left: 0.25rem; } .ct-main .pl-2 { padding-left: 0.5rem; }
.ct-main .pl-3 { padding-left: 1rem; } .ct-main .pl-4 { padding-left: 1.5rem; }
.ct-main .pr-1 { padding-right: 0.25rem; } .ct-main .pr-2 { padding-right: 0.5rem; }
.ct-main .pr-3 { padding-right: 1rem; } .ct-main .pr-4 { padding-right: 1.5rem; }

/* ---- Margin ---- */
.ct-main .m-0 { margin: 0; }
.ct-main .m-1 { margin: 0.25rem; } .ct-main .m-2 { margin: 0.5rem; }
.ct-main .m-3 { margin: 1rem; } .ct-main .m-4 { margin: 1.5rem; }
.ct-main .mx-auto { margin-left: auto; margin-right: auto; }
.ct-main .my-auto { margin-top: auto; margin-bottom: auto; }
.ct-main .mt-1 { margin-top: 0.25rem; } .ct-main .mt-2 { margin-top: 0.5rem; }
.ct-main .mt-3 { margin-top: 1rem; } .ct-main .mt-4 { margin-top: 1.5rem; }
.ct-main .mt-5 { margin-top: 2rem; } .ct-main .mt-6 { margin-top: 2.5rem; }
.ct-main .mb-1 { margin-bottom: 0.25rem; } .ct-main .mb-2 { margin-bottom: 0.5rem; }
.ct-main .mb-3 { margin-bottom: 1rem; } .ct-main .mb-4 { margin-bottom: 1.5rem; }
.ct-main .mb-5 { margin-bottom: 2rem; } .ct-main .mb-6 { margin-bottom: 2.5rem; }
.ct-main .ml-1 { margin-left: 0.25rem; } .ct-main .ml-2 { margin-left: 0.5rem; }
.ct-main .ml-3 { margin-left: 1rem; } .ct-main .ml-4 { margin-left: 1.5rem; }
.ct-main .mr-1 { margin-right: 0.25rem; } .ct-main .mr-2 { margin-right: 0.5rem; }
.ct-main .mr-3 { margin-right: 1rem; } .ct-main .mr-4 { margin-right: 1.5rem; }

/* ---- Borders ---- */
.ct-main .border { border: 1px solid #0d0d0d; }
.ct-main .border-0 { border: 0; }
.ct-main .border-top { border-top: 1px solid #0d0d0d; }
.ct-main .border-bottom, .ct-main .border-b { border-bottom: 1px solid #0d0d0d; }
.ct-main .border-start, .ct-main .border-l { border-left: 1px solid #0d0d0d; }
.ct-main .border-end, .ct-main .border-r { border-right: 1px solid #0d0d0d; }
.ct-main .border-2 { border-width: 2px; }
.ct-main .border-3 { border-width: 3px; }

/* ---- Border radii ---- */
.ct-main .rounded { border-radius: 5px; }
.ct-main .rounded-0 { border-radius: 0; }
.ct-main .rounded-sm { border-radius: 4px; }
.ct-main .rounded-lg { border-radius: 8px; }
.ct-main .rounded-xl { border-radius: calc(8px * 1.4); }
.ct-main .rounded-2xl { border-radius: calc(8px * 1.8); }
.ct-main .rounded-pill { border-radius: 999px; }
.ct-main .rounded-circle { border-radius: 50%; }

/* ---- Shadows ---- */
.ct-main .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.ct-main .shadow { box-shadow: 0 2px 6px rgba(0,0,0,0.10); }
.ct-main .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.ct-main .shadow-lg { box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.ct-main .shadow-none { box-shadow: none; }

/* ---- Backgrounds ---- */
.ct-main .bg-white { background-color: #ffffff; }
.ct-main .bg-light { background-color: #353a44; }
.ct-main .bg-dark { background-color: #131513; color: #eeedec; }
.ct-main .bg-primary { background-color: #3faefb; color: #f2f2f2; }
.ct-main .bg-secondary { background-color: #2b2f37; color: #ffffff; }
.ct-main .bg-success { background-color: #2e7129; color: #fff; }
.ct-main .bg-warning { background-color: #ebcc66; color: #ffffff; }
.ct-main .bg-danger { background-color: #c71422; color: #fff; }
.ct-main .bg-info { background-color: #3f90fb; color: #fff; }
.ct-main .bg-transparent { background-color: transparent; }

/* ---- Text colors ---- */
.ct-main .text-white { color: #ffffff; }
.ct-main .text-light { color: #6a6a6a; }
.ct-main .text-dark { color: #ffffff; }
.ct-main .text-primary { color: #3faefb; }
.ct-main .text-secondary { color: #6a6a6a; }
.ct-main .text-success { color: #2e7129; }
.ct-main .text-warning { color: #ebcc66; }
.ct-main .text-danger { color: #c71422; }
.ct-main .text-info { color: #3f90fb; }
.ct-main .text-muted { color: #6a6a6a; }

/* ---- Text alignment ---- */
.ct-main .text-center { text-align: center; }
.ct-main .text-start, .ct-main .text-left { text-align: left; }
.ct-main .text-end, .ct-main .text-right { text-align: right; }
.ct-main .text-justify { text-align: justify; }

/* ---- Font weight + style ---- */
.ct-main .fw-normal, .ct-main .font-normal { font-weight: 400; }
.ct-main .fw-medium, .ct-main .font-medium { font-weight: 500; }
.ct-main .fw-semibold, .ct-main .font-semibold { font-weight: 600; }
.ct-main .fw-bold, .ct-main .font-bold { font-weight: 700; }
.ct-main .fw-bolder, .ct-main .font-extrabold { font-weight: 800; }
.ct-main .fst-italic, .ct-main .italic { font-style: italic; }
.ct-main .text-uppercase, .ct-main .uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.ct-main .text-lowercase, .ct-main .lowercase { text-transform: lowercase; }
.ct-main .text-capitalize, .ct-main .capitalize { text-transform: capitalize; }
.ct-main .font-mono { font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* ---- Font sizes (Bootstrap-compat) ---- */
.ct-main .fs-1 { font-size: 2rem; }
.ct-main .fs-2 { font-size: 1.6rem; }
.ct-main .fs-3 { font-size: 1.4rem; }
.ct-main .fs-4 { font-size: 1.2rem; }
.ct-main .fs-5 { font-size: 1.05rem; }
.ct-main .fs-6 { font-size: 0.92rem; }
.ct-main .text-xs { font-size: 0.75rem; }
.ct-main .text-sm { font-size: 0.875rem; }
.ct-main .text-base { font-size: 1rem; }
.ct-main .text-lg { font-size: 1.125rem; }
.ct-main .text-xl { font-size: 1.25rem; }
.ct-main .text-2xl { font-size: 1.5rem; }
.ct-main .text-3xl { font-size: 1.875rem; }

/* ---- Widths ---- */
.ct-main .w-25 { width: 25%; }
.ct-main .w-50 { width: 50%; }
.ct-main .w-75 { width: 75%; }
.ct-main .w-100, .ct-main .w-full { width: 100%; }
.ct-main .h-100, .ct-main .h-full { height: 100%; }
.ct-main .mw-100, .ct-main .max-w-full { max-width: 100%; }
.ct-main .min-w-0 { min-width: 0; }

/* ---- Overflow ---- */
.ct-main .overflow-hidden { overflow: hidden; }
.ct-main .overflow-auto { overflow: auto; }
.ct-main .overflow-x-auto { overflow-x: auto; }
.ct-main .overflow-y-auto { overflow-y: auto; }

/* ---- Bootstrap card + nav + alert + badge (full recipes) ---- */
.ct-main .card {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    margin: 12px 0;
}
.ct-main .card-header {
    padding: 12px 16px;
    background: #2b2f37;
    border-bottom: 1px solid #0d0d0d;
    font-weight: 600;
    color: #ffffff;
}
.ct-main .card-body { padding: 16px; }
.ct-main .card-footer {
    padding: 12px 16px;
    background: #2b2f37;
    border-top: 1px solid #0d0d0d;
}
.ct-main .card-title {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.ct-main .alert {
    padding: 12px 16px;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    margin: 14px 0;
}
.ct-main .alert-primary {
    background: color-mix(in oklab, #3faefb 10%, #353a44);
    border-color: #3faefb;
    color: #ffffff;
}
.ct-main .alert-success {
    background: color-mix(in oklab, #2e7129 10%, #353a44);
    border-color: #2e7129;
    color: #ffffff;
}
.ct-main .alert-warning {
    background: color-mix(in oklab, #ebcc66 10%, #353a44);
    border-color: #ebcc66;
    color: #ffffff;
}
.ct-main .alert-danger {
    background: color-mix(in oklab, #c71422 10%, #353a44);
    border-color: #c71422;
    color: #ffffff;
}
.ct-main .alert-info {
    background: color-mix(in oklab, #3f90fb 10%, #353a44);
    border-color: #3f90fb;
    color: #ffffff;
}

.ct-main .badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 700;
    background: #3faefb;
    color: #f2f2f2;
    line-height: 1.4;
}
.ct-main .badge.rounded-pill, .ct-main .badge-pill { border-radius: 999px; }
.ct-main .badge.bg-primary { background: #3faefb; }
.ct-main .badge.bg-secondary {
    background: #2b2f37; color: #ffffff;
}
.ct-main .badge.bg-success { background: #2e7129; color: #fff; }
.ct-main .badge.bg-warning { background: #ebcc66; color: #ffffff; }
.ct-main .badge.bg-danger { background: #c71422; color: #fff; }
.ct-main .badge.bg-info { background: #3f90fb; color: #fff; }

/* ---- Bootstrap buttons ---- */
.ct-main .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    background: #2b2f37;
    color: #ffffff;
}
.ct-main .btn:hover { opacity: 0.9; text-decoration: none; }
.ct-main .btn-sm { padding: 5px 10px; font-size: 0.85em; }
.ct-main .btn-lg { padding: 12px 20px; font-size: 1.05em; }
.ct-main .btn-primary {
    background: #3faefb; color: #f2f2f2; border-color: #3faefb;
}
.ct-main .btn-secondary {
    background: #2b2f37; color: #ffffff; border-color: #0d0d0d;
}
.ct-main .btn-success { background: #2e7129; color: #fff; border-color: #2e7129; }
.ct-main .btn-danger { background: #c71422; color: #fff; border-color: #c71422; }
.ct-main .btn-warning { background: #ebcc66; color: #ffffff; border-color: #ebcc66; }
.ct-main .btn-outline-primary {
    background: transparent; color: #3faefb; border-color: #3faefb;
}
.ct-main .btn-outline-primary:hover {
    background: #3faefb; color: #f2f2f2;
}
.ct-main .btn-outline-secondary {
    background: transparent; color: #eeedec; border-color: #0d0d0d;
}

/* ---- topic-btn: hero CTA row + onion "Copy" buttons ----
   The static-render hero card (scripts/static_render.py) and the onion
   widgets emit `<a|button class="topic-btn topic-btn-primary|secondary">`.
   Their original styling lives in the Grav/Tailwind theme, which replica
   mode does NOT load — so without these rules they render as bare links /
   unstyled boxes. Style them from the palette here so every replica gets
   a real button. (`topic-btn` is allow-listed and never domain-prefixed,
   so this selector is stable regardless of css-scoper rewrites.) */
.ct-main .topic-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 0.92em; font-weight: 600; line-height: 1.2;
    border-radius: 5px;
    border: 1px solid transparent;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.12s ease;
}
.ct-main .topic-btn-primary {
    background: #3faefb; color: #f2f2f2 !important;
    border-color: #3faefb;
}
.ct-main .topic-btn-primary:hover {
    filter: brightness(1.08); transform: translateY(-1px);
    color: #f2f2f2 !important;
}
.ct-main .topic-btn-secondary {
    background: #353a44; color: #ffffff !important;
    border-color: #0d0d0d;
}
.ct-main .topic-btn-secondary:hover {
    border-color: #3faefb; color: #ffffff !important;
    transform: translateY(-1px);
}
/* The hero CTA row wrapper (may be domain-prefixed, so match by suffix). */
.ct-main [class$="hero-cta-row"] {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; margin: 18px 0 6px;
}

/* ---- onion-primary-card: the hero endpoint card -------------------
   Same story as topic-btn — the static-render hero emits an
   `.onion-primary-card` whose styling lives in the Grav/Tailwind theme
   that replica mode never loads. Without these rules the card is
   unstyled and, worst of all, its inline `.opc-icon` lock SVG renders
   at full natural size (a giant black padlock filling the page). Port
   the theme's card styling here, palette-driven. */
.ct-main .onion-primary-card {
    background: #353a44;
    border: 1px solid #3faefb;
    border-radius: 8px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    margin: 16px 0 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ct-main .opc-topline {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.74rem; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 700;
    color: #3faefb;
}
.ct-main .opc-icon { width: 16px; height: 16px; flex-shrink: 0; }
.ct-main .opc-label { flex: 1; }
.ct-main .onion-url-row {
    display: flex; flex-wrap: wrap; border-radius: 6px;
}
.ct-main .onion-url-addon {
    display: inline-flex; align-items: center; padding: 0 14px;
    border: 1px solid #0d0d0d; border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #2b2f37; color: #6a6a6a;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.82rem;
    white-space: nowrap; user-select: none;
}
.ct-main .onion-url,
.ct-main .onion-url-xl {
    flex: 1 1 auto; min-width: 0; display: block;
    padding: 12px 14px;
    border: 1px solid #0d0d0d;
    background: #2b2f37;
    color: #3faefb; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem; font-weight: 500; text-align: center;
    word-break: break-all; overflow-wrap: anywhere;
    user-select: all; -webkit-user-select: all;
}
.ct-main .onion-url-xl:focus {
    outline: none; border-color: #3faefb;
}
.ct-main .onion-copy-big {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px; min-width: 80px;
    border: 1px solid #3faefb; border-radius: 0 6px 6px 0;
    background: #3faefb; color: #f2f2f2 !important;
    font-size: 0.875rem; font-weight: 600; cursor: pointer;
    text-decoration: none !important;
}
.ct-main .onion-copy-big:hover { filter: brightness(1.08); }
.ct-main .opc-hint {
    text-align: center; font-size: 0.72rem;
    color: #6a6a6a; margin-top: 8px;
}
.ct-main .opc-verified {
    display: block; text-align: center; font-size: 0.72rem;
    color: #6a6a6a; margin-top: 16px;
}
.ct-main .onion-pulse {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #2e7129;
}
.ct-main .opulse-dot {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: currentColor; flex-shrink: 0;
}
@media (max-width: 639px) {
    .ct-main .onion-url-row { flex-direction: column; }
    .ct-main .onion-url-addon {
        border-radius: 6px 6px 0 0; border-right: 1px solid #0d0d0d;
        border-bottom: 0; justify-content: center; padding: 6px 14px;
    }
    .ct-main .onion-url-xl { border-radius: 0; }
    .ct-main .onion-copy-big {
        width: 100%; border-radius: 0 0 6px 6px;
        border-left: 1px solid #3faefb; border-top: 0;
    }
}

/* ---- Bootstrap nav ---- */
.ct-main .nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    gap: 4px;
}
.ct-main .nav-item { list-style: none; }
.ct-main .nav-link {
    display: block;
    padding: 7px 14px;
    color: #eeedec;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.ct-main .nav-link:hover {
    background: #2b2f37;
    color: #3faefb;
    text-decoration: none;
}
.ct-main .nav-link.active {
    background: #3faefb;
    color: #f2f2f2;
}
.ct-main .nav-pills .nav-link { border-radius: 999px; }
.ct-main .nav-tabs {
    border-bottom: 2px solid #0d0d0d;
}
.ct-main .nav-tabs .nav-link {
    border-radius: 4px 4px 0 0;
    margin-bottom: -2px;
}
.ct-main .nav-tabs .nav-link.active {
    background: #353a44;
    color: #ffffff;
    border-bottom: 2px solid #3faefb;
}

/* ---- Position utilities ---- */
.ct-main .position-relative, .ct-main .relative { position: relative; }
.ct-main .position-absolute, .ct-main .absolute { position: absolute; }
.ct-main .position-fixed, .ct-main .fixed { position: fixed; }
.ct-main .position-sticky, .ct-main .sticky { position: sticky; }
.ct-main .top-0 { top: 0; } .ct-main .bottom-0 { bottom: 0; }
.ct-main .start-0, .ct-main .left-0 { left: 0; }
.ct-main .end-0, .ct-main .right-0 { right: 0; }

/* ---- Cursor + select ---- */
.ct-main .cursor-pointer { cursor: pointer; }
.ct-main .user-select-none, .ct-main .select-none { user-select: none; }
.ct-main .pointer-events-none { pointer-events: none; }


/* =====================================================================
   PLACEHOLDER FALLBACKS — guarantee that server-rendered placeholders
   (`{onions}`, `{verify_form}`, `{screenshots}`, `{rates}`,
   `{share_buttons}`, `{breadcrumbs}`, `{verified_status}`,
   `{enter_market}`) always render with full styling, REGARDLESS of
   whether `placeholder_css.build_placeholder_css(prefix)` made it
   through the Tailwind compile pipeline.

   Classes are brand-prefixed at render time (e.g. `blackops-onions`,
   `wethenorth-onion-row`). Tailwind `theme()` calls in placeholder_css
   may not resolve if the per-site config is stale, leaving the
   placeholder fully unstyled. These attribute-suffix selectors hit
   regardless of prefix, so the worst case is the prefixed rules just
   override these with the same value — not a missing-style page.
   ===================================================================== */

/* ---- {onions} verified-access section + mirror table ---- */
.ct-main [class$="-onions"],
.ct-main [class*="-onions "] {
    margin: 18px 0;
    padding: 18px 20px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ct-main [class$="-onions"] table,
.ct-main [class*="-onions "] table {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
    margin: 0;
    background: transparent;
}
.ct-main [class$="-onion-row"] td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #0d0d0d;
}
.ct-main [class$="-onion-row"]:last-child td { border-bottom: 0; }
.ct-main [class$="-onion-row"] td:nth-child(1) {
    white-space: nowrap;
    font-weight: 600;
    color: #ffffff;
}
.ct-main [class$="-onion-row"] td:nth-child(2) {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-all;
}
.ct-main [class$="-onion-row"][data-status="active"] td:nth-child(1),
.ct-main [class$="-onion-row"][data-status="online"] td:nth-child(1) {
    color: #ffffff;
}
.ct-main [class$="-status-dot"] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    background: #6a6a6a;
    box-shadow: 0 0 0 2px color-mix(in oklab, #353a44 80%, transparent);
}
.ct-main [class$="-status-dot"].is-online,
.ct-main .is-online[class$="-status-dot"] { background: #2e7129; }
.ct-main [class$="-status-dot"].is-mirror,
.ct-main .is-mirror[class$="-status-dot"] { background: #ebcc66; }
.ct-main [class$="-status-dot"].is-offline,
.ct-main .is-offline[class$="-status-dot"] { background: #c71422; }
.ct-main [class$="-primary-badge"] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #f2f2f2;
    background: #3faefb;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.5;
}
.ct-main [class$="-onion-url"] {
    color: #50daff;
    text-decoration: none;
    border-bottom: 1px dotted color-mix(in oklab, #50daff 40%, transparent);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    user-select: all;
    word-break: break-all;
    transition: color 0.15s, border-color 0.15s;
}
.ct-main [class$="-onion-url"]:hover {
    color: #3faefb;
    border-bottom-color: #3faefb;
    text-decoration: none;
}
.ct-main [class$="-copy-btn"] {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    font-size: 0.78em;
    font-weight: 600;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: #2b2f37;
    color: #ffffff;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ct-main [class$="-copy-btn"]:hover {
    background: #3faefb;
    color: #f2f2f2;
    border-color: #3faefb;
}
.ct-main [class$="-bluf"] {
    margin: 6px 0 10px;
    padding: 10px 14px;
    font-size: 0.86em;
    line-height: 1.55;
    color: #eeedec;
    background: color-mix(in oklab, #3faefb 4%, #2b2f37);
    border-left: 3px solid #3faefb;
    border-radius: 0 4px 4px 0;
}
.ct-main [class$="-bluf-prose"] {
    background: transparent;
    border-left: 0;
    padding: 4px 0;
    font-size: 0.94em;
}

/* ---- Card-grid mirror presentation ---- */
.ct-main [class$="-mirror-cards"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 18px 0;
    overflow: visible;
}
.ct-main [class$="-mirror-card"] {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ct-main [class$="-mirror-card"]:hover {
    border-color: #3faefb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.ct-main [class$="-mirror-card-head"] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ---- Definition-list mirror presentation ---- */
.ct-main [class$="-mirror-deflist"] dl {
    margin: 14px 0;
    display: grid;
    gap: 10px;
}
.ct-main [class$="-mirror-term"] {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 4px;
}
.ct-main [class$="-mirror-def"] {
    margin: 0 0 6px 0;
    padding: 8px 12px;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
}

/* ---- Prose mirror presentation ---- */
.ct-main [class$="-mirror-prose"] { margin: 14px 0; }

/* ---- {verify_form} PGP verifier — fleet-wide canonical styling.
   `main` ancestor (no `.ct-` requirement) so the form looks right even
   when the AI plants it outside `.ct-main`. `!important` on a few
   critical declarations because AI-emitted Tailwind utility classes
   would otherwise repaint the input/button to the dark default. */
main [class$="-verify-form"]:not([class*="-input"]) {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
    padding: 20px 22px;
    background: #353a44 !important;
    color: #eeedec !important;
    border: 1px solid #0d0d0d !important;
    border-left: 4px solid #3faefb;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    max-width: 720px;
}
main [class$="-verify-form"] > * { min-width: 0; }
main [class$="-verify-label"] {
    font-weight: 700;
    color: #ffffff !important;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    margin: 0 0 2px;
    display: block;
}
main [class$="-verify-input"] {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
    padding: 10px 14px;
    background: #23252e !important;
    color: #eeedec !important;
    border: 1px solid #0d0d0d !important;
    border-radius: 4px;
    outline: 0;
    width: 100%;
    min-height: 0 !important;
    max-height: 2.6em !important;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
main [class$="-verify-input"]::placeholder {
    color: #6a6a6a !important;
    opacity: 0.85;
}
main [class$="-verify-input"]:focus {
    border-color: #3faefb !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, #3faefb 22%, transparent);
}
main [class$="-verify-submit"] {
    align-self: flex-start;
    padding: 10px 22px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f2f2f2 !important;
    background: #3faefb !important;
    border: 1px solid #3faefb !important;
    border-radius: 4px;
    cursor: pointer;
    background-image: none !important;
    padding-bottom: 10px !important;
    transition: opacity 0.15s, transform 0.1s;
}
main [class$="-verify-submit"]:hover { opacity: 0.9; }
main [class$="-verify-submit"]:active { transform: translateY(1px); }
main [class$="-verify-submit"]:disabled { opacity: 0.6; cursor: wait; }
.ct-main [class$="-verify-result"] {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 0.92rem;
    line-height: 1.55;
}
.ct-main [class$="-verify-result"] .verify-ok {
    background: color-mix(in oklab, #2e7129 10%, #353a44);
    border-left: 3px solid #2e7129;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
}
.ct-main [class$="-verify-result"] .verify-bad {
    background: color-mix(in oklab, #c71422 10%, #353a44);
    border-left: 3px solid #c71422;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
}
.ct-main [class$="-verify-result"] code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
    font-size: 0.85em;
}

/* ---- {screenshots} interface preview grid ---- */
.ct-main [class$="-shots"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.ct-main [class$="-shot-thumb"] {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;
}
.ct-main [class$="-shot"] {
    margin: 0;
    border: 1px solid #0d0d0d;
    background: #353a44;
    padding: 8px;
    border-radius: 5px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ct-main [class$="-shot-thumb"]:hover [class$="-shot"] {
    border-color: #3faefb;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.ct-main [class$="-shot"] img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: calc(5px - 2px);
    background: #2b2f37;
}
.ct-main [class$="-shot"] figcaption {
    font-size: 0.82rem;
    margin-top: 8px;
    padding: 0 4px;
    color: #6a6a6a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.ct-main [class$="-shot-zoom"] {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78em;
    color: #3faefb;
    letter-spacing: 0.04em;
}
/* Lightbox modal (CSS-only :target) */
.ct-main [class$="-shot-modal"] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ct-main [class$="-shot-modal"]:target { display: flex; }
.ct-main [class$="-shot-backdrop"] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.86);
    cursor: zoom-out;
}
.ct-main [class$="-shot-modal-inner"] {
    position: relative;
    max-width: min(96vw, 1400px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #23252e;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6);
    overflow: hidden;
}
.ct-main [class$="-shot-modal-inner"] img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 3rem);
    object-fit: contain;
    margin: 0 auto;
    background: #2b2f37;
}
.ct-main [class$="-shot-modal-bar"] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #353a44;
    border-top: 1px solid #0d0d0d;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
}
.ct-main [class$="-shot-modal-caption"] {
    flex: 1;
    color: #6a6a6a;
}
.ct-main [class$="-shot-prev"],
.ct-main [class$="-shot-next"],
.ct-main [class$="-shot-close"] {
    color: #eeedec;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    transition: color 0.15s, border-color 0.15s;
}
.ct-main [class$="-shot-prev"]:hover,
.ct-main [class$="-shot-next"]:hover,
.ct-main [class$="-shot-close"]:hover {
    color: #3faefb;
    border-color: #3faefb;
}

/* ---- {rates} crypto-rate widget ---- */
.ct-main [class$="-rates"] {
    display: inline-block;
    min-width: 14rem;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    background: #353a44;
    font-size: 0.86rem;
    margin: 8px 0;
}
.ct-main [class$="-rate"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid #0d0d0d;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.ct-main [class$="-rate"]:last-child { border-bottom: 0; }
.ct-main [class$="-rate"] strong { color: #ffffff; font-weight: 700; }

/* ---- {share_buttons} ---- */
.ct-main [class$="-share-row"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}
.ct-main [class$="-share-btn"] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.78em;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    border: 1px solid #0d0d0d;
    background: #353a44;
    color: #eeedec;
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ct-main [class$="-share-btn"]:hover {
    color: #f2f2f2;
    background: #3faefb;
    border-color: #3faefb;
}

/* ---- {breadcrumbs} ---- */
.ct-main [class$="-breadcrumbs"] {
    font-size: 0.85rem;
    margin: 8px 0 14px;
    color: #6a6a6a;
}
.ct-main [class$="-breadcrumbs"] a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.ct-main [class$="-breadcrumbs"] a:hover {
    color: #3faefb;
    border-bottom-color: #3faefb;
}
.ct-main [class$="-breadcrumbs"] .sep {
    margin: 0 6px;
    color: #6a6a6a;
}

/* ---- {verified_status} live status pill ---- */
.ct-main [class$="-verified-status"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px;
    margin: 6px 0;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: #6a6a6a;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 12px;
    white-space: nowrap;
}
.ct-main [class$="-verified-status"]::before {
    content: "●";
    color: #2e7129;
    font-size: 0.7rem;
    animation: ct-status-pulse 2s ease-in-out infinite;
}
.ct-main [class$="-verified-status"] time { color: #ffffff; }
.ct-main [class$="-verified-state"] {
    color: #2e7129;
    font-weight: 700;
}
.ct-main [class$="-verified-state"][data-state="DEGRADED"],
.ct-main [class$="-verified-state"][data-state="CHECKING"] {
    color: #ebcc66;
}
.ct-main [class$="-verified-state"][data-state="OFFLINE"] {
    color: #c71422;
}
@keyframes ct-status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ---- {enter_market} CTA ---- */
.ct-main [class$="-enter-market"] {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    background: #3faefb;
    color: #f2f2f2;
    border: 1px solid #3faefb;
    border-radius: 5px;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
}
.ct-main [class$="-enter-market"]::before {
    content: "→";
    margin-right: 8px;
    font-weight: 800;
}
.ct-main [class$="-enter-market"]:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.ct-main [class$="-enter-market"]:active { transform: translateY(0); }

/* ---- Replica chrome eyebrow (slim brand-breadcrumb between chrome
   and AI body — used in place of a duplicate page-title heading) ---- */
[class$="-eyebrow"] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #6a6a6a;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
    padding: 6px 0;
    line-height: 1.4;
}
[class$="-eyebrow"] strong,
[class$="-eyebrow"] .page,
[class$="-eyebrow"] .text-dark,
[class$="-eyebrow"] .text-gray-200,
[class$="-eyebrow"] .text-gray-300,
[class$="-eyebrow"] .text-slate-200 {
    color: #ffffff;
    font-weight: 700;
}
[class$="-eyebrow"] .brand,
[class$="-eyebrow"] > span:first-child:not(.page) {
    color: #3faefb;
    font-weight: 700;
}

/* ---- {disclaimer} ---- */
.ct-main [class$="-disclaimer"] {
    margin: 20px 0;
    padding: 12px 16px;
    border-top: 1px solid #0d0d0d;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #6a6a6a;
}
.ct-main [class$="-disclaimer"] strong { color: #eeedec; }
.ct-main [class$="-disclaimer"] em {
    color: #3faefb;
    font-style: normal;
}

/* =====================================================================
   ATTRIBUTE-BASED FALLBACKS — placeholder-emitted markup that lost
   its class= attributes to the sanitizer in earlier builds. These
   target data-* attrs that survive sanitization, so the verified-
   access cards, copy buttons, mirror grids and screenshot galleries
   render with full styling even when the legacy classes are gone.
   ===================================================================== */

/* Verified-access cards: container holding multiple
   <article data-mirror-idx="N"> children. Grid them out and style
   each as a proper card. Works for ANY parent of mirror articles. */
.ct-main *:has(> article[data-mirror-idx]),
.ct-main *:has(> * > article[data-mirror-idx]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.ct-main article[data-mirror-idx] {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 160ms ease, transform 160ms ease;
}
.ct-main article[data-mirror-idx]:hover {
    border-color: #3faefb;
    transform: translateY(-1px);
}
.ct-main article[data-mirror-idx] > a {
    display: block;
    background: #131513;
    color: #eeedec;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #0d0d0d;
    word-break: break-all;
    overflow-wrap: anywhere;
    text-decoration: none;
    font-weight: 500;
}
.ct-main article[data-mirror-idx] > a:hover {
    border-color: #3faefb;
    color: #3faefb;
}
.ct-main article[data-mirror-idx] > p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #6a6a6a;
}
.ct-main article[data-mirror-idx] > button[data-copy] {
    align-self: flex-start;
    background: transparent;
    color: #ffffff;
    border: 1px solid #0d0d0d;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 140ms ease;
}
.ct-main article[data-mirror-idx] > button[data-copy]:hover {
    border-color: #3faefb;
    color: #3faefb;
}

/* Highlight the primary mirror (idx=N where label/title contains "main"
   or where the AI's paragraph mentions "(primary)" / "primary endpoint"). */
.ct-main article[data-mirror-idx="0"] {
    border-color: #3faefb;
    border-left-width: 3px;
}

/* Interface preview gallery — figure+img+figcaption sequences inside
   AI-emitted screenshot containers. The AI emits multiple <figure>
   children inside an outer div with no class; we detect via :has(). */
.ct-main *:has(> a > figure):not(html):not(body),
.ct-main *:has(> figure > img) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.ct-main figure:has(> img) {
    margin: 0;
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.ct-main figure:has(> img):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.ct-main figure > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
}
.ct-main figure > figcaption {
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6a6a6a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-top: 1px solid #0d0d0d;
    background: #2b2f37;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ct-main figure > figcaption span[aria-hidden] {
    color: #3faefb;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Click-to-zoom modal — the AI emits role="dialog" containers with
   :target activation. Style consistently across all replicas. */
.ct-main [role="dialog"] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,20,25,0.86);
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}
.ct-main [role="dialog"]:target {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-main [role="dialog"] > div {
    position: relative;
    max-width: min(1100px, 95vw);
    background: #353a44;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.ct-main [role="dialog"] > div > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    background: #131513;
}
.ct-main [role="dialog"] > div > div:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #2b2f37;
    border-top: 1px solid #0d0d0d;
    font-size: 0.84rem;
}
.ct-main [role="dialog"] > div > div:last-child a {
    color: #3faefb;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #0d0d0d;
    font-weight: 600;
}
.ct-main [role="dialog"] > div > div:last-child a:hover {
    background: #353a44;
    border-color: #3faefb;
}

/* Verifier widget — the AI emits <section id="verifier"> with a
   container and a checklist. Style the inner card. */
.ct-main section[id*="verif"],
.ct-main section[id*="signat"] {
    margin: 32px 0;
}
.ct-main section[id*="verif"] > div,
.ct-main section[id*="signat"] > div {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-left: 3px solid #3faefb;
    border-radius: 5px;
    padding: 24px 26px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.ct-main section[id*="verif"] > div > div > h2,
.ct-main section[id*="signat"] > div > div > h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.25rem;
    color: #ffffff;
}
.ct-main section[id*="verif"] ul,
.ct-main section[id*="signat"] ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ct-main section[id*="verif"] li,
.ct-main section[id*="signat"] li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: #2b2f37;
    border-radius: 4px;
    border: 1px solid #0d0d0d;
    font-size: 0.9rem;
    line-height: 1.5;
}
.ct-main .text-success,
.ct-main [class*="text-success"] {
    color: #16a34a;
    font-weight: 700;
}
.ct-main .text-danger,
.ct-main [class*="text-danger"] {
    color: #dc2626;
    font-weight: 700;
}

/* Verify FORM (when AI actually emits a form with input) — separate
   from the read-only verifier widget above. */
.ct-main form[action*="verify"],
.ct-main form:has(textarea[name*="onion"]),
.ct-main form:has(input[name*="onion"]) {
    background: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 5px;
    padding: 22px 24px;
    margin: 20px 0;
    display: grid;
    gap: 14px;
}
.ct-main form[action*="verify"] textarea,
.ct-main form[action*="verify"] input[type="text"],
.ct-main form[action*="verify"] input[type="url"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88rem;
    background: #131513;
    color: #eeedec;
    box-sizing: border-box;
    min-height: 100px;
    resize: vertical;
}
.ct-main form[action*="verify"] button,
.ct-main form[action*="verify"] input[type="submit"] {
    background: #3faefb;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    justify-self: start;
    letter-spacing: 0.04em;
}
.ct-main form[action*="verify"] button:hover {
    filter: brightness(1.05);
}

/* Primary access strip — the AI emits <div class="p-4 border flex flex-wrap gap-4">
   with "Primary Routing Node:" label + .onion url. Frame as a strip.
   CRITICAL: when we put a dark `surface_deep` background on a `<p>`, the
   prose color MUST flip to a light inverse — otherwise every paragraph
   containing an inline onion link renders as dark-on-dark (invisible
   text outside the link). */
.ct-main p:has(> a[href*=".onion"]) {
    background: #131513;
    color: #353a44;
    border: 1px solid #0d0d0d;
    border-radius: 4px;
    padding: 10px 14px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    margin: 12px 0;
    overflow-wrap: anywhere;
}
.ct-main p:has(> a[href*=".onion"]) a,
.ct-main p:has(> a[href*=".onion"]) [class*="-onion-inline"],
.ct-main p:has(> a[href*=".onion"]) [class*="-onion-url"] {
    color: #3faefb;
}
.ct-main p:has(> a[href*=".onion"]) strong,
.ct-main p:has(> a[href*=".onion"]) b,
.ct-main p:has(> a[href*=".onion"]) em,
.ct-main p:has(> a[href*=".onion"]) code {
    color: #353a44;
}

/* Hero-CTA defensive default — every replica framework ships a
   `.<prefix>-main a { color: ... }` rule with specificity (0,1,1)
   that overrides the (0,1,0) `.ct-hero__cta { color }` from this
   bundle. When the link color happens to equal `primary` (the CTA's
   background), the CTA reads as primary-on-primary (invisible text).
   Use a higher-specificity (0,2,1) `.ct-main a.ct-hero__cta` selector
   so the CTA's primary_text color always wins, fleet-wide. */
.ct-main a.ct-hero__cta,
.ct-main a.ct-hero__cta:hover,
.ct-main a.ct-hero__cta:focus,
.ct-main a.ct-hero__cta:active,
.ct-main a.ct-hero__cta:visited,
.ct-main .ct-cta-bar > a,
.ct-main .ct-cta-bar > a:hover,
.ct-main .ct-cta-bar > a:focus,
.ct-main .ct-cta-bar > a:active,
.ct-main .ct-cta-bar > a:visited {
    color: #f2f2f2 !important;
}
.ct-main a.ct-hero__cta--ghost,
.ct-main a.ct-hero__cta--ghost:hover,
.ct-main a.ct-hero__cta--ghost:focus {
    background: transparent !important;
    color: #3faefb !important;
    border: 1px solid #3faefb;
}

/* =====================================================================
   MOBILE RESPONSIVE OVERRIDES
   --------------------------------------------------------------------
   Below ~600px (mobile portrait) reflow the AI-content widgets that
   are otherwise built for desktop. These hit every replica via
   prefix-agnostic [class$="..."] selectors.
   ===================================================================== */
@media (max-width: 600px) {
  /* Verified-access table: collapse to stacked rows so the URL column
     does not require horizontal scrolling. */
  .ct-main [class$="-onions"],
  .ct-main [class*="-onions "] {
    padding: 12px 12px;
    overflow-x: visible;
  }
  .ct-main [class$="-onions"] table,
  .ct-main [class*="-onions "] table {
    min-width: 0;
    display: block;
  }
  .ct-main [class$="-onions"] tbody,
  .ct-main [class*="-onions "] tbody { display: block; }
  .ct-main [class$="-onion-row"],
  .ct-main [class$="-onion-bluf"] {
    display: block;
    width: 100%;
  }
  .ct-main [class$="-onion-row"] td {
    display: block;
    width: 100%;
    padding: 6px 0;
    border-bottom: 0;
  }
  .ct-main [class$="-onion-row"] td:nth-child(1) {
    padding-top: 10px;
    white-space: normal;
  }
  .ct-main [class$="-onion-row"] td:nth-child(2) {
    padding-left: 14px;
    border-left: 2px solid #0d0d0d;
  }
  .ct-main [class$="-onion-row"] td:nth-child(3) {
    padding-bottom: 10px;
    text-align: left;
  }
  .ct-main [class$="-onion-bluf"] td {
    padding: 4px 0 12px;
    border-bottom: 1px solid #0d0d0d;
  }
  .ct-main [class$="-onion-row"]:last-of-type td { border-bottom: 0; }

  /* Force onion URLs to break inside the word — long .onion strings
     would otherwise blow out the column on a 375px viewport. */
  .ct-main [class$="-onion-url"] {
    overflow-wrap: anywhere;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
    font-size: 0.82em;
    line-height: 1.45;
  }

  /* Mirror-card grid → single column (auto-fit already does this at
     280px min, but force it for safety on devices that round oddly). */
  .ct-main [class$="-mirror-cards"] {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ct-main [class$="-mirror-card"] { padding: 12px 14px; }

  /* Verify form: shrink padding so it fits a 375px viewport without
     hugging the page edge. */
  .ct-main [class$="-verify-form"] {
    padding: 14px 14px;
  }
  .ct-main [class$="-verify-input"] {
    min-height: 110px;
    font-size: 0.86em;
  }

  /* Shot grid: stack screenshots vertically below 600px. */
  .ct-main [class$="-shots"] {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Eyebrow / breadcrumbs may wrap onto a second line on narrow
     viewports — allow it and lighten letter-spacing. */
  [class$="-eyebrow"],
  .ct-main [class$="-breadcrumbs"] {
    flex-wrap: wrap;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
  }

  /* Stat strips collapse to vertical stack. */
  .ct-main [class$="-rates"] {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Section headings: reduce h2/h3 size so they fit the column. */
  .ct-main h2 { font-size: 1.35rem; line-height: 1.25; }
  .ct-main h3 { font-size: 1.1rem; line-height: 1.3; }

  /* Back-to-top PNG: shrink slightly + clear the right gutter. */
  .ct-to-top {
    width: 36px;
    height: 36px;
    right: 12px;
    bottom: 12px;
  }
  .ct-to-top img { width: 36px; height: 36px; }

  /* === Universal content overflow defense ===
     Long .onion URLs in plain <a>, <code>, <pre> or any .ct-* element
     would otherwise stretch parent containers past viewport. Force
     word-breaking everywhere inside the main content area. */
  .ct-main a,
  .ct-main code,
  .ct-main pre,
  .ct-main kbd,
  .ct-main samp,
  .ct-main [class*="onion"],
  .ct-main [class*="-url"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100%;
  }
  .ct-main pre {
    overflow-x: auto;
    white-space: pre-wrap;
  }

  /* .ct-onion-card variants: AI emits these as content cards holding
     a long .onion URL. Force the <code> child to wrap. */
  .ct-main .ct-onion-card,
  .ct-main .ct-primary-endpoint {
    max-width: 100%;
    min-width: 0;
  }
  .ct-main .ct-onion-card__url {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Hero copy / verified strip / actions — make them shrink to fit.
     Some replica chromes use a non-`.ct-main` wrapper (e.g. prime emits
     `<main class="prime-main-col">` outside `.ct-main`); broaden the
     scope to ANY ancestor that ends in `-main-col` or `-main` so the
     rule lands regardless of the chrome's wrapper class. */
  .ct-hero,
  .ct-hero__main,
  .ct-hero__content,
  .ct-hero__lede,
  .ct-hero__actions,
  .ct-hero__aside,
  .ct-hero__grid,
  .ct-hero__title,
  .ct-verified-strip,
  .ct-onion-card,
  .ct-primary-endpoint,
  .ct-cta-bar,
  .ct-cta-bar__title,
  .ct-cta-bar__text {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Inline onion URLs inside flowing copy don't break on character;
     force them to break-anywhere so a 56-char onion address fits a
     375px viewport. */
  [class*="-onion-inline"],
  [class*="-onion-url"] {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    max-width: 100% !important;
    width: auto !important;
    display: inline !important;
  }
  /* CTA bar columns sometimes compute their grid track to max-content
     because a child onion URL has no break opportunity; force the
     title/text columns to 100% of their (now wrap-shrunk) grid track. */
  .ct-cta-bar__title,
  .ct-cta-bar__text {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ct-hero__actions { flex-wrap: wrap; gap: 8px; }
  /* Long .onion / hash strings inside hero title or verified-status
     pills don't break on character without an explicit hint. */
  .ct-hero__title,
  [class$="-verified-status"],
  [class$="-verified-status"] strong,
  [class$="-verified-status"] time {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* The verified-status pill defaults to `white-space: nowrap` for the
     desktop one-liner aesthetic; on mobile that overflows the viewport.
     Allow it to wrap and re-flow flexibly. */
  [class$="-verified-status"] {
    white-space: normal !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  /* TorZon dashboard column — `.torzon-main-col` is flex:1 1 auto with
     min-width:0, but children with min-content larger than viewport
     can still stretch it. Belt-and-suspenders cap. */
  .torzon-main-col,
  .torzon-side,
  .torzon-main-col .block,
  .torzon-stats,
  .torzon-stats .stat,
  .torzon-stats .stat-val,
  .torzon-stats .stat-label {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .torzon-row { overflow-x: hidden; }
  .torzon-main-col {
    overflow-x: hidden;
    word-wrap: break-word;
  }

  /* Markdown content paragraphs / list items — break long URLs inline. */
  .ct-main p,
  .ct-main li,
  .ct-main td,
  .ct-main dd {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Images cannot exceed their container — AI commonly emits banners
     with natural-width attributes that blow past 375px. */
  .ct-main img,
  .ct-main video,
  .ct-main iframe,
  .ct-main svg,
  .ct-main canvas,
  .ct-main picture {
    max-width: 100%;
    height: auto;
  }

  /* Final defense — clip horizontal overflow at the page level so AI
     content that escapes its container doesn't trigger viewport scroll.
     Content inside still wraps via the rules above; this just prevents
     the page from horizontally scrolling. */
  html, body, .ct-page {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .ct-main {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* `.ct-stat__value` and `.ct-stat__label` inside `.ct-stats` — the AI
     wraps them in containers that don't always force single-column on
     mobile. Cap them to 100% so the value/label spans don't push out. */
  .ct-main .ct-stat,
  .ct-main .ct-stat__value,
  .ct-main .ct-stat__label,
  .ct-main .ct-stats,
  .ct-main .ct-stats > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}


/* ===== darkmatter.framework.css (full hand-written market framework) ===== */
/* =====================================================================
   DARK MATTER REPLICA FRAMEWORK
   ---------------------------------------------------------------------
   Hand-written, no Tailwind, no dependencies. Mirrors the Catharsis
   framework's 32-section structure and full `.ct-*` class vocabulary
   so the AI prompt's component allowlist works unchanged — only the
   design tokens and a few component recipes shift to match real Dark
   Matter's austere/utilitarian dark-mode aesthetic.

   Real DM design DNA (from real-css/darkmatter.html + darkmatter.css):
       Page bg   #23252e   slate
       Surface   #353944   card / button base
       Footer    #181b20   deep slate
       Text      #eeedec   near-white body
       Muted     #6a6a6a   secondary
       Primary   #3f90fb   blue accent (buttons, links, focus)
       Link      #50a5ff   slightly lighter cyan-blue
       Danger    #c71422   red
       Borders   #000      1px black — defining feature
       NO gradients. NO glow. NO blur. NO decorative pseudo-elements.
       Minimal soft-black drop shadows only.

   Organization mirrors Catharsis exactly (see that file for section
   intent). Class names are identical so framework_vocab parity holds.
   ===================================================================== */


/* =====================================================================
   01 — Design tokens
   ===================================================================== */

:root {
    color-scheme: dark;

    /* Backgrounds (OKLCH triples) */
    --light-background: 23% 0.01 270;       /* #2b2e37 — input / table-even */
    --background:       21% 0.01 270;       /* #23252e — page */
    --dark-background:  17% 0.01 270;       /* #1b1d24 — nav active */
    --xdark-background: 16% 0.01 270;       /* #181b20 — footer */

    /* Card surface (RGB triple consumed via rgba()) */
    --card-bg: 53 57 68;                     /* #353944 — card / button base */

    /* Borders — DM uses pure black 1px everywhere */
    --light-border: 0 0 0;                   /* #000 */
    --border:       0 0 0;                   /* #000 */
    --dark-border:  0 0 0;                   /* #000 */

    /* Text — real DM uses #eeedec (93%) for body and #6a6a6a (46%)
       for truly muted. Bumped --lighter-text from 78% → 87% so prose
       text reads cleanly on the dark slate bg (was muddy before). */
    --lightest-text: 56% 0 0;                /* slightly brighter "muted" */
    --light-text:    72% 0 0;                /* secondary */
    --lighter-text:  87% 0 0;                /* paragraph — readable contrast */
    --def-text:      93% 0 0;                /* #eeedec — body */
    --title-text:    98% 0 0;                /* near-white headings */
    --icons:         0.87 0 0;

    /* Brand blues (replaces Catharsis green) */
    --primary:        0.63 0.17 250;         /* #3f90fb */
    --secondary:      0.55 0.20 255;         /* #2777ff */
    --green-text:     0.69 0.15 245;         /* #50a5ff — "link" color */
    --green-bg:       26% 0.04 250;          /* dark blue tint surface */
    --amount-bg:      26% 0.04 250;
    --amount-border:  0.63 0.17 250;         /* same as primary */

    /* Status colors */
    --warning-bg:     22% 0.04 70;           /* dark amber tint */
    --warning-border: 76% 0.14 70;
    --warning-text:   77% 0.14 70;
    --error-bg:       22% 0.07 25;           /* deep red surface */
    --error-border:   60% 0.21 28;
    --error-text:     72% 0.18 28;
    --success-bg:     22% 0.06 145;
    --success-border: 56% 0.16 145;
    --success-text:   66% 0.14 145;          /* #2e7129 / lightened */
    --important-bg:     22% 0.07 25;
    --important-border: 60% 0.21 28;
    --info-bg:        22% 0.04 250;
    --status-bg:      24% 0.05 250;
    --status-border:  0.55 0.20 255;
    --status-text:    0.69 0.15 245;

    /* Radii — match real DM (small, square-ish) */
    --ct-radius-sm:  4px;
    --ct-radius-md:  5px;
    --ct-radius-lg:  6px;
    --ct-radius-xl:  8px;
    --ct-radius-2xl: 10px;

    /* Shadows — DM uses only soft black drops, NO neon/glow */
    --ct-shadow-xs:     0 1px 1px rgb(0 0 0 / 0.6);
    --ct-shadow-sm:     0 1px 2px rgb(0 0 0 / 0.5);
    --ct-shadow-card:   0 1px 3px rgb(0 0 0 / 0.45);
    --ct-shadow-lift:   0 2px 6px rgb(0 0 0 / 0.55);
    --ct-shadow-pop:    0 6px 16px rgb(0 0 0 / 0.6);
    --ct-shadow-accent: 0 0 0 1px oklch(var(--primary) / 0.4);

    /* Focus ring — blue, no glow */
    --ct-ring-color: oklch(var(--primary) / 0.55);
    --ct-ring-width: 2px;
    --ct-focus-ring: 0 0 0 var(--ct-ring-width) var(--ct-ring-color);

    /* Motion — match real DM's sparse animations */
    --ct-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ct-dur-fast: 120ms;
    --ct-dur:      180ms;
    --ct-dur-slow: 280ms;

    /* Layout */
    --ct-container:        1280px;
    --ct-container-narrow: 880px;
    --ct-container-wide:   1440px;
    --ct-header-h:         40px;             /* real DM h-10 = 40px */

    /* Type stacks — system defaults, like real DM */
    --ct-font-sans:  system-ui, -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial,
                     "Noto Sans", sans-serif, "Apple Color Emoji",
                     "Segoe UI Emoji";
    --ct-font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco,
                     Consolas, "Liberation Mono", "Courier New", monospace;
}


/* =====================================================================
   02 — Reset
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
input, select, textarea, button { font: inherit; color: inherit; }
[hidden] { display: none !important; }


/* =====================================================================
   03 — Base typography
   ===================================================================== */

html, body {
    background: oklch(var(--background));
    color: oklch(var(--def-text));
}
body {
    font-family: var(--ct-font-sans);
    font-size: 15px;                         /* real DM uses 15px body */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: oklch(var(--green-text));         /* #50a5ff link blue */
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--ct-dur-fast) var(--ct-ease-out);
}
a:hover {
    color: oklch(var(--primary));
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1.5em 0 0.6em;
    color: oklch(var(--title-text));
    font-weight: 700;                        /* real DM uses 700 for all headings */
    letter-spacing: normal;
    text-wrap: balance;
}
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
h1 { font-size: 1.5rem;    line-height: 2rem;     margin-bottom: 1.5rem; }
h2 { font-size: 1.25rem;   line-height: 1.75rem;  margin-bottom: 1rem; }
h3 { font-size: 1.125rem;  line-height: 1.75rem; }
h4 { font-size: 1rem;      line-height: 1.5rem; }
h5 { font-size: 0.9375rem; line-height: 1.375rem; }
h6 { font-size: 0.875rem;  line-height: 1.25rem;
     color: oklch(var(--lightest-text)); }

p { margin: 0 0 1.1em; }
strong, b { color: oklch(var(--title-text)); font-weight: 700; }
em, i { font-style: italic; }
small { font-size: 0.85em; color: oklch(var(--lighter-text)); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.5em; }
li { margin: 0.4em 0; }
li::marker { color: oklch(var(--primary)); }
ul ul, ul ol, ol ul, ol ol { margin: 0.3em 0; }

dl { margin: 1em 0; }
dt { font-weight: 700; color: oklch(var(--title-text)); margin-top: 0.7em; }
dd { margin: 0.2em 0 0.6em 1.2em; color: oklch(var(--lighter-text)); }


/* =====================================================================
   04 — Base elements (code/pre/kbd/blockquote/table/details/hr/figure)
   ===================================================================== */

blockquote {
    margin: 1.4em 0;
    padding: 0.9em 1.4em;
    border-left: 3px solid oklch(var(--primary));
    background: oklch(var(--light-background));
    color: oklch(var(--lighter-text));
    border-radius: 0 var(--ct-radius-sm) var(--ct-radius-sm) 0;
}
blockquote p:last-child { margin-bottom: 0; }

code {
    background: oklch(var(--dark-background));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--def-text));
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--ct-font-mono);
    font-size: 0.88em;
    font-feature-settings: "tnum", "zero";
    word-break: break-word;
}
pre {
    background: oklch(var(--xdark-background));   /* #131513-like */
    border: 1px solid oklch(var(--border));
    color: oklch(var(--def-text));
    padding: 16px 20px;
    border-radius: var(--ct-radius-md);
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.6;
    margin: 1.2em 0;
    font-family: var(--ct-font-mono);
    font-feature-settings: "tnum", "zero";
}
pre code { background: transparent; border: 0; padding: 0; font-size: 1em; }
kbd {
    background: oklch(var(--title-text));
    color: oklch(var(--background));
    padding: 2px 7px; border-radius: 4px;
    font-family: var(--ct-font-mono); font-size: 0.78em;
    font-weight: 700;
}

hr { border: 0; border-top: 1px solid oklch(var(--border)); margin: 2.5em 0; }

figure { margin: 1.5em 0; text-align: center; }
figure img {
    margin: 0 auto;
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
}
figcaption {
    font-size: 0.85em;
    color: oklch(var(--lighter-text));
    margin-top: 0.5em;
    font-style: italic;
}

table {
    width: 100%; border-collapse: collapse; margin: 1.4em 0;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    overflow: hidden; font-size: 0.95em;
}
thead { background: oklch(var(--light-background)); }
th, td {
    padding: 11px 14px;
    border-bottom: 1px solid oklch(var(--border));
    text-align: left; vertical-align: top;
    color: oklch(var(--def-text));
}
th {
    font-weight: 700;
    color: oklch(var(--title-text));
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: oklch(var(--dark-background) / 0.6); }

details {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 14px 18px; margin: 8px 0;
}
details + details { margin-top: 6px; }
summary {
    cursor: pointer; font-weight: 700;
    color: oklch(var(--title-text)); outline: none;
}
summary:hover { color: oklch(var(--primary)); }
details > *:not(summary) { margin-top: 10px; }


/* =====================================================================
   05 — Base forms
   ===================================================================== */

input, select, textarea {
    width: 100%;
    padding: 6px 10px;
    background: oklch(var(--light-background));
    color: oklch(var(--def-text));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-size: 0.9375rem;
    line-height: 1.375rem;
    box-shadow: var(--ct-shadow-xs);
    transition: border-color var(--ct-dur) var(--ct-ease-out),
                box-shadow var(--ct-dur) var(--ct-ease-out);
}
input::placeholder, textarea::placeholder {
    color: oklch(var(--lightest-text));
    opacity: 1;
}
input:hover, select:hover, textarea:hover {
    border-color: oklch(var(--lightest-text) / 0.55);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: oklch(var(--primary));
    box-shadow: var(--ct-focus-ring);
}
input[type="checkbox"], input[type="radio"] {
    width: auto; margin-right: 6px;
    accent-color: oklch(var(--primary));
}
textarea { resize: vertical; min-height: 6em; }
label {
    display: inline-block; font-weight: 700;
    color: oklch(var(--def-text)); margin-bottom: 4px;
    font-size: 0.88em;
}

button, input[type="submit"], input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: oklch(var(--primary));
    color: white;
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 6px 14px;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    text-align: center;
    box-shadow: var(--ct-shadow-sm);
    transition: background var(--ct-dur) var(--ct-ease-out);
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background: oklch(var(--secondary));
    color: white;
}
button:focus-visible, input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: var(--ct-focus-ring);
}
button:disabled, input[type="submit"]:disabled {
    opacity: 0.55; cursor: not-allowed;
}


/* =====================================================================
   06 — Page shell
   ===================================================================== */

.ct-page {
    background: oklch(var(--background));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: oklch(var(--def-text));
}

.ct-main {
    flex-grow: 1;
    width: 100%;
    max-width: var(--ct-container);
    margin: 0 auto;
    padding: 24px 16px 48px;
}
@media (max-width: 640px) {
    .ct-main { padding: 20px 12px 32px; }
}

.ct-surface {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-lg);
    padding: 24px;
    color: oklch(var(--def-text));
    font-size: 1rem;
    line-height: 1.65;
    box-shadow: var(--ct-shadow-sm);
}
.ct-surface--quiet {
    background: oklch(var(--light-background));
    box-shadow: none;
}
@media (max-width: 640px) {
    .ct-surface { padding: 16px; }
}


/* =====================================================================
   07 — Chrome — header (SINGLE-ROW, real-DM-style)
   ---------------------------------------------------------------------
   Real Dark Matter has ONE 40px row: small icon+text nav-items at left
   (Market / News / FAQ / search-toggle), brand text centered, small
   icon+text links at right (Sign In / Sign Up). No language dropdown,
   no CTA button, no announcement strip, no sub-nav row. We mirror that.
   ===================================================================== */

.ct-header {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    background: oklch(var(--background));
    border-bottom: 1px solid oklch(var(--border));
    /* No blur — real DM is flat */
}
.ct-header__top {
    width: 100%;
}
.ct-header__bar {
    max-width: var(--ct-container);
    margin: 0 auto;
    padding: 0 16px;
    height: var(--ct-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}
.ct-header__left {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

/* Brand — absolutely centered like real DM's table center col */
.ct-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: oklch(var(--title-text));
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    flex-shrink: 0;
    z-index: 1;
    background: oklch(var(--background));
    padding: 0 12px;
    transition: color var(--ct-dur-fast) var(--ct-ease-out);
}
.ct-brand:hover {
    color: oklch(var(--green-text));
    text-decoration: none;
}
.ct-brand-mark {
    width: 22px; height: 22px;
    display: inline-block;
    flex-shrink: 0;
    color: oklch(var(--def-text));
}
.ct-brand-mark svg,
.ct-brand-mark img,
.ct-brand-mark__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.ct-brand:hover .ct-brand-mark { color: oklch(var(--primary)); }
.ct-brand__name {
    font-size: 1rem;
    letter-spacing: -0.005em;
    font-weight: 700;
}

/* Right cluster — small icon+text links, like real DM's Sign In/Sign Up */
.ct-header__right {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

/* Section nav inside row 1 — real DM nav-item style: small icon + text,
   tight padding, hover bg change, no underline animation. */
.ct-header__sub {
    display: contents;        /* fold contents into the parent grid */
}
.ct-header__sub-bar {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.ct-header__left a,
.ct-header__sub-bar a,
.ct-header__right a,
.ct-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    color: oklch(var(--def-text));
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    background: transparent;
    border: 0;
    transition: background var(--ct-dur-fast) var(--ct-ease-out),
                color var(--ct-dur-fast) var(--ct-ease-out);
}
.ct-header__left a .ct-icon,
.ct-header__sub-bar a .ct-icon,
.ct-header__right a .ct-icon,
.ct-header__cta .ct-icon {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: oklch(var(--green-text));
}
.ct-header__left a:hover,
.ct-header__sub-bar a:hover,
.ct-header__right a:hover,
.ct-header__cta:hover {
    background: oklch(var(--dark-background));
    color: oklch(var(--def-text));
    text-decoration: none;
}
.ct-header__left a.is-active,
.ct-header__sub-bar a.is-active {
    color: oklch(var(--title-text));
    background: oklch(var(--dark-background));
    border: 1px solid oklch(var(--light-text) / 0.4);
    padding: 4px 8px;
}
/* Header CTA — styled identically to nav-items (matches real DM
   Sign In/Sign Up — small icon+text, no fat button) */
.ct-header__cta {
    color: oklch(var(--green-text));
    font-weight: 500;
    box-shadow: none;
}
.ct-header__cta:hover {
    background: oklch(var(--dark-background));
    color: oklch(var(--green-text));
}
/* Optional .ct-header__cta--prominent for cases that need the blue */
.ct-header__cta.is-prominent {
    background: oklch(var(--primary));
    color: white;
    padding: 6px 12px;
    border-radius: var(--ct-radius-md);
}
.ct-header__cta.is-prominent:hover {
    background: oklch(var(--secondary));
    color: white;
}

/* Lang dropdown — kept as vocab hook but hidden by default (real DM
   has no language switcher in chrome). If a downstream needs it, set
   .ct-lang { display: inline-block } on that template. */
.ct-lang { display: none; }
.ct-lang__summary, .ct-lang__flag, .ct-lang__code, .ct-lang__chev,
.ct-lang__menu {
    /* vocab hooks — only render if .ct-lang itself is shown */
}

/* Hamburger toggle */
.ct-nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ct-nav-burger {
    display: none;
    cursor: pointer;
    width: 28px; height: 28px;
    padding: 5px;
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    background: oklch(var(--light-background));
    transition: background var(--ct-dur-fast) var(--ct-ease-out);
}
.ct-nav-burger:hover { background: oklch(var(--dark-background)); }
.ct-nav-burger span {
    display: block;
    width: 14px; height: 2px;
    background: oklch(var(--def-text));
    border-radius: 1px;
    transition: transform var(--ct-dur) var(--ct-ease-out),
                opacity var(--ct-dur) var(--ct-ease-out);
}
.ct-nav-toggle:checked + .ct-nav-burger {
    background: oklch(var(--dark-background));
    border-color: oklch(var(--primary));
}
.ct-nav-toggle:checked + .ct-nav-burger span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}
.ct-nav-toggle:checked + .ct-nav-burger span:nth-child(2) {
    opacity: 0;
}
.ct-nav-toggle:checked + .ct-nav-burger span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
}

/* Search toggle — real DM uses a checkbox + label that toggles a
   modal dialog. We use the same pattern: icon-only label that
   expands the inline search input. */
.ct-search-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ct-search-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    color: oklch(var(--def-text));
    transition: background var(--ct-dur-fast) var(--ct-ease-out);
}
.ct-search-label:hover {
    background: oklch(var(--dark-background));
}
.ct-search-label::before {
    content: "";
    width: 16px; height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") center / contain no-repeat;
}
/* Search expands as an inline form (slides out from the search icon) */
.ct-search-form {
    display: inline-flex;
    align-items: center;
    max-width: 0;
    overflow: hidden;
    transition: max-width var(--ct-dur-slow) var(--ct-ease-out),
                margin var(--ct-dur-slow) var(--ct-ease-out);
}
.ct-search-toggle:checked ~ .ct-search-form,
.ct-header:has(.ct-search-toggle:checked) .ct-search-form {
    max-width: 260px;
    margin-right: 4px;
}
.ct-search-form input {
    width: 100%;
    height: 28px;
    padding: 3px 10px;
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-size: 0.875rem;
    color: oklch(var(--def-text));
}

/* Vocab hook for legacy class */
.ct-nav-primary { display: contents; }


/* =====================================================================
   08 — Chrome — announcement strip
   ---------------------------------------------------------------------
   Real Dark Matter has NO permanent announcement strip — only a
   one-shot JS-enabled warning modal. We hide the strip by default;
   the chrome HTML still includes the markup (vocab hooks survive
   sanitizer) but renders display:none. To opt back in, override:
       .ct-announce { display: block; }
   ===================================================================== */

.ct-announce {
    display: none;
    width: 100%;
    background: oklch(var(--dark-background));
    border-bottom: 1px solid oklch(var(--border));
    font-size: 0.8125rem;
    color: oklch(var(--def-text));
}
.ct-announce__bar {
    max-width: var(--ct-container);
    margin: 0 auto;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.ct-announce__tag {
    font-family: var(--ct-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 1px 8px;
    background: oklch(var(--background));
    border: 1px solid oklch(var(--primary));
    border-radius: 3px;
    color: oklch(var(--green-text));
}
.ct-announce__msg {
    color: oklch(var(--def-text));
    line-height: 1.4;
}
.ct-announce__msg time {
    font-family: var(--ct-font-mono);
    color: oklch(var(--title-text));
    font-feature-settings: "tnum", "zero";
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}


/* =====================================================================
   09 — Chrome — footer
   ===================================================================== */

.ct-footer {
    background: oklch(var(--xdark-background));       /* #181b20 */
    border-top: 1px solid oklch(var(--border));
    margin-top: 32px;
    flex-shrink: 0;
}
.ct-footer__bar {
    max-width: var(--ct-container);
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    color: oklch(var(--lighter-text));
    font-size: 0.8125rem;
}
.ct-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: oklch(var(--lighter-text));
}
.ct-footer__brand .ct-brand-mark { width: 22px; height: 22px; }
.ct-footer__brand strong {
    color: oklch(var(--title-text));
    font-weight: 700;
    font-size: 0.88rem;
}
.ct-footer__copy {
    color: oklch(var(--lighter-text));
    font-size: 0.78rem;
}
.ct-footer__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
}
.ct-footer__links a {
    color: oklch(var(--lighter-text));
    text-decoration: none;
    transition: color var(--ct-dur-fast) var(--ct-ease-out);
}
.ct-footer__links a:hover {
    color: oklch(var(--green-text));
    text-decoration: none;
}
.ct-footer__sep {
    color: oklch(var(--lightest-text) / 0.5);
    user-select: none;
}


/* =====================================================================
   10 — Hero (flat, no decorative pseudo-elements)
   ===================================================================== */

.ct-hero {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -24px;
    margin-bottom: 36px;
    padding:
        48px
        max(16px, calc((100vw - var(--ct-container)) / 2 + 16px))
        40px;
    border-bottom: 1px solid oklch(var(--border));
    background: oklch(var(--dark-background));         /* solid slate */
}
.ct-hero > * { position: relative; z-index: 1; }
/* No ::before grid pattern, no ::after orb — real DM has nothing */

.ct-hero h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: oklch(var(--title-text));
    max-width: 24ch;
    text-wrap: balance;
}
.ct-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: oklch(var(--green-text));
    margin: 0 0 14px;
    padding: 4px 12px;
    background: oklch(var(--background));
    border: 1px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
}
.ct-hero__eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: oklch(var(--primary));
    animation: ct-pulse 2.4s ease-in-out infinite;
}
.ct-hero__lede {
    font-size: 1rem;
    color: oklch(var(--lighter-text));
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 0 24px;
    text-wrap: pretty;
}
.ct-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 8px;
}
.ct-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: oklch(var(--primary));
    color: white;
    padding: 8px 16px;
    border-radius: var(--ct-radius-md);
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    text-decoration: none;
    border: 1px solid oklch(var(--border));
    box-shadow: var(--ct-shadow-sm);
    transition: background var(--ct-dur) var(--ct-ease-out);
}
.ct-hero__cta:hover {
    background: oklch(var(--secondary));
    color: white;
    text-decoration: none;
}
.ct-hero__cta--ghost {
    background: rgba(var(--card-bg));
    color: oklch(var(--def-text));
    border: 1px solid oklch(var(--border));
}
.ct-hero__cta--ghost:hover {
    background: oklch(var(--dark-background));
    color: oklch(var(--green-text));
}

/* Split layout — same as Catharsis */
.ct-hero--split .ct-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}
@media (min-width: 900px) {
    .ct-hero--split .ct-hero__grid {
        grid-template-columns: 1.4fr 1fr;
    }
}
.ct-hero__aside {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-lg);
    padding: 18px;
    box-shadow: var(--ct-shadow-sm);
}


/* =====================================================================
   11 — Verified strip + status dots
   ===================================================================== */

.ct-verified-strip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 6px 12px;
    background: oklch(var(--background));
    border: 1px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
    color: oklch(var(--green-text));
    font-size: 0.84rem;
    font-weight: 500;
}
.ct-verified-strip::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: oklch(var(--primary));
    animation: ct-pulse 2.4s ease-in-out infinite;
}
.ct-verified-strip time {
    font-family: var(--ct-font-mono);
    color: oklch(var(--title-text));
    font-feature-settings: "tnum", "zero";
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
/* When the AI wraps a self-styled `.darkmatter-verified-status` /
   `.catharsis-verified-status` / `[data-mitm-slot=verified-status]`
   inside a `.ct-verified-strip`, the result is a double pill (two
   backgrounds + two borders). Reset the OUTER wrapper to transparent
   when an inner status pill is present. */
.ct-verified-strip:has([class$="-verified-status"]),
.ct-verified-strip:has(.darkmatter-verified-status),
.ct-verified-strip:has(.catharsis-verified-status),
.ct-verified-strip:has([data-rc-slot="verified-status"], [data-mitm-slot="verified-status"]) {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 14px;
    color: inherit;
}
.ct-verified-strip:has([class$="-verified-status"])::before,
.ct-verified-strip:has(.darkmatter-verified-status)::before,
.ct-verified-strip:has(.catharsis-verified-status)::before,
.ct-verified-strip:has([data-rc-slot="verified-status"], [data-mitm-slot="verified-status"])::before {
    display: none;
}

.ct-status-dot,
.darkmatter-status-dot,
.catharsis-status-dot,
[class*="-status-dot"] {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: oklch(var(--success-text));
    vertical-align: middle;
    flex-shrink: 0;
}
.ct-status-dot--warn,
[class*="-status-dot"].is-mirror {
    background: oklch(var(--warning-text));
}
.ct-status-dot--err,
[class*="-status-dot"].is-offline {
    background: oklch(var(--error-text));
}
@keyframes ct-pulse {
    0%, 100% { box-shadow: 0 0 0 0 oklch(var(--primary) / 0.5); }
    50%      { box-shadow: 0 0 0 4px oklch(var(--primary) / 0.0); }
}
.ct-status-dot--live,
[class*="-status-dot"].is-online {
    animation: ct-pulse 2.4s ease-in-out infinite;
}

.is-primary, .is-resolved, .is-active { /* state hooks */ }
span.is-online:empty,
span.is-offline:empty,
span.is-mirror:empty {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}
span.is-online:empty {
    background: oklch(var(--success-text));
    animation: ct-pulse 2.4s ease-in-out infinite;
}
span.is-offline:empty { background: oklch(var(--error-text)); }
span.is-mirror:empty { background: oklch(var(--warning-text)); }


/* =====================================================================
   12 — Section + layout
   ===================================================================== */

.ct-section {
    padding: 32px 0;
    border-bottom: 1px solid oklch(var(--border) / 0.5);
}
.ct-section:last-child { border-bottom: 0; }
.ct-section__title {
    margin: 0 0 20px;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: oklch(var(--title-text));
    text-wrap: balance;
}
.ct-section__title--accent {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.ct-section__title--accent::before {
    content: "";
    display: inline-block;
    width: 4px; height: 1.1em;
    background: oklch(var(--primary));
    border-radius: 2px;
    vertical-align: middle;
}
.ct-section__lede {
    margin: -8px 0 24px;
    color: oklch(var(--lighter-text));
    font-size: 1rem;
    line-height: 1.6;
    max-width: 65ch;
    text-wrap: pretty;
}
.ct-section__num {
    display: inline-block;
    font-family: var(--ct-font-mono);
    font-size: 0.78rem;
    color: oklch(var(--green-text));
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

/* Two-column layout — article + sticky sidebar */
.ct-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
@media (min-width: 1024px) {
    .ct-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}
.ct-layout__main { min-width: 0; }
.ct-layout__aside { align-self: start; }
@media (min-width: 1024px) {
    .ct-layout__aside { position: sticky; top: calc(var(--ct-header-h) + 16px); }
}

/* DM-specific: fixed-left sidebar variant (matches real DM 150px menu) */
.ct-layout--sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 768px) {
    .ct-layout--sidebar {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 24px;
    }
}
.ct-layout--sidebar > .ct-layout__aside {
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 8px;
    box-shadow: var(--ct-shadow-xs);
}
.ct-layout--sidebar > .ct-layout__aside a {
    display: block;
    padding: 8px 12px;
    color: oklch(var(--def-text));
    text-decoration: none;
    border-radius: var(--ct-radius-sm);
    font-size: 0.9rem;
    transition: background var(--ct-dur-fast) var(--ct-ease-out);
}
.ct-layout--sidebar > .ct-layout__aside a:hover {
    background: oklch(var(--dark-background));
}
.ct-layout--sidebar > .ct-layout__aside a.is-active {
    background: oklch(var(--dark-background));
    color: oklch(var(--green-text));
    border-left: 2px solid oklch(var(--primary));
}

.ct-toc {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 16px 18px;
}
.ct-toc h4 {
    margin: 0 0 10px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(var(--lightest-text));
}
.ct-toc ul { list-style: none; margin: 0; padding: 0; }
.ct-toc li { margin: 6px 0; }
.ct-toc a {
    color: oklch(var(--lighter-text));
    font-size: 0.88rem;
    text-decoration: none;
    display: block;
    padding: 4px 8px;
    border-left: 2px solid transparent;
    border-radius: 0 var(--ct-radius-sm) var(--ct-radius-sm) 0;
}
.ct-toc a:hover {
    background: oklch(var(--dark-background));
    border-left-color: oklch(var(--primary));
    color: oklch(var(--green-text));
    text-decoration: none;
}

.ct-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    color: oklch(var(--lightest-text));
    font-size: 0.85rem;
}
.ct-breadcrumb a {
    color: oklch(var(--lighter-text));
    text-decoration: none;
}
.ct-breadcrumb a:hover {
    color: oklch(var(--green-text));
    text-decoration: underline;
}
.ct-breadcrumb__sep::before {
    content: "›";
    color: oklch(var(--lightest-text));
    margin: 0 4px;
}

.ct-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 28px;
    padding: 10px 0;
    border-top: 1px solid oklch(var(--border));
    border-bottom: 1px solid oklch(var(--border));
}
.ct-jump-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--ct-radius-md);
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--def-text));
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--ct-dur) var(--ct-ease-out),
                color var(--ct-dur) var(--ct-ease-out);
}
.ct-jump-nav a:hover {
    background: oklch(var(--dark-background));
    color: oklch(var(--green-text));
    text-decoration: none;
}


/* =====================================================================
   13 — Cards
   ===================================================================== */

.ct-card {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-lg);
    padding: 16px 18px;
    color: oklch(var(--def-text));
    box-shadow: var(--ct-shadow-xs);
    contain: content;
    transition: background var(--ct-dur) var(--ct-ease-out);
}
.ct-card--tight { padding: 12px 14px; }
.ct-card--accent { border-left: 3px solid oklch(var(--primary)); }
.ct-card--hover { cursor: pointer; }
.ct-card--hover:hover {
    background: oklch(var(--dark-background));     /* DM hover is bg-change, not lift */
}
.ct-card-title {
    font-weight: 700;
    color: oklch(var(--title-text));
    margin: 0 0 8px;
    font-size: 1.05rem;
}
.ct-card > p:last-child { margin-bottom: 0; }

.ct-feature-card {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-lg);
    padding: 20px 18px;
    position: relative;
    box-shadow: var(--ct-shadow-sm);
    contain: content;
    transition: background var(--ct-dur) var(--ct-ease-out);
}
.ct-feature-card:hover {
    background: oklch(var(--dark-background));
}
.ct-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin: 0 0 12px;
    background: oklch(var(--dark-background));
    border: 1px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
    color: oklch(var(--green-text));
}
.ct-feature-card__icon .ct-icon { width: 22px; height: 22px; }
.ct-feature-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: oklch(var(--title-text));
    margin: 0 0 8px;
}
.ct-feature-card__text {
    color: oklch(var(--lighter-text));
    line-height: 1.6;
    font-size: 0.94rem;
    margin: 0;
    text-wrap: pretty;
}

.ct-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .ct-grid--2, .ct-grid--3, .ct-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .ct-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .ct-grid--4 { grid-template-columns: repeat(4, 1fr); }
}


/* =====================================================================
   14 — Stats / KV / Alerts / Pills / Codeblock
   ===================================================================== */

.ct-stat {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--ct-shadow-xs);
    contain: content;
}
.ct-stat--hero {
    padding: 20px 22px;
    background: oklch(var(--dark-background));
    border-color: oklch(var(--primary));
}
.ct-stat--hero .ct-stat__value {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    color: oklch(var(--green-text));
}
.ct-stat--hero .ct-stat__label { color: oklch(var(--green-text)); }
.ct-stat__label {
    font-size: 0.72rem;
    color: oklch(var(--lightest-text));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.ct-stat__value {
    font-size: 1.625rem;
    color: oklch(var(--title-text));
    font-weight: 700;
    line-height: 1.1;
    font-feature-settings: "tnum", "zero";
    font-variant-numeric: tabular-nums;
    min-height: 1.1em;
}
.ct-stat__value:empty::before {
    content: "—";
    color: oklch(var(--lightest-text));
    font-weight: 400;
}
.ct-stat__value[data-pending]::before {
    content: "Pending verification";
    font-size: 0.78rem;
    color: oklch(var(--lighter-text));
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}
.ct-stat__hint {
    font-size: 0.8rem;
    color: oklch(var(--lighter-text));
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ct-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--ct-radius-md);
    font-variant-numeric: tabular-nums;
}
.ct-stat__delta--up {
    color: oklch(var(--success-text));
    background: oklch(var(--success-bg));
}
.ct-stat__delta--up::before { content: "▲"; font-size: 0.62em; }
.ct-stat__delta--down {
    color: oklch(var(--error-text));
    background: oklch(var(--error-bg));
}
.ct-stat__delta--down::before { content: "▼"; font-size: 0.62em; }
.ct-stat__delta--flat {
    color: oklch(var(--lighter-text));
    background: oklch(var(--dark-background));
}
.ct-stat__delta--flat::before { content: "−"; line-height: 1; }

.ct-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    margin: 14px 0;
    padding: 14px 18px;
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-size: 0.94rem;
}
.ct-kv dt {
    color: oklch(var(--lightest-text));
    font-weight: 700;
    margin: 0;
    font-size: 0.86em;
}
.ct-kv dd {
    color: oklch(var(--title-text));
    margin: 0;
    word-break: break-word;
    font-feature-settings: "tnum", "zero";
}

.ct-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--ct-radius-md);
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--lighter-text));
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
}
.ct-pill--primary {
    background: oklch(var(--primary));
    border-color: oklch(var(--border));
    color: white;
}
.ct-pill--success {
    background: oklch(var(--success-bg));
    border-color: oklch(var(--success-border));
    color: oklch(var(--success-text));
}
.ct-pill--warn {
    background: oklch(var(--warning-bg));
    border-color: oklch(var(--warning-border));
    color: oklch(var(--warning-text));
}
.ct-pill--err {
    background: oklch(var(--error-bg));
    border-color: oklch(var(--error-border));
    color: oklch(var(--error-text));
}
.ct-pill--info {
    background: oklch(var(--info-bg));
    border-color: oklch(var(--status-border));
    color: oklch(var(--status-text));
}

.ct-alert {
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 12px 16px 12px 44px;
    margin: 16px 0;
    color: oklch(var(--def-text));
    background: oklch(var(--xdark-background));
    font-size: 0.94rem;
    line-height: 1.55;
    border-left-width: 3px;
    position: relative;
}
.ct-alert::before {
    content: "";
    position: absolute;
    left: 14px; top: 14px;
    width: 18px; height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 8h.01'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 8h.01'/></svg>") center / contain no-repeat;
    opacity: 0.7;
}
.ct-alert strong { color: oklch(var(--title-text)); margin-right: 4px; }
.ct-alert a { color: oklch(var(--green-text)); text-decoration: underline; }
.ct-alert--info {
    background: oklch(var(--info-bg));
    border-color: oklch(var(--status-border));
    color: oklch(var(--status-text));
}
.ct-alert--info strong { color: oklch(var(--status-text)); }
.ct-alert--success {
    background: oklch(var(--success-bg));
    border-color: oklch(var(--success-border));
    color: oklch(var(--success-text));
}
.ct-alert--success strong { color: oklch(var(--success-text)); }
.ct-alert--warn {
    background: oklch(var(--warning-bg));
    border-color: oklch(var(--warning-border));
    color: oklch(var(--warning-text));
}
.ct-alert--warn strong { color: oklch(var(--warning-text)); }
.ct-alert--err {
    background: oklch(var(--error-bg));
    border-color: oklch(var(--error-border));
    color: oklch(var(--error-text));
}
.ct-alert--err strong { color: oklch(var(--error-text)); }
.ct-alert--important {
    background: oklch(var(--important-bg));
    border-color: oklch(var(--important-border));
    color: oklch(var(--error-text));
}
.ct-alert--important strong { color: oklch(var(--important-border)); }

.ct-codeblock {
    background: oklch(var(--xdark-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 12px 16px;
    font-family: var(--ct-font-mono);
    font-size: 0.84em;
    line-height: 1.6;
    color: oklch(var(--def-text));
    overflow-x: auto;
    white-space: pre;
    margin: 14px 0;
    font-feature-settings: "tnum", "zero";
}
.ct-codeblock--pgp {
    background: oklch(var(--dark-background));
    border-color: oklch(var(--primary));
    color: oklch(var(--green-text));
}


/* =====================================================================
   15 — Onion mirror table
   ===================================================================== */

main table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    overflow: hidden;
    box-shadow: var(--ct-shadow-sm);
    margin: 14px 0 24px;
    font-feature-settings: "tnum", "zero";
}
main table td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid oklch(var(--border));
    color: oklch(var(--def-text));
    font-size: 0.92rem;
    transition: background var(--ct-dur-fast) var(--ct-ease-out);
}
main table tr:last-child td { border-bottom: 0; }
main table tr:hover td { background: oklch(var(--dark-background) / 0.6); }
main table tbody tr:nth-child(4n+1):not(:hover) td:not([colspan]) {
    background: oklch(var(--light-background) / 0.5);
}
main table a {
    color: oklch(var(--green-text));
    font-family: var(--ct-font-mono);
    font-size: 0.88em;
    overflow-wrap: anywhere;
    word-break: normal;
    text-decoration: none;
    font-feature-settings: "tnum", "zero";
}
main table a:hover {
    color: oklch(var(--primary));
    text-decoration: underline;
}
main table button {
    padding: 4px 10px;
    font-size: 0.76rem;
    background: oklch(var(--light-background));
    color: oklch(var(--def-text));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    box-shadow: var(--ct-shadow-xs);
}
main table button:hover {
    background: oklch(var(--primary));
    color: white;
    border-color: oklch(var(--primary));
}

main table tr.darkmatter-onion-row td:first-child,
main table tr.catharsis-onion-row td:first-child,
main table tr[class$="-onion-row"] td:first-child,
main table tr[data-status] td:first-child:not([colspan]) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
}
main table tr[data-status] td:first-child > span:not([class*="status-dot"]):not([class*="primary-badge"]),
main table tr[data-status] td:first-child > .label {
    color: oklch(var(--title-text));
    font-weight: 700;
    font-size: 0.92rem;
}
main table tr[data-status="active"] td:first-child {
    background: oklch(var(--info-bg) / 0.4);
}
main table tr[data-status="down"] td:first-child {
    background: oklch(var(--error-bg) / 0.4);
}

main table tr:has(.is-primary) > td,
main table tr:has([class*="-primary-badge"]) > td,
main table tr[class$="-onion-row"]:first-of-type:not([data-status="down"]):not([data-status="offline"]) > td {
    box-shadow: inset 3px 0 0 oklch(var(--primary));
}
main table tr:has(.is-primary) td:first-child,
main table tr:has([class*="-primary-badge"]) td:first-child,
main table tr[class$="-onion-row"]:first-of-type:not([data-status="down"]):not([data-status="offline"]) td:first-child {
    background: oklch(var(--dark-background));
}

/* BLUF row */
main table tr.darkmatter-onion-bluf td,
main table tr.catharsis-onion-bluf td,
main table tr[class$="-onion-bluf"] td,
main table tr td[colspan] {
    background: oklch(var(--xdark-background));
    font-size: 0.83rem;
    color: oklch(var(--lighter-text));
    padding: 12px 18px 14px;
    border-bottom: 1px solid oklch(var(--border));
    border-top: 1px dashed oklch(var(--primary) / 0.3);
}
main table tr td[colspan] p { margin: 0; line-height: 1.6; }

p:is([class$="-bluf"], .darkmatter-bluf, .catharsis-bluf) {
    margin: 0;
    padding: 0;
    font-size: 0.86rem;
    color: oklch(var(--lighter-text));
    line-height: 1.65;
    font-feature-settings: "tnum", "zero";
}
p:is([class$="-bluf"], .darkmatter-bluf, .catharsis-bluf)::before {
    content: "VERIFIED";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    margin-right: 10px;
    background: oklch(var(--background));
    color: oklch(var(--green-text));
    border: 1px solid oklch(var(--primary));
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: var(--ct-font-mono);
    vertical-align: 2px;
    float: left;
    margin-top: 1px;
}

.label { /* vocab hook */ }

/* Alternate mirror card patterns */
.darkmatter-mirror-card,
.catharsis-mirror-card,
[class$="-mirror-card"] {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 16px 18px;
    box-shadow: var(--ct-shadow-xs);
    display: grid;
    gap: 10px;
    margin: 12px 0;
}
.darkmatter-mirror-card-head,
.catharsis-mirror-card-head,
[class$="-mirror-card-head"] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: oklch(var(--title-text));
    font-size: 0.95rem;
}
.darkmatter-mirror-term,
.catharsis-mirror-term,
[class$="-mirror-term"] {
    font-weight: 700;
    color: oklch(var(--title-text));
    font-size: 0.92rem;
    margin: 8px 0 4px;
}
.darkmatter-mirror-def,
.catharsis-mirror-def,
[class$="-mirror-def"] {
    margin: 0 0 8px 0;
    color: oklch(var(--def-text));
    font-family: var(--ct-font-mono);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.ct-mirror-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    overflow: hidden;
}
.ct-mirror-table thead { background: oklch(var(--dark-background)); }
.ct-mirror-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(var(--lightest-text));
    font-weight: 700;
}
.ct-mirror-table td {
    padding: 10px 14px;
    border-top: 1px solid oklch(var(--border));
    color: oklch(var(--def-text));
    font-size: 0.92rem;
}
.ct-mirror-table tr:hover td {
    background: oklch(var(--dark-background) / 0.6);
}
.ct-mirror-table code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.86em;
    color: oklch(var(--green-text));
    overflow-wrap: anywhere;
}


/* =====================================================================
   16 — CTA bar + onion endpoint card
   ===================================================================== */

.ct-cta-bar {
    margin: 28px 0;
    padding: 22px 26px;
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    box-shadow: var(--ct-shadow-sm);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
}
@media (max-width: 720px) {
    .ct-cta-bar { grid-template-columns: 1fr; padding: 18px 20px; }
}
.ct-cta-bar__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: oklch(var(--title-text));
    margin: 0 0 4px;
    text-wrap: balance;
}
.ct-cta-bar__text {
    margin: 0;
    color: oklch(var(--def-text));
    font-size: 0.94rem;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

@supports selector(:has(*)) {
    .ct-cta-bar:has(.darkmatter-onion-url),
    .ct-cta-bar:has(.catharsis-onion-url) {
        background: rgba(var(--card-bg));
        border-color: oklch(var(--border));
        border-radius: var(--ct-radius-md);
        padding: 18px 20px;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ct-cta-bar:has(.darkmatter-onion-url) .ct-cta-bar__title,
    .ct-cta-bar:has(.catharsis-onion-url) .ct-cta-bar__title {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: oklch(var(--green-text));
        font-weight: 700;
        margin: 0;
    }
    .ct-cta-bar:has(.darkmatter-onion-url) .ct-cta-bar__text,
    .ct-cta-bar:has(.catharsis-onion-url) .ct-cta-bar__text {
        margin: 0;
        padding: 12px 14px;
        background: oklch(var(--xdark-background));
        border: 1px solid oklch(var(--primary));
        border-radius: var(--ct-radius-md);
        font-family: var(--ct-font-mono);
        font-size: 0.85rem;
        color: oklch(var(--def-text));
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.5;
    }
    .ct-cta-bar:has(.darkmatter-onion-url) > a,
    .ct-cta-bar:has(.catharsis-onion-url) > a {
        justify-self: start;
    }
}

.ct-onion-card {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 18px 20px;
    margin: 24px 0;
    display: grid;
    gap: 12px;
    box-shadow: var(--ct-shadow-sm);
}
.ct-onion-card__label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: oklch(var(--green-text));
    font-weight: 700;
    margin: 0;
}
.ct-onion-card__url {
    position: relative;
    background: oklch(var(--xdark-background));
    border: 1px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
    padding: 12px 56px 12px 14px;
    font-family: var(--ct-font-mono);
    font-size: 0.85rem;
    color: oklch(var(--green-text));
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.5;
    font-weight: 700;
}
.ct-onion-card__copy {
    position: absolute;
    top: 6px; right: 6px;
    padding: 4px 10px;
    background: oklch(var(--light-background));
    color: oklch(var(--def-text));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-sm);
    font-family: var(--ct-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ct-dur-fast) var(--ct-ease-out);
}
.ct-onion-card__copy:hover {
    background: oklch(var(--primary));
    color: white;
    border-color: oklch(var(--primary));
}
.ct-onion-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.84rem;
    color: oklch(var(--lighter-text));
}
.ct-onion-card__verify {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: oklch(var(--primary));
    color: white;
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.86rem;
    transition: background var(--ct-dur) var(--ct-ease-out);
}
.ct-onion-card__verify:hover {
    background: oklch(var(--secondary));
    color: white;
    text-decoration: none;
}

.darkmatter-direct-access-point,
.catharsis-direct-access-point { /* alias */ }
.darkmatter-onion-inline,
.catharsis-onion-inline {
    font-family: var(--ct-font-mono);
    color: oklch(var(--green-text));
    overflow-wrap: anywhere;
    word-break: normal;
    font-weight: 700;
}


/* =====================================================================
   17 — Pull quote / divider / meter / trust row
   ===================================================================== */

.ct-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0;
    color: oklch(var(--lightest-text));
}
.ct-divider::before, .ct-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: oklch(var(--border));
}

.ct-pull-quote {
    margin: 28px 0;
    padding: 22px 28px 22px 44px;
    border-left: 3px solid oklch(var(--primary));
    background: oklch(var(--light-background));
    border-radius: 0 var(--ct-radius-md) var(--ct-radius-md) 0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: oklch(var(--title-text));
    position: relative;
    text-wrap: balance;
}
.ct-pull-quote::before {
    content: "\201C";
    position: absolute;
    top: -4px; left: 14px;
    font-size: 3.2rem;
    line-height: 1;
    color: oklch(var(--primary));
    opacity: 0.4;
    font-family: Georgia, serif;
}
.ct-pull-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    color: oklch(var(--lighter-text));
    font-weight: 500;
    font-style: normal;
}
.ct-pull-quote cite::before { content: "— "; }

.ct-meter {
    display: block;
    width: 100%;
    height: 8px;
    background: oklch(var(--xdark-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    overflow: hidden;
    margin: 10px 0;
}
.ct-meter__bar {
    display: block;
    height: 100%;
    background: oklch(var(--primary));
    transition: width .6s var(--ct-ease-out);
}
.ct-meter--success .ct-meter__bar { background: oklch(var(--success-text)); }
.ct-meter--warn .ct-meter__bar { background: oklch(var(--warning-text)); }

.ct-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 20px 0;
    padding: 16px 20px;
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    box-shadow: var(--ct-shadow-xs);
}
.ct-trust-row__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: oklch(var(--def-text));
}
.ct-trust-row__item .ct-icon {
    color: oklch(var(--green-text));
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.ct-trust-row__item strong {
    color: oklch(var(--title-text));
    font-weight: 700;
    font-feature-settings: "tnum", "zero";
}
.ct-trust-row__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: oklch(var(--dark-background));
    border: 1px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
    flex-shrink: 0;
}
.ct-trust-row__chip .ct-icon { width: 16px; height: 16px; }


/* =====================================================================
   18 — FAQ
   ===================================================================== */

.ct-faq {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}
.ct-faq details {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 12px 16px;
    box-shadow: var(--ct-shadow-xs);
    transition: background var(--ct-dur) var(--ct-ease-out);
}
.ct-faq details:hover { background: oklch(var(--dark-background)); }
.ct-faq details[open] {
    background: oklch(var(--dark-background));
    border-color: oklch(var(--primary));
}
.ct-faq summary {
    font-weight: 700;
    color: oklch(var(--title-text));
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: 0.96rem;
}
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after {
    content: "";
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: oklch(var(--background));
    color: oklch(var(--green-text));
    border: 1px solid oklch(var(--border));
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-position: center;
    background-size: 9px 1.5px, 1.5px 9px;
    background-repeat: no-repeat;
    transition: transform var(--ct-dur) var(--ct-ease-out),
                background-size var(--ct-dur) var(--ct-ease-out),
                border-color var(--ct-dur) var(--ct-ease-out);
}
.ct-faq details[open] summary::after {
    background-size: 9px 1.5px, 0 0;
    border-color: oklch(var(--primary));
    transform: rotate(180deg);
}
.ct-faq details > *:not(summary) {
    margin-top: 12px;
    color: oklch(var(--def-text));
    line-height: 1.6;
}


/* =====================================================================
   19 — Timeline / callout / steps / tag
   ===================================================================== */

.ct-timeline {
    position: relative;
    display: grid;
    gap: 14px;
    margin: 22px 0;
    padding: 0 0 0 22px;
    list-style: none;
}
.ct-timeline::before {
    content: "";
    position: absolute;
    left: 6px; top: 6px; bottom: 6px;
    width: 2px;
    background: oklch(var(--border));
}
.ct-timeline > li {
    position: relative;
    padding: 12px 16px;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    box-shadow: var(--ct-shadow-xs);
    contain: content;
}
.ct-timeline > li::before {
    content: "";
    position: absolute;
    left: -20px; top: 16px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: oklch(var(--primary));
    border: 2px solid oklch(var(--background));
    box-shadow: 0 0 0 1px oklch(var(--primary));
}
.ct-timeline__time, .ct-timeline > li time {
    display: block;
    font-family: var(--ct-font-mono);
    font-size: 0.74rem;
    color: oklch(var(--lightest-text));
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 4px;
    font-feature-settings: "tnum", "zero";
}
.ct-timeline__title, .ct-timeline > li > :first-child:not(time) {
    color: oklch(var(--title-text));
    font-weight: 700;
    font-size: 0.96rem;
    margin: 0 0 4px;
}
.ct-timeline > li > :last-child {
    color: oklch(var(--lighter-text));
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}
.ct-timeline > li.is-resolved::before {
    background: oklch(var(--success-text));
    box-shadow: 0 0 0 1px oklch(var(--success-text));
}
.ct-timeline > li.is-active::before {
    background: oklch(var(--warning-text));
    box-shadow: 0 0 0 1px oklch(var(--warning-text));
    animation: ct-pulse 2.2s ease-in-out infinite;
}

.ct-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    align-items: start;
    margin: 22px 0;
    padding: 16px 20px;
    background: oklch(var(--dark-background));
    border: 1px solid oklch(var(--border));
    border-left: 3px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
    color: oklch(var(--def-text));
}
.ct-callout__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
    color: oklch(var(--green-text));
    flex-shrink: 0;
}
.ct-callout__mark .ct-icon { width: 18px; height: 18px; }
.ct-callout__title {
    margin: 0 0 4px;
    font-weight: 700;
    color: oklch(var(--title-text));
    font-size: 1rem;
}
.ct-callout__text {
    margin: 0;
    color: oklch(var(--def-text));
    font-size: 0.92rem;
    line-height: 1.55;
}
.ct-callout--warn {
    border-left-color: oklch(var(--warning-text));
}
.ct-callout--warn .ct-callout__mark {
    border-color: oklch(var(--warning-border));
    color: oklch(var(--warning-text));
}
.ct-callout--err {
    background: oklch(var(--error-bg));
    border-color: oklch(var(--error-border));
    border-left-color: oklch(var(--error-text));
}
.ct-callout--err .ct-callout__mark {
    border-color: oklch(var(--error-border));
    color: oklch(var(--error-text));
}

.ct-steps {
    counter-reset: ct-step;
    display: grid;
    gap: 12px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}
.ct-steps > li {
    position: relative;
    padding: 14px 18px 14px 58px;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    box-shadow: var(--ct-shadow-xs);
    counter-increment: ct-step;
    transition: background var(--ct-dur) var(--ct-ease-out);
}
.ct-steps > li:hover { background: oklch(var(--dark-background)); }
.ct-steps > li::before {
    content: counter(ct-step);
    position: absolute;
    left: 14px; top: 14px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: oklch(var(--primary));
    color: white;
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: "tnum";
}
.ct-steps > li > :first-child {
    color: oklch(var(--title-text));
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 4px;
}
.ct-steps > li > :last-child:not(:first-child) {
    color: oklch(var(--lighter-text));
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.ct-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-sm);
    color: oklch(var(--lighter-text));
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}


/* =====================================================================
   20 — Tabs / compare-table / empty-state
   ===================================================================== */

.ct-tabs {
    display: grid;
    gap: 0;
    margin: 22px 0;
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    background: rgba(var(--card-bg));
    box-shadow: var(--ct-shadow-xs);
    overflow: hidden;
}
.ct-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 4px;
    background: oklch(var(--dark-background));
    border-bottom: 1px solid oklch(var(--border));
}
.ct-tabs__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ct-tabs__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.86rem;
    font-weight: 500;
    color: oklch(var(--lighter-text));
    border-radius: var(--ct-radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background var(--ct-dur-fast) var(--ct-ease-out),
                color var(--ct-dur-fast) var(--ct-ease-out);
}
.ct-tabs__label:hover {
    background: rgba(var(--card-bg));
    color: oklch(var(--title-text));
}
.ct-tabs__input:checked + .ct-tabs__label {
    background: rgba(var(--card-bg));
    color: oklch(var(--green-text));
    font-weight: 700;
}
.ct-tabs__panel {
    display: none;
    padding: 20px;
    color: oklch(var(--def-text));
    line-height: 1.6;
}
.ct-tabs__panel > :first-child { margin-top: 0; }
.ct-tabs__panel > :last-child { margin-bottom: 0; }
.ct-tabs__input:checked ~ .ct-tabs__panel { display: block; }
.ct-tabs:has(.ct-tabs__input[data-tab="1"]:checked) .ct-tabs__panel[data-panel="1"],
.ct-tabs:has(.ct-tabs__input[data-tab="2"]:checked) .ct-tabs__panel[data-panel="2"],
.ct-tabs:has(.ct-tabs__input[data-tab="3"]:checked) .ct-tabs__panel[data-panel="3"],
.ct-tabs:has(.ct-tabs__input[data-tab="4"]:checked) .ct-tabs__panel[data-panel="4"] {
    display: block;
}
.ct-tabs:has(.ct-tabs__input[data-tab="1"]:checked) .ct-tabs__panel[data-panel]:not([data-panel="1"]),
.ct-tabs:has(.ct-tabs__input[data-tab="2"]:checked) .ct-tabs__panel[data-panel]:not([data-panel="2"]),
.ct-tabs:has(.ct-tabs__input[data-tab="3"]:checked) .ct-tabs__panel[data-panel]:not([data-panel="3"]),
.ct-tabs:has(.ct-tabs__input[data-tab="4"]:checked) .ct-tabs__panel[data-panel]:not([data-panel="4"]) {
    display: none;
}

.ct-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    overflow: hidden;
    margin: 20px 0;
    font-size: 0.92rem;
    box-shadow: var(--ct-shadow-sm);
}
.ct-compare-table thead th {
    padding: 12px 14px;
    background: oklch(var(--dark-background));
    color: oklch(var(--title-text));
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid oklch(var(--border));
    text-align: left;
    vertical-align: middle;
}
.ct-compare-table thead th:first-child { width: 32%; }
.ct-compare-table thead th.is-primary,
.ct-compare-table thead th[data-primary] {
    background: oklch(var(--primary) / 0.25);
    color: oklch(var(--green-text));
}
.ct-compare-table tbody th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: oklch(var(--title-text));
    background: oklch(var(--light-background));
    border-bottom: 1px solid oklch(var(--border));
    border-right: 1px solid oklch(var(--border));
    font-size: 0.88rem;
}
.ct-compare-table td {
    padding: 10px 14px;
    border-bottom: 1px solid oklch(var(--border));
    color: oklch(var(--def-text));
    vertical-align: top;
}
.ct-compare-table td.is-primary,
.ct-compare-table td[data-primary] {
    background: oklch(var(--primary) / 0.15);
    color: oklch(var(--green-text));
    font-weight: 500;
}
.ct-compare-table tbody tr:last-child th,
.ct-compare-table tbody tr:last-child td {
    border-bottom: 0;
}
.ct-compare-table .yes::before {
    content: "✓ ";
    color: oklch(var(--success-text));
    font-weight: 700;
    margin-right: 2px;
}
.ct-compare-table .no::before {
    content: "✕ ";
    color: oklch(var(--error-text));
    font-weight: 700;
    margin-right: 2px;
}

.ct-empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 40px 22px;
    background: oklch(var(--light-background));
    border: 1px dashed oklch(var(--border));
    border-radius: var(--ct-radius-md);
    margin: 22px 0;
    color: oklch(var(--lighter-text));
}
.ct-empty-state__mark {
    width: 44px; height: 44px;
    margin: 0 0 12px;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: oklch(var(--lightest-text));
}
.ct-empty-state__mark .ct-icon { width: 22px; height: 22px; }
.ct-empty-state__title {
    margin: 0 0 4px;
    font-weight: 700;
    color: oklch(var(--def-text));
    font-size: 1rem;
}
.ct-empty-state__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 40ch;
}


/* =====================================================================
   21 — Prose + drop cap
   ===================================================================== */

.ct-prose {
    color: oklch(var(--def-text));
    line-height: 1.75;
    font-size: 1rem;
}
.ct-prose > * + * { margin-top: 1.1em; }
.ct-prose h2 {
    margin-top: 1.6em; margin-bottom: 0.5em;
    font-size: 1.4rem;
}
.ct-prose h3 {
    margin-top: 1.3em; margin-bottom: 0.4em;
    font-size: 1.18rem;
}
.ct-prose p { margin: 0 0 1.1em; }
.ct-prose ul, .ct-prose ol { margin: 0 0 1.1em; }
.ct-prose li { margin: 0.4em 0; }
.ct-prose a { color: oklch(var(--green-text)); text-decoration: underline; }
.ct-prose a:hover { color: oklch(var(--primary)); }
.ct-prose img { margin: 1.4em auto; border-radius: var(--ct-radius-md); }

.ct-prose--drop-cap > p:first-of-type::first-letter {
    float: left;
    font-size: 3rem;
    line-height: 0.85;
    margin: 0.08em 0.12em 0 0;
    font-weight: 700;
    color: oklch(var(--primary));
    font-family: var(--ct-font-sans);
}


/* =====================================================================
   22 — Meta strip
   ===================================================================== */

.ct-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin: 0 0 20px;
    padding: 10px 0;
    color: oklch(var(--lightest-text));
    font-size: 0.85rem;
    border-bottom: 1px solid oklch(var(--border));
}
.ct-meta-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ct-meta-strip__item .ct-icon {
    width: 14px; height: 14px;
    color: oklch(var(--lightest-text));
}


/* =====================================================================
   23 — Icons (same library as Catharsis — currentColor-recolorable mask)
   ===================================================================== */

.ct-icon {
    display: inline-block;
    width: 18px; height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
}
.ct-icon--logo { /* legacy hook — actual brand uses .ct-brand-mark */
    width: 28px; height: 24px;
    background-color: transparent;
}
.ct-icon[class*="--svg-"] {
    background-color: currentColor;
    background-image: none !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.ct-icon--svg-shield {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l8 4v6c0 5-3.5 9.5-8 10C7.5 21.5 4 17 4 12V6l8-4z'/><path d='M9 12l2 2 4-4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l8 4v6c0 5-3.5 9.5-8 10C7.5 21.5 4 17 4 12V6l8-4z'/><path d='M9 12l2 2 4-4'/></svg>");
}
.ct-icon--svg-lock {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");
}
.ct-icon--svg-clock {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}
.ct-icon--svg-key {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='4'/><path d='M11 12l9-9M16 7l3 3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='4'/><path d='M11 12l9-9M16 7l3 3'/></svg>");
}
.ct-icon--svg-info {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 8h.01'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 8h.01'/></svg>");
}
.ct-icon--svg-alert {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.86 2.1 18a2 2 0 0 0 1.71 3h16.38a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><path d='M12 9v4M12 17h.01'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.86 2.1 18a2 2 0 0 0 1.71 3h16.38a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><path d='M12 9v4M12 17h.01'/></svg>");
}
.ct-icon--svg-eye {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.ct-icon--svg-arrow {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
}
.ct-icon--svg-check {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
}
.ct-icon--svg-zap {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/></svg>");
}
.ct-icon--svg-globe {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/></svg>");
}
.ct-icon--svg-server {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='6' rx='1.5'/><rect x='3' y='14' width='18' height='6' rx='1.5'/><path d='M7 7h.01M7 17h.01'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='6' rx='1.5'/><rect x='3' y='14' width='18' height='6' rx='1.5'/><path d='M7 7h.01M7 17h.01'/></svg>");
}
.ct-icon--svg-file-check {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6'/><path d='M9 14l2 2 4-4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6'/><path d='M9 14l2 2 4-4'/></svg>");
}
.ct-icon--svg-activity {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>");
}
.ct-icon--svg-tor {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.5' fill='%23000'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.5' fill='%23000'/></svg>");
}
.ct-icon--svg-link {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
}
.ct-icon--lg { width: 24px; height: 24px; }
.ct-icon--xl { width: 32px; height: 32px; }


/* =====================================================================
   24 — Screenshot grid + :target modal
   ===================================================================== */

:is([class$="-shots"], .darkmatter-shots, .catharsis-shots) {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 22px 0;
}
:is([class$="-shot-thumb"], .darkmatter-shot-thumb, .catharsis-shot-thumb) {
    display: block;
    border-radius: var(--ct-radius-md);
    overflow: hidden;
    border: 1px solid oklch(var(--border));
    cursor: zoom-in;
    background: oklch(var(--light-background));
    text-decoration: none;
    box-shadow: var(--ct-shadow-xs);
    transition: border-color var(--ct-dur) var(--ct-ease-out),
                box-shadow var(--ct-dur) var(--ct-ease-out);
}
:is([class$="-shot-thumb"], .darkmatter-shot-thumb, .catharsis-shot-thumb):hover {
    border-color: oklch(var(--primary));
    box-shadow: var(--ct-shadow-lift);
}
:is([class$="-shot"], .darkmatter-shot, .catharsis-shot) {
    margin: 0;
    display: block;
}
:is([class$="-shot"], .darkmatter-shot, .catharsis-shot) img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: oklch(var(--light-background));
}
:is([class$="-shot"], .darkmatter-shot, .catharsis-shot) figcaption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: oklch(var(--lighter-text));
    background: oklch(var(--dark-background));
    border-top: 1px solid oklch(var(--border));
    font-weight: 700;
    font-style: normal;
}
:is([class$="-shot-zoom"], .darkmatter-shot-zoom, .catharsis-shot-zoom) {
    color: oklch(var(--green-text));
    font-weight: 700;
    font-size: 0.74rem;
}

:is([class$="-shot-modal"], .darkmatter-shot-modal, .catharsis-shot-modal) {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.86);
}
:is([class$="-shot-modal"], .darkmatter-shot-modal, .catharsis-shot-modal):not(:target) > * {
    display: none;
}
:is([class$="-shot-modal"], .darkmatter-shot-modal, .catharsis-shot-modal):target {
    display: flex;
}
:is([class$="-shot-modal"], .darkmatter-shot-modal, .catharsis-shot-modal):target > * {
    display: block;
}
:is([class$="-shot-modal"], .darkmatter-shot-modal, .catharsis-shot-modal):target :is([class$="-shot-modal-inner"], .darkmatter-shot-modal-inner, .catharsis-shot-modal-inner) {
    display: flex;
}
:is([class$="-shot-backdrop"], .darkmatter-shot-backdrop, .catharsis-shot-backdrop) {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}
:is([class$="-shot-backdrop"], .darkmatter-shot-backdrop, .catharsis-shot-backdrop)::before {
    content: "Click outside or press Esc to close";
    position: absolute;
    top: 18px; left: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}
:is([class$="-shot-modal-inner"], .darkmatter-shot-modal-inner, .catharsis-shot-modal-inner) {
    position: relative;
    z-index: 2;
    max-width: min(1200px, 96vw);
    max-height: 96vh;
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-lg);
    overflow: hidden;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
:is([class$="-shot-modal-inner"], .darkmatter-shot-modal-inner, .catharsis-shot-modal-inner) img {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    max-height: calc(96vh - 56px);
    object-fit: contain;
    display: block;
    background: oklch(var(--xdark-background));
    aspect-ratio: auto;
}
:is([class$="-shot-modal-bar"], .darkmatter-shot-modal-bar, .catharsis-shot-modal-bar) {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid oklch(var(--border));
    background: rgba(var(--card-bg));
    flex-shrink: 0;
}
:is([class$="-shot-modal-caption"], .darkmatter-shot-modal-caption, .catharsis-shot-modal-caption) {
    color: oklch(var(--lighter-text));
    font-size: 0.85rem;
}
:is([class$="-shot-prev"], .darkmatter-shot-prev, .catharsis-shot-prev),
:is([class$="-shot-next"], .darkmatter-shot-next, .catharsis-shot-next),
:is([class$="-shot-close"], .darkmatter-shot-close, .catharsis-shot-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 32px;
    padding: 0 12px;
    background: oklch(var(--light-background));
    color: oklch(var(--def-text));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--ct-dur-fast) var(--ct-ease-out),
                color var(--ct-dur-fast) var(--ct-ease-out);
}
:is([class$="-shot-prev"], .darkmatter-shot-prev, .catharsis-shot-prev):hover,
:is([class$="-shot-next"], .darkmatter-shot-next, .catharsis-shot-next):hover,
:is([class$="-shot-close"], .darkmatter-shot-close, .catharsis-shot-close):hover {
    background: oklch(var(--primary));
    border-color: oklch(var(--primary));
    color: white;
}


/* =====================================================================
   25 — Back-to-top
   ===================================================================== */

.ct-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: var(--ct-radius-md);
    background: oklch(var(--primary));
    color: white;
    border: 1px solid oklch(var(--border));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: var(--ct-shadow-pop);
    opacity: 0.7;
    transition: opacity var(--ct-dur) var(--ct-ease-out),
                background var(--ct-dur) var(--ct-ease-out);
}
.ct-to-top:hover {
    opacity: 1;
    background: oklch(var(--secondary));
    color: white;
    text-decoration: none;
}


/* =====================================================================
   26 — Skip link
   ===================================================================== */

.ct-skip-link {
    position: absolute;
    left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.ct-skip-link:focus {
    left: 12px; top: 12px;
    width: auto; height: auto;
    z-index: 100;
    background: oklch(var(--primary));
    color: white;
    padding: 8px 16px;
    border-radius: var(--ct-radius-md);
    font-weight: 700;
    text-decoration: none;
}


/* =====================================================================
   27 — Placeholder widgets (server-rendered by placeholders.py)
   ===================================================================== */

/* {{rates}} */
:is([class$="-rates"], .darkmatter-rates, .catharsis-rates) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 14px 0;
}
@media (min-width: 640px) {
    :is([class$="-rates"], .darkmatter-rates, .catharsis-rates) {
        grid-template-columns: repeat(4, 1fr);
    }
}
.darkmatter-rate,
.catharsis-rate,
:is([class$="-rates"], .darkmatter-rates, .catharsis-rates) > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-size: 0.86rem;
    box-shadow: var(--ct-shadow-xs);
    transition: border-color var(--ct-dur) var(--ct-ease-out);
}
.darkmatter-rate:hover,
.catharsis-rate:hover,
:is([class$="-rates"], .darkmatter-rates, .catharsis-rates) > div:hover {
    border-color: oklch(var(--primary));
}
.darkmatter-rate > span:first-child,
.catharsis-rate > span:first-child,
:is([class$="-rates"], .darkmatter-rates, .catharsis-rates) > div > span:first-child {
    font-weight: 700;
    color: oklch(var(--title-text));
    letter-spacing: 0.04em;
    font-size: 0.74rem;
    text-transform: uppercase;
}
.darkmatter-rate > span:last-child,
.catharsis-rate > span:last-child,
:is([class$="-rates"], .darkmatter-rates, .catharsis-rates) > div > span:last-child {
    font-family: var(--ct-font-mono);
    color: oklch(var(--green-text));
    font-size: 0.88em;
    font-feature-settings: "tnum", "zero";
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* {{share_buttons}} */
:is([class$="-share-row"], .darkmatter-share-row, .catharsis-share-row) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
    padding: 12px 14px;
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    align-items: center;
}
:is([class$="-share-row"], .darkmatter-share-row, .catharsis-share-row)::before {
    content: "Share:";
    font-size: 0.76rem;
    font-weight: 700;
    color: oklch(var(--lightest-text));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
:is([class$="-share-btn"], .darkmatter-share-btn, .catharsis-share-btn) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: oklch(var(--dark-background));
    color: oklch(var(--def-text)) !important;
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-size: 0.82rem;
    text-decoration: none !important;
    box-shadow: var(--ct-shadow-xs);
    transition: background var(--ct-dur-fast) var(--ct-ease-out),
                color var(--ct-dur-fast) var(--ct-ease-out);
}
:is([class$="-share-btn"], .darkmatter-share-btn, .catharsis-share-btn):hover {
    background: oklch(var(--primary));
    color: white !important;
    border-color: oklch(var(--primary));
}

/* {{banner}} */
:is([class$="-banner"], .darkmatter-banner, .catharsis-banner) {
    width: 100%;
    aspect-ratio: 16 / 5;
    max-height: 280px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--ct-radius-md);
    border: 1px solid oklch(var(--border));
    margin: 0 0 24px;
    box-shadow: var(--ct-shadow-sm);
    background: oklch(var(--light-background));
}
@supports not (aspect-ratio: 16 / 5) {
    :is([class$="-banner"], .darkmatter-banner, .catharsis-banner) {
        height: clamp(160px, 24vw, 280px);
    }
}

.darkmatter-logo,
.catharsis-logo,
[class$="-logo"]:not([class*="-big"]) {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

:is([class$="-enter-market"], .darkmatter-enter-market, .catharsis-enter-market) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: oklch(var(--primary));
    color: white;
    padding: 8px 16px;
    border-radius: var(--ct-radius-md);
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    text-decoration: none;
    border: 1px solid oklch(var(--border));
    box-shadow: var(--ct-shadow-sm);
    transition: background var(--ct-dur) var(--ct-ease-out);
}
:is([class$="-enter-market"], .darkmatter-enter-market, .catharsis-enter-market):hover {
    background: oklch(var(--secondary));
    color: white;
    text-decoration: none;
}

/* {{onions}} wrapper */
:is([class$="-onions"], .darkmatter-onions, .catharsis-onions) {
    position: relative;
    margin: 16px 0 24px;
    border-radius: var(--ct-radius-md);
}
@media (max-width: 720px) {
    :is([class$="-onions"], .darkmatter-onions, .catharsis-onions) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

:is([class*="-primary-badge"], .darkmatter-primary-badge, .catharsis-primary-badge) {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: oklch(var(--primary));
    color: white;
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

:is([class$="-copy-btn"], .darkmatter-copy-btn, .catharsis-copy-btn) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: oklch(var(--light-background));
    color: oklch(var(--def-text));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--ct-shadow-xs);
    transition: background var(--ct-dur-fast) var(--ct-ease-out),
                color var(--ct-dur-fast) var(--ct-ease-out),
                border-color var(--ct-dur-fast) var(--ct-ease-out);
}
:is([class$="-copy-btn"], .darkmatter-copy-btn, .catharsis-copy-btn):hover {
    background: oklch(var(--primary));
    color: white;
    border-color: oklch(var(--primary));
}

:is([class$="-onion-url"], .darkmatter-onion-url, .catharsis-onion-url, [class*="-onion-inline"]) {
    color: oklch(var(--green-text));
    font-family: var(--ct-font-mono);
    overflow-wrap: anywhere;
    word-break: normal;
}

/* {{verify_form}} */
:is([class$="-verify-form"]:not([class*="-input"]):not([class*="-label"]):not([class*="-submit"]):not([class*="-result"]),
    .darkmatter-verify-form, .catharsis-verify-form) {
    background: oklch(var(--dark-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 22px;
    margin: 24px 0;
    position: relative;
    box-shadow: var(--ct-shadow-sm);
    overflow: hidden;
}
:is([class$="-verify-form"]:not([class*="-input"]):not([class*="-label"]):not([class*="-submit"]):not([class*="-result"]),
    .darkmatter-verify-form, .catharsis-verify-form)::after {
    content: "PGP";
    position: absolute;
    top: 12px; right: 14px;
    font-family: var(--ct-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: oklch(var(--green-text));
    background: oklch(var(--background));
    border: 1px solid oklch(var(--primary));
    border-radius: 4px;
    padding: 2px 7px;
}
:is([class*="-verify-label"], .darkmatter-verify-label, .catharsis-verify-label) {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: oklch(var(--def-text));
    margin: 0 0 6px;
}
:is([class*="-verify-input"], .darkmatter-verify-input, .catharsis-verify-input) {
    width: 100%;
    padding: 10px 12px;
    background: oklch(var(--xdark-background));
    color: oklch(var(--def-text));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-family: var(--ct-font-mono);
    font-size: 0.84em;
    box-sizing: border-box;
    margin: 0 0 12px;
    transition: border-color var(--ct-dur) var(--ct-ease-out),
                box-shadow var(--ct-dur) var(--ct-ease-out);
}
:is([class*="-verify-input"], .darkmatter-verify-input, .catharsis-verify-input):focus {
    outline: none;
    border-color: oklch(var(--primary));
    box-shadow: var(--ct-focus-ring);
}
:is([class*="-verify-submit"], .darkmatter-verify-submit, .catharsis-verify-submit) {
    background: oklch(var(--primary));
    color: white;
    border: 1px solid oklch(var(--border));
    padding: 8px 18px;
    border-radius: var(--ct-radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--ct-dur) var(--ct-ease-out);
}
:is([class*="-verify-submit"], .darkmatter-verify-submit, .catharsis-verify-submit):hover {
    background: oklch(var(--secondary));
    color: white;
}
:is([class*="-verify-result"], .darkmatter-verify-result, .catharsis-verify-result) {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: var(--ct-radius-md);
    background: oklch(var(--xdark-background));
    border: 1px solid oklch(var(--border));
    color: oklch(var(--def-text));
    font-size: 0.86rem;
    font-family: var(--ct-font-mono);
    min-height: 1.5em;
}
.verify-ok { color: oklch(var(--success-text)); font-weight: 700; }
.verify-bad { color: oklch(var(--error-text)); font-weight: 700; }

/* {{verified-status}} */
:is([class$="-verified-status"], .darkmatter-verified-status, .catharsis-verified-status, [data-rc-slot="verified-status"], [data-mitm-slot="verified-status"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: oklch(var(--background));
    border: 1px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
    color: oklch(var(--green-text));
    font-size: 0.84rem;
    font-weight: 500;
}
:is([class$="-verified-status"], .darkmatter-verified-status, .catharsis-verified-status, [data-rc-slot="verified-status"], [data-mitm-slot="verified-status"])::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: oklch(var(--primary));
    animation: ct-pulse 2.4s ease-in-out infinite;
}
:is([class$="-verified-status"], .darkmatter-verified-status, .catharsis-verified-status) time {
    font-family: var(--ct-font-mono);
    color: oklch(var(--title-text));
    font-weight: 700;
    font-feature-settings: "tnum", "zero";
    font-variant-numeric: tabular-nums;
}
:is([class$="-verified-state"], .darkmatter-verified-state, .catharsis-verified-state) {
    color: oklch(var(--green-text));
    font-weight: 700;
}

/* {{breadcrumbs}} */
:is([class$="-breadcrumbs"], .darkmatter-breadcrumbs, .catharsis-breadcrumbs) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
    color: oklch(var(--lightest-text));
    font-size: 0.82rem;
}
:is([class$="-breadcrumbs"], .darkmatter-breadcrumbs, .catharsis-breadcrumbs) a {
    color: oklch(var(--lighter-text));
    text-decoration: none;
}
:is([class$="-breadcrumbs"], .darkmatter-breadcrumbs, .catharsis-breadcrumbs) a:hover {
    color: oklch(var(--green-text));
    text-decoration: underline;
}


/* =====================================================================
   27b — Search-results page (panel/app.py renders /search/?q=...)
   ---------------------------------------------------------------------
   The handler emits standalone HTML with classes outside the .ct-*
   vocabulary: `.site`, `.container`, `.row`, `.brand`, `.tw-search-*`.
   Style them here so the search page renders in the replica's theme.
   ===================================================================== */

body.site {
    background: oklch(var(--background));
    color: oklch(var(--def-text));
}
body.site .container {
    max-width: var(--ct-container);
    margin: 0 auto;
    padding: 0 16px;
}
body.site header.site {
    background: oklch(var(--background));
    border-bottom: 1px solid oklch(var(--border));
}
body.site header.site .container {
    height: var(--ct-header-h);
}
body.site header.site .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 24px;
}
body.site header.site .brand {
    color: oklch(var(--title-text));
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}
body.site header.site .brand:hover { color: oklch(var(--green-text)); }
body.site header.site .brand-text {
    font-family: var(--ct-font-mono);
    color: oklch(var(--lighter-text));
    font-weight: 500;
}
body.site header.site nav a {
    color: oklch(var(--def-text));
    font-size: 0.875rem;
    margin: 0 8px;
    text-decoration: none;
}
body.site header.site nav a:hover { color: oklch(var(--green-text)); }
body.site main {
    padding: 32px 0 48px;
    min-height: 60vh;
}
body.site article.page {
    background: rgba(var(--card-bg));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-lg);
    padding: 24px 28px;
    box-shadow: var(--ct-shadow-sm);
}
body.site article.page h1 {
    margin: 0 0 18px;
    font-size: 1.5rem;
    line-height: 2rem;
    color: oklch(var(--title-text));
    font-weight: 700;
}
body.site footer.site {
    background: oklch(var(--xdark-background));
    border-top: 1px solid oklch(var(--border));
    padding: 14px 0;
    color: oklch(var(--lighter-text));
    font-size: 0.8125rem;
    text-align: center;
}

.tw-search-form { margin: 14px 0 22px; }
.tw-search-form label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(var(--lightest-text));
    margin-bottom: 8px;
    font-weight: 700;
}
.tw-search-row { display: flex; gap: 8px; }
.tw-search-input {
    flex: 1 1 auto;
    padding: 10px 14px;
    background: oklch(var(--light-background));
    color: oklch(var(--def-text));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    font-size: 0.95rem;
    transition: border-color var(--ct-dur) var(--ct-ease-out);
}
.tw-search-input:focus {
    outline: none;
    border-color: oklch(var(--primary));
    box-shadow: var(--ct-focus-ring);
}
.tw-search-btn, .btn.btn-primary {
    background: oklch(var(--primary));
    color: white;
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 8px 18px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--ct-dur) var(--ct-ease-out);
}
.tw-search-btn:hover, .btn.btn-primary:hover {
    background: oklch(var(--secondary));
}

.tw-search-summary {
    color: oklch(var(--lighter-text));
    font-size: 0.92rem;
    padding-bottom: 14px;
    border-bottom: 1px solid oklch(var(--border));
    margin-bottom: 18px;
}
.tw-search-summary strong { color: oklch(var(--title-text)); }
.tw-search-summary .muted { color: oklch(var(--lightest-text)); font-size: 0.85em; }
.tw-search-empty, .tw-search-msg {
    padding: 14px 18px;
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-left: 3px solid oklch(var(--primary));
    border-radius: var(--ct-radius-md);
    margin: 12px 0;
    color: oklch(var(--lighter-text));
}
.tw-search-empty strong, .tw-search-msg strong { color: oklch(var(--title-text)); }

.tw-search-hit {
    background: oklch(var(--light-background));
    border: 1px solid oklch(var(--border));
    border-radius: var(--ct-radius-md);
    padding: 14px 18px;
    margin: 0 0 10px;
    transition: border-color var(--ct-dur) var(--ct-ease-out);
}
.tw-search-hit:hover { border-color: oklch(var(--primary)); }
.tw-search-hit-title {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
}
.tw-search-hit-title a {
    color: oklch(var(--green-text));
    text-decoration: none;
}
.tw-search-hit-title a:hover {
    color: oklch(var(--primary));
    text-decoration: underline;
}
.tw-search-hit-route { margin: 0 0 6px; font-size: 0.78rem; }
.tw-search-hit-route code {
    background: transparent;
    border: 0;
    padding: 0;
    color: oklch(var(--lightest-text));
    font-family: var(--ct-font-mono);
    font-size: 0.95em;
}
.tw-search-hit-snippet {
    margin: 0;
    color: oklch(var(--lighter-text));
    font-size: 0.92rem;
    line-height: 1.55;
}
.tw-search-hit-snippet mark {
    background: oklch(var(--primary) / 0.25);
    color: oklch(var(--title-text));
    padding: 1px 3px;
    border-radius: 3px;
}


/* =====================================================================
   28 — Themed scrollbar
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {
    * {
        scrollbar-width: thin;
        scrollbar-color: oklch(var(--light-background)) transparent;
    }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: oklch(var(--light-background));
        border-radius: var(--ct-radius-md);
        border: 2px solid oklch(var(--background));
    }
    *::-webkit-scrollbar-thumb:hover {
        background: oklch(var(--lighter-text) / 0.4);
    }
}


/* =====================================================================
   29 — Mobile responsive
   ===================================================================== */

@media (max-width: 640px) {
    .ct-hero {
        padding: 40px 12px 30px;
        margin-top: -20px;
        margin-bottom: 28px;
    }
    .ct-hero h1 { font-size: clamp(1.4rem, 6vw, 1.85rem); }
    .ct-hero__lede { font-size: 0.95rem; }
    .ct-hero__actions { gap: 8px; }
    .ct-hero__cta { padding: 8px 16px; font-size: 0.9rem; }

    .ct-surface { padding: 14px; }
    .ct-feature-card { padding: 16px 14px; }
    .ct-feature-card__icon { width: 36px; height: 36px; margin-bottom: 10px; }
    .ct-cta-bar { padding: 16px; }
    .ct-cta-bar__title { font-size: 1rem; }
    .ct-stat__value { font-size: 1.35rem; }
    .ct-pull-quote { padding: 14px 18px 14px 36px; font-size: 0.98rem; }
    .ct-trust-row { flex-direction: column; gap: 12px; padding: 12px 14px; }
    .ct-section { padding: 24px 0; }

    main table { font-size: 0.84rem; }
    main table td { padding: 9px 11px; }
    main table tr td[colspan] { padding: 9px 12px; }

    /* Mobile header — collapse single-row to brand + burger + minimal
       right cluster; the section nav hides behind the burger toggle. */
    .ct-header__bar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding: 0 10px;
        height: 42px;
        align-items: center;
    }
    .ct-header__left {
        grid-column: 1;
        order: 1;
        min-width: 0;
        display: none;            /* nav-items hidden; burger shows menu */
    }
    .ct-brand {
        grid-column: 2;
        order: 2;
        justify-self: center;
    }
    .ct-brand__name {
        font-size: 0.9375rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 16ch;
    }
    .ct-header__right {
        grid-column: 3;
        order: 3;
        gap: 4px;
        justify-self: end;
    }
    .ct-header__cta {
        padding: 5px 10px;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    .ct-nav-burger {
        display: inline-flex;
        position: absolute;
        top: 6px;
        left: 8px;
    }
    .ct-header__bar { position: relative; }
    /* When burger toggled, show the nav-items panel as a slide-down */
    .ct-nav-toggle:checked ~ .ct-header__top .ct-header__left,
    .ct-header:has(.ct-nav-toggle:checked) .ct-header__left {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 42px; left: 0; right: 0;
        background: oklch(var(--background));
        border-bottom: 1px solid oklch(var(--border));
        z-index: 50;
        padding: 4px 12px 8px;
    }
    .ct-header__left a, .ct-header__sub-bar a {
        padding: 10px 4px !important;
        border-bottom: 1px solid oklch(var(--border));
        font-size: 0.94rem;
    }
    .ct-header__left a:last-child, .ct-header__sub-bar a:last-child {
        border-bottom: 0;
    }
    .ct-search-toggle:checked ~ .ct-search-form { max-width: 180px; }
}

@media (max-width: 480px) {
    .ct-to-top { bottom: 16px; right: 16px; width: 36px; height: 36px; }
}

@media (max-width: 380px) {
    .ct-brand__name { font-size: 0.85rem; max-width: 10ch; }
    .ct-header__cta { padding: 5px 10px; font-size: 0.76rem; }
    .ct-header__bar { gap: 6px; padding: 0 8px; }
    .ct-hero h1 { font-size: 1.4rem; }
}


/* =====================================================================
   30 — A11y + motion
   ===================================================================== */

html { scroll-behavior: smooth; }

:focus-visible {
    outline: 2px solid oklch(var(--primary));
    outline-offset: 2px;
    border-radius: 4px;
    transition: outline-offset var(--ct-dur-fast) var(--ct-ease-out);
}
a:focus-visible { outline-offset: 4px; }

.ct-card--hover:focus-visible,
.ct-feature-card:focus-visible,
:is([class$="-shot-thumb"], .darkmatter-shot-thumb, .catharsis-shot-thumb):focus-visible {
    outline: 2px solid oklch(var(--primary));
    outline-offset: 3px;
    border-color: oklch(var(--primary)) !important;
}
.ct-faq summary:focus-visible,
.ct-lang__summary:focus-visible {
    outline: 2px solid oklch(var(--primary));
    outline-offset: 2px;
    border-radius: var(--ct-radius-sm);
}
.ct-to-top:focus-visible {
    opacity: 1;
    outline: 2px solid oklch(var(--title-text));
    outline-offset: 3px;
}
.ct-nav-toggle:focus-visible + .ct-nav-burger {
    outline: 2px solid oklch(var(--primary));
    outline-offset: 2px;
}
.ct-search-toggle:focus-visible + .ct-search-label {
    outline: 2px solid oklch(var(--primary));
    outline-offset: 2px;
}

::selection {
    background: oklch(var(--primary) / 0.4);
    color: oklch(var(--title-text));
}

@keyframes ct-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ct-hero, .ct-callout {
    animation: ct-fade-in .3s var(--ct-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ct-hero, .ct-callout, .ct-status-dot--live { animation: none; }
    .ct-verified-strip::before, .ct-hero__eyebrow::before,
    [data-rc-slot="verified-status"]::before,
    [data-mitm-slot="verified-status"]::before { animation: none; }
    * { transition: none !important; }
}


/* =====================================================================
   31 — Print
   ===================================================================== */

@media print {
    .ct-header, .ct-footer, .ct-jump-nav, .ct-cta-bar,
    .ct-hero__actions, .ct-skip-link, .ct-toc, .ct-to-top,
    .ct-announce {
        display: none !important;
    }
    .ct-hero {
        padding: 16px 0; margin: 0 0 22px;
        background: none; border: none;
    }
    .ct-page { background: white; color: black; }
    .ct-main { max-width: none; padding: 0; }
    .ct-surface, .ct-card, .ct-feature-card {
        box-shadow: none; break-inside: avoid;
        background: white; color: black; border: 1px solid #ccc;
    }
    a { text-decoration: underline; color: black; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}


/* =====================================================================
   32 — Utilities
   ===================================================================== */

.ct-u-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;
}
.ct-u-mt-1 { margin-top: 0.5rem; }
.ct-u-mt-2 { margin-top: 1rem; }
.ct-u-mt-3 { margin-top: 1.5rem; }
.ct-u-mt-4 { margin-top: 2rem; }
.ct-u-mb-1 { margin-bottom: 0.5rem; }
.ct-u-mb-2 { margin-bottom: 1rem; }
.ct-u-mb-3 { margin-bottom: 1.5rem; }
.ct-u-mb-4 { margin-bottom: 2rem; }
.ct-u-flex { display: flex; }
.ct-u-flex-wrap { flex-wrap: wrap; }
.ct-u-text-center { text-align: center; }
.ct-u-muted { color: oklch(var(--lighter-text)); }
.ct-u-strong { color: oklch(var(--title-text)); font-weight: 700; }
.ct-u-mono {
    font-family: var(--ct-font-mono);
    font-feature-settings: "tnum", "zero";
}
.ct-u-balance { text-wrap: balance; }
.ct-u-pretty { text-wrap: pretty; }
.ct-u-nowrap { white-space: nowrap; }

/* =====================================================================
   14 — Inline onion-link prose visibility
   ---------------------------------------------------------------------
   AI bodies often emit `<p>` containing an inline onion-URL link
   (`<a class="<prefix>-onion-inline <prefix>-onion-url">`). Base rules
   cascade the link's accent color onto the paragraph, making the
   surrounding prose invisible against the surface. This explicit
   :has() rule restores prose color on those paragraphs while keeping
   the link itself accent-colored. dh ships the same rule.
   ===================================================================== */

.ct-main p:has(> [class*="-onion-inline"]),
.ct-main p:has(> [class*="-onion-url"]) { color: #eeedec; }
.ct-main li:has(> [class*="-onion-inline"]),
.ct-main li:has(> [class*="-onion-url"]) { color: #eeedec; }

/* ====== DARKMATTER FOOTER (DH 4-column, deep slate) ====== */
.darkmatter-footer {
    background: oklch(0.13 0.012 245);
    color: oklch(0.85 0.010 245);
    border-top: 2px solid oklch(var(--primary));
    padding: 28px 24px 16px;
    margin-top: 28px;
    font-size: 13px;
    line-height: 1.55;
}
.darkmatter-foot-brand {
    text-align: center;
    margin: 0 0 14px;
    color: #fff;
    font-size: 18px;
}
.darkmatter-foot-brand .ct-brand-mark { margin-right: 6px; vertical-align: middle; }
.darkmatter-foot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.darkmatter-foot-col h3 {
    color: oklch(var(--primary));
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid oklch(0.25 0.012 245);
}
.darkmatter-foot-col a {
    color: oklch(0.85 0.010 245);
    text-decoration: none;
    display: inline-block;
    padding: 2px 0;
}
.darkmatter-foot-col a:hover { color: #fff; text-decoration: underline; }
.darkmatter-foot-row { margin: 0 0 2px; }
.darkmatter-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    color: #fff;
    background: oklch(0.10 0.010 245);
    border: 1px solid oklch(0.25 0.012 245);
    border-radius: 4px;
    padding: 5px 10px;
    display: inline-block;
}
.darkmatter-fx {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: oklch(0.85 0.010 245);
    margin: 0 0 3px;
    background: transparent;
    border: none;
    padding: 0;
}
.darkmatter-foot-bottom {
    max-width: 1180px;
    margin: 18px auto 0;
    padding: 14px 0 0;
    border-top: 1px solid oklch(0.25 0.012 245);
    text-align: center;
    color: oklch(0.62 0.010 245);
    font-size: 11px;
}
.darkmatter-foot-bottom time { color: #fff; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
@media (max-width: 760px) {
    .darkmatter-foot-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 420px) {
    .darkmatter-foot-grid { grid-template-columns: 1fr; }
    .darkmatter-footer { padding: 20px 14px 12px; }
}

/* =====================================================================
   Visual-QA fixes
   ===================================================================== */
/* Callout: mark holds column 1 across all rows; everything else (whether the
   AI wraps title+text or emits them flat) stacks in column 2. Fixes the
   stranded-title / text-under-icon breakage seen on most pages. */
.ct-callout > .ct-callout__mark { grid-column: 1; grid-row: 1 / span 99; align-self: start; }
.ct-callout > :not(.ct-callout__mark) { grid-column: 2; text-align: left; }

/* FAQ summary: anchor the question text left, push only the +/- toggle right.
   A leading arrow span was centering the question via space-between. */
.ct-faq summary { justify-content: flex-start; }
.ct-faq summary::after { margin-left: auto; }

/* Mobile: the brand is absolutely centered in the base rule; the mobile grid
   never cancelled it, so it overlapped and clipped the Enter-Market CTA. */
@media (max-width: 640px) {
    .ct-brand {
        position: static;
        transform: none;
        left: auto; top: auto;
        padding: 0;
    }
}


/* === comments (shared) === */
.tw-comments{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--border,rgba(255,255,255,.14));}
.tw-c-heading{font-size:1.15rem;margin:0 0 1rem;font-weight:700;}
.tw-c-list{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.8rem;}
.tw-c-item{background:var(--panel,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.12));border-left:3px solid var(--primary,#3a7afe);border-radius:8px;padding:.9rem 1.1rem;}
.tw-c-meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.45rem;}
.tw-c-author{font-weight:700;font-size:.92rem;}
.tw-c-time{font-size:.76rem;opacity:.6;font-variant-numeric:tabular-nums;}
.tw-c-body{font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-wrap:break-word;}
.tw-c-empty{font-size:.88rem;opacity:.65;padding:1.1rem 0;font-style:italic;}
.tw-c-form{background:var(--panel,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.12));border-radius:10px;padding:1.2rem;}
.tw-c-form-heading{font-size:1rem;margin:0 0 .3rem;font-weight:700;}
.tw-c-form-note{font-size:.8rem;opacity:.7;margin:0 0 .9rem;}
.tw-c-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem;}
.tw-c-label{font-size:.8rem;font-weight:600;opacity:.85;}
.tw-c-input,.tw-c-textarea{width:100%;background:rgba(0,0,0,.18);border:1px solid var(--border,rgba(255,255,255,.18));border-radius:6px;padding:.55rem .7rem;color:inherit;font:inherit;box-sizing:border-box;}
.tw-c-textarea{resize:vertical;min-height:5.5rem;}
.tw-c-actions{margin-top:.4rem;}
.tw-c-submit{display:inline-block;background:var(--primary,#3a7afe);color:#fff;border:0;border-radius:6px;padding:.6rem 1.3rem;font:inherit;font-weight:600;cursor:pointer;}
.tw-c-submit:hover{filter:brightness(1.08);}
.tw-c-result{margin-top:.7rem;font-size:.85rem;min-height:1.2em;}
.tw-c-ok{color:#3ecf8e;}.tw-c-err{color:#ff6b6b;}.tw-c-loading{opacity:.7;}
@media (max-width:600px){.tw-c-meta{flex-direction:column;gap:.15rem;}}

/* === contact / ticket form + lookup (shared) === */
.ticket-form,.ticket-lookup{margin-top:1.6rem;}
.ticket-form h2,.ticket-lookup h1{font-size:1.2rem;margin:0 0 .6rem;font-weight:700;}
.ticket-form .muted,.ticket-lookup .muted{font-size:.85rem;opacity:.72;margin:0 0 1rem;line-height:1.55;}
#ticket-form,#lookup-form{display:flex;flex-direction:column;gap:.9rem;background:var(--panel,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px;padding:1.3rem;max-width:640px;}
.tf-row{display:flex;flex-direction:column;}
.tf-row label{display:flex;flex-direction:column;gap:.32rem;font-size:.84rem;font-weight:600;opacity:.9;}
.tf-row input,.tf-row textarea{width:100%;background:rgba(0,0,0,.18);border:1px solid var(--border,rgba(255,255,255,.18));border-radius:6px;padding:.55rem .7rem;color:inherit;font:inherit;box-sizing:border-box;font-weight:400;}
.tf-row textarea{resize:vertical;min-height:6.5rem;}
.tf-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.2rem;}
.tf-actions .btn-primary,.tf-actions button[type=submit]{display:inline-block;background:var(--primary,#3a7afe);color:#fff;border:0;border-radius:6px;padding:.6rem 1.3rem;font:inherit;font-weight:600;cursor:pointer;}
.tf-actions .btn-outline{display:inline-block;border:1px solid var(--border,rgba(255,255,255,.3));border-radius:6px;padding:.55rem 1.1rem;color:inherit;text-decoration:none;font-weight:600;font-size:.9rem;}
.tf-status{font-size:.85rem;margin-top:.2rem;}
.tf-status[data-err]{color:#ff6b6b;}
.tl-card,.tl-reply{background:var(--panel,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.12));border-radius:8px;padding:.9rem 1.1rem;margin-top:.8rem;}
.tl-reply{border-left:3px solid var(--primary,#3a7afe);}
.tl-meta{font-size:.78rem;opacity:.65;margin:0 0 .3rem;}
.tl-body{font-size:.9rem;line-height:1.6;white-space:pre-wrap;}
.tl-error{color:#ff6b6b;font-size:.9rem;}