@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#100e1c;--panel:#191626;--panel2:#211d31;--line:rgba(206,192,255,.09);--muted:#8f899f;--text:#f5f1ff;--purple:#ad91ff;--purple2:#8262db;--green:#89dfc2;--font:'DM Sans','Noto Sans SC',sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 53% 0%,#211935 0,#100e1c 48%);color:var(--text);font-family:var(--font);font-size:14px;min-height:100vh}.app-shell{max-width:1500px;margin:0 auto;padding:0 44px}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center;color:inherit;text-decoration:none}.brand>span:last-child{display:grid;gap:1px}.brand strong{font-size:19px;letter-spacing:1px}.brand small{font-size:8px;letter-spacing:2px;color:#a69cbd}.brand-mark{width:32px;height:32px;border:1px solid #7965af;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:2px;transform:rotate(-10deg)}.brand-mark i{height:12px;width:3px;border-radius:3px;background:#c5aaff;transform:rotate(10deg)}.brand-mark i:nth-child(2){height:19px}.topbar-center{font-size:12px;color:#c3bbd6;display:flex;align-items:center;gap:8px}.topbar-center em{font-style:normal;font-size:9px;letter-spacing:1px;color:#827b91;border:1px solid var(--line);padding:4px 6px;border-radius:4px;margin-left:2px}.live-dot{width:7px;height:7px;border-radius:50%;background:#ff658c;box-shadow:0 0 12px #ff658c;display:inline-block}.topbar-actions{display:flex;align-items:center;gap:18px}.connection{font-size:11px;color:#aaa2b7}.connection span,.footer-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#70d9b3;margin-right:6px}.icon-button,.more-button{border:1px solid var(--line);color:#b9b0cb;background:#211e30;border-radius:10px;width:34px;height:34px;cursor:pointer}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:22px;padding-top:25px}.stage-column{min-width:0}.stage-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 15px}.eyebrow{display:block;font-size:9px;letter-spacing:1.55px;color:#9990ae;font-weight:600}.stage-toolbar h1{font-size:21px;margin:5px 0 0;letter-spacing:.2px}.stage-tools{display:flex;gap:7px}.chip-button{background:transparent;border:1px solid var(--line);color:#aaa2b7;border-radius:7px;padding:8px 11px;font:inherit;font-size:10px;cursor:pointer}.chip-button.is-active{color:#ded1ff;background:rgba(162,132,239,.14);border-color:rgba(189,157,255,.25)}.stage{height:550px;position:relative;overflow:hidden;border:1px solid rgba(196,169,255,.18);border-radius:15px;background:radial-gradient(ellipse at 52% 51%,rgba(135,99,204,.37),transparent 39%),linear-gradient(145deg,#24203d 0%,#171627 53%,#12121f 100%);isolation:isolate}.stage[data-theme="ocean"]{background:radial-gradient(ellipse at 52% 51%,rgba(62,139,171,.36),transparent 39%),linear-gradient(145deg,#1e3447 0%,#161f30 53%,#101522 100%)}.stage:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,14,28,.1),transparent 60%,rgba(8,8,17,.38));z-index:-1}.stage-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 8% 19%,#e3d9ff 98%,transparent),radial-gradient(1px 1px at 20% 66%,#d1c4ff 98%,transparent),radial-gradient(1.5px 1.5px at 33% 28%,#fff 98%,transparent),radial-gradient(1px 1px at 80% 14%,#eee4ff 98%,transparent),radial-gradient(1px 1px at 91% 45%,#d1c4ff 98%,transparent),radial-gradient(1px 1px at 71% 70%,#fff 98%,transparent),radial-gradient(1px 1px at 13% 83%,#fff 98%,transparent);opacity:.65}.planet{position:absolute;border-radius:50%;pointer-events:none}.planet-back{width:210px;height:210px;right:12%;top:89px;background:radial-gradient(circle at 35% 32%,rgba(222,201,255,.13),rgba(117,91,165,.06) 62%,transparent 70%);border:1px solid rgba(220,203,255,.11);box-shadow:0 0 55px rgba(155,125,219,.08)}.planet-front{width:380px;height:170px;left:50%;bottom:-107px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(191,160,255,.28),rgba(120,89,187,.07));border:1px solid rgba(221,204,255,.25);box-shadow:0 -17px 45px rgba(175,137,255,.16)}.stage-grid{position:absolute;left:0;right:0;bottom:0;height:145px;background:linear-gradient(transparent,rgba(178,147,247,.06)),repeating-linear-gradient(0deg,transparent 0 23px,rgba(190,165,255,.11) 24px 25px),repeating-linear-gradient(90deg,transparent 0 48px,rgba(190,165,255,.08) 49px 50px);mask-image:linear-gradient(transparent,black)}.live-label{position:absolute;top:17px;left:18px;display:flex;align-items:center;gap:7px;border-radius:6px;padding:7px 9px;background:rgba(9,8,18,.55);font-size:10px;letter-spacing:.55px}.live-label b{font-weight:600;color:#d8caff;margin-left:4px}.stage-tag{position:absolute;top:20px;right:19px;padding:7px 9px;border-radius:5px;background:rgba(18,15,33,.48);color:#c3b8db;font-size:10px}.character-wrap{position:absolute;z-index:2;left:50%;bottom:9px;width:min(60%,420px);height:96%;transform:translateX(-50%);display:flex;justify-content:center;align-items:flex-end;animation:float 3.3s ease-in-out infinite}.character-wrap canvas{height:100%;width:auto;max-width:100%;filter:drop-shadow(0 0 24px rgba(191,158,255,.13))}.character-shadow{position:absolute;z-index:-1;width:170px;height:20px;border-radius:50%;bottom:12px;background:rgba(189,148,255,.29);filter:blur(19px)}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -5px}}.speech-bubble{position:absolute;z-index:4;top:25%;left:calc(50% + 145px);max-width:205px;padding:10px 13px;border-radius:12px 12px 12px 3px;background:rgba(246,240,255,.95);color:#403353;font-size:11px;line-height:1.55;opacity:0;transform:translateY(8px);transition:.22s ease;pointer-events:none}.speech-bubble.is-visible{opacity:1;transform:translateY(0)}.speech-bubble span{position:absolute;left:8px;bottom:-5px;width:11px;height:11px;background:inherit;transform:rotate(45deg)}.stage-caption{position:absolute;z-index:3;bottom:17px;left:19px;display:flex;gap:9px;align-items:center;color:#d1c8e4;font-size:10px}.music-bars{height:15px;display:flex;align-items:center;gap:2px}.music-bars i{width:2px;border-radius:3px;background:#b9a0ff;animation:bars .8s ease-in-out infinite alternate}.music-bars i:nth-child(1){height:6px}.music-bars i:nth-child(2){height:13px;animation-delay:.16s}.music-bars i:nth-child(3){height:9px;animation-delay:.28s}.music-bars i:nth-child(4){height:5px;animation-delay:.38s}@keyframes bars{to{height:3px}}.stage-footer{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 6px}.now-playing,.stage-status{display:flex;align-items:center;gap:11px}.cover-art{height:37px;width:37px;border-radius:9px;background:linear-gradient(145deg,#c1a3ff,#564387);display:grid;place-items:center;color:white;font-size:19px}.now-playing div:nth-child(2),.stage-status div{display:grid;gap:4px}.now-playing small,.stage-status small{font-size:8px;letter-spacing:1px;color:#9189a2}.now-playing strong,.stage-status strong{font-size:11px;font-weight:600}.play-button{border:0;width:29px;height:29px;border-radius:50%;background:#302744;color:#e5d8ff;margin-left:9px;cursor:pointer}.status-orb{height:8px;width:8px;border-radius:50%;background:#79d6b2;box-shadow:0 0 9px #79d6b277}.control-column{display:flex;flex-direction:column;gap:12px}.panel{background:linear-gradient(140deg,rgba(31,27,46,.97),rgba(24,21,36,.97));border:1px solid var(--line);border-radius:13px;padding:16px}.profile-head{display:flex;align-items:center;gap:12px}.avatar{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;color:white;font-size:21px;background:radial-gradient(circle at 35% 28%,#cfbdff,#7059ab 69%,#493869)}.profile-head h2{font-size:16px;margin:4px 0 0}.profile-head h2 small{font-size:10px;color:#948ba5;font-weight:400;margin-left:4px}.more-button{margin-left:auto;background:transparent;border:0;font-size:16px}.profile-panel p,.panel-profile p{font-size:10px;line-height:1.8;color:#aaa2b8;margin:12px 0 11px}.profile-tags{display:flex;gap:6px}.profile-tags span{border:1px solid var(--line);background:#211d30;color:#bfb4d8;padding:5px 8px;border-radius:5px;font-size:9px}.action-panel{padding-bottom:13px}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title h2{font-size:14px;margin:5px 0 0}.action-live{font-size:9px;color:#8cdbbc}.action-tabs{display:flex;gap:6px;margin-top:15px;padding-bottom:11px;border-bottom:1px solid var(--line)}.tab{background:transparent;border:1px solid transparent;border-radius:5px;padding:5px 7px;color:#9991a8;font-size:9px;cursor:pointer}.tab.is-active{color:#e1d4ff;background:#302744;border-color:#493765}.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding-top:11px}.action-button{min-height:56px;border:1px solid rgba(201,182,255,.08);border-radius:8px;background:#211e30;color:#bdb3ce;font-family:inherit;font-size:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.15s ease}.action-button:hover,.action-button.is-selected{border-color:#9475dc;background:#33294b;color:#eee4ff}.action-icon{font-size:17px;line-height:1;color:#c4aaff}.chat-panel{min-height:205px;display:flex;flex-direction:column;flex:1}.chat-count{font-size:9px;color:#8e859d}.chat-list{display:flex;flex-direction:column;gap:12px;margin-top:14px;overflow:auto;max-height:145px;padding-right:2px}.chat-message{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:start}.chat-avatar{height:23px;width:23px;border-radius:8px;display:grid;place-items:center;font-size:9px;color:white}.chat-avatar.purple{background:#655191}.chat-avatar.blue{background:#447b9e}.chat-avatar.pink{background:#a65781}.chat-message strong{font-size:9px;color:#d4cce2;font-weight:500}.chat-message strong em{font-size:7px;font-style:normal;border:1px solid #aa82d7;color:#c09be8;border-radius:3px;padding:1px 3px;margin-left:4px}.chat-message p{font-size:9px;color:#a69db4;margin:3px 0 0}.chat-message time{font-size:8px;color:#716a7e}.chat-form{display:flex;gap:7px;margin-top:auto;padding-top:12px}.chat-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;background:#151321;color:#eee9f7;padding:9px 10px;outline:none;font:inherit;font-size:10px}.chat-form input:focus{border-color:#987bdb}.chat-form input::placeholder{color:#746d80}.chat-form button{border:0;border-radius:7px;width:34px;background:#8063c4;color:white;font-size:16px;cursor:pointer}.bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:13px}.info-card{position:relative;min-height:104px;padding:16px 37px 15px 15px;display:flex;gap:12px;border:1px solid var(--line);border-radius:11px;background:rgba(28,25,41,.82)}.card-icon{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:15px}.purple-icon{background:#302648;color:#c6aaff}.orange-icon{background:#3a2b31;color:#f2b494}.blue-icon{background:#24333d;color:#8fc7df}.info-card h3{font-size:11px;margin:5px 0 5px}.info-card p{font-size:9px;line-height:1.65;color:#9991a6;margin:0}.card-arrow{position:absolute;right:14px;top:14px;color:#807790;font-size:12px}.footer{height:53px;display:flex;align-items:center;justify-content:space-between;color:#736c80;font-size:9px}.footer-dot{width:5px;height:5px}.toast{position:fixed;z-index:20;left:50%;bottom:24px;transform:translate(-50%,10px);padding:10px 15px;background:#f4edff;color:#352945;border-radius:8px;font-size:11px;box-shadow:0 8px 32px #08061266;opacity:0;pointer-events:none;transition:.2s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}button:focus-visible,input:focus-visible{outline:2px solid #c4aaff;outline-offset:2px}
@media(min-width:1400px){.stage{height:610px}.workspace{grid-template-columns:minmax(0,1fr) 370px}}@media(max-width:1050px){.app-shell{padding:0 22px}.workspace{grid-template-columns:minmax(0,1fr) 320px;gap:14px}.stage{height:500px}.action-grid{grid-template-columns:repeat(3,1fr)}.speech-bubble{left:calc(50% + 105px);max-width:170px}}@media(max-width:780px){.app-shell{padding:0 15px}.topbar{height:65px}.topbar-center{display:none}.workspace{grid-template-columns:1fr;padding-top:18px}.stage{height:min(112vw,600px)}.stage-toolbar h1{font-size:18px}.control-column{display:grid;grid-template-columns:1fr 1fr;align-items:start}.panel-profile{grid-column:1/-1}.chat-panel{min-height:235px}.action-panel{min-height:235px}.action-grid{grid-template-columns:repeat(3,1fr)}.bottom-grid{grid-template-columns:1fr}.info-card{min-height:83px}.speech-bubble{left:calc(50% + 80px);top:28%;max-width:145px;font-size:9px}.stage-tag{font-size:8px}.planet-back{right:4%}}@media(max-width:490px){.topbar-actions{gap:8px}.connection{font-size:9px}.stage-tools{gap:4px}.chip-button{font-size:9px;padding:7px}.stage{height:475px}.character-wrap{width:87%;height:86%}.speech-bubble{left:auto;right:8px;top:28%;max-width:125px}.control-column{grid-template-columns:1fr}.panel-profile{grid-column:auto}.chat-panel{min-height:205px}.action-panel{min-height:0}.action-grid{grid-template-columns:repeat(4,1fr)}.stage-tag{top:auto;bottom:54px;right:10px}.live-label{top:12px;left:11px}.footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}