:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --k-bg: #0b1017;
  --k-bg-2: #101820;
  --k-panel: #111a22;
  --k-panel-2: #0f2426;
  --k-panel-3: #0a1218;
  --k-line: #263846;
  --k-line-active: #2f7c70;
  --k-text: #eef4f8;
  --k-heading: #f8fbfd;
  --k-muted: #adbac5;
  --k-faint: #8393a1;
  --k-nav: #7f8f9c;
  --k-green: #20c878;
  --k-green-soft: #6ad5c0;
  --k-green-text: #8de5bb;
  --k-button-text: #04120a;
  --k-secondary: #22313d;
  --k-disabled: #42505c;
  --k-disabled-text: #8e9ba7;
  --k-warning: #f1dfb1;
  --k-warning-bg: rgba(42, 34, 18, 0.86);
  --k-warning-line: #5f4f2b;
  --k-danger: #ff6b6b;
  --k-danger-text: #ff9b8d;
  background: #0b1017;
  color: #eef4f8;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(35, 112, 126, 0.28), transparent 34rem),
    linear-gradient(180deg, #0b1017 0%, #101820 58%, #090d12 100%);
}

.shell {
  width: min(720px, 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  margin: 0 auto;
  padding: 34px 24px;
}

.siteHeader {
  text-align: center;
}

.siteNameLink {
  display: inline-grid;
  justify-items: center;
  color: inherit;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

.adminPanel a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink),
.adminMessage a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink),
.sellerChatMessage a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink),
.productBox a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink),
.manualNotice a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink),
.manualEmailPanel a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink) {
  color: var(--k-green-text);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.adminPanel a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink):hover,
.adminMessage a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink):hover,
.sellerChatMessage a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink):hover,
.productBox a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink):hover,
.manualNotice a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink):hover,
.manualEmailPanel a:not(.adminButtonLink):not(.marketButton):not(.shopButton):not(.siteNameLink):hover {
  color: var(--k-green-soft);
  text-decoration: underline;
}

.siteName {
  display: inline-block;
  padding: 10px 18px;
  color: #ffffff;
  font-size: clamp(34px, 8vw, 66px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 10px 34px rgba(42, 189, 168, 0.26);
  user-select: none;
  -webkit-user-select: none;
}

.siteName span {
  color: #20c878;
}

.siteNav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  color: #7f8f9c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  user-select: none;
  -webkit-user-select: none;
}

.siteNav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7f8f9c;
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.siteNav a:hover {
  color: #20c878;
}

.homeIcon {
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

.navDot {
  color: #40505e;
}

.panel {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: rgba(17, 25, 33, 0.94);
  border: 1px solid #263846;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.orderBadge {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  color: #7f8f9c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.loadingOverlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(7, 11, 15, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.loadingOverlay.isVisible {
  opacity: 1;
  pointer-events: auto;
}

.throbber {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #6ad5c0;
  border-radius: 50%;
  animation: spin 780ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.homePanel {
  text-align: center;
}

.bootPanel {
  min-height: 220px;
  display: grid;
  place-items: center;
}

.homePanel p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.homeButtons {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
  margin: 0 auto;
}

.homeButtonsLabel {
  color: #8393a1;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.brand {
  color: #6ad5c0;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #f8fbfd;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

p {
  margin: 14px 0 24px;
  color: #adbac5;
  line-height: 1.55;
}

.numberBox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: center;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid #2f7c70;
  border-radius: 8px;
  background: #0f2426;
}

.productBox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 16px;
  align-items: start;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid #2f7c70;
  border-radius: 8px;
  background: #0f2426;
}

.productBox pre {
  grid-column: 1 / -1;
  max-height: 320px;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid #263846;
  border-radius: 8px;
  background: #0a1218;
  color: #f4f8fb;
  font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.productExtra {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding-top: 6px;
}

.productExtra strong {
  color: #8fa3a5;
  font-size: 14px;
  font-weight: 900;
}

.productExtra p {
  margin: 0;
  color: #8fa3a5;
  font-size: 14px;
  line-height: 1.5;
}

.productExtra button {
  justify-self: start;
}

.productWarranty {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8fa3a5;
  font-size: 14px;
  font-weight: 800;
}

.productWarranty strong {
  color: #20c878;
}

.productWarranty strong.isExpired {
  color: #ff6b6b;
}

.giftOffer {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid rgba(225, 189, 100, 0.6);
  border-radius: 8px;
  background:
    radial-gradient(circle at top, rgba(225, 189, 100, 0.16), transparent 46%),
    linear-gradient(180deg, rgba(42, 34, 18, 0.92), rgba(16, 20, 23, 0.94));
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 231, 167, 0.08);
  text-align: center;
  scroll-margin-top: 24px;
}

.giftOfferFloat {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 231, 167, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, #e7c56d, #c79c37);
  color: #050505;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(225, 189, 100, 0.1);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.giftOfferFloat:disabled {
  background: linear-gradient(180deg, #e7c56d, #c79c37);
  color: #050505;
}

.giftOfferFloat.isVisible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.giftOfferFloat:hover:not(:disabled),
.giftOfferFloat:focus-visible {
  background: linear-gradient(180deg, #e7c56d, #c79c37);
  color: #050505;
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(225, 189, 100, 0.18);
}

.giftOfferFloat span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(96, 75, 31, 0.42);
  color: #e1bd64;
  font-size: 18px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 231, 167, 0.24);
  animation: giftFloat 2.4s ease-in-out infinite;
}

.giftOfferFloat strong {
  color: #050505;
  font-weight: 700;
}

.giftOfferIcon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(225, 189, 100, 0.14);
  color: #e1bd64;
  font-size: 30px;
  animation: giftFloat 2.4s ease-in-out infinite;
  user-select: none;
  -webkit-user-select: none;
}

.giftOffer h2 {
  margin: 0;
  color: #e1bd64;
  font-size: 24px;
  line-height: 1.1;
}

.giftOffer p {
  max-width: 620px;
  margin: 0;
  color: #f1dfb1;
}

.giftOffer strong {
  color: #e1bd64;
  font-weight: 900;
}

.giftPromoRow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 5px;
}

.giftPromoCode {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(225, 189, 100, 0.36);
  border-radius: 7px;
  background: rgba(10, 18, 24, 0.62);
  color: #e1bd64;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
}

.giftPromoCopy {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(225, 189, 100, 0.34);
  border-radius: 7px;
  background: rgba(225, 189, 100, 0.12);
  color: #e1bd64;
  box-shadow: none;
}

.giftPromoCopy:hover {
  background: rgba(225, 189, 100, 0.2);
  transform: translateY(-1px);
}

.giftPromoCopy svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.giftPromoCopy.isCopied {
  background: rgba(225, 189, 100, 0.24);
}

.giftPromoCopy.isCopied svg {
  display: none;
}

