:root{--primary: #2563EB;--primary-light: #3B82F6;--primary-dark: #1D4ED8;--primary-50: #EFF6FF;--primary-100: #DBEAFE;--secondary: #059669;--secondary-light: #10B981;--accent: #F59E0B;--danger: #DC2626;--danger-light: #FEE2E2;--success: #10B981;--success-light: #D1FAE5;--warning: #F59E0B;--warning-light: #FEF3C7;--background: #F8FAFC;--surface: #FFFFFF;--text-primary: #1E293B;--text-secondary: #64748B;--text-muted: #94A3B8;--border: #E2E8F0;--border-light: #F1F5F9;--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.05);--shadow-lg: 0 10px 25px rgba(0,0,0,.1), 0 6px 10px rgba(0,0,0,.05);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#f8fafc,#eff6ff);color:var(--text-primary);line-height:1.6;font-size:14px;min-height:100vh}.app{display:flex;min-height:100vh;background:transparent}.sidebar{width:260px;background:linear-gradient(180deg,#fff,#f8fafc);border-right:1px solid var(--border-light);padding:24px 16px;display:flex;flex-direction:column;box-shadow:4px 0 20px #00000008}.logo{font-size:22px;font-weight:700;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:32px;padding:8px 0;display:flex;align-items:center;gap:10px}.logo:before{content:"";display:inline-block;width:32px;height:32px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);border-radius:8px}.nav-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius-md);cursor:pointer;color:var(--text-secondary);transition:all .2s ease;margin-bottom:6px;font-weight:500}.nav-item:hover{background:var(--primary-50);color:var(--primary);transform:translate(4px)}.nav-item.active{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;box-shadow:0 4px 12px #2563eb4d;transform:translate(4px)}.main-content{flex:1;padding:32px;overflow-y:auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.page-title{font-size:28px;font-weight:700;color:var(--text-primary);position:relative;padding-left:16px}.page-title:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:28px;background:linear-gradient(180deg,var(--primary) 0%,var(--primary-light) 100%);border-radius:2px}.card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:24px;margin-bottom:20px;border:1px solid var(--border-light);transition:all .2s ease}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}.card-title{font-size:16px;font-weight:600;color:var(--text-primary)}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-md);border:none;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;box-shadow:0 4px 12px #2563eb40}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);transform:translateY(-1px);box-shadow:0 6px 16px #2563eb59}.btn-secondary{background:var(--surface);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--primary-50);border-color:var(--primary-light);color:var(--primary)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#b91c1c;box-shadow:0 4px 12px #dc26264d}.btn-success{background:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-light) 100%);color:#fff;box-shadow:0 4px 12px #05966940}.form-group{margin-bottom:20px}.form-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.form-input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:14px;transition:all .2s ease;background:var(--surface)}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}.form-select{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:14px;background:var(--surface);cursor:pointer;transition:all .2s ease}.form-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.table{width:100%;border-collapse:separate;border-spacing:0}.table th,.table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-light)}.table th{font-weight:600;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:var(--primary-50)}.table tr:hover{background:var(--primary-50)}.table tr:last-child td{border-bottom:none}.badge{display:inline-block;padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600}.badge-draft{background:#f1f5f9;color:var(--text-secondary)}.badge-testing{background:var(--warning-light);color:#d97706}.badge-completed{background:var(--success-light);color:#059669}.badge-abandoned{background:var(--danger-light);color:var(--danger)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(#1e293bb3,#1e293b80);display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:var(--surface);border-radius:var(--radius-lg);width:90%;max-width:640px;max-height:90vh;overflow-y:auto;padding:28px;box-shadow:var(--shadow-lg);animation:modalIn .3s ease}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--primary-50)}.modal-title{font-size:20px;font-weight:700;color:var(--text-primary)}.modal-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:8px;border-radius:var(--radius-sm);transition:all .2s ease}.modal-close:hover{background:var(--danger-light);color:var(--danger)}.result-panel{background:linear-gradient(135deg,var(--primary) 0%,#60A5FA 50%,var(--primary-light) 100%);border-radius:var(--radius-lg);padding:28px;color:#fff;margin-bottom:20px;box-shadow:0 8px 24px #2563eb4d;position:relative;overflow:hidden}.result-panel:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}.result-item{text-align:center;padding:12px;background:#ffffff1a;border-radius:var(--radius-md);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.result-value{font-size:32px;font-weight:700;font-family:JetBrains Mono,SF Mono,monospace;text-shadow:0 2px 4px rgba(0,0,0,.1)}.result-label{font-size:13px;opacity:.9;margin-top:6px;text-transform:uppercase;letter-spacing:1px}.tabs{display:flex;border-bottom:2px solid var(--border-light);margin-bottom:24px;background:var(--primary-50);border-radius:var(--radius-md) var(--radius-md) 0 0;padding:4px}.tab{padding:12px 24px;cursor:pointer;color:var(--text-secondary);border-bottom:none;transition:all .2s ease;font-weight:500;border-radius:var(--radius-sm)}.tab:hover{color:var(--primary);background:var(--surface)}.tab.active{color:var(--primary);background:var(--surface);box-shadow:var(--shadow-sm)}.step-card{background:linear-gradient(135deg,var(--primary-50) 0%,var(--surface) 100%);border-radius:var(--radius-md);padding:20px;margin-bottom:16px;border-left:4px solid var(--primary)}.step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;border-radius:50%;font-size:13px;font-weight:700;margin-right:12px;box-shadow:0 2px 8px #2563eb4d}.iteration-card{border-left:4px solid var(--primary);padding:20px;margin-bottom:16px;background:var(--surface);border-radius:0 var(--radius-md) var(--radius-md) 0;box-shadow:var(--shadow-sm);transition:all .2s ease}.iteration-card:hover{box-shadow:var(--shadow-md);transform:translate(4px)}.iteration-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.prediction-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:16px;background:var(--primary-50);border-radius:var(--radius-md);margin-top:12px}.comparison-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.comparison-card{padding:20px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--surface);transition:all .2s ease}.comparison-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow-md)}.comparison-header{font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--primary-50);display:flex;align-items:center;gap:8px;color:var(--primary)}.empty-state{text-align:center;padding:60px;color:var(--text-secondary)}.empty-state svg{opacity:.3;margin-bottom:16px}.material-type-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);font-size:14px;font-weight:700}.type-resin{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8}.type-solvent{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#059669}.type-filler{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#d97706}.type-additive{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#4338ca}.type-thickener{background:linear-gradient(135deg,#fce7f3,#fbcfe8);color:#db2777}.type-water{background:linear-gradient(135deg,#e0f2fe,#bae6fd);color:#0284c7}.action-suggestion{display:flex;align-items:center;gap:16px;padding:16px;background:linear-gradient(135deg,var(--primary-50) 0%,var(--surface) 100%);border-radius:var(--radius-md);margin-bottom:12px;border:1px solid var(--border-light);transition:all .2s ease}.action-suggestion:hover{transform:translate(4px);box-shadow:var(--shadow-sm)}.action-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;box-shadow:0 4px 12px #2563eb4d}@media (max-width: 1024px){.sidebar{width:80px;padding:16px 8px}.logo{justify-content:center}.logo:before{width:40px}.logo span{display:none}.nav-item{justify-content:center;padding:12px}.nav-item span{display:none}.form-row,.result-grid,.comparison-grid{grid-template-columns:1fr}}@media (max-width: 768px){.main-content{padding:16px}.page-title{font-size:22px}.card{padding:16px}}