/* Design tokens derived from the panel SVG palette. */
:root {
    --color-bg: #0e1013;
    --color-surface: #15181c;
    --color-border: #2b3038;
    --color-text: #f6f7f8;
    --color-text-muted: #9aa0a7;
    --color-accent: #4fd0c9;
    --color-normal: #2f9e44;
    --color-warning: #e8c33a;
    --color-critical: #d6403a;
    --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Consolas", monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

.app-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 20px 28px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.app-header__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.app-header__subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    letter-spacing: 1px;
}

.app-header__status {
    font-size: 13px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 12px 28px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-muted);
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.legend__dot--normal {
    background: var(--color-normal);
}

.legend__dot--warning {
    background: var(--color-warning);
}

.legend__dot--critical {
    background: var(--color-critical);
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 28px;
    align-items: start;
}

.panel {
    background: transparent;
    transition: transform 0.15s ease;
}

.panel:hover {
    transform: translateY(-2px);
}

.panel-svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

@media (max-width: 600px) {
    .panel-grid {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }

    .app-header,
    .legend {
        padding-left: 16px;
        padding-right: 16px;
    }
}