:root {
    font-family:
        Inter, "Microsoft YaHei", "PingFang SC",
        system-ui, sans-serif;
    color: #172033;
    background: #f3f6fb;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top left,
            rgba(45, 106, 255, 0.12),
            transparent 34rem
        ),
        #f3f6fb;
}

button,
textarea,
input {
    font: inherit;
}

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

.hero {
    margin-bottom: 28px;
}

.eyebrow,
.result-mode {
    margin: 0 0 10px;
    color: #2d6aff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

h1 {
    margin: 0;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.15;
}

.subtitle {
    max-width: 800px;
    margin: 16px 0 0;
    color: #5f6b80;
    font-size: 17px;
    line-height: 1.8;
}

.panel {
    padding: 26px;
    border: 1px solid #dce3ef;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 50px rgba(31, 52, 91, 0.08);
}

.mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 26px;
    padding: 5px;
    border-radius: 14px;
    background: #edf2fa;
}

.mode-tab {
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    color: #5a6880;
    font-weight: 800;
    background: transparent;
    cursor: pointer;
}

.mode-tab.active {
    color: #1d55d7;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 52, 91, 0.1);
}

.analysis-form label {
    display: block;
    margin: 20px 0 10px;
    font-weight: 800;
}

.analysis-form label:first-child {
    margin-top: 0;
}

textarea {
    width: 100%;
    resize: vertical;
    padding: 16px;
    border: 1px solid #cfd8e8;
    border-radius: 14px;
    outline: none;
    line-height: 1.7;
    background: #fbfcff;
}

textarea:focus,
input[type="file"]:focus-visible {
    border-color: #2d6aff;
    box-shadow: 0 0 0 4px rgba(45, 106, 255, 0.1);
}

.upload-box {
    padding: 18px;
    border: 1px dashed #9eb4d8;
    border-radius: 14px;
    background: #f8faff;
}

input[type="file"] {
    width: 100%;
}

.upload-hint {
    margin: 12px 0 0;
    color: #6b7890;
    font-size: 14px;
    line-height: 1.7;
}

.selection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #dce3ef;
    border-radius: 12px;
    background: #f8faff;
    color: #40506c;
    font-weight: 700;
}

.danger-button {
    color: #b42318;
    border-color: #f3c5c1;
}

.danger-button:hover {
    color: #8f1710;
    border-color: #e89a94;
}

.preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.preview-card {
    overflow: hidden;
    border: 1px solid #dce3ef;
    border-radius: 14px;
    background: #fbfcff;
}

.preview-card > img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: #e9eef6;
}

.preview-card-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 10px;
    align-items: center;
    padding: 12px;
}

.preview-card-body strong {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #172033;
}

.preview-order,
.preview-file-size {
    color: #6b7890;
    font-size: 13px;
}

.remove-image-button {
    grid-column: 2;
    grid-row: 3;
    border: 1px solid #f3c5c1;
    border-radius: 8px;
    padding: 6px 10px;
    color: #b42318;
    background: #fff;
    cursor: pointer;
}

.remove-image-button:hover {
    border-color: #e89a94;
    background: #fff6f5;
}

.remove-image-button:disabled {
    cursor: wait;
    opacity: 0.55;
}


