#app-content {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    font-weight: 400;
    color: #1f2a37;
    background:
        radial-gradient(circle at 5% 0%, rgb(191 219 254 / 35%), transparent 34%),
        radial-gradient(circle at 95% 8%, rgb(14 165 233 / 12%), transparent 24%),
        #f5f8fc;
}

.portfolio-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 0 24px;
}

#header-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    padding: 24px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
    background: rgb(255 255 255 / 92%);
    border: 1px solid #e4ebf5;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgb(15 23 42 / 6%);
}

.panel-title {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
}

.sector-grid {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e4ebf5;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.sector-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.sector-title-row {
    margin-bottom: 2px;
}

.sector-constraints-card {
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    background: #fcfdff;
    padding: 10px;
}

.quick-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.quick-actions-label {
    font-size: 0.84rem;
    color: #516174;
    font-weight: 600;
}

.quick-actions-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-action-btn {
    border: 1px solid #d5ddeb;
    color: #304255;
}

.sector-header {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    color: #4f5f72;
    letter-spacing: 0.02em;
}

.sector-name {
    font-size: 0.92rem;
    color: #20303f;
}

.generate-button {
    width: 260px;
    box-shadow: 0 6px 16px rgb(13 110 253 / 22%);
}

.status-text {
    font-size: 0.9rem;
    color: #44566a;
    background: #f2f7ff;
    border: 1px solid #dbe7fb;
    border-radius: 8px;
    padding: 8px 10px;
}

.kpi-row {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.kpi-card {
    flex: 1;
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    padding: 14px;
    background: #fff;
}

.kpi-label {
    font-size: 0.8rem;
    color: #62758b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #0f274a;
}

.kpi-sm-value {
    font-size: 1.15rem;
}

.kpi-compact {
    padding: 10px 12px;
}

.kpi-row-top {
    padding: 0;
    max-width: none;
    margin: 0;
}

input {
    margin-top: 8px;
    margin-bottom: 5px;
    border-radius: 6px;
    background: #fbfbfb;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px #dbe2ec, 0 1px 2px 0 rgb(0 0 0 / 4%);
}

input:focus {
    border: 2px solid #2a6be2;
    border-radius: 4px;
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px 24px;
    box-sizing: border-box;
}

.table_child {
    width: 100% !important;
}

.chart_child {
    width: 100%;
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    padding: 8px;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.stats-card {
    background: #fff;
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    padding: 12px;
}

.stats-title {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #1c314f;
}

button {
    font-weight: 600;
}

@media (max-width: 900px) {
    .results-grid {
        grid-template-columns: 1fr;
    }

    .kpi-row {
        flex-direction: column;
    }

    .kpi-row-top {
        flex-direction: column;
    }

    .generate-button {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions-row {
        flex-direction: column;
        align-items: flex-start;
    }
}