:root {
    --bg: #eef3f7;
    --bg-strong: #dde7ee;
    --panel: rgba(255, 255, 255, 0.92);
    --panel-strong: #ffffff;
    --line: rgba(34, 64, 89, 0.12);
    --line-strong: rgba(34, 64, 89, 0.2);
    --text: #152433;
    --muted: #66798b;
    --muted-strong: #4d6274;
    --accent: #0d5e63;
    --accent-soft: #d8f0ee;
    --accent-2: #1d7a8c;
    --success: #1d8c66;
    --warning: #a86a11;
    --danger: #b24d4d;
    --shadow: 0 22px 50px rgba(30, 60, 84, 0.08);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --display-font: "Source Han Serif SC", "Noto Serif SC", "Songti SC", Georgia, serif;
    --body-font: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--body-font);
    background:
        radial-gradient(circle at top left, rgba(13, 94, 99, 0.09), transparent 26%),
        radial-gradient(circle at top right, rgba(29, 122, 140, 0.08), transparent 22%),
        linear-gradient(180deg, #edf3f6 0%, #e7eef3 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(13, 94, 99, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 94, 99, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 94%);
}

.app-shell {
    width: min(1480px, calc(100vw - 28px));
    margin: 16px auto 30px;
    display: grid;
    gap: 18px;
}

.hero-panel,
.topbar-panel,
.view-nav,
.content-panel,
.login-card,
.login-side-panel {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.hero-panel::before,
.topbar-panel::before,
.content-panel::before,
.login-card::before,
.login-side-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent 38%);
}

.hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 18px;
    padding: 30px;
}

.hero-copy h1,
.section-heading h2,
.panel-head h3,
.login-card h1 {
    font-family: var(--display-font);
}

.eyebrow,
.section-kicker {
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
}

.eyebrow::before,
.section-kicker::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 7px rgba(13, 94, 99, 0.08);
}

.hero-copy h1,
.login-card h1 {
    margin: 0 0 14px;
    font-size: clamp(2.2rem, 4.2vw, 4.1rem);
    line-height: 0.95;
}

.hero-text,
.section-heading p,
.panel-head span,
.login-copy,
.log-detail,
.freezer-remark,
.alert-card p,
.summary-hint,
.status-card p,
.info-card p,
.empty-state,
.cell-subtext,
.log-meta,
.validation-subline,
.prefreeze-subline,
.freezer-subline,
.path-banner,
.hero-stat span,
.account-copy span,
label span {
    color: var(--muted);
}

.hero-text,
.login-copy,
.alert-card p,
.log-detail,
.status-card p,
.info-card p {
    line-height: 1.78;
}

.hero-tags,
.freezer-tags,
.button-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-tags {
    margin-top: 18px;
}

.hero-tag,
.note-chip,
.role-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--line);
    background: rgba(13, 94, 99, 0.06);
}

.hero-aside {
    display: grid;
    gap: 14px;
    align-content: start;
}

.hero-stat {
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(246, 251, 252, 0.96), rgba(232, 242, 245, 0.92));
}

.hero-stat strong {
    display: block;
    margin-top: 10px;
    font-size: 1.35rem;
    color: var(--text);
}

.topbar-panel {
    display: grid;
    grid-template-columns: auto minmax(320px, auto);
    gap: 16px;
    padding: 18px;
    align-items: start;
}

.topbar-actions,
.account-card {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account-card {
    justify-content: flex-end;
}

.account-card {
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: rgba(13, 94, 99, 0.05);
    border: 1px solid rgba(13, 94, 99, 0.12);
}

.account-copy {
    display: grid;
    gap: 4px;
}

.account-copy strong {
    color: var(--text);
}

.role-pill {
    color: var(--accent);
    font-weight: 700;
}

.path-banner {
    grid-column: 1 / -1;
    padding-top: 2px;
    font-size: 13px;
    word-break: break-word;
}

.divider {
    margin: 0 10px;
    color: var(--muted);
}

.soft-button,
.primary-button,
.mini-button,
.nav-chip {
    appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.soft-button,
.mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 15px;
    border-radius: 999px;
    border: 1px solid rgba(13, 94, 99, 0.14);
    background: rgba(13, 94, 99, 0.06);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}

.primary-button {
    width: fit-content;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(13, 94, 99, 0.18);
    font-weight: 700;
}

.danger-button,
.mini-button.danger,
.warn-button {
    color: var(--danger);
    border-color: rgba(178, 77, 77, 0.16);
    background: rgba(178, 77, 77, 0.06);
}

.warn-button {
    color: var(--warning);
    border-color: rgba(168, 106, 17, 0.16);
    background: rgba(168, 106, 17, 0.08);
}

.soft-button:hover,
.primary-button:hover,
.mini-button:hover,
.nav-chip:hover {
    transform: translateY(-1px);
}

.view-nav {
    padding: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-chip {
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(13, 94, 99, 0.04);
    color: var(--muted-strong);
    font-weight: 700;
}

.nav-chip.active {
    background: linear-gradient(135deg, rgba(13, 94, 99, 0.16), rgba(29, 122, 140, 0.12));
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(13, 94, 99, 0.14);
}

.view-stack,
.view-section,
.summary-grid,
.overview-grid,
.dual-grid,
.triple-grid,
.single-grid,
.field-grid,
.freezer-grid,
.alert-list,
.log-list,
.prefreeze-grid,
.validation-list,
.data-status-list,
.count-list,
.user-list,
.info-stack {
    display: grid;
    gap: 18px;
}

.view-section {
    display: none;
}

.view-section.active {
    display: grid;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(1.8rem, 2.6vw, 2.7rem);
}

.section-heading p {
    max-width: 520px;
    margin: 0;
    line-height: 1.7;
}

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

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

.triple-grid {
    grid-template-columns: 1.05fr 0.8fr 1fr;
}

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

.summary-card,
.alert-card,
.log-card,
.status-card,
.count-card,
.freezer-card,
.prefreeze-card,
.validation-card,
.user-row,
.info-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.86);
}

.summary-card {
    padding: 18px;
    display: grid;
    gap: 10px;
    min-height: 128px;
}

.summary-label {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.summary-value {
    font-family: var(--display-font);
    font-size: 2rem;
    line-height: 1;
}

.inventory-schematic,
.schematic-summary,
.schematic-grid,
.schematic-meta {
    display: grid;
    gap: 16px;
}

.schematic-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.schematic-metric,
.schematic-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.86);
}

.schematic-metric {
    padding: 16px 18px;
    display: grid;
    gap: 8px;
}

.schematic-metric span,
.schematic-card-head span,
.schematic-scale,
.schematic-meta span,
.schematic-legend span,
.schematic-metric small {
    color: var(--muted);
}

.schematic-metric strong,
.schematic-card-head strong {
    color: var(--text);
}

.schematic-metric strong {
    font-family: var(--display-font);
    font-size: 1.8rem;
    line-height: 1;
}

.schematic-metric.emphasis {
    background: linear-gradient(135deg, rgba(216, 240, 238, 0.9), rgba(255, 255, 255, 0.92));
    border-color: rgba(13, 94, 99, 0.14);
}

.schematic-metric.muted {
    background: linear-gradient(135deg, rgba(245, 248, 250, 0.92), rgba(255, 255, 255, 0.9));
}

.schematic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    font-size: 13px;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 999px;
    vertical-align: -1px;
}

.legend-swatch.used {
    background: linear-gradient(135deg, #0d5e63, #1d7a8c);
}

.legend-swatch.remaining {
    background: linear-gradient(135deg, #d7ebe3, #b9ddd2);
}

.legend-swatch.blocked {
    background: #c7d2db;
}

.schematic-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.schematic-card {
    padding: 16px 18px;
    display: grid;
    gap: 14px;
}

.schematic-card.limited {
    background: linear-gradient(135deg, rgba(245, 248, 250, 0.95), rgba(255, 255, 255, 0.88));
}

.schematic-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.schematic-card-head strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 6px;
}

.schematic-bar {
    min-height: 18px;
    display: flex;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(216, 232, 239, 0.78);
    box-shadow: inset 0 0 0 1px rgba(13, 94, 99, 0.08);
}

.schematic-used,
.schematic-remaining {
    display: block;
    min-width: 0;
}

.schematic-used {
    background: linear-gradient(135deg, #0d5e63, #1d7a8c);
}

.schematic-remaining {
    background: linear-gradient(135deg, #d7ebe3, #b9ddd2);
}

.schematic-card.limited .schematic-bar {
    background: rgba(224, 229, 234, 0.92);
}

.schematic-card.limited .schematic-used {
    background: linear-gradient(135deg, #6f808f, #93a3b0);
}

.schematic-card.limited .schematic-remaining {
    background: linear-gradient(135deg, #dde4ea, #c7d2db);
}

.schematic-scale {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.schematic-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schematic-meta span {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(13, 94, 99, 0.05);
    border: 1px solid rgba(13, 94, 99, 0.08);
    font-size: 12px;
    line-height: 1.5;
}

.schematic-card.limited .schematic-meta span {
    background: rgba(118, 134, 150, 0.06);
    border-color: rgba(118, 134, 150, 0.1);
}

.inventory-clarity-board,
.inventory-clarity-summary,
.inventory-clarity-zones,
.inventory-zone-grid,
.inventory-overview-metrics,
.inventory-overview-current,
.inventory-layer-stack,
.inventory-layer-content,
.inventory-clarity-pills,
.inventory-clarity-legend,
.inventory-clarity-risk {
    display: grid;
    gap: 14px;
}

.inventory-clarity-board {
    gap: 18px;
}

.inventory-clarity-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
}

.inventory-clarity-kicker {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.inventory-clarity-hero h4,
.inventory-zone-head h4 {
    margin: 0;
    font-size: 1.45rem;
}

.inventory-clarity-hero p,
.inventory-zone-head p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.inventory-clarity-pills {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: end;
    gap: 10px;
}

.inventory-clarity-pills span {
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(13, 94, 99, 0.12);
    background: rgba(13, 94, 99, 0.05);
    font-size: 12px;
    color: var(--muted);
}

.inventory-clarity-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-clarity-metric {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(236, 247, 247, 0.74), rgba(255, 255, 255, 0.94));
    display: grid;
    gap: 8px;
}

.inventory-clarity-metric span,
.inventory-clarity-metric small,
.inventory-overview-current span,
.inventory-zone-stat span,
.inventory-layer-note,
.inventory-empty-chip {
    color: var(--muted);
}

.inventory-clarity-metric strong {
    font-family: var(--display-font);
    font-size: 2rem;
    line-height: 1;
}

.inventory-clarity-metric.emphasis {
    background: linear-gradient(135deg, rgba(13, 94, 99, 0.92), rgba(29, 122, 140, 0.9));
    color: #f4ffff;
}

.inventory-clarity-metric.emphasis span,
.inventory-clarity-metric.emphasis small,
.inventory-clarity-metric.emphasis strong {
    color: inherit;
}

.inventory-clarity-metric.muted {
    background: linear-gradient(180deg, rgba(245, 247, 249, 0.94), rgba(236, 240, 244, 0.94));
}

.inventory-clarity-alerts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.72);
}

.inventory-clarity-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

.inventory-clarity-legend span,
.inventory-clarity-risk span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.inventory-clarity-risk {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.inventory-clarity-risk span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 179, 71, 0.1);
    color: #8f5a10;
}

.inventory-clarity-zones {
    gap: 18px;
}

.inventory-zone-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(248, 251, 252, 0.94), rgba(239, 247, 248, 0.9));
}

.inventory-zone-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.inventory-zone-stat {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.inventory-zone-stat span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(13, 94, 99, 0.08);
    font-size: 12px;
}

.inventory-zone-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.inventory-overview-card {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(13, 94, 99, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 249, 0.94));
    color: var(--ink);
    box-shadow: none;
    display: grid;
    gap: 14px;
    text-align: left;
}

.inventory-overview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(13, 94, 99, 0.1);
}

.inventory-overview-card.is-blocked {
    background: linear-gradient(180deg, rgba(247, 248, 250, 0.98), rgba(239, 241, 244, 0.96));
}

