*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(180deg,#f8f9fc,#eef1f6);min-height:100vh;color:#2c3e50}.app{min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;padding:2.5rem 1rem 2rem;background:linear-gradient(180deg,#fff,#f8f9fc);border-bottom:1px solid #e5e9f0}.header h1{font-size:1.6rem;font-weight:600;color:#1a202c;letter-spacing:1px;margin-bottom:.5rem}.subtitle{font-size:.9rem;color:#64748b;font-weight:400}.loading-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;font-size:.88rem;color:#64748b}.spinner{width:18px;height:18px;border:2px solid #e2e8f0;border-top-color:#4299e1;border-radius:50%;animation:spin .8s linear infinite}.spinner.small{width:14px;height:14px}@keyframes spin{to{transform:rotate(360deg)}}.main{flex:1;padding:2rem 1.5rem;max-width:1000px;margin:0 auto;width:100%}.sample-section{background:#fff;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 12px #0000000a;border:1px solid rgba(0,0,0,.06)}.sample-section h3{font-size:1rem;font-weight:600;color:#1a365d;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.sample-section h3:before{content:"";width:4px;height:18px;background:linear-gradient(180deg,#2c5282,#4299e1);border-radius:2px}.sample-grid{display:flex;gap:1rem;flex-wrap:wrap}.sample-item{width:110px;cursor:pointer;border:2px solid #e2e8f0;border-radius:10px;overflow:hidden;transition:all .25s ease;background:#fafbfc}.sample-item:hover{border-color:#4299e1;transform:translateY(-3px);box-shadow:0 6px 20px #4299e133}.sample-item.selected{border-color:#2c5282;box-shadow:0 4px 16px #2c528240}.sample-item img{width:100%;height:75px;object-fit:cover;display:block}.sample-item span{display:block;text-align:center;font-size:.78rem;padding:.5rem .3rem;color:#4a5568;background:#fff;font-weight:500}.upload-section{background:#fff;border-radius:12px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 2px 12px #0000000a;border:1px solid rgba(0,0,0,.06)}.drop-zone{border:2px dashed #cbd5e0;border-radius:10px;padding:2.5rem 1.5rem;text-align:center;cursor:pointer;transition:all .25s ease;background:linear-gradient(180deg,#fafbfc,#f5f7fa)}.drop-zone:hover{border-color:#4299e1;background:linear-gradient(180deg,#ebf8ff,#e6f3ff)}.drop-zone.has-image{border-style:solid;border-color:#e2e8f0;background:#fff;padding:1.5rem}.upload-hint{color:#64748b;position:relative}.upload-icon{font-size:2.5rem;margin-bottom:.8rem;opacity:.5}.upload-hint p{font-size:.9rem;margin-bottom:.8rem;color:#64748b}.file-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-input:hover:not(:disabled){background:#f1f5f9}.preview-container{position:relative}.preview-image{max-width:100%;max-height:320px;border-radius:8px;object-fit:contain;box-shadow:0 4px 16px #00000014}.remove-btn{position:absolute;top:.75rem;right:.75rem;padding:.45rem .9rem;background:#2c3e50bf;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:.8rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s}.remove-btn:hover{background:#2c3e50e6}.predict-btn{width:100%;margin-top:1.2rem;padding:.9rem;background:linear-gradient(135deg,#276749,#38a169);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:all .25s ease;box-shadow:0 3px 10px #38a1694d}.predict-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 18px #38a16966}.predict-btn:disabled{opacity:.6;cursor:not-allowed}.error-message{margin-top:1rem;padding:.75rem;background:#fed7d7;color:#c53030;border-radius:6px;text-align:center;font-size:.88rem;border:1px solid #feb2b2}.result-section{background:#fff;border-radius:12px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 2px 12px #0000000a;border:1px solid rgba(0,0,0,.06)}.result-section h2{color:#1a365d;margin-bottom:1.5rem;font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.result-section h2:before{content:"";width:4px;height:22px;background:linear-gradient(180deg,#276749,#38a169);border-radius:2px}.result-card{display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap;padding:1.5rem;background:linear-gradient(180deg,#f7fafc,#edf2f7);border-radius:10px;border:1px solid #e2e8f0}.result-image{flex-shrink:0}.result-image img{width:160px;height:160px;object-fit:cover;border-radius:10px;box-shadow:0 4px 16px #0000001a}.result-info{flex:1;min-width:220px;display:flex;flex-direction:column;justify-content:center;gap:.8rem}.prediction,.confidence{font-size:1.05rem}.prediction .label,.confidence .label{color:#5a6778;font-weight:500}.prediction .value{color:#276749;font-weight:600;font-size:1.2rem}.confidence .value{color:#2c5282;font-weight:600}.all-classes{margin-top:1.5rem}.all-classes h3{font-size:.95rem;color:#4a5568;margin-bottom:.8rem;font-weight:500}.classes-grid{display:flex;flex-wrap:wrap;gap:.6rem}.class-item{padding:.5rem 1rem;background:#edf2f7;border-radius:20px;font-size:.85rem;color:#4a5568;border:1px solid transparent;transition:all .2s}.class-item.selected{background:linear-gradient(135deg,#2c5282,#4299e1);color:#fff;box-shadow:0 2px 8px #2c528240}.notice-section{background:linear-gradient(180deg,#fffbeb,#fef3c7);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;border:1px solid #fcd34d}.notice-section h3{font-size:1rem;font-weight:600;color:#92400e;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.notice-section h3:before{content:"⚠️";font-size:1rem}.notice-list{display:flex;flex-direction:column;gap:.8rem}.notice-item{display:flex;gap:.8rem;line-height:1.6}.notice-number{flex-shrink:0;width:24px;height:24px;background:#f59e0b;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600}.notice-text{font-size:.88rem;color:#78350f}.notice-text strong{color:#92400e}.info-section{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 12px #0000000a;border:1px solid rgba(0,0,0,.06)}.info-section h3{font-size:1rem;font-weight:600;color:#1a365d;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.info-section h3:before{content:"";width:4px;height:18px;background:linear-gradient(180deg,#2c5282,#4299e1);border-radius:2px}.defect-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem}.defect-item{padding:.6rem 1rem;background:linear-gradient(180deg,#f7fafc,#edf2f7);border-radius:6px;border-left:3px solid #4299e1;font-size:.88rem}.defect-name{color:#2d3748;font-weight:500}.defect-english{color:#718096;font-size:.8rem;margin-left:.3rem}.footer{text-align:center;padding:1.5rem;color:#94a3b8;font-size:.85rem;background:#f8f9fc;border-top:1px solid #e5e9f0}