/* ===========================
   Dashboard Layout
   =========================== */

.dashboard-container {
    max-width: var(--hydron-max-width-lg);
    margin: 0 auto;
    padding: var(--hydron-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--hydron-space-md);
}

/* ===========================
   Dashboard Header
   =========================== */

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hydron-space-md) var(--hydron-space-xl);
    gap: var(--hydron-space-md);
    flex-wrap: wrap;
}

.dashboard-brand {
    display: flex;
    align-items: center;
    gap: var(--hydron-space-sm);
    font-weight: 600;
}

.os-label {
    color: var(--hydron-accent);
    font-size: var(--hydron-font-size-sm);
    letter-spacing: 0.1em;
}

.dash-divider {
    color: var(--hydron-text-muted);
}

.dashboard-modes {
    display: flex;
    gap: 2px;
    background: var(--hydron-bg-card);
    border-radius: var(--hydron-radius);
    padding: 3px;
    border: 1px solid var(--hydron-border);
}

.mode-btn {
    font-family: var(--hydron-font-mono);
    font-size: var(--hydron-font-size-xs);
    font-weight: 500;
    padding: 8px 18px;
    border: none;
    border-radius: var(--hydron-radius-sm);
    background: transparent;
    color: var(--hydron-text-secondary);
    cursor: pointer;
    transition: all var(--hydron-transition);
}

.mode-btn:hover {
    color: var(--hydron-text);
    background: var(--hydron-bg-glass);
}

.mode-btn.active {
    background: var(--hydron-accent);
    color: var(--hydron-text-inverse);
}

.dashboard-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-text-secondary);
}

/* ===========================
   System Overview Strip
   =========================== */

.system-overview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hydron-space-lg);
    padding: var(--hydron-space-sm) var(--hydron-space-xl);
    background: var(--hydron-bg-card);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.overview-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.overview-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--hydron-text-muted);
}

.overview-value {
    font-size: var(--hydron-font-size-xs);
    font-weight: 600;
    color: var(--hydron-text);
}

.overview-ai-active {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--hydron-accent);
}

.overview-divider {
    width: 1px;
    height: 20px;
    background: var(--hydron-border);
    flex-shrink: 0;
}

/* ===========================
   Zone Grid
   =========================== */

.zone-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hydron-space-md);
    min-height: 240px;
}

.zone-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hydron-space-md);
    padding: var(--hydron-space-3xl);
    color: var(--hydron-text-muted);
}

/* ===========================
   Zone Card — Redesigned
   =========================== */

.zone-card {
    background: var(--hydron-bg-card);
    backdrop-filter: var(--hydron-glass-blur);
    -webkit-backdrop-filter: var(--hydron-glass-blur);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-lg);
    padding: var(--hydron-space-lg);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.zone-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--hydron-accent), var(--hydron-accent-blue));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.zone-card:hover {
    border-color: var(--hydron-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.zone-card:hover::before {
    opacity: 0.6;
}

.zone-card.selected {
    border-color: var(--hydron-accent);
    box-shadow: 0 0 0 1px var(--hydron-accent), 0 8px 32px rgba(0, 155, 58, 0.1);
}

.zone-card.selected::before {
    opacity: 1;
}

/* Zone Header */
.zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--hydron-space-md);
}

.zone-name {
    font-size: var(--hydron-font-size-sm);
    font-weight: 600;
    color: var(--hydron-text);
    margin: 0;
}

.zone-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--hydron-font-mono);
    font-size: 10px;
    color: var(--hydron-text-secondary);
    background: var(--hydron-bg-glass);
    padding: 3px 8px;
    border-radius: var(--hydron-radius-full);
}

/* Primary reading — big number */
.zone-primary {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: var(--hydron-space-sm);
}

.zone-temp {
    font-family: var(--hydron-font-mono);
    font-size: var(--hydron-font-size-2xl);
    font-weight: 700;
    color: var(--hydron-text);
    line-height: 1;
    transition: color 0.5s ease;
}

.zone-temp-unit {
    font-family: var(--hydron-font-mono);
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-text-muted);
}

