/* Визуальная система — из страницы Тамары, без изменений. Мои дополнения ниже,
   отдельным блоком, чтобы её дизайн можно было отличить от служебных стилей. */
:root{
    --paper:#E7E4DB;
    --paper-2:#F1EFE8;
    --ink:#191E2A;
    --ink-soft:#5A6070;
    --rule:#B9B4A6;
    --shock:#D4006A;
    --ok:#1E5A3C;
    --stamp:#8A2036;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:16px;
    line-height:1.55;
  }
  .wrap{max-width:820px;margin:0 auto;padding:0 22px 90px}

  /* ---------- шапка-паспорт ---------- */
  .passport{
    border-bottom:2px solid var(--ink);
    padding:44px 0 18px;
    position:relative;
  }
  .eyebrow{
    font-family:ui-monospace,"SFMono-Regular","IBM Plex Mono",Menlo,monospace;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:18px;
  }
  h1{
    font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif;
    font-weight:400;
    font-size:clamp(34px,7vw,62px);
    line-height:1.02;
    margin:0 0 6px;
    letter-spacing:-.01em;
  }
  h1 em{font-style:italic;color:var(--shock)}
  .sub{font-size:17px;color:var(--ink-soft);max-width:52ch;margin:0 0 26px}
  .meta{
    display:flex;flex-wrap:wrap;gap:0;
    border-top:1px solid var(--rule);
    font-family:ui-monospace,"IBM Plex Mono",Menlo,monospace;
    font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  }
  .meta div{padding:10px 20px 10px 0;color:var(--ink-soft)}
  .meta b{display:block;color:var(--ink);font-weight:600;letter-spacing:.04em}

  .rules{
    background:var(--paper-2);
    border-left:3px solid var(--shock);
    padding:20px 22px;margin:28px 0 10px;
  }
  .rules p{margin:0 0 10px}
  .rules p:last-child{margin:0}
  .rules strong{font-weight:600}

  .namebox{margin:26px 0 8px}
  .namebox label{
    display:block;font-family:ui-monospace,"IBM Plex Mono",Menlo,monospace;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;
  }
  input[type=text]{
    width:100%;max-width:420px;background:transparent;border:none;
    border-bottom:1px solid var(--ink);padding:8px 2px;font:inherit;color:var(--ink);
  }
  input[type=text]:focus{outline:none;border-bottom:2px solid var(--shock)}

  /* ---------- панель ---------- */
  .bar{
    position:sticky;top:0;z-index:30;
    background:var(--paper);
    border-bottom:1px solid var(--ink);
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    padding:11px 0;margin-top:34px;
  }
  .bar .count{
    font-family:ui-monospace,"IBM Plex Mono",Menlo,monospace;
    font-size:12px;letter-spacing:.1em;color:var(--ink-soft);
  }
  .bar .count b{color:var(--ink)}
  .grow{flex:1}
  button{
    font:inherit;font-size:13px;letter-spacing:.06em;
    background:var(--ink);color:var(--paper-2);border:1px solid var(--ink);
    padding:9px 16px;cursor:pointer;transition:.15s;
  }
  button:hover{background:var(--shock);border-color:var(--shock)}
  button:focus-visible{outline:3px solid var(--shock);outline-offset:2px}
  button.ghost{background:transparent;color:var(--ink)}
  button.ghost:hover{background:var(--ink);color:var(--paper-2)}
  button.small{font-size:12px;padding:6px 12px}
  button[disabled]{opacity:.35;cursor:not-allowed}
  button[disabled]:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

  /* ---------- секции ---------- */
  section{padding:52px 0 10px;border-top:1px solid var(--rule);margin-top:34px}
  .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
  .sec-num{
    font-family:ui-monospace,"IBM Plex Mono",Menlo,monospace;
    font-size:12px;letter-spacing:.16em;color:var(--shock);
  }
  h2{
    font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif;
    font-weight:400;font-size:clamp(25px,4.4vw,38px);margin:0;line-height:1.1;
  }
  .sec-note{color:var(--ink-soft);font-size:15px;margin:10px 0 26px;max-width:60ch}
  .pts{
    font-family:ui-monospace,"IBM Plex Mono",Menlo,monospace;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
    border:1px solid var(--rule);padding:3px 8px;
  }

  .q{padding:22px 0;border-top:1px solid rgba(185,180,166,.55)}
  .q:first-of-type{border-top:none}
  .q-num{
    font-family:ui-monospace,"IBM Plex Mono",Menlo,monospace;
    font-size:12px;color:var(--ink-soft);letter-spacing:.1em;margin-bottom:7px;
  }
  .q-text{margin:0 0 14px;font-size:16.5px}
  .opts{display:grid;gap:7px}
  .opt{
    display:flex;gap:11px;align-items:flex-start;cursor:pointer;
    padding:9px 12px;background:var(--paper-2);border:1px solid transparent;transition:.12s;
  }
  .opt:hover{border-color:var(--rule)}
  .opt input{margin:3px 0 0;accent-color:var(--shock);flex:none}
  .opt.correct{border-color:var(--ok);background:rgba(30,90,60,.08)}
  .opt.wrong{border-color:var(--shock);background:rgba(212,0,106,.07)}
  .opt.correct::after{content:"верно";color:var(--ok)}
  .opt.wrong::after{content:"не то";color:var(--shock)}
  .opt.correct::after,.opt.wrong::after{
    margin-left:auto;font-family:ui-monospace,monospace;font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;flex:none;padding-left:10px;
  }

  select{
    font:inherit;font-size:15px;background:var(--paper-2);color:var(--ink);
    border:1px solid var(--rule);padding:8px 10px;margin:0 8px 8px 0;
  }
  select:focus{outline:2px solid var(--shock);outline-offset:1px}
  select.correct{border-color:var(--ok);border-width:2px}
  select.wrong{border-color:var(--shock);border-width:2px}

  textarea{
    width:100%;min-height:104px;background:var(--paper-2);border:1px solid var(--rule);
    padding:12px;font:inherit;font-size:15.5px;color:var(--ink);resize:vertical;line-height:1.5;
  }
  textarea:focus{outline:none;border-color:var(--ink);border-width:1px;box-shadow:inset 0 0 0 1px var(--ink)}

  .reveal{margin-top:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .hint{font-size:12.5px;color:var(--ink-soft)}
  .model{
    display:none;margin-top:12px;padding:15px 17px;background:transparent;
    border:1px dashed var(--rule);font-size:15px;
  }
  .model.open{display:block}
  .model h4{
    margin:0 0 8px;font-family:ui-monospace,monospace;font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--shock);font-weight:600;
  }
  .model p{margin:0 0 9px}
  .model p:last-child{margin:0}
  .model b{font-weight:600}

  .pair{padding:20px 0;border-top:1px solid rgba(185,180,166,.55)}
  .pair:first-of-type{border-top:none}
  .pair h3{
    font-family:Didot,"Bodoni MT",Georgia,serif;font-weight:400;
    font-size:21px;margin:0 0 12px;
  }
  .pair h3 span{color:var(--shock);font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.1em;vertical-align:middle;margin-right:10px}

  .task{padding:24px 0;border-top:1px solid rgba(185,180,166,.55)}
  .task:first-of-type{border-top:none}
  .task h3{font-family:Didot,"Bodoni MT",Georgia,serif;font-weight:400;font-size:23px;margin:0 0 10px}
  .task ul{margin:0 0 14px;padding-left:20px}
  .task li{margin-bottom:5px}

  /* ---------- результат ---------- */
  .result{
    margin-top:40px;padding:34px 30px;border:2px solid var(--ink);
    display:none;position:relative;background:var(--paper-2);
  }
  .result.open{display:block}
  .result .score{
    font-family:Didot,"Bodoni MT",Georgia,serif;font-size:56px;line-height:1;margin:6px 0 4px;
  }
  .result .score small{font-size:22px;color:var(--ink-soft)}
  .result .verdict{font-size:17px;max-width:56ch;margin:14px 0 0;color:var(--ink)}
  .result .breakdown{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2px;margin-top:22px;
  }
  .result .breakdown div{
    background:var(--paper);padding:11px 13px;
    font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .result .breakdown b{display:block;font-size:19px;letter-spacing:0;color:var(--ink);margin-top:5px;font-family:Didot,Georgia,serif;font-weight:400}
  .stamp{
    position:absolute;top:-18px;right:18px;transform:rotate(-7deg);
    border:2px solid var(--stamp);color:var(--stamp);
    font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;padding:6px 12px;background:var(--paper-2);
  }

  footer{
    margin-top:46px;padding-top:22px;border-top:2px solid var(--ink);
    font-size:14px;color:var(--ink-soft);
  }
  a{color:var(--shock)}

  @media (max-width:560px){
    .wrap{padding:0 16px 70px}
    .bar{gap:9px;padding:10px 0}
    .bar .count{width:100%}
    button{padding:8px 13px;font-size:12.5px}
    .result{padding:26px 18px}
    .stamp{right:10px;font-size:10px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}
  @media print{
    .bar,button,.model{display:none!important}
    body{background:#fff}
    .opt{background:#fff;border:1px solid #ccc}
  }

/* ---------- дополнения: отправка, автосохранение, разбор после сдачи ---------- */

/* Часть 3 показывает вклады в выпадающем списке. Текст вкладов длинный, и список
   растягивался по самому длинному варианту — страница уезжала вбок на телефоне
   (722 пикселя при экране 390). Ширину теперь задаёт колонка, а не содержимое. */
select{max-width:100%;width:100%}
.q select{margin-top:10px}

/* iOS увеличивает страницу при клике в поле, если шрифт меньше 16px. */
input,select,textarea{font-size:16px}

.savebar{
  position:sticky;bottom:0;z-index:5;
  background:var(--paper);border-top:1px solid var(--rule);
  padding:12px 0;margin-top:34px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.savebar .grow{flex:1}
.saved{
  font-family:ui-monospace,"IBM Plex Mono",Menlo,monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.saved b{color:var(--ok);font-weight:600}

button.primary{
  background:var(--ink);color:var(--paper-2);border:1px solid var(--ink);
  padding:11px 22px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}
button.primary:disabled{opacity:.45}

.notice{
  border:1px solid var(--rule);background:var(--paper-2);
  padding:14px 16px;margin:16px 0;font-size:14.5px;
}
.notice.bad{border-color:var(--stamp);color:var(--stamp)}

.review-row{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--rule)}
.review-row:last-child{border-bottom:0}
.review-row .n{
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink-soft);
  min-width:26px
}
.review-row .mark{min-width:18px;font-weight:600}
.review-row.hit .mark{color:var(--ok)}
.review-row.miss .mark{color:var(--stamp)}
.review-row .txt{flex:1}
.review-row .txt em{font-style:normal;color:var(--ink-soft)}

@media (max-width:560px){
  .savebar{padding:10px 0;gap:8px}
  button.primary{width:100%;order:-1}
}