:root{
  --ink:#0f172a; --sub:#64748b; --line:#e2e8f0; --bg:#f1f5f9;
  --teal:#0d9488; --teal-d:#0f766e; --blue:#2563eb; --violet:#7c3aed;
  --green:#16a34a; --amber:#d97706; --red:#dc2626;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;color:var(--ink);background:var(--bg);}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);}
label{display:block;font-size:12.5px;color:var(--sub);margin:10px 0 4px;}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#134e4a,#0f766e);}
.login-card{background:#fff;border-radius:16px;padding:34px 36px;width:380px;box-shadow:0 20px 50px rgba(0,0,0,.25);}
.login-card h1{margin:0 0 4px;font-size:21px;}
.login-card .p{color:var(--sub);font-size:13px;margin:0 0 18px;}
.login-card input{width:100%;margin-bottom:8px;}
.btn{display:inline-block;background:var(--teal);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;}
.btn:hover{background:var(--teal-d);}
.btn.block{width:100%;}
.btn.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal);}
.btn.sm{padding:5px 10px;font-size:12.5px;}
.btn.red{background:var(--red);} .btn.gray{background:#94a3b8;}
.hint{font-size:12px;color:var(--sub);margin-top:10px;}

/* shell */
.top{height:56px;background:#0f766e;color:#fff;display:flex;align-items:center;padding:0 20px;gap:14px;}
.top .brand{font-weight:700;font-size:16px;}
.top .tenant{opacity:.9;font-size:13px;}
.top .sp{flex:1;}
.top .role{background:rgba(255,255,255,.18);border-radius:999px;padding:3px 12px;font-size:12.5px;}
.top .demo-chip{background:#fef3c7;color:#92400e;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:600;white-space:nowrap;}
.demo-bar{background:#fef3c7;color:#92400e;font-size:12.5px;padding:7px 20px;line-height:1.5;}
.shell{display:flex;min-height:calc(100vh - 56px);}
.nav{width:180px;background:#fff;border-right:1px solid var(--line);padding:12px 8px;}
.nav a{display:block;padding:9px 14px;border-radius:8px;color:#334155;text-decoration:none;font-size:13.5px;margin-bottom:2px;}
.nav a:hover{background:#f1f5f9;}
.nav a.on{background:var(--teal);color:#fff;font-weight:600;}
.main{flex:1;padding:22px 26px;overflow:auto;}
.page-h{font-size:18px;font-weight:700;margin:0 0 4px;}
.page-sub{color:var(--sub);font-size:13px;margin:0 0 18px;}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px;}
.card h3{margin:0 0 12px;font-size:15px;}
.grid{display:grid;gap:12px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:1fr 1fr 1fr;}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.row .grow{flex:1;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:middle;}
th{color:var(--sub);font-weight:600;background:#f8fafc;}
tr:hover td{background:#f8fafc;}
.tag{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:600;}
.t-owner{background:#ede9fe;color:#6d28d9;} .t-principal{background:#dbeafe;color:#1e40af;} .t-teacher{background:#dcfce7;color:#14532d;}
.t-active{background:#dcfce7;color:#14532d;} .t-off{background:#f1f5f9;color:#64748b;}
.t-warn{background:#fee2e2;color:#991b1b;} .t-info{background:#fef3c7;color:#92400e;}
.empty{color:var(--sub);font-size:13px;padding:18px;text-align:center;}
.toast{position:fixed;top:20px;right:20px;background:#0f172a;color:#fff;padding:12px 18px;border-radius:10px;
  font-size:13.5px;opacity:0;transform:translateY(-10px);transition:.2s;pointer-events:none;z-index:99;max-width:360px;}
.toast.show{opacity:1;transform:none;}
.toast.err{background:var(--red);}
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:50;}
.modal{background:#fff;border-radius:14px;padding:22px 24px;width:440px;max-width:92vw;}
.modal h3{margin:0 0 8px;}
.code-box{white-space:pre-wrap;background:#f8fafc;border:1px dashed var(--teal);border-radius:10px;
  padding:14px 16px;font-size:13.5px;line-height:1.75;user-select:all;}
.warn-line{color:var(--red);font-size:13px;font-weight:600;}
.stat{display:flex;gap:14px;flex-wrap:wrap;}
.stat .b{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;min-width:130px;}
.stat .b .n{font-size:24px;font-weight:700;color:var(--teal-d);}
.stat .b .l{font-size:12.5px;color:var(--sub);}
video{width:100%;border-radius:10px;background:#000;}

/* 老师常在手机上开后台：窄屏时导航改成横向可滑动的一排 */
@media (max-width:760px){
  .shell{flex-direction:column;}
  .nav{width:auto;display:flex;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);padding:8px;}
  .nav a{display:inline-block;margin:0;white-space:nowrap;}
  .main{padding:14px;max-height:none;}
  .g2,.g3{grid-template-columns:1fr;}
  .top{padding:0 12px;gap:8px;}
  .top .tenant{display:none;}
  td,th{padding:7px 6px;}
}