:root{
    --bg:#f3f7fc;
    --panel:#ffffff;
    --panel-soft:#f8fbff;
    --text:#14213d;
    --muted:#64748b;
    --line:#dbe5f1;
    --line-strong:#c8d6e8;
    --primary:#2f67f6;
    --primary-dark:#1f4fd4;
    --green:#0f9f78;
    --amber:#d28c15;
    --red:#d64a4a;
    --shadow:0 18px 40px rgba(25, 55, 110, .08);
    --shadow-soft:0 10px 24px rgba(25, 55, 110, .06);
    --radius-xl:28px;
    --radius-lg:22px;
    --radius-md:16px;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:linear-gradient(180deg,#f7faff 0%,#f1f6fc 100%);
    color:var(--text);
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:none}

img{max-width:100%;display:block}

button,input,textarea,select{font:inherit}

.page-shell{
    min-height:calc(100vh - 154px);
    padding:28px 0 40px;
}

.container{
    width:min(1240px, calc(100% - 32px));
    margin:0 auto;
}

.site-header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(219,229,241,.95);
}

.header-grid{
    display:grid;
    grid-template-columns:180px minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    min-height:88px;
}

.header-brand,
.header-title-block,
.header-actions{min-width:0}

.brand-link{
    display:inline-flex;
    align-items:center;
}

.brand-logo{
    max-height:46px;
    width:auto;
}

.header-title-block{
    text-align:center;
}

.app-title{
    font-size:1.5rem;
    font-weight:900;
    letter-spacing:-.03em;
    color:#13213f;
}

.app-subtitle{
    margin-top:4px;
    color:var(--muted);
    font-size:.98rem;
    font-weight:600;
}

.header-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
}

.header-btn,
.primary-action,
.secondary-action,
.soft-action,
.view-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 18px;
    border-radius:16px;
    border:1px solid transparent;
    font-weight:800;
    transition:.18s ease;
}

.header-btn{
    background:#fff;
    border-color:var(--line);
    color:#22304d;
    box-shadow:var(--shadow-soft);
}

.header-btn.is-active,
.header-btn:hover{
    background:#eef4ff;
    border-color:#cddcff;
    color:#1c4fd7;
}