.giftPromoCopy.isCopied::after {
  content: "✓";
  color: #e1bd64 !important;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.giftOfferButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 8px;
  background: linear-gradient(180deg, #e7c56d, #c79c37);
  color: #17110a;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(225, 189, 100, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.giftOfferButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 34px rgba(225, 189, 100, 0.26);
}

.giftOfferButton img {
  box-sizing: border-box;
  width: 198px;
  height: 35px;
  max-width: min(198px, 46vw);
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 231, 167, 0.42);
  background: linear-gradient(180deg, #172129, #0c1218);
  box-shadow: 0 5px 14px rgba(23, 17, 10, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  object-fit: contain;
}

@keyframes giftFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }

  50% {
    transform: translateY(-5px) rotate(5deg);
  }
}

.productLoginMeta {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  color: #8fa3a5;
  font-size: 14px;
}

.productLoginLink {
  color: #7bd3af;
  text-decoration: none;
}

.productFormatHint {
  grid-column: 1 / -1;
  color: #8fa3a5;
  font-size: 13px;
}

.productLoginLink:hover {
  text-decoration: underline;
}

.numberHeader {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.countryBadge {
  color: #8796a4;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.numberBox strong {
  color: #ffffff;
  font-size: clamp(24px, 7vw, 36px);
  overflow-wrap: anywhere;
}

.phoneNumber {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.phonePrefix {
  color: #6ad5c0;
}

.phoneRest {
  color: #ffffff;
  overflow-wrap: anywhere;
}

.statusGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.statusGrid > div {
  min-width: 0;
  border: 1px solid #263846;
  border-radius: 8px;
  padding: 14px;
  background: #111a22;
}

.smsCodeRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.label {
  display: block;
  color: #8393a1;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
}

strong {
  color: #f4f8fb;
  font-size: 20px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.actions.isFadingOut {
  opacity: 0;
  transform: translateY(-4px);
}

.replaceHint {
  flex: 1 1 260px;
  margin: 0;
  color: #8796a4;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 420ms ease;
}

.replaceHint.isVisible {
  opacity: 1;
}

.actionSuccess {
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.actionSuccess.isVisible {
  opacity: 1;
  transform: translateY(0);
}

.actionSuccess h2 {
  margin: 0;
  color: #20c878;
  font-size: 32px;
  line-height: 1;
}

.actionSuccess p {
  max-width: 520px;
  margin: 10px auto 0;
  color: #8de5bb;
  font-size: 15px;
}

.manualNotice {
  min-height: 330px;
  display: grid;
  place-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.manualNotice.isVisible {
  opacity: 1;
  transform: translateY(0);
}

.manualNotice h2 {
  margin: 0;
  color: #20c878;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1;
}

.manualNotice p {
  max-width: 580px;
  margin: 18px auto 0;
  color: var(--k-muted);
  font-size: 17px;
}

.selfActivationOffer {
  width: min(420px, 100%);
  margin: 34px auto 0;
  display: grid;
  justify-items: center;
  gap: 13px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.selfActivationOffer.isVisible {
  opacity: 1;
  transform: translateY(0);
}

.selfActivationOffer strong {
  color: #20c878;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.1;
}

.selfActivationOffer button {
  min-width: min(300px, 100%);
}

.confirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 8, 12, 0.72);
  backdrop-filter: blur(10px);
}

.confirmDialog {
  width: min(620px, 100%);
  padding: clamp(24px, 5vw, 34px);
  border: 1px solid var(--k-line-active);
  border-radius: 8px;
  background: #101922;
  color: var(--k-text);
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

.confirmDialog h2 {
  margin: 0 0 16px;
  color: var(--k-heading);
  font-size: clamp(32px, 7vw, 48px);
  line-height: 1;
}

.confirmDialog p {
  margin: 0;
  color: #d8e2e8;
  font-size: 17px;
  line-height: 1.58;
}

.confirmDialog p span {
  color: #ffb7b7;
  font-weight: 800;
}

.confirmActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.confirmActions button.danger {
  background: #7f2d36;
  color: #fff0f1;
  box-shadow: 0 0 0 1px rgba(255, 117, 117, 0.2), 0 10px 24px rgba(255, 93, 93, 0.12);
}

.confirmActions button.danger:hover:not(:disabled) {
  background: #963540;
  color: #fff7f8;
  box-shadow: 0 14px 34px rgba(255, 93, 93, 0.16);
}

.manualEmailPanel {
  min-height: 330px;
  display: grid;
  place-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.manualEmailPanel.isVisible {
  opacity: 1;
  transform: translateY(0);
}

.manualEmailPanel h2 {
  margin: 0;
  color: #f8fbfd;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1;
}

.manualEmailPanel p {
  max-width: 560px;
  margin: 16px auto 22px;
  color: #f1dfb1;
  font-size: 16px;
}

.manualEmailForm {
  width: min(520px, 100%);
  margin: 0 auto;
  text-align: left;
}

.manualEmailForm label {
  display: block;
  margin-bottom: 8px;
  color: #8393a1;
  font-size: 13px;
  font-weight: 800;
}

.manualEmailRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.customerDonePanel {
  min-height: 330px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 16px;
}

.customerDonePanel h2 {
  margin: 0;
  color: #20c878;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1;
}

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

.customerDonePanel p span {
  color: #e1bd64;
  font-weight: 800;
}

.customerDonePanel strong {
  color: #8de5bb;
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1;
}

.confettiLayer {
  position: fixed;
  inset: 0;
  z-index: 10030;
  overflow: hidden;
  pointer-events: none;
}

.confettiPiece {
  position: absolute;
  top: var(--top);
  left: var(--start-left);
  width: var(--size);
  height: calc(var(--size) * 0.55);
  border-radius: 2px;
  background: var(--color);
  opacity: 0;
  transform: translate(0, 0) rotate(0deg);
  animation: confettiBurst 1600ms cubic-bezier(0.14, 0.7, 0.22, 1) forwards;
  animation-delay: var(--delay);
}

@keyframes confettiBurst {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--travel-x), var(--travel-y)) rotate(var(--rotate));
  }
}

.manualEmailRow input {
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #263846;
  border-radius: 8px;
  background: #111a22;
  color: #f4f8fb;
  font: inherit;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.manualEmailRow input:focus {
  border-color: #20c878;
  box-shadow: 0 0 0 3px rgba(32, 200, 120, 0.14);
}

.manualEmailError {
  display: block;
  min-height: 18px;
  margin-top: 8px;
  color: #ff9b8d;
  font-size: 13px;
}

.marketButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 8px;
  background: #ffffff;
  color: #111820;
  font-weight: 900;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.marketButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(255, 152, 20, 0.18);
}

.marketButton img {
  display: block;
  flex: 0 0 auto;
}

.shopButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  background: rgba(32, 200, 120, 0.16);
  border: 1px solid rgba(32, 200, 120, 0.4);
  color: #8de5bb;
  font-weight: 900;
  text-decoration: none;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.shopButton:hover {
  transform: translateY(-1px);
  background: rgba(32, 200, 120, 0.24);
  border-color: rgba(32, 200, 120, 0.7);
  box-shadow: 0 14px 34px rgba(32, 200, 120, 0.18);
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  background: #1f9f8b;
  color: #06100f;
  font-weight: 800;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:disabled {
  background: #42505c;
  color: #8e9ba7;
  cursor: not-allowed;
}

button.ghost,
#replaceButton {
  background: #22313d;
  color: #e4edf3;
}

#copyButton {
  min-width: 132px;
}

button.isCopied {
  background: #20c878;
  color: #04120a;
  box-shadow: 0 0 0 1px rgba(32, 200, 120, 0.22), 0 10px 24px rgba(32, 200, 120, 0.16);
}

.iconButton {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #82909c;
  position: relative;
  overflow: hidden;
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.iconButton:hover:not(:disabled) {
  background: rgba(130, 144, 156, 0.12);
  color: #d8e0e6;
  transform: none;
}

.iconButton svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iconButton .copyIcon,
.iconButton .checkIcon {
  grid-area: 1 / 1;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  transition: opacity 160ms ease, transform 160ms ease;
  transform-origin: center;
}

.iconButton .checkIcon {
  color: #04120a;
  font-size: 17px;
  font-weight: 900;
  line-height: 17px;
  opacity: 0;
  transform: scale(0.82);
}

.iconButton.isCopied {
  background: #20c878;
  color: #04120a;
  box-shadow: 0 0 0 1px rgba(32, 200, 120, 0.22), 0 10px 24px rgba(32, 200, 120, 0.16);
}

.iconButton.isCopied:hover:not(:disabled) {
  background: #20c878;
  color: #04120a;
}

.iconButton.isCopied .copyIcon {
  opacity: 0;
  transform: scale(0.82);
}

.iconButton.isCopied .checkIcon {
  opacity: 1;
  transform: scale(1);
}

.supportNotice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 18px;
  border: 1px solid #5f4f2b;
  border-radius: 8px;
  background: rgba(42, 34, 18, 0.86);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.supportNotice p {
  margin: 0;
  color: #f1dfb1;
}

.deliveryShell {
  width: min(760px, 100%);
}

.deliveryPanel h1 {
  margin-bottom: 24px;
}

.deliveryList {
  display: grid;
  gap: 12px;
}

.deliveryGroups {
  display: grid;
  gap: 22px;
}

.deliveryGroup {
  display: grid;
  gap: 12px;
}

.deliveryGroup h2 {
  margin: 0;
  color: #6ad5c0;
  font-size: 22px;
  line-height: 1;
}

.deliveryRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid #263846;
  border-radius: 8px;
  background: #111a22;
}

.deliveryRow div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.deliveryRow strong {
  font-size: 17px;
}

.deliveryRow span:not(.deliveryMark) {
  color: #adbac5;
  line-height: 1.4;
}

.deliveryMark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #263846;
  color: #adbac5;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.deliveryMark.isOk {
  background: rgba(32, 200, 120, 0.15);
  color: #20c878;
}

.deliveryMark.isBad {
  background: rgba(255, 107, 107, 0.13);
  color: #ff6b6b;
}

.deliveryFootnote {
  max-width: 620px;
  margin: 26px auto 0;
  color: #f1dfb1;
  text-align: center;
}

.deliveryFootnote span {
  color: #20c878;
  font-weight: 800;
}

.warningIcon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3b93f;
  color: #1c1405;
  font-weight: 900;
}

