:root{
  --brand:#0891B2; --brand-600:#0E7490; --brand-700:#155E75; --brand-50:#ECFEFF; --brand-100:#CFFAFE;
  --bg:#F4F7F9; --card:#FFFFFF; --border:#E3EAF0; --border-strong:#CBD8E3;
  --text:#1E2A33; --muted:#6B7C8A; --hint:#9AA9B5;
  --ok:#0F766E; --ok-bg:#E6F7F4; --warn:#B45309; --warn-bg:#FEF3E2; --danger:#C0392B; --danger-bg:#FDECEA;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(20,50,70,.06),0 2px 8px rgba(20,50,70,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600}
button,input,select,textarea{font-family:inherit;font-size:14px;color:var(--text)}
a{color:var(--brand-600);text-decoration:none}

/* ---------- 中英切换 ---------- */
.lang-switch{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:2px}
.lang-switch button{border:0;background:transparent;color:var(--muted);font-size:12px;line-height:22px;
  padding:0 10px;border-radius:999px;cursor:pointer}
.lang-switch button.on{background:var(--brand);color:#fff}
.lang-switch button:hover{color:var(--brand-600)}
.lang-switch button.on:hover{color:#fff}
@media(max-width:520px){ .topbar .who{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} }
.login-card>.lang-switch{display:flex;width:fit-content;margin:0 auto 18px}

/* ---------- 登录 ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#0891B2 0%,#0E7490 45%,#155E75 100%);}
.login-card{width:100%;max-width:420px;background:#fff;border-radius:16px;padding:32px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.login-brand{text-align:center;margin-bottom:24px}
.login-brand .brand-logo{width:150px;height:auto;display:block;margin:0 auto 10px}
.login-brand h1{font-size:19px}
.login-brand p{margin:6px 0 0;color:var(--muted);font-size:13px}
.seg{display:flex;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:20px}
.seg button{flex:1;border:0;background:transparent;padding:9px 0;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:500}
.seg button.on{background:#fff;color:var(--brand-600);box-shadow:var(--shadow)}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border:1px solid var(--border-strong);
  background:#fff;border-radius:var(--radius-sm);cursor:pointer;font-weight:500;transition:.15s}
.btn:hover{border-color:var(--brand);color:var(--brand-600)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-600);color:#fff}
.btn.danger{color:var(--danger);border-color:#F0C9C4}
.btn.danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.login-tip{margin-top:16px;font-size:12px;color:var(--hint);text-align:center}

/* ---------- 布局 ---------- */
.app{display:none;min-height:100vh}
.app.on{display:block}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 20px;height:58px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.topbar .logo{font-weight:700;color:var(--brand-700);font-size:16px;display:flex;align-items:center;gap:9px}
.topbar .logo img{height:34px;width:auto;display:block}
.topbar .spacer{flex:1}
.who{font-size:13px;color:var(--muted)}
.who b{color:var(--text);font-weight:600}
.shell{display:flex;align-items:flex-start;gap:0}
.sidebar{width:200px;flex:0 0 200px;background:#fff;border-right:1px solid var(--border);
  min-height:calc(100vh - 58px);padding:14px 10px;position:sticky;top:58px}
.sidebar a{display:block;padding:9px 12px;border-radius:var(--radius-sm);color:var(--muted);
  font-size:14px;margin-bottom:2px;cursor:pointer}
.sidebar a:hover{background:var(--bg)}
.sidebar a.on{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.main{flex:1;padding:22px;min-width:0;max-width:1200px}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{padding:8px 14px;border:1px solid var(--border-strong);background:#fff;border-radius:20px;cursor:pointer;color:var(--muted)}
.tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.card h3{font-size:15px;margin-bottom:4px}
.card .sub{font-size:13px;color:var(--muted);margin-bottom:14px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.page-title{font-size:19px;font-weight:600;margin-bottom:2px}
.page-desc{font-size:13px;color:var(--muted);margin-bottom:18px}

/* ---------- 指标 ---------- */
.kpi{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.kpi .k-label{font-size:12px;color:var(--muted)}
.kpi .k-value{font-size:26px;font-weight:600;line-height:1.25;margin-top:4px}
.kpi .k-sub{font-size:12px;color:var(--hint);margin-top:2px}
.kpi.ok .k-value{color:var(--ok)} .kpi.warn .k-value{color:var(--warn)} .kpi.danger .k-value{color:var(--danger)}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:500;background:var(--bg);font-size:12px;white-space:nowrap}
tbody tr:hover{background:#FAFCFD}
.tbl-wrap{overflow-x:auto}

/* ---------- 徽标 ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:500;white-space:nowrap}
.badge.submitted{background:var(--ok-bg);color:var(--ok)}
.badge.pending{background:var(--warn-bg);color:var(--warn)}
.badge.overdue{background:var(--danger-bg);color:var(--danger)}
.badge.gray{background:var(--bg);color:var(--muted)}
.badge.brand{background:var(--brand-50);color:var(--brand-700)}

/* ---------- 课节卡片（教师端） ---------- */
.lesson{background:#fff;border:1px solid var(--border);border-left:4px solid var(--border-strong);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow);
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.lesson.pending{border-left-color:#E8A33D}
.lesson.submitted{border-left-color:var(--ok)}
.lesson.overdue{border-left-color:var(--danger)}
.lesson .time{flex:0 0 74px;font-weight:600;font-size:15px;color:var(--brand-700)}
.lesson .time small{display:block;font-weight:400;font-size:12px;color:var(--hint)}
.lesson .body{flex:1;min-width:180px}
.lesson .body .t1{font-weight:600;font-size:15px}
.lesson .body .t2{font-size:13px;color:var(--muted);margin-top:2px}
.lesson .act{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.lesson .time small.dt{color:var(--brand-600);font-weight:600;margin-top:3px}

/* 待反馈列表按日期分组 */
.day-group{margin-bottom:18px}
.day-head{display:flex;align-items:baseline;gap:10px;padding:0 2px 8px;
  border-bottom:1px dashed var(--border-strong);margin-bottom:10px}
.day-head .d{font-weight:700;font-size:14px;color:var(--text)}
.day-head .n{font-size:12px;color:var(--muted)}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid .full{grid-column:1/-1}
.rate{display:flex;gap:8px}
.rate label{flex:1;text-align:center;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:8px 0;cursor:pointer;font-size:13px;color:var(--muted)}
.rate input{display:none}
.rate input:checked+span{color:var(--brand-700);font-weight:600}
.rate label:has(input:checked){border-color:var(--brand);background:var(--brand-50)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border-strong);border-radius:20px;padding:6px 14px;cursor:pointer;font-size:13px;background:#fff}
.chip input{display:none}
.chip:has(input:checked),.chip.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.rate label:has(input:checked),.rate label.sel{border-color:var(--brand);background:var(--brand-50)}
.rate label.sel span{color:var(--brand-700);font-weight:600}

/* ---------- 其他 ---------- */
.empty{text-align:center;padding:38px 20px;color:var(--muted);font-size:13px}
.empty .big{font-size:34px;opacity:.35;margin-bottom:8px}
.drop{border:2px dashed var(--border-strong);border-radius:var(--radius);padding:34px;text-align:center;
  background:#FAFCFD;cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-50)}
.drop .t{font-weight:600;margin-bottom:4px}
.drop .s{font-size:13px;color:var(--muted)}
.alert{padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:14px}
.alert.info{background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100)}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid #F5DDB4}
.alert.err{background:var(--danger-bg);color:var(--danger);border:1px solid #F3CDC7}
.alert.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #BFE6DF}
.progress{height:8px;background:var(--bg);border-radius:20px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--brand);border-radius:20px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)} .hint{font-size:12px;color:var(--hint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:#1E2A33;color:#fff;
  padding:11px 20px;border-radius:22px;font-size:13px;z-index:99;box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;
  transition:.2s;pointer-events:none}
.toast.on{opacity:1;bottom:44px}
.map-row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;margin-bottom:9px}
.map-row label{font-size:13px;color:var(--muted)}

/* ---------- 校区 ---------- */
.chipbar{display:flex;flex-wrap:wrap;gap:8px}
.chipbtn{padding:6px 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--card);
  color:var(--muted);font-size:13px;cursor:pointer;line-height:1.4}
.chipbtn:hover{border-color:var(--brand);color:var(--brand-600)}
.chipbtn.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500}
.roommap{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.roommap-row{display:flex;align-items:center;gap:8px}
.roommap-row input{flex:1;min-width:0}

/* ---------- 家长端报告 ---------- */
.stars{color:#E8A33D;letter-spacing:2px;font-size:14px}
.rate-row{display:flex;gap:18px;flex-wrap:wrap;padding:10px 12px;background:var(--bg);
  border-radius:var(--radius-sm)}
.rate-item{display:flex;align-items:center;gap:7px;font-size:13px}
.to-parent{margin-top:10px;padding:11px 13px;background:var(--brand-50);
  border-left:3px solid var(--brand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:13px}
@media (max-width:520px){ .rate-row{gap:10px} .rate-item{font-size:12px} }

/* ---------- 反馈表单分段 ---------- */
.sec-title{margin:16px 0 10px;padding:7px 11px;background:var(--brand-50);
  border-left:3px solid var(--brand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13px;font-weight:600;color:var(--brand-700)}

/* ---------- 附件 ---------- */
.att-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.att-grid:empty{display:none}
.att-item{position:relative;width:82px;text-align:center}
.att-img,.att-file{width:82px;height:82px;border-radius:var(--radius-sm);object-fit:cover;
  border:1px solid var(--border-strong);cursor:pointer;display:block;background:var(--bg)}
.att-file{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
  color:var(--brand-700);background:var(--brand-50);cursor:default}
.att-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;line-height:18px;border-radius:50%;
  border:1px solid var(--border-strong);background:#fff;color:var(--danger);cursor:pointer;
  font-size:14px;padding:0;box-shadow:var(--shadow)}
.att-name{font-size:11px;color:var(--muted);margin-top:4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.att-size{font-size:10px;color:var(--hint)}

/* ---------- 家长端报告分块 ---------- */
.rp-block{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border-strong)}
.rp-title{font-size:12px;font-weight:600;color:var(--brand-700);margin-bottom:6px}
.rp-att{margin-top:8px}
@media (max-width:520px){ .att-item{width:68px} .att-img,.att-file{width:68px;height:68px} }

@media (max-width:860px){
  .shell{flex-direction:column}
  .sidebar{width:100%;flex:none;min-height:auto;position:static;display:flex;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--border);padding:8px;gap:6px}
  .sidebar a{margin:0;white-space:nowrap}
  .main{padding:14px}
  .g2,.g3,.g4,.form-grid{grid-template-columns:1fr}
  .lesson .time{flex:0 0 100%}
}
/* Shared-server edition */
[hidden]{display:none!important}.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.lesson-choices{max-height:45vh;overflow:auto;margin:16px 0}.lesson-choice{display:flex;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--border);font-size:13px}.lesson-choice input{width:auto;flex:none}.att-name a{color:var(--brand);text-decoration:underline}.login-card h2{font-size:20px;margin:18px 0}.topbar{flex-wrap:wrap}.login-card{max-width:490px}button:disabled{opacity:.5;cursor:wait}input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #76b8ad;outline-offset:2px}@media(max-width:640px){.topbar .logo{width:100%}.who{margin-right:auto}.roommap-row{flex-wrap:wrap}.login-wrap{padding:20px 14px}.tbl-wrap{max-width:100%;overflow-x:auto}}

/* Language controls wrap without overlapping the main content on narrow screens. */
.topbar{height:auto;min-height:58px;padding:10px 20px;gap:10px}
.lang-switch{flex-shrink:0}
@media(max-width:640px){.topbar{padding:10px 14px}.topbar .spacer{display:none}.topbar .who{max-width:none}.topbar .logo{font-size:14px}.topbar>.btn{font-size:12px}.seg button{font-size:12px}}