:root {
  --ink: #121f37;
  --muted: #607087;
  --line: #dce7ed;
  --line-strong: #c7d7d2;
  --paper: #ffffff;
  --canvas: #f4f8fa;
  --mint: #e2f5fb;
  --mint-strong: #acddec;
  --green: #118bb6;
  --green-dark: #0b6689;
  --accent: #17a8d7;
  --text-primary: #121f37;
  --motif-line: #121f37;
  --motif-arc: #17a8d7;
  --amber: #b56d24;
  --amber-bg: #fff8ed;
  --shadow: 0 18px 50px rgba(24, 58, 49, .08);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; }
.topbar {
  height: 86px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
}
.brand, .top-actions, .summary-heading, .progress-copy, .section-hero { display: flex; align-items: center; }
.brand { gap: 14px; }
.medkarta-logo { line-height: 0; }
.brand-divider { width: 1px; height: 34px; background: var(--line-strong); }
.brand h1, .summary-heading h2 { margin: 1px 0 0; font-size: 20px; letter-spacing: -.02em; }
.eyebrow, .step-label { margin: 0; color: var(--green); text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 800; }
.top-actions { gap: 12px; }
.privacy-pill { padding: 8px 12px; background: var(--mint); color: var(--green-dark); border-radius: 999px; font-size: 12px; font-weight: 650; }

