/* cx-design v1.5.1 */
.cx-container { max-width: var(--cx-container); margin-inline: auto; padding-inline: var(--cx-gutter); }
.cx-stack    { display: flex; flex-direction: column; gap: var(--cx-sp-3); }
.cx-row      { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-sp-2); }
.cx-grid     { display: grid; gap: var(--cx-sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.cx-h1 { font-size: var(--cx-fs-3xl); font-weight: var(--cx-fw-bold); line-height: var(--cx-lh-tight); margin: 0; }
.cx-h2 { font-size: var(--cx-fs-2xl); font-weight: var(--cx-fw-bold); line-height: var(--cx-lh-tight); margin: 0; }
.cx-h3 { font-size: var(--cx-fs-lg);  font-weight: var(--cx-fw-semibold); line-height: var(--cx-lh-tight); margin: 0; }
.cx-muted   { color: var(--cx-text-2); }
.cx-caption { color: var(--cx-text-3); font-size: var(--cx-fs-xs); }
@media (min-width: 768px) {
  .cx-h1 { font-size: var(--cx-fs-4xl); }
}

.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cx-sp-2);
  min-height: var(--cx-control-h); padding: 0 var(--cx-sp-5);
  border: var(--cx-border-w) solid transparent; border-radius: var(--cx-r-md);
  font: inherit; font-weight: var(--cx-fw-semibold); font-size: var(--cx-fs-md);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--cx-dur-fast) var(--cx-ease), border-color var(--cx-dur-fast) var(--cx-ease), color var(--cx-dur-fast) var(--cx-ease);
}
.cx-btn:disabled, .cx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cx-btn--primary   { background: var(--cx-primary); color: var(--cx-on-primary); }
.cx-btn--primary:not(:disabled):hover { background: var(--cx-primary-hover); }
.cx-btn--secondary { background: var(--cx-surface-2); color: var(--cx-text); border-color: var(--cx-border); }
.cx-btn--secondary:not(:disabled):hover { background: var(--cx-border); }
.cx-btn--outline   { background: transparent; color: var(--cx-primary-text); border-color: var(--cx-primary); }
.cx-btn--outline:not(:disabled):hover { background: var(--cx-primary-soft); }
.cx-btn--ghost     { background: transparent; color: var(--cx-primary-text); padding-inline: var(--cx-sp-3); }
.cx-btn--ghost:not(:disabled):hover { background: var(--cx-primary-soft); }
.cx-btn--danger    { background: var(--cx-danger); color: var(--cx-on-danger); }
.cx-btn--danger:not(:disabled):hover { filter: brightness(.92); }
.cx-btn--sm    { min-height: var(--cx-control-h-sm); padding-inline: var(--cx-sp-3); font-size: var(--cx-fs-sm); border-radius: var(--cx-r-sm); }
.cx-btn--block { width: 100%; }
.cx-btn--icon  { width: var(--cx-control-h); padding: 0; }
.cx-btn.is-loading { pointer-events: none; }
.cx-btn.is-loading::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: cx-spin .7s linear infinite;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }

.cx-field { display: flex; flex-direction: column; gap: var(--cx-sp-1); }
.cx-label { font-size: var(--cx-fs-sm); font-weight: var(--cx-fw-semibold); }
.cx-label .cx-req { color: var(--cx-danger); margin-left: 2px; }
.cx-input, .cx-select, .cx-textarea {
  width: 100%; box-sizing: border-box;
  min-height: var(--cx-control-h); padding: var(--cx-sp-2) var(--cx-sp-3);
  font: inherit; font-size: var(--cx-fs-md); color: var(--cx-text);
  background: var(--cx-surface); border: var(--cx-border-w) solid var(--cx-border-strong); border-radius: var(--cx-r-md);
  transition: border-color var(--cx-dur-fast) var(--cx-ease), box-shadow var(--cx-dur-fast) var(--cx-ease);
}
.cx-textarea { min-height: 96px; resize: vertical; }
.cx-input::placeholder, .cx-textarea::placeholder { color: var(--cx-text-3); }
.cx-input:focus, .cx-select:focus, .cx-textarea:focus { outline: none; border-color: var(--cx-primary); box-shadow: 0 0 0 4px var(--cx-focus-ring); }
.cx-input:disabled, .cx-select:disabled, .cx-textarea:disabled { background: var(--cx-surface-2); color: var(--cx-text-3); }
.cx-help  { font-size: var(--cx-fs-sm); color: var(--cx-text-2); }
.cx-error { font-size: var(--cx-fs-sm); color: var(--cx-danger); }
.cx-field.is-invalid .cx-input,
.cx-field.is-invalid .cx-select,
.cx-field.is-invalid .cx-textarea { border-color: var(--cx-danger); }

