/* Lab UI System v6 (2026-05-04)
   Consolidated theme layer to reduce override complexity and keep responsive UI consistent. */
:root,
:root[data-theme='dark'] {
    --lab-bg: #040c13;
    --lab-bg-soft: #0a1824;
    --lab-surface: #0f2030;
    --lab-surface-2: #112737;
    --lab-ink: #eaf8ff;
    --lab-muted: #a5bfd1;
    --lab-border: #6fd0ff42;
    --lab-glow: #34d6ff;
    --lab-glow-2: #6fa3ff;
    --lab-panel-shadow: 0 18px 38px #01091173;
}

:root[data-theme='light'] {
    --lab-bg: #e9f6fd;
    --lab-bg-soft: #d8ecf7;
    --lab-surface: #f6fcff;
    --lab-surface-2: #eaf5fb;
    --lab-ink: #0e2330;
    --lab-muted: #5e778b;
    --lab-border: #9dcbe347;
    --lab-glow: #19bff0;
    --lab-glow-2: #4f8cf0;
    --lab-panel-shadow: 0 16px 34px #06314c21;
}

body.page-home,
body.page-gallery,
body.page-detail,
body.page-inquiry,
body.page-legal {
    background:
        radial-gradient(1200px 500px at -6% -8%, color-mix(in oklab, var(--lab-glow), transparent 84%) 0%, transparent 50%),
        radial-gradient(900px 430px at 104% -2%, color-mix(in oklab, var(--lab-glow-2), transparent 84%) 0%, transparent 56%),
        linear-gradient(180deg, var(--lab-bg) 0%, var(--lab-bg-soft) 48%, var(--lab-bg) 100%);
    color: var(--lab-ink);
}

body.page-home::before,
body.page-gallery::before,
body.page-detail::before,
body.page-inquiry::before,
body.page-legal::before {
    opacity: 0.6;
    background:
        linear-gradient(to right, color-mix(in oklab, var(--lab-glow), transparent 92%) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in oklab, var(--lab-glow), transparent 94%) 1px, transparent 1px),
        linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--lab-glow), transparent 95%) 72%, transparent 100%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
}

.site-header,
.site-footer {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--lab-border);
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--lab-surface), transparent 5%), color-mix(in oklab, var(--lab-surface-2), transparent 5%)),
        radial-gradient(circle at 12% 0%, color-mix(in oklab, var(--lab-glow), transparent 88%) 0%, transparent 36%);
}

.site-header::before,
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, color-mix(in oklab, var(--lab-glow), transparent 72%), transparent) top/100% 1px no-repeat,
        linear-gradient(90deg, transparent, color-mix(in oklab, var(--lab-glow), transparent 84%), transparent) bottom/100% 1px no-repeat;
}

.brand-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
    padding: 5px;
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--lab-glow), transparent 60%);
    box-shadow:
        0 0 0 3px color-mix(in oklab, var(--lab-glow), transparent 90%),
        0 10px 24px #00000058;
    background: color-mix(in oklab, var(--lab-surface), black 8%);
}

.brand-copy strong {
    color: #eef9ff;
    text-shadow: 0 0 10px color-mix(in oklab, var(--lab-glow), transparent 74%);
}

.brand-copy small {
    color: #9dddf4;
    letter-spacing: 0.14em;
}

.hero,
.panel,
.controls,
.category-rail,
.card,
.control-card,
.hero-stage,
.hero-stage-card,
.premium-strip-item,
.detail-meta-card,
.cookie-banner {
    border: 1px solid var(--lab-border);
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--lab-surface), transparent 4%), color-mix(in oklab, var(--lab-surface-2), transparent 6%)),
        radial-gradient(circle at 8% -12%, color-mix(in oklab, var(--lab-glow), transparent 92%) 0%, transparent 44%);
    box-shadow:
        inset 0 0 0 1px #ffffff05,
        var(--lab-panel-shadow);
}

.hero,
.panel,
.controls,
.category-rail,
.card,
.control-card {
    position: relative;
}

