:root{color:#183241;background:#f3f6f5;font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-app: #f3f6f5;--bg-panel: #ffffff;--bg-soft: #f7faf9;--border: #dde7e3;--border-strong: #cad8d2;--text-main: #183241;--text-soft: #647c87;--text-muted: #8296a0;--green: #1f7d4f;--green-deep: #16623e;--green-soft: #eaf6ef;--blue: #2f6da8;--blue-soft: #edf4fb;--yellow: #b48109;--yellow-soft: #fff7df;--red: #c2472d;--red-soft: #fdf0eb;--gray: #8e9ca5;--gray-soft: #eef2f3;--shadow-panel: 0 12px 28px rgba(28, 46, 56, .06)}*,*:before,*:after{box-sizing:border-box}html,body,#app{min-height:100%}html{background:var(--bg-app)}body{margin:0;min-height:100dvh;background:var(--bg-app);color:var(--text-main);overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}button,input,select{outline:none}h1,h2,h3,p,ul{margin:0}ul{padding: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,var(--green),var(--blue));box-shadow:0 10px 24px #1f7d4f38;flex:0 0 auto}.auth-title h1{font-size:22px;line-height:1.18;font-weight:800;color:var(--text-main)}.auth-form{display:grid;gap:15px}.auth-role-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.auth-role-button{min-height:42px;padding:0 12px;border:1px solid #d8e3df;border-radius:10px;background:#f8fbfa;color:#5a727d;font-weight:700;transition:all .18s ease}.auth-role-button:hover{border-color:#c9ddd4;background:#f1f8f4;color:var(--green-deep)}.auth-role-button.active{border-color:#cde2d8;background:var(--green-soft);color:var(--green-deep);box-shadow:inset 0 0 0 1px #1f7d4f1a}.auth-form label{display:grid;gap:8px}.auth-form label span{font-size:13px;font-weight:700;color:var(--text-soft)}.auth-form input{width:100%;min-height:50px;padding:0 15px;border-radius:10px;border:1px solid #cdd9df;background:#fbfdfe;color:var(--text-main);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.auth-form select,.admin-form-item input,.table-select{width:100%;min-height:38px;padding:0 12px;border:1px solid #d1ddd8;border-radius:10px;background:#fbfdfc;color:var(--text-main)}.auth-form select:focus,.admin-form-item input:focus,.table-select:focus{border-color:var(--green);box-shadow:0 0 0 4px #1f7d4f1a}.auth-form input::placeholder{color:#97a9b4}.auth-form input:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px #1f7d4f1f}.primary-button,.button-primary,.button-secondary,.button-danger,.button-disabled,.icon-button{border:0;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}.primary-button,.button-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;font-weight:800;box-shadow:0 12px 24px #1f7d4f2e}.primary-button:hover,.button-primary:hover{filter:brightness(.98)}.primary-button.compact{min-height:42px}.button-secondary,.button-danger,.button-disabled{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border-radius:10px;font-weight:700}.button-secondary{border:1px solid rgba(31,125,79,.28);background:#fff;color:var(--green)}.button-secondary:hover{background:var(--green-soft);border-color:#1f7d4f73}.button-danger{border:1px solid rgba(194,71,45,.2);background:linear-gradient(135deg,#d35e35,#bb452b);color:#fff}.button-danger:hover{filter:brightness(.98)}.button-disabled{border:1px solid #d8e1de;background:#eef2f1;color:#94a2a9;cursor:not-allowed}.button-primary:disabled,.button-secondary:disabled,.primary-button:disabled{border-color:#d8e1de;background:#eef2f1;box-shadow:none;color:#94a2a9;cursor:not-allowed}.ghost-link{min-height:36px;border:0;background:transparent;color:var(--blue);font-weight:700;justify-self:center}.form-message{font-size:13px;line-height:1.5}.form-message.error{color:var(--red)}.form-message.success{color:var(--green)}.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100dvh;background:var(--bg-app)}.sidebar{position:sticky;top:0;align-self:start;height:100dvh;padding:20px 16px 22px;border-right:1px solid var(--border);background:#f7faf8;z-index:20;overflow-y:auto}.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:2px 4px 16px;border-bottom:1px solid rgba(221,231,227,.9)}.sidebar-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--blue));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:var(--text-muted)}.drawer-close,.mobile-menu{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text-soft)}.nav-sections{display:grid;gap:18px}.nav-section{display:grid;gap:8px}.nav-group-title{padding:0 8px;color:#80929b;font-size:12px;font-weight:800}.nav-list{display:grid;gap:6px}.nav-item{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 13px 0 16px;border:1px solid transparent;border-radius:12px;background:transparent;color:#56707b;text-align:left;font-weight:700}.nav-item:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 999px 999px 0;background:transparent}.nav-item:hover{border-color:#dce8e2;background:#f0f7f3;color:var(--green-deep)}.nav-item.active{color:var(--green-deep);border-color:#d2e5da;background:var(--green-soft)}.nav-item.active:before{background:var(--green)}.workspace{min-width:0;padding:20px;padding-bottom:calc(28px + env(safe-area-inset-bottom));background:var(--bg-app)}.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 var(--border);border-radius:16px;background:#ffffffeb;box-shadow:0 14px 32px #2232410d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.topbar-title{min-width:0}.eyebrow,.section-tag{margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:0;color:var(--text-muted)}.topbar-title h1{font-size:26px;line-height:1.18;color:var(--text-main)}.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.device-switcher{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 10px;border:1px solid var(--border);border-radius:12px;background:#fff}.device-switcher span{color:var(--text-soft);font-size:13px;font-weight:700;white-space:nowrap}.device-switcher select{min-width:180px;min-height:32px;padding:0 10px;border:1px solid #d1ddd8;border-radius:8px;background:#fbfdfc;color:var(--text-main)}.status-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border-radius:999px;border:1px solid #d8e3df;background:#f8fbfa;color:#446071;font-size:13px;font-weight:700;white-space:nowrap}.status-chip.ok,.metric-status.ok,.ok{color:var(--green)}.status-chip.ok{background:var(--green-soft);border-color:#d0e8d8}.status-chip.warn,.metric-status.warn,.warn{color:var(--yellow)}.status-chip.warn{background:var(--yellow-soft);border-color:#ecdca8}.status-chip.danger,.metric-status.danger,.danger{color:var(--red)}.status-chip.danger{background:var(--red-soft);border-color:#efc7bc}.status-chip.offline,.metric-status.offline,.offline{color:var(--gray)}.status-chip.offline{background:var(--gray-soft);border-color:#dbe2e5}.status-chip.info,.metric-status.info,.info{color:var(--blue)}.status-chip.info{background:var(--blue-soft);border-color:#d4e4f3}.icon-button{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#edf4f1;color:#3f5a6a;flex:0 0 auto}.icon-button:hover{background:#e2ece8}.workspace-surface,.page-view{display:grid;gap:16px}.panel,.metric-card,.device-status-card,.status-card,.system-state-card,.preset-card,.list-item,.device-item{border:1px solid var(--border);background:var(--bg-panel);box-shadow:var(--shadow-panel)}.panel{padding:18px;border-radius:18px}.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:var(--text-muted);font-size:13px;white-space:nowrap}.hero-banner{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:16px;min-height:240px;padding:22px;border-radius:22px;border:1px solid #d2ddd7;background:linear-gradient(100deg,#112e36c7,#165c3a94 46%,#ffffff1a),url(/assets/dashboard-bg.jpg) center center / cover no-repeat;box-shadow:0 18px 40px #182c3624}.hero-copy,.hero-highlight{position:relative;z-index:1}.hero-copy h2{font-size:30px;line-height:1.15;color:#fff}.hero-copy .section-tag,.hero-description,.hero-meta span{color:#f2f8fae0}.hero-description{max-width:58ch;margin-top:12px;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(236,245,245,.25);background:#ffffff1f;display:inline-flex;align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-highlight{display:grid;align-content:start;gap:12px}.hero-highlight-item{padding:18px 16px;border-radius:18px;border:1px solid rgba(239,245,243,.24);background:#ffffff29;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-highlight-item span,.hero-highlight-item em{display:block}.hero-highlight-item span{color:#f0f8f8db;font-size:13px;font-weight:700}.hero-highlight-item strong{display:block;margin:10px 0 6px;color:#fff;font-size:28px;line-height:1.05}.hero-highlight-item em{font-size:13px;font-style:normal}.dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.span-4{grid-column:span 4}.span-8{grid-column:span 8}.side-stack{display:grid;gap:16px}.env-card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.metric-card{position:relative;overflow:hidden;min-height:162px;padding:16px;border-radius:18px}.metric-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent, var(--green))}.metric-card.ok{--accent: var(--green)}.metric-card.warn{--accent: var(--yellow)}.metric-card.danger{--accent: var(--red)}.metric-card.offline{--accent: var(--gray)}.metric-card.info{--accent: var(--blue)}.metric-card-top{display:flex;justify-content:space-between;gap:12px}.metric-card-top p{color:var(--text-soft);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:var(--text-main)}.metric-card-top small{font-size:14px;color:var(--text-muted)}.metric-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:var(--accent, var(--green));background:color-mix(in srgb,var(--accent, var(--green)) 12%,white);flex:0 0 auto}.metric-meta{position:absolute;left:16px;right:16px;bottom:14px;display:grid;gap:7px}.metric-status{display:inline-flex;align-items:center;width:fit-content;min-height:24px;padding:0 8px;border-radius:999px;background:#f6faf7;font-size:12px;font-weight:800}.metric-trend{display:inline-flex;align-items:center;gap:6px;color:var(--text-soft);font-size:12px;font-weight:700}.score-card,.advice-card{min-height:0}.score-value{display:inline-flex;align-items:baseline;gap:6px;margin-top:10px;font-size:48px;line-height:1;color:var(--text-main);font-weight:800}.score-value small{font-size:18px;color:var(--text-muted)}.score-label{margin-top:8px;font-size:14px;font-weight:800}.score-description{margin-top:10px;color:var(--text-soft);line-height:1.7}.advice-list{display:grid;gap:12px;margin-top:4px;list-style:none}.advice-list li{position:relative;padding-left:16px;color:var(--text-soft);line-height:1.7}.advice-list li:before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:999px;background:var(--green)}.device-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.admin-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.admin-stat-card,.permission-card{border:1px solid var(--border);background:var(--bg-soft);border-radius:16px}.admin-stat-card{min-height:112px;padding:16px}.admin-stat-card span,.admin-stat-card strong{display:block}.admin-stat-card span{color:var(--text-soft);font-size:13px;font-weight:700}.admin-stat-card strong{margin-top:14px;font-size:24px;line-height:1.15}.admin-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.95fr);gap:16px}.table-actions{display:flex;flex-wrap:wrap;gap:8px}.permission-stack{display:grid;gap:14px}.permission-card{padding:16px}.permission-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.permission-card-head strong{font-size:16px}.permission-card-head span{color:var(--text-soft);font-size:13px}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.permission-item,.admin-form-item,.admin-toggle-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--border);background:#fff}.permission-item span,.admin-form-item span,.admin-toggle-item span{color:var(--text-soft);font-weight:700}.permission-item input,.admin-toggle-item input{width:18px;height:18px;accent-color:var(--green)}.admin-form-panel{display:grid;gap:16px}.admin-form-grid{display:grid;gap:14px}.admin-form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-form-item{min-height:58px}.admin-form-item input,.admin-form-item select{width:min(56%,360px)}.table-select{min-width:144px}.device-status-card{padding:14px;border-radius:16px;background:var(--bg-soft)}.device-status-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--text-soft)}.device-status-card strong{display:block;font-size:15px}.device-status-value{margin:8px 0 6px;font-size:24px;font-weight:800}.device-status-card p{color:var(--text-soft);line-height:1.6}.log-list,.flow-list{display:grid;gap:12px}.log-item,.flow-step{display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;align-items:start}.log-dot,.flow-node{width:12px;height:12px;margin-top:6px;border-radius:999px;background:var(--gray);box-shadow:0 0 0 6px #8e9ca51f}.log-dot.ok,.flow-node.ok{background:var(--green);box-shadow:0 0 0 6px #1f7d4f1f}.log-dot.warn,.flow-node.warn{background:var(--yellow);box-shadow:0 0 0 6px #b481091f}.log-dot.danger,.flow-node.danger{background:var(--red);box-shadow:0 0 0 6px #c2472d1f}.log-dot.info,.flow-node.info{background:var(--blue);box-shadow:0 0 0 6px #2f6da81f}.log-copy strong,.flow-copy strong{display:block;font-size:14px}.log-copy p,.flow-copy p{margin-top:4px;color:var(--text-soft);line-height:1.65}.log-copy span{display:block;margin-top:6px;color:var(--text-muted);font-size:12px}.chart-panel{padding-bottom:14px}.chart{width:100%;height:330px}.chart.large{height:460px}.chart-toolbar-panel,.chart-detail-card{overflow:hidden}.chart-notice-panel{padding:14px 16px}.chart-notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}.chart-notice-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--gray-soft);color:var(--gray)}.chart-notice-icon.ok{background:var(--green-soft);color:var(--green)}.chart-notice-icon.warn{background:var(--yellow-soft);color:var(--yellow)}.chart-notice-icon.offline,.chart-tone-tag.offline{background:var(--gray-soft);color:var(--gray);border-color:#dbe2e5}.chart-notice-copy strong,.chart-notice-copy p{display:block}.chart-notice-copy strong{font-size:15px}.chart-notice-copy p{margin-top:6px;color:var(--text-soft);line-height:1.65}.chart-toolbar{display:grid;gap:14px}.chart-filter-group{display:grid;gap:8px}.chart-filter-group>span{color:var(--text-soft);font-size:13px;font-weight:800}.chart-filter-list,.chart-toolbar-actions{display:flex;flex-wrap:wrap;gap:10px}.filter-chip{min-height:38px;padding:0 14px;border:1px solid #d8e3df;border-radius:999px;background:#fff;color:#56707b;font-weight:700;transition:all .18s ease}.filter-chip:hover{background:#f2f8f5;border-color:#c8ddd3;color:var(--green-deep)}.filter-chip.active{border-color:#cde2d8;background:var(--green-soft);color:var(--green-deep);box-shadow:inset 0 0 0 1px #1f7d4f14}.chart-toolbar-actions .button-secondary,.chart-toolbar-actions .button-primary{gap:8px}.chart-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.chart-span-6{grid-column:span 6}.chart-span-12{grid-column:span 12}.chart-card-head{align-items:center}.chart-tone-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:#f6faf7;border:1px solid var(--border);font-size:12px;font-weight:800;white-space:nowrap}.chart-tone-tag.ok{color:var(--green);background:var(--green-soft);border-color:#d0e8d8}.chart-tone-tag.warn{color:var(--yellow);background:var(--yellow-soft);border-color:#ecdca8}.chart-tone-tag.danger{color:var(--red);background:var(--red-soft);border-color:#efc7bc}.chart-tone-tag.info{color:var(--blue);background:var(--blue-soft);border-color:#d4e4f3}.chart-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.chart-summary-item{min-width:0;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--bg-soft)}.chart-summary-item span,.chart-summary-item strong{display:block}.chart-summary-item span{color:var(--text-soft);font-size:12px;font-weight:800}.chart-summary-item strong{margin-top:8px;color:var(--text-main);font-size:14px;line-height:1.45;word-break:break-word}.detail-chart{height:300px}.detail-chart-wide{height:320px}.chart-empty-state{display:grid;justify-items:start;gap:10px;min-height:300px;padding:22px;border-radius:16px;border:1px dashed var(--border-strong);background:linear-gradient(180deg,#f7faf9,#f3f6f5)}.chart-empty-state-wide{min-height:320px}.chart-empty-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--gray-soft);color:var(--gray)}.chart-empty-state strong{font-size:18px}.chart-empty-state p,.chart-empty-state span{color:var(--text-soft);line-height:1.65}.chart-empty-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.status-groups-grid,.preset-layout,.manual-layout{display:grid;gap:16px}.status-groups-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-device-detail-grid{margin-top:16px}.detail-subpanel{padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--bg-soft);box-shadow:inset 0 0 0 1px #ffffff52}.status-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.status-card,.system-state-card{padding:14px;border-radius:16px}.status-card span,.system-state-card span{display:block;color:var(--text-soft);font-size:13px;font-weight:700}.status-card strong,.system-state-card strong{display:block;margin-top:10px;font-size:22px;line-height:1.1}.status-card em,.system-state-card em{display:inline-flex;margin-top:10px;font-style:normal;font-size:12px;font-weight:800}.system-state-grid{display:grid;gap:12px}.system-state-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;background:var(--bg-soft)}.system-state-card strong{margin-top:4px;font-size:16px}.preset-highlight{display:grid;gap:12px}.preset-highlight h3{font-size:22px}.preset-highlight p{margin-top:8px;color:var(--text-soft);line-height:1.7}.preset-highlight-meta{display:flex;flex-wrap:wrap;gap:8px}.preset-highlight-meta span{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text-soft);display:inline-flex;align-items:center}.notice-banner,.warning-banner{padding:14px 16px;border-radius:14px;border:1px solid #ecd7a3;background:var(--yellow-soft);color:var(--yellow);line-height:1.6;font-weight:700}.preset-layout{grid-template-columns:minmax(0,1.65fr) minmax(300px,.95fr)}.preset-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.preset-card{padding:16px;border-radius:16px}.preset-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.preset-card-head strong{display:block;font-size:16px}.preset-card-head p{margin-top:6px;color:var(--text-soft);line-height:1.65}.preset-params{display:grid;gap:8px;margin:14px 0 16px;color:var(--text-soft);font-size:13px;line-height:1.6}.action-row{display:flex;align-items:center;gap:10px}.action-row.wrap{flex-wrap:wrap}.action-row>*{flex:1 1 0}.preset-detail-grid{display:grid;gap:12px}.detail-pill{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--border);background:var(--bg-soft)}.detail-pill span{color:var(--text-soft);font-weight:700}.detail-pill strong{color:var(--text-main)}.manual-layout{grid-template-columns:repeat(2,minmax(0,1fr))}.manual-panel{display:grid;gap:16px}.range-slider{width:100%;accent-color:var(--green)}.slider-stack{display:grid;gap:14px}.slider-row{display:grid;grid-template-columns:64px minmax(0,1fr) 56px;gap:12px;align-items:center}.slider-row span{color:var(--text-soft);font-weight:700}.slider-row strong{text-align:right}.relay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.manual-note,.command-info,.blank-message{color:var(--text-soft);line-height:1.7}.blank-message{padding:14px;border-radius:14px;border:1px dashed var(--border-strong);background:#fbfdfc}.device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.device-item{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;min-height:96px;padding:14px;border-radius:16px;background:var(--bg-soft)}.device-item span,.list-item span{color:var(--text-soft);line-height:1.55}.device-item strong,.list-item strong{grid-column:2;font-size:16px}.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:var(--text-soft);font-size:13px;font-weight:800}.data-table td{color:var(--text-main)}.badge{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:800}.badge.ok{background:var(--green-soft);color:var(--green)}.badge.warn{background:var(--yellow-soft);color:var(--yellow)}.badge.danger{background:var(--red-soft);color:var(--red)}.badge.offline{background:var(--gray-soft);color:var(--gray)}.dashboard-notice-panel{margin-bottom:16px}.dashboard-notice-copy{color:var(--text-soft);line-height:1.7}.empty-state{display:grid;place-items:center;gap:10px;min-height:220px;padding:20px;border:1px solid var(--border);border-radius:16px;background:#fff;color:var(--text-soft)}.empty-state.error-state{color:var(--red)}.drawer-mask{display:none}@media(max-width:1280px){.env-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.status-groups-grid{grid-template-columns:1fr}.admin-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1100px){.dashboard-grid,.preset-layout,.manual-layout{grid-template-columns:1fr}.span-4,.span-8{grid-column:span 12}.preset-card-grid,.device-grid,.relay-grid,.hero-banner,.chart-grid,.admin-grid,.admin-form-grid-2,.permission-grid{grid-template-columns:1fr}.chart-span-6,.chart-span-12{grid-column:auto}}@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}.device-switcher{width:100%;justify-content:space-between}.device-switcher select{min-width:0;width:min(100%,220px)}.env-card-grid,.chart-summary-grid,.admin-stat-grid{grid-template-columns:repeat(2,minmax(0,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-role-switch{grid-template-columns:1fr 1fr}.auth-title h1{font-size:20px}.workspace{padding:12px 12px calc(24px + env(safe-area-inset-bottom))}.topbar{gap:12px;padding:12px;border-radius:14px}.topbar-title h1{font-size:22px}.hero-copy h2{font-size:24px}.hero-banner,.panel,.metric-card{border-radius:16px}.hero-banner{min-height:0;padding:16px}.env-card-grid,.status-card-grid,.device-card-grid,.preset-card-grid,.relay-grid,.device-grid,.manual-layout,.chart-summary-grid,.admin-stat-grid,.permission-grid,.admin-form-grid-2{grid-template-columns:1fr}.slider-row{grid-template-columns:1fr;gap:8px}.slider-row strong{text-align:left}.action-row{flex-direction:column}.action-row>*{width:100%}.chart{height:280px}.chart.large{height:340px}.detail-chart,.detail-chart-wide{height:280px}.chart-empty-state,.chart-empty-state-wide{min-height:260px;padding:18px}.chart-empty-actions{width:100%;flex-direction:column}.chart-empty-actions>*{width:100%}.chart-card-head{align-items:flex-start}.chart-tone-tag{white-space:normal}.admin-form-item,.admin-toggle-item,.permission-item{min-height:0;padding:12px;align-items:flex-start;flex-direction:column}.admin-form-item input,.admin-form-item select{width:100%}.data-table{display:block;overflow-x:auto;white-space:nowrap}}