:root {
    --sidebar-width: 250px;
    --brand: #0f766e;
    --brand-dark: #115e59;
    --ink: #1f2937;
    --muted: #6b7280;
    --page: #f4f7f9;
    --line: #e5e7eb;
}

body {
    background: var(--page);
    color: var(--ink);
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: #102a43;
    color: #fff;
    padding: 1rem;
    z-index: 1030;
}

.sidebar-brand {
    font-weight: 700;
    font-size: 1.05rem;
    padding: .75rem .75rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: 1rem;
}

.sidebar-link {
    display: block;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    padding: .75rem;
    border-radius: 8px;
    margin-bottom: .25rem;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.sidebar-link.mobile {
    color: var(--ink);
}

.sidebar-link.mobile:hover,
.sidebar-link.mobile.active {
    background: #eef2f7;
    color: var(--ink);
}

.main-content {
    min-height: 100vh;
}

@media (min-width: 992px) {
    .main-content {
        margin-left: var(--sidebar-width);
    }
}

.content-wrap {
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .content-wrap {
        padding: 1.75rem;
    }
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}

.btn-outline-primary:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.card,
.metric-card,
.latest-card,
.api-box,
.login-card,
.empty-state {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.metric-card {
    padding: 1.25rem;
    border-left: 4px solid var(--brand);
}

.metric-card.accent {
    border-left-color: #2563eb;
}

.metric-label,
.latest-label {
    color: var(--muted);
    font-size: .85rem;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.channel-card .card-body {
    min-height: 160px;
}

.form-card {
    max-width: 920px;
}

.api-box {
    padding: 1rem;
    overflow-wrap: anywhere;
}

.latest-card {
    padding: 1rem;
}

.latest-value {
    font-size: 1.4rem;
    font-weight: 700;
    min-height: 2rem;
    overflow-wrap: anywhere;
}

.latest-value.small-value {
    font-size: 1rem;
    line-height: 1.35;
}

.chart-wrap {
    position: relative;
    height: 360px;
}

.chart-card .card-body {
    min-height: 340px;
}

.multi-chart-wrap {
    height: 300px;
}

.field-select {
    width: min(100%, 260px);
}

.chart-range-form .form-control {
    min-width: 150px;
}

.empty-state {
    padding: 2rem;
    color: var(--muted);
    text-align: center;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #e6fffb 0%, #f8fafc 45%, #eef2ff 100%);
}

.login-card {
    width: min(100%, 420px);
    padding: 2rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .12);
}

code {
    color: #0f766e;
}

.table th {
    color: #475569;
    font-size: .85rem;
    white-space: nowrap;
}