:root {
    --research-text: #edf4f2;
    --research-muted: #aebdb8;
    --research-line: rgba(190, 213, 204, 0.2);
    --research-accent: #77c8eb;
    --research-gold: #f0c766;
}

body {
    font-size: 16px;
    line-height: 1.55;
}

.panel-heading h2,
.viz-card h3,
.guided-card h2 {
    line-height: 1.3;
}

.panel-heading h2 {
    font-size: 20px;
}

.viz-card h3 {
    font-size: 17px;
}

.help-text,
.status-pill,
.metadata-card,
.observable-card,
.topology-card,
.validation-card,
.run-log,
.difference-list,
.selected-cell-panel,
.comparison-grid p,
.viz-card p,
table {
    font-size: 14px;
    line-height: 1.58;
}

label,
legend,
summary {
    font-size: 14px;
    line-height: 1.45;
}

button,
select,
input,
textarea {
    min-height: 40px;
    font-size: 15px;
    line-height: 1.35;
}

small,
.exactness-pill,
.metadata-row span,
.run-estimate {
    font-size: 13px;
    line-height: 1.45;
}

.metadata-grid dt,
.estimate-grid dt,
.run-status dt,
.phase-compact-summary dt,
.topology-summary-strip dt {
    font-size: 13px;
    line-height: 1.4;
}

.metadata-grid dd,
.estimate-grid dd,
.run-status dd,
.phase-compact-summary dd,
.topology-summary-strip dd {
    font-size: 15px;
    line-height: 1.55;
}

code {
    font-size: 12px;
    line-height: 1.45;
}

.research-formula-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    gap: 14px;
    align-items: start;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(119, 200, 235, 0.26);
    background: rgba(7, 15, 20, 0.68);
}

.research-formula-panel p {
    margin: 0;
}

.research-formula-panel .formula-intro {
    color: #d6e4df;
    font-size: 15px;
    line-height: 1.58;
}

.research-formula-panel .formula-code {
    overflow-x: auto;
    padding: 11px 12px;
    border: 1px solid rgba(240, 199, 102, 0.32);
    background: rgba(0, 0, 0, 0.28);
}

.research-formula-panel code {
    color: #e6f7ff;
    font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
    font-size: clamp(14px, 1.45vw, 18px);
    white-space: nowrap;
}

.research-formula-panel .formula-label {
    display: block;
    margin: 0 0 6px;
    color: var(--research-gold);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.4;
}

.scientific-equation {
    display: inline-block;
    margin: 0.08rem 0.12rem;
    padding: 0.05rem 0.32rem;
    border: 1px solid rgba(127, 211, 252, 0.28);
    border-radius: 0.35rem;
    background: rgba(127, 211, 252, 0.07);
    color: #f8fafc;
    font-family: "Cambria Math", "STIX Two Math", "Noto Sans Math", Georgia, serif;
    font-size: 0.98em;
    line-height: 1.45;
    vertical-align: baseline;
}

.scientific-equation sub,
.scientific-equation sup {
    line-height: 0;
}

.topology-card code {
    font-size: 12px;
}

.check-item strong,
.validation-card strong,
.hash-card strong,
.stored-item strong {
    font-size: 14px;
    line-height: 1.4;
}

.table-wrap {
    max-width: 100%;
    overflow: auto;
}

th,
td {
    min-width: 96px;
    padding: 10px 11px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

th {
    font-size: 13px;
    line-height: 1.35;
}

.phase-canvas-card canvas {
    display: block;
    width: 100%;
    min-height: 360px;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--research-line);
    background: #f8faf9;
}

.phase-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phase-method-card {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(119, 200, 235, 0.32);
    background: rgba(7, 15, 20, 0.7);
}

.phase-method-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.phase-method-heading h3 {
    margin: 0;
    color: var(--research-text);
    font-size: 20px;
    line-height: 1.3;
}

.phase-method-heading > span {
    padding: 5px 8px;
    border: 1px solid rgba(119, 200, 235, 0.34);
    color: #bfe9fa;
    font-size: 13px;
    font-weight: 800;
}

.phase-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
}

.phase-method-grid > div {
    min-width: 0;
    padding: 11px;
    border-left: 3px solid rgba(240, 199, 102, 0.58);
    background: rgba(255, 255, 255, 0.025);
}

.phase-method-grid dt {
    color: var(--research-gold);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.4;
}

.phase-method-grid dd {
    margin: 5px 0 0;
    color: #dce7e3;
    font-size: 15px;
    line-height: 1.62;
    overflow-wrap: anywhere;
}

.topology-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.topology-visual-grid > .viz-card:first-child {
    grid-column: 1 / -1;
}

.lower-grid {
    grid-template-columns: minmax(280px, 0.45fr) minmax(0, 1.55fr);
}

#comparisonDashboard .comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#comparisonDashboard .viz-card[data-visualization="summary"],
#comparisonDashboard .viz-card[data-visualization="lineChart"],
#comparisonDashboard .viz-card[data-visualization="histogram"] {
    grid-column: 1 / -1;
}

.paper-chart {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: auto minmax(230px, 1fr) auto auto;
    gap: 7px 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--research-line);
    background: #f7faf9;
    color: #14201c;
}

.topology-mini-chart {
    display: block;
    min-height: 0;
}

