:root{--bg:#f4f6f8;--surface:#fff;--ink:#18212b;--muted:#65717f;--line:#dce2e7;--nav:#172128;--nav-2:#24323a;--cyan:#087f8c;--cyan-soft:#e7f5f6;--green:#18845a;--green-soft:#eaf7f1;--amber:#b66a0b;--amber-soft:#fff3df;--red:#c13c45;--red-soft:#fff0f1;--blue:#3568c0;--shadow:0 8px 24px rgba(25,35,43,.07)}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #8bcbd0;outline-offset:2px}a{color:inherit;text-decoration:none}
.app{min-height:100vh;display:grid;grid-template-columns:228px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;background:#fff;color:#24313d;border-right:1px solid #dce2e7;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px;border-bottom:1px solid #e5e9ed}.brand-mark{display:grid;width:36px;height:36px;place-items:center;border-radius:7px;background:linear-gradient(145deg,#1f5eff,#087f8c);color:#fff;font-weight:900;box-shadow:0 5px 14px rgba(31,94,255,.2)}.brand strong{display:block;color:#17212b;font-size:14px}.brand small{display:block;margin-top:1px;color:#73808b;font-size:11px}.nav{display:grid;gap:6px;padding-top:18px}.nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:6px;color:#586673}.nav a:hover{background:#f1f5fb;color:#214d86}.nav a.active{color:#174e96;background:#eaf1ff;box-shadow:inset 3px 0 #1f5eff;font-weight:700}.nav-icon{width:20px;text-align:center;color:#3474a8;font-size:14px}.nav-group{padding:3px 0}.nav-parent{display:flex;align-items:center;gap:10px;padding:8px 11px 5px;color:#273846;font-size:13px;font-weight:750}.nav-group.active .nav-parent{color:#174e96}.subnav{display:grid;gap:2px;margin-left:20px;padding-left:12px;border-left:1px solid #dfe5ea}.subnav a{padding:7px 9px;font-size:12px}.subnav a.active{box-shadow:none}.server-state{margin-top:auto;padding:12px 10px;border-top:1px solid #e5e9ed;color:#73808b;font-size:12px}.server-state b{display:flex;align-items:center;gap:7px;color:#34424d}.dot{width:8px;height:8px;border-radius:50%;background:#829097}.dot.ok{background:#24a56d;box-shadow:0 0 0 3px rgba(36,165,109,.14)}
.nav a.portal{margin-top:12px;padding-top:15px;border-top:1px solid #e5e9ed;border-radius:0}.content{min-width:0}.topbar{height:72px;padding:0 26px;color:#fff;background:linear-gradient(120deg,#162a55,#1f5eff);box-shadow:0 4px 18px rgba(20,43,92,.2);display:flex;align-items:center;justify-content:space-between;gap:16px}.title h1{margin:0;font-size:14px;line-height:1.2;letter-spacing:0}.title p{margin:3px 0 0;color:#dbe5ff;font-size:12px;line-height:1.4}.top-actions{display:flex;align-items:center;gap:8px}.topbar .btn.subtle{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}.topbar .btn.subtle:hover{background:rgba(255,255,255,.2)}.port-badge{padding:5px 9px;border:1px solid rgba(255,255,255,.4);border-radius:5px;color:#eef3ff;background:rgba(255,255,255,.08);font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.main{max-width:1680px;margin:auto;padding:20px 24px 32px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.stat{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:7px}.stat span{color:var(--muted);font-size:12px}.stat strong{display:block;margin-top:2px;font-size:14px;line-height:1.15}.stat small{color:var(--muted)}
.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px;background:#fff;border:1px solid var(--line);border-radius:7px;margin-bottom:14px}.search{position:relative;min-width:240px;flex:1}.search input{width:100%;height:36px;padding:7px 10px 7px 34px;border:1px solid #cbd4da;border-radius:5px;background:#fbfcfd}.search::before{content:"⌕";position:absolute;left:11px;top:4px;color:#788691;font-size:14px}.btn{height:36px;padding:0 12px;border:1px solid #cbd4da;border-radius:5px;background:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:650;white-space:nowrap}.btn:hover{background:#f6f8f9}.btn.primary{color:#fff;background:var(--cyan);border-color:var(--cyan)}.btn.success{color:#fff;background:var(--green);border-color:var(--green)}.btn.danger{color:#fff;background:var(--red);border-color:var(--red)}.btn.warn{color:#fff;background:var(--amber);border-color:var(--amber)}.btn.subtle{color:var(--cyan);background:var(--cyan-soft);border-color:#b7dade}.btn:disabled{cursor:not-allowed;opacity:.42}.button-separator{width:1px;height:24px;background:var(--line)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 9px}.section-head h2{margin:0;font-size:14px}.section-head span{color:var(--muted);font-size:12px}.device-list{display:grid;gap:10px}.empty{padding:55px 20px;text-align:center;color:var(--muted);background:#fff;border:1px dashed #bdc8ce;border-radius:7px}.device{background:#fff;border:1px solid var(--line);border-left:3px solid #aeb8bf;border-radius:7px;overflow:hidden;box-shadow:0 2px 10px rgba(25,35,43,.03)}.device.online{border-left-color:var(--green)}.device.alerting{border-left-color:var(--red)}.device-head{display:grid;grid-template-columns:minmax(230px,1.2fr) minmax(160px,.75fr) auto;align-items:center;gap:12px;padding:10px 13px;background:#fafbfc;border-bottom:1px solid #e8ecef}.device-id{display:flex;align-items:center;gap:9px;min-width:0}.device-id input{width:16px;height:16px}.device-id strong{font:700 14px ui-monospace,SFMono-Regular,Menlo,monospace}.device-name{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status{display:inline-flex;align-items:center;gap:6px;font-weight:700}.status.online{color:var(--green)}.status.offline{color:#7d8992}.status.alarm{color:var(--red)}.device-times{color:var(--muted);font-size:12px}.device-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}.device-actions .btn{height:31px;padding:0 9px;font-size:12px}.device-body{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(480px,1.35fr);gap:0}.facts{padding:13px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-right:1px solid var(--line)}.fact span{display:block;color:var(--muted);font-size:11px}.fact b{display:block;margin-top:2px;font-size:14px}.fact b.good{color:var(--green)}.fact b.bad{color:var(--red)}.phase-table{width:100%;border-collapse:collapse;text-align:right}.phase-table th,.phase-table td{padding:6px 10px;border-bottom:1px solid #edf0f2}.phase-table th{color:var(--muted);background:#f7f9fa;font-size:11px;font-weight:650}.phase-table th:first-child,.phase-table td:first-child{text-align:left}.phase-table tr:last-child td{border-bottom:0}.meter-foot{display:flex;gap:17px;flex-wrap:wrap;padding:7px 13px;color:var(--muted);background:#fafbfc;border-top:1px solid var(--line);font-size:11px}.meter-foot b{color:#45515b}.plan-progress{padding:7px 13px;color:#52616b;background:var(--amber-soft);border-top:1px solid #f1dbb9;font-size:12px}
.activity{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}.activity-head{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid var(--line)}.activity-head h2{margin:0;font-size:14px}.activity-list{max-height:270px;overflow:auto;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.activity-row{display:grid;grid-template-columns:150px 34px 132px minmax(140px,1fr) minmax(230px,2fr);gap:8px;padding:7px 12px;border-bottom:1px solid #edf0f2}.activity-row:last-child{border-bottom:0}.activity-row .rx{color:var(--green)}.activity-row .tx{color:var(--blue)}.activity-row code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#5b6872}
dialog{width:min(560px,calc(100vw - 28px));padding:0;border:0;border-radius:8px;box-shadow:0 24px 70px rgba(15,23,28,.28)}dialog::backdrop{background:rgba(20,29,34,.5)}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;border-bottom:1px solid var(--line)}.dialog-head h2{margin:0;font-size:14px}.icon-btn{width:32px;height:32px;padding:0;border:0;background:transparent;border-radius:4px;font-size:14px}.icon-btn:hover{background:#f0f3f5}.dialog-body{padding:17px;display:grid;gap:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:650}.field.full{grid-column:1/-1}.field input,.field select,.field textarea{width:100%;min-height:38px;padding:8px 10px;background:#fff;border:1px solid #cbd4da;border-radius:5px}.field textarea{min-height:110px;resize:vertical;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.dialog-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 17px;background:#f7f9fa;border-top:1px solid var(--line)}.toast{position:fixed;z-index:50;right:22px;bottom:22px;max-width:420px;padding:10px 14px;color:#fff;background:#233039;border-radius:6px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.18s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:var(--red)}
.parser-layout{display:grid;grid-template-columns:minmax(360px,.75fr) minmax(500px,1.25fr);gap:14px}.tool-view[hidden]{display:none}.tool-grid{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(440px,1.2fr);gap:14px}.panel{background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:14px}.panel-body{padding:14px}.tool-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tool-form .full{grid-column:1/-1}.tool-form-actions{display:flex;justify-content:flex-end;gap:8px;grid-column:1/-1}.hex-input{width:100%;min-height:210px;padding:13px;resize:vertical;color:#dce8e8;background:#142126;border:1px solid #142126;border-radius:5px;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.tool-form textarea.hex-input{color:#dce8e8;background:#142126;border-color:#142126}.hex-input.json-input{min-height:360px;text-transform:none}.hex-output{min-height:180px;text-transform:uppercase}.parser-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}.parse-status{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:5px;margin-bottom:12px;font-weight:700}.parse-status.ok{color:var(--green);background:var(--green-soft)}.parse-status.error{color:var(--red);background:var(--red-soft)}.notice{padding:11px 12px;color:#42516d;background:#f7f9fc;border:1px dashed #cdd6e4;border-radius:6px}.hint{color:var(--muted);font-size:12px}.frame-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.summary-cell{padding:9px;background:#f6f8f9;border-radius:5px}.summary-cell span{display:block;color:var(--muted);font-size:11px}.summary-cell b{display:block;margin-top:2px;overflow-wrap:anywhere}.field-table{width:100%;border-collapse:collapse}.field-table th,.field-table td{padding:8px;border-bottom:1px solid #e8ecef;text-align:left;vertical-align:top}.field-table th{color:var(--muted);background:#f7f9fa;font-size:11px}.field-table code{font-size:11px;word-break:break-all}.decoded{margin-top:12px;padding:12px;color:#dce8e8;background:#142126;border-radius:5px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}details{margin-top:8px;border:1px solid var(--line);border-radius:5px}details summary{padding:8px 10px;cursor:pointer;font-weight:650}details .decoded{margin:0;border-radius:0 0 5px 5px}.reference{display:grid;gap:8px}.ref-row{display:grid;grid-template-columns:76px 100px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid #edf0f2}.ref-row:last-child{border-bottom:0}.ref-row code{color:var(--cyan);font-weight:700}.result-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.result-meta span{padding:4px 8px;color:#334451;background:#eef2f5;border-radius:4px;font-size:12px}.binding-layout{display:grid;grid-template-columns:minmax(440px,1.25fr) minmax(320px,.75fr);gap:14px}.binding-list{display:grid;gap:8px;margin-top:12px}.binding-meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:6px}.binding-meter input{width:16px;height:16px}.binding-meter small{display:block;color:var(--muted)}.binding-meter .status{font-size:12px}.binding-summary{position:sticky;top:92px;align-self:start}.anchor-target{scroll-margin-top:92px}
@media(max-width:1100px){.device-head{grid-template-columns:1fr auto}.device-times{display:none}.device-body{grid-template-columns:1fr}.facts{border-right:0;border-bottom:1px solid var(--line)}.parser-layout,.tool-grid,.binding-layout{grid-template-columns:1fr}}
@media(max-width:720px){.app{display:block}.sidebar{position:static;width:100%;height:auto;display:block;padding:9px}.brand{display:none}.nav{display:flex;align-items:stretch;padding:0;overflow:auto}.nav-main,.nav-group{flex:0 0 auto}.nav-parent{display:none}.subnav{display:flex;gap:3px;margin:0;padding:0;border:0}.nav a{min-width:max-content}.nav-label{display:inline}.server-state{display:none}.topbar{height:72px;padding:0 14px;align-items:center}.topbar .top-actions{display:none}.port-badge{display:none}.main{padding:12px}.stats{grid-template-columns:repeat(2,1fr)}.device-head{display:flex;align-items:flex-start;flex-direction:column}.device-actions{justify-content:flex-start}.facts{grid-template-columns:repeat(2,1fr)}.phase-table{font-size:12px}.frame-summary{grid-template-columns:repeat(2,1fr)}.form-grid,.tool-form{grid-template-columns:1fr}.field.full,.tool-form .full{grid-column:auto}.activity-row{grid-template-columns:110px 30px 1fr}.activity-row>:nth-child(4),.activity-row>:nth-child(5){grid-column:1/-1}.binding-summary{position:static}}
.toast{left:50%;right:auto;top:20%;bottom:auto;max-width:min(560px,calc(100vw - 32px));transform:translate(-50%,-8px);text-align:center}.toast.show{transform:translate(-50%,0)}