:root { color-scheme:light; --ink:#18202b; --muted:#6d7480; --line:#e5e8ed; --soft:#f5f7fa; --sidebar:#eef3fb; --blue:#3769e8; --blue-soft:#eaf0ff; --red:#c43f58; --green:#168454; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f8f9fb; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; }
.hidden { display:none !important; }
.admin-shell { width:min(1240px,calc(100% - 36px)); min-height:calc(100vh - 48px); display:grid; grid-template-columns:260px minmax(0,1fr); margin:24px auto; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 16px 50px rgba(34,45,67,.07); }
.admin-sidebar { display:flex; flex-direction:column; min-height:calc(100vh - 50px); padding:24px 16px; background:var(--sidebar); border-right:1px solid #dfe5ef; }
.brand { display:flex; align-items:center; gap:11px; padding:0 8px; color:var(--ink); text-decoration:none; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; flex:none; color:#fff; background:var(--blue); border-radius:8px; font-size:13px; font-weight:800; }
.brand b,.brand small { display:block; letter-spacing:0; }.brand b{font-size:15px}.brand small{margin-top:2px;color:var(--muted);font-size:11px;font-weight:500}
.admin-user { margin:24px 8px 18px; padding:12px; color:#40506a; background:rgba(255,255,255,.58); border:1px solid rgba(115,135,168,.18); border-radius:7px; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.admin-sidebar nav { display:grid; gap:4px; }
.nav-item,.back-link { min-height:42px; display:flex; align-items:center; width:100%; padding:0 13px; color:#57647a; background:transparent; border:0; border-radius:6px; text-align:left; text-decoration:none; cursor:pointer; }
.nav-item:hover,.nav-item.active { color:#244caf; background:rgba(255,255,255,.82); font-weight:700; }
.back-link { margin-top:auto; color:#667085; }
.admin-main { position:relative; min-width:0; padding:32px; }
.mobile-head { display:none; }
.page-head { min-height:56px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
h1,h2,p { letter-spacing:0; }.page-head h1{margin:0;font-size:25px}.page-head p{margin:7px 0 0;color:var(--muted);font-size:13px}.block-head h2{margin:0;font-size:15px}
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.metric { min-height:104px; padding:18px; background:var(--soft); border:1px solid var(--line); border-radius:7px; }
.metric span { display:block; color:var(--muted); font-size:12px; }.metric strong{display:block;margin-top:10px;font-size:27px;line-height:1}
.block { background:#fff; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.block-head { padding:16px 18px; border-bottom:1px solid var(--line); }
.table-wrap { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { padding:11px 14px; color:#687386; background:#f7f8fa; border-bottom:1px solid var(--line); text-align:left; font-size:11px; font-weight:700; white-space:nowrap; }
td { max-width:290px; padding:13px 14px; border-bottom:1px solid #edf0f3; vertical-align:top; }
tr:last-child td { border-bottom:0; }
.primary-text { font-weight:650; }.secondary-text{display:block;margin-top:4px;color:var(--muted);font-size:11px;overflow-wrap:anywhere}.comment-text{min-width:230px;line-height:1.45}.empty{text-align:center;color:var(--muted);padding:36px}
.tag { display:inline-flex; min-height:23px; align-items:center; padding:0 8px; color:#586477; background:#eef1f5; border-radius:12px; font-size:11px; white-space:nowrap; }
.tag.published,.tag.active { color:var(--green); background:#eaf8f1; }.tag.hidden,.tag.banned{color:var(--red);background:#fff0f2}.tag.pending{color:#936218;background:#fff7e5}.tag.admin{color:#315bc6;background:var(--blue-soft)}
.actions { display:flex; flex-wrap:wrap; gap:6px; min-width:145px; }
.button,.mini-button { color:#364152; background:#fff; border:1px solid #d9dee6; border-radius:6px; cursor:pointer; white-space:nowrap; }
.button { min-height:38px; padding:0 14px; }.mini-button{min-height:29px;padding:0 9px;font-size:11px}.button:hover,.mini-button:hover{border-color:#9cabbe}.button.primary{color:#fff;background:var(--blue);border-color:var(--blue)}.mini-button.danger{color:var(--red)}
.toolbar { display:grid; grid-template-columns:minmax(220px,440px) auto; gap:8px; margin-bottom:14px; justify-content:start; }.toolbar-wide{grid-template-columns:minmax(220px,440px) 130px auto}
input,select { height:40px; padding:0 12px; color:var(--ink); background:#fff; border:1px solid #d9dee6; border-radius:6px; outline:none; }input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(55,105,232,.1)}
.access-error { max-width:520px; margin:15vh auto; padding:34px; border:1px solid var(--line); border-radius:8px; text-align:center; }.access-error h1{font-size:22px}.access-error p{color:var(--muted)}.access-error a{color:var(--blue)}
.toast { position:fixed; right:24px; bottom:24px; max-width:360px; padding:12px 16px; color:#fff; background:#263142; border-radius:7px; box-shadow:0 8px 30px rgba(0,0,0,.2); font-size:13px; }
@media(max-width:850px){.admin-shell{width:100%;min-height:100vh;margin:0;border:0;border-radius:0;grid-template-columns:1fr}.admin-sidebar{position:fixed;z-index:20;inset:0 auto 0 0;width:260px;transform:translateX(-100%);transition:transform .2s;box-shadow:8px 0 30px rgba(20,31,50,.18)}body.menu-open .admin-sidebar{transform:translateX(0)}.admin-main{padding:18px 14px}.mobile-head{height:46px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.mobile-head button{min-height:34px;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:5px}.metrics{grid-template-columns:repeat(2,1fr)}.toolbar,.toolbar-wide{grid-template-columns:1fr auto}.toolbar-wide select{grid-column:1/2}.page-head h1{font-size:22px}}
@media(max-width:480px){.metrics{grid-template-columns:1fr 1fr}.metric{min-height:88px;padding:14px}.metric strong{font-size:23px}.page-head{margin-bottom:18px}td{padding:11px 10px}}

/* Modern admin workspace */
body { background:#eef3f7; }
.admin-shell { width:min(1380px,calc(100% - 40px)); grid-template-columns:248px minmax(0,1fr); border-color:#dde5eb; box-shadow:0 18px 48px rgba(39,60,75,.1); }
.admin-sidebar { padding:24px 16px; background:#fff; border-right:1px solid #e4eaf0; }
.brand-icon { width:42px; height:42px; flex:none; object-fit:contain; }
.admin-user { background:#f6f8fa; border-color:#e5e9ee; }
.nav-item,.back-link { min-height:44px; }
.nav-item:hover,.nav-item.active { color:#2459be; background:#edf4ff; }
.admin-main { padding:32px 34px 46px; background:#f4f6f8; }
.page-head { align-items:center; }
.page-head h1 { font-size:24px; font-weight:760; }
.page-head p { color:#78838f; }
.metrics { gap:14px; }
.metric { min-height:108px; padding:20px; background:#fff; border-color:#e2e7ec; border-radius:8px; box-shadow:0 4px 14px rgba(42,59,72,.04); }
.metric strong { font-size:29px; }
.toolbar { width:100%; grid-template-columns:minmax(220px,1fr) auto; margin-bottom:16px; padding:12px; background:#fff; border:1px solid #e2e7ec; border-radius:8px; }
.toolbar-wide { grid-template-columns:minmax(220px,1fr) 150px auto; }
.toolbar input,.toolbar select { background:#f8fafb; }
.button,.mini-button { transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.button:hover,.mini-button:hover { border-color:#96acd0; box-shadow:0 3px 9px rgba(43,67,85,.08); transform:translateY(-1px); }
.block { overflow:visible; background:transparent; border:0; border-radius:0; }
.block-head { margin-bottom:12px; padding:0 2px; border:0; }
.table-wrap { overflow:visible; }
table { display:block; font-size:13px; }
thead { display:none; }
tbody { display:grid; gap:12px; }
tbody tr { display:grid; align-items:center; min-width:0; background:#fff; border:1px solid #e2e7ec; border-radius:8px; box-shadow:0 4px 14px rgba(42,59,72,.035); }
tbody td { min-width:0; max-width:none; padding:16px; border:0; overflow-wrap:anywhere; }
tbody td::before { display:block; margin-bottom:7px; color:#8a95a0; font-size:10px; font-weight:750; letter-spacing:0; }
tbody .empty { grid-column:1/-1; padding:42px; }
tbody .empty::before { display:none; }
.primary-text { font-size:14px; font-weight:720; }
.secondary-text { margin-top:5px; color:#7a8590; font-size:11px; }
.actions { min-width:0; justify-content:flex-end; }
.tag { border-radius:11px; }

#recent-comments tr { grid-template-columns:.75fr 1.45fr .8fr .65fr .85fr; }
#users-table tr { grid-template-columns:1.45fr .55fr .4fr .4fr .65fr 1.25fr; }
#comments-table tr { grid-template-columns:1.45fr .75fr .55fr .8fr 1.25fr; }
#oauth-table tr { grid-template-columns:1.05fr 1fr 1.35fr .55fr .55fr 1fr; }
#sessions-table tr { grid-template-columns:1.15fr 1.35fr .65fr .85fr .55fr; }
#audit-table tr { grid-template-columns:1.05fr .65fr .85fr 1.5fr .65fr .85fr; }

.hongmo-summary { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; padding:18px 20px; background:#fff; border:1px solid #dfe6ed; border-radius:8px; box-shadow:0 5px 16px rgba(42,59,72,.04); }
.hongmo-summary > div { display:grid; gap:9px; }
.hongmo-summary b { font-size:14px; }
.hongmo-summary small { color:#718198; font-size:11px; }
.hongmo-metrics .metric strong { font-size:23px; overflow-wrap:anywhere; }
.raw-json { min-height:180px; max-height:420px; margin:0; padding:14px; overflow:auto; color:#394557; background:#f7f9fb; border:1px solid #e2e7ec; border-radius:7px; font-size:12px; line-height:1.55; white-space:pre-wrap; }

#recent-comments td:nth-child(1)::before,#users-table td:nth-child(1)::before,#sessions-table td:nth-child(1)::before { content:"用户"; }
#recent-comments td:nth-child(2)::before,#comments-table td:nth-child(1)::before { content:"评论内容"; }
#recent-comments td:nth-child(3)::before,#comments-table td:nth-child(2)::before { content:"页面"; }
#recent-comments td:nth-child(4)::before,#comments-table td:nth-child(3)::before,#oauth-table td:nth-child(5)::before { content:"状态"; }
#recent-comments td:nth-child(5)::before,#comments-table td:nth-child(4)::before { content:"时间"; }
#users-table td:nth-child(2)::before { content:"角色"; }
#users-table td:nth-child(3)::before { content:"评论"; }
#users-table td:nth-child(4)::before { content:"会话"; }
#users-table td:nth-child(5)::before { content:"账号状态"; }
#users-table td:nth-child(6)::before,#comments-table td:nth-child(5)::before,#oauth-table td:nth-child(6)::before,#sessions-table td:nth-child(5)::before { content:"操作"; }
#oauth-table td:nth-child(1)::before { content:"应用"; }
#oauth-table td:nth-child(2)::before { content:"客户端 ID"; }
#oauth-table td:nth-child(3)::before { content:"回调地址"; }
#oauth-table td:nth-child(4)::before { content:"安全"; }
#sessions-table td:nth-child(2)::before { content:"设备"; }
#sessions-table td:nth-child(3)::before { content:"IP"; }
#sessions-table td:nth-child(4)::before { content:"到期时间"; }
#audit-table td:nth-child(1)::before { content:"管理员"; }
#audit-table td:nth-child(2)::before { content:"操作"; }
#audit-table td:nth-child(3)::before { content:"目标"; }
#audit-table td:nth-child(4)::before { content:"详情"; }
#audit-table td:nth-child(5)::before { content:"IP"; }
#audit-table td:nth-child(6)::before { content:"时间"; }
#friend-applications-table tr,#monitor-applications-table tr { grid-template-columns:1.15fr 1.45fr .55fr .75fr .85fr 1fr 1.1fr; }
#friend-applications-table td:nth-child(1)::before,#monitor-applications-table td:nth-child(1)::before { content:"申请人"; }
#friend-applications-table td:nth-child(2)::before,#monitor-applications-table td:nth-child(2)::before { content:"网站"; }
#friend-applications-table td:nth-child(3)::before { content:"类型"; }
#friend-applications-table td:nth-child(4)::before,#monitor-applications-table td:nth-child(3)::before { content:"状态"; }
#friend-applications-table td:nth-child(5)::before,#monitor-applications-table td:nth-child(5)::before { content:"提交时间"; }
#friend-applications-table td:nth-child(6)::before,#monitor-applications-table td:nth-child(6)::before { content:"备注"; }
#friend-applications-table td:nth-child(7)::before,#monitor-applications-table td:nth-child(7)::before { content:"操作"; }
#monitor-applications-table td:nth-child(4)::before { content:"验证"; }
.application-block + .application-block { margin-top:24px; }
.application-filter { display:flex; gap:6px; }
.application-filter button { min-height:28px; padding:0 9px; color:#718198; background:#fff; border:1px solid #dce4eb; border-radius:14px; cursor:pointer; font-size:11px; }
.application-filter button.active { color:#315bc6; background:#edf4ff; border-color:#cbdcff; font-weight:700; }
.block-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }

@media(max-width:1050px){
  #recent-comments tr,#users-table tr,#comments-table tr,#oauth-table tr,#sessions-table tr,#audit-table tr,#friend-applications-table tr,#monitor-applications-table tr { grid-template-columns:repeat(2,minmax(0,1fr)); }
  tbody td:last-child { grid-column:1/-1; }
  .actions { justify-content:flex-start; }
}
@media(max-width:850px){
  .admin-shell { width:100%; grid-template-columns:1fr; }
  .admin-main { padding:18px 14px 34px; }
  .toolbar,.toolbar-wide { grid-template-columns:1fr auto; }
  .toolbar-wide select { grid-column:1/2; }
}
@media(max-width:560px){
  .metrics { grid-template-columns:1fr 1fr; }
  #recent-comments tr,#users-table tr,#comments-table tr,#oauth-table tr,#sessions-table tr,#audit-table tr { grid-template-columns:1fr; }
  tbody td,tbody td:last-child { grid-column:1; padding:13px 15px; }
  .toolbar,.toolbar-wide { grid-template-columns:1fr; }
  .toolbar-wide select { grid-column:auto; }
  .hongmo-summary { align-items:flex-start; flex-direction:column; }
}

/* Website monitoring */
.monitor-status { min-height:74px; display:flex; align-items:center; gap:14px; margin-bottom:14px; padding:16px 18px; background:#fff; border:1px solid #e2e7ec; border-radius:8px; }
.monitor-status.healthy { border-left:4px solid #168454; }
.monitor-status.warning { border-left:4px solid #d0942b; }
.monitor-status.down { border-left:4px solid #c43f58; }
.status-dot { width:11px; height:11px; flex:none; background:#a7b0ba; border-radius:50%; box-shadow:0 0 0 5px rgba(167,176,186,.14); }
.healthy .status-dot { background:#19a368; box-shadow:0 0 0 5px rgba(25,163,104,.13); }
.warning .status-dot { background:#d0942b; box-shadow:0 0 0 5px rgba(208,148,43,.13); }
.down .status-dot { background:#cf4961; box-shadow:0 0 0 5px rgba(207,73,97,.13); }
.monitor-status b,.monitor-status small { display:block; }
.monitor-status b { font-size:14px; }
.monitor-status small { margin-top:4px; color:#77828e; font-size:11px; }
.monitor-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.monitor-metric { min-height:105px; padding:18px; background:#fff; border:1px solid #e2e7ec; border-radius:8px; box-shadow:0 4px 14px rgba(42,59,72,.035); }
.monitor-metric span { display:block; color:#77828e; font-size:11px; }
.monitor-metric strong { display:block; margin-top:11px; font-size:26px; line-height:1; }
.monitor-metric small { display:block; margin-top:9px; color:#8a95a0; font-size:10px; }
.metric-good strong { color:#168454; }
.metric-warn strong { color:#b47617; }
.metric-bad strong { color:#c43f58; }
.monitor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.monitor-card { min-width:0; padding:18px; background:#fff; border:1px solid #e2e7ec; border-radius:8px; box-shadow:0 4px 14px rgba(42,59,72,.035); }
.monitor-span-2 { grid-column:1/-1; }
.monitor-card-head { min-height:42px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.monitor-card-head h2 { margin:0; font-size:15px; }
.monitor-card-head p { margin:6px 0 0; color:#7d8792; font-size:11px; }
.monitor-legend { display:flex; align-items:center; gap:6px; color:#7d8792; font-size:10px; white-space:nowrap; }
.monitor-legend i { width:8px; height:8px; background:#3769e8; border-radius:50%; }
.monitor-chart { width:100%; height:190px; display:block; }
.vital-list,.host-list,.timing-list,.integration-list,.alert-list { display:grid; }
.vital-row,.host-row,.timing-row,.integration-row { min-height:48px; display:grid; align-items:center; gap:12px; border-top:1px solid #edf0f3; }
.vital-row:first-child,.host-row:first-child,.timing-row:first-child,.integration-row:first-child { border-top:0; }
.vital-row { grid-template-columns:46px 1fr auto; }
.vital-key { font-size:13px; font-weight:760; }
.vital-row span,.host-row span,.timing-row span,.integration-row span { color:#66717e; font-size:12px; }
.vital-row strong,.timing-row strong { font-size:13px; }
.quality { width:8px; height:8px; border-radius:50%; background:#a7b0ba; }
.quality.good { background:#19a368; }.quality.warn{background:#d0942b}.quality.bad{background:#cf4961}
.host-row { grid-template-columns:88px 1fr 42px; }
.host-row > span:first-child { overflow:hidden; text-overflow:ellipsis; font-weight:650; white-space:nowrap; }
.resource-track { height:7px; overflow:hidden; background:#edf1f4; border-radius:4px; }
.resource-track i { height:100%; display:block; background:#4f78dc; border-radius:4px; }
.resource-track i.warn { background:#d0942b; }.resource-track i.bad{background:#cf4961}
.host-source { margin:11px 0 2px; color:#88939e; font-size:10px; font-weight:750; text-transform:uppercase; }
.timing-row,.integration-row { grid-template-columns:1fr auto; }
.integration-state { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; }
.integration-state::before { width:7px; height:7px; content:""; background:#a7b0ba; border-radius:50%; }
.integration-state.on { color:#168454; }.integration-state.on::before{background:#19a368}
.alert-item { min-height:65px; display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:12px; border-top:1px solid #edf0f3; }
.alert-item:first-child { border-top:0; }
.alert-severity { width:8px; height:8px; background:#d0942b; border-radius:50%; }.alert-severity.critical{background:#cf4961}.alert-severity.resolved{background:#9ca6b0}
.alert-item b,.alert-item small { display:block; }
.alert-item b { font-size:12px; }.alert-item small{margin-top:5px;color:#7d8792;font-size:10px;line-height:1.45}
.alert-time { color:#8a95a0; font-size:10px; white-space:nowrap; }
.monitor-empty { padding:28px 0; color:#8a95a0; text-align:center; font-size:12px; }

@media(max-width:1050px){
  .monitor-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px){
  .monitor-grid { grid-template-columns:1fr; }
  .monitor-span-2 { grid-column:auto; }
  .monitor-metrics { grid-template-columns:1fr 1fr; }
  .monitor-metric { min-height:94px; padding:15px; }
  .monitor-metric strong { font-size:22px; }
  .monitor-card { padding:15px; }
  .alert-item { grid-template-columns:10px minmax(0,1fr); padding:10px 0; }
  .alert-time { grid-column:2; }
}

/* Channel status monitor layout */
.channel-page-head { min-height:64px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid #e1e7ed; }
.channel-page-head h1 { font-size:28px; }
.channel-refresh { display:inline-flex; align-items:center; gap:8px; min-width:86px; justify-content:center; font-weight:700; }
.refresh-mark { display:inline-block; font-size:20px; line-height:1; }
.channel-refresh.loading .refresh-mark { animation:monitor-spin .8s linear infinite; }
.channel-refresh:disabled { cursor:wait; opacity:.72; transform:none; }
@keyframes monitor-spin { to { transform:rotate(360deg); } }
.monitoring-content { position:relative; transition:opacity .2s ease; }
.monitoring-content.is-loading { opacity:.58; pointer-events:none; }
.monitoring-content.is-loading::before { position:absolute; z-index:5; top:0; left:0; width:32%; height:3px; content:""; background:#3769e8; border-radius:2px; animation:monitor-loading 1s ease-in-out infinite; }
@keyframes monitor-loading { 0%{left:0;width:22%}50%{left:38%;width:42%}100%{left:78%;width:22%} }
.channel-summary { min-height:98px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px; padding:18px 20px; background:#fff; border:1px solid #dfe6ed; border-radius:8px; box-shadow:0 7px 18px rgba(42,59,72,.05); }
.channel-summary-copy { min-width:0; }
.channel-summary-line { display:flex; align-items:center; gap:14px; }
.channel-summary-line > b { color:#708096; font-size:13px; }
.channel-operational { display:inline-flex; min-height:30px; align-items:center; padding:0 12px; color:#12764a; background:#d9f8e8; border:1px solid #8ce4b6; border-radius:8px; font-size:12px; font-weight:800; }
.channel-operational.warning { color:#8b5b10; background:#fff5dc; border-color:#f0cf83; }
.channel-operational.down { color:#a72e45; background:#fff0f2; border-color:#f0a8b6; }
.channel-schedule { display:flex; flex-wrap:wrap; gap:20px; margin-top:12px; color:#718198; font-size:11px; }
.channel-schedule span { display:inline-flex; align-items:center; gap:5px; }.channel-schedule b{font-weight:650}
.range-control { display:flex; flex:none; gap:7px; }
.range-control button { min-width:58px; height:34px; padding:0 12px; color:#3c4655; background:#fff; border:1px solid #dce4eb; border-radius:8px; cursor:pointer; font-size:11px; font-weight:700; }
.range-control button:hover { border-color:#9bb1da; }
.range-control button.active { color:#fff; background:#3769e8; border-color:#3769e8; }
.channel-group-head { margin:0 10px 14px; color:#64748a; }
.channel-group-head b,.channel-group-head span { display:block; }.channel-group-head b{font-size:13px}.channel-group-head span{margin-top:4px;font-size:11px}
.channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.channel-card { min-width:0; padding:20px; background:#fff; border:1px solid #dfe6ed; border-radius:8px; box-shadow:0 5px 16px rgba(42,59,72,.04); }
.channel-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.channel-identity { min-width:0; display:flex; align-items:center; gap:12px; }
.channel-icon { width:42px; height:42px; display:grid; place-items:center; flex:none; color:#39536f; background:#f7f9fb; border:1px solid #dfe6ed; border-radius:8px; font-size:12px; font-weight:800; }
.channel-title { min-width:0; }.channel-title h2{margin:0;overflow:hidden;text-overflow:ellipsis;font-size:16px;white-space:nowrap}.channel-title p{display:flex;align-items:center;gap:8px;margin:6px 0 0;color:#74839a;font-size:11px;overflow-wrap:anywhere}
.channel-kind { display:inline-flex; min-height:23px; align-items:center; padding:0 8px; color:#364152; background:#fff; border:1px solid #dce4eb; border-radius:8px; font-weight:700; white-space:nowrap; }
.channel-state { min-height:27px; display:inline-flex; align-items:center; padding:0 10px; color:#147b4d; background:#e2faed; border:1px solid #91e7b9; border-radius:8px; font-size:11px; font-weight:750; white-space:nowrap; }
.channel-state.warning { color:#8b5b10; background:#fff6df; border-color:#efd089; }.channel-state.down{color:#a72e45;background:#fff0f2;border-color:#f0a8b6}.channel-state.pending{color:#637083;background:#f3f5f7;border-color:#dce2e7}
.channel-stat-grid { display:grid; grid-template-columns:1fr 1fr; margin-top:18px; border-top:1px solid #e7ecf1; border-bottom:1px solid #e7ecf1; }
.channel-stat { min-height:88px; padding:15px 0; }.channel-stat + .channel-stat{padding-left:20px;border-left:1px solid #e7ecf1}.channel-stat:first-child{padding-right:20px}
.channel-stat span { display:block; color:#718198; font-size:10px; font-weight:700; }.channel-stat strong{display:block;margin-top:15px;font-size:24px;line-height:1;overflow-wrap:anywhere}.channel-stat time{display:block;margin-top:17px;font-size:13px;font-weight:720}
.channel-rates { min-height:82px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; border-bottom:1px solid #e7ecf1; }
.channel-rate:last-child { text-align:right; }.channel-rate span,.channel-rate small{display:block;color:#718198;font-size:10px}.channel-rate strong{display:block;margin-top:7px;color:#15945b;font-size:20px}.channel-rate:last-child strong{color:#3769e8}.channel-rate small{margin-top:4px}
.history-head { display:flex; justify-content:space-between; margin:14px 0 8px; color:#718198; font-size:9px; font-weight:750; }
.history-bars { height:25px; display:flex; align-items:stretch; gap:3px; overflow:hidden; }
.history-bar { min-width:3px; flex:1; background:#27c875; border-radius:3px; }.history-bar.warn{background:#f2ae36}.history-bar.down{background:#ee506b}.history-bar.empty{background:#e5eaf0}
.monitor-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.monitor-skeleton { height:335px; overflow:hidden; position:relative; background:#fff; border:1px solid #dfe6ed; border-radius:8px; }
.monitor-skeleton::after { position:absolute; inset:0; content:""; background:linear-gradient(100deg,transparent 20%,rgba(230,235,240,.75) 50%,transparent 80%); animation:skeleton-slide 1.3s infinite; }
@keyframes skeleton-slide { from{transform:translateX(-100%)}to{transform:translateX(100%)} }

@media(max-width:1100px){
  .channel-summary { align-items:flex-start; flex-direction:column; }
  .range-control { width:100%; overflow:auto; }
}
@media(max-width:760px){
  .channel-page-head h1 { font-size:24px; }
  .channel-summary { margin-bottom:24px; padding:15px; }
  .channel-schedule { display:grid; gap:7px; }
  .range-control button { min-width:56px; }
  .channel-grid,.monitor-detail-grid { grid-template-columns:1fr; }
  .channel-card { padding:16px; }
  .channel-title h2 { font-size:15px; }
  .channel-stat { min-height:82px; }.channel-stat strong{font-size:21px}.channel-stat time{font-size:11px}
  .monitor-detail-grid .monitor-span-2 { grid-column:auto; }
}
@media(max-width:430px){
  .channel-stat-grid { grid-template-columns:1fr; }
  .channel-stat + .channel-stat { padding-left:0; border-top:1px solid #e7ecf1; border-left:0; }
  .channel-stat:first-child { padding-right:0; }
  .channel-rates { gap:10px; }
  .channel-rate strong { font-size:18px; }
}