* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
    background-color: #1a1209;
    color: #f0d9b5;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    line-height: 1.65;
}

/* Scanline */
.scanline {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(201,123,58,0.15);
    z-index: 9999;
    pointer-events: none;
    animation: scanline 8s linear infinite;
}

@keyframes scanline {
    0% { top: -1px; }
    100% { top: 100vh; }
}

/* Dashboard Grid */
.dashboard {
    display: grid;
    grid-template-columns: 280px 1fr 260px;
    grid-template-rows: 56px 1fr auto 48px;
    grid-template-areas:
        "nav nav nav"
        "sector main status"
        "sector main diag"
        "footer footer footer";
    height: 100vh;
    gap: 0;
}

/* Panel Base */
.panel {
    border: 4px solid #0d0a05;
    background: #1a1209;
    position: relative;
    box-shadow: 6px 6px 0px #0d0a05;
    transition: box-shadow 0ms, transform 0ms;
}

.panel:hover {
    box-shadow: 3px 3px 0px #0d0a05;
    transform: translate(3px, 3px);
}

.panel:active {
    box-shadow: none;
    transform: translate(6px, 6px);
}

/* Panel Header Tab */
.panel-header-tab {
    position: absolute;
    top: 8px;
    left: -12px;
    background: #e8621a;
    color: #1a1209;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    padding: 2px 10px;
    border: 3px solid #0d0a05;
    z-index: 3;
}

.rotated-label {
    transform: rotate(-2deg);
}

/* Nav Panel */
.panel-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 24px;
    background: #2d1f0e;
}

.nav-system {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: #e8621a;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.nav-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #c97b3a;
}

.nav-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #c97b3a;
    margin-left: auto;
}

/* Sector Panel */
.panel-sector {
    grid-area: sector;
    overflow-y: auto;
    padding: 40px 16px 16px;
}

.sector-list {
    list-style: none;
    margin-top: 8px;
}

.sector-item {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #c97b3a;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #2d1f0e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sector-item:hover {
    background: #e8621a;
    color: #1a1209;
}

.sector-item.active {
    background: #e8621a;
    color: #1a1209;
}

/* Status LEDs */
.status-led {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #0d0a05;
    flex-shrink: 0;
}

