/* Connection workspace: layout and functional topology, shared components in style.css. */
:root {
  --nav-width: 196px;
  --header-height: 68px;
  --work-ink: #17212b;
  --work-subtle: #65727e;
  --work-line: #e2e7eb;
  --work-accent: #0f766e;
  --work-backup: #285c91;
}
body { background: #f4f7f6; color: var(--work-ink); font-size: 14px; }
[hidden], #legacy-workspace, #warp-section, #warp-license-modal,
.form-group:has(#qd-use-warp), label:has(#batch-use-warp) { display: none !important; }
.dashboard { padding-left: var(--nav-width); }
.header { min-height: calc(68px + var(--safe-top)); padding: calc(14px + var(--safe-top)) 32px 14px; background: #fff; border-color: var(--work-line); }
.header h1 { font-size: 15px; font-weight: 600; }
.header-title .eyebrow { display: none; }
.section-nav { width: var(--nav-width); padding: 31px 16px 22px; background: #fff; border-color: var(--work-line); gap: 9px; }
.nav-brand { padding: 0 8px 38px; gap: 10px; }
.brand-mark { background: #0f766e; color: white; border-radius: 10px; width: 34px; height: 34px; flex-basis: 34px; font-size: 22px; }
.nav-brand strong { color: #17212b; font-size: 21px; font-weight: 650; letter-spacing: -.5px; }
.nav-brand small { color: #62737d; font-size: 11px; }
.section-nav > a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 65px; padding: 11px 15px; border: 0; border-radius: 9px; color: #65727e; font-size: 14px; font-weight: 600; }
.section-nav > a > span:first-child { width: auto; text-align: left; font-size: 14px; line-height: 1.5; }
.section-nav > a > small { font-size: 11px; font-weight: 400; color: #62737d; }
.section-nav > a.active { background: #e8f3f0; color: #0b685f; border: 0; }
.section-nav > a.active > small { color: #55877e; }
.section-nav > a:hover { background: #f1f5f4; }
.nav-note { color: #62737d; padding: 18px 7px 0; font-size: 11px; }
.account-menu > summary { border-color: #e2e7eb; background: #fff; min-height: 40px; color: #495660; }
.account-symbol { display: none; }
.account-menu-panel { background: #fff; border-color: #e2e7eb; box-shadow: 0 14px 34px #17212b12; }
.account-menu-panel .btn { background: #fff; color: #344451; border-color: #e2e7eb; }
.main { max-width: 1680px; padding: 22px 28px 50px; }
.work-page { min-width: 0; }
.work-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 4px; }
.work-page-heading h2 { margin: 2px 0 5px; font-size: 28px; font-weight: 650; line-height: 1.3; letter-spacing: -.6px; }
.work-page-heading p:not(.work-eyebrow) { margin: 0; color: #526570; font-size: 13px; }
.work-page-heading .work-eyebrow { display: none; }
.work-eyebrow { margin: 0; color: #62737d; font-size: 11px; letter-spacing: .5px; font-weight: 500; }
.work-page-heading > .btn { min-height: 44px; padding: 11px 20px; }
.btn { font-weight: 550; box-shadow: none; }
.btn-primary { background: #0f766e; border-color: #0f766e; color: #fff; }
.btn-primary:hover { background: #0b655e; border-color: #0b655e; }
.btn-danger { background: #fff; color: #b4233a; border-color: #efd0d6; }
.btn-danger:hover { background: #fff3f4; }
.btn-warning { background: #fff; border-color: #e5d6bd; color: #906521; }
.btn-accent { background: #f3f6f6; border-color: #dbe4e2; color: #295e54; }
.protocol-badge { background: #f0f3f5 !important; color: #53616d !important; font-weight: 500; }
.work-status-line { display: flex; align-items: center; gap: 7px; min-height: 33px; color: #62737d; font-size: 11px; }
.work-status-line > [role=status] { min-width: 0; overflow-wrap: anywhere; }
.work-status-line > button { flex-shrink: 0; }
#work-updated[data-state=error], #work-monitor-updated[data-state=error] { color: #a13838; }
#work-updated[data-state=loading] { color: #526670; }
.work-live-marker { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #8d999f; flex: 0 0 5px; }
.work-text-button { display: inline-flex; justify-content: center; align-items: center; gap: 5px; min-height: 44px; min-width: 44px; border: 0; background: transparent; padding: 5px 8px; color: #487b73; font-size: 12px; font-weight: 550; cursor: pointer; border-radius: 6px; white-space: nowrap; }
.work-text-button:hover { background: #edf5f2; }
.work-text-button:disabled { color: #9ba5ad; }
.work-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 0 18px; padding: 12px 0 16px; gap: 0; background: transparent; border-bottom: 1px solid #dce5e4; font-variant-numeric: tabular-nums; }
.work-summary:empty { display: none; }
.work-summary-item, .work-summary > div { min-width: 0; padding: 0 24px; border-right: 1px solid #e1e6e9; }
.work-summary-item:first-child, .work-summary > div:first-child { padding-left: 0; }
.work-summary-item:last-child, .work-summary > div:last-child { border-right: 0; }
.work-summary-item > span, .work-summary > div > span { display: block; margin-bottom: 5px; color: #526570; font-size: 12px; }
.work-summary-item > strong, .work-summary > div > strong { display: block; color: #273743; font: 600 25px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -.5px; }
.work-summary small { color: #62737d; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.work-summary-item > small { display: block; margin-top: 5px; min-height: 14px; font-size: 11px; line-height: 1.5; }
.work-list-surface { min-width: 0; background: #fff; border: 1px solid #e0e6e9; border-radius: 12px; }
.work-toolbar { display: flex; align-items: center; gap: 10px; padding: 19px 20px 7px; }
.work-scope-control { flex: 0 0 155px; min-width: 0; }
.work-scope-control select { width: 100%; min-height: 44px; padding: 9px 10px; border-color: #bcd6ce; background: #f2f8f5; color: #275d50; font-size: 12px; font-weight: 600; }
.work-scope-help { margin: 0; padding: 2px 20px 0; color: #5f726c; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.work-scope-help:empty { display: none; }
.work-search { min-width: 160px; flex: 1; max-width: 360px; }
.work-search input[type=search] { border-color: #dde4e8; background: #fafbfc; min-height: 40px; padding: 9px 12px; font-size: 12px; }
.work-filters { display: flex; gap: 8px; }
.work-filters select { width: auto; min-width: 105px; min-height: 40px; border-color: #e2e7eb; background: #fff; padding: 8px 10px; font-size: 12px; }
.work-view-switch { display: inline-flex; flex: 0 0 auto; gap: 2px; background: #f3f5f7; border: 1px solid #e8ecef; padding: 3px; border-radius: 8px; margin-left: auto; }
.work-view-switch > button { min-height: 44px; min-width: 47px; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; color: #62737d; cursor: pointer; font-size: 11px; }
.work-view-switch > button[aria-pressed=true] { background: #fff; color: #244d46; box-shadow: 0 1px 4px #17212b0d; }
.work-list-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 3px 20px 8px; color: #62737d; font-size: 11px; }
.work-list-tools { display: flex; align-items: center; gap: 9px; }
.work-management-menu { position: relative; }
.work-management-menu summary { color: #62737d; }
.work-management-panel { position: absolute; top: 100%; right: 0; z-index: 35; width: 190px; display: grid; gap: 3px; padding: 7px; border: 1px solid #e0e7ea; border-radius: 9px; background: #fff; box-shadow: 0 12px 28px #17212b12; }
.work-management-panel button { border: 0; min-height: 44px; padding: 10px 12px; text-align: left; background: #fff; color: #536974; border-radius: 6px; cursor: pointer; font-size: 12px; }
.work-management-panel button:hover { background: #f0f6f3; }
.work-table-container { width: 100%; overflow: auto; }
.work-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.work-table th { padding: 11px 18px; color: #62737d; background: #fafbfc; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; font-size: 11px; font-weight: 500; text-align: left; }
.work-table th:nth-child(1) { width: 20%; }
.work-table th:nth-child(2) { width: 37%; }
.work-table th:nth-child(3) { width: 13%; }
.work-table th:nth-child(4) { width: 14%; }
.work-table th:nth-child(5) { width: 16%; }
.work-table td { min-width: 0; padding: 18px; height: 100px; border-bottom: 1px solid #edf0f2; vertical-align: middle; font-size: 12px; color: #344451; overflow-wrap: anywhere; }
.work-table tbody tr:last-child td { border-bottom: 0; }
.work-table tbody tr:hover { background: #fcfdfd; }
.work-identity strong, .work-connection-name, .work-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; color: #25343f; }
.work-node-type { display: inline-flex; align-items: center; min-height: 25px; margin: 0 6px 7px 0; padding: 3px 7px; border-radius: 5px; background: #eff2f4; color: #52616d; font-size: 11px; font-weight: 650; line-height: 1.5; }
.work-connection-row[data-route-mode=relay] .work-node-type { background: #e5f2ec; color: #14634d; }
.work-connection-row[data-route-mode=mixed] .work-node-type { background: #edf2f8; color: #455e7a; }
.work-connection-row[data-route-mode=unknown] .work-node-type, .work-connection-row[data-route-mode=unbound] .work-node-type { background: #faf2df; color: #80601a; }
.work-connection-row[data-route-mode=blocked] .work-node-type { background: #fbecee; color: #a03c4a; }
.work-identity .work-connection-name { margin: 0 0 5px; }
.work-identity small { display: block; margin-top: 5px; color: #62737d; font-size: 11px; }
.work-identity > .work-protocol { margin: 0 0 7px; }
.work-route-mode { color: #345c53; font-size: 11px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.work-identity .work-route-mode { display: block; margin-top: 6px; }
.work-topology-card > .work-route-mode { margin: -6px 0 14px; }
.work-detail-body > .work-route-mode { margin: -10px 0 6px; font-size: 12px; }
.work-detail-body > .work-route-mode + .work-help { margin: 0 0 20px; }
.work-address { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; margin-top: 5px; background: none; color: #62737d; font-size: 11px; }
.work-path-summary > strong { display: block; color: #4c6370; font-size: 12px; font-weight: 550; }
.work-path-summary > small { display: block; margin-top: 7px; color: #62737d; font-size: 11px; }
.work-path-hops { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; min-width: 0; }
.work-path-hop { position: relative; min-width: 0; padding: 9px 10px; border: 1px solid #e5ebed; border-radius: 7px; background: #fafcfc; }
.work-path-hop:not(:last-child):after { content: '→'; position: absolute; top: 50%; right: -14px; transform: translateY(-50%); color: #668b7e; font-size: 13px; }
.work-hop-label { display: block; color: #526e65; font-size: 11px; font-weight: 600; line-height: 1.5; }
.work-hop-name { display: block; color: #2b414b; font-size: 12px; font-weight: 600; line-height: 1.55; margin-top: 4px; overflow-wrap: anywhere; }
.work-hop-address { display: block; min-width: 0; margin-top: 4px; padding: 0; background: none; color: #526b75; font: 11px/1.6 var(--font-mono); white-space: normal; overflow-wrap: anywhere; }
.work-hop-port { display: inline-block; white-space: nowrap; }
.work-connection-row[data-route-mode=relay] .work-path-hop:first-child, .work-share-card[data-route-mode=relay] .work-path-hop:first-child { border-color: #b8d5ca; border-left: 3px solid #208468; background: #f0f8f3; }
.work-connection-row[data-route-mode=relay] .work-path-hop:first-child .work-hop-label, .work-share-card[data-route-mode=relay] .work-path-hop:first-child .work-hop-label { color: #17644f; }
.work-protocols { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 8px; }
.work-protocols > *, .work-protocol { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border: 1px solid #e5eaed; border-radius: 5px; background: #fafbfc; color: #63727e; font-size: 11px; padding: 3px 7px; text-decoration: none; }
.work-protocols > button { cursor: pointer; }
.work-protocols > button:hover { background: #edf5f2; border-color: #c7ded7; color: #0f766e; }
.work-route { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); list-style: none; gap: 14px; margin: 0; padding: 0; min-width: 0; }
.work-route-node { position: relative; min-width: 0; }
.work-route-node:not(:last-child):after { content: '→'; position: absolute; right: -12px; top: 19px; color: #bbc5cb; font-size: 12px; }
.work-route-role { display: block; font-size: 11px; color: #62737d; margin-bottom: 5px; }
.work-route-name { display: block; color: #41535f; font-weight: 550; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-route-address { display: block; padding: 0; background: none; color: #62737d; font: 11px/1.55 var(--font-mono); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-health > *, .work-traffic > * { display: block; }
.work-health small, .work-traffic small, .work-sampled { margin-top: 6px; color: #62737d; font-size: 11px; }
.work-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #62737d; }
.work-state:before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.work-state[data-state=healthy], .work-state[data-state=online], .work-state[data-state=enabled] { color: #178166; }
.work-state[data-state=attention], .work-state[data-state=stale], .work-state[data-state=warning] { color: #9a711d; }
.work-state[data-state=failed], .work-state[data-state=offline] { color: #b84454; }
.work-state-good { color: #178166; }
.work-state-warning { color: #9a711d; }
.work-state-muted { color: #62737d; }
.work-traffic-values > strong { display: block; color: #455a65; font-size: 13px; font-weight: 550; }
.work-traffic-values > small { display: block; max-width: 100%; margin-top: 6px; font-size: 11px; line-height: 1.55; color: #62737d; }
.work-rate { font-weight: 600; color: #455a65; font-size: 12px; font-variant-numeric: tabular-nums; }
.work-actions { min-width: 0; }
.work-actions > button + button { margin-left: 5px; }
.work-actions > div, .work-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.work-actions button, .work-actions .btn { min-height: 44px; min-width: 44px; padding: 6px 9px; border: 1px solid #dee7e4; background: #fff; color: #437569; font-size: 11px; border-radius: 7px; cursor: pointer; }
.work-actions button:hover { background: #f0f7f4; }
.work-actions .btn-primary { color: #0b6c60; background: #edf6f2; border-color: #d9e9e2; }
.work-actions .btn-danger { color: #b4233a; background: #fff; border-color: #efd0d6; }
.work-actions details { position: relative; }
.work-actions summary { padding: 7px 8px; min-height: 34px; color: #62737d; font-size: 11px; border-radius: 6px; }
.work-actions details[open] > :not(summary), .work-row-menu { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 160px; display: grid; gap: 4px; padding: 8px; background: #fff; border: 1px solid #dde4e8; border-radius: 10px; box-shadow: 0 12px 30px #17212b12; }
.work-row-menu button { width: 100%; justify-content: flex-start; text-align: left; }
.work-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-top: 1px solid #edf0f2; color: #62737d; font-size: 11px; }
.work-pagination > label, .work-pagination > div { display: flex; align-items: center; gap: 8px; }
.work-pagination select { width: 66px; min-height: 44px; padding: 6px 8px; border-color: #e2e7eb; background: #fff; font-size: 11px; }
.work-pagination .btn { min-height: 44px; padding: 6px 10px; background: #fff; border-color: #e2e7eb; color: #65727e; font-size: 11px; }
#work-page-label { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.work-empty, .work-loading { padding: 42px 20px !important; text-align: center; color: #526570 !important; font-size: 13px; }
.work-topology-view { padding: 22px; }
.work-topology-intro { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.work-topology-intro strong { font-size: 13px; font-weight: 600; color: #354955; }
.work-topology-intro span { font-size: 11px; color: #62737d; }
.work-topology-card { border: 1px solid #e3e9eb; border-radius: 10px; background: #fff; padding: 20px; margin: 0 0 15px; min-width: 0; }
.work-topology-card:last-child { margin-bottom: 0; }
.work-topology-card > header, .work-topology-header { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.work-topology-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.work-topology-heading > h3 { min-width: 0; overflow-wrap: anywhere; }
.work-topology-heading > button { flex-shrink: 0; }
.work-topology-card h3, .work-topology-card h4 { font-size: 14px; margin: 0; font-weight: 600; }
.work-topology-card .work-route { gap: 35px; }
.work-topology-card .work-route-node { border: 1px solid #dce7e3; border-radius: 8px; padding: 12px 14px; background: #f8fbfa; }
.work-topology-card .work-route-node:after { right: -24px; top: 50%; transform: translateY(-50%); font-size: 17px; color: #a8bdb5; }
.work-topology-card .work-route-role { font-size: 11px; }
.work-topology-card .work-route-name { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.work-topology-card .work-route-address { font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.work-route-branches { display: grid; gap: 14px; min-width: 0; border-left: 2px solid #d7e5df; padding-left: 22px; margin: 18px 0 0 18px; }
.work-route-branch { position: relative; min-width: 0; border: 1px solid #e4eaec; border-radius: 8px; padding: 14px; background: #fff; }
.work-route-branch:before { content: ''; position: absolute; width: 22px; height: 1px; top: 27px; left: -24px; background: #d7e5df; }
.work-route-rule { display: block; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid #edf1f2; color: #7e8c96; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; white-space: normal; }
.work-route-rule strong { color: #526671; font-weight: 550; }
.work-route-branch > span { display: block; color: #3c6253; font-size: 12px; font-weight: 550; }
.work-route-branch > small { display: block; margin-top: 6px; color: #62737d; font-size: 11px; }
.work-rule-values { padding: 11px 13px; margin: 10px 0 0; border-radius: 7px; background: #f4f7f8; color: #657f8a; font: 11px/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.work-help { color: #62737d; font-size: 11px; line-height: 1.8; }
.work-monitor-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.work-server-card, .work-monitor-card { min-width: 0; padding: 22px; background: #fff; border: 1px solid #e1e7ea; border-radius: 11px; }
.work-server-card > header, .work-monitor-card > header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.work-server-card h3, .work-monitor-card h3 { margin: 0 0 5px; color: #2f424e; font-size: 15px; }
.work-server-card small, .work-monitor-card small { color: #62737d; font-size: 11px; }
.work-server-metrics, .work-monitor-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.work-server-metrics > div, .work-monitor-metrics > div { min-width: 0; }
.work-server-metrics span, .work-monitor-metrics span { display: block; color: #62737d; font-size: 11px; margin-bottom: 6px; }
.work-server-metrics strong, .work-monitor-metrics strong { font-size: 19px; font-weight: 550; color: #3b515d; }
.work-server-card progress, .work-monitor-card progress { accent-color: #308978; width: 100%; height: 4px; display: block; margin-top: 9px; }
.work-server-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-top: 23px; padding-top: 15px; border-top: 1px solid #edf1f2; color: #62737d; font-size: 11px; }
.work-monitor-interface { padding: 15px 0; border-bottom: 1px solid #edf1f2; }
.work-monitor-interface:last-child { border: 0; }
.work-monitor-interface strong, .work-monitor-interface span, .work-monitor-interface small { display: block; margin: 4px 0; }
.work-monitor-interface strong { font-size: 12px; color: #415d69; }
.work-monitor-interface span { font-size: 12px; color: #62737d; }
.work-server-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; border-bottom: 1px solid #edf1f2; padding: 14px 0; font-size: 11px; }
.work-server-row strong { color: #45626d; font-weight: 550; overflow-wrap: anywhere; }
.work-server-row code { background: none; color: #62737d; padding: 0; font-size: 11px; }
.work-server-row span { color: #62737d; }
.work-server-row small { text-align: right; }
.work-server-search { width: 100%; min-height: 44px; margin: 4px 0 7px; }
.work-server-row code { min-width: 0; max-width: 100%; overflow-wrap: anywhere; text-align: right; }
.work-server-row > .btn { grid-column: 1 / -1; justify-self: end; min-height: 44px; margin-top: 4px; }
.work-monitor-card > .work-pagination { padding: 16px 0 0; gap: 8px; margin-top: 8px; border-top: 0; }
.work-monitor-card > .work-pagination > span { min-width: 0; text-align: center; line-height: 1.7; }
.work-monitor-card > .work-pagination > .btn { flex-shrink: 0; min-height: 44px; }
.work-metrics-content { display: grid; gap: 16px; }
.work-metrics-content > .work-help { margin: 0; }
.work-metrics-content .work-monitor-card > h4 { margin: 0 0 12px; }
.work-metrics-content .work-monitor-card > p { font-size: 11px; color: #62737d; line-height: 1.8; overflow-wrap: anywhere; }
.work-metrics-content .work-summary { margin: 18px 0; padding: 16px 0; }
.work-metrics-content .work-summary > div { padding: 0 12px; }
.work-metrics-content .work-summary > div:first-child { padding-left: 0; }
.work-metrics-content .work-summary > div > strong { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
#work-activity .card { background: #fff; border-color: #e1e7ea; border-radius: 11px; }
#work-activity .card-header { background: transparent; padding: 20px; }
#work-activity .card-header h2 { font-size: 15px; }
#work-activity #jobs-section { margin-top: 25px; }
#work-activity #logs-section { margin-top: 28px; }
#work-activity .log-content { color: #71838d; }
.modal { background: #263b4560; backdrop-filter: blur(3px); }
.modal-content { background: #fff; border-color: #e1e7ea; box-shadow: 0 22px 80px #17212b26; border-radius: 14px; }
.modal-header { background: #fff; border-color: #e7edef; padding: 17px 22px; }
.modal-header h3 { font-size: 18px; letter-spacing: -.3px; color: #2c404c; }
.modal-header .work-eyebrow { margin-bottom: 4px; }
.close-btn { border-color: #e6ecef; border-radius: 8px; color: #7b8991; font-weight: 300; }
.form-actions { background: #fbfcfc; border-color: #e7edef; box-shadow: none; }
.form-section { background: #f9fbfb; border-color: #e3e9eb; }
input[type=text],input[type=password],input[type=number],input[type=search],select,textarea { border-color: #dce4e8; background: #fff; color: #2e4450; }
input:not([type]) { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; border: 1px solid #dce4e8; border-radius: 9px; background: #fff; color: #2e4450; padding: 11px 12px; font-size: 14px; }
input::placeholder,textarea::placeholder { color: #65727e; opacity: 1; }
input:focus,textarea:focus,select:focus { border-color: #7aac9e; outline-color: #9ccabb; }
input[readonly],textarea[readonly] { background: #f7fafa; color: #557b71; }
.work-detail-body { padding: 24px; }
.work-detail-body h3, .work-detail-body h4 { color: #405762; font-size: 14px; font-weight: 600; }
.work-detail-body .work-topology-card { background: #fafcfc; }
.work-detail-name { margin: 0 0 20px; font-size: 18px !important; overflow-wrap: anywhere; }
.work-detail-route-badge { display: inline-flex; min-height: 27px; align-items: center; padding: 4px 9px; margin: 0 0 12px; border-radius: 5px; background: #eff3f5; color: #526874; font-size: 12px; font-weight: 650; }
.work-detail-route-badge[data-route-mode=relay] { color: #155f4b; background: #e5f2eb; }
.work-detail-route-badge[data-route-mode=unknown], .work-detail-route-badge[data-route-mode=unbound] { color: #80601a; background: #faf2df; }
.work-detail-route-badge[data-route-mode=blocked] { color: #a03c4a; background: #fbecee; }
.work-detail-path { margin: 0 0 16px; padding-left: 11px; border-left: 2px solid #bed6cc; color: #486459; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.work-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.work-detail-body > .work-connection-topology { padding: 18px; border: 1px solid #e1e9e6; background: #f9fbfa; border-radius: 10px; margin-bottom: 22px; }
.work-detail-body > .work-connection-topology .work-route { gap: 24px; }
.work-detail-body > .work-connection-topology .work-route-name, .work-detail-body > .work-connection-topology .work-route-address { white-space: normal; overflow-wrap: anywhere; }
.work-detail-body > .work-connection-topology .work-route-node:after { right: -18px; }
.work-issues { margin: 0 0 20px; padding: 13px 13px 13px 29px; border-radius: 8px; background: #fff9ed; color: #946e2e; font-size: 12px; line-height: 1.8; }
.work-share-list { display: grid; gap: 12px; }
.work-share-item { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px; border: 1px solid #e1e8e9; border-radius: 9px; }
.work-share-item textarea { flex: 1 1 100%; font: 11px/1.7 var(--font-mono); }
.work-share-item button { min-width: 100px; }
.work-share-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 22px; }
.work-share-cards:has(> .work-share-card:only-child) { grid-template-columns: minmax(0,1fr); }
.work-share-cards:has(> .work-share-card:nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.work-share-card { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid #dce7e3; border-radius: 10px; background: #fff; }
.work-share-card[data-route-mode=relay] { border-color: #b4d3c6; box-shadow: inset 0 3px 0 #278469; }
.work-share-card > .work-path-hops { grid-template-columns: minmax(0,1fr); gap: 17px; margin-bottom: 15px; }
.work-share-card > .work-path-hops .work-path-hop { display: grid; grid-template-columns: 58px minmax(0,1fr); column-gap: 8px; }
.work-share-card > .work-path-hops .work-hop-label { grid-row: 1 / 3; align-self: center; }
.work-share-card > .work-path-hops .work-hop-name, .work-share-card > .work-path-hops .work-hop-address { grid-column: 2; margin-top: 0; }
.work-share-card > .work-path-hops .work-path-hop:not(:last-child):after { content: '↓'; left: 34px; right: auto; top: auto; bottom: -17px; transform: none; line-height: 16px; }
.work-share-card-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 12px; color: #294d43; font-size: 13px; line-height: 1.5; }
.work-share-card-heading > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.work-share-card-heading strong, .work-share-card-heading h3, .work-share-card-heading h4 { margin: 0; font-size: 14px; color: #294d43; }
.work-share-card-heading small { color: #62737d; font-size: 11px; }
.work-share-path { min-width: 0; padding: 11px 12px; margin: 0 0 14px; background: #f5f9f7; border-radius: 7px; color: #4b655b; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-line; }
.work-share-path code { font: 11px/1.8 var(--font-mono); color: inherit; background: none; padding: 0; white-space: normal; overflow-wrap: anywhere; }
.work-share-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; min-height: 44px; }
.work-share-primary-actions > button, .work-share-primary-actions > .btn { flex: 1 1 calc(50% - 4px); min-width: 44px; min-height: 44px; padding: 8px; font-size: 12px; }
.work-share-card > details { margin-top: 9px; border-top: 1px solid #edf1ef; }
.work-share-card > details > summary { display: flex; align-items: center; min-height: 44px; color: #62737d; font-size: 11px; cursor: pointer; }
.work-share-card > details > summary:after { content: '展开'; margin-left: auto; color: #487b73; font-size: 11px; }
.work-share-card > details[open] > summary:after { content: '收起'; }
.work-share-card > details textarea, .work-share-card > details pre, .work-share-card > details code { display: block; min-width: 0; width: 100%; max-width: 100%; margin: 0; padding: 10px; border: 1px solid #e1e8e9; border-radius: 7px; background: #f8faf9; color: #526e64; font: 11px/1.65 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.work-share-card > details textarea { min-height: 92px; max-height: 180px; resize: vertical; }
.work-share-card > .work-help { margin: 8px 0 2px; }
.work-detail-section { margin: 0 0 24px; }
.work-detail-section:last-child { margin-bottom: 0; }
.work-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.work-detail-quick-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: -4px 0 20px; }
.work-detail-quick-actions:empty { display: none; }
.work-detail-quick-actions .btn { min-height: 44px; min-width: 110px; }
.work-protocol-list { display: grid; gap: 10px; }
.work-protocol-card { padding: 16px; border: 1px solid #e2e9eb; border-radius: 9px; background: #fff; min-width: 0; }
.work-protocol-card > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.work-protocol-card strong { color: #415760; font-size: 12px; }
.work-protocol-card input, .work-protocol-card textarea { font: 11px/1.6 var(--font-mono); }
.work-protocol-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.work-deploy-modal .modal-content { max-width: 860px; }
#work-deploy-body { min-height: 100px; }
.work-deploy-section { margin-bottom: 24px; }
.work-deploy-section > h4 { margin: 0 0 13px; color: #526874; font-size: 13px; }
.work-deploy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.work-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.work-combination-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 15px 0 24px; }
.work-combination-option { display: grid; grid-template-columns: 19px minmax(0,1fr); align-items: start; gap: 5px 9px; padding: 14px 12px; border: 1px solid #e0e7e9; border-radius: 9px; background: #fff; cursor: pointer; min-width: 0; }
.work-combination-option:has(input:checked) { border-color: #89b5a6; background: #f5faf7; }
.work-combination-option > input { grid-column: 1; grid-row: 1/3; margin: 1px 0 0; }
.work-combination-option > strong { grid-column: 2; color: #3b6457; font-size: 12px; font-weight: 600; }
.work-combination-option > small { grid-column: 2; color: #62737d; font-size: 11px; line-height: 1.6; }
.work-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; min-height: 44px; font-size: 12px; color: #526e65; }
.work-check > input { margin: 0; }
#bundle-import { margin-top: 8px; }
.work-backup-list { margin-top: 20px; }
.work-backup-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 15px 0; border-bottom: 1px solid #e5ebee; }
.work-backup-row > strong { flex: 1; min-width: 130px; font-size: 12px; color: #526d77; overflow-wrap: anywhere; }
.work-backup-row > p { flex-basis: 100%; margin: 0; }
.work-output-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.work-output-option { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid #e1e7ea; border-radius: 9px; background: #fff; cursor: pointer; }
.work-output-option:has(input:checked) { border-color: #7dad9b; background: #f4faf7; }
.work-output-option strong { display: block; margin-bottom: 5px; color: #3e594f; font-size: 12px; font-weight: 600; }
.work-output-option small { display: block; color: #82958c; font-size: 11px; line-height: 1.6; }
.work-output-option input { margin-top: 2px; }
.work-deploy-summary { background: #f5f9f7; border: 1px solid #deebe4; border-radius: 9px; padding: 14px 16px; margin: 18px 0 0; font-size: 12px; color: #647c71; line-height: 1.8; overflow-wrap: anywhere; }
.work-deploy-summary:empty { display: none; }
.work-advanced { margin: 16px 0; border-top: 1px solid #e5ebed; }
.work-advanced > summary { padding: 13px 0; color: #738791; font-size: 12px; }
.work-advanced[open] > summary { color: #356956; }
.work-route-note, .work-note { color: #62737d; font-size: 11px; line-height: 1.7; }
.login-page { background: #f4f6f7; }
.login-box { background: #fff; border-color: #e0e6e9; box-shadow: 0 14px 50px #17212b07; border-radius: 14px; padding: 37px; }
.login-box h1 { color: #253e48; font-size: 24px; }
.login-box .subtitle, .login-box .hint { color: #62737d; }
.login-box .brand-mark { margin-bottom: 25px; }
.login-box .eyebrow { color: #9aa5ac; }
.login-box .btn { margin-top: 5px; }
.toast { background: #fff; border-color: #e3e9eb; color: #435b67; box-shadow: 0 8px 30px #17212b12; }
.qr-inline-feedback { flex-shrink: 0; margin: 4px 18px 0; color: #14694f; font-size: 12px; font-weight: 550; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }
.qr-inline-feedback[data-type=error] { color: #a12e40; }
.qr-inline-feedback[data-type=warning] { color: #805811; }
.qr-inline-feedback[data-type=info] { color: #526570; }

/* Keep route roles prominent and utility text legible across every viewport. */
.work-identity strong, .work-connection-name, .work-name { font-size: 14px; }
.work-actions button, .work-actions .btn { font-size: 13px; }
.work-actions button[data-action=copy]:not(:disabled) { background: #0f766e; border-color: #0f766e; color: #fff; }
.work-actions button[data-action=copy]:not(:disabled):hover { background: #0b655e; }
.work-actions button[data-action=detail] { border-color: transparent; color: #355e56; }
.work-list-surface, .work-topology-card, .work-monitor-card { scroll-margin-top: calc(var(--header-height) + 16px); }
.work-table tr:focus-within { background: #f4f9f7; }

@media (min-width: 1025px) {
  .section-nav { background: #153e39; border-color: #153e39; padding-top: 27px; }
  .nav-brand strong { color: #fff; }
  .nav-brand small, .nav-note, .section-nav > a > small { color: #b7cec7; font-size: 11px; }
  .nav-brand .brand-mark { background: #e4f4ed; color: #153e39; }
  .section-nav > a { color: #e4f0eb; }
  .section-nav > a.active { background: #e4f4ed; color: #153e39; }
  .section-nav > a.active > small { color: #3d6c60; }
  .section-nav > a:hover:not(.active) { background: #25514a; }
  .section-nav > a:focus-visible { outline: 2px solid #9de2cc; outline-offset: 2px; }
  .work-toolbar { padding-top: 14px; }
  .work-table td { padding: 15px; }
  .work-path-hop { padding: 11px; }
}

@media (min-width: 1700px) {
  .main { padding: 34px 42px 55px; }
  .work-table td { height: 104px; padding-top: 21px; padding-bottom: 21px; }
  .work-table th:nth-child(2) { width: 39%; }
  .work-table th:nth-child(5) { width: 14%; }
}
@media (max-width: 1200px) and (min-width: 1025px) {
  :root { --nav-width: 166px; }
  .main { padding-left: 24px; padding-right: 24px; }
  .section-nav { padding-left: 12px; padding-right: 12px; }
  .work-table th, .work-table td { padding-left: 12px; padding-right: 12px; }
  .work-table th:nth-child(1) { width: 20%; }
  .work-table th:nth-child(2) { width: 36%; }
  .work-table th:nth-child(3) { width: 14%; }
  .work-table th:nth-child(4) { width: 13%; }
  .work-table th:nth-child(5) { width: 17%; }
}
@media (max-width: 1024px) {
  .work-share-cards, .work-share-cards:has(> .work-share-card:nth-child(2):last-child) { grid-template-columns: minmax(0,1fr); }
  :root { --nav-width: 0px; --header-height: 61px; }
  .dashboard { padding-left: 0; }
  .header { min-height: calc(61px + var(--safe-top)); padding: calc(9px + var(--safe-top)) max(20px,var(--safe-right)) 9px max(20px,var(--safe-left)); }
  .header-title .eyebrow { font-size: 11px; }
  .header h1 { font-size: 15px; }
  .section-nav { top: auto; bottom: 0; right: 0; width: auto; height: calc(66px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; padding: 6px max(15px,var(--safe-right)) calc(6px + var(--safe-bottom)) max(15px,var(--safe-left)); background: #fffffffa; border: 0; border-top: 1px solid #e1e7ea; }
  .section-nav > a { min-height: 50px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 12px; border-radius: 8px; }
  .section-nav > a > span:first-child { font-size: 13px; text-align: center; }
  .section-nav > a > small { font-size: 11px; }
  .section-nav > a.active { background: #eef6f2; }
  .nav-brand, .nav-note { display: none; }
  .main { padding: 22px max(21px,var(--safe-right)) calc(92px + var(--safe-bottom)) max(21px,var(--safe-left)); }
  .work-page-heading h2 { font-size: 26px; }
  .work-page-heading > .btn { min-height: 44px; }
  .work-text-button, .work-view-switch > button, .work-actions button, .work-actions .btn, .work-actions summary, .work-protocols > button { min-height: 44px; }
  .work-view-switch > button { min-width: 50px; }
  .work-pagination select, .work-pagination .btn { min-height: 44px; }
  .work-toolbar { flex-wrap: wrap; }
  .work-search { flex-basis: 240px; max-width: none; }
  .work-filters select { min-height: 44px; font-size: 13px !important; }
  .work-view-switch { margin-left: auto; }
  input:not([type]) { font-size: 16px; }
  .work-table th, .work-table td { padding-left: 12px; padding-right: 12px; }
  .work-summary { margin-bottom: 22px; }
  .account-menu > summary { min-height: 44px; }
  .keyboard-open .section-nav { display: none; }
}
@media (max-width: 820px) {
  .work-table-container { overflow: visible; }
  .work-table, .work-table tbody { display: block; width: 100%; }
  .work-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .work-table tbody { padding: 0 16px; }
  .work-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "identity health" "path path" "traffic actions"; row-gap: 12px; padding: 18px 0; border-bottom: 1px solid #e5ebed; }
  .work-table tr:last-child { border: 0; }
  .work-table tr:hover { background: transparent; }
  .work-table td { display: block; padding: 0; border: 0; height: auto; min-width: 0; }
  .work-table td:nth-child(1) { grid-area: identity; }
  .work-table td:nth-child(2) { grid-area: path; }
  .work-table td:nth-child(3) { grid-area: health; text-align: right; }
  .work-table td:nth-child(4) { grid-area: traffic; align-self: center; }
  .work-table td:nth-child(5) { grid-area: actions; align-self: center; }
  .work-table td[colspan] { grid-column: 1/-1; grid-row: auto; }
  .work-identity strong, .work-connection-name, .work-name { font-size: 14px; }
  .work-protocols { margin-top: 6px; gap: 5px; }
  .work-protocols > *, .work-protocol { padding: 3px 6px; font-size: 11px; }
  .work-route { padding: 11px 12px; background: #f8fafb; border-radius: 7px; gap: 16px; }
  .work-route-role { font-size: 11px; margin-bottom: 3px; }
  .work-route-name { font-size: 11px; }
  .work-route-address { font-size: 11px; }
  .work-state { font-size: 11px; }
  .work-health small { font-size: 11px; }
  .work-actions > div, .work-action-group { justify-content: flex-end; flex-wrap: nowrap; }
  .work-actions button, .work-actions .btn, .work-actions summary { min-height: 44px; padding: 7px 10px; font-size: 11px; }
  .work-rate { font-size: 12px; }
  .work-traffic small { margin-top: 4px; }
  .work-monitor-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .main { padding: 21px max(15px,var(--safe-right)) calc(87px + var(--safe-bottom)) max(15px,var(--safe-left)); }
  .header { padding-left: max(16px,var(--safe-left)); padding-right: max(16px,var(--safe-right)); }
  .work-page-heading { gap: 12px; margin-bottom: 8px; }
  .work-page-heading h2 { font-size: 26px; margin: 0 0 4px; }
  .work-page-heading p:not(.work-eyebrow) { display: none; }
  .work-page-heading .work-eyebrow { display: none; }
  .work-page-heading > .btn { font-size: 12px; padding: 9px 14px; white-space: nowrap; }
  .work-status-line { font-size: 11px; min-height: 32px; }
  .work-status-line .work-text-button { min-height: 44px; font-size: 11px; }
  .work-summary { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 7px 0 12px; margin: 0 0 12px; gap: 12px 0; }
  .work-summary > div { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 6px; align-items: baseline; padding: 0 10px; border-right: 0; }
  .work-summary > div:nth-child(odd) { padding-left: 0; border-right: 1px solid #dce5e4; }
  .work-summary > div:first-child { padding-left: 0; }
  .work-summary > div:last-child { border-right: 0; }
  .work-summary > div > span { font-size: 11px; margin-bottom: 0; }
  .work-summary > div > strong { font-size: 19px; }
  .work-summary > div > strong { min-height: 26px; font-size: clamp(15px,4.6vw,19px); white-space: nowrap; }
  .work-summary-item > small { grid-column: 1 / -1; font-size: 11px; line-height: 1.5; min-height: 0; margin-top: 3px; }
  .work-list-surface { border-radius: 10px; }
  .work-toolbar { padding: 14px 13px 3px; gap: 9px; }
  .work-scope-control { flex: 0 0 146px; }
  .work-scope-control select { font-size: 12px !important; min-height: 45px; padding: 8px; }
  .work-search { min-width: 0; flex: 1 1 calc(100% - 158px); }
  .work-scope-help { padding: 3px 14px 0; font-size: 11px; }
  .work-search input[type=search] { min-height: 45px; background: #fafbfc; }
  .work-filters { flex: 1 1 calc(100% - 105px); gap: 6px; min-width: 0; }
  .work-filters select { flex: 1; min-width: 0; width: auto; max-width: none; min-height: 44px; padding: 7px 9px; font-size: 12px !important; }
  .work-view-switch { flex: 0 0 auto; gap: 1px; padding: 2px; }
  .work-view-switch > button { min-width: 44px; padding: 6px 8px; font-size: 11px; }
  .work-list-meta { padding: 1px 14px 5px; min-height: 42px; font-size: 11px; }
  .work-list-meta .work-text-button { min-height: 44px; font-size: 11px; padding-right: 0; }
  .work-list-tools { gap: 9px; }
  .work-management-panel button { min-height: 44px; }
  .work-table tbody { padding: 0 14px; }
  .work-table tr { padding: 17px 0; row-gap: 11px; }
  .work-table td:nth-child(1) { padding-right: 10px; }
  .work-identity strong { font-size: 14px; }
  .work-path-hops { gap: 15px; }
  .work-path-hop { padding: 9px; }
  .work-hop-name { font-size: 12px; }
  .work-hop-address { font-size: 11px; }
  .work-route { gap: 12px; padding: 10px; }
  .work-route-node:not(:last-child):after { right: -10px; font-size: 11px; }
  .work-route-name { font-size: 11px; }
  .work-route-address { font-size: 11px; }
  .work-actions button, .work-actions .btn, .work-actions summary { padding: 7px 8px; font-size: 11px; }
  .work-pagination { gap: 6px; padding: 12px 13px; font-size: 11px; }
  .work-pagination > label, .work-pagination > div { gap: 5px; }
  .work-pagination select { width: 57px; padding: 6px 7px; font-size: 12px !important; }
  .work-pagination .btn { font-size: 11px; padding: 6px 8px; }
  #work-page-label { min-width: 32px; }
  .work-topology-view { padding: 14px; }
  .work-topology-intro { gap: 4px; margin-bottom: 12px; }
  .work-topology-intro span { font-size: 11px; }
  .work-topology-card { padding: 15px; border-radius: 8px; }
  .work-topology-card > header, .work-topology-header { margin-bottom: 16px; gap: 8px; flex-wrap: wrap; }
  .work-topology-card .work-route { display: flex; flex-direction: column; gap: 23px; padding: 0; background: none; }
  .work-topology-card .work-route-node { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 3px 10px; padding: 11px 13px; }
  .work-topology-card .work-route-role { grid-column: 1; grid-row: 1/3; align-self: center; margin: 0; }
  .work-topology-card .work-route-name { grid-column: 2; font-size: 12px; }
  .work-topology-card .work-route-address { grid-column: 2; font-size: 11px; margin: 0; }
  .work-topology-card .work-route-node:not(:last-child):after { content: '↓'; left: 32px; right: auto; top: auto; bottom: -22px; transform: none; font-size: 15px; }
  .work-route-branches { padding-left: 13px; margin-left: 6px; gap: 11px; }
  .work-route-branch { padding: 12px; }
  .work-route-branch:before { left: -15px; width: 13px; }
  .work-route-rule { font-size: 11px; }
  .work-server-card, .work-monitor-card { padding: 18px; }
  .work-server-metrics, .work-monitor-metrics { gap: 12px; }
  .work-server-metrics strong, .work-monitor-metrics strong { font-size: 18px; }
  .work-metrics-content .work-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 0; }
  .work-metrics-content .work-summary > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .work-metrics-content .work-summary > div > strong { font-size: 16px; min-height: 24px; }
  .work-detail-body { padding: 16px; }
  .work-detail-body .work-topology-card { padding: 13px; }
  .work-detail-body > .work-connection-topology { padding: 14px; }
  .work-detail-body > .work-connection-topology .work-route { display: flex; flex-direction: column; gap: 21px; background: none; padding: 0; }
  .work-detail-body > .work-connection-topology .work-route-node { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 3px 10px; border: 1px solid #dce7e3; border-radius: 8px; padding: 11px 13px; background: #fff; }
  .work-detail-body > .work-connection-topology .work-route-role { grid-column: 1; grid-row: 1/3; align-self: center; margin: 0; }
  .work-detail-body > .work-connection-topology .work-route-name, .work-detail-body > .work-connection-topology .work-route-address { grid-column: 2; }
  .work-detail-body > .work-connection-topology .work-route-node:not(:last-child):after { content: '↓'; left: 32px; right: auto; top: auto; bottom: -21px; transform: none; font-size: 15px; }
  .work-rule-values { padding: 10px; font-size: 11px; }
  .work-share-item { padding: 12px; }
  .work-share-item .btn { flex: 1; min-height: 44px; }
  .work-share-card { padding: 14px; }
  .work-share-card-heading { margin-bottom: 10px; }
  .work-share-path { margin-bottom: 12px; }
  .work-detail-actions .btn { flex: 1 1 calc(50% - 4px); min-height: 44px; font-size: 12px; }
  .work-detail-quick-actions .btn { flex: 1; min-height: 44px; }
  .work-protocol-card { padding: 13px; }
  .work-protocol-actions .btn { flex: 1; min-height: 44px; }
  .work-output-grid { grid-template-columns: 1fr; gap: 8px; }
  .work-output-option { min-height: 66px; align-items: center; padding: 12px; }
  .work-output-option input { margin: 0; }
  .work-deploy-grid { grid-template-columns: 1fr; }
  .work-form-grid { grid-template-columns: 1fr; gap: 0; }
  .work-combination-options { grid-template-columns: 1fr; gap: 8px; margin: 12px 0 20px; }
  .work-combination-option { padding: 12px 14px; grid-template-columns: 19px minmax(0,1fr); gap: 4px 10px; }
  .work-combination-option > strong { font-size: 12px; }
  .work-combination-option > small { font-size: 11px; }
  .work-deploy-summary { padding: 12px; font-size: 11px; }
  .modal-header { padding: 12px 16px; }
  .modal-header h3 { font-size: 16px; }
  .modal-header .work-eyebrow { font-size: 11px; }
  .login-box { padding: 29px 25px; }
  .login-box .brand-mark { margin-bottom: 25px; }
  .login-box h1 { font-size: 23px; }
}
@media (max-width: 359px) {
  .main { padding-left: 11px; padding-right: 11px; }
  .work-page-heading h2 { font-size: 24px; }
  .work-page-heading > .btn { padding: 9px 11px; font-size: 11px; }
  .work-toolbar { padding-left: 10px; padding-right: 10px; }
  .work-filters select { padding-left: 5px; padding-right: 5px; font-size: 11px !important; }
  .work-view-switch > button { min-width: 44px; padding-left: 6px; padding-right: 6px; }
  .work-actions button, .work-actions .btn, .work-actions summary { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .main { padding-top: 12px; }
  .work-page-heading { margin-bottom: 1px; }
  .work-page-heading p:not(.work-eyebrow) { display: none; }
  .work-summary { margin-bottom: 10px; padding: 7px 0 10px; }
  .work-summary-item > small { margin-top: 3px; min-height: 0; font-size: 11px; }
  .work-toolbar { padding-top: 10px; gap: 6px; }
  .work-table tr { padding-top: 12px; }
}
@media (min-width: 600px) and (max-width: 1024px) and (max-height: 520px) {
  #qrcode-modal .qr-inline-feedback { grid-column: 1; grid-row: 2; align-self: start; margin: 36px 0 0; font-size: 11px; text-align: left; }
  :root { --nav-width: calc(70px + var(--safe-left)); --header-height: 54px; }
  .dashboard { padding-left: var(--nav-width); }
  .section-nav { top: 0; right: auto; bottom: 0; width: var(--nav-width); height: auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: max(12px,var(--safe-top)) 5px max(12px,var(--safe-bottom)) max(5px,var(--safe-left)); border-top: 0; border-right: 1px solid #e1e7ea; }
  .section-nav > a { min-height: 56px; padding: 8px 5px; width: 100%; }
  .section-nav > a > span:first-child { font-size: 12px; }
  .section-nav > a > small { font-size: 11px; }
  .header { min-height: calc(54px + var(--safe-top)); padding: calc(5px + var(--safe-top)) max(17px,var(--safe-right)) 5px 17px; }
  .header h1 { font-size: 13px; }
  .header .eyebrow { display: none; }
  .main { padding: 10px max(17px,var(--safe-right)) max(24px,var(--safe-bottom)) 17px; }
  #work-connections { position: relative; }
  .work-page-heading { margin-bottom: 2px; }
  .work-page-heading h2 { font-size: 23px; margin: 0; }
  .work-page-heading p:not(.work-eyebrow), .work-page-heading .work-eyebrow { display: none; }
  .work-page-heading > .btn { font-size: 11px; padding: 8px 14px; }
  .work-status-line { min-height: 25px; font-size: 11px; }
  #work-connections > .work-status-line { position: absolute; top: 0; left: 68px; right: 113px; min-height: 44px; white-space: normal; }
  #work-connections > .work-status-line:has([data-state=error]) { position: static; margin-top: 4px; }
  #work-connections > .work-status-line > span[role=status] { min-width: 0; overflow-wrap: anywhere; }
  .work-status-line .work-text-button { min-height: 44px; font-size: 11px; }
  #work-connections > .work-summary { display: grid; }
  .work-summary { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 9px 0 12px; margin: 2px 0 14px; }
  .work-summary > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; padding: 0 16px; }
  .work-summary > div > small { grid-column: 1 / -1; min-height: 0; }
  .work-summary > div:first-child { padding-left: 0; }
  .work-summary > div > span { font-size: 11px; margin-bottom: 1px; }
  .work-summary > div > strong { font-size: 19px; }
  .work-toolbar { padding: 11px 13px 2px; flex-wrap: nowrap; gap: 7px; }
  .work-scope-control { flex-basis: 118px; }
  .work-scope-control select { font-size: 12px !important; padding: 7px; }
  .work-search { min-width: 140px; flex-basis: auto; }
  .work-search input[type=search] { font-size: 16px !important; }
  .work-filters { gap: 5px; flex: 0 0 auto; }
  .work-filters select { min-width: 0; max-width: 96px; font-size: 12px !important; padding: 7px; }
  .work-view-switch > button { min-width: 44px; padding: 6px 8px; font-size: 11px; }
  .work-list-meta { min-height: 38px; padding: 0 13px 3px; font-size: 11px; }
  #work-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .work-list-tools { flex: 0 0 auto; }
  .work-management-panel { position: absolute; top: calc(100% + 4px); right: 0; max-height: max(88px,calc(var(--visual-viewport-height,100dvh) - 240px - var(--safe-top) - var(--safe-bottom))); overflow: auto; }
  .work-table-container { overflow: visible; }
  .work-table, .work-table tbody { display: block; width: 100%; }
  .work-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .work-table tbody { padding: 0 14px; }
  .work-table tr { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,2fr) minmax(0,.9fr); grid-template-areas: "identity path health" "traffic actions actions"; row-gap: 7px; column-gap: 15px; padding: 10px 0; border-bottom: 1px solid #e5ebed; }
  .work-table tr:last-child { border: 0; }
  .work-table td { display: block; height: auto; padding: 0; border: 0; }
  .work-table td:nth-child(1) { grid-area: identity; }
  .work-table td:nth-child(2) { grid-area: path; align-self: center; }
  .work-table td:nth-child(3) { grid-area: health; text-align: right; }
  .work-table td:nth-child(4) { grid-area: traffic; }
  .work-table td:nth-child(5) { grid-area: actions; }
  .work-route { padding: 0; background: none; gap: 12px; }
  .work-route-name { font-size: 11px; }
  .work-path-hop { padding: 7px; }
  .work-hop-name { font-size: 11px; }
  .work-hop-address { font-size: 11px; }
  .work-actions > div, .work-action-group { justify-content: flex-end; }
  .work-topology-card .work-route { gap: 24px; }
  .work-topology-card .work-route-node { padding: 9px 11px; }
  .work-topology-card .work-route-node:after { right: -18px; }
  .work-detail-body { padding: 17px; }
  .work-output-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .work-combination-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .work-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
  .modal-header { min-height: 56px; padding: 6px 15px; }
  .modal-header .work-eyebrow { display: none; }
  .modal-header h3 { font-size: 15px; }
  .login-box { padding: 23px 27px; }
  .login-box .brand-mark { margin-bottom: 8px; }
}

/* Server cards keep transfer totals separate from relay ingress accounting. */
.work-relay-traffic { margin: 16px 0 0; padding: 20px 22px 8px; background: #eaf4f1; border: 1px solid #c9dfd7; border-radius: 10px; min-width: 0; }
.work-relay-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; }
.work-relay-heading h3 { margin: 0; color: #174d42; font-size: 16px; }
.work-relay-heading > span { color: #4a6b62; font-size: 12px; }
.work-relay-figures { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; margin: 18px 0 10px; align-items: end; }
.work-relay-figures > div { min-width: 0; }
.work-relay-figures span,.work-relay-figures strong { display: block; }
.work-relay-figures span { color: #4e6a62; font-size: 12px; margin-bottom: 5px; }
.work-relay-figures strong { font-size: 21px; font-weight: 600; color: #254c43; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.work-relay-total strong { font-size: 34px; line-height: 1.15; color: #123f35; letter-spacing: -.5px; }
.work-relay-rate { margin: 10px 0 0; color: #4e6a62; font-size: 12px; line-height: 1.7; }
.work-relay-warning { color: #805500; font-size: 12px; line-height: 1.6; }
.work-fronts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 18px 0 0; }
.work-front { background: #fff; border: 1px solid #dce5e5; border-radius: 10px; padding: 20px 22px 6px; min-width: 0; }
.work-front-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.work-front-header > div { min-width: 0; }
.work-front-heading { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.work-front-role { color: var(--work-accent); font-size: 12px; font-weight: 600; margin: 0 0 5px; }
.work-front[data-role=backup] .work-front-role { color: #526570; }
.work-front-address { display: block; font-family: ui-monospace,Menlo,monospace; font-size: 13px; margin-top: 5px; color: #526570; overflow-wrap: anywhere; }
.work-front-state { flex: 0 0 auto; border-radius: 4px; padding: 4px 6px; background: #f0f3f4; color: #566b74; font-size: 11px; }
.work-front-state[data-state=ready] { background: #e6f3ee; color: #096556; }
.work-front-state[data-state=stale],.work-front-state[data-state=unavailable],.work-front-state[data-state=error] { background: #fff4df; color: #885900; }
.work-front-combined { margin-top: 19px; padding-bottom: 14px; border-bottom: 1px solid #e7edef; }
.work-front-combined > span { display: block; color: #62737d; font-size: 12px; margin-bottom: 5px; }
.work-front-combined > strong { color: #203b43; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.work-front-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 0 10px; }
.work-front-rate-label { display: block; font-size: 12px; color: #62737d; margin-bottom: 5px; }
.work-front-rate-value { display: block; color: #253f46; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.work-front-rate-value small { font-size: 11px; color: #62737d; font-weight: 400; margin-left: 4px; }
.work-front-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 0 13px; }
.work-front-totals span { display: block; color: #62737d; font-size: 11px; margin-bottom: 3px; }
.work-front-totals strong { font-size: 13px; color: #435b63; font-weight: 500; font-variant-numeric: tabular-nums; }
.work-front-resources { display: grid; grid-template-columns: .6fr 1fr 1fr; gap: 10px; border-top: 1px solid #e7edef; padding: 12px 0; }
.work-front-resources > div { min-width: 0; }
.work-front-resources span { display: block; font-size: 11px; color: #62737d; margin-bottom: 4px; }
.work-front-resources strong { display: block; font-size: 12px; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.work-front-meter { margin: 0 0 10px; }
.work-front-meter progress { width: 100%; height: 6px; accent-color: #0f766e; }
.work-front-meter small { color: #62737d; font-size: 11px; }
.work-front-access { color: #526570; font-size: 12px; border-top: 1px solid #e7edef; }
.work-front-access > span { display: block; padding: 11px 0; }
.work-front-access[data-access-state=timeout],.work-front-access[data-access-state=partial] { color: #805500; }
.work-front-access[data-access-state=verified] { color: #096556; }
.work-overview-disclosure > summary { min-height: 44px; padding: 11px 0; font-size: 12px; line-height: 1.7; cursor: pointer; }
.work-overview-disclosure p { margin: 0 0 10px; color: #62737d; font-size: 12px; line-height: 1.7; }
.work-front > .work-overview-disclosure { border-top: 1px solid #e7edef; }
.work-front-footnote { padding: 0 0 6px; }
.work-front-purpose { margin: 0; min-height: 0; }
.work-front-dependency { margin: 8px 0 0; padding: 0 4px; color: #526570; }
.work-front-dependency p { max-width: 80ch; }
.work-overview-bottom { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); align-items: start; gap: 18px; margin-top: 16px; }
.work-overview-lines,.work-overview-attention { min-width: 0; padding: 16px 20px; border: 1px solid #e0e7e8; background: #fff; border-radius: 10px; }
.work-overview-attention > summary { font-size: 14px; min-height: 44px; padding: 11px 0; cursor: pointer; }
.work-overview-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.work-overview-section-head h3 { font-size: 15px; margin: 0; }
.work-overview-section-head a { display: inline-flex; align-items: center; color: #0b6b64; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
.work-overview-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.work-overview-count { min-width: 0; }
.work-overview-count strong { display: block; font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; }
.work-overview-count span { display: block; margin: 5px 0; color: #526570; font-size: 12px; }
.work-overview-alert { font-size: 12px; line-height: 1.6; color: #40565e; padding: 10px 0; border-bottom: 1px solid #edf1f1; margin: 0; }
.work-overview-alert:last-child { border-bottom: 0; }
.work-overview-alert strong { display: block; color: #805500; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
/* Desktop preserves the same front-above-backend reading order as the phone. */
@media (min-width: 1025px) {
  .work-fronts { grid-template-columns: minmax(0,1fr); }
  .work-front { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr) minmax(0,1.25fr); column-gap: 24px; padding: 18px 22px 5px; }
  .work-front-header { grid-column: 1; grid-row: 1 / 3; display: block; padding-right: 18px; border-right: 1px solid #e7edef; }
  .work-front-state { display: inline-flex; margin-top: 10px; }
  .work-front-combined { grid-column: 2; grid-row: 1; margin-top: 0; border: 0; padding-bottom: 8px; }
  .work-front-rates { grid-column: 3; grid-row: 1; padding: 0 0 8px; }
  .work-front-totals { grid-column: 2; grid-row: 2; padding: 4px 0 12px; }
  .work-front-resources { grid-column: 3; grid-row: 2; border: 0; padding: 4px 0 12px; }
  .work-front-meter { grid-column: 2 / 4; margin: 0 0 8px; }
  .work-front-access { grid-column: 1 / 3; }
  .work-front > .work-overview-disclosure { grid-column: 3; }
}
/* All protocol actions live together; only one full topology per line. */
.work-line-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.work-line-meta { color: #62737d; font-size: 12px; line-height: 1.7; margin: 8px 0 16px; }
.work-protocol-rows { border: 1px solid #dfe7e8; border-radius: 10px; overflow: hidden; margin: 14px 0 22px; }
.work-protocol-row { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(0,1.3fr) auto; align-items: center; gap: 10px 16px; padding: 16px 18px; background: #fff; border-bottom: 1px solid #e8eded; min-width: 0; }
.work-protocol-row:last-child { border-bottom: 0; }
.work-protocol-identity { min-width: 0; }
.work-protocol-identity h4 { font-size: 14px; margin: 0 0 4px; }
.work-protocol-identity small { font-size: 12px; color: #62737d; }
.work-protocol-address { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.work-protocol-address code { font-family: ui-monospace,Menlo,monospace; font-size: 13px; }
.work-protocol-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.work-protocol-actions .btn { min-height: 44px; }
.work-protocol-row > .work-help,.work-protocol-row > .work-share-raw { grid-column: 1/-1; margin: 0; }
.work-protocol-row > .work-help { font-size: 12px; line-height: 1.6; }
.work-route-audit,.work-historical-shares { margin: 16px 0; border: 1px solid #e1e8e8; border-radius: 8px; padding: 0 14px; }
.work-route-audit > summary,.work-historical-shares > summary { padding: 14px 0; min-height: 44px; color: #405d66; font-size: 13px; cursor: pointer; }
.work-route-audit .work-route { display: none; }
.work-route-audit .work-connection-topology { border: 0; padding: 0 0 12px; margin: 0; }
@media (max-width: 1000px) {
  .work-protocol-row { grid-template-columns: minmax(110px,.75fr) minmax(0,1.25fr); }
  .work-protocol-actions { grid-column: 2; }
}
@media (max-width: 600px) {
  .section-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .section-nav > a { min-width: 0; padding-left: 5px; padding-right: 5px; }
  .work-protocol-row { padding: 14px; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .work-protocol-actions { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .work-protocol-row > .work-help { font-size: 12px; }
  .work-protocol-identity h4 { margin: 0; }
  .work-protocol-address { margin-bottom: 4px; }
  .work-route-audit,.work-historical-shares { padding: 0 11px; }
}
@media (min-width: 600px) and (max-width: 1024px) and (max-height: 520px) {
  .section-nav { gap: 5px; }
  .section-nav > a { min-height: 52px; }
}
.work-protocol-identity { font-size: 14px; line-height: 1.5; margin: 0; font-weight: 600; }
.work-protocol-status,.work-protocol-raw { grid-column: 1/-1; margin: 0; min-width: 0; }
.work-protocol-status { font-size: 12px; color: #687b83; line-height: 1.6; }
.work-protocol-status:empty,.work-protocol-raw:empty { display: none; }
.work-protocol-row[data-front-role=primary] { border-left: 3px solid #0f766e; padding-left: 15px; }
.work-protocol-row[data-front-role=backup] { border-left: 3px solid #285c91; padding-left: 15px; }
.work-front-choice { min-width: 0; }
.work-front-branches,.work-line-topology-branches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.work-front-branch,.work-line-topology-branch { min-width: 0; padding: 10px 12px; background: #f0f5f4; border-radius: 6px; overflow-wrap: anywhere; }
.work-front-branch[data-role=backup] { background: #eef3f9; }
.work-deployment-time { display: block; color: #62737d; font-size: 12px; font-weight: 400; line-height: 1.6; margin-top: 6px; }
.work-argo-options { padding: 17px; border: 1px solid #d9e6e5; border-radius: 8px; margin: 14px 0 18px; background: #f7faf9; }
.work-argo-options > label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 8px; }
.work-argo-options .work-help { margin-top: 10px; }
@media (max-width:600px) { .work-front-branches,.work-line-topology-branches { grid-template-columns: 1fr; } .work-protocol-row[data-front-role] { padding-left: 11px; } .work-argo-options { padding: 13px; } }

/* Compact server accounting and connection cards. */
@media (max-width: 600px) {
  .work-relay-traffic { padding: 14px 15px 3px; margin-top: 10px; }
  .work-relay-figures { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 13px; }
  .work-relay-total { grid-column: 1/-1; }
  .work-relay-total strong { font-size: 30px; }
  .work-relay-direction strong { font-size: 17px; }
  .work-fronts { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .work-front { padding: 15px 15px 4px; }
  .work-front-heading { font-size: 16px; }
  .work-front-combined { margin-top: 14px; padding-bottom: 11px; }
  .work-front-combined > strong { font-size: 26px; }
  .work-front-rates { padding-top: 11px; }
  .work-front-rate-value { font-size: 20px; }
  .work-front-resources { gap: 7px; grid-template-columns: .5fr 1fr 1fr; }
  .work-front-resources strong { font-size: 11px; }
  .work-overview-bottom { grid-template-columns: 1fr; gap: 12px; }
  .work-overview-lines,.work-overview-attention { padding: 12px 15px; }
}
@media (min-width: 601px) and (max-width: 1024px) and (max-height: 520px) {
  .work-relay-traffic { padding: 12px 16px 0; margin-top: 8px; }
  .work-relay-figures { margin: 10px 0 4px; }
  .work-fronts { gap: 12px; margin-top: 10px; }
  .work-front { padding: 14px 14px 4px; }
}
.work-front-management { display: block; color: #62737d; font-size: 11px; overflow-wrap: anywhere; margin-top: 4px; }
.work-card-classification { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.work-card-classification .work-protocol,.work-card-classification .work-node-type { margin: 0; }
.work-card-classification .work-node-type { padding: 0; border: 0; background: none; color: #62737d; font-size: 11px; }
.work-port-link { display: block; min-height: 44px; max-width: 100%; border: 0; background: none; color: #116f65; padding: 7px 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.work-port-link .work-hop-address { font-size: 12px; color: inherit; margin: 0; padding: 0; white-space: normal; }
.work-port-link:hover { color: #084f48; }
.work-path-compact { color: #435f63; margin: 0; line-height: 1.65; font-size: 12px; overflow-wrap: anywhere; }
.work-name-details > summary { cursor: pointer; list-style-position: outside; margin-left: 12px; min-height: 44px; display: flex; align-items: center; }
.work-name-details > summary::after { content: '⌄'; flex-shrink: 0; margin-left: 6px; color: #62737d; }
.work-name-details:not([open]) .work-connection-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-name-details > p { margin: 6px 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.work-attach-direct { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; }
.work-attach-direct > .work-help { display: block; max-width: 60ch; }
.work-route-audit { scroll-margin-top: 16px; }
@media (max-width: 820px), (max-width: 1024px) and (max-height: 520px) {
  .work-table tbody { padding: 0 13px; }
  .work-table tr { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "identity health" "path path" "traffic traffic" "actions actions"; padding: 16px 0; gap: 7px 12px; }
  .work-table td.work-actions { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr); gap: 8px; margin-top: 3px; }
  .work-actions > button + button { margin-left: 0; }
  .work-actions button,.work-actions .btn { min-height: 44px; font-size: 12px; padding: 8px 6px; }
  .work-table td.work-path { padding: 0; }
  .work-path-compact { font-size: 12px; }
  .work-health small { display: none; }
  .work-table .work-deployment-time { display: none; }
  .work-traffic-values { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .work-traffic-values > strong::before { content: '累计 '; font-size: 11px; font-weight: 400; color: #62737d; }
  .work-traffic-values > small { margin-top: 0; }
}
@media (min-width: 601px) and (max-width: 1024px) and (max-height: 520px) {
  .work-table tr { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas: "identity path health" "traffic actions actions"; }
  .work-table td.work-actions { justify-self: end; min-width: 290px; }
}

/* R12: the shared carrier, rather than three unrelated status cards. */
.work-frequency { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #526570; white-space: nowrap; }
.work-frequency select { min-height: 40px; border: 1px solid #ccdada; border-radius: 6px; padding: 5px 23px 5px 9px; background: #fff; color: #203b43; }
.work-network-map { margin: 18px 0; background: #fff; border: 1px solid #d4e2e3; border-radius: 12px; padding: 20px 24px; }
.work-network-head { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.work-network-head h3 { margin: 0; font-size: 16px; }
.work-network-head > span, .work-network-caption { color: #617680; font-size: 12px; line-height: 1.7; }
.work-network-caption { margin: 16px 0 0; }
.work-network-diagram { display: grid; grid-template-columns: minmax(0,1fr) 140px minmax(0,1.2fr); grid-template-rows: 1fr 1fr; gap: 10px 0; align-items: center; }
.work-network-node { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; border: 1px solid #c9dbd9; border-left: 4px solid #087f78; background: #f3faf8; padding: 14px 18px; min-width: 0; width: 100%; border-radius: 6px; color: #203b43; cursor: pointer; }
.work-network-node[data-role=primary] { grid-column: 1; grid-row: 1; }
.work-network-node[data-role=backup] { grid-column: 1; grid-row: 2; border-color: #cbd9e6; border-left-color: #406b9d; background: #f3f7fb; }
.work-network-node[data-role=backend] { grid-column: 3; grid-row: 1 / 3; background: #fff; border-color: #bfcfd5; min-height: 128px; justify-content: center; }
.work-network-node strong { font-size: 15px; font-weight: 600; }
.work-network-node code { font: 14px ui-monospace,Menlo,monospace; overflow-wrap: anywhere; }
.work-network-state { font-size: 11px; color: #7e5a21; }
.work-network-node[data-state=ready] .work-network-state { color: #096556; }
.work-network-wires { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
.work-network-wires svg { display: block; width: 100%; height: 100%; min-height: 180px; overflow: visible; }
.work-network-wires path { fill: none; stroke: #087f78; stroke-width: 2; vector-effect: non-scaling-stroke; }
.work-network-wires .backup { stroke: #406b9d; }
.work-network-map[data-flow] .work-network-wires path { stroke-dasharray: 8 6; animation: work-route-trace .8s linear 1; }
.work-network-map[data-refreshing] { animation: work-sample-flash .65s ease-out 1; }
.work-network-node:focus-visible,.work-front:focus { outline: 3px solid #406b9d; outline-offset: 4px; }
.work-front { scroll-margin: 90px; }
.work-server-connections { display: block; margin-top: 5px; text-align: left; }
.work-address-choice { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #526570; font-size: 12px; margin: 7px 0; min-width: 0; }
.work-address-choice select { display: block; max-width: 100%; min-width: 0; min-height: 40px; border: 1px solid #ccdadf; border-radius: 6px; padding: 7px; background: #fff; color: #203b43; font: inherit; }
.work-protocol-row .work-address-choice { grid-column: 1 / -1; }
.work-deploy-stages { display: flex; padding: 0; margin: 0 0 24px; list-style: none; gap: 5px; counter-reset: deploy-stage; }
.work-deploy-stages li { flex: 1; font-size: 11px; line-height: 1.5; color: #657680; padding: 10px 5px; border-top: 3px solid #dfe7ea; counter-increment: deploy-stage; transition: border-color .2s,background .2s; }
.work-deploy-stages li::before { content: counter(deploy-stage) ' '; font-variant-numeric: tabular-nums; }
.work-deploy-stages [data-state=done] { border-color: #087f78; color: #087168; }
.work-deploy-stages [data-state=current] { border-color: #406b9d; background: #f0f5fa; color: #203b43; font-weight: 600; }
.work-deploy-stages[data-stage=checking] [aria-current],.work-deploy-stages[data-stage=running] [aria-current] { animation: work-stage-breath 1.8s ease-in-out infinite; }
.work-deploy-stages[data-stage=attention] [aria-current] { border-color: #a66a13; background: #fff5e4; }
.work-protocol-row[aria-busy=true] .work-protocol-status { color: #406b9d; }
@keyframes work-route-trace { to { stroke-dashoffset: -56; } }
@keyframes work-sample-flash { from { border-color: #087f78; } to { border-color: #d4e2e3; } }
@keyframes work-stage-breath { 50% { border-color: #a4bdd5; } }
@media (max-width: 780px) {
  .work-network-map { padding: 15px; }
  .work-network-diagram { grid-template-columns: minmax(0,1fr) 65px minmax(0,1fr); }
  .work-network-node { padding: 12px 10px; }
  .work-network-head { display: block; }
  .work-network-head > span { display: block; margin-top: 6px; }
  .work-frequency { margin-left: 0; }
}
@media (max-width: 520px) {
  .work-network-diagram { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto 55px auto; gap: 0 10px; }
  .work-network-node[data-role=primary] { grid-column: 1; grid-row: 1; align-self: stretch; }
  .work-network-node[data-role=backup] { grid-column: 2; grid-row: 1; align-self: stretch; }
  .work-network-node[data-role=backend] { grid-column: 1 / 3; grid-row: 3; min-height: 100px; align-items: center; text-align: center; }
  .work-network-node code { font-size: 12px; }
  .work-network-node strong { font-size: 14px; }
  .work-network-wires { grid-column: 1 / 3; grid-row: 2; position: relative; height: 55px; }
  .work-network-wires svg { display: none; }
  .work-network-wires::before { content: ''; position: absolute; left: 25%; right: 25%; top: 0; height: 26px; border: 2px solid #087f78; border-top: 0; border-radius: 0 0 10px 10px; }
  .work-network-wires::after { content: '↓'; color: #087f78; position: absolute; left: calc(50% - 6px); top: 25px; font-size: 24px; line-height: 30px; }
  .work-network-map[data-flow] .work-network-wires { animation: work-stage-breath .8s ease-out 1; }
  .work-status-line { flex-wrap: wrap; }
  #work-overview-updated { flex: 1; min-width: 180px; }
  .work-deploy-stages { gap: 3px; margin-bottom: 16px; }
  .work-deploy-stages li { padding: 8px 3px; }
  .work-filters { flex-wrap: wrap; }
  .work-filters select { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .work-network-map,.work-network-wires,.work-network-wires path,.work-deploy-stages li { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.work-deploy-modal .work-deploy-stages { margin: 12px 16px 0; }
@media (max-width: 600px) {
  .work-toolbar { flex-wrap: wrap; }
  .work-filters { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .work-filters select { width: 100%; max-width: none; padding-left: 6px; padding-right: 6px; }
}

/* Keep the node remark visible on every access card, including narrow screens. */
.work-protocol-heading { min-width: 0; overflow-wrap: anywhere; }
.work-protocol-remark { display: grid; gap: 2px; margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.work-protocol-remark > span { color: #62737d; font-size: 12px; }
.work-protocol-remark > strong { color: #193e47; font-weight: 700; }
.work-deployed-label { display: inline-block; margin-top: 6px; padding: 2px 7px; border-radius: 4px; background: #e6f4ef; color: #17624e; font-size: 12px; }