*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft Yahei",system-ui,sans-serif;transition:all 0.2s ease;}
body{background:#eef2f8;color:#2a3447;padding:15px;min-height:100vh;}
/* iOS 沉浸式安全区域 */
body{padding-top:calc(15px + env(safe-area-inset-top,0px));padding-right:calc(15px + env(safe-area-inset-right,0px));padding-bottom:calc(15px + env(safe-area-inset-bottom,0px));padding-left:calc(15px + env(safe-area-inset-left,0px));}
@supports (padding-top:constant(safe-area-inset-top)){body{padding-top:calc(15px + constant(safe-area-inset-top));padding-right:calc(15px + constant(safe-area-inset-right));padding-bottom:calc(15px + constant(safe-area-inset-bottom));padding-left:calc(15px + constant(safe-area-inset-left));}}
:root{
  --neu-bg: #eef2f8;
  --neu-light: #ffffff;
  --neu-dark: #d1d9e6;
  --neu-out: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light);
  --neu-inset: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
      --neu-btn: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
    }
    * {
      transition:all 0.25s ease;
    }

    /* ====== 动效增强 ====== */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity:0; }
      to   { opacity:1; }
    }
    @keyframes scaleIn {
      from { opacity:0; transform:scale(0.92); }
      to   { opacity:1; transform:scale(1); }
    }
    @keyframes slideRight {
      from { opacity:0; transform:translateX(calc(-20px * var(--dir,1))); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes slideDown {
      from { opacity:0; transform:translateY(-12px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .tab-content { animation:fadeUp 0.35s ease both; }

    .neu-btn { position:relative; overflow:hidden; }
    .neu-btn::after {
      content:''; position:absolute; inset:0;
      background:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(8,145,178,0.25) 0%, transparent 60%);
      opacity:0; transition:opacity 0.3s;
      pointer-events:none;
    }
    .neu-btn:active::after { opacity:1; }

    .nav-item { position:relative; overflow:hidden; }
    .nav-item::after {
      content:''; position:absolute; inset:0;
      background:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(8,145,178,0.2) 0%, transparent 60%);
      opacity:0; transition:opacity 0.3s;
      pointer-events:none;
    }
    .nav-item:active::after { opacity:1; }

    .stagger > * { animation:fadeUp 0.4s ease both; }
    .stagger > *:nth-child(1) { animation-delay:0.02s; }
    .stagger > *:nth-child(2) { animation-delay:0.06s; }
    .stagger > *:nth-child(3) { animation-delay:0.10s; }
    .stagger > *:nth-child(4) { animation-delay:0.14s; }
    .stagger > *:nth-child(5) { animation-delay:0.18s; }
    .stagger > *:nth-child(6) { animation-delay:0.22s; }
    .stagger > *:nth-child(7) { animation-delay:0.26s; }
    .stagger > *:nth-child(8) { animation-delay:0.30s; }
    .stagger > *:nth-child(9) { animation-delay:0.34s; }
    .stagger > *:nth-child(10){ animation-delay:0.38s; }
    .stagger > *:nth-child(n+11){ animation-delay:0.42s; }
.neu-card{
  background:var(--neu-bg);
  border-radius:18px;
  box-shadow:var(--neu-out);
  padding:24px;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,0.6);
}
.neu-input{
  background:var(--neu-bg);
  border-radius:12px;
  border:1px solid var(--neu-dark);
  outline:none;
  padding:12px 16px;
  color:var(--text-main);
  font-size:14px;
  caret-color:var(--primary);
}
.neu-input:focus{
  box-shadow:var(--neu-inset);
}
.neu-input:focus{box-shadow:var(--neu-inset), inset 0 0 8px var(--primary-fade);}
.neu-btn{
  background:var(--neu-bg);
  border-radius:10px;
  box-shadow:var(--neu-btn);
  border:none;
  padding:10px 22px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:var(--text-sub);
}
.neu-btn:hover{color:var(--primary);transform:translateY(-1.5px);box-shadow:5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light);}
.neu-btn:active{transform:translateY(0);box-shadow:var(--neu-inset);color:var(--primary);}
.btn-primary{color:#f1f5f9;background:var(--primary);text-shadow:0 1px 3px rgba(0,0,0,0.2);}
.btn-primary:hover{background:var(--primary-light);color:#f1f5f9;}
.btn-success{color:#f1f5f9;background:var(--success);text-shadow:0 1px 3px rgba(0,0,0,0.2);}
.btn-warning{color:var(--text-main);background:var(--warning);}
.btn-warning:hover{background:#eab308;color:var(--text-main);}
.btn-danger{color:#f1f5f9;background:var(--danger);text-shadow:0 1px 3px rgba(0,0,0,0.2);}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:18px;
  background:var(--neu-bg);
  border-radius:18px;
  box-shadow:var(--neu-out);
  margin-bottom:20px;
}
.nav-item{
  padding:12px 20px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:var(--text-sub);
  white-space:nowrap;
  background:var(--neu-bg);
  box-shadow:var(--neu-btn);
}
.nav-item.active{
  box-shadow:var(--neu-inset);
  color:var(--tab-active,hsl(var(--tab-h,200), var(--tab-s,70%), var(--tab-l,45%)));
  font-weight:600;
}
.nav-item:hover:not(.active){color:var(--tab-active,hsl(var(--tab-h,200), var(--tab-s,70%), var(--tab-l,45%)));}

/* ====== Tab 专属主题色（设于 nav-item 和内容区容器上） ====== */
#courses,    .nav-item[data-tab="courses"]    { --tab-h:200; --tab-s:70%; --tab-l:45%; }
#studentMsg, .nav-item[data-tab="studentMsg"] { --tab-h:190; --tab-s:60%; --tab-l:40%; }
#teacherMsg, .nav-item[data-tab="teacherMsg"] { --tab-h:155; --tab-s:50%; --tab-l:40%; }
#changePwd,  .nav-item[data-tab="changePwd"]  { --tab-h:280; --tab-s:60%; --tab-l:45%; }

/* Tab 内容区主标题取对应 accent 色 */
.tab-content > h3:first-child,
.tab-content > .neu-card:first-child > h3:first-child {
  color:hsl(var(--tab-h,200), var(--tab-s,70%), var(--tab-l,45%));
  border-left:4px solid hsl(var(--tab-h,200), var(--tab-s,70%), var(--tab-l,45%));
  padding-left:14px;
}
.tab-content .btn-primary {
  background:hsl(var(--tab-h,200), var(--tab-s,70%), var(--tab-l,45%));
}
.tab-content .btn-primary:hover {
  background:hsl(var(--tab-h,200), var(--tab-s,70%), calc(var(--tab-l,45%) + 8%));
}
.container{max-width:1300px;margin:0 auto;padding:0 10px;}
h2{font-size:22px;color:var(--text-main);margin-bottom:10px;font-weight:600;}
h3{font-size:16px;color:var(--text-sub);margin:12px 0;font-weight:500;}
.tip{color:var(--text-tip);font-size:13px;margin:8px 0;line-height:1.5;}
.flex-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:15px 0;}
.hide{display:none !important;}
#loginPage{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 30px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
}
#loginPage.hide{display:none !important;}
.login-box{
  width:100%;
  max-width:420px;
  padding:30px;
  border-radius:22px;
  background:var(--neu-bg);
  box-shadow:var(--neu-out);
}
.login-box .neu-input{width:100%;}
#toast{
  position:fixed;top:25px;left:50%;transform:translateX(-50%);
  z-index:9999;padding:16px 32px;border-radius:14px;
  font-size:15px;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,0.15);
  opacity:0;transition:opacity 0.35s ease, transform 0.35s ease;
  pointer-events:none;max-width:90vw;text-align:center;
  background:var(--neu-bg);color:var(--text-main);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.toast-success{background:#d1fae5;color:#065f46;}
#toast.toast-error{background:#fee2e2;color:#991b1b;}
#toast.toast-warning{background:#fef3c7;color:#92400e;}
#loadingOverlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(238,242,248,0.7);z-index:9998;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.25s;
}
#loadingOverlay.show{opacity:1;pointer-events:auto;}
.loading-spinner{
  width:48px;height:48px;
  border:4px solid var(--neu-dark);border-top-color:var(--primary);
  border-radius:50%;animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.login-error{margin-top:12px;padding:10px;border-radius:10px;background:rgba(220,38,38,0.08);color:var(--danger);font-size:14px;text-align:center;display:none;}
.material-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.material-card{padding:16px;border-radius:14px;background:var(--neu-bg);box-shadow:var(--neu-btn);border:1px solid rgba(255,255,255,0.4);}
.material-card:hover{box-shadow:var(--neu-out);}
.material-card .file-icon{font-size:32px;margin-bottom:8px;}
.material-card .file-title{font-weight:600;color:var(--text-main);margin-bottom:4px;word-break:break-all;}
.material-card .file-meta{font-size:12px;color:var(--text-tip);}
.material-card .file-play{display:inline-block;margin-top:8px;}
.preview-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:10000;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.preview-overlay.show{opacity:1;pointer-events:auto;}
.preview-content{max-width:90vw;max-height:90vh;background:var(--neu-bg);border-radius:18px;padding:20px;position:relative;overflow:auto;}
.preview-close{
  position:absolute;top:10px;right:14px;font-size:28px;cursor:pointer;color:var(--text-sub);z-index:1;
  background:var(--neu-bg);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:var(--neu-btn);
}
.preview-close:hover{color:var(--danger);}
.preview-content video,.preview-content audio,.preview-content img{max-width:100%;max-height:70vh;border-radius:10px;}
.preview-content .doc-viewer{max-height:70vh;overflow:auto;padding:10px;white-space:pre-wrap;}
.msg-item{padding:14px;border-radius:14px;background:var(--neu-bg);box-shadow:var(--neu-btn);margin-bottom:12px;border:1px solid rgba(255,255,255,0.4);}
.msg-item .msg-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.msg-item .msg-sender{font-weight:600;color:var(--primary);font-size:14px;}
.msg-item .msg-time{font-size:12px;color:var(--text-tip);}
.msg-item .msg-body{color:var(--text-sub);font-size:14px;line-height:1.6;}
.msg-item .msg-file{display:inline-block;margin-top:6px;padding:6px 12px;border-radius:8px;background:var(--primary-fade);color:var(--primary);font-size:13px;cursor:pointer;}
.msg-item .msg-file:hover{background:var(--primary);color:#fff;}
.msg-reply{padding:10px;margin-top:8px;border-radius:10px;background:rgba(8,145,178,0.06);border-left:3px solid var(--success);font-size:13px;color:var(--text-sub);}
.badge{padding:2px 10px;border-radius:10px;font-size:12px;font-weight:500;}
.badge-unread{background:var(--danger);color:#fff;}
.badge-read{background:var(--neu-dark);color:var(--text-sub);}
.badge-replied{background:rgba(8,145,178,0.15);color:var(--success);}
.class-no-btn{padding:6px 14px;border-radius:8px;font-size:13px;cursor:pointer;background:var(--neu-bg);box-shadow:var(--neu-btn);border:none;color:var(--text-sub);}
.class-no-btn.active{box-shadow:var(--neu-inset);color:var(--primary);font-weight:600;}
.class-no-btn:hover{color:var(--primary);}
textarea.neu-input{resize:vertical;min-height:80px;}
select.neu-input{appearance:none;cursor:pointer;}

/* ====== 自定义下拉菜单样式 ====== */
.custom-select {
  position: relative;
  display: inline-block;
  min-width: 140px;
  max-width: 100%;
}
.custom-select select {
  display: none;
}
.custom-select-trigger {
  background: var(--neu-bg);
  border-radius: 12px;
  border: 1px solid var(--neu-dark);
  padding: 12px 16px;
  color: var(--text-main);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-select-trigger::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--text-sub);
  pointer-events: none;
  transition: transform 0.2s;
}
.custom-select.open .custom-select-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}
.custom-select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--neu-bg);
  border-radius: 12px;
  border: 1px solid var(--neu-dark);
  box-shadow: var(--neu-out);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}
.custom-select.open .custom-select-options {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.custom-select-option {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-main);
  text-align: center;
  transition: background 0.15s;
}
.custom-select-option:hover {
  background: rgba(8,145,178,0.08);
  color: var(--primary);
}
.custom-select-option.selected {
  background: rgba(8,145,178,0.08);
  color: var(--primary);
  font-weight: 500;
}

.file-upload-area{
  border:2px dashed var(--neu-dark);border-radius:14px;padding:20px;text-align:center;
  cursor:pointer;background:var(--neu-bg);margin:8px 0;
}
.file-upload-area:hover{border-color:var(--primary);background:var(--primary-fade);}
.file-preview{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:8px;background:var(--primary-fade);margin:4px;}
.file-preview .remove-file{cursor:pointer;color:var(--danger);font-weight:600;}
@media (max-width:768px){
  .nav{gap:6px;padding:12px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav::-webkit-scrollbar{display:none;}
  .nav-item{padding:10px 14px;font-size:13px;white-space:nowrap;flex-shrink:0;}
  .neu-card{padding:16px;}
  .flex-row{gap:8px;}
  .neu-input{width:100% !important;}
  .neu-btn{padding:9px 16px;font-size:13px;min-height:42px;}
  .material-grid{grid-template-columns:1fr;}
  .tab-content{animation-duration:0.3s;}
  .table{overflow-x:auto;display:block;-webkit-overflow-scrolling:touch;}
  .table th,.table td{padding:10px 6px;font-size:13px;white-space:nowrap;}
}

@media screen and (-webkit-min-device-pixel-ratio:2) and (max-width:768px){
  *{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}
  body{padding:10px;}
  .neu-card,.nav,.login-box{border-radius:16px !important;}
  .neu-btn{-webkit-appearance:none;appearance:none;border-radius:10px;}
  .neu-input{-webkit-appearance:none;appearance:none;border-radius:12px;}
  :root{
    --neu-out: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light);
    --neu-inset: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
  }
  .neu-btn,.nav-item{transform:translateZ(0);backface-visibility:hidden;}
}

/* ====== 身份水印样式 - 分散全屏布局 ====== */
.watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  background-image: var(--watermark-bg);
  background-repeat: repeat;
  background-size: 400px 280px;
  opacity: 0.35;
}
@media (max-width:768px){
  .watermark{background-size: 340px 240px;}
}