:root{--plum:#2f1e28;--magenta:#dd2e96;--paper:#faf7f3}*{box-sizing:border-box}html,body{min-height:100%;margin:0}button,input,textarea,select{font:inherit}button{color:inherit}[data-tooltip]{position:relative}[data-tooltip]:before,[data-tooltip]:after{z-index:100;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;position:absolute;left:50%;transform:translate(-50%,4px)}[data-tooltip]:before{content:attr(data-tooltip);border:1px solid var(--line);width:max-content;max-width:220px;color:var(--text);background:var(--panel-solid);text-align:center;white-space:normal;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:600;line-height:1.35;top:calc(100% + 10px);box-shadow:0 10px 28px #140d122e}[data-tooltip]:after{content:"";border:5px solid #0000;border-bottom-color:var(--panel-solid);top:calc(100% + 5px)}[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus-visible:before,[data-tooltip]:focus-visible:after{opacity:1;visibility:visible;transition-delay:.38s;transform:translate(-50%)}body{color:var(--plum);background:#faf7f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.deskly-app{--bg:#f5f2f0;--panel:#ffffffdb;--panel-solid:#fffdfc;--text:#2f1e28;--muted:#776b72;--line:#2f1e281f;--accent:#dd2e96;--accent-2:#b72c8e;--canvas:#fffaf8;background:var(--bg);min-height:100vh;color:var(--text);transition:background .25s,color .25s;overflow:hidden}.deskly-app.night{--bg:#090d18;--panel:#0f1525eb;--panel-solid:#11182a;--text:#f7f4fb;--muted:#aaa7ba;--line:#c0bede29;--accent:#ff3c9e;--accent-2:#9b5cff;--canvas:#0c1120}.topbar{background:var(--panel-solid);border-bottom:1px solid var(--line);z-index:5;grid-template-columns:220px 1fr auto;align-items:center;gap:24px;height:72px;padding:0 24px;display:grid;position:relative}.brand{letter-spacing:-.04em;align-items:center;gap:12px;font-size:25px;display:flex}.brand-mark{width:36px;height:36px;display:inline-block;position:relative}.brand-mark i{background:linear-gradient(100deg,#ff3c8e,#9b5cff);border-radius:20px 5px;width:26px;height:15px;position:absolute;left:4px;transform:skew(-18deg)}.brand-mark i:first-child{top:4px}.brand-mark i:last-child{bottom:4px;transform:skew(18deg)rotate(180deg)}.main-actions{justify-self:center;gap:10px;display:flex}.template-anchor{position:relative}.template-menu{border:1px solid var(--line);background:var(--panel-solid);z-index:20;border-radius:14px;gap:7px;width:220px;padding:12px;display:grid;position:absolute;top:50px;left:50%;transform:translate(-50%);box-shadow:0 18px 42px #2f1e282e}.template-menu>strong{color:var(--muted);padding:4px 6px;font-size:12px}.template-menu button{justify-content:flex-start;align-items:center;gap:11px;min-height:42px;display:flex}.mini-layout{border:1px solid var(--line);background-color:color-mix(in srgb, var(--accent) 9%, transparent);border-radius:4px;width:30px;height:23px;display:block}.mini-layout.dashboard{background-image:linear-gradient(90deg, transparent 47%, var(--accent) 48% 52%, transparent 53%), linear-gradient(transparent 47%, var(--accent) 48% 52%, transparent 53%)}.mini-layout.columns{background-image:repeating-linear-gradient(90deg, transparent 0 7px, var(--accent) 8px 9px)}.mini-layout.focus{background-image:linear-gradient(90deg, var(--accent) 0 61%, transparent 62%), linear-gradient(transparent 0 46%, var(--accent) 47% 52%, transparent 53%);opacity:.65}.main-actions button,.theme-switch button{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:10px;min-height:42px;padding:0 16px;transition:all .16s}.main-actions button:hover,.theme-switch button:hover{border-color:color-mix(in srgb, var(--accent) 55%, transparent);transform:translateY(-1px)}.main-actions .export-button{color:#fff;background:linear-gradient(110deg, var(--accent), var(--accent-2));box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);border:0}.theme-switch{border:1px solid var(--line);border-radius:12px;padding:4px;display:flex}.theme-switch button{border:0;width:38px;min-height:34px;padding:0}.theme-switch button.active{background:var(--accent);color:#fff}.editor-shell{grid-template-columns:72px minmax(0,1fr) 354px;height:calc(100vh - 72px);display:grid}.tool-rail{background:var(--panel-solid);border-right:1px solid var(--line);flex-direction:column;align-items:center;gap:10px;padding:18px 12px;display:flex}.tool-rail button{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:10px;width:44px;height:44px;font-size:20px}.tool-rail button:hover,.tool-rail button.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 9%, transparent)}.tool-rail [data-tooltip]:before{text-align:left;top:50%;left:calc(100% + 10px);transform:translate(4px,-50%)}.tool-rail [data-tooltip]:after{border:5px solid #0000;border-right-color:var(--panel-solid);top:50%;left:calc(100% + 1px);transform:translateY(-50%)}.tool-rail [data-tooltip]:hover:before,.tool-rail [data-tooltip]:focus-visible:before{transform:translateY(-50%)}.tool-rail [data-tooltip]:hover:after,.tool-rail [data-tooltip]:focus-visible:after{transform:translateY(-50%)}.rail-spacer{flex:1}.zoom{color:var(--muted);font-size:12px}.workspace{background:radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 26%), var(--bg);flex-direction:column;min-width:0;padding:28px 34px 18px;display:flex}.workspace-heading{align-items:baseline;gap:10px;width:100%;max-width:1120px;margin:0 auto 10px;display:flex}.workspace-heading span{font-weight:700}.workspace-heading small,.canvas-help{color:var(--muted)}.canvas-wrap{flex:1;place-items:center;min-height:0;display:grid}.design-canvas{aspect-ratio:16/9;border:1px solid var(--line);background:var(--canvas);touch-action:none;width:min(100%,1120px);max-height:calc(100vh - 190px);position:relative;overflow:hidden;box-shadow:0 18px 45px #2f1e2821}.design-canvas.has-image{background-position:50%;background-size:cover}.design-canvas.preset-clean .canvas-flourish{display:none}.design-canvas.preset-gradient:not(.has-image){background:radial-gradient(circle at 84% 18%,#dd2e9624,#0000 42%),linear-gradient(140deg,#fffaf8,#fff 48%,#f9edf4)}.night .design-canvas.preset-gradient:not(.has-image){background:radial-gradient(circle at 70% 36%,#ff3c9e47,#0000 34%),linear-gradient(140deg,#09172c,#22113c 62%,#07101f)}.night .design-canvas{background:radial-gradient(at 58% 58%,#ff329b40,#0000 27%),radial-gradient(at 72% 45%,#8246ff2b,#0000 32%),linear-gradient(140deg,#0b1730,#160d29 60%,#07101f);box-shadow:0 20px 58px #00000075,0 0 0 1px #9673ff1f}.canvas-flourish{border:34px solid color-mix(in srgb, var(--accent) 12%, transparent);border-color:color-mix(in srgb, var(--accent) 12%, transparent) transparent transparent;pointer-events:none;border-radius:50%;width:62%;height:34%;position:absolute;transform:rotate(-12deg)}.canvas-flourish.one{bottom:-15%;left:-18%}.canvas-flourish.two{top:-12%;right:-25%;transform:rotate(160deg)}.night .canvas-flourish{filter:blur(10px);border-width:19px;border-color:#ff3a9d57 #0000 #0000}.design-box{border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));-webkit-user-select:none;user-select:none;cursor:move;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px;transition:box-shadow .16s,border-color .16s;position:absolute}.design-box strong{letter-spacing:.04em;font-size:clamp(11px,1.15vw,19px)}.night .design-box strong{letter-spacing:.11em}.design-box.selected{outline:2px solid var(--accent);outline-offset:-1px}.handle{border:2px solid var(--accent);background:#fff;border-radius:2px;width:11px;height:11px;position:absolute}.handle.nw{top:-6px;left:-6px}.handle.ne{top:-6px;right:-6px}.handle.sw{bottom:-6px;left:-6px}.handle.se{cursor:nwse-resize;bottom:-6px;right:-6px}.canvas-help{margin:8px auto 0;font-size:12px}.inspector{background:var(--panel-solid);border-left:1px solid var(--line);overflow-y:auto}.tabs{border-bottom:1px solid var(--line);background:var(--panel-solid);z-index:2;grid-template-columns:repeat(3,1fr);height:60px;display:grid;position:sticky;top:0}.tabs button{cursor:pointer;color:var(--muted);background:0 0;border:0;position:relative}.tabs button.active{color:var(--text);font-weight:700}.tabs button.active:after{content:"";background:linear-gradient(90deg, var(--accent), var(--accent-2));height:2px;position:absolute;bottom:0;left:20%;right:20%}.controls{flex-direction:column;gap:16px;padding:24px;display:flex}.control-title{margin:2px 0 -8px;font-size:14px}.text-input,.color-input,.upload-button{border:1px solid var(--line);background:var(--panel);width:100%;min-height:46px;color:var(--text);border-radius:10px;padding:0 12px}.color-input{align-items:center;gap:12px;display:flex}.color-input input{background:0 0;border:0;width:44px;height:30px;padding:0}.color-input span{color:var(--muted);font-size:13px}.range-control{flex-direction:column;gap:10px;font-size:14px;display:flex}.range-control>span{justify-content:space-between;align-items:center;display:flex}.range-control output{color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent)}.toggle-row{justify-content:space-between;align-items:center;font-weight:700;display:flex}.toggle-row input{opacity:0;position:absolute}.toggle-row span{background:var(--line);cursor:pointer;border-radius:30px;width:42px;height:24px;position:relative}.toggle-row span:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:all .18s;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #0000002e}.toggle-row input:checked+span{background:linear-gradient(90deg, var(--accent), var(--accent-2))}.toggle-row input:checked+span:after{transform:translate(18px)}.shadow-card{border:1px solid var(--line);border-radius:12px;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;display:grid}.shadow-card div{flex-direction:column;gap:5px;display:flex}.shadow-card small{color:var(--muted)}.shadow-card strong{font-size:12px}.segmented,.background-options{border:1px solid var(--line);border-radius:10px;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;display:grid}.segmented button,.background-options button{cursor:pointer;background:0 0;border:0;border-radius:7px;padding:8px 5px;font-size:12px}.segmented button.active,.background-options button.active{background:color-mix(in srgb, var(--accent) 13%, transparent);color:var(--accent);font-weight:700}.upload-button{cursor:pointer;background:0 0}.reset-canvas-button{color:#fff;background:linear-gradient(105deg, var(--accent), var(--accent-2));width:100%;min-height:46px;box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);cursor:pointer;border:0;border-radius:11px;font-weight:400;transition:transform .16s,box-shadow .16s}.reset-canvas-button:hover{box-shadow:0 11px 26px color-mix(in srgb, var(--accent) 29%, transparent);transform:translateY(-1px)}.reset-canvas-button:active{transform:translateY(0)}.hidden-input{display:none}.danger-button{color:#cf365a;cursor:pointer;background:#d230500f;border:1px solid #d2305040;border-radius:10px;min-height:42px;margin-top:12px}.ai-card{border:1px solid var(--line);background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel));border-radius:15px;margin-top:8px;padding:16px}.ai-title{align-items:center;gap:10px;display:flex}.ai-title>span{color:var(--accent);font-size:24px}.ai-title div{flex-direction:column;display:flex}.ai-title small{color:var(--muted)}.ai-card p{color:var(--muted);font-size:12px;line-height:1.45}.ai-card .ai-limit{color:var(--accent);margin-top:-6px;font-weight:600}.ai-card textarea{resize:vertical;border:1px solid var(--line);width:100%;min-height:76px;color:var(--text);background:var(--panel);border-radius:9px;padding:10px;font-size:12px}.ai-card button{cursor:pointer}.ai-generate,.ai-result-actions button{color:#fff;background:linear-gradient(100deg, var(--accent), var(--accent-2));border:0;border-radius:9px;width:100%;min-height:40px;margin-top:10px}.ai-generate:disabled{cursor:wait;opacity:.7}.prompt-examples{gap:6px;margin-top:7px;padding-bottom:2px;display:flex;overflow-x:auto}.prompt-examples button{border:1px solid var(--line);background:var(--panel);min-height:28px;color:var(--muted);border-radius:999px;flex:none;padding:0 8px;font-size:10px}.ai-error{margin:8px 0 -2px;font-weight:650;color:#d43861!important}.ai-result img{aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:10px;width:100%;display:block}.ai-result-actions{grid-template-columns:1fr 1.35fr;gap:8px;display:grid}.ai-result-actions .ai-secondary{color:var(--text);border:1px solid var(--line);background:0 0}.spinner{vertical-align:-2px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:14px;height:14px;margin-right:7px;animation:.8s linear infinite spin;display:inline-block}.ai-card.is-loading{position:relative;overflow:hidden}.ai-card.is-loading:after{content:"";pointer-events:none;background:linear-gradient(100deg,#0000 25%,#ffffff1f 45%,#0000 65%);animation:1.5s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{transform:translate(100%)}}.empty-state{text-align:center;padding:60px 28px}.empty-state span{color:var(--accent);font-size:30px}.empty-state h2{font-size:18px}.empty-state p{color:var(--muted);font-size:13px}.empty-state button{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:10px;padding:11px 16px}@media (max-width:1050px){.editor-shell{grid-template-columns:60px minmax(0,1fr) 310px}.workspace{padding:22px 18px 16px}.main-actions button span{display:none}.topbar{grid-template-columns:180px 1fr auto}}@media (max-width:780px){.deskly-app{overflow:auto}.topbar{grid-template-columns:1fr auto;height:64px;padding:0 14px;position:sticky;top:0}.main-actions{z-index:10;background:var(--panel-solid);border-top:1px solid var(--line);justify-content:space-around;padding:8px;position:fixed;bottom:0;left:0;right:0}.main-actions button{min-width:48px}.editor-shell{grid-template-columns:48px 1fr;height:auto;min-height:calc(100vh - 64px)}.tool-rail{padding:12px 5px}.tool-rail button{width:38px;height:38px}.workspace{min-height:52vh;padding:18px 12px}.inspector{border-left:0;border-top:1px solid var(--line);grid-column:1/-1;padding-bottom:70px}.controls{max-width:560px;margin:0 auto}}@media (hover:none){[data-tooltip]:before,[data-tooltip]:after{display:none}}