.inventory-overview-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.inventory-overview-code {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.inventory-overview-head h4 {
    margin: 4px 0 6px;
    font-size: 1.08rem;
    color: var(--ink);
}

.inventory-overview-head p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.inventory-overview-badge {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(13, 94, 99, 0.08);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.inventory-overview-card.is-blocked .inventory-overview-badge {
    background: rgba(148, 163, 184, 0.16);
    color: #667585;
}

.inventory-overview-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.inventory-overview-metrics article,
.inventory-overview-current div {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(13, 94, 99, 0.08);
    background: rgba(13, 94, 99, 0.04);
    display: grid;
    gap: 6px;
}

.inventory-overview-metrics span {
    font-size: 12px;
    color: var(--muted);
}

.inventory-overview-metrics strong {
    font-family: var(--display-font);
    font-size: 1.5rem;
    line-height: 1;
}

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

.inventory-overview-current strong {
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.inventory-layer-stack {
    gap: 10px;
}

.inventory-layer-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(13, 94, 99, 0.1);
    background: rgba(240, 248, 249, 0.82);
}

.inventory-layer-row.filled {
    background: linear-gradient(180deg, rgba(224, 244, 241, 0.92), rgba(246, 252, 252, 0.96));
}

.inventory-layer-row.approximate {
    border-style: dashed;
}

.inventory-layer-row.empty {
    background: rgba(248, 250, 251, 0.9);
}

.inventory-layer-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 12px;
    background: rgba(13, 94, 99, 0.08);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.inventory-layer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inventory-product-chip,
.inventory-empty-chip {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 12px;
    display: grid;
    align-content: center;
    gap: 2px;
}

.inventory-product-chip {
    min-width: 96px;
    color: #12313a;
}

.inventory-product-chip strong,
.inventory-product-chip span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-product-chip strong {
    font-size: 12px;
}

.inventory-product-chip span {
    font-size: 11px;
}

.inventory-empty-chip {
    border: 1px dashed rgba(13, 94, 99, 0.14);
    background: rgba(255, 255, 255, 0.74);
    font-size: 12px;
}

.inventory-layer-note {
    font-size: 12px;
    padding-left: 4px;
}

.schematic-tech {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr) 184px;
    gap: 14px;
    padding: 20px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(92, 211, 255, 0.18), transparent 34%),
        linear-gradient(135deg, #08111c 0%, #0d1e30 46%, #08111d 100%);
    border: 1px solid rgba(90, 186, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(175, 232, 255, 0.08),
        0 18px 40px rgba(6, 14, 24, 0.24);
    color: #dff7ff;
    overflow: hidden;
}

.schematic-side-panel,
.warehouse-stage,
.schematic-side-card,
.warehouse-stage-head,
.warehouse-map,
.tech-zone-list,
.tech-risk-list {
    display: grid;
    gap: 14px;
}

.schematic-side-card,
.warehouse-stage {
    border-radius: 22px;
    border: 1px solid rgba(108, 195, 255, 0.18);
    background: linear-gradient(180deg, rgba(10, 26, 40, 0.86), rgba(9, 18, 30, 0.82));
    box-shadow: inset 0 0 0 1px rgba(150, 227, 255, 0.03);
}

.schematic-side-card {
    padding: 16px 18px;
}

.schematic-side-card h4,
.warehouse-stage-head h4,
.tech-zone-copy strong,
.warehouse-node-label strong,
.tech-risk-item strong {
    margin: 0;
    color: #f4fbff;
}

.side-card-kicker,
.warehouse-stage-kicker {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #77dfff;
}

.schematic-side-card strong {
    display: block;
    font-family: var(--display-font);
    font-size: 2rem;
    line-height: 1;
    color: #f5fbff;
}

.schematic-side-card small,
.schematic-side-card span,
.schematic-side-card p,
.warehouse-stage-head p,
.tech-zone-copy span,
.tech-zone-meta em,
.warehouse-node-label span,
.tech-risk-item span,
.tech-risk-item em,
.tech-risk-empty {
    color: rgba(210, 237, 247, 0.76);
}

.schematic-side-card.highlight {
    background:
        radial-gradient(circle at top left, rgba(116, 230, 255, 0.18), transparent 40%),
        linear-gradient(180deg, rgba(13, 41, 62, 0.96), rgba(9, 19, 32, 0.9));
}

.warehouse-stage {
    padding: 16px;
}

.warehouse-stage-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.warehouse-stage-head h4 {
    font-size: 1.35rem;
}

.warehouse-stage-head p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
}

.warehouse-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-content: start;
    justify-content: flex-end;
    font-size: 12px;
}

.warehouse-legend span {
    color: rgba(214, 244, 255, 0.82);
}

.legend-swatch.cyan {
    background: linear-gradient(135deg, #56e8ff, #1aa5ff);
}

.legend-swatch.violet {
    background: linear-gradient(135deg, #cb9bff, #7c81ff);
}

.legend-swatch.green {
    background: linear-gradient(135deg, #8dffc8, #21d6a2);
}

.legend-swatch.alert {
    background: linear-gradient(135deg, #ffcf6a, #ff6a3d);
}

.warehouse-map {
    position: relative;
    min-height: 560px;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(69, 174, 255, 0.2), transparent 44%),
        linear-gradient(180deg, rgba(8, 18, 31, 0.94), rgba(5, 11, 19, 0.98));
    border: 1px solid rgba(108, 195, 255, 0.14);
}

.warehouse-map-floor,
.warehouse-map-glow,
.warehouse-map-aisle {
    position: absolute;
    pointer-events: none;
}

.warehouse-map-floor {
    inset: 22px;
    border-radius: 20px;
    background:
        linear-gradient(rgba(90, 189, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 189, 255, 0.08) 1px, transparent 1px),
        linear-gradient(135deg, rgba(10, 32, 48, 0.84), rgba(8, 19, 31, 0.92));
    background-size: 48px 48px, 48px 48px, auto;
    transform: perspective(1000px) rotateX(60deg);
    transform-origin: center;
    box-shadow:
        inset 0 0 40px rgba(35, 122, 255, 0.08),
        0 0 30px rgba(20, 101, 214, 0.08);
}

.warehouse-map-glow {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    filter: blur(16px);
    opacity: 0.38;
}

.warehouse-map-glow.glow-a {
    top: 8%;
    left: 18%;
    background: rgba(90, 227, 255, 0.22);
}

.warehouse-map-glow.glow-b {
    right: 12%;
    bottom: 12%;
    background: rgba(121, 127, 255, 0.22);
}

.warehouse-map-aisle {
    height: 4px;
    background: linear-gradient(90deg, rgba(255, 148, 41, 0), rgba(255, 148, 41, 0.96), rgba(255, 148, 41, 0));
    box-shadow: 0 0 12px rgba(255, 144, 36, 0.55);
}

.warehouse-map-aisle.aisle-a {
    left: 10%;
    right: 12%;
    top: 38%;
    transform: skewX(-42deg);
}

.warehouse-map-aisle.aisle-b {
    left: 20%;
    right: 18%;
    top: 58%;
    transform: skewX(-42deg);
}

.warehouse-node {
    position: absolute;
    left: calc(56px + (var(--col) * 112px) + (var(--row) * 18px));
    top: calc(90px + (var(--row) * 110px));
    width: 110px;
    height: 168px;
}

.warehouse-node-shadow {
    position: absolute;
    left: 14px;
    right: -8px;
    bottom: 46px;
    height: 24px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.46);
    filter: blur(8px);
    opacity: 0.8;
    transform: skewX(-42deg);
}

.warehouse-node-core {
    position: absolute;
    left: 0;
    bottom: 54px;
    width: 78px;
    height: var(--tower);
    border-radius: 10px 10px 6px 6px;
    background: linear-gradient(180deg, var(--front-top), var(--front-bottom));
    border: 1px solid rgba(195, 244, 255, 0.24);
    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.06),
        0 0 24px var(--glow);
}

.warehouse-node-core::before,
.warehouse-node-core::after {
    content: "";
    position: absolute;
}

.warehouse-node-core::before {
    left: 10px;
    right: -10px;
    top: -18px;
    height: 18px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, var(--top-left), var(--top-right));
    transform: skewX(-45deg);
    border: 1px solid rgba(195, 244, 255, 0.24);
}

.warehouse-node-core::after {
    top: -9px;
    right: -18px;
    width: 18px;
    bottom: 0;
    border-radius: 0 10px 6px 0;
    background: linear-gradient(180deg, var(--side-top), var(--side-bottom));
    transform: skewY(-45deg);
    border: 1px solid rgba(195, 244, 255, 0.16);
}

.warehouse-node-cap,
.warehouse-node-front,
.warehouse-node-label {
    position: absolute;
    z-index: 1;
}

.warehouse-node-cap {
    left: 10px;
    right: -10px;
    top: -16px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px;
    transform: skewX(-45deg);
    transform-origin: left center;
    font-size: 10px;
    color: #f2fbff;
}

.warehouse-node-cap strong {
    font-size: 11px;
    color: #ffffff;
}

.warehouse-node-front {
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid;
    gap: 2px;
    text-align: left;
}

.warehouse-node-front strong {
    font-family: var(--display-font);
    font-size: 1.35rem;
    line-height: 1;
    color: #ffffff;
}

.warehouse-node-front span {
    font-size: 11px;
    color: rgba(220, 244, 255, 0.8);
}

.warehouse-node-label {
    left: -4px;
    right: -18px;
    bottom: 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(108, 195, 255, 0.14);
    background: rgba(7, 16, 27, 0.82);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.16);
}

.warehouse-node-label strong,
.warehouse-node-label span {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.warehouse-node-label strong {
    margin-bottom: 4px;
    font-size: 12px;
}

.warehouse-node-label span {
    font-size: 11px;
    line-height: 1.45;
}

.warehouse-node.tone-cyan {
    --front-top: rgba(62, 180, 255, 0.96);
    --front-bottom: rgba(9, 70, 150, 0.98);
    --top-left: rgba(131, 233, 255, 0.96);
    --top-right: rgba(51, 159, 255, 0.96);
    --side-top: rgba(20, 116, 214, 0.98);
    --side-bottom: rgba(5, 53, 110, 0.98);
    --glow: rgba(47, 182, 255, 0.28);
}

.warehouse-node.tone-violet {
    --front-top: rgba(140, 151, 255, 0.96);
    --front-bottom: rgba(72, 73, 171, 0.98);
    --top-left: rgba(216, 178, 255, 0.96);
    --top-right: rgba(122, 129, 255, 0.96);
    --side-top: rgba(103, 88, 214, 0.98);
    --side-bottom: rgba(57, 45, 143, 0.98);
    --glow: rgba(144, 136, 255, 0.24);
}

.warehouse-node.tone-green {
    --front-top: rgba(79, 223, 190, 0.96);
    --front-bottom: rgba(11, 125, 112, 0.98);
    --top-left: rgba(174, 255, 219, 0.98);
    --top-right: rgba(62, 218, 177, 0.96);
    --side-top: rgba(19, 160, 130, 0.98);
    --side-bottom: rgba(5, 96, 82, 0.98);
    --glow: rgba(65, 220, 178, 0.24);
}

.warehouse-node.tone-alert {
    --front-top: rgba(255, 152, 95, 0.98);
    --front-bottom: rgba(194, 67, 38, 0.98);
    --top-left: rgba(255, 225, 144, 0.98);
    --top-right: rgba(255, 141, 83, 0.98);
    --side-top: rgba(221, 94, 49, 0.98);
    --side-bottom: rgba(135, 44, 24, 0.98);
    --glow: rgba(255, 125, 74, 0.28);
}

.warehouse-node.tone-blocked {
    --front-top: rgba(127, 151, 172, 0.94);
    --front-bottom: rgba(70, 89, 110, 0.98);
    --top-left: rgba(196, 213, 225, 0.96);
    --top-right: rgba(130, 155, 176, 0.96);
    --side-top: rgba(94, 115, 136, 0.98);
    --side-bottom: rgba(53, 69, 86, 0.98);
    --glow: rgba(130, 155, 176, 0.18);
}

.tech-zone-list,
.tech-risk-list {
    gap: 12px;
}

.tech-zone-row,
.tech-risk-item {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(108, 195, 255, 0.12);
    background: rgba(10, 20, 31, 0.82);
}

.tech-zone-row {
    display: grid;
    gap: 10px;
}

.tech-zone-copy,
.tech-zone-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.tech-zone-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(122, 187, 255, 0.16);
    overflow: hidden;
}

.tech-zone-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5ce2ff, #756eff);
    box-shadow: 0 0 14px rgba(92, 226, 255, 0.28);
}

.tech-zone-meta em,
.tech-risk-item em {
    font-style: normal;
    font-size: 12px;
}

.tech-risk-item {
    display: grid;
    gap: 4px;
}

.tech-risk-empty {
    padding: 16px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(108, 195, 255, 0.18);
    background: rgba(10, 20, 31, 0.64);
}

.content-panel,
.login-card,
.login-side-panel {
    padding: 22px;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}

.panel-head h3 {
    margin: 0;
    font-size: 1.18rem;
}

.panel-head span {
    font-size: 13px;
    line-height: 1.7;
}

.filter-panel .panel-head {
    margin-bottom: 14px;
}

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

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

.wide-field,
.full-width {
    grid-column: 1 / -1;
}

label {
    display: grid;
    gap: 8px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--text);
    font: inherit;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(13, 94, 99, 0.36);
    box-shadow: 0 0 0 3px rgba(13, 94, 99, 0.08);
}

textarea {
    resize: vertical;
}

.freezer-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.freezer-card,
.prefreeze-card,
.validation-card {
    padding: 18px;
    display: grid;
    gap: 14px;
}

