:root{--color-bg-primary: #0a0a0f;--color-bg-secondary: #12121a;--color-bg-tertiary: #1a1a28;--color-bg-card: #15151f;--color-bg-card-hover: #1c1c2e;--color-bg-elevated: #1e1e30;--color-bg-glass: rgba(21, 21, 31, .85);--color-surface-1: #222236;--color-surface-2: #2a2a42;--color-surface-3: #33334d;--color-accent: #c9a84c;--color-accent-light: #e2c87a;--color-accent-dark: #a68a3a;--color-accent-glow: rgba(201, 168, 76, .25);--color-accent-subtle: rgba(201, 168, 76, .08);--color-success: #34d399;--color-success-bg: rgba(52, 211, 153, .1);--color-warning: #fbbf24;--color-warning-bg: rgba(251, 191, 36, .1);--color-danger: #f87171;--color-danger-bg: rgba(248, 113, 113, .1);--color-info: #60a5fa;--color-info-bg: rgba(96, 165, 250, .1);--color-text-primary: #f0f0f5;--color-text-secondary: #a0a0b8;--color-text-tertiary: #6a6a82;--color-text-inverse: #0a0a0f;--color-text-accent: var(--color-accent-light);--color-border: rgba(255, 255, 255, .06);--color-border-hover: rgba(255, 255, 255, .12);--color-border-accent: rgba(201, 168, 76, .3);--font-display: "Outfit", sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--text-xs: .6875rem;--text-sm: .8125rem;--text-base: .9375rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--text-3xl: 2.25rem;--text-4xl: 3rem;--text-5xl: 3.75rem;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-extrabold: 800;--leading-tight: 1.15;--leading-snug: 1.3;--leading-normal: 1.6;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .5);--shadow-xl: 0 16px 50px rgba(0, 0, 0, .6);--shadow-glow: 0 0 20px var(--color-accent-glow);--shadow-card: 0 2px 8px rgba(0, 0, 0, .3), 0 0 1px rgba(255, 255, 255, .05);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;--transition-spring: .35s cubic-bezier(.34, 1.56, .64, 1);--z-dropdown: 100;--z-sticky: 200;--z-modal-backdrop: 300;--z-modal: 400;--z-toast: 500;--container-sm: 640px;--container-md: 768px;--container-lg: 1024px;--container-xl: 1280px;--header-height: 64px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary);min-height:100vh;min-height:100dvh;overflow-x:hidden;padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom)}#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:var(--leading-tight);color:var(--color-text-primary);letter-spacing:-.02em}h1{font-size:var(--text-3xl);font-weight:var(--weight-extrabold)}h2{font-size:var(--text-2xl);font-weight:var(--weight-bold)}h3{font-size:var(--text-xl);font-weight:var(--weight-semibold)}h4{font-size:var(--text-lg);font-weight:var(--weight-semibold)}@media(min-width:768px){h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}}p{color:var(--color-text-secondary);line-height:var(--leading-normal)}a{color:var(--color-accent-light);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent)}img,video{max-width:100%;height:auto;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;border:none;outline:none;background:none}button{cursor:pointer;-webkit-tap-highlight-color:transparent}ul,ol{list-style:none}.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-4)}@media(min-width:768px){.container{padding:0 var(--space-8)}}.section{padding:var(--space-12) 0}@media(min-width:768px){.section{padding:var(--space-16) 0}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-surface-2);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-surface-3)}::selection{background:var(--color-accent);color:var(--color-text-inverse)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skeleton{background:linear-gradient(90deg,var(--color-bg-tertiary) 25%,var(--color-surface-1) 50%,var(--color-bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-sm);border-radius:var(--radius-md);transition:all var(--transition-base);white-space:nowrap;min-height:44px;text-transform:uppercase;letter-spacing:.05em}.btn-primary{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));color:var(--color-text-inverse);box-shadow:var(--shadow-md),var(--shadow-glow)}.btn-primary:hover{background:linear-gradient(135deg,var(--color-accent-light),var(--color-accent));transform:translateY(-1px);box-shadow:var(--shadow-lg),0 0 30px var(--color-accent-glow)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--color-surface-1);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface-2);border-color:var(--color-border-hover)}.btn-ghost{color:var(--color-text-secondary)}.btn-ghost:hover{color:var(--color-text-primary);background:var(--color-surface-1)}.btn-best-price{background:linear-gradient(135deg,var(--color-accent),#d4a030);color:var(--color-text-inverse);font-size:var(--text-base);padding:var(--space-4) var(--space-8);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg),0 0 40px var(--color-accent-glow);font-weight:var(--weight-bold);min-height:52px;position:relative;overflow:hidden}.btn-best-price:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translate(-100%);animation:btnShine 3s infinite}.btn-best-price:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-xl),0 0 60px var(--color-accent-glow)}@keyframes btnShine{0%{transform:translate(-100%)}50%,to{transform:translate(100%)}}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base)}.card:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card-body{padding:var(--space-4)}@media(min-width:768px){.card-body{padding:var(--space-6)}}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.06em}.badge-deal{background:var(--color-success-bg);color:var(--color-success);border:1px solid rgba(52,211,153,.2)}.badge-drop{background:var(--color-danger-bg);color:var(--color-danger);border:1px solid rgba(248,113,113,.2)}.badge-best{background:var(--color-accent-subtle);color:var(--color-accent-light);border:1px solid var(--color-border-accent)}.badge-new{background:var(--color-info-bg);color:var(--color-info);border:1px solid rgba(96,165,250,.2)}.badge-condition{background:var(--color-surface-1);color:var(--color-text-secondary);border:1px solid var(--color-border)}.price{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--color-text-primary)}.price-large{font-size:var(--text-2xl)}.price-small{font-size:var(--text-base)}.price-original{text-decoration:line-through;color:var(--color-text-tertiary);font-weight:var(--weight-regular);font-size:var(--text-sm)}.price-savings{color:var(--color-success);font-weight:var(--weight-semibold);font-size:var(--text-sm)}.comparison-table{width:100%;border-collapse:separate;border-spacing:0}.comparison-table th{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border);position:sticky;top:0;background:var(--color-bg-secondary);z-index:1}.comparison-table td{padding:var(--space-4);border-bottom:1px solid var(--color-border);vertical-align:middle}.comparison-table tr:hover td{background:var(--color-bg-card-hover)}.comparison-table .best-row td{background:var(--color-accent-subtle);border-bottom-color:var(--color-border-accent)}.comparison-table .best-row:hover td{background:#c9a84c1f}.trust-stars{display:inline-flex;gap:2px}.trust-star{width:14px;height:14px;color:var(--color-accent)}.trust-star-empty{color:var(--color-surface-2)}.search-input-wrap{position:relative;width:100%}.search-input{width:100%;padding:var(--space-4) var(--space-4) var(--space-4) var(--space-12);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--text-md);transition:all var(--transition-base);min-height:52px}.search-input::placeholder{color:var(--color-text-tertiary)}.search-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow);background:var(--color-bg-elevated)}.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--color-text-tertiary);pointer-events:none}.autocomplete-dropdown{position:absolute;top:calc(100% + var(--space-2));left:0;right:0;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);z-index:var(--z-dropdown);max-height:360px;overflow-y:auto}.autocomplete-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;transition:background var(--transition-fast)}.autocomplete-item:hover,.autocomplete-item.active{background:var(--color-surface-1)}.autocomplete-item-img{width:40px;height:40px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-surface-1)}.autocomplete-item-info{flex:1;min-width:0}.autocomplete-item-brand{font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.autocomplete-item-name{font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.autocomplete-item-price{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--color-accent-light)}.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.chip:hover{border-color:var(--color-border-hover);background:var(--color-surface-2)}.chip.active{background:var(--color-accent-subtle);border-color:var(--color-border-accent);color:var(--color-accent-light)}.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-tertiary);border-bottom:2px solid transparent;white-space:nowrap;transition:all var(--transition-fast);cursor:pointer}.tab:hover{color:var(--color-text-secondary)}.tab.active{color:var(--color-accent-light);border-bottom-color:var(--color-accent)}.faq-item{border-bottom:1px solid var(--color-border)}.faq-question{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--space-5) 0;font-weight:var(--weight-medium);font-size:var(--text-md);color:var(--color-text-primary);cursor:pointer;text-align:left}.faq-question:after{content:"+";font-size:var(--text-xl);color:var(--color-text-tertiary);transition:transform var(--transition-base);flex-shrink:0;margin-left:var(--space-4)}.faq-item.open .faq-question:after{content:"−"}.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--transition-slow),padding var(--transition-slow)}.faq-item.open .faq-answer{max-height:500px;padding-bottom:var(--space-5)}.faq-answer p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-text-secondary)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal-backdrop);opacity:0;visibility:hidden;transition:all var(--transition-base)}.modal-backdrop.open{opacity:1;visibility:visible}.modal{position:fixed;bottom:0;left:0;right:0;background:var(--color-bg-elevated);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-6);padding-bottom:calc(var(--space-6) + var(--safe-area-bottom));z-index:var(--z-modal);transform:translateY(100%);transition:transform var(--transition-slow)}.modal-backdrop.open .modal{transform:translateY(0)}@media(min-width:768px){.modal{bottom:auto;top:50%;left:50%;right:auto;transform:translate(-50%,-50%) scale(.95);max-width:480px;width:calc(100% - var(--space-8));border-radius:var(--radius-xl);padding-bottom:var(--space-6)}.modal-backdrop.open .modal{transform:translate(-50%,-50%) scale(1)}}.modal-handle{width:36px;height:4px;background:var(--color-surface-3);border-radius:var(--radius-full);margin:0 auto var(--space-5)}@media(min-width:768px){.modal-handle{display:none}}.toast-container{position:fixed;bottom:calc(var(--space-4) + var(--safe-area-bottom));left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2)}.toast{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);box-shadow:var(--shadow-xl);font-size:var(--text-sm);animation:toastIn var(--transition-spring) forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.retailer-row{display:flex;align-items:center;gap:var(--space-3)}.retailer-logo{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-surface-1);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-xs);color:var(--color-text-secondary);flex-shrink:0}.retailer-name{font-weight:var(--weight-medium);font-size:var(--text-sm)}.retailer-verified{color:var(--color-accent);font-size:var(--text-xs)}.grid-watches{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}@media(min-width:768px){.grid-watches{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}}@media(min-width:1024px){.grid-watches{grid-template-columns:repeat(4,1fr)}}.availability{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-medium)}.availability-dot{width:6px;height:6px;border-radius:50%}.availability-in-stock .availability-dot{background:var(--color-success);box-shadow:0 0 6px #34d39980}.availability-in-stock{color:var(--color-success)}.availability-low .availability-dot{background:var(--color-warning);box-shadow:0 0 6px #fbbf2480}.availability-low{color:var(--color-warning)}.availability-out .availability-dot{background:var(--color-text-tertiary)}.availability-out{color:var(--color-text-tertiary)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.section-header h2{font-size:var(--text-xl)}@media(min-width:768px){.section-header h2{font-size:var(--text-2xl)}}.section-header a{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-accent-light)}.empty-state{text-align:center;padding:var(--space-16) var(--space-4)}.empty-state-icon{font-size:3rem;margin-bottom:var(--space-4)}.empty-state p{font-size:var(--text-sm);color:var(--color-text-tertiary);max-width:320px;margin:0 auto}.fade-in{animation:fadeIn var(--transition-base) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-up{animation:slideUp var(--transition-slow) ease forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.stagger-children>*{opacity:0;animation:slideUp var(--transition-slow) ease forwards}.stagger-children>*:nth-child(1){animation-delay:0ms}.stagger-children>*:nth-child(2){animation-delay:60ms}.stagger-children>*:nth-child(3){animation-delay:.12s}.stagger-children>*:nth-child(4){animation-delay:.18s}.stagger-children>*:nth-child(5){animation-delay:.24s}.stagger-children>*:nth-child(6){animation-delay:.3s}.stagger-children>*:nth-child(7){animation-delay:.36s}.stagger-children>*:nth-child(8){animation-delay:.42s}.pulse-badge{animation:pulseBadge 2s ease-in-out infinite}@keyframes pulseBadge{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.glow-pulse{animation:glowPulse 2.5s ease-in-out infinite}@keyframes glowPulse{0%,to{box-shadow:var(--shadow-md),0 0 20px var(--color-accent-glow)}50%{box-shadow:var(--shadow-lg),0 0 40px var(--color-accent-glow)}}.price-change{animation:priceFlash .6s ease}@keyframes priceFlash{0%{color:var(--color-text-primary)}30%{color:var(--color-success);transform:scale(1.1)}to{color:var(--color-text-primary);transform:scale(1)}}.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}.hover-scale{transition:transform var(--transition-base)}.hover-scale:hover{transform:scale(1.03)}.marquee-track{display:flex;gap:var(--space-4);animation:marquee 30s linear infinite;width:max-content}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.marquee-track:hover{animation-play-state:paused}.chart-enter{animation:chartDraw 1s ease forwards}@keyframes chartDraw{0%{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