.zone-temp.updating {
    color: var(--hydron-accent);
}

/* Metrics Row */
.zone-metrics {
    display: flex;
    gap: var(--hydron-space-md);
    margin-bottom: var(--hydron-space-md);
    padding-bottom: var(--hydron-space-sm);
    border-bottom: 1px solid var(--hydron-border);
}

.zone-metric {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.zone-label {
    font-family: var(--hydron-font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hydron-text-muted);
}

.zone-value {
    font-family: var(--hydron-font-mono);
    font-size: var(--hydron-font-size-xs);
    font-weight: 600;
    color: var(--hydron-text-secondary);
    transition: color 0.5s ease;
}

.zone-value.updating {
    color: var(--hydron-accent);
}

/* Plant + Stage */
.zone-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hydron-space-sm);
}

.zone-plant {
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-text-secondary);
    font-weight: 500;
}

.zone-stage {
    font-family: var(--hydron-font-mono);
    font-size: 10px;
    color: var(--hydron-accent);
    background: var(--hydron-accent-light);
    padding: 2px 8px;
    border-radius: var(--hydron-radius-full);
    border: 1px solid rgba(0, 155, 58, 0.12);
}

/* Mini sparkline area */
.zone-sparkline {
    height: 24px;
    margin-bottom: var(--hydron-space-sm);
    position: relative;
}

.zone-sparkline canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Progress bar */
.zone-progress {
    margin-top: auto;
}

.zone-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--hydron-border);
    border-radius: 2px;
    overflow: hidden;
}

.zone-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hydron-accent), var(--hydron-accent-blue));
    border-radius: 2px;
    transition: width 1s ease;
}

.zone-progress-text {
    display: flex;
    justify-content: space-between;
    font-family: var(--hydron-font-mono);
    font-size: 9px;
    color: var(--hydron-text-muted);
    margin-top: 4px;
}

/* Digital Twin (smaller) */
.zone-twin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--hydron-space-xs);
}

.zone-twin .zone-value {
    font-size: 9px;
    color: var(--hydron-text-muted);
}

/* ===========================
   Dashboard Bottom Layout
   =========================== */

.dashboard-bottom {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--hydron-space-md);
}

/* ===========================
   Activity Feed
   =========================== */

.activity-feed {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow: hidden;
}

.feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hydron-space-md) var(--hydron-space-lg);
    border-bottom: 1px solid var(--hydron-border);
}

.feed-title {
    font-size: var(--hydron-font-size-xs);
    letter-spacing: 0.08em;
    color: var(--hydron-text-secondary);
    text-transform: uppercase;
}

.feed-entries {
    flex: 1;
    overflow-y: auto;
    padding: var(--hydron-space-sm) 0;
}

.feed-entry {
    display: flex;
    gap: var(--hydron-space-sm);
    padding: 6px var(--hydron-space-lg);
    font-size: var(--hydron-font-size-xs);
    line-height: 1.5;
    animation: feedSlide 0.3s ease;
}

@keyframes feedSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.feed-time {
    color: var(--hydron-text-muted);
    font-size: 10px;
    min-width: 32px;
    flex-shrink: 0;
}

.feed-msg {
    color: var(--hydron-text-secondary);
}

.feed-msg .feed-highlight {
    color: var(--hydron-accent);
}

/* ===========================
   AI Panel
   =========================== */

.ai-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hydron-space-md) var(--hydron-space-lg);
    border-bottom: 1px solid var(--hydron-border);
    flex-wrap: wrap;
    gap: var(--hydron-space-sm);
}

.ai-panel-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ai-tab {
    font-family: var(--hydron-font-mono);
    font-size: var(--hydron-font-size-xs);
    font-weight: 500;
    padding: 6px 14px;
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-sm);
    background: transparent;
    color: var(--hydron-text-secondary);
    cursor: pointer;
    transition: all var(--hydron-transition);
}

.ai-tab:hover {
    color: var(--hydron-text);
    border-color: var(--hydron-border-hover);
}

.ai-tab.active {
    color: var(--hydron-accent);
    border-color: var(--hydron-accent);
    background: var(--hydron-accent-light);
}

