:root {
  color-scheme: dark;
  --bg: #050509;
  --text: #f7f7fb;
  --muted: rgba(232, 232, 242, .56);
  --blue: #4c5dff;
  --cyan: #8290ff;
  --violet: #725cff;
  --danger: #ff453a;
  --hairline: rgba(255, 255, 255, .17);
  --glass: rgba(16, 17, 28, .3);
  --glass-strong: rgba(28, 30, 43, .46);
  --radius: 24px;
  /* Product UI tokens: one scale for type, spacing, radii and controls. */
  --font-caption: 12px;
  --font-meta: 13px;
  --font-body: 15px;
  --font-control: 15px;
  --font-section: 18px;
  --font-title: 22px;
  --line-caption: 16px;
  --line-meta: 18px;
  --line-body: 21px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-control: 14px;
  --radius-card: 18px;
  --radius-sheet: 28px;
  --radius-icon: 12px;
  --control-compact: 44px;
  --control-default: 48px;
  --glass-surface: rgba(15, 17, 30, .52);
  --glass-elevated: rgba(16, 18, 31, .68);
  --glass-overlay: rgba(17, 18, 29, .88);
  --focus-ring: rgba(169, 180, 255, .92);
  --gx: 50%;
  --gy: 0%;
  --stable-vh: 1vh;
  /* The OS inset may be reported by both WebKit and Telegram. Count it once,
     then reserve Telegram's separate content inset for its bottom controls. */
  --app-bottom-inset: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
}

@property --glow-strength {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  position: relative;
  margin: 0;
  min-height: calc(var(--stable-vh) * 100);
  overflow-x: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif;
  background:
    radial-gradient(85% 46% at 50% -8%, rgba(55, 68, 255, .1), transparent 72%),
    linear-gradient(180deg, #08080d 0%, #050509 58%, #090910 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::before {
  z-index: 0;
  top: calc(var(--stable-vh) * -8);
  left: 50%;
  width: min(118vw, 900px);
  height: calc(var(--stable-vh) * 92);
  opacity: .24;
  transform: translateX(-50%);
  filter: blur(42px) saturate(130%);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(36, 69, 255, .96) 0%, rgba(36, 57, 238, .62) 27%, rgba(15, 18, 79, .18) 56%, transparent 74%);
  animation:
    ambient-enter .55s ease-out .48s both,
    ambient-drift 14s ease-in-out 1.03s infinite alternate;
}

body::after {
  z-index: 0;
  inset: 0;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(117,137,255,.5) 0 1px, transparent 1.2px);
  background-position: 14px 22px, 43px 65px;
  background-size: 83px 91px, 127px 139px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 72%);
  animation: stars-enter .7s ease-out .15s both;
}

.human-scene {
  position: fixed;
  z-index: 0;
  top: calc(var(--stable-vh) * -3);
  left: 50%;
  width: min(100vw, 760px);
  height: calc(var(--stable-vh) * 106);
  pointer-events: none;
  transform: translate3d(-50%, 0, 0) scale(1.025);
  transform-origin: 50% 42%;
  opacity: .84;
  filter: saturate(115%) contrast(104%);
  mask-image: linear-gradient(90deg, transparent 0%, black 13%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 13%, black 100%);
}

.scene-stage,
.scene-lights,
.scene-actors {
  position: absolute;
  inset: 0;
}

.scene-stage {
  z-index: 0;
  inset: -8%;
  background: url("/static/assets/stage-unlit-v5.jpg") 50% 50% / auto 106% no-repeat;
  transform: translate3d(0, 5%, 0) scale(1.08);
  opacity: .8;
  filter: brightness(.86) saturate(.72);
  animation:
    stage-enter .38s cubic-bezier(.22,.8,.34,1) both,
    stage-breathe 18s ease-in-out .38s infinite alternate;
  will-change: transform;
}

.scene-lights {
  z-index: 1;
  isolation: isolate;
  mix-blend-mode: screen;
  animation: lights-enter .65s cubic-bezier(.2,.78,.26,1) .48s both;
}

.scene-lights::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 55%;
  bottom: 1.5%;
  width: 84%;
  height: 13%;
  transform: translateX(-50%) rotate(-5deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 62% 50%, rgba(176,188,229,.13), rgba(90,111,200,.075) 30%, rgba(41,59,140,.03) 56%, transparent 75%);
  filter: blur(18px);
}

.scene-lights::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 38%;
  left: 50%;
  width: 54%;
  height: 55%;
  transform: translateX(-50%);
  border-radius: 48%;
  background:
    radial-gradient(ellipse, rgba(150,165,220,.085), rgba(90,111,192,.038) 48%, transparent 76%);
  filter: blur(34px);
}

.moon-volume {
  position: absolute;
  z-index: 0;
  top: 8.2%;
  right: -2%;
  width: 106%;
  height: 86%;
  transform-origin: 93% 0;
  background:
    linear-gradient(180deg, rgba(210,219,246,.13) 0%, rgba(140,157,220,.085) 31%, rgba(82,104,193,.046) 62%, transparent 96%);
  clip-path: polygon(88.5% 0, 100% 0, 93% 100%, -8% 100%);
  filter: blur(19px);
  opacity: .68;
  animation: volume-breathe 9s ease-in-out infinite alternate;
}

.moon-volume::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(232,237,252,.19), rgba(148,164,225,.09) 37%, rgba(72,93,176,.025) 78%, transparent 98%);
  clip-path: polygon(91% 0, 99% 0, 82% 100%, 5% 100%);
  filter: blur(9px);
  opacity: .52;
}

.moon-volume::after {
  content: "";
  position: absolute;
  inset: -6% -5% 0 -10%;
  background:
    radial-gradient(ellipse at 84% 14%, rgba(213,222,249,.12), transparent 24%),
    radial-gradient(ellipse at 69% 42%, rgba(133,151,216,.07), transparent 38%),
    radial-gradient(ellipse at 54% 72%, rgba(76,99,187,.035), transparent 47%);
  filter: blur(25px);
  opacity: .78;
}

.moon-light {
  position: absolute;
  z-index: 2;
  top: 2.5%;
  right: -26px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: none;
  box-shadow:
    0 0 19px 5px rgba(195,205,236,.22),
    0 0 74px 30px rgba(69,91,186,.16);
  opacity: .8;
}

.moon-light img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  filter:
    brightness(.76)
    contrast(1.12)
    saturate(.7)
    drop-shadow(-5px 7px 12px rgba(11,17,43,.55));
}

.moon-light::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18px -25px -25px -34px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 62%, rgba(226,232,250,.23), rgba(122,140,207,.08) 31%, transparent 69%);
  filter: blur(11px);
}

.moon-light::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222,228,248,.21), rgba(92,111,194,.09) 32%, transparent 72%);
  filter: blur(9px);
}

.scene-actors {
  z-index: 2;
  animation: actors-drift 13s ease-in-out infinite alternate;
  will-change: transform;
}

.scene-people {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 5%;
  width: auto;
  height: 49%;
  transform: translateX(-50%);
  object-fit: contain;
  filter:
    brightness(1.16)
    contrast(1.08)
    saturate(1.12)
    drop-shadow(4px -1px 7px rgba(144, 161, 226, .18))
    drop-shadow(0 0 16px rgba(60, 83, 255, .14))
    drop-shadow(0 2px 3px rgba(0, 0, 0, .78));
  animation: people-enter .62s cubic-bezier(.18,.78,.25,1) .08s both;
}

.shadow-system {
  position: absolute;
  z-index: 1;
  inset: 0;
  animation: shadow-enter .55s ease-out .6s both;
}

.ground-shadow {
  position: absolute;
  z-index: 0;
  inset: 0;
  mix-blend-mode: multiply;
}

.ground-shadow::before,
.ground-shadow::after {
  content: "";
  position: absolute;
  top: 94.25%;
  height: 1.7%;
  transform-origin: 100% 50%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 34%, rgba(0,0,0,.5) 79%, rgba(0,0,0,.88) 100%);
  filter: blur(3px);
}

.ground-shadow::before {
  right: 62.5%;
  width: 34%;
  transform: translateY(-50%) rotate(-10deg);
}

.ground-shadow::after {
  right: 36.5%;
  width: 44%;
  transform: translateY(-50%) rotate(-9deg);
}

.contact-shadow {
  position: absolute;
  z-index: 1;
  top: 93.82%;
  left: 50%;
  width: 31%;
  height: 3.1%;
  transform: translateX(-50%);
}

.contact-shadow::before,
.contact-shadow::after {
  content: "";
  position: absolute;
  top: 0;
  width: 54%;
  height: 70%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(0,0,0,.98) 0 19%, rgba(0,0,0,.78) 39%, rgba(0,0,0,.32) 62%, transparent 78%);
  box-shadow: 0 -2px 4px rgba(0,0,0,.72);
  filter: blur(1.7px);
}

.contact-shadow::before {
  left: -2%;
  transform: rotate(4deg);
}

.contact-shadow::after {
  right: -2%;
  transform: rotate(-4deg);
}

@keyframes ambient-drift {
  from { transform: translate3d(-50%, -1.5%, 0) scale(1); }
  to { transform: translate3d(-50%, 2%, 0) scale(1.06); }
}

@keyframes ambient-enter {
  from { opacity: 0; }
  to { opacity: .24; }
}

@keyframes stars-enter {
  from { opacity: 0; }
  to { opacity: .28; }
}

@keyframes stage-enter {
  from {
    opacity: 0;
    filter: brightness(.25) saturate(.55) blur(8px);
  }
  to {
    opacity: .8;
    filter: brightness(.86) saturate(.72) blur(0);
  }
}

@keyframes lights-enter {
  from {
    opacity: 0;
    filter: brightness(.35) blur(10px);
  }
  to {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}

@keyframes volume-breathe {
  from { opacity: .57; }
  to { opacity: .7; }
}

@keyframes stage-breathe {
  from { transform: translate3d(0, 4.7%, 0) scale(1.08); }
  to { transform: translate3d(0, 5.3%, 0) scale(1.105); }
}

@keyframes people-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(.975);
    filter: brightness(.28) saturate(.5) blur(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter:
      brightness(1.16)
      contrast(1.08)
      saturate(1.12)
      drop-shadow(4px -1px 7px rgba(144, 161, 226, .18))
      drop-shadow(0 0 16px rgba(60, 83, 255, .14))
      drop-shadow(0 8px 10px rgba(0, 0, 0, .58));
  }
}

@keyframes shadow-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes actors-drift {
  from { transform: translate3d(-.45%, -.25%, 0); }
  to { transform: translate3d(.55%, .35%, 0); }
}

@keyframes interface-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.99);
    filter: brightness(.35) blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0);
  }
}

button, input, textarea, select { font: inherit; }
button {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition:
    transform .18s ease,
    filter .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    --glow-strength .34s ease-out;
}
button:disabled { opacity: .48; cursor: wait; }

.shell {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 15px calc(36px + var(--app-bottom-inset));
}

.topbar,
.section-heading,
.hero-heading,
.message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  position: relative;
  z-index: 30;
  min-height: 45px;
  padding: 0 3px;
  overflow: visible;
  isolation: isolate;
  animation: interface-enter .45s cubic-bezier(.2,.8,.25,1) .98s both;
}

.eyebrow {
  margin: 0 0 2px;
  color: rgba(235, 235, 245, .48);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  position: relative;
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -.055em;
  text-shadow:
    0 0 18px rgba(93, 110, 255, .22),
    0 1px 5px rgba(0, 0, 0, .32);
}
h1 span { color: #6572ff; }

.topbar > div {
  position: relative;
  isolation: isolate;
}

.topbar > div::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22px;
  left: -34px;
  width: 145px;
  height: 105px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,108,255,.22), rgba(43,58,221,.07) 46%, transparent 72%);
  filter: blur(13px);
}

.icon-button,
.language-button,
.language-menu,
.hero,
.search-wrap,
.mailbox-card,
.sheet,
.message,
.empty,
.field input,
.field textarea,
.quick-create input,
button.secondary,
button.ghost {
  border: 1px solid var(--hairline);
  background:
    radial-gradient(180px circle at var(--gx) var(--gy), rgba(143,152,255,calc(.24 * var(--glow-strength))), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.018) 46%, rgba(255,255,255,.04)),
    var(--glass);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 0 -1px 0 rgba(255,255,255,.045),
    0 18px 46px rgba(0,0,0,.34);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  transition: --glow-strength .34s ease-out;
}

.icon-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  color: var(--text);
  font-size: 22px;
  text-shadow: 0 1px 3px rgba(0,0,0,.22);
}

.language-picker {
  position: relative;
  z-index: 8;
}

.language-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 74px;
  height: 42px;
  padding: 0 9px;
  border-radius: 14px;
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .03em;
}

.language-chevron {
  margin-left: 4px;
  color: rgba(244,246,255,.58);
  font-size: 10px;
  transition: transform .18s ease;
}

.language-button[aria-expanded="true"] .language-chevron {
  transform: rotate(180deg);
}

.language-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 74px;
  padding: 5px;
  gap: 2px;
  border-color: rgba(255,255,255,.25);
  border-radius: 16px;
  background:
    radial-gradient(120px circle at var(--gx) var(--gy), rgba(132,143,255,calc(.2 * var(--glow-strength))), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.035) 48%),
    rgba(15,16,26,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.31),
    inset 0 -1px 0 rgba(255,255,255,.055),
    0 14px 42px rgba(0,0,0,.55),
    0 0 0 .5px rgba(127,139,255,.18);
  backdrop-filter: blur(34px) saturate(185%) contrast(108%);
  -webkit-backdrop-filter: blur(34px) saturate(185%) contrast(108%);
  animation: language-menu-enter .18s cubic-bezier(.2,.8,.25,1) both;
}

.language-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 760;
  text-align: left;
}

.language-option[aria-checked="true"] {
  background: rgba(107,119,255,.24);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}

@keyframes language-menu-enter {
  from { opacity: 0; transform: translateY(-5px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin: 16px 0 20px;
  padding: 14px;
  overflow: hidden;
  border-radius: 23px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.045),
    0 22px 60px rgba(0,0,0,.38),
    0 0 62px rgba(39,57,255,.14);
  animation: interface-enter .55s cubic-bezier(.2,.8,.25,1) 1.1s both;
}

.hero::before,
.mailbox-card::before,
.sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg, rgba(255,255,255,.105), transparent 24%, transparent 72%, rgba(104,111,255,.12)),
    radial-gradient(260px 65px at 24% -5%, rgba(255,255,255,.11), transparent 72%);
  opacity: .85;
}

.hero-heading { gap: 15px; margin-bottom: 12px; }
.hero #hello {
  margin: 0 0 3px;
  color: rgba(221, 222, 242, .66);
  font-size: 11px;
  font-weight: 700;
}
.hero h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.045em;
}

.limit-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 99px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.1);
  color: rgba(245,248,255,.65);
  font-size: 10px;
  font-weight: 750;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.plan-button {
  color: rgba(245,248,255,.68);
  white-space: nowrap;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  color: #fff;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-heading > div { flex: 0 0 auto; }
.hero-heading h2 { white-space: nowrap; }

.plan-badge.plan-free {
  background: rgba(255,255,255,.08);
  color: rgba(245,247,255,.72);
}

.plan-badge.plan-premium,
.plan-badge.plan-pro {
  border-color: rgba(137,153,255,.36);
  background: linear-gradient(145deg, rgba(94,111,255,.52), rgba(83,69,224,.28));
  box-shadow: 0 4px 14px rgba(65,78,255,.16);
}

.plan-badge.plan-vip,
.plan-badge.plan-ultra {
  border-color: rgba(255,218,119,.42);
  background: linear-gradient(145deg, rgba(255,204,90,.3), rgba(163,105,25,.18));
  color: #ffe7a4;
  box-shadow: 0 4px 16px rgba(255,185,64,.13);
}

.plan-badge.is-grace {
  border-color: rgba(255,168,78,.42);
  background: rgba(159,83,19,.23);
  color: #ffc984;
}

.quick-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.quick-create input {
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border-radius: 15px;
  outline: none;
  color: var(--text);
}
.quick-create input::placeholder { color: rgba(235,239,255,.42); }
.quick-create input:focus {
  border-color: rgba(120, 130, 255, .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 3px rgba(81,91,255,.18),
    0 14px 36px rgba(0,0,0,.2);
}

button.primary,
button.secondary,
button.ghost,
button.danger-button {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 15px;
  font-weight: 720;
}

button.primary {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(151, 158, 255, .5);
  color: white;
  background:
    radial-gradient(120px circle at var(--gx) var(--gy), rgba(255,255,255,calc(.4 * var(--glow-strength))), transparent 48%),
    linear-gradient(145deg, #6876ff, #4554f2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(21,28,153,.42),
    0 10px 30px rgba(52,65,255,.3);
  text-shadow: 0 1px 2px rgba(18,24,112,.3);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

button.secondary,
button.ghost {
  color: rgba(248,250,255,.92);
}

button.danger-button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,116,105,.34);
  color: #ffd0cc;
  background:
    radial-gradient(130px circle at var(--gx) var(--gy), rgba(255,255,255,calc(.28 * var(--glow-strength))), transparent 50%),
    linear-gradient(145deg, rgba(188,61,58,.4), rgba(95,31,43,.38));
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 12px 30px rgba(69,10,22,.2);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.random-button {
  width: 100%;
  min-height: 41px !important;
  margin-top: 7px;
  font-size: 12px;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 16px;
}

.muted,
.empty p,
.message-preview { color: var(--muted); }

.section {
  animation: interface-enter .58s cubic-bezier(.2,.8,.25,1) 1.22s both;
}

.section-heading {
  margin: 0 3px 10px;
}
.section-heading h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.count {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(28,29,40,.46);
  color: rgba(245,248,255,.68);
  font-size: 12px;
  font-weight: 750;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin-bottom: 7px;
  padding: 0 13px;
  border-radius: 16px;
  color: var(--muted);
}
.search-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.mailbox-list {
  display: grid;
  gap: 6px;
  /* One page scroller: a viewport-capped inner list can end below the visible
     WebView while trapping every swipe over its rows at the inner boundary. */
  max-height: none;
  overflow: visible;
}

.mailbox-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 8px 8px 8px 10px;
  overflow: hidden;
  border-radius: 17px;
  color: var(--text);
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, --glow-strength .34s ease-out;
}
.mailbox-card:active {
  transform: scale(.985);
  border-color: rgba(255,255,255,.34);
}

.copy-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background:
    radial-gradient(54px circle at var(--gx) var(--gy), rgba(255,255,255,calc(.46 * var(--glow-strength))), transparent 48%),
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.26), transparent 38%),
    linear-gradient(145deg, rgba(112,124,255,.72), rgba(70,82,240,.42));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 5px 18px rgba(54,66,255,.24);
  color: white;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.copy-button::before,
.copy-button::after {
  content: none;
}
.copy-button .ui-icon {
  width: 22px;
  height: 22px;
}
.copy-button:active {
  transform: scale(.9);
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.5), transparent 35%),
    linear-gradient(145deg, rgba(130,141,255,.76), rgba(73,86,246,.46));
}

.mailbox-copy,
.mailbox-open {
  min-width: 0;
}

.mailbox-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.mailbox-open:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(121,135,255,.48);
}

.mailbox-card.is-locked {
  border-color: rgba(255,170,92,.17);
}

.mailbox-card.is-locked .mailbox-email {
  color: rgba(245,247,255,.68);
}
.mailbox-email {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px;
  font-weight: 650;
}
.mailbox-status {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
  min-height: 16px;
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
}

.mailbox-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 15px;
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  color: rgba(242,245,255,.68);
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .065em;
  line-height: 1;
  text-transform: uppercase;
}

.mailbox-tag.premium,
.mailbox-tag.pro,
.mailbox-tag.primary-mailbox {
  border-color: rgba(117,135,255,.28);
  background: rgba(82,98,242,.19);
  color: #bfc7ff;
}

.mailbox-tag.vip,
.mailbox-tag.ultra,
.mailbox-tag.purchased {
  border-color: rgba(255,209,105,.3);
  background: rgba(202,137,31,.14);
  color: #ffe09a;
}

.mailbox-tag.read-only {
  border-color: rgba(255,161,78,.3);
  background: rgba(194,86,30,.13);
  color: #ffc08a;
}

.mailbox-tag.reserved {
  border-color: rgba(255,209,105,.28);
  background: rgba(174,118,28,.13);
  color: #f6d58c;
}

.mailbox-tag.shared {
  border-color: rgba(92,224,219,.3);
  background: rgba(36,160,173,.14);
  color: #aef8f2;
}

.mailbox-tag.primary-mailbox {
  border-color: rgba(132,154,255,.38);
  background: rgba(70,91,230,.22);
  color: #d8ddff;
}

.mailbox-status-text,
.mailbox-timer {
  min-width: 0;
  overflow: hidden;
  color: rgba(235,239,255,.43);
  font-size: 9px;
  text-overflow: ellipsis;
}

