.top-menu-bar{display:flex;justify-content:space-between;align-items:center;background:#2c2c2c;color:#e0e0e0;height:32px;border-bottom:1px solid #1a1a1a;font-size:13px;-webkit-user-select:none;user-select:none;position:relative;z-index:1000}.menu-left{display:flex;align-items:center;height:100%}.app-logo{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:8px;margin-right:8px;cursor:pointer;transition:background .1s}.app-logo:hover{background:#3a3a3a}.logo-svg{height:20px;width:auto;filter:brightness(0) invert(1);transition:filter .2s}.app-logo:hover .logo-svg{filter:brightness(0) invert(1) sepia(1) saturate(1) hue-rotate(200deg)}.conversation-breadcrumb{display:flex;align-items:center;margin-left:12px;padding-left:12px;border-left:1px solid #3a3a3a}.breadcrumb-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:#e0e0e0;padding:4px 12px;border-radius:4px;font-size:13px;cursor:pointer;transition:all .2s}.breadcrumb-back:hover{background:#3a3a3a;color:#4a90e2}.breadcrumb-back span{font-weight:500}.menu-items{display:flex;height:100%}.menu-container{position:relative}.menu-button{background:transparent;border:none;color:#e0e0e0;padding:0 12px;height:32px;cursor:pointer;font-size:13px;transition:background .1s}.menu-button:hover{background:#3a3a3a}.menu-button.active{background:#404040}.menu-dropdown{position:absolute;top:32px;left:0;background:#2c2c2c;border:1px solid #1a1a1a;box-shadow:0 4px 12px #00000080;min-width:200px;padding:4px 0;z-index:1001}.menu-item{display:flex;justify-content:space-between;align-items:center;padding:6px 20px;cursor:pointer;position:relative}.menu-item:hover:not(.disabled){background:#3a3a3a}.menu-item.disabled{opacity:.4;cursor:default}.menu-item-label{display:flex;align-items:center;gap:8px}.menu-item-check{width:16px;text-align:center}.menu-item-shortcut{color:#888;font-size:11px;margin-left:32px}.menu-item-arrow{color:#888;font-size:10px}.menu-separator{height:1px;background:#3a3a3a;margin:4px 0}.submenu{display:none;position:absolute;left:100%;top:-4px;background:#2c2c2c;border:1px solid #1a1a1a;box-shadow:0 4px 12px #00000080;min-width:180px;padding:4px 0}.menu-item.has-submenu:hover .submenu{display:block}.menu-right{display:flex;align-items:center;gap:12px;padding-right:12px}.quick-actions{display:flex;align-items:center;gap:8px}.quick-action-btn{display:flex;align-items:center;gap:4px;background:transparent;border:1px solid #3a3a3a;border-radius:4px;color:#e0e0e0;padding:4px 10px;font-size:12px;cursor:pointer;transition:all .2s;position:relative}.quick-action-btn:hover:not(:disabled){background:#3a3a3a;border-color:#4a4a4a}.quick-action-btn:disabled{opacity:.5;cursor:not-allowed}.quick-action-btn.locked{border-color:#444}.quick-action-btn.has-changes{border-color:#f39c12;animation:pulse-border 2s infinite}.quick-action-btn.upgrade-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;font-weight:500}.quick-action-btn.upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.quick-action-btn.upgrade-needed{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;font-weight:500;animation:gentle-glow 3s infinite}.quick-action-btn.upgrade-needed:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea80}.quick-action-btn.refresh-canvas-btn{padding:6px;min-width:auto;opacity:.6;border:1px solid transparent}.quick-action-btn.refresh-canvas-btn:hover{opacity:1;border-color:#4a4a4a;background:#3a3a3a}.quick-action-btn.refresh-canvas-btn .btn-icon{animation:none}.quick-action-btn.refresh-canvas-btn:active .btn-icon{animation:spin .5s ease-in-out}.btn-icon{font-size:14px}.btn-label{font-size:12px}.menu-status{display:flex;align-items:center;gap:16px}.unsaved-indicator{color:#f39c12;font-size:11px}.user-dropdown-container{position:relative}.user-info{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px;border-radius:4px;transition:background .2s}.user-info:hover{background:#3a3a3a}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#2c2c2c;border:1px solid #1a1a1a;box-shadow:0 4px 12px #00000080;min-width:200px;padding:4px 0;z-index:1001;border-radius:4px}.user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}.user-avatar-placeholder{width:24px;height:24px;border-radius:50%;background:#4a90e2;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.pro-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2px 6px;border-radius:10px;font-size:10px;font-weight:600;letter-spacing:.5px}.sign-in-btn{background:#4a90e2;border:none;color:#fff;padding:6px 16px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s;font-weight:500}.sign-in-btn:hover{background:#5ba0f2}.sign-in-btn-secondary{background:transparent;border:1px solid #4a4a4a;color:#e0e0e0;padding:5px 14px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.sign-in-btn-secondary:hover{background:#3a3a3a;border-color:#5a5a5a}.menu-item.highlight{color:gold;font-weight:500}.menu-item.highlight:hover{background:linear-gradient(90deg,#667eea1a,#764ba21a)}@keyframes pulse-border{0%,to{border-color:#f39c12}50%{border-color:#e67e22}}@keyframes gentle-glow{0%,to{box-shadow:0 2px 8px #667eea4d}50%{box-shadow:0 2px 12px #667eea80}}.left-toolbar{width:48px;background:#2c2c2c;border-right:1px solid #1a1a1a;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.toolbar-header{padding:8px;text-align:center;font-size:9px;color:#888;border-bottom:1px solid #1a1a1a;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.toolbar-tools{flex:1;padding:4px;display:flex;flex-direction:column;gap:2px}.toolbar-button{width:40px;height:40px;background:#363636;border:1px solid #2a2a2a;border-radius:4px;color:#e0e0e0;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:all .1s}.toolbar-button:hover{background:#404040;border-color:#4a4a4a}.toolbar-button.active{background:#4a90e2;border-color:#5a9ff2;color:#fff}.toolbar-button.toggled{background:#3a7a3a;border-color:#4a8a4a}.tool-icon{font-size:18px;line-height:1}.tool-shortcut{position:absolute;bottom:2px;right:2px;font-size:8px;background:#00000080;padding:1px 3px;border-radius:2px;color:#aaa}.toolbar-separator{height:1px;background:#3a3a3a;margin:4px 0}.toolbar-footer{padding:4px;border-top:1px solid #1a1a1a}.help-button{font-weight:700;font-size:14px}.layers-panel{background:#2c2c2c;border:1px solid #1a1a1a;display:flex;flex-direction:column;height:100%;color:#e0e0e0;font-size:12px}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px;background:#363636;border-bottom:1px solid #1a1a1a}.panel-title{font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.5px}.panel-actions{display:flex;gap:4px}.panel-action{background:transparent;border:none;color:#888;cursor:pointer;padding:2px 6px;font-size:14px;border-radius:2px;transition:all .1s}.panel-action:hover{background:#404040;color:#e0e0e0}.panel-action:disabled{opacity:.4;cursor:not-allowed}.layer-group{background:#242424;margin-bottom:2px}.group-header{background:#2a2a2a;border-left:3px solid #4a90e2}.group-expand{background:transparent;border:none;color:#888;cursor:pointer;padding:2px;font-size:10px;transition:color .1s}.group-expand:hover{color:#e0e0e0}.group-icon{font-size:16px;display:flex;align-items:center;justify-content:center;height:100%}.group-children{padding-left:20px;background:#1f1f1f}.layer-count{font-size:10px;color:#666}.layers-list.drag-over-root{background:#4a90e21a;border:2px dashed #4a90e2}.delete-group-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.delete-group-dialog{background:#2c2c2c;border:1px solid #1a1a1a;border-radius:8px;padding:24px;max-width:400px;box-shadow:0 8px 32px #00000080}.delete-group-dialog h3{margin:0 0 12px;color:#e0e0e0;font-size:16px}.delete-group-dialog p{color:#999;margin:0 0 24px;font-size:14px}.dialog-buttons{display:flex;flex-direction:column;gap:8px}.dialog-button{padding:10px 16px;background:#363636;border:1px solid #4a4a4a;border-radius:4px;color:#e0e0e0;cursor:pointer;font-size:13px;transition:all .1s}.dialog-button:hover{background:#404040;border-color:#5a5a5a}.dialog-button.danger{background:#5a2a2a;border-color:#6a3a3a;color:#f99}.dialog-button.danger:hover{background:#6a3a3a;border-color:#7a4a4a}.dialog-button.secondary{background:transparent;border-color:#3a3a3a;color:#888}.dialog-button.secondary:hover{background:#2a2a2a;color:#aaa}.layers-controls{padding:8px;border-bottom:1px solid #1a1a1a}.blend-mode{width:100%;background:#363636;border:1px solid #4a4a4a;color:#e0e0e0;padding:4px 8px;border-radius:4px;margin-bottom:8px;font-size:12px}.blend-mode:disabled{opacity:.5;cursor:not-allowed}.opacity-control label{font-size:11px;color:#888;min-width:45px}.opacity-slider{flex:1;height:4px;background:#4a4a4a;border-radius:2px;outline:none;cursor:pointer}.opacity-slider:disabled{opacity:.5;cursor:not-allowed}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:#4a90e2;border-radius:50%;cursor:pointer}.opacity-slider::-moz-range-thumb{width:12px;height:12px;background:#4a90e2;border-radius:50%;border:none;cursor:pointer}.opacity-control{display:flex;align-items:center;gap:8px}.opacity-control label{font-size:11px;color:#888}.opacity-slider{flex:1;height:4px;background:#363636;outline:none;-webkit-appearance:none}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#4a90e2;border-radius:50%;cursor:pointer}.opacity-value{font-size:11px;color:#888;min-width:35px;text-align:right}.layers-list{flex:1;overflow-y:auto;padding:4px}.empty-layers{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#666}.empty-layers .hint{font-size:11px;color:#555}.layer-item{display:flex;align-items:center;gap:8px;padding:6px;background:#363636;border:1px solid #2a2a2a;border-radius:4px;margin-bottom:2px;cursor:pointer;transition:all .1s;-webkit-user-select:none;user-select:none}.layer-item:hover{background:#404040}.layer-item.selected{background:#4a90e2;border-color:#5a9ff2}.layer-item.drag-over{border-top:2px solid #4a90e2}.layer-controls{display:flex;gap:2px}.layer-visibility,.layer-lock,.layer-zoom{width:20px;height:20px;background:transparent;border:none;color:#555;cursor:pointer;font-size:12px;border-radius:2px;display:flex;align-items:center;justify-content:center;transition:all .1s}.layer-visibility.visible,.layer-lock.locked{color:#e0e0e0}.layer-visibility:hover,.layer-lock:hover,.layer-zoom:hover{background:#4a4a4a;color:#e0e0e0}.layer-item.locked{opacity:.6;cursor:not-allowed}.layer-item.locked .layer-name{color:#888}.layer-thumbnail{width:32px;height:32px;background:#2a2a2a;border:1px solid #1a1a1a;border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center}.layer-thumbnail img{width:100%;height:100%;object-fit:cover}.empty-thumbnail{color:#555;font-weight:700}.layer-info{flex:1;display:flex;flex-direction:column;gap:2px}.layer-name{font-size:12px;font-weight:500}.layer-name-input{background:#2a2a2a;border:1px solid #4a90e2;color:#e0e0e0;padding:2px 4px;font-size:12px;border-radius:2px;outline:none}.layer-details{display:flex;gap:8px;font-size:10px;color:#888}.layer-context-menu{position:fixed;background:#2c2c2c;border:1px solid #1a1a1a;box-shadow:0 4px 12px #00000080;padding:4px 0;z-index:10000;min-width:150px}.context-menu-item{padding:6px 16px;cursor:pointer;transition:background .1s}.context-menu-item:hover{background:#3a3a3a}.context-menu-item.danger{color:#e74c3c}.context-menu-separator{height:1px;background:#3a3a3a;margin:4px 0}.properties-panel{background:#2c2c2c;color:#e0e0e0;height:100%;display:flex;flex-direction:column;font-size:12px}.no-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#666}.no-selection .hint{font-size:11px;color:#555}.properties-content{flex:1;overflow-y:auto;padding:12px}.property-section{margin-bottom:20px}.property-section h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#888;margin:0 0 12px;font-weight:600}.property-group{margin-bottom:16px}.property-group label{display:block;margin-bottom:6px;color:#aaa;font-size:11px}.position-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.input-group{display:flex;align-items:center;gap:4px}.input-label{color:#888;font-size:10px;font-weight:600;min-width:12px}.property-group input[type=number]{background:#363636;border:1px solid #1a1a1a;color:#e0e0e0;padding:4px 6px;border-radius:2px;font-size:11px;width:100%;outline:none}.property-group input[type=number]:focus{border-color:#4a90e2}.slider-group{display:flex;align-items:center;gap:8px}.property-slider{flex:1;height:4px;background:#363636;outline:none;-webkit-appearance:none;border-radius:2px}.property-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#4a90e2;border-radius:50%;cursor:pointer}.property-slider::-webkit-slider-thumb:hover{background:#5aa0f2;transform:scale(1.2)}.slider-value{width:50px}.unit{color:#888;font-size:10px}.flip-buttons{display:flex;gap:8px}.flip-button{flex:1;padding:8px;background:#363636;border:1px solid #1a1a1a;color:#888;border-radius:4px;cursor:pointer;font-size:16px;transition:all .1s}.flip-button:hover{background:#404040;color:#e0e0e0}.flip-button.active{background:#4a90e2;border-color:#5a9ff2;color:#fff}.action-buttons{display:flex;flex-direction:column;gap:8px}.action-button{padding:8px 12px;background:#363636;border:1px solid #1a1a1a;color:#e0e0e0;border-radius:4px;cursor:pointer;font-size:12px;transition:all .1s}.action-button:hover{background:#404040;border-color:#4a4a4a}.action-button.danger{color:#e74c3c;border-color:#8b2418}.action-button.danger:hover{background:#8b2418;color:#fff}.appearance-panel{background:#2c2c2c;color:#e0e0e0;height:100%;display:flex;flex-direction:column;font-size:12px}.appearance-content{flex:1;overflow-y:auto;padding:12px}.appearance-section{margin-bottom:24px}.appearance-section h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#888;margin:0 0 12px;font-weight:600}.body-type-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.body-type-option{display:flex;flex-direction:column;align-items:center;padding:12px 8px;background:#1e1e1e;border:2px solid #2a2a2a;border-radius:4px;cursor:pointer;transition:all .1s}.body-type-option:hover{background:#252525;border-color:#4a4a4a}.body-type-option.active{background:#2a2a2a;border-color:#4a90e2}.body-type-icon{font-size:24px;margin-bottom:4px}.body-type-label{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.5px}.body-type-option.active .body-type-label{color:#4a90e2}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preset-button{aspect-ratio:1;border:2px solid #2a2a2a;border-radius:4px;cursor:pointer;position:relative;overflow:hidden;transition:all .1s}.preset-button:hover{border-color:#4a4a4a;transform:scale(1.05)}.preset-button.active{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e240}.preset-button.skin-tone{min-height:40px}.preset-label{position:absolute;bottom:2px;left:2px;right:2px;background:#000000b3;color:#fff;font-size:9px;padding:2px;text-align:center;border-radius:2px}.preset-list{display:flex;flex-direction:column;gap:2px}.preset-item{display:flex;align-items:center;gap:8px;padding:8px;background:#363636;border:1px solid #2a2a2a;border-radius:4px;cursor:pointer;transition:all .1s;color:#e0e0e0}.preset-item:hover{background:#404040}.preset-item.active{background:#4a90e2;border-color:#5a9ff2;color:#fff}.preset-icon{font-size:14px}.preset-name{flex:1;text-align:left}.preset-check{font-size:12px}.background-grid{grid-template-columns:repeat(2,1fr)}.preset-button.background{min-height:60px}.toggle-options{display:flex;flex-direction:column;gap:8px}.toggle-option{display:flex;align-items:center;gap:8px;padding:8px;background:#363636;border:1px solid #2a2a2a;border-radius:4px;cursor:pointer;transition:all .1s}.toggle-option:hover{background:#404040}.toggle-option input[type=checkbox]{width:16px;height:16px;accent-color:#4a90e2}.toggle-option span{flex:1;font-size:12px}.toggle-option input:disabled+span{opacity:.5}.dock-base{display:flex;gap:4px;padding:8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 2px 8px #0000001a;z-index:100}.dock-vertical{flex-direction:column}.dock-horizontal{flex-direction:row}.dock-right{position:fixed;right:16px}.dock-left{position:fixed;left:16px}.dock-top{position:fixed;top:16px}.dock-bottom{position:fixed;bottom:16px}.dock-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;position:relative}.dock-button:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color)}.dock-button.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.dock-button:disabled{opacity:.5;cursor:not-allowed}.dock-button:disabled:hover{background:transparent;border-color:transparent;transform:none}.dock-icon{flex-shrink:0}@media (max-width: 768px){.dock-base{padding:6px}.dock-button{width:44px;height:44px;min-width:44px;min-height:44px}}@media (prefers-color-scheme: dark){.dock-base{background:var(--bg-secondary);border-color:var(--border-color);box-shadow:0 2px 8px #0000004d}}.right-panel-dock{position:fixed;right:300px;top:30px;bottom:0;width:40px;background:var(--bg-secondary, #2a2a2a);border-left:1px solid var(--border-color, #333);border-radius:8px 0 0 8px;display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px;z-index:999;transition:right .3s ease,top .3s ease}.right-panel-dock.client-mode-active{top:70px}.right-panel-dock.conversation-mode-active{top:78px}.right-panel-dock.panel-collapsed{right:0}.dock-button{width:32px;height:32px;background:transparent;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--text-secondary, #888)}.dock-button:hover{background:var(--bg-hover, #3a3a3a);color:var(--text-primary, #ffffff);transform:scale(1.05)}.dock-button:active{transform:scale(.95)}.dock-icon{font-size:14px;line-height:1}.dock-button.history-active{background:var(--accent-color, #007AFF);color:#fff}.dock-button.history-active:hover{background:var(--accent-color-hover, #0056CC)}.right-panel{width:300px;background:#2c2c2c;border-left:1px solid #1a1a1a;display:flex;flex-direction:column;position:relative;transition:width .3s}.right-panel.collapsed{width:32px}.panel-toggle{position:absolute;top:50%;left:4px;transform:translateY(-50%);background:#363636;border:1px solid #1a1a1a;color:#888;padding:8px 4px;cursor:pointer;border-radius:2px;font-size:12px}.panel-tabs{display:flex;background:#363636;border-bottom:1px solid #1a1a1a;position:relative}.panel-tab{flex:1;background:transparent;border:none;color:#888;padding:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;transition:all .1s;border-bottom:2px solid transparent}.panel-tab:hover{background:#404040;color:#e0e0e0}.panel-tab.active{color:#e0e0e0;background:#2c2c2c;border-bottom-color:#4a90e2}.tab-icon{font-size:14px}.tab-label{font-weight:500}.panel-collapse{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#888;cursor:pointer;padding:4px;font-size:12px}.panel-collapse:hover{color:#e0e0e0}.panel-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.status-bar{height:24px;background:#2c2c2c;border-top:1px solid #1a1a1a;display:flex;align-items:center;padding:0 8px;font-size:11px;color:#888;-webkit-user-select:none;user-select:none;position:relative;z-index:9999}.status-section{display:flex;align-items:center;gap:4px;padding:0 8px}.status-label{color:#666;font-weight:500}.status-value{color:#aaa}.status-workspace{text-transform:capitalize;color:#4a90e2;font-weight:600}.status-separator{width:1px;height:14px;background:#3a3a3a}.status-spacer{flex:1}.status-tips{margin-left:auto}.status-hint{color:#666;font-style:italic}.status-bar:hover .status-hint{color:#888}.storage-pill{display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s ease}.storage-cloud{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;box-shadow:0 2px 4px #4caf504d}.storage-local{background:linear-gradient(135deg,#2196f3,#1565c0);color:#fff;box-shadow:0 2px 4px #2196f34d}.storage-pill:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0003}.storage-cloud:hover{box-shadow:0 4px 8px #4caf5066}.storage-local:hover{box-shadow:0 4px 8px #2196f366}.storage-icon{font-size:10px;line-height:1}.storage-text{font-size:9px;text-transform:uppercase;letter-spacing:.5px}.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--bg-primary);border-top:1px solid var(--border-color);z-index:1000;padding:8px 0;box-shadow:0 -2px 8px #0000001a}.mobile-nav-container{display:flex;justify-content:space-around;align-items:center;padding:0 8px;position:relative}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:4px 8px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:8px;transition:all .2s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;flex:1}.mobile-nav-item:hover,.mobile-nav-item:active{background:var(--bg-secondary);color:var(--text-primary)}.mobile-nav-item.active{background:var(--accent-color);color:#fff}.mobile-nav-item.center-action{background:var(--accent-color, #007AFF);color:#fff;border-radius:50%;width:56px;height:56px;min-width:56px;min-height:56px;margin:0 16px;box-shadow:0 4px 12px #007bff4d;flex:0 0 auto;position:relative;top:-8px}.mobile-nav-item.center-action:hover,.mobile-nav-item.center-action:active{background:var(--accent-color-hover, #0056CC);transform:scale(1.05)}.center-icon{margin-bottom:0!important}.mobile-nav-icon{font-size:12px;font-weight:600;margin-bottom:2px;line-height:1}.mobile-nav-label{font-size:10px;font-weight:500;line-height:1;text-align:center}@media (max-width: 768px){.mobile-bottom-nav{padding-bottom:max(8px,env(safe-area-inset-bottom))}}@media (min-width: 769px){.mobile-bottom-nav{display:none}}.mobile-bottom-sheet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#00000080;z-index:10000;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease-out}.mobile-bottom-sheet{background:var(--bg-primary, #2c2c2c);border-radius:20px 20px 0 0;width:100vw;max-width:100vw;max-height:70vh;position:relative;left:0!important;right:0!important;top:auto!important;bottom:auto!important;margin:0;animation:slideUp .3s ease-out forwards;-webkit-animation:slideUp .3s ease-out forwards;touch-action:pan-y;transform-origin:center bottom;-webkit-transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}.bottom-sheet-handle{display:flex;justify-content:center;padding:12px 0 8px;cursor:grab}.handle-bar{width:36px;height:4px;background:var(--text-quaternary);border-radius:2px}.bottom-sheet-content{padding:0 0 16px;max-height:calc(70vh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch}.mobile-bottom-sheet .right-panel{width:100%!important;height:auto!important;position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;border:none;box-shadow:none;background:transparent;margin:0!important}.mobile-bottom-sheet .panel-tabs{justify-content:space-around;padding:0 8px}.mobile-bottom-sheet .panel-tab{flex:1;margin:0 4px;min-height:44px;font-size:14px}.mobile-bottom-sheet .panel-content{padding:0}.mobile-bottom-sheet .property-slider,.mobile-bottom-sheet input[type=range]{min-height:44px;-webkit-appearance:none;background:transparent}.mobile-bottom-sheet .property-slider::-webkit-slider-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent-color);cursor:pointer;-webkit-appearance:none;border:2px solid white;box-shadow:0 2px 4px #0003}.mobile-bottom-sheet .property-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.mobile-bottom-sheet button{min-height:44px;min-width:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mobile-bottom-sheet .flip-button,.mobile-bottom-sheet .action-button{padding:12px 16px;font-size:14px}@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@media (min-width: 769px){.mobile-bottom-sheet-overlay{display:none}}.mobile-client-layers{position:fixed;bottom:90px;left:0;right:0;background:#2c2c2cf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);z-index:1000;padding:12px}.layer-scroll{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}.layer-scroll::-webkit-scrollbar{display:none}.layer-thumbnail{flex-shrink:0;width:60px;height:60px;border-radius:8px;overflow:hidden;border:2px solid transparent;background:var(--bg-secondary);cursor:pointer;transition:all .2s ease;position:relative;touch-action:manipulation}.layer-thumbnail img{width:100%;height:100%;object-fit:contain}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);background:var(--bg-primary)}.layer-thumbnail.selected{border-color:var(--accent-color);transform:scale(1.05)}.selected-indicator{position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:2px solid var(--accent-color);border-radius:8px;pointer-events:none}.mobile-client-fab{position:fixed;bottom:20px;right:20px;width:64px;height:64px;border-radius:50%;background:var(--accent-color);border:none;box-shadow:0 4px 12px #0000004d;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1001;transition:all .3s ease;touch-action:manipulation}.mobile-client-fab:active{transform:scale(.95)}.mobile-client-fab:hover{box-shadow:0 6px 16px #0006;transform:scale(1.05)}.mobile-sheet-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:2000;display:flex;align-items:flex-end;animation:fadeIn .2s ease}.mobile-sheet{width:100%;max-height:70vh;background:#2c2c2c;border-radius:20px 20px 0 0;animation:slideUp .3s ease;overflow:hidden}.sheet-handle{display:flex;justify-content:center;padding:12px 0 8px;cursor:grab}.handle-bar{width:36px;height:4px;background:var(--text-quaternary, #666);border-radius:2px}.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.sheet-header h3{margin:0;font-size:18px;font-weight:600;color:var(--text-primary)}.sheet-close{background:none;border:none;color:var(--text-secondary);font-size:28px;cursor:pointer;padding:8px;min-width:44px;min-height:44px;touch-action:manipulation;line-height:1}.sheet-content{padding:20px;display:flex;flex-direction:column;gap:12px}.add-option{display:flex;align-items:center;gap:16px;padding:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left;min-height:72px;touch-action:manipulation}.add-option:active{transform:scale(.98)}.add-option:hover{background:#ffffff14;border-color:#fff3}.add-option.primary{background:var(--accent-color);border-color:var(--accent-color)}.add-option.primary:hover{background:var(--accent-color);opacity:.9}.option-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:12px;flex-shrink:0}.add-option.primary .option-icon{background:#fff3}.option-text{flex:1}.option-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.option-description{font-size:13px;color:var(--text-secondary)}.add-option.primary .option-description{color:#ffffffe6}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@supports (padding-bottom: env(safe-area-inset-bottom)){.mobile-client-fab{bottom:calc(20px + env(safe-area-inset-bottom))}.mobile-client-layers{bottom:calc(90px + env(safe-area-inset-bottom));padding-bottom:calc(12px + env(safe-area-inset-bottom))}.mobile-sheet{padding-bottom:env(safe-area-inset-bottom)}}.quickstart-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease}.quickstart-modal{background:var(--bg-primary, #1a1a1a);border-radius:20px;padding:32px 28px;max-width:380px;width:100%;border:1px solid var(--border-color, #333);animation:scaleIn .3s ease}.quickstart-header{text-align:center;margin-bottom:28px}.quickstart-header h2{margin:0 0 8px;font-size:24px;font-weight:700;color:#fff}.quickstart-header p{margin:0;font-size:15px;color:var(--text-secondary, #888)}.quickstart-steps{display:flex;flex-direction:column;gap:20px;margin-bottom:24px}.quickstart-step{display:flex;gap:16px;align-items:flex-start}.step-number{width:32px;height:32px;min-width:32px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}.step-content h3{margin:0 0 4px;font-size:16px;font-weight:600;color:#fff}.step-content p{margin:0;font-size:14px;color:var(--text-secondary, #888);line-height:1.4}.quickstart-tip{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#667eea1a;border-radius:10px;border:1px solid rgba(102,126,234,.2);margin-bottom:24px}.quickstart-tip svg{color:#667eea;flex-shrink:0}.quickstart-tip span{font-size:13px;color:var(--text-secondary, #aaa)}.quickstart-button{width:100%;padding:16px;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;touch-action:manipulation}.quickstart-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.quickstart-button:active{transform:scale(.98)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@supports (padding: env(safe-area-inset-bottom)){.quickstart-overlay{padding-bottom:calc(20px + env(safe-area-inset-bottom));padding-top:calc(20px + env(safe-area-inset-top))}}.proui-layout{display:flex;flex-direction:column;height:100vh;background:#1a1a1a;overflow:hidden;position:relative}.proui-layout.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000}.proui-main{flex:1;display:flex;overflow:hidden;position:relative}.proui-viewport{flex:1;background:#242424;position:relative;overflow:hidden}.cursor-select{cursor:default}.cursor-add{cursor:crosshair}.cursor-zoom{cursor:zoom-in}.cursor-eraser{cursor:not-allowed}.cursor-panning{cursor:grab}.cursor-panning:active{cursor:grabbing}.design-workspace .left-toolbar,.design-workspace .right-panel{display:none}.design-workspace .proui-viewport{max-width:100%}.review-workspace .left-toolbar,.review-workspace .right-panel,.review-workspace .top-menu-bar{display:none}.review-workspace .proui-viewport{max-width:100%}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.left-toolbar{animation:slideInLeft .3s ease-out}.right-panel{animation:slideInRight .3s ease-out}.proui-layout.mobile{height:100vh;height:100dvh}.proui-layout.mobile .proui-main{padding-bottom:72px}.proui-layout.mobile .proui-viewport{width:100%;height:100%;touch-action:pan-x pan-y}@media (max-width: 1024px){.right-panel{width:250px}}@media (max-width: 768px){.proui-layout{height:100vh;height:100dvh}.proui-main{padding-bottom:72px}.proui-viewport{width:100%;height:100%;background:#242424}.proui-viewport::-webkit-scrollbar{display:none}.proui-viewport{-ms-overflow-style:none;scrollbar-width:none}}.onboarding-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;pointer-events:none}.onboarding-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;pointer-events:all;cursor:pointer}.onboarding-backdrop-with-hole{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:all;cursor:pointer}.onboarding-highlight-border{position:fixed;border:2px solid rgba(0,122,255,.6);border-radius:8px;pointer-events:none;animation:pulse-border 2s infinite}@keyframes pulse-border{0%,to{border-color:#007aff99;box-shadow:0 0 20px #007aff4d}50%{border-color:#007affe6;box-shadow:0 0 40px #007aff80}}.onboarding-tooltip{position:fixed;background:var(--bg-primary, #1a1a1a);border:1px solid var(--border-color, #333);border-radius:12px;padding:20px;width:320px;box-shadow:0 10px 40px #00000080;pointer-events:all;animation:slideIn .3s ease;z-index:10000}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.onboarding-tooltip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.onboarding-step-indicator{font-size:12px;color:var(--text-secondary, #999);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.onboarding-tooltip-title{font-size:18px;font-weight:600;color:var(--text-primary, #ffffff);margin:0 0 8px}.onboarding-tooltip-description{font-size:14px;color:var(--text-secondary, #999);line-height:1.5;margin:0 0 20px}.onboarding-tooltip-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.onboarding-btn{padding:8px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.onboarding-btn-primary{background:var(--accent-color, #007AFF);color:#fff}.onboarding-btn-primary:hover{background:var(--accent-hover, #0066CC)}.onboarding-btn-secondary{background:var(--bg-tertiary, #333);color:var(--text-primary, #ffffff);border:1px solid var(--border-color, #333)}.onboarding-btn-secondary:hover{background:var(--bg-hover, #3a3a3a)}.onboarding-btn-text{background:transparent;color:var(--text-secondary, #999);padding:8px}.onboarding-btn-text:hover{color:var(--text-primary, #ffffff)}.onboarding-progress{display:flex;justify-content:center;gap:8px}.onboarding-progress-dot{width:8px;height:8px;border-radius:50%;background:var(--bg-tertiary, #333);transition:all .3s ease}.onboarding-progress-dot.active{background:var(--accent-color, #007AFF);transform:scale(1.2)}.onboarding-progress-dot.completed{background:var(--success-color, #34C759)}.onboarding-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}.onboarding-modal{background:var(--bg-primary, #1a1a1a);border:1px solid var(--border-color, #333);border-radius:16px;padding:32px;max-width:400px;width:90%;box-shadow:0 20px 60px #00000080;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.onboarding-modal-content{text-align:center}.onboarding-modal-content h2{font-size:24px;font-weight:600;color:var(--text-primary, #ffffff);margin:0 0 12px}.onboarding-modal-content p{font-size:15px;color:var(--text-secondary, #999);line-height:1.5;margin:0 0 24px}.onboarding-modal-actions{display:flex;gap:12px;justify-content:center}@media (max-width: 768px){.onboarding-tooltip{width:calc(100vw - 40px);max-width:320px}.onboarding-modal{padding:24px}.onboarding-btn{padding:10px 16px;font-size:15px}}.sample-design-banner{position:fixed;top:48px;left:calc(50% - 126px);transform:translate(-50%);z-index:900;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.sample-banner-content{position:relative;display:flex;align-items:center;gap:16px;padding:12px 40px 12px 20px;background:linear-gradient(135deg,#1e3a5cf2,#2d1f4ef2);border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #0000004d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.sample-banner-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:none;border-radius:6px;color:#fff9;cursor:pointer;transition:all .2s ease}.sample-banner-close:hover{background:#fff3;color:#ffffffe6}.sample-banner-text{display:flex;align-items:center;gap:12px}.sample-badge{padding:4px 10px;background:#667eea4d;border:1px solid rgba(102,126,234,.5);border-radius:6px;font-size:12px;font-weight:600;color:#a5b4fc;white-space:nowrap}.sample-message{font-size:14px;color:#ffffffe6;white-space:nowrap}.sample-banner-actions{display:flex;gap:8px}.sample-btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;border:none}.sample-btn-secondary{background:#ffffff1a;color:#ffffffe6;border:1px solid rgba(255,255,255,.2)}.sample-btn-secondary:hover{background:#fff3}.sample-btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.sample-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.sample-design-banner{top:auto;bottom:80px;left:16px;right:16px;transform:none;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.sample-banner-content{flex-direction:column;gap:12px;padding:16px}.sample-banner-text{flex-direction:column;gap:8px;text-align:center}.sample-message{white-space:normal;font-size:13px}.sample-banner-actions{width:100%;justify-content:center;flex-wrap:wrap}.sample-btn{flex:1;min-width:100px;padding:10px 12px}}@media (max-width: 380px){.sample-banner-actions{flex-direction:column}.sample-btn{width:100%}}*{box-sizing:border-box}html,body{margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#1a1a1a;color:#e0e0e0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#2c2c2c}::-webkit-scrollbar-thumb{background:#555;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#666}::selection{background:#4a90e2;color:#fff}*:focus{outline:2px solid #4a90e2;outline-offset:1px}button:focus,input:focus,select:focus{outline-offset:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cursor-crosshair{cursor:crosshair!important}.cursor-grab{cursor:grab!important}.cursor-grabbing{cursor:grabbing!important}.cursor-zoom-in{cursor:zoom-in!important}.cursor-zoom-out{cursor:zoom-out!important}.cursor-not-allowed{cursor:not-allowed!important}.spinner{width:20px;height:20px;border:2px solid #363636;border-top:2px solid #4a90e2;border-radius:50%;animation:spin 1s linear infinite}.pro-button{background:#363636;border:1px solid #2a2a2a;color:#e0e0e0;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .1s}.pro-button:hover{background:#404040;border-color:#4a4a4a}.pro-button:active{background:#2a2a2a}.pro-button.primary{background:#4a90e2;border-color:#5a9ff2}.pro-button.primary:hover{background:#5aa0f2}.pro-button.danger{background:#e74c3c;border-color:#c0392b}.pro-button.danger:hover{background:#c0392b}.pro-input{background:#363636;border:1px solid #2a2a2a;color:#e0e0e0;padding:6px 8px;border-radius:3px;font-size:12px;outline:none}.pro-input:focus{border-color:#4a90e2;box-shadow:0 0 0 1px #4a90e240}.pro-tooltip{position:absolute;background:#1a1a1a;color:#e0e0e0;padding:6px 8px;border-radius:4px;font-size:11px;box-shadow:0 4px 12px #00000080;z-index:10000;white-space:nowrap;pointer-events:none}body:has(.blog-post-wrapper) #root{overflow:auto;height:auto}.blog-post-wrapper{position:relative;min-height:100vh;background-color:#fbca01;background-image:url(/blog-bg.jpg);background-size:cover;background-position:center top;background-repeat:no-repeat}.blog-content{position:relative;max-width:800px;margin:0 auto;padding:15vh 2rem 10vh 2rem;font-size:18px;line-height:1.8;color:var(--text-primary);background:#ffffffe6;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);border-radius:4px}.blog-content h1{font-size:36px;font-weight:800;margin:48px 0 24px;line-height:1.2;color:var(--text-primary)}.blog-content h2{font-size:30px;font-weight:700;margin:40px 0 20px;line-height:1.3;color:var(--text-primary)}.blog-content h3{font-size:24px;font-weight:600;margin:32px 0 16px;line-height:1.4;color:var(--text-primary)}.blog-content h4{font-size:20px;font-weight:600;margin:24px 0 12px;line-height:1.5;color:var(--text-primary)}.blog-content>h1:first-child,.blog-content>h2:first-child,.blog-content>h3:first-child{margin-top:0}.blog-content p{margin:0 0 20px;line-height:1.8}.blog-content a{color:var(--accent-color);text-decoration:underline;transition:opacity .2s}.blog-content a:hover{opacity:.8}.blog-content ul,.blog-content ol{margin:20px 0;padding-left:32px}.blog-content li{margin:8px 0;line-height:1.8}.blog-content li>ul,.blog-content li>ol{margin:8px 0}.blog-content blockquote{margin:24px 0;padding:16px 24px;border-left:4px solid var(--accent-color);background:var(--bg-secondary);border-radius:4px;font-style:italic;color:var(--text-secondary)}.blog-content blockquote p{margin:0}.blog-content code{font-family:Monaco,Courier New,monospace;font-size:.9em;padding:2px 6px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;color:var(--accent-color)}.blog-content pre{margin:24px 0;padding:20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;overflow-x:auto;line-height:1.6}.blog-content pre code{padding:0;background:none;border:none;font-size:14px;color:var(--text-primary)}.blog-content hr{margin:48px 0;border:none;border-top:1px solid var(--border-color)}.blog-content img{max-width:100%;height:auto;border-radius:8px;margin:24px 0;display:block}.blog-content table{width:100%;margin:24px 0;border-collapse:collapse;border:1px solid var(--border-color);border-radius:8px;overflow:hidden}.blog-content th,.blog-content td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-color)}.blog-content th{background:var(--bg-secondary);font-weight:600;color:var(--text-primary)}.blog-content tr:last-child td{border-bottom:none}.blog-content tr:hover{background:var(--bg-secondary)}.blog-content strong{font-weight:700;color:var(--text-primary)}.blog-content em{font-style:italic}.blog-content input[type=checkbox]{margin-right:8px}@media (max-width: 768px){.blog-content{font-size:16px;padding:10vh 1.5rem 5vh 1.5rem;max-width:90%}.blog-content h1{font-size:28px}.blog-content h2{font-size:24px}.blog-content h3{font-size:20px}.blog-content h4{font-size:18px}.blog-content ul,.blog-content ol{padding-left:24px}}@media (min-width: 1920px){.blog-post-wrapper{background-size:contain}}.page-layout{display:flex;flex-direction:column;min-height:100vh;background:var(--bg-primary);overflow:hidden}.page-layout-content{flex:1;width:100%;margin:0 auto;padding:24px;overflow-y:auto;max-height:calc(100vh - 33px)}.page-layout-content.full-width{padding:0;max-width:none;overflow:hidden}.page-layout{--bg-primary: #1a1a1a;--bg-secondary: #2a2a2a;--border-color: #3a3a3a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--accent-color: #667eea}@media (max-width: 768px){.page-layout-content{padding:16px}}.page-layout-content{scroll-behavior:smooth}.page-layout-content::-webkit-scrollbar{width:12px}.page-layout-content::-webkit-scrollbar-track{background:var(--bg-primary)}.page-layout-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:6px}.page-layout-content::-webkit-scrollbar-thumb:hover{background:#4a4a4a}.client-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--border-color);padding-bottom:0}.client-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:-1px}.client-tab:hover{color:var(--text-primary);background:var(--bg-tertiary)}.client-tab.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.notes-section{padding:0}.notes-header{margin-bottom:16px}.notes-header h3{font-size:18px;font-weight:600;margin-bottom:8px}.notes-description{font-size:13px;color:var(--text-secondary);margin:0}.notes-display{position:relative;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:16px;min-height:200px;cursor:pointer;transition:border-color .2s ease}.notes-display:hover{border-color:var(--accent-color)}.notes-display:hover .notes-edit-btn{opacity:1}.notes-content{white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.6;color:var(--text-primary);margin:0}.notes-placeholder{color:var(--text-secondary);font-style:italic;margin:0}.notes-edit-btn{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:12px;cursor:pointer;opacity:0;transition:opacity .2s ease}.notes-editor textarea{width:100%;min-height:250px;padding:16px;background:var(--bg-tertiary);border:1px solid var(--accent-color);border-radius:8px;color:var(--text-primary);font-size:14px;line-height:1.6;resize:vertical;font-family:inherit}.notes-editor textarea:focus{outline:none;box-shadow:0 0 0 3px #667eea33}.notes-editor textarea::placeholder{color:var(--text-secondary);opacity:.7}.notes-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.appointments-section{padding:0}.appointments-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.appointments-header h3{font-size:18px;font-weight:600;margin:0}.appointment-form{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:20px;margin-bottom:24px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}.form-group input,.form-group textarea{width:100%;padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:14px}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-color)}.form-group textarea{resize:vertical;min-height:80px}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}.empty-appointments{text-align:center;padding:48px 24px;color:var(--text-secondary)}.empty-appointments svg{opacity:.3;margin-bottom:16px}.empty-appointments p{font-size:16px;font-weight:500;color:var(--text-primary);margin-bottom:8px}.empty-appointments span{font-size:14px}.appointments-list{display:flex;flex-direction:column;gap:12px}.appointments-group-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin:16px 0 8px}.appointments-group-title:first-child{margin-top:0}.appointment-card{display:flex;align-items:flex-start;gap:16px;padding:16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;transition:border-color .2s ease}.appointment-card:hover{border-color:var(--accent-color)}.appointment-card.upcoming{border-left:3px solid var(--accent-color)}.appointment-card.past{opacity:.7}.appointment-card.cancelled{opacity:.5;border-left:3px solid #ef4444}.appointment-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:56px;padding:8px 12px;background:var(--bg-secondary);border-radius:8px}.appointment-month{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--accent-color)}.appointment-day{font-size:24px;font-weight:700;color:var(--text-primary);line-height:1}.appointment-details{flex:1;min-width:0}.appointment-details h5{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 4px}.appointment-time{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);margin:0 0 8px}.appointment-notes{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.4}.appointment-actions{display:flex;gap:8px}.apt-action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.apt-action-btn:hover{background:var(--bg-tertiary)}.apt-action-btn.complete:hover{color:#22c55e;border-color:#22c55e}.apt-action-btn.undo:hover{color:var(--accent-color);border-color:var(--accent-color)}.apt-action-btn.cancel:hover,.apt-action-btn.delete:hover{color:#ef4444;border-color:#ef4444}.status-badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;border-radius:10px;margin-left:8px}.status-badge.completed{background:#22c55e1a;color:#22c55e}.status-badge.cancelled{background:#ef44441a;color:#ef4444}@media (max-width: 768px){.client-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.client-tab{padding:10px 16px;font-size:13px;white-space:nowrap}.form-row{grid-template-columns:1fr}.appointment-card{flex-direction:column;gap:12px}.appointment-date{flex-direction:row;gap:8px;width:100%;justify-content:flex-start;padding:8px 16px}.appointment-day{font-size:18px}.appointment-actions{width:100%;justify-content:flex-end}}.artist-banner{width:100%;height:200px;margin-bottom:-40px;border-radius:12px;overflow:hidden;position:relative}.artist-banner img{width:100%;height:100%;object-fit:cover}.artist-banner:after{content:"";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,var(--bg-primary) 0%,transparent 100%)}.artist-header-with-banner{position:relative;z-index:1}.artist-profile-picture{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:600;color:#fff;flex-shrink:0;border:4px solid var(--bg-primary);box-shadow:0 4px 12px #00000026}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px}.portfolio-item{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--bg-tertiary);transition:transform .2s ease,box-shadow .2s ease}.portfolio-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0003}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-image{width:100%;height:100%;object-fit:cover}.portfolio-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;opacity:0;transition:opacity .2s ease}.portfolio-overlay h4{color:#fff;font-size:14px;font-weight:600;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portfolio-style{color:#ffffffb3;font-size:12px;text-transform:capitalize}.tattoo-viewer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tattoo-viewer-modal{background:var(--bg-secondary);border-radius:16px;max-width:900px;max-height:90vh;width:100%;overflow:hidden;position:relative;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tattoo-viewer-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:#00000080;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:background .2s ease}.tattoo-viewer-close:hover{background:#000000b3}.tattoo-viewer-content{display:flex;flex-direction:column;overflow:hidden}.tattoo-viewer-image{width:100%;max-height:60vh;object-fit:contain;background:#000}.tattoo-viewer-info{padding:24px;overflow-y:auto}.tattoo-viewer-info h2{font-size:24px;font-weight:600;margin:0 0 12px;color:var(--text-primary)}.tattoo-description{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0 0 20px}.tattoo-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.tattoo-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:20px;font-size:13px;color:var(--text-secondary);text-transform:capitalize}.tattoo-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.tattoo-tag-item{padding:4px 10px;background:#667eea1a;border:1px solid rgba(102,126,234,.3);border-radius:12px;font-size:12px;color:#667eea}.tattoo-placement{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px}.placement-label{color:var(--text-secondary);font-weight:500}.placement-areas{color:var(--text-primary);text-transform:capitalize}.tattoo-stats{display:flex;gap:20px;padding-top:16px;border-top:1px solid var(--border-color)}.tattoo-stats span{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}.tabs .tab-button{display:flex;align-items:center;gap:8px}@media (max-width: 768px){.artist-banner{height:150px;margin-bottom:-30px;border-radius:0;margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)}.artist-profile-picture{width:80px;height:80px;font-size:28px;border-width:3px}.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.portfolio-overlay{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 40%)}.portfolio-overlay h4{font-size:12px}.tattoo-viewer-overlay{padding:0}.tattoo-viewer-modal{border-radius:0;max-height:100vh;height:100vh}.tattoo-viewer-content{height:100%}.tattoo-viewer-image{max-height:50vh}.tattoo-viewer-info{padding:16px}.tattoo-viewer-info h2{font-size:20px}.tattoo-meta{gap:8px}.tattoo-tag{padding:4px 10px;font-size:12px}}.conversations-two-pane{display:flex;height:calc(100vh - 33px);max-width:1200px;margin:0 auto;gap:0;overflow:hidden}.conversations-sidebar{width:400px;min-width:400px;max-width:400px;flex-shrink:0;border-right:1px solid var(--border-color);background:var(--bg-primary);overflow-y:auto;overflow-x:hidden;padding:20px;box-sizing:border-box}.conversations-sidebar>*{max-width:100%;box-sizing:border-box}.conversations-sidebar .card-grid{width:100%;box-sizing:border-box;grid-template-columns:1fr!important;gap:12px}.conversations-sidebar .card{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.conversations-sidebar .card>div{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.conversations-sidebar .page-header,.conversations-sidebar .search-bar,.conversations-sidebar .tabs{width:100%;max-width:100%;box-sizing:border-box}.conversation-detail-pane{flex:1;min-width:0;background:var(--bg-secondary);overflow:hidden;display:flex;flex-direction:column}.conversation-detail-pane>div{height:100%;flex:1;overflow:hidden}.conversations-sidebar .card.selected{background:var(--bg-tertiary)!important;border-color:var(--accent-color)!important}@media (max-width: 1200px){.conversations-sidebar{width:350px;min-width:350px;max-width:350px}}@media (max-width: 992px){.conversations-sidebar{width:300px;min-width:300px;max-width:300px}}@media (max-width: 768px){.conversations-two-pane{flex-direction:column}.conversations-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-color)}.conversation-detail-pane{flex:1}}.conversation-detail-page{height:100%;display:flex;flex-direction:column}.conversation-detail-page .page-content{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0;margin-top:24px}.conversation-detail-page .page-content>div{height:100%;flex:1;border-radius:12px;border:1px solid var(--border-color);overflow:hidden}.designs-sections{display:flex;flex-direction:column;gap:32px}.designs-section{background:var(--bg-secondary);border-radius:12px;padding:20px;border:1px solid var(--border-color)}.section-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.section-header h2{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.section-count{background:var(--accent-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.section-description{font-size:13px;color:var(--text-secondary);margin:0 0 16px}.design-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.design-card{background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color);overflow:hidden;cursor:pointer;transition:all .2s ease}.design-card:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.design-card-thumbnail{width:100%;height:120px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden}.design-card-thumbnail img{width:100%;height:100%;object-fit:cover}.design-card-info{padding:10px 12px}.design-card-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-card-date{font-size:11px;color:var(--text-secondary);margin-top:2px}.design-groups{display:flex;flex-direction:column;gap:12px}.design-group{background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color);overflow:hidden}.design-group-header{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;transition:background .15s ease}.design-group-header:hover{background:var(--bg-tertiary)}.design-group-toggle{color:var(--text-secondary);display:flex;align-items:center}.design-group-name{font-weight:500;color:var(--text-primary);flex:1}.design-group-count{font-size:12px;color:var(--text-secondary)}.design-group-link{background:none;border:none;color:var(--accent-color);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .15s ease}.design-group-link:hover{background:rgba(var(--accent-color-rgb),.1);text-decoration:underline}.design-group-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:0 16px 16px}.design-group-collapsed-preview{display:flex;gap:12px;padding:0 16px 16px;overflow-x:auto}.design-group-collapsed-preview .design-card{flex:0 0 160px}.design-group-more{flex:0 0 80px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border-radius:8px;color:var(--accent-color);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease}.design-group-more:hover{background:var(--bg-secondary)}.search-clear{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease}.search-clear:hover{background:var(--bg-tertiary);color:var(--text-primary)}@media (max-width: 768px){.design-cards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.design-card-thumbnail{height:100px}.design-group-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.section-header h2{font-size:16px}.design-group-link{display:none}}.design-detail-page{max-width:900px;margin:0 auto}.back-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.back-button:hover{background:var(--bg-tertiary);transform:translate(-2px)}.back-button:active{transform:translate(-1px)}.page{width:100%;margin:0;padding:0;color:var(--text-primary)}.page-header{margin-bottom:32px}.page-header h1{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 8px}.page-subtitle{font-size:16px;color:var(--text-secondary);margin:0}.back-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#ffffff0d;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:16px}.back-button:hover{background:#ffffff1a;color:var(--text-primary);border-color:#667eea80}.page-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:24px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px}.stat-label{font-size:14px;color:var(--text-secondary);font-weight:500}.stat-value{font-size:32px;font-weight:700;color:var(--text-primary)}.stat-sublabel{font-size:12px;color:var(--text-secondary)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:20px;transition:all .2s ease;cursor:pointer}.card:hover{border-color:#667eea80;box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.tabs{display:flex;gap:8px;border-bottom:2px solid var(--border-color);margin-bottom:24px}.tab-button{padding:12px 20px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:-2px}.tab-button:hover{color:var(--text-primary)}.tab-button.active{color:#667eea;font-weight:600;border-bottom-color:#667eea}.empty-state{text-align:center;padding:60px 20px}.empty-state-icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-state-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.empty-state-description{font-size:14px;color:var(--text-secondary);margin-bottom:24px;line-height:1.6}.action-buttons{display:flex;gap:12px;align-items:center;margin:0}.btn{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;display:inline-flex;align-items:center;gap:8px}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.btn-secondary{background:#ffffff0d;border:1px solid var(--border-color);color:var(--text-primary)}.btn-secondary:hover{background:#ffffff1a;border-color:#667eea80}.btn-danger{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444}.btn-danger:hover{background:#ef444433;border-color:#ef444480}.search-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;margin-bottom:20px}.search-bar input{flex:1;background:none;border:none;color:var(--text-primary);font-size:14px;outline:none}.search-bar input::placeholder{color:var(--text-secondary)}@media (max-width: 768px){.page-header h1{font-size:24px}.page-subtitle{font-size:14px}.page-content{padding:16px}.stats-grid,.card-grid{grid-template-columns:1fr}.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-button{white-space:nowrap}}.account-tabs{display:flex;gap:4px;padding:8px;background:var(--bg-secondary);border-radius:12px;margin-bottom:24px;overflow-x:auto}.account-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;background:transparent;border:none;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;white-space:nowrap}.account-tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.account-tab.active{background:var(--accent-color);color:#fff}.account-message{padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px;font-weight:500}.account-message.success{background:#10b9811a;border:1px solid rgba(16,185,129,.3);color:#10b981}.account-message.error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444}.account-section{max-width:600px}.account-section-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.account-section-description{font-size:14px;color:var(--text-secondary);margin-bottom:24px;line-height:1.5}.account-field{margin-bottom:20px}.account-label{display:block;font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:8px}.account-input{width:100%;padding:12px 16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;font-size:14px;color:var(--text-primary);transition:border-color .2s ease}.account-input:focus{outline:none;border-color:var(--accent-color)}.account-input.disabled{opacity:.6;cursor:not-allowed}.account-input::placeholder{color:var(--text-tertiary)}.account-textarea{width:100%;padding:12px 16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;font-size:14px;color:var(--text-primary);resize:vertical;min-height:80px;font-family:inherit}.account-textarea:focus{outline:none;border-color:var(--accent-color)}.account-field-hint{font-size:12px;color:var(--text-secondary);margin-top:4px}.account-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.avatar-section{display:flex;align-items:center;gap:16px}.avatar-preview{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;color:#fff;border:3px solid var(--border-color);flex-shrink:0}.social-field{display:flex;align-items:center;gap:12px}.social-label{min-width:80px;font-size:14px;color:var(--text-secondary)}.social-field .account-input{flex:1}.account-actions{display:flex;gap:12px;margin-top:24px}.artist-profile-info{margin-top:32px;padding:20px;background:#667eea0d;border:1px solid rgba(102,126,234,.2);border-radius:12px}.artist-profile-info h3{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.artist-info-grid{display:grid;gap:12px}.artist-info-item{display:flex;flex-direction:column;gap:4px}.artist-info-label{font-size:12px;color:var(--text-secondary)}.artist-info-value{font-size:14px;color:var(--text-primary)}.subscription-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:24px}.subscription-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.subscription-header h3{font-size:16px;font-weight:600;color:var(--text-primary);margin:0}.subscription-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff}.subscription-description{font-size:14px;color:var(--text-secondary);margin-bottom:16px}.subscription-stats{padding-top:16px;border-top:1px solid var(--border-color)}.stat{display:flex;justify-content:space-between;align-items:center}.stat-label{font-size:14px;color:var(--text-secondary)}.stat-value{font-size:14px;font-weight:600;color:var(--text-primary)}.lifetime-notice{margin-top:16px;padding:16px;background:#10b9811a;border:1px solid rgba(16,185,129,.3);border-radius:8px;font-size:14px;color:#10b981;font-weight:500}.preferences-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:20px}.preference-item{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px 0;border-bottom:1px solid var(--border-color)}.preference-item:last-of-type{border-bottom:none}.preference-item input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex-shrink:0}.preference-content{flex:1}.preference-title{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:4px}.preference-description{font-size:12px;color:var(--text-secondary);line-height:1.4}.preference-notice{margin-top:16px;padding:12px;background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:8px;font-size:12px;color:#f59e0b;line-height:1.4}.security-actions{display:flex;gap:12px;margin-bottom:24px}.delete-section{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:20px}.delete-warning{font-size:14px;color:#ef4444;margin-bottom:16px;font-weight:500}.lifetime-warning{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:8px;padding:12px;margin-bottom:16px;font-size:13px;color:#f59e0b;font-weight:500}.quick-links{display:flex;flex-wrap:wrap;gap:12px}.quick-links .btn{display:flex;align-items:center;gap:8px}.btn-danger{background:#ef4444;color:#fff;border:none}.btn-danger:hover{background:#dc2626}.btn-danger-outline{background:transparent;color:#ef4444;border:1px solid #ef4444}.btn-danger-outline:hover{background:#ef44441a}@media (max-width: 768px){.account-tabs{padding:6px}.account-tab{padding:10px 14px;font-size:13px}.account-field-row{grid-template-columns:1fr}.social-field{flex-direction:column;align-items:stretch;gap:6px}.social-label{min-width:auto}.avatar-section{flex-direction:column;align-items:flex-start}.subscription-header{flex-direction:column;align-items:flex-start;gap:8px}.security-actions,.quick-links{flex-direction:column}.quick-links .btn{width:100%;justify-content:flex-start}}.help-page{padding:24px;max-width:900px;margin:0 auto}.help-header{text-align:center;margin-bottom:32px}.help-header h1{font-size:32px;font-weight:700;color:var(--text-primary, #fff);margin:0 0 8px}.help-header p{font-size:16px;color:var(--text-secondary, #888);margin:0}.help-quick-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}.help-action-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 32px;background:var(--bg-tertiary, #333);border:1px solid var(--border-color, #444);border-radius:12px;color:var(--text-primary, #fff);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none;min-width:140px}.help-action-btn:hover{background:var(--bg-secondary, #2a2a2a);border-color:var(--accent-color, #4a90e2);transform:translateY(-2px)}.help-action-btn.primary{background:var(--accent-color, #4a90e2);border-color:var(--accent-color, #4a90e2)}.help-action-btn.primary:hover{background:var(--accent-hover, #3a80d2);border-color:var(--accent-hover, #3a80d2)}.help-notice{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:var(--bg-tertiary, #333);border-radius:8px;color:var(--text-secondary, #888);font-size:14px;margin-bottom:40px}.faq-container{margin-bottom:48px}.faq-container h2{font-size:24px;font-weight:600;color:var(--text-primary, #fff);margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--border-color, #444)}.faq-category{margin-bottom:32px}.faq-category-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:var(--accent-color, #4a90e2);margin:0 0 16px}.faq-list{display:flex;flex-direction:column;gap:8px}.faq-item{background:var(--bg-tertiary, #333);border:1px solid var(--border-color, #444);border-radius:8px;overflow:hidden;transition:border-color .2s}.faq-item:hover{border-color:var(--border-hover, #555)}.faq-item.open{border-color:var(--accent-color, #4a90e2)}.faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px;background:transparent;border:none;color:var(--text-primary, #fff);font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:background .2s}.faq-question:hover{background:var(--bg-secondary, #2a2a2a)}.faq-question span{flex:1;padding-right:16px}.faq-answer{padding:0 16px 16px;color:var(--text-secondary, #aaa);font-size:14px;line-height:1.6}.help-footer{text-align:center;padding:32px;background:var(--bg-tertiary, #333);border:1px solid var(--border-color, #444);border-radius:12px}.help-footer h3{font-size:20px;font-weight:600;color:var(--text-primary, #fff);margin:0 0 8px}.help-footer p{font-size:14px;color:var(--text-secondary, #888);margin:0 0 20px}.help-footer-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.help-contact-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--accent-color, #4a90e2);border:none;border-radius:8px;color:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none}.help-contact-btn:hover{background:var(--accent-hover, #3a80d2);transform:translateY(-1px)}.help-contact-btn.secondary{background:var(--bg-secondary, #2a2a2a);border:1px solid var(--border-color, #444)}.help-contact-btn.secondary:hover{background:var(--bg-tertiary, #333);border-color:var(--accent-color, #4a90e2)}@media (max-width: 640px){.help-page{padding:16px}.help-header h1{font-size:24px}.help-quick-actions{flex-direction:column}.help-action-btn{flex-direction:row;justify-content:center;padding:16px 24px}.faq-question{font-size:14px;padding:14px}.faq-answer{font-size:13px;padding:0 14px 14px}}.cookie-consent-banner{position:fixed;bottom:0;left:0;right:0;background:var(--bg-primary, #1a1a1a);border-top:1px solid var(--border-color, #333);padding:16px 24px;z-index:10000;box-shadow:0 -4px 20px #0000004d;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.cookie-consent-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.cookie-consent-text{flex:1}.cookie-consent-text h4{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--text-primary, #ffffff)}.cookie-consent-text p{margin:0;font-size:14px;line-height:1.5;color:var(--text-secondary, #888)}.cookie-consent-text a{color:#667eea;text-decoration:none}.cookie-consent-text a:hover{text-decoration:underline}.cookie-consent-actions{display:flex;gap:12px;flex-shrink:0}.cookie-btn{padding:10px 24px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.cookie-btn-reject{background:#ffffff1a;color:var(--text-primary, #ffffff);border:1px solid var(--border-color, #333)}.cookie-btn-reject:hover{background:#ffffff26;border-color:#667eea80}.cookie-btn-accept{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.cookie-btn-accept:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.cookie-consent-banner{padding:16px}.cookie-consent-content{flex-direction:column;align-items:stretch;gap:16px}.cookie-consent-text h4{font-size:15px}.cookie-consent-text p{font-size:13px}.cookie-consent-actions{justify-content:stretch}.cookie-btn{flex:1;padding:12px 16px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;font-feature-settings:"cv02","cv03","cv04","cv11"}#root{width:100vw;height:100vh;overflow:hidden}