@layer tokens, reset, base, layout, components, states, responsive, accessibility;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 20rem;
    background: var(--cp-color-canvas);
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  dl,
  dd,
  fieldset {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button,
  summary,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  img,
  svg {
    display: block;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}

@layer base {
  body {
    min-height: 100dvh;
    color: var(--cp-color-ink-700);
    background: var(--cp-color-canvas);
    font-family: var(--cp-font-sans);
    font-size: var(--cp-text-md);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--cp-color-primary-600);
    text-decoration: none;
  }

  a:hover {
    color: var(--cp-color-primary-700);
  }

  h1,
  h2,
  h3,
  strong {
    color: var(--cp-color-ink-950);
  }

  h1 {
    font-size: var(--cp-text-title);
    line-height: 1.2;
    letter-spacing: -0.025em;
  }

  h2 {
    font-size: var(--cp-text-lg);
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  input,
  select,
  textarea {
    inline-size: 100%;
    min-block-size: var(--cp-control-height);
    padding: 0.5625rem 0.75rem;
    color: var(--cp-color-ink-950);
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border-strong);
    border-radius: var(--cp-radius-md);
    outline: none;
    transition:
      border-color var(--cp-transition-fast),
      box-shadow var(--cp-transition-fast);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--cp-color-ink-400);
    opacity: 1;
  }

  input:hover,
  select:hover,
  textarea:hover {
    border-color: #aeb9c8;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--cp-color-primary-600);
    box-shadow: var(--cp-focus-ring);
  }

  input[type="checkbox"] {
    inline-size: 1rem;
    min-block-size: 1rem;
    block-size: 1rem;
    margin: 0;
    padding: 0;
    accent-color: var(--cp-color-primary-600);
    border-radius: 0.1875rem;
  }

  button {
    border: 0;
  }

  [hidden] {
    display: none !important;
  }

  .cp-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .cp-mono {
    font-family: var(--cp-font-mono);
    font-size: 0.92em;
  }

  .cp-eyebrow {
    margin-block-end: var(--cp-space-1);
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

@layer layout {
  .cp-app {
    display: grid;
    grid-template:
      "topbar topbar" var(--cp-topbar-height)
      "sidebar main" minmax(0, 1fr)
      / var(--cp-sidebar-width) minmax(0, 1fr);
    min-block-size: 100dvh;
    background: var(--cp-color-canvas);
    transition: grid-template-columns var(--cp-transition-fast);
  }

  .cp-app.is-sidebar-collapsed {
    grid-template-columns: var(--cp-sidebar-collapsed-width) minmax(0, 1fr);
  }

  .cp-topbar {
    position: sticky;
    z-index: 40;
    inset-block-start: 0;
    grid-area: topbar;
    display: grid;
    grid-template-columns: minmax(15rem, var(--cp-sidebar-width)) minmax(19rem, 1fr) auto;
    align-items: center;
    min-block-size: var(--cp-topbar-height);
    padding-inline: var(--cp-space-4);
    background: rgb(255 255 255 / 96%);
    border-block-end: 1px solid var(--cp-color-border);
    backdrop-filter: blur(16px);
  }

  .cp-topbar__brand,
  .cp-topbar__actions {
    display: flex;
    align-items: center;
  }

  .cp-topbar__brand {
    gap: var(--cp-space-2);
  }

  .cp-topbar__actions {
    justify-content: flex-end;
    gap: var(--cp-space-2);
    min-inline-size: max-content;
  }

  .cp-sidebar {
    position: sticky;
    z-index: 20;
    inset-block-start: var(--cp-topbar-height);
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-inline-size: 0;
    block-size: calc(100dvh - var(--cp-topbar-height));
    padding: var(--cp-space-4) var(--cp-space-3);
    overflow-y: auto;
    background: var(--cp-color-surface);
    border-inline-end: 1px solid var(--cp-color-border);
  }

  .cp-main {
    grid-area: main;
    min-inline-size: 0;
    min-block-size: calc(100dvh - var(--cp-topbar-height));
  }

  .cp-page {
    inline-size: 100%;
    max-inline-size: var(--cp-content-max);
    margin-inline: auto;
    padding: var(--cp-space-4) var(--cp-space-5) var(--cp-space-8);
  }

  .cp-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cp-space-5);
    margin-block-end: var(--cp-space-5);
  }

  .cp-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, var(--cp-context-width));
    gap: var(--cp-space-4);
    align-items: start;
  }

  .cp-dashboard-main {
    display: grid;
    min-inline-size: 0;
    gap: var(--cp-space-4);
  }

  .cp-dashboard-context {
    display: grid;
    gap: var(--cp-space-4);
    min-inline-size: 0;
  }

  .cp-dashboard-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cp-space-4);
    min-inline-size: 0;
  }

  .cp-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cp-space-4);
  }

  .cp-detail-card--wide {
    grid-column: 1 / -1;
  }
}

