._container_aaexy_5{width:100%;max-width:100%;margin:0 auto;padding:0}._menu_aaexy_21{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6) var(--space-4);background:linear-gradient(135deg,var(--color-neutral-100) 0%,#ffffff 100%);border-radius:var(--radius-lg);text-align:center}._title_aaexy_41{margin:0 0 var(--space-1) 0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-neutral-900);letter-spacing:-.5px}._subtitle_aaexy_57{margin:0 0 var(--space-4) 0;font-size:var(--font-size-sm);color:var(--color-neutral-600)}._divider_aaexy_69{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-xs);color:var(--color-neutral-500);margin:var(--space-1) 0}._divider_aaexy_69:before,._divider_aaexy_69:after{content:"";flex:1;height:1px;background:var(--color-neutral-300)}._button_aaexy_105{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-normal);min-height:48px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_aaexy_105:disabled{opacity:.5;cursor:not-allowed}._primaryButton_aaexy_149{background:var(--color-primary-500);color:#fff;box-shadow:var(--shadow-md)}._primaryButton_aaexy_149:not(:disabled):hover{background:var(--color-primary-600);box-shadow:var(--shadow-lg);transform:translateY(-2px)}._primaryButton_aaexy_149:not(:disabled):active{transform:translateY(0);box-shadow:var(--shadow-sm)}._secondaryButton_aaexy_183{background:#fff;color:var(--color-primary-500);border:var(--border-width-medium) solid var(--color-primary-500)}._secondaryButton_aaexy_183:not(:disabled):hover{background:var(--color-primary-50);border-color:var(--color-primary-600);box-shadow:var(--shadow-md);transform:translateY(-2px)}._secondaryButton_aaexy_183:not(:disabled):active{transform:translateY(0)}._success_aaexy_219,._warning_aaexy_221,._error_aaexy_223{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);margin-top:var(--space-2)}._success_aaexy_219{background:var(--color-success-50);color:var(--color-success-700);border-left:var(--border-width-thick) solid var(--color-success-500)}._warning_aaexy_221{background:var(--color-warning-50);color:var(--color-warning-700);border-left:var(--border-width-thick) solid var(--color-warning-500)}._error_aaexy_223{background:var(--color-error-50);color:var(--color-error-700);border-left:var(--border-width-thick) solid var(--color-error-500)}._cameraContainer_aaexy_279{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:#000;border-radius:var(--radius-lg);overflow:hidden}._videoWrapper_aaexy_299{position:relative;width:100%;aspect-ratio:4 / 3;background:#000;border-radius:var(--radius-md);overflow:hidden}._video_aaexy_299{display:block;width:100%;height:100%;object-fit:cover}._scannerOverlay_aaexy_333{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);pointer-events:none}._scanBox_aaexy_355{position:relative;width:280px;height:180px;background:transparent;box-shadow:0 0 0 2000px #0009}._cornerTL_aaexy_373,._cornerTR_aaexy_373,._cornerBL_aaexy_373,._cornerBR_aaexy_373{position:absolute;width:30px;height:30px;border-color:var(--color-primary-300);border-style:solid;border-width:0}._cornerTL_aaexy_373{top:0;left:0;border-top-width:var(--border-width-thick);border-left-width:var(--border-width-thick);border-top-left-radius:var(--radius-md)}._cornerTR_aaexy_373{top:0;right:0;border-top-width:var(--border-width-thick);border-right-width:var(--border-width-thick);border-top-right-radius:var(--radius-md)}._cornerBL_aaexy_373{bottom:0;left:0;border-bottom-width:var(--border-width-thick);border-left-width:var(--border-width-thick);border-bottom-left-radius:var(--radius-md)}._cornerBR_aaexy_373{bottom:0;right:0;border-bottom-width:var(--border-width-thick);border-right-width:var(--border-width-thick);border-bottom-right-radius:var(--radius-md)}._scanLine_aaexy_457{position:absolute;width:260px;height:3px;background:linear-gradient(90deg,transparent,var(--color-primary-300),var(--color-error-500),var(--color-primary-300),transparent);border-radius:var(--radius-sm);animation:_scanMove_aaexy_1 2s ease-in-out infinite;box-shadow:0 0 10px #d4a574cc}@keyframes _scanMove_aaexy_1{0%,to{transform:translateY(-80px);opacity:.3}50%{transform:translateY(80px);opacity:1}}._hint_aaexy_499{color:#fffffff2;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-align:center;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.5)}@media (min-width: 640px){._menu_aaexy_21{padding:var(--space-8) var(--space-6)}._title_aaexy_41{font-size:var(--font-size-2xl);margin-bottom:var(--space-4)}._button_aaexy_105{padding:var(--space-4) var(--space-6);font-size:var(--font-size-lg)}._scanBox_aaexy_355{width:320px;height:320px}._hint_aaexy_499{font-size:var(--font-size-base)}}@media (min-width: 1024px){._container_aaexy_5{max-width:600px;margin:0 auto}._menu_aaexy_21{padding:var(--space-10) var(--space-8)}._title_aaexy_41{font-size:var(--font-size-3xl)}._button_aaexy_105{padding:var(--space-4) var(--space-8);font-size:var(--font-size-base)}._scanBox_aaexy_355{width:360px;height:360px}._videoWrapper_aaexy_299{max-width:500px;margin:0 auto}}@media (prefers-reduced-motion: reduce){._button_aaexy_105{transition:none}._scanBox_aaexy_355{animation:none}._primaryButton_aaexy_149:not(:disabled):hover{transform:none}._scanPulse_aaexy_663{animation:none}}@media (prefers-color-scheme: dark){._menu_aaexy_21{background:linear-gradient(135deg,var(--color-neutral-800) 0%,var(--color-neutral-900) 100%)}._title_aaexy_41{color:var(--color-neutral-100)}._divider_aaexy_69{color:var(--color-neutral-600)}._divider_aaexy_69:before,._divider_aaexy_69:after{background:var(--color-neutral-700)}._secondaryButton_aaexy_183{background:var(--color-neutral-900);color:var(--color-primary-400);border-color:var(--color-primary-400)}._secondaryButton_aaexy_183:not(:disabled):hover{background:var(--color-neutral-800)}}._cameraControls_aaexy_735{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap}._controlButton_aaexy_753{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:var(--border-width-medium) solid rgba(255,255,255,.3);border-radius:var(--radius-md);background:#ffffff1a;color:#fff;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}._controlButton_aaexy_753:hover{background:#fff3;border-color:#ffffff80}._controlButton_aaexy_753._active_aaexy_795{background:#d4a5744d;border-color:var(--color-primary-300);color:var(--color-primary-300)}@supports (padding: max(0px)){._button_aaexy_105{padding-left:max(var(--space-5),env(safe-area-inset-left));padding-right:max(var(--space-5),env(safe-area-inset-right))}._menu_aaexy_21{padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right));padding-bottom:max(var(--space-6),env(safe-area-inset-bottom))}._cameraContainer_aaexy_279{padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right));padding-bottom:max(var(--space-4),env(safe-area-inset-bottom))}}.landing-page{min-height:100vh;background:var(--color-neutral-50)}.hero-section{display:flex;flex-direction:column;align-items:center;padding:var(--space-8) var(--space-4);background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-primary-100) 100%);text-align:center}.hero-content{max-width:var(--container-lg);margin-bottom:var(--space-8)}.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:#8b5a2b1a;border-radius:var(--radius-full);margin-bottom:var(--space-6)}.badge-icon{font-size:var(--font-size-lg)}.badge-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600)}.hero-title{font-family:var(--font-family-serif);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-4) 0;line-height:var(--line-height-tight)}.hero-subtitle{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin:0 0 var(--space-8) 0;line-height:var(--line-height-relaxed)}.hero-scanner{background:#fff;border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-lg);margin:0 auto;max-width:var(--container-md)}.hero-image{width:100%;max-width:var(--container-md);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl)}.hero-coffee-image{width:100%;height:auto;display:block}.section-title{font-family:var(--font-family-serif);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);text-align:center;margin:0 0 var(--space-3) 0}.section-subtitle{font-size:var(--font-size-base);color:var(--color-text-muted);text-align:center;margin:0 0 var(--space-8) 0;max-width:600px;margin-left:auto;margin-right:auto}.features-section{padding:var(--space-12) var(--space-4);background:#fff}.features-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);max-width:1200px;margin:0 auto}.feature-card{background:var(--color-neutral-50);border-radius:var(--radius-xl);padding:var(--space-6);text-align:center;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.feature-icon-wrapper{width:64px;height:64px;margin:0 auto var(--space-4);background:linear-gradient(135deg,var(--color-primary-100) 0%,var(--color-primary-200) 100%);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center}.feature-icon{font-size:2rem}.feature-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-3) 0}.feature-description{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0;line-height:var(--line-height-relaxed)}.how-it-works-section{padding:var(--space-12) var(--space-4);background:var(--color-primary-50)}.steps-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-8)}.step{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md)}.step-number{width:48px;height:48px;background:var(--color-primary-500);color:#fff;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-4)}.step-content{margin-bottom:var(--space-4)}.step-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2) 0}.step-description{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0}.step-image{width:100%;max-width:300px;border-radius:var(--radius-lg);overflow:hidden}.step-image img{width:100%;height:auto;display:block}.pricing-section{padding:var(--space-12) var(--space-4);background:#fff}.pricing-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);max-width:1000px;margin:0 auto}.pricing-loading{text-align:center;padding:var(--space-8);grid-column:1 / -1}.loading-spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite}.pricing-card{background:var(--color-neutral-50);border-radius:var(--radius-xl);padding:var(--space-6);border:2px solid transparent;position:relative;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.pricing-card.popular{border-color:var(--color-primary-500);background:#fff}.pricing-card.current{border-color:var(--color-success-500)}.popular-badge,.current-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.popular-badge{background:var(--color-primary-500);color:#fff}.current-badge{background:var(--color-success-500);color:#fff}.pricing-header{text-align:center;padding-bottom:var(--space-4);border-bottom:1px solid var(--color-neutral-200);margin-bottom:var(--space-4)}.pricing-name{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-2) 0}.pricing-price{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary-600)}.pricing-description{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:var(--space-2) 0 0 0}.pricing-features{list-style:none;padding:0;margin:0 0 var(--space-6) 0}.pricing-features li{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.pricing-features li.disabled{opacity:.5;text-decoration:line-through}.pricing-cta{width:100%;padding:var(--space-4);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);border:none;min-height:48px}.pricing-cta.primary{background:var(--color-primary-500);color:#fff}.pricing-cta.primary:hover:not(:disabled){background:var(--color-primary-600)}.pricing-cta.secondary{background:transparent;color:var(--color-primary-500);border:2px solid var(--color-primary-500)}.pricing-cta.secondary:hover:not(:disabled){background:var(--color-primary-50)}.pricing-cta:disabled{opacity:.6;cursor:not-allowed}.testimonials-section{padding:var(--space-12) var(--space-4);background:var(--color-neutral-50)}.testimonials-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);max-width:1000px;margin:0 auto}.testimonial-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm)}.testimonial-stars{margin-bottom:var(--space-3)}.testimonial-text{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0 0 var(--space-4) 0;font-style:italic}.testimonial-author{display:flex;align-items:center;gap:var(--space-3)}.author-avatar{width:48px;height:48px;background:var(--color-primary-100);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:1.5rem}.author-info{display:flex;flex-direction:column}.author-name{font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.author-role{font-size:var(--font-size-sm);color:var(--color-text-muted)}.cta-section{padding:var(--space-12) var(--space-4);background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-600) 100%);text-align:center}.cta-content{max-width:600px;margin:0 auto}.cta-title{font-family:var(--font-family-serif);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:#fff;margin:0 0 var(--space-3) 0}.cta-subtitle{font-size:var(--font-size-base);color:#ffffffe6;margin:0 0 var(--space-8) 0}.cta-buttons{display:flex;flex-direction:column;gap:var(--space-4);max-width:300px;margin:0 auto}.cta-btn{padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);border:none;min-height:48px}.cta-btn-primary{background:#fff;color:var(--color-primary-600)}.cta-btn-primary:hover{background:var(--color-neutral-100);transform:translateY(-2px)}.cta-btn-secondary{background:transparent;color:#fff;border:2px solid white}.cta-btn-secondary:hover{background:#ffffff1a}.landing-footer{padding:var(--space-8) var(--space-4);background:var(--color-primary-900);text-align:center}.footer-content{max-width:400px;margin:0 auto}.footer-brand{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-3)}.footer-logo{font-size:1.5rem}.footer-name{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:#fff}.footer-tagline{font-size:var(--font-size-sm);color:#ffffffb3;margin:0 0 var(--space-4) 0}.footer-copyright{font-size:var(--font-size-xs);color:#ffffff80;margin:0}@media (min-width: 640px){.hero-title{font-size:var(--font-size-4xl)}.features-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid{grid-template-columns:repeat(3,1fr)}.testimonials-grid{grid-template-columns:repeat(2,1fr)}.cta-buttons{flex-direction:row;max-width:none;justify-content:center}.step{flex-direction:row;text-align:left;gap:var(--space-6)}.step-number{flex-shrink:0;margin-bottom:0}.step-content{flex:1;margin-bottom:0}.step-image{flex-shrink:0;width:200px}}@media (min-width: 1024px){.hero-section{flex-direction:row;padding:var(--space-16) var(--space-8);text-align:left;gap:var(--space-12)}.hero-content{flex:1;margin-bottom:0}.hero-image{flex:1}.features-grid,.testimonials-grid{grid-template-columns:repeat(3,1fr)}.section-title,.cta-title{font-size:var(--font-size-3xl)}}.home-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--space-6);background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-primary-100) 100%)}.home-header{text-align:center;margin-bottom:var(--space-8)}.home-logo{font-size:4rem;margin-bottom:var(--space-4);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.home-title{font-family:var(--font-family-serif);font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-3) 0;letter-spacing:-.02em}.home-tagline{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin:0;font-weight:var(--font-weight-medium)}.home-main{width:100%;max-width:var(--container-md)}.home-scanner-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-lg);margin-bottom:var(--space-8)}.home-features{display:flex;flex-direction:column;gap:var(--space-4)}.feature-item{display:flex;align-items:center;gap:var(--space-3);background:#fff;padding:var(--space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}.feature-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.feature-icon{font-size:1.5rem}.feature-text{font-size:var(--font-size-base);color:var(--color-text-primary);font-weight:var(--font-weight-medium)}@media (min-width: 640px){.home-features{flex-direction:row;justify-content:center}.feature-item{flex:1;max-width:200px;flex-direction:column;text-align:center}.feature-icon{font-size:2rem}}@media (min-width: 768px){.home-title{font-size:3rem}.home-tagline{font-size:var(--font-size-xl)}}.vision-page{min-height:100vh;background:var(--color-neutral-50)}.vision-hero{background:linear-gradient(135deg,var(--color-primary-900) 0%,var(--color-primary-700) 50%,var(--color-primary-500) 100%);color:#fff;padding:var(--space-10) var(--space-4);text-align:center}.vision-hero-content{max-width:var(--container-md);margin:0 auto var(--space-8)}.vision-tagline{display:inline-block;background:#ffffff26;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--space-4)}.vision-title{font-family:var(--font-family-serif);font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);line-height:1.1;margin:0 0 var(--space-6)}.vision-title .highlight{color:var(--color-warning-300)}.vision-subtitle{font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);opacity:.9;max-width:600px;margin:0 auto}.vision-hero-visual{max-width:var(--container-sm);margin:0 auto}.journey-illustration{display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-3);background:#ffffff1a;border-radius:var(--radius-xl);flex-wrap:nowrap;overflow-x:auto}.journey-step{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-1) var(--space-2);min-width:0;flex-shrink:0}.step-icon{font-size:1.25rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.step-label{font-size:.625rem;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.02em;opacity:.8;white-space:nowrap}.journey-connector{width:12px;height:2px;background:#ffffff4d;border-radius:1px;flex-shrink:0}.trailer-message{background:#ffffff14;border-left:4px solid var(--color-warning-400);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);margin:var(--space-6) 0}.trailer-highlight{font-size:var(--font-size-lg);color:var(--color-warning-300);margin:0;line-height:var(--line-height-relaxed)}.vision-section{padding:var(--space-12) var(--space-4)}.section-content{max-width:var(--container-lg);margin:0 auto}.section-badge{display:inline-block;background:var(--color-primary-100);color:var(--color-primary-700);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4)}.section-title{font-family:var(--font-family-serif);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-6);line-height:1.2}.section-text{font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);color:var(--color-text-secondary);margin:0 0 var(--space-4);max-width:800px}.section-text.large-text{font-size:var(--font-size-xl)}.highlight-text{color:var(--color-primary-700);font-weight:var(--font-weight-medium)}.vision-problem{background:var(--color-neutral-100)}.vision-solution{background:#fff}.solution-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-8)}.solution-card{background:var(--color-neutral-50);padding:var(--space-6);border-radius:var(--radius-xl);border:1px solid var(--color-neutral-200);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.solution-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.solution-icon{font-size:2.5rem;margin-bottom:var(--space-4)}.solution-card h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2)}.solution-card p{font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:var(--color-text-muted);margin:0}.vision-future{background:linear-gradient(180deg,var(--color-primary-50) 0%,white 100%)}.vision-pillars{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-8)}.pillar{text-align:center;padding:var(--space-6)}.pillar-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--color-primary-500);color:#fff;font-size:1.5rem;border-radius:50%;margin-bottom:var(--space-4)}.pillar h4{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2)}.pillar p{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0}.vision-impact{background:#fff}.impact-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-8)}.impact-card{background:var(--color-neutral-50);padding:var(--space-6);border-radius:var(--radius-xl);border-left:4px solid var(--color-primary-500)}.impact-emoji{font-size:2.5rem;margin-bottom:var(--space-3)}.impact-card h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2)}.impact-card p{font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:var(--color-text-muted);margin:0}.vision-cta{background:linear-gradient(135deg,var(--color-primary-700) 0%,var(--color-primary-900) 100%);color:#fff;text-align:center}.vision-cta .section-title{color:#fff}.vision-cta .section-text{color:#ffffffe6;margin-left:auto;margin-right:auto}.cta-buttons{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-8) auto;max-width:320px}.cta-button{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);text-decoration:none;transition:all var(--transition-fast);min-height:56px}.cta-button.primary{background:#fff;color:var(--color-primary-700)}.cta-button.primary:hover{background:var(--color-neutral-100);transform:translateY(-2px)}.cta-button.secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}.cta-button.secondary:hover{background:#ffffff1a;border-color:#fff}.btn-icon{font-size:1.25rem}.cta-tagline{font-size:var(--font-size-lg);opacity:.8;margin:var(--space-6) 0 0}@media (min-width: 640px){.vision-hero{padding:var(--space-16) var(--space-6)}.vision-title{font-size:var(--font-size-5xl)}.journey-illustration{gap:var(--space-2);padding:var(--space-4)}.journey-step{padding:var(--space-2) var(--space-3)}.step-icon{font-size:1.5rem}.step-label{font-size:var(--font-size-xs)}.journey-connector{width:24px}.section-title{font-size:var(--font-size-4xl)}.solution-grid{grid-template-columns:repeat(2,1fr)}.vision-pillars{grid-template-columns:repeat(3,1fr)}.impact-grid{grid-template-columns:repeat(2,1fr)}.cta-buttons{flex-direction:row;max-width:none;justify-content:center}}@media (min-width: 1024px){.vision-hero{padding:var(--space-20) var(--space-8)}.vision-title{font-size:4rem}.vision-subtitle{font-size:var(--font-size-xl)}.journey-illustration{gap:var(--space-3)}.step-icon{font-size:2rem}.step-label{font-size:var(--font-size-sm)}.journey-connector{width:40px}.vision-section{padding:var(--space-16) var(--space-8)}.solution-grid,.impact-grid{grid-template-columns:repeat(4,1fr)}}.login-page{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-primary-100) 100%)}.login-container{width:100%;max-width:420px}.login-header{text-align:center;margin-bottom:var(--space-6)}.login-header h1{margin-bottom:var(--space-2)}.login-options{margin-top:var(--space-4)}.login-divider{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0}.login-divider:before,.login-divider:after{content:"";flex:1;height:var(--border-width-thin);background:var(--color-neutral-200)}.login-divider span{color:var(--color-neutral-500);font-size:var(--font-size-sm);white-space:nowrap}.login-footer{text-align:center;margin-top:var(--space-6);padding-top:var(--space-6);border-top:var(--border-width-thin) solid var(--color-neutral-200)}.login-footer p{color:var(--color-text-primary)}@media (max-width: 480px){.login-container{padding:var(--space-4)}.social-buttons{grid-template-columns:1fr}}.register-page{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-primary-100) 100%)}.register-container{width:100%;max-width:480px}.register-header{text-align:center;margin-bottom:var(--space-6)}.register-header h1{margin-bottom:var(--space-2)}.register-benefits{background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-primary-100) 100%);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6)}.register-benefits h3{margin:0 0 var(--space-3) 0}.register-benefits ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.register-benefits li{color:var(--color-neutral-700);font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-2)}.register-options{margin-top:var(--space-4)}.social-buttons{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.social-icon{font-weight:var(--font-weight-bold);font-size:var(--font-size-base)}.social-icon.google{color:#4285f4}.social-icon.microsoft{color:#00a4ef}.social-icon.facebook{color:#1877f2}.social-icon.apple{color:#000}.register-footer{text-align:center;margin-top:var(--space-6);padding-top:var(--space-6);border-top:var(--border-width-thin) solid var(--color-neutral-200)}.register-footer p,.register-benefits li{color:var(--color-text-primary)}@media (max-width: 480px){.register-container{padding:var(--space-4)}.social-buttons{grid-template-columns:1fr}}.feature-gate-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);text-align:center;background:var(--color-neutral-50);border-radius:var(--radius-lg);border:1px dashed var(--color-neutral-200);min-height:200px}.feature-gate-icon{font-size:3rem;margin-bottom:var(--space-4);opacity:.6}.feature-gate-message{color:var(--color-text-secondary);font-size:var(--font-size-base);margin-bottom:var(--space-4);max-width:300px}.feature-gate-upgrade-btn{background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:background .2s ease}.feature-gate-upgrade-btn:hover{background:var(--color-primary-600)}.feature-gate-locked.compact{padding:var(--space-4);min-height:auto;flex-direction:row;gap:var(--space-3)}.feature-gate-locked.compact .feature-gate-icon{font-size:1.5rem;margin-bottom:0}.feature-gate-locked.compact .feature-gate-message{margin-bottom:0;font-size:var(--font-size-sm)}.feature-gate-overlay{position:relative}.feature-gate-overlay-content{filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}.feature-gate-overlay-prompt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fffffff2;padding:var(--space-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:10}.favorite-button{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:#fff;border:2px solid var(--color-neutral-200);border-radius:999px;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);min-width:110px;justify-content:center}.favorite-button:hover{border-color:var(--color-danger-300);background:var(--color-danger-50)}.favorite-button.is-favorite{background:var(--color-danger-50);border-color:var(--color-danger-300);color:var(--color-danger-600)}.favorite-button.is-favorite:hover{background:var(--color-danger-100)}.favorite-icon{font-size:1.1em;line-height:1;display:flex;align-items:center;justify-content:center}.favorite-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--color-neutral-300);border-top-color:var(--color-primary-500);border-radius:50%;animation:favorite-spin .8s linear infinite}@keyframes favorite-spin{to{transform:rotate(360deg)}}.favorite-text{white-space:nowrap}.favorite-button.compact{padding:var(--space-1) var(--space-2);min-width:auto}.favorite-button.compact .favorite-text{display:none}.favorite-button.large{padding:var(--space-3) var(--space-5);font-size:var(--font-size-base);min-width:130px}.favorite-button.large .favorite-icon{font-size:1.3em}.coffee-story-page{background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-primary-100) 100%)}.story-header{max-width:var(--container-2xl);margin:0 auto var(--space-6);text-align:center}.story-header h1{margin:var(--space-4) 0 var(--space-2)}.barcode-info{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-family:var(--font-family-mono);background:#f0e8e2;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);display:inline-block}.story-header-actions{margin-top:var(--space-3);display:flex;justify-content:center}.story-main{max-width:var(--container-2xl);margin:0 auto}.story-actions{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6);align-items:center}@media (max-width: 600px){.story-header h1{font-size:var(--font-size-2xl)}}.flavor-radar-chart{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.radar-grid-circle{fill:none;stroke:var(--color-neutral-200);stroke-width:1}.radar-axis-line{stroke:var(--color-neutral-300);stroke-width:1;stroke-dasharray:2 2}.radar-data-area{fill:var(--color-primary-500);fill-opacity:.3;stroke:var(--color-primary-600);stroke-width:2}.radar-data-point{fill:var(--color-primary-600);stroke:var(--color-neutral-50);stroke-width:2}.radar-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);fill:var(--color-text-secondary)}.flavor-scores-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4);padding:var(--space-3);background:var(--color-neutral-50);border-radius:var(--radius-md);width:100%;max-width:280px}.score-item{display:flex;flex-direction:column;align-items:center;min-width:60px}.score-label{font-size:var(--font-size-xs);color:var(--color-text-muted)}.score-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary-600)}@media (min-width: 640px){.flavor-radar-chart{flex-direction:row;gap:var(--space-6)}.flavor-scores-legend{flex-direction:column;max-width:120px;gap:var(--space-2)}.score-item{flex-direction:row;justify-content:space-between;width:100%}}.product-info-card{background:var(--color-neutral-50);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-neutral-200)}.product-header{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:linear-gradient(to bottom,var(--color-primary-50),var(--color-neutral-50));border-bottom:1px solid var(--color-neutral-200)}.product-image{width:100%;max-width:200px;height:auto;border-radius:var(--radius-md);object-fit:cover;align-self:center}.product-title-section{text-align:center}.product-name{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-1) 0;line-height:var(--line-height-tight)}.product-brand{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0 0 var(--space-2) 0}.product-barcode{display:inline-flex;align-items:center;gap:var(--space-2);background:#f0e8e2;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.barcode-label{font-size:var(--font-size-xs);color:var(--color-text-muted)}.barcode-value{font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-text-primary)}.info-section{padding:var(--space-4);border-bottom:1px solid var(--color-neutral-200)}.info-section:last-child{border-bottom:none}.section-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-3) 0}.section-icon{font-size:var(--font-size-lg)}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.info-item{display:flex;flex-direction:column;gap:var(--space-1)}.info-item.full-width{grid-column:1 / -1}.info-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.info-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.cultural-note,.variety-description,.tasting-notes{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:var(--space-3) 0 0 0;padding:var(--space-3);background:var(--color-neutral-100);border-radius:var(--radius-md);font-style:italic}.flavor-chart-container{display:flex;justify-content:center;margin-bottom:var(--space-4)}.flavor-details{display:flex;flex-direction:column;gap:var(--space-3)}.flavor-tags{display:flex;flex-direction:column;gap:var(--space-2)}.tags-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.tags-container{display:flex;flex-wrap:wrap;gap:var(--space-1)}.flavor-tag{padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.flavor-tag.primary{background:var(--color-primary-100);color:var(--color-primary-700)}.flavor-tag.secondary{background:var(--color-neutral-200);color:var(--color-text-secondary)}.flavor-tag.aroma{background:var(--color-success-100, #d1fae5);color:var(--color-success-700, #047857)}.confidence-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-neutral-100)}.confidence-label{font-size:var(--font-size-xs);color:var(--color-text-muted);white-space:nowrap}.confidence-bar{flex:1;height:6px;background:var(--color-neutral-200);border-radius:var(--radius-full);overflow:hidden}.confidence-fill{height:100%;background:var(--color-success-500);border-radius:var(--radius-full);transition:width .3s ease}.confidence-value{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);min-width:36px;text-align:right}@media (min-width: 640px){.product-header{flex-direction:row;align-items:flex-start}.product-image{max-width:160px}.product-title-section{text-align:left;flex:1}.info-grid{grid-template-columns:repeat(4,1fr)}}.brewing-guide-card{background:var(--color-neutral-50);border-radius:var(--radius-lg);padding:var(--space-4);border:1px solid var(--color-neutral-200)}.brewing-header{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.brewing-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-2);margin:0}.brewing-icon{font-size:var(--font-size-xl)}.recommended-badge{font-size:var(--font-size-sm);color:var(--color-primary-600);background:var(--color-primary-50);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);display:inline-block;width:fit-content}.method-selector{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-neutral-200)}.method-button{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-neutral-100);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;min-width:70px}.method-button:hover{background:var(--color-neutral-200)}.method-button.active{background:var(--color-primary-50);border-color:var(--color-primary-500)}.method-icon{font-size:var(--font-size-xl)}.method-name{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap}.method-button.active .method-name{color:var(--color-primary-700);font-weight:var(--font-weight-medium)}.parameters-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-bottom:var(--space-4)}.parameter-item{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3);background:var(--color-neutral-100);border-radius:var(--radius-md)}.parameter-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.parameter-value{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.brewing-tips{margin-bottom:var(--space-4)}.tips-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin:0 0 var(--space-2) 0}.tips-list{margin:0;padding-left:var(--space-4)}.tip-item{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-1);line-height:var(--line-height-relaxed)}.pairing-notes{display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-3);background:var(--color-primary-50);border-radius:var(--radius-md);font-size:var(--font-size-sm)}.pairing-label{color:var(--color-text-muted)}.pairing-text{color:var(--color-primary-700);font-weight:var(--font-weight-medium)}@media (min-width: 640px){.brewing-header{flex-direction:row;justify-content:space-between;align-items:center}.parameters-grid{grid-template-columns:repeat(4,1fr)}.method-button{flex-direction:row;min-width:auto}}.story-loading-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-5);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm);overflow:hidden}.story-loading-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.story-icon{font-size:1.5rem}.story-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0}.story-loading-content{text-align:center;padding:var(--space-4) 0}.story-loading-animation{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4)}.typewriter-cursor{width:3px;height:24px;background:var(--color-primary-500);animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.loading-dots{display:flex;gap:var(--space-1)}.loading-dots span{width:8px;height:8px;background:var(--color-primary-400);border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.story-loading-text{color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:1.6;margin-bottom:var(--space-4);max-width:400px;margin-left:auto;margin-right:auto}.story-loading-steps{display:flex;flex-direction:column;gap:var(--space-2);max-width:250px;margin:0 auto}.loading-step{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-neutral-50);border-radius:var(--radius-md);opacity:.5;transition:all .3s}.loading-step.active{opacity:1;background:var(--color-primary-50);animation:pulse 2s infinite}.step-icon{font-size:1.25rem}.step-text{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.story-error .story-error-content{text-align:center;padding:var(--space-4)}.story-error-message{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-bottom:var(--space-4)}.story-retry-button{padding:var(--space-2) var(--space-4);background:var(--color-primary-100);color:var(--color-primary-700);border:none;border-radius:var(--radius-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:background .2s}.story-retry-button:hover{background:var(--color-primary-200)}.story-success .story-content{color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:1.7}.story-headline{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-4);text-align:center}.story-paragraph{margin:0 0 var(--space-3)}.story-paragraph:last-child{margin-bottom:0}.story-part{margin-bottom:var(--space-4);padding:var(--space-3);background:var(--color-primary-50);border-radius:var(--radius-lg)}.story-part:last-child{margin-bottom:0}.story-part-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-primary-700);margin:0 0 var(--space-2)}.story-part p{margin:0;font-size:var(--font-size-sm)}.story-fact{display:flex;gap:var(--space-3);padding:var(--space-4);background:linear-gradient(135deg,var(--color-warning-50) 0%,var(--color-primary-50) 100%);border-radius:var(--radius-lg);margin-top:var(--space-4)}.fact-icon{font-size:1.5rem;flex-shrink:0}.story-fact p{margin:0;font-size:var(--font-size-sm)}.story-fact strong{color:var(--color-text-primary)}@media (min-width: 640px){.story-loading-card{padding:var(--space-6)}.story-loading-steps{flex-direction:row;max-width:100%;justify-content:center}.loading-step{flex:1;max-width:180px}}@media (min-width: 1024px){.story-success .story-content{font-size:var(--font-size-base)}.story-part{padding:var(--space-4)}}.coffee-scanner-feature{min-height:100vh;background:var(--color-neutral-50);padding:var(--space-4);padding-bottom:calc(var(--space-8) + 60px)}.scanner-header{text-align:center;margin-bottom:var(--space-6)}.scanner-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-2) 0;display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.scanner-icon{font-size:var(--font-size-3xl)}.scanner-subtitle{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0}.scanner-section{max-width:500px;margin:0 auto}.loading-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8) var(--space-4);text-align:center;min-height:300px}.loading-animation{margin-bottom:var(--space-6)}.coffee-cup-loader{position:relative;width:80px;height:80px}.cup{position:absolute;bottom:0;left:10px;width:60px;height:50px;background:var(--color-primary-600);border-radius:5px 5px 25px 25px}.cup:before{content:"";position:absolute;top:10px;right:-15px;width:15px;height:30px;border:4px solid var(--color-primary-600);border-left:none;border-radius:0 10px 10px 0}.steam{position:absolute;bottom:55px;left:50%;width:6px;height:20px;background:var(--color-neutral-400);border-radius:10px;opacity:0;animation:steam 1.5s ease-out infinite}.steam-2{left:calc(50% - 12px);animation-delay:.3s}.steam-3{left:calc(50% + 12px);animation-delay:.6s}@keyframes steam{0%{opacity:0;transform:translateY(0) scaleX(1)}15%{opacity:.8}50%{opacity:.5;transform:translateY(-15px) scaleX(1.2)}to{opacity:0;transform:translateY(-30px) scaleX(.8)}}.loading-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2) 0}.loading-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0 0 var(--space-4) 0}.barcode-display{display:inline-flex;align-items:center;gap:var(--space-2);background:#f0e8e2;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md)}.barcode-label{font-size:var(--font-size-sm);color:var(--color-text-muted)}.barcode-value{font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.error-section{display:flex;flex-direction:column;align-items:center;padding:var(--space-8) var(--space-4);text-align:center}.error-icon{font-size:48px;margin-bottom:var(--space-4)}.error-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2) 0}.error-message{font-size:var(--font-size-base);color:var(--color-danger-600, #dc2626);margin:0 0 var(--space-4) 0}.error-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4)}.result-section{display:flex;flex-direction:column;gap:var(--space-4);max-width:600px;margin:0 auto}.scan-success-banner{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);background:var(--color-success-100, #d1fae5);border-radius:var(--radius-lg)}.success-icon{color:var(--color-success-600, #059669);font-weight:var(--font-weight-bold);font-size:var(--font-size-lg)}.success-text{font-weight:var(--font-weight-semibold);color:var(--color-success-700, #047857)}.scan-time{font-size:var(--font-size-sm);color:var(--color-success-600, #059669);margin-left:var(--space-2)}.story-section{background:var(--color-neutral-50);border-radius:var(--radius-lg);padding:var(--space-4);border:1px solid var(--color-neutral-200)}.story-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-4) 0}.story-icon{font-size:var(--font-size-xl)}.story-content{font-family:var(--font-family-serif);font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:var(--color-text-secondary)}.story-content p{margin:0 0 var(--space-4) 0}.story-content p:last-child{margin-bottom:0}.action-section{padding:var(--space-4) 0;text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease;border:none;min-height:48px}.btn-primary{background:var(--color-primary-500);color:var(--color-neutral-50)}.btn-secondary{background:var(--color-neutral-200);color:var(--color-text-primary)}.btn-secondary:hover{background:var(--color-neutral-300)}.btn-large{padding:var(--space-4) var(--space-6);font-size:var(--font-size-lg);min-height:56px}.btn-icon{font-size:var(--font-size-lg)}@media (min-width: 640px){.coffee-scanner-feature{padding:var(--space-6)}.scanner-title{font-size:var(--font-size-3xl)}.result-section{max-width:700px}}@media (min-width: 1024px){.coffee-scanner-feature{max-width:var(--container-xl);margin:0 auto;padding-bottom:var(--space-8)}}.scanner-page{min-height:100vh;background:var(--color-neutral-50)}.flavor-wheel-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--color-neutral-50);border-radius:var(--radius-lg);border:var(--border-width-thin) solid var(--color-neutral-200)}.flavor-wheel-title{font-family:var(--font-family-serif);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0;text-align:center}.flavor-wheel-wrapper{position:relative;width:100%;max-width:320px}.flavor-wheel-svg{width:100%;height:auto;display:block}.flavor-wheel-background{fill:var(--color-primary-50);stroke:var(--color-neutral-300);stroke-width:1}.flavor-wheel-grid-circle{fill:none;stroke:var(--color-neutral-200);stroke-width:.5;stroke-dasharray:4 4}.flavor-wheel-spoke{stroke:var(--color-neutral-300);stroke-width:1;transition:stroke .2s ease,stroke-width .2s ease}.flavor-wheel-spoke.active{stroke:var(--color-primary-500);stroke-width:2}.flavor-wheel-polygon{fill-opacity:.3;stroke:var(--color-primary-500);stroke-width:2;stroke-linejoin:round;transition:fill-opacity .2s ease}.flavor-wheel-container:hover .flavor-wheel-polygon{fill-opacity:.4}.flavor-wheel-point-hitarea{fill:transparent;cursor:pointer}.flavor-wheel-point{stroke:#fff;stroke-width:2;transition:r .2s ease,stroke-width .2s ease;pointer-events:none}.flavor-wheel-point.active{stroke-width:3}.flavor-wheel-label{font-family:var(--font-family-sans);font-size:var(--font-size-xs);fill:var(--color-text-muted);transition:fill .2s ease,font-weight .2s ease;pointer-events:none}.flavor-wheel-label.active{font-weight:var(--font-weight-semibold)}.flavor-wheel-tooltip{position:absolute;transform:translate(-50%);background:var(--color-neutral-800);color:#fff;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);white-space:nowrap;z-index:100;pointer-events:none;box-shadow:var(--shadow-lg);animation:tooltip-fade-in .15s ease-out}.flavor-wheel-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--color-neutral-800)}@keyframes tooltip-fade-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.tooltip-path{font-weight:var(--font-weight-medium);margin-bottom:var(--space-1);color:var(--color-primary-100)}.tooltip-intensity{color:var(--color-neutral-300)}.tooltip-intensity strong{color:#fff}.flavor-wheel-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);padding-top:var(--space-2);border-top:var(--border-width-thin) solid var(--color-neutral-200);width:100%}.legend-item{display:flex;align-items:center;gap:var(--space-1)}.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.legend-label{font-size:var(--font-size-xs);color:var(--color-text-muted)}.flavor-wheel-empty{min-height:200px;justify-content:center}.flavor-wheel-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--color-text-muted)}.flavor-wheel-placeholder-icon{font-size:var(--font-size-4xl);opacity:.5}.flavor-wheel-placeholder p{margin:0;font-size:var(--font-size-sm)}@media (min-width: 640px){.flavor-wheel-container{padding:var(--space-6)}.flavor-wheel-wrapper{max-width:400px}.flavor-wheel-title{font-size:var(--font-size-xl)}.flavor-wheel-label,.legend-label{font-size:var(--font-size-sm)}}@media (min-width: 1024px){.flavor-wheel-wrapper{max-width:480px}}.coffee-product-page{min-height:100vh;background:var(--color-neutral-50);padding-bottom:var(--space-8)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:var(--space-8);text-align:center}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-primary-100);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--space-4)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:var(--space-8);text-align:center}.error-icon{font-size:4rem;margin-bottom:var(--space-4)}.error-container h2{color:var(--color-text-primary);margin-bottom:var(--space-2)}.error-container p{color:var(--color-text-muted);margin-bottom:var(--space-6)}.enrichment-banner{margin:var(--space-4);padding:var(--space-4);background:linear-gradient(135deg,var(--color-primary-50),var(--color-info-50, #eff6ff));border:1px solid var(--color-primary-200);border-radius:var(--radius-lg);text-align:center}.enrichment-message{display:flex;align-items:center;justify-content:center;gap:var(--space-2);color:var(--color-text-secondary);margin-bottom:var(--space-3);font-size:var(--font-size-sm)}.enrichment-icon{font-size:var(--font-size-lg)}.enrichment-button{background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;min-height:44px;transition:background-color .2s ease,transform .1s ease}.enrichment-button:hover{background:var(--color-primary-600)}.enrichment-button:active{transform:scale(.98)}.enrichment-button:disabled{opacity:.6;cursor:not-allowed}.enrichment-loading{display:flex;align-items:center;justify-content:center;gap:var(--space-3);color:var(--color-primary-700);font-size:var(--font-size-sm);animation:pulse 2s ease-in-out infinite}.enrichment-spinner{width:20px;height:20px;border:2px solid var(--color-primary-200);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite}.enrichment-error{color:var(--color-danger-600, #dc2626);font-size:var(--font-size-xs);margin-top:var(--space-2)}.error-actions{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:280px}.btn-primary,.btn-secondary{padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:500;cursor:pointer;min-height:48px;border:none;transition:all .2s}.btn-primary{background:var(--color-primary-500);color:#fff}.btn-secondary{background:var(--color-neutral-100);color:var(--color-text-primary)}.product-hero{position:relative;padding:var(--space-6) var(--space-4);padding-top:var(--space-14, 3.5rem);background:#fff;text-align:center}.back-button{position:absolute;top:var(--space-4);left:var(--space-4);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;border:none;border-radius:var(--radius-full);font-size:var(--font-size-lg);cursor:pointer;box-shadow:0 2px 8px #0000001a;transition:all .2s}.back-button:hover{background:var(--color-neutral-100);transform:scale(1.05)}.hero-actions{position:absolute;top:var(--space-4);right:var(--space-4);display:flex;gap:var(--space-2)}.favorite-button,.share-button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;border:none;border-radius:var(--radius-full);font-size:var(--font-size-lg);cursor:pointer;box-shadow:0 2px 8px #0000001a;transition:all .2s}.favorite-button:hover,.share-button:hover{background:var(--color-neutral-100);transform:scale(1.05)}.favorite-button.favorited{background:var(--color-primary-50)}.favorite-button:disabled{cursor:not-allowed;opacity:.7}.product-image-container{display:flex;justify-content:center;margin-bottom:var(--space-4)}.product-hero-image{width:160px;height:160px;object-fit:contain;border-radius:var(--radius-xl);background:#fff;box-shadow:0 4px 16px #0000001a}.product-hero-content{padding:0 var(--space-2)}.product-name{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-1);line-height:1.3}.product-brand{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.product-barcode{margin:0}.product-barcode code{font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-text-muted);background:#0000000d;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md)}.main-info-section{padding:var(--space-4);background:#fff;margin-bottom:var(--space-2)}.main-info-section h2{font-size:var(--font-size-lg);color:var(--color-text-primary);margin-bottom:var(--space-4);font-weight:600}.main-info-grid{display:flex;flex-direction:column;gap:var(--space-2)}.main-info-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);background:var(--color-neutral-50);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;text-align:left;transition:all .2s;min-height:56px}.main-info-item:hover{background:var(--color-primary-50);border-color:var(--color-primary-200)}.main-info-item:active{transform:scale(.98)}.info-icon{font-size:var(--font-size-xl);flex-shrink:0}.info-label{font-size:var(--font-size-xs);color:var(--color-text-muted);display:block;flex-shrink:0;min-width:85px}.info-value{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:500;flex:1;margin-left:var(--space-2)}.flavor-profile-section{padding:var(--space-4);background:#fff;margin-bottom:var(--space-2);width:100%}.flavor-profile-section h2{font-size:var(--font-size-lg);color:var(--color-text-primary);margin-bottom:var(--space-4);font-weight:600;text-align:center}.flavor-wheel-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;margin:0 auto}.ml-status{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--font-size-sm);margin-bottom:var(--space-3);text-align:center}.ml-status.loading{background:var(--color-neutral-100);color:var(--color-text-muted)}.ml-status.warning{background:var(--color-warning-50);color:var(--color-warning-700)}.ml-status.success{background:var(--color-success-50);color:var(--color-success-700)}.flavor-wheel-container{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto var(--space-4);padding:var(--space-2);overflow:visible}.flavor-wheel-container>div{display:flex;justify-content:center}.flavor-wheel-container svg{max-width:100%;overflow:visible;display:block;margin:0 auto}.no-flavor-data{padding:var(--space-6);text-align:center;color:var(--color-text-muted);font-style:italic}.cupping-scores{width:100%;padding:var(--space-4);background:var(--color-neutral-50);border-radius:var(--radius-lg)}.cupping-scores h3{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3);font-weight:600}.scores-grid{display:flex;flex-direction:column;gap:var(--space-2)}.score-item{display:flex;align-items:center;gap:var(--space-3)}.score-item .score-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);width:90px;flex-shrink:0}.score-item .score-track{flex:1;height:8px;background:var(--color-neutral-200);border-radius:var(--radius-full);overflow:hidden}.score-item .score-fill{height:100%;background:linear-gradient(90deg,var(--color-primary-400),var(--color-primary-600));border-radius:var(--radius-full);transition:width .5s ease}.score-item .score-value{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:600;width:36px;text-align:right}.total-score{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-3);margin-top:var(--space-3);border-top:1px solid var(--color-border)}.total-cup-points{display:flex;align-items:baseline;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));border-radius:var(--radius-lg);margin-top:var(--space-3)}.total-cup-points .total-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500}.total-cup-points .total-value{font-size:var(--font-size-2xl);color:var(--color-primary-700);font-weight:700}.total-cup-points .total-max{font-size:var(--font-size-sm);color:var(--color-text-muted)}.total-label{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:600}.total-value{font-size:var(--font-size-xl);color:var(--color-primary-600);font-weight:700}.story-section{padding:var(--space-4);background:#fff;margin-bottom:var(--space-2)}.story-section h2{font-size:var(--font-size-lg);color:var(--color-text-primary);margin-bottom:var(--space-4);font-weight:600}.story-content{color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:1.7}.story-content h3{color:var(--color-text-primary);font-size:var(--font-size-lg);margin-bottom:var(--space-3)}.story-content p{margin-bottom:var(--space-4)}.story-content blockquote{font-style:italic;padding:var(--space-4);background:var(--color-primary-50);border-left:4px solid var(--color-primary-500);margin:var(--space-4) 0;border-radius:0 var(--radius-md) var(--radius-md) 0}.story-content .interesting-fact{display:flex;gap:var(--space-2);padding:var(--space-3);background:var(--color-info-50);border-radius:var(--radius-lg);margin:var(--space-4) 0}.entity-sections{padding:var(--space-4);background:#fff;margin-bottom:var(--space-2)}.entity-sections h2{font-size:var(--font-size-lg);color:var(--color-text-primary);margin-bottom:var(--space-4);font-weight:600}.collapsible-section{margin-bottom:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-neutral-50)}.collapsible-section.expanded{border-color:var(--color-primary-200);background:#fff}.collapsible-header{display:flex;align-items:center;width:100%;padding:var(--space-4);background:transparent;border:none;cursor:pointer;text-align:left;min-height:56px;transition:background .2s}.collapsible-header:hover{background:#00000005}.collapsible-icon{font-size:var(--font-size-lg);margin-right:var(--space-3);flex-shrink:0}.collapsible-title{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapsible-arrow{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-left:var(--space-2)}.collapsible-content{padding:0 var(--space-4) var(--space-4);animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.entity-detail{padding:var(--space-3);background:var(--color-neutral-50);border-radius:var(--radius-lg)}.entity-detail h4{font-size:var(--font-size-base);color:var(--color-text-primary);font-weight:600;margin-bottom:var(--space-2)}.entity-detail>p{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-3)}.entity-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-bottom:var(--space-3)}.fact-item{display:flex;flex-direction:column;gap:var(--space-1)}.fact-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.fact-value{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:500}.fact-link{font-size:var(--font-size-sm);color:var(--color-primary-500);text-decoration:none;word-break:break-all}.fact-link:hover{text-decoration:underline}.flavor-notes{padding:var(--space-3);background:var(--color-primary-50);border-radius:var(--radius-md)}.notes-label{display:block;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:.5px}.notes-value{font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:1.5}.entity-fallback{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-style:italic}.entities-loading{padding:var(--space-4);text-align:center;color:var(--color-text-muted)}.product-footer{padding:var(--space-4);padding-bottom:var(--space-8);text-align:center}.scan-another-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-full);font-size:var(--font-size-base);font-weight:600;cursor:pointer;min-height:52px;transition:all .2s;box-shadow:0 4px 16px #8b5a2b4d}.scan-another-btn:hover{background:var(--color-primary-600);transform:translateY(-2px);box-shadow:0 6px 20px #8b5a2b66}.scan-another-btn:active{transform:translateY(0)}@media (min-width: 640px){.coffee-product-page{max-width:600px;margin:0 auto}.product-hero-image{width:200px;height:200px}.product-name{font-size:var(--font-size-2xl)}.main-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.error-actions{flex-direction:row;justify-content:center}}@media (min-width: 1024px){.coffee-product-page{max-width:800px}.main-info-grid{grid-template-columns:repeat(3,1fr)}.entity-facts{grid-template-columns:repeat(4,1fr)}.flavor-wheel-container{max-width:400px}}.equipment-multiselect{margin-bottom:var(--space-4)}.multiselect-label{display:flex;align-items:center;gap:var(--space-2);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-2);font-size:var(--font-size-sm)}.label-icon{font-size:var(--font-size-lg)}.selected-count{font-weight:400;color:var(--color-text-muted);font-size:var(--font-size-xs)}.multiselect-trigger{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:var(--space-2) var(--space-3);background:var(--color-neutral-50);border:2px solid var(--color-neutral-200);border-radius:var(--radius-md);cursor:pointer;transition:border-color .2s,box-shadow .2s}.multiselect-trigger:hover{border-color:var(--color-primary-400)}.multiselect-trigger:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #8b5a2b1a}.multiselect-trigger.open{border-color:var(--color-primary-500);border-bottom-left-radius:0;border-bottom-right-radius:0}.selected-items{display:flex;flex-wrap:wrap;gap:var(--space-1);flex:1}.placeholder{color:var(--color-text-muted)}.selected-tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:var(--color-primary-100);color:var(--color-primary-800);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:var(--color-primary-200);color:var(--color-primary-700);border-radius:50%;cursor:pointer;font-size:12px;line-height:1;flex-shrink:0}.tag-remove:hover{background:var(--color-primary-300)}.more-count{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);background:var(--color-neutral-200);color:var(--color-text-secondary);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500}.trigger-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-2)}.clear-all{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:var(--color-neutral-200);color:var(--color-text-muted);border-radius:50%;cursor:pointer;font-size:14px}.clear-all:hover{background:var(--color-danger-100);color:var(--color-danger-600)}.dropdown-arrow{font-size:10px;color:var(--color-text-muted);transition:transform .2s}.dropdown-arrow.open{transform:rotate(180deg)}.multiselect-dropdown{position:absolute;left:0;right:0;background:#fff;border:2px solid var(--color-primary-500);border-top:none;border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);z-index:100;box-shadow:var(--shadow-lg);max-height:350px;display:flex;flex-direction:column}.equipment-multiselect{position:relative}.search-container{position:relative;padding:var(--space-2);border-bottom:1px solid var(--color-neutral-200)}.search-input{width:100%;padding:var(--space-2) var(--space-3);padding-right:var(--space-8);border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);font-size:var(--font-size-sm);background:var(--color-neutral-50)}.search-input:focus{outline:none;border-color:var(--color-primary-400)}.search-clear{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);width:20px;height:20px;padding:0;border:none;background:var(--color-neutral-200);color:var(--color-text-muted);border-radius:50%;cursor:pointer;font-size:12px}.search-clear:hover{background:var(--color-neutral-300)}.options-list{flex:1;overflow-y:auto;max-height:250px}.option-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color .15s}.option-item:hover{background:var(--color-neutral-100)}.option-item.selected{background:var(--color-primary-50)}.option-item.selected:hover{background:var(--color-primary-100)}.checkbox{font-size:var(--font-size-lg);color:var(--color-primary-500)}.option-item:not(.selected) .checkbox{color:var(--color-neutral-400)}.option-label{font-size:var(--font-size-sm);color:var(--color-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:var(--space-2)}.option-item.add-custom{background:var(--color-success-50);border-bottom:1px solid var(--color-neutral-200)}.option-item.add-custom:hover{background:var(--color-success-100)}.add-icon{font-size:var(--font-size-lg);color:var(--color-success-600);font-weight:700}.option-item.custom-item{background:var(--color-info-50)}.option-item.custom-item.selected{background:var(--color-primary-100)}.custom-badge{font-size:var(--font-size-xs);padding:1px 6px;background:var(--color-info-100);color:var(--color-info-700);border-radius:var(--radius-sm);margin-left:var(--space-1)}.no-results{padding:var(--space-6);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm)}.dropdown-footer{padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}.item-count{font-size:var(--font-size-xs);color:var(--color-text-muted)}@media (max-width: 640px){.multiselect-dropdown{position:fixed;left:var(--space-4);right:var(--space-4);bottom:0;top:auto;max-height:60vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:2px solid var(--color-primary-500)}.selected-tag{max-width:120px}}.profile-page{padding:var(--space-4);max-width:800px;margin:0 auto;min-height:100vh;background:var(--color-neutral-50)}.profile-header{text-align:center;margin-bottom:var(--space-6)}.profile-header h1{font-family:var(--font-family-serif);font-size:var(--font-size-2xl);color:var(--color-text-primary);margin-bottom:var(--space-2)}.profile-subtitle{color:var(--color-text-muted);font-size:var(--font-size-sm)}.profile-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);gap:var(--space-4)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-primary-100);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite}.profile-error,.profile-success{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2)}.profile-error{background:var(--color-danger-50, #fef2f2);color:var(--color-danger-700, #b91c1c);border:1px solid var(--color-danger-200, #fecaca)}.profile-success{background:var(--color-success-50, #f0fdf4);color:var(--color-success-700, #15803d);border:1px solid var(--color-success-200, #bbf7d0)}.profile-section{background:#fff;border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4);box-shadow:0 1px 3px #0000001a}.section-description{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-top:calc(-1 * var(--space-2));margin-bottom:var(--space-4)}.profile-section h2{font-family:var(--font-family-serif);font-size:var(--font-size-lg);color:var(--color-text-primary);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-200)}.form-group label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-1)}.form-group input,.form-group textarea{width:100%;padding:var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);color:var(--color-text-primary);background:#fff;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.form-group input.input-disabled{background:var(--color-neutral-100);color:var(--color-text-muted);cursor:not-allowed}.form-group textarea{resize:vertical;min-height:80px}.preference-group{margin-bottom:var(--space-5)}.preference-group h3{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-1)}.preference-hint{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.chip-grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}.chip{padding:var(--space-2) var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-full);background:#fff;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all .2s;min-height:36px}.chip:hover{border-color:var(--color-primary-400);background:var(--color-primary-50)}.chip.chip-selected{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.chip.chip-selected:hover{background:var(--color-primary-600);border-color:var(--color-primary-600)}.profile-role-section{background:var(--color-primary-50)}.role-badge-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}.role-badge{display:inline-block;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600;text-transform:capitalize}.role-badge.role-admin{background:var(--color-primary-500);color:#fff}.role-badge.role-beta_tester{background:var(--color-info-500);color:#fff}.role-badge.role-user{background:var(--color-neutral-500);color:#fff}.role-badge.role-roaster{background:var(--color-warning-500);color:#fff}.role-badge.role-farm{background:var(--color-success-500);color:#fff}.role-description{font-size:var(--font-size-sm);color:var(--color-text-muted)}.profile-actions{padding:var(--space-4) 0;text-align:center}.btn-save{background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-3) var(--space-8);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:background .2s;min-height:48px;min-width:160px}.btn-save:hover:not(:disabled){background:var(--color-primary-600)}@media (min-width: 640px){.profile-page{padding:var(--space-6)}.profile-header h1{font-size:var(--font-size-3xl)}.profile-section{padding:var(--space-6)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}}@media (min-width: 1024px){.profile-page{padding:var(--space-8)}.profile-content{display:grid;grid-template-columns:1fr;gap:var(--space-4)}}.favorites-page{min-height:100vh;padding:var(--space-4);background:var(--color-primary-50)}.favorites-header{text-align:center;margin-bottom:var(--space-6)}.favorites-header h1{font-family:var(--font-family-serif);font-size:var(--font-size-2xl);color:var(--color-text-primary);margin:0 0 var(--space-2);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.favorites-count{color:var(--color-text-muted);font-size:var(--font-size-sm);margin:0}.favorites-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);color:var(--color-text-muted)}.favorites-auth-required{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);text-align:center}.favorites-auth-required h2{font-family:var(--font-family-serif);color:var(--color-text-primary);margin:0 0 var(--space-2)}.favorites-auth-required p{color:var(--color-text-muted);margin:0 0 var(--space-6)}.favorites-error{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-danger-50);border:1px solid var(--color-danger-200);border-radius:var(--radius-md);color:var(--color-danger-700);margin-bottom:var(--space-4)}.favorites-error button{margin-left:auto;background:none;border:none;color:var(--color-danger-700);cursor:pointer;font-size:var(--font-size-sm);text-decoration:underline}.favorites-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);text-align:center}.empty-icon{font-size:4rem;margin-bottom:var(--space-4);opacity:.5}.favorites-empty h2{font-family:var(--font-family-serif);color:var(--color-text-primary);margin:0 0 var(--space-2)}.favorites-empty p{color:var(--color-text-muted);margin:0 0 var(--space-6);max-width:300px}.favorites-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);max-width:800px;margin:0 auto}.favorite-card{display:flex;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.favorite-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.favorite-image{width:100px;min-width:100px;height:100px;cursor:pointer}.favorite-image img{width:100%;height:100%;object-fit:cover}.favorite-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-primary-100);color:var(--color-primary-500);font-size:2rem}.favorite-content{flex:1;padding:var(--space-3);display:flex;flex-direction:column}.favorite-name{font-family:var(--font-family-serif);font-size:var(--font-size-base);color:var(--color-text-primary);margin:0 0 var(--space-1);cursor:pointer;line-height:1.3}.favorite-name:hover{color:var(--color-primary-600)}.favorite-origin{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0 0 var(--space-1)}.origin-icon{font-size:.9em}.favorite-barcode{font-family:var(--font-family-mono);font-size:var(--font-size-xs);color:var(--color-text-muted);background:#f0e8e2;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);margin:0 0 var(--space-2);width:fit-content}.favorite-actions{display:flex;gap:var(--space-2);margin-top:auto}.btn-log{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:background var(--transition-fast)}.btn-log:hover{background:var(--color-primary-600)}.btn-remove{display:flex;align-items:center;justify-content:center;padding:var(--space-2);background:var(--color-neutral-100);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);min-width:40px}.btn-remove:hover{background:var(--color-danger-100)}.btn-remove:disabled{opacity:.5;cursor:not-allowed}.removing-spinner{width:16px;height:16px;border:2px solid var(--color-neutral-300);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin .8s linear infinite}@media (min-width: 640px){.favorites-page{padding:var(--space-6)}.favorites-header h1{font-size:var(--font-size-3xl)}.favorites-grid{grid-template-columns:repeat(2,1fr)}.favorite-card{flex-direction:column}.favorite-image{width:100%;height:150px}.favorite-content{padding:var(--space-4)}.favorite-name{font-size:var(--font-size-lg)}}@media (min-width: 1024px){.favorites-page{padding:var(--space-8)}.favorites-grid{max-width:1000px}.favorite-image{height:180px}}.btn-new-bag{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-success-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.btn-new-bag:hover{background:var(--color-success-600)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:var(--z-modal)}.new-bag-modal{background:#fff;border-radius:var(--radius-xl);width:100%;max-width:400px;box-shadow:var(--shadow-xl);animation:modalSlideIn .2s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--color-neutral-200)}.modal-header h2{margin:0;font-size:var(--font-size-lg);color:var(--color-text-primary)}.modal-close{background:none;border:none;font-size:1.5rem;color:var(--color-text-muted);cursor:pointer;padding:var(--space-1);line-height:1}.modal-close:hover{color:var(--color-text-primary)}.modal-content{padding:var(--space-4)}.bag-coffee-info{background:var(--color-primary-50);padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.bag-coffee-info h3{margin:0 0 var(--space-1);font-size:var(--font-size-base);color:var(--color-text-primary)}.bag-origin{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}.form-group{margin-bottom:var(--space-4)}.form-group label{display:block;margin-bottom:var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.form-select,.form-input{width:100%;padding:var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);color:var(--color-text-primary);background:#fff}.form-select:focus,.form-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-100)}.modal-footer{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4);border-top:1px solid var(--color-neutral-200)}.modal-footer .btn-secondary{padding:var(--space-2) var(--space-4);background:var(--color-neutral-100);color:var(--color-text-primary);border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer}.modal-footer .btn-primary{padding:var(--space-2) var(--space-4);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer}.modal-footer .btn-primary:disabled{opacity:.6;cursor:not-allowed}.modal-footer .btn-primary:hover:not(:disabled){background:var(--color-primary-600)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}@media (max-width: 480px){.form-row{grid-template-columns:1fr}}.form-input.readonly{background:var(--color-neutral-100);color:var(--color-text-muted);cursor:not-allowed}.loading-story{text-align:center;padding:var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-sm);background:var(--color-primary-50);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.coffee-log-page{min-height:100vh;padding:var(--space-4);background:var(--color-primary-50)}.log-header{text-align:center;margin-bottom:var(--space-6)}.log-header h1{font-family:var(--font-family-serif);font-size:var(--font-size-2xl);color:var(--color-text-primary);margin:0 0 var(--space-2);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.header-icon{font-size:1.5em}.log-subtitle{color:var(--color-text-muted);font-size:var(--font-size-sm);margin:0}.log-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);color:var(--color-text-muted)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-primary-100);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--space-4)}.log-auth-required{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);text-align:center}.auth-icon{font-size:3rem;margin-bottom:var(--space-4)}.log-auth-required h2{font-family:var(--font-family-serif);color:var(--color-text-primary);margin:0 0 var(--space-2)}.log-auth-required p{color:var(--color-text-muted);margin:0 0 var(--space-6)}.log-error{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-danger-50);border:1px solid var(--color-danger-200);border-radius:var(--radius-md);color:var(--color-danger-700);margin-bottom:var(--space-4)}.log-error button{margin-left:auto;background:none;border:none;color:var(--color-danger-700);cursor:pointer;font-size:var(--font-size-sm);text-decoration:underline}.log-section{margin-bottom:var(--space-8);max-width:600px;margin-left:auto;margin-right:auto}.section-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}.section-header h2{font-family:var(--font-family-serif);font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0}.log-section h2{font-family:var(--font-family-serif);font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0 0 var(--space-4)}.coffee-filter-select{padding:var(--space-2) var(--space-3);padding-right:var(--space-8);font-size:var(--font-size-sm);border:1px solid var(--color-primary-200);border-radius:var(--radius-md);background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") right .5rem center / 1rem no-repeat;color:var(--color-text-primary);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;min-width:140px}.coffee-filter-select:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-100)}.log-empty-favorites,.log-empty-brews{text-align:center;padding:var(--space-6);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.log-empty-favorites p,.log-empty-brews p{color:var(--color-text-muted);margin:0 0 var(--space-4)}.empty-icon{font-size:2rem;margin-bottom:var(--space-2);display:block;opacity:.5}.favorites-quick-select{display:flex;flex-direction:column;gap:var(--space-2)}.favorite-quick-card{display:flex;align-items:center;gap:var(--space-2);background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);transition:all var(--transition-fast);width:100%}.favorite-quick-card:hover{border-color:var(--color-primary-300);box-shadow:var(--shadow-sm)}.bag-card-main{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);flex:1;cursor:pointer;text-align:left;background:transparent;border:none;min-width:0}.bag-edit-btn,.bag-delete-btn{padding:var(--space-3);background:transparent;border:none;border-left:1px solid var(--color-neutral-200);cursor:pointer;font-size:1.25rem;color:var(--color-text-muted);transition:all var(--transition-fast);flex-shrink:0}.bag-edit-btn:hover{color:var(--color-primary-500);background:var(--color-primary-50)}.bag-delete-btn:hover:not(:disabled){color:var(--color-danger-500);background:var(--color-danger-50)}.bag-delete-btn.confirm{color:var(--color-danger-600);background:var(--color-danger-100);animation:pulse-danger .5s ease-in-out infinite alternate}@keyframes pulse-danger{0%{background:var(--color-danger-100)}to{background:var(--color-danger-200)}}.bag-delete-btn:disabled{cursor:not-allowed;opacity:.5}.quick-card-image{width:50px;height:50px;border-radius:var(--radius-md);overflow:hidden;flex-shrink:0;background:var(--color-primary-100);display:flex;align-items:center;justify-content:center}.quick-card-image img{width:100%;height:100%;object-fit:cover}.placeholder-icon{font-size:1.5rem;color:var(--color-primary-500)}.quick-card-info{flex:1;display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.quick-card-name{font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-card-origin{font-size:var(--font-size-sm);color:var(--color-text-muted)}.quick-card-remaining{font-size:var(--font-size-xs);color:var(--color-success-600);font-weight:500}.quick-card-arrow{font-size:var(--font-size-xl);color:var(--color-primary-500);flex-shrink:0}.recent-logs-list{display:flex;flex-direction:column;gap:var(--space-2)}.recent-log-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);text-align:left;width:100%}.recent-log-card:hover{border-color:var(--color-primary-300);box-shadow:var(--shadow-sm)}.log-card-method{width:40px;height:40px;border-radius:50%;background:var(--color-primary-100);display:flex;align-items:center;justify-content:center;flex-shrink:0}.method-icon{font-size:1.25rem}.log-card-info{flex:1;display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.log-card-name{font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.log-card-date{font-size:var(--font-size-sm);color:var(--color-text-muted)}.log-card-rating{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);flex-shrink:0}.rating-stars{font-size:var(--font-size-sm);color:var(--color-warning-500);letter-spacing:1px}.best-badge{font-size:var(--font-size-xs);background:var(--color-success-100);color:var(--color-success-700);padding:2px 6px;border-radius:var(--radius-sm);font-weight:500}.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:background var(--transition-fast)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);background:#fff;color:var(--color-primary-500);border:1px solid var(--color-primary-500);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn-secondary:hover{background:var(--color-primary-50)}@media (min-width: 640px){.coffee-log-page{padding:var(--space-6)}.log-header h1{font-size:var(--font-size-3xl)}.log-section{max-width:700px}}@media (min-width: 1024px){.coffee-log-page{padding:var(--space-8)}}.brewing-guide{background:var(--color-neutral-50);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-3);width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden}.brewing-guide-header{background:var(--color-primary-50);padding:var(--space-3);border-bottom:1px solid var(--color-primary-100);box-sizing:border-box}.recipe-info-row{display:flex;align-items:center;gap:var(--space-3);min-width:0}.recipe-icon{font-size:1.5rem;flex-shrink:0}.recipe-info-text{flex:1;min-width:0;overflow:hidden}.recipe-title{margin:0;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recipe-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-close-guide{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm)}.btn-close-guide:hover{background:var(--color-primary-100);color:var(--color-text-primary)}.total-progress{margin-top:var(--space-3);display:flex;align-items:center;gap:var(--space-3)}.progress-bar-container{flex:1;height:6px;background:var(--color-primary-100);border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--color-primary-500);border-radius:3px;transition:width .3s ease}.progress-time{font-size:var(--font-size-sm);font-weight:600;color:var(--color-primary-700);white-space:nowrap}.brewing-ready{padding:var(--space-4);text-align:center}.ready-description{margin:0 0 var(--space-4);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.ready-info{display:flex;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}.info-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:60px}.info-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase}.info-value{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary)}.btn-start-brew{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:background .2s ease}.btn-start-brew:hover{background:var(--color-primary-600)}.btn-start-brew:active{transform:scale(.98)}.brewing-stages{padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-3);max-height:400px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.stage-card{background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);padding:var(--space-3);transition:all .3s ease;opacity:.5;box-sizing:border-box;overflow:hidden;word-wrap:break-word;min-width:0}.stage-card.active{opacity:1;border-color:var(--color-primary-400);box-shadow:0 2px 8px #8b5a2b26}.stage-card.completed{opacity:.7;background:var(--color-success-50);border-color:var(--color-success-200)}.stage-header{display:flex;align-items:center;gap:var(--space-3)}.stage-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-neutral-100);border-radius:50%;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);flex-shrink:0}.stage-card.active .stage-number{background:var(--color-primary-500);color:#fff}.stage-card.completed .stage-number{background:var(--color-success-500);color:#fff}.stage-title-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-width:0;overflow:hidden}.stage-name{margin:0;font-size:var(--font-size-base);font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}.stage-timer{display:flex;align-items:baseline;gap:2px;font-family:var(--font-family-mono)}.timer-current{font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary-600)}.timer-separator{color:var(--color-text-muted)}.timer-total,.stage-duration{font-size:var(--font-size-sm);color:var(--color-text-muted)}.stage-progress{margin-top:var(--space-2);height:4px;background:var(--color-primary-100);border-radius:2px;overflow:hidden}.stage-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary-400),var(--color-primary-600));border-radius:2px;transition:width .3s linear}.stage-details{margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--color-neutral-100);word-wrap:break-word;overflow-wrap:break-word}.stage-water{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-sm);flex-wrap:wrap}.water-amount{font-weight:600;color:var(--color-info-600)}.water-rate{color:var(--color-text-muted);text-transform:capitalize}.stage-notes{margin:var(--space-2) 0 0;font-size:var(--font-size-sm);color:var(--color-text-secondary);font-style:italic;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}.brewing-complete{padding:var(--space-6);text-align:center;background:linear-gradient(135deg,var(--color-success-50),var(--color-primary-50))}.complete-icon{font-size:3rem;margin-bottom:var(--space-2)}.brewing-complete h4{margin:0 0 var(--space-2);font-size:var(--font-size-xl);color:var(--color-text-primary)}.brewing-complete p{margin:0;color:var(--color-text-secondary)}@media (max-width: 480px){.ready-info{gap:var(--space-3)}.info-item{min-width:50px}.brewing-stages{max-height:350px;padding:var(--space-2)}.stage-card{padding:var(--space-2)}.stage-timer{flex-shrink:0}.stage-header{flex-wrap:wrap}.stage-title-row{flex-wrap:nowrap}.stage-name{font-size:var(--font-size-sm)}}.recipe-picker{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;overflow-x:hidden;min-width:0}.recipe-picker *{max-width:100%;box-sizing:border-box}.selected-recipe{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);background:var(--color-primary-50);border:1px solid var(--color-primary-200);border-radius:var(--radius-md);min-width:0;box-sizing:border-box;overflow:hidden;max-width:100%}.selected-recipe-info{display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:0}.selected-recipe .recipe-method-icon{font-size:1.5rem;flex-shrink:0}.selected-recipe .recipe-details{display:flex;flex-direction:column;min-width:0}.selected-recipe .recipe-name{font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-recipe .recipe-meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}.selected-recipe-actions{display:flex;gap:var(--space-1);flex-shrink:0}.btn-icon-action{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1rem;background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.btn-icon-action:hover{border-color:var(--color-primary-400);background:var(--color-primary-50)}.btn-icon-action.btn-clear{font-size:1.2rem;border:none;background:transparent}.btn-icon-action.btn-clear:hover{color:var(--color-danger-500);background:transparent}.btn-change-recipe{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer}.btn-clear-recipe{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer}.btn-clear-recipe:hover{color:var(--color-danger-500)}.btn-pick-recipe{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);background:#fff;border:2px dashed var(--color-neutral-300);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--font-size-base);cursor:pointer;transition:all .2s ease}.btn-pick-recipe:hover{border-color:var(--color-primary-400);color:var(--color-primary-600);background:var(--color-primary-50)}.btn-pick-recipe .pick-icon{font-size:1.25rem}.recipe-picker-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:flex-end;justify-content:center;z-index:1000;padding:0}.recipe-picker-content{width:100%;max-width:100vw;max-height:85vh;background:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--color-neutral-200)}.picker-header h3{margin:0;font-size:var(--font-size-lg);color:var(--color-text-primary)}.picker-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:none;border:none;color:var(--color-text-muted);cursor:pointer}.picker-tabs{display:flex;border-bottom:1px solid var(--color-neutral-200)}.picker-tab{flex:1;padding:var(--space-3) var(--space-4);background:none;border:none;border-bottom:2px solid transparent;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-muted);cursor:pointer;transition:all .2s ease}.picker-tab.active{color:var(--color-primary-600);border-bottom-color:var(--color-primary-500)}.picker-search{display:none}.picker-list{flex:1;overflow-y:auto;padding:var(--space-2)}.picker-loading,.picker-empty{padding:var(--space-6);text-align:center;color:var(--color-text-muted)}.picker-recipe-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);margin-bottom:var(--space-2);text-align:left;cursor:pointer;transition:all .2s ease}.picker-recipe-item:hover{background:var(--color-neutral-50);border-color:var(--color-primary-300)}.picker-recipe-item.selected{background:var(--color-primary-50);border-color:var(--color-primary-500)}.picker-recipe-item .item-method-icon{font-size:1.5rem;flex-shrink:0}.picker-recipe-item .item-info{flex:1;min-width:0;display:flex;flex-direction:column}.picker-recipe-item .item-name{font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-recipe-item .item-meta{font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-recipe-item .item-rating{font-size:var(--font-size-sm);color:var(--color-warning-600);font-weight:600;flex-shrink:0}.recipe-dose-section{margin-top:var(--space-3);background:var(--color-neutral-50);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-neutral-200)}.dose-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-3);background:var(--color-primary-50);border:none;cursor:pointer;text-align:left}.dose-header:hover{background:var(--color-primary-100)}.dose-header-left{display:flex;align-items:center;gap:var(--space-3)}.dose-icon{font-size:1.25rem}.dose-header-info{display:flex;flex-direction:column;gap:var(--space-1)}.dose-label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary)}.dose-summary{font-size:var(--font-size-xs);color:var(--color-text-muted)}.dose-toggle{font-size:var(--font-size-xs);color:var(--color-text-muted);transition:transform .2s ease}.dose-toggle.expanded{transform:rotate(180deg)}.dose-content{padding:var(--space-3);border-top:1px solid var(--color-neutral-200)}.dose-row{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-3);align-items:end}.dose-row.brew-params-row{grid-template-columns:1fr 1fr;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px dashed var(--color-neutral-300)}.dose-field{display:flex;flex-direction:column;gap:var(--space-1)}.dose-field label{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-secondary)}.dose-input{padding:var(--space-2) var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);min-height:44px;width:100%;box-sizing:border-box}.dose-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #8b5a2b1a}.dose-input-readonly{background:var(--color-neutral-100);color:var(--color-text-secondary);cursor:not-allowed}.dose-ratio{min-width:60px}.ratio-badge{display:flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-3);background:var(--color-primary-900);color:#fff;border-radius:var(--radius-md);font-weight:700;font-size:var(--font-size-base);min-height:44px}.scaled-stages-preview{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-neutral-200)}.scaled-stages-preview h4{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-2)}.stages-list-preview{display:flex;flex-direction:column;gap:var(--space-1)}.stage-preview-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:#fff;border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.stage-num{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-100);color:var(--color-primary-700);border-radius:50%;font-weight:600;font-size:var(--font-size-xs);flex-shrink:0}.stage-name-preview{flex:1;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-water-preview{font-weight:600;color:var(--color-info-600);flex-shrink:0}.stages-total{margin-top:var(--space-2);padding:var(--space-2);background:var(--color-primary-100);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;color:var(--color-primary-800);text-align:center}@media (max-width: 480px){.dose-row{grid-template-columns:1fr 1fr}.dose-ratio{grid-column:span 2}.ratio-badge{width:100%}}@media (min-width: 640px){.recipe-picker-modal{align-items:center;padding:var(--space-4)}.recipe-picker-content{max-width:500px;border-radius:var(--radius-lg)}}.log-entry-page{min-height:100vh;background:var(--color-primary-50)}.log-entry-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:#fff;border-bottom:1px solid var(--color-neutral-200);position:sticky;top:0;z-index:10}.btn-back{display:flex;align-items:center;padding:var(--space-2);background:none;border:none;color:var(--color-primary-500);font-size:var(--font-size-base);cursor:pointer}.log-entry-header h1{font-family:var(--font-family-serif);font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0}.log-entry-form{padding:var(--space-4);max-width:600px;margin:0 auto}.coffee-info-section{background:linear-gradient(135deg,var(--color-primary-100) 0%,var(--color-primary-50) 100%);border:1px solid var(--color-primary-200)}.coffee-info{display:flex;align-items:center;gap:var(--space-3)}.coffee-icon{font-size:2.5rem;background:#fff;padding:var(--space-3);border-radius:50%;box-shadow:var(--shadow-sm)}.coffee-details h2{font-family:var(--font-family-serif);font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0 0 var(--space-1)}.coffee-barcode{font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-text-muted);background:#f0e8e2;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.coffee-origin{font-size:var(--font-size-sm);color:var(--color-text-secondary);display:block}.coffee-roast-date{font-size:var(--font-size-sm);color:var(--color-text-muted);display:block}.coffee-remaining{font-size:var(--font-size-sm);color:var(--color-success-600);font-weight:500;display:block;margin-top:var(--space-1)}.no-coffee-section{background:var(--color-warning-50);border:1px solid var(--color-warning-200)}.no-coffee-message{text-align:center;padding:var(--space-4)}.no-coffee-message .warning-icon{font-size:2rem;display:block;margin-bottom:var(--space-2)}.no-coffee-message p{color:var(--color-text-secondary);margin:0 0 var(--space-4)}.btn-go-scan{padding:var(--space-3) var(--space-6);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:background var(--transition-fast)}.btn-go-scan:hover{background:var(--color-primary-600)}.form-label{display:block;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-3)}.label-hint{font-weight:400;font-size:var(--font-size-sm);color:var(--color-text-muted)}.form-error{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-danger-50);border:1px solid var(--color-danger-200);border-radius:var(--radius-md);color:var(--color-danger-700);margin-bottom:var(--space-4)}.method-btn{flex:1;min-width:120px;padding:var(--space-3);background:#fff;border:2px solid var(--color-neutral-200);border-radius:var(--radius-md);font-weight:500;color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);position:relative}.method-btn:hover{border-color:var(--color-primary-300);background:var(--color-primary-50)}.method-btn.active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff;box-shadow:0 4px 12px #8b5a2b4d;transform:translateY(-2px)}.method-icon{font-size:1.5rem}.method-name{font-size:var(--font-size-sm)}.method-check{position:absolute;top:var(--space-1);right:var(--space-2);font-size:var(--font-size-sm);background:#fff;color:var(--color-primary-500);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-weight:700}.equipment-header-info .form-label{margin:0}.form-input{width:100%;padding:var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);background:#fff}.form-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #8b5a2b1a}.form-input::placeholder{color:var(--color-text-muted);opacity:.6}.form-select{width:100%;padding:var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);background:#fff;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.form-select:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #8b5a2b1a}.template-description{margin:var(--space-2) 0 0;font-size:var(--font-size-sm);color:var(--color-text-muted)}.prefill-notice{margin:var(--space-2) 0 0;font-size:var(--font-size-sm);color:var(--color-success-600);background:var(--color-success-50);padding:var(--space-2);border-radius:var(--radius-sm)}.params-section{background:var(--color-primary-50);border:1px solid var(--color-primary-100)}.slider-params{display:flex;flex-direction:column;gap:var(--space-4)}.slider-field{display:flex;flex-direction:column;gap:var(--space-2)}.slider-header{display:flex;justify-content:space-between;align-items:center}.slider-header label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500}.slider-value{font-family:var(--font-family-mono);font-size:var(--font-size-base);font-weight:600;color:var(--color-primary-600);background:#fff;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);min-width:60px;text-align:center}.param-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:var(--color-neutral-200);outline:none;cursor:pointer}.param-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--color-primary-500);cursor:pointer;box-shadow:var(--shadow-md);border:3px solid white;transition:transform var(--transition-fast)}.param-slider::-webkit-slider-thumb:hover,.param-slider::-webkit-slider-thumb:active{transform:scale(1.1)}.param-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--color-primary-500);cursor:pointer;box-shadow:var(--shadow-md);border:3px solid white}.slider-labels{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-text-muted)}.param-toggle{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-primary-100)}.toggle-label{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--font-size-base);color:var(--color-text-primary)}.toggle-label input{display:none}.toggle-switch{width:48px;height:28px;background:var(--color-neutral-300);border-radius:14px;position:relative;transition:background var(--transition-fast)}.toggle-switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.toggle-label input:checked+.toggle-switch{background:var(--color-primary-500)}.toggle-label input:checked+.toggle-switch:after{transform:translate(20px)}.dripper-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.dripper-btn{padding:var(--space-2) var(--space-3);background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.dripper-btn.active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.rating-selector-large{display:flex;gap:var(--space-3);justify-content:center;padding:var(--space-2) 0}.star-btn-large{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-4);background:#fff;border:2px solid var(--color-neutral-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);min-width:60px;-webkit-tap-highlight-color:transparent}.star-btn-large:hover{border-color:var(--color-warning-400);transform:scale(1.05)}.star-btn-large.active{background:var(--color-warning-500);border-color:var(--color-warning-600);transform:scale(1.1);box-shadow:0 4px 12px #f59e0b66}.star-btn-large .star-icon{font-size:2rem;color:var(--color-neutral-300);transition:color var(--transition-fast)}.star-btn-large.active .star-icon{color:#fff}.star-btn-large .star-label{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:600}.star-btn-large.active .star-label{color:#fff}.flavor-grid-large{display:flex;flex-wrap:wrap;gap:var(--space-2)}.flavor-chip-large{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:#fff;border:2px solid var(--color-neutral-300);border-radius:999px;font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;min-height:44px}.flavor-chip-large:hover{border-color:var(--color-primary-300);background:var(--color-primary-50)}.flavor-chip-large.active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff;font-weight:600;box-shadow:0 2px 8px #8b5a2b40;transform:scale(1.02)}.flavor-chip-large .check-icon{font-size:.9em;font-weight:700}.form-textarea{width:100%;padding:var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-size-base);resize:vertical;min-height:80px}.form-textarea:focus{outline:none;border-color:var(--color-primary-500)}.tips-section{background:var(--color-info-50);border:1px solid var(--color-info-100)}.tips-list{margin:0;padding-left:var(--space-5)}.tips-list li{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-1)}.form-actions{display:flex;gap:var(--space-3);padding:var(--space-4) 0}.btn-cancel{flex:1;padding:var(--space-3);background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast);min-height:48px}.btn-cancel:hover{background:var(--color-neutral-50)}.btn-save{flex:2;padding:var(--space-3);background:var(--color-primary-500);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;color:#fff;cursor:pointer;transition:all var(--transition-fast);min-height:48px}.btn-save:disabled{background:var(--color-neutral-400);cursor:not-allowed}.param-field.full-width{grid-column:1 / -1}.param-field.full-width label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);display:block}@media (min-width: 640px){.log-entry-form{padding:var(--space-6)}.slider-params{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.flavor-grid-large{gap:var(--space-3)}}.bag-editor-page{min-height:100vh;padding:var(--space-4);padding-bottom:calc(var(--space-8) + 70px);background:var(--color-neutral-50)}.bag-editor-page .page-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.bag-editor-page .back-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-full);cursor:pointer;color:var(--color-text-primary)}.bag-editor-page .page-header h1{font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0;flex:1}.bag-editor-page .auth-required,.bag-editor-page .loading{text-align:center;padding:var(--space-8);color:var(--color-text-muted)}.bag-editor-page .error-message{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--color-danger-50, #fef2f2);border:1px solid var(--color-danger-200, #fecaca);border-radius:var(--radius-md);color:var(--color-danger-700, #b91c1c);margin-bottom:var(--space-4)}.bag-editor-page .error-message button{background:none;border:none;font-size:var(--font-size-lg);color:var(--color-danger-500);cursor:pointer}.bag-form .form-section{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.bag-form .form-section h2{font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0 0 var(--space-4) 0;padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-200)}.bag-form .form-group{margin-bottom:var(--space-4)}.bag-form .form-group:last-child{margin-bottom:0}.bag-form .form-group label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-1)}.bag-form .form-group input,.bag-form .form-group select,.bag-form .form-group textarea{width:100%;padding:var(--space-3);font-size:var(--font-size-base);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:#fff;color:var(--color-text-primary)}.bag-form .form-group input:focus,.bag-form .form-group select:focus,.bag-form .form-group textarea:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.bag-form .form-group textarea{resize:vertical;min-height:80px}.bag-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.bag-form .form-row .form-group{margin-bottom:0}.bag-form .form-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4)}.bag-form .btn-cancel{flex:1;padding:var(--space-4);font-size:var(--font-size-base);font-weight:500;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:#fff;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.bag-form .btn-cancel:hover:not(:disabled){background:var(--color-neutral-100)}.bag-form .btn-save{flex:2;padding:var(--space-4);font-size:var(--font-size-base);font-weight:600;border:none;border-radius:var(--radius-md);background:var(--color-primary-500);color:#fff;cursor:pointer;transition:all .2s ease}.bag-form .btn-save:hover:not(:disabled){background:var(--color-primary-600)}.bag-form .btn-cancel:disabled,.bag-form .btn-save:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 480px){.bag-form .form-row{grid-template-columns:1fr}}.new-bag-page{min-height:100vh;padding:var(--space-4);padding-bottom:calc(var(--space-8) + 70px);background:var(--color-neutral-50)}.new-bag-page .page-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.new-bag-page .back-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-full);cursor:pointer;color:var(--color-text-primary)}.new-bag-page .page-header h1{font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0;flex:1}.new-bag-page .auth-required{text-align:center;padding:var(--space-8);color:var(--color-text-muted)}.new-bag-page .loading-story{text-align:center;padding:var(--space-4);color:var(--color-text-muted);background:var(--color-primary-50);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.new-bag-page .error-message{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--color-danger-50, #fef2f2);border:1px solid var(--color-danger-200, #fecaca);border-radius:var(--radius-md);color:var(--color-danger-700, #b91c1c);margin-bottom:var(--space-4)}.new-bag-page .error-message button{background:none;border:none;font-size:var(--font-size-lg);color:var(--color-danger-500);cursor:pointer}.new-bag-page .no-coffee-selected{text-align:center;padding:var(--space-8);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.new-bag-page .no-coffee-selected p{color:var(--color-text-muted);margin-bottom:var(--space-4)}.new-bag-page .no-coffee-selected .btn-primary{padding:var(--space-3) var(--space-6);font-size:var(--font-size-base);font-weight:500;border:none;border-radius:var(--radius-md);background:var(--color-primary-500);color:#fff;cursor:pointer}.new-bag-page .coffee-info-card{background:linear-gradient(135deg,var(--color-primary-100),var(--color-primary-50));border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);box-shadow:var(--shadow-sm);display:flex;gap:var(--space-4);align-items:center}.new-bag-page .coffee-info-card .coffee-image{flex-shrink:0;width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;background:#fff;box-shadow:0 2px 8px #0000001a}.new-bag-page .coffee-info-card .coffee-image img{width:100%;height:100%;object-fit:cover}.new-bag-page .coffee-info-card .coffee-details{flex:1;min-width:0}.new-bag-page .coffee-info-card .coffee-name{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-1) 0;line-height:1.3}.new-bag-page .coffee-info-card .coffee-brand-roaster{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.new-bag-page .coffee-info-card .coffee-brand-roaster .brand{font-weight:500}.new-bag-page .coffee-info-card .coffee-brand-roaster .separator,.new-bag-page .coffee-info-card .coffee-brand-roaster .roaster{color:var(--color-text-muted)}.new-bag-page .coffee-details-card{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.new-bag-page .coffee-details-card h3{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-3) 0;padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-200)}.new-bag-page .coffee-details-card .details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.new-bag-page .coffee-details-card .detail-item{display:flex;flex-direction:column;gap:var(--space-1)}.new-bag-page .coffee-details-card .detail-label{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.new-bag-page .coffee-details-card .detail-value{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:500}.new-bag-page .coffee-details-card .coffee-barcode{margin:var(--space-3) 0 0 0;padding-top:var(--space-3);border-top:1px solid var(--color-neutral-100);font-size:var(--font-size-xs);color:var(--color-text-muted)}.new-bag-page .coffee-details-card .coffee-barcode code{font-family:var(--font-family-mono);background:var(--color-neutral-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);margin-left:var(--space-1)}.new-bag-page .bag-form .form-section{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.new-bag-page .bag-form .form-section h2{font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0 0 var(--space-4) 0;padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-200)}.new-bag-page .form-group{margin-bottom:var(--space-4)}.new-bag-page .form-group:last-child{margin-bottom:0}.new-bag-page .form-group label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-1)}.new-bag-page .form-group input,.new-bag-page .form-group select,.new-bag-page .form-group textarea{width:100%;padding:var(--space-3);font-size:var(--font-size-base);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:#fff;color:var(--color-text-primary)}.new-bag-page .form-group input:focus,.new-bag-page .form-group select:focus,.new-bag-page .form-group textarea:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.new-bag-page .form-group input.readonly{background:var(--color-neutral-100);color:var(--color-text-muted)}.new-bag-page .form-group textarea{resize:vertical;min-height:80px}.new-bag-page .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.new-bag-page .form-row .form-group{margin-bottom:0}.new-bag-page .form-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4)}.new-bag-page .btn-cancel{flex:1;padding:var(--space-4);font-size:var(--font-size-base);font-weight:500;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:#fff;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.new-bag-page .btn-cancel:hover:not(:disabled){background:var(--color-neutral-100)}.new-bag-page .btn-save{flex:2;padding:var(--space-4);font-size:var(--font-size-base);font-weight:600;border:none;border-radius:var(--radius-md);background:var(--color-primary-500);color:#fff;cursor:pointer;transition:all .2s ease}.new-bag-page .btn-save:hover:not(:disabled){background:var(--color-primary-600)}.new-bag-page .btn-cancel:disabled,.new-bag-page .btn-save:disabled{opacity:.6;cursor:not-allowed}.brew-sessions-page{padding:var(--space-4);max-width:800px;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6);flex-wrap:wrap;gap:var(--space-3)}.page-header h1{font-size:var(--font-size-2xl);color:var(--color-text-primary);margin:0}.header-actions{display:flex;gap:var(--space-2)}.btn-primary{background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:600;cursor:pointer;min-height:44px}.btn-secondary{background:var(--color-neutral-100);color:var(--color-text-primary);border:1px solid var(--color-neutral-300);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:500;cursor:pointer;min-height:44px}.btn-secondary:hover{background:var(--color-neutral-200)}.auth-required{text-align:center;padding:var(--space-8)}.auth-required h2{color:var(--color-text-primary);margin-bottom:var(--space-2)}.auth-required p{color:var(--color-text-muted)}.stats-section{margin-bottom:var(--space-6)}.stats-section h2{font-size:var(--font-size-lg);margin-bottom:var(--space-3);color:var(--color-text-primary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3)}.stat-card{background:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);padding:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}.stat-icon{font-size:var(--font-size-2xl)}.stat-content{display:flex;flex-direction:column}.stat-method{font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-primary)}.stat-count{font-size:var(--font-size-xs);color:var(--color-text-muted)}.stat-rating{font-size:var(--font-size-xs);color:var(--color-primary-500)}.godshots-section{margin-bottom:var(--space-6)}.godshots-section h2{font-size:var(--font-size-lg);margin-bottom:var(--space-3);color:var(--color-text-primary)}.godshots-scroll{display:flex;gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-2);-webkit-overflow-scrolling:touch}.godshot-card{flex-shrink:0;background:linear-gradient(135deg,var(--color-warning-100) 0%,var(--color-warning-50) 100%);border:1px solid var(--color-warning-300);border-radius:var(--radius-md);padding:var(--space-3);display:flex;align-items:center;gap:var(--space-2);cursor:pointer;min-width:160px}.godshot-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.godshot-icon{font-size:var(--font-size-xl)}.godshot-info{display:flex;flex-direction:column}.godshot-coffee{font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.godshot-rating{font-size:var(--font-size-xs);color:var(--color-warning-700);font-weight:600}.filters-section{display:flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-4);flex-wrap:wrap}.filter-group{display:flex;align-items:center;gap:var(--space-2)}.filter-group label{font-size:var(--font-size-sm);color:var(--color-text-muted)}.filter-group select{padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:#fff;min-height:40px}.filter-checkbox{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer}.filter-checkbox input{width:18px;height:18px}.sessions-section h2{font-size:var(--font-size-lg);margin-bottom:var(--space-3);color:var(--color-text-primary)}.loading,.error{text-align:center;padding:var(--space-6);color:var(--color-text-muted)}.error{color:var(--color-danger-500)}.empty-state{text-align:center;padding:var(--space-8);background:var(--color-neutral-50);border-radius:var(--radius-lg)}.empty-state p{color:var(--color-text-muted);margin-bottom:var(--space-4)}.sessions-list{display:flex;flex-direction:column;gap:var(--space-3)}.session-card{background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);padding:var(--space-4);cursor:pointer;transition:all .2s ease}.session-card:hover{border-color:var(--color-primary-300);box-shadow:var(--shadow-sm)}.session-card.godshot{border-left:4px solid var(--color-warning-500);background:linear-gradient(to right,var(--color-warning-50),white)}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.session-method{font-weight:600;color:var(--color-primary-600)}.session-date{font-size:var(--font-size-sm);color:var(--color-text-muted)}.session-coffee{margin-bottom:var(--space-2)}.session-coffee strong{color:var(--color-text-primary)}.session-coffee .roaster{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-left:var(--space-1)}.session-params{display:flex;gap:var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-2)}.session-rating{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.rating-value{font-weight:700;font-size:var(--font-size-lg);color:var(--color-primary-500)}.godshot-badge{background:var(--color-warning-100);color:var(--color-warning-700);font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-weight:600}.session-flavors{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-2)}.flavor-tag{background:var(--color-primary-50);color:var(--color-primary-700);font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.session-recipe{font-size:var(--font-size-sm);color:var(--color-text-muted)}@media (max-width: 480px){.page-header{flex-direction:column;align-items:stretch}.header-actions{flex-direction:column}.session-params{flex-wrap:wrap;gap:var(--space-2)}}.bags-section{margin-bottom:var(--space-6)}.bags-section .section-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.bags-section h2{font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0}.btn-add-bag{background:var(--color-neutral-100);color:var(--color-text-primary);border:1px solid var(--color-neutral-300);padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer}.btn-add-bag:hover{background:var(--color-neutral-200)}.bags-scroll{display:flex;gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-2);-webkit-overflow-scrolling:touch}.bag-card{flex-shrink:0;background:var(--color-primary-50);border:1px solid var(--color-primary-200);border-radius:var(--radius-md);padding:var(--space-3);display:flex;align-items:center;gap:var(--space-3);cursor:pointer;min-width:180px;transition:all .2s ease}.bag-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-primary-400)}.bag-icon{font-size:var(--font-size-xl)}.bag-info{display:flex;flex-direction:column;flex:1;min-width:0}.bag-name{font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bag-roaster{font-size:var(--font-size-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bag-remaining{font-size:var(--font-size-xs);color:var(--color-primary-600);font-weight:500}.bag-arrow{color:var(--color-primary-400);font-size:var(--font-size-lg)}.bags-empty{background:var(--color-neutral-50);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center}.bags-empty p{color:var(--color-text-muted);margin:var(--space-2) 0 var(--space-3)}.bags-primary{background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-6);border:1px solid var(--color-primary-200)}.bags-hint{color:var(--color-text-muted);font-size:var(--font-size-sm);margin:0 0 var(--space-3)}.brew-session-editor{padding:var(--space-4);max-width:800px;margin:0 auto;box-sizing:border-box;overflow-x:hidden}.editor-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}.btn-back{background:none;border:none;color:var(--color-primary-500);font-size:var(--font-size-base);cursor:pointer;padding:var(--space-2)}.editor-header h1{font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0}.recipe-badge{background:var(--color-info-100);color:var(--color-info-700);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--font-size-sm)}.auth-required,.loading{text-align:center;padding:var(--space-8);color:var(--color-text-muted)}.error-message{background:var(--color-danger-100);color:var(--color-danger-700);padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.form-section{background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);max-width:100%;box-sizing:border-box;overflow:hidden}.form-section h2{font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0 0 var(--space-3) 0;padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-100)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.form-field{display:flex;flex-direction:column;gap:var(--space-1)}.form-field.full-width{grid-column:1 / -1}.form-field label{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:500}.form-field input,.form-field select,.form-field textarea{padding:var(--space-2) var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);min-height:44px}.form-field textarea{resize:vertical;min-height:80px}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-100)}.ratio-display{display:flex;align-items:center;padding:var(--space-2) var(--space-3);background:var(--color-neutral-100);border-radius:var(--radius-md);font-weight:600;color:var(--color-primary-600);min-height:44px}.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--space-2)}.method-btn{padding:var(--space-2) var(--space-3);border:2px solid var(--color-neutral-200);border-radius:var(--radius-md);background:#fff;cursor:pointer;font-size:var(--font-size-sm);font-weight:500;transition:all .2s ease;min-height:44px}.method-btn.active{border-color:var(--color-primary-500);background:var(--color-primary-50);color:var(--color-primary-700)}.rating-section{margin-bottom:var(--space-4)}.rating-section label{display:block;font-weight:600;margin-bottom:var(--space-2);color:var(--color-text-primary)}.rating-slider{width:100%;height:8px;accent-color:var(--color-primary-500)}.flavor-section{margin-bottom:var(--space-4)}.flavor-section>label{display:block;font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-2)}.flavor-grid{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-2)}.flavor-btn{padding:var(--space-1) var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);background:#fff;font-size:var(--font-size-xs);cursor:pointer;transition:all .2s ease}.flavor-btn:hover{border-color:var(--color-primary-300)}.flavor-btn.active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}.custom-flavor{display:flex;gap:var(--space-2)}.custom-flavor input{flex:1;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md)}.custom-flavor button{padding:var(--space-2) var(--space-3);background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);cursor:pointer}.issues-section>label{display:block;font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-2)}.issues-grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}.issue-btn{padding:var(--space-1) var(--space-2);border:1px solid var(--color-danger-200);border-radius:var(--radius-sm);background:#fff;font-size:var(--font-size-xs);cursor:pointer;color:var(--color-danger-600)}.issue-btn.active{background:var(--color-danger-500);color:#fff;border-color:var(--color-danger-500)}.wheel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.wheel-item label{display:block;font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-1)}.wheel-item input[type=range]{width:100%}.godshot-toggle{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--color-warning-50);border:1px solid var(--color-warning-200);border-radius:var(--radius-md);cursor:pointer;margin-top:var(--space-3)}.godshot-toggle input{width:20px;height:20px}.form-actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) 0}.btn-cancel{padding:var(--space-3) var(--space-6);background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);cursor:pointer;min-height:48px}.btn-save{padding:var(--space-3) var(--space-6);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;min-height:48px}.btn-save:hover{background:var(--color-primary-600)}.btn-save:disabled{background:var(--color-neutral-300);cursor:not-allowed}@media (max-width: 480px){.form-grid{grid-template-columns:1fr}.method-grid{grid-template-columns:repeat(2,1fr)}.wheel-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.btn-cancel,.btn-save{width:100%}.method-grid-2{grid-template-columns:1fr}}.method-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-bottom:var(--space-4)}.method-btn-large.active .method-icon{filter:brightness(0) invert(1)}.method-btn-large.selected{background:var(--color-primary-100);border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.method-icon{font-size:2.5rem;margin-bottom:var(--space-2)}.method-label{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-1)}.method-desc{font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center}.field-hint{display:block;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-1);font-style:italic}.checkbox-field{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-neutral-50);border-radius:var(--radius-md)}.checkbox-field input[type=checkbox]{width:20px;height:20px;accent-color:var(--color-primary-500);cursor:pointer}.checkbox-field label{font-weight:500;color:var(--color-text-primary);cursor:pointer}.espresso-params,.pourover-params{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);padding:var(--space-4);background:var(--color-neutral-50);border-radius:var(--radius-md);margin-top:var(--space-2)}.espresso-params .form-group,.pourover-params .form-group{margin-bottom:0}.espresso-params .form-group:has(.checkbox-field),.pourover-params .form-group:has(select){grid-column:span 2}.ratio-hint{grid-column:span 2;font-size:var(--font-size-sm);color:var(--color-text-muted);background:var(--color-primary-50);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);text-align:center}@media (max-width: 640px){.espresso-params,.pourover-params{grid-template-columns:1fr}.espresso-params .form-group:has(.checkbox-field),.pourover-params .form-group:has(select),.ratio-hint{grid-column:span 1}}.selected-bag-section{background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));border:1px solid var(--color-primary-200)}.selected-bag-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3);background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.selected-bag-icon{font-size:2rem}.selected-bag-info{display:flex;flex-direction:column;gap:var(--space-1)}.selected-bag-name{font-weight:600;font-size:var(--font-size-lg);color:var(--color-text-primary)}.selected-bag-roaster{font-size:var(--font-size-sm);color:var(--color-text-muted)}.selected-bag-details{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.bag-required-section{background:var(--color-warning-50);border:1px solid var(--color-warning-200)}.bag-required-message{text-align:center;padding:var(--space-4)}.bag-required-icon{font-size:2rem;display:block;margin-bottom:var(--space-3)}.bag-required-message p{margin:0 0 var(--space-4);color:var(--color-text-secondary)}.bag-selector-section{border:2px dashed var(--color-primary-200);background:var(--color-primary-50)}.bag-selector-section .section-hint{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.bag-selector-grid{display:flex;flex-wrap:wrap;gap:var(--space-3)}.bag-option{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:#fff;border:2px solid var(--color-neutral-200);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;text-align:left;min-width:160px;flex:1;max-width:250px}.bag-option:hover{border-color:var(--color-primary-300);background:var(--color-neutral-50)}.bag-option.selected{border-color:var(--color-primary-500);background:var(--color-primary-100);box-shadow:0 0 0 3px var(--color-primary-100)}.bag-option-icon{font-size:var(--font-size-xl)}.bag-option-info{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.bag-option-label{font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bag-option-sub{font-size:var(--font-size-xs);color:var(--color-text-muted)}.bag-option-remaining{font-size:var(--font-size-xs);color:var(--color-primary-600);font-weight:500}@media (max-width: 480px){.bag-selector-grid{flex-direction:column}.bag-option{max-width:none}}.equipment-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-4);background:transparent;border:none;cursor:pointer;text-align:left}.equipment-header-left{display:flex;align-items:center;gap:var(--space-3)}.equipment-icon{font-size:1.5rem}.equipment-header-info{display:flex;flex-direction:column;gap:var(--space-1)}.equipment-header-info .section-label{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin:0}.equipment-summary{font-size:var(--font-size-sm);color:var(--color-text-muted)}.equipment-toggle{font-size:var(--font-size-sm);color:var(--color-text-muted);transition:transform var(--transition-fast)}.equipment-toggle.expanded{transform:rotate(180deg)}.equipment-content{padding:0 var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);border-top:1px solid var(--color-neutral-200)}.equipment-field{display:flex;flex-direction:column;gap:var(--space-1)}.equipment-field label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500}.equipment-field .form-input,.equipment-field .form-select{width:100%;padding:var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);background:#fff;box-sizing:border-box}.equipment-field .form-input:focus,.equipment-field .form-select:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #8b5a2b1a}.recipes-page{min-height:100vh;background:var(--color-neutral-50);padding-bottom:var(--space-8);max-width:100vw;overflow-x:hidden;box-sizing:border-box}.recipes-header{background:var(--color-primary-500);color:#fff;padding:var(--space-4);position:sticky;top:0;z-index:100;box-sizing:border-box}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.recipes-header h1{font-size:var(--font-size-xl);font-weight:700;margin:0}.btn-create{background:#fff;color:var(--color-primary-500);border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:600;font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.btn-create:hover{background:var(--color-primary-50);transform:translateY(-1px)}.view-tabs{display:flex;gap:var(--space-2);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.view-tabs::-webkit-scrollbar{display:none}.tab-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#ffffffe6;padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);min-height:44px}.tab-btn:hover{background:#ffffff1a}.tab-btn.active{background:#fff;color:var(--color-primary-500);border-color:#fff;font-weight:600}.filters-section{background:#fff;padding:var(--space-4);border-bottom:1px solid var(--color-neutral-200);box-sizing:border-box}.search-box{display:none;position:relative;margin-bottom:var(--space-3)}.search-icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);font-size:var(--font-size-base);color:var(--color-text-muted)}.search-input{width:100%;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-10);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);background:var(--color-neutral-50);transition:all var(--transition-fast);min-height:48px}.search-input:focus{outline:none;border-color:var(--color-primary-500);background:#fff;box-shadow:0 0 0 3px #8b5a2b1a}.filter-row{display:flex;gap:var(--space-2);flex-wrap:wrap}.filter-select,.filter-input{flex:1;min-width:120px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-sm);background:#fff;min-height:44px}.filter-select:focus,.filter-input:focus{outline:none;border-color:var(--color-primary-500)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);color:var(--color-text-muted)}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8) var(--space-4);text-align:center;color:var(--color-danger-500)}.error-state button{margin-top:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-danger-500);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);text-align:center}.empty-icon{font-size:3rem;margin-bottom:var(--space-3)}.empty-state h3{font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0 0 var(--space-2)}.empty-state p{color:var(--color-text-muted);margin:0 0 var(--space-4)}.btn-primary{background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-height:48px}.btn-primary:hover{background:var(--color-primary-600)}.recipes-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-4);box-sizing:border-box;width:100%}@media (min-width: 640px){.recipes-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.recipes-grid{grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto}}.recipe-card{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);cursor:pointer;transition:all var(--transition-fast);display:flex;flex-direction:column;gap:var(--space-2);box-sizing:border-box;min-width:0}.recipe-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.recipe-card-header{display:flex;align-items:center;gap:var(--space-2)}.brew-method-icon{font-size:1.5rem}.brew-method-name{font-size:var(--font-size-sm);color:var(--color-primary-500);font-weight:500}.difficulty-badge{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);background:var(--color-neutral-100);border-radius:var(--radius-full)}.favorite-star-btn{margin-left:auto;background:none;border:none;font-size:1.4rem;color:var(--color-neutral-400);cursor:pointer;padding:var(--space-1);line-height:1;transition:all var(--transition-fast);border-radius:var(--radius-full)}.favorite-star-btn:hover{color:var(--color-warning-500);background:var(--color-warning-50, rgba(245, 158, 11, .1));transform:scale(1.1)}.favorite-star-btn.favorited{color:var(--color-warning-500)}.favorite-star-btn:disabled{opacity:.5;cursor:not-allowed}.recipe-name{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin:0;line-height:1.3}.recipe-description{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.recipe-meta{display:flex;flex-direction:column;gap:var(--space-1)}.meta-row{display:flex;gap:var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.meta-item{display:flex;align-items:center;gap:var(--space-1)}.meta-icon{font-size:.9em}.recipe-rating{display:flex;align-items:center;gap:var(--space-2)}.stars{display:flex;gap:2px}.star{color:var(--color-neutral-300);font-size:var(--font-size-sm)}.star.filled{color:var(--color-warning-500)}.star.half{background:linear-gradient(90deg,var(--color-warning-500) 50%,var(--color-neutral-300) 50%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.rating-text{font-size:var(--font-size-sm);color:var(--color-text-muted)}.rating-count{color:var(--color-text-muted);margin-left:var(--space-1)}.recipe-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-2);border-top:1px solid var(--color-neutral-100);font-size:var(--font-size-xs);color:var(--color-text-muted)}.creator{font-weight:500}.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-4)}.pagination-btn{background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-height:44px}.pagination-btn:disabled{background:var(--color-neutral-300);cursor:not-allowed}.pagination-info{font-size:var(--font-size-sm);color:var(--color-text-muted)}.recipe-detail-page{min-height:100vh;background:var(--color-neutral-50)}.detail-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);background:#fff;border-bottom:1px solid var(--color-neutral-200);position:sticky;top:0;z-index:100}.btn-back{background:none;border:none;color:var(--color-primary-500);font-size:var(--font-size-base);font-weight:500;cursor:pointer;padding:var(--space-2);margin-left:calc(-1 * var(--space-2))}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--space-2);align-items:center}.btn-favorite-star{background:none;border:none;font-size:1.5rem;color:var(--color-neutral-400);cursor:pointer;padding:var(--space-2);line-height:1;transition:all var(--transition-fast);border-radius:var(--radius-full);min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.btn-favorite-star:hover{color:var(--color-warning-500);background:var(--color-warning-50, rgba(245, 158, 11, .1));transform:scale(1.1)}.btn-favorite-star.active{color:var(--color-warning-500)}.btn-favorite-star:disabled{opacity:.5;cursor:not-allowed}.edit-delete-row{display:flex;gap:var(--space-2);align-items:center}.btn-favorite{background:#fff;border:1px solid var(--color-warning-500);color:var(--color-warning-600);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-height:44px}.btn-favorite.active{background:var(--color-warning-500);color:#fff}.btn-edit{background:var(--color-primary-500);border:none;color:#fff;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;min-height:44px;flex-shrink:0;white-space:nowrap}.btn-delete{background:#fff;border:1px solid var(--color-danger-500);color:var(--color-danger-500);padding:var(--space-2);border-radius:var(--radius-md);cursor:pointer;min-height:44px;min-width:44px;flex-shrink:0}.delete-confirm{display:flex;gap:var(--space-2);align-items:center;background:var(--color-danger-50, #fef2f2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md)}.delete-confirm span{font-size:var(--font-size-sm);color:var(--color-danger-600);font-weight:500}.btn-confirm-yes{background:var(--color-danger-500);color:#fff;border:none;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);cursor:pointer;min-height:32px}.btn-confirm-no{background:#fff;color:var(--color-neutral-600);border:1px solid var(--color-neutral-300);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);cursor:pointer;min-height:32px}.loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);text-align:center}.spinner{width:40px;height:40px;border:3px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--space-3)}.error-state span{font-size:2rem;margin-bottom:var(--space-2)}.error-state button{margin-top:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.modal-content{background:#fff;border-radius:var(--radius-lg);padding:var(--space-6);max-width:400px;width:100%}.modal-content h3{margin:0 0 var(--space-2);font-size:var(--font-size-lg)}.modal-content p{color:var(--color-text-secondary);margin:0 0 var(--space-4)}.modal-actions{display:flex;gap:var(--space-3);justify-content:flex-end}.btn-cancel{background:var(--color-neutral-200);color:var(--color-text-primary);border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer}.btn-danger{background:var(--color-danger-500);color:#fff;border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer}.detail-content{padding:var(--space-4);max-width:800px;margin:0 auto}.recipe-hero{background:#fff;border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.brew-method-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-primary-50);color:var(--color-primary-600);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-3)}.method-icon{font-size:1.2em}.recipe-hero h1{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--space-2)}.recipe-hero .recipe-description{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0 0 var(--space-4);line-height:1.6}.recipe-creator{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}.difficulty{background:var(--color-neutral-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.visibility{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.visibility.public{background:var(--color-success-100);color:var(--color-success-700)}.visibility.private{background:var(--color-neutral-100);color:var(--color-text-muted)}.rating-section{border-top:1px solid var(--color-neutral-200);padding-top:var(--space-4)}.rating-display{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-2)}.rating-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-warning-500)}.rating-count{font-size:var(--font-size-sm);color:var(--color-text-muted)}.rate-action{display:flex;align-items:center;gap:var(--space-2)}.rate-label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.rating-stars.interactive{display:flex;gap:var(--space-1)}.star-btn{background:none;border:none;font-size:1.5rem;color:var(--color-neutral-300);cursor:pointer;padding:var(--space-1);transition:all var(--transition-fast)}.star-btn:hover{transform:scale(1.2)}.star-btn.active{color:var(--color-warning-500)}.quick-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-bottom:var(--space-4)}.stat{background:#fff;border-radius:var(--radius-md);padding:var(--space-3);text-align:center;box-shadow:var(--shadow-sm)}.stat-value{display:block;font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary-500)}.stat-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.stages-section{margin-bottom:var(--space-4)}.stages-section h2{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-3)}.stages-timeline{display:flex;flex-direction:column;gap:var(--space-3)}.stage-card{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);border-left:4px solid var(--color-primary-500)}.stage-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.stage-header h3{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0;flex:1}.stage-duration{font-size:var(--font-size-sm);color:var(--color-text-muted);background:var(--color-neutral-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.stage-parameters{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-2);margin-bottom:var(--space-2)}.parameter{background:var(--color-neutral-50);padding:var(--space-2);border-radius:var(--radius-sm);display:flex;flex-direction:column}.param-name{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.param-value{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary)}.stage-notes{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-style:italic;margin:0;padding:var(--space-2);background:var(--color-warning-50);border-radius:var(--radius-sm)}.tags-section{margin-bottom:var(--space-4)}.tags-section h2{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-2)}.tag{background:var(--color-primary-100);color:var(--color-primary-700);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-sm)}.btn-use-recipe{width:100%;background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-4);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:600;cursor:pointer;margin-bottom:var(--space-4);transition:all var(--transition-fast);min-height:56px}.btn-use-recipe:hover{background:var(--color-primary-600)}.recipe-meta-section{display:flex;justify-content:space-around;padding:var(--space-4);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.recipe-meta-section .meta-item{display:flex;flex-direction:column;align-items:center;text-align:center}.recipe-meta-section .meta-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase}.recipe-meta-section .meta-value{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:500}@media (max-width: 640px){.quick-stats{grid-template-columns:repeat(2,1fr)}}.equipment-display-section{background:#fff;border-radius:var(--radius-lg);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm);overflow:hidden}.section-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:#fff;border:none;cursor:pointer;text-align:left}.section-toggle:hover{background:var(--color-neutral-50)}.toggle-left{display:flex;align-items:center;gap:var(--space-3)}.equipment-display-section .section-icon{font-size:1.5rem}.equipment-display-section h2{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0}.toggle-arrow{font-size:var(--font-size-sm);color:var(--color-text-muted);transition:transform var(--transition-fast)}.toggle-arrow.expanded{transform:rotate(180deg)}.equipment-list{padding:0 var(--space-4) var(--space-4);border-top:1px solid var(--color-neutral-100)}.equipment-item-display{background:var(--color-neutral-50);border-radius:var(--radius-md);padding:var(--space-3);margin-top:var(--space-3)}.equipment-header-display{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.equipment-type{font-weight:600;color:var(--color-text-primary)}.equipment-model{font-size:var(--font-size-sm);color:var(--color-text-muted)}.equipment-params-display{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-2)}.equipment-param{background:#fff;padding:var(--space-2);border-radius:var(--radius-sm);display:flex;flex-direction:column}.equipment-param .param-name{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.equipment-param .param-value{font-size:var(--font-size-sm);font-weight:600;color:var(--color-primary-500)}.stage-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0 0 var(--space-3);line-height:1.5}.param-desc{font-size:var(--font-size-xs);color:var(--color-text-muted);font-style:italic;display:block;margin-top:var(--space-1)}.base-dose-section{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.base-dose-section h2{font-size:var(--font-size-base);font-weight:600;margin:0 0 var(--space-4)}.dose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}.dose-stat{text-align:center;padding:var(--space-3);background:var(--color-neutral-50);border-radius:var(--radius-md)}.dose-stat.highlight{background:var(--color-primary-100)}.dose-value{display:block;font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-primary)}.dose-stat.highlight .dose-value{color:var(--color-primary-600)}.dose-label{display:block;font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:var(--space-1)}.brew-params-section{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.brew-params-section h2{font-size:var(--font-size-base);font-weight:600;margin:0 0 var(--space-4)}.params-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}@media (min-width: 480px){.params-grid{grid-template-columns:repeat(4,1fr)}}.param-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--color-neutral-50);border-radius:var(--radius-md)}.param-icon{font-size:1.25rem}.param-item .param-value{display:block;font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-primary)}.param-item .param-label{display:block;font-size:var(--font-size-xs);color:var(--color-text-muted)}.brew-notes{margin-top:var(--space-3);padding:var(--space-3);background:var(--color-primary-50);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.applicability-section{background:#fff;border-radius:var(--radius-lg);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm);overflow:hidden}.applicability-summary{font-size:var(--font-size-sm);color:var(--color-text-muted);display:block;margin-top:var(--space-1)}.applicability-group{margin-bottom:var(--space-3)}.applicability-group:last-child{margin-bottom:0}.applicability-group h4{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);margin:0 0 var(--space-2)}.tag-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.applicability-tag{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-sm)}.applicability-tag.roast{background:var(--color-warning-100);color:var(--color-warning-700)}.applicability-tag.processing{background:var(--color-success-100);color:var(--color-success-700)}.freshness-range{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.stages-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.stages-summary{font-size:var(--font-size-sm);color:var(--color-text-muted);background:var(--color-neutral-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.stage-detail-group{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3)}.stage-detail{display:flex;align-items:center;gap:var(--space-2);background:var(--color-neutral-50);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md)}.detail-icon{font-size:1rem}.detail-value{font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-primary)}.detail-label{font-size:var(--font-size-xs);color:var(--color-text-muted)}.stage-timing{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}.timing-badge{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.timing-badge.delay{background:var(--color-warning-100);color:var(--color-warning-700)}.timing-badge.duration{background:var(--color-info-100);color:var(--color-info-700)}.stage-optional{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}.optional-tag{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);background:var(--color-neutral-100);border-radius:var(--radius-sm);color:var(--color-text-secondary)}.stage-notes{font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic;margin:0;padding-top:var(--space-2);border-top:1px dashed var(--color-neutral-200)}.notes-section{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.notes-section h2{font-size:var(--font-size-base);font-weight:600;margin:0 0 var(--space-3)}.notes-section p{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.6;margin:0}.recipe-editor-page{min-height:100vh;background:var(--color-neutral-50);padding-bottom:var(--space-8)}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);background:#fff;border-bottom:1px solid var(--color-neutral-200);position:sticky;top:0;z-index:100}.editor-header h1{font-size:var(--font-size-lg);font-weight:600;margin:0}.btn-back{background:none;border:none;color:var(--color-text-muted);font-size:var(--font-size-sm);cursor:pointer;padding:var(--space-2)}.btn-save{background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:600;font-size:var(--font-size-sm);cursor:pointer;min-height:44px}.btn-save:disabled{opacity:.6;cursor:not-allowed}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12)}.spinner{width:40px;height:40px;border:3px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite}.editor-form{padding:var(--space-4);max-width:800px;margin:0 auto}.form-error{background:var(--color-danger-50);border:1px solid var(--color-danger-200);color:var(--color-danger-700);padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2)}.form-section{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.form-section h2{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-100)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-neutral-100)}.section-header h2{margin:0;padding:0;border:none}.form-field{margin-bottom:var(--space-4)}.form-field:last-child{margin-bottom:0}.form-field label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-2)}.form-input,.form-textarea,.form-select{width:100%;padding:var(--space-3);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-base);background:#fff;transition:all var(--transition-fast);min-height:48px}.form-textarea{min-height:100px;resize:vertical}.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #8b5a2b1a}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.form-row.thirds{grid-template-columns:repeat(3,1fr)}@media (max-width: 640px){.form-row,.form-row.thirds{grid-template-columns:1fr}}.method-buttons{display:flex;gap:var(--space-2);flex-wrap:wrap}.method-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:#fff;border:2px solid var(--color-neutral-300);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);min-height:48px}.method-btn:hover{border-color:var(--color-primary-300)}.method-btn.active{border-color:var(--color-primary-500);background:var(--color-primary-50)}.method-icon{font-size:1.2rem}.method-name{font-size:var(--font-size-sm);font-weight:500}.method-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-bottom:var(--space-2)}.method-btn-large{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6) var(--space-4);background:var(--color-neutral-100);border:2px solid var(--color-neutral-300);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease;min-height:140px}.method-btn-large:hover{background:var(--color-primary-50);border-color:var(--color-primary-300)}.method-btn-large.active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff;box-shadow:0 4px 12px #8b5a2b4d;transform:translateY(-2px)}.method-btn-large.active .method-label,.method-btn-large.active .method-desc{color:#fff}.method-btn-large .method-icon{font-size:2.5rem;margin-bottom:var(--space-2)}.method-btn-large .method-label{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-1)}.method-btn-large .method-desc{font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center}@media (max-width: 480px){.method-grid-2{grid-template-columns:1fr}.method-btn-large{min-height:100px;padding:var(--space-4)}}.toggle-group{display:flex;gap:var(--space-2)}.toggle-btn{flex:1;padding:var(--space-2) var(--space-3);background:#fff;border:2px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);min-height:44px}.toggle-btn:hover{border-color:var(--color-primary-300)}.toggle-btn.active{border-color:var(--color-primary-500);background:var(--color-primary-50);font-weight:500}.btn-add-stage{background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer}.empty-stages{text-align:center;padding:var(--space-6);color:var(--color-text-muted)}.empty-stages .hint{font-size:var(--font-size-sm);margin-top:var(--space-2)}.stages-list{display:flex;flex-direction:column;gap:var(--space-4)}.stage-editor{background:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);padding:var(--space-3)}.stage-editor-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.stage-number{width:28px;height:28px;background:var(--color-primary-500);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-sm);flex-shrink:0}.stage-name-input{flex:1;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.stage-duration-input{width:100px;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);font-size:var(--font-size-sm);text-align:right}.btn-remove-stage{width:32px;height:32px;background:var(--color-danger-100);color:var(--color-danger-500);border:none;border-radius:var(--radius-sm);font-size:var(--font-size-lg);cursor:pointer;display:flex;align-items:center;justify-content:center}.stage-parameters{margin-bottom:var(--space-3)}.parameter-row{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-2)}.param-name-input{flex:2;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.param-value-input{width:80px;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);font-size:var(--font-size-sm);text-align:right}.param-unit-input{width:60px;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.btn-remove-param{width:28px;height:28px;background:var(--color-neutral-200);color:var(--color-text-muted);border:none;border-radius:var(--radius-sm);font-size:var(--font-size-base);cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-add-param{background:none;border:1px dashed var(--color-neutral-400);color:var(--color-text-muted);padding:var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);cursor:pointer;width:100%;margin-top:var(--space-2)}.btn-add-param:hover{border-color:var(--color-primary-500);color:var(--color-primary-500)}.stage-notes-field{margin-top:var(--space-2)}.stage-notes-field .form-input{min-height:40px;padding:var(--space-2);font-size:var(--font-size-sm)}.tags-input-container{display:flex;flex-direction:column;gap:var(--space-2)}.tags-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tag{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--color-primary-100);color:var(--color-primary-700);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-sm)}.tag button{background:none;border:none;color:var(--color-primary-500);cursor:pointer;padding:0;font-size:var(--font-size-base);line-height:1}.tag-input-row{display:flex;gap:var(--space-2)}.tag-input-row .form-input{flex:1;min-height:44px}.btn-add-tag{background:var(--color-neutral-200);border:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer}.form-actions{display:flex;gap:var(--space-3);padding-top:var(--space-4)}.btn-cancel{flex:1;background:var(--color-neutral-200);color:var(--color-text-primary);border:none;padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:500;cursor:pointer;min-height:56px}.btn-submit{flex:2;background:var(--color-primary-500);color:#fff;border:none;padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;min-height:56px}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.equipment-section{padding:0;overflow:hidden}.section-header-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:#fff;border:none;cursor:pointer;text-align:left}.section-header-toggle:hover{background:var(--color-neutral-50)}.section-header-left{display:flex;align-items:center;gap:var(--space-3)}.section-icon{font-size:1.5rem}.section-header-info h2{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0;padding:0;border:none}.equipment-summary{font-size:var(--font-size-sm);color:var(--color-text-muted);display:block;margin-top:var(--space-1)}.toggle-icon{font-size:var(--font-size-sm);color:var(--color-text-muted);transition:transform var(--transition-fast)}.toggle-icon.expanded{transform:rotate(180deg)}.equipment-content{padding:0 var(--space-4) var(--space-4);border-top:1px solid var(--color-neutral-100)}.section-hint{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:var(--space-3) 0}.equipment-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}.equipment-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#fff;border:2px solid var(--color-neutral-300);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm);min-height:44px}.equipment-btn:hover{border-color:var(--color-primary-300)}.equipment-btn.selected{border-color:var(--color-success-500);background:var(--color-success-50)}.equipment-btn .check{color:var(--color-success-500);font-weight:700}.equipment-parameters-section{background:var(--color-neutral-50);border-radius:var(--radius-md);padding:var(--space-3)}.equipment-parameters-section h3{font-size:var(--font-size-sm);font-weight:600;margin:0 0 var(--space-2);color:var(--color-text-secondary)}.equipment-item{background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3)}.equipment-item:last-child{margin-bottom:0}.equipment-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.equipment-label{font-weight:600;color:var(--color-text-primary)}.btn-remove-small{width:28px;height:28px;background:var(--color-danger-100);color:var(--color-danger-500);border:none;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg)}.equipment-details .form-row{margin-bottom:var(--space-3)}.parameters-list{display:flex;flex-direction:column;gap:var(--space-2)}.param-desc-input{flex:2;padding:var(--space-2);border:1px solid var(--color-neutral-300);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.stage-description-field{margin-bottom:var(--space-3)}.stage-description{min-height:60px;padding:var(--space-2);font-size:var(--font-size-sm)}.param-label{display:block;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.5px}@media (max-width: 640px){.parameter-row{flex-wrap:wrap}.param-name-input{flex:1 1 100%;order:1}.param-unit-input,.param-desc-input{flex:1;order:2}.btn-remove-param{order:1;position:absolute;right:0}.parameter-row{position:relative;padding-right:36px}}.ratio-display{display:flex;align-items:center;justify-content:center;height:44px;background:var(--color-primary-900);border:2px solid var(--color-primary-700);border-radius:var(--radius-md);font-weight:700;font-size:var(--font-size-xl);color:#fff}.ratio-warning{background:var(--color-warning-50);border:1px solid var(--color-warning-200);color:var(--color-warning-700);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-top:var(--space-3)}.form-row.thirds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}@media (max-width: 640px){.form-row.thirds{grid-template-columns:1fr 1fr}.form-row.thirds>.form-field:last-child{grid-column:span 2}}.section-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:400}.applicability-content{padding:var(--space-4);border-top:1px solid var(--color-neutral-100)}.checkbox-group{display:flex;flex-wrap:wrap;gap:var(--space-3)}.checkbox-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);cursor:pointer}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer}.freshness-inputs{display:flex;align-items:center;gap:var(--space-2)}.freshness-inputs span{color:var(--color-text-muted);font-size:var(--font-size-sm)}.form-input.small{width:80px}.stage-summary{font-size:var(--font-size-sm);color:var(--color-text-muted);background:var(--color-neutral-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.btn-load-defaults{background:var(--color-primary-100);color:var(--color-primary-700);border:1px solid var(--color-primary-300);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;margin-top:var(--space-2);min-height:44px}.btn-load-defaults:hover{background:var(--color-primary-200)}.stage-editor{background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);margin-bottom:var(--space-2);overflow:hidden}.stage-editor.expanded{border-color:var(--color-primary-300)}.stage-editor-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);cursor:pointer;background:var(--color-neutral-50)}.stage-editor.expanded .stage-editor-header{background:var(--color-primary-50)}.stage-name-preview{font-weight:600;flex:1}.stage-summary-preview{font-size:var(--font-size-sm);color:var(--color-text-muted)}.expand-icon{font-size:var(--font-size-xs);color:var(--color-text-muted);transition:transform var(--transition-fast)}.expand-icon.expanded{transform:rotate(180deg)}.stage-content{padding:var(--space-4);border-top:1px solid var(--color-neutral-200)}.stage-group{margin-bottom:var(--space-4);padding:var(--space-3);background:var(--color-neutral-50);border-radius:var(--radius-md)}.stage-group h4{font-size:var(--font-size-sm);font-weight:600;margin:0 0 var(--space-3);color:var(--color-text-primary)}.stage-group .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3)}.stage-group .form-field{margin-bottom:0}.stage-group.optional-params{background:var(--color-primary-900);color:#fff}.stage-group.optional-params h4{color:#fff}.stage-group.optional-params .form-field label{color:#ffffffe6}.stage-group.optional-params .form-select,.stage-group.optional-params .form-input{background:#fffffff2;color:var(--color-text-primary);border-color:#ffffff4d}.stage-content .form-textarea{background:var(--color-neutral-100);border:2px solid var(--color-neutral-400);color:var(--color-text-primary)}@media (max-width: 480px){.stage-group .form-row{grid-template-columns:1fr 1fr}}.section-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.section-header h2{flex:1}@media (max-width: 640px){.section-header{flex-direction:column;align-items:flex-start}.section-header .stage-summary{order:3;width:100%;text-align:center}.section-header .btn-add-stage{order:2}}.navigation-wrapper{position:sticky;top:0;z-index:var(--z-sticky);box-shadow:var(--shadow-md)}.nav-top{background:linear-gradient(135deg,var(--color-primary-900) 0%,var(--color-primary-800) 100%);padding:0 var(--space-4)}.nav-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;gap:var(--space-4)}.nav-logo{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:#fff;text-decoration:none;display:flex;align-items:center;gap:var(--space-2);white-space:nowrap;transition:color var(--transition-fast)}.nav-logo:hover{color:var(--color-primary-300)}.nav-main{display:flex;align-items:center;gap:var(--space-1);flex:1;justify-content:center}.nav-menu-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:transparent;border:none;color:#ffffffd9;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.nav-menu-btn:hover{background:#ffffff1a;color:#fff}.nav-menu-btn.active{background:#ffffff26;color:#fff}.nav-btn-icon{font-size:1rem}.nav-btn-label{display:inline}.nav-vision-link{display:flex;align-items:center;padding:var(--space-2) var(--space-4);color:#ffffffd9;text-decoration:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap;margin-right:var(--space-3)}.nav-vision-link:hover{background:#ffffff1a;color:#fff}.nav-auth{display:flex;align-items:center}.nav-loading{color:#fff9;font-size:var(--font-size-sm)}.nav-dropdown{position:relative}.user-dropdown{margin-left:auto}.nav-user-trigger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff1a;border:none;color:#fff;font-size:var(--font-size-lg);cursor:pointer;border-radius:50%;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.nav-user-trigger:hover,.nav-user-trigger.active{background:#fff3}.user-icon{font-size:1.25rem}.user-name{font-size:var(--font-size-sm);font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 480px){.user-name{display:none}}.nav-dropdown-menu{position:absolute;top:calc(100% + var(--space-2));right:0;min-width:200px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-2);z-index:var(--z-dropdown);animation:dropdownFadeIn .15s ease-out}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:var(--space-2) var(--space-3)}.dropdown-user-name{display:block;font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.dropdown-role{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:capitalize}.dropdown-divider{height:1px;background:var(--color-neutral-200);margin:var(--space-2) 0}.dropdown-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);color:var(--color-text-primary);text-decoration:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);transition:all var(--transition-fast);background:none;border:none;width:100%;text-align:left;cursor:pointer}.dropdown-item:hover{background:var(--color-primary-50);color:var(--color-primary-700)}.dropdown-item-danger:hover{background:var(--color-danger-50);color:var(--color-danger-600)}.dropdown-icon{font-size:1rem;width:20px;text-align:center}.auth-buttons{display:flex;gap:var(--space-2)}.nav-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-decoration:none;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.nav-btn-ghost{background:transparent;color:#ffffffe6;border:1px solid rgba(255,255,255,.3)}.nav-btn-ghost:hover{background:#ffffff1a;border-color:#ffffff80}.nav-btn-primary{background:var(--color-primary-500);color:#fff;border:1px solid transparent}.nav-btn-primary:hover{background:var(--color-primary-400)}.nav-sub{background:var(--color-primary-100);border-bottom:1px solid var(--color-primary-200);padding:0 var(--space-4)}.nav-sub .nav-container{height:44px;justify-content:flex-start}.sub-menu-items{display:flex;align-items:center;gap:var(--space-1)}.sub-menu-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);color:var(--color-primary-700);text-decoration:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.sub-menu-item:hover{background:var(--color-primary-200);color:var(--color-primary-900)}.sub-menu-item.active{background:var(--color-primary-500);color:#fff}.sub-menu-icon{font-size:1rem}.sub-menu-label{display:inline}@media (max-width: 640px){.nav-container{height:52px;gap:var(--space-2)}.nav-logo{font-size:var(--font-size-base)}.nav-menu-btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs)}.nav-btn-label,.user-name,.role-badge{display:none}.nav-user-trigger{padding:var(--space-1)}.dropdown-arrow{display:none}.nav-sub .nav-container{height:40px}.sub-menu-item{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs)}.sub-menu-label{display:none}.nav-btn{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs)}}.install-pwa-banner{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-400) 100%);color:#fff;padding:var(--space-4);z-index:1000;box-shadow:var(--shadow-lg);animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.install-pwa-content{display:flex;align-items:center;gap:var(--space-4);max-width:600px;margin:0 auto}.install-pwa-icon{font-size:var(--font-size-3xl);flex-shrink:0}.install-pwa-text{flex:1}.install-pwa-text strong{display:block;font-size:var(--font-size-lg);margin-bottom:var(--space-1)}.install-pwa-text p{margin:0;font-size:var(--font-size-sm);opacity:.9}.install-pwa-button{background:#fff;color:var(--color-primary-500);border:none;padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-weight:600;font-size:var(--font-size-base);cursor:pointer;transition:all .2s ease;flex-shrink:0}.install-pwa-button:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.install-pwa-button:active{transform:scale(.98)}.install-pwa-dismiss{background:transparent;border:none;color:#fff;font-size:var(--font-size-2xl);cursor:pointer;padding:var(--space-2);opacity:.7;transition:opacity .2s;flex-shrink:0}.install-pwa-dismiss:hover{opacity:1}.install-pwa-banner.ios{background:linear-gradient(135deg,#007aff,#5856d6)}.ios-share-icon{display:inline-block;font-size:1.2em;margin:0 var(--space-1)}@media (max-width: 480px){.install-pwa-content{flex-wrap:wrap}.install-pwa-icon{font-size:var(--font-size-2xl)}.install-pwa-text{flex:1 1 calc(100% - 4rem)}.install-pwa-text strong{font-size:var(--font-size-base)}.install-pwa-text p{font-size:var(--font-size-sm)}.install-pwa-button{flex:1;margin-right:var(--space-2)}.install-pwa-dismiss{position:absolute;top:var(--space-2);right:var(--space-2)}.install-pwa-banner{padding-top:var(--space-6)}}.toast-container{position:fixed;bottom:var(--space-4);right:var(--space-4);z-index:var(--z-toast, 800);display:flex;flex-direction:column;gap:var(--space-2);max-width:400px;width:calc(100% - var(--space-8))}.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--color-neutral-50);box-shadow:var(--shadow-lg);animation:toast-slide-in .3s ease-out}.toast.toast-exit{animation:toast-slide-out .2s ease-in forwards}@keyframes toast-slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes toast-slide-out{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.toast-success{background:var(--color-success-50);border:1px solid var(--color-success-200)}.toast-error{background:var(--color-danger-50);border:1px solid var(--color-danger-200)}.toast-warning{background:var(--color-warning-50);border:1px solid var(--color-warning-200)}.toast-info{background:var(--color-info-50);border:1px solid var(--color-info-200)}.toast-icon{font-size:var(--font-size-lg);flex-shrink:0}.toast-message{flex:1;font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:1.4}.toast-close{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-full);color:var(--color-text-muted);font-size:var(--font-size-lg);cursor:pointer;transition:background-color .2s}.toast-close:hover{background:#0000001a}@media (max-width: 480px){.toast-container{left:var(--space-4);right:var(--space-4);max-width:none;width:auto}}.protected-route-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:var(--space-8);text-align:center}.protected-route-loading .loading-spinner{width:48px;height:48px;border:4px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);border-radius:50%;animation:spin 1s linear infinite}.protected-route-loading p{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-base)}.protected-route-unauthorized{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:var(--space-8);text-align:center}.unauthorized-icon{font-size:4rem;margin-bottom:var(--space-4)}.protected-route-unauthorized h2{margin:0 0 var(--space-2);color:var(--color-text-primary);font-size:var(--font-size-2xl);font-weight:600}.protected-route-unauthorized p{margin:0 0 var(--space-2);color:var(--color-text-secondary);font-size:var(--font-size-base)}.protected-route-unauthorized .required-role{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-bottom:var(--space-6)}.back-home-link{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-primary-500);color:#fff;border-radius:var(--radius-md);text-decoration:none;font-weight:500;transition:background-color .2s ease}.back-home-link:hover{background:var(--color-primary-600)}:root{--color-primary-50: #faf5f0;--color-primary-100: #f0e6d9;--color-primary-200: #e0ccb3;--color-primary-300: #c9a87a;--color-primary-400: #b8864d;--color-primary-500: #8b5a2b;--color-primary-600: #5c3d1e;--color-primary-700: #3d2812;--color-primary-800: #2a1a0a;--color-primary-900: #1a1005;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #525252;--color-neutral-500: #1f1f1f;--color-neutral-600: #141414;--color-neutral-700: #0f0f0f;--color-neutral-800: #0a0a0a;--color-neutral-900: #000000;--color-text-primary: #0a0a0a;--color-text-secondary: #1a1a1a;--color-text-muted: #333333;--color-success-50: #ecfdf5;--color-success-100: #d1fae5;--color-success-200: #a7f3d0;--color-success-500: #10b981;--color-success-600: #059669;--color-success-700: #047857;--color-warning-50: #fffbeb;--color-warning-100: #fef3c7;--color-warning-200: #fde68a;--color-warning-500: #f59e0b;--color-warning-600: #d97706;--color-warning-700: #b45309;--color-danger-50: #fef2f2;--color-danger-100: #fee2e2;--color-danger-200: #fecaca;--color-danger-500: #ef4444;--color-danger-600: #dc2626;--color-danger-700: #b91c1c;--color-error-50: var(--color-danger-50);--color-error-500: var(--color-danger-500);--color-error-700: var(--color-danger-700);--color-info-50: #eff6ff;--color-info-100: #dbeafe;--color-info-200: #bfdbfe;--color-info-500: #3b82f6;--color-info-600: #2563eb;--color-info-700: #1d4ed8;--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-serif: "Merriweather", Georgia, "Times New Roman", serif;--font-family-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--space-0: 0;--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;--container-xs: 320px;--container-sm: 384px;--container-md: 448px;--container-lg: 512px;--container-xl: 576px;--container-2xl: 672px;--safe-area-inset-top: env(safe-area-inset-top, 0px);--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);--safe-area-inset-left: env(safe-area-inset-left, 0px);--safe-area-inset-right: env(safe-area-inset-right, 0px);--page-padding-x: var(--space-4);--page-padding-y: var(--space-4);--border-width-thin: 1px;--border-width-medium: 2px;--border-width-thick: 4px;--radius-none: 0;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--z-toast: 800}@media (min-width: 640px){:root{--page-padding-x: var(--space-6);--page-padding-y: var(--space-6)}}@media (min-width: 1024px){:root{--page-padding-x: var(--space-8);--page-padding-y: var(--space-8)}}input,textarea,select{color:#000!important}input::placeholder,textarea::placeholder{color:#666!important}h1,h2,h3,h4,h5,h6{color:#0a0a0a}p{color:#1a1a1a}label{color:#0a0a0a}.ds-container{width:100%;max-width:var(--container-lg);margin:0 auto;padding-left:var(--page-padding-x);padding-right:var(--page-padding-x)}.ds-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-4);border:var(--border-width-thin) solid var(--color-neutral-200)}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;min-height:44px;min-width:44px}.ds-btn:disabled{opacity:.5;cursor:not-allowed}.ds-btn-primary{background:var(--color-primary-500);color:#fff}.ds-btn-primary:hover:not(:disabled){background:var(--color-primary-600)}.ds-btn-secondary{background:var(--color-neutral-100);color:var(--color-neutral-800);border:var(--border-width-thin) solid var(--color-neutral-300)}.ds-btn-secondary:hover:not(:disabled){background:var(--color-neutral-200)}.ds-btn-ghost{background:transparent;color:var(--color-primary-600)}.ds-btn-ghost:hover:not(:disabled){background:var(--color-primary-50)}.ds-btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:36px}.ds-btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--font-size-lg);min-height:52px}.ds-btn-full{width:100%}.ds-input{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:#000;background:#fff;border:var(--border-width-thin) solid var(--color-neutral-300);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);min-height:44px}.ds-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.ds-input:disabled{background:var(--color-neutral-100);cursor:not-allowed}.ds-input-error{border-color:var(--color-error-500)}.ds-input-error:focus{box-shadow:0 0 0 3px var(--color-error-50)}.ds-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:#0a0a0a;margin-bottom:var(--space-2)}.ds-form-group{margin-bottom:var(--space-4)}.ds-text-xs{font-size:var(--font-size-xs)}.ds-text-sm{font-size:var(--font-size-sm)}.ds-text-base{font-size:var(--font-size-base)}.ds-text-lg{font-size:var(--font-size-lg)}.ds-text-xl{font-size:var(--font-size-xl)}.ds-text-2xl{font-size:var(--font-size-2xl)}.ds-text-3xl{font-size:var(--font-size-3xl)}.ds-text-muted{color:#333}.ds-text-primary{color:#1a1005}.ds-text-success{color:var(--color-success-700)}.ds-text-error{color:var(--color-error-700)}.ds-heading{font-family:var(--font-family-sans);font-weight:var(--font-weight-bold);color:#000;line-height:var(--line-height-tight)}.ds-h1{font-size:var(--font-size-3xl);margin-bottom:var(--space-4)}.ds-h2{font-size:var(--font-size-2xl);margin-bottom:var(--space-3)}.ds-h3{font-size:var(--font-size-xl);margin-bottom:var(--space-2)}.ds-h4{font-size:var(--font-size-lg);margin-bottom:var(--space-2)}.ds-page{min-height:100vh;padding:var(--page-padding-y) var(--page-padding-x);padding-top:calc(var(--page-padding-y) + var(--safe-area-inset-top));padding-bottom:calc(var(--page-padding-y) + var(--safe-area-inset-bottom));background:var(--color-neutral-50)}.ds-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--page-padding-x);background:#fff;border-bottom:var(--border-width-thin) solid var(--color-neutral-200);position:sticky;top:0;z-index:var(--z-sticky)}.ds-spinner{width:24px;height:24px;border:3px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);border-radius:var(--radius-full);animation:ds-spin .8s linear infinite}@keyframes ds-spin{to{transform:rotate(360deg)}}.ds-alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);display:flex;align-items:flex-start;gap:var(--space-2)}.ds-alert-success{background:var(--color-success-50);color:var(--color-success-700);border:var(--border-width-thin) solid var(--color-success-500)}.ds-alert-error{background:var(--color-error-50);color:var(--color-error-700);border:var(--border-width-thin) solid var(--color-error-500)}.ds-alert-warning{background:var(--color-warning-50);color:var(--color-warning-700);border:var(--border-width-thin) solid var(--color-warning-500)}.ds-alert-info{background:var(--color-info-50);color:var(--color-info-700);border:var(--border-width-thin) solid var(--color-info-500)}.ds-stack>*+*{margin-top:var(--space-4)}.ds-stack-sm>*+*{margin-top:var(--space-2)}.ds-stack-lg>*+*{margin-top:var(--space-6)}.ds-flex{display:flex}.ds-flex-col{flex-direction:column}.ds-flex-center{align-items:center;justify-content:center}.ds-flex-between{justify-content:space-between}.ds-gap-2{gap:var(--space-2)}.ds-gap-4{gap:var(--space-4)}.ds-img-responsive{max-width:100%;height:auto;border-radius:var(--radius-md)}.ds-divider{height:var(--border-width-thin);background:var(--color-neutral-200);border:none;margin:var(--space-4) 0}.ds-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--color-neutral-700)}.ds-badge-primary{background:var(--color-primary-100);color:var(--color-primary-700)}.ds-badge-success{background:var(--color-success-50);color:var(--color-success-700)}.ds-empty-state{text-align:center;padding:var(--space-8) var(--space-4);color:var(--color-neutral-500)}.ds-empty-state-icon{font-size:3rem;margin-bottom:var(--space-4)}.ds-skeleton{background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%;animation:ds-skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--radius-md)}@keyframes ds-skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ds-bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl);padding:var(--space-4);padding-bottom:calc(var(--space-4) + var(--safe-area-inset-bottom));box-shadow:var(--shadow-xl);z-index:var(--z-modal)}.ds-bottom-sheet-handle{width:40px;height:4px;background:var(--color-neutral-300);border-radius:var(--radius-full);margin:0 auto var(--space-4)}@media (max-width: 639px){.ds-hide-mobile{display:none!important}}@media (min-width: 640px){.ds-hide-tablet{display:none!important}}@media (min-width: 1024px){.ds-hide-desktop{display:none!important}}.ds-barcode,.barcode,.card-barcode,.barcode-info,.meta-value.barcode{background:#f0e8e2!important;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-text-secondary)!important;width:fit-content;display:inline-block}h1,h2,h3,h4,h5,h6,.form-header h1,.form-section h2,.preview-title,.card-title{color:#0a0a0a!important}:root{--color-primary-darkest: #0a0705;--color-primary-dark: #1a1005;--color-primary: #2a1a0a;--color-primary-light: #3d2812;--color-primary-lighter: #c9b89f;--color-primary-50: #faf5f0;--color-primary-100: #f0e6d9;--color-primary-200: #e0ccb3;--color-primary-300: #5c3d1e;--color-primary-400: #3d2812;--color-primary-500: #2a1a0a;--color-primary-600: #1a1005;--color-primary-700: #0f0a03;--color-primary-800: #0a0705;--color-primary-900: #050302;--color-cta-darkest: #b8380a;--color-cta-dark: #d97706;--color-cta: #ea580c;--color-cta-light: #fb923c;--color-cta-lighter: #fed7aa;--color-success-dark: #059669;--color-success: #10b981;--color-success-light: #6ee7b7;--color-success-lighter: #d1fae5;--color-error-dark: #991b1b;--color-error: #dc2626;--color-error-light: #fca5a5;--color-error-lighter: #fee2e2;--color-info-dark: #1e40af;--color-info: #3b82f6;--color-info-light: #93c5fd;--color-info-lighter: #dbeafe;--color-premium-dark: #6d28d9;--color-premium: #8b5cf6;--color-premium-light: #c4b5fd;--color-premium-lighter: #ede9fe;--color-neutral-900: #000000;--color-neutral-800: #0a0a0a;--color-neutral-700: #141414;--color-neutral-600: #1f1f1f;--color-neutral-500: #2d2d2d;--color-neutral-400: #9ca3af;--color-neutral-300: #d1d5db;--color-neutral-200: #e5e7eb;--color-text-primary: #0a0a0a;--color-text-secondary: #1a1a1a;--color-text-muted: #333333;--color-text-heading: #000000;--color-text-label: #0a0a0a;--color-neutral-100: #f3f4f6;--color-white: #ffffff;--font-family-heading: "Playfair Display", Georgia, serif;--font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;--font-size-display: 3rem;--font-weight-display: 800;--line-height-display: 1.2;--font-size-h1: 2.25rem;--font-weight-h1: 700;--line-height-h1: 1.3;--font-size-h2: 1.875rem;--font-weight-h2: 700;--line-height-h2: 1.3;--font-size-h3: 1.5rem;--font-weight-h3: 600;--line-height-h3: 1.4;--font-size-lg: 1.125rem;--font-weight-lg: 400;--line-height-lg: 1.6;--font-size-base: 1rem;--font-weight-base: 400;--line-height-base: 1.6;--font-size-sm: .875rem;--font-weight-sm: 400;--line-height-sm: 1.5;--font-size-xs: .75rem;--font-weight-xs: 500;--line-height-xs: 1.4;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--duration-instant: .1s;--duration-quick: .2s;--duration-normal: .3s;--duration-slow: .5s;--duration-slower: .8s;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1), 0 10px 10px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, .15);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--transition-colors: color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out);--transition-transform: transform var(--duration-quick) var(--ease-out);--transition-all: all var(--duration-normal) var(--ease-in-out);--touch-target-min: 48px;--touch-target-comfortable: 56px;--touch-target-spacious: 64px;--z-negative: -1;--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-modal: 300;--z-tooltip: 400;--z-notification: 500}@media (prefers-color-scheme: dark){:root{--color-neutral-900: #f3f4f6;--color-neutral-800: #e5e7eb;--color-neutral-700: #d1d5db;--color-neutral-600: #9ca3af;--color-neutral-100: #1f2937;--color-white: #111827;--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .4)}}@media (prefers-reduced-motion: reduce){:root{--duration-instant: 0ms;--duration-quick: 0ms;--duration-normal: 0ms;--duration-slow: 0ms;--duration-slower: 0ms;--ease-spring: linear}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}html{font-size:16px;scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color-neutral-900);background:linear-gradient(135deg,#f5e6d3,#e8d4b8);line-height:var(--line-height-base)}h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-h1);line-height:var(--line-height-h1);color:var(--color-primary-dark);margin-bottom:var(--spacing-md)}h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-h2);line-height:var(--line-height-h2);color:var(--color-primary-dark);margin-bottom:var(--spacing-md)}h3{font-size:var(--font-size-h3);font-weight:var(--font-weight-h3);line-height:var(--line-height-h3);color:var(--color-primary);margin-bottom:var(--spacing-sm)}p{font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-neutral-700);margin-bottom:var(--spacing-md)}.btn-primary,[type=submit]:not([class*=secondary]),[type=button]:not([class*=secondary]){display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target-min);padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);font-weight:600;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(135deg,var(--color-cta-dark) 0%,var(--color-cta) 100%);color:#fff;border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:var(--transition-all);cursor:pointer;position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:#ffffff1a;transition:left var(--duration-normal) var(--ease-out);z-index:-1}.btn-primary:before:hover{left:100%}.btn-primary:active:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn-primary:focus-visible{outline:3px solid var(--color-cta);outline-offset:2px}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target-min);padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);font-weight:600;background:var(--color-neutral-100);color:var(--color-primary-dark);border:2px solid var(--color-primary-light);border-radius:var(--radius-md);transition:var(--transition-all);cursor:pointer}.btn-secondary:hover:not(:disabled){background:var(--color-primary-lighter);border-color:var(--color-primary)}.btn-secondary:active:not(:disabled){transform:scale(.98)}.btn-secondary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-tertiary,.btn-link{background:none;border:none;color:var(--color-cta);text-decoration:underline;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:color var(--duration-quick) var(--ease-out)}.btn-tertiary:hover:not(:disabled),.btn-link:hover:not(:disabled){color:var(--color-cta-dark)}.card{display:flex;flex-direction:column;padding:var(--spacing-lg);background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition-all)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-primary-lighter)}.card.elevated{box-shadow:var(--shadow-lg)}.card.interactive{cursor:pointer}.card.interactive:active{transform:translateY(-1px)}input,textarea,select{width:100%;padding:var(--spacing-md);min-height:var(--touch-target-min);font-size:var(--font-size-base);font-family:inherit;line-height:var(--line-height-base);border:2px solid var(--color-neutral-300);border-radius:var(--radius-md);background:#fff;color:var(--color-neutral-900);transition:var(--transition-colors)}input::placeholder,textarea::placeholder{color:var(--color-neutral-500)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-cta);box-shadow:0 0 0 3px var(--color-cta-lighter)}.feedback-success{background:linear-gradient(135deg,var(--color-success-lighter) 0%,#e8fef1 100%);border-left:4px solid var(--color-success);color:var(--color-success-dark)}.feedback-error{background:linear-gradient(135deg,var(--color-error-lighter) 0%,#fef3f0 100%);border-left:4px solid var(--color-error);color:var(--color-error-dark)}.feedback-warning{background:linear-gradient(135deg,var(--color-cta-lighter) 0%,#fff7ed 100%);border-left:4px solid var(--color-cta);color:var(--color-cta-dark)}.feedback-info{background:linear-gradient(135deg,var(--color-info-lighter) 0%,#f0f9ff 100%);border-left:4px solid var(--color-info);color:var(--color-info-dark)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.animate-fade-in{animation:fadeIn var(--duration-normal) var(--ease-out)}.animate-slide-up{animation:slideUp var(--duration-normal) var(--ease-out)}.animate-slide-down{animation:slideDown var(--duration-normal) var(--ease-out)}.animate-pulse{animation:pulse var(--duration-slow) infinite}.animate-bounce{animation:bounce var(--duration-quick) infinite}.badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);font-weight:600;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}.badge-primary{background:var(--color-primary-lighter);color:var(--color-primary-dark)}.badge-success{background:var(--color-success-lighter);color:var(--color-success-dark)}.badge-error{background:var(--color-error-lighter);color:var(--color-error-dark)}.badge-premium{background:var(--color-premium-lighter);color:var(--color-premium-dark)}hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--color-neutral-300),transparent);margin:var(--spacing-xl) 0}a{color:var(--color-cta);text-decoration:none;transition:color var(--duration-quick) var(--ease-out);position:relative}a:hover{color:var(--color-cta-dark);text-decoration:underline}a:focus-visible{outline:2px solid var(--color-cta);outline-offset:2px;border-radius:2px}@media (max-width: 640px){html{font-size:14px}h1{font-size:var(--font-size-h2)}h2{font-size:var(--font-size-h3)}h3{font-size:var(--font-size-lg)}}:focus-visible{outline:2px solid var(--color-cta);outline-offset:2px}::selection{background:var(--color-cta);color:#fff}.loading-carousel{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--color-primary-darkest) 0%,var(--color-primary-dark) 100%);padding:var(--spacing-lg)}.carousel-container{width:100%;max-width:900px;background:#fff;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-2xl);display:grid;grid-template-columns:1fr 1fr;min-height:500px}.carousel-image-wrapper{position:relative;width:100%;height:100%;min-height:400px;overflow:hidden;background:linear-gradient(135deg,#f5e6d3,#e8d4b8)}.carousel-image{width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .5s ease-in-out}.carousel-image.fade-in{opacity:1}.carousel-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#2c18104d,#3d281733);pointer-events:none}.carousel-content{display:flex;flex-direction:column;justify-content:space-between;padding:48px 40px;background:#fff}.carousel-text{flex:1;display:flex;flex-direction:column;justify-content:center}.carousel-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-lg, 12px);background:linear-gradient(135deg,var(--color-premium-lighter, #ede9fe) 0%,var(--color-premium-light, #c4b5fd) 100%);color:var(--color-premium-dark, #6d28d9);margin-bottom:16px;opacity:0;animation:slideUp .6s ease-out .1s forwards}.carousel-icon.slide-up{opacity:1}.carousel-centered{display:flex;flex-direction:column;align-items:center;justify-content:center;grid-template-columns:1fr;text-align:center}.carousel-centered .carousel-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;width:100%}.carousel-centered .carousel-text{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:600px}.carousel-icon-large{width:80px;height:80px;margin-bottom:24px}.carousel-icon-large svg{width:48px;height:48px}.carousel-title{font-family:var(--font-family-heading, "Playfair Display", Georgia, serif);font-size:32px;font-weight:600;color:var(--color-primary-darkest, #2c1810);margin:0 0 16px;line-height:1.3;letter-spacing:-.02em;opacity:0;animation:slideUp .6s ease-out .2s forwards}.carousel-title.slide-up{opacity:1}.carousel-description{font-family:var(--font-family-body, "Inter", sans-serif);font-size:16px;color:var(--color-neutral-700, #374151);line-height:1.8;margin:0 0 24px;opacity:0;animation:slideUp .6s ease-out .4s forwards}.carousel-description.slide-up{opacity:1}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.carousel-dots{display:flex;gap:8px;margin-top:24px}.dot{width:12px;height:12px;border-radius:50%;background:#e0e0e0;border:none;cursor:pointer;transition:all .3s ease;padding:0}.dot.active{background:#8b5cf6;transform:scale(1.2)}.dot:hover{background:#d0d0d0}.dot.active:hover{background:#8b5cf6}.loading-indicator{position:absolute;bottom:32px;left:40px;right:40px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:16px;font-weight:600;color:var(--color-premium, #8b5cf6);background:#fffffff2;padding:16px 24px;border-radius:var(--radius-lg, 12px);box-shadow:var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, .1));border:2px solid var(--color-premium-light, #c4b5fd)}.spinner{width:28px;height:28px;border:4px solid rgba(139,92,246,.2);border-top:4px solid var(--color-premium, #8b5cf6);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.carousel-container{grid-template-columns:1fr;min-height:auto;max-height:90vh}.carousel-image-wrapper{min-height:250px;order:-1}.carousel-content{padding:32px 24px}.carousel-title{font-size:24px}.carousel-description{font-size:14px}.carousel-icon{width:48px;height:48px}.loading-indicator{position:relative;bottom:auto;left:auto;right:auto;margin-top:16px;padding:12px 16px;font-size:14px}.spinner{width:20px;height:20px}}.ad-display{margin:24px 0;padding:16px 0;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;background:#fafafa}.ad-display-before-story{margin-top:0;border-top:none}.ad-display-after-story{margin-bottom:0;border-bottom:none}.ad-container{max-width:800px;margin:0 auto;padding:12px;display:flex;justify-content:center}.ad-label{text-align:center;margin-bottom:12px;font-size:12px;color:#999;text-transform:uppercase;letter-spacing:1px;font-weight:600}.adsbygoogle{display:block}@media (max-width: 640px){.ad-display{margin:20px 0;padding:12px 0}.ad-container{padding:8px}.ad-label{font-size:11px}ins.adsbygoogle{display:block!important}}.story-disclaimer{background:linear-gradient(135deg,#f5f3ff,#f9f5ff);border-left:4px solid #8b5cf6;padding:24px;margin-bottom:32px;border-radius:8px}.disclaimer-container{max-width:800px;margin:0 auto}.disclaimer-container h2{color:#5b21b6;margin-bottom:16px;font-size:1.3rem}.disclaimer-container p{color:#1a1a1a;line-height:1.6;margin-bottom:12px;font-size:.95rem}.vision-section{background:#fff;padding:20px;border-radius:6px;margin:20px 0;border:1px solid #e5e1ff}.vision-section h3{color:#5b21b6;margin-bottom:12px}.enjoy-note{font-style:italic;color:#1a1a1a;margin-top:16px}.support-section{background:linear-gradient(135deg,#fff5f3,#fffaf7);border:2px solid #f59e0b;border-radius:12px;padding:32px;margin-top:40px;margin-bottom:32px}.support-container{max-width:800px;margin:0 auto}.feedback-question{text-align:center}.feedback-question h2{color:#d97706;margin-bottom:16px;font-size:1.5rem}.feedback-question p{color:#1a1a1a;margin-bottom:24px;font-size:1rem}.feedback-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.support-options h2{color:#d97706;margin-bottom:16px;font-size:1.5rem;text-align:center}.support-options p{color:#1a1a1a;margin-bottom:20px;line-height:1.6;text-align:center}.benefits-list{list-style:none;margin:24px 0;background:#fff;padding:20px;border-radius:8px;border-left:4px solid #f59e0b}.benefits-list li{color:#1a1a1a;padding:8px 0 8px 24px;position:relative}.benefits-list li:before{content:"✓";position:absolute;left:0;color:var(--color-cta);font-weight:700}.payment-options{margin-top:var(--spacing-2xl)}.payment-options h3{text-align:center;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.payment-choice{background:#fff;padding:var(--spacing-xl);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg);border:2px solid var(--color-cta-lighter);transition:var(--transition-all);cursor:pointer}.payment-choice:hover{border-color:var(--color-cta);box-shadow:0 4px 12px var(--color-cta-lighter);transform:translateY(-2px)}.payment-choice h4{color:var(--color-cta-dark);margin-bottom:var(--spacing-sm);font-size:var(--font-size-lg)}.payment-choice p{color:var(--color-text-secondary);margin-bottom:var(--spacing-md);font-size:var(--font-size-sm)}.subscription-badge{display:inline-block;background:var(--color-info-lighter);color:var(--color-info-dark);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:var(--font-size-xs);margin-bottom:12px!important}.donation-amounts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}.subscription-benefits{list-style:none;padding:0;margin:12px 0}.subscription-benefits li{color:#1a1a1a;padding:8px 0 8px 20px;position:relative;font-size:.9rem}.subscription-benefits li:before{content:"⭐";position:absolute;left:0}.btn{padding:var(--spacing-md) var(--spacing-lg);min-height:var(--touch-target-min);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:var(--transition-all);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--color-cta-dark) 0%,var(--color-cta) 100%);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--shadow-xl);background:linear-gradient(135deg,var(--color-cta) 0%,var(--color-cta-light) 100%)}.btn-secondary{background:#fff;color:var(--color-primary-dark);border:2px solid var(--color-cta)}.btn-secondary:hover:not(:disabled){background:var(--color-cta-lighter)}.btn-outline{background:#fff;color:var(--color-text-secondary);border:1px solid var(--color-neutral-300)}.btn-outline:hover:not(:disabled){background:var(--color-neutral-100);border-color:var(--color-cta)}.btn-accent{background:linear-gradient(135deg,var(--color-info) 0%,var(--color-info-dark) 100%);color:#fff;width:100%;margin-top:var(--spacing-md);box-shadow:var(--shadow-md)}.btn-accent:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-link{background:none;color:#5b21b6;padding:8px 0;text-decoration:underline;margin-top:16px}.btn-link:hover:not(:disabled){color:#5b21b6}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal-content{background:#fff;border-radius:12px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #0000004d}.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:28px;color:#1a1a1a;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.modal-close:hover{background:#f3f4f6;color:#1f2937}.payment-form{padding:32px 24px}.payment-form h2{color:#1f2937;margin-bottom:24px;font-size:1.3rem;text-align:center}.form-group{margin-bottom:20px}.form-group label{display:block;color:#1a1a1a;font-weight:600;margin-bottom:8px;font-size:.9rem}.form-group input[type=email],.form-group input[type=text]{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:6px;font-size:1rem;transition:border-color .2s ease}.form-group input[type=email]:focus,.form-group input[type=text]:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.form-group.checkbox{display:flex;align-items:center;gap:8px}.form-group.checkbox input[type=checkbox]{width:auto;margin:0}.form-group.checkbox label{margin:0;font-weight:400}.StripeElement{padding:12px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff}.StripeElement--focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.StripeElement--invalid{border-color:#ef4444}.donation-form,.subscription-form{margin-bottom:24px}.donation-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}.donation-btn{padding:12px 24px;border:2px solid #f59e0b;background:#fff;color:#d97706;border-radius:6px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;flex:1;min-width:100px}.donation-btn:hover{background:#fef3c7}.donation-btn.selected{background:#f59e0b;color:#fff}.donation-btn:disabled{opacity:.6;cursor:not-allowed}.error-message{background:#fee2e2;border-left:4px solid #ef4444;color:#991b1b;padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:.9rem}.button-group{display:flex;gap:12px;margin-bottom:16px}.button-group .btn{flex:1}.security-note{color:#1a1a1a;font-size:.8rem;text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb}.payment-success{padding:40px 24px;text-align:center}.payment-success h2{color:#10b981;margin-bottom:16px;font-size:1.5rem}.payment-success p{color:#1a1a1a;margin-bottom:8px;line-height:1.6}.success-message{color:#5b21b6;font-weight:600;margin-top:16px}@media (max-width: 640px){.story-disclaimer{padding:16px;margin-bottom:24px}.support-section{padding:20px;margin-top:24px}.feedback-buttons{flex-direction:column}.feedback-buttons .btn{width:100%}.payment-choice{padding:16px}.donation-amounts{margin-bottom:12px}.donation-btn{flex:0 1 calc(50% - 6px)}.modal-content{border-radius:12px 12px 0 0;max-height:calc(100vh - 20px)}.payment-form{padding:20px 16px}.button-group{flex-direction:column}.btn-accent{width:100%}}.share-section{background:linear-gradient(135deg,#fef3f0,#fef9f7);border:2px solid #ea580c;border-radius:12px;padding:28px;max-width:800px;margin:32px auto}.share-container{text-align:center}.share-title{color:#3d2812;font-size:1.8rem;margin-bottom:12px;font-weight:700}.share-subtitle{color:#1a1a1a;margin-bottom:24px;font-size:.95rem;line-height:1.6}.share-btn-native{background:linear-gradient(135deg,#059669,#047857);color:#fff;border:none;padding:14px 24px;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;width:100%;max-width:300px;justify-content:center}.share-btn-native:active{background:linear-gradient(135deg,#047857,#065f46);transform:scale(.98)}.share-buttons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}.share-btn{background:#fff;border:2px solid #e5e5e5;border-radius:8px;padding:12px 8px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:6px;color:#1a1a1a}.share-btn:active{background:#f5f5f5;transform:scale(.98)}.share-icon{font-size:1.5rem;display:block}.share-text{font-size:.7rem;display:block;word-break:break-word}.share-btn-twitter{border-color:#1d9bf0;color:#1d9bf0}.share-btn-twitter:active{background:#e7f5ff}.share-btn-facebook{border-color:#1877f2;color:#1877f2}.share-btn-facebook:active{background:#e7f5ff}.share-btn-whatsapp{border-color:#25d366;color:#25d366}.share-btn-whatsapp:active{background:#e7ffed}.share-btn-telegram{border-color:#08c;color:#08c}.share-btn-telegram:active{background:#e7f5ff}.share-btn-linkedin{border-color:#0a66c2;color:#0a66c2}.share-btn-linkedin:active{background:#e7f5ff}.share-btn-email{border-color:#ea4335;color:#ea4335}.share-btn-email:active{background:#ffe7e7}.share-link-section{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:20px;margin-bottom:28px}.share-link-container{display:flex;gap:8px;margin-bottom:12px}.share-link-input{flex:1;border:1px solid #ddd;border-radius:6px;padding:10px 12px;font-size:.85rem;font-family:Courier New,monospace;color:#1a1a1a;background:#f9f9f9;word-break:break-all}.share-link-input:focus{outline:none;border-color:#3d2812;background:#fff}.share-link-copy{background:#8b6f47;color:#fff;border:none;border-radius:6px;padding:10px 16px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.85rem;min-width:80px}.share-link-copy:active{background:#6d5737;transform:scale(.98)}.share-link-copy.copied{background:#059669}.share-link-hint{font-size:.8rem;color:#999;text-align:center}.share-qr-section{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:20px;margin-bottom:24px}.share-qr-hint{font-size:.9rem;color:#1a1a1a;margin-bottom:16px;font-weight:600}.share-qr-placeholder{background:linear-gradient(135deg,#f5e6d3,#e8d4c0);border:2px dashed #D4A574;border-radius:8px;width:150px;height:150px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#3d2812;font-weight:600;font-size:1rem}.qr-generating{text-align:center;font-size:1.5rem}.share-qr-subtitle{font-size:.8rem;color:#999;text-align:center}.share-footer{background:linear-gradient(135deg,#fef3f0,#fff0e6);border-left:4px solid #ea580c;padding:16px;border-radius:6px;margin-top:24px}.share-footer-text{color:#3d2812;font-size:.95rem;font-weight:600;margin-bottom:8px}.share-footer-subtitle{color:#1a1a1a;font-size:.85rem;line-height:1.5}@media (min-width: 641px){.share-buttons-grid{grid-template-columns:repeat(6,1fr);gap:10px}.share-btn{padding:14px 10px}.share-icon{font-size:1.8rem}.share-text{font-size:.75rem}}@media (max-width: 640px){.share-section{padding:20px;margin:24px 0}.share-title{font-size:1.5rem}.share-subtitle{font-size:.9rem}.share-buttons-grid{grid-template-columns:repeat(2,1fr);gap:10px}.share-btn{padding:10px 6px;font-size:.7rem}.share-icon{font-size:1.2rem}.share-link-container{flex-direction:column;gap:8px}.share-link-input{font-size:.75rem;padding:8px 10px}.share-link-copy{width:100%}.share-qr-placeholder{width:120px;height:120px;font-size:.9rem}}.pwa-install-prompt{background:linear-gradient(135deg,#059669,#047857);color:#fff;padding:16px;border-radius:8px;margin-bottom:16px;display:flex;align-items:center;gap:12px;justify-content:space-between}.pwa-install-prompt-content{flex:1}.pwa-install-prompt-title{font-weight:600;margin-bottom:4px}.pwa-install-prompt-description{font-size:.9rem;opacity:.9}.pwa-install-btn{background:#fff;color:#047857;border:none;padding:8px 16px;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.pwa-install-btn:active{transform:scale(.98)}.quick-donation-section{text-align:center;margin-top:var(--spacing-lg)}.quick-donation-section h3{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-primary)}.quick-donation-buttons{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.btn-donation{min-width:80px;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-xl);font-weight:700;background:var(--color-primary-100);color:var(--color-primary-700);border:2px solid var(--color-primary-300);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease;position:relative}.btn-donation:hover{background:var(--color-primary-200);border-color:var(--color-primary-500);transform:translateY(-2px);box-shadow:0 4px 12px #8b5a2b33}.btn-donation-popular{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-600);transform:scale(1.1)}.btn-donation-popular:hover{background:var(--color-primary-600);transform:scale(1.1) translateY(-2px)}.popular-badge{display:block;font-size:var(--font-size-xs);font-weight:500;margin-top:var(--spacing-xs);opacity:.9}.donation-note{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--spacing-sm)}.thank-you-banner{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #10b981;border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);text-align:center}.thank-you-icon{font-size:3rem;margin-bottom:var(--spacing-md)}.thank-you-banner h2{color:#059669;margin-bottom:var(--spacing-sm)}.thank-you-banner p{color:var(--color-text-secondary)}.support-section h2{color:var(--color-text-primary);margin-bottom:var(--spacing-md);font-size:var(--font-size-xl);text-align:center}.support-description{color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);line-height:1.6;text-align:center}.donation-options{text-align:center}.donation-options h3{color:var(--color-text-secondary);font-size:var(--font-size-lg);margin-bottom:var(--spacing-lg)}.donation-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;margin-bottom:var(--spacing-lg)}.custom-amount-toggle{color:var(--color-text-muted);font-size:var(--font-size-sm);text-decoration:underline;cursor:pointer}.custom-amount-input{display:flex;gap:var(--spacing-md);justify-content:center;align-items:center;margin-bottom:var(--spacing-lg)}.custom-amount-input .input-wrapper{display:flex;align-items:center;background:#fff;border:2px solid var(--color-neutral-300);border-radius:var(--radius-md);padding:0 var(--spacing-sm);transition:border-color .2s}.custom-amount-input .input-wrapper:focus-within{border-color:var(--color-primary-500)}.custom-amount-input .currency-symbol{color:var(--color-text-muted);font-size:var(--font-size-lg);font-weight:500}.custom-amount-input input{border:none;outline:none;padding:var(--spacing-sm);font-size:var(--font-size-lg);width:120px;color:var(--color-text-primary)}.custom-amount-input input::placeholder{color:var(--color-text-muted)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;overflow-x:hidden}body{font-family:var(--font-family-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-primary-100) 100%);min-height:100vh;color:#0a0a0a;line-height:var(--line-height-normal);overflow-x:hidden}#root{display:flex;flex-direction:column;min-height:100vh}.home{display:flex;flex-direction:column;flex:1;padding:var(--space-4);max-width:var(--container-2xl);margin:0 auto;width:100%}.app-header{text-align:center;padding:var(--space-8) var(--space-4);color:var(--color-primary-900)}.app-header h1{font-family:var(--font-family-serif);font-size:var(--font-size-4xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2);letter-spacing:-.02em}.app-header p{font-size:var(--font-size-lg);color:var(--color-neutral-700);font-weight:var(--font-weight-normal)}.app-main{display:flex;flex-direction:column;gap:var(--space-8);flex:1;justify-content:flex-start}.barcode-scanner{display:flex;justify-content:center;padding:var(--space-4)}.scan-button{padding:var(--space-4) var(--space-8);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);border:none;border-radius:var(--radius-md);background:var(--color-primary-500);color:#fff;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-lg);min-width:200px}.scan-button:hover:not(:disabled){background:var(--color-primary-600);transform:translateY(-2px);box-shadow:var(--shadow-xl)}.scan-button:active:not(:disabled){transform:translateY(0)}.scan-button:disabled{opacity:.7;cursor:not-allowed}.story-container{background:#fff;border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-md);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.story-container.empty,.story-container.loading{text-align:center;color:var(--color-neutral-700);font-size:var(--font-size-lg);padding:var(--space-12) var(--space-8)}.story-container.error{background-color:var(--color-error-50);color:var(--color-error-700);text-align:center;padding:var(--space-6);border-left:var(--border-width-thick) solid var(--color-error-500)}.story-image{width:100%;max-height:400px;overflow:hidden;border-radius:var(--radius-md);margin-bottom:var(--space-6);background:var(--color-primary-50)}.story-image img{width:100%;height:100%;object-fit:cover}.story-container h1{font-family:var(--font-family-serif);font-size:var(--font-size-3xl);font-weight:var(--font-weight-semibold);color:var(--color-primary-900);margin-bottom:var(--space-6);letter-spacing:-.02em}.story-details{display:flex;flex-direction:column;gap:var(--space-8)}.story-details section{border-bottom:var(--border-width-thin) solid var(--color-primary-100);padding-bottom:var(--space-6)}.story-details section:last-child{border-bottom:none}.story-details h2{font-family:var(--font-family-serif);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:#1a1005;margin-bottom:var(--space-3)}.story-details p{color:#0a0a0a;line-height:var(--line-height-relaxed);font-size:var(--font-size-base)}.journey{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4)}.stage{background:var(--color-primary-50);padding:var(--space-4);border-radius:var(--radius-md);border-left:var(--border-width-thick) solid var(--color-primary-500)}.stage-image{margin:var(--space-3) 0;border-radius:var(--radius-sm);overflow:hidden}.stage-image img{width:100%;height:auto;max-height:150px;object-fit:cover;display:block}.story-photo{margin:var(--space-4) 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--color-primary-100)}.story-photo img{width:100%;height:auto;max-height:300px;object-fit:cover;display:block;transition:transform .3s ease}.story-photo:hover img{transform:scale(1.02)}.story-photo-caption{padding:var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic;text-align:center;background:var(--color-primary-50);margin:0}.stage h3{font-family:var(--font-family-serif);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-primary-900);margin-bottom:var(--space-2)}.stage p{font-size:var(--font-size-sm);color:#0a0a0a;line-height:var(--line-height-relaxed)}.story-narrative{background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-primary-100) 100%);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-4) 0}.story-content{font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:#0a0a0a}.story-content section{margin-bottom:var(--space-6);border-bottom:none;padding-bottom:0}.story-content .story-intro{font-size:var(--font-size-lg);color:#1a1005}.story-content .story-intro .lead{font-style:italic;font-size:var(--font-size-lg);color:#2a1a0a;border-left:var(--border-width-thick) solid var(--color-primary-500);padding-left:var(--space-4);margin-bottom:var(--space-6)}.story-content .story-chapter{margin-bottom:var(--space-8)}.story-content .story-chapter h3{font-family:var(--font-family-serif);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-primary-900);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:var(--border-width-medium) solid var(--color-primary-200)}.story-content .story-chapter p{margin-bottom:var(--space-4);text-align:justify}.story-content .story-finale{background:linear-gradient(135deg,var(--color-primary-100) 0%,var(--color-primary-200) 100%);border-radius:var(--radius-md);padding:var(--space-6);margin-top:var(--space-8)}.story-content .story-finale h3{color:var(--color-primary-800)}@media (max-width: 768px){.app-header h1{font-size:var(--font-size-3xl)}.app-header{padding:var(--space-6) var(--space-4)}.story-container{padding:var(--space-6)}.story-details h2{font-size:var(--font-size-xl)}.journey{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.scan-button{width:100%;padding:var(--space-3) var(--space-6)}}@media (max-width: 480px){.home{padding:var(--space-2)}.app-header h1{font-size:var(--font-size-2xl)}.story-container{padding:var(--space-4)}.story-details h2{font-size:var(--font-size-lg)}.journey{grid-template-columns:1fr}}:root{color-scheme:light}a{color:inherit;text-decoration:none}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}