.button{padding:var(--spacing-md) var(--spacing-lg);border-radius:.75rem;border:none;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a;text-transform:uppercase;letter-spacing:.05em;font-size:inherit;z-index:1;pointer-events:auto}.button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.button.primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff}.button.primary:hover:not(:disabled){box-shadow:0 6px 8px #0003;transform:translateY(-2px)}.button.secondary{background-color:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.button.secondary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;box-shadow:0 6px 8px #0003;transform:translateY(-2px)}.button-content{display:flex;align-items:center;gap:.5rem;pointer-events:none}.navbar{position:fixed;bottom:0;left:0;right:0;background-color:#fff;border-top:1px solid var(--color-neutral-200)}.navbar-container{max-width:500px;margin:0 auto;padding:0 var(--spacing-md);height:5rem}.navbar-content{display:flex;justify-content:space-between;align-items:flex-end;height:100%;padding-bottom:var(--spacing-xs)}.nav-button{display:flex;flex-direction:column;align-items:center;width:4rem;transition:all .3s ease;border:none;background:none;cursor:pointer;outline:none}.nav-button:focus-visible{outline:none}.nav-icon-container{position:relative;height:3rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease;color:var(--color-neutral-600)}.nav-icon-active{color:var(--color-primary)}.nav-icon-add{width:4rem;height:4rem;border-radius:50%;background-color:var(--color-success);color:#fff;position:absolute;top:-.5rem;box-shadow:0 2px 4px #0000001a}.nav-icon-add.nav-icon-active{background-color:var(--color-primary)}.icon-normal{width:2rem;height:2rem}.icon-large{width:3rem;height:3rem}.nav-label{font-size:1rem;font-weight:700;color:var(--color-neutral-600);transition:all .3s ease}.nav-label-active{color:var(--color-primary);font-weight:900}[data-theme=dark] .navbar{background-color:var(--color-background-dark);border-top-color:var(--color-neutral-800)}[data-theme=dark] .nav-icon-container,[data-theme=dark] .nav-label{color:var(--color-neutral-400)}[data-theme=dark] .nav-icon-active,[data-theme=dark] .nav-label-active{color:var(--color-primary-300)}.app-header{padding:var(--spacing-md) 0;margin-bottom:var(--spacing-xsm);text-align:center}.header-content{display:inline-flex;align-items:center;gap:var(--spacing-md)}.header-content svg{width:64px;height:64px}.header-content h1,.header-content h2,.header-content h3,.header-content h4,.header-content h5,.header-content h6{margin:0;line-height:1}.form-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--navbar-height) + 2rem);z-index:1000}.form-container{background:var(--color-background);width:90%;max-width:500px;padding:1.5rem;border-radius:16px 16px 0 0;box-shadow:0 -2px 10px #0000001a}.camera-container{width:100%;max-height:300px;aspect-ratio:4/3;position:relative;background:#000;border-radius:8px;overflow:hidden;margin:1rem 0}.camera-preview{width:100%;height:100%;object-fit:cover}.manual-entry-button{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);padding:.5rem 1.5rem;background:#fff;border:none;border-radius:20px;font-size:.9rem;box-shadow:0 2px 4px #0003}.form-group label{display:block;margin-bottom:.5rem;color:var(--color-text);font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid var(--color-border);border-radius:8px;font-size:1rem}.barcode-input-group{display:flex;gap:.5rem}.barcode-input-group input{flex:1}.form-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:1.5rem}.cancel-button,.scan-button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.9rem;cursor:pointer}.cancel-button{background:var(--color-background-alt);color:var(--color-text)}.scan-button,.submit-button{background:var(--color-primary);color:#fff}.font-size-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#fff3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:999;pointer-events:none}.font-size-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-neutral-50);border:1px solid var(--color-neutral-300);border-radius:8px;padding:var(--spacing-lg);width:90%;max-width:400px;box-shadow:0 4px 20px #00000026;z-index:1000;pointer-events:auto}[data-theme=dark] .font-size-popup{background:#333;border-color:#555;box-shadow:0 8px 32px #00000080}.font-size-option{display:flex;align-items:center;gap:10px;padding:10px;cursor:pointer;transition:background-color .2s;border-radius:4px;margin-bottom:5px}.font-size-option:hover{background-color:#f0f0f0;transform:translate(4px)}[data-theme=dark] .font-size-option:hover{background-color:#444}.font-size-option input[type=radio]{width:20px;height:20px;accent-color:#007bff}.font-size-option label{color:#333;cursor:pointer;flex-grow:1;padding:5px 0}[data-theme=dark] .font-size-option label{color:#fff}.font-size-container{display:flex;flex-direction:column;gap:15px}.font-size-header{font-weight:500;color:#333}[data-theme=dark] .font-size-header{color:#fff}.font-size-controls{display:flex;align-items:center;gap:15px}.font-size-button{background:#fff;border:1px solid #ddd;border-radius:4px;padding:5px 10px;font-family:inherit;cursor:pointer;color:#333;min-width:3rem;text-align:center;transition:all .2s ease}[data-theme=dark] .font-size-button{background:#444;border-color:#555;color:#fff}.font-size-button:hover{border-color:#007bff}.font-size-slider{flex-grow:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ccc;border-radius:2px;outline:none}[data-theme=dark] .font-size-slider{background:#555}.font-size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#007bff;cursor:pointer;transition:transform .2s}.font-size-slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#007bff;cursor:pointer;transition:transform .2s}.font-size-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.font-size-slider::-moz-range-thumb:hover{transform:scale(1.1)}@media (max-width: 480px){.font-size-popup{width:95%;padding:15px}.font-size-option{padding:8px}}.theme-switch-container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-md)}.theme-switch-label{color:var(--color-text);font-family:system-ui,-apple-system,sans-serif;white-space:nowrap}[data-theme=dark] .theme-switch-label{color:#fff}.switch{position:relative;display:inline-block;width:64px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-primary-300);transition:.4s;border-radius:30px}.slider:before{position:absolute;content:"";height:30px;width:30px;border-radius:20px;left:2px;bottom:2px;z-index:2;background-color:#fff;transition:.4s}.sun svg{position:absolute;top:6px;left:36px;z-index:1;width:24px;height:24px}.moon svg{fill:var(--color-primary-300);position:absolute;top:5px;left:5px;z-index:1;width:24px;height:24px}.sun svg{animation:rotate 15s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.moon svg{animation:tilt 5s linear infinite}@keyframes tilt{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}to{transform:rotate(0)}}.input:checked+.slider{background-color:var(--color-primary-800)}.input:focus+.slider{box-shadow:0 0 2px var(--color-primary-700)}.input:checked+.slider:before{transform:translate(30px)}.onboarding-container{min-height:100vh;display:flex;flex-direction:column;padding:var(--spacing-md);background-color:var(--color-background);transition:background-color .3s ease}.onboarding-header{padding:var(--spacing-md) 0;margin-bottom:var(--spacing-lg)}.onboarding-header h1{text-align:center}.onboarding-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:600px;margin:0 auto;width:100%}[data-theme=dark] .onboarding-container{background-color:var(--color-background-dark);color:var(--color-neutral-100)}.feature-slider{position:relative;padding:var(--spacing-xl);background:var(--color-neutral-50);border-radius:1rem;box-shadow:0 4px 6px -1px #0000001a}[data-theme=dark] .feature-slider{background:var(--color-neutral-900);box-shadow:0 4px 6px -1px #0003}.slider-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--spacing-xl) 0;transition:opacity .3s ease}.slider-content.animating{opacity:0}.feature-icon{font-size:3rem;margin-bottom:var(--spacing-md);color:var(--color-primary)}[data-theme=dark] .feature-icon{color:var(--color-primary-300)}.slider-button{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.5rem;cursor:pointer;padding:var(--spacing-sm);color:var(--color-text);opacity:.6;transition:opacity .3s ease}[data-theme=dark] .slider-button{color:var(--color-neutral-100)}.slider-button:hover:not(:disabled){opacity:1}.slider-button:disabled{cursor:not-allowed;opacity:.3}.slider-button:first-child{left:var(--spacing-md)}.slider-button:last-of-type{right:var(--spacing-md)}.slider-dots{position:absolute;bottom:var(--spacing-md);left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-sm)}.slider-dot{width:8px;height:8px;border-radius:50%;background:var(--color-neutral-400);border:none;padding:0;cursor:pointer;transition:all .3s ease}[data-theme=dark] .slider-dot{background:var(--color-neutral-600)}.slider-dot.active{background:var(--color-primary);transform:scale(1.2)}[data-theme=dark] .slider-dot.active{background:var(--color-primary-300)}.onboarding-settings{width:100%}.settings-description{display:flex;flex-direction:column;gap:var(--spacing-md)}.settings-description h2{text-align:left;color:var(--color-text);margin-bottom:var(--spacing-sm)}.settings-description p{text-align:left;color:var(--color-text-light);line-height:1.5;margin-bottom:var(--spacing-lg)}[data-theme=dark] .settings-description h2{color:var(--color-neutral-100)}[data-theme=dark] .settings-description p{color:var(--color-neutral-300)}.settings-controls{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-md);background:var(--color-neutral-50);border-radius:1rem}[data-theme=dark] .settings-controls{background:var(--color-neutral-900)}.onboarding-nav{margin-top:auto;padding:var(--spacing-md) 0;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);width:100%}.continue-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);width:fit-content;align-self:center}.continue-arrow{margin-left:var(--spacing-xs);transition:transform .3s ease}.continue-button:hover .continue-arrow{transform:translate(4px)}.auth-container{min-height:100vh;display:flex;flex-direction:column;padding:var(--spacing-md);background-color:var(--color-background);overflow:hidden}.auth-content{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);width:100%;max-width:600px;margin:0 auto;padding:var(--spacing-xl) var(--spacing-md);color:var(--color-text)}.auth-message{max-width:400px;text-align:center}.auth-message h2{margin-bottom:var(--spacing-md);font-size:1.5em;color:var(--color-text)}.auth-message p{line-height:1.6;color:var(--color-text-light)}.auth-buttons{display:flex;flex-direction:column;gap:var(--spacing-lg);width:100%;max-width:300px}.divider{position:relative;text-align:center;margin:var(--spacing-sm) 0}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:calc(50% - 2rem);height:1px;background-color:var(--color-neutral-300)}.divider:before{left:0}.divider:after{right:0}.divider span{padding:0 var(--spacing-sm);font-size:.9em;color:var(--color-text-light);background-color:var(--color-background)}[data-theme=dark] .divider:before,[data-theme=dark] .divider:after{background-color:var(--color-neutral-600)}[data-theme=dark] .divider span{background-color:var(--color-background-dark);color:var(--color-neutral-300)}.zoom-camera{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;display:flex;align-items:center;justify-content:center}.camera-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.camera-view{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.camera{width:100vw;height:100vh;max-width:none;max-height:none;object-fit:cover}.zoom-camera.landscape .camera{width:100%;height:auto}.zoom-camera.portrait .camera{width:auto;height:100%}.camera-controls{position:absolute;bottom:0;left:0;right:0;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#000000bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10}.camera-button{background:none;border:none;padding:16px;height:56px;width:56px;cursor:pointer;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.camera-button:hover{background-color:#ffffff1a}.zoom-slider{-webkit-appearance:none;width:80%;height:8px;border-radius:4px;background:#fff3;outline:none;margin:0 20px}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0003;cursor:pointer}@media (max-width: 768px){.camera-controls{height:70px;padding:0 16px}.zoom-slider{width:70%}.camera-button{padding:12px;height:48px;width:48px}}.card-detail-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.card-detail-container{position:relative;background:#fff;padding:20px;border-radius:10px;text-align:center;width:90%;max-width:500px;height:90vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.barcode-container{display:flex;justify-content:center;margin:20px 0}.barcode-image{max-height:40vh;max-width:100%;transform:rotate(90deg);display:block;margin:0 auto;object-fit:scale-down}.barcode-number{font-size:24px;font-weight:700;letter-spacing:2px}.close-button{position:absolute;top:10px;right:10px;background:#e74c3c;color:#fff;border:none;padding:10px 20px;border-radius:10px;cursor:pointer;font-size:18px}.close-button:hover{background:#c0392b}.card-icon{margin-right:8px}.cards-page{padding:1rem;height:calc(100vh - var(--navbar-height));overflow-y:auto}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;padding-bottom:80px}.card-item{background-color:var(--color-background);padding:1rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;cursor:pointer;transition:all .2s ease}.card-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.card-icon{color:var(--color-primary)}.form-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center}.form-container{width:90%;max-width:500px;background:var(--color-background);border-radius:16px;padding:1.5rem;position:absolute;bottom:1rem;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.camera-view{width:100%;aspect-ratio:4/3;background:#000;border-radius:8px;overflow:hidden;margin-bottom:1rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--color-text)}.form-group input{width:100%;padding:.75rem;border:1px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text)}.add-button{position:fixed;bottom:calc(var(--navbar-height) + 1rem);left:50%;transform:translate(-50%);background:var(--color-primary);color:#fff;padding:.75rem 1.5rem;border-radius:25px;border:none;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px #0003;z-index:10}.delete-button{background:transparent;border:none;cursor:pointer;margin-left:8px;color:red}.delete-button:hover{color:#8b0000}.settings-container{padding:var(--spacing-md);max-width:600px;margin:0 auto}.settings-content{margin-top:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md)}.settings-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.account-info{background-color:var(--color-neutral-100);padding:var(--spacing-sm) var(--spacing-md);border-radius:8px;font-size:.875rem}[data-theme=dark] .account-info{background-color:var(--color-background-dark)}.settings-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm)}.settings-buttons button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);transition:transform .2s ease}.settings-buttons button:hover{transform:translateY(-1px)}.display-item{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-neutral-100);border-radius:8px}[data-theme=dark] .display-item{background-color:var(--color-background-dark)}.separator{height:1px;background-color:var(--color-neutral-200);margin:var(--spacing-xs) 0}[data-theme=dark] .separator{background-color:var(--color-neutral-800)}:root{--color-primary-50: #e6f3ff;--color-primary-100: #bde0ff;--color-primary-200: #80c7ff;--color-primary-300: #38aeff;--color-primary-400: #0095ff;--color-primary-500: #007acc;--color-primary-600: #0066b3;--color-primary-700: #004d99;--color-primary-800: #003366;--color-primary-900: #001a33;--color-neutral-50: #f8f9fa;--color-neutral-100: #f3f4f6;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529;--color-error: #dc3545;--color-success: #28a745;--color-warning: #ffc107;--color-info: #17a2b8;--color-primary: var(--color-primary-400);--color-primary-dark: var(--color-primary-700);--color-text: var(--color-neutral-900);--color-text-light: var(--color-neutral-600);--color-background: var(--color-neutral-100);--color-background-dark: #1c1f26;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-size: 18px;--surface-1: #f8f9fa;--surface-2: #e9ecef;--text-1: #212529;--text-2: #495057;--border-color: #dee2e6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;font-size:var(--font-size);background-color:var(--color-background);color:var(--color-text);line-height:1.5}[data-theme=dark]{background-color:var(--color-background-dark);color:#f0f0f5}[data-theme=dark] a{color:#66b2ff}[data-theme=dark] .button{background-color:#2a2e37;color:#e0e4eb;border:1px solid #3a3f4a}[data-theme=dark] .card{background-color:#242830;color:#dcdfe4;box-shadow:0 4px 6px #0003}.app{min-height:100vh;padding:var(--spacing-md)}