/* ═══════════════════════════════════════════════════════
   TechRounder — main.css (Non-Critical Styles)
   Loaded deferred for optimal CWV
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   PUBLICATION LAYOUT — Homepage
   ═══════════════════════════════════════════════════════ */

/* ── CLS Prevention & Performance ── */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-loader,
.card__image-placeholder,
.pub-editorial__img-placeholder {
    background: linear-gradient(90deg,
            var(--color-bg-alt) 25%,
            var(--color-border) 50%,
            var(--color-bg-alt) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Global image stability */
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

picture {
    display: contents;
}

/* Render perf: skip painting off-screen sections */
.pub-category-section,
.pub-latest,
.section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* ── Publication Section Header ── */
.pub-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-heading);
}

.pub-section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    letter-spacing: -0.01em;
}

.pub-section-title svg {
    color: var(--color-tertiary);
}

.pub-section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-secondary);
    transition: gap var(--transition-fast);
}

.pub-section-link:hover {
    gap: var(--space-2);
}

/* ── Homepage Intro (Stable H1 Signals) ── */
.home-intro {
    padding: var(--space-5) 0 var(--space-3);
    text-align: center;
}

.home-intro__title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-heading);
    letter-spacing: -0.02em;
}

.home-intro__text {
    margin: 0;
    max-width: 78ch;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin-left: auto;
    margin-right: auto;
}

/* ── Hero Feature Post ── */
.pub-hero {
    padding: var(--space-4) 0 var(--space-8);
    overflow: hidden;
    max-width: 100%;
}

.pub-hero__inner {
    display: block;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 16/9;
    min-height: 220px;
    max-width: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-alt);
    color: #fff;
    text-decoration: none;
    transition: transform var(--transition-base);
}

.pub-hero__inner:hover {
    transform: scale(1.005);
}

.pub-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1) 100%);
    transition: background var(--transition-base);
}

.pub-hero__inner:hover .pub-hero__overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 50%, rgba(0, 0, 0, .15) 100%);
}

.pub-hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    z-index: 1;
}

.pub-hero__category {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

.pub-hero__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
    color: #fff;
    letter-spacing: -0.02em;
}

.pub-hero__excerpt {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .85);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-3);
    max-width: 600px;
}

.pub-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, .7);
}

.pub-hero__author {
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, .9);
}

.pub-hero__sep {
    opacity: .5;
}

.tc-home-hero-ad__slot {
    width: min(100%, 970px);
    min-height: 250px;
    margin: 20px auto;
    overflow: hidden;
}

.tc-home-hero-ad__slot .adsbygoogle {
    margin-inline: auto;
}

@media (min-width: 768px) {
    .tc-home-hero-ad__slot {
        min-height: 280px;
    }

    .pub-hero__inner {
        min-height: 420px;
        aspect-ratio: 21/9;
    }

    .pub-hero__title {
        font-size: var(--text-3xl);
    }

    .pub-hero__excerpt {
        font-size: var(--text-base);
    }

    .pub-hero__content {
        padding: var(--space-8);
    }
}

@media (min-width: 1024px) {
    .pub-hero__inner {
        min-height: 480px;
    }

    .pub-hero__title {
        font-size: var(--text-4xl);
    }
}

/* ── Editorial Grid (Top Stories) ── */
.pub-editorial {
    padding-bottom: var(--space-8);
}

.pub-editorial__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.pub-editorial__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pub-editorial__link:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.pub-editorial__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.pub-editorial__img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--color-bg-alt);
}

.pub-editorial__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pub-editorial__cat {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.pub-editorial__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
}

.pub-editorial__link:hover .pub-editorial__title {
    color: var(--color-accent);
}

.pub-editorial__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-2);
}

.pub-editorial__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: auto;
}

/* Editorial: small items — horizontal layout on mobile */
.pub-editorial__item--small .pub-editorial__link {
    flex-direction: row;
}

.pub-editorial__item--small .pub-editorial__img {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 1;
    height: auto;
}

.pub-editorial__item--small .pub-editorial__img-placeholder {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 1;
}

.pub-editorial__item--small .pub-editorial__body {
    padding: var(--space-3);
}

.pub-editorial__item--small .pub-editorial__title {
    font-size: var(--text-sm);
}

/* ── Homepage Flagship Tools ── */
.tc-home-flagship {
    padding: var(--space-5) 0 var(--space-7);
}

.tc-home-flagship + .pub-editorial {
    padding-top: var(--space-6);
}

.tc-home-help + .pub-editorial {
    padding-top: var(--space-6);
}

.tc-home-flagship__header {
    margin-bottom: var(--space-5);
}

.tc-home-flagship__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.tc-home-tool-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.tc-home-tool-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 100%;
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
}

.tc-home-tool-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    color: var(--color-heading);
    border: 1px solid var(--color-border);
}

.tc-home-tool-card__title {
    font-size: var(--text-lg);
    margin: 0;
    color: var(--color-heading);
}

.tc-home-tool-card__text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.tc-home-tool-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-heading);
}

.tc-home-tool-card__cta::after {
    content: "→";
    line-height: 1;
}

.tc-home-tool-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.tc-home-tool-card:hover .tc-home-tool-card__title {
    color: var(--color-accent);
}

.tc-home-tool-card--link-check {
    background:
        radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--color-info) 18%, transparent), transparent 45%),
        var(--color-bg-card);
}

.tc-home-tool-card--memoracipher {
    background:
        radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--color-success) 16%, transparent), transparent 44%),
        var(--color-bg-card);
}

.tc-home-tool-card--ai {
    background:
        radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 44%),
        var(--color-bg-card);
}

.tc-home-tool-card--linux {
    background:
        radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--color-tertiary) 16%, transparent), transparent 44%),
        var(--color-bg-card);
}

.tc-home-help {
    padding-top: var(--space-6);
}

.tc-home-help__shell {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 6% 10%, color-mix(in srgb, var(--color-info) 14%, transparent), transparent 30%),
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--color-tertiary) 12%, transparent), transparent 26%),
        var(--color-bg-card);
}

.tc-home-help__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.tc-home-help__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-heading);
}

.tc-home-help__desc {
    margin: 0 0 var(--space-4);
    max-width: 58ch;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.tc-home-help__metrics {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: var(--space-4);
}

.tc-home-help__metric {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
}

.tc-home-help__metric strong {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-xl);
    line-height: 1.1;
    color: var(--color-heading);
}

.tc-home-help__metric span {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tc-home-help__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.tc-home-help__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.tc-home-help__chip:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-bg);
}

.tc-home-help__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tc-home-help__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.tc-home-help__grid .card--help-support {
    min-height: 100%;
}

@media (min-width: 700px) {
    .tc-home-flagship__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-home-help__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .tc-home-flagship__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tc-home-help__shell {
        grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.45fr);
        align-items: start;
    }
}

@media (min-width: 768px) {
    .pub-editorial__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .pub-editorial__item--large {
        grid-row: 1 / 4;
    }

    .pub-editorial__item--large .pub-editorial__link {
        flex-direction: column;
        height: 100%;
    }

    .pub-editorial__item--large .pub-editorial__img {
        flex: 1;
        aspect-ratio: auto;
    }

    .pub-editorial__item--large .pub-editorial__title {
        font-size: var(--text-xl);
    }

    .pub-editorial__item--small .pub-editorial__link {
        flex-direction: row;
    }

    .pub-editorial__item--small .pub-editorial__img {
        width: 140px;
        min-width: 140px;
    }
}

@media (min-width: 1024px) {
    .pub-editorial__item--large .pub-editorial__title {
        font-size: var(--text-2xl);
    }

    .pub-editorial__item--small .pub-editorial__img {
        width: 160px;
        min-width: 160px;
    }
}

/* ── Category Sections ── */
.pub-category-section {
    padding: var(--space-8) 0;
}

.pub-category__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

/* Category: Featured card */
.pub-cat-card--featured .pub-cat-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pub-cat-card--featured .pub-cat-card__link:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.pub-cat-card--featured .pub-cat-card__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.pub-cat-card--featured .pub-cat-card__body {
    padding: var(--space-4);
}

.pub-cat-card--featured .pub-cat-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
}

.pub-cat-card--featured .pub-cat-card__link:hover .pub-cat-card__title {
    color: var(--color-accent);
}

.pub-cat-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-2);
}

.pub-cat-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Category: Compact card */
.pub-cat-card--compact .pub-cat-card__link {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pub-cat-card--compact .pub-cat-card__link:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-hover);
}

