:root{color:#173041;background:#eef3f6;font-family:Inter,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}html,body,#app{min-height:100%}html{background:#eef3f6}body{margin:0;min-height:100dvh;background:#eef3f6;color:#173041;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button,input{outline:none}h1,h2,h3,p{margin:0}img{display:block;max-width:100%}#app{min-height:100dvh}.auth-page{position:relative;display:grid;place-items:center;min-height:100dvh;padding:32px 18px calc(44px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#f7f9fa14,#e8eff347),url(/assets/auth-bg.jpg) center center / cover no-repeat;overflow:hidden}.auth-page:before,.auth-page:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.auth-page:before{background:linear-gradient(180deg,#ffffff14,#ffffff24)}.auth-page:after{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.06),transparent 58%)}.auth-card{position:relative;z-index:1;width:min(100%,404px);padding:34px 30px 28px;border-radius:18px;border:1px solid rgba(221,229,234,.92);background:#fffffff7;box-shadow:0 18px 48px #2e373a33}.auth-brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px}.auth-logo{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#1f8f55,#2d73b9);box-shadow:0 10px 24px #1f8f5538;flex:0 0 auto}.auth-title h1{font-size:22px;line-height:1.18;font-weight:800;color:#173041}.auth-form{display:grid;gap:15px}.auth-form label{display:grid;gap:8px}.auth-form label span{font-size:13px;font-weight:700;color:#577184}.auth-form input{width:100%;min-height:50px;padding:0 15px;border-radius:10px;border:1px solid #cdd9df;background:#fbfdfe;color:#173041;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.auth-form input::placeholder{color:#97a9b4}.auth-form input:focus{border-color:#2b8a57;background:#fff;box-shadow:0 0 0 4px #2b8a571f}.primary-button,.icon-button,.control-button{border:0}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 16px;border-radius:10px;background:linear-gradient(135deg,#1f8f55,#2b8a57);color:#fff;font-weight:800;box-shadow:0 12px 24px #1f8f552e}.primary-button:hover{filter:brightness(.98)}.primary-button.compact{min-height:42px;padding:0 14px}.ghost-link{min-height:36px;border:0;background:transparent;color:#2d73b9;font-weight:700;justify-self:center}.form-message{font-size:13px;line-height:1.5}.form-message.error{color:#c13535}.form-message.success{color:#15804b}.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100dvh;background:#eef3f6}.sidebar{position:sticky;top:0;align-self:start;height:100dvh;padding:20px 16px 18px;border-right:1px solid #dae4ea;background:linear-gradient(180deg,#f8fbfc,#f3f7f9);z-index:20}.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:2px 4px 12px}.sidebar-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#1f8f55,#2d73b9);color:#fff;flex:0 0 auto}.sidebar-brand-text strong,.sidebar-brand-text span{display:block}.sidebar-brand-text strong{font-size:17px;line-height:1.2}.sidebar-brand-text span{margin-top:3px;font-size:12px;color:#6d8291}.drawer-close,.mobile-menu{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:12px;background:#edf4f7;color:#456070}.nav-list{display:grid;gap:6px}.nav-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 13px;border:1px solid transparent;border-radius:12px;background:transparent;color:#547083;text-align:left;font-weight:700}.nav-item:hover,.nav-item.active{color:#1c7346;border-color:#cfe4d6;background:#eaf5ef}.workspace{position:relative;isolation:isolate;min-width:0;padding:20px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}.workspace:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;background:linear-gradient(180deg,#eef3f6d1,#eef3f6f0),url(/assets/dashboard-bg.jpg) center top / cover no-repeat;opacity:1}.workspace:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.22) 0 18%,transparent 18% 36%,rgba(173,221,186,.16) 36% 52%,transparent 52% 72%,rgba(154,193,224,.16) 72% 100%);pointer-events:none}.topbar{position:sticky;top:12px;z-index:10;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 16px;margin-bottom:16px;border:1px solid #d9e4ea;border-radius:16px;background:#ffffffe6;box-shadow:0 14px 32px #2232410f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.topbar-title{min-width:0}.eyebrow,.section-tag{margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:0;color:#6d8291}.topbar-title h1{font-size:26px;line-height:1.18;color:#173041}.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.status-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border-radius:999px;border:1px solid #d7e3e9;background:#f8fbfc;color:#446071;font-size:13px;font-weight:700;white-space:nowrap}.status-chip.ok{color:#15784b;background:#edf8f1;border-color:#cde8d7}.status-chip.warn{color:#946200;background:#fff7e6;border-color:#f1dfb0}.status-chip.danger{color:#b42318;background:#fceeee;border-color:#f5c7c7}.status-chip.info{color:#2d73b9;background:#edf5fd;border-color:#d2e4f7}.icon-button{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#edf4f7;color:#3f5a6a;flex:0 0 auto}.icon-button:hover{background:#e0ecef}.page-view{display:grid;gap:16px}.workspace-surface{position:relative;display:grid;gap:16px}.dashboard-surface{padding:8px;border-radius:24px;background:linear-gradient(180deg,#ffffff57,#ffffff1f);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hero-panel,.panel,.metric-card{border:1px solid #dce5ea;background:#fff;box-shadow:0 10px 24px #1e2b3a0d}.hero-panel,.panel{border-radius:16px}.hero-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:16px;padding:20px;min-height:260px;background:linear-gradient(96deg,#112d39c2,#15543a8f 42%,#ffffff14),url(/assets/dashboard-bg.jpg) center center / cover no-repeat;border-color:#c5d7dfb8;box-shadow:0 18px 42px #1f353e24}.hero-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.16) 0 14%,transparent 14% 34%,rgba(174,222,188,.16) 34% 50%,transparent 50% 67%,rgba(153,193,224,.18) 67% 84%,transparent 84% 100%);pointer-events:none}.hero-panel>*{position:relative;z-index:1}.hero-copy h2{font-size:28px;line-height:1.2;margin-bottom:10px;color:#fff}.hero-copy .section-tag{color:#edf7fbd1}.hero-description{max-width:56ch;color:#f4fafceb;line-height:1.75}.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.hero-meta span{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(234,242,246,.42);background:#ffffff29;color:#f5fbff;display:inline-flex;align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-status{display:grid;gap:12px;align-content:start;padding:4px}.hero-status-item{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 14px;border-radius:14px;border:1px solid rgba(236,243,246,.4);background:#ffffff2e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-status-item span{color:#f2f9fce0;font-weight:700}.hero-status-item strong{font-size:18px;color:#fff}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric-card{position:relative;overflow:hidden;min-height:132px;padding:16px;border-radius:16px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.metric-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent, #2b8a57)}.metric-card.ok{--accent: #1f8f55}.metric-card.warn{--accent: #c08a00}.metric-card.danger{--accent: #c13535}.metric-card.info{--accent: #2d73b9}.metric-card-top{display:flex;justify-content:space-between;gap:12px}.metric-card-top p{color:#5f7483;font-size:13px;font-weight:700}.metric-card-top strong{display:inline-flex;align-items:baseline;gap:4px;margin-top:10px;font-size:28px;line-height:1;color:#173041}.metric-card-top small{font-size:14px;color:#688091}.metric-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:var(--accent, #2b8a57);background:color-mix(in srgb,var(--accent, #2b8a57) 10%,white);flex:0 0 auto}.metric-hint{position:absolute;left:16px;bottom:14px;color:#6d8291;font-size:12px}.detail-grid,.dual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.panel{padding:18px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-head h3{font-size:18px;line-height:1.25}.panel-head span{color:#6d8291;font-size:13px;white-space:nowrap}.status-table{display:grid;gap:10px}.status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;background:#f8fbfc;border:1px solid #e1eaee}.status-row span{color:#587082;font-weight:700}.status-row strong{color:#173041;text-align:right}.chart-panel{padding-bottom:12px}.chart{width:100%;height:320px}.chart.large{height:430px}.list-grid,.device-grid,.control-grid{display:grid;gap:12px}.list-grid,.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.list-item,.device-item{display:grid;gap:6px;min-height:92px;padding:14px;border-radius:14px;border:1px solid #e1eaee;background:#f8fbfc}.list-item strong,.device-item strong{font-size:16px}.list-item span,.device-item span{color:#617686;line-height:1.55}.device-item{grid-template-columns:auto 1fr;align-items:center;gap:10px 12px}.device-item strong{grid-column:2;color:#173041}.control-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.control-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 14px;border-radius:14px;background:#eef7f1;color:#1c7346;font-weight:800}.control-button:hover{background:#e2f1e8}.command-info,.blank-message{margin-top:12px;color:#5f7483}.blank-message{padding:14px;border-radius:14px;border:1px dashed #d1dee3;background:#fbfdfe}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:14px 10px;border-bottom:1px solid #e5edf0;text-align:left;vertical-align:top}.data-table th{color:#5f7483;font-size:13px;font-weight:800}.data-table td{color:#173041}.badge{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:#edf5fd;color:#2d73b9;font-size:12px;font-weight:800}.empty-state{display:grid;place-items:center;gap:10px;min-height:220px;padding:20px;border:1px solid #dce5ea;border-radius:16px;background:#fff;color:#597283}.empty-state.error-state{color:#b42318}.ok{color:#15784b}.warn{color:#9b6600}.danger{color:#b42318}.info{color:#2d73b9}.drawer-mask{display:none}@media(max-width:1200px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-panel{grid-template-columns:1fr}}@media(max-width:960px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:min(320px,84vw);transform:translate(-102%);transition:transform .22s ease;box-shadow:18px 0 36px #1b29362e}.sidebar.open{transform:translate(0)}.drawer-mask{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:15;background:#0f192147}.drawer-close,.mobile-menu{display:inline-grid}.topbar{grid-template-columns:auto minmax(0,1fr);align-items:start}.topbar-actions{grid-column:1 / -1;justify-content:flex-start}.detail-grid,.dual-grid,.control-grid,.list-grid,.device-grid{grid-template-columns:1fr}}@media(max-width:640px){.auth-page{padding:18px 12px calc(36px + env(safe-area-inset-bottom));background-position:56% center}.auth-card{width:min(100%,360px);padding:24px 18px 20px;border-radius:16px}.auth-title h1{font-size:20px}.workspace{padding:12px 12px calc(24px + env(safe-area-inset-bottom))}.dashboard-surface{padding:4px;border-radius:18px}.topbar{gap:12px;padding:12px;border-radius:14px}.topbar-title h1{font-size:22px}.hero-copy h2{font-size:24px}.hero-panel{min-height:0;padding:16px}.metric-grid{grid-template-columns:1fr}.metric-card{min-height:124px}.chart{height:280px}.chart.large{height:320px}.data-table{display:block;overflow-x:auto;white-space:nowrap}}