/* ============================================================
   服务状态页样式 · 模仿 UptimeRobot 官方公开状态页
   浅色 / 深色自动跟随系统
   ============================================================ */

/* ---------- 主题变量 ---------- */
:root{
  --bg:#f7f8f7;
  --panel:#ffffff;
  --ink:#16211c;
  --ink-2:#5b6660;
  --ink-3:#9aa39e;
  --line:#e4e8e5;
  --line-2:#d3d9d5;
  --ok:#0e9f6e;
  --ok-soft:#e6f6ef;
  --down:#e02d3c;
  --down-soft:#fdecec;
  --warn:#c47f17;
  --warn-soft:#fbf3e4;
  --pause:#8a938e;
  --pause-soft:#eef0ef;
  --grid:rgba(22,33,28,.045);
  --shadow:0 1px 2px rgba(22,33,28,.04);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101412;
    --panel:#171d1a;
    --ink:#e8ede9;
    --ink-2:#9aa69f;
    --ink-3:#5f6a64;
    --line:#242c28;
    --line-2:#313a35;
    --ok:#2fbf8b;
    --ok-soft:#12241c;
    --down:#f05662;
    --down-soft:#2c1618;
    --warn:#e0a244;
    --warn-soft:#291f10;
    --pause:#77817b;
    --pause-soft:#1b201e;
    --grid:rgba(232,237,233,.05);
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    var(--bg);
  background-size:36px 36px,36px 36px,auto;
  color:var(--ink);
  min-height:100vh;
  font-size:15px;
  line-height:1.6;
}
body.modal-open{overflow:hidden}
.wrap{width:75%;max-width:1440px;margin:0 auto;padding:48px 20px 72px}

/* ---------- 头部 ---------- */
header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  animation:rise .5s .02s both}
.kicker{font-family:var(--mono,"Consolas",monospace);font-size:11px;letter-spacing:.32em;color:var(--ink-3);text-transform:uppercase;margin-bottom:6px}
h1{font-size:30px;font-weight:700;letter-spacing:.02em;line-height:1.25}
.refresh-box{display:flex;align-items:center;gap:10px}
.updated{font-family:var(--mono,Consolas,monospace);font-size:12px;color:var(--ink-3)}
.updated b{color:var(--ink-2);font-weight:600}
.next-refresh{font-family:var(--mono,Consolas,monospace);font-size:12px;color:var(--ink-3)}
.next-refresh b{color:var(--ink-2);font-weight:600}
.notify-switch{display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);font:11px var(--mono,Consolas,monospace);cursor:pointer;user-select:none}
.notify-switch input{position:absolute;opacity:0;pointer-events:none}
.notify-switch i{position:relative;width:28px;height:16px;border:1px solid var(--line-2);border-radius:999px;background:var(--line);transition:background .16s,border-color .16s}
.notify-switch i:after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.18);transition:transform .16s}
.notify-switch input:checked+i{border-color:var(--ok);background:var(--ok)}
.notify-switch input:checked+i:after{transform:translateX(12px)}
.notify-switch.unsupported{opacity:.45;cursor:not-allowed}
.view-switcher{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:0;animation:rise .5s .06s both}
.view-switcher-label{font-family:var(--mono,Consolas,monospace);font-size:11px;color:var(--ink-3);margin-right:5px}
.view-switcher button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);background:var(--panel);color:var(--ink-3);font:11px var(--mono,Consolas,monospace);cursor:pointer}
.view-switcher button:first-of-type{border-radius:7px 0 0 7px}
.view-switcher button:last-of-type{border-radius:0 7px 7px 0}
.view-switcher button+button{margin-left:-5px}
.view-switcher button svg{width:14px;height:14px}
.view-switcher button:hover,.view-switcher button.on{position:relative;z-index:1;border-color:var(--ink-2);background:var(--ink);color:var(--panel)}
#content.layout-compact .monitor{padding:12px 16px;margin-bottom:7px;border-radius:10px}
#content.layout-compact .m-foot{display:none}
#content.layout-compact .m-bars-row{margin-top:9px}
#content.layout-compact .m-bars-row .m-latency{display:none}
#content.layout-spacious .m-foot .m-latency{display:flex}
#content.layout-compact .hint{display:none}
#content.layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;align-items:start}
#content.layout-grid .sec-title{grid-column:1 / -1;margin-bottom:2px}
#content.layout-grid .monitor{margin-bottom:0;padding:17px 18px}
#content.layout-grid .m-bars-row{display:block}
#content.layout-grid .m-foot .m-latency{display:none}
#content.layout-grid .m-bars-pct{display:block;margin-top:7px}
#content.layout-grid .m-foot{display:block}
#content.layout-grid .uptimes{margin-bottom:10px}
#content.layout-grid .hint{display:block;margin-left:0}
/* ---------- 总览横幅 ---------- */
.summary{
  margin-top:28px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);
  padding:22px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  animation:rise .5s .08s both;
}
.state-pill{
  display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px;
  font-weight:600;font-size:15px;
}
.state-pill .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.state-all-ok{background:var(--ok-soft);color:var(--ok)}
.state-all-ok .dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent)}
.state-some-down{background:var(--down-soft);color:var(--down)}
.state-some-down .dot{animation:pulse 1.6s ease-out infinite}
.state-paused{background:var(--pause-soft);color:var(--pause)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--down) 45%,transparent)}
  100%{box-shadow:0 0 0 11px transparent}
}
@keyframes statusDot{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 12%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 22%,transparent)}}
.summary-text{flex:1;min-width:200px}
.summary-text .t{font-weight:600;font-size:16px}
.summary-text .s{font-size:13px;color:var(--ink-2);margin-top:2px}
.stats{display:flex;gap:0;font-family:var(--mono,Consolas,monospace)}
.stat{padding:0 18px;text-align:center;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:22px;font-weight:600;line-height:1.2}
.stat span{font-size:11px;color:var(--ink-3);letter-spacing:.08em}
.stat.ok b{color:var(--ok)}
.stat.down b{color:var(--down)}
.stat.pause b{color:var(--pause)}