.freezer-head,
.prefreeze-head,
.validation-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.freezer-code {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.freezer-head h3,
.prefreeze-head h3,
.validation-head h3 {
    margin: 4px 0 6px;
    font-size: 1.08rem;
}

.freezer-current {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.freezer-current div,
.prefreeze-meta div,
.validation-meta div {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(13, 94, 99, 0.05);
    border: 1px solid rgba(13, 94, 99, 0.08);
    display: grid;
    gap: 6px;
}

.freezer-current span,
.prefreeze-meta span,
.validation-meta span {
    font-size: 12px;
    color: var(--muted);
}

.freezer-current strong {
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.layer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.layer-cell {
    min-height: 108px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(236, 247, 247, 0.76);
    display: grid;
    align-content: start;
    gap: 8px;
}

.layer-cell.used {
    background: linear-gradient(180deg, rgba(216, 240, 238, 0.88), rgba(240, 248, 249, 0.92));
}

.layer-cell.approximate {
    outline: 1px dashed rgba(13, 94, 99, 0.24);
}

.layer-cell.empty {
    border-style: dashed;
}

.layer-index {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 700;
}

.layer-main {
    display: grid;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.layer-main b,
.layer-main em {
    display: block;
    font-style: normal;
}

.freezer-footnote {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--warning);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(13, 94, 99, 0.08);
}

.status-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status-pill.active {
    color: var(--accent);
}

.status-pill.empty,
.status-pill.approved {
    color: var(--success);
}

.status-pill.maintenance,
.status-pill.pending {
    color: var(--warning);
}

.status-pill.disabled {
    color: var(--danger);
}

.alert-card,
.log-card,
.status-card,
.count-card,
.info-card,
.user-row {
    padding: 16px 18px;
}

.alert-card {
    border-left: 4px solid rgba(13, 94, 99, 0.24);
}

.alert-card.warn {
    border-left-color: rgba(168, 106, 17, 0.6);
}

.alert-card.danger {
    border-left-color: rgba(178, 77, 77, 0.62);
}

.alert-card h4,
.log-title {
    margin: 0 0 8px;
    font-size: 14px;
}

.log-meta {
    margin-top: 10px;
    font-size: 12px;
}

.status-card,
.count-card,
.user-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.status-card strong,
.count-card strong,
.user-row strong,
.freezer-current strong,
.prefreeze-meta strong,
.validation-meta strong {
    color: var(--text);
}

.count-card {
    align-items: center;
}

.count-card strong {
    font-family: var(--display-font);
    font-size: 1.45rem;
}

.info-card strong {
    display: block;
    margin-bottom: 8px;
}

.table-wrap {
    overflow: auto;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
}

table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(34, 64, 89, 0.08);
    font-size: 13px;
}

th {
    color: var(--muted);
    background: rgba(13, 94, 99, 0.03);
}

td {
    color: var(--text);
}

.mini-button {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.prefreeze-meta,
.validation-meta {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.convert-grid {
    display: grid;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(34, 64, 89, 0.08);
}

.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    min-width: 220px;
    max-width: 420px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(13, 94, 99, 0.14);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 50;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast[data-kind="error"] {
    border-color: rgba(178, 77, 77, 0.18);
}

body.modal-open {
    overflow: hidden;
}

.freezer-zoom-modal[hidden] {
    display: none;
}

.freezer-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.freezer-zoom-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 10, 18, 0.68);
    backdrop-filter: blur(8px);
}

.freezer-zoom-dialog {
    position: relative;
    width: min(1220px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: 16px auto;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(108, 195, 255, 0.18);
    background:
        radial-gradient(circle at top, rgba(92, 211, 255, 0.14), transparent 32%),
        linear-gradient(180deg, #07111b 0%, #0a1523 100%);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
    overflow: auto;
}

.freezer-zoom-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(108, 195, 255, 0.18);
    border-radius: 999px;
    background: rgba(8, 18, 31, 0.88);
    color: #f4fbff;
    font-size: 28px;
    cursor: pointer;
    z-index: 2;
}

.freezer-zoom-body {
    margin-top: 0;
}

.freezer-zoom-shell,
.freezer-zoom-layout,
.freezer-zoom-detail,
.freezer-zoom-detail-card,
.freezer-zoom-layer-list {
    display: grid;
    gap: 18px;
}

.freezer-zoom-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: start;
    color: #dff7ff;
}

.freezer-zoom-head h3 {
    margin: 8px 0 10px;
    font-family: var(--display-font);
    font-size: 2rem;
    color: #f5fbff;
}

.freezer-zoom-head p {
    margin: 0;
    color: rgba(214, 244, 255, 0.74);
}

.freezer-zoom-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.freezer-zoom-metrics span {
    min-width: 110px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(108, 195, 255, 0.12);
    background: rgba(9, 20, 33, 0.8);
    color: rgba(214, 244, 255, 0.78);
    font-size: 12px;
}

.freezer-zoom-metrics strong {
    display: block;
    margin-top: 6px;
    color: #ffffff;
    font-size: 1.25rem;
}

.freezer-zoom-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    grid-template-areas: "detail stage";
    align-items: start;
    gap: 20px;
}

.freezer-zoom-stage,
.freezer-zoom-detail-card {
    border-radius: 24px;
    border: 1px solid rgba(108, 195, 255, 0.18);
    background: linear-gradient(180deg, rgba(10, 26, 40, 0.86), rgba(9, 18, 30, 0.82));
    box-shadow: inset 0 0 0 1px rgba(150, 227, 255, 0.03);
}

.freezer-zoom-stage {
    grid-area: stage;
    padding: 24px 18px 18px;
    justify-items: center;
    align-self: start;
}

.freezer-zoom-detail {
    grid-area: detail;
}

.freezer-zoom-scene {
    position: relative;
    width: 280px;
    height: 508px;
    padding-top: 0;
}

.freezer-zoom-temp {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(115, 198, 255, 0.18);
    background: rgba(7, 18, 30, 0.9);
    color: #eefaff;
    font-size: 14px;
    z-index: 3;
}

.freezer-zoom-cabinet {
    position: absolute;
    inset: 0;
}

.freezer-zoom-unit-body,
.freezer-zoom-door {
    position: absolute;
    bottom: 30px;
    height: 452px;
    border-radius: 16px;
}

.freezer-zoom-unit-body {
    left: 74px;
    width: 156px;
    background: linear-gradient(180deg, #fafcfd 0%, #e9edf0 44%, #d9dfe4 100%);
    border: 1px solid rgba(147, 164, 180, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.72),
        0 18px 30px rgba(0, 0, 0, 0.24);
}

.freezer-zoom-unit-body::before {
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    width: 14px;
    bottom: 0;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(180deg, #dfe5ea, #bcc7d1);
    transform: skewY(-28deg);
    transform-origin: top left;
}

.freezer-zoom-door {
    left: 34px;
    width: 42px;
    background: linear-gradient(180deg, #ffffff 0%, #edf1f4 100%);
    border: 1px solid rgba(167, 181, 194, 0.74);
    transform: perspective(520px) rotateY(48deg);
    transform-origin: right center;
    box-shadow: -16px 12px 22px rgba(0, 0, 0, 0.18);
}

.freezer-zoom-door::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 104px;
    width: 10px;
    height: 140px;
    border-radius: 6px;
    background: linear-gradient(180deg, #c6ced6, #96a2ad);
}

.freezer-zoom-brand {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #d33636;
    text-transform: lowercase;
}

.freezer-zoom-screen {
    position: absolute;
    top: 42px;
    left: 50%;
    width: 68px;
    height: 44px;
    transform: translateX(-50%);
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #eefaff;
    font-size: 16px;
    font-weight: 700;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.22),
        0 0 16px rgba(83, 182, 255, 0.18);
}

.room-freezer-node.status-open .freezer-zoom-screen {
    background: linear-gradient(180deg, #63d9a3, #1b9a74);
}

.room-freezer-node.status-tight .freezer-zoom-screen {
    background: linear-gradient(180deg, #ffbf75, #d97839);
}

.room-freezer-node.status-blocked .freezer-zoom-screen {
    background: linear-gradient(180deg, #a8b5c2, #6f7f90);
}

.room-freezer-node.status-active .freezer-zoom-screen {
    background: linear-gradient(180deg, #6dc8ff, #2788d8);
}

.freezer-zoom-cavity {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 102px;
    bottom: 48px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(182, 198, 210, 0.76);
    background: linear-gradient(180deg, rgba(223, 240, 250, 0.88), rgba(209, 226, 238, 0.78));
    display: grid;
    gap: 8px;
}

.freezer-zoom-shelf {
    min-height: 48px;
    padding: 6px 8px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(180, 196, 208, 0.42);
}

.freezer-zoom-shelf.empty {
    background: rgba(255, 255, 255, 0.2);
}

.freezer-zoom-shelf.validated-only {
    border-style: dashed;
    border-color: rgba(255, 196, 102, 0.4);
    background: rgba(255, 244, 220, 0.26);
}

.freezer-zoom-shelf-index {
    font-size: 13px;
    font-weight: 700;
    color: #35577a;
}

.freezer-zoom-bags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.freezer-zoom-bag {
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 8px 8px 12px 12px;
    display: inline-grid;
    place-items: center;
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.freezer-zoom-bag i {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 14px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
}

.freezer-zoom-bag em {
    font-style: normal;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(14, 30, 44, 0.94);
    white-space: nowrap;
}

.freezer-zoom-bag.empty {
    background: rgba(255, 255, 255, 0.62);
}

.freezer-zoom-vent {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 24px;
    border-radius: 8px;
    background: radial-gradient(circle, rgba(46, 53, 61, 0.92) 2px, transparent 2.2px);
    background-size: 12px 12px;
}

.freezer-zoom-caption {
    width: 100%;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(108, 195, 255, 0.12);
    background: rgba(9, 19, 31, 0.8);
    text-align: center;
    color: rgba(214, 244, 255, 0.68);
    font-size: 12px;
}

.freezer-zoom-detail-card {
    padding: 22px;
}

.freezer-zoom-detail-card h4 {
    margin: 0;
    color: #f4fbff;
    font-size: 1.15rem;
}

.freezer-zoom-layer-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(108, 195, 255, 0.12);
    background: rgba(9, 19, 31, 0.8);
}

.freezer-zoom-layer-row strong {
    color: #ffffff;
    font-size: 1.05rem;
}

.freezer-zoom-layer-row span,
.freezer-zoom-layer-row em {
    display: block;
}

.freezer-zoom-layer-row span {
    color: rgba(231, 247, 255, 0.9);
    line-height: 1.5;
}

.freezer-zoom-layer-row em {
    margin-top: 4px;
    color: rgba(214, 244, 255, 0.58);
    font-style: normal;
    font-size: 12px;
}

.freezer-zoom-layer-row.validated-only {
    border-style: dashed;
    border-color: rgba(255, 196, 102, 0.32);
    background: rgba(84, 58, 18, 0.34);
}

.login-body {
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-shell {
    width: min(1280px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(178, 77, 77, 0.18);
    background: rgba(178, 77, 77, 0.08);
    color: var(--danger);
}

.login-button {
    width: 100%;
}

.login-hint {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(13, 94, 99, 0.12);
    background: rgba(13, 94, 99, 0.05);
    line-height: 1.7;
    color: var(--muted-strong);
}

@media (max-width: 1200px) {
    .factory-board-main,
    .factory-bottom-panel {
        grid-template-columns: 1fr;
    }

    .factory-data-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
    }

    .factory-gauge {
        width: 150px;
        height: 150px;
    }

    .factory-gauge div {
        width: 96px;
        height: 96px;
    }

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

    .freezer-zoom-layout {
        grid-template-columns: 1fr;
    }

    .freezer-zoom-head {
        display: grid;
    }

    .freezer-zoom-metrics {
        justify-content: flex-start;
    }

    .summary-grid,
    .schematic-summary,
    .schematic-tech,
    .overview-grid,
    .dual-grid,
    .triple-grid,
    .compact-grid,
    .hero-panel,
    .topbar-panel,
    .login-shell {
        grid-template-columns: 1fr;
    }

    .section-heading {
        display: grid;
    }

    .account-card {
        justify-content: flex-start;
    }

    .warehouse-stage-head {
        grid-template-columns: 1fr;
    }

    .warehouse-legend {
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    .factory-freezer-board {
        padding: 12px;
        border-radius: 16px;
    }

    .factory-board-hero,
    .factory-data-rail {
        display: grid;
    }

    .factory-board-pills {
        justify-content: flex-start;
    }

    .factory-layout-map {
        min-height: 980px;
    }

    .factory-layout-map .room-freezer-node {
        width: 108px;
    }

    .factory-layout-map .room-freezer-scene {
        height: 150px;
    }

    .factory-layout-map .tsx-freezer-body,
    .factory-layout-map .tsx-door-leaf {
        height: 118px;
        bottom: 18px;
    }

    .factory-layout-map .tsx-freezer-body {
        left: 20px;
        width: 70px;
    }

    .factory-layout-map .room-freezer-label {
        width: 82px;
    }

    .factory-data-rail,
    .factory-zone-grid,
    .factory-risk-grid {
        grid-template-columns: 1fr;
    }

    .factory-flow-track,
    .factory-callout {
        display: none;
    }

    .factory-gauge {
        margin-left: 0;
    }

    .freezer-zoom-dialog {
        width: min(100vw - 20px, 100%);
        max-height: calc(100vh - 20px);
        margin: 10px auto;
        padding: 16px;
        border-radius: 22px;
    }

    .freezer-zoom-body {
        margin-top: 0;
    }

    .freezer-zoom-scene {
        width: 260px;
        height: 470px;
    }

    .freezer-zoom-unit-body,
    .freezer-zoom-door {
        height: 420px;
        bottom: 28px;
    }

    .freezer-zoom-unit-body {
        left: 66px;
        width: 144px;
    }

    .freezer-zoom-unit-body::before {
        right: -14px;
        width: 14px;
    }

    .freezer-zoom-door {
        left: 28px;
        width: 40px;
    }

    .freezer-zoom-cavity {
        top: 98px;
        bottom: 46px;
        padding: 10px;
    }

    .freezer-zoom-shelf {
        min-height: 46px;
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .freezer-zoom-bag em {
        font-size: 11px;
    }

    .app-shell {
        width: min(100vw - 18px, 100%);
        margin: 10px auto 18px;
    }

    .hero-panel,
    .content-panel,
    .topbar-panel,
    .login-card,
    .login-side-panel {
        padding: 18px;
        border-radius: 20px;
    }

    .field-grid,
    .schematic-meta,
    .prefreeze-meta,
    .validation-meta,
    .freezer-current {
        grid-template-columns: 1fr;
    }

    .freezer-head,
    .prefreeze-head,
    .validation-head,
    .panel-head,
    .tech-zone-copy,
    .tech-zone-meta,
    .status-card,
    .count-card,
    .user-row,
    .topbar-actions,
    .account-card {
        flex-direction: column;
        align-items: start;
    }

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

    .warehouse-map {
        min-height: 760px;
    }

    .warehouse-node {
        left: calc(24px + (var(--col) * 96px) + (var(--row) * 10px));
        top: calc(72px + (var(--row) * 118px));
        width: 92px;
    }

    .warehouse-node-core {
        width: 64px;
    }

    .warehouse-node-core::after {
        right: -14px;
        width: 14px;
    }

    .warehouse-node-label {
        right: -6px;
    }
}

.tsx-room-board {
    background:
        radial-gradient(circle at top, rgba(108, 198, 255, 0.12), transparent 34%),
        linear-gradient(180deg, #08111b 0%, #0a1523 100%);
}

.tsx-room-stage {
    background:
        radial-gradient(circle at top left, rgba(116, 226, 255, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(7, 20, 33, 0.96), rgba(6, 13, 22, 0.94));
}

.room-layout-map {
    position: relative;
    min-height: 860px;
    border-radius: 24px;
    border: 1px solid rgba(113, 197, 255, 0.16);
    background:
        radial-gradient(circle at center, rgba(67, 162, 255, 0.08), transparent 45%),
        linear-gradient(180deg, rgba(8, 18, 31, 0.96), rgba(5, 12, 21, 0.98));
    overflow: hidden;
}

.room-layout-shell,
.room-layout-grid,
.room-layout-core,
.room-layout-door {
    position: absolute;
}

.room-layout-shell {
    inset: 12px;
    border-radius: 20px;
    border: 2px solid rgba(116, 199, 255, 0.24);
    box-shadow:
        inset 0 0 0 1px rgba(160, 229, 255, 0.06),
        0 0 24px rgba(37, 118, 214, 0.1);
}

.room-layout-shell::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 16px;
    border: 1px dashed rgba(115, 196, 255, 0.14);
}

.room-layout-grid {
    inset: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(98, 177, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(98, 177, 255, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.room-layout-core {
    left: 50%;
    top: 50%;
    width: 332px;
    height: 252px;
    transform: translate(-50%, -50%);
    border-radius: 24px;
    border: 1px solid rgba(115, 198, 255, 0.18);
    background:
        radial-gradient(circle at top, rgba(118, 226, 255, 0.08), transparent 45%),
        rgba(9, 19, 31, 0.72);
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    color: rgba(224, 247, 255, 0.82);
    box-shadow: inset 0 0 20px rgba(62, 148, 255, 0.08);
}

.room-layout-core strong {
    display: block;
    font-family: var(--display-font);
    font-size: 1.3rem;
    color: #f5fbff;
}

.room-layout-core span {
    font-size: 12px;
    letter-spacing: 0.08em;
}

.room-layout-door {
    width: 62px;
    height: 124px;
    border: 2px solid rgba(124, 205, 255, 0.26);
    border-radius: 999px 0 0 999px;
    border-right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.75;
}

.room-layout-door::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(125, 214, 255, 0.75);
    transform: translateY(-50%);
}

.room-layout-door.door-left {
    left: -2px;
}

.room-layout-door.door-right {
    right: -2px;
    transform: translateY(-50%) scaleX(-1);
}

.room-freezer-node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 122px;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: pointer;
}

.room-freezer-node:focus-visible {
    outline: 2px solid rgba(119, 223, 255, 0.9);
    outline-offset: 4px;
}

.room-freezer-temp {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(9, 22, 36, 0.86);
    border: 1px solid rgba(115, 198, 255, 0.16);
    color: #eaf8ff;
    font-size: 10px;
    letter-spacing: 0.04em;
    z-index: 3;
    white-space: nowrap;
}

.room-freezer-scene {
    position: relative;
    height: 168px;
    transform: rotate(var(--rotate));
    transform-origin: center;
}

.room-freezer-shadow {
    position: absolute;
    left: 18px;
    right: 10px;
    bottom: 18px;
    height: 26px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    filter: blur(8px);
}

.tsx-freezer-cabinet {
    position: absolute;
    inset: 0;
}

.tsx-freezer-body,
.tsx-door-leaf {
    position: absolute;
    bottom: 20px;
    height: 132px;
    border-radius: 10px;
}

.tsx-freezer-body {
    left: 26px;
    width: 80px;
    background:
        linear-gradient(180deg, #fafcfd 0%, #e9edf0 44%, #d9dfe4 100%);
    border: 1px solid rgba(147, 164, 180, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        0 10px 18px rgba(0, 0, 0, 0.22);
}

.tsx-freezer-body::before {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 10px;
    bottom: 0;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(180deg, #dfe5ea, #bcc7d1);
    transform: skewY(-38deg);
    transform-origin: top left;
}

.tsx-door-leaf {
    left: 6px;
    width: 22px;
    background:
        linear-gradient(180deg, #ffffff 0%, #edf1f4 100%);
    border: 1px solid rgba(167, 181, 194, 0.74);
    transform: perspective(200px) rotateY(50deg);
    transform-origin: right center;
    box-shadow: -8px 6px 18px rgba(0, 0, 0, 0.14);
}

.tsx-door-leaf::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 28px;
    width: 5px;
    height: 42px;
    border-radius: 5px;
    background: linear-gradient(180deg, #c6ced6, #96a2ad);
}

.tsx-brand-mark {
    position: absolute;
    top: 7px;
    left: 12px;
    right: 12px;
    text-align: center;
    font-size: 6px;
    letter-spacing: 0.04em;
    color: #d33636;
    text-transform: lowercase;
}

.tsx-display-screen {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 32px;
    height: 24px;
    transform: translateX(-50%);
    border-radius: 7px;
    background: linear-gradient(180deg, #6dc8ff, #2788d8);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.22),
        0 0 12px rgba(83, 182, 255, 0.18);
    color: #eefaff;
    display: grid;
    place-items: center;
    font-size: 8px;
    font-weight: 700;
}

.tsx-inner-cavity {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 48px;
    bottom: 22px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(223, 240, 250, 0.86), rgba(209, 226, 238, 0.74));
    border: 1px solid rgba(182, 198, 210, 0.76);
    padding: 5px;
    display: grid;
    gap: 3px;
}

.tsx-shelf {
    min-height: 16px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 3px;
    align-items: center;
    padding: 2px 3px;
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(180, 196, 208, 0.42);
}

.tsx-shelf.empty {
    background: rgba(255, 255, 255, 0.2);
}

.tsx-shelf-index {
    font-size: 7px;
    font-weight: 700;
    color: #35577a;
}

.tsx-shelf-bags {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.tsx-bag {
    min-width: 22px;
    height: 16px;
    border-radius: 4px 4px 6px 6px;
    display: inline-grid;
    place-items: center;
    padding: 0 4px;
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.tsx-bag i {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 8px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
}

.tsx-bag em {
    font-style: normal;
    font-size: 8px;
    line-height: 1;
    color: rgba(14, 30, 44, 0.92);
    white-space: nowrap;
}

.tsx-bag.tone-cyan { background: linear-gradient(180deg, #8deaff, #47bff0); }
.tsx-bag.tone-violet { background: linear-gradient(180deg, #d5c0ff, #a38dff); }
.tsx-bag.tone-amber { background: linear-gradient(180deg, #ffe19a, #ffb84f); }
.tsx-bag.tone-mint { background: linear-gradient(180deg, #b8ffd9, #63d8a1); }
.tsx-bag.tone-rose { background: linear-gradient(180deg, #ffc1d3, #ff8cae); }
.freezer-zoom-bag.tone-cyan { background: linear-gradient(180deg, #8deaff, #47bff0); }
.freezer-zoom-bag.tone-violet { background: linear-gradient(180deg, #d5c0ff, #a38dff); }
.freezer-zoom-bag.tone-amber { background: linear-gradient(180deg, #ffe19a, #ffb84f); }
.freezer-zoom-bag.tone-mint { background: linear-gradient(180deg, #b8ffd9, #63d8a1); }
.freezer-zoom-bag.tone-rose { background: linear-gradient(180deg, #ffc1d3, #ff8cae); }

.tsx-empty-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: #67849f;
    font-size: 7px;
}

.tsx-bottom-vent {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 16px;
    border-radius: 6px;
    background:
        radial-gradient(circle, rgba(46, 53, 61, 0.92) 1.4px, transparent 1.6px);
    background-size: 8px 8px;
    background-position: 0 0;
}

.room-freezer-label {
    position: absolute;
    width: 88px;
    padding: 5px 6px;
    border-radius: 14px;
    background: rgba(7, 17, 28, 0.86);
    border: 1px solid rgba(113, 197, 255, 0.12);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
    z-index: 3;
}

.room-freezer-node.side-top .room-freezer-label {
    left: 50%;
    top: 146px;
    transform: translateX(-50%);
}

.room-freezer-node.side-bottom .room-freezer-label {
    left: 50%;
    bottom: 146px;
    transform: translateX(-50%);
}

.room-freezer-node.side-left .room-freezer-label {
    left: 108px;
    top: 48px;
}

.room-freezer-node.side-right .room-freezer-label {
    right: 108px;
    top: 48px;
}

.room-freezer-label strong,
.room-freezer-label em {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.room-freezer-label strong {
    color: #f4fbff;
    font-size: 9px;
    margin-bottom: 2px;
    line-height: 1.2;
}

.room-freezer-label em {
    color: rgba(212, 241, 250, 0.8);
    font-size: 8px;
    font-style: normal;
    line-height: 1.2;
}

.room-freezer-node.status-open .room-freezer-temp {
    border-color: rgba(92, 216, 150, 0.24);
    color: #c9ffe5;
}

.room-freezer-node.status-tight .room-freezer-temp {
    border-color: rgba(255, 187, 110, 0.26);
    color: #ffe1b4;
}

.room-freezer-node.status-blocked .room-freezer-temp {
    border-color: rgba(181, 193, 206, 0.22);
    color: #d4dce5;
}

.room-freezer-node.status-open .tsx-display-screen {
    background: linear-gradient(180deg, #63d9a3, #1b9a74);
}

.room-freezer-node.status-tight .tsx-display-screen {
    background: linear-gradient(180deg, #ffbf75, #d97839);
}

.room-freezer-node.status-blocked .tsx-display-screen {
    background: linear-gradient(180deg, #a8b5c2, #6f7f90);
}

.factory-freezer-board {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(82, 202, 255, 0.2);
    background:
        linear-gradient(rgba(74, 172, 230, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 172, 230, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 45% 24%, rgba(30, 122, 172, 0.26), transparent 34%),
        linear-gradient(180deg, #07121a 0%, #081725 58%, #061018 100%);
    background-size: 24px 24px, 24px 24px, auto, auto;
    color: #def7ff;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(153, 230, 255, 0.05),
        0 24px 70px rgba(2, 10, 18, 0.26);
}

.factory-freezer-board::before,
.factory-freezer-board::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.factory-freezer-board::before {
    inset: 0;
    background:
        radial-gradient(circle at 18% 24%, rgba(18, 196, 255, 0.08), transparent 28%),
        radial-gradient(circle at 84% 72%, rgba(255, 158, 63, 0.08), transparent 24%);
}

.factory-freezer-board::after {
    left: 4%;
    right: 4%;
    bottom: 32%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(57, 226, 255, 0.45), transparent);
}

.factory-board-hero,
.factory-board-main,
.factory-bottom-panel {
    position: relative;
    z-index: 1;
}

.factory-board-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 4px 4px 0;
}

.factory-board-title span,
.factory-panel-title span,
.factory-board-pills span,
.factory-room-tag span,
.factory-datetime span,
.factory-mini-metrics span {
    color: rgba(202, 238, 250, 0.72);
}

.factory-board-title span {
    display: block;
    margin-bottom: 6px;
    color: #5ee7ff;
    font-size: 11px;
    letter-spacing: 0.18em;
}

.factory-board-title h4 {
    margin: 0;
    color: #f6fbff;
    font-family: var(--display-font);
    font-size: 1.45rem;
}

.factory-board-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.factory-board-pills span {
    padding: 8px 10px;
    border: 1px solid rgba(71, 214, 255, 0.24);
    background: rgba(7, 25, 38, 0.74);
    font-size: 12px;
    box-shadow: inset 0 0 12px rgba(51, 216, 255, 0.04);
}

.factory-board-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 276px;
    gap: 16px;
    align-items: stretch;
}

.factory-layout-panel {
    position: relative;
    min-width: 0;
}

.factory-layout-map {
    min-height: 820px;
    border-radius: 12px;
    border-color: rgba(82, 202, 255, 0.24);
    background:
        linear-gradient(rgba(73, 163, 214, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 163, 214, 0.07) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(43, 132, 188, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(8, 19, 29, 0.98), rgba(4, 12, 19, 0.98));
    background-size: 56px 56px, 56px 56px, auto, auto;
}

.factory-layout-map .room-layout-shell {
    inset: 14px;
    border-radius: 10px;
    border-color: rgba(92, 224, 255, 0.28);
}

.factory-layout-map .room-layout-shell::before {
    border-radius: 8px;
    border-color: rgba(73, 220, 255, 0.18);
}

.factory-layout-map .room-layout-grid {
    background-size: 64px 64px;
}

.factory-layout-map .room-freezer-node {
    width: 144px;
}

.factory-layout-map .room-freezer-scene {
    height: 198px;
}

.factory-layout-map .tsx-freezer-body,
.factory-layout-map .tsx-door-leaf {
    bottom: 24px;
    height: 154px;
}

.factory-layout-map .tsx-freezer-body {
    left: 29px;
    width: 94px;
}

.factory-layout-map .tsx-inner-cavity {
    top: 54px;
    bottom: 25px;
    gap: 4px;
}

.factory-layout-map .tsx-shelf {
    min-height: 20px;
}

.factory-layout-map .tsx-bag {
    min-width: 24px;
}

.factory-layout-map .tsx-bag em {
    font-size: 7px;
}

.factory-layout-map .room-freezer-label {
    width: 98px;
    border-radius: 8px;
    background: rgba(5, 18, 29, 0.92);
    border-color: rgba(82, 202, 255, 0.22);
}

.factory-layout-map .room-freezer-label strong {
    font-size: 10px;
}

.factory-layout-map .room-freezer-label em {
    font-size: 8px;
}

.factory-layout-map .room-freezer-node.side-left .room-freezer-label {
    left: 118px;
}

.factory-layout-map .room-freezer-node.side-right .room-freezer-label {
    right: 118px;
}

.factory-layout-map .room-freezer-node.side-top .room-freezer-label {
    top: 168px;
}

.factory-layout-map .room-freezer-node.side-bottom .room-freezer-label {
    bottom: 168px;
}

.factory-core {
    width: 340px;
    height: 220px;
    border-radius: 10px;
    border-color: rgba(86, 213, 255, 0.22);
    background:
        linear-gradient(135deg, rgba(24, 67, 92, 0.88), rgba(8, 24, 36, 0.9)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 12px);
}

.factory-core strong {
    font-size: 1.15rem;
}

.factory-core span {
    letter-spacing: 0;
}

.factory-flow-track {
    position: absolute;
    z-index: 2;
    height: 2px;
    border-top: 2px dotted rgba(27, 226, 255, 0.7);
    pointer-events: none;
}

.factory-flow-track::after {
    content: "›";
    position: absolute;
    right: -8px;
    top: -16px;
    color: #28edff;
    font-size: 24px;
}

.factory-flow-track.track-a {
    left: 17%;
    right: 28%;
    top: 20%;
}

.factory-flow-track.track-b {
    left: 16%;
    right: 19%;
    top: 51%;
}

.factory-flow-track.track-c {
    left: 25%;
    right: 26%;
    top: 84%;
}

.factory-callout {
    position: absolute;
    z-index: 3;
    min-width: 112px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(54, 221, 255, 0.26);
    background: linear-gradient(180deg, rgba(10, 37, 55, 0.92), rgba(5, 18, 29, 0.92));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.factory-callout b,
.factory-kpi-pair strong,
.factory-gauge strong {
    color: #f7fbff;
}

.factory-callout b {
    display: block;
    font-size: 1.35rem;
}

.factory-callout span {
    color: rgba(200, 237, 248, 0.74);
    font-size: 11px;
}

.factory-callout::before {
    content: "";
    position: absolute;
    width: 44px;
    height: 1px;
    background: rgba(54, 221, 255, 0.5);
}

.callout-load {
    left: 5%;
    top: 8%;
}

.callout-load::before {
    left: 100%;
    top: 50%;
}

.callout-free {
    right: 7%;
    bottom: 13%;
}

.callout-free::before {
    right: 100%;
    top: 50%;
}

.callout-prefreeze {
    left: 46%;
    bottom: 5%;
}

.callout-prefreeze::before {
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 40px;
}

.factory-data-rail,
.factory-zone-panel,
.factory-risk-panel {
    border: 1px solid rgba(82, 202, 255, 0.2);
    background: linear-gradient(180deg, rgba(8, 30, 46, 0.88), rgba(5, 16, 26, 0.88));
    box-shadow: inset 0 0 0 1px rgba(153, 230, 255, 0.04);
}

.factory-data-rail {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
}

.factory-room-tag {
    padding: 14px;
    border: 1px solid rgba(82, 202, 255, 0.24);
    background: rgba(7, 24, 37, 0.78);
}

.factory-room-tag span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.factory-room-tag strong {
    color: #f7fbff;
    font-size: 1.15rem;
}

.factory-datetime {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(25, 218, 255, 0.34);
    color: #42e8ff;
    font-size: 12px;
}

.factory-kpi-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.factory-kpi-pair article {
    padding: 12px;
    border-left: 2px solid #22d9ff;
    background: rgba(8, 31, 47, 0.72);
}

.factory-kpi-pair span {
    color: rgba(208, 240, 250, 0.72);
    font-size: 12px;
}

.factory-kpi-pair strong {
    display: block;
    margin-top: 8px;
    font-size: 2rem;
}

.factory-gauge {
    width: 190px;
    height: 190px;
    margin: 4px auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #071421 0 48%, transparent 49%),
        conic-gradient(#1fe1ff 0 var(--value), rgba(49, 89, 113, 0.58) var(--value) 360deg);
    box-shadow:
        inset 0 0 28px rgba(31, 225, 255, 0.12),
        0 0 26px rgba(31, 225, 255, 0.12);
}

.factory-gauge div {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid rgba(64, 165, 255, 0.36);
    background: rgba(10, 29, 48, 0.9);
}

.factory-gauge strong {
    font-size: 1.35rem;
}

.factory-gauge span {
    color: rgba(205, 237, 248, 0.7);
    font-size: 11px;
}

.factory-mini-metrics {
    display: grid;
    gap: 8px;
}

.factory-mini-metrics span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    background: rgba(9, 31, 47, 0.78);
}

.factory-mini-metrics b {
    color: #ffffff;
}

.factory-bottom-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 16px;
}

.factory-zone-panel,
.factory-risk-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
}

.factory-panel-title {
    display: grid;
    gap: 4px;
}

.factory-panel-title strong {
    color: #f7fbff;
}

.factory-panel-title span {
    font-size: 12px;
}

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

.factory-risk-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.factory-zone-grid,
.factory-risk-grid {
    display: grid;
    gap: 10px;
}

.tsx-room-board {
    grid-template-columns: 1fr;
    gap: 18px;
}

.tsx-overview-strip,
.tsx-overview-bottom {
    display: grid;
    gap: 14px;
}

.tsx-overview-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tsx-overview-card {
    min-height: 124px;
}

.tsx-overview-card strong {
    font-size: 2.2rem;
}

.tsx-room-stage-focus {
    padding: 18px;
}

.tsx-room-stage-focus .warehouse-stage-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
}

.tsx-room-stage-focus .warehouse-stage-head p {
    max-width: 720px;
}

.tsx-room-stage-focus .room-layout-map {
    min-height: 980px;
}

.tsx-room-stage-focus .room-layout-core {
    width: 360px;
    height: 272px;
}

.tsx-room-stage-focus .room-freezer-node {
    width: 132px;
}

.tsx-room-stage-focus .room-freezer-scene {
    height: 184px;
}

.tsx-room-stage-focus .tsx-freezer-body,
.tsx-room-stage-focus .tsx-door-leaf {
    bottom: 22px;
    height: 146px;
}

.tsx-room-stage-focus .tsx-freezer-body {
    left: 27px;
    width: 88px;
}

.tsx-room-stage-focus .tsx-display-screen {
    width: 34px;
    height: 25px;
    font-size: 8px;
}

.tsx-room-stage-focus .tsx-inner-cavity {
    left: 8px;
    right: 8px;
    top: 52px;
    bottom: 24px;
    gap: 4px;
}

.tsx-room-stage-focus .tsx-shelf {
    min-height: 18px;
}

.tsx-room-stage-focus .tsx-shelf-index {
    font-size: 7px;
}

.tsx-room-stage-focus .tsx-bag em {
    font-size: 7px;
}

.tsx-room-stage-focus .room-freezer-label {
    width: 92px;
    padding: 6px 7px;
}

.tsx-room-stage-focus .room-freezer-node.side-top .room-freezer-label {
    top: 160px;
}

.tsx-room-stage-focus .room-freezer-node.side-bottom .room-freezer-label {
    bottom: 160px;
}

.tsx-room-stage-focus .room-freezer-node.side-left .room-freezer-label {
    left: 116px;
    top: 52px;
}

.tsx-room-stage-focus .room-freezer-node.side-right .room-freezer-label {
    right: 116px;
    top: 52px;
}

.tsx-room-stage-focus .room-freezer-label strong {
    font-size: 10px;
}

.tsx-room-stage-focus .room-freezer-label em {
    font-size: 8px;
}

.tsx-overview-bottom {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
}

.tsx-data-panel {
    gap: 12px;
}

.tsx-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.tsx-panel-head h4 {
    margin: 0;
    color: #f4fbff;
}

.tsx-panel-head span {
    color: rgba(210, 237, 247, 0.76);
    font-size: 12px;
    line-height: 1.6;
}

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

.tsx-risk-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tsx-zone-grid,
.tsx-risk-grid {
    display: grid;
    gap: 12px;
}

.blueprint-board,
.blueprint-summary,
.blueprint-stage,
.blueprint-stage-head,
.blueprint-footer {
    display: grid;
    gap: 14px;
}

.blueprint-board {
    gap: 16px;
}

.blueprint-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.blueprint-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.blueprint-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(13, 94, 99, 0.08);
}

.blueprint-hero h4 {
    margin: 0;
    font-size: 1.35rem;
}

.blueprint-hero p {
    margin: 6px 0 0;
    max-width: 680px;
    color: var(--muted);
    line-height: 1.65;
}

.blueprint-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.blueprint-pills span {
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(13, 94, 99, 0.12);
    background: rgba(13, 94, 99, 0.05);
    color: var(--muted-strong);
    font-size: 12px;
    white-space: nowrap;
}

.blueprint-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.blueprint-metric {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(247, 251, 252, 0.96), rgba(239, 247, 248, 0.92));
}

.blueprint-metric span,
.blueprint-metric small,
.blueprint-freezer-head span,
.blueprint-freezer-name,
.blueprint-freezer-foot em,
.blueprint-core span,
.blueprint-footer-note span {
    color: var(--muted);
}

.blueprint-metric strong {
    display: block;
    margin: 8px 0 4px;
    font-family: var(--display-font);
    font-size: 1.85rem;
    line-height: 1;
    color: var(--text);
}

.blueprint-metric.emphasis {
    background: linear-gradient(135deg, rgba(13, 94, 99, 0.92), rgba(29, 122, 140, 0.88));
}

.blueprint-metric.emphasis span,
.blueprint-metric.emphasis small,
.blueprint-metric.emphasis strong {
    color: #f4ffff;
}

.blueprint-metric.muted {
    background: linear-gradient(180deg, rgba(246, 248, 250, 0.98), rgba(236, 240, 244, 0.94));
}

.blueprint-stage {
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(34, 64, 89, 0.12);
    background: linear-gradient(180deg, rgba(247, 251, 252, 0.96), rgba(239, 246, 248, 0.94));
}

.blueprint-stage-head {
    gap: 10px;
}

.blueprint-legend,
.blueprint-risk-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
}

.blueprint-legend span,
.blueprint-risk-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.blueprint-risk-strip span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 185, 77, 0.12);
    color: #8f5a10;
}

.blueprint-map {
    padding-top: 2px;
}

.blueprint-shell,
.blueprint-grid,
.blueprint-core {
    position: relative;
}

.blueprint-shell {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(20, 60, 78, 0.14);
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.86), rgba(233, 242, 246, 0.72) 42%, rgba(219, 233, 239, 0.94) 100%),
        linear-gradient(180deg, rgba(251, 253, 254, 0.98), rgba(236, 244, 247, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.blueprint-shell::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 22px;
    border: 1px solid rgba(13, 94, 99, 0.09);
    pointer-events: none;
}

.blueprint-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(13, 94, 99, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 94, 99, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.16));
}

.blueprint-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 116px;
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 14px 18px;
    text-align: center;
    border-radius: 28px;
    border: 1px dashed rgba(13, 94, 99, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 248, 250, 0.84));
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 34px rgba(44, 82, 103, 0.08);
}

.blueprint-core strong,
.blueprint-footer-note strong {
    color: var(--text);
}

.blueprint-core strong {
    font-size: 1rem;
}

.blueprint-core span {
    font-size: 12px;
    line-height: 1.55;
}

.blueprint-freezer-node {
    position: absolute;
    width: 152px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transform: translate(-50%, -50%);
    transition: transform 0.18s ease, filter 0.18s ease;
    z-index: 2;
}

.blueprint-freezer-node:hover {
    transform: translate(-50%, -50%) scale(1.03);
    filter: drop-shadow(0 10px 20px rgba(24, 62, 78, 0.14));
}

.blueprint-freezer-node.side-left,
.blueprint-freezer-node.side-right {
    width: 152px;
    transform: translate(-50%, -50%);
}

.blueprint-freezer-node.side-left:hover,
.blueprint-freezer-node.side-right:hover {
    transform: translate(-50%, -50%) scale(1.03);
}

.blueprint-freezer-node:focus-visible {
    outline: 2px solid rgba(13, 94, 99, 0.34);
    outline-offset: 4px;
    border-radius: 20px;
}

.blueprint-freezer-temp {
    position: absolute;
    top: 8px;
    right: 8px;
    width: fit-content;
    margin: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(13, 94, 99, 0.08);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(24, 62, 78, 0.08);
}

.blueprint-freezer-node.side-left .blueprint-freezer-temp,
.blueprint-freezer-node.side-right .blueprint-freezer-temp {
    padding: 3px 8px;
}

.blueprint-freezer-body {
    position: relative;
    height: 104px;
    padding: 18px 7px 7px;
    border-radius: 18px;
    border: 1px solid rgba(34, 64, 89, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 249, 0.94));
    box-shadow: 0 12px 22px rgba(30, 60, 84, 0.08);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
        "head name"
        "head shelves"
        "head foot";
    gap: 4px 6px;
    align-items: start;
}

.blueprint-freezer-head {
    display: flex;
    grid-area: head;
    min-height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2px;
}

.blueprint-freezer-node.side-left .blueprint-freezer-body,
.blueprint-freezer-node.side-right .blueprint-freezer-body {
    height: 104px;
    padding: 18px 7px 7px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 6px;
}

.blueprint-freezer-node.side-left .blueprint-freezer-head,
.blueprint-freezer-node.side-right .blueprint-freezer-head {
    min-height: 100%;
}

.blueprint-freezer-head strong {
    color: var(--text);
    font-size: 11px;
}

.blueprint-freezer-head span {
    font-size: 9px;
    text-transform: uppercase;
}

.blueprint-freezer-name {
    grid-area: name;
    font-size: 10px;
    line-height: 1.15;
    min-height: 0;
    max-width: calc(100% - 46px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-strong);
    font-weight: 700;
}

.blueprint-freezer-node.side-left .blueprint-freezer-name,
.blueprint-freezer-node.side-right .blueprint-freezer-name {
    font-size: 10px;
    line-height: 1.15;
}

.blueprint-shelf-stack {
    display: grid;
    grid-area: shelves;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    min-height: 32px;
    align-content: start;
}

.blueprint-freezer-node.side-left .blueprint-shelf-stack,
.blueprint-freezer-node.side-right .blueprint-shelf-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
}

.blueprint-freezer-node.side-left .blueprint-shelf,
.blueprint-freezer-node.side-right .blueprint-shelf {
    min-height: 15px;
    grid-template-columns: 1fr;
    gap: 1px;
    justify-items: center;
    padding: 2px;
}

.blueprint-freezer-node.side-left .blueprint-shelf span,
.blueprint-freezer-node.side-right .blueprint-shelf span,
.blueprint-freezer-node.side-left .blueprint-shelf b,
.blueprint-freezer-node.side-right .blueprint-shelf b {
    font-size: 7px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blueprint-shelf {
    min-height: 15px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 1px;
    justify-items: center;
    padding: 2px;
    border-radius: 9px;
    border: 1px solid rgba(13, 94, 99, 0.08);
    background: rgba(225, 237, 241, 0.52);
}

.blueprint-shelf span,
.blueprint-shelf b {
    min-width: 0;
}

.blueprint-shelf span {
    display: block;
    width: 100%;
    font-size: 7px;
    color: var(--muted-strong);
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

.blueprint-shelf b {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 6px;
    color: var(--text);
    text-align: center;
    line-height: 1;
}

.blueprint-shelf.filled {
    background: linear-gradient(135deg, rgba(157, 231, 224, 0.98), rgba(208, 243, 239, 0.96));
    border-color: rgba(13, 94, 99, 0.16);
}

.blueprint-shelf.empty {
    background: linear-gradient(135deg, rgba(241, 245, 248, 0.98), rgba(231, 237, 242, 0.94));
    border-color: rgba(131, 149, 167, 0.16);
}

.blueprint-shelf.validated-only {
    border-style: dashed;
    border-color: rgba(240, 171, 77, 0.42);
    background: linear-gradient(135deg, rgba(255, 248, 231, 0.98), rgba(255, 241, 209, 0.96));
}

.blueprint-shelf.approximate {
    border-style: dashed;
}

.blueprint-shelf.tone-cyan,
.blueprint-shelf.tone-violet,
.blueprint-shelf.tone-amber,
.blueprint-shelf.tone-mint,
.blueprint-shelf.tone-rose {
    background: linear-gradient(135deg, rgba(157, 231, 224, 0.98), rgba(208, 243, 239, 0.96));
    border-color: rgba(13, 94, 99, 0.16);
}

.blueprint-freezer-foot {
    grid-area: foot;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.blueprint-freezer-node.side-left .blueprint-freezer-foot,
.blueprint-freezer-node.side-right .blueprint-freezer-foot {
    justify-content: flex-start;
    gap: 8px;
}

.blueprint-freezer-node.side-left .blueprint-freezer-foot em,
.blueprint-freezer-node.side-right .blueprint-freezer-foot em {
    font-size: 8px;
}

.blueprint-freezer-node.side-left .blueprint-freezer-head strong,
.blueprint-freezer-node.side-right .blueprint-freezer-head strong {
    font-size: 10px;
}

.blueprint-freezer-node.side-left .blueprint-freezer-head span,
.blueprint-freezer-node.side-right .blueprint-freezer-head span {
    font-size: 8px;
}

.blueprint-freezer-foot em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
}

.blueprint-freezer-foot .capability {
    color: #a86a11;
}

.blueprint-freezer-node.is-active .blueprint-freezer-body {
    border-color: rgba(13, 94, 99, 0.18);
}

.blueprint-freezer-node.is-open .blueprint-freezer-body {
    border-color: rgba(64, 146, 103, 0.18);
    background: linear-gradient(180deg, rgba(250, 255, 252, 0.98), rgba(238, 249, 242, 0.94));
}

.blueprint-freezer-node.is-tight .blueprint-freezer-body {
    border-color: rgba(191, 125, 32, 0.2);
    background: linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(252, 243, 225, 0.96));
}

.blueprint-freezer-node.is-blocked .blueprint-freezer-temp {
    background: rgba(109, 126, 143, 0.14);
    color: #5f7284;
}

.blueprint-freezer-node.is-blocked .blueprint-freezer-body {
    border-color: rgba(120, 136, 151, 0.14);
    background: linear-gradient(180deg, rgba(248, 249, 251, 0.98), rgba(237, 240, 244, 0.94));
}

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

.blueprint-footer-note {
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(13, 94, 99, 0.09);
    background: rgba(255, 255, 255, 0.7);
}

.blueprint-footer-note strong {
    display: block;
    margin-bottom: 4px;
}

.blueprint-footer-note span {
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .inventory-clarity-summary {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-zone-grid {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-clarity-hero,
    .inventory-zone-head {
        flex-direction: column;
    }

    .inventory-clarity-pills,
    .inventory-zone-stat,
    .inventory-clarity-risk {
        justify-content: flex-start;
    }

    .tsx-overview-strip,
    .tsx-overview-bottom,
    .tsx-zone-grid,
    .tsx-risk-grid {
        grid-template-columns: 1fr 1fr;
    }

    .blueprint-hero {
        flex-direction: column;
        align-items: start;
    }

    .blueprint-pills {
        justify-content: flex-start;
    }

    .blueprint-summary,
    .blueprint-footer {
        grid-template-columns: 1fr 1fr;
    }

    .blueprint-shell {
        min-height: 590px;
    }

    .blueprint-core {
        width: 188px;
        height: 102px;
        padding: 12px 14px;
    }

    .blueprint-freezer-node,
    .blueprint-freezer-node.side-left,
    .blueprint-freezer-node.side-right {
        width: 148px;
    }

    .tsx-room-stage-focus .room-layout-map {
        min-height: 1040px;
    }

    .tsx-room-stage-focus .room-layout-core {
        width: 290px;
        height: 214px;
    }

    .tsx-room-stage-focus .room-freezer-node {
        width: 122px;
    }

    .tsx-room-stage-focus .room-freezer-scene {
        height: 172px;
    }

    .room-layout-map {
        min-height: 1040px;
    }

    .room-freezer-node {
        width: 116px;
    }

    .room-layout-core {
        width: 250px;
        height: 186px;
    }
}

@media (max-width: 820px) {
    .inventory-clarity-summary,
    .inventory-zone-grid,
    .inventory-overview-metrics,
    .inventory-overview-current {
        grid-template-columns: 1fr;
    }

    .inventory-clarity-pills {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .inventory-clarity-alerts,
    .inventory-clarity-legend,
    .inventory-clarity-risk {
        display: grid;
        justify-content: stretch;
    }

    .inventory-layer-row {
        grid-template-columns: 1fr;
    }

    .inventory-layer-index {
        justify-self: start;
        min-width: 46px;
    }

    .tsx-overview-strip,
    .tsx-overview-bottom,
    .tsx-zone-grid,
    .tsx-risk-grid {
        grid-template-columns: 1fr;
    }

    .blueprint-summary,
    .blueprint-footer {
        grid-template-columns: 1fr 1fr;
    }

    .blueprint-board {
        gap: 12px;
    }

    .blueprint-hero h4 {
        font-size: 1.18rem;
    }

    .blueprint-hero p {
        font-size: 12px;
        line-height: 1.55;
        display: none;
    }

    .blueprint-pills span {
        padding: 6px 9px;
        font-size: 11px;
    }

    .blueprint-summary {
        gap: 10px;
    }

    .blueprint-metric {
        padding: 12px;
        border-radius: 16px;
    }

    .blueprint-metric strong {
        margin: 6px 0 3px;
        font-size: 1.5rem;
    }

    .blueprint-metric small,
    .blueprint-metric span {
        font-size: 11px;
    }

    .blueprint-stage-head {
        gap: 8px;
    }

    .blueprint-legend span,
    .blueprint-risk-strip span {
        font-size: 11px;
    }

    .blueprint-stage {
        padding: 12px;
    }

    .blueprint-shell {
        min-height: 480px;
        border-radius: 22px;
    }

    .blueprint-shell::before {
        inset: 10px;
        border-radius: 16px;
    }

    .blueprint-grid {
        background-size: 34px 34px;
    }

    .blueprint-core {
        width: 150px;
        height: 82px;
        border-radius: 18px;
        padding: 10px 12px;
    }

    .blueprint-freezer-node,
    .blueprint-freezer-node.side-left,
    .blueprint-freezer-node.side-right {
        width: 128px;
        transform: translate(-50%, -50%) scale(0.7);
    }

    .blueprint-freezer-node:hover,
    .blueprint-freezer-node.side-left:hover,
    .blueprint-freezer-node.side-right:hover {
        transform: translate(-50%, -50%) scale(0.74);
    }

    .blueprint-freezer-body {
        gap: 5px;
    }

    .blueprint-freezer-body {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 4px 6px;
    }

    .blueprint-freezer-node.side-left .blueprint-freezer-body,
    .blueprint-freezer-node.side-right .blueprint-freezer-body {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 4px 6px;
    }

    .blueprint-shelf-stack {
        gap: 3px;
    }

    .blueprint-footer {
        display: none;
    }

    .blueprint-pills,
    .blueprint-legend,
    .blueprint-risk-strip {
        justify-content: flex-start;
    }

    .blueprint-core strong {
        font-size: 0.92rem;
    }

    .blueprint-core span {
        font-size: 11px;
    }

    .blueprint-freezer-temp {
        margin-bottom: 4px;
        top: 6px;
        right: 6px;
        padding: 2px 6px;
        font-size: 8px;
    }

    .blueprint-freezer-body {
        padding: 15px 6px 7px;
        border-radius: 16px;
    }

    .blueprint-shelf {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 2px;
        padding: 3px 4px;
    }

    .blueprint-shelf span,
    .blueprint-shelf b,
    .blueprint-freezer-foot em,
    .blueprint-freezer-head strong,
    .blueprint-freezer-name {
        font-size: 8px;
    }

    .tsx-room-stage-focus {
        padding: 16px;
    }

    .tsx-room-stage-focus .room-layout-map {
        min-height: 1060px;
    }

    .tsx-room-stage-focus .room-layout-core {
        width: 190px;
        height: 136px;
    }

    .tsx-room-stage-focus .room-freezer-node {
        width: 108px;
    }

    .tsx-room-stage-focus .room-freezer-scene {
        height: 150px;
    }

    .tsx-room-stage-focus .tsx-freezer-body,
    .tsx-room-stage-focus .tsx-door-leaf {
        height: 118px;
    }

    .tsx-room-stage-focus .tsx-freezer-body {
        left: 20px;
        width: 70px;
    }

    .tsx-room-stage-focus .room-freezer-label {
        width: 82px;
    }

    .room-layout-map {
        min-height: 980px;
    }

    .room-layout-core {
        width: 160px;
        height: 110px;
    }

    .room-freezer-node {
        width: 104px;
    }

    .room-freezer-scene {
        height: 146px;
    }

    .tsx-freezer-body,
    .tsx-door-leaf {
        bottom: 18px;
        height: 114px;
    }

    .tsx-freezer-body {
        left: 20px;
        width: 68px;
    }

    .room-freezer-label {
        width: 86px;
        padding: 5px 6px;
    }
}

/* 2026 ice-blue industrial control theme */
:root {
    --bg: #061117;
    --bg-strong: #091c24;
    --panel: #0b2029;
    --panel-strong: #102a34;
    --line: rgba(111, 207, 220, 0.16);
    --line-strong: rgba(99, 219, 232, 0.38);
    --text: #eaf6f7;
    --muted: #89a9af;
    --muted-strong: #b2c9cd;
    --accent: #63dbe8;
    --accent-soft: rgba(99, 219, 232, 0.1);
    --accent-2: #56d4ad;
    --success: #56d4ad;
    --warning: #f4b35f;
    --danger: #ff765c;
    --shadow: 0 18px 52px rgba(0, 0, 0, 0.3);
    --radius-xl: 8px;
    --radius-lg: 6px;
    --radius-md: 4px;
    --display-font: "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
    --body-font: "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
    --mono-font: "Cascadia Mono", "Cascadia Code", Consolas, monospace;
}

body[data-ui] {
    letter-spacing: 0;
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(99, 219, 232, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 219, 232, 0.026) 1px, transparent 1px),
        linear-gradient(135deg, #061117 0%, #09212a 62%, #0e282d 100%);
    background-size: 38px 38px, 38px 38px, auto;
}

body[data-ui]::before {
    display: none;
}

body[data-ui] *,
body[data-ui] *::before,
body[data-ui] *::after {
    letter-spacing: 0;
}

body[data-ui] button,
body[data-ui] input,
body[data-ui] select,
body[data-ui] textarea {
    font: inherit;
}

body[data-ui] button:focus-visible,
body[data-ui] input:focus-visible,
body[data-ui] select:focus-visible,
body[data-ui] textarea:focus-visible,
body[data-ui] a:focus-visible {
    outline: 3px solid rgba(99, 219, 232, 0.22);
    outline-offset: 2px;
}

body[data-ui="industrial-dashboard"] .app-shell {
    width: min(1600px, calc(100vw - 28px));
    margin: 14px auto 28px;
    gap: 12px;
}

body[data-ui] .hero-panel,
body[data-ui] .topbar-panel,
body[data-ui] .view-nav,
body[data-ui] .content-panel,
body[data-ui] .login-card,
body[data-ui] .login-side-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: rgba(9, 28, 36, 0.94);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

body[data-ui] .hero-panel::before,
body[data-ui] .topbar-panel::before,
body[data-ui] .content-panel::before,
body[data-ui] .login-card::before,
body[data-ui] .login-side-panel::before {
    display: none;
}

body[data-ui] .eyebrow,
body[data-ui] .section-kicker {
    color: var(--accent);
    font-family: var(--mono-font);
    font-size: 11px;
    text-transform: uppercase;
}

body[data-ui] .eyebrow::before,
body[data-ui] .section-kicker::before {
    width: 7px;
    height: 7px;
    background: var(--accent-2);
    box-shadow: 0 0 12px rgba(86, 212, 173, 0.75);
}

body[data-ui="industrial-dashboard"] .hero-panel {
    min-height: 220px;
    grid-template-columns: minmax(0, 1.5fr) minmax(420px, 0.7fr);
    padding: 26px;
    overflow: hidden;
    border-color: var(--line-strong);
    background:
        linear-gradient(100deg, rgba(99, 219, 232, 0.06), transparent 38%),
        rgba(7, 25, 33, 0.97);
}

body[data-ui="industrial-dashboard"] .hero-copy h1 {
    max-width: 18ch;
    margin: 12px 0 12px;
    color: #f1fbfc;
    font-size: clamp(2rem, 3.4vw, 3.35rem);
    font-weight: 750;
    line-height: 1.08;
}

body[data-ui="industrial-dashboard"] .hero-text {
    max-width: 76ch;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

body[data-ui] .hero-tag,
body[data-ui] .note-chip,
body[data-ui] .role-pill {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--muted-strong);
    background: rgba(99, 219, 232, 0.055);
}

body[data-ui="industrial-dashboard"] .hero-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-ui] .hero-stat {
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(13, 43, 52, 0.72);
}

body[data-ui] .hero-stat span {
    color: var(--muted);
    font-size: 11px;
}

body[data-ui] .hero-stat strong {
    margin-top: 8px;
    overflow-wrap: anywhere;
    color: var(--text);
    font-family: var(--mono-font);
    font-size: 14px;
    line-height: 1.45;
}

body[data-ui] .network-stat strong {
    color: var(--accent-2);
}

body[data-ui] .online-indicator {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 10px rgba(86, 212, 173, 0.9);
}

body[data-ui="industrial-dashboard"] .topbar-panel {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 12px 14px;
    background: rgba(8, 26, 34, 0.97);
    box-shadow: none;
}

body[data-ui] .topbar-actions,
body[data-ui] .account-card {
    gap: 7px;
}

body[data-ui] .account-card {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(99, 219, 232, 0.04);
}

body[data-ui] .account-copy strong,
body[data-ui] .account-copy em {
    color: var(--text);
}

body[data-ui] .path-banner {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 11px;
}

body[data-ui] .view-nav {
    position: sticky;
    z-index: 20;
    top: 8px;
    display: flex;
    gap: 4px;
    padding: 8px;
    overflow-x: auto;
    border-color: var(--line-strong);
    background: rgba(6, 20, 27, 0.96);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
}

body[data-ui] .nav-chip {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    white-space: nowrap;
}

body[data-ui] .nav-chip:hover {
    color: var(--text);
    background: rgba(99, 219, 232, 0.06);
}

body[data-ui] .nav-chip.active {
    border-color: var(--line-strong);
    color: var(--accent);
    background: rgba(99, 219, 232, 0.11);
}

body[data-ui] .view-stack {
    gap: 16px;
}

body[data-ui] .view-section {
    animation: industrial-view-in 220ms ease-out;
}

body[data-ui] .section-heading {
    padding: 14px 2px;
    border-bottom: 1px solid var(--line-strong);
}

body[data-ui] .section-heading h2 {
    margin-top: 6px;
    color: var(--text);
    font-size: 1.42rem;
    font-weight: 700;
}

body[data-ui] .section-heading p {
    max-width: 64ch;
    color: var(--muted);
}

body[data-ui] .content-panel {
    padding: 18px;
    box-shadow: none;
}

body[data-ui] .panel-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

body[data-ui] .panel-head h3 {
    color: var(--text);
    font-size: 1rem;
}

body[data-ui] .panel-head span {
    color: var(--muted);
}

body[data-ui] .summary-card,
body[data-ui] .freezer-card,
body[data-ui] .alert-card,
body[data-ui] .status-card,
body[data-ui] .info-card,
body[data-ui] .log-card,
body[data-ui] .validation-card,
body[data-ui] .prefreeze-card,
body[data-ui] .user-card,
body[data-ui] .count-card,
body[data-ui] .data-status-card {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(13, 39, 48, 0.88);
    box-shadow: none;
}

body[data-ui] .summary-card strong,
body[data-ui] .status-card strong,
body[data-ui] .count-card strong {
    color: var(--accent);
    font-family: var(--mono-font);
}

body[data-ui] .primary-button,
body[data-ui] .soft-button {
    min-height: 40px;
    border-radius: 4px;
    box-shadow: none;
}

body[data-ui] .primary-button {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #05151b;
    font-weight: 700;
}

body[data-ui] .primary-button:hover {
    background: #91e8ef;
}

body[data-ui] .soft-button {
    border: 1px solid var(--line);
    background: rgba(99, 219, 232, 0.045);
    color: var(--muted-strong);
}

body[data-ui] .soft-button:hover {
    border-color: var(--line-strong);
    color: var(--accent);
    background: rgba(99, 219, 232, 0.09);
}

body[data-ui] .danger-button {
    border-color: rgba(255, 118, 92, 0.28);
    color: #ff9a86;
    background: rgba(255, 118, 92, 0.06);
}

body[data-ui] input,
body[data-ui] select,
body[data-ui] textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 4px;
    outline: 0;
    background: rgba(3, 15, 21, 0.7);
    color: var(--text);
}

body[data-ui] input:hover,
body[data-ui] select:hover,
body[data-ui] textarea:hover,
body[data-ui] input:focus,
body[data-ui] select:focus,
body[data-ui] textarea:focus {
    border-color: var(--line-strong);
}

body[data-ui] select option {
    background: #0b2029;
    color: var(--text);
}

body[data-ui] label span {
    color: var(--muted);
}

body[data-ui] .table-wrap {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(4, 17, 23, 0.55);
}

body[data-ui] table {
    color: var(--text);
}

body[data-ui] th {
    background: #0b2731;
    color: var(--accent);
    font-family: var(--mono-font);
    font-size: 11px;
}

body[data-ui] td {
    border-color: var(--line);
    color: #d6e8ea;
}

body[data-ui] tbody tr:hover td {
    background: rgba(99, 219, 232, 0.045);
}

body[data-ui] .toast {
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #0d2c35;
    color: var(--text);
    box-shadow: var(--shadow);
}

body[data-ui] .freezer-zoom-backdrop {
    background: rgba(0, 7, 10, 0.84);
}

body[data-ui] .freezer-zoom-dialog {
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #081b23;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

body[data-ui] .inventory-schematic,
body[data-ui] .blueprint-board,
body[data-ui] .inventory-clarity-board,
body[data-ui] .tsx-overview-board,
body[data-ui] .room-layout-map {
    border-color: var(--line);
    border-radius: 6px;
    background-color: rgba(6, 23, 30, 0.9);
}

body[data-ui] .blueprint-metric,
body[data-ui] .inventory-clarity-metric,
body[data-ui] .tsx-overview-card,
body[data-ui] .blueprint-footer-note {
    border-color: var(--line);
    border-radius: 5px;
    background: rgba(13, 39, 48, 0.9);
    color: var(--text);
}

body[data-ui="industrial-login"] {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

body[data-ui="industrial-login"] .login-shell {
    width: min(1160px, calc(100vw - 36px));
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 440px);
    align-items: stretch;
    gap: 0;
    margin: 40px auto;
}

body[data-ui="industrial-login"] .login-side-panel,
body[data-ui="industrial-login"] .login-card {
    border-radius: 0;
}

body[data-ui="industrial-login"] .login-side-panel {
    display: grid;
    align-content: center;
    gap: 28px;
    padding: clamp(32px, 6vw, 72px);
    border-right: 0;
    background:
        linear-gradient(120deg, rgba(99, 219, 232, 0.08), transparent 42%),
        rgba(6, 23, 30, 0.97);
}

body[data-ui="industrial-login"] .login-card {
    display: grid;
    align-content: center;
    padding: 42px;
    border-color: var(--line-strong);
    background: rgba(10, 32, 41, 0.98);
}

body[data-ui="industrial-login"] .temperature-dial {
    position: relative;
    width: 132px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    box-shadow: inset 0 0 0 13px rgba(99, 219, 232, 0.025), 0 0 42px rgba(99, 219, 232, 0.08);
}

body[data-ui="industrial-login"] .temperature-dial::before,
body[data-ui="industrial-login"] .temperature-dial::after {
    content: "";
    position: absolute;
    inset: 13px;
    border: 1px dashed rgba(99, 219, 232, 0.28);
    border-radius: 50%;
    animation: industrial-orbit 18s linear infinite;
}

body[data-ui="industrial-login"] .temperature-dial::after {
    inset: 29px;
    border-style: solid;
    border-color: rgba(86, 212, 173, 0.25);
    animation-direction: reverse;
}

body[data-ui="industrial-login"] .dial-value {
    color: var(--accent);
    font: 700 2rem/1 var(--mono-font);
}

body[data-ui="industrial-login"] .dial-unit {
    color: var(--muted);
    font: 11px/1 var(--mono-font);
    text-align: right;
}

body[data-ui="industrial-login"] .login-system-copy h1 {
    margin: 10px 0 14px;
    color: #f0fbfc;
    font-size: clamp(2.5rem, 5.2vw, 4.8rem);
    line-height: 1.08;
}

body[data-ui="industrial-login"] .login-system-copy > p:last-child {
    max-width: 44ch;
    color: var(--muted);
    line-height: 1.7;
}

body[data-ui="industrial-login"] .cold-status-rail {
    border-top: 1px solid var(--line);
}

body[data-ui="industrial-login"] .cold-status-rail > div {
    min-height: 46px;
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
}

body[data-ui="industrial-login"] .cold-status-rail small {
    color: var(--muted);
}

body[data-ui="industrial-login"] .cold-status-rail strong {
    color: var(--text);
    font: 12px/1.3 var(--mono-font);
}

body[data-ui="industrial-login"] .status-light {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 10px var(--accent-2);
}

body[data-ui="industrial-login"] .rail-index {
    color: var(--accent);
    font: 10px/1 var(--mono-font);
}

body[data-ui="industrial-login"] .login-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

body[data-ui="industrial-login"] .login-card h2 {
    margin: 7px 0 0;
    color: var(--text);
    font-size: 1.45rem;
}

body[data-ui="industrial-login"] .security-stamp {
    padding: 7px 8px;
    border: 1px solid rgba(86, 212, 173, 0.3);
    border-radius: 3px;
    color: var(--accent-2);
    font: 10px/1 var(--mono-font);
}

body[data-ui="industrial-login"] .login-copy {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

body[data-ui="industrial-login"] .login-form {
    gap: 17px;
    margin-top: 24px;
}

body[data-ui="industrial-login"] .login-form input {
    height: 48px;
    margin-top: 8px;
    font-family: var(--mono-font);
}

body[data-ui="industrial-login"] .login-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 14px;
}

body[data-ui="industrial-login"] .login-alert {
    margin-top: 18px;
    border: 1px solid rgba(255, 118, 92, 0.28);
    border-radius: 4px;
    background: rgba(255, 118, 92, 0.07);
    color: #ff9a86;
}

body[data-ui="industrial-login"] .login-hint {
    display: grid;
    gap: 6px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(99, 219, 232, 0.04);
}

body[data-ui="industrial-login"] .login-hint strong {
    color: var(--muted);
    font-size: 11px;
}

body[data-ui="industrial-login"] .login-hint span {
    color: var(--text);
    font: 12px/1.4 var(--mono-font);
}

body[data-ui="industrial-login"] .login-security-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font: 10px/1 var(--mono-font);
}

@keyframes industrial-view-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes industrial-orbit {
    to { transform: rotate(360deg); }
}

@media (max-width: 1040px) {
    body[data-ui="industrial-dashboard"] .hero-panel {
        grid-template-columns: 1fr;
    }

    body[data-ui="industrial-dashboard"] .hero-aside {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body[data-ui="industrial-login"] .login-shell {
        grid-template-columns: 1fr;
    }

    body[data-ui="industrial-login"] .login-side-panel {
        min-height: 420px;
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }
}

@media (max-width: 820px) {
    body[data-ui="industrial-dashboard"] .app-shell {
        width: min(100% - 16px, 1600px);
        margin-top: 8px;
    }

    body[data-ui="industrial-dashboard"] .hero-panel {
        min-height: 0;
        padding: 18px;
    }

    body[data-ui="industrial-dashboard"] .hero-copy h1 {
        font-size: 2rem;
    }

    body[data-ui="industrial-dashboard"] .hero-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-ui] .topbar-panel {
        grid-template-columns: 1fr;
    }

    body[data-ui] .account-card {
        justify-content: space-between;
    }

    body[data-ui] .view-nav {
        top: 4px;
    }

    body[data-ui] .content-panel {
        padding: 14px;
    }

    body[data-ui="industrial-login"] .login-shell {
        width: min(100% - 20px, 620px);
        margin: 10px auto;
    }

    body[data-ui="industrial-login"] .login-side-panel,
    body[data-ui="industrial-login"] .login-card {
        padding: 26px 20px;
    }

    body[data-ui="industrial-login"] .login-side-panel {
        min-height: 370px;
    }

    body[data-ui="industrial-login"] .temperature-dial {
        width: 98px;
    }

    body[data-ui="industrial-login"] .login-system-copy h1 {
        font-size: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-ui] .view-section,
    body[data-ui="industrial-login"] .temperature-dial::before,
    body[data-ui="industrial-login"] .temperature-dial::after {
        animation: none;
    }
}

/* Cold-room perimeter plan: compact, ordered and readable at control-room distance. */
body[data-ui="industrial-dashboard"] .blueprint-stage {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #071a22;
}

body[data-ui="industrial-dashboard"] .blueprint-shell {
    min-height: 760px;
    border: 1px solid rgba(99, 219, 232, 0.32);
    border-radius: 6px;
    background:
        linear-gradient(rgba(99, 219, 232, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 219, 232, 0.035) 1px, transparent 1px),
        #06171e;
    background-size: 32px 32px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

body[data-ui="industrial-dashboard"] .blueprint-shell::before {
    inset: 18px;
    border: 1px solid rgba(99, 219, 232, 0.14);
    border-radius: 4px;
}

body[data-ui="industrial-dashboard"] .blueprint-grid {
    display: none;
}

body[data-ui="industrial-dashboard"] .blueprint-zone-label {
    position: absolute;
    z-index: 1;
    padding: 4px 7px;
    border: 1px solid rgba(99, 219, 232, 0.14);
    border-radius: 3px;
    color: #6f969d;
    background: rgba(6, 23, 30, 0.9);
    font: 9px/1.2 var(--mono-font);
    text-transform: uppercase;
    pointer-events: none;
}

body[data-ui="industrial-dashboard"] .zone-north {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

body[data-ui="industrial-dashboard"] .zone-east {
    top: 50%;
    right: 4px;
    transform: translateY(-50%) rotate(90deg);
}

body[data-ui="industrial-dashboard"] .zone-south {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

body[data-ui="industrial-dashboard"] .zone-west {
    top: 50%;
    left: 4px;
    transform: translateY(-50%) rotate(-90deg);
}

body[data-ui="industrial-dashboard"] .blueprint-core {
    width: 31%;
    height: 42%;
    align-content: center;
    gap: 9px;
    padding: 24px;
    border: 1px dashed rgba(99, 219, 232, 0.28);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(99, 219, 232, 0.035), transparent),
        rgba(4, 17, 23, 0.82);
    box-shadow: inset 0 0 32px rgba(99, 219, 232, 0.025);
}

body[data-ui="industrial-dashboard"] .blueprint-core small {
    color: var(--accent-2);
    font: 9px/1 var(--mono-font);
    text-transform: uppercase;
}

body[data-ui="industrial-dashboard"] .blueprint-core strong {
    color: var(--text);
    font-size: 1rem;
}

body[data-ui="industrial-dashboard"] .blueprint-core span {
    max-width: 18ch;
    color: var(--muted);
    font-size: 11px;
}

body[data-ui="industrial-dashboard"] .blueprint-core i {
    color: var(--accent);
    font: normal 22px/1 var(--mono-font);
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-node,
body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-left,
body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-right {
    width: 148px;
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-body,
body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-left .blueprint-freezer-body,
body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-right .blueprint-freezer-body {
    height: 106px;
    border-color: rgba(99, 219, 232, 0.2);
    border-radius: 5px;
    background: #0d2933;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-node:hover .blueprint-freezer-body {
    border-color: rgba(99, 219, 232, 0.58);
    background: #12343e;
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-temp {
    border-radius: 3px;
    background: #123943;
    color: var(--accent);
    box-shadow: none;
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-head strong,
body[data-ui="industrial-dashboard"] .blueprint-freezer-name,
body[data-ui="industrial-dashboard"] .blueprint-freezer-foot em {
    color: var(--text);
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-head span {
    color: #7da3aa;
}

body[data-ui="industrial-dashboard"] .blueprint-shelf {
    border-radius: 3px;
    border-color: rgba(99, 219, 232, 0.12);
    background: #0a2029;
}

body[data-ui="industrial-dashboard"] .blueprint-shelf.empty {
    border-color: rgba(137, 169, 175, 0.16);
    background: #0a2029;
}

body[data-ui="industrial-dashboard"] .blueprint-shelf.filled,
body[data-ui="industrial-dashboard"] .blueprint-shelf.tone-cyan,
body[data-ui="industrial-dashboard"] .blueprint-shelf.tone-violet,
body[data-ui="industrial-dashboard"] .blueprint-shelf.tone-amber,
body[data-ui="industrial-dashboard"] .blueprint-shelf.tone-mint,
body[data-ui="industrial-dashboard"] .blueprint-shelf.tone-rose {
    border-color: rgba(86, 212, 173, 0.28);
    background: rgba(86, 212, 173, 0.14);
}

body[data-ui="industrial-dashboard"] .blueprint-shelf.validated-only {
    border-color: rgba(244, 179, 95, 0.38);
    background: rgba(244, 179, 95, 0.09);
}

body[data-ui="industrial-dashboard"] .blueprint-shelf span,
body[data-ui="industrial-dashboard"] .blueprint-shelf b {
    color: #c9dcdf;
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-node.is-open .blueprint-freezer-body {
    border-color: rgba(86, 212, 173, 0.35);
    background: #0d2c2e;
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-node.is-tight .blueprint-freezer-body {
    border-color: rgba(244, 179, 95, 0.45);
    background: #30281d;
}

body[data-ui="industrial-dashboard"] .blueprint-freezer-node.is-blocked .blueprint-freezer-body {
    border-color: rgba(137, 169, 175, 0.24);
    background: #18242a;
}

/* Freezer layer cards need dark-theme-native contrast, not the legacy pale tiles. */
body[data-ui="industrial-dashboard"] .layer-cell {
    border-color: rgba(99, 219, 232, 0.2);
    border-radius: 5px;
    background: #0a2029;
    color: #eaf6f7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body[data-ui="industrial-dashboard"] .layer-cell.used {
    border-color: rgba(86, 212, 173, 0.42);
    background: #12373a;
}

body[data-ui="industrial-dashboard"] .layer-cell.empty {
    border-color: rgba(137, 169, 175, 0.3);
    background: #10242c;
}

body[data-ui="industrial-dashboard"] .layer-cell.approximate {
    outline-color: rgba(244, 179, 95, 0.55);
}

body[data-ui="industrial-dashboard"] .layer-index {
    color: #79e5ef;
    font-family: var(--mono-font);
}

body[data-ui="industrial-dashboard"] .layer-main {
    color: #c5dadd;
}

body[data-ui="industrial-dashboard"] .layer-main b {
    color: #f3fbfc;
    font-weight: 700;
}

body[data-ui="industrial-dashboard"] .layer-main em {
    color: #a9c4c9;
    font-family: var(--mono-font);
    font-size: 11px;
}

body[data-ui="industrial-dashboard"] .layer-cell.empty .layer-main {
    color: #b3c8cc;
    font-weight: 600;
}

@media (max-width: 1200px) {
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node,
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-left,
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-right {
        width: 132px;
    }
}

@media (max-width: 1040px) {
    body[data-ui="industrial-dashboard"] .blueprint-shell {
        min-height: 760px;
    }

    body[data-ui="industrial-dashboard"] .blueprint-map {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    body[data-ui="industrial-dashboard"] .blueprint-core {
        width: 30%;
        height: 38%;
        padding: 18px;
    }

    body[data-ui="industrial-dashboard"] .blueprint-freezer-node,
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-left,
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-right {
        width: 116px;
    }
}

@media (max-width: 820px) {
    body[data-ui="industrial-dashboard"] .blueprint-shell {
        min-width: 760px;
        min-height: 760px;
    }

    body[data-ui="industrial-dashboard"] .blueprint-map {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    body[data-ui="industrial-dashboard"] .blueprint-freezer-node,
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-left,
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-right {
        width: 104px;
        transform: translate(-50%, -50%);
    }

    body[data-ui="industrial-dashboard"] .blueprint-freezer-node:hover,
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-left:hover,
    body[data-ui="industrial-dashboard"] .blueprint-freezer-node.side-right:hover {
        transform: translate(-50%, -50%) scale(1.02);
    }
}