/* ==========================================================================
   Домены (list page) — home-style bento re-skin.
   ------------------------------------------------------------------------
   Reference: js/pages/home.js + css/pages/bento.css. Tiles reuse the .dtile
   chrome; this file lays them out as an asymmetric bento mosaic (hero + steps
   on the left, a tall orange add-domain promo on the right, a full-width table
   below) and styles the internals. All selectors scoped to .admin-main; values
   resolve to tokens (css/base/tokens.css) — the sole hardcode is the locked
   promo orange, mirroring bento.css .dtile--promo.
   NB1: inside .admin-main, --text is remapped to --text-strong (core.css bridge),
        so this file always names --text-strong / --text-muted explicitly.
   NB2: bento.css sets .dtile border-radius to var(--dash-radius), a variable
        defined only inside .dash — so it must be provided here or tiles render
        square. We both restore the var and set an explicit radius.
   ========================================================================== */

.admin-main .domains-page { container-type: inline-size; }

.admin-main .dom2 {
  --gap: 16px;
  --dash-radius: 18px;
  --dom-tile-h: clamp(84px, 7cqw, 96px);   /* shared height: header == one step tile */
  /* Shared left-column width: the hero (row 1) and the add-domain promo (row 2)
     use the exact same track so their left/right edges line up pixel-for-pixel.
     A non-fr length keeps both grids identical regardless of how many tiles fill
     the rest of each row. */
  --dom-col1: minmax(240px, 25.5cqw);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.admin-main .dom2 .dtile { border-radius: 18px; }
/* Row 1: ONE full-width strip — the header (wide, left) sits in the same grid
   row as the three square onboarding tiles. The squares (aspect-ratio:1) set the
   row height; the header stretches to match, so it reads the same height as the
   tiles without any fixed value. */
.admin-main .dom2-top {
  display: grid;
  grid-template-columns: var(--dom-col1) repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}
/* Row 2: narrow add-domain promo beside the wide domains table. Shares the
   left-column width with the hero above (--dom-col1) so the edges align. */
.admin-main .dom2-bottom {
  display: grid;
  grid-template-columns: var(--dom-col1) minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

/* ---- Header tile: wide, left of the step strip — title/subtitle left, Pepe
   bleeding into the bottom-right corner. Height inherited from the step tiles in
   the same grid row (align-items:stretch), matching --dom-tile-h. ------------- */
.admin-main .dom2-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
}
.admin-main .dom2-hero__text { position: relative; z-index: 2; min-width: 0; max-width: 66%; }
.admin-main .dom2-hero__title {
  margin: 0;
  font: 700 clamp(20px, 1.9cqw, 27px)/1.05 var(--font-ui);
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.admin-main .dom2-hero__sub {
  margin: 3px 0 0;
  font: 500 clamp(12px, 1cqw, 13px)/1.35 var(--font-ui);
  color: var(--text-muted);
}
.admin-main .dom2-hero__sticker {
  position: absolute;
  right: -4px;
  bottom: -6px;
  width: clamp(78px, 8cqw, 104px);
  height: clamp(78px, 8cqw, 104px);
  z-index: 1;
  pointer-events: none;
}
.admin-main .dom2-hero__sticker svg { display: block; width: 100% !important; height: 100% !important; }

/* ---- Onboarding steps: three equal-width, compact tiles (one row height).
   Number + text on the left, sticker standing at the bottom-right corner. ---- */
.admin-main .dom2-step {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow: hidden;
  padding: 14px 16px;
  min-height: var(--dom-tile-h);   /* same height as the header tile */
}
.admin-main .dom2-step__head {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-main .dom2-step__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  font: 700 14px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.admin-main .dom2-step__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-main .dom2-step__title {
  font: 700 clamp(13px, 1.12cqw, 15.5px)/1.2 var(--font-ui);
  letter-spacing: -.015em;
  color: var(--text-strong);
}
.admin-main .dom2-step__hint {
  font: 500 clamp(11px, .95cqw, 12.5px)/1.4 var(--font-ui);
  color: var(--text-muted);
}
.admin-main .dom2-step__sticker {
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(52px, 5cqw, 68px);
  margin: -14px -6px -14px 0;   /* slight bleed to the tile edges */
  display: grid;
  place-items: end center;
  pointer-events: none;
}
.admin-main .dom2-step__sticker svg { display: block; width: 100% !important; height: 100% !important; }

/* ---- Add-domain tile: reference orange promo (portrait, right column) ----
   Mirrors the home "Подключите новый домен" promo: white title + white copy,
   a WHITE pill button with dark text (the reference button), and the LadyCat
   bicep filling the space below the form. Locked orange in BOTH themes, so the
   text stays white with no light-theme override. Its own inline-size container
   → the internals scale in cqw-of-the-tile. */
.admin-main .dom2-add {
  position: relative;
  /* NB: no container-type here — otherwise @container (max-width:620px) resolves
     against this always-narrow tile and permanently hides the sticker. Its cqw
     units are all clamp()-bounded, so page-container resolution is fine. */
  align-self: start;              /* fixed height — do NOT stretch to the table */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(159deg, #ee4016 0%, #e93a10 56%, #e5380f 100%);
  border-color: #e5380f;
  color: #fff;
}
.admin-main .dom2-add__body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 5.6cqw, 26px);
}
.admin-main .dom2-add__title {
  margin: 0;
  font: 800 clamp(20px, 7.2cqw, 27px)/1.1 var(--font-ui);
  letter-spacing: -.02em;
  color: #fff;
}
html:not([data-theme="dark"]) .admin-main .dom2-add__title { color: #fff !important; }
.admin-main .dom2-add__desc {
  margin: 7px 0 clamp(14px, 3.8cqw, 18px);
  font: 500 clamp(13px, 3.9cqw, 15px)/1.4 var(--font-ui);
  color: #fff;
}
.admin-main .dom2-add__form { display: flex; flex-direction: column; gap: 10px; }
.admin-main .dom2-add__input {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border: 0 !important;         /* kill the admin dark-theme input border ring */
  border-radius: 999px;
  background: #fff !important;   /* locked white in both themes (beats admin input theming) */
  color: #191512 !important;
  font: 600 15px var(--font-ui);
  outline: none;
  box-shadow: 0 2px 8px rgba(120, 20, 0, .16) !important;
}
.admin-main .dom2-add__input::placeholder { color: #b7b0ab !important; font-weight: 500; }
.admin-main .dom2-add__input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.admin-main .dom2-add__btn {
  width: 100%;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #191512;
  font: 700 15px var(--font-ui);
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(90, 12, 0, .2);
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s ease;
}
.admin-main .dom2-add__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #191512;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.admin-main .dom2-add__btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(90, 12, 0, .26); }
.admin-main .dom2-add__btn:hover svg { transform: translateX(2px); }
.admin-main .dom2-add__btn:active { transform: translateY(0) scale(.98); }
.admin-main .dom2-add__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.admin-main .dom2-add__btn[disabled] { opacity: .65; cursor: default; transform: none; }
.admin-main .dom2-add__sticker {
  flex: 0 0 auto;
  height: clamp(122px, 15cqw, 158px);   /* fixed → add height independent of table */
  margin-top: 6px;
  display: grid;
  place-items: end center;
  pointer-events: none;
}
.admin-main .dom2-add__sticker svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 6px 10px rgba(90, 12, 0, .24));
}

/* ---- Domains table tile ------------------------------------------------- */
.admin-main .dom2-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 1.7cqw, 22px);
}
.admin-main .dom2-table__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-main .dom2-table__title {
  margin: 0;
  font: 700 clamp(15px, 1.3cqw, 18px)/1.2 var(--font-ui);
  letter-spacing: -.015em;
  color: var(--text-strong);
}
.admin-main .dom2-table__sub {
  margin: 3px 0 0;
  font: 500 clamp(11px, 1cqw, 13px)/1.4 var(--font-ui);
  color: var(--text-muted);
}
.admin-main .dom2-table__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* search pill */
.admin-main .dom2-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;   /* no border in any state — just the fill */
  border-radius: 999px;
  /* fill derived from text so it stays visible in BOTH themes (in dark,
     --bg-surface == --card-bg, so a token fill would be invisible). */
  background: color-mix(in srgb, var(--text-strong) 6%, var(--card-bg));
  color: var(--text-muted);
  transition: box-shadow .15s ease;
}
/* no focus ring on the search box — base border stays, no outline inside */
.admin-main .dom2-search__input:focus,
.admin-main .dom2-search__input:focus-visible { outline: none; box-shadow: none; }
.admin-main .dom2-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
.admin-main .dom2-search__input {
  /* beat the global `.admin-main input { border/background/border-radius !important }`
     (core.css) so the inner input is see-through & frameless — the .dom2-search
     pill is the single visible field. Without !important the global bordered box
     leaks a 6px-radius ring inside the pill (a "field inside a field"). */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  appearance: none;
  outline: none;
  box-shadow: none !important;
  width: clamp(120px, 15vw, 190px);
  min-width: 0;
  font: 500 13.5px var(--font-ui);
  color: var(--text-strong);
}
.admin-main .dom2-search__input::placeholder { color: var(--text-muted); }

