/* ─── Screen scaffold ─────────────────────────────────────────────────────── */

.screen {
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(var(--safe-top) + var(--content-top) + 8px);
  padding-bottom: calc(80px + max(var(--safe-bottom), 12px));
}

.screen__body {
  max-width: 600px;
  margin: 0 auto;
  padding: 0.75rem 1rem 1.5rem;
}

.screen__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 20px;
}

.screen__title {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.screen__header .screen__title { margin: 0; }
.catalog-screen > .screen__header { margin-bottom: 12px; }
.catalog-screen > .bag-seg { margin-bottom: 10px; }

/* Pushed-view top bar: back chevron + title, left-aligned (e.g. "New site"). */
.screen__topbar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: -2px 0 20px -8px;
}
.screen__topbar .screen__title { margin: 0; }
/* Telegram owns the native back button, so pushed pages usually render no
   in-page chevron. Align those titles with section copy instead of retaining
   the negative margin reserved for the browser fallback button. */
.screen__topbar:not(:has(> .icon-btn--back)):not(.screen__topbar--center):not(.screen__topbar--domain) {
  margin-left: 6px;
}
/* Centered variant: the domain detail centers its .ton title (no back button in
   Telegram, so the title sits alone). */
.screen__topbar--center { justify-content: center; margin-left: 0; }
.screen__topbar--center .screen__title { text-align: center; }
.screen__topbar--domain {
  position: relative;
  min-height: 38px;
  padding: 0 44px;
}
.screen__topbar--domain .screen__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screen__topbar--domain > .icon-btn--back,
.screen__topbar--domain > .icon-btn--share { position: absolute; top: 0; }
.screen__topbar--domain > .icon-btn--back { left: 0; }
.screen__topbar--domain > .icon-btn--share { right: 0; }
.icon-btn--share svg { width: 23px; height: 23px; }

/* Compact TON DNS identity banner, matching the generated Subdomain NFT art. */
.dns-hero {
  position: relative;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  margin: -2px 0 14px;
  overflow: hidden;
  border-radius: 20px;
  background-color: #eef5f9;
}
.dns-hero--artwork {
  background-color: #15202a;
  background-position: center;
  background-size: cover;
}
.dns-hero__mark {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  color: #000;
}
.dns-hero__mark svg { display: block; width: 100%; height: 100%; }
.dns-hero__mark--with-back { left: 56px; }
.dns-hero__title {
  max-width: calc(100% - 76px);
  margin: 0;
  padding: 11px 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  color: #0c0c0c;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dns-hero__title--fit { overflow: visible; text-overflow: clip; }
.dns-hero__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dns-hero__control {
  position: absolute;
  top: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: #111;
}
.dns-hero__control:active { opacity: 0.6; }
.dns-hero__control svg { width: 24px; height: 24px; }
.dns-hero__control--back { left: 10px; }
.dns-hero__control--share { right: 10px; }

/* Circular icon button — the Sites "+" and the pushed-view back chevron. */
.icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--accent);
  transition: background 0.15s;
}
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn--back svg { width: 24px; height: 24px; }

/* Primary "New Tonsite" pill — solid TON blue, white text (Sites header). */
.btn-new {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.12s ease, opacity 0.12s;
}
.btn-new:active { transform: scale(0.96); opacity: 0.9; }
.btn-new:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-new svg { width: 20px; height: 20px; }
/* Two header actions (Pin + Create) side by side. */
.screen__header-actions { display: inline-flex; align-items: center; gap: 8px; }
/* Secondary "Pin" pill: same shape, quiet fill. */
.btn-new--ghost { padding: 0 14px; background: var(--section-bg); color: var(--text); }

.screen__lede {
  margin: -8px 4px 18px;
  color: var(--subtitle);
  font-size: 0.95rem;
  line-height: 1.45;
}
.screen__lede--section {
  margin: 4px 6px 16px;
  text-align: center;
}
.screen__lede--left { text-align: left; }

.tg-muted { color: var(--hint); }
.errtext { color: var(--destructive); }
.oktext { color: var(--ok); }
.screen__muted { margin: 0.25rem 0; color: var(--hint); }