.led-operational { background: #c97b3a; }
.led-critical { background: #e8621a; }
.led-offline { background: #3d2a14; }

/* Ring Diagram */
.ring-diagram {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.ring-svg {
    width: 160px;
    height: 160px;
    animation: spin 120s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Leather Panel Texture */
.leather-panel {
    background-color: #3d2a14;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%233d2a14'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23352510' opacity='0.4'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(90,61,30,0.3) 25%, transparent 25%),
        linear-gradient(225deg, rgba(90,61,30,0.3) 25%, transparent 25%);
    background-size: 4px 4px, 8px 8px, 8px 8px;
}

/* Main Panel */
.panel-main {
    grid-area: main;
    overflow-y: auto;
    padding: 24px 32px;
    position: relative;
}

.main-content {
    opacity: 0;
    transition: opacity 300ms ease-out;
}

.main-content.visible {
    opacity: 1;
}

/* Skeleton */
.skeleton-overlay {
    position: absolute;
    top: 24px;
    left: 32px;
    right: 32px;
    z-index: 2;
    transition: opacity 300ms ease-out;
}

.skeleton-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.skeleton-block {
    background: linear-gradient(90deg, #3d2a14 25%, #5a3d1e 50%, #3d2a14 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
    border: 4px solid #0d0a05;
    border-radius: 0;
    margin-bottom: 16px;
}

.skeleton-title {
    height: 48px;
    width: 60%;
}

.skeleton-text {
    height: 20px;
    width: 100%;
}

.skeleton-text.short {
    width: 45%;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Sector Reports */
.sector-report {
    display: none;
    padding-bottom: 40px;
}

.sector-report.active {
    display: block;
}

.sector-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f0d9b5;
    margin-bottom: 16px;
    border-bottom: 3px solid #e8621a;
    padding-bottom: 12px;
}

.telemetry {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #c97b3a;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.data-label {
    color: #5a3d1e;
}

.data-value {
    color: #c97b3a;
}

.data-value.critical {
    color: #e8621a;
}

.narrative {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    line-height: 1.65;
    color: #f0d9b5;
    margin-bottom: 16px;
}

/* Status Panel */
.panel-status {
    grid-area: status;
    padding: 40px 16px 16px;
    overflow-y: auto;
}

.status-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 700;
    color: #f0d9b5;
    margin-bottom: 12px;
    margin-top: 16px;
}

.status-title:first-of-type {
    margin-top: 0;
}

/* Atmospheric Bars */
.atmo-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.atmo-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.atmo-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #c97b3a;
    width: 32px;
}

.bar-track {
    flex: 1;
    height: 16px;
    border: 3px solid #0d0a05;
    background: #2d1f0e;
}

.bar-fill {
    height: 100%;
    transition: width 300ms ease-out;
}

.unknown-pulse {
    animation: pulse-unknown 2s infinite;
}

@keyframes pulse-unknown {
    0%, 100% { background-color: #e8621a; }
    50% { background-color: #5a3d1e; }
}

.atmo-pct {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #c97b3a;
    width: 28px;
    text-align: right;
}

/* Status Readouts */
.status-readouts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.readout {
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #2d1f0e;
}

.readout-label { color: #5a3d1e; }
.readout-value { color: #c97b3a; }

/* Diagnostics Panel */
.panel-diag {
    grid-area: diag;
    padding: 40px 16px 16px;
    overflow-y: auto;
    transform: translate(4px, -3px);
    z-index: 2;
}

/* Integrity Grid */
.integrity-grid {
    display: grid;
    grid-template-columns: repeat(12, 16px);
    grid-template-rows: repeat(4, 16px);
    gap: 3px;
    margin-bottom: 16px;
}

.integrity-cell {
    width: 16px;
    height: 16px;
    border: 2px solid #0d0a05;
}

.cell-intact { background: #c97b3a; }
.cell-stressed { background: #e8621a; }
.cell-destroyed { background: #3d2a14; }
.cell-nodata { background: #0d0a05; }

/* Diagnostic Log */
.diag-log {
    max-height: 200px;
    overflow-y: auto;
}

.log-entry {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #c97b3a;
    padding: 3px 0;
    border-bottom: 1px solid #2d1f0e;
    line-height: 1.4;
}

.log-time {
    color: #5a3d1e;
}

.log-skeleton {
    background: linear-gradient(90deg, #3d2a14 25%, #5a3d1e 50%, #3d2a14 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
    height: 14px;
    width: 80%;
    margin: 3px 0;
}

/* Footer */
.panel-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #2d1f0e;
}

.footer-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #5a3d1e;
    letter-spacing: 0.05em;
}

/* Tooltip for destroyed cells */
.integrity-tooltip {
    position: absolute;
    background: #2d1f0e;
    border: 3px solid #0d0a05;
    padding: 8px 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #c97b3a;
    z-index: 100;
    pointer-events: none;
}

.integrity-tooltip .skeleton-loading {
    width: 120px;
    height: 12px;
    background: linear-gradient(90deg, #3d2a14 25%, #5a3d1e 50%, #3d2a14 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
}

/* Mobile */
@media (max-width: 767px) {
    .dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: 56px 48px 1fr 56px;
        grid-template-areas:
            "nav"
            "sector"
            "main"
            "footer";
    }

    .panel-status, .panel-diag {
        display: none;
    }

    .panel-sector {
        padding: 0 8px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    .panel-header-tab {
        display: none;
    }

    .sector-list {
        display: flex;
        gap: 0;
    }

    .sector-item {
        white-space: nowrap;
        border-bottom: none;
        border-right: 1px solid #2d1f0e;
    }

    .ring-diagram {
        display: none;
    }

    .panel-main {
        overflow-y: auto;
    }

    .sector-title {
        font-size: 28px;
    }
}