:root {
  --qf-ctl-height: 32px;
  --qf-ctl-height-sm: 26px;
  --qf-ctl-height-lg: 40px;
  --qf-ctl-px: 12px;
  --qf-ctl-border: 1px solid var(--qf-border);
  --qf-ctl-radius: var(--qf-radius-sm);
  --qf-ctl-bg: var(--qf-surface);
  --qf-ctl-fg: var(--qf-text);
  --qf-state-py: var(--qf-space-6);
  --qf-state-icon-size: 40px;
  --qf-table-cell-y: var(--qf-space-3);
  --qf-table-cell-x: var(--qf-space-4);
}



.qf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qf-space-2);
  min-height: var(--qf-ctl-height);
  padding: 0 var(--qf-ctl-px);
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-ctl-radius);
  background: var(--qf-surface);
  color: var(--qf-ctl-fg);
  font: inherit;
  font-size: var(--qf-font-size-md);
  font-weight: var(--qf-font-weight-medium);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--qf-duration-fast) var(--qf-ease-standard),
              border-color var(--qf-duration-fast) var(--qf-ease-standard),
              color var(--qf-duration-fast) var(--qf-ease-standard),
              box-shadow var(--qf-duration-fast) var(--qf-ease-standard);
}
.qf-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--qf-surface-hover);
  border-color: var(--qf-border-strong);
}
.qf-btn:disabled,
.qf-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
.qf-btn:focus-visible {
  outline: var(--qf-focus-outline);
  outline-offset: var(--qf-focus-offset);
}

.qf-btn--primary {
  background: var(--qf-primary);
  border-color: var(--qf-primary);
  color: var(--qf-on-primary);
}
.qf-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--qf-primary-hover);
  border-color: var(--qf-primary-hover);
}

.qf-btn--ghost {
  background: transparent;
  border-color: var(--qf-border);
  color: var(--qf-text-muted);
}
.qf-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--qf-surface-hover);
  color: var(--qf-text);
}

.qf-btn--danger {
  background: var(--qf-danger);
  border-color: var(--qf-danger);
  color: var(--qf-on-danger);
}
.qf-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(.94);
}

.qf-btn--sm { min-height: var(--qf-ctl-height-sm); font-size: var(--qf-font-size-sm); padding: 0 8px; }
.qf-btn--lg { min-height: var(--qf-ctl-height-lg); font-size: var(--qf-font-size-base); padding: 0 var(--qf-space-5); }
.qf-btn--block { display: flex; width: 100%; }



.qf-control {
  min-height: var(--qf-ctl-height);
  width: 100%;
  padding: 0 var(--qf-ctl-px);
  border: var(--qf-ctl-border);
  border-radius: var(--qf-ctl-radius);
  background: var(--qf-ctl-bg);
  color: var(--qf-ctl-fg);
  font: inherit;
  font-size: var(--qf-font-size-md);
  transition: border-color var(--qf-duration-fast) var(--qf-ease-standard),
              box-shadow var(--qf-duration-fast) var(--qf-ease-standard);
}
textarea.qf-control {
  min-height: 88px;
  padding: var(--qf-space-2) var(--qf-ctl-px);
  line-height: var(--qf-line-height-base);
  resize: vertical;
}
.qf-control::placeholder { color: var(--qf-text-muted); opacity: .8; }
.qf-control:focus-visible {
  outline: none;
  border-color: var(--qf-primary);
  box-shadow: var(--qf-focus-ring);
}
.qf-control:disabled {
  background: var(--qf-surface-sunken);
  color: var(--qf-text-muted);
  cursor: not-allowed;
}


.qf-control[aria-invalid="true"] {
  border-color: var(--qf-danger);
  background: var(--qf-danger-faint);
}
.qf-control[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qf-danger) 26%, transparent);
}

