:root,
:root[data-theme="light"] {
  --brand: rgb(12, 93, 142);
  --brand-strong: rgb(8, 70, 108);
  --brand-soft: rgb(209, 230, 242);
  --bg: rgb(239, 247, 251);
  --bg-elevated: rgba(255, 255, 255, 0.88);
  --surface: rgb(255, 255, 255);
  --surface-soft: rgb(232, 243, 249);
  --text: rgb(19, 44, 61);
  --muted: rgb(82, 113, 132);
  --line: rgba(12, 93, 142, 0.16);
  --shadow: rgba(12, 93, 142, 0.12);
  --hero-glow: rgba(12, 93, 142, 0.20);
}

/* Hierarchical authorization center */
.authority-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.role-list-panel { position: sticky; top: 18px; }
.panel-card.authority-nav-panel { padding: 0; overflow: hidden; }
.authority-nav-panel .authority-nav-head { margin: 0; padding: 20px 20px 17px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 46%, transparent); }
.authority-nav-head h2 { margin-bottom: 3px; }
.authority-nav-head small { display: block; max-width: 230px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.authority-add-button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--brand) 48%, var(--line)); border-radius: 9px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); text-decoration: none; font-size: 19px; line-height: 1; transition: .18s ease; }
.authority-add-button:hover { color: white; border-color: var(--brand); background: var(--brand); transform: translateY(-1px); }
.role-catalog { display: grid; gap: 0; padding: 9px; }
.role-catalog-item { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 72px; padding: 12px 13px; border: 1px solid transparent; border-radius: 11px; color: var(--text); text-decoration: none; background: transparent; transition: .18s ease; }
.role-catalog-item + .role-catalog-item { margin-top: 2px; }
.role-catalog-item:hover { background: color-mix(in srgb, var(--surface-soft) 62%, transparent); }
.role-catalog-item.active { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); background: color-mix(in srgb, var(--brand) 11%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand); }
.role-level, .approval-step-number { display: grid; place-items: center; align-content: center; width: 48px; height: 48px; border-radius: 11px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); font-size: 12px; font-weight: 800; }
.role-level small { color: var(--muted); font-size: 7px; letter-spacing: .11em; line-height: 1; }
.role-level strong { margin-top: 4px; font-size: 16px; line-height: 1; }
.policy-priority { color: var(--text); background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface)); }
.authority-item-copy { display: grid; gap: 3px; min-width: 0; }
.authority-item-title { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.authority-item-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.authority-item-title em { padding: 3px 6px; border-radius: 5px; color: var(--muted); background: var(--surface-soft); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.authority-item-title em.is-active { color: #35b983; background: color-mix(in srgb, #35b983 12%, transparent); }
.authority-item-title em.is-passive { color: #d47c86; background: color-mix(in srgb, #d47c86 12%, transparent); }
.authority-item-copy > small { color: var(--muted); font-size: 10px; }
.authority-item-scope { overflow: hidden; color: var(--brand-strong); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.authority-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 48%, transparent); }
.field-block { display: grid; align-content: start; align-self: start; gap: 7px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.field-block small { font-size: 10px; font-weight: 500; opacity: .8; }
.toggle-stack { display: grid; gap: 10px; align-content: center; }
.switch-field { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.switch-field input { width: 17px; height: 17px; accent-color: var(--brand); }
.permission-section, .approval-flow-editor { margin-top: 20px; }
.permission-group { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-soft) 48%, transparent); }
.authority-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.permission-group h3 { margin: 0 0 12px; color: var(--brand-strong); font-size: 14px; }
.permission-option-list { display: grid; gap: 7px; }
.permission-item { display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; transition: .16s ease; }
.permission-item:hover { border-color: var(--line); background: var(--surface); }
.permission-item:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.permission-item input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--brand); }
.permission-item > span { display: grid; gap: 3px; min-width: 0; }
.permission-item strong { font-size: 12px; line-height: 1.3; }
.permission-item small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.scope-legend { color: var(--muted); font-size: 10px; }
.hierarchy-table select { min-width: 165px; }
.policy-rule-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.approval-flow-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.approval-step-add { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.approval-step-add > span { font-size: 17px; line-height: 1; }
.approval-step-editor { display: grid; grid-template-columns: 48px minmax(190px, 1.35fr) minmax(190px, 1fr) minmax(190px, 1fr) auto 34px; gap: 10px; align-items: end; padding: 14px 0; border-top: 1px solid var(--line); }
.approval-step-editor:first-of-type { border-top: 0; }
.step-required { align-self: center; padding-top: 18px; }
.approval-step-remove { display: grid; place-items: center; align-self: center; width: 32px; height: 32px; margin-top: 18px; border: 1px solid color-mix(in srgb, #dc5f6d 42%, var(--line)); border-radius: 9px; color: #dc5f6d; background: color-mix(in srgb, #dc5f6d 8%, transparent); font-size: 19px; line-height: 1; transition: .16s ease; }
.approval-step-remove:hover:not(:disabled) { color: white; border-color: #dc5f6d; background: #dc5f6d; }
.approval-step-remove:disabled { opacity: .28; cursor: not-allowed; }
.catalog-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.catalog-panel { overflow: hidden; padding: 0; }
.catalog-panel > .section-head { margin: 0; padding: 19px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 44%, transparent); }
.catalog-record-list { display: grid; max-height: 310px; overflow-y: auto; padding: 9px; border-bottom: 1px solid var(--line); }
.catalog-record { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px; border: 1px solid transparent; border-radius: 10px; color: var(--text); text-decoration: none; }
.catalog-record:hover, .catalog-record.active { border-color: var(--line); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.catalog-record.active { box-shadow: inset 3px 0 0 var(--brand); }
.catalog-record-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); font-size: 13px; font-weight: 800; }
.catalog-record-icon.product { text-transform: uppercase; }
.catalog-record > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.catalog-record strong, .catalog-record small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-record strong { font-size: 12px; }
.catalog-record small { color: var(--muted); font-size: 9px; }
.catalog-record em { padding: 4px 7px; border-radius: 6px; color: var(--muted); background: var(--surface-soft); font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.catalog-record em.is-active { color: #31b982; background: color-mix(in srgb, #31b982 12%, transparent); }
.catalog-form { padding: 20px; }
.catalog-wide-toggle { grid-column: 1 / -1; padding: 9px 0; }
.catalog-section-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 14px 0; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
.catalog-section-tabs a { display: grid; gap: 2px; padding: 11px 14px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); text-decoration: none; transition: .18s ease; }
.catalog-section-tabs a:hover { color: var(--text); background: color-mix(in srgb, var(--surface-soft) 66%, transparent); }
.catalog-section-tabs a.active { color: var(--text); border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand); }
.catalog-section-tabs span { font-size: 12px; font-weight: 800; }
.catalog-section-tabs small { color: var(--muted); font-size: 9px; }
.catalog-filter-panel { margin-bottom: 14px; padding: 14px 16px; }
.catalog-filter-form { display: grid; grid-template-columns: minmax(280px, 1fr) 210px auto auto; gap: 10px; align-items: end; }
.catalog-filter-form .btn { min-height: 39px; }
.catalog-workspace { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.catalog-list-panel, .catalog-editor-panel { overflow: hidden; padding: 0; }
.catalog-list-panel > .section-head { margin: 0; padding: 18px 19px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 44%, transparent); }
.catalog-record-list-tall { max-height: 610px; border-bottom: 0; }
.catalog-form-roomy { padding: 20px; }
.catalog-form-roomy > .section-head { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.catalog-form-roomy > .section-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.catalog-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-field-wide { grid-column: 1 / -1; }
.catalog-form-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.catalog-product-stack { display: grid; gap: 16px; min-width: 0; }
.catalog-empty { display: grid; gap: 5px; padding: 34px 18px; color: var(--muted); text-align: center; }
.catalog-empty strong { color: var(--text); font-size: 12px; }
.catalog-empty small { font-size: 9px; }
.catalog-level-list { display: grid; gap: 8px; }
.authority-level-row { grid-template-columns: 96px minmax(180px, 1fr) auto auto auto; border-color: var(--line); background: color-mix(in srgb, var(--surface-soft) 38%, transparent); }
.authority-level-number { min-width: 0; }
.catalog-new-level { margin-top: 14px; }
.catalog-new-level .btn { align-self: end; justify-self: start; }
.catalog-table-panel { overflow: hidden; padding: 0; }
.catalog-table-title { margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 44%, transparent); }
.catalog-new-button { display: inline-flex; align-items: center; gap: 8px; }
.catalog-new-button > span { font-size: 18px; font-weight: 400; line-height: 1; }
.catalog-table { padding: 0 18px 14px; }
.catalog-table-head, .catalog-table-row { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(170px, .8fr) minmax(220px, 1fr) 110px minmax(130px, auto); gap: 16px; align-items: center; }
.catalog-product-table .catalog-table-head, .catalog-product-table .catalog-table-row { grid-template-columns: minmax(260px, 1.25fr) minmax(130px, .55fr) minmax(190px, .8fr) 110px minmax(210px, auto); }
.catalog-table-head { min-height: 42px; padding: 0 14px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.catalog-table-body { display: grid; gap: 7px; }
.catalog-table-row { min-height: 66px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: color-mix(in srgb, var(--surface-soft) 34%, transparent); text-decoration: none; transition: .16s ease; }
.catalog-table-row:hover, .catalog-table-row.active { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.catalog-table-row.active { box-shadow: inset 3px 0 0 var(--brand); }
.catalog-table-row > span:not(.catalog-primary-cell):not(.catalog-row-actions) { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-table-row > em { justify-self: start; padding: 5px 8px; border-radius: 6px; color: var(--muted); background: var(--surface-soft); font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.catalog-table-row > em.is-active { color: #31b982; background: color-mix(in srgb, #31b982 12%, transparent); }
.catalog-table-row > em.is-passive { color: #d47c86; background: color-mix(in srgb, #d47c86 12%, transparent); }
.catalog-primary-cell { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); text-decoration: none; }
.catalog-primary-cell > span { display: grid; gap: 3px; min-width: 0; }
.catalog-primary-cell strong, .catalog-primary-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-primary-cell strong { font-size: 12px; }
.catalog-primary-cell small { color: var(--muted); font-size: 9px; }
.catalog-primary-cell .catalog-record-icon { flex: 0 0 38px; font-style: normal; }
.catalog-edit-action, .catalog-row-actions a { color: var(--brand-strong); font-size: 10px; font-weight: 800; text-decoration: none; }
.catalog-edit-action { justify-self: end; }
.catalog-row-actions { display: flex; justify-content: flex-end; gap: 12px; }
.catalog-row-actions a:hover { text-decoration: underline; }
.catalog-level-panel { margin-top: 16px; }
.catalog-modal .modal-content { overflow: hidden; color: var(--text); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 26px 80px color-mix(in srgb, var(--shadow) 72%, rgba(0,0,0,.34)); }
.catalog-modal .catalog-form { padding: 0; }
.catalog-modal .modal-header { align-items: flex-start; padding: 20px 22px 16px; border-color: var(--line); background: color-mix(in srgb, var(--surface-soft) 44%, transparent); }
.catalog-modal .modal-header h2 { margin: 2px 0 0; font-size: 19px; }
.catalog-modal .modal-header small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.catalog-modal .modal-body { padding: 20px 22px; }
.catalog-modal .modal-footer { padding: 14px 22px; border-color: var(--line); }
.catalog-modal .btn-close { opacity: .72; }
:root[data-theme="dark"] .catalog-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.lifecycle-context-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 16px 19px; border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.lifecycle-context-banner h2 { margin: 2px 0 3px; font-size: 17px; }
.lifecycle-context-banner span { color: var(--muted); font-size: 10px; }
.lifecycle-context-banner a { color: var(--brand-strong); font-size: 11px; font-weight: 700; }
.lifecycle-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 16px; align-items: start; }
.lifecycle-timeline { display: grid; gap: 0; }
.lifecycle-event { display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: 12px; padding: 13px 4px; border-top: 1px solid var(--line); }
.lifecycle-event:first-child { border-top: 0; }
.lifecycle-event > i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.lifecycle-event > div { display: grid; gap: 4px; }
.lifecycle-event strong { font-size: 12px; }
.lifecycle-event span, .lifecycle-event small { color: var(--muted); font-size: 9px; }
.lifecycle-event p { margin: 2px 0 0; color: var(--text); font-size: 10px; }
.lifecycle-event a { justify-self: start; color: var(--brand-strong); font-size: 9px; }
.empty-inline { padding: 22px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; font-size: 11px; }
.offline-warning { margin-bottom: 14px; padding: 13px; border: 1px solid color-mix(in srgb, #e3a63b 42%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #e3a63b 9%, transparent); }
.offline-warning strong { font-size: 11px; }
.offline-warning p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.lifecycle-action-form { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--surface-soft) 42%, transparent); }
.lifecycle-action-form + .lifecycle-action-form { margin-top: 12px; }
.lifecycle-action-form h3 { margin: 0; font-size: 13px; }
.lifecycle-action-form > p { margin: -5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.lifecycle-action-form .btn { justify-self: start; }
.portal-alert { margin-bottom: 16px; border-radius: 12px; }
.request-approval-flow { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.request-flow-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--muted); font-size: 10px; }
.request-flow-head strong { color: var(--brand-strong); }
.request-flow-steps { display: flex; flex-wrap: wrap; gap: 9px; }
.request-flow-step { display: flex; align-items: center; gap: 8px; min-width: 160px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface-soft) 56%, transparent); }
.request-flow-step i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.request-flow-step span { display: grid; gap: 2px; }
.request-flow-step strong { font-size: 10px; }
.request-flow-step small { color: var(--muted); font-size: 9px; }
.request-flow-step.status-approved i { background: #37c98b; }
.request-flow-step.status-pending { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.request-flow-step.status-pending i { background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.request-flow-step.status-rejected i { background: #ef6572; }
.access-denied-card { max-width: 620px; margin: 12vh auto 0; padding: 42px; text-align: center; }
.access-denied-card h1 { margin: 8px 0 10px; font-size: 25px; }
.access-denied-card > p:not(.section-kicker) { max-width: 480px; margin: 0 auto; color: var(--muted); }
.access-denied-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: 15px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.access-denied-icon .app-icon { width: 25px; height: 25px; }
.panel-card.organization-panel { padding: 0; overflow: hidden; }
.organization-panel .organization-section-head { margin: 0; padding: 21px 23px; background: color-mix(in srgb, var(--surface-soft) 48%, transparent); }
.organization-section-head > div > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.hierarchy-legend { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.hierarchy-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.user-access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 14px; padding: 18px; }
.user-access-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 44%, var(--surface)); transition: border-color .18s ease, box-shadow .18s ease; }
.user-access-card:hover { border-color: color-mix(in srgb, var(--brand) 36%, var(--line)); box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 70%, transparent); }
.user-access-card.is-disabled { opacity: .72; }
.user-access-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 17px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.user-access-avatar { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: 13px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 11%, var(--surface)); font-size: 14px; font-weight: 800; }
.user-access-identity { display: grid; gap: 4px; min-width: 0; }
.user-access-identity strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.user-access-identity small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-level-badge { display: grid; place-items: center; min-width: 54px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.user-level-badge small { color: var(--muted); font-size: 6px; letter-spacing: .12em; }
.user-level-badge strong { margin-top: 2px; color: var(--brand-strong); font-size: 16px; }
.user-role-summary { display: grid; grid-template-columns: minmax(0, 1fr) 5px minmax(0, 1.3fr) auto; gap: 11px; align-items: center; padding: 11px 17px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 5%, transparent); }
.user-role-summary > span:not(.user-source-badge) { display: grid; gap: 2px; min-width: 0; }
.user-role-summary small { color: var(--muted); font-size: 6px; letter-spacing: .1em; }
.user-role-summary strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-role-summary > i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.user-source-badge { padding: 4px 6px; border-radius: 5px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); font-size: 7px; font-weight: 800; }
.user-access-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 17px; }
.user-access-fields .field-block:last-child { grid-column: 1 / -1; }
.user-access-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 17px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 72%, transparent); }
.user-active-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.user-active-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.user-toggle-track { position: relative; width: 34px; height: 19px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 35%, var(--surface)); transition: .18s ease; }
.user-toggle-track i { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; transition: .18s ease; }
.user-active-toggle > input:checked + .user-toggle-track { background: var(--brand); }
.user-active-toggle > input:checked + .user-toggle-track i { transform: translateX(15px); }
.user-active-toggle > span:last-child { display: grid; gap: 2px; }
.user-active-toggle strong { font-size: 10px; }
.user-active-toggle small { color: var(--muted); font-size: 8px; }

