:root{
    color-scheme:light;
    --bg:#f7f8fb;
    --panel:#ffffff;
    --text:#17181c;
    --muted:#667085;
    --line:#cfd4dc;
    --soft:#f1f3f7;
    --brand:#111827;
    --brand-soft:#eef2ff;
    --shadow:0 18px 50px rgba(1, 7, 19, 0.08);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-shell{
    width:min(960px, calc(100% - 32px));
    margin:48px auto;
}

.upload-panel,
.report-card{
    background:var(--panel);
    border:2px solid #d1d5db;
    border-radius:12px;
    box-shadow:0 15px 30px rgba(0,0,0,0.06);
    padding:28px;
}

.panel-heading,
.section-heading{
    margin-bottom:24px;
}

.eyebrow{
    margin:0 0 8px;
    padding-top: 11px;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

h1,h2,h3,p{
    margin-top:0;
}

h1{
    margin-bottom:0;
    font-size:32px;
    line-height:1.15;
    letter-spacing:0;
}

h2{
    margin-bottom:0;
    font-size:24px;
    letter-spacing:0;
}

h3{
    margin-bottom:8px;
    font-size:16px;
    letter-spacing:0;
}

.analysis-form{
    display:grid;
    gap:18px;
}

.field-label{
    color:#344054;
    font-size:14px;
    font-weight:700;
}

input[type="text"]{
    width:100%;
    height:48px;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:var(--text);
    font-size:16px;
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease;
}

input[type="text"]:focus{
    border-color:#111827;
    box-shadow:0 0 0 2px rgba(17,24,39,0.08);
}

.mode-card{
    display:grid;
    gap:12px;
    padding:16px;
    border:2px solid #d1d5db;
    border-radius:12px;
    background:#fbfcfe;
}

.mode-card-header{
    color:#344054;
    font-size:14px;
    font-weight:700;
}

.segmented-tabs{
    display:flex;
    flex-direction:column;
    gap:12px;
}


.top-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
}

.bottom-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);

    width:75%;
    margin:auto;

    gap:12px;
}

.mode-tab{
    min-height:52px;
    border:1px solid var(--line);
    border-radius:8px;
    background:transparent;
    color:#475467;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mode-tab:hover{
    border-color:#d0d5dd;
    background:#fff;
}

.mode-tab.active{
    background:var(--brand);
    color:#fff;
    box-shadow:0 8px 18px rgba(17,24,39,.16);
}

.file-drop{
    display:flex;
    align-items:center;
    min-height:58px;
    padding:10px 12px;
    border:2px dashed #cbd5e1;
    border-radius:12px;
    background:#fff;
}

input[type="file"]{
    width:100%;
    color:#475467;
    font-size:14px;
}

input[type="file"]::file-selector-button{
    margin-right:12px;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:#111827;
    cursor:pointer;
    font-weight:700;
}

.primary-button{
    height:48px;
    border:none;
    border-radius:8px;
    background:var(--brand);
    color:#fff;
    cursor:pointer;
    font-size:16px;
    font-weight:800;
    transition:transform .18s ease, box-shadow .18s ease;
}

.primary-button:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(17,24,39,.18);
}

.result-shell{
    display:grid;
    gap:20px;
}

.report-summary{
    color:#344054;
    font-size:16px;
    line-height:1.75;
}

.interpretation-list{
    display:grid;
    gap:14px;
    margin-top:20px;
}

.interpretation-list article,
.screening-card,
.metric-tile{
    border:2px solid #d1d5db;
    border-radius:12px;
    background:#fff;
    padding:16px;
}

.interpretation-list p,
.screening-card p{
    margin-bottom:0;
    color:#475467;
    line-height:1.65;
}

.confidence-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:20px;
}