.mailbox-status-text.warning {
  color: rgba(255,204,137,.64);
}

.mailbox-timer {
  flex: 0 0 auto;
  color: #ffc782;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.mailbox-timer.is-expired {
  color: #ff8b82;
}

.mailbox-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 34px;
}

.access-button,
.purchase-button,
.delete-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  background:
    radial-gradient(54px circle at var(--gx) var(--gy), rgba(255,255,255,calc(.34 * var(--glow-strength))), transparent 48%),
    rgba(255,255,255,.07);
  color: rgba(242,245,255,.58);
  font-size: 14px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.access-button {
  color: rgba(195,205,255,.9);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: -.06em;
  background:
    radial-gradient(54px circle at var(--gx) var(--gy), rgba(255,255,255,calc(.38 * var(--glow-strength))), transparent 48%),
    linear-gradient(145deg, rgba(109,122,255,.2), rgba(255,255,255,.045));
}

.purchase-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,214,116,.18);
  border-radius: 50%;
  background:
    radial-gradient(54px circle at var(--gx) var(--gy), rgba(255,245,210,calc(.34 * var(--glow-strength))), transparent 48%),
    linear-gradient(145deg, rgba(255,205,96,.15), rgba(255,255,255,.04));
  color: #ffe1a0;
  font-size: 10px;
  font-weight: 820;
  box-shadow: inset 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.purchase-button:active {
  border-color: rgba(255,214,116,.4);
  background: rgba(255,197,76,.2);
}
.delete-button:active {
  border-color: rgba(255,69,58,.26);
  background: rgba(255,69,58,.19);
  color: #ff8d86;
}

.empty {
  padding: 31px 20px;
  text-align: center;
  border-radius: 22px;
}
.empty-mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(105,117,255,.3), rgba(255,255,255,.06));
  box-shadow: inset 0 1px rgba(255,255,255,.25);
  color: var(--cyan);
  font-size: 20px;
  font-weight: 800;
}
.empty h3 { margin-bottom: 7px; }
.empty p { margin-bottom: 0; line-height: 1.45; }

.backdrop {
  position: fixed;
  z-index: 10;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(1,1,6,.68);
  transition:
    opacity .3s ease,
    visibility 0s linear .3s;
}

.backdrop.is-open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.backdrop.account-backdrop {
  background: rgba(1,1,6,.52);
  backdrop-filter: blur(3px) saturate(118%);
  -webkit-backdrop-filter: blur(3px) saturate(118%);
}

.sheet {
  --drag-y: 14px;
  position: fixed;
  z-index: 11;
  isolation: isolate;
  top: 50%;
  left: 50%;
  bottom: auto;
  width: min(calc(100% - 28px), 620px);
  max-height: min(82vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) translateY(var(--drag-y)) scale(.955);
  padding: 12px 18px 20px;
  border-radius: 28px;
  background:
    radial-gradient(300px circle at var(--gx) var(--gy), rgba(103,115,255,calc(.2 * var(--glow-strength))), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.035)),
    rgba(18,19,29,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.055),
    0 28px 90px rgba(0,0,0,.58),
    0 0 0 .5px rgba(128,139,255,.16);
  backdrop-filter: blur(36px) saturate(180%) contrast(106%);
  -webkit-backdrop-filter: blur(36px) saturate(180%) contrast(106%);
  touch-action: pan-y;
  pointer-events: none;
  transition:
    opacity .3s ease,
    transform .38s cubic-bezier(.2,.82,.24,1),
    visibility 0s linear .38s;
  will-change: transform, opacity;
}

.sheet.is-open {
  --drag-y: 0px;
  visibility: visible;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translateY(var(--drag-y)) scale(1);
  pointer-events: auto;
  transition-delay: 0s;
}

.sheet.account-sheet {
  background:
    radial-gradient(340px circle at var(--gx) var(--gy), rgba(118,132,255,calc(.28 * var(--glow-strength))), transparent 54%),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.025) 48%, rgba(89,104,255,.035)),
    rgba(14,15,27,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(135,146,255,.12),
    0 30px 96px rgba(0,0,0,.55),
    0 0 0 .5px rgba(166,176,255,.24);
  backdrop-filter: blur(40px) saturate(190%) contrast(108%);
  -webkit-backdrop-filter: blur(40px) saturate(190%) contrast(108%);
}

.sheet.is-dragging {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .human-scene,
  .scene-stage,
  .scene-lights,
  .moon-volume,
  .moon-light,
  .scene-actors,
  .scene-people,
  .shadow-system,
  .topbar,
  .hero,
  .section {
    animation: none;
  }
}

.grabber {
  width: 38px;
  height: 5px;
  margin: 0 auto 15px;
  border-radius: 99px;
  background: rgba(255,255,255,.34);
  box-shadow: inset 0 1px rgba(255,255,255,.2);
  cursor: grab;
  touch-action: none;
}

.modal-close {
  position: sticky;
  z-index: 3;
  top: 0;
  float: right;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -2px -4px -38px 10px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
    rgba(24,25,36,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 8px 24px rgba(0,0,0,.28);
  color: rgba(248,249,255,.9);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.modal-open {
  overflow: hidden;
}

#sheetContent {
  min-width: 0;
  max-width: 100%;
  padding-top: 2px;
  overflow-x: hidden;
}

.hidden { display: none !important; }
.sheet h2 {
  max-width: 100%;
  margin-bottom: 11px;
  padding-right: 42px;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: clamp(18px, 6vw, 24px);
  line-height: 1.14;
  letter-spacing: -.04em;
}

.field {
  display: grid;
  gap: 7px;
  margin: 15px 0;
}
.field label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 15px;
  border-radius: 16px;
  color: var(--text);
  outline: none;
}

.quick-create input,
.search-wrap input,
.field input,
.field textarea {
  font-size: 16px;
}
.field textarea { min-height: 138px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  border-color: rgba(132,141,255,.62);
  box-shadow: 0 0 0 3px rgba(82,94,255,.17);
}

.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 17px;
}

.sheet-actions > button:only-child {
  grid-column: 1 / -1;
}

.loading {
  padding: 34px;
  text-align: center;
  color: var(--muted);
}
.message-list {
  display: grid;
  min-width: 0;
  gap: 5px;
}
.message {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  padding: 9px 11px;
  overflow: hidden;
  border-radius: 14px;
  color: var(--text);
  text-align: left;
}
.message-meta {
  min-width: 0;
  gap: 7px;
  margin-bottom: 3px;
}
.message-from,
.message-subject {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-from {
  flex: 1 1 auto;
  color: var(--cyan);
  font-size: 10px;
}
.message-subject {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.message-date { flex: 0 0 auto; color: var(--muted); font-size: 10px; }

.message-sheet-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  gap: 9px;
  padding-right: 38px;
  margin-bottom: 10px;
}

.message-sheet-title {
  min-width: 0;
}

.message-sheet-title .letter-address {
  max-width: 100%;
  margin-bottom: 4px;
}

.message-sheet-title h2 {
  margin-bottom: 0;
}

.message-heading-actions {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
  gap: 5px;
}

.message-heading-actions button.tiny {
  min-height: 36px !important;
  padding-inline: 10px !important;
  white-space: nowrap;
}

.message-selection-bar {
  margin-bottom: 7px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 15px;
  background:
    radial-gradient(170px circle at var(--gx) var(--gy), rgba(143,152,255,calc(.22 * var(--glow-strength))), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025)),
    rgba(16,18,31,.48);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 12px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
}

.message-selection-bar > strong {
  display: block;
  margin: 0 2px 7px;
  color: rgba(244,246,255,.78);
  font-size: 11px;
}

.message-selection-controls,
.message-all-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.message-selection-controls button.tiny {
  flex: 1 1 auto;
  min-height: 38px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-all-controls {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.09);
}

.message-all-action {
  min-height: 32px;
  padding: 2px 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(203,210,255,.75);
  font-size: 10px;
  font-weight: 720;
}

.message-all-action.is-danger {
  color: #ffaaa4;
}

.message-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 5px;
  border-radius: 14px;
  transition: background .18s ease, box-shadow .18s ease;
}

.message-list.is-selecting .message-row {
  grid-template-columns: 38px minmax(0, 1fr);
}

.message-row.is-selected {
  background: rgba(92,106,255,.11);
  box-shadow: 0 0 0 1px rgba(129,141,255,.2);
}

.message-open {
  min-height: 52px;
}

.message-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.message-row-action,
.message-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  color: rgba(229,233,255,.78);
  background:
    radial-gradient(90px circle at var(--gx) var(--gy), rgba(143,152,255,calc(.22 * var(--glow-strength))), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)),
    rgba(18,20,34,.5);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 8px 22px rgba(0,0,0,.2);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  font-size: 18px;
  font-weight: 760;
}

.message-row-action.is-danger {
  border-color: rgba(255,111,105,.24);
  color: #ffaaa4;
}

.message-select {
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
}

.message-select[aria-pressed="true"] {
  border-color: rgba(159,169,255,.68);
  background: linear-gradient(145deg, #7180ff, #4c5af0);
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 7px 20px rgba(62,76,255,.32);
}

.message-trash-meta {
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255,184,176,.62);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-sheet-footer {
  position: sticky;
  z-index: 2;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(to top, rgba(9,10,18,.82) 58%, transparent);
}

.message-confirm {
  padding: 6px 2px 2px;
  text-align: center;
}

.message-confirm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border: 1px solid rgba(146,157,255,.35);
  border-radius: 17px;
  color: #bec6ff;
  background: linear-gradient(145deg, rgba(116,130,255,.28), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 12px 32px rgba(35,45,145,.22);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  font-size: 25px;
}

.message-confirm-mark.is-danger {
  border-color: rgba(255,111,105,.3);
  color: #ffb5ae;
  background: linear-gradient(145deg, rgba(181,58,57,.32), rgba(255,255,255,.03));
}

.message-confirm h2 {
  margin-bottom: 7px;
}

.message-confirm .muted {
  max-width: 330px;
  margin: 0 auto 14px;
  line-height: 1.45;
}

.letter-body {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: text;
  -webkit-touch-callout: default;
  -webkit-user-select: text !important;
  user-select: text !important;
  white-space: pre-wrap;
  touch-action: auto;
  pointer-events: auto;
  line-height: 1.55;
  color: rgba(246,248,255,.84);
}

.email-document-shell {
  position: relative;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  background:
    radial-gradient(180px circle at var(--gx) var(--gy), rgba(144,155,255,calc(.2 * var(--glow-strength))), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.025)),
    rgba(17,19,33,.38);
  box-shadow:
    inset 0 1px rgba(255,255,255,.28),
    inset 0 -1px rgba(119,132,255,.1),
    0 18px 44px rgba(0,0,0,.24);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
}

.email-security-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px 9px;
  color: rgba(226,231,255,.72);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.3;
}

.email-security-note span {
  color: #9da9ff;
  font-size: 13px;
}

.email-document-frame {
  display: block;
  width: 100%;
  height: min(56vh, 680px);
  min-height: 240px;
  max-height: 5000px;
  border: 0;
  border-radius: 14px;
  outline: 1px solid rgba(255,255,255,.18);
  background: #fff;
  color-scheme: light;
  touch-action: pan-y;
  -webkit-user-select: text;
  user-select: text;
}

.email-text-fallback {
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
    rgba(13,15,27,.42);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.email-text-fallback summary {
  cursor: pointer;
  color: rgba(231,235,251,.72);
  font-size: 12px;
  font-weight: 760;
  -webkit-user-select: none;
  user-select: none;
}

.email-text-fallback .letter-body {
  margin-top: 10px;
}
.letter-address {
  display: block;
  max-width: calc(100% - 44px);
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: text;
  -webkit-touch-callout: default;
  -webkit-user-select: text !important;
  user-select: text !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: var(--cyan);
  font-size: 11px;
}

.sheet #sheetContent > h2,
.sheet > #sheetContent > .muted {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: text;
  -webkit-touch-callout: default;
  -webkit-user-select: text !important;
  user-select: text !important;
}

.sheet.is-selectable,
.sheet.is-selectable #sheetContent {
  -webkit-touch-callout: default;
  -webkit-user-select: text !important;
  user-select: text !important;
}

.sheet.is-selectable button,
.sheet.is-selectable .grabber {
  -webkit-user-select: none !important;
  user-select: none !important;
}

.plan-sheet-heading,
.purchase-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 44px;
}

.plan-sheet-heading h2,
.purchase-heading h2 {
  margin-bottom: 0;
}

.purchase-heading {
  display: block;
}

.purchase-heading .mailbox-tag,
.purchase-heading .status-pill {
  margin-bottom: 8px;
}

.sheet-kicker {
  margin: 0 0 4px;
  color: rgba(209,214,255,.56);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.plan-validity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 8px;
  padding: 0 2px;
  color: rgba(240,243,255,.68);
  font-size: 10px;
}

.plan-validity span:last-child {
  min-width: 0;
  overflow: hidden;
  color: rgba(240,243,255,.48);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}

.plan-stats > div,
.policy-card,
.promo-panel,
.purchase-price,
.quote-card,
.admin-card,
.admin-result {
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025) 52%),
    rgba(19,20,31,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 34px rgba(0,0,0,.2);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.plan-stats > div {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 56px;
  padding: 9px;
  border-radius: 15px;
}

.plan-stats strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(250,251,255,.94);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-stats span {
  margin-top: 3px;
  color: rgba(226,230,248,.43);
  font-size: 8px;
}

.policy-card {
  margin: 8px 0;
  padding: 11px 12px;
  border-radius: 16px;
}

.policy-card p {
  margin: 0;
  color: rgba(236,239,252,.64);
  font-size: 10.5px;
  line-height: 1.45;
}

.policy-card.grace-policy {
  border-color: rgba(255,166,83,.24);
  background:
    linear-gradient(145deg, rgba(255,169,87,.12), rgba(255,255,255,.02)),
    rgba(30,22,22,.68);
}

.policy-card.danger-policy {
  border-color: rgba(255,92,83,.22);
  background:
    linear-gradient(145deg, rgba(255,89,82,.11), rgba(255,255,255,.02)),
    rgba(29,19,23,.68);
}

.access-choice-grid,
.access-list {
  display: grid;
  gap: 7px;
}

.access-choice-grid {
  margin: 13px 0;
}

.access-choice,
.access-list-row,
.access-notice,
.invite-link-box {
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.025)),
    rgba(17,19,31,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
}

.access-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 55px;
  padding: 8px 10px;
  border-radius: 16px;
  color: rgba(247,249,255,.92);
  text-align: left;
}

.access-choice > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(148,162,255,.24);
  border-radius: 50%;
  background: rgba(85,102,243,.16);
  color: #c8d0ff;
}

.access-choice div,
.access-list-row > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.access-choice strong,
.access-list-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.access-choice small,
.access-list-row small,
.access-notice p {
  margin: 0;
  color: rgba(229,233,250,.5);
  font-size: 10px;
  line-height: 1.35;
}

.access-choice.transfer-choice {
  border-color: rgba(255,119,108,.22);
  background:
    linear-gradient(145deg, rgba(255,104,95,.1), rgba(255,255,255,.022)),
    rgba(28,18,25,.65);
}

.access-section {
  margin-top: 14px;
}

.access-section h3 {
  margin: 0 2px 7px;
  color: rgba(239,242,255,.76);
  font-size: 11px;
}

.access-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 14px;
}

.compact-row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

@media (max-width: 430px) {
  .access-list-row:has(.compact-row-actions) {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .access-list-row:has(.compact-row-actions) > div:first-child {
    width: 100%;
  }

  .compact-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

button.tiny {
  min-height: 30px !important;
  padding: 0 9px !important;
  border-radius: 10px !important;
  font-size: 10px;
}

.access-notice {
  margin: 10px 0;
  padding: 10px 11px;
  border-radius: 15px;
}

.access-notice strong {
  display: block;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.compact-copy {
  margin: 5px 2px 0;
  font-size: 10px;
}

.invite-link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 7px;
  border-radius: 17px;
}

.invite-link-box input {
  min-width: 0;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(235,240,255,.74);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
}

.invite-link-box button {
  min-height: 38px;
  padding: 0 11px;
  font-size: 10px;
}

.primary-availability {
  margin: 8px 2px 0;
  color: rgba(196,205,255,.72);
  font-size: 10px;
  font-weight: 700;
}

.tariff-catalog {
  margin-top: 12px;
}

.tariff-catalog > h3 {
  margin: 0 0 7px 2px;
  color: rgba(238,241,255,.82);
  font-size: 12px;
}

.tariff-grid {
  display: grid;
  gap: 6px;
}

.tariff-card {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
    rgba(16,17,28,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.tariff-card.is-current {
  border-color: rgba(128,145,255,.42);
  background:
    linear-gradient(145deg, rgba(102,121,255,.17), rgba(255,255,255,.025)),
    rgba(18,20,39,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 8px 24px rgba(54,67,194,.13);
}

.tariff-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tariff-card-heading strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(250,251,255,.94);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tariff-card p {
  margin: 6px 0 0;
  color: rgba(227,231,249,.5);
  font-size: 9px;
  line-height: 1.38;
}

.tariff-action {
  width: 100%;
  min-height: 44px !important;
  margin-top: 8px;
  padding-inline: 10px !important;
  border-radius: 13px !important;
  font-size: 11px;
}

.tariff-current {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-top: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(135,150,255,.24);
  border-radius: 99px;
  background: rgba(97,112,255,.12);
  color: rgba(215,221,255,.72);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.personal-domain-panel {
  margin-top: 9px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 19px;
  background:
    radial-gradient(220px circle at var(--gx) var(--gy), rgba(126,140,255,calc(.22 * var(--glow-strength))), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.018) 52%),
    rgba(17,18,31,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.27),
    inset 0 -1px 0 rgba(115,128,255,.08),
    0 14px 38px rgba(0,0,0,.22);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
}

.personal-domain-panel.pending-load {
  opacity: .72;
}

.domain-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 10px;
}

.domain-search-row input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  outline: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(12,13,22,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.1);
  color: var(--text);
  font-size: 16px;
}

.domain-search-row input:focus {
  border-color: rgba(123,136,255,.6);
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    0 0 0 3px rgba(78,91,255,.14);
}

.domain-search-row button {
  min-height: 44px !important;
  padding-inline: 14px !important;
  border-radius: 13px !important;
  font-size: 12px;
}

.domain-upgrade {
  min-height: 46px !important;
  margin-top: 10px;
  font-size: 12px;
}

.domain-offer,
.personal-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 7px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background:
    radial-gradient(160px circle at var(--gx) var(--gy), rgba(126,140,255,calc(.2 * var(--glow-strength))), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
    rgba(11,12,22,.4);
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    0 9px 26px rgba(0,0,0,.15);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.domain-offer > div,
.personal-domain-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.domain-offer strong,
.personal-domain-row strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(245,247,255,.84);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-offer small,
.personal-domain-row small {
  color: rgba(231,234,249,.46);
  font-size: 10px;
  line-height: 1.35;
}

.domain-offer button {
  flex: 0 0 auto;
  min-height: 44px !important;
  padding-inline: 12px !important;
  border-radius: 13px !important;
  font-size: 11px;
}

.personal-domain-actions {
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 5px !important;
}

.domain-renew {
  min-height: 44px !important;
  padding-inline: 11px !important;
  border-radius: 12px !important;
  font-size: 10px;
}

.personal-domain-list h4 {
  margin: 10px 2px 1px;
  color: rgba(239,242,255,.68);
  font-size: 11px;
}

.status-pill.ready {
  border-color: rgba(91,219,164,.28);
  background: rgba(39,155,110,.14);
  color: #9aefc9;
}

.status-pill.paused {
  border-color: rgba(255,190,92,.26);
  background: rgba(178,115,32,.14);
  color: #ffd49a;
}

.domain-error {
  margin: 8px 2px 0;
  color: rgba(255,178,169,.78);
  font-size: 10.5px;
  line-height: 1.35;
}

.compact-loading {
  padding: 10px 2px 1px;
  font-size: 10.5px;
}

.promo-panel {
  margin-top: 9px;
  padding: 12px;
  border-radius: 17px;
}

.promo-copy h3,
.admin-card h3 {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: -.015em;
}

.promo-copy p {
  margin: 0;
  color: rgba(229,233,249,.46);
  font-size: 9.5px;
  line-height: 1.4;
}

.promo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 10px;
}

.promo-row input,
.admin-fields input,
.admin-fields select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  outline: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(12,13,22,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.1);
  color: var(--text);
  font-size: 16px;
}

.admin-fields select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(235,239,255,.58) 50%),
    linear-gradient(135deg, rgba(235,239,255,.58) 50%, transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  background-position:
    calc(100% - 15px) 18px,
    calc(100% - 10px) 18px,
    0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}

.promo-row input:focus,
.admin-fields input:focus,
.admin-fields select:focus {
  border-color: rgba(123,136,255,.6);
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    0 0 0 3px rgba(78,91,255,.14);
}

.promo-row .primary {
  min-height: 42px;
  padding-inline: 13px;
  border-radius: 13px;
  font-size: 11px;
}

.admin-entry,
.full-button {
  width: 100%;
}

.admin-entry {
  min-height: 41px !important;
  margin-top: 9px;
  font-size: 11px;
}

.purchase-price {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 12px;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 17px;
}

.purchase-price span {
  color: rgba(231,234,249,.55);
  font-size: 10px;
}

.purchase-price strong {
  grid-row: span 2;
  color: #ffe6a9;
  font-size: 24px;
  letter-spacing: -.045em;
}

.purchase-price small,
.compact-field small {
  color: rgba(231,234,249,.42);
  font-size: 9px;
}

.compact-field {
  gap: 6px;
  margin-bottom: 0;
}

.compact-field input {
  min-height: 44px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.status-pill.pending {
  border-color: rgba(255,202,98,.28);
  background: rgba(208,139,29,.14);
  color: #ffdc94;
}

.order-id {
  margin: -3px 0 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 9px;
}

.quote-card {
  margin: 10px 0 8px;
  padding: 7px 12px;
  border-radius: 17px;
}

.quote-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 31px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  color: rgba(231,234,249,.52);
  font-size: 10px;
}

.quote-card > div:last-child {
  border-bottom: 0;
}

.quote-card strong {
  color: rgba(249,250,255,.9);
  font-variant-numeric: tabular-nums;
}

.quote-card .quote-total {
  min-height: 39px;
  color: rgba(249,250,255,.82);
  font-weight: 760;
}

.quote-card .quote-total strong {
  color: #ffe09a;
  font-size: 15px;
}

.commerce-payment-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
}

