:root{color:#e3e1ea;background:#121319;font-family:Plus Jakarta Sans,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--surface: #121319;--surface-low: rgba(26, 27, 34, .72);--surface-high: rgba(41, 42, 48, .74);--on-surface: #e3e1ea;--on-surface-variant: #b9cacb;--primary: #dbfcff;--primary-glow: #00f0ff;--secondary: #ffade2;--spotlight-color: #a855f7}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{overflow:hidden}button,input,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.studio-page{position:relative;width:100%;height:100dvh;min-height:720px;overflow:hidden;color:var(--on-surface);background:var(--surface)}.stage-background,.stage-background img,.background-vignette,.spotlight-layer,.avatar-stage,.petal-layer,.meteor-layer,.gift-layer{position:fixed;top:0;right:0;bottom:0;left:0}.stage-background{z-index:0;background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--spotlight-color) var(--spotlight-background-wash, 19%),transparent),transparent var(--spotlight-background-wash-radius, 34%)),#0d0e14}.stage-background img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.04)}.background-vignette{background:linear-gradient(180deg,#0d0e142e,#0d0e1400 25%,#0d0e14c2),linear-gradient(90deg,#0d0e1433,#0d0e1405,#0d0e1452)}.spotlight-layer{z-index:10;overflow:hidden;pointer-events:none;mix-blend-mode:screen}.spotlight-layer.off{display:none}.spotlight{position:absolute;top:-110px;width:var(--spotlight-beam-width, 120px);height:1000px;transform-origin:top center;filter:blur(var(--spotlight-beam-blur, 11px));background:conic-gradient(from 174deg at 50% 0%,transparent 0deg,color-mix(in srgb,var(--spotlight-color) var(--spotlight-edge-mix, 13%),transparent) var(--spotlight-edge-deg, 3deg),color-mix(in srgb,var(--spotlight-color) var(--spotlight-center-mix, 26%),transparent) var(--spotlight-center-deg, 6deg),color-mix(in srgb,var(--spotlight-color) var(--spotlight-edge-mix, 13%),transparent) var(--spotlight-edge-deg-2, 9deg),transparent var(--spotlight-outer-deg, 11deg))}.spotlight:after{content:"";position:absolute;top:0;left:50%;width:var(--spotlight-source-size, 18px);height:var(--spotlight-source-size, 18px);border-radius:999px;background:var(--spotlight-color);filter:blur(var(--spotlight-source-blur, 5px));transform:translate(-50%)}.spotlight-1{left:8%;animation:sweep-1 7s ease-in-out infinite}.spotlight-2{left:45%;animation:sweep-2 9s ease-in-out infinite}.spotlight-3{left:78%;animation:sweep-3 8s ease-in-out infinite}.avatar-stage{z-index:3;pointer-events:none}.avatar-runtime-canvas{display:block;width:100%;height:100%}.top-bar{position:fixed;z-index:50;top:0;left:0;right:0;height:92px;padding:calc(14px + env(safe-area-inset-top)) 30px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(59,73,75,.45);background:#12131929;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.host-summary{display:flex;min-width:0;align-items:center;gap:14px}.host-avatar{width:54px;height:54px;flex:0 0 auto;border-radius:999px;border:1px solid rgba(0,240,255,.45);object-fit:cover;box-shadow:0 0 14px #00dbe966}.host-summary h1{margin:0;color:var(--primary);font-family:Sora,PingFang SC,sans-serif;font-size:28px;line-height:1.1;font-weight:600;letter-spacing:0;text-shadow:0 0 10px rgba(0,219,233,.5)}.host-summary p{margin:5px 0 0;color:#dbfcffbd;font-family:Space Grotesk,PingFang SC,sans-serif;font-size:14px;line-height:1.3}.top-actions{display:flex;align-items:center;gap:12px}.icon-button,.round-action,.composer-input button,.send-button,.settings-header button{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer}.icon-button.flat{width:44px;height:44px;color:var(--primary-glow);background:transparent}.song-marquee{position:fixed;z-index:35;top:calc(92px + env(safe-area-inset-top));left:0;right:0;height:38px;padding:0 30px;display:flex;align-items:center;gap:10px;color:var(--primary-glow);border-bottom:1px solid rgba(59,73,75,.34);background:#12131952;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 22px #00000029}.song-marquee svg{flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(0,240,255,.52))}.song-marquee-viewport{min-width:0;flex:1;overflow:hidden;container-type:inline-size;-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}.song-marquee-track{width:max-content;display:flex;align-items:center;gap:64px;padding-left:100%;white-space:nowrap;will-change:transform;animation:song-marquee 16s linear infinite}.song-marquee-track span{color:var(--primary);font-family:Space Grotesk,PingFang SC,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;text-shadow:0 0 8px rgba(0,219,233,.42)}.danmaku-layer{position:fixed;z-index:24;top:150px;bottom:132px;left:0;right:0;overflow:hidden;pointer-events:none}.danmaku-track{position:absolute;left:0;white-space:nowrap;color:#ffffffeb;font-weight:800;text-shadow:0 2px 3px rgba(0,0,0,.7),0 0 10px rgba(219,252,255,.38);will-change:transform;animation-name:move-danmaku;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:forwards}.interaction-sidebar{position:fixed;z-index:42;right:28px;bottom:176px;display:flex;flex-direction:column;align-items:center;gap:22px}.side-action{display:flex;flex-direction:column;align-items:center;gap:7px}.side-action span{color:var(--secondary);font-family:Space Grotesk,sans-serif;font-size:17px;font-weight:600;text-shadow:0 0 8px rgba(255,173,226,.36)}.round-action{width:58px;height:58px;border-radius:999px;color:var(--on-surface);border:0;background:#1213191f;box-shadow:0 0 8px #0000001a;-webkit-backdrop-filter:none;backdrop-filter:none;transition:transform .16s ease,box-shadow .16s ease,color .16s ease}.round-action:hover,.round-action:focus-visible{transform:scale(1.06)}.round-action.favorite{color:var(--secondary);box-shadow:0 0 8px #ffade21f}.round-action.gift,.round-action.share,.round-action.settings{color:var(--primary);box-shadow:0 0 8px #00f0ff1a}.round-action.gift.active,.round-action.settings.active{color:var(--primary-glow);background:#00f0ff0f;box-shadow:0 0 12px #00f0ff38}.petal-layer,.meteor-layer{pointer-events:none}.petal-layer{z-index:30}.meteor-layer{z-index:18;overflow:hidden}.gift-layer{z-index:54;pointer-events:none}.petal{position:absolute;top:-24px;border-radius:100% 0%;background:linear-gradient(135deg,#ffade2,#ff2fd6);box-shadow:0 0 7px #ff2fd66b;opacity:0;animation-name:petal-fall,petal-sway;animation-timing-function:linear,ease-in-out;animation-fill-mode:forwards,none;animation-iteration-count:1,infinite;will-change:transform,opacity,margin-left}.meteor{position:absolute;width:2px;opacity:0;transform:rotate(45deg);transform-origin:top right;background:linear-gradient(to top,#00dbe900,#00dbe9 48%,#a855f7);filter:drop-shadow(0 0 10px rgba(0,219,233,.9));animation-name:meteor-shoot;animation-timing-function:ease-in;animation-fill-mode:forwards;will-change:transform,opacity}.gift-float{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;animation:gift-float 3s ease-out forwards;transform:translate(-50%)}.gift-orb{width:88px;height:88px;display:grid;place-items:center;border-radius:999px;color:#fff8ff;border:1px solid rgba(255,173,226,.78);background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.42),transparent 34%),#ffade257;box-shadow:0 0 22px #ffade2e0,0 0 54px #ff2fd68f,0 0 86px #00f0ff3d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.gift-orb svg{width:44px;height:44px;filter:drop-shadow(0 0 10px rgba(255,255,255,.7))}.gift-float p{margin:11px 0 0;padding:4px 12px;border-radius:999px;color:#ffd8ee;background:#00000080;font-size:15px;font-weight:800;text-shadow:0 0 8px rgba(255,173,226,.62)}.composer-bar{position:fixed;z-index:55;left:30px;right:30px;bottom:calc(22px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px}.composer-input{height:62px;min-width:0;flex:1;display:flex;align-items:center;gap:14px;padding:0 18px;border-radius:999px;border:1px solid rgba(0,240,255,.36);background:#ffffff0d;box-shadow:0 0 12px #00f0ff6b,inset 0 0 7px #00f0ff38;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.composer-input button{flex:0 0 auto;width:28px;height:28px;padding:0;color:var(--primary-glow);background:transparent}.composer-input input{width:100%;min-width:0;border:0;outline:0;color:var(--on-surface);background:transparent;font-size:16px}.composer-input input::placeholder{color:#b9cacb7a}.send-button{width:52px;height:52px;flex:0 0 auto;border-radius:999px;color:#00363a;background:#00f0ff;box-shadow:0 0 18px #00f0ff80}.send-button:disabled{opacity:.68}.settings-panel{position:fixed;z-index:70;left:0;right:0;bottom:0;max-height:min(72dvh,620px);padding:10px 30px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;border-radius:28px 28px 0 0;border-top:1px solid rgba(255,255,255,.2);background:#121319e6;box-shadow:0 -18px 45px #0000006b;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);transform:translateY(105%);transition:transform .24s ease}.gift-panel{position:fixed;z-index:72;left:0;right:0;bottom:0;max-height:min(52dvh,420px);padding:10px 30px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;border-radius:28px 28px 0 0;border-top:1px solid rgba(255,255,255,.2);background:#121319e6;box-shadow:0 -18px 45px #0000006b;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);transform:translateY(105%);transition:transform .24s ease}.gift-panel.open{transform:translateY(0)}.gift-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.gift-panel-header h2{margin:0;color:var(--secondary);font-size:24px;line-height:1.25;font-weight:800;text-shadow:0 0 12px rgba(255,173,226,.28)}.gift-panel-header button{width:44px;height:44px;display:grid;place-items:center;border:0;color:var(--on-surface-variant);background:transparent;cursor:pointer}.gift-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}.gift-card{min-width:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:10px;border:0;color:var(--on-surface);background:transparent;cursor:pointer}.gift-card-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:#1e1f2694;box-shadow:0 0 14px color-mix(in srgb,currentColor 18%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.gift-card:hover .gift-card-icon,.gift-card:focus-visible .gift-card-icon{transform:scale(1.06);border-color:#ffffff38}.gift-card strong{font-size:13px;line-height:1.25;font-weight:700}.gift-card.disabled{cursor:not-allowed;opacity:.48}.gift-card.disabled .gift-card-icon{color:var(--on-surface-variant)!important;filter:grayscale(.6);box-shadow:none}.flower-icon{font-family:Sora,PingFang SC,sans-serif;font-size:32px;line-height:1;font-weight:800}.settings-panel.open{transform:translateY(0)}.panel-handle{width:46px;height:4px;margin:4px auto 18px;border-radius:99px;background:#b9cacb5c}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.settings-header h2{margin:0;color:var(--primary);font-family:Plus Jakarta Sans,PingFang SC,sans-serif;font-size:24px;line-height:1.25;font-weight:700}.settings-header button{width:44px;height:44px;color:var(--on-surface-variant);background:transparent}.settings-section{padding:16px 0;border-top:1px solid rgba(59,73,75,.58)}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.section-title{display:flex;align-items:center;gap:12px;color:var(--primary)}.section-title h3,.section-title p{margin:0}.section-title h3{color:var(--primary);font-size:17px;line-height:1.35;font-weight:700}.section-title p{margin-top:2px;color:#b9cacbc2;font-size:13px}.switch{position:relative;width:60px;height:34px;flex:0 0 auto;border:1px solid rgba(132,148,149,.55);border-radius:999px;background:#34343bd9;cursor:pointer}.switch:disabled{cursor:default}.switch span{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:999px;background:var(--on-surface-variant);transition:transform .18s ease,background .18s ease}.switch.on{border-color:#00f0ff85;background:#00f0ff38}.switch.on span{background:var(--primary-glow);box-shadow:0 0 12px #00f0ffa6;transform:translate(26px)}.report-form{padding-bottom:0}.reason-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.reason-grid button,.report-submit{min-height:40px;border-radius:12px;border:1px solid rgba(132,148,149,.28);color:var(--on-surface);background:#ffffff0d;cursor:pointer}.reason-grid button.selected{border-color:#00f0ff94;color:var(--primary);background:#00f0ff1f}.report-form textarea{width:100%;min-height:70px;margin-top:12px;padding:12px;resize:none;border:1px solid rgba(132,148,149,.28);border-radius:12px;outline:0;color:var(--on-surface);background:#ffffff0d}.report-submit{width:100%;margin-top:12px;color:#00363a;border-color:transparent;background:linear-gradient(135deg,#dbfcff,#00f0ff);font-weight:800;box-shadow:0 0 14px #00f0ff57}.report-submit:disabled{opacity:.7}.report-result{margin:10px 0 0;color:var(--primary);font-size:13px}.report-result.error{color:#ffb4ab}@keyframes move-danmaku{0%{transform:translate(100vw)}to{transform:translate(-100%)}}@keyframes song-marquee{0%{transform:translate(0)}to{transform:translate(calc(-50% - 32px + 50cqw))}}@keyframes gift-float{0%{opacity:0;translate:-50% 0;scale:.4}20%{opacity:1;scale:1.08}72%{opacity:1;scale:1}to{opacity:0;translate:-50% -60vh;scale:1.25}}@keyframes petal-fall{0%{opacity:0;transform:translateY(-5vh) rotate(0) translate(0)}10%,88%{opacity:.82}to{opacity:0;transform:translateY(105vh) rotate(720deg) translate(50px)}}@keyframes petal-sway{0%,to{margin-left:0}50%{margin-left:30px}}@keyframes meteor-shoot{0%{opacity:0;transform:translate(0) rotate(45deg)}10%,86%{opacity:1}to{opacity:0;transform:translate(-120vw,120vh) rotate(45deg)}}@keyframes sweep-1{0%,to{transform:rotate(-25deg)}50%{transform:rotate(15deg)}}@keyframes sweep-2{0%,to{transform:rotate(5deg)}50%{transform:rotate(-35deg)}}@keyframes sweep-3{0%,to{transform:rotate(20deg)}50%{transform:rotate(-10deg)}}@media(max-width:480px){.studio-page{min-height:640px}.top-bar{height:78px;padding:calc(10px + env(safe-area-inset-top)) 20px 10px}.host-avatar{width:46px;height:46px}.host-summary h1{font-size:24px}.host-summary p{font-size:12px}.song-marquee{top:calc(78px + env(safe-area-inset-top));height:34px;padding:0 20px}.song-marquee-track span{font-size:13px}.danmaku-layer{top:132px}.interaction-sidebar{right:20px;bottom:156px;gap:22px}.round-action{width:54px;height:54px}.composer-bar{left:20px;right:20px;gap:12px}.composer-input{height:54px}.send-button{width:46px;height:46px}.settings-panel,.gift-panel{padding-left:20px;padding-right:20px}.gift-grid{gap:16px 12px}.gift-card-icon{width:58px;height:58px}}