.hf-btn {
  min-block-size: var(--hf-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-inline: 1rem;
  border: 1px solid transparent;
  border-radius: var(--hf-control-radius);
  font-size: var(--hf-control-font-size);
  font-weight: var(--hf-button-weight);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--hf-motion-fast) var(--hf-ease), box-shadow var(--hf-motion-fast) var(--hf-ease), background var(--hf-motion-fast) var(--hf-ease), border-color var(--hf-motion-fast) var(--hf-ease);
}
.hf-btn:active { transform: translateY(1px); }
.hf-btn--primary { color: #fff; background: var(--hf-gradient-primary); box-shadow: 0 5px 14px rgb(98 91 246 / .18); }
.hf-btn--primary:hover { box-shadow: 0 7px 18px rgb(98 91 246 / .24); }
.hf-btn--secondary { color: var(--hf-color-text); background: var(--hf-color-surface); border-color: var(--hf-color-border); }
.hf-btn--ghost { color: var(--hf-color-primary); background: transparent; }
.hf-btn--danger { color: #fff; background: var(--hf-color-danger); }
.hf-btn[disabled], .hf-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.hf-icon-btn {
  inline-size: var(--hf-control-height);
  block-size: var(--hf-control-height);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-radius-md);
  background: var(--hf-color-surface);
  color: var(--hf-color-text);
  cursor: pointer;
  transition: border-color var(--hf-motion-fast) var(--hf-ease), background var(--hf-motion-fast) var(--hf-ease), color var(--hf-motion-fast) var(--hf-ease);
}
.hf-icon-btn:hover { border-color: color-mix(in srgb, var(--hf-color-primary) 22%, var(--hf-color-border)); background: var(--hf-color-primary-soft); color: var(--hf-color-primary); }
.hf-icon-btn[disabled] { opacity: .55; cursor: not-allowed; }

.hf-card, .hf-panel {
  background: var(--hf-color-surface);
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-radius-xl);
  box-shadow: var(--hf-shadow-sm);
}
.hf-card { padding: .9375rem; }
.hf-panel { overflow: clip; }

.hf-field { display: grid; gap: var(--hf-space-2); }
.hf-field > label, .hf-field > span:first-child { color: var(--hf-color-text); font-size: var(--hf-label-size); font-weight: var(--hf-label-weight); }
.hf-input, .hf-select, .hf-textarea {
  inline-size: 100%;
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-control-radius);
  background-color: var(--hf-color-surface);
  color: var(--hf-color-text);
  font-size: var(--hf-control-font-size);
  font-weight: 400;
  line-height: 1.5;
  transition: border-color var(--hf-motion-fast) var(--hf-ease), box-shadow var(--hf-motion-fast) var(--hf-ease), background-color var(--hf-motion-fast) var(--hf-ease);
}
.hf-input, .hf-select { block-size: var(--hf-control-height); min-block-size: var(--hf-control-height); padding-inline: .875rem; }
.hf-country-select > select {
  inline-size: 100%;
  block-size: var(--hf-control-height);
  min-block-size: var(--hf-control-height);
  padding-inline: .875rem 2.5rem;
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-control-radius);
  background-color: var(--hf-color-surface);
  color: var(--hf-color-text);
  font: inherit;
  font-size: var(--hf-control-font-size);
  font-weight: 400;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b849d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .8rem center;
  background-size: 1rem;
}
.hf-country-select > select:focus-visible {
  outline: 0;
  border-color: var(--hf-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-color-primary) 12%, transparent);
}
.hf-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b849d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .8rem center;
  background-size: 1rem;
}
.hf-textarea { min-block-size: 7rem; padding: .75rem .875rem; resize: vertical; }
.hf-input::placeholder, .hf-textarea::placeholder { color: color-mix(in srgb, var(--hf-color-text-muted) 80%, white); }
.hf-input:focus-visible, .hf-select:focus-visible, .hf-textarea:focus-visible {
  outline: 0;
  border-color: var(--hf-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-color-primary) 12%, transparent);
}
.hf-input[aria-invalid="true"], .hf-select[aria-invalid="true"], .hf-textarea[aria-invalid="true"],
.hf-input.is-invalid, .hf-select.is-invalid, .hf-textarea.is-invalid {
  border-color: var(--hf-color-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-color-danger) 10%, transparent);
}
.hf-input:disabled, .hf-select:disabled, .hf-textarea:disabled, .hf-input[readonly], .hf-textarea[readonly] { cursor: not-allowed; background: var(--hf-color-surface-muted); color: var(--hf-color-text-muted); }

.hf-input:-webkit-autofill, .hf-select:-webkit-autofill, .hf-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--hf-color-text);
  box-shadow: 0 0 0 1000px var(--hf-color-surface) inset;
  transition: background-color 9999s ease-out 0s;
}