.qf-field { display: flex; flex-direction: column; gap: var(--qf-space-2); }
.qf-field__label {
  font-size: var(--qf-font-size-sm);
  font-weight: var(--qf-font-weight-medium);
  color: var(--qf-text-muted);
}
.qf-field__hint { font-size: var(--qf-font-size-xs); color: var(--qf-text-muted); line-height: var(--qf-line-height-snug); }
.qf-field-error {
  display: flex;
  align-items: center;
  gap: var(--qf-space-1);
  font-size: var(--qf-font-size-sm);
  color: var(--qf-danger);
  line-height: var(--qf-line-height-snug);
}



.qf-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--qf-space-3);
  padding: var(--qf-state-py) var(--qf-space-5);
  text-align: center;
  color: var(--qf-text-muted);
}
.qf-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--qf-state-icon-size);
  height: var(--qf-state-icon-size);
  border-radius: 50%;
  background: var(--qf-surface-sunken);
  color: var(--qf-text-muted);
  flex: none;
}
.qf-state__title {
  font-size: var(--qf-font-size-base);
  font-weight: var(--qf-font-weight-semibold);
  color: var(--qf-text);
}
.qf-state__desc {
  font-size: var(--qf-font-size-sm);
  color: var(--qf-text-muted);
  max-width: 46ch;
  line-height: var(--qf-line-height-base);
}
.qf-state__action { margin-top: var(--qf-space-2); }


.qf-state--loading { color: var(--qf-text-muted); }

.qf-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--qf-primary) 22%, transparent);
  border-top-color: var(--qf-primary);
  border-radius: 50%;
  animation: qfKitSpin .7s linear infinite;
  flex: none;
}
.qf-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.qf-spinner--lg { width: 40px; height: 40px; border-width: 4px; }

@keyframes qfKitSpin {
  to { transform: rotate(360deg); }
}


.qf-skeleton {
  background: linear-gradient(90deg,
    var(--qf-skeleton-base) 25%,
    var(--qf-skeleton-highlight) 37%,
    var(--qf-skeleton-base) 63%);
  background-size: 400% 100%;
  animation: qfKitShimmer 1.4s ease infinite;
  border-radius: var(--qf-radius-sm);
  height: 12px;
}
@keyframes qfKitShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.qf-skeleton--text { width: 100%; }
.qf-skeleton--title { width: 38%; height: 16px; }
.qf-skeleton--avatar { width: 28px; height: 28px; border-radius: 50%; }
.qf-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--qf-space-3);
  padding: var(--qf-space-4);
  width: 100%;
}
.qf-skeleton-row {
  display: grid;
  grid-template-columns: 28px 2fr 1fr 1fr;
  align-items: center;
  gap: var(--qf-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .qf-skeleton, .qf-spinner { animation: none; }
  .qf-skeleton { background: var(--qf-skeleton-base); }
  .qf-spinner { border-top-color: var(--qf-primary); }
}


.qf-state--empty .qf-state__icon { background: var(--qf-surface-sunken); }

.qf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--qf-space-2);
  padding: var(--qf-state-py) var(--qf-space-5);
  text-align: center;
  color: var(--qf-text-muted);
}
.qf-empty__title {
  font-size: var(--qf-font-size-base);
  font-weight: var(--qf-font-weight-semibold);
  color: var(--qf-text);
}
.qf-empty__desc {
  font-size: var(--qf-font-size-sm);
  max-width: 46ch;
  line-height: var(--qf-line-height-base);
}
.qf-empty__action { margin-top: var(--qf-space-2); }


.qf-state--error .qf-state__icon,
.qf-error .qf-error__icon {
  background: var(--qf-danger-soft);
  color: var(--qf-danger);
}
.qf-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--qf-space-2);
  padding: var(--qf-state-py) var(--qf-space-5);
  text-align: center;
}
.qf-error__title {
  font-size: var(--qf-font-size-base);
  font-weight: var(--qf-font-weight-semibold);
  color: var(--qf-text);
}
.qf-error__detail {
  margin-top: var(--qf-space-2);
  padding: var(--qf-space-2) var(--qf-space-3);
  max-width: 520px;
  text-align: left;
  font-family: var(--qf-font-mono);
  font-size: var(--qf-font-size-xs);
  line-height: var(--qf-line-height-snug);
  color: var(--qf-danger);
  background: var(--qf-danger-faint);
  border: 1px solid var(--qf-danger-border);
  border-radius: var(--qf-radius-sm);
  word-break: break-all;
}
.qf-error__action { margin-top: var(--qf-space-3); }



