:root{
  --blue:#2d6cdf; --ink:#22303c; --muted:#7a8a99; --line:#e7ebf0;
  --bg:#f4f6f8; --card:#fff; --ok:#1a9d52; --warn:#d2453b;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;}
a{color:var(--blue);text-decoration:none;} a:hover{text-decoration:underline;}
.muted{color:var(--muted);}
.warn{color:var(--warn);font-weight:600;}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;border-bottom:1px solid var(--line);padding:12px 22px;position:sticky;top:0;z-index:10;}
.brand{font-weight:700;font-size:18px;}
.topbar nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}

.container{max-width:1040px;margin:0 auto;padding:22px;}
.footer{max-width:1040px;margin:20px auto;padding:0 22px 30px;font-size:12px;}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.page-head h1{margin:0;font-size:24px;}
.actions{display:flex;gap:10px;align-items:center;}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:18px;}
.card.narrow{max-width:480px;margin-left:auto;margin-right:auto;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:780px){.two-col{grid-template-columns:1fr;}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.student-card{display:block;color:inherit;transition:box-shadow .15s,transform .15s;}
.student-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-1px);text-decoration:none;}
.student-head{display:flex;justify-content:space-between;align-items:center;}
.student-head h2{margin:0;font-size:18px;}
.kv{display:flex;gap:14px;margin:10px 0;flex-wrap:wrap;}
.kv dt{font-size:11px;color:var(--muted);text-transform:uppercase;margin:0;}
.kv dd{margin:0;font-weight:600;font-size:14px;}
.kv .email{font-weight:500;font-size:13px;}
.level{margin:6px 0;font-size:14px;} .goal{margin:6px 0;font-size:13px;color:#3a4a59;}
.mini-stats{display:flex;gap:12px;margin-top:10px;font-size:12px;color:var(--muted);}

.badge{display:inline-block;background:#eef3fb;color:var(--blue);border-radius:20px;
  padding:2px 10px;font-size:12px;font-weight:600;}
.badge.met{background:#e6f6ec;color:var(--ok);}
.badge.in_progress{background:#fff3e0;color:#b8761c;}
.badge.paused{background:#f0f2f5;color:var(--muted);}

.stack{display:flex;flex-direction:column;gap:14px;}
.stack label,.row label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px;flex:1;}
.row{display:flex;gap:14px;flex-wrap:wrap;}
input,select,textarea{font:inherit;padding:9px 10px;border:1px solid #ccd4dd;border-radius:8px;background:#fff;width:100%;}
textarea{resize:vertical;}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:500;}
label.check input{width:auto;}
button{font:inherit;cursor:pointer;border:1px solid #ccd4dd;background:#fff;border-radius:8px;padding:9px 16px;font-weight:600;}
button.primary,a.primary{background:var(--blue);color:#fff;border-color:var(--blue);border-radius:8px;
  padding:9px 16px;font-weight:600;display:inline-block;}
a.primary:hover{text-decoration:none;opacity:.92;}

.flash{padding:11px 15px;border-radius:8px;margin-bottom:14px;font-size:14px;}
.flash.ok{background:#e6f6ec;color:#137a3c;border:1px solid #bfe6cd;}
.flash.error{background:#fdeceb;color:#a8322a;border:1px solid #f3c4bf;}
.flash.warn{background:#fff3e0;color:#9a6312;border:1px solid #f3d9ad;}

.scorecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;}
.stat{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;}
.stat-value{font-size:22px;font-weight:700;}
.trend{font-size:13px;margin-left:4px;}
.trend.up{color:var(--ok);} .trend.down{color:var(--warn);} .trend.flat{color:var(--muted);}

table.notes{width:100%;border-collapse:collapse;font-size:14px;}
table.notes th,table.notes td{padding:8px 8px;text-align:left;border-bottom:1px solid var(--line);}
table.notes th{font-size:11px;color:var(--muted);text-transform:uppercase;}

.goals{list-style:none;padding:0;} .goals li{padding:6px 0;border-bottom:1px solid var(--line);}

.chart{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:8px;}
.chart-col{flex:1;display:flex;align-items:flex-end;gap:2px;height:100%;position:relative;}
.chart-col .bar{flex:1;border-radius:3px 3px 0 0;align-self:flex-end;}
.bar.comp{background:var(--blue);} .bar.inf{background:#f0a830;}
.chart-x{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted);}
.legend{margin-top:24px;font-size:12px;color:var(--muted);}
.swatch{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:middle;margin:0 3px 0 10px;}
.swatch.comp{background:var(--blue);} .swatch.inf{background:#f0a830;}

.bars{display:flex;flex-direction:column;gap:10px;}
.barline{display:flex;align-items:center;gap:10px;}
.bl-label{width:130px;font-size:13px;}
.bl-track{flex:1;height:12px;background:#eef1f4;border-radius:6px;overflow:hidden;}
.bl-fill{display:block;height:100%;background:var(--blue);}
.bl-val{width:34px;text-align:right;font-weight:600;font-size:13px;}

.focus-comment{margin:2px 0 10px 130px;font-size:12px;}
.btn-link{display:inline-block;padding:6px 10px;border:1px solid #ccd4dd;border-radius:8px;font-size:13px;font-weight:600;}
.btn-link:hover{background:#f4f8ff;text-decoration:none;}
.skel-part{padding:12px 16px;}
.skel-part > summary{cursor:pointer;font-size:16px;list-style:none;}
.skel-part > summary::-webkit-details-marker{display:none;}
.skel-part > summary::before{content:"▸ ";color:var(--muted);}
.skel-part[open] > summary::before{content:"▾ ";}
.skel-chunk{margin:8px 0 8px 8px;border-left:3px solid var(--line);padding-left:12px;}
.skel-chunk > summary{cursor:pointer;font-size:14px;}
.skel-body{padding:8px 0 4px;}
.skel-summary{font-size:13px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:10px 12px;}
.skel-h{font-size:11px;text-transform:uppercase;color:var(--muted);margin:10px 0 2px;font-weight:700;}
.skel-vocab{font-size:13px;color:#3a4a59;}
.assess{background:#f4f8ff;border:1px solid #dbe7fb;border-radius:8px;padding:8px 12px;font-size:13px;}
.type-fields{border-top:1px dashed var(--line);padding-top:8px;margin-top:4px;}
.praise{border-left:4px solid var(--ok);} .plan{border-left:4px solid var(--blue);}
.vocab .vocab-row{display:flex;gap:8px;margin-bottom:8px;}
fieldset.vocab{border:1px solid var(--line);border-radius:10px;padding:14px;}
legend{font-weight:600;font-size:14px;padding:0 6px;}

.spinner{width:26px;height:26px;border:3px solid #dbe3ee;border-top-color:var(--blue);
  border-radius:50%;animation:spin 0.9s linear infinite;margin-bottom:10px;}
@keyframes spin{to{transform:rotate(360deg);}}

button.danger{border-color:#f3c4bf;color:var(--warn);}
button.danger:hover{background:#fdeceb;}
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.row-actions input{width:auto;}
hr.sep{border:none;border-top:1px solid var(--line);margin:4px 0;width:100%;}

/* Note-result: original answer with inline annotations */
.card.answer{border-left:4px solid #f0a830;}
.ans-section{margin:12px 0;}
.ans-label{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:2px;}
.ans-value{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  white-space:pre-wrap;font-size:14px;line-height:1.7;}
.rb-wrong{background:#fdeceb;color:#a8322a;border-bottom:2px solid var(--warn);
  border-radius:3px;padding:0 2px;cursor:help;}
.rb-fix{background:#e6f6ec;color:#137a3c;border-radius:3px;padding:0 4px;margin-left:4px;
  font-weight:600;}
.rb-keep{background:#f3eafe;color:#7a3fb5;border-bottom:2px solid #b98ce0;
  border-radius:3px;padding:0 2px;cursor:help;}
ul.problems li{margin:8px 0;line-height:1.6;}
ol.fixes{padding-left:18px;}
li.fix{margin:14px 0;padding:10px 12px;background:#f8fafc;border:1px solid var(--line);
  border-radius:8px;}
li.fix p{margin:4px 0;font-size:14px;}
.fix-issue{color:#9a6312;}
.fix-correction{color:#137a3c;}
li.fix.keep{background:#faf6ff;border-color:#e4d4f5;}
.fix-praise{color:#7a3fb5;}

/* 使用说明 / how-to guide (student homepage + login value-prop) */
.guide{background:linear-gradient(180deg,#f4f8ff 0%,#fff 100%);border:1px solid #dbe7fb;}
.guide > summary{cursor:pointer;font-size:18px;font-weight:700;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:8px;}
.guide > summary::-webkit-details-marker{display:none;}
.guide > summary::before{content:"▸";color:var(--blue);font-size:14px;}
.guide[open] > summary::before{content:"▾";}
.guide > summary .tag{font-size:12px;font-weight:600;color:var(--blue);background:#eef3fb;
  border-radius:20px;padding:2px 10px;}
.guide-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px;}
@media(max-width:680px){.guide-cols{grid-template-columns:1fr;}}
.guide-col h3{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:6px;}
.guide-col.kid{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.guide-col.parent{background:#fbf7ff;border:1px solid #e4d4f5;border-radius:10px;padding:14px 16px;}
.steps{list-style:none;counter-reset:step;padding:0;margin:0;}
.steps li{counter-increment:step;position:relative;padding:6px 0 6px 32px;font-size:14px;
  line-height:1.55;border-bottom:1px dashed var(--line);}
.steps li:last-child{border-bottom:none;}
.steps li::before{content:counter(step);position:absolute;left:0;top:6px;width:22px;height:22px;
  background:var(--blue);color:#fff;border-radius:50%;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
.pains{list-style:none;padding:0;margin:0;}
.pains li{padding:5px 0;font-size:14px;line-height:1.55;padding-left:24px;position:relative;}
.pains li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700;}
.guide .tip{margin:12px 0 0;font-size:13px;color:var(--muted);}