@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=DM+Serif+Display&display=swap";:root{--bg: #FAFAFA;--surface: #FFFFFF;--primary: #FF3B30;--primary-dark: #D0271C;--accent: #30D158;--text: #1C1C1E;--text-muted: #8E8E93;--border: #E5E5EA;--success: #30D158;--warning: #FF9500;--danger: #FF3B30;--radius: 20px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);--shadow-hover: 0 4px 8px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);--primary-rgb: 255, 59, 48}body{margin:0;padding:0;font-family:DM Sans,Inter,PingFang SC,sans-serif;background:radial-gradient(circle at 80% 20%,#FF3B3015 0%,transparent 50%),var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;overflow-y:auto}#root{width:100%;max-width:800px;padding:20px;box-sizing:border-box}.app-container{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:80vh;position:relative}.cloud-badge{position:absolute;top:15px;right:15px;background-color:var(--surface);color:var(--text-muted);padding:5px 10px;border-radius:15px;font-size:.8em;box-shadow:var(--shadow);z-index:10}.navbar{display:flex;justify-content:space-around;padding:15px 0;background-color:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);z-index:5}.nav-item{background:none;border:none;color:var(--text-muted);font-family:DM Sans,sans-serif;font-size:1em;cursor:pointer;padding:10px 15px;border-radius:10px;display:flex;align-items:center;gap:8px;transition:all .3s ease;position:relative;overflow:hidden}.nav-item.active{color:var(--primary);font-weight:700}.nav-item.active:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:80%;height:3px;background-color:var(--primary);border-radius:2px;animation:navUnderline .3s forwards}@keyframes navUnderline{0%{width:0}to{width:80%}}.nav-item:hover{background-color:rgba(var(--primary-rgb),.05);color:var(--primary)}.main-content{flex-grow:1;padding:20px;position:relative;overflow-y:auto}.page{padding:20px;min-height:400px}h1,h2{font-family:"DM Serif Display",serif;color:var(--primary-dark);text-align:center;margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,.05)}h1.main-title{font-size:3em;color:var(--primary);margin-top:30px}.subtitle{text-align:center;color:var(--text-muted);font-size:1.1em;margin-bottom:40px}.home-page{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-size:cover;background-position:center;background-repeat:no-repeat;min-height:500px;border-radius:var(--radius);position:relative;overflow:hidden}.home-page:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(255,255,255,.8) 0%,rgba(255,255,255,.2) 50%,transparent 100%);z-index:1}.home-page>*{position:relative;z-index:2}.apple-svg-container{width:120px;height:120px;margin-top:20px}.apple-svg-container svg{width:100%;height:100%}.variety-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:20px 0}.variety-card{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-align:center;position:relative;overflow:hidden;border:1px solid var(--border);display:flex;flex-direction:column;align-items:center}.variety-card h3{font-family:"DM Serif Display",serif;color:var(--primary-dark);margin-top:15px;margin-bottom:10px}.variety-card p{font-size:.95em;color:var(--text);margin:5px 0}.variety-image-container{width:120px;height:120px;border-radius:50%;background-color:var(--bg);display:flex;justify-content:center;align-items:center;overflow:hidden;box-shadow:inset 0 0 5px #0000000d;border:2px solid var(--primary)}.variety-image{width:100%;height:100%;object-fit:cover;display:block}.variety-image-fallback{font-size:4em;line-height:1}.card-decoration{position:absolute;top:15px;right:15px;color:var(--accent);opacity:.6}.history-list{list-style:none;padding:0}.history-list li{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:15px;padding:15px 20px;border-left:5px solid var(--primary);display:flex;align-items:flex-start;gap:10px;font-size:1.05em;color:var(--text)}.history-list li .list-icon{color:var(--primary);margin-top:3px;flex-shrink:0}.nutrition-content{display:flex;flex-direction:column;align-items:center;gap:30px;padding:20px}.nutrition-image-container{width:250px;height:250px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-hover);border:2px solid var(--accent);background-color:var(--bg);display:flex;justify-content:center;align-items:center}.nutrition-image{width:100%;height:100%;object-fit:cover;display:block}.nutrition-image-fallback{font-size:6em;line-height:1}.nutrition-details{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:25px;width:100%;max-width:400px;border:1px solid var(--border)}.nutrition-details table{width:100%;border-collapse:collapse;margin-bottom:20px}.nutrition-details td{padding:10px 0;border-bottom:1px dashed var(--border);font-size:1em}.nutrition-details td:first-child{font-weight:700;color:var(--primary-dark)}.nutrition-details tr:last-child td{border-bottom:none}.nutrition-tip{background-color:#e6ffe6;color:var(--accent);padding:12px 15px;border-radius:10px;font-size:.95em;display:flex;align-items:center;gap:8px;border:1px solid var(--accent)}.quiz-page{display:flex;flex-direction:column;align-items:center;text-align:center}.quiz-card{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-hover);padding:30px;margin-top:20px;width:100%;max-width:500px;border:1px solid var(--border)}.quiz-question{font-size:1.4em;font-weight:700;color:var(--text);margin-bottom:30px}.quiz-buttons{display:flex;justify-content:center;gap:20px;margin-bottom:20px}.quiz-button{padding:12px 25px;border-radius:10px;font-size:1.1em;font-weight:700;cursor:pointer;border:none;transition:all .2s ease;box-shadow:var(--shadow)}.quiz-button:disabled{opacity:.6;cursor:not-allowed}.true-button{background-color:var(--success);color:#fff}.true-button:hover:not(:disabled){background-color:#28a745}.false-button{background-color:var(--danger);color:#fff}.false-button:hover:not(:disabled){background-color:#dc3545}.quiz-feedback{margin-top:20px;font-size:1em;color:var(--text);background-color:#f0f0f0;padding:10px 15px;border-radius:10px;border:1px solid var(--border)}.quiz-results{background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-hover);padding:30px;margin-top:20px;width:100%;max-width:500px;border:1px solid var(--border)}.quiz-results h3{color:var(--primary);margin-bottom:15px}.quiz-results p{font-size:1.1em;margin-bottom:10px}.perfect-score{color:var(--success);font-weight:700;font-size:1.2em}.good-try{color:var(--warning);font-weight:700}.reset-button{background-color:var(--primary);color:#fff;padding:10px 20px;border-radius:10px;border:none;cursor:pointer;font-size:1em;margin-top:20px;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow);transition:background-color .2s ease}.reset-button:hover{background-color:var(--primary-dark)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:15px;color:var(--text-muted);font-size:1.1em}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 600px){.navbar{flex-wrap:wrap;padding:10px 0}.nav-item{padding:8px 10px;font-size:.9em;gap:5px}.main-title{font-size:2.5em}.subtitle{font-size:1em}.variety-grid{grid-template-columns:1fr}.nutrition-content{flex-direction:column}.nutrition-image-container{width:200px;height:200px}.quiz-card,.quiz-results{padding:20px}.quiz-question{font-size:1.2em}.quiz-buttons{flex-direction:column;gap:10px}}