.bulkShell {
  width: min(1120px, 100%);
}

.bulkPanel {
  width: 100%;
}

.bulkWorkspace {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

.bulkSlots {
  display: grid;
  gap: 10px;
  max-height: 400px;
  overflow: auto;
  padding: 4px 4px 4px 0;
}

.bulkSlot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  width: 100%;
  min-height: 72px;
  padding: 13px 12px 15px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: var(--k-panel-3);
  color: var(--k-text);
  box-shadow: none;
  text-align: left;
  position: relative;
  z-index: 0;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.bulkSlot:hover:not(:disabled),
.bulkSlot.isActive {
  transform: translateY(-1px);
  background: var(--k-secondary);
  border-color: var(--k-line-active);
  color: var(--k-text);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
  z-index: 2;
}

.bulkSlot.isDone {
  background: rgba(32, 200, 120, 0.12);
  border-color: rgba(32, 200, 120, 0.72);
}

.bulkSlot strong {
  grid-row: span 2;
  color: var(--k-green-text);
  font-size: 16px;
}

.bulkSlot span,
.bulkSlot small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulkSlot span {
  color: var(--k-heading);
  font-weight: 700;
}

.bulkSlot small {
  color: var(--k-faint);
}

.bulkSlot.isDone small {
  color: var(--k-green-text);
}

.bulkActivation {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.isHidden {
  display: none;
}

@media (max-width: 560px) {
  .shell {
    justify-content: flex-start;
    padding: 24px 16px;
  }

  .panel {
    padding: 22px;
  }

  .statusGrid {
    grid-template-columns: 1fr;
  }

  .bulkWorkspace {
    grid-template-columns: 1fr;
  }

  .actions,
  button {
    width: 100%;
  }

  .marketButton,
  .shopButton {
    width: 100%;
  }

  .manualEmailRow {
    grid-template-columns: 1fr;
  }

  .replaceHint {
    flex-basis: 100%;
  }

  .numberBox {
    grid-template-columns: 1fr;
  }

  .productBox {
    grid-template-columns: 1fr;
  }

  .deliveryRow {
    align-items: flex-start;
  }
}

/* Palette alignment: keep same-rank UI elements using the same role colors. */
body {
  background:
    radial-gradient(circle at 50% 0%, rgba(32, 200, 120, 0.16), transparent 34rem),
    linear-gradient(180deg, var(--k-bg) 0%, var(--k-bg-2) 58%, #090d12 100%);
  color: var(--k-text);
}

.siteName,
h1,
.manualEmailPanel h2,
strong,
.numberBox strong,
.phoneRest {
  color: var(--k-heading);
}

.siteName span,
.siteNav a:hover,
.brand,
.phonePrefix,
.actionSuccess h2,
.manualNotice h2,
.deliveryGroup h2,
.deliveryFootnote span {
  color: var(--k-green);
}

p,
.deliveryRow span:not(.deliveryMark) {
  color: var(--k-muted);
}

.siteNav,
.siteNav a,
.orderBadge,
.homeButtonsLabel,
.label,
.manualEmailForm label,
.countryBadge,
.replaceHint,
.deliveryMark {
  color: var(--k-faint);
}

.panel,
.statusGrid > div,
.deliveryRow,
.manualEmailRow input {
  background: var(--k-panel);
  border-color: var(--k-line);
}

.numberBox,
.productBox {
  background: var(--k-panel-2);
  border-color: var(--k-line-active);
}

.productBox pre {
  background: var(--k-panel-3);
  border-color: var(--k-line);
  color: var(--k-heading);
}

.marketButton,
.shopButton,
button {
  background: var(--k-green);
  border: 0;
  color: var(--k-button-text);
  box-shadow: 0 0 0 1px rgba(32, 200, 120, 0.22), 0 10px 24px rgba(32, 200, 120, 0.16);
}

.marketButton:hover,
.shopButton:hover,
button:hover:not(:disabled) {
  background: var(--k-green);
  color: var(--k-button-text);
  box-shadow: 0 14px 34px rgba(32, 200, 120, 0.18);
}

button.ghost,
#replaceButton {
  background: var(--k-secondary);
  color: var(--k-text);
  box-shadow: none;
}

button.compact,
.adminButtonLink.compact {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
}

button.ghost:hover:not(:disabled),
#replaceButton:hover:not(:disabled) {
  background: #2a3a47;
  color: var(--k-text);
}

.confirmActions button.danger {
  background: #7f2d36;
  color: #fff0f1;
  box-shadow: 0 0 0 1px rgba(255, 117, 117, 0.2), 0 10px 24px rgba(255, 93, 93, 0.12);
}

.confirmActions button.danger:hover:not(:disabled) {
  background: #963540;
  color: #fff7f8;
  box-shadow: 0 14px 34px rgba(255, 93, 93, 0.16);
}

button:disabled {
  background: var(--k-disabled);
  color: var(--k-disabled-text);
  box-shadow: none;
}

button.isCopied,
.iconButton.isCopied,
.iconButton.isCopied:hover:not(:disabled) {
  background: var(--k-green);
  color: var(--k-button-text);
}

.iconButton {
  background: transparent;
  color: var(--k-faint);
  box-shadow: none;
}

.iconButton:hover:not(:disabled) {
  background: rgba(131, 147, 161, 0.12);
  color: var(--k-text);
}

.shopButton {
  border: 0;
}

.manualEmailRow input:focus {
  border-color: var(--k-green);
}

.actionSuccess p,
.deliveryMark.isOk {
  color: var(--k-green-text);
}

.deliveryMark {
  background: var(--k-line);
}

.deliveryMark.isOk {
  background: rgba(32, 200, 120, 0.15);
}

.deliveryMark.isBad {
  background: rgba(255, 107, 107, 0.13);
  color: var(--k-danger);
}

.manualEmailPanel p,
.supportNotice p,
.deliveryFootnote {
  color: var(--k-warning);
}

.manualNotice p {
  color: var(--k-muted);
}

.supportNotice {
  background: var(--k-warning-bg);
  border-color: var(--k-warning-line);
}

.manualEmailError {
  color: var(--k-danger-text);
}

.warningIcon {
  background: var(--k-warning);
  color: #1c1405;
}

/* Keep homepage shop buttons in their original visual roles. */
.homeButtons .marketButton {
  background: #ffffff;
  border: 0;
  color: #111820;
  box-shadow: none;
}

.homeButtons .marketButton:hover {
  background: #ffffff;
  color: #111820;
  box-shadow: 0 14px 34px rgba(255, 152, 20, 0.18);
}

.homeButtons .shopButton {
  background: rgba(32, 200, 120, 0.16);
  border: 1px solid rgba(32, 200, 120, 0.4);
  color: #8de5bb;
  box-shadow: none;
}

.homeButtons .shopButton:hover {
  background: rgba(32, 200, 120, 0.24);
  border-color: rgba(32, 200, 120, 0.7);
  color: #8de5bb;
  box-shadow: 0 14px 34px rgba(32, 200, 120, 0.18);
}

/* Admin panel */
.adminBody {
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 0%, rgba(32, 200, 120, 0.18), transparent 30rem),
    linear-gradient(180deg, var(--k-bg) 0%, #0a1117 100%);
}

.adminLogin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.adminLoginBox {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 30px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: rgba(17, 25, 33, 0.96);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36);
}