.ai-source-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--hydron-text-muted);
}

/* AI Content */
.ai-panel-content {
    padding: var(--hydron-space-xl) var(--hydron-space-lg);
    min-height: 160px;
    max-height: 340px;
    overflow-y: auto;
    flex: 1;
}

.ai-placeholder {
    color: var(--hydron-text-muted);
    font-style: italic;
    font-size: var(--hydron-font-size-sm);
}

.ai-loading {
    display: flex;
    align-items: center;
    gap: var(--hydron-space-md);
    color: var(--hydron-text-secondary);
}

.ai-loading .loading-spinner {
    width: 18px;
    height: 18px;
}

.ai-response-text {
    line-height: 1.8;
}

.ai-response-text p {
    margin-bottom: var(--hydron-space-md);
    color: var(--hydron-text-secondary);
    font-size: var(--hydron-font-size-sm);
}

.ai-response-text p:last-child {
    margin-bottom: 0;
}

.ai-response-meta {
    margin-top: var(--hydron-space-md);
    padding-top: var(--hydron-space-md);
    border-top: 1px solid var(--hydron-border);
}

.ai-source {
    font-family: var(--hydron-font-mono);
    font-size: 11px;
    color: var(--hydron-text-muted);
}

.ai-error {
    color: var(--hydron-accent-warm);
}

/* AI Input Bar */
.ai-input-bar {
    display: flex;
    gap: var(--hydron-space-sm);
    padding: var(--hydron-space-md) var(--hydron-space-lg);
    border-top: 1px solid var(--hydron-border);
    background: var(--hydron-bg-card);
}

.ai-input-bar .form-input {
    flex: 1;
    font-size: var(--hydron-font-size-sm);
    padding: 10px 16px;
}

.ai-input-bar .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ===========================
   Garage Farm Grid + Cards
   =========================== */

.zone-grid-garage {
    grid-template-columns: repeat(3, 1fr);
}

.zone-card-garage {
    background: linear-gradient(135deg, var(--hydron-bg-card) 0%, rgba(141, 198, 63, 0.03) 100%);
    border: 1px solid rgba(141, 198, 63, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zone-card-garage::before {
    background: linear-gradient(90deg, var(--hydron-accent-blue), var(--hydron-accent));
}

.zone-card-garage.selected {
    border-color: var(--hydron-accent-blue);
    box-shadow: 0 0 0 1px var(--hydron-accent-blue), 0 8px 32px rgba(141, 198, 63, 0.1);
}

.garage-card-top {
    padding-bottom: var(--hydron-space-sm);
    margin-bottom: var(--hydron-space-sm);
    border-bottom: 1px solid var(--hydron-border);
}

.garage-rack-label {
    display: flex;
    align-items: center;
    gap: var(--hydron-space-sm);
}

.rack-position {
    font-size: var(--hydron-font-size-sm);
    font-weight: 700;
    color: var(--hydron-accent-blue);
    letter-spacing: 0.05em;
}

.rack-type {
    font-size: 10px;
    color: var(--hydron-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(141, 198, 63, 0.08);
    padding: 2px 8px;
    border-radius: var(--hydron-radius-full);
}

.garage-plant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--hydron-space-sm);
}

.garage-plant-name {
    font-size: var(--hydron-font-size-base);
    font-weight: 600;
    color: var(--hydron-text);
}

.garage-sensors {
    display: flex;
    gap: var(--hydron-space-sm);
    padding: var(--hydron-space-sm) 0;
    margin-bottom: var(--hydron-space-sm);
    flex-wrap: wrap;
}

.garage-sensor {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 6px 4px;
    background: var(--hydron-bg-glass);
    border-radius: var(--hydron-radius-sm);
}

.garage-card-bottom {
    display: flex;
    gap: var(--hydron-space-md);
    margin-bottom: var(--hydron-space-sm);
}

.garage-production {
    display: flex;
    flex-direction: column;
    gap: var(--hydron-space-xs);
    flex: 1;
}

.garage-prod-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--hydron-space-sm);
}

