:root{--primary:#005bbf;--primary-hover:#004b9d;--primary-soft:#e2ecff;--primary-pale:#f3f7ff;--green:#087b3a;--green-soft:#ddf6e6;--ink:#171a1f;--muted:#606875;--subtle:#858c97;--canvas:#f7f8fc;--surface:#fff;--surface-low:#f1f2f6;--line:#dfe2e9;--line-strong:#c8ccd5;--danger:#b3261e;--shadow:0 12px 32px rgba(35,48,71,.08);--sidebar:232px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:50;display:flex;flex-direction:column;padding:24px 16px;background:#fbfbfd;border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 26px}.brand>span:last-child{display:flex;flex-direction:column}.brand strong{font-size:18px;line-height:1.2;letter-spacing:-.03em}.brand small{margin-top:4px;color:var(--subtle);font:700 9px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em}.brand-mark{width:38px;height:38px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:10px;background:var(--primary);box-shadow:0 6px 16px rgba(0,91,191,.22)}.brand-mark i{display:block;width:3px;border-radius:4px;background:#fff}.brand-mark i:nth-child(1){height:9px}.brand-mark i:nth-child(2){height:18px}.brand-mark i:nth-child(3){height:13px}.brand-mark.small{width:30px;height:30px;border-radius:8px}.side-nav{display:flex;flex-direction:column;gap:5px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border:0;border-radius:9px;background:transparent;color:#555e6b;font-size:14px;text-align:left;transition:.18s ease}.nav-item:hover{background:var(--surface-low);color:var(--ink)}.nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:700}.nav-icon{width:20px;text-align:center;font-size:18px}.node-card{display:grid;grid-template-columns:36px 1fr 8px;gap:10px;align-items:center;margin-top:auto;padding:18px 4px 0;border-top:1px solid var(--line)}.node-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#e7e9ee;color:#4e5765;font-size:11px;font-weight:800}.node-card>span:nth-child(2){display:flex;min-width:0;flex-direction:column}.node-card strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-card small{margin-top:3px;color:var(--subtle);font-size:10px}.status-dot{width:8px;height:8px;border-radius:50%;background:#a5abb4}.status-dot.online{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.main-canvas{min-height:100vh;margin-left:var(--sidebar)}.topbar{position:sticky;top:0;z-index:40;height:68px;display:flex;align-items:center;gap:26px;padding:0 30px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.page-heading{min-width:160px}.page-heading h1{margin:0;font-size:17px;letter-spacing:-.01em}.page-heading span{display:block;margin-top:2px;color:var(--subtle);font-size:10px}.mobile-brand{display:none}.global-search{position:relative;display:flex;align-items:center;flex:1;max-width:620px}.global-search>span{position:absolute;left:13px;color:#66707d;font-size:21px}.global-search input{width:100%;height:40px;padding:0 64px 0 40px;border:1px solid transparent;border-radius:9px;outline:0;background:var(--surface-low);color:var(--ink);font-size:13px;transition:.18s}.global-search input:focus{border-color:#9dbfea;background:#fff;box-shadow:0 0 0 3px rgba(0,91,191,.1)}.global-search kbd{position:absolute;right:10px;padding:3px 7px;border:1px solid #d4d7de;border-radius:5px;background:#fff;color:#7a818b;font:10px ui-monospace,monospace}.top-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.online-state{display:flex;align-items:center;gap:7px;color:var(--green);font-size:11px;font-weight:700;white-space:nowrap}.online-state i,.live-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.icon-button{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#515a67;font-size:20px;transition:.18s}.icon-button:hover{border-color:#a9c4e8;color:var(--primary);transform:rotate(18deg)}.primary-button{min-height:36px;padding:0 16px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:12px;font-weight:700;box-shadow:0 4px 10px rgba(0,91,191,.18);transition:.18s}.primary-button:hover{background:var(--primary-hover);transform:translateY(-1px)}
.content-canvas{width:min(1480px,100%);margin:0 auto;padding:28px 30px 52px}.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}.section-title-row h2{margin:4px 0 0;font-size:20px;letter-spacing:-.035em}.section-title-row>p{margin:0;color:var(--subtle);font-size:11px}.eyebrow{margin:0;color:var(--primary);font:800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric-card{position:relative;min-height:116px;padding:18px 20px;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:0 4px 14px rgba(40,51,72,.035)}.metric-card span,.metric-card small{display:block}.metric-card span{color:var(--muted);font-size:11px;font-weight:650}.metric-card strong{display:block;margin-top:8px;font-size:30px;line-height:1;letter-spacing:-.05em}.metric-card small{margin-top:9px;color:var(--subtle);font-size:10px}.metric-glyph{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-low);color:#6b7481;font-style:normal;font-size:13px}.primary-metric{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(0,91,191,.18)}.primary-metric span,.primary-metric small{color:rgba(255,255,255,.76)}.primary-metric .metric-glyph{background:rgba(255,255,255,.16);color:#fff}.messages-section{margin-top:28px}.messages-title-row{margin-bottom:12px}.title-actions{display:none}.filter-bar{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}.filter-bar label{display:flex;flex-direction:column;gap:5px;min-width:150px}.filter-bar label>span{color:var(--subtle);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.filter-bar select{height:34px;padding:0 32px 0 10px;border:1px solid var(--line);border-radius:7px;outline:0;background:#f7f8fa;color:#3d4652;font-size:12px}.filter-bar select:focus{border-color:var(--primary)}.device-filter{min-width:220px!important}.reset-button{height:34px;margin-left:auto;padding:0 14px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#626a76;font-size:11px;font-weight:700}.reset-button:hover{border-color:#a9c4e8;color:var(--primary)}
.message-workspace{display:grid;grid-template-columns:minmax(360px,440px) minmax(440px,1fr);min-height:600px;height:calc(100vh - 360px);max-height:780px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)}.message-master{display:flex;min-width:0;flex-direction:column;border-right:1px solid var(--line)}.list-header{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:11px 16px;border-bottom:1px solid var(--line);background:#fbfbfd}.list-header>div{display:flex;flex-direction:column}.list-header strong{font-size:12px}.list-header span{margin-top:2px;color:var(--subtle);font-size:9px}.live-pill{display:flex!important;align-items:center;gap:7px;padding:5px 8px;border-radius:20px;background:var(--green-soft);color:var(--green)!important;font-size:9px!important;font-weight:750}.live-pill i{width:5px;height:5px;box-shadow:none}.message-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c7cbd2 transparent}.message-card{position:relative;padding:14px 16px;border-bottom:1px solid #ebedf1;background:#fff;cursor:pointer;transition:.16s}.message-card:hover{background:#f7f9fc}.message-card.selected{background:var(--primary-pale);box-shadow:inset 3px 0 0 var(--primary)}.message-card.unread:before{content:"";position:absolute;top:20px;left:7px;width:5px;height:5px;border-radius:50%;background:var(--primary)}.message-card-head{display:flex;align-items:flex-start;gap:8px}.message-card-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.sender-label{flex:none;padding:2px 6px;border-radius:4px;background:#e8effd;color:#275d9f;font-size:9px;font-weight:700}.message-card time{margin-left:auto;color:var(--subtle);font-size:9px;white-space:nowrap}.code-inline{display:flex;align-items:center;justify-content:space-between;margin:10px 0 8px;padding:8px 10px;border:1px solid #dce8fa;border-radius:7px;background:#f6f9ff}.code-inline span{display:flex;flex-direction:column;color:var(--subtle);font-size:8px;font-weight:700;text-transform:uppercase}.code-inline strong{margin-top:2px;color:var(--primary);font:800 19px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.copy-code{padding:5px 9px;border:0;border-radius:6px;background:var(--primary);color:#fff;font-size:9px;font-weight:700}.message-preview{display:-webkit-box;margin:7px 0 10px;overflow:hidden;color:#515966;font-size:11px;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical}.message-meta{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid #eef0f3;color:var(--subtle);font-size:9px}.message-meta .device-name{color:#376da8}.pagination{display:flex;align-items:center;justify-content:center;gap:14px;min-height:46px;border-top:1px solid var(--line);background:#fbfbfd}.pagination button{padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#59616d;font-size:9px;font-weight:700}.pagination button:disabled{opacity:.35;cursor:default}.pagination span{color:var(--subtle);font:10px ui-monospace,monospace}.empty-state{display:grid;place-items:center;align-content:center;flex:1;padding:40px;text-align:center}.empty-state[hidden]{display:none}.empty-state .empty-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:12px;border-radius:50%;background:var(--surface-low);color:#8b929c;font-size:24px}.empty-state strong{font-size:14px}.empty-state p{max-width:260px;margin:6px 0 0;color:var(--subtle);font-size:11px;line-height:1.55}
.detail-pane{position:relative;min-width:0;min-height:0;height:100%;overflow-y:auto;background:#fbfbfd}.detail-close{display:none}.detail-empty{display:grid;place-items:center;align-content:center;height:100%;padding:60px;text-align:center}.detail-empty[hidden],.detail-content[hidden],.code-panel[hidden]{display:none}.detail-empty-mark{display:grid;place-items:center;width:76px;height:76px;margin-bottom:18px;border:1px dashed #aebdd0;border-radius:20px;background:#f3f7fc;color:#6281a9;font:800 15px ui-monospace,monospace;letter-spacing:.08em}.detail-empty h3{margin:0;font-size:17px}.detail-empty p{max-width:280px;margin:8px 0 0;color:var(--subtle);font-size:11px;line-height:1.6}.detail-content{padding:28px}.detail-sender{display:flex;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid var(--line)}.sender-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:14px;font-weight:800}.detail-sender p{margin:0 0 3px;color:var(--primary);font-size:9px;font-weight:800;letter-spacing:.08em}.detail-sender h3{margin:0;font-size:18px}.detail-sender div>span{display:block;margin-top:4px;color:var(--subtle);font-size:10px}.code-panel{margin:24px 0;padding:22px;border:1px dashed #9bbce4;border-radius:14px;background:#f5f8fe;text-align:center}.code-panel>span,.body-panel>span,.metadata-grid span{display:block;color:var(--subtle);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.code-panel button{display:block;margin:10px auto 7px;padding:0;border:0;background:none;color:var(--primary);font:850 clamp(30px,4vw,46px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em}.code-panel small{color:#7c8490;font-size:9px}.body-panel{padding:20px;border:1px solid var(--line);border-radius:10px;background:#fff}.body-panel p{margin:10px 0 0;white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.8}.metadata-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.metadata-grid>div{padding:14px;border:1px solid var(--line);border-radius:9px;background:#fff}.metadata-grid strong{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;color:#424a55;font-size:10px;white-space:nowrap}.bottom-nav{display:none}.toast{position:fixed;right:24px;bottom:24px;z-index:200;max-width:320px;padding:11px 16px;border-radius:8px;background:#252a31;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.2);font-size:11px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translateY(0)}
dialog{border:0}.login-dialog{width:min(420px,calc(100% - 30px));padding:0;border-radius:14px;box-shadow:0 24px 80px rgba(19,31,50,.28)}.login-dialog::backdrop{background:rgba(20,28,39,.62);backdrop-filter:blur(4px)}.login-dialog form{padding:30px}.login-mark{display:grid;place-items:center;width:58px;height:58px;margin-bottom:22px;border-radius:15px;background:var(--primary-pale)}.login-dialog h2{margin:8px 0 8px;font-size:23px;letter-spacing:-.04em}.login-dialog form>p:not(.eyebrow):not(.form-error){margin:0 0 22px;color:var(--muted);font-size:12px;line-height:1.65}.login-dialog label span{display:block;margin-bottom:6px;color:#616a76;font-size:10px;font-weight:700}.login-dialog input{width:100%;height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;outline:0}.login-dialog input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,91,191,.1)}.login-button{width:100%;height:42px;margin-top:12px}.form-error{min-height:16px;margin:8px 0 0!important;color:var(--danger)!important;font-size:10px!important}
@media(max-width:1120px){.metric-grid{grid-template-columns:repeat(2,1fr)}.message-workspace{grid-template-columns:380px minmax(360px,1fr);height:calc(100vh - 470px);min-height:560px}.online-state{display:none}.device-filter{min-width:170px!important}}
@media(max-width:900px){:root{--sidebar:0px}.sidebar{display:none}.main-canvas{margin-left:0}.topbar{height:62px;padding:0 16px}.mobile-brand{display:flex;align-items:center;gap:9px;font-size:14px}.page-heading,.global-search kbd,.desktop-export{display:none}.global-search{max-width:none}.top-actions{gap:8px}.content-canvas{padding:20px 16px 94px}.message-workspace{display:block;height:auto;max-height:none;min-height:0;border-radius:11px}.message-master{min-height:520px;border-right:0}.message-list{max-height:none;overflow:visible}.detail-pane{position:fixed;inset:0;z-index:100;display:none;background:#f8f9fc}.detail-pane.open{display:block;animation:panelIn .2s ease-out}.detail-close{position:fixed;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#fff;color:#4d5662;font-size:22px}.detail-content{max-width:680px;margin:0 auto;padding:70px 20px 32px}.detail-empty{display:none}.bottom-nav{position:fixed;inset:auto 0 0;z-index:80;display:flex;justify-content:space-around;height:70px;padding:6px max(10px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border-top:1px solid var(--line);background:rgba(255,255,255,.96);box-shadow:0 -8px 24px rgba(30,42,60,.06);backdrop-filter:blur(15px)}.bottom-nav button{display:flex;min-width:76px;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:18px;background:transparent;color:#747c87;font-size:9px;font-weight:700}.bottom-nav button span{font-size:19px}.bottom-nav button.active{background:var(--green-soft);color:var(--green)}@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(max-width:640px){.topbar{gap:12px}.mobile-brand strong{display:none}.top-actions .icon-button{display:none}.global-search input{height:38px;padding-right:12px;font-size:11px}.content-canvas{padding-top:16px}.overview-section .section-title-row{align-items:flex-start}.section-title-row h2{font-size:18px}.metric-grid{grid-template-columns:repeat(2,1fr);gap:8px}.metric-card{min-height:104px;padding:14px}.metric-card strong{font-size:26px}.metric-glyph{right:12px;top:12px;width:25px;height:25px}.messages-section{margin-top:23px}.title-actions{display:flex;gap:7px}.filter-trigger{height:31px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#525b67;font-size:10px;font-weight:700}.filter-bar{display:none;align-items:stretch;flex-direction:column;padding:14px}.filter-bar.open{display:flex}.filter-bar label,.filter-bar .device-filter{min-width:0!important}.filter-bar select{width:100%}.reset-button{margin-left:0}.message-workspace{margin:0 -4px;border:0;background:transparent;box-shadow:none}.message-master{min-height:430px;border:0;background:transparent}.list-header{min-height:48px;padding:8px 5px;border:0;background:transparent}.message-list{display:flex;flex-direction:column;gap:9px}.message-card{padding:14px;border:1px solid var(--line);border-radius:11px;box-shadow:0 3px 10px rgba(38,48,67,.04)}.message-card.selected{box-shadow:inset 3px 0 0 var(--primary),0 3px 10px rgba(38,48,67,.04)}.message-card.unread:before{left:8px}.message-card-head strong{font-size:13px}.code-inline{margin-top:11px;padding:9px 10px}.code-inline strong{font-size:21px}.message-preview{font-size:11px}.pagination{margin-top:10px;border:0;border-radius:9px}.detail-sender{padding-right:40px}.code-panel button{font-size:32px}.metadata-grid{grid-template-columns:1fr}.toast{right:14px;bottom:84px;left:14px;max-width:none;text-align:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}