:root{font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;color:#153f33;background:#f5f7f5;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #dce8df;border-radius:12px;background:#fff;color:#176b50;padding:10px 14px;transition:background .16s,transform .16s,border-color .16s}button:hover{background:#eaf7ee;border-color:#a1d8b9;transform:translateY(-1px)}button:active{transform:translateY(0)}button.primary{background:#12a579;border-color:#12a579;color:white;font-weight:700}button.primary:hover{background:#0e946d}button.ghost{border-color:transparent;background:transparent}button.small{padding:6px 9px;font-size:12px;border-radius:8px}button:disabled{opacity:.55;cursor:not-allowed}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #dbe8de;border-radius:10px;background:#fff;color:#153f33;outline:none}input:focus,select:focus,textarea:focus{border-color:#12a579;box-shadow:0 0 0 3px #12a57920}textarea{min-height:90px;resize:vertical}label{display:block;color:#627c6d;font-size:12px;margin:11px 0 5px}h1,h2,h3,p{margin:0}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}.muted{color:#7a8982}.smalltext{font-size:12px}.pill{display:inline-block;padding:4px 9px;border-radius:8px;background:#e8f6ef;color:#13835f;font-size:11px;font-weight:700}.card{background:#fff;border:1px solid #e3ece6;border-radius:18px;padding:18px}.shell{max-width:1600px;margin:auto;padding:22px 26px}.top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.brand{display:flex;align-items:center;gap:12px}.brandmark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#12a579;color:#fff;font-size:22px;font-weight:700}.topactions,.row,.tabs{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.tabs{margin-bottom:18px}.tabs button{border:0;background:transparent;color:#71857b;font-weight:700}.tabs button.active{color:#087e5b;background:#e4f5eb}.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.split{display:grid;grid-template-columns:305px minmax(0,1fr);gap:18px;min-height:540px}.sidebar{overflow:auto;max-height:calc(100vh - 165px)}.student{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin:8px 0;padding:12px}.student.active{background:#e8f6ef;border-color:#91d2ae}.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#13a879;color:#fff;font-weight:700}.detail{min-height:520px}.empty{display:grid;place-content:center;color:#829187;text-align:center;min-height:360px}.filter{margin-bottom:14px}.roomcard{margin:12px 0}.roomcard .row{justify-content:space-between}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.stat{padding:12px;border-radius:12px;background:#f3f8f4}.stat strong{display:block;margin-top:5px;font-size:18px}.calendar{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:15px}.calendar-main{min-width:0}.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}.weekdays,.monthgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.weekdays{text-align:center;margin:20px 0 8px;color:#6d8374;font-weight:700}.day{min-width:0;min-height:76px;display:block;text-align:left;padding:8px;border-radius:11px}.day.other{background:#f1f4f1;color:#a1ada4}.day.selected{background:#12a579;color:#fff;border-color:#12a579}.day .daynum{font-size:15px;font-weight:700}.day .count{font-size:10px;margin-left:5px}.day .course{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.daylist{max-height:calc(100vh - 200px);overflow:auto}.lesson{margin:9px 0;padding:13px}.lesson strong{display:block;margin-bottom:5px}.lesson button{width:100%;margin-top:7px}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 13px}.formgrid .wide{grid-column:1/-1}dialog{border:1px solid #dce9df;border-radius:20px;padding:0;background:#f5f7f5;color:#153f33;width:min(680px,calc(100vw - 22px));max-height:92vh;box-shadow:0 20px 70px #1d473328}dialog::backdrop{background:#12251db5}.modalinner{padding:24px;max-height:88vh;overflow:auto}.modalhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modalactions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.formerror{color:#b14d3a;font-size:12px;min-height:18px}.roster{margin:9px 0}.roster .row{justify-content:space-between}.statusbuttons{margin-top:10px}.scheduleline{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;margin:7px 0}.scheduleline input{max-width:140px}.planlayout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px}.canvas{position:relative;width:1100px;height:780px;background:#fff;border:1px solid #dce9df;border-radius:12px}.canvaswrap{overflow:auto;background:#edf2ee;border-radius:14px;max-height:65vh}.block{position:absolute;background:#fff;border:1px solid #add8bf;border-radius:12px;padding:8px;box-shadow:0 2px 8px #29553c12;resize:both;overflow:auto;min-width:230px;min-height:140px}.block.map{border-color:#a7c7e5}.blockbar{cursor:move;padding:5px 6px;background:#e8f6ef;border-radius:7px;font-size:12px}.block.map .blockbar{background:#eaf2fa}.block textarea{border:0;box-shadow:none!important;height:calc(100% - 35px);resize:none}.mapview{font-size:11px;color:#285677;background:#f8fbfe;border-radius:8px;padding:8px}.mapview div{margin:5px 0}.mapview span{display:inline-block;background:#e3effc;border-radius:7px;padding:3px 6px}#toast{position:fixed;right:20px;bottom:20px;background:#153f33;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}.auth{max-width:440px;margin:12vh auto;padding:28px;background:#fff;border:1px solid #e3ece6;border-radius:20px}.auth h1{margin-bottom:10px}@media(max-width:900px){.shell{padding:16px}.calendar{grid-template-columns:1fr}.daylist{max-height:none}.split{grid-template-columns:220px minmax(0,1fr)}.top{align-items:flex-start}.topactions{justify-content:flex-end}}@media(max-width:650px){.split,.planlayout{grid-template-columns:1fr}.sidebar{max-height:230px}.calendar-main{overflow:auto}.weekdays,.monthgrid{min-width:680px}.formgrid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.top{display:block}.topactions{margin-top:12px}.sectionhead{display:block}.sectionhead .row{margin-top:10px}}
.block.map textarea{height:40%}.block.map .mapview{height:calc(60% - 35px);overflow:auto}
.mobile-plan-help{display:none}

/* Tablet: keep the student list beside details, and put the selected day's lessons below the month. */
@media (min-width:701px) and (max-width:1024px){
  .shell{padding:18px}.split{grid-template-columns:250px minmax(0,1fr);gap:14px}
  .calendar{grid-template-columns:1fr}.daylist{max-height:none}
  .top{align-items:flex-start}.topactions{justify-content:flex-end}
}

/* Phone: cards and controls fit the screen without horizontal page scrolling. */
@media (max-width:700px){
  :root{font-size:14px}body{overflow-x:hidden}
  .shell{padding:12px 12px 28px}.top{display:block;margin-bottom:10px}
  .brandmark{width:38px;height:38px}.brand h1{font-size:20px}
  .topactions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
  .topactions button{padding:9px 4px;font-size:12px;white-space:nowrap}
  .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-bottom:14px}
  .tabs button{padding:9px 1px;font-size:12px;white-space:nowrap}
  .sectionhead{display:flex;align-items:flex-start;gap:8px}.sectionhead>button{flex:0 0 auto;padding:9px 10px;font-size:12px}
  .sectionhead h2{font-size:18px}.sectionhead h3{overflow-wrap:anywhere}
  .split,.planlayout,.calendar{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-height:0}
  .sidebar{max-height:none;overflow:visible}.filter{margin-bottom:5px}
  #student-list{display:flex;gap:7px;overflow-x:auto;padding:0 1px 7px;scroll-snap-type:x proximity}
  .student{flex:0 0 160px;width:160px;margin:5px 0;padding:9px;scroll-snap-align:start}
  .student .avatar{flex:0 0 34px;width:34px;height:34px}
  .detail{min-height:280px}.empty{min-height:210px}
  .card{padding:14px;border-radius:15px}.roomcard{margin:9px 0}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:10px 0}
  .stat{padding:9px 6px;font-size:11px}.stat strong{font-size:17px}
  .row{gap:6px}.row button{min-height:39px}
  #join-class,#add-sid{max-width:100%!important;min-width:0;flex:1 1 160px}
  .calendar-main{overflow:visible}.cal-nav{display:block}.cal-nav .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
  .cal-nav button{padding:8px 2px;font-size:12px;white-space:nowrap}
  .weekdays,.monthgrid{min-width:0;gap:3px}.weekdays{margin:13px 0 7px;font-size:11px}
  .day{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:57px;padding:5px 1px;text-align:center;border-radius:9px}
  .day .daynum{font-size:14px}.day .count{display:block;margin:2px 0 0;font-size:10px}.day .course{display:none}
  .daylist{max-height:none}.lesson{padding:11px}
  .formgrid{grid-template-columns:minmax(0,1fr)}
  dialog{width:calc(100vw - 12px)!important;max-width:none;max-height:94dvh;border-radius:16px}
  .modalinner{padding:15px;max-height:calc(94dvh - 2px)}.modalhead h2{font-size:18px}
  .modalactions{position:sticky;bottom:-15px;background:#f5f7f5;padding:10px 0 15px;z-index:2}
  .auth{margin:8vh 12px;padding:20px}
  .canvaswrap{max-height:none;overflow:visible;padding:7px}
  .canvas{display:flex;flex-direction:column;gap:10px;width:100%;height:auto;min-height:160px;padding:7px}
  .block{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:220px!important;min-width:0;resize:none}
  .block.map{height:310px!important}.blockbar{cursor:default}.block textarea{height:calc(100% - 36px)}
  .block.map textarea{height:42%}.block.map .mapview{height:calc(58% - 35px)}
  .desktop-plan-help{display:none}.mobile-plan-help{display:inline}
  #toast{left:12px;right:12px;bottom:12px;text-align:center}
}