.pub-cat-card--compact .pub-cat-card__thumb {
    width: 80px;
    height: 80px;
    min-width: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.pub-cat-card--compact .pub-cat-card__body {
    flex: 1;
    min-width: 0;
}

.pub-cat-card--compact .pub-cat-card__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}

.pub-cat-card--compact .pub-cat-card__link:hover .pub-cat-card__title {
    color: var(--color-accent);
}

/* ── Category Section Variants (1..6) ── */
.pub-category-section {
    --tc-cat-accent: var(--color-accent);
    --tc-cat-accent-soft: var(--color-accent-bg);
}

.pub-category-section .pub-section-header {
    border-bottom-color: var(--tc-cat-accent);
}

.pub-category-section .pub-section-title svg,
.pub-category-section .pub-section-link {
    color: var(--tc-cat-accent);
}

.pub-category-section .pub-cat-card--featured .pub-cat-card__link:hover,
.pub-category-section .pub-cat-card--compact .pub-cat-card__link:hover {
    border-color: var(--tc-cat-accent);
}

.pub-category-section--s1 {
    --tc-cat-accent: var(--color-accent);
    --tc-cat-accent-soft: var(--color-accent-bg);
}

.pub-category-section--s2 {
    --tc-cat-accent: var(--color-secondary);
    --tc-cat-accent-soft: var(--color-secondary-bg);
}

.pub-category-section--s3 {
    --tc-cat-accent: var(--color-tertiary);
    --tc-cat-accent-soft: var(--color-tertiary-bg);
}

.pub-category-section--s3 .pub-section-title {
    position: relative;
    padding-left: var(--space-3);
}

.pub-category-section--s3 .pub-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.2em;
    border-radius: 999px;
    background: var(--tc-cat-accent);
}

.pub-category-section--s4 {
    --tc-cat-accent: var(--color-info);
    --tc-cat-accent-soft: var(--color-bg-hover);
}

.pub-category-section--s4 .pub-cat-card--compact .pub-cat-card__link {
    border-left: 3px solid var(--tc-cat-accent);
    background: var(--tc-cat-accent-soft);
}

.pub-category-section--s4 .pub-cat-card--compact .pub-cat-card__thumb {
    border-radius: var(--radius-md);
}

.pub-category-section--s5 {
    --tc-cat-accent: var(--color-success);
    --tc-cat-accent-soft: var(--color-bg-hover);
}

.pub-category-section--s5 .pub-cat-card--featured .pub-cat-card__link {
    box-shadow: var(--shadow-md);
}

.pub-category-section--s5 .pub-cat-card--featured .pub-cat-card__body {
    background: linear-gradient(180deg, transparent 0%, var(--tc-cat-accent-soft) 100%);
}

.pub-category-section--s6 {
    --tc-cat-accent: var(--color-warning);
    --tc-cat-accent-soft: var(--color-bg-alt);
}

.pub-category-section--s6 .pub-cat-card--compact .pub-cat-card__link {
    border-style: dashed;
    background: transparent;
}

.pub-category-section--s6 .pub-cat-card--featured .pub-cat-card__link {
    border-width: 2px;
}

/* ── Category Layout Variants (structural) ── */
.pub-cat-layout {
    display: grid;
    gap: var(--space-4);
}

.pub-cat-layout--2 {
    grid-template-columns: 1fr;
}

.pub-cat-layout--3,
.pub-cat-layout--4,
.pub-cat-layout--6 {
    grid-template-columns: 1fr;
}

.pub-cat-layout--5 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Tile card */
.pub-cat-tile__link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pub-cat-tile__link:hover {
    border-color: var(--tc-cat-accent);
    box-shadow: var(--shadow-md);
}

.pub-cat-tile__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.pub-cat-tile__img--placeholder {
    background: var(--color-bg-alt);
}

.pub-cat-tile__body {
    padding: var(--space-4);
}

.pub-cat-tile__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-tight);
}

.pub-cat-tile__excerpt {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.pub-cat-tile__meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Inline editorial card */
.pub-cat-inline__link {
    display: flex;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    padding: var(--space-3);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pub-cat-inline__link:hover {
    border-color: var(--tc-cat-accent);
    background: var(--color-bg-hover);
}

.pub-cat-inline__thumb {
    width: 120px;
    min-width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.pub-cat-inline__body {
    min-width: 0;
}

.pub-cat-inline__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-tight);
}

.pub-cat-inline__excerpt {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.pub-cat-inline__meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Mini text card */
.pub-cat-mini__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    padding: var(--space-3);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pub-cat-mini__link:hover {
    border-color: var(--tc-cat-accent);
    background: var(--color-bg-hover);
}

.pub-cat-mini__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-tight);
}

.pub-cat-mini__meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Ranked list */
.pub-cat-ranked__link {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    padding: var(--space-3);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pub-cat-ranked__link:hover {
    border-color: var(--tc-cat-accent);
    box-shadow: var(--shadow-md);
}

.pub-cat-ranked__num {
    width: 2.2rem;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--tc-cat-accent);
}

.pub-cat-ranked__thumb {
    width: 76px;
    min-width: 76px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.pub-cat-ranked__thumb--placeholder {
    background: var(--color-bg-alt);
    display: inline-block;
}

.pub-cat-ranked__body {
    min-width: 0;
}

.pub-cat-ranked__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-tight);
}

.pub-cat-ranked__meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.pub-cat-layout4__mini-grid,
.pub-cat-layout6__lead,
.pub-cat-layout6__stack {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .pub-category__grid {
        grid-template-columns: 1fr 1fr;
    }

    .pub-cat-layout--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-cat-layout4__mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-cat-inline__thumb {
        width: 160px;
        min-width: 160px;
        height: 105px;
    }

    .pub-cat-card--featured {
        grid-row: 1 / 4;
    }

    .pub-cat-card--featured .pub-cat-card__img {
        aspect-ratio: 4/3;
    }

    .pub-cat-card--featured .pub-cat-card__title {
        font-size: var(--text-xl);
    }
}

@media (min-width: 1024px) {
    .pub-cat-card--compact .pub-cat-card__thumb {
        width: 100px;
        height: 100px;
        min-width: 100px;
    }

    .pub-cat-layout--6 {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: start;
    }

    .pub-cat-layout6__lead {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Latest Section ── */
.pub-latest {
    padding: var(--space-8) 0 var(--space-12);
}

.pub-latest__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .pub-latest__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pub-latest__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ── Sections ── */
.section {
    padding: var(--space-10) 0 var(--space-16);
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.section--alt {
    background: var(--color-bg-alt);
}

.section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.section__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-5);
}

.section__title svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.section__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-accent);
}

.section__more:hover {
    text-decoration: underline;
}

/* ── Grid ── */
.grid {
    display: grid;
    gap: var(--space-4);
}

.grid--2 {
    grid-template-columns: 1fr;
}

.grid--3 {
    grid-template-columns: 1fr;
}

.grid--4 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .grid--md-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {

    .grid--3,
    .grid--lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Cards (shared) ── */
.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card__image-link {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card:hover .card__image {
    transform: scale(1.03);
}

.card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
}

.card__image-placeholder svg {
    width: 32px;
    height: 32px;
}

.card__body {
    padding: var(--space-4);
}

.card__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.card__category {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
}

.card__title a {
    color: var(--color-heading);
}

.card__title a:hover {
    color: var(--color-accent);
}

.card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-3);
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.card__date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.card__date--updated {
    color: var(--color-heading);
}

.card__reading-time {
    display: inline-flex;
    align-items: center;
}

.card--post-featured {
    height: 100%;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 95%, white 5%), var(--color-bg-card));
}

.card--post-featured .card__image-link {
    aspect-ratio: 16/10;
    position: relative;
    background: #0f172a;
}

.card--post-featured .card__image-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.22)),
        linear-gradient(90deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.08));
    pointer-events: none;
}

.card--post-featured .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    position: relative;
    z-index: 1;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, white 4%), color-mix(in srgb, var(--color-bg-card) 99%, black 1%));
}

.card--post-featured .card__title {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    margin-bottom: 0;
}

.card--post-featured .card__excerpt {
    margin-bottom: 0;
    font-size: var(--text-base);
    line-height: 1.7;
}

.card--post-featured .card__meta {
    margin-top: auto;
}

.card--post-compact {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: stretch;
}

.card--post-compact .card__image-link {
    aspect-ratio: auto;
    min-height: 100%;
}

.card--post-compact .card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
}

.card--post-compact .card__eyebrow {
    margin-bottom: 0;
}

.card--post-compact .card__title {
    margin-bottom: 0;
    font-size: var(--text-base);
}

