@keyframes tech-border-flow{0%,to{background-position:0% 0%;opacity:.7}25%{background-position:50% 50%;opacity:.9}50%{background-position:100% 100%;opacity:1}75%{background-position:50% 50%;opacity:.9}}.tech-header{background:linear-gradient(135deg,#0f172af2,#1e293be6,#334155d9,#1e293be6,#0f172af2);border:1px solid rgba(59,130,246,.2);border-radius:20px;padding:2rem 2.5rem;margin-bottom:2rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px #0006,0 1px #ffffff1a inset,0 0 30px #3b82f61a;position:relative;overflow:hidden}.tech-header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(6,182,212,.08) 0%,transparent 50%),linear-gradient(135deg,transparent 0%,rgba(59,130,246,.05) 50%,transparent 100%);pointer-events:none;z-index:0}.tech-header:after{content:"";position:absolute;inset:-1px;background:linear-gradient(45deg,rgba(59,130,246,.3) 0%,rgba(6,182,212,.2) 25%,transparent 50%,rgba(59,130,246,.2) 75%,rgba(59,130,246,.3) 100%);background-size:200% 200%;border-radius:20px;z-index:-1;animation:tech-border-flow 8s ease-in-out infinite}.tech-header>*{position:relative;z-index:1}@media (max-width: 768px){.tech-header{padding:1.5rem 1rem;border-radius:16px;margin-bottom:1rem}.tech-header:after{border-radius:16px}}@media (max-width: 480px){.tech-header{padding:1rem .75rem;margin-bottom:.75rem;border-radius:12px}.tech-header:after{border-radius:12px}}.tech-filter-panel{background:linear-gradient(135deg,#0f172aeb,#1e293be0,#334155d1,#1e293be0,#0f172aeb);border:1px solid rgba(59,130,246,.25);border-radius:16px;padding:1.5rem;box-shadow:0 12px 40px #00000080,0 1px #ffffff14 inset,0 0 20px #3b82f614;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:100%;position:relative;margin-bottom:1.5rem}.tech-filter-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(59,130,246,.06) 0%,transparent 40%),radial-gradient(circle at 75% 75%,rgba(6,182,212,.04) 0%,transparent 40%),linear-gradient(135deg,transparent 0%,rgba(59,130,246,.03) 50%,transparent 100%);border-radius:16px;pointer-events:none;z-index:0}.tech-filter-panel:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(59,130,246,.4) 25%,rgba(6,182,212,.3) 50%,rgba(59,130,246,.4) 75%,transparent 100%);border-radius:16px 16px 0 0;z-index:1}.tech-filter-panel>*{position:relative;z-index:2}:root{--global-bg: #1a1a1a;--global-bg-primary: #222222;--global-bg-card: #252525;--global-border: #333;--global-text-primary: #ffffff;--global-text-secondary: #cccccc;--global-text-muted: #999999;--global-accent: #4A90E2;--global-success: #4CAF50;--global-warning: #ff9800;--global-danger: #f44336}html,body,*{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}body{background:linear-gradient(135deg,var(--global-bg) 0%,var(--global-bg-primary) 100%);color:var(--global-text-primary);margin:0;padding:0;min-height:100vh;box-sizing:border-box;touch-action:manipulation;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-top:0!important;margin-top:0!important}@media (max-width: 480px){body.login-page{height:100vh!important;overflow:hidden!important;position:fixed!important;width:100%!important;top:0;left:0}}@media (max-width: 768px){body{font-size:16px;line-height:1.4;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}}@media (max-width: 768px){input,textarea,select{font-size:16px!important;border-radius:8px!important;padding:12px 16px!important;min-height:44px!important}button{min-height:44px!important;padding:12px 20px!important;border-radius:8px!important;font-size:16px!important}button:active{transform:scale(.98);transition:transform .1s ease}}*{margin:0;padding:0;box-sizing:border-box}router-outlet{display:contents;background:transparent}app-root{display:block;background:var(--global-bg);min-height:100vh}input{box-sizing:border-box;background:var(--global-bg-primary);border:1px solid var(--global-border);color:var(--global-text-primary)}input::placeholder{color:var(--global-text-muted)}p,span,div,label,h1,h2,h3,h4,h5,h6{color:inherit}body,body *{color:var(--global-text-primary)}.ion-color-dark{--ion-color-base: var(--global-text-primary) !important}select{background:var(--global-bg-primary);border:1px solid var(--global-border);color:var(--global-text-primary)}select option{background:var(--global-bg-primary);color:var(--global-text-primary)}button{color:inherit}.loading-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#1a1a1af2,#222222f2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}.loading-overlay .loading-animation{position:relative;width:120px;height:120px;margin-bottom:24px}.loading-overlay .loading-animation .wave{position:absolute;width:100%;height:100%;border-radius:50%;background:#4a90e226;border:2px solid rgba(74,144,226,.3);animation:technoPulse 2s infinite ease-in-out}.loading-overlay .loading-animation .wave:nth-child(2){animation-delay:.5s;background:#4caf5026;border-color:#4caf504d}.loading-overlay .loading-animation .wave:nth-child(3){animation-delay:1s;background:#ff980026;border-color:#ff98004d}.loading-overlay .loading-animation .water-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;color:var(--ion-color-primary)}.loading-overlay .loading-text{font-size:18px;font-weight:500;margin-top:16px;color:var(--ion-color-primary)}.loading-overlay .loading-subtext{font-size:14px;color:var(--ion-color-medium);margin-top:8px}@keyframes pulse{0%{transform:scale(.6);opacity:.6}50%{opacity:.3}to{transform:scale(1.2);opacity:0}}.loading-content{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px}.loading-content ion-spinner{width:64px;height:64px}.loading-content p{margin-top:16px}@keyframes technoPulse{0%{transform:scale(.8);opacity:1}50%{transform:scale(1.2);opacity:.3}to{transform:scale(.8);opacity:1}}@keyframes borderGlow{0%{opacity:.3;box-shadow:0 0 5px #4a90e24d}to{opacity:.8;box-shadow:0 0 20px #4a90e299}}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--global-bg-primary);border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--global-accent),#357ABD);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#357ABD,var(--global-accent))}::selection{background:#4a90e24d;color:var(--global-text-primary)}ion-app,ion-content,.ion-page,app-dashboard{background:var(--global-bg)!important;--background: var(--global-bg) !important}.container,.main-content,.page-content{background:var(--global-bg)!important}.app-content,.mobile-content{background:var(--global-bg)!important;min-height:100vh!important;margin-top:0!important}router-outlet+*{padding-top:24px!important;min-height:calc(100vh - 24px)!important;box-sizing:border-box!important;position:relative!important;display:block!important;margin-top:0!important}app-dashboard,app-device-list,app-device-detail,app-device-state-record,app-division,app-feedback-list,app-feedback-details,app-home,app-landing-page,app-login,app-maintenance-plan,app-responsible,app-treatment-phases,app-user,app-water-volume-tracker,app-china-map{padding-top:24px!important;min-height:calc(100vh - 24px)!important;box-sizing:border-box!important;position:relative!important;display:block!important;margin-top:0!important}app-dashboard .dashboard-container,app-device-list .container,app-device-detail .container,app-device-state-record .container,app-division .container,app-feedback-list .container,app-feedback-details .container,app-home .container,app-landing-page .container,app-login .container,app-maintenance-plan .container,app-responsible .container,app-treatment-phases .container,app-user .container,app-water-volume-tracker .container,app-china-map .container{padding-top:0!important;margin-top:0!important}app-dashboard,app-home,app-login,app-device-list,app-maintenance-plan,app-user,app-feedback,app-responsible{display:block;padding-top:64px;box-sizing:border-box}@media (max-width: 768px){app-dashboard,app-home,app-login,app-device-list,app-maintenance-plan,app-user,app-feedback,app-responsible{padding-top:calc(72px + env(safe-area-inset-top,0))!important}}.mobile-only{display:none!important}@media (max-width: 768px){.mobile-only{display:block!important}}.desktop-only{display:block!important}@media (max-width: 768px){.desktop-only{display:none!important}}.tablet-only{display:none!important}@media (min-width: 481px) and (max-width: 768px){.tablet-only{display:block!important}}.touch-friendly{min-height:44px!important;min-width:44px!important;padding:12px 20px!important}@media (max-width: 768px){.touch-friendly{min-height:48px!important;min-width:48px!important;padding:14px 24px!important}}.mobile-grid{display:grid;gap:1rem}@media (max-width: 768px){.mobile-grid{grid-template-columns:1fr!important;gap:.75rem}}@media (min-width: 769px) and (max-width: 1024px){.mobile-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1025px){.mobile-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.mobile-text-sm{font-size:.875rem!important;line-height:1.4!important}}@media (max-width: 768px){.mobile-text-lg{font-size:1.125rem!important;line-height:1.3!important}}@media (max-width: 768px){.mobile-p-2{padding:.5rem!important}}@media (max-width: 768px){.mobile-p-4{padding:1rem!important}}@media (max-width: 768px){.mobile-m-2{margin:.5rem!important}}@media (max-width: 768px){.mobile-m-4{margin:1rem!important}}@media (max-width: 768px){.mobile-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.mobile-scroll::-webkit-scrollbar{height:4px}.mobile-scroll::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}}.device-card{background:linear-gradient(145deg,#1a202ef2,#2d3748e6,#1a202ef2)!important;border-radius:20px!important;padding:28px!important;min-height:360px!important;-webkit-backdrop-filter:blur(15px) saturate(180%)!important;backdrop-filter:blur(15px) saturate(180%)!important;border:1px solid rgba(74,144,226,.2)!important;box-shadow:0 10px 40px #0000004d,0 0 0 1px #4a90e21a,inset 0 1px #ffffff1a!important;position:relative!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important;cursor:pointer!important;overflow:hidden!important}.device-card:before{content:""!important;position:absolute!important;inset:0!important;background-image:linear-gradient(rgba(74,144,226,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(74,144,226,.03) 1px,transparent 1px)!important;background-size:20px 20px!important;pointer-events:none!important;z-index:1!important}.device-card:hover{transform:translateY(-12px) scale(1.03)!important;border-color:#4a90e280!important;box-shadow:0 20px 60px #0006,0 0 30px #4a90e233,inset 0 1px #fff3!important}.device-card.selected{border-color:#4a90e2cc!important;box-shadow:0 15px 50px #00000059,0 0 40px #4a90e24d,inset 0 1px #ffffff26!important}.device-card>*{position:relative!important;z-index:2!important}.device-card .device-name{font-size:1.25rem!important;font-weight:700!important;background:linear-gradient(135deg,#fff,#4a90e2cc)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;margin-bottom:.5rem!important}.device-card .device-info{background:#ffffff05!important;border:1px solid rgba(74,144,226,.1)!important;border-radius:12px!important;padding:1rem!important;margin-bottom:1rem!important;-webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important}.device-card .device-info .device-id,.device-card .device-info .device-location{color:#ffffffe6!important;font-size:.875rem!important;margin-bottom:.5rem!important}.device-card .device-info .device-location:last-child{margin-bottom:0!important}.device-card .device-status{display:flex!important;align-items:center!important;gap:.5rem!important;padding:.5rem 1rem!important;border-radius:25px!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;font-size:.875rem!important;font-weight:600!important}.device-card .device-status.online{background:linear-gradient(135deg,#4caf5033,#8bc34a33)!important;border:1px solid rgba(76,175,80,.3)!important;color:#81c784!important}.device-card .device-status.offline{background:linear-gradient(135deg,#f4433633,#e91e6333)!important;border:1px solid rgba(244,67,54,.3)!important;color:#ef5350!important}.device-card .device-status.online .status-icon{color:#4caf50!important;filter:drop-shadow(0 0 6px rgba(76,175,80,.6))!important}.device-card .device-status.offline .status-icon{color:#f44336!important;filter:drop-shadow(0 0 6px rgba(244,67,54,.6))!important}.device-card .device-details .detail-row{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:.5rem 0!important;border-bottom:1px solid rgba(74,144,226,.1)!important}.device-card .device-details .detail-row:last-child{border-bottom:none!important}.device-card .device-details .detail-label{color:#ffffffb3!important;font-size:.8rem!important;font-weight:500!important}.device-card .device-details .detail-value{color:#fffffff2!important;font-size:.875rem!important;font-weight:600!important}.device-card .device-actions{margin-top:1.5rem!important;display:flex!important;flex-wrap:wrap!important;gap:.5rem!important;justify-content:space-between!important}.device-card .action-btn{flex:1!important;min-width:calc(50% - .25rem)!important;padding:.6rem .8rem!important;background:linear-gradient(135deg,#4a90e2cc,#7b68eecc)!important;border:1px solid rgba(74,144,226,.3)!important;border-radius:12px!important;color:#fff!important;font-weight:600!important;font-size:.85rem!important;-webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important;transition:all .3s ease!important;cursor:pointer!important;text-align:center!important}.device-card .action-btn:hover{background:linear-gradient(135deg,#4a90e2e6,#7b68eee6)!important;transform:translateY(-2px)!important;box-shadow:0 5px 20px #4a90e266!important}.device-card .action-btn:active{transform:translateY(0)!important}.device-card .action-btn.primary{background:linear-gradient(135deg,#4caf50cc,#8bc34acc)!important;border-color:#4caf504d!important}.device-card .action-btn.primary:hover{background:linear-gradient(135deg,#4caf50e6,#8bc34ae6)!important;box-shadow:0 5px 20px #4caf5066!important}.device-card .action-btn.water-stats{background:linear-gradient(135deg,#2196f3cc,#03a9f4cc)!important;border-color:#2196f34d!important}.device-card .action-btn.water-stats:hover{background:linear-gradient(135deg,#2196f3e6,#03a9f4e6)!important;box-shadow:0 5px 20px #2196f366!important}.device-card .action-btn.electricity-stats{background:linear-gradient(135deg,#ff9800cc,#ffc107cc)!important;border-color:#ff98004d!important}.device-card .action-btn.electricity-stats:hover{background:linear-gradient(135deg,#ff9800e6,#ffc107e6)!important;box-shadow:0 5px 20px #ff980066!important}.device-card .action-btn ion-icon{margin-right:.3rem!important;font-size:1rem!important}app-feedback-list{display:block!important;width:100%!important;height:auto!important;box-sizing:border-box!important;position:relative!important;margin:0!important;padding:1rem!important;overflow:visible!important}app-user-list,app-device-list,app-alert-history,app-feedback-list,app-maintenance-plan{display:block!important;width:100%!important;height:auto!important;box-sizing:border-box!important;position:relative!important;margin:0!important;padding:1rem!important;overflow:visible!important}.content-wrapper{display:flex!important;flex-direction:column!important;gap:1rem!important;min-height:auto!important;flex-grow:1!important}.content-wrapper app-pagination{margin-top:1rem!important;align-self:stretch!important}@media (max-width: 768px){.device-card{padding:20px!important;min-height:280px!important;border-radius:16px!important;-webkit-backdrop-filter:blur(10px) saturate(150%)!important;backdrop-filter:blur(10px) saturate(150%)!important;box-shadow:0 8px 25px #00000040,0 0 0 1px #4a90e21a!important}.device-card:before{background-size:15px 15px!important;opacity:.7!important}.device-card:hover{transform:translateY(-6px) scale(1.02)!important;box-shadow:0 12px 35px #0000004d,0 0 20px #4a90e226!important}.device-card:active{transform:translateY(-2px) scale(.99)!important;transition:all .1s ease!important}.device-card .device-name{font-size:1.1rem!important;line-height:1.3!important}.device-card .device-info{padding:.75rem!important;border-radius:8px!important;-webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important}.device-card .device-info .device-id,.device-card .device-info .device-location{font-size:.8rem!important;line-height:1.4!important}.device-card .device-status{padding:.4rem .8rem!important;font-size:.8rem!important;border-radius:20px!important;-webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important}.device-card .device-details .detail-row{padding:.4rem 0!important}.device-card .device-details .detail-label{font-size:.75rem!important}.device-card .device-details .detail-value{font-size:.8rem!important}.device-card .device-actions{margin-top:1rem!important;gap:.4rem!important}.device-card .action-btn{padding:.5rem .6rem!important;font-size:.8rem!important;border-radius:8px!important;min-width:calc(50% - .2rem)!important;-webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important;min-height:44px!important}.device-card .action-btn:hover{transform:translateY(-1px)!important;box-shadow:0 3px 12px #4a90e24d!important}.device-card .action-btn:active{transform:translateY(0) scale(.98)!important;transition:all .1s ease!important}.device-card .action-btn ion-icon{font-size:.9rem!important;margin-right:.2rem!important}}@media (max-width: 480px){.device-card{padding:16px!important;min-height:240px!important;border-radius:12px!important;box-shadow:0 4px 15px #0003!important}.device-card:before{display:none!important}.device-card:hover{transform:translateY(-3px) scale(1.01)!important;box-shadow:0 8px 20px #00000040!important}.device-card .device-name{font-size:1rem!important}.device-card .device-info{padding:.5rem!important;margin-bottom:.75rem!important}.device-card .device-info .device-id,.device-card .device-info .device-location{font-size:.75rem!important;margin-bottom:.4rem!important}.device-card .device-status{padding:.3rem .6rem!important;font-size:.75rem!important;gap:.3rem!important}.device-card .device-details .detail-row{padding:.3rem 0!important}.device-card .device-details .detail-label{font-size:.7rem!important}.device-card .device-details .detail-value{font-size:.75rem!important}.device-card .device-actions{margin-top:.75rem!important;gap:.3rem!important}.device-card .action-btn{padding:.4rem .5rem!important;font-size:.75rem!important;border-radius:6px!important;min-width:calc(50% - .15rem)!important;min-height:40px!important}.device-card .action-btn ion-icon{font-size:.8rem!important;margin-right:.15rem!important}}@media (max-width: 768px){ion-icon{display:inline-block!important;vertical-align:middle!important;font-style:normal!important;font-variant:normal!important;text-rendering:auto!important;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;font-family:Ionicons!important;opacity:1!important;visibility:visible!important;min-width:1em!important;min-height:1em!important}ion-icon:before{font-family:Ionicons!important;display:inline-block!important;font-style:normal!important;font-variant:normal!important;text-rendering:auto!important;-webkit-font-smoothing:antialiased!important}button ion-icon,.btn ion-icon,.fab ion-icon,.action-btn ion-icon{color:#fff!important}.search-icon,.input-icon{color:#666!important}ion-icon.rotating{animation:ionicon-spin 1s linear infinite!important}}@keyframes ionicon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}