.icon-button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; display: grid; place-items: center; cursor: pointer; position: relative; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.icon-button:hover { border-color: #c8d2cd; background: var(--surface-muted); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.icon-button svg { width: 17px; height: 17px; }
.icon-button.has-alert::after { content: ""; position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #df6254; border: 2px solid #fff; }
.primary-button, .secondary-button, .quiet-button { height: 40px; border-radius: 7px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 650; font-size: 12px; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.primary-button { color: #fff; background: var(--green); border: 1px solid var(--green); box-shadow: 0 5px 14px rgba(15,122,85,.16); }
.primary-button:hover { background: var(--green-dark); border-color: var(--green-dark); box-shadow: 0 7px 18px rgba(15,122,85,.22); transform: translateY(-1px); }
.primary-button svg, .secondary-button svg, .quiet-button svg { width: 15px; height: 15px; }
.secondary-button { background: #fff; border: 1px solid var(--line); }
.secondary-button:hover { border-color: #c7d1cc; background: var(--surface-muted); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.quiet-button { padding: 0 8px; color: var(--green-dark); background: transparent; border: 0; }
.mobile-menu { display: none; }

.global-search { width: 320px; height: 40px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); display: flex; align-items: center; gap: 8px; padding: 0 10px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.global-search:focus-within { border-color: #9fc9b6; background: #fff; box-shadow: 0 0 0 3px rgba(15,122,85,.1); }
.global-search svg { width: 16px; color: #7c8a83; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.global-search kbd { flex: 0 0 auto; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; color: #7f8b85; background: #fff; font: 9px "DM Mono", monospace; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-height: 136px; padding: 20px; border: 1px solid var(--line); border-top: 2px solid var(--green); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.metric-card:nth-child(2) { border-top-color: var(--blue); }
.metric-card:nth-child(3) { border-top-color: var(--amber); }
.metric-card:nth-child(4) { border-top-color: var(--coral); }
.metric-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.metric-card header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.metric-card header span:first-child { display: flex; align-items: center; gap: 7px; }
.metric-card header svg { width: 15px; }
.delta { padding: 3px 6px; border-radius: 3px; color: var(--green-dark); background: var(--green-soft); font: 500 9px "DM Mono", monospace; }
.delta.down { color: var(--coral); background: var(--coral-soft); }
.metric-value { margin: 20px 0 6px; font: 600 29px/1 "DM Mono", monospace; }
.metric-foot { color: #8b958f; font-size: 10px; }
.spark { position: absolute; right: 13px; bottom: 12px; width: 72px; height: 28px; opacity: .72; }
.spark polyline { fill: none; stroke: var(--green); stroke-width: 2; vector-effect: non-scaling-stroke; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .8fr); gap: 16px; margin-bottom: 16px; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-head { min-height: 66px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title h2 { margin: 0; font-size: 15px; }
.panel-title p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.segmented { padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); display: flex; gap: 2px; }
.segmented button { height: 28px; padding: 0 10px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.segmented button.active { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(20,38,29,.08); font-weight: 650; }
.chart-body { padding: 20px 18px 15px; }
.chart-legend { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.chart-total span { display: block; color: var(--muted); font-size: 10px; }
.chart-total strong { font: 500 20px "DM Mono", monospace; }
.legend-items { display: flex; gap: 14px; color: var(--muted); font-size: 9px; }
.legend-items i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.line-chart { width: 100%; height: 185px; display: block; overflow: visible; }
.grid-line { stroke: #edf0ee; stroke-width: 1; }
.chart-area { fill: url(#areaGradient); opacity: .48; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart-line.secondary { stroke: var(--blue); stroke-width: 1.6; }
.chart-dot { fill: #fff; stroke: var(--green); stroke-width: 2; }
.axis-labels { display: flex; justify-content: space-between; color: #99a29d; font: 9px "DM Mono", monospace; margin-top: 5px; }

.health-list { padding: 3px 18px 8px; }
.health-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.health-item:last-child { border-bottom: 0; }
.health-icon { width: 30px; height: 30px; border-radius: 5px; display: grid; place-items: center; }
.health-icon svg { width: 15px; }
.health-icon.green { color: var(--green); background: var(--green-soft); }
.health-icon.blue { color: var(--blue); background: var(--blue-soft); }
.health-icon.amber { color: var(--amber); background: var(--amber-soft); }
.health-info strong { display: block; font-size: 11px; }
.health-info small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.health-value { text-align: right; }
.health-value strong { display: block; font: 500 11px "DM Mono", monospace; }
.health-value small { display: block; margin-top: 2px; color: var(--green); font-size: 9px; }
.capacity { margin: 5px 18px 17px; padding: 13px; background: #f7f9f7; border-radius: 5px; }
.capacity div:first-child { display: flex; justify-content: space-between; font-size: 10px; }
.capacity strong { font-family: "DM Mono", monospace; }
.progress { height: 5px; margin-top: 9px; border-radius: 3px; overflow: hidden; background: #e2e7e3; }
.progress span { display: block; height: 100%; background: var(--green); border-radius: inherit; }

.table-panel { overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { height: 44px; padding: 0 18px; background: var(--surface-muted); color: #738079; font-size: 10px; font-weight: 650; text-align: left; text-transform: uppercase; }
.data-table td { height: 62px; padding: 0 18px; border-top: 1px solid var(--line-soft); font-size: 11.5px; }
.data-table tr { transition: background .15s; }
.data-table tbody tr:hover { background: #f8fbf9; }
.entity { display: flex; align-items: center; gap: 10px; }
.entity-logo { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 5px; display: grid; place-items: center; color: #fff; background: var(--green); font-weight: 700; }
.entity-logo.blue { background: #5d78b7; }
.entity-logo.gold { background: #b58038; }
.entity-logo.coral { background: #bf665b; }
.entity strong, .entity small { display: block; }
.entity small { color: var(--muted); margin-top: 2px; font-size: 9px; }
.mono { font-family: "DM Mono", monospace; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.status.success { color: var(--green-dark); background: var(--green-soft); }
.status.success::before { background: var(--green); }
.status.warning { color: #96590f; background: var(--amber-soft); }
.status.warning::before { background: var(--amber); }
.status.neutral { color: #67706c; background: #edf0ee; }
.status.neutral::before { background: #8f9994; }
.status.danger { color: var(--coral); background: var(--coral-soft); }
.status.danger::before { background: var(--coral); }

.toolbar { min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 9px; }
.filter-input { width: 260px; height: 38px; border: 1px solid var(--line); border-radius: 7px; background: #fff; display: flex; align-items: center; gap: 7px; padding: 0 10px; transition: border-color .18s ease, box-shadow .18s ease; }
.filter-input:focus-within { border-color: #9fc9b6; box-shadow: 0 0 0 3px rgba(15,122,85,.09); }
.filter-input svg { width: 14px; color: var(--muted); }
.filter-input input { width: 100%; border: 0; outline: 0; font-size: 11px; }
.filter-select { height: 38px; padding: 0 30px 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; font-size: 11px; }
.toolbar .spacer { flex: 1; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.summary-item { padding: 15px 18px; border-right: 1px solid var(--line-soft); }
.summary-item:last-child { border-right: 0; }
.summary-item span { display: block; color: var(--muted); font-size: 9px; }
.summary-item strong { display: block; margin-top: 5px; font: 500 16px "DM Mono", monospace; }

.empty-view { min-height: 520px; display: grid; place-items: center; text-align: center; }
.empty-view span { width: 56px; height: 56px; margin: auto; border-radius: 10px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); }
.empty-view svg { width: 25px; }
.empty-view h2 { margin: 14px 0 5px; font-size: 16px; }
.empty-view p { margin: 0 0 15px; color: var(--muted); font-size: 11px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(10,20,15,.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 8px; background: #fff; box-shadow: var(--shadow-lg); }
.modal > header { padding: 19px 21px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; }
.modal h2 { margin: 5px 0 0; font-size: 18px; }
.modal form { padding: 20px 21px; }
.modal form > label, .form-grid label { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 650; }
.modal input, .modal select { width: 100%; height: 42px; margin-top: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.isolation-choice > span { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 600; }
.isolation-choice { margin-bottom: 22px; }
.isolation-choice label { display: inline-block; width: calc(50% - 5px); vertical-align: top; }
.isolation-choice input { position: absolute; opacity: 0; pointer-events: none; }
.isolation-choice label > span { min-height: 78px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; cursor: pointer; }
.isolation-choice label:first-of-type { margin-right: 6px; }
.isolation-choice input:checked + span { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--green-soft); }
.isolation-choice svg { width: 18px; color: var(--green); }
.isolation-choice strong, .isolation-choice small { display: block; }
.isolation-choice strong { font-size: 10px; }
.isolation-choice small { grid-column: 2; margin-top: -4px; color: var(--muted); font-size: 8px; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 110; min-width: 260px; padding: 14px 16px; border-radius: 7px; color: #fff; background: #1a2c23; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 9px; transform: translateY(80px); opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast svg { width: 17px; color: #5bd09a; }

.field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; font-weight: 400; }
.separated-toolbar { margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.result-count { color: var(--muted); font: 9px "DM Mono", monospace; white-space: nowrap; }
.compact-check { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; white-space: nowrap; cursor: pointer; }
.compact-check input { accent-color: var(--green); }
.empty-result { min-height: 180px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.data-table tr[hidden], .agent-card[hidden] { display: none; }
.data-table .agent-avatar { width: 31px; height: 31px; border-radius: 5px; }
.data-table .agent-avatar svg { width: 15px; }
.data-table .quiet-button { white-space: nowrap; }
.segmented button { display: inline-flex; align-items: center; gap: 5px; }
.segmented button svg { width: 12px; }

.action-modal { width: min(560px, 100%); }
.action-modal.wide { width: min(820px, 100%); }
.action-content { padding: 20px 21px; }
.detail-hero { min-height: 58px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.detail-hero .entity-logo, .avatar.large { width: 46px; height: 46px; }
.detail-hero h3 { margin: 0 0 4px; font-size: 15px; }
.detail-hero p { margin: 0; color: var(--muted); font-size: 9px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0; background: var(--line-soft); border: 1px solid var(--line-soft); }
.detail-grid > div { min-height: 72px; padding: 13px; background: #fff; }
.detail-grid span { display: block; color: var(--muted); font-size: 9px; }
.detail-grid strong { display: block; margin-top: 6px; font-size: 11px; overflow-wrap: anywhere; }
.panel-actions, .form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.danger-button { height: 36px; padding: 0 12px; border: 1px solid #e8c5c1; border-radius: 5px; display: inline-flex; align-items: center; gap: 7px; color: #a8473e; background: #fff7f6; font-size: 10px; font-weight: 600; cursor: pointer; }
.danger-button:hover { background: var(--coral-soft); }
.danger-button svg { width: 14px; }
.info-callout { padding: 12px 13px; border-left: 3px solid var(--blue); color: #52615a; background: var(--blue-soft); font-size: 10px; line-height: 1.7; }
.secret-box { padding: 16px; border: 1px solid var(--line); background: #f7f9f7; }
.secret-box span { display: block; color: var(--muted); font-size: 9px; }
.secret-box code { display: block; margin-top: 9px; padding: 10px; color: var(--green-dark); background: #fff; border: 1px dashed var(--line); font: 500 11px "DM Mono", monospace; overflow-wrap: anywhere; }
.secret-box + .info-callout { margin-top: 12px; }
.compact-setting-list { margin: 0 18px 14px; padding: 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.integration-actions { justify-content: space-between; padding: 16px 18px 0; }

.scope-list { display: grid; gap: 6px; }
.scope-list button { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); background: #fff; cursor: pointer; }
.scope-list button > span { display: flex; align-items: center; gap: 9px; }
.scope-list button svg { width: 15px; color: var(--muted); }
.scope-list button.active { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); }
.scope-list button.active svg { color: var(--green); }
.support-list, .notification-list { display: grid; gap: 8px; }
.support-list > div, .notification-list > div { min-height: 58px; padding: 11px 12px; border: 1px solid var(--line-soft); display: flex; align-items: center; gap: 11px; }
.support-list > div > svg { width: 18px; color: var(--green); }
.support-list strong, .support-list small, .notification-list strong, .notification-list small { display: block; }
.support-list strong, .notification-list strong { font-size: 11px; }
.support-list small, .notification-list small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.is-loading svg { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.connection-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 8px; text-align: center; font-size: 12px; font-weight: 600; }
.connection-banner.disconnected { background: var(--amber-soft); color: var(--amber); }
.connection-banner.offline { background: var(--coral-soft); color: var(--coral); }