@media (max-width: 900px) {
  .user-access-grid { grid-template-columns: 1fr; }
  .user-access-fields { grid-template-columns: 1fr; }
  .user-access-fields .field-block:last-child { grid-column: auto; }
}

@media (max-width: 620px) {
  .user-access-grid { padding: 10px; }
  .user-access-footer { align-items: stretch; flex-direction: column; }
  .user-access-footer .btn { width: 100%; }
}

/* Full-width organization rows */
.organization-panel .user-access-grid { grid-template-columns: 1fr; gap: 11px; padding: 16px 18px 18px; }
.organization-panel .user-access-card { display: grid; grid-template-columns: 260px minmax(0, 1fr) 190px; min-height: 176px; }
.organization-panel .user-access-head { grid-template-columns: 48px minmax(0, 1fr) 54px; align-content: center; padding: 18px; border-right: 1px solid var(--line); border-bottom: 0; }
.organization-panel .user-access-identity { align-content: center; }
.organization-panel .user-current-role { justify-self: start; margin-top: 3px; padding: 3px 7px; border-radius: 5px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); font-size: 8px; font-weight: 800; }
.organization-panel .user-access-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; padding: 18px; }
.organization-panel .user-access-fields .field-block:last-child { grid-column: auto; }
.organization-panel .user-access-footer { align-items: stretch; justify-content: center; flex-direction: column; padding: 18px; border-top: 0; border-left: 1px solid var(--line); }
.organization-panel .user-active-toggle { align-items: flex-start; padding: 10px 0; }
.organization-panel .user-access-footer .btn { width: 100%; }

@media (max-width: 1350px) {
  .organization-panel .user-access-card { grid-template-columns: 240px minmax(0, 1fr); }
  .organization-panel .user-access-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organization-panel .user-access-fields .field-block:last-child { grid-column: 1 / -1; }
  .organization-panel .user-access-footer { grid-column: 1 / -1; align-items: center; justify-content: space-between; flex-direction: row; border-top: 1px solid var(--line); border-left: 0; }
  .organization-panel .user-access-footer .btn { width: auto; }
}

@media (max-width: 850px) {
  .organization-panel .user-access-card { grid-template-columns: 1fr; }
  .organization-panel .user-access-head { border-right: 0; border-bottom: 1px solid var(--line); }
  .organization-panel .user-access-fields { grid-template-columns: 1fr; }
  .organization-panel .user-access-fields .field-block:last-child { grid-column: auto; }
}

@media (max-width: 1200px) {
  .approval-step-editor { grid-template-columns: 48px repeat(2, minmax(0, 1fr)) 34px; }
  .approval-step-number { grid-row: 1 / span 3; }
  .approval-step-remove { grid-column: 4; grid-row: 1; }
  .policy-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .authority-layout { grid-template-columns: 1fr; }
  .role-list-panel { position: static; }
  .authority-form-grid, .policy-rule-grid { grid-template-columns: 1fr; }
  .authority-permission-grid { grid-template-columns: 1fr; }
  .approval-step-editor { grid-template-columns: 42px 1fr; }
  .approval-step-number { grid-row: auto; }
  .approval-step-remove { grid-column: 1; grid-row: auto; margin-top: 0; }
  .approval-flow-editor > .section-head { align-items: flex-start; flex-direction: column; }
  .approval-flow-actions { width: 100%; justify-content: space-between; }
  .catalog-layout, .catalog-workspace, .lifecycle-grid { grid-template-columns: 1fr; }
  .catalog-filter-form { grid-template-columns: 1fr 190px; }
  .catalog-filter-form .btn { width: 100%; }
  .lifecycle-context-banner { align-items: flex-start; flex-direction: column; }
  .catalog-table { padding: 10px; }
  .catalog-table-head { display: none; }
  .catalog-table-row, .catalog-product-table .catalog-table-row { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .catalog-primary-cell { grid-column: 1 / -1; }
  .catalog-table-row > span[data-label] { display: grid; grid-template-columns: 115px minmax(0, 1fr); grid-column: 1 / -1; gap: 8px; white-space: normal; }
  .catalog-table-row > span[data-label]::before { content: attr(data-label); color: var(--text); font-size: 9px; font-weight: 800; text-transform: uppercase; }
  .catalog-edit-action, .catalog-row-actions { justify-self: end; }
}

@media (max-width: 560px) {
  .catalog-section-tabs, .catalog-filter-form, .catalog-editor-grid { grid-template-columns: 1fr; }
  .catalog-field-wide { grid-column: auto; }
  .authority-level-row { grid-template-columns: 1fr; }
  .catalog-form-actions .btn { width: 100%; }
  .catalog-table-title { align-items: flex-start; gap: 12px; }
  .catalog-new-button { width: 100%; justify-content: center; }
  .catalog-row-actions { grid-column: 1 / -1; justify-self: start; }
}

:root[data-theme="dark"] {
  --brand: rgb(70, 162, 218);
  --brand-strong: rgb(120, 198, 243);
  --brand-soft: rgb(22, 59, 83);
  --bg: rgb(9, 21, 31);
  --bg-elevated: rgba(15, 31, 44, 0.86);
  --surface: rgb(18, 39, 55);
  --surface-soft: rgb(24, 52, 73);
  --text: rgb(232, 243, 250);
  --muted: rgb(162, 188, 206);
  --line: rgba(96, 171, 218, 0.22);
  --shadow: rgba(0, 0, 0, 0.34);
  --hero-glow: rgba(12, 93, 142, 0.28);
}

html {
  font-size: 15px;
}

body {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at top left, var(--hero-glow), transparent 26%),
    radial-gradient(circle at bottom right, rgba(12, 93, 142, 0.14), transparent 18%),
    linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 75%, var(--surface) 25%) 100%);
  transition: background .25s ease, color .25s ease;
}