.hero::before,
.panel::before,
.controls::before,
.category-rail::before,
.card::before,
.control-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--lab-glow), transparent 72%), transparent 24%) top left/44% 1px no-repeat,
        linear-gradient(180deg, color-mix(in oklab, var(--lab-glow), transparent 78%), transparent 24%) top left/1px 44% no-repeat,
        linear-gradient(270deg, color-mix(in oklab, var(--lab-glow), transparent 72%), transparent 24%) top right/44% 1px no-repeat,
        linear-gradient(0deg, color-mix(in oklab, var(--lab-glow), transparent 78%), transparent 24%) top right/1px 44% no-repeat,
        linear-gradient(90deg, color-mix(in oklab, var(--lab-glow), transparent 72%), transparent 24%) bottom left/44% 1px no-repeat,
        linear-gradient(180deg, color-mix(in oklab, var(--lab-glow), transparent 78%), transparent 24%) bottom left/1px 44% no-repeat,
        linear-gradient(270deg, color-mix(in oklab, var(--lab-glow), transparent 72%), transparent 24%) bottom right/44% 1px no-repeat,
        linear-gradient(0deg, color-mix(in oklab, var(--lab-glow), transparent 78%), transparent 24%) bottom right/1px 44% no-repeat;
}

.hero-eyebrow,
.section-kicker,
.control-step,
.category-rail-copy {
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.14em;
    color: #8fe0fb;
}

.hero h1,
.gallery-group-title,
.category-rail h2 {
    color: #eff9ff;
    text-shadow: 0 0 20px color-mix(in oklab, var(--lab-glow-2), transparent 82%);
}

.hero-lead,
.hero p,
.muted,
.gallery-meta,
.gallery-status,
.category-rail-copy {
    color: var(--lab-muted);
}

body.page-gallery .controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: stretch;
    padding: 0.95rem;
}

body.page-gallery .controls > .control-card {
    min-width: 0;
    width: 100%;
    padding: 0.92rem;
    border-radius: 18px;
    display: grid;
    gap: 0.58rem;
    align-content: start;
}

body.page-gallery .control-card::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 10px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--lab-glow), transparent 68%), transparent);
}

body.page-gallery .control-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

body.page-gallery .control-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #66ddff;
    box-shadow: 0 0 10px #66ddff8a;
    animation: labSignalPulse 1.9s ease-in-out infinite;
}

body.page-gallery .controls .control-card:nth-of-type(1) .control-title::after,
body.page-gallery .controls .control-card:nth-of-type(2) .control-title::after,
body.page-gallery .controls .control-card:nth-of-type(3) .control-title::after,
body.page-gallery .controls .control-card:nth-of-type(4) .control-title::after {
    margin-left: auto;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.61rem;
    letter-spacing: 0.14em;
    color: #9adfff;
    opacity: 0.86;
}

body.page-gallery .controls .control-card:nth-of-type(1) .control-title::after { content: "M-01"; }
body.page-gallery .controls .control-card:nth-of-type(2) .control-title::after { content: "M-02"; }
body.page-gallery .controls .control-card:nth-of-type(3) .control-title::after { content: "M-03"; }
body.page-gallery .controls .control-card:nth-of-type(4) .control-title::after { content: "M-04"; }

body.page-gallery .shirt-menu-summary,
body.page-gallery .group-toggle,
body.page-gallery .auto-toggle,
body.page-gallery .search-toggle,
body.page-gallery select,
body.page-gallery input,
body.page-gallery textarea,
body.page-gallery button,
.top-nav a,
.theme-toggle,
.site-nav-toggle,
.category-rail-btn,
.share-link,
.share-btn {
    border-color: color-mix(in oklab, var(--lab-glow), transparent 68%);
    background: linear-gradient(180deg, #12283a, #102133);
    color: #ebf8ff;
}

.hero-cta-primary,
button[type='submit'],
.share-btn,
.gallery-load-more {
    border-color: color-mix(in oklab, var(--lab-glow), transparent 34%);
    background: linear-gradient(135deg, #38d9ff, #6a9fff);
    color: #03111c;
    box-shadow: 0 10px 24px #31d4ff56;
}

.hero-cta-primary:hover,
button[type='submit']:hover,
.share-btn:hover,
.gallery-load-more:hover {
    box-shadow: 0 14px 30px #31d4ff78;
    transform: translateY(-1px);
}

.category-rail-btn:hover,
.top-nav a:hover,
.theme-toggle:hover,
.site-nav-toggle:hover,
.share-link:hover {
    border-color: color-mix(in oklab, var(--lab-glow), transparent 44%);
    background: linear-gradient(180deg, #18344c, #143049);
}

.category-rail-btn.is-active,
.admin-nav-btn.is-active {
    border-color: #b4ecff;
    background: linear-gradient(135deg, #45daff, #79a7ff);
    color: #04131f;
    box-shadow: 0 10px 24px #3dd6ff5e;
}

body.page-gallery .category-rail {
    position: sticky;
    top: 104px;
    padding: 1rem;
}

body.page-gallery .category-rail::after {
    content: "SCAN READY";
    position: absolute;
    top: 9px;
    right: 12px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: #9de7ff;
    opacity: 0.8;
    pointer-events: none;
}

body.page-gallery .controls::after {
    content: "LAB CONSOLE";
    position: absolute;
    top: 8px;
    right: 12px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    color: #9de7ff;
    opacity: 0.88;
    pointer-events: none;
}

@keyframes labHudSweep {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(130%); }
}

@keyframes labSignalPulse {
    0%,
    100% { opacity: 0.38; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1); }
}

body.page-gallery .gallery-group-title {
    position: relative;
    overflow: hidden;
    padding-right: 2.6rem;
}

body.page-gallery .gallery-group-title::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28%;
    left: -34%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #7ae1ff40, transparent);
    animation: labHudSweep 4.8s linear infinite;
}

/* Search field consistency + wider icon on desktop */
body.page-gallery #designSearchWrap.search-inline {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0.55rem;
    align-items: stretch;
    width: 100%;
}

