:root{--blue:#3a86ff;--blue-dark:#2657cc;--yellow:#ffd60a;--brown:#8d6e63;--green:#2ecc71;--red:#ef4444;--bg:#eef3ff;--card:#fff;--ink:#22314f;--radius:18px;--shadow:0 6px 0 #00000014, 0 10px 24px #3a86ff26}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 10%,#dfeaff 0,transparent 40%),radial-gradient(circle at 90% 20%,#fff3cf 0,transparent 40%),var(--bg);color:var(--ink);min-height:100vh;margin:0;font-family:Microsoft JhengHei,PingFang TC,Noto Sans TC,sans-serif}#top-nav{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;z-index:50;justify-content:center;gap:14px;padding:12px 20px;position:sticky;top:0;box-shadow:0 4px 12px #00000026}#top-nav,#top-nav .nav-inner{flex-wrap:wrap;align-items:center;display:flex}#top-nav .nav-inner{justify-content:space-between;gap:10px;width:1000px;max-width:100%}#top-nav h1{white-space:nowrap;margin:0;font-size:20px}#lang-toggle-btn{z-index:500;color:var(--blue-dark);border:2px solid var(--blue-dark);cursor:pointer;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;position:fixed;top:12px;right:12px;box-shadow:0 4px 10px #0003}#lang-toggle-btn:hover{background:var(--blue-dark);color:#fff}#top-nav .nav-buttons{flex-wrap:wrap;gap:8px;display:flex}.nav-btn{color:#fff;cursor:pointer;background:#ffffff26;border:2px solid #ffffff80;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;transition:all .2s}.nav-btn:hover:not(:disabled){color:var(--blue-dark);background:#fff;transform:translateY(-2px)}.nav-btn.active{background:var(--yellow);color:#5c4400;border-color:var(--yellow)}.nav-btn:disabled{opacity:.45;cursor:not-allowed}#slogan-bar{text-align:center;color:#5c4400;background:#ffe066;width:100%;padding:6px 4px;font-size:13px;font-weight:700}.diagnosis-app{width:1000px;max-width:100%;margin:24px auto 60px;padding:0 12px}.screen{animation:.4s fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px;padding:22px}.card h2{margin-top:0}.card h2,.card h3{color:var(--blue-dark)}.en{color:#5a6785;margin-top:2px;font-size:.78em;display:block}.en,.en-inline{font-weight:400}.en-inline{color:inherit;opacity:.85;font-size:.85em}.big-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4dd6a3,#2ecc71);border:none;border-radius:999px;padding:14px 26px;font-size:16px;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 5px #1f9c56}a.big-btn{color:#fff;text-decoration:none}.big-btn:hover:not(:disabled){transform:translateY(-2px)}.big-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px #1f9c56}.big-btn:disabled{cursor:not-allowed;color:#7a86a5;background:#c9d1e3;box-shadow:0 5px #a9b3cc}.secondary-btn{border:2px solid var(--blue);color:var(--blue-dark);cursor:pointer;background:#fff;border-radius:999px;padding:10px 20px;font-weight:700;transition:all .15s}.secondary-btn:hover{background:var(--blue);color:#fff}.card.hero{text-align:center;padding:20px}.card.hero .emoji-big{font-size:64px}.status-bar{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;display:grid}.status-card{text-align:center;color:#fff;border-radius:14px;padding:14px;transition:transform .2s;box-shadow:0 4px 10px #0000001f}.status-card.paper{background:linear-gradient(135deg,#5aa9ff,#3a86ff)}.status-card.can{color:#5c4400;background:linear-gradient(135deg,#ffe066,#ffc300)}.status-card.bottle{background:linear-gradient(135deg,#a9765a,#8d6e63)}.status-card.warn{animation:1s infinite pulseWarn}@keyframes pulseWarn{0%,to{box-shadow:0 0 #ef444499}50%{box-shadow:0 0 0 10px #ef444400}}.status-card .icon{font-size:30px}.inline-icon-img{vertical-align:middle;width:auto;height:1em;display:inline-block}.sq-icon-img{width:auto;height:22px}.belt-item-img{width:auto;height:38px;display:block}.photo-thumb-img{-o-object-fit:contain;object-fit:contain;width:auto;max-width:32px;height:auto;max-height:32px;display:block}.accessory img{pointer-events:none;-webkit-user-drag:none;height:auto;display:block}.status-card .count{margin:4px 0;font-size:22px;font-weight:700}.status-card .label{font-size:13px;font-weight:700}.belt-wrap{background:#dfe7f5;border-radius:14px;padding:16px}.belt-track,.belt-wrap{position:relative;overflow:hidden}.belt-track{background:repeating-linear-gradient(90deg,#7d8aa3 0 24px,#6a7690 0 48px);border-radius:10px;height:120px;box-shadow:inset 0 0 10px #0000004d}.belt-track:before{content:"";background:repeating-linear-gradient(90deg,#ffffff14 0 6px,#0000 0 48px);animation:1s linear infinite beltMove;position:absolute;inset:0}@keyframes beltMove{0%{background-position:0 0}to{background-position:-48px 0}}.belt-item{z-index:3;-webkit-user-select:none;user-select:none;font-size:38px;transition:transform 1.6s linear;position:absolute;top:14px;left:6px}.sort-square{z-index:4;background:#ffffff26;border:3px solid;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;font-size:16px;transition:background .25s,box-shadow .25s,transform .2s;display:flex;position:absolute;top:43px}.sort-square.sq-paper{border-color:#3a86ff;right:98px}.sort-square.sq-can{border-color:#ffc300;right:54px}.sort-square.sq-bottle{border-color:#8d6e63;right:10px}.sort-square.active.sq-paper{background:#3a86ff;animation:.6s squarePulse;box-shadow:0 0 16px #3a86ff}.sort-square.active.sq-can{background:#ffc300;animation:.6s squarePulse;box-shadow:0 0 16px #ffc300}.sort-square.active.sq-bottle{background:#8d6e63;animation:.6s squarePulse;box-shadow:0 0 16px #8d6e63}@keyframes squarePulse{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}.bins-row{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px;display:grid}.bin{text-align:center;background:#fff;border:3px dashed #aab6d3;border-radius:12px;padding:10px;transition:all .2s;position:relative}.bin .bin-emoji{font-size:30px}.bin .bin-name{margin-top:2px;font-size:13px;font-weight:700}.bin-light{background:#d9dee9;border-radius:50%;width:16px;height:16px;margin:0 auto 6px;transition:background .3s,box-shadow .3s}.bin-light.on.paper{background:#3a86ff;box-shadow:0 0 14px #3a86ff}.bin-light.on.can{background:#ffc300;box-shadow:0 0 14px #ffc300}.bin-light.on.bottle{background:#8d6e63;box-shadow:0 0 14px #8d6e63}.bin.flash-correct{border-color:var(--green);background:#d5f9e1}.bin.flash-wrong{border-color:var(--red);background:#ffe1e1;animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.feedback-icon{pointer-events:none;z-index:6;font-size:30px;animation:1s forwards popFade;position:absolute}@keyframes popFade{0%{opacity:0;transform:translateY(0)scale(.6)}20%{opacity:1;transform:translateY(-6px)scale(1.2)}to{opacity:0;transform:translateY(-30px)scale(1)}}.banner{border-radius:12px;margin:14px 0;padding:12px 16px;font-size:14px;font-weight:700;animation:.3s fadeInUp}.banner.info{color:var(--blue-dark);background:#e8f0ff}.banner.warn{color:#a15c00;background:#fff2e0;border:2px solid #ffb84d}.banner.success{color:#177a3b;border:2px solid var(--green);background:#e2fbea}.banner.error{color:#a11;border:2px solid var(--red);background:#ffe3e3}.supply-hint{color:#a15c00;background:#fff2e0;border:2px dashed #ffb84d;border-radius:12px;margin-bottom:12px;padding:10px 14px;font-size:14px;font-weight:700}.supply-ratio{background:#f8faff;border:2px solid #dfe7f7;border-radius:14px;flex-direction:column;gap:8px;margin-bottom:16px;padding:14px 16px;display:flex}.ratio-row{align-items:center;gap:10px;display:flex}.ratio-row .ratio-label{flex-shrink:0;width:140px;font-size:13px;font-weight:700}.ratio-bar-track{background:#e6ebf5;border-radius:999px;flex:1;height:18px;overflow:hidden}.ratio-bar-fill{border-radius:999px;width:0;height:100%;transition:width .3s,background .3s}.ratio-bar-fill.paper{background:#3a86ff}.ratio-bar-fill.can{background:#ffc300}.ratio-bar-fill.bottle{background:#8d6e63}.ratio-count{text-align:right;flex-shrink:0;width:64px;font-size:13px;font-weight:700}.gallery{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin:12px 0;display:grid}.photo-thumb{cursor:pointer;background:#f2ebe2;border:2px solid #d8c6b4;border-radius:10px;justify-content:center;align-items:center;height:60px;font-size:22px;transition:transform .15s;display:flex;overflow:hidden}.photo-thumb:hover{transform:scale(1.1)}.photo-thumb.used{border-color:var(--green);cursor:default;background:#d5f9e1}.photo-thumb.used:hover{transform:none}.camera-box{width:480px;max-width:100%;height:360px;box-shadow:var(--shadow);background:#111;border:6px solid #34405e;border-radius:16px;margin:0 auto;position:relative;overflow:hidden}.camera-box canvas,.camera-box video{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}#l2-overlay{pointer-events:none;position:absolute;inset:0}.accessory{cursor:grab;pointer-events:auto;filter:drop-shadow(0 3px 4px #00000080);-webkit-user-select:none;user-select:none;font-size:46px;transition:font-size .15s;animation:.4s dropIn;position:absolute;transform:translate(-50%,-50%)}.accessory.dragging{cursor:grabbing;filter:drop-shadow(0 6px 10px #0009);transition:none}@keyframes dropIn{0%{opacity:0;transform:translate(-50%,calc(-50% - 30px))}to{opacity:1;transform:translate(-50%,-50%)}}.shot-thumbs{gap:8px;margin:14px 0}.shot-slot,.shot-thumbs{justify-content:center;display:flex}.shot-slot{color:#8592b3;background:#f4f6fb;border:2px dashed #b9c3dc;border-radius:10px;align-items:center;width:58px;height:58px;font-weight:700;overflow:hidden}.shot-slot img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.shot-slot.filled{border-style:solid;border-color:var(--green)}.pose-list{flex-direction:column;gap:6px;margin:14px 0;padding:0;list-style:none;display:flex}.pose-list li{background:#f4f6fb;border-radius:10px;justify-content:space-between;padding:8px 12px;font-weight:700;display:flex}.pose-list li.done{color:#177a3b;background:#d5f9e1}.gate-area{flex-wrap:wrap;justify-content:center;align-items:center;gap:26px;margin:18px 0;display:flex}.gate-graphic{text-align:center;width:120px}.gate-light{background:var(--red);border-radius:50%;width:44px;height:44px;margin:0 auto 8px;transition:all .3s;box-shadow:0 0 16px #ef4444cc}.gate-light.green{background:var(--green);box-shadow:0 0 20px #2ecc71e6}.gate-door{font-size:48px}.human-check{text-align:center;color:#a15c00;background:#fff2e0;border:2px dashed #ffb84d;border-radius:12px;padding:12px;font-weight:700;animation:1.4s infinite pulseWarn;display:none}.modal-overlay{z-index:200;background:#141e3c8c;justify-content:center;align-items:center;padding:16px;display:none;position:fixed;inset:0}.modal-overlay.show{display:flex}.modal-box{text-align:center;background:#fff;border-radius:20px;width:100%;max-width:520px;padding:28px;animation:.35s popIn;box-shadow:0 20px 40px #0000004d}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.modal-box .big-emoji{font-size:56px}.modal-box ul{text-align:left}.supply-modal-box{text-align:left;max-width:700px;max-height:85vh;padding-top:40px;position:relative;overflow-y:auto}.modal-close-x{cursor:pointer;color:#5a6785;background:0 0;border:none;padding:4px 8px;font-size:24px;line-height:1;position:absolute;top:10px;right:14px}.modal-close-x:hover{color:#22314f}.screen-cert .cert-paper{border:8px double var(--blue);text-align:center;background:radial-gradient(circle at 90% 0,#fff7d6,#0000 45%),#fffefa;border-radius:20px;padding:34px}.screen-cert h2{font-size:26px}.screen-cert .cert-name-input{border:2px solid var(--blue);text-align:center;border-radius:10px;width:240px;margin:10px 0 20px;padding:8px 14px;font-size:18px}.cert-facts{text-align:left;background:#f4f8ff;border-radius:12px;max-width:520px;margin:0 auto 18px;padding:16px 20px}.cert-facts li{margin:8px 0}.cert-oath{text-align:left;background:#fff2e0;border:2px solid #ffb84d;border-radius:12px;align-items:flex-start;gap:10px;max-width:520px;margin:0 auto 20px;padding:14px;font-weight:700;display:flex}.cert-oath input{margin-top:3px;transform:scale(1.4)}.locked-hint{text-align:center;color:#7a86a5;padding:40px 0;font-weight:700}.hidden{display:none!important}@media print{body *{visibility:hidden}.screen-cert,.screen-cert *{visibility:visible}.screen-cert{width:100%;position:absolute;top:0;left:0}#lang-toggle-btn,#slogan-bar,#top-nav,.no-print{display:none!important}}