/* segmented period control (mirrors bento.css .dchart__seg, theme-local props) */
.admin-main .dom2-seg {
  --sg-bg: #f0f1f3;
  --sg-active-bg: #ffffff;
  --sg-active-fg: #101319;
  --sg-shadow: 0 1px 2px rgba(16, 19, 25, .14), 0 0 0 .5px rgba(16, 19, 25, .05);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--sg-bg);
}
[data-theme="dark"] .admin-main .dom2-seg {
  --sg-bg: #2a323a;
  --sg-active-bg: #ffffff;
  --sg-active-fg: #12151a;
  --sg-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.admin-main .dom2-seg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  font: 600 12.5px var(--font-ui);
  color: var(--text-muted);
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.admin-main .dom2-seg__btn:hover { color: var(--text-strong); }
.admin-main .dom2-seg__btn.is-active { background: var(--sg-active-bg); color: var(--sg-active-fg); box-shadow: var(--sg-shadow); }
.admin-main .dom2-seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* table proper — fixed layout so the 6–7 columns always fit the tile width
   (no page-level horizontal scroll, no clipped ACTIONS column). Column shares
   below sum to 100% (super, 7 cols); when the worker column is absent the
   remaining columns scale up proportionally. Flexible text columns (domain,
   worker, nameservers) absorb the squeeze via ellipsis; reg+dep/status/date/
   actions keep enough room to render in full. */
.admin-main .dom2-table__body { min-height: 132px; }
.admin-main .dom2-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.admin-main .dom2-col--domain  { width: 15%; }
.admin-main .dom2-col--worker  { width: 11%; }
.admin-main .dom2-col--regdep  { width: 13%; }
.admin-main .dom2-col--status  { width: 11%; }
.admin-main .dom2-col--ns      { width: 17%; }
.admin-main .dom2-col--date    { width: 18%; }
.admin-main .dom2-col--actions { width: 15%; }
/* Narrow board (sidebar expanded on a 1440 screen and below): the three action
   buttons are 3x30px + gaps and cannot shrink, so a flat 15% starts clipping the
   delete icon. The nameserver pills truncate gracefully and already wrap to two
   rows, so they lend the width. */
@container (max-width: 1000px) {
  .admin-main .dom2-col--ns      { width: 14%; }
  .admin-main .dom2-col--actions { width: 18%; }
}
.admin-main .dom2-tbl thead th {
  padding: 0 9px 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 11px/1.2 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.admin-main .dom2-tbl thead th.dom2-th-actions,
.admin-main .dom2-row td:last-child { text-align: right; }
.admin-main .dom2-row { transition: background-color .14s ease; }
.admin-main .dom2-row td {
  padding: 11px 9px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 13px var(--font-ui);
  color: var(--text-strong);
}
.admin-main .dom2-row:last-child td { border-bottom: 0; }
.admin-main .dom2-row:not(.dom2-row--skel):hover { background: color-mix(in srgb, var(--text-strong) 4%, transparent); }

.admin-main .dom2-row__name {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-strong);
}
.admin-main .dom2-row__worker {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.admin-main .dom2-muted { color: var(--text-muted); }
.admin-main .dom2-row__date {
  color: var(--text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reg+Dep — two all-time figures stacked in one cell. A 2x2 grid (caption
   column + value column) keeps both numbers on a shared left edge, so the eye
   reads them as a pair instead of two loose strings. Deposit sum reuses the
   locked earnings-green from /users and /statistics; zero stays muted so a
   dead domain reads as dead at a glance. */
.admin-main .dom2-rd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 3px 7px;
}
.admin-main .dom2-rd__line { display: contents; }
.admin-main .dom2-rd__cap {
  font: 600 10px/1.4 var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-main .dom2-rd__num {
  min-width: 0;
  font: 600 12.5px/1.4 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-main .dom2-rd__num--dep { color: #05b200; }
.admin-main .dom2-rd__num.is-zero { color: var(--text-muted); font-weight: 500; }
.admin-main .dom2-rd__skel {
  display: block;
  width: 100%;
  max-width: 54px;
  height: 10px;
  align-self: center;
}

/* status pill */
.admin-main .dom2-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  font: 600 12px var(--font-ui);
  letter-spacing: -.01em;
}
.admin-main .dom2-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-main .dom2-status.is-active { color: var(--green); background: var(--green-bg); }
.admin-main .dom2-status.is-pending { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 15%, transparent); }

/* nameserver pills (copy on click) */
.admin-main .dom2-ns { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-main .dom2-ns__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  font: 500 12px var(--font-ui);
  font-variant-numeric: tabular-nums;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.admin-main .dom2-ns__pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-main .dom2-ns__pill svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .6; }
.admin-main .dom2-ns__pill:hover { border-color: var(--accent-border-soft); color: var(--text-strong); background: var(--accent-bg); }
.admin-main .dom2-ns__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-main .dom2-ns__pill.is-copied { border-color: var(--green); color: var(--green); background: var(--green-bg); }

/* row action icon buttons */
.admin-main .dom2-actions { display: inline-flex; gap: 4px; justify-content: flex-end; max-width: 100%; overflow: hidden; }
.admin-main .dom2-act {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.admin-main .dom2-act svg { width: 16px; height: 16px; }
.admin-main .dom2-act:hover { background: color-mix(in srgb, var(--text-strong) 6%, transparent); color: var(--text-strong); }
.admin-main .dom2-act--danger:hover { background: var(--red-bg); color: var(--red); }
.admin-main .dom2-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-main .dom2-act[disabled] { opacity: .5; cursor: default; }

/* NS-just-verified → pulse the pencil until the operator opens the editor */
@keyframes dom2-edit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-bg); border-color: var(--accent-border-soft); }
  50% { box-shadow: 0 0 0 5px transparent; border-color: var(--accent); }
}
.admin-main .dom2-act.domain-edit-pulse { color: var(--accent); animation: dom2-edit-pulse 1.5s ease-in-out infinite; }

/* skeleton (loading) */
.admin-main .dom2-skel__bar {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-strong) 10%, transparent);
  animation: dom2-skel 1.4s ease-in-out infinite;
}
.admin-main .dom2-skel__bar--act { width: 96px; height: 30px; border-radius: 9px; margin-left: auto; }
@keyframes dom2-skel { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }

/* empty / filter-empty / error states */
.admin-main .dom2-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 44px 20px;
  text-align: center;
}
.admin-main .dom2-state__ic { color: color-mix(in srgb, var(--text-muted) 55%, transparent); line-height: 0; }
.admin-main .dom2-state__ic svg { width: 50px; height: 50px; }
.admin-main .dom2-state.is-error .dom2-state__ic { color: color-mix(in srgb, var(--red) 70%, transparent); }
.admin-main .dom2-state__txt { font: 600 14px var(--font-ui); color: var(--text-strong); }
.admin-main .dom2-state__hint { max-width: 42ch; font: 500 12.5px var(--font-ui); color: var(--text-muted); }
.admin-main .dom2-state__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font: 600 12.5px var(--font-ui);
  transition: border-color .14s ease, background-color .14s ease;
}
.admin-main .dom2-state__btn svg { width: 15px; height: 15px; }
.admin-main .dom2-state__btn:hover { border-color: var(--accent-border-soft); background: var(--accent-bg); }
.admin-main .dom2-state__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* pagination (components.js markup, re-skinned) */
.admin-main .dom2-table__foot:empty { display: none; }
.admin-main .dom2-table .pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
  font: 500 12.5px var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.admin-main .dom2-table .pagination > span:first-child { margin-right: auto; }
