.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 68px;
    height: 36px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #3d3d3d;
    cursor: pointer;
    line-height: 0;
}

.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    width: fit-content;
    height: fit-content;
}

.theme-toggle__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
}

.theme-toggle__icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.theme-toggle::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #d20a2e;
    transition: transform 0.2s ease;
}

html[data-theme="dark"] .theme-toggle::before {
    transform: translateX(32px);
}

html[data-theme="dark"] body {
    background: #121418;
    color: #aeb6c0;
}

html[data-theme="dark"] .sitename,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2 {
    color: #d4d8dd;
}

html[data-theme="dark"] p {
    color: #aeb6c0;
}

html[data-theme="dark"] nav,
html[data-theme="dark"] .thumbnail-container,
html[data-theme="dark"] side,
html[data-theme="dark"] .timeline-cards>div,
html[data-theme="dark"] .review,
html[data-theme="dark"] .enter-review,
html[data-theme="dark"] main.admin-main {
    background: #23272f;
}

html[data-theme="dark"] nav .nav-icon {
    fill: #aeb6c0;
    opacity: 0.88;
}

html[data-theme="dark"] nav a:hover .nav-label {
    opacity: 1;
    transform: translate(-50%, 0);
}

nav a:hover .nav-icon {
    opacity: 1;
    fill: #d20a2e;
}

/* Nav link: icon on top, label below, red hover tint */
.navbar,
nav {
    align-items: center;
}

nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    text-decoration: none;
    min-width: 38px;
    min-height: 50px;
}

nav a .nav-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    display: block;
    transform: translate(-50%, 4px);
    padding: 4px 7px;
    border-radius: 999px;
    background: #3d3d3d;
    font-size: 0.6em;
    font-weight: 700;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    line-height: 1;
    user-select: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

nav a .nav-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: #3d3d3d;
    opacity: 0.78;
    transition: opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease;
}

nav a:hover .nav-label {
    opacity: 1;
    transform: translate(-50%, 0);
}

nav a:hover .nav-icon {
    fill: #d20a2e;
    opacity: 1;
    transform: scale(1.1);
}

html[data-theme="dark"] .contact,
html[data-theme="dark"] side {
    background: #1b1f26;
}

html[data-theme="dark"] .theme-toggle {
    background: #1b1f26;
    border-color: #343a44;
}

/* Dark mode: content card backgrounds */
html[data-theme="dark"] .project-container,
html[data-theme="dark"] .post-container,
html[data-theme="dark"] .skill-container,
html[data-theme="dark"] .model-container {
    background-color: transparent;
}

/* Dark mode: skill detail page card
   (skill-detail-main IS the white card, unlike project/post pages where
   main is transparent and a nested .project-container/.post-container
   carries the background) */
html[data-theme="dark"] main.skill-detail-main {
    background-color: transparent;
}

/* Dark mode: category tags */
html[data-theme="dark"] .category {
    background-color: #23272f;
    color: #aeb6c0;
}

/* Dark mode: inline code chips inside rendered markdown content
   (code blocks inside <pre> are excluded — they already carry their
   own fixed dark theme regardless of site theme) */
html[data-theme="dark"] .post-content-rendered code,
html[data-theme="dark"] .project-content-rendered code,
html[data-theme="dark"] .model-content-rendered code,
html[data-theme="dark"] .skill-content-rendered code {
    background-color: #23272f;
    color: #aeb6c0;
}

html[data-theme="dark"] .post-content-rendered pre code,
html[data-theme="dark"] .project-content-rendered pre code,
html[data-theme="dark"] .model-content-rendered pre code,
html[data-theme="dark"] .skill-content-rendered pre code {
    background-color: transparent;
    color: inherit;
}

/* ── Rendered markdown: full container text color ────────────────────────
   The detail-page stylesheets hard-code #3d3d3d on these containers and on
   their h1-h6, so in dark mode paragraph text gets overridden by the p rule
   below but lists, table cells, blockquotes, etc. would stay dark-on-dark.
   Override the container color so everything inherits a readable tone, and
   shade the headings that the global h1/h2 rule doesn't reach. */
html[data-theme="dark"] .post-content-rendered,
html[data-theme="dark"] .project-content-rendered,
html[data-theme="dark"] .model-content-rendered,
html[data-theme="dark"] .skill-content-rendered {
    color: #aeb6c0;
}

html[data-theme="dark"] .post-content-rendered h3,
html[data-theme="dark"] .post-content-rendered h4,
html[data-theme="dark"] .post-content-rendered h5,
html[data-theme="dark"] .post-content-rendered h6,
html[data-theme="dark"] .project-content-rendered h3,
html[data-theme="dark"] .project-content-rendered h4,
html[data-theme="dark"] .project-content-rendered h5,
html[data-theme="dark"] .project-content-rendered h6,
html[data-theme="dark"] .model-content-rendered h3,
html[data-theme="dark"] .model-content-rendered h4,
html[data-theme="dark"] .model-content-rendered h5,
html[data-theme="dark"] .model-content-rendered h6,
html[data-theme="dark"] .skill-content-rendered h3,
html[data-theme="dark"] .skill-content-rendered h4,
html[data-theme="dark"] .skill-content-rendered h5,
html[data-theme="dark"] .skill-content-rendered h6 {
    color: #d4d8dd;
}

