:root{--bg:#060b14;--panel:#0e1929;--panel2:#070e19;--gold:#f4cf75;--muted:#8d9aae;--line:rgba(255,255,255,.075);--green:#52e3a4;--red:#ff6570;color-scheme:dark}
*{box-sizing:border-box}
html{background:#02060b}
body{margin:0;background:radial-gradient(circle at 50% -10%,#15223a 0,#060b14 38%,#03070d 100%);color:#f7f1df;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
button,input,textarea,select{font:inherit}
button{border:0;cursor:pointer}
.page{width:100%;max-width:720px;min-height:100vh;margin:auto;padding:16px 16px calc(112px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(6,11,20,.6),rgba(6,11,20,.94))}
.topbar{display:flex;align-items:center;gap:12px;padding:calc(8px + env(safe-area-inset-top)) 0 14px}
.live-back{flex:none;min-width:70px;min-height:42px;padding:8px 12px;border-radius:14px;color:#d3dbea;background:rgba(255,255,255,.06);border:1px solid var(--line);font-weight:700}
.brand{flex:1;min-width:0}.brand small{display:block;color:#6f7c91;font-size:10px;letter-spacing:1.5px}.brand strong{display:block;font-size:20px;letter-spacing:.5px}
.conn{display:flex;align-items:center;gap:7px;flex:none;padding:7px 10px;border-radius:999px;font-size:11px;color:#bac6d7;border:1px solid rgba(82,227,164,.3);background:rgba(82,227,164,.08)}
.conn i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.conn.offline{border-color:rgba(255,101,112,.3);background:rgba(255,101,112,.08)}.conn.offline i{background:var(--red);box-shadow:0 0 8px var(--red)}
.hero{padding:8px 1px 18px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:2px;font-weight:800}.hero h1{margin:7px 0 5px;font-size:29px;line-height:1.25}.hero p{margin:0;color:#98a5b9;font-size:14px;line-height:1.6}
.stage{position:relative;min-height:360px;margin-bottom:16px;overflow:hidden;border-radius:26px;border:1px solid rgba(244,207,117,.18);background:radial-gradient(circle at 50% 26%,rgba(232,190,85,.22),transparent 27%),linear-gradient(180deg,#11192b,#070c15 62%,#03060b);box-shadow:0 24px 50px rgba(0,0,0,.22)}
.stage:after{content:"";position:absolute;left:10%;right:10%;bottom:72px;height:40px;border-radius:50%;background:rgba(225,183,83,.08);filter:blur(16px)}
.stage-top{position:absolute;z-index:6;top:14px;left:14px;right:14px;display:flex;justify-content:space-between}.live-badge,.viewer{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(3,8,15,.7);color:#d9e0eb;font-size:11px}.live-badge i{width:8px;height:8px;border-radius:50%;background:#ff5c65;box-shadow:0 0 8px #ff5c65}
.avatar-box{position:absolute;left:50%;top:45%;width:250px;height:375px;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))}.robot-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:robotFloat 4.2s ease-in-out infinite}.robot-face{position:absolute;inset:0;pointer-events:none}.eye{position:absolute;top:28.3%;width:15.5%;height:9.2%;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#071c31 0 54%,#061321 74%,transparent 76%)}.eye.left{left:32%}.eye.right{right:32%}.eye b{width:55%;height:63%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 8%,#9deeff 9% 17%,#069dff 18% 45%,#001b3b 70%);border:1px solid #28c8ff;box-shadow:0 0 5px #0abaff,inset 0 0 3px #8ceeff;animation:robotBlink 5.2s ease-in-out infinite}.eye.right b{animation-delay:-2.1s}.mouth{position:absolute;left:41.5%;top:37.5%;width:17%;height:5.2%;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#061a2c 0 58%,transparent 62%)}.mouth b{width:58%;height:24%;border-radius:999px;background:#9deeff;box-shadow:0 0 5px #12bfff}.stage.speaking .mouth b{animation:robotTalk .24s ease-in-out infinite alternate}
@keyframes robotFloat{50%{transform:translateY(-4px)}}@keyframes robotBlink{0%,88%,94%,100%{transform:scaleY(1)}90%,92%{transform:scaleY(.08)}}@keyframes robotTalk{from{width:45%;height:20%}to{width:68%;height:62%;border-radius:45%}}
.subtitle-wrap{position:absolute;z-index:7;left:16px;right:16px;bottom:20px;text-align:center}.subtitle-wrap small{display:block;color:#c6cfde;font-size:10px;letter-spacing:2px;margin-bottom:7px}.subtitle{font-size:24px;font-weight:900;line-height:1.48;padding:5px 9px;border-radius:8px;color:var(--gold);background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.56),rgba(0,0,0,.12));text-shadow:0 2px 10px rgba(0,0,0,.85)}
.tabs{position:sticky;top:0;z-index:10;display:flex;gap:5px;padding:5px;margin-bottom:16px;border-radius:16px;background:rgba(10,17,29,.92);border:1px solid var(--line);backdrop-filter:blur(12px)}.tabs button{flex:1;padding:11px 3px;border-radius:12px;color:#77859a;background:transparent;font-size:14px;font-weight:800}.tabs button.active{color:#10131a;background:linear-gradient(135deg,#f8e7ac,#c89434)}
.tab-panel{display:none}.tab-panel.active{display:block}.card{position:relative;margin-bottom:16px;padding:18px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(18,30,49,.94),rgba(8,14,25,.96));box-shadow:0 14px 35px rgba(0,0,0,.12)}.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.card-title h2{margin:0;font-size:18px}.card-title span{padding:5px 9px;border-radius:999px;color:var(--gold);background:rgba(244,207,117,.08);border:1px solid rgba(244,207,117,.14);font-size:11px}
.history-card{border-color:rgba(244,207,117,.17)}.history-card .card-title>div{min-width:0}.history-card .card-title small{display:block;margin-top:4px;color:#69778c;font-size:11px}.history-new{flex:none;min-height:38px;padding:0 12px;border-radius:11px;color:#11151c;background:linear-gradient(135deg,#fff0b2,#cf9a3d);font-size:12px;font-weight:900}.compliance-tip{margin-bottom:11px;padding:9px 11px;border-radius:11px;color:#77ddb0;background:rgba(82,227,164,.07);border:1px solid rgba(82,227,164,.14);font-size:12px}.history-list{max-height:230px;overflow:auto;scrollbar-width:none}.history-list::-webkit-scrollbar{display:none}.history-item{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:12px;border-radius:14px;background:rgba(3,8,15,.5);border:1px solid rgba(255,255,255,.065);cursor:pointer}.history-item:last-child{margin-bottom:0}.history-item.active{border-color:rgba(244,207,117,.35);background:linear-gradient(135deg,rgba(75,54,20,.38),rgba(4,9,16,.68))}.history-copy{flex:1;min-width:0}.history-title{display:block;overflow:hidden;color:#e9edf4;font-size:14px;font-weight:800;white-space:nowrap;text-overflow:ellipsis}.history-meta{display:block;margin-top:5px;color:#657389;font-size:11px}.history-open{flex:none;color:var(--gold);font-size:12px}
label{display:block;margin:14px 0 7px;color:#a8b3c4;font-size:13px}label em{color:var(--red);font-style:normal;font-size:11px}label b{float:right;color:#e9ddba}input:not([type=range]),textarea,select{width:100%;border:1px solid rgba(255,255,255,.09);border-radius:14px;outline:0;background:rgba(3,8,15,.58);color:#eef2f8;padding:12px;font-size:15px}textarea{min-height:92px;resize:vertical;line-height:1.55}input:focus,textarea:focus,select:focus{border-color:rgba(244,207,117,.42)}input[type=range]{width:100%;accent-color:#d2a047}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips button{padding:8px 13px;border-radius:999px;color:#8f9caf;background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:13px}.chips button.active{color:#fff0b9;border-color:rgba(244,207,117,.32);background:rgba(244,207,117,.09)}
.actions{display:flex;gap:10px;margin-top:15px}.actions.three .btn{padding-left:8px;padding-right:8px}.btn{min-height:46px;padding:0 16px;border-radius:13px;font-size:14px;font-weight:800}.btn.primary{flex:1;color:#11151c;background:linear-gradient(135deg,#fff1b9,#d2a047 55%,#f1cd70)}.btn.secondary{color:#c1cad7;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}.btn.block{width:100%;margin-top:12px}.btn:disabled{opacity:.5;cursor:wait}
.generate-box{margin-top:14px;padding:13px;border-radius:14px;background:rgba(2,7,13,.5);border:1px solid var(--line)}.generate-box>div:first-child{display:flex;justify-content:space-between;color:#8f9caf;font-size:13px}.progress{height:6px;margin-top:9px;border-radius:99px;overflow:hidden;background:#111c2b}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#8a601d,#fff0a7,#b37b1f);transition:width .25s}.done{margin-top:10px;color:var(--green);font-size:13px}.hidden{display:none!important}
.color-list{display:flex;gap:7px;justify-content:space-between}.color-opt{flex:1;padding:3px 0;text-align:center;color:#77859a;background:transparent;font-size:10px}.color-opt i{display:block;width:35px;height:35px;margin:0 auto 5px;border-radius:12px;border:2px solid transparent}.color-opt.active{color:#e8ddba}.color-opt.active i{border-color:#f8e7ad;box-shadow:0 0 12px rgba(244,207,117,.25)}
.script-list{display:flex;flex-direction:column;gap:10px}.script-item{display:flex;gap:11px;padding:12px;border-radius:16px;background:rgba(3,8,15,.5);border:1px solid var(--line)}.script-item.current{border-color:rgba(244,207,117,.3);background:linear-gradient(135deg,rgba(62,47,20,.38),rgba(4,9,16,.67))}.script-num{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;color:#8a98ad;background:rgba(255,255,255,.05);font-size:12px;font-weight:900}.script-item.current .script-num{color:#11151c;background:linear-gradient(135deg,#f5d782,#b47d27)}.script-copy{flex:1;min-width:0}.script-copy b{display:block;font-size:14px;margin-bottom:4px}.script-copy p{margin:0;color:#8794a8;font-size:13px;line-height:1.45}.script-time{color:#5f6d81;font-size:11px}.empty{padding:24px 4px;text-align:center;color:#6f7c91}
.now-line{padding:17px;border-radius:16px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(244,207,117,.11),transparent 70%),rgba(3,8,15,.54);border:1px solid rgba(244,207,117,.13)}.now-line small{color:#79879b;letter-spacing:2px;font-size:10px}.now-line p{margin:10px 0 0;color:#fff0b9;font-size:18px;font-weight:800;line-height:1.5}.reply-row{display:flex;gap:8px}.reply-row input{flex:1;min-width:0}.reply-row .btn{flex:none}.reply-answer{margin-top:14px;padding:13px;border-radius:14px;background:rgba(82,227,164,.055);border:1px solid rgba(82,227,164,.12)}.reply-answer p{color:#bac5d3;line-height:1.6}.risk{display:inline-block;padding:4px 8px;border-radius:999px;color:var(--gold);background:rgba(244,207,117,.12);font-size:11px}.risk.high{color:var(--red);background:rgba(255,101,112,.12)}.risk.low{color:var(--green);background:rgba(82,227,164,.12)}
.metrics{display:flex;gap:9px}.metrics>div{flex:1;text-align:center;padding:16px 3px;border-radius:16px;background:rgba(3,8,15,.45);border:1px solid var(--line)}.metrics b{display:block;color:#e9ddba;font-size:22px}.metrics small{color:#657389;font-size:11px}.hot-list{margin-top:14px}.hot-list p{margin:8px 0;color:#8794a8;font-size:13px}.suggestion{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#8592a5;font-size:13px;line-height:1.6}.suggestion:last-child{border:0}.suggestion b{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:9px;background:rgba(244,207,117,.08);color:var(--gold)}
.bottom-bar{position:fixed;z-index:20;left:50%;bottom:0;width:min(720px,100%);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(5,10,18,.98) 28%)}.circle-btn{flex:none;width:52px;height:52px;border-radius:16px;color:#c2ccd9;background:#101a29;border:1px solid rgba(255,255,255,.09);font-size:18px}.start-btn{flex:1;height:52px;border-radius:16px;color:#11151c;background:linear-gradient(135deg,#fff0b2,#cb963c,#f2d478);font-size:16px;font-weight:900}.start-btn.live{color:#fff;background:linear-gradient(135deg,#b82f3a,#ff6570)}
.toast{position:fixed;z-index:50;left:50%;bottom:96px;transform:translate(-50%,20px);max-width:82%;padding:10px 15px;border-radius:12px;color:#fff;background:rgba(1,4,8,.92);font-size:13px;text-align:center;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:740px){.page{padding-left:28px;padding-right:28px}.hero h1{font-size:36px}.stage{min-height:440px}.avatar-box{width:300px;height:450px}.subtitle-wrap{left:40px;right:40px}.subtitle{font-size:28px}}
@media(max-width:380px){.page{padding-left:12px;padding-right:12px}.brand small{display:none}.brand strong{font-size:17px}.conn span{display:none}.hero h1{font-size:26px}.stage{min-height:330px}.avatar-box{width:225px;height:338px}.subtitle{font-size:21px}.card{padding:15px}.reply-row{display:block}.reply-row .btn{width:100%;margin-top:8px}}