.admin-main .dom2-table .page-num,
.admin-main .dom2-table .page-arrow {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-strong);
  cursor: pointer;
  font: 600 12.5px var(--font-ui);
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.admin-main .dom2-table .page-num.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.admin-main .dom2-table .page-num:not(.is-active):not([disabled]):hover,
.admin-main .dom2-table .page-arrow:not([disabled]):hover { border-color: var(--accent-border-soft); }
.admin-main .dom2-table .page-num[disabled],
.admin-main .dom2-table .page-arrow[disabled] { opacity: .45; cursor: default; }
.admin-main .dom2-table .page-size {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-strong);
  cursor: pointer;
  font: 500 12.5px var(--font-ui);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Tablet: single column. Hero + add tiles go landscape (text/form left,
   sticker on the right). */
@container (max-width: 1040px) {
  .admin-main .dom2-bottom { grid-template-columns: 1fr; }
  /* top strip returns to the original stack: header full-width above a 2-up
     step grid (i.e. "as it was" before the single-row desktop layout). */
  .admin-main .dom2-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-main .dom2-hero { grid-column: 1 / -1; }
  /* 3 steps in a 2-col grid → the last one is alone on its row; stretch it to
     the full width instead of leaving an empty right cell. */
  .admin-main .dom2-top > .dom2-step:last-child { grid-column: 1 / -1; }
  .admin-main .dom2-add {
    flex-direction: row;
    align-items: stretch;
  }
  .admin-main .dom2-add__body { flex: 1 1 auto; min-width: 0; max-width: 72%; }
  .admin-main .dom2-add__form { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .admin-main .dom2-add__input { flex: 1 1 240px; width: auto; }
  .admin-main .dom2-add__btn { flex: 0 0 auto; width: auto; padding: 0 26px; }
  .admin-main .dom2-add__sticker {
    position: absolute;
    right: 8px;
    bottom: 0;
    width: clamp(120px, 22cqw, 190px);
    height: 100%;
    min-height: 0;
    margin: 0;
  }
}

/* Phone: header + all three steps each full-width; add tile back to column
   (full-width input + button, no sticker), table becomes stacked cards. */
@container (max-width: 620px) {
  .admin-main .dom2-top { grid-template-columns: 1fr; }
  .admin-main .dom2-hero { grid-column: auto; }
  .admin-main .dom2-add { flex-direction: column; }
  .admin-main .dom2-add__body { max-width: 100%; }
  .admin-main .dom2-add__form { flex-direction: column; align-items: stretch; }
  .admin-main .dom2-add__input,
  .admin-main .dom2-add__btn { width: 100%; flex: none; }
  .admin-main .dom2-add__sticker { display: none; }

  .admin-main .dom2-tbl thead { display: none; }
  .admin-main .dom2-tbl,
  .admin-main .dom2-tbl tbody,
  .admin-main .dom2-tbl tr,
  .admin-main .dom2-tbl td { display: block; width: 100%; }
  .admin-main .dom2-row {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-strong) 3%, var(--card-bg));
    padding: 4px 2px;
    margin-bottom: 12px;
  }
  .admin-main .dom2-row:last-child { margin-bottom: 0; }
  .admin-main .dom2-row:not(.dom2-row--skel):hover { background: color-mix(in srgb, var(--text-strong) 3%, var(--card-bg)); }
  .admin-main .dom2-row td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    border: 0;
    text-align: right;
  }
  .admin-main .dom2-row td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font: 600 11px var(--font-ui);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .admin-main .dom2-ns { justify-content: flex-end; }
  .admin-main .dom2-rd { justify-content: flex-end; grid-template-columns: auto auto; }
  .admin-main .dom2-rd__skel { max-width: 46px; }
  .admin-main .dom2-row--skel td::before { content: none; }
}

