/* Presentation-only overlay; native CSS and state hooks remain authoritative. */
body.monitor-ui {
  --mon-bg: #f3f5f8; --mon-surface: #ffffff; --mon-ink: #1e293b;
  --mon-muted: #526176; --mon-border: #cbd5e1; --mon-accent: #175cd3;
  --mon-soft: #eaf1ff; --mon-danger: #b42318;
  --color-background-page: var(--mon-bg); --page-background-gradient: none;
  --color-background: var(--mon-surface); --color-text: var(--mon-ink);
  --color-link: var(--mon-accent); --color-table-background: var(--mon-surface);
  --color-background-table-thead: var(--mon-bg); --color-table-line: var(--mon-border);
  --color-watch-table-row-text: var(--mon-ink); --color-watch-table-error: var(--mon-danger);
  --color-border-table-cell: var(--mon-border); --color-border-watch-table-cell: var(--mon-border);
  --watchlist-row-hover: var(--mon-bg); --watchlist-row-selected: var(--mon-soft);
  --color-background-input: var(--mon-surface); --color-text-input: var(--mon-ink);
  --color-border-input: var(--mon-border); --color-shadow-input: transparent;
  --color-text-input-description: var(--mon-muted); --color-text-input-placeholder: var(--mon-muted);
  --color-background-new-watch-input: var(--mon-surface);
  --color-background-new-watch-input-transparent: var(--mon-surface);
  --color-background-new-watch-form: var(--mon-surface); --color-text-new-watch-input: var(--mon-ink);
  --color-text-menu-heading: var(--mon-ink); --color-text-menu-link: var(--mon-ink);
  --color-background-menu-link-hover: var(--mon-soft); --color-sidebar-bg: var(--mon-surface);
  --color-sidebar-text: var(--mon-ink); --color-sidebar-item-hover-bg: var(--mon-soft);
  --color-text-tab: var(--mon-ink); --color-text-tab-active: var(--mon-accent);
  --color-background-tab: var(--mon-surface); --color-background-tab-hover: var(--mon-soft);
  --color-text-legend: var(--mon-ink); --color-last-checked: var(--mon-muted);
  --color-background-button-primary: var(--mon-accent); --color-text-button: #fff;
  --color-background-checkbox-operations: var(--mon-surface);
  margin: 0; background: var(--mon-bg); color: var(--mon-ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5; font-size: 14px;
}
html[data-darkmode="true"] body.monitor-ui {
  --mon-bg: #111827; --mon-surface: #1e293b; --mon-ink: #e5edf6;
  --mon-muted: #b2c0d2; --mon-border: #475569; --mon-accent: #93c5fd;
  --mon-soft: #273b56; --mon-danger: #fda29b; --color-text-button: #142238;
}
@media (prefers-color-scheme: dark) {
  html[data-darkmode="auto"] body.monitor-ui {
    --mon-bg: #111827; --mon-surface: #1e293b; --mon-ink: #e5edf6;
    --mon-muted: #b2c0d2; --mon-border: #475569; --mon-accent: #93c5fd;
    --mon-soft: #273b56; --mon-danger: #fda29b; --color-text-button: #142238;
  }
}
body.monitor-ui::before, body.monitor-ui::after { display: none; }
.monitor-ui *, .monitor-ui *::before, .monitor-ui *::after { box-sizing: border-box; }
.monitor-ui button, .monitor-ui input, .monitor-ui select, .monitor-ui textarea { font-family: inherit; }
.monitor-ui a:focus-visible, .monitor-ui button:focus-visible, .monitor-ui input:focus-visible,
.monitor-ui select:focus-visible, .monitor-ui textarea:focus-visible, .monitor-ui summary:focus-visible {
  outline: 3px solid var(--mon-accent); outline-offset: 3px;
}
.monitor-ui .app-main { min-width: 0; }
.monitor-ui section.content { padding: 20px 24px; }
.monitor-ui .header { background: var(--mon-surface); border-bottom: 1px solid var(--mon-border); padding: 10px 24px; }
.monitor-ui ul#top-right-menu { gap: 16px; }
.monitor-ui .header .status-pill { color: var(--mon-ink); background: var(--mon-bg); border-color: var(--mon-border); min-height: 36px; height: auto; }
.monitor-ui .header .status-pill.paused, .monitor-ui .header .status-pill.muted { color: var(--mon-danger); }
.monitor-ui .action-sidebar-inner { background: var(--mon-surface); border-right: 1px solid var(--mon-border); padding: 18px 12px; }
.monitor-ui .action-sidebar .action-sidebar-item, .monitor-ui .action-sidebar-li, .monitor-ui .action-sidebar-li a { color: var(--mon-ink); }
.monitor-ui .action-sidebar .action-sidebar-item { min-height: 40px; }
.monitor-ui .action-sidebar .action-sidebar-item.active { background: var(--mon-soft); color: var(--mon-accent); }
.monitor-ui .action-sidebar-li:nth-child(2) { padding-top: 12px; }
.monitor-ui ul.action-sidebar-list { gap: 5px; }
.monitor-ui .action-sidebar .action-sidebar-item .action-badge { background: var(--mon-soft); color: var(--mon-accent); }
.monitor-ui .action-sidebar-divider { background: var(--mon-border); }
.monitor-ui #cdio-logo { font-size: 16px; }
.monitor-ui .action-sidebar-li:has(> .is-disabled), .monitor-ui #heart-us,
.monitor-ui #hosting-offer, .monitor-ui .github-link { display: none; }
.monitor-ui .mobile-menu-drawer { background: var(--mon-surface); color: var(--mon-ink); max-width: 90vw; }
.monitor-ui .box { color: var(--mon-ink); border: 1px solid var(--mon-border); background: var(--mon-surface); border-radius: 8px; }
.monitor-ui legend { color: var(--mon-ink); }
.monitor-ui .pure-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.monitor-ui .pure-form select, .monitor-ui .pure-form textarea { max-width: 100%; box-shadow: none; }
.monitor-ui .cdio-btn { color: var(--mon-ink); background: var(--mon-surface); border-color: var(--mon-border); }
.monitor-ui .cdio-btn--primary { color: var(--mon-accent); background: var(--mon-surface); border-color: var(--mon-border); }
.monitor-ui .cdio-btn:hover, .monitor-ui .pure-button:hover { background-image: none; filter: brightness(.96); }
.monitor-ui .pure-button-primary { background: var(--mon-accent); color: var(--color-text-button); }
.monitor-ui .seg { border: 1px solid var(--mon-border); background: var(--mon-bg); }
.monitor-ui .seg a { color: var(--mon-muted); }
.monitor-ui .seg a.active { color: var(--mon-accent); background: var(--mon-surface); box-shadow: none; }
.monitor-ui .monitor-heading { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.monitor-heading h1 { font-size: 23px; line-height: 1.3; letter-spacing: .02em; margin: 0 0 6px; font-weight: 650; }
.monitor-heading p { margin: 0; color: var(--mon-muted); }
.monitor-ui .monitor-workflow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; min-height: 44px; border: 1px solid var(--mon-border); background: var(--mon-surface); border-radius: 6px; white-space: nowrap; color: var(--mon-accent); text-decoration: none; }
.monitor-forwarding-note { width: 100%; font-size: 12px; color: var(--mon-muted); margin: 12px 0 18px; }
.monitor-ui #monitor-add-watch { width: 100%; margin-bottom: 16px; border: 1px solid var(--mon-border); border-radius: 8px; background: var(--mon-surface); }
.monitor-ui #monitor-add-summary { cursor: pointer; padding: 10px 16px; min-height: 44px; color: var(--mon-accent); font-weight: 600; }
.monitor-ui #monitor-add-watch[open] #monitor-add-summary { border-bottom: 1px solid var(--mon-border); }
body.monitor-ui.blueprint-watchlist #add-watch-ui { margin: 0; border: none; background: none; }
.monitor-ui #new-watch-form { border-radius: 0; margin: 0; padding: 16px; }
.monitor-ui #add-watch-url-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.monitor-ui.blueprint-watchlist #url { min-width: 0; max-width: 100%; flex: 1 1 260px; height: 44px; }
.monitor-ui #add-watch-go { min-height: 44px; }
.monitor-ui.blueprint-watchlist .content-main > .box { width: 100%; padding: 16px; }
.monitor-ui #tag-lister { display: flex; flex-wrap: wrap; gap: 6px; }
.monitor-ui #tag-lister .button-tag, .monitor-ui .watch-table .watch-tag-list {
  background: var(--mon-bg) !important; color: var(--mon-muted) !important; border: 1px solid var(--mon-border); opacity: 1 !important; font-weight: 400;
}
.monitor-ui #tag-lister .button-tag { margin: 0; padding: 6px 10px; font-size: 12px; }
.monitor-ui #tag-lister .button-tag.active { background: var(--mon-soft) !important; border-color: var(--mon-accent); color: var(--mon-accent) !important; font-weight: 600; }
.monitor-ui .watch-table .watch-tag-list { display: inline-block; border: 0; padding: 2px 5px; margin: 4px 4px 0 0; border-radius: 4px; font-size: 11px; }
.monitor-ui #list-related-buttons { padding: 14px 0 !important; }
.monitor-ui #buttons-for-all-watches { display: flex; flex-wrap: wrap; gap: 6px; }
.monitor-ui .cdio-table-clip { border: 1px solid var(--mon-border); }
.monitor-ui .watch-table { table-layout: fixed; width: 100%; }
.monitor-ui .watch-table td, .monitor-ui .watch-table th { padding: 12px 6px; }
.monitor-ui .watch-table th { color: var(--mon-muted); background: var(--mon-bg); font-size: 12px; text-transform: none; }
.monitor-ui .watch-table .watch-title { font-weight: 600; color: var(--mon-ink); overflow-wrap: anywhere; word-break: normal; }
.monitor-ui .watch-table .watch-text-info { min-width: 0; }
.monitor-ui .watch-table .title-col { word-break: normal; overflow-wrap: anywhere; }
.monitor-ui .watch-table td.inline.title-col { width: auto; }
.monitor-ui .watch-table .buttons > div > * { opacity: 1; }
.monitor-ui .watch-table td.buttons > div { flex-wrap: wrap; gap: 5px; }
.monitor-ui .watch-table .buttons .cdio-btn { font-size: 12px; padding: 0 8px; min-height: 32px; }
.monitor-ui .watch-table .watch-controls .state-off svg { opacity: .8; }
.monitor-ui .watch-table .watch-controls .state-on svg { opacity: 1; }
.monitor-ui .watch-table .last-checked, .monitor-ui .watch-table .last-changed { font-size: 12px; color: var(--mon-muted); font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.monitor-ui .watch-table .error-text { font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.monitor-ui .watch-table tr.has-error .watch-title { color: var(--mon-danger); }
.monitor-ui .watch-table .processor-badge { background: var(--mon-soft); color: var(--mon-accent); border-color: var(--mon-border); white-space: normal; }
.monitor-ui .monitor-footer { padding: 12px 24px 20px; margin-top: auto; color: var(--mon-muted); font-size: 12px; text-align: center; }
.monitor-ui.monitor-login .header, .monitor-ui.monitor-login .action-sidebar,
.monitor-ui.monitor-login #checking-now-fixed-tab, .monitor-ui.monitor-login #realtime-conn-error { display: none !important; }
.monitor-ui.monitor-login section.content { padding-top: clamp(28px, 12vh, 110px); }
.monitor-ui.monitor-login .login-form { min-height: 0; width: 100%; padding: 0; }
.monitor-ui.monitor-login .login-form .inner { max-width: 420px; padding: 32px; border: 1px solid var(--mon-border); border-radius: 10px; box-shadow: 0 6px 24px #0f172a0a; }
.monitor-ui.monitor-login h1 { margin: 0 0 10px; font-size: 23px; }
.monitor-login-description { color: var(--mon-muted); margin: 0 0 28px; }
.monitor-ui.monitor-login .login-form input { border: 1px solid var(--mon-border); min-height: 48px; }
.monitor-ui.monitor-login .login-form button { box-shadow: none; min-height: 48px; }
.monitor-ui.monitor-login .content-main > ul.messages { position: static; transform: none; min-width: 0; width: 100%; max-width: 420px; margin-bottom: 16px; }
@media (min-width: 981px) {
  .monitor-ui .watch-table th:first-child { width: 38px; }
  .monitor-ui .watch-table #mute-pause { width: 68px; }
  .monitor-ui .watch-table th:nth-child(3) { width: 64px; }
  .monitor-ui .watch-table #h-lastchecked, .monitor-ui .watch-table #h-lastchanged { width: 96px; }
  .monitor-ui .watch-table .empty-cell { width: 216px; }
  .monitor-ui .watch-table .col-restock-price { width: 90px; }
}
@media (max-width: 980px) {
  .monitor-ui section.content { padding: 18px 16px; }
  .monitor-ui .header { padding: 8px 16px; }
  .monitor-ui .watch-table, .monitor-ui .watch-table tbody { display: block; }
  .monitor-ui .watch-table thead { display: block; background: var(--mon-bg); }
  .monitor-ui .watch-table thead tr { display: flex; flex-wrap: wrap; padding: 6px; }
  .monitor-ui .watch-table thead th { display: inline-flex; align-items: center; }
  .monitor-ui .watch-table thead .empty-cell { display: none; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 14px 10px; margin: 0; border-bottom: 1px solid var(--mon-border); }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] > td { min-width: 0; width: auto; padding: 0; border: 0; display: block; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] .title-col { grid-column: 1 / -1; grid-row: 1; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] .watch-processor { grid-column: 1 / -1; grid-row: 2; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] .col-restock-price { grid-column: 1 / -1; grid-row: 3; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] .last-checked { grid-column: 1 / -1; grid-row: 4; text-align: left; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] .last-changed { grid-column: 1 / -1; grid-row: 5; text-align: left; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] .checkbox-uuid { grid-column: 1; grid-row: 6; display: grid; place-items: center; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] .watch-controls { grid-column: 3; grid-row: 6; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] .buttons { grid-column: 1 / -1; grid-row: 7; }
  .monitor-ui .watch-table .last-checked::before, .monitor-ui .watch-table .last-changed::before { content: attr(data-label) "  "; color: var(--mon-muted); }
  .monitor-ui .watch-table .last-checked .innertext, .monitor-ui .watch-table .last-changed .innertext { white-space: normal; }
  .monitor-ui .watch-table .buttons > div { display: flex; width: 100%; gap: 8px; }
  .monitor-ui .watch-table .buttons .cdio-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; font-size: 14px; }
  .monitor-ui .watch-table .watch-controls button { width: 44px; min-height: 44px; }
  .monitor-ui .watch-table .checkbox-uuid > div { display: grid; place-items: center; width: 44px; min-height: 44px; }
  .monitor-ui input[type="checkbox"] { width: 22px; height: 22px; }
  .monitor-ui button:not([hidden]), .monitor-ui .pure-button, .monitor-ui .seg a, .monitor-ui .action-sidebar-item, .monitor-ui .watch-table th a { min-height: 44px; }
  .monitor-ui .watch-table th a, .monitor-ui .seg a { display: inline-flex; align-items: center; }
  .monitor-ui #tag-lister .button-tag { display: inline-flex; align-items: center; min-height: 44px; }
  .monitor-ui .watch-table .watch-title a.external { width: 44px; min-width: 44px; height: 44px; justify-content: center; }
  .monitor-ui .watch-table .watch-tag-list, .monitor-ui .watch-table .processor-badge { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 8px; }
}
@media (max-width: 760px) {
  .monitor-ui section.content { padding: 16px 10px; }
  .monitor-ui .header { padding: 6px 10px; }
  .monitor-ui ul#top-right-menu { gap: 8px; }
  .monitor-ui .header .status-pill { font-size: 11px; padding: 0 7px; gap: 4px; }
  .monitor-ui .monitor-heading { align-items: flex-start; gap: 10px; }
  .monitor-heading h1 { font-size: 21px; }
  .monitor-heading p { font-size: 12px; }
  .monitor-ui .monitor-workflow { padding: 8px 10px; font-size: 12px; }
  .monitor-forwarding-note { margin-bottom: 14px; }
  .monitor-ui.blueprint-watchlist .content-main > .box { background: transparent; border: none; }
  .monitor-ui .cdio-table-clip { overflow: visible; border: none; }
  .monitor-ui .watch-table thead { border: 1px solid var(--mon-border); border-radius: 6px; margin: 12px 0; }
  .monitor-ui .watch-table tbody tr[data-watch-uuid] { border: 1px solid var(--mon-border); border-radius: 8px; margin-bottom: 12px; background: var(--mon-surface); }
  .monitor-ui #add-watch-url-row > label { width: 100%; }
  .monitor-ui #add-watch-go { width: 100%; }
  .monitor-ui.monitor-login .login-form .inner { padding: 28px 22px; }
  .monitor-ui .edit-form { min-width: 0; }
  .monitor-ui .tabs { max-width: 100%; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .monitor-ui *, .monitor-ui *::before, .monitor-ui *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}