.topology-mini-chart .paper-chart span {
    flex: initial;
    min-width: 0;
    border-radius: 0;
    background: transparent;
}

.topology-mini-chart .paper-chart-bar.is-reference {
    min-width: 6px;
    border: 1px solid #245d77;
    background: #70b7d5;
}

.topology-mini-chart .paper-chart-bar.is-comparison {
    min-width: 6px;
    border: 1px solid #81672c;
    background: #e5bd5f;
}

.paper-chart-title {
    grid-column: 1 / -1;
    margin: 0;
    color: #111b18;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

.paper-chart-y-axis {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    place-items: center;
    color: #263d35;
    font-size: 13px;
    font-weight: 700;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.paper-chart-plot {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    display: flex;
    align-items: end;
    gap: 5px;
    min-width: 0;
    min-height: 230px;
    padding: 12px 10px 26px 38px;
    border-left: 2px solid #344b43;
    border-bottom: 2px solid #344b43;
    background:
        repeating-linear-gradient(to top, rgba(70, 97, 88, 0.12) 0 1px, transparent 1px 25%),
        #fff;
}

.paper-chart-plot::before {
    content: attr(data-y-max);
    position: absolute;
    top: 4px;
    left: 5px;
    color: #51665f;
    font-size: 11px;
}

.paper-chart-bar {
    position: relative;
    flex: 1 1 18px;
    min-width: 6px;
    max-width: 28px;
    border: 1px solid #245d77;
    background: #70b7d5;
}

.paper-chart-bar:nth-child(even) {
    border-color: #81672c;
    background: #e5bd5f;
}

.paper-chart-bar.is-reference,
.paper-chart-legend i.is-reference {
    border-color: #245d77;
    background: #70b7d5;
}

.paper-chart-bar.is-comparison,
.paper-chart-legend i.is-comparison {
    border-color: #81672c;
    background: #e5bd5f;
}

.paper-chart-bar > span {
    position: absolute;
    bottom: -23px;
    left: 50%;
    max-width: 64px;
    overflow: hidden;
    color: #40564e;
    font-size: 10px;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    white-space: nowrap;
}

.paper-chart-x-axis {
    grid-column: 2;
    grid-row: 3;
    color: #263d35;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.paper-chart-legend {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    color: #314840;
    font-size: 12px;
    line-height: 1.4;
}

.paper-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.paper-chart-legend i {
    width: 14px;
    height: 10px;
    border: 1px solid #245d77;
    background: #70b7d5;
}

.paper-svg-chart {
    margin: 12px 0 0;
    padding: 10px;
    border: 1px solid var(--research-line);
    background: #f7faf9;
}

.paper-svg-chart svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 260px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.paper-svg-chart figcaption {
    margin-top: 6px;
    color: #3e554d;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

html[lang="zh-Hant"] body,
html[lang="zh"] body {
    line-height: 1.68;
}

html[lang="zh-Hant"] .help-text,
html[lang="zh-Hant"] .observable-card,
html[lang="zh-Hant"] .topology-card,
html[lang="zh"] .help-text,
html[lang="zh"] .observable-card,
html[lang="zh"] .topology-card {
    line-height: 1.72;
}

@media (max-width: 720px) {
    body {
        font-size: 16px;
    }

    .panel-heading h2 {
        font-size: 19px;
    }

    .viz-card h3 {
        font-size: 17px;
    }

    .help-text,
    .status-pill,
    .metadata-card,
    .observable-card,
    .topology-card,
    .validation-card,
    .run-log,
    .difference-list,
    .selected-cell-panel,
    .comparison-grid p,
    .viz-card p,
    table,
    label,
    legend,
    summary {
        font-size: 15px;
    }

    .metadata-grid dt,
    .estimate-grid dt,
    .run-status dt,
    .phase-compact-summary dt,
    .topology-summary-strip dt {
        font-size: 14px;
    }

    .metadata-grid dd,
    .estimate-grid dd,
    .run-status dd,
    .phase-compact-summary dd,
    .topology-summary-strip dd {
        font-size: 16px;
        line-height: 1.65;
    }

    code {
        font-size: 13px;
    }

    .topology-card code {
        font-size: 13px;
    }

    .check-item strong,
    .validation-card strong,
    .hash-card strong,
    .stored-item strong {
        font-size: 15px;
    }

    button,
    select,
    input,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    .phase-canvas-card canvas {
        min-height: 300px;
        aspect-ratio: 4 / 3;
    }

    .phase-visual-grid,
    .topology-visual-grid {
        grid-template-columns: 1fr;
    }

    .phase-method-heading,
    .phase-method-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .phase-method-grid dt {
        font-size: 15px;
    }

    .phase-method-grid dd {
        font-size: 16px;
        line-height: 1.7;
    }

    .lower-grid,
    #comparisonDashboard .comparison-grid {
        grid-template-columns: 1fr;
    }

    .topology-visual-grid > .viz-card:first-child {
        grid-column: 1;
    }

    .paper-chart {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 9px;
    }

    .research-formula-panel {
        grid-template-columns: 1fr;
    }

    .paper-chart-plot {
        min-height: 210px;
        gap: 3px;
        padding-left: 28px;
    }

    th,
    td {
        min-width: 112px;
        padding: 10px;
    }
}