.card--post-compact .card__meta {
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .card--post-featured {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    }

    .card--post-featured .card__image-link {
        min-height: 100%;
    }

    .card--post-featured .card__body {
        margin-left: calc(var(--space-4) * -1);
        align-self: center;
        border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md);
    }
}

/* ── Card: Offer ── */
.card--offer .card__body {
    display: flex;
    flex-direction: column;
}

.card__badges {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.card__brand {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.card__tag {
    font-size: var(--text-xs);
    color: var(--color-tertiary);
    background: var(--color-tertiary-bg);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
}

.card__expiry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background var(--transition-fast);
    margin-top: auto;
    text-align: center;
    justify-content: center;
}

.card__cta:hover {
    background: var(--color-accent-hover);
    color: #fff;
}

/* ── Card: GitHub ── */
.card--github .card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.card__repo-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}

.card--github .card__title {
    margin-bottom: 0;
    flex: 1;
}

.card__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-3);
}

.card__topic {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border-radius: var(--radius-full);
    font-weight: var(--weight-medium);
}

.card__stats {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.card__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card__lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card__lang-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.card__license {
    display: none;
}

@media (min-width: 768px) {
    .card__license {
        display: inline-flex;
    }
}

/* ── Card: Tool ── */
.card--tool .card__body {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.card__icon-wrap {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--text-xl);
}

.card--tool .card__content {
    flex: 1;
    min-width: 0;
}

.card--tool .card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.card--tool .card__title {
    flex: 1;
    margin-bottom: 0;
    font-size: var(--text-sm);
}

/* ── Badges ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
}

.badge--featured {
    background: #fef9c3;
    color: #92400e;
}

[data-theme="dark"] .badge--featured {
    background: #422006;
    color: #fcd34d;
}

.badge--verified {
    background: #d1fae5;
    color: #065f46;
}

[data-theme="dark"] .badge--verified {
    background: #064e3b;
    color: #6ee7b7;
}

.badge--category {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.badge--type {
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* ── Breadcrumbs ── */
.breadcrumbs {
    padding: var(--space-3) 0;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.breadcrumbs__item a {
    color: var(--color-text-secondary);
}

.breadcrumbs__item a:hover {
    color: var(--color-accent);
}

.breadcrumbs__sep {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ── Article ── */
.article {
    padding: var(--space-6) var(--space-4) var(--space-12);
}

.article__header {
    margin-bottom: var(--space-6);
}

.article__categories {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.article__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
    .article__title {
        font-size: var(--text-3xl);
    }
}

@media (min-width: 1024px) {
    .article__title {
        font-size: 3rem;
    }
}

.article__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.article__author-info {
    display: contents;
}

.article__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    text-decoration: none;
}

.article__author img,
.article__author .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
}

.article__author:hover {
    color: var(--color-accent);
}

.article__date,
.article__reading-time {
    font-size: var(--text-sm);
    line-height: 1;
}

.article__date::before,
.article__reading-time::before {
    content: "·";
    margin-right: var(--space-2);
    color: var(--color-text-muted);
}

.article__meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.article__meta-pill--accent {
    background: var(--color-accent-bg);
    border-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
}

.article__featured-image {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
}

.article__image {
    width: 100%;
    border-radius: var(--radius-lg);
}

.help-article__meta {
    row-gap: var(--space-2);
}

.help-article__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.help-article__meta-item--accent {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.article-summary-grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.article-info-card--sidebar {
    display: none;
}

.article-summary-stack {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.article-summary-stack .toc {
    margin-bottom: 0;
}

@media (min-width: 960px) {
    .article-summary-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
        align-items: start;
    }

    .article-summary-grid:not(.article-summary-grid--has-takeaways) {
        grid-template-areas: "summary meta";
    }

    .article-summary-grid--has-takeaways {
        grid-template-areas:
            "summary meta"
            "highlights highlights";
    }

    .article-summary-grid > .article-summary-stack {
        grid-area: summary;
    }

    .article-summary-grid > .article-info-card {
        grid-area: meta;
    }

    .article-summary-grid > .article-summary-support--takeaways {
        grid-area: highlights;
    }

    .article-summary-grid--desktop-no-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-summary-grid--desktop-no-meta:not(.article-summary-grid--has-takeaways) {
        grid-template-areas: "summary";
    }

    .article-summary-grid--desktop-no-meta.article-summary-grid--has-takeaways {
        grid-template-areas:
            "summary"
            "highlights";
    }

    .article-info-card--summary {
        display: none;
    }

    .article-info-card--sidebar {
        display: grid;
    }
}

.help-article__quick-answer {
    margin-bottom: var(--space-6);
}

.article-summary-card {
    margin-bottom: 0;
}

.article-summary-support {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at bottom right, rgba(0, 194, 255, 0.08), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, white 4%), var(--color-bg-card));
}

.article-summary-support__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

.article-summary-support__content {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.article-summary-support__content ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
}

.article-summary-support__content li {
    margin: 0;
}

.article-summary-support--takeaways .article-summary-support__content > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-summary-support--takeaways .article-summary-support__content > ul > li {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg-card) 92%, white 8%);
}

.article-summary-support--takeaways .article-summary-support__content > ul > li > ul {
    margin-top: var(--space-2);
    padding-left: var(--space-4);
    list-style: disc;
}

@media (min-width: 960px) {
    .article-summary-support--takeaways .article-summary-support__content > ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
}

.article-summary-support__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.article-summary-support__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: 0.65rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.4;
    text-decoration: none;
}

.article-summary-support__link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.article-summary-support__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}

.article-info-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(0, 194, 255, 0.08), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 94%, white 6%), var(--color-bg-card));
}

.article-info-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
}

.article-info-card__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.article-info-card__label {
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.article-info-card__value {
    margin-left: auto;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--color-heading);
}

.article-info-card__actions {
    margin-top: calc(var(--space-1) * -1);
    padding-top: var(--space-3);
}

.article-info-card__download.share-btn--download {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 16%, white 84%), color-mix(in srgb, var(--color-bg-card) 80%, white 20%));
    border-color: color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
    color: var(--color-heading);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.article-info-card__download.share-btn--download:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 18%, white 82%), color-mix(in srgb, var(--color-bg-card) 72%, white 28%));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}

/* Quick Answer */
.article__quick-answer,
.article__content .ai-summary-box {
    padding: var(--space-4);
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-light);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-1);
}

.quick-answer__icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.quick-answer__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.quick-answer__label svg {
    flex-shrink: 0;
    vertical-align: middle;
}

.quick-answer__text {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
    padding-left: var(--space-1);
}

.article__content .ai-summary-box p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}

.article__content .ai-summary-box p strong:first-child {
    color: var(--color-accent);
    font-weight: 700;
}

.article--help .article__quick-answer,
.article--help .article__content .ai-summary-box {
    margin-bottom: var(--space-5);
}

/* Key Takeaways */
.article__takeaways {
    padding: var(--space-4);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
}

.takeaways__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-success);
    margin-bottom: var(--space-2);
}

.takeaways__content {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.takeaways__content ul {
    padding-left: var(--space-5);
}

.takeaways__content li {
    margin-bottom: var(--space-1);
}

.help-article__sources {
    margin: var(--space-8) 0 var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}

.help-article__sources-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xl);
    color: var(--color-heading);
}

.help-article__sources-list {
    margin: 0;
    padding-left: var(--space-5);
}

.help-article__sources-item {
    margin-bottom: var(--space-2);
}

.help-article__sources-link {
    color: var(--color-accent);
    text-underline-offset: 2px;
}

.help-article__sources-link:hover {
    color: var(--color-tertiary);
}

.article-references {
    margin: var(--space-8) 0 var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}

.article-references__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xl);
    color: var(--color-heading);
}

.article-references__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-references__item {
    margin: 0;
}

.article-references__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-heading);
    text-decoration: none;
}

.article-references__link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.article-references__host {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-align: right;
}

/* Reading Progress */
.reading-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    background: color-mix(in srgb, var(--color-border) 55%, transparent);
    z-index: calc(var(--z-sticky) + 15);
    pointer-events: none;
}

.reading-progress__bar {
    display: block;
    width: var(--reading-progress, 0%);
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 62%, var(--color-tertiary) 38%));
    transition: width 120ms ease-out;
}