.commerce-payment-actions button {
  min-height: 39px;
  padding-inline: 8px;
  border-radius: 12px;
  font-size: 8.5px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.admin-card {
  min-width: 0;
  padding: 11px;
  border-radius: 17px;
}

.admin-fields {
  display: grid;
  gap: 7px;
  margin: 9px 0;
}

.admin-fields.two-columns {
  grid-template-columns: 1fr 1fr;
}

.admin-fields label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.admin-fields label > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(225,229,247,.48);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-card .full-button {
  min-height: 39px;
  border-radius: 13px;
  font-size: 10px;
}

.admin-result {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 10px;
  margin: 8px 0;
  padding: 10px 11px;
  border-color: rgba(121,137,255,.25);
  border-radius: 16px;
}

.admin-result span {
  color: rgba(228,232,250,.48);
  font-size: 8px;
}

.admin-result code {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: #cbd1ff;
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-result button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 36px;
  padding-inline: 11px;
  border-radius: 12px;
  font-size: 9px;
}

.retention-card {
  margin-top: 8px;
}

.retention-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-back {
  min-height: 41px !important;
  margin-top: 8px;
  font-size: 10px;
}

.recently-deleted {
  margin: 9px 0;
}

.recently-deleted > h3 {
  margin: 0 2px 6px;
  color: rgba(239,242,255,.68);
  font-size: 10px;
}

.deleted-list,
.pending-orders {
  display: grid;
  gap: 5px;
}

.deleted-row,
.pending-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(12,13,22,.52);
}

button.pending-order-open {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

button.pending-order-open:hover,
button.pending-order-open:focus-visible {
  border-color: rgba(142,151,255,.42);
  background: rgba(37,40,70,.68);
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 10px 28px rgba(35,43,128,.2);
}

button.pending-order-open:active {
  transform: scale(.992);
}

.deleted-row > div,
.pending-order > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.deleted-email,
.pending-order strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(245,247,255,.79);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deleted-row small,
.pending-order small {
  color: rgba(231,234,249,.44);
  font-size: 8.5px;
}

.deleted-row small strong {
  color: #ffc982;
  font-variant-numeric: tabular-nums;
}

.restore-button,
.pending-order button {
  flex: 0 0 auto;
  min-height: 32px !important;
  padding-inline: 9px !important;
  border-radius: 11px !important;
  font-size: 8.5px;
}

.compact-empty {
  margin: 0;
  padding: 8px 2px 2px;
  font-size: 9px;
}

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100% - 34px);
  padding: 12px 16px;
  transform: translateX(-50%);
  border: 1px solid rgba(143,151,255,.42);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(111,123,255,.96), rgba(71,84,239,.92)),
    rgba(73,84,238,.92);
  box-shadow:
    inset 0 1px rgba(255,255,255,.8),
    0 16px 50px rgba(0,0,0,.35);
  color: #fff;
  font-size: 12px;
  font-weight: 720;
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
}

.top-actions {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-actions::after {
  display: none;
}

.user-menu-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 112px;
  min-height: 44px;
  gap: 6px;
  padding: 0 7px 0 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background:
    radial-gradient(74px circle at var(--gx) var(--gy), rgba(154,165,255,calc(.38 * var(--glow-strength))), transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.025)),
    rgba(18,19,31,.54);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.045),
    0 12px 30px rgba(0,0,0,.3);
  color: var(--text);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
}

.user-menu-button::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: 12px;
  background: linear-gradient(130deg, rgba(255,255,255,.13), transparent 42%);
}

.user-menu-glyph {
  position: relative;
  z-index: 1;
  margin-left: auto;
  color: rgba(240,243,255,.62);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.user-menu-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  color: rgba(248,249,255,.93);
  font-size: 14px;
  font-weight: 820;
  line-height: 1.2;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-avatar,
.account-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(181,190,255,.4);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.52), transparent 29%),
    linear-gradient(145deg, rgba(112,126,255,.88), rgba(61,72,214,.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 5px 14px rgba(46,56,183,.34);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.account-header {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  margin: 1px 0 12px;
  padding-right: 46px;
}

.account-header > div,
.profile-summary > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.account-header h2 {
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-header small,
.profile-summary small {
  overflow: hidden;
  color: rgba(231,235,251,.66);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-avatar {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.account-avatar-large {
  width: 48px;
  height: 48px;
  font-size: 17px;
}

.account-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-menu-item {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  min-height: 82px;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  background:
    radial-gradient(150px circle at var(--gx) var(--gy), rgba(142,155,255,calc(.34 * var(--glow-strength))), transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.018) 48%, rgba(101,116,255,.04)),
    rgba(12,14,27,.3);
  box-shadow:
    inset 0 1px rgba(255,255,255,.31),
    inset 0 -1px rgba(119,132,255,.1),
    0 12px 30px rgba(0,0,0,.21),
    0 0 0 .5px rgba(130,144,255,.1);
  color: var(--text);
  text-align: left;
  backdrop-filter: blur(28px) saturate(185%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(185%) brightness(1.04);
  transition: transform .2s ease, border-color .24s ease, box-shadow .24s ease;
}

.account-menu-item::before,
.account-menu-item::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.account-menu-item::before {
  inset: 1px;
  border-radius: 14px;
  background: linear-gradient(128deg, rgba(255,255,255,.17), transparent 34%, transparent 70%, rgba(115,129,255,.035));
}

.account-menu-item::after {
  right: 13%;
  bottom: 1px;
  left: 13%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(146,158,255,.48), transparent);
  box-shadow: 0 -1px 8px rgba(101,116,255,.2);
}

.account-menu-item > * {
  position: relative;
  z-index: 1;
}

.account-menu-icon,
.surface-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(157,168,255,.25);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(103,118,255,.3), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.21);
  color: #cbd2ff;
  font-size: 17px;
  font-weight: 820;
}

.account-menu-icon {
  border-color: rgba(187,196,255,.34);
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 31%),
    linear-gradient(145deg, rgba(103,118,255,.26), rgba(255,255,255,.025)),
    rgba(72,86,220,.18);
  box-shadow:
    inset 0 1px rgba(255,255,255,.3),
    0 6px 16px rgba(47,58,190,.18);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}

.surface-card-icon {
  width: 27px;
  height: 27px;
  font-size: 12px;
}

.account-menu-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.account-menu-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(250,251,255,.97);
}

.account-menu-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(231,235,251,.72);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.account-menu-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 3px 6px;
  border: 1px solid rgba(137,151,255,.24);
  border-radius: 99px;
  background: rgba(83,99,233,.15);
  color: rgba(225,229,255,.88);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .05em;
}

.account-menu-item.has-badge .account-menu-copy {
  padding-right: 48px;
}

.account-menu-chevron {
  align-self: end;
  color: rgba(231,235,251,.33);
  font-size: 20px;
  line-height: 1;
}

.profile-summary,
.wallet-balance-card,
.security-card,
.support-chat-preview,
.surface-card,
.help-rule {
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.02)),
    rgba(18,19,30,.62);
  box-shadow:
    inset 0 1px rgba(255,255,255,.19),
    0 12px 30px rgba(0,0,0,.2);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.profile-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: 18px;
}

.profile-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surface-stat-list {
  display: grid;
  gap: 0;
  margin-top: 8px;
  padding: 2px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 17px;
  background: rgba(11,12,21,.48);
}

.surface-stat-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.surface-stat-list > div:last-child {
  border-bottom: 0;
}

.surface-stat-list span {
  color: rgba(231,235,251,.48);
  font-size: 9px;
}

.surface-stat-list strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(250,251,255,.88);
  font-size: 10px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-balance-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 19px;
}

.wallet-balance-card > span {
  color: rgba(231,235,251,.52);
  font-size: 9px;
}

.wallet-balance-card > strong {
  color: #eef0ff;
  font-size: 30px;
  letter-spacing: -.045em;
}

.wallet-balance-card > small {
  margin-bottom: 6px;
  color: rgba(231,235,251,.42);
  font-size: 9px;
  line-height: 1.4;
}

.topup-sku-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.topup-sku {
  display: grid;
  justify-items: start;
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(133,147,255,.22);
  border-radius: 14px;
  background:
    radial-gradient(120px circle at var(--gx) var(--gy), rgba(126,140,255,calc(.25 * var(--glow-strength))), transparent 48%),
    linear-gradient(145deg, rgba(99,114,255,.15), rgba(255,255,255,.025)),
    rgba(15,17,31,.62);
  color: var(--text);
  text-align: left;
}

.topup-sku strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topup-sku small {
  color: rgba(231,235,251,.47);
  font-size: 8px;
}

.history-panel,
.domain-browser {
  margin-top: 10px;
}

.history-panel > h3,
.surface-section-heading h3 {
  margin: 0 0 7px 2px;
  color: rgba(244,246,255,.77);
  font-size: 11px;
}

.history-list,
.settings-list,
.available-domain-list,
.help-rule-list {
  display: grid;
  gap: 6px;
}

.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    rgba(12,13,22,.54);
}

.history-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.history-row > div:first-child {
  flex: 1 1 auto;
}

.history-row strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(247,249,255,.84);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-row small {
  overflow: hidden;
  color: rgba(231,235,251,.4);
  font-size: 7.8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-value {
  flex: 0 0 auto;
  justify-items: end;
}

.history-value .status-pill {
  min-height: 17px;
  padding: 2px 5px;
  font-size: 6.5px;
}

.status-pill.paid,
.status-pill.active,
.status-pill.completed {
  border-color: rgba(77,218,156,.25);
  background: rgba(38,159,109,.13);
  color: #9befc8;
}

.status-pill.cancelled,
.status-pill.canceled,
.status-pill.expired,
.status-pill.refunded {
  border-color: rgba(255,125,115,.24);
  background: rgba(189,63,58,.12);
  color: #ffb4ae;
}

.surface-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
}

.surface-card > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.surface-card strong {
  font-size: 10px;
}

.surface-card small {
  color: rgba(231,235,251,.43);
  font-size: 8.5px;
  line-height: 1.38;
}

.surface-card-column {
  grid-template-columns: 1fr;
}

.inline-language-options {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px !important;
  margin-top: 4px;
}

.inline-language-options button {
  min-width: 0;
  min-height: 32px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 8px;
}

.setting-toggle {
  min-width: 46px;
  min-height: 27px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 99px;
  background: rgba(255,255,255,.055);
  color: rgba(235,238,253,.48);
  font-size: 7px;
  font-weight: 850;
}

.setting-toggle.is-on {
  border-color: rgba(81,222,159,.3);
  background: rgba(39,164,111,.19);
  color: #a7f1ce;
}

.mail-settings-form {
  gap: 9px;
}

.mail-settings-form label {
  display: grid;
  gap: 5px;
}

.mail-settings-form label > span {
  color: rgba(231,235,251,.48);
  font-size: 8px;
  font-weight: 720;
}

.mail-settings-form input[type="text"],
.mail-settings-form input[type="email"],
.mail-settings-form select {
  width: 100%;
  min-width: 0;
  height: var(--control-compact);
  min-height: var(--control-compact);
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  outline: 0;
  background: rgba(10,11,20,.6);
  color: var(--text);
  font-size: 16px;
}

.mail-setting-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 7px !important;
}

.setting-check {
  display: flex !important;
  align-items: flex-start;
  grid-template-columns: none !important;
  gap: 7px !important;
}

.setting-check input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #6776ff;
}

.setting-check span {
  line-height: 1.35;
}

.capability-note {
  margin-top: -4px;
  color: rgba(255,191,123,.55) !important;
  font-size: 7.7px !important;
}

.surface-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.domain-disclosure {
  border-color: rgba(255,203,102,.17);
}

.domain-filter {
  position: sticky;
  z-index: 2;
  top: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin: 2px 0 7px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02)),
    rgba(12,14,26,.78);
  box-shadow:
    inset 0 1px rgba(255,255,255,.17),
    0 8px 24px rgba(0,0,0,.16);
  color: rgba(223,228,249,.54);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
}

.domain-filter:focus-within {
  border-color: rgba(126,140,255,.5);
  box-shadow:
    inset 0 1px rgba(255,255,255,.2),
    0 0 0 3px rgba(85,99,255,.13);
}

.domain-filter > span,
.domain-filter .ui-icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.domain-filter input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.domain-filter input::-webkit-search-cancel-button {
  opacity: .66;
}

.domain-scroll-list {
  display: grid;
  gap: 5px;
  max-height: min(44vh, 360px);
  padding: 1px 3px 2px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-color: rgba(153,164,255,.32) transparent;
  scrollbar-width: thin;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.domain-scroll-list .domain-choice {
  content-visibility: auto;
  contain-intrinsic-size: auto 60px;
}

.domain-scroll-list::-webkit-scrollbar {
  width: 4px;
}

.domain-scroll-list::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(153,164,255,.32);
}

.domain-plan-lock {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid rgba(255,205,116,.2);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,202,107,.075), rgba(255,255,255,.015)),
    rgba(15,16,28,.56);
  box-shadow: inset 0 1px rgba(255,255,255,.13);
}

.domain-plan-lock-icon,
.domain-preference-lock {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,207,120,.18);
  border-radius: 13px;
  background: rgba(255,190,78,.08);
  color: rgba(255,219,154,.72);
}

.domain-plan-lock-icon .ui-icon,
.domain-preference-lock .ui-icon {
  width: 19px;
  height: 19px;
}

.domain-plan-lock > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.domain-plan-lock strong {
  color: rgba(246,247,255,.82);
  font-size: 13px;
  line-height: 17px;
}

.domain-plan-lock small {
  color: rgba(231,235,251,.48);
  font-size: 12px;
  line-height: 16px;
}

.domain-plan-lock button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  gap: 6px;
  padding: 0 11px !important;
  border-radius: 12px !important;
  font-size: 12px;
  white-space: nowrap;
}

.domain-plan-lock button .ui-icon {
  width: 16px;
  height: 16px;
}

.domain-choice {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 60px;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background:
    radial-gradient(140px circle at var(--gx) var(--gy), rgba(121,136,255,calc(.24 * var(--glow-strength))), transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.012)),
    rgba(12,13,22,.4);
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    0 9px 25px rgba(0,0,0,.14);
  color: var(--text);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.domain-choice.is-locked {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.01)),
    rgba(12,13,22,.36);
}

.domain-choice.preference-preferred {
  border-color: rgba(125,141,255,.42);
  background:
    linear-gradient(145deg, rgba(97,112,255,.18), rgba(255,255,255,.02)),
    rgba(17,19,37,.63);
}

.domain-choice.preference-hidden {
  border-color: rgba(255,134,124,.16);
  opacity: .7;
}

.domain-choice > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.domain-choice strong {
  overflow: hidden;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-choice small {
  color: rgba(231,235,251,.4);
  font-size: 10px;
}

.domain-favorite {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(100,116,255,.12);
  color: #c9d0ff;
  font-size: 15px;
}

.domain-favorite .ui-icon {
  width: 18px;
  height: 18px;
}

.domain-choice.preference-hidden .domain-favorite {
  background: rgba(190,72,67,.13);
  color: #ffb2ac;
}

.domain-preference-note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px 3px;
}

.domain-preference-note span {
  max-width: 67%;
  color: rgba(231,235,251,.42);
  font-size: 10px;
  line-height: 1.35;
}

.domain-preference-note strong {
  color: rgba(203,211,255,.57);
  font-size: 9.5px;
  font-weight: 780;
  text-align: right;
}

.domain-preference-controls {
  display: inline-grid;
  grid-template-columns: repeat(3, 44px);
  min-width: 0;
  max-width: 100%;
  gap: 4px;
}

.domain-preference-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: rgba(233,237,255,.45);
  font-size: 14px;
}

.domain-preference-controls button.is-active {
  border-color: rgba(139,153,255,.38);
  background: rgba(93,108,244,.22);
  box-shadow: inset 0 1px rgba(255,255,255,.2);
  color: #e6e9ff;
}

.domain-preference-controls button[data-domain-state="hidden"].is-active {
  border-color: rgba(255,128,118,.3);
  background: rgba(188,65,59,.17);
  color: #ffb5af;
}

.domain-preference-controls button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.invite-pagination {
  margin-top: 13px;
}

@media (max-width: 420px) {
  .domain-choice:not(.is-locked) {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .domain-choice:not(.is-locked) .domain-preference-controls {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .domain-choice:not(.is-locked) .domain-preference-controls button {
    min-width: 44px;
    width: 100%;
  }
}

.invite-pagination button {
  min-height: 40px;
  font-size: 11px;
}

.invite-pagination span {
  font-size: 10px;
}

.security-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
}

.security-card > div {
  min-width: 0;
}

.security-card strong {
  font-size: 11px;
}

.security-card p {
  margin: 4px 0 0;
  color: rgba(231,235,251,.44);
  font-size: 8.5px;
  line-height: 1.38;
}

.security-orb {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(141,155,255,.31);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.35), transparent 30%),
    linear-gradient(145deg, rgba(100,117,255,.38), rgba(50,59,175,.18));
  box-shadow: inset 0 1px rgba(255,255,255,.27);
  color: #d7dcff;
}

.placeholder-flow {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 7px 9px;
}

.placeholder-flow > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(135,149,255,.26);
  border-radius: 50%;
  background: rgba(86,101,235,.14);
  color: #cbd2ff;
  font-size: 9px;
  font-weight: 800;
}

.placeholder-flow > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 4px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.placeholder-flow strong {
  font-size: 10px;
}

.placeholder-flow small {
  color: rgba(231,235,251,.43);
  font-size: 8.5px;
  line-height: 1.4;
}

.support-chat-preview {
  min-height: 170px;
  padding: 11px;
  border-radius: 18px;
}

.support-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(231,235,251,.42);
  font-size: 8px;
}

.support-state span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffbb67;
  box-shadow: 0 0 10px rgba(255,174,76,.44);
}

.chat-bubble {
  max-width: 82%;
  margin-top: 17px;
  padding: 10px 11px;
  border: 1px solid rgba(130,145,255,.2);
  border-radius: 15px 15px 15px 5px;
  background: rgba(84,99,226,.14);
  color: rgba(241,244,255,.72);
  font-size: 9px;
  line-height: 1.48;
}

.support-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 7px;
}

.support-composer textarea {
  min-width: 0;
  min-height: 42px;
  max-height: 90px;
  padding: 11px 12px;
  resize: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  outline: 0;
  background: rgba(14,15,25,.62);
  color: var(--text);
  font-size: 16px;
}

.support-composer button {
  min-height: 42px;
  padding-inline: 13px;
  border-radius: 13px;
}

.referral-code-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.025)),
    rgba(15,17,31,.38);
  box-shadow:
    inset 0 1px rgba(255,255,255,.26),
    0 12px 30px rgba(0,0,0,.17);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}

.referral-code-card > span {
  color: rgba(231,235,251,.68);
  font-size: 11px;
}

.referral-code-card code {
  grid-column: 1;
  overflow: hidden;
  color: #d7ddff;
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-link {
  display: flex;
  align-items: center;
  grid-column: 1;
  min-width: 0;
  min-height: var(--control-compact);
  overflow: hidden;
  color: #cdd5ff;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: rgba(157,170,255,.48);
  text-underline-offset: 3px;
}

.referral-code-card button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 34px;
  padding-inline: 9px;
  border-radius: 11px;
  font-size: 11px;
}

