:root{
  --bg:#020713;--panel:#071225;--panel2:#0a162c;--line:rgba(150,190,255,.18);
  --line2:rgba(120,170,255,.36);--text:#f5f8ff;--muted:rgba(230,238,255,.68);
  --blue:#168cff;--cyan:#04d7ff;--green:#22e6a6;--purple:#8b48ff;--pink:#ff3fb7;--gold:#f5ae19;--red:#ff4e5f;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:#020713;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow:hidden}
button,input,textarea,select{font:inherit}button{cursor:pointer}
.studio-app{height:100vh;display:grid;grid-template-columns:300px 1fr;background:radial-gradient(circle at 80% 10%,rgba(0,120,255,.15),transparent 35%),#020713}
.sidebar{background:linear-gradient(180deg,rgba(4,10,22,.98),rgba(4,10,22,.94));border-right:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:14px;z-index:5}
.brand{display:flex;gap:14px;align-items:center;margin:4px 0 22px}
.brand-orb,.account-avatar,.avatar,.orb-large{border-radius:50%;background:radial-gradient(circle at 35% 30%,#3effff,#116dff 44%,#6d28ff 70%,#090b25 100%);box-shadow:0 0 32px rgba(0,123,255,.8),inset 0 0 18px rgba(255,255,255,.2)}
.brand-orb{width:56px;height:56px}.brand strong{font-size:24px;display:block}.brand span{color:var(--muted);font-size:16px}
.nav-button{height:54px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));color:var(--text);display:flex;align-items:center;gap:14px;padding:0 18px;font-size:16px;text-align:left}
.nav-button:hover,.nav-button.active{border-color:#227cff;background:linear-gradient(135deg,rgba(10,73,190,.6),rgba(25,15,70,.45));box-shadow:0 0 0 1px rgba(80,130,255,.25),0 0 20px rgba(70,80,255,.18)}
.nav-new{height:58px;font-size:18px}.nav-new b{margin-left:auto;background:#1b5cff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}
.nav-icon{width:24px;text-align:center}.nav-label{font-size:12px;letter-spacing:.16em;color:#8b98b7;margin:18px 0 2px;font-weight:800}
.sidebar-history{display:grid;gap:8px;color:var(--muted);max-height:170px;overflow:auto}.sidebar-history button,.sidebar-history span{border:0;background:transparent;color:var(--muted);text-align:left;font-size:14px;padding:4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-card{margin-top:auto;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.045);padding:16px;display:grid;gap:12px}.account-line{display:flex;gap:12px;align-items:center}.account-avatar{width:44px;height:44px}.account-card strong{display:block}.account-card span{color:var(--muted)}
.account-action,.upgrade-action{height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text)}.upgrade-action{border:0;background:linear-gradient(135deg,#006dff,#9b30ff);box-shadow:0 0 24px rgba(102,70,255,.35)}
.main{position:relative;overflow:hidden}.planet-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 68% 0%,rgba(90,160,255,.5),transparent 34%),radial-gradient(ellipse at 70% 12%,rgba(12,38,75,.95) 0 26%,rgba(2,7,19,.2) 55%,transparent 70%);pointer-events:none}
.planet-bg:before{content:"";position:absolute;left:8%;right:-8%;top:3%;height:270px;border-radius:50%;border-top:5px solid rgba(110,190,255,.9);box-shadow:0 -20px 80px rgba(60,145,255,.45),inset 0 30px 60px rgba(230,180,80,.08);transform:rotate(-1deg)}
.stars-bg:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 10%,rgba(255,185,80,.9) 0 2px,transparent 3px),radial-gradient(circle at 62% 22%,rgba(255,185,80,.8) 0 2px,transparent 3px),radial-gradient(circle at 73% 18%,rgba(255,185,80,.8) 0 2px,transparent 3px),radial-gradient(circle at 82% 31%,rgba(255,185,80,.65) 0 2px,transparent 3px),radial-gradient(circle at 40% 20%,rgba(60,190,255,.7) 0 1px,transparent 2px);opacity:.9;pointer-events:none}
.top-status{position:absolute;right:34px;top:28px;z-index:10;border:1px solid var(--line2);border-radius:999px;background:rgba(3,9,20,.62);backdrop-filter:blur(16px);padding:13px 24px;display:flex;gap:11px;align-items:center;font-size:16px}.green-dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.view{position:absolute;inset:0;display:none;overflow:auto;padding:54px 56px 40px}.view.active{display:block}.view-home{display:none;align-items:center;justify-content:center;text-align:center}.view-home.active{display:flex}
.hero-wrap{position:relative;width:min(1080px,100%);z-index:1}.spark{font-size:34px;color:#1aa2ff;margin-bottom:12px}.eyebrow{color:#14c8ff;letter-spacing:.22em;font-weight:800;font-size:13px;margin-bottom:16px}
h1,.view h2{margin:0;font-weight:850;letter-spacing:-.055em}h1{font-size:clamp(52px,6vw,92px);line-height:.96}h1 span,.signin-copy h2 span{background:linear-gradient(90deg,#16a8ff,#a95cff);-webkit-background-clip:text;color:transparent}.hero-wrap p{color:var(--muted);font-size:20px;line-height:1.55}
.hero-composer{margin:36px auto 30px;width:min(980px,100%);border:2px solid rgba(100,135,255,.85);border-radius:24px;background:rgba(5,12,28,.78);box-shadow:0 0 46px rgba(70,80,255,.28);padding:24px}.hero-input-row{display:grid;grid-template-columns:36px 1fr 180px;gap:15px;align-items:center}.input-icon{font-size:28px;color:#8e50ff}
textarea,input,select{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:13px;color:var(--text);outline:none}textarea{resize:none;padding:14px;min-height:58px}input,select{height:48px;padding:0 14px}textarea::placeholder,input::placeholder{color:rgba(225,235,255,.48)}
.hero-input-row button,.primary-wide,.primary-small,.send-button{border:0;border-radius:16px;background:linear-gradient(135deg,#159dff,#8e34ff);color:#fff;font-weight:800;box-shadow:0 0 30px rgba(41,103,255,.4)}
.hero-input-row button{height:58px;font-size:18px}.quick-grid{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-grid button{position:relative;text-align:left;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--text);border-radius:16px;padding:16px}.quick-grid span{font-size:30px;color:#1aa2ff}.quick-grid b{display:block;margin:6px 0}.quick-grid small{color:var(--muted)}.quick-grid em{position:absolute;right:16px;bottom:16px;color:#36caff;font-style:normal;font-size:22px}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:left;margin-top:22px}.trust-strip div{display:grid;grid-template-columns:44px 1fr;column-gap:12px}.trust-strip span{grid-row:1/3;color:#1aa2ff;font-size:34px}.trust-strip b{font-size:17px}.trust-strip small{color:var(--muted)}
.view-header{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}.view-header.compact{padding-left:0;margin-bottom:18px}.view-header h2,.view h2{font-size:38px}.view-header p{color:var(--muted);font-size:17px;margin:.3em 0}
.messages{position:relative;z-index:1;height:calc(100vh - 245px);overflow:auto;padding:0 0 180px;display:flex;flex-direction:column;gap:18px}.message{display:flex;gap:16px;max-width:880px}.message.user{align-self:flex-end;display:block}.avatar{width:48px;height:48px;flex:0 0 48px}.bubble{border:1px solid var(--line);background:rgba(5,13,28,.76);backdrop-filter:blur(18px);border-radius:18px;padding:18px 20px;box-shadow:0 14px 52px rgba(0,0,0,.25);white-space:pre-wrap;line-height:1.58}.message.user .bubble{background:linear-gradient(135deg,rgba(30,70,190,.85),rgba(20,35,105,.9));border-color:#3158ff}.message.error .bubble{border-color:rgba(255,80,90,.7);background:rgba(80,10,20,.65)}.bubble strong{display:block;margin-bottom:8px}.bubble img,.bubble video{max-width:100%;border-radius:16px;border:1px solid var(--line);margin-top:12px}.bubble audio{width:min(620px,100%);margin-top:12px}
.chat-composer{position:absolute;left:34px;right:34px;bottom:24px;z-index:4;border:2px solid rgba(70,126,255,.75);border-radius:22px;background:rgba(5,13,29,.92);backdrop-filter:blur(20px);padding:16px 18px;box-shadow:0 0 46px rgba(40,90,255,.2)}.composer-top{display:grid;grid-template-columns:52px 52px 1fr 130px;gap:12px;align-items:center}.round-plus{width:52px;height:52px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);color:#fff;font-size:24px}.send-button{height:52px}.sticker-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.sticker-row button{border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.04);color:#fff;padding:11px 17px;font-size:15px}.sticker-row button span{margin-right:8px;color:#12d9ff}.sticker-row button.active{box-shadow:0 0 0 1px rgba(100,170,255,.35),0 0 22px rgba(50,120,255,.22);border-color:#4c86ff}.sticker-row [data-mode=image]{border-color:rgba(0,255,150,.35)}.sticker-row [data-mode=video]{border-color:rgba(255,85,70,.4)}.sticker-row [data-mode=music]{border-color:rgba(255,45,165,.45)}.sticker-row [data-mode=document]{border-color:rgba(245,190,0,.42)}.sticker-row [data-mode=code]{border-color:rgba(0,230,255,.45)}
.signin-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 520px;gap:64px;align-items:center;min-height:calc(100vh - 170px);max-width:1050px;margin:auto}.signin-copy h2{font-size:52px}.signin-copy p{color:var(--muted);font-size:20px}.orb-large{width:170px;height:170px;margin:36px 0}.mini-points{display:grid;gap:16px}.mini-points div{display:grid;grid-template-columns:34px 1fr}.mini-points span{color:#1aa2ff}.mini-points small{display:block;color:var(--muted)}
.signin-card{border:2px solid rgba(115,85,255,.8);border-radius:24px;background:rgba(5,13,29,.75);padding:34px;box-shadow:0 0 44px rgba(130,70,255,.22)}.signin-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:24px}.signin-tabs button{height:48px;border:0;background:transparent;color:var(--muted);font-size:17px}.signin-tabs .selected{color:#12b7ff;border-bottom:2px solid #12b7ff}.signin-card label{display:grid;gap:8px;margin-bottom:18px}.checkline{grid-template-columns:auto 1fr;display:flex!important;align-items:center}.primary-wide,.secondary-wide{width:100%;height:58px;border-radius:13px}.secondary-wide{border:1px solid var(--line2);background:rgba(255,255,255,.035);color:#fff}.or{text-align:center;color:var(--muted);margin:20px}.signin-card p{text-align:center;color:var(--muted)}.signin-card a{color:#905cff}.security-strip{max-width:900px;margin:0 auto;position:relative;z-index:1;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.03);display:grid;grid-template-columns:repeat(4,1fr);padding:20px;color:var(--muted)}
.payment-lock{border:1px solid rgba(245,174,25,.35);border-radius:13px;background:rgba(245,174,25,.06);padding:14px 18px;color:#ffcb63}.billing-tabs,.toolbar,.library-tabs{position:relative;z-index:1;display:flex;gap:12px;align-items:center;margin-bottom:22px;flex-wrap:wrap}.billing-tabs button,.toolbar button,.library-tabs button{height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);color:var(--text);padding:0 24px}.billing-tabs .selected,.toolbar .selected,.library-tabs .selected{border-color:#2586ff;background:linear-gradient(135deg,rgba(10,90,255,.8),rgba(100,40,255,.55))}.billing-tabs span{color:var(--green)}
.plans-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.plan-card{border:1px solid var(--line);border-radius:18px;background:rgba(5,13,29,.74);padding:24px;min-height:440px;display:flex;flex-direction:column}.plan-card i{font-size:34px;color:#a7b7ff}.plan-card b{font-size:30px;margin-top:20px}.plan-card h3{font-size:38px;margin:10px 0}.plan-card h3 span{font-size:16px;color:var(--muted)}.plan-card p,.plan-card li{color:var(--muted);line-height:1.6}.plan-card ul{padding-left:20px}.plan-card button{margin-top:auto;height:52px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);color:#dfe8ff}.plan-card.green{border-color:rgba(0,230,150,.45)}.plan-card.premium{border-color:rgba(126,90,255,.9);box-shadow:0 0 40px rgba(100,70,255,.25)}.plan-card.gold{border-color:rgba(245,174,25,.5)}.compare-table{position:relative;z-index:1;margin-top:28px;display:grid;grid-template-columns:1.5fr repeat(4,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden}.compare-table div{padding:15px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);color:var(--muted)}
.history-rows{position:relative;z-index:1;display:grid;gap:10px}.history-row{border:1px solid var(--line);border-radius:16px;background:rgba(5,13,29,.72);display:grid;grid-template-columns:60px 1fr 150px 360px;gap:16px;align-items:center;padding:16px 18px}.item-icon{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;border:1px solid #168cff;background:rgba(0,125,255,.1);font-size:28px}.history-actions{display:flex;gap:10px}.history-actions button,.danger-btn{height:42px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);color:#fff;padding:0 18px}.danger-btn,.danger-outline{border-color:rgba(255,70,80,.65)!important;color:#ff6b72!important}
.project-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr 360px;gap:22px}.project-list{display:grid;gap:12px}.project-item{border:1px solid var(--line);border-radius:16px;background:rgba(5,13,29,.72);padding:18px;display:grid;grid-template-columns:72px 1fr 90px 210px;gap:16px;align-items:center}.status-active{color:var(--green);background:rgba(0,230,150,.08);border-radius:8px;padding:6px 10px}.project-buttons{display:flex;gap:10px}.project-buttons button{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff}.project-settings{border:1px solid var(--line);border-radius:18px;background:rgba(5,13,29,.78);padding:22px;position:relative}.close-x{position:absolute;right:16px;top:14px;border:0;background:transparent;color:#fff;font-size:28px}.project-avatar{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#118cff,#9a38ff);font-size:32px}.project-settings label{display:grid;gap:8px;margin-top:18px;color:var(--muted)}.project-settings textarea{min-height:110px}
.library-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.library-feature,.library-card{border:1px solid var(--line);border-radius:16px;background:rgba(5,13,29,.75);padding:16px}.library-feature{grid-column:1/-1;display:grid;grid-template-columns:280px 1fr 200px;gap:22px;align-items:center;border-color:rgba(100,80,255,.75)}.preview-box{height:150px;border-radius:14px;background:linear-gradient(135deg,#091b40,#152e68 55%,#020713);border:1px solid var(--line)}.library-card{min-height:220px;display:flex;flex-direction:column}.library-card .thumb{height:74px;border-radius:12px;background:linear-gradient(135deg,rgba(0,130,255,.25),rgba(150,50,255,.2));border:1px solid var(--line);display:grid;place-items:center;font-size:32px;margin-bottom:12px}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags span{border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:12px;padding:4px 8px}.card-actions{margin-top:auto;display:flex;gap:8px}.card-actions button{height:38px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.035);color:#fff;padding:0 15px}
@media(max-width:1200px){.studio-app{grid-template-columns:250px 1fr}.plans-grid,.library-grid{grid-template-columns:repeat(2,1fr)}.quick-grid,.trust-strip{grid-template-columns:repeat(2,1fr)}.project-layout,.signin-grid{grid-template-columns:1fr}.library-feature{grid-template-columns:1fr}}