.adminLoginBox h1,
.adminTopbar h1,
.adminPanel h2 {
  margin: 0;
  color: var(--k-heading);
  letter-spacing: 0;
}

.adminLoginBox h1 {
  font-size: 28px;
}

.adminLoginBox label,
.adminStack label,
.adminOrderMessage label {
  color: var(--k-muted);
  font-size: 13px;
  font-weight: 800;
}

.adminLoginBox input,
.adminMain input,
.adminMain select,
.adminMain textarea,
.adminModal input,
.adminModal textarea,
.sellerChat textarea {
  width: 100%;
  border: 1px solid var(--k-line);
  border-radius: 7px;
  background: #0d141c;
  color: var(--k-text);
  font: inherit;
  line-height: 1.35;
  outline: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.adminLoginBox input,
.adminMain input,
.adminMain select,
.adminModal input {
  min-height: 44px;
  padding: 0 12px;
}

.adminMain select {
  appearance: none;
  padding-right: 40px;
  background:
    linear-gradient(45deg, transparent 50%, var(--k-green-text) 50%) calc(100% - 20px) 19px / 6px 6px no-repeat,
    linear-gradient(135deg, var(--k-green-text) 50%, transparent 50%) calc(100% - 14px) 19px / 6px 6px no-repeat,
    #0d141c;
  cursor: pointer;
}

.adminMain textarea,
.adminModal textarea,
.sellerChat textarea {
  min-height: 44px;
  resize: vertical;
  padding: 10px 12px;
}

.sellerChat textarea {
  resize: none;
}

.adminLoginBox input:focus,
.adminMain input:focus,
.adminMain select:focus,
.adminMain textarea:focus,
.adminModal input:focus,
.adminModal textarea:focus,
.sellerChat textarea:focus {
  border-color: var(--k-green);
  box-shadow: 0 0 0 3px rgba(32, 200, 120, 0.14);
}

.adminLayout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}

.adminSidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  border-right: 1px solid var(--k-line);
  background: rgba(10, 17, 23, 0.94);
}

.adminLogo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 48px;
  padding: 0 10px;
  color: var(--k-heading);
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 0;
}

.adminLogo span {
  color: var(--k-green);
  font-size: 34px;
  line-height: 1;
}

.adminNav {
  display: grid;
  gap: 8px;
}

.adminNav button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  background: transparent;
  color: var(--k-muted);
  box-shadow: none;
}

.adminNav button:hover:not(:disabled),
.adminNav button.isActive {
  background: rgba(32, 200, 120, 0.13);
  color: var(--k-heading);
  transform: none;
}

.adminNav button.isActive {
  box-shadow: inset 3px 0 0 var(--k-green);
}

.adminNavBadge,
.adminThreadBadge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--k-danger);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.adminNavBadge[hidden],
.adminThreadBadge[hidden] {
  display: none !important;
}

.adminMain {
  min-width: 0;
  padding: 28px;
}

.adminTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.adminTopbarActions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.adminTopbarLink {
  min-height: 44px;
}

.adminTopbar h1 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
}

.adminSection {
  position: relative;
  display: grid;
  gap: 18px;
}

.adminSection.isSwitching {
  animation: adminSectionReveal 180ms ease both;
}

.adminSection.isLoading::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 8;
  background: rgba(11, 16, 23, 0.22);
  pointer-events: none;
}

.adminSection.isLoading::after {
  content: "";
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--k-green-soft);
  border-radius: 50%;
  animation: adminSectionSpin 760ms linear infinite;
  pointer-events: none;
}