/* ── Rendered markdown: tables ──────────────────────────────────────────
   Wrapped in .content-table-wrapper (created by wrapTablesForScroll in
   markdown.js) so wide tables scroll horizontally instead of cramming.
   Left-aligned headers override the browser's centered default. Auto layout
   lets columns size to content and wrap naturally — the wrapper only
   scrolls when content genuinely can't fit. */
.content-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1em;
}

.content-table-wrapper table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.content-table-wrapper th,
.content-table-wrapper td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ddd;
    /* Reset the container's inherited overflow-wrap: break-word so cells
       wrap at natural word boundaries instead of force-splitting words;
       genuinely unbreakable content (URLs, code, numbers) then widens the
       column and the wrapper scrolls instead of cramming. */
    overflow-wrap: normal;
    word-break: normal;
}

.content-table-wrapper th {
    background-color: #f0f0f0;
    font-weight: 700;
    white-space: nowrap;
}

html[data-theme="dark"] .content-table-wrapper th,
html[data-theme="dark"] .content-table-wrapper td {
    border-color: #2b3038;
}

html[data-theme="dark"] .content-table-wrapper th {
    background-color: #23272f;
    color: #d4d8dd;
}

html[data-theme="dark"] .project-properties {
    border-color: #2b3038;
}

html[data-theme="dark"] .model-properties {
    border-color: #2b3038;
}

html[data-theme="dark"] .project-property-label,
html[data-theme="dark"] .model-property-label,
html[data-theme="dark"] .skill-stat-value {
    color: #7f8894;
}

html[data-theme="dark"] .project-property-value,
html[data-theme="dark"] .model-property-value,
html[data-theme="dark"] .skill-stat-row {
    color: #aeb6c0;
}

/* Dark mode: 3D model viewer surfaces (loading/error states share the
   same flat background as the canvas container itself) */
html[data-theme="dark"] .model-viewer-container,
html[data-theme="dark"] .model-viewer-loading,
html[data-theme="dark"] .model-viewer-error {
    background: #1b1f26;
}

html[data-theme="dark"] .model-download-btn {
    background: #23272f;
    color: #aeb6c0;
}

html[data-theme="dark"] .model-download-btn:hover {
    background: #2b303a;
}

html[data-theme="dark"] .filter-control-label {
    color: #7f8894;
}

html[data-theme="dark"] .filter-clear-btn,
html[data-theme="dark"] .filter-chip {
    background: #1b1f26;
    border-color: #343a44;
    color: #aeb6c0;
}

html[data-theme="dark"] .filter-clear-btn:hover,
html[data-theme="dark"] .filter-chip.is-active {
    border-color: #d20a2e;
    color: #d20a2e;
}

html[data-theme="dark"] .custom-select-trigger {
    background: #1b1f26;
    border-color: #343a44;
    color: #aeb6c0;
}

html[data-theme="dark"] .custom-select-chevron {
    color: #aeb6c0;
}

html[data-theme="dark"] .custom-select-trigger:hover {
    border-color: #45505e;
}

html[data-theme="dark"] .custom-select.is-open .custom-select-trigger,
html[data-theme="dark"] .custom-select-trigger:focus {
    border-color: #d20a2e;
}

html[data-theme="dark"] .custom-select-options {
    background: #1b1f26;
    border-color: #343a44;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .custom-select-option {
    color: #aeb6c0;
}

html[data-theme="dark"] .custom-select-option:hover {
    background: #23272f;
    color: #d20a2e;
}

html[data-theme="dark"] .custom-select-option.is-selected {
    background: rgba(210, 10, 46, 0.14);
    color: #d20a2e;
}

html[data-theme="dark"] .filter-status {
    color: #7f8894;
}

html[data-theme="dark"] .skill-stat-row:hover,
html[data-theme="dark"] .github-url {
    color: #d20a2e;
}

html[data-theme="dark"] .pin-badge {
    color: #d20a2e;
}

/* ── Dark mode: admin dashboard ──────────────────────────────────────── */
html[data-theme="dark"] .admin-tab:hover {
    background: #23272f;
}

html[data-theme="dark"] .admin-tab.active-tab {
    background: rgba(210, 10, 46, 0.14);
    color: #d20a2e;
}

html[data-theme="dark"] .create,
html[data-theme="dark"] .profile-editor-grid,
html[data-theme="dark"] .manage,
html[data-theme="dark"] .media-card {
    background: #1b1f26;
}

