:root{--bg-color:#0b0f19;--card-bg:#161c2da6;--card-border:#ffffff14;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-glow:#10b98126;--color-unripe:#10b981;--color-breaking:#eab308;--color-ripe:#ec4899;--color-overripe:#ef4444;--theme-color:var(--color-unripe);--font-sans:"Outfit", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;--safe-area-bottom:env(safe-area-inset-bottom,0px)}.unripe-theme{--theme-color:var(--color-unripe);--accent-glow:#10b98140}.breaking-theme{--theme-color:var(--color-breaking);--accent-glow:#eab30840}.ripe-theme{--theme-color:#a855f7;--accent-glow:#a855f74d}.overripe-theme{--theme-color:var(--color-overripe);--accent-glow:#ef444440}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-sans);flex-direction:column;min-height:100vh;display:flex;overflow-x:hidden}.app-container{flex-direction:column;max-width:480px;min-height:100vh;margin:0 auto;padding:16px;display:flex;position:relative}.app-header{text-align:center;margin-bottom:12px}.logo{justify-content:center;align-items:center;gap:8px;display:flex}.logo-emoji{font-size:28px;animation:2s ease-in-out infinite bounce}.app-header h1{letter-spacing:-.5px;font-size:26px;font-weight:800}.highlight{background:linear-gradient(135deg,#10b981 0%,#3b82f6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.subtitle{color:var(--text-secondary);letter-spacing:2px;text-transform:uppercase;margin-top:2px;font-size:11px}.app-main{flex-direction:column;flex:1;gap:16px;display:flex}.camera-section{width:100%;position:relative}.camera-viewport{aspect-ratio:4/3;width:100%;box-shadow:0 10px 30px #00000080, 0 0 40px var(--accent-glow);border:1px solid var(--card-border);background-color:#000;border-radius:24px;transition:box-shadow .5s;position:relative;overflow:hidden}#camera-stream{object-fit:cover;width:100%;height:100%}#edge-overlay-canvas{pointer-events:none;mix-blend-mode:screen;opacity:.4;width:100%;height:100%;position:absolute;top:0;left:0}.scan-target-overlay{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.scan-target-ring{border:3px dashed #fff6;border-radius:50%;justify-content:center;align-items:center;width:180px;height:180px;transition:border-color .3s;animation:2.5s ease-in-out infinite pulse-ring;display:flex;position:relative;box-shadow:0 0 0 9999px #00000059}.ripe-theme .scan-target-ring{border-color:#a855f7b3}.unripe-theme .scan-target-ring{border-color:#10b981b3}.breaking-theme .scan-target-ring{border-color:#eab308b3}.overripe-theme .scan-target-ring{border-color:#ef4444b3}.scan-target-dot{background-color:var(--theme-color);width:8px;height:8px;box-shadow:0 0 10px var(--theme-color);border-radius:50%;transition:background-color .3s,box-shadow .3s}.scan-hint{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);letter-spacing:.5px;background-color:#000000b3;border:1px solid #ffffff1a;border-radius:12px;padding:4px 12px;font-size:11px;position:absolute;bottom:12px}.viewport-overlay{z-index:10;background-color:#0b0f19f2;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;height:100%;transition:opacity .3s;display:none;position:absolute;top:0;left:0}.viewport-overlay.active{display:flex}.spinner{border:3px solid #ffffff1a;border-top-color:#10b981;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}#camera-loading-text{color:var(--text-secondary);font-size:14px}.camera-controls{z-index:5;justify-content:space-between;align-items:center;margin-top:-24px;padding:0 20px;display:flex;position:relative}.circle-btn{border:1px solid var(--card-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:48px;height:48px;color:var(--text-primary);cursor:pointer;background:#161c2dcc;border-radius:50%;justify-content:center;align-items:center;transition:transform .2s,background-color .2s;display:flex;box-shadow:0 6px 16px #0000004d}.circle-btn:active{transform:scale(.9)}.circle-btn.primary-btn{background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;width:60px;height:60px;box-shadow:0 8px 24px #10b9814d,0 0 15px #10b98126}.circle-btn.primary-btn:active{transform:scale(.92)}.info-icon{font-size:20px;font-weight:600}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:28px;padding:24px;position:relative;overflow:hidden;box-shadow:0 15px 35px #00000040}.training-panel{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;display:none}.training-panel.active{display:flex}.progress-bar-container{background-color:#ffffff0d;border-radius:3px;width:100%;height:6px;margin-bottom:12px;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#10b981,#3b82f6);border-radius:3px;height:100%;transition:width .1s linear}#model-training-status{color:var(--text-secondary);font-size:13px}.result-panel{flex-direction:column;gap:20px;display:flex}.ripeness-gauge-container{width:140px;height:140px;margin:0 auto;position:relative}.ripeness-svg-gauge{width:100%;height:100%;transform:rotate(-90deg)}.gauge-bg{fill:none;stroke:#ffffff0a;stroke-width:8px}.gauge-fill{fill:none;stroke:var(--theme-color);stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1),stroke .5s}.gauge-text-container{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}#ripeness-value{color:var(--text-primary);font-size:38px;font-weight:800;line-height:1}.percent-symbol{color:var(--text-secondary);margin-top:-2px;font-size:16px;font-weight:600}.gauge-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-top:2px;font-size:10px}.ripeness-details{text-align:center}.badge{letter-spacing:.5px;color:#fff;background-color:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;margin-bottom:8px;padding:4px 12px;font-size:11px;font-weight:700;display:inline-block}.badge.unripe-theme{color:#34d399;background-color:#10b98126;border-color:#10b9814d}.badge.breaking-theme{color:#fbbf24;background-color:#eab30826;border-color:#eab3084d}.badge.ripe-theme{color:#c084fc;background-color:#a855f726;border-color:#a855f74d}.badge.overripe-theme{color:#f87171;background-color:#ef444426;border-color:#ef44444d}#ripeness-title{margin-bottom:6px;font-size:20px;font-weight:700;transition:color .3s}#ripeness-desc{color:var(--text-secondary);max-width:280px;margin:0 auto;font-size:13px;line-height:1.5}.adjuster-section{background:#ffffff05;border:1px solid #ffffff0a;border-radius:18px;padding:14px 16px}.adjuster-header{justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;display:flex}.adjuster-header label{color:var(--text-primary);font-weight:600}#firmness-label{color:var(--theme-color);font-weight:700;transition:color .3s}input[type=range]{-webkit-appearance:none;background:#ffffff1a;border-radius:3px;outline:none;width:100%;height:6px;margin:8px 0}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text-primary);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:transform .1s,background-color .3s;box-shadow:0 2px 6px #0000004d}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2)}.slider-ticks{color:var(--text-secondary);justify-content:space-between;padding:0 4px;font-size:10px;display:flex}.scanner-data-details{border-top:1px solid #ffffff0d;padding-top:12px}.scanner-data-details summary{color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:.5px;text-align:center;outline:none;padding:4px 0;font-size:11px;font-weight:600}.data-grid{background:#0003;border-radius:12px;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px;padding:10px;display:grid}.data-item{flex-direction:column;align-items:center;padding:6px;display:flex}.data-label{color:var(--text-secondary);margin-bottom:2px;font-size:9px}.data-value{color:var(--text-primary);font-size:12px;font-weight:700}.help-dialog{background:0 0;border:none;outline:none;width:90%;max-width:380px;margin:auto;padding:0}.help-dialog::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#070a13cc}.dialog-content{border:1px solid var(--card-border);color:var(--text-primary);background:#151a26;border-radius:24px;padding:24px;box-shadow:0 20px 40px #00000080}.dialog-content h2{margin-bottom:12px;font-size:18px;font-weight:700}.dialog-content h3{color:var(--text-secondary);margin:16px 0 8px;font-size:13px;font-weight:700}.dialog-content p{color:var(--text-secondary);font-size:13px;line-height:1.5}.help-list{flex-direction:column;gap:8px;margin-bottom:20px;list-style:none;display:flex}.help-list li{color:var(--text-secondary);padding-left:12px;font-size:12px;line-height:1.4;position:relative}.help-list li:before{content:"•";color:#10b981;font-weight:700;position:absolute;left:0}.action-btn{border:1px solid var(--card-border);width:100%;color:var(--text-primary);cursor:pointer;background:#ffffff14;border-radius:12px;padding:12px;font-size:13px;font-weight:700;transition:background-color .2s}.action-btn:active{background:#ffffff26}.app-footer{text-align:center;color:#fff3;margin-top:auto;padding:16px 0 8px;font-size:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-ring{0%{opacity:.6;transform:scale(.98)}50%{opacity:.9;transform:scale(1.02)}to{opacity:.6;transform:scale(.98)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}