.promo-share-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 11px;
  margin: 12px 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 24px;
  background:
    radial-gradient(125% 88% at 3% -6%, rgba(190,199,255,.18), transparent 42%),
    radial-gradient(80% 68% at 103% 108%, rgba(86,103,255,.18), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 48%, rgba(104,118,255,.055)),
    rgba(12,14,27,.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(117,133,255,.12),
    0 18px 46px rgba(0,0,0,.24),
    0 0 0 .5px rgba(153,164,255,.12);
  backdrop-filter: blur(30px) saturate(185%) contrast(106%);
  -webkit-backdrop-filter: blur(30px) saturate(185%) contrast(106%);
}

.admin-result.promo-share-result {
  display: block;
  margin: 10px 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.promo-share-code,
.promo-share-link-row {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 5px;
}

.admin-result.promo-share-result .promo-share-code span,
.admin-result.promo-share-result .promo-share-link-row span {
  color: rgba(228,232,250,.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-result.promo-share-result .promo-share-code code {
  grid-column: auto;
  overflow: visible;
  color: #eef0ff;
  font-size: 16px;
  font-weight: 820;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.promo-share-preview {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 3px 0;
}

.promo-share-note {
  width: 100%;
  margin: 0;
  color: rgba(226,230,248,.55);
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
}

.promo-share-panel::before,
.promo-share-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.promo-share-panel::before {
  inset: 1px;
  border-radius: 22px;
  background:
    linear-gradient(116deg, rgba(255,255,255,.2), rgba(255,255,255,.045) 24%, transparent 47%),
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 28%, transparent 72%, rgba(91,106,255,.075));
  opacity: .82;
}

.promo-share-panel::after {
  right: -78px;
  bottom: -92px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,108,255,.22), rgba(69,83,219,.08) 42%, transparent 72%);
  filter: blur(17px);
}

.promo-share-panel > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.promo-share-canvas {
  display: block;
  width: min(100%, 260px);
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 22px;
  background:
    radial-gradient(circle at 76% 12%, rgba(129,145,255,.3), transparent 27%),
    linear-gradient(155deg, #11152f, #070812 58%, #0d1026);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 18px 38px rgba(0,0,0,.34),
    0 0 26px rgba(75,91,236,.12);
  -webkit-user-drag: none;
  user-select: none;
}

.promo-share-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
  width: 100%;
}

.promo-share-actions > * {
  min-width: 0;
  min-height: 43px;
  padding: 9px 11px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-result.promo-share-result .promo-share-actions > button {
  grid-column: auto;
  grid-row: auto;
}

.promo-share-actions > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.promo-activation-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  overflow: hidden;
  border: 1px solid rgba(173,184,255,.31);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(129,143,255,.19), rgba(255,255,255,.035)),
    rgba(20,23,48,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 9px 24px rgba(0,0,0,.18);
  color: #dce2ff;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 7px rgba(35,45,136,.35);
  touch-action: manipulation;
  transition:
    transform .18s ease,
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

.promo-activation-link::after {
  content: none;
}

.promo-activation-link > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.promo-activation-link .ui-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: rgba(226,231,255,.72);
}

.promo-activation-link:focus-visible {
  outline: 2px solid rgba(177,188,255,.92);
  outline-offset: 2px;
}

.promo-activation-link:active {
  transform: scale(.985);
}

.support-ticket-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.support-ticket-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  min-width: 0;
  gap: 7px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background:
    radial-gradient(140px circle at var(--gx) var(--gy), rgba(126,140,255,calc(.24 * var(--glow-strength))), transparent 48%),
    rgba(13,14,24,.58);
  color: var(--text);
  text-align: left;
}

.support-ticket-row > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.support-ticket-row strong,
.support-ticket-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-ticket-row strong {
  font-size: 10px;
}

.support-ticket-row small {
  color: rgba(231,235,251,.42);
  font-size: 8px;
}

.support-thread {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 190px;
  max-height: 390px;
  padding: 9px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  background: rgba(7,8,15,.45);
}

.support-message {
  display: grid;
  align-self: flex-start;
  max-width: 84%;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px 14px 14px 5px;
  background: rgba(255,255,255,.055);
}

.support-message.is-own {
  align-self: flex-end;
  border-color: rgba(126,141,255,.24);
  border-radius: 14px 14px 5px 14px;
  background: rgba(86,102,232,.17);
}

.support-message span {
  overflow-wrap: anywhere;
  color: rgba(247,249,255,.8);
  font-size: 9.5px;
  line-height: 1.45;
}

.support-message small {
  color: rgba(231,235,251,.36);
  font-size: 7px;
}

.help-rule {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px;
  border-radius: 16px;
}

.help-rule > span {
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 0 5px;
  border: 1px solid rgba(146,159,255,.26);
  border-radius: 11px;
  background: rgba(86,102,239,.15);
  color: #d7dcff;
  font-size: 9px;
  font-weight: 850;
}

.help-rule strong {
  font-size: 10px;
}

.help-rule p {
  margin: 3px 0 0;
  color: rgba(231,235,251,.45);
  font-size: 8.5px;
  line-height: 1.45;
}

.surface-back {
  min-height: 39px !important;
  margin-top: 9px;
  font-size: 9px;
}

.shop-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-order-row .compact-confirm {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 7px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0 10px;
}

.permission-grid label {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(9,10,18,.4);
}

.permission-grid input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #6675ff;
}

.permission-grid span {
  min-width: 0;
  overflow: hidden;
  color: rgba(229,233,250,.55);
  font-size: 7.3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-result,
.admin-user-mailboxes {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.admin-workspace-grid .account-menu-item:last-child {
  grid-column: 1 / -1;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover:not(:active) {
    transform: translateY(-1px);
    filter: brightness(1.09) saturate(1.08);
    border-color: rgba(145, 154, 255, .48);
  }

  .copy-button:hover:not(:active) {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.58),
      0 7px 22px rgba(74,87,255,.38);
  }

  .delete-button:hover:not(:active) {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 7px 20px rgba(100,120,180,.18);
    color: rgba(255,255,255,.84);
  }

  .account-menu-item:hover:not(:active) {
    transform: translateY(-1px);
    filter: none;
    border-color: rgba(177,187,255,.48);
    box-shadow:
      inset 0 1px rgba(255,255,255,.38),
      inset 0 -1px rgba(126,140,255,.14),
      0 15px 36px rgba(0,0,0,.25),
      0 0 22px rgba(86,101,255,.12);
  }

  .promo-activation-link:hover {
    transform: translateY(-1px);
    border-color: rgba(188,198,255,.55);
    background:
      linear-gradient(145deg, rgba(143,157,255,.25), rgba(255,255,255,.055)),
      rgba(24,27,56,.42);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      0 12px 29px rgba(0,0,0,.23),
      0 0 21px rgba(82,98,246,.13);
  }
}

.account-menu-item:active {
  transform: scale(.985);
  filter: none;
}

@media (max-width: 420px) {
  .shell { padding-inline: 12px; }
  .hero { padding: 13px; margin-top: 13px; }
  .quick-create .primary { padding-inline: 13px; }
  .top-actions { gap: 5px; }
  .language-button,
  .language-menu { width: 70px; }
  .user-menu-button { width: 108px; }
  .actions { grid-template-columns: 1fr; }
  .admin-grid,
  .admin-fields.two-columns { grid-template-columns: 1fr; }
  .plan-stats { gap: 4px; }
  .plan-stats > div { padding-inline: 7px; }

  .message-sheet-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .message-heading-actions {
    justify-content: flex-start;
  }

  .message-heading-actions button.tiny {
    flex: 1 1 auto;
  }

  .message-selection-controls button.tiny {
    min-height: 40px !important;
  }

  .message-row-action,
  .message-select {
    width: 36px;
    height: 40px;
    border-radius: 11px;
  }

  .message-select {
    border-radius: 50%;
  }

  .message-list.is-selecting .message-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .personal-domain-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .personal-domain-row > div:first-child {
    flex: 1 1 170px;
  }

  .personal-domain-actions {
    flex: 1 0 100%;
    justify-content: flex-end;
  }

  .promo-share-panel {
    gap: 9px;
    margin-block: 10px;
    padding: 12px;
    border-radius: 21px;
  }

  .promo-share-panel::before {
    border-radius: 19px;
  }

  .promo-share-canvas {
    width: min(100%, 220px);
    border-radius: 19px;
  }

  .promo-share-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .promo-share-actions > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .promo-share-actions > *,
  .promo-activation-link {
    min-height: 42px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .domain-search-row {
    grid-template-columns: 1fr;
  }

  .domain-plan-lock {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .domain-plan-lock button {
    grid-column: 2;
    justify-self: start;
  }

  .domain-choice {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .domain-choice.is-locked {
    grid-template-columns: 36px minmax(0, 1fr) 44px;
  }

  .domain-preference-controls {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .domain-preference-controls button {
    width: 100%;
  }

  .domain-preference-note {
    display: grid;
  }

  .domain-preference-note span {
    max-width: none;
  }

  .domain-preference-note strong {
    text-align: left;
  }

  .domain-offer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .domain-offer > div {
    flex: 1 1 100%;
  }

  .domain-offer button {
    width: 100%;
  }
}

/* Personal mailbox tags --------------------------------------------------- */

.mailbox-custom-tags {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 68%;
  gap: 3px;
  overflow: hidden;
}

.mailbox-custom-tags--narrow {
  display: none;
}

.mailbox-status:has(.mailbox-custom-tags) > .mailbox-status-text {
  flex: 1 1 0;
  order: 3;
}

.mailbox-status:has(.mailbox-custom-tags) > .mailbox-timer {
  order: 3;
}

.mailbox-status:has(.mailbox-custom-tags) > .mailbox-tag {
  order: 1;
}

.mailbox-status:has(.mailbox-custom-tags) > .mailbox-custom-tags {
  order: 2;
}

.mailbox-tag.custom-mailbox-tag {
  --tag-color: #7c83ff;
  --tag-rgb: 124,131,255;
  max-width: 62px;
  min-height: 15px;
  padding: 0 5px;
  overflow: hidden;
  border-color: rgba(var(--tag-rgb), .42);
  background:
    linear-gradient(145deg, rgba(var(--tag-rgb), .25), rgba(var(--tag-rgb), .1)),
    rgba(15, 17, 30, .52);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 2px 8px rgba(var(--tag-rgb), .08);
  color: var(--tag-color);
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 14px;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.mailbox-tag.custom-mailbox-tag.tag-overflow {
  flex: 0 0 auto;
  max-width: none;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: rgba(239,242,255,.68);
}

.tag-sheet-kicker {
  width: fit-content;
  max-width: 140px !important;
  margin-bottom: 6px;
}

.tag-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 12px;
}

.tag-create-form input,
.tag-rename-input {
  width: 100%;
  min-width: 0;
  height: var(--control-compact);
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  outline: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.02)),
    rgba(12, 14, 25, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.11);
  color: var(--text);
  font-size: 16px;
}

.tag-create-form input:focus,
.tag-rename-input:focus {
  border-color: rgba(126,139,255,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 0 0 3px rgba(92,104,255,.13);
}

.tag-create-form .primary {
  min-height: var(--control-compact);
  padding-inline: 13px;
  font-size: 12px;
  white-space: nowrap;
}

.tag-color-fieldset {
  min-width: 0;
  margin: 11px 0;
  padding: 0;
  border: 0;
}

.tag-color-fieldset legend {
  margin-bottom: 6px;
  color: rgba(232,236,252,.58);
  font-size: 12px;
  font-weight: 700;
}

.tag-color-palette {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  justify-content: space-between;
  gap: 4px 7px;
}

.tag-color-choice {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.tag-color-choice > span {
  width: 23px;
  height: 23px;
  border: 1px solid rgba(var(--tag-rgb), .68);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.5), transparent 33%),
    var(--tag-color);
  box-shadow: 0 4px 13px rgba(var(--tag-rgb), .24);
}

.tag-color-choice.is-selected {
  border-color: rgba(var(--tag-rgb), .62);
  background: rgba(var(--tag-rgb), .12);
}

.tag-color-choice.is-selected > span {
  box-shadow: 0 0 0 3px rgba(9,10,18,.72), 0 0 0 5px rgba(var(--tag-rgb), .62);
}

.tag-manager-list {
  display: grid;
  gap: 5px;
  max-height: min(264px, 34vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.tag-manager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.016)),
    rgba(15,17,29,.54);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}

.tag-manager-row.is-editing {
  gap: 3px;
  padding-left: 4px;
}

.tag-rename-input {
  height: 38px;
  font-size: 14px;
}

.tag-assignment {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 44px;
  padding: 0 6px;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-align: left;
}

.tag-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: transparent;
}

.tag-check .ui-icon { width: 14px; height: 14px; }

.tag-assignment.is-selected .tag-check {
  border-color: rgba(129,144,255,.58);
  background: linear-gradient(145deg, rgba(107,121,255,.88), rgba(65,78,225,.72));
  color: white;
  box-shadow: 0 4px 12px rgba(66,78,238,.22);
}

.tag-manager-preview {
  max-width: min(100%, 116px) !important;
}

.tag-icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(225,230,250,.58);
}

.tag-icon-button .ui-icon { width: 17px; height: 17px; }
.tag-icon-button.confirm { color: #bfc7ff; }
.tag-icon-button.danger { color: rgba(255,173,168,.65); }

.tag-sheet-actions {
  margin-top: 10px;
}

@media (max-width: 360px) {
  .mailbox-tag.custom-mailbox-tag { max-width: 50px; }
  .mailbox-custom-tags { max-width: 64%; }
  .tag-create-form .primary { padding-inline: 10px; }
  .tag-color-palette { gap-inline: 2px; }
  .tag-manager-preview { max-width: 86px !important; }
}

@media (max-width: 340px) {
  .mailbox-custom-tags--wide {
    display: none;
  }

  .mailbox-custom-tags--narrow {
    display: inline-flex;
    flex: 0 0 auto;
    max-width: 86px;
  }

  .mailbox-custom-tags--narrow .custom-mailbox-tag:not(.tag-overflow) {
    max-width: 52px;
  }
}

@media (max-width: 480px) {
  .account-menu-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 340px) {
  .eyebrow { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .language-button,
  .language-menu { width: 66px; }
  .user-menu-button { width: 104px; }
  .user-menu-button .user-avatar { width: 24px; height: 24px; }

  .account-menu-grid,
  .shop-settings-grid,
  .mail-setting-columns,
  .permission-grid {
    grid-template-columns: 1fr;
  }

  .admin-workspace-grid .account-menu-item:last-child {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  .mailbox-card,
  .promo-activation-link { transition: none; }
}

/* --------------------------------------------------------------------------
   Maily product UI system

   This final layer deliberately normalizes the legacy component rules above.
   It preserves the liquid-glass character while keeping text, controls and
   overlays predictable across the user-facing surfaces.
   -------------------------------------------------------------------------- */

body {
  font-size: var(--font-body);
  line-height: var(--line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button {
  border-radius: var(--radius-control);
  font-size: var(--font-control);
  line-height: 1.25;
}

button:disabled,
button[aria-disabled="true"],
input:disabled,
textarea:disabled,
select:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.62);
}

button[aria-busy="true"],
.is-loading {
  cursor: progress;
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ui-icon,
.account-menu-icon svg,
.surface-card-icon svg,
button svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.account-menu-icon svg { width: 22px; height: 22px; }
.surface-card-icon svg { width: 18px; height: 18px; }

button.primary,
button.secondary,
button.ghost,
button.danger-button,
.full-button {
  min-height: var(--control-default);
  padding-inline: var(--space-4);
  border-radius: var(--radius-control);
  font-size: var(--font-control);
  font-weight: 700;
  line-height: 1.25;
}

button.primary {
  border-color: rgba(166, 174, 255, .56);
  background:
    linear-gradient(145deg, rgba(111, 125, 255, .98), rgba(67, 81, 236, .98));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .34),
    inset 0 -1px rgba(24, 31, 146, .45),
    0 10px 26px rgba(54, 68, 240, .26);
}

button.secondary {
  border-color: rgba(255, 255, 255, .2);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025)),
    var(--glass-surface);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .22),
    0 10px 28px rgba(0, 0, 0, .22);
}

button.ghost {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1);
}

button.danger-button {
  border-color: rgba(255, 118, 110, .38);
  background:
    linear-gradient(145deg, rgba(176, 55, 57, .46), rgba(80, 26, 38, .54));
  color: #ffd3cf;
  box-shadow: inset 0 1px rgba(255, 255, 255, .17), 0 10px 26px rgba(79, 16, 27, .2);
}

button.tiny {
  min-height: var(--control-compact) !important;
  padding-inline: var(--space-3) !important;
  border-radius: 12px !important;
  font-size: var(--font-caption);
  font-weight: 700;
}

.random-button {
  min-height: var(--control-default) !important;
  font-size: var(--font-control);
}

.icon-button,
.modal-close,
.copy-button,
.access-button,
.purchase-button,
.delete-button,
.message-row-action,
.message-select {
  width: var(--control-compact);
  min-width: var(--control-compact);
  height: var(--control-compact);
  min-height: var(--control-compact);
}

.icon-button,
.modal-close,
.message-row-action {
  border-radius: var(--radius-control);
}

.modal-close,
.copy-button,
.access-button,
.purchase-button,
.delete-button,
.message-select {
  border-radius: 50%;
}

.language-button,
.user-menu-button {
  height: var(--control-compact);
  min-height: var(--control-compact);
  border-radius: var(--radius-control);
}

.user-menu-button { width: 128px; }

.language-button {
  font-size: var(--font-caption);
}

.language-option {
  min-height: var(--control-compact);
  height: var(--control-compact);
  font-size: var(--font-caption);
}

.language-menu {
  padding: var(--space-1);
  gap: var(--space-1);
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .025)),
    var(--glass-overlay);
}

.hero {
  padding: var(--space-4);
  border-radius: var(--radius-card);
}

.hero #hello,
.field label,
.sheet-kicker,
.status-pill,
.mailbox-tag,
.mailbox-status-text,
.mailbox-timer,
.message-from,
.message-date,
.message-trash-meta,
.surface-stat-list span,
.surface-stat-list strong,
.wallet-balance-card > span,
.wallet-balance-card > small,
.topup-sku small,
.history-row strong,
.history-row small,
.history-value .status-pill,
.surface-card strong,
.surface-card small,
.mail-settings-form label > span,
.capability-note,
.setting-toggle,
.support-ticket-row strong,
.support-ticket-row small,
.support-message span,
.support-message small,
.support-state,
.chat-bubble,
.email-security-note,
.letter-address,
.plan-validity,
.access-choice small,
.access-list-row small,
.access-notice p,
.access-section h3,
.compact-copy,
.invite-link-box input,
.primary-availability,
.tariff-card-heading strong,
.tariff-card p,
.tariff-current,
.domain-offer small,
.personal-domain-row small,
.personal-domain-list h4,
.domain-error,
.compact-loading,
.promo-copy p,
.purchase-price span,
.purchase-price small,
.compact-field small,
.order-id,
.quote-card > div,
.recently-deleted > h3,
.deleted-email,
.pending-order strong,
.deleted-row small,
.pending-order small,
.compact-empty,
.domain-choice small,
.domain-preference-note span,
.domain-preference-note strong,
.domain-pagination span,
.invite-pagination span,
.security-card strong,
.security-card p,
.placeholder-flow strong,
.placeholder-flow small,
.referral-code-card > span,
.help-rule > span,
.help-rule strong,
.help-rule p,
.policy-card p,
.plan-stats span,
.permission-grid span {
  font-size: var(--font-caption) !important;
  line-height: var(--line-caption);
}

.account-header small,
.profile-summary small,
.account-menu-copy small,
.message-subject,
.muted,
.empty p,
.message-preview {
  font-size: var(--font-meta);
  line-height: var(--line-meta);
}

.hero h2,
.sheet h2 {
  font-size: var(--font-title);
  line-height: 1.18;
}

.section-heading h3 {
  font-size: var(--font-section);
  line-height: 1.25;
}

.mailbox-card {
  grid-template-columns: var(--control-compact) minmax(0, 1fr) auto;
  gap: var(--space-2);
  min-height: 64px;
  padding: 8px;
  border-radius: var(--radius-card);
}

.mailbox-email {
  font-size: 13.5px;
  line-height: 18px;
}

.mailbox-actions {
  gap: var(--space-1);
  min-width: var(--control-compact);
}

.access-button {
  font-size: var(--font-caption);
  letter-spacing: 0;
}

.purchase-button {
  font-size: var(--font-caption);
}

.search-wrap {
  height: var(--control-default);
  border-radius: var(--radius-control);
}

.message {
  padding: 10px 12px;
  border-radius: var(--radius-control);
}

.message-open {
  min-height: 60px;
}

.message-row {
  gap: var(--space-2);
}

.message-list.is-selecting .message-row {
  grid-template-columns: var(--control-compact) minmax(0, 1fr);
}

.message-selection-bar {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)),
    var(--glass-surface);
}