.garage-prod-value {
    font-size: var(--hydron-font-size-xs);
    font-weight: 600;
    color: var(--hydron-text-secondary);
}

.garage-revenue-stat {
    padding-top: var(--hydron-space-xs);
    border-top: 1px solid var(--hydron-border);
    margin-top: 2px;
}

.garage-rev-value {
    color: var(--hydron-accent) !important;
    font-weight: 700 !important;
}

.garage-card-bottom .zone-sparkline {
    width: 80px;
    height: 40px;
    flex-shrink: 0;
}

/* ===========================
   Community Greenhouse Grid + Cards
   =========================== */

.zone-grid-greenhouse {
    grid-template-columns: 1fr 1fr;
    gap: var(--hydron-space-sm);
}

.zone-card-greenhouse {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.6fr;
    gap: var(--hydron-space-md);
    align-items: center;
    background: linear-gradient(135deg, var(--hydron-bg-card) 0%, rgba(45, 120, 200, 0.04) 100%);
    border: 1px solid rgba(45, 120, 200, 0.15);
    padding: var(--hydron-space-md) var(--hydron-space-lg);
}

.zone-card-greenhouse::before {
    background: linear-gradient(90deg, rgba(45, 120, 200, 0.8), var(--hydron-accent));
}

.zone-card-greenhouse.selected {
    border-color: rgba(45, 120, 200, 0.6);
    box-shadow: 0 0 0 1px rgba(45, 120, 200, 0.6), 0 8px 32px rgba(45, 120, 200, 0.08);
}

.gh-card-left {
    display: flex;
    flex-direction: column;
    gap: var(--hydron-space-xs);
}

.gh-row-id {
    display: flex;
    align-items: center;
    gap: var(--hydron-space-sm);
}

.gh-row-num {
    font-size: var(--hydron-font-size-sm);
    font-weight: 700;
    color: rgba(45, 120, 200, 0.9);
    letter-spacing: 0.05em;
}

.gh-plant-info {
    display: flex;
    align-items: center;
    gap: var(--hydron-space-sm);
}

.gh-plant-name {
    font-size: var(--hydron-font-size-sm);
    font-weight: 600;
    color: var(--hydron-text);
}

.gh-scale {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--hydron-text-muted);
}

.gh-divider {
    color: var(--hydron-text-muted);
}

.gh-card-center {
    display: flex;
    flex-direction: column;
    gap: var(--hydron-space-xs);
}

.gh-sensor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hydron-space-xs);
}

.gh-sensor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px;
    background: rgba(45, 120, 200, 0.04);
    border-radius: var(--hydron-radius-sm);
}

.gh-sensor-value {
    font-size: var(--hydron-font-size-sm);
    font-weight: 600;
    color: var(--hydron-text);
}

.gh-sensor-value small {
    font-size: 10px;
    color: var(--hydron-text-muted);
}

.gh-sparkline {
    height: 20px;
}

.gh-card-right {
    display: flex;
    flex-direction: column;
    gap: var(--hydron-space-sm);
    align-items: flex-end;
}

.gh-capacity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.gh-capacity-value {
    font-size: var(--hydron-font-size-xl);
    font-weight: 700;
    color: rgba(45, 120, 200, 0.9);
    line-height: 1;
}

.gh-card-right .zone-progress {
    width: 100%;
}

.gh-card-right .zone-progress-fill {
    background: linear-gradient(90deg, rgba(45, 120, 200, 0.6), var(--hydron-accent));
}

/* ===========================
   Garage Revenue Projections
   =========================== */

.garage-revenue {
    padding: var(--hydron-space-xl);
}

.garage-revenue-header {
    text-align: center;
    margin-bottom: var(--hydron-space-xl);
}

.garage-revenue-header .section-label {
    display: inline-block;
    margin-bottom: var(--hydron-space-sm);
}

.garage-revenue-header h3 {
    font-size: var(--hydron-font-size-lg);
    font-weight: 600;
    color: var(--hydron-text);
    margin: 0 0 var(--hydron-space-sm);
}

.garage-revenue-header p {
    color: var(--hydron-text-secondary);
    font-size: var(--hydron-font-size-sm);
}

