:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f7fb;
  color: #14243a;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.shell { max-width: 1060px; margin: 0 auto; padding: 38px 24px 64px; }
.topline { display: flex; align-items: center; gap: 10px; color: #53708e; font-size: 13px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.language-toggle { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid #c7d5e5; border-radius: 9px; background: #fff; letter-spacing: .06em; }
.language-toggle button { padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: #53708e; font-size: 12px; font-weight: 700; }
.language-toggle button:hover { color: #1646a2; }
.language-toggle button[aria-pressed="true"] { background: #1646a2; color: #fff; }
.mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #1646a2; color: #fff; font-size: 15px; letter-spacing: 0; }
h1 { max-width: 760px; margin: 42px 0 14px; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.lead { max-width: 690px; margin: 0 0 36px; color: #52667e; font-size: 18px; line-height: 1.6; }

.grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .85fr); gap: 20px; align-items: start; }
.card { border: 1px solid #dfe7f0; border-radius: 20px; background: #fff; box-shadow: 0 12px 35px rgba(25, 49, 80, .06); }
.form-card { padding: 30px; }
.card h2 { margin: 0 0 24px; font-size: 20px; letter-spacing: -.02em; }
.field-label { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.drop-zone { display: flex; align-items: center; gap: 16px; min-height: 110px; padding: 20px; border: 2px dashed #b8c9df; border-radius: 14px; background: #f8fbff; transition: border-color .15s, background .15s; cursor: pointer; }
.drop-zone:hover, .drop-zone.drag-over { border-color: #2b66c2; background: #eff6ff; }
.drop-zone.has-file { border-style: solid; border-color: #aacbbd; background: #f4fbf7; }
.file-icon { display: grid; place-items: center; flex: none; width: 45px; height: 45px; border-radius: 11px; background: #dbeafe; color: #1755ad; font-size: 22px; }
.file-text { display: block; min-width: 0; }
.file-text strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.file-text small { display: block; margin-top: 5px; color: #667a90; font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.field { margin-top: 24px; }
.text-input { width: 100%; padding: 14px 15px; border: 1px solid #bfd0e3; border-radius: 11px; outline: none; background: #fff; color: #14243a; font-size: 15px; }
.text-input:focus { border-color: #2760b7; box-shadow: 0 0 0 3px #dceafd; }
.hint { margin: 8px 0 0; color: #6b7e92; font-size: 13px; line-height: 1.5; }
.primary { width: 100%; margin-top: 28px; padding: 15px 20px; border: 0; border-radius: 11px; background: #1646a2; color: #fff; font-weight: 700; }
.primary:hover { background: #0d397f; }
.primary:disabled { opacity: .6; cursor: wait; }
.status { margin: 18px 0 0; padding: 13px 15px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.status[data-kind="info"] { background: #edf4ff; color: #23519c; }
.status[data-kind="error"] { background: #fff1ee; color: #a5362b; }
.status[data-kind="success"] { background: #eaf7ef; color: #16613b; }

.rules { padding: 27px; }
.rules h2 { margin-bottom: 17px; }
.rules ol { margin: 0; padding-left: 20px; color: #52667e; line-height: 1.65; }
.rules li + li { margin-top: 12px; }
.privacy { display: flex; gap: 10px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #e5ebf2; color: #4d6782; font-size: 13px; line-height: 1.5; }
.privacy b { color: #17734a; }

.result { margin-top: 22px; padding: 28px 30px 30px; }
.result-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.result h2 { margin-bottom: 6px; }
.result-summary { margin: 0; color: #60738a; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.download, .secondary { padding: 12px 17px; border-radius: 10px; font-weight: 700; }
.download { border: 1px solid #1646a2; background: #1646a2; color: #fff; }
.download:hover { background: #0d397f; }
.secondary { border: 1px solid #c7d5e5; background: #fff; color: #1f4f91; }
.secondary:hover { background: #f1f6fc; }
.preview-label { display: block; margin-bottom: 8px; color: #62788f; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
pre { max-height: 172px; overflow: auto; margin: 0; padding: 17px; border-radius: 11px; background: #10233e; color: #dceaff; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
footer { margin-top: 26px; color: #8b9bad; font-size: 12px; }

@media (max-width: 760px) {
  .shell { padding: 24px 16px 48px; }
  h1 { margin-top: 34px; }
  .grid { grid-template-columns: 1fr; }
  .form-card, .rules, .result { padding: 23px; }
}