@layer components {
  .cp-skip-link {
    position: fixed;
    z-index: 200;
    inset-block-start: var(--cp-space-2);
    inset-inline-start: var(--cp-space-2);
    translate: 0 -160%;
    padding: var(--cp-space-2) var(--cp-space-3);
    color: #fff;
    background: var(--cp-color-primary-700);
    border-radius: var(--cp-radius-md);
    transition: translate var(--cp-transition-fast);
  }

  .cp-skip-link:focus {
    translate: 0 0;
  }

  .cp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-2);
    min-inline-size: 0;
    color: var(--cp-color-ink-950);
  }

  .cp-brand:hover {
    color: var(--cp-color-ink-950);
  }

  .cp-brand__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2rem;
    block-size: 2rem;
    color: #fff;
    background: linear-gradient(145deg, #1c72ec, #1155bc);
    border-radius: 0.55rem;
    font-size: var(--cp-text-lg);
    font-weight: 800;
    box-shadow: 0 1px 2px rgb(23 104 229 / 24%);
  }

  .cp-brand__mark--compact {
    display: none;
  }

  .cp-brand__text {
    display: flex;
    align-items: baseline;
    min-inline-size: 0;
    font-size: var(--cp-text-lg);
    letter-spacing: -0.015em;
  }

  .cp-brand__text strong {
    color: var(--cp-color-primary-600);
    font-weight: 760;
  }

  .cp-brand__text span {
    margin-inline-start: 0.24em;
    color: var(--cp-color-ink-950);
    font-weight: 650;
  }

  .cp-global-search {
    position: relative;
    justify-self: end;
    inline-size: min(100%, 17.5rem);
  }

  .cp-global-search input {
    min-block-size: 2.375rem;
    padding-inline: 2.45rem 4rem;
    background: var(--cp-color-surface-subtle);
  }

  .cp-global-search__icon {
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-start: 0.75rem;
    color: var(--cp-color-ink-500);
    translate: 0 -50%;
    pointer-events: none;
  }

  .cp-global-search kbd {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.625rem;
    padding: 0.125rem 0.35rem;
    color: var(--cp-color-ink-500);
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-sm);
    font: inherit;
    font-size: var(--cp-text-xs);
    translate: 0 -50%;
    pointer-events: none;
  }

  .cp-icon-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: var(--cp-control-height);
    block-size: var(--cp-control-height);
    padding: 0;
    color: var(--cp-color-ink-600);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cp-radius-md);
    cursor: pointer;
    transition:
      color var(--cp-transition-fast),
      background-color var(--cp-transition-fast),
      border-color var(--cp-transition-fast);
  }

  .cp-icon-button:hover {
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
    border-color: var(--cp-color-primary-100);
  }

  .cp-icon-button.is-disabled,
  .cp-icon-button[aria-disabled="true"] {
    color: var(--cp-color-ink-400);
    background: var(--cp-color-surface-subtle);
    pointer-events: none;
  }

  .cp-mobile-menu-button {
    display: none;
  }

  .cp-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    color: var(--cp-color-ink-700);
    background: #edf0f4;
    border: 1px solid var(--cp-color-border);
    border-radius: 50%;
    font-size: var(--cp-text-sm);
    font-weight: 700;
  }

  details > summary {
    list-style: none;
  }

  details > summary::-webkit-details-marker {
    display: none;
  }

  .cp-user-menu {
    position: relative;
  }

  .cp-user-menu > summary {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    min-block-size: var(--cp-control-height);
    padding: 0.125rem 0.25rem;
    border-radius: var(--cp-radius-md);
    cursor: pointer;
  }

  .cp-user-menu > summary:hover {
    background: var(--cp-color-primary-050);
  }

  .cp-user-menu__identity {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .cp-user-menu__identity strong,
  .cp-user-menu__identity span {
    max-inline-size: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cp-user-menu__identity strong {
    font-size: var(--cp-text-sm);
    line-height: 1.3;
  }

  .cp-user-menu__identity span {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
  }

  .cp-menu-panel {
    position: absolute;
    z-index: 80;
    inset-block-start: calc(100% + var(--cp-space-2));
    inset-inline-end: 0;
    min-inline-size: 14rem;
    padding: var(--cp-space-2);
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-menu);
  }

  .cp-menu-panel a,
  .cp-menu-panel button {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding: var(--cp-space-2) var(--cp-space-3);
    color: var(--cp-color-ink-700);
    background: transparent;
    border-radius: var(--cp-radius-md);
    text-align: start;
    cursor: pointer;
  }

  .cp-menu-panel a:hover,
  .cp-menu-panel button:hover {
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
  }

  .cp-menu-panel__identity {
    display: flex;
    flex-direction: column;
    padding: var(--cp-space-2) var(--cp-space-3) var(--cp-space-3);
    border-block-end: 1px solid var(--cp-color-border);
    margin-block-end: var(--cp-space-1);
  }

  .cp-menu-panel__identity span {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
  }

  .cp-navigation-list {
    display: grid;
    gap: var(--cp-space-1);
  }

  .cp-navigation-list a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    min-block-size: 2.75rem;
    padding: var(--cp-space-2) var(--cp-space-3);
    color: var(--cp-color-ink-600);
    border-radius: var(--cp-radius-md);
    font-weight: 530;
    white-space: nowrap;
    transition:
      color var(--cp-transition-fast),
      background-color var(--cp-transition-fast);
  }

  .cp-navigation-list a:hover {
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
  }

  .cp-navigation-list a.is-active {
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
    font-weight: 650;
  }

  .cp-navigation-list a.is-active::before {
    position: absolute;
    inset-block: 0.625rem;
    inset-inline-start: -0.75rem;
    inline-size: 0.1875rem;
    content: "";
    background: var(--cp-color-primary-600);
    border-radius: var(--cp-radius-pill);
  }

  .cp-navigation-list__icon {
    display: grid;
    place-items: center;
    flex: 0 0 1.5rem;
    inline-size: 1.5rem;
  }

  .cp-sidebar__footer {
    padding-block-start: var(--cp-space-4);
    border-block-start: 1px solid var(--cp-color-border);
  }

  .cp-sidebar-profile {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    padding: var(--cp-space-2) var(--cp-space-2) var(--cp-space-4);
  }

  .cp-sidebar-profile__identity {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .cp-sidebar-profile__identity strong,
  .cp-sidebar-profile__identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cp-sidebar-profile__identity strong {
    font-size: var(--cp-text-sm);
  }

  .cp-sidebar-profile__identity span {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
  }

  .cp-sidebar-collapse {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding: var(--cp-space-2) var(--cp-space-3);
    color: var(--cp-color-ink-600);
    background: transparent;
    border-radius: var(--cp-radius-md);
    cursor: pointer;
    text-align: start;
  }

  .cp-sidebar-collapse:hover {
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
  }

  .cp-app.is-sidebar-collapsed .cp-navigation-list__label,
  .cp-app.is-sidebar-collapsed .cp-sidebar-profile__identity,
  .cp-app.is-sidebar-collapsed .cp-sidebar-collapse span {
    display: none;
  }

  .cp-app.is-sidebar-collapsed .cp-navigation-list a,
  .cp-app.is-sidebar-collapsed .cp-sidebar-collapse {
    justify-content: center;
    padding-inline: 0;
  }

  .cp-app.is-sidebar-collapsed .cp-sidebar-profile {
    justify-content: center;
    padding-inline: 0;
  }

  .cp-app.is-sidebar-collapsed .cp-sidebar-collapse .cp-icon {
    rotate: 180deg;
  }

  .cp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-space-2);
    min-block-size: var(--cp-control-height);
    padding: 0.5625rem 0.875rem;
    border: 1px solid transparent;
    border-radius: var(--cp-radius-md);
    font-size: var(--cp-text-sm);
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition:
      color var(--cp-transition-fast),
      background-color var(--cp-transition-fast),
      border-color var(--cp-transition-fast),
      box-shadow var(--cp-transition-fast),
      translate var(--cp-transition-fast);
  }

  .cp-button:active {
    translate: 0 1px;
  }

  .cp-button--primary {
    color: #fff;
    background: var(--cp-color-primary-600);
    border-color: var(--cp-color-primary-600);
    box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
  }

  .cp-button--primary:hover {
    color: #fff;
    background: var(--cp-color-primary-700);
    border-color: var(--cp-color-primary-700);
  }

  .cp-button--secondary {
    color: var(--cp-color-ink-700);
    background: var(--cp-color-surface);
    border-color: var(--cp-color-border-strong);
  }

  .cp-button--secondary:hover {
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
    border-color: var(--cp-color-primary-200);
  }

  .cp-button--block {
    inline-size: 100%;
  }

  .cp-button:disabled {
    color: var(--cp-color-ink-400);
    background: #edf0f4;
    border-color: var(--cp-color-border);
    box-shadow: none;
    cursor: not-allowed;
    translate: none;
  }

  .cp-card {
    min-inline-size: 0;
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
  }

  .cp-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-3);
    min-block-size: 2.5rem;
    padding: 0.5rem var(--cp-space-4);
    border-block-end: 1px solid var(--cp-color-border);
  }

  .cp-card__header h2 {
    font-size: var(--cp-text-md);
    font-weight: 700;
  }

  .cp-card__header > a {
    font-size: var(--cp-text-xs);
    font-weight: 600;
  }

  .cp-card__header--tools {
    min-block-size: 3.5rem;
  }

  .cp-detail-form {
    display: grid;
    gap: var(--cp-space-4);
    padding: var(--cp-space-4);
  }

  .cp-detail-form .cp-field__hint {
    display: block;
  }

  .cp-detail-callout {
    margin: 0 var(--cp-space-4) var(--cp-space-4);
  }

  .cp-lifecycle-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--cp-space-4);
    padding: var(--cp-space-4);
  }

  .cp-lifecycle-action {
    display: grid;
    align-content: start;
    gap: var(--cp-space-4);
    padding: var(--cp-space-4);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-md);
  }

  .cp-lifecycle-action h3 {
    color: var(--cp-color-ink-950);
    font-size: var(--cp-text-sm);
  }

  .cp-empty {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    min-block-size: 4.5rem;
    padding: var(--cp-space-4);
  }

  .cp-empty__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    color: var(--cp-color-ink-500);
    background: var(--cp-color-canvas);
    border-radius: 50%;
  }

  .cp-empty__title {
    color: var(--cp-color-ink-700);
    font-size: var(--cp-text-sm);
    font-weight: 650;
  }

  .cp-empty__description {
    margin-block-start: 0.125rem;
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
  }

  .cp-action-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--cp-space-3);
    min-block-size: 2.25rem;
    padding: 0.375rem var(--cp-space-4);
    border-block-start: 1px solid var(--cp-color-border);
  }

  .cp-action-list__item:first-child {
    border-block-start: 0;
  }

  .cp-action-list__icon {
    display: grid;
    place-items: center;
  }

  .cp-action-list__item--danger .cp-action-list__icon,
  .cp-action-list__item--danger .cp-action-list__count,
  .cp-action-list__item--danger > a > span {
    color: var(--cp-color-danger-700);
  }

  .cp-action-list__item--warning .cp-action-list__icon,
  .cp-action-list__item--warning .cp-action-list__count,
  .cp-action-list__item--warning > a > span {
    color: var(--cp-color-warning-700);
  }

  .cp-action-list__item--info .cp-action-list__icon,
  .cp-action-list__item--info .cp-action-list__count,
  .cp-action-list__item--info > a > span {
    color: var(--cp-color-info-700);
  }

  .cp-action-list__item--success .cp-action-list__icon,
  .cp-action-list__item--success .cp-action-list__count,
  .cp-action-list__item--success > a > span {
    color: var(--cp-color-success-700);
  }

  .cp-action-list__content {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .cp-action-list__content strong {
    font-size: var(--cp-text-sm);
    font-weight: 570;
  }

  .cp-action-list__content > span {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
  }

  .cp-action-list__item > a {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    color: var(--cp-color-ink-500);
  }

  .cp-action-list__item > a > span,
  .cp-action-list__count {
    min-inline-size: 1.5rem;
    font-size: var(--cp-text-sm);
    font-weight: 700;
    text-align: end;
  }

  .cp-table-tools {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    min-inline-size: 0;
  }

  .cp-table-search {
    position: relative;
    inline-size: clamp(13rem, 28vw, 26rem);
  }

  .cp-table-search span {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.75rem;
    color: var(--cp-color-ink-500);
    translate: 0 -50%;
    pointer-events: none;
  }

  .cp-table-search input {
    min-block-size: var(--cp-control-height);
    padding-inline-start: 2.3rem;
  }

  .cp-tool-menu {
    position: relative;
  }

  .cp-tool-menu[open] > summary {
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
    border-color: var(--cp-color-primary-200);
  }

  .cp-filter-panel {
    display: grid;
    gap: var(--cp-space-2);
    min-inline-size: 17rem;
    padding: var(--cp-space-3);
  }

  .cp-filter-panel label {
    color: var(--cp-color-ink-600);
    font-size: var(--cp-text-xs);
    font-weight: 650;
  }

  .cp-column-panel {
    display: grid;
    gap: var(--cp-space-1);
  }

  .cp-column-panel label {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    min-block-size: 2.25rem;
    padding: var(--cp-space-2);
    border-radius: var(--cp-radius-md);
    cursor: pointer;
  }

  .cp-column-panel label:hover {
    background: var(--cp-color-primary-050);
  }

  .cp-table-wrap {
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .cp-data-table {
    inline-size: 100%;
    min-inline-size: 50rem;
    color: var(--cp-color-ink-700);
    font-size: var(--cp-text-xs);
  }

  .cp-data-table th,
  .cp-data-table td {
    min-block-size: 2.75rem;
    padding: 0.5625rem var(--cp-space-3);
    border-block-end: 1px solid var(--cp-color-border);
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
  }

  .cp-data-table thead th {
    color: var(--cp-color-ink-600);
    background: var(--cp-color-surface-subtle);
    font-weight: 650;
  }

  .cp-data-table tbody th {
    font-weight: 600;
  }

  .cp-data-table tbody tr {
    transition: background-color var(--cp-transition-fast);
  }

  .cp-data-table tbody tr:hover {
    background: #fafcff;
  }

  .cp-data-table tbody tr:has([data-row-select]:checked) {
    background: var(--cp-color-primary-050);
    outline: 1px solid var(--cp-color-primary-600);
    outline-offset: -1px;
  }

  .cp-data-table tbody tr:last-child th,
  .cp-data-table tbody tr:last-child td {
    border-block-end: 0;
  }

  .cp-practice-table {
    min-inline-size: 46rem;
    table-layout: fixed;
  }

  .cp-practice-table th:nth-child(1) {
    inline-size: 2.5rem;
  }

  .cp-practice-table th:nth-child(2) {
    inline-size: 9rem;
  }

  .cp-practice-table th:nth-child(3),
  .cp-practice-table th:nth-child(4) {
    inline-size: 5.25rem;
  }

  .cp-practice-table th:nth-child(5) {
    inline-size: 6.75rem;
  }

  .cp-practice-table th:nth-child(6) {
    inline-size: 6.25rem;
  }

  .cp-practice-table th:nth-child(7) {
    inline-size: 4.75rem;
  }

  .cp-practice-table th:nth-child(8) {
    inline-size: 7.25rem;
  }

  .cp-practice-table th:nth-child(9) {
    inline-size: 2.75rem;
  }

  .cp-table-check {
    inline-size: 2.75rem;
    text-align: center !important;
  }

  .cp-table-actions {
    inline-size: 3.25rem;
    padding-inline: var(--cp-space-2) !important;
    text-align: end !important;
  }

  .cp-table-actions .cp-icon-button {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }

  .cp-practice-identity {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    color: var(--cp-color-ink-950);
  }

  .cp-practice-identity:hover strong {
    color: var(--cp-color-primary-700);
  }

  .cp-practice-identity strong {
    font-size: var(--cp-text-sm);
    font-weight: 620;
  }

  .cp-practice-identity span {
    display: none;
    max-inline-size: 15rem;
    overflow: hidden;
    color: var(--cp-color-ink-500);
    font-size: 0.7rem;
    font-weight: 450;
    text-overflow: ellipsis;
  }

  .cp-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 1.5rem;
    padding: 0.125rem 0.45rem;
    border: 1px solid;
    border-radius: var(--cp-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }

  .cp-data-table .cp-status {
    justify-self: start;
  }

  .cp-status__dot {
    display: none;
  }

  .cp-status--success {
    color: var(--cp-color-success-700);
    background: var(--cp-color-success-050);
    border-color: var(--cp-color-success-200);
  }

  .cp-status--warning {
    color: var(--cp-color-warning-700);
    background: var(--cp-color-warning-050);
    border-color: var(--cp-color-warning-200);
  }

  .cp-status--danger {
    color: var(--cp-color-danger-700);
    background: var(--cp-color-danger-050);
    border-color: var(--cp-color-danger-200);
  }

  .cp-status--info {
    color: var(--cp-color-info-700);
    background: var(--cp-color-info-050);
    border-color: var(--cp-color-info-200);
  }

  .cp-status--neutral {
    color: var(--cp-color-ink-600);
    background: #f2f4f7;
    border-color: #dfe3e8;
  }

  .cp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-4);
    min-block-size: 3.25rem;
    padding: var(--cp-space-2) var(--cp-space-4);
    border-block-start: 1px solid var(--cp-color-border);
  }

  .cp-pagination__summary {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
  }

  .cp-pagination__actions {
    display: flex;
    align-items: center;
    gap: var(--cp-space-1);
  }

  .cp-pagination__actions .cp-icon-button {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .cp-pagination__current {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
    border: 1px solid var(--cp-color-primary-200);
    border-radius: var(--cp-radius-sm);
    font-size: var(--cp-text-xs);
    font-weight: 700;
  }

  .cp-data-table--compact {
    min-inline-size: 0;
    table-layout: fixed;
    font-size: 0.7rem;
  }

  .cp-data-table--compact th,
  .cp-data-table--compact td {
    padding: 0.375rem 0.35rem;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .cp-data-table--compact th:nth-child(1) {
    inline-size: 25%;
  }

  .cp-data-table--compact th:nth-child(2) {
    inline-size: 22%;
  }

  .cp-data-table--compact th:nth-child(3) {
    inline-size: 18%;
  }

  .cp-data-table--compact th:nth-child(4) {
    inline-size: 18%;
  }

  .cp-data-table--compact th:nth-child(5) {
    inline-size: 17%;
  }

  .cp-data-table--compact .cp-status {
    max-inline-size: 100%;
    justify-content: center;
    overflow: visible;
    font-size: 0.62rem;
    line-height: 1.2;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
  }

  .cp-context-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--cp-space-3);
    align-items: start;
    padding: var(--cp-space-3);
    border-block-start: 1px solid var(--cp-color-border);
  }

  .cp-context-list li:first-child {
    border-block-start: 0;
  }

  .cp-context-list a {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .cp-context-list strong,
  .cp-context-list span,
  .cp-context-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cp-context-list strong {
    font-size: var(--cp-text-sm);
    font-weight: 620;
  }

  .cp-context-list span,
  .cp-context-list small,
  .cp-context-list time {
    color: var(--cp-color-ink-500);
    font-size: 0.7rem;
  }

  .cp-context-list time {
    white-space: nowrap;
  }

  .cp-session-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--cp-space-2);
    padding: var(--cp-space-3);
    border-block-start: 1px solid var(--cp-color-border);
  }

  .cp-session-list li:first-child {
    border-block-start: 0;
  }

  .cp-session-list__status {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-block-start: 0.35rem;
    background: #17a66a;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--cp-color-success-050);
  }

  .cp-session-list div {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .cp-session-list strong {
    overflow: hidden;
    font-size: var(--cp-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cp-session-list span,
  .cp-session-list small {
    color: var(--cp-color-ink-500);
    font-size: 0.7rem;
  }

  .cp-back-navigation {
    margin-block-end: var(--cp-space-3);
  }

  .cp-back-navigation a {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-1);
    color: var(--cp-color-ink-600);
    font-size: var(--cp-text-sm);
    font-weight: 600;
  }

  .cp-detail-header {
    align-items: center;
    padding: var(--cp-space-5);
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
  }

  .cp-detail-header__identity,
  .cp-detail-header__statuses {
    display: flex;
    align-items: center;
  }

  .cp-detail-header__identity {
    gap: var(--cp-space-3);
    min-inline-size: 0;
  }

  .cp-detail-header__identity > div {
    min-inline-size: 0;
  }

  .cp-detail-header__identity h1,
  .cp-detail-header__identity p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cp-detail-header__identity > div > p:last-child {
    margin-block-start: var(--cp-space-1);
    color: var(--cp-color-ink-500);
  }

  .cp-detail-header__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 3rem;
    block-size: 3rem;
    color: var(--cp-color-primary-700);
    background: var(--cp-color-primary-050);
    border-radius: var(--cp-radius-lg);
  }

  .cp-detail-header__statuses {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--cp-space-2);
  }

  .cp-description-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-description-list > div {
    min-inline-size: 0;
    padding: var(--cp-space-4);
    border-block-start: 1px solid var(--cp-color-border);
  }

  .cp-description-list > div:nth-child(-n + 2) {
    border-block-start: 0;
  }

  .cp-description-list dt {
    margin-block-end: var(--cp-space-1);
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
    font-weight: 600;
  }

  .cp-description-list dd {
    overflow-wrap: anywhere;
    color: var(--cp-color-ink-950);
    font-size: var(--cp-text-sm);
    font-weight: 550;
  }

  .cp-description-list--status,
  .cp-description-list--horizontal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-description-list--status > div:nth-child(3) {
    border-block-start: 0;
  }

  .cp-description-list--horizontal > div {
    border-block-start: 0;
  }

  .cp-module-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cp-space-2);
    padding: var(--cp-space-4);
  }

  .cp-module-list li {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    color: var(--cp-color-ink-700);
    font-size: var(--cp-text-sm);
  }

  .cp-module-list .cp-icon {
    color: var(--cp-color-success-700);
  }

  .cp-drawer-layer {
    position: fixed;
    z-index: 100;
    inset: 0;
  }

  .cp-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: var(--cp-color-backdrop);
    opacity: 1;
  }

  .cp-drawer {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    inline-size: min(var(--cp-drawer-width), 100vw);
    max-inline-size: 100%;
    color: var(--cp-color-ink-700);
    background: var(--cp-color-surface);
    box-shadow: var(--cp-shadow-drawer);
    outline: none;
    animation: cp-drawer-enter 180ms ease-out both;
  }

  .cp-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-4);
    padding: var(--cp-space-5) var(--cp-space-6);
    border-block-end: 1px solid var(--cp-color-border);
  }

  .cp-drawer__header h2 {
    font-size: 1.25rem;
  }

  .cp-drawer-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-block-size: 0;
  }

  .cp-drawer-form__body {
    min-block-size: 0;
    padding: var(--cp-space-5) var(--cp-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .cp-fieldset {
    padding: 0;
    border: 0;
  }

  .cp-fieldset + .cp-fieldset {
    margin-block-start: var(--cp-space-6);
    padding-block-start: var(--cp-space-6);
    border-block-start: 1px solid var(--cp-color-border);
  }

  .cp-fieldset > legend {
    inline-size: 100%;
    margin-block-end: var(--cp-space-4);
    color: var(--cp-color-ink-950);
    font-size: var(--cp-text-md);
    font-weight: 700;
  }

  .cp-form-grid {
    display: grid;
    gap: var(--cp-space-4);
  }

  .cp-form-grid + .cp-form-grid {
    margin-block-start: var(--cp-space-4);
  }

  .cp-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-field {
    min-inline-size: 0;
  }

  .cp-field > label,
  .cp-field__label {
    display: block;
    margin-block-end: var(--cp-space-2);
    color: var(--cp-color-ink-700);
    font-size: var(--cp-text-sm);
    font-weight: 650;
  }

  .cp-field__hint,
  .cp-field__error {
    margin-block-start: var(--cp-space-1);
    font-size: var(--cp-text-xs);
  }

  .cp-field__hint {
    color: var(--cp-color-ink-500);
  }

  .cp-field__error {
    min-block-size: 1.125rem;
    color: var(--cp-color-danger-700);
  }

  .cp-field--modules {
    margin-block-start: var(--cp-space-5);
  }

  .cp-input-affix {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    min-block-size: var(--cp-control-height);
    border: 1px solid var(--cp-color-border-strong);
    border-radius: var(--cp-radius-md);
    transition:
      border-color var(--cp-transition-fast),
      box-shadow var(--cp-transition-fast);
  }

  .cp-input-affix:focus-within {
    border-color: var(--cp-color-primary-600);
    box-shadow: var(--cp-focus-ring);
  }

  .cp-input-affix > span {
    display: flex;
    align-items: center;
    padding-inline: var(--cp-space-3);
    color: var(--cp-color-ink-500);
    background: var(--cp-color-canvas);
    border-inline-end: 1px solid var(--cp-color-border);
    border-start-start-radius: var(--cp-radius-md);
    border-end-start-radius: var(--cp-radius-md);
    font-family: var(--cp-font-mono);
  }

  .cp-input-affix input {
    min-block-size: calc(var(--cp-control-height) - 2px);
    border: 0;
    border-radius: 0 var(--cp-radius-md) var(--cp-radius-md) 0;
    box-shadow: none;
  }

  [dir="rtl"] .cp-input-affix input {
    border-radius: var(--cp-radius-md) 0 0 var(--cp-radius-md);
  }

  .cp-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--cp-space-2);
  }

  .cp-check-card {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    min-block-size: 2rem;
    padding: var(--cp-space-1) 0;
    color: var(--cp-color-ink-700);
    font-size: var(--cp-text-xs);
    cursor: pointer;
  }

  .cp-check-card:has(input:checked) {
    color: var(--cp-color-primary-800);
  }

  .cp-form-alert {
    margin-block-end: var(--cp-space-4);
    padding: var(--cp-space-3);
    color: var(--cp-color-danger-700);
    background: var(--cp-color-danger-050);
    border: 1px solid var(--cp-color-danger-200);
    border-radius: var(--cp-radius-md);
    font-size: var(--cp-text-sm);
    font-weight: 550;
  }

  .cp-drawer-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-4);
    min-block-size: 4.75rem;
    padding: var(--cp-space-3) var(--cp-space-6);
    background: var(--cp-color-surface);
    border-block-start: 1px solid var(--cp-color-border);
    box-shadow: 0 -8px 20px rgb(16 24 40 / 4%);
  }

  .cp-drawer-form__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cp-space-2);
  }

  .cp-form-status {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
  }

  .cp-callout {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    min-block-size: 2.75rem;
    margin-block-end: var(--cp-space-4);
    padding: var(--cp-space-3) var(--cp-space-4);
    color: var(--cp-color-ink-700);
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-md);
    font-size: var(--cp-text-sm);
  }

  .cp-callout strong {
    color: var(--cp-color-ink-950);
    font-weight: 700;
  }

  .cp-callout--success {
    color: var(--cp-color-success-700);
    background: var(--cp-color-success-050);
    border-color: var(--cp-color-success-200);
  }

  .cp-callout--warning {
    color: var(--cp-color-warning-700);
    background: var(--cp-color-warning-050);
    border-color: var(--cp-color-warning-200);
  }

  .cp-callout--danger {
    color: var(--cp-color-danger-700);
    background: var(--cp-color-danger-050);
    border-color: var(--cp-color-danger-200);
  }

  .cp-callout--info {
    color: var(--cp-color-info-700);
    background: var(--cp-color-info-050);
    border-color: var(--cp-color-info-200);
  }

  .cp-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cp-space-3);
    margin-block-end: var(--cp-space-4);
  }

  .cp-stat {
    display: grid;
    gap: var(--cp-space-1);
    min-inline-size: 0;
    min-block-size: 5.25rem;
    padding: var(--cp-space-3) var(--cp-space-4);
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
  }

  .cp-stat span {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
    font-weight: 600;
  }

  .cp-stat strong {
    align-self: end;
    color: var(--cp-color-ink-950);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .cp-workspace-tabs {
    display: flex;
    gap: var(--cp-space-1);
    margin-block-end: var(--cp-space-4);
    overflow-x: auto;
    border-block-end: 1px solid var(--cp-color-border);
    scrollbar-width: thin;
  }

  .cp-workspace-tabs a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: var(--cp-space-3);
    color: var(--cp-color-ink-600);
    border-block-end: 2px solid transparent;
    font-size: var(--cp-text-sm);
    font-weight: 650;
    white-space: nowrap;
  }

  .cp-workspace-tabs a:hover {
    color: var(--cp-color-primary-700);
  }

  .cp-workspace-tabs a.is-active {
    color: var(--cp-color-primary-700);
    border-block-end-color: var(--cp-color-primary-600);
  }

  .cp-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cp-space-4);
    margin-block-end: var(--cp-space-4);
  }

  .cp-drawer .cp-package-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-package-card {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
    overflow: clip;
  }

  .cp-drawer label.cp-package-card {
    cursor: pointer;
  }

  .cp-drawer label.cp-package-card:has(input:checked) {
    border-color: var(--cp-color-primary-600);
    box-shadow: 0 0 0 2px var(--cp-color-primary-100);
  }

  .cp-drawer label.cp-package-card:has(input:focus-visible) {
    outline: 3px solid var(--cp-color-primary-600);
    outline-offset: 2px;
  }

  .cp-package-card__header {
    display: grid;
    gap: var(--cp-space-2);
    padding: var(--cp-space-4);
    background: var(--cp-color-surface-subtle);
    border-block-end: 1px solid var(--cp-color-border);
  }

  .cp-package-card__header h2 {
    font-size: var(--cp-text-lg);
  }

  .cp-package-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-2);
  }

  .cp-package-price {
    display: flex;
    align-items: baseline;
    gap: var(--cp-space-1);
    color: var(--cp-color-ink-950);
  }

  .cp-package-price strong {
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-variant-numeric: tabular-nums;
  }

  .cp-package-price span {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
  }

  .cp-package-card__body {
    display: grid;
    align-content: start;
    flex: 1;
    gap: var(--cp-space-4);
    padding: var(--cp-space-4);
  }

  .cp-package-card__section {
    display: grid;
    gap: var(--cp-space-2);
  }

  .cp-package-card__section h3 {
    color: var(--cp-color-ink-700);
    font-size: var(--cp-text-sm);
  }

  .cp-package-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-2);
    padding: var(--cp-space-4);
    border-block-start: 1px solid var(--cp-color-border);
  }

  .cp-feature-list {
    display: grid;
    gap: var(--cp-space-2);
  }

  .cp-feature-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--cp-space-2);
    min-block-size: 1.75rem;
    color: var(--cp-color-ink-700);
    font-size: var(--cp-text-xs);
  }

  .cp-price-form,
  .cp-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--cp-space-2);
  }

  .cp-price-form label,
  .cp-inline-form label {
    display: grid;
    gap: var(--cp-space-1);
    min-inline-size: 7rem;
    color: var(--cp-color-ink-600);
    font-size: var(--cp-text-xs);
    font-weight: 600;
  }

  .cp-price-form input,
  .cp-price-form select,
  .cp-inline-form input,
  .cp-inline-form select {
    min-block-size: 2.5rem;
  }

  .cp-compact-list {
    display: grid;
  }

  .cp-compact-list li {
    display: grid;
    grid-template-columns: auto minmax(10rem, 0.7fr) minmax(12rem, 1fr) auto;
    align-items: center;
    gap: var(--cp-space-3);
    min-block-size: 3rem;
    padding: var(--cp-space-2) var(--cp-space-4);
    border-block-end: 1px solid var(--cp-color-border);
    font-size: var(--cp-text-xs);
  }

  .cp-compact-list li:last-child {
    border-block-end: 0;
  }

  .cp-compact-list time {
    color: var(--cp-color-ink-500);
    white-space: nowrap;
  }

  .cp-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.7fr);
    gap: var(--cp-space-4);
    align-items: start;
  }

  .cp-spinner {
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid rgb(255 255 255 / 42%);
    border-block-start-color: #fff;
    border-radius: 50%;
    animation: cp-spin 700ms linear infinite;
  }

  .cp-login-body {
    background:
      radial-gradient(circle at 15% 10%, rgb(23 104 229 / 9%), transparent 30rem),
      var(--cp-color-canvas);
  }

  .cp-login-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    place-items: center;
    min-block-size: 100dvh;
    padding: var(--cp-space-6);
  }

  .cp-login-brand {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: var(--cp-space-2);
    color: var(--cp-color-ink-950);
  }

  .cp-login-brand > span:last-child {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: var(--cp-text-lg);
  }

  .cp-login-brand > span:last-child > strong {
    color: var(--cp-color-primary-600);
  }

  .cp-login-card {
    inline-size: min(100%, 27rem);
    padding: var(--cp-space-8);
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: 0.875rem;
    box-shadow: 0 18px 45px rgb(16 24 40 / 8%);
  }

  .cp-login-card header {
    margin-block-end: var(--cp-space-6);
  }

  .cp-login-card header > p:last-child {
    margin-block-start: var(--cp-space-2);
    color: var(--cp-color-ink-500);
  }

  .cp-login-form {
    display: grid;
    gap: var(--cp-space-4);
  }

  .cp-login-meta {
    color: var(--cp-color-ink-500);
    font-size: var(--cp-text-xs);
    text-align: center;
  }
}

