.hf-domains,
.hf-domain-bulk-page {
  display: grid;
  gap: var(--hf-space-6);
  max-inline-size: 92rem;
  margin-inline: auto;
}

.hf-domains__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hf-space-2);
}
.hf-domains__stats span,
.hf-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  gap: var(--hf-space-2);
  padding-inline: var(--hf-space-3);
  border: 1px solid var(--hf-color-border);
  border-radius: 999px;
  background: var(--hf-color-surface);
  color: var(--hf-color-text-muted);
  font-size: .84rem;
}
.hf-domains__stats strong { color: var(--hf-color-text); }

.hf-domains__toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(9rem, 1fr));
  gap: var(--hf-space-4);
  padding: var(--hf-space-4);
  align-items: end;
}
.hf-domains__form { display: grid; gap: var(--hf-space-4); }
.hf-domains__bulk {
  position: sticky;
  inset-block-start: calc(var(--hf-topbar-height) + var(--hf-space-3));
  z-index: var(--hf-z-sticky);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hf-space-4);
  padding: var(--hf-space-3) var(--hf-space-4);
}
.hf-domains__bulk-actions,
.hf-domain-bulk-actions,
.hf-domain-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hf-space-2);
}
.hf-domains__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hf-space-4);
}

.hf-domain-card {
  min-inline-size: 0;
  display: grid;
  gap: var(--hf-space-4);
  transition: transform var(--hf-motion-normal) var(--hf-ease), border-color var(--hf-motion-normal) var(--hf-ease), box-shadow var(--hf-motion-normal) var(--hf-ease);
}
.hf-domain-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hf-color-primary) 22%, var(--hf-color-border)); box-shadow: var(--hf-shadow-md); }
.hf-domain-card[hidden] { display: none; }
.hf-domain-card__head { display: flex; justify-content: space-between; align-items: start; gap: var(--hf-space-4); }
.hf-domain-card__name { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; text-align: right; }
.hf-domain-card__meta { display: flex; flex-wrap: wrap; gap: var(--hf-space-2); margin-block-start: var(--hf-space-2); }
.hf-domain-card__select { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); cursor: pointer; }
.hf-domain-card__select input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--hf-color-primary); }
.hf-domain-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hf-space-3); margin: 0; }
.hf-domain-card__facts > div { min-inline-size: 0; padding: var(--hf-space-3); border-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); }
.hf-domain-card__facts dt { color: var(--hf-color-text-muted); font-size: .76rem; }
.hf-domain-card__facts dd { margin: var(--hf-space-1) 0 0; font-weight: 500; overflow-wrap: anywhere; }
.hf-domain-card__manage { inline-size: 100%; }

.hf-domain-expiry {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  padding-inline: var(--hf-space-2);
  border-radius: 999px;
  background: var(--hf-color-surface-muted);
  color: var(--hf-color-text-muted);
  font-size: .76rem;
  font-weight: 500;
}
.hf-domain-expiry--danger { color: var(--hf-color-danger); background: color-mix(in srgb, var(--hf-color-danger) 8%, var(--hf-color-surface)); }
.hf-domain-expiry--warning { color: var(--hf-color-warning); background: color-mix(in srgb, var(--hf-color-warning) 8%, var(--hf-color-surface)); }

.hf-domain-hero,
.hf-domain-subpage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hf-space-5);
  max-inline-size: 92rem;
  margin-inline: auto;
}
.hf-domain-hero__copy { min-inline-size: 0; }
.hf-domain-hero__meta,
.hf-domain-section__eyebrow { color: var(--hf-color-primary); font-size: .76rem; font-weight: 500; }
.hf-domain-hero h1,
.hf-domain-subpage-header h1 { margin: var(--hf-space-1) 0 0; overflow-wrap: anywhere; }
.hf-domain-hero__status { display: flex; flex-wrap: wrap; gap: var(--hf-space-2); margin-block-start: var(--hf-space-3); }
.hf-domain-warning { display: flex; align-items: center; justify-content: space-between; gap: var(--hf-space-4); }

.hf-domain-tabs {
  position: sticky;
  inset-block-start: calc(var(--hf-topbar-height) + var(--hf-space-3));
  z-index: var(--hf-z-sticky);
  display: flex;
  gap: var(--hf-space-2);
  margin-block: var(--hf-space-5);
  padding: var(--hf-space-2);
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-radius-lg);
  background: color-mix(in srgb, var(--hf-color-surface) 94%, transparent);
  box-shadow: var(--hf-shadow-sm);
  overflow-x: auto;
}
.hf-domain-tabs a { flex: 0 0 auto; padding: var(--hf-space-2) var(--hf-space-4); border-radius: var(--hf-radius-md); color: var(--hf-color-text-muted); font-size: .86rem; font-weight: 500; }
.hf-domain-tabs a:hover { color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 7%, var(--hf-color-surface)); }