.garage-revenue-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hydron-space-md);
    margin-bottom: var(--hydron-space-xl);
}

.garage-rev-card {
    background: var(--hydron-bg-glass);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-lg);
    padding: var(--hydron-space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--hydron-space-sm);
}

.garage-rev-card.highlight {
    border-color: var(--hydron-accent);
    box-shadow: var(--hydron-glow-green);
}

.garage-rev-num {
    font-size: var(--hydron-font-size-xl);
    font-weight: 700;
    color: var(--hydron-text);
    line-height: 1.2;
}

.garage-rev-card.highlight .garage-rev-num {
    color: var(--hydron-accent);
}

.garage-rev-label {
    font-size: var(--hydron-font-size-xs);
    font-weight: 600;
    color: var(--hydron-text-secondary);
}

.garage-rev-desc {
    font-size: 12px;
    color: var(--hydron-text-muted);
    line-height: 1.5;
}

.garage-rev-crops {
    display: flex;
    flex-direction: column;
    gap: var(--hydron-space-md);
    margin-bottom: var(--hydron-space-xl);
}

.garage-crop {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: var(--hydron-space-md);
}

.garage-crop-name {
    font-size: var(--hydron-font-size-sm);
    font-weight: 600;
    color: var(--hydron-text);
}

.garage-crop-bar {
    height: 6px;
    background: var(--hydron-border);
    border-radius: 3px;
    overflow: hidden;
}

.garage-crop-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hydron-accent), var(--hydron-accent-blue));
    border-radius: 3px;
    transition: width 0.8s ease;
}

.garage-crop-detail {
    font-size: 11px;
    color: var(--hydron-text-muted);
    white-space: nowrap;
}

.garage-rev-footer {
    padding-top: var(--hydron-space-md);
    border-top: 1px solid var(--hydron-border);
}

.garage-rev-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--hydron-text-muted);
    justify-content: center;
}

/* ===========================
   Unit Type Selector
   =========================== */

.unit-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hydron-space-sm);
}

.unit-selector-card {
    display: flex;
    align-items: center;
    gap: var(--hydron-space-md);
    padding: var(--hydron-space-md) var(--hydron-space-lg);
    background: var(--hydron-bg-card);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-lg);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--hydron-text-secondary);
    font-family: inherit;
}

.unit-selector-card:hover {
    border-color: var(--hydron-border-hover);
    background: var(--hydron-bg-glass);
}

.unit-selector-card.active {
    border-color: var(--hydron-accent);
    box-shadow: 0 0 0 1px var(--hydron-accent), var(--hydron-glow-green);
    color: var(--hydron-text);
}

.unit-selector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--hydron-radius);
    background: var(--hydron-bg-glass);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.unit-selector-card.active .unit-selector-icon {
    background: var(--hydron-accent-light);
    color: var(--hydron-accent);
}

.unit-selector-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unit-selector-name {
    font-weight: 600;
    font-size: var(--hydron-font-size-sm);
}

.unit-selector-meta {
    font-size: 11px;
    color: var(--hydron-text-muted);
}

/* ===========================
   Food Blockchain Flow
   =========================== */

.blockchain-flow {
    padding: var(--hydron-space-xl);
}

.blockchain-header {
    text-align: center;
    margin-bottom: var(--hydron-space-xl);
}

.blockchain-header .section-label {
    display: inline-block;
    margin-bottom: var(--hydron-space-sm);
}

.blockchain-header h3 {
    font-size: var(--hydron-font-size-lg);
    font-weight: 600;
    color: var(--hydron-text);
    margin: 0;
}

.blockchain-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hydron-space-md);
    margin-bottom: var(--hydron-space-xl);
    flex-wrap: wrap;
}

.blockchain-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hydron-space-sm);
    padding: var(--hydron-space-lg) var(--hydron-space-xl);
    background: var(--hydron-bg-glass);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-lg);
    min-width: 180px;
    text-align: center;
    transition: all 0.3s ease;
}

.blockchain-node:hover {
    border-color: var(--hydron-border-hover);
    transform: translateY(-2px);
}

