@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;

  /* Main theme colors. Change this block to repaint the product. */
  --theme-ink: #071f3c;
  --theme-ink-deep: #061d38;
  --theme-ink-mid: #102d4c;
  --theme-ink-soft: #153252;
  --theme-ink-panel: #183452;
  --theme-ink-muted: #263f5d;
  --theme-ink-black: #10151f;
  --theme-mint: #70d39b;
  --theme-mint-hover: #4fbd82;
  --theme-mint-text: #28714d;
  --theme-paper: #ffffff;
  --theme-page: #f5f6f7;
  --theme-paper-soft: #f7f8fa;
  --theme-text: #0e1828;
  --theme-muted: #9aa3ad;
  --theme-label: #aab0b8;
  --theme-line: #e4e7eb;
  --theme-red: #b42318;
  --theme-white-rgb: 255 255 255;
  --theme-page-rgb: 245 246 247;
  --theme-black-rgb: 0 0 0;
  --theme-ink-rgb: 7 31 60;
  --theme-panel-border-rgb: 11 31 60;
  --theme-mint-rgb: 112 211 155;
  --theme-mint-shadow-rgb: 80 191 130;
  --theme-red-rgb: 180 35 24;
  --theme-red-soft-rgb: 255 205 205;
  --theme-shadow-deep-rgb: 5 20 40;
  --theme-shadow-soft-rgb: 6 22 43;

  --auth-page-bg:
    radial-gradient(circle at 12% 8%, rgb(var(--theme-white-rgb) / 0.08), transparent 24%),
    linear-gradient(145deg, var(--theme-ink), var(--theme-ink-muted));
  --auth-panel-bg: linear-gradient(160deg, var(--theme-ink-deep) 0%, var(--theme-ink-mid) 56%, var(--theme-ink-muted) 100%);
  --app-page-bg: linear-gradient(150deg, var(--theme-ink) 0%, var(--theme-ink-panel) 48%, var(--theme-page) 48.2%, var(--theme-page) 100%);
  --app-page-mobile-bg: linear-gradient(180deg, var(--theme-ink) 0%, var(--theme-ink-panel) 260px, var(--theme-page) 260px);

  --ink: var(--theme-ink);
  --ink-soft: var(--theme-ink-soft);
  --ink-2: var(--theme-ink-muted);
  --mint: var(--theme-mint);
  --mint-dark: var(--theme-mint-hover);
  --paper: var(--theme-paper);
  --paper-soft: var(--theme-paper-soft);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --red: var(--theme-red);
  --shadow-deep: 0 32px 80px rgb(var(--theme-shadow-deep-rgb) / 0.3);
  --shadow-soft: 0 18px 38px rgb(var(--theme-shadow-soft-rgb) / 0.12);
  font-family: "Exo 2", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background: var(--ink);
  font-family: "Exo 2", Arial, Helvetica, sans-serif;
  font-weight: 500;
  overflow-x: clip;
}

button,
input {
  font: inherit;
}

img {
  max-width: 100%;
}

a {
  color: var(--mint-dark);
  font-weight: 500;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

strong {
  font-weight: 600;
}

h1 {
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 4px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

p {
  color: var(--muted);
  line-height: 1.5;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  padding: clamp(14px, 4vw, 42px);
  background: var(--auth-page-bg);
}

.auth-page::before,
.auth-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

.auth-page::before {
  width: 46vw;
  height: 46vw;
  min-width: 320px;
  min-height: 320px;
  left: -18vw;
  top: -16vw;
  border-radius: 0 0 46% 0;
  background: var(--theme-page);
  animation: auth-water-page-left 16s ease-in-out infinite;
  transform-origin: 12% 8%;
  will-change: border-radius, opacity, transform;
}

.auth-page::after {
  width: 36vw;
  height: 36vw;
  min-width: 260px;
  min-height: 260px;
  right: -14vw;
  bottom: -15vw;
  border-radius: 52% 0 0 0;
  background: var(--mint);
  animation: auth-water-page-right 18s ease-in-out infinite;
  transform-origin: 88% 92%;
  will-change: border-radius, opacity, transform;
}

@keyframes auth-water-page-left {
  0%,
  100% {
    border-radius: 0 0 46% 0;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  28% {
    border-radius: 0 0 70% 24%;
    opacity: 0.9;
    transform: translate3d(42px, 22px, 0) scale(1.12, 0.9);
  }

  58% {
    border-radius: 0 0 30% 18%;
    opacity: 0.97;
    transform: translate3d(12px, 52px, 0) scale(0.9, 1.16);
  }

  82% {
    border-radius: 0 0 64% 8%;
    opacity: 0.88;
    transform: translate3d(54px, 8px, 0) scale(1.1);
  }
}

@keyframes auth-water-page-right {
  0%,
  100% {
    border-radius: 52% 0 0 0;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  25% {
    border-radius: 34% 0 0 28%;
    opacity: 0.88;
    transform: translate3d(-52px, -28px, 0) scale(1.14, 0.9);
  }

  56% {
    border-radius: 72% 0 0 14%;
    opacity: 0.97;
    transform: translate3d(-18px, -58px, 0) scale(0.88, 1.18);
  }

  80% {
    border-radius: 42% 18% 0 0;
    opacity: 0.9;
    transform: translate3d(-64px, -16px, 0) scale(1.11);
  }
}

.auth-layout {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
}

.auth-layout.wide {
  width: min(560px, 100%);
}

.auth-layout.wide.legal-layout {
  width: min(960px, 100%);
}

.login-page .auth-layout {
  transform: translateY(clamp(-34px, -4vh, -18px));
}

.auth-panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 640px;
  padding: 30px clamp(20px, 6vw, 34px) 34px;
  border: 1px solid rgb(var(--theme-white-rgb) / 0.12);
  border-radius: 36px;
  background: var(--auth-panel-bg);
  box-shadow: var(--shadow-deep);
}

.auth-typing-backdrop {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -42px;
  width: max-content;
  pointer-events: none;
  transform: translateX(-50%);
  color: rgb(var(--theme-white-rgb) / 0.24);
  font-size: clamp(50px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-align: left;
}

.login-page .auth-typing-backdrop {
  top: auto;
  bottom: -88px;
}

@media (min-width: 700px) and (min-height: 820px) {
  .auth-typing-backdrop {
    top: -56px;
  }

  .login-page .auth-typing-backdrop {
    top: auto;
    bottom: -102px;
  }
}

@media (min-width: 700px) and (min-height: 960px) {
  .auth-typing-backdrop {
    top: -64px;
  }

  .login-page .auth-typing-backdrop {
    top: auto;
    bottom: -118px;
  }
}

.auth-typing-backdrop span {
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.auth-typing-measure {
  display: inline-block;
  visibility: hidden;
}

.auth-typing-text {
  position: absolute;
  inset: 0 auto auto 0;
  display: inline-block;
  width: 0;
  overflow: hidden;
  animation: auth-type-loop 32s steps(8, end) 3s infinite;
}

.auth-typing-cursor {
  position: absolute;
  left: 0;
  top: 0.02em;
  width: 0.08em;
  height: 0.88em;
  background: rgb(var(--theme-white-rgb) / 0.24);
  animation:
    auth-cursor-loop 32s steps(8, end) 3s infinite,
    auth-caret-blink 0.85s step-end 3s infinite;
}

@keyframes auth-type-loop {
  0% {
    width: 0;
  }

  2.34375%,
  87.5% {
    width: 100%;
  }

  93.75%,
  100% {
    width: 0;
  }
}

@keyframes auth-cursor-loop {
  0% {
    left: 0;
  }

  2.34375%,
  87.5% {
    left: 100%;
  }

  93.75%,
  100% {
    left: 0;
  }
}

@keyframes auth-caret-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.auth-layout.wide .auth-panel {
  min-height: 680px;
}

.legal-panel {
  min-height: auto;
  overflow: visible;
  padding: clamp(22px, 4vw, 38px);
  border-color: rgb(var(--theme-white-rgb) / 0.76);
  border-radius: 24px;
  background: rgb(var(--theme-white-rgb) / 0.98);
  color: var(--text);
  box-shadow: 0 24px 70px rgb(var(--theme-ink-rgb) / 0.18);
}

.legal-panel::before,
.legal-panel::after {
  display: none;
}

.auth-panel.legal-panel > .brand-row {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 1;
  margin-bottom: 22px;
  color: var(--text);
}

.legal-panel .brand-name {
  color: var(--text);
}

.legal-panel .brand-caption {
  color: var(--muted);
}

.legal-panel .auth-mode-badge {
  width: fit-content;
  height: 38px;
  place-items: center;
  margin: 0 0 22px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgb(var(--theme-mint-rgb) / 0.14);
  color: var(--mint-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-shadow: none;
  text-transform: uppercase;
}

.legal-document {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  color: var(--text);
}

.legal-document h1 {
  max-width: 820px;
  margin: 0 0 6px;
  color: var(--text);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: 0;
}

.legal-document h2 {
  margin: 20px 0 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: 0;
}

.legal-document p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: 0;
}

.legal-document a {
  color: var(--mint-dark);
  font-weight: 900;
  text-decoration: none;
}

.legal-document a:hover {
  text-decoration: underline;
}

.legal-updated {
  max-width: 780px;
  font-weight: 900;
}

.legal-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.legal-actions .link-button {
  display: inline-grid;
  place-items: center;
}

.payment-result-shell {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  margin-inline: auto;
}

.payment-result-panel {
  min-height: auto;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(16px, 2.5vw, 24px);
  padding: clamp(28px, 6vw, 64px);
  border-color: rgb(var(--theme-white-rgb) / 0.78);
  background: rgb(var(--theme-white-rgb) / 0.98);
  color: var(--text);
  box-shadow: 0 24px 70px rgb(var(--theme-ink-rgb) / 0.18);
  overflow: hidden;
  text-align: center;
}

.payment-result-panel::before,
.payment-result-panel::after {
  display: none;
}

.payment-result-status {
  width: clamp(72px, 10vw, 96px);
  height: clamp(72px, 10vw, 96px);
  display: inline-grid;
  justify-self: center;
  place-items: center;
  border-radius: 28px;
  color: var(--mint-dark);
  background: rgb(var(--theme-mint-rgb) / 0.14);
}

.payment-result-status.fail {
  color: #b54b4b;
  background: rgb(214 96 96 / 0.12);
}

.payment-result-status svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payment-result-panel h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, 7vw, 72px);
  line-height: 1.02;
  letter-spacing: 0;
}

.payment-result-panel p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.payment-result-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.payment-result-brand .brand-mark {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgb(var(--theme-mint-shadow-rgb) / 0.18);
}

.payment-result-brand strong,
.payment-result-brand small {
  display: block;
  text-align: left;
}

.payment-result-brand strong {
  color: var(--text);
  font-size: 22px;
  letter-spacing: 0.4px;
}

.payment-result-brand small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.payment-result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(8px, 2vw, 18px);
}

.payment-result-actions .link-button {
  min-width: min(100%, 260px);
}

.auth-panel::before {
  content: "";
  position: absolute;
  left: -120px;
  top: 120px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgb(var(--theme-white-rgb) / 0.06);
  animation: auth-water-panel-left 15s ease-in-out infinite;
  transform-origin: 42% 46%;
  will-change: border-radius, opacity, transform;
}

.auth-panel::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -110px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: rgb(var(--theme-mint-rgb) / 0.18);
  animation: auth-water-panel-right 17s ease-in-out infinite;
  transform-origin: 56% 54%;
  will-change: border-radius, opacity, transform;
}

.login-page .auth-panel::before,
.login-page .auth-panel::after {
  animation: none;
  transform: none;
}

@keyframes auth-water-panel-left {
  0%,
  100% {
    border-radius: 50%;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  30% {
    border-radius: 32% 68% 42% 58%;
    opacity: 0.78;
    transform: translate3d(38px, -24px, 0) scale(1.18, 0.84);
  }

  64% {
    border-radius: 72% 28% 64% 36%;
    opacity: 0.94;
    transform: translate3d(-24px, 36px, 0) scale(0.86, 1.2);
  }
}

@media (max-width: 860px) {
  .login-page .auth-panel::before {
    animation: auth-water-panel-left 15s ease-in-out infinite;
  }

  .login-page .auth-panel::after {
    animation: auth-water-panel-right 17s ease-in-out infinite;
  }
}

@keyframes auth-water-panel-right {
  0%,
  100% {
    border-radius: 50%;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  34% {
    border-radius: 68% 32% 58% 42%;
    opacity: 0.8;
    transform: translate3d(-42px, 30px, 0) scale(1.16, 0.86);
  }

  68% {
    border-radius: 34% 66% 28% 72%;
    opacity: 0.95;
    transform: translate3d(28px, -40px, 0) scale(0.84, 1.18);
  }
}

.auth-mode-badge {
  position: relative;
  z-index: 1;
  width: 164px;
  height: 118px;
  display: grid;
  place-items: start center;
  margin: 42px auto 30px;
  padding-top: 30px;
  color: var(--theme-paper);
  background: rgb(var(--theme-white-rgb) / 0.065);
  border-radius: 38px 38px 64px 64px / 34px 34px 76px 76px;
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow:
    0 2px 4px rgb(var(--theme-black-rgb) / 0.42),
    0 0 1px rgb(var(--theme-white-rgb) / 0.9);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-panel > .brand-row {
  position: absolute;
  left: 30px;
  bottom: 26px;
  z-index: 1;
  color: rgb(var(--theme-white-rgb) / 0.84);
}

.brand-row.compact {
  gap: 10px;
}

.brand-mark {
  position: relative;
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--theme-paper);
  box-shadow: 0 10px 24px rgb(var(--theme-white-rgb) / 0.18);
}

.brand-mark img {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
}

.brand-logo-base {
  z-index: 1;
}

.brand-logo-green {
  z-index: 2;
  transform-origin: 85% 43%;
  animation: logo-green-ball 20s ease-in-out infinite;
  will-change: transform;
}

@keyframes logo-green-ball {
  0%,
  24%,
  33%,
  100% {
    transform: translateY(0) scale(1);
  }

  25.5% {
    transform: translateY(-12px) scale(1.45);
  }

  27% {
    transform: translateY(1px) scale(1.2, 0.78);
  }

  28.5% {
    transform: translateY(-7px) scale(1.28);
  }

  30% {
    transform: translateY(1px) scale(1.1, 0.88);
  }

  31.2% {
    transform: translateY(-3px) scale(1.12);
  }

  32.5% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page::before,
  .auth-page::after,
  .auth-panel::before,
  .auth-panel::after {
    animation: none;
  }

  .brand-logo-green {
    animation: none;
  }

  .auth-typing-text {
    width: 100%;
    animation: none;
  }

  .auth-typing-cursor {
    display: none;
  }
}

.brand-name {
  color: var(--theme-paper);
  font-weight: 600;
  letter-spacing: 0.8px;
}

.brand-caption {
  margin-top: 2px;
  color: var(--theme-paper);
  font-size: 12px;
  letter-spacing: 0;
}

.auth-copy {
  position: relative;
  z-index: 1;
  margin: 0 0 24px;
  color: var(--theme-paper);
  text-align: center;
}

.auth-copy h1 {
  color: var(--theme-paper);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.auth-copy p {
  max-width: 360px;
  margin: 0 auto;
  color: rgb(var(--theme-white-rgb) / 0.58);
  font-size: 14px;
}

.auth-panel > .form-grid {
  position: relative;
  z-index: 1;
  padding: 20px clamp(24px, 6vw, 38px) 62px;
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.auth-panel > .auth-card-form {
  min-height: 102px;
  padding-top: 54px;
}

.banned-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding-bottom: 118px;
}

.banned-panel h1,
.banned-panel p,
.banned-panel .ban-reason-box {
  position: relative;
  z-index: 1;
}

.banned-panel h1 {
  margin: 0;
  color: var(--theme-paper);
  text-align: center;
  font-size: 32px;
}

.banned-panel .auth-mode-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 34px auto 32px;
  padding: 0;
  text-align: center;
  line-height: 1.06;
}

.banned-panel p {
  max-width: 360px;
  margin: 0 auto;
  color: rgb(var(--theme-white-rgb) / 0.72);
  text-align: center;
}

.banned-panel a {
  color: var(--theme-paper);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth-layout.wide .auth-panel > .form-grid {
  min-height: 370px;
}

.form-grid {
  display: grid;
  gap: 18px;
}

.form-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.form-grid.inline {
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto;
  align-items: end;
}

label {
  display: grid;
  gap: 11px;
}

label span {
  color: var(--theme-label);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.4px;
}

.field-label {
  padding-left: 0;
}

input {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  padding: 0 2px;
  color: var(--text);
  background: transparent;
  font-weight: 500;
  letter-spacing: 0.8px;
  font-size: 21px;
}

input::placeholder {
  color: rgb(var(--theme-ink-rgb) / 0.22);
  opacity: 1;
}

input:focus {
  border-color: var(--mint);
  outline: 0;
}

input:disabled {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--text);
  background: var(--paper);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0;
}

select {
  min-height: 56px;
}

textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.45;
}

select:focus,
textarea:focus {
  border-color: var(--mint);
  outline: 0;
}

textarea::placeholder {
  color: rgb(var(--theme-ink-rgb) / 0.24);
  opacity: 1;
}

input[type="file"] {
  min-height: auto;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 15px;
  background: var(--paper);
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0;
}

.file-picker {
  display: block;
}

.file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-picker-button {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 0 16px;
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
}

.file-picker-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.phone-field {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--line);
  background: var(--theme-paper);
}

.phone-field:focus-within {
  border-color: var(--mint);
}

.phone-field input {
  min-height: 58px;
  border: 0;
  padding: 0;
  outline: 0;
  font-size: 24px;
  font-weight: 500;
}

.phone-field input::placeholder {
  color: rgb(var(--theme-ink-rgb) / 0.16);
}

.phone-field input:focus {
  border-color: transparent;
  outline: 0;
}

.country-select {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 22px;
  background: rgb(var(--theme-mint-rgb) / 0.16);
  color: var(--text);
  padding: 0 14px;
  white-space: nowrap;
}

.country-select:disabled {
  opacity: 1;
}

.country-flag {
  font-size: 21px;
  line-height: 1;
}

.country-name {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0;
}

.primary-button,
.secondary-button,
.ghost-button {
  min-height: 48px;
  border: 0;
  border-radius: 28px;
  padding: 0 24px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
}

.primary-button {
  background: var(--mint);
  color: var(--theme-paper);
  box-shadow: 0 12px 28px rgb(var(--theme-mint-shadow-rgb) / 0.38);
}

.primary-button:hover {
  background: var(--mint-dark);
}

.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.primary-button.compact {
  min-height: 40px;
  padding-inline: 18px;
  font-size: 13px;
  letter-spacing: 0.8px;
}

.secondary-button.compact,
.link-button.compact {
  min-height: 40px;
  padding-inline: 18px;
  font-size: 13px;
  letter-spacing: 0.8px;
}

.auth-card-form > .primary-button {
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 216px;
  min-height: 50px;
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding: 0 12px;
  transform: translateX(-50%);
  font-size: 18px;
  letter-spacing: 0.8px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.profile-form > .primary-button {
  justify-self: center;
  min-width: 210px;
}

.secondary-button {
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.45);
  background: var(--theme-paper);
  color: var(--ink);
}

.ghost-button {
  background: transparent;
  color: rgb(var(--theme-white-rgb) / 0.82);
}

.ghost-button.dark {
  min-height: 32px;
  justify-content: start;
  padding: 0;
  color: var(--text);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-button {
  display: inline-grid;
  place-items: center;
}

.mint-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  color: var(--theme-paper);
  border-color: transparent;
  background: var(--mint);
  line-height: 1;
  white-space: nowrap;
}

.mint-link:hover {
  color: var(--theme-paper);
  background: var(--mint-dark);
}

.resend-form {
  position: relative;
  z-index: 1;
  margin-top: 52px;
  text-align: center;
}

.checkbox-row {
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 11px;
}

.checkbox-row input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
  accent-color: var(--mint);
}

.checkbox-row span {
  color: var(--text);
  line-height: 1.45;
  letter-spacing: 0;
}

.alert {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  border-radius: 18px;
  padding: 12px 16px;
  border: 1px solid rgb(var(--theme-white-rgb) / 0.14);
  background: rgb(var(--theme-white-rgb) / 0.12);
  color: var(--theme-paper);
}

.alert.error {
  border-color: rgb(var(--theme-red-soft-rgb) / 0.45);
  background: rgb(var(--theme-red-rgb) / 0.18);
  color: var(--theme-paper);
}

.alert.success {
  border-color: rgb(var(--theme-mint-rgb) / 0.5);
  background: rgb(var(--theme-mint-rgb) / 0.16);
  color: var(--theme-paper);
}

.app-page {
  min-height: 100vh;
  background: var(--app-page-bg);
}

.app-page.sidebar-open {
  overflow: hidden;
}

.mobile-app-bar {
  display: none;
}

.mobile-wallet-row {
  display: none;
}

.mobile-app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-plan,
.mobile-balance {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--paper);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-overlay {
  display: none;
}

.app-frame {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  align-items: stretch;
  background: var(--theme-page);
}

.app-sidebar {
  position: relative;
  z-index: 20;
  align-self: stretch;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr);
  align-content: start;
  gap: 18px;
  border-right: 1px solid var(--line);
  padding: 18px 20px;
  background: rgb(var(--theme-white-rgb) / 0.98);
}

.sidebar-head {
  position: static;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgb(var(--theme-white-rgb) / 0.98);
}

.sidebar-close {
  display: none;
}

.brand-link {
  color: inherit;
  text-decoration: none;
}

.brand-link:hover {
  color: inherit;
}

.mobile-app-bar .brand-mark,
.app-sidebar .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 10px 22px rgb(var(--theme-ink-rgb) / 0.12);
}

.mobile-app-bar .brand-mark img,
.app-sidebar .brand-mark img {
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}

.brand-name.dark,
.brand-caption.dark {
  color: var(--text);
}

.nav-groups {
  position: sticky;
  top: 18px;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 14px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.nav-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: rgb(var(--theme-white-rgb) / 0.75);
}

.nav-group-title {
  padding: 4px 8px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.nav-link {
  min-height: 40px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--text);
}

.nav-link.has-badge {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

.nav-badge {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  border-radius: 999px;
  padding: 0 7px;
  color: var(--theme-paper);
  background: var(--mint);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.nav-link.active,
.nav-link:hover {
  background: rgb(var(--theme-ink-rgb) / 0.08);
}

.nav-subtree {
  display: grid;
  gap: 5px;
}

.nav-parent-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}

.nav-parent-shell.active,
.nav-parent-shell:hover {
  background: rgb(var(--theme-ink-rgb) / 0.08);
}

.nav-parent-shell .nav-link.active,
.nav-parent-shell .nav-link:hover {
  background: transparent;
}

.nav-parent {
  margin-bottom: 0;
}

.nav-submenu {
  display: grid;
  gap: 4px;
  margin: -2px 0 3px 16px;
  padding-left: 12px;
  border-left: 1px solid rgb(var(--theme-ink-rgb) / 0.1);
}

.nav-submenu[hidden] {
  display: none;
}

.nav-submenu-toggle {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgb(var(--theme-ink-rgb) / 0.045);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.nav-submenu-toggle:hover {
  background: rgb(var(--theme-ink-rgb) / 0.08);
}

.nav-submenu-toggle span {
  width: 5px;
  height: 5px;
  display: block;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  font-size: 0;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}

.nav-subtree.open .nav-submenu-toggle span {
  transform: translateY(-2px) rotate(45deg);
}

.nav-sub-link {
  min-height: 34px;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--text);
}

.nav-sub-link:hover {
  background: rgb(var(--theme-ink-rgb) / 0.06);
}

.nav-sub-link .nav-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 12px;
}

.nav-sub-link strong,
.nav-sub-link small {
  display: block;
}

.nav-sub-link strong {
  color: var(--text);
  font-size: 12px;
}

.nav-sub-link small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
}

.nav-link.admin strong {
  color: var(--theme-mint-text);
}

.nav-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgb(var(--theme-ink-rgb) / 0.06);
  color: var(--ink);
}

.nav-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon.live {
  position: relative;
  background: linear-gradient(145deg, rgb(var(--theme-mint-rgb) / 0.22), rgb(var(--theme-mint-rgb) / 0.08));
  color: var(--theme-mint-text);
  overflow: hidden;
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.14);
  animation: live-dot-blink 1.35s ease-in-out infinite;
}

@keyframes live-dot-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.38;
    transform: scale(0.78);
  }
}

.nav-link strong,
.nav-link small {
  display: block;
}

.nav-link strong {
  font-size: 13px;
}

.nav-link small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.sidebar-bottom {
  position: static;
  align-self: end;
  display: grid;
  gap: 8px;
  background: rgb(var(--theme-white-rgb) / 0.98);
}

.sidebar-user,
.sidebar-tariff {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: rgb(var(--theme-white-rgb) / 0.9);
}

.sidebar-tariff {
  border-color: transparent;
  background: linear-gradient(135deg, var(--mint), rgb(var(--theme-mint-rgb) / 0.86));
  box-shadow: 0 12px 28px rgb(var(--theme-mint-shadow-rgb) / 0.2);
}

.sidebar-user-name {
  color: var(--text);
}

.sidebar-user strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.15;
}

.sidebar-tariff strong {
  color: var(--theme-paper);
  font-size: 16px;
  line-height: 1.15;
}

.sidebar-user span,
.sidebar-user-name,
.sidebar-user .ghost-button,
.sidebar-tariff span,
.sidebar-tariff small,
.sidebar-tariff a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sidebar-user span {
  color: var(--muted);
  font-size: 13px;
}

.sidebar-tariff span,
.sidebar-tariff small {
  color: rgb(var(--theme-white-rgb) / 0.82);
  font-size: 12px;
  line-height: 1.25;
}

.sidebar-tariff a {
  width: max-content;
  color: var(--theme-paper);
  font-size: 12px;
  font-weight: 600;
}

.sidebar-user-name::before,
.sidebar-user span::before,
.sidebar-user .ghost-button::before,
.sidebar-tariff span::before,
.sidebar-tariff small::before,
.sidebar-tariff a::before,
.toolbar-widget::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.9;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.sidebar-user-name::before,
.toolbar-user::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.sidebar-user span:nth-of-type(1)::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.35 1.9.65 2.8a2 2 0 0 1-.45 2.11L8.04 9.9a16 16 0 0 0 6.06 6.06l1.27-1.27a2 2 0 0 1 2.11-.45c.9.3 1.84.52 2.8.65A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.sidebar-user span:nth-of-type(2)::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}

.sidebar-user .ghost-button::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

.sidebar-tariff span::before,
.tariff-widget::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H4v4'/%3E%3Cpath d='M4 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10H4z'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3C/svg%3E");
}

.sidebar-tariff small::before,
.today-widget::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.sidebar-tariff a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
}

.app-main {
  min-width: 0;
  padding: 12px 34px 48px;
}

.app-footer {
  width: 100%;
  min-height: 112px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  border-top: 1px solid var(--line);
  background: rgb(var(--theme-white-rgb) / 0.98);
  text-align: left;
}

.app-footer .brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgb(var(--theme-ink-rgb) / 0.12);
}

.main-toolbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -12px -34px 24px;
  border-bottom: 1px solid var(--line);
  padding: 10px 34px;
  background: rgb(var(--theme-white-rgb) / 0.86);
}

.toolbar-search {
  width: min(560px, 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  color: var(--muted);
  background: rgb(var(--theme-white-rgb) / 0.72);
}

.toolbar-widgets {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-widget,
.toolbar-balance {
  min-height: 42px;
  display: inline-grid;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 13px;
  background: var(--paper);
  white-space: nowrap;
}

.toolbar-widget {
  grid-template-columns: 16px auto;
  column-gap: 8px;
  align-items: center;
}

.toolbar-widget::before {
  grid-row: 1 / 3;
  width: 15px;
  height: 15px;
  color: var(--ink);
}

.toolbar-widget small,
.toolbar-widget strong {
  grid-column: 2;
}

.toolbar-balance {
  min-width: 68px;
  place-items: center;
  color: var(--text);
}

.toolbar-widget small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

.toolbar-widget strong,
.toolbar-balance strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-pill,
.toolbar-user,
.toolbar-support {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--paper);
  color: var(--text);
  white-space: nowrap;
}

.toolbar-support {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.toolbar-user,
.toolbar-balance,
.mobile-balance,
.topup-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.toolbar-support::before,
.toolbar-user::before,
.toolbar-balance::before,
.mobile-balance::before,
.mobile-balance-top::before,
.topup-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.toolbar-support::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
}

.toolbar-balance::before,
.mobile-balance::before,
.mobile-balance-top::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a4 4 0 0 1-4-4V6a3 3 0 0 1 3-3h12v4'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M21 11h-5a3 3 0 0 0 0 6h5'/%3E%3C/svg%3E");
}

.topup-button::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.mobile-pull-refresh {
  display: none;
}

.wb-token-title-mobile,
.wb-token-label-mobile {
  display: none;
}

.wb-token-table strong .wb-token-title-desktop,
.wb-token-table strong .wb-token-title-mobile {
  color: inherit;
  font: inherit;
  line-height: inherit;
}

@media (max-width: 860px) {
  .mobile-pull-refresh {
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--mobile-pull-height, 0px);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    padding: 0 14px;
    color: #555555;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: height 0.16s ease, opacity 0.12s ease;
  }

  .mobile-pull-refresh.is-dragging {
    transition: none;
  }

  .mobile-pull-refresh.is-visible {
    opacity: 1;
  }

  .mobile-pull-refresh svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-pull-refresh.is-refreshing svg {
    animation: mobile-pull-refresh-spin 0.9s linear infinite;
  }
}

@keyframes mobile-pull-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .mobile-pull-refresh,
  .mobile-pull-refresh svg {
    transition: none;
    animation: none;
  }
}

.time-widget::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.section-widget::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E");
}

.toolbar-bell {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}

.toolbar-bell svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-dot {
  display: none;
}

.notification-count {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 999px;
  padding: 0 5px;
  background: var(--mint);
  color: var(--theme-paper);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.topup-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 16px;
  color: var(--theme-paper);
  background: var(--mint);
  box-shadow: 0 10px 24px rgb(var(--theme-mint-shadow-rgb) / 0.22);
  font-size: 13px;
  font-weight: 600;
}

.topup-button.small {
  min-height: 36px;
  padding-inline: 10px;
  font-size: 12px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr);
  gap: 18px;
  margin-bottom: 18px;
}

.hero-grid > :only-child {
  grid-column: 1 / -1;
}

.hero-panel,
.dark-panel {
  min-height: 300px;
  border-radius: 8px;
  padding: 28px;
  box-shadow: var(--shadow-soft);
}

.hero-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 88% 0%, rgb(var(--theme-mint-rgb) / 0.16), transparent 28%),
    var(--paper);
}

.hero-panel h1 {
  max-width: 560px;
  margin-bottom: 0;
  font-size: clamp(30px, 4vw, 42px);
}

.hero-panel p {
  max-width: 560px;
  margin-bottom: 0;
  font-size: 17px;
}

.hero-panel.has-side-icon {
  position: relative;
  overflow: hidden;
}

.hero-panel.has-side-icon > .eyebrow,
.hero-panel.has-side-icon > h1,
.hero-panel.has-side-icon > p {
  max-width: min(760px, calc(100% - 150px));
}

.hero-side-icon {
  position: absolute;
  top: 42px;
  right: clamp(28px, 4.8vw, 78px);
  width: clamp(88px, 7.6vw, 116px);
  height: clamp(88px, 7.6vw, 116px);
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  color: var(--theme-mint-text);
  background: radial-gradient(circle, rgb(var(--theme-mint-rgb) / 0.16), transparent 68%);
  box-shadow: 0 28px 70px rgb(var(--theme-mint-rgb) / 0.2);
  pointer-events: none;
}

.hero-side-icon::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.36);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 24%, rgb(var(--theme-white-rgb) / 0.98), rgb(var(--theme-white-rgb) / 0.72) 31%, transparent 46%),
    linear-gradient(145deg, rgb(var(--theme-white-rgb) / 0.88), rgb(var(--theme-mint-rgb) / 0.16));
  box-shadow:
    inset 0 1px 0 rgb(var(--theme-white-rgb) / 0.95),
    inset 0 -14px 26px rgb(var(--theme-mint-rgb) / 0.12),
    0 18px 42px rgb(var(--theme-mint-rgb) / 0.18);
}

.hero-side-icon::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -3px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 999px;
  background: transparent;
  transform: rotate(-22deg);
}

.side-icon-mark {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: var(--theme-mint-text);
  font-size: clamp(54px, 6.2vw, 84px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 10px 24px rgb(var(--theme-mint-rgb) / 0.24);
}

.hero-side-icon .side-icon-mark {
  font-size: clamp(48px, 4.9vw, 72px);
  font-weight: 900;
  transform: translateY(1px);
  text-shadow:
    0 1px 0 rgb(var(--theme-white-rgb) / 0.9),
    0 12px 26px rgb(var(--theme-mint-rgb) / 0.22);
}

.hero-side-icon-ruble {
  top: 50px;
  width: clamp(44px, 3.8vw, 58px);
  height: clamp(44px, 3.8vw, 58px);
  box-shadow: 0 16px 38px rgb(var(--theme-mint-rgb) / 0.16);
}

.hero-side-icon-ruble::before {
  inset: 4px;
}

.hero-side-icon-ruble::after {
  inset: -2px;
}

.hero-side-icon-ruble .side-icon-mark {
  font-size: clamp(24px, 2.45vw, 36px);
  text-shadow:
    0 1px 0 rgb(var(--theme-white-rgb) / 0.9),
    0 7px 16px rgb(var(--theme-mint-rgb) / 0.18);
}

.hero-side-icon-history {
  top: 50px;
  width: clamp(44px, 3.8vw, 58px);
  height: clamp(44px, 3.8vw, 58px);
  box-shadow: 0 16px 38px rgb(var(--theme-mint-rgb) / 0.16);
}

.hero-side-icon-history::before {
  inset: 4px;
}

.hero-side-icon-history::after {
  inset: -2px;
}

.hero-side-icon-history .side-icon-mask {
  width: clamp(24px, 2.45vw, 34px);
  height: clamp(24px, 2.45vw, 34px);
  text-shadow: none;
}

.hero-side-icon-ruble,
.hero-side-icon-history {
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.hero-side-icon-ruble::before,
.hero-side-icon-history::before {
  display: none;
}

.hero-side-icon-ruble::after,
.hero-side-icon-history::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  width: auto;
  height: auto;
  border: 2px solid rgb(var(--theme-mint-rgb) / 0.72);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 999px;
  background: transparent;
  transform: rotate(-2deg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.eyebrow {
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  color: var(--ink);
  background: rgb(var(--theme-ink-rgb) / 0.06);
  font-size: 12px;
}

.dark-panel {
  color: var(--theme-paper);
  background:
    radial-gradient(circle at 82% 92%, rgb(var(--theme-mint-rgb) / 0.2), transparent 30%),
    linear-gradient(145deg, var(--theme-ink-deep), var(--theme-ink-black));
}

.dark-panel h2,
.dark-panel p,
.table-row.dark span {
  color: rgb(var(--theme-white-rgb) / 0.72);
}

.big-number {
  color: var(--theme-paper);
  font-size: 40px;
  line-height: 1;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  color: var(--theme-paper);
}

.page-head h1 {
  color: var(--theme-paper);
}

.page-head p {
  margin-bottom: 0;
  color: rgb(var(--theme-white-rgb) / 0.66);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 18px;
  margin-bottom: 18px;
}

.panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid rgb(var(--theme-panel-border-rgb) / 0.08);
  border-radius: 28px;
  background: rgb(var(--theme-white-rgb) / 0.98);
  box-shadow: var(--shadow-soft);
}

.panel + .panel {
  margin-top: 18px;
}

.dashboard-grid > .panel + .panel {
  margin-top: 0;
}

.section-stack {
  display: grid;
  gap: 18px;
}

.admin-user-sale-panel {
  overflow: hidden;
}

.admin-user-sale-panel .panel-head {
  margin-bottom: 0;
}

.admin-user-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-user-finance-panel {
  width: 100%;
}

.admin-panel-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.admin-inline-search {
  width: min(240px, 100%);
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: rgb(var(--theme-ink-rgb) / 0.025);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.admin-inline-search:focus {
  border-color: rgb(var(--theme-mint-rgb) / 0.75);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.14);
}

.admin-panel-search-alone {
  margin-top: 16px;
}

.admin-data-table {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.admin-data-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(120px, 0.75fr) minmax(150px, 0.9fr) minmax(120px, 0.75fr) minmax(140px, 0.85fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgb(var(--theme-white-rgb) / 0.74);
}

.admin-data-row[hidden] {
  display: none;
}

.admin-data-row > * {
  min-width: 0;
}

.admin-data-row strong,
.admin-data-row span {
  display: block;
}

.admin-data-row strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-data-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-data-row form {
  margin: 0;
}

.admin-data-head {
  background: rgb(var(--theme-ink-rgb) / 0.035);
}

.admin-data-head span,
.admin-data-head button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  text-align: left;
  text-transform: uppercase;
}

.admin-data-head button {
  cursor: pointer;
}

.admin-data-head button.is-active,
.admin-data-head button:hover {
  color: var(--theme-mint-text);
}

.admin-user-wb-table .admin-data-row {
  grid-template-columns: minmax(150px, 1.1fr) minmax(105px, 0.7fr) minmax(145px, 0.85fr) minmax(150px, 0.95fr) minmax(105px, 0.7fr) minmax(105px, 0.7fr) minmax(115px, 0.7fr) auto;
}

.admin-role-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.35fr) auto;
  align-items: end;
  gap: 12px;
}

.admin-role-form label {
  display: grid;
  gap: 7px;
}

.admin-role-form span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.admin-role-form input,
.admin-role-form select {
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 16px;
  background: rgb(var(--theme-white-rgb) / 0.9);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  outline: none;
}

.admin-role-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.admin-role-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgb(var(--theme-ink-rgb) / 0.025);
}

.admin-role-row > div:first-child {
  min-width: 0;
}

.admin-role-row strong,
.admin-role-row span {
  display: block;
}

.admin-role-row span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-role-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.admin-role-pills .status-pill {
  min-height: 24px;
  padding: 0 10px;
  font-size: 11px;
  letter-spacing: 0.45px;
}

.admin-role-pills form {
  margin: 0;
}

.admin-user-role-line {
  display: inline-flex !important;
  width: max-content;
  max-width: 100%;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: rgb(var(--theme-mint-rgb) / 0.16);
  color: var(--theme-mint-text) !important;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.admin-user-sale-frame {
  display: block;
  width: 100%;
  min-height: 1480px;
  border: 0;
  border-radius: 22px;
  background: transparent;
}

body.sale-admin-embed {
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

body.sale-admin-embed .mobile-app-bar,
body.sale-admin-embed .mobile-wallet-row,
body.sale-admin-embed .sidebar-overlay,
body.sale-admin-embed .app-sidebar,
body.sale-admin-embed .main-toolbar,
body.sale-admin-embed .notification-prompt,
body.sale-admin-embed .app-footer {
  display: none !important;
}

body.sale-admin-embed .app-frame {
  display: block !important;
  min-height: 0 !important;
  background: transparent !important;
}

body.sale-admin-embed .app-main {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

body.sale-admin-embed .app-main > .section-stack {
  gap: 18px;
}

.section-hero {
  min-height: 220px;
}

.wb-security-hero {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  align-items: center;
}

.wb-security-hero h1,
.wb-security-hero p {
  max-width: 780px;
}

.security-warning {
  display: grid;
  gap: 4px;
  max-width: 760px;
  margin: 18px 0 22px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.42);
  border-radius: 18px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.12), rgb(var(--theme-white-rgb) / 0.8));
}

.security-warning strong {
  color: var(--theme-mint-text);
  font-size: 15px;
}

.security-warning span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.security-warning + .mint-link,
.security-warning + .back-button {
  margin-top: 0;
}

.wb-lock-card {
  display: grid;
  justify-items: center;
  gap: 9px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-radius: 26px;
  padding: 24px 18px;
  background:
    radial-gradient(circle at 70% 12%, rgb(var(--theme-mint-rgb) / 0.28), transparent 42%),
    rgb(var(--theme-white-rgb) / 0.78);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.wb-lock-card svg {
  width: 112px;
  height: 112px;
}

.wb-lock-card .lock-shield {
  fill: rgb(var(--theme-mint-rgb) / 0.16);
  stroke: var(--theme-mint-text);
  stroke-width: 3;
}

.wb-lock-card .lock-body {
  fill: var(--theme-mint-text);
}

.wb-lock-card .lock-loop,
.wb-lock-card .lock-key {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wb-lock-card strong {
  color: var(--text);
  font-size: 19px;
}

.wb-lock-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.panel-action {
  width: max-content;
  margin-top: 18px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-head p {
  margin-bottom: 0;
  font-size: 14px;
}

.icon-panel-head,
.promo-apply-panel .panel-head {
  position: relative;
  min-height: 62px;
  padding-right: 78px;
}

.icon-panel-head > div {
  min-width: 0;
}

.panel-side-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.32);
  border-radius: 20px;
  color: var(--theme-mint-text);
  background:
    radial-gradient(circle at 25% 20%, rgb(var(--theme-white-rgb) / 0.95), transparent 36%),
    linear-gradient(145deg, rgb(var(--theme-mint-rgb) / 0.2), rgb(var(--theme-mint-rgb) / 0.06));
  box-shadow:
    inset 0 1px 0 rgb(var(--theme-white-rgb) / 0.9),
    0 16px 32px rgb(var(--theme-mint-rgb) / 0.13);
  pointer-events: none;
}

.panel-side-icon::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.18);
  border-radius: 15px;
}

.panel-side-icon::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 18%;
  bottom: 18%;
  width: 34%;
  height: 5px;
  border-radius: 999px;
  background: rgb(var(--theme-mint-rgb) / 0.24);
}

.panel-side-icon .side-icon-mark {
  font-size: 32px;
  text-shadow: 0 7px 16px rgb(var(--theme-mint-rgb) / 0.22);
}

.side-icon-mask {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.panel-side-icon .side-icon-mask {
  text-shadow: none;
}

.promo-code-side-icon,
.promo-history-side-icon {
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.promo-code-side-icon::before,
.promo-history-side-icon::before {
  display: none;
}

.promo-code-side-icon::after,
.promo-history-side-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  width: auto;
  height: auto;
  border: 2px solid rgb(var(--theme-mint-rgb) / 0.72);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 999px;
  background: transparent;
  transform: rotate(-2deg);
}

.promocode-icon-mark {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M12 8v13M3 12h18'/%3E%3Cpath d='M12 8H7.5a2.5 2.5 0 1 1 2.2-3.7L12 8Z'/%3E%3Cpath d='M12 8h4.5a2.5 2.5 0 1 0-2.2-3.7L12 8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M12 8v13M3 12h18'/%3E%3Cpath d='M12 8H7.5a2.5 2.5 0 1 1 2.2-3.7L12 8Z'/%3E%3Cpath d='M12 8h4.5a2.5 2.5 0 1 0-2.2-3.7L12 8Z'/%3E%3C/svg%3E");
}

.history-icon-mark {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.status-pill {
  flex: 0 0 auto;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 12px;
  background: rgb(var(--theme-ink-rgb) / 0.08);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill.plain {
  letter-spacing: 0;
  text-transform: none;
}

.status-pill.ok {
  background: rgb(var(--theme-mint-rgb) / 0.2);
  color: var(--theme-mint-text);
}

.status-pill.danger {
  background: rgb(var(--theme-red-rgb) / 0.12);
  color: var(--red);
}

.metric-row,
.plans-grid {
  display: grid;
  gap: 12px;
}

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

.topup-metric-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promo-metric-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.promo-metric-feature {
  border-color: rgb(var(--theme-mint-rgb) / 0.34) !important;
  background: rgb(var(--theme-mint-rgb) / 0.08);
}

.promo-metric-feature strong {
  color: var(--theme-mint-text);
  font-size: 22px;
}

.payment-metric-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payment-summary-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payment-metric-feature {
  border-color: rgb(var(--theme-mint-rgb) / 0.34) !important;
  background: rgb(var(--theme-mint-rgb) / 0.08);
}

.payment-metric-feature strong {
  color: var(--theme-mint-text);
  font-size: 22px;
}

.metric-row div,
.plan-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.metric-row span,
.table-row span,
.plan-meta {
  color: var(--muted);
  font-size: 14px;
}

.metric-row strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 18px;
}

.profile-metric-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-metric-row strong {
  font-size: 17px;
  line-height: 1.2;
}

.admin-profile-edit-form {
  margin-top: 16px;
}

.admin-profile-edit-form[hidden] {
  display: none;
}

.form-grid.inline.admin-profile-form-grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.table-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.table-list.compact {
  margin-top: 12px;
}

.table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  color: var(--text);
  text-decoration: none;
}

.table-row strong,
.table-row span {
  display: block;
}

.table-row strong {
  margin-bottom: 4px;
}

.table-row[hidden] {
  display: none;
}

.payment-admin-list {
  gap: 12px;
}

.payment-sort-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(var(--theme-white-rgb) / 0.78);
}

.payment-sort-button {
  min-width: 112px;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 16px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.payment-sort-button span {
  display: inline;
  margin-left: 3px;
}

.payment-sort-button:hover,
.payment-sort-button.is-active {
  color: var(--text);
  border-color: rgb(var(--theme-mint-rgb) / 0.32);
  background: rgb(var(--theme-mint-rgb) / 0.12);
}

.payment-admin-row {
  align-items: flex-start;
}

.payment-admin-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.payment-admin-main a {
  color: var(--text);
  text-decoration: none;
}

.payment-admin-main a:hover {
  color: var(--theme-mint-text);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hero-panel.has-side-icon > .hero-actions {
  max-width: min(760px, calc(100% - 150px));
}

.payment-hero-actions {
  margin-top: 2px;
}

.payment-topup-back {
  margin-bottom: 0;
  text-decoration: none;
}

.payment-topup-back:hover,
.payment-topup-back:focus-visible {
  border-color: rgb(var(--theme-mint-rgb) / 0.45);
  color: var(--theme-mint-text);
  box-shadow: 0 10px 22px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.panel-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.payment-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-row-title > span {
  display: inline-flex;
  align-items: center;
}

.invoice-admin-amount {
  color: var(--theme-mint-text);
  font-weight: 900;
}

.invoice-admin-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.invoice-admin-side form {
  margin: 0;
}

.invoice-admin-side .secondary-button {
  min-height: 44px;
  border-radius: 999px;
}

.payment-status-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.payment-status-icon.success {
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
}

.payment-status-icon.fail {
  color: var(--theme-red);
  background: rgb(var(--theme-red-soft-rgb) / 0.34);
}

.payment-status-icon.pending {
  color: var(--muted);
  background: rgb(var(--theme-ink-rgb) / 0.07);
}

.payment-admin-main small,
.payment-admin-side small {
  color: var(--muted);
  line-height: 1.45;
}

.payment-admin-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 176px;
}

.payment-admin-side.is-unavailable {
  align-content: center;
  gap: 6px;
}

.payment-admin-side form {
  margin: 0;
}

.payment-balance-box {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.payment-balance-box strong {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.payment-balance-box small {
  font-size: 12px;
}

.payment-balance-box .positive {
  color: var(--theme-mint-text);
  font-weight: 900;
}

.payment-balance-box .negative {
  color: var(--theme-red);
  font-weight: 900;
}

.payment-refund-unavailable {
  justify-self: end;
  min-width: 0;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.07);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1px;
  line-height: 1;
  white-space: nowrap;
}

.panel-subsection {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.panel-head.compact {
  align-items: center;
  gap: 12px;
}

.panel-head.compact h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
}

.finance-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgb(var(--theme-white-rgb) / 0.74);
}

.finance-row strong,
.finance-row span {
  display: block;
}

.finance-row strong {
  color: var(--text);
  font-size: 15px;
}

.finance-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.finance-row-side {
  min-width: 150px;
  text-align: right;
}

.operation-amount.positive {
  color: var(--theme-mint-text);
}

.operation-amount.negative {
  color: #9f2f2f;
}

.panel-head .topup-history-link {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  white-space: nowrap;
}

.topup-page-stack {
  display: grid;
  gap: 18px;
}

.topup-payment-panel,
.topup-history-panel,
.topup-page-stack .promo-apply-panel,
.topup-page-stack .promo-history-panel {
  width: 100%;
}

.topup-page-stack > .panel + .panel {
  margin-top: 0;
}

.topup-credit-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  width: 520px;
  max-width: 100%;
  gap: 4px 14px;
  margin: 0 auto 20px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.22);
  border-radius: 14px;
  padding: 10px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgb(var(--theme-mint-rgb) / 0.08), transparent 30%),
    linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.045), rgb(var(--theme-white-rgb) / 0.92));
  box-shadow: 0 10px 22px rgb(var(--theme-shadow-soft-rgb) / 0.045);
  box-sizing: border-box;
}

.topup-credit-preview[hidden] {
  display: none !important;
}

.topup-credit-preview span {
  color: var(--theme-mint-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topup-credit-preview strong {
  grid-row: 1 / span 2;
  color: var(--ink);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.topup-promo-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-radius: 999px;
  padding: 2px 4px 2px 9px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-white-rgb) / 0.84);
  box-shadow: 0 6px 14px rgb(var(--theme-shadow-soft-rgb) / 0.05);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.15;
}

.topup-promo-chip[hidden] {
  display: none !important;
}

.topup-promo-chip span {
  min-width: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

.topup-promo-chip b {
  color: var(--ink);
}

.topup-promo-chip button {
  display: inline-grid;
  width: 18px;
  height: 18px;
  min-height: 18px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.16);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.topup-promo-chip button:hover,
.topup-promo-chip button:focus-visible {
  color: var(--theme-red);
  background: rgb(var(--theme-red-rgb) / 0.1);
  outline: 0;
}

.topup-credit-preview small {
  justify-self: start;
  color: #167346;
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}

.topup-credit-preview small.is-bonus {
  color: #00a95f;
  font-weight: 850;
}

.topup-credit-preview.has-bonus {
  border-color: rgb(0 184 104 / 0.3);
  background:
    radial-gradient(circle at 100% 0%, rgb(0 184 104 / 0.1), transparent 30%),
    linear-gradient(135deg, rgb(0 184 104 / 0.045), rgb(var(--theme-white-rgb) / 0.93));
}

.topup-method-switch {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 18px;
}

.topup-method-button {
  position: relative;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  color: var(--ink);
  background: rgb(var(--theme-white-rgb) / 0.82);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.topup-method-icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.12);
}

.topup-method-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topup-method-button.is-active {
  border-color: rgb(var(--theme-mint-rgb) / 0.55);
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.12);
  box-shadow: 0 14px 30px rgb(var(--theme-mint-rgb) / 0.12);
}

.topup-help {
  position: relative;
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
  font-size: 13px;
  font-weight: 900;
}

.topup-help-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: none;
  width: min(310px, 78vw);
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.36);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--text);
  background: rgb(var(--theme-white-rgb) / 0.98);
  box-shadow: 0 18px 38px rgb(var(--theme-shadow-rgb) / 0.12);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
}

.topup-help:hover .topup-help-bubble,
.topup-help:focus-within .topup-help-bubble,
.topup-method-button:focus-visible .topup-help-bubble {
  display: block;
}

.topup-form {
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 0.42fr);
  align-items: end;
  gap: 18px;
}

.topup-form label {
  align-items: center;
  text-align: center;
}

.topup-form label span {
  width: 100%;
  text-align: center;
}

.topup-form input[type="number"] {
  min-height: 64px;
  text-align: center;
  font-size: clamp(31px, 3.2vw, 40px);
  font-weight: 650;
  letter-spacing: 0.02em;
}

.topup-form .primary-button {
  min-height: 64px;
}

.topup-invoice-form[hidden],
[data-topup-method-panel][hidden] {
  display: none !important;
}

.topup-invoice-form {
  display: grid;
  gap: 16px;
}

.topup-invoice-note {
  display: grid;
  gap: 4px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.26);
  border-radius: 18px;
  padding: 15px 16px;
  background: rgb(var(--theme-mint-rgb) / 0.07);
}

.topup-invoice-note strong {
  color: var(--theme-mint-text);
  font-size: 16px;
  font-weight: 900;
}

.topup-invoice-note span {
  color: var(--muted);
  font-weight: 760;
}

.topup-invoice-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.topup-invoice-grid label {
  display: grid;
  gap: 8px;
}

.topup-invoice-grid label.wide {
  grid-column: 1 / -1;
}

.topup-invoice-grid .invoice-amount-field {
  gap: 6px;
}

.topup-invoice-grid .invoice-amount-field span {
  text-align: center;
}

.topup-company-suggestions {
  position: absolute;
  z-index: 80;
  top: var(--suggest-top, 100%);
  left: var(--suggest-left, 0);
  width: min(var(--suggest-width, 100%), 100%);
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.32);
  border-radius: 18px;
  padding: 8px;
  background: rgb(var(--theme-white-rgb) / 0.98);
  box-shadow: 0 18px 40px rgb(var(--theme-shadow-rgb) / 0.12);
}

.topup-invoice-message {
  border: 1px solid rgb(190 57 47 / 0.36);
  border-radius: 16px;
  padding: 12px 14px;
  color: #a83229;
  background: rgb(190 57 47 / 0.06);
  font-size: 14px;
  font-weight: 850;
}

.topup-invoice-form input.is-invalid,
.topup-invoice-form label.is-invalid input {
  border-color: rgb(190 57 47 / 0.72);
  box-shadow: 0 0 0 4px rgb(190 57 47 / 0.1);
}

.topup-company-suggestions[hidden] {
  display: none !important;
}

.topup-company-suggestion {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 12px 13px;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.topup-company-suggestion:hover,
.topup-company-suggestion:focus-visible {
  background: rgb(var(--theme-mint-rgb) / 0.1);
  outline: none;
}

.topup-company-suggestion.is-muted {
  color: var(--muted);
  cursor: default;
}

.topup-company-suggestion.is-muted:hover,
.topup-company-suggestion.is-muted:focus-visible {
  background: transparent;
}

.topup-company-suggestion strong {
  font-size: 15px;
  font-weight: 900;
}

.topup-company-suggestion small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.topup-invoice-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topup-invoice-grid input,
.topup-invoice-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 16px;
  background: rgb(var(--theme-white-rgb) / 0.84);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  outline: none;
}

.topup-invoice-grid input {
  min-height: 58px;
}

.topup-invoice-grid .topup-invoice-amount-input {
  min-height: 74px;
  border-width: 0 0 2px;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 850;
  letter-spacing: 0.02em;
  text-align: center;
}

.topup-invoice-grid textarea {
  min-height: 96px;
  padding-top: 14px;
  resize: vertical;
}

.topup-invoice-grid input:focus,
.topup-invoice-grid textarea:focus {
  border-color: rgb(var(--theme-mint-rgb) / 0.7);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.14);
}

.topup-invoice-grid .topup-invoice-amount-input:focus {
  box-shadow: none;
}

.topup-invoice-form .primary-button {
  min-height: 62px;
}

.topup-form + .quick-amounts,
.topup-invoice-form + .quick-amounts {
  margin-top: 28px;
}

.invoice-document-body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgb(var(--theme-mint-rgb) / 0.18), transparent 34%),
    linear-gradient(135deg, #f7fbfb 0%, #eef5f2 100%);
  color: var(--text);
  font-family: "Inter", "Arial", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.invoice-document-body * {
  box-sizing: border-box;
}

.invoice-page {
  width: min(1060px, calc(100% - 32px));
  margin: 28px auto;
}

.invoice-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgb(var(--theme-white-rgb) / 0.96);
  box-shadow: 0 24px 70px rgb(var(--theme-shadow-rgb) / 0.14);
}

.invoice-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 34px 24px;
  background:
    linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.1), rgb(var(--theme-white-rgb) / 0.94)),
    #fff;
  border-bottom: 1px solid var(--line);
}

.invoice-brand {
  display: grid;
  gap: 5px;
}

.invoice-brand strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.invoice-brand span,
.invoice-muted {
  color: var(--muted);
  font-weight: 750;
}

.invoice-status {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  padding: 0 16px;
  background: rgb(var(--theme-mint-rgb) / 0.16);
  color: var(--theme-mint-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.invoice-title {
  margin: 0;
  padding: 30px 34px 0;
  color: var(--text);
  font-size: clamp(30px, 4.8vw, 54px);
  line-height: 1.05;
  letter-spacing: 0;
}

.invoice-title + .invoice-muted {
  margin: 14px 34px 0;
  max-width: 860px;
}

.invoice-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  padding: 26px 34px 8px;
}

.invoice-amount {
  min-width: 0;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.42);
  border-radius: 24px;
  padding: 24px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.12), rgb(var(--theme-white-rgb) / 0.96));
}

.invoice-amount span,
.invoice-box label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-amount span {
  color: var(--theme-mint-text);
  letter-spacing: 0.16em;
}

.invoice-amount strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: clamp(38px, 6.5vw, 74px);
  font-weight: 900;
  line-height: 1;
}

.invoice-qr {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  background: #fff;
  text-align: center;
}

.invoice-qr svg {
  width: 198px;
  max-width: 100%;
  height: auto;
}

.invoice-qr strong {
  color: var(--text);
  font-weight: 900;
}

.invoice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 34px 0;
}

.invoice-box {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  background: #fff;
}

.invoice-box label {
  margin-bottom: 7px;
}

.invoice-box strong,
.invoice-box span {
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 900;
}

.invoice-wide {
  grid-column: 1 / -1;
}

.invoice-notice {
  margin: 22px 34px 0;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.38);
  border-radius: 20px;
  padding: 16px 18px;
  background: rgb(var(--theme-mint-rgb) / 0.08);
  color: var(--theme-mint-text);
  font-weight: 850;
}

.invoice-pay-warning {
  margin: 10px 34px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 34px 34px;
}

.invoice-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.58);
  border-radius: 999px;
  padding: 0 20px;
  color: var(--text);
  background: #fff;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.invoice-button.secondary {
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.08);
}

.invoice-button:hover,
.invoice-button:focus-visible {
  background: rgb(var(--theme-mint-rgb) / 0.1);
  outline: none;
}

@media (max-width: 720px) {
  .invoice-page {
    width: min(100% - 20px, 1060px);
    margin: 14px auto;
  }

  .invoice-top,
  .invoice-summary,
  .invoice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .invoice-top {
    display: grid;
    padding: 22px;
  }

  .invoice-title {
    padding: 24px 22px 0;
    font-size: clamp(28px, 9vw, 42px);
  }

  .invoice-title + .invoice-muted {
    margin-inline: 22px;
  }

  .invoice-summary {
    padding: 22px 22px 6px;
  }

  .invoice-grid {
    padding-inline: 22px;
  }

  .invoice-notice {
    margin-inline: 22px;
  }

  .invoice-pay-warning {
    margin-inline: 22px;
  }

  .invoice-actions {
    padding: 18px 22px 24px;
  }

  .invoice-status {
    width: fit-content;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  .invoice-document-body {
    background: #fff;
    font-size: 12px;
  }

  .invoice-page {
    width: 100%;
    margin: 0;
  }

  .invoice-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .invoice-top,
  .invoice-summary,
  .invoice-grid {
    padding-left: 0;
    padding-right: 0;
  }

  .invoice-title {
    padding-left: 0;
    padding-right: 0;
    font-size: 30px;
  }

  .invoice-title + .invoice-muted,
  .invoice-notice,
  .invoice-pay-warning {
    margin-left: 0;
    margin-right: 0;
  }

  .invoice-actions {
    display: none;
  }
}

.quick-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px;
}

.quick-amounts button {
  width: 100%;
}

.quick-amounts .secondary-button {
  min-width: 0;
  padding-inline: 10px;
  letter-spacing: 0.2px;
  line-height: 1.08;
  white-space: nowrap;
}

.topup-choice-button.is-active {
  color: var(--theme-white);
  border-color: transparent;
  background: linear-gradient(135deg, var(--theme-mint), var(--theme-mint-strong));
  box-shadow: 0 16px 34px rgb(var(--theme-mint-rgb) / 0.28);
}

.topup-form input[type="number"],
.topup-invoice-grid input[type="number"],
.billing-sale-controls input[type="number"],
.landing-sale-qty-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.topup-form input[type="number"]::-webkit-outer-spin-button,
.topup-form input[type="number"]::-webkit-inner-spin-button,
.topup-invoice-grid input[type="number"]::-webkit-outer-spin-button,
.topup-invoice-grid input[type="number"]::-webkit-inner-spin-button,
.billing-sale-controls input[type="number"]::-webkit-outer-spin-button,
.billing-sale-controls input[type="number"]::-webkit-inner-spin-button,
.landing-sale-qty-field input[type="number"]::-webkit-outer-spin-button,
.landing-sale-qty-field input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.store-list {
  display: grid;
  gap: 18px;
}

.store-panel-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.store-search-input {
  width: min(230px, 42vw);
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 13px;
  background: rgb(var(--theme-white-rgb) / 0.72);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  outline: none;
}

.store-search-input::placeholder {
  color: rgb(var(--theme-ink-rgb) / 0.34);
}

.store-search-input:focus {
  border-color: rgb(var(--theme-mint-rgb) / 0.62);
  box-shadow: 0 0 0 3px rgb(var(--theme-mint-rgb) / 0.12);
}

.store-search-empty {
  margin-top: 14px;
}

.store-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.store-pagination[hidden] {
  display: none;
}

.store-pagination .secondary-button {
  min-height: 34px;
  border-radius: 10px;
  padding-inline: 12px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.store-pagination span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.wb-key-form {
  grid-template-columns: 1fr;
  gap: 24px;
}

.wb-key-form label {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.wb-key-form input {
  min-width: 0;
  letter-spacing: 0.4px;
}

.wb-key-form input[name="title"] {
  color: #444;
}

.wb-key-form input {
  min-height: 54px;
  font-size: 21px;
}

.wb-key-form label span {
  color: #333333;
  line-height: 1.35;
  opacity: 1;
}

.wb-token-note {
  display: block;
  max-width: 980px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.wb-token-note a {
  color: var(--theme-mint-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wb-key-form .primary-button {
  width: 100%;
  min-height: 58px;
  padding-inline: 20px;
  white-space: nowrap;
}

.store-card {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 92% 12%, rgb(var(--theme-mint-rgb) / 0.11), transparent 24%),
    rgb(var(--theme-white-rgb) / 0.88);
  box-shadow: 0 12px 30px rgb(var(--theme-ink-rgb) / 0.075);
}

.store-card[hidden],
.store-search-empty[hidden] {
  display: none !important;
}

.store-card.summary {
  margin-top: 18px;
  border-color: rgb(var(--theme-mint-rgb) / 0.42);
}

.store-card.is-token-error,
.store-card:has(.token-check-card.danger) {
  border-color: rgb(var(--theme-red-rgb) / 0.32);
  background:
    radial-gradient(circle at 92% 12%, rgb(var(--theme-red-rgb) / 0.11), transparent 24%),
    linear-gradient(180deg, rgb(var(--theme-red-soft-rgb) / 0.22), rgb(var(--theme-white-rgb) / 0.9));
  box-shadow: 0 18px 42px rgb(var(--theme-red-rgb) / 0.1);
}

.store-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.store-title-block {
  min-width: 0;
}

.store-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5px;
}

.store-card-head h3 {
  margin-bottom: 4px;
}

.store-title-row h3 {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.14;
}

.store-card.is-token-error .store-title-row h3,
.store-card:has(.token-check-card.danger) .store-title-row h3 {
  color: var(--theme-red);
}

.store-connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.36);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgb(var(--theme-mint-rgb) / 0.12);
  color: var(--theme-mint-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.store-connected-badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-card.is-token-error .store-connected-badge,
.store-card:has(.token-check-card.danger) .store-connected-badge {
  border-color: rgb(var(--theme-red-rgb) / 0.28);
  background: rgb(var(--theme-red-soft-rgb) / 0.32);
  color: var(--theme-red);
}

.store-card-head p {
  margin-bottom: 0;
  font-size: 13px;
}

.store-safe-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
}

.store-safe-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.32);
  border-radius: 8px;
  background: rgb(var(--theme-mint-rgb) / 0.12);
  color: var(--theme-mint-text);
}

.store-safe-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-card.is-token-error .store-safe-icon,
.store-card.is-token-error .store-id,
.store-card:has(.token-check-card.danger) .store-safe-icon,
.store-card:has(.token-check-card.danger) .store-id {
  border-color: rgb(var(--theme-red-rgb) / 0.28);
  background: rgb(var(--theme-red-soft-rgb) / 0.28);
  color: var(--theme-red);
}

.store-card.is-token-error .store-safe-note,
.store-card:has(.token-check-card.danger) .store-safe-note {
  color: rgb(var(--theme-red-rgb) / 0.72);
}

.store-id {
  min-width: max-content;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.32);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.12);
  font-size: 12px;
  font-weight: 600;
}

.store-card-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.store-card-actions {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.store-card-actions form {
  margin: 0;
}

.store-card-actions .secondary-button {
  min-height: 34px;
  border-radius: 10px;
  padding-inline: 12px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.store-edit-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
  border-radius: 14px;
  padding: 14px;
  background: rgb(var(--theme-page-rgb) / 0.56);
}

.store-edit-form[hidden] {
  display: none;
}

.store-edit-form label {
  gap: 7px;
}

.store-edit-form label span {
  color: #333333;
  font-size: 12px;
  letter-spacing: 0.4px;
  opacity: 1;
}

.store-edit-form input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  background: var(--paper);
  font-size: 15px;
  letter-spacing: 0;
}

.store-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-edit-actions .primary-button,
.store-edit-actions .secondary-button {
  min-height: 42px;
  border-radius: 12px;
  letter-spacing: 0.2px;
  text-transform: none;
}

.store-status {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--paper);
}

.store-status span,
.store-status small {
  display: block;
}

.store-status span {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.store-status small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.store-status.ready {
  border-color: rgb(var(--theme-mint-rgb) / 0.45);
  background: rgb(var(--theme-mint-rgb) / 0.1);
}

.store-status.saved,
.store-status.not_synced {
  border-color: rgb(var(--theme-mint-rgb) / 0.34);
  background: rgb(var(--theme-mint-rgb) / 0.08);
}

.store-status.syncing {
  border-color: rgb(var(--theme-mint-rgb) / 0.34);
}

.store-status.error {
  border-color: rgb(var(--theme-red-rgb) / 0.24);
  background: rgb(var(--theme-red-soft-rgb) / 0.25);
}

.sync-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.07);
}

.sync-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
  animation: syncSlide 1.2s ease-in-out infinite;
}

@keyframes syncSlide {
  0% {
    transform: translateX(-110%);
  }

  50% {
    transform: translateX(70%);
  }

  100% {
    transform: translateX(240%);
  }
}

.key-mask-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.key-mask-grid.single {
  grid-template-columns: 1fr;
}

.token-health-grid {
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(180px, 0.8fr));
}

.key-mask-grid div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgb(var(--theme-page-rgb) / 0.58);
}

.key-mask-grid span,
.key-mask-grid strong,
.key-mask-grid small {
  display: block;
}

.key-mask-grid span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.key-mask-grid strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.key-mask-grid small {
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-inventory-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: -4px;
  padding-top: 9px;
  overflow-x: auto;
  border-top: 1px solid rgb(var(--theme-ink-rgb) / 0.055);
  scrollbar-width: none;
}

.store-inventory-summary::-webkit-scrollbar {
  display: none;
}

.store-inventory-rail {
  width: 82px;
  height: 3px;
  flex: 0 0 82px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.065);
}

.store-inventory-rail i {
  display: block;
  width: 76%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(104 110 236), rgb(var(--theme-mint-rgb)));
}

.store-card.is-token-error .store-inventory-rail i,
.store-card:has(.token-check-card.danger) .store-inventory-rail i {
  background: var(--theme-red);
}

.store-inventory-metric {
  min-width: max-content;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.store-inventory-metric:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 10px;
  margin-left: 4px;
  background: rgb(var(--theme-ink-rgb) / 0.09);
}

.store-inventory-metric em {
  color: rgb(var(--theme-ink-rgb) / 0.42);
  font-style: normal;
}

.store-inventory-metric strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.store-inventory-metric small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.store-inventory-metric.is-main small::before {
  content: "";
  width: 1px;
  height: 10px;
  background: rgb(var(--theme-ink-rgb) / 0.12);
}

.store-inventory-metric.is-category strong {
  color: var(--theme-mint-text);
}

.token-expiry-card.ok {
  border-color: rgb(var(--theme-mint-rgb) / 0.36);
  background: rgb(var(--theme-mint-rgb) / 0.09);
}

.token-expiry-card.notice {
  border-color: rgb(var(--theme-mint-rgb) / 0.44);
  background:
    radial-gradient(circle at 88% 12%, rgb(var(--theme-mint-rgb) / 0.18), transparent 28%),
    rgb(var(--theme-page-rgb) / 0.62);
}

.token-expiry-card.warning {
  border-color: rgb(245 158 11 / 0.38);
  background: rgb(255 247 237 / 0.88);
}

.token-expiry-card.danger {
  border-color: rgb(var(--theme-red-rgb) / 0.28);
  background: rgb(var(--theme-red-soft-rgb) / 0.28);
}

.token-expiry-card.warning strong,
.token-expiry-card.danger strong {
  color: var(--theme-red);
}

.token-check-card.is-valid {
  position: relative;
  padding-left: 52px;
}

.token-check-card.is-valid::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.45);
  border-radius: 999px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.16);
  box-shadow: 0 10px 24px rgb(var(--theme-mint-shadow-rgb) / 0.18);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

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

.inventory-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: var(--paper);
}

.inventory-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inventory-card-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.inventory-card-head strong {
  color: var(--theme-mint-text);
  font-size: 13px;
  text-align: right;
}

.inventory-bars {
  display: grid;
  gap: 10px;
}

.inventory-bars div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
}

.inventory-bars span,
.inventory-bars strong {
  color: var(--muted);
  font-size: 12px;
}

.inventory-bars strong {
  color: var(--text);
  font-weight: 600;
}

.inventory-bars i {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.07);
}

.inventory-bars i::before {
  content: "";
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), rgb(var(--theme-mint-rgb) / 0.62));
}

.inventory-bars i.bar-w-1::before { width: 5%; }
.inventory-bars i.bar-w-2::before { width: 10%; }
.inventory-bars i.bar-w-3::before { width: 15%; }
.inventory-bars i.bar-w-4::before { width: 20%; }
.inventory-bars i.bar-w-5::before { width: 25%; }
.inventory-bars i.bar-w-6::before { width: 30%; }
.inventory-bars i.bar-w-7::before { width: 35%; }
.inventory-bars i.bar-w-8::before { width: 40%; }
.inventory-bars i.bar-w-9::before { width: 45%; }
.inventory-bars i.bar-w-10::before { width: 50%; }
.inventory-bars i.bar-w-11::before { width: 55%; }
.inventory-bars i.bar-w-12::before { width: 60%; }
.inventory-bars i.bar-w-13::before { width: 65%; }
.inventory-bars i.bar-w-14::before { width: 70%; }
.inventory-bars i.bar-w-15::before { width: 75%; }
.inventory-bars i.bar-w-16::before { width: 80%; }
.inventory-bars i.bar-w-17::before { width: 85%; }
.inventory-bars i.bar-w-18::before { width: 90%; }
.inventory-bars i.bar-w-19::before { width: 95%; }
.inventory-bars i.bar-w-20::before { width: 100%; }

.inventory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.inventory-tags:empty {
  display: none;
}

.inventory-tags span {
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 999px;
  padding: 6px 8px;
  color: var(--muted);
  background: rgb(var(--theme-page-rgb) / 0.7);
  font-size: 11px;
  line-height: 1;
}

.sale-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px;
  min-height: 180px;
}

.sale-hero-copy {
  min-width: 0;
  padding-right: 24px;
}

.sale-hero-copy p {
  max-width: 860px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.sale-hero-warning {
  margin-top: 10px;
  color: var(--theme-red);
  font-weight: 800;
}

.sale-hero-actions,
.sale-report-actions,
.sale-store-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.sale-hero-actions form {
  margin: 0;
}

.sale-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 220px));
  justify-content: start;
  gap: 12px;
}

.sale-metrics > div {
  min-width: 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: var(--paper);
}

.sale-metrics .sale-metric-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sale-live-compact-form {
  display: block;
}

.sale-live-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.sale-live-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 92% 0%, rgb(var(--theme-mint-rgb) / 0.08), transparent 30%),
    var(--paper);
}

.sale-live-card.not-ready {
  border-color: rgb(var(--theme-mint-rgb) / 0.28);
  opacity: 0.78;
}

.sale-live-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sale-live-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-live-card-progress {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
}

.sale-live-card-progress span,
.sale-live-card-progress b,
.sale-live-card-meta span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-live-card-progress b,
.sale-live-card-meta b {
  color: var(--text);
}

.sale-live-card-progress .sale-progress {
  grid-column: 1 / -1;
  height: 5px;
}

.sale-live-card-meta {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 8px;
}

.sale-live-next {
  grid-column: 1 / -1;
}

.sale-live-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sale-live-actions .secondary-button {
  min-height: 28px;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.sale-metrics span,
.sale-metrics strong,
.sale-metrics small {
  display: block;
}

.sale-metrics span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.sale-metrics .sale-metric-head span {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-metrics strong {
  margin-top: 8px;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}

.sale-metrics strong [data-sale-metric-number] {
  display: inline;
  color: inherit;
  font: inherit;
}

.sale-inventory-total {
  display: flex !important;
  max-width: 100%;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
  font-size: clamp(16px, 2.25vw, 26px);
  letter-spacing: 0;
  white-space: nowrap;
}

.sale-metrics .sale-metric-separator {
  display: inline;
  flex: 0 0 auto;
  margin: 0 3px;
  color: rgb(var(--theme-ink-rgb) / 0.22);
  font: inherit;
}

.sale-metrics small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.sale-inventory-metric em {
  display: block;
  margin-top: 8px;
  color: var(--mint-dark);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

.sale-inventory-metric .sale-help-label i {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.sale-inventory-metric .sale-metric-head {
  position: static;
  padding-right: 26px;
}

.sale-settings-workbench {
  display: grid;
  gap: 22px;
}

.sale-workbench-head {
  align-items: center;
}

.sale-toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10020;
  width: min(340px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 36px);
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  overflow: visible;
  contain: layout paint;
  pointer-events: none;
}

.sale-toast {
  min-height: 54px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-radius: 18px;
  padding: 10px 10px 10px 13px;
  color: var(--theme-mint-text);
  background:
    radial-gradient(circle at 92% 0%, rgb(var(--theme-mint-rgb) / 0.16), transparent 48%),
    rgb(var(--theme-white-rgb) / 0.96);
  box-shadow: 0 18px 42px rgb(var(--theme-ink-rgb) / 0.14);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-8px);
  animation: sale-toast-in 0.18s ease forwards;
  pointer-events: auto;
}

.sale-toast.error {
  border-color: rgb(244 67 54 / 0.22);
  color: #b42318;
  background:
    radial-gradient(circle at 92% 0%, rgb(244 67 54 / 0.12), transparent 48%),
    rgb(255 247 246 / 0.98);
}

.sale-toast.closing {
  animation: sale-toast-out 0.18s ease forwards;
}

.sale-toast-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.sale-toast-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sale-toast-copy strong,
.sale-toast-copy small {
  overflow-wrap: anywhere;
}

.sale-toast-copy strong {
  color: currentColor;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}

.sale-toast-copy small {
  color: rgb(var(--theme-ink-rgb) / 0.54);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sale-toast button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: currentColor;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.sale-toast button:hover,
.sale-toast button:focus-visible {
  background: rgb(var(--theme-ink-rgb) / 0.06);
  outline: 0;
}

@keyframes sale-toast-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sale-toast-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.sale-price-editor,
.sale-store-toggle-section {
  display: grid;
  gap: 12px;
}

.sale-price-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sale-price-editor-head h3,
.sale-price-editor-head p {
  margin: 0;
}

.sale-price-editor-head h3 {
  color: var(--text);
  font-size: 22px;
  line-height: 1.15;
}

.sale-price-editor-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.sale-global-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.sale-global-settings-grid label {
  display: grid;
  gap: 6px;
}

.sale-global-settings-grid span,
.sale-schedule-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.sale-help-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sale-help-label i {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.38);
  border-radius: 999px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.11);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  cursor: help;
}

.sale-help-label i::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: auto;
  bottom: calc(100% + 10px);
  z-index: 50;
  width: min(420px, calc(100vw - 44px));
  max-width: 420px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-radius: 16px;
  padding: 13px 14px;
  color: var(--text);
  background:
    radial-gradient(circle at 92% 0%, rgb(var(--theme-mint-rgb) / 0.14), transparent 40%),
    var(--paper);
  box-shadow: 0 20px 42px rgb(var(--theme-ink-rgb) / 0.18);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  pointer-events: none;
}

.sale-help-label i::before {
  content: "";
  position: absolute;
  left: 8px;
  top: auto;
  bottom: calc(100% + 5px);
  z-index: 51;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-bottom: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: rotate(45deg) translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  pointer-events: none;
}

.sale-help-label i:hover::after,
.sale-help-label i:focus-visible::after,
.sale-help-label i:hover::before,
.sale-help-label i:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sale-help-label i:hover::before,
.sale-help-label i:focus-visible::before {
  transform: rotate(45deg) translateY(0);
}

.sale-help-label i::after,
.sale-help-label i::before {
  display: none !important;
}

.sale-mobile-field-label {
  display: none;
}

.sale-tip-popover {
  position: fixed;
  z-index: 12000;
  width: min(420px, calc(100vw - 24px));
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.34);
  border-radius: 16px;
  padding: 13px 14px;
  color: var(--text);
  background:
    radial-gradient(circle at 92% 0%, rgb(var(--theme-mint-rgb) / 0.16), transparent 42%),
    rgb(var(--theme-white-rgb) / 0.98);
  box-shadow: 0 22px 48px rgb(var(--theme-ink-rgb) / 0.2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.42;
  pointer-events: none;
}

.sale-tip-popover::after {
  content: "";
  position: absolute;
  left: var(--sale-tip-arrow-left, 22px);
  bottom: -6px;
  width: 11px;
  height: 11px;
  border-right: 1px solid rgb(var(--theme-mint-rgb) / 0.34);
  border-bottom: 1px solid rgb(var(--theme-mint-rgb) / 0.34);
  background: rgb(var(--theme-white-rgb) / 0.98);
  transform: translateX(-50%) rotate(45deg);
}

.sale-schedule-block {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgb(var(--theme-page-rgb) / 0.46);
}

.sale-schedule-block h4,
.sale-schedule-block p {
  margin: 0;
}

.sale-schedule-block h4 {
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.sale-schedule-block p {
  margin-top: 5px;
  max-width: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.sale-schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.sale-schedule-grid label {
  display: grid;
  gap: 6px;
}

.sale-price-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgb(var(--theme-page-rgb) / 0.46);
}

.sale-price-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.sale-price-table th,
.sale-price-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.sale-price-table tr:last-child td {
  border-bottom: 0;
}

.sale-price-table th {
  color: var(--muted);
  background: rgb(var(--theme-page-rgb) / 0.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sale-price-table td {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.sale-price-table td strong,
.sale-price-table td small,
.sale-stock-cell span,
.sale-stock-cell em {
  display: block;
}

.sale-price-table td small,
.sale-stock-cell small,
.sale-stock-cell span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.sale-price-table input,
.sale-global-settings-grid input,
.sale-schedule-grid input,
.sale-card-times input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 11px;
  color: var(--text);
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sale-price-table input:focus,
.sale-global-settings-grid input:focus,
.sale-schedule-grid input:focus,
.sale-card-times input:focus {
  border-color: rgb(var(--theme-mint-rgb) / 0.7);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.12);
}

.sale-price-table input:disabled {
  color: rgb(var(--theme-ink-rgb) / 0.34);
  background: rgb(var(--theme-ink-rgb) / 0.035);
  cursor: not-allowed;
}

.sale-cart-price-cell {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 10px;
}

.sale-cart-toggle {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.sale-cart-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.sale-cart-toggle span {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.1);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.sale-cart-toggle span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 2px 8px rgb(var(--theme-ink-rgb) / 0.16);
  transition: transform 0.18s ease;
}

.sale-cart-toggle input:checked + span {
  background: var(--mint);
  box-shadow: 0 6px 14px rgb(var(--theme-mint-rgb) / 0.22);
}

.sale-cart-toggle input:checked + span::after {
  transform: translateX(16px);
}

.sale-cart-toggle input:focus-visible + span {
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.14);
}

.sale-cart-toggle em {
  color: inherit;
  font-style: normal;
}

.sale-stock-cell {
  min-width: 150px;
}

.sale-stock-cell strong,
.sale-stock-inline strong {
  color: var(--theme-mint-text);
}

.sale-stock-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.sale-stock-inline span {
  display: inline;
  margin: 0;
  color: rgb(var(--theme-ink-rgb) / 0.2);
  font-size: 13px;
  font-weight: 900;
}

.sale-stock-cell em {
  margin-top: 6px;
  color: var(--theme-mint-text);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.sale-stock-cell em.saving {
  color: var(--muted);
}

.sale-stock-cell em.error {
  color: #b42318;
}

.sale-toggle-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.sale-toggle-card {
  min-width: 0;
  grid-column: span 4;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(circle at 90% 6%, rgb(var(--theme-mint-rgb) / 0.08), transparent 26%),
    var(--paper);
}

.sale-toggle-count-1 .sale-toggle-card {
  grid-column: 1 / -1;
}

.sale-toggle-count-2 .sale-toggle-card,
.sale-toggle-count-4 .sale-toggle-card,
.sale-toggle-count-5 .sale-toggle-card:nth-last-child(-n + 2) {
  grid-column: span 6;
}

.sale-toggle-count-3 .sale-toggle-card,
.sale-toggle-count-5 .sale-toggle-card,
.sale-toggle-count-6 .sale-toggle-card {
  grid-column: span 4;
}

@media (max-width: 1180px) {
  .sale-toggle-card,
  .sale-toggle-count-1 .sale-toggle-card,
  .sale-toggle-count-2 .sale-toggle-card,
  .sale-toggle-count-3 .sale-toggle-card,
  .sale-toggle-count-4 .sale-toggle-card,
  .sale-toggle-count-5 .sale-toggle-card,
  .sale-toggle-count-5 .sale-toggle-card:nth-last-child(-n + 2),
  .sale-toggle-count-6 .sale-toggle-card {
    grid-column: span 6;
  }
}

@media (max-width: 720px) {
  .sale-toggle-card,
  .sale-toggle-count-1 .sale-toggle-card,
  .sale-toggle-count-2 .sale-toggle-card,
  .sale-toggle-count-3 .sale-toggle-card,
  .sale-toggle-count-4 .sale-toggle-card,
  .sale-toggle-count-5 .sale-toggle-card,
  .sale-toggle-count-5 .sale-toggle-card:nth-last-child(-n + 2),
  .sale-toggle-count-6 .sale-toggle-card {
    grid-column: 1 / -1;
  }
}

.sale-toggle-card.not-ready {
  opacity: 0.72;
}

.sale-toggle-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
}

.sale-card-control-row {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 54px;
  padding-right: 10px;
  white-space: nowrap;
}

.sale-card-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sale-card-title strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 19px;
  line-height: 1.15;
}

.sale-card-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.sale-switch {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  color: var(--text);
  font-weight: 900;
}

.sale-switch-only {
  grid-template-columns: auto;
  flex: 0 0 auto;
}

.sale-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.sale-switch span {
  position: relative;
  width: 52px;
  height: 30px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.1);
  border-radius: 999px;
  background: rgb(var(--theme-page-rgb) / 0.9);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.sale-switch span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 7px rgb(var(--theme-ink-rgb) / 0.18);
  transition: transform 0.18s ease;
}

.sale-switch input:checked + span {
  border-color: rgb(var(--theme-mint-rgb) / 0.5);
  background: var(--mint);
}

.sale-switch input:checked + span::after {
  transform: translateX(22px);
}

.sale-switch input:disabled + span {
  opacity: 0.52;
}

.sale-switch strong {
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.2;
}

.sale-card-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding-top: 2px;
}

.sale-card-times label,
.sale-card-category-list label {
  min-width: 0;
}

.sale-card-times span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sale-card-category-list {
  display: grid;
  gap: 7px;
}

.sale-card-category-list label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: 13px;
  padding: 9px 10px;
  background: rgb(var(--theme-page-rgb) / 0.64);
}

.sale-card-category-list strong,
.sale-card-category-list small {
  display: block;
}

.sale-card-category-list strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.sale-card-category-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.sale-card-category-list input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.sale-card-category-toggle i {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.08);
  box-shadow: inset 0 0 0 1px rgb(var(--theme-ink-rgb) / 0.08);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.sale-card-category-toggle i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 2px 7px rgb(var(--theme-ink-rgb) / 0.18);
  transition: transform 0.18s ease;
}

.sale-card-category-toggle input:checked + i {
  background: var(--mint);
  box-shadow: inset 0 0 0 1px rgb(var(--theme-mint-rgb) / 0.34);
}

.sale-card-category-toggle input:checked + i::after {
  transform: translateX(22px);
}

.sale-store-control-form {
  display: block;
}

.sale-store-table,
.sale-settings-list,
.sale-category-list,
.sale-error-list,
.sale-report-list,
.sale-mini-report-list {
  display: grid;
  gap: 12px;
}

.sale-report-list-detailed {
  gap: 14px;
}

.sale-store-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.15fr) minmax(190px, 0.85fr) minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: var(--paper);
}

.sale-store-row.not-ready,
.sale-settings-store.not-ready {
  border-color: rgb(var(--theme-mint-rgb) / 0.35);
  background:
    radial-gradient(circle at 92% 12%, rgb(var(--theme-mint-rgb) / 0.12), transparent 28%),
    var(--paper);
}

.sale-store-main,
.sale-store-state,
.sale-store-numbers,
.sale-store-tail {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.sale-store-main strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sale-store-main small,
.sale-store-message,
.sale-store-state span,
.sale-store-numbers span,
.sale-store-tail span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.sale-store-message {
  max-width: 360px;
}

.sale-store-state strong,
.sale-store-numbers strong,
.sale-store-tail strong {
  color: var(--text);
}

.sale-progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.07);
}

.sale-progress i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--mint);
  box-shadow: 0 8px 22px rgb(var(--theme-mint-shadow-rgb) / 0.28);
  transition: width 0.25s ease;
}

.sale-store-actions {
  align-items: center;
}

.sale-store-actions .secondary-button {
  min-height: 34px;
  border-radius: 12px;
  padding-inline: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.secondary-button.danger-outline {
  border-color: rgb(var(--theme-red-rgb) / 0.28);
  color: var(--theme-red);
}

.secondary-button.danger-outline:hover {
  border-color: rgb(var(--theme-red-rgb) / 0.45);
  background: rgb(var(--theme-red-soft-rgb) / 0.42);
}

.sale-store-actions .secondary-button:disabled,
.sale-hero-actions button:disabled,
.sale-report-actions .secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.sale-settings-store {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at 92% 10%, rgb(var(--theme-mint-rgb) / 0.1), transparent 24%),
    var(--paper);
}

.sale-settings-store-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

.sale-toggle,
.sale-check {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
}

.sale-toggle input,
.sale-check input,
.sale-brand-list input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--mint);
}

.sale-toggle.disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.sale-toggle strong,
.sale-toggle small {
  display: block;
}

.sale-toggle strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
}

.sale-toggle small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.sale-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sale-time-grid label,
.sale-category-settings label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.sale-time-grid span,
.sale-category-settings span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sale-time-grid input,
.sale-category-settings input[type="number"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--text);
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.sale-schedule-grid .has-apple-picker {
  gap: 6px;
}

.sale-schedule-grid .apple-picker-trigger {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: var(--paper);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.sale-schedule-grid .apple-picker-trigger:hover,
.sale-schedule-grid .apple-picker-trigger:focus-visible {
  border-color: rgb(var(--theme-mint-rgb) / 0.55);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.12);
}

.sale-category-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgb(var(--theme-page-rgb) / 0.56);
}

.sale-category-card[open] {
  border-color: rgb(var(--theme-mint-rgb) / 0.34);
  background: rgb(var(--theme-mint-rgb) / 0.07);
}

.sale-category-card summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.sale-category-card summary::-webkit-details-marker {
  display: none;
}

.sale-category-card summary strong,
.sale-category-card summary small,
.sale-category-card summary em {
  display: block;
}

.sale-category-card summary strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.sale-category-card summary small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.sale-category-card summary em {
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.15);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.sale-category-settings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 14px;
}

.sale-check {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--paper);
  font-size: 13px;
}

.sale-brand-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 0 14px 14px;
}

.sale-brand-list label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--paper);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.sale-brand-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.sale-bottom-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
}

.sale-inventory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.sale-inventory-grid .inventory-card {
  min-height: 170px;
}

.sale-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sale-stat-grid section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-page-rgb) / 0.5);
}

.sale-stat-grid h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 18px;
}

.sale-stat-list {
  display: grid;
  gap: 8px;
}

.sale-stat-list > div {
  min-width: 0;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 14px;
  padding: 11px 12px;
  background: var(--paper);
}

.sale-stat-list strong,
.sale-stat-list span,
.sale-stat-list small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sale-stat-list strong {
  color: var(--text);
  font-size: 14px;
}

.sale-stat-list span,
.sale-stat-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.sale-error-row,
.sale-report-row,
.sale-mini-report-list > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 14px;
  background: var(--paper);
}

.sale-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sale-error-row strong,
.sale-error-row span,
.sale-error-row small,
.sale-report-row strong,
.sale-report-row span,
.sale-mini-report-list span,
.sale-mini-report-list strong,
.sale-mini-report-list a {
  display: block;
}

.sale-error-row strong,
.sale-report-row strong,
.sale-mini-report-list strong {
  color: var(--text);
}

.sale-error-row span,
.sale-error-row small,
.sale-report-row span,
.sale-mini-report-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.sale-mini-report-list a {
  margin-top: 6px;
  color: var(--theme-mint-text);
  font-weight: 900;
}

.sale-error-row {
  display: grid;
  gap: 4px;
}

.sale-error-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.sale-report-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.4fr) minmax(180px, 0.9fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background:
    radial-gradient(circle at 96% 16%, rgb(var(--theme-mint-rgb) / 0.1), transparent 28%),
    var(--paper);
}

.sale-report-card.has-errors {
  border-color: rgb(var(--theme-red-rgb) / 0.24);
  background:
    radial-gradient(circle at 96% 16%, rgb(var(--theme-red-soft-rgb) / 0.2), transparent 28%),
    var(--paper);
}

.sale-report-card-title,
.sale-report-card-note,
.sale-report-card-stats span {
  min-width: 0;
}

.sale-report-card-title span,
.sale-report-card-title strong,
.sale-report-card-title small,
.sale-report-card-note span {
  display: block;
}

.sale-report-card-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.sale-report-card-title strong {
  margin-top: 4px;
  color: var(--theme-mint-text);
  font-size: 24px;
  line-height: 1.1;
}

.sale-report-card.has-errors .sale-report-card-title strong {
  color: var(--theme-red);
}

.sale-report-card-title small,
.sale-report-card-note span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.sale-report-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sale-report-card-stats span {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: rgb(var(--theme-white-rgb) / 0.7);
}

.sale-report-card-stats em,
.sale-report-card-stats b {
  display: block;
}

.sale-report-card-stats em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sale-report-card-stats b {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
}

.sale-mini-report-list-rich > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.sale-mini-report-list-rich > div.is-ok {
  border-color: rgb(var(--theme-mint-rgb) / 0.26);
  background:
    radial-gradient(circle at 96% 10%, rgb(var(--theme-mint-rgb) / 0.08), transparent 26%),
    var(--paper);
}

.sale-mini-report-list-rich > div.has-errors {
  border-color: rgb(var(--theme-red-rgb) / 0.24);
}

.sale-mini-report-list-rich small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.sale-mini-report-list-rich > div.is-ok strong {
  color: var(--theme-mint-text);
}

.sale-mini-report-list-rich > div.has-errors strong {
  color: var(--theme-red);
}

.sale-mini-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.sale-mini-report-footer span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.empty-state.compact {
  border-radius: 14px;
  padding: 13px;
  font-size: 13px;
}

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

.instruction-grid > div {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-page-rgb) / 0.55);
}

.instruction-grid h3 {
  margin-bottom: 6px;
}

.instruction-grid p {
  margin-bottom: 0;
  font-size: 14px;
}

.wb-token-table {
  display: grid;
  gap: 10px;
}

.wb-token-table > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: rgb(var(--theme-page-rgb) / 0.54);
}

.wb-token-table.single > div {
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr) minmax(150px, auto);
}

.wb-token-table strong {
  color: var(--text);
  font-size: 17px;
}

.wb-token-table span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.wb-token-table em {
  justify-self: end;
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.14);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.wb-step-list {
  display: grid;
  gap: 16px;
}

.wb-step {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  background: rgb(var(--theme-white-rgb) / 0.8);
}

.wb-step-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.wb-step-copy span {
  width: max-content;
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.14);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.wb-step-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 23px;
}

.wb-step-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.wb-step-copy p strong {
  color: var(--text);
  font-weight: 700;
}

.wb-token-checklist {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  color: var(--muted);
  counter-reset: wb-token-step;
  font-size: 15px;
  line-height: 1.4;
  list-style: none;
}

.wb-token-checklist li {
  position: relative;
  min-height: 42px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
  border-radius: 12px;
  padding: 9px 11px 9px 46px;
  background: rgb(var(--theme-white-rgb) / 0.76);
  overflow-wrap: anywhere;
}

.wb-token-checklist li::before {
  counter-increment: wb-token-step;
  content: counter(wb-token-step);
  position: absolute;
  left: 11px;
  top: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--mint);
  color: var(--theme-paper);
  font-size: 12px;
  font-weight: 800;
  transform: translateY(-50%);
}

.wb-token-checklist strong,
.wb-token-checklist a {
  color: var(--text);
  font-weight: 800;
}

.wb-token-count-note {
  color: var(--theme-mint-text);
  white-space: nowrap;
}

.wb-token-encrypted-badge,
.wb-token-access-badge,
#wb-api [data-wb-connect-status].ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wb-token-encrypted-badge,
.wb-token-access-badge {
  font-size: 10px;
}

.wb-token-encrypted-badge::before,
.wb-token-access-badge::before,
#wb-api [data-wb-connect-status].ok::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.wb-token-encrypted-badge::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.wb-token-access-badge::before,
#wb-api [data-wb-connect-status].ok::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.wb-token-table.single strong {
  font-size: 13px;
  line-height: 1.25;
}

.wb-token-table.single span {
  font-size: 11px;
  line-height: 1.35;
}

.wb-token-table.single .wb-token-access-badge {
  gap: 4px;
  min-height: 20px;
  padding: 4px 8px;
  font-size: 9px;
  line-height: 1;
}

.wb-token-table.single .wb-token-access-badge::before {
  width: 10px;
  height: 10px;
}

.wb-token-checklist a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wb-step-visual {
  position: relative;
  min-width: 0;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.09);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 12%, rgb(var(--theme-mint-rgb) / 0.2), transparent 32%),
    linear-gradient(135deg, rgb(var(--theme-page-rgb) / 0.8), var(--paper));
}

.wb-check-shot {
  min-height: 300px;
}

.wb-api-entry-card {
  min-height: 250px;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 24px;
  background:
    radial-gradient(circle at 82% 12%, rgb(var(--theme-mint-rgb) / 0.28), transparent 34%),
    linear-gradient(135deg, rgb(var(--theme-white-rgb) / 0.94), rgb(var(--theme-page-rgb) / 0.72));
}

.wb-api-entry-head {
  display: grid;
  gap: 6px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
  border-radius: 16px;
  padding: 16px;
  background: rgb(var(--theme-white-rgb) / 0.82);
  box-shadow: 0 18px 36px rgb(var(--theme-ink-rgb) / 0.08);
}

.wb-api-entry-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.wb-api-entry-head strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.wb-api-entry-card p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.wb-api-entry-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wb-api-entry-points span {
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.24);
  border-radius: 13px;
  padding: 10px 12px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.1);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.wb-api-entry-button {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  color: var(--theme-paper);
  background: var(--mint);
  box-shadow: 0 16px 30px rgb(var(--theme-mint-rgb) / 0.22);
  font-weight: 800;
}

.wb-api-entry-button:hover {
  color: var(--theme-paper);
  background: var(--mint-dark);
}

.fake-sidebar {
  position: absolute;
  inset: 16px auto 16px 16px;
  width: 62px;
  border-radius: 16px;
  background: rgb(var(--theme-ink-rgb) / 0.08);
}

.fake-card {
  position: absolute;
  left: 96px;
  right: 22px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}

.fake-card.big {
  top: 28px;
  height: 72px;
}

.fake-card.small {
  top: 114px;
  height: 44px;
}

.fake-token-button {
  position: absolute;
  right: 34px;
  bottom: 28px;
  border-radius: 999px;
  padding: 10px 18px;
  color: #fff;
  background: var(--mint);
  font-weight: 700;
}

.fake-modal-title {
  margin: 18px 18px 12px;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
}

.fake-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 18px 14px;
}

.fake-tabs span,
.fake-tabs strong,
.fake-token-type,
.fake-check,
.fake-access {
  border-radius: 14px;
  background: rgb(var(--theme-ink-rgb) / 0.06);
}

.fake-tabs span,
.fake-tabs strong {
  height: 34px;
}

.fake-tabs strong,
.fake-token-type.active,
.fake-check.on,
.fake-access {
  background: rgb(var(--theme-mint-rgb) / 0.18);
}

.fake-token-type {
  margin: 10px 18px;
  padding: 13px 14px;
  color: var(--text);
  font-weight: 700;
}

.fake-token-type.muted {
  color: var(--theme-mint-text);
}

.fake-token-type.danger {
  color: var(--red);
  background: rgb(var(--theme-red-soft-rgb) / 0.26);
}

.wb-token-screenshot {
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  background: var(--paper);
}

.wb-token-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 38px rgb(var(--theme-ink-rgb) / 0.1);
}

.wb-token-screenshot .shot-arrow {
  right: auto;
  bottom: auto;
  width: 80px;
  height: 5px;
  transform: rotate(180deg);
}

.shot-arrow-manual {
  top: 10.5%;
  left: 78%;
}

.shot-arrow-basic {
  top: 19.6%;
  left: 24%;
}

.shot-arrow-name {
  top: 42.2%;
  left: 80%;
}

.shot-arrow-categories {
  top: 60.5%;
  left: 75%;
}

.shot-arrow-access {
  top: 81%;
  left: 49%;
}

.wb-token-shot.detailed {
  min-height: 500px;
  padding: 18px;
  background:
    radial-gradient(circle at 86% 10%, rgb(var(--theme-mint-rgb) / 0.18), transparent 30%),
    linear-gradient(135deg, var(--paper), rgb(var(--theme-page-rgb) / 0.74));
}

.wb-token-shot.detailed .fake-modal-title {
  margin: 0 0 18px;
  font-size: 28px;
}

.fake-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(var(--theme-ink-rgb) / 0.06);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.fake-tabs.labeled {
  position: relative;
  margin: 0 0 18px;
}

.fake-tabs.labeled span,
.fake-tabs.labeled strong {
  height: auto;
  display: grid;
  min-height: 42px;
  place-items: center;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}

.fake-tabs.labeled strong {
  color: var(--text);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}

.fake-token-types {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.fake-token-types .fake-token-type {
  margin: 0;
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--paper);
  color: var(--muted);
}

.fake-token-types .fake-token-type.active {
  position: relative;
  background: rgb(var(--theme-ink-rgb) / 0.06);
  color: var(--text);
}

.fake-token-types .fake-token-type.active b {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #8a48f5;
}

.fake-token-types .fake-token-type small {
  color: var(--muted);
  font-size: 12px;
}

.fake-token-types .fake-token-type.danger {
  color: #a33434;
  background: rgb(var(--theme-red-soft-rgb) / 0.2);
}

.fake-token-name {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 12px 0 14px;
}

.fake-token-name span,
.fake-token-categories::before,
.fake-token-access::before {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.fake-token-name strong {
  min-height: 42px;
  display: grid;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--text);
  background: var(--paper);
  font-size: 15px;
}

.fake-token-categories {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 12px 0 14px;
  padding-top: 26px;
}

.fake-token-categories::before {
  content: "К каким категориям будет доступ";
  position: absolute;
  top: 0;
  left: 0;
}

.fake-token-categories .fake-check {
  margin: 0;
  border: 0;
  padding: 9px 10px 9px 34px;
  background: transparent;
  font-size: 12px;
}

.fake-token-categories .fake-check::before {
  left: 8px;
  width: 13px;
  height: 13px;
  border-color: #8a48f5;
  background: #8a48f5;
}

.fake-token-access {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 28px;
}

.fake-token-access::before {
  content: "Уровень доступа к данным";
  position: absolute;
  top: 0;
  left: 0;
}

.fake-token-access .fake-access {
  margin: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  border: 1px solid rgb(138 72 245 / 0.28);
  color: var(--text);
  background: rgb(138 72 245 / 0.12);
}

.fake-token-access .fake-access.muted {
  color: var(--muted);
  background: var(--paper);
}

.red-arrow {
  position: absolute;
  z-index: 4;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: #e33232;
  box-shadow: 0 5px 14px rgb(227 50 50 / 0.28);
  pointer-events: none;
}

.red-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #e33232;
  transform: translateY(-50%);
}

.red-arrow.arrow-manual {
  right: 20px;
  top: 20px;
  transform: rotate(180deg);
}

.red-arrow.arrow-basic {
  right: 12px;
  top: 36px;
  transform: rotate(180deg);
}

.red-arrow.arrow-name {
  right: 12px;
  top: 42px;
  transform: rotate(180deg);
}

.red-arrow.arrow-categories {
  right: 10px;
  top: 76px;
  transform: rotate(180deg);
}

.red-arrow.arrow-access {
  right: 50%;
  bottom: 20px;
  transform: translateX(50%) rotate(180deg);
}

.fake-check {
  position: relative;
  margin: 14px 18px;
  padding: 12px 14px 12px 44px;
  color: var(--text);
  font-weight: 700;
}

.fake-check::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 15px;
  height: 15px;
  border: 2px solid rgb(var(--theme-ink-rgb) / 0.24);
  border-radius: 5px;
  transform: translateY(-50%);
}

.fake-check.on::before {
  border-color: var(--theme-mint-text);
  background: var(--theme-mint-text);
  box-shadow: inset 0 0 0 3px rgb(var(--theme-white-rgb));
}

.fake-access {
  margin: 18px;
  padding: 12px 14px;
  color: var(--theme-mint-text);
  font-weight: 800;
}

.wb-safe-shot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.safe-lock-icon {
  width: 64px;
  height: 64px;
  overflow: visible;
  fill: none;
  stroke: var(--theme-mint-text);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safe-lock-icon rect {
  fill: rgb(var(--theme-mint-rgb) / 0.16);
}

.wb-security-note {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.34);
  border-radius: 20px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 94% 14%, rgb(var(--theme-mint-rgb) / 0.18), transparent 34%),
    linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.11), rgb(var(--theme-white-rgb) / 0.84));
}

.wb-security-note .safe-lock-icon {
  width: 52px;
  height: 52px;
}

.wb-security-note p {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

.wb-safe-shot strong {
  color: var(--text);
  font-size: 21px;
}

.wb-safe-shot span {
  color: var(--muted);
  font-size: 15px;
}

.wb-safe-shot em {
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.14);
  font-style: normal;
  font-weight: 700;
}

.account-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.account-shortcut {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon meta";
  align-items: center;
  column-gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: var(--paper);
  color: var(--text);
  text-decoration: none;
}

.account-shortcut:hover {
  border-color: rgb(var(--theme-mint-rgb) / 0.5);
  box-shadow: 0 16px 34px rgb(var(--theme-mint-shadow-rgb) / 0.14);
}

.account-shortcut strong {
  grid-area: title;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-shortcut small {
  grid-area: meta;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-shortcut-icon {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
}

.account-shortcut-icon::before {
  content: "";
  width: 19px;
  height: 19px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.wallet-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a4 4 0 0 1-4-4V6a3 3 0 0 1 3-3h12v4'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M21 11h-5a3 3 0 0 0 0 6h5'/%3E%3C/svg%3E");
}

.edit-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}

.tariff-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5h8a4 4 0 0 1 0 8H7V5z'/%3E%3Cpath d='M7 13h10'/%3E%3Cpath d='M7 19V5'/%3E%3Cpath d='M4 16h9'/%3E%3C/svg%3E");
}

.payments-icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E");
}

.table-row.dark {
  border-color: rgb(var(--theme-white-rgb) / 0.12);
  background: rgb(var(--theme-white-rgb) / 0.08);
}

.table-row.dark strong {
  color: var(--theme-paper);
}

.admin-users-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

[data-search-row][hidden],
[data-user-picker-option][hidden] {
  display: none !important;
}

.admin-users-tools {
  margin-top: 18px;
}

.admin-users-search {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 18px;
  background: rgb(var(--theme-ink-rgb) / 0.025);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.admin-users-search:focus {
  border-color: rgb(var(--theme-mint-rgb) / 0.75);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.14);
}

.history-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.payment-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.payment-search-field {
  flex: 1 1 260px;
}

.payment-select-field {
  flex: 0 1 210px;
}

.payment-date-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  flex: 0 1 330px;
  gap: 12px;
}

.payment-filter-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.payment-search-field,
.payment-select-field,
.apple-date-field {
  display: grid;
  gap: 6px;
}

.payment-search-field > span,
.payment-select-field > span,
.apple-date-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.payment-search-field input,
.payment-select-field select,
.apple-date-field input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 13px;
  color: var(--text);
  background: rgb(var(--theme-white-rgb) / 0.9);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  outline: none;
}

.payment-select-field select {
  appearance: none;
  padding-right: 34px;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 18px) 18px / 6px 6px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 13px) 18px / 6px 6px no-repeat,
    rgb(var(--theme-white-rgb) / 0.9);
}

.payment-search-field input:focus,
.payment-select-field select:focus,
.apple-date-field input:focus {
  border-color: rgb(var(--theme-mint-rgb) / 0.7);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.14);
}

.apple-date-field input {
  color-scheme: light;
  padding-right: 8px;
}

.apple-date-field input::-webkit-calendar-picker-indicator {
  opacity: 0.42;
  cursor: pointer;
}

.history-search-form .secondary-button,
.payment-filter-form .secondary-button,
.history-pagination .secondary-button {
  min-height: 46px;
  border-radius: 14px;
  letter-spacing: 0.2px;
  text-transform: none;
}

.history-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.history-pagination span:not(.secondary-button) {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.history-pagination .disabled {
  cursor: default;
  opacity: 0.45;
}

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(420px, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-white-rgb) / 0.78);
}

.admin-user-main {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--text);
}

.admin-user-main strong,
.admin-user-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-main span,
.admin-user-metrics span {
  color: var(--muted);
  font-size: 13px;
}

.admin-user-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.admin-user-metrics div {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 11px;
  background: rgb(var(--theme-ink-rgb) / 0.035);
}

.admin-user-store-card {
  grid-column: span 2;
}

.admin-user-metrics small {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-user-actions,
.ticket-admin-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.admin-user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.active-ban-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.active-ban-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgb(var(--theme-red-rgb) / 0.18);
  border-left: 5px solid rgb(var(--theme-red-rgb) / 0.62);
  border-radius: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgb(var(--theme-red-soft-rgb) / 0.16), rgb(var(--theme-white-rgb) / 0.88));
}

.active-ban-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.active-ban-target {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.active-ban-type,
.active-ban-status {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.active-ban-type {
  color: var(--red);
  background: rgb(var(--theme-red-soft-rgb) / 0.42);
}

.active-ban-value {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 1.2;
}

.active-ban-reason {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.active-ban-status {
  justify-self: end;
  color: var(--red);
  background: rgb(var(--theme-red-soft-rgb) / 0.34);
}

.ban-actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: start;
  gap: 12px;
  margin-top: 16px;
}

.ban-actions-row .primary-button,
.ban-actions-row .secondary-button {
  min-height: 54px;
  letter-spacing: 0;
}

.audit-list .table-row {
  align-items: flex-start;
}

.admin-wb-account-row {
  align-items: flex-start;
}

.admin-wb-account-row > div {
  min-width: 0;
}

.admin-wb-account-row form {
  flex: 0 0 auto;
  margin: 0;
}

.admin-wb-account-row .secondary-button {
  min-height: 36px;
  border-radius: 12px;
  padding-inline: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.balance-adjust-form {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-ink-rgb) / 0.025);
}

.ban-admin-grid {
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.9fr);
}

.ban-target-fields {
  grid-template-columns: minmax(150px, 0.8fr) minmax(260px, 1.2fr);
}

.ban-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.ban-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-white-rgb) / 0.78);
}

.ban-row.active {
  border-color: rgb(var(--theme-mint-rgb) / 0.45);
}

.ban-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ban-main strong,
.ban-main small {
  overflow-wrap: anywhere;
}

.ban-reason-box {
  width: min(100%, 390px);
  display: grid;
  gap: 8px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.35);
  border-radius: 18px;
  padding: 18px;
  background: rgb(var(--theme-mint-rgb) / 0.12);
}

.ban-reason-box span {
  color: var(--muted);
  font-size: 14px;
}

.ban-reason-box strong {
  overflow-wrap: anywhere;
}

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

.plan-card {
  display: grid;
  gap: 10px;
  background: var(--theme-paper);
}

.plan-card .secondary-button {
  margin-top: 8px;
}

.plan-price {
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
}

.billing-tariff-panel .panel-head {
  align-items: flex-start;
}

.billing-balance-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  color: #fff;
  background: rgb(var(--theme-mint-rgb));
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px rgb(var(--theme-mint-shadow-rgb) / 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.billing-balance-button:hover,
.billing-balance-button:focus-visible {
  color: #fff;
  background: rgb(86 206 137);
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgb(var(--theme-mint-shadow-rgb) / 0.34);
}

.billing-tariff-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: var(--theme-paper);
  box-shadow: 0 14px 34px rgb(var(--theme-shadow-soft-rgb) / 0.07);
}

.billing-tariff-stack {
  display: grid;
  gap: 14px;
}

.billing-tariff-sale {
  gap: 18px;
}

.billing-tariff-title {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.billing-tariff-title > div {
  min-width: 0;
}

.billing-tariff-title h3,
.billing-tariff-title p {
  margin: 0;
}

.billing-tariff-title h3 {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.18;
}

.billing-tariff-title p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.billing-tariff-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.14);
}

.billing-tariff-icon.edit {
  color: #16678a;
  background: rgb(117 201 246 / 0.16);
}

.billing-tariff-icon.stock {
  color: #9a5b08;
  background: rgb(255 179 90 / 0.17);
}

.billing-tariff-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.billing-sale-open-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--theme-mint);
  border-radius: 999px;
  padding: 0 22px;
  color: var(--theme-paper);
  background: var(--theme-mint);
  box-shadow: 0 12px 28px rgb(var(--theme-mint-shadow-rgb) / 0.28);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.billing-sale-open-row {
  display: flex;
  justify-content: flex-start;
}

.billing-sale-open-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.billing-sale-open-button:hover,
.billing-sale-open-button:focus-visible {
  background: var(--theme-mint-hover);
  border-color: var(--theme-mint-hover);
}

.billing-period-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.billing-period-tabs button {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 14px;
  color: var(--ink);
  background: rgb(255 255 255 / 0.74);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgb(var(--theme-shadow-soft-rgb) / 0.045);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.billing-period-tabs button.is-active {
  border-color: rgb(var(--theme-mint-rgb) / 0.42);
  background: rgb(var(--theme-mint-rgb) / 0.12);
  box-shadow: inset 0 0 0 1px rgb(var(--theme-mint-rgb) / 0.08), 0 12px 28px rgb(var(--theme-mint-shadow-rgb) / 0.1);
}

.billing-period-tabs span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.14);
  font-size: 12px;
  font-weight: 800;
}

.billing-sale-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 16px;
  align-items: stretch;
}

.billing-sale-controls {
  min-width: 0;
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 14px 32px rgb(var(--theme-shadow-soft-rgb) / 0.055);
}

.billing-sale-controls label {
  display: grid;
  gap: 8px;
}

.billing-sale-controls label span,
.billing-sale-range-head span,
.billing-sale-range-labels,
.billing-flat-caption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.billing-sale-controls input[type="number"] {
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 18px;
  background: var(--theme-paper);
  color: var(--ink);
  font: inherit;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 850;
  letter-spacing: 0;
  outline: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.72), 0 10px 24px rgb(var(--theme-shadow-soft-rgb) / 0.045);
}

.billing-sale-controls input[type="number"]:focus {
  border-color: rgb(var(--theme-mint-rgb) / 0.48);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.12);
}

.billing-sale-range-row {
  display: grid;
  gap: 12px;
}

.billing-sale-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.billing-sale-range-head button {
  min-height: 38px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.08);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.billing-sale-controls input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgb(var(--theme-mint-rgb) / 0.82), rgb(117 201 246 / 0.72), rgb(255 179 90 / 0.66)) left / var(--range-progress, 69%) 100% no-repeat,
    rgb(var(--theme-ink-rgb) / 0.08);
  outline: 0;
}

.billing-sale-controls input[type="range"]::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  appearance: none;
  border: 7px solid #fff;
  border-radius: 999px;
  background: rgb(var(--theme-mint-rgb));
  box-shadow: 0 10px 26px rgb(var(--theme-shadow-soft-rgb) / 0.22);
}

.billing-sale-controls input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 7px solid #fff;
  border-radius: 999px;
  background: rgb(var(--theme-mint-rgb));
  box-shadow: 0 10px 26px rgb(var(--theme-shadow-soft-rgb) / 0.22);
}

.billing-sale-range-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  letter-spacing: 0;
  text-transform: none;
}

.billing-sale-range-labels span:nth-child(2) {
  text-align: center;
}

.billing-sale-range-labels span:nth-child(3) {
  text-align: right;
}

.billing-sale-result {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 14px 32px rgb(var(--theme-shadow-soft-rgb) / 0.055);
}

.billing-sale-result > span {
  color: var(--theme-mint-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.billing-sale-result strong {
  color: var(--ink);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

.billing-sale-result small {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.billing-sale-result small b {
  color: var(--ink);
}

.billing-sale-result em:not([hidden]) {
  width: fit-content;
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 10px;
  color: #8a4f09;
  background: rgb(255 179 90 / 0.16);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.billing-tariff-note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.18);
  border-radius: 16px;
  padding: 13px 15px;
  color: #516171;
  background: rgb(var(--theme-mint-rgb) / 0.055);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 12px 28px rgb(var(--theme-shadow-soft-rgb) / 0.04);
}

.billing-tariff-note-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgb(var(--theme-mint-rgb) / 0.16);
  color: #167346;
}

.billing-tariff-note-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.billing-tariff-note > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.billing-secondary-tariffs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.billing-flat-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ink);
}

.billing-flat-price strong {
  font-size: 32px;
  line-height: 1;
}

.billing-flat-price span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.billing-flat-caption {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.promo-admin-grid {
  grid-template-columns: minmax(420px, 0.95fr) minmax(360px, 1.05fr);
}

.promo-form .form-grid.inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promo-form [hidden] {
  display: none !important;
}

.promo-form-message {
  border: 1px solid rgb(var(--theme-red-rgb) / 0.28);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--theme-red);
  background: rgb(var(--theme-red-rgb) / 0.07);
  font-size: 14px;
  font-weight: 800;
}

.promo-help-grid,
.promo-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

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

.promo-choice-grid.compact {
  gap: 10px;
}

.promo-help-grid div,
.promo-choice-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgb(var(--theme-white-rgb) / 0.78);
}

.promo-choice-card {
  position: relative;
  cursor: pointer;
  min-width: 0;
  padding-right: 50px;
}

.promo-choice-card input {
  position: absolute;
  width: 1px;
  min-height: 0;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.promo-choice-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 14px;
  height: 14px;
  border: 2px solid rgb(var(--theme-ink-rgb) / 0.3);
  border-radius: 999px;
  background: var(--paper);
  transform: translateY(-50%);
  box-shadow: 0 0 0 5px rgb(var(--theme-ink-rgb) / 0.03);
}

.promo-choice-card:has(input:checked)::after {
  border-color: var(--theme-mint-dark);
  background: var(--theme-mint);
  box-shadow: 0 0 0 5px rgb(var(--theme-mint-rgb) / 0.16);
}

.promo-choice-card:has(input:checked) {
  border-color: rgb(var(--theme-mint-rgb) / 0.45);
  background: rgb(var(--theme-mint-rgb) / 0.1);
  box-shadow: inset 0 0 0 1px rgb(var(--theme-mint-rgb) / 0.18);
}

.promo-choice-card > span {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: inherit;
  letter-spacing: 0;
}

.promo-help-grid strong,
.promo-choice-card strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.promo-help-grid span,
.promo-choice-card small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.promo-rule-box {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-ink-rgb) / 0.025);
}

.promo-rule-box h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.promo-user-picker {
  position: relative;
  display: grid;
  gap: 10px;
}

.promo-user-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.promo-user-picker-head strong,
.promo-user-picker-head small {
  display: block;
}

.promo-user-picker-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.promo-user-picker .secondary-button.has-selection {
  border-color: rgb(var(--theme-mint-rgb) / 0.5);
  background: rgb(var(--theme-mint-rgb) / 0.14);
  color: var(--theme-mint-text);
}

.promo-user-dropdown {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(var(--theme-ink-rgb) / 0.32);
}

.promo-user-dropdown[hidden] {
  display: none;
}

.promo-user-modal {
  display: grid;
  gap: 12px;
  width: min(920px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  background: var(--paper);
  box-shadow: 0 32px 80px rgb(var(--theme-ink-rgb) / 0.22);
  overflow: hidden;
}

.promo-user-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.promo-user-modal-head strong,
.promo-user-modal-head small {
  display: block;
}

.promo-user-modal-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.promo-send-all {
  border-color: rgb(var(--theme-mint-rgb) / 0.34);
  background: rgb(var(--theme-mint-rgb) / 0.075);
}

.promo-send-all strong {
  font-size: 16px;
}

.promo-user-search {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  background: rgb(var(--theme-ink-rgb) / 0.025);
  color: var(--text);
  font: inherit;
}

.promo-user-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promo-user-list {
  display: grid;
  gap: 6px;
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}

.promo-user-option {
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.promo-user-option:hover,
.promo-user-option:has(input:checked) {
  border-color: rgb(var(--theme-mint-rgb) / 0.28);
  background: rgb(var(--theme-mint-rgb) / 0.1);
}

.promo-user-option input {
  accent-color: var(--theme-mint);
}

.promo-user-option input:disabled + span {
  opacity: 0.52;
}

.promo-user-option strong,
.promo-user-option small {
  display: block;
}

.promo-user-option small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.promo-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.promo-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(460px, 1.5fr) minmax(150px, auto);
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-white-rgb) / 0.78);
}

.promo-code-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.promo-code-main strong {
  color: var(--text);
  font-size: 19px;
  letter-spacing: 0.8px;
}

.promo-code-main span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.promo-row-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.promo-row-side small {
  color: var(--muted);
}

.promo-date-range {
  position: relative;
  display: grid;
  gap: 8px;
}

.form-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promo-date-trigger {
  width: 100%;
}

.sale-report-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 16px;
  color: var(--text);
  background: rgb(var(--theme-white-rgb) / 0.82);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.sale-report-date-trigger svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sale-report-date-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 20;
  display: grid;
  gap: 12px;
  width: min(420px, calc(100vw - 40px));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  background: var(--paper);
  box-shadow: 0 24px 58px rgb(var(--theme-ink-rgb) / 0.16);
}

.sale-report-date-popover[hidden] {
  display: none;
}

.sale-report-date-popover-head,
.sale-report-calendar-head,
.sale-report-date-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sale-report-date-popover-head strong,
.sale-report-calendar-head strong {
  color: var(--text);
}

.sale-report-date-popover-head button,
.sale-report-calendar-head button,
.sale-report-date-actions button {
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  color: var(--text);
  background: rgb(var(--theme-white-rgb) / 0.8);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.sale-report-date-range-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sale-report-date-range-text span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--soft);
}

.sale-report-date-range-text b {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.sale-report-date-range-text em {
  color: var(--text);
  font-style: normal;
  font-weight: 850;
}

.sale-report-calendar-weekdays,
.sale-report-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.sale-report-calendar-weekdays span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.sale-report-calendar-day,
.sale-report-calendar-spacer {
  min-height: 38px;
  border-radius: 12px;
}

.sale-report-calendar-day {
  border: 1px solid transparent;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.sale-report-calendar-day.in-range {
  background: rgb(var(--theme-mint-rgb) / 0.12);
}

.sale-report-calendar-day.is-selected,
.sale-report-calendar-day.is-start,
.sale-report-calendar-day.is-end {
  color: #fff;
  background: var(--theme-mint-text);
}

.field-invalid {
  border-color: rgb(var(--theme-red-rgb) / 0.55) !important;
}

label.field-invalid input,
label.field-invalid textarea,
label.field-invalid select,
.field-invalid .sale-report-date-trigger {
  border-color: rgb(var(--theme-red-rgb) / 0.55);
  box-shadow: 0 0 0 3px rgb(var(--theme-red-rgb) / 0.1);
}

.field-error {
  display: block;
  color: var(--theme-red);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.danger-button {
  border-color: rgb(var(--theme-red-rgb) / 0.25);
  color: var(--theme-red);
}

.danger-button:hover {
  border-color: rgb(var(--theme-red-rgb) / 0.45);
  background: rgb(var(--theme-red-rgb) / 0.08);
}

.promocode-apply-form {
  margin-top: 14px;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.55fr);
  align-items: end;
  gap: 22px;
}

.promocode-apply-form .primary-button {
  min-height: 56px;
}

.promocode-apply-message {
  margin-top: 12px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.09);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.promocode-apply-message.is-error {
  border-color: rgb(var(--theme-red-rgb) / 0.32);
  color: var(--theme-red);
  background: rgb(var(--theme-red-rgb) / 0.07);
}

.promo-security-note {
  margin-top: 14px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--muted);
  background: rgb(var(--theme-mint-rgb) / 0.07);
  font-size: 15px;
  line-height: 1.4;
}

.promo-client-history {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.promo-client-history h3 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.1;
}

.promo-client-row {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: rgb(var(--theme-white-rgb) / 0.92);
}

.promo-client-main {
  display: grid;
  gap: 8px;
  align-content: start;
}

.promo-client-main strong {
  color: var(--text);
  font-size: 20px;
  letter-spacing: 0.8px;
}

.promo-client-main span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}

.promo-client-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.promo-client-meta {
  display: grid;
  gap: 10px;
}

.promo-client-meta div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  background: var(--soft);
}

.promo-client-meta span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.promo-client-meta strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 15px;
}

.promo-history-more {
  width: max-content;
  justify-self: end;
  margin-top: 14px;
  padding-inline: 22px;
  white-space: nowrap;
}

.promo-empty-state {
  margin-top: 18px;
}

.violation-list {
  display: grid;
  gap: 14px;
}

.violation-row {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  background: rgb(var(--theme-white-rgb) / 0.95);
}

.violation-row.is-unread {
  border-color: rgb(var(--theme-mint-rgb) / 0.45);
  box-shadow: 0 18px 40px rgb(var(--theme-mint-rgb) / 0.14);
}

.violation-main {
  display: grid;
  gap: 6px;
}

.violation-main strong {
  color: var(--text);
  font-size: 22px;
}

.violation-main span,
.violation-main small {
  color: var(--muted);
}

.violation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.store-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(var(--theme-ink-rgb) / 0.38);
  backdrop-filter: blur(8px);
}

.store-success-overlay[hidden] {
  display: none;
}

.store-success-modal {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.38);
  border-radius: 22px;
  padding: 24px;
  background:
    radial-gradient(circle at 88% 0%, rgb(var(--theme-mint-rgb) / 0.2), transparent 34%),
    var(--paper);
  box-shadow: 0 30px 80px rgb(var(--theme-ink-rgb) / 0.24);
  text-align: center;
}

.store-success-modal-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 999px;
  background: var(--mint);
  color: var(--theme-paper);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.store-success-overlay.is-error .store-success-modal {
  border-color: rgb(var(--theme-red-rgb) / 0.26);
  background:
    radial-gradient(circle at 88% 0%, rgb(var(--theme-red-soft-rgb) / 0.28), transparent 34%),
    var(--paper);
}

.store-success-overlay.is-danger .store-success-modal {
  border-color: rgb(var(--theme-red-rgb) / 0.26);
  background:
    radial-gradient(circle at 88% 0%, rgb(var(--theme-red-soft-rgb) / 0.22), transparent 34%),
    var(--paper);
}

.store-success-overlay.is-error .store-success-modal-icon,
.store-success-overlay.is-error .store-success-modal button {
  background: var(--theme-red);
}

.store-success-overlay.is-danger .store-success-modal-icon,
.store-success-overlay.is-danger .store-modal-danger {
  background: var(--theme-red);
}

.store-success-modal h3 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
}

.store-success-modal p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.store-success-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.store-success-modal button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: var(--mint);
  color: var(--theme-paper);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.store-success-modal button[hidden] {
  display: none;
}

.store-success-modal .store-modal-secondary {
  border: 1px solid var(--line);
  background: rgb(var(--theme-ink-rgb) / 0.05);
  color: var(--text);
  box-shadow: none;
}

.store-success-modal .store-modal-danger {
  color: var(--theme-paper);
}

.store-modal-details[hidden],
.store-success-modal-details[hidden] {
  display: none;
}

.store-success-overlay.has-details .store-success-modal {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  gap: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.store-success-overlay.has-details .store-success-modal-icon {
  display: none;
}

.store-success-overlay.has-details .store-success-modal h3 {
  padding: 26px 28px 6px;
  font-size: 28px;
}

.store-success-overlay.has-details .store-success-modal p[data-store-modal-message] {
  max-width: 760px;
  padding: 0 28px 20px;
}

.store-success-overlay.has-details .store-modal-details,
.store-success-overlay.has-details .store-success-modal-details {
  border-top: 1px solid var(--line);
  background: rgb(var(--theme-ink-rgb) / 0.015);
}

.store-success-modal-details .store-duplicate-name {
  display: grid;
  gap: 6px;
  padding: 20px 28px 22px;
  color: var(--text);
}

.store-success-modal-details .store-duplicate-name span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.store-success-modal-details .store-duplicate-name strong {
  color: var(--text);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}

.store-success-overlay.has-details .store-success-modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding: 16px 22px;
  background: rgb(var(--theme-white-rgb) / 0.92);
}

.store-success-overlay.has-details .store-success-modal button {
  min-width: 132px;
}

.sale-launch-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 22px;
}

.sale-launch-summary span {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgb(var(--theme-white-rgb) / 0.76);
}

.sale-launch-summary em,
.sale-launch-summary b {
  display: block;
}

.sale-launch-summary em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sale-launch-summary b {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
}

.sale-launch-table-wrap {
  max-height: min(430px, 44dvh);
  overflow: auto;
  padding: 0 22px 14px;
}

.sale-launch-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.sale-launch-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px 6px;
  color: var(--muted);
  background: rgb(var(--theme-white-rgb) / 0.96);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.sale-launch-table td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  color: var(--text);
  background: rgb(var(--theme-white-rgb) / 0.82);
  font-size: 14px;
  font-weight: 800;
  vertical-align: top;
}

.sale-launch-table td:first-child {
  border-left: 1px solid var(--line);
  border-radius: 12px 0 0 12px;
}

.sale-launch-table td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 12px 12px 0;
}

.sale-launch-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.sale-launch-empty {
  border-radius: 12px !important;
  text-align: center;
}

.sale-launch-note {
  margin: 0;
  padding: 0 22px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .sale-launch-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .store-success-overlay {
    align-items: start;
    overflow-y: auto;
    padding: 10px;
  }

  .store-success-overlay:not(.has-details) {
    place-items: center;
    min-height: 100dvh;
    padding: 16px;
  }

  .store-success-overlay:not(.has-details) .store-success-modal {
    width: min(360px, 100%);
  }

  .store-success-overlay.has-details .store-success-modal {
    width: 100%;
    max-height: none;
    min-height: calc(100dvh - 20px);
  }

  .store-success-overlay.has-details .store-success-modal h3 {
    padding: 20px 18px 6px;
    font-size: 22px;
  }

  .store-success-overlay.has-details .store-success-modal p[data-store-modal-message] {
    padding: 0 18px 16px;
    font-size: 14px;
  }

  .sale-launch-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
  }

  .sale-launch-summary span {
    border-radius: 12px;
    padding: 9px 10px;
  }

  .sale-launch-summary b {
    font-size: 16px;
  }

  .sale-launch-table-wrap {
    max-height: none;
    overflow: visible;
    padding: 0 14px 12px;
  }

  .sale-launch-table {
    min-width: 0;
    border-spacing: 0;
  }

  .sale-launch-table thead {
    display: none;
  }

  .sale-launch-table,
  .sale-launch-table tbody,
  .sale-launch-table tr,
  .sale-launch-table td {
    display: block;
    width: 100%;
  }

  .sale-launch-table tbody {
    display: grid;
    gap: 10px;
  }

  .sale-launch-table tr {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: rgb(var(--theme-white-rgb) / 0.84);
  }

  .sale-launch-table td {
    display: grid;
    grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
    gap: 8px;
    border: 0;
    border-radius: 0 !important;
    padding: 6px 0;
    background: transparent;
    font-size: 14px;
  }

  .sale-launch-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .sale-launch-table td small {
    font-size: 11px;
  }

  .sale-launch-note {
    padding: 0 14px 8px;
    font-size: 12px;
  }

  .store-success-overlay.has-details .store-success-modal-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
  }

  .store-success-overlay.has-details .store-success-modal button {
    width: 100%;
    min-width: 0;
  }
}

.app-page .alert {
  border-color: var(--line);
  background: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.notification-prompt {
  position: relative;
  z-index: 15;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.4);
  border-radius: 14px;
  padding: 12px;
  background: rgb(var(--theme-white-rgb) / 0.96);
  box-shadow: var(--shadow-soft);
}

.notification-prompt[hidden] {
  display: none;
}

.notification-prompt strong,
.notification-prompt span {
  display: block;
}

.notification-prompt span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.notification-prompt .primary-button {
  min-height: 40px;
  border-radius: 12px;
  padding-inline: 14px;
  font-size: 12px;
}

.notification-prompt-close {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgb(var(--theme-ink-rgb) / 0.04);
  cursor: pointer;
}

.notification-prompt-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.toggle-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--paper);
}

.toggle-row input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--mint);
}

.toggle-row strong,
.toggle-row small {
  display: block;
}

.toggle-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.instruction-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: rgb(var(--theme-ink-rgb) / 0.04);
}

.instruction-card + .secondary-button {
  margin-top: 16px;
}

.instruction-card + .instruction-card {
  margin-top: 12px;
}

.notification-hero {
  overflow: visible;
}

.notification-control-hero {
  position: relative;
}

.notification-hero-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.notification-hero-copy {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.notification-hero-copy .eyebrow,
.notification-hero-copy h1,
.notification-hero-copy p {
  margin: 0;
}

.notification-hero-icon {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
  border-radius: 20px;
  color: var(--ink);
  background:
    radial-gradient(circle at 70% 22%, rgb(var(--theme-mint-rgb) / 0.34), transparent 28%),
    rgb(var(--theme-white-rgb) / 0.78);
  box-shadow: 0 18px 42px rgb(var(--theme-mint-shadow-rgb) / 0.18);
}

.notification-hero-icon svg,
.notification-device-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-control-hero .notification-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 254px;
  align-items: center;
  gap: 16px 30px;
}

.notification-control-hero .notification-hero-copy {
  grid-row: 1 / span 2;
  max-width: none;
}

.notification-control-hero .notification-hero-icon {
  width: 56px;
  height: 56px;
  justify-self: center;
  margin-left: 0;
}

.notification-control-hero .notification-hero-form {
  grid-column: 2;
  width: 100%;
  justify-self: stretch;
}

.notification-hero-form {
  min-width: 238px;
  display: grid;
  justify-items: start;
  gap: 11px;
}

.notification-browser-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.notification-master-action {
  min-width: 190px;
}

.notification-control-hero .notification-master-action {
  width: 100%;
  min-width: 0;
}

.notification-hero-form.is-disabled .notification-master-action {
  opacity: 0.68;
  cursor: not-allowed;
}

.notification-ios-help {
  max-width: min(360px, 100%);
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 5px;
  text-align: left;
}

.notification-ios-help[hidden] {
  display: none;
}

.notification-ios-help span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.notification-ios-help a {
  color: var(--theme-mint-text);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.notification-device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.notification-device-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-white-rgb) / 0.82);
}

.notification-device-card.is-supported {
  border-color: rgb(var(--theme-mint-rgb) / 0.45);
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.13), rgb(var(--theme-white-rgb) / 0.9));
}

.notification-device-card.is-ios {
  border-color: rgb(var(--theme-red-rgb) / 0.22);
  background: linear-gradient(135deg, rgb(var(--theme-red-soft-rgb) / 0.22), rgb(var(--theme-white-rgb) / 0.92));
}

.notification-device-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: var(--ink);
  background: rgb(var(--theme-ink-rgb) / 0.06);
}

.notification-device-icon.ok {
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
}

.notification-device-card span,
.notification-device-card strong,
.notification-device-card small {
  display: block;
}

.notification-device-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.notification-device-card strong {
  margin-top: 3px;
  font-size: 20px;
  color: var(--text);
}

.notification-device-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.notification-layout {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

.notification-layout.is-non-ios-device {
  grid-template-columns: minmax(0, 1fr);
}

.notification-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.notification-settings-tabs {
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: rgb(var(--theme-white-rgb) / 0.96);
  box-shadow: var(--shadow-soft);
}

.notification-filter-tab {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px;
  color: var(--theme-ink-muted);
  background: var(--paper);
  font-size: 15px;
  font-weight: 700;
}

.notification-filter-tab.active {
  border-color: rgb(var(--theme-mint-rgb) / 0.72);
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.14);
}

.notification-filter-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}

.notification-filter-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-filter-tab strong {
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 8px;
  color: var(--theme-ink-muted);
  background: rgb(var(--theme-ink-rgb) / 0.06);
  font-size: 13px;
  font-weight: 800;
}

.notification-filter-tab.active strong {
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.2);
}

.notification-quick-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.notification-quick-panel strong,
.notification-quick-panel p,
.notification-quick-kicker {
  display: block;
}

.notification-quick-kicker {
  width: fit-content;
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.16);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notification-quick-panel strong {
  margin-top: 12px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.15;
}

.notification-quick-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.notification-quick-actions,
.notification-switch-actions,
.notification-guide-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.notification-switch-actions {
  min-width: min(220px, 100%);
  flex-direction: column;
}

.notification-quick-actions .primary-button,
.notification-quick-actions .secondary-button,
.notification-switch-actions .primary-button,
.notification-switch-actions .secondary-button,
.notification-guide-actions .primary-button,
.notification-guide-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.notification-switch-actions .primary-button,
.notification-switch-actions .secondary-button {
  width: 100%;
  white-space: normal;
  text-align: center;
}

.notification-settings-panel,
.notification-instruction-panel,
.notification-feed-panel {
  overflow: hidden;
}

.notification-switch-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.35);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.12), rgb(var(--theme-white-rgb) / 0.95));
}

.notification-switch-card.is-disabled {
  border-color: var(--line);
  background: var(--paper-soft);
}

.notification-switch-card.is-disabled button {
  opacity: 0.7;
  cursor: not-allowed;
}

.notification-master-toggle {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.notification-master-toggle input,
.notification-category-card input {
  width: 20px;
  min-height: 20px;
  accent-color: var(--mint);
}

.notification-master-toggle strong,
.notification-master-toggle small {
  display: block;
}

.notification-master-toggle strong {
  color: var(--text);
}

.notification-master-toggle small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.notification-ios-warning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  border: 1px solid rgb(var(--theme-red-rgb) / 0.18);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-red-soft-rgb) / 0.18);
}

.notification-ios-warning[hidden] {
  display: none;
}

.notification-ios-warning strong,
.notification-ios-warning span {
  display: block;
}

.notification-ios-warning strong {
  color: var(--text);
}

.notification-ios-warning span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.notification-ios-warning a {
  justify-self: end;
  border: 1px solid rgb(var(--theme-red-rgb) / 0.22);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--red);
  font-weight: 800;
  background: rgb(var(--theme-white-rgb) / 0.72);
}

.notification-category-grid {
  display: grid;
  gap: 12px;
}

.notification-category-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 24px 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: var(--paper);
}

.notification-category-icon {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
  font-size: 26px;
  font-weight: 800;
}

.notification-category-icon.api {
  color: #2f5fbd;
  background: rgb(88 132 255 / 0.13);
}

.notification-category-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-category-copy strong,
.notification-category-copy small {
  display: block;
}

.notification-category-copy strong {
  font-size: 21px;
  color: var(--text);
}

.notification-category-copy small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.notification-category-state {
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notification-category-state.is-off {
  color: var(--muted);
  background: rgb(var(--theme-ink-rgb) / 0.06);
}

.notification-next-card {
  border: 1px dashed rgb(var(--theme-ink-rgb) / 0.14);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-ink-rgb) / 0.03);
}

.notification-next-card strong,
.notification-next-card span {
  display: block;
}

.notification-next-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.notification-instruction-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 90% 0%, rgb(var(--theme-mint-rgb) / 0.18), transparent 30%),
    var(--paper);
}

.notification-instruction-card[hidden] {
  display: none;
}

.notification-instruction-card span,
.notification-instruction-card strong,
.notification-instruction-card p {
  display: block;
}

.notification-instruction-card span {
  width: fit-content;
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.16);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notification-instruction-card strong {
  margin-top: 16px;
  font-size: 22px;
  color: var(--text);
}

.notification-instruction-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.notification-instruction-panel .link-button {
  margin-top: 14px;
}

.notification-ios-guide {
  display: grid;
}

.notification-back-link {
  width: max-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--theme-mint-text);
  font-size: 15px;
  font-weight: 900;
}

.notification-back-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-ios-guide-card {
  max-width: none;
  width: 100%;
}

.notification-ios-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notification-ios-steps li {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: var(--paper);
}

.notification-ios-steps li > span {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
  font-weight: 900;
}

.notification-ios-steps strong,
.notification-ios-steps p {
  display: block;
}

.notification-ios-steps strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.notification-ios-steps p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.notification-ios-note {
  display: grid;
  gap: 5px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.32);
  border-radius: 18px;
  padding: 16px;
  margin-top: 14px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.12), rgb(var(--theme-white-rgb) / 0.94));
}

.notification-ios-note strong,
.notification-ios-note span {
  display: block;
}

.notification-ios-note strong {
  color: var(--theme-mint-text);
  font-size: 16px;
}

.notification-ios-note span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.notification-guide-actions {
  justify-content: flex-start;
  margin-top: 16px;
}

.notification-feed-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.notification-feed-head h2,
.notification-feed-head p {
  margin: 0;
}

.notification-feed-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.notification-feed-search {
  display: flex;
  gap: 10px;
  justify-self: end;
  width: min(100%, 360px);
}

.notification-feed-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 13px;
  color: var(--text);
  background: var(--paper);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.notification-feed-search input::placeholder {
  color: rgb(var(--theme-ink-rgb) / 0.34);
}

.notification-feed-list {
  display: grid;
  gap: 10px;
}

.notification-feed-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  color: var(--text);
  background: var(--paper);
}

.notification-feed-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  color: inherit;
}

.notification-feed-row.is-unread {
  border-color: rgb(var(--theme-mint-rgb) / 0.48);
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.12), rgb(var(--theme-white-rgb) / 0.94));
}

.notification-feed-icon,
.notification-popover-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: var(--ink);
  background: rgb(var(--theme-ink-rgb) / 0.06);
  font-size: 15px;
  font-weight: 900;
}

.notification-feed-icon.finance,
.notification-popover-icon.finance {
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.2);
}

.notification-feed-icon.support,
.notification-popover-icon.support,
.notification-feed-icon.api,
.notification-popover-icon.api {
  color: #2f5fbd;
  background: rgb(88 132 255 / 0.13);
}

.notification-feed-icon.danger,
.notification-popover-icon.danger {
  color: var(--red);
  background: rgb(var(--theme-red-soft-rgb) / 0.32);
}

.notification-feed-copy,
.notification-feed-copy strong,
.notification-feed-copy small,
.notification-feed-tags {
  display: block;
  min-width: 0;
}

.notification-feed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
}

.notification-feed-tags em {
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: rgb(var(--theme-ink-rgb) / 0.05);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.notification-feed-tags em.new {
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
}

.notification-feed-copy strong {
  overflow-wrap: anywhere;
  font-size: 18px;
  color: var(--text);
}

.notification-feed-copy small {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.notification-feed-row time {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.notification-feed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 66px;
}

.notification-feed-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.42);
  border-radius: 999px;
  color: var(--text);
  background: rgb(var(--theme-mint-rgb) / 0.08);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.notification-detail-page {
  width: 100%;
}

.notification-detail-card {
  display: grid;
  gap: 18px;
}

.notification-detail-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.notification-detail-head .notification-feed-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
}

.notification-detail-head h1 {
  margin: 6px 0 8px;
  color: var(--text);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: 0;
}

.notification-detail-head time {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.notification-detail-body {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: #111111;
  background: rgb(var(--theme-white-rgb) / 0.72);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
}

.notification-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.notification-detail-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.notification-detail-grid span,
.notification-detail-grid strong {
  display: block;
  min-width: 0;
}

.notification-detail-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notification-detail-grid strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 16px;
}

.notification-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.notification-popover {
  position: fixed;
  z-index: 80;
  width: min(380px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgb(var(--theme-white-rgb) / 0.96);
  box-shadow: 0 28px 70px rgb(var(--theme-shadow-deep-rgb) / 0.22);
  backdrop-filter: blur(18px);
}

.notification-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 16px;
  background:
    radial-gradient(circle at 88% 8%, rgb(var(--theme-mint-rgb) / 0.18), transparent 32%),
    var(--paper);
}

.notification-popover-title {
  min-width: 0;
  display: block;
}

.notification-popover-title > span:last-child {
  display: block;
}

.notification-popover-bell,
.notification-popover-live-corner {
  display: none;
}

.notification-popover-heading-line {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.notification-popover-live-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: var(--mint);
}

.notification-popover-live-icon .live-dot {
  width: 12px;
  height: 12px;
  background: currentColor;
  box-shadow: 0 0 0 6px rgb(var(--theme-mint-rgb) / 0.13);
}

.notification-popover-head strong {
  display: block;
  font-size: 21px;
  color: var(--text);
}

.notification-popover-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.notification-popover-head button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  padding: 0;
  color: var(--text);
  background: rgb(var(--theme-ink-rgb) / 0.06);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}

.notification-popover-head button svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-popover-list {
  position: relative;
  max-height: 330px;
  overflow: auto;
  padding: 10px;
}

.notification-popover-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 16px;
  padding: 10px;
  color: var(--text);
}

.notification-popover-row:hover {
  background: rgb(var(--theme-ink-rgb) / 0.04);
}

.notification-popover-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 12px;
}

.notification-popover-copy {
  min-width: 0;
  display: block;
}

.notification-popover-copy span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.notification-popover-copy em,
.notification-popover-new {
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  background: rgb(var(--theme-ink-rgb) / 0.05);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.notification-popover-new {
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
}

.notification-popover-copy strong,
.notification-popover-copy small,
.notification-popover-row time {
  display: block;
}

.notification-popover-copy strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
}

.notification-popover-copy small {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.notification-popover-row time {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.notification-popover-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.notification-popover-empty span {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--mint);
  border-radius: 999px;
  color: var(--theme-mint-text);
  font-size: 22px;
  font-weight: 900;
}

.notification-popover-empty strong {
  color: var(--text);
  font-size: 21px;
}

.notification-popover-empty small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.notification-popover-loading {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.notification-popover-loading span {
  width: 36px;
  height: 36px;
  border: 3px solid rgb(var(--theme-mint-rgb) / 0.18);
  border-top-color: var(--mint);
  border-radius: 50%;
  animation: notification-loading-spin 0.8s linear infinite;
}

.notification-popover-loading strong {
  color: var(--text);
  font-size: 19px;
}

.notification-popover-loading small {
  color: var(--muted);
  font-size: 13px;
}

@keyframes notification-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.notification-popover-all {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--theme-paper);
  background: var(--mint);
  font-size: 16px;
  font-weight: 800;
}

.notification-popover-all svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-toast-stack {
  position: fixed;
  top: 92px;
  right: 18px;
  z-index: 150;
  width: min(390px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.notification-toast {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: start;
  border: 1px solid rgb(var(--theme-white-rgb) / 0.72);
  border-radius: 20px;
  padding: 12px;
  color: var(--text);
  background: rgb(var(--theme-white-rgb) / 0.86);
  box-shadow: 0 18px 55px rgb(var(--theme-shadow-deep-rgb) / 0.22);
  backdrop-filter: blur(18px);
  cursor: pointer;
  pointer-events: auto;
}

.notification-toast:hover {
  transform: translateY(-1px);
}

.notification-toast-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--ink);
  background: rgb(var(--theme-ink-rgb) / 0.06);
  font-size: 13px;
  font-weight: 900;
}

.notification-toast-icon.finance {
  color: var(--theme-mint-text);
  background: rgb(var(--theme-mint-rgb) / 0.18);
}

.notification-toast-icon.support,
.notification-toast-icon.api {
  color: #2f5fbd;
  background: rgb(88 132 255 / 0.13);
}

.notification-toast-icon.danger {
  color: var(--red);
  background: rgb(var(--theme-red-soft-rgb) / 0.32);
}

.notification-toast-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.notification-toast-copy span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.notification-toast-copy strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  line-height: 1.18;
}

.notification-toast-copy small,
.notification-toast-copy time {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.notification-toast-close {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: rgb(var(--theme-ink-rgb) / 0.06);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

@media (min-width: 861px) {
  .notification-popover-head {
    align-items: center;
    padding: 14px 14px 12px;
  }

  .notification-popover-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .notification-popover-bell {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(var(--theme-mint-rgb) / 0.28);
    border-radius: 10px;
    color: var(--ink);
    background: rgb(var(--theme-mint-rgb) / 0.1);
  }

  .notification-popover-bell svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .notification-popover-head strong {
    font-size: 19px;
  }

  .notification-popover-head small {
    font-size: 13px;
  }

  .notification-popover-head button {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 20px;
  }

  .notification-popover-list {
    padding: 10px 14px 10px 10px;
    scrollbar-gutter: stable;
  }

  .notification-popover-all {
    gap: 9px;
  }

  .notification-popover-live-corner {
    position: absolute;
    top: 100px;
    right: 42px;
    z-index: 2;
    width: 12px;
    height: 12px;
    display: inline-grid;
    place-items: center;
    color: var(--mint);
    background: transparent;
    box-shadow: none;
  }

  .notification-popover-live-corner .live-dot {
    width: 10px;
    height: 10px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.13);
  }

  .notification-popover-arrow-icon {
    display: none;
  }
}

.support-layout {
  grid-template-columns: minmax(360px, 0.9fr) minmax(320px, 1.1fr);
}

.support-layout.single {
  grid-template-columns: minmax(0, 1fr);
}

.breadcrumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.breadcrumbs a {
  color: var(--ink);
}

.breadcrumbs a:hover {
  color: var(--mint-deep);
}

.back-button {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px 0 11px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.back-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ticket-nav-panel {
  padding-bottom: clamp(18px, 3vw, 28px);
}

.support-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-metric-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-ticket-list {
  display: grid;
  gap: 12px;
}

.support-ticket-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgb(var(--theme-white-rgb) / 0.72);
  color: var(--text);
}

.support-ticket-row:hover {
  border-color: rgb(var(--theme-mint-rgb) / 0.5);
  transform: translateY(-1px);
}

.ticket-row-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  color: var(--mint);
}

.ticket-row-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ticket-row-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

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

.ticket-row-main small {
  color: var(--muted);
  font-size: 13px;
}

.ticket-pagination .secondary-button.is-active {
  border-color: rgb(var(--theme-mint-rgb) / 0.48);
  background: rgb(var(--theme-mint-rgb) / 0.12);
  color: var(--theme-mint-text);
}

.ticket-list {
  display: grid;
  gap: 18px;
}

.ticket-card {
  scroll-margin-top: 90px;
}

.ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.ticket-head h2 {
  margin: 10px 0 4px;
}

.ticket-head h1 {
  margin: 10px 0 4px;
}

.ticket-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
}

.back-link {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.ticket-client {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ticket-client div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgb(var(--theme-ink-rgb) / 0.035);
}

.ticket-client span,
.ticket-client strong {
  display: block;
}

.ticket-client span {
  color: var(--muted);
  font-size: 12px;
}

.ticket-client strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.ticket-messages {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.ticket-message {
  width: 100%;
  max-width: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: var(--paper);
}

.ticket-message.admin {
  justify-self: stretch;
  border-color: rgb(var(--theme-mint-rgb) / 0.34);
  background: rgb(var(--theme-mint-rgb) / 0.11);
}

.ticket-message.user {
  justify-self: stretch;
}

.ticket-message-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ticket-message-meta span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.ticket-message p {
  margin-bottom: 0;
  white-space: pre-wrap;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.attachment-link {
  display: inline-grid;
  gap: 2px;
  max-width: 260px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgb(var(--theme-white-rgb) / 0.78);
  color: var(--text);
  overflow-wrap: anywhere;
}

.attachment-link small {
  color: var(--muted);
  font-size: 11px;
}

.ticket-reply-form {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.ticket-reply-form.clean {
  border-top: 0;
  padding-top: 0;
}

.ticket-status-form {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}

.ticket-status-form label {
  min-width: 220px;
}

.phone-confirm-form {
  margin-top: 18px;
}

@media (min-width: 980px) {
  .auth-layout {
    width: min(470px, 100%);
  }

  .auth-layout.wide {
    width: min(620px, 100%);
  }
}

@media (max-width: 980px) {
  .app-frame {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .app-sidebar {
    padding-inline: 16px;
  }

  .hero-grid,
  .dashboard-grid,
  .admin-user-two-column,
  .admin-profile-form-grid,
  .admin-role-form {
    grid-template-columns: 1fr;
  }

  .admin-data-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-user-wb-table .admin-data-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-data-row form {
    grid-column: 1 / -1;
  }

  .admin-role-row {
    grid-template-columns: 1fr;
  }

  .admin-role-pills {
    justify-content: flex-start;
  }

  .admin-panel-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-inline-search {
    width: 100%;
  }

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

  .billing-sale-calc {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  .app-page {
    background: var(--app-page-mobile-bg);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  .sale-toast-stack {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
    max-height: min(220px, calc(100dvh - 20px));
    gap: 6px;
  }

  .sale-toast {
    min-height: 42px;
    grid-template-columns: 22px minmax(0, 1fr) 24px;
    gap: 8px;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 12px 28px rgb(var(--theme-ink-rgb) / 0.16);
  }

  .sale-toast-icon {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .sale-toast-copy strong {
    font-size: 13px;
    line-height: 1.1;
  }

  .sale-toast-copy small {
    font-size: 11px;
    line-height: 1.2;
  }

  .sale-toast button {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 20px;
  }

  .mobile-app-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding: 9px 14px;
    background: rgb(var(--theme-white-rgb) / 0.96);
    box-shadow: 0 12px 28px rgb(var(--theme-ink-rgb) / 0.08);
  }

  .mobile-app-actions {
    margin-left: auto;
  }

  .mobile-wallet-row {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 8px 14px;
    background: rgb(var(--theme-white-rgb) / 0.94);
  }

  .app-frame {
    min-height: calc(100vh - 116px);
    display: block;
    padding-left: 0;
    background: var(--theme-page);
    overflow-x: clip;
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    background: rgb(var(--theme-ink-rgb) / 0.38);
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
  }

  .sidebar-open .sidebar-overlay {
    pointer-events: auto;
    opacity: 1;
  }

  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(332px, calc(100vw - 36px));
    height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    border-right: 0;
    padding: 16px;
    overflow-y: auto;
    box-shadow: 24px 0 64px rgb(var(--theme-ink-rgb) / 0.24);
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(calc(-100% - 24px), 0, 0);
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .sidebar-head {
    position: sticky;
    top: 0;
  }

  .nav-groups {
    top: 76px;
    max-height: calc(100vh - 112px);
  }

  .sidebar-bottom {
    display: none;
  }

  .sidebar-open .app-sidebar {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .sidebar-close {
    display: inline-grid;
  }

  .app-main {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 16px 14px 34px;
  }

  .main-toolbar {
    display: none;
  }

  .hero-grid {
    gap: 14px;
    margin-bottom: 14px;
  }

  .hero-panel,
  .dark-panel {
    min-height: auto;
    border-radius: 8px;
    padding: 20px;
  }

  .hero-panel h1 {
    font-size: 27px;
  }

  .hero-panel p {
    font-size: 15px;
  }

  .hero-panel.has-side-icon > .eyebrow,
  .hero-panel.has-side-icon > h1,
  .hero-panel.has-side-icon > p {
    max-width: calc(100% - 78px);
  }

  .hero-side-icon {
    top: 22px;
    right: 20px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
  }

  .hero-side-icon::before {
    inset: 5px;
    border-radius: 999px;
  }

  .hero-side-icon::after {
    inset: -3px;
  }

  .hero-side-icon .side-icon-mark {
    font-size: 32px;
    text-shadow:
      0 1px 0 rgb(var(--theme-white-rgb) / 0.9),
      0 6px 14px rgb(var(--theme-mint-rgb) / 0.2);
  }

  .hero-side-icon-ruble {
    top: 24px;
    right: 26px;
    width: 54px;
    height: 54px;
  }

  .hero-side-icon-ruble .side-icon-mark {
    font-size: 32px;
  }

  .hero-side-icon-history {
    top: 24px;
    right: 26px;
    width: 54px;
    height: 54px;
  }

  .hero-side-icon-history .side-icon-mask {
    width: 30px;
    height: 30px;
  }

  .payment-hero-actions {
    margin-top: 0;
  }

  .icon-panel-head,
  .promo-apply-panel .panel-head {
    min-height: 54px;
    padding-right: 64px;
  }

  .panel-side-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .panel-side-icon::before {
    inset: 7px;
    border-radius: 12px;
  }

  .panel-side-icon .side-icon-mark {
    font-size: 28px;
  }

  .topup-page-stack .promo-code-side-icon,
  .topup-page-stack .promo-history-side-icon {
    width: 42px;
    height: 42px;
  }

  .topup-page-stack .promo-code-side-icon::after,
  .topup-page-stack .promo-history-side-icon::after {
    inset: -3px;
  }

  .topup-page-stack .promo-code-side-icon .side-icon-mask,
  .topup-page-stack .promo-history-side-icon .side-icon-mask {
    width: 23px;
    height: 23px;
  }

  .dashboard-grid,
  .plans-grid,
  .metric-row,
  .form-grid.inline,
  .wb-key-form.form-grid.inline,
  .notification-categories,
  .notification-device-grid,
  .notification-layout,
  .notification-feed-head,
  .support-layout,
  .ticket-client,
  .admin-user-row,
  .admin-user-metrics,
  .ban-admin-grid,
  .ban-target-fields,
  .ban-row,
  .active-ban-row,
  .ban-actions-row,
  .promo-admin-grid,
  .promo-row,
  .promo-client-row,
  .promo-client-meta,
  .violation-metrics,
  .promo-form .form-grid.inline,
  .account-shortcuts,
  .key-mask-grid,
  .inventory-grid,
  .sale-hero,
  .sale-metrics,
  .sale-store-row,
  .sale-settings-store-head,
  .sale-time-grid,
  .sale-category-settings,
  .sale-inventory-grid,
  .sale-stat-grid,
  .sale-bottom-grid,
  .billing-sale-calc,
  .instruction-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .payment-metric-row,
  .payment-summary-row,
  .support-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promo-client-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-stack,
  .panel,
  .hero-panel,
  .sale-hero,
  .sale-settings-workbench,
  .sale-price-editor,
  .sale-store-toggle-section,
  .sale-price-table-wrap,
  .sale-price-table,
  .sale-schedule-block,
  .sale-schedule-grid,
  .sale-global-settings-grid,
  .sale-metrics,
  .sale-bottom-grid,
  .sale-live-compact-grid,
  .wb-security-hero,
  .wb-lock-card,
  .wb-step,
  .wb-step-copy,
  .wb-step-visual,
  .wb-token-table,
  .wb-token-table > div,
  .wb-api-entry-card,
  .wb-token-screenshot {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .wb-security-hero,
  .wb-step,
  .wb-token-table > div,
  .wb-token-table.single > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .wb-token-table > div,
  .wb-token-table.single > div {
    gap: 10px;
    padding: 14px;
  }

  .wb-token-table strong,
  .wb-token-table span,
  .wb-token-table em,
  .wb-step-copy h3,
  .wb-step-copy p,
  .wb-token-checklist li {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .wb-token-table em {
    justify-self: start;
    white-space: normal;
    text-align: left;
  }

  .wb-lock-card {
    gap: 6px;
    border-radius: 20px;
    padding: 16px;
  }

  .wb-lock-card svg {
    width: 82px;
    height: 82px;
  }

  .wb-lock-card strong {
    font-size: 18px;
  }

  .wb-lock-card span {
    font-size: 14px;
  }

  .panel {
    border-radius: 18px;
    padding: 18px;
  }

  .wb-step {
    gap: 14px;
    border-radius: 18px;
    padding: 14px;
  }

  .wb-token-checklist {
    font-size: 14px;
  }

  .wb-token-checklist li {
    min-height: auto;
    padding: 10px 10px 10px 42px;
  }

  .wb-token-checklist li::before {
    top: 10px;
    transform: none;
  }

  .wb-token-screenshot {
    padding: 8px;
  }

  .wb-token-screenshot img {
    display: block;
    width: 100%;
    height: auto;
  }

  .sale-hero {
    align-items: stretch;
    gap: 14px;
  }

  .sale-hero-copy {
    padding-right: 0;
  }

  .sale-hero-actions,
  .sale-report-actions,
  .sale-store-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .sale-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sale-hero-actions form,
  .sale-hero-actions button,
  .sale-report-actions .secondary-button,
  .sale-store-actions .secondary-button {
    width: 100%;
  }

  .sale-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sale-metrics > div {
    padding: 14px;
  }

  .sale-inventory-total {
    font-size: clamp(15px, 3.2vw, 21px);
  }

  .sale-live-compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .sale-metrics > div,
  .sale-live-card,
  .sale-store-row,
  .sale-settings-store,
  .sale-category-card,
  .sale-error-row,
  .sale-report-row,
  .sale-mini-report-list > div {
    border-radius: 16px;
  }

  .sale-store-row,
  .sale-settings-store {
    padding: 14px;
  }

  .sale-store-main strong {
    font-size: 20px;
  }

  .sale-live-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-live-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sale-category-card summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-category-card summary em {
    justify-self: start;
  }

  .sale-category-settings {
    padding: 12px;
  }

  .sale-brand-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-brand-list label {
    width: 100%;
    justify-content: flex-start;
    border-radius: 14px;
  }

	  .sale-workbench-head,
	  .sale-price-editor-head,
	  .sale-toggle-card-head {
	    display: grid;
	    grid-template-columns: minmax(0, 1fr);
	    justify-items: stretch;
	  }

  .sale-toggle-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

	  .sale-toggle-card-head em {
	    justify-self: start;
	  }

  .sale-settings-workbench {
    gap: 16px;
  }

  .sale-price-editor-head h3 {
    font-size: 20px;
  }

  .sale-price-editor-head p {
    font-size: 13px;
  }

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

  .sale-schedule-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-help-label i::after {
    width: min(320px, calc(100vw - 32px));
    max-width: min(320px, calc(100vw - 32px));
  }

  .sale-help-label i::after,
  .sale-help-label i::before {
    content: none;
    display: none;
  }

  .sale-price-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .sale-price-table,
  .sale-price-table tbody,
  .sale-price-table tr,
  .sale-price-table td {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .sale-price-table tr,
  .sale-price-table td {
    width: auto;
    max-width: 100%;
  }

  .sale-price-table thead {
    display: none;
  }

  .sale-price-table tr {
    border: 1px solid var(--line);
    border-radius: 16px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--paper);
  }

  .sale-price-table td {
    border: 0;
    padding: 7px 0;
  }

  .sale-cart-price-cell {
    grid-template-columns: auto minmax(120px, 1fr);
  }

  .sale-stock-inline {
    flex-wrap: wrap;
    gap: 6px;
  }

  .sale-price-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .sale-price-table td.has-mobile-label::before {
    display: none;
  }

  .sale-mobile-field-label {
    display: inline-flex;
    width: auto;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
  }

  .sale-card-times {
    grid-template-columns: minmax(0, 1fr);
  }

	  .sale-toggle-card-grid {
	    grid-template-columns: repeat(12, minmax(0, 1fr));
	  }

  .sale-toggle-card {
    grid-column: 1 / -1;
  }

  .sale-report-row {
    display: grid;
    justify-items: stretch;
  }

  .sale-report-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    border-radius: 16px;
    padding: 14px;
  }

  .sale-report-card-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-report-card .secondary-button {
    width: 100%;
  }

  .sale-mini-report-list-rich > div,
  .sale-mini-report-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .sale-mini-report-list-rich a,
  .sale-mini-report-footer .secondary-button {
    width: 100%;
    text-align: center;
  }

		  .store-card-head,
		  .inventory-card-head {
		    align-items: stretch;
		    flex-direction: column;
		  }

      [data-store-panel] > .panel-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 10px;
      }

      [data-store-panel] > .panel-head h2 {
        width: 100%;
        white-space: normal;
      }

      [data-store-panel] > .panel-head .status-pill {
        justify-self: end;
      }

      #wb-api > .panel-head {
        position: relative;
      }

      #wb-api > .panel-head > div {
        padding-right: 94px;
      }

      #wb-api [data-wb-connect-status] {
        position: absolute;
        top: 0;
        right: 0;
        min-height: 22px;
        padding: 0 8px;
        font-size: 8px;
        letter-spacing: 0.45px;
      }

      #wb-api [data-wb-connect-status].ok::before {
        width: 10px;
        height: 10px;
      }

      .store-panel-tools {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-content: stretch;
        align-items: center;
        gap: 8px;
      }

      .store-search-input {
        width: 100%;
        min-height: 38px;
        font-size: 13px;
      }

      .store-pagination {
        justify-content: stretch;
      }

      .store-pagination .secondary-button {
        flex: 1 1 110px;
      }

      .store-pagination span {
        flex: 0 0 100%;
        order: -1;
        text-align: center;
      }

      .store-card {
        gap: 18px;
        padding: 16px;
      }

      .store-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
      }

      .store-title-row h3 {
        width: 100%;
        max-width: 100%;
        font-size: 24px;
        line-height: 1.15;
        overflow-wrap: anywhere;
      }

      .store-safe-note {
        align-items: center;
        justify-content: center;
        margin-top: 4px;
        max-width: 100%;
        text-align: center;
        line-height: 1.35;
      }

		  .store-card-side,
		  .store-card-actions {
		    width: 100%;
		    justify-items: stretch;
		    justify-content: stretch;
		  }

		  .store-id,
		  .inventory-card-head strong {
		    width: 100%;
		    max-width: 100%;
		    text-align: center;
        overflow-wrap: anywhere;
        white-space: normal;
		  }

      .store-card-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }

      .store-card-actions form,
      .store-card-actions .secondary-button {
        width: 100%;
      }

      .store-card-actions .secondary-button {
        min-height: 42px;
        border-radius: 14px;
        font-size: 14px;
        font-weight: 800;
      }

      .store-inventory-summary {
        gap: 8px;
        padding-top: 10px;
      }

      .store-inventory-rail {
        width: 54px;
        flex-basis: 54px;
      }

      .store-inventory-metric,
      .store-inventory-metric small {
        font-size: 11px;
      }

      .store-inventory-metric strong {
        font-size: 12px;
      }

		  .store-edit-form {
		    grid-template-columns: 1fr;
		  }

	  .promo-client-row,
	  .violation-row {
	    padding: 16px;
	  }

	  .promocode-apply-form {
	    gap: 14px;
	  }

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

  .topup-credit-preview {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: 100%;
    padding: 12px;
  }

  .topup-credit-preview strong {
    grid-row: auto;
    text-align: center;
  }

  .topup-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .topup-invoice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .topup-invoice-grid .topup-invoice-amount-input {
    min-height: 64px;
    font-size: clamp(31px, 3.2vw, 40px);
    font-weight: 650;
  }

  .topup-method-switch {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .topup-method-button {
    min-height: 50px;
    gap: 6px;
    padding: 0 8px;
    border-radius: 16px;
    font-size: 13px;
  }

  .topup-method-icon {
    width: 24px;
    height: 24px;
    border-radius: 9px;
  }

  .topup-method-icon svg {
    width: 15px;
    height: 15px;
  }

  .topup-help-bubble {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .topup-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-amounts .secondary-button {
    min-height: 48px;
    padding-inline: 8px;
    font-size: clamp(13px, 3.4vw, 15px);
  }

  .finance-row {
    grid-template-columns: 1fr;
  }

  .finance-row-side {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    text-align: left;
  }

  .finance-row-side .operation-amount {
    grid-column: 2;
    justify-self: end;
    text-align: right;
  }

  .finance-row-side span {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }

  .panel-head,
  .table-row,
  .ticket-head,
  .ticket-status-form {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-admin-side {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  .payment-balance-box {
    justify-items: start;
    text-align: left;
  }

  .payment-sort-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .payment-sort-button {
    min-width: 0;
    width: 100%;
    padding: 0 8px;
    font-size: 13px;
  }

  .payment-admin-side form,
  .payment-admin-side button {
    width: 100%;
  }

  .invoice-admin-side {
    justify-items: stretch;
  }

  .ticket-status-form label {
    min-width: 0;
  }

	  .support-actions-row,
	  .support-ticket-row {
	    align-items: stretch;
	    grid-template-columns: 1fr;
	  }

	  .history-search-form {
	    grid-template-columns: 1fr;
	  }

	  .payment-filter-form {
	    align-items: stretch;
	    flex-direction: column;
	  }

	  .payment-search-field,
	  .payment-select-field,
	  .payment-date-range,
	  .payment-filter-actions {
	    flex: 1 1 auto;
	    width: 100%;
	  }

	  .payment-date-range {
	    grid-template-columns: 1fr;
	  }

	  .payment-filter-actions {
	    display: grid;
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	  }

	  .history-pagination {
	    justify-content: flex-start;
	  }

	  .active-ban-status {
	    justify-self: start;
	  }

	  .support-actions-row {
	    flex-direction: column;
	  }

	  .admin-user-actions {
	    justify-content: stretch;
	    flex-direction: column;
	  }

	  .admin-user-actions .link-button {
	    width: 100%;
	  }

  .ban-row {
    display: grid;
    align-items: stretch;
  }

  .promo-row-side {
    justify-items: stretch;
  }

  .promo-user-picker-head {
    align-items: stretch;
    flex-direction: column;
  }

  .promo-user-picker-head .secondary-button {
    width: 100%;
  }

  .promo-user-dropdown {
    position: static;
    max-height: none;
  }

  .promo-user-list {
    max-height: 260px;
  }

  .ticket-row-icon {
    display: none;
  }

  .ticket-row-main strong,
  .ticket-row-main small {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .sale-help-label i::after {
    width: min(300px, calc(100vw - 64px));
    max-width: min(300px, calc(100vw - 64px));
  }

  .sale-cart-price-cell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-cart-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .auth-page {
    display: block;
    padding: 0;
    background: var(--auth-panel-bg);
  }

  .auth-page::before,
  .auth-page::after {
    display: none;
  }

  .auth-layout,
  .auth-layout.wide {
    width: 100%;
  }

  .auth-panel,
  .auth-layout.wide .auth-panel {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    padding: 30px 30px 34px;
    box-shadow: none;
  }

  .auth-typing-backdrop {
    z-index: 2;
    top: auto;
    bottom: clamp(132px, 20vh, 190px);
    width: max-content;
    max-width: calc(100vw - 24px);
    color: rgb(var(--theme-white-rgb) / 0.24);
    font-size: clamp(36px, 10.8vw, 50px);
  }

  .login-page .auth-layout {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    transform: none;
  }

  .login-page {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .login-page .auth-panel {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .login-page .auth-panel::before,
  .login-page .auth-panel::after {
    display: block;
  }

  .login-page .auth-typing-backdrop {
    top: auto;
    bottom: clamp(118px, 17svh, 162px);
  }

  .auth-typing-backdrop span {
    max-width: 7.75ch;
  }

  .auth-panel::before {
    left: -245px;
    top: 260px;
    width: 330px;
    height: 330px;
    background: rgb(var(--theme-page-rgb) / 0.96);
  }

  .auth-panel::after {
    right: -220px;
    bottom: 80px;
    width: 330px;
    height: 330px;
    background: rgb(var(--theme-mint-rgb) / 0.94);
  }

  .auth-panel > .brand-row {
    left: 24px;
    bottom: 22px;
  }

  .payment-result-page {
    display: grid;
    min-height: 100svh;
    padding: 18px;
    background: var(--auth-page-bg);
  }

  .payment-result-page::before,
  .payment-result-page::after {
    display: block;
    position: fixed;
    z-index: 0;
    pointer-events: none;
    will-change: border-radius, opacity, transform;
  }

  .payment-result-page::before {
    left: -31vw;
    top: -17vw;
    width: 64vw;
    height: 64vw;
    min-width: 300px;
    min-height: 300px;
    border-radius: 0 0 46% 0;
    background: var(--theme-page);
    animation: auth-water-page-left 16s ease-in-out infinite;
  }

  .payment-result-page::after {
    right: -30vw;
    bottom: -24vw;
    width: 72vw;
    height: 72vw;
    min-width: 300px;
    min-height: 300px;
    border-radius: 52% 0 0 0;
    background: var(--mint);
    animation: auth-water-page-right 18s ease-in-out infinite;
  }

  .payment-result-page .auth-shell {
    width: 100%;
    min-height: 100svh;
    display: grid;
    place-items: center;
  }

  .payment-result-page .payment-result-panel {
    width: 100%;
    min-height: auto;
    border: 1px solid rgb(var(--theme-white-rgb) / 0.68);
    border-radius: 28px;
    padding: 24px 18px 26px;
    box-shadow: 0 22px 58px rgb(var(--theme-ink-rgb) / 0.24);
  }

  .payment-result-brand {
    gap: 10px;
  }

  .payment-result-brand .brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .payment-result-brand strong {
    font-size: 18px;
  }

  .payment-result-brand small {
    font-size: 11px;
  }

  .payment-result-status {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  .payment-result-panel h1 {
    font-size: clamp(34px, 12vw, 46px);
  }

  .payment-result-panel p {
    font-size: 16px;
  }

  .payment-result-actions,
  .payment-result-actions .link-button {
    width: 100%;
  }

  .brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 13px;
  }

  .brand-name {
    font-size: 19px;
  }

  .brand-caption {
    font-size: 12px;
  }

  .auth-mode-badge {
    width: 150px;
    height: 108px;
    margin: 34px auto 30px;
    padding-top: 27px;
    font-size: 21px;
  }

  .login-page .auth-mode-badge {
    width: 142px;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-top: 25px;
  }

  .login-page .auth-panel > .auth-card-form {
    min-height: 96px;
    padding-top: 46px;
  }

  @supports (height: 100dvh) {
    .login-page,
    .login-page .auth-layout,
    .login-page .auth-panel {
      height: 100dvh;
      min-height: 100dvh;
    }
  }

  .auth-copy {
    display: none;
  }

  .auth-copy h1 {
    font-size: 22px;
  }

  .auth-panel > .form-grid {
    width: min(100%, 316px);
    margin: 0 auto;
    border-radius: 22px;
    padding: 20px 24px 60px;
  }

  .auth-panel > .auth-card-form {
    min-height: 102px;
    padding-top: 54px;
  }

  .country-select {
    min-width: 76px;
    padding: 0 10px;
    justify-content: center;
  }

  .phone-field input {
    font-size: 20px;
  }

  .auth-card-form > .primary-button {
    bottom: -22px;
    width: 216px;
    min-height: 50px;
    font-size: 18px;
    letter-spacing: 0.7px;
  }

  .panel {
    border-radius: 14px;
    padding: 18px;
  }

  .app-main {
    padding-inline: 10px;
  }

  .mobile-app-bar {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .mobile-app-actions {
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-plan {
    display: none;
  }

  .mobile-wallet-row .mobile-balance,
  .mobile-wallet-row .topup-button {
    width: auto;
  }

  .mobile-wallet-row .mobile-balance {
    min-width: 74px;
    justify-content: center;
  }

  .mobile-app-bar .brand-name {
    font-size: 16px;
  }

  .mobile-app-bar .brand-caption {
    font-size: 11px;
  }

  .toolbar-pill,
  .toolbar-user,
  .toolbar-support,
  .table-row {
    border-radius: 12px;
  }

  .toolbar-support.mobile-support {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .sidebar-user strong,
  .sidebar-tariff strong {
    font-size: 14px;
  }

  .ticket-message {
    max-width: 100%;
  }

  .ticket-message-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .notification-prompt {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .notification-prompt > div,
  .notification-prompt .primary-button {
    grid-column: 1 / -1;
  }

  .notification-prompt-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }

  .notification-hero-main {
    align-items: stretch;
    flex-direction: column;
    gap: 22px;
  }

  .notification-hero-copy {
    gap: 10px;
  }

  .notification-control-hero .notification-hero-main {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 22px;
    position: relative;
  }

  .notification-control-hero .notification-hero-icon {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
  }

  .notification-control-hero .notification-hero-copy {
    grid-row: auto;
    padding-right: 0;
  }

  .notification-hero-form {
    width: 100%;
    min-width: 0;
    justify-items: start;
  }

  .notification-control-hero .notification-hero-form {
    justify-self: stretch;
  }

  .notification-ios-help {
    max-width: 100%;
    justify-items: start;
    text-align: left;
  }

  .notification-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .notification-device-card,
  .notification-switch-card,
  .notification-ios-warning,
  .notification-category-card,
  .notification-feed-row {
    border-radius: 14px;
  }

  .notification-device-card {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 14px;
  }

  .notification-device-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .notification-switch-card,
  .notification-ios-warning {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-quick-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-quick-panel strong {
    font-size: 20px;
  }

  .notification-quick-actions,
  .notification-switch-actions,
  .notification-guide-actions {
    justify-content: stretch;
  }

  .notification-switch-card button,
  .notification-ios-warning a,
  .notification-quick-actions .primary-button,
  .notification-quick-actions .secondary-button,
  .notification-switch-actions .primary-button,
  .notification-switch-actions .secondary-button,
  .notification-guide-actions .primary-button,
  .notification-guide-actions .secondary-button,
  .notification-feed-search,
  .notification-feed-search button {
    width: 100%;
  }

  .notification-filter-tabs {
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .notification-settings-tabs {
    border-radius: 16px;
    padding: 10px;
  }

  .notification-filter-tab {
    min-height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .notification-filter-icon {
    width: 22px;
    height: 22px;
  }

  .notification-filter-icon svg {
    width: 21px;
    height: 21px;
  }

  .notification-filter-tab strong {
    min-width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .notification-feed-search {
    flex-direction: column;
  }

  .notification-category-card {
    grid-template-columns: 22px 48px minmax(0, 1fr);
    align-items: start;
    padding: 14px;
  }

  .notification-category-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 22px;
  }

  .notification-category-state {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .notification-ios-steps li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    border-radius: 14px;
    padding: 14px;
  }

  .notification-ios-steps li > span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .notification-feed-row {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
  }

  .notification-feed-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .notification-feed-row time {
    grid-column: 2;
    white-space: normal;
  }

  .notification-popover {
    position: fixed;
    right: 12px !important;
    left: 12px !important;
    width: auto;
    max-height: calc(100vh - 94px);
    border-radius: 18px;
  }

  .notification-popover-list {
    max-height: min(420px, calc(100vh - 230px));
  }

  .notification-popover-live-corner {
    position: absolute;
    top: 100px;
    right: 42px;
    z-index: 3;
    width: 12px;
    height: 12px;
    display: inline-grid;
    place-items: center;
    color: var(--mint);
    background: transparent;
    box-shadow: none;
  }

  .notification-popover-live-corner .live-dot {
    width: 10px;
    height: 10px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.13);
  }

  .notification-toast-stack {
    top: 82px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .notification-toast {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    border-radius: 18px;
    padding: 10px;
  }

  .notification-toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .panel-action,
  .topup-button,
  .secondary-button,
  .primary-button {
    width: 100%;
  }

  .notification-control-hero .notification-master-action {
    width: auto;
    justify-self: start;
  }

  .notification-control-hero .notification-hero-copy p {
    max-width: none;
    display: block;
  }

  .mobile-wallet-row .mobile-balance,
  .mobile-wallet-row .topup-button {
    width: auto;
  }

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

  .topup-credit-preview {
    gap: 6px;
    border-radius: 14px;
  }

  .topup-credit-preview small {
    justify-self: center;
    font-size: 11.5px;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .topup-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .topup-metric-row div {
    padding: 12px;
    border-radius: 14px;
  }

  .topup-metric-row span {
    font-size: 12px;
  }

  .topup-metric-row strong {
    font-size: clamp(16px, 5vw, 20px);
  }

  .billing-tariff-card {
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .billing-tariff-title h3 {
    font-size: 18px;
  }

  .billing-tariff-title {
    flex-wrap: wrap;
  }

  .billing-sale-open-button {
    width: 100%;
  }

  .billing-period-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-period-tabs button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .billing-sale-controls,
  .billing-sale-result {
    padding: 14px;
    border-radius: 16px;
  }

  .billing-sale-controls input[type="number"] {
    min-height: 56px;
    font-size: clamp(28px, 11vw, 42px);
  }

  .billing-sale-range-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .billing-sale-range-head button {
    width: 100%;
  }

  .billing-sale-result strong {
    font-size: clamp(30px, 11vw, 44px);
  }

  .billing-secondary-tariffs {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-flat-price strong {
    font-size: 28px;
  }
}

body.apple-picker-open {
  overflow: hidden;
}

.has-apple-picker {
  cursor: pointer;
}

.apple-picker-trigger {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  padding: 0 2px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-align: left;
}

.apple-picker-trigger:hover,
.apple-picker-trigger:focus-visible {
  border-color: var(--mint);
  outline: 0;
}

.apple-picker-trigger.empty {
  color: rgb(var(--theme-ink-rgb) / 0.26);
}

.apple-picker-trigger svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.apple-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(var(--theme-ink-rgb) / 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.apple-picker-overlay[hidden] {
  display: none;
}

.apple-picker-dialog {
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  border: 1px solid rgb(var(--theme-white-rgb) / 0.72);
  border-radius: 28px;
  padding: 18px;
  background: rgb(var(--theme-white-rgb) / 0.96);
  box-shadow: 0 30px 90px rgb(var(--theme-ink-rgb) / 0.3);
  outline: 0;
  animation: apple-picker-in 0.18s ease-out;
}

@keyframes apple-picker-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.apple-picker-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.apple-picker-title {
  justify-self: center;
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-transform: capitalize;
}

.apple-picker-nav {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.apple-picker-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.apple-picker-overlay[data-mode="time"] .apple-picker-nav {
  visibility: hidden;
}

.apple-weekdays,
.apple-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.apple-weekdays {
  margin-bottom: 7px;
}

.apple-weekdays span {
  min-height: 28px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.apple-weekdays .weekend,
.apple-day.weekend {
  color: #e53935;
}

.apple-day {
  min-width: 0;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
}

.apple-day:hover {
  background: rgb(var(--theme-ink-rgb) / 0.06);
}

.apple-day.muted {
  color: rgb(var(--theme-ink-rgb) / 0.28);
}

.apple-day.today {
  box-shadow: inset 0 0 0 2px rgb(var(--theme-mint-rgb) / 0.5);
}

.apple-day.selected {
  background: var(--mint);
  color: var(--theme-paper);
  box-shadow: 0 8px 22px rgb(var(--theme-mint-shadow-rgb) / 0.34);
}

.apple-time-picker {
  position: relative;
  width: min(310px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 8px auto 0;
}

.apple-time-picker::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  border-radius: 14px;
  background: rgb(var(--theme-mint-rgb) / 0.12);
  transform: translateY(-50%);
  pointer-events: none;
}

.apple-time-wheel {
  position: relative;
  z-index: 1;
  height: 214px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 84px 8px;
  background:
    linear-gradient(180deg, var(--paper) 0%, rgb(var(--theme-white-rgb) / 0) 22%),
    linear-gradient(0deg, var(--paper) 0%, rgb(var(--theme-white-rgb) / 0) 22%);
  scrollbar-width: none;
}

.apple-time-wheel::-webkit-scrollbar {
  display: none;
}

.apple-time-option {
  width: 100%;
  height: 42px;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgb(var(--theme-ink-rgb) / 0.42);
  cursor: pointer;
  font: inherit;
  font-size: 19px;
  font-weight: 500;
}

.apple-time-option:hover {
  color: var(--text);
  background: rgb(var(--theme-ink-rgb) / 0.05);
}

.apple-time-option:disabled,
.apple-time-option.disabled {
  color: rgb(var(--theme-ink-rgb) / 0.16);
  cursor: not-allowed;
  background: transparent;
}

.apple-time-option.selected {
  color: var(--theme-mint-text);
  font-size: 24px;
  font-weight: 600;
}

.apple-time-colon {
  position: relative;
  z-index: 1;
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

.apple-picker-overlay[data-mode="datetime"] .apple-time-picker {
  margin-top: 18px;
}

.apple-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.apple-picker-actions button {
  min-height: 42px;
  border-radius: 999px;
  padding: 0 16px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.apple-picker-text-button {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.apple-picker-no-today [data-apple-picker-today] {
  display: none;
}

.apple-picker-done {
  border: 0;
  background: var(--mint);
  color: var(--theme-paper);
  box-shadow: 0 10px 24px rgb(var(--theme-mint-shadow-rgb) / 0.28);
}

@media (max-width: 520px) {
  .app-main {
    padding: 14px 10px 30px;
  }

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

  .sale-metrics > div {
    min-height: 116px;
    padding: 12px 10px;
  }

  .sale-metrics span {
    font-size: 11px;
    line-height: 1.2;
  }

  .sale-metrics strong {
    font-size: 22px;
    line-height: 1.05;
  }

  .sale-inventory-total {
    gap: 2px;
    font-size: clamp(12px, 3.8vw, 15px);
  }

  .sale-metrics .sale-metric-separator {
    margin: 0 1px;
  }

  .sale-metrics small {
    font-size: 11px;
  }

  .sale-inventory-metric em {
    font-size: 10px;
  }

  .sale-inventory-metric .sale-help-label i {
    top: 10px;
    right: 10px;
  }

  .sale-live-compact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-live-card-progress,
  .sale-live-card-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .sale-live-actions .secondary-button {
    flex: 1 1 calc(50% - 6px);
  }

  .hero-panel,
  .dark-panel,
  .panel {
    border-radius: 16px;
    padding: 16px;
  }

  .hero-panel h1 {
    font-size: 24px;
    line-height: 1.12;
  }

  .panel-head h2 {
    font-size: 22px;
    line-height: 1.15;
  }

  .security-warning {
    margin: 12px 0 16px;
    border-radius: 14px;
    padding: 14px;
  }

  .wb-lock-card svg {
    width: 72px;
    height: 72px;
  }

  .wb-token-table strong {
    font-size: 13px;
  }

  .wb-token-table span {
    font-size: 11px;
  }

  .wb-token-table em {
    font-size: 9px;
  }

  .wb-token-kind-panel .panel-head {
    position: relative;
  }

  .wb-token-kind-panel .panel-head > div {
    padding-right: 0;
  }

  .wb-token-kind-panel .panel-head h2 {
    padding-right: 118px;
  }

  .wb-token-kind-panel .panel-head p {
    width: 100%;
    max-width: 100%;
  }

  .wb-token-encrypted-badge,
  .wb-token-access-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .wb-token-encrypted-badge {
    position: absolute;
    top: -2px;
    right: 10px;
    min-height: 23px;
    padding: 0 8px;
    font-size: 8px;
    letter-spacing: 0.35px;
  }

  .wb-token-encrypted-badge::before,
  .wb-token-access-badge::before {
    content: "";
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  .wb-token-encrypted-badge::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  }

  .wb-token-table.single > div {
    position: relative;
    padding-top: 14px;
  }

  .wb-token-table.single strong {
    display: flex;
    min-height: 20px;
    align-items: center;
    padding-right: 128px;
  }

  .wb-token-access-badge {
    position: absolute;
    top: 12px;
    right: 10px;
    min-height: 20px;
    padding: 0 7px;
    font-size: 7px;
    letter-spacing: 0.25px;
    white-space: nowrap;
  }

  .wb-token-access-badge::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }

  .wb-token-title-desktop,
  .wb-token-label-desktop {
    display: none;
  }

  .wb-token-title-mobile,
  .wb-token-label-mobile {
    display: inline;
  }

  .wb-step-copy h3 {
    font-size: 19px;
    line-height: 1.2;
  }

  .wb-step-copy p,
  .wb-token-checklist {
    font-size: 12px;
  }

  .wb-security-note {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    border-radius: 18px;
    padding: 14px;
  }

  .wb-security-note .safe-lock-icon {
    width: 40px;
    height: 40px;
  }

  .wb-security-note p {
    font-size: 13px;
    line-height: 1.35;
  }

  .wb-api-entry-card {
    padding: 18px;
  }

  .wb-api-entry-head strong {
    font-size: 24px;
  }

  .wb-api-entry-points {
    grid-template-columns: 1fr;
  }

  .wb-api-entry-button {
    width: 100%;
  }

  .apple-picker-overlay {
    padding: 14px;
  }

  .apple-picker-dialog {
    border-radius: 24px;
    padding: 14px;
  }

  .apple-day {
    height: 38px;
    border-radius: 12px;
    font-size: 16px;
  }

  .apple-picker-actions {
    flex-wrap: wrap;
  }

  .apple-picker-actions button {
    flex: 1 1 auto;
  }
}

@media (max-width: 860px) {
  .sale-price-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .sale-price-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .sale-price-table thead {
    display: none !important;
  }

  .sale-price-table tbody,
  .sale-price-table tr,
  .sale-price-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .sale-price-table tr {
    overflow: hidden;
  }

  .sale-cart-price-cell,
  .sale-stock-inline {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .sale-cart-toggle input,
  .sale-switch input,
  .sale-card-category-list input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* final responsive polish 2026-05-30 */
.mobile-balance-top,
.sale-hero-text-mobile,
.sale-hero-mobile-help,
.sale-schedule-mobile-help {
  display: none;
}

.footer-brand-copy {
  display: grid;
  justify-items: start;
  gap: 2px;
  color: var(--text);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
}

.footer-brand-copy strong {
  font-size: 15px;
  letter-spacing: 0;
}

.footer-brand-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.footer-legal-links {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: -6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.footer-legal-links a {
  color: inherit;
  text-decoration: none;
}

.footer-legal-links span {
  color: rgb(var(--theme-ink-rgb) / 0.34);
}

.footer-legal-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.sale-hero {
  position: relative;
}

.sale-metrics {
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.sale-metric-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  align-content: center;
}

.sale-metric-main {
  grid-column: span 4;
  min-height: 132px;
}

.sale-metric-small {
  grid-column: span 2;
  min-height: 112px;
}

.sale-inventory-metric {
  position: relative;
}

.sale-inventory-metric .sale-metric-head {
  padding-right: 44px;
}

.sale-inventory-metric .sale-help-label i {
  position: absolute;
  top: 28px;
  right: 28px;
  margin: 0;
}

.sale-inventory-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0;
}

.sale-live-compact-grid {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.sale-live-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.sale-live-card-head {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sale-live-card-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sale-live-card-head .status-pill {
  flex: 0 0 auto;
}

.sale-live-actions,
.sale-live-next {
  display: none !important;
}

.sale-live-wait {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.sale-settings-workbench.is-locked .sale-price-editor input,
.sale-settings-workbench.is-locked .sale-price-editor button,
.sale-settings-workbench.is-locked .sale-store-toggle-section input,
.sale-settings-workbench.is-locked .sale-store-toggle-section button {
  pointer-events: none;
  opacity: 0.58;
}

.sale-price-editor-head p {
  max-width: none;
}

.sale-schedule-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sale-cart-toggle em {
  display: none !important;
}

.sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
  display: none;
}

.sale-cart-price-cell.is-disabled {
  grid-template-columns: auto;
  justify-content: start;
}

.sale-stock-inline {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.sale-row-status,
[data-sale-row-status] {
  display: none !important;
}

.sale-toast-stack {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 15000;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.sale-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(239, 253, 246, 0.96);
  border: 1px solid rgba(131, 219, 169, 0.62);
  box-shadow: 0 18px 50px rgba(5, 31, 52, 0.15);
  backdrop-filter: blur(14px);
}

.sale-toast.error {
  background: rgba(255, 237, 233, 0.96);
  border-color: rgba(226, 108, 95, 0.45);
}

.sale-toast-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(105, 211, 148, 0.22);
  color: #28784f;
  font-weight: 900;
}

.sale-toast.error .sale-toast-icon {
  background: rgba(192, 33, 25, 0.12);
  color: #bf2119;
}

.sale-toast-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sale-toast-copy strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.15;
}

.sale-toast-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.sale-toast button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.sale-toast.closing {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sale-tip-popover,
.apple-picker-overlay {
  z-index: 14000;
}

.wb-key-form label > span,
.store-edit-form label > span {
  color: #333333 !important;
  opacity: 1 !important;
}

@media (min-width: 1180px) {
  .sale-toggle-card-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sale-toggle-card {
    grid-column: span 4;
  }

  .sale-toggle-count-1 .sale-toggle-card {
    grid-column: 1 / -1;
  }

  .sale-toggle-count-2 .sale-toggle-card,
  .sale-toggle-count-4 .sale-toggle-card {
    grid-column: span 6;
  }

  .sale-toggle-count-5 .sale-toggle-card {
    grid-column: span 4;
  }

  .sale-toggle-count-5 .sale-toggle-card:nth-last-child(-n + 2) {
    grid-column: span 6;
  }
}

@media (max-width: 860px) {
  html,
  body,
  .app-page,
  .app-frame,
  .app-main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .mobile-app-bar {
    position: sticky;
    top: 0;
    z-index: 90;
  }

  .mobile-wallet-row {
    display: none !important;
  }

  .mobile-app-bar .brand-row {
    min-width: 0;
  }

  .mobile-app-bar .brand-caption {
    font-size: 11px;
    line-height: 1.1;
  }

  .mobile-app-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .mobile-balance-top {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 10px;
    background: var(--paper);
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
  }

  .app-frame {
    min-height: calc(100vh - 64px);
  }

  .app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 10px 24px;
  }

  .app-footer .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .footer-brand-copy strong {
    font-size: 14px;
  }

  .footer-brand-copy small {
    font-size: 11px;
  }

  .section-hero h1,
  .hero-panel h1 {
    margin-top: 15px;
  }

  .sale-hero {
    padding-top: 34px !important;
  }

  .sale-hero-copy {
    padding-right: 0 !important;
  }

  .sale-hero-text-desktop {
    display: none !important;
  }

  .sale-hero-text-mobile {
    display: block !important;
  }

  .sale-hero-mobile-help {
    display: inline-flex !important;
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .sale-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sale-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
  }

  .sale-metric-main,
  .sale-metric-small {
    grid-column: auto !important;
    min-height: 150px;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px 12px !important;
    overflow: hidden !important;
  }

  .sale-metrics span {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .sale-metrics strong:not(.sale-inventory-total) {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }

  .sale-inventory-total {
    gap: 4px !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .sale-inventory-metric .sale-help-label i {
    top: 12px !important;
    right: 12px !important;
  }

  .sale-live-compact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sale-live-card {
    min-width: 0;
  }

  .sale-live-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sale-price-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .sale-price-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .sale-price-table tbody,
  .sale-price-table tr,
  .sale-price-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .sale-price-table tr {
    padding: 16px !important;
    overflow: hidden;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    grid-column: 1;
    margin: 0 !important;
    align-self: center;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2;
    justify-self: end;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled input[data-sale-field="cartPrice"] {
    display: block;
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .sale-stock-inline {
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .sale-stock-cell {
    min-width: 0 !important;
  }

  .sale-global-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sale-schedule-head p {
    display: none !important;
  }

  .sale-schedule-mobile-help {
    display: inline-flex !important;
  }

  .sale-schedule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sale-schedule-grid input,
  .sale-schedule-grid .apple-picker-trigger {
    min-height: 44px;
    font-size: 15px;
  }

  .store-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }

  .token-health-grid {
    order: 3;
  }

  .store-card-actions {
    order: 4;
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    justify-self: stretch;
  }

  .store-card-actions form,
  .store-card-actions .secondary-button {
    width: 100%;
  }

  .token-health-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .token-health-grid > div {
    min-width: 0;
    padding: 10px;
  }

  .token-health-grid > div:nth-child(3) {
    order: -1;
    grid-column: 1 / -1;
  }

  .token-health-grid strong,
  .token-health-grid small {
    white-space: nowrap;
  }

  .store-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .store-card-actions [data-edit-store-token] {
    order: -1;
    grid-column: 1 / -1;
  }

  .store-title-row {
    position: relative;
    display: block;
    min-height: 28px;
    padding-right: 124px;
  }

  .store-title-row h3 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .store-connected-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 24px;
    padding: 0 9px;
    font-size: 10px;
    letter-spacing: 0;
  }

  .store-connected-badge svg {
    width: 12px;
    height: 12px;
  }

  .sale-tip-popover {
    max-width: calc(100vw - 24px);
    font-size: 13px;
    line-height: 1.35;
  }
}

@media (max-width: 520px) {
  .sale-hero-actions,
  .sale-global-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sale-hero-actions button {
    min-height: 54px;
    padding-inline: 8px;
    font-size: 13px;
  }

  .sale-metrics {
    gap: 8px !important;
  }

  .sale-metric-main,
  .sale-metric-small {
    min-height: 128px !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    padding: 12px 10px !important;
  }

  .sale-inventory-total {
    font-size: 16px !important;
    gap: 3px !important;
  }

  .sale-metric-separator {
    margin: 0 1px !important;
  }

  .sale-metrics strong:not(.sale-inventory-total) {
    font-size: 34px !important;
  }

  .sale-schedule-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sale-live-card-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .store-panel-tools {
    width: 100%;
  }

  .store-search-input {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 380px) {
  .sale-inventory-total {
    font-size: 14px !important;
  }

  .sale-metrics span {
    font-size: 12px !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: 10px !important;
  }
}

/* mobile sale hardening 2026-05-30 */
.sale-live-card-meta span[hidden],
.sale-live-actions[hidden] {
  display: none !important;
}

.sale-live-card {
  width: 100%;
  box-sizing: border-box;
}

.sale-live-card-progress span,
.sale-live-card-progress b,
.sale-live-card-meta span {
  white-space: normal;
}

.sale-live-card-progress b {
  text-align: right;
}

.sale-price-table,
.sale-price-table * {
  max-width: 100%;
}

.sale-cart-price-cell.is-disabled {
  display: inline-grid;
}

.sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
  display: none !important;
}

.sale-tip-popover {
  z-index: 16000 !important;
}

.apple-picker-overlay {
  z-index: 15500 !important;
}

.store-search-empty {
  width: 100%;
}

.sale-mobile-field-label {
  align-items: center;
  gap: 6px;
}

@media (min-width: 861px) {
  .sale-live-count-1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sale-live-count-1 .sale-live-card {
    min-height: 146px;
  }
}

@media (max-width: 860px) {
  .section-stack,
  .section-hero,
  .hero-panel,
  .panel,
  .sale-settings-workbench,
  .sale-price-editor,
  .sale-price-table-wrap,
  .sale-store-toggle-section,
  .sale-toggle-card-grid,
  .sale-toggle-card,
  .sale-live-compact-form,
  .sale-live-compact-grid,
  .sale-live-card,
  .store-card,
  .store-list {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .sale-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sale-hero-actions form,
  .sale-hero-actions button {
    min-width: 0 !important;
    width: 100% !important;
  }

  .sale-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
  }

  .sale-metric-main,
  .sale-metric-small {
    min-height: 136px !important;
  }

  .sale-inventory-total {
    font-size: min(18px, calc((100vw - 64px) / 24)) !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .sale-metric-separator {
    flex: 0 0 auto;
  }

  .sale-inventory-metric .sale-metric-head span {
    max-width: calc(100% - 30px);
  }

  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: inline-flex !important;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    display: inline-flex !important;
    grid-column: 1 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
    align-self: center;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    grid-column: 1 / -1 !important;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sale-stock-inline {
    display: flex !important;
    min-width: 0;
    overflow: hidden;
  }

  .sale-stock-inline strong {
    min-width: 0;
    white-space: nowrap;
  }

  .sale-stock-inline span {
    flex: 0 0 auto;
  }

  .sale-schedule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .sale-toggle-card-head,
  .sale-card-category-toggle {
    align-items: center !important;
  }

  .sale-card-control-row,
  .sale-card-category-toggle i {
    align-self: center !important;
  }

  .sale-toast-stack {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 520px) {
  .sale-metric-main,
  .sale-metric-small {
    min-height: 118px !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    padding: 12px 10px !important;
  }

  .sale-inventory-total {
    font-size: min(16px, calc((100vw - 58px) / 27)) !important;
  }

  .sale-metrics strong:not(.sale-inventory-total) {
    font-size: 30px !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: 11px !important;
  }

  .sale-schedule-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 390px) {
  .sale-inventory-total {
    font-size: min(14px, calc((100vw - 52px) / 28)) !important;
  }

  .sale-metrics span {
    font-size: 11px !important;
  }
}

/* sale mobile/layout corrections 2026-05-30-2 */
.sale-live-count-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 1180px) {
  .sale-live-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sale-live-count-3,
  .sale-live-count-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .sale-live-count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sale-live-count-5 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .sale-live-count-5 .sale-live-card:nth-child(-n + 3) {
    grid-column: span 2;
  }

  .sale-live-count-5 .sale-live-card:nth-last-child(-n + 2) {
    grid-column: span 3;
  }
}

.sale-live-card {
  overflow: hidden;
}

.sale-live-card-meta span[hidden],
.sale-live-actions,
.sale-live-next {
  display: none !important;
}

.wb-key-form input {
  color: #444444;
}

.wb-key-form input::placeholder {
  color: #c4cad3;
  opacity: 1;
}

.sale-price-table th .sale-help-label,
.sale-mobile-field-label.sale-help-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sale-launch-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sale-launch-table {
  width: 100%;
  min-width: 720px;
}

@media (max-width: 860px) {
  .app-main,
  .section-stack,
  .sale-hero,
  .sale-metrics,
  .sale-live-compact-grid,
  .sale-settings-workbench,
  .sale-price-editor,
  .sale-price-table-wrap,
  .sale-toggle-card-grid {
    overflow-x: clip !important;
  }

  .sale-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sale-metric-main {
    min-height: 132px !important;
  }

  .sale-metric-small {
    min-height: 118px !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    position: relative;
    padding: 13px 12px !important;
  }

  .sale-inventory-metric .sale-metric-head {
    padding-right: 30px !important;
  }

  .sale-inventory-metric .sale-help-label i {
    top: 12px !important;
    right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 15px !important;
  }

  .sale-inventory-total {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap !important;
    font-size: clamp(10px, 2.7vw, 18px) !important;
    line-height: 1.08 !important;
  }

  .sale-inventory-total [data-sale-metric-number] {
    min-width: 0;
    white-space: nowrap;
  }

  .sale-metric-separator {
    flex: 0 0 auto;
    margin: 0 2px !important;
  }

  .sale-metrics strong:not(.sale-inventory-total) {
    font-size: clamp(30px, 8.8vw, 42px) !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    overflow-wrap: anywhere;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    grid-column: 1 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled {
    display: inline-grid !important;
    grid-template-columns: auto !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-self: stretch !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled input[data-sale-field="cartPrice"] {
    display: block !important;
    grid-column: 1 / -1 !important;
  }

  .sale-stock-inline {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    white-space: nowrap !important;
    font-size: clamp(16px, 5vw, 22px);
  }

  .sale-stock-inline strong {
    font-size: inherit;
  }

  .sale-launch-table {
    min-width: 0;
  }

  .sale-launch-table thead {
    display: none;
  }

  .sale-launch-table,
  .sale-launch-table tbody,
  .sale-launch-table tr,
  .sale-launch-table td {
    display: block;
    width: 100%;
  }

  .sale-launch-table tr {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    margin-bottom: 10px;
  }

  .sale-launch-table td {
    display: grid;
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
  }

  .sale-launch-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 900;
  }
}

@media (max-width: 520px) {
  .sale-metrics {
    gap: 8px !important;
  }

  .sale-inventory-total {
    font-size: clamp(9px, 2.45vw, 14px) !important;
  }

  .sale-metric-main {
    min-height: 118px !important;
  }

  .sale-metric-small {
    min-height: 108px !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    padding: 11px 9px !important;
  }

  .sale-metrics span {
    font-size: 11px !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: 10px !important;
  }
}

/* sale mobile polish 2026-05-30-3 */
.sale-inventory-total {
  display: flex !important;
  align-items: baseline !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

.sale-inventory-total [data-sale-metric-number],
.sale-inventory-total .sale-metric-separator {
  flex: 0 0 auto;
}

.sale-store-total {
  display: flex !important;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.sale-small-separator {
  display: inline !important;
  color: #cfd5de;
  margin: 0 4px;
}

.sale-metric-card {
  overflow: hidden;
}

.sale-live-card-head {
  position: relative;
  padding-right: 96px;
}

.sale-live-status {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 92px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-transform: none;
  white-space: nowrap;
}

.sale-live-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
}

.sale-live-status.is-done {
  color: var(--theme-mint-text);
}

.sale-live-status.is-running {
  color: #2463d7;
}

.sale-live-status.is-running .sale-live-status-dot {
  opacity: 1;
  animation: sale-live-dot 0.9s ease-in-out infinite;
}

.sale-live-status.is-error {
  color: #b42318;
}

.sale-live-status.is-error .sale-live-status-dot {
  opacity: 1;
}

.sale-live-error-help {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgb(180 35 24 / 0.24);
  border-radius: 999px;
  color: #b42318;
  background: rgb(180 35 24 / 0.08);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  cursor: pointer;
}

@keyframes sale-live-dot {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

.sale-inventory-metric .sale-metric-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.sale-inventory-metric .sale-metric-head > span {
  min-width: 0;
  max-width: calc(100% - 34px);
}

.sale-inventory-metric .sale-metric-head i {
  flex: 0 0 auto;
}

.sale-row-status,
[data-sale-row-status] {
  display: none !important;
}

.sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
  display: none !important;
}

.sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled {
  align-items: center;
}

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell,
  .app-main,
  .section-stack,
  .section-hero,
  .hero-panel,
  .panel,
  .sale-metrics,
  .sale-live-compact-grid,
  .sale-settings-workbench,
  .sale-price-editor,
  .sale-price-table-wrap,
  .sale-store-toggle-section,
  .sale-toggle-card-grid,
  .sale-toggle-card,
  .store-card,
  .store-list {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sale-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sale-metric-main {
    min-height: 142px !important;
  }

  .sale-metric-small {
    min-height: 120px !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    padding: 14px 12px !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    font-size: clamp(13px, 3.5vw, 18px) !important;
    line-height: 1.15 !important;
  }

  .sale-inventory-total {
    margin-top: 14px !important;
    gap: 5px !important;
    font-size: clamp(18px, 6vw, 34px) !important;
    line-height: 1.05 !important;
  }

  .sale-metric-separator {
    margin: 0 3px !important;
    color: #cfd5de;
  }

  .sale-metrics strong:not(.sale-inventory-total) {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.05 !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: clamp(11px, 3.1vw, 14px) !important;
    line-height: 1.22 !important;
  }

  .sale-inventory-metric em {
    margin-top: 10px !important;
  }

  .sale-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: inline-flex !important;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    align-items: center !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    grid-column: 1 !important;
    align-self: center;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    grid-column: 1 / -1 !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100%;
  }

  .sale-stock-inline {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap !important;
  }

  .sale-stock-inline strong {
    min-width: 0;
    font-size: clamp(18px, 5.4vw, 24px) !important;
    white-space: nowrap !important;
  }

  .sale-stock-inline span {
    flex: 0 0 auto;
    color: #cfd5de;
  }

  .sale-tip-popover {
    z-index: 20000 !important;
  }

  .sale-help-label i {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
    cursor: pointer;
    touch-action: manipulation;
  }
}

@media (max-width: 520px) {
  .sale-metrics {
    gap: 8px !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    padding: 13px 10px !important;
  }

  .sale-metric-main {
    min-height: 136px !important;
  }

  .sale-metric-small {
    min-height: 116px !important;
  }

  .sale-inventory-total {
    font-size: clamp(17px, 5.6vw, 28px) !important;
  }

  .sale-inventory-total.is-fitted-small {
    gap: 3px !important;
  }

  .sale-metrics strong:not(.sale-inventory-total) {
    font-size: clamp(32px, 9vw, 40px) !important;
  }

  .sale-hero-actions {
    gap: 10px !important;
  }
}

@media (max-width: 390px) {
  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    padding: 12px 9px !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    font-size: 12px !important;
  }

  .sale-inventory-total {
    font-size: 20px !important;
    gap: 4px !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: 11px !important;
  }
}

/* sale final polish 2026-05-30-4 */
.sale-hero-warning {
  margin: 22px 0 0 !important;
  line-height: 1.25 !important;
}

.sale-hero-actions {
  align-self: end;
}

.sale-live-error-help[hidden],
.sale-report-pane[hidden],
.sale-mobile-field-label {
  display: none !important;
}

.sale-help-label i,
.sale-live-error-help {
  flex: 0 0 auto;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.42) !important;
  background: rgb(var(--theme-mint-rgb) / 0.12) !important;
  color: var(--theme-mint-text) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.sale-tip-popover {
  max-width: min(560px, calc(100vw - 28px)) !important;
  z-index: 50000 !important;
  border-color: rgb(var(--theme-mint-rgb) / 0.38) !important;
  background: rgb(var(--theme-white-rgb) / 0.96) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 46px rgb(var(--theme-ink-rgb) / 0.16) !important;
}

.sale-tip-popover::after {
  border-top-color: rgb(var(--theme-white-rgb) / 0.96) !important;
}

.sale-metrics {
  align-items: stretch;
}

.sale-metric-card {
  min-width: 0 !important;
}

.sale-metric-card > span,
.sale-metric-head > span {
  min-width: 0;
}

.sale-inventory-total,
.sale-included-total,
.sale-store-total {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-variant-numeric: tabular-nums;
}

.sale-included-total em {
  color: inherit;
  font-size: 0.62em;
  font-style: normal;
  font-weight: 900;
}

.sale-metric-separator,
.sale-small-separator {
  color: #cbd2dc !important;
  font-weight: 800 !important;
}

.sale-report-tabs {
  display: grid;
  gap: 18px;
}

.sale-report-tab-list {
  width: fit-content;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f9fc;
}

.sale-report-tab-list button {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  padding: 0 18px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.sale-report-tab-list button.active {
  color: #4b5eea;
  background: var(--paper);
  box-shadow: 0 1px 6px rgb(var(--theme-ink-rgb) / 0.08);
}

.sale-inventory-card-wrap {
  position: relative;
  min-width: 0;
  cursor: help;
}

.sale-inventory-card-wrap .inventory-card {
  height: 100%;
}

.sale-stat-count-note {
  position: absolute;
  top: 14px;
  right: 14px;
  max-width: 45%;
  border-radius: 999px;
  padding: 4px 9px;
  color: #5c67e8;
  background: #eef1ff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sale-price-table-wrap,
.sale-launch-table-wrap,
.sale-store-table-wrap,
.sale-report-tabs,
.app-main,
.nav-groups {
  scrollbar-color: rgb(var(--theme-mint-rgb) / 0.85) #eef2f6;
  scrollbar-width: thin;
}

.sale-price-table-wrap::-webkit-scrollbar,
.sale-launch-table-wrap::-webkit-scrollbar,
.sale-store-table-wrap::-webkit-scrollbar,
.app-main::-webkit-scrollbar,
.nav-groups::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.sale-price-table-wrap::-webkit-scrollbar-track,
.sale-launch-table-wrap::-webkit-scrollbar-track,
.sale-store-table-wrap::-webkit-scrollbar-track,
.app-main::-webkit-scrollbar-track,
.nav-groups::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #eef2f6;
}

.sale-price-table-wrap::-webkit-scrollbar-thumb,
.sale-launch-table-wrap::-webkit-scrollbar-thumb,
.sale-store-table-wrap::-webkit-scrollbar-thumb,
.app-main::-webkit-scrollbar-thumb,
.nav-groups::-webkit-scrollbar-thumb {
  border: 2px solid #eef2f6;
  border-radius: 999px;
  background: rgb(var(--theme-mint-rgb) / 0.9);
}

@media (min-width: 861px) {
  .sale-mobile-field-label {
    display: none !important;
  }

  .sale-price-table td.has-mobile-label {
    display: table-cell !important;
  }
}

@media (max-width: 860px) {
  .mobile-app-bar {
    position: relative !important;
    top: auto !important;
  }

  .sale-hero {
    padding-top: 36px !important;
  }

  .sale-hero-warning {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }

  .sale-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .sale-hero-actions form,
  .sale-hero-actions button {
    width: 100% !important;
  }

  .sale-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sale-metric-card {
    min-height: 130px !important;
    padding: 14px 12px !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    font-size: clamp(13px, 3vw, 16px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .sale-inventory-metric .sale-metric-head {
    align-items: flex-start !important;
    padding-right: 26px !important;
  }

  .sale-inventory-metric .sale-help-label i {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
  }

  .sale-inventory-total,
  .sale-included-total,
  .sale-store-total {
    gap: 6px !important;
    width: 100% !important;
    font-size: clamp(18px, 5.1vw, 30px) !important;
    line-height: 1.05 !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: clamp(10px, 2.9vw, 13px) !important;
  }

  .sale-price-table-wrap {
    overflow: visible !important;
  }

  .sale-price-table,
  .sale-price-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-price-table thead {
    display: none !important;
  }

  .sale-price-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 18px 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
    background: var(--paper) !important;
  }

  .sale-price-table td {
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .sale-price-table td[data-label="Категория"],
  .sale-price-table td[data-label="На складах"] {
    grid-column: 1 / -1 !important;
  }

  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .sale-price-table input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    grid-column: 1 !important;
    margin-bottom: 0 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
    justify-self: end !important;
    min-width: 0 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled {
    display: inline-grid !important;
    grid-template-columns: auto !important;
    width: auto !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled input[data-sale-field="cartPrice"] {
    display: block !important;
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
  }

  .sale-stock-inline {
    justify-content: flex-start !important;
    font-size: clamp(16px, 4.6vw, 24px) !important;
  }

  .sale-report-tab-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sale-report-tab-list button {
    padding: 0 8px;
    font-size: 12px;
  }

  .sale-stat-count-note {
    position: static;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin: 10px 0 0 14px;
  }
}

@media (max-width: 520px) {
  .sale-metric-card {
    min-height: 118px !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    font-size: 12px !important;
  }

  .sale-inventory-total,
  .sale-included-total,
  .sale-store-total {
    font-size: clamp(13px, 4.2vw, 20px) !important;
    gap: 4px !important;
  }

  .sale-metric-separator,
  .sale-small-separator {
    margin: 0 2px !important;
  }

  .sale-metrics strong:not(.sale-inventory-total):not(.sale-included-total):not(.sale-store-total) {
    font-size: clamp(26px, 8vw, 36px) !important;
  }

  .sale-price-table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 16px 14px !important;
  }

  .sale-price-table input[type="number"] {
    min-height: 58px !important;
    font-size: 18px !important;
  }
}

/* sale hardening pass 2026-05-30-5 */
.sale-hero-warning {
  margin-top: 18px !important;
  margin-bottom: 28px !important;
}

.sale-help-label i,
.sale-live-error-help {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.42) !important;
  background: rgb(var(--theme-mint-rgb) / 0.12) !important;
  color: var(--theme-mint-text) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.sale-live-error-help[hidden] {
  display: none !important;
}

.sale-live-status:not(.is-error) .sale-live-error-help {
  display: none !important;
}

.sale-price-table th .sale-help-label,
.sale-mobile-field-label.sale-help-label {
  align-items: center !important;
  white-space: nowrap !important;
}

.sale-tip-popover {
  max-width: min(520px, calc(100vw - 24px)) !important;
}

.sale-metrics {
  display: grid !important;
  align-items: stretch !important;
}

.sale-metric-card {
  min-width: 0 !important;
}

.sale-metric-head {
  min-width: 0 !important;
}

.sale-inventory-metric {
  position: relative;
}

.sale-inventory-total,
.sale-included-total,
.sale-store-total,
.sale-live-products-line,
.sale-stock-inline {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

.sale-inventory-total,
.sale-included-total,
.sale-store-total,
.sale-stock-inline {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
}

.sale-included-total em {
  font-style: normal !important;
}

.sale-live-products-line {
  display: inline-block !important;
  vertical-align: bottom;
}

.sale-store-total .sale-metric-separator,
.sale-inventory-total .sale-metric-separator,
.sale-stock-inline span {
  flex: 0 0 auto !important;
  color: #c9d0da !important;
}

.sale-live-card-meta span {
  min-width: 0 !important;
}

.sale-live-card-meta b {
  min-width: 0 !important;
}

.sale-live-card-meta span:nth-child(2),
.sale-live-card-meta span:nth-child(4),
.sale-live-card-meta span:nth-child(5),
.sale-live-card-meta span:nth-child(6) {
  display: none !important;
}

.sale-live-status {
  border: 0 !important;
  background: transparent !important;
}

.sale-live-status.is-done .sale-live-status-dot,
.sale-live-status.is-idle .sale-live-status-dot {
  display: none !important;
}

.sale-live-status.is-running .sale-live-status-dot {
  display: inline-block !important;
}

.sale-mobile-field-label {
  display: none !important;
}

.sale-price-table td.has-mobile-label .sale-mobile-field-label {
  display: none !important;
}

.sale-cart-price-cell {
  min-width: 0 !important;
}

.sale-cart-price-cell.is-disabled {
  display: inline-grid !important;
  grid-template-columns: auto !important;
  width: auto !important;
}

.sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
  display: none !important;
}

.sale-cart-price-cell.is-enabled {
  align-items: center !important;
}

.sale-live-compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)) !important;
}

.sale-live-count-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}

.sale-live-card {
  min-width: 0 !important;
}

.sale-live-card-progress {
  min-width: 0 !important;
}

.sale-live-card-head {
  min-width: 0 !important;
}

.sale-live-card-head > strong {
  min-width: 0 !important;
}

.sale-report-tab-list {
  position: relative;
  z-index: 1;
}

.sale-inventory-card-wrap {
  min-width: 0 !important;
}

.sale-inventory-card-wrap[data-tip] {
  cursor: help;
}

.sale-store-table-wrap,
.sale-price-table-wrap,
.sale-launch-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--theme-mint-rgb) / 0.82) #eef2f6;
}

.sale-store-table-wrap::-webkit-scrollbar,
.sale-price-table-wrap::-webkit-scrollbar,
.sale-launch-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.sale-store-table-wrap::-webkit-scrollbar-track,
.sale-price-table-wrap::-webkit-scrollbar-track,
.sale-launch-table-wrap::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #eef2f6;
}

.sale-store-table-wrap::-webkit-scrollbar-thumb,
.sale-price-table-wrap::-webkit-scrollbar-thumb,
.sale-launch-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #eef2f6;
  border-radius: 999px;
  background: linear-gradient(90deg, #6474ef, #74d49f);
  background-clip: padding-box;
}

@media (min-width: 861px) {
  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: none !important;
  }

  .sale-price-table td.has-mobile-label {
    display: table-cell !important;
  }

  .sale-live-card {
    padding-right: 18px !important;
  }

  .sale-live-card-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .sale-live-products-line {
    font-size: clamp(13px, 0.95vw, 17px) !important;
  }
}

@media (max-width: 860px) {
  html,
  body,
  .app-page,
  .app-frame,
  .app-main {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .mobile-app-bar {
    position: relative !important;
    top: auto !important;
    z-index: 30 !important;
  }

  .sale-hero {
    padding-top: 38px !important;
  }

  .sale-hero-warning {
    margin: 14px 0 24px !important;
  }

  .sale-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .sale-hero-actions form,
  .sale-hero-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sale-metric-card {
    min-height: 126px !important;
    padding: 13px 11px !important;
    border-radius: 18px !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    max-width: 100% !important;
    color: var(--muted) !important;
    font-size: clamp(12px, 3.1vw, 15px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .sale-inventory-metric .sale-metric-head {
    display: block !important;
    padding-right: 30px !important;
  }

  .sale-inventory-metric .sale-metric-head i {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
  }

  .sale-inventory-total {
    width: 100% !important;
    margin-top: 16px !important;
    gap: 4px !important;
    font-size: clamp(12px, 4vw, 22px) !important;
    line-height: 1.05 !important;
  }

  .sale-inventory-total [data-sale-metric-number] {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .sale-included-total,
  .sale-store-total {
    gap: 5px !important;
    font-size: clamp(26px, 8vw, 40px) !important;
    line-height: 1.05 !important;
  }

  .sale-included-total em {
    font-size: 0.52em !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: clamp(10px, 2.8vw, 13px) !important;
    line-height: 1.22 !important;
  }

  .sale-live-compact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .sale-live-card-head {
    padding-right: 88px !important;
  }

  .sale-live-status {
    max-width: 82px !important;
    justify-content: flex-end !important;
    font-size: 10px !important;
  }

  .sale-live-card-meta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) !important;
    gap: 8px !important;
  }

  .sale-live-products-line {
    max-width: 100% !important;
    font-size: clamp(12px, 3.2vw, 15px) !important;
  }

  .sale-price-table-wrap {
    width: 100% !important;
    overflow: visible !important;
  }

  .sale-price-table,
  .sale-price-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-price-table thead {
    display: none !important;
  }

  .sale-price-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
    width: 100% !important;
    padding: 16px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
    background: var(--paper) !important;
  }

  .sale-price-table td {
    display: grid !important;
    gap: 7px !important;
    width: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .sale-price-table td[data-label="Категория"],
  .sale-price-table td[data-label="На складах"] {
    grid-column: 1 / -1 !important;
  }

  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.035em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .sale-price-table input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 62px !important;
    min-height: 34px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled {
    display: inline-grid !important;
    grid-template-columns: auto !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled input[data-sale-field="cartPrice"] {
    display: block !important;
    grid-column: 1 / -1 !important;
    margin-top: 6px !important;
  }

  .sale-cart-toggle span {
    width: 56px !important;
    height: 32px !important;
  }

  .sale-stock-inline {
    justify-content: flex-start !important;
    gap: 7px !important;
    font-size: clamp(16px, 4.5vw, 24px) !important;
    line-height: 1.05 !important;
  }

  .sale-stock-inline strong {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    font-size: inherit !important;
  }

  .sale-toggle-card-head {
    align-items: center !important;
  }

  .sale-card-control-row {
    align-self: center !important;
    min-height: 38px !important;
    padding-right: 0 !important;
  }

  .sale-card-category-toggle {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .sale-card-category-toggle i {
    align-self: center !important;
    justify-self: end !important;
  }

  .sale-report-tab-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  .sale-metrics {
    gap: 8px !important;
  }

  .sale-metric-card {
    min-height: 118px !important;
    padding: 11px 9px !important;
  }

  .sale-inventory-total {
    font-size: clamp(10px, 3.35vw, 16px) !important;
    gap: 3px !important;
  }

  .sale-included-total,
  .sale-store-total {
    font-size: clamp(22px, 6.7vw, 34px) !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: 10px !important;
  }

  .sale-price-table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
    padding: 14px 12px !important;
  }

  .sale-price-table input[type="number"] {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .sale-stock-inline {
    font-size: clamp(15px, 4.2vw, 21px) !important;
  }
}

@media (max-width: 370px) {
  .sale-inventory-total {
    font-size: 10px !important;
  }

  .sale-stock-inline {
    font-size: 14px !important;
  }
}

/* sale final mobile/desktop lock 2026-05-30-6 */
.sale-hero-warning {
  margin-top: 14px !important;
  margin-bottom: 34px !important;
}

.sale-help-label i,
.sale-live-error-help {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  padding: 0 !important;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.42) !important;
  background: rgb(var(--theme-mint-rgb) / 0.12) !important;
  color: var(--theme-mint-text) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: none !important;
  touch-action: manipulation !important;
}

.sale-help-label i::before,
.sale-help-label i::after {
  content: none !important;
  display: none !important;
}

.sale-live-error-help[hidden],
.sale-live-status:not(.is-error) .sale-live-error-help {
  display: none !important;
}

.sale-mobile-field-label {
  display: none !important;
}

.sale-inventory-total,
.sale-included-total,
.sale-store-total,
.sale-live-products-line,
.sale-stock-inline {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

.sale-inventory-total,
.sale-included-total,
.sale-store-total,
.sale-stock-inline {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
}

.sale-inventory-total [data-sale-metric-number],
.sale-store-total [data-sale-metric-number],
.sale-stock-inline strong {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.sale-metric-separator,
.sale-small-separator,
.sale-stock-inline span {
  flex: 0 0 auto !important;
  color: #cbd2dc !important;
}

.sale-live-status {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sale-live-status.is-done .sale-live-status-dot,
.sale-live-status.is-idle .sale-live-status-dot {
  display: none !important;
}

.sale-live-status.is-running .sale-live-status-dot {
  display: inline-block !important;
}

.sale-live-card-meta span:nth-child(2),
.sale-live-card-meta span:nth-child(4),
.sale-live-card-meta span:nth-child(5),
.sale-live-card-meta span:nth-child(6) {
  display: none !important;
}

.sale-live-products-line {
  display: inline-block !important;
  vertical-align: bottom !important;
}

.sale-price-table td.has-mobile-label .sale-mobile-field-label {
  display: none !important;
}

.sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
  display: none !important;
}

.sale-store-table-wrap,
.sale-price-table-wrap,
.sale-launch-table-wrap {
  scrollbar-width: thin !important;
  scrollbar-color: rgb(var(--theme-mint-rgb) / 0.84) #edf2f6 !important;
}

.sale-store-table-wrap::-webkit-scrollbar,
.sale-price-table-wrap::-webkit-scrollbar,
.sale-launch-table-wrap::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

.sale-store-table-wrap::-webkit-scrollbar-track,
.sale-price-table-wrap::-webkit-scrollbar-track,
.sale-launch-table-wrap::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: #edf2f6 !important;
}

.sale-store-table-wrap::-webkit-scrollbar-thumb,
.sale-price-table-wrap::-webkit-scrollbar-thumb,
.sale-launch-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #edf2f6 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #6474ef, #74d49f) !important;
  background-clip: padding-box !important;
}

@media (min-width: 861px) {
  .sale-price-table th .sale-help-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
  }

  .sale-live-compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)) !important;
  }

  .sale-live-count-1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sale-live-card {
    min-width: 0 !important;
  }

  .sale-live-card-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .sale-live-products-line {
    font-size: clamp(12px, 0.82vw, 16px) !important;
  }
}

@media (max-width: 860px) {
  html,
  body,
  .app-page,
  .app-frame,
  .app-main,
  .dashboard-shell,
  .dashboard-content,
  .sale-section,
  .sale-panel,
  .sale-card,
  .sale-settings,
  .sale-settings-card {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .mobile-app-bar,
  .main-toolbar,
  .app-header,
  .dashboard-header {
    position: static !important;
    top: auto !important;
  }

  .sale-hero {
    padding-top: 42px !important;
  }

  .sale-hero-warning {
    margin-top: 16px !important;
    margin-bottom: 38px !important;
  }

  .sale-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .sale-hero-actions form,
  .sale-hero-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sale-metric-card {
    min-height: 124px !important;
    padding: 13px 11px !important;
    border-radius: 18px !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    max-width: 100% !important;
    font-size: clamp(12px, 3vw, 15px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .sale-inventory-metric .sale-metric-head {
    display: block !important;
    padding-right: 32px !important;
  }

  .sale-inventory-metric .sale-metric-head i {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  .sale-inventory-total {
    width: 100% !important;
    margin-top: 16px !important;
    gap: 5px !important;
    font-size: clamp(11px, 3.75vw, 20px) !important;
    line-height: 1.05 !important;
  }

  .sale-included-total,
  .sale-store-total {
    gap: 6px !important;
    font-size: clamp(25px, 7.5vw, 38px) !important;
    line-height: 1.05 !important;
  }

  .sale-included-total em {
    font-size: 0.52em !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: clamp(10px, 2.75vw, 13px) !important;
    line-height: 1.2 !important;
  }

  .sale-live-compact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .sale-live-card {
    min-width: 0 !important;
  }

  .sale-live-card-head {
    min-width: 0 !important;
    padding-right: 82px !important;
  }

  .sale-live-status {
    max-width: 80px !important;
    justify-content: flex-end !important;
    font-size: 10px !important;
  }

  .sale-live-card-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sale-live-products-line {
    font-size: clamp(11px, 3vw, 14px) !important;
  }

  .sale-price-table-wrap {
    width: 100% !important;
    overflow: visible !important;
  }

  .sale-price-table,
  .sale-price-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-price-table thead {
    display: none !important;
  }

  .sale-price-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
    width: 100% !important;
    padding: 16px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    margin: 0 0 14px !important;
    background: var(--paper) !important;
  }

  .sale-price-table td {
    display: grid !important;
    gap: 7px !important;
    width: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .sale-price-table td[data-label="Категория"],
  .sale-price-table td[data-label="На складах"] {
    grid-column: 1 / -1 !important;
  }

  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 100% !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.035em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .sale-price-table input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    min-height: 34px !important;
    display: inline-grid !important;
    grid-template-columns: auto !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
    display: none !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled input[data-sale-field="cartPrice"] {
    display: block !important;
    grid-column: 1 / -1 !important;
    margin-top: 6px !important;
  }

  .sale-price-table tr.sale-cart-enabled td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
  }

  .sale-cart-toggle span {
    width: 56px !important;
    height: 32px !important;
  }

  .sale-stock-inline {
    justify-content: flex-start !important;
    gap: 7px !important;
    font-size: clamp(17px, 4.6vw, 24px) !important;
    line-height: 1.05 !important;
  }

  .sale-toggle-card-head {
    align-items: center !important;
  }

  .sale-card-control-row {
    align-self: center !important;
    min-height: 38px !important;
    padding-right: 0 !important;
  }

  .sale-card-category-toggle {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .sale-card-category-toggle i {
    align-self: center !important;
    justify-self: end !important;
  }

  .sale-report-tab-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .sale-metrics {
    gap: 8px !important;
  }

  .sale-metric-card {
    min-height: 116px !important;
    padding: 11px 9px !important;
  }

  .sale-inventory-total {
    font-size: clamp(9px, 3.05vw, 15px) !important;
    gap: 3px !important;
  }

  .sale-included-total,
  .sale-store-total {
    font-size: clamp(22px, 6.5vw, 32px) !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    font-size: clamp(11px, 2.9vw, 14px) !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: 10px !important;
  }

  .sale-price-table tr {
    gap: 11px !important;
    padding: 14px 12px !important;
  }

  .sale-price-table input[type="number"] {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .sale-stock-inline {
    font-size: clamp(15px, 4.15vw, 21px) !important;
    gap: 5px !important;
  }
}

@media (max-width: 390px) {
  .sale-inventory-total {
    font-size: clamp(8px, 2.85vw, 13px) !important;
  }

  .sale-stock-inline {
    font-size: clamp(14px, 3.8vw, 18px) !important;
  }
}

/* sale stability pass 2026-05-30-8 */
.main-toolbar,
.mobile-app-bar {
  position: static !important;
  top: auto !important;
}

.sale-hero-warning {
  margin-top: 18px !important;
  margin-bottom: 48px !important;
}

.sale-help-label i,
.sale-live-error-help,
.sale-schedule-mobile-help i {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-width: 1px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  transform: none !important;
}

.sale-help-label i::before,
.sale-help-label i::after,
.sale-live-error-help::before,
.sale-live-error-help::after {
  content: none !important;
  display: none !important;
}

.sale-tip-popover {
  z-index: 999999 !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  pointer-events: auto !important;
}

.sale-live-error-help[hidden],
.sale-live-status:not(.is-error) .sale-live-error-help {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sale-included-total em {
  display: none !important;
}

.sale-inventory-total,
.sale-store-total,
.sale-live-products-line,
.sale-stock-inline,
.inventory-card-head strong,
.inventory-bars strong {
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

.sale-inventory-total,
.sale-store-total,
.sale-stock-inline {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  max-width: 100% !important;
}

.sale-metric-separator,
.sale-small-separator,
.sale-stock-inline span {
  flex: 0 0 auto !important;
  color: #cbd2dc !important;
}

.sale-live-card {
  position: relative !important;
}

.sale-live-status {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: auto !important;
  max-width: 92px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  justify-content: flex-end !important;
  color: var(--theme-mint-text) !important;
  font-size: 11px !important;
  text-align: right !important;
}

.sale-live-status.is-done .sale-live-status-dot,
.sale-live-status.is-idle .sale-live-status-dot {
  display: none !important;
}

.sale-live-status.is-running .sale-live-status-dot {
  display: inline-block !important;
}

.sale-live-card-head {
  padding-right: 112px !important;
}

.sale-live-card-meta span:nth-child(2),
.sale-live-card-meta span:nth-child(4),
.sale-live-card-meta span:nth-child(5),
.sale-live-card-meta span:nth-child(6) {
  display: none !important;
}

.sale-live-products-line {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.sale-price-table td.has-mobile-label .sale-mobile-field-label {
  display: none !important;
}

.sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
  align-items: center !important;
}

.sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
  display: none !important;
}

.sale-toggle-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 14px !important;
}

.sale-toggle-card-head,
.sale-card-category-toggle {
  align-items: center !important;
}

.sale-card-control-row,
.sale-card-category-toggle i {
  align-self: center !important;
}

.sale-store-table-wrap,
.sale-price-table-wrap,
.sale-launch-table-wrap {
  scrollbar-width: thin !important;
  scrollbar-color: rgb(var(--theme-mint-rgb) / 0.86) #edf2f6 !important;
}

.sale-store-table-wrap::-webkit-scrollbar,
.sale-price-table-wrap::-webkit-scrollbar,
.sale-launch-table-wrap::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}

.sale-store-table-wrap::-webkit-scrollbar-track,
.sale-price-table-wrap::-webkit-scrollbar-track,
.sale-launch-table-wrap::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: #edf2f6 !important;
}

.sale-store-table-wrap::-webkit-scrollbar-thumb,
.sale-price-table-wrap::-webkit-scrollbar-thumb,
.sale-launch-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #edf2f6 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #6474ef, #74d49f) !important;
  background-clip: padding-box !important;
}

@media (min-width: 861px) {
  .sale-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .sale-metric-card {
    min-width: 0 !important;
  }

  .sale-live-compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  }

  .sale-live-count-1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sale-price-table-wrap {
    overflow-x: auto !important;
  }

  .sale-price-table {
    min-width: min(1100px, 100%) !important;
  }

  .sale-price-table th .sale-help-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
}

@media (max-width: 860px) {
  html,
  body,
  .app-page,
  .app-frame,
  .app-main,
  .dashboard-content,
  .section-stack,
  .panel,
  .hero-panel,
  .sale-hero,
  .sale-settings-panel,
  .sale-price-editor,
  .sale-price-table-wrap,
  .sale-toggle-card-grid,
  .sale-live-compact-form,
  .sale-live-compact-grid {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .sale-hero-warning {
    margin-top: 16px !important;
    margin-bottom: 42px !important;
  }

  .sale-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .sale-hero-actions form,
  .sale-hero-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    min-width: 0 !important;
    min-height: 126px !important;
    padding: 13px 11px !important;
    overflow: hidden !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    max-width: calc(100% - 30px) !important;
    font-size: clamp(11px, 3vw, 15px) !important;
    line-height: 1.14 !important;
    white-space: normal !important;
  }

  .sale-inventory-metric .sale-metric-head {
    display: block !important;
    padding-right: 30px !important;
  }

  .sale-inventory-metric .sale-help-label i {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    font-size: 12px !important;
  }

  .sale-inventory-total {
    width: 100% !important;
    margin-top: 18px !important;
    gap: 5px !important;
    font-size: clamp(7px, 2.35vw, 14px) !important;
    line-height: 1.04 !important;
  }

  .sale-included-total,
  .sale-store-total {
    gap: 6px !important;
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.05 !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: clamp(9px, 2.6vw, 12px) !important;
    line-height: 1.18 !important;
  }

  .sale-live-compact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .sale-live-card {
    min-width: 0 !important;
  }

  .sale-live-card-head {
    min-width: 0 !important;
    padding-right: 82px !important;
  }

  .sale-live-status {
    top: 12px !important;
    right: 12px !important;
    max-width: 74px !important;
    font-size: 10px !important;
  }

  .sale-live-card-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sale-live-card-meta span {
    min-width: 0 !important;
  }

  .sale-live-products-line {
    font-size: clamp(7px, 2.2vw, 12px) !important;
  }

  .sale-price-table-wrap {
    width: 100% !important;
    overflow: visible !important;
  }

  .sale-price-table,
  .sale-price-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-price-table thead {
    display: none !important;
  }

  .sale-price-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
    width: 100% !important;
    padding: 16px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    margin: 0 0 14px !important;
    background: var(--paper) !important;
  }

  .sale-price-table td {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .sale-price-table td[data-label="Категория"],
  .sale-price-table td[data-label="На складах"] {
    grid-column: 1 / -1 !important;
  }

  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .sale-price-table input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    display: inline-grid !important;
    grid-template-columns: auto !important;
    gap: 0 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    display: contents !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled .sale-cart-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled input[data-sale-field="cartPrice"] {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 8px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
    display: none !important;
  }

  .sale-price-table tr.sale-cart-enabled td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
  }

  .sale-cart-toggle span {
    width: 52px !important;
    height: 30px !important;
  }

  .sale-stock-inline {
    justify-content: flex-start !important;
    gap: 6px !important;
    font-size: clamp(10px, 3vw, 18px) !important;
    line-height: 1.05 !important;
  }

  .sale-toggle-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sale-toggle-card {
    padding: 14px 12px !important;
  }

  .sale-toggle-card-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .sale-card-category-toggle {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .sale-report-tab-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .sale-metrics {
    gap: 8px !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    min-height: 112px !important;
    padding: 11px 9px !important;
  }

  .sale-inventory-total {
    font-size: clamp(7px, 2.25vw, 11px) !important;
    gap: 4px !important;
  }

  .sale-included-total,
  .sale-store-total {
    font-size: clamp(20px, 6.4vw, 30px) !important;
  }

  .sale-price-table tr {
    gap: 11px !important;
    padding: 14px 12px !important;
  }

  .sale-toggle-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 390px) {
  .sale-inventory-total {
    font-size: 7px !important;
    gap: 3px !important;
  }

  .sale-stock-inline {
    font-size: 10px !important;
    gap: 4px !important;
  }
}

/* sale definitive responsive pass 2026-05-30-9 */
.sale-toast-stack {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 1000000 !important;
  pointer-events: none !important;
}

.sale-toast {
  width: 100% !important;
  max-width: 100% !important;
  pointer-events: auto !important;
}

.sale-hero-warning {
  margin-top: 10px !important;
  margin-bottom: 54px !important;
}

.sale-help-label i,
.sale-live-error-help {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  padding: 0 !important;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.5) !important;
  background: rgb(var(--theme-mint-rgb) / 0.12) !important;
  color: var(--theme-mint-text) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
  box-shadow: none !important;
  touch-action: manipulation !important;
}

.sale-help-label i::before,
.sale-help-label i::after,
.sale-live-error-help::before,
.sale-live-error-help::after {
  content: none !important;
  display: none !important;
}

.sale-tip-popover {
  z-index: 1000001 !important;
  max-width: min(520px, calc(100vw - 24px)) !important;
  pointer-events: auto !important;
}

.sale-live-status:not(.is-error) .sale-live-error-help,
.sale-live-error-help[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sale-live-status.is-done .sale-live-status-dot,
.sale-live-status.is-idle .sale-live-status-dot {
  display: none !important;
}

.sale-live-status.is-running .sale-live-status-dot {
  display: inline-block !important;
}

.sale-inventory-total,
.sale-store-total,
.sale-included-total,
.sale-live-products-line,
.sale-stock-inline {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

.sale-inventory-total,
.sale-store-total,
.sale-included-total,
.sale-stock-inline {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
}

.sale-inventory-total [data-sale-metric-number],
.sale-store-total [data-sale-metric-number],
.sale-stock-inline strong {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.sale-metric-separator,
.sale-small-separator,
.sale-stock-inline span {
  flex: 0 0 auto !important;
  color: #cbd2dc !important;
}

.sale-price-table td.has-mobile-label .sale-mobile-field-label {
  display: none !important;
}

.sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
  display: none !important;
}

.sale-toggle-card-head,
.sale-card-category-toggle {
  align-items: center !important;
}

.sale-card-control-row,
.sale-card-category-toggle i {
  align-self: center !important;
}

.sale-store-table-wrap,
.sale-price-table-wrap,
.sale-launch-table-wrap {
  scrollbar-width: thin !important;
  scrollbar-color: rgb(var(--theme-mint-rgb) / 0.86) #edf2f6 !important;
}

.sale-store-table-wrap::-webkit-scrollbar,
.sale-price-table-wrap::-webkit-scrollbar,
.sale-launch-table-wrap::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}

.sale-store-table-wrap::-webkit-scrollbar-track,
.sale-price-table-wrap::-webkit-scrollbar-track,
.sale-launch-table-wrap::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: #edf2f6 !important;
}

.sale-store-table-wrap::-webkit-scrollbar-thumb,
.sale-price-table-wrap::-webkit-scrollbar-thumb,
.sale-launch-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #edf2f6 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #6474ef, #74d49f) !important;
  background-clip: padding-box !important;
}

@media (min-width: 861px) {
  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: none !important;
  }

  .sale-price-table td.has-mobile-label {
    display: table-cell !important;
  }
}

@media (max-width: 860px) {
  html,
  body,
  .app-page,
  .app-frame,
  .app-main,
  .dashboard-content,
  .section-stack,
  .panel,
  .hero-panel,
  .sale-hero,
  .sale-settings-workbench,
  .sale-price-editor,
  .sale-price-table-wrap,
  .sale-toggle-card-grid,
  .sale-live-compact-grid,
  .sale-live-compact-form {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .mobile-app-bar,
  .main-toolbar,
  .app-header,
  .dashboard-header {
    position: static !important;
    top: auto !important;
  }

  .sale-hero {
    padding-top: 42px !important;
  }

  .sale-hero-warning {
    margin-top: 12px !important;
    margin-bottom: 56px !important;
  }

  .sale-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .sale-hero-actions form,
  .sale-hero-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    min-width: 0 !important;
    min-height: 118px !important;
    padding: 12px 10px !important;
    overflow: hidden !important;
  }

  .sale-metric-card > span,
  .sale-metric-head > span {
    max-width: calc(100% - 30px) !important;
    font-size: clamp(11px, 2.9vw, 14px) !important;
    line-height: 1.14 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .sale-inventory-metric .sale-metric-head {
    display: block !important;
    padding-right: 30px !important;
  }

  .sale-inventory-metric .sale-help-label i {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
  }

  .sale-inventory-total {
    width: 100% !important;
    margin-top: 16px !important;
    gap: 4px !important;
    font-size: clamp(8px, 2.6vw, 14px) !important;
    line-height: 1.05 !important;
  }

  .sale-included-total,
  .sale-store-total {
    gap: 6px !important;
    font-size: clamp(22px, 6.6vw, 34px) !important;
    line-height: 1.05 !important;
  }

  .sale-metrics small,
  .sale-inventory-metric em {
    font-size: clamp(9px, 2.55vw, 12px) !important;
    line-height: 1.2 !important;
  }

  .sale-live-compact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .sale-live-card {
    min-width: 0 !important;
  }

  .sale-live-card-head {
    min-width: 0 !important;
    padding-right: 86px !important;
  }

  .sale-live-status {
    top: 12px !important;
    right: 12px !important;
    max-width: 78px !important;
    font-size: 10px !important;
  }

  .sale-live-card-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sale-live-products-line {
    font-size: clamp(7px, 2.35vw, 12px) !important;
  }

  .sale-price-table-wrap {
    width: 100% !important;
    overflow: visible !important;
  }

  .sale-price-table,
  .sale-price-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sale-price-table thead {
    display: none !important;
  }

  .sale-price-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    margin: 0 0 14px !important;
    background: var(--paper) !important;
  }

  .sale-price-table td {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .sale-price-table td[data-label="Категория"],
  .sale-price-table td[data-label="На складах"] {
    grid-column: 1 / -1 !important;
  }

  .sale-price-table td.has-mobile-label .sale-mobile-field-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .sale-price-table input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-mobile-field-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell,
  .sale-price-table tr.sale-cart-enabled td[data-label="Цена корзины"] .sale-cart-price-cell {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    display: inline-grid !important;
    grid-template-columns: auto !important;
    gap: 0 !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled,
  .sale-price-table tr.sale-cart-enabled td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled {
    display: contents !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled .sale-cart-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-enabled input[data-sale-field="cartPrice"] {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 8px !important;
  }

  .sale-price-table td[data-label="Цена корзины"] .sale-cart-price-cell.is-disabled input[data-sale-field="cartPrice"] {
    display: none !important;
  }

  .sale-cart-toggle span {
    width: 52px !important;
    height: 30px !important;
  }

  .sale-stock-inline {
    justify-content: flex-start !important;
    gap: 6px !important;
    font-size: clamp(10px, 3vw, 18px) !important;
    line-height: 1.05 !important;
  }

  .sale-toggle-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sale-report-tab-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .sale-toast-stack {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: none !important;
  }

  .sale-metrics {
    gap: 8px !important;
  }

  .sale-metrics > .sale-metric-card,
  .sale-metrics > div {
    min-height: 112px !important;
    padding: 11px 9px !important;
  }

  .sale-inventory-total {
    font-size: clamp(7px, 2.3vw, 11px) !important;
    gap: 3px !important;
  }

  .sale-included-total,
  .sale-store-total {
    font-size: clamp(20px, 6.2vw, 30px) !important;
  }

  .sale-price-table tr {
    gap: 11px !important;
    padding: 14px 12px !important;
  }

  .sale-stock-inline {
    font-size: clamp(11px, 3.2vw, 17px) !important;
    gap: 4px !important;
  }
}

@media (max-width: 390px) {
  .sale-inventory-total {
    font-size: 7px !important;
  }

  .sale-stock-inline {
    font-size: 10px !important;
  }
}

/* sale final pixel guard 2026-05-30-10 */
.sale-tip-popover {
  box-sizing: border-box !important;
}

@media (max-width: 860px) {
  .sale-tip-popover {
    left: max(14px, env(safe-area-inset-left, 0px)) !important;
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* app chrome sticky header pass 2026-05-31 */
.app-page .main-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 35;
  backdrop-filter: blur(18px);
}

.toolbar-widgets,
.toolbar-actions {
  min-width: 0;
}

.toolbar-widgets {
  flex: 1 1 auto;
}

.toolbar-actions {
  flex: 0 1 auto;
}

@media (max-width: 1420px) and (min-width: 861px) {
  .main-toolbar {
    gap: 10px;
    padding-inline: 20px;
  }

  .toolbar-widgets,
  .toolbar-actions {
    gap: 8px;
  }

  .toolbar-widget,
  .toolbar-balance,
  .toolbar-support {
    padding-inline: 10px;
  }

  .topup-button {
    padding-inline: 16px;
  }

  .toolbar-user {
    width: 42px;
    min-width: 42px;
    justify-content: center;
    overflow: hidden;
    padding-inline: 0;
    font-size: 0;
  }

  .toolbar-user::before {
    margin: 0;
  }
}

@media (max-width: 1260px) and (min-width: 861px) {
  .time-widget {
    display: none;
  }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .today-widget {
    display: none;
  }
}

@media (max-width: 860px) {
  .app-page .mobile-app-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 90 !important;
    flex-wrap: nowrap;
    backdrop-filter: blur(18px);
  }

  .app-page .app-frame {
    padding-top: 64px;
  }

  .mobile-app-bar .brand-row {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-app-actions {
    flex: 0 0 auto;
    min-width: 0;
  }

  .mobile-balance-top {
    max-width: min(132px, 32vw);
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .mobile-app-bar {
    gap: 8px;
    padding-inline: 10px;
  }

  .mobile-balance-top {
    max-width: 104px;
    padding-inline: 10px;
  }
}

/* app chrome fixed header correction 2026-05-31 */
@media (min-width: 861px) {
  .app-page .main-toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 272px;
    right: 0;
    width: auto;
    margin: 0;
    z-index: 80;
    backdrop-filter: blur(18px);
  }

  .app-page .app-main {
    padding-top: 87px;
  }

}

@media (max-width: 980px) and (min-width: 861px) {
  .app-page .main-toolbar {
    left: 244px;
  }
}

@media (max-width: 1420px) and (min-width: 861px) {
  .app-page .toolbar-user {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    font-size: 0;
  }

  .app-page .toolbar-user::before {
    width: 20px;
    height: 20px;
    margin: 0;
  }
}

@media (max-width: 860px) {
  .app-page .mobile-app-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 35 !important;
  }
}

/* profile icon alignment correction 2026-05-31 */
.app-page .toolbar-user::before {
  width: 22px;
  height: 22px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230e1828' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='4.25'/%3E%3Cpath d='M4.75 21a7.25 7.25 0 0 1 14.5 0'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.app-page .toolbar-user:empty {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.app-page .toolbar-user:empty::before {
  margin: 0;
}

/* real profile svg icon 2026-05-31 */
.app-page .toolbar-user::before {
  content: none !important;
  display: none !important;
}

.app-page .toolbar-user {
  min-height: 42px;
}

.app-page .toolbar-user-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-page .toolbar-user-name {
  display: inline-block;
}

.app-page .toolbar-user.is-icon-only {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.app-page .toolbar-user.is-icon-only .toolbar-user-name {
  display: none;
}

@media (max-width: 1420px) and (min-width: 861px) {
  .app-page .toolbar-user {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    display: inline-grid;
    place-items: center;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
  }

  .app-page .toolbar-user-name {
    display: none;
  }
}

/* mobile sidebar first-paint guard 2026-05-31 */
@media (max-width: 860px) {
  .app-page:not(.sidebar-open) .sidebar-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .app-page:not(.sidebar-ready) .sidebar-overlay,
  .app-page:not(.sidebar-ready) .app-sidebar {
    transition: none !important;
  }

  .app-page:not(.sidebar-open) .app-sidebar {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(calc(-100% - 24px), 0, 0) !important;
  }

  .app-page.sidebar-ready .sidebar-overlay {
    transition: opacity 0.2s ease;
  }

  .app-page.sidebar-ready .app-sidebar {
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .app-page.sidebar-open .app-sidebar {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 0s;
  }
}

/* notifications adaptive pass 2026-05-31 */
.notification-prompt,
.notification-page {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.notification-page {
  align-items: stretch;
}

.notification-page .notification-hero {
  min-height: clamp(168px, 12vw, 214px);
  align-content: center;
}

.notification-page .notification-hero-main {
  align-items: center;
}

.notification-page .notification-hero-copy h1,
.notification-page .notification-hero-copy p {
  max-width: min(760px, 100%);
}

.notification-page .notification-control-hero .notification-hero-copy p {
  max-width: none;
}

.notification-page .notification-quick-panel {
  grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
  border-radius: 24px;
}

.notification-page .notification-quick-actions {
  align-items: center;
  max-width: 100%;
}

.notification-page .notification-feed-panel {
  display: grid;
  gap: 16px;
}

.notification-page .notification-feed-panel > .notification-filter-tabs {
  margin-bottom: 0;
}

.notification-page .notification-feed-head {
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 360px);
  align-items: end;
  margin-bottom: 0;
}

.notification-page .notification-feed-search {
  align-self: end;
}

.notification-page .notification-feed-main {
  grid-template-columns: 52px minmax(0, 1fr) minmax(148px, max-content);
}

.notification-page .notification-feed-row time {
  justify-self: end;
  text-align: right;
}

.notification-page .notification-settings-tabs,
.notification-page .notification-layout,
.notification-page .notification-ios-guide-card {
  width: 100%;
}

@media (max-width: 860px) {
  .notification-prompt,
  .notification-page {
    width: 100%;
    max-width: 100%;
  }

  .notification-prompt {
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: start;
    gap: 10px 8px;
    padding: 12px;
  }

  .notification-prompt > div {
    grid-column: 1;
    min-width: 0;
  }

  .notification-prompt .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .notification-prompt-close {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 36px;
    height: 36px;
  }

  .notification-page {
    gap: 14px;
  }

  .notification-page .notification-hero {
    min-height: auto;
  }

  .notification-page .notification-quick-panel,
  .notification-page .notification-feed-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-page .notification-quick-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .notification-page .notification-feed-panel {
    gap: 14px;
    padding: 16px;
  }

  .notification-page .notification-feed-search {
    justify-self: stretch;
    width: 100%;
  }

  .notification-page .notification-feed-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .notification-page .notification-feed-main {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .notification-page .notification-feed-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .notification-page .notification-feed-copy strong {
    font-size: 16px;
    line-height: 1.22;
  }

  .notification-page .notification-feed-copy small {
    font-size: 13px;
    line-height: 1.35;
  }

  .notification-page .notification-feed-row time {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    font-size: 12px;
    white-space: normal;
  }

  .notification-page .notification-feed-actions {
    padding-left: 56px;
  }

  .notification-detail-head {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }

  .notification-detail-head .notification-feed-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .notification-detail-head h1 {
    margin-top: 2px;
    font-size: 24px;
  }

  .notification-detail-body {
    padding: 14px;
    border-radius: 16px;
    color: #111111;
    font-size: 14px;
    font-weight: 400;
  }

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

  .notification-detail-grid > div {
    padding: 12px;
    border-radius: 14px;
  }

  .notification-detail-grid > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .notification-detail-grid span {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .notification-detail-grid strong {
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.2;
  }

  .notification-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* notification popover live dot scrolls with the feed 2026-06-02 */
.notification-popover .notification-popover-live-corner {
  top: 22px !important;
  right: 22px !important;
  pointer-events: none;
}

@media (max-width: 860px) {
  .notification-popover .notification-popover-live-corner {
    top: 22px !important;
  }
}

/* public landing page 2026-06-03 */
.landing-root {
  scroll-behavior: smooth;
}

.landing-page {
  min-height: 100%;
  color: var(--theme-text);
  background:
    linear-gradient(120deg, rgb(255 255 255 / 0.96), rgb(246 252 249 / 0.96) 46%, rgb(238 246 255 / 0.9)),
    #f7fbf9;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.landing-page::selection {
  color: var(--theme-ink);
  background: rgb(var(--theme-mint-rgb) / 0.35);
}

.landing-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.landing-sheet,
.landing-sweep {
  position: absolute;
  display: block;
  will-change: transform, border-radius, opacity;
}

.landing-sheet-left {
  width: min(56vw, 780px);
  height: min(62vw, 820px);
  left: -18vw;
  top: -12vw;
  border-radius: 0 0 58% 0;
  background:
    radial-gradient(circle at 68% 44%, rgb(var(--theme-mint-rgb) / 0.42), transparent 46%),
    linear-gradient(145deg, rgb(255 255 255 / 0.98), rgb(202 249 229 / 0.88));
  box-shadow: 0 56px 150px rgb(37 106 74 / 0.18);
  animation: landing-liquid-left 18s ease-in-out infinite;
}

.landing-sheet-right {
  width: min(47vw, 680px);
  height: min(49vw, 700px);
  right: -12vw;
  bottom: -16vw;
  border-radius: 58% 0 0 0;
  background:
    radial-gradient(circle at 34% 34%, rgb(134 210 255 / 0.46), transparent 48%),
    linear-gradient(145deg, rgb(var(--theme-mint-rgb) / 0.62), rgb(176 211 255 / 0.42));
  box-shadow: 0 56px 150px rgb(var(--theme-mint-shadow-rgb) / 0.25);
  animation: landing-liquid-right 20s ease-in-out infinite;
}

.landing-sweep-one {
  width: 72vw;
  height: 9vw;
  min-height: 82px;
  left: 18vw;
  top: 18vh;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(var(--theme-mint-rgb) / 0.28), rgb(135 212 255 / 0.16), transparent);
  transform: rotate(-12deg);
  animation: landing-sweep 16s ease-in-out infinite;
}

.landing-sweep-two {
  width: 62vw;
  height: 7vw;
  min-height: 64px;
  left: 26vw;
  bottom: 14vh;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(129 211 255 / 0.24), rgb(var(--theme-mint-rgb) / 0.18), transparent);
  transform: rotate(9deg);
  animation: landing-sweep 18s ease-in-out 2s infinite reverse;
}

@keyframes landing-liquid-left {
  0%,
  100% {
    border-radius: 0 0 58% 0;
    opacity: 0.92;
    transform: translate3d(0, 0, 0) scale(1);
  }

  35% {
    border-radius: 0 0 74% 22%;
    opacity: 0.72;
    transform: translate3d(70px, 34px, 0) scale(1.08, 0.92);
  }

  68% {
    border-radius: 0 0 42% 14%;
    opacity: 0.86;
    transform: translate3d(32px, 82px, 0) scale(0.92, 1.14);
  }
}

@keyframes landing-liquid-right {
  0%,
  100% {
    border-radius: 58% 0 0 0;
    opacity: 0.82;
    transform: translate3d(0, 0, 0) scale(1);
  }

  32% {
    border-radius: 36% 0 0 28%;
    opacity: 0.68;
    transform: translate3d(-66px, -42px, 0) scale(1.12, 0.9);
  }

  70% {
    border-radius: 78% 0 0 16%;
    opacity: 0.9;
    transform: translate3d(-22px, -82px, 0) scale(0.9, 1.18);
  }
}

@keyframes landing-sweep {
  0%,
  100% {
    opacity: 0.2;
    transform: translate3d(-4vw, 0, 0) rotate(-12deg) scaleX(0.9);
  }

  50% {
    opacity: 0.48;
    transform: translate3d(7vw, 28px, 0) rotate(-7deg) scaleX(1.08);
  }
}

.landing-header,
.landing-hero,
.landing-section,
.landing-footer {
  position: relative;
  z-index: 1;
}

.landing-hero,
.landing-section {
  scroll-margin-top: 126px;
}

.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 8;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 24px clamp(22px, 5vw, 76px);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0));
  backdrop-filter: blur(8px);
}

.landing-brand {
  display: inline-grid;
  grid-template-columns: 62px auto;
  align-items: center;
  gap: 14px;
  color: var(--theme-ink);
  font-weight: 600;
  line-height: 1;
}

.landing-brand strong {
  display: block;
  font-size: 20px;
  letter-spacing: 0.04em;
}

.landing-brand small {
  display: block;
  margin-top: 7px;
  color: #586575;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.landing-logo-mark {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 46px rgb(var(--theme-shadow-soft-rgb) / 0.16);
  overflow: hidden;
  animation: landing-logo-float 5.4s ease-in-out infinite;
}

.landing-logo-mark img {
  position: absolute;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.landing-logo-green {
  opacity: 0;
  animation: landing-logo-pulse 6.8s ease-in-out infinite;
}

@keyframes landing-logo-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes landing-logo-pulse {
  0%,
  72%,
  100% {
    opacity: 0;
  }

  78%,
  88% {
    opacity: 1;
  }
}

.landing-header-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.3vw, 34px);
}

.landing-header-links a,
.landing-login-link {
  color: #66717f;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s ease;
}

.landing-header-links a:hover,
.landing-login-link:hover {
  color: var(--theme-ink);
  transform: translateY(-2px);
}

.landing-login-link {
  justify-self: end;
  min-width: 108px;
  min-height: 46px;
  display: inline-grid;
  place-items: center;
  padding: 0 22px;
  border-radius: 999px;
  color: var(--theme-ink);
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 18px 45px rgb(var(--theme-shadow-soft-rgb) / 0.12);
}

.landing-side-nav {
  position: fixed;
  z-index: 9;
  top: 50%;
  right: clamp(4px, 0.55vw, 10px);
  display: grid;
  gap: 7px;
  width: 58px;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.88), rgb(219 249 235 / 0.58));
  backdrop-filter: blur(18px);
  overflow: visible;
  transform: translateY(-50%);
  box-shadow:
    0 26px 70px rgb(var(--theme-shadow-soft-rgb) / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.88);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.landing-side-nav::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgb(var(--theme-mint-rgb) / 0.18),
    rgb(117 201 246 / 0.32),
    rgb(255 179 90 / 0.24),
    rgb(var(--theme-mint-rgb) / 0.18)
  );
  transform: translateX(-50%);
}

.landing-side-nav:hover,
.landing-side-nav:focus-within {
  transform: translate(-3px, -50%);
  box-shadow:
    0 32px 82px rgb(var(--theme-shadow-soft-rgb) / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.92);
}

.landing-side-nav a {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.22);
  border-radius: 15px;
  color: var(--theme-ink);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.96), rgb(243 250 247 / 0.88));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  box-shadow:
    0 16px 36px rgb(var(--theme-shadow-soft-rgb) / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.96);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-side-nav a:hover,
.landing-side-nav a:focus-visible {
  transform: translateX(-7px);
  border-color: rgb(var(--theme-mint-rgb) / 0.6);
  box-shadow:
    0 20px 46px rgb(var(--theme-shadow-soft-rgb) / 0.18),
    0 0 0 6px rgb(var(--theme-mint-rgb) / 0.13),
    inset 0 1px 0 rgb(255 255 255 / 0.98);
}

.landing-side-index {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 24px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 0.9);
  border-radius: 999px;
  color: rgb(var(--theme-mint-rgb));
  background: var(--theme-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 22px rgb(var(--theme-shadow-soft-rgb) / 0.18);
}

.landing-side-icon,
.landing-side-label {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.landing-side-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--theme-ink);
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.9), rgb(117 201 246 / 0.74));
  box-shadow: 0 12px 24px rgb(var(--theme-mint-rgb) / 0.22);
}

.landing-side-nav a:nth-child(2) .landing-side-icon {
  background: linear-gradient(135deg, rgb(117 201 246 / 0.85), rgb(255 255 255 / 0.8));
}

.landing-side-nav a:nth-child(3) .landing-side-icon {
  background: linear-gradient(135deg, rgb(255 179 90 / 0.72), rgb(var(--theme-mint-rgb) / 0.78));
}

.landing-side-nav a:nth-child(4) .landing-side-icon {
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.8), rgb(255 255 255 / 0.84));
}

.landing-side-nav a:nth-child(5) .landing-side-icon {
  background: linear-gradient(135deg, rgb(117 201 246 / 0.72), rgb(255 179 90 / 0.68));
}

.landing-side-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-side-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  max-width: 160px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #fff;
  background: rgb(var(--theme-ink-rgb) / 0.92);
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate(10px, -50%);
  box-shadow: 0 18px 38px rgb(var(--theme-shadow-soft-rgb) / 0.2);
  pointer-events: none;
}

.landing-side-nav a:hover .landing-side-label,
.landing-side-nav a:focus-visible .landing-side-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.landing-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: 128px clamp(22px, 7vw, 132px) 86px clamp(22px, 8vw, 150px);
  overflow: hidden;
}

.landing-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 620px;
}

.landing-kicker,
.landing-section-label {
  color: var(--theme-mint-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.landing-section > .landing-section-label {
  margin-top: clamp(22px, 2.6vw, 42px);
}

.landing-hero h1 {
  margin: 18px 0 20px;
  color: var(--theme-ink);
  font-size: clamp(78px, 9vw, 142px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0;
}

.landing-hero-text {
  max-width: 560px;
  color: #5f6976;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.45;
}

.landing-hero-accent {
  display: block;
  margin-top: 2px;
  color: #0b315c;
  font-weight: 800;
}

.landing-hero-actions,
.landing-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
}

.landing-primary-action,
.landing-secondary-action {
  min-height: 58px;
  display: inline-grid;
  place-items: center;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.landing-primary-action {
  color: #fff;
  background: linear-gradient(135deg, var(--theme-mint), #51c98b);
  box-shadow: 0 22px 50px rgb(var(--theme-mint-shadow-rgb) / 0.32);
}

.landing-secondary-action {
  color: var(--theme-ink);
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 18px 42px rgb(var(--theme-shadow-soft-rgb) / 0.1);
}

.landing-primary-action:hover,
.landing-secondary-action:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgb(var(--theme-shadow-soft-rgb) / 0.16);
}

.landing-primary-action:hover {
  box-shadow: 0 30px 64px rgb(var(--theme-mint-shadow-rgb) / 0.38);
}

.landing-hero-typing {
  position: absolute;
  z-index: 0;
  left: clamp(22px, 8vw, 150px);
  bottom: clamp(52px, 8vh, 108px);
  width: min(74vw, 980px);
  min-height: clamp(70px, 9vw, 132px);
  opacity: 0.8;
  pointer-events: none;
}

.landing-hero-typing-word {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: 0;
  overflow: hidden;
  color: rgb(var(--theme-ink-rgb) / 0.09);
  font-size: clamp(42px, 7vw, 116px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0;
  white-space: nowrap;
  animation: landing-typing-cycle 12s steps(18, end) infinite;
}

.landing-hero-typing-word.is-long {
  font-size: clamp(34px, 5.35vw, 84px);
}

.landing-hero-typing-word:nth-child(1) {
  animation-delay: 0s;
}

.landing-hero-typing-word:nth-child(2) {
  animation-delay: 4s;
}

.landing-hero-typing-word:nth-child(3) {
  animation-delay: 8s;
}

@keyframes landing-typing-cycle {
  0% {
    opacity: 0;
    max-width: 0;
  }

  3% {
    opacity: 1;
    max-width: 0;
  }

  8% {
    opacity: 1;
    max-width: 17ch;
  }

  12% {
    opacity: 1;
    max-width: 17ch;
  }

  18% {
    opacity: 1;
    max-width: 0;
  }

  20%,
  100% {
    opacity: 0;
    max-width: 0;
  }
}

@keyframes landing-typing-cursor {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.landing-product-stage {
  position: relative;
  z-index: 2;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.landing-product-stage::before {
  content: "";
  position: absolute;
  width: min(44vw, 560px);
  height: min(44vw, 560px);
  border-radius: 38% 62% 44% 56%;
  background: linear-gradient(145deg, rgb(255 255 255 / 0.78), rgb(var(--theme-mint-rgb) / 0.22));
  box-shadow: 0 40px 100px rgb(var(--theme-shadow-soft-rgb) / 0.12);
  animation: landing-stage-morph 12s ease-in-out infinite;
}

@keyframes landing-stage-morph {
  0%,
  100% {
    border-radius: 38% 62% 44% 56%;
    transform: rotate(-5deg) scale(1);
  }

  50% {
    border-radius: 58% 42% 62% 38%;
    transform: rotate(4deg) scale(1.04);
  }
}

.landing-device {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
  min-height: 420px;
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 34px;
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 40px 100px rgb(var(--theme-shadow-deep-rgb) / 0.18);
  backdrop-filter: blur(18px);
  overflow: hidden;
  animation: landing-device-float 7s ease-in-out infinite;
}

@keyframes landing-device-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(0, -14px, 0) rotate(1deg);
  }
}

.landing-device-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 22px 24px;
  border-bottom: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
}

.landing-device-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffba63;
}

.landing-device-top span:nth-child(2) {
  background: var(--theme-mint);
}

.landing-device-top span:nth-child(3) {
  background: #77a7ff;
}

.landing-device-top strong {
  margin-left: auto;
  color: #627080;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-device-body {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 16px;
  padding: 22px;
}

.landing-device-panel,
.landing-device-list {
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 16px 38px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-device-panel {
  display: grid;
  gap: 8px;
  padding: 20px;
}

.landing-device-panel-main {
  min-height: 168px;
}

.landing-device-panel small {
  color: #8a96a5;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-device-panel strong {
  color: var(--theme-ink);
  font-size: 34px;
  line-height: 1;
}

.landing-device-panel strong span,
.landing-device-panel strong em {
  display: block;
  font-style: normal;
}

.landing-device-panel strong span {
  margin-bottom: 5px;
  color: #7d8a99;
  font-size: 0.28em;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.landing-device-panel strong em {
  margin-top: 5px;
  color: #5f6976;
  font-size: 0.52em;
  font-weight: 800;
}

.landing-device-panel-main strong,
.landing-device-stock strong {
  font-size: clamp(30px, 3vw, 38px);
}

.landing-device-panel-sale {
  align-content: center;
  justify-items: start;
}

.landing-sale-status {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 0.95;
  text-transform: lowercase;
}

.landing-sale-status i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--theme-mint);
  box-shadow: 0 0 0 10px rgb(var(--theme-mint-rgb) / 0.16);
  animation: landing-online-dot 1.7s ease-in-out infinite;
  margin-top: 2px;
}

@keyframes landing-online-dot {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgb(var(--theme-mint-rgb) / 0.14);
  }

  50% {
    transform: scale(0.82);
    box-shadow: 0 0 0 16px rgb(var(--theme-mint-rgb) / 0.06);
  }
}

.landing-device-stock {
  grid-column: 1 / -1;
  min-height: 232px;
}

.landing-device-stock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.landing-device-stock-head span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #e6ebef;
  border-radius: 999px;
  background: #fff;
  color: #65717f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  box-shadow: 0 9px 18px rgb(15 23 42 / 0.07);
  white-space: nowrap;
}

.landing-device-note {
  color: #7d8a99;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.18;
}

.landing-device-note {
  margin-top: -2px;
}

.landing-stock-stickers {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 2px;
}

.landing-stock-sticker {
  position: relative;
  display: inline-grid;
  gap: 3px;
  padding: 8px 11px;
  border: 1px solid #e6ebef;
  border-radius: 14px;
  background: #fff;
  font-weight: 900;
  line-height: 1.05;
  box-shadow: 0 12px 22px rgb(15 23 42 / 0.08);
  overflow: hidden;
}

.landing-stock-sticker::before {
  content: none;
}

.landing-stock-sticker em {
  color: #6f7b88;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.landing-stock-sticker b {
  color: var(--theme-ink);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.landing-stock-sticker-count {
  background: #fff;
  box-shadow: 0 12px 22px rgb(15 23 42 / 0.08);
  transform: rotate(-1deg);
}

.landing-stock-sticker-count b {
  color: var(--theme-ink);
}

.landing-stock-sticker-check {
  background: #fff;
  box-shadow: 0 12px 22px rgb(15 23 42 / 0.08);
  transform: rotate(1deg);
}

.landing-stock-sticker-manual {
  grid-template-columns: none;
  align-items: center;
  background: #fff;
  box-shadow: 0 12px 22px rgb(15 23 42 / 0.08);
  transform: rotate(1deg);
}

.landing-stock-sticker-manual em,
.landing-stock-sticker-manual b {
  grid-column: auto;
}

.landing-stock-sticker-manual b {
  color: var(--theme-ink);
}

.landing-stock-sticker-wb {
  width: 34px;
  min-width: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-1deg);
}

.landing-stock-sticker-wb::before {
  display: none;
}

.landing-wb-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #cb11ab, #7a1fd1);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: none;
}

.landing-sale-check {
  margin-top: 4px;
  transform: rotate(-1deg);
}

.landing-count-up {
  display: inline-block;
  min-width: 68px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.landing-progress {
  position: relative;
  width: 100%;
  height: 10px;
  align-self: end;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.08);
  overflow: hidden;
}

.landing-progress i {
  position: relative;
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--theme-mint), #9ddfb9 52%, var(--theme-mint)),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.18) 0 8px, transparent 8px 16px);
  animation: landing-progress 3.8s ease-in-out infinite;
}

.landing-progress-live {
  height: 12px;
  box-shadow: inset 0 0 0 1px rgb(var(--theme-ink-rgb) / 0.03);
}

.landing-progress-live::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 44%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.78), transparent);
  mix-blend-mode: soft-light;
  animation: landing-progress-sweep 2.4s ease-in-out infinite;
}

.landing-progress-wide i {
  animation-duration: 4.4s;
}

@keyframes landing-progress {
  0%,
  100% {
    width: 54%;
  }

  55% {
    width: 88%;
  }
}

@keyframes landing-progress-sweep {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(260%);
  }
}

.landing-device-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 18px;
}

.landing-device-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5f6976;
  font-size: 15px;
  font-weight: 600;
}

.landing-device-list i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--theme-mint);
  box-shadow: 0 0 0 8px rgb(var(--theme-mint-rgb) / 0.13);
  animation: landing-dot 2.8s ease-in-out infinite;
}

.landing-device-list span:nth-child(2) i {
  animation-delay: 0.45s;
}

.landing-device-list span:nth-child(3) i {
  animation-delay: 0.9s;
}

@keyframes landing-dot {
  0%,
  100% {
    transform: scale(0.78);
  }

  50% {
    transform: scale(1.06);
  }
}

.landing-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 34px;
  height: 34px;
  border-right: 2px solid rgb(var(--theme-ink-rgb) / 0.28);
  border-bottom: 2px solid rgb(var(--theme-ink-rgb) / 0.28);
  transform: translateX(-50%) rotate(45deg);
  animation: landing-cue 2.2s ease-in-out infinite;
}

@keyframes landing-cue {
  0%,
  100% {
    opacity: 0.38;
    margin-bottom: 0;
  }

  50% {
    opacity: 0.82;
    margin-bottom: -8px;
  }
}

.landing-section {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(70px, 10vw, 130px) clamp(22px, 8vw, 150px);
  border-top: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
}

@media (max-width: 1680px) and (min-width: 861px) {
  .landing-section {
    grid-template-columns: minmax(104px, 144px) minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 32px);
  }
}

.landing-section-copy {
  max-width: 880px;
}

.landing-about-main {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.5fr);
  gap: clamp(20px, 2.6vw, 38px);
  align-items: end;
}

.landing-section h2 {
  color: var(--theme-ink);
  font-size: clamp(34px, 5vw, 74px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.landing-section p {
  max-width: 860px;
  color: #65717f;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.5;
}

.landing-about-subtitle {
  max-width: 820px;
  margin-top: 18px;
  color: #0b315c;
  font-size: clamp(21px, 2.4vw, 31px);
  font-weight: 800;
  line-height: 1.18;
}

.landing-about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.landing-about-tags span {
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0 17px;
  border-radius: 999px;
  background: #fff;
  color: var(--theme-ink);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 14px 28px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-about-stack {
  position: relative;
  justify-self: start;
  width: min(100%, 440px);
  min-height: 360px;
}

.landing-about-stack div,
.landing-about-console,
.landing-about-console-grid div {
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  background: rgb(255 255 255 / 0.76);
  box-shadow: 0 28px 70px rgb(var(--theme-shadow-soft-rgb) / 0.12);
  backdrop-filter: blur(14px);
}

.landing-about-stack div {
  --stack-rotate: 0deg;
  --stack-x: 0px;
  --stack-drop-delay: 0s;
  position: absolute;
  width: min(310px, calc(100% - 12px));
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: 26px;
  opacity: 0;
  transform: translate3d(var(--stack-x), -190px, 0) rotate(calc(var(--stack-rotate) - 8deg)) scale(0.94);
  transform-origin: center;
  will-change: opacity, transform;
}

.landing-about.is-stack-in .landing-about-stack div {
  animation-duration: 0.98s, 6.6s;
  animation-timing-function: cubic-bezier(0.16, 0.98, 0.2, 1), ease-in-out;
  animation-delay: var(--stack-drop-delay), calc(var(--stack-drop-delay) + 1.08s);
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
}

.landing-about-stack div:nth-child(1) {
  left: 58px;
  right: auto;
  top: 0;
  --stack-rotate: -3deg;
  --stack-drop-delay: 0.02s;
  animation-name: landing-stack-card-brick, landing-stack-float-one;
}

.landing-about-stack div:nth-child(2) {
  left: 0;
  right: auto;
  top: 118px;
  --stack-rotate: 2deg;
  --stack-drop-delay: 0.26s;
  animation-name: landing-stack-card-brick, landing-stack-float-two;
}

.landing-about-stack div:nth-child(3) {
  left: 78px;
  right: auto;
  top: 236px;
  --stack-rotate: -1deg;
  --stack-drop-delay: 0.5s;
  animation-name: landing-stack-card-brick, landing-stack-float-three;
}

@keyframes landing-stack-card-brick {
  0% {
    opacity: 0;
    transform: translate3d(var(--stack-x), -190px, 0) rotate(calc(var(--stack-rotate) - 8deg)) scale(0.94);
  }

  48% {
    opacity: 1;
    transform: translate3d(var(--stack-x), 20px, 0) rotate(calc(var(--stack-rotate) + 2.4deg)) scale(1.025);
  }

  58% {
    transform: translate3d(var(--stack-x), -9px, 0) rotate(calc(var(--stack-rotate) - 1.1deg)) scale(0.992);
  }

  70% {
    transform: translate3d(var(--stack-x), 6px, 0) rotate(calc(var(--stack-rotate) + 0.6deg)) scale(1.006);
  }

  82% {
    transform: translate3d(var(--stack-x), -3px, 0) rotate(calc(var(--stack-rotate) - 0.2deg)) scale(0.998);
  }

  100% {
    opacity: 1;
    transform: translate3d(var(--stack-x), 0, 0) rotate(var(--stack-rotate)) scale(1);
  }
}

@keyframes landing-stack-float-one {
  0%,
  100% {
    transform: translate3d(var(--stack-x), 0, 0) rotate(var(--stack-rotate)) scale(1);
  }

  40% {
    transform: translate3d(calc(var(--stack-x) + 5px), -8px, 0) rotate(calc(var(--stack-rotate) + 0.7deg)) scale(1.01);
  }

  72% {
    transform: translate3d(calc(var(--stack-x) - 4px), 4px, 0) rotate(calc(var(--stack-rotate) - 0.45deg)) scale(0.998);
  }
}

@keyframes landing-stack-float-two {
  0%,
  100% {
    transform: translate3d(var(--stack-x), 0, 0) rotate(var(--stack-rotate)) scale(1);
  }

  34% {
    transform: translate3d(calc(var(--stack-x) - 6px), 6px, 0) rotate(calc(var(--stack-rotate) - 0.55deg)) scale(1.006);
  }

  76% {
    transform: translate3d(calc(var(--stack-x) + 4px), -7px, 0) rotate(calc(var(--stack-rotate) + 0.5deg)) scale(1.01);
  }
}

@keyframes landing-stack-float-three {
  0%,
  100% {
    transform: translate3d(var(--stack-x), 0, 0) rotate(var(--stack-rotate)) scale(1);
  }

  38% {
    transform: translate3d(calc(var(--stack-x) + 4px), 7px, 0) rotate(calc(var(--stack-rotate) + 0.45deg)) scale(1.008);
  }

  70% {
    transform: translate3d(calc(var(--stack-x) - 5px), -5px, 0) rotate(calc(var(--stack-rotate) - 0.65deg)) scale(1);
  }
}

.landing-about-stack strong,
.landing-about-console-grid strong {
  display: block;
  color: var(--theme-ink);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
}

.landing-about-stack span,
.landing-about-console-grid span {
  display: block;
  color: #66717f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.landing-about-stack div:first-child strong {
  font-size: clamp(28px, 2.35vw, 38px);
  white-space: nowrap;
}

.landing-about-stack div:nth-child(2) strong {
  font-size: clamp(29px, 2.25vw, 38px);
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.landing-about-console-grid strong span {
  display: inline;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.landing-about-tertiary {
  align-items: center;
  gap: 13px;
}

.landing-about-tertiary.is-online {
  display: inline-flex;
}

.landing-about-tertiary.is-online::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 0.16em;
  border-radius: 50%;
  background: var(--theme-mint);
  box-shadow: 0 0 0 10px rgb(var(--theme-mint-rgb) / 0.16);
  animation: landing-online-dot 1.7s ease-in-out infinite;
}

.landing-about-console {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 22px;
  margin-top: 4px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 30px;
  overflow: hidden;
}

.landing-about-tabs,
.landing-about-statuses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.landing-about-console-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 12px 18px;
  justify-content: stretch;
  align-items: flex-start;
}

.landing-about-tabs,
.landing-about-statuses {
  min-width: 0;
}

.landing-about-tabs {
  flex: none;
  justify-content: flex-start;
}

.landing-about-statuses {
  flex: none;
  justify-self: end;
  max-width: min(100%, 520px);
  justify-content: flex-end;
}

.landing-about-tabs button,
.landing-about-statuses span {
  max-width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--theme-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgb(var(--theme-shadow-soft-rgb) / 0.07);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.landing-about-tabs button:hover,
.landing-about-tabs button:focus-visible {
  transform: translateY(-2px);
}

.landing-about-tabs button.is-active {
  background: rgb(var(--theme-mint-rgb) / 0.18);
  color: #145f3f;
}

.landing-about-statuses span::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b7c2cb;
  box-shadow: 0 0 0 7px rgb(183 194 203 / 0.16);
}

.landing-about-console.is-ready .landing-about-status::before {
  background: var(--theme-mint);
  box-shadow: 0 0 0 7px rgb(var(--theme-mint-rgb) / 0.14);
}

.landing-about-statuses span:last-child::before {
  background: var(--theme-mint);
  box-shadow: 0 0 0 7px rgb(var(--theme-mint-rgb) / 0.14);
}

.landing-about-progress {
  position: relative;
  display: block;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.08);
}

.landing-about-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--theme-mint), #9ee8bd, rgb(129 211 255));
}

.landing-about-console-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.12fr) minmax(220px, 0.94fr) minmax(260px, 1fr);
  gap: 16px;
}

.landing-about-console-grid div {
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 22px;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-about-console-grid div:last-child span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.landing-about-console-grid span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.landing-about-console-grid div:first-child strong {
  max-width: 100%;
  font-size: clamp(34px, 8.2cqw, 58px);
  font-weight: 900;
  letter-spacing: -0.035em;
  white-space: nowrap;
  overflow: visible;
}

@media (max-width: 1480px) and (min-width: 1181px) {
  .landing-about-main {
    grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.42fr);
    gap: clamp(18px, 2vw, 28px);
    align-items: center;
  }

  .landing-about-stack {
    width: min(100%, 360px);
    min-height: 326px;
  }

  .landing-about-stack div {
    width: min(286px, calc(100% - 10px));
    min-height: 104px;
    padding: 22px;
  }

  .landing-about-stack div:nth-child(1) {
    left: 42px;
  }

  .landing-about-stack div:nth-child(2) {
    top: 108px;
  }

  .landing-about-stack div:nth-child(3) {
    left: 56px;
    top: 216px;
  }
}

@media (max-width: 1180px) {
  .landing-about-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-about-console-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .landing-about-statuses {
    justify-self: start;
    justify-content: flex-start;
    max-width: 100%;
  }

  .landing-about-stack {
    justify-self: center;
  }

  .landing-about-console-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-about-console-grid div:first-child {
    grid-column: 1 / -1;
  }

  .landing-about-console-grid div:first-child strong {
    font-size: clamp(38px, 7.5cqw, 58px);
  }
}

@media (max-width: 1680px) and (min-width: 1181px) {
  .landing-about-console-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .landing-about-statuses {
    justify-self: start;
    justify-content: flex-start;
    max-width: 100%;
  }

  .landing-about-console-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  }

  .landing-about-console-grid div:first-child strong {
    font-size: clamp(42px, 6.2cqw, 58px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-about-stack div {
    opacity: 1;
    transform: translate3d(var(--stack-x), 0, 0) rotate(var(--stack-rotate)) scale(1);
    animation: none;
  }
}

.landing-metrics,
.landing-module-flow,
.landing-module-grid,
.landing-sale-module-showcase,
.landing-module-pair,
.landing-flow-head,
.landing-flow-line,
.landing-flow-actions,
.landing-extra-tariffs,
.landing-game-board {
  grid-column: 2;
}

.landing-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.landing-metrics div,
.landing-module-grid article,
.landing-flow-line div {
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 20px 54px rgb(var(--theme-shadow-soft-rgb) / 0.08);
  backdrop-filter: blur(12px);
}

.landing-metrics div {
  min-height: 142px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 22px;
  border-radius: 28px;
}

.landing-metrics strong {
  color: var(--theme-ink);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.05;
}

.landing-metrics span {
  color: #66717f;
  font-size: 15px;
  font-weight: 600;
}

.landing-modules {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(233 249 241 / 0.42));
}

.landing-modules .landing-section-copy {
  max-width: 920px;
  padding-top: clamp(8px, 1vw, 16px);
}

.landing-modules .landing-section-copy h2 {
  margin-bottom: clamp(18px, 2vw, 30px);
  font-size: clamp(38px, 4vw, 76px);
  line-height: 1.04;
}

.landing-modules .landing-section-copy p {
  max-width: 900px;
  font-size: clamp(17px, 1.35vw, 23px);
}

.landing-module-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 30px;
  background: rgb(255 255 255 / 0.68);
  box-shadow: 0 22px 58px rgb(var(--theme-shadow-soft-rgb) / 0.08);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.landing-module-flow-line {
  position: absolute;
  left: 34px;
  right: 34px;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: rgb(9 36 67 / 0.06);
  transform: translateY(-50%);
  overflow: hidden;
}

.landing-module-flow-line i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248));
  animation: landing-module-flow-run 3.7s ease-in-out infinite;
}

.landing-module-flow div {
  position: relative;
  z-index: 1;
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 14px 32px rgb(var(--theme-shadow-soft-rgb) / 0.07);
}

.landing-module-flow strong {
  color: var(--theme-mint-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.landing-module-flow span {
  color: var(--theme-ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
}

@keyframes landing-module-flow-run {
  0% {
    transform: translateX(-110%);
  }

  48%,
  62% {
    transform: translateX(72%);
  }

  100% {
    transform: translateX(250%);
  }
}

.landing-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
}

.landing-module-grid article {
  position: relative;
  isolation: isolate;
  min-height: 312px;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.landing-module-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248));
  opacity: 0.9;
}

.landing-module-grid article:hover {
  transform: translateY(-10px);
  box-shadow: 0 34px 70px rgb(var(--theme-shadow-soft-rgb) / 0.14);
}

.landing-module-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-module-card-top span,
.landing-flow-line strong {
  color: var(--theme-mint-text);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.landing-module-card-top b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 0 12px;
  border-radius: 999px;
  background: rgb(236 250 243 / 0.92);
  color: var(--theme-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.landing-module-card-top i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgb(var(--theme-mint-rgb));
  box-shadow: 0 0 0 9px rgb(var(--theme-mint-rgb) / 0.12);
  animation: landing-online-dot 1.8s ease-in-out infinite;
}

.landing-module-grid h3 {
  color: var(--theme-ink);
  font-size: clamp(25px, 2.45vw, 36px);
  line-height: 1.08;
}

.landing-module-grid p {
  color: #66717f;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.42;
}

.landing-module-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: end;
  margin-top: auto;
}

.landing-module-card-tags em {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 11px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 24px rgb(var(--theme-shadow-soft-rgb) / 0.07);
  color: #66717f;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.landing-module-card::after {
  content: "";
  align-self: end;
  width: 100%;
  height: 8px;
  margin-top: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgb(var(--theme-mint-rgb)) 0 46%, rgb(180 235 218) 58%, rgb(119 206 248) 76%, transparent 76%),
    rgb(9 36 67 / 0.06);
  background-size: 130% 100%, 100% 100%;
  background-position: 0 0, 0 0;
  animation: landing-module-card-progress 4.2s ease-in-out infinite;
}

.landing-module-card-edit::after {
  animation-delay: 0.35s;
}

.landing-module-card-stock::after {
  animation-delay: 0.7s;
}

@keyframes landing-module-card-progress {
  0%,
  100% {
    background-position: -54% 0, 0 0;
  }

  55% {
    background-position: 0 0, 0 0;
  }
}

.landing-sale-module-showcase {
  position: relative;
  width: min(100%, 1240px);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(340px, 0.56fr);
  align-items: center;
  gap: clamp(20px, 2.4vw, 38px);
  margin-top: 10px;
  padding: clamp(24px, 3vw, 48px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: clamp(26px, 3vw, 40px);
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 28px 70px rgb(var(--theme-shadow-soft-rgb) / 0.12);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.landing-sale-module-showcase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248), rgb(255 179 90));
}

.landing-sale-module-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: clamp(14px, 1.6vw, 20px);
}

.landing-sale-module-copy h3 {
  max-width: 820px;
  color: var(--theme-ink);
  font-size: clamp(36px, 3.05vw, 54px);
  line-height: 1.03;
}

.landing-sale-heading-break {
  display: block;
}

.landing-sale-module-copy p {
  max-width: 590px;
  color: #66717f;
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 800;
  line-height: 1.38;
}

.landing-sale-module-warning {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  border: 1px solid rgb(255 179 90 / 0.32);
  border-radius: 22px;
  background: linear-gradient(135deg, rgb(255 244 225 / 0.96), rgb(255 255 255 / 0.88));
  color: #7a4312;
  box-shadow: 0 18px 42px rgb(255 179 90 / 0.16);
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 900;
  line-height: 1.25;
}

.landing-sale-module-warning::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: rgb(255 179 90);
  box-shadow: 0 0 0 8px rgb(255 179 90 / 0.15);
  transform: rotate(8deg);
}

.landing-sale-module-chips,
.landing-sale-process {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 10px;
}

.landing-sale-module-chips span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0 16px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 999px;
  background: #fff;
  color: var(--theme-ink);
  box-shadow: 0 12px 28px rgb(var(--theme-shadow-soft-rgb) / 0.07);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.landing-sale-module-chips i,
.landing-sale-process i {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.9), rgb(117 201 246 / 0.72));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.62), 0 8px 18px rgb(var(--theme-shadow-soft-rgb) / 0.08);
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
}

.landing-sale-module-chips i {
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  font-size: 10px;
}

.landing-sale-module-action {
  width: fit-content;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb)), rgb(119 219 168));
  color: #fff;
  box-shadow: 0 20px 48px rgb(var(--theme-mint-rgb) / 0.35);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.landing-sale-module-window {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 100%;
  max-width: 500px;
  justify-self: end;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 26px;
  background: rgb(255 255 255 / 0.88);
  box-shadow: 0 28px 68px rgb(var(--theme-shadow-soft-rgb) / 0.13);
  transform-origin: 52% 50%;
  animation: landing-sale-window-float 6.4s ease-in-out infinite;
  overflow: hidden;
}

@keyframes landing-sale-window-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.15deg);
  }

  50% {
    transform: translate3d(0, -8px, 0) rotate(0.2deg);
  }
}

.landing-sale-window-top {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
}

.landing-sale-window-top span {
  display: flex;
  gap: 9px;
}

.landing-sale-window-top i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.landing-sale-window-top i:nth-child(1) {
  background: rgb(255 179 90);
}

.landing-sale-window-top i:nth-child(2) {
  background: rgb(var(--theme-mint-rgb));
}

.landing-sale-window-top i:nth-child(3) {
  background: rgb(106 168 255);
}

.landing-sale-window-top b {
  color: #66717f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-sale-window-body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.landing-sale-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 20px;
  background: #fff;
}

.landing-sale-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.92), rgb(117 201 246 / 0.72));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.65), 0 14px 26px rgb(var(--theme-shadow-soft-rgb) / 0.1);
  font-size: 16px;
  font-weight: 950;
}

.landing-sale-icon-size {
  align-content: center;
  justify-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgb(255 179 90 / 0.95), rgb(255 218 155 / 0.86));
}

.landing-sale-icon-size b {
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.landing-sale-icon-size span {
  min-width: 38px;
  min-height: 16px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.48);
  color: #8b4f13;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
}

.landing-sale-icon-return {
  background: linear-gradient(135deg, rgb(176 21 216 / 0.85), rgb(117 201 246 / 0.85));
  font-size: 13px;
}

.landing-sale-row-text {
  display: grid;
  gap: 5px;
}

.landing-sale-row-text b {
  color: var(--theme-ink);
  font-size: 14px;
  font-weight: 900;
}

.landing-sale-row-text span {
  color: #66717f;
  font-size: 11px;
  font-weight: 800;
}

.landing-sale-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(var(--theme-mint-rgb) / 0.18);
  color: var(--theme-mint-text);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.landing-sale-pill-red {
  background: linear-gradient(135deg, rgb(239 127 136 / 0.22), rgb(255 179 90 / 0.2));
  color: #b33442;
  box-shadow: 0 10px 22px rgb(239 127 136 / 0.16);
  font-size: 14px;
}

.landing-sale-process {
  margin-top: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.landing-sale-process span {
  min-height: 106px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
  min-width: 0;
  padding: clamp(13px, 1.1vw, 16px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 20px;
  background: #fff;
  color: var(--theme-ink);
  box-shadow: 0 14px 30px rgb(var(--theme-shadow-soft-rgb) / 0.07);
}

.landing-sale-process i {
  min-width: clamp(34px, 2.8vw, 46px);
  height: clamp(30px, 2.4vw, 36px);
  padding: 0 clamp(5px, 0.7vw, 8px);
  border-radius: 12px;
  background: rgb(236 250 243 / 0.95);
  color: var(--theme-mint-text);
  font-size: clamp(11px, 0.9vw, 14px);
}

.landing-sale-process b {
  margin-top: 9px;
  color: var(--theme-ink);
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 950;
  line-height: 1.1;
}

.landing-sale-process small {
  color: #66717f;
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 850;
  line-height: 1.25;
}

.landing-module-pair {
  width: min(100%, 1240px);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(18px, 2vw, 28px);
}

.landing-tool-card {
  position: relative;
  isolation: isolate;
  min-height: 430px;
  display: grid;
  align-content: start;
  gap: clamp(16px, 1.8vw, 22px);
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: clamp(26px, 3vw, 38px);
  background: rgb(255 255 255 / 0.8);
  box-shadow: 0 26px 66px rgb(var(--theme-shadow-soft-rgb) / 0.1);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.landing-tool-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--theme-mint-rgb) / 0.2), rgb(119 206 248 / 0.08) 58%, transparent 70%);
  filter: blur(2px);
  animation: landing-tool-glow 7s ease-in-out infinite;
}

.landing-tool-card-edit::before {
  right: -90px;
  top: -90px;
}

.landing-tool-card-stock::before {
  left: -90px;
  bottom: -90px;
  animation-delay: -2s;
}

.landing-tool-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248), rgb(255 179 90 / 0.72));
  opacity: 0.85;
}

@keyframes landing-tool-glow {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(16px, -12px, 0) scale(1.08);
  }
}

.landing-tool-card-copy {
  display: grid;
  gap: 12px;
}

.landing-tool-kicker {
  color: var(--theme-mint-text);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-tool-card h3 {
  max-width: 560px;
  color: var(--theme-ink);
  font-size: clamp(30px, 2.45vw, 44px);
  line-height: 1.05;
}

.landing-tool-card p {
  max-width: 560px;
  color: #66717f;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 800;
  line-height: 1.38;
}

.landing-tool-visual {
  position: relative;
  min-height: 178px;
  display: grid;
  align-items: center;
  padding: clamp(14px, 1.7vw, 20px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.94), rgb(241 251 248 / 0.82)),
    linear-gradient(90deg, rgb(var(--theme-mint-rgb) / 0.1), rgb(119 206 248 / 0.12));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.88), 0 18px 40px rgb(var(--theme-shadow-soft-rgb) / 0.07);
  overflow: hidden;
}

.landing-tool-visual::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 45px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.16), rgb(119 206 248 / 0.16));
  transform: rotate(12deg);
  animation: landing-tool-visual-shift 6.6s ease-in-out infinite;
}

.landing-tool-visual-edit::before {
  right: -54px;
  bottom: -78px;
}

.landing-tool-visual-stock::before {
  left: -60px;
  top: -80px;
  animation-delay: -2.4s;
}

@keyframes landing-tool-visual-shift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(12deg);
  }

  50% {
    transform: translate3d(-12px, 10px, 0) rotate(17deg);
  }
}

.landing-tool-table {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.landing-tool-table span {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(74px, 0.74fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.05);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 10px 22px rgb(var(--theme-shadow-soft-rgb) / 0.06);
  animation: landing-tool-row-lift 4.8s ease-in-out infinite;
}

.landing-tool-table span:first-child {
  min-height: 26px;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.landing-tool-table span:nth-child(3) {
  animation-delay: 0.22s;
}

.landing-tool-table span:nth-child(4) {
  animation-delay: 0.44s;
}

@keyframes landing-tool-row-lift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -5px, 0);
  }
}

.landing-tool-table b,
.landing-tool-table i,
.landing-tool-table em,
.landing-tool-table strong {
  min-width: 0;
  font-style: normal;
  line-height: 1.1;
  white-space: nowrap;
}

.landing-tool-table b {
  color: #8f9baa;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-tool-table i {
  color: #66717f;
  font-size: 11px;
  font-weight: 900;
}

.landing-tool-table em {
  overflow: hidden;
  color: var(--theme-ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
}

.landing-tool-table strong {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgb(var(--theme-mint-rgb) / 0.15);
  color: var(--theme-mint-text);
  font-size: 10px;
  font-weight: 950;
}

.landing-stock-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.landing-stock-grid span {
  min-height: 70px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.05);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 12px 26px rgb(var(--theme-shadow-soft-rgb) / 0.06);
  animation: landing-stock-cell-pulse 4.6s ease-in-out infinite;
}

.landing-stock-grid span:nth-child(2) {
  animation-delay: 0.15s;
}

.landing-stock-grid span:nth-child(3) {
  animation-delay: 0.3s;
}

.landing-stock-grid span:nth-child(4) {
  animation-delay: 0.45s;
}

.landing-stock-grid span:nth-child(5) {
  animation-delay: 0.6s;
}

.landing-stock-grid span:nth-child(6) {
  animation-delay: 0.75s;
}

@keyframes landing-stock-cell-pulse {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 12px 26px rgb(var(--theme-shadow-soft-rgb) / 0.06);
  }

  50% {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 18px 34px rgb(119 206 248 / 0.16);
  }
}

.landing-stock-grid b {
  color: var(--theme-ink);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 950;
  line-height: 1;
}

.landing-stock-grid small {
  color: #66717f;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.landing-tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: auto;
}

.landing-tool-chips span {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 8px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: 999px;
  background: #fff;
  color: var(--theme-ink);
  box-shadow: 0 10px 22px rgb(var(--theme-shadow-soft-rgb) / 0.06);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.landing-tool-chip-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.2), rgb(119 206 248 / 0.16));
  color: var(--theme-mint-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.76);
  font-style: normal;
}

.landing-tool-chip-icon-amber {
  background: linear-gradient(135deg, rgb(255 179 90 / 0.2), rgb(var(--theme-mint-rgb) / 0.14));
  color: #9b5a09;
}

.landing-tool-chip-icon-blue {
  background: linear-gradient(135deg, rgb(119 206 248 / 0.2), rgb(219 244 255 / 0.78));
  color: #1c668a;
}

.landing-tool-chip-icon-green {
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.24), rgb(233 249 241 / 0.86));
  color: #1f7255;
}

.landing-tool-chip-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1380px) and (min-width: 1081px) {
  .landing-sale-module-showcase {
    grid-template-columns: minmax(0, 0.86fr) minmax(330px, 0.56fr);
    gap: clamp(16px, 1.8vw, 26px);
    padding: clamp(22px, 2.5vw, 36px);
  }

  .landing-sale-module-copy h3 {
    max-width: 620px;
    font-size: clamp(34px, 3.25vw, 48px);
  }

  .landing-sale-module-copy p {
    max-width: 520px;
    font-size: clamp(15px, 1.05vw, 18px);
  }

  .landing-sale-module-window {
    max-width: 410px;
  }

  .landing-sale-window-body {
    padding: 16px;
  }

  .landing-sale-row {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .landing-sale-icon {
    width: 50px;
    height: 50px;
  }

  .landing-sale-row-text b {
    font-size: 14px;
  }

  .landing-sale-row-text span {
    font-size: 11px;
  }

  .landing-sale-pill {
    padding-inline: 10px;
    font-size: 11px;
  }

  .landing-sale-process span {
    min-height: 110px;
  }

  .landing-sale-process b {
    font-size: 12.5px;
  }

  .landing-sale-process small {
    font-size: 10.5px;
  }
}

@media (max-width: 1380px) and (min-width: 861px) {
  .landing-flow-head {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2.8vw, 34px);
  }

  .landing-flow-copy h2 {
    max-width: 920px;
    font-size: clamp(42px, 5.1vw, 66px);
  }

  .landing-flow-copy p {
    max-width: 820px;
  }

  .landing-flow-console {
    width: min(100%, 720px);
    justify-self: center;
    min-height: auto;
  }

  .landing-flow-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(22px, 3vw, 36px);
  }

  .landing-flow-line::before,
  .landing-flow-line::after {
    display: none;
  }

  .landing-flow-line div,
  .landing-flow-line div:nth-child(2),
  .landing-flow-line div:nth-child(4),
  .landing-flow-line div:hover,
  .landing-flow-line div:nth-child(2):hover,
  .landing-flow-line div:nth-child(4):hover {
    transform: none;
  }
}

.landing-flow-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: end;
  gap: clamp(24px, 4vw, 70px);
}

.landing-flow-copy {
  min-width: 0;
}

.landing-flow-copy h2 {
  margin-bottom: clamp(26px, 2.8vw, 44px);
  max-width: 820px;
  text-wrap: balance;
}

.landing-flow-copy p {
  max-width: 920px;
}

.landing-flow-console {
  position: relative;
  isolation: isolate;
  min-height: 238px;
  align-self: center;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.92), rgb(239 250 247 / 0.72)),
    linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.16), rgb(119 206 248 / 0.14));
  box-shadow: 0 28px 66px rgb(var(--theme-shadow-soft-rgb) / 0.12);
  overflow: hidden;
  transform-origin: 50% 60%;
  animation: landing-flow-console-float 5.8s ease-in-out infinite;
}

.landing-flow-console::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -54px;
  top: -54px;
  width: 160px;
  height: 160px;
  border-radius: 48px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.24), rgb(119 206 248 / 0.16));
  transform: rotate(14deg);
}

@keyframes landing-flow-console-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(0, -10px, 0) rotate(-0.45deg);
  }
}

.landing-flow-console-top {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
}

.landing-flow-console-top span {
  display: inline-flex;
  gap: 6px;
}

.landing-flow-console-top i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--theme-mint-rgb) / 0.8);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.12);
}

.landing-flow-console-top i:nth-child(2) {
  background: rgb(119 206 248 / 0.88);
  box-shadow: 0 0 0 4px rgb(119 206 248 / 0.12);
}

.landing-flow-console-top i:nth-child(3) {
  background: rgb(255 179 90 / 0.9);
  box-shadow: 0 0 0 4px rgb(255 179 90 / 0.12);
}

.landing-flow-console-top b {
  color: #66717f;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-flow-console-body {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
}

.landing-flow-console-code {
  min-height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border-radius: 24px;
  background: var(--theme-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 20px 34px rgb(var(--theme-shadow-soft-rgb) / 0.16);
}

.landing-flow-console-code small {
  color: rgb(255 255 255 / 0.56);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.landing-flow-console-code strong {
  color: #fff;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.08em;
}

.landing-flow-console-list {
  display: grid;
  gap: 9px;
}

.landing-flow-console-list span {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.05);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.82);
  color: var(--theme-ink);
  box-shadow: 0 12px 22px rgb(var(--theme-shadow-soft-rgb) / 0.06);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.landing-flow-console-list i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: rgb(var(--theme-mint-rgb));
  box-shadow: 0 0 0 5px rgb(var(--theme-mint-rgb) / 0.12);
}

.landing-flow-console-meter {
  height: 7px;
  margin: 0 18px 18px;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.07);
  overflow: hidden;
}

.landing-flow-console-meter i {
  display: block;
  width: 76%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248), rgb(255 179 90 / 0.78));
  animation: landing-flow-meter-breathe 4.4s ease-in-out infinite;
}

@keyframes landing-flow-meter-breathe {
  0%,
  100% {
    width: 72%;
  }

  50% {
    width: 88%;
  }
}

.landing-flow-line {
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
  gap: clamp(14px, 1.4vw, 22px);
  margin-top: clamp(26px, 4vw, 56px);
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: clamp(30px, 3vw, 42px);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.74), rgb(235 249 246 / 0.54)),
    repeating-linear-gradient(90deg, transparent 0 52px, rgb(var(--theme-ink-rgb) / 0.028) 52px 53px);
  box-shadow: 0 30px 74px rgb(var(--theme-shadow-soft-rgb) / 0.1);
  overflow: hidden;
}

.landing-flow-line::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 34px;
  right: 34px;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb) / 0.14), rgb(var(--theme-mint-rgb) / 0.78), rgb(119 206 248 / 0.58), rgb(255 179 90 / 0.45));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.68), 0 12px 30px rgb(119 206 248 / 0.16);
  transform: translateY(-50%);
}

.landing-flow-line::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 34px;
  top: calc(50% - 16px);
  width: clamp(82px, 9vw, 138px);
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.88), transparent);
  opacity: 0.8;
  animation: landing-flow-scan 5.8s ease-in-out infinite;
}

@keyframes landing-flow-scan {
  0%,
  12% {
    transform: translateX(0);
  }

  88%,
  100% {
    transform: translateX(calc(min(100vw, 1240px) - 210px));
  }
}

@keyframes landing-flow-scan-mobile {
  0%,
  12% {
    transform: translateY(0);
  }

  88%,
  100% {
    transform: translateY(560px);
  }
}

.landing-flow-line div {
  position: relative;
  z-index: 2;
  min-height: 194px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  gap: 9px 14px;
  padding: clamp(18px, 1.7vw, 24px);
  border-radius: 28px 28px 28px 12px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.94), rgb(255 255 255 / 0.66)),
    linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.12), rgb(119 206 248 / 0.12));
  box-shadow: 0 24px 56px rgb(var(--theme-shadow-soft-rgb) / 0.1);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-flow-line div:nth-child(2),
.landing-flow-line div:nth-child(4) {
  transform: translateY(20px);
}

.landing-flow-line div::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 74px;
  height: 74px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.28), rgb(119 206 248 / 0.14));
}

.landing-flow-line div::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248 / 0.7), transparent);
  opacity: 0.72;
}

.landing-flow-line div:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px rgb(var(--theme-shadow-soft-rgb) / 0.16);
}

.landing-flow-line div:nth-child(2):hover,
.landing-flow-line div:nth-child(4):hover {
  transform: translateY(10px);
}

.landing-flow-icon {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.22), rgb(233 249 241 / 0.92));
  color: var(--theme-mint-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.82), 0 12px 24px rgb(var(--theme-shadow-soft-rgb) / 0.08);
  font-style: normal;
}

.landing-flow-icon-blue {
  background: linear-gradient(135deg, rgb(119 206 248 / 0.2), rgb(239 250 255 / 0.92));
  color: #1c668a;
}

.landing-flow-icon-amber {
  background: linear-gradient(135deg, rgb(255 179 90 / 0.22), rgb(255 250 242 / 0.94));
  color: #9b5a09;
}

.landing-flow-icon-green {
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.24), rgb(255 255 255 / 0.88));
  color: #1f7255;
}

.landing-flow-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-flow-line strong {
  align-self: end;
  color: var(--theme-mint-text);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.landing-flow-line span {
  grid-column: 2;
  color: var(--theme-ink);
  font-size: clamp(17px, 1.25vw, 22px);
  font-weight: 900;
  line-height: 1.12;
}

.landing-flow-line small {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: start;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  margin-top: clamp(14px, 2.4vw, 34px);
  padding: 0 11px;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.055);
  color: #66717f;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.landing-flow-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 3vw, 42px);
  padding: 12px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.7), rgb(235 249 246 / 0.52)),
    linear-gradient(90deg, rgb(var(--theme-mint-rgb) / 0.1), rgb(119 206 248 / 0.12));
  box-shadow: 0 22px 50px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-flow-action {
  min-height: 56px;
  width: min(100%, 320px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px 0 28px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.45);
  border-radius: 999px;
  background: var(--theme-ink);
  color: #fff;
  box-shadow: 0 22px 44px rgb(var(--theme-shadow-soft-rgb) / 0.18);
  font-size: 15px;
  font-weight: 950;
}

.landing-flow-action svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-flow-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 54px rgb(var(--theme-shadow-soft-rgb) / 0.22);
}

@media (max-width: 1380px) and (min-width: 861px) {
  .landing-flow-head {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2.8vw, 34px);
  }

  .landing-flow-copy h2 {
    max-width: 920px;
    font-size: clamp(42px, 5.1vw, 66px);
  }

  .landing-flow-copy p {
    max-width: 820px;
  }

  .landing-flow-console {
    width: min(100%, 720px);
    justify-self: center;
    min-height: auto;
  }

  .landing-flow-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(22px, 3vw, 36px);
  }

  .landing-flow-line::before,
  .landing-flow-line::after {
    display: none;
  }

  .landing-flow-line div,
  .landing-flow-line div:nth-child(2),
  .landing-flow-line div:nth-child(4),
  .landing-flow-line div:hover,
  .landing-flow-line div:nth-child(2):hover,
  .landing-flow-line div:nth-child(4):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-flow-console,
  .landing-flow-console-meter i {
    animation: none;
  }

  .landing-flow-line::after {
    animation: none;
  }

  .landing-flow-line div {
    transition: none;
  }
}

.landing-tariffs {
  background: linear-gradient(135deg, rgb(11 31 60 / 0.04), rgb(255 255 255 / 0.36));
}

.landing-extra-tariffs {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.landing-extra-tariff-card {
  position: relative;
  isolation: isolate;
  min-height: 194px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: clamp(24px, 2.6vw, 34px);
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 24px 62px rgb(var(--theme-shadow-soft-rgb) / 0.11);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.landing-extra-tariff-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248));
  opacity: 0.9;
}

.landing-extra-tariff-stock::before {
  background: linear-gradient(90deg, rgb(119 206 248), rgb(255 179 90));
}

.landing-extra-tariff-card i {
  width: clamp(56px, 5vw, 74px);
  height: clamp(56px, 5vw, 74px);
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.2), rgb(119 206 248 / 0.14));
  color: #145f3f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.72), 0 16px 34px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-extra-tariff-stock i {
  background: linear-gradient(135deg, rgb(119 206 248 / 0.2), rgb(255 179 90 / 0.16));
  color: #0b4f6f;
}

.landing-extra-tariff-card svg {
  width: clamp(29px, 2.4vw, 36px);
  height: clamp(29px, 2.4vw, 36px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-extra-tariff-card div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.landing-extra-tariff-card span {
  color: var(--theme-ink);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.05;
}

.landing-extra-tariff-card strong {
  color: var(--theme-ink);
  font-size: clamp(38px, 4.8vw, 62px);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: 0;
  white-space: nowrap;
}

.landing-extra-tariff-card small {
  margin-left: 8px;
  color: #66717f;
  font-size: 0.32em;
  font-weight: 900;
}

.landing-extra-tariff-card em {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgb(var(--theme-mint-rgb) / 0.14);
  color: #145f3f;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.landing-extra-tariff-stock em {
  background: rgb(119 206 248 / 0.15);
  color: #0b4f6f;
}

.landing-sale-pricing {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: clamp(26px, 3vw, 38px);
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 28px 72px rgb(var(--theme-shadow-soft-rgb) / 0.12);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.landing-sale-pricing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248), rgb(255 179 90));
  z-index: -1;
}

.landing-sale-pricing-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
  gap: clamp(18px, 2.6vw, 36px);
  align-items: stretch;
}

.landing-sale-pricing-head div {
  display: grid;
  gap: 10px;
}

.landing-sale-pricing-head > div > span {
  color: var(--theme-mint-text);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-sale-pricing-head h3 {
  max-width: 720px;
  color: var(--theme-ink);
  font-size: clamp(32px, 3.8vw, 58px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0;
}

.landing-sale-pricing-head strong {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 1.55vw, 19px);
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.22);
  border-radius: 24px;
  background: linear-gradient(135deg, rgb(236 250 243 / 0.96), rgb(255 255 255 / 0.88));
  color: #12583b;
  box-shadow: 0 18px 42px rgb(var(--theme-mint-rgb) / 0.14);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.22;
}

.landing-sale-pricing-head strong i {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.95), rgb(119 206 248 / 0.82));
  color: #fff;
  box-shadow: 0 14px 30px rgb(var(--theme-mint-rgb) / 0.2);
}

.landing-sale-pricing-head strong svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-sale-pricing-head strong span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.landing-sale-pricing-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.34fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}

.landing-sale-pricing-controls,
.landing-sale-pricing-result {
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: 26px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 18px 46px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-sale-pricing-controls {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 26px);
  overflow: hidden;
}

.landing-sale-term-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.landing-sale-term-tabs button {
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px clamp(8px, 1vw, 16px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
  border-radius: 22px;
  background: #fff;
  color: var(--theme-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgb(var(--theme-shadow-soft-rgb) / 0.07);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.landing-sale-term-tabs button span {
  display: block;
}

.landing-sale-term-tabs button small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 22px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgb(255 179 90 / 0.18);
  color: #8a4d12;
  font-size: clamp(8px, 0.56vw, 10px);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}

.landing-sale-term-tabs button:hover,
.landing-sale-term-tabs button:focus-visible {
  transform: translateY(-2px);
}

.landing-sale-term-tabs button.is-active {
  border-color: rgb(var(--theme-mint-rgb) / 0.38);
  background: rgb(var(--theme-mint-rgb) / 0.18);
  color: #145f3f;
}

.landing-sale-term-tabs button.is-active small {
  background: #fff;
  color: #145f3f;
}

.landing-sale-qty-field,
.landing-sale-range {
  display: grid;
  gap: 10px;
}

.landing-sale-qty-field > span,
.landing-sale-range > span:first-child {
  color: #66717f;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-sale-qty-field input {
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  padding: 0 18px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
  border-radius: 20px;
  background: #fff;
  color: var(--theme-ink);
  font: inherit;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.72);
}

.landing-sale-qty-field input:focus,
.landing-sale-range input:focus-visible {
  outline: 3px solid rgb(var(--theme-mint-rgb) / 0.22);
  outline-offset: 3px;
}

.landing-sale-range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.landing-sale-range input {
  --range-progress: 69.39%;
  width: 100%;
  height: 16px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248), rgb(255 179 90)) left / var(--range-progress) 100% no-repeat,
    linear-gradient(90deg, rgb(var(--theme-ink-rgb) / 0.08), rgb(var(--theme-ink-rgb) / 0.045));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.64);
  cursor: pointer;
}

.landing-sale-range-row button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.26);
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(236 250 243 / 0.96), #fff);
  color: #145f3f;
  box-shadow: 0 12px 28px rgb(var(--theme-mint-rgb) / 0.13);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.landing-sale-pricing.is-range-expanded .landing-sale-range-row button {
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248));
  color: #fff;
}

.landing-sale-range input::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  appearance: none;
  border: 6px solid #fff;
  border-radius: 50%;
  background: rgb(var(--theme-mint-rgb));
  box-shadow: 0 12px 24px rgb(var(--theme-shadow-soft-rgb) / 0.18);
}

.landing-sale-range input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 6px solid #fff;
  border-radius: 50%;
  background: rgb(var(--theme-mint-rgb));
  box-shadow: 0 12px 24px rgb(var(--theme-shadow-soft-rgb) / 0.18);
}

.landing-sale-scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #7b8794;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.landing-sale-range-note {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 2px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.2);
  border-radius: 18px;
  background: rgb(236 250 243 / 0.72);
  color: #145f3f;
  font-size: clamp(10.5px, 0.72vw, 12px);
  font-weight: 500;
  line-height: 1.25;
}

.landing-sale-range-note i {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgb(var(--theme-mint-rgb) / 0.18);
  color: #145f3f;
}

.landing-sale-range-note svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-sale-range-note span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.landing-tariffs .landing-sale-range-note {
  font-size: clamp(10.5px, 0.72vw, 12px);
}

.landing-sale-pricing-result {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  container-type: inline-size;
  overflow: hidden;
}

.landing-sale-pricing-result > span {
  color: var(--theme-mint-text);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-sale-pricing-result strong {
  max-width: 100%;
  color: var(--theme-ink);
  font-size: clamp(30px, 11cqw, 60px);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 0.98;
  letter-spacing: 0;
  white-space: nowrap;
}

.landing-sale-pricing-result small {
  color: #66717f;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.landing-sale-pricing-result b {
  color: var(--theme-ink);
}

.landing-sale-pricing-result em:not([hidden]) {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgb(255 179 90 / 0.18);
  color: #8a4d12;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

@media (max-width: 1280px) {
  .landing-sale-pricing-head,
  .landing-sale-pricing-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .landing-sale-pricing {
    grid-column: auto;
    padding: 18px;
    border-radius: 28px;
  }

  .landing-sale-pricing-head strong {
    min-height: auto;
  }

  .landing-sale-term-tabs button {
    width: 100%;
  }

  .landing-sale-term-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .landing-sale-pricing {
    gap: 16px;
    padding: 14px;
    border-radius: 24px;
  }

  .landing-sale-pricing-controls,
  .landing-sale-pricing-result {
    padding: 16px;
    border-radius: 22px;
  }

  .landing-sale-qty-field input {
    min-height: 62px;
    padding: 0 14px;
    font-size: clamp(29px, 11vw, 42px);
  }

  .landing-sale-pricing-result strong {
    font-size: clamp(28px, 13cqw, 42px);
  }

  .landing-sale-range-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-sale-range-row button {
    width: 100%;
  }

  .landing-sale-range-note {
    width: 100%;
    align-items: flex-start;
    border-radius: 16px;
    font-size: 12px;
  }

  .landing-sale-term-tabs button small {
    white-space: normal;
  }

  .landing-extra-tariff-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 14px;
    padding: 20px;
  }

  .landing-extra-tariff-card i {
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }

  .landing-extra-tariff-card span {
    font-size: clamp(20px, 7vw, 28px);
  }

  .landing-extra-tariff-card strong {
    font-size: clamp(38px, 13vw, 54px);
  }
}

.landing-game {
  background: linear-gradient(135deg, rgb(230 247 240 / 0.68), rgb(255 255 255 / 0.38));
}

.landing-game .landing-section-copy {
  max-width: 980px;
}

.landing-game-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.34fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}

.landing-game-panel,
.landing-game-feed {
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  background: rgb(255 255 255 / 0.76);
  box-shadow: 0 28px 70px rgb(var(--theme-shadow-soft-rgb) / 0.12);
  backdrop-filter: blur(14px);
}

.landing-game-panel {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2vw, 24px);
  border-radius: 32px;
  overflow: hidden;
}

.landing-game-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.landing-game-top div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgb(var(--theme-ink-rgb) / 0.04);
}

.landing-game-top span,
.landing-game-prize span,
.landing-game-card small {
  color: #66717f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.landing-game-top strong {
  color: var(--theme-ink);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
}

.landing-game-lane {
  position: relative;
  min-height: clamp(250px, 24vw, 340px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.84), rgb(235 247 244 / 0.7)),
    repeating-linear-gradient(90deg, rgb(var(--theme-ink-rgb) / 0.035) 0 1px, transparent 1px 84px);
  overflow: hidden;
  touch-action: manipulation;
}

.landing-game-lane::before,
.landing-game-lane::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.08);
}

.landing-game-lane::before {
  top: 22%;
}

.landing-game-lane::after {
  bottom: 22%;
}

.landing-game-belt {
  position: absolute;
  inset: auto 24px 50%;
  height: 16px;
  border-radius: 999px;
  background: rgb(var(--theme-ink-rgb) / 0.07);
  transform: translateY(50%);
  overflow: hidden;
}

.landing-game-belt::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--theme-mint), rgb(119 206 248), rgb(255 190 107));
  animation: landing-game-belt 2.8s ease-in-out infinite;
}

@keyframes landing-game-belt {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(260%);
  }
}

.landing-game-card {
  position: absolute;
  top: var(--game-y, 40%);
  right: -250px;
  z-index: 2;
  width: min(230px, 54vw);
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
  border-radius: 22px;
  color: var(--theme-ink);
  text-align: left;
  box-shadow: 0 22px 48px rgb(var(--theme-shadow-soft-rgb) / 0.16);
  cursor: pointer;
  animation: landing-game-card-run var(--game-speed, 6s) linear forwards;
  transition: transform 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
}

.landing-game-card.is-clean {
  background: linear-gradient(135deg, #ffffff, #ecfbf5);
}

.landing-game-card.is-junk {
  background: linear-gradient(135deg, #ffffff, #fff2e8);
}

.landing-game-card strong,
.landing-game-card span {
  display: block;
  line-height: 1.05;
}

.landing-game-card strong {
  font-size: 23px;
}

.landing-game-card span {
  color: #66717f;
  font-size: 14px;
  font-weight: 800;
}

.landing-game-card.is-caught {
  border-color: rgb(var(--theme-mint-rgb) / 0.58);
  opacity: 0;
  transform: translateX(-34vw) scale(0.88);
}

.landing-game-card.is-mistake {
  border-color: rgb(178 84 48 / 0.55);
  opacity: 0;
  transform: translateX(-34vw) rotate(-5deg) scale(0.88);
}

@keyframes landing-game-card-run {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100vw - 430px));
  }
}

.landing-game-status {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 18px;
  background: rgb(var(--theme-ink-rgb) / 0.04);
  color: #66717f;
  font-size: 14px;
  font-weight: 800;
}

.landing-game-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.landing-game-start,
.landing-game-reset {
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  color: var(--theme-ink);
  font-weight: 900;
  cursor: pointer;
}

.landing-game-start {
  background: var(--theme-mint);
  color: #fff;
  box-shadow: 0 16px 34px rgb(var(--theme-mint-rgb) / 0.34);
}

.landing-game-reset {
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.1);
  background: #fff;
}

.landing-game-prize {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.16), rgb(119 206 248 / 0.18));
}

.landing-game-prize[hidden] {
  display: none;
}

.landing-game-prize strong {
  color: var(--theme-ink);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1;
}

.landing-game-prize small {
  color: #66717f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.landing-game-feed {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 18px;
  border-radius: 30px;
}

.landing-game-feed span {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.84);
  box-shadow: 0 18px 40px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-game-feed b {
  color: var(--theme-ink);
  font-size: 22px;
  line-height: 1;
}

.landing-game-feed em {
  color: #66717f;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-ttt-board {
  grid-template-columns: minmax(0, 0.82fr) minmax(230px, 0.34fr);
}

.landing-ttt-stage {
  min-height: clamp(330px, 31vw, 500px);
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.06);
  border-radius: 30px;
  background:
    radial-gradient(circle at 26% 22%, rgb(var(--theme-mint-rgb) / 0.2), transparent 32%),
    radial-gradient(circle at 78% 76%, rgb(119 206 248 / 0.18), transparent 30%),
    linear-gradient(135deg, rgb(255 255 255 / 0.9), rgb(233 247 243 / 0.72));
  overflow: hidden;
}

.landing-ttt-grid {
  width: min(100%, 380px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
  padding: clamp(10px, 1.4vw, 16px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
  border-radius: clamp(24px, 3vw, 38px);
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 26px 60px rgb(var(--theme-shadow-soft-rgb) / 0.16);
  backdrop-filter: blur(14px);
}

.landing-ttt-grid button {
  min-width: 0;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: clamp(16px, 2vw, 24px);
  background: rgb(255 255 255 / 0.88);
  color: var(--theme-ink);
  font-size: clamp(26px, 5vw, 58px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 32px rgb(var(--theme-shadow-soft-rgb) / 0.08);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.landing-ttt-grid button:not(:disabled):hover,
.landing-ttt-grid button.is-hint {
  transform: translateY(-3px);
  border-color: rgb(var(--theme-mint-rgb) / 0.54);
  box-shadow: 0 18px 38px rgb(var(--theme-mint-rgb) / 0.16);
}

.landing-ttt-grid button.is-noapi {
  background: linear-gradient(135deg, var(--theme-mint), #9ee8bd);
  color: #fff;
}

.landing-ttt-grid button.is-system {
  background: linear-gradient(135deg, var(--theme-ink), #30435b);
  color: #fff;
}

.landing-ttt-grid button.is-win {
  border-color: rgb(255 190 107 / 0.88);
  box-shadow: 0 0 0 5px rgb(255 190 107 / 0.22), 0 18px 42px rgb(var(--theme-shadow-soft-rgb) / 0.12);
}

.landing-ttt-prize strong {
  letter-spacing: 0;
}

.landing-ttt-feed span:last-child {
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.18), rgb(119 206 248 / 0.14));
}

.landing-contacts {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  background: var(--theme-ink);
}

.landing-contacts .landing-section-label,
.landing-contacts h2,
.landing-contacts p {
  color: #fff;
}

.landing-contacts p {
  color: rgb(255 255 255 / 0.72);
}

.landing-contact-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.landing-feedback {
  background: linear-gradient(135deg, rgb(11 31 60 / 0.04), rgb(236 250 243 / 0.64));
}

.landing-feedback-panel {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.94fr);
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: clamp(28px, 3vw, 42px);
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 30px 78px rgb(var(--theme-shadow-soft-rgb) / 0.12);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.landing-feedback-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, rgb(var(--theme-mint-rgb)), rgb(119 206 248), rgb(255 179 90));
  opacity: 0.9;
}

.landing-feedback-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
  min-width: 0;
  padding: clamp(4px, 1vw, 12px);
}

.landing-feedback-copy i {
  width: clamp(58px, 5.2vw, 78px);
  height: clamp(58px, 5.2vw, 78px);
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb) / 0.96), rgb(119 206 248 / 0.86));
  color: #fff;
  box-shadow: 0 18px 40px rgb(var(--theme-mint-rgb) / 0.2);
}

.landing-feedback-copy svg,
.landing-feedback-form button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-feedback-copy svg {
  width: clamp(30px, 2.6vw, 38px);
  height: clamp(30px, 2.6vw, 38px);
  stroke-width: 2.1;
}

.landing-feedback-copy > span {
  color: var(--theme-mint-text);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-feedback-copy h2 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 76px);
}

.landing-feedback-copy p {
  max-width: 560px;
  color: #65717f;
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 650;
  line-height: 1.45;
}

.landing-feedback-form {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.07);
  border-radius: clamp(22px, 2.4vw, 32px);
  background: rgb(255 255 255 / 0.82);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.68), 0 18px 48px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-feedback-form[hidden] {
  display: none;
}

.landing-feedback-form label {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.landing-feedback-form label span {
  color: #66717f;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-feedback-form input,
.landing-feedback-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgb(var(--theme-ink-rgb) / 0.08);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.94);
  color: var(--theme-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0;
  outline: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.72);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-feedback-form input {
  min-height: 56px;
  padding: 0 16px;
}

.landing-feedback-form textarea {
  min-height: 154px;
  padding: 15px 16px;
  resize: vertical;
  line-height: 1.4;
}

.landing-feedback-form input::placeholder,
.landing-feedback-form textarea::placeholder {
  color: #9aa4b1;
}

.landing-feedback-form input:focus,
.landing-feedback-form textarea:focus {
  border-color: rgb(var(--theme-mint-rgb) / 0.48);
  box-shadow: 0 0 0 4px rgb(var(--theme-mint-rgb) / 0.16);
}

.landing-feedback-question,
.landing-feedback-form button,
.landing-feedback-status {
  grid-column: 1 / -1;
}

.landing-feedback-form button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--theme-ink);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 18px 40px rgb(var(--theme-shadow-strong-rgb) / 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.landing-feedback-form button:hover,
.landing-feedback-form button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgb(var(--theme-shadow-strong-rgb) / 0.22);
}

.landing-feedback-form button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.landing-feedback-form button svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.3;
}

.landing-feedback-form .landing-feedback-status {
  min-height: 22px;
  max-width: none;
  margin: 0;
  color: #66717f;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.landing-feedback-status[data-state="success"] {
  color: #145f3f;
}

.landing-feedback-status[data-state="error"] {
  color: #a03320;
}

.landing-feedback-status[data-state="pending"] {
  color: #0b4f6f;
}

.landing-feedback-success {
  min-width: 0;
  min-height: clamp(280px, 24vw, 390px);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgb(var(--theme-mint-rgb) / 0.24);
  border-radius: clamp(22px, 2.4vw, 32px);
  background:
    radial-gradient(circle at 18% 18%, rgb(var(--theme-mint-rgb) / 0.18), transparent 34%),
    linear-gradient(145deg, rgb(255 255 255 / 0.92), rgb(238 252 245 / 0.86));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.74), 0 18px 48px rgb(var(--theme-shadow-soft-rgb) / 0.08);
}

.landing-feedback-success[hidden] {
  display: none;
}

.landing-feedback-success i {
  width: clamp(58px, 5vw, 74px);
  height: clamp(58px, 5vw, 74px);
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--theme-mint-rgb)), rgb(117 201 246));
  box-shadow: 0 18px 40px rgb(var(--theme-mint-rgb) / 0.22);
}

.landing-feedback-success svg {
  width: clamp(30px, 2.6vw, 38px);
  height: clamp(30px, 2.6vw, 38px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-feedback-success strong {
  color: var(--theme-ink);
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.08;
}

.landing-feedback-success p {
  max-width: 520px;
  margin: 0;
  color: #145f3f;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 750;
  line-height: 1.42;
}

.landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 30px clamp(22px, 8vw, 150px);
  color: rgb(255 255 255 / 0.68);
  background: var(--theme-ink);
}

.landing-footer .landing-brand {
  color: #fff;
}

.landing-footer .landing-brand small {
  color: rgb(255 255 255 / 0.64);
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.landing-footer-links a {
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  color: rgb(255 255 255 / 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.landing-footer-links a:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 0.34);
  background: rgb(255 255 255 / 0.06);
  transform: translateY(-2px);
}

@media (max-width: 1180px) {
  .landing-side-nav {
    display: none;
  }

  .landing-header-links {
    gap: 14px;
  }

  .landing-header-links a {
    font-size: 12px;
  }

  .landing-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-right: clamp(22px, 7vw, 86px);
  }

  .landing-hero-typing {
    position: relative;
    left: auto;
    bottom: auto;
    grid-row: 2;
    width: 100%;
    min-height: clamp(54px, 10vw, 96px);
  }

  .landing-product-stage {
    min-height: 420px;
  }

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

  .landing-module-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-sale-module-showcase {
    grid-template-columns: minmax(0, 0.84fr) minmax(310px, 0.56fr);
    gap: 20px;
    padding: 24px;
  }

  .landing-module-flow-line {
    display: none;
  }

  .landing-game-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-game-feed {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: stretch;
  }

  .landing-game-feed span {
    min-height: 86px;
  }

  .landing-ttt-board {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 1100px) {
  .landing-module-pair {
    width: min(100%, 760px);
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-tool-card {
    min-height: auto;
  }
}

@media (max-width: 1040px) {
  .landing-sale-module-showcase {
    width: min(100%, 760px);
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-module-pair {
    width: min(100%, 760px);
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-tool-card {
    min-height: auto;
  }

  .landing-sale-module-copy h3,
  .landing-sale-module-copy p {
    max-width: 100%;
  }

  .landing-sale-heading-break {
    display: inline;
  }

  .landing-sale-module-window {
    max-width: 620px;
    justify-self: center;
  }
}

@media (max-width: 860px) {
  .landing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    grid-template-columns: 1fr auto;
    gap: 12px;
    width: 100vw;
    max-width: none;
    min-height: 86px;
    padding: 16px 18px;
    background: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 28px rgb(var(--theme-shadow-soft-rgb) / 0.1);
    overflow: hidden;
  }

  .landing-header-links {
    display: none;
  }

  .landing-brand {
    grid-template-columns: 56px minmax(0, auto);
    gap: 12px;
    min-width: 0;
  }

  .landing-logo-mark {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }

  .landing-logo-mark img {
    width: 45px;
    height: 45px;
  }

  .landing-brand strong {
    font-size: 20px;
  }

  .landing-brand small {
    font-size: 12px;
  }

  .landing-login-link {
    min-width: 92px;
    min-height: 48px;
    padding: 0 16px;
    font-size: 13px;
  }

  .landing-hero {
    width: 100%;
    max-width: 100vw;
    min-height: auto;
    padding: 112px 16px 64px;
    gap: 28px;
    overflow: hidden;
  }

  .landing-hero-copy {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .landing-hero h1 {
    max-width: 100%;
    font-size: clamp(48px, 13.7vw, 60px);
    line-height: 0.92;
  }

  .landing-hero-text {
    max-width: 100%;
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .landing-hero-actions,
  .landing-contact-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .landing-primary-action,
  .landing-secondary-action {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    font-size: 13px;
  }

  .landing-hero-typing {
    width: calc(100vw - 32px);
    min-height: 62px;
    overflow: hidden;
  }

  .landing-hero-typing-word {
    font-size: clamp(36px, 12vw, 58px);
  }

  .landing-hero-typing-word.is-long {
    font-size: clamp(27px, 8.35vw, 40px);
  }

  .landing-product-stage {
    width: 100%;
    max-width: 430px;
    min-height: auto;
    justify-self: center;
    margin-inline: auto;
  }

  .landing-product-stage::before {
    width: 86vw;
    height: 86vw;
  }

  .landing-device {
    width: min(100%, 430px);
    min-height: auto;
    border-radius: 26px;
    margin-inline: auto;
  }

  .landing-device-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .landing-device-panel-main {
    min-height: 142px;
  }

  .landing-device-panel-main strong,
  .landing-device-stock strong,
  .landing-sale-status {
    font-size: clamp(28px, 9vw, 36px);
  }

  .landing-device-stock {
    grid-column: auto;
    min-height: 242px;
  }

  .landing-device-stock-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .landing-device-stock-head span {
    align-self: flex-end;
    font-size: 9px;
  }

  .landing-device-note {
    font-size: 12px;
  }

  .landing-stock-stickers {
    gap: 6px;
  }

  .landing-stock-sticker {
    padding: 7px 8px;
  }

  .landing-stock-sticker b {
    font-size: 11.5px;
  }

  .landing-stock-sticker em {
    font-size: 8px;
  }

  .landing-stock-sticker-manual {
    column-gap: 6px;
  }

  .landing-stock-sticker-wb {
    width: 26px;
    min-width: 26px;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .landing-wb-mark {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 8px;
  }

  .landing-sale-check {
    margin-top: 0;
  }

  .landing-device-list {
    grid-column: auto;
  }

  .landing-scroll-cue {
    display: none;
  }

  .landing-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 64px 16px;
    overflow: hidden;
  }

  .landing-section > .landing-section-label {
    margin-top: 0;
  }

  .landing-section h2 {
    font-size: clamp(31px, 9vw, 46px);
  }

  .landing-section p {
    font-size: 16px;
  }

  .landing-about-main {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .landing-about-stack {
    justify-self: center;
    width: min(100%, 360px);
    min-height: 336px;
    margin-bottom: 26px;
  }

  .landing-about-stack div {
    left: 50%;
    right: auto;
    width: min(320px, 86vw);
    --stack-x: -50%;
  }

  .landing-about-stack div:nth-child(1) {
    left: 50%;
    right: auto;
  }

  .landing-about-stack div:nth-child(2) {
    left: 50%;
    right: auto;
  }

  .landing-about-stack div:nth-child(3) {
    left: 50%;
    right: auto;
  }

  .landing-about-console {
    padding: 22px;
  }

  .landing-about-console-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: flex-start;
  }

  .landing-about-tabs,
  .landing-about-statuses {
    flex: 0 1 auto;
    width: 100%;
    justify-content: flex-start;
  }

  .landing-about-tabs button,
  .landing-about-statuses span {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }

  .landing-about-console-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-about-console-grid div:first-child {
    grid-column: auto;
  }

  .landing-about-console-grid div:first-child strong {
    font-size: clamp(36px, 12cqw, 48px);
  }

  .landing-metrics,
  .landing-module-flow,
  .landing-module-grid,
  .landing-sale-module-showcase,
  .landing-module-pair,
  .landing-flow-head,
  .landing-flow-line,
  .landing-flow-actions,
  .landing-extra-tariffs,
  .landing-feedback-panel,
  .landing-game-board {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-extra-tariff-card {
    min-height: 168px;
  }

  .landing-feedback-panel {
    padding: 22px;
    border-radius: 28px;
  }

  .landing-module-flow {
    padding: 12px;
    border-radius: 24px;
  }

  .landing-module-flow div {
    min-height: 64px;
  }

  .landing-module-grid article {
    min-height: auto;
    padding: 24px;
  }

  .landing-sale-module-showcase {
    gap: 24px;
    padding: 24px;
  }

  .landing-sale-module-copy h3 {
    font-size: clamp(31px, 9vw, 46px);
  }

  .landing-sale-module-copy p {
    font-size: 16px;
  }

  .landing-sale-module-window {
    border-radius: 26px;
  }

  .landing-sale-window-body {
    padding: 16px;
  }

  .landing-sale-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    min-height: 92px;
  }

  .landing-sale-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 15px;
  }

  .landing-sale-icon-size b {
    font-size: 13px;
  }

  .landing-sale-icon-size span {
    min-width: 32px;
    min-height: 14px;
    font-size: 7px;
  }

  .landing-sale-pill {
    grid-column: 1 / -1;
  }

  .landing-sale-process span {
    min-height: 92px;
    border-radius: 16px;
    gap: 5px;
  }

  .landing-sale-module-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .landing-sale-module-chips span {
    gap: 6px;
    min-height: 38px;
    padding: 0 9px;
    font-size: 11px;
  }

  .landing-sale-module-chips i {
    min-width: 24px;
    height: 22px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 9px;
  }

  .landing-sale-module-action {
    width: 100%;
  }

  .landing-module-pair {
    gap: 16px;
  }

  .landing-tool-card {
    padding: 22px;
    border-radius: 28px;
  }

  .landing-tool-card h3 {
    font-size: clamp(28px, 8vw, 40px);
  }

  .landing-tool-card p {
    font-size: 15px;
  }

  .landing-tool-visual {
    min-height: 158px;
    border-radius: 22px;
  }

  .landing-module-grid h3 {
    font-size: clamp(25px, 8vw, 34px);
  }

  .landing-flow-head {
    gap: 20px;
  }

  .landing-flow-copy h2 {
    max-width: 100%;
    margin-bottom: 22px;
    font-size: clamp(34px, 10vw, 48px);
    line-height: 0.98;
  }

  .landing-flow-console {
    width: min(100%, 430px);
    justify-self: center;
    min-height: auto;
    border-radius: 26px;
  }

  .landing-flow-console-body {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .landing-flow-console-code {
    min-height: 94px;
    border-radius: 20px;
  }

  .landing-flow-console-code strong {
    font-size: 28px;
  }

  .landing-flow-console-list span {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }

  .landing-flow-line {
    width: min(100%, 430px);
    justify-self: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px;
    border-radius: 26px;
  }

  .landing-flow-line::before {
    top: 24px;
    bottom: 24px;
    left: 34px;
    right: auto;
    width: 6px;
    height: auto;
    background: linear-gradient(180deg, rgb(var(--theme-mint-rgb) / 0.18), rgb(var(--theme-mint-rgb) / 0.78), rgb(119 206 248 / 0.58), rgb(255 179 90 / 0.45));
    transform: none;
  }

  .landing-flow-line::after {
    display: none;
  }

  .landing-flow-line div {
    min-height: 116px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 16px;
    border-radius: 22px 22px 22px 10px;
    transform: none;
  }

  .landing-flow-line div:nth-child(2),
  .landing-flow-line div:nth-child(4),
  .landing-flow-line div:hover,
  .landing-flow-line div:nth-child(2):hover,
  .landing-flow-line div:nth-child(4):hover {
    transform: none;
  }

  .landing-flow-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .landing-flow-icon svg {
    width: 21px;
    height: 21px;
  }

  .landing-flow-line span {
    font-size: clamp(17px, 5.2vw, 22px);
  }

  .landing-flow-line small {
    margin-top: 8px;
  }

  .landing-flow-actions {
    justify-content: stretch;
    width: min(100%, 430px);
    justify-self: center;
    margin-top: 16px;
    border-radius: 26px;
  }

  .landing-flow-action {
    width: 100%;
    min-height: 54px;
  }

  .landing-game-board {
    width: min(100%, 560px);
    justify-self: center;
  }

  .landing-game-panel {
    border-radius: 28px;
  }

  .landing-game-lane {
    min-height: 280px;
    border-radius: 24px;
  }

  .landing-ttt-stage {
    min-height: 360px;
    border-radius: 26px;
  }

  .landing-game-feed {
    display: none;
  }

  .landing-contacts {
    align-items: start;
  }

  .landing-footer {
    display: grid;
    padding: 28px 16px;
  }
}

@media (max-width: 520px) {
  .landing-header {
    width: 100vw;
    max-width: none;
  }

  .landing-brand strong,
  .landing-brand small {
    white-space: nowrap;
  }

  .landing-hero-copy,
  .landing-hero-actions,
  .landing-hero-typing {
    width: min(100%, 358px);
    max-width: 358px;
  }

  .landing-hero-text {
    max-width: 358px;
  }

  .landing-flow-copy h2 {
    font-size: clamp(34px, 10.4vw, 43px);
  }

  .landing-flow-console-top {
    min-height: 50px;
    padding: 0 14px;
  }

  .landing-flow-console-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .landing-flow-console-code {
    width: 132px;
    min-height: 96px;
    justify-self: center;
  }

  .landing-flow-console-list span {
    white-space: normal;
  }

  .landing-feedback-panel {
    gap: 18px;
    padding: 16px;
    border-radius: 24px;
  }

  .landing-feedback-copy h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .landing-feedback-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
    border-radius: 22px;
  }

  .landing-feedback-form input {
    min-height: 54px;
  }

  .landing-feedback-form textarea {
    min-height: 136px;
  }

  .landing-game-panel {
    gap: 12px;
    padding: 14px;
  }

  .landing-game-top {
    gap: 8px;
  }

  .landing-game-top div {
    padding: 11px 9px;
    border-radius: 16px;
  }

  .landing-game-top span {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .landing-game-top strong {
    font-size: clamp(20px, 7vw, 28px);
  }

  .landing-game-card {
    right: -210px;
    width: min(190px, 64vw);
    min-height: 84px;
    padding: 13px 14px;
    border-radius: 18px;
  }

  .landing-game-card strong {
    font-size: 18px;
  }

  .landing-game-card span {
    font-size: 12px;
  }

  .landing-game-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-game-start,
  .landing-game-reset {
    width: 100%;
    min-height: 50px;
  }

  .landing-ttt-grid {
    width: min(100%, 312px);
  }

  .landing-game-prize strong {
    font-size: clamp(25px, 8vw, 34px);
  }

  .landing-product-stage,
  .landing-device {
    width: min(100%, 358px);
    max-width: 358px;
  }

  .landing-module-card-tags em,
  .landing-module-card-top b {
    font-size: 10px;
  }

  .landing-module-card-tags em {
    min-height: 30px;
    padding: 0 9px;
  }

  .landing-sale-window-top {
    min-height: 56px;
    padding: 0 16px;
  }

  .landing-sale-window-top b {
    font-size: 10px;
  }

  .landing-sale-row-text b {
    font-size: 14px;
  }

  .landing-sale-row-text span {
    font-size: 11px;
  }

  .landing-sale-process {
    gap: 8px;
  }

  .landing-tool-table span {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .landing-tool-table span:first-child {
    display: none;
  }

  .landing-tool-table i {
    display: none;
  }

  .landing-tool-table em {
    font-size: 12px;
  }

  .landing-stock-grid {
    gap: 8px;
  }

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

  .landing-tool-chips span {
    justify-content: center;
    min-height: 34px;
    gap: 6px;
    padding: 0 8px 0 6px;
    font-size: 11px;
  }

  .landing-tool-chip-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .landing-tool-chip-icon svg {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 380px) {
  .landing-device-stock .landing-stock-stickers {
    gap: 4px;
  }

  .landing-device-stock .landing-stock-sticker {
    padding: 5px 5px;
    border-radius: 12px;
  }

  .landing-device-stock .landing-stock-sticker b {
    font-size: 8.8px;
    letter-spacing: -0.01em;
  }

  .landing-device-stock .landing-stock-sticker em {
    font-size: 6.6px;
    letter-spacing: 0.04em;
  }

  .landing-device-stock .landing-count-up {
    min-width: 48px;
  }

  .landing-device-stock .landing-stock-sticker-wb {
    width: 22px;
    min-width: 22px;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .landing-device-stock .landing-wb-mark {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    font-size: 6.5px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* App toast polish: flash alerts float above the UI and do not shift the sale page. */
.app-page .alert {
  display: none !important;
}

.sale-toast-stack {
  top: max(16px, env(safe-area-inset-top, 0px)) !important;
  right: max(16px, env(safe-area-inset-right, 0px)) !important;
  z-index: 2147483000 !important;
  width: min(380px, calc(100vw - 32px)) !important;
  gap: 10px !important;
}

.sale-toast {
  min-height: 54px !important;
  border-radius: 18px !important;
  opacity: 0;
  transform: translateY(-8px);
  animation: sale-toast-in 0.18s ease forwards;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.sale-toast.closing {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  pointer-events: none !important;
  animation: none !important;
}

@media (max-width: 520px) {
  .sale-toast-stack {
    top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    gap: 8px !important;
  }

  .sale-toast {
    grid-template-columns: 28px minmax(0, 1fr) 26px !important;
    gap: 9px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    padding: 9px 9px 9px 11px !important;
  }

  .sale-toast-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  .sale-toast-copy strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  .sale-toast-copy small {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .sale-toast button {
    width: 26px !important;
    height: 26px !important;
    font-size: 22px !important;
  }
}

/* Sale reports page polish: keep download actions aligned while the viewport narrows. */
.sale-reports-page .sale-report-card {
  grid-template-columns: minmax(200px, 0.75fr) minmax(260px, 1fr) minmax(180px, 0.7fr) minmax(150px, auto) !important;
}

.sale-reports-page .sale-report-card .link-button {
  justify-self: end !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  .sale-reports-page .sale-report-card {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .sale-reports-page .sale-report-card-stats,
  .sale-reports-page .sale-report-card-note {
    grid-column: 1 / -1 !important;
  }

  .sale-reports-page .sale-report-card .link-button {
    justify-self: end !important;
  }
}

@media (max-width: 720px) {
  .sale-reports-page .sale-report-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sale-reports-page .sale-report-card .link-button {
    width: 100% !important;
    justify-self: stretch !important;
    text-align: center !important;
  }
}

@media (max-width: 720px) {
  .payment-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .promo-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .promo-help-grid,
  .promo-choice-grid,
  .promo-form .form-grid.inline {
    grid-template-columns: 1fr !important;
  }

  .promo-user-dropdown {
    position: fixed !important;
    inset: 0 !important;
    max-height: none !important;
    padding: 12px !important;
  }

  .promo-user-modal {
    max-height: calc(100vh - 24px) !important;
    padding: 14px !important;
  }

  .promo-date-popover {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }

  .sale-report-date-range-text {
    grid-template-columns: 1fr !important;
  }
}