.hf-domain-section,
.hf-domain-subpage {
  display: grid;
  gap: var(--hf-space-4);
  max-inline-size: 92rem;
  margin-inline: auto;
  scroll-margin-block-start: calc(var(--hf-topbar-height) + 5rem);
}
.hf-domain-section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--hf-space-4); }
.hf-domain-section__header h2,
.hf-domain-subpage h2 { margin: var(--hf-space-1) 0 0; }
.hf-domain-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hf-space-3); margin: 0; }
.hf-domain-info-grid > div { min-inline-size: 0; padding: var(--hf-space-3); border-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); }
.hf-domain-info-grid dt { color: var(--hf-color-text-muted); font-size: .76rem; }
.hf-domain-info-grid dd { margin: var(--hf-space-1) 0 0; font-weight: 500; overflow-wrap: anywhere; }

.hf-domain-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hf-space-3); }
.hf-domain-action { min-block-size: 3.25rem; display: flex; align-items: center; justify-content: center; padding: var(--hf-space-3); border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface); color: var(--hf-color-text); font-weight: 500; text-align: center; }
.hf-domain-action:hover { border-color: color-mix(in srgb, var(--hf-color-primary) 25%, var(--hf-color-border)); color: var(--hf-color-primary); }
.hf-domain-action--primary { color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 7%, var(--hf-color-surface)); }

.hf-domain-setting { display: flex; justify-content: space-between; align-items: center; gap: var(--hf-space-4); padding: var(--hf-space-3); border-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); }
.hf-domain-setting__copy { display: grid; gap: var(--hf-space-1); }
.hf-domain-setting__copy span { color: var(--hf-color-text-muted); font-size: .82rem; }
.hf-domain-inline-form { margin: 0; }
.hf-domain-form { display: grid; gap: var(--hf-space-4); }
.hf-domain-ns-grid,
.hf-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-3); }
.hf-choice-row { display: flex; flex-wrap: wrap; gap: var(--hf-space-3); }
.hf-choice-row label { display: inline-flex; align-items: center; gap: var(--hf-space-2); cursor: pointer; }

.hf-domain-addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hf-space-3); }
.hf-domain-addon { display: grid; align-content: start; gap: var(--hf-space-3); padding: var(--hf-space-4); border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); }
.hf-domain-addon small { color: var(--hf-color-text-muted); }
.hf-domain-addon-price { margin-block: var(--hf-space-4); font-size: 1.35rem; font-weight: 500; }
.hf-domain-addon-confirm { display: grid; gap: var(--hf-space-3); }

.hf-domain-subpage-header { justify-content: flex-start; margin-block-end: var(--hf-space-5); }
.hf-domain-subpage-header__back { inline-size: 2.75rem; block-size: 2.75rem; display: 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); font-size: 1.2rem; }
.hf-domain-subpage-header p { margin: var(--hf-space-1) 0 0; color: var(--hf-color-text-muted); text-align: right; }
.hf-domain-subpage__intro { margin: 0; color: var(--hf-color-text-muted); line-height: 1.9; }

.hf-dns-records,
.hf-forwarders,
.hf-contact-groups { display: grid; gap: var(--hf-space-3); }
.hf-dns-record { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(7rem, .6fr) minmax(14rem, 1.5fr) minmax(6rem, .45fr) auto; gap: var(--hf-space-3); align-items: end; }
.hf-dns-record--new { border-style: dashed; }
.hf-dns-record__value { min-inline-size: 0; }
.hf-contact-group { min-inline-size: 0; margin: 0; padding: var(--hf-space-4); }
.hf-contact-group legend { padding-inline: var(--hf-space-2); font-weight: 500; }
.hf-contact-group .hf-choice-row { margin-block-end: var(--hf-space-3); }

.hf-forwarder { display: grid; grid-template-columns: minmax(12rem, 1fr) auto minmax(14rem, 1fr) auto; gap: var(--hf-space-3); align-items: end; }
.hf-forwarder--new { border-style: dashed; }
.hf-forwarder__arrow { align-self: center; color: var(--hf-color-text-muted); font-size: 1.3rem; }
.hf-input-affix { display: flex; align-items: stretch; min-inline-size: 0; }
.hf-input-affix .hf-input { min-inline-size: 0; border-start-start-radius: 0; border-end-start-radius: 0; }
.hf-input-affix > span { display: inline-flex; align-items: center; max-inline-size: 45%; padding-inline: var(--hf-space-3); border: 1px solid var(--hf-color-border); border-inline-end: 0; border-start-start-radius: var(--hf-radius-md); border-end-start-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); color: var(--hf-color-text-muted); overflow-wrap: anywhere; }

