.pot-designer{--pot-bg:#f6f7fb;--pot-surface:#fff;--pot-surface-2:#f1f2f6;--pot-accent:#d25208;--pot-accent-hover:#b84607;--pot-accent-gradient:linear-gradient(135deg, #d25208 0%, #f07b24 100%);--pot-text:#242424;--pot-text-secondary:#666;--pot-text-muted:#888;--pot-border:#e6e6e6;--pot-border-focus:#d2520840;--pot-shadow:0 8px 32px #24242414;--pot-fs-xs:.75rem;--pot-fs-sm:.875rem;--pot-fs-lg:1.125rem;--pot-fs-2xl:1.5rem;color:var(--pot-text)}.pot-layout{background-color:var(--pot-bg);border:1px solid var(--pot-border);width:100%;height:calc(100vh - 150px);min-height:600px;box-shadow:var(--pot-shadow);border-radius:12px;display:flex;overflow:hidden}.pot-sidebar{background:var(--pot-surface);border-right:1px solid var(--pot-border);z-index:10;flex-direction:column;width:380px;min-width:380px;height:100%;display:flex}.pot-sidebar-header{border-bottom:1px solid var(--pot-border);padding:24px}.pot-sidebar-header h2{font-size:var(--pot-fs-2xl);background:var(--pot-accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-weight:700}.pot-subtitle{font-size:var(--pot-fs-xs);color:var(--pot-text-secondary);margin:4px 0 0}.pot-section-group{border-bottom:1px solid var(--pot-border);padding:20px 24px}.pot-section-group.pot-flex-fill{flex:1;overflow-y:auto}.pot-section-title{font-size:var(--pot-fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--pot-text-muted);margin-bottom:12px;font-weight:600;display:block}.pot-select{background:var(--pot-surface-2);border:1px solid var(--pot-border);width:100%;color:var(--pot-text);font-family:inherit;font-size:var(--pot-fs-sm);cursor:pointer;border-radius:8px;outline:none;padding:12px 16px;font-weight:500;transition:all .2s}.pot-select:focus{border-color:var(--pot-accent);box-shadow:0 0 0 2px var(--pot-border-focus)}.pot-parameters-list{flex-direction:column;gap:20px;display:flex}.pot-parameter-control{flex-direction:column;gap:6px;display:flex}.pot-parameter-info{justify-content:space-between;align-items:center;display:flex}.pot-parameter-label{font-size:var(--pot-fs-sm);color:var(--pot-text);font-weight:600}.pot-parameter-unit{font-size:var(--pot-fs-xs);color:var(--pot-text-muted)}.pot-parameter-description{font-size:var(--pot-fs-xs);color:var(--pot-text-secondary);margin:0;line-height:1.4}.pot-parameter-input-group{align-items:center;gap:12px;margin-top:4px;display:flex}.pot-slider{appearance:none;cursor:pointer;background:#e2e4ea;border-radius:3px;outline:none;flex:1;height:6px}.pot-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--pot-accent);border-radius:50%;width:16px;height:16px;transition:transform .1s}.pot-slider::-webkit-slider-thumb:hover{background:var(--pot-accent-hover);transform:scale(1.2)}.pot-slider::-moz-range-thumb{background:var(--pot-accent);border:none;border-radius:50%;width:16px;height:16px}.pot-number-input{background:var(--pot-surface-2);border:1px solid var(--pot-border);width:65px;color:var(--pot-text);font-family:inherit;font-size:var(--pot-fs-xs);text-align:center;appearance:textfield;border-radius:6px;outline:none;padding:6px 8px;font-weight:600}.pot-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pot-number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pot-sidebar-footer{border-top:1px solid var(--pot-border);background:var(--pot-bg);padding:24px}.pot-status-container{margin-bottom:16px}.pot-status-badge{font-size:var(--pot-fs-xs);border-radius:20px;align-items:center;gap:8px;padding:6px 12px;font-weight:600;display:inline-flex}.pot-status-ready{color:#1d7a34;background:#28a7461a;border:1px solid #28a74640}.pot-status-success{color:var(--pot-accent);background:#d2520814;border:1px solid #d2520833}.pot-status-loading{color:#b45309;background:#f59e0b1f;border:1px solid #f59e0b4d}.pot-spinner{border:2px solid;border-bottom-color:#0000;border-radius:50%;width:12px;height:12px;animation:1s linear infinite pot-rotation;display:inline-block}@keyframes pot-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pot-actions-group{gap:8px;display:flex}.pot-btn{font-family:inherit;font-size:var(--pot-fs-sm);cursor:pointer;border:none;border-radius:8px;outline:none;justify-content:center;align-items:center;padding:12px 18px;font-weight:600;transition:all .2s;display:inline-flex}.pot-btn-primary{background:var(--pot-accent-gradient);color:#fff;flex:1;box-shadow:0 4px 12px #d252084d}.pot-btn-primary:hover{opacity:.95;transform:translateY(-1px)}.pot-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.pot-btn-secondary{background:var(--pot-surface-2);border:1px solid var(--pot-border);color:var(--pot-text)}.pot-btn-secondary:hover:not(:disabled){border-color:var(--pot-text-muted);background:#e9ebf0}.pot-btn-secondary:disabled{opacity:.4;cursor:not-allowed}.pot-btn-icon{background:var(--pot-surface-2);border:1px solid var(--pot-border);width:44px;height:44px;color:var(--pot-text-secondary);padding:0}.pot-btn-icon:hover{color:var(--pot-text);border-color:var(--pot-text-muted)}.pot-btn-icon.active{color:var(--pot-accent);background:#d2520814;border-color:#d252084d}.pot-viewer{flex:1;min-width:0;height:100%;position:relative}.pot-canvas-wrapper{width:100%;height:100%}.pot-viewer-fallback{width:100%;height:100%;color:var(--pot-text-secondary);background-color:#eef0f4;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.pot-viewer-fallback p{margin:0}.pot-loading-spinner{border:3px solid var(--pot-border);border-bottom-color:var(--pot-accent);border-radius:50%;width:32px;height:32px;animation:1s linear infinite pot-rotation}.pot-viewer-overlay{pointer-events:none;border:1px solid var(--pot-border);-webkit-backdrop-filter:blur(8px);background:#ffffffd1;border-radius:12px;max-width:450px;padding:16px 20px;position:absolute;top:24px;left:24px;box-shadow:0 4px 20px #24242414}.pot-viewer-overlay h1{font-size:var(--pot-fs-lg);color:var(--pot-text);margin:0 0 4px;font-weight:700}.pot-viewer-overlay p{font-size:var(--pot-fs-xs);color:var(--pot-text-secondary);margin:0;line-height:1.4}.pot-tabs{background:var(--pot-surface-2);border:1px solid var(--pot-border);border-radius:8px;margin-bottom:20px;padding:3px;display:flex}.pot-tab{color:var(--pot-text-secondary);font-family:inherit;font-size:var(--pot-fs-sm);cursor:pointer;background:0 0;border:none;border-radius:6px;outline:none;flex:1;padding:8px 16px;font-weight:600;transition:all .2s}.pot-tab:hover{color:var(--pot-text)}.pot-tab.active{background:var(--pot-accent-gradient);color:#fff;box-shadow:0 2px 8px #d2520833}.pot-advanced-grid{grid-template-columns:1fr;gap:12px;display:grid}.pot-advanced-row{background:var(--pot-bg);border:1px solid var(--pot-border);border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;transition:all .2s;display:flex}.pot-advanced-row:hover{background:#d2520808;border-color:#d252084d}.pot-advanced-info{flex-direction:column;flex:1;gap:2px;padding-right:12px;display:flex}.pot-advanced-title{align-items:center;gap:4px;display:flex}.pot-advanced-label{font-size:var(--pot-fs-sm);color:var(--pot-text);font-weight:500}.pot-advanced-unit{font-size:var(--pot-fs-xs);color:var(--pot-text-muted)}.pot-advanced-desc{font-size:var(--pot-fs-xs);color:var(--pot-text-secondary);margin:0;line-height:1.3}.pot-advanced-input-wrapper{align-items:center;display:flex}.pot-advanced-number-input{background:var(--pot-surface-2);border:1px solid var(--pot-border);width:80px;color:var(--pot-text);font-family:inherit;font-size:var(--pot-fs-sm);text-align:center;border-radius:6px;outline:none;padding:8px 10px;font-weight:600;transition:all .2s}.pot-advanced-number-input:focus{border-color:var(--pot-accent);box-shadow:0 0 0 2px var(--pot-border-focus)}.pot-no-advanced{text-align:center;color:var(--pot-text-muted);font-size:var(--pot-fs-sm);padding:20px 0}@media (max-width:900px){.pot-layout{flex-direction:column-reverse;height:auto}.pot-sidebar{border-right:none;border-top:1px solid var(--pot-border);width:100%;min-width:0;height:auto;min-height:400px}.pot-viewer{height:55vh;min-height:360px}}