/* 护眼交流营 · 视觉规范（按参考图取色：浅青天 #B3FDFC + 奶油白面板 #FDFFF2 + 亮绿草地 #B9FF7B） */
:root{
  --sky:#b3fdfc; --sky-d:#8fe6e6;
  --cream:#fdfff2; --cream-l:#feffef;
  --grass:#b9ff7b; --grass-d:#8cf275; --grass-band:#dbf29a;
  --cyan:#74daf1; --cyan-d:#4bafc6;
  --blue:#7fe9ff;
  --green:#99f2a0; --green-d:#5fbf6a;
  --teal:#64eed5; --teal-d:#3ec3ae;
  --stu-bg:#ddf9fd; --stu-in:#bff0fe; --tea-bg:#dcffab; --tea-in:#d8ffac;
  --sun:#ffd964; --orange:#f7a83c;
  --ink:#134c57; --ink2:#2b6f6a; --muted:#6f9b96;
  --line:#8fdc8a;
  --shadow:0 10px 26px rgba(24,110,110,.14);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"HarmonyOS Sans SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  color:var(--ink);min-height:100vh;
  background:#b9ff7b url("/assets/bg.jpg") no-repeat center -4vh fixed;
  background-size:cover;
  -webkit-font-smoothing:antialiased;
}
.grass{display:none}
.deco{display:none}

