:root{--bg: #020509;--text: #f2f6ff;--card-bg: #090d13;--card-border: #1a2130;--accent: #3ba3ff;--muted: #6d7a99;--error: #e74c3c;--success: #27ae60;--success-rgb: 39, 174, 96;--accent-rgb: 59, 163, 255;--warning: #f39c12;--orange: #FF6B35;--teal: #16A085;--hover-bg: #1a2130;--panel-bg: #1f2937;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--border-radius: 6px;--transition: .2s ease}html{overscroll-behavior-y:none}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg);color:var(--text);touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;overscroll-behavior-y:none;padding-bottom:0;padding-bottom:env(safe-area-inset-bottom)}.app{display:flex;overflow:hidden;touch-action:manipulation;background:var(--bg);color:var(--text);position:fixed;inset:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.main-content{flex:1;display:flex;flex-direction:column;position:relative;background:var(--bg);color:var(--text)}.mobile-menu-btn{display:none;position:fixed;top:10px;right:10px;z-index:1001;background:var(--accent);color:var(--text);border:none;font-size:18px;cursor:pointer;padding:8px 12px;border-radius:var(--border-radius);box-shadow:0 2px 10px #0000004d;transition:background-color var(--transition);touch-action:manipulation}.mobile-menu-btn:hover{background:#2176c7}@media (max-width: 768px){.mobile-menu-btn{display:block;top:env(safe-area-inset-top,10px)}.main-content{margin-left:0;width:100%;height:100vh;height:100dvh}.sidebar-overlay{position:fixed;inset:0;background-color:#00000080;z-index:1000}html,body{font-size:14px}}.error-boundary{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;padding:20px}.error-boundary h2{color:var(--error);margin-bottom:10px}.retry-btn{background:var(--accent);color:var(--text);border:none;padding:10px 20px;border-radius:var(--border-radius);cursor:pointer;font-size:var(--font-size-base);margin-top:20px;transition:background-color var(--transition)}.retry-btn:hover{background:#2176c7}.loading{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--font-size-xl);color:var(--muted)}.loading-full-page{display:flex;align-items:center;justify-content:center;height:100vh;font-size:var(--font-size-xl);color:var(--muted)}.error-full-page{display:flex;align-items:center;justify-content:center;height:100vh;font-size:var(--font-size-xl);color:var(--error)}.error{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--font-size-xl);color:var(--error)}.no-note{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--font-size-xl);color:var(--muted)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:800px;width:90%;max-height:90vh;overflow:hidden;position:relative;animation:modalSlideIn .3s ease-out;display:flex}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:var(--font-size-2xl);cursor:pointer;color:var(--muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s;z-index:10}.modal-close:hover{background-color:var(--card-bg);color:var(--text)}.modal-content{display:flex;width:100%;height:100%}.modal-panel{flex:1;padding:2rem;display:flex;flex-direction:column}.login-panel{background:var(--panel-bg);color:#fff}.signup-panel{background:var(--accent);color:#fff}.panel-header{margin-bottom:1.5rem}.panel-header h1,.panel-header h2{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold)}.panel-body{flex:1;display:flex;flex-direction:column}.panel-actions{margin-top:auto;padding-top:1rem}.form{display:flex;flex-direction:column;height:100%}.form-group{margin-bottom:1rem}.form-label{display:block;margin:0 0 1rem;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:inherit}.form-input{width:100%;padding:.75rem;background:var(--card-border);border:1px solid var(--card-border);border-radius:6px;color:inherit;font-size:var(--font-size-base);transition:border-color .2s}.form-input::placeholder{color:var(--muted)}.form-input:focus{outline:none;border-color:var(--accent)}.form-input:disabled{opacity:.7;cursor:not-allowed}.form-error{color:var(--error);font-size:var(--font-size-sm);margin-top:.5rem}.form-actions{margin-top:auto;padding-top:1rem}.btn{border:none;padding:.875rem 1.5rem;border-radius:6px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .2s;width:100%;text-align:center}.btn:disabled{opacity:.7;cursor:not-allowed}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover:not(:disabled){background:#f8fafc}.btn-secondary{background:#fff;color:var(--accent)}.btn-secondary:hover:not(:disabled){background:#f8fafc}.btn-text{background:none;color:var(--muted);padding:.5rem 0;font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);width:auto;margin-top:.5rem}.btn-text:hover:not(:disabled){color:#fff}.login-feature-list{flex:1;margin-bottom:1rem}.login-feature-item{display:flex;align-items:center;margin-bottom:1rem;font-size:var(--font-size-base)}.login-feature-item:last-child{margin-bottom:0}.login-feature-icon{color:var(--success);margin-right:.5rem;font-weight:var(--font-weight-bold);font-size:var(--font-size-base)}.login-message{margin-top:1rem;padding:.75rem;border-radius:6px;font-size:var(--font-size-sm)}.login-message.login-success{background:#065f46;color:#d1fae5}.login-message.login-error{background:#991b1b;color:#fecaca}@media (max-width: 768px){.modal{max-width:calc(100% - 2rem);width:calc(100% - 2rem);max-height:calc(100vh - 2rem);flex-direction:column;margin:1rem}.modal-content{flex-direction:column}.modal-panel{padding:1.5rem}.login-panel{order:1}.signup-panel{order:2}.panel-header,.login-feature-list{margin-bottom:1rem}.login-feature-item{margin-bottom:.75rem}.form{flex:none}.form-actions,.panel-actions{margin-top:1rem}}.user-profile{padding:20px;border-top:1px solid var(--card-border);background-color:var(--card-bg);display:flex;flex-direction:column;gap:12px;margin-top:auto}.user-profile:not(.authenticated){background:linear-gradient(135deg,var(--accent) 0%,#2176c7 100%);border-top:1px solid rgba(255,255,255,.1)}.user-email{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-actions{display:flex;flex-direction:column;gap:8px}.sync-button{background-color:var(--accent);color:var(--text);border:none;padding:8px 12px;border-radius:var(--border-radius);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color .2s ease;text-align:center}.sync-button:hover:not(:disabled){background-color:#2176c7}.sync-button:disabled{background-color:var(--card-border);color:var(--muted);cursor:not-allowed}.sign-out-link{background:none;border:none;color:var(--muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:color .2s ease;text-decoration:none;padding:8px 0;text-align:left;width:fit-content;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation}.sign-out-link:hover{color:var(--error)}.auth-buttons{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}.auth-buttons .login-button{background:#fff;color:var(--accent);border:none;padding:.875rem 1.5rem;border-radius:6px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color .2s;text-align:center;width:100%}.auth-buttons .login-button:hover{background:#f8fafc}.auth-info{font-size:var(--font-size-xs);color:#ffffffe6;text-align:center;line-height:var(--line-height-normal);font-weight:var(--font-weight-medium);position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.1)}.sync-error-message{background:none;border:none;color:var(--error);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:default;text-decoration:none;padding:20px;text-align:left;width:fit-content;margin-bottom:0}.connection-status{background:none;border:none;color:var(--warning);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:default;text-decoration:none;padding:20px;text-align:left;width:fit-content;margin-bottom:0}:root{--card-bg-alt: #10151f}.sidebar{width:250px;background-color:var(--card-bg);color:var(--text);display:flex;flex-direction:column;border-right:1px solid var(--card-border);position:relative;min-height:100vh;min-height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}@media (max-width: 768px){.sidebar{position:fixed;top:0;left:-250px;height:100vh;height:100dvh;width:250px;z-index:1002;transition:left .3s ease}.sidebar.open{left:0;width:calc(100vw - 60px)}.close-sidebar-btn{position:absolute;top:15px;right:15px;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;padding:8px;border-radius:var(--border-radius);transition:background-color .2s;touch-action:manipulation}.close-sidebar-btn:hover{background-color:var(--card-border)}.note-actions{opacity:1!important}}.close-sidebar-btn{display:none}.sidebar-header{padding:20px;border-bottom:1px solid var(--card-border);background-color:var(--card-bg)}.logo-container{display:flex;align-items:center;gap:8px;margin-bottom:15px}.sidebar-header h2{font-size:18px;font-weight:600;color:var(--accent);margin:0}.beta-badge{background-color:var(--accent);color:var(--text);font-size:10px;font-weight:600;padding:2px 6px;margin-left:-4px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.new-note-btn{width:100%;padding:10px;background-color:var(--accent);color:var(--text);border:none;border-radius:var(--border-radius);cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s}.new-note-btn:hover{background-color:var(--accent)}.new-note-btn.disabled{background-color:var(--card-border);color:var(--muted);opacity:.7}.new-note-btn.disabled:hover{background-color:var(--card-border)}.notes-list{flex:1;overflow-y:auto;padding:10px 0;min-height:0}.note-item{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;cursor:pointer;transition:background-color .2s;border-left:3px solid transparent;background-color:transparent;color:var(--text)}.note-item:hover{background-color:var(--hover-bg)}.note-item.active{background-color:var(--card-bg-alt);border-left-color:var(--accent);color:var(--accent)}.note-item.active .note-title{color:var(--accent);font-weight:500}.note-item.active .note-actions{opacity:1}.note-title{flex:1;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .2s;color:var(--muted)}.note-item:hover .note-actions{opacity:1}.edit-note-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:var(--border-radius);transition:all .2s}.edit-note-btn:hover{background-color:var(--accent);color:var(--text)}.delete-note-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:var(--border-radius);transition:all .2s}.delete-note-btn:hover{background-color:var(--error);color:var(--text)}.codemirror-container{position:relative;width:100%;height:100%;overflow:hidden;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;max-width:100vw;box-sizing:border-box}.results-overlay{position:absolute;top:0;right:0;width:200px;height:100%;pointer-events:none;z-index:10;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;padding-top:20px;max-width:35vw}.result-line{height:1.8em;line-height:1.8;display:flex;align-items:center;font-family:var(--font-family-mono);font-size:14px;pointer-events:auto;padding-right:20px}.result-value{margin-left:auto;color:var(--text);border-radius:var(--border-radius);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:right;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;cursor:text;transition:background-color var(--transition);border:none}.result-value,.result-value:hover{background-color:transparent!important;padding:0!important}.result-line.expression .result-value{color:var(--success);border:none}.result-line.variable .result-value{color:var(--accent);border:none}.result-line.comment .result-value{color:var(--muted);border:none}.result-line.text .result-value,.result-line.comment .result-value,.result-line.empty .result-value{visibility:hidden}.result-line.error .result-value{color:var(--error);border:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;cursor:help}.result-line.loading .result-value{color:var(--muted);animation:pulse 1.5s infinite ease-in-out}.result-line.expression.result-glow .result-value{animation:glow-success .2s ease-out}.result-line.variable.result-glow .result-value{animation:glow-accent .2s ease-out}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes glow-success{0%{text-shadow:0 0 0 rgba(var(--success-rgb),0)}50%{text-shadow:0 0 8px rgba(var(--success-rgb),1),0 0 12px rgba(var(--success-rgb),.9),0 0 16px rgba(var(--success-rgb),.7)}to{text-shadow:0 0 0 rgba(var(--success-rgb),0)}}@keyframes glow-accent{0%{text-shadow:0 0 0 rgba(var(--accent-rgb),0)}50%{text-shadow:0 0 8px rgba(var(--accent-rgb),1),0 0 12px rgba(var(--accent-rgb),.9),0 0 16px rgba(var(--accent-rgb),.7)}to{text-shadow:0 0 0 rgba(var(--accent-rgb),0)}}@media (max-width: 768px){.results-overlay{right:0;width:110px;padding:10px;max-width:28vw}.result-line{font-size:14px;line-height:1.4;height:1.4em;padding-right:15px;align-items:center}.result-value{max-width:100%;font-size:14px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media (min-width: 769px) and (max-width: 1024px){.results-overlay{right:0;width:200px;padding:20px;max-width:35vw}.result-line{font-size:14px;line-height:1.8;height:1.8em;padding-right:20px;align-items:center}.result-value{max-width:100%;font-size:14px;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.codemirror-editor{width:100%;height:100%;touch-action:manipulation;overflow:hidden}.codemirror-editor .cm-editor{height:100%;font-family:var(--font-family-mono);font-size:14px;line-height:1.8}.codemirror-editor .cm-editor .cm-scroller{font-family:var(--font-family-mono);font-size:14px;line-height:1.5}.codemirror-editor .cm-editor .cm-content{padding:20px;color:var(--text)}@media (max-width: 768px){.codemirror-editor .cm-editor .cm-content{padding:10px}.codemirror-editor .cm-editor .cm-content .cm-line{padding-left:15px;text-indent:-15px;max-width:70%}}@media (min-width: 769px) and (max-width: 1024px){.codemirror-editor .cm-editor .cm-content{padding:20px}.codemirror-editor .cm-editor .cm-content .cm-line{padding-left:20px;text-indent:-20px;max-width:75%}}.codemirror-editor .cm-editor .cm-line{padding:0}.codemirror-editor .cm-editor .cm-content .cm-line{color:var(--text);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;padding-left:20px;text-indent:-20px;max-width:75%}.codemirror-editor .cm-editor .cm-content .cm-line .cm-tab,.codemirror-editor .cm-editor .cm-content .cm-line .cm-whitespace{color:var(--text)}.editor{flex:1;display:flex;flex-direction:column;background-color:var(--card-bg);color:var(--text);min-width:0;height:100%}.editor-header{padding:20px;background-color:var(--card-bg);border-bottom:1px solid var(--card-border)}@media (max-width: 768px){.editor-header{padding:15px}.editor-header h3{font-size:14px}}.editor-header h3{font-size:16px;color:var(--text);margin:0}.editor-header{display:flex;align-items:center;gap:12px}.editor-content{flex:1;overflow:hidden;min-width:0;position:relative;height:100%}.no-note,.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:16px}.no-note p{text-align:center;max-width:300px;line-height:1.5}.offline-indicator{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#e74c3ce6;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;z-index:1000;animation:slideDown .3s ease}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.sync-notification{position:fixed;top:20px;right:20px;background:#000c;color:#fff;border-radius:6px;padding:8px 12px;box-shadow:0 2px 8px #0003;display:flex;align-items:center;z-index:1000;animation:slideInDown .3s ease-out;max-width:280px;font-size:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@keyframes slideInDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.sync-notification.updated{border-left:3px solid var(--accent)}.sync-notification.synced{border-left:3px solid var(--success)}.sync-notification.conflict{border-left:3px solid var(--warning)}.sync-notification.deleted{border-left:3px solid var(--error)}.sync-message{font-size:13px;font-weight:400;color:#fff;line-height:1.3}@media (max-width: 640px){.sync-notification{top:10px;right:10px;left:10px;max-width:none}}.payment-success-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.payment-success-modal{background:var(--panel-bg);color:#fff;border-radius:12px;width:90%;max-width:550px;padding:2rem;position:relative;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;text-align:center}.payment-success-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:var(--font-size-2xl);cursor:pointer;color:var(--muted);padding:.25rem;border-radius:4px;transition:color .2s}.payment-success-close:hover{color:#fff}.payment-success-content h2{margin:1rem 0 .5rem;color:#fff;font-size:var(--font-size-2xl)}.payment-success-content p{color:#e5e7eb;margin-bottom:1.5rem;line-height:var(--line-height-normal)}.payment-success-icon{width:60px;height:60px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:2rem;color:#fff;font-weight:700}.payment-success-error-icon{font-size:3rem;margin-bottom:1rem}.payment-success-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.payment-success-features{margin-bottom:2rem;text-align:left}.feature-item{display:flex;align-items:center;margin-bottom:.75rem;color:#fff}.feature-icon{color:var(--success);margin-right:.75rem;font-weight:700}.payment-success-button{background:var(--accent);color:#fff;border:none;padding:.875rem 2rem;border-radius:6px;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color .2s}.payment-success-button:hover{background:#2176c7}.payment-success-content a{color:var(--success);text-decoration:none;transition:color .2s}.payment-success-content a:hover{color:#2ecc71}.payment-success-content a:visited{color:var(--success)}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}#root{width:100%;height:100vh;margin:0;padding:0}