/* ── Design tokens ─────────────────────────────────────────────── */
body.dark-mode {
    --c-text: hsl(240, 6%, 88%);
    --c-text-secondary: hsl(240, 4%, 70%);
    --c-text-tertiary: hsl(240, 2%, 50%);
    --c-text-quaternary: hsl(240, 4%, 62%);
    --c-text-sub: hsl(220, 10%, 58%);
    --c-text-disable: hsla(0, 0%, 100%, 0.3);

    --c-grid-border: hsl(0, 0%, 20%);

    --c-bg: hsl(240, 3%, 8%);
    --c-surface: hsl(240, 2%, 11%);
    --c-surface-high: hsl(210, 2%, 17%);

    --c-gray-25: hsl(240, 3%, 14%);
    --c-gray-50: hsl(240, 3%, 12%);
    --c-gray-100: hsl(240, 3%, 18%);
    --c-gray-150: hsl(240, 3%, 16%);
    --c-gray-175: hsl(240, 3%, 20%);
    --c-gray-185: hsl(240, 3%, 22%);
    --c-gray-195: hsl(240, 3%, 24%);
    --c-gray-200: hsl(240, 3%, 26%);
    --c-gray-300: hsl(240, 3%, 35%);
    --c-gray-400: hsl(240, 3%, 50%);
    --c-gray-500: hsl(240, 3%, 57%);
    --c-gray-600: hsl(240, 4%, 65%);
    --c-gray-650: hsl(240, 4%, 72%);
    --c-gray-700: hsl(240, 4%, 78%);
    --c-gray-800: hsl(240, 4%, 85%);
    --c-gray-850: hsl(240, 4%, 88%);
    --c-gray-900: hsl(240, 5%, 92%);

    --card-border: 1px solid hsl(0, 0%, 20%);
    --card-shadow: 0px 2px 6px -3px rgb(0 0 0 / 40%);

    color: var(--c-text);
    background-color: var(--c-bg);
}

/* ── Loading overlays ──────────────────────────────────────────── */
body.dark-mode.loading::before {
    background: rgba(0, 0, 0, 0.65);
}

body.dark-mode.loading::after {
    background-image: url(../../assets/icons/spinner-white.svg);
}