/* ---------- 通用 ---------- */
.wrap{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:25vh 26px 12vh}
.wrap.login-wrap{padding-top:38vh}
.title-bar{text-align:center;position:relative;padding:6px 0 0;display:none}
.title{
  font-size:56px;font-weight:900;letter-spacing:3px;display:inline-block;
  background:linear-gradient(180deg,#54d6ee 0%,#3fb8e0 45%,#4ec46a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 0 #fff)
         drop-shadow(0 5px 6px rgba(30,120,120,.25));
}
.title-sub{font-size:15px;color:#4a8f8a;letter-spacing:1px;margin-top:4px}
.page-sub{text-align:center;font-size:16px;font-weight:800;color:#2b7d5f;letter-spacing:2px;margin:0 0 14px;
  text-shadow:0 1px 0 #fff}
.road{display:block;margin:8px auto 0;width:min(760px,74%);height:26px;display:none}
.card{background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #eef7dd;padding:20px}
.card.dashed{background:rgba(253,255,242,.92);border:3px dashed #7fd957;box-shadow:var(--shadow)}
.panel-dash{background:var(--cream-l);border-radius:26px;border:4px dashed #7fd957;box-shadow:var(--shadow);padding:22px}
h2.sec{font-size:20px;margin:0 0 12px;color:#2b7d5f;display:flex;align-items:center;gap:8px}
h2.sec:before{content:"";width:8px;height:20px;border-radius:4px;background:linear-gradient(180deg,#7fe9ff,#99f2a0)}

.btn{border:none;border-radius:16px;cursor:pointer;font-family:inherit;font-size:17px;font-weight:800;
  color:#fff;padding:12px 20px;transition:.13s;text-shadow:0 1px 2px rgba(0,80,90,.18)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn:active{transform:translateY(2px);box-shadow:none!important}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:grayscale(.25)}
.btn-cyan{background:linear-gradient(180deg,#8ceaff,#74daf1);box-shadow:0 4px 0 var(--cyan-d)}
.btn-green{background:linear-gradient(180deg,#b3f6b8,#99f2a0);box-shadow:0 4px 0 var(--green-d);color:#1d6b33;text-shadow:none}
.btn-teal{background:linear-gradient(180deg,#7ff3e0,#64eed5);box-shadow:0 4px 0 var(--teal-d)}
.btn-blue{background:linear-gradient(180deg,#9aeeff,#7fe9ff);box-shadow:0 4px 0 var(--cyan-d)}
.btn-sun{background:linear-gradient(180deg,#ffe07a,#ffd964);box-shadow:0 4px 0 #dba700;color:#7a5600;text-shadow:none}
.btn-danger{background:linear-gradient(180deg,#ff9c8a,#ef5f6b);box-shadow:0 4px 0 #b93b47}
.btn-ghost{background:#fff;color:#2b7d5f;border:2px solid var(--line);box-shadow:none;text-shadow:none}
.btn-sm{font-size:14px;padding:8px 14px;border-radius:12px}
input[type=text],input[type=password],select,textarea{
  font-family:inherit;font-size:16px;color:var(--ink);padding:11px 14px;border:2px solid #cdeef2;
  border-radius:14px;background:#fff;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(116,218,241,.25)}

/* ---------- 登录页（直接浮在背景图的奶油留白区上，面板本身不加框） ---------- */
.login-panel{max-width:860px;margin:0 auto;background:transparent;border:none;box-shadow:none;padding:0}
.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.login-card{border-radius:18px;padding:12px 20px 16px;text-align:center;position:relative;
  border:3px solid #fff;box-shadow:0 8px 18px rgba(30,110,110,.10)}
.login-card.stu{background:var(--stu-bg)}
.login-card.tea{background:var(--tea-bg)}
.login-card h3{margin:2px 0 1px;font-size:20px;color:#18606d}
.login-card.tea h3{color:#2c7a2f}
.login-card p.tip{margin:0 0 10px;font-size:12px;color:#5c8f8b}
.login-card.tea p.tip{color:#5f8b52}
.login-card .field{text-align:left;margin-bottom:8px}
.login-card .field label{display:block;font-size:12px;font-weight:800;color:#2b6f6a;margin-bottom:3px}
.login-card .field input,.login-card .field select{padding:8px 12px;font-size:15px;border-radius:11px}
.login-card.stu input,.login-card.stu select{background:var(--stu-in);border-color:#a4e4f2}
.login-card.tea input{background:var(--tea-in);border-color:#c2ea8e}
.login-card .btn{width:100%;font-size:17px;padding:10px 20px;margin-top:4px}
.avatar-row{display:flex;align-items:center;justify-content:center;gap:6px;height:72px}
.avatar-row svg{height:72px;width:auto}
.msg{margin-top:10px;font-size:14px;min-height:20px;font-weight:800}
.msg.err{color:#d9534f}
.msg.ok{color:#2b7d5f}

/* ---------- 学生端 ---------- */
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(253,255,242,.92);
  border:2px solid #fff;border-radius:18px;padding:10px 16px;box-shadow:var(--shadow);margin-bottom:14px}
.topbar .who{font-weight:900;color:#18606d;font-size:15px}
.tag{display:inline-block;background:#e6fbff;color:#18606d;border:1px solid #b8ecf4;border-radius:999px;
  padding:3px 12px;font-size:13px;font-weight:800}
.tag.blue{background:#e8fdf7;color:#1d7f70;border-color:#b3efe2}
.tag.green{background:#efffdc;color:#2c7a2f;border-color:#cdee9a}
.spacer{flex:1}
.bubble{position:relative;background:#fff;border:2px solid #b8ecf4;border-radius:16px;padding:11px 15px;
  font-size:14px;max-width:430px;box-shadow:var(--shadow);color:#2b6f6a;line-height:1.7}
.bubble:after{content:"";position:absolute;left:-11px;bottom:16px;width:0;height:0;
  border:7px solid transparent;border-right-color:#b8ecf4}
.bubble:before{content:"";position:absolute;left:-7px;bottom:16px;width:0;height:0;
  border:7px solid transparent;border-right-color:#fff;z-index:1}

.four{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.big-btn{border:none;border-radius:20px;cursor:pointer;padding:20px 22px;display:flex;align-items:center;gap:16px;
  font-family:inherit;color:#fff;transition:.14s;min-height:104px;text-shadow:0 1px 2px rgba(0,80,90,.20)}
.big-btn:hover{transform:translateY(-3px)}
.big-btn:active{transform:translateY(2px);box-shadow:none!important}
.big-btn:disabled{opacity:.88;cursor:not-allowed;transform:none;filter:saturate(.62) brightness(1.05)}
.big-btn .txt{flex:1;text-align:left}
.big-btn .t1{font-size:27px;font-weight:900;letter-spacing:2px;display:block}
.big-btn .t2{font-size:13px;opacity:.95;margin-top:6px;display:block;font-weight:600}
.big-btn svg{flex:0 0 auto}
.bb-rec{background:linear-gradient(180deg,#a6f0ff,#74daf1);box-shadow:0 6px 0 var(--cyan-d)}
.bb-stop{background:linear-gradient(180deg,#9aeeff,#7fe9ff);box-shadow:0 6px 0 var(--cyan-d)}
.bb-note{background:linear-gradient(180deg,#b3f6b8,#99f2a0);box-shadow:0 6px 0 var(--green-d)}
.bb-anal{background:linear-gradient(180deg,#7ff3e0,#64eed5);box-shadow:0 6px 0 var(--teal-d)}

.mchip{border:2px solid #b8ecf4;background:#fff;color:#18606d;border-radius:999px;
  padding:9px 20px;font-size:17px;font-weight:900;cursor:pointer;font-family:inherit;transition:.12s}
.mchip:hover{border-color:var(--cyan);transform:translateY(-1px)}
.mchip.on{background:linear-gradient(180deg,#8ceaff,#74daf1);color:#fff;border-color:transparent;
  box-shadow:0 3px 0 var(--cyan-d)}
.mchip.done{background:#eef7ec;color:#7ba98a;border-color:#d5ead8}
.mchip.done::after{content:' ✓';color:#2fa36b;font-weight:900}
.mchip[disabled]{cursor:not-allowed;opacity:.85}
.stu-scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.stu-score{background:#fdfff2;border:2px solid #dcd6a8;border-radius:14px;padding:10px 14px;text-align:left}
.stu-score .nm{font-size:17px;font-weight:900;color:#18606d;margin-bottom:4px}
.stu-score .kv{font-size:14px;font-weight:800;color:#2b7d5f;margin-top:6px}
.stu-score .v{font-size:13.5px;color:#456; margin-top:2px;line-height:1.55}

/* ---------- 语音对话页 ---------- */
.talk-wrap{max-width:1080px;margin:0 auto;padding:18px 20px 30px}
.talk-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.talk-title{font-size:17px;font-weight:800;color:#1c4c3a;text-shadow:0 1px 0 #fff}
.talk-grid{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:stretch}
.talk-left{background:rgba(253,255,242,.92);border:3px solid #fff;border-radius:20px;
  box-shadow:0 8px 18px rgba(30,110,110,.10);padding:26px 18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.talk-char{width:220px;height:230px;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.talk-char img{max-width:100%;max-height:100%;object-fit:contain}
.talk-char.listening{transform:scale(1.05)}
.talk-char.listening img{filter:drop-shadow(0 0 14px #74daf1)}
.talk-name{font-size:19px;font-weight:900;color:#18606d}
.talk-state{font-size:14.5px;font-weight:700;color:#2b7d5f;background:#eafbf0;border-radius:12px;padding:7px 12px}
.talk-right{background:rgba(253,255,242,.92);border:3px solid #fff;border-radius:20px;
  box-shadow:0 8px 18px rgba(30,110,110,.10);padding:14px 16px;display:flex;flex-direction:column;min-height:560px}
.talk-msgs{flex:1;overflow-y:auto;max-height:420px;padding-right:4px;display:flex;flex-direction:column;gap:10px}
.talk-msgs .m .b{max-width:520px;font-size:15.5px}
.talk-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.talk-chips button{font-size:13.5px;font-weight:700;color:#1c4c3a;background:#eafbf0;border:2px solid #cdead2;
  border-radius:999px;padding:6px 13px;cursor:pointer}
.talk-chips button:hover{background:#d7f5e2;border-color:#99f2a0}
.talk-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
.mic-big{width:76px;height:76px;border-radius:50%;border:3px solid #fff;cursor:pointer;flex:none;
  background:linear-gradient(180deg,#8ceaff,#4fbfe0);box-shadow:0 5px 0 #2b8cae;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;
  transition:transform .12s}
.mic-big .ml{font-size:11px;font-weight:900}
.mic-big:active,.mic-big.rec{background:linear-gradient(180deg,#ffb0a0,#ef5f6b);box-shadow:0 5px 0 #b03341;
  transform:scale(1.06);animation:pulse 1s infinite}
.stop-big{width:60px;height:60px;border-radius:50%;border:3px solid #fff;cursor:pointer;flex:none;
  background:linear-gradient(180deg,#ffb0a0,#ef5f6b);box-shadow:0 5px 0 #b03341;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;margin-left:-14px;
  transition:transform .12s}
.stop-big .ml{font-size:11px;font-weight:900}
.stop-big:active{transform:scale(.94)}
.cs-item{background:#fdfff2;border:2px solid #dcd6a8;border-radius:12px;padding:9px 13px;margin:8px 0;font-size:14.5px;line-height:1.7}
.cs-item b{color:#18606d;font-size:15.5px}
.cs-item em{font-style:normal;display:inline-block;margin-left:6px}
@media (max-width:860px){.talk-grid{grid-template-columns:1fr}.talk-left{flex-direction:row;justify-content:space-around}
  .talk-char{width:120px;height:130px}.talk-char svg{height:120px}}
.mchip.cur{background:linear-gradient(180deg,#ffe07a,#ffc93c);color:#6a4a00;border-color:#fff;
  box-shadow:0 3px 0 #d99a00;animation:pulse 1.2s infinite}
.turn-tip{margin-top:10px;font-size:14.5px;font-weight:700;color:#8a6410;background:#fff9e6;
  border:2px dashed #f2d27a;border-radius:12px;padding:8px 12px}
.turn-tip b{color:#c8354a;font-size:16px}
.member-box{margin-bottom:16px}
.member-tip{font-size:14.5px;font-weight:800;color:#2b7d5f;margin-bottom:9px}
.member-chips{display:flex;gap:10px;flex-wrap:wrap}
.rec-bar{display:none;margin-top:16px;background:#fff5f6;border:2px solid #ffbccb;border-radius:16px;
  padding:12px 18px;align-items:center;gap:14px}
.rec-bar.on{display:flex}
.dot{width:14px;height:14px;border-radius:50%;background:#ef4b5e;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.45}}
.wave{display:flex;align-items:flex-end;gap:3px;height:26px}
.wave i{display:block;width:4px;background:#ef8fa0;border-radius:2px;animation:wv .9s infinite ease-in-out}
@keyframes wv{0%,100%{height:6px}50%{height:24px}}
.rec-txt{font-weight:900;color:#c8354a}

.panel{margin-top:18px;display:none}
.panel.on{display:block}
.transcript{background:#fbfffa;border:2px dashed #b8ecb0;border-radius:14px;padding:14px 16px;
  font-size:16px;line-height:1.9;white-space:pre-wrap;max-height:280px;overflow:auto}
.muted{color:var(--muted);font-size:14px}
.empty{text-align:center;color:var(--muted);padding:26px;font-size:15px}

/* 思维导图 */
.mindmap{width:100%;overflow:auto;background:#fbfff8;border-radius:14px;border:1px solid #ddf3d8}
.mindmap svg{display:block}
.sum-text{margin-top:14px;background:#f2ffec;border-left:6px solid var(--green);
  border-radius:0 12px 12px 0;padding:14px 16px;font-size:16px;line-height:1.95;white-space:pre-wrap}

/* 星级 */
.stars{letter-spacing:3px;font-size:26px;color:#f6b73c;line-height:1}
.stars .off{color:#dfe9e4}
.dim-block{border:2px solid #e8f8e4;border-radius:16px;padding:16px 18px;margin-bottom:14px;background:#fff}
.dim-block h4{margin:0 0 8px;font-size:18px;color:#2b7d5f;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dim-block .say{font-size:15.5px;line-height:1.95;color:#2b6f6a}
.sumbox{background:linear-gradient(135deg,#fffaea,#efffe6);border:3px dashed #f2d27a;border-radius:16px;
  padding:16px 18px;font-size:18px;font-weight:800;color:#8a6410;line-height:1.8}

/* 多轮对比 */
.cmp{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px}
.cmp .col{flex:1 0 320px;min-width:300px;background:#fff;border:2px solid #e8f8e4;border-radius:16px;padding:14px}
.cmp .col h5{margin:0 0 10px;font-size:17px;color:#1d7f70;display:flex;align-items:center;gap:8px}
.cmp .k{font-size:13px;color:var(--muted);margin:10px 0 3px;font-weight:800;letter-spacing:1px}
.cmp .v{font-size:14.5px;line-height:1.85;color:#2b6f6a}
.cmp .col.stale{background:#fafff8;border-style:dashed;border-color:#dcece4}

/* 小护问答 */
.chat-fab{position:fixed;right:26px;bottom:150px;z-index:40;border:none;background:none;cursor:pointer;
  filter:drop-shadow(0 8px 16px rgba(40,140,150,.30))}
.chat-panel{position:fixed;right:22px;bottom:22px;width:390px;height:620px;max-height:82vh;z-index:45;
  background:#fff;border-radius:22px;box-shadow:0 18px 50px rgba(20,90,90,.28);border:2px solid #dcf5f8;
  display:none;flex-direction:column;overflow:hidden}
.chat-panel.on{display:flex}
.chat-head{background:linear-gradient(135deg,#74daf1,#5fc9a8);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px}
.chat-head .n{font-weight:900;font-size:17px}
.chat-head .s{font-size:12px;opacity:.92}
.chat-body{flex:1;overflow:auto;padding:14px;background:linear-gradient(180deg,#f7fffb,#f2fdff)}
.m{margin-bottom:12px;display:flex;gap:8px;align-items:flex-start}
.m .av{flex:0 0 34px}
.m .b{background:#fff;border:1px solid #e2f6f9;border-radius:14px;padding:9px 13px;font-size:15px;line-height:1.75;
  max-width:270px;white-space:pre-wrap;box-shadow:0 2px 8px rgba(30,120,120,.07)}
.m.me{flex-direction:row-reverse}
.m.me .b{background:linear-gradient(135deg,#dcf6ff,#cdeeff);border-color:#b3e4f7}
.chat-foot{padding:10px 12px;border-top:1px solid #eef7f2;background:#fff;display:flex;gap:8px;align-items:center}
.chat-foot input{flex:1;font-size:14px;padding:9px 12px}
.mic-btn{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;flex:0 0 46px;
  background:linear-gradient(180deg,#7ff3e0,#4ed3bd);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(60,190,170,.40)}
.mic-btn.rec{background:linear-gradient(180deg,#ff8f6b,#ef4b5e);animation:pulse 1s infinite}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 10px}
.chips button{background:#eefdf3;border:1px solid #b8ecb0;color:#2b7d5f;border-radius:999px;
  padding:6px 12px;font-size:13px;cursor:pointer;font-family:inherit}
.chips button:hover{background:#dcf9e6}

/* ---------- 教师端 ---------- */
.tabs{display:flex;gap:10px;margin:6px 0 18px;flex-wrap:wrap}
.tab{background:#fff;border:2px solid var(--line);color:#2b7d5f;border-radius:999px;padding:10px 22px;
  font-size:16px;font-weight:900;cursor:pointer;font-family:inherit}
.tab.on{background:linear-gradient(180deg,#8ceaff,#74daf1);color:#fff;border-color:transparent}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pill{background:#fff;border:2px solid var(--line);color:#2b7d5f;border-radius:999px;padding:7px 16px;
  font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.pill.on{background:linear-gradient(180deg,#7ff3e0,#64eed5);color:#0d6b5d;border-color:transparent}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.gcard{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);border:2px solid #eaf8f0;cursor:pointer;transition:.15s}
.gcard:hover{transform:translateY(-2px);border-color:var(--cyan)}
.gcard .gh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.gcard .gn{font-size:18px;font-weight:900;color:#18606d}
.gcard .kv{display:flex;align-items:center;gap:8px;font-size:14px;color:#2b6f6a;margin:6px 0}
.gcard .kv .st{font-size:17px;letter-spacing:1px;color:#f6b73c}
.gcard .kv .st .off{color:#dfe9e4}
.gcard .ln{font-size:14px;color:#2b6f6a;background:#f4fdf1;border-radius:10px;padding:8px 10px;margin-top:8px;line-height:1.7}
.gcard .more{font-size:12px;color:var(--muted);text-align:right;margin-top:6px}
table.rec{width:100%;border-collapse:collapse;font-size:15px}
table.rec th,table.rec td{padding:10px 12px;border-bottom:1px solid #eef7f2;text-align:left}
table.rec th{color:#2b7d5f;font-size:14px;background:#f4fdf1}
.detail{font-size:14.5px;line-height:1.9;color:#2b6f6a}
.detail b{color:#2b7d5f}
.modal{position:fixed;inset:0;background:rgba(14,60,60,.45);z-index:60;display:none;align-items:center;justify-content:center;padding:24px}
.modal.on{display:flex}
.modal .box{background:#fff;border-radius:20px;max-width:900px;width:100%;max-height:86vh;overflow:auto;padding:22px 24px}
.modal .box h3{margin:0 0 12px;color:#2b7d5f}
.toast{position:fixed;left:50%;top:26px;transform:translateX(-50%);z-index:80;background:rgba(19,76,87,.94);
  color:#fff;padding:11px 22px;border-radius:999px;font-size:15px;display:none}
.toast.on{display:block}
.spin{display:inline-block;width:16px;height:16px;border:3px solid rgba(255,255,255,.5);border-top-color:#fff;
  border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .four,.login-grid{grid-template-columns:1fr}
  .title{font-size:38px}
  .chat-panel{right:10px;left:10px;width:auto}
}