/* 视觉主题：深蓝导航 + 白色数据工作台。改颜色优先修改这里的变量。 */
:root { --nav:#12233d; --accent:#245dee; --line:#dfe6f0; --muted:#63748b; --bg:#f3f6fa; font:16px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif; color:#17273e; background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; } [hidden] { display:none!important; }
button,input { font:inherit; } button { padding:9px 15px; border:1px solid var(--line); border-radius:7px; color:inherit; background:white; cursor:pointer; white-space:nowrap; } button:hover { background:#eef3ff; } button:disabled { opacity:.48; cursor:default; } .primary { color:white; background:var(--accent); border-color:var(--accent); } .primary:hover { background:#174cd3; }
input { width:100%; min-width:0; padding:10px 12px; border:1px solid #cfd9e7; border-radius:7px; background:white; color:inherit; } input:focus,button:focus-visible,summary:focus-visible { outline:2px solid #80a4ff; outline-offset:2px; } input:disabled { background:#f2f4f8; color:var(--muted); } label { display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:600; } small { font-size:13px; color:var(--muted); } code { font-size:13px; overflow-wrap:anywhere; } h1 { font-size:27px; margin:3px 0 0; } h2 { font-size:18px; margin:0 0 16px; } p { margin:12px 0; } a { color:var(--accent); }
.sidebar { position:fixed; inset:0 auto 0 0; width:232px; background:var(--nav); color:white; padding:30px 18px; display:flex; flex-direction:column; } .brand { display:flex; align-items:center; gap:12px; padding:0 8px 36px; font-weight:600; font-size:19px; } .brand small { display:block; color:#95a9c4; font-size:12px; font-weight:400; } .brand-icon { background:#336bfd; border-radius:9px; padding:7px 13px; font-size:23px; } nav { display:grid; gap:12px; } .nav { background:transparent; border:0; color:#b7c5d9; text-align:left; padding:15px; font-size:16px; } .nav span { font-size:12px; margin-right:13px; color:#8295ae; } .nav.active { background:#245dee; color:white; } .nav.active span { color:#c2d5ff; } .nav:hover { background:#263e61; } .sidebar-bottom { margin-top:auto; padding:20px 12px 0; color:#c0cce0; font-size:14px; } .sidebar-bottom small { display:block; color:#8295ae; margin-top:9px; }
main { margin-left:232px; padding:28px 34px; max-width:1850px; } .topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; } .eyebrow { font-size:12px; color:var(--muted); letter-spacing:1px; } .card { padding:24px; background:white; border:1px solid var(--line); border-radius:12px; margin-bottom:22px; } .section-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:17px; } .section-title h2 { margin:0; } .row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .end { justify-content:flex-end; margin-top:16px; } .muted { color:var(--muted); font-size:14px; } .badge { background:#edf3ff; color:#315d9b; border-radius:5px; padding:5px 9px; font-size:13px; } .form-grid { display:grid; gap:16px; align-items:end; } .connect { grid-template-columns:1fr 1fr auto; } .five { grid-template-columns:repeat(5,minmax(130px,1fr)); } .three { grid-template-columns:repeat(3,minmax(130px,1fr)); } .search { grid-template-columns:2fr 1fr 1fr auto auto; margin:16px 0; } .note { background:#f0f5ff; border-left:3px solid var(--accent); padding:13px 17px; font-size:14px; margin:17px 0; line-height:1.8; } details { font-size:14px; } summary { color:var(--accent); cursor:pointer; margin:12px 0; }
.table-wrap { overflow:auto; margin-top:18px; } table { border-collapse:collapse; width:100%; font-size:14px; } th { background:#f6f8fc; color:var(--muted); font-weight:500; white-space:nowrap; } th,td { border-bottom:1px solid #e9eef5; padding:13px 11px; text-align:left; vertical-align:top; } td { max-width:320px; overflow-wrap:anywhere; } td small { display:block; margin-top:3px; } td button { padding:5px 10px; margin:3px 3px 3px 0; font-size:14px; } .link-value { display:block; min-width:160px; max-width:310px; font:12px/1.5 ui-monospace,monospace; color:var(--muted); overflow-wrap:anywhere; margin-bottom:6px; } .empty { text-align:center; color:var(--muted); padding:30px 12px; font-size:14px; } .chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { font-size:14px; border-radius:7px; } .chip.active { background:#eaf1ff; color:#194fd1; border-color:#9ab8ff; } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; } .stat { border:1px solid var(--line); background:white; border-radius:10px; padding:18px 22px; } .stat strong { display:block; margin-top:8px; font-size:27px; } .event-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:18px 0 22px; } .event-choice { white-space:normal; padding:17px 12px; text-align:left; border:1px solid var(--line); } .event-choice strong,.event-choice small,.event-choice em { display:block; } .event-choice strong { font-size:17px; } .event-choice em { font-style:normal; color:#194fd1; font-size:12px; margin-top:8px; } .event-choice code { display:block; color:var(--muted); font-size:12px; margin:5px 0; } .event-choice.active { background:#edf3ff; border:2px solid var(--accent); padding:16px 11px; } .status { display:inline-block; border-radius:5px; padding:4px 8px; font-size:13px; background:#eef1f6; white-space:nowrap; } .success,.accepted { color:#087452; background:#e4f5ed; } .failed,.rejected { color:#b3263a; background:#ffedf0; } .unknown,.sending,.incomplete,.restricted { color:#946113; background:#fff3db; } .pagination { display:flex; justify-content:flex-end; gap:10px; align-items:center; padding-top:18px; font-size:14px; color:var(--muted); } .pagination span { margin-right:auto; } #notice { position:sticky; top:10px; z-index:3; padding:13px 18px; background:#fff3db; border:1px solid #f2d69c; border-radius:8px; margin-bottom:20px; } #historySearch input { max-width:380px; } #detail { width:min(850px,94vw); max-height:85vh; border:1px solid var(--line); border-radius:12px; padding:24px; color:inherit; } #detail::backdrop { background:#07172d80; } pre { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.7 ui-monospace,monospace; background:#f4f7fc; padding:18px; border-radius:8px; } footer { text-align:center; padding:15px; font-size:12px; color:var(--muted); }
/* 小屏幕将导航放在顶部；表格保留横向滚动，不挤压数据字段。 */
@media(max-width:1150px) { .five { grid-template-columns:repeat(3,1fr); } .search { grid-template-columns:1fr 1fr; } .event-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px) { .sidebar { position:static; width:100%; padding:16px; } .brand { padding-bottom:16px; } nav { grid-template-columns:repeat(3,1fr); gap:5px; } .nav { padding:10px 5px; text-align:center; font-size:14px; } .nav span,.sidebar-bottom { display:none; } main { margin:0; padding:20px 14px; } .topbar { align-items:start; flex-wrap:wrap; } .card { padding:18px; } .connect,.five,.three { grid-template-columns:1fr; } .section-title { flex-wrap:wrap; } .event-grid { grid-template-columns:1fr 1fr; } .stats { gap:8px; } .stat { padding:12px; } .stat strong { font-size:22px; } }