.app { grid-template-columns: var(--sidebar-width, 238px) minmax(0,1fr); }
.sidebar { width: var(--sidebar-width, 238px); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: rgba(105,104,119,.22) transparent; }
.sidebar-resizer { position: fixed; z-index: 6; top: 0; bottom: 0; left: calc(var(--sidebar-width, 238px) - 5px); width: 10px; padding: 0; cursor: col-resize; touch-action: none; }
.sidebar-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .12s ease,box-shadow .12s ease; }
.sidebar-resizer:hover::after,.sidebar-resizer:focus-visible::after,.sidebar-resizing .sidebar-resizer::after { background: #8a72ed; box-shadow: 0 0 0 1px rgba(138,114,237,.12); }
.sidebar-resizer:focus-visible { outline: none; }
.sidebar-resizing,.sidebar-resizing * { cursor: col-resize!important; user-select: none!important; }
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(105,104,119,.22); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(105,104,119,.38); }
.sidebar-label { margin-top: 0; }
.sidebar-close { display: none; }
.cron-nav { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 42px; margin-top: 8px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #696877; text-align: left; font-size: 13px; }
.cron-nav svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cron-nav:hover { background: #f0eefb; color: #3f345e; }
.cron-nav[aria-pressed="true"] { background: #eeeaff; color: #634bc4; font-weight: 700; }
.cron-nav:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.sidebar-status { display: flex; flex-direction: column; gap: 10px; }
.heart-bit { min-width: 0; padding: 8px 9px; border: 1px solid #e5e2eb; border-radius: 9px; background: #fff; color: #65616d; font-size: 9px; }
.heart-bit-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.heart-bit-heading strong { color: #45414e; font-size: 10px; }
.heart-bit-heading [role="status"] { min-width: 0; overflow: hidden; color: #87828e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.heart-bit-cpu { --heart-bit-color: #ed923b; }
.heart-bit-memory { --heart-bit-color: #4b91e2; }
.heart-bit-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: 7px; font-variant-numeric: tabular-nums; }
.heart-bit-legend-item { display: flex; align-items: center; gap: 4px; }
.heart-bit-legend-item::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--heart-bit-color); }
.heart-bit-legend-item strong { min-width: 22px; color: #45414e; font-size: 9px; text-align: right; }
.heart-bit-chart { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 4px; margin-top: 7px; }
.heart-bit-scale { display: flex; flex-direction: column; justify-content: space-between; color: #9b96a2; font-size: 7px; line-height: 1; text-align: right; }
.heart-bit-chart svg { display: block; overflow: visible; width: 100%; height: 64px; }
.heart-bit-grid { fill: none; stroke: #edeaf1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.heart-bit-line { fill: none; stroke: var(--heart-bit-color); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.heart-bit-point { fill: var(--heart-bit-color); }
.heart-bit-range { display: flex; justify-content: space-between; margin: 4px 0 0 26px; color: #9b96a2; font-size: 7px; }
.agent-sidebar-label { margin: 0 10px 10px; }
.agent-list { display: flex; flex-direction: column; gap: 7px; }
.monitor-agent { padding: 10px; border: 1px solid #e4e2e9; border-radius: 10px; background: #fff; color: #686572; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.monitor-agent:hover { border-color: #cfc7e6; box-shadow: 0 4px 12px rgba(46,35,84,.08); transform: translateY(-1px); }
.monitor-agent:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.monitor-agent-head { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; }
.monitor-agent-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #eeebf8; color: #694fd2; font-weight: 800; }
.monitor-agent-head strong { overflow: hidden; color: #45414e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.monitor-agent-state { padding: 3px 5px; border-radius: 10px; background: #edf6f2; color: #287a5e; font-size: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.monitor-agent p { display: -webkit-box; overflow: hidden; margin: 7px 0 5px; color: #74717d; font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.monitor-agent small { display: block; overflow: hidden; color: #a09ca7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.monitor-agent-value { display: block; overflow: hidden; margin: -1px 0 5px 29px; color: #5f48c4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.monitor-agent.running { border-color: #cfc5f1; background: #faf8ff; }
.monitor-agent.running .monitor-agent-state { background: #eee9ff; color: #6549cd; }
.monitor-agent.running .monitor-agent-icon { animation: agentPulse 1.1s infinite; }
.monitor-agent.limited .monitor-agent-state { background: #f5f1e8; color: #786441; }
.monitor-agent.attention { border-color: #e7ad62; background: #fff9ee; box-shadow: 0 0 0 2px #f7deb7; }
.monitor-agent.attention .monitor-agent-icon,.monitor-agent.attention .monitor-agent-state { background: #fce5bd; color: #9a580b; }
.monitor-agent.failed.attention { border-color: #e49ba1; background: #fff6f6; box-shadow: 0 0 0 2px #f8dadd; }
.monitor-agent.failed.attention .monitor-agent-icon,.monitor-agent.failed.attention .monitor-agent-state { background: #f9dfe1; color: #a53b45; }
.agent-detail-modal { width: min(680px, calc(100% - 28px)); max-width: 680px; max-height: calc(100vh - 28px); overflow-y: auto; }
.agent-detail-shell { padding: 28px; }
.agent-detail-content { display: grid; gap: 18px; margin-top: 20px; }
.agent-detail-status { display: flex; align-items: center; gap: 9px; }
.agent-detail-status .monitor-agent-icon { width: 30px; height: 30px; font-size: 16px; }
.agent-detail-status .monitor-agent-state { font-size: 9px; }
.agent-detail-summary { margin: 0; color: #393341; font-size: 16px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.agent-detail-issues h3 { margin: 0 0 8px; color: #83788e; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.agent-detail-issues ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.agent-detail-issues li { padding-left: 2px; color: #9a580b; }
.agent-detail-observations h3 { margin: 0 0 8px; color: #83788e; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.agent-detail-observations ul { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: #625a69; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.agent-detail-observations p { margin: 3px 0 0; }
.agent-issue { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #ead8ba; border-radius: 9px; background: #fffaf1; color: #413a32; text-align: left; }
.agent-issue:hover { border-color: #d4a45e; background: #fff6e5; }
.agent-issue:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.agent-issue-copy { display: grid; min-width: 0; gap: 3px; }
.agent-issue-copy strong { font-size: 13px; overflow-wrap: anywhere; }
.agent-issue-copy > span { color: #71695f; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.agent-issue small { flex: 0 0 auto; color: #8d641f; font-size: 10px; font-weight: 700; white-space: nowrap; }
.agent-detail-report { padding: 16px 18px; border: 1px solid #e2dcf3; border-radius: 11px; background: linear-gradient(145deg,#fbfaff,#f7f4ff); }
.agent-detail-report h3 { margin: 0 0 10px; color: #83788e; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.agent-detail-report .rich-text { color: #37313d; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.agent-detail-meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; }
.agent-detail-meta div { min-width: 0; padding: 10px; border-radius: 9px; background: #f6f4f9; }
.agent-detail-meta dt { margin-bottom: 4px; color: #938c9a; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.agent-detail-meta dd { margin: 0; color: #47404f; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.sidebar-account { display: flex; align-items: center; gap: 2px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sidebar-account .user { min-width: 0; flex: 1; gap: 6px; margin: 0; padding: 0; border: 0; }
.sidebar-account .avatar { flex: 0 0 34px; }
.sidebar-account .user > div:nth-child(2) { min-width: 0; }
.sidebar-account .user strong,.sidebar-account .user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account .online { left: 25px; bottom: 0; }
.sidebar-account-actions { display: flex; flex: 0 0 auto; }
.sidebar-account-actions button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #696877; font-size: 16px; }
.sidebar-action-icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-account-actions button:hover { background: #f0eefb; color: #3f345e; }
.sidebar-account-actions button:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.settings-modal form { gap: 0; }
.settings-modal #settings-title { display: inline; }
.settings-rules-link { font-size: 12px; margin-left: 8px; }
.settings-notifications,.settings-project,.settings-task-defaults,.settings-watchdog { padding: 18px 0; border: 0; border-radius: 0; background: transparent; }
.settings-project,.settings-task-defaults,.settings-watchdog { border-top: 1px solid #efedf3; }
.settings-notifications { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.settings-copy strong { font-size: 14px; }
.settings-project { display: grid; gap: 20px; }
.settings-project-name { margin: 0; color: #777482; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.settings-project-appearance { display: grid; grid-template-columns: minmax(0,1fr) 58px; align-items: end; gap: 16px; }
.settings-project-devices { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid #efedf3; }
.settings-project-devices h3 { margin: 0; font-size: 14px; font-weight: 700; }
.settings-project-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 16px; }
.settings-project-control { min-width: 0; }
.settings-project-control select { width: 100%; min-width: 0; }
.settings-project-color { min-width: 0; }
#project-color { width: 58px; height: 46px; padding: 3px; border-color: #dedde5; background: #fff; cursor: pointer; }
#project-color::-webkit-color-swatch-wrapper { padding: 0; }
#project-color::-webkit-color-swatch { border: 0; border-radius: 5px; }
#project-color::-moz-color-swatch { border: 0; border-radius: 5px; }
.settings-project-guest { display: grid; gap: 13px; padding-top: 20px; border-top: 1px solid #efedf3; }
.settings-project-guest[hidden] { display: none; }
.settings-project-guest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.settings-project-guest-head h3 { margin: 0 0 4px; font-size: 14px; }
.settings-project-guest-head p,.settings-project-guest-note { margin: 0; color: #777482; font-size: 11px; line-height: 1.45; }
.settings-project-guest-status { flex: none; padding: 5px 8px; border-radius: 12px; background: #f0eef5; color: #665f72; font-size: 10px; font-weight: 700; }
.settings-project-guest-status.active { background: #e2f5ed; color: #247b5c; }
.settings-project-guest-permission { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #5d5b68; font-size: 12px; }
.settings-project-guest-permission strong { padding: 7px 10px; border-radius: 8px; background: #f0eef5; color: #665f72; font-size: 11px; }
.settings-project-guest-link { display: grid; gap: 7px; }
.settings-project-guest-link label { font-size: 12px; font-weight: 700; color: #5d5b68; }
.settings-project-guest-link input { width: 100%; color: #504a59; font-size: 11px; }
.settings-project-guest-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-project-guest-actions button { min-height: 39px; }
.settings-notifications .push-notifications,.settings-watchdog-toggle { min-width: 92px; min-height: 39px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; line-height: normal; }
.settings-notifications .push-notifications.active,.settings-watchdog-toggle.active { border-color: #9ed3bd; background: #e8f5ef; color: #247759; }
.settings-notifications .push-notifications.unavailable { border-color: #e4d4ad; background: #fff8e8; color: #7b6223; }
.settings-task-defaults { display: grid; gap: 16px; }
.settings-default-target { display: grid; gap: 9px; }
.settings-default-target > strong { color: #777482; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.settings-watchdog { display: grid; gap: 16px; padding-bottom: 0; }
.settings-watchdog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-watchdog-toggle { position: relative; display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center; color: #4f4e5b; cursor: pointer; }
.settings-watchdog-toggle input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.settings-watchdog-toggle:focus-within { outline: 2px solid var(--purple); outline-offset: 2px; }
.settings-limit-control { gap: 7px; color: #595261; font-size: 12px; }
.settings-limit-control > span:first-child { font-weight: 700; }
.settings-limit-field { display: grid; grid-template-columns: minmax(90px, 1fr) auto; align-items: center; gap: 10px; }
.settings-limit-field input { width: 100%; }
.settings-limit-field > span { color: #777482; font-size: 12px; font-weight: 500; white-space: nowrap; }
.settings-limit-summary { min-height: 16px; color: #6f6681; font-size: 12px; font-weight: 600; }
.settings-watchdog.disabled .settings-watchdog-toggle:not(.active) { color: #88828d; }
.settings-modal .form-error { margin-block: 16px 0; }
.settings-project:not([hidden]) ~ .form-error:empty { display: none; }
@media(max-width:560px) {
  .settings-project-options { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .settings-project-guest-head { display: grid; }
  .settings-project-guest-status { justify-self: start; }
}
@media(max-width:420px) {
  .settings-modal form { padding: 20px 22px; }
  .settings-notifications,.settings-project,.settings-task-defaults,.settings-watchdog { padding-block: 14px; }
  .settings-project-appearance { gap: 12px; }
  .settings-task-defaults,.settings-watchdog { gap: 12px; }
  .settings-task-defaults .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .settings-watchdog { padding-bottom: 0; }
  .settings-watchdog-head { align-items: flex-start; gap: 12px; }
  .settings-limit-field { grid-template-columns: 1fr; gap: 6px; }
}
@media(max-height:720px) { .sidebar-footer { margin-top: 18px; } }
@media(max-width:680px) {
  .sidebar { width: min(238px,100vw); transition: transform .2s; }
  .sidebar-resizer { display: none; }
  .sidebar-close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: 10px; background: #f0eefb; color: #4f4568; font-size: 26px; font-weight: 400; line-height: 1; }
  .sidebar-close:hover { background: #e5e1f6; color: #352b50; }
  .sidebar-close:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
}
@media(max-width:560px) { .agent-detail-shell { padding: 22px; } .agent-detail-meta { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.settings-modal section[hidden] { display: none; }
.settings-modal .settings-project { border-top: 0; }