.cx-card {
  background: var(--cx-surface); border: var(--cx-border-w) solid var(--cx-border);
  border-radius: var(--cx-r-lg); padding: var(--cx-sp-5); box-shadow: var(--cx-shadow-sm);
}
.cx-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cx-sp-3); margin-bottom: var(--cx-sp-3); }
.cx-card--link { display: block; color: inherit; text-decoration: none; transition: border-color var(--cx-dur) var(--cx-ease), box-shadow var(--cx-dur) var(--cx-ease); }
.cx-card--link:hover { border-color: var(--cx-border-strong); box-shadow: var(--cx-shadow-md); }

.cx-badge {
  display: inline-flex; align-items: center; gap: var(--cx-sp-1);
  padding: 2px var(--cx-sp-2); border-radius: var(--cx-r-full);
  font-size: var(--cx-fs-xs); font-weight: var(--cx-fw-semibold); line-height: 1.6;
  background: var(--cx-surface-2); color: var(--cx-text-2);
}
.cx-badge--primary { background: var(--cx-primary-soft); color: var(--cx-primary-text); }
.cx-badge--success { background: var(--cx-success-soft); color: var(--cx-success); }
.cx-badge--warning { background: var(--cx-warning-soft); color: var(--cx-warning); }
.cx-badge--danger  { background: var(--cx-danger-soft);  color: var(--cx-danger); }
.cx-badge--info    { background: var(--cx-info-soft);    color: var(--cx-info); }

.cx-alert {
  display: flex; gap: var(--cx-sp-3); padding: var(--cx-sp-3) var(--cx-sp-4);
  border-radius: var(--cx-r-md); border: var(--cx-border-w) solid transparent;
  font-size: var(--cx-fs-sm);
}
.cx-alert--info    { background: var(--cx-info-soft);    color: var(--cx-info); }
.cx-alert--success { background: var(--cx-success-soft); color: var(--cx-success); }
.cx-alert--warning { background: var(--cx-warning-soft); color: var(--cx-warning); }
.cx-alert--danger  { background: var(--cx-danger-soft);  color: var(--cx-danger); }
.cx-alert b { color: inherit; flex: none; }

.cx-table-wrap { overflow: auto; border: var(--cx-border-w) solid var(--cx-border); border-radius: var(--cx-r-lg); background: var(--cx-surface); }
.cx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cx-fs-sm); line-height: var(--cx-lh-dense); }
.cx-table th, .cx-table td { padding: 9px var(--cx-sp-3); text-align: left; vertical-align: middle; border-bottom: var(--cx-border-w) solid var(--cx-border); white-space: nowrap; }
.cx-table th { position: sticky; top: 0; z-index: 1; background: var(--cx-surface-2); color: var(--cx-text-2); font-weight: var(--cx-fw-bold); }
.cx-table tbody tr:hover td { background: var(--cx-row-hover); }
.cx-table tbody tr:last-child td { border-bottom: 0; }
.cx-table .is-num    { text-align: right; font-variant-numeric: tabular-nums; }
.cx-table .is-center { text-align: center; }
.cx-table .is-wrap   { white-space: normal; }
.cx-table tr.is-selected td { background: var(--cx-primary-soft); }
.cx-table tr.is-sum td   { background: var(--cx-row-sum); font-weight: var(--cx-fw-bold); }
.cx-table tr.is-total td { background: var(--cx-row-total); color: var(--cx-on-row-total); font-weight: var(--cx-fw-bold); }