/* Table of Contents */
.toc {
    margin-bottom: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.toc__details {}

.toc__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    background: var(--color-bg-alt);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.toc__title::-webkit-details-marker {
    display: none;
}

.toc__list {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.8;
    margin: 0;
    list-style: none;
    counter-reset: toc-h2 toc-h3;
}

.toc__item {
    position: relative;
}

.toc__item--h2 {
    counter-increment: toc-h2;
    counter-reset: toc-h3;
}

.toc__item--h2::before {
    content: counter(toc-h2) ". ";
    font-weight: var(--weight-semibold);
    color: var(--color-tertiary);
    min-width: 1.5em;
    display: inline-block;
}

.toc__item--h3 {
    counter-increment: toc-h3;
    padding-left: var(--space-6);
}

.toc__item--h3::before {
    content: counter(toc-h2) "." counter(toc-h3) " ";
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    min-width: 2em;
    display: inline-block;
    font-size: var(--text-xs);
}

.toc__link {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.toc__link:hover {
    color: var(--color-accent);
}

.toc__item.is-active::before,
.toc__link.is-active {
    color: var(--color-accent);
}

.toc__link.is-active {
    font-weight: var(--weight-semibold);
}

.toc__item--h3 .toc__link {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.toc__item--h3 .toc__link:hover {
    color: var(--color-accent);
}

.toc--sidebar {
    display: none;
    margin-bottom: 0;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
}

.toc__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent);
}

.toc__eyebrow {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.toc__heading {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

.toc__progress {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.38rem 0.65rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-card));
    color: var(--color-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.toc--sidebar .toc__list {
    max-height: calc(100vh - 220px);
    overflow: auto;
    scrollbar-width: thin;
}

.toc--sidebar .toc__item--h3 {
    padding-left: var(--space-5);
}

/* Article Content */
.entry-content {
    font-family: 'Inter', var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text);
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: var(--leading-tight);
    scroll-margin-top: 88px;
    letter-spacing: -0.01em;
}

.entry-content h2 {
    font-size: clamp(1.45rem, 2.8vw, 1.85rem);
    margin: var(--space-12) 0 var(--space-4);
    padding: 0 10px;
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.entry-content h3 {
    font-size: clamp(1.2rem, 2.1vw, 1.45rem);
    margin: var(--space-8) 0 var(--space-4);
    padding-left: 10px;
    border-left: 3px solid color-mix(in srgb, var(--color-secondary) 70%, var(--color-border) 30%);
}

.entry-content h4 {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    margin: var(--space-6) 0 var(--space-3);
    padding-bottom: 6px;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 72%, var(--color-accent) 28%);
}

.entry-content h5 {
    font-size: 1rem;
    margin: var(--space-5) 0 var(--space-2);
    font-weight: var(--weight-semibold);
    color: color-mix(in srgb, var(--color-heading) 88%, var(--color-text-secondary) 12%);
}

.entry-content h6 {
    font-size: .92rem;
    margin: var(--space-4) 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.entry-content h2 + h3 {
    margin-top: var(--space-4);
}

.entry-content h2 + p,
.entry-content h3 + p,
.entry-content h4 + p,
.entry-content h5 + p,
.entry-content h6 + p {
    margin-top: var(--space-2);
}

.entry-content p {
    margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
    .entry-content h2 {
        padding: 9px 11px 9px 12px;
    }

    .entry-content h3 {
        padding-left: 10px;
    }
}

.entry-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

[data-theme="dark"] .entry-content .callout,
[data-theme="dark"] .entry-content .callout :where(p, li, strong, span, em, b, i, small, code) {
    color: #111827 !important;
}

[data-theme="dark"] .entry-content .callout a {
    color: #0f3ea8 !important;
}

/* Keep TOC links neutral even when TOC sits inside .entry-content */
.entry-content .toc .toc__link {
    color: var(--color-text-secondary);
    text-decoration: none;
    text-underline-offset: 0;
}

.entry-content .toc .toc__link:hover,
.entry-content .toc .toc__link:focus-visible {
    color: var(--color-accent);
    text-decoration: none;
}

.entry-content .toc .toc__item--h3 .toc__link {
    color: var(--color-text-muted);
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-6);
}

.entry-content li {
    margin-bottom: var(--space-2);
}

.entry-content li::marker {
    color: var(--color-accent);
}

.entry-content img {
    border-radius: var(--radius-md);
    margin: var(--space-6) 0;
}

.entry-content figure {
    margin: var(--space-8) 0;
}

.entry-content img.aligncenter {
    margin: var(--space-6) auto;
}

.entry-content figure.aligncenter,
.entry-content .wp-block-image.aligncenter,
.entry-content .wp-block-image.has-text-align-center {
    width: fit-content;
    max-width: 100%;
    margin: var(--space-8) auto;
}

.entry-content figure.aligncenter img,
.entry-content .wp-block-image.aligncenter img,
.entry-content .wp-block-image.has-text-align-center img,
.entry-content .has-text-align-center > img,
.entry-content p[style*="text-align:center"] > img,
.entry-content p[style*="text-align: center"] > img {
    margin-left: auto;
    margin-right: auto;
}

.entry-content figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* Keep injected ad units inside article width */
.entry-content .tc-ad-unit {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.entry-content .tc-ad-unit ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.entry-content .tc-ad-unit iframe,
.entry-content .tc-ad-unit embed,
.entry-content .tc-ad-unit object {
    max-width: 100% !important;
}

.entry-content blockquote {
    border-left: 4px solid var(--color-accent);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-6) 0;
    background: var(--color-bg-alt);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-secondary);
    font-style: italic;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content pre {
    background: var(--color-bg-code);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-6) var(--space-6);
    overflow-x: auto;
    margin: var(--space-6) 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    position: relative;
}

.entry-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-bg-code);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.entry-content pre code {
    background: none;
    display: block;
    padding: 0;
    border-radius: 0;
}

.entry-content table,
.page-content__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: 0.9375rem;
}

.entry-content th,
.entry-content td,
.page-content__body th,
.page-content__body td {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    text-align: left;
}

.entry-content th,
.page-content__body th {
    background: var(--color-bg-alt);
    font-weight: var(--weight-semibold);
}

.entry-content tr:nth-child(2n),
.page-content__body tr:nth-child(2n) {
    background: var(--color-bg-alt);
}

.entry-content .content-table-wrap,
.page-content__body .content-table-wrap {
    width: 100%;
    margin: var(--space-6) 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.entry-content .content-table-wrap > table,
.page-content__body .content-table-wrap > table {
    margin: 0;
}

.entry-content .content-table-wrap > table caption,
.page-content__body .content-table-wrap > table caption {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: left;
    color: var(--color-text-secondary);
    caption-side: top;
}

[data-theme="dark"] .entry-content tr[style*="background-color"] > th,
[data-theme="dark"] .entry-content tr[style*="background-color"] > td,
[data-theme="dark"] .entry-content th[style*="background-color"],
[data-theme="dark"] .entry-content td[style*="background-color"] {
    color: #111827 !important;
}

[data-theme="dark"] .entry-content tr[style*="background-color"] > th a,
[data-theme="dark"] .entry-content tr[style*="background-color"] > td a,
[data-theme="dark"] .entry-content th[style*="background-color"] a,
[data-theme="dark"] .entry-content td[style*="background-color"] a {
    color: #0f3ea8 !important;
}

.entry-content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
}

.article__content--help {
    margin-inline: auto;
}

.article__content--help > p:first-child {
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--color-border) 72%, var(--color-accent) 28%);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-bg) 78%, white 22%), color-mix(in srgb, var(--color-bg-card) 88%, var(--color-bg-alt) 12%));
    color: var(--color-heading);
    font-size: clamp(1rem, 1.7vw, 1.08rem);
    line-height: 1.82;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.article__content--help > p:first-child strong {
    color: var(--color-accent);
}

.article__content--help > h2,
.article__content--help > h3 {
    scroll-margin-top: 100px;
}

.article__content--help > ol {
    list-style: decimal;
    list-style-position: outside;
    padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-6) + var(--space-1));
    margin-bottom: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 94%, white 6%), var(--color-bg-alt));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.article__content--help > ol > li {
    margin: 0;
    padding: var(--space-2) 0;
}

.article__content--help > ol > li + li {
    border-top: 1px dashed color-mix(in srgb, var(--color-border) 78%, var(--color-accent) 22%);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
}

.article__content--help > ul {
    list-style: disc;
    list-style-position: outside;
    padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-6) + var(--space-1));
    margin-bottom: var(--space-6);
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-secondary) 18%);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-bg-card) 90%, var(--color-bg-alt) 10%);
}

.article__content--help > ul > li {
    margin: 0;
    padding: var(--space-2) 0;
}

.article__content--help > ul > li + li {
    border-top: 1px dashed color-mix(in srgb, var(--color-border) 82%, var(--color-secondary) 18%);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
}

