:root { --ink:#121827; --muted:#737d8f; --soft:#9da6b5; --line:#dfe5e8; --card:#fbfcfc; --green:#22a965; --green-soft:#e3f7eb; --amber:#d58a22; --amber-soft:#fff1d9; --red:#e04f55; --red-soft:#ffe8e9; --blue:#356df4; --shadow:0 2px 4px rgba(29,42,48,.08),0 16px 40px rgba(46,75,81,.05); }
* { box-sizing:border-box; }
html { min-width:320px; background:#eef5f5; }
body { min-height:100vh; margin:0; color:var(--ink); background:#f4f7f8; font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; letter-spacing:0; }
button,a { color:inherit; font:inherit; }
button { border:0; cursor:pointer; }
:focus-visible { outline:3px solid rgba(53,109,244,.45); outline-offset:3px; }
.status-header { display:flex; min-height:104px; align-items:center; justify-content:space-between; gap:24px; padding:24px clamp(22px,3vw,54px); border-bottom:1px solid rgba(95,117,123,.12); background:rgba(248,250,250,.72); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-signal { display:grid; width:42px; height:42px; place-items:center; color:var(--blue); border:1px solid #dce3ec; border-radius:8px; background:white; font-size:27px; font-weight:800; }
.brand strong,.brand small { display:block; }.brand strong { font-size:20px; }.brand small { margin-top:3px; color:var(--muted); font-size:9px; letter-spacing:.14em; }
.toolbar { display:flex; align-items:center; gap:12px; }
.range-switch { display:flex; padding:3px; border:1px solid #e1e5e9; border-radius:8px; background:#edf0f2; }
.range-switch button { min-width:66px; min-height:36px; padding:0 14px; color:var(--muted); border-radius:6px; background:transparent; }
.range-switch button.active { color:var(--ink); background:white; box-shadow:0 1px 4px rgba(27,35,49,.12); font-weight:700; }
.overall-badge { display:flex; min-height:38px; align-items:center; gap:7px; padding:0 16px; color:#1c7b4c; border-radius:99px; background:var(--green-soft); font-size:12px; letter-spacing:.1em; }
.overall-badge i { width:7px; height:7px; border-radius:50%; background:currentColor; }.overall-badge.degraded { color:#a66517; background:var(--amber-soft); }.overall-badge.failed { color:#b6383d; background:var(--red-soft); }
.icon-refresh,.auto-refresh { min-height:40px; border:1px solid #dce1e5; border-radius:7px; background:rgba(255,255,255,.84); box-shadow:0 2px 4px rgba(24,34,48,.08); }
.icon-refresh { width:42px; color:#5d6878; font-size:21px; }.auto-refresh { padding:0 17px; color:#4e5868; font-size:12px; }.auto-refresh b { font-variant-numeric:tabular-nums; }
main { padding:36px clamp(18px,3vw,54px) 64px; }
.overview { display:flex; max-width:1900px; align-items:flex-end; justify-content:space-between; gap:40px; margin:0 auto 28px; }
.eyebrow { margin:0 0 6px; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.13em; }
.overview h1 { margin:0; font-size:32px; letter-spacing:0; }.overview p:not(.eyebrow) { margin:8px 0 0; color:var(--muted); font-size:13px; }
.overview-stats { display:flex; gap:34px; }.overview-stats div { min-width:80px; }.overview-stats span { display:block; color:var(--muted); font-size:11px; }.overview-stats strong { display:block; margin-top:4px; font-size:22px; font-variant-numeric:tabular-nums; }
.channel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:stretch; gap:22px; max-width:1900px; margin:0 auto; }
.channel-grid[data-count="1"] { grid-template-columns:minmax(0,560px); }
.channel-grid[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1180px; }
.channel-grid[data-count="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1500px; }
.channel-card { position:relative; display:block; width:100%; height:100%; min-height:430px; padding:26px; overflow:hidden; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:8px; background:rgba(252,253,253,.92); box-shadow:var(--shadow); transition:border-color 180ms ease,box-shadow 180ms ease; }
.channel-card:hover { border-color:#c9d3d7; box-shadow:0 3px 5px rgba(29,42,48,.1),0 20px 46px rgba(46,75,81,.08); }
.card-head { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:start; }
.provider-icon { display:grid; width:52px; height:52px; place-items:center; border:1px solid #dce8e2; border-radius:8px; color:#208f5a; background:#e9f8ef; font-size:18px; font-weight:800; }
.provider-icon.anthropic { color:#c85b23; background:#fff2d9; }.provider-icon.gemini { color:#426ee8; background:#ebf0ff; }.provider-icon.grok { color:#303746; background:#eef0f3; }
.card-title { min-width:0; }.card-title h2 { margin:4px 0 8px; font-size:18px; line-height:1.32; overflow-wrap:anywhere; white-space:normal; }.model-line { display:flex; min-width:0; align-items:center; gap:7px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }.provider-tag { padding:3px 7px; color:#287b50; border-radius:4px; background:var(--green-soft); font-family:inherit; }.provider-tag.anthropic { color:#b85521; background:#ffefd7; }.model-line span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.state-pill { padding:6px 10px; color:#287b50; border-radius:99px; background:var(--green-soft); font-size:11px; font-weight:700; white-space:nowrap; }.state-pill.degraded { color:#a56516; background:var(--amber-soft); }.state-pill.failed { color:#b6383d; background:var(--red-soft); }.state-pill.paused { color:#697485; background:#eef1f3; }
.latency-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:32px; }.latency-box { min-width:0; padding:16px; border:1px solid #e8ecef; border-radius:8px; background:#fafbfc; }.latency-box span { display:block; color:var(--soft); font-size:11px; letter-spacing:.08em; }.latency-box strong { display:inline-block; margin-top:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:22px; font-variant-numeric:tabular-nums; }.latency-box em { margin-left:3px; color:var(--soft); font-size:11px; font-style:normal; }
.availability { display:flex; align-items:baseline; gap:8px; margin-top:38px; }.availability span { color:var(--soft); font-size:12px; letter-spacing:.08em; }.availability strong { color:#55b83a; font-size:34px; font-variant-numeric:tabular-nums; }.availability strong.warn { color:#b96f28; }.availability strong.bad { color:var(--red); }.availability em { color:currentColor; font-size:15px; font-style:normal; }
.history-meta { margin-top:16px; padding-top:16px; color:var(--soft); border-top:1px solid #edf0f2; font-size:11px; letter-spacing:.08em; }.pulse-history { display:flex; height:30px; align-items:center; gap:2px; margin-top:13px; overflow:hidden; }.pulse-history i { width:2px; height:15px; flex:0 0 auto; border-radius:1px; background:#26ba72; }.pulse-history i.bad { background:#ff555c; }.pulse-history i.empty { background:#d9dfe3; }.timeline-labels { display:flex; justify-content:space-between; color:#9aa3b2; font-size:10px; letter-spacing:.12em; }
.detail-row { display:flex; justify-content:space-between; gap:12px; margin-top:17px; color:var(--muted); font-size:10px; }.detail-row strong { color:#4f596a; font-weight:600; }
.empty-state { max-width:640px; margin:80px auto; padding:60px 30px; text-align:center; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.78); }.empty-state span { color:var(--blue); font-size:44px; }.empty-state h2 { margin:12px 0 6px; }.empty-state p { color:var(--muted); }
.modal-backdrop { position:fixed; z-index:30; inset:0; background:rgba(22,28,35,.5); backdrop-filter:blur(3px); }
.detail-modal { position:fixed; z-index:31; top:50%; left:50%; display:flex; width:min(1180px,calc(100vw - 32px)); max-height:min(680px,calc(100vh - 32px)); flex-direction:column; overflow:hidden; border:1px solid #d7dde3; border-radius:16px; background:#fff; box-shadow:0 28px 90px rgba(22,31,45,.25); transform:translate(-50%,-48%); opacity:0; pointer-events:none; transition:opacity 180ms ease,transform 180ms ease; }
.detail-modal.open { transform:translate(-50%,-50%); opacity:1; pointer-events:auto; }.detail-modal header { display:flex; align-items:center; justify-content:space-between; padding:28px 38px; border-bottom:1px solid var(--line); }.detail-modal h2 { margin:0; font-size:27px; }.detail-modal header button { width:36px; height:36px; color:#9aa4b2; background:transparent; font-size:30px; line-height:1; }.modal-content { overflow:auto; padding:24px 38px 28px; }.detail-table-wrap { overflow-x:auto; }.detail-table { width:100%; min-width:760px; border-collapse:collapse; }.detail-table th { padding:14px 2px; color:#6c7482; border-bottom:1px solid #d7dde4; font-size:13px; font-weight:700; letter-spacing:.03em; text-align:left; white-space:nowrap; }.detail-table td { padding:18px 2px; border-bottom:1px solid #edf0f3; color:#3c4655; font-size:15px; white-space:nowrap; }.detail-table td:first-child { color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600; }.modal-status { display:inline-flex; padding:5px 10px; color:#287b50; border-radius:99px; background:var(--green-soft); font-size:12px; font-weight:700; }.modal-status.degraded { color:#a56516; background:var(--amber-soft); }.modal-status.failed { color:#b6383d; background:var(--red-soft); }.modal-status.paused { color:#697485; background:#eef1f3; }.modal-meta { margin-top:18px; color:var(--muted); font-size:12px; }.detail-modal > footer { display:flex; min-height:90px; justify-content:flex-end; padding:18px 38px; border-top:1px solid var(--line); background:#fbfcfd; }.modal-action { min-width:92px; min-height:48px; padding:0 20px; color:#465162; border:1px solid #dce2e8; border-radius:10px; background:#fff; box-shadow:0 2px 4px rgba(24,34,48,.08); font-weight:600; }
footer { display:grid; grid-template-columns:1fr auto 1fr; min-height:76px; align-items:center; gap:20px; padding:0 clamp(22px,3vw,54px); color:var(--muted); border-top:1px solid var(--line); background:rgba(250,252,252,.8); font-size:11px; }footer span:nth-child(2) { display:flex; align-items:center; gap:8px; }footer time { justify-self:end; }.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(34,169,101,.11); }
.add-monitor { min-height:40px; padding:0 14px; color:#315ec8; border:1px solid #cbd8f4; border-radius:7px; background:#f5f8ff; box-shadow:0 2px 4px rgba(38,68,125,.08); font-size:12px; font-weight:700; white-space:nowrap; }
.add-monitor:disabled { color:#8b95a5; border-color:#dfe3e8; background:#f2f4f6; box-shadow:none; cursor:not-allowed; }
.add-monitor span { display:inline-block; margin-right:5px; font-size:17px; font-weight:400; line-height:0; vertical-align:-1px; }
.user-monitor-backdrop { position:fixed; z-index:40; inset:0; background:rgba(22,28,35,.46); backdrop-filter:blur(3px); }
.user-monitor-dialog { position:fixed; z-index:41; top:50%; left:50%; width:min(520px,calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:auto; border:1px solid #d7dde3; border-radius:14px; background:#fff; box-shadow:0 28px 90px rgba(22,31,45,.25); opacity:0; pointer-events:none; transform:translate(-50%,-47%); transition:opacity 180ms ease,transform 180ms ease; }
.user-monitor-dialog.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.user-monitor-dialog > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:26px 30px 20px; border-bottom:1px solid var(--line); }.user-monitor-dialog > header h2 { margin:0; font-size:24px; }.user-monitor-dialog > header p:not(.eyebrow) { margin:7px 0 0; color:var(--muted); font-size:12px; }.user-monitor-dialog > header button { width:34px; height:34px; color:#8b95a5; background:transparent; font-size:28px; line-height:1; }
.user-monitor-dialog form { display:grid; gap:8px; padding:24px 30px 28px; }.user-monitor-dialog label { margin-top:6px; color:#4e5868; font-size:12px; font-weight:700; }.user-monitor-dialog input { width:100%; height:42px; padding:0 12px; color:var(--ink); border:1px solid #dce2e8; border-radius:7px; outline:none; background:#fff; font-size:13px; }.user-monitor-dialog input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,109,244,.12); }.user-monitor-dialog input[readonly] { color:#687487; background:#f4f6f8; cursor:not-allowed; }.user-secret-field { position:relative; }.user-secret-field input { padding-right:60px; }.user-secret-field button { position:absolute; top:0; right:0; width:58px; height:42px; color:var(--blue); background:transparent; font-size:11px; font-weight:700; }.user-monitor-hint { margin:4px 0 2px; color:#7b8795; font-size:11px; line-height:1.6; }.user-monitor-dialog form > footer { display:flex; min-height:auto; justify-content:flex-end; gap:9px; margin:14px -30px -28px; padding:18px 30px; border-top:1px solid var(--line); background:#fbfcfd; }.user-monitor-dialog .modal-action { min-height:40px; padding:0 16px; }.user-monitor-dialog .primary-action { color:#fff; border-color:#356df4; background:#356df4; }.danger-action { color:#b6383d; border-color:#f0c8ca; background:#fff8f8; }
.personal-tag { padding:3px 6px; color:#315ec8; border-radius:4px; background:#edf3ff; font-family:inherit; font-size:10px; white-space:nowrap; }.personal-card { border-color:#cfdbf7; }
@media (max-width:1320px) { .channel-grid:not([data-count="1"]):not([data-count="2"]) { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); } }
@media (max-width:980px) { .status-header,.overview { align-items:flex-start; flex-direction:column; }.toolbar { width:100%; flex-wrap:wrap; }.overview-stats { width:100%; justify-content:space-between; }.channel-grid:not([data-count="1"]) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { .status-header { min-height:auto; padding:18px; }.toolbar { gap:8px; }.range-switch { width:100%; }.range-switch button { flex:1; min-width:0; }.auto-refresh { flex:1; }.overview { gap:24px; }.overview-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.channel-grid,.channel-grid[data-count] { grid-template-columns:1fr; }.channel-card { min-height:410px; padding:22px; }.card-head { grid-template-columns:46px minmax(0,1fr) auto; }.provider-icon { width:46px; height:46px; }.availability strong { font-size:31px; }footer { grid-template-columns:1fr; gap:7px; padding:18px; }footer time { justify-self:start; }.detail-modal { width:calc(100vw - 20px); max-height:calc(100vh - 20px); border-radius:12px; }.detail-modal header { padding:22px 20px; }.detail-modal h2 { font-size:22px; }.modal-content { padding:18px 20px 22px; }.detail-modal > footer { min-height:78px; padding:14px 20px; } }
@media (max-width:650px) { .status-header .toolbar { width:100%; }.add-monitor { flex:1; min-width:0; padding:0 9px; }.user-monitor-dialog { width:calc(100vw - 20px); border-radius:11px; }.user-monitor-dialog > header { padding:22px 20px 18px; }.user-monitor-dialog form { padding:20px 20px 24px; }.user-monitor-dialog form > footer { margin:12px -20px -24px; padding:16px 20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition-duration:.01ms!important; } }