.qb-main{min-height:calc(100vh - 120px);background:var(--neutral-50)}.qb-container{max-width:1400px;padding:0}.qb-layout{display:grid;grid-template-columns:380px 1fr;gap:0;min-height:calc(100vh - 120px)}.qb-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}.qb-header{padding-bottom:.75rem;border-bottom:1px solid var(--border-color);margin-bottom:.75rem}.qb-breadcrumb{display:flex;align-items:center;gap:.375rem;font-size:11px;color:var(--neutral-400);margin-bottom:.5rem}.qb-breadcrumb a{color:var(--neutral-500);text-decoration:none;transition:color .15s}.qb-breadcrumb a:hover{color:var(--brand-600)}.qb-breadcrumb-sep{color:var(--neutral-300);font-size:13px}.qb-title{font-size:1.2rem;font-weight:var(--font-bold);color:var(--neutral-900);margin:0}.qb-subtitle{font-size:var(--text-xs);color:var(--neutral-500);margin:.25rem 0 0}.qb-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}.qb-privacy-badge svg{flex-shrink:0}.qb-privacy-info{font-size:11px;opacity:.6;cursor:help;margin-left:.125rem}.qb-privacy-badge:hover .qb-privacy-info{opacity:1}.qb-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}.qb-dropzone.qb-dropzone-active,.qb-dropzone:hover{border-color:var(--primary);background:var(--brand-50)}.qb-dropzone-icon{color:var(--neutral-400);margin-bottom:var(--space-3)}.qb-dropzone-active .qb-dropzone-icon{color:var(--primary)}.qb-dropzone-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--foreground);margin:0 0 var(--space-2)}.qb-dropzone-subtitle{font-size:var(--text-xs);color:var(--muted-foreground);margin:0 0 var(--space-3)}.qb-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}.qb-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}.qb-dropzone-formats{font-size:10px;color:var(--neutral-400);margin:var(--space-3) 0 0;text-transform:uppercase;letter-spacing:.05em}.qb-settings{display:flex;flex-direction:column;gap:0;margin-bottom:.75rem;flex:1;min-height:0}.qb-settings-section{margin-bottom:.75rem}.qb-section-label{font-size:11px;font-weight:var(--font-semibold);color:var(--neutral-600);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}.qb-color-options{display:flex;gap:var(--space-2)}.qb-color-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:2px solid var(--border-color);border-radius:var(--radius-md);background:var(--background);cursor:pointer;transition:border-color var(--duration-fast);font-size:var(--text-xs)}.qb-color-btn:hover{border-color:var(--neutral-400)}.qb-color-btn.is-active{border-color:var(--primary)}.qb-color-swatch{display:block;width:16px;height:16px;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.qb-swatch-black{background:#1e293b}.qb-swatch-white{background:#fff}.qb-color-picker-wrapper{display:flex;flex-direction:column;align-items:center;gap:.25rem}.qb-color-picker-wrapper input[type=color]{-webkit-appearance:none;appearance:none;width:32px;height:32px;padding:0;border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;background:0 0}.qb-color-picker-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.qb-color-picker-wrapper input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius-md) - 4px)}.qb-color-picker-wrapper input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius-md) - 4px)}.qb-color-picker-wrapper input[type=color]:hover{border-color:var(--neutral-400)}.qb-color-picker-wrapper input[type=color].is-active{border-color:var(--primary)}.qb-color-picker-label{font-size:10px;color:var(--neutral-500)}.qb-shortcuts-list{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-3);margin:0;font-size:var(--text-xs)}.qb-shortcuts-list dt{font-weight:var(--font-normal)}.qb-shortcuts-list dt kbd{display:inline-block;padding:2px 5px;font-family:var(--font-mono);font-size:10px;background:var(--neutral-100);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--border-color);color:#525252}.qb-shortcuts-list dd{color:var(--muted-foreground);margin:0}.qb-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 0;border-top:1px solid var(--border-color)}.qb-actions .btn{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--text-xs);font-weight:var(--font-medium);padding:.5rem .875rem}.qb-actions .btn svg{flex-shrink:0}.qb-preview-panel{display:flex;flex-direction:column;padding:1rem 1.25rem;background:var(--neutral-50);position:sticky;top:60px;height:calc(100vh - 60px)}.qb-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}.qb-preview-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--neutral-600);text-transform:uppercase;letter-spacing:.04em}.qb-preview-info{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);color:var(--neutral-500)}.qb-preview-info span:empty{display:none}.qb-toolbar{display:flex;align-items:center;gap:var(--space-2);padding:.5rem .75rem;background:var(--background);border:1px solid var(--border-color);border-top:none;border-bottom:none}.qb-toolbar-group{display:flex;align-items:center;gap:var(--space-2)}.qb-toolbar-divider{width:1px;height:20px;background:var(--border-color);margin:0 var(--space-2)}.qb-toolbar .btn{display:inline-flex;align-items:center;gap:.25rem;font-size:11px;padding:.375rem .625rem}.qb-toolbar .btn.disabled,.qb-toolbar .btn:disabled{border:none}.qb-toolbar .btn svg{flex-shrink:0}.qb-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}.qb-toolbar+.qb-canvas-container{border-top:none}.qb-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}.qb-empty-icon{color:var(--neutral-300);margin-bottom:.75rem}.qb-empty-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--neutral-600);margin:0 0 .25rem}.qb-empty-message{font-size:var(--text-xs);color:var(--muted-foreground);margin:0}.qb-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:rgba(255,255,255,.85);backdrop-filter:blur(2px)}.qb-loading-spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:.7s linear infinite qb-spin}.qb-loading-text{font-size:var(--text-xs);color:var(--neutral-500);margin:0}@keyframes qb-spin{to{transform:rotate(360deg)}}.qb-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}.qb-canvas{max-width:100%;max-height:100%;display:block}.qb-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.qb-overlay.qb-overlay-active{pointer-events:auto}.qb-canvas.qb-cursor-crosshair,.qb-overlay.qb-cursor-crosshair{cursor:crosshair}.qb-canvas.qb-cursor-move,.qb-overlay.qb-cursor-move{cursor:move}.qb-canvas.qb-cursor-grab,.qb-overlay.qb-cursor-grab{cursor:grab}.qb-canvas.qb-cursor-grabbing,.qb-overlay.qb-cursor-grabbing{cursor:grabbing}@media (max-width:1024px){.qb-layout{grid-template-columns:340px 1fr}}@media (max-width:767px){.qb-main{min-height:auto}.qb-container{padding:0}.qb-layout{display:flex;flex-direction:column;min-height:auto}.qb-sidebar{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--border-color);padding:1rem}.qb-preview-panel{position:static;height:60vh;min-height:400px;padding:1rem}.qb-settings{flex:none;max-height:none}.qb-actions{justify-content:center}.qb-actions .btn{flex:1;min-width:100px;justify-content:center}.qb-toolbar{flex-wrap:wrap}.qb-toolbar-divider{display:none}}@media (max-width:480px){.qb-preview-panel{height:50vh;min-height:320px}.qb-dropzone{padding:var(--space-4) var(--space-2)}.qb-dropzone-title{font-size:var(--text-sm)}}@media (pointer:coarse){.qb-color-btn{min-height:var(--tap-target)}.qb-actions .btn{min-height:var(--tap-target);padding:.625rem 1rem}.ds-segment{min-height:var(--tap-target)}}@media (prefers-reduced-motion:reduce){.qb-color-btn,.qb-dropzone{transition:none}.qb-loading-spinner{animation-duration:1.5s}}@media print{.qb-main{padding:0}.ds-footer,.qb-sidebar,.qb-toolbar{display:none}.qb-layout{display:block}.qb-preview-panel{position:static;height:auto;padding:0}.qb-canvas-container{border:none;box-shadow:none;background:#fff}.qb-canvas-wrapper{background:#fff}}