:root {
  color-scheme: light;
  --blue: #203b8c;
  --blue-bright: #0750f6;
  --orange: #ee742f;
  --ink: #101319;
  --muted: #656b78;
  --line: #d9dde5;
  --gray: #f5f4f5;
  --blue-pale: #eef2ff;
  font-family: "Inter V", "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--gray); }
body { margin: 0; min-width: 320px; background: var(--gray); color: var(--ink); }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
  height: 82px;
  padding: 0 max(28px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  gap: 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: 174px; height: auto; }
.product-name { height: 38px; padding-left: 27px; border-left: 1px solid #ced3dc; display: flex; flex-direction: column; justify-content: center; }
.product-name span { font-family: Raleway, sans-serif; font-size: 13px; font-weight: 700; }
.product-name small { margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .02em; }
.privacy-chip { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #515765; font-size: 11px; }
.privacy-dot { width: 8px; height: 8px; background: var(--orange); box-shadow: 0 0 0 5px rgba(238,116,47,.11); }

.workspace { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0 18px; }
.intro { margin-bottom: 38px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); align-items: stretch; border-bottom: 1px solid var(--blue); }
.intro-copy { padding: 16px 44px 42px 0; }
.eyebrow { margin: 0 0 23px; display: flex; align-items: center; gap: 12px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.eyebrow span { min-width: 29px; padding-right: 11px; color: var(--orange); border-right: 1px solid var(--orange); }
h1, h2, h3, .step b { font-family: Raleway, sans-serif; }
h1 { margin: 0; color: #181b21; font-size: clamp(42px, 5vw, 68px); font-weight: 700; line-height: .99; letter-spacing: -.035em; }
h1 em { color: var(--blue); font-style: normal; }
.lead { max-width: 670px; margin: 24px 0 26px; color: #5f6571; font-size: 15px; line-height: 1.62; }
.intro-tags { display: flex; align-items: center; gap: 8px; }
.intro-tags span { padding: 6px 9px; color: var(--blue); border: 1px solid #cbd3e5; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.intro-tags i { width: 26px; border-top: 1px solid var(--orange); }
.intro-tags small { color: #777c86; font-size: 9px; }

.brand-panel { position: relative; min-height: 330px; padding: 39px 37px 29px; display: flex; flex-direction: column; overflow: hidden; background: var(--blue) url('/assets/pattern-biochek.png') center / cover no-repeat; color: #fff; }
.brand-panel > img { z-index: 2; width: 182px; height: auto; }
.brand-panel > p { z-index: 2; margin: auto 0 0; display: flex; flex-direction: column; }
.brand-panel > p span { color: #bdcbfa; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.brand-panel > p b { margin-top: 9px; font-family: Raleway, sans-serif; font-size: 25px; line-height: 1.05; }
.brand-panel > small { z-index: 2; margin-top: 25px; color: #d9e0fb; font-size: 8px; letter-spacing: .13em; }

.studio-card { overflow: hidden; background: #fff; border: 1px solid #d4d9e2; box-shadow: 0 20px 54px rgba(22,39,82,.09); }
.steps { min-height: 82px; display: grid; grid-template-columns: repeat(3, 1fr); background: #fafafa; border-bottom: 1px solid var(--line); }
.step { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 28px; color: #9297a2; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 23px; right: 0; height: 36px; border-right: 1px solid #d9dde4; }
.step > span { color: #a0a5af; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.step div { display: flex; flex-direction: column; }
.step b { color: #545b68; font-size: 12px; }
.step small { margin-top: 5px; font-size: 9px; }
.step.active { background: #fff; box-shadow: inset 0 -3px 0 var(--blue-bright); }
.step.active > span { color: var(--orange); }
.step.active b { color: var(--ink); }
.step.done > span { color: #2f9167; }
.step.done > span::before { content: "✓ "; }

.studio-grid { display: grid; grid-template-columns: 46% 54%; min-height: 690px; }
.controls { padding: 35px 42px 38px; border-right: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.section-heading.compact { margin-top: 2px; margin-bottom: 19px; }
.section-number { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--blue); font-size: 10px; font-weight: 700; }
.section-heading h2 { margin: 0; font-size: 17px; }
.section-heading p { margin: 4px 0 0; color: #898e99; font-size: 10px; }

.dropzone { min-height: 142px; padding: 24px; display: flex; align-items: center; gap: 15px; border: 1.5px dashed #aeb5c2; background: #fbfbfc; transition: .18s ease; }
.dropzone:hover, .dropzone.dragging { border-color: var(--blue-bright); background: #f2f5ff; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-icon { width: 47px; height: 47px; flex: 0 0 auto; display: grid; place-items: center; background: var(--blue-pale); color: var(--blue-bright); }
.upload-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drop-copy { display: flex; flex-direction: column; }
.drop-copy b { font-family: Raleway, sans-serif; font-size: 12px; }
.drop-copy small { margin-top: 6px; color: #8a8f99; font-size: 10px; }
.choose-button { margin-left: auto; padding: 10px 13px; border: 1px solid #ccd2dc; background: #fff; color: #343a46; font-size: 9px; font-weight: 700; white-space: nowrap; }
.file-card { margin-top: 10px; min-height: 60px; padding: 9px 11px; display: flex; align-items: center; gap: 12px; border: 1px solid #d5dbe4; }
.file-type { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--blue); font-size: 8px; font-weight: 700; }
.file-meta { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.file-meta b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.file-meta small { margin-top: 4px; color: #8b909a; font-size: 8px; }
.icon-button { width: 30px; height: 30px; border: 0; background: transparent; color: #89909c; font-size: 22px; }
.icon-button:hover { color: #d23c3c; background: #fff1f1; }
.divider { margin: 28px 0 25px; border-top: 1px solid #e1e4e9; }

.field { display: block; margin-top: 15px; }
.field > span { display: flex; justify-content: space-between; margin-bottom: 8px; color: #454b57; font-size: 9px; font-weight: 700; }
.field em { color: #9ba0a9; font-style: normal; font-weight: 400; }
.field input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #cfd5df; outline: none; color: var(--ink); font-size: 11px; }
.field input:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(7,80,246,.09); }
.field input::placeholder { color: #a4a9b2; }
.preserve-note { margin-top: 18px; padding: 13px; display: flex; align-items: center; gap: 11px; background: #f4f7f5; border-left: 3px solid #29906a; }
.check-icon { width: 23px; height: 23px; display: grid; place-items: center; color: #fff; background: #29906a; border-radius: 50%; font-size: 10px; }
.preserve-note div { display: flex; flex-direction: column; }
.preserve-note b { font-size: 9px; }
.preserve-note small { margin-top: 4px; color: #69766f; font-size: 8px; }
.primary-button { width: 100%; height: 51px; margin-top: 22px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; background: var(--blue); color: #fff; font-family: Raleway, sans-serif; font-size: 11px; font-weight: 700; transition: .18s ease; }
.primary-button:hover:not(:disabled) { background: #172f7b; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(32,59,140,.2); }
.primary-button:disabled { background: #c8ccd4; cursor: not-allowed; }
.primary-button svg, .download-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.form-error { min-height: 15px; margin: 9px 0 0; color: #c93636; font-size: 9px; text-align: center; }

.preview-panel { position: relative; min-width: 0; min-height: 690px; display: flex; flex-direction: column; background: #e9ebf0; }
.preview-toolbar { height: 55px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: #fafafa; border-bottom: 1px solid var(--line); }
.preview-toolbar div { display: flex; align-items: center; gap: 9px; }
.preview-toolbar b { font-family: Raleway, sans-serif; font-size: 10px; }
.status-dot { width: 6px; height: 6px; background: var(--orange); }
.page-count { padding: 5px 8px; color: var(--blue); background: #edf0f5; font-size: 8px; font-weight: 700; }
.empty-preview, .processing { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.empty-preview h3, .processing h3 { margin: 25px 0 7px; font-size: 12px; }
.empty-preview p, .processing p { margin: 0; color: #858b96; font-size: 9px; line-height: 1.55; }

.document-ghost { position: relative; width: 194px; height: 274px; overflow: hidden; background: #fff; box-shadow: 0 14px 36px rgba(25,36,59,.14); }
.ghost-header { position: relative; height: 32px; padding: 8px 13px; display: flex; align-items: flex-start; overflow: hidden; background: var(--blue); }
.ghost-header::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 49%; background: url('/assets/footer-pattern-left.png') center / 100% 100% no-repeat; }
.ghost-header img { position: relative; z-index: 1; width: 67px; height: auto; }
.ghost-header span { position: relative; z-index: 1; width: 59px; height: 6px; margin: 4px 0 0 auto; background: #fff; }
.ghost-body { padding: 35px 25px 46px; display: flex; flex-direction: column; gap: 9px; }
.ghost-body b { width: 61%; height: 7px; background: #c4cad4; }
.ghost-body span { height: 4px; background: #e1e4e9; }
.ghost-body span:nth-of-type(2) { width: 85%; }
.ghost-body span:nth-of-type(4) { width: 72%; }
.ghost-footer { position: absolute; right: 0; bottom: 0; left: 0; height: 32px; overflow: hidden; background: var(--blue) url('/assets/footer-biochek-source.png') center / 100% 100% no-repeat; }
.ghost-footer::after { content: ""; position: absolute; top: 0; right: 0; width: 24.5%; height: 100%; background: #203c8d; }

.spinner { width: 56px; height: 56px; padding: 6px; border: 1px solid #cdd3de; border-radius: 50%; }
.spinner span { width: 100%; height: 100%; display: block; border: 3px solid #dce3f6; border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { width: 220px; height: 3px; margin-top: 20px; overflow: hidden; background: #d2d6df; }
.progress-track i { display: block; width: 10%; height: 100%; background: var(--blue-bright); transition: width .5s ease; }

.pdf-preview { flex: 1; min-height: 0; padding: 20px; display: grid; place-items: center; overflow: hidden; }
.preview-sheet { position: relative; width: min(78%, 455px); aspect-ratio: 210 / 297; overflow: hidden; background: #fff; box-shadow: 0 15px 42px rgba(25,36,59,.17); }
.sheet-header { position: relative; height: 11.4%; padding: 3.3% 7%; display: flex; align-items: center; gap: 8%; overflow: hidden; background: var(--blue); }
.sheet-header::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 49%; background: url('/assets/footer-pattern-left.png') center / 100% 100% no-repeat; }
.sheet-header > img { position: relative; z-index: 1; width: 28%; height: auto; }
.sheet-header span { position: relative; z-index: 1; min-width: 0; margin-left: auto; display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; }
.sheet-header strong { width: 100%; overflow: hidden; color: #fff; font-family: Raleway, sans-serif; font-size: clamp(5px, .7vw, 8px); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.sheet-header small { width: 100%; margin-top: 4%; overflow: hidden; color: #fff; font-size: clamp(4px, .62vw, 7px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.sheet-content { padding: 15% 14% 13%; }
.sheet-line { height: 4px; margin-top: 3.3%; background: #e1e4e9; }
.sheet-line.strong { width: 65%; height: 7px; background: #c2c8d2; }
.sheet-line.medium { width: 82%; }
.sheet-line.short { width: 58%; }
.sheet-highlight { width: 29%; height: 8px; margin-top: 7%; background: #fff079; }
.sheet-highlight.small { width: 20%; }
.sheet-gap { height: 25px; }
.sheet-footer { position: absolute; right: 0; bottom: 0; left: 0; height: 11.4%; padding: 3% 7%; display: flex; align-items: center; overflow: hidden; background: var(--blue) url('/assets/footer-biochek-source.png') center / 100% 100% no-repeat; color: #fff; font-size: clamp(3px, .5vw, 6px); }
.sheet-footer::after { content: ""; position: absolute; top: 0; right: 0; width: 24.5%; height: 100%; background: #203c8d; }
.sheet-footer b { z-index: 2; margin-left: auto; }

.result-actions { min-height: 74px; padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border-top: 1px solid var(--line); }
.result-actions > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.success-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e6f6ef; color: #17875b; font-size: 11px; font-weight: 700; }
.result-actions p { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.result-actions b { font-size: 9px; }
.result-actions small { max-width: 180px; margin-top: 3px; overflow: hidden; color: #888e98; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.download-button { height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font-size: 9px; font-weight: 700; white-space: nowrap; }
.download-button:hover { color: #fff; background: var(--blue); }

.security-note { margin: 20px 0; padding: 15px 18px; display: flex; align-items: center; gap: 13px; border: 1px solid #d9dde5; background: #fff; }
.security-note svg { width: 24px; flex: 0 0 auto; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.security-note p { margin: 0; display: flex; flex-direction: column; }
.security-note b { font-size: 10px; }
.security-note span { margin-top: 4px; color: #777d87; font-size: 9px; }
.footer { width: min(1180px, calc(100% - 48px)); height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; color: #90959e; font-size: 8px; }

@media (max-width: 900px) {
  .topbar { padding: 0 22px; }
  .product-name { display: none; }
  .workspace { width: min(680px, calc(100% - 28px)); padding-top: 38px; }
  .intro { grid-template-columns: 1fr; }
  .intro-copy { padding-right: 0; }
  .brand-panel { min-height: 260px; }
  .studio-grid { grid-template-columns: 1fr; }
  .controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-panel { min-height: 650px; }
}

@media (max-width: 560px) {
  .topbar { height: 68px; padding: 0 16px; }
  .brand img { width: 142px; }
  .privacy-chip { font-size: 0; }
  .workspace { width: calc(100% - 20px); padding-top: 28px; }
  .intro-copy { padding-top: 8px; padding-bottom: 30px; }
  h1 { font-size: 39px; }
  .lead { font-size: 13px; }
  .brand-panel { min-height: 230px; padding: 28px; }
  .steps { min-height: 58px; }
  .step { padding: 14px 10px; justify-content: center; }
  .step div { display: none; }
  .step:not(:last-child)::after { top: 15px; height: 28px; }
  .controls { padding: 28px 20px; }
  .dropzone { flex-wrap: wrap; }
  .choose-button { width: 100%; margin: 2px 0 0; text-align: center; }
  .pdf-preview { padding: 14px; }
  .preview-sheet { width: min(92%, 390px); }
  .result-actions { align-items: stretch; flex-direction: column; }
  .download-button { justify-content: center; }
}