.dark-mode .match-loading-content,
.dark-mode .match-error-content {
    background: var(--c-surface);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark-mode .match-loading-text {
    color: var(--c-text);
}

.dark-mode .settings-inner.loading::after {
    background-color: hsl(0deg 0% 0% / 35%);
    border-color: hsl(0, 0%, 30%);
}

.dark-mode .settings-inner.loading::before {
    background-image: url(../../assets/icons/spinner-white.svg);
}

.dark-mode .settings.sticky .settings-inner.loading::after {
    background-color: hsl(0deg 0% 0% / 55%);
}

.dark-mode .settings.sticky .settings-inner.loading::before {
    background-image: url(../../assets/icons/spinner-white.svg);
}

/* ── Header ────────────────────────────────────────────────────── */
.dark-mode .page-header .main-header {
    box-shadow: hsla(0, 0%, 100%, 0.15) 0 1px;
    background-color: var(--c-surface);
}

.dark-mode .page-header .header-app-tab,
.dark-mode .page-header .mobile-active-logo {
    color: var(--c-text);
}

.dark-mode .page-header .app-switch-link .icon img {
    filter: brightness(0) invert(1);
}

.dark-mode .page-header .header-app-tab.active::after {
    background-color: var(--c-bg);
    border-top-color: hsla(0, 0%, 100%, 0.15);
    border-left-color: hsla(0, 0%, 100%, 0.15);
}

.dark-mode .page-header .mobile-nav-divider {
    background-color: var(--c-gray-300);
}

.dark-mode .page-header .trail-nav .app-switch-link.active {
    background-color: var(--c-gray-100);
    color: var(--c-text);
}


.dark-mode .page-header .nav-item {
    background-color: hsl(240 3% 5% / 1);
    border-color: hsla(0, 0%, 100%, 0.1);
    color: var(--c-text);
}

.dark-mode .page-header .nav-item:hover,
.dark-mode .page-header .nav-item.auth-login-btn:hover {
    background-color: hsl(240 3% 0% / 1);
    border-color: hsla(0, 0%, 100%, 0);
    color: var(--c-text);
}

.dark-mode .page-header .nav-item-small {
    background-color: hsl(240 3% 5% / 1);
    border-color: hsla(0, 0%, 100%, 0.1);
    color: var(--c-text);
}

.dark-mode .page-header .nav-item-small:hover {
    background-color: hsl(240 3% 0% / 1);
    border-color: hsla(0, 0%, 100%, 0);
}

.dark-mode .page-header .nav-item-small .icon {
    color: var(--c-gray-400);
}
@media (max-width: 960px) {
    .dark-mode .page-header .header-nav.trail-nav {
        background-color: var(--c-surface);
        box-shadow: -8px 0 32px hsla(0, 0%, 0%, 0.45);
    }
}

.dark-mode .page-header .mobile-nav-close svg {
    stroke: var(--c-gray-400);
}

/* ── Tooltips & toasts ─────────────────────────────────────────── */
.dark-mode .tippy-box[data-theme~=light] {
    background-color: #000 !important;
    border: 1px solid hsl(0deg 0% 100% / 20%) !important;
    color: var(--c-text-secondary) !important;
    box-shadow: 0 0 20px 4px rgba(154, 161, 177, .1), 0 4px 80px -8px rgba(36, 40, 47, .15), 0 4px 4px -2px rgba(91, 94, 105, .1);
}

.dark-mode .tippy-content {
    color: var(--c-text-secondary) !important;
}

.dark-mode .myToast {
    background: var(--c-surface) !important;
    border: 1px solid hsl(0, 0%, 28%) !important;
    color: var(--c-text) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.dark-mode .myToast:hover {
    border: 1px solid hsl(0, 0%, 38%) !important;
}

.dark-mode .myToast .toast-close {
    color: var(--c-text) !important;
}

.dark-mode .myToast .progress-bar {
    background-color: var(--c-gray-700);
}

/* ── TomSelect ─────────────────────────────────────────────────── */
.dark-mode .ts-dropdown {
    background-color: var(--c-surface);
    border-color: hsl(0, 0%, 28%);
}

.dark-mode .input-wrapper input[type="text"],
.dark-mode .input-wrapper input[type="email"] {
    background-color: var(--c-surface);
    box-shadow: inset hsla(0, 0%, 100%, 0.12) 0 0 0 1px;
    color: var(--c-text);
}

/* ── Settings / controls / main input (shared Lab + Match) ─────── */
.dark-mode .controls {
    background-color: var(--c-surface-high);
    box-shadow: inset rgb(71 73 75) 0 0 0 1px;
}

.dark-mode .main-input .input-wrapper .user-text {
    background-color: var(--c-surface);
    color: var(--c-text);
    box-shadow: inset rgb(71 73 75) 0 0 0 1px;
}

.dark-mode .main-input .input-wrapper .user-text:hover {
    background-color: #000;
    box-shadow: inset rgb(71 73 75) 0 0 0 1px;
}

.dark-mode .main-input .input-wrapper .user-text:focus {
    background-color: #000;
    box-shadow: inset rgb(71 73 75) 0 0 0 1px;
}

.dark-mode .main-input .input-wrapper .user-text::selection {
    color: #000;
    background: hsl(240, 6%, 88%);
}

.dark-mode .main-input .user-text-submit {
    background-color: var(--c-gray-700);
    color: hsl(0deg 0% 100%);
    box-shadow: hsl(0deg 0% 0%) 0px 3px 8px -4px, hsl(0, 0%, 0%) 0 2px 0 0;
    border: 1px solid #646464;
}

.dark-mode .main-input .user-text-submit:hover {
    background-color: var(--c-gray-700);
    color: hsl(0deg 0% 100%);
    box-shadow: hsl(0deg 0% 0%) 0px 3px 8px -4px, hsl(0, 0%, 0%) 0 2px 0 0;
    border: 1px solid #6e6e6e;
}

.dark-mode .main-input .clear-text-button .icon {
    filter: brightness(0) invert(1);
}

.dark-mode .main-input .chara-counter {
    color: var(--c-gray-400);
}

.dark-mode .custom-caret {
    background-color: var(--c-gray-500);
}

.dark-mode .custom-caret .counter-height {
    background-color: var(--c-gray-800);
}

/* ── Sticky settings bar (Lab) ───────────────────────────────────
   Must beat `.lab-page .settings.sticky …` in styles.css (loaded after dark.css). */
body.dark-mode .lab-page .settings.sticky .settings-wrapper {
    background-color: var(--c-bg);
    box-shadow:
        inset 0 1px 0 0 hsla(0, 0%, 100%, 0.08),
        0 -4px 12px -4px hsla(0, 0%, 0%, 0.35);
}

body.dark-mode .lab-page .settings.sticky .controls {
    background-color: transparent;
    box-shadow: none;
}

body.dark-mode .lab-page .settings.sticky .font-stream .font .wrapper {
    background-color: var(--c-surface);
    box-shadow: inset hsl(0, 0%, 28%) 0 0 0 1px;
}

body.dark-mode .lab-page .settings.sticky .font-stream .font .wrapper:hover {
    background-color: var(--c-surface-high);
    box-shadow: inset hsl(0, 0%, 35%) 0 0 0 1px;
}

body.dark-mode .lab-page .settings.sticky .main-input .input-wrapper .user-text,
body.dark-mode .lab-page .settings.sticky .main-input .input-wrapper .user-text:hover,
body.dark-mode .lab-page .settings.sticky .main-input .input-wrapper .user-text:focus {
    background-color: var(--c-surface);
    box-shadow: inset hsl(0, 0%, 28%) 0 0 0 1px;
    color: var(--c-text);
}

body.dark-mode .lab-page .settings.sticky .main-input .input-wrapper .user-text:hover {
    background-color: var(--c-surface-high);
    box-shadow: inset hsl(0, 0%, 35%) 0 0 0 1px;
}

body.dark-mode .lab-page .settings.sticky .fs-main .fs-input-wrapper:hover {
    background-color: var(--c-surface-high);
}

body.dark-mode .lab-page .settings.sticky .fs-main .fs-list {
    background-color: var(--c-surface);
}

body.dark-mode .lab-page .settings.sticky .fs-main .fs-list .item:hover {
    background-color: var(--c-surface-high);
}

body.dark-mode .lab-page .settings.sticky .font .font-weight-select {
    background-color: var(--c-surface);
    border-color: hsl(0, 0%, 28%);
    color: var(--c-text);
}

body.dark-mode .lab-page .settings.sticky .font .font-weight-select:hover,
body.dark-mode .lab-page .settings.sticky .font .font-weight-select:focus {
    border-color: hsl(0, 0%, 40%);
}

body.dark-mode .lab-page .settings.sticky .fs-main.active .fs-list {
    border-bottom-color: hsl(0, 0%, 28%);
}

/* ── Font select (Lab) ─────────────────────────────────────────── */
.dark-mode .fs-main .fs-wrapper {
    background-color: var(--c-surface);
    border-color: hsl(0, 0%, 28%);
}

.dark-mode .fs-main .fs-wrapper:hover {
    background-color: var(--c-surface-high);
    border-color: hsl(0, 0%, 35%);
}

.dark-mode .fs-main.active .fs-wrapper {
    background-color: var(--c-surface);
    box-shadow: 0 16px 34px -6px rgba(0, 0, 0, 0.45);
}

.dark-mode .fs-main .fs-dropdown,
.dark-mode .fs-main .fs-list,
.dark-mode .lab-page .settings.sticky .fs-main .fs-list {
    background-color: var(--c-surface);
}

.dark-mode .fs-main.active .fs-input-wrapper {
    border-bottom-color: hsl(0, 0%, 28%);
}

.dark-mode .fs-main .fs-list .item:hover {
    background-color: var(--c-surface-high);
}

.dark-mode .font-select .upload-btn {
    background-color: var(--c-surface);
    color: var(--c-text);
    border-color: hsl(0, 0%, 28%);
}

.dark-mode .font-select .upload-btn:hover {
    background-color: var(--c-surface-high);
    border-color: hsl(0, 0%, 35%);
}

.dark-mode .font-select .upload-btn > span {
    color: var(--c-gray-400);
}

.dark-mode .font-select .divider::after {
    background-color: var(--c-bg);
    box-shadow: 0px 2px 8px 5px var(--c-bg), 0px 3px 12px 10px var(--c-bg);
}

.dark-mode .upload-btn-tooltip {
    border-color: hsl(0, 0%, 100%, 0.12);
}

/* ── Font cards (Lab) ────────────────────────────────────────────── */
.dark-mode .font .wrapper {
    background-color: var(--c-surface);
    box-shadow: inset hsl(0, 0%, 28%) 0 0 0 1px;
}

.dark-mode .font .options .option span {
    background-color: var(--c-surface-high);
    color: var(--c-text-secondary);
    box-shadow: inset hsl(0, 0%, 28%) 0 0 0 1px;
}

.dark-mode .font .options .option:hover span {
    background-color: hsl(240, 3%, 16%);
    box-shadow: inset hsl(0, 0%, 35%) 0 0 0 1px;
}

.dark-mode .font .options .option input:checked + span {
    background-color: var(--c-gray-900);
    color: hsl(240, 3%, 8%);
}
.dark-mode .font .options .option span::after {
    background-image: url(../../assets/images/check-black.svg);
}

.dark-mode .font.loading .overlay {
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: inset hsl(0, 0%, 28%) 0 0 0 1px;
}

.dark-mode .font.loading .progress-circle {
    background: conic-gradient(var(--c-gray-700) var(--progress), var(--c-surface-high) 0deg);
}

.dark-mode .font.loading .progress-text {
    background-color: var(--c-surface-high);
    color: var(--c-text);
}

/* ── Preferences (Match) ───────────────────────────────────────── */
.dark-mode .preferences .option-wrapper {
    background-color: var(--c-surface);
    box-shadow: 0px 0px 0px 1px #575757;
}

.dark-mode .preferences .option-wrapper:hover {
    background-color: var(--c-bg);
}

.dark-mode .preferences .display-label.icon img {
    filter: brightness(0) invert(1);
}

.dark-mode .preferences .option .display-label .value {
    color: var(--c-gray-400);
}

.dark-mode .preferences .display-label.text {
    color: var(--c-text-secondary);
}

.dark-mode .preferences .option > input[type="radio"]:checked ~ .display-label {
    opacity: 1;
    background-color: #000000;
    box-shadow: inset 0px 0px 0px 1px hsl(0deg 0% 29.51%), 0px 1px 4px -2px rgb(0 0 0);
    color: var(--c-text);
}

/* ── Searchable select (Match) ─────────────────────────────────── */
.dark-mode .searchable-select__trigger {
    border: 1px solid #575757;
    background-color: var(--c-surface);
    color: var(--c-text);
}

.dark-mode .searchable-select__trigger:hover {
    background-color: hsl(0, 0%, 5%);
    border: 1px solid #575757;
}

.dark-mode .searchable-select__dropdown {
    background-color: #2a2b2c;
    border: 1px solid hsl(0deg 0% 32%);
}

.dark-mode .searchable-select__search-input {
    background-color: #2a2b2c;
    color: var(--c-text);
    border-bottom: 1px solid hsl(0deg 0% 32%);
}

.dark-mode .searchable-select__chevron {
    filter: brightness(0.5) invert(1);
}

.dark-mode .searchable-select__option {
    color: var(--c-text);
}

.dark-mode .searchable-select__option:hover {
    background-color: #000;
}

.dark-mode .searchable-select__option.is-selected {
    background-image: url(../../assets/icons/check-white.svg);
}

/* ── Tabs (Lab + Match) ────────────────────────────────────────── */
.dark-mode .tabs-header {
    border-bottom-color: var(--c-grid-border);
}

.dark-mode .tabs-header .tab-item.active {
    border-color: var(--c-grid-border);
    box-shadow: 0 1px 0 0 var(--c-bg);
}

.dark-mode .match .tabs-header {
    border-bottom: 1px solid var(--c-grid-border);
}

.dark-mode .match .tabs-header .tab-item {
    color: var(--c-text-secondary);
}

.dark-mode .match .tabs-header .tab-item:hover {
    background-color: transparent;
    color: var(--c-text);
}

.dark-mode .match .tabs-header .tab-item.active {
    color: var(--c-text);
    border: 1px solid var(--c-grid-border);
    border-bottom: none;
    box-shadow: 0 1px 0 0 hsl(240deg 2.56% 7.65%);
}

.dark-mode .match .tabs-header .tab-item.active:hover {
    background-color: transparent;
}

.dark-mode .match .tabs-header .tab-item .tab-counter {
    background-color: var(--c-gray-800);
    color: hsl(240, 3%, 8%);
}

.dark-mode .match .tabs-header .reset-archive-btn {
    background-color: var(--c-surface);
    box-shadow: inset 0 0 0 1px hsl(0, 0%, 35%);
}

.dark-mode .match .tabs-header .reset-archive-btn:hover {
    box-shadow: inset 0 0 0 1px hsl(0, 0%, 50%);
}

.dark-mode .match .tabs-header .reset-archive-btn .icon {
    filter: brightness(0) invert(1);
}

/* ── Font grid items (Match) ─────────────────────────────────────── */
.dark-mode .match-content .item-grid .fontitem-wrapper.is-expanded {
    background-color: hsl(0deg 0% 7.06%);
}

.dark-mode .match-content .item-grid .fontitem-wrapper.is-expanded .fontitem {
    background-color: var(--c-surface);
}

.dark-mode .match-content .item-grid .font-group-title .name {
    color: var(--c-text);
}

.dark-mode .match-content .item-grid .font-group-title .meta {
    color: var(--c-text-tertiary);
    border-right-color: var(--c-grid-border);
}

.dark-mode .match-content .item-grid .font-group-title .meta .icon {
    color: var(--c-text-tertiary);
}

.dark-mode .match-content .item-grid .font-group-title .collapse-btn {
    background-color: var(--c-surface);
    color: var(--c-text-secondary);
    box-shadow: inset 0px 0px 0px 1px hsl(0, 0%, 32%);
}

.dark-mode .match-content .item-grid .font-group-title .collapse-btn:hover {
    background-color: var(--c-gray-175);
    color: var(--c-text);
}

.dark-mode .fontitem {
    --font-item-border-color: var(--c-grid-border);
}

.dark-mode .has-family .fontitem {
    --family-layer-bg: var(--c-bg);
}

.dark-mode .fontitem:hover {
    --font-item-border-color: hsl(0, 0%, 40%);
    box-shadow: 0px 0px 12px -6px #000;
}

.dark-mode .fontitem .item-media img {
    filter: brightness(0.93) invert(1);
}

.dark-mode .fontitem:hover img {
    filter: brightness(0.93) invert(1);
}

.dark-mode .fontitem .item-action {
    background-color: var(--c-gray-800);
    color: hsl(240, 3%, 8%);
}

.dark-mode .fontitem .item-action svg {
    color: hsl(240, 3%, 8%);
}

.dark-mode .fontitem .item-action:hover {
    background-color: var(--c-gray-300);
}
.dark-mode .fontitem .item-action.is-favorite {
    background-color: var(--c-gray-500);
}
#defaultTab .fontitem .item-action.is-favorite svg.star {
    color: #000;
    fill: #000;
}

.dark-mode .fontitem .stacked-indicator::before {
    background-color: var(--c-grid-border);
}

.dark-mode .fontitem .stacked-indicator .expand-btn {
    background-color: var(--c-gray-800);
    color: hsl(240, 3%, 10%);
}

.dark-mode .fontitem .stacked-indicator .expand-btn:hover {
    background-color: var(--c-gray-300);
    color: var(--c-text);
}

.dark-mode .fontitem .item-media-skeleton {
    background-color: var(--c-surface-high);
}

.dark-mode .match-content .item-grid .fontitem-wrapper.loading .fontitem:hover {
    border-color: var(--c-grid-border);
}
.dark-mode .match-content .item-grid .fontitem-wrapper {
    background-color: hsl(0deg 0% 7.06%);
}
.dark-mode .match-content .item-grid {
    background-color: hsl(0deg 0% 7.06%);

}
/* ── Match pagination ────────────────────────────────────────────── */
.dark-mode .match-pagination-btn,
.dark-mode .match-pagination-page {
    background: var(--c-surface);
    border-color: var(--c-grid-border);
    color: var(--c-text-secondary);
}

.dark-mode .match-pagination-btn:not(:disabled):hover,
.dark-mode .match-pagination-page:not(.is-active):hover {
    background: var(--c-surface-high);
    border-color: hsl(0, 0%, 40%);
}

.dark-mode .match-pagination-page.is-active {
    background: var(--c-gray-700);
    border-color: var(--c-gray-700);
    color: hsl(240, 3%, 8%);
}

/* ── Empty & generating states ───────────────────────────────────── */
.dark-mode .tab-content .empty-state .title {
    color: var(--c-text);
}

.dark-mode .match .tab-content .empty-state .text {
    color: var(--c-text);
}

.dark-mode .tab-content .empty-state .add-font-btn {
    background-color: var(--c-surface);
    border-color: hsl(0, 0%, 28%);
    color: var(--c-text);
}

.dark-mode .tab-content .empty-state .add-font-btn:hover {
    background-color: var(--c-surface-high);
}

.dark-mode .tab-content .generating-state .inner {
    background: linear-gradient(0deg, var(--c-surface) 0%, var(--c-surface-high) 100%);
}

.dark-mode .tab-content .generating-state .icon {
    background-color: var(--c-surface-high);
}

/* ── Lab preview tabs ────────────────────────────────────────────── */
.dark-mode .title-tab .wor,
.dark-mode .paragraph-tab > .wor.p-row,
.dark-mode .paragraph-tab > .wor .inner-wrapper,
.dark-mode .numbers-tab .font-row,
.dark-mode .languages-tab .font-row,
.dark-mode .kerning-tab .font-row,
.dark-mode .languages-tab .language-section-group .font-row:last-child {
    border-bottom-color: var(--c-grid-border);
}

.dark-mode .two-font-selected .ui-tab .ui-font-block:first-child {
    border-bottom-color: var(--c-grid-border);
}

/* ── UI tab ──────────────────────────────────────────────────────── */
.dark-mode .ui-tab .title-font-name .name,
.dark-mode .ui-tab .title-font-name .weight {
    color: var(--c-text-secondary);
}

.dark-mode .ui-tab .wrapper {
    border-color: var(--c-grid-border);
    background-color: var(--c-surface);
}

.dark-mode .ui-tab .row-hero > .wrapper {
    background-color: var(--c-gray-100);
}

.dark-mode .ui-tab .row-hero:hover .wrapper,
.dark-mode .ui-tab .row-table .wrapper:hover,
.dark-mode .ui-tab .row-blog .wrapper:hover {
    border-color: hsl(0, 0%, 40%);
}

.dark-mode .ui-tab .row-hero .cta {
    background-color: var(--c-gray-700);
    border-color: transparent;
}

.dark-mode .ui-tab .row-hero .cta:hover {
    background-color: var(--c-surface-high);
    border-color: var(--c-gray-700);
}

.dark-mode .ui-tab .newsletter .inner {
    background-color: transparent;
}

.dark-mode .ui-tab .newsletter .icon img {
    filter: brightness(0) invert(1);
    opacity: 0.75;
}

.dark-mode .ui-tab .newsletter .newsletter-input {
    background-color: var(--c-surface-high);
    border-color: hsl(0, 0%, 35%);
    color: var(--c-text);
    box-shadow: inset 0 0 4px -1px hsla(0, 0%, 0%, 0.25);
}

.dark-mode .ui-tab .newsletter .newsletter-input:focus {
    background-color: var(--c-bg);
    border-color: var(--c-gray-700);
    box-shadow: inset 0 0 5px -1px hsla(0, 0%, 0%, 0.35);
}

.dark-mode .ui-tab .newsletter .newsletter-submit-btn {
    background-color: var(--c-gray-700);
}

.dark-mode .ui-tab .profile .image-wrapper {
    background-color: #000;
}

.dark-mode .ui-tab .profile .text-wrapper::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
}