.workspace { display: grid; grid-template-columns: 242px minmax(440px, 1fr) clamp(500px, 30vw, 600px); min-height: calc(100vh - 86px); }
.sidebar { border-right: 1px solid var(--line); padding: 24px 18px; background: #f8faf9; }
.progress-card { padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 18px; }
.progress-copy { justify-content: space-between; font-size: 12px; color: var(--muted); }
.progress-copy strong { font-size: 14px; color: var(--green); }
.progress-track { height: 6px; margin: 11px 0 9px; background: #eaf0ee; overflow: hidden; border-radius: 9px; }
.progress-track span { display: block; height: 100%; width: 0; background: var(--green); border-radius: inherit; transition: width .25s ease; }
.progress-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
#sectionNav { display: grid; gap: 5px; }
.nav-button {
  width: 100%; border: 0; background: transparent; padding: 11px 12px; border-radius: 12px;
  display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; text-align: left;
  cursor: pointer; color: #557069; transition: .18s ease;
}
.nav-button:hover { background: #edf4f1; color: var(--ink); }
.nav-button.active { background: var(--mint); color: var(--green-dark); font-weight: 750; }
.nav-index { width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 9px; display: grid; place-items: center; font-size: 11px; }
.nav-button.active .nav-index { background: var(--green); color: #fff; border-color: var(--green); }
.nav-label { font-size: 13px; }
.nav-status { width: 7px; height: 7px; border-radius: 50%; background: #d5dfdc; }
.nav-status.has-data { background: var(--green); }
.source-note { margin: 26px 8px 0; border-top: 1px solid var(--line); padding-top: 18px; }
.source-note span { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: .09em; }
.source-note p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.main-panel { padding: 34px clamp(24px, 4vw, 62px) 50px; overflow: hidden; }
.section-hero { justify-content: space-between; align-items: flex-end; gap: 22px; margin-bottom: 18px; }
.section-hero h2 { margin: 5px 0 5px; font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.035em; }
.section-hero p:not(.step-label) { color: var(--muted); margin: 0; max-width: 650px; line-height: 1.5; font-size: 14px; }
.section-counter { color: var(--muted); font-size: 12px; white-space: nowrap; }
.notice { padding: 13px 15px; border-radius: 12px; background: var(--amber-bg); color: #72502c; border: 1px solid #f0dfc5; font-size: 12px; line-height: 1.5; margin-bottom: 20px; }

#questionForm { display: grid; gap: 14px; }
.question-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 19px; box-shadow: 0 5px 18px rgba(23,51,45,.025); }
.question-card.missing { border-color: #c95353; box-shadow: 0 0 0 3px rgba(201,83,83,.12); }
.question-card.is-required .question-title::after { content: " · обязательно"; color: var(--amber); font-size: 10px; font-weight: 700; }
.question-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 13px; }
.question-number { min-width: 28px; height: 28px; border-radius: 9px; background: #eef5f2; color: var(--green); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.question-title { margin: 1px 0 0; font-size: 14px; line-height: 1.45; }
.question-hint { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option {
  position: relative; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 11px; cursor: pointer; color: #3d5750; font-size: 12px; line-height: 1.35;
  transition: .15s ease; background: #fff;
}
.option:hover { border-color: var(--mint-strong); background: #f9fcfb; }
.option:has(input:checked) { border-color: var(--green); background: var(--mint); color: var(--green-dark); }
.option input { margin: 1px 0 0; accent-color: var(--green); }
.text-input, .number-input, .text-area {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 12px;
  color: var(--ink); background: #fbfdfc; outline: none; transition: .15s ease; font-size: 13px;
}
.text-input:focus, .number-input:focus, .text-area:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,107,88,.09); }
.text-area { min-height: 82px; resize: vertical; line-height: 1.5; }
.compound-row { display: grid; grid-template-columns: 160px 1fr; gap: 10px; }
.unit-box { position: relative; }
.unit-box span { position: absolute; right: 12px; top: 11px; font-size: 12px; color: var(--muted); }
.unit-box input { padding-right: 50px; }
.form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.validation-panel { margin-top: 18px; border-radius: 14px; padding: 15px 17px; font-size: 12px; line-height: 1.45; }
.validation-panel[hidden] { display: none; }
.validation-panel.error { border: 1px solid #edc8c8; background: #fff5f5; color: #743434; }
.validation-panel.success { border: 1px solid #b9dfd3; background: #f0faf7; color: #205e4c; }
.validation-panel p { margin: 4px 0 0; }
.validation-panel ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.validation-panel button { width: 100%; display: flex; gap: 9px; align-items: baseline; border: 1px solid rgba(116,52,52,.16); border-radius: 9px; background: #fff; padding: 9px 10px; text-align: left; cursor: pointer; color: inherit; }
.validation-panel button:hover { border-color: #c95353; }
.validation-panel button .validation-section { min-width: 88px; color: #9b5555; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.validation-panel button .validation-copy { display: grid; gap: 2px; }
.validation-panel button small { color: #9b5555; font-size: 10px; font-weight: 500; }
.button { border: 0; border-radius: 11px; padding: 10px 15px; font-weight: 750; font-size: 12px; cursor: pointer; transition: .16s ease; }
.button.primary { background: var(--green); color: #fff; box-shadow: 0 7px 18px rgba(31,107,88,.18); }
.button.primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.button.ghost { background: #fff; border: 1px solid var(--line-strong); }
.button.ghost:hover { background: #f8fbfa; border-color: #acc7be; }
.button.subtle { background: #edf4f1; color: var(--green-dark); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.summary-panel { border-left: 1px solid var(--line); background: var(--paper); padding: 28px 24px; position: sticky; top: 86px; height: calc(100vh - 86px); overflow-y: auto; }
.summary-heading { justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.live-dot { color: var(--green); background: var(--mint); padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.summary-preview { display: grid; gap: 13px; }
.summary-block { padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; }
.summary-block h3 { margin: 0 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--green); }
.summary-block p { margin: 0; color: #48615a; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.summary-block.empty p { color: #96a6a1; font-style: italic; }
.summary-actions { display: grid; gap: 8px; margin-top: 18px; }
.print-brand { display: none; }
.clinical-footer { min-height: 72px; display: flex; align-items: center; gap: 24px; padding: 18px 28px; border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 11px; }
.clinical-footer .footer-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 750; white-space: nowrap; }
.clinical-footer p { margin: 0; flex: 1; text-align: center; }
.clinical-footer a { color: var(--green-dark); font-weight: 750; text-decoration: none; }
.wide { width: 100%; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 12px; transition: .2s ease; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 220px 1fr; }
  .summary-panel { position: static; height: auto; grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 28px clamp(24px, 6vw, 72px); }
}
@media (max-width: 760px) {
  .topbar { height: auto; min-height: 74px; padding: 12px 16px; }
  .privacy-pill { display: none; }
  .workspace { display: block; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; position: sticky; top: 74px; z-index: 15; }
  .progress-card, .source-note { display: none; }
  #sectionNav { display: flex; overflow-x: auto; gap: 7px; padding-bottom: 2px; scrollbar-width: none; }
  .nav-button { width: auto; min-width: max-content; grid-template-columns: 24px 1fr; padding: 8px 10px; border: 1px solid var(--line); background: #fff; }
  .nav-status { display: none; }
  .nav-index { width: 22px; height: 22px; }
  .main-panel { padding: 26px 16px 36px; }
  .option-grid { grid-template-columns: 1fr; }
  .compound-row { grid-template-columns: 1fr; }
  .section-hero { align-items: flex-start; }
  .section-counter { display: none; }
  .brand-divider { display: none; }
  .brand h1 { font-size: 16px; }
  .clinical-footer { align-items: flex-start; flex-direction: column; gap: 10px; padding: 18px 16px; }
  .clinical-footer p { text-align: left; }
}

@media print {
  body { background: #fff; }
  .topbar, .sidebar, .main-panel, .summary-actions, .live-dot, .clinical-footer { display: none !important; }
  .workspace { display: block; }
  .summary-panel { position: static; display: block; border: 0; height: auto; padding: 0; }
  .summary-heading h2 { font-size: 24px; }
  .summary-block { break-inside: avoid; border-color: #bbb; }
  .print-brand { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #bbb; color: var(--ink); font-size: 11px; font-weight: 700; }
}