.hf-domain-registerns-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hf-space-4); max-inline-size: 92rem; margin-inline: auto; }
.hf-domain-danger-card { border-color: color-mix(in srgb, var(--hf-color-danger) 24%, var(--hf-color-border)); }

.hf-epp-panel { max-inline-size: 52rem; }
.hf-sensitive-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--hf-space-3); align-items: center; padding: var(--hf-space-4); border-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); }
.hf-sensitive-value code { min-inline-size: 0; overflow-wrap: anywhere; }
.hf-sensitive-value__feedback { grid-column: 1 / -1; min-block-size: 1.2rem; color: var(--hf-color-success); font-size: .78rem; }

.hf-domain-bulk-summary { display: grid; grid-template-columns: minmax(14rem, .6fr) minmax(0, 1.4fr); gap: var(--hf-space-5); align-items: center; }
.hf-domain-bulk-summary h2 { margin: var(--hf-space-1) 0 0; }
.hf-domain-bulk-summary p { margin: var(--hf-space-2) 0 0; color: var(--hf-color-text-muted); }
.hf-domain-bulk-summary__list { display: flex; flex-wrap: wrap; gap: var(--hf-space-2); }
.hf-domain-bulk-form { display: grid; gap: var(--hf-space-4); }
.hf-domain-bulk-page__back { display: flex; justify-content: flex-start; }
[data-hf-custom-nameservers][data-active="false"] { opacity: .55; }
[data-hf-clearable-row][data-cleared="true"] { border-color: color-mix(in srgb, var(--hf-color-warning) 28%, var(--hf-color-border)); }

@media (max-width: 1100px) {
  .hf-domains__toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-domains__grid { grid-template-columns: 1fr; }
  .hf-domain-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-domain-addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-domain-registerns-grid { grid-template-columns: 1fr; }
  .hf-dns-record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-dns-record__value { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .hf-domains,
  .hf-domain-bulk-page { gap: var(--hf-space-4); }
  .hf-domains__toolbar { grid-template-columns: 1fr; padding: var(--hf-space-4); }
  .hf-domains__bulk { inset-block-start: auto; inset-block-end: calc(var(--hf-mobile-nav-height) + env(safe-area-inset-bottom) + var(--hf-space-2)); flex-direction: column; align-items: stretch; }
  .hf-domains__bulk-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-domain-card { padding: var(--hf-space-4); }
  .hf-domain-card__facts { grid-template-columns: 1fr; }
  .hf-domain-hero { align-items: stretch; flex-direction: column; padding: var(--hf-space-4); }
  .hf-domain-hero .hf-btn { inline-size: 100%; }
  .hf-domain-warning { align-items: stretch; flex-direction: column; }
  .hf-domain-tabs { inset-block-start: var(--hf-space-2); margin-inline: calc(var(--hf-space-4) * -1); border-inline: 0; border-radius: 0; }
  .hf-domain-section,
  .hf-domain-subpage { padding: var(--hf-space-4); }
  .hf-domain-info-grid,
  .hf-domain-ns-grid,
  .hf-contact-fields,
  .hf-domain-addon-grid { grid-template-columns: 1fr; }
  .hf-domain-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-domain-setting { align-items: flex-start; }
  .hf-dns-record { grid-template-columns: 1fr; padding: var(--hf-space-4); }
  .hf-dns-record__value { grid-column: auto; }
  .hf-dns-record .hf-btn { inline-size: 100%; }
  .hf-forwarder { grid-template-columns: 1fr; padding: var(--hf-space-4); }
  .hf-forwarder__arrow { display: none; }
  .hf-forwarder .hf-btn { inline-size: 100%; }
  .hf-domain-subpage-header { align-items: flex-start; }
  .hf-domain-bulk-summary { grid-template-columns: 1fr; padding: var(--hf-space-4); }
  .hf-domain-bulk-actions,
  .hf-domain-form__actions { display: grid; grid-template-columns: 1fr; }
  .hf-sensitive-value { grid-template-columns: 1fr; }
  .hf-sensitive-value .hf-btn { inline-size: 100%; }
  .hf-sensitive-value__feedback { grid-column: auto; }
}

@media (max-width: 430px) {
  .hf-domains__stats,
  .hf-domains__bulk-actions,
  .hf-domain-actions { display: grid; grid-template-columns: 1fr; }
  .hf-domains__stats span { justify-content: center; }
}