@keyframes adminSectionReveal {
  from {
    opacity: 0.72;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes adminSectionSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.adminSection.isHidden,
.adminLogin.isHidden,
.adminLayout.isHidden {
  display: none;
}

.adminCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.adminCard,
.adminPanel,
.adminOrderCard,
.adminStockItem,
.adminMailItem {
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: rgba(17, 25, 33, 0.94);
}

.adminMuted {
  margin: 10px 0 0;
  color: var(--k-faint);
  font-size: 14px;
  line-height: 1.45;
}

.adminMuted a {
  color: var(--k-green-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.adminMuted a:hover {
  text-decoration: underline;
}

.adminSettingsForm {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.adminSettingsForm label {
  display: grid;
  gap: 7px;
  min-width: min(260px, 100%);
  color: var(--k-faint);
  font-size: 13px;
  font-weight: 800;
}

.adminSettingsForm input {
  width: 180px;
}

.adminSettingsFormWide {
  align-items: start;
  margin-top: 14px;
}

.adminSettingsFormWide label {
  width: min(720px, 100%);
}

.adminSettingsFormWide textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
}

.adminCard {
  display: grid;
  gap: 7px;
  padding: 18px;
}

.adminCard span,
.adminCard small,
.adminOrderHead span,
.adminOrderCard dt,
.adminThread small,
.adminMessage time,
.sellerChatMessage time {
  color: var(--k-faint);
}

.adminCard strong {
  color: var(--k-heading);
  font-size: 26px;
  line-height: 1.05;
}

.adminCard.isDanger {
  border-color: rgba(255, 107, 107, 0.55);
  background: rgba(42, 18, 22, 0.78);
}

.adminCard.isDanger strong,
.adminCard.isDanger small {
  color: var(--k-danger-text);
}

.adminPanel {
  padding: 20px;
}

.adminPanelHead,
.adminActions,
.adminPager,
.adminOrderHead,
.adminOrderActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.adminChatHeaderActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.adminActions {
  margin-top: 16px;
}

.adminOrderChatButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.adminOrderChatBadge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--k-panel-2);
  border-radius: 999px;
  background: #ff3b3b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.adminAdvertisingGrid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(380px, 1.15fr);
  gap: 16px;
  align-items: start;
}

.adminAdvertisingSession {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: rgba(10, 18, 24, 0.72);
}

.adminAdvertisingSession div {
  display: grid;
  gap: 3px;
  min-width: 190px;
}

.adminAdvertisingSession span {
  color: var(--k-faint);
  font-size: 13px;
}

.adminAdvertisingSession strong {
  color: var(--k-heading);
}

.adminAdvertisingSession .isOnline {
  color: var(--k-green-text);
}

.adminAdvertisingSession .isOffline {
  color: var(--k-danger-text);
}

.adminAdvertisingMetric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: rgba(10, 18, 24, 0.56);
}

.adminAdvertisingMetric span,
.adminAdvertisingSummary span,
.adminAdvertisingLogPanel small {
  color: var(--k-faint);
}

.adminAdvertisingMetric strong {
  margin-left: auto;
}

.adminAdvertisingMetric button {
  flex: 0 0 auto;
}

#advertisingBotControl {
  margin: 0 0 16px;
}

.adminAdvertisingSummary {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.adminAdvertisingSummary div {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(38, 56, 70, 0.65);
}

.adminAdvertisingSummary strong {
  color: var(--k-heading);
  line-height: 1.35;
}

.adminAdvertisingSummary div.isOwnBid strong,
.adminAdvertisingBidList strong.isOwnBid {
  color: var(--k-green-text);
}

.adminAdvertisingSummary div.isPlan strong {
  white-space: pre-line;
}

.adminAdvertisingPlanDetails {
  color: var(--k-faint);
  font-weight: 500;
}

.adminAdvertisingSummary .adminAdvertisingBidList {
  gap: 6px;
}

.adminAdvertisingSummary .adminAdvertisingBidHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 8px;
}

.adminAdvertisingBidHead button {
  flex: 0 0 auto;
}

.adminAdvertisingBidList strong {
  font-size: 13px;
}

.adminAdvertisingBidList strong.isMuted {
  color: var(--k-faint);
}

.adminAdvertisingBidList strong.isOwnBid {
  color: var(--k-green-text);
}

.adminAdvertisingLogs {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.adminAdvertisingLogEntry {
  padding: 9px 10px;
  border: 1px solid rgba(38, 56, 70, 0.72);
  border-radius: 8px;
  background: rgba(10, 18, 24, 0.48);
  color: var(--k-muted);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.adminOrderDeliveryActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.adminPanelHead + .adminList {
  margin-top: 18px;
}

.adminStockTools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  margin-bottom: 16px;
}

.adminStockTools span {
  color: var(--k-faint);
  font-size: 14px;
}

#emailImportForm {
  margin-top: 18px;
}

.adminList,
.adminStack,
.adminSearch,
.adminOrderMessage {
  display: grid;
  gap: 12px;
}

.adminOrderMessage {
  margin-bottom: 20px;
}

.adminSearch {
  grid-template-columns: minmax(180px, 320px) auto;
  align-items: end;
  margin-top: 16px;
  margin-bottom: 16px;
}