.article__content--help > ol > li > p,
.article__content--help > ul > li > p {
    margin-bottom: 0;
}

.article__content--help > ol > li > ul,
.article__content--help > ol > li > ol,
.article__content--help > ul > li > ul,
.article__content--help > ul > li > ol {
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.article__content--help blockquote {
    border-left-width: 4px;
    font-style: normal;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-bg-alt) 84%, white 16%), color-mix(in srgb, var(--color-bg-card) 92%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 84%, transparent);
}

.article__content--help table {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

@media (max-width: 640px) {
    .entry-content .content-table-wrap,
    .page-content__body .content-table-wrap {
        margin: var(--space-5) 0;
    }

    .entry-content .content-table-wrap--stackable,
    .page-content__body .content-table-wrap--stackable {
        overflow: visible;
    }

    .entry-content .content-table--stackable,
    .page-content__body .content-table--stackable {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
        border: 0;
        box-shadow: none;
    }

    .entry-content .content-table--stackable thead,
    .page-content__body .content-table--stackable thead,
    .entry-content .content-table--stackable tr[data-responsive-header-row="true"],
    .page-content__body .content-table--stackable tr[data-responsive-header-row="true"] {
        display: none;
    }

    .entry-content .content-table--stackable tbody,
    .entry-content .content-table--stackable tr,
    .entry-content .content-table--stackable th,
    .entry-content .content-table--stackable td,
    .page-content__body .content-table--stackable tbody,
    .page-content__body .content-table--stackable tr,
    .page-content__body .content-table--stackable th,
    .page-content__body .content-table--stackable td {
        display: block;
        width: 100%;
    }

    .entry-content .content-table--stackable tbody,
    .page-content__body .content-table--stackable tbody {
        display: grid;
        gap: var(--space-3);
    }

    .entry-content .content-table--stackable tr,
    .page-content__body .content-table--stackable tr {
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-bg-card);
        box-shadow: var(--shadow-sm);
    }

    .entry-content .content-table--stackable tr:nth-child(2n),
    .page-content__body .content-table--stackable tr:nth-child(2n) {
        background: var(--color-bg-card);
    }

    .entry-content .content-table--stackable td,
    .entry-content .content-table--stackable th,
    .page-content__body .content-table--stackable td,
    .page-content__body .content-table--stackable th {
        padding: 0;
        border: 0;
        background: transparent !important;
        text-align: left !important;
    }

    .entry-content .content-table--stackable td + td,
    .entry-content .content-table--stackable th + td,
    .entry-content .content-table--stackable td + th,
    .entry-content .content-table--stackable th + th,
    .page-content__body .content-table--stackable td + td,
    .page-content__body .content-table--stackable th + td,
    .page-content__body .content-table--stackable td + th,
    .page-content__body .content-table--stackable th + th {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px dashed color-mix(in srgb, var(--color-border) 82%, transparent);
    }

    .entry-content .content-table--stackable td::before,
    .entry-content .content-table--stackable th::before,
    .page-content__body .content-table--stackable td::before,
    .page-content__body .content-table--stackable th::before {
        content: attr(data-cell-label);
        display: block;
        margin-bottom: var(--space-1);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    .article__content--help > p:first-child {
        padding: var(--space-4);
    }

    .article__content--help > ol,
    .article__content--help > ul {
        padding-right: var(--space-3);
    }
}

/* Article Footer */
.article__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-6);
}

.article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.tag:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-bg);
}

/* ── Share Buttons ── */
.share-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.share-buttons__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.share-btn__text {
    display: none;
}

.share-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-bg);
}

.share-btn--download {
    width: auto;
    padding: 0 0.95rem;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-card));
    color: var(--color-heading);
}

.share-btn--download span {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.share-buttons--prominent {
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(0, 194, 255, 0.07), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, white 4%), var(--color-bg-card));
}

.share-buttons--prominent .share-buttons__label {
    min-width: 100%;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

.share-buttons--prominent .share-btn {
    width: auto;
    height: 40px;
    padding: 0 0.95rem;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
}

.share-buttons--prominent .share-btn__text {
    display: inline;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* ── Author Box ── */
.author-box {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0 var(--space-4);
}

.author-box__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-1);
}

.author-box__avatar {
    flex-shrink: 0;
}

.author-box__avatar img,
.author-box__avatar .avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    max-width: 72px;
    border-radius: 50%;
    border: 3px solid var(--color-border);
}

.author-box__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.author-box__name {
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    font-size: var(--text-lg);
}

.author-box__name:hover {
    color: var(--color-accent);
}

.author-box__title {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.author-box__bio {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-3);
}

.author-box__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.author-box__trust-item {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-bg) 85%, var(--color-bg-alt) 15%);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.author-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.author-box__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 0.9rem;
    border-radius: var(--radius-full);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.author-box__action:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}

@media (max-width: 639px) {
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .author-box__header {
        justify-content: center;
    }

    .author-box__actions,
    .author-box__trust {
        justify-content: center;
    }
}

.article-inline-recommend {
    margin: var(--space-8) auto;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at bottom left, rgba(255, 214, 102, 0.18), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, white 4%), var(--color-bg-card));
}

.article-inline-recommend__header {
    margin-bottom: var(--space-4);
}

.article-inline-recommend__eyebrow {
    display: inline-flex;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.article-inline-recommend__title {
    margin: 0 0 var(--space-1);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
}

.article-inline-recommend__copy {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.article-inline-recommend__grid {
    display: grid;
    gap: var(--space-3);
}

.article-inline-recommend__card {
    display: grid;
    gap: 0.3rem;
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-bg) 82%, var(--color-bg-alt) 18%);
    color: var(--color-heading);
    text-decoration: none !important;
}

.article-inline-recommend__card:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.article-inline-recommend__card-type {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.article-inline-recommend__card-title {
    font-size: var(--text-base);
    line-height: var(--leading-tight);
}

.article-inline-recommend__card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

@media (min-width: 720px) {
    .article-inline-recommend__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Custom Sidebar Widgets ── */
/* ═══════════════════════════════════════════════════════
   Widget 1: Numbered List (.sw-numbered)
   ═══════════════════════════════════════════════════════ */

.sw-numbered {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sw-numbered__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.sw-numbered__item:hover {
    background: var(--color-bg-alt);
}

.sw-numbered__rank {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--color-tertiary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}

.sw-numbered__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 42px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.sw-numbered__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sw-numbered__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sw-numbered__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sw-numbered__item:hover .sw-numbered__title {
    color: var(--color-accent);
}

.sw-numbered__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════
   Widget 2: Thumbnail Cards (.sw-thumbcards)
   ═══════════════════════════════════════════════════════ */

.sw-thumbcards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sw-thumbcard {
    display: flex;
    gap: var(--space-3);
    text-decoration: none;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.sw-thumbcard:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sw-thumbcard__img-wrap {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.sw-thumbcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sw-thumbcard__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sw-thumbcard__cat {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sw-thumbcard__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sw-thumbcard:hover .sw-thumbcard__title {
    color: var(--color-accent);
}

.sw-thumbcard__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════
   Widget 3: Compact List (.sw-compact)
   ═══════════════════════════════════════════════════════ */

.sw-compact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.sw-compact__item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    padding-left: var(--space-3);
    border-left: 2px solid transparent;
    transition: border-color var(--transition-fast);
}

.sw-compact__item:last-child {
    border-bottom: none;
}

.sw-compact__item:hover {
    border-left-color: var(--color-accent);
}

.sw-compact__link {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    text-decoration: none;
    line-height: var(--leading-snug);
    margin-bottom: 2px;
}

.sw-compact__link:hover {
    color: var(--color-accent);
}

.sw-compact__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════
   Widget 4: Featured Card (.sw-featured)
   ═══════════════════════════════════════════════════════ */

.sw-featured {
    display: block;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    min-height: 200px;
    background: var(--color-bg-alt);
}

.sw-featured--has-img {
    min-height: 240px;
}

.sw-featured__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.sw-featured:hover .sw-featured__img {
    transform: scale(1.05);
}

.sw-featured__overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: inherit;
    padding: var(--space-5);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    z-index: 1;
}

.sw-featured:not(.sw-featured--has-img) .sw-featured__overlay {
    background: none;
    padding: var(--space-4);
}

.sw-featured__cat {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
}

.sw-featured__title {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: #fff;
    line-height: var(--leading-snug);
    margin-bottom: var(--space-1);
}

.sw-featured:not(.sw-featured--has-img) .sw-featured__title {
    color: var(--color-heading);
}

.sw-featured__meta {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
}

.sw-featured:not(.sw-featured--has-img) .sw-featured__meta {
    color: var(--color-text-muted);
}

/* ── Related Posts ── */
/* ═══════════════════════════════════════════════════════
   SINGLE POST LAYOUT (Content + Sidebar)
   ═══════════════════════════════════════════════════════ */

.single-layout {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
    padding: var(--space-6) 0 var(--space-12);
}

.single-layout__content {
    min-width: 0;
    padding: 0;
}

.single-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .single-layout {
        grid-template-columns: 1fr 320px;
    }

    .single-layout--no-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-layout__sidebar {
        position: sticky;
        top: 80px;
        align-self: start;
    }

    .toc--summary {
        display: none;
    }

    .toc--sidebar {
        display: block;
    }
}

@media (max-width: 1023px) {
    .toc--sidebar {
        display: none;
    }
}

.article-sidecard {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}

.article-sidecard__title {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-heading);
}

.article-sidecard__facts {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-sidecard__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
}

.article-sidecard__fact:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.article-sidecard__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.article-sidecard__value {
    font-size: var(--text-sm);
    color: var(--color-heading);
    text-align: right;
}

.article-sidecard__links {
    display: grid;
    gap: var(--space-2);
}

.article-sidecard__link {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-heading);
    text-decoration: none;
}

.article-sidecard__link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.article-sidecard__link small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

@media (min-width: 1200px) {
    .article--post .article__content > :where(h2, h3, h4, h5, h6) {
        max-width: 78ch;
        margin-left: auto;
        margin-right: auto;
    }
}

.article-sidebar__widgets {
    display: grid;
    gap: var(--space-6);
}

/* ── Sidebar Blocks ── */
.sidebar-block {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.sidebar-block__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-heading);
}