html[data-theme="dark"] .create-option,
html[data-theme="dark"] .add-option,
html[data-theme="dark"] .manage-option,
html[data-theme="dark"] .media-card,
html[data-theme="dark"] .media-card-btn,
html[data-theme="dark"] .media-load-more-btn {
    border-color: #2b3038;
}

html[data-theme="dark"] .create-option:hover,
html[data-theme="dark"] .add-option:hover,
html[data-theme="dark"] .media-card-btn:hover {
    background: #23272f;
}

html[data-theme="dark"] .create-option,
html[data-theme="dark"] .add-option,
html[data-theme="dark"] .manage-option,
html[data-theme="dark"] .obsidian-style-input,
html[data-theme="dark"] .media-card-name,
html[data-theme="dark"] .media-section-heading,
html[data-theme="dark"] .cancel-button,
html[data-theme="dark"] .modal-button.secondary,
html[data-theme="dark"] .media-card-btn,
html[data-theme="dark"] .media-load-more-btn {
    color: #aeb6c0;
}

html[data-theme="dark"] .media-card-preview,
html[data-theme="dark"] .file-label {
    background: #23272f;
}

html[data-theme="dark"] .file-label:hover {
    background: #1b1f26;
}

html[data-theme="dark"] .skills-checkbox-list {
    background: #1b1f26;
    border-color: #2b3038;
}

html[data-theme="dark"] .skill-checkbox-label:hover {
    background: #23272f;
}

html[data-theme="dark"] .modal {
    background: #1b1f26;
}

html[data-theme="dark"] .modal-input {
    background: #1b1f26;
    border-color: #2b3038;
    color: #aeb6c0;
}

html[data-theme="dark"] .modal-label {
    color: #d4d8dd;
}

html[data-theme="dark"] .media-library-summary {
    color: #7f8894;
}

html[data-theme="dark"] .editor-toolbar button,
html[data-theme="dark"] .editor-toolbar button:hover {
    color: #aeb6c0 !important;
}

html[data-theme="dark"] .editor-toolbar button.active {
    background: #23272f !important;
}

/* Dark mode: skill chips */
html[data-theme="dark"] .skill-chip {
    background: transparent;
    border-color: transparent;
    color: #aeb6c0;
}

html[data-theme="dark"] .skill-chip:hover {
    background: transparent;
    border-color: transparent;
    color: #d20a2e;
}

/* Dark mode: home page thumbnail clears bg when it contains an image */
html[data-theme="dark"] .thumbnail-container {
    background: #23272f;
}

html[data-theme="dark"] .thumbnail-container:has(img) {
    background: none;
}

/* Dark mode: nav label */
html[data-theme="dark"] nav a .nav-label {
    background: #1b1f26;
    color: #d4d8dd;
}

html[data-theme="dark"] nav a:hover .nav-label {
    color: #d4d8dd;
}

html[data-theme="dark"] .social_icons a {
    color: #aeb6c0;
    opacity: 0.72;
}

html[data-theme="dark"] .social_icons a:hover {
    background: #1b1f26;
    color: #d4d8dd;
    opacity: 1;
}

html[data-theme="dark"] .social_icons img {
    filter: invert(77%) sepia(7%) saturate(441%) hue-rotate(174deg) brightness(92%) contrast(87%);
}

html[data-theme="dark"] .highlights>div>div:nth-child(2)>div:hover {
    background: #1b1f26;
}

html[data-theme="dark"] .contact {
    background: #1b1f26;
    color: #d4d8dd;
}

html[data-theme="dark"] .contact-details,
html[data-theme="dark"] .socials {
    color: #aeb6c0;
}

html[data-theme="dark"] .carousel-dot {
    background: #3a414c;
}

html[data-theme="dark"] .carousel-dot.active {
    background: #d20a2e;
}

/* Dark mode: feed lists card hovers (projects, blogs, skills, models) */
html[data-theme="dark"] .project:hover,
html[data-theme="dark"] .blog-post:hover,
html[data-theme="dark"] .skill:hover,
html[data-theme="dark"] .model:hover {
    background-color: #1b1f26;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html:not([data-theme="dark"]) {
    color-scheme: light;
}

::selection {
    background-color: rgba(210, 10, 46, 0.25);
}

::-moz-selection {
    background-color: rgba(210, 10, 46, 0.25);
}

/* ── Accent highlights ─────────────────────────────────────────────────
   Replace the browser's default blue interaction highlights with the
   site's red accent, matching the ::selection treatment above. */
* {
    -webkit-tap-highlight-color: rgba(210, 10, 46, 0.25);
}

:focus-visible {
    outline: 2px solid #d20a2e;
    outline-offset: 2px;
}

input,
textarea,
select {
    caret-color: #d20a2e;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: #d20a2e;
}

@media (max-width: 900px) {
    .theme-toggle-wrapper {
        order: 2;
    }
}