/* ---------- 区块标题 ---------- */
.sec-title{
  display:flex;align-items:center;gap:12px;margin:36px 0 14px;
  font-family:var(--mono,Consolas,monospace);font-size:12px;letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase;
  animation:rise .5s .14s both;
}

/* ---------- 监控卡片（可点击） ---------- */
.monitor{
  border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);
  padding:18px 20px;margin-bottom:12px;cursor:pointer;
  transition:border-color .2s ease,transform .2s ease;
  animation:rise .5s both;animation-delay:calc(.18s + var(--i,0)*.06s);
}
.monitor:hover{border-color:var(--line-2);transform:translateY(-1px)}

.m-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.m-dot{width:10px;height:10px;border-radius:50%;flex:none}
.m-dot.up{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 15%,transparent)}
.m-dot.up{animation:statusDot 2.4s ease-in-out infinite}
.m-dot.down{background:var(--down);animation:pulse 1.6s ease-out infinite}
.m-dot.pause{background:var(--pause)}
.m-name{font-weight:600;font-size:15.5px}
.m-badge{margin-left:auto;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;flex:none}
.b-up{background:var(--ok-soft);color:var(--ok)}
.b-down{background:var(--down-soft);color:var(--down)}
.b-pause,.b-pending{background:var(--pause-soft);color:var(--pause)}

/* 列表页 90 天条带（名称下方整行，模仿官方） */
.m-bars-row{display:flex;align-items:center;gap:12px;margin-top:13px}
.m-bars{flex:1;display:flex;gap:2px;align-items:flex-end;height:22px;min-width:0}
.m-bars .bar{flex:1;height:100%;min-width:1px;border-radius:1.5px;background:color-mix(in srgb,var(--ok) 42%,var(--line))}
.m-bars .bar.today{background:var(--ok)}
.m-bars .bar.down{background:var(--down)}
.m-bars .bar.nodata{background:var(--line)}
.m-bars-pct{font-family:var(--mono,Consolas,monospace);font-size:12.5px;color:var(--ink-2);flex:none}
.m-bars-pct b{color:var(--ok);font-weight:600}
.m-bars-pct.warn b{color:var(--warn)}
.m-bars-pct.bad b{color:var(--down)}