/* Sidebar: Popular Post Item */
.sidebar-post {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-2) 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border-light);
    transition: color var(--transition-fast);
}

.sidebar-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-post:first-child {
    padding-top: 0;
}

.sidebar-post__rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
}

.sidebar-post:hover .sidebar-post__rank {
    background: var(--color-accent);
    color: #fff;
}

.sidebar-post__body {
    flex: 1;
    min-width: 0;
}

.sidebar-post__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    line-height: var(--leading-tight);
    margin-bottom: 2px;
}

.sidebar-post:hover .sidebar-post__title {
    color: var(--color-accent);
}

.sidebar-post__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Sidebar: Categories */
.sidebar-cats {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-cat:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.sidebar-cat__count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    padding: 1px 8px;
    border-radius: var(--radius-full);
}

.sidebar-cat:hover .sidebar-cat__count {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════
   RELATED POSTS (Styled Cards)
   ═══════════════════════════════════════════════════════ */

.related-posts {
    padding: var(--space-8) 0 var(--space-10);
    border-top: 1px solid var(--color-border);
}

.related-posts__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.related-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.related-card__link:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.related-card__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.related-card__img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
}

.related-card__body {
    padding: var(--space-4);
}

.related-card__cat {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.related-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
}

.related-card__link:hover .related-card__title {
    color: var(--color-accent);
}

.related-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

@media (min-width: 640px) {
    .related-posts__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .related-posts__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .related-posts__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.related-posts--help .related-posts__grid {
    grid-template-columns: 1fr;
}

.related-posts--help .card--help-compact {
    overflow: visible;
}

.related-posts--help .card--help-compact .card__body {
    padding: var(--space-4);
}

.related-posts--help .card--help-compact .card__category {
    margin-bottom: var(--space-2);
}

.related-posts--help .card--help-compact .card__title {
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
}

.related-posts--help .card--help-compact .card__meta {
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .related-posts--help .related-posts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .related-posts--help .related-posts__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ── Single Offer ── */
.single-offer {
    padding: var(--space-6) var(--space-4) var(--space-12);
}

.single-offer__header {
    margin-bottom: var(--space-6);
}

.single-offer__badges {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.single-offer__brand {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.single-offer__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.single-offer__categories {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.single-offer__dates {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.single-offer__date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.single-offer__image {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.single-offer__cta-wrap {
    text-align: center;
    padding: var(--space-6) 0;
    margin: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* ── Single GitHub ── */
.single-github {
    padding: var(--space-6) var(--space-4) var(--space-12);
}

.single-github__header {
    margin-bottom: var(--space-6);
}

.single-github__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.single-github__icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.single-github__title {
    font-size: var(--text-2xl);
}

.single-github__categories {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.github-stats {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.github-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.github-stat svg {
    color: var(--color-text-muted);
}

.github-stat__value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
}

.github-stat__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.github-info {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.github-pill {
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

.github-pill--lang {
    color: var(--color-accent);
    border-color: var(--color-accent-light);
    background: var(--color-accent-bg);
}

.single-github__actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.single-github__topics {
    margin: var(--space-6) 0;
}

.single-github__topics-label {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ── Single Tool ── */
.single-tool {
    padding: var(--space-6) var(--space-4) var(--space-12);
}

.single-tool__header {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.single-tool__icon-wrap {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-light);
    color: var(--color-accent);
    border-radius: var(--radius-lg);
    font-size: var(--text-2xl);
}

.single-tool__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.single-tool__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.single-tool__usage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.single-tool__description {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    line-height: var(--leading-relaxed);
}

.single-tool__how-to {
    margin: var(--space-6) 0;
}

/* Tool Interface */
.tool-interface {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.tool-interface__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-2);
}

.tool-interface__textarea,
.tool-interface__input {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    resize: vertical;
    margin-bottom: var(--space-3);
    transition: border-color var(--transition-fast);
}

.tool-interface__textarea:focus,
.tool-interface__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.tool-interface__btn {
    width: 100%;
}

@media (min-width: 640px) {
    .tool-interface__btn {
        width: auto;
    }
}

.tool-interface__output {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.tool-interface__output-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-2);
}

.tool-interface__result {
    padding: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font-sans);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn--primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
}

.btn--outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}

/* ── Filter Bar ── */
.filter-bar {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-6);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.filter-chip--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.filter-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    margin-left: var(--space-2);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.filter-chip--active .filter-chip__count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ── Category Cloud ── */
.category-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.category-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-bg);
}

.category-chip__count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

/* ── Archive Page ── */
.archive-page {
    padding: var(--space-6) var(--space-4) var(--space-12);
}

.archive-page--blog {
    padding-top: var(--space-8);
}

.archive-page__header {
    margin-bottom: var(--space-6);
}

.archive-page__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.archive-page__title svg {
    color: var(--color-accent);
}

.archive-page__desc {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

.archive-page__count {
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.archive-page__query {
    color: var(--color-accent);
}

.archive-page--help {
    padding-top: var(--space-8);
}

.archive-page__ad {
    margin-bottom: var(--space-6) !important;
}

.archive-hero {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top left, rgba(0, 194, 255, 0.08), transparent 34%),
        radial-gradient(circle at bottom right, rgba(255, 97, 87, 0.09), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 94%, white 6%), var(--color-bg-card));
}

.archive-hero__copy {
    display: grid;
    gap: var(--space-3);
}

.archive-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.archive-hero__title {
    margin: 0;
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    color: var(--color-heading);
}

.archive-hero__desc {
    margin: 0;
    max-width: 64ch;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.archive-hero__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.archive-hero__highlight {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-bg-alt) 86%, transparent);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.archive-hero__stats {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.archive-hero__stat {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
}

.archive-hero__stat strong {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-heading);
}

.archive-hero__stat span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.archive-topics,
.archive-results {
    margin-bottom: var(--space-8);
}

.archive-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.archive-section__head--compact {
    margin-bottom: var(--space-3);
}

.archive-section__title {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--color-heading);
}

.archive-section__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.archive-lead {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.archive-lead__primary {
    min-width: 0;
}

.archive-lead__rail {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.archive-lead__rail-grid {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 1024px) {
    .archive-lead {
        grid-template-columns: minmax(0, 1.4fr) 360px;
        align-items: start;
    }
}

@media (max-width: 639px) {
    .card--post-compact {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .article-references__link {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-references__host {
        text-align: left;
    }
}

.help-hub__hero {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top right, rgba(0, 194, 255, 0.08), transparent 36%),
        radial-gradient(circle at bottom left, rgba(255, 97, 87, 0.08), transparent 34%),
        var(--color-bg-card);
}

.help-hub__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.help-hub__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    color: var(--color-heading);
}

.help-hub__desc {
    margin: 0;
    max-width: 60ch;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.help-hub__hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.help-hub__highlight {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-bg-alt) 86%, transparent);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.help-hub__stats {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.help-hub__stat {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
}

.help-hub__stat strong {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-heading);
}

.help-hub__stat span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.help-hub__search {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}

.help-hub__search-copy {
    display: grid;
    gap: 0.2rem;
}

.help-hub__search-title {
    color: var(--color-heading);
    font-size: var(--text-sm);
}

.help-hub__search-note {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.help-hub__search-input {
    width: 100%;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font: inherit;
}

.help-hub__search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.12);
}

.help-hub__search-button {
    justify-self: start;
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-tertiary));
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.help-hub__filters,
.help-hub__results {
    margin-bottom: var(--space-8);
}

.help-hub__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.help-hub__section-title {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--color-heading);
}

.help-hub__section-note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.filter-bar--help {
    padding-bottom: var(--space-3);
    margin-bottom: 0;
}

.filter-bar--help::-webkit-scrollbar {
    height: 8px;
}

.filter-bar--help::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: var(--radius-full);
}

.help-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.card--help-support {
    height: 100%;
}

.card--help-support .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

.card--help-support .card__category {
    align-self: flex-start;
    margin-bottom: 0;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-full);
    background: var(--color-accent-bg);
    line-height: 1;
}

.card--help-support .card__title {
    margin-bottom: 0;
    font-size: var(--text-lg);
}

.card--help-support .card__excerpt {
    margin-bottom: 0;
    color: var(--color-text-secondary);
}

.card__meta--help {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.card__signal {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.card__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-decoration: none;
}

.card__action:hover {
    color: var(--color-tertiary);
}

.help-hub__actions {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--space-5);
}

.help-hub__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    color: var(--color-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.help-hub__back-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.empty-state--help {
    padding: var(--space-10) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg-card);
}

@media (min-width: 768px) {
    .help-hub__hero {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
        align-items: end;
    }

    .help-hub__search {
        grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1fr) auto;
        align-items: center;
    }

    .help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (min-width: 1200px) {
    .help-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Search ── */
.search-form {
    display: flex;
    max-width: 560px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.search-form__input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: transparent;
    font-size: var(--text-base);
    color: var(--color-text);
    outline: none;
    font-family: var(--font-sans);
}

.search-form__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.search-result {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.search-result__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.search-result__title a {
    color: var(--color-heading);
}

.search-result__title a:hover {
    color: var(--color-accent);
}

.search-result__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.search-result__meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.search-result__url {
    color: var(--color-success);
}

/* ── 404 ── */
.error-page {
    text-align: center;
    padding: var(--space-12) var(--space-4) var(--space-16);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-page__content {
    max-width: 600px;
    margin: 0 auto;
}

/* Animated 404 visual */
.error-page__visual {
    position: relative;
    margin-bottom: var(--space-6);
    display: inline-block;
}

.error-page__glitch {
    font-size: clamp(6rem, 20vw, 10rem);
    font-weight: 900;
    line-height: 1;
    color: var(--color-accent);
    position: relative;
    letter-spacing: -0.04em;
    animation: error-pulse 3s ease-in-out infinite;
}

.error-page__glitch::before,
.error-page__glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.error-page__glitch::before {
    color: var(--color-accent-hover);
    animation: glitch-1 3s infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}

.error-page__glitch::after {
    color: var(--color-accent-light);
    animation: glitch-2 2.5s infinite linear alternate-reverse;
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

/* Orbiting planet */
.error-page__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    animation: orbit 8s linear infinite;
    pointer-events: none;
}

.error-page__planet {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -30px;
    color: var(--color-text-muted);
    opacity: 0.4;
    animation: counter-rotate 8s linear infinite;
}

/* Title & description */
.error-page__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.02em;
}

.error-page__desc {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
}

/* Search bar */
.error-page__search {
    margin-bottom: var(--space-6);
}

.error-page__search-wrap {
    display: flex;
    align-items: center;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    max-width: 460px;
    margin: 0 auto;
}

.error-page__search-wrap:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 99, 102, 241), 0.15);
}

.error-page__search-icon {
    flex-shrink: 0;
    margin-left: var(--space-3);
    color: var(--color-text-muted);
}

.error-page__search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
    outline: none;
    min-width: 0;
}

