/**
 * 老师端 UI V2 — 对齐学生端 Tab + 总后台浅雾紫白策略
 * 覆盖 portal-v2 类名，不改业务结构
 */
:root{
  --p:#6C4BFF;
  --p2:#7B61FF;
  --blue:#4C8DFF;
  --ink:#171A3A;
  --muted:#9AA0B8;
  --bg:#F7F8FE;
  --card:#fff;
  --line:#E9EAF4;
  --line-soft:#F0F1F6;
  --mint:#23C58B;
  --orange:#FF9D42;
  --red:#FF6B76;
  --r:20px;
  --shadow:0 8px 28px rgba(42,48,87,.06);
  --shadow-lg:0 12px 34px rgba(42,48,87,.09);
  --nav-h:92px;
  --adm-primary:linear-gradient(90deg,#704BFF 0%,#4C8DFF 100%);
}

body{
  background:
    radial-gradient(1200px 480px at 12% -8%,rgba(108,75,255,.08),transparent 55%),
    radial-gradient(900px 420px at 92% 8%,rgba(76,141,255,.07),transparent 50%),
    linear-gradient(180deg,#FBFBFE 0%,#F7F8FE 42%,#F3F1FF 100%);
  color:var(--ink);
}

.portal{padding:16px 16px calc(var(--nav-h) + 18px)}

.eyebrow{
  color:var(--p);
  letter-spacing:.12em;
  font-size:10px;
}
.title{font-size:24px;letter-spacing:-.35px;color:var(--ink)}
.avatar{
  width:42px;height:42px;border-radius:14px;
  background:var(--adm-primary);
  box-shadow:0 8px 22px rgba(108,75,255,.22);
}

.hero{
  border-radius:24px;padding:20px 18px;
  background:linear-gradient(145deg,#7861FF 0%,#6040F6 42%,#4C8DFF 100%);
  box-shadow:0 16px 40px rgba(108,75,255,.22);
}
.hero-stat{
  border-radius:16px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
}
.hero-stat b{font-size:19px}

.section{margin-top:20px}
.section-title{font-size:17px;letter-spacing:-.2px}
.sub{color:var(--muted)}
.section-head .sub,.section-head a.sub{
  color:var(--p);font-weight:800;text-decoration:none
}

.card{
  border-radius:var(--r);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card-soft{background:linear-gradient(180deg,#fff,#FAFAFD)}

.action,.todo-item,.settings-item,.student{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.action{border-radius:18px}
.todo-item{border-radius:16px;border-left-width:3px}
.todo-item .ico,.action .ico{border-radius:13px}

.score-head b{color:var(--p)}
.bar,.bar-v2{background:var(--line-soft)}
.bar span,.bar-v2 span{background:var(--adm-primary)}

.chip{
  border-color:var(--line);
  background:#fff;
  color:var(--muted);
}
.chip.active{
  background:var(--adm-primary);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(108,75,255,.2);
}

.btn-primary{
  background:var(--adm-primary);
  box-shadow:0 10px 24px rgba(108,75,255,.22);
}
.btn-ghost{background:#F1EDFF;color:var(--p)}

.student .face{
  background:linear-gradient(145deg,#F1EDFF,#E8F1FF);
  color:var(--p);
}
.tag.ok{background:#ECFBF5;color:#1aa777}
.tag.warn{background:#FFF7DD;color:#c98912}
.tag.bad{background:#FFF0F1;color:#e94d6c}

.settings-icon{border-radius:13px}
.si-purple{background:var(--adm-primary)}
.field-row input,.add-fields input,.sheet textarea{
  border-color:var(--line)!important;
  background:#FAFAFD!important;
  border-radius:12px!important;
}
.field-row input:focus,.add-fields input:focus,.sheet textarea:focus{
  outline:none;
  border-color:rgba(108,75,255,.45)!important;
  box-shadow:0 0 0 3px rgba(108,75,255,.12);
}

.lesson-badge.on{
  background:linear-gradient(145deg,#F1EDFF,#E8F1FF);
  color:var(--p);
}
.dx-sync{
  border-color:var(--line);
  background:linear-gradient(135deg,#FAFAFD,#F3F1FF);
}
.dx-metric{
  background:linear-gradient(180deg,#FAFAFD,#F7F8FE);
  border-color:var(--line);
}
.dx-metric.is-accent{
  background:linear-gradient(145deg,#F1EDFF,#E8F1FF);
  border-color:#E0D8FF;
}

/* —— 底部 Tab：学生端同款浮动胶囊 —— */
.nav{
  position:fixed;z-index:200;left:50%;
  bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:calc(min(520px,100%) - 18px);
  height:auto;min-height:74px;
  padding:6px;
  display:grid;grid-template-columns:repeat(4,1fr);
  isolation:isolate;overflow:visible;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(244,241,255,.82));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 18px 40px rgba(53,44,99,.16),
    0 0 0 1px rgba(123,108,255,.12),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
}
.nav:before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;
  background:linear-gradient(110deg,transparent 18%,rgba(123,108,255,.1) 46%,rgba(74,157,255,.14) 52%,transparent 82%);
  background-size:220% 100%;
  animation:teacherTabScan 5.6s ease-in-out infinite;
}
.nav-indicator{
  position:absolute;z-index:0;top:6px;bottom:6px;left:6px;
  width:calc((100% - 12px)/4);
  border-radius:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(123,108,255,.2),rgba(74,157,255,.1));
  box-shadow:0 0 20px rgba(91,61,245,.22),inset 0 0 0 1px rgba(168,154,255,.4);
  transform:translateX(calc(var(--tab-from, var(--tab-index, 0)) * 100%));
}
.nav.ready .nav-indicator{
  transform:translateX(calc(var(--tab-index, 0) * 100%));
  transition:transform .46s cubic-bezier(.2,.85,.2,1.18);
}
.nav-item{
  position:relative;z-index:1;
  text-decoration:none;color:#a9a3b9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:6px 2px;min-height:0;border-radius:0;background:transparent;
  font-size:11px;font-weight:800;
  transition:transform .16s ease,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.nav-item:active,.nav-item.press{transform:scale(.93)}
.nav-item.active{
  color:var(--p);font-weight:900;background:transparent;
}
.nav-icon-wrap{
  position:relative;width:42px;height:34px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(243,240,255,.55);color:#a9a3b9;
  box-shadow:none;transition:background .2s,box-shadow .2s,color .2s;
}
.nav-icon-wrap svg{width:21px;height:21px;display:block}
.nav-glow{display:none}
.nav-item.active .nav-icon-wrap{
  color:var(--p);
  background:linear-gradient(180deg,#fff,#efeaff);
  box-shadow:0 8px 18px rgba(91,61,245,.18),0 0 18px rgba(74,157,255,.28);
  animation:teacherTabIconPop .5s cubic-bezier(.2,.9,.2,1.22);
}
.nav-item.active .nav-glow{
  display:block;position:absolute;inset:-7px;border-radius:18px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(123,108,255,.32),transparent 72%);
  animation:teacherTabPulse 1.7s ease-in-out infinite;
}
.nav-label{line-height:1;letter-spacing:.2px;font-size:11px;font-weight:800}
.nav-item.active .nav-label{animation:teacherTabLabelIn .32s ease}
.nav-item.active .nav-label:after{
  content:"";display:block;width:14px;height:3px;margin:5px auto 0;border-radius:99px;
  background:linear-gradient(90deg,#5B3DF5,#4A9DFF);
  box-shadow:0 0 10px rgba(91,61,245,.55);
  animation:teacherTabDash .5s cubic-bezier(.2,.9,.2,1.15);
}
.nav-icon{display:none}

@keyframes teacherTabScan{0%,100%{background-position:130% 0}50%{background-position:-30% 0}}
@keyframes teacherTabIconPop{0%{transform:translateY(7px) scale(.84)}58%{transform:translateY(-4px) scale(1.1)}100%{transform:none}}
@keyframes teacherTabPulse{50%{opacity:.42;transform:scale(1.1)}}
@keyframes teacherTabLabelIn{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes teacherTabDash{from{width:0;opacity:0}to{width:14px;opacity:1}}

/* 班级/表单页 */
.add-panel,.cred-card{
  border-radius:20px!important;
  border-color:var(--line)!important;
  box-shadow:var(--shadow)!important;
}
.add-badge{
  background:linear-gradient(145deg,#F1EDFF,#E8F1FF)!important;
  color:var(--p)!important;
}
.toast{
  background:#171A3A;
  box-shadow:0 12px 28px rgba(23,26,58,.28);
}
.modal-mask{background:rgba(23,26,58,.28)}
.sheet{border-radius:24px 24px 0 0}

@media (prefers-reduced-motion:reduce){
  .nav:before,.nav-item.active .nav-icon-wrap,.nav-item.active .nav-glow,
  .nav-item.active .nav-label,.nav-item.active .nav-label:after{animation:none}
  .nav.ready .nav-indicator{transition:none}
}