:root{--ink:#252939;--sub:#7b8297;--line:#e7eaf2;--surface:#fff;--panel:#fff;--soft:#f5f6fb;--accent:#7458e8;--shadow:0 12px 42px #222e4a0b;color-scheme:light}body{color:var(--ink);background:var(--soft);font-family:'Segoe UI',Arial,sans-serif;overflow:hidden}*{scrollbar-width:thin;scrollbar-color:#cdd2e0 transparent}button,a,input,textarea,select{transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}button{border-color:var(--line);border-radius:9px}button:hover:not(:disabled){box-shadow:0 3px 10px #28355e0b;transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{transform:none}.primary,.actions #publish{background:linear-gradient(115deg,#8567f0,#6548cf);border:0;box-shadow:0 4px 12px #7458e82b;color:#fff}.primary:hover,.actions #publish:hover{background:linear-gradient(115deg,#8e72f3,#7153df);color:white}header{height:72px;padding:0 26px;gap:24px;border-bottom:0;background:var(--surface)}.brand{font-size:30px;gap:9px;white-space:nowrap}.brand span{font-size:22px;color:var(--ink);letter-spacing:-1px}.brand small{color:#969aad;font-size:7px;letter-spacing:1.9px}.brand .logo{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:linear-gradient(145deg,#9074f4,#6443ce);color:white;box-shadow:0 4px 10px #7750df29}.brand .logo svg{width:24px;height:24px}.project{border-color:var(--line);padding-left:24px}.project input{color:var(--ink);width:180px;font-size:12px}.project span{color:#9399a8;font-size:10px}.actions{align-items:center;gap:8px}.actions button{font-size:11px;padding:10px 13px;background:var(--surface);color:var(--ink)}.actions #export{color:var(--sub);background:transparent}.actions #undo,.actions #redo{padding:8px 10px;border:0;font-size:20px;color:var(--sub)}.actions .separator{height:22px;width:1px;background:var(--line);margin:0 2px}.icon-button{height:35px;width:36px;padding:7px!important;display:grid;place-items:center}.icon-button svg{width:17px;height:17px;stroke:currentColor}.workspacebar{height:48px;border-block:1px solid var(--line);background:var(--surface);padding:0 26px;display:flex;align-items:center;gap:12px;font-size:11px}.crumb{display:flex;align-items:center;gap:10px;color:var(--sub)}.crumb b{font-weight:600;color:var(--ink)}.crumb em{font-style:normal;color:#c5c9d3}.version-pill{font-size:8px;letter-spacing:.5px;border:1px solid #e4dbff;border-radius:5px;padding:3px 6px;color:#9576d6;background:#faf7ff}.workspacebar .spacer{flex:1}.project-hub{border:0;padding:5px;background:transparent;color:var(--sub);font-size:11px}.search-command{display:flex;align-items:center;gap:25px;color:#a0a5b6;font-size:10px;background:var(--soft);border:1px solid var(--line);padding:6px 10px}.search-command kbd{font:9px 'Segoe UI',sans-serif;background:var(--surface);border:1px solid var(--line);padding:2px 5px;border-radius:4px}.connection-pill{color:#719a85;font-size:9px;display:flex;align-items:center;gap:5px}.connection-pill i{height:5px;width:5px;border-radius:50%;background:#6ab68c;box-shadow:0 0 0 3px #6ab68c12}.app{height:calc(100vh - 120px);grid-template-columns:78px 252px minmax(300px,1fr) 264px}.rail{background:#1c2034;border:0;padding:22px 7px 13px;gap:7px}.rail button{color:#8b93af;background:transparent;border-radius:10px;padding:9px 2px;width:62px;position:relative;display:flex;align-items:center;flex-direction:column;gap:6px;font-size:18px}.rail button svg{height:19px;width:19px;stroke:currentColor;fill:none;stroke-width:1.6}.rail button small{font-size:8px;margin:0;font-weight:500;letter-spacing:.1px}.rail button:hover{color:#dadfed;background:#292e47}.rail button.active{color:#d2c5ff;background:#7960cc25;box-shadow:inset 0 0 0 1px #a68be91c}.rail button.active:before{content:'';position:absolute;left:-7px;top:17px;height:22px;width:3px;background:#a88ef4;border-radius:0 3px 3px 0}.railbottom{font-size:10px;background:linear-gradient(135deg,#8670c2,#4f4b7e);height:32px;width:32px;padding:0;display:grid;place-items:center;box-shadow:0 0 0 4px #ffffff06}.app>aside{background:var(--panel);border-color:var(--line);padding:25px 20px;color:var(--ink)}h2{font-size:16px;font-weight:650;letter-spacing:-.5px;line-height:1.4}.help{font-size:11px;color:var(--sub);line-height:1.8}#library h2{margin-top:2px}#library h2:before{content:'WERKZEUGE';display:block;font-size:8px;color:#a3a9bc;letter-spacing:1.7px;margin-bottom:10px;font-weight:500}#library .help{margin-top:7px}.library-grid{gap:10px;margin-top:15px}.library-grid .tile{padding:14px 11px;height:90px;background:var(--surface);border:1px solid var(--line);color:var(--sub);font-size:10px;position:relative}.tile b{font-size:24px;color:#9a8cbd;font-weight:300;line-height:1.1;margin-bottom:13px}.tile:hover{background:#f8f5ff;border-color:#b8a5ee;box-shadow:0 5px 14px #7359b610}.tile:hover b{color:#7c5bd8}.section-label{font-size:8px!important;letter-spacing:1.4px;color:#a4aabd;margin:25px 0 13px}.wide{padding:11px 12px;font-size:11px;line-height:1.5;background:var(--surface);color:var(--ink)}.wide[data-select]{border:1px solid transparent;border-bottom-color:var(--line);border-radius:6px;margin-top:4px;color:var(--sub);font-size:10px}.wide[data-select].selected{background:#f4f0ff;border-color:#e0d6fb;color:#7657bf}.tip{background:linear-gradient(140deg,#f6f2ff,#f5f7ff);border:1px solid #eee8fa;border-radius:10px;color:#9581ae;font-size:10px}.app main{background-color:#edf0f6;background-image:radial-gradient(#c5cddd70 .7px,transparent .7px);background-size:12px 12px;height:auto;min-height:0}.toolbar{background:var(--soft);border-bottom:1px solid var(--line);height:66px;padding:0 24px;gap:14px;position:relative;font-size:11px}.toolbar>div:first-child{max-width:45%;color:var(--sub)}.toolbar b{font-weight:600;color:var(--ink)}.toolbar .dot{display:none}.toolbar .devices{margin-left:auto;border-color:var(--line);background:var(--surface);padding:3px;gap:2px;box-shadow:0 2px 4px #29335c05}.devices button{height:29px;display:grid;place-items:center;padding:5px 12px;color:#9ba1b2;background:var(--surface);border-radius:5px}.devices svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}.devices button.active{background:#ede7ff;color:#7d5fd3}.toolbar>.muted{display:none}.canvas{margin:25px auto 16px;width:calc(100% - 48px);border:1px solid #dde1ec;border-radius:12px 12px 5px 5px;box-shadow:0 15px 45px #28365a10,0 2px 4px #28365a05;transition:width .32s cubic-bezier(.22,1,.36,1),max-width .32s}.browserbar{height:35px;align-items:center;padding:8px 13px;background:#fcfcfe;border-radius:11px 11px 0 0;border-color:#edf0f5}.browserbar>span:first-child{font-size:8px;letter-spacing:3px;color:#d5d9e3}.browserbar #address{font-size:9px;background:#f2f4f9;border:1px solid #eceff5;padding:3px 30px;border-radius:5px;color:#a4aabd}.browserbar>span:last-child{font-size:11px;color:#abb2c1}iframe{border-radius:0 0 5px 5px}.inspector{border-left:1px solid var(--line)}.inspector>.badge{background:#f3effc;color:#9b80c6;font-size:8px;letter-spacing:.8px;padding:5px 8px;border:1px solid #ebe3f7;margin-bottom:18px}.inspector h2{font-size:15px}.inspector .help{font-size:10px}.inspector h3{font-size:9px;letter-spacing:1.2px;color:#9a9fb0;margin-top:28px}.inspector label{font-size:10px;color:var(--sub);margin-top:18px;margin-bottom:7px}.inspector input,.inspector textarea,.inspector select,#library input,#library select,#library textarea{border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);padding:10px;font-size:11px;box-shadow:0 1px 2px #23315802}.inspector textarea{min-height:80px;line-height:1.8}.inspector input:hover,.inspector textarea:hover{border-color:#cbc5de}.inspector input:focus,.inspector textarea:focus,#library input:focus{border-color:#a793de;box-shadow:0 0 0 3px #9674db0b;outline:0}.inspector .row button{background:var(--surface);color:var(--sub)}.inspector .danger{border-style:dashed;color:#b5808f;font-size:10px;background:transparent}.helpbox{border:1px solid var(--line);background:var(--soft);color:var(--sub);font-size:10px}footer{font-size:8px;color:#929eb3;padding:0 23px 13px;gap:10px}.stats>div{background:linear-gradient(140deg,#f8f6fd,#f1f4fb);border:1px solid #eeeaf8;border-radius:10px;padding:15px}.stats b{font-size:22px;color:var(--ink);font-weight:600;letter-spacing:-1px}.stats small{font-size:9px;color:var(--sub)}.productrow{border-bottom-color:var(--line);padding:15px 0;background:transparent;color:var(--ink);transition:background .2s}.productrow:hover{background:var(--soft);transform:none!important;box-shadow:none!important}.productthumb{width:45px;flex-basis:45px;height:48px;border:1px solid #e9e5dd;background:linear-gradient(140deg,#f4f1e9,#e1dfd4)}.productrow b{font-size:10px}.productrow small{font-size:9px;color:var(--sub)}.templatecard{border:1px solid var(--line);box-shadow:0 3px 10px #29375c04;background:var(--surface)}.templatecard:hover{box-shadow:0 10px 20px #29375c0b;transform:translateY(-3px)!important}.templateart{height:128px;border-bottom:1px solid #00000005}.templatecard>small{font-size:7px;letter-spacing:1.5px}.templatecard>b{font-size:12px;color:var(--ink)}.templatecard>p{font-size:10px;color:var(--sub)}.templatecard>span{border-top:1px solid var(--line);padding-top:12px;font-size:10px}.orderrow{background:var(--surface);border:1px solid var(--line);color:var(--ink)}.uploadzone{background:linear-gradient(130deg,#f9f6ff,#f3f5ff);border-color:#d1c4e9}.focus-toggle{border:1px solid var(--line);background:var(--surface);color:var(--sub);padding:7px 9px;height:36px;font-size:13px;display:grid;place-items:center;flex-shrink:0}.focus-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none}.canvas-note{position:absolute;bottom:45px;left:50%;transform:translateX(-50%);pointer-events:none;background:#ffffffdb;backdrop-filter:blur(8px);border:1px solid #e5e8f3;color:#9ba2b6;font-size:8px;border-radius:20px;padding:6px 12px;white-space:nowrap;display:none}main{position:relative}.focus-mode .app{grid-template-columns:minmax(0,1fr)}.focus-mode .rail,.focus-mode #library,.focus-mode #inspector{display:none}.focus-mode .canvas{max-width:1450px!important}.focus-mode .canvas-note{display:block}.focus-mode .toolbar>div:first-child{max-width:70%}#workspaceDialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 120px #10182e44}.modalhead{background:var(--soft);border-color:var(--line);padding:22px 26px}.modalbody{padding:5px 26px 26px}.modalbody input,.modalbody textarea,.modalbody select{color:var(--ink);background:var(--surface);border-color:var(--line)}.modalhead button{background:var(--surface);color:var(--sub);border:1px solid var(--line)}.modalbody p{color:var(--sub)}.modalbody h2{font-size:18px}.hubintro{display:flex;justify-content:space-between;align-items:center;margin:18px 0 20px}.hubintro p{margin:3px 0;font-size:11px}.hubgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hubcard{padding:0;border:1px solid var(--line);overflow:hidden;text-align:left;background:var(--surface);color:var(--ink)}.hubvisual{height:90px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--project-color),#1e253c);color:white;font-size:30px;position:relative}.hubvisual span{position:absolute;right:12px;top:10px;font-size:8px;color:#ffffffb0;border:1px solid #ffffff40;padding:1px 5px;border-radius:4px}.hubcard>div:last-child{padding:14px}.hubcard b{font-size:12px;display:block}.hubcard small{font-size:10px;color:var(--sub)}.command-input{width:100%;border-color:var(--line);background:var(--surface);color:var(--ink);margin:20px 0 12px;padding:14px}.command-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;border-radius:6px;padding:12px;background:transparent;color:var(--ink);text-align:left;font-size:12px}.command-row:hover{background:var(--soft)}.command-row span{font-size:9px;color:var(--sub)}.command-empty{color:var(--sub);font-size:12px;padding:20px}.library-filter{position:relative;margin:18px 0 5px}.library-filter input{padding-left:29px!important;font-size:10px!important}.library-filter svg{position:absolute;top:12px;left:10px;width:13px;height:13px;fill:none;stroke:#a3a9ba;stroke-width:1.5}.panel-enter{animation:panel-in .22s ease-out}@keyframes panel-in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}#toast{background:#242a41;box-shadow:0 8px 35px #222a4b25;border:1px solid #ffffff10;padding:13px 24px;border-radius:12px;font-size:12px;animation:panel-in .2s ease-out}body.dark{--ink:#d9dfed;--sub:#8d96ac;--line:#30384d;--surface:#232a3d;--panel:#202739;--soft:#1b2233;color-scheme:dark}body.dark .workspacebar,body.dark header{background:#1d2435}body.dark .rail{background:#141a29}body.dark main{background-color:#181f2e;background-image:radial-gradient(#44516c55 .7px,transparent .7px)}body.dark .stats>div{background:linear-gradient(145deg,#2a2d45,#242c40);border-color:#373c55}body.dark .tile:hover{background:#302c47;border-color:#756297}body.dark .wide[data-select].selected{background:#3a3053;border-color:#665282;color:#c8b5e8}body.dark .tip,body.dark .uploadzone{background:linear-gradient(140deg,#2e2b46,#282e44);border-color:#413755;color:#afa1c9}body.dark .badge,body.dark .inspector>.badge{background:#342d49;border-color:#403656;color:#b6a0d3}body.dark .version-pill{background:#30283f;border-color:#46375c;color:#b39acb}body.dark .browserbar{background:#2a3145;border-color:#343d55}body.dark .browserbar #address{background:#222a3e;border-color:#343d55;color:#8a95ad}body.dark .canvas{border-color:#384259;box-shadow:0 15px 60px #080c1633}body.dark .devices button.active{background:#45385f;color:#c4acec}body.dark .productthumb{background:linear-gradient(140deg,#4b4a47,#393f3b);border-color:#4c4f4b}body.dark .publishedlink{color:#b59cea}body.dark .templateart{filter:brightness(.85)}body.dark .templatecard>p{color:var(--sub)}body.dark .publishsummary{background:#2d2940;border-color:#463a5c}body.dark .media-grid button{background:var(--surface);color:var(--ink)}@media(min-width:1600px){.app{grid-template-columns:82px 280px minmax(400px,1fr) 290px}.app>aside{padding:27px 23px}.canvas{margin-top:32px;margin-bottom:20px}.library-grid .tile{height:96px}}@media(max-width:1200px){.app{grid-template-columns:70px 220px minmax(280px,1fr) 230px}.rail button{width:56px}.rail small{font-size:7px}.app>aside{padding:22px 15px}header .project{display:none}.toolbar{padding:0 16px}.workspacebar{padding:0 20px}.search-command{gap:12px}.connection-pill{display:none}}@media(max-width:1000px){.app{grid-template-columns:62px 205px minmax(280px,1fr)}.app #inspector{position:fixed;z-index:5;right:12px;bottom:44px;width:260px;max-height:calc(100vh - 205px);box-shadow:0 15px 60px #23305133;border:1px solid var(--line);border-radius:12px;display:none}.app #inspector.drawer-open{display:block}.rail button{width:50px}.focus-mode .app{grid-template-columns:1fr}.inspector-toggle{display:grid!important}.toolbar>div:first-child{max-width:40%}.project-hub{font-size:10px}.crumb{font-size:10px}.app main{height:auto}.app>#library{max-height:none}.workspacebar .version-pill{display:none}}@media(min-width:1001px){.inspector-toggle{display:none!important}}@media(max-width:850px){header{height:68px;align-items:center;flex-wrap:nowrap;padding:0 18px;gap:14px}.brand{height:auto;font-size:24px}.brand span{font-size:18px}.brand small{font-size:6px}.brand .logo{height:30px;width:30px}.actions{width:auto;margin-left:auto;gap:5px}.actions button{font-size:9px;padding:9px}.actions #undo,.actions #redo{padding:5px 7px}.actions #export{display:none}.workspacebar{height:44px;padding:0 16px}.search-command{gap:6px}.search-command kbd{display:none}.workspacebar .crumb em,.workspacebar .crumb>span{display:none}.app{height:calc(100vh - 112px);grid-template-columns:58px 190px minmax(240px,1fr)}.rail{grid-row:auto;padding:16px 5px}.rail button{width:48px;padding:9px 0}.rail small{font-size:7px}.toolbar{height:58px;padding:0 12px;gap:7px}.toolbar .devices{display:flex}.devices button{padding:4px 8px}.canvas{margin:18px auto 13px;width:calc(100% - 28px)}.browserbar #address{padding:3px 12px}.focus-mode .app{grid-template-columns:1fr}.app>aside{padding:20px 14px}.inspector{grid-column:auto}.toolbar>div:first-child .muted{display:none}footer>span:nth-child(2){display:none}footer{font-size:7px;padding-inline:14px}.brand small{letter-spacing:1px}}@media(max-width:620px){.brand span{font-size:16px}.brand small{display:none}.actions #publish{font-size:0;padding:9px 11px}.actions #publish:after{content:'Veröffentlichen';font-size:9px}.actions #preview{font-size:8px}.actions .separator{display:none}.app{grid-template-columns:49px 155px minmax(200px,1fr)}.rail button{width:39px}.rail small{font-size:6px}.rail button svg{width:17px}.search-command{font-size:0;padding:7px}.search-command:before{content:'⌕';font-size:15px}.crumb b{font-size:10px}.project-hub{font-size:9px}.workspacebar{gap:8px}.library-grid .tile{font-size:9px;height:80px;padding:12px 8px}.library-grid{grid-template-columns:1fr 1fr;gap:7px}.tile b{font-size:20px}.toolbar>div:first-child{max-width:31%}.toolbar .devices{gap:0}.devices button{padding:4px 6px}.focus-toggle{height:33px;width:30px;padding:5px}.browserbar #address{font-size:8px;padding:3px 6px}.browserbar>span:first-child{letter-spacing:1px;font-size:6px}.app>aside{padding:18px 10px}.hubgrid{grid-template-columns:1fr}.hubintro{display:block}.hubintro button{margin-top:12px}.app #inspector{right:8px;bottom:24px;width:250px}.focus-mode .app{grid-template-columns:1fr}.workspacebar .crumb>span{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wide.primary{background:linear-gradient(115deg,#8567f0,#6548cf);color:#fff;border:0;box-shadow:0 4px 12px #7458e82b}.wide.primary:hover{background:linear-gradient(115deg,#8e72f3,#7153df);color:#fff}.focus-toggle:hover{background:var(--soft);color:var(--ink)}body.dark button:hover:not(.primary):not(.tile):not(.templatecard):not(.hubcard):not(#publish){background:var(--soft);color:var(--ink)}body.dark .actions #export:hover{background:var(--soft)}.rail button:hover:not(.primary){background:#292e47;color:#dadfed}