.blockchain-node-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hydron-radius);
    background: var(--hydron-accent-light);
    color: var(--hydron-accent);
}

.blockchain-node-title {
    font-weight: 600;
    font-size: var(--hydron-font-size-sm);
    color: var(--hydron-text);
}

.blockchain-node-desc {
    font-size: 11px;
    color: var(--hydron-text-muted);
}

.blockchain-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--hydron-accent);
    flex-shrink: 0;
}

.blockchain-arrow-label {
    font-size: 10px;
    color: var(--hydron-text-muted);
    white-space: nowrap;
}

.blockchain-loops {
    margin-bottom: var(--hydron-space-xl);
}

.blockchain-loop-row {
    display: flex;
    justify-content: center;
    gap: var(--hydron-space-xl);
    flex-wrap: wrap;
}

.blockchain-loop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-text-secondary);
}

.blockchain-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hydron-space-md);
    padding-top: var(--hydron-space-lg);
    border-top: 1px solid var(--hydron-border);
}

.blockchain-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.blockchain-stat-value {
    font-size: var(--hydron-font-size-lg);
    font-weight: 700;
    color: var(--hydron-accent);
}

.blockchain-stat-label {
    font-size: 11px;
    color: var(--hydron-text-muted);
}

/* ===========================
   Food Waste Payback
   =========================== */

.food-waste-section {
    padding: var(--hydron-space-xl);
}

.food-waste-header {
    text-align: center;
    margin-bottom: var(--hydron-space-xl);
}

.food-waste-header .section-label {
    display: inline-block;
    margin-bottom: var(--hydron-space-sm);
}

.food-waste-header h3 {
    font-size: var(--hydron-font-size-lg);
    font-weight: 600;
    color: var(--hydron-text);
    margin: 0 0 var(--hydron-space-sm);
}

.food-waste-header p {
    color: var(--hydron-text-secondary);
    font-size: var(--hydron-font-size-sm);
    max-width: 600px;
    margin: 0 auto;
}

.waste-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hydron-space-md);
    margin-bottom: var(--hydron-space-xl);
}

.waste-stat-card {
    background: var(--hydron-bg-glass);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-lg);
    padding: var(--hydron-space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--hydron-space-sm);
}

.waste-stat-card.highlight {
    border-color: var(--hydron-accent);
    box-shadow: var(--hydron-glow-green);
}

.waste-stat-number {
    font-size: var(--hydron-font-size-2xl);
    font-weight: 700;
    color: var(--hydron-text);
    line-height: 1;
}

.waste-stat-card.highlight .waste-stat-number {
    color: var(--hydron-accent);
}

.waste-stat-label {
    font-size: var(--hydron-font-size-xs);
    font-weight: 600;
    color: var(--hydron-text-secondary);
}

.waste-stat-desc {
    font-size: 12px;
    color: var(--hydron-text-muted);
    line-height: 1.5;
}

.waste-explainer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hydron-space-md);
}

.waste-explainer-card {
    background: var(--hydron-bg-glass);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-lg);
    padding: var(--hydron-space-lg);
}

.waste-explainer-num {
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-accent);
    font-weight: 600;
    display: block;
    margin-bottom: var(--hydron-space-sm);
}

.waste-explainer-card h4 {
    font-size: var(--hydron-font-size-sm);
    font-weight: 600;
    color: var(--hydron-text);
    margin: 0 0 var(--hydron-space-sm);
}

.waste-explainer-card p {
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ===========================
   Composting Loop
   =========================== */

.compost-loop-section {
    padding: var(--hydron-space-xl);
}

.compost-loop-header {
    text-align: center;
    margin-bottom: var(--hydron-space-xl);
}

.compost-loop-header .section-label {
    display: inline-block;
    margin-bottom: var(--hydron-space-sm);
}

.compost-loop-header h3 {
    font-size: var(--hydron-font-size-lg);
    font-weight: 600;
    color: var(--hydron-text);
    margin: 0 0 var(--hydron-space-sm);
}

.compost-loop-header p {
    color: var(--hydron-text-secondary);
    font-size: var(--hydron-font-size-sm);
    max-width: 640px;
    margin: 0 auto;
}

.compost-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hydron-space-sm);
    margin-bottom: var(--hydron-space-xl);
    flex-wrap: wrap;
}

