/* ====== ENHANCED INTERACTIVE CONTAINER CSS v2 ====== */
.eic-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.eic-frame { position: relative; width: 100%; max-width: 1100px; margin: 2rem auto; border-radius: 12px; overflow: visible; }
.eic-frame::before { content: ''; display: block; padding-top: 30%; }
.eic-shell { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(245,247,250,0.92) 0%, rgba(232,236,242,0.9) 40%, rgba(220,226,235,0.88) 100%); border: 3px solid rgba(201,162,39,0.55); border-radius: 12px; box-shadow: 0 25px 80px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5); overflow: hidden; }
.eic-shell::before { content: attr(data-label); position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(201,162,39,0.8); z-index: 10; pointer-events: none; text-transform: uppercase; }
.eic-shell::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(10,37,64,0.03) 50px), repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(10,37,64,0.03) 50px); pointer-events: none; z-index: 1; }
.eic-corner { position: absolute; width: 24px; height: 24px; border: 3px solid rgba(201,162,39,0.4); z-index: 8; pointer-events: none; }
.eic-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.eic-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.eic-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.eic-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }
.eic-floor { position: absolute; bottom: 6%; left: 1.5%; right: 1.5%; height: 2px; background: linear-gradient(90deg, rgba(201,162,39,0.15), rgba(201,162,39,0.35), rgba(201,162,39,0.15)); z-index: 2; }
.eic-comp { position: absolute; border-radius: 8px; cursor: pointer; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 0.68rem; font-weight: 600; border: 2px solid transparent; overflow: hidden; text-decoration: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 3px 12px rgba(0,0,0,0.08); line-height: 1.3; color: #fff; }
.eic-comp .eic-icon { font-size: 1.15rem; margin-bottom: 3px; transition: all 0.35s ease; pointer-events: none; }
.eic-comp .eic-label { font-size: 0.6rem; padding: 0 3px; pointer-events: none; line-height: 1.2; }
.eic-comp .eic-sublabel { font-size: 0.55rem; opacity: 0.8; font-weight: 400; pointer-events: none; }
.eic-comp:hover { transform: scale(1.15); z-index: 30; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.eic-comp:hover .eic-icon { transform: scale(1.2) rotate(-5deg); }
.eic-scada { background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%); border-color: rgba(74,144,217,0.6); }
.eic-scada:hover { background: linear-gradient(135deg, #5BA0E9 0%, #468ACD 100%); box-shadow: 0 0 30px rgba(74,144,217,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-chem { background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%); border-color: rgba(155,89,182,0.6); }
.eic-chem:hover { background: linear-gradient(135deg, #AF69C6 0%, #A254BD 100%); box-shadow: 0 0 30px rgba(155,89,182,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-daf { background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%); border-color: rgba(26,188,156,0.6); }
.eic-daf:hover { background: linear-gradient(135deg, #2BCCAC 0%, #26B095 100%); box-shadow: 0 0 30px rgba(26,188,156,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-lam { background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%); border-color: rgba(46,204,113,0.6); }
.eic-lam:hover { background: linear-gradient(135deg, #3EDC81 0%, #37BE70 100%); box-shadow: 0 0 30px rgba(46,204,113,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-pump { background: linear-gradient(135deg, #E67E22 0%, #D35400 100%); border-color: rgba(230,126,34,0.6); }
.eic-pump:hover { background: linear-gradient(135deg, #F68E32 0%, #E36410 100%); box-shadow: 0 0 30px rgba(230,126,34,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-filter { background: linear-gradient(135deg, #27AE60 0%, #1E8449 100%); border-color: rgba(39,174,96,0.6); }
.eic-filter:hover { background: linear-gradient(135deg, #37BE70 0%, #2E9459 100%); box-shadow: 0 0 30px rgba(39,174,96,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-tank { background: linear-gradient(135deg, #7F8C8D 0%, #616A6B 100%); border-color: rgba(127,140,141,0.6); }
.eic-tank:hover { background: linear-gradient(135deg, #8FA09D 0%, #717A7B 100%); box-shadow: 0 0 30px rgba(127,140,141,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-uv { background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); border-color: rgba(0,188,212,0.6); }
.eic-uv:hover { background: linear-gradient(135deg, #10DDE4 0%, #10BCD1 100%); box-shadow: 0 0 30px rgba(0,188,212,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-sludge { background: linear-gradient(135deg, #795548 0%, #5D4037 100%); border-color: rgba(121,85,72,0.6); }
.eic-sludge:hover { background: linear-gradient(135deg, #896558 0%, #6D5047 100%); box-shadow: 0 0 30px rgba(121,85,72,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-bio { background: linear-gradient(135deg, #8BC34A 0%, #689F38 100%); border-color: rgba(139,195,74,0.6); }
.eic-bio:hover { background: linear-gradient(135deg, #9BD35A 0%, #78AF48 100%); box-shadow: 0 0 30px rgba(139,195,74,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-aero { background: linear-gradient(135deg, #FF7043 0%, #F4511E 100%); border-color: rgba(255,112,67,0.6); }
.eic-aero:hover { background: linear-gradient(135deg, #FF8053 0%, #FF612E 100%); box-shadow: 0 0 30px rgba(255,112,67,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-mem { background: linear-gradient(135deg, #5C6BC0 0%, #3F51B5 100%); border-color: rgba(92,107,192,0.6); }
.eic-mem:hover { background: linear-gradient(135deg, #6C7BD0 0%, #4F61C5 100%); box-shadow: 0 0 30px rgba(92,107,192,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-oil { background: linear-gradient(135deg, #607D8B 0%, #455A64 100%); border-color: rgba(96,125,139,0.6); }
.eic-oil:hover { background: linear-gradient(135deg, #708D9B 0%, #556A74 100%); box-shadow: 0 0 30px rgba(96,125,139,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-cpi { background: linear-gradient(135deg, #00897B 0%, #00695C 100%); border-color: rgba(0,137,123,0.6); }
.eic-cpi:hover { background: linear-gradient(135deg, #10998B 0%, #10796C 100%); box-shadow: 0 0 30px rgba(0,137,123,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-screen { background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%); border-color: rgba(255,167,38,0.6); }
.eic-screen:hover { background: linear-gradient(135deg, #FFB736 0%, #FF9C10 100%); box-shadow: 0 0 30px rgba(255,167,38,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-pipe { background: linear-gradient(180deg, #90A4AE 0%, #78909C 50%, #90A4AE 100%); border: 1px solid rgba(120,144,156,0.4); border-radius: 4px !important; min-width: 4px; min-height: 4px; }
.eic-pipe:hover { background: linear-gradient(180deg, #B0C4CE 0%, #98B0BC 50%, #B0C4CE 100%); }
.eic-tip { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%) scale(0.9); background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 0; min-width: 300px; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 200; text-align: left; overflow: hidden; }
.eic-comp:hover .eic-tip { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.eic-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 10px solid transparent; border-top-color: #fff; }
.eic-tip .tip-header { padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid #F1F5F9; background: #FAFBFC; }
.eic-tip .tip-header h5 { color: #0a2540; font-size: 0.92rem; margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.eic-tip .tip-header h5 i { font-size: 1rem; }
.eic-tip .tip-body { padding: 0.75rem 1.25rem; }
.eic-tip .tip-body p { color: #546e7a; font-size: 0.8rem; line-height: 1.55; margin: 0 0 0.6rem 0; }
.eic-tip .tip-body ul { margin: 0.5rem 0; padding-left: 1.2rem; font-size: 0.78rem; color: #64748b; line-height: 1.7; }
.eic-tip .tip-body ul li { margin-bottom: 0.15rem; }
.eic-tip .eic-specs { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 1.25rem 0.5rem; }
.eic-tip .eic-specs span { background: #F1F5F9; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; color: #334155; font-weight: 500; border: 1px solid #E2E8F0; }
.eic-tip .tip-footer { padding: 0.75rem 1.25rem; background: #F8FAFC; border-top: 1px solid #F1F5F9; display: flex; align-items: center; justify-content: space-between; }
.eic-tip .tip-footer .eic-link { display: inline-flex; align-items: center; gap: 5px; color: #0066cc; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.eic-tip .tip-footer .eic-link:hover { text-decoration: underline; }
.eic-tip .tip-footer .click-hint { font-size: 0.7rem; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
.eic-shell:hover .eic-comp { opacity: 0.5; filter: grayscale(0.3); }
.eic-shell:hover .eic-comp:hover { opacity: 1; filter: grayscale(0); }
.eic-shell:hover .eic-pipe { opacity: 0.3; }
.eic-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.eic-leg { display: flex; align-items: center; gap: 7px; padding: 6px 14px; background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 0.78rem; color: #475569; font-weight: 500; cursor: pointer; transition: all 0.25s ease; }
.eic-leg:hover { border-color: #94A3B8; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-2px); }
.eic-leg-dot { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.eic-comp.active { transform: scale(1.12) !important; z-index: 35 !important; opacity: 1 !important; filter: grayscale(0) !important; border-color: #c9a227 !important; box-shadow: 0 0 0 4px rgba(201,162,39,0.25), 0 12px 40px rgba(0,0,0,0.25) !important; }
@keyframes eicPulse { 0%,100%{box-shadow:0 0 0 0 rgba(26,188,156,0.5);} 50%{box-shadow:0 0 0 10px rgba(26,188,156,0);} }
.eic-pulse { animation: eicPulse 2.5s ease-in-out infinite; }
@keyframes eicPulse2 { 0%,100%{box-shadow:0 0 0 0 rgba(74,144,217,0.5);} 50%{box-shadow:0 0 0 10px rgba(74,144,217,0);} }
.eic-pulse2 { animation: eicPulse2 2.5s ease-in-out infinite; }
@keyframes eicFadeIn { from{opacity:0;transform:scale(0.95);} to{opacity:1;transform:scale(1);} }
.eic-shell { animation: eicFadeIn 0.7s ease-out; }
@keyframes eicSlide { from{opacity:0;transform:translateY(12px) scale(0.88);} to{opacity:1;transform:translateY(0) scale(1);} }
.eic-comp { animation: eicSlide 0.45s ease-out backwards; }
.eic-comp:nth-child(1){animation-delay:0.1s}.eic-comp:nth-child(2){animation-delay:0.15s}.eic-comp:nth-child(3){animation-delay:0.2s}.eic-comp:nth-child(4){animation-delay:0.25s}.eic-comp:nth-child(5){animation-delay:0.3s}.eic-comp:nth-child(6){animation-delay:0.35s}.eic-comp:nth-child(7){animation-delay:0.4s}.eic-comp:nth-child(8){animation-delay:0.45s}.eic-comp:nth-child(9){animation-delay:0.5s}.eic-comp:nth-child(10){animation-delay:0.55s}.eic-comp:nth-child(11){animation-delay:0.6s}.eic-comp:nth-child(12){animation-delay:0.65s}.eic-comp:nth-child(13){animation-delay:0.7s}
@media(max-width:768px){.eic-frame::before{padding-top:55%;}.eic-comp{font-size:0.55rem;border-radius:5px;}.eic-comp .eic-icon{font-size:0.85rem;}.eic-comp .eic-label{font-size:0.5rem;}.eic-tip{min-width:200px;max-width:260px;}.eic-tip .tip-header,.eic-tip .tip-body,.eic-tip .tip-footer{padding:0.7rem 0.9rem;}.eic-tip .tip-body ul{font-size:0.72rem;}.eic-legend{gap:0.4rem;}.eic-leg{font-size:0.7rem;padding:4px 9px;}}
@media(max-width:480px){.eic-frame::before{padding-top:75%;}.eic-comp .eic-label{display:none;}.eic-comp .eic-icon{font-size:0.75rem;margin-bottom:0;}.eic-tip{min-width:160px;max-width:220px;}}