.error-page__search-btn {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.error-page__search-btn:hover {
    opacity: 0.9;
}

/* Action buttons */
.error-page__links {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.error-page__links .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Suggestions */
.error-page__suggestions {
    margin-top: var(--space-10);
    text-align: left;
}

.error-page__suggestions-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    text-align: center;
}

.error-page__suggestions-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.error-page__suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.error-page__suggestion:hover {
    border-color: var(--color-accent);
    transform: translateX(4px);
}

.error-page__suggestion-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-page__suggestion-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Animations */
@keyframes error-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.85;
    }
}

@keyframes glitch-1 {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-3px, 2px);
    }

    40% {
        transform: translate(3px, -2px);
    }

    60% {
        transform: translate(-2px, 1px);
    }

    80% {
        transform: translate(2px, -1px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes glitch-2 {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(2px, -1px);
    }

    40% {
        transform: translate(-2px, 2px);
    }

    60% {
        transform: translate(3px, -1px);
    }

    80% {
        transform: translate(-3px, 2px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes counter-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* ── Author Page ── */
.author-page {
    padding: var(--space-6) var(--space-4) var(--space-12);
}

.author-page__header {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
}

.author-page__avatar img,
.author-page__avatar .avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    max-width: max-content;
}

.author-page__name {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
}

.author-page__title {
    color: var(--color-accent);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.author-page__bio {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-3);
}

.author-page__social {
    display: flex;
    gap: var(--space-2);
}

/* ── Pagination ── */
.pagination {
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
}

.pagination .page-numbers {
    list-style: none;
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.pagination .page-numbers li {}

.pagination .page-numbers li>a,
.pagination .page-numbers li>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    box-sizing: border-box;
    gap: var(--space-1);
}

/* Reset inner spans inside prev/next — no extra box */
.pagination .page-numbers .prev span,
.pagination .page-numbers .next span {
    display: inline;
    min-width: auto;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
}

.pagination .page-numbers .prev,
.pagination .page-numbers .next {
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
}

.pagination .page-numbers li>a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.pagination .page-numbers .current {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* ── Comments ── */
.comments-area {
    padding: var(--space-8) 0;
    margin-top: var(--space-6);
}

.comments-area__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Comment List ── */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
}

.comment-list .children {
    list-style: none;
    padding-left: var(--space-6);
    margin: 0;
    border-left: 2px solid var(--color-border);
}

.comment {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-left: 3px solid transparent;
    transition: border-left-color var(--transition-fast);
}

.comment:hover {
    border-left-color: var(--color-accent);
}

.comment__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.comment__header {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.comment__avatar {
    flex-shrink: 0;
}

.comment__avatar img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
}

.comment__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comment__author {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--color-heading);
}

.comment__author a {
    color: var(--color-heading);
    text-decoration: none;
}

.comment__author a:hover {
    color: var(--color-accent);
}

.comment__date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: block;
}

.comment__date a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.comment__date a:hover {
    color: var(--color-accent);
}

.comment__content {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.comment__content p:last-child {
    margin-bottom: 0;
}

.comment__pending {
    font-size: var(--text-sm);
    color: var(--color-warning);
    font-style: italic;
    background: rgba(234, 179, 8, 0.1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-warning);
}

.comment__actions {
    display: flex;
    gap: var(--space-3);
}

.comment__reply a {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-secondary);
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.comment__reply a:hover {
    background: var(--color-secondary);
    color: #fff;
}

/* ── Comment Form ── */
#respond {
    margin-top: var(--space-6);
}

#respond .comment-reply-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-4);
}

#respond .comment-reply-title small {
    font-size: var(--text-xs);
    margin-left: var(--space-2);
}

#respond .comment-reply-title small a {
    color: var(--color-accent);
    text-decoration: none;
}

#respond .logged-in-as,
#respond .comment-notes {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

#respond .logged-in-as a,
#respond .comment-notes a {
    color: var(--color-accent);
    text-decoration: none;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.comment-form p {
    margin: 0 0 var(--space-3);
}

.comment-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    margin-bottom: var(--space-1);
}

.comment-form .required {
    color: var(--color-accent);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.comment-form .form-submit {
    margin-top: var(--space-2);
}

.comment-form .btn--primary,
.comment-form input[type="submit"],
.comment-form .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.comment-form .btn--primary:hover,
.comment-form input[type="submit"]:hover,
.comment-form .submit:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
}

/* Comment form cookies consent */
.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.comment-form-cookies-consent label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
    margin-bottom: 0;
}

