/*
 * Unified light palette
 *
 * This stylesheet is deliberately loaded last on every page. It keeps the
 * existing information architecture and behaviour while replacing the legacy
 * dark, gradient and glass treatments with one restrained visual system.
 */

:root {
    color-scheme: light !important;
    --palette-shadow: #242331;
    --palette-walnut: #533e2d;
    --palette-earth: #a27035;
    --palette-camel: #b88b4a;
    --palette-sand: #ddca7d;
    --palette-canvas: #fbf9f4;
    --palette-surface: #fdfcf9;
    --palette-surface-strong: #ffffff;
    --palette-ink: #1d1b18;
    --palette-muted: #62594f;
    --palette-faint: #80766b;
    --palette-line: #d9d0c1;
    --palette-line-strong: #bcae9b;
    --palette-earth-soft: #eee2cf;
    --palette-sand-soft: #f2ead0;
    --palette-danger-soft: #eee5dc;
    --palette-font-sans: "Avenir Next", "SF Pro Display", "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
    --palette-font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;

    /* Compatibility tokens shared by the legacy pages. */
    --bg: var(--palette-canvas) !important;
    --bg-color: var(--palette-canvas) !important;
    --bg-elevated: var(--palette-surface) !important;
    --bg-soft: var(--palette-surface) !important;
    --panel: var(--palette-surface) !important;
    --panel-strong: var(--palette-surface-strong) !important;
    --card-bg: var(--palette-surface) !important;
    --card-border: var(--palette-line) !important;
    --text: var(--palette-ink) !important;
    --text-color: var(--palette-ink) !important;
    --text-secondary: var(--palette-muted) !important;
    --text-muted: var(--palette-muted) !important;
    --text-faint: var(--palette-faint) !important;
    --muted: var(--palette-muted) !important;
    --line: var(--palette-line) !important;
    --line-color: var(--palette-line) !important;
    --line-strong: var(--palette-line-strong) !important;
    --border-color: var(--palette-line) !important;
    --accent-color: var(--palette-earth) !important;
    --accent-strong: var(--palette-earth) !important;
    --accent-soft: var(--palette-earth-soft) !important;
    --primary-color: var(--palette-earth) !important;
    --danger-color: var(--palette-walnut) !important;
    --success-color: var(--palette-earth) !important;
    --warning-color: var(--palette-camel) !important;
    --info-color: var(--palette-shadow) !important;
    --navbar-bg: rgba(251, 249, 244, 0.97) !important;
    --navbar-scrolled-bg: rgba(251, 249, 244, 0.99) !important;
    --navbar-text: var(--palette-ink) !important;
    --navbar-border: var(--palette-line) !important;
    --navbar-border-strong: var(--palette-line-strong) !important;
    --site-dark-bg: var(--palette-canvas) !important;
    --site-dark-text: var(--palette-ink) !important;
    --site-dark-muted: var(--palette-muted) !important;
    --site-dark-line: var(--palette-line) !important;
    --site-accent: var(--palette-earth) !important;
    --site-focus-ring: rgba(162, 112, 53, 0.28) !important;
    --paper-shadow: none !important;
    --modal-bg: var(--palette-surface-strong) !important;
    --modal-shadow: none !important;
    --row-hover: var(--palette-sand-soft) !important;
    --skeleton-base: #e8e0d4 !important;
    --skeleton-shine: #f7f2e9 !important;
}

html,
html.dark-mode,
body,
body.dark-mode,
body.site-chrome-dark,
body[data-navbar="full"] {
    color-scheme: light !important;
    min-height: 100%;
    background-color: var(--palette-canvas) !important;
    background-image: none !important;
    color: var(--palette-ink) !important;
    font-family: var(--palette-font-sans) !important;
    font-weight: 500;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
body.dark-mode,
body.site-chrome-dark,
body[data-navbar="full"] {
    --bg: var(--palette-canvas) !important;
    --bg-color: var(--palette-canvas) !important;
    --bg-elevated: var(--palette-surface) !important;
    --bg-soft: var(--palette-surface) !important;
    --panel: var(--palette-surface) !important;
    --panel-strong: var(--palette-surface-strong) !important;
    --card-bg: var(--palette-surface) !important;
    --card-border: var(--palette-line) !important;
    --text: var(--palette-ink) !important;
    --text-color: var(--palette-ink) !important;
    --text-secondary: var(--palette-muted) !important;
    --text-muted: var(--palette-muted) !important;
    --text-faint: var(--palette-faint) !important;
    --muted: var(--palette-muted) !important;
    --line: var(--palette-line) !important;
    --line-color: var(--palette-line) !important;
    --line-strong: var(--palette-line-strong) !important;
    --border-color: var(--palette-line) !important;
    --accent-color: var(--palette-earth) !important;
    --accent-strong: var(--palette-earth) !important;
    --accent-soft: var(--palette-earth-soft) !important;
    --primary-color: var(--palette-earth) !important;
    --navbar-bg: rgba(251, 249, 244, 0.97) !important;
    --navbar-scrolled-bg: rgba(251, 249, 244, 0.99) !important;
    --navbar-text: var(--palette-ink) !important;
    --navbar-border: var(--palette-line) !important;
    --navbar-border-strong: var(--palette-line-strong) !important;
    --site-dark-bg: var(--palette-canvas) !important;
    --site-dark-text: var(--palette-ink) !important;
    --site-dark-muted: var(--palette-muted) !important;
    --site-dark-line: var(--palette-line) !important;
    --site-accent: var(--palette-earth) !important;
    --page-glow-left: transparent !important;
    --page-glow-right: transparent !important;
    --page-wash-top: transparent !important;
    --page-wash-bottom: transparent !important;
}

body::before,
body::after,
body.dark-mode::before,
body.dark-mode::after,
body.site-chrome-dark::before,
body.site-chrome-dark::after,
body[data-navbar="full"]::before,
body[data-navbar="full"]::after {
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    animation: none !important;
}

body *,
body *::before,
body *::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

body :where(h1, h2, h3, h4, h5, h6) {
    color: var(--palette-ink) !important;
    font-family: var(--palette-font-sans) !important;
    font-weight: 720 !important;
    letter-spacing: -0.025em;
}

body :where(p, li, dd, td, input, textarea, select) {
    font-weight: 500;
}

body :where(nav a, label, button, th, dt, .tag, .badge, small) {
    font-weight: 600 !important;
}

body :where(code, pre, kbd, samp) {
    font-family: var(--palette-font-mono) !important;
}

body :where(a) {
    text-underline-offset: 0.18em;
}

body :where(button, input, textarea, select, .btn, [class$="-button"], [class$="-btn"]) {
    border-radius: 4px !important;
}

body :where(input, textarea, select) {
    border: 1px solid var(--palette-line) !important;
    background-color: var(--palette-surface-strong) !important;
    color: var(--palette-ink) !important;
}

body :where(input, textarea, select)::placeholder {
    color: var(--palette-faint) !important;
    opacity: 1;
}

body :where(input, textarea, select, button, a):focus-visible {
    outline: 2px solid var(--palette-earth) !important;
    outline-offset: 2px;
}

body :where(button, .btn, [class$="-button"], [class$="-btn"]) {
    font-family: var(--palette-font-sans) !important;
    font-weight: 650 !important;
}

body :where(.btn-primary, .primary-button, .submit-btn, button[type="submit"]:not(.secondary-button)) {
    border: 1px solid var(--palette-earth) !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

body :where(.btn-primary, .primary-button, .submit-btn, button[type="submit"]:not(.secondary-button)):hover {
    border-color: var(--palette-walnut) !important;
    background-color: var(--palette-walnut) !important;
    color: #ffffff !important;
    transform: none !important;
}

body :where(.btn-secondary, .secondary-button, .copy-button, .btn-quiet) {
    border: 1px solid var(--palette-line-strong) !important;
    background-color: transparent !important;
    color: var(--palette-ink) !important;
}

body :where(.btn-secondary, .secondary-button, .copy-button, .btn-quiet):hover {
    border-color: var(--palette-earth) !important;
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
    transform: none !important;
}

body :where(.btn-danger, .btn-delete) {
    border-color: var(--palette-walnut) !important;
    background-color: transparent !important;
    color: var(--palette-walnut) !important;
}

/* Shared public chrome */
.topbar,
.topbar.scrolled,
.navbar,
.navbar.scrolled,
.header,
.header.scrolled,
body.dark-mode .header {
    min-height: 68px;
    padding: calc(14px + var(--site-safe-top)) max(24px, calc((100vw - 1440px) / 2)) 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--palette-line) !important;
    background: rgba(251, 249, 244, 0.98) !important;
    color: var(--palette-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 4vw, 56px) !important;
}

.site-brand {
    color: var(--palette-ink) !important;
    font-size: 1rem;
    font-weight: 750 !important;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
}

.topbar nav,
.topbar .toolbar {
    gap: clamp(14px, 2vw, 26px) !important;
}

.topbar nav {
    justify-content: center;
}

.topbar .toolbar {
    display: flex;
    align-items: center;
    gap: 8px !important;
}

.topbar .toolbar-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--palette-ink) !important;
}

