:root { --bg:#f6f5f2; --card:#fff; --ink:#23211e; --dim:#7a746c; --line:#e2ded6; --me:#e8f0e6; --ai:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,"Microsoft YaHei",sans-serif; }
html, body { overflow-x:hidden; }
.wrap { display:flex; flex-direction:column; height:100vh; }
.top { background:var(--card); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; gap:10px; padding:10px 20px; }
.bar img { width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 22%; border:1px solid var(--line); }
.bar .who { line-height:1.2; min-width:0; }
.bar .who b { font-weight:600; display:block; }
.bar .who small { color:var(--dim); font-size:12px; }
.bar .out { margin-left:auto; padding:6px 12px; border:1px solid var(--line); border-radius:9px; background:#fff;
  cursor:pointer; font:inherit; font-size:13px; color:var(--dim); }
.tabs { display:flex; gap:2px; padding:0 12px; overflow-x:auto; }
.tabs button { padding:10px 16px; border:0; background:none; cursor:pointer; font:inherit; font-size:15px;
  color:var(--dim); border-bottom:2px solid transparent; white-space:nowrap; }
.tabs button.on { color:var(--ink); border-bottom-color:#3d5a45; font-weight:600; }
.pane { flex:1; display:none; flex-direction:column; overflow:hidden; min-height:0; }
.pane.on { display:flex; }
.scroll { flex:1; overflow-y:auto; padding:22px 24px; }
.hold { max-width:820px; margin:0 auto; }
.hold h3 { font-size:13px; letter-spacing:.05em; color:var(--dim); margin:26px 0 10px; font-weight:600; }
.hold h3:first-child { margin-top:0; }
.note { color:var(--dim); font-size:13px; }
.act { padding:10px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font:inherit; }
.act:hover { background:#efece6; }
#sess .row { padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:#fff;
  cursor:pointer; margin-bottom:8px; }
#sess .row:hover { border-color:#b9cdbd; }
#sess .row.on { background:var(--me); border-color:#b9cdbd; }
#sess .row small { display:block; color:var(--dim); font-size:13px; }
.msg.agent { display:flex; gap:9px; align-items:flex-start; background:transparent; border:0; padding:0; max-width:min(78%, 820px); }
.msg.agent .ada { width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:50% 22%; flex:0 0 30px; margin-top:2px; }
.msg.agent .body { background:var(--ai); border:1px solid var(--line); border-radius:12px; padding:10px 13px; }
#banner { padding:11px 16px; background:#f4f1e8; border-bottom:1px solid var(--line); font-size:14px; color:#5c5348; display:none; }
#banner b { color:var(--ink); }
#log { flex:1; padding:20px 24px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; }
.msg { max-width:min(72%, 760px); padding:10px 13px; border-radius:12px; white-space:pre-wrap; word-break:break-word; }
.student { align-self:flex-end; background:var(--me); }
.agent { align-self:flex-start; background:var(--ai); border:1px solid var(--line); }
.teacher { align-self:center; background:#fdf6e3; border:1px solid #eadfc0; font-size:15px; }
.msg img { max-width:100%; border-radius:8px; margin-top:6px; display:block; }
.who { font-size:12px; color:var(--dim); margin-bottom:3px; }
#skills { padding:0 24px 10px; display:flex; gap:8px; flex-wrap:wrap; }
#skills button { padding:7px 12px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font-size:14px; color:var(--ink); }
#skills button:hover { background:#efece6; }
footer { padding:14px 24px; border-top:1px solid var(--line); background:var(--card); display:flex; gap:8px; align-items:flex-end; }
@media (max-width:700px) {
  .bar { padding:9px 14px; } .scroll { padding:16px; } #log { padding:14px 16px; }
  #skills { padding:0 16px 8px; } footer { padding:12px 16px; } #banner { padding:10px 16px; }
  .msg { max-width:88%; } .msg.agent { max-width:92%; }
}
textarea { flex:1; resize:none; padding:10px; border:1px solid var(--line); border-radius:10px; font:inherit; min-height:44px; max-height:140px; }
button.go { padding:10px 16px; border:0; border-radius:10px; background:#3d5a45; color:#fff; cursor:pointer; font:inherit; }
label.cam { padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:#fff; }
#gate { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(155deg, #dfe9df 0%, #eef0e6 42%, #f2e8db 72%, #dde6ec 100%); overflow:hidden; }
#gate::before, #gate::after { content:''; position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
#gate::before { width:520px; height:520px; left:-140px; top:-160px; background:rgba(93,140,104,.42); }
#gate::after { width:460px; height:460px; right:-120px; bottom:-140px; background:rgba(214,164,96,.34); }
.paper { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(47,71,56,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(47,71,56,.09) 1px, transparent 1px);
  background-size:34px 34px; mask-image:radial-gradient(circle at 50% 45%, #000 20%, transparent 78%); }
.card { position:relative; display:grid; grid-template-columns:280px 340px; background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 32px 70px -24px rgba(30,45,34,.45), 0 3px 10px rgba(30,45,34,.08); max-width:100%; }
.hero { background:linear-gradient(158deg, #4c6b55 0%, #2c4335 100%); color:#fff; padding:36px 28px;
  display:flex; flex-direction:column; justify-content:center; gap:22px; position:relative; }
.hero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px 220px at 78% 12%, rgba(255,255,255,.16), transparent 70%); }
.hero img { width:112px; height:112px; border-radius:50%; object-fit:cover; object-position:50% 18%;
  border:3px solid rgba(255,255,255,.92); box-shadow:0 10px 26px rgba(0,0,0,.28); background:#dfe7dc; }
.hero h1 { font-size:25px; margin:0 0 7px; letter-spacing:.01em; }
.hero p { margin:0; font-size:14px; line-height:1.75; color:rgba(255,255,255,.85); }
.form { padding:38px 32px; display:flex; flex-direction:column; }
.form h2 { font-size:18px; margin:0 0 3px; font-weight:600; }
.form .sub { color:var(--dim); font-size:13px; margin-bottom:22px; }
.field { display:block; margin-bottom:15px; }
.field span { display:block; font-size:12px; color:var(--dim); margin-bottom:5px; }
.field input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font:inherit;
  background:#faf9f6; margin:0; transition:border-color .15s, background .15s, box-shadow .15s; }
.field input:focus { outline:none; border-color:#6d8a74; background:#fff; box-shadow:0 0 0 3px rgba(109,138,116,.16); }
.err { color:#a33; font-size:13px; min-height:19px; }
.forgot { display:block; margin-top:16px; text-align:center; font-size:13px; color:var(--dim); text-decoration:none; }
.forgot:hover { color:var(--ink); }
@media (max-width:640px) { .card { grid-template-columns:1fr; } .hero { flex-direction:row; align-items:center; padding:24px; gap:16px; }
  .hero img { width:66px; height:66px; } .hero h1 { font-size:21px; } .form { padding:26px 24px 30px; } }
#gate .go { width:100%; padding:13px; border-radius:12px; font-weight:600; }