:root{
    --bg:#f4f6f8; --card:#ffffff; --ink:#1c2733; --muted:#5b6b7a;
    --accent:#0e7a5f; --accent-soft:#e6f2ee; --line:#dde4ea;
    --warn:#b3541e; --radius:12px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink); background: var(--bg);
  }
  *{box-sizing:border-box}
  body{margin:0; padding:0 0 80px}
  header.top{
    position:sticky; top:0; z-index:50; background:var(--card);
    border-bottom:1px solid var(--line); padding:10px 16px;
    box-shadow:0 1px 6px rgba(20,35,50,.06);
  }
  .top-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
  .top h1{font-size:1.05rem; margin:0; flex:1 1 240px}
  .progress-wrap{flex:2 1 260px; min-width:180px}
  .progress-bar{height:8px; border-radius:6px; background:var(--line); overflow:hidden}
  .progress-bar > div{height:100%; width:0%; background:var(--accent); transition:width .25s}
  .progress-label{font-size:.75rem; color:var(--muted); margin-top:3px}
  .btns{display:flex; gap:6px; flex-wrap:wrap}
  button{
    font:inherit; font-size:.78rem; border:1px solid var(--line); background:#fff;
    border-radius:8px; padding:6px 10px; cursor:pointer; color:var(--ink);
  }
  button:hover{border-color:var(--accent); color:var(--accent)}
  button.primary{background:var(--accent); border-color:var(--accent); color:#fff}
  button.primary:hover{filter:brightness(1.08); color:#fff}
  .nav{display:flex; gap:6px; overflow-x:auto; padding:8px 0 2px; scrollbar-width:thin}
  .nav a{
    flex:0 0 auto; text-decoration:none; font-size:.75rem; color:var(--muted);
    background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px 10px;
  }
  .nav a:hover{color:var(--accent); border-color:var(--accent)}
  main{max-width:860px; margin:0 auto; padding:18px 16px}
  .intro{background:var(--accent-soft); border:1px solid #c9e2d8; border-radius:var(--radius); padding:14px 18px; font-size:.92rem; line-height:1.55}
  .intro h2{margin:.2em 0 .4em; font-size:1.05rem}
  .intro ul{margin:.4em 0; padding-left:1.2em}
  section{margin-top:26px}
  .sec-head{
    display:flex; align-items:baseline; gap:10px; border-bottom:2px solid var(--accent);
    padding-bottom:6px; margin-bottom:12px; scroll-margin-top:150px;
  }
  .sec-head h2{font-size:1.05rem; margin:0}
  .sec-head .sec-count{font-size:.75rem; color:var(--muted)}
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 16px; margin:10px 0;
  }
  .card .q{font-size:.92rem; line-height:1.5; margin:0 0 8px}
  .card .q .num{font-weight:700; color:var(--accent); margin-right:6px}
  .q .hint{color:var(--muted); font-weight:400; font-size:.85rem}
  textarea{
    width:100%; min-height:64px; resize:vertical; font:inherit; font-size:.9rem;
    border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fbfcfd;
  }
  textarea:focus, input[type=text]:focus, input[type=number]:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
  .fields{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
  .fields > label{display:flex; flex-direction:column; gap:3px; flex:1 1 170px; font-size:.78rem; color:var(--muted)}
  input[type=text], input[type=number]{
    font:inherit; font-size:.88rem; border:1px solid var(--line); border-radius:8px;
    padding:7px 9px; background:#fbfcfd; width:100%;
  }
  .checks{display:grid; gap:6px; margin-top:4px}
  .checks label{display:flex; gap:8px; align-items:flex-start; font-size:.9rem; line-height:1.4; cursor:pointer}
  .checks input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent); flex:0 0 auto; margin-top:1px}
  .checks .other-line input[type=text]{margin-top:4px}
  .moscow{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:2px 0 6px}
  .moscow label{padding:5px 12px; font-size:.8rem; cursor:pointer; background:#fff; border-right:1px solid var(--line); color:var(--muted)}
  .moscow label:last-child{border-right:none}
  .moscow input{display:none}
  .moscow label:has(input:checked){background:var(--accent); color:#fff; font-weight:600}
  .moscow-caption{font-size:.78rem; color:var(--muted); margin:2px 0 4px}
  table.qt{width:100%; border-collapse:collapse; font-size:.88rem; margin-top:4px}
  table.qt th, table.qt td{border:1px solid var(--line); padding:6px 8px; text-align:left; background:#fff}
  table.qt th{background:var(--bg); font-size:.8rem}
  table.qt td:first-child.labelcol{background:#fbfcfd; color:var(--muted); font-size:.82rem}
  table.qt input{width:100%; border:none; background:transparent; padding:2px; font:inherit}
  table.qt input:focus{outline:none; background:#fff}
  .rank{display:grid; gap:6px; margin-top:4px}
  .rank label{display:flex; align-items:center; gap:10px; font-size:.88rem}
  .rank input[type=number]{width:64px; flex:0 0 auto; text-align:center}
  .note{font-size:.8rem; color:var(--muted); margin-top:8px; line-height:1.5}
  .badge-done{font-size:.7rem; color:var(--accent); font-weight:600}
  footer{max-width:860px; margin:30px auto 0; padding:0 16px; font-size:.82rem; color:var(--muted); line-height:1.6}
  @media print{
    header.top, .btns, .nav, button{display:none !important}
    body{background:#fff; padding:0}
    .card{border:1px solid #bbb; break-inside:avoid}
    textarea{border:none; border-bottom:1px dotted #999; min-height:52px}
  }