.account-menu-grid {
  gap: 6px;
}

.account-menu-grid > .account-menu-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.account-menu-item {
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  gap: var(--space-2);
  min-height: 52px;
  padding: 6px 9px;
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .018)),
    rgba(12, 14, 27, .46);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .24),
    0 6px 16px rgba(0, 0, 0, .15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.account-menu-item::before {
  border-radius: 13px;
  background: linear-gradient(128deg, rgba(255,255,255,.13), transparent 38%);
}

.account-menu-item::after {
  display: none;
}

.account-menu-item.has-badge {
  grid-template-columns: 32px minmax(0, 1fr) auto 16px;
}

.account-menu-icon,
.surface-card-icon {
  border-radius: var(--radius-icon);
}

.account-menu-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.account-menu-icon svg {
  width: 19px;
  height: 19px;
}

.account-menu-copy strong {
  display: block;
  overflow: hidden;
  color: rgba(250,251,255,.97);
  font-size: 14px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-copy small {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-badge {
  position: static;
  align-self: center;
  padding: 2px 5px;
  font-size: var(--font-caption);
  line-height: var(--line-caption);
}

.account-menu-item.has-badge .account-menu-copy {
  padding-right: 0;
}

.account-menu-chevron {
  align-self: center;
  font-size: 16px;
}

.account-header {
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding-right: var(--control-compact);
}

.account-header .account-avatar {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.account-header h2 {
  font-size: 18px;
  line-height: 21px;
}

.surface-card,
.history-row,
.support-ticket-row,
.help-rule,
.wallet-balance-card,
.security-card,
.support-chat-preview {
  border-radius: var(--radius-card);
}

.surface-card {
  min-height: 60px;
  padding: var(--space-3);
  gap: var(--space-3);
}

.sheet .message,
.sheet .surface-card,
.sheet .history-row,
.sheet .domain-choice,
.sheet .support-ticket-row {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .014)),
    rgba(10, 12, 23, .5);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .14),
    0 7px 18px rgba(0, 0, 0, .14);
}

.inline-language-options button,
.setting-toggle,
.surface-back,
.admin-order-row .compact-confirm,
.invite-link-box button,
.tariff-action,
.domain-search-row button,
.domain-upgrade,
.domain-offer button,
.domain-renew,
.promo-row .primary,
.admin-entry,
.commerce-payment-actions button,
.admin-card .full-button,
.admin-result button,
.admin-back,
.restore-button,
.pending-order button,
.domain-pagination button,
.invite-pagination button,
.support-composer button,
.referral-code-card button {
  min-height: var(--control-compact) !important;
  font-size: var(--font-caption);
}

.promo-row input,
.admin-fields input,
.admin-fields select,
.support-composer textarea {
  min-height: var(--control-compact);
}

.sheet {
  width: min(calc(100% - 24px), 620px);
  max-height: min(calc(var(--stable-vh) * 100 - 24px), 720px);
  padding: 12px 20px 20px;
  border-radius: var(--radius-sheet);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .026)),
    var(--glass-overlay);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .3),
    0 30px 88px rgba(0, 0, 0, .58),
    0 0 0 .5px rgba(138, 150, 255, .16);
}

.sheet.sheet-compact { max-width: 360px; }
.sheet.sheet-form { max-width: 480px; }
.sheet.sheet-account,
.sheet.account-sheet { max-width: 560px; }
.sheet.sheet-reader { width: min(calc(100% - 24px), 680px); max-width: 680px; }

.sheet[data-variant="compact"] { max-width: 360px; }
.sheet[data-variant="form"] { max-width: 480px; }
.sheet[data-variant="account"] { max-width: 560px; }
.sheet[data-variant="reader"] { width: min(calc(100% - 24px), 680px); max-width: 680px; }

.sheet.sheet-account,
.sheet.account-sheet,
.sheet[data-variant="account"] {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .025)),
    rgba(14, 15, 27, .84);
}

.sheet-actions {
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.modal-close {
  position: sticky;
  top: 0;
  float: none;
  margin: -2px -4px -42px auto;
  font-size: 24px;
  line-height: 1;
}

.sheet:focus { outline: none; }

.eyebrow {
  font-size: 12px;
  line-height: 16px;
}

#planButton.limit-badge {
  min-height: var(--control-compact);
  gap: 4px;
  padding-inline: 6px;
  font-size: 12px;
  line-height: 16px;
}

.plan-badge {
  min-height: 20px;
  padding-inline: 4px;
  font-size: 12px;
  line-height: 16px;
}

.quick-create input { min-height: var(--control-default); }

.message-heading-actions button.tiny,
.message-selection-controls button.tiny {
  min-height: var(--control-compact) !important;
}

.message-selection-bar > strong,
.message-all-action,
.admin-result span,
.admin-result code,
.admin-result button,
.topup-sku small,
.admin-result.promo-share-result .promo-share-code span,
.admin-result.promo-share-result .promo-share-link-row span,
.promo-share-note {
  font-size: var(--font-caption);
}

.message-all-action,
.admin-result button,
.promo-activation-link {
  min-height: var(--control-compact);
}

.tariff-action,
#redeemPromo {
  min-height: var(--control-default) !important;
}

.topup-sku strong,
.history-panel > h3,
.surface-section-heading h3 {
  font-size: var(--font-meta);
}

.admin-fields label > span,
.placeholder-flow > span,
.permission-grid span,
.capability-note {
  font-size: var(--font-caption) !important;
}

.setting-check,
.permission-grid label {
  min-height: var(--control-compact);
}

.setting-check { align-items: center; }

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover:not(:active) {
    border-color: rgba(158, 168, 255, .45);
  }

  button.danger-button:not(:disabled):hover:not(:active),
  .message-row-action.is-danger:not(:disabled):hover:not(:active) {
    border-color: rgba(255, 130, 120, .55);
    filter: brightness(1.08);
  }

  button.ghost:not(:disabled):hover:not(:active) {
    background: rgba(255, 255, 255, .075);
  }
}

@media (max-width: 480px) {
  .account-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .account-menu-item {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    min-height: 52px;
    padding: 5px 6px;
  }

  .account-menu-item.has-badge {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .account-menu-icon {
    width: 30px;
    height: 30px;
  }

  .account-menu-chevron {
    display: none;
  }

  .account-menu-badge {
    position: absolute;
    top: 6px;
    right: 7px;
  }

  .account-menu-item.has-badge .account-menu-copy {
    padding-right: 40px;
  }

  .sheet {
    width: calc(100% - 24px);
    padding-inline: var(--space-4);
  }
}

@media (max-width: 420px) {
  .hero-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  #planButton.limit-badge { max-width: 100%; }
}

@media (max-width: 360px) {
  .shell { padding-inline: var(--space-3); }

  .topbar { gap: var(--space-2); }

  .top-actions {
    flex: 0 0 auto;
    gap: var(--space-1);
  }

  .language-button,
  .language-menu { width: 66px; }

  .user-menu-button {
    width: 114px;
    padding-inline: 5px;
  }

  .user-menu-label { font-size: var(--font-caption); }

  .hero { padding: var(--space-3); }

  .quick-create {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1);
  }

  .quick-create input { padding-inline: 10px; }
  .quick-create .primary { padding-inline: 12px; }

  .mailbox-card {
    grid-template-columns: var(--control-compact) minmax(0, 1fr) auto;
    gap: 6px;
  }

  .mailbox-actions { gap: 2px; }

  .mailbox-card:has(.mailbox-actions > :nth-child(2)) {
    grid-template-columns: var(--control-compact) minmax(0, 1fr);
  }

  .mailbox-card:has(.mailbox-actions > :nth-child(2)) .mailbox-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .account-menu-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .account-menu-item {
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    gap: var(--space-2);
    min-height: 48px;
    padding: 4px 8px;
  }

  .account-menu-item.has-badge {
    grid-template-columns: 32px minmax(0, 1fr) auto 16px;
  }

  .account-menu-chevron {
    display: block;
  }

  .account-menu-icon {
    width: 32px;
    height: 32px;
  }

  .account-menu-badge {
    position: static;
  }

  .account-menu-item.has-badge .account-menu-copy {
    padding-right: 0;
  }

  .sheet-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 340px) {
  .eyebrow { display: none; }
}

/* --------------------------------------------------------------------------
   Compact main workspace

   Keep one optical glass recipe across the header controls, composer, search
   and mailbox rows.  Density comes from spacing and row geometry; interactive
   targets stay at least 44px and user-facing text stays at least 12px.
   -------------------------------------------------------------------------- */

:root {
  --main-glass-fill: rgba(14, 16, 29, .46);
  --main-glass-border: rgba(255, 255, 255, .16);
  --main-glass-highlight: rgba(255, 255, 255, .085);
  --main-glass-shadow: 0 8px 22px rgba(0, 0, 0, .21);
  --overlay-glass-fill: rgba(14, 16, 29, .88);
  --overlay-glass-border: rgba(255, 255, 255, .22);
  --overlay-glass-filter: blur(32px) saturate(180%);
}

.shell {
  padding: max(12px, env(safe-area-inset-top)) 12px calc(28px + var(--app-bottom-inset));
}

.topbar {
  min-height: var(--control-compact);
  padding-inline: 2px;
}

.topbar h1 {
  font-size: 24px;
  line-height: 1;
}

.topbar .eyebrow {
  margin-bottom: 1px;
  font-size: 12px;
  line-height: 14px;
}

.top-actions { gap: 5px; }

.language-button,
.user-menu-button,
.hero,
.search-wrap,
.mailbox-card,
.empty,
.count {
  border-color: var(--main-glass-border);
  background:
    radial-gradient(180px circle at var(--gx) var(--gy), rgba(143, 152, 255, calc(.2 * var(--glow-strength))), transparent 46%),
    linear-gradient(145deg, var(--main-glass-highlight), rgba(255, 255, 255, .02) 48%, rgba(255, 255, 255, .038)),
    var(--main-glass-fill);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .22),
    inset 0 -1px rgba(255, 255, 255, .04),
    var(--main-glass-shadow);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.language-button { width: 72px; }

.user-menu-button {
  width: 114px;
  gap: 5px;
  padding-inline: 6px;
}

.user-menu-label { font-size: 12px; }

.hero {
  margin: 8px 0 10px;
  padding: 10px 12px 12px;
  border-radius: var(--radius-card);
}

.hero::before,
.mailbox-card::before {
  opacity: 0;
}

.hero-heading {
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.hero #hello {
  margin-bottom: 1px;
  font-size: 12px !important;
  line-height: 15px;
}

.hero h2 {
  font-size: 19px;
  line-height: 22px;
}

#planButton.limit-badge {
  flex-shrink: 1;
  max-width: 58%;
  padding-inline: 7px;
  overflow: hidden;
}

#planSummary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-create {
  grid-template-columns: minmax(0, 1fr) auto var(--control-compact);
  gap: 6px;
}

.quick-create input {
  height: var(--control-compact);
  min-height: var(--control-compact);
  padding-inline: 12px;
  border-radius: var(--radius-control);
  font-size: 14px;
}

.quick-create .primary {
  padding-inline: 14px;
  font-size: 14px;
}

.random-button {
  display: grid;
  place-items: center;
  align-self: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: var(--control-compact) !important;
  margin-top: 0;
  padding: 0 !important;
  gap: 0;
  border-radius: var(--radius-control);
}

.random-button [data-icon] {
  width: 20px;
  height: 20px;
}

.section-heading {
  margin: 0 2px 6px;
}

.section-heading h3 {
  font-size: 17px;
  line-height: 22px;
}

.count {
  min-width: 26px;
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.search-wrap {
  height: var(--control-compact);
  min-height: var(--control-compact);
  margin-bottom: 5px;
  padding-inline: 11px;
  border-radius: 15px;
}

.search-wrap input { font-size: 14px; }

.mailbox-list {
  gap: 3px;
}

.mailbox-card {
  grid-template-columns: var(--control-compact) minmax(0, 1fr) var(--control-compact);
  gap: 4px;
  min-height: 48px;
  padding: 2px 4px;
  border-radius: 16px;
}

.mailbox-open {
  min-height: var(--control-compact);
  padding-block: 4px;
}

/* These controls already live inside the hero glass. Avoid stacking more
   backdrop filters over the same pixels; this is lighter and cheaper in a
   Telegram WebView while keeping the controls visually distinct. */
#planButton.limit-badge,
.quick-create input,
.quick-create .primary,
button.random-button {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.quick-create input {
  background: rgba(8, 10, 21, .42);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1);
}

.mailbox-email {
  font-size: 12.5px;
  line-height: 16px;
}

.mailbox-status {
  min-height: 15px;
  margin-top: 0;
  gap: 4px;
}

.mailbox-tag,
.mailbox-status-text,
.mailbox-timer {
  font-size: 12px !important;
  line-height: 14px;
}

.mailbox-tag {
  min-height: 15px;
  padding: 0 4px;
  letter-spacing: .035em;
}

.mailbox-actions {
  width: var(--control-compact);
  min-width: var(--control-compact);
  gap: 0;
}

.copy-button,
.mailbox-options-button {
  position: relative;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.copy-button::before,
.mailbox-options-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.2), transparent 42%),
    rgba(81, 94, 207, .2);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}

.copy-button::before {
  border-color: rgba(151, 162, 255, .3);
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.3), transparent 40%),
    linear-gradient(145deg, rgba(103, 117, 255, .7), rgba(69, 82, 229, .38));
}

.copy-button .ui-icon,
.mailbox-options-button .ui-icon {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
}

.mailbox-action-sheet {
  margin-bottom: 0;
}

.mailbox-action-sheet .access-choice {
  min-height: var(--control-compact);
  padding-block: 5px;
}

.mailbox-action-sheet .danger-choice {
  border-color: rgba(255, 107, 98, .25);
  color: #ffc5c0;
  background:
    linear-gradient(145deg, rgba(255, 91, 84, .12), rgba(255,255,255,.018)),
    rgba(30, 18, 24, .72);
}

.mailbox-action-sheet .danger-choice > span {
  border-color: rgba(255, 118, 107, .28);
  background: rgba(191, 54, 51, .17);
  color: #ffb1aa;
}

.empty {
  padding: 16px;
  border-radius: var(--radius-card);
}

.empty-mark {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.empty h3 {
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 20px;
}

.language-menu,
.sheet,
.sheet.sheet-account,
.sheet.account-sheet,
.sheet[data-variant="account"] {
  border-color: var(--overlay-glass-border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .025)),
    var(--overlay-glass-fill);
  backdrop-filter: var(--overlay-glass-filter);
  -webkit-backdrop-filter: var(--overlay-glass-filter);
}

@media (min-width: 361px) and (max-width: 420px) {
  .hero-heading {
    align-items: center;
    flex-wrap: nowrap;
  }
}

@media (max-width: 360px) {
  .shell { padding-inline: 10px; }

  .topbar { gap: 6px; }
  .topbar .eyebrow { display: none; }

  .language-button,
  .language-menu { width: 66px; }

  .user-menu-button { width: 112px; }

  .hero {
    margin-top: 7px;
    padding: 9px 10px 10px;
  }

  .hero-heading {
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 5px;
  }

  #planButton.limit-badge { max-width: 55%; }

  .quick-create {
    grid-template-columns: minmax(0, 1fr) auto var(--control-compact);
  }

  .quick-create input { padding-inline: 9px; }
  .quick-create .primary { padding-inline: 10px; }

  .mailbox-card {
    gap: 3px;
    padding-inline: 4px;
  }
}

/* Compact inbox ----------------------------------------------------------
   The dialog owns the blur. Rows and utility actions stay optically light,
   while their hit areas remain 44px for touch and keyboard use. */

.sheet.sheet-messages,
.sheet[data-variant="messages"] {
  width: min(calc(100% - 24px), 560px);
  max-height: min(calc(var(--stable-vh) * 100 - 32px), 720px);
  padding: 9px 12px 12px;
  border-color: rgba(255, 255, 255, .18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .018)),
    rgba(13, 15, 27, .84);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .22),
    0 20px 58px rgba(0, 0, 0, .42),
    0 0 0 .5px rgba(138, 150, 255, .12);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.sheet.sheet-messages .grabber,
.sheet[data-variant="messages"] .grabber {
  width: 34px;
  height: 4px;
  margin-bottom: 8px;
}

.sheet.sheet-messages .modal-close,
.sheet[data-variant="messages"] .modal-close {
  margin: -2px 0 -44px auto;
}

.message-sheet-heading {
  align-items: center;
  min-height: var(--control-compact);
  gap: 8px;
  padding: 0 48px 0 2px;
  margin-bottom: 7px;
}

.message-sheet-title {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.message-sheet-title h2 {
  padding-right: 0;
  font-size: 19px;
  line-height: 22px;
  letter-spacing: -.025em;
}

.message-sheet-title .letter-address {
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: rgba(160, 170, 255, .82);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px !important;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-heading-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 2px;
}

.message-heading-action {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--control-compact);
  min-width: var(--control-compact);
  height: var(--control-compact);
  min-height: var(--control-compact) !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(226, 230, 248, .72);
}

.message-heading-action::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}

.message-heading-action svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin: auto;
}

.message-list {
  gap: 3px;
}

.message-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  border-radius: 0;
}

.message-row:has(.message-row-actions) {
  grid-template-columns: minmax(0, 1fr) var(--control-compact);
}

.message-row:last-child {
  border-bottom-color: transparent;
}

.message {
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.message-open {
  min-height: 48px;
}

.sheet.sheet-messages .message,
.sheet[data-variant="messages"] .message {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.message-meta {
  gap: 6px;
  margin-bottom: 1px;
}

.message-from,
.message-date {
  font-size: 12px !important;
  line-height: 16px;
}

.message-from {
  color: rgba(145, 157, 255, .9);
}

.message-date {
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-subject {
  font-size: 13px;
  line-height: 18px;
}

.message-row-actions {
  width: var(--control-compact);
  gap: 0;
}

.message-row-action {
  position: relative;
  width: var(--control-compact);
  min-width: var(--control-compact);
  height: var(--control-compact);
  min-height: var(--control-compact);
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(220, 224, 242, .56);
}

.message-row-action svg {
  width: 18px;
  height: 18px;
}

.message-list.is-selecting .message-row {
  grid-template-columns: var(--control-compact) minmax(0, 1fr);
}

.message-select {
  position: relative;
  width: var(--control-compact);
  min-width: var(--control-compact);
  height: var(--control-compact);
  min-height: var(--control-compact);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.message-select::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}

.message-select > span {
  position: relative;
  z-index: 1;
}

.message-selection-bar {
  margin-bottom: 4px;
  padding: 7px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px rgba(255, 255, 255, .11);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.message-selection-bar > strong {
  margin-bottom: 4px;
  font-size: 12px !important;
  line-height: 16px;
}

@media (max-width: 420px) {
  .sheet.sheet-messages,
  .sheet[data-variant="messages"] {
    width: calc(100% - 24px);
    padding-inline: 8px;
    border-radius: 22px;
  }

  .message-sheet-heading {
    display: flex;
    grid-template-columns: none;
    gap: 4px;
    padding-right: 46px;
  }

  .message-heading-actions {
    justify-content: flex-end;
  }

  .message-heading-actions button.message-heading-action {
    flex: 0 0 var(--control-compact);
  }
}

@media (max-width: 360px) {
  .account-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .account-menu-item,
  .account-menu-item.has-badge {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px;
    min-height: 52px;
    padding: 4px 5px;
  }

  .account-menu-icon {
    width: 28px;
    height: 28px;
  }

  .account-menu-copy strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 15px;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .account-menu-copy small,
  .account-menu-chevron {
    display: none;
  }

  .account-menu-badge {
    position: absolute;
    top: 4px;
    right: 4px;
  }

  .account-menu-item.has-badge .account-menu-copy {
    padding-right: 34px;
  }
}

/* Mailbox folders --------------------------------------------------------
   One restrained glass container owns the visual surface. Folder tabs and
   rows are flat controls, keeping the list light while all targets stay 44px. */

.sheet.sheet-messages,
.sheet[data-variant="messages"] {
  overflow: hidden;
}

.sheet.sheet-messages #sheetContent,
.sheet[data-variant="messages"] #sheetContent {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.message-sheet-heading {
  align-items: center;
  min-height: var(--control-compact);
  margin-bottom: 5px;
}

.message-sheet-title {
  flex: 1 1 auto;
  width: auto;
}

.mailbox-address-line {
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--control-compact);
  gap: 5px;
}

.mailbox-address-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: rgba(145, 157, 255, .9);
}

.mailbox-address-mark .ui-icon {
  width: 17px;
  height: 17px;
}

.message-sheet-title .mailbox-address-line .letter-address {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(221, 226, 252, .88);
  font-size: 12px !important;
  font-weight: 680;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-heading-actions {
  flex: 0 0 auto;
  gap: 0;
}

.mailbox-address-copy.message-heading-action {
  flex: 0 0 var(--control-compact);
  margin-left: -3px;
}

.message-folder-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: 3px;
  margin: 0 0 7px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.message-folder-tabs:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.message-folder-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--control-compact);
  gap: 4px;
  padding: 0 3px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  color: rgba(220, 225, 246, .58);
  font-size: 12px;
  font-weight: 720;
  line-height: 16px;
  white-space: nowrap;
}

