:root{--pink:#f06aa8;--pink2:#ffd6ea;--vio:#8a5aa8;--ink:#4a2e5a;--bg1:#fff5fb;--bg2:#efe6ff;--ok:#2fa36b;--bad:#d9465f;--card:rgba(255,255,255,.88)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font:16px/1.45 "Nunito","Segoe UI",system-ui,sans-serif;color:var(--ink);background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed}
a{color:var(--vio)}h1,h2,h3{margin:.2em 0 .5em;color:#7b3f8f}h1{font-size:28px}h2{font-size:22px}
#top{display:flex;align-items:center;gap:14px;padding:10px 18px;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:2px solid var(--pink2);position:sticky;top:0;z-index:20;flex-wrap:wrap}
#top .logo{font-weight:900;font-size:19px;color:var(--pink);text-decoration:none;margin-right:auto}
#top nav a{text-decoration:none;font-weight:700;padding:6px 10px;border-radius:999px;color:var(--vio)}#top nav a.on,#top nav a:hover{background:var(--pink2)}
#top .rep{font-weight:800;padding:4px 10px;border-radius:999px;background:#eafff3;color:var(--ok)}#top .rep.low{background:#ffe9ee;color:var(--bad)}
main{max-width:1180px;margin:20px auto;padding:0 16px}footer{text-align:center;font-size:13px;opacity:.75;padding:30px 10px}
.card{background:var(--card);border:2px solid #f6d7ea;border-radius:22px;padding:22px;box-shadow:0 10px 30px rgba(138,90,168,.12);margin-bottom:18px}
.narrow{max-width:520px;margin:30px auto}.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.g2,.g3{grid-template-columns:1fr}}
label{display:block;font-weight:700;margin:10px 0 4px;font-size:14px}
input,select,textarea{width:100%;padding:10px 12px;border:2px solid #ead6f3;border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pink)}textarea{min-height:90px;resize:vertical}
.chk{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:14px}.chk input{width:auto;margin-top:3px}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:11px 20px;font:800 15px inherit;font-family:inherit;cursor:pointer;background:linear-gradient(135deg,#ff8cc0,#c48bff);color:#fff;box-shadow:0 6px 16px rgba(240,106,168,.3);text-decoration:none;transition:transform .1s}
.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.ghost{background:#fff;color:var(--vio);border:2px solid #e6cdf3;box-shadow:none}.btn.small{padding:7px 13px;font-size:13px}.btn.bad{background:linear-gradient(135deg,#ff8a8a,#e5577a)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}.muted{opacity:.7;font-size:14px}.err{color:var(--bad);font-weight:700;min-height:1.2em}.ok{color:var(--ok);font-weight:700}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--pink2);font-size:13px;font-weight:700;margin:2px}
.hero{display:flex;gap:24px;align-items:center}.hero .big{font-size:46px}
.bar{height:12px;background:#f3e6f8;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#ff8cc0,#a77bff)}
table{width:100%;border-collapse:collapse}th,td{padding:8px 10px;text-align:left;border-bottom:1px solid #f1dcea;font-size:14px}tr.me td{background:#fff0f8;font-weight:800}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.tabs button{border:2px solid #ead6f3;background:#fff;border-radius:999px;padding:6px 14px;font:700 14px inherit;font-family:inherit;color:var(--vio);cursor:pointer}.tabs button.on{background:var(--pink2);border-color:var(--pink)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pcard{background:#fff;border-radius:20px;overflow:hidden;border:2px solid #f3d9ea;box-shadow:0 6px 18px rgba(138,90,168,.1);display:flex;flex-direction:column}
.pcard .pic{aspect-ratio:3/4;background:linear-gradient(180deg,#ffe8f4,#e8defc);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.pcard .pic img{width:100%;height:100%;object-fit:contain}
.pcard .info{padding:12px}.pcard .nm{font-weight:900;font-size:18px}
.avatarbox{width:100%;max-width:300px;aspect-ratio:3/4;border-radius:20px;background:linear-gradient(180deg,#ffe8f4,#e8defc);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px dashed #e6c5dc}.avatarbox img{width:100%;height:100%;object-fit:contain}
.notice{padding:14px 16px;border-radius:16px;background:#fff7e6;border:2px solid #ffe0a3;margin:10px 0}.notice.red{background:#ffeef1;border-color:#ffc2cf}.notice.green{background:#eafff3;border-color:#b6ecd0}
/* meeting room */
.room{display:grid;grid-template-columns:1fr 340px;gap:14px}@media(max-width:1000px){.room{grid-template-columns:1fr}}
.stage{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:#ddd center/cover;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.stage .partner{position:absolute;left:50%;bottom:0;height:96%;aspect-ratio:3/4;transform:translateX(-50%);cursor:crosshair}
.stage .partner img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));user-select:none;-webkit-user-drag:none;pointer-events:none}
.stage .partner.eye img{filter:drop-shadow(0 0 22px rgba(255,120,190,.95))}
.stage .meav{position:absolute;left:12px;bottom:12px;width:110px;aspect-ratio:3/4;border-radius:14px;background:rgba(255,255,255,.55);overflow:hidden;border:2px solid #fff}.stage .meav img{width:100%;height:100%;object-fit:contain}
.stage .hud{position:absolute;left:12px;top:12px;right:12px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.stage .hud span{background:rgba(255,255,255,.88);border-radius:999px;padding:5px 12px;font-weight:800;font-size:14px}
.stage .narr{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:min(80%,680px);background:rgba(255,255,255,.9);border-radius:16px;padding:10px 14px;font-size:15px;pointer-events:none}
.stage .float{position:absolute;right:16px;top:60px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none}
.stage .float div{background:#fff;border-radius:12px;padding:6px 12px;font-weight:800;animation:fl 2.6s forwards;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.stage .float .p{color:var(--ok)}.stage .float .n{color:var(--bad)}@keyframes fl{0%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.stage .ev{position:absolute;inset:0;background:rgba(60,30,80,.45);display:flex;align-items:center;justify-content:center;z-index:5}
.stage .ev .box{background:#fff;border-radius:20px;padding:20px;width:min(90%,620px);max-height:90%;overflow:auto}.stage .ev .opt{display:block;width:100%;text-align:left;margin:8px 0;padding:10px 14px;border-radius:14px;border:2px solid #ead6f3;background:#fff;font:600 15px inherit;font-family:inherit;color:var(--ink);cursor:pointer}.stage .ev .opt:hover{border-color:var(--pink);background:#fff4fa}
.chat{display:flex;flex-direction:column;height:min(70vh,640px)}.chat .log{flex:1;overflow:auto;background:#fff;border-radius:16px;padding:10px;border:2px solid #f1dcea}
.chat .m{margin:6px 0;padding:7px 11px;border-radius:14px;max-width:88%;background:#f6effc;word-wrap:break-word}.chat .m.mine{margin-left:auto;background:#ffe6f2}.chat .m.sys{background:#fff9e6;font-size:13px;max-width:100%}.chat .m.hidden{opacity:.4;text-decoration:line-through}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.chips button{border:2px solid #f3b6d8;background:#fff;border-radius:999px;padding:5px 10px;font:700 13px inherit;font-family:inherit;color:#a0457c;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(60,30,80,.4);display:flex;align-items:center;justify-content:center;z-index:50}.modal .card{max-width:560px;width:92%;max-height:90vh;overflow:auto}
.teacher{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}@media(max-width:800px){.teacher{grid-template-columns:1fr}}
.teacher img{width:100%;border-radius:20px;box-shadow:0 10px 30px rgba(138,90,168,.25)}
.bubble{background:#fff;border-radius:18px;padding:14px 18px;border:2px solid #f1dcea;position:relative;margin-bottom:10px}
.loading{text-align:center;padding:60px;opacity:.6}
/* ===== v10: phones & tablets ===== */
.gret{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px rgba(240,106,168,.7),0 0 16px rgba(255,140,190,.9);pointer-events:none;display:none;z-index:3}
.gret.on{display:block}.gret.fade{opacity:.5;transition:opacity 1s}
.stage .partner{touch-action:none;-webkit-user-select:none;user-select:none}
.touchonly{display:none}
@media (hover:none){.touchonly{display:inline}.mouseonly{display:none}.btn:hover{transform:none}}
.camrow{margin-top:8px}.btn.off{opacity:.5;pointer-events:none}
@media (hover:hover){.camrow{display:none}}
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}
img{max-width:100%}
@media (max-width:700px){
 #top{padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));gap:6px}
 #top .logo{font-size:17px}
 #top nav{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
 #top nav::-webkit-scrollbar{display:none}
 #top nav a,#top nav .btn,#top nav span{white-space:nowrap;flex:none}
 #top nav a{padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}
 main{margin:12px auto;padding:0 10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
 .card{padding:16px;border-radius:18px}
 h1{font-size:23px}h2{font-size:20px}
 .narrow{margin:14px auto}
 input,select,textarea{font-size:16px}
 .btn{min-height:44px;padding:11px 18px}.btn.small{min-height:40px;padding:8px 14px;font-size:14px}
 .tabs button{min-height:40px}
 .chips button{min-height:38px;padding:6px 12px}
 .chk input{width:22px;height:22px;flex:none}
 table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
 th,td{padding:8px 8px;font-size:14px}
 td{white-space:normal;min-width:64px}
 .hero{flex-direction:column;align-items:flex-start;gap:10px}.hero .big{font-size:36px}
 .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .pcard .nm{font-size:16px}.pcard .info{padding:9px}
 .avatarbox{max-width:220px;margin:0 auto}
 .stage{aspect-ratio:3/4;border-radius:16px}
 .stage .partner{height:88%}
 .stage .meav{width:70px;left:8px;bottom:8px}
 .stage .hud span{font-size:12px;padding:4px 9px}
 .stage .narr{width:92%;font-size:14px;bottom:8px}
 .chat{height:auto;min-height:0}.chat .log{height:46vh;flex:none}
 .room .row .btn.small{flex:1 1 45%;justify-content:center}
 .modal .card{width:94%;padding:16px}
 footer{padding:20px 10px calc(20px + env(safe-area-inset-bottom))}
}
@media (max-width:700px) and (orientation:landscape){.stage{aspect-ratio:16/10}.chat .log{height:60vh}}