:root{color:#f6f2ea;background:#111216;font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;width:100%;height:100%;padding:18px;background:linear-gradient(135deg,rgba(28,50,84,.45),transparent 34%),linear-gradient(320deg,rgba(92,48,54,.42),transparent 38%),linear-gradient(180deg,#121317,#171a1e 52%,#111216)}.preview-pane{min-width:0;min-height:0;display:grid;grid-template-rows:42px minmax(0,1fr);gap:12px}.topbar{display:flex;align-items:center;justify-content:center}.canvas-host{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#0003;overflow:hidden}.artboard{position:relative;flex:0 0 auto;transform-origin:center;border-radius:24px;overflow:hidden;background:#111216;box-shadow:0 24px 64px #0000006b}.canvas-layer,.three-stage{position:absolute}.canvas-layer{top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.canvas-layer.foreground{z-index:3}.three-stage{z-index:2;overflow:hidden}.three-stage canvas{display:block;width:100%;height:100%}.selection-box{position:absolute;z-index:4;border:2px dashed currentColor;border-radius:8px;pointer-events:none}.sidebar{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#121418e0;box-shadow:0 18px 42px #0000005c;overflow:hidden}.brand-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-header h1{margin:0;font-size:28px;line-height:1;letter-spacing:0}.brand-header p{margin:6px 0 0;color:#f6f2ea94;font-size:12px;font-weight:700;text-transform:uppercase}.brand-header img{width:40px;height:40px;border-radius:8px}.controls{min-height:0;overflow:auto;padding:14px;scrollbar-color:rgba(255,255,255,.25) transparent}.panel-section{display:grid;gap:10px;padding:14px;margin-bottom:12px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#ffffff0b}.panel-section h2{display:flex;align-items:center;gap:8px;margin:0;color:#f6f2ead1;font-size:12px;font-weight:800;letter-spacing:0;text-transform:uppercase}.control-label{color:#f6f2ea94;font-size:11px;font-weight:800;letter-spacing:0;text-transform:uppercase}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#0003}.segmented button{min-width:0;height:30px;border:0;border-radius:6px;color:#f6f2eabd;background:transparent;font-size:12px;font-weight:800}.segmented button.active{color:#161717;background:#f7f1e6}select,textarea,input[type=text]{width:100%;min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#f6f2ea;background:#00000038}select,input[type=text]{height:36px;padding:0 10px}textarea{resize:vertical;min-height:72px;padding:9px 10px}option{color:#111216}.color-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.color-control{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px 8px;align-items:center;min-width:0}.color-control span{grid-column:1 / -1;color:#f6f2ea94;font-size:10px;font-weight:800;text-transform:uppercase}.color-control input,.gradient-stops input,.frame-colors button{width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:transparent;overflow:hidden}.color-control code{min-width:0;color:#f6f2eab8;font-size:10px;overflow:hidden;text-overflow:ellipsis}.gradient-stops,.theme-grid,.frame-colors{display:flex;flex-wrap:wrap;gap:8px}.theme-swatch{position:relative;width:30px;height:30px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:transparent;overflow:hidden}.theme-swatch span:first-child{position:absolute;top:0;right:0;bottom:0;left:0}.theme-swatch span:last-child{position:absolute;right:4px;bottom:4px;width:11px;height:11px;border:1px solid rgba(255,255,255,.3);border-radius:50%}.slider-control{display:grid;gap:6px}.slider-control span,.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}.slider-control span{color:#f6f2ea9e;font-size:11px;font-weight:700}.slider-control b{color:#f6f2eae6;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:#f7f1e6}.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;color:#f6f2eac7;font-size:12px;font-weight:700}.toggle.disabled{opacity:.45}.toggle input{width:38px;height:20px;accent-color:#f7f1e6}.secondary-button,.ghost-button,.drop-button,.primary-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;border:1px solid rgba(255,255,255,.11);border-radius:8px;color:#f6f2ea;background:#ffffff13;font-size:13px;font-weight:800}.secondary-button,.ghost-button,.drop-button,.primary-button{min-height:38px;padding:0 12px}.secondary-button,.drop-button,.primary-button{width:100%}.ghost-button{color:#f6f2eabd;background:#00000026}.drop-button{justify-content:flex-start;border-style:dashed}.drop-button span,.secondary-button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary-button{color:#111216;background:#f7f1e6}.icon-button{width:30px;height:30px;padding:0}.frame-colors button.selected{outline:2px solid #f7f1e6;outline-offset:2px}.callout-row{display:grid;gap:8px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#00000029}.callout-row strong{color:#f6f2ead9;font-size:12px}.export-bar{position:sticky;bottom:-14px;padding:12px 0 0;background:linear-gradient(180deg,transparent,rgba(18,20,24,.96) 30%)}.export-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;gap:12px;color:#f6f2ea;background:#00000085;font-weight:800}.spinner{width:38px;height:38px;border:3px solid rgba(255,255,255,.2);border-top-color:#f7f1e6;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 980px){.app-shell{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 420px}.sidebar{min-height:0}}