.compost-step {
    display: flex;
    align-items: flex-start;
    gap: var(--hydron-space-md);
    background: var(--hydron-bg-glass);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-lg);
    padding: var(--hydron-space-md) var(--hydron-space-lg);
    min-width: 180px;
    flex: 1;
}

.compost-step-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hydron-accent-light);
    color: var(--hydron-accent);
    border-radius: var(--hydron-radius-full);
    font-weight: 700;
    font-size: var(--hydron-font-size-sm);
    flex-shrink: 0;
}

.compost-step-content h4 {
    font-size: var(--hydron-font-size-sm);
    font-weight: 600;
    color: var(--hydron-text);
    margin: 0 0 4px;
}

.compost-step-content p {
    font-size: 12px;
    color: var(--hydron-text-muted);
    line-height: 1.5;
    margin: 0;
}

.compost-step-arrow {
    display: flex;
    align-items: center;
    color: var(--hydron-accent);
    flex-shrink: 0;
}

.compost-takeover-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hydron-space-md);
}

.compost-takeover-card {
    background: var(--hydron-bg-glass);
    border: 1px solid var(--hydron-border);
    border-radius: var(--hydron-radius-lg);
    padding: var(--hydron-space-lg);
}

.compost-takeover-card .tech-label {
    font-family: var(--hydron-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--hydron-accent);
    display: block;
    margin-bottom: var(--hydron-space-sm);
}

.compost-takeover-card h4 {
    font-size: var(--hydron-font-size-sm);
    font-weight: 600;
    color: var(--hydron-text);
    margin: 0 0 var(--hydron-space-sm);
}

.compost-takeover-card p {
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 1200px) {
    .unit-selector {
        grid-template-columns: repeat(3, 1fr);
    }

    .blockchain-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .waste-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .waste-explainer-grid {
        grid-template-columns: 1fr;
    }

    .compost-takeover-grid {
        grid-template-columns: 1fr;
    }

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

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

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

    .zone-card-greenhouse {
        grid-template-columns: 1fr 1.4fr 0.6fr;
    }

    .garage-revenue-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .garage-crop {
        grid-template-columns: 140px 1fr;
    }

    .garage-crop-detail {
        grid-column: 1 / -1;
    }

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

    .activity-feed {
        max-height: 200px;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: var(--hydron-space-md);
    }

    .zone-grid,
    .zone-grid-garage,
    .zone-grid-greenhouse {
        grid-template-columns: 1fr;
    }

    .zone-card-greenhouse {
        grid-template-columns: 1fr;
        gap: var(--hydron-space-sm);
    }

    .gh-card-right {
        align-items: flex-start;
        flex-direction: row;
        gap: var(--hydron-space-md);
    }

    .gh-capacity {
        align-items: flex-start;
    }

    .gh-card-right .zone-progress {
        flex: 1;
    }

    .ai-panel-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .ai-tab {
        flex-shrink: 0;
    }

    .dashboard-modes {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .system-overview {
        gap: var(--hydron-space-md);
        padding: var(--hydron-space-sm) var(--hydron-space-md);
        justify-content: flex-start;
    }

    .dashboard-header {
        justify-content: center;
    }

    .unit-selector {
        grid-template-columns: 1fr;
    }

    .blockchain-diagram {
        flex-direction: column;
    }

    .blockchain-arrow {
        transform: rotate(90deg);
    }

    .blockchain-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .blockchain-loop-row {
        flex-direction: column;
        align-items: center;
    }

    .waste-stats-grid,
    .garage-revenue-grid {
        grid-template-columns: 1fr;
    }

    .garage-crop {
        grid-template-columns: 1fr;
        gap: var(--hydron-space-xs);
    }

    .compost-steps {
        flex-direction: column;
    }

    .compost-step-arrow {
        transform: rotate(90deg);
    }
}