.adminOrderCard {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.adminOrderDetail {
  margin-top: 18px;
}

.adminOrderHead strong,
.adminStockItem strong,
.adminThread strong {
  color: var(--k-heading);
}

.adminOrderEmail {
  display: inline-block;
  margin-left: 10px;
  color: var(--k-faint);
  font-size: 12px;
  line-height: 1.35;
}

.adminButtonLink {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--k-line);
  border-radius: 7px;
  background: var(--k-secondary);
  color: var(--k-text);
  font-weight: 800;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.adminButtonLink:hover {
  transform: translateY(-1px);
  border-color: rgba(141, 229, 187, 0.28);
  background: #2a3a47;
  color: var(--k-heading);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.adminOrderCard dl {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
}

.adminOrderCard dt,
.adminOrderCard dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.adminOrderCard dd {
  color: var(--k-text);
}

.adminStockItem {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.adminMailLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

.adminMailList {
  margin-top: 18px;
}

.adminEmailsToolbar {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.adminEmailFolderTabs {
  width: max-content;
}

.adminEmailFolderTabs button {
  width: 112px;
}

.adminEmailsActionRow,
.adminEmailActions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.adminEmailsActionRow {
  justify-content: space-between;
}

.adminEmailPager {
  justify-content: flex-end;
  margin-left: auto;
}

.adminWideModalBox {
  width: min(920px, calc(100vw - 32px));
}

#chatgptManualCheckInput,
.adminManualCheckResult {
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.adminManualCheckResult {
  min-height: 0;
  max-height: 360px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--k-line);
  border-radius: 7px;
  background: var(--k-panel-3);
  color: var(--k-text);
  line-height: 1.5;
}

.adminManualCheckResult:empty {
  display: none;
}

.adminCodexDoneHint {
  display: block;
  margin: 8px 0 16px;
  color: var(--k-faint);
  font-size: 13px;
  line-height: 1.35;
}

.adminCodexDoneHint.isHidden {
  display: none;
}

.adminPagerBottom {
  justify-content: flex-end;
  margin-top: 16px;
}

.adminMailItem {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.adminMailTopRow,
.adminMailBottomRow,
.adminMailCompactActions,
.adminMailMainActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adminMailTopRow,
.adminMailBottomRow {
  justify-content: space-between;
}

.adminMailPageNumber {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--k-faint);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.adminMailTopRow .adminMailAddress {
  flex: 1 1 auto;
}

.adminMailCompactActions,
.adminMailMainActions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.adminMailCompactActions {
  flex-wrap: nowrap;
  margin-left: auto;
}

.adminMailBottomRow {
  justify-content: flex-end;
}

.adminMailPlanMeta {
  margin-right: auto;
  color: var(--k-faint);
  font-size: 12px;
  line-height: 1.35;
}

#emailsActiveTab.isActive,
#emailsArchiveTab.isActive {
  border-color: rgba(32, 200, 120, 0.62);
  background: rgba(32, 200, 120, 0.14);
  color: var(--k-green-text);
}

.adminMailItem.isDone {
  border-color: rgba(32, 200, 120, 0.72);
  background: rgba(32, 200, 120, 0.12);
}

.adminMailItem.isBad {
  border-color: rgba(255, 107, 107, 0.78);
  background: rgba(255, 107, 107, 0.12);
}

.adminMailItem .iconButton,
.adminMailRejectButton,
.adminSmsBox .iconButton {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--k-line);
  background: var(--k-secondary);
  color: var(--k-text);
}

.adminMailItem .adminMailAllButton {
  width: 42px;
  font-size: 12px;
  font-weight: 800;
}

.adminMailRejectButton {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-color: rgba(255, 107, 107, 0.56);
  background: rgba(255, 107, 107, 0.18);
  color: var(--k-danger-text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

.adminMailRejectButton span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  transform: translateY(-1px);
}

.adminMailRejectButton:hover:not(:disabled) {
  border-color: rgba(255, 107, 107, 0.86);
  background: rgba(255, 107, 107, 0.28);
  color: #fff;
}

.adminMailAddress {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--k-line);
  border-radius: 7px;
  background: #0d141c;
  color: var(--k-heading);
  box-shadow: none;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminMailCode {
  width: 146px;
  min-width: 146px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: var(--k-faint);
  font-size: 13px;
  white-space: nowrap;
}

.adminMailCode strong {
  color: var(--k-green-text);
}

.adminCodeCopyButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  min-width: 94px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(32, 200, 120, 0.42);
  border-radius: 7px;
  background: rgba(32, 200, 120, 0.16);
  color: var(--k-green-text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

.adminCodeCopyButton:hover:not(:disabled) {
  background: rgba(32, 200, 120, 0.24);
  color: var(--k-text);
}

.adminSmsBox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: #0d141c;
}

.adminSmsBox span {
  grid-column: 1 / -1;
  color: var(--k-faint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.adminSmsBox strong {
  min-width: 0;
  overflow: hidden;
  color: var(--k-heading);
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminSmsBox .iconButton {
  align-self: center;
}

.adminClaudeSmsPanel .adminActions {
  justify-content: flex-start;
}

.adminRandomNameBox {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-top: 18px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: rgba(13, 20, 28, 0.9);
}

.adminRandomNameBox > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.adminRandomNameBox span {
  color: var(--k-faint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.adminRandomNameBox strong {
  min-width: 0;
  color: var(--k-heading);
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.adminRandomNameBox small {
  min-height: 17px;
  color: var(--k-faint);
  font-size: 12px;
}

.adminRandomNameActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.adminRandomNameActions .iconButton {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: 1px solid var(--k-line);
  background: var(--k-secondary);
  color: var(--k-text);
}

.adminModal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 9, 13, 0.72);
}

.adminModal.isHidden {
  display: none;
}

.adminModalBox {
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--k-line-active);
  border-radius: 8px;
  background: #111a22;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.adminModalBox.adminStockEditBox {
  width: min(640px, 100%);
}

.adminModalBox h2 {
  margin: 0;
  color: var(--k-heading);
  font-size: 22px;
  line-height: 1.15;
}

.adminModalTitle {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--k-line);
}

.adminModalBox dl {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.adminModalBox dt,
.adminModalBox dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.adminModalBox dd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.adminModalBox dd span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.emailSecretAtRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.emailSecretAtRow.isHidden {
  display: none;
}

.emailSecretAtRow input {
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  text-overflow: clip;
}

.emailSecretAtRow .iconButton {
  width: 38px;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
}

.adminModalBox dt {
  color: var(--k-faint);
}

.adminFieldLabel {
  margin-top: 4px;
  color: var(--k-muted);
}

#codexOpenaiCopyMailPassword {
  width: 34px;
  height: 34px;
  min-height: 34px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--k-line);
  background: var(--k-secondary);
  color: var(--k-text);
  font-size: 17px;
  line-height: 1;
  text-align: center;
}

#stockEditContent {
  min-height: 180px;
}

.adminStockInstructionForm {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--k-line);
}

.adminStockInstructionForm .adminFieldLabel {
  margin-bottom: 6px;
}

.adminStockInstructionForm .adminActions {
  margin-top: 12px;
}

.adminStockInstructionForm textarea,
#stockEditInstruction {
  width: 100%;
  min-height: 112px;
  border: 1px solid var(--k-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--k-text);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.adminStockItem pre {
  overflow: auto;
  max-height: 220px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--k-line);
  border-radius: 7px;
  background: var(--k-panel-3);
  color: var(--k-text);
  white-space: pre-wrap;
}

.adminStockMeta {
  display: grid;
  gap: 5px;
  color: var(--k-faint);
  font-size: 13px;
}

.adminStockMeta > span,
.productFormatHint {
  white-space: pre-wrap;
}

.adminStockLoginRow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.adminStockLoginLink {
  display: inline-flex;
  width: fit-content;
  color: var(--k-green-text);
  font-size: 13px;
  text-decoration: none;
}

.adminStockLoginLink:hover {
  text-decoration: underline;
}

.adminImageViewer,
.sellerChatImageViewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(2, 6, 12, 0.82);
  backdrop-filter: blur(8px);
}

.adminImageViewer.isHidden,
.sellerChatImageViewer.isHidden,
.adminImageViewer[hidden],
.sellerChatImageViewer[hidden] {
  display: none !important;
}

.adminImageViewer img,
.sellerChatImageViewer img {
  max-width: min(1080px, 96vw);
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
}

.adminImageViewerClose,
.sellerChatImageViewerClose {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 999px;
  padding: 0;
  font-size: 28px;
  line-height: 1;
}

.adminSegmented,
.adminBulkActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.adminSegmented button {
  width: auto;
  min-height: 36px;
  padding: 9px 14px;
  border: 1px solid var(--k-line);
  background: var(--k-panel-3);
  color: var(--k-muted);
}

.adminSegmented button.isActive {
  border-color: rgba(32, 200, 120, 0.58);
  background: rgba(32, 200, 120, 0.14);
  color: var(--k-heading);
}

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

.adminStockSelect input {
  position: relative;
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: 0 0 auto;
  padding: 0;
  appearance: none;
  border: 1px solid var(--k-line);
  border-radius: 6px;
  background: #0d141c;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.adminStockSelect input:hover {
  border-color: var(--k-line-active);
  background: rgba(32, 200, 120, 0.08);
}

.adminStockSelect input:focus-visible {
  outline: 0;
  border-color: var(--k-green);
  box-shadow: 0 0 0 3px rgba(32, 200, 120, 0.14);
}

.adminStockSelect input:checked {
  border-color: rgba(32, 200, 120, 0.78);
  background: var(--k-green);
  box-shadow: 0 0 0 1px rgba(32, 200, 120, 0.22), 0 8px 18px rgba(32, 200, 120, 0.12);
}

.adminStockSelect input:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--k-button-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

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

.adminBulkActions .danger,
.adminStockActions .danger {
  border-color: rgba(255, 93, 93, 0.35);
  color: #ffb5b5;
}

.adminSwitchLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: var(--k-panel-3);
}

