:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #19213d;
  background: #f7f8fb;
  font-synthesis: none;
  --navy: #11173f;
  --blue: #53a1de;
  --indigo: #566dbe;
  --purple: #583596;
  --line: #e4e7ef;
  --muted: #778098;
  --surface: #fff;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { background: #f7f8fb; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.login-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: #f8f9fc; }
.login-card { width: min(410px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 18px 55px rgba(17, 23, 63, .08); }
.login-card img { display: block; margin-bottom: 24px; }
.eyebrow, .section-label { margin: 0; color: var(--indigo); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.login-card h1 { margin: 8px 0 10px; color: var(--navy); font-size: 27px; letter-spacing: -.03em; }
.login-copy { margin: 0 0 28px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.login-card form { display: grid; gap: 10px; }
label { color: #424b67; font-size: 12px; font-weight: 700; }
input, select { width: 100%; height: 42px; border: 1px solid #d8dce7; border-radius: 8px; padding: 0 12px; outline: 0; color: #27304d; background: #fff; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(86, 109, 190, .1); }
.login-card small { display: block; margin-top: 18px; color: #969daf; font-size: 10px; line-height: 1.5; }
.form-error { min-height: 16px; margin: 0; color: #a34252; font-size: 11px; }

.primary-button, .secondary-button, .text-button, .icon-button { border: 0; border-radius: 7px; }
.primary-button { min-height: 40px; padding: 0 17px; color: #fff; background: var(--indigo); font-size: 12px; font-weight: 750; box-shadow: 0 5px 14px rgba(86, 109, 190, .18); }
.primary-button:hover { background: #485eae; }
.primary-button.compact { min-height: 36px; }
.secondary-button { min-height: 34px; padding: 0 13px; border: 1px solid #d7dcea; color: var(--indigo); background: #fff; font-size: 11px; font-weight: 700; }
.secondary-button:hover { border-color: #9aa8d2; background: #f8f9fd; }
.text-button { padding: 7px 0; color: var(--indigo); background: transparent; font-size: 11px; font-weight: 700; }
.icon-button { width: 30px; height: 30px; color: #7a8298; background: #f1f3f7; font-size: 19px; }

.app-shell { display: grid; grid-template-columns: 214px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 22px 15px 16px; border-right: 1px solid var(--line); background: #fff; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 26px; }
.brand img { width: 34px; height: 34px; }
.brand div { display: flex; flex-direction: column; }
.brand strong { color: var(--navy); font-size: 13px; letter-spacing: .17em; }
.brand span { margin-top: 2px; color: #8c94a8; font-size: 10px; }
nav { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; height: 41px; padding: 0 11px; border: 0; border-radius: 8px; color: #737c94; background: transparent; font-size: 12px; text-align: left; }
.nav-item span { display: grid; width: 18px; color: #9ba3b5; font-size: 16px; place-items: center; }
.nav-item:hover { color: var(--navy); background: #f6f7fa; }
.nav-item.active { color: var(--navy); background: #f0f3fa; font-weight: 750; box-shadow: inset 3px 0 var(--blue); }
.nav-item.active span { color: var(--indigo); }
.sidebar-foot { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 13px 7px 0; border-top: 1px solid #edf0f4; color: #9098ab; font-size: 9px; }
.sidebar-foot button { margin-left: auto; border: 0; color: #707a92; background: transparent; font-size: 10px; }
.secure-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #50a7dd; box-shadow: 0 0 0 3px #e5f3fb; }

.content { min-width: 0; padding: 29px clamp(24px, 4vw, 58px) 42px; }
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto 28px; }
.topbar h1 { margin: 6px 0 0; color: var(--navy); font-size: 24px; letter-spacing: -.025em; }
.server-state { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.server-state div { display: flex; flex-direction: column; gap: 2px; }
.server-state strong { color: #3a435f; font-size: 10px; }
.server-state small { color: #929aab; font-size: 8px; }
.notice { max-width: 1280px; margin: -13px auto 16px; padding: 10px 12px; border: 1px solid #d8deed; border-radius: 8px; color: #53617e; background: #f5f7fc; font-size: 11px; }
.notice.error { border-color: #eed2d8; color: #973d4d; background: #fff5f6; }
.view { display: none; max-width: 1280px; margin: auto; }
.view.active { display: block; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; margin-bottom: 16px; }
.license-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.metric, .panel { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 7px 22px rgba(17, 23, 63, .035); }
.metric { display: flex; min-height: 128px; flex-direction: column; padding: 19px; border-radius: 11px; }
.metric > span { color: #7d8599; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.metric > strong { margin: 14px 0 9px; color: var(--navy); font-size: 27px; letter-spacing: -.03em; }
.metric small { margin-top: auto; color: #99a0b0; font-size: 9px; }
.metric small b { color: var(--blue); }
.panel { border-radius: 12px; padding: 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.panel-heading h2 { margin: 5px 0 0; color: var(--navy); font-size: 16px; }
.table-wrap { overflow: auto; border: 1px solid #e8eaf0; border-radius: 8px; }
.table-wrap.tall { max-height: calc(100vh - 290px); }
table { width: 100%; border-collapse: collapse; color: #414a65; font-size: 10px; }
th { position: sticky; z-index: 1; top: 0; padding: 10px 11px; background: #f7f8fb; color: #81899d; font-size: 8px; text-align: left; text-transform: uppercase; letter-spacing: .07em; }
td { padding: 11px; border-top: 1px solid #eceef3; vertical-align: middle; }
tbody tr:hover { background: #fafbfe; }
.cell-main { display: block; max-width: 210px; overflow: hidden; color: #27304d; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { display: block; margin-top: 2px; color: #929aab; font-size: 8px; }
.badge { display: inline-block; padding: 3px 7px; border-radius: 10px; color: #5e6880; background: #f0f2f6; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.badge.ssh, .badge.completed { color: #4963aa; background: #edf1fb; }
.badge.telnet { color: #68419d; background: #f2edfa; }
.badge.active { color: #24745f; background: #eaf7f2; }
.badge.failed, .badge.interrupted { color: #9e4050; background: #fff0f2; }
.badge.console { color: #304aa8; background: #edf1ff; }
.badge.desktop { color: #68419d; background: #f2edfa; }
.badge.revoked, .badge.expired { color: #9e4050; background: #fff0f2; }
.empty-row td { height: 140px; color: #969dae; text-align: center; }
.filters { display: grid; grid-template-columns: minmax(220px, 1fr) 170px 170px auto; gap: 9px; margin-bottom: 13px; }
.filters input, .filters select { height: 36px; font-size: 10px; }

.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.device-card { padding: 17px; border: 1px solid #e5e8ef; border-radius: 10px; background: #fff; }
.device-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.device-icon { display: grid; width: 34px; height: 34px; border-radius: 9px; color: var(--indigo); background: #eef1fa; font-size: 16px; place-items: center; }
.device-card h3 { margin: 13px 0 3px; color: var(--navy); font-size: 13px; }
.device-card p { margin: 0; color: #8b93a6; font-size: 9px; }
.device-card .device-license { margin-top: 7px; color: #66718d; font-weight: 650; }
.device-meta { display: flex; justify-content: space-between; margin-top: 17px; padding-top: 12px; border-top: 1px solid #edf0f4; color: #9098aa; font-size: 8px; }
.device-card > .secondary-button { align-self: flex-start; margin-top: 12px; }
.device-admin-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #edf0f4; }
.device-admin-control div { display: flex; flex-direction: column; gap: 2px; }
.device-admin-control strong { color: #414b68; font-size: 10px; }
.device-admin-control small { color: #939bad; font-size: 8px; }
.device-revoke-button { margin-top: 12px; border: 0; padding: 6px 0; color: #a14452; background: transparent; font-size: 9px; font-weight: 700; }
.badge.administrator { color: #304aa8; background: #edf1ff; }
.badge.managed, .badge.group { color: #247760; background: #eaf8f3; }
.group-policy-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.group-policy-summary span { padding: 4px 7px; border-radius: 5px; color: #66708a; background: #f1f3f8; font-size: 8px; font-weight: 700; }

.group-management-panel { padding: 0; overflow: hidden; }
.group-management-panel > .panel-heading { margin: 0; padding: 20px; border-bottom: 1px solid var(--line); }
.group-workspace { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 590px; }
.group-list { padding: 12px; border-right: 1px solid var(--line); background: #fafbfc; }
.group-list-empty { padding: 24px 13px; color: #929aac; font-size: 10px; line-height: 1.6; text-align: center; }
.group-list-button { display: grid; width: 100%; gap: 6px; margin-bottom: 6px; padding: 13px; border: 1px solid transparent; border-radius: 8px; color: #707991; background: transparent; text-align: left; }
.group-list-button:hover { border-color: #e1e5ee; background: #fff; }
.group-list-button.active { border-color: #d6ddec; color: var(--navy); background: #fff; box-shadow: 0 4px 13px rgba(17, 23, 63, .05); }
.group-list-button strong { font-size: 11px; }
.group-list-button span { font-size: 8px; }
.group-detail { min-width: 0; padding: 23px 26px; }
.group-detail form { display: grid; gap: 15px; }
.group-detail-heading, .group-members-heading, .group-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.group-detail-heading h3 { margin: 5px 0 0; color: var(--navy); font-size: 18px; }
.group-identity-fields { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1.3fr); gap: 10px; }
.group-identity-fields > div { display: grid; gap: 7px; }
.group-policy-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.group-policy-options .check-option { padding: 10px; border: 1px solid #e3e7ef; border-radius: 8px; background: #fafbfc; }
.group-members-heading { padding-top: 17px; border-top: 1px solid #e8ebf1; }
.group-members-heading div { display: flex; flex-direction: column; gap: 3px; }
.group-members-heading strong { color: #37415e; font-size: 11px; }
.group-members-heading small, .group-members-heading > span { color: #929aac; font-size: 8px; }
.group-member-list { display: grid; max-height: 245px; overflow: auto; border: 1px solid #e3e6ee; border-radius: 8px; }
.group-member { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-bottom: 1px solid #eceef3; color: #46506c; font-size: 10px; }
.group-member:last-child { border-bottom: 0; }
.group-member input { width: 16px; height: 16px; margin: 0; }
.group-member div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.group-member strong { overflow: hidden; color: #303a57; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.group-member small { color: #939bad; font-size: 8px; }
.group-member em { color: #7f889e; font-size: 8px; font-style: normal; }
.group-detail-actions { padding-top: 4px; }
.compact-toggle { margin: 3px 0; border: 1px solid #e5e8ef; border-radius: 8px; padding: 12px; }

.policy-panel { max-width: 760px; }
.version-chip { padding: 5px 8px; border-radius: 12px; color: var(--indigo); background: #eef1fa; font-size: 9px; font-weight: 750; }
.policy-form { display: grid; gap: 0; }
.field { display: grid; max-width: 400px; gap: 7px; padding: 15px 0; }
.field small, .toggle-row small, .dialog-help { color: #8d95a8; font-size: 9px; line-height: 1.45; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 50px; }
.input-suffix span { position: absolute; top: 14px; right: 12px; color: #9098aa; font-size: 9px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid #edf0f4; }
.toggle-row div { display: flex; flex-direction: column; gap: 4px; }
.toggle-row strong { color: #35405d; font-size: 11px; }
.switch { position: relative; flex: 0 0 36px; height: 20px; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 12px; background: #d9dde7; transition: .18s; }
.switch span::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #aeb4c2; content: ''; transition: .18s; }
.switch input:checked + span { background: var(--indigo); }
.switch input:checked + span::after { transform: translateX(16px); }
.policy-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 18px; border-top: 1px solid #e7eaf0; }
.policy-actions > span { color: #939bac; font-size: 9px; }

.license-key-state { overflow: hidden; font-size: 18px !important; text-overflow: ellipsis; white-space: nowrap; }
.license-stage-note { margin: -4px 0 16px; padding: 10px 12px; border: 1px solid #e2e6f0; border-radius: 8px; color: #6e7892; background: #f8f9fc; font-size: 9px; line-height: 1.55; }
.license-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.license-form-grid > div { display: grid; gap: 7px; }
.license-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.license-actions .secondary-button { min-height: 29px; padding-inline: 9px; font-size: 9px; }
.license-revoke-button { min-height: 29px; border: 0; padding: 0 5px; color: #a14452; background: transparent; font-size: 9px; font-weight: 700; }
.certificate-dialog { width: min(680px, calc(100% - 32px)); }
.certificate-box { display: block; max-height: 230px; overflow: auto; }
.certificate-box code { display: block; line-height: 1.6; user-select: all; }
.activation-code-box { padding: 18px; text-align: center; }
.activation-code-box code { color: var(--navy); font-size: 13px; font-weight: 750; letter-spacing: .04em; user-select: all; }

dialog { width: min(440px, calc(100% - 32px)); border: 1px solid #dfe3ec; border-radius: 13px; padding: 22px; color: #28314d; background: #fff; box-shadow: 0 24px 70px rgba(17, 23, 63, .22); }
dialog::backdrop { background: rgba(17, 23, 63, .25); backdrop-filter: blur(2px); }
dialog form { display: grid; gap: 10px; }
dialog textarea { min-height: 72px; resize: vertical; }
.group-policy-grid { display: grid; grid-template-columns: 1fr 140px; gap: 10px; }
.group-policy-grid > div { display: grid; gap: 7px; }
.check-option { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: #46516d; font-size: 10px; }
.check-option input { width: auto; }
.danger-button { margin-right: auto; border: 0; color: #b44955; background: transparent; font-size: 9px; font-weight: 700; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 13px; }
.dialog-heading h2 { margin: 5px 0 0; color: var(--navy); font-size: 17px; }
.dialog-help { margin: 1px 0 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions .primary-button, .dialog-actions .secondary-button { min-width: 112px; }
.token-box { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #dfe3ec; border-radius: 8px; background: #f8f9fc; }
.token-box code { flex: 1; overflow-wrap: anywhere; color: #384363; font-size: 10px; }
.recording-open { min-height: 28px; padding-inline: 10px; }
.recording-dialog { width: min(980px, calc(100% - 32px)); height: min(720px, calc(100vh - 40px)); }
.recording-dialog[open] { display: flex; flex-direction: column; }
.recording-dialog .dialog-heading small { display: block; margin-top: 4px; color: #8b93a6; font-size: 9px; }
.recording-tabs { display: flex; gap: 4px; padding: 7px; border: 1px solid #e2e6ef; border-radius: 7px 7px 0 0; background: #f7f8fb; }
.recording-tabs button { padding: 6px 11px; border: 1px solid transparent; border-radius: 5px; color: #747e98; background: transparent; font-size: 10px; font-weight: 700; }
.recording-tabs button.active { border-color: #cbd3e6; color: var(--indigo); background: #fff; }
.central-command-list, .central-session-output { flex: 1; min-height: 0; margin: 0; overflow: auto; overscroll-behavior: contain; }
.central-command-list { border: 1px solid #e2e6ef; border-top: 0; background: #fafbfe; }
.central-command { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 11px 14px; border-bottom: 1px solid #e7eaf1; }
.central-command time { color: #939bad; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.central-command code { color: #202947; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.central-session-output { padding: 16px; border-radius: 0 0 7px 7px; color: #e7eaf6; background: #0b102f; font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.recording-empty { display: grid; min-height: 180px; color: #929aac; place-items: center; font-size: 10px; }

@media (max-width: 950px) {
  .metric-grid, .license-metrics { grid-template-columns: repeat(2, 1fr); }
  .device-grid { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .app-shell { grid-template-columns: 68px minmax(0, 1fr); }
  .sidebar { padding-inline: 9px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand div, .nav-item:not(.active)::after, .nav-item { font-size: 0; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item span { font-size: 17px; }
  .sidebar-foot > span:not(.secure-dot), .sidebar-foot button { display: none; }
  .sidebar-foot { justify-content: center; }
  .content { padding: 23px 14px 30px; }
  .server-state { display: none; }
  .metric-grid, .license-metrics, .device-grid { grid-template-columns: 1fr; }
  .group-workspace { grid-template-columns: 1fr; }
  .group-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .group-identity-fields, .group-policy-options { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .license-form-grid { grid-template-columns: 1fr; }
}