.tes-layout {
    background: linear-gradient(180deg, #f3f7f9 0%, #edf2f7 100%);
}

.tes-header {
    background: linear-gradient(135deg, #113b57 0%, #2d6a8a 100%);
    color: #fff;
    padding: 18px 24px;
    margin-bottom: 16px;
}

.tes-header h1,
.tes-header small {
    color: #fff;
}

.tes-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tes-nav-link {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4ea;
    border-radius: 999px;
    color: #29485a;
    display: inline-flex;
    gap: 8px;
    padding: 9px 16px;
}

.tes-nav-link.active {
    background: #143f5b;
    border-color: #143f5b;
    color: #fff;
}

.tes-card {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(21, 54, 74, 0.08);
}

.tes-kpi {
    background: linear-gradient(145deg, #ffffff 0%, #f2f6f8 100%);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(21, 54, 74, 0.08);
    min-height: 120px;
    padding: 20px;
}

.tes-kpi span,
.tes-summary-grid span {
    color: #5b7080;
    display: block;
    font-size: 0.9rem;
}

.tes-kpi strong,
.tes-summary-grid strong {
    color: #13394f;
    display: block;
    font-size: 1.7rem;
    margin-top: 8px;
}

.tes-summary-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tes-quick-links {
    display: grid;
    gap: 10px;
}

.tes-quick-links a {
    background: #eff5f8;
    border-radius: 12px;
    color: #13394f;
    font-weight: 600;
    padding: 12px 14px;
}

.tes-json-view {
    background: #0f2030;
    border-radius: 12px;
    color: #cfe7ff;
    min-height: 120px;
    padding: 16px;
    white-space: pre-wrap;
    word-break: break-word;
}

.tes-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
}

.tes-badge-p {
    background: #fff4d6;
    color: #8a5b00;
}

.tes-badge-t {
    background: #d9eef9;
    color: #0d5675;
}

.tes-badge-c {
    background: #dff5e8;
    color: #1d6e44;
}

.tes-badge-a {
    background: #f3dce0;
    color: #7a2233;
}

.tes-row-actions .btn {
    margin-right: 6px;
}

@media (max-width: 767px) {
    .tes-header {
        padding: 16px;
    }

    .tes-kpi strong,
    .tes-summary-grid strong {
        font-size: 1.3rem;
    }
}