.m-foot{display:flex;gap:0;margin-top:22px;flex-wrap:wrap;align-items:center}
.m-latency{display:flex;gap:0;font-family:var(--mono,Consolas,monospace)}
.m-latency span{display:block;padding:0 14px;text-align:center;border-left:1px solid var(--line);white-space:nowrap}
.m-latency b{display:block;font-size:14px;font-weight:600;color:var(--ink-2)}
.m-latency small{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.1em}
.uptimes{display:flex;gap:0;font-family:var(--mono,Consolas,monospace)}
.upt{padding:0 14px;text-align:center;border-left:1px solid var(--line)}
.upt:first-child{border-left:0;padding-left:0}
.upt b{display:block;font-size:14px;font-weight:600}
.upt span{font-size:10.5px;color:var(--ink-3);letter-spacing:.1em}
.u-ok{color:var(--ok)}.u-warn{color:var(--warn)}.u-bad{color:var(--down)}.u-na{color:var(--ink-3)}
.hint{font-size:12px;color:var(--ink-3);margin-left:auto;transition:color .15s}
.monitor:hover .hint{color:var(--ink-2)}

/* ---------- 详情弹窗 ---------- */
.detail-modal[hidden]{display:none}
.detail-modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px}
.detail-backdrop{position:absolute;inset:0;background:rgba(10,18,14,.58);backdrop-filter:blur(3px);animation:fadeIn .18s ease both}
.detail-dialog{position:relative;width:min(820px,100%);max-height:min(900px,calc(100vh - 48px));overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 22px 70px rgba(0,0,0,.28);padding:20px 26px 26px;animation:modalRise .22s ease both}
.detail-dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.detail-dialog-label{font-family:var(--mono,Consolas,monospace);font-size:10px;letter-spacing:.24em;color:var(--ink-3)}
.detail-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.detail-close:hover{background:var(--pause-soft);border-color:var(--line-2);color:var(--ink)}
.detail-close svg{width:16px;height:16px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalRise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

.d-status{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.d-status .m-dot{margin-top:7px;width:12px;height:12px}
.d-status .t{font-weight:700;font-size:19px;line-height:1.35}
.d-status.ok .t{color:var(--ok)}
.d-status.down .t{color:var(--down)}
.d-status .s{font-size:12.5px;color:var(--ink-3);margin-top:2px}

.d-section{margin-top:20px}
.d-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:10px;
}
.d-title .val{font-family:var(--mono,Consolas,monospace);font-size:12.5px;color:var(--ink-3)}

/* ---------- 每日条带悬浮弹窗（自定义，向上弹起） ---------- */
.bar-tip{
  position:fixed;left:0;top:0;z-index:50;pointer-events:none;
  background:var(--ink);color:var(--bg);
  padding:8px 12px;border-radius:8px;
  font-size:12.5px;line-height:1.55;min-width:118px;
  display:flex;flex-direction:column;
  opacity:0;transform:translate(-50%, 6px);
  transition:opacity .16s ease,transform .16s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.bar-tip.show{opacity:1;transform:translate(-50%, 0)}
.bar-tip.below{transform:translate(-50%, -6px)}
.bar-tip.below.show{transform:translate(-50%, 0)}
.bar-tip b{font-family:var(--mono,Consolas,monospace);font-weight:600;font-size:12px;letter-spacing:.03em}
.bar-tip span{color:color-mix(in srgb,var(--bg) 78%,transparent)}
/* 小箭头：默认在弹窗底部（向上弹起）；below 时在顶部 */
.bar-tip::after{
  content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--ink);border-bottom:none;
}
.bar-tip.below::after{
  bottom:auto;top:-5px;border-top:none;border-bottom:5px solid var(--ink);
}

/* 详情页 90 天大条带 */
.bars-full{display:flex;gap:3px;align-items:flex-end;height:34px}
.bars-full .bar{flex:1;height:100%;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--ok) 55%,var(--line))}
.bars-full .bar.today{background:var(--ok)}
.bars-full .bar.down{background:var(--down)}
.bars-full .bar.nodata{background:var(--line)}
.bars-axis{display:flex;justify-content:space-between;font-family:var(--mono,Consolas,monospace);
  font-size:10.5px;color:var(--ink-3);margin-top:5px}

