.sb-main{min-height:calc(100vh - 120px);background:var(--neutral-50)}.sb-container{max-width:1400px;padding:0}.sb-layout{display:grid;grid-template-columns:380px 1fr;gap:0;min-height:calc(100vh - 120px)}.sb-sidebar{display:flex;flex-direction:column;padding:1rem 1.25rem;background:var(--background);border-right:1px solid var(--border-color);overflow-y:auto;max-height:calc(100vh - 60px);position:sticky;top:60px}.sb-preview-panel{display:flex;flex-direction:column;padding:1rem 1.25rem;background:var(--neutral-50);position:sticky;top:60px;height:calc(100vh - 60px)}.sb-header{padding-bottom:.75rem;border-bottom:1px solid var(--border-color);margin-bottom:.75rem}.sb-breadcrumb{display:flex;align-items:center;gap:.375rem;font-size:11px;color:var(--neutral-400);margin-bottom:.5rem}.sb-breadcrumb a{color:var(--neutral-500);text-decoration:none;transition:color .15s}.sb-breadcrumb a:hover{color:var(--brand-600)}.sb-breadcrumb-sep{color:var(--neutral-300);font-size:13px}.sb-title{font-size:1.2rem;font-weight:var(--font-bold);color:var(--neutral-900);margin:0}.sb-subtitle{font-size:var(--text-xs);color:var(--neutral-500);margin:.25rem 0 0}.sb-privacy-badge{display:flex;align-items:center;gap:.35rem;color:var(--success);font-size:var(--text-xs);font-weight:var(--font-semibold);margin-top:.5rem}.sb-privacy-badge svg{flex-shrink:0}.sb-privacy-info{font-size:11px;opacity:.6;cursor:help;margin-left:.125rem}.sb-privacy-badge:hover .sb-privacy-info{opacity:1}.sb-section-label{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--neutral-600);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}.sb-section-value{font-weight:var(--font-normal);color:var(--neutral-500);text-transform:none;letter-spacing:normal}.sb-dropzone{text-align:center;padding:var(--space-6) var(--space-3);border:2px dashed var(--border-color);border-radius:var(--radius-lg);background:var(--neutral-50);transition:border-color var(--duration-fast),background var(--duration-fast);cursor:pointer;margin-bottom:.75rem}.sb-dropzone.sb-dropzone-active,.sb-dropzone:hover{border-color:var(--primary);background:var(--brand-50)}.sb-dropzone-icon{color:var(--neutral-400);margin-bottom:var(--space-3)}.sb-dropzone-active .sb-dropzone-icon{color:var(--primary)}.sb-dropzone-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--foreground);margin:0 0 var(--space-2)}.sb-dropzone-subtitle{font-size:var(--text-xs);color:var(--muted-foreground);margin:0 0 var(--space-3)}.sb-dropzone-subtitle kbd{display:inline-block;padding:2px 5px;font-family:var(--font-mono);font-size:10px;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--border-color);color:#525252}.sb-dropzone-btn{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:var(--font-medium);padding:.5rem 1rem}.sb-dropzone-formats{font-size:10px;color:var(--neutral-400);margin:var(--space-3) 0 0;text-transform:uppercase;letter-spacing:.05em}.sb-settings{flex:1}.sb-settings-section{margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--neutral-100)}.sb-settings-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.sb-bg-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:.375rem;margin-bottom:.5rem}.sb-bg-swatch{aspect-ratio:1;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:border-color .15s,transform .15s;position:relative;overflow:hidden}.sb-bg-swatch:hover{transform:scale(1.05)}.sb-bg-swatch.sb-bg-swatch-active{border-color:var(--brand-500)}.sb-bg-swatch::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.sb-bg-custom{display:flex;flex-wrap:wrap;gap:.375rem}.sb-bg-custom .btn{font-size:10px;padding:.25rem .5rem}.sb-border-controls{display:flex;flex-direction:column;gap:.5rem}.sb-border-color-btn{padding:.25rem;border:2px solid transparent;border-radius:6px}.sb-border-color-btn.sb-border-color-active{border-color:var(--brand-500)}.sb-border-preview{display:block;width:24px;height:24px;border-radius:4px}.sb-border-preview-light{background:var(--background);border:2px solid var(--neutral-300)}.sb-border-preview-dark{background:var(--neutral-800);border:2px solid var(--neutral-600)}.sb-collapsible{margin-top:.5rem;padding:.5rem;background:var(--neutral-50);border-radius:6px}.sb-frame-variant{margin-bottom:.5rem}#sb-browser-url-group{margin-top:.5rem}#sb-browser-url-group .sb-control-label{font-size:10px;margin-bottom:.25rem}.sb-custom-size-inputs{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.sb-custom-size-inputs input{width:80px}.sb-size-x{color:var(--neutral-500)}.sb-toolbar .btn.disabled,.sb-toolbar .btn:disabled{border:none}.sb-annotations-group{margin:0 -1.25rem;padding:.75rem 1.25rem;border-radius:0}.sb-annotation-colors{display:flex;gap:.5rem;margin-top:.5rem;justify-content:center}.sb-color-btn{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s}.sb-color-btn:hover{transform:scale(1.1)}.sb-color-btn.sb-color-active{border-color:var(--neutral-800);box-shadow:0 0 0 2px var(--background)}.sb-color-red{background:#dc2626}.sb-color-blue{background:#2563eb}.sb-color-green{background:#16a34a}.sb-color-black{background:#1e293b}.sb-color-picker-wrapper{display:flex;flex-direction:column;align-items:center;gap:.25rem}.sb-color-picker-wrapper input[type=color]{-webkit-appearance:none;appearance:none;width:28px;height:28px;padding:0;border:2px solid var(--border-color);border-radius:50%;cursor:pointer;background:0 0}.sb-color-picker-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.sb-color-picker-wrapper input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}.sb-color-picker-wrapper input[type=color]::-moz-color-swatch{border:none;border-radius:50%}.sb-color-picker-wrapper input[type=color]:hover{border-color:var(--neutral-400)}.sb-color-picker-label{font-size:10px;color:var(--neutral-500)}.sb-reset-group{border-bottom:none!important}.sb-reset-group .btn{display:flex;align-items:center;justify-content:center;gap:.375rem}.sb-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 0;margin-top:auto;border-top:1px solid var(--border-color)}.sb-actions .btn{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--text-xs);font-weight:var(--font-medium);padding:.5rem .875rem}.sb-actions .btn svg{flex-shrink:0}.sb-preview-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--background);border:1px solid var(--border-color);border-bottom:none;border-radius:10px 10px 0 0}.sb-preview-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--neutral-600);text-transform:uppercase;letter-spacing:.04em}.sb-preview-info{display:flex;align-items:center;gap:.75rem;font-size:var(--text-xs);color:var(--neutral-500)}.sb-toolbar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--background);border:1px solid var(--border-color);border-bottom:none}.sb-toolbar-group{display:flex;align-items:center;gap:.25rem}.sb-toolbar-divider{width:1px;height:20px;background:var(--border-color);margin:0 .25rem}.sb-toolbar .btn{display:inline-flex;align-items:center;gap:.25rem;font-size:11px;padding:.25rem .5rem}.sb-toolbar .btn:disabled{opacity:.5;cursor:not-allowed}.sb-canvas-container{flex:1;border:1px solid var(--border-color);border-radius:0 0 10px 10px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--background);min-height:0;display:flex;align-items:center;justify-content:center;position:relative}.sb-toolbar+.sb-canvas-container{border-top:none}.sb-canvas-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(45deg,var(--neutral-200) 25%,transparent 25%),linear-gradient(-45deg,var(--neutral-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--neutral-200) 75%),linear-gradient(-45deg,transparent 75%,var(--neutral-200) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;overflow:auto;padding:1rem}.sb-preview-canvas{max-width:100%;max-height:100%;display:block;border-radius:4px}.sb-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.9);z-index:10}.sb-loading-spinner{width:32px;height:32px;border:3px solid var(--neutral-200);border-top-color:var(--brand-500);border-radius:50%;animation:.8s linear infinite sb-spin}@keyframes sb-spin{to{transform:rotate(360deg)}}.sb-loading-text{margin-top:.75rem;font-size:var(--text-sm);color:var(--neutral-600)}.sb-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:380px;color:var(--muted-foreground);text-align:center;padding:1.5rem}.sb-empty-icon{color:var(--neutral-300);margin-bottom:.75rem}.sb-empty-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--neutral-600);margin:0 0 .25rem}.sb-empty-message{font-size:var(--text-xs);color:var(--muted-foreground);margin:0}.sb-wifi-test{position:fixed;bottom:0;left:0;right:0;padding:.75rem 1rem;background:var(--success-600,#16a34a);color:#fff;font-size:var(--text-sm);text-align:center;z-index:1000;animation:.3s sb-slide-up}.sb-wifi-test .container{display:flex;align-items:center;justify-content:center;gap:.5rem}.sb-wifi-icon{font-size:1.25rem}@keyframes sb-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}.sb-gradient-picker{padding:.5rem}.sb-gradient-preview{width:100%;height:80px;border-radius:8px;margin-bottom:1rem;border:1px solid var(--border-color)}.sb-gradient-controls{display:flex;flex-direction:column;gap:.75rem}.sb-gradient-controls .form-label{font-size:var(--text-sm);font-weight:var(--font-medium);margin-bottom:.25rem}.sb-gradient-controls .form-control-color{width:100%;height:40px}.sb-annotation-mode{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);padding:.5rem 1rem;background:var(--neutral-800);color:var(--background);border-radius:100px;font-size:var(--text-sm);font-weight:var(--font-medium);box-shadow:var(--shadow-lg);z-index:1000;display:none}.sb-annotation-mode.sb-annotation-mode-active{display:block}.sb-preview-canvas.sb-cursor-crosshair{cursor:crosshair}.sb-preview-canvas.sb-cursor-move{cursor:move}.sb-preview-canvas.sb-cursor-grab{cursor:grab}.sb-preview-canvas.sb-cursor-grabbing{cursor:grabbing}@media (max-width:1024px){.sb-layout{grid-template-columns:340px 1fr}}@media (max-width:767px){.sb-main{min-height:auto}.sb-container{padding:0}.sb-layout{display:flex;flex-direction:column;min-height:auto}.sb-sidebar{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--border-color);padding:1rem}.sb-preview-panel{position:static;height:auto;min-height:400px;padding:1rem}.sb-actions{justify-content:center}.sb-actions .btn{flex:1;min-width:80px;justify-content:center}.sb-bg-swatches{grid-template-columns:repeat(4,1fr)}.sb-toolbar{flex-wrap:wrap}}@media (max-width:480px){.sb-dropzone{padding:1rem .75rem}.sb-dropzone-title{font-size:var(--text-xs)}}@media (pointer:coarse){.sb-actions .btn{min-height:var(--tap-target);padding:.625rem 1rem}.sb-bg-swatch{min-width:var(--tap-target);min-height:var(--tap-target)}.sb-color-btn{width:var(--tap-target);height:var(--tap-target)}}@media (prefers-reduced-motion:reduce){.sb-loading-spinner,.sb-wifi-test{animation:none}*,::after,::before{transition-duration:0s!important;animation-duration:0s!important}}@media print{.sb-main{padding:0}.sb-actions,.sb-sidebar,.sb-toolbar,.sb-wifi-test{display:none}.sb-layout{display:block}.sb-canvas-container{background:#fff;border:none}}