.qf-card {
  display: flex;
  flex-direction: column;
  background: var(--qf-surface);
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius-md);
  box-shadow: var(--qf-shadow-sm);
  overflow: hidden;
}
.qf-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qf-space-3);
  padding: var(--qf-layout-card-pad);
  border-bottom: 1px solid var(--qf-border);
}
.qf-card__title {
  font-size: var(--qf-font-size-base);
  font-weight: var(--qf-font-weight-semibold);
  color: var(--qf-text);
}
.qf-card__subtitle { font-size: var(--qf-font-size-sm); color: var(--qf-text-muted); }
.qf-card__body { padding: var(--qf-layout-card-pad); }
.qf-card__body--flush { padding: 0; }
.qf-card__footer {
  padding: var(--qf-layout-card-pad);
  border-top: 1px solid var(--qf-border);
  background: var(--qf-surface-sunken);
}



.qf-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.qf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--qf-font-size-md);
  color: var(--qf-text);
}
.qf-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--qf-z-base);
  padding: var(--qf-table-cell-y) var(--qf-table-cell-x);
  background: var(--qf-surface-sunken);
  color: var(--qf-text-muted);
  font-weight: var(--qf-font-weight-semibold);
  font-size: var(--qf-font-size-sm);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--qf-border);
}
.qf-table tbody td {
  padding: var(--qf-table-cell-y) var(--qf-table-cell-x);
  border-bottom: 1px solid var(--qf-border);
  vertical-align: middle;
}
.qf-table tbody tr { transition: background-color var(--qf-duration-fast) var(--qf-ease-standard); }
.qf-table tbody tr:hover { background: var(--qf-surface-hover); }
.qf-table tbody tr:last-child td { border-bottom: 0; }
.qf-table tbody tr.is-selected { background: var(--qf-primary-soft); }
.qf-table__cell--num { text-align: right; font-variant-numeric: tabular-nums; }
.qf-table__cell--nowrap { white-space: nowrap; }


.qf-table__empty {
  padding: var(--qf-state-py) var(--qf-space-5);
  text-align: center;
  color: var(--qf-text-muted);
}



.qf-tag,
.qf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--qf-font-size-xs);
  font-weight: var(--qf-font-weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.qf-tag--neutral,
.qf-badge--neutral { background: var(--qf-surface-sunken); color: var(--qf-text-muted); border-color: var(--qf-border); }
.qf-tag--info,
.qf-badge--info { background: var(--qf-info-soft); color: var(--qf-info); border-color: var(--qf-info-border); }
.qf-tag--success,
.qf-badge--success { background: var(--qf-success-soft); color: var(--qf-success); border-color: var(--qf-success-border); }
.qf-tag--warning,
.qf-badge--warning { background: var(--qf-warning-soft); color: var(--qf-warning); border-color: var(--qf-warning-border); }
.qf-tag--danger,
.qf-badge--danger { background: var(--qf-danger-soft); color: var(--qf-danger); border-color: var(--qf-danger-border); }

.qf-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}



