:root{--primary:#2d8659;--primary-light:#3da670;--primary-dark:#1e5c3e;--bg:#f5f3ef;--card:#fff;--text:#2c2c2c;--text-light:#666;--border:#e8e5e0;--shadow:0 2px 12px rgba(0,0,0,0.06);--radius:12px}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg)}

/* Screens */
.screen{display:none;min-height:100vh;padding-bottom:20px}
.screen.active{display:block}

/* Top bar */
.topbar{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;padding:36px 20px 14px;border-radius:0 0 20px 20px}
.topbar h1{font-size:20px;margin-bottom:4px}
.topbar .sub{font-size:13px;opacity:.85}

/* Onboarding */
.onboarding{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:30px 24px;background:linear-gradient(180deg,#f5f3ef,#e8f5ec)}
.onboarding .logo{font-size:56px;margin-bottom:12px}
.onboarding h1{font-size:28px;font-weight:700;color:var(--primary-dark);margin-bottom:8px}
.onboarding .slogan{font-size:15px;color:var(--text-light);text-align:center;line-height:1.6;margin-bottom:32px}
.onboarding .features{width:100%;margin-bottom:28px}
.onboarding .feature{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14px;color:var(--text)}
.onboarding .check{width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}

/* Buttons */
.btn-primary{background:var(--primary);color:#fff;border:none;border-radius:14px;padding:14px 0;width:100%;font-size:17px;font-weight:600;box-shadow:0 4px 16px rgba(45,134,89,0.3)}
.btn-primary:active{transform:scale(0.98)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed}
.btn-secondary{background:transparent;color:var(--primary);border:none;font-size:14px;margin-top:12px;width:100%;padding:8px}
.btn-back{background:transparent;border:none;font-size:22px;color:var(--primary);padding:4px 8px}

/* Forms */
.form{padding:36px 20px 20px}
.form h2{font-size:22px;font-weight:700;margin-bottom:6px}
.form .sub{font-size:14px;color:var(--text-light);margin-bottom:24px}
.fg{margin-bottom:18px}
.fg .label{font-size:14px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:4px}
.fg .label .req{color:#e85d5d;font-size:12px}
.fg .label .opt{color:var(--text-light);font-size:12px;font-weight:400}
.fg .label .hint{color:var(--text-light);font-size:12px;font-weight:400;margin-left:4px}
.input{width:100%;border:2px solid var(--border);border-radius:var(--radius);padding:12px 14px;font-size:15px;background:#fff;transition:border-color .2s}
.input:focus{outline:none;border-color:var(--primary)}
.split{display:flex;gap:8px}
.split>*{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 16px;border:2px solid var(--border);border-radius:20px;font-size:14px;background:#fff;transition:all .15s}
.chip.sel{border-color:var(--primary);background:#e8f5ec;color:var(--primary-dark);font-weight:600}

/* V4: Goal tabs */
.goal-tabs{display:flex;gap:0;margin-bottom:12px;border-radius:10px;overflow:hidden;border:2px solid var(--border)}
.goal-tab{flex:1;text-align:center;padding:10px 0;font-size:14px;font-weight:600;color:var(--text-light);background:#fff;transition:all .15s;cursor:pointer}
.goal-tab.active{background:var(--primary);color:#fff}
.goal-mode-block{margin-top:4px}
.goal-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.goal-card{background:#fff;border:2px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .15s}
.goal-card:active{transform:scale(0.97)}
.goal-card.sel{border-color:var(--primary);background:#e8f5ec}
.goal-card-icon{font-size:32px;margin-bottom:6px}
.goal-card-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px}
.goal-card-desc{font-size:12px;color:var(--text-light);line-height:1.3}
@media(max-width:360px){.goal-cards{grid-template-columns:1fr}}

/* Energy box */
.energy-box{background:#e8f5ec;border-radius:var(--radius);padding:14px;margin-bottom:16px}
.energy-box .title{font-size:13px;color:var(--text-light);margin-bottom:6px}
.energy-box .row{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.energy-box b{font-size:16px}
.energy-box .formula{font-size:11px;color:var(--text-light);margin-top:6px}

/* Quiz */
.quiz{padding:36px 20px 20px}
.quiz-progress{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.quiz-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.quiz-bar-fill{height:100%;background:var(--primary);border-radius:3px;transition:width .3s}
.quiz-text{font-size:12px;color:var(--text-light)}
.quiz-q{font-size:20px;font-weight:700;margin-bottom:20px;line-height:1.4}
.quiz-opts{margin-bottom:24px}
.quiz-opt{background:#fff;border:2px solid var(--border);border-radius:14px;padding:16px;margin-bottom:10px;font-size:15px;display:flex;align-items:center;gap:10px;transition:all .15s}
.quiz-opt.sel{border-color:var(--primary);background:#f0f7f3}
.quiz-opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
.quiz-opt.sel .dot{border-color:var(--primary);background:var(--primary)}

/* Constitution result */
.const-header{padding:36px 20px 20px;background:linear-gradient(135deg,#6b4f1a,#8a6d2a);color:#fff;text-align:center;border-radius:0 0 20px 20px}
.const-header .badge{font-size:13px;opacity:.8;margin-bottom:6px}
.const-header .type-name{font-size:28px;font-weight:700;margin-bottom:6px}
.const-header .type-desc{font-size:14px;opacity:.85;line-height:1.5}
.const-scores{margin-top:14px}
.const-bar{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12px}
.const-bar .name{width:50px;text-align:right;opacity:.8}
.const-bar .bar-bg{flex:1;height:6px;background:rgba(255,255,255,0.2);border-radius:3px;overflow:hidden}
.const-bar .bar-fill{height:100%;background:#ffd970;border-radius:3px}
.const-bar .val{width:24px;font-size:11px}
.const-card{background:#fff;border-radius:var(--radius);padding:14px;margin:12px 16px;box-shadow:var(--shadow)}
.const-card h3{font-size:15px;margin-bottom:8px}
.const-card .tags{display:flex;flex-wrap:wrap;gap:6px}
.const-card .tag{padding:4px 10px;border-radius:8px;font-size:13px}
.const-card .tag.good{background:#e8f5ec;color:var(--primary-dark)}
.const-card .tag.bad{background:#fde8e8;color:#c44}
.const-card .text{font-size:13px;line-height:1.6}

/* Loading */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:30px}
.loading .spinner{width:56px;height:56px;border:5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:24px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading h2{font-size:20px;margin-bottom:8px}
.loading p{font-size:14px;color:var(--text-light);text-align:center;line-height:1.6}
.loading .tips{margin-top:20px;background:#fff;border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);font-size:13px;color:var(--text);text-align:center;max-width:300px}

/* Recipes */
.recipes-header{position:sticky;top:0;background:#fff;padding:36px 14px 10px;z-index:20;border-bottom:1px solid var(--border)}
.recipes-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.recipes-title{font-size:18px;font-weight:700}
.dates-row{display:flex;gap:4px;overflow-x:auto}
.dates-row::-webkit-scrollbar{display:none}
.date-pill{flex-shrink:0;padding:6px 10px;border-radius:10px;text-align:center;font-size:12px;color:var(--text-light);cursor:pointer;min-width:44px;transition:all .15s}
.date-pill .day{font-size:11px}
.date-pill .num{font-size:16px;font-weight:600}
.date-pill.active{background:var(--primary);color:#fff}
.date-pill.active .day{opacity:.8}

.meal-section{margin-bottom:16px;padding:0 16px}
.meal-header{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700;margin:14px 0 10px}
.meal-header .kcal{font-size:12px;color:var(--text-light);font-weight:400}
.recipe-card{background:#fff;border-radius:14px;padding:14px;box-shadow:var(--shadow);display:flex;gap:12px;margin-bottom:10px;cursor:pointer;transition:transform .15s}
.recipe-card:active{transform:scale(0.98)}
.recipe-icon{width:56px;height:56px;border-radius:12px;background:#e8f5ec;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.recipe-info{flex:1}
.recipe-name{font-size:15px;font-weight:600}
.recipe-eff{font-size:12px;color:var(--primary);margin-top:2px}
.recipe-ingredients{font-size:12px;color:var(--text-light);margin-top:4px;line-height:1.4}

/* V4: Nutrition labels */
.recipe-nutrition{font-size:11px;color:#999;margin-top:3px;line-height:1.4}

.tea-card{background:linear-gradient(135deg,#fff8e7,#fff3d6);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;border:1px solid #f0e0b0;margin:0 16px 10px}
.tea-icon{font-size:24px}
.tea-name{font-size:14px;font-weight:600;color:#8a6d2a}
.tea-desc{font-size:12px;color:#a08840}
.daily-tip{margin:10px 16px;background:linear-gradient(135deg,#e8f5ec,#d4eddb);border-radius:10px;padding:10px 12px;border-left:3px solid var(--primary);font-size:13px}
.summary-box{margin:14px 16px;background:#fff;border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.summary-box h3{font-size:15px;margin-bottom:8px}
.summary-box .row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.summary-box .row span:last-child{font-weight:600;color:var(--primary)}

/* Shopping list */
.shop-section{margin-bottom:14px;padding:0 16px}
.shop-cat{font-size:15px;font-weight:700;margin:12px 0 6px}
.shop-item{background:#fff;border-radius:10px;padding:10px 14px;margin-bottom:5px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow)}
.shop-item .cb{width:22px;height:22px;border:2px solid var(--border);border-radius:6px;flex-shrink:0;cursor:pointer}
.shop-item .cb.ck{background:var(--primary);border-color:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.shop-item .name{flex:1;font-size:14px}
.shop-item .amt{font-size:13px;color:var(--text-light)}

/* Recipe detail modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;display:none;overflow-y:auto}
.modal-overlay.show{display:block}
.modal{background:var(--bg);max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:30px}
.modal-back{padding:36px 16px 6px;font-size:22px;color:var(--primary)}
.modal-hero{height:140px;margin:0 16px 12px;border-radius:16px;background:linear-gradient(135deg,#e8f5ec,#d4eddb);display:flex;align-items:center;justify-content:center;font-size:56px}
.modal h2{font-size:22px;font-weight:700;padding:0 16px;margin-bottom:4px}
.modal .eff{font-size:14px;color:var(--primary);padding:0 16px;margin-bottom:12px}
.modal .chips{padding:0 16px;margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap}
.modal .chip-info{background:#f0f7f3;border-radius:8px;padding:4px 10px;font-size:12px;color:var(--primary-dark)}
.modal .section-h{font-size:16px;font-weight:700;padding:0 16px;margin-bottom:8px}
.modal .ingredients{padding:0 16px;margin-bottom:14px}
.modal .ingredients li{list-style:none;display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:14px}
.modal .ingredients li span:last-child{color:var(--text-light)}

/* V4: Ingredients with substitute buttons */
.ingredients-with-sub li{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.ingredients-with-sub li span:first-child{flex:1}
.substitute-btn{background:#f0f7f3;border:1px solid var(--primary);color:var(--primary);border-radius:8px;padding:3px 8px;font-size:11px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.substitute-btn:active{background:var(--primary);color:#fff}

/* V4: Substitute panel */
.substitute-panel{margin:0 16px 14px;background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.substitute-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#f0f7f3;font-size:14px;font-weight:600;color:var(--primary-dark)}
.substitute-close{background:none;border:none;font-size:18px;color:var(--text-light);cursor:pointer;padding:0 4px}
.substitute-loading{padding:24px;text-align:center;color:var(--text-light);font-size:13px}
.spinner-sm{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 8px}
.substitute-list{padding:4px 0}
.substitute-item{padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.substitute-item:active{background:#f0f7f3}
.substitute-item:last-child{border-bottom:none}
.substitute-name{font-size:14px;font-weight:600;color:var(--text)}
.substitute-info{font-size:12px;color:var(--text-light);margin-top:2px}
.substitute-reason{font-size:12px;color:var(--primary);margin-top:3px;line-height:1.4}
.substitute-error{padding:20px 14px;text-align:center;color:#c44;font-size:13px}

/* V4: Toast */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(45,134,89,0.95);color:#fff;padding:10px 20px;border-radius:10px;font-size:14px;z-index:300;opacity:0;transition:all .3s;max-width:90%;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* V4: Data view */
.data-view{padding:10px 16px 20px}
.data-section{background:#fff;border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.data-section-title{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--text)}
.checkin-row{display:flex;gap:8px;margin-bottom:10px}
.checkin-item{flex:1;background:#f5f3ef;border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .15s}
.checkin-item:active{transform:scale(0.96)}
.checkin-cb{width:28px;height:28px;border:2px solid var(--border);border-radius:8px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:16px;color:transparent;transition:all .15s}
.checkin-cb.checked{background:var(--primary);border-color:var(--primary);color:#fff}
.checkin-label{font-size:13px;color:var(--text)}
.checkin-summary{text-align:center;font-size:13px;color:var(--text-light);margin-top:6px}
.body-input-row{display:flex;gap:8px;margin-bottom:4px}
.body-input-row .input-wrap{flex:1}
.body-input-row .input{padding:10px 12px;font-size:14px}
.history-item{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;flex-wrap:wrap}
.history-item:last-child{border-bottom:none}
.history-date{font-weight:600;color:var(--text);min-width:100px}
.history-meals{color:var(--text-light)}
.history-body{color:var(--primary);font-size:12px;width:100%;margin-top:2px}
.history-empty{text-align:center;color:var(--text-light);font-size:13px;padding:20px 0}

/* Tab bar */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:58px;background:#fff;display:flex;border-top:1px solid var(--border);z-index:100}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--text-light);gap:1px}
.tab.active{color:var(--primary);font-weight:600}
.tab .icon{font-size:20px}

/* Floating controls */
.float-controls{position:fixed;top:12px;right:12px;z-index:200;display:flex;gap:8px}
.fc-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.9);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform .2s,background .2s}
.fc-btn:active{transform:scale(0.9);background:var(--primary);color:#fff}
.fc-label{font-size:11px;color:var(--primary);background:rgba(255,255,255,0.9);padding:4px 8px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);white-space:nowrap;cursor:pointer;max-width:80px;overflow:hidden;text-overflow:ellipsis}
.input-wrap{position:relative;flex:1}
.input-wrap .input{padding-right:32px}
.input-wrap .unit{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text-light);pointer-events:none}

/* Error */
.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:30px}
.error-screen .icon{font-size:48px;margin-bottom:16px}
.error-screen h2{font-size:20px;margin-bottom:8px}
.error-screen p{font-size:14px;color:var(--text-light);text-align:center;margin-bottom:20px}

/* ===== V4 Batch 2 Styles ===== */

/* Advanced Options Panel */
.advanced-toggle{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#f0f7f3;border:2px solid var(--primary);border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;color:var(--primary-dark);transition:all .15s}
.advanced-toggle:active{transform:scale(0.98)}
.advanced-toggle .arrow{font-size:12px;transition:transform .2s}
.advanced-panel{margin-top:10px;padding:14px;background:#fafafa;border-radius:12px;border:1px solid var(--border)}
.adv-item{margin-bottom:12px}
.adv-item label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.adv-item .input{padding:10px 12px;font-size:14px}
.ratio-row{display:flex;gap:8px}
.ratio-row .input-wrap{flex:1}

/* Feedback Button */
.btn-feedback{width:100%;background:#fff;border:2px solid var(--primary);color:var(--primary);border-radius:12px;padding:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-feedback:active{background:var(--primary);color:#fff}

/* Weekly Feedback Panel */
.feedback-panel{background:#fff;max-width:480px;margin:0 auto;min-height:100vh;overflow-y:auto}
.fb-header{display:flex;justify-content:space-between;align-items:center;padding:36px 16px 10px;background:var(--primary);color:#fff;position:sticky;top:0;z-index:10}
.fb-header span{font-size:17px;font-weight:700}
.fb-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:0 4px}
.fb-body{padding:16px}
.fb-day{margin-bottom:16px}
.fb-day-title{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--text)}
.fb-dish{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.fb-dish-name{font-size:14px;flex:1}
.fb-stars{display:flex;gap:4px}
.fb-star{font-size:22px;cursor:pointer;color:#ccc;transition:color .15s;user-select:none}
.fb-star.active{color:#f5a623}
.fb-section{margin-top:14px}
.fb-section label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.fb-section .input{padding:10px 12px;font-size:14px}

/* Membership Page */
.mine-view{padding:10px 16px 20px}
.mine-header{text-align:center;padding:24px 16px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:16px;margin-bottom:16px;color:#fff}
.mine-avatar{font-size:48px;margin-bottom:8px}
.mine-name{font-size:20px;font-weight:700}
.mine-desc{font-size:13px;opacity:.85;margin-top:4px}
.membership-card{background:#fff;border-radius:16px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow);border:2px solid var(--border);transition:all .15s}
.membership-card.current{border-color:var(--primary);background:#f0f7f3}
.memb-icon{font-size:36px;text-align:center;margin-bottom:8px}
.memb-name{font-size:17px;font-weight:700;text-align:center;color:var(--text)}
.memb-badge{font-size:11px;background:var(--primary);color:#fff;padding:2px 8px;border-radius:8px;margin-left:6px}
.memb-price{font-size:14px;color:var(--primary);text-align:center;margin:6px 0 12px;font-weight:600}
.memb-features{margin-bottom:12px}
.memb-feat{font-size:13px;color:var(--text);padding:3px 0;line-height:1.5}
.btn-upgrade{width:100%;background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-upgrade:active{transform:scale(0.98)}
.mine-about{background:#fff;border-radius:14px;padding:16px;box-shadow:var(--shadow);text-align:center}
.mine-about h3{font-size:16px;margin-bottom:8px}
.mine-about p{font-size:13px;color:var(--text-light);line-height:1.6}

/* Achievements */
.achievements-grid{display:flex;flex-direction:column;gap:8px}
.achievement-badge{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#f5f3ef;transition:all .15s}
.achievement-badge.unlocked{background:#f0f7f3;border:1px solid var(--primary)}
.achievement-badge.locked{opacity:0.5}
.ach-badge-icon{font-size:28px;flex-shrink:0;width:40px;text-align:center}
.ach-badge-info{flex:1}
.ach-badge-name{font-size:14px;font-weight:700;color:var(--text)}
.ach-badge-desc{font-size:12px;color:var(--text-light);margin-top:2px}
.ach-check{color:var(--primary);font-size:18px;font-weight:700}
.ach-lock{font-size:14px;color:#999}
.ach-stats{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;color:var(--text-light)}
.ach-stats b{color:var(--primary)}

/* Achievement Popup Animation */
.achievement-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);background:#fff;border-radius:20px;padding:24px 32px;box-shadow:0 8px 32px rgba(0,0,0,0.2);z-index:9999;opacity:0;transition:all .5s cubic-bezier(0.34,1.56,0.64,1);display:flex;align-items:center;gap:16px;max-width:90%}
.achievement-popup.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ach-icon{font-size:48px}
.ach-text{text-align:left}
.ach-title{font-size:12px;color:var(--primary);font-weight:600}
.ach-name{font-size:18px;font-weight:700;color:var(--text);margin:4px 0}
.ach-desc{font-size:13px;color:var(--text-light)}

/* Validation Results */
.validation-ok{background:#e8f5ec;border-radius:10px;padding:10px 14px;font-size:14px;color:var(--primary-dark);font-weight:600}
.validation-warn{background:#fff3e0;border-radius:10px;padding:10px 14px;font-size:14px;color:#e65100;font-weight:600}
.validation-list{margin-top:8px}
.validation-item{padding:6px 10px;margin-top:4px;font-size:13px;line-height:1.5;border-radius:6px}
.validation-item.warn{background:#fff8e1;color:#7c5e10}
.validation-item.suggest{background:#e8f5ec;color:var(--primary-dark)}

/* Tab bar - adjust for 6 tabs */
.tabbar .tab{font-size:9px}
.tabbar .tab .icon{font-size:18px}

/* V4 Batch2: Feedback Stars */
.fb-stars{display:flex;gap:4px}
.fb-star{font-size:28px;cursor:pointer;color:#ccc;transition:color .15s;user-select:none}
.fb-star.active{color:#f5a623}
.fb-star:hover{color:#f5a623}