/* Responsive: stack form fields */
@media (max-width: 639px) {
    .comment-list .children {
        padding-left: var(--space-3);
    }

    .comment {
        padding: var(--space-3);
    }

    .comment__avatar img {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
}

/* ── Page Content ── */
.page-content {
    padding: var(--space-6) var(--space-4) var(--space-12);
}

.page-content__header {
    margin-bottom: var(--space-6);
}

.page-content__title {
    font-size: var(--text-2xl);
}

@media (min-width: 768px) {
    .page-content__title {
        font-size: var(--text-3xl);
    }
}

/* ── About Page ── */
.page-id-4688 .page-content__body h2 {
    margin-top: var(--space-7);
}

.page-id-4688 .page-content__body h3 {
    margin-top: var(--space-5);
}

.page-id-4688 .page-content__body ul {
    margin-bottom: var(--space-5);
}

.page-id-4688 .page-content__body li + li {
    margin-top: var(--space-2);
}

.page-id-4688 .about-intro {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--color-info) 14%, transparent), transparent 36%),
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 28%),
        var(--color-bg-card);
    box-shadow: var(--shadow-sm);
}

.page-id-4688 .about-intro .lead {
    margin: 0;
    font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
    line-height: 1.75;
    color: var(--color-heading);
}

.page-id-4688 .page-content__body strong {
    color: var(--color-heading);
}

@media (max-width: 767px) {
    .page-id-4688 .about-intro {
        padding: var(--space-4);
    }

    .page-id-4688 .about-intro .lead {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
    }
}

/* ── Contact Page ── */
.page-id-4769 .page-content__body h2 {
    margin-top: var(--space-7);
}

.page-id-4769 .page-content__body h3 {
    margin-top: var(--space-5);
}

.page-id-4769 .page-content__body ul {
    margin-bottom: var(--space-5);
}

.page-id-4769 .page-content__body li + li {
    margin-top: var(--space-2);
}

.page-id-4769 .page-content__body ul:first-of-type {
    list-style: none;
    padding-left: 0;
}

.page-id-4769 .page-content__body ul:first-of-type li {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.page-id-4769 .contact-intro {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 10% 14%, color-mix(in srgb, var(--color-info) 14%, transparent), transparent 36%),
        radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--color-tertiary) 10%, transparent), transparent 28%),
        var(--color-bg-card);
    box-shadow: var(--shadow-sm);
}

.page-id-4769 .contact-intro .lead {
    margin: 0;
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.75;
    color: var(--color-heading);
}

.page-id-4769 .contact-note {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-card));
}

.page-id-4769 .contact-note p {
    margin: 0;
}

.page-id-4769 .page-content__body a {
    overflow-wrap: anywhere;
}

.page-id-4769 .contact-email {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-full);
    font-weight: var(--weight-semibold);
    line-height: 1;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.page-id-4769 .contact-email--info {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.page-id-4769 .contact-email--editorial {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.page-id-4769 .contact-email a {
    color: inherit !important;
    text-decoration: none !important;
}

.page-id-4769 .contact-email:hover {
    transform: translateY(-1px);
}

[data-theme="dark"] .page-id-4769 .contact-email--info {
    color: #0f172a;
    background: #93c5fd;
    border-color: #60a5fa;
}

[data-theme="dark"] .page-id-4769 .contact-email--editorial {
    color: #052e26;
    background: #6ee7b7;
    border-color: #34d399;
}

@media (max-width: 767px) {
    .page-id-4769 .contact-intro,
    .page-id-4769 .contact-note {
        padding: var(--space-4);
    }

    .page-id-4769 .contact-intro .lead {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
    }
}

/* ── Footer ── */
.site-footer {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    padding: var(--space-10) 0 var(--space-6);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.footer__heading {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    color: var(--color-heading);
}

.footer__text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.footer__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer__links a {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: var(--color-accent);
}

.footer__bottom {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Empty State ── */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
}

.empty-state svg {
    margin: 0 auto var(--space-4);
}

/* ── Widget ── */
.widget {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.widget__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-heading);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-secondary);
}

/* Dedicated 300x250 sidebar ad widget (avoids generic widget padding squeeze) */
.widget.widget_tc_ad_300x250,
.single-layout__sidebar .widget.widget--ad-300x250 {
    /* Keep normal widget look, only reduce horizontal padding to fit 300x250 */
    padding: var(--space-3) var(--space-2);
    text-align: center;
}

.tc-sidebar-ad--300x250 {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
}

.tc-sidebar-ad-slot>* {
    max-width: 100%;
}

.tc-sidebar-ad-slot iframe,
.tc-sidebar-ad-slot embed,
.tc-sidebar-ad-slot object {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.tc-sidebar-ad--300x250 .adsbygoogle {
    display: inline-block !important;
    width: 300px !important;
    height: 250px !important;
    max-width: 100%;
}

/* Backward compatibility: ad class added by JS for broad browser support */
.single-layout__sidebar .widget.widget--ad-300x250 ins.adsbygoogle {
    display: inline-block !important;
    width: 300px !important;
    height: 250px !important;
}

/* ── Search Widget ── */
.widget_search {
    padding: var(--space-4);
}

.widget_search .search-form,
.widget_search form {
    display: flex;
    position: relative;
    margin-bottom: 0;
}

.widget_search label {
    flex: 1;
    display: flex;
    margin: 0;
}

.widget_search .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.widget_search .search-field,
.widget_search input[type="search"],
.widget_search input[type="text"] {
    width: 100%;
    padding: 10px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.widget_search .search-field:focus,
.widget_search input[type="search"]:focus,
.widget_search input[type="text"]:focus {
    border-color: var(--color-accent);
}

.widget_search .search-submit,
.widget_search input[type="submit"],
.widget_search button[type="submit"] {
    padding: 10px 16px;
    background: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.widget_search .search-submit:hover,
.widget_search input[type="submit"]:hover,
.widget_search button[type="submit"]:hover {
    background: var(--color-accent-hover);
}

/* ── Default List Widgets (Recent Posts, Archives, Categories, etc.) ── */
.widget_recent_entries ul,
.widget_recent_comments ul,
.widget_archive ul,
.widget_categories ul,
.widget_meta ul,
.widget_pages ul,
.widget_nav_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget_recent_entries li,
.widget_recent_comments li,
.widget_archive li,
.widget_categories li,
.widget_meta li,
.widget_pages li,
.widget_nav_menu li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    padding-left: var(--space-3);
    border-left: 2px solid transparent;
    transition: border-color var(--transition-fast);
}

.widget_recent_entries li:last-child,
.widget_recent_comments li:last-child,
.widget_archive li:last-child,
.widget_categories li:last-child,
.widget_meta li:last-child,
.widget_pages li:last-child,
.widget_nav_menu li:last-child {
    border-bottom: none;
}

.widget_recent_entries li:hover,
.widget_recent_comments li:hover,
.widget_archive li:hover,
.widget_categories li:hover,
.widget_meta li:hover,
.widget_pages li:hover,
.widget_nav_menu li:hover {
    border-left-color: var(--color-accent);
}

.widget_recent_entries a,
.widget_recent_comments a,
.widget_archive a,
.widget_categories a,
.widget_meta a,
.widget_pages a,
.widget_nav_menu a {
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: color var(--transition-fast);
    line-height: var(--leading-snug);
}

.widget_recent_entries a:hover,
.widget_recent_comments a:hover,
.widget_archive a:hover,
.widget_categories a:hover,
.widget_meta a:hover,
.widget_pages a:hover,
.widget_nav_menu a:hover {
    color: var(--color-accent);
}

/* Post dates in recent entries */
.widget_recent_entries .post-date {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Comment author in recent comments */
.widget_recent_comments .recentcomments {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.widget_recent_comments .comment-author-link {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

/* Category / archive item counts */
.widget_categories li,
.widget_archive li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* ── Text Widget ── */
.widget_text .textwidget {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.widget_text .textwidget p:last-child {
    margin-bottom: 0;
}

/* ── Back to Top ── */
.back-to-top {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    z-index: var(--z-sticky);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.back-to-top.is-visible {
    display: flex;
}

.back-to-top:hover {
    transform: translateY(-2px);
}

/* ── Print Styles ── */
@media print {

    .site-header,
    .site-footer,
    .mobile-nav,
    .share-buttons,
    .back-to-top,
    .related-posts,
    .comments-area,
    .pagination,
    .hero,
    .toc {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
    }
}

/* ── Code Copy Button ── */
.code-copy-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.entry-content pre:hover .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}