.qf-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--qf-space-2);
  padding: 11px 14px;
  border: 0;
  border-radius: var(--qf-radius-md);
  background: var(--qf-info-faint);
  color: var(--qf-text);
  font-size: var(--qf-font-size-md);
  line-height: var(--qf-line-height-base);
}
.qf-alert::before {
  content: 'i';
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: var(--qf-radius-sm);
  background: var(--qf-info);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
.qf-alert__icon { flex: none; margin-top: 1px; }
.qf-alert__body { flex: 1 1 auto; min-width: 0; }
.qf-alert--info    { background: var(--qf-info-faint); }
.qf-alert--success { background: var(--qf-success-faint); }
.qf-alert--success::before { content: '\2713'; background: var(--qf-success); }
.qf-alert--warning { background: var(--qf-warning-faint); }
.qf-alert--warning::before { content: '!'; background: var(--qf-warning); }
.qf-alert--danger  { background: var(--qf-danger-faint); }
.qf-alert--danger::before  { content: '\00d7'; background: var(--qf-danger); }



.qf-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--qf-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--qf-space-5);
  background: rgba(16, 24, 40, .5);
}
.qf-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  background: var(--qf-surface);
  border-radius: var(--qf-radius-lg);
  box-shadow: var(--qf-shadow-lg);
  overflow: hidden;
}
.qf-modal--lg { max-width: 860px; }
.qf-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qf-space-3);
  padding: var(--qf-space-4) var(--qf-space-5);
  border-bottom: 1px solid var(--qf-border);
}
.qf-modal__title { font-size: var(--qf-font-size-lg); font-weight: var(--qf-font-weight-semibold); }
.qf-modal__body { padding: var(--qf-space-5); overflow-y: auto; flex: 1 1 auto; }
.qf-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--qf-space-3);
  padding: var(--qf-space-4) var(--qf-space-5);
  border-top: 1px solid var(--qf-border);
  background: var(--qf-surface-sunken);
}





.page-loading,
.page-empty,
.page-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--qf-space-3);
  padding: var(--qf-state-py) var(--qf-space-5);
  text-align: center;
  color: var(--qf-text-muted);
}
.page-loading { gap: var(--qf-space-4); }
.page-empty__title,
.page-error__title {
  font-size: var(--qf-font-size-base);
  font-weight: var(--qf-font-weight-semibold);
  color: var(--qf-text);
}
.page-error .qf-error__detail,
.page-error div[style*="monospace"] {
  font-family: var(--qf-font-mono);
  font-size: var(--qf-font-size-xs);
  color: var(--qf-danger);
  background: var(--qf-danger-faint);
  border: 1px solid var(--qf-danger-border);
  border-radius: var(--qf-radius-sm);
  max-width: 520px;
  word-break: break-all;
  text-align: left;
}


.spinner { border-top-color: var(--qf-primary); }


td[colspan] > .qf-table__empty,
.qf-table__empty { font-size: var(--qf-font-size-md); }


td[colspan][style*="text-align:center"],
td[colspan][style*="text-align: center"] {
  padding: var(--qf-state-py) var(--qf-space-5) !important;
  color: var(--qf-text-muted) !important;
  font-size: var(--qf-font-size-md);
  font-weight: var(--qf-font-weight-medium);
  background: transparent;
  border: 1px dashed var(--qf-border);
  border-radius: var(--qf-radius-sm);
}



:root { --purple: var(--qf-text-muted); }

.badge-purple,
.badge.purple {
  background: var(--qf-surface-sunken);
  color: var(--qf-text-muted);
  border: 1px solid var(--qf-border);
}
.tag-purple {
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
  border: 1px solid var(--qf-primary-border);
}





[style*="border-left:3px"],
[style*="border-left: 3px"] {
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-left-color: var(--qf-border) !important;
}




@media (max-width: 1023px) {
  .qf-table-wrap { -webkit-overflow-scrolling: touch; }
  .qf-table { min-width: 560px; }
}


@media (max-width: 767px) {
  :root {
    --qf-state-py: var(--qf-space-5);
    --qf-layout-content-pad: var(--qf-space-4);
  }
  
  .qf-btn { min-height: var(--qf-touch-target); }
  .qf-control { min-height: var(--qf-touch-target); font-size: var(--qf-font-size-base); }
  .qf-btn--sm { min-height: 32px; }
  .qf-modal__overlay { padding: var(--qf-space-3); align-items: flex-end; }
  .qf-modal { max-height: 90vh; }
  .qf-state, .qf-empty, .qf-error { padding: var(--qf-space-5) var(--qf-space-4); }
  .qf-skeleton-row { grid-template-columns: 28px 1fr; }
}

@media (max-width: 639px) {
  .qf-card__header { flex-direction: column; align-items: flex-start; }
  .qf-modal__footer { flex-direction: column-reverse; }
  .qf-modal__footer .qf-btn { width: 100%; }
}