body.page-gallery .search-toggle {
    min-width: 76px;
    width: 76px;
    min-height: 48px;
    border-radius: 14px;
    font-size: 1.2rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.page-gallery .search-inline.is-static .search-toggle {
    display: inline-flex;
}

body.page-gallery #designSearchInput {
    width: 100%;
    min-width: 220px;
    opacity: 1;
    pointer-events: auto;
    padding-inline: 0.85rem;
}

@media (min-width: 1080px) {
    body.page-gallery .controls {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    body.page-gallery .controls > .search-field {
        grid-column: span 2;
    }
}

@media (max-width: 1100px) {
    body.page-gallery .controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 930px) {
    .site-header,
    .site-footer,
    .hero,
    .panel,
    .controls,
    .category-rail,
    .card,
    .control-card {
        border-radius: 18px;
    }

    .brand-logo {
        width: 52px;
        height: 52px;
        padding: 4px;
    }

    body.page-gallery .controls {
        grid-template-columns: 1fr;
        padding: 0.85rem;
        gap: 0.7rem;
    }

    body.page-gallery .controls::after,
    body.page-gallery .category-rail::after,
    body.page-gallery .controls .control-card .control-title::after {
        display: none;
    }

    body.page-gallery #designSearchWrap.search-inline {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    body.page-gallery .search-toggle {
        min-width: 56px;
        width: 56px;
    }

    body.page-gallery #designSearchInput {
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .brand-logo {
        width: 46px;
        height: 46px;
        padding: 3px;
        border-radius: 14px;
    }

    body.page-gallery .search-toggle {
        min-height: 46px;
        font-size: 1.05rem;
    }
}