@media (max-width: 767.98px) {
  .cx-table--stack:not(.cx-admin *) thead { display: none; }
  .cx-table--stack:not(.cx-admin *) tr { display: block; padding: var(--cx-sp-3) var(--cx-sp-4); border-bottom: var(--cx-border-w) solid var(--cx-border); }
  .cx-table--stack:not(.cx-admin *) td { display: flex; justify-content: space-between; gap: var(--cx-sp-3); padding: var(--cx-sp-1) 0; border: 0; white-space: normal; }
  .cx-table--stack:not(.cx-admin *) td::before { content: attr(data-label); color: var(--cx-text-2); }
}

.cx-tabs { display: inline-flex; gap: var(--cx-sp-1); padding: var(--cx-sp-1); background: var(--cx-surface-2); border-radius: var(--cx-r-md); }
.cx-tab  { white-space: nowrap; min-height: var(--cx-control-h-sm); padding: 0 var(--cx-sp-4); border: 0; border-radius: var(--cx-r-sm); background: transparent; color: var(--cx-text-2); font: inherit; font-weight: var(--cx-fw-semibold); cursor: pointer; }
.cx-tab[aria-selected="true"] { background: var(--cx-surface); color: var(--cx-text); box-shadow: var(--cx-shadow-sm); }

.cx-modal-backdrop { position: fixed; inset: 0; background: var(--cx-overlay); z-index: var(--cx-z-overlay); display: grid; place-items: center; padding: var(--cx-gutter); }
.cx-modal { width: min(100%, 480px); background: var(--cx-surface); border-radius: var(--cx-r-lg); box-shadow: var(--cx-shadow-lg); padding: var(--cx-sp-6); z-index: var(--cx-z-modal); }
.cx-modal__foot { display: flex; justify-content: flex-end; gap: var(--cx-sp-2); margin-top: var(--cx-sp-6); }

.cx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cx-sp-2); padding: var(--cx-sp-10) var(--cx-sp-4); color: var(--cx-text-2); }
.cx-empty__icon  { font-size: 2rem; line-height: 1; color: var(--cx-text-3); }
.cx-empty__title { color: var(--cx-text); font-weight: var(--cx-fw-semibold); }
.cx-empty .cx-btn { margin-top: var(--cx-sp-2); }

.cx-skeleton {
  display: block; height: 1em; border-radius: var(--cx-r-sm);
  background: linear-gradient(90deg, var(--cx-surface-2) 25%, var(--cx-border) 37%, var(--cx-surface-2) 63%);
  background-size: 400% 100%; animation: cx-shimmer 1.4s ease infinite;
}
.cx-skeleton--title { height: 1.5em; width: 60%; }
.cx-skeleton--block { height: 120px; border-radius: var(--cx-r-lg); }
@keyframes cx-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.cx-stat { display: flex; flex-direction: column; gap: var(--cx-sp-1); }
.cx-stat__label { font-size: var(--cx-fs-sm); color: var(--cx-text-2); }
.cx-stat__value { font-size: var(--cx-fs-3xl); font-weight: var(--cx-fw-bold); line-height: var(--cx-lh-tight); font-variant-numeric: tabular-nums; }
.cx-stat__delta { font-size: var(--cx-fs-sm); font-weight: var(--cx-fw-semibold); }
.cx-stat__delta.is-up   { color: var(--cx-success); }
.cx-stat__delta.is-down { color: var(--cx-danger); }

.cx-topbar { position: sticky; top: 0; z-index: var(--cx-z-sticky); display: flex; align-items: center; gap: var(--cx-sp-4); height: 56px; padding-inline: var(--cx-gutter); background: var(--cx-surface); border-bottom: var(--cx-border-w) solid var(--cx-border); }
.cx-topbar__brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--cx-fw-bold); font-size: var(--cx-fs-lg); color: var(--cx-text); text-decoration: none; }
.cx-topbar > :not(.cx-topbar__brand):not(.cx-topbar__spacer) { flex: none; }
@media (max-width: 575.98px) {
  .cx-topbar { gap: var(--cx-sp-2); }
  .cx-topbar__brand { font-size: var(--cx-fs-md); }
  .cx-topbar__brand .cx-badge { display: none; }
  .cx-topbar .cx-tab { padding: 0 var(--cx-sp-3); }
}
.cx-topbar__spacer { flex: 1; }