.topbar {
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  background: var(--bg-elevated);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.brandmark {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--brand-strong);
  text-decoration: none;
}

.topnav {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.topnav a,
.topnav .btn-link {
  color: var(--text);
  text-decoration: none;
}

.stats-grid,
.dashboard-grid,
.auth-shell {
  margin-top: 1rem;
}

.page-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface-soft) 52%, var(--surface) 48%));
  box-shadow: 0 14px 28px rgba(12, 93, 142, 0.10);
}

.page-header-copy {
  min-width: 0;
  max-width: 74ch;
  justify-self: stretch;
}

.page-header-kicker,
.section-kicker {
  margin: 0 0 .45rem;
  text-transform: uppercase;
  letter-spacing: .16rem;
  font-size: .66rem;
  font-weight: 700;
  color: var(--brand);
}

.page-header-copy h1 {
  max-width: 28ch;
  margin: 0;
  font-size: clamp(1.6rem, 2vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.page-header-text {
  max-width: 64ch;
  color: var(--muted);
  margin: .6rem 0 0;
  font-size: .95rem;
  line-height: 1.6;
}

.page-header-side {
  min-width: 0;
  width: auto;
  justify-self: end;
}

.page-header-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .65rem;
}

.page-stat {
  min-width: 132px;
  padding: .82rem .95rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, white 12%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.page-stat span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.page-stat strong {
  display: block;
  margin-top: .35rem;
  font-size: 1.22rem;
  line-height: 1.1;
}

.page-header-actions {
  display: flex;
  align-items: center;
}

.license-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 1.1rem;
  margin-top: 1.1rem;
}

.license-column {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.license-column-narrow {
  position: sticky;
  top: 1rem;
  height: fit-content;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18rem;
  font-size: .75rem;
  color: var(--brand);
}

.stats-grid,
.dashboard-grid {
  display: grid;
  gap: 1rem;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stats-grid article,
.panel-card,
.auth-card,
.org-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  box-shadow: 0 18px 45px var(--shadow);
}

.stats-grid article {
  padding: 1rem 1.2rem;
}

.stats-grid span {
  display: block;
  color: var(--muted);
}

.stats-grid strong {
  display: block;
  margin-top: .35rem;
  font-size: 2rem;
}

.dashboard-grid {
  grid-template-columns: 1.1fr .9fr;
}

.panel-card,
.auth-card {
  padding: 1.4rem;
}

.panel-card-strong {
  border-radius: 24px;
  box-shadow: 0 24px 54px var(--shadow);
}

.mono {
  font-family: Consolas, monospace;
}

.auth-shell {
  min-height: 75vh;
  display: grid;
  place-items: center;
}

.auth-card {
  width: min(520px, 100%);
}

.org-node {
  margin-top: 1rem;
}

.org-card {
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
}

.org-children {
  margin-left: 1.4rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

.dashboard-license-list {
  display: grid;
  gap: .85rem;
}

.dashboard-license-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface-soft) 74%, var(--surface) 26%));
  box-shadow: 0 14px 28px rgba(12, 93, 142, 0.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-license-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  box-shadow: 0 18px 34px rgba(12, 93, 142, 0.12);
}

.dashboard-license-main,
.dashboard-license-meta {
  display: grid;
  gap: .75rem;
}

.dashboard-license-main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}

.dashboard-license-primary strong,
.dashboard-license-machine strong,
.dashboard-license-meta strong {
  display: block;
  color: var(--text);
}

.dashboard-license-primary span,
.dashboard-license-machine span,
.dashboard-license-meta span {
  color: var(--muted);
}

.dashboard-license-primary strong,
.dashboard-license-machine strong {
  font-size: 1rem;
  line-height: 1.2;
}

.dashboard-license-primary span,
.dashboard-license-machine span {
  display: block;
  margin-top: .28rem;
}

.dashboard-license-machine .mono {
  margin-top: .3rem;
  display: inline-block;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: rgba(12, 93, 142, 0.10);
  color: var(--brand-strong);
  width: fit-content;
}

.dashboard-license-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.dashboard-license-meta div {
  min-width: 0;
  padding: .15rem 0;
}

.dashboard-license-meta span {
  display: block;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.dashboard-license-meta strong {
  margin-top: .28rem;
  font-size: .92rem;
  word-break: break-word;
}

.detail-list {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: .5rem 1rem;
}

.detail-list-wide {
  grid-template-columns: 110px minmax(0, 1fr);
}

.section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-head h2 {
  margin: 0;
}

.section-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--brand-strong);
  background: color-mix(in srgb, var(--brand-soft) 65%, var(--surface) 35%);
  font-size: .78rem;
  font-weight: 700;
}

.upload-panel,
.detail-panel,
.action-panel,
.license-result-panel,
.empty-state-panel {
  overflow: hidden;
}

.message-panel {
  border-radius: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-bottom: 1.2rem;
}

.info-card {
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 84%, white 16%);
}

.info-card span,
.hardware-section h3 {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
  font-size: .82rem;
}

.info-card strong {
  display: block;
  font-size: 1.05rem;
}

.info-card small {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
}

.hardware-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hardware-section {
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 80%, var(--surface) 20%);
}

.signature-stack {
  display: grid;
  gap: .75rem;
}

.signature-item {
  display: grid;
  gap: .4rem;
  padding: .9rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white 6%), color-mix(in srgb, var(--surface-soft) 72%, var(--surface) 28%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.signature-item span {
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.signature-item strong {
  font-size: .95rem;
  line-height: 1.45;
  word-break: break-all;
}

.comparison-block {
  margin: 1.5rem 0;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-soft) 70%, var(--surface) 30%));
  box-shadow: 0 20px 40px var(--shadow);
}

.comparison-header {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.comparison-kicker {
  margin: 0 0 .35rem;
  text-transform: uppercase;
  letter-spacing: .18rem;
  font-size: .74rem;
  color: var(--brand);
}

.comparison-meta {
  color: var(--muted);
  margin-bottom: 0;
}

.comparison-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.comparison-summary-card {
  padding: .95rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, white 14%);
}

.comparison-summary-card span {
  display: block;
  font-size: .78rem;
  color: var(--muted);
}

.comparison-summary-card strong {
  display: block;
  margin-top: .35rem;
  font-size: 1.55rem;
  line-height: 1;
}

.comparison-summary-card-danger {
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.12), rgba(180, 35, 24, 0.05));
}

.comparison-summary-card-warning {
  background: linear-gradient(180deg, rgba(180, 120, 24, 0.12), rgba(180, 120, 24, 0.05));
}

.comparison-summary-card-safe {
  background: linear-gradient(180deg, rgba(2, 122, 72, 0.12), rgba(2, 122, 72, 0.05));
}

.comparison-canvas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin-bottom: 1rem;
}

.comparison-lane {
  position: relative;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
}

.comparison-lane::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), transparent 58%);
}

.comparison-lane-current {
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-soft) 62%, var(--surface) 38%), color-mix(in srgb, var(--surface) 84%, white 16%));
}

.comparison-lane-previous {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-soft) 90%, var(--surface) 10%), color-mix(in srgb, var(--surface) 92%, white 8%));
}

.comparison-lane-head {
  position: relative;
  display: grid;
  gap: .35rem;
  z-index: 1;
}

.comparison-lane-kicker {
  text-transform: uppercase;
  letter-spacing: .16rem;
  font-size: .68rem;
  color: var(--muted);
}

.comparison-lane-head strong {
  font-size: 1.08rem;
  line-height: 1.15;
}

.comparison-records {
  display: grid;
  gap: .85rem;
}

.comparison-record {
  position: relative;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface-soft) 78%, var(--surface) 22%));
  box-shadow: 0 16px 30px rgba(12, 93, 142, 0.08);
}

.comparison-record::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 20px 0 0 20px;
  background: rgba(2, 122, 72, 0.45);
}

.comparison-record-changed::before {
  background: rgba(180, 35, 24, 0.58);
}

.comparison-record-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  margin-bottom: .8rem;
}

.comparison-record-label {
  display: inline-block;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.comparison-record-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .45rem;
}

.comparison-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.comparison-cell {
  display: grid;
  gap: .45rem;
  padding: .9rem 1rem;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), color-mix(in srgb, var(--surface-soft) 72%, var(--surface) 28%));
}

.comparison-cell span {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.comparison-cell strong {
  min-width: 0;
  font-size: .93rem;
  line-height: 1.45;
  word-break: break-all;
}

.fleet-panel {
  display: grid;
  gap: 1rem;
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem;
}

.fleet-card {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface-soft) 76%, var(--surface) 24%));
  box-shadow: 0 16px 28px rgba(12, 93, 142, 0.08);
}

.fleet-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .8rem;
}

.fleet-card-head strong {
  display: block;
  font-size: 1rem;
}

.fleet-card-head span.mono {
  display: block;
  margin-top: .3rem;
  color: var(--muted);
}

.fleet-list {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: .5rem .8rem;
  margin: 0;
}

.fleet-list dt {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fleet-list dd {
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.monitor-shell {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.monitor-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.monitor-inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.monitor-license-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.monitor-license-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: transparent;
}

.monitor-license-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 46%, var(--line));
}

.monitor-license-card.is-selected,
.monitor-license-card:has(.monitor-card-selector input:checked) {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  background: color-mix(in srgb, var(--brand-soft) 28%, var(--surface-soft));
}

.monitor-license-card.is-selected::before,
.monitor-license-card:has(.monitor-card-selector input:checked)::before {
  background: var(--brand);
}

.monitor-license-card-head {
  display: grid;
  grid-template-columns: 28px 42px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: 1rem 1rem .9rem;
  border-bottom: 1px solid var(--line);
}

.monitor-card-selector {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  place-items: center;
}

.monitor-card-selector input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.monitor-card-check {
  display: grid;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  place-items: center;
}

.monitor-card-selector input:checked + .monitor-card-check {
  border-color: var(--brand);
  background: var(--brand);
}

.monitor-card-selector input:checked + .monitor-card-check::after {
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  content: "";
  transform: translateY(-1px) rotate(45deg);
}

.monitor-card-selector input:focus-visible + .monitor-card-check {
  outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
  outline-offset: 2px;
}

.monitor-customer-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line));
  border-radius: 11px;
  color: var(--brand-strong);
  background: color-mix(in srgb, var(--brand-soft) 54%, var(--surface));
  font-size: .8rem;
  font-weight: 800;
  place-items: center;
}

