@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');
:root{--ink:#172033;--muted:#64748b;--line:#e2e8f0;--soft:0 14px 36px rgba(15,23,42,.08);--big:0 30px 90px rgba(37,99,235,.18)}*{box-sizing:border-box}body{margin:0;padding:clamp(8px,2vw,18px);font-family:Sarabun,system-ui,sans-serif;color:var(--ink);min-height:100vh;background:radial-gradient(circle at 0 0,rgba(37,99,235,.13),transparent 30rem),radial-gradient(circle at 100% 10%,rgba(236,72,153,.12),transparent 28rem),linear-gradient(135deg,#eff6ff,#faf5ff 48%,#fdf2f8)}button,input,select{font-family:inherit}.app{max-width:1260px;margin:auto;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.92);border-radius:34px;box-shadow:var(--big);overflow:hidden}.student-app{max-width:820px}.hero{position:relative;overflow:hidden;padding:clamp(28px,5vw,54px) clamp(18px,4vw,44px);color:#fff;background:linear-gradient(135deg,#1d4ed8,#7c3aed 58%,#ec4899)}.hero.compact{padding:34px 30px}.hero:after{content:'y = mx + b';position:absolute;right:24px;bottom:0;font-size:clamp(44px,8vw,96px);font-weight:900;opacity:.12;transform:rotate(-7deg)}.hero h1{margin:0 0 10px;font-size:clamp(1.55rem,4.4vw,3.05rem);line-height:1.12}.hero p{margin:0;max-width:900px;font-weight:650;color:rgba(255,255,255,.94)}.hero-tag{position:absolute;right:28px;top:24px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 16px;font-weight:900}.content{padding:clamp(12px,2.8vw,28px)}.top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}.card,.activity,.panel{background:linear-gradient(180deg,#fff,#fcfdff);border:1px solid var(--line);border-radius:24px;box-shadow:var(--soft)}.card{padding:18px}.card h2,.activity h2,.panel h3{margin:0 0 10px;color:#4c1d95}.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.meta div{padding:12px;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#faf5ff);border:1px solid #dbeafe}.meta b{display:block;color:#1d4ed8;margin-bottom:4px}ul,ol{margin:8px 0 0 1.2rem;padding:0}li{margin:5px 0;color:#334155}.rubric{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rubric div{padding:10px;border-radius:15px;background:#f8fafc;border:1px solid #dbeafe}.rubric b{display:block;color:#7c3aed}.rubric span{font-size:.88rem;color:#475569;font-weight:700}.activity{overflow:hidden}.activity-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:18px 22px;color:#fff;background:linear-gradient(135deg,#0f172a,#1d4ed8 48%,#7c3aed)}.activity-head h2{color:#fff;margin:0}.badge{background:rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;font-weight:900}.teacher-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;padding:clamp(14px,2.5vw,22px)}.panel{padding:16px}.control-grid{display:grid;grid-template-columns:1fr 180px;gap:12px;margin-bottom:12px}label span{display:block;color:#475569;font-weight:900;margin-bottom:6px}select,input{width:100%;min-height:50px;border:1px solid #cbd5e1;border-radius:16px;padding:10px 13px;font-size:1rem;font-weight:800;background:#fff;color:#172033}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.button-row.stack{display:grid}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;border-radius:16px;min-height:50px;padding:11px 16px;color:#fff;font-weight:900;cursor:pointer;box-shadow:0 12px 25px rgba(15,23,42,.12)}.btn.primary{background:linear-gradient(135deg,#2563eb,#7c3aed)}.btn.success{background:linear-gradient(135deg,#059669,#10b981)}.btn.dark{background:linear-gradient(135deg,#334155,#111827)}.btn.copy{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.btn.linkbtn{background:linear-gradient(135deg,#8b5cf6,#ec4899)}.btn.danger{background:linear-gradient(135deg,#ef4444,#b91c1c)}.btn.full{width:100%}.info-box,.student-link,.small-note{padding:12px 14px;border-radius:16px;font-weight:800;line-height:1.5}.info-box{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}.student-link{word-break:break-all;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}.small-note{font-size:.9rem;background:#f8fafc;border:1px solid var(--line);color:#64748b;margin-bottom:10px}.canvas-wrap{margin-top:14px;border-radius:24px;border:1px solid #dbeafe;background:#fff;overflow:hidden}canvas{display:block;width:100%;height:auto;background:linear-gradient(180deg,#fff,#f8fafc)}.submission-list{display:grid;gap:10px;max-height:460px;overflow:auto;padding-right:4px}.submission{border:1px solid var(--line);border-radius:18px;padding:12px;background:#fff}.submission b{color:#1d4ed8}.submission .eq{font-size:1.1rem;font-weight:900;color:#172033;margin:4px 0}.submission .time{font-size:.82rem;color:#64748b}.submission .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.mini-btn{border:0;border-radius:12px;padding:8px 10px;color:#fff;font-weight:900;cursor:pointer}.mini-btn.draw{background:#7c3aed}.student-form{padding:18px;display:grid;gap:14px}@media(max-width:1020px){.top-grid,.teacher-grid{grid-template-columns:1fr}.hero-tag{display:none}}@media(max-width:720px){body{padding:8px}.content{padding:12px}.meta,.control-grid,.rubric{grid-template-columns:1fr}.btn{width:100%}.button-row{display:grid}.teacher-grid{padding:12px}.hero:after{display:none}}

.slope-box{
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(135deg,#eff6ff,#faf5ff);
  border:1px solid #dbeafe;
  color:#1e3a8a;
  font-weight:900;
  line-height:1.45;
}
.slope-box .teacher-slope{color:#059669}
.slope-box .student-slope{color:#7c3aed}
.slope-box .same{color:#166534}
.slope-box .diff{color:#b45309}

.student-slope-highlight{
  margin:8px 0;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(135deg,#f5f3ff,#eef2ff);
  border:1px solid #c4b5fd;
  color:#5b21b6;
  font-size:1.05rem;
  font-weight:900;
}
.teacher-slope-highlight{
  margin:8px 0;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(135deg,#ecfdf5,#f0fdfa);
  border:1px solid #99f6e4;
  color:#047857;
  font-size:1.02rem;
  font-weight:900;
}
.compare-slope-highlight{
  margin:8px 0;
  padding:10px 12px;
  border-radius:14px;
  background:#fff7ed;
  border:1px solid #fdba74;
  color:#9a3412;
  font-weight:900;
}
.compare-slope-highlight.same{
  background:#f0fdf4;
  border-color:#86efac;
  color:#166534;
}