.topbar .toolbar-icon::before {
    content: "";
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.topbar .toolbar-search::before {
    -webkit-mask-image: url('/static/images/ui-icons/search.svg');
    mask-image: url('/static/images/ui-icons/search.svg');
}

.topbar .toolbar-account::before {
    -webkit-mask-image: url('/static/images/ui-icons/user.svg');
    mask-image: url('/static/images/ui-icons/user.svg');
}

.topbar .toolbar-icon:hover {
    border-color: var(--palette-line) !important;
    background-color: var(--palette-sand-soft) !important;
}

.topbar a,
.navbar a,
.header a {
    color: var(--palette-muted) !important;
    font-size: 0.84rem;
    font-weight: 620 !important;
}

.topbar a:hover,
.navbar a:hover,
.header a:hover,
.topbar a.is-current,
.topbar a[aria-current="page"] {
    color: var(--palette-ink) !important;
    transform: none !important;
}

.topbar nav a::after {
    height: 2px !important;
    bottom: -1px !important;
    background-color: var(--palette-earth) !important;
}

.theme-toggle,
.rainbow-toggle {
    display: none !important;
}

.footer {
    border: 0 !important;
    border-top: 1px solid var(--palette-shadow) !important;
    background: var(--palette-shadow) !important;
    color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.footer :where(a, span, .footer-cue) {
    color: #ffffff !important;
    font-weight: 550 !important;
}

.footer img:not(.police-link img) {
    filter: grayscale(1) brightness(0) invert(1);
}

.external-link-modal,
.modal-overlay,
.modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.external-link-modal,
.modal-overlay {
    background-color: rgba(36, 35, 49, 0.48) !important;
}

.copyright-overlay[hidden] {
    display: none !important;
}

.external-link-dialog,
.modal-content,
.modal-overlay .modal,
.link-modal-content,
.resume-modal-dialog {
    border: 1px solid var(--palette-line) !important;
    border-radius: 6px !important;
    background-color: var(--palette-surface-strong) !important;
    color: var(--palette-ink) !important;
}

.external-link-btn {
    border-radius: 4px !important;
}

.external-link-btn-primary {
    border: 1px solid var(--palette-earth) !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

.external-link-btn-secondary {
    border: 1px solid var(--palette-line-strong) !important;
    background-color: transparent !important;
    color: var(--palette-ink) !important;
}

/* Homepage */
body[data-page="home"] .site-shell {
    min-height: 100dvh;
    padding: 68px 0 0 !important;
    background-color: var(--palette-canvas) !important;
}

body[data-page="home"] .home-main {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 0 clamp(28px, 4vw, 64px);
}

body[data-page="home"] .home-hero {
    display: flex;
    min-height: min(460px, calc(100dvh - 150px));
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    padding: clamp(48px, 7vh, 72px) 0 54px;
    text-align: left;
}

body[data-page="home"] .hero-icon,
body[data-page="home"] .scan-lines {
    display: none !important;
}

body[data-page="home"] .hero-copy {
    width: min(780px, 100%);
    align-items: flex-start !important;
    gap: 14px !important;
    animation: none !important;
    filter: none !important;
}

body[data-page="home"] .hero-eyebrow {
    margin: 0 0 8px;
    color: var(--palette-earth) !important;
    font-size: 0.76rem;
    font-weight: 680 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body[data-page="home"] .hero-title {
    max-width: none;
    margin: 0 !important;
    color: var(--palette-ink) !important;
    font-size: clamp(3.6rem, 6vw, 5.6rem) !important;
    font-weight: 760 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.065em !important;
    animation: none !important;
}

body[data-page="home"] .hero-title::before,
body[data-page="home"] .hero-title::after,
body[data-page="home"] .hero-tagline::before,
body[data-page="home"] .hero-tagline::after {
    display: none !important;
}

body[data-page="home"] .hero-tagline {
    margin: 0 !important;
    color: var(--palette-earth) !important;
    font-size: clamp(1.12rem, 2vw, 1.5rem) !important;
    font-weight: 680 !important;
    letter-spacing: 0.06em !important;
    animation: none !important;
}

body[data-page="home"] .hero-intro {
    max-width: 48ch;
    margin: 8px 0 0;
    color: var(--palette-muted) !important;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    font-weight: 520 !important;
    line-height: 1.75;
}

body[data-page="home"] .portal-row {
    justify-content: flex-start !important;
    gap: 0 !important;
    border-top: 1px solid var(--palette-line) !important;
    border-bottom: 1px solid var(--palette-line) !important;
}

body[data-page="home"] .portal-item {
    min-height: 52px;
    padding: 14px 22px !important;
    border-right: 1px solid var(--palette-line) !important;
    color: var(--palette-ink) !important;
    font-weight: 620 !important;
}

body[data-page="home"] .portal-item:first-child {
    padding-left: 0 !important;
}

body[data-page="home"] .portal-item:hover {
    color: var(--palette-earth) !important;
    transform: none !important;
}

body[data-page="home"] .portal-item svg {
    stroke: currentColor !important;
}

body[data-page="home"] .portal-item:nth-child(1) svg { color: #ef5b86 !important; }
body[data-page="home"] .portal-item:nth-child(2) svg { color: #3ca66a !important; }
body[data-page="home"] .portal-item:nth-child(3) svg { color: #171614 !important; }
body[data-page="home"] .portal-item:nth-child(4) svg { color: var(--palette-shadow) !important; }
body[data-page="home"] .portal-item:nth-child(5) svg { color: var(--palette-earth) !important; }

body[data-page="home"] .home-latest {
    padding: 32px 0 clamp(54px, 7vw, 84px);
    border-top: 1px solid var(--palette-line);
}

body[data-page="home"] .home-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--palette-line);
}

body[data-page="home"] .home-section-heading h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 720 !important;
}

body[data-page="home"] .home-section-heading a {
    color: var(--palette-earth) !important;
    font-size: 0.82rem;
    font-weight: 650 !important;
    text-decoration: none;
}

body[data-page="home"] .home-post-list {
    display: grid;
}

body[data-page="home"] .home-post-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 120px;
    align-items: center;
    gap: 26px;
    min-height: 60px;
    border-bottom: 1px solid var(--palette-line);
    color: var(--palette-ink) !important;
    text-decoration: none;
}

body[data-page="home"] .home-post-row:hover {
    background-color: var(--palette-sand-soft) !important;
}

body[data-page="home"] .home-post-row time,
body[data-page="home"] .home-post-row span {
    color: var(--palette-muted);
    font-size: 0.78rem;
    font-weight: 580;
}

body[data-page="home"] .home-post-row strong {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="home"] .home-post-row span {
    text-align: right;
}

body[data-page="home"] .home-post-state {
    display: block;
    padding: 28px 0;
    color: var(--palette-muted) !important;
    font-weight: 550 !important;
    text-decoration: none;
}

/* Public document and directory pages */
body:not(.admin-page):not(.editor-page) :where(.content-section, .about-page, .booking-page) {
    background-color: var(--palette-canvas) !important;
}

.about-page .about-document {
    padding-top: 68px !important;
}

body:not(.admin-page):not(.editor-page) :where(.container, .section-shell, .about-shell, .education-shell, .projects-shell) {
    box-shadow: none !important;
}

body:not(.admin-page):not(.editor-page) :where(.section-shell, .about-shell, .education-shell, .projects-shell) {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

body:not(.admin-page):not(.editor-page) :where(.page-header, .panel-head, .section-heading, .directory-heading) {
    border-color: var(--palette-line) !important;
}

body:not(.admin-page):not(.editor-page) :where(.page-kicker, .page-index, .page-eyebrow, .section-index, .section-kicker, .archive-meta, .directory-count) {
    color: var(--palette-earth) !important;
    font-family: var(--palette-font-sans) !important;
    font-weight: 680 !important;
    letter-spacing: 0.08em !important;
}

body:not(.admin-page):not(.editor-page) :where(.page-title, .section-title, .panel-mini-title, .article-title) {
    color: var(--palette-ink) !important;
    font-family: var(--palette-font-sans) !important;
    font-weight: 720 !important;
}

body:not(.admin-page):not(.editor-page) :where(.page-intro, .page-subtitle, .post-summary, .article-meta, .about-copy, .news-note) {
    color: var(--palette-muted) !important;
}

.category-nav-item,
.post-tag,
.tag,
.about-tag {
    border-radius: 3px !important;
}

.category-nav-item.active,
.post-tag,
.tag,
.about-tag {
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

.post-item,
.news-item,
.timeline-item,
.project-item,
.tool-entry,
.link-card,
.tree-row,
.file-row,
.comment-item {
    border-color: var(--palette-line) !important;
    background-color: transparent !important;
}

.post-item:hover,
.news-item:hover,
.timeline-item:hover,
.project-item:hover,
.tool-entry:hover,
.link-card:hover,
.tree-row:hover,
.file-row:hover,
.comment-item:hover {
    background-color: var(--palette-sand-soft) !important;
    transform: none !important;
}

/* Article, Markdown and PDF readers */
body,
body.dark-mode {
    --surface-grad-start: var(--palette-surface) !important;
    --surface-grad-end: var(--palette-surface) !important;
    --divider-strong: var(--palette-line-strong) !important;
    --divider-warm: var(--palette-line) !important;
    --divider-warm-soft: var(--palette-line) !important;
    --inline-code-bg: var(--palette-sand-soft) !important;
    --pre-bg: #f1eee8 !important;
    --pre-border: var(--palette-line) !important;
    --blockquote-border: var(--palette-earth) !important;
    --table-border: var(--palette-line) !important;
    --table-head-bg: var(--palette-sand-soft) !important;
    --scrollbar-track: #eee8dd !important;
    --scrollbar-thumb: var(--palette-camel) !important;
    --scrollbar-thumb-hover: var(--palette-earth) !important;
    --comment-form-bg: transparent !important;
    --comment-form-border: var(--palette-line) !important;
    --viewer-bg: var(--palette-canvas) !important;
    --viewer-surface: var(--palette-surface) !important;
    --viewer-surface-strong: var(--palette-surface-strong) !important;
    --viewer-text: var(--palette-ink) !important;
    --viewer-muted: var(--palette-muted) !important;
    --viewer-line: var(--palette-line) !important;
    --viewer-line-strong: var(--palette-line-strong) !important;
    --viewer-gold: var(--palette-earth) !important;
    --viewer-gold-soft: var(--palette-sand-soft) !important;
    --viewer-code: #f1eee8 !important;
}

body.markdown-viewer-page .container,
.pdf-viewer-page .pdf-container,
.blog-viewer-page .main-content,
.article-header,
.article-content,
.comments-section,
.comment-form {
    border-radius: 0 !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.markdown-viewer-page .container {
    border: 0 !important;
    border-left: 1px solid var(--palette-line) !important;
    border-right: 1px solid var(--palette-line) !important;
}

.markdown-body,
.markdown-body :where(p, li, td, blockquote),
.article-content {
    color: var(--palette-ink) !important;
    font-weight: 500;
}

.markdown-body :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--palette-font-sans) !important;
    font-weight: 700 !important;
}

.markdown-body :where(code:not(pre code), kbd) {
    border: 1px solid var(--palette-line) !important;
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

.markdown-body pre,
.tikz-source,
.tikz-source-code {
    border: 1px solid var(--palette-line) !important;
    border-radius: 4px !important;
    background-color: #f1eee8 !important;
}

.toc-sidebar,
.left-sidebar {
    border-color: var(--palette-line) !important;
    background-color: transparent !important;
}

.toc-item a.active,
.toc-item a:hover {
    color: var(--palette-earth) !important;
}

.comment-avatar {
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

.pdf-viewer-page .header,
.markdown-viewer-page .topbar {
    background-color: var(--palette-canvas) !important;
}

/* About page */
.about-page {
    display: block !important;
    width: min(1536px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 clamp(32px, 7.5vw, 115px) !important;
}

.about-body .topbar {
    padding-right: 36px !important;
    padding-left: 36px !important;
}

body.about-body.about-body,
body.about-body.about-body .topbar {
    background-image: var(--palette-paper-image), var(--palette-paper-image) !important;
    background-repeat: repeat, repeat !important;
    background-position: 0 0, -317px -211px !important;
    background-size: 1254px 1254px, 972px 972px !important;
    background-blend-mode: multiply;
}

.about-body .footer {
    min-height: 123px;
    margin-top: 0 !important;
}

.about-page .about-document {
    width: 100%;
    padding-top: 68px !important;
}

.about-page .page-toc,
.about-page #about-legacy,
.about-page #updates,
.about-page #education,
.about-page #projects {
    display: none !important;
}

.about-prototype {
    padding: 42px 0 0;
}

.about-prototype-identity {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr) 368px;
    gap: 41px;
    align-items: stretch;
    padding-bottom: 35px;
    border-bottom: 1px solid var(--palette-line);
}

.about-prototype-photo {
    display: block;
    width: 285px;
    height: 285px;
    border: 1px solid var(--palette-line);
    object-fit: cover;
}

.about-prototype-name {
    align-self: center;
    min-width: 0;
    transform: translateY(5px);
}

.about-prototype-kicker {
    margin: 0 0 14px;
    color: var(--palette-muted) !important;
    font-size: 0.7rem;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
}

.about-prototype-name h1 {
    margin: 0 0 8px;
    font-size: clamp(2.8rem, 4vw, 3.45rem) !important;
    font-weight: 780 !important;
    line-height: 1;
}

.about-prototype .about-prototype-tagline {
    margin: 0;
    color: var(--palette-earth) !important;
    font-size: 1.22rem !important;
    font-weight: 720 !important;
    letter-spacing: 0.08em;
}

.about-prototype .about-prototype-summary {
    max-width: 64ch;
    margin: 20px 0;
    color: var(--palette-ink) !important;
    font-size: 0.8rem !important;
    line-height: 1.75 !important;
}

.about-prototype-skill-row {
    display: grid;
    gap: 9px;
    margin-bottom: 22px;
}

.about-prototype-skill-row strong {
    font-size: 0.78rem;
    font-weight: 700;
}

.about-prototype-skill-row > div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.about-prototype-skill-row span {
    padding: 5px 9px;
    border-radius: 3px;
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut);
    font-size: 0.72rem;
    font-weight: 650;
}

.about-prototype-email {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--palette-ink) !important;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.about-prototype-email::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor !important;
    -webkit-mask: url('/static/images/ui-icons/mail.svg') center / contain no-repeat;
    mask: url('/static/images/ui-icons/mail.svg') center / contain no-repeat;
}

.about-prototype-resume {
    position: relative;
    display: flex;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: 0 0 0 47px;
}

.about-prototype-resume::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    width: 1px;
    background-color: var(--palette-line);
}

.about-prototype-resume p {
    margin: 0;
}

.about-prototype-resume-form {
    margin-top: 18px;
}

.about-prototype-resume-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.about-prototype-resume-input,
.about-prototype-resume-submit {
    min-width: 0;
    min-height: 44px;
    border-radius: 0 !important;
    font: inherit;
}

.about-prototype-resume-input {
    width: 100%;
    padding: 0 13px;
    border: 1px solid var(--palette-line-strong) !important;
    background-color: rgba(255, 255, 255, 0.64) !important;
    color: var(--palette-ink) !important;
    font-size: 0.76rem;
    font-weight: 500 !important;
}

.about-prototype-resume-input::placeholder {
    color: var(--palette-faint);
    opacity: 1;
}

.about-prototype-resume-submit {
    min-width: 124px;
    padding: 0 18px;
    border: 1px solid var(--palette-earth) !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
    font-size: 0.76rem;
    font-weight: 700 !important;
    cursor: pointer;
}

.about-prototype-resume-submit:hover {
    background-color: var(--palette-walnut) !important;
    border-color: var(--palette-walnut) !important;
}

.about-prototype-resume-submit:disabled {
    cursor: wait;
    opacity: 0.66;
}

.about-prototype-resume-status {
    min-height: 19px;
    margin-top: 8px !important;
    color: var(--palette-muted) !important;
    font-size: 0.68rem !important;
    line-height: 1.45 !important;
}

.about-prototype-resume-status.is-success {
    color: var(--palette-earth) !important;
}

.about-prototype-resume-status.is-error {
    color: var(--palette-walnut) !important;
}

.about-prototype-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.about-prototype-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.45fr) minmax(510px, 1.9fr) minmax(260px, 1fr);
    min-height: 236px;
    border-bottom: 1px solid var(--palette-line);
}

.about-prototype :where(h2, h3) {
    margin: 0 0 13px;
    font-size: 0.92rem !important;
    font-weight: 720 !important;
    letter-spacing: -0.02em;
}

.about-prototype :where(p, li) {
    color: var(--palette-muted) !important;
    font-size: 0.76rem;
    line-height: 1.7;
}

.about-prototype-intro {
    padding: 30px 30px 30px 0;
}

.about-prototype-intro p {
    max-width: 55ch;
    margin: 0;
}

.about-prototype-roles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 30px 0;
    border-right: 1px solid var(--palette-line);
    border-left: 1px solid var(--palette-line);
}

.about-prototype-roles section {
    min-width: 0;
    padding: 0 22px;
}

.about-prototype-roles h3 {
    font-size: 0.8rem !important;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.about-prototype-roles section + section {
    border-left: 1px solid var(--palette-line);
}

.about-prototype-roles p {
    margin: 0;
}

.about-prototype-updates {
    padding: 30px 0;
}

.about-prototype-updates ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-prototype-updates li {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 4px 0 4px 16px;
    border-left: 1px solid var(--palette-line);
    line-height: 1.5;
}

.about-prototype-updates li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--palette-earth) !important;
}

.about-prototype-updates time {
    color: var(--palette-earth);
    font-size: 0.7rem;
    font-weight: 650;
}

.about-prototype-facts {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
    padding: 24px 0 28px;
    border-bottom: 1px solid var(--palette-line);
}

.about-prototype-fact {
    display: grid;
    align-content: start;
    min-width: 0;
    min-height: 152px;
    gap: 9px;
    padding: 0 24px;
    border-right: 1px solid var(--palette-line);
}

.about-prototype-fact:first-child {
    padding-left: 0;
}

.about-prototype-fact:last-child {
    padding-right: 0;
    border-right: 0;
}

.about-prototype-fact h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.about-prototype-fact h2::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.about-prototype-fact-education h2::before {
    -webkit-mask-image: url('/static/images/ui-icons/education.svg');
    mask-image: url('/static/images/ui-icons/education.svg');
}

.about-prototype-fact-courses h2::before {
    -webkit-mask-image: url('/static/images/ui-icons/courses.svg');
    mask-image: url('/static/images/ui-icons/courses.svg');
}

.about-prototype-fact-projects h2::before {
    -webkit-mask-image: url('/static/images/ui-icons/code.svg');
    mask-image: url('/static/images/ui-icons/code.svg');
}

.about-prototype-fact-contributions h2::before {
    -webkit-mask-image: url('/static/images/ui-icons/github.svg');
    mask-image: url('/static/images/ui-icons/github.svg');
}