.monitor-license-identity {
  display: grid;
  min-width: 0;
  gap: .08rem;
}

.monitor-license-customer {
  overflow: hidden;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-license-identity strong {
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-license-identity small {
  color: var(--brand-strong);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
}

.monitor-license-head-actions {
  display: grid;
  justify-items: end;
  gap: .45rem;
}

.monitor-status-badge {
  padding: .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: .65rem;
  font-weight: 800;
  white-space: nowrap;
}

.monitor-status-badge.is-active { border-color: rgba(45, 178, 125, .32); color: #19865d; background: rgba(45, 178, 125, .1); }
.monitor-status-badge.is-expired,
.monitor-status-badge.is-cancelled { border-color: rgba(220, 84, 84, .3); color: #bd4545; background: rgba(220, 84, 84, .1); }
.monitor-status-badge.is-replaced,
.monitor-status-badge.is-released { border-color: rgba(216, 155, 47, .32); color: #9c6b16; background: rgba(216, 155, 47, .1); }

.monitor-detail-link {
  color: var(--brand-strong);
  font-size: .7rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.monitor-detail-link:hover { color: var(--brand); }
.monitor-detail-link span { margin-left: .2rem; }

.monitor-license-card-body {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(235px, 1.35fr);
  gap: .85rem;
  padding: .9rem 1rem;
}

.monitor-machine-block,
.monitor-commercial-block {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.monitor-machine-block {
  display: grid;
  align-content: start;
  gap: .15rem;
  padding: .8rem;
}

.monitor-card-label,
.monitor-license-metrics article > span,
.monitor-commercial-block div > span,
.monitor-license-card-foot span {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.monitor-machine-block strong {
  margin-top: .2rem;
  color: var(--text);
  font-size: .93rem;
}

.monitor-machine-block small { color: var(--muted); }

.monitor-machine-block code {
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  margin-top: .55rem;
  padding: .3rem .45rem;
  border-radius: 5px;
  color: var(--brand-strong);
  background: color-mix(in srgb, var(--brand-soft) 50%, transparent);
  font-size: .67rem;
  text-overflow: ellipsis;
}

.monitor-license-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.monitor-license-metrics article {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 74px;
  padding: .72rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.monitor-license-metrics strong {
  overflow: hidden;
  margin-top: .28rem;
  color: var(--text);
  font-size: .92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-license-metrics strong small { color: var(--muted); font-weight: 600; }
.monitor-license-metrics article > small { overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }

.monitor-commercial-block {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(105px, .35fr) minmax(0, 1.65fr);
}

.monitor-commercial-block > div {
  display: grid;
  min-width: 0;
  gap: .15rem;
  padding: .68rem .8rem;
}

.monitor-commercial-block > div + div { border-left: 1px solid var(--line); }
.monitor-commercial-block strong { overflow: hidden; color: var(--text); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.monitor-commercial-block small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }

.monitor-license-card-foot {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .8rem;
  align-items: center;
  padding: .75rem 1rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 48%, transparent);
}

.monitor-license-card-foot > div { display: grid; min-width: 0; gap: .08rem; }
.monitor-license-card-foot strong { overflow: hidden; color: var(--text); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.monitor-license-date { text-align: right; }

.monitor-table-wrap,
.monitor-compare-wrap {
  overflow-x: auto;
}

.monitor-table,
.monitor-compare-table {
  min-width: 980px;
  margin-bottom: 0;
}

.monitor-table {
  border-collapse: separate;
  border-spacing: 0 .55rem;
}

.monitor-table thead th,
.monitor-compare-table thead th {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  color: var(--brand-strong);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .95rem .85rem;
}

.monitor-compare-table {
  border-collapse: separate;
  border-spacing: 0 .7rem;
}

.monitor-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.monitor-compare-table thead th:first-child {
  left: 0;
  z-index: 3;
}

.monitor-table tbody td,
.monitor-compare-table tbody td {
  vertical-align: top;
}

.monitor-table tbody tr td {
  padding: .95rem .85rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, white 3%), color-mix(in srgb, var(--surface-soft) 74%, var(--surface) 26%));
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid var(--line);
}

.monitor-table tbody tr td:first-child {
  border-left: 1px solid var(--line);
  border-radius: 16px 0 0 16px;
  width: 52px;
  text-align: center;
}

.monitor-table tbody tr td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 16px 16px 0;
}

.monitor-table tbody tr:not(.monitor-row-selected):hover td {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 28%, var(--surface) 72%), color-mix(in srgb, var(--surface-soft) 68%, var(--surface) 32%));
}

.monitor-row-selected td {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 72%, var(--surface) 28%), color-mix(in srgb, var(--brand-soft) 52%, var(--surface) 48%)) !important;
  border-top-color: rgba(12, 93, 142, 0.34);
  border-bottom-color: rgba(12, 93, 142, 0.34);
}

.monitor-row-selected td:first-child {
  border-left-color: rgba(12, 93, 142, 0.34);
}

.monitor-row-selected td:last-child {
  border-right-color: rgba(12, 93, 142, 0.34);
}

.monitor-cell-main strong {
  display: block;
  margin-bottom: .2rem;
  font-size: .95rem;
  color: var(--text);
}

.monitor-cell-sub {
  color: var(--muted);
  line-height: 1.4;
}

.monitor-cell-code {
  display: inline-block;
  margin-top: .45rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: rgba(12, 93, 142, 0.10);
  color: var(--brand-strong);
  font-size: .8rem;
}

.monitor-cell-plain,
.monitor-cell-numeric {
  white-space: nowrap;
  font-weight: 600;
}

.monitor-cell-numeric {
  text-align: center;
}

.compare-selection-panel .comparison-canvas {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.monitor-compare-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitor-compare-headcard {
  display: grid;
  gap: .25rem;
  padding: .2rem 0;
}

.monitor-compare-headcard span {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.monitor-compare-headcard strong {
  font-size: .98rem;
  color: var(--text);
}

.monitor-compare-headcard small {
  color: var(--brand-strong);
  font-size: .78rem;
}

.monitor-compare-label {
  position: sticky;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 156px;
  max-width: 156px;
  font-weight: 800;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  padding: 1rem .9rem !important;
  color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%), color-mix(in srgb, var(--surface) 94%, white 6%));
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 16px 0 0 16px;
  box-shadow: 8px 0 18px rgba(12, 93, 142, 0.06);
  overflow: hidden;
}

.monitor-compare-table tbody td {
  padding: 0;
  border: 0;
}

.monitor-compare-table tbody tr td:last-child .monitor-compare-value {
  border-radius: 0 16px 16px 0;
}

.monitor-compare-value {
  min-width: 180px;
  min-height: 100%;
  padding: 1rem .95rem;
  line-height: 1.45;
  word-break: break-word;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, white 3%), color-mix(in srgb, var(--surface-soft) 74%, var(--surface) 26%));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.monitor-compare-diff td {
  background: transparent;
}

.monitor-compare-same td {
  background: transparent;
}

.monitor-compare-diff .monitor-compare-label {
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.12), rgba(180, 35, 24, 0.05));
}

.monitor-compare-diff .monitor-compare-value {
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.09), rgba(180, 35, 24, 0.03));
}

.monitor-compare-same .monitor-compare-label {
  background: linear-gradient(180deg, rgba(2, 122, 72, 0.10), rgba(2, 122, 72, 0.04));
}

.monitor-compare-same .monitor-compare-value {
  background: linear-gradient(180deg, rgba(2, 122, 72, 0.07), rgba(2, 122, 72, 0.025));
}

.decision-banner {
  display: grid;
  gap: .35rem;
  margin-bottom: 1rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.decision-banner strong {
  font-size: 1rem;
}

.decision-banner span {
  color: var(--muted);
  line-height: 1.45;
}

.decision-banner-danger {
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.13), rgba(180, 35, 24, 0.06));
}

.decision-banner-warn {
  background: linear-gradient(180deg, rgba(180, 120, 24, 0.13), rgba(180, 120, 24, 0.06));
}

.decision-banner-safe {
  background: linear-gradient(180deg, rgba(2, 122, 72, 0.12), rgba(2, 122, 72, 0.05));
}

.comparison-table-wrap {
  overflow-x: auto;
}

.comparison-table {
  margin-bottom: 0;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.comparison-table thead th {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.comparison-table td,
.comparison-table th {
  padding: .9rem .85rem;
  vertical-align: top;
}

.comparison-table .comparison-label {
  min-width: 120px;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface) 28%);
  border-radius: 10px;
}

.comparison-table .comparison-value {
  white-space: normal;
  word-break: break-all;
  line-height: 1.45;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, white 12%);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.comparison-table .changed-row td {
  background: rgba(180, 35, 24, 0.14);
}

.comparison-table .same-row td {
  background: rgba(2, 122, 72, 0.12);
}