.adminSwitchLine strong,
.adminSwitchLine small {
  display: block;
}

.adminSwitchLine small {
  margin-top: 4px;
  color: var(--k-faint);
}

.adminSwitchLine input {
  width: 20px;
  height: 20px;
  accent-color: var(--k-green);
}

.adminSelfActivationBlock {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(32, 200, 120, 0.28);
  border-radius: 8px;
  background: rgba(32, 200, 120, 0.08);
}

.adminSelfActivationBlock > strong,
.adminChatSelfActivation,
.adminThreadSelfActivation {
  color: var(--k-green-text);
  font-weight: 900;
}

.adminSelfActivationBlock dl {
  margin: 0;
}

.adminSelfActivationClose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(32, 200, 120, 0.18);
}

.adminSelfActivationClose span {
  display: grid;
  gap: 4px;
}

.adminSelfActivationClose small {
  color: var(--k-faint);
}

.adminStockDeliveryBlock {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(32, 200, 120, 0.28);
  border-radius: 8px;
  background: rgba(32, 200, 120, 0.08);
}

.adminStockDeliveryHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.adminStockDeliveryHead strong {
  color: var(--k-green-text);
  font-weight: 900;
}

.adminStockDeliveryBlock pre {
  overflow: auto;
  max-height: 260px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--k-line);
  border-radius: 7px;
  background: var(--k-panel-3);
  color: var(--k-heading);
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}

.adminStockExtraBlock {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.adminStockExtraHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.adminStockExtraBlock strong {
  color: var(--k-green-text);
  font-size: 13px;
}

.adminStockExtraBlock small {
  color: var(--k-faint);
}

.adminThreadSelfActivation {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminSettingCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: #0d141c;
}

.adminSettingCard strong {
  display: block;
  color: var(--k-heading);
  font-size: 15px;
}

.adminSettingCard span {
  display: block;
  margin-top: 4px;
  color: var(--k-faint);
  font-size: 13px;
  line-height: 1.35;
}

.adminSwitch {
  flex: 0 0 auto;
  width: 58px;
  min-height: 32px;
  padding: 3px;
  border-radius: 999px;
  background: var(--k-secondary);
  box-shadow: none;
}

.adminSwitch span {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: 50%;
  background: var(--k-faint);
  transition: transform 180ms ease, background 180ms ease;
}

.adminSwitch[aria-pressed="true"] {
  background: rgba(32, 200, 120, 0.18);
}

.adminSwitch[aria-pressed="true"] span {
  background: var(--k-green);
  transform: translateX(26px);
}

.adminChatLayout {
  display: grid;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  gap: 18px;
  height: calc(100vh - 112px);
  min-height: 0;
}

.adminChatListPanel,
.adminChatPanel {
  min-width: 0;
  min-height: 0;
}

.adminChatListPanel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.adminChatPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  overflow: hidden;
}

.adminChatTitleWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.adminChatTitleWrap h2 {
  min-width: 0;
  display: grid;
  gap: 2px;
  overflow: hidden;
}

