:root {--primary: #6366f1;--primary-light: #818cf8;--primary-dark: #4f46e5;--secondary: #ec4899;--accent: #06b6d4;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--gradient-1: linear-gradient(135deg, #4c63d2 0%, #5a4f96 100%);--gradient-2: linear-gradient(135deg, #d977a6 0%, #e74c3c 100%);--gradient-3: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);--gradient-4: linear-gradient(135deg, #10b981 0%, #059669 100%);--glass: rgba(255, 255, 255, 0.15);--glass-border: rgba(255, 255, 255, 0.25);--glass-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);--shadow-soft: 0 1px 8px rgba(0, 0, 0, 0.08);--shadow-medium: 0 2px 12px rgba(0, 0, 0, 0.12);--shadow-strong: 0 4px 20px rgba(0, 0, 0, 0.15);--radius-sm: 4px;--radius: 6px;--radius-lg: 8px;--radius-xl: 10px;--radius-2xl: 12px;--space-1: 0.125rem;--space-2: 0.25rem;--space-3: 0.375rem;--space-4: 0.5rem;--space-5: 0.75rem;--space-6: 1rem;--space-8: 1.25rem;--space-10: 1.5rem;--space-12: 2rem;--bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);--smooth: cubic-bezier(0.4, 0, 0.2, 1);--spring: cubic-bezier(0.175, 0.885, 0.32, 1.275)} * {margin: 0;padding: 0;box-sizing: border-box} html {font-size: 16px;scroll-behavior: smooth} body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;font-size: 0.875rem;line-height: 1.6;color: white;background: var(--gradient-1);min-height: 100vh;overflow-x: hidden;position: relative;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)} body::before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle at 20% 80%, rgba(76, 99, 210, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(217, 119, 166, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.15) 0%, transparent 50%);animation: backgroundFloat 20s ease-in-out infinite;z-index: -1} @keyframes backgroundFloat {0%, 100% {transform: translateX(0) translateY(0) rotate(0deg);opacity: 1} 33% {transform: translateX(-30px) translateY(-20px) rotate(1deg);opacity: 0.8} 66% {transform: translateX(20px) translateY(10px) rotate(-1deg);opacity: 0.9} } body::after {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-image: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.15), transparent), radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.1), transparent), radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.2), transparent), radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.15), transparent), radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.1), transparent);background-repeat: repeat;background-size: 200px 100px;animation: particleFloat 15s linear infinite;z-index: -1} @keyframes particleFloat {0% {transform: translateY(0px)} 100% {transform: translateY(-100px)} } .container {max-width: 1200px;margin: 0 auto;padding: var(--space-4)} .header {background: var(--glass);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--radius-lg);margin: var(--space-2);padding: var(--space-3) var(--space-4);display: flex;align-items: center;justify-content: space-between;box-shadow: var(--glass-shadow);position: sticky;top: var(--space-2);z-index: 100;animation: headerSlideDown 0.6s var(--bounce)} @keyframes headerSlideDown {from {transform: translateY(-100px);opacity: 0} to {transform: translateY(0);opacity: 1} } .header-left {display: flex;align-items: center;gap: var(--space-4)} .header-right {display: flex;align-items: center;gap: var(--space-2)} .logo {font-size: 1.5rem;font-weight: 800;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)} .btn {display: inline-flex;align-items: center;justify-content: center;gap: var(--space-1);padding: var(--space-2) var(--space-3);border: none;border-radius: var(--radius);font-size: 0.875rem;font-weight: 600;cursor: pointer;transition: all 0.3s var(--smooth);text-decoration: none;white-space: nowrap;position: relative;overflow: hidden;transform: translateY(0)} .btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left 0.5s var(--smooth)} .btn:hover::before {left: 100%} .btn:hover {transform: translateY(-2px)} .btn:active {transform: translateY(0)} .btn-primary {background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);color: white;box-shadow: var(--shadow-soft)} .btn-primary:hover {box-shadow: var(--shadow-medium)} .btn-secondary {background: var(--glass);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);color: white} .btn-secondary:hover {background: rgba(255, 255, 255, 0.2)} .btn-danger {background: linear-gradient(135deg, var(--error) 0%, #f87171 100%);color: white;box-shadow: var(--shadow-soft)} .btn-danger:hover {box-shadow: var(--shadow-medium)} .btn-sm {padding: var(--space-2) var(--space-3);font-size: 0.75rem} .btn-icon {padding: var(--space-2);background: var(--glass);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);color: white;border-radius: var(--radius)} .btn-icon:hover {background: rgba(255, 255, 255, 0.2);transform: scale(1.1)} .form-group {margin-bottom: var(--space-3)} .form-group label {display: block;margin-bottom: var(--space-2);font-weight: 600;color: white;font-size: 0.875rem;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5)} .input, input, textarea, select {width: 100%;padding: var(--space-3) var(--space-4);border: 1px solid var(--glass-border);border-radius: var(--radius);font-size: 0.875rem;background: var(--glass);backdrop-filter: blur(15px);color: white;transition: all 0.3s var(--smooth);position: relative;font-family: inherit} .input::placeholder, input::placeholder, textarea::placeholder {color: rgba(255, 255, 255, 0.7);font-weight: 400} .input:focus, input:focus, textarea:focus, select:focus {outline: none;border-color: var(--primary-light);box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);background: rgba(255, 255, 255, 0.2);transform: translateY(-1px)} select {cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right var(--space-3) center;background-size: 16px;padding-right: var(--space-8)} select option {background: rgba(0, 0, 0, 0.8);color: white;padding: var(--space-2)} input[type="checkbox"] {appearance: none;width: 20px;height: 20px;border: 2px solid var(--glass-border);border-radius: var(--radius-sm);background: var(--glass);backdrop-filter: blur(10px);cursor: pointer;position: relative;transition: all 0.3s var(--smooth);margin-right: var(--space-3)} input[type="checkbox"]:checked {background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);border-color: var(--primary-light);box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2)} input[type="checkbox"]:checked::after {content: '✓';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;font-size: 12px;font-weight: bold} input[type="checkbox"]:hover {border-color: var(--primary-light);transform: scale(1.05)} .form-group label {display: flex;align-items: center;cursor: pointer;color: white;font-weight: 500;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)} input#access-token, input#git-token {background: var(--glass) !important;backdrop-filter: blur(20px) !important;border: 1px solid var(--glass-border) !important;border-radius: var(--radius-lg) !important;padding: var(--space-4) var(--space-5) !important;font-size: 1rem !important;font-weight: 500 !important;letter-spacing: 0.5px !important;color: white !important;box-shadow: var(--glass-shadow) !important;transition: all 0.3s var(--smooth) !important;position: relative !important;overflow: hidden !important;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important} input#access-token::before, input#git-token::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);transition: left 0.6s var(--smooth)} input#access-token:focus, input#git-token:focus {border-color: var(--primary-light) !important;box-shadow: var(--glass-shadow), 0 0 0 3px rgba(99, 102, 241, 0.2) !important;transform: translateY(-3px) !important;background: rgba(255, 255, 255, 0.2) !important} input#access-token:focus::before, input#git-token:focus::before {left: 100%} input#access-token::placeholder, input#git-token::placeholder {color: rgba(255, 255, 255, 0.8) !important;font-weight: 400 !important;letter-spacing: normal !important;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important} .card {background: var(--glass);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--radius-xl);box-shadow: var(--glass-shadow);overflow: hidden;transition: all 0.3s var(--smooth)} .card:hover {transform: translateY(-2px);box-shadow: var(--shadow-strong)} .card-header {padding: var(--space-5);border-bottom: 1px solid var(--glass-border);background: rgba(255, 255, 255, 0.05)} .card-body {padding: var(--space-5)} .modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(8px);display: flex;align-items: center;justify-content: center;z-index: 1000;animation: modalFadeIn 0.3s var(--smooth);padding: var(--space-4);box-sizing: border-box} #settings-modal {z-index: 1000} #add-account-modal {z-index: 1100} #account-switcher {z-index: 1200} #confirm-modal {z-index: 1300} @keyframes modalFadeIn {from {opacity: 0;backdrop-filter: blur(0px)} to {opacity: 1;backdrop-filter: blur(8px)} } .modal-content {background: var(--glass);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--radius-2xl);box-shadow: var(--glass-shadow);max-width: 500px;width: 100%;max-height: calc(100vh - 2rem);overflow: hidden;position: relative;animation: modalSlideIn 0.4s var(--bounce);cursor: grab;will-change: transform;transition: transform 0.1s ease-out;margin: auto} @keyframes modalSlideIn {from {opacity: 0;transform: translateY(-20px) scale(0.95)} to {opacity: 1;transform: translateY(0) scale(1)} } .modal-content:active {cursor: grabbing} .modal-header {padding: var(--space-5);border-bottom: 1px solid var(--glass-border);display: flex;align-items: center;justify-content: space-between;background: rgba(255, 255, 255, 0.05);cursor: grab;user-select: none;touch-action: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none} .modal-header:active {cursor: grabbing} .modal-header h3 {font-size: 1.25rem;font-weight: 700;color: white} .modal-body {padding: var(--space-5);max-height: 60vh;overflow-y: auto} .modal-actions {padding: var(--space-5);border-top: 1px solid var(--glass-border);display: flex;gap: var(--space-3);justify-content: flex-end;background: rgba(255, 255, 255, 0.05)} .settings-tabs {display: flex;border-bottom: 1px solid var(--glass-border);margin-bottom: var(--space-5);background: rgba(255, 255, 255, 0.05);border-radius: var(--radius) var(--radius) 0 0} .tab-btn {flex: 1;padding: var(--space-3) var(--space-4);border: none;background: transparent;color: white;cursor: pointer;border-bottom: 2px solid transparent;transition: all 0.3s var(--smooth);font-size: 0.875rem;font-weight: 500;position: relative;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)} .tab-btn::before {content: '';position: absolute;bottom: 0;left: 50%;width: 0;height: 2px;background: var(--primary-light);transition: all 0.3s var(--smooth);transform: translateX(-50%)} .tab-btn:hover {color: white;background: rgba(255, 255, 255, 0.15);text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)} .tab-btn.active {color: var(--primary-light);background: rgba(99, 102, 241, 0.15);text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)} .tab-btn.active::before {width: 80%} .tab-content {display: none} .tab-content.active {display: block;animation: tabFadeIn 0.3s var(--smooth)} .tab-content h4 {color: white;font-size: 1.1rem;font-weight: 600;margin-bottom: var(--space-4);text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);display: flex;justify-content: space-between;align-items: center} .account-management {margin-top: 10px} .account-item {display: flex;justify-content: space-between;align-items: center;padding: var(--space-3) var(--space-4);margin-bottom: var(--space-2);background: var(--glass);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);border-radius: var(--radius);transition: all 0.3s var(--smooth)} .account-item:hover {background: rgba(255, 255, 255, 0.15);transform: translateY(-1px)} .account-info {flex: 1;color: white} .account-name {font-weight: 600;margin-bottom: var(--space-1)} .account-details {font-size: 0.75rem;color: rgba(255, 255, 255, 0.7)} .account-actions {display: flex;gap: var(--space-2);justify-content: flex-end;margin-top: var(--space-2)} #account-switcher .account-item {display: flex;align-items: center;justify-content: space-between;padding: var(--space-4);background: var(--glass);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);border-radius: var(--radius);margin-bottom: var(--space-3)} #account-switcher .account-info {display: flex;align-items: center;gap: var(--space-3);flex: 1} #account-switcher .account-actions {margin-top: 0;flex-shrink: 0} .tab-content h5 {color: white;font-size: 1rem;font-weight: 600;margin-bottom: var(--space-3);text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)} #settings-refresh-cache-btn {margin-bottom: var(--space-3);opacity: 0.9;transition: all 0.3s var(--smooth)} #settings-refresh-cache-btn:hover {opacity: 1;transform: translateY(-1px)} @keyframes tabFadeIn {from {opacity: 0;transform: translateY(10px)} to {opacity: 1;transform: translateY(0)} } .platform-selector {margin-bottom: var(--space-6)} .platform-selector h3 {color: white;font-size: 1.1rem;font-weight: 600;margin-bottom: var(--space-4);text-align: center} .platform-options {display: flex;gap: var(--space-4);margin-bottom: var(--space-5);align-items: stretch;justify-content: center} .platform-option {position: relative;flex: 1;max-width: 200px;display: flex;height: 100px;align-items: stretch} .platform-option input[type="radio"] {display: none} .platform-card {padding: var(--space-4);border: 1px solid var(--glass-border);border-radius: var(--radius-lg);text-align: center;transition: all 0.3s var(--smooth);background: var(--glass);backdrop-filter: blur(10px);cursor: pointer;position: relative;overflow: hidden;width: 100%;min-height: 100px;height: 100px;display: flex;flex-direction: column;justify-content: center;align-items: center;box-sizing: border-box} .platform-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);opacity: 0;transition: opacity 0.3s var(--smooth)} .platform-option input[type="radio"]:checked + .platform-card::before {opacity: 0.1} .platform-option input[type="radio"]:checked + .platform-card {border-color: var(--primary-light);transform: translateY(-3px) scale(1.02);box-shadow: var(--shadow-medium)} .platform-card:hover {transform: translateY(-2px);box-shadow: var(--shadow-soft)} .platform-icon {width: 32px;height: 32px;margin: 0 auto var(--space-2);position: relative;z-index: 1} .platform-card span {display: block;font-weight: 600;color: white;position: relative;z-index: 1} .main-app {min-height: 100vh;display: flex;flex-direction: column;background: var(--gradient-1);position: relative} .app-header {background: var(--glass);backdrop-filter: blur(20px);border-bottom: 1px solid var(--glass-border);padding: var(--space-4) var(--space-6);display: flex;align-items: center;justify-content: space-between;box-shadow: var(--glass-shadow);position: sticky;top: 0;z-index: 100} .header-left {display: flex;align-items: center;gap: var(--space-4)} .header-center {flex: 1;display: flex;justify-content: center} .header-right {display: flex;align-items: center;gap: var(--space-2)} .app-title {font-size: 1.5rem;font-weight: 800;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);color: white} .current-account {display: flex;align-items: center;gap: var(--space-2);color: white;font-weight: 500} .app-content {flex: 1;display: flex;min-height: 0} .sidebar {width: 300px;background: var(--glass);backdrop-filter: blur(20px);border-right: 1px solid var(--glass-border);display: flex;flex-direction: column;box-shadow: var(--glass-shadow);transition: all 0.3s var(--smooth);flex-shrink: 0} .sidebar.hidden {transform: translateX(-100%);width: 0;border-right: none} .sidebar-header {padding: var(--space-4);border-bottom: 1px solid var(--glass-border);background: rgba(255, 255, 255, 0.05)} .sidebar-content {flex: 1;display: flex;flex-direction: column;overflow: hidden} .search-box {padding: var(--space-4);border-bottom: 1px solid var(--glass-border)} .search-box input {width: 100%;padding: var(--space-3) var(--space-4);border: 1px solid var(--glass-border);border-radius: var(--radius);background: var(--glass);backdrop-filter: blur(10px);color: white;font-size: 0.875rem} .search-box input::placeholder {color: rgba(255, 255, 255, 0.7)} .note-list {flex: 1;overflow-y: auto;padding: var(--space-2)} .note-item {padding: var(--space-3) var(--space-4);margin-bottom: var(--space-2);background: var(--glass);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);border-radius: var(--radius);cursor: pointer;transition: all 0.3s var(--smooth);color: white} .note-item:hover {background: rgba(255, 255, 255, 0.15);transform: translateY(-1px)} .note-item.decrypt-failed {border-left: 4px solid #ef4444;background: rgba(239, 68, 68, 0.1);opacity: 0.8} .note-item.decrypt-failed:hover {background: rgba(239, 68, 68, 0.15)} .note-item.decrypt-failed .note-item-title {color: #ef4444;font-weight: 600} .note-item.decrypt-failed .note-item-preview {color: #fca5a5;font-style: italic} .note-item.active {background: rgba(99, 102, 241, 0.2);border-color: var(--primary-light)} .note-item-title {font-weight: 600;margin-bottom: var(--space-1);color: white} .note-item-preview {font-size: 0.75rem;color: rgba(255, 255, 255, 0.7);overflow: hidden;text-overflow: ellipsis;white-space: nowrap} .main-content {flex: 1;display: flex;flex-direction: column;background: var(--glass);backdrop-filter: blur(20px);margin: var(--space-4);border-radius: var(--radius-xl);box-shadow: var(--glass-shadow);overflow: hidden;transition: all 0.3s var(--smooth);min-width: 0} .editor-container {flex: 1;display: flex;flex-direction: column;padding: var(--space-6)} .editor-header {display: flex;align-items: center;gap: var(--space-4);margin-bottom: var(--space-4);padding-bottom: var(--space-4);border-bottom: 1px solid var(--glass-border)} .note-title-input {flex: 1;padding: var(--space-3) var(--space-4);border: 1px solid var(--glass-border);border-radius: var(--radius);background: var(--glass);backdrop-filter: blur(10px);color: white;font-size: 1.25rem;font-weight: 600} .note-title-input::placeholder {color: rgba(255, 255, 255, 0.7)} .editor-actions {display: flex;gap: var(--space-2)} .editor-content {flex: 1;display: flex;flex-direction: column;position: relative} .note-content-textarea {flex: 1;padding: var(--space-4);padding-bottom: 150px !important;border: 1px solid var(--glass-border);border-radius: var(--radius);background: var(--glass);backdrop-filter: blur(10px);color: white;font-size: 1rem;line-height: 1.6;resize: none;font-family: inherit;max-height: calc(100vh - 120px);overflow-y: auto;position: relative;min-height: 200px;box-sizing: border-box !important} textarea.note-content-textarea, .note-content-textarea, #note-content {padding-bottom: 150px !important;box-sizing: border-box !important} .note-content-textarea::placeholder {color: rgba(255, 255, 255, 0.7)} .word-count {position: absolute;bottom: 6px;right: 8px;font-size: 0.7rem;color: rgba(255, 255, 255, 0.5);background: rgba(0, 0, 0, 0.2);padding: 1px 4px;border-radius: 3px;backdrop-filter: blur(3px);pointer-events: none;z-index: 10;opacity: 0.8;transition: opacity 0.2s ease} .word-count {opacity: 0} .app-title-full {display: block} .app-title-short {display: none} @media (max-width: 768px) {.app-title-full {display: none} .app-title-short {display: block} } .login-screen {min-height: 100vh;display: flex;flex-direction: column;position: relative} .login-top {text-align: center;padding: var(--space-6) var(--space-4) var(--space-4);background: var(--glass);backdrop-filter: blur(20px);border-bottom: 1px solid var(--glass-border)} .login-logo {font-size: 2.5rem;font-weight: 700;color: white;margin: 0 0 var(--space-2);text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)} .login-subtitle {color: rgba(255, 255, 255, 0.8);font-size: 1rem;margin: 0;font-weight: 400} .login-container {flex: 1;display: flex;align-items: center;justify-content: center;padding: var(--space-4);position: relative} .login-card {background: var(--glass);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--radius-2xl);box-shadow: var(--glass-shadow);padding: var(--space-8);width: 100%;max-width: 400px;position: relative;z-index: 1;animation: cardFloat 0.6s var(--bounce)} .login-actions {display: flex;gap: var(--space-3);align-items: center;justify-content: space-between;margin-top: var(--space-6)} .login-actions .btn-primary {flex: 1} @keyframes cardFloat {from {opacity: 0;transform: translateY(50px) scale(0.9)} to {opacity: 1;transform: translateY(0) scale(1)} } .login-header {text-align: center;margin-bottom: var(--space-6)} .login-header h1 {font-size: 2.5rem;font-weight: 900;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: var(--space-2);animation: titleGlow 2s ease-in-out infinite alternate} @keyframes titleGlow {from {filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.3))} to {filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6))} } .login-header p {color: rgba(255, 255, 255, 0.8);font-size: 1rem;font-weight: 500;margin-bottom: var(--space-4)} .login-header #refresh-cache-btn {margin-top: var(--space-2);opacity: 0.8;transition: all 0.3s var(--smooth)} .login-header #refresh-cache-btn:hover {opacity: 1;transform: translateY(-1px)} .help-text {background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);border-radius: var(--radius);padding: var(--space-4);margin-top: var(--space-3);font-size: 0.75rem;color: white;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);animation: helpSlideIn 0.3s var(--smooth)} @keyframes helpSlideIn {from {opacity: 0;transform: translateY(10px)} to {opacity: 1;transform: translateY(0)} } .help-text p {margin-bottom: var(--space-2);font-weight: 600;color: white;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)} .help-text ul {list-style: none;padding-left: 0} .help-text li {margin-bottom: var(--space-1);padding-left: var(--space-4);position: relative;color: white;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)} .help-text li::before {content: "✨";position: absolute;left: 0;font-size: 0.8em} .notifications {position: fixed;top: var(--space-4);right: var(--space-4);z-index: 2000} .notification {padding: var(--space-3) var(--space-4);border-radius: var(--radius);margin-bottom: var(--space-2);box-shadow: var(--shadow-medium);animation: notificationSlideIn 0.4s var(--bounce);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);position: relative;overflow: hidden} @keyframes notificationSlideIn {from {transform: translateX(100%) scale(0.8);opacity: 0} to {transform: translateX(0) scale(1);opacity: 1} } .notification::before {content: '';position: absolute;top: 0;left: 0;width: 4px;height: 100%;background: currentColor} .notification.success {background: linear-gradient(135deg, var(--success) 0%, #34d399 100%);color: white} .notification.error {background: linear-gradient(135deg, var(--error) 0%, #f87171 100%);color: white} .notification.info {background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);color: white} ::-webkit-scrollbar {width: 8px} ::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.1);border-radius: 4px} ::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.3);border-radius: 4px;transition: background 0.3s var(--smooth)} ::-webkit-scrollbar-thumb:hover {background: rgba(255, 255, 255, 0.5)} @media (max-width: 768px) {.header {margin: var(--space-2);padding: var(--space-3) var(--space-4)} .modal {padding: var(--space-2)} .modal-content {width: 100%;max-height: calc(100vh - 1rem)} .platform-options {flex-direction: row;gap: var(--space-3);justify-content: center} .login-top {padding: var(--space-4) var(--space-3) var(--space-3)} .login-logo {font-size: 2rem} .login-subtitle {font-size: 0.9rem} .login-card {padding: var(--space-6);margin: var(--space-2);max-width: calc(100vw - var(--space-2));width: 100%} .login-actions {flex-direction: column;gap: var(--space-4)} .login-actions .btn-primary {width: 100%} .platform-card {padding: var(--space-4);height: 60px;min-width: 150px;max-width: 200px} .platform-icon {width: 28px;height: 28px} .input, input, textarea, select {font-size: 1rem;padding: var(--space-4) var(--space-5)} .help-text {font-size: 0.9rem;line-height: 1.5} .help-text ul {padding-left: var(--space-4)} } @media (max-width: 480px) {.login-top {padding: var(--space-3) var(--space-2) var(--space-2)} .login-logo {font-size: 1.5rem} .login-subtitle {font-size: 0.8rem} .login-container {padding: var(--space-2)} .login-card {padding: var(--space-4);margin: var(--space-1);max-width: calc(100vw - var(--space-1));width: 100%} .platform-card {padding: var(--space-3);height: 50px;min-width: 120px;max-width: 180px} .platform-icon {width: 24px;height: 24px} .input, input, textarea, select {font-size: 0.95rem;padding: var(--space-3) var(--space-4)} .help-text {font-size: 0.85rem;line-height: 1.4} .help-text ul {padding-left: var(--space-3)} .app-header {padding: var(--space-3) var(--space-4)} .app-title {font-size: 1.25rem} .sidebar {width: 280px;max-width: 80vw;position: fixed;top: 0;left: -280px;height: 100vh;z-index: 200;transition: left 0.3s var(--smooth);box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1)} .sidebar.open {left: 0} .sidebar-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 199;opacity: 0;visibility: hidden;transition: all 0.3s var(--smooth)} .sidebar-overlay.active {opacity: 1;visibility: visible} .main-content {margin: var(--space-2);border-radius: var(--radius-lg)} .editor-container {padding: var(--space-4)} .editor-header {flex-direction: row;align-items: center;gap: var(--space-3)} .note-title-input {flex: 1;min-width: 0} .editor-actions {flex-shrink: 0;gap: var(--space-2)} .editor-actions .btn {padding: var(--space-2) var(--space-3);font-size: 0.875rem} } @media (prefers-color-scheme: dark) {:root {--glass: rgba(0, 0, 0, 0.2);--glass-border: rgba(255, 255, 255, 0.1)} } @keyframes pulse {0%, 100% {opacity: 1} 50% {opacity: 0.5} } .loading {animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite} .btn, .card, .platform-card, .modal-content {transition: all 0.3s var(--smooth)} .btn:hover, .card:hover, .platform-card:hover {transform: translateY(-2px)} #settings-refresh-cache-btn, #install-pwa-settings-btn {height: 40px;min-height: 40px;padding: var(--space-2) var(--space-4);font-size: 0.875rem;line-height: 1} *:focus {outline: none} input:focus, button:focus, .btn:focus {box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2)}