/* 响应时间范围切换标签 */
.rt-tabs{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.rt-tabs button{
  border:none;background:transparent;color:var(--ink-3);font-size:12px;padding:5px 13px;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.rt-tabs button + button{border-left:1px solid var(--line-2)}
.rt-tabs button:hover{color:var(--ink)}
.rt-tabs button.on{background:var(--ink);color:var(--bg)}

/* 响应时间大图表 */
.chart-box{position:relative}
.chart-area{position:relative;height:190px;border-bottom:1px solid var(--line)}
.chart-area svg{display:block;width:100%;height:100%}
.chart-area .vline{
  position:absolute;top:0;bottom:0;width:1px;background:var(--ink-3);opacity:0;
  pointer-events:none;
}
.chart-point{opacity:.35}
.chart-point:hover{opacity:1}
.chart-focus{stroke:var(--panel);stroke-width:2}
.chart-area.hovering .vline{opacity:.55}
.chart-tip{
  position:absolute;top:8px;left:0;transform:translate(-50%,-100%);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);font-family:var(--mono,Consolas,monospace);font-size:11.5px;
  padding:4px 9px;border-radius:6px;white-space:nowrap;transition:opacity .12s;z-index:2;
}
.chart-tip.show{opacity:1;transform:translate(-50%,-100%)}
.chart-tip b,.chart-tip span{display:block}
.chart-legend{
  display:flex;justify-content:space-between;font-family:var(--mono,Consolas,monospace);
  font-size:10.5px;color:var(--ink-3);margin-top:5px;
}
.chart-stats{display:flex;gap:0;margin-top:14px;font-family:var(--mono,Consolas,monospace);flex-wrap:wrap}
.chart-stats .cs{padding:0 16px;border-left:1px solid var(--line)}
.chart-stats .cs:first-child{border-left:0;padding-left:0}
.chart-stats b{display:block;font-size:15px;font-weight:600}
.chart-stats span{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em}
.chart-empty{
  height:190px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--ink-3);border-bottom:1px solid var(--line);
}
.chart-box.loading .chart-area,.chart-box.loading .chart-stats,.chart-box.loading .chart-empty{opacity:.45;transition:opacity .2s}

/* 详情事件列表 */
.d-events .ev{display:flex;gap:12px;font-size:12.5px;padding:6px 0;color:var(--ink-2);
  border-bottom:1px dashed var(--line)}
.d-events .ev:last-child{border-bottom:none}
.d-events time{font-family:var(--mono,Consolas,monospace);color:var(--ink-3);flex:none;font-size:12px;min-width:118px}
.d-events .ev.down{color:var(--down)}
.d-events .ev.up{color:var(--ok)}
.d-events .dur{color:var(--ink-3)}
.d-events .all-end{font-size:12px;color:var(--ink-3);text-align:center;padding-top:10px}

/* ---------- 骨架屏 / 错误 ---------- */
.skeleton{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 20px;margin-bottom:12px}
.sk-line{height:13px;border-radius:6px;background:linear-gradient(90deg,var(--line) 25%,var(--line-2) 50%,var(--line) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.error-box{
  margin-top:28px;border:1px solid color-mix(in srgb,var(--down) 30%,var(--line));border-radius:14px;
  background:var(--down-soft);padding:44px 20px;text-align:center;
}
.error-box .icon{
  width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--down) 14%,transparent);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.error-box .icon svg{width:24px;height:24px;color:var(--down)}
.error-box .t{font-weight:600;color:var(--down);font-size:15.5px}
.error-box .s{font-size:13px;color:var(--ink-2);margin-top:5px;font-family:var(--mono,Consolas,monospace)}

footer{margin-top:44px;text-align:center;font-size:12px;color:var(--ink-3);animation:rise .5s .3s both}
footer .sep{margin:0 8px;opacity:.5}
footer a{color:inherit;text-decoration:none}
footer a:hover{text-decoration:underline;color:var(--ink-2)}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .wrap{width:auto;margin:0;padding:32px 14px 56px}
  .view-switcher{justify-content:flex-start;overflow-x:auto}
  .view-switcher button{flex:none}
  #content.layout-grid{grid-template-columns:1fr}
  h1{font-size:24px}
  .summary{padding:18px;gap:14px}
  .stats{width:100%;justify-content:space-between}
  .stat{padding:0}
  .stat:first-child{text-align:left}
  .stat:last-child{text-align:right}
  .m-badge{margin-left:0}
  .hint{display:none}
  .upt{padding:0 10px}
  .d-card{padding:18px}
  .d-events time{min-width:0}
  .chart-stats .cs{padding:0 10px}
  .detail-modal{padding:10px}
  .detail-dialog{max-height:calc(100vh - 20px);padding:16px 16px 22px;border-radius:13px}
}