:root{
        --bg: #f3f1ea;
        --panel: #ffffff;
        --panel-tint: #f7f6f1;
        --border: #64876c;
        --border-soft: #c1cbbf;
        --text: #24332a;
        --muted: #6b7b72;
        --accent: #df9138;
        --success: #2f6a43;
        --shadow: 0 10px 24px rgba(0,0,0,0.06);
        --radius: 14px;
        --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    body{
        font-family: var(--font);
        background: var(--bg);
        color: var(--text);
    }

    .page-wrap{
        padding: 22px 0 48px;
    }

    .topbar{
        background: transparent;
        padding: 10px 0 18px;
        border-bottom: 2px solid rgba(100,135,108,0.25);
        margin-bottom: 22px;
    }

    .brand-title{
        font-size: clamp(22px, 2.2vw, 34px);
        font-weight: 800;
        color: var(--success);
        letter-spacing: 0.2px;
        margin: 0;
        line-height: 1.1;
    }

    .brand-subtitle{
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 0.95rem;
    }

    .topbar-controls{
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .control-select{
        border: 2px solid var(--border);
        border-radius: 10px;
        padding: 6px 10px;
        background: var(--panel);
        color: var(--text);
        font-weight: 600;
        min-width: 140px;
        height: 38px;
    }

    .btn-reset{
        border: 2px solid var(--border);
        border-radius: 10px;
        background: var(--panel);
        color: var(--text);
        font-weight: 700;
        padding: 7px 14px;
        height: 38px;
    }
    .btn-reset:hover{
        background: var(--panel-tint);
    }

    .panel{
        background: var(--panel);
        border: 2px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        height: 100%;
    }

    .panel-header{
        padding: 18px 18px 10px;
        font-weight: 800;
        color: var(--success);
        font-size: 1.05rem;
    }

    .panel-body{
        padding: 14px 18px 18px;
    }

    .form-label{
        font-weight: 800;
        color: var(--text);
        margin-bottom: 6px;
    }

    .form-select, .form-control{
        border: 2px solid rgba(100,135,108,0.45);
        border-radius: 10px;
        padding: 10px 12px;
        background: var(--panel-tint);
        color: var(--text);
        box-shadow: none !important;
    }
    .form-select:focus, .form-control:focus{
        border-color: var(--border);
        outline: none;
        box-shadow: 0 0 0 3px rgba(223,145,56,0.25) !important;
        background: #fff;
    }

    .input-group-text{
        border: 2px solid rgba(100,135,108,0.45);
        border-left: 0;
        border-radius: 0 10px 10px 0;
        background: #fff;
        color: var(--muted);
        font-weight: 700;
        padding: 10px 12px;
    }
    .input-group .form-control{
        border-right: 0;
        border-radius: 10px 0 0 10px;
        background: var(--panel-tint);
    }

    .help-text{
        color: var(--muted);
        font-size: 0.86rem;
        margin-top: 6px;
    }

    .result-row{
        border: 2px solid rgba(100,135,108,0.45);
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: var(--panel-tint);
    }

    .result-row + .result-row{
        margin-top: 12px;
    }

    .result-label{
        font-size: 0.88rem;
        color: var(--muted);
        font-weight: 700;
        letter-spacing: 0.2px;
        text-transform: none;
    }

    .result-value{
        font-size: 1.15rem;
        font-weight: 900;
        color: var(--text);
        white-space: nowrap;
    }

    .pill{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 2px solid rgba(100,135,108,0.45);
        padding: 8px 12px;
        font-weight: 900;
        color: var(--success);
        background: #fff;
        min-width: 110px;
    }

    .summary-box{
        border: 2px solid rgba(100,135,108,0.45);
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff, var(--panel-tint));
        padding: 16px;
        height: 100%;
    }

    .summary-title{
        font-weight: 900;
        color: var(--success);
        margin-bottom: 6px;
        text-transform: none;
        letter-spacing: 0.2px;
    }

    .summary-big{
        font-size: 2.1rem;
        font-weight: 900;
        color: var(--text);
        line-height: 1.05;
    }

    .summary-small{
        color: var(--muted);
        margin-top: 4px;
        font-size: 0.88rem;
    }

    .chart-card{
        border: 2px solid rgba(100,135,108,0.45);
        border-radius: 14px;
        background: #fff;
        padding: 16px;
        height: 100%;
    }

    .table-wrap{
        border-top: 2px solid rgba(100,135,108,0.25);
        background: #fff;
    }

    table.table{
        margin: 0;
    }

    table.table thead th{
        background: var(--panel-tint);
        border-bottom: 2px solid rgba(100,135,108,0.25);
        color: var(--text);
        font-weight: 900;
    }

    table.table td, table.table th{
        border-color: rgba(100,135,108,0.18);
    }

    .text-success-strong-strong{
        color: var(--success) !important;
        font-weight: 900;
    }

    .section-gap{
        gap: 16px;
    }