:root{
  --bg:#f4f2ec; --card:#ffffff; --ink:#1f2733; --muted:#6b7480;
  --line:#e3ded3; --accent:#2f5d50; --accent-d:#234a40;
  --ok:#2f7d4f; --warn:#b8860b; --bad:#b23b3b; --shadow:0 2px 14px rgba(40,40,30,.08);
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:18px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:var(--accent); color:#fff;
  position:sticky; top:0; z-index:5; box-shadow:var(--shadow);
}
.brand{font-weight:700; font-size:19px}
.who{font-size:14px; opacity:.85}

main{max-width:760px; margin:0 auto; padding:20px 16px 60px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 22px; box-shadow:var(--shadow); margin-bottom:18px;
}
.card.center{text-align:center}
h1{font-size:25px; margin:0 0 8px; line-height:1.25}
h2{font-size:21px; margin:0 0 14px}
.muted{color:var(--muted); margin:6px 0 18px}
.step{display:inline-block; background:#eef3f0; color:var(--accent);
  font-weight:600; font-size:14px; padding:4px 12px; border-radius:20px; margin-bottom:12px}
.center{text-align:center}
.pad{padding:24px 0}

/* большие кнопки-зоны */
.bigbtn{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%; padding:28px 18px; border:2px dashed var(--accent);
  border-radius:var(--r); background:#f7faf8; color:var(--accent);
  cursor:pointer; text-align:center; transition:.15s; margin:8px 0;
}
.bigbtn:hover{background:#eef5f1}
.bigbtn:active{transform:scale(.99)}
.bigbtn.add{border-style:solid; background:var(--accent); color:#fff; padding:18px}
.bigbtn.add:hover{background:var(--accent-d)}
.bigbtn-icon{font-size:34px}
.bigbtn.add .bigbtn-icon{font-size:24px}
.bigbtn-text{font-size:19px; font-weight:600}

/* обычные кнопки */
button{font-family:inherit; font-size:17px}
.btn-primary{background:var(--accent); color:#fff; border:none; border-radius:12px;
  padding:13px 22px; font-weight:600; cursor:pointer}
.btn-primary:hover{background:var(--accent-d)}
.btn-secondary{background:#fff; color:var(--accent); border:1.5px solid var(--accent);
  border-radius:12px; padding:11px 18px; font-weight:600; cursor:pointer}
.btn-secondary.small{padding:7px 13px; font-size:14px}
.btn-secondary.small:hover{background:#f0f5f3}
.back{background:none; border:none; color:var(--accent); font-weight:600;
  cursor:pointer; padding:0 0 12px; font-size:16px}
.bigbtn.skip, button.skip{display:block; width:100%; margin-top:14px; padding:14px}
.small-note{font-size:14px; margin-top:12px; text-align:center}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px}

/* список студентов */
.list{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.student{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  background:#fff; cursor:pointer; transition:.12s;
}
.student:hover{border-color:var(--accent); background:#fbfdfc}
.student .s-main{display:flex; flex-direction:column; gap:2px}
.student .s-name{font-weight:600; font-size:19px}
.student .s-topic{color:var(--muted); font-size:14px}
.student .s-meta{color:var(--muted); font-size:14px; text-align:right; white-space:nowrap}
.chev{color:var(--muted); font-size:22px}

/* живой прогресс проверки */
.prog-steps{line-height:1.9; font-size:16px}
.prog-steps b{color:var(--accent-d)}
.prog-time{margin-top:10px; font-size:14px; color:var(--muted)}

/* статусы загрузки */
.status{margin-top:14px; font-size:16px}
.status.ok{color:var(--ok)} .status.err{color:var(--bad)} .status.work{color:var(--accent)}
.spinner{display:inline-block; width:16px; height:16px; border:3px solid #cfe0d8;
  border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite;
  vertical-align:-3px; margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* таблица прогрессии по версиям */
.prog-table{width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:15px}
.prog-table th{text-align:left; padding:8px 10px; background:#eef3f0; color:var(--accent-d);
  font-size:13px; border-bottom:2px solid var(--line)}
.prog-table td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.prog-table tr:last-child td{border-bottom:none}
.ptag{display:inline-block; padding:3px 9px; border-radius:11px; font-size:12px; font-weight:600; white-space:nowrap}
.ptag.ok{background:#e7f3ec; color:var(--ok)}
.ptag.warn{background:#fbf3df; color:var(--warn)}
.ptag.bad{background:#f7e9e9; color:var(--bad)}
.ptag:not(.ok):not(.warn):not(.bad){background:#eef0f2; color:var(--muted)}
.pverdict{color:var(--ink); line-height:1.4}

/* версии и рецензии */
.versions{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.version{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.v-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; background:#f7faf8; cursor:pointer}
.v-title{font-weight:600}
.v-badge{font-size:13px; padding:3px 10px; border-radius:12px; font-weight:600}
.v-badge.done{background:#e7f3ec; color:var(--ok)}
.v-badge.pending{background:#eef3f0; color:var(--accent)}
.v-badge.error{background:#f7e9e9; color:var(--bad)}
.v-body{padding:0 16px; max-height:0; overflow:hidden; transition:max-height .25s}
.v-body.open{max-height:none; padding:16px}
.review-block{word-wrap:break-word; font-size:16px; line-height:1.6}
.review-block h3{font-size:17px; margin:16px 0 6px; color:var(--accent-d)}
.review-block h4{font-size:15px; margin:12px 0 4px; color:var(--accent-d)}
.review-block hr{border:none; border-top:1px solid var(--line); margin:14px 0}
.review-block b{color:var(--ink)}

/* короткая сводка + вердикт */
.summary-box{background:#f7faf8; border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:16px 18px; margin-bottom:14px}
.verdict{margin-top:12px; padding:10px 14px; background:#fff; border-radius:10px;
  font-weight:600; color:var(--accent-d); border:1px solid var(--line)}
.toggle-full{width:100%; margin:4px 0 14px}
.full-review{border-top:1px dashed var(--line); padding-top:14px; margin-bottom:8px}
.letter-box{margin-top:18px; border:1.5px solid var(--accent); border-radius:12px;
  padding:14px; background:#f7faf8}
.letter-box h3{margin:0 0 8px; font-size:16px; color:var(--accent)}
.copy-btn{margin-top:10px}
.sub{font-weight:700; margin:18px 0 6px; color:var(--accent-d)}

/* модалка */
.modal{position:fixed; inset:0; background:rgba(20,25,30,.45); display:flex;
  align-items:center; justify-content:center; padding:16px; z-index:10}
.modal-card{background:#fff; border-radius:var(--r); padding:24px; width:100%;
  max-width:440px; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-size:15px; color:var(--muted)}
.field input{font-size:18px; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:12px; color:var(--ink)}
.field input:focus{outline:none; border-color:var(--accent)}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:8px}

@media(max-width:520px){
  body{font-size:17px}
  main{padding:14px 12px 50px}
  .card{padding:20px 16px}
  h1{font-size:22px}
}