.hf-check, .hf-radio { display: inline-flex; align-items: center; gap: .625rem; min-block-size: 2rem; color: var(--hf-color-text); font-size: var(--hf-font-size-md); cursor: pointer; }
.hf-check input, .hf-radio input { inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: var(--hf-color-primary); }
.hf-check:has(input:disabled), .hf-radio:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.hf-toggle { position: relative; display: inline-flex; align-items: center; gap: .625rem; min-block-size: 2rem; cursor: pointer; }
.hf-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.hf-toggle__track { position: relative; inline-size: 2.5rem; block-size: 1.375rem; border-radius: 999px; background: #d7dbe6; transition: background var(--hf-motion-fast) var(--hf-ease); }
.hf-toggle__track::after { content: ""; position: absolute; inset-block-start: .1875rem; inset-inline-start: .1875rem; inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(20 27 58 / .18); transition: transform var(--hf-motion-fast) var(--hf-ease); }
.hf-toggle input:checked + .hf-toggle__track { background: var(--hf-color-primary); }
.hf-toggle input:checked + .hf-toggle__track::after { transform: translateX(-1.125rem); }
.hf-toggle input:focus-visible + .hf-toggle__track { outline: 3px solid color-mix(in srgb, var(--hf-color-primary) 18%, transparent); outline-offset: 2px; }
.hf-toggle:has(input:disabled) { opacity: .6; cursor: not-allowed; }

.hf-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--hf-font-size-md); }
.hf-table th { color: var(--hf-color-text-muted); background: var(--hf-color-surface-muted); font-size: var(--hf-font-size-sm); font-weight: 500; }
.hf-table th, .hf-table td { padding: .75rem .875rem; border-block-end: 1px solid var(--hf-color-border); text-align: start; vertical-align: middle; }
.hf-table tbody tr:last-child td { border-block-end: 0; }
.hf-table tbody tr:hover td { background: var(--hf-color-surface-soft); }

.hf-tabs { display: flex; align-items: center; gap: .25rem; border-block-end: 1px solid var(--hf-color-border); overflow-x: auto; scrollbar-width: thin; }
.hf-tab { min-block-size: 2.75rem; display: inline-flex; align-items: center; padding-inline: .875rem; color: var(--hf-color-text-muted); border-block-end: 2px solid transparent; white-space: nowrap; }
.hf-tab.is-active, .hf-tab[aria-selected="true"] { color: var(--hf-color-primary); border-block-end-color: var(--hf-color-primary); font-weight: 500; }

.hf-pagination { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.hf-pagination a, .hf-pagination button { min-inline-size: 2.25rem; min-block-size: 2.25rem; display: inline-grid; place-items: center; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-sm); background: var(--hf-color-surface); color: var(--hf-color-text-muted); }
.hf-pagination .is-active, .hf-pagination [aria-current="page"] { color: #fff; border-color: var(--hf-color-primary); background: var(--hf-color-primary); }
.hf-dropdown { position: relative; }
.hf-dropdown__menu { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; min-inline-size: 12rem; padding: .375rem; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface); box-shadow: var(--hf-shadow-md); z-index: var(--hf-z-dropdown); }

.hf-badge { display: inline-flex; align-items: center; gap: .3rem; min-block-size: 1.5rem; border-radius: 999px; padding-inline: .55rem; font-size: var(--hf-font-size-xs); font-weight: 500; }
.hf-badge--success { color: var(--hf-color-success); background: color-mix(in srgb, var(--hf-color-success) 10%, white); }
.hf-badge--warning { color: var(--hf-color-warning); background: color-mix(in srgb, var(--hf-color-warning) 10%, white); }
.hf-badge--danger { color: var(--hf-color-danger); background: color-mix(in srgb, var(--hf-color-danger) 10%, white); }
.hf-badge--primary { color: var(--hf-color-primary); background: var(--hf-color-primary-soft); }
.hf-badge--info { color: var(--hf-color-info); background: color-mix(in srgb, var(--hf-color-info) 10%, var(--hf-color-surface)); }
.hf-badge--neutral { color: var(--hf-color-text-muted); background: var(--hf-color-surface-muted); }

.hf-alert { padding: .875rem 1rem; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface); font-size: var(--hf-font-size-md); }
.hf-alert--warning { border-color: color-mix(in srgb, var(--hf-color-warning) 28%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-warning) 7%, var(--hf-color-surface)); color: var(--hf-color-text); }
.hf-alert--danger { border-color: color-mix(in srgb, var(--hf-color-danger) 28%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-danger) 7%, var(--hf-color-surface)); color: var(--hf-color-text); }
.hf-alert--success { border-color: color-mix(in srgb, var(--hf-color-success) 26%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-success) 7%, var(--hf-color-surface)); color: var(--hf-color-text); }

.hf-skeleton { min-block-size: 1rem; border-radius: .375rem; background: linear-gradient(90deg, #eef1f7 25%, #f8f9fc 37%, #eef1f7 63%); background-size: 400% 100%; animation: hf-skeleton 1.4s ease infinite; }
@keyframes hf-skeleton { from { background-position: 100% 0; } to { background-position: 0 0; } }

.hf-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; }

.hf-swal-backdrop { position: fixed; inset: 0; z-index: var(--hf-z-modal); display: grid; place-items: center; padding: 1rem; background: rgb(20 27 58 / .45); }
.hf-swal { inline-size: min(100%, 28rem); background: var(--hf-color-surface); border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-xl); padding: var(--hf-space-6); box-shadow: var(--hf-shadow-md); text-align: center; }
.hf-swal__icon { inline-size: 3rem; block-size: 3rem; margin-inline: auto; margin-block-end: var(--hf-space-4); border-radius: 999px; background: var(--hf-color-surface-muted); }
.hf-swal-backdrop[data-icon="warning"] .hf-swal__icon { background: color-mix(in srgb, var(--hf-color-warning) 14%, white); }
.hf-swal-backdrop[data-icon="error"] .hf-swal__icon { background: color-mix(in srgb, var(--hf-color-danger) 14%, white); }
.hf-swal-backdrop[data-icon="success"] .hf-swal__icon { background: color-mix(in srgb, var(--hf-color-success) 14%, white); }
.hf-swal__title { margin: 0; font-size: 1.125rem; font-weight: 500; }
.hf-swal__text { margin: var(--hf-space-3) 0 0; color: var(--hf-color-text-muted); }
.hf-swal__actions { display: flex; justify-content: center; gap: var(--hf-space-3); margin-block-start: var(--hf-space-6); }