/* Page transition loader (Reagenzglas) */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 18% 10%, #2edaff26 0%, transparent 28%),
        radial-gradient(circle at 82% 14%, #6ea9ff1f 0%, transparent 24%),
        linear-gradient(180deg, #07121ce8, #050d15f2);
    backdrop-filter: blur(4px) saturate(120%);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.42s ease, visibility 0.42s ease;
    pointer-events: auto;
}

.page-transition.is-ready {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-transition-content {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
}

.page-transition-label {
    margin: 0;
    color: #b8def4;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: "IBM Plex Mono", monospace;
}

.lab-testtube {
    position: relative;
    width: 92px;
    height: 168px;
}

.tube-glass {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 56px;
    height: 146px;
    transform: translateX(-50%);
    border-radius: 20px 20px 22px 22px;
    border: 3px solid #91dcff99;
    background: linear-gradient(180deg, #d7f4ff1f 0%, #6bc9f10f 38%, #2f89b80d 100%);
    box-shadow:
        inset 0 0 0 1px #ffffff38,
        inset -12px 0 14px #ffffff14,
        0 14px 24px #02131f96;
}

.tube-glass::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    width: 40px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 10px;
    border: 3px solid #91dcff8c;
    background: #0d1f2d;
    box-shadow: inset 0 0 0 1px #ffffff24;
}

.tube-liquid {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 42px;
    height: 56px;
    transform: translateX(-50%) scaleY(0.08);
    transform-origin: 50% 100%;
    border-radius: 0 0 14px 14px;
    background:
        radial-gradient(circle at 20% 18%, #d8f8ff63 0%, transparent 36%),
        linear-gradient(180deg, #1dd3ffdf 0%, #1289d5d8 56%, #0f4f8ccb 100%);
    box-shadow:
        0 0 14px #28c6ff66,
        inset 0 8px 10px #ffffff36;
}

.page-transition.is-filling .tube-liquid {
    animation: tubeLiquidFill 1.15s cubic-bezier(0.22, 0.76, 0.22, 1) forwards;
}

.tube-bubble {
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #f5fdff, #65d4ff 68%, #2fa8d4 100%);
    box-shadow: 0 0 10px #66d4ff8f;
    opacity: 0;
}

.page-transition.is-filling .tube-bubble-1 { animation: tubeBubbleRise 1.5s linear infinite; }
.page-transition.is-filling .tube-bubble-2 { animation: tubeBubbleRise 1.2s linear 0.25s infinite; }
.page-transition.is-filling .tube-bubble-3 { animation: tubeBubbleRise 1.8s linear 0.5s infinite; }
.page-transition.is-filling .tube-bubble-4 { animation: tubeBubbleRise 1.35s linear 0.68s infinite; }
.page-transition.is-filling .tube-bubble-5 { animation: tubeBubbleRise 1.65s linear 0.9s infinite; }

.tube-bubble-1 { margin-left: -12px; }
.tube-bubble-2 { margin-left: 6px; width: 7px; height: 7px; }
.tube-bubble-3 { margin-left: -2px; width: 8px; height: 8px; }
.tube-bubble-4 { margin-left: 11px; width: 6px; height: 6px; }
.tube-bubble-5 { margin-left: -16px; width: 6px; height: 6px; }

@keyframes tubeLiquidFill {
    0% { transform: translateX(-50%) scaleY(0.08); }
    68% { transform: translateX(-50%) scaleY(0.86); }
    100% { transform: translateX(-50%) scaleY(1); }
}

@keyframes tubeBubbleRise {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    15% { opacity: 0.92; }
    100% { transform: translate(-50%, -94px) scale(1.08); opacity: 0; }
}


/* Color harmony refinement v7 (2026-05-04)
   Goal: clean blue system + controlled beige premium accents. */
:root,
:root[data-theme='dark'] {
    --lab-warm: #cbb581;
    --accent: #79ddff;
    --accent-2: #5f9eff;
}

:root[data-theme='light'] {
    --lab-warm: #a7853f;
    --accent: #14bceb;
    --accent-2: #3f82ea;
}

/* Keep interactive hierarchy blue */
.hero-eyebrow,
body.page-gallery .control-title,
body.page-gallery .category-rail-copy {
    color: #94e9ff;
}

/* Use warm accent only for premium meta labels */
.section-kicker,
.hero-stage-card p,
.premium-strip-item span,
.detail-meta-card span,
.legal-copy h2 {
    color: var(--lab-warm);
    text-shadow: 0 0 8px color-mix(in oklab, var(--lab-warm), transparent 82%);
}

/* Remove remaining green-ish panels */
body.page-home .hero-proof {
    border: 1px solid color-mix(in oklab, var(--lab-glow), transparent 62%);
    background:
        linear-gradient(90deg,
            color-mix(in oklab, var(--lab-glow), transparent 90%),
            color-mix(in oklab, var(--lab-glow-2), transparent 92%));
    color: #c4d9e8;
}

body.page-home .premium-strip-item,
body.page-home .hero-stage-card,
body.page-detail .hero-stage-card,
body.page-gallery .gallery-group-title,
body.page-detail .detail-meta-card {
    border-color: var(--lab-border);
    background: linear-gradient(180deg, #11283a, #0f2233);
}

body.page-gallery .gallery-group-title {
    color: #eaf7ff;
}

/* Keep links/buttons crisp against dark blue */
.share-link,
.top-nav a,
.theme-toggle,
.site-nav-toggle {
    color: #e8f6ff;
}

@media (max-width: 930px) {
    body.page-home .hero-proof {
        padding: 0.72rem 0.82rem;
        border-radius: 16px;
    }
}