*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#1d1d1f;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:24px}.header{background:#fff;border-radius:20px;padding:32px;margin-bottom:24px;box-shadow:0 8px 32px #00000014;text-align:center}.header h1{font-size:2.75rem;color:#1d1d1f;margin-bottom:24px;font-weight:700;letter-spacing:-.02em}.progress-overview{display:flex;justify-content:center}.overall-progress{width:100%;max-width:400px}.progress-text{display:block;font-size:1.25rem;font-weight:600;margin-bottom:16px;color:#515154}.progress-bar{width:100%;height:24px;background:#f2f2f7;border-radius:12px;overflow:hidden;box-shadow:inset 0 2px 4px #0000000f}.progress-fill{height:100%;background:linear-gradient(90deg,#34c759,#30d158);border-radius:12px;transition:width .4s cubic-bezier(.4,0,.2,1);width:0%}.controls{background:#fff;border-radius:20px;padding:24px;margin-bottom:24px;box-shadow:0 8px 32px #00000014}.search-filter{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}#search-input{flex:2;min-width:250px;padding:16px 20px;border:2px solid #f2f2f7;border-radius:12px;font-size:16px;font-weight:500;transition:all .2s ease;background:#fbfbfd}#search-input:focus{outline:none;border-color:#007aff;background:#fff;box-shadow:0 0 0 4px #007aff1a}#filter-select{flex:1;min-width:150px;padding:16px 20px;border:2px solid #f2f2f7;border-radius:12px;font-size:16px;font-weight:500;background:#fbfbfd;cursor:pointer;transition:all .2s ease}#filter-select:focus{outline:none;border-color:#007aff;background:#fff;box-shadow:0 0 0 4px #007aff1a}.action-buttons{display:flex;gap:12px;flex-wrap:wrap}.action-buttons button{padding:16px 24px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex:1;min-width:140px;letter-spacing:-.01em}#share-btn{background:#007aff;color:#fff;box-shadow:0 4px 16px #007aff4d}#share-btn:hover{background:#0056cc;transform:translateY(-2px);box-shadow:0 8px 24px #007aff66}.more-dropdown{position:relative;flex:1;min-width:140px}#more-btn{background:#f2f2f7;color:#1d1d1f;width:100%;border:2px solid transparent}#more-btn:hover{background:#e5e5ea;border-color:#d1d1d6;transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.more-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e5ea;border-radius:16px;box-shadow:0 12px 40px #00000026;z-index:1000;overflow:hidden;margin-top:8px}.more-menu.show{display:block}.more-menu button{display:block;width:100%;padding:16px 20px;border:none;background:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s ease;text-align:left;min-width:auto;flex:none;color:#1d1d1f}.more-menu button:hover{background:#f9f9f9;transform:none;box-shadow:none}.menu-separator{height:1px;background:#f2f2f7;margin:0}#export-json-btn:hover{background:#e8f5e8}#export-png-btn:hover{background:#e8f4ff}#export-pdf-btn:hover{background:#fff2e8}.more-menu #reset-btn{color:#ff3b30;font-weight:600}.more-menu #reset-btn:hover{background:#ffebee;color:#d70015}.food-categories{display:flex;flex-direction:column;gap:32px}.category{background:#fff;border-radius:20px;padding:32px;box-shadow:0 8px 32px #00000014}.category-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}.category-title{font-size:1.9rem;font-weight:700;color:#1d1d1f;letter-spacing:-.02em}.category-progress{display:flex;align-items:center;gap:16px;flex:1;max-width:320px}.category-count{font-size:1rem;font-weight:600;color:#515154;white-space:nowrap}.category-progress-bar{flex:1;height:8px;background:#f2f2f7;border-radius:4px;overflow:hidden}.category-progress-fill{height:100%;border-radius:4px;transition:width .4s cubic-bezier(.4,0,.2,1);width:0%}.food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px;justify-items:center}.food-card{width:170px;height:190px;background:#fff;border:2px solid #f2f2f7;border-radius:20px;padding:20px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 12px #0000000f}.food-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px #0000001f;border-color:#e5e5ea}.food-card.tried{border-color:#34c759;background:#f0fff4;box-shadow:0 4px 20px #34c75926}.food-card.tried:after{content:"✓";position:absolute;top:12px;right:12px;color:#34c759;font-size:20px;font-weight:700}.food-image{width:88px;height:88px;object-fit:contain;margin-bottom:12px;border-radius:12px}.food-image.error{background:#f9f9f9;display:flex;align-items:center;justify-content:center;font-size:44px;color:#c7c7cc;border:2px dashed #e5e5ea}.food-names{text-align:center}.food-name-en{font-size:15px;font-weight:600;color:#1d1d1f;margin-bottom:4px;line-height:1.2;letter-spacing:-.01em}.food-name-zh{font-size:13px;color:#8e8e93;line-height:1.2;font-weight:500}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080;animation:fadeIn .3s ease}.modal-content{background-color:#fff;margin:15% auto;padding:30px;border-radius:15px;width:90%;max-width:500px;text-align:center;position:relative;animation:slideIn .3s ease}.close{position:absolute;top:15px;right:20px;color:#aaa;font-size:28px;font-weight:700;cursor:pointer}.close:hover{color:#333}#milestone-title{font-size:2rem;margin-bottom:15px;color:#4ecdc4}#milestone-message{font-size:1.2rem;color:#666}.url-container{display:flex;gap:10px;margin:20px 0;align-items:center}#share-url-input{flex:1;padding:12px;border:2px solid #ddd;border-radius:8px;font-size:14px;font-family:monospace;background:#f9f9f9;color:#333}#copy-url-btn{padding:12px 20px;background:#4ecdc4;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease;white-space:nowrap}#copy-url-btn:hover{background:#45b7aa;transform:translateY(-2px)}.share-note{font-size:.9rem;color:#666;margin-top:15px;line-height:1.4}#share-url-btn:hover{background:#e8f4ff}@media (max-width: 768px){.container{padding:15px}.header h1{font-size:2rem}.search-filter{flex-direction:column}#search-input,#filter-select{min-width:100%}.action-buttons{flex-direction:column}.category-header{flex-direction:column;align-items:flex-start}.category-progress{width:100%;max-width:none}.food-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px}.food-card{width:140px;height:160px;padding:12px}.food-image{width:70px;height:70px}}@media (max-width: 480px){.food-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.food-card{width:120px;height:140px;padding:10px}.food-image{width:60px;height:60px}.food-name-en{font-size:12px}.food-name-zh{font-size:10px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.hidden{display:none!important}.export-layout{background:#fff;padding:40px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;max-width:800px;position:fixed!important;top:0!important;left:0!important;transform:translate(-9999px)!important;pointer-events:none;margin:0;overflow:hidden}.export-layout .export-header{text-align:center;margin-bottom:30px;border-bottom:3px solid #4ecdc4;padding-bottom:20px}.export-layout .export-title{font-size:2.5rem;color:#333;margin:0 0 10px;font-weight:700}.export-layout .export-progress{font-size:1.2rem;color:#666;margin:0}.export-layout .export-date{font-size:.9rem;color:#999;margin-top:10px}.export-layout .export-category{margin-bottom:40px}.export-layout .export-category-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:15px 20px;border-radius:10px;color:#fff;font-weight:600}.export-layout .export-category-title{font-size:1.4rem;margin:0}.export-layout .export-category-progress{font-size:1.1rem}.export-layout .export-food-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;margin-bottom:20px}.export-layout .export-food-card{display:flex;flex-direction:column;align-items:center;padding:15px;border:2px solid #e0e0e0;border-radius:10px;background:#fff;text-align:center;position:relative}.export-layout .export-food-card.tried{border-color:#4ecdc4;background:#f0fffe}.export-layout .export-food-card.tried:after{content:"✓";position:absolute;top:8px;right:8px;color:#4ecdc4;font-size:16px;font-weight:700}.export-layout .export-food-image{width:60px;height:60px;object-fit:contain;margin-bottom:8px;border-radius:6px}.export-layout .export-food-image.error{background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:30px;color:#999}.export-layout .export-food-name-en{font-size:12px;font-weight:600;color:#333;margin-bottom:2px;line-height:1.2}.export-layout .export-food-name-zh{font-size:10px;color:#666;line-height:1.2}