.about-prototype-fact strong {
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-prototype-fact small {
    color: var(--palette-muted);
    font-size: 0.68rem;
    line-height: 1.5;
}

.about-page :where(.about-tag, .course-tag) {
    border: 1px solid var(--palette-line) !important;
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

.about-page :where(.avatar, .project-media, .github-snake-frame) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.about-page .project-role-ribbon {
    display: none !important;
}

.about-page :where(.news-item, .timeline-content, .project-card, .education-item) {
    border-color: var(--palette-line) !important;
    background-color: transparent !important;
}

.about-page :where(.timeline-line, .timeline-marker) {
    background-color: var(--palette-earth) !important;
}

.about-resume-trigger,
.about-resume-submit {
    border: 1px solid var(--palette-earth) !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

@media (max-width: 1180px) {
    .about-prototype-identity {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .about-prototype-photo {
        width: 180px;
        height: 180px;
    }

    .about-prototype-resume {
        grid-column: 1 / -1;
        padding: 26px 0 0;
        border-top: 1px solid var(--palette-line);
    }

    .about-prototype-resume::before {
        display: none;
    }

    .about-prototype-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .about-prototype-grid > :nth-child(n) {
        padding: 26px 0;
        border-right: 0;
        border-left: 0;
        border-top: 1px solid var(--palette-line);
    }

    .about-prototype-grid > :first-child {
        border-top: 0;
    }

    .about-prototype-roles section {
        padding-inline: 20px;
    }

    .about-prototype-roles h3 {
        white-space: normal;
    }

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

    .about-prototype-fact {
        min-height: 100px;
        padding: 18px !important;
        border-bottom: 1px solid var(--palette-line);
    }

    .about-prototype-fact:nth-child(even) {
        border-right: 0;
    }

    .about-prototype-fact:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

@media (max-width: 600px) {
    .about-page {
        padding-inline: 20px !important;
    }

    .about-prototype {
        padding-top: 28px;
    }

    .about-prototype-identity {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 22px;
        padding-bottom: 28px;
    }

    .about-prototype-photo {
        width: 112px;
        height: 142px;
    }

    .about-prototype-name h1 {
        font-size: 1.8rem !important;
    }

    .about-prototype-name {
        transform: none;
    }

    .about-prototype-tagline {
        font-size: 0.92rem !important;
    }

    .about-prototype-summary {
        grid-column: 1 / -1;
        font-size: 0.74rem !important;
    }

    .about-prototype-resume-fields {
        grid-template-columns: 1fr;
    }

    .about-prototype-resume-submit {
        width: 100%;
    }

    .about-prototype-roles,
    .about-prototype-facts {
        grid-template-columns: 1fr;
    }

    .about-prototype-roles section + section {
        margin-top: 20px;
        padding: 20px 0 0;
        border-top: 1px solid var(--palette-line);
        border-left: 0;
    }

    .about-prototype-fact:nth-child(n) {
        border-right: 0;
        border-bottom: 1px solid var(--palette-line);
    }

    .about-prototype-fact:last-child {
        border-bottom: 0;
    }
}

/* Files, tools and links */
body,
body.dark-mode,
body[data-navbar="full"] {
    --tools-base: var(--palette-canvas) !important;
    --tools-text: var(--palette-ink) !important;
    --tools-muted: var(--palette-muted) !important;
    --tools-faint: var(--palette-faint) !important;
    --tools-line: var(--palette-line) !important;
    --tools-line-strong: var(--palette-line-strong) !important;
    --tools-accent: var(--palette-earth) !important;
    --tools-accent-soft: var(--palette-sand-soft) !important;
    --tools-accent-line: var(--palette-earth) !important;
    --tools-thumb: var(--palette-sand-soft) !important;
    --tools-error: var(--palette-walnut) !important;
    --links-text: var(--palette-ink) !important;
    --links-muted: var(--palette-muted) !important;
    --links-faint: var(--palette-faint) !important;
    --links-line: var(--palette-line) !important;
    --links-line-strong: var(--palette-line-strong) !important;
    --links-accent: var(--palette-earth) !important;
    --links-accent-strong: var(--palette-earth) !important;
    --links-accent-soft: var(--palette-sand-soft) !important;
    --links-surface: transparent !important;
    --links-surface-strong: var(--palette-surface) !important;
    --links-error: var(--palette-walnut) !important;
    --links-success: var(--palette-earth) !important;
}

.file-tree,
.tree-table-header,
.tool-directory,
.tools-grid,
.links-grid,
.exchange-section,
.site-details,
.state-panel,
.directory-state {
    border-color: var(--palette-line) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

.tree-table-header,
.directory-heading,
.site-detail-row,
.tool-entry,
.link-card {
    border-color: var(--palette-line) !important;
}

.tool-thumbnail,
.tool-thumbnail-placeholder {
    border: 1px solid var(--palette-line) !important;
    border-radius: 4px !important;
    background-color: var(--palette-sand-soft) !important;
    background-image: none !important;
    color: var(--palette-walnut) !important;
}

.tools-grid,
.loading-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.tool-item:nth-child(odd),
.loading-item:nth-child(odd) {
    border-right: 0 !important;
}

.tool-entry,
.tool-item:nth-child(even) .tool-entry,
.loading-item,
.loading-item:nth-child(even) {
    min-height: 96px !important;
    padding: 17px 0 !important;
    background-image: none !important;
}

.tool-thumbnail-placeholder {
    font-size: 0 !important;
}

.tool-thumbnail-placeholder::before {
    content: "";
    width: 24px;
    height: 24px;
    background: var(--palette-earth) !important;
    -webkit-mask: url('/static/images/ui-icons/tools.svg') center / contain no-repeat;
    mask: url('/static/images/ui-icons/tools.svg') center / contain no-repeat;
}

.link-avatar,
.link-avatar img {
    border-radius: 50% !important;
}

.link-modal {
    background-color: rgba(36, 35, 49, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Reservations */
body,
body.dark-mode,
body[data-navbar="full"] {
    --booking-panel: var(--palette-surface) !important;
    --booking-text: var(--palette-ink) !important;
    --booking-muted: var(--palette-muted) !important;
    --booking-line: var(--palette-line) !important;
    --booking-gold: var(--palette-earth) !important;
    --booking-gold-soft: var(--palette-sand-soft) !important;
    --status-booked: var(--palette-walnut) !important;
    --status-pending: var(--palette-camel) !important;
    --status-available: var(--palette-earth) !important;
    --status-closed: #a9a096 !important;
}

.legend {
    border: 1px solid var(--palette-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--palette-ink) !important;
}

.legend-item {
    color: var(--palette-ink) !important;
}

.calendar,
.calendar-week,
.day-cell,
.booking-page .aside,
.booking-page .calendar,
.booking-page .slot,
.calendar-empty {
    border-color: var(--palette-line) !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.calendar-empty {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.empty-calendar-heading {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--palette-line);
    background-color: var(--palette-sand-soft) !important;
}

.empty-calendar-heading .calendar-empty-title {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 700;
}

.empty-calendar-heading .calendar-empty-copy,
.empty-calendar-heading > span {
    color: var(--palette-muted) !important;
    font-size: 0.72rem;
}

.empty-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.empty-calendar-day {
    min-width: 0;
    padding: 12px 8px;
    border-right: 1px solid var(--palette-line);
}

.empty-calendar-day:last-child {
    border-right: 0;
}

.empty-calendar-day header {
    display: grid;
    gap: 3px;
    justify-items: center;
    padding-bottom: 10px;
    color: var(--palette-ink);
    font-size: 0.72rem;
}

.empty-calendar-day header span {
    color: var(--palette-muted);
    font-size: 0.64rem;
}

.empty-calendar-slot {
    margin-top: 6px;
    padding: 9px 4px;
    border: 1px solid var(--palette-line);
    border-radius: 3px;
    background-color: #f4f1eb !important;
    color: var(--palette-faint);
    font-size: 0.62rem;
    text-align: center;
    white-space: nowrap;
}

.empty-calendar-note {
    margin: 0;
    padding: 13px 18px;
    border-top: 1px solid var(--palette-line);
    color: var(--palette-muted) !important;
    font-size: 0.7rem;
}

@media (max-width: 760px) {
    .empty-calendar-grid {
        grid-template-columns: repeat(7, 118px);
        overflow-x: auto;
    }
}

.day-header,
.booking-page .calendar > div:first-child,
.booking-page .aside h3 {
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-ink) !important;
}

.time-slot.available,
.booking-page .slot.selected {
    border-color: var(--palette-earth) !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

.time-slot.pending,
.booking-page .slot.occupied {
    border-color: var(--palette-camel) !important;
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

.time-slot.booked {
    border-color: var(--palette-walnut) !important;
    background-color: var(--palette-walnut) !important;
    color: #ffffff !important;
}

.time-slot.closed {
    border-color: var(--palette-line) !important;
    background-color: #e7e1d8 !important;
    color: var(--palette-muted) !important;
}

/* Gomoku */
.gomoku-page {
    --game-ink: var(--palette-ink) !important;
    --game-text: var(--palette-ink) !important;
    --game-muted: var(--palette-muted) !important;
    --game-line: var(--palette-line) !important;
    --game-gold: var(--palette-earth) !important;
    --game-gold-soft: var(--palette-sand-soft) !important;
    --game-panel: var(--palette-surface) !important;
    --game-panel-strong: var(--palette-surface-strong) !important;
}

.gomoku-page h1 {
    text-align: left !important;
}

.gomoku-page h1::after {
    display: none !important;
}

.gomoku-page #gameBoard {
    border: 1px solid var(--palette-walnut) !important;
    background-color: var(--palette-sand) !important;
}

.gomoku-page .card,
.gomoku-page .info-panel > section,
.gomoku-page .player-info,
.gomoku-page .status,
.gomoku-page .room-code,
.gomoku-page .move-item {
    border: 1px solid var(--palette-line) !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    color: var(--palette-ink) !important;
}

.gomoku-page .card h2 {
    border-color: var(--palette-line) !important;
    color: var(--palette-earth) !important;
}

.gomoku-page .player-info.active,
.gomoku-page .status.playing,
.gomoku-page .btn-primary {
    border-color: var(--palette-earth) !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

.gomoku-page .status.waiting,
.gomoku-page .status.finished,
.gomoku-page .ready-badge {
    border-color: var(--palette-camel) !important;
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

.gomoku-page .btn-success,
.gomoku-page .btn-secondary {
    border-color: var(--palette-shadow) !important;
    background-color: var(--palette-shadow) !important;
    color: #ffffff !important;
}

.gomoku-page .btn-danger {
    border-color: var(--palette-walnut) !important;
    background-color: var(--palette-walnut) !important;
    color: #ffffff !important;
}

/* Admin workspace */
body.admin-page,
body.admin-page.dark-mode {
    --admin-bg: var(--palette-canvas) !important;
    --admin-bg-deep: var(--palette-canvas) !important;
    --admin-surface: var(--palette-surface) !important;
    --admin-surface-strong: var(--palette-surface-strong) !important;
    --admin-surface-soft: var(--palette-sand-soft) !important;
    --admin-surface-hover: var(--palette-sand-soft) !important;
    --admin-border: var(--palette-line) !important;
    --admin-border-strong: var(--palette-line-strong) !important;
    --admin-text: var(--palette-ink) !important;
    --admin-text-strong: var(--palette-ink) !important;
    --admin-muted: var(--palette-muted) !important;
    --admin-muted-soft: var(--palette-faint) !important;
    --admin-accent: var(--palette-earth) !important;
    --admin-accent-strong: var(--palette-walnut) !important;
    --admin-accent-soft: var(--palette-sand-soft) !important;
    --admin-success: var(--palette-earth) !important;
    --admin-warning: var(--palette-camel) !important;
    --admin-danger: var(--palette-walnut) !important;
    --admin-info: var(--palette-shadow) !important;
    --admin-shadow: none !important;
    --admin-shadow-soft: none !important;
    --admin-radius-xl: 6px !important;
    --admin-radius-lg: 6px !important;
    --admin-radius-md: 4px !important;
    --admin-radius-sm: 4px !important;
    background: var(--palette-canvas) !important;
    background-image: none !important;
    color: var(--palette-ink) !important;
}

body.admin-page::before,
body.admin-page::after {
    display: none !important;
}

.admin-topbar {
    border-bottom: 1px solid var(--palette-shadow) !important;
    background-color: var(--palette-shadow) !important;
    color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.admin-topbar :where(.admin-brand, .admin-brand-copy strong, .admin-nav a, .admin-view-site) {
    color: #ffffff !important;
}

.admin-topbar :where(.admin-brand-copy small) {
    color: rgba(255, 255, 255, 0.7) !important;
}

.admin-brand-mark {
    border: 1px solid var(--palette-camel) !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    color: var(--palette-sand) !important;
}

.admin-nav a:hover,
.admin-view-site:hover,
.admin-panel-page .admin-nav [data-admin-nav="overview"],
.admin-projects-page .admin-nav [data-admin-nav="content"],
.admin-blogs-page .admin-nav [data-admin-nav="blog"],
.editor-page .admin-nav [data-admin-nav="blog"],
.admin-tools-page .admin-nav [data-admin-nav="tools"],
.admin-fileshare-page .admin-nav [data-admin-nav="files"],
.admin-friendlinks-page .admin-nav [data-admin-nav="links"],
.admin-reserve-page .admin-nav [data-admin-nav="reserve"],
.admin-room-booking-page .admin-nav [data-admin-nav="room"],
.admin-analytics-page .admin-nav [data-admin-nav="insights"],
.admin-account-page .admin-nav [data-admin-nav="account"] {
    border-color: var(--palette-camel) !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

.admin-page :where(.panel, .card, .stat-card, .form-card, .table-card, .admin-section, .workspace-card, .quick-panel, .portal-card) {
    border: 1px solid var(--palette-line) !important;
    border-radius: 4px !important;
    background-color: var(--palette-surface) !important;
    background-image: none !important;
    color: var(--palette-ink) !important;
}

.admin-page :where(.modal-content, .modal-overlay > .modal, .table-shell, .table-scroll) {
    background-image: none !important;
}

.admin-page :where(table, thead, tbody, tr, th, td) {
    border-color: var(--palette-line) !important;
    color: var(--palette-ink) !important;
}

.admin-page :where(.table-shell, .table-scroll, tbody, tbody tr) {
    background: transparent !important;
    background-color: transparent !important;
}

.admin-page :where(tbody td) {
    background-color: transparent !important;
}

.admin-page :where(thead, th) {
    background-color: var(--palette-sand-soft) !important;
}

.admin-page :where(tbody tr:hover, .list-item:hover, .table-row:hover) {
    background-color: var(--palette-sand-soft) !important;
}

.admin-page :where(.status, .badge, [class*="status-"]) {
    border-radius: 3px !important;
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

.admin-page .btn-primary {
    border-color: var(--palette-earth) !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

.admin-page :where(.btn-secondary, .btn-edit) {
    border-color: var(--palette-line-strong) !important;
    background-color: transparent !important;
    color: var(--palette-ink) !important;
}

.admin-page :where(.btn-success, .btn-warning) {
    border-color: var(--palette-camel) !important;
    background-color: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

.admin-page :where(.btn-danger, .btn-delete) {
    border-color: var(--palette-walnut) !important;
    background-color: transparent !important;
    color: var(--palette-walnut) !important;
}

.admin-login-page .login-container,
.admin-login-page .login-card,
.admin-login-page .login-shell {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

.admin-page:not(.admin-login-page) .content-section {
    background-color: #f9f7f5 !important;
}

/* Blog editor */
body.editor-page,
body.site-chrome-dark.editor-page {
    --editor-bg: var(--palette-canvas) !important;
    --editor-surface: var(--palette-surface) !important;
    --editor-surface-strong: var(--palette-surface-strong) !important;
    --editor-surface-soft: var(--palette-sand-soft) !important;
    --editor-line: var(--palette-line) !important;
    --editor-line-strong: var(--palette-line-strong) !important;
    --editor-text: var(--palette-ink) !important;
    --editor-muted: var(--palette-muted) !important;
    --editor-subtle: var(--palette-faint) !important;
    --editor-accent: var(--palette-earth) !important;
    --editor-accent-strong: var(--palette-walnut) !important;
    --editor-accent-soft: var(--palette-sand-soft) !important;
    --editor-danger: var(--palette-walnut) !important;
    --editor-success: var(--palette-earth) !important;
    --editor-radius-lg: 4px !important;
    --editor-radius-md: 4px !important;
    --editor-radius-sm: 4px !important;
    --editor-shadow: none !important;
    background-color: var(--palette-canvas) !important;
    color: var(--palette-ink) !important;
}

html:has(body.editor-page) {
    background-color: var(--palette-canvas) !important;
}

body.editor-page::before,
body.editor-page::after {
    display: none !important;
}

body.editor-page .topbar,
body.editor-page .action-bar {
    border-color: var(--palette-line) !important;
    background-color: var(--palette-canvas) !important;
    color: var(--palette-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.editor-page :where(.main-layout, .left-panel, .middle-panel, .right-panel, .preview-content, .editor-pane, .settings-panel) {
    border-color: var(--palette-line) !important;
    background-color: var(--palette-surface) !important;
    color: var(--palette-ink) !important;
}

body.editor-page .main-layout {
    border-radius: 4px !important;
    background-color: var(--palette-line) !important;
}

body.editor-page :where(.panel-header, .editor-statusbar, .editor-mobile-tabs) {
    border-color: var(--palette-line) !important;
    background-color: var(--palette-canvas) !important;
    color: var(--palette-muted) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.editor-page #content {
    background-color: #ffffff !important;
    color: var(--palette-ink) !important;
    caret-color: var(--palette-earth) !important;
}

body.editor-page #content::placeholder,
body.editor-page :where(input, textarea)::placeholder {
    color: var(--palette-faint) !important;
}

body.editor-page #preview,
body.editor-page .preview-empty {
    background-color: #ffffff !important;
    color: var(--palette-ink) !important;
}

body.editor-page #preview :where(h1, h2, h3, h4) {
    color: var(--palette-ink) !important;
}

body.editor-page #preview :where(p, li, blockquote, th, td) {
    color: var(--palette-muted) !important;
}

body.editor-page #preview :where(code, pre) {
    border-color: var(--palette-line) !important;
    background-color: var(--palette-canvas) !important;
    color: var(--palette-walnut) !important;
}

body.editor-page :where(.editor-back, .markdown-toolbar button, .publish-switch, .editor-notice, .modal-content) {
    border-color: var(--palette-line) !important;
    background-color: var(--palette-surface) !important;
    color: var(--palette-ink) !important;
    box-shadow: none !important;
}

body.editor-page .modal {
    background-color: rgba(36, 35, 49, 0.38) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.editor-page :where(input, textarea, select) {
    background-color: var(--palette-surface-strong) !important;
    color: var(--palette-ink) !important;
}

body.editor-page :where(.btn-primary) {
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

/* Standalone legacy and API test pages */
body:not([data-navbar]):not(.admin-page):not(.editor-page) {
    background-color: var(--palette-canvas) !important;
    color: var(--palette-ink) !important;
}

body:not([data-navbar]):not(.admin-page):not(.editor-page) :where(.container, .test-section, .result, .card) {
    border-color: var(--palette-line) !important;
    border-radius: 4px !important;
    background-color: var(--palette-surface) !important;
    color: var(--palette-ink) !important;
}

@media (max-width: 900px) {
    .topbar {
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 18px !important;
        padding-inline: 18px !important;
    }

    .topbar nav {
        justify-content: flex-start;
    }

    body[data-page="home"] .home-main {
        padding-inline: 24px !important;
    }

    body[data-page="home"] .home-hero {
        min-height: 500px !important;
    }

    body[data-page="home"] .home-post-row {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    body[data-page="home"] .home-post-row span {
        display: none;
    }

    .admin-topbar {
        background-color: var(--palette-shadow) !important;
    }
}

@media (max-width: 640px) {
    .topbar {
        min-height: 62px;
        padding-top: calc(10px + var(--site-safe-top)) !important;
        padding-bottom: 8px !important;
    }

    .site-brand {
        font-size: 0.9rem;
    }

    .topbar nav {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    body[data-page="home"] .hero-title {
        font-size: clamp(3.4rem, 18vw, 5rem) !important;
    }

    body[data-page="home"] .hero-eyebrow {
        line-height: 1.6;
    }

    body[data-page="home"] .portal-row {
        width: 100%;
        overflow-x: auto;
    }

    body[data-page="home"] .portal-item {
        min-width: 88px;
        padding-inline: 14px !important;
    }

    body[data-page="home"] .home-post-row {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 14px 0;
    }

    body[data-page="home"] .home-post-row strong {
        white-space: normal;
    }

    .footer {
        display: block !important;
        padding: 18px !important;
    }
}

/* Admin prototype: split login, fixed dark rail and compact light workspace. */
.admin-login-page .admin-topbar {
    display: none !important;
}

.admin-login-page .login-wrapper {
    display: grid !important;
    min-height: 100dvh !important;
    grid-template-columns: minmax(340px, 0.82fr) minmax(480px, 1.18fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    background: #fdfcfa !important;
}

.admin-login-page .login-wrapper::before {
    display: none !important;
}

.admin-login-page .login-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(52px, 7vw, 96px) clamp(42px, 6vw, 84px);
    border-right: 1px solid var(--palette-line);
    background-color: var(--palette-canvas) !important;
}

.admin-login-page .login-identity-kicker,
.admin-login-page .login-eyebrow {
    margin: 0 0 18px;
    color: var(--palette-earth) !important;
    font-family: var(--palette-font-sans) !important;
    font-size: 0.72rem;
    font-weight: 700 !important;
    letter-spacing: 0.13em;
}

.admin-login-page .login-identity h2 {
    margin: 0;
    font-size: clamp(3.6rem, 7vw, 6.4rem) !important;
    font-weight: 760 !important;
    letter-spacing: -0.065em;
    line-height: 0.95;
}

.admin-login-page .login-identity-title {
    margin: 24px 0 0;
    color: var(--palette-muted) !important;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 600 !important;
}

.admin-login-page .login-identity-footer {
    display: grid;
    gap: 22px;
}

.admin-login-page .login-signature {
    color: var(--palette-ink);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: rotate(-7deg);
    transform-origin: left center;
}

.admin-login-page .login-identity-footer p {
    margin: 0;
    color: var(--palette-muted) !important;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.admin-login-page .login-container {
    align-self: center;
    width: min(520px, calc(100% - 72px)) !important;
    max-width: none !important;
    margin: 0 auto;
    padding: 48px !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.admin-login-page .login-container h1 {
    margin: 0 0 10px !important;
    color: var(--palette-ink) !important;
    font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
    font-weight: 730 !important;
    letter-spacing: -0.04em;
    text-align: left !important;
}

.admin-login-page .login-subtitle {
    margin: 0 0 34px !important;
    color: var(--palette-muted) !important;
    text-align: left !important;
}

.admin-login-page .form-group {
    margin-bottom: 22px !important;
}

.admin-login-page label {
    color: var(--palette-ink) !important;
    font-weight: 650 !important;
}

.admin-login-page input {
    min-height: 48px !important;
    border-radius: 3px !important;
    background-color: #ffffff !important;
    color: var(--palette-ink) !important;
}

.admin-login-page .login-container .btn {
    min-height: 48px;
    border-radius: 3px !important;
    background-color: var(--palette-earth) !important;
    color: #ffffff !important;
}

.admin-login-page .back-link {
    margin-top: 24px !important;
    text-align: left !important;
}

.admin-login-page .back-link a {
    color: var(--palette-muted) !important;
    font-size: 0.82rem;
}

.admin-page :where(.portal-title, .portal-directory-head h2, .portal-link-copy strong, .portal-footer) {
    color: var(--palette-ink) !important;
}

.admin-page .portal-header {
    max-width: 760px;
    padding: 12px 0 42px;
}

.admin-page .portal-title {
    font-size: clamp(2.5rem, 5vw, 4.4rem) !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
}

.admin-page .portal-intro {
    margin-top: 20px;
    color: var(--palette-muted) !important;
    font-size: 0.94rem;
    line-height: 1.7;
}

.admin-page .portal-directory,
.admin-page .portal-directory-head,
.admin-page .portal-link,
.admin-page .portal-footer {
    border-color: var(--palette-line) !important;
}

.admin-page .portal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.admin-page .portal-link,
.admin-page .portal-link:nth-child(n),
.admin-page .portal-link:last-child {
    grid-column: auto !important;
    min-height: 156px !important;
    gap: 18px !important;
    padding: 24px !important;
    border-right: 1px solid var(--palette-line) !important;
    background-color: transparent !important;
}

.admin-page .portal-link:nth-child(3n),
.admin-page .portal-link:last-child {
    border-right: 0 !important;
}

.admin-page .portal-link:hover {
    background-color: var(--palette-sand-soft) !important;
}

.admin-page .portal-link-copy strong {
    font-size: 1.22rem !important;
    font-weight: 700 !important;
}

.admin-page .portal-link-copy small {
    color: var(--palette-muted) !important;
    font-size: 0.78rem;
}

.admin-page .portal-arrow {
    color: var(--palette-earth) !important;
    font-size: 1.15rem;
}

.admin-nav a::before,
.admin-view-site::before,
.admin-page .portal-link::before,
.admin-page [onclick*="openCreateModal('file')"]::before,
.admin-page [onclick^="edit"]::before {
    content: "" !important;
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: currentColor !important;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.admin-nav [data-admin-nav="overview"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/workspace.svg');
    mask-image: url('/static/images/ui-icons/workspace.svg');
}

.admin-nav [data-admin-nav="insights"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/analytics.svg');
    mask-image: url('/static/images/ui-icons/analytics.svg');
}

.admin-nav [data-admin-nav="blog"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/blog.svg');
    mask-image: url('/static/images/ui-icons/blog.svg');
}

.admin-nav [data-admin-nav="content"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/projects.svg');
    mask-image: url('/static/images/ui-icons/projects.svg');
}

.admin-nav [data-admin-nav="tools"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/tools.svg');
    mask-image: url('/static/images/ui-icons/tools.svg');
}

.admin-nav [data-admin-nav="files"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/files.svg');
    mask-image: url('/static/images/ui-icons/files.svg');
}

.admin-nav [data-admin-nav="links"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/links.svg');
    mask-image: url('/static/images/ui-icons/links.svg');
}

.admin-nav [data-admin-nav="reserve"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/reserve.svg');
    mask-image: url('/static/images/ui-icons/reserve.svg');
}

.admin-nav [data-admin-nav="room"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/room.svg');
    mask-image: url('/static/images/ui-icons/room.svg');
}

.admin-nav [data-admin-nav="account"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/account.svg');
    mask-image: url('/static/images/ui-icons/account.svg');
}

.admin-view-site::before {
    -webkit-mask-image: url('/static/images/ui-icons/external.svg');
    mask-image: url('/static/images/ui-icons/external.svg');
}

.admin-page .portal-link::before {
    position: absolute !important;
    inset: 23px 22px auto auto !important;
    z-index: 1;
    width: 22px;
    height: 22px;
    background: var(--palette-earth) !important;
    opacity: 1 !important;
}

.admin-page .portal-link:nth-child(1)::before {
    -webkit-mask-image: url('/static/images/ui-icons/projects.svg');
    mask-image: url('/static/images/ui-icons/projects.svg');
}

.admin-page .portal-link:nth-child(2)::before {
    -webkit-mask-image: url('/static/images/ui-icons/blog.svg');
    mask-image: url('/static/images/ui-icons/blog.svg');
}

.admin-page .portal-link:nth-child(3)::before {
    -webkit-mask-image: url('/static/images/ui-icons/tools.svg');
    mask-image: url('/static/images/ui-icons/tools.svg');
}

.admin-page .portal-link:nth-child(4)::before {
    -webkit-mask-image: url('/static/images/ui-icons/files.svg');
    mask-image: url('/static/images/ui-icons/files.svg');
}

.admin-page .portal-link:nth-child(5)::before {
    -webkit-mask-image: url('/static/images/ui-icons/links.svg');
    mask-image: url('/static/images/ui-icons/links.svg');
}

.admin-page .portal-link:nth-child(6)::before {
    -webkit-mask-image: url('/static/images/ui-icons/reserve.svg');
    mask-image: url('/static/images/ui-icons/reserve.svg');
}

.admin-page .portal-link:nth-child(7)::before {
    -webkit-mask-image: url('/static/images/ui-icons/room.svg');
    mask-image: url('/static/images/ui-icons/room.svg');
}

.admin-page .portal-link:nth-child(8)::before {
    -webkit-mask-image: url('/static/images/ui-icons/analytics.svg');
    mask-image: url('/static/images/ui-icons/analytics.svg');
}

.admin-page .portal-link:nth-child(9)::before {
    -webkit-mask-image: url('/static/images/ui-icons/account.svg');
    mask-image: url('/static/images/ui-icons/account.svg');
}

.admin-page [onclick*="openCreateModal('file')"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/upload.svg');
    mask-image: url('/static/images/ui-icons/upload.svg');
}

.admin-page [onclick^="edit"]::before {
    -webkit-mask-image: url('/static/images/ui-icons/edit.svg');
    mask-image: url('/static/images/ui-icons/edit.svg');
}

.admin-panel-page .portal-legacy {
    display: none !important;
}

.admin-panel-page .dashboard-prototype {
    display: block !important;
}

.dashboard-prototype-topline,
.dashboard-prototype-welcome,
.dashboard-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-prototype-topline {
    min-height: 56px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--palette-line);
}

.dashboard-prototype-topline .page-kicker {
    margin-bottom: 5px;
}

.dashboard-prototype-topline h1 {
    margin: 0;
    font-size: 1.1rem !important;
    font-weight: 720 !important;
    letter-spacing: -0.02em;
}

.dashboard-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--palette-ink);
    font-size: 0.82rem;
}

.dashboard-profile-avatar {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background-color: var(--palette-earth) !important;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboard-prototype-welcome {
    padding: 26px 0 22px;
}

.dashboard-prototype-welcome h2 {
    margin: 0 0 5px;
    font-size: clamp(1.55rem, 3vw, 2.2rem) !important;
    font-weight: 730 !important;
}

.dashboard-prototype-welcome p,
.dashboard-prototype-welcome time {
    margin: 0;
    color: var(--palette-muted) !important;
    font-size: 0.8rem;
}

.dashboard-prototype-welcome time {
    padding: 8px 11px;
    border: 1px solid var(--palette-line);
    border-radius: 3px;
    background-color: var(--palette-surface-strong) !important;
}

.dashboard-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--palette-line);
    background-color: var(--palette-surface-strong) !important;
}

.dashboard-metric {
    display: grid;
    min-width: 0;
    gap: 7px;
    padding: 18px;
    border-right: 1px solid var(--palette-line);
}

.dashboard-metric:last-child {
    border-right: 0;
}

.dashboard-metric span,
.dashboard-metric small {
    overflow: hidden;
    color: var(--palette-muted) !important;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-metric strong {
    color: var(--palette-ink);
    font-size: clamp(1.25rem, 2.4vw, 1.9rem);
    font-weight: 740;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.dashboard-prototype-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 14px;
    margin-top: 14px;
}

.dashboard-recent,
.dashboard-quick {
    min-width: 0;
    border: 1px solid var(--palette-line);
    background-color: var(--palette-surface-strong) !important;
}

.dashboard-panel-heading {
    min-height: 64px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--palette-line);
}

.dashboard-panel-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--palette-earth);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.dashboard-panel-heading h2 {
    margin: 0;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
}

.dashboard-panel-heading a {
    color: var(--palette-earth) !important;
    font-size: 0.7rem;
    font-weight: 650;
    text-decoration: none;
}

.dashboard-message-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 88px;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--palette-line);
}

.dashboard-message-row:last-child {
    border-bottom: 0;
}

.dashboard-message-row strong,
.dashboard-message-row span,
.dashboard-message-row time {
    min-width: 0;
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-message-row span,
.dashboard-message-row time {
    color: var(--palette-muted) !important;
}

.dashboard-message-row time {
    text-align: right;
}

.dashboard-empty {
    margin: 0;
    padding: 32px 16px;
    color: var(--palette-muted) !important;
    font-size: 0.78rem;
}

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

.dashboard-quick-grid a {
    position: relative;
    display: grid;
    min-height: 82px;
    align-content: center;
    gap: 4px;
    padding: 15px 16px 15px 48px;
    border-right: 1px solid var(--palette-line);
    border-bottom: 1px solid var(--palette-line);
    color: var(--palette-ink) !important;
    text-decoration: none;
}

.dashboard-quick-grid a:nth-child(even) {
    border-right: 0;
}

.dashboard-quick-grid a:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.dashboard-quick-grid a:hover {
    background-color: var(--palette-sand-soft) !important;
}

.dashboard-quick-grid strong {
    font-size: 0.78rem;
    font-weight: 680;
}

.dashboard-quick-grid small {
    color: var(--palette-muted) !important;
    font-size: 0.66rem;
}

.dashboard-quick-grid a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 17px;
    width: 18px;
    height: 18px;
    background: var(--palette-shadow) !important;
    transform: translateY(-50%);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.dashboard-quick-grid [data-quick-icon="blog"]::before { -webkit-mask-image: url('/static/images/ui-icons/blog.svg'); mask-image: url('/static/images/ui-icons/blog.svg'); }
.dashboard-quick-grid [data-quick-icon="tools"]::before { -webkit-mask-image: url('/static/images/ui-icons/tools.svg'); mask-image: url('/static/images/ui-icons/tools.svg'); }
.dashboard-quick-grid [data-quick-icon="projects"]::before { -webkit-mask-image: url('/static/images/ui-icons/projects.svg'); mask-image: url('/static/images/ui-icons/projects.svg'); }
.dashboard-quick-grid [data-quick-icon="links"]::before { -webkit-mask-image: url('/static/images/ui-icons/links.svg'); mask-image: url('/static/images/ui-icons/links.svg'); }
.dashboard-quick-grid [data-quick-icon="files"]::before { -webkit-mask-image: url('/static/images/ui-icons/files.svg'); mask-image: url('/static/images/ui-icons/files.svg'); }
.dashboard-quick-grid [data-quick-icon="room"]::before { -webkit-mask-image: url('/static/images/ui-icons/room.svg'); mask-image: url('/static/images/ui-icons/room.svg'); }
.dashboard-quick-grid [data-quick-icon="reserve"]::before { -webkit-mask-image: url('/static/images/ui-icons/reserve.svg'); mask-image: url('/static/images/ui-icons/reserve.svg'); }
.dashboard-quick-grid [data-quick-icon="account"]::before { -webkit-mask-image: url('/static/images/ui-icons/account.svg'); mask-image: url('/static/images/ui-icons/account.svg'); }

@media (min-width: 901px) {
    body.admin-page:not(.admin-login-page) {
        --admin-sidebar-width: 224px;
    }

    .admin-page:not(.admin-login-page) .admin-topbar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1200;
        display: flex !important;
        width: var(--admin-sidebar-width) !important;
        min-height: 100dvh !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 30px;
        padding: 28px 18px 20px !important;
        border: 0 !important;
        border-right: 1px solid #3d3b49 !important;
        background-color: var(--palette-shadow) !important;
    }

    .admin-page:not(.admin-login-page) .admin-brand {
        width: 100%;
        padding: 0 4px;
    }

    .admin-page:not(.admin-login-page) .admin-nav {
        display: flex;
        width: 100%;
        flex: 0 1 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 5px !important;
        padding: 0 !important;
    }

    .admin-page:not(.admin-login-page) .admin-nav a,
    .admin-page:not(.admin-login-page) .admin-view-site {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        padding: 10px 12px;
        border-radius: 3px !important;
        color: rgba(255, 255, 255, 0.78) !important;
    }

    .admin-page:not(.admin-login-page) .admin-view-site {
        display: inline-flex !important;
        margin-top: auto;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }

    .admin-page:not(.admin-login-page) .content-section {
        width: calc(100% - var(--admin-sidebar-width)) !important;
        min-height: 100dvh !important;
        margin-left: var(--admin-sidebar-width) !important;
        padding: 38px 0 68px !important;
        background-color: #f9f7f5 !important;
    }

    .admin-page:not(.admin-login-page) .container {
        width: min(1280px, calc(100% - 64px)) !important;
    }

    .editor-page .editor-wrapper {
        width: calc(100% - var(--admin-sidebar-width)) !important;
        min-height: 100dvh !important;
        margin-left: var(--admin-sidebar-width) !important;
        padding: 18px 20px 24px !important;
        background-color: #f9f7f5 !important;
    }

    .editor-page .action-bar {
        top: 0 !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }

    .editor-page .main-layout {
        width: 100% !important;
        min-height: 640px !important;
        height: calc(100dvh - 124px) !important;
        max-height: none !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }
}

@media (min-width: 1281px) {
    .editor-page .main-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(260px, 0.72fr) !important;
        grid-template-areas: "write preview meta" !important;
    }

    .editor-page .middle-panel {
        grid-area: write;
    }

    .editor-page .right-panel {
        grid-area: preview;
    }

    .editor-page .left-panel {
        grid-area: meta;
    }
}

@media (max-width: 900px) {
    .admin-login-page .login-wrapper {
        grid-template-columns: 1fr !important;
    }

    .admin-login-page .login-identity {
        min-height: 270px;
        padding: 40px 32px;
        border-right: 0;
        border-bottom: 1px solid var(--palette-line);
    }

    .admin-login-page .login-identity-footer {
        display: none;
    }

    .admin-page .portal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-page .portal-link:nth-child(n) {
        border-right: 1px solid var(--palette-line) !important;
    }

    .admin-page .portal-link:nth-child(even) {
        border-right: 0 !important;
    }

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

    .dashboard-metric {
        border-bottom: 1px solid var(--palette-line);
    }

    .dashboard-metric:nth-child(even) {
        border-right: 0;
    }

    .dashboard-metric:last-child {
        grid-column: 1 / -1;
        border-bottom: 0;
    }

    .dashboard-prototype-grid {
        grid-template-columns: 1fr;
    }

    .editor-page .editor-wrapper {
        padding-top: 10px !important;
    }

    .editor-page .action-bar,
    .editor-page .main-layout,
    .editor-page :where(.left-panel, .middle-panel, .right-panel) {
        border-radius: 4px !important;
    }
}

@media (max-width: 640px) {
    .admin-login-page .login-identity {
        min-height: 210px;
    }

    .admin-login-page .login-identity h2 {
        font-size: 3.25rem !important;
    }

    .admin-login-page .login-container {
        width: 100% !important;
        padding: 42px 24px 64px !important;
    }

    .admin-page .portal-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-page .portal-link:nth-child(n) {
        min-height: 140px !important;
        border-right: 0 !important;
    }

    .dashboard-prototype-topline,
    .dashboard-prototype-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-prototype-welcome time {
        width: 100%;
    }

    .dashboard-metric-grid,
    .dashboard-quick-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-metric,
    .dashboard-quick-grid a,
    .dashboard-quick-grid a:nth-child(even) {
        border-right: 0;
        border-bottom: 1px solid var(--palette-line);
    }

    .dashboard-quick-grid a:nth-last-child(2) {
        border-bottom: 1px solid var(--palette-line);
    }

    .dashboard-message-row {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .dashboard-message-row time {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Prototype material pass: the generated comps use a softly varied editorial
   paper surface, not a perfectly flat digital white. The texture is intentionally
   low contrast so typography and controls remain crisp. */
:root {
    --palette-paper-image: url('/static/images/paper-texture.png');
    --palette-surface: rgba(253, 252, 249, 0.82) !important;
    --palette-surface-strong: rgba(255, 255, 255, 0.88) !important;
    --palette-line: #d8cfc1;
    --palette-line-strong: #b9aa96;
    --palette-sand-soft: rgba(242, 234, 208, 0.84) !important;
}

html,
html.dark-mode,
body,
body.dark-mode,
body.site-chrome-dark,
body[data-navbar="full"],
body.admin-page,
body.editor-page {
    background-color: var(--palette-canvas) !important;
    background-image: var(--palette-paper-image) !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    background-size: 1254px 1254px !important;
}

body:not(.admin-page) .topbar {
    background-color: rgba(251, 249, 244, 0.92) !important;
    background-image: var(--palette-paper-image) !important;
    background-repeat: repeat !important;
    background-size: 1254px 1254px !important;
    box-shadow: 0 1px 0 rgba(83, 62, 45, 0.045) !important;
}

.admin-page:not(.admin-login-page) .content-section,
.editor-page .editor-wrapper,
.admin-login-page .login-wrapper,
.admin-login-page .login-identity {
    background-color: rgba(249, 247, 245, 0.74) !important;
    background-image: var(--palette-paper-image) !important;
    background-repeat: repeat !important;
    background-size: 1254px 1254px !important;
}

.admin-page :where(
    .workspace-panel,
    .dashboard-metric-grid,
    .dashboard-prototype-panel,
    .portal-directory,
    .table-shell,
    .form-card,
    .panel,
    .card
),
body.editor-page :where(
    .action-bar,
    .left-panel,
    .middle-panel,
    .right-panel,
    #content,
    #preview,
    .modal-content
) {
    background-color: rgba(255, 255, 255, 0.72) !important;
}

body.editor-page :where(.panel-header, .editor-statusbar, .editor-mobile-tabs),
.admin-page :where(thead, .workspace-panel-head, .dashboard-prototype-panel > header) {
    background-color: rgba(251, 249, 244, 0.78) !important;
}

body:not(.admin-page) :where(
    .panel,
    .card,
    .tool-item,
    .friend-card,
    .booking-shell,
    .schedule-shell,
    .file-panel,
    .viewer-panel,
    input,
    textarea,
    select
) {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

@media (max-width: 900px) {
    .topbar .toolbar {
        display: none !important;
    }
}

/* Admin light-surface enforcement v12
   The legacy admin stylesheet contains page-specific dark shorthands with
   higher specificity. Keep Shadow Grey on the navigation rail only and make
   every workspace surface match the generated light management prototypes. */
body.admin-page.admin-page :where(
    .dashboard-session,
    .dashboard-stat,
    .dashboard-modules,
    .module-link,
    .section,
    .workspace-panel,
    .workspace-card,
    .content-card,
    .form-card,
    .panel,
    .card,
    .tool-card,
    .gallery-item,
    .stat-card,
    .booking-item,
    .collapsible-header,
    .collapsible-content,
    .date-picker-section,
    .day-slot-card,
    .analytics-metric,
    .admin-notice,
    .table-shell,
    .table-scroll,
    .modal-content,
    .modal-overlay > .modal
) {
    border-color: var(--palette-line) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    background-image: none !important;
    color: var(--palette-ink) !important;
    box-shadow: none !important;
}

body.admin-page.admin-page :where(
    .filter-tabs,
    .tabs,
    .workspace-panel-head,
    .modal-header,
    .toolbar,
    .upload-field
) {
    border-color: var(--palette-line) !important;
    background: rgba(251, 249, 244, 0.84) !important;
    background-image: none !important;
    color: var(--palette-ink) !important;
    box-shadow: none !important;
}

body.admin-page.admin-page :where(.module-link:hover, .portal-link:hover, .tool-card:hover, .booking-item:hover) {
    border-color: var(--palette-line-strong) !important;
    background: var(--palette-sand-soft) !important;
    color: var(--palette-ink) !important;
    transform: none !important;
}

body.admin-page.admin-page :where(input, textarea, select) {
    border-color: var(--palette-line) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    background-image: none !important;
    color: var(--palette-ink) !important;
}

body.admin-page.admin-page :where(input, textarea)::placeholder {
    color: var(--palette-faint) !important;
    opacity: 1 !important;
}

body.admin-page.admin-page :where(
    .badge,
    .status-badge,
    .booking-status,
    [class*="status-"]
) {
    border-color: #cbbd9f !important;
    background: var(--palette-sand-soft) !important;
    color: var(--palette-walnut) !important;
}

body.admin-page.admin-page :where(
    .badge-active,
    .badge-published,
    .badge-approved,
    .status-approved,
    .booking-status.approved
) {
    border-color: #bfd2b9 !important;
    background: #eef5eb !important;
    color: #315f35 !important;
}

body.admin-page.admin-page :where(
    .status-rejected,
    .booking-status.rejected,
    .badge-rejected
) {
    border-color: #d9bdb5 !important;
    background: #f7eeeb !important;
    color: #75483e !important;
}

body.admin-page.admin-page :where(.admin-topbar, .admin-topbar *) {
    color: #ffffff !important;
}

body.admin-page.admin-page .admin-topbar {
    border-color: rgba(221, 202, 125, 0.2) !important;
    background: var(--palette-shadow) !important;
    background-image: none !important;
}

body.admin-page.admin-page :where(.admin-nav a:hover, .admin-nav a.is-current, .admin-nav a[aria-current="page"]) {
    border-color: var(--palette-camel) !important;
    background: var(--palette-earth) !important;
    color: #ffffff !important;
}

body.admin-page.admin-page :where(.table-shell, .table-scroll) {
    overflow: auto;
}

body.admin-page.admin-page :where(thead, th) {
    background: rgba(242, 234, 208, 0.86) !important;
    color: var(--palette-walnut) !important;
}

body.admin-page.admin-page :where(tbody, tbody tr, tbody td) {
    background: transparent !important;
    color: var(--palette-ink) !important;
}

body.admin-page.admin-page :where(tbody tr:hover, .table-row:hover) {
    background: rgba(242, 234, 208, 0.64) !important;
}

body.admin-page.admin-page .modal-overlay {
    background: rgba(36, 35, 49, 0.46) !important;
}

/* Blog index v12 — mirrors the approved standalone reference. */
body.blog-index-page.blog-index-page .content-section {
    min-height: calc(100dvh - 68px);
    padding: calc(106px + var(--site-safe-top)) clamp(28px, 4.5vw, 70px) 46px !important;
}

body.blog-index-page .container {
    width: 100%;
    max-width: 1400px !important;
    margin: 0 auto;
}

body.blog-index-page .section-shell {
    padding: 0 !important;
}

body.blog-index-page .blog-hero {
    max-width: 760px;
}

body.blog-index-page .blog-kicker {
    display: none;
}

body.blog-index-page .blog-title {
    margin: 0 !important;
    color: var(--palette-ink) !important;
    font-size: clamp(2.35rem, 3.2vw, 3rem) !important;
    font-weight: 780 !important;
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

body.blog-index-page .blog-intro {
    margin: 12px 0 0;
    color: var(--palette-muted) !important;
    font-size: 0.92rem;
    font-weight: 540;
    line-height: 1.7;
}

body.blog-index-page .blog-search {
    position: relative;
    display: block;
    width: min(478px, 100%);
    margin-top: 22px;
}

body.blog-index-page .blog-search::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 14px;
    width: 17px;
    height: 17px;
    background-color: var(--palette-muted);
    transform: translateY(-50%);
    -webkit-mask: url('/static/images/ui-icons/search.svg') center / contain no-repeat;
    mask: url('/static/images/ui-icons/search.svg') center / contain no-repeat;
    pointer-events: none;
}

body.blog-index-page .blog-search input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 43px;
    border: 1px solid var(--palette-line) !important;
    border-radius: 3px !important;
    outline: 0;
    background: rgba(255, 255, 255, 0.52) !important;
    color: var(--palette-ink) !important;
    font: 560 0.86rem/1 var(--palette-font-sans) !important;
    -webkit-appearance: none;
    appearance: none;
}

body.blog-index-page .blog-search input:focus {
    border-color: var(--palette-earth) !important;
}

body.blog-index-page .blog-search input::placeholder {
    color: var(--palette-faint) !important;
    opacity: 1;
}

body.blog-index-page .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.blog-index-page .blog-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    margin-top: 22px;
    border-bottom: 1px solid var(--palette-line);
}

body.blog-index-page .category-nav {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: clamp(12px, 2.1vw, 30px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    border: 0 !important;
    background: transparent !important;
}

body.blog-index-page .category-nav-item {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 2px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: var(--palette-ink) !important;
    font-size: 0.84rem !important;
    font-weight: 620 !important;
}

body.blog-index-page .category-nav-item::after {
    display: none !important;
}

body.blog-index-page .category-nav-item:hover {
    color: var(--palette-earth) !important;
}

body.blog-index-page .category-nav-item.active {
    padding-inline: 13px !important;
    border-color: var(--palette-earth) !important;
    background: var(--palette-earth) !important;
    color: #ffffff !important;
}

body.blog-index-page .archive-meta {
    padding-bottom: 8px;
    color: var(--palette-muted) !important;
    font-family: var(--palette-font-sans) !important;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body.blog-index-page #postsContainer {
    min-height: 160px;
}

body.blog-index-page .year-section {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 18px !important;
    margin: 0 !important;
    animation: none !important;
}

body.blog-index-page .year-title {
    margin: 0 !important;
    padding: 21px 0 0 !important;
    color: var(--palette-ink) !important;
    font-family: var(--palette-font-sans) !important;
    font-size: 0.92rem !important;
    font-weight: 780 !important;
    line-height: 1;
    letter-spacing: 0.14em;
}

body.blog-index-page .post-list {
    min-width: 0;
    margin: 0 !important;
    list-style: none;
}

body.blog-index-page .post-item,
body.blog-index-page .post-item:last-child {
    border: 0 !important;
    border-bottom: 1px solid var(--palette-line) !important;
    background: transparent !important;
}

body.blog-index-page .post-link {
    display: grid !important;
    grid-template-columns: 88px minmax(280px, 1fr) 118px 128px 70px;
    align-items: center;
    gap: 22px;
    min-height: 67px;
    padding: 9px 10px !important;
    color: var(--palette-ink) !important;
    text-decoration: none;
}

body.blog-index-page .post-item:hover {
    background: rgba(242, 234, 208, 0.52) !important;
}

body.blog-index-page .post-date {
    color: var(--palette-ink);
    font-size: 0.96rem;
    font-weight: 560;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

body.blog-index-page .post-copy {
    min-width: 0;
}

body.blog-index-page .post-title {
    margin: 0 !important;
    overflow: hidden;
    color: var(--palette-ink) !important;
    font-family: var(--palette-font-sans) !important;
    font-size: 0.98rem !important;
    font-weight: 720 !important;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.blog-index-page .post-summary {
    display: block !important;
    margin: 3px 0 0 !important;
    overflow: hidden;
    color: var(--palette-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 520;
    line-height: 1.45 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.blog-index-page .post-tag {
    justify-self: center;
    max-width: 112px;
    padding: 4px 10px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 3px !important;
    background: rgba(221, 202, 125, 0.38) !important;
    color: var(--palette-walnut) !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.blog-index-page :where(.post-read, .post-views) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--palette-muted);
    font-size: 0.76rem;
    font-weight: 560;
    white-space: nowrap;
}

body.blog-index-page :where(.post-read, .post-views)::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body.blog-index-page .post-read::before {
    -webkit-mask-image: url('/static/images/ui-icons/clock.svg');
    mask-image: url('/static/images/ui-icons/clock.svg');
}

body.blog-index-page .post-views::before {
    -webkit-mask-image: url('/static/images/ui-icons/analytics.svg');
    mask-image: url('/static/images/ui-icons/analytics.svg');
}

body.blog-index-page .post-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 440ms ease var(--reveal-delay, 0ms),
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
        background-color 180ms ease;
    will-change: opacity, transform;
}

body.blog-index-page .post-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

body.blog-index-page :where(.loading, .no-posts) {
    margin: 0;
    padding: 58px 0;
    color: var(--palette-muted) !important;
    font-size: 0.9rem;
    font-weight: 560;
    text-align: center;
}

@media (max-width: 1040px) {
    body.blog-index-page .post-link {
        grid-template-columns: 76px minmax(220px, 1fr) 104px 116px 58px;
        gap: 14px;
    }
}

@media (max-width: 760px) {
    body.blog-index-page.blog-index-page .content-section {
        padding: calc(92px + var(--site-safe-top)) 18px 36px !important;
    }

    body.blog-index-page .blog-title {
        font-size: clamp(2.15rem, 11vw, 2.75rem) !important;
    }

    body.blog-index-page .blog-intro {
        max-width: 34ch;
        font-size: 0.86rem;
    }

    body.blog-index-page .blog-filter-row {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-top: 18px;
    }

    body.blog-index-page .category-nav {
        width: calc(100vw - 36px);
        gap: 18px !important;
    }

    body.blog-index-page .archive-meta {
        justify-self: end;
        padding: 4px 0 9px;
    }

    body.blog-index-page .year-section {
        display: block !important;
    }

    body.blog-index-page .year-title {
        padding: 22px 0 10px !important;
    }

    body.blog-index-page .post-link {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "date copy copy"
            ". tag read";
        gap: 6px 12px;
        min-height: 86px;
        padding: 12px 2px !important;
    }

    body.blog-index-page .post-date { grid-area: date; align-self: start; padding-top: 2px; }
    body.blog-index-page .post-copy { grid-area: copy; }
    body.blog-index-page .post-tag { grid-area: tag; justify-self: start; }
    body.blog-index-page .post-read { grid-area: read; justify-self: end; }
    body.blog-index-page .post-views { display: none; }

    body.blog-index-page .post-title {
        white-space: normal;
    }

    body.blog-index-page .post-summary {
        display: -webkit-box !important;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.blog-index-page .post-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Admin correction v13 — shared shell and page geometry taken from the
   approved image-first references. Only the active rail item is rounded. */
body.admin-page.admin-page:not(.admin-login-page) {
    --admin-sidebar-width: 276px;
    --admin-workspace-bar-height: 82px;
    min-height: 100dvh;
    background-color: #faf8f3 !important;
    background-image: var(--palette-paper-image) !important;
    background-repeat: repeat !important;
    background-size: 1254px 1254px !important;
    color: #17171b !important;
    font-family: var(--palette-font-sans) !important;
    font-weight: 540 !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-topbar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1300 !important;
    display: flex !important;
    width: var(--admin-sidebar-width) !important;
    min-width: var(--admin-sidebar-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 26px !important;
    padding: 22px 20px 20px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid rgba(221, 202, 125, 0.12) !important;
    background: #242331 !important;
    background-image:
        radial-gradient(circle at 22% 12%, rgba(221, 202, 125, 0.055), transparent 28%),
        radial-gradient(circle at 80% 64%, rgba(255, 255, 255, 0.025), transparent 34%) !important;
    box-shadow: none !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-brand {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 56px !important;
    align-items: center !important;
    padding: 0 !important;
    color: #ffffff !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-brand-mark {
    display: grid !important;
    width: 56px !important;
    height: 56px !important;
    place-items: center !important;
    border: 1px solid #bd9635 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.012) !important;
    color: #ffffff !important;
    font-size: 1.18rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.08em !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-brand-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-brand-copy strong {
    color: #ffffff !important;
    font-size: 1.12rem !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-brand-copy small {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.76rem !important;
    font-weight: 560 !important;
    letter-spacing: 0.01em !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-nav {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 !important;
    overflow: auto !important;
    scrollbar-width: none !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-nav::-webkit-scrollbar {
    display: none !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-nav a,
body.admin-page.admin-page:not(.admin-login-page) .admin-view-site {
    display: flex !important;
    width: 100% !important;
    min-height: 59px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 12px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.88) !important;
    box-shadow: none !important;
    font-size: 0.98rem !important;
    font-weight: 620 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-nav a::before,
body.admin-page.admin-page:not(.admin-login-page) .admin-view-site::before {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
    background-color: currentColor !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-nav a:hover {
    border-color: transparent !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #ffffff !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-nav a.is-current,
body.admin-page.admin-page:not(.admin-login-page) .admin-nav a[aria-current="page"] {
    border-color: rgba(221, 202, 125, 0.35) !important;
    border-radius: 10px !important;
    background-color: #a27035 !important;
    background-image:
        linear-gradient(115deg, rgba(221, 202, 125, 0.3), transparent 48%),
        linear-gradient(135deg, #b77d31 0%, #a27035 68%, #bd8835 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(9, 8, 15, 0.22) !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-view-site {
    min-height: 64px !important;
    margin-top: auto !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-view-site::before {
    -webkit-mask-image: url('/static/images/ui-icons/logout.svg') !important;
    mask-image: url('/static/images/ui-icons/logout.svg') !important;
}

body.admin-page.admin-page:not(.admin-login-page) .admin-view-site:hover {
    border-color: rgba(221, 202, 125, 0.5) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

.admin-workspace-bar {
    position: fixed;
    inset: 0 0 auto var(--admin-sidebar-width);
    z-index: 1200;
    display: grid;
    height: var(--admin-workspace-bar-height);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 36px;
    padding: 0 34px;
    border-bottom: 1px solid #ddd5ca;
    background-color: rgba(251, 249, 245, 0.96);
    background-image: var(--palette-paper-image);
    background-repeat: repeat;
    background-size: 1254px 1254px;
    color: #17171b;
}

.admin-menu-toggle {
    display: grid;
    width: 30px;
    height: 30px;
    place-content: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #17171b;
    cursor: pointer;
}

.admin-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
}

.admin-workspace-title {
    color: #17171b !important;
    font-size: 1.55rem;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.03em;
}

.admin-workspace-profile {
    display: grid;
    grid-template-columns: 44px auto 12px;
    align-items: center;
    gap: 12px;
    color: #17171b !important;
    text-decoration: none;
}

.admin-workspace-avatar {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background-color: #a27035;
    background-image: linear-gradient(140deg, #bd883b, #a27035);
    color: #ffffff;
    font-size: 1.12rem;
    font-weight: 680;
}

.admin-workspace-person {
    display: grid;
    gap: 2px;
}

.admin-workspace-person strong {
    color: #17171b !important;
    font-size: 0.98rem;
    font-weight: 650;
}

.admin-workspace-person small {
    color: var(--palette-muted) !important;
    font-size: 0.68rem;
    font-weight: 560;
}

.admin-profile-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.admin-rail-scrim {
    display: none;
}

body.admin-page.admin-page:not(.admin-login-page) .content-section,
body.admin-page.admin-page:not(.admin-login-page).editor-page .editor-wrapper {
    width: calc(100% - var(--admin-sidebar-width)) !important;
    min-height: 100dvh !important;
    margin: 0 0 0 var(--admin-sidebar-width) !important;
    padding: calc(var(--admin-workspace-bar-height) + 38px) 34px 64px !important;
    background-color: rgba(250, 248, 243, 0.74) !important;
    background-image: var(--palette-paper-image) !important;
    background-repeat: repeat !important;
    background-size: 1254px 1254px !important;
}

body.admin-page.admin-page:not(.admin-login-page) .content-section > .container,
body.admin-page.admin-page:not(.admin-login-page) .content-section .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(h1, h2, h3, h4, h5, h6) {
    color: #17171b !important;
    font-family: var(--palette-font-sans) !important;
    font-weight: 720 !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(p, span, label, td, th, button, input, select, textarea, a) {
    font-family: var(--palette-font-sans) !important;
}

body.admin-page.admin-page:not(.admin-login-page) .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(.page-header, .workspace-header) {
    align-items: flex-start !important;
    margin: 0 0 30px !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(.page-header, .workspace-header) .page-kicker,
body.admin-page.admin-page:not(.admin-login-page) .workspace-back,
body.admin-page.admin-page:not(.admin-login-page) .workspace-header-actions .workspace-back {
    display: none !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(.page-title, .workspace-header .page-title) {
    margin: 0 0 9px !important;
    color: #17171b !important;
    font-size: clamp(2.35rem, 3.2vw, 2.8rem) !important;
    font-weight: 760 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.045em !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(.page-intro, .page-subtitle) {
    margin: 0 !important;
    color: #62594f !important;
    font-size: 0.98rem !important;
    font-weight: 530 !important;
    line-height: 1.65 !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(
    .workspace-panel,
    .workspace-card,
    .content-card,
    .form-card,
    .panel,
    .card,
    .tool-card,
    .gallery-item,
    .stat-card,
    .booking-item,
    .analytics-metric,
    .table-shell,
    .table-scroll,
    .admin-notice
) {
    border-color: #d9d0c4 !important;
    border-radius: 4px !important;
    background-color: rgba(255, 255, 255, 0.34) !important;
    background-image: none !important;
    color: #17171b !important;
    box-shadow: none !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(input, textarea, select) {
    border: 1px solid #d3cabf !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    color: #17171b !important;
    font-weight: 540 !important;
    box-shadow: none !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(input, textarea, select):focus {
    border-color: #a27035 !important;
    outline: 2px solid rgba(162, 112, 53, 0.16) !important;
    outline-offset: 1px !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(.btn, button.btn) {
    min-height: 44px !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    transform: none !important;
}

body.admin-page.admin-page:not(.admin-login-page) :where(.btn-primary, .btn-success) {
    border-color: #a27035 !important;
    background-color: #a27035 !important;
    background-image: linear-gradient(135deg, #b77d31, #a27035) !important;
    color: #ffffff !important;
}

/* Dashboard */
body.admin-panel-page.admin-panel-page .dashboard-prototype-topline {
    display: none !important;
}

body.admin-panel-page.admin-panel-page .dashboard-prototype-welcome {
    min-height: 117px !important;
    align-items: flex-start !important;
    padding: 8px 0 27px !important;
    margin-bottom: 12px !important;
}

body.admin-panel-page .dashboard-prototype-welcome h2 {
    margin: 0 0 10px !important;
    font-size: clamp(2.25rem, 3.25vw, 2.85rem) !important;
    font-weight: 780 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.05em !important;
}

body.admin-panel-page .dashboard-prototype-welcome p,
body.admin-panel-page .dashboard-prototype-welcome time {
    color: #403b35 !important;
    font-size: 0.92rem !important;
    font-weight: 530 !important;
}

body.admin-panel-page .dashboard-prototype-welcome time {
    position: relative !important;
    min-width: 300px !important;
    padding: 14px 52px 14px 18px !important;
    border: 1px solid #d9d0c4 !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.42) !important;
    text-align: center !important;
}

body.admin-panel-page .dashboard-prototype-welcome time::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 19px;
    height: 19px;
    background: #17171b;
    transform: translateY(-50%);
    -webkit-mask: url('/static/images/ui-icons/reserve.svg') center / contain no-repeat;
    mask: url('/static/images/ui-icons/reserve.svg') center / contain no-repeat;
}

body.admin-panel-page .dashboard-metric-grid {
    display: grid !important;
    min-height: 166px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    border: 1px solid #d9d0c4 !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

body.admin-panel-page .dashboard-metric {
    position: relative !important;
    display: grid !important;
    min-height: 164px !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 24px 24px !important;
    border-right: 1px solid #d9d0c4 !important;
}

body.admin-panel-page .dashboard-metric:last-child {
    border-right: 0 !important;
}

body.admin-panel-page .dashboard-metric::after {
    content: "";
    position: absolute;
    top: 68px;
    right: 25px;
    width: 31px;
    height: 31px;
    background: #17171b;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body.admin-panel-page .dashboard-metric[data-metric-icon="visitors"]::after { -webkit-mask-image: url('/static/images/ui-icons/user.svg'); mask-image: url('/static/images/ui-icons/user.svg'); }
body.admin-panel-page .dashboard-metric[data-metric-icon="home"]::after { -webkit-mask-image: url('/static/images/ui-icons/workspace.svg'); mask-image: url('/static/images/ui-icons/workspace.svg'); }
body.admin-panel-page .dashboard-metric[data-metric-icon="today"]::after { -webkit-mask-image: url('/static/images/ui-icons/analytics.svg'); mask-image: url('/static/images/ui-icons/analytics.svg'); }
body.admin-panel-page .dashboard-metric[data-metric-icon="messages"]::after { -webkit-mask-image: url('/static/images/ui-icons/mail.svg'); mask-image: url('/static/images/ui-icons/mail.svg'); }
body.admin-panel-page .dashboard-metric[data-metric-icon="projects"]::after { -webkit-mask-image: url('/static/images/ui-icons/files.svg'); mask-image: url('/static/images/ui-icons/files.svg'); }

body.admin-panel-page .dashboard-metric span,
body.admin-panel-page .dashboard-metric small {
    color: #403b35 !important;
    font-size: 0.86rem !important;
    font-weight: 530 !important;
}

body.admin-panel-page .dashboard-metric strong {
    color: #17171b !important;
    font-size: 2.35rem !important;
    font-weight: 740 !important;
}

body.admin-panel-page .dashboard-prototype-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    gap: 16px !important;
    margin-top: 23px !important;
}

body.admin-panel-page :where(.dashboard-recent, .dashboard-quick) {
    min-height: 518px !important;
    border: 1px solid #d9d0c4 !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.28) !important;
}

body.admin-panel-page .dashboard-panel-heading {
    min-height: 66px !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #d9d0c4 !important;
}

body.admin-panel-page .dashboard-panel-heading span {
    display: none !important;
}

body.admin-panel-page .dashboard-panel-heading h2 {
    font-size: 1.08rem !important;
    font-weight: 720 !important;
}

body.admin-panel-page .dashboard-panel-heading a {
    color: #a27035 !important;
    font-size: 0.84rem !important;
    font-weight: 650 !important;
}

body.admin-panel-page .dashboard-message-row {
    min-height: 74px !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid #d9d0c4 !important;
}

body.admin-panel-page .dashboard-quick-grid a {
    min-height: 112px !important;
    padding: 20px 18px 20px 88px !important;
    border-color: #d9d0c4 !important;
    background: transparent !important;
}

body.admin-panel-page .dashboard-quick-grid a::before {
    left: 30px !important;
    width: 32px !important;
    height: 32px !important;
    background: #17171b !important;
}

body.admin-panel-page .dashboard-quick-grid strong {
    color: #17171b !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
}

body.admin-panel-page .dashboard-quick-grid small {
    color: #4f4840 !important;
    font-size: 0.78rem !important;
    font-weight: 520 !important;
}

/* Files */
body.admin-fileshare-page .section-shell {
    padding: 0 !important;
}

body.admin-page.admin-page.admin-fileshare-page .content-section {
    padding-top: calc(var(--admin-workspace-bar-height) + 33px) !important;
}

body.admin-page.admin-page.admin-fileshare-page .page-header {
    margin-bottom: 14px !important;
}

body.admin-fileshare-page .file-breadcrumb-row {
    display: flex !important;
    min-height: 52px !important;
    align-items: center !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.admin-fileshare-page .breadcrumb {
    color: #4f4840 !important;
    font-size: 0.94rem !important;
    font-weight: 560 !important;
}

body.admin-fileshare-page .breadcrumb a {
    color: #a27035 !important;
    font-weight: 650 !important;
}

body.admin-fileshare-page .actions .btn {
    min-height: 44px !important;
    padding-inline: 18px !important;
}

body.admin-fileshare-page .actions .btn::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body.admin-fileshare-page .actions .btn:first-child::before { -webkit-mask-image: url('/static/images/ui-icons/files.svg'); mask-image: url('/static/images/ui-icons/files.svg'); }
body.admin-fileshare-page .actions .btn:last-child::before { -webkit-mask-image: url('/static/images/ui-icons/upload.svg'); mask-image: url('/static/images/ui-icons/upload.svg'); }

.file-filter-row {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 250px 230px 200px;
    gap: 26px;
    justify-content: start;
    align-items: center;
    margin-bottom: 24px;
}

.file-search-control {
    position: relative;
    display: block;
}

.file-search-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 18px;
    height: 18px;
    background: #62594f;
    transform: translateY(-50%);
    -webkit-mask: url('/static/images/ui-icons/search.svg') center / contain no-repeat;
    mask: url('/static/images/ui-icons/search.svg') center / contain no-repeat;
    pointer-events: none;
}

body.admin-fileshare-page .file-filter-row input,
body.admin-fileshare-page .file-filter-row select {
    width: 100% !important;
    height: 46px !important;
    padding: 0 44px 0 14px !important;
}

.file-select-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #4f4840;
    font-size: 0.9rem;
    font-weight: 560;
}

.file-sort-control {
    grid-template-columns: 1fr;
}

body.admin-fileshare-page .table-shell {
    overflow: auto !important;
    border: 1px solid #d9d0c4 !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.26) !important;
}

body.admin-fileshare-page .files-table {
    min-width: 850px !important;
    font-family: var(--palette-font-sans) !important;
}

body.admin-fileshare-page .files-table th {
    height: 52px !important;
    padding: 0 18px !important;
    border-bottom: 1px solid #d9d0c4 !important;
    background: rgba(221, 202, 125, 0.1) !important;
    color: #3e3933 !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.admin-fileshare-page .files-table td {
    height: 66px !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid #ded7ce !important;
    color: #17171b !important;
    font-size: 0.9rem !important;
    font-weight: 530 !important;
}

body.admin-fileshare-page .files-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

body.admin-fileshare-page .file-name.folder::before {
    display: none !important;
}

body.admin-fileshare-page .file-icon {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
    overflow: hidden !important;
    color: transparent !important;
    background: #17171b !important;
    font-size: 0 !important;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body.admin-fileshare-page .file-name.folder .file-icon { -webkit-mask-image: url('/static/images/ui-icons/files.svg'); mask-image: url('/static/images/ui-icons/files.svg'); }
body.admin-fileshare-page .file-name.file .file-icon { -webkit-mask-image: url('/static/images/ui-icons/blog.svg'); mask-image: url('/static/images/ui-icons/blog.svg'); }

body.admin-fileshare-page .file-name.folder .file-name-text::after {
    display: none !important;
}

body.admin-fileshare-page .badge {
    border-radius: 3px !important;
}

body.admin-fileshare-page .btn-compact {
    min-height: 36px !important;
    padding: 7px 13px !important;
}

.file-pagination {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #62594f;
    font-size: 0.88rem;
    font-weight: 560;
}

.file-pagination-actions,
#filePageNumbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-page-button,
.file-page-number {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #17171b;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.file-page-number.is-current {
    border-color: #a27035;
    color: #a27035;
}

.file-page-button:disabled {
    color: #aaa198;
    cursor: default;
}

body.admin-fileshare-page #filePageSize {
    width: 108px !important;
    height: 38px !important;
}

/* Reservations */
body.admin-reserve-page .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 0 28px !important;
}

body.admin-page.admin-page.admin-reserve-page .page-header {
    margin-bottom: 22px !important;
}

body.admin-reserve-page .stat-card {
    display: grid !important;
    min-height: 139px !important;
    align-content: center !important;
    gap: 18px !important;
    padding: 22px 24px !important;
    border: 1px solid #d9d0c4 !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transform: none !important;
}

body.admin-reserve-page .stat-label {
    margin: 0 !important;
    color: #4f4840 !important;
    font-size: 0.94rem !important;
    font-weight: 540 !important;
}

body.admin-reserve-page .stat-value,
body.admin-reserve-page .stat-card.pending .stat-value,
body.admin-reserve-page .stat-card.approved .stat-value,
body.admin-reserve-page .stat-card.rejected .stat-value,
body.admin-reserve-page .stat-card.total .stat-value {
    color: #17171b !important;
    font-size: 2.75rem !important;
    font-weight: 720 !important;
    line-height: 1 !important;
}

body.admin-reserve-page .tabs {
    display: flex !important;
    min-height: 64px !important;
    align-items: center !important;
    margin: 0 0 16px !important;
    padding: 0 12px !important;
    border: 1px solid #d9d0c4 !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

body.admin-reserve-page .tab-buttons {
    gap: 14px !important;
}

body.admin-reserve-page .tab-btn {
    min-height: 46px !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #29272b !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
}

body.admin-reserve-page .tab-btn.active {
    border-bottom-color: #a27035 !important;
    color: #a27035 !important;
}

body.admin-reserve-page .tab-badge {
    min-width: 25px !important;
    padding: 3px 7px !important;
    border-radius: 50% !important;
    background: #a27035 !important;
    color: #ffffff !important;
}

body.admin-reserve-page .content-card,
body.admin-reserve-page .booking-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.booking-table {
    overflow: auto;
    border: 1px solid #d9d0c4;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.28);
}

.booking-table-head,
.booking-table-row {
    display: grid;
    min-width: 1000px;
    grid-template-columns: 1.35fr 0.65fr 1fr 0.8fr 1.2fr 0.68fr 0.7fr;
    align-items: center;
}

.booking-table-head {
    min-height: 61px;
    border-bottom: 1px solid #d9d0c4;
    background: rgba(221, 202, 125, 0.1);
}

.booking-table-head span {
    padding: 0 17px;
    color: #3e3933 !important;
    font-size: 0.86rem;
    font-weight: 650;
}

.booking-table-row {
    min-height: 75px;
    border-bottom: 1px solid #ded7ce;
}

.booking-table-row > span {
    min-width: 0;
    padding: 12px 17px;
    overflow: hidden;
    color: #17171b !important;
    font-size: 0.88rem;
    font-weight: 530;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-table-row > span strong {
    font-weight: 650 !important;
}

body.admin-reserve-page .booking-status {
    display: inline-flex !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 0.78rem !important;
    font-weight: 620 !important;
}

body.admin-reserve-page .booking-actions {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

body.admin-reserve-page .booking-actions .text-action {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #17171b !important;
    font-size: 0.86rem !important;
    font-weight: 620 !important;
}

body.admin-reserve-page .booking-actions .booking-approve {
    color: #a27035 !important;
}

.booking-table-foot {
    display: flex;
    min-width: 1000px;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 16px;
    color: #62594f;
    font-size: 0.88rem;
    font-weight: 550;
}

.booking-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-pagination :where(button, strong) {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid #d9d0c4;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.45);
    color: #17171b;
    font-size: 0.9rem;
}

.booking-pagination strong {
    border-color: #a27035;
    background: #a27035;
    color: #ffffff !important;
}

/* Account */
body.admin-page.admin-page.admin-account-page .content-section {
    padding-top: calc(var(--admin-workspace-bar-height) + 74px) !important;
}

body.admin-page.admin-page.admin-account-page .workspace-header {
    margin-bottom: 22px !important;
}

body.admin-account-page .workspace-header .page-title {
    font-size: clamp(3rem, 4.4vw, 4rem) !important;
    font-weight: 760 !important;
}

body.admin-account-page .account-grid {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.86fr) minmax(520px, 1.14fr) !important;
    border: 0 !important;
    background: transparent !important;
}

body.admin-account-page .account-grid > .workspace-panel {
    min-height: 663px !important;
    padding: 30px 44px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.admin-account-page .account-grid > .workspace-panel:last-child {
    padding-right: 26px !important;
}

body.admin-account-page .account-grid > .workspace-panel:first-child {
    padding-left: 0 !important;
    border-right: 1px solid #cfc4b5 !important;
}

body.admin-account-page .workspace-index {
    color: #a27035 !important;
    font-size: 0.9rem !important;
    font-weight: 750 !important;
}

body.admin-account-page .account-label {
    margin: 34px 0 12px !important;
    color: #4f4840 !important;
    font-size: 1rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.admin-account-page .account-profile h2 {
    margin: 0 0 20px !important;
    font-size: clamp(3.2rem, 5vw, 4.15rem) !important;
    font-weight: 760 !important;
}

body.admin-account-page .account-profile > p:not(.account-label) {
    max-width: 38ch !important;
    margin: 0 0 50px !important;
    color: #3f3a34 !important;
    font-size: 0.94rem !important;
    font-weight: 530 !important;
}

body.admin-account-page .account-profile .btn {
    min-height: 52px !important;
    margin-top: auto !important;
    border-color: #a27035 !important;
    background: transparent !important;
    color: #a27035 !important;
}

body.admin-account-page .workspace-panel-head {
    min-height: 0 !important;
    margin: 0 0 35px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.admin-account-page .workspace-panel-head > div {
    width: 100% !important;
}

body.admin-account-page .workspace-panel-head h2 {
    margin: 12px 0 0 !important;
    padding: 14px 0 !important;
    background: rgba(221, 202, 125, 0.12) !important;
    font-size: 1.9rem !important;
    font-weight: 740 !important;
}

body.admin-account-page .account-password form {
    max-width: none !important;
}

body.admin-account-page .form-group {
    margin-bottom: 26px !important;
}

body.admin-account-page .form-group label {
    display: block !important;
    margin-bottom: 10px !important;
    color: #17171b !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
}

body.admin-account-page .form-group input {
    width: 100% !important;
    height: 61px !important;
}

body.admin-account-page .field-help {
    display: block !important;
    margin-top: 8px !important;
    color: #62594f !important;
    font-size: 0.8rem !important;
    font-weight: 520 !important;
}

body.admin-account-page .form-actions {
    justify-content: flex-end !important;
    gap: 20px !important;
    margin-top: 34px !important;
}

/* Detached admin pages and editor: guarantee no legacy dark islands. */
body.admin-page.admin-page:not(.admin-login-page) :where(
    .filter-tabs,
    .tabs,
    .toolbar,
    .workspace-panel-head,
    .modal-header,
    .collapsible-header,
    .collapsible-content,
    .date-picker-section,
    .day-slot-card,
    .upload-field,
    .projects-list,
    .room-booking-item,
    .friend-card,
    .link-card
) {
    border-color: #d9d0c4 !important;
    background-color: rgba(255, 255, 255, 0.28) !important;
    background-image: none !important;
    color: #17171b !important;
    box-shadow: none !important;
}

body.admin-page.admin-page.editor-page .editor-wrapper {
    padding: calc(var(--admin-workspace-bar-height) + 18px) 20px 24px !important;
}

body.admin-page.admin-page.editor-page :where(.action-bar, .main-layout, .left-panel, .middle-panel, .right-panel, .panel-header, .editor-statusbar) {
    border-color: #d9d0c4 !important;
    border-radius: 4px !important;
    background-color: rgba(255, 255, 255, 0.42) !important;
    background-image: none !important;
    color: #17171b !important;
}

/* Blog correction v13 — tighter editorial rows and the same warm paper as the reference. */
body.blog-index-page.blog-index-page {
    background-color: #faf8f3 !important;
    background-image: var(--palette-paper-image) !important;
    background-repeat: repeat !important;
    background-size: 1254px 1254px !important;
}

body.blog-index-page.blog-index-page .content-section {
    min-height: calc(100dvh - 112px) !important;
    padding: calc(96px + var(--site-safe-top)) clamp(30px, 4.3vw, 66px) 34px !important;
}

body.blog-index-page .container {
    max-width: 1404px !important;
}

body.blog-index-page .blog-title {
    font-size: clamp(2.45rem, 3.35vw, 3.05rem) !important;
    font-weight: 800 !important;
}

body.blog-index-page .blog-intro {
    margin-top: 10px !important;
    color: #403a34 !important;
    font-size: 0.86rem !important;
    font-weight: 540 !important;
}

body.blog-index-page .blog-search {
    width: min(483px, 100%) !important;
    margin-top: 22px !important;
}

body.blog-index-page .blog-search input {
    height: 43px !important;
    background: rgba(255, 255, 255, 0.38) !important;
}

body.blog-index-page .blog-filter-row {
    margin-top: 20px !important;
}

body.blog-index-page .category-nav {
    gap: clamp(14px, 2.2vw, 31px) !important;
}

body.blog-index-page .year-section {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 18px !important;
}

body.blog-index-page .post-link {
    grid-template-columns: 88px minmax(280px, 1fr) 118px 128px 70px !important;
    min-height: 57px !important;
    padding: 7px 10px !important;
}

body.blog-index-page .post-title {
    font-size: 0.93rem !important;
    font-weight: 720 !important;
}

body.blog-index-page .post-summary {
    margin-top: 2px !important;
    font-size: 0.74rem !important;
}

.blog-reference-footer {
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 24px clamp(30px, 2.35vw, 36px);
    border: 0;
    background-color: #242331;
    background-image:
        radial-gradient(circle at 14% 15%, rgba(221, 202, 125, 0.055), transparent 30%),
        radial-gradient(circle at 78% 80%, rgba(255, 255, 255, 0.025), transparent 34%);
    color: #ffffff;
}

.blog-footer-copy {
    display: grid;
    gap: 9px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 530;
}

.blog-footer-copy strong {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.82rem;
    font-weight: 540 !important;
}

.blog-footer-nav {
    display: flex;
    align-items: center;
    gap: clamp(28px, 4vw, 52px);
}

.blog-footer-nav a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.92rem;
    font-weight: 620;
    text-decoration: none;
}

.blog-footer-nav a:hover,
.blog-footer-nav a.is-current {
    color: #d28a1d !important;
}

@media (max-width: 1120px) {
    body.admin-panel-page .dashboard-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.admin-panel-page .dashboard-metric:nth-child(3) {
        border-right: 0 !important;
    }

    body.admin-panel-page .dashboard-metric:nth-child(-n + 3) {
        border-bottom: 1px solid #d9d0c4 !important;
    }

    body.admin-panel-page .dashboard-metric:last-child {
        border-right: 1px solid #d9d0c4 !important;
    }

    .file-filter-row {
        grid-template-columns: minmax(250px, 1.2fr) repeat(3, minmax(150px, 0.7fr));
        gap: 14px;
        justify-content: stretch;
    }
}

@media (max-width: 900px) {
    body.admin-page.admin-page:not(.admin-login-page) {
        --admin-sidebar-width: min(82vw, 300px);
        --admin-workspace-bar-height: 68px;
    }

    body.admin-page.admin-page:not(.admin-login-page) .admin-topbar {
        width: var(--admin-sidebar-width) !important;
        min-width: 0 !important;
        padding: 18px 16px !important;
        transform: translateX(-102%) !important;
        transition: transform 220ms ease !important;
    }

    body.admin-page.admin-page:not(.admin-login-page) .admin-brand {
        order: 0 !important;
    }

    body.admin-page.admin-page:not(.admin-login-page) .admin-nav {
        order: 1 !important;
    }

    body.admin-page.admin-page:not(.admin-login-page) .admin-view-site {
        order: 2 !important;
    }

    body.admin-page.admin-page.admin-rail-open .admin-topbar {
        transform: translateX(0) !important;
    }

    .admin-workspace-bar {
        left: 0 !important;
        gap: 14px !important;
        padding: 0 18px !important;
    }

    .admin-workspace-title {
        font-size: 1.24rem !important;
    }

    .admin-workspace-profile {
        grid-template-columns: 38px;
        gap: 0;
    }

    .admin-workspace-avatar {
        width: 38px;
        height: 38px;
    }

    .admin-workspace-person,
    .admin-profile-chevron {
        display: none;
    }

    .admin-rail-scrim {
        position: fixed;
        inset: 0;
        z-index: 1250;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(36, 35, 49, 0.46);
        opacity: 0;
        visibility: hidden;
        transition: opacity 220ms ease, visibility 220ms ease;
    }

    body.admin-rail-open .admin-rail-scrim {
        opacity: 1;
        visibility: visible;
    }

    body.admin-page.admin-page:not(.admin-login-page) .content-section,
    body.admin-page.admin-page:not(.admin-login-page).editor-page .editor-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        padding: calc(var(--admin-workspace-bar-height) + 28px) 18px 48px !important;
    }

    body.admin-panel-page .dashboard-prototype-welcome {
        gap: 20px !important;
    }

    body.admin-panel-page .dashboard-prototype-welcome time {
        min-width: 0 !important;
    }

    body.admin-panel-page .dashboard-prototype-grid {
        grid-template-columns: 1fr !important;
    }

    body.admin-panel-page :where(.dashboard-recent, .dashboard-quick) {
        min-height: 0 !important;
    }

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

    body.admin-reserve-page .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-account-page .account-grid {
        grid-template-columns: 1fr !important;
    }

    body.admin-account-page .account-grid > .workspace-panel {
        min-height: 0 !important;
        padding: 34px 0 !important;
    }

    body.admin-account-page .account-grid > .workspace-panel:first-child {
        border-right: 0 !important;
        border-bottom: 1px solid #cfc4b5 !important;
    }
}

@media (max-width: 640px) {
    body.admin-page.admin-page:not(.admin-login-page) .admin-nav a,
    body.admin-page.admin-page:not(.admin-login-page) .admin-view-site {
        min-height: 48px !important;
    }

    body.admin-page.admin-page:not(.admin-login-page) :where(.page-title, .workspace-header .page-title) {
        font-size: 2.2rem !important;
    }

    body.admin-panel-page .dashboard-prototype-welcome {
        min-height: 0 !important;
        padding-top: 0 !important;
    }

    body.admin-panel-page .dashboard-prototype-welcome h2 {
        font-size: 2.25rem !important;
    }

    body.admin-panel-page .dashboard-metric-grid,
    body.admin-reserve-page .stats-grid,
    .file-filter-row {
        grid-template-columns: 1fr !important;
    }

    body.admin-panel-page .dashboard-metric,
    body.admin-panel-page .dashboard-metric:nth-child(n) {
        min-height: 126px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #d9d0c4 !important;
    }

    body.admin-panel-page .dashboard-metric:last-child {
        border-bottom: 0 !important;
    }

    body.admin-panel-page .dashboard-quick-grid {
        grid-template-columns: 1fr !important;
    }

    body.admin-panel-page .dashboard-quick-grid a:nth-child(n) {
        min-height: 92px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #d9d0c4 !important;
    }

    body.admin-fileshare-page .file-breadcrumb-row,
    .file-pagination {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body.admin-fileshare-page .actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .file-pagination-actions {
        overflow-x: auto;
    }

    body.admin-reserve-page .tabs {
        overflow-x: auto !important;
    }

    body.admin-reserve-page .tab-buttons {
        width: max-content !important;
        flex-wrap: nowrap !important;
    }

    body.admin-page.admin-page.admin-account-page .content-section {
        padding-top: calc(var(--admin-workspace-bar-height) + 36px) !important;
    }

    body.admin-account-page .workspace-header .page-title,
    body.admin-account-page .account-profile h2 {
        font-size: 2.75rem !important;
    }

    body.admin-account-page .account-grid > .workspace-panel {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.blog-index-page .post-link {
        min-height: 86px !important;
    }

    .blog-reference-footer {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 20px;
    }

    .blog-footer-nav {
        width: 100%;
        gap: 18px 24px;
        flex-wrap: wrap;
    }
}