.message-folder-tab > .ui-icon,
.message-folder-tab > span:first-child .ui-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.message-folder-tab.is-active {
  background: rgba(111, 124, 255, .16);
  color: rgba(246, 247, 255, .96);
  box-shadow: inset 0 0 0 1px rgba(145, 156, 255, .26);
}

.message-folder-count {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding-inline: 3px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .075);
  color: rgba(232, 235, 251, .7);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.message-folder-tab.is-active .message-folder-count {
  background: rgba(137, 149, 255, .23);
  color: #fff;
}

.sheet.sheet-messages .message-list,
.sheet[data-variant="messages"] .message-list {
  min-height: 0;
  max-height: min(calc(var(--stable-vh) * 100 - 172px), 548px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 227, 247, .32) transparent;
}

.message-row,
.message-row:has(.message-row-actions) {
  grid-template-columns: minmax(0, 1fr);
}

.message-open {
  min-height: var(--control-compact);
}

.message-meta {
  align-items: baseline;
}

.message-from {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-selection-bar {
  flex: 0 0 auto;
}

.message-load-more-wrap {
  display: grid;
  place-items: center;
  padding: 5px 0 2px;
}

.message-load-more {
  width: min(100%, 220px);
  min-height: var(--control-compact);
  padding-inline: 18px;
  border-color: rgba(151, 160, 255, .2);
  background: rgba(114, 126, 255, .07);
  box-shadow: none;
  color: rgba(235, 238, 255, .84);
  font-size: 12px;
  font-weight: 720;
}

.message-load-more[aria-busy="true"] {
  color: rgba(222, 226, 247, .56);
}

@media (max-width: 430px) {
  .sheet.sheet-messages,
  .sheet[data-variant="messages"] {
    width: calc(100% - 20px);
    padding-inline: 8px;
  }

  .message-sheet-heading {
    display: flex;
    padding-right: 44px;
  }

  .message-heading-actions button.message-heading-action {
    flex: 0 0 var(--control-compact);
  }
}

@media (max-width: 360px) {
  .message-sheet-heading {
    gap: 0;
  }

  .mailbox-address-mark {
    display: none;
  }

  .message-folder-tab {
    gap: 2px;
    padding-inline: 2px;
    font-size: 12px;
  }

  .message-folder-tab > .ui-icon,
  .message-folder-tab > span:first-child .ui-icon {
    width: 15px;
    height: 15px;
  }

  .message-folder-count {
    display: none;
  }
}

/* Domain Shop -------------------------------------------------------------
   A single modal surface owns the visual effect. Search controls stay fixed
   while only the flat, virtualizable offer list scrolls — this avoids the
   nested WebKit blur/compositing pressure that made older iPhone WebViews
   fragile. */

.hero-commerce-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto !important;
  min-width: 0;
  gap: 6px;
  margin-left: auto;
}

.domain-shop-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(137, 150, 255, .28);
  border-radius: 14px;
  background: rgba(95, 108, 255, .1);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  color: rgba(228, 233, 255, .9);
  font-size: 12px;
  font-weight: 760;
}

.domain-shop-entry .ui-icon {
  width: 18px;
  height: 18px;
}

.hero-commerce-actions #planButton.limit-badge {
  flex: 0 1 auto;
  max-width: 112px;
}