.examples {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.example-button,
.secondary-button {
    border: 1px solid #d5deec;
    border-radius: 999px;
    padding: 9px 14px;
    color: #33415c;
    background: #fff;
    cursor: pointer;
}

.example-button:hover,
.secondary-button:hover {
    border-color: #2d6aff;
    color: #2d6aff;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

.primary-button {
    border: 0;
    border-radius: 12px;
    padding: 12px 22px;
    color: #fff;
    font-weight: 800;
    background: #2d6aff;
    cursor: pointer;
}

.primary-button:hover {
    background: #1d55d7;
}

.primary-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.status-text {
    color: #66748c;
    font-size: 14px;
    line-height: 1.6;
}

.result-panel {
    margin-top: 24px;
}

.risk-evaluation-display { margin: 20px 0 24px; }
.formal-risk-report { overflow:hidden; border:1px solid #dbe4ee; border-radius:20px; background:#fff; box-shadow:0 16px 38px rgba(15,23,42,.12); }
.formal-risk-report-title { margin:0; padding:25px 28px; color:#fff; background:linear-gradient(135deg,#0f3d67,#176b87); font-size:clamp(24px,4vw,34px); text-align:center; letter-spacing:.06em; }
.formal-risk-overview { margin:22px; padding:22px; border:2px solid #94a3b8; border-radius:16px; background:#f8fafc; }
.formal-risk-overview > h3,.formal-risk-section h3 { margin:0 0 16px; color:#172b4d; font-size:20px; }
.formal-risk-metrics { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(180px,.6fr); gap:16px; }
.formal-risk-metric { padding:18px 20px; border:1px solid currentColor; border-radius:14px; background:rgba(255,255,255,.78); }
.formal-risk-metric span { display:block; margin-bottom:8px; color:#475569; font-size:14px; font-weight:800; letter-spacing:.08em; }
.formal-risk-metric strong { display:block; font-size:clamp(27px,4vw,38px); line-height:1.2; }
.formal-risk-metric.score strong { font-variant-numeric:tabular-nums; }
.formal-risk-summary { margin-top:16px; padding:17px 19px; border-radius:12px; background:rgba(255,255,255,.8); color:#26374a; line-height:1.75; }
.formal-risk-summary h4 { margin:0 0 8px; font-size:16px; }
.formal-risk-section { margin:0 22px; padding:21px 4px; border-top:1px solid #e2e8f0; }
.formal-risk-section-content { color:#334155; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.deterministic-score-note { display:block; margin-top:12px; color:#64748b; }
.action-summary-card { margin:18px 22px; padding:22px; border:2px solid #f79009; border-radius:16px; background:#fff7ed; }
.document-review-overview,.multimodal-overview { margin:22px; padding:22px; border:2px solid #176b87; border-radius:16px; background:#f0f9ff; }
.document-issue-card,.cross-modal-card,.image-risk-card { margin:14px 0; padding:18px; border:1px solid #cbd5e1; border-radius:14px; background:#fff; }
.document-issue-card h4,.cross-modal-card h4,.image-risk-card h4 { margin:0 0 12px; color:#172b4d; font-size:18px; }
.document-issue-card p,.cross-modal-card p,.image-risk-card p,.multimodal-overview p,.document-review-overview p,.action-summary-card p { margin:8px 0; line-height:1.7; }
.report-emphasis { padding:10px 12px; border-left:5px solid #f79009; background:#fff7ed; }
.cross-modal-card { border-color:#f59e0b; background:#fffbeb; }
.formal-risk-overview.risk-level-i { color:#b42318; border-color:#e5484d; background:#fff1f0; }
.formal-risk-overview.risk-level-ii { color:#b54708; border-color:#f79009; background:#fff4e5; }
.formal-risk-overview.risk-level-iii { color:#725900; border-color:#d6ad00; background:#fff8cc; }
.formal-risk-overview.risk-level-iv { color:#175cd3; border-color:#2e90fa; background:#eff8ff; }
.formal-risk-overview.risk-level-pending { color:#475569; border-color:#94a3b8; background:#f8fafc; }
@media (max-width:640px) { .formal-risk-metrics { grid-template-columns:1fr; } .formal-risk-overview,.formal-risk-section { margin-left:14px; margin-right:14px; } }
.risk-overview-card { position:relative; overflow:hidden; padding:24px 26px; border:2px solid; border-radius:18px; box-shadow:0 12px 30px rgba(15,23,42,.12); }
.risk-overview-card::before { content:""; position:absolute; inset:0 auto 0 0; width:9px; background:currentColor; }
.risk-overview-label { margin:0 0 8px; color:#334155; font-size:15px; font-weight:800; letter-spacing:.08em; }
.risk-overview-title { font-size:clamp(30px,5vw,38px); line-height:1.2; font-weight:800; letter-spacing:.02em; }
.risk-overview-metrics { display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:14px; color:#1e293b; font-size:16px; }
.risk-level-explanation { display:block !important; margin-top:15px; padding-top:12px; border-top:1px solid rgba(15,23,42,.15); }
.risk-level-explanation summary { font-weight:800; }
.risk-level-explanation p { margin:10px 0 0; color:#334155; }
.risk-level-i { color:#b42318; border-color:#e5484d; background:#fff1f0; }
.risk-level-ii { color:#b54708; border-color:#f79009; background:#fff4e5; }
.risk-level-iii { color:#725900; border-color:#d6ad00; background:#fff8cc; }
.risk-level-iv { color:#175cd3; border-color:#2e90fa; background:#eff8ff; }
.risk-level-badge { display:inline-flex; align-items:center; width:max-content; padding:7px 13px; border:1px solid currentColor; border-radius:999px; font-size:18px; font-weight:800; white-space:nowrap; }
.risk-level-badge.compact { padding:4px 10px; font-size:14px; }
.risk-list-section,.multimodal-risk-summary { margin-top:20px; padding:20px; border:1px solid #dbe4ee; border-radius:16px; background:#fff; }
.risk-list-section h3,.multimodal-risk-summary h3 { margin:0 0 14px; }
.risk-list-item { display:grid; grid-template-columns:7px 1fr; overflow:hidden; margin-top:10px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; }
.risk-item-stripe { width:100%; border:0; border-radius:0; }
.risk-item-content { padding:13px 15px; }
.risk-item-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.risk-item-content p { margin:8px 0 0; color:#475569; }
.multimodal-final-level { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:18px; font-weight:800; }
.multimodal-final-level .risk-level-badge { font-size:28px; }

.result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.result-heading h2 {
    margin: 0;
}
.report-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.secondary-button:disabled { opacity:.55; cursor:not-allowed; }

pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.75;
}

#report-output {
    margin: 22px 0;
    padding: 22px;
    border-radius: 14px;
    background: #f7f9fd;
}

details {
    border-top: 1px solid #e3e8f1;
    padding-top: 18px;
}

summary {
    cursor: pointer;
    color: #40506c;
    font-weight: 700;
}

#json-output {
    max-height: 520px;
    overflow: auto;
    padding: 16px;
    border-radius: 12px;
    background: #111827;
    color: #dce7ff;
}

.hidden {
    display: none !important;
}

.error {
    color: #b42318;
}

.success {
    color: #067647;
}

@media (max-width: 680px) {
    .page-shell {
        width: min(100% - 20px, 1040px);
        padding-top: 28px;
    }

    .panel {
        padding: 18px;
        border-radius: 16px;
    }

    .mode-tabs {
        grid-template-columns: 1fr;
    }


    .action-row,
    .result-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .selection-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .preview-list {
        grid-template-columns: 1fr;
    }
}


.voice-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; padding:12px; border:1px solid #dce3ef; border-radius:12px; background:#f8faff; }
.voice-button { border:1px solid #9eb4d8; border-radius:999px; padding:9px 14px; color:#1d55d7; font-weight:800; background:#fff; cursor:pointer; }
.voice-button:hover { border-color:#2d6aff; background:#f1f5ff; }
.voice-button.listening { color:#fff; border-color:#d92d20; background:#d92d20; animation:voice-pulse 1.5s infinite; }
.voice-button:disabled, .voice-clear-button:disabled, .voice-language:disabled { cursor:not-allowed; opacity:.55; }
.voice-language { min-width:100px; border:1px solid #d5deec; border-radius:10px; padding:8px 10px; color:#33415c; background:#fff; }
.voice-clear-button { padding:8px 13px; }
.voice-status { flex:1 1 240px; color:#66748c; font-size:14px; line-height:1.5; }
.voice-status.listening { color:#b42318; font-weight:700; }
@keyframes voice-pulse { 0%,100% { box-shadow:0 0 0 4px rgba(217,45,32,.12); } 50% { box-shadow:0 0 0 9px rgba(217,45,32,.04); } }
.result-panel details {
    display: none;
}

.visual-results {
    display: grid;
    gap: 18px;
    margin: 18px 0 24px;
}

.expert-result-card {
    padding: 14px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: #f8fafc;
}

.expert-result-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.expert-image-frame {
    position: relative;
    width: min(100%, 900px);
}

.expert-image-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.expert-image-frame canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.expert-detection-summary {
    margin: 10px 0 0;
    color: #334155;
    line-height: 1.6;
}
.formal-risk-fallback-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.8;
    color: #24324a;
    padding: 8px 0;
}

#report-output.hidden {
    display: none !important;
}