.adminChatOrderLine {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.adminChatOrderLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminChatEmailStack,
.adminThreadEmailStack {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  justify-items: start;
  gap: 4px;
  overflow: visible;
}

.adminChatBuyerEmail,
.adminChatCustomerEmail,
.adminChatSelfActivation,
.adminThreadEmail,
.adminThreadCustomerEmail {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--k-faint);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminChatCustomerEmail,
.adminThreadCustomerEmail {
  color: var(--k-nav);
}

.adminChatCustomerEmail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.adminChatCustomerEmail span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminChatEmailCopy {
  flex: 0 0 auto;
  width: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
}

.adminChatOrderActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chatThreads {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
  padding-right: 4px;
  align-content: start;
}

.adminThread {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 152px;
  height: auto;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 8px;
  justify-items: start;
  text-align: left;
  align-content: start;
  padding: 14px;
  background: #0d141c;
  color: var(--k-muted);
  border: 1px solid var(--k-line);
  box-shadow: none;
  line-height: 1.35;
  overflow: visible;
}

.adminThreadTop {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
}

.adminThreadTop strong {
  flex: 1 1 auto;
}

.adminThreadBadge {
  flex: 0 0 auto;
}

.adminThreadTop strong,
.adminThreadTitle,
.adminThread small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.45;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminThreadTitle {
  color: var(--k-text);
}

.adminThread:hover .adminThreadTitle,
.adminThread.isActive .adminThreadTitle {
  color: var(--k-text);
}

.adminThread:hover:not(:disabled),
.adminThread.isActive {
  background: rgba(32, 200, 120, 0.12);
  border-color: var(--k-line-active);
  transform: none;
}

.adminChatMessages {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: #0b1219;
}

.adminMessage,
.sellerChatMessage {
  width: fit-content;
  max-width: min(560px, 86%);
  display: grid;
  gap: 7px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: #14202a;
  color: var(--k-text);
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}

.adminMessage.isMine,
.sellerChatMessage.isMine {
  margin-left: auto;
  background: rgba(32, 200, 120, 0.16);
  border-color: rgba(32, 200, 120, 0.42);
}

.adminMessage p,
.sellerChatMessage p {
  margin: 0;
  color: inherit;
  white-space: pre-wrap;
  line-height: 1.42;
}

.adminMessageMeta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.messageReceipt {
  justify-self: end;
  color: var(--k-faint);
  font-size: 11px;
  line-height: 1;
}

.messageReceipt.isRead {
  color: var(--k-green-text);
}

.messageDelete {
  width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(238, 244, 248, 0.18);
  border-radius: 50%;
  background: rgba(238, 244, 248, 0.05);
  color: var(--k-faint);
  box-shadow: none;
  line-height: 1;
}

.messageDelete:hover {
  border-color: var(--k-danger);
  color: #fff;
  background: rgba(255, 79, 96, 0.16);
}

.messageDelete.isLocked {
  border-color: rgba(255, 184, 77, 0.38);
  color: #ffb84d;
  background: rgba(255, 184, 77, 0.08);
}

.adminMessage img,
.sellerChatMessage img {
  display: block;
  max-width: min(320px, 100%);
  max-height: 280px;
  border-radius: 7px;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
}

.adminTypingIndicator,
.sellerChatTyping {
  min-height: 20px;
  color: var(--k-green-text);
  font-size: 13px;
  line-height: 20px;
}

.adminTypingIndicator {
  padding: 0 2px;
}

.adminChatForm,
.sellerChatForm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.adminFileButton,
.chatAttachButton,
.sellerChatAttach {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: var(--k-secondary);
  color: var(--k-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.chatAttachButton,
.sellerChatAttach {
  width: 44px;
  padding: 0;
  font-size: 18px;
}

.adminFileButton:hover,
.adminFileButton:focus-within,
.chatAttachButton:hover,
.chatAttachButton:focus-within,
.sellerChatAttach:hover,
.sellerChatAttach:focus-within {
  transform: translateY(-1px);
  border-color: rgba(32, 200, 120, 0.7);
  background: rgba(32, 200, 120, 0.16);
  color: var(--k-heading);
  box-shadow: 0 0 0 1px rgba(32, 200, 120, 0.16), 0 10px 24px rgba(32, 200, 120, 0.12);
}

.adminFileButton input,
.chatAttachButton input,
.sellerChatAttach input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.adminToast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10000;
  max-width: min(340px, calc(100vw - 44px));
  padding: 12px 14px;
  border: 1px solid var(--k-line-active);
  border-radius: 8px;
  background: #10231f;
  color: var(--k-heading);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translateY(8px);
  transition: bottom 220ms ease, opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.adminToast.isVisible {
  opacity: 1;
  transform: translateY(0);
}

.adminToast.isLeaving {
  opacity: 0;
  transform: translateY(8px);
}

/* Buyer chat widget */
.sellerChat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9990;
  font-family: inherit;
}

.sellerChatButton {
  min-width: 172px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(32, 200, 120, 0.24);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.sellerChat.isOpen .sellerChatButton {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  visibility: hidden;
}

.sellerChatPanel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(440px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 110px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid var(--k-line);
  border-radius: 8px;
  background: rgba(17, 25, 33, 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.98);
  transform-origin: right bottom;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
  visibility: hidden;
}

.sellerChat.isOpen .sellerChatPanel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.sellerChatPanel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--k-line);
  background: #0d141c;
}

.sellerChatPanel header strong {
  display: block;
  color: var(--k-heading);
  font-size: 18px;
}

.sellerChatPanel header span {
  display: block;
  margin-top: 2px;
  color: var(--k-faint);
  font-size: 12px;
  line-height: 1.35;
}

.sellerChatClose {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 7px;
  background: var(--k-secondary);
  color: var(--k-heading);
  box-shadow: none;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.sellerChatClose:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(32, 200, 120, 0.7);
  background: rgba(32, 200, 120, 0.16);
  color: var(--k-heading);
  box-shadow: 0 0 0 1px rgba(32, 200, 120, 0.16), 0 10px 24px rgba(32, 200, 120, 0.12);
}

.sellerChatMessages {
  overflow: auto;
  padding: 14px 14px 6px;
  background: #0b1219;
}

.sellerChatTyping {
  padding: 0 14px 8px;
  background: #0b1219;
}

.sellerChatForm {
  padding: 12px 12px 16px;
  border-top: 1px solid var(--k-line);
  background: #0d141c;
  align-items: center;
}

.sellerChatForm .sellerChatAttach,
.sellerChatForm button {
  height: 46px;
  min-height: 46px;
  align-self: center;
}

.sellerChatForm textarea {
  height: 46px;
  min-height: 46px;
  align-self: center;
  padding-top: 11px;
  padding-bottom: 11px;
}

.sellerChatForm button {
  min-width: 108px;
  box-shadow: 0 0 0 1px rgba(32, 200, 120, 0.22), 0 8px 18px rgba(32, 200, 120, 0.14);
}

.sellerChatFile {
  min-height: 0;
  padding: 0 12px 10px;
  background: #0d141c;
  color: var(--k-green-text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.sellerChatFile:empty {
  display: none;
}

@keyframes buttonSpinner {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

button.isLoading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  transition: color 140ms ease;
}

button.isLoading:disabled {
  background: var(--k-green);
  box-shadow: 0 0 0 1px rgba(32, 200, 120, 0.22), 0 10px 24px rgba(32, 200, 120, 0.16);
}

button.ghost.isLoading:disabled {
  background: var(--k-secondary);
  box-shadow: none;
}

.adminSwitch.isLoading:disabled {
  background: rgba(32, 200, 120, 0.18);
}

button.isLoading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid rgba(4, 18, 10, 0.26);
  border-top-color: var(--k-button-text);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: buttonSpinner 700ms linear infinite;
}

button.ghost.isLoading::after,
.adminSwitch.isLoading::after,
.chatAttachButton.isLoading::after,
.sellerChatAttach.isLoading::after {
  border-color: rgba(238, 244, 248, 0.28);
  border-top-color: var(--k-text);
}

.giftOffer .giftPromoCopy,
.giftOffer .giftPromoCopy:disabled {
  border-color: rgba(225, 189, 100, 0.34);
  background: rgba(225, 189, 100, 0.12);
  color: #e1bd64;
  box-shadow: none;
}

.giftOffer .giftPromoCopy:hover:not(:disabled),
.giftOffer .giftPromoCopy:focus-visible {
  border-color: rgba(225, 189, 100, 0.58);
  background: rgba(225, 189, 100, 0.24);
  color: #e1bd64;
  box-shadow: 0 0 0 3px rgba(225, 189, 100, 0.12);
}

.giftOffer .giftPromoCopy.isCopied,
.giftOffer .giftPromoCopy.isCopied:hover:not(:disabled) {
  border-color: rgba(225, 189, 100, 0.7);
  background: #2b220f;
  color: #e1bd64;
  box-shadow: 0 0 0 3px rgba(225, 189, 100, 0.1);
}

.giftOffer .giftPromoCopy.isCopied::after {
  color: #ffe3a0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

@media (max-width: 900px) {
  .adminLayout {
    grid-template-columns: 1fr;
  }

  .adminSidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--k-line);
  }

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

  .adminCards,
  .adminChatLayout,
  .adminMailLayout,
  .adminAdvertisingGrid {
    grid-template-columns: 1fr;
  }

  .adminChatLayout {
    height: auto;
  }

  .adminChatPanel {
    min-height: 520px;
  }

  .adminChatMessages {
    max-height: 420px;
  }

  .chatThreads {
    max-height: 260px;
  }
}

@media (max-width: 560px) {
  .adminMain {
    padding: 18px 14px 96px;
  }

  .adminTopbar {
    align-items: flex-start;
  }

  .adminTopbarActions {
    width: auto;
  }

  .adminNav,
  .adminSearch,
  .adminOrderCard dl,
  .adminChatForm {
    grid-template-columns: 1fr;
  }

  .sellerChatForm {
    grid-template-columns: 44px minmax(0, 1fr) 94px;
    gap: 8px;
  }

  .sellerChatForm button {
    min-width: 94px;
    padding: 0 10px;
    font-size: 13px;
  }

  .adminCards {
    grid-template-columns: 1fr;
  }

  .adminMailItem {
    gap: 8px;
  }

  .adminMailTopRow,
  .adminMailBottomRow {
    align-items: stretch;
    flex-direction: column;
  }

  .adminMailCompactActions,
  .adminMailMainActions {
    justify-content: flex-start;
  }

  .adminMailTopRow .adminMailAddress {
    width: 100%;
    max-width: 100%;
  }

  .adminMailCompactActions {
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .adminMailBottomRow {
    align-items: flex-start;
  }

  .adminMailMainActions {
    width: 100%;
  }

  .adminPanel {
    padding: 16px;
  }

  .sellerChat {
    right: 10px;
    bottom: 10px;
    left: auto;
  }

  .sellerChatButton {
    min-width: 0;
    width: auto;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 14px;
  }

  .sellerChatPanel {
    left: auto;
    right: 0;
    width: min(360px, calc(100vw - 20px));
  }
}