.sheet.sheet-domain-shop,
.sheet[data-variant="domain-shop"] {
  width: min(calc(100% - 20px), 680px);
  height: min(calc(var(--stable-vh) * 100 - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 760px);
  max-height: min(calc(var(--stable-vh) * 100 - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 760px);
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
  touch-action: pan-y;
}

.sheet.sheet-domain-shop #sheetContent,
.sheet[data-variant="domain-shop"] #sheetContent {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .sheet.sheet-domain-shop,
  .sheet[data-variant="domain-shop"] {
    height: min(calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 760px);
    max-height: min(calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 760px);
  }
}

.sheet.sheet-domain-shop .modal-close,
.sheet[data-variant="domain-shop"] .modal-close {
  position: absolute;
  z-index: 6;
  top: 10px;
  right: 10px;
  margin: 0;
  background: rgba(25, 27, 42, .94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sheet.sheet-domain-shop > .grabber,
.sheet[data-variant="domain-shop"] > .grabber {
  position: absolute;
  z-index: 5;
  top: 9px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.domain-shop-surface {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
}

.domain-shop-heading {
  flex: 0 0 auto;
  padding: 2px 48px 8px 2px;
}

.domain-shop-heading h2 {
  margin: 0;
  padding: 0;
  font-size: clamp(20px, 5.4vw, 26px);
  line-height: 1.1;
}

.domain-shop-heading .sheet-kicker {
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-heading > p:last-child {
  max-width: 520px;
  margin: 4px 0 0;
  color: rgba(226, 230, 247, .56);
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-sticky {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  padding: 2px 0 8px;
  background: rgba(16, 18, 30, .96);
}

.domain-shop-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 0 4px 0 12px;
  border: 1px solid rgba(151, 160, 255, .3);
  border-radius: 15px;
  background: rgba(9, 11, 20, .82);
  box-shadow: inset 0 1px rgba(255, 255, 255, .09);
}

.domain-shop-search:focus-within {
  border-color: rgba(127, 140, 255, .68);
  box-shadow: 0 0 0 3px rgba(82, 94, 255, .15);
}

.domain-shop-search-icon {
  display: grid;
  place-items: center;
  color: rgba(210, 216, 245, .55);
}

.domain-shop-search-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.domain-shop-search input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 9px;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(248, 249, 255, .94);
  font-size: 16px;
}

.domain-shop-search input::placeholder {
  color: rgba(224, 228, 246, .4);
}

.domain-shop-search input:disabled {
  opacity: .56;
}

.domain-shop-search button {
  min-width: 72px;
  min-height: 44px !important;
  padding-inline: 13px !important;
  border-radius: 12px !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 12px;
}

.domain-shop-validation {
  min-height: 0;
  margin: 3px 3px 0;
  color: #ffb5ac;
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-validation:empty {
  display: none;
}

.domain-shop-filters {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.domain-shop-filters::-webkit-scrollbar {
  display: none;
}

.domain-shop-filters button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  color: rgba(224, 228, 246, .62);
  font-size: 12px;
  font-weight: 680;
}

.domain-shop-filters button.is-active {
  border-color: rgba(138, 151, 255, .38);
  background: rgba(106, 119, 255, .15);
  color: rgba(245, 247, 255, .96);
}

.domain-shop-results {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.domain-shop-results-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: 30px;
  gap: 8px;
  padding: 5px 3px 4px;
}

.domain-shop-results-heading h3 {
  margin: 0;
  color: rgba(243, 245, 255, .88);
  font-size: 13px;
  line-height: 18px;
}

.domain-shop-results-heading span {
  min-width: 0;
  overflow: hidden;
  color: rgba(218, 222, 241, .48);
  font-size: 12px;
  line-height: 16px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-shop-results-list {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  gap: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(218, 223, 247, .26) transparent;
  -webkit-overflow-scrolling: touch;
}

.domain-shop-results-list::-webkit-scrollbar {
  width: 4px;
}

.domain-shop-results-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(218, 223, 247, .26);
}

.domain-shop-offer {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(108px, auto) auto;
  align-items: center;
  min-height: 70px;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 15px;
  background: rgba(255, 255, 255, .028);
  box-shadow: none;
  content-visibility: auto;
  contain-intrinsic-size: auto 70px;
}

.domain-shop-availability {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(52, 176, 126, .12);
  color: #8ae5bb;
}

.domain-shop-availability .ui-icon {
  width: 15px;
  height: 15px;
}

.domain-shop-offer.is-expired {
  opacity: .62;
}

.domain-shop-offer.is-expired .domain-shop-availability {
  background: rgba(255, 179, 83, .1);
  color: #ffd096;
}

.domain-shop-offer.is-disabled .domain-shop-availability {
  background: rgba(255, 179, 83, .1);
  color: #ffd096;
}

.domain-shop-offer.is-disabled .domain-shop-offer-copy small {
  color: rgba(255, 208, 150, .78);
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-offer-copy,
.domain-shop-offer-price {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.domain-shop-offer-copy strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(247, 248, 255, .94);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-shop-offer-copy small {
  color: rgba(116, 225, 174, .76);
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-offer-price {
  justify-items: end;
  text-align: right;
}

.domain-shop-offer-price strong {
  color: rgba(246, 248, 255, .92);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 17px;
}

.domain-shop-offer-price small,
.domain-shop-offer-price span {
  color: rgba(219, 223, 241, .45);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.domain-shop-offer-price span {
  font-size: 12px;
}

.domain-shop-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 44px !important;
  gap: 3px;
  padding: 0 9px !important;
  border-radius: 12px !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 12px;
}

.domain-shop-buy .ui-icon {
  width: 14px;
  height: 14px;
}

.domain-shop-buy:disabled {
  opacity: .42;
}

.domain-shop-section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 5px 3px 0;
  color: rgba(220, 224, 244, .48);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.domain-shop-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .08);
}

.domain-shop-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 154px;
  gap: 8px;
  padding: 20px;
  color: rgba(219, 223, 241, .48);
  text-align: center;
}

.domain-shop-empty > .ui-icon {
  width: 28px;
  height: 28px;
}

.domain-shop-empty p {
  max-width: 300px;
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}

.domain-shop-empty button {
  min-height: 44px !important;
}

.domain-shop-offer-skeleton {
  pointer-events: none;
}

.domain-shop-offer-skeleton > span,
.domain-shop-offer-skeleton i {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  animation: domain-shop-pulse 1.25s ease-in-out infinite alternate;
  animation-delay: calc(var(--skeleton-index) * 45ms);
}

.domain-shop-offer-skeleton > span:first-child {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.domain-shop-offer-skeleton > div {
  display: grid;
  gap: 6px;
}

.domain-shop-offer-skeleton i:last-child {
  width: 68%;
}

.domain-shop-load-more-wrap {
  display: grid;
  place-items: center;
  padding: 6px 0 2px;
}

.domain-shop-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 220px);
  min-height: 44px !important;
  gap: 7px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 12px;
}

.domain-shop-load-more span {
  color: rgba(222, 226, 245, .48);
  font-size: 12px;
}

.domain-shop-price-note {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 30px;
  gap: 6px;
  margin: 5px 3px 0;
  color: rgba(217, 221, 239, .43);
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-price-note .ui-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.domain-shop-plan-gate {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  flex: 0 0 auto;
  min-height: 66px;
  gap: 8px;
  margin: 3px 0 6px;
  padding: 8px;
  border: 1px solid rgba(148, 158, 255, .18);
  border-radius: 15px;
  background: rgba(106, 119, 255, .065);
}

.domain-shop-plan-gate > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(114, 127, 255, .13);
  color: #cfd4ff;
}

.domain-shop-plan-gate > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.domain-shop-plan-gate strong {
  color: rgba(243, 245, 255, .9);
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-plan-gate small {
  color: rgba(219, 223, 241, .48);
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-plan-gate button {
  min-height: 44px !important;
  padding-inline: 12px !important;
  font-size: 12px;
}

@keyframes domain-shop-pulse {
  from { opacity: .55; }
  to { opacity: 1; }
}

@media (max-width: 430px) {
  .sheet.sheet-domain-shop,
  .sheet[data-variant="domain-shop"] {
    width: calc(100% - 12px);
    height: calc(var(--stable-vh) * 100 - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(var(--stable-vh) * 100 - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    border-radius: 23px;
  }

  .domain-shop-heading {
    padding-top: 1px;
    padding-bottom: 6px;
  }

  .domain-shop-heading > p:last-child {
    max-width: calc(100% - 4px);
  }

  .domain-shop-offer {
    grid-template-columns: 26px minmax(0, 1fr) minmax(120px, auto) auto;
    min-height: 68px;
    gap: 6px;
    padding: 5px 6px;
    contain-intrinsic-size: auto 68px;
  }

  .domain-shop-availability {
    width: 26px;
    height: 26px;
  }

  .domain-shop-offer-price span {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .domain-shop-buy {
    min-width: 68px;
    padding-inline: 7px !important;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 430px) {
    .sheet.sheet-domain-shop,
    .sheet[data-variant="domain-shop"] {
      height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      max-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }
}

@media (max-width: 360px) {
  .domain-shop-entry {
    width: 44px;
    padding: 0;
  }

  .domain-shop-entry-label {
    display: none;
  }

  .hero-commerce-actions #planButton.limit-badge {
    max-width: 94px;
  }

  .domain-shop-heading > p:last-child {
    display: none;
  }

  .domain-shop-search {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    padding-left: 9px;
  }

  .domain-shop-search input {
    padding-inline: 7px;
  }

  .domain-shop-search button {
    min-width: 62px;
    padding-inline: 9px !important;
  }

  .domain-shop-filters button {
    padding-inline: 11px;
  }

  .domain-shop-offer {
    grid-template-columns: 24px minmax(0, 1fr) minmax(72px, auto) 44px;
    min-height: 62px;
    gap: 5px;
    padding-inline: 5px;
    contain-intrinsic-size: auto 62px;
  }

  .domain-shop-availability {
    width: 24px;
    height: 24px;
  }

  .domain-shop-offer-copy strong,
  .domain-shop-offer-price strong {
    font-size: 12px;
  }

  .domain-shop-offer-price span {
    display: none;
  }

  .domain-shop-buy {
    width: 44px;
    min-width: 44px;
    padding: 0 !important;
  }

  .domain-shop-buy > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .domain-shop-plan-gate {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .domain-shop-plan-gate > span {
    width: 32px;
    height: 32px;
  }

  .domain-shop-plan-gate button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .domain-shop-offer-skeleton > span,
  .domain-shop-offer-skeleton i {
    animation: none;
  }
}

/* Domain Shop v16: one quiet surface, flat rows, no dark nested panels. */
.sheet.sheet-domain-shop,
.sheet[data-variant="domain-shop"] {
  background: linear-gradient(180deg, rgba(42, 44, 59, .985), rgba(29, 31, 45, .99));
  border-color: rgba(220, 224, 246, .24);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

.sheet.sheet-domain-shop .modal-close,
.sheet[data-variant="domain-shop"] .modal-close {
  border-color: rgba(229, 232, 248, .16);
  background: rgba(255, 255, 255, .04);
  box-shadow: none;
}

.domain-shop-heading {
  padding-bottom: 10px;
}

.domain-shop-heading .sheet-kicker {
  color: rgba(190, 197, 236, .66);
  letter-spacing: .12em;
}

.domain-shop-heading > p:last-child {
  color: rgba(231, 233, 245, .62);
}

.domain-shop-sticky {
  padding: 0 0 7px;
  background: transparent;
}

.domain-shop-search {
  min-height: 50px;
  border-color: rgba(226, 229, 248, .18);
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
}

.domain-shop-search:focus-within {
  border-color: rgba(151, 161, 255, .72);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 2px rgba(117, 130, 255, .11);
}

.domain-shop-search button {
  border: 1px solid rgba(151, 162, 255, .3);
  background: rgba(112, 125, 255, .18);
  box-shadow: none;
  color: rgba(247, 248, 255, .94);
}

.domain-shop-search button:disabled {
  border-color: transparent;
  background: rgba(255, 255, 255, .045);
  color: rgba(229, 232, 246, .44);
}

.domain-shop-filters {
  gap: 2px;
  margin-top: 4px;
  padding-bottom: 1px;
}

.domain-shop-filters button {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(226, 229, 243, .56);
}

.domain-shop-filters button.is-active {
  border-color: rgba(142, 153, 255, .82);
  background: transparent;
  color: rgba(249, 249, 255, .96);
}

.domain-shop-plan-gate {
  min-height: 62px;
  margin: 0 0 4px;
  padding: 7px 2px;
  border: 0;
  border-top: 1px solid rgba(230, 232, 247, .1);
  border-bottom: 1px solid rgba(230, 232, 247, .1);
  border-radius: 0;
  background: transparent;
}

.domain-shop-plan-gate > span {
  background: rgba(127, 139, 255, .09);
}

.domain-shop-plan-gate button {
  border-color: rgba(145, 157, 255, .28);
  background: rgba(118, 132, 255, .16);
  box-shadow: none;
}

.domain-shop-results-heading {
  min-height: 28px;
  padding: 5px 3px 2px;
}

.domain-shop-results-heading h3 {
  color: rgba(246, 247, 253, .92);
}

.domain-shop-results-list {
  gap: 0;
  padding-right: 2px;
}

.domain-shop-result-section {
  display: block;
  min-width: 0;
}

.domain-shop-result-section > h4 {
  display: flex;
  align-items: center;
  min-height: 30px;
  gap: 7px;
  margin: 0;
  padding: 6px 4px 3px;
  color: rgba(211, 215, 237, .58);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .055em;
  line-height: 16px;
  text-transform: uppercase;
}

.domain-shop-result-section > h4 span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  color: rgba(229, 232, 246, .62);
  font-size: 12px;
  letter-spacing: 0;
}

.domain-shop-offer {
  min-height: 60px;
  gap: 7px;
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid rgba(229, 232, 247, .09);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  contain-intrinsic-size: auto 60px;
}

.domain-shop-offer-idea {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.domain-shop-offer-idea .domain-shop-availability {
  background: transparent;
  color: rgba(177, 185, 244, .72);
}

.domain-shop-offer-idea .domain-shop-offer-copy small {
  color: rgba(216, 220, 239, .52);
}

.domain-shop-offer-verified .domain-shop-availability {
  background: transparent;
  color: #84d9ad;
}

.domain-shop-offer-copy strong {
  font-family: inherit;
  font-size: 14px;
  font-weight: 690;
  letter-spacing: -.01em;
}

.domain-shop-offer-copy small,
.domain-shop-offer-price small,
.domain-shop-offer-price span {
  font-size: 12px;
}

.domain-shop-buy,
.domain-shop-inline-action,
.domain-shop-load-more {
  min-width: 44px;
  min-height: 44px !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(183, 192, 255, .92);
  font-size: 12px;
  font-weight: 720;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.domain-shop-buy {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 4px !important;
}

.domain-shop-buy .ui-icon {
  width: 14px;
  height: 14px;
}

.domain-shop-buy:disabled {
  color: rgba(220, 223, 239, .4);
  opacity: 1;
}

.domain-shop-progress-note {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  gap: 8px;
  padding: 3px 4px;
  border-bottom: 1px solid rgba(229, 232, 247, .09);
  color: rgba(222, 225, 241, .62);
  font-size: 12px;
  line-height: 16px;
}

.domain-shop-progress-note > .ui-icon {
  width: 16px;
  height: 16px;
}

.domain-shop-progress-note.is-error {
  color: #ffb5ac;
}

.domain-shop-empty {
  min-height: 132px;
}

.domain-shop-load-more-wrap {
  border-top: 1px solid rgba(229, 232, 247, .06);
}

.domain-shop-load-more {
  width: min(100%, 240px);
}

.domain-shop-price-note {
  margin: 3px 3px 0;
  color: rgba(221, 224, 239, .42);
}

.domain-shop-ideas-note {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 6px;
  margin: 4px 3px 0;
  color: rgba(221, 224, 239, .5);
  font-size: 12px;
  line-height: 15px;
}

.domain-shop-ideas-note .ui-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

@media (max-width: 430px) {
  .domain-shop-heading {
    padding-bottom: 8px;
  }

  .domain-shop-offer {
    min-height: 58px;
    gap: 5px;
    padding-inline: 3px;
    contain-intrinsic-size: auto 58px;
  }

  .domain-shop-offer-verified {
    grid-template-columns: 24px minmax(0, 1fr) minmax(92px, auto) auto;
  }

  .domain-shop-offer-idea {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .domain-shop-availability {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 360px) {
  .domain-shop-heading > p:last-child {
    display: block;
    padding-right: 18px;
    font-size: 12px;
    line-height: 15px;
  }

  .domain-shop-search button {
    min-width: 58px;
  }

  .domain-shop-filters button {
    padding-inline: 9px;
  }

  .domain-shop-offer-verified {
    grid-template-columns: 22px minmax(0, 1fr) minmax(67px, auto) 44px;
  }

  .domain-shop-offer-idea {
    grid-template-columns: 22px minmax(0, 1fr) auto;
  }

  .domain-shop-buy {
    width: 44px;
    min-width: 44px;
  }

  .domain-shop-buy > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .domain-shop-offer-price span {
    display: none;
  }
}

/* Domain Shop v17: automatic availability pipeline. Candidate rows are
   informational, prices occupy a stable column, and only confirmed offers
   can expose an action. */
.domain-shop-results-heading {
  align-items: center;
}

.domain-shop-offer-candidate,
.domain-shop-offer-verified {
  grid-template-columns: 24px minmax(0, 1fr) minmax(88px, 96px);
  min-height: 56px;
  contain-intrinsic-size: auto 56px;
}

.domain-shop-offer-verified.has-action {
  grid-template-columns: 24px minmax(0, 1fr) minmax(88px, 96px) auto;
}

.domain-shop-offer-candidate .domain-shop-availability,
.domain-shop-offer-verified .domain-shop-availability {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: transparent;
}

.domain-shop-offer-candidate.is-probable .domain-shop-availability {
  color: #aebaff;
}

.domain-shop-offer-candidate.is-probable .domain-shop-offer-copy small {
  color: rgba(190, 199, 255, .7);
}

.domain-shop-offer-candidate.is-verifying .domain-shop-availability {
  color: #c6b8ff;
}

.domain-shop-offer-candidate.is-verifying .domain-shop-offer-copy small {
  color: rgba(205, 195, 255, .7);
}

.domain-shop-offer-candidate.is-available .domain-shop-availability,
.domain-shop-offer-verified .domain-shop-availability {
  color: #82d9aa;
}

.domain-shop-offer-copy {
  gap: 0;
}

.domain-shop-offer-copy strong {
  font-size: 14px;
  line-height: 18px;
}

.domain-shop-offer-copy small {
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-shop-offer-price {
  width: 96px;
  min-width: 88px;
  min-height: 34px;
  align-content: center;
  justify-items: end;
}

.domain-shop-offer-price strong {
  min-width: 58px;
  font-size: 13px;
  line-height: 17px;
  text-align: right;
}

.domain-shop-price-pending strong {
  position: relative;
  overflow: hidden;
  color: rgba(225, 228, 244, .54);
}

.domain-shop-price-pending strong::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, .22) 48%, transparent 82%);
  content: "";
  transform: translateX(-110%);
  animation: domain-shop-price-scan 1.5s ease-in-out infinite;
}

.domain-shop-progress-note {
  grid-template-columns: 16px minmax(0, 1fr);
  min-height: 38px;
  padding: 3px 4px;
  border-bottom-color: rgba(229, 232, 247, .07);
}

.domain-shop-progress-note > .ui-icon {
  width: 14px;
  height: 14px;
}

.domain-shop-progress-note .is-spinning,
.domain-shop-availability .is-spinning {
  animation: domain-shop-spin 1s linear infinite;
}

.domain-shop-offer-skeleton {
  grid-template-columns: 24px minmax(0, 1fr) 88px;
  min-height: 54px;
  contain-intrinsic-size: auto 54px;
}

.domain-shop-offer-skeleton > span:first-child {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}

.domain-shop-offer-skeleton > div:last-child {
  justify-items: end;
}

.domain-shop-offer-skeleton > div:last-child i {
  width: 62px;
}

.domain-shop-offer-skeleton > div:last-child i:last-child {
  width: 42px;
}

.domain-shop-empty.is-inconclusive > .ui-icon {
  color: #f0bf84;
}

.domain-shop-empty.is-inconclusive p {
  color: rgba(240, 229, 211, .78);
}

.domain-shop-empty.is-unavailable > .ui-icon {
  color: rgba(181, 191, 247, .72);
}

@keyframes domain-shop-spin {
  to { transform: rotate(360deg); }
}

@keyframes domain-shop-price-scan {
  55%, 100% { transform: translateX(110%); }
}

@media (max-width: 430px) {
  .domain-shop-results-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 4px 3px;
  }

  .domain-shop-results-heading span {
    text-align: left;
    white-space: normal;
  }

  .domain-shop-offer-candidate,
  .domain-shop-offer-verified {
    grid-template-columns: 22px minmax(0, 1fr) minmax(82px, 90px);
    min-height: 54px;
    contain-intrinsic-size: auto 54px;
  }

  .domain-shop-offer-verified.has-action {
    grid-template-columns: 22px minmax(0, 1fr) minmax(78px, 88px) 44px;
  }

  .domain-shop-offer-price {
    width: 100%;
    min-width: 0;
    max-width: 90px;
  }

  .domain-shop-buy {
    width: 44px;
    min-width: 44px;
    padding: 0 !important;
  }

  .domain-shop-buy > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .domain-shop-heading {
    padding-bottom: 6px;
  }

  .domain-shop-heading h2 {
    font-size: 22px;
  }

  .domain-shop-search {
    min-height: 48px;
  }

  .domain-shop-offer-candidate,
  .domain-shop-offer-verified {
    grid-template-columns: 20px minmax(0, 1fr) 76px;
    gap: 4px;
    padding-inline: 2px;
  }

  .domain-shop-offer-verified.has-action {
    grid-template-columns: 20px minmax(0, 1fr) 72px 44px;
  }

  .domain-shop-offer-price {
    width: 100%;
    min-width: 0;
    max-width: 76px;
  }

  .domain-shop-offer-copy strong {
    font-size: 13px;
  }

  .domain-shop-offer-price strong {
    min-width: 52px;
    font-size: 12px;
  }
}

.domain-shop-offer-price .domain-shop-price-meta {
  display: grid;
  width: 100%;
  max-width: 100%;
  justify-items: end;
  overflow: hidden;
  line-height: 12px;
  white-space: normal;
}

.domain-shop-offer-price .domain-shop-price-meta > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .domain-shop-progress-note .is-spinning,
  .domain-shop-availability .is-spinning,
  .domain-shop-price-pending strong::after {
    animation: none;
  }
}

/* Domains hub: two compact sections with fail-closed, plan-scoped catalog. */
.domain-hub-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 10px;
  margin-bottom: 8px;
}

.domain-hub-heading > div {
  min-width: 0;
}

.domain-hub-heading .sheet-kicker {
  margin-bottom: 2px;
}

.domain-hub-heading h2 {
  overflow: hidden;
  margin: 0;
  font-size: 22px;
  line-height: 27px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-hub-shop-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px !important;
  gap: 6px;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 12px;
  white-space: nowrap;
}

.domain-hub-shop-action .ui-icon {
  width: 16px;
  height: 16px;
}

.domain-hub-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 9px;
}

.domain-hub-tabs .message-folder-tab {
  min-height: 44px;
  font-size: 12px;
}

.domain-hub-tabs .message-folder-count {
  min-width: 20px;
  height: 20px;
  font-size: 12px;
}

.domain-hub-panel[hidden] {
  display: none;
}

.domain-hub-panel .domain-browser,
.domain-hub-panel .personal-domain-panel {
  margin-top: 0;
}

.domain-hub-panel .surface-section-heading h3 {
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 18px;
}

.domain-hub-panel .domain-filter {
  height: 46px;
  min-height: 46px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.domain-catalog-visibility {
  display: flex;
  align-items: center;
  min-height: 28px;
  gap: 6px;
  margin: 0 2px 6px;
  color: rgba(222, 226, 244, .56);
  font-size: 12px;
  line-height: 16px;
}

.domain-catalog-visibility .ui-icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: rgba(137, 226, 181, .78);
}

.domain-hub-panel .domain-scroll-list {
  gap: 9px;
  max-height: min(51vh, 420px);
}

.domain-plan-group {
  --domain-tier-rgb: 117, 204, 159;
  display: grid;
  gap: 5px;
  padding-left: 7px;
  border-left: 2px solid rgba(var(--domain-tier-rgb), .56);
}

.domain-plan-group.domain-plan-pro {
  --domain-tier-rgb: 108, 152, 255;
}

.domain-plan-group.domain-plan-ultra {
  --domain-tier-rgb: 172, 130, 255;
}

.domain-plan-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  gap: 8px;
}

.domain-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(var(--domain-tier-rgb), .28);
  border-radius: 999px;
  background: rgba(var(--domain-tier-rgb), .1);
  color: rgb(var(--domain-tier-rgb));
  font-size: 12px;
  font-weight: 760;
  line-height: 16px;
}

.domain-plan-group-heading small {
  color: rgba(222, 226, 244, .5);
  font-size: 12px;
  line-height: 16px;
}

.domain-plan-group-list {
  display: grid;
  gap: 5px;
}

.domain-hub-panel .domain-choice {
  min-height: 58px;
  padding-block: 6px;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .028);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.domain-hub-panel .domain-choice strong {
  font-size: 13px;
  line-height: 18px;
}

.domain-hub-panel .domain-choice small,
.domain-hub-panel .domain-preference-note span,
.domain-hub-panel .domain-preference-note strong {
  font-size: 12px;
  line-height: 16px;
}

.domain-hub-panel .domain-favorite {
  background: rgba(var(--domain-tier-rgb, 117, 204, 159), .1);
  color: rgba(var(--domain-tier-rgb, 117, 204, 159), .92);
}

.domain-hub-panel .personal-domain-panel {
  padding: 11px;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .025);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.domain-hub-panel .personal-domain-panel p,
.domain-hub-panel .personal-domain-panel small,
.domain-hub-panel .domain-disclosure p {
  font-size: 12px;
  line-height: 17px;
}

.domain-hub-empty {
  display: flex;
  align-items: center;
  min-height: 64px;
  gap: 9px;
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, .11);
  border-radius: 14px;
  color: rgba(224, 228, 244, .56);
  font-size: 12px;
  line-height: 17px;
}

.domain-hub-empty .ui-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: rgba(164, 174, 239, .7);
}

@media (max-width: 360px) {
  .domain-hub-heading {
    gap: 6px;
  }

  .domain-hub-heading h2 {
    font-size: 20px;
  }

  .domain-hub-shop-action {
    width: 44px;
    padding: 0 !important;
  }

  .domain-hub-shop-action > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .domain-hub-tabs .message-folder-tab {
    gap: 3px;
  }

  .domain-plan-group {
    padding-left: 5px;
  }
}

/* --------------------------------------------------------------------------
   Official workspace v20

   A single, restrained product language across every consumer surface:
   solid surfaces, one 44px control height, readable navigation rows and no
   photographic scene or nested glass. Feature-specific rules above retain
   layout semantics; this final layer owns the shared visual system.
   -------------------------------------------------------------------------- */

:root {
  --bg: #0b0d12;
  --text: #f5f7fa;
  --muted: #aab3c2;
  --blue: #5364e8;
  --cyan: #8290ff;
  --violet: #7c6bf2;
  --danger: #e45d55;
  --hairline: #2a3240;
  --glass: #121620;
  --glass-strong: #181d28;
  --glass-surface: #121620;
  --glass-elevated: #181d28;
  --glass-overlay: #181d28;
  --main-glass-fill: #121620;
  --main-glass-border: #2a3240;
  --main-glass-highlight: transparent;
  --main-glass-shadow: none;
  --overlay-glass-fill: #181d28;
  --overlay-glass-border: #323b4c;
  --overlay-glass-filter: none;
  --official-bg: #0b0d12;
  --official-surface: #121620;
  --official-elevated: #181d28;
  --official-border: #2a3240;
  --official-border-strong: #3a4558;
  --official-accent: #5364e8;
  --official-accent-hover: #4d5edc;
  --official-accent-soft: rgba(101, 116, 247, .14);
  --official-text: #f5f7fa;
  --official-secondary: #aab3c2;
  --official-tertiary: #7f8a9c;
  --official-danger: #e45d55;
  --official-focus: #aab4ff;
  --control-compact: 44px;
  --control-default: 44px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-sheet: 20px;
  --radius-icon: 10px;
  --focus-ring: var(--official-focus);
}

html,
body {
  background: var(--official-bg);
}

body {
  color: var(--official-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  background-image:
    radial-gradient(70% 38% at 50% -8%, rgba(101, 116, 247, .16), transparent 72%),
    linear-gradient(180deg, #0d111a 0%, var(--official-bg) 58%, #090b10 100%);
  background-attachment: scroll;
}

body::before {
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  opacity: .42;
  transform: none;
  filter: none;
  background-image:
    linear-gradient(rgba(154, 168, 196, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 168, 196, .035) 1px, transparent 1px);
  background-position: center top;
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.35) 46%, transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.35) 46%, transparent 82%);
  animation: none;
}

body::after {
  z-index: 0;
  inset: 0;
  opacity: .34;
  background:
    radial-gradient(46% 30% at 78% 12%, rgba(101, 116, 247, .2), transparent 74%),
    radial-gradient(40% 26% at 12% 38%, rgba(62, 79, 133, .13), transparent 76%);
  mask-image: none;
  -webkit-mask-image: none;
  animation: none;
}

.human-scene,
.scene-stage,
.scene-lights,
.scene-actors,
.scene-people,
.shadow-system {
  display: none !important;
}

button,
input,
select,
textarea {
  color: var(--official-text);
}

button {
  min-height: var(--control-compact) !important;
  border-radius: var(--radius-control) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}

button:disabled {
  cursor: not-allowed;
  opacity: .56;
}

button.primary,
button.secondary,
button.ghost,
button.danger-button,
.full-button,
.sheet-actions button,
button.tiny,
.tariff-action,
.surface-back,
.promo-row .primary,
.support-composer button,
.domain-search-row button,
.domain-shop-search button,
.domain-shop-buy,
.domain-shop-load-more,
.domain-hub-shop-action,
.referral-code-card button,
.invite-link-box button,
.invite-pagination button,
.domain-pagination button {
  min-height: var(--control-compact) !important;
  padding-inline: 14px !important;
  border-radius: var(--radius-control) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

button.primary {
  border-color: #7483ff;
  background: var(--official-accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(48, 61, 180, .24);
}

button.secondary {
  border-color: var(--official-border-strong);
  background: #1b2230;
  color: var(--official-text);
  box-shadow: none;
}

button.ghost {
  border-color: var(--official-border);
  background: transparent;
  color: var(--official-secondary);
  box-shadow: none;
}

button.danger-button,
.danger-choice {
  border-color: rgba(228, 93, 85, .44);
  background: rgba(228, 93, 85, .11);
  color: #ffb7b1;
  box-shadow: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--official-focus);
  outline-offset: 2px;
}

input::placeholder,
textarea::placeholder {
  color: var(--official-secondary);
  opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  min-height: var(--control-compact) !important;
  border-color: var(--official-border) !important;
  border-radius: var(--radius-control) !important;
  background: #0f141e !important;
  color: var(--official-text);
  box-shadow: none !important;
  font-size: 14px;
}

textarea {
  border-color: var(--official-border) !important;
  border-radius: var(--radius-control) !important;
  background: #0f141e !important;
  box-shadow: none !important;
  font-size: 14px;
}

.shell {
  width: min(100%, 720px);
  padding: max(14px, env(safe-area-inset-top)) 14px calc(28px + var(--app-bottom-inset));
}

.topbar {
  min-height: 48px;
  animation: none;
}

.topbar h1 {
  color: var(--official-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  text-shadow: none;
}

.topbar h1 span { color: var(--official-accent); }

.eyebrow,
.sheet-kicker {
  color: var(--official-tertiary);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .1em;
}

.language-button,
.user-menu-button,
.hero,
.search-wrap,
.mailbox-card,
.empty,
.count,
.sheet,
.language-menu {
  border: 1px solid var(--official-border);
  background: var(--official-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.language-button,
.user-menu-button {
  height: var(--control-compact);
  min-height: var(--control-compact) !important;
}

.user-menu-button { width: 112px; }

.language-menu {
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
}

.language-option {
  height: var(--control-compact);
  min-height: var(--control-compact) !important;
  border: 0;
  background: transparent;
}

.hero {
  margin: 10px 0 14px;
  padding: 14px;
  border-radius: var(--radius-card);
}

.hero::before,
.mailbox-card::before { display: none; }

.hero-heading {
  gap: 10px;
  margin-bottom: 10px;
}

.hero #hello {
  color: var(--official-secondary);
  font-weight: 500;
}

.hero h2 {
  color: var(--official-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.hero-commerce-actions {
  align-items: stretch;
  gap: 6px;
}

.domain-shop-entry,
#planButton.limit-badge {
  height: var(--control-compact);
  min-height: var(--control-compact) !important;
  border-color: var(--official-border-strong);
  border-radius: var(--radius-control) !important;
  background: #1b2230;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.plan-badge,
.status-pill,
.mailbox-tag,
.domain-plan-badge,
.account-menu-badge {
  border-radius: 999px;
}

.quick-create {
  grid-template-columns: minmax(0, 1fr) auto var(--control-compact);
  gap: 8px;
}

.quick-create input,
.quick-create button,
.random-button {
  height: var(--control-compact) !important;
  min-height: var(--control-compact) !important;
}

.quick-create .primary { padding-inline: 16px !important; }

.random-button {
  width: var(--control-compact);
  min-width: var(--control-compact);
  padding: 0 !important;
}

.section-heading { margin-bottom: 8px; }
.section-heading h3 { font-size: 18px; font-weight: 700; }

.count {
  color: var(--official-secondary);
  background: var(--official-surface);
}

.search-wrap {
  height: var(--control-compact);
  min-height: var(--control-compact);
  padding-inline: 12px;
}

.mailbox-list { gap: 6px; }

.mailbox-card {
  min-height: 56px;
  padding: 6px;
  border-radius: 14px;
}

.mailbox-open { min-height: var(--control-compact); }

.mailbox-email,
.message-subject,
.account-menu-copy strong {
  color: var(--official-text);
}

.mailbox-status-text,
.mailbox-timer,
.message-date,
.message-preview,
.muted,
.account-menu-copy small {
  color: var(--official-secondary);
}

.copy-button,
.mailbox-options-button,
.icon-button,
.modal-close,
.message-row-action,
.message-select,
.access-button,
.purchase-button,
.delete-button,
.tag-icon-button {
  width: var(--control-compact);
  min-width: var(--control-compact);
  height: var(--control-compact);
  min-height: var(--control-compact) !important;
  padding: 0 !important;
  border: 1px solid var(--official-border) !important;
  border-radius: var(--radius-control) !important;
  background: #171d29 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.copy-button::before,
.mailbox-options-button::before { display: none; }

.empty {
  min-height: 120px;
  padding: 20px 16px;
  border-style: dashed;
  color: var(--official-secondary);
}

.backdrop {
  background: rgba(3, 6, 12, .76);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sheet,
.sheet.sheet-account,
.sheet.account-sheet,
.sheet[data-variant="account"],
.sheet.sheet-domain-shop,
.sheet[data-variant="domain-shop"] {
  width: min(calc(100% - 24px), 620px);
  max-height: min(calc(var(--stable-vh) * 100 - 24px), 720px);
  padding: 12px 18px 18px;
  border: 1px solid var(--official-border-strong);
  border-radius: var(--radius-sheet);
  background: var(--official-elevated);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .34);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-close {
  position: sticky;
  top: 0;
  margin: -2px -2px -42px auto;
}

.grabber {
  width: 40px;
  height: 4px;
  background: #667085;
}

.sheet h2 {
  color: var(--official-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.plan-sheet-heading {
  padding-right: 72px;
}

.domain-hub-heading {
  gap: 8px;
  padding-right: 66px;
}

.sheet-actions {
  gap: 8px;
  margin-top: 16px;
}

.sheet-actions > button {
  height: var(--control-compact);
}

.surface-card,
.history-row,
.support-ticket-row,
.help-rule,
.wallet-balance-card,
.security-card,
.support-chat-preview,
.message,
.domain-choice,
.personal-domain-panel,
.tariff-card,
.policy-card,
.access-choice,
.deleted-row,
.pending-order,
.promo-row,
.admin-card {
  border: 1px solid var(--official-border) !important;
  border-radius: var(--radius-card) !important;
  background: var(--official-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sheet .message,
.sheet .surface-card,
.sheet .history-row,
.sheet .domain-choice,
.sheet .support-ticket-row {
  background: var(--official-surface) !important;
  box-shadow: none !important;
}

.account-menu-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-menu-grid > .account-menu-item:last-child:nth-child(odd) {
  grid-column: auto;
}

.account-menu-item,
.account-menu-item.has-badge {
  grid-template-columns: 36px minmax(0, 1fr) auto 16px;
  height: 68px;
  min-height: 68px !important;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--official-border);
  border-radius: 12px !important;
  background: var(--official-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.account-menu-item::before,
.account-menu-item::after { display: none; }

.account-menu-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--official-border);
  border-radius: 10px;
  background: var(--official-accent-soft);
  color: #b9c2ff;
}

.account-menu-copy strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  white-space: normal;
}

.account-menu-copy small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.account-menu-chevron { display: block; }

.message-folder-tabs,
.domain-hub-tabs {
  border: 1px solid var(--official-border);
  border-radius: 12px;
  background: #0f141e;
}

.message-folder-tab {
  min-height: var(--control-compact) !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.message-folder-tab.is-active,
.message-folder-tab[aria-selected="true"] {
  background: var(--official-accent-soft) !important;
  color: #dce1ff;
}

.domain-shop-sticky { background: transparent; }

.domain-shop-search,
.domain-filter {
  min-height: var(--control-compact) !important;
  border: 1px solid var(--official-border) !important;
  border-radius: var(--radius-control) !important;
  background: #0f141e !important;
  box-shadow: none !important;
}

.domain-shop-offer,
.domain-shop-progress-note {
  border-color: var(--official-border) !important;
  background: transparent !important;
}

.domain-shop-progress-note {
  height: max-content;
  min-height: 48px;
  padding-block: 6px;
}

.domain-shop-filters button {
  /* Flat category filters must not inherit native button chrome or the
     global rounded-control theme. Keep the selected underline straight. */
  flex: 1 0 auto;
  min-height: var(--control-compact) !important;
  padding-inline: 8px;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  transform: none !important;
  filter: none !important;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--official-secondary);
}

.domain-shop-filters button.is-active {
  border-bottom-color: var(--official-accent) !important;
  color: var(--official-text);
}

.domain-shop-filters button:focus-visible {
  outline: 2px solid var(--official-focus);
  outline-offset: -2px;
}

.domain-shop-buy,
.domain-shop-inline-action,
.domain-shop-load-more {
  background: transparent !important;
  color: #b9c2ff;
  box-shadow: none !important;
}

.toast {
  border: 1px solid var(--official-border-strong);
  border-radius: 12px;
  background: var(--official-elevated);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover {
    border-color: #4d5b72;
    filter: none;
  }

  button.primary:not(:disabled):hover {
    border-color: #8491ff;
    background: var(--official-accent-hover);
  }
}

@media (max-width: 520px) {
  #planSummary {
    display: none;
  }

  .domain-hub-shop-action {
    width: var(--control-compact);
    min-width: var(--control-compact);
    padding-inline: 0 !important;
  }

  .domain-hub-shop-action > span {
    display: none;
  }

  .account-menu-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .account-menu-grid > .account-menu-item:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .account-menu-item,
  .account-menu-item.has-badge {
    grid-template-columns: 36px minmax(0, 1fr) auto 16px;
    height: 68px;
    min-height: 68px !important;
    padding: 7px 10px;
  }

  .account-menu-badge {
    position: static;
  }

  .account-menu-item.has-badge .account-menu-copy {
    padding-right: 0;
  }
}

@media (max-width: 360px) {
  .shell { padding-inline: 12px; }

  .user-menu-button {
    width: 108px;
    padding-inline: 6px;
  }

  .hero { padding: 12px; }

  .hero-heading {
    align-items: center;
    flex-wrap: nowrap;
  }

  .quick-create {
    grid-template-columns: minmax(0, 1fr) auto var(--control-compact);
  }

  .quick-create .primary { padding-inline: 12px !important; }

  .account-menu-item,
  .account-menu-item.has-badge {
    grid-template-columns: 34px minmax(0, 1fr) auto 16px;
    height: 68px;
    min-height: 68px !important;
  }

  .account-menu-icon {
    width: 34px;
    height: 34px;
  }

  .sheet,
  .sheet.sheet-account,
  .sheet.account-sheet,
  .sheet[data-variant="account"] {
    width: calc(100% - 16px);
    padding-inline: 14px;
  }
}

@media (min-width: 721px) {
  .sheet {
    border-radius: 20px 20px 20px 20px;
  }

  .sheet .grabber { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Informative 12px copy must remain WCAG AA on official surfaces. */
.surface-stat-list span,
.plan-validity,
.plan-validity span:last-child,
.plan-stats span,
.tariff-card p,
.policy-card p,
.promo-copy p,
.wallet-balance-card > span,
.wallet-balance-card > small,
.surface-card small,
.mail-settings-form label > span,
.setting-toggle:not(.is-on),
.security-card p,
.referral-code-card > span,
.help-rule p,
.compact-copy,
.compact-empty,
.domain-preference-note span,
.domain-preference-note strong,
.domain-shop-price-note,
.domain-shop-ideas-note,
.domain-shop-plan-gate small,
.domain-shop-empty p {
  color: var(--official-secondary);
}

.capability-note {
  color: #ffd09a !important;
}

/* Mobile filter stability v21

   iOS zooms a WebView when a focused text control renders below 16px. Once
   the keyboard closes, that zoom can leave the visual viewport offset and
   make a correctly sized search field look wider than the screen. Keep all
   phone text controls at the iOS-safe size, retain pinch zoom, and make the
   search tracks explicitly shrinkable around WebKit's native clear button. */
.section,
.domain-browser,
.domain-hub-panel,
.search-wrap,
.domain-filter,
.domain-shop-search {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.search-wrap,
.domain-filter,
.domain-shop-search {
  inline-size: 100%;
}

.search-wrap input,
.domain-filter input {
  flex: 1 1 0;
  inline-size: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.domain-shop-search input {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Compound search controls own one surface and one focus indicator. The
   generic, important input theme must not paint a second rectangle over
   their border or force a 44px input inside a 44px bordered container. */
:is(.search-wrap, .domain-filter, .domain-shop-search) input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 0 !important;
  min-block-size: 0 !important;
  margin: 0;
  padding-block: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  outline-offset: 0;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px !important;
}

:is(.search-wrap, .domain-filter) input:not([type="checkbox"]):not([type="radio"]) {
  height: 100%;
  padding-inline: 0;
}

:is(.search-wrap, .domain-filter, .domain-shop-search):focus-within {
  border-color: var(--official-focus) !important;
  box-shadow: none !important;
  outline: 2px solid var(--official-focus);
  outline-offset: -2px;
}

.special-mailbox-form { display: grid; gap: 14px; min-width: 0; }
.special-mailbox-form label { display: grid; gap: 6px; min-width: 0; }
.special-mailbox-form label[hidden] { display: none; }
.special-mailbox-form input, .special-mailbox-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.special-mailbox-form [role="status"] { overflow-wrap: anywhere; }

html,
body,
.sheet,
.email-document-shell,
.email-document-frame,
.domain-scroll-list,
.domain-shop-results-list {
  /* Preserve pan and pinch gestures, but suppress accidental double-tap zoom. */
  touch-action: manipulation;
}

@media (hover: none) and (pointer: coarse),
       (max-width: 520px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Working-domain wheel: native scrolling and snap, never page transforms. */
.working-domain-summary {
  min-width: 0;
  margin: 8px 0 0;
  color: var(--official-secondary);
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.working-domain-heading { padding-right: 48px; }
.working-domain-heading h2 { margin-bottom: 8px; }
.working-domain-hint,
.domain-wheel-lock p {
  margin: 0 0 12px;
  color: var(--official-secondary);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#workingDomainPicker,
.domain-wheel-frame,
.working-domain-links { min-width: 0; max-width: 100%; }

.domain-wheel-frame {
  --wheel-row-height: 48px;
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--official-border);
  border-radius: 14px;
  isolation: isolate;
}

.domain-wheel {
  position: relative;
  height: calc(var(--wheel-row-height) * 5);
  padding-block: calc(var(--wheel-row-height) * 2);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline-offset: -3px;
  -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent);
}

.domain-wheel::-webkit-scrollbar { display: none; }
.domain-wheel:focus-visible { outline: 3px solid var(--official-focus); }

.domain-wheel-highlight {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--wheel-row-height) * 2);
  height: var(--wheel-row-height);
  border: 1px solid rgba(130, 145, 255, .3);
  border-radius: 10px;
  background: rgba(111, 126, 255, .1);
  pointer-events: none;
}

.domain-wheel-option {
  --wheel-tier: #b7c1d3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: var(--wheel-row-height);
  padding-inline: 12px;
  box-sizing: border-box;
  scroll-snap-align: center;
  cursor: pointer;
  color: var(--official-secondary);
  opacity: .72;
}

.domain-wheel-option.domain-plan-pro { --wheel-tier: #a5c6ff; }
.domain-wheel-option.domain-plan-ultra { --wheel-tier: #d1b6ff; }
.domain-wheel-option.is-distant { opacity: .44; }
.domain-wheel-option.is-selected { opacity: 1; color: var(--official-text); }
.domain-wheel-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  transition: font-size .14s ease, color .14s ease;
}
.domain-wheel-option.is-selected .domain-wheel-name { font-size: 21px; font-weight: 650; }
.domain-wheel-tier {
  flex: 0 0 auto;
  color: var(--wheel-tier);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.domain-wheel-selection {
  min-height: 34px;
  margin: 8px 0;
  color: var(--official-secondary);
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  overflow-wrap: anywhere;
}
.domain-wheel-actions { display: grid; gap: 8px; }
.working-domain-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--official-border);
}
.working-domain-links button,
.domain-wheel-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 10px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.working-domain-links button { font-size: 12px; line-height: 16px; }
.working-domain-links .ui-icon { flex: 0 0 16px; width: 16px; height: 16px; }

.monthly-promo-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.monthly-promo-choices button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  height: auto;
  padding: 12px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.monthly-promo-choices small { font-size: 12px; font-weight: 400; }
.monthly-promo-result { display: grid; gap: 12px; min-width: 0; }
.monthly-promo-result > span { color: var(--official-secondary); font-size: 12px; }
.monthly-promo-issued-plan { color: var(--official-text); font-size: 14px; }
.monthly-promo-result > code { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }

@media (prefers-reduced-motion: reduce) {
  .domain-wheel { scroll-behavior: auto; }
  .domain-wheel-name { transition: none; }
}

/* Outbound compose: one compact row, one recipient, and readable mobile fields. */
.message-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 0 8px;
}
.message-compose-quota {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--official-secondary);
  font-size: 12px;
  line-height: 17px;
  overflow-wrap: anywhere;
}
.message-compose-toolbar > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 18px;
}
.mail-compose-form { min-width: 0; }
.mail-compose-form h2 { margin-bottom: 8px; padding-right: 44px; }
.compose-from { margin: 0 0 8px; overflow-wrap: anywhere; font-size: 13px; line-height: 18px; }
.compose-from > span { color: var(--official-secondary); }
.compose-quota, .compose-rules, .compose-draft-hint {
  margin: 8px 0;
  color: var(--official-secondary);
  font-size: 12px;
  line-height: 17px;
  overflow-wrap: anywhere;
}
.compose-quota:empty { display: none; }
.mail-compose-form .field { margin-top: 12px; }
.mail-compose-form .field input,
.mail-compose-form .field textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
}
.mail-compose-form .field textarea { min-height: 112px; resize: vertical; }
.mail-compose-form .sheet-actions > button { min-height: 44px; }
.compose-error { margin: 10px 0 0; color: var(--official-danger, #d92d20); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.compose-draft-hint { text-align: center; }

/* Mail editors own one scroll area. Focus is drawn inside controls so the
   scrollport never slices the left/right edge of the keyboard focus ring. */
#sheet.sheet-mail-editor {
  display: flex;
  flex-direction: column;
  top: calc(var(--mail-editor-top, 0px) + var(--mail-editor-height, 100dvh) / 2);
  max-height: min(calc(var(--mail-editor-height, 100dvh) - 24px), 720px);
  overflow: hidden;
  padding-bottom: 8px;
}
#sheet.sheet-mail-editor > .grabber { flex: 0 0 auto; }
#sheet.sheet-mail-editor > .modal-close { flex: 0 0 44px; }
#sheet.sheet-mail-editor #sheetContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Overlay scrollbars need their own gutter on macOS/iOS too. Bottom space
     belongs to the opaque sticky footer, not to an uncovered scrollport. */
  padding: 2px 12px 0 3px;
  margin-inline: -3px;
  scroll-padding-block: 12px 76px;
}
.mail-compose-form,
.mail-reply-form { min-width: 0; padding-bottom: 0; }
.mail-reply-form h2 { padding-right: 44px; }
.mail-reply-form .field input,
.mail-reply-form .field textarea { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
.mail-reply-form .field textarea { min-height: 112px; resize: vertical; }
.sheet-mail-editor .field input:focus,
.sheet-mail-editor .field textarea:focus,
.sheet-mail-editor input:focus-visible,
.sheet-mail-editor textarea:focus-visible {
  outline: 2px solid var(--official-focus);
  outline-offset: -3px;
  border-color: var(--official-focus);
  box-shadow: inset 0 0 0 1px var(--official-focus);
}
.sheet-mail-editor button:focus-visible { outline-offset: -3px; }
.mail-compose-form .sheet-actions,
.mail-reply-form .sheet-actions {
  position: sticky;
  z-index: 2;
  bottom: 0;
  margin-top: 8px;
  margin-bottom: 0;
  padding: 8px 0 max(12px, env(safe-area-inset-bottom));
  background: var(--official-elevated);
  box-shadow: 0 -8px 10px var(--official-elevated);
}
.mail-reply-form .sheet-actions > button { min-height: 44px; }
.mail-attachments { margin: 12px 0; min-width: 0; }
.attachment-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 10px;
  white-space: normal;
  font-size: 13px;
}
.attachment-add .ui-icon { flex: 0 0 18px; }
.attachment-hint,
.attachment-status { margin: 6px 0; color: var(--official-secondary); font-size: 12px; line-height: 17px; overflow-wrap: anywhere; }
.attachment-status:empty { display: none; }
.attachment-list { display: grid; gap: 6px; padding: 0; margin: 8px 0; list-style: none; }
.attachment-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px 4px 10px; border: 1px solid var(--official-border); border-radius: 10px; }
.attachment-details { display: grid; flex: 1 1 auto; min-width: 0; gap: 3px; }
.attachment-details strong { font-size: 13px; line-height: 18px; font-weight: 600; overflow-wrap: anywhere; }
.attachment-details small { color: var(--official-secondary); font-size: 12px; line-height: 16px; }
.attachment-remove { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
.mail-attachment-downloads { margin: 14px 0; }
.mail-attachment-downloads h3 { font-size: 14px; line-height: 20px; }
.attachment-download {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 10px;
  text-align: left;
}
.attachment-download .ui-icon { flex: 0 0 18px; }
.attachment-download:focus-visible { outline-offset: -3px; }

/* Account billing: compact catalog facts and a stable order-to-wallet path. */
.plan-feature-list {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
  color: var(--official-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.plan-feature-list li { min-width: 0; overflow-wrap: anywhere; }
.plan-account-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.plan-account-links button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 44px; padding: 8px; white-space: normal; font-size: 13px; }
.plan-account-links .ui-icon { flex: 0 0 18px; }
.payment-wallet-surface { min-width: 0; }
.payment-wallet-surface > h2 { padding-right: 44px; }
.payment-balance-note,
.payment-transition p,
.wallet-order-return p { margin: 10px 0; color: var(--official-secondary); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.payment-transition { border-left: 2px solid var(--official-accent); padding-left: 12px; margin: 14px 0; }
.wallet-order-return { padding: 2px 0 10px; }
.wallet-order-return button { width: 100%; min-height: 44px; white-space: normal; }
.payment-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.payment-row-actions button { min-height: 44px; max-width: 100%; white-space: normal; }
.payment-order-row { display: flex; width: 100%; min-height: 64px; gap: 10px; text-align: left; }
.payment-order-row > span { display: grid; min-width: 0; gap: 4px; }
.payment-order-row > span:first-child { flex: 1 1 auto; }
.payment-order-row .history-value { max-width: 48%; }
.payment-order-row strong,
.payment-order-row small { overflow-wrap: anywhere; white-space: normal; }
.payment-order-row strong { font-size: 14px; }
.payment-order-row small { color: var(--official-secondary); font-size: 12px; line-height: 1.35; }
.payment-order-row:focus-visible,
.payment-row-actions button:focus-visible { outline-offset: -3px; }
@media (max-width: 380px) {
  .plan-account-links { grid-template-columns: minmax(0, 1fr); }
  .payment-wallet-surface .history-row:has(.payment-row-actions) { flex-wrap: wrap; }
  .payment-row-actions { width: 100%; }
}

/* Public support stays reachable independently of login and ticket loading. */
.support-contacts { min-width: 0; margin: 14px 0; }
.support-contacts h3 { margin: 0 0 8px; color: var(--official-secondary); font-size: 13px; font-weight: 600; line-height: 1.4; }
.support-contact-links { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.support-contact-links a { display: flex; flex: 1 1 130px; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 48px; padding: 8px 10px; border: 1px solid var(--official-border); border-radius: 10px; background: transparent; color: #c4cbff; text-decoration: none; overflow-wrap: anywhere; }
.support-contact-links a:hover { background: var(--official-accent-soft); }
.support-contact-links a:focus-visible { outline: 2px solid #b3b9ff; outline-offset: -3px; }
.support-contact-links span { color: var(--official-secondary); font-size: 11px; line-height: 15px; }
.support-contact-links strong { font-size: 13px; line-height: 18px; font-weight: 600; }
.public-support { padding-top: 16px; border-top: 1px solid var(--official-border); }

/* User administration shares the sheet's single scroll owner, including on iOS. */
.account-blocked .hero,
.account-blocked .section-heading,
.account-blocked #searchWrap,
.account-blocked #emptyState { display: none !important; }
.account-blocked-card { min-width: 0; padding: 16px; border: 1px solid var(--official-border); border-radius: 14px; background: var(--official-field, #0f141d); }
.account-blocked-card h2 { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.account-blocked-card > p { color: var(--official-secondary); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.admin-users-surface { min-width: 0; max-width: 100%; }
.admin-users-surface h2 { padding-right: 44px; overflow-wrap: anywhere; }
.admin-users-surface h3,
.admin-users-surface p,
.admin-users-surface small,
.admin-users-surface strong { overflow-wrap: anywhere; }
.admin-users-filters,
.admin-user-action-form { display: grid; gap: 12px; min-width: 0; margin: 16px 0; }
.admin-users-filters label,
.admin-user-action-form label { display: grid; gap: 6px; min-width: 0; }
.admin-users-filters label > span,
.admin-user-action-form label > span { color: var(--official-secondary); font-size: 12px; line-height: 1.4; }
.admin-users-filter-pair,
.admin-user-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.admin-users-surface input,
.admin-users-surface select,
.admin-users-surface textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid var(--official-border); border-radius: 10px; padding: 10px 12px; color: var(--official-text); background: var(--official-field, #0f141d); font-size: 16px; line-height: 1.4; }
.admin-users-surface textarea { resize: vertical; }
.admin-users-surface input:focus,
.admin-users-surface select:focus,
.admin-users-surface textarea:focus { outline: 2px solid #b3b9ff; outline-offset: -3px; }
.admin-users-surface button,
.admin-users-surface summary { min-height: 48px; height: auto; white-space: normal; }
.admin-users-surface button:focus-visible,
.admin-users-surface summary:focus-visible { outline-offset: -3px; }
.admin-directory-count { font-size: 13px; color: var(--official-secondary); margin: 12px 0; }
.admin-directory-list { display: grid; gap: 8px; min-width: 0; }
.admin-directory-row { display: grid; width: 100%; min-width: 0; gap: 9px; padding: 12px; margin: 0; border: 1px solid var(--official-border); border-radius: 12px; background: var(--official-field, #0f141d); text-align: left; }
.admin-directory-row > span { display: grid; min-width: 0; gap: 3px; }
.admin-directory-row strong { font-size: 14px; line-height: 1.4; }
.admin-directory-row small { color: var(--official-secondary); font-size: 12px; line-height: 1.5; }
.admin-directory-row .admin-directory-plan strong { font-size: 12px; color: #c4cbff; }
#adminUsersMore { margin-top: 12px; }
.admin-user-facts { margin: 16px 0; }
.admin-user-facts > div { gap: 12px; align-items: start; }
.admin-user-facts > div > span,
.admin-user-facts > div > strong { min-width: 0; flex: 1 1 0; white-space: normal; overflow-wrap: anywhere; }
.admin-user-actions { margin: 16px 0; grid-auto-rows: 1fr; }
.sheet .admin-users-surface button,
.sheet .admin-users-surface summary { min-height: 48px; }
.admin-user-actions button { padding: 10px; font-size: 13px; }
.admin-access-state { font-size: 13px; color: #b1dec9; }
.admin-access-state.is-blocked { color: #ffc0bd; }
.admin-action-target { padding: 12px; border: 1px solid var(--official-border); border-radius: 10px; line-height: 1.5; }
.admin-message-preview,
.admin-user-reason { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.admin-message-preview { padding: 12px; background: var(--official-field, #0f141d); border: 1px solid var(--official-border); border-radius: 10px; }
.admin-user-history { min-width: 0; padding: 0 12px; margin: 10px 0; border: 1px solid var(--official-border); border-radius: 12px; }
.admin-user-history summary { align-content: center; padding: 12px 0; font-size: 14px; overflow-wrap: anywhere; cursor: pointer; }
.admin-history-entry { display: grid; min-width: 0; gap: 6px; padding: 12px 0; border-top: 1px solid var(--official-border); }
.admin-history-entry strong { font-size: 13px; }
.admin-history-entry small { font-size: 12px; color: var(--official-secondary); }
.admin-history-entry p { font-size: 13px; margin: 0; }
#adminActionResult { min-height: 20px; font-size: 14px; line-height: 1.5; }
@media (max-width: 380px) {
  .admin-users-filter-pair,
  .admin-user-actions { grid-template-columns: minmax(0, 1fr); }
}