.dark-mode .ui-tab .list .item {
    border-bottom-color: var(--c-grid-border);
}

.dark-mode .ui-tab .list .icon {
    background-color: var(--c-surface-high);
}

.dark-mode .ui-tab .list .icon img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.dark-mode .ui-tab .list .text .details {
    opacity: 0.65;
}

.dark-mode .ui-tab .list .item:hover {
    background-color: var(--c-surface-high);
}

.dark-mode .ui-tab .list .item:hover .icon {
    background-color: var(--c-gray-175);
}

.dark-mode .ui-tab .list .item::after {
    filter: brightness(0) invert(1);
    opacity: 0.35;
}

.dark-mode .ui-tab .list .item:hover::after {
    opacity: 0.6;
}

.dark-mode .ui-tab .post {
    background-color: var(--c-surface);
}

.dark-mode .ui-tab .post .details .icon img {
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.dark-mode .ui-tab .post .details .value {
    opacity: 0.75;
}

.dark-mode .ui-tab .related {
    background-color: var(--c-surface);
}

.dark-mode .ui-tab .related .item:hover {
    background-color: var(--c-surface-high);
}

.dark-mode .ui-tab .related .thumb {
    background-color: var(--c-surface-high);
    box-shadow: inset 0 0 0 1px var(--c-grid-border);
}

.dark-mode .ui-tab .related .thumb img {
    filter: brightness(0) invert(1);
    opacity: 0.55;
}

/* Pixatex-generated text images */
.dark-mode .ui-tab .row-hero .text-wrapper .main-title img,
.dark-mode .ui-tab .row-hero .text-wrapper .sub-text img,
.dark-mode .ui-tab .newsletter .title .title-line img,
.dark-mode .ui-tab .newsletter .newsletter-submit-btn img,
.dark-mode .ui-tab .newsletter-input-placeholder,
.dark-mode .ui-tab .profile .name img,
.dark-mode .ui-tab .profile .cta img,
.dark-mode .ui-tab .list .text .title img,
.dark-mode .ui-tab .list .text .details img,
.dark-mode .ui-tab .post .content .title img,
.dark-mode .ui-tab .post .details .value img,
.dark-mode .ui-tab .post .main-text img,
.dark-mode .ui-tab .related > .title img,
.dark-mode .ui-tab .related .items .text img {
    filter: brightness(0) invert(1);
}

/* Hero CTA label: dark text on light button; invert when button bg darkens */
.dark-mode .ui-tab .row-hero .text-wrapper .cta img {
    filter: none;
}

.dark-mode .ui-tab .row-hero .cta:hover img {
    filter: brightness(0) invert(1);
}

.dark-mode .numbers-tab .row-title,
.dark-mode .languages-tab .row-title,
.dark-mode .kerning-tab .row-title {
    background-color: var(--c-surface);
}

.dark-mode .numbers-tab .row-title .details > *,
.dark-mode .languages-tab .row-title .details > *,
.dark-mode .kerning-tab .row-title .details > * {
    background-color: var(--c-surface-high);
    color: var(--c-text-secondary);
}

.dark-mode .details-tab table,
.dark-mode .details-tab th,
.dark-mode .details-tab td {
    border-color: var(--c-grid-border);
}

/* ── Mobile notice (Lab) ─────────────────────────────────────────── */
.dark-mode .lab-mobile-notice__card {
    background: var(--c-surface);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45), 0 4px 24px rgba(0, 0, 0, 0.25);
}

