:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #17201d;
  --muted: #66736e;
  --line: #dfe5e2;
  --green: #177a50;
  --green-soft: #e7f5ed;
  --red: #b53b3b;
  --red-soft: #fbeaea;
  --amber: #9b6716;
  --amber-soft: #fff4d9;
  --blue: #276a9a;
  --shadow: 0 1px 2px rgba(18, 33, 27, .05);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; padding-top: 64px; background: var(--bg); color: var(--text); font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
button, input, select { font: inherit; letter-spacing: 0; }
.topbar { position: fixed; z-index: 50; top: 0; right: 0; left: 0; height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: #17231f; color: white; border-bottom: 1px solid #2e3a36; }
.brand { flex: none; display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border: 1px solid #47534f; border-radius: 7px; background: #fff; }
.brand-mark img { width: 32px; height: 32px; display: block; object-fit: contain; }
.brand div { display: flex; flex-direction: column; line-height: 1.25; }
.brand strong { font-size: 14px; }.brand div span { color: #aebbb6; font-size: 11px; margin-top: 2px; }
.header-workspace-tools { min-width: 220px; max-width: 620px; flex: 1; display: flex; align-items: center; gap: 8px; margin: 0 20px; }.header-workspace-tools[hidden] { display: none; }.topbar .header-search { width: auto; height: 36px; flex: 1; color: #fff; background: #25342f; border-color: #3d4b46; }.topbar .header-search:focus-within { border-color: #6f9483; box-shadow: 0 0 0 3px rgba(116, 157, 138, .2); }.topbar .header-search svg { stroke: #aebbb6; }.topbar .header-search input { color: #fff; }.topbar .header-search input::placeholder { color: #aebbb6; }.header-workspace-tools .layout-toggle { height: 36px; background: #25342f; border-color: #3d4b46; }.header-workspace-tools .layout-toggle button { color: #aebbb6; }.header-workspace-tools .layout-toggle button:hover { color: #fff; }.header-workspace-tools .layout-toggle button[aria-pressed="true"] { color: #174c36; }
.header-actions { flex: none; display: flex; align-items: center; gap: 10px; }.checked-at { color: #aebbb6; font-size: 12px; }
.manage-link svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: white; background: #25342f; border: 1px solid #3d4b46; border-radius: 6px; cursor: pointer; }
.icon-button:hover { background: #31443d; }.icon-button:disabled { opacity: .6; cursor: wait; }.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.spinning svg { animation: spin .8s linear infinite; }
.icon-button.thumbnail-toggle[aria-pressed="true"] { color: #bfe7d3; background: #31443d; border-color: #557066; }
.navigation-toggle { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; color: white; background: #25342f; border: 1px solid #3d4b46; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 650; white-space: nowrap; }.navigation-toggle:hover, .navigation-toggle[aria-pressed="true"] { background: #31443d; }.navigation-toggle svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.feature-menu { position: relative; }.feature-menu-button { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 11px; color: #fff; background: #25342f; border: 1px solid #3d4b46; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 650; list-style: none; }.feature-menu-button::-webkit-details-marker { display: none; }.feature-menu-button:hover, .feature-menu[open] > .feature-menu-button { background: #31443d; }.feature-menu-button > svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.feature-menu-panel { position: absolute; z-index: 60; top: 44px; right: 0; width: 320px; max-height: calc(100vh - 80px); padding: 8px; overflow-y: auto; color: var(--text); background: #fff; border: 1px solid #cfd7d3; border-radius: 7px; box-shadow: 0 16px 42px rgba(8, 17, 13, .28); }.feature-menu-heading { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid #edf0ef; }.feature-menu-heading strong { font-size: 13px; }.feature-menu-heading small { color: var(--muted); font-size: 10px; }.feature-menu-item { width: 100%; min-height: 52px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 9px; color: #34423d; background: transparent; border: 0; border-bottom: 1px solid #edf0ef; border-radius: 4px; cursor: pointer; text-align: left; list-style: none; }.feature-menu-item::-webkit-details-marker { display: none; }.feature-menu-item:hover { background: #f2f6f4; }.feature-menu-item > svg { width: 19px; fill: none; stroke: #527062; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.feature-menu-copy { min-width: 0; display: grid; gap: 1px; }.feature-menu-copy strong, .feature-menu-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.feature-menu-copy strong { font-size: 12px; }.feature-menu-copy small { color: var(--muted); font-size: 10px; font-weight: 400; }.feature-switch { position: relative; width: 30px; height: 18px; display: block; background: #c9d1cd; border-radius: 999px; transition: background .15s ease; }.feature-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(18, 33, 27, .28); transition: transform .15s ease; }.thumbnail-toggle[aria-pressed="true"] .feature-switch { background: var(--green); }.thumbnail-toggle[aria-pressed="true"] .feature-switch::after { transform: translateX(12px); }.feature-column-settings { position: static; }.feature-column-settings > .feature-menu-item { border-color: #edf0ef; }.feature-column-settings[open] > .feature-menu-item { color: #174c36; background: #eef5f1; }.feature-chevron { transition: transform .15s ease; }.feature-column-settings[open] .feature-chevron { transform: rotate(180deg); }.feature-column-settings .column-popover { position: static; width: 100%; max-height: 410px; padding: 4px 8px 9px; overflow-y: auto; background: #fafcfb; border: 0; border-bottom: 1px solid #dce4e0; border-radius: 0; box-shadow: none; }
.settings-dialog { width: min(460px, calc(100% - 28px)); padding: 0; color: var(--text); background: #fff; border: 1px solid #cfd7d3; border-radius: 7px; box-shadow: 0 22px 60px rgba(18, 33, 27, .24); }.settings-dialog::backdrop { background: rgba(15, 24, 21, .48); }.settings-dialog form { padding: 20px; }.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }.dialog-header span { color: var(--green); font-size: 10px; font-weight: 750; text-transform: uppercase; }.dialog-header h2 { margin: 2px 0 0; font-size: 19px; line-height: 1.3; }.dialog-close { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: #53615c; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }.dialog-close:hover { background: #eef2f0; }.dialog-close svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }.form-field { display: grid; gap: 6px; margin-top: 14px; color: #46534e; font-size: 12px; font-weight: 650; }.form-field input { width: 100%; height: 40px; padding: 0 11px; color: var(--text); background: #fff; border: 1px solid #cfd7d3; border-radius: 6px; outline: 0; }.form-field input:focus { border-color: #6c9b85; box-shadow: 0 0 0 3px #e5f0eb; }.settings-status { min-height: 20px; margin-top: 10px; color: var(--muted); font-size: 11px; }.settings-status.error { color: var(--red); }.dialog-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-top: 8px; }.dialog-button { height: 36px; padding: 0 12px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 650; }.dialog-button:disabled { opacity: .45; cursor: not-allowed; }.dialog-button.secondary { color: #43514c; background: #fff; border: 1px solid #cfd7d3; }.dialog-button.secondary:hover:not(:disabled) { background: #f4f7f5; }.dialog-button.primary { color: #fff; background: var(--green); border: 1px solid var(--green); }.dialog-button.primary:hover:not(:disabled) { background: #126842; }
.remote-nodes-dialog { width: min(1040px, calc(100% - 28px)); }.remote-nodes-dialog form { max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; }.dialog-description { margin: -8px 0 16px; color: var(--muted); font-size: 12px; }.dialog-description code { color: #315f4b; }.remote-node-list { display: grid; border-top: 1px solid var(--line); }.remote-node-row { padding: 13px 0; border-bottom: 1px solid var(--line); }.remote-node-fields { display: grid; grid-template-columns: .7fr 1.2fr 1.2fr 1fr; gap: 10px; }.remote-node-fields label { display: grid; gap: 5px; color: #53615c; font-size: 10px; font-weight: 650; }.remote-node-fields input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; color: var(--text); background: #fff; border: 1px solid #cfd7d3; border-radius: 5px; outline: 0; }.remote-node-fields input:focus { border-color: #6c9b85; box-shadow: 0 0 0 3px #e5f0eb; }.remote-node-controls { min-height: 30px; display: flex; align-items: end; gap: 16px; padding-top: 8px; color: var(--muted); font-size: 11px; }.node-enabled, .node-clear-token { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }.node-enabled input, .node-clear-token input { margin: 0; accent-color: var(--green); }.remove-node-button { width: 28px; height: 28px; margin-left: auto; padding: 0; color: var(--red); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 20px; line-height: 1; }.remove-node-button:hover { background: var(--red-soft); border-color: #edbbbb; }.add-node-button { height: 34px; margin-top: 12px; padding: 0 11px; color: #315f4b; background: #f0f6f3; border: 1px solid #cfe0d7; border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 650; }.add-node-button:hover { background: #e5f0eb; }.empty-node-list { padding: 28px 12px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); font-size: 12px; }
.setting-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }.field-button { height: 40px; padding: 0 11px; color: #43514c; background: #f7f9f8; border: 1px solid #cfd7d3; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 650; }.field-button:hover:not(:disabled) { background: #eef3f0; }.field-button:disabled { opacity: .45; cursor: not-allowed; }
.custom-columns-dialog { width: min(620px, calc(100% - 28px)); }.custom-columns-panel { padding: 20px; }.custom-column-list { display: grid; border-top: 1px solid var(--line); }.custom-column-manager-row { min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.custom-column-manager-row input, .add-custom-column-form input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; color: var(--text); background: #fff; border: 1px solid #cfd7d3; border-radius: 5px; outline: 0; }.custom-column-manager-row input:focus, .add-custom-column-form input:focus { border-color: #6c9b85; box-shadow: 0 0 0 3px #e5f0eb; }.custom-column-manager-row > span { color: var(--muted); font-size: 11px; white-space: nowrap; }.custom-column-manager-row button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--red); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }.custom-column-manager-row button:hover { background: var(--red-soft); border-color: #edbbbb; }.custom-column-manager-row button:disabled { opacity: .45; cursor: wait; }.custom-column-manager-row svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.add-custom-column-form { display: grid; gap: 6px; margin-top: 16px; color: #46534e; font-size: 12px; font-weight: 650; }.add-custom-column-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }.empty-custom-columns { padding: 28px 12px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); font-size: 12px; }
main { width: 100%; padding: 30px 24px 48px; }
main[hidden] { display: none; }
.navigation-view { min-height: calc(100vh - 64px); }.navigation-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }.navigation-heading p:last-child { margin: 6px 0 0; color: var(--muted); }.navigation-refresh-area { display: flex; align-items: center; gap: 10px; }.navigation-refresh-area small { color: var(--muted); font-size: 11px; white-space: nowrap; }.navigation-refresh-area small.error { color: var(--red); }.navigation-refresh-button { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: #315f4b; background: #fff; border: 1px solid #cfd7d3; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 650; white-space: nowrap; }.navigation-refresh-button:hover:not(:disabled) { background: #eef4f1; border-color: #aecbbb; }.navigation-refresh-button:disabled { opacity: .6; cursor: wait; }.navigation-refresh-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.navigation-refresh-button.spinning svg { animation: spin .8s linear infinite; }.navigation-groups { display: grid; gap: 22px; }.navigation-group h2 { margin: 0 0 10px; color: #405049; font-size: 13px; }.navigation-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }.navigation-link { min-width: 0; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); text-decoration: none; }.navigation-link:hover { border-color: #aecbbb; box-shadow: 0 5px 16px rgba(18, 33, 27, .09); transform: translateY(-1px); }.navigation-thumbnail { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; color: #3d6755; background: linear-gradient(135deg, #edf5f1, #dcebe4); }.navigation-thumbnail b { font-size: 34px; opacity: .72; }.navigation-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #eef3f0; }.navigation-thumbnail.icon img { padding: 42px; object-fit: contain; }.navigation-copy { min-width: 0; display: block; padding: 13px 15px 15px; }.navigation-copy strong, .navigation-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.navigation-copy strong { font-size: 14px; }.navigation-copy small { margin-top: 5px; color: var(--blue); font-size: 11px; }.navigation-empty { padding: 64px 20px; color: var(--muted); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.eyebrow { margin: 0 0 4px; color: var(--green); font-size: 11px; font-weight: 750; text-transform: uppercase; }
h1 { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: 0; }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }.connection span { width: 8px; height: 8px; border-radius: 50%; background: #9aa39f; }.connection.ok span { background: #2aaf6f; box-shadow: 0 0 0 3px #dff3e8; }.connection.error span { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.dashboard-shell { --sidebar-width: 320px; min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 10px var(--sidebar-width); }.dashboard-primary { min-width: 0; min-height: 0; padding-right: 8px; overflow: auto; scrollbar-gutter: stable; }.dashboard-sidebar { min-width: 0; min-height: 0; display: grid; align-content: start; gap: 14px; padding-left: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }.dashboard-resizer { position: relative; width: 10px; min-height: 0; cursor: col-resize; touch-action: none; outline: 0; }.dashboard-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: #d6dfda; border-radius: 2px; transition: background .15s ease, box-shadow .15s ease; }.dashboard-resizer:hover::before, .dashboard-resizer:focus-visible::before, body.dashboard-resizing .dashboard-resizer::before { background: var(--green); box-shadow: 0 0 0 3px #dcebe4; }.dashboard-resizing, .dashboard-resizing * { cursor: col-resize !important; user-select: none !important; }.sidebar-panel { min-width: 0; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }.sidebar-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }.sidebar-heading > div:first-child { min-width: 0; }.sidebar-heading span { color: var(--green); font-size: 9px; font-weight: 750; text-transform: uppercase; }.sidebar-heading h2 { margin: 1px 0 0; font-size: 16px; line-height: 1.3; }.sidebar-heading .connection { flex: none; font-size: 10px; }.sidebar-field { display: grid; gap: 5px; margin-top: 10px; color: #53615c; font-size: 10px; font-weight: 650; }.sidebar-field select { width: 100%; min-width: 0; height: 38px; padding: 0 30px 0 10px; color: #394641; background: #fff; border: 1px solid #cfd7d3; border-radius: 6px; }.dashboard-sidebar .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; box-shadow: none; }.dashboard-sidebar .metric { min-height: 88px; padding: 13px; border-bottom: 1px solid var(--line); }.dashboard-sidebar .metric:nth-child(2n) { border-right: 0; }.dashboard-sidebar .metric:last-child { grid-column: 1 / -1; min-height: 80px; border-bottom: 0; }.dashboard-sidebar .metric-label { font-size: 10px; }.dashboard-sidebar .metric-value { margin-top: 3px; font-size: 23px; }.dashboard-sidebar .metric-detail { margin-top: 6px; font-size: 9px; }.dashboard-sidebar .node-status { display: grid; gap: 6px; margin: 10px 0 0; }.dashboard-sidebar .node-status a, .dashboard-sidebar .node-status > div { width: 100%; }.dashboard-sidebar .filters { grid-template-columns: 1fr; gap: 7px; margin-top: 13px; }.dashboard-sidebar .multi-filter-popover { position: static; width: 100%; max-height: 220px; margin-top: 5px; box-shadow: none; }
#dashboard-view { height: calc(100vh - 64px); padding: 16px 24px 24px; display: flex; flex-direction: column; overflow: hidden; }#dashboard-view[hidden] { display: none; }.dashboard-primary .workspace { min-width: 0; }
.dashboard-sidebar { gap: 8px; }.sidebar-module-toolbar { position: relative; min-height: 32px; display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; padding: 0 2px 0 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }.sidebar-settings { position: relative; }.sidebar-settings > summary { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 8px; color: #53615c; background: #fff; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font-size: 10px; list-style: none; text-transform: none; }.sidebar-settings > summary::-webkit-details-marker { display: none; }.sidebar-settings > summary:hover, .sidebar-settings[open] > summary { color: #245b43; border-color: #aecbbb; }.sidebar-settings > summary svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }.sidebar-settings-popover { position: absolute; z-index: 25; top: 36px; right: 0; width: 230px; padding: 8px; color: var(--text); background: #fff; border: 1px solid #cfd7d3; border-radius: 6px; box-shadow: 0 12px 30px rgba(18, 33, 27, .18); text-transform: none; }.sidebar-settings-popover > strong { display: block; padding: 5px 7px 8px; font-size: 11px; }.sidebar-module-list { display: grid; }.sidebar-module-item { position: relative; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 3px 3px 7px; border-top: 1px solid #edf0ef; font-size: 11px; }.sidebar-module-item label { min-width: 0; display: flex; align-items: center; gap: 7px; cursor: pointer; }.sidebar-module-item input { width: 14px; height: 14px; margin: 0; accent-color: var(--green); }.sidebar-module-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.sidebar-panel { position: relative; padding: 11px; }.sidebar-panel[hidden] { display: none; }.sidebar-heading { margin-bottom: 8px; }.sidebar-heading h2 { font-size: 13px; }.sidebar-heading-tools { display: flex; align-items: center; gap: 3px; }.sidebar-heading-tools .connection { margin-right: 3px; }.sidebar-module-handle, .sidebar-module-hide { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; color: #71807a; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: grab; }.sidebar-module-hide { cursor: pointer; }.sidebar-module-handle:hover, .sidebar-module-handle:focus-visible, .sidebar-module-hide:hover, .sidebar-module-hide:focus-visible { color: #245b43; background: #eef4f1; border-color: #d5e1db; outline: 0; }.sidebar-module-handle:active { cursor: grabbing; }.sidebar-module-handle svg { width: 17px; fill: currentColor; }.sidebar-module-hide svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.sidebar-panel.dragging, .sidebar-module-item.dragging { opacity: .4; }.sidebar-panel.drop-before::before, .sidebar-module-item.drop-before::before, .sidebar-panel.drop-after::after, .sidebar-module-item.drop-after::after { content: ""; position: absolute; z-index: 3; right: 3px; left: 3px; height: 2px; background: var(--green); }.sidebar-panel.drop-before::before, .sidebar-module-item.drop-before::before { top: -5px; }.sidebar-panel.drop-after::after, .sidebar-module-item.drop-after::after { bottom: -5px; }.dashboard-sidebar .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; background: transparent; border: 0; }.dashboard-sidebar .metric, .dashboard-sidebar .metric:nth-child(2n), .dashboard-sidebar .metric:last-child { grid-column: auto; min-height: 62px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; }.dashboard-sidebar .metric-label { font-size: 9px; }.dashboard-sidebar .metric-value { margin-top: 2px; font-size: 19px; }.dashboard-sidebar .metric-detail { display: none; }.dashboard-sidebar .node-status { gap: 5px; margin: 0; }.dashboard-sidebar .node-status a, .dashboard-sidebar .node-status > div { min-height: 29px; padding: 4px 7px; }.dashboard-sidebar .node-status strong { font-size: 10px; }.dashboard-sidebar .node-status small { margin-left: auto; font-size: 9px; }.control-panel .sidebar-heading { margin-bottom: 6px; }
.summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.metric { min-height: 108px; padding: 20px; border-right: 1px solid var(--line); }.metric:last-child { border-right: 0; }.metric-label { color: var(--muted); font-size: 12px; }.metric-value { display: block; margin-top: 5px; font-size: 30px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }.metric-detail { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--muted); font-size: 11px; }.metric-detail i { width: 7px; height: 7px; border-radius: 50%; background: #8d9894; }.metric.running i { background: var(--green); }.metric.stopped i { background: var(--amber); }.metric.error i, .metric.webIssues i { background: var(--red); }
.node-status { margin: -4px 0 18px; display: flex; flex-wrap: wrap; gap: 7px; }.node-status a, .node-status > div { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; color: #43514c; background: #fff; border: 1px solid var(--line); border-radius: 5px; text-decoration: none; font-size: 11px; }.node-status a:hover { border-color: #aecbbb; background: #f7faf8; }.node-status strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }.node-status small { color: var(--muted); }.node-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #8d9894; }.node-dot.online { background: var(--green); }.node-dot.offline { background: var(--red); }
.workspace { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }
.search { width: min(440px, 100%); height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid #cfd7d3; border-radius: 6px; background: #fafbfb; }.search:focus-within { border-color: #6c9b85; box-shadow: 0 0 0 3px #e5f0eb; }.search svg { width: 17px; flex: none; fill: none; stroke: #71807a; stroke-width: 2; }.search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.multi-filter { position: relative; min-width: 0; }.multi-filter-button { width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px 0 11px; color: #394641; background: #fff; border: 1px solid #cfd7d3; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; list-style: none; }.multi-filter-button::-webkit-details-marker { display: none; }.multi-filter-button span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.multi-filter-button svg { width: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }.multi-filter[open] .multi-filter-button { border-color: #6c9b85; box-shadow: 0 0 0 3px #e5f0eb; }.multi-filter[open] .multi-filter-button svg { transform: rotate(180deg); }.multi-filter-popover { position: absolute; z-index: 20; top: 44px; left: 0; width: max(100%, 210px); max-height: 280px; padding: 6px; overflow-y: auto; background: #fff; border: 1px solid #cfd7d3; border-radius: 6px; box-shadow: 0 10px 28px rgba(18, 33, 27, .14); }.multi-filter:last-child .multi-filter-popover { right: 0; left: auto; }.multi-filter-option { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 5px 7px; color: #394641; border-radius: 4px; cursor: pointer; font-size: 12px; }.multi-filter-option:hover { background: #f1f5f3; }.multi-filter-option.all { margin-bottom: 4px; border-bottom: 1px solid #edf0ef; border-radius: 4px 4px 0 0; font-weight: 650; }.multi-filter-option input { width: 15px; height: 15px; flex: none; margin: 0; accent-color: var(--green); }.filter-status { display: inline-flex; align-items: center; gap: 7px; }.filter-status::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #8d9894; }.filter-status.running::before { background: var(--green); }.filter-status.stopped::before { background: var(--amber); }.filter-status.error::before { background: var(--red); }
.layout-toggle { width: 73px; height: 38px; flex: none; display: grid; grid-template-columns: repeat(2, 1fr); padding: 2px; background: #eef2f0; border: 1px solid #cfd7d3; border-radius: 6px; }.layout-toggle button { display: grid; place-items: center; padding: 0; color: #66736e; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }.layout-toggle button:hover { color: #315f4b; }.layout-toggle button[aria-pressed="true"] { color: #174c36; background: #fff; box-shadow: 0 1px 3px rgba(18, 33, 27, .15); }.layout-toggle svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.column-settings { position: relative; }.column-button { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 11px; color: #394641; background: #fff; border: 1px solid #cfd7d3; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; list-style: none; white-space: nowrap; }.column-button::-webkit-details-marker { display: none; }.column-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }.column-settings[open] .column-button { border-color: #6c9b85; box-shadow: 0 0 0 3px #e5f0eb; }.column-popover { position: absolute; z-index: 10; top: 44px; right: 0; width: 280px; padding: 8px; background: #fff; border: 1px solid #cfd7d3; border-radius: 6px; box-shadow: 0 10px 28px rgba(18, 33, 27, .14); }.column-order-list { display: grid; }.column-order-item { position: relative; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 6px 5px 9px; border-bottom: 1px solid #edf0ef; font-size: 12px; }.column-order-item.dragging { opacity: .35; }.column-order-item.drop-before::before, .column-order-item.drop-after::after { content: ""; position: absolute; z-index: 1; right: 3px; left: 3px; height: 2px; background: var(--green); }.column-order-item.drop-before::before { top: -1px; }.column-order-item.drop-after::after { bottom: -1px; }.column-visibility { min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }.column-visibility input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }.column-visibility span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.column-drag-handle { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: #607069; border: 1px solid transparent; border-radius: 5px; cursor: grab; touch-action: none; }.column-drag-handle:hover, .column-drag-handle:focus-visible { color: #315f4b; background: #eef4f1; border-color: #d5e1db; outline: 0; }.column-drag-handle:active { cursor: grabbing; }.column-drag-handle svg { width: 19px; fill: currentColor; }.column-auto-width { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; color: #394641; border-bottom: 1px solid #edf0ef; cursor: pointer; font-size: 12px; }.column-auto-width input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }.reset-columns { width: 100%; height: 34px; margin-top: 8px; color: #315f4b; background: #f0f6f3; border: 1px solid #cfe0d7; border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 650; }.reset-columns:hover { background: #e5f0eb; }
.notice { margin: 14px 16px 0; padding: 10px 12px; border: 1px solid #efcb75; border-radius: 6px; background: var(--amber-soft); color: #704a0c; font-size: 12px; }
.notice.error { border-color: #edbbbb; background: var(--red-soft); color: #8c2f2f; }
.resource-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 16px; background: #f8faf9; border-bottom: 1px solid var(--line); }.resource-card-grid[hidden], .table-wrap[hidden], .column-settings[hidden] { display: none; }.resource-card { min-width: 0; min-height: 270px; display: flex; flex-direction: column; padding: 16px; background: #fff; border: 1px solid #dce3df; border-radius: 7px; box-shadow: 0 1px 3px rgba(18, 33, 27, .04); }.resource-card:hover { border-color: #bdcec5; box-shadow: 0 4px 12px rgba(18, 33, 27, .07); }.resource-card-header { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }.resource-card-header .service-icon { width: 38px; height: 38px; }.resource-card-title { min-width: 0; }.resource-card-title strong, .resource-card-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.resource-card-title strong { font-size: 14px; }.resource-card-title small { margin-top: 2px; color: var(--muted); font-size: 10px; }.resource-card-tags { min-height: 28px; display: flex; align-items: center; gap: 9px; margin-top: 14px; }.resource-card-tags .type { padding-left: 9px; border-left: 1px solid var(--line); font-size: 11px; }.resource-card-web { min-height: 68px; margin-top: 14px; padding: 12px; overflow: hidden; background: #f8faf9; border: 1px solid #e3e9e6; border-radius: 6px; }.card-domain { min-width: 0; display: flex; align-items: flex-start; gap: 8px; }.card-domain .domain-copy { max-width: none; }.resource-card-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; margin: 14px 0 0; }.resource-card-meta div { min-width: 0; }.resource-card-meta dt { color: var(--muted); font-size: 10px; }.resource-card-meta dd { margin: 3px 0 0; overflow: hidden; color: #405049; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.resource-card-meta dd span { display: block; margin-top: 2px; color: var(--muted); font-weight: 500; }.resource-card-actions { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 14px; }.card-group-heading { grid-column: 1 / -1; display: flex; align-items: center; min-height: 34px; padding: 7px 10px; color: #405049; background: #eef3f0; border: 1px solid #d8e1dc; border-radius: 5px; font-size: 11px; font-weight: 700; }.card-empty { grid-column: 1 / -1; }
.resource-card-custom { display: grid; gap: 7px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }.resource-card-custom div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }.resource-card-custom dt { color: var(--muted); font-size: 10px; }.resource-card-custom dd { margin: 0; overflow-wrap: anywhere; color: #405049; font-size: 11px; }
.table-wrap { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 1080px; } th { position: relative; padding: 11px 16px; text-align: left; white-space: nowrap; color: var(--muted); background: #f8faf9; border-bottom: 1px solid var(--line); cursor: grab; font-size: 11px; font-weight: 650; text-transform: uppercase; user-select: none; } th:active { cursor: grabbing; } th.dragging { opacity: .35; } th.drop-before::before, th.drop-after::after { content: ""; position: absolute; top: 5px; bottom: 5px; width: 2px; background: var(--green); } th.drop-before::before { left: 0; } th.drop-after::after { right: 0; } td { padding: 15px 16px; border-bottom: 1px solid #e9edeb; vertical-align: middle; } tbody tr:not(.group-row):hover { background: #fbfcfc; }
th[data-column="node"], td[data-column="node"] { min-width: 96px; } th[data-column="type"], td[data-column="type"] { min-width: 72px; } th[data-column="status"], td[data-column="status"] { min-width: 100px; } th[data-column="updated"], td[data-column="updated"] { min-width: 94px; } th[data-column="actions"], td[data-column="actions"] { min-width: 84px; } td[data-column="node"], td[data-column="type"], td[data-column="status"], td[data-column="updated"], td[data-column="actions"] { white-space: nowrap; } th[data-custom-column], td[data-column^="custom:"] { width: 180px; min-width: 180px; max-width: 180px; }
.thumbnail-cell { padding-top: 9px; padding-bottom: 9px; }.resource-thumbnail { position: relative; width: 112px; height: 63px; display: grid; place-items: center; overflow: hidden; color: #3d6755; background: linear-gradient(135deg, #edf5f1, #dcebe4); border: 1px solid #d8e4de; border-radius: 5px; }.resource-thumbnail b { font-size: 20px; opacity: .68; }.resource-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #eef3f0; }.resource-thumbnail.icon img { padding: 16px; object-fit: contain; }.resource-card-thumbnail { width: 100%; height: 142px; margin-bottom: 14px; border-radius: 6px; }.resource-card-thumbnail b { font-size: 32px; }.resource-card-thumbnail.icon img { padding: 42px; }
.thumbnails-hidden .navigation-thumbnail, .thumbnails-hidden .resource-card-thumbnail { display: none; }.thumbnails-hidden .resource-card { min-height: 0; }
.column-width-table { width: auto; min-width: 0; table-layout: fixed; }.column-width-table th, .column-width-table td { min-width: 0; max-width: none; overflow: hidden; }.column-width-table th.sortable { cursor: pointer; }.column-width-table .service-name, .column-width-table .domains { min-width: 0; }.column-width-table .service-name strong, .column-width-table .service-name small, .column-width-table .domain-copy { max-width: 100%; }.column-sort-indicator { margin-left: 5px; color: var(--green); font-size: 12px; }.column-resizer { position: absolute; z-index: 4; top: 0; right: -5px; bottom: 0; width: 11px; cursor: col-resize; touch-action: none; }.column-resizer::after { content: ""; position: absolute; top: 7px; right: 5px; bottom: 7px; width: 1px; background: #dfe5e2; }.column-resizer:hover::after, th.resizing .column-resizer::after { width: 2px; background: var(--green); }.column-resizing, .column-resizing * { cursor: col-resize !important; user-select: none !important; }
.group-row td { padding: 9px 16px; color: #405049; background: #eef3f0; border-top: 1px solid #d8e1dc; border-bottom: 1px solid #d8e1dc; font-size: 11px; font-weight: 700; }.group-server-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #dcebe4; }.group-count { margin-left: 7px; color: var(--muted); font-weight: 500; }
.logo-cell { width: 66px; }.service-name { display: flex; align-items: center; min-width: 190px; }.service-icon { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 6px; color: #2e6750; background: #e9f2ed; font-weight: 750; }.site-logo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 5px; object-fit: contain; background: #fff; }.service-name strong, .service-name small { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.service-name small, .subtle { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.node-link, .node-label { min-height: 26px; width: fit-content; display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px; color: #315f4b; background: #f2f7f4; border: 1px solid #d5e4dc; border-radius: 5px; text-decoration: none; white-space: nowrap; font-size: 11px; font-weight: 650; }.node-link > span, .node-label > span { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--green); }.node-link:hover { color: #174c36; background: #e8f2ed; border-color: #b9d2c5; }
.type { color: #4b5953; }.badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; }.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.badge.running { color: var(--green); background: var(--green-soft); }.badge.stopped { color: var(--amber); background: var(--amber-soft); }.badge.error { color: var(--red); background: var(--red-soft); }.badge.unknown { color: #66736e; background: #edf0ef; }
.domains { display: grid; gap: 10px; min-width: 250px; }.domain { display: flex; align-items: flex-start; gap: 7px; }.domain-copy { min-width: 0; max-width: 320px; display: flex; flex-direction: column; }.domain-title { overflow: hidden; color: var(--blue); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }.domain-title:hover { text-decoration: underline; }.domain-url { margin-top: 1px; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; line-height: 1.35; }.domain-latency { margin-top: 2px; color: var(--muted); font-size: 10px; }.web-dot { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 50%; background: #98a29e; }.web-dot.online { background: #2aaf6f; }.web-dot.offline { background: var(--red); }
.manage-link { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; color: #315f4b; background: #f0f6f3; border: 1px solid #cfe0d7; border-radius: 5px; text-decoration: none; font-size: 11px; font-weight: 650; white-space: nowrap; }.manage-link:hover { background: #e5f0eb; border-color: #aecbbb; }
.custom-value-input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; color: #405049; background: transparent; border: 1px solid transparent; border-radius: 5px; outline: 0; }.custom-value-input:hover { background: #fff; border-color: #dce3df; }.custom-value-input:focus { background: #fff; border-color: #6c9b85; box-shadow: 0 0 0 3px #e5f0eb; }.custom-value-input:disabled { opacity: .55; cursor: wait; }
.empty, .loading { padding: 48px 20px; text-align: center; color: var(--muted); }.loading span { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid #cdd5d2; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }.result-count { padding: 10px 16px; color: var(--muted); background: #fafbfb; font-size: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1200px) { #dashboard-view { height: auto; min-height: calc(100vh - 64px); overflow: visible; }.dashboard-shell { display: flex; flex-direction: column; }.dashboard-resizer { display: none; }.dashboard-sidebar { order: -1; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); padding: 0 0 14px; overflow: visible; scrollbar-gutter: auto; }.dashboard-primary { padding: 0; overflow: visible; scrollbar-gutter: auto; } }
@media (max-width: 980px) { .checked-at { display: none; }.header-workspace-tools { margin: 0 10px; } }
@media (max-width: 800px) { body { padding-top: 116px; }.navigation-mode { padding-top: 64px; }.topbar { height: 116px; padding: 8px 14px; flex-wrap: wrap; align-content: center; row-gap: 8px; }.navigation-mode .topbar { height: 64px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }.brand { order: 1; }.header-actions { order: 2; gap: 6px; }.header-workspace-tools { order: 3; min-width: 0; max-width: none; flex: 0 0 100%; margin: 0; }.brand div > span { display: none; }.navigation-toggle { width: 36px; padding: 0; justify-content: center; }.navigation-toggle span { display: none; }.feature-menu-button { width: 36px; justify-content: center; padding: 0; }.feature-menu-label { display: none; }.feature-menu-panel { right: -42px; width: min(320px, calc(100vw - 28px)); } main { padding: 22px 14px 36px; }#dashboard-view { min-height: calc(100vh - 116px); padding: 14px; }.navigation-heading { align-items: start; flex-direction: column; gap: 12px; }.dashboard-sidebar { grid-template-columns: 1fr; }.navigation-refresh-area { width: 100%; justify-content: space-between; }.navigation-refresh-area small { white-space: normal; text-align: right; }.summary { grid-template-columns: repeat(2, 1fr); }.metric { min-height: 92px; border-bottom: 1px solid var(--line); }.metric:nth-child(2n) { border-right: 0; }.metric:last-child { grid-column: 1 / -1; border-bottom: 0; }.dashboard-sidebar .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-sidebar .filters { grid-template-columns: 1fr; }.multi-filter { width: 100%; }.multi-filter-button span { max-width: none; }.multi-filter-popover { top: auto; right: 0; bottom: 44px; width: 100%; }.dashboard-sidebar .multi-filter-popover { position: static; margin-top: 5px; }.column-popover { left: 0; right: 0; width: 100%; }.feature-column-settings .column-popover { width: 100%; }.resource-card-grid, .navigation-links { grid-template-columns: 1fr; }.resource-card-grid { padding: 12px; }.dialog-actions { grid-template-columns: 1fr 1fr; }.dialog-actions span { display: none; } #reset-dashboard-title { grid-column: 1 / -1; }.remote-node-fields { grid-template-columns: 1fr; }.remote-node-controls { align-items: flex-start; flex-direction: column; gap: 7px; }.remove-node-button { margin: -34px 0 0 auto; }.compact-actions { grid-template-columns: 1fr 1fr; } }