:root {--bg-color: #f0f4f8;--primary-color: #10b981;--primary-hover: #059669;--secondary-color: #94a3b8;--text-dark: #1e293b;--text-light: #64748b;--surface: #ffffff;--text-on-primary: #ffffff;--danger: #ef4444;--danger-hover: #dc2626;--neo-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;--neo-shadow-hover: 12px 12px 20px #d1d9e6, -12px -12px 20px #ffffff;--neo-shadow-inset: inset 6px 6px 12px #d1d9e6, inset -6px -6px 12px #ffffff;--header-shadow: 0 4px 20px rgba(0,0,0,0.03);--modal-shadow: 0 20px 40px rgba(0,0,0,0.1);--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);--transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);}.theme-dark {--bg-color: #0f172a;--primary-color: #10b981;--primary-hover: #34d399;--secondary-color: #64748b;--text-dark: #f1f5f9;--text-light: #94a3b8;--surface: #1e293b;--text-on-primary: #0f172a;--danger: #f87171;--danger-hover: #ef4444;--neo-shadow: 4px 4px 10px rgba(0,0,0,0.2);--neo-shadow-hover: 6px 6px 15px rgba(0,0,0,0.3);--neo-shadow-inset: inset 0 0 0 1px rgba(148, 163, 184, 0.1);--header-shadow: 0 4px 20px rgba(0,0,0,0.1);--modal-shadow: 0 20px 40px rgba(0,0,0,0.4);}* {box-sizing: border-box;margin: 0;padding: 0;font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;-webkit-tap-highlight-color: transparent;}body {background-color: var(--bg-color);color: var(--text-dark);height: 100vh;display: flex;flex-direction: column;overflow: hidden;transition: background-color var(--transition-smooth), color var(--transition-smooth);}#unsupported-resolution-overlay {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(15, 23, 42, 0.95);backdrop-filter: blur(8px);z-index: 999999;justify-content: center;align-items: center;padding: 20px;text-align: center;}#unsupported-resolution-overlay .unsupported-content {background: var(--surface);padding: 2rem 1.5rem;border-radius: 20px;box-shadow: 0 20px 40px rgba(0,0,0,0.3);width: 100%;max-width: 280px;}#unsupported-resolution-overlay p {color: var(--text-light);font-size: 0.95rem;line-height: 1.6;}@media (max-width: 319.98px) {#unsupported-resolution-overlay {display: flex;}header, #app-body, #custom-modal, #global-loader-overlay {display: none !important;}}.text-truncate {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}header {padding: 1rem 2rem;display: flex;justify-content: space-between;align-items: center;background: var(--surface);box-shadow: var(--header-shadow);z-index: 50;transition: background-color var(--transition-smooth);}.brand {display: flex;align-items: center;gap: 12px;font-size: 1.4rem;font-weight: 800;color: var(--primary-color);cursor: pointer;transition: var(--transition-fast);}.brand:hover {transform: scale(1.02);}.logo-svg {width: 28px;height: 28px;flex-shrink: 0;color: var(--primary-color);filter: drop-shadow(2px 4px 6px rgba(16, 185, 129, 0.3));}.desktop-nav {display: flex;gap: 8px;align-items: center;}.desktop-nav button, .mobile-nav-area button, .theme-toggle-btn {background: transparent;border: none;color: var(--text-dark);font-weight: 600;padding: 0.6rem 1.2rem;cursor: pointer;transition: var(--transition-fast);border-radius: 12px;font-size: 0.95rem;max-width: 250px;display: flex;align-items: center;gap: 8px;}.desktop-nav button:hover, .mobile-nav-area button:hover, .theme-toggle-btn:hover {color: var(--primary-color);background: rgba(16, 185, 129, 0.08);}.theme-toggle-btn {padding: 0.6rem;color: var(--text-light);}.theme-toggle-btn:hover {color: var(--primary-color);}.mobile-menu-btn {display: none;background: transparent;border: none;font-size: 1.5rem;color: var(--text-dark);cursor: pointer;padding: 0.4rem;border-radius: 8px;transition: var(--transition-fast);}.mobile-menu-btn:hover {background: rgba(16, 185, 129, 0.08);color: var(--primary-color);}.btn {background: var(--primary-color);color: var(--text-on-primary);border: none;padding: 14px 24px;border-radius: 14px;font-weight: 600;font-size: 1rem;cursor: pointer;transition: var(--transition-smooth);box-shadow: 4px 4px 10px rgba(16, 185, 129, 0.2);outline: none;display: inline-flex;justify-content: center;align-items: center;gap: 8px;}.btn:hover:not(:disabled) {background: var(--primary-hover);transform: translateY(-2px);box-shadow: 6px 8px 15px rgba(16, 185, 129, 0.3);}.btn:active:not(:disabled) {transform: translateY(1px);box-shadow: 2px 2px 5px rgba(16, 185, 129, 0.2);}.btn:disabled {opacity: 0.7;cursor: not-allowed;}.btn-secondary {background: var(--bg-color);color: var(--text-dark);box-shadow: var(--neo-shadow);}.btn-secondary:hover:not(:disabled) {background: rgba(148, 163, 184, 0.1);color: var(--primary-color);}.btn-danger {background: var(--danger);box-shadow: 4px 4px 10px rgba(239, 68, 68, 0.2);color: white;}.btn-danger:hover:not(:disabled) {background: var(--danger-hover);box-shadow: 6px 8px 15px rgba(239, 68, 68, 0.3);}.input-group {margin-bottom: 1.2rem;text-align: left;}.input-neo {width: 100%;padding: 16px;border: 2px solid transparent;background: var(--bg-color);border-radius: 14px;box-shadow: var(--neo-shadow-inset);outline: none;transition: var(--transition-smooth);color: var(--text-dark);font-size: 1rem;}.input-neo:focus {background: var(--surface);box-shadow: var(--neo-shadow);border-color: rgba(16, 185, 129, 0.1);}.input-neo::placeholder {color: var(--secondary-color);}.form-error {color: var(--danger);font-size: 0.85rem;margin-top: 0.5rem;display: none;font-weight: 500;}.form-error.active {display: block;animation: shake 0.4s ease-in-out;}@keyframes shake {0%, 100% {transform: translateX(0);}25% {transform: translateX(-4px);}75% {transform: translateX(4px);}}#global-loader-overlay {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(15, 23, 42, 0.6);backdrop-filter: blur(2px);z-index: 999999;flex-direction: column;justify-content: center;align-items: center;}#global-loader-overlay.active {display: flex;}.spinner {width: 1.2rem;height: 1.2rem;border: 2.5px solid rgba(255,255,255,0.3);border-radius: 50%;border-top-color: #fff;animation: spin 0.8s linear infinite;margin-left: 10px;}#global-loader-overlay .spinner {width: 3.5rem;height: 3.5rem;border-width: 4px;margin: 0 0 1rem 0;border-color: rgba(16, 185, 129, 0.2);border-top-color: var(--primary-color);}.loader-text {color: white;font-weight: 600;font-size: 1.1rem;letter-spacing: 1px;text-shadow: 0 2px 4px rgba(0,0,0,0.5);}.btn.loading .spinner {display: inline-block;}@keyframes spin {to {transform: rotate(360deg);}}#app-body {flex: 1;display: flex;position: relative;overflow: hidden;}.sidebar-backdrop {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(15, 23, 42, 0.4);backdrop-filter: blur(2px);z-index: 80;opacity: 0;transition: opacity 0.3s ease;}.sidebar-backdrop.active {opacity: 1;display: block;}.sidebar {width: 340px;background: var(--surface);border-right: 1px solid rgba(148, 163, 184, 0.1);display: none;flex-direction: column;z-index: 90;transition: transform 0.3s ease, left 0.3s ease, background-color var(--transition-smooth);}.sidebar-brand-area {display: none;padding: 1.5rem;border-bottom: 1px solid rgba(148, 163, 184, 0.1);align-items: center;gap: 12px;font-size: 1.4rem;font-weight: 800;color: var(--primary-color);}.mobile-nav-area {display: none;padding: 1rem 1.5rem;border-bottom: 1px solid rgba(148, 163, 184, 0.1);flex-direction: column;gap: 8px;}.workspace-tools {display: none;flex: 1;flex-direction: column;overflow: hidden;}.workspace-tools.active {display: flex;}.sidebar-header {padding: 1.5rem;border-bottom: 1px solid rgba(148, 163, 184, 0.1);}.note-list {flex: 1;overflow-y: auto;padding: 1rem;transition: opacity 0.3s ease;}.note-item {padding: 1.2rem;border-radius: 14px;margin-bottom: 0.8rem;cursor: pointer;transition: var(--transition-fast);background: var(--bg-color);border: 2px solid transparent;font-weight: 500;color: var(--text-dark);display: flex;justify-content: space-between;align-items: center;gap: 10px;}.note-item:hover {border-color: rgba(16, 185, 129, 0.3);transform: translateX(4px);}.note-item.active-note {background: var(--primary-color);color: var(--text-on-primary);box-shadow: 4px 4px 12px rgba(16, 185, 129, 0.3);}.note-item-title-wrapper {flex: 1;min-width: 0;}.note-item.double-secured::after {content: '🔒';font-size: 0.9rem;opacity: 0.7;flex-shrink: 0;}#view-container {flex: 1;position: relative;display: flex;flex-direction: column;}.view-section {position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: none;opacity: 0;transition: opacity 0.4s ease, transform 0.4s ease;overflow-y: auto;padding: 2rem;transform: scale(0.98);}.view-section.active {display: flex;opacity: 1;transform: scale(1);}.center-form-container {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;gap: 2rem;}.neo-card {background: var(--surface);padding: 3rem 2.5rem;border-radius: 24px;width: 100%;max-width: 420px;box-shadow: var(--neo-shadow);text-align: center;transition: background-color var(--transition-smooth);}.neo-card h2 {margin-bottom: 2rem;color: var(--primary-color);font-size: 1.8rem;}#view-workspace {padding: 0;overflow: hidden;flex-direction: column;}.editor-area {flex: 1;padding: 2rem 3rem;background: var(--bg-color);display: flex;flex-direction: column;min-width: 0;transition: background-color var(--transition-smooth);}#note-title-display {font-size: 2.2rem;margin-bottom: 1.5rem;border: none;background: transparent;outline: none;font-weight: 800;width: 100%;color: var(--text-dark);transition: var(--transition-fast);}#note-title-display:not(:focus) {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}#note-content-display {flex: 1;border: none;background: var(--surface);border-radius: 20px;padding: 2rem;resize: none;outline: none;box-shadow: var(--neo-shadow);line-height: 1.8;font-size: 1.05rem;transition: var(--transition-smooth);color: var(--text-dark);}.action-bar {margin-top: 1.5rem;display: none;gap: 1rem;flex-wrap: wrap;}#view-intro .neo-card {max-width: 700px;text-align: left;padding: 3rem;}#view-intro h2 {text-align: center;margin-bottom: 2.5rem;}#view-intro h3 {color: var(--primary-color);margin: 2rem 0 1rem 0;font-size: 1.3rem;}#view-intro h3:first-child {margin-top: 0;}#view-intro p {color: var(--text-dark);line-height: 1.7;margin-bottom: 1rem;font-size: 1.05rem;}#view-intro ul {list-style: none;margin-bottom: 1.5rem;}#view-intro li {position: relative;padding-left: 1.5rem;margin-bottom: 0.8rem;color: var(--text-dark);line-height: 1.6;}#view-intro li::before {content: '✦';position: absolute;left: 0;color: var(--primary-color);}.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(15, 23, 42, 0.4);backdrop-filter: blur(4px);display: flex;justify-content: center;align-items: center;z-index: 999;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;}.modal-overlay.active {opacity: 1;pointer-events: auto;}.modal-box {background: var(--surface);padding: 2rem;border-radius: 20px;width: 90%;max-width: 360px;box-shadow: var(--modal-shadow);transform: translateY(20px);transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color var(--transition-smooth);text-align: center;}.modal-overlay.active .modal-box {transform: translateY(0);}.modal-title {font-size: 1.2rem;font-weight: bold;margin-bottom: 1rem;color: var(--text-dark);}.modal-message {color: var(--text-light);margin-bottom: 1.5rem;line-height: 1.5;font-size: 0.95rem;word-wrap: break-word;}.modal-actions {display: flex;gap: 1rem;justify-content: center;}.modal-actions .btn, .modal-actions .btn-secondary {flex: 1;padding: 10px;}.modal-input {margin-bottom: 1.5rem;display: none;}.modal-input.active {display: block;}@media (min-width: 769px) {.sidebar.desktop-active {display: flex;position: static;}}@media (max-width: 768px) {header {padding: 1rem 1.5rem;}.desktop-nav {display: none;}.mobile-menu-btn {display: block;}.neo-card {padding: 2rem 1.5rem;border-radius: 20px;box-shadow: none;background: transparent;}#view-guest-home .center-form-container, #view-login .center-form-container, #view-signup .center-form-container {background: var(--surface);}.view-section {padding: 0;}.sidebar {position: fixed !important;top: 0;left: -100%;height: 100vh;width: 85%;max-width: 320px;display: flex !important;box-shadow: 4px 0 20px rgba(0,0,0,0.1);z-index: 100;}.sidebar.mobile-open {left: 0;}.sidebar-brand-area, .mobile-nav-area {display: flex;}.editor-area {padding: 1.5rem 1rem;}#note-content-display {padding: 1.2rem;box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.1);border-radius: 12px;}#note-title-display {font-size: 1.8rem;margin-bottom: 1rem;padding-left: 0.5rem;}#view-intro .neo-card {padding: 2rem 1.5rem;border-radius: 0;box-shadow: none;}#view-intro .center-form-container {display: block;}}.global-footer {text-align: center;padding: 8px 15px;font-size: 0.85rem;color: var(--text-light);background: var(--surface);border-top: 1px solid rgba(148, 163, 184, 0.1);transition: background-color var(--transition-smooth), color var(--transition-smooth);z-index: 50;}.global-footer a {color: var(--primary-color);text-decoration: none;font-weight: 600;transition: color var(--transition-fast);}.global-footer a:hover {color: var(--primary-hover);text-decoration: underline;}