.metric-tile span{
    display:block;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.metric-tile strong{
    display:block;
    margin-top:6px;
    font-size:28px;
}

.screening-grid{
    display:grid;
    gap:14px;
}

.screening-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.screening-header strong{
    color:#111827;
    font-size:24px;
}

.evidence-block{
    margin:14px 0;
    padding:12px;
    border-radius:8px;
    background:#f8fafc;
}

.evidence-block span{
    display:block;
    margin-bottom:8px;
    color:#475467;
    font-size:13px;
    font-weight:800;
}

.evidence-block ul{
    margin:0;
    padding-left:20px;
    color:#475467;
}

.evidence-block p{
    margin:0;
}

.disclaimer,
.medical-disclaimer{
    margin-top:20px;
    color:#667085;
    font-size:14px;
    line-height:1.6;
}

.medical-disclaimer{
    padding:14px;
    border:1px solid #fed7aa;
    border-radius:8px;
    background:#fff7ed;
    color:#9a3412;
}

.medical-disclaimer p{
    margin:6px 0 0;
}

@media (max-width:640px){
    .page-shell{
        width:min(100% - 20px, 960px);
        margin:20px auto;
    }

    .upload-panel,
    .report-card{
        padding:20px;
    }

    .segmented-tabs,
    .confidence-grid{
        grid-template-columns:1fr;
    }

    h1{
        font-size:26px;
    }
}

.interpretation-card{
    margin:24px auto 0;
    width:100%;
    background:#ffffff;
    border:2px solid #d1d5db;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,0.04);
    overflow:hidden;
}

.interpretation-card summary{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 20px;
    font-size:16px;
    font-weight:700;
    color:#111827;
    user-select:none;
    list-style:none;
    transition:background .18s ease;
}

.interpretation-card summary:hover{
    background:#f8fafc;
}

.interpretation-card summary::-webkit-details-marker{
    display:none;
}

.interpretation-card summary::before{
    content:"▶";
    display:inline-block;
    font-size:14px;
    font-weight:700;
    color:#374151;
    transition:transform .18s ease;
    margin-right:2px;
}

.interpretation-card[open] summary::before{
    transform:rotate(90deg);
}

.interpretation-card[open] summary{
    border-bottom:1px solid #e5e7eb;
}

.interpretation-card p{
    margin:0;
    padding:8px 20px;
    color:#374151;
    line-height:1.6;
}

.interpretation-card strong{
    display:inline-block;
    min-width:90px;
    color:#111827;
}

.interpretation-card .disclaimer{
    margin:16px 20px 20px;
    padding-top:16px;
    border-top:1px solid #e5e7eb;
    font-size:0.9rem;
    color:#6b7280;
}

.collapsible-card{
    margin-top:20px;
    border:2px solid #d1d5db;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,0.04);
}

.collapsible-card summary{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 20px;
    font-size:16px;
    font-weight:700;
    color:#111827;
    user-select:none;
    list-style:none;
    transition:background .18s ease;
}

.collapsible-card summary:hover{
    background:#f8fafc;
}

.collapsible-card summary::-webkit-details-marker{
    display:none;
}

.collapsible-card summary::before{
    content:"▶";
    display:inline-block;
    font-size:14px;
    font-weight:700;
    color:#374151;
    transition:transform .18s ease;
    margin-right:2px;
}

.collapsible-card[open] summary::before{
    transform:rotate(90deg);
}

.collapsible-card[open] summary{
    border-bottom:1px solid #e5e7eb;
}

.collapsible-card .feature-grid,
.collapsible-card .letter-grid{
    padding:20px;
}


.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}

.feature-card{
    background:#f8fafc;
    border:2px solid #dbe2ea;
    border-radius:12px;
    padding:16px;
}

.feature-title{
    font-size:14px;
    color:#111827;
    font-weight:700;
    margin-bottom:8px;
}

.feature-value{
    font-size:14px;
    color:#475467;
    line-height:1.5;
}

.letter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}

.letter-card{
    background:#f8fafc;
    border:2px solid #dbe2ea;
    border-radius:12px;
    padding:14px;
}

.letter-heading{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
    color:#111827;
    border-bottom:1px solid #e5e7eb;
    padding-bottom:8px;
}

.nested-row{
    margin-bottom:6px;
}

.nested-row span{
    color:#111827;
    font-size:13px;
    font-weight:700;
}

.nested-row strong{
    color:#475467;
    font-size:13px;
    font-weight:600;
}

.uploaded-handwriting-image{
    width:100%;
    max-height:900px;
    object-fit:contain;
    display:block;
    border:2px solid #d1d5db;
    border-radius:12px;
    background:white;
}

.pdf-download-container{
    display:flex;
    justify-content:flex-end;
    margin:20px 0 12px;
}

.pdf-download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
}

