:root{--bg:#f4f4f5;--panel:rgba(255,255,255,.72);--line:#e5e5e8;--text:#1b1b1f;--muted:#85858d;--soft:#f0f0f2;--shadow:0 12px 36px rgba(25,25,35,.07);--accent:#19191d;--purple:#7556f5;--cyan:#68d9ca;--pink:#f39acb}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% -20%,#fff 0,#f4f4f5 45%,#ededf0 100%);color:var(--text);font:14px Manrope,system-ui,sans-serif}button,input,select{font:inherit}button{border:0;cursor:pointer}.app-shell{display:flex;min-height:100vh}.glass{background:var(--panel);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow)}.sidebar{width:250px;display:flex;flex-direction:column;padding:26px 18px;position:fixed;inset:0 auto 0 0;border-width:0 1px 0 0;border-color:var(--line);background:rgba(249,249,250,.78);z-index:3}.brand{display:flex;align-items:center;gap:10px;padding:0 10px 28px;font-size:16px}.brand strong{font-size:16px;display:block}.brand span{display:block;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}.brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#1d1d21;color:#fff;font-size:16px}.project-card{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff8;margin-bottom:22px}.eyebrow,.panel-label{font-size:10px;letter-spacing:.13em;font-weight:700;color:#9999a2}.project-name{font-weight:700;margin:8px 0 10px;font-size:13px}.project-meta{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center}.status-dot,.live-dot{width:7px;height:7px;border-radius:50%;background:#40c28a;display:inline-block}.file-size{margin-left:auto;font-family:'DM Mono';font-size:10px}.nav{display:grid;gap:3px}.nav-item{height:40px;border-radius:11px;background:transparent;text-align:left;padding:0 11px;display:flex;gap:11px;align-items:center;color:var(--muted);font-size:13px}.nav-item.active{background:#fff;color:var(--text);box-shadow:0 2px 8px #20202a0d;font-weight:700}.nav-item kbd{margin-left:auto}.sidebar-bottom{margin-top:auto;display:grid;gap:4px}.profile{border-top:1px solid var(--line);margin-top:15px;padding:16px 8px 0;display:flex;align-items:center;gap:9px}.avatar{width:30px;height:30px;border-radius:10px;background:#d8d1ff;display:grid;place-items:center;font-weight:800}.profile strong{font-size:11px;display:block}.profile small{font-size:10px;color:var(--muted)}.profile>span{margin-left:auto;color:#aaa}.main{margin-left:250px;flex:1;min-width:0}.topbar{height:74px;padding:0 44px;display:flex;align-items:center;border-bottom:1px solid #e5e5e855;gap:20px}.crumbs{display:flex;gap:12px;color:var(--muted);font-size:12px}.crumbs strong{color:var(--text)}.top-actions{margin-left:auto;display:flex;gap:9px;align-items:center}.lang{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:11px;padding:8px 9px;background:#fff8;color:#666;font-size:11px}.lang select{border:0;background:transparent;color:var(--text);outline:0;font-size:11px}.icon-btn,.round-btn{width:34px;height:34px;border-radius:10px;background:#fff;color:#555;box-shadow:0 2px 8px #2221}.export-btn{height:36px;border-radius:11px;background:var(--accent);color:#fff;padding:0 15px;display:flex;gap:8px;align-items:center;font-size:12px;font-weight:700}.content{padding:38px 44px 44px;max-width:1500px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:29px}.page-heading h1{font-size:34px;letter-spacing:-.05em;margin:9px 0 8px;line-height:1.1}.page-heading p{color:var(--muted);margin:0;font-size:13px}.heading-actions{display:flex;gap:8px}.pill-btn,.filter-btn{background:#fff;border:1px solid var(--line);height:34px;padding:0 12px;border-radius:999px;color:#666;font-size:11px}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.85fr);gap:18px}.panel{border-radius:22px;min-height:570px}.preview-panel{padding:22px}.panel-top{display:flex;justify-content:space-between;align-items:flex-start}.panel-top h2{margin:6px 0 0;font-size:15px;letter-spacing:-.02em}.preview-actions{display:flex;gap:7px}.round-btn{width:31px;height:31px;font-size:12px}.round-btn:first-child{background:#1c1c20;color:#fff}.canvas-wrap{height:400px;border-radius:17px;background:linear-gradient(135deg,#fafafa,#e9e9ed);margin:19px 0 15px;position:relative;overflow:hidden;display:grid;place-items:center}.canvas-wrap.checker{background-color:#eee;background-image:linear-gradient(45deg,#e3e3e6 25%,transparent 25%),linear-gradient(-45deg,#e3e3e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e3e6 75%),linear-gradient(-45deg,transparent 75%,#e3e3e6 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.glow{position:absolute;border-radius:50%;filter:blur(45px);opacity:.6}.glow-a{width:230px;height:230px;background:#d5ccff;left:12%;top:15%}.glow-b{width:180px;height:180px;background:#bceee7;right:13%;bottom:16%}.sticker-preview{width:225px;height:225px;position:relative;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 20px 22px #8874eb55)}.spark-core{position:absolute;inset:58px;display:grid;place-items:center;font-size:95px;color:#fff;text-shadow:0 0 10px #fff,0 0 28px #815cff,0 0 58px #b2a3ff;z-index:2}.orbit{position:absolute;border:2px solid #fff8;border-radius:50%;transform:rotate(26deg)}.o1{inset:16px 28px;transform:rotate(28deg)}.o2{inset:31px 12px;transform:rotate(-34deg)}.o3{inset:38px 39px;border-color:#bcaeff;transform:rotate(80deg)}.spark-trail{position:absolute;height:8px;border-radius:99px;background:linear-gradient(90deg,transparent,#fff,#9d8dff,transparent);filter:blur(1px);opacity:.85}.t1{width:70px;top:34px;left:2px;transform:rotate(-34deg)}.t2{width:54px;right:1px;bottom:52px;transform:rotate(-26deg)}.t3{width:42px;left:18px;bottom:25px;transform:rotate(26deg)}@keyframes float{50%{transform:translateY(-9px) rotate(3deg)}}.canvas-caption{position:absolute;bottom:13px;left:16px;right:16px;display:flex;justify-content:space-between;color:#888;font-size:10px}.canvas-caption span:first-child{display:flex;align-items:center;gap:6px}.mono{font-family:'DM Mono';font-size:10px}.dropzone{border:1.5px dashed #d5d5da;border-radius:15px;min-height:80px;display:flex;align-items:center;gap:13px;padding:12px 16px;background:#ffffff55}.upload-icon{height:36px;width:36px;border-radius:11px;background:#ece9ff;display:grid;place-items:center;color:#6850df;font-size:18px}.dropzone strong,.dropzone small{display:block}.dropzone strong{font-size:12px}.dropzone small{color:var(--muted);font-size:11px;margin-top:3px}.choose-btn{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-size:11px;font-weight:700}.inspector{padding:22px;display:flex;flex-direction:column}.search-wrap{display:flex;align-items:center;gap:8px;height:38px;background:#f2f2f4;border-radius:11px;padding:0 11px;margin:19px 0 12px;color:#999}.search-wrap input{border:0;outline:0;background:transparent;flex:1;font-size:12px;color:var(--text)}.search-wrap kbd{font-size:9px;color:#aaa}.token-list{overflow:auto;min-height:280px;max-height:345px;padding-right:2px}.token{display:flex;align-items:center;gap:10px;padding:9px 7px;border-radius:11px;cursor:pointer}.token:hover,.token.selected{background:#f2f1f7}.swatch{width:27px;height:27px;border-radius:8px;box-shadow:inset 0 0 0 1px #0001}.token-info{flex:1;min-width:0}.token-info strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.token-info span{display:block;color:#999;font:10px 'DM Mono';margin-top:3px}.token-alpha{color:#aaa;font:9px 'DM Mono'}.palette-section{border-top:1px solid var(--line);margin-top:15px;padding-top:16px}.palette-head{display:flex;justify-content:space-between;align-items:center}.palette-head p{margin:5px 0 0;font-size:10px;color:var(--muted)}.add-palette{width:26px;height:26px;border-radius:8px;background:#efeff1;color:#777;font-size:17px}.palette-swatches{display:flex;gap:8px;margin-top:13px}.palette-swatch{width:29px;height:29px;border-radius:9px;cursor:pointer;border:2px solid transparent}.palette-swatch.active{border-color:#1b1b1e;outline:2px solid #fff}.tip-bar{margin-top:16px;border:1px solid #e0dcff;background:#f1efff;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:9px;color:#6e629e;font-size:11px}.tip-icon{font-size:17px}.tip-bar strong{color:#554797}.tip-bar button{margin-left:auto;background:transparent;color:#aaa;font-size:18px}.empty-state{text-align:center;margin:15vh auto}.empty-icon{font-size:40px;color:#bdb7ed}.empty-state h2{margin:14px 0 5px}.empty-state p{color:var(--muted)}.hidden{display:none}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#202024;color:#fff;padding:11px 16px;border-radius:999px;font-size:12px;transition:.25s;z-index:9}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-brand{display:none}
body.dark{--bg:#151518;--panel:rgba(33,33,38,.84);--line:#3a3a40;--text:#f3f3f6;--muted:#9d9da6;--soft:#26262c;--accent:#f5f5f7;background:#111114}.dark .sidebar{background:#17171b}.dark .panel,.dark .project-card,.dark .topbar,.dark .lang,.dark .icon-btn,.dark .round-btn,.dark .choose-btn,.dark .pill-btn{background:#232329;color:var(--text)}.dark .export-btn{background:#f4f4f4;color:#17171b}.dark .canvas-wrap{background:linear-gradient(135deg,#28282d,#1d1d22)}.dark .search-wrap{background:#2a2a30}.dark .nav-item.active{background:#29292f}.dark .tip-bar{background:#27233e;border-color:#4a3e8d}
@media(max-width:950px){.sidebar{width:220px}.main{margin-left:220px}.topbar{padding:0 24px}.content{padding:30px 24px}.workspace-grid{grid-template-columns:1fr}.inspector{min-height:500px}.page-heading h1{font-size:29px}}
@media(max-width:700px){.app-shell{display:block}.sidebar{display:none}.main{margin:0}.topbar{height:65px;padding:0 16px}.mobile-brand{display:flex;align-items:center;gap:8px}.mobile-brand .brand-mark{width:27px;height:27px}.crumbs{display:none}.top-actions{gap:5px}.lang{padding:7px}.lang>span{display:none}.export-btn{padding:0 11px}.export-btn span:first-child{display:none}.content{padding:25px 14px 30px}.page-heading{align-items:flex-start;gap:15px}.page-heading h1{font-size:27px}.page-heading p{font-size:12px;line-height:1.5}.heading-actions{display:none}.panel{border-radius:18px}.preview-panel,.inspector{padding:16px}.canvas-wrap{height:300px}.dropzone{align-items:flex-start;flex-wrap:wrap}.choose-btn{margin-left:49px;margin-top:-9px}.token-list{max-height:none}.tip-bar{align-items:flex-start}.tip-bar button{margin-top:-5px}}