.dark-mode .lab-mobile-notice__icon {
    background: linear-gradient(145deg, hsl(240, 20%, 18%) 0%, hsl(240, 15%, 14%) 100%);
    color: hsl(220, 80%, 70%);
}

.dark-mode .lab-mobile-notice__title {
    color: var(--c-text);
}

.dark-mode .lab-mobile-notice__text {
    color: var(--c-text-secondary);
}

.dark-mode .lab-mobile-notice__btn {
    background: var(--c-gray-700);
}

.dark-mode .lab-mobile-notice__btn:hover,
.dark-mode .lab-mobile-notice__btn:focus-visible {
    background: var(--c-gray-650);
}
.dark-mode .title-tab .image-wrapper img {
    filter: brightness(0) invert(1);
}
.dark-mode .paragraph-tab .image-wrapper  img {
    filter: brightness(0) invert(1);
}
.dark-mode .numbers-tab .image-wrapper img, .dark-mode .languages-tab .image-wrapper img , .dark-mode .kerning-tab .image-wrapper img {
    filter: brightness(0) invert(1);
}
.dark-mode .settings.sticky .fs-main .fs-input-wrapper .fs-search {
    box-shadow: none;
}

/* ── Mobile responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
    .dark-mode .tabs-header .stream {
        background-color: var(--c-surface);
    }

    .dark-mode .tabs-header .tab-item.active {
        background-color: var(--c-surface-high);
        box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.35);
    }

    .dark-mode .match .tabs-header .tab-item .tab-counter .counter {
        color: hsl(240, 3%, 8%);
    }

    .dark-mode .match .tabs-header .tab-item.active .tab-counter {
        background-color: var(--c-gray-800);
    }

    .dark-mode .font .options-select select {
        background-color: var(--c-surface);
        color: var(--c-text);
        border-color: hsl(0, 0%, 28%);
    }
}