:root{--dw-bg-primary:#fff;--dw-bg-secondary:#f9fafb;--dw-bg-tertiary:#f8f9fa;--dw-bg-pressed:#f3f4f6;--dw-border:#e5e5e5;--dw-border-light:#e5e7eb;--dw-text-primary:#111827;--dw-text-secondary:#374151;--dw-text-tertiary:#6b7280;--dw-text-muted:#9ca3af;--dw-button-bg:#fff;--dw-button-hover:#f9fafb;--dw-button-border:#d1d5db;--dw-button-border-hover:#9ca3af;--dw-input-bg:#fff;--dw-input-border:#d1d5db;--dw-shadow-sm:0 1px 3px #0000001a;--dw-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--dw-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--dw-shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--dw-modal-backdrop:#00000080;--dw-code-bg:#f9fafb;--dw-code-text:#1f2937;--dw-scrollbar-track:#f3f4f6;--dw-scrollbar-thumb:#d1d5db;--dw-scrollbar-thumb-hover:#9ca3af;--dw-device-border-phone:#1f2937;--dw-device-border-tablet:#374151}@media (prefers-color-scheme:dark){:root{--dw-bg-primary:#1f2937;--dw-bg-secondary:#111827;--dw-bg-tertiary:#0f172a;--dw-bg-pressed:#374151;--dw-border:#374151;--dw-border-light:#4b5563;--dw-text-primary:#f9fafb;--dw-text-secondary:#e5e7eb;--dw-text-tertiary:#d1d5db;--dw-text-muted:#9ca3af;--dw-button-bg:#374151;--dw-button-hover:#4b5563;--dw-button-border:#4b5563;--dw-button-border-hover:#6b7280;--dw-input-bg:#1f2937;--dw-input-border:#4b5563;--dw-shadow-sm:0 1px 3px #00000080;--dw-shadow-md:0 4px 6px -1px #0006,0 2px 4px -1px #0000004d;--dw-shadow-lg:0 10px 15px -3px #0006,0 4px 6px -2px #0000004d;--dw-shadow-xl:0 20px 25px -5px #00000080,0 10px 10px -5px #0006;--dw-modal-backdrop:#000000b3;--dw-code-bg:#111827;--dw-code-text:#e5e7eb;--dw-scrollbar-track:#1f2937;--dw-scrollbar-thumb:#4b5563;--dw-scrollbar-thumb-hover:#6b7280;--dw-device-border-phone:#4b5563;--dw-device-border-tablet:#6b7280}}.dev-wrapper{background:var(--dw-bg-tertiary);width:100vw;height:100vh;color:var(--dw-text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;display:flex}.dev-wrapper-sidebar{background:var(--dw-bg-primary);border-right:1px solid var(--dw-border);flex-direction:column;width:320px;height:100vh;transition:width .3s;display:flex;position:relative;overflow:hidden}.dev-wrapper-sidebar.collapsed{width:48px}.dev-wrapper-sidebar-toggle{z-index:100;border:1px solid var(--dw-border);background:var(--dw-bg-secondary);width:32px;height:32px;color:var(--dw-text-secondary);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:16px;transition:all .2s;display:flex;position:absolute;top:12px;right:12px}.dev-wrapper-sidebar-toggle:hover{background:var(--dw-button-hover);border-color:var(--dw-button-border-hover);color:var(--dw-text-primary)}.dev-wrapper-sidebar.collapsed .dev-wrapper-sidebar-toggle{top:50%;right:8px;transform:translateY(-50%)}.dev-wrapper-sidebar-header{border-bottom:1px solid var(--dw-border);background:var(--dw-bg-secondary);padding:16px 20px}.dev-wrapper-sidebar-header h2{color:var(--dw-text-primary);margin:0;font-size:18px;font-weight:600}.dev-wrapper-sidebar-content{flex:1;padding:16px;overflow-y:auto}.dev-wrapper-sidebar-footer{border-top:1px solid var(--dw-border);background:var(--dw-bg-primary);gap:8px;padding:16px;display:flex}.dev-wrapper-control-label{color:var(--dw-text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:12px;font-weight:600;display:block}.dev-wrapper-subsection-label{color:var(--dw-text-muted);letter-spacing:.3px;margin-top:16px;margin-bottom:6px;font-size:11px;font-weight:500;display:block}.dev-wrapper-divider{background:var(--dw-border);height:1px;margin:20px 0}.dev-wrapper-button{border:1px solid var(--dw-button-border);background:var(--dw-button-bg);color:var(--dw-text-secondary);cursor:pointer;border-radius:6px;flex:1;padding:10px 16px;font-size:14px;font-weight:500;transition:all .15s}.dev-wrapper-button:hover{background:var(--dw-button-hover);border-color:var(--dw-button-border-hover)}.dev-wrapper-button-small{padding:8px 12px;font-size:13px}.dev-wrapper-button-primary{color:#fff;background:#3b82f6;border-color:#3b82f6}.dev-wrapper-button-primary:hover{background:#2563eb;border-color:#2563eb}.dev-wrapper-button-secondary{background:var(--dw-button-bg);color:var(--dw-text-tertiary);border-color:var(--dw-button-border)}.dev-wrapper-button-secondary:hover{background:var(--dw-button-hover);border-color:var(--dw-button-border-hover);color:var(--dw-text-secondary)}.dev-wrapper-button-active{color:#fff;background:#3b82f6;border-color:#3b82f6}.dev-wrapper-button-success{color:#fff;background:#10b981;border-color:#10b981}.dev-wrapper-button-group{gap:6px;display:flex}.dev-wrapper-select{border:1px solid var(--dw-input-border);background:var(--dw-input-bg);width:100%;color:var(--dw-text-secondary);cursor:pointer;border-radius:6px;padding:10px 12px;font-size:14px;transition:all .15s}.dev-wrapper-select:hover{border-color:var(--dw-button-border-hover)}.dev-wrapper-select:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.dev-wrapper-theme-mode-control,.dev-wrapper-preset-selector,.dev-wrapper-device-selector{margin-bottom:0}.dev-wrapper-editor-mode-link{color:#3b82f6;cursor:pointer;background:0 0;border:none;margin-bottom:12px;padding:0;font-size:13px;text-decoration:none;display:inline-block}.dev-wrapper-editor-mode-link:hover{text-decoration:underline}.dev-wrapper-tabs{background:var(--dw-bg-pressed);border-radius:8px;gap:4px;margin-bottom:16px;padding:4px;display:flex}.dev-wrapper-tab{color:var(--dw-text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;padding:8px 12px;font-size:13px;font-weight:500;transition:all .15s}.dev-wrapper-tab:hover:not(:disabled){color:var(--dw-text-secondary)}.dev-wrapper-tab:disabled{opacity:.4;cursor:not-allowed}.dev-wrapper-tab-active{background:var(--dw-bg-primary);color:#3b82f6;box-shadow:var(--dw-shadow-sm)}.dev-wrapper-token-editor{margin-bottom:0}.dev-wrapper-token-sections{flex-direction:column;gap:8px;display:flex}.dev-wrapper-token-section{border:1px solid var(--dw-border-light);border-radius:6px;overflow:hidden}.dev-wrapper-section-header{background:var(--dw-bg-secondary);width:100%;color:var(--dw-text-secondary);text-align:left;cursor:pointer;border:none;align-items:center;gap:8px;padding:12px 14px;font-size:13px;font-weight:600;transition:background .15s;display:flex}.dev-wrapper-section-header:hover{background:var(--dw-bg-pressed)}.dev-wrapper-section-header-static{background:var(--dw-bg-secondary);color:var(--dw-text-secondary);text-align:left;align-items:center;gap:8px;padding:12px 14px;font-size:13px;font-weight:600;display:flex}.dev-wrapper-section-arrow{color:var(--dw-text-muted);font-size:10px;transition:transform .2s}.dev-wrapper-section-title{flex:1}.dev-wrapper-section-count{color:var(--dw-text-muted);font-size:11px;font-weight:500}.dev-wrapper-section-content{background:var(--dw-bg-primary);flex-direction:column;gap:12px;padding:12px;display:flex}.dev-wrapper-token-row{justify-content:space-between;align-items:center;gap:16px;padding:8px 0;display:flex}.dev-wrapper-token-label{color:var(--dw-text-secondary);overflow-wrap:break-word;word-wrap:break-word;max-width:45%;font-size:13px;font-weight:500}.dev-wrapper-token-input-wrapper{border:1px solid var(--dw-input-border);background:var(--dw-input-bg);border-radius:6px;align-items:center;width:120px;transition:all .15s;display:flex;overflow:hidden}.dev-wrapper-token-input-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.dev-wrapper-input-color{border:none;border-right:1px solid var(--dw-input-border);cursor:pointer;background:var(--dw-input-bg);flex-shrink:0;width:32px;height:32px;padding:4px}.dev-wrapper-input-color::-webkit-color-swatch-wrapper{padding:0}.dev-wrapper-input-color::-webkit-color-swatch{border:none;border-radius:3px}.dev-wrapper-input-hash{color:var(--dw-text-muted);user-select:none;padding:0 2px 0 8px;font-family:ui-monospace,SF Mono,Monaco,Cascadia Code,Courier New,monospace;font-size:13px}.dev-wrapper-input-text{color:var(--dw-text-secondary);background:0 0;border:none;flex:1;min-width:0;padding:8px 10px 8px 0;font-family:ui-monospace,SF Mono,Monaco,Cascadia Code,Courier New,monospace;font-size:13px}.dev-wrapper-input-text:focus{outline:none}.dev-wrapper-input-text::placeholder{color:var(--dw-text-muted)}.dev-wrapper-input-text-standalone{border:none;width:100%;min-width:100px;padding:8px 10px}.dev-wrapper-token-input-wrapper-wide{width:160px}.dev-wrapper-labels-editor{margin-bottom:0}.dev-wrapper-input-radius{text-align:right;flex:1;padding:8px 4px 8px 10px}.dev-wrapper-input-radius::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.dev-wrapper-input-radius::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dev-wrapper-input-radius[type=number]{-moz-appearance:textfield}.dev-wrapper-input-suffix{color:var(--dw-text-muted);user-select:none;padding:0 10px 0 0;font-family:ui-monospace,SF Mono,Monaco,Cascadia Code,Courier New,monospace;font-size:13px}.dev-wrapper-token-list{flex-direction:column;display:flex}.dev-wrapper-main{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.dev-wrapper-main-toolbar{background:var(--dw-bg-primary);border-bottom:1px solid var(--dw-border);justify-content:center;align-items:center;padding:12px 20px;display:flex}.dev-wrapper-main-toolbar .dev-wrapper-device-selector{margin-bottom:0}.dev-wrapper-main-toolbar .dev-wrapper-control-label{display:none}.dev-wrapper-device-frame-container{flex:1;justify-content:center;align-items:center;min-height:0;padding:24px;display:flex;overflow:hidden;container-type:size}.dev-wrapper-device-frame{background:var(--dw-bg-primary);box-shadow:var(--dw-shadow-md);border-radius:12px;flex-direction:column;display:flex;position:relative;overflow:hidden}.dev-wrapper-device-frame>*{flex-direction:column;flex:1;min-height:0;display:flex}.dev-wrapper-device-phone{scale:min(1,tan(atan2(100cqw,418px)),tan(atan2(100cqh,872px)));border:14px solid #000;border-radius:44px;position:relative}.dev-wrapper-device-phone>*{border-radius:30px;overflow:hidden}.dev-wrapper-device-tablet{scale:min(1,tan(atan2(100cqw,784px)),tan(atan2(100cqh,1040px)));border:8px solid #000;border-radius:18px}.dev-wrapper-device-desktop{box-shadow:none;border:none;border-radius:0;width:100%;height:100%}.dev-wrapper-device-frame-container:has(.dev-wrapper-device-desktop){padding:0}.dev-wrapper-modal-overlay{background:var(--dw-modal-backdrop);backdrop-filter:blur(4px);z-index:1000;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.dev-wrapper-modal-content{background:var(--dw-bg-primary);box-shadow:var(--dw-shadow-xl);border-radius:12px;flex-direction:column;width:100%;max-width:600px;max-height:80vh;display:flex}.dev-wrapper-modal-header{border-bottom:1px solid var(--dw-border-light);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.dev-wrapper-modal-header h3{color:var(--dw-text-primary);margin:0;font-size:18px;font-weight:600}.dev-wrapper-modal-close{color:var(--dw-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:28px;line-height:1;transition:all .15s;display:flex}.dev-wrapper-modal-close:hover{background:var(--dw-bg-pressed);color:var(--dw-text-secondary)}.dev-wrapper-json-display{color:var(--dw-code-text);background:var(--dw-code-bg);flex:1;margin:0;padding:20px 24px;font-family:ui-monospace,SF Mono,Monaco,Cascadia Code,Courier New,monospace;font-size:13px;line-height:1.6;overflow:auto}.dev-wrapper-modal-footer{border-top:1px solid var(--dw-border-light);justify-content:flex-end;padding:16px 24px;display:flex}.dev-wrapper-sidebar-content::-webkit-scrollbar{width:8px}.dev-wrapper-json-display::-webkit-scrollbar{width:8px}.dev-wrapper-sidebar-content::-webkit-scrollbar-track{background:var(--dw-scrollbar-track)}.dev-wrapper-json-display::-webkit-scrollbar-track{background:var(--dw-scrollbar-track)}.dev-wrapper-sidebar-content::-webkit-scrollbar-thumb{background:var(--dw-scrollbar-thumb);border-radius:4px}.dev-wrapper-json-display::-webkit-scrollbar-thumb{background:var(--dw-scrollbar-thumb);border-radius:4px}.dev-wrapper-sidebar-content::-webkit-scrollbar-thumb:hover{background:var(--dw-scrollbar-thumb-hover)}.dev-wrapper-json-display::-webkit-scrollbar-thumb:hover{background:var(--dw-scrollbar-thumb-hover)}.dev-wrapper-styles-editor{margin-bottom:0}.dev-wrapper-styles-field{justify-content:space-between;align-items:center;gap:16px;margin-top:10px;display:flex}.dev-wrapper-styles-field-label{color:var(--dw-text-secondary);white-space:nowrap;min-width:80px;font-size:13px;font-weight:500}.dev-wrapper-styles-field .dev-wrapper-select{width:120px}.dev-wrapper-styles-field .dev-wrapper-tabs{flex:1;min-width:0}.dev-wrapper-flat-section{flex-direction:column;gap:4px;display:flex}.dev-wrapper-supported-components-control{margin-bottom:0}.dev-wrapper-checkbox-group{flex-direction:column;display:flex}.dev-wrapper-checkbox-label{color:var(--dw-text-secondary);cursor:pointer;align-items:center;gap:8px;padding:4px 0;font-size:13px;display:flex}.dev-wrapper-checkbox-label:hover{color:var(--dw-text-primary)}.dev-wrapper-checkbox{cursor:pointer;accent-color:#3b82f6;width:16px;height:16px}