.comparison-badge {
  display: inline-block;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.comparison-badge-changed {
  background: rgba(180, 35, 24, 0.18);
  color: #8f1d14;
}

.comparison-badge-same {
  background: rgba(2, 122, 72, 0.18);
  color: #0b6a43;
}

.comparison-badge-critical {
  margin-left: .35rem;
  background: rgba(180, 35, 24, 0.12);
  color: #8f1d14;
}

:root[data-theme="dark"] .comparison-table thead th {
  background: color-mix(in srgb, var(--brand) 20%, var(--surface));
}

:root[data-theme="dark"] .comparison-table .changed-row td {
  background: rgba(255, 107, 107, 0.16);
}

:root[data-theme="dark"] .comparison-table .same-row td {
  background: rgba(52, 211, 153, 0.14);
}

:root[data-theme="dark"] .comparison-table .comparison-value {
  color: #f3fbff;
  background: rgba(9, 18, 27, 0.82);
  box-shadow: inset 0 0 0 1px rgba(148, 200, 231, 0.12);
}

:root[data-theme="dark"] .comparison-table .comparison-label {
  background: rgba(8, 25, 37, 0.9);
}

:root[data-theme="dark"] .comparison-badge-changed {
  background: rgba(255, 107, 107, 0.2);
  color: #ffd1d1;
}

:root[data-theme="dark"] .comparison-badge-same {
  background: rgba(52, 211, 153, 0.18);
  color: #ccffea;
}

:root[data-theme="dark"] .comparison-badge-critical {
  background: rgba(255, 107, 107, 0.16);
  color: #ffd1d1;
}

:root[data-theme="dark"] .comparison-summary-card {
  background: rgba(9, 18, 27, 0.66);
}

:root[data-theme="dark"] .section-chip,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .page-stat {
  background: rgba(9, 18, 27, 0.72);
}

:root[data-theme="dark"] .hardware-section {
  background: rgba(10, 23, 34, 0.78);
}

:root[data-theme="dark"] .page-header-text {
  color: #aac3d4;
}

:root[data-theme="dark"] .page-header {
  background:
    linear-gradient(180deg, rgba(12, 27, 39, 0.96), rgba(9, 18, 27, 0.98));
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .dashboard-license-row {
  background: linear-gradient(180deg, rgba(10, 20, 29, 0.96), rgba(14, 28, 39, 0.94));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.20);
}

:root[data-theme="dark"] .dashboard-license-row:hover {
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .dashboard-license-machine .mono {
  background: rgba(96, 171, 218, 0.16);
  color: #d4efff;
}

:root[data-theme="dark"] .signature-item,
:root[data-theme="dark"] .comparison-record,
:root[data-theme="dark"] .comparison-cell {
  background: linear-gradient(180deg, rgba(9, 18, 27, 0.88), rgba(13, 28, 40, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .comparison-lane-current {
  background: linear-gradient(145deg, rgba(18, 62, 88, 0.88), rgba(11, 25, 37, 0.9));
}

:root[data-theme="dark"] .comparison-lane-previous {
  background: linear-gradient(145deg, rgba(16, 34, 48, 0.92), rgba(10, 21, 31, 0.9));
}

:root[data-theme="dark"] .comparison-record {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .fleet-card {
  background: linear-gradient(180deg, rgba(9, 18, 27, 0.88), rgba(13, 28, 40, 0.86));
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .monitor-row-selected td {
  background: linear-gradient(180deg, rgba(22, 83, 119, 0.92), rgba(14, 55, 79, 0.88)) !important;
}

:root[data-theme="dark"] .monitor-license-card {
  background: linear-gradient(180deg, rgba(12, 25, 36, .96), rgba(10, 21, 31, .94));
}

:root[data-theme="dark"] .monitor-license-card.is-selected,
:root[data-theme="dark"] .monitor-license-card:has(.monitor-card-selector input:checked) {
  background: linear-gradient(180deg, rgba(17, 51, 72, .96), rgba(12, 34, 49, .94));
}

:root[data-theme="dark"] .monitor-machine-block,
:root[data-theme="dark"] .monitor-license-metrics article,
:root[data-theme="dark"] .monitor-commercial-block,
:root[data-theme="dark"] .monitor-card-check {
  background: rgba(6, 16, 24, .48);
}

:root[data-theme="dark"] .monitor-status-badge.is-active { color: #7be0b7; }
:root[data-theme="dark"] .monitor-status-badge.is-expired,
:root[data-theme="dark"] .monitor-status-badge.is-cancelled { color: #ffaaaa; }
:root[data-theme="dark"] .monitor-status-badge.is-replaced,
:root[data-theme="dark"] .monitor-status-badge.is-released { color: #f0c977; }

:root[data-theme="dark"] .monitor-table thead th,
:root[data-theme="dark"] .monitor-compare-table thead th {
  background: rgba(9, 18, 27, 0.96);
  color: rgb(180, 220, 242);
}

:root[data-theme="dark"] .monitor-table tbody tr td {
  background: linear-gradient(180deg, rgba(10, 20, 29, 0.95), rgba(14, 28, 39, 0.92));
  border-top-color: rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .monitor-table tbody tr:not(.monitor-row-selected):hover td {
  background: linear-gradient(180deg, rgba(18, 37, 52, 0.96), rgba(14, 31, 45, 0.94));
}

:root[data-theme="dark"] .monitor-cell-main strong,
:root[data-theme="dark"] .monitor-cell-plain,
:root[data-theme="dark"] .monitor-cell-numeric {
  color: #eef8fd;
}

:root[data-theme="dark"] .monitor-cell-sub {
  color: #aac3d4;
}

:root[data-theme="dark"] .monitor-cell-code {
  background: rgba(96, 171, 218, 0.16);
  color: #d4efff;
}

:root[data-theme="dark"] .monitor-compare-headcard strong {
  color: #eef8fd;
}

:root[data-theme="dark"] .monitor-compare-headcard span,
:root[data-theme="dark"] .monitor-compare-headcard small {
  color: #aac3d4;
}

:root[data-theme="dark"] .monitor-compare-label {
  color: #eef8fd;
  background: linear-gradient(180deg, rgba(8, 25, 37, 0.98), rgba(12, 27, 39, 0.94));
  box-shadow: 8px 0 18px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .monitor-compare-value {
  color: #eef8fd;
  background: linear-gradient(180deg, rgba(10, 20, 29, 0.96), rgba(14, 28, 39, 0.94));
}

:root[data-theme="dark"] .monitor-compare-diff .monitor-compare-label {
  background: linear-gradient(180deg, rgba(117, 31, 31, 0.52), rgba(53, 20, 20, 0.6));
}

:root[data-theme="dark"] .monitor-compare-diff .monitor-compare-value {
  background: linear-gradient(180deg, rgba(79, 26, 26, 0.46), rgba(38, 19, 19, 0.42));
}

:root[data-theme="dark"] .monitor-compare-same .monitor-compare-label {
  background: linear-gradient(180deg, rgba(14, 73, 55, 0.48), rgba(8, 33, 26, 0.58));
}

:root[data-theme="dark"] .monitor-compare-same .monitor-compare-value {
  background: linear-gradient(180deg, rgba(11, 51, 39, 0.38), rgba(10, 27, 22, 0.34));
}

.btn-primary,
.btn-dark {
  background: var(--brand);
  border-color: var(--brand);
}

.btn-primary:hover,
.btn-dark:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}

.form-control,
.form-select {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

.form-control:focus,
.form-select:focus,
.btn:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 20%, transparent);
}

.table {
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--line);
}

.alert-info {
  color: var(--text);
  background: var(--brand-soft);
  border-color: var(--line);
}

.request-list {
  display: grid;
  gap: 1rem;
}

.request-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.request-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.request-card-title strong,
.request-card-grid strong {
  display: block;
}

.request-card-title span:not(.comparison-badge),
.request-card-grid span {
  color: var(--muted);
  font-size: 0.82rem;
}

.request-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.request-card-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.request-note {
  margin: 1rem 0 0;
  color: var(--muted);
}

@media (max-width: 900px) {
  .page-header,
  .license-workbench,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .comparison-header {
    grid-template-columns: 1fr;
  }

  .comparison-summary-grid {
    grid-template-columns: 1fr;
  }

  .comparison-canvas,
  .comparison-record-grid,
  .monitor-filter-grid,
  .monitor-inventory-grid,
  .info-grid,
  .hardware-shell {
    grid-template-columns: 1fr;
  }

  .monitor-compare-summary-grid {
    grid-template-columns: 1fr;
  }

  .license-column-narrow {
    position: static;
  }

  .page-header-stats {
    justify-content: stretch;
  }

  .page-header-copy {
    justify-self: stretch;
    max-width: none;
  }

  .page-header-side {
    justify-self: stretch;
    width: 100%;
  }

  .page-stat {
    min-width: 0;
    flex: 1 1 0;
  }

  .dashboard-license-row,
  .dashboard-license-main,
  .dashboard-license-meta,
  .request-card,
  .request-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1250px) {
  .monitor-inventory-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .monitor-license-card-head {
    grid-template-columns: 28px 38px minmax(0, 1fr);
  }

  .monitor-license-head-actions {
    grid-column: 2 / -1;
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
  }

  .monitor-license-card-body,
  .monitor-license-metrics,
  .monitor-commercial-block,
  .monitor-license-card-foot {
    grid-template-columns: 1fr;
  }

  .monitor-commercial-block > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .monitor-license-date {
    text-align: left;
  }
}

/* Licensing Operations UI — IMS-inspired application shell */
:root,
:root[data-theme="dark"] {
  --brand: #168bd2;
  --brand-strong: #38a9ed;
  --brand-soft: #112c41;
  --bg: #0b0e14;
  --bg-elevated: #111520;
  --surface: #151a26;
  --surface-soft: #191f2d;
  --surface-raised: #1e2535;
  --text: #eef2f8;
  --muted: #919aad;
  --line: #293142;
  --line-strong: #384257;
  --shadow: rgba(0, 0, 0, .22);
  --danger: #ef5b66;
  --warning: #e9a23b;
  --success: #35b982;
}

:root[data-theme="light"] {
  --brand: #087fc4;
  --brand-strong: #075f94;
  --brand-soft: #e3f2fb;
  --bg: #f3f6fa;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-raised: #eef3f8;
  --text: #172033;
  --muted: #647087;
  --line: #dce3ed;
  --line-strong: #c7d1df;
  --shadow: rgba(28, 45, 74, .08);
  --danger: #c93645;
  --warning: #ad7017;
  --success: #16815b;
}

html { font-size: 15px; }

body.app-page,
body.auth-page {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
.app-icon { display: block; width: 1em; height: 1em; overflow: visible; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  width: 248px;
  flex-direction: column;
  padding: 24px 16px 16px;
  color: #eef2f8;
  background: #111520;
  border-right: 1px solid #262e3e;
  box-shadow: 12px 0 40px rgba(0, 0, 0, .08);
}

.brand,
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand { padding: 0 8px 25px; }
.brand:hover, .auth-brand:hover { color: inherit; }

.brand-symbol {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(86, 191, 255, .52);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #199eea, #086ca9);
  box-shadow: 0 8px 24px rgba(11, 139, 211, .25);
}

.brand-symbol .app-icon { position: relative; z-index: 1; width: 23px; height: 23px; stroke-width: 1.9; }
.brand-copy { display: grid; min-width: 0; gap: 3px; }
.brand-copy strong { font-size: 15px; line-height: 1.1; white-space: nowrap; }
.brand-copy small { color: #778198; font-size: 9px; font-weight: 800; letter-spacing: .13em; }

.sidebar-nav {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 23px;
  overflow-y: auto;
  padding: 5px 3px 18px;
  scrollbar-width: thin;
  scrollbar-color: #384257 transparent;
}

.nav-section { display: grid; gap: 5px; }
.nav-section-label { padding: 0 11px 7px; color: #5f697d; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.nav-link {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 9px;
  color: #9ba4b8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.nav-link:hover { color: #fff; background: #1b2230; }
.nav-link.active { color: #fff; background: linear-gradient(90deg, #0d79bb, #118bd1); box-shadow: 0 7px 18px rgba(6, 103, 160, .22); }
.nav-link.active::after { position: absolute; right: 10px; width: 4px; height: 4px; content: ""; border-radius: 50%; background: #fff; opacity: .8; }

.nav-icon {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: currentColor;
  opacity: .88;
}
.nav-icon .app-icon { width: 18px; height: 18px; }
.nav-link.active .nav-icon { opacity: 1; }
.nav-menu { display: grid; }
.nav-menu-toggle { width: 100%; border: 0; text-align: left; background: transparent; }
.nav-menu-toggle > span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu-chevron { width: 8px; height: 8px; flex: 0 0 8px; margin-right: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.nav-menu.is-open .nav-menu-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.nav-submenu { display: grid; max-height: 0; gap: 3px; overflow: hidden; padding: 0 5px 0 42px; opacity: 0; transition: max-height .22s ease, padding .22s ease, opacity .16s ease; }
.nav-menu.is-open .nav-submenu { max-height: 116px; padding-top: 6px; padding-bottom: 5px; opacity: 1; }
.nav-sublink { position: relative; display: flex; min-height: 34px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: #8792a8; font-size: 11px; font-weight: 650; text-decoration: none; transition: color .15s ease, background .15s ease; }
.nav-sublink > i { width: 6px; height: 6px; flex: 0 0 6px; border: 1px solid currentColor; border-radius: 50%; opacity: .72; }
.nav-sublink:hover { color: #fff; background: #1b2230; }
.nav-sublink.active { color: #7bc9f5; background: rgba(28, 146, 214, .12); }
.nav-sublink.active > i { border-color: #40b3f2; background: #40b3f2; box-shadow: 0 0 0 4px rgba(64, 179, 242, .1); opacity: 1; }

.sidebar-footer { display: grid; flex: 0 0 auto; gap: 9px; padding-top: 12px; border-top: 1px solid #262e3e; }
.language-switch { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 7px 5px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface); }
.language-switch > span { font-size: 7px; font-weight: 850; letter-spacing: .16em; }
.language-switch > div, .auth-language-switch { display: inline-flex; gap: 3px; }
.language-switch button, .auth-language-switch button { min-width: 31px; height: 24px; padding: 0 7px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 800; }
.language-switch button:hover, .auth-language-switch button:hover { color: var(--text); background: var(--surface-raised); }
.language-switch button.active, .auth-language-switch button.active { color: #fff; background: var(--brand); }
.auth-language-switch { position: fixed; top: 31px; right: 36px; z-index: 4; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 8px 24px var(--shadow); }
.theme-switch, .user-card { display: flex; width: 100%; align-items: center; color: #aeb7c8; background: #171c28; border: 1px solid #293142; border-radius: 10px; }
.theme-switch { min-height: 48px; gap: 10px; padding: 7px 9px; text-align: left; cursor: pointer; }
.theme-switch:hover { color: #fff; border-color: #3a455a; background: #1c2230; }
.theme-switch-icon { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; }
.theme-switch-icon .app-icon { width: 18px; height: 18px; }
.theme-icon-sun { display: none; }
.theme-switch.is-light .theme-icon-moon { display: none; }
.theme-switch.is-light .theme-icon-sun { display: inline-flex; }
.auth-theme-button.is-light .theme-icon-moon { display: none; }
.auth-theme-button.is-light .theme-icon-sun { display: inline-flex; }
.theme-switch-copy, .user-copy { display: grid; min-width: 0; flex: 1; gap: 1px; }
.theme-switch-copy small, .user-copy small { color: #657086; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.theme-switch-copy strong, .user-copy strong { overflow: hidden; color: inherit; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.theme-switch-track { display: flex; width: 31px; height: 17px; align-items: center; padding: 2px; border-radius: 999px; background: #363e50; transition: background .2s ease; }
.theme-switch-track span { width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s ease; }
.theme-switch.is-light .theme-switch-track { background: var(--brand); }
.theme-switch.is-light .theme-switch-track span { transform: translateX(14px); }
.user-card { min-height: 54px; gap: 9px; padding: 7px; }
.user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid #3b465b; border-radius: 9px; color: #b9e4ff; background: #24354a; font-size: 12px; font-weight: 800; }
.user-card form { margin: 0; }
.logout-button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; color: #e7848c; background: transparent; line-height: 1; }
.logout-button .app-icon { width: 17px; height: 17px; }
.logout-button:hover { color: #fff; background: #42232b; }

/* The application rail follows the selected theme instead of staying permanently dark. */
:root[data-theme="light"] .sidebar {
  color: var(--text);
  background: #fff;
  border-right-color: var(--line);
  box-shadow: 12px 0 40px rgba(28, 45, 74, .07);
}
:root[data-theme="light"] .sidebar .brand-copy small { color: #6d788c; }
:root[data-theme="light"] .sidebar-nav { scrollbar-color: #c7d1df transparent; }
:root[data-theme="light"] .nav-section-label { color: #8791a3; }
:root[data-theme="light"] .nav-link { color: #59657a; }
:root[data-theme="light"] .nav-link:hover { color: #075f94; background: #edf6fb; }
:root[data-theme="light"] .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, #0877b8, #1292d9);
  box-shadow: 0 7px 18px rgba(6, 103, 160, .18);
}
:root[data-theme="light"] .nav-sublink { color: #738097; }
:root[data-theme="light"] .nav-sublink:hover { color: #075f94; background: #edf6fb; }
:root[data-theme="light"] .nav-sublink.active { color: #0877b8; background: rgba(8, 119, 184, .09); }
:root[data-theme="light"] .sidebar-footer { border-top-color: var(--line); }
:root[data-theme="light"] .theme-switch,
:root[data-theme="light"] .user-card {
  color: #536078;
  background: #f7f9fc;
  border-color: #dce3ed;
}
:root[data-theme="light"] .theme-switch:hover {
  color: #075f94;
  background: #edf6fb;
  border-color: #b9d7e9;
}
:root[data-theme="light"] .theme-switch-copy small,
:root[data-theme="light"] .user-copy small { color: #7b879b; }
:root[data-theme="light"] .theme-switch-track { background: #cbd4e0; }
:root[data-theme="light"] .user-avatar {
  color: #075f94;
  background: #e3f2fb;
  border-color: #b9d7e9;
}
:root[data-theme="light"] .logout-button { color: #b52f3d; }
:root[data-theme="light"] .logout-button:hover { color: #a32634; background: #fdecef; }

.workspace { min-height: 100vh; margin-left: 248px; background: var(--bg); }
.content { width: min(1420px, 100%); min-height: calc(100vh - 52px); margin: 0 auto; padding: 31px 34px 45px; }
.mobile-topbar { display: none; }
.app-footer { display: flex; height: 52px; align-items: center; justify-content: space-between; padding: 0 34px; border-top: 1px solid var(--line); color: var(--muted); background: var(--bg-elevated); font-size: 11px; }
.system-status { display: inline-flex; align-items: center; gap: 7px; }
.system-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent); }
.sidebar-backdrop { display: none; }

/* Content surfaces */
.page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 110px;
  align-items: end;
  gap: 24px;
  margin: 0 0 20px;
  padding: 0 0 21px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-header-copy { max-width: 850px; }
.page-header-kicker, .section-kicker { margin-bottom: 7px; color: var(--brand-strong); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.page-header-copy h1 { max-width: 760px; margin: 0; font-size: clamp(24px, 2.1vw, 32px); font-weight: 720; line-height: 1.15; letter-spacing: -.025em; }
.page-header-text { max-width: 760px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.page-header-side { align-self: end; }
.page-header-stats { display: flex; gap: 8px; }
.page-stat { min-width: 120px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: none; }
.page-stat span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.page-stat strong { margin-top: 4px; font-size: 18px; }

.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.stats-grid article { position: relative; min-height: 106px; padding: 18px 19px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 8px 24px var(--shadow); }
.stats-grid article::after { position: absolute; right: 17px; bottom: 16px; width: 29px; height: 29px; content: ""; border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--brand) 9%, transparent); }
.stats-grid span { color: var(--muted); font-size: 11px; font-weight: 650; }
.stats-grid strong { margin-top: 12px; font-size: 27px; font-weight: 720; line-height: 1; }
.dashboard-grid { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 12px; margin-top: 0; }

.panel-card, .auth-card, .org-card, .stats-grid article {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 10px 28px var(--shadow);
}
.panel-card { padding: 18px; border-radius: 11px; }
.panel-card-strong { border-radius: 11px; box-shadow: 0 10px 28px var(--shadow); }
.panel-card > h2, .section-head h2 { font-size: 15px; font-weight: 720; }
.section-head { margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.section-chip, .comparison-badge { border-radius: 6px; }
.org-card { border-radius: 9px; box-shadow: none; background: var(--surface-soft); }
.org-children { border-left-width: 1px; }
.dashboard-license-list { gap: 8px; }
.dashboard-license-row { padding: 13px 14px; border-radius: 9px; background: var(--surface-soft); box-shadow: none; }
.dashboard-license-row:hover { transform: none; border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: var(--surface-raised); box-shadow: none; }
.dashboard-license-main { padding-bottom: 11px; }
.dashboard-license-meta { gap: 10px; }

.btn { min-height: 38px; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.btn-primary, .btn-dark { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 23%, transparent); }
.btn-primary:hover, .btn-dark:hover { color: #fff; background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-outline-secondary { color: var(--text); border-color: var(--line-strong); }
.btn-outline-secondary:hover { color: var(--text); background: var(--surface-raised); border-color: var(--line-strong); }

.form-label { margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.form-control, .form-select {
  min-height: 42px;
  border-color: var(--line-strong);
  border-radius: 8px;
  color: var(--text) !important;
  caret-color: var(--brand-strong);
  background-color: var(--surface-soft);
  font-size: 13px;
  -webkit-text-fill-color: var(--text);
}
.form-control:focus, .form-select:focus {
  color: var(--text) !important;
  background-color: var(--surface);
  -webkit-text-fill-color: var(--text);
}
.form-control::placeholder { color: var(--muted); opacity: .72; -webkit-text-fill-color: var(--muted); }
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--surface-soft) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--surface-soft) inset;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--brand-strong);
  transition: background-color 9999s ease-out 0s;
}

.monitor-shell { gap: 12px; margin-top: 0; }
.monitor-filter-grid { gap: 12px; }
.monitor-table { border-spacing: 0 5px; }
.monitor-table thead th, .monitor-compare-table thead th { padding: 10px 11px; color: var(--muted); background: transparent; border-bottom-color: var(--line); font-size: 9px; }
.monitor-table tbody tr td { padding: 11px; background: var(--surface-soft); }
.monitor-table tbody tr td:first-child { border-radius: 8px 0 0 8px; }
.monitor-table tbody tr td:last-child { border-radius: 0 8px 8px 0; }
.monitor-cell-code { border-radius: 5px; }
.monitor-compare-label, .monitor-compare-value { border-radius: 8px 0 0 8px; background: var(--surface-soft); box-shadow: none; }
.comparison-block, .comparison-record, .comparison-cell, .comparison-lane, .fleet-card, .info-card, .hardware-section, .request-card { border-radius: 10px; box-shadow: none; }
.request-card { background: var(--surface-soft); }

/* Authentication */
.auth-workspace { position: relative; display: grid; min-height: 100vh; grid-template-columns: minmax(320px, 1.05fr) minmax(420px, .95fr); align-items: stretch; overflow: hidden; }
.auth-workspace::before { position: absolute; inset: 0 46% 0 0; content: ""; pointer-events: none; background: radial-gradient(circle at 30% 38%, rgba(20, 145, 215, .2), transparent 31%), linear-gradient(145deg, #101722, #090c12); border-right: 1px solid #222a39; }
.auth-workspace::after { position: absolute; top: 50%; left: 27%; width: 360px; height: 360px; content: "L"; pointer-events: none; border: 1px solid rgba(57, 169, 234, .14); border-radius: 90px; color: rgba(57, 169, 234, .08); font-size: 230px; font-weight: 800; line-height: 350px; text-align: center; transform: translate(-50%, -48%) rotate(-8deg); }
.auth-brand { position: absolute; top: 31px; left: 36px; z-index: 2; color: #eef2f8; }
.auth-shell { position: relative; z-index: 1; display: grid; min-height: 100vh; grid-column: 2; place-items: center; margin: 0; padding: 80px 50px; }
.auth-card { width: min(430px, 100%); padding: 30px; border-radius: 13px; }
.auth-card::before { display: block; margin-bottom: 17px; color: var(--brand-strong); content: "GÜVENLİ ERİŞİM"; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.auth-card h1 { margin: 0 0 9px; font-size: 25px; font-weight: 730; letter-spacing: -.02em; }
.auth-card > p { margin: 0 0 24px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.auth-card .alert { border-radius: 8px; font-size: 12px; }
.auth-security-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; color: var(--muted); font-size: 10px; font-weight: 650; }
.auth-security-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent); }
.auth-code-input { font-family: Consolas, monospace; font-size: 22px; font-weight: 750; letter-spacing: .38em; text-align: center; }
.auth-theme-button { position: fixed; right: 20px; bottom: 20px; z-index: 3; display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 700; }

/* The presentation side of authentication screens follows the light theme as well. */
:root[data-theme="light"] .auth-workspace::before {
  background:
    radial-gradient(circle at 30% 38%, rgba(8, 127, 196, .15), transparent 32%),
    linear-gradient(145deg, #f7fbfe, #e8f2f8);
  border-right-color: #d5e2eb;
}
:root[data-theme="light"] .auth-workspace::after {
  color: rgba(8, 127, 196, .07);
  border-color: rgba(8, 127, 196, .14);
}
:root[data-theme="light"] .auth-brand { color: var(--text); }

@media (max-width: 1100px) {
  .sidebar { width: 220px; }
  .workspace { margin-left: 220px; }
  .content { padding-right: 24px; padding-left: 24px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.menu-open { overflow: hidden; }
  .sidebar { width: min(286px, calc(100vw - 42px)); padding-top: 20px; transform: translateX(-102%); transition: transform .2s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1030; display: block; visibility: hidden; padding: 0; border: 0; background: rgba(2, 5, 10, .66); opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
  .sidebar-backdrop.is-visible { visibility: visible; opacity: 1; }
  .workspace { margin-left: 0; }
  .mobile-topbar { position: sticky; top: 0; z-index: 1000; display: flex; height: 58px; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); backdrop-filter: blur(16px); }
  .menu-toggle { display: grid; width: 36px; height: 36px; place-content: center; gap: 4px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface); }
  .menu-toggle span { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; }
  .mobile-brand { font-size: 13px; font-weight: 750; }
  .environment-chip { margin-left: auto; color: var(--success); font-size: 8px; font-weight: 800; letter-spacing: .09em; }
  .content { min-height: calc(100vh - 102px); padding: 19px 15px 30px; }
  .app-footer { height: 44px; padding: 0 15px; }
  .page-header { grid-template-columns: 1fr; min-height: 0; align-items: start; gap: 14px; padding-bottom: 17px; }
  .page-header-side { width: 100%; justify-self: stretch; }
  .page-header-actions .btn { width: 100%; }
  .page-header-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-header-copy h1 { font-size: 24px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid article { min-height: 94px; padding: 15px; }
  .stats-grid strong { font-size: 23px; }
  .panel-card { padding: 15px; }
  .dashboard-license-main, .dashboard-license-meta { grid-template-columns: 1fr; }
  .auth-workspace { display: block; }
  .auth-workspace::before { inset: 0; }
  .auth-workspace::after { left: 50%; opacity: .55; }
  .auth-shell { min-height: 100vh; padding: 90px 18px 70px; }
  .auth-card { padding: 23px 20px; }
  .auth-brand { top: 20px; left: 20px; }
  .auth-brand .brand-symbol { width: 36px; height: 36px; flex-basis: 36px; }
  .auth-theme-button { right: 12px; bottom: 12px; }
  .auth-language-switch { top: 20px; right: 20px; }
}

/* Account security */
.settings-security-grid { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); align-items: start; gap: 16px; }
.settings-security-grid > :only-child { grid-column: 1 / -1; max-width: 760px; }
.security-status-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 15px; }
.security-status-card > form { grid-column: 2; }
.security-status-icon { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line)); border-radius: 15px; color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.security-status-card.is-enabled .security-status-icon { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.security-status-icon .app-icon { width: 25px; height: 25px; }
.security-status-card h2 { margin: 2px 0 6px; font-size: 18px; }
.security-status-card p:not(.section-kicker), .security-setup-card .section-head p:not(.section-kicker) { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.security-status-card .btn { justify-self: start; }
.security-uri { overflow-wrap: anywhere; font-size: 9px; }
.authenticator-setup-grid { display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: stretch; gap: 18px; }
.authenticator-qr-panel { display: grid; justify-items: center; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 72%, transparent); text-align: center; }
.authenticator-qr-panel > span { color: var(--brand-strong); font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.authenticator-qr-panel img { display: block; width: 220px; height: 220px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 78%, transparent); image-rendering: pixelated; }
.authenticator-qr-panel small { color: var(--muted); font-size: 8.5px; line-height: 1.45; }
.authenticator-code-form { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.authenticator-code-form h3 { margin: 4px 0 6px; font-size: 17px; }
.authenticator-code-form p:not(.section-kicker) { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.authenticator-code-form .auth-code-input { max-width: 250px; min-height: 52px; font-size: 22px; letter-spacing: .26em; text-align: center; }
.authenticator-code-form .btn { align-self: flex-start; }
.authenticator-manual-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.authenticator-manual-details summary { padding: 12px 14px; color: var(--muted); font-size: 9px; font-weight: 700; cursor: pointer; }
.authenticator-manual-details[open] summary { border-bottom: 1px solid var(--line); color: var(--text); }
.authenticator-manual-details .signature-stack { padding: 12px; }
.user-access-fields-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.license-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.license-detail-summary article { display: grid; gap: 6px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.license-detail-summary span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.license-detail-summary strong { font-size: 18px; }
@media (max-width: 900px) { .settings-security-grid { grid-template-columns: 1fr; } .authenticator-setup-grid { grid-template-columns: 1fr; } .authenticator-qr-panel { justify-self: stretch; } }
@media (max-width: 760px) { .license-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 440px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-header-stats { grid-template-columns: 1fr; }
  .app-footer > span:first-child { display: none; }
  .app-footer { justify-content: flex-end; }
}

/* Content workspace refresh — visually aligned with the application rail. */
.content { width: min(1540px, 100%); padding-top: 27px; }

.page-header {
  position: relative;
  min-height: 142px;
  align-items: center;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 2% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 35%),
    linear-gradient(125deg, var(--surface), color-mix(in srgb, var(--surface-soft) 76%, var(--surface) 24%));
  box-shadow: 0 14px 42px var(--shadow);
}
.page-header::after {
  position: absolute;
  top: -74px;
  right: 25%;
  width: 210px;
  height: 210px;
  content: "";
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: 58px;
  transform: rotate(24deg);
}
.page-header-copy,
.page-header-side { position: relative; z-index: 1; }
.page-header-kicker,
.section-kicker { color: var(--brand-strong); }
.page-header-copy h1 { max-width: 820px; font-size: clamp(27px, 2.15vw, 35px); line-height: 1.12; }
.page-header-text { max-width: 800px; margin-top: 10px; font-size: 13px; }

.page-header-stats { gap: 10px; }
.page-stat {
  position: relative;
  min-width: 124px;
  padding: 13px 15px 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}
.page-stat::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--brand);
}
.page-stat span { font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.page-stat strong { margin-top: 5px; font-size: 18px; }

.license-workbench { gap: 16px; margin-top: 0; }
.license-workbench-single { grid-template-columns: minmax(0, 1fr); }
.license-workbench-single > .license-column { width: 100%; }
.license-workbench-single > .license-column-narrow { display: none; }

.panel-card,
.stats-grid article,
.org-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, white 2%), color-mix(in srgb, var(--surface-soft) 72%, var(--surface) 28%));
  box-shadow: 0 12px 34px var(--shadow);
}
.panel-card { padding: 22px; }
.panel-card-strong { box-shadow: 0 16px 42px var(--shadow); }
.section-head { align-items: center; margin: -2px 0 19px; padding-bottom: 17px; }
.section-head h2 { margin-top: 2px; font-size: 17px; letter-spacing: -.015em; }
.section-kicker { margin-bottom: 5px; font-size: 8px; letter-spacing: .18em; }
.section-chip {
  min-height: 31px;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-soft) 68%, var(--surface) 32%);
  font-size: 10px;
  letter-spacing: .02em;
}

.upload-panel { position: relative; }
.upload-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--brand), #55c6ff 45%, transparent 85%);
}
.decode-form { display: grid; gap: 16px; }
.request-source-grid { display: grid; grid-template-columns: minmax(280px, .74fr) minmax(390px, 1.26fr); gap: 14px; }
.request-file-zone,
.request-paste-zone {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface) 24%);
}
.request-file-zone {
  display: flex;
  min-height: 264px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.request-file-zone:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface) 62%);
  transform: translateY(-1px);
}
.request-file-zone:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.request-file-zone.is-dragover {
  border-color: #55c6ff;
  border-style: solid;
  background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface) 38%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #55c6ff 44%, transparent), 0 12px 32px color-mix(in srgb, var(--brand) 18%, transparent);
  transform: translateY(-2px) scale(1.005);
}
.request-file-zone.is-dragover .request-source-icon { transform: translateY(-3px); }
.request-file-zone.has-file { border-color: color-mix(in srgb, var(--success) 62%, var(--line)); }
.request-file-zone.has-error { border-color: color-mix(in srgb, var(--danger) 72%, var(--line)); }
.request-source-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  border-radius: 14px;
  color: var(--brand-strong);
  background: color-mix(in srgb, var(--brand-soft) 68%, var(--surface) 32%);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 14%, transparent);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.request-source-icon .app-icon { width: 23px; height: 23px; }
.request-source-copy { display: grid; gap: 5px; }
.request-source-copy strong { font-size: 15px; }
.request-source-copy span { max-width: 290px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.custom-file-picker {
  display: flex;
  width: min(340px, 100%);
  min-height: 44px;
  align-items: center;
  margin-top: 17px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow) 65%, transparent);
}
.custom-file-button {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  margin: -1px 0 -1px -1px;
  padding: 0 15px;
  border: 1px solid var(--brand);
  border-radius: 10px 8px 8px 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 76%, #39b7f4 24%));
  box-shadow: 5px 0 16px color-mix(in srgb, var(--brand) 16%, transparent);
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease;
}
.custom-file-button:hover { filter: brightness(1.08); }
.custom-file-button:active { transform: translateY(1px); }
.custom-file-button .app-icon { width: 15px; height: 15px; }
.custom-file-name {
  min-width: 0;
  overflow: hidden;
  padding: 0 13px;
  color: var(--muted);
  font-size: 10px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-file-name.has-file { color: var(--text); font-weight: 650; }
.custom-file-name.has-error { color: var(--danger); font-weight: 650; }
.request-file-zone > small { margin-top: 9px; color: var(--muted); font-size: 9px; }
.request-paste-zone { display: flex; min-height: 264px; flex-direction: column; padding: 16px; }
.request-paste-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.request-source-icon-small { width: 36px; height: 36px; flex: 0 0 36px; margin: 0; border-radius: 10px; }
.request-source-icon-small .app-icon { width: 17px; height: 17px; }
.request-paste-head .form-label { display: block; margin: 0 0 2px; color: var(--text); font-size: 12px; }
.request-paste-head small { display: block; color: var(--muted); font-size: 9px; }
.request-paste-zone textarea { min-height: 178px; flex: 1; resize: vertical; border-radius: 10px; line-height: 1.55; }
.decode-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.decode-form-footer > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.decode-form-footer > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent); }
.decode-button { display: inline-flex; min-width: 136px; align-items: center; justify-content: center; gap: 9px; }
.decode-button .app-icon { width: 15px; height: 15px; transition: transform .18s ease; }
.decode-button:hover .app-icon { transform: translateX(3px); }

.empty-state-panel {
  display: grid;
  min-height: 138px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-soft) 56%, transparent);
}
.empty-state-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: var(--brand-strong);
  background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface) 30%);
}
.empty-state-icon .app-icon { width: 22px; height: 22px; }
.empty-state-panel h2 { margin: 0 0 6px; font-size: 16px; }
.empty-state-panel p:not(.section-kicker) { max-width: 700px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.empty-state-flow { display: flex; align-items: center; }
.empty-state-flow span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); font-size: 9px; font-weight: 800; }
.empty-state-flow span.active { color: #fff; border-color: var(--brand); background: var(--brand); }
.empty-state-flow i { width: 22px; height: 1px; background: var(--line); }

.form-control,
.form-select { transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.form-control:focus,
.form-select:focus { border-color: color-mix(in srgb, var(--brand) 72%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent); }
.btn { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary:hover,
.btn-dark:hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent); }

@media (max-width: 980px) {
  .request-source-grid { grid-template-columns: 1fr; }
  .request-file-zone { min-height: 220px; }
}

@media (max-width: 760px) {
  .content { padding-top: 17px; }
  .page-header { min-height: 0; padding: 19px; border-radius: 15px; }
  .page-header::after { display: none; }
  .page-stat { min-width: 0; }
  .panel-card { padding: 17px; border-radius: 14px; }
  .request-source-grid { display: block; }
  .request-paste-zone { margin-top: 12px; }
  .decode-form-footer { align-items: stretch; flex-direction: column; }
  .decode-button { width: 100%; }
  .empty-state-panel { grid-template-columns: auto 1fr; }
  .empty-state-flow { display: none; }
}

/* Dashboard command center */
.dashboard-hero-actions { display: flex; align-items: center; gap: 14px; }
.dashboard-live-state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.dashboard-live-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.dashboard-primary-action { display: inline-flex; min-height: 43px; align-items: center; gap: 8px; padding-inline: 17px; }
.dashboard-primary-action .app-icon { width: 16px; height: 16px; }

.dashboard-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dashboard-stat {
  position: relative;
  display: grid;
  min-height: 132px;
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  gap: 4px 14px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-soft) 75%, var(--surface) 25%));
  box-shadow: 0 12px 30px var(--shadow);
}
.dashboard-stat::after { position: absolute; right: -24px; bottom: -38px; width: 105px; height: 105px; content: ""; border: 1px solid color-mix(in srgb, var(--stat-accent) 17%, transparent); border-radius: 32px; transform: rotate(22deg); }
.dashboard-stat-users { --stat-accent: #57a9e2; }
.dashboard-stat-customers { --stat-accent: #8c78dc; }
.dashboard-stat-licenses { --stat-accent: #35b982; }
.dashboard-stat-requests { --stat-accent: #d79c42; }
.dashboard-stat.has-attention { border-color: color-mix(in srgb, var(--warning) 38%, var(--line)); }
.dashboard-stat-icon { display: grid; width: 42px; height: 42px; grid-row: span 2; place-items: center; border: 1px solid color-mix(in srgb, var(--stat-accent) 32%, var(--line)); border-radius: 12px; color: var(--stat-accent); background: color-mix(in srgb, var(--stat-accent) 11%, var(--surface)); }
.dashboard-stat-icon .app-icon { width: 20px; height: 20px; }
.dashboard-stat-copy { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; }
.dashboard-stat-copy span { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .035em; }
.dashboard-stat-copy strong { color: var(--text); font-size: 29px; font-weight: 740; line-height: 1; }
.dashboard-stat > small { grid-column: 2; color: var(--muted); font-size: 9px; line-height: 1.35; }

.dashboard-command-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 12px; }
.dashboard-activity-panel { grid-column: 1 / span 3; }
.dashboard-activity-panel,
.dashboard-team-panel { min-width: 0; }
.dashboard-panel-head { display: flex; min-height: 64px; align-items: flex-start; justify-content: space-between; gap: 18px; margin: -2px 0 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dashboard-panel-head h2,
.dashboard-quick-panel h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.dashboard-panel-head p:not(.section-kicker) { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.dashboard-text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--brand-strong); font-size: 10px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.dashboard-text-link .app-icon { width: 13px; height: 13px; transition: transform .16s ease; }
.dashboard-text-link:hover .app-icon { transform: translateX(3px); }

.dashboard-license-table-head,
.dashboard-license-feed-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(130px, .8fr) minmax(105px, .62fr) minmax(190px, 1fr) 24px; gap: 13px; align-items: center; }
.dashboard-license-table-head { padding: 0 13px 8px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.dashboard-license-feed { display: grid; gap: 7px; }
.dashboard-license-feed-row { min-height: 69px; padding: 10px 12px; border: 1px solid transparent; border-radius: 11px; color: inherit; background: var(--surface-soft); text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.dashboard-license-feed-row:hover { color: inherit; border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); background: var(--surface-raised); transform: translateX(2px); }
.dashboard-feed-customer { display: flex; min-width: 0; align-items: center; gap: 10px; }
.dashboard-customer-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line)); border-radius: 9px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface) 30%); font-size: 11px; font-weight: 800; }
.dashboard-feed-customer > span:last-child,
.dashboard-feed-machine,
.dashboard-feed-license,
.dashboard-feed-operation { display: grid; min-width: 0; gap: 3px; }
.dashboard-license-feed-row strong { overflow: hidden; color: var(--text); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-license-feed-row small { overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-feed-machine .mono { color: var(--brand-strong); }
.dashboard-operation-badge { width: fit-content; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius: 5px; color: var(--brand-strong); background: color-mix(in srgb, var(--brand-soft) 55%, transparent); font-size: 8px; font-weight: 800; }
.dashboard-row-arrow { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.dashboard-row-arrow .app-icon { width: 13px; height: 13px; }
.dashboard-license-feed-row:hover .dashboard-row-arrow { color: #fff; background: var(--brand); }

.dashboard-empty-state { display: grid; min-height: 238px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 13px; background: color-mix(in srgb, var(--surface-soft) 60%, transparent); }
.dashboard-empty-state > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: var(--brand-strong); background: var(--brand-soft); }
.dashboard-empty-state > span .app-icon { width: 21px; height: 21px; }
.dashboard-empty-state strong { font-size: 13px; }
.dashboard-empty-state p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }

.dashboard-side-column { display: grid; grid-column: 4; gap: 14px; }
.dashboard-panel-head-compact { min-height: 51px; align-items: center; }
.dashboard-panel-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--brand-strong); background: var(--surface-soft); }
.dashboard-panel-icon .app-icon { width: 17px; height: 17px; }
.dashboard-org-tree { max-height: 360px; overflow: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.dashboard-org-tree .org-node { margin: 0; }
.dashboard-org-tree .org-card { display: grid; min-height: 56px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-soft); }
.dashboard-org-tree .org-card:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.org-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 74%, #59c1f6)); font-size: 9px; font-weight: 850; letter-spacing: .03em; }
.org-person { display: grid; min-width: 0; gap: 2px; }
.org-person strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.org-person small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.org-role { max-width: 90px; overflow: hidden; padding: 3px 6px; border-radius: 5px; color: var(--muted); background: var(--surface); font-size: 7.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-org-tree .org-children { margin: 4px 0 4px 16px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); }
.dashboard-org-tree .org-children .org-card { margin-top: 4px; }
.dashboard-mini-empty { padding: 28px 15px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; font-size: 10px; }

.dashboard-quick-panel { display: grid; gap: 8px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--brand-soft) 46%, var(--surface) 54%), var(--surface)); box-shadow: 0 12px 30px var(--shadow); }
.dashboard-quick-panel > div { margin-bottom: 5px; }
.dashboard-quick-panel > a { display: grid; min-height: 57px; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--brand) 17%, var(--line)); border-radius: 10px; color: inherit; background: color-mix(in srgb, var(--surface) 78%, transparent); text-decoration: none; }
.dashboard-quick-panel > a:hover { border-color: color-mix(in srgb, var(--brand) 48%, var(--line)); background: var(--surface); }
.dashboard-quick-panel > a > span { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; color: var(--brand-strong); background: var(--brand-soft); }
.dashboard-quick-panel > a > span .app-icon { width: 16px; height: 16px; }
.dashboard-quick-panel > a > div { display: grid; gap: 2px; }
.dashboard-quick-panel > a strong { font-size: 10px; }
.dashboard-quick-panel > a small { color: var(--muted); font-size: 8px; }
.dashboard-quick-panel > a > .app-icon { width: 13px; height: 13px; color: var(--muted); }

@media (max-width: 1250px) {
  .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-command-grid { grid-template-columns: 1fr; }
  .dashboard-activity-panel, .dashboard-side-column { grid-column: 1; }
  .dashboard-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .dashboard-license-table-head { display: none; }
  .dashboard-license-feed-row { grid-template-columns: minmax(180px, 1.15fr) minmax(120px, .8fr) minmax(155px, 1fr) 24px; }
  .dashboard-feed-license { display: none; }
}

@media (max-width: 760px) {
  .dashboard-hero-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .dashboard-primary-action { justify-content: center; }
  .dashboard-stat-grid { grid-template-columns: 1fr; }
  .dashboard-stat { min-height: 112px; }
  .dashboard-side-column { grid-template-columns: 1fr; }
  .dashboard-license-feed-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .dashboard-feed-machine,
  .dashboard-feed-license { display: none; }
  .dashboard-feed-operation { grid-column: 1; padding-left: 44px; }
  .dashboard-row-arrow { grid-column: 2; grid-row: 1 / span 2; }
  .dashboard-empty-state { grid-template-columns: auto 1fr; }
  .dashboard-empty-state .btn { grid-column: 1 / -1; }
}