:root{--purple-primary: #667eea;--purple-secondary: #764ba2;--purple-dark: #5568d3;--blue-primary: #3b82f6;--blue-secondary: #2563eb;--blue-dark: #1d4ed8;--purple-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--purple-gradient-hover: linear-gradient(135deg, #1f2233 0%, #1a2a47 50%, #0f3c6e 100%);--dark-blue-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--light-blue-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--green-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--pink-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--teal-gradient: linear-gradient(135deg, #30cfd0 0%, #330867 100%);--purple-pink-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--text-gradient: linear-gradient(135deg, #fff 0%, #a8c0ff 100%);--red-error: #ff4444;--red-error-light: #ff6b6b;--red-error-bg: #ffe0e0;--red-error-bg-light: #fef2f2;--red-error-border: #fecaca;--red-error-dark: #ff0000;--red-error-text: #cc0000;--red-error-text-dark: #991b1b;--red-dark: #c33;--green-success: #10b981;--yellow-warning: #ffc107;--yellow-warning-bg: #fff3cd;--yellow-warning-text: #856404;--yellow-warning-border: #fde68a;--yellow-warning-light: #fef3c7;--yellow-warning-text-dark: #78350f;--yellow-warning-text-darker: #92400e;--yellow-warning-dark: #664d03;--bg-white: #ffffff;--bg-canvas: #f5f5f5;--bg-light: #f9fafb;--bg-lighter: #f3f4f6;--bg-lightest: #f8f9fa;--bg-input: #f9f9f9;--bg-hover: #f0f0f0;--border-light: #e5e7eb;--border-medium: #d1d5db;--border-dark: #9ca3af;--border-input: #e0e0e0;--border-focus: #0f3460;--text-primary: #1f2937;--text-primary-dark: #1a1a1a;--text-secondary: #374151;--text-tertiary: #6b7280;--text-light: #9ca3af;--text-body: #333;--text-muted: #555;--text-disabled: #666;--text-link: #0f3460;--text-link-hover: #16213e;--overlay-dark: rgba(0, 0, 0, .6);--overlay-medium: rgba(0, 0, 0, .5);--overlay-light: rgba(0, 0, 0, .75);--overlay-black: rgba(0, 0, 0, 0);--white-95: rgba(255, 255, 255, .95);--white-98: rgba(255, 255, 255, .98);--white-80: rgba(255, 255, 255, .8);--white-20: rgba(255, 255, 255, .2);--white-10: rgba(255, 255, 255, .1);--black-10: rgba(0, 0, 0, .1);--black-20: rgba(0, 0, 0, .2);--black-30: rgba(0, 0, 0, .3);--black-03: rgba(0, 0, 0, .03);--black-05: rgba(0, 0, 0, .05);--purple-shape-gradient: linear-gradient(135deg, #667eea22 0%, #764ba222 100%);--blue-shape-gradient: linear-gradient(135deg, #4facfe22 0%, #00f2fe22 100%);--green-shape-gradient: linear-gradient(135deg, #43e97b22 0%, #38f9d722 100%);--pink-shape-gradient: linear-gradient(135deg, #fa709a22 0%, #fee14022 100%);--teal-shape-gradient: linear-gradient(135deg, #30cfd022 0%, #33086722 100%);--purple-pink-shape-gradient: linear-gradient(135deg, #f093fb22 0%, #f5576c22 100%);--blue-accent: #4facfe;--green-accent: #43e97b;--pink-accent: #fa709a;--teal-accent: #30cfd0;--purple-pink-accent: #f093fb;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem;--spacing-2xl: 2rem;--spacing-3xl: 2.5rem;--shadow-light: 0 2px 8px rgba(0, 0, 0, .15);--shadow-medium: 0 4px 20px rgba(0, 0, 0, .15);--shadow-heavy: 0 20px 60px rgba(0, 0, 0, .3);--shadow-card: 0 4px 12px rgba(0, 0, 0, .15);--shadow-small: 0 2px 4px rgba(0, 0, 0, .05);--shadow-hover: 0 4px 8px rgba(0, 0, 0, .1);--shadow-large: 0 10px 40px rgba(0, 0, 0, .2);--shadow-button: 0 8px 25px rgba(15, 52, 96, .5);--shadow-purple: 0 4px 12px rgba(102, 126, 234, .3);--shadow-purple-hover: 0 6px 20px rgba(102, 126, 234, .5);--shadow-purple-strong: 0 4px 12px rgba(102, 126, 234, .4);--shadow-red: 0 4px 12px rgba(255, 68, 68, .4);--shadow-red-hover: 0 4px 20px rgba(255, 68, 68, .4);--shadow-blue: 0 4px 16px rgba(79, 172, 254, .4);--shadow-toast: 0 10px 30px rgba(0, 0, 0, .3);--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, .15);--shadow-modal: 0 20px 60px rgba(0, 0, 0, .3);--focus-purple: 0 0 0 3px rgba(102, 126, 234, .1);--focus-blue: 0 0 0 3px rgba(59, 130, 246, .1);--focus-dark-blue: 0 0 0 3px rgba(15, 52, 96, .1);--radius-xs: 3px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-pill: 24px;--radius-circle: 50%;--transition-fast: all .15s ease;--transition-normal: all .2s ease;--transition-slow: all .3s ease;--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-transform: transform .2s ease;--transition-background: background .2s ease;--transition-border: border-color .3s;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 1.75rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-5xl: 3rem;--text-6xl: 3.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--z-toolbar: 10;--z-dropdown: 100;--z-user-list: 900;--z-modal: 2000;--z-reconnect: 9998;--z-network: 9999;--z-loading: 10000;--z-reaction: 10000;--z-canvas-selection: 10000;--z-copy-toast: 10001}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--purple-gradient)}#root{width:100%;min-height:100vh;background:transparent}.user-list-container{position:absolute;right:20px;min-width:200px;background:var(--white-98);border-radius:var(--radius-lg);box-shadow:var(--shadow-medium);overflow:hidden;z-index:var(--z-user-list);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn .2s ease;transition:var(--transition-smooth)}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-list-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:transparent;border:none;cursor:pointer;transition:var(--transition-background);font-family:inherit}.user-list-header:hover{background:var(--black-03)}.user-list-title{display:flex;align-items:center;gap:var(--spacing-sm)}.online-indicator{width:8px;height:8px;background:var(--green-success);border-radius:var(--radius-circle);animation:pulse 2s ease-in-out infinite}.user-count{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-secondary)}.collapse-arrow{transition:var(--transition-transform);color:var(--text-tertiary)}.collapse-arrow.collapsed{transform:rotate(-90deg)}.user-list-content{max-height:300px;overflow-y:auto;border-top:1px solid var(--black-05)}.user-list-content::-webkit-scrollbar{width:6px}.user-list-content::-webkit-scrollbar-track{background:transparent}.user-list-content::-webkit-scrollbar-thumb{background:var(--black-20);border-radius:var(--radius-xs)}.user-list-content::-webkit-scrollbar-thumb:hover{background:var(--black-30)}.user-list-item{display:flex;align-items:center;gap:10px;padding:10px 16px;transition:var(--transition-fast)}.user-list-item:hover{background:var(--black-03)}.user-list-item.current-user{background:#667eea14}.user-list-item.current-user:hover{background:#667eea1f}.user-color-dot{width:10px;height:10px;border-radius:var(--radius-circle);border:2px solid var(--bg-white);box-shadow:0 1px 3px var(--black-20);flex-shrink:0}.user-list-name{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--font-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.you-label{font-weight:var(--font-normal);color:var(--purple-primary);font-size:var(--text-xs)}.user-list-content:empty{display:none}@media (max-width: 768px){.user-list-header.collapsed .user-count-text{display:none}.user-list-container{min-width:auto}.user-list-header{padding:12px}.user-list-title{gap:8px}.user-count{display:flex;align-items:center}.user-count-number{margin-right:4px}}.reaction-menu{position:fixed;display:flex;gap:var(--spacing-sm);background:var(--white-95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:var(--spacing-sm);box-shadow:0 4px 6px var(--black-10),0 2px 4px #0000000f;z-index:var(--z-reaction);transform:translate(-50%,-100%) translateY(-10px);animation:reaction-menu-appear .15s ease-out;pointer-events:all}@keyframes reaction-menu-appear{0%{opacity:0;transform:translate(-50%,-100%) translateY(-5px) scale(.9)}to{opacity:1;transform:translate(-50%,-100%) translateY(-10px) scale(1)}}.reaction-menu-button{background:#fff;border:2px solid var(--black-10);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-xl);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;min-width:50px;min-height:50px}.reaction-menu-button:hover{background:var(--bg-hover);border-color:var(--black-20);transform:scale(1.1)}.reaction-menu-button:active{transform:scale(.95)}.upgrade-banner{position:fixed;top:0;left:0;right:0;background:var(--purple-gradient);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-light);z-index:var(--z-dropdown);animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.upgrade-banner-content{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-medium)}.upgrade-banner-icon{font-size:18px}.upgrade-banner-text{line-height:1.4}.upgrade-banner-button{background:#fff;color:var(--purple-primary);border:none;padding:var(--spacing-sm) 20px;border-radius:var(--radius-sm);font-weight:var(--font-semibold);font-size:var(--text-sm);cursor:pointer;transition:var(--transition-normal);white-space:nowrap}.upgrade-banner-button:hover{background:var(--bg-hover);transform:translateY(-1px);box-shadow:var(--shadow-light)}.upgrade-banner-button:active{transform:translateY(0)}@media (max-width: 768px){.upgrade-banner{flex-direction:column;gap:12px;padding:16px;text-align:center}.upgrade-banner-content{flex-direction:column;text-align:center}.upgrade-banner-button{width:100%}}.ai-sidebar{position:fixed;bottom:20px;left:16px;background:#fff;border-radius:var(--radius-lg);box-shadow:0 8px 32px #00000026;z-index:13337;transition:var(--transition-smooth);max-width:400px;width:calc(100vw - 120px);max-height:800px;display:flex;flex-direction:column}.ai-sidebar.collapsed{max-width:180px;max-height:50px}.ai-sidebar-toggle{display:flex;align-items:center;gap:var(--spacing-sm);padding:12px 16px;background:var(--purple-gradient);color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-semibold);transition:var(--transition-normal);white-space:nowrap}.ai-sidebar-toggle:hover{transform:translateY(-2px);box-shadow:var(--shadow-purple-strong)}.ai-sidebar-toggle:active{transform:translateY(0)}.ai-icon{font-size:20px}.ai-label{font-size:var(--text-sm)}.ai-sidebar-content{display:flex;flex-direction:column;padding:16px;gap:12px;flex:1;overflow:hidden}.ai-sidebar-header{display:flex;justify-content:right;align-items:center;padding-bottom:12px;border-bottom:2px solid var(--bg-hover)}.ai-sidebar-header h3{margin:0;font-size:18px;font-weight:var(--font-bold);color:var(--text-body)}.ai-status{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-disabled)}.ai-status-indicator{width:8px;height:8px;border-radius:var(--radius-circle)}.ai-status-indicator.enabled{background:#22c55e;box-shadow:0 0 8px #22c55e99}.ai-status-indicator.disabled{background:#ef4444}.ai-sidebar-body{display:flex;flex-direction:column;gap:12px;flex:1;overflow:hidden}.ai-disabled-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:16px;flex:1}.ai-disabled-message p{margin:0;color:var(--text-disabled);font-size:var(--text-sm)}.ai-enable-button{padding:10px 24px;background:var(--purple-gradient);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-semibold);transition:var(--transition-normal)}.ai-enable-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-purple-strong)}.ai-help-text{font-size:var(--text-xs);color:#999;max-width:280px}.ai-command-history{flex:1;overflow-y:auto;overflow-x:hidden;padding-right:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.ai-command-history::-webkit-scrollbar{width:6px}.ai-command-history::-webkit-scrollbar-track{background:#f1f1f1;border-radius:var(--radius-xs)}.ai-command-history::-webkit-scrollbar-thumb{background:#ccc;border-radius:var(--radius-xs)}.ai-command-history::-webkit-scrollbar-thumb:hover{background:#999}.ai-history-title{margin:0 0 12px;font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-disabled)}.ai-history-list{display:flex;flex-direction:column;gap:12px}.ai-history-item{padding:12px;background:var(--bg-light);border-radius:var(--radius-md);border-left:3px solid #22c55e;font-size:13px}.ai-history-item.error{border-left-color:#ef4444;background:var(--red-error-bg-light)}.ai-history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.ai-history-user{font-weight:var(--font-semibold);color:var(--text-body);font-size:var(--text-xs)}.ai-history-time{font-size:11px;color:#999}.ai-history-command{display:flex;align-items:start;gap:6px;margin-bottom:6px;color:var(--text-muted);line-height:1.4}.ai-command-icon,.ai-response-icon{flex-shrink:0;font-size:var(--text-sm)}.ai-history-response{display:flex;align-items:start;gap:6px;color:var(--text-body);font-weight:var(--font-medium);line-height:1.4;white-space:pre-wrap;word-break:break-word}.ai-history-meta{margin-top:6px;font-size:11px;color:#999}.ai-execution-time{font-family:Monaco,Menlo,monospace}.ai-command-history.empty{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px}.ai-empty-message{margin:0 0 16px;color:var(--text-disabled);font-size:13px}.ai-examples{background:var(--bg-light);padding:12px;border-radius:var(--radius-md);text-align:left;width:100%}.ai-examples-title{margin:0 0 var(--spacing-sm) 0;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--text-muted)}.ai-examples ul{margin:0;padding-left:20px;font-size:var(--text-xs);color:var(--text-disabled)}.ai-examples li{margin-bottom:4px;font-style:italic}.ai-command-input{display:flex;flex-direction:column;gap:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--border-light)}.ai-command-input textarea{width:100%;padding:10px;border:2px solid var(--border-light);border-radius:var(--radius-md);font-family:inherit;font-size:13px;resize:vertical;min-height:60px;transition:var(--transition-border)}.ai-command-input textarea:focus{outline:none;border-color:var(--purple-primary)}.ai-command-input textarea:disabled{background:var(--bg-canvas);cursor:not-allowed}.ai-submit-button{padding:10px;background:var(--purple-gradient);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:13px;font-weight:var(--font-semibold);transition:var(--transition-normal)}.ai-submit-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-purple-strong)}.ai-submit-button:disabled{opacity:.5;cursor:not-allowed}.ai-input-hint{margin:0;font-size:11px;color:#999;text-align:center}.ai-error-message{display:flex;align-items:center;gap:var(--spacing-sm);padding:10px;background:var(--red-error-bg-light);border:1px solid var(--red-error-border);border-radius:var(--radius-md);color:#dc2626;font-size:var(--text-xs)}.error-icon{flex-shrink:0}.ai-disable-button{padding:var(--spacing-sm);background:#ef4444;color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-xs);font-weight:var(--font-medium);transition:var(--transition-normal)}.ai-disable-button:hover{background:#dc2626}@media (max-width: 768px){.ai-sidebar{left:10px;bottom:10px;right:10px;width:calc(100vw - 20px);max-width:none;max-height:calc(100vh - 100px)}.ai-sidebar.collapsed{max-width:160px;right:auto}.ai-sidebar-content{padding:12px}.ai-sidebar-toggle{padding:14px 18px;font-size:15px}.ai-icon{font-size:22px}.ai-sidebar-header h3{font-size:16px}.ai-command-input textarea{font-size:16px;min-height:50px;padding:12px}.ai-submit-button{padding:12px;font-size:var(--text-sm);min-height:44px}.ai-enable-button,.ai-disable-button{min-height:44px;padding:12px 24px;font-size:var(--text-sm)}.ai-history-item{font-size:var(--text-sm);padding:14px}.ai-command-history{max-height:300px}}@media (max-width: 480px){.ai-sidebar:not(.collapsed){position:fixed;inset:0;width:100vw;height:100vh;max-height:100vh;border-radius:0;margin:0;overflow:hidden}.ai-sidebar.collapsed{position:fixed;inset:auto auto 70px 10px;width:auto;height:auto;max-height:50px;border-radius:var(--radius-lg)}.ai-sidebar-content{height:100%;display:flex;flex-direction:column;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.ai-sidebar-header{padding-bottom:16px;margin-bottom:16px;flex-shrink:0}.ai-sidebar-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.ai-command-history{flex:1;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}.ai-command-input{flex-shrink:0;position:relative}.ai-command-input textarea{max-height:120px;-webkit-overflow-scrolling:touch}.ai-disabled-message{flex:1;padding:32px 16px}.ai-sidebar-toggle{position:relative;display:flex;width:100%}.ai-sidebar:not(.collapsed) .ai-sidebar-toggle{margin-bottom:var(--spacing-sm);justify-content:space-between}.ai-sidebar:not(.collapsed) .ai-sidebar-toggle:after{content:"✕";margin-left:auto;font-size:18px;font-weight:var(--font-normal)}.ai-submit-button,.ai-enable-button,.ai-disable-button,.ai-sidebar-toggle{min-height:48px;touch-action:manipulation}.ai-sidebar,.ai-sidebar-toggle,.ai-submit-button,.ai-enable-button{transition:var(--transition-normal)}}@media (max-width: 768px) and (orientation: landscape){.ai-sidebar:not(.collapsed){max-height:100vh}.ai-command-history{max-height:150px}.ai-command-input textarea{min-height:40px;max-height:60px}}.feedback-modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.feedback-modal{background:linear-gradient(135deg,#1f2937,#111827);border-radius:16px;padding:2rem;width:90%;max-width:540px;box-shadow:0 20px 60px #00000080;border:1px solid rgba(255,255,255,.1);animation:feedbackModalSlideUp .3s ease-out}@keyframes feedbackModalSlideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.feedback-modal-title{margin:0 0 .5rem;color:#f9fafb;font-size:1.5rem;font-weight:600}.feedback-modal-subtitle{margin:0 0 1.5rem;color:#9ca3af;font-size:.875rem;line-height:1.5}.feedback-form-group{margin-bottom:1.25rem}.feedback-label{display:block;margin-bottom:.5rem;color:#e5e7eb;font-size:.875rem;font-weight:500}.feedback-select{width:100%;padding:.625rem .875rem;background-color:#374151;border:1px solid #4b5563;border-radius:8px;color:#f9fafb;font-size:.9375rem;font-family:inherit;cursor:pointer;transition:all .2s ease}.feedback-select:hover:not(:disabled){border-color:#6b7280;background-color:#3f4855}.feedback-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.feedback-select:disabled{opacity:.5;cursor:not-allowed}.feedback-textarea{width:100%;padding:.75rem;background-color:#374151;border:1px solid #4b5563;border-radius:8px;color:#f9fafb;font-size:.9375rem;font-family:inherit;resize:vertical;min-height:120px;line-height:1.6;transition:all .2s ease}.feedback-textarea:hover:not(:disabled){border-color:#6b7280;background-color:#3f4855}.feedback-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.feedback-textarea:disabled{opacity:.5;cursor:not-allowed}.feedback-textarea.over-limit{border-color:#ef4444}.feedback-textarea.over-limit:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.feedback-char-count{margin-top:.375rem;text-align:right;font-size:.8125rem;color:#9ca3af}.feedback-char-count .over-limit{color:#ef4444;font-weight:500}.feedback-error-message{margin-bottom:1rem;padding:.75rem;background-color:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#fca5a5;font-size:.875rem}.feedback-modal-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;gap:1rem}.feedback-modal-hint{color:#6b7280;font-size:.8125rem;font-weight:500;flex-shrink:0}.feedback-modal-buttons{display:flex;gap:.625rem;flex-shrink:0}.feedback-modal-button{padding:.625rem 1.25rem;border:none;border-radius:8px;font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.feedback-modal-button-cancel{background-color:#374151;color:#e5e7eb;border:1px solid #4b5563}.feedback-modal-button-cancel:hover:not(:disabled){background-color:#4b5563;border-color:#6b7280}.feedback-modal-button-cancel:disabled{opacity:.5;cursor:not-allowed}.feedback-modal-button-submit{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.feedback-modal-button-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #667eea66}.feedback-modal-button-submit:active:not(:disabled){transform:translateY(0)}.feedback-modal-button-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}.feedback-success{text-align:center;padding:2rem 1rem}.feedback-success-icon{margin-bottom:1.5rem;display:flex;justify-content:center;animation:feedbackSuccessScale .5s ease-out}@keyframes feedbackSuccessScale{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.feedback-success-title{margin:0 0 .75rem;color:#f9fafb;font-size:1.75rem;font-weight:600}.feedback-success-message{margin:0;color:#9ca3af;font-size:1rem;line-height:1.6}@media (max-width: 640px){.feedback-modal{padding:1.5rem;max-width:95%}.feedback-modal-title{font-size:1.25rem}.feedback-modal-footer{flex-direction:column;align-items:stretch}.feedback-modal-hint{order:2;text-align:center;margin-top:.5rem}.feedback-modal-buttons{order:1;flex-direction:column}.feedback-modal-button{width:100%}}.canvas-container{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--bg-canvas);cursor:grab}.canvas-container:active{cursor:grabbing}.brave-warning{position:absolute;top:0;left:0;right:0;z-index:10002;pointer-events:none;display:flex;justify-content:center;padding:var(--spacing-lg)}.brave-warning-content{display:flex;align-items:center;gap:var(--spacing-lg);background:var(--yellow-warning-bg);border:2px solid var(--yellow-warning);border-radius:var(--radius-md);padding:var(--spacing-lg) var(--spacing-xl);box-shadow:var(--shadow-card);max-width:800px;pointer-events:auto;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.brave-warning-icon{font-size:1.5rem;flex-shrink:0}.brave-warning-text{flex:1;font-size:var(--text-sm);color:var(--yellow-warning-text);line-height:1.5}.brave-warning-text strong{color:var(--yellow-warning-dark)}.brave-warning-text code{background:var(--black-10);padding:.125rem .375rem;border-radius:var(--radius-xs);font-size:.8125rem;font-family:Monaco,Courier New,monospace}.brave-warning-close{background:none;border:none;font-size:var(--text-xl);line-height:1;color:var(--yellow-warning-text);cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:var(--transition-background);flex-shrink:0}.brave-warning-close:hover{background:var(--black-10)}@media (max-width: 768px){.brave-warning-content{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);position:relative}.brave-warning-icon{position:absolute;top:var(--spacing-md);left:var(--spacing-lg)}.brave-warning-close{position:absolute;top:var(--spacing-md);right:var(--spacing-lg)}.brave-warning-text{padding-top:calc(1.5rem + var(--spacing-sm));width:100%}}.canvas-loading{position:fixed;inset:0;z-index:var(--z-loading);background:var(--purple-gradient);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn .3s ease}.canvas-loading.fade-out{animation:fadeOut .4s ease forwards}@keyframes fadeOut{to{opacity:0}}.loading-spinner{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2xl);color:#fff}.loading-spinner:before{content:"";width:60px;height:60px;border:4px solid var(--white-20);border-top-color:#fff;border-radius:var(--radius-circle);animation:spin .8s linear infinite}.loading-spinner:after{content:"Loading canvas...";font-size:var(--text-lg);font-weight:var(--font-semibold);letter-spacing:.5px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.network-overlay{position:fixed;inset:0;background:var(--overlay-black);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);z-index:var(--z-network);display:flex;align-items:center;justify-content:center;pointer-events:all;animation:overlayFadeIn .4s ease forwards}@keyframes overlayFadeIn{to{background:var(--overlay-light);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}.network-alert{background:#fff;border-radius:var(--radius-2xl);padding:var(--spacing-3xl) var(--spacing-3xl);max-width:450px;width:90%;text-align:center;box-shadow:var(--shadow-heavy);opacity:0;transform:scale(.7) translateY(30px);animation:alertSlideIn .5s cubic-bezier(.175,.885,.32,1.275) .1s forwards}@keyframes alertSlideIn{to{opacity:1;transform:scale(1) translateY(0)}}.network-alert-icon{color:var(--red-error-light);margin-bottom:var(--spacing-xl);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.network-alert h3{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary-dark);margin:0 0 var(--spacing-lg) 0}.network-alert p{font-size:var(--text-base);color:var(--text-disabled);margin:0 0 var(--spacing-2xl) 0;line-height:1.6}.network-status-indicator{display:inline-flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-xl);background:var(--bg-lightest);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-disabled)}.pulse-dot{width:10px;height:10px;border-radius:var(--radius-circle);background:var(--red-error-light);animation:dotPulse 1.5s ease-in-out infinite}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}.reconnecting-banner{position:fixed;top:var(--spacing-lg);left:50%;transform:translate(-50%);z-index:var(--z-reconnect);pointer-events:none;animation:slideDown .3s ease}.reconnecting-content{display:flex;align-items:center;gap:var(--spacing-md);background:var(--light-blue-gradient);color:#fff;padding:.875rem var(--spacing-xl);border-radius:var(--radius-pill);box-shadow:var(--shadow-blue);font-size:var(--text-sm);font-weight:var(--font-semibold)}.reconnecting-spinner{width:16px;height:16px;border:2px solid var(--white-20);border-top-color:#fff;border-radius:var(--radius-circle);animation:spin .8s linear infinite}.error-toast{position:fixed;bottom:var(--spacing-2xl);left:50%;transform:translate(-50%);z-index:var(--z-reconnect);animation:toastSlideUp .3s ease}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.error-toast-content{display:flex;align-items:center;gap:var(--spacing-md);background:var(--red-error);color:#fff;padding:var(--spacing-lg) var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-red-hover);font-size:var(--text-sm);font-weight:var(--font-medium);max-width:500px;pointer-events:auto}.error-toast-content svg{flex-shrink:0}.error-toast-content span{flex:1;line-height:1.4}.error-toast-close{background:none;border:none;color:#fff;font-size:var(--text-xl);line-height:1;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:var(--transition-background);flex-shrink:0;opacity:.8}.error-toast-close:hover{background:var(--black-20);opacity:1}.alignment-menu{position:relative;display:inline-block}.alignment-menu .toolbar-btn{position:relative;width:100%}.alignment-submenu{position:absolute;left:100%;top:0;margin-left:var(--spacing-sm);background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-medium);padding:var(--spacing-sm);min-width:160px;z-index:var(--z-dropdown);animation:slideInRight .2s ease}@keyframes slideInRight{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.canvas-toolbar.collapsed .alignment-submenu{left:100%;margin-left:var(--spacing-sm)}.alignment-section{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--spacing-sm)}.alignment-section:last-child{margin-bottom:0}.alignment-section-title{font-size:11px;font-weight:var(--font-semibold);color:var(--text-disabled);padding:4px var(--spacing-sm);text-transform:uppercase;letter-spacing:.5px}.alignment-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) 12px;background:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:var(--font-medium);color:var(--text-body);transition:var(--transition-fast);white-space:nowrap}.alignment-item:hover:not(:disabled){background:var(--bg-canvas);color:var(--purple-primary)}.alignment-item:active:not(:disabled){background:#e8e8e8;transform:scale(.98)}.alignment-item:disabled{opacity:.4;cursor:not-allowed}.alignment-item svg{flex-shrink:0;width:16px;height:16px}.alignment-item span{flex:1;text-align:left}.alignment-divider{height:1px;background:var(--border-light);margin:var(--spacing-sm) 0}@media (max-width: 768px){.alignment-submenu{left:auto;right:0;top:100%;margin-left:0;margin-top:var(--spacing-sm);min-width:180px}.canvas-toolbar.collapsed .alignment-submenu{left:auto;right:auto;top:100%;margin-top:var(--spacing-sm)}.alignment-item{padding:12px;min-height:44px}}.canvas-toolbar{position:relative;z-index:var(--z-toolbar);display:flex;flex-direction:column;gap:var(--spacing-sm);background:var(--white-98);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-medium);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition-slow);pointer-events:auto}.canvas-toolbar.collapsed{padding:.5rem}.toolbar-toggle{background:var(--user-color, #667eea);color:#fff;border:none;padding:.5rem;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:100%;min-width:36px;height:36px}.toolbar-toggle:hover{transform:scale(1.05);filter:brightness(1.15);box-shadow:0 2px 12px #0003}.toolbar-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm)}.toolbar-btn{background:#fff;color:var(--text-body);border:2px solid var(--border-input);padding:var(--spacing-md);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;box-shadow:var(--shadow-small);transition:var(--transition-normal);display:flex;align-items:center;gap:var(--spacing-md);white-space:nowrap;min-width:48px;justify-content:flex-start}.canvas-toolbar.collapsed .toolbar-btn{padding:.75rem;justify-content:center}.canvas-toolbar.collapsed .toolbar-btn span{display:none}.toolbar-btn svg{flex-shrink:0}.toolbar-btn:hover:not(:disabled){transform:translate(4px);box-shadow:var(--shadow-hover);border-color:var(--purple-primary)}.canvas-toolbar.collapsed .toolbar-btn:hover:not(:disabled){transform:scale(1.05)}.toolbar-btn:active:not(:disabled){transform:translate(2px);box-shadow:var(--shadow-small)}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.rectangle-btn:hover:not(:disabled){background:var(--purple-shape-gradient);border-color:var(--purple-primary)}.circle-btn:hover:not(:disabled){background:var(--blue-shape-gradient);border-color:var(--blue-accent)}.line-btn:hover:not(:disabled){background:var(--green-shape-gradient);border-color:var(--green-accent)}.arrow-btn:hover:not(:disabled){background:linear-gradient(135deg,#fb923c,#f97316);border-color:#f97316}.toolbar-divider{height:1px;background:linear-gradient(90deg,transparent 0%,var(--border-input) 50%,transparent 100%);margin:.25rem 0}.undo-btn:hover:not(:disabled){background:var(--pink-shape-gradient);border-color:var(--pink-accent)}.redo-btn:hover:not(:disabled){background:var(--teal-shape-gradient);border-color:var(--teal-accent)}.delete-btn{border-color:var(--red-error);color:var(--red-error)}.delete-btn:hover:not(:disabled){background:#fff0f0;border-color:var(--red-error);color:var(--red-error-dark)}.toolbar-btn.color-btn{position:relative}.toolbar-btn.color-btn:hover{background:var(--user-color, var(--purple-primary));color:#fff;border-color:var(--user-color, var(--purple-primary))}.toolbar-btn.color-btn:active{transform:translateY(1px);filter:brightness(.95)}.shapes-menu-container{position:relative}.shapes-menu-btn.active{background:var(--purple-shape-gradient);border-color:var(--purple-primary)}.shapes-dropdown{position:absolute;left:calc(100% + var(--spacing-sm));top:0;background:#fff;border-radius:10px;box-shadow:var(--shadow-dropdown);padding:var(--spacing-sm);min-width:180px;z-index:var(--z-dropdown);animation:dropdownSlideIn .2s cubic-bezier(.4,0,.2,1)}@keyframes dropdownSlideIn{0%{opacity:0;transform:translate(-8px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}.shapes-dropdown-item{width:100%;background:#fff;border:none;padding:var(--spacing-md);border-radius:var(--radius-md);display:flex;align-items:center;gap:var(--spacing-md);cursor:pointer;transition:var(--transition-fast);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-body);text-align:left}.shapes-dropdown-item span:first-of-type{flex:1}.shortcut-hint{font-size:var(--text-xs);color:#999;background:var(--bg-canvas);padding:.125rem .375rem;border-radius:4px;font-weight:var(--font-medium);font-family:Monaco,Courier New,monospace}.shapes-dropdown-item:hover{background:var(--bg-lightest);transform:translate(4px)}.shapes-dropdown-item:hover .shortcut-hint{background:var(--border-light);color:var(--text-disabled)}.shapes-dropdown-item svg{flex-shrink:0}.shapes-dropdown-item.rectangle-item:hover{background:var(--purple-shape-gradient);color:var(--purple-primary)}.shapes-dropdown-item.circle-item:hover{background:var(--blue-shape-gradient);color:var(--blue-accent)}.shapes-dropdown-item.star-item:hover{background:var(--purple-pink-shape-gradient);color:var(--purple-pink-accent)}.shapes-dropdown-item.triangle-item:hover{background:var(--pink-shape-gradient);color:var(--pink-accent)}.shapes-dropdown-item.line-item:hover{background:var(--green-shape-gradient);color:var(--green-accent)}.canvas-toolbar.collapsed .shapes-dropdown{left:calc(100% + var(--spacing-sm));top:0}.text-input-modal-overlay{position:fixed;inset:0;background-color:var(--overlay-medium);display:flex;align-items:center;justify-content:center;z-index:var(--z-loading);animation:fadeIn .15s ease-out}.text-input-modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-large);width:90%;max-width:500px;animation:slideUp .2s ease-out}.text-input-modal form{padding:24px}.text-input-modal-textarea{width:100%;min-height:120px;padding:12px;border:2px solid var(--border-light);border-radius:var(--radius-md);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;line-height:1.5;resize:vertical;transition:var(--transition-fast);box-sizing:border-box}.text-input-modal-textarea:focus{outline:none;border-color:var(--blue-primary);box-shadow:var(--focus-blue)}.text-input-modal-textarea::placeholder{color:var(--text-light)}.text-input-modal-footer{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm)}.text-input-modal-hint{font-size:var(--text-xs);color:var(--text-tertiary);-webkit-user-select:none;user-select:none}.text-input-modal-buttons{display:flex;gap:var(--spacing-sm)}.text-input-modal-button{padding:var(--spacing-sm) 16px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast);border:none;width:90px;flex-shrink:0}.text-input-modal-button-cancel{background-color:var(--bg-lighter);color:var(--text-secondary)}.text-input-modal-button-cancel:hover{background-color:var(--border-light)}.text-input-modal-button-submit{background-color:var(--blue-primary);color:#fff;width:90px!important;margin-top:0!important}.text-input-modal-button-submit:hover{background-color:var(--blue-secondary);transform:none;box-shadow:none}.text-input-modal-button-submit:active{background-color:var(--blue-dark)}.image-upload-modal-overlay{position:fixed;inset:0;background-color:var(--overlay-medium);display:flex;align-items:center;justify-content:center;z-index:var(--z-loading);animation:fadeIn .15s ease-out}.image-upload-modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-large);width:90%;max-width:500px;animation:slideUp .2s ease-out}.image-upload-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border-light)}.image-upload-modal-header h2{margin:0;font-size:18px;font-weight:var(--font-semibold);color:var(--text-primary-dark)}.image-upload-modal-close{background:none;border:none;font-size:28px;color:var(--text-tertiary);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast)}.image-upload-modal-close:hover{background-color:var(--bg-lighter);color:var(--text-primary-dark)}.image-upload-modal-content{padding:24px}.image-upload-input-group{margin-bottom:20px}.image-upload-input-group label{display:block;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.image-upload-input{width:100%;padding:10px 12px;border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--text-sm);transition:var(--transition-fast);box-sizing:border-box}.image-upload-input:focus{outline:none;border-color:var(--blue-primary);box-shadow:var(--focus-blue)}.image-upload-input:disabled{background-color:var(--bg-light);color:var(--text-light);cursor:not-allowed}.image-upload-divider{display:flex;align-items:center;margin:20px 0;color:var(--text-light);font-size:var(--text-xs);font-weight:var(--font-medium)}.image-upload-divider:before,.image-upload-divider:after{content:"";flex:1;height:1px;background-color:var(--border-light)}.image-upload-divider span{padding:0 12px}.image-upload-file-input-wrapper{display:flex;align-items:center;gap:12px}.image-upload-file-input{display:none}.image-upload-file-button{padding:10px 16px;background-color:var(--bg-lighter);border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);white-space:nowrap}.image-upload-file-button:hover:not(:disabled){background-color:var(--border-light);border-color:var(--border-medium)}.image-upload-file-button:disabled{opacity:.5;cursor:not-allowed}.image-upload-file-name{font-size:var(--text-sm);color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-upload-preview{margin-top:16px;padding:12px;border:2px solid var(--border-light);border-radius:var(--radius-md);display:flex;justify-content:center;background-color:var(--bg-light)}.image-upload-preview img{max-width:100%;max-height:200px;border-radius:4px}.image-upload-error{margin-top:12px;padding:12px;background-color:#fee2e2;border:1px solid var(--red-error-border);border-radius:var(--radius-md);color:var(--red-error-text-dark);font-size:var(--text-sm)}.image-upload-modal-footer{padding:16px 24px;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:12px}.image-upload-button{padding:10px 20px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-fast);border:none}.image-upload-button:disabled{opacity:.5;cursor:not-allowed}.image-upload-button-cancel{background-color:var(--bg-lighter);color:var(--text-secondary)}.image-upload-button-cancel:hover:not(:disabled){background-color:var(--border-light)}.image-upload-button-submit{background-color:var(--blue-primary);color:#fff;min-width:120px}.image-upload-button-submit:hover:not(:disabled){background-color:var(--blue-secondary)}.image-upload-button-submit:active:not(:disabled){background-color:var(--blue-dark)}.keyboard-shortcuts-pane{position:absolute;bottom:75px;right:20px;background:var(--white-95);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);font-size:var(--text-xs);display:flex;flex-direction:column;color:var(--text-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:var(--z-dropdown);max-width:400px;max-height:400px;transition:var(--transition-slow)}.keyboard-shortcuts-pane.collapsed{padding:0;background:transparent;box-shadow:none}.shortcuts-toggle-btn{background:transparent;border:none;border-radius:var(--radius-sm);width:auto;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;color:var(--text-tertiary);transition:var(--transition-normal);padding:4px var(--spacing-sm);box-shadow:none;align-self:flex-end;margin-bottom:4px;gap:6px;font-size:var(--text-xs);font-weight:var(--font-medium)}.keyboard-shortcuts-pane.collapsed .shortcuts-toggle-btn{box-shadow:var(--shadow-light);background:var(--white-95);border:1px solid var(--border-light)}.shortcuts-label{white-space:nowrap;-webkit-user-select:none;user-select:none}.shortcuts-toggle-btn:hover{color:var(--user-color, var(--purple-primary))}.keyboard-shortcuts-pane.collapsed .shortcuts-toggle-btn:hover{background:#fff;border-color:var(--user-color, var(--purple-primary));color:var(--user-color, var(--purple-primary));transform:scale(1.05);box-shadow:var(--shadow-light)}.shortcuts-toggle-btn:active{opacity:.7}.keyboard-shortcuts-pane.collapsed .shortcuts-toggle-btn:active{transform:scale(.95);opacity:1}.shortcuts-content{padding:12px 16px;display:flex;flex-direction:column;gap:12px;pointer-events:auto;animation:fadeInSlide .3s ease;max-height:500px;overflow-y:auto;cursor:pointer}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.shortcuts-section{display:flex;flex-direction:column;gap:6px}.shortcuts-section:not(:last-child){padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-light)}.shortcuts-section-title{font-weight:var(--font-semibold);font-size:.7rem;color:var(--purple-primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}.shortcut-item{display:flex;align-items:center;gap:var(--spacing-sm);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.shortcut-item kbd{background:var(--bg-lighter);border:1px solid var(--border-medium);border-radius:4px;padding:2px 6px;font-size:.7rem;font-family:Monaco,Courier New,monospace;font-weight:var(--font-semibold);color:var(--text-primary);box-shadow:0 1px 2px var(--black-05);min-width:24px;text-align:center}.shortcut-item span{color:var(--text-tertiary);font-size:var(--text-xs);flex:1}.shortcuts-content::-webkit-scrollbar{width:6px}.shortcuts-content::-webkit-scrollbar-track{background:transparent}.shortcuts-content::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-xs)}.shortcuts-content::-webkit-scrollbar-thumb:hover{background:var(--border-dark)}@media (max-width: 768px){.keyboard-shortcuts-pane{bottom:70px;right:10px}}.canvas-info{position:absolute;bottom:20px;right:20px;background:var(--white-95);padding:12px 20px;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);font-size:var(--text-sm);font-family:Monaco,Courier New,monospace;display:flex;align-items:center;gap:var(--spacing-xl);color:var(--text-secondary);pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:var(--z-dropdown);transition:var(--transition-smooth)}.canvas-info span{font-weight:var(--font-medium)}.zoom-reset-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--user-color, var(--purple-primary));padding:.25rem var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-medium);font-family:Monaco,Courier New,monospace;cursor:pointer;transition:var(--transition-normal);pointer-events:auto}.zoom-reset-btn:hover{background:var(--user-color, var(--purple-primary));color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-small)}.zoom-reset-btn:active{transform:translateY(0)}@media (max-width: 768px){.canvas-info{font-size:.7rem;padding:var(--spacing-sm) 12px;gap:var(--spacing-md);bottom:10px;right:10px}.zoom-reset-btn{font-size:.7rem;padding:.2rem .4rem}}.floating-shape-toolbar{position:absolute;display:flex;align-items:center;gap:.25rem;background:var(--white-98);border-radius:var(--radius-lg);padding:var(--spacing-sm);box-shadow:0 4px 16px var(--black-20);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;z-index:var(--z-dropdown);animation:popIn .2s ease;transform:translate(-50%)}@keyframes popIn{0%{opacity:0;transform:translate(-50%,10px)}70%{transform:translate(-50%,-2px)}to{opacity:1;transform:translate(-50%)}}.shape-toolbar-btn{width:32px;height:32px;border-radius:var(--radius-md);background:#fff;color:var(--text-body);border:2px solid var(--border-input);cursor:pointer;box-shadow:var(--shadow-small);transition:var(--transition-normal);display:flex;align-items:center;justify-content:center;padding:0}.shape-toolbar-btn:hover:not(:disabled){background:var(--bg-canvas);border-color:var(--purple-primary);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.shape-toolbar-btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-small)}.shape-toolbar-btn:disabled{opacity:.3;cursor:not-allowed}.shape-toolbar-btn.delete{border-color:var(--red-error);color:var(--red-error)}.shape-toolbar-btn.delete:hover:not(:disabled){background:var(--red-error);color:#fff;border-color:var(--red-error);box-shadow:var(--shadow-red)}.shape-toolbar-btn.font-btn:hover:not(:disabled){background:var(--purple-primary);color:#fff}.toolbar-separator{width:1px;height:24px;background:linear-gradient(180deg,transparent 0%,var(--border-input) 50%,transparent 100%);margin:0 .25rem}.layer-display{padding:0 var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--purple-primary);-webkit-user-select:none;user-select:none;min-width:24px;text-align:center}.user-info-container{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);z-index:var(--z-toolbar)}.user-info-pill{display:flex;align-items:center;gap:.625rem;background:var(--white-95);border:2px solid transparent;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;box-shadow:var(--shadow-light);transition:var(--transition-normal);pointer-events:auto;color:var(--text-body)}.user-info-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);border:2px solid var(--user-color, var(--purple-primary))}.user-info-pill:active{transform:translateY(0);box-shadow:var(--shadow-light)}.user-avatar{width:32px;height:32px;border-radius:var(--radius-circle);background:var(--user-color, var(--purple-primary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:var(--font-bold);font-size:var(--text-sm)}.user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-arrow{transition:var(--transition-transform)}.dropdown-arrow.open{transform:rotate(180deg)}.user-dropdown{position:absolute;top:calc(100% + var(--spacing-sm));right:0;min-width:220px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;animation:dropdownFadeIn .2s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.user-dropdown-header{padding:var(--spacing-lg);background:linear-gradient(135deg,var(--user-color, var(--purple-primary)) 0%,var(--white-95) 100%)}.user-dropdown-email{font-size:var(--text-sm);color:var(--text-body);word-break:break-word;font-weight:var(--font-medium)}.user-dropdown-expiry{margin-top:var(--spacing-sm);font-size:var(--text-xs);color:var(--text-disabled);font-weight:var(--font-medium);padding:.375rem .625rem;background:var(--white-80);border-radius:4px;display:inline-block}.user-dropdown-divider{height:1px;background:var(--border-input)}.user-dropdown-item{width:100%;padding:.875rem var(--spacing-lg);border:none;background:#fff;text-align:left;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-body);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center}.user-dropdown-item:hover{background:var(--bg-canvas)}.user-dropdown-item:active{background:#e8e8e8}.user-dropdown-item svg{vertical-align:middle}.user-color-picker-popover{position:absolute;top:calc(100% + var(--spacing-sm));right:0;z-index:1001;box-shadow:var(--shadow-dropdown);border-radius:var(--radius-md);animation:slideDown .2s ease}@media (max-width: 768px){.user-name{display:none}.user-info-pill{padding:var(--spacing-sm);gap:.375rem}}.picker-popover{z-index:var(--z-dropdown);box-shadow:var(--shadow-dropdown);border-radius:var(--radius-md);animation:slideDown .2s ease;transition:left .3s ease,top .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.picker-popover .chrome-picker{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.picker-popover.font-picker-popover{background:#fff;padding:var(--spacing-sm)}.font-picker{display:flex;flex-direction:column;gap:var(--spacing-sm)}.font-picker-option{padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--border-input);border-radius:var(--radius-sm);background:#fff;cursor:pointer;transition:var(--transition-normal);font-size:16px;text-align:left;min-width:200px}.font-picker-option:hover{border-color:var(--purple-primary);background:#f5f7ff}.font-picker-option.selected{border-color:var(--purple-primary);background:var(--purple-primary);color:#fff}.layers-panel{position:fixed;right:0;top:0;bottom:0;width:320px;background:#fff;box-shadow:-2px 0 12px var(--black-10);display:flex;flex-direction:column;z-index:950;animation:slideInRight .3s cubic-bezier(.4,0,.2,1)}.layers-panel.collapsed{width:auto;background:transparent;box-shadow:none}.layers-expand-button{position:fixed;right:var(--spacing-lg);top:35%;transform:translateY(-50%);background:#fff;border:none;border-radius:var(--radius-lg);width:50px;padding:var(--spacing-lg) var(--spacing-md);box-shadow:var(--shadow-card);cursor:pointer;transition:var(--transition-normal);z-index:950}.layers-expand-button:hover{background:var(--bg-lightest);box-shadow:0 6px 16px var(--black-20);transform:translateY(-50%) scale(1.05)}.layers-expand-button .layers-icon{font-size:var(--text-xl);color:var(--text-body);display:block}.layers-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xl) var(--spacing-xl);border-bottom:1px solid var(--border-light);background:var(--purple-gradient);color:#fff;flex-shrink:0}.layers-title{display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--text-lg);font-weight:var(--font-semibold)}.layers-title .layers-icon{font-size:var(--text-lg);opacity:.9}.layers-count{background:var(--white-20);padding:.25rem .625rem;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-bold);min-width:28px;text-align:center}.layers-collapse-button{background:#ffffff26;border:none;color:#fff;font-size:var(--text-2xl);line-height:1;width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-normal)}.layers-collapse-button:hover{background:#ffffff40;transform:scale(1.1)}.layers-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-sm) 0}.layers-content::-webkit-scrollbar{width:8px}.layers-content::-webkit-scrollbar-track{background:#f1f3f5}.layers-content::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.layers-content::-webkit-scrollbar-thumb:hover{background:#a0aec0}.layers-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl) var(--spacing-2xl);text-align:center;color:var(--text-light)}.layers-empty-icon{font-size:var(--text-5xl);margin-bottom:var(--spacing-lg);opacity:.5}.layers-empty-text{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-tertiary);margin-bottom:var(--spacing-sm)}.layers-empty-hint{font-size:var(--text-sm);color:var(--text-light)}.layer-group{margin:0 var(--spacing-sm) var(--spacing-sm);border-radius:var(--radius-md);overflow:hidden;background:#fff;border:1px solid var(--border-light);transition:var(--transition-normal)}.layer-group:hover{border-color:var(--border-medium);box-shadow:var(--shadow-small)}.layer-header{width:100%;display:flex;align-items:center;gap:var(--spacing-md);padding:.875rem var(--spacing-lg);background:var(--bg-light);border:none;cursor:pointer;transition:var(--transition-normal);font-size:.9375rem;font-weight:var(--font-semibold);color:var(--text-secondary)}.layer-header:hover{background:var(--bg-lighter)}.layer-header.expanded{background:#ede9fe;color:#5b21b6}.layer-chevron{font-size:var(--text-xs);color:var(--text-tertiary);transition:var(--transition-transform);display:inline-block;width:14px}.layer-header.expanded .layer-chevron{color:#7c3aed}.layer-name{flex:1;text-align:left}.layer-shape-count{background:#fff;padding:.25rem .625rem;border-radius:10px;font-size:.8125rem;font-weight:var(--font-bold);color:var(--text-tertiary);border:1px solid var(--border-light)}.layer-header.expanded .layer-shape-count{background:#a78bfa;color:#fff;border-color:#8b5cf6}.layer-shapes{background:#fff;padding:.25rem 0;animation:expandDown .2s ease}@keyframes expandDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.shape-item{width:100%;display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg) var(--spacing-md) 2.5rem;background:#fff;border:none;cursor:pointer;transition:var(--transition-fast);font-size:var(--text-sm);color:var(--text-secondary);position:relative}.shape-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:var(--transition-background)}.shape-item:hover{background:var(--bg-light)}.shape-item:hover:before{background:var(--purple-gradient)}.shape-item:active{background:var(--bg-lighter);transform:scale(.98)}.shape-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.shape-icon{font-size:var(--text-lg);color:var(--text-tertiary);position:relative;z-index:1}.shape-color-preview{position:absolute;bottom:0;right:0;width:14px;height:14px;border-radius:var(--radius-circle);border:2px solid white;box-shadow:0 1px 3px var(--black-20);z-index:2}.shape-name{flex:1;text-align:left;font-weight:var(--font-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shape-type-badge{padding:.25rem var(--spacing-sm);border-radius:var(--radius-sm);font-size:.6875rem;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.025em;background:var(--bg-lighter);color:var(--text-tertiary);flex-shrink:0}.shape-item:hover .shape-type-badge{background:var(--border-light);color:var(--text-secondary)}@media (max-width: 768px){.layers-panel{width:280px}.layers-header{padding:var(--spacing-lg) var(--spacing-xl)}.layers-title{font-size:var(--text-base)}.layer-header{padding:var(--spacing-md) .875rem;font-size:var(--text-sm)}.shape-item{padding:.625rem .875rem .625rem 2.25rem;font-size:.8125rem}}.history-panel{position:fixed;right:0;top:0;bottom:0;width:320px;background:#fff;box-shadow:-2px 0 12px var(--black-10);display:flex;flex-direction:column;z-index:940;animation:slideInRight .3s cubic-bezier(.4,0,.2,1)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.history-panel.collapsed{width:auto;background:transparent;box-shadow:none}.history-expand-button{position:fixed;right:var(--spacing-lg);top:calc(35% + 5rem);transform:translateY(-50%);background:#fff;border:none;border-radius:var(--radius-lg);width:50px;padding:var(--spacing-lg) var(--spacing-md);box-shadow:var(--shadow-card);cursor:pointer;transition:var(--transition-normal);z-index:940}.history-expand-button:hover{background:var(--bg-lightest);box-shadow:0 6px 16px var(--black-20);transform:translateY(-50%) scale(1.05)}.history-expand-button .history-icon{font-size:var(--text-xl);display:block}.history-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xl) var(--spacing-xl);border-bottom:1px solid var(--border-light);background:var(--purple-pink-gradient);color:#fff;flex-shrink:0}.history-title{display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--text-lg);font-weight:var(--font-semibold)}.history-title .history-icon{font-size:var(--text-lg);opacity:.9}.history-position{background:var(--white-20);padding:.25rem .625rem;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-bold);min-width:50px;text-align:center}.history-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.history-action-button{background:#ffffff26;border:none;color:#fff;line-height:1;width:36px;height:36px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-normal)}.history-action-button svg{width:18px;height:18px}.history-action-button:hover:not(:disabled){background:#ffffff40;transform:scale(1.05)}.history-action-button:disabled{opacity:.3;cursor:not-allowed}.history-collapse-button{background:#ffffff26;border:none;color:#fff;font-size:var(--text-2xl);line-height:1;width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-normal)}.history-collapse-button:hover{background:#ffffff40;transform:scale(1.1)}.history-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-sm) 0}.history-content::-webkit-scrollbar{width:8px}.history-content::-webkit-scrollbar-track{background:#f1f3f5}.history-content::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.history-content::-webkit-scrollbar-thumb:hover{background:#a0aec0}.history-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl) var(--spacing-2xl);text-align:center;color:var(--text-light)}.history-empty-icon{font-size:var(--text-5xl);margin-bottom:var(--spacing-lg);opacity:.5}.history-empty-text{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-tertiary);margin-bottom:var(--spacing-sm)}.history-empty-hint{font-size:var(--text-sm);color:var(--text-light)}.history-item{width:100%;display:flex;align-items:center;padding:.875rem var(--spacing-xl);background:#fff;border-left:3px solid transparent;transition:var(--transition-fast);position:relative}.history-item.current{background:linear-gradient(90deg,#f093fb15 0%,transparent 100%);border-left-color:#f093fb;font-weight:var(--font-semibold)}.history-item.undo-item{opacity:1}.history-item.redo-item{opacity:.5}.history-item.redo-item:hover:not(:disabled){opacity:.8}.history-item-content{display:flex;align-items:center;gap:var(--spacing-md);flex:1}.history-item-icon{font-size:var(--text-lg);flex-shrink:0;width:24px;text-align:center}.history-item-description{flex:1;font-size:var(--text-sm);color:var(--text-secondary)}.current-badge{background:#f093fb;color:#fff;padding:.125rem var(--spacing-sm);border-radius:var(--radius-md);font-size:.6875rem;font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.05em}.history-item-indicator{width:8px;height:8px;border-radius:var(--radius-circle);flex-shrink:0;transition:var(--transition-normal)}.history-item-indicator.past{background:var(--green-success)}.history-item-indicator.future{background:var(--border-light)}.current-position-marker{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-xl);margin:var(--spacing-sm) 0}.current-position-marker.inline{margin:.25rem 0;padding:var(--spacing-sm) var(--spacing-xl)}.marker-line{flex:1;height:2px;background:var(--purple-pink-gradient);border-radius:1px}.marker-label{font-size:var(--text-xs);font-weight:var(--font-bold);color:#f093fb;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.history-footer{border-top:1px solid var(--border-light);padding:var(--spacing-lg) var(--spacing-xl);background:var(--bg-light);flex-shrink:0}.history-stats{display:flex;align-items:center;justify-content:space-around;gap:var(--spacing-lg)}.stat-item{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-tertiary)}.stat-icon{font-size:var(--text-lg);color:var(--text-light)}@media (max-width: 768px){.history-panel{width:280px}.history-header{padding:var(--spacing-lg) var(--spacing-xl)}.history-title{font-size:var(--text-base)}.history-item{padding:var(--spacing-md) var(--spacing-lg)}.history-item-description{font-size:.8125rem}}.canvas-selection-overlay{position:fixed;inset:0;background:var(--overlay-medium);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-loading);animation:fadeIn .2s ease-in-out}.canvas-selection-modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s ease-out}.canvas-selection-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xl);border-bottom:1px solid var(--border-light)}.canvas-selection-header h2{margin:0;font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary)}.modal-close-btn{background:none;border:none;padding:var(--spacing-sm);cursor:pointer;color:var(--text-tertiary);border-radius:var(--radius-sm);transition:var(--transition-normal);display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{background:var(--bg-lighter);color:var(--text-primary)}.canvas-selection-content{padding:var(--spacing-xl);overflow-y:auto;flex:1}.canvas-welcome-message{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);color:var(--text-tertiary)}.canvas-welcome-message h3{margin:0 0 var(--spacing-sm) 0;font-size:var(--text-lg);color:var(--text-primary)}.canvas-welcome-message p{margin:0;font-size:var(--text-base)}.canvas-section{margin-bottom:var(--spacing-xl)}.canvas-section-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.875rem;background:var(--bg-light);border:1px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal);margin-bottom:var(--spacing-sm)}.canvas-section-header:hover{background:var(--bg-lighter);border-color:var(--border-medium)}.canvas-section-title{display:flex;align-items:center;font-weight:var(--font-semibold);color:var(--text-primary);font-size:.95rem}.accordion-arrow{transition:var(--transition-transform)}.accordion-arrow.open{transform:rotate(180deg)}.canvas-list{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}.canvas-item{border:2px solid var(--border-light);border-radius:var(--radius-md);transition:var(--transition-normal);background:#fff}.canvas-item-main{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg);cursor:pointer}.canvas-item:not(.canvas-item-main){display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg);cursor:pointer}.canvas-item:hover{border-color:var(--purple-primary);background:var(--bg-light);transform:translateY(-2px);box-shadow:var(--shadow-card)}.canvas-item.selected{border-color:var(--purple-primary);background:#ede9fe}.canvas-item-icon{color:var(--purple-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.canvas-item-info{flex:1;min-width:0}.canvas-item-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base);margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-item-meta{font-size:var(--text-sm);color:var(--text-tertiary)}.canvas-item-meta code{background:var(--bg-lighter);padding:.125rem .375rem;border-radius:4px;font-family:Courier New,monospace;font-size:.8rem;font-weight:var(--font-semibold);color:var(--purple-primary);letter-spacing:.05em}.canvas-item-check{color:var(--purple-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.invite-code-section{background:var(--bg-light);padding:var(--spacing-xl);border-radius:var(--radius-md);border:1px solid var(--border-light)}.invite-code-section h4{margin:0 0 var(--spacing-lg) 0;font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.invite-code-input-group{display:flex;gap:var(--spacing-md)}.invite-code-input{flex:1;padding:var(--spacing-md);border:1px solid var(--border-medium);border-radius:var(--radius-sm);font-size:var(--text-base);font-family:Courier New,monospace;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.1em;transition:var(--transition-normal)}.invite-code-input:focus{outline:none;border-color:var(--purple-primary);box-shadow:var(--focus-purple)}.canvas-create-form{background:var(--bg-light);padding:var(--spacing-xl);border-radius:var(--radius-md);border:2px dashed var(--border-medium)}.canvas-create-form h4{margin:0 0 var(--spacing-lg) 0;font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.canvas-create-form .form-group{margin-bottom:var(--spacing-lg)}.canvas-create-form label{display:block;margin-bottom:var(--spacing-sm);font-weight:var(--font-medium);color:var(--text-secondary);font-size:var(--text-sm)}.checkbox-label{display:flex!important;align-items:center;gap:var(--spacing-sm);cursor:pointer;margin-bottom:.25rem!important}.checkbox-label input[type=checkbox]{width:auto!important;cursor:pointer}.checkbox-label span{font-weight:var(--font-medium)}.form-hint{margin:.25rem 0 0 1.75rem;font-size:.8125rem;color:var(--text-tertiary);font-style:italic}.canvas-create-form input{width:100%;padding:var(--spacing-md);border:1px solid var(--border-medium);border-radius:var(--radius-sm);font-size:var(--text-base);transition:var(--transition-normal);box-sizing:border-box}.canvas-create-form input:focus{outline:none;border-color:var(--purple-primary);box-shadow:var(--focus-purple)}.canvas-create-form input:disabled{background:var(--bg-lighter);cursor:not-allowed}.canvas-create-actions{display:flex;gap:var(--spacing-md);justify-content:flex-end}.btn-primary,.btn-secondary{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-sm);font-weight:var(--font-medium);font-size:var(--text-sm);cursor:pointer;transition:var(--transition-normal);border:none}.btn-primary{background:var(--purple-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--purple-dark);transform:translateY(-1px);box-shadow:var(--shadow-purple)}.btn-primary:disabled{background:var(--border-medium);cursor:not-allowed}.btn-secondary{background:#fff;color:var(--text-secondary);border:1px solid var(--border-medium)}.btn-secondary:hover:not(:disabled){background:var(--bg-light);border-color:var(--border-dark)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.canvas-create-btn{width:100%;padding:var(--spacing-lg);border:2px dashed var(--border-medium);border-radius:var(--radius-md);background:#fff;color:var(--purple-primary);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-normal);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-size:var(--text-base)}.canvas-create-btn:hover{border-color:var(--purple-primary);background:var(--bg-light);transform:translateY(-2px);box-shadow:var(--shadow-card)}.canvas-limit-message{text-align:center;padding:var(--spacing-lg);color:var(--text-tertiary);font-size:var(--text-sm);font-style:italic}.error-message{background:#fee;border:1px solid #fcc;color:var(--red-dark);padding:var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--text-sm);margin-bottom:var(--spacing-lg)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.copy-toast{position:fixed;bottom:var(--spacing-2xl);left:50%;transform:translate(-50%);background:var(--green-success);color:#fff;padding:.875rem var(--spacing-xl);border-radius:var(--radius-md);box-shadow:var(--shadow-toast);font-weight:var(--font-medium);display:flex;align-items:center;z-index:var(--z-copy-toast);animation:toastSlideUp .3s ease-out}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 768px){.canvas-selection-modal{width:95%;max-height:90vh;margin:var(--spacing-md)}.canvas-selection-header{padding:var(--spacing-lg)}.canvas-selection-header h2{font-size:var(--text-lg)}.canvas-selection-content{padding:var(--spacing-lg)}.canvas-welcome-message{padding:var(--spacing-lg) var(--spacing-sm)}.canvas-welcome-message h3{font-size:var(--text-base)}.canvas-section{margin-bottom:var(--spacing-lg)}.canvas-section-header{padding:var(--spacing-md)}.canvas-section-title{font-size:.875rem}.canvas-list{gap:var(--spacing-sm);padding-left:0}.canvas-item-main,.canvas-item:not(.canvas-item-main){gap:var(--spacing-md);padding:var(--spacing-md)}.canvas-item-icon svg{width:20px;height:20px}.canvas-item-name{font-size:var(--text-sm)}.canvas-item-meta{font-size:.75rem}.canvas-item-meta code{font-size:.7rem;padding:.1rem .3rem}.canvas-item-check svg{width:16px;height:16px}.invite-code-section{padding:var(--spacing-lg)}.invite-code-section h4{font-size:var(--text-sm);margin-bottom:var(--spacing-md)}.invite-code-input-group{flex-direction:column;gap:var(--spacing-md)}.invite-code-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm);min-width:0}.invite-code-input-group .btn-primary{width:100%}.canvas-create-form{padding:var(--spacing-lg)}.canvas-create-form h4{font-size:var(--text-sm)}.canvas-create-form .form-group{margin-bottom:var(--spacing-md)}.canvas-create-form input{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm)}.form-hint{font-size:.75rem;margin-left:1.5rem}.canvas-create-actions{flex-direction:column;gap:var(--spacing-sm)}.btn-primary,.btn-secondary{width:100%;padding:var(--spacing-md);font-size:var(--text-sm)}.canvas-create-btn{padding:var(--spacing-md);font-size:var(--text-sm)}.canvas-create-btn svg{width:16px;height:16px}.error-message{padding:var(--spacing-sm) var(--spacing-md);font-size:.75rem;margin-bottom:var(--spacing-md)}}@media (max-width: 480px){.canvas-selection-modal{width:100%;max-height:100vh;margin:0;border-radius:0}.canvas-selection-header{padding:var(--spacing-md)}.canvas-selection-header h2{font-size:var(--text-base)}.modal-close-btn{padding:var(--spacing-xs)}.modal-close-btn svg{width:16px;height:16px}.canvas-selection-content{padding:var(--spacing-md)}.canvas-section-header{padding:var(--spacing-sm) var(--spacing-md)}.canvas-section-title{font-size:.8125rem}.canvas-section-title svg{width:16px;height:16px}.accordion-arrow{width:10px;height:10px}.canvas-item-main,.canvas-item:not(.canvas-item-main){padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}.canvas-item-icon svg{width:18px;height:18px}.invite-code-section,.canvas-create-form{padding:var(--spacing-md)}.invite-code-input-group{flex-direction:column}.invite-code-input{width:100%;font-size:.8125rem;letter-spacing:.05em}.invite-code-input-group .btn-primary{width:100%}.btn-primary,.btn-secondary{padding:var(--spacing-sm) var(--spacing-md)}}@media (max-width: 768px) and (hover: none){.canvas-item{min-height:48px}.canvas-section-header{min-height:44px}.modal-close-btn{min-width:44px;min-height:44px}.btn-primary,.btn-secondary,.canvas-create-btn{min-height:44px}.canvas-item:hover{transform:none}.btn-primary:hover:not(:disabled),.canvas-create-btn:hover{transform:none}.canvas-item:active{background:var(--bg-light);transform:scale(.98)}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-secondary:active:not(:disabled){transform:scale(.98)}.canvas-create-btn:active{transform:scale(.98)}.canvas-section-header:active{background:var(--bg-lighter)}}.payment-modal-overlay{position:fixed;inset:0;background:var(--overlay-dark);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:20px;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.payment-modal{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.payment-modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border-bottom:1px solid var(--border-light)}.payment-modal-header h2{margin:0;font-size:24px;font-weight:var(--font-bold);color:var(--text-primary-dark)}.payment-modal-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:var(--transition-normal)}.payment-modal-close:hover{background:var(--bg-lighter);color:var(--text-primary-dark)}.payment-modal-content{padding:28px}.payment-pricing-card{display:flex;flex-direction:column;gap:24px}.payment-pricing-header{text-align:center}.payment-pricing-badge{display:inline-block;background:var(--purple-gradient);color:#fff;padding:6px 16px;border-radius:var(--radius-2xl);font-size:13px;font-weight:var(--font-semibold);margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}.payment-pricing-header h3{margin:0 0 8px;font-size:28px;font-weight:var(--font-bold);color:var(--text-primary-dark)}.payment-pricing-subtitle{margin:0;font-size:15px;color:var(--text-tertiary);line-height:1.5}.payment-features{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--bg-light);border-radius:var(--radius-lg)}.payment-feature{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--text-secondary)}.payment-feature svg{flex-shrink:0}.payment-pricing-note{padding:16px;background:var(--yellow-warning-light);border:1px solid var(--yellow-warning-border);border-radius:var(--radius-lg)}.payment-pricing-note p{margin:0 0 8px;font-size:var(--text-sm);color:var(--yellow-warning-text-dark);line-height:1.6}.payment-pricing-note p:last-child{margin-bottom:0}.payment-pricing-small{font-size:13px!important;color:var(--yellow-warning-text-darker)!important;margin-top:12px!important}.payment-error{padding:12px 16px;background:var(--red-error-bg-light);border:1px solid var(--red-error-border);border-radius:var(--radius-md);color:var(--red-error-text-dark);font-size:var(--text-sm);line-height:1.5}.payment-button-primary{width:100%;padding:14px 24px;background:var(--purple-gradient);color:#fff;border:none;border-radius:10px;font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-normal);box-shadow:var(--shadow-purple-strong)}.payment-button-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-purple-hover)}.payment-button-primary:active:not(:disabled){transform:translateY(0)}.payment-button-primary:disabled{opacity:.6;cursor:not-allowed}.payment-button-secondary{width:100%;padding:14px 24px;background:#fff;color:var(--text-tertiary);border:2px solid var(--border-light);border-radius:10px;font-size:15px;font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-normal)}.payment-button-secondary:hover:not(:disabled){background:var(--bg-light);border-color:var(--border-medium);color:var(--text-secondary)}.payment-button-secondary:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 640px){.payment-modal{margin:0;border-radius:0;max-height:100vh}.payment-modal-header h2{font-size:20px}.payment-pricing-header h3{font-size:24px}}.payment-gate-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--purple-gradient);color:#fff}.payment-gate-spinner{width:48px;height:48px;border:4px solid var(--white-20);border-top-color:#fff;border-radius:var(--radius-circle);animation:spin .8s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.payment-gate-loading p{font-size:var(--text-base);font-weight:var(--font-medium);margin:0}.app{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--dark-blue-gradient);padding:var(--spacing-2xl);position:relative;overflow:hidden}.app:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(circle,var(--white-10) 1px,transparent 1px);background-size:50px 50px;animation:moveStars 30s linear infinite;pointer-events:none}@keyframes moveStars{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.auth-container{max-width:450px;width:100%;position:relative;z-index:1}.auth-header{text-align:center;margin-bottom:var(--spacing-3xl);color:#fff;position:relative}.auth-header:before{content:"";position:absolute;top:-100px;left:50%;transform:translate(-50%)!important;width:100px;height:100px;background-image:url(/Starscape-Star.png);background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 0 20px rgba(255,255,255,.4));animation:pulse 3s ease-in-out infinite}.auth-header h1{font-size:var(--text-6xl);margin-bottom:var(--spacing-sm);margin-top:var(--spacing-lg);font-weight:var(--font-bold);line-height:1;text-shadow:0 4px 12px rgba(0,0,0,.5);background:var(--text-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{font-size:var(--text-lg);opacity:.95;font-weight:300;text-shadow:var(--shadow-light)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.auth-form{background:var(--white-98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-3xl);border-radius:var(--radius-xl);box-shadow:var(--shadow-heavy),0 0 1px var(--white-20) inset;border:1px solid var(--white-10)}.auth-form h2{color:var(--text-body);margin-bottom:var(--spacing-xl);font-size:var(--text-2xl);text-align:center}.form-group{margin-bottom:var(--spacing-xl)}.form-group label{display:block;margin-bottom:var(--spacing-sm);color:var(--text-muted);font-weight:var(--font-medium);font-size:.95rem}.form-group input{width:100%;padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--border-input);border-radius:var(--radius-md);font-size:var(--text-base);transition:var(--transition-border);background:var(--bg-input)}.form-group input:focus{outline:none;border-color:var(--border-focus);background:#fff;box-shadow:var(--focus-dark-blue)}.form-group input:disabled{cursor:not-allowed;opacity:.6}.auth-button{width:100%;padding:.875rem;background:var(--dark-blue-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-normal),box-shadow .2s,background .3s;position:relative;overflow:hidden}.auth-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--white-20),transparent);transition:left .5s}.auth-button:hover:not(:disabled):before{left:100%}.auth-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button);background:var(--purple-gradient-hover)}.auth-button:disabled{cursor:not-allowed;opacity:.6}.auth-footer{margin-top:var(--spacing-xl);text-align:center;color:var(--text-disabled);font-size:.95rem}.auth-footer a{color:var(--text-link);text-decoration:none;font-weight:var(--font-semibold);cursor:pointer;transition:var(--transition-normal)}.auth-footer a:hover{text-decoration:underline;color:var(--text-link-hover)}.status-message{margin-top:var(--spacing-xl);padding:var(--spacing-md);background:var(--yellow-warning-bg);border:1px solid var(--yellow-warning);border-radius:var(--radius-sm);text-align:center;color:var(--yellow-warning-text)}.status-message small{font-size:.85rem}.error-message{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--red-error-bg);border:1px solid var(--red-error);border-radius:var(--radius-sm);color:var(--red-error-text);font-size:.9rem;text-align:center}.new-user-screen{position:fixed;inset:0;width:100vw;height:100vh;background:var(--bg-canvas);background-image:repeating-linear-gradient(0deg,transparent,transparent 49px,var(--border-input) 49px,var(--border-input) 50px),repeating-linear-gradient(90deg,transparent,transparent 49px,var(--border-input) 49px,var(--border-input) 50px);background-size:50px 50px;display:flex;align-items:center;justify-content:center;padding:0;margin:0}