@layer states {
  [aria-invalid="true"] {
    border-color: var(--cp-color-danger-700) !important;
  }

  .cp-input-affix:has([aria-invalid="true"]) {
    border-color: var(--cp-color-danger-700);
  }

  .cp-input-affix [aria-invalid="true"] {
    border-color: transparent !important;
  }

  body.cp-modal-open {
    overflow: hidden;
  }

  [data-column-table] [data-column][hidden] {
    display: none !important;
  }
}

@layer responsive {
  @media (max-width: 90rem) {
    .cp-dashboard-panels {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 79.9375rem) {
    .cp-app {
      grid-template-columns: var(--cp-sidebar-collapsed-width) minmax(0, 1fr);
    }

    .cp-navigation-list__label,
    .cp-sidebar-profile__identity,
    .cp-sidebar-collapse span {
      display: none;
    }

    .cp-navigation-list a,
    .cp-sidebar-collapse {
      justify-content: center;
      padding-inline: 0;
    }

    .cp-sidebar-profile {
      justify-content: center;
      padding-inline: 0;
    }

    .cp-sidebar-collapse .cp-icon {
      rotate: 180deg;
    }

  }

  @media (max-width: 79.9375rem) {
    .cp-topbar {
      grid-template-columns: var(--cp-sidebar-collapsed-width) minmax(19rem, 1fr) auto;
    }

    .cp-brand__text {
      display: none;
    }

    .cp-brand__mark--compact {
      display: grid;
    }

    .cp-dashboard-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-dashboard-context {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 63.9375rem) {
    .cp-user-menu__identity {
      display: none;
    }

    .cp-dashboard-panels {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-card__header--tools {
      align-items: flex-start;
      flex-direction: column;
    }

    .cp-table-tools {
      inline-size: 100%;
    }

    .cp-table-search {
      flex: 1 1 auto;
      inline-size: auto;
    }

    .cp-description-list,
    .cp-description-list--status {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-description-list > div:nth-child(n) {
      border-block-start: 1px solid var(--cp-color-border);
    }

    .cp-description-list > div:first-child {
      border-block-start: 0;
    }

    .cp-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-package-grid,
    .cp-admin-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 47.9375rem) {
    :root {
      --cp-topbar-height: auto;
    }

    .cp-app,
    .cp-app.is-sidebar-collapsed {
      display: block;
      min-block-size: 100dvh;
    }

    .cp-topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--cp-space-2);
      min-block-size: 4rem;
      padding: var(--cp-space-2) var(--cp-space-3);
    }

    .cp-topbar__brand {
      min-inline-size: 0;
    }

    .cp-brand__text {
      display: flex;
      font-size: var(--cp-text-md);
    }

    .cp-brand__mark--compact {
      display: none;
    }

    .cp-mobile-menu-button {
      display: inline-grid;
    }

    .cp-global-search {
      grid-column: 1 / -1;
      grid-row: 2;
      inline-size: 100%;
    }

    .cp-global-search kbd {
      display: none;
    }

    .cp-topbar__actions > .cp-icon-button:first-child {
      display: none;
    }

    .cp-user-menu > summary .cp-icon {
      display: none;
    }

    .cp-user-menu .cp-menu-panel {
      position: fixed;
      inset-block-start: 3.75rem;
      inset-inline: auto var(--cp-space-3);
    }

    .cp-sidebar {
      position: fixed;
      z-index: 70;
      inset-block: 0;
      inset-inline-start: 0;
      display: flex;
      inline-size: min(19rem, calc(100vw - 3rem));
      block-size: 100dvh;
      padding-block-start: var(--cp-space-5);
      border-inline-end: 1px solid var(--cp-color-border);
      box-shadow: var(--cp-shadow-menu);
      translate: -105% 0;
      transition: translate var(--cp-transition-fast);
    }

    [dir="rtl"] .cp-sidebar {
      translate: 105% 0;
    }

    .cp-app.is-navigation-open .cp-sidebar {
      translate: 0 0;
    }

    .cp-navigation-list__label,
    .cp-sidebar-profile__identity,
    .cp-sidebar-collapse span {
      display: inline;
    }

    .cp-navigation-list a,
    .cp-sidebar-collapse {
      justify-content: flex-start;
      padding-inline: var(--cp-space-3);
    }

    .cp-sidebar-profile {
      justify-content: flex-start;
      padding-inline: var(--cp-space-2);
    }

    .cp-sidebar-collapse {
      display: none;
    }

    .cp-navigation-backdrop {
      position: fixed;
      z-index: 60;
      inset: 0;
      background: var(--cp-color-backdrop);
    }

    .cp-main {
      min-block-size: auto;
    }

    .cp-page {
      padding: var(--cp-space-4) var(--cp-space-3) var(--cp-space-6);
    }

    .cp-page-header {
      align-items: flex-start;
      margin-block-end: var(--cp-space-4);
    }

    .cp-page-header .cp-button {
      min-inline-size: 2.75rem;
    }

    .cp-callout {
      align-items: flex-start;
      flex-direction: column;
      padding-inline: var(--cp-space-3);
    }

    .cp-stat-grid {
      gap: var(--cp-space-2);
    }

    .cp-stat {
      min-block-size: 4.75rem;
      padding: var(--cp-space-3);
    }

    .cp-package-grid {
      gap: var(--cp-space-3);
    }

    .cp-package-card__header,
    .cp-package-card__body,
    .cp-package-card__footer {
      padding-inline: var(--cp-space-3);
    }

    .cp-price-form,
    .cp-inline-form {
      align-items: stretch;
      flex-direction: column;
    }

    .cp-price-form label,
    .cp-inline-form label,
    .cp-price-form .cp-button,
    .cp-inline-form .cp-button {
      inline-size: 100%;
    }

    .cp-compact-list li {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--cp-space-1);
      padding-inline: var(--cp-space-3);
    }

    .cp-dashboard-grid,
    .cp-dashboard-main,
    .cp-dashboard-context,
    .cp-dashboard-panels,
    .cp-detail-grid {
      gap: var(--cp-space-3);
    }

    .cp-dashboard-context,
    .cp-detail-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-detail-card--wide {
      grid-column: auto;
    }

    .cp-card__header {
      padding-inline: var(--cp-space-3);
    }

    .cp-table-tools {
      flex-wrap: wrap;
    }

    .cp-table-search {
      flex-basis: 100%;
      order: -1;
    }

    .cp-tool-menu {
      flex: 1 1 calc(50% - var(--cp-space-2));
    }

    .cp-tool-menu > summary {
      inline-size: 100%;
    }

    .cp-menu-panel {
      inset-inline: 0 auto;
      max-inline-size: calc(100vw - 3rem);
    }

    .cp-tool-menu:last-child .cp-menu-panel {
      inset-inline: auto 0;
    }

    .cp-action-list__item {
      padding-inline: var(--cp-space-3);
    }

    .cp-dashboard-context {
      display: grid;
    }

    .cp-detail-header {
      align-items: flex-start;
      flex-direction: column;
      padding: var(--cp-space-4);
    }

    .cp-detail-header__statuses {
      justify-content: flex-start;
    }

    .cp-description-list--horizontal {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-description-list--horizontal > div + div {
      border-block-start: 1px solid var(--cp-color-border);
    }

    .cp-module-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-drawer__header,
    .cp-drawer-form__body,
    .cp-drawer-form__footer {
      padding-inline: var(--cp-space-4);
    }

    .cp-form-grid--two {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-drawer-form__footer {
      align-items: stretch;
      flex-direction: column;
      padding-block: var(--cp-space-3);
    }

    .cp-form-status:empty {
      display: none;
    }

    .cp-drawer-form__actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp-drawer-form__actions .cp-button {
      inline-size: 100%;
    }

    .cp-login-shell {
      padding: var(--cp-space-4);
    }

    .cp-login-card {
      padding: var(--cp-space-6) var(--cp-space-5);
    }
  }

  @media (max-width: 44.9375rem) {
    .cp-stat-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-table-wrap {
      overflow: visible;
    }

    .cp-data-table,
    .cp-data-table--compact {
      display: block;
      min-inline-size: 0;
    }

    .cp-data-table thead {
      display: none;
    }

    .cp-data-table tbody {
      display: grid;
    }

    .cp-data-table tbody tr {
      position: relative;
      display: grid;
      padding: var(--cp-space-3);
      border-block-end: 1px solid var(--cp-color-border);
    }

    .cp-data-table tbody tr:last-child {
      border-block-end: 0;
    }

    .cp-data-table th,
    .cp-data-table td {
      display: grid;
      grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr);
      align-items: center;
      min-block-size: 2rem;
      padding: var(--cp-space-1) 0;
      border: 0;
      white-space: normal;
    }

    .cp-data-table th::before,
    .cp-data-table td::before {
      align-self: start;
      padding-inline-end: var(--cp-space-2);
      color: var(--cp-color-ink-500);
      content: attr(data-label);
      font-size: var(--cp-text-xs);
      font-weight: 600;
    }

    .cp-data-table .cp-table-check {
      position: absolute;
      inset-block-start: var(--cp-space-3);
      inset-inline-end: var(--cp-space-3);
      display: block;
      inline-size: auto;
      min-block-size: auto;
      padding: 0;
    }

    .cp-data-table .cp-table-check::before {
      display: none;
    }

    .cp-practice-table tbody th[scope="row"] {
      display: block;
      padding-inline-end: 2rem;
      margin-block-end: var(--cp-space-2);
    }

    .cp-practice-table tbody th[scope="row"]::before {
      display: none;
    }

    .cp-practice-table .cp-table-actions {
      position: absolute;
      inset-block-end: var(--cp-space-2);
      inset-inline-end: var(--cp-space-2);
      display: block;
      inline-size: auto;
    }

    .cp-practice-table .cp-table-actions::before {
      display: none;
    }

    .cp-practice-table tbody tr:has([data-row-select]:checked) {
      outline-offset: -1px;
    }

    .cp-data-table--compact tbody tr {
      padding-block: var(--cp-space-2);
    }

    .cp-data-table--compact th,
    .cp-data-table--compact td {
      grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr);
      padding: var(--cp-space-1) 0;
    }

    .cp-pagination {
      padding-inline: var(--cp-space-3);
    }
  }

  @container (max-width: 24rem) {
    .cp-context-list li {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .cp-context-list time {
      grid-column: 2;
    }
  }

}

@layer accessibility {
  :focus-visible {
    outline: 3px solid var(--cp-color-primary-600);
    outline-offset: 2px;
  }

  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 0;
  }

  .cp-card {
    container-type: inline-size;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (forced-colors: active) {
    .cp-brand__mark,
    .cp-status,
    .cp-button,
    .cp-empty__icon,
    .cp-detail-header__icon,
    .cp-navigation-list a.is-active {
      border: 1px solid CanvasText;
    }

    .cp-status__dot,
    .cp-session-list__status {
      background: CanvasText;
    }

    .cp-button--primary {
      color: ButtonText;
      background: ButtonFace;
    }

    .cp-drawer-backdrop {
      background: rgb(0 0 0 / 60%);
    }
  }

  @keyframes cp-spin {
    to {
      rotate: 360deg;
    }
  }

  @keyframes cp-drawer-enter {
    from {
      translate: 2rem 0;
      opacity: 0.5;
    }
  }

  [dir="rtl"] .cp-drawer {
    box-shadow: 16px 0 48px rgb(16 24 40 / 18%);
  }

  [dir="rtl"] .cp-drawer {
    animation-name: cp-drawer-enter-rtl;
  }

  @keyframes cp-drawer-enter-rtl {
    from {
      translate: -2rem 0;
      opacity: 0.5;
    }
  }
}