:root{--ink:#243552;--muted:#71809b;--blue:#5c83ed;--orange:#ff9c4b;--cream:#fff9ef;--line:#e5eaf5}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,"PingFang SC",sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 0,#fff3d8 0 12%,transparent 30%),radial-gradient(circle at 95% 15%,#e9e5ff 0 10%,transparent 28%),linear-gradient(145deg,#f8fbff,#fffaf3)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#7294e52d 1px,transparent 1px);background-size:24px 24px}.wrap{position:relative;max-width:1120px;margin:auto;padding:28px 20px 44px}.top{display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border:1px solid #ffffff;background:#ffffffd9;backdrop-filter:blur(14px);border-radius:28px;box-shadow:0 18px 50px #4968a314}.top:before{content:"🌈";font-size:46px;margin-right:18px}.top>div{flex:1}.label{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--orange)}h1{font-size:38px;line-height:1.1;margin:7px 0;background:linear-gradient(90deg,#f07b3f,#9a69db,#4e88df);-webkit-background-clip:text;color:transparent}.top p{margin:0;color:var(--muted);font-size:16px}.back{align-self:flex-start;text-decoration:none;color:#556fbc;background:#edf2ff;border-radius:18px;padding:10px 15px;font-weight:700;transition:.2s}.back:hover{transform:translateY(-2px);background:#dfe8ff}.grid{display:grid;grid-template-columns:290px 1fr;gap:20px;margin-top:22px}.card{background:#ffffffed;border:1px solid #fff;border-radius:28px;padding:24px;box-shadow:0 18px 55px #526c9c14}.roles h2{font-size:22px;margin:0 0 16px}.roles button{position:relative;width:100%;min-height:58px;margin:9px 0;border:2px solid transparent;border-radius:18px;background:#f5f7fd;color:#43526f;font-size:15px;font-weight:800;cursor:pointer;transition:.2s}.roles button:hover{transform:translateX(4px);border-color:#cdd9fb}.roles button.active{color:#fff;border-color:#fff;background:linear-gradient(135deg,#6389ed,#8e76df);box-shadow:0 9px 24px #627ddb55}.roles button:nth-of-type(1):before{content:"🎓 ";font-size:19px}.roles button:nth-of-type(2):before{content:"🎨 ";font-size:19px}.roles button:nth-of-type(3):before{content:"🌸 ";font-size:19px}.roles button:nth-of-type(4){background:#fff0dc;color:#b46828}.roles button:nth-of-type(5){background:#eef5f8;color:#627a87}.hint{margin:16px 3px 0;color:var(--muted);font-size:13px;line-height:1.7}.grid>.card:last-child{min-height:650px;display:flex;flex-direction:column}.prompt{padding:17px 20px;border:2px dashed #bfcdf4;border-radius:20px;background:linear-gradient(135deg,#f8faff,#fff);text-align:center;font-size:23px;font-weight:800;color:#415988}.chat{flex:1;min-height:300px;max-height:360px;overflow:auto;margin:16px 0;padding:18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,#f8faff,#fffaf3)}.msg{width:max-content;max-width:82%;padding:12px 16px;margin:10px 0;border-radius:18px;line-height:1.5;box-shadow:0 6px 16px #49658f10}.msg.ai{background:#fff;border-bottom-left-radius:5px}.msg.user{margin-left:auto;color:#fff;background:linear-gradient(135deg,#6488ec,#8874da);border-bottom-right-radius:5px}audio{width:100%;height:48px;margin:0 0 14px;border-radius:14px}.row{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:10px}.row button{min-height:52px;border:0;border-radius:16px;font-size:15px;font-weight:800;cursor:pointer;transition:.2s}.row button:hover{transform:translateY(-2px)}.mic{color:#fff;background:linear-gradient(135deg,#ff9c4b,#ee7644);box-shadow:0 9px 20px #ee7e3a40}.next{color:#50688e;background:#edf2fc;border:1px solid #dbe4f8!important}.feedback{min-height:73px;margin-top:14px;padding:14px;text-align:center;color:#5e6d86;background:#fafbfe;border-radius:17px;line-height:1.55}.feedback b{color:#f07b42;font-size:19px}.stars{text-align:center;color:#ffb43b;font-size:31px;letter-spacing:5px;text-shadow:0 4px 13px #e6a52d44}@media(max-width:780px){.top{padding:20px}.top:before{display:none}h1{font-size:30px}.grid{grid-template-columns:1fr}.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.roles h2,.roles .hint{grid-column:1/-1}.roles button{margin:0}.row{grid-template-columns:1fr}.grid>.card:last-child{min-height:560px}}