:root {
    color-scheme: dark;
    --page: #101622;
    --panel: #192231;
    --panel-soft: #131d2b;
    --field: #101925;
    --text: #eaf0f8;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23eaf0f8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --muted: #9dacc1;
    --line: #2b394c;
    --accent: #5ee0c2;
    --accent-ink: #082b24;
    --accent-soft: #183a38;
    --danger: #ffb0ad;
    --shadow: 0 12px 36px rgb(0 0 0 / 12%);
    --header-height: 72px;
    --sidebar-width: 272px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --page: #f4f7fb;
    --panel: #ffffff;
    --panel-soft: #edf3f8;
    --field: #f9fbfd;
    --text: #17283d;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%2317283d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --muted: #52657b;
    --line: #d5e0eb;
    --accent: #087f70;
    --accent-ink: #ffffff;
    --accent-soft: #e0f5ef;
    --danger: #a52630;
    --shadow: 0 10px 32px rgb(35 60 90 / 5%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; min-height: 100%; background: var(--page); scrollbar-gutter: stable; }
body { margin: 0; background: var(--page); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
button { color: inherit; }
svg { vertical-align: middle; flex-shrink: 0; }
button svg { width: 20px; height: 20px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.025em; }
h1 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
h2 { font-size: 1.2rem; }
small { color: var(--muted); }

.site-header, body > header {
    position: sticky; top: 0; z-index: 30; min-height: var(--header-height);
    display: flex; align-items: center; gap: 16px; padding: 12px 28px;
    background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 1.2rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.brand svg { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
#theme-toggle { margin-left: auto; }
#theme-toggle, #nav-toggle, .retry-button, .button-link, a.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 9px 14px; background: var(--panel-soft);
    border: 1px solid var(--line); border-radius: 10px; color: var(--text);
    font-size: .88rem; font-weight: 650; text-decoration: none;
}
#theme-toggle:hover, #nav-toggle:hover { border-color: var(--accent); }
#nav-toggle { display: none; min-width: 44px; }
#site-nav {
    position: fixed; top: var(--header-height); bottom: 0; left: 0; z-index: 20;
    width: var(--sidebar-width); padding: 28px 18px; overflow-y: auto;
    background: var(--panel); border-right: 1px solid var(--line);
}
#site-nav ul { list-style: none; margin: 0; padding: 0; }
#site-nav li { margin: 0 0 5px; }
#site-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px; color: var(--muted); font-size: .91rem; font-weight: 550; text-decoration: none; }
#site-nav a:hover { color: var(--text); background: var(--panel-soft); }
#site-nav a[aria-current="page"], #site-nav a.active { color: var(--accent); background: var(--accent-soft); }
#site-nav .nav-heading, .nav-heading, .nav-caption { padding: 0 12px; margin: 0 0 15px; color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .14em; }
#site-nav > a { margin-bottom: 4px; }
.nav-secondary { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
#site-nav hr { margin: 20px 12px; border: 0; border-top: 1px solid var(--line); }
.site-shell main, body > main { margin-left: var(--sidebar-width); padding: 38px clamp(22px, 4vw, 60px) 60px; min-width: 0; }
main { max-width: 1580px; }
.page-heading { margin-bottom: 28px; max-width: 780px; }
#page-title { margin-bottom: 10px; }
#page-description { max-width: 760px; color: var(--muted); font-size: .96rem; }

#calculator-app { display: grid; gap: 24px; max-width: 1050px; min-width: 0; }
.calculator-card { min-width: 0; padding: 26px 28px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.card-title { margin-bottom: 8px; }
.card-description { color: var(--muted); margin-bottom: 20px; font-size: .9rem; max-width: 720px; }
.calculator-form { margin-top: 24px; }
.fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
.field { min-width: 0; }
.field-label { display: block; margin: 0 0 8px; font-size: .87rem; font-weight: 600; line-height: 1.4; }
.field-input-line { display: flex; align-items: center; min-width: 0; position: relative; }
.field-control { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 10px 13px; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: 9px; font-variant-numeric: tabular-nums; }
select.field-control { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 12px; }
.field-control:hover:not(:read-only) { border-color: var(--muted); }
.field-control:focus { border-color: var(--accent); }
.field-control[aria-invalid="true"] { border-color: var(--danger); }
.field-unit { flex-shrink: 0; padding-left: 11px; color: var(--muted); font-size: .83rem; max-width: 90px; overflow-wrap: anywhere; }
.field-derived .field-control { background: var(--accent-soft); color: var(--accent); border-style: dashed; }
.field-error { color: var(--danger); font-size: .8rem; margin: 6px 0 0; }
.field-hint { color: var(--muted); font-size: .72rem; margin: 6px 0 0; }
.checkbox-field { display: flex; align-items: center; gap: 10px; align-self: end; min-height: 46px; flex-wrap: wrap; }
.checkbox-field .field-input-line { flex: 0 0 22px; }
.checkbox-field .field-control { width: 20px; min-height: 20px; height: 20px; accent-color: var(--accent); }
.checkbox-field .field-label { flex: 1; margin: 0; cursor: pointer; }
.checkbox-field .field-error { flex: 1 0 100%; }
.action-field { grid-column: 1 / -1; max-width: 430px; }
.calculation-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; min-height: 25px; }
.status-text { color: var(--muted); font-size: .78rem; margin: 0; }
[data-status="success"] .status-text { color: var(--accent); }
[data-status="networkError"] .status-text, [data-status="invalid"] .status-text { color: var(--danger); }
[data-status="calculating"] .status-text::before { content: ""; display: inline-block; width: 9px; height: 9px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; margin-right: 8px; animation: spin 1s linear infinite; }
.retry-button { flex-shrink: 0; background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.results-region { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.results-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .85rem; margin-bottom: 15px; }
.stale-note { color: var(--muted); font-size: .72rem; font-weight: 450; letter-spacing: 0; }
.results { display: grid; gap: 18px; }
.result-group-title { font-size: .83rem; color: var(--muted); margin-bottom: 7px; }
.result-list { margin: 0; }
.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.result-row:last-child { border-bottom: 0; }
.result-label { color: var(--muted); font-size: .87rem; min-width: 0; overflow-wrap: anywhere; }
.result-value { margin: 0; color: var(--text); font-size: 1.1rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; min-width: 0; flex-shrink: 0; }
.result-unit { color: var(--muted); font-size: .77rem; font-weight: 450; margin-left: 7px; white-space: nowrap; }
.info-panel, .about-card, .statistics-card { max-width: 900px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }
.info-panel p:last-child, .about-card p:last-child { margin-bottom: 0; }
.about-content { max-width: 900px; line-height: 1.7; }
.about-content h2:not(:first-child) { margin-top: 30px; }
.about-content p:last-child { margin-bottom: 0; }
.results-grid { margin: 0; }
.statistics-layout { display: grid; gap: 24px; min-width: 0; }
.statistics-layout .result-item dt { min-width: 0; overflow-wrap: anywhere; }
.statistics-layout .result-item dd { flex-shrink: 0; white-space: nowrap; }
.statistics-note { color: var(--muted); font-size: .84rem; margin: 16px 0 0; }
.cpu-chart-scroll { max-width: 100%; overflow-x: auto; direction: rtl; }
.cpu-history-chart { display: block; width: 100%; min-width: 640px; direction: ltr; }
.cpu-chart-grid { stroke: var(--line); stroke-width: 1; }
.cpu-chart-label { fill: var(--muted); font-size: 16px; font-variant-numeric: tabular-nums; }
.cpu-history-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cpu-history-point { fill: var(--accent); }
.cpu-history-empty { color: var(--muted); margin: 0 0 12px; }
.cpu-scroll-hint { display: none; }
@media (max-width: 700px) { .cpu-scroll-hint { display: block; } }
.cpu-history-details { margin-top: 12px; }
.cpu-history-details summary { cursor: pointer; color: var(--accent); }
.cpu-history-table-scroll { max-height: 320px; overflow: auto; margin-top: 12px; }
.cpu-history-table { font-size: .85rem; font-variant-numeric: tabular-nums; }
.cpu-history-table th, .cpu-history-table td { white-space: nowrap; }
.cpu-history-table tbody th { font-weight: 450; }
.result-item { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.result-item:last-child { border-bottom: 0; }
.result-item dt { color: var(--muted); }
.result-item dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.info-panel li, .about-card li { margin-bottom: 8px; }
.info-panel img, main img { max-width: 100%; height: auto; }
main table { width: 100%; border-collapse: collapse; background: var(--panel); }
main th, main td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
.result-table-scroll { max-width: 100%; overflow-x: auto; }
.dilution-results { table-layout: auto; }
.dilution-results .result-row { display: table-row; }
.dilution-results th, .dilution-results td { padding: 12px 6px; vertical-align: baseline; }
.dilution-results th:first-child { padding-left: 0; }
.dilution-results thead th { font-size: .82rem; color: var(--muted); font-weight: 600; }
.dilution-results thead th:not(:first-child) { text-align: right; }
.dilution-results tbody th { font-weight: 450; overflow-wrap: anywhere; }
.dilution-results .result-value { width: 1%; white-space: nowrap; overflow-wrap: normal; }
.dilution-results .result-unit { display: inline; margin: 0 0 0 4px; white-space: nowrap; }
.dilution-results tbody tr:last-child > * { border-bottom: 0; }
.persistence-warning, .page-error { padding: 12px 16px; margin-bottom: 20px; color: var(--danger); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: .85rem; }
.nav-backdrop { display: none; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); border-radius: 8px; }
.skip-link:focus { top: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 1500px) { .fields-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { :root { --sidebar-width: 240px; } .calculator-card { padding: 22px; } .fields-grid { gap: 18px; } }
@media (max-width: 820px) {
    html { overscroll-behavior-x: none; }
    :root { --header-height: 64px; }
    .site-header, body > header { padding: 10px 16px; gap: 10px; }
    .brand { font-size: 1.05rem; }
    #nav-toggle { display: inline-flex; padding: 8px; min-width: 40px; }
    #theme-toggle { font-size: .77rem; padding: 8px 10px; }
    #site-nav { z-index: 40; width: min(310px, calc(100vw - 48px)); transform: translateX(-100%); visibility: hidden; }
    .nav-open #site-nav { transform: translateX(0); visibility: visible; box-shadow: 12px 0 48px rgb(0 0 0 / 30%); }
    .nav-open { overflow: hidden; }
    .nav-open .nav-backdrop { display: block; position: fixed; inset: var(--header-height) 0 0; z-index: 35; border: 0; background: rgb(0 0 0 / 45%); }
    .site-shell main, body > main { margin-left: 0; padding: 28px 18px 40px; }
    .page-heading { margin-bottom: 22px; }
}
@media (max-width: 520px) {
    .site-header, body > header { padding: 10px 12px; gap: 8px; }
    .brand { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.15; }
    .brand span:last-child { max-width: 110px; white-space: normal; }
    #theme-toggle { min-width: 40px; max-width: 145px; line-height: 1.2; }
    .site-shell main, body > main { padding: 24px 12px 36px; }
    .calculator-card { padding: 21px 17px 17px; border-radius: 13px; }
    .fields-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .action-field { max-width: none; }
    .field-label { font-size: .86rem; }
    .result-label { font-size: .81rem; }
    .result-value { font-size: 1rem; }
    .result-unit { display: inline; }
    .info-panel, .about-card, .statistics-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { select.field-control { -webkit-appearance: auto; appearance: auto; background-image: none; } }