@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap";:root{--color-bg:#f7f8fa;--color-surface:#fff;--color-text:#2d3748;--color-text-strong:#1a202c;--color-text-secondary:#4a5568;--color-text-subtle:#718096;--color-text-muted:#a0aec0;--color-border:#e2e8f0;--color-border-hover:#cbd5e0;--color-accent:#009afd;--color-accent-hover:#006bb1;--color-accent-bg:#f0f7ff;--color-success:#38a169;--color-error:#e53e3e;--color-warning:#dd6b20;--font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"SF Mono", "Fira Code", "Courier New", monospace;--font-regular:400;--font-semibold:600;--text-caption:10px;--text-sm:12px;--text-body:14px;--text-heading:22px;--line-height-body:1.5;--line-height-heading:1.2;--space-xs:4px;--space-sm:8px;--space-base:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;--shadow-card:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-card-hover:0 4px 12px #00000014, 0 2px 4px #0000000a;--shadow-swatch:0 2px 8px #0000001a, 0 1px 3px #0000000f;--shadow-login:0 8px 32px #00000014, 0 2px 8px #0000000a;--shadow-elevated:0 12px 40px #0000001a, 0 4px 12px #0000000d;--focus-ring:0 0 0 3px #009afd33;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-smooth:.3s cubic-bezier(.4, 0, .2, 1);--nav-height:56px;--container-max:1200px;--sidebar-width:320px;--sidebar-width-tablet:280px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;min-height:100vh}.nav-bar{background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-card)}.nav-inner{max-width:var(--container-max);padding:0 var(--space-lg);height:var(--nav-height);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.nav-logo{font-size:var(--text-heading);font-weight:var(--font-semibold);color:var(--color-accent);letter-spacing:-.3px;text-decoration:none}.nav-logo:hover{color:var(--color-accent-hover)}.nav-actions{align-items:center;gap:var(--space-sm);display:flex}.nav-actions .user-email{font-size:var(--text-sm);color:var(--color-text-subtle);font-weight:var(--font-regular)}.nav-icon-link{color:var(--color-text-muted);padding:var(--space-xs);border-radius:var(--radius-sm);justify-content:center;align-items:center;text-decoration:none;transition:all .15s;display:flex}.nav-icon-link:hover{color:var(--color-accent);background:var(--color-accent-bg)}.nav-icon-link.active{color:var(--color-accent)}.nav-actions button{padding:var(--space-xs) var(--space-base);font-size:var(--text-sm);font-weight:var(--font-regular);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;color:var(--color-text-secondary);font-family:inherit;transition:all .15s}.nav-actions button:hover{background:var(--color-bg);border-color:var(--color-border-hover);color:var(--color-text)}.hamburger-btn{padding:var(--space-sm);color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;transition:all .15s;display:none}.hamburger-btn:hover{color:var(--color-accent);background:var(--color-accent-bg)}.nav-overlay{z-index:998;background:#0000004d;transition:opacity .2s ease-out;display:none;position:fixed;inset:0}.nav-overlay.open{display:block}.nav-drawer{background:var(--color-surface);z-index:999;width:260px;height:100vh;padding:var(--space-base) 0;flex-direction:column;transition:right .2s ease-out;display:flex;position:fixed;top:0;right:-260px;box-shadow:-2px 0 8px #0000001a}.nav-drawer.open{right:0}.drawer-header{padding:var(--space-sm) var(--space-base);justify-content:space-between;align-items:center;display:flex}.drawer-email{font-size:var(--text-sm);color:var(--color-text-subtle);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.drawer-close{padding:var(--space-xs);color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;transition:all .15s;display:flex}.drawer-close:hover{color:var(--color-text);background:var(--color-bg)}.drawer-divider{background:var(--color-border);height:1px;margin:var(--space-sm) 0}.drawer-link{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-base);min-height:44px;font-size:var(--text-body);font-weight:var(--font-regular);color:var(--color-text-secondary);text-align:left;cursor:pointer;width:100%;font-family:var(--font-family);background:0 0;border:none;text-decoration:none;transition:all .15s;display:flex}.drawer-link:hover{background:var(--color-bg);color:var(--color-text)}.drawer-link.active{color:var(--color-accent)}.drawer-logout{color:var(--color-text-muted)}.drawer-logout:hover{color:var(--color-error);background:var(--color-bg)}.auth-bar{justify-content:flex-end;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-base);display:flex}.auth-bar .user-email{font-size:var(--text-sm);color:var(--color-text-subtle)}.auth-bar button{padding:var(--space-xs) var(--space-base);font-size:var(--text-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;font-family:inherit}.auth-bar button:hover{background:var(--color-bg)}.inventory-saved{color:var(--color-success);margin-left:var(--space-xs);font-size:.75rem}.inventory-bar{margin-top:var(--space-sm);align-items:center;gap:10px;font-size:.85rem;display:flex}#inventoryBtn{padding:var(--space-xs) var(--space-sm);font-size:.8rem;font-weight:var(--font-regular);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;color:var(--color-text-secondary);font-family:inherit;transition:all .15s}#inventoryBtn:hover{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent)}#inventoryStatus{color:var(--color-text-muted);font-size:.8rem}#inventoryStatus.active{color:var(--color-success);font-weight:var(--font-regular)}#clearInventoryBtn{padding:var(--space-xs) 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;color:var(--color-text-muted);font-family:inherit;font-size:.75rem;transition:all .15s;display:none}#clearInventoryBtn:hover{color:var(--color-error);background:#fff5f5;border-color:#feb2b2}.lang-btn{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm);font-weight:var(--font-semibold);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;color:var(--color-text-secondary);letter-spacing:.5px;text-align:center;min-width:44px;font-family:inherit;transition:all .15s}.lang-btn:hover{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent)}.lang-btn-float{top:var(--space-base);right:var(--space-base);z-index:100;box-shadow:var(--shadow-card);position:fixed}.lang-picker{z-index:1000;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:180px;box-shadow:var(--shadow-elevated);padding:var(--space-xs) 0;animation:.15s ease-out fadeIn;position:fixed}.lang-picker-item{align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-base);cursor:pointer;font-family:var(--font-family);font-size:var(--text-body);color:var(--color-text-secondary);text-align:left;background:0 0;border:none;transition:all .1s;display:flex}.lang-picker-item:hover{background:var(--color-accent-bg);color:var(--color-text)}.lang-picker-item.active{color:var(--color-accent);font-weight:var(--font-semibold)}.lang-picker-label{font-weight:var(--font-semibold);font-size:var(--text-sm);min-width:36px}.lang-picker-name{font-weight:var(--font-regular)}@media (width<=767px){.nav-actions{display:none}.hamburger-btn{display:flex}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.8}}@keyframes breathe{0%,to{border-color:var(--color-border-hover)}50%{border-color:var(--color-accent)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%)}}@keyframes toastOut{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-8px)}}.fade-in-up{animation:fadeInUp var(--transition-smooth) both}.fade-in{animation:fadeIn var(--transition-smooth) both}.skeleton-pulse{background:linear-gradient(90deg, var(--color-bg) 25%, var(--color-border) 50%, var(--color-bg) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s infinite shimmer;color:#0000!important}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.tool-btn:active,.color-match-btn:active,.billing-btn:active,.save-btn:active:not(:disabled),.onboarding-btn:active:not(:disabled),.auth-submit-btn:active:not(:disabled),.google-btn:active,#copyButton:active,#addCustomBtn:active{transform:scale(.97)}.toast{background:var(--color-text-strong);color:var(--color-surface);font-size:var(--text-sm);font-weight:var(--font-semibold);font-family:var(--font-family);border-radius:var(--radius-pill);box-shadow:var(--shadow-elevated);z-index:9999;pointer-events:none;padding:10px 24px;animation:.25s cubic-bezier(.4,0,.2,1) both toastIn;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast.toast-success{background:var(--color-success)}.toast.toast-out{animation:.2s cubic-bezier(.4,0,.2,1) both toastOut}