:root {
  color-scheme: dark;
  --farm-background: url("/assets/farm-night.webp?v=1.5.10");
  --sky-0: #090e1d;
  --sky-1: #111a32;
  --panel: rgba(16, 24, 38, .94);
  --panel-soft: #172132;
  --ink: #edf3fa;
  --muted: #a9b5bc;
  --wood: #6f422c;
  --wood-hi: #a86d3c;
  --line: #334155;
  --green: #6fd252;
  --mint: #35d39a;
  --gold: #f2c14e;
  --red: #ed6a5a;
  --blue: #62b6e7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(93, 80, 177, .16), transparent 30rem),
    radial-gradient(circle at 82% 5%, rgba(53, 132, 165, .1), transparent 28rem),
    linear-gradient(180deg, var(--sky-0), var(--sky-1) 70%, #121829);
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 4rem) 10rem;
  position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .32;
  background-image: radial-gradient(#f4d982 0.7px, transparent 0.8px);
  background-size: 47px 47px; background-position: 11px 7px;
}
.topbar { max-width: 1360px; margin: 0 auto 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; z-index: 2; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: .8rem; min-width: max-content; }
.brand-sprout { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--mint); background: #15342f; border: 1px solid #2e5c51; border-radius: 12px; box-shadow: none; }
.brand-sprout::first-letter { transform: none; }
h1 { font-size: clamp(1.2rem, 4vw, 1.7rem); margin: 0; letter-spacing: .04em; text-shadow: none; white-space: nowrap; }
.brand p { color: var(--muted); margin: .15rem 0 0; font-size: .8rem; }
.summary { text-align: right; display: grid; gap: .2rem; }
.summary > span { font-weight: 800; font-size: .95rem; color: #b6e565; }
.summary small { color: var(--muted); font-size: .75rem; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; }
.admin-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; color: var(--ink); background: #203044; border: 1px solid #3d5065; border-radius: 8px; padding: .55rem .8rem; font: inherit; font-size: .8rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.admin-button:hover, .admin-button:focus-visible { background: #2b4056; outline: 2px solid var(--blue); outline-offset: 2px; }
.admin-mode { display: flex; align-items: center; gap: .55rem; color: var(--mint); font-size: .75rem; white-space: nowrap; }
.node-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; position: relative; z-index: 2; }
.node-card { grid-column: span 2; position: relative; overflow: hidden; min-width: 0; background: linear-gradient(155deg, rgba(24,36,53,.98), rgba(15,24,38,.98)); border: 1px solid #30445c; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 1.25rem; }
.node-card::after { display: none; }
.node-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .85rem; position: relative; z-index: 1; }
.node-tools { display: grid; justify-items: end; gap: .45rem; min-width: 0; max-width: 8rem; }
.node-title { min-width: 0; }
.name-row { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.status-dot { flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); }
.status-online .status-dot { background: var(--mint); box-shadow: 0 0 0 4px rgba(53,211,154,.1); }
.status-delayed .status-dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(242,193,78,.1); }
.status-offline .status-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(237,106,90,.1); }
.node-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: 1.08rem; letter-spacing: .01em; }
.node-meta { margin: 0; color: #9facbd; font-size: .76rem; line-height: 1.5; }
.region { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; color: #c4d0de; background: #203045; border: 1px solid #3a4e64; border-radius: 7px; padding: .38rem .5rem; font-size: .74rem; line-height: 1; }
.region-flag { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.region-flag img { display: block; width: 1.25rem; height: .9375rem; object-fit: contain; border-radius: 1px; }
.region-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-info { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 74px; margin: 0 0 1.15rem; padding: .65rem .8rem; background: rgba(35,49,67,.68); border: 1px solid #304257; border-radius: 10px; }
.device-note { margin: 0 0 .42rem; color: #bac6d3; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.renewal-row { display: flex; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .7rem; }
.reset-day { margin: .42rem 0 0; color: var(--muted); font-size: .7rem; }
.due-soon { color: var(--gold); }.expired { color: var(--red); }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; position: relative; z-index: 1; }
.metric { min-width: 0; }
.metric-wide { grid-column: 1 / -1; }
.metric-label { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; color: #c4ced2; font-size: .76rem; margin-bottom: .36rem; }
.metric-label strong { color: var(--ink); font-size: .93rem; font-weight: 650; }
.bar { height: .4rem; background: #2a3a4d; border: 0; border-radius: 5px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: var(--value, 0%); max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, #36bd87, var(--mint)); }
.bar.warn > i { background: linear-gradient(90deg, var(--gold), #e5963b); }
.bar.danger > i { background: linear-gradient(90deg, #e08845, var(--red)); }
.metric-sub { color: var(--muted); font-size: .72rem; margin-top: .38rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-box { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .7rem; background: #172639; border: 1px solid #304257; border-radius: 8px; }
.traffic-value { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .77rem; }
.traffic-value b { color: var(--muted); }
.traffic-value:first-child { color: var(--mint); }
.traffic-value:last-child { color: var(--blue); }
.probes { grid-column: 1 / -1; margin-top: .4rem; padding-top: .1rem; border-top: 1px solid #304359; }

.probe-row { padding: .65rem 0 .65rem; border-bottom: 1px solid rgba(63,83,97,.28); font-size: .78rem; }
.probe-main { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem 4rem; align-items: center; gap: .65rem; min-height: 1.35rem; }
.probe-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family { color: var(--blue); }
.probe-value { text-align: right; }
.metric-label strong, .metric-sub, .traffic-value, .probe-value { font-variant-numeric: tabular-nums; }
.quality { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; margin-right: .35rem; background: var(--green); }
.quality.warn { background: var(--gold); }
.quality.bad { background: var(--red); }
.probe-strip { display: grid; grid-template-columns: repeat(18, minmax(2px, 1fr)); gap: 3px; height: .55rem; margin-top: .38rem; }
.probe-sample { min-width: 0; background: var(--green); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.probe-sample.warn { background: var(--gold); }
.probe-sample.bad { background: var(--red); }
.probe-sample.empty { background: #34404b; border-color: #3e4d59; box-shadow: none; }
.empty { max-width: 560px; margin: 10vh auto; padding: 2rem; text-align: center; background: var(--panel); border: 2px solid var(--line); position: relative; z-index: 2; }
.empty-icon { color: var(--green); font-size: 2.4rem; }.empty h2 { margin: .5rem 0; font-size: 1.1rem; }.empty p { color: var(--muted); font-size: .85rem; line-height: 1.7; }
footer { position: relative; z-index: 2; display: flex; justify-content: center; gap: .6rem; color: #7f9097; font-size: .72rem; margin-top: 2rem; }
.edit-dialog { width: min(92vw, 560px); color: var(--ink); background: #172436; border: 1px solid #42576c; border-radius: 12px; padding: 0; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.edit-dialog::backdrop { background: rgba(5,9,18,.78); backdrop-filter: blur(2px); }
.edit-dialog form { max-height: min(88vh, 760px); overflow-y: auto; padding: 1.1rem; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #33465a; }
.dialog-kicker { color: var(--blue); font-size: .72rem; letter-spacing: .06em; }.dialog-head h2 { margin: .2rem 0 0; font-size: 1.15rem; }
.icon-button { width: 2.25rem; height: 2.25rem; color: var(--muted); background: #22344a; border: 1px solid #42566a; border-radius: 8px; font: inherit; font-size: 1.2rem; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; padding: 1rem 0 .6rem; }
.form-grid label { display: grid; gap: .38rem; color: #c6d0d2; font-size: .76rem; }.form-wide { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea { width: 100%; color: var(--ink); background: #101c2d; border: 1px solid #485d72; border-radius: 8px; padding: .7rem .75rem; font: inherit; font-size: 1rem; resize: vertical; }
.form-grid input:focus, .form-grid textarea:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.calibration-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .45rem .65rem; padding: .85rem; background: #203349; border: 1px solid #3b5874; border-radius: 8px; }
.calibration-field > label { min-width: 0; }
.calibration-field small { grid-column: 1 / -1; color: var(--muted); line-height: 1.45; }
.inline-button { min-height: 44px; color: var(--ink); background: #2b4057; border: 1px solid #506b85; border-radius: 8px; padding: .5rem .65rem; font: inherit; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.inline-button:hover, .inline-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.inline-button:disabled { opacity: .5; cursor: not-allowed; }
.form-status { min-height: 1.2rem; margin: .15rem 0 .65rem; color: var(--muted); font-size: .72rem; }.form-status.success { color: var(--mint); }.form-status.error { color: var(--red); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; }.button { border: 1px solid; border-radius: 8px; min-height: 44px; padding: .65rem .9rem; color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; box-shadow: none; }.button:disabled { opacity: .6; cursor: wait; }.button.primary { background: #237452; border-color: #3caa7b; }.button.secondary { background: #283b50; border-color: #496279; }
.button.danger { background: #452a32; border-color: #a55459; color: #ffb0a9; }
.delete-content { padding: 1.1rem; }
.delete-content p { line-height: 1.6; font-size: .8rem; }
.delete-label { display: block; margin-bottom: .4rem; font-size: .78rem; }
#delete-confirm-name { width: 100%; min-height: 44px; color: var(--ink); background: #101c2d; border: 1px solid #485d72; border-radius: 8px; padding: .7rem .75rem; font: inherit; font-size: 1rem; }
.farm-horizon { position: fixed; z-index: 0; pointer-events: none; left: 0; right: 0; bottom: 0; height: clamp(160px, 28vw, 360px); background: linear-gradient(180deg, transparent, rgba(9,14,29,.08)), var(--farm-background) center bottom / cover no-repeat; opacity: .68; image-rendering: auto; -webkit-mask-image: linear-gradient(transparent, #000 38%); mask-image: linear-gradient(transparent, #000 38%); }
@media (max-width: 1199px) { .node-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.node-grid > .node-card { grid-column: auto; } }
@media (max-width: 719px) { .node-grid { grid-template-columns: 1fr; }.topbar { align-items: stretch; flex-direction: column; gap: .8rem; }.top-actions { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: .55rem; }.summary { min-width: 0; text-align: left; }.admin-mode { margin-left: auto; }.node-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }.edit-dialog { width: min(calc(100vw - 1rem), 560px); max-height: calc(100vh - 1rem); }.edit-dialog form { max-height: calc(100vh - 1rem); } }
@media (max-width: 520px) { body { padding: 1rem .75rem 8rem; }.brand p { display: none; }.top-actions { align-items: center; }.summary small { font-size: .68rem; }.metrics { gap: .8rem .7rem; }.node-card { padding: .85rem; }.node-tools { max-width: 8rem; }.probe-main { grid-template-columns: minmax(0, 1fr) 4rem 3.35rem; gap: .28rem; }.probe-strip { gap: 2px; }.form-grid { grid-template-columns: 1fr; }.form-wide { grid-column: auto; }.calibration-field { grid-template-columns: 1fr; }.calibration-field small { grid-column: auto; }.form-grid input, .form-grid textarea, .inline-button, .button, .icon-button { min-height: 44px; }.dialog-actions .button { flex: 1; }.renewal-row { flex-direction: column; gap: .25rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

:root[data-day-phase="morning"] { --farm-background: url("/assets/farm-morning.webp?v=1.5.10"); }
:root[data-day-phase="noon"] { --farm-background: url("/assets/farm-noon.webp?v=1.5.10"); }
:root[data-day-phase="dusk"] { --farm-background: url("/assets/farm-dusk.webp?v=1.5.10"); }
:root[data-day-phase="night"] { --farm-background: url("/assets/farm-night.webp?v=1.5.10"); }



.dialog-actions { padding-top: .5rem; gap: .7rem; }
.button.primary:hover { background: #2b8861; }
.button.secondary:hover, .inline-button:hover, .icon-button:hover { background: #334e69; }
.button.danger:hover { background: #64323d; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { button, a, input, textarea { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.probe-switch { position: relative; margin-left: auto; flex: 0 0 auto; min-height: 28px; padding: .25rem .5rem; border: 1px solid #3d586f; border-radius: 6px; background: #203b50; color: #c6e3f5; font: inherit; font-size: .68rem; letter-spacing: 0; cursor: pointer; }
.probe-switch:hover { background: #304e68; }

@media (max-width: 719px) { .probe-switch { min-height: 28px; } }

.status-offline { background: linear-gradient(160deg, rgba(37,43,52,.98), rgba(24,29,37,.98)); border-color: #49515d; }
.offline-banner { display: flex; align-items: center; gap: .5rem; margin: -.2rem 0 1rem; padding: .6rem .7rem; color: #d0d4da; background: #363d47; border: 1px solid #515a67; border-radius: 8px; font-size: .85rem; font-weight: 650; }
.offline-banner > span { font-size: .6rem; color: #a5aeb9; }
.status-offline .status-dot { background: #98a2af; box-shadow: 0 0 0 4px rgba(152,162,175,.1); }
.status-offline .metrics, .status-offline .region, .status-offline .device-info { filter: grayscale(1); }
.status-offline .node-meta { color: #a9b1bd; }

.offline-banner small { margin-left: auto; color: #b5bdc8; font-size: .68rem; font-weight: 400; }

.node-subhead { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 46px; margin: .15rem 0 .7rem; }
.probe-row:last-child { border-bottom: 0; padding-bottom: .15rem; }
@media (min-width: 1200px) {
  .node-grid > .node-card:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  .node-grid > .node-card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
  .node-grid > .node-card:last-child:nth-child(3n + 2) { grid-column: 4 / span 2; }
}
@media (max-width: 719px) { .node-card { padding: 1rem; }.node-subhead { min-height: 48px; }.probe-switch { min-height: 28px; }.node-grid { gap: 1rem; } }

.probe-switch::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }

/* 1.5.11 route history */
.details-button,.history-controls button{font:inherit;font-size:12px;color:#cad8e7;background:#1c2d3e;border:1px solid #35495d;border-radius:8px;cursor:pointer;transition:background 160ms,border-color 160ms;min-height:30px;padding:5px 10px}
.details-button:hover,.history-controls button:hover{background:#294259}.details-button:focus-visible,.history-controls button:focus-visible,.history-chart:focus-visible{outline:2px solid #65b9ef;outline-offset:3px}
.history-dialog{width:min(880px,calc(100vw - 40px));max-height:90dvh;overflow:auto;padding:26px;box-sizing:border-box}.history-dialog h2{overflow-wrap:anywhere;font-size:21px}.history-controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.history-tabs{display:flex;gap:6px}.history-controls [aria-pressed=true]{background:#315b79;border-color:#6b9bb9;color:#fff}.history-status,.history-range,.history-help{font-size:12px;color:#9fadc1;line-height:1.7}.history-chart{min-height:180px}.history-chart svg{display:block;width:100%;height:auto;touch-action:pan-y}.history-grid{stroke:#71859d;stroke-opacity:.17}.history-axis{fill:#9fadc1;font-size:12px}.history-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.history-line.telecom{stroke:#55b6ee}.history-line.mobile{stroke:#57d9a5}.history-line.unicom{stroke:#eb82b0}.history-point.telecom{fill:#55b6ee}.history-point.mobile{fill:#57d9a5}.history-point.unicom{fill:#eb82b0}.history-cursor{stroke:#c1d2e3;stroke-dasharray:4 4;opacity:.5}.history-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:13px}.history-legend span:before{content:'●';margin-right:6px}.history-legend .telecom,.history-tooltip .telecom{color:#55b6ee}.history-legend .mobile,.history-tooltip .mobile{color:#57d9a5}.history-legend .unicom,.history-tooltip .unicom{color:#eb82b0}.history-range{text-align:center}.history-tooltip{display:grid;gap:6px;font-size:12px;background:#111e2d;border-radius:10px;padding:14px;min-height:95px;box-sizing:border-box}.history-tooltip:empty:before{content:'选择曲线上的时间点查看详情';color:#8f9fb2}.history-help{margin-bottom:0}
@media(max-width:719px){.history-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:18px}.history-dialog h2{font-size:18px}.history-tabs{gap:4px}.history-controls button{padding:7px 9px}.history-tooltip{font-size:11px}.details-button{padding:4px 7px;font-size:11px}.history-axis{font-size:15px}}
@media(prefers-reduced-motion:reduce){.details-button,.history-controls button{transition:none}}
.preview-notice{text-align:center;padding:8px;background:#243a50;color:#d6e8f6;font-size:12px}
.node-tools{max-width:14rem}.node-badge-group{display:flex;align-items:center;gap:6px;white-space:nowrap}.node-badge-group .details-button{flex:none}.node-badge-group .region{min-width:0}
@media(max-width:520px){.node-tools{max-width:11rem}.node-head{gap:.5rem}.node-badge-group{gap:5px}.history-dialog{min-height:calc(100dvh - 32px)}.history-axis{font-size:12px}}