@media print {

        .feature-grid{
            display:grid !important;
            grid-template-columns:repeat(3, 1fr) !important;
            gap:12px !important;
        }

        .letter-grid{
            display:grid !important;
            grid-template-columns:repeat(3, 1fr) !important;
            gap:12px !important;
        }

        .confidence-grid{
            display:grid !important;
            grid-template-columns:repeat(2, 1fr) !important;
            gap:12px !important;
        }


    .feature-card,
    .letter-card,
    .screening-card,
    .metric-tile,
    .interpretation-list article,
    .medical-disclaimer,
    .interpretation-card,
    .collapsible-card {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-bottom:15px;
    }

    .feature-title{
        page-break-after: avoid;
    }

    .feature-value{
        page-break-before: avoid;
    }

    .medical-disclaimer{
        page-break-before: avoid !important;
    }

    .report-card{
        border:none !important;
        box-shadow:none !important;
        padding:11px !important;
    }


    .collapsible-card,
    .interpretation-card{
        break-inside:auto !important;
        page-break-inside:auto !important;
    }

    .collapsible-card{
        border:none !important;
        box-shadow:none !important;
        background:transparent !important;
    }

    .pdf-page-break{
        display:block !important;
        height:1px !important;

        page-break-after:always !important;
        break-after:page !important;
    }

    body{
        margin:0 !important;
        padding:0 !important;
    }

    .page-shell{
        margin:0 !important;
        width:100% !important;
    }

}

@page {
    size:A4;
    margin:8mm;
}


.loading-overlay{
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.96);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.loading-card{
    width:520px;
    max-width:90%;
    text-align:center;
}

.spinner{
    width:60px;
    height:60px;
    border:5px solid #e5e7eb;
    border-top:5px solid #111827;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:0 auto 20px;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.progress-bar{
    width:100%;
    height:12px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
    margin:20px 0;
}

.progress-fill{
    width:10%;
    height:100%;
    background:#111827;
    transition:width 1s linear;
}

.fact-box{
    margin-top:24px;
    padding:16px;
    border-radius:12px;
    background:#f8fafc;
}

.analysis-status{
    margin-bottom:15px;
    color:#64748b;
    font-size:15px;
}

.career-section {
    margin-top: 24px;
    padding-top: 4px;
}

.career-section h2 {
    margin: 0 0 14px;
    font-size: 1.35rem;
}

.career-card {
    background: #fff;
    border: 2px solid #dbe3ee;
    border-radius: 16px;
    padding: 16px 18px;
    margin: 12px 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.career-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.career-card p,
.career-card li,
.report-summary,
.interpretation-list p {
    line-height: 1.7;
}

.career-card ul {
    margin: 8px 0 0 20px;
}

.gated-section[hidden]{
    display:none !important;
}

.section-unlock-gate{
    display:grid;
    gap:14px;
}

.section-unlock-gate textarea{
    width:100%;
    min-height:96px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:var(--text);
    font:inherit;
    resize:vertical;
}

.section-unlock-gate textarea:focus{
    border-color:#111827;
    outline:none;
    box-shadow:0 0 0 2px rgba(17,24,39,0.08);
}

.star-row{
    display:flex;
    gap:8px;
}

.star-btn{
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:#98a2b3;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.star-btn::before{
    content:"\2605";
}

.star-btn.is-on{
    background:#111827;
    border-color:#111827;
    color:#f7b500;
}

.unlock-error{
    margin:0;
    color:#b42318;
    font-size:14px;
    font-weight:600;
}

@media print{
    .gated-section[hidden]{
        display:block !important;
    }
    .section-unlock-gate{
        display:none !important;
    }
}
/* --- Additions for the Blade version (kept separate from the original file above) --- */
.gr-page-title{font-size:32px;line-height:1.15;margin:0 0 6px;}
.gr-page-sub{color:var(--muted);font-size:15px;margin:0 0 24px;}
.gr-field-hint{color:var(--muted);font-size:13px;margin-top:6px;}
.gr-error-text{color:#b42318;font-size:13px;font-weight:600;margin-top:6px;display:none;}
.gr-error-text.is-visible{display:block;}
.gr-preview-thumb{margin-top:10px;max-width:160px;max-height:160px;border-radius:10px;border:1px solid var(--line);display:none;object-fit:cover;}
.gr-preview-thumb.is-visible{display:block;}
button.mode-tab{font-family:inherit;}
.loading-overlay.is-visible{display:flex;}