.primary-action{
    background:linear-gradient(180deg,#3c79ff 0%,#2f67f6 100%);
    color:#fff;
    box-shadow:0 16px 30px rgba(47,103,246,.22);
}

.primary-action:hover{background:linear-gradient(180deg,#3972ee 0%,#275cdc 100%)}

.secondary-action,
.soft-action,
.view-pill{
    background:#fff;
    border-color:var(--line);
    color:#22304d;
    box-shadow:var(--shadow-soft);
}

.secondary-action:hover,
.soft-action:hover,
.view-pill:hover{
    background:#f8fbff;
    border-color:#cad8ea;
}

.primary-action.small{min-height:42px;padding:0 16px}

.flash{
    margin-bottom:18px;
    padding:16px 18px;
    border-radius:18px;
    border:1px solid var(--line);
    background:#fff;
    font-weight:700;
}

.flash.error{
    background:#fff6f6;
    border-color:#efc9c9;
    color:#8e2f2f;
}

.dashboard-page{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.dashboard-hero-panel,
.dashboard-card,
.dashboard-tile{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow);
}

.dashboard-hero-panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) 240px;
    gap:24px;
    align-items:center;
    padding:30px;
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    background:#eef4ff;
    border:1px solid #d8e5ff;
    color:#2458de;
    font-size:.88rem;
    font-weight:800;
}

.hero-left h1{
    margin:12px 0 0;
    font-size:clamp(2rem, 3vw, 3rem);
    line-height:1;
    letter-spacing:-.05em;
}

.hero-subline{
    margin:14px 0 0;
    max-width:760px;
    color:var(--muted);
    font-size:1.04rem;
    line-height:1.7;
}

.hero-actions-row{
    margin-top:22px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.credit-bubble{
    min-height:180px;
    padding:24px;
    border-radius:26px;
    background:linear-gradient(180deg,#2f67f6 0%,#1b4eca 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-shadow:0 20px 36px rgba(47,103,246,.22);
}

.credit-bubble-label,
.credit-bubble-note{
    font-weight:700;
    opacity:.95;
}

.credit-bubble-value{
    margin:8px 0;
    font-size:4rem;
    font-weight:900;
    line-height:.9;
    letter-spacing:-.05em;
}

.dashboard-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.dashboard-tile{
    padding:22px;
}

.tile-topline{
    color:#4f6280;
    font-size:.96rem;
    font-weight:800;
}

.tile-number{
    margin-top:8px;
    font-size:2.35rem;
    line-height:1;
    letter-spacing:-.04em;
    font-weight:900;
}

.tile-footnote{
    margin-top:10px;
    color:var(--muted);
    font-weight:700;
    font-size:.94rem;
}

.stat-tile.blue{background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%)}
.stat-tile.indigo{background:linear-gradient(180deg,#faf8ff 0%,#f1edff 100%)}
.stat-tile.teal{background:linear-gradient(180deg,#f7fffd 0%,#eafaf5 100%)}
.stat-tile.amber{background:linear-gradient(180deg,#fffdf7 0%,#fff6e5 100%)}

.dashboard-history-grid{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(280px,.9fr);
    gap:18px;
}

.dashboard-card{
    padding:24px;
}

.card-header-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}

.card-header-row h2,
.side-info-card h2{
    margin:0;
    font-size:1.55rem;
    line-height:1.05;
    letter-spacing:-.03em;
}

.card-header-row p,
.side-info-card p{
    margin:10px 0 0;
    color:var(--muted);
    line-height:1.6;
    font-weight:600;
}

.report-list{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.report-row-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto auto;
    gap:14px;
    align-items:center;
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fbfdff;
}

.report-title{
    font-size:1rem;
    font-weight:800;
    color:#17253f;
}

.report-meta{
    margin-top:6px;
    color:var(--muted);
    font-size:.92rem;
    font-weight:600;
}

.status-pill,
.score-badge,
.builder-step-pill,
.soft-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 12px;
    border-radius:999px;
    font-size:.9rem;
    font-weight:800;
    white-space:nowrap;
}

.status-pill.is-complete{background:#eaf8f2;color:#107758;border:1px solid #cceede}
.status-pill.is-pending{background:#fff6e3;color:#996509;border:1px solid #f0deaf}
.status-pill.is-error{background:#fff0f0;color:#af3232;border:1px solid #efcaca}
.status-pill.is-neutral{background:#f1f5f9;color:#445468;border:1px solid #d8e2ec}

.score-badge{
    min-width:52px;
    background:#eef4ff;
    border:1px solid #d7e3ff;
    color:#2558d9;
}

.view-pill{min-height:40px;padding:0 16px}

.mini-info-stack{
    margin-top:16px;
    display:grid;
    gap:12px;
}

.mini-info-tile{
    padding:16px 16px 15px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fbfdff;
}

.mini-label{
    display:block;
    color:var(--muted);
    font-size:.85rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.mini-info-tile strong{
    display:block;
    margin-top:8px;
    font-size:1rem;
    color:#17253f;
}

.empty-dashboard-state{
    margin-top:18px;
    padding:30px 18px;
    border:1px dashed #cfdcec;
    border-radius:24px;
    text-align:center;
    background:#fbfdff;
}

.empty-icon{
    width:64px;
    height:64px;
    margin:0 auto 14px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:2rem;
    font-weight:900;
    color:#285fe3;
    background:#eef4ff;
}

.empty-dashboard-state h3{
    margin:0;
    font-size:1.35rem;
}

.empty-dashboard-state p{
    margin:10px auto 18px;
    max-width:420px;
    color:var(--muted);
    line-height:1.6;
}

.footer{
    border-top:1px solid rgba(219,229,241,.95);
    background:#fff;
    color:#66758d;
    font-size:.95rem;
}

.footer .container{
    padding:18px 0 22px;
}

/* new report */
.report-builder-page{gap:20px}
.report-builder-hero{padding:28px 30px}
.report-builder-steps{margin-top:20px}

.soft-chip{
    background:#f6f9ff;
    border:1px solid #dbe5f6;
    color:#41546f;
}

.soft-chip.is-active{
    background:#eef4ff;
    border-color:#cfe0ff;
    color:#2558d9;
}

.builder-top-grid .dashboard-tile{
    min-height:146px;
}

.report-builder-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.report-builder-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.builder-card{
    padding:24px;
}

.builder-card-head{margin-bottom:18px}

.builder-step-pill{
    background:#eef4ff;
    border:1px solid #d7e3ff;
    color:#2558d9;
}

.builder-upload-shell input[type="file"]{
    position:absolute;
    left:-9999px;
}

.builder-upload-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:176px;
    padding:22px;
    border-radius:24px;
    border:1px dashed #bdd0e7;
    background:linear-gradient(180deg,#fbfdff 0%,#f3f8ff 100%);
    color:#22304d;
    text-align:center;
    cursor:pointer;
}

.builder-upload-box:hover{
    border-color:#9fb8dd;
    background:linear-gradient(180deg,#ffffff 0%,#eef5ff 100%);
}

.builder-upload-icon{
    width:56px;
    height:56px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    border:1px solid #d9e3f0;
    color:#2558d9;
    font-size:2rem;
    font-weight:900;
    box-shadow:var(--shadow-soft);
}

.builder-upload-title{
    font-size:1.2rem;
    font-weight:900;
    letter-spacing:-.02em;
}

.builder-upload-copy{
    color:var(--muted);
    font-weight:700;
}

.builder-file-name{
    margin-top:12px;
    min-height:48px;
    padding:13px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:#fff;
    color:#4b5b74;
    font-weight:700;
}

.builder-divider{
    position:relative;
    margin:18px 0 16px;
    text-align:center;
}

.builder-divider:before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:1px;
    background:var(--line);
}

.builder-divider span{
    position:relative;
    z-index:1;
    display:inline-block;
    padding:0 14px;
    background:#fff;
    color:var(--muted);
    font-size:.92rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.builder-label{
    display:block;
    margin-bottom:10px;
    font-weight:800;
    color:#22304d;
}

.builder-textarea{
    width:100%;
    min-height:300px;
    padding:18px 18px;
    border-radius:20px;
    border:1px solid var(--line-strong);
    background:#fbfdff;
    color:#16253e;
    outline:none;
    resize:vertical;
    box-shadow:none;
}

.builder-textarea:focus{
    border-color:#a8c0e8;
    background:#fff;
}

.builder-textarea::placeholder{color:#a8b7ca}

.builder-bottom-grid{align-items:start}

.builder-submit-card,
.builder-side-card{height:100%}

.builder-check-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:4px;
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fbfdff;
    color:#1a2844;
    font-weight:700;
    line-height:1.6;
}

.builder-check-row input{
    width:22px;
    height:22px;
    margin-top:2px;
    accent-color:var(--primary);
    flex:0 0 auto;
}

.builder-submit-row{
    margin-top:16px;
    padding:18px;
    border-radius:20px;
    background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%);
    border:1px solid #d8e4f6;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
}

.builder-submit-copy strong{
    display:block;
    font-size:1.15rem;
    letter-spacing:-.02em;
}

.builder-submit-copy p{
    margin:8px 0 0;
    color:var(--muted);
    line-height:1.6;
    font-weight:600;
}

.builder-submit-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
}

.builder-run-button{
    min-width:200px;
    min-height:56px;
    border:none;
    cursor:pointer;
}

.builder-submit-note{
    color:#5d708b;
    font-size:.94rem;
    font-weight:800;
}

@media (max-width: 1080px){
    .dashboard-stats-grid,
    .builder-top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dashboard-history-grid{grid-template-columns:1fr}
    .report-builder-grid{grid-template-columns:1fr}
}

@media (max-width: 860px){
    .header-grid{
        grid-template-columns:1fr;
        padding:14px 0;
        text-align:center;
    }
    .header-brand,
    .header-actions{justify-content:center}
    .dashboard-hero-panel{grid-template-columns:1fr}
    .hero-right{max-width:320px;width:100%;margin:0 auto}
    .builder-submit-row,
    .report-row-card{grid-template-columns:1fr}
    .builder-submit-actions{align-items:stretch}
}

@media (max-width: 640px){
    .site-header{
        position:relative;
        top:auto;
        backdrop-filter:none;
    }

    .container{width:min(100% - 20px, 1240px)}

    .header-grid{
        grid-template-columns:1fr;
        gap:12px;
        min-height:auto;
        padding:12px 0;
        text-align:center;
    }

    .header-brand,
    .header-actions{
        justify-content:center;
    }

    .brand-logo{
        max-height:38px;
        margin:0 auto;
    }

    .header-title-block{
        text-align:center;
    }

    .app-title{
        font-size:1.1rem;
        line-height:1.1;
    }

    .app-subtitle{
        font-size:.9rem;
        margin-top:2px;
    }

    .header-actions{
        gap:10px;
    }

    .page-shell{
        padding:14px 0 28px;
    }

    .dashboard-page{gap:16px}
    .dashboard-hero-panel,
    .dashboard-card,
    .dashboard-tile{border-radius:22px}
    .dashboard-hero-panel,
    .dashboard-card,
    .dashboard-tile,
    .builder-card{padding:18px}
    .dashboard-stats-grid,
    .builder-top-grid{grid-template-columns:1fr}
    .hero-left h1{font-size:2rem}
    .credit-bubble{min-height:150px}
    .credit-bubble-value{font-size:3rem}
    .builder-upload-box{min-height:148px}
    .builder-textarea{min-height:220px}

    .header-btn,
    .primary-action,
    .secondary-action,
    .soft-action,
    .view-pill{
        width:100%;
        min-height:44px;
        border-radius:18px;
    }
}


@media screen and (max-width: 768px){
    .site-header{
        position: static !important;
        top: auto !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .header-grid{
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        min-height: auto !important;
        padding: 12px 0 !important;
        text-align: center !important;
    }

    .header-brand,
    .header-actions{
        justify-content: center !important;
    }

    .brand-logo{
        max-height: 38px !important;
        margin: 0 auto !important;
    }

    .header-title-block{
        text-align: center !important;
    }

    .app-title{
        font-size: 1.1rem !important;
        line-height: 1.1 !important;
    }

    .app-subtitle{
        font-size: .9rem !important;
        margin-top: 2px !important;
    }

    .header-actions{
        gap: 10px !important;
    }

    .header-btn,
    .primary-action,
    .secondary-action,
    .soft-action,
    .view-pill{
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 18px !important;
    }

    .page-shell{
        padding-top: 14px !important;
    }
}