:root{--blue:#075eae;--blue2:#003f7f;--ink:#132238;--muted:#607086;--line:#d9e5f2;--soft:#f3f7fc;--ok:#087f5b;--warn:#b76500;--bad:#b42318;--card:#fff;--shadow:0 12px 34px rgba(18,52,86,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:var(--ink);background:#eef4fa;line-height:1.65}a{color:inherit}.topbar{height:6px;background:linear-gradient(90deg,#022c60,#0872c9)}.site-head{background:#fff;border-bottom:1px solid var(--line)}.head-inner{max-width:1220px;margin:auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand-mark{width:48px;height:48px;border-radius:12px;background:linear-gradient(145deg,#0873c9,#033f80);display:grid;place-items:center;color:#fff;font-size:26px;font-weight:900}.brand strong{display:block;color:#064c8d;font-size:21px}.brand small{color:#7b8797}.head-nav{display:flex;gap:10px;flex-wrap:wrap}.head-nav a{padding:8px 13px;border-radius:20px;text-decoration:none;color:#34445a}.head-nav a:hover,.head-nav a.active{background:#e8f3ff;color:#075eae}.hero{background:linear-gradient(130deg,#052d58,#0871bf);color:#fff}.hero-inner{max-width:1220px;margin:auto;padding:42px 22px 38px}.hero .crumb{font-size:13px;color:#cce5ff;margin-bottom:12px}.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 10px;line-height:1.2}.hero p{max-width:820px;color:#dceeff;margin:0}.container{max-width:1220px;margin:auto;padding:26px 22px 48px}.notice{background:#fff8e8;border:1px solid #f0d49b;border-left:5px solid #d88900;border-radius:12px;padding:13px 16px;margin-bottom:18px;color:#714b11}.notice.ok{background:#edfff8;border-color:#a8e2cb;border-left-color:#087f5b;color:#075b42}.toolbar,.panel,.tool-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.panel{padding:20px;margin-bottom:18px}.panel h2,.panel h3{margin:0 0 14px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:13px;color:var(--muted);font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid #bdcee0;border-radius:9px;padding:9px 11px;background:#fff;color:var(--ink);font:inherit;outline:none}.field textarea{min-height:110px;resize:vertical;font-family:Consolas,monospace}.field input:focus,.field select:focus,.field textarea:focus{border-color:#1676c5;box-shadow:0 0 0 3px rgba(22,118,197,.12)}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.btn{border:0;border-radius:9px;padding:10px 16px;background:#e8f1fa;color:#075eae;font-weight:800;cursor:pointer}.btn:hover{filter:brightness(.97)}.btn.primary{background:#0768b7;color:#fff}.btn.green{background:#087f5b;color:#fff}.btn.red{background:#b42318;color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.status{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:20px;background:#edf2f7;color:#536274;font-size:13px}.dot{width:9px;height:9px;border-radius:50%;background:#8c9aaa}.status.connected{background:#e6faef;color:#087f5b}.status.connected .dot{background:#14a46f;box-shadow:0 0 0 4px rgba(20,164,111,.12)}.log{background:#0c1624;color:#d8e6f6;border-radius:12px;padding:13px;min-height:210px;max-height:360px;overflow:auto;font:13px/1.55 Consolas,"Microsoft YaHei",monospace;white-space:pre-wrap;word-break:break-all}.rx{color:#58b8ff}.tx{color:#60dfa8}.err{color:#ff8c86}.meta{color:#91a5bd}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tool-card{padding:20px;display:flex;flex-direction:column;min-height:245px}.tool-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#e7f3ff;color:#075eae;font-size:24px;font-weight:900}.tool-card h2{font-size:20px;margin:14px 0 7px}.tool-card p{color:var(--muted);margin:0 0 14px;flex:1}.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px}.tag{font-size:12px;background:#eef4fa;color:#49627d;border-radius:14px;padding:3px 8px}.tool-card .btn{text-decoration:none;text-align:center}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:620px}.table th,.table td{border-bottom:1px solid var(--line);padding:9px;text-align:left}.table th{background:#f4f8fc;color:#4d6278}.sensor-card{background:#f8fbfe;border:1px solid var(--line);border-radius:12px;padding:14px}.sensor-card.offline{opacity:.65;border-color:#e1a6a1}.chart-wrap{height:410px;background:#fff;border:1px solid var(--line);border-radius:12px;position:relative;overflow:hidden}.chart-wrap canvas{width:100%;height:100%;display:block}.kbd{font:12px Consolas,monospace;background:#edf2f7;border:1px solid #d5e0eb;border-bottom-width:2px;border-radius:5px;padding:2px 6px}.footer{background:#09294b;color:#d5e5f5;padding:26px 20px;text-align:center}.footer a{color:#fff}.hidden{display:none!important}.small{font-size:12px;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric{background:#f7fbff;border:1px solid var(--line);border-radius:12px;padding:12px}.metric strong{display:block;font-size:24px;color:#075eae;line-height:1.25}.metric span{font-size:12px;color:var(--muted)}.task-list{display:grid;gap:9px}.task-item{display:grid;grid-template-columns:36px minmax(105px,1.3fr) repeat(5,minmax(76px,1fr)) 72px;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:12px;background:#f9fcff}.task-item .field label{font-size:11px}.task-actions{display:flex;gap:5px}.task-actions .btn{padding:8px}.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:13px;background:#eaf2fa;color:#46627e;font-size:12px}.pill.ok{background:#e5f8ef;color:#087f5b}.pill.bad{background:#ffebe9;color:#b42318}.switch{display:inline-flex;align-items:center;gap:7px;font-size:13px}.switch input{width:17px;height:17px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.codebox{font:13px/1.55 Consolas,monospace;background:#f3f7fb;border:1px solid var(--line);border-radius:9px;padding:10px;word-break:break-all}.split-tabs{display:flex;gap:7px;flex-wrap:wrap}.split-tabs button.active{background:#0768b7;color:#fff}.wave-legend{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}.wave-legend span{font-size:12px;display:inline-flex;align-items:center;gap:5px}.wave-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}.help-list{margin:0;padding-left:20px;color:var(--muted)}
@media(max-width:1050px){.task-item{grid-template-columns:32px repeat(3,minmax(85px,1fr))}.task-item .wide{grid-column:span 2}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.col-3,.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 12}.head-nav{display:none}.chart-wrap{height:330px}}
@media(max-width:600px){.head-inner,.hero-inner,.container{padding-left:14px;padding-right:14px}.brand strong{font-size:17px}.brand small{display:none}.brand-mark{width:40px;height:40px}.tool-grid{grid-template-columns:1fr}.panel{padding:14px}.btn{width:100%}.row .status{width:auto}.hero-inner{padding-top:28px;padding-bottom:28px}.table{min-width:540px}.metric-grid{grid-template-columns:1fr 1fr}.task-item{grid-template-columns:1fr 1fr}.task-item .wide{grid-column:span 2}.task-actions{grid-column:span 2}.task-actions .btn{width:auto}}