@media (max-width: 620px) {
  /* full-width hero on phone → text can breathe; sticker stays a square corner.
     min-height guarantees the 92px sticker fits vertically even when the
     subtitle collapses to a single line (e.g. English "Domain management and
     landing setup"), otherwise the sticker's head clips against overflow:hidden. */
  .admin-main .dom2-hero { min-height: 100px; }
  .admin-main .dom2-hero__text { max-width: 72%; }
  .admin-main .dom2-hero__sticker { width: 92px; height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-main .dom2-skel__bar,
  .admin-main .dom2-act.domain-edit-pulse { animation: none; }
  .admin-main .dom2-add__btn,
  .admin-main .dom2-add__btn svg,
  .admin-main .dom2-row,
  .admin-main .dom2-ns__pill,
  .admin-main .dom2-act,
  .admin-main .dom2-seg__btn,
  .admin-main .dom2-search,
  .admin-main .dom2-state__btn,
  .admin-main .dom2-table .page-num,
  .admin-main .dom2-table .page-arrow { transition: none; }
}

/* ---- Shared domains ------------------------------------------------------
   The add-panel sits on a locked warm-accent card whose contents are white in
   both themes, so these controls follow that palette rather than the page
   tokens. The table chip does use the page tokens.                          */

.admin-main .dom2-add__type {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}
.admin-main .dom2-field { display: flex; flex-direction: column; gap: 5px; }
/* Explicit display means [hidden] alone would not hide it — the owner picker
   is hidden while «Общий домен» is checked (a shared domain has no owner). */
.admin-main .dom2-field[hidden] { display: none; }
.admin-main .dom2-field__lbl {
  font: 600 11px/1.3 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
}
.admin-main .dom2-add__select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 999px;
  background: #fff !important;
  color: #191512 !important;
  font: 600 13px var(--font-ui);
  outline: none;
}
.admin-main .dom2-add__select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.admin-main .dom2-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1.3 var(--font-ui);
  color: #fff;
  cursor: pointer;
}
.admin-main .dom2-check input { accent-color: #fff; margin: 0; width: 15px; height: 15px; }
.admin-main .dom2-add__typehint {
  margin: 0;
  font: 500 11.5px/1.45 var(--font-ui);
  color: rgb(255 255 255 / 0.8);
}

/* Table: «Общий» chip next to the hostname + the read-only placeholder that
   replaces the action buttons. */
.admin-main .dom2-chip--shared {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  font: 600 10.5px/1.4 var(--font-ui);
  white-space: nowrap;
  vertical-align: middle;
}
.admin-main .dom2-readonly {
  font: 500 11.5px/1.3 var(--font-ui);
  white-space: nowrap;
}

/* ── Add-domain: market design picker (dev-only, feature-flags.js) ───────── */
.